{"id":76364,"date":"2024-09-11T06:59:28","date_gmt":"2024-09-11T03:29:28","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/building-the-sunnyside-agency-website-with-react-n76\/"},"modified":"2024-09-11T06:59:28","modified_gmt":"2024-09-11T03:29:28","slug":"building-the-sunnyside-agency-website-with-react-n76","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/building-the-sunnyside-agency-website-with-react-n76\/","title":{"rendered":"\u0633\u0627\u062e\u062a \u0648\u0628 \u0633\u0627\u06cc\u062a \u0622\u0698\u0627\u0646\u0633 Sunnyside \u0628\u0627 React"},"content":{"rendered":"

Summarize this content to 400 words in Persian Lang <\/p>\n

\u0645\u0642\u062f\u0645\u0647<\/p>\n

\u0628\u0647 \u06af\u0632\u0627\u0631\u0634 \u062a\u0641\u0635\u06cc\u0644\u06cc \u0648\u0628 \u0633\u0627\u06cc\u062a Sunnyside Agency \u062e\u0648\u0634 \u0622\u0645\u062f\u06cc\u062f\u060c \u06cc\u06a9 \u0633\u0627\u06cc\u062a \u0645\u062f\u0631\u0646 \u0648 \u0634\u06cc\u06a9 \u06a9\u0647 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 React \u0633\u0627\u062e\u062a\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a. \u0627\u06cc\u0646 \u067e\u0631\u0648\u0698\u0647 \u0642\u062f\u0631\u062a React \u0631\u0627 \u062f\u0631 \u0627\u06cc\u062c\u0627\u062f \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u0648\u0628 \u067e\u0648\u06cc\u0627 \u0648 \u0648\u0627\u06a9\u0646\u0634 \u06af\u0631\u0627 \u0628\u0647 \u0646\u0645\u0627\u06cc\u0634 \u0645\u06cc \u06af\u0630\u0627\u0631\u062f. \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0628\u0647 \u0627\u062c\u0632\u0627\u06cc \u0645\u062e\u062a\u0644\u0641\u06cc \u06a9\u0647 \u0627\u06cc\u0646 \u067e\u0631\u0648\u0698\u0647 \u0631\u0627 \u062a\u0634\u06a9\u06cc\u0644 \u0645\u06cc\u200c\u062f\u0647\u0646\u062f \u0628\u067e\u0631\u062f\u0627\u0632\u06cc\u0645 \u0648 \u0686\u06af\u0648\u0646\u06af\u06cc \u062a\u0631\u06a9\u06cc\u0628 \u0622\u0646\u0647\u0627 \u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u062a\u062c\u0631\u0628\u0647 \u06a9\u0627\u0631\u0628\u0631\u06cc \u062c\u0630\u0627\u0628 \u0631\u0627 \u0628\u0631\u0631\u0633\u06cc \u06a9\u0646\u06cc\u0645.<\/p>\n

\u0628\u0631\u0631\u0633\u06cc \u0627\u062c\u0645\u0627\u0644\u06cc \u067e\u0631\u0648\u0698\u0647<\/p>\n

\u0648\u0628 \u0633\u0627\u06cc\u062a \u0622\u0698\u0627\u0646\u0633 Sunnyside \u0628\u0631\u0627\u06cc \u0628\u0631\u062c\u0633\u062a\u0647 \u06a9\u0631\u062f\u0646 \u062e\u062f\u0645\u0627\u062a\u060c \u067e\u0631\u0648\u0698\u0647 \u0647\u0627 \u0648 \u062a\u0648\u0635\u06cc\u0641\u0627\u062a \u06cc\u06a9 \u0622\u0698\u0627\u0646\u0633 \u062e\u0644\u0627\u0642 \u0637\u0631\u0627\u062d\u06cc \u0634\u062f\u0647 \u0627\u0633\u062a. \u062f\u0627\u0631\u0627\u06cc \u0637\u0631\u0627\u062d\u06cc \u062a\u0645\u06cc\u0632 \u0648 \u062d\u0631\u0641\u0647 \u0627\u06cc \u0628\u0627 \u067e\u06cc\u0645\u0627\u06cc\u0634 \u0635\u0627\u0641 \u0648 \u0637\u0631\u062d \u0628\u0646\u062f\u06cc \u0647\u0627\u06cc \u067e\u0627\u0633\u062e\u06af\u0648 \u0627\u0633\u062a. \u0648\u0628 \u0633\u0627\u06cc\u062a \u0634\u0627\u0645\u0644 \u0628\u062e\u0634 \u0647\u0627\u06cc \u0632\u06cc\u0631 \u0627\u0633\u062a:<\/p>\n

\u0635\u0641\u062d\u0647 \u0627\u0635\u0644\u06cc
\n\u062f\u0631\u0628\u0627\u0631\u0647
\n\u062e\u062f\u0645\u0627\u062a
\n\u067e\u0631\u0648\u0698\u0647 \u0647\u0627
\n\u06af\u0648\u0627\u0647\u06cc\u0646\u0627\u0645\u0647 \u0647\u0627
\n\u067e\u0627\u0648\u0631\u0642\u06cc<\/p>\n

\u0648\u06cc\u0698\u06af\u06cc \u0647\u0627<\/p>\n

\u0637\u0631\u0627\u062d\u06cc \u0648\u0627\u06a9\u0646\u0634\u06af\u0631\u0627: \u0628\u0627 \u0627\u0646\u062f\u0627\u0632\u0647 \u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0635\u0641\u062d\u0647 \u0646\u0645\u0627\u06cc\u0634 \u0628\u0631\u0627\u06cc \u062a\u062c\u0631\u0628\u0647 \u062a\u0645\u0627\u0634\u0627\u06cc \u0628\u0647\u06cc\u0646\u0647 \u0633\u0627\u0632\u06af\u0627\u0631 \u0627\u0633\u062a.<\/p>\n

\u067e\u06cc\u0645\u0627\u06cc\u0634 \u0635\u0627\u0641: \u0646\u0627\u0648\u0628\u0631\u06cc \u067e\u06cc\u0634\u0631\u0641\u062a\u0647 \u0628\u0627 \u067e\u06cc\u0645\u0627\u06cc\u0634 \u0635\u0627\u0641 \u0628\u06cc\u0646 \u0628\u062e\u0634 \u0647\u0627.<\/p>\n

\u0645\u062d\u062a\u0648\u0627\u06cc \u067e\u0648\u06cc\u0627: \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0647\u0627\u06cc React \u0628\u062e\u0634 \u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0648\u0628 \u0633\u0627\u06cc\u062a \u0631\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u067e\u0648\u06cc\u0627 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u06a9\u0646\u0646\u062f.<\/p>\n

\u0639\u0646\u0627\u0635\u0631 \u062a\u0639\u0627\u0645\u0644\u06cc: \u0634\u0627\u0645\u0644 \u062f\u06a9\u0645\u0647\u200c\u0647\u0627 \u0648 \u067e\u06cc\u0648\u0646\u062f\u0647\u0627\u06cc\u06cc \u0628\u0627 \u062c\u0644\u0648\u0647\u200c\u0647\u0627\u06cc \u0634\u0646\u0627\u0648\u0631 \u0648 \u0627\u0646\u062a\u0642\u0627\u0644 \u0627\u0633\u062a.<\/p>\n

\u0641\u0646 \u0622\u0648\u0631\u06cc \u0647\u0627\u06cc \u0645\u0648\u0631\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647<\/p>\n

\u0648\u0627\u06a9\u0646\u0634 \u0646\u0634\u0627\u0646 \u062f\u0647\u06cc\u062f: \u0628\u0631\u0627\u06cc \u0633\u0627\u062e\u062a \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0648 \u0645\u062f\u06cc\u0631\u06cc\u062a \u0648\u0636\u0639\u06cc\u062a.<\/p>\n

CSS: \u0628\u0631\u0627\u06cc \u06cc\u06a9 \u0638\u0627\u0647\u0631 \u0637\u0631\u0627\u062d\u06cc \u0634\u062f\u0647 \u0628\u0647 \u0627\u062c\u0632\u0627 \u0648 \u0627\u0637\u0645\u06cc\u0646\u0627\u0646 \u0627\u0632 \u0637\u0631\u0627\u062d\u06cc \u062c\u0630\u0627\u0628 \u0628\u0635\u0631\u06cc.<\/p>\n

\u0641\u0648\u0646\u062a \u0647\u0627\u06cc \u06af\u0648\u06af\u0644: \u0628\u0631\u0627\u06cc \u062a\u0627\u06cc\u067e\u0648\u06af\u0631\u0627\u0641\u06cc \u0633\u0641\u0627\u0631\u0634\u06cc \u0628\u0631\u0627\u06cc \u0627\u0641\u0632\u0627\u06cc\u0634 \u0632\u06cc\u0628\u0627\u06cc\u06cc \u0634\u0646\u0627\u0633\u06cc \u0648\u0628 \u0633\u0627\u06cc\u062a.<\/p>\n

React Scroll: \u0628\u0631\u0627\u06cc \u067e\u06cc\u0645\u0627\u06cc\u0634 \u0635\u0627\u0641 \u0628\u06cc\u0646 \u0628\u062e\u0634 \u0647\u0627.<\/p>\n

\u0633\u0627\u062e\u062a\u0627\u0631 \u067e\u0631\u0648\u0698\u0647<\/p>\n

\u0627\u06cc\u0646 \u067e\u0631\u0648\u0698\u0647 \u062f\u0631 \u0627\u062c\u0632\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 React \u0633\u0627\u0632\u0645\u0627\u0646\u062f\u0647\u06cc \u0634\u062f\u0647 \u0627\u0633\u062a \u06a9\u0647 \u0647\u0631 \u06a9\u062f\u0627\u0645 \u0645\u0633\u0626\u0648\u0644 \u0628\u062e\u0634 \u062e\u0627\u0635\u06cc \u0627\u0632 \u0648\u0628 \u0633\u0627\u06cc\u062a \u0647\u0633\u062a\u0646\u062f:<\/p>\n

App.js: \u062c\u0632\u0621 \u0627\u0635\u0644\u06cc \u06a9\u0647 \u0647\u0645\u0647 \u0627\u062c\u0632\u0627\u06cc \u062f\u06cc\u06af\u0631 \u0631\u0627 \u0631\u0646\u062f\u0631 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n

Navbar.js: \u0634\u0627\u0645\u0644 \u0646\u0648\u0627\u0631 \u067e\u06cc\u0645\u0627\u06cc\u0634 \u0628\u0627 \u067e\u06cc\u0648\u0646\u062f\u0647\u0627\u06cc\u06cc \u0628\u0647 \u0628\u062e\u0634 \u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0627\u0633\u062a.<\/p>\n

Home.js: \u0645\u062d\u062a\u0648\u0627\u06cc \u0645\u0642\u062f\u0645\u0627\u062a\u06cc \u0648 \u062a\u0635\u0648\u06cc\u0631 \u0627\u0635\u0644\u06cc \u0631\u0627 \u0646\u0645\u0627\u06cc\u0634 \u0645\u06cc \u062f\u0647\u062f.<\/p>\n

About.js: \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u0622\u0698\u0627\u0646\u0633 \u0631\u0627 \u0628\u0627 \u062a\u0635\u0627\u0648\u06cc\u0631 \u0648 \u0645\u062a\u0646 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f.<\/p>\n

Services.js: \u062e\u062f\u0645\u0627\u062a \u0627\u0631\u0627\u0626\u0647 \u0634\u062f\u0647 \u062a\u0648\u0633\u0637 \u0622\u0698\u0627\u0646\u0633 \u0631\u0627 \u0628\u0627 \u062a\u0635\u0627\u0648\u06cc\u0631 \u0648 \u062a\u0648\u0636\u06cc\u062d\u0627\u062a \u0628\u0647 \u0646\u0645\u0627\u06cc\u0634 \u0645\u06cc \u06af\u0630\u0627\u0631\u062f.<\/p>\n

Projects.js: \u06af\u0627\u0644\u0631\u06cc \u0627\u0632 \u062a\u0635\u0627\u0648\u06cc\u0631 \u067e\u0631\u0648\u0698\u0647 \u0631\u0627 \u0646\u0645\u0627\u06cc\u0634 \u0645\u06cc \u062f\u0647\u062f.<\/p>\n

Testimonials.js: \u062f\u0627\u0631\u0627\u06cc \u062a\u0648\u0635\u06cc\u0641\u0627\u062a \u0645\u0634\u062a\u0631\u06cc \u0628\u0627 \u0639\u06a9\u0633 \u0648 \u0646\u0642\u0644 \u0642\u0648\u0644.<\/p>\n

Footer.js: \u062d\u0627\u0648\u06cc \u067e\u06cc\u0648\u0646\u062f\u0647\u0627\u06cc \u062a\u0645\u0627\u0633 \u0648 \u0646\u0645\u0627\u062f\u0647\u0627\u06cc \u0631\u0633\u0627\u0646\u0647 \u0647\u0627\u06cc \u0627\u062c\u062a\u0645\u0627\u0639\u06cc \u0627\u0633\u062a.<\/p>\n

\u0646\u0635\u0628 \u0648 \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc<\/p>\n

\u0628\u0631\u0627\u06cc \u0634\u0631\u0648\u0639 \u067e\u0631\u0648\u0698\u0647 Sunnyside Agency\u060c \u0645\u0631\u0627\u062d\u0644 \u0632\u06cc\u0631 \u0631\u0627 \u062f\u0646\u0628\u0627\u0644 \u06a9\u0646\u06cc\u062f:<\/p>\n

\u06a9\u0644\u0648\u0646 \u06a9\u0631\u062f\u0646 \u0645\u062e\u0632\u0646:<\/p>\n

git clone https:\/\/github.com\/abhishekgurjar-in\/SunnySide-Agency.git<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0628\u0647 \u062f\u0627\u06cc\u0631\u06a9\u062a\u0648\u0631\u06cc \u067e\u0631\u0648\u0698\u0647 \u0628\u0631\u0648\u06cc\u062f:<\/p>\n

cd sunnyside-agency<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0646\u0635\u0628 Dependencies:<\/p>\n

npm install<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0633\u0631\u0648\u0631 \u062a\u0648\u0633\u0639\u0647 \u0631\u0627 \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u06a9\u0646\u06cc\u062f:<\/p>\n

npm start<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0645\u0631\u0648\u0631\u06af\u0631 \u062e\u0648\u062f \u0631\u0627 \u0628\u0627\u0632 \u06a9\u0646\u06cc\u062f \u0648 \u0627\u0632: <\/p>\n

http:\/\/localhost:3000<\/p>\n

\u062a\u0648\u0636\u06cc\u062d \u06a9\u062f<\/p>\n

App.js<\/p>\n

import React from “react”;
\nimport “.\/App.css”;
\nimport Navbar from “.\/components\/Navbar”;
\nimport About from “.\/components\/About”;
\nimport Services from “.\/components\/Services”;
\nimport Projects from “.\/components\/Projects”;
\nimport Home from “.\/components\/Home”;
\nimport Footer from “.\/components\/Footer”;
\nimport Testimonials from “.\/components\/Testimonials”;<\/p>\n

const App = () => {
\n return (<\/p>\n

Navbar \/>
\n Home\/>
\n About \/>
\n Services \/>
\n Projects \/>
\n Testimonials\/>
\n Footer\/>
\n >
\n );
\n};<\/p>\n

export default App;<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0631\u0627 App.js \u0641\u0627\u06cc\u0644 \u062c\u0632\u0621 \u0627\u0635\u0644\u06cc \u0627\u0633\u062a \u06a9\u0647 \u062a\u0645\u0627\u0645 \u0627\u062c\u0632\u0627\u06cc \u062f\u06cc\u06af\u0631 \u0631\u0627 \u0648\u0627\u0631\u062f \u0648 \u0631\u0646\u062f\u0631 \u0645\u06cc \u06a9\u0646\u062f \u0648 \u0633\u0627\u062e\u062a\u0627\u0631 \u0627\u0635\u0644\u06cc \u0648\u0628 \u0633\u0627\u06cc\u062a \u0631\u0627 \u062a\u0634\u06a9\u06cc\u0644 \u0645\u06cc \u062f\u0647\u062f.<\/p>\n

Navbar.js<\/p>\n

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

export default Navbar;<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0631\u0627 Navbar.js \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u06cc\u06a9 \u0646\u0648\u0627\u0631 \u0646\u0627\u0648\u0628\u0631\u06cc \u0628\u0627 \u067e\u06cc\u0648\u0646\u062f\u0647\u0627\u06cc \u067e\u06cc\u0645\u0627\u06cc\u0634\u06cc \u0635\u0627\u0641 \u0628\u0647 \u0628\u062e\u0634 \u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0648\u0628 \u0633\u0627\u06cc\u062a \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f.<\/p>\n

Home.js<\/p>\n

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

export default Home<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

Home.js \u062f\u0627\u0631\u0627\u06cc \u0628\u062e\u0634 \u0645\u0642\u062f\u0645\u0627\u062a\u06cc \u0628\u0627 \u0639\u0646\u0648\u0627\u0646 \u0648 \u062a\u0635\u0648\u06cc\u0631 \u0627\u0635\u0644\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0644\u062d\u0646 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0628\u0642\u06cc\u0647 \u0648\u0628 \u0633\u0627\u06cc\u062a \u062a\u0646\u0638\u06cc\u0645 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n

About.js<\/p>\n

import React from “react”;
\nimport eggImage from ‘..\/assets\/images\/desktop\/image-transform.jpg’
\nimport cupImage from ‘..\/assets\/images\/desktop\/image-stand-out.jpg’<\/p>\n

const About = () => {
\n return div id=”about” className=”about”>
\n div className=”about-first”>
\n div className=”text-about”>
\n h1>Transform your br \/> brandh1>
\n 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>
\n h4>LEARN MOREh4>
\n div>
\n div className=”egg-section”>
\n img src={eggImage} alt=”” \/>
\n div>
\n div>
\n div className=”about-second”>
\n div className=”cup-section”>
\n img src={cupImage} alt=”” \/>
\n div>
\n div className=”text-about”>
\n h1>Stand out to the right br \/> audienceh1>
\n p>Using a collaborative formula of designers, researchers, photographers, videographers, and copywriters, we\u2019ll build and extend your brand in digital places.p>
\n h4>LEARN MOREh4>
\n div>
\n div>
\n div>;
\n};<\/p>\n

export default About;<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0631\u0627 About.js \u0645\u0624\u0644\u0641\u0647 \u0645\u0623\u0645\u0648\u0631\u06cc\u062a \u0648 \u062e\u062f\u0645\u0627\u062a \u0622\u0698\u0627\u0646\u0633 \u0631\u0627 \u0628\u0627 \u0628\u062e\u0634 \u0647\u0627\u06cc \u0628\u0635\u0631\u06cc \u062c\u0630\u0627\u0628 \u0628\u0631\u062c\u0633\u062a\u0647 \u0645\u06cc \u06a9\u0646\u062f.<\/p>\n

Services.js<\/p>\n

import React from “react”;
\nimport rightImage from “..\/assets\/images\/desktop\/image-photography.jpg”;
\nimport leftImage from “..\/assets\/images\/desktop\/image-graphic-design.jpg”;<\/p>\n

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

export default Services;<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

Services.js \u062e\u062f\u0645\u0627\u062a \u0627\u0631\u0627\u0626\u0647 \u0634\u062f\u0647 \u062a\u0648\u0633\u0637 \u0622\u0698\u0627\u0646\u0633 \u0631\u0627 \u0628\u0627 \u062a\u0635\u0627\u0648\u06cc\u0631 \u0648 \u062a\u0648\u0636\u06cc\u062d\u0627\u062a \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f.<\/p>\n

Projects.js<\/p>\n

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

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

export default Projects;<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0631\u0627 Projects.js \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u06cc\u06a9 \u06af\u0627\u0644\u0631\u06cc \u0627\u0632 \u062a\u0635\u0627\u0648\u06cc\u0631 \u0631\u0627 \u0646\u0634\u0627\u0646 \u0645\u06cc \u062f\u0647\u062f \u06a9\u0647 \u06a9\u0627\u0631 \u0622\u0698\u0627\u0646\u0633 \u0631\u0627 \u0628\u0647 \u0646\u0645\u0627\u06cc\u0634 \u0645\u06cc \u06af\u0630\u0627\u0631\u062f.<\/p>\n

Testimonials.js<\/p>\n

import React from ‘react’
\nimport Emily from “..\/assets\/images\/image-emily.jpg”
\nimport Jennie from “..\/assets\/images\/image-jennie.jpg”
\nimport Thomas from “..\/assets\/images\/image-thomas.jpg”<\/p>\n

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

export default Testimonials<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

Testimonials.js \u0628\u0627\u0632\u062e\u0648\u0631\u062f \u0645\u0634\u062a\u0631\u06cc \u0631\u0627 \u0628\u0631\u062c\u0633\u062a\u0647 \u0645\u06cc \u06a9\u0646\u062f \u0648 \u0628\u0647 \u062e\u062f\u0645\u0627\u062a \u0622\u0698\u0627\u0646\u0633 \u0627\u0639\u062a\u0628\u0627\u0631 \u0645\u06cc \u0628\u062e\u0634\u062f.<\/p>\n

Footer.js<\/p>\n

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

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

export default Footer;<\/p>\n

\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/p>\n

\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/p>\n

\u0631\u0627 Footer.js \u062c\u0632\u0621 \u0634\u0627\u0645\u0644 \u0646\u0645\u0627\u062f\u0647\u0627\u06cc \u0631\u0633\u0627\u0646\u0647 \u0647\u0627\u06cc \u0627\u062c\u062a\u0645\u0627\u0639\u06cc \u0648 \u0627\u0639\u0644\u0627\u0645\u06cc\u0647 \u062d\u0642 \u0686\u0627\u067e \u0627\u0633\u062a.<\/p>\n

\u0646\u0633\u062e\u0647 \u0646\u0645\u0627\u06cc\u0634\u06cc \u0632\u0646\u062f\u0647<\/p>\n

\u0628\u0631\u0627\u06cc \u0645\u0634\u0627\u0647\u062f\u0647 \u0639\u0645\u0644\u06a9\u0631\u062f \u0648\u0628 \u0633\u0627\u06cc\u062a Sunnyside Agency\u060c \u0627\u0632 Live Demo \u062f\u06cc\u062f\u0646 \u06a9\u0646\u06cc\u062f.<\/p>\n

\u0646\u062a\u06cc\u062c\u0647 \u06af\u06cc\u0631\u06cc<\/p>\n

\u0648\u0628 \u0633\u0627\u06cc\u062a Sunnyside Agency \u0634\u0627\u0647\u062f\u06cc \u0628\u0631 \u062a\u0637\u0628\u06cc\u0642 \u067e\u0630\u06cc\u0631\u06cc React \u062f\u0631 \u0627\u06cc\u062c\u0627\u062f \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc \u0648\u0628 \u0645\u062f\u0631\u0646 \u0648 \u0648\u0627\u06a9\u0646\u0634 \u06af\u0631\u0627 \u0627\u0633\u062a. \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0645\u0639\u0645\u0627\u0631\u06cc \u0645\u0628\u062a\u0646\u06cc \u0628\u0631 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a React\u060c \u06cc\u06a9 \u0633\u0627\u06cc\u062a \u062a\u0645\u06cc\u0632 \u0648 \u062d\u0631\u0641\u0647 \u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u06a9\u0631\u062f\u0647 \u0627\u06cc\u0645 \u06a9\u0647 \u0628\u0647 \u0637\u0648\u0631 \u0645\u0648\u062b\u0631 \u062e\u062f\u0645\u0627\u062a \u0648 \u067e\u0631\u0648\u0698\u0647 \u0647\u0627\u06cc \u0622\u0698\u0627\u0646\u0633 \u0631\u0627 \u0628\u0647 \u0646\u0645\u0627\u06cc\u0634 \u0645\u06cc \u06af\u0630\u0627\u0631\u062f.<\/p>\n

\u0628\u0647 \u0631\u0627\u062d\u062a\u06cc \u06a9\u062f \u0631\u0627 \u0628\u0631\u0631\u0633\u06cc \u06a9\u0646\u06cc\u062f \u0648 \u0622\u0646 \u0631\u0627 \u0645\u0637\u0627\u0628\u0642 \u0628\u0627 \u0646\u06cc\u0627\u0632\u0647\u0627\u06cc \u062e\u0648\u062f \u0633\u0641\u0627\u0631\u0634\u06cc \u06a9\u0646\u06cc\u062f. \u06a9\u062f \u0646\u0648\u06cc\u0633\u06cc \u0645\u0628\u0627\u0631\u06a9!<\/p>\n

\u0627\u0639\u062a\u0628\u0627\u0631\u0627\u062a<\/p>\n

\u0648\u0627\u06a9\u0646\u0634 \u0646\u0634\u0627\u0646 \u062f\u0647\u06cc\u062f: \u0628\u0631\u0627\u06cc \u0627\u0631\u0627\u0626\u0647 \u0686\u0627\u0631\u0686\u0648\u0628 \u0645\u0648\u0631\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062f\u0631 \u0627\u06cc\u0646 \u067e\u0631\u0648\u0698\u0647.<\/p>\n

\u0641\u0648\u0646\u062a \u0647\u0627\u06cc \u06af\u0648\u06af\u0644: \u0628\u0631\u0627\u06cc \u062a\u0627\u06cc\u067e\u0648\u06af\u0631\u0627\u0641\u06cc<\/p>\n

React Scroll: \u0628\u0631\u0627\u06cc \u0639\u0645\u0644\u06a9\u0631\u062f \u0635\u0627\u0641 \u067e\u06cc\u0645\u0627\u06cc\u0634.<\/p>\n

\u0646\u0648\u06cc\u0633\u0646\u062f\u0647<\/p>\n

\u0622\u0628\u06cc\u0634\u06a9 \u06af\u0648\u0631\u062c\u0627\u0631 \u06cc\u06a9 \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u0647 \u0648\u0628 \u0627\u062e\u062a\u0635\u0627\u0635\u06cc \u0627\u0633\u062a \u06a9\u0647 \u0645\u0634\u062a\u0627\u0642 \u0627\u06cc\u062c\u0627\u062f \u0628\u0631\u0646\u0627\u0645\u0647 \u0647\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc \u0648\u0628 \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc \u0648 \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc \u0627\u0633\u062a. \u067e\u0631\u0648\u0698\u0647 \u0647\u0627\u06cc \u0628\u06cc\u0634\u062a\u0631\u06cc \u0631\u0627 \u062f\u0631 GitHub \u0628\u0631\u0631\u0633\u06cc \u06a9\u0646\u06cc\u062f.<\/p>\n

\n
\n
\n

\u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628<\/p>\nToggle<\/span><\/path><\/svg><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n