ساخت وب سایت آژانس Sunnyside با React

Summarize this content to 400 words in Persian Lang

مقدمه

به گزارش تفصیلی وب سایت Sunnyside Agency خوش آمدید، یک سایت مدرن و شیک که با استفاده از React ساخته شده است. این پروژه قدرت React را در ایجاد برنامه های وب پویا و واکنش گرا به نمایش می گذارد. بیایید به اجزای مختلفی که این پروژه را تشکیل می‌دهند بپردازیم و چگونگی ترکیب آنها برای ایجاد یک تجربه کاربری جذاب را بررسی کنیم.

بررسی اجمالی پروژه

وب سایت آژانس Sunnyside برای برجسته کردن خدمات، پروژه ها و توصیفات یک آژانس خلاق طراحی شده است. دارای طراحی تمیز و حرفه ای با پیمایش صاف و طرح بندی های پاسخگو است. وب سایت شامل بخش های زیر است:

صفحه اصلی
درباره
خدمات
پروژه ها
گواهینامه ها
پاورقی

ویژگی ها

طراحی واکنشگرا: با اندازه های مختلف صفحه نمایش برای تجربه تماشای بهینه سازگار است.

پیمایش صاف: ناوبری پیشرفته با پیمایش صاف بین بخش ها.

محتوای پویا: کامپوننت های React بخش های مختلف وب سایت را به صورت پویا ارائه می کنند.

عناصر تعاملی: شامل دکمه‌ها و پیوندهایی با جلوه‌های شناور و انتقال است.

فن آوری های مورد استفاده

واکنش نشان دهید: برای ساخت رابط کاربری و مدیریت وضعیت.

CSS: برای یک ظاهر طراحی شده به اجزا و اطمینان از طراحی جذاب بصری.

فونت های گوگل: برای تایپوگرافی سفارشی برای افزایش زیبایی شناسی وب سایت.

React Scroll: برای پیمایش صاف بین بخش ها.

ساختار پروژه

این پروژه در اجزای مختلف React سازماندهی شده است که هر کدام مسئول بخش خاصی از وب سایت هستند:

App.js: جزء اصلی که همه اجزای دیگر را رندر می کند.

Navbar.js: شامل نوار پیمایش با پیوندهایی به بخش های مختلف است.

Home.js: محتوای مقدماتی و تصویر اصلی را نمایش می دهد.

About.js: اطلاعات آژانس را با تصاویر و متن ارائه می دهد.

Services.js: خدمات ارائه شده توسط آژانس را با تصاویر و توضیحات به نمایش می گذارد.

Projects.js: گالری از تصاویر پروژه را نمایش می دهد.

Testimonials.js: دارای توصیفات مشتری با عکس و نقل قول.

Footer.js: حاوی پیوندهای تماس و نمادهای رسانه های اجتماعی است.

نصب و راه اندازی

برای شروع پروژه Sunnyside Agency، مراحل زیر را دنبال کنید:

کلون کردن مخزن:

git clone https://github.com/abhishekgurjar-in/SunnySide-Agency.git

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

به دایرکتوری پروژه بروید:

cd sunnyside-agency

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

نصب Dependencies:

npm install

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

سرور توسعه را راه اندازی کنید:

npm start

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

مرورگر خود را باز کنید و از:

http://localhost:3000

توضیح کد

App.js

import React from “react”;
import “./App.css”;
import Navbar from “./components/Navbar”;
import About from “./components/About”;
import Services from “./components/Services”;
import Projects from “./components/Projects”;
import Home from “./components/Home”;
import Footer from “./components/Footer”;
import Testimonials from “./components/Testimonials”;

const App = () => {
return (

Navbar />
Home/>
About />
Services />
Projects />
Testimonials/>
Footer/>
>
);
};

export default App;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

را App.js فایل جزء اصلی است که تمام اجزای دیگر را وارد و رندر می کند و ساختار اصلی وب سایت را تشکیل می دهد.

Navbar.js

import React from “react”;
import logo from “../assets/images/logo.svg”;
import { Link as ScrollLink } from ‘react-scroll’;
const Navbar = () => {
return (
div className=”Navbar”>
div className=”logo”>
img src={logo} alt=”logo” />
div>
div className=”header”>
ScrollLink to=”about” smooth={true} duration={500}>
About
ScrollLink>
ScrollLink to=”services” smooth={true} duration={500}>
Services
ScrollLink>
ScrollLink to=”projects” smooth={true} duration={500}>
Projects
ScrollLink>
button>CONTACTbutton>
div>
div>
);
};

export default Navbar;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

را Navbar.js کامپوننت یک نوار ناوبری با پیوندهای پیمایشی صاف به بخش های مختلف وب سایت ارائه می دهد.

Home.js

import React from ‘react’
import headImage from “../assets/images/desktop/image-header.jpg”
import aero from “../assets/images/icon-arrow-down.svg”
const Home = () => {
return (
div className=’home’>
h1 className=’title’>WE ARE CREATIVESh1>
img className=’aero-image’ src={aero} alt=”” />
img className=’head-image’ src={headImage} alt=”” />
div>
)
}

export default Home

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

Home.js دارای بخش مقدماتی با عنوان و تصویر اصلی است که لحن را برای بقیه وب سایت تنظیم می کند.

About.js

import React from “react”;
import eggImage from ‘../assets/images/desktop/image-transform.jpg’
import cupImage from ‘../assets/images/desktop/image-stand-out.jpg’

const About = () => {
return div id=”about” className=”about”>
div className=”about-first”>
div className=”text-about”>
h1>Transform your br /> brandh1>
p>We are a full-service creative agency specializing in helping brands grow fast. Engage your clients through compelling visuals that do most of the marketing for you.p>
h4>LEARN MOREh4>
div>
div className=”egg-section”>
img src={eggImage} alt=”” />
div>
div>
div className=”about-second”>
div className=”cup-section”>
img src={cupImage} alt=”” />
div>
div className=”text-about”>
h1>Stand out to the right br /> audienceh1>
p>Using a collaborative formula of designers, researchers, photographers, videographers, and copywriters, we’ll build and extend your brand in digital places.p>
h4>LEARN MOREh4>
div>
div>
div>;
};

export default About;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

را About.js مؤلفه مأموریت و خدمات آژانس را با بخش های بصری جذاب برجسته می کند.

Services.js

import React from “react”;
import rightImage from “../assets/images/desktop/image-photography.jpg”;
import leftImage from “../assets/images/desktop/image-graphic-design.jpg”;

const Services = () => {
return (
div id=”services” className=”service-container”>
div className=”services”>
div className=”service-left”>
div className=”text-service”>
h1>Graphic Designh1>
h4>
Great design makes you memorable. We deliver artwork that
underscores your brand message and captures potential clients’
attention.
h4>
div>
img src={leftImage} alt=”” />
div>
div className=”service-right”>
div className=”text-service”>
h1>Photographyh1>
h4>
Increase your credibility by getting the most stunning,
high-quality photos that improve your business image.
h4>
div>
img src={rightImage} alt=”” />
div>
div>
div />
div>
);
};

export default Services;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

Services.js خدمات ارائه شده توسط آژانس را با تصاویر و توضیحات ارائه می دهد.

Projects.js

import React from “react”;
import ProjectImage1 from “../assets/images/desktop/image-gallery-milkbottles.jpg”;
import ProjectImage2 from “../assets/images/desktop/image-gallery-orange.jpg”;
import ProjectImage3 from “../assets/images/desktop/image-gallery-cone.jpg”;
import ProjectImage4 from “../assets/images/desktop/image-gallery-sugarcubes.jpg”;

const Projects = () => {
return (
div id=”projects” className=”projects”>
img className=”project” src={ProjectImage1} alt=”” />
img className=”project” src={ProjectImage2} alt=”” />
img className=”project” src={ProjectImage3} alt=”” />
img className=”project” src={ProjectImage4} alt=”” />
div>
);
};

export default Projects;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

را Projects.js کامپوننت یک گالری از تصاویر را نشان می دهد که کار آژانس را به نمایش می گذارد.

Testimonials.js

import React from ‘react’
import Emily from “../assets/images/image-emily.jpg”
import Jennie from “../assets/images/image-jennie.jpg”
import Thomas from “../assets/images/image-thomas.jpg”

const Testimonials = () => {
return (
div className=”testimonials”>
h3>CLIENT TESTIMONIALSh3>
div className=”cards”>
div className=”card”>
img src={Emily} alt=”” />
h5>We put our trust in Sunnyside and they delivered, making sure our needs were met and deadlines were always hit.h5>
h4>Emily R.h4>
p>Marketing Directorp>
div>
div className=”card”>
img src={Thomas} alt=”” />
h5>Sunnyside’s enthusiasm coupled with their keen interest in our brand’s success made it a satisfying and enjoyable experience.h5>
h4>Thomas S.h4>
p>Chief Operating Officerp>
div>
div className=”card”>
img src={Jennie} alt=”” />
h5>Incredible end result! Our sales increased over 400% when we worked with Sunnyside.Highly recommended!h5>
h4>Jennie F.h4>
p>Business Ownerp>
div>
div>
div>
)
}

export default Testimonials

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

Testimonials.js بازخورد مشتری را برجسته می کند و به خدمات آژانس اعتبار می بخشد.

Footer.js

import React from “react”;
import LogoImage from “../assets/images/logo.svg”;
import fb from “../assets/images/icon-facebook.svg”;
import ig from “../assets/images/icon-instagram.svg”;
import pt from “../assets/images/icon-pinterest.svg”;
import tw from “../assets/images/icon-twitter.svg”;

const Footer = () => {
return (
div className=”footer”>
img className=”logoImage” src={LogoImage} alt=”” />
div className=”link-bar”>
a href=””>Abouta>
a href=””>Servicesa>
a href=””>Projectsa>
div>
div className=”social-link”>
a href=””>
{” “}
img src={fb} alt=”” />
a>
a href=””>
{” “}
img src={ig} alt=”” />
a>
a href=””>
{” “}
img src={tw} alt=”” />
a>
a href=””>
{” “}
img src={pt} alt=”” />
a>
div>
p>Made with ❤️ by Abhishek Gurjarp>
div>
);
};

export default Footer;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

را Footer.js جزء شامل نمادهای رسانه های اجتماعی و اعلامیه حق چاپ است.

نسخه نمایشی زنده

برای مشاهده عملکرد وب سایت Sunnyside Agency، از Live Demo دیدن کنید.

نتیجه گیری

وب سایت Sunnyside Agency شاهدی بر تطبیق پذیری React در ایجاد برنامه های کاربردی وب مدرن و واکنش گرا است. با استفاده از معماری مبتنی بر کامپوننت React، یک سایت تمیز و حرفه ای ایجاد کرده ایم که به طور موثر خدمات و پروژه های آژانس را به نمایش می گذارد.

به راحتی کد را بررسی کنید و آن را مطابق با نیازهای خود سفارشی کنید. کد نویسی مبارک!

اعتبارات

واکنش نشان دهید: برای ارائه چارچوب مورد استفاده در این پروژه.

فونت های گوگل: برای تایپوگرافی

React Scroll: برای عملکرد صاف پیمایش.

نویسنده

آبیشک گورجار یک توسعه دهنده وب اختصاصی است که مشتاق ایجاد برنامه های کاربردی وب کاربردی و کاربردی است. پروژه های بیشتری را در GitHub بررسی کنید.

   git clone https://github.com/abhishekgurjar-in/SunnySide-Agency.git

   cd sunnyside-agency

   npm install

   npm start

import React from "react";
import "./App.css";
import Navbar from "./components/Navbar";
import About from "./components/About";
import Services from "./components/Services";
import Projects from "./components/Projects";
import Home from "./components/Home";
import Footer from "./components/Footer";
import Testimonials from "./components/Testimonials";

const App = () => {
  return (
    
      Navbar />
      Home/>
      About />
      Services />
      Projects />
      Testimonials/>
      Footer/>
    >
  );
};

export default App;

import React from "react";
import logo from "../assets/images/logo.svg";
import { Link as ScrollLink } from 'react-scroll';
const Navbar = () => {
  return (
    div className="Navbar">
     div className="logo">
     img src={logo} alt="logo" />
     div>
      div className="header">
      ScrollLink to="about" smooth={true} duration={500}>
            About
          ScrollLink>
          ScrollLink to="services" smooth={true} duration={500}>
            Services
          ScrollLink>
          ScrollLink to="projects" smooth={true} duration={500}>
            Projects
          ScrollLink>
      button>CONTACTbutton>
      div>
    div>
  );
};

export default Navbar;

import React from 'react'
import headImage from "../assets/images/desktop/image-header.jpg"
import aero from "../assets/images/icon-arrow-down.svg"
const Home = () => {
  return (
    div className='home'>
    h1 className='title'>WE ARE CREATIVESh1>
    img className='aero-image' src={aero} alt="" />
    img className='head-image' src={headImage} alt="" />
    div>
  )
}

export default Home

import React from "react";
import eggImage from '../assets/images/desktop/image-transform.jpg'
import cupImage from '../assets/images/desktop/image-stand-out.jpg'

const About = () => {
  return div id="about" className="about">
  div className="about-first">
    div className="text-about">
        h1>Transform your br /> brandh1>
        p>We are a full-service creative agency specializing in helping brands grow fast. Engage your clients through compelling visuals that do most of the marketing for you.p>
        h4>LEARN MOREh4>
    div>
    div className="egg-section">
        img src={eggImage} alt="" />
    div>
  div>
  div className="about-second">
    div className="cup-section">
        img src={cupImage} alt="" />
    div>
    div className="text-about">
        h1>Stand out to the right br /> audienceh1>
        p>Using a collaborative formula of designers, researchers, photographers, videographers, and copywriters, we’ll build and extend your brand in digital places.p>
        h4>LEARN MOREh4>
    div>
  div>
  div>;
};

export default About;

import React from "react";
import rightImage from "../assets/images/desktop/image-photography.jpg";
import leftImage from "../assets/images/desktop/image-graphic-design.jpg";

const Services = () => {
  return (
    div id="services" className="service-container">
      div className="services">
        div className="service-left">
          div className="text-service">
            h1>Graphic Designh1>
            h4>
              Great design makes you memorable. We deliver artwork that
              underscores your brand message and captures potential clients’
              attention.
            h4>
          div>
          img src={leftImage} alt="" />
        div>
        div className="service-right">
          div className="text-service">
            h1>Photographyh1>
            h4>
              Increase your credibility by getting the most stunning,
              high-quality photos that improve your business image.
            h4>
          div>
          img src={rightImage} alt="" />
        div>
      div>
      div />
    div>
  );
};

export default Services;

import React from "react";
import ProjectImage1 from "../assets/images/desktop/image-gallery-milkbottles.jpg";
import ProjectImage2 from "../assets/images/desktop/image-gallery-orange.jpg";
import ProjectImage3 from "../assets/images/desktop/image-gallery-cone.jpg";
import ProjectImage4 from "../assets/images/desktop/image-gallery-sugarcubes.jpg";


const Projects = () => {
  return (
      div id="projects" className="projects">
        img className="project" src={ProjectImage1} alt="" />
        img className="project" src={ProjectImage2} alt="" />
        img className="project" src={ProjectImage3} alt="" />
        img className="project" src={ProjectImage4} alt="" />
      div>
  );
};

export default Projects;

import React from 'react'
import Emily from "../assets/images/image-emily.jpg"
import Jennie from "../assets/images/image-jennie.jpg"
import Thomas from "../assets/images/image-thomas.jpg"

const Testimonials = () => {
  return (
    div className="testimonials">
        h3>CLIENT TESTIMONIALSh3>
        div className="cards">
          div className="card">
            img src={Emily} alt="" />
            h5>We put our trust in Sunnyside and they delivered, making sure our needs were met and deadlines were always hit.h5>
            h4>Emily R.h4>
            p>Marketing Directorp>
          div>
          div className="card">
            img src={Thomas} alt="" />
            h5>Sunnyside’s enthusiasm coupled with their keen interest in our brand’s success made it a satisfying and enjoyable experience.h5>
            h4>Thomas S.h4>
            p>Chief Operating Officerp>
          div>
          div className="card">
            img src={Jennie} alt="" />
            h5>Incredible end result! Our sales increased over 400% when we worked with Sunnyside.Highly recommended!h5>
            h4>Jennie F.h4>
            p>Business Ownerp>
          div>
        div>
      div>
  )
}

export default Testimonials

import React from "react";
import LogoImage from "../assets/images/logo.svg";
import fb from "../assets/images/icon-facebook.svg";
import ig from "../assets/images/icon-instagram.svg";
import pt from "../assets/images/icon-pinterest.svg";
import tw from "../assets/images/icon-twitter.svg";

const Footer = () => {
  return (
    div className="footer">
      img className="logoImage" src={LogoImage} alt="" />
      div className="link-bar">
        a href="">Abouta>
        a href="">Servicesa>
        a href="">Projectsa>
      div>
      div className="social-link">
        a href="">
          {" "}
          img src={fb} alt="" />
        a>
        a href="">
          {" "}
          img src={ig} alt="" />
        a>
        a href="">
          {" "}
          img src={tw} alt="" />
        a>
        a href="">
          {" "}
          img src={pt} alt="" />
        a>
      div>
      p>Made with ❤️ by Abhishek Gurjarp>
    div>
  );
};

export default Footer;