Abhishek Gurjar

Posted on Sep 11

Building the Sunnyside Agency Website with React

#css #javascript #react #sunnysideagency

Introduction

Welcome to the detailed breakdown of the Sunnyside Agency website, a modern and stylish site built using React. This project showcases the power of React in creating dynamic and responsive web applications. Let’s dive into the various components that make up this project and explore how they come together to create an engaging user experience.

Project Overview

The Sunnyside Agency website is designed to highlight the services, projects, and testimonials of a creative agency. It features a clean, professional design with smooth scrolling and responsive layouts. The website includes the following sections:

Home
About
Services
Projects
Testimonials
Footer

Features

Responsive Design: Adapts to various screen sizes for an optimal viewing experience.
Smooth Scrolling: Enhanced navigation with smooth scrolling between sections.
Dynamic Content: React components dynamically render different sections of the website.
Interactive Elements: Includes buttons and links with hover effects and transitions.

Technologies Used

React: For building the user interface and managing state.
CSS: For styling the components and ensuring a visually appealing design.
Google Fonts: For custom typography to enhance the website’s aesthetics.
React Scroll: For smooth scrolling between sections.

Project Structure

The project is organized into various React components, each responsible for a specific part of the website:

App.js: The main component that renders all other components.
Navbar.js: Contains the navigation bar with links to different sections.
Home.js: Displays the introductory content and main image.
About.js: Provides information about the agency with images and text.
Services.js: Showcases the services offered by the agency with images and descriptions.
Projects.js: Displays a gallery of project images.
Testimonials.js: Features client testimonials with photos and quotes.
Footer.js: Contains contact links and social media icons.

Installation

To get started with the Sunnyside Agency project, follow these steps:

Clone the Repository:

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

Navigate to the Project Directory:

   cd sunnyside-agency

Install Dependencies:

   npm install

Start the Development Server:

   npm start

Open Your Browser and Visit:

http://localhost:3000

Code Explanation

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;

The App.js file is the main component that imports and renders all other components, forming the core structure of the website.

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>CONTACT</button>
      </div>
    </div>
  );
};

export default Navbar;

The Navbar.js component provides a navigation bar with smooth scrolling links to different sections of the website.

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 CREATIVES</h1>
    <img className='aero-image' src={aero} alt="" />
    <img className='head-image' src={headImage} alt="" />
    </div>
  )
}

export default Home

Home.js features the introductory section with a headline and main image, setting the tone for the rest of the website.

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 /> brand</h1>
        <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 MORE</h4>
    </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 /> audience</h1>
        <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 MORE</h4>
    </div>
  </div>
  </div>;
};

export default About;

The About.js component highlights the agency's mission and services with visually engaging sections.

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 Design</h1>
            <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>Photography</h1>
            <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 presents the services offered by the agency with images and descriptions.

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;

The Projects.js component displays a gallery of images showcasing the agency’s work.

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 TESTIMONIALS</h3>
        <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 Director</p>
          </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 Officer</p>
          </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 Owner</p>
          </div>
        </div>
      </div>
  )
}

export default Testimonials

Testimonials.js highlights client feedback, adding credibility to the agency's services.

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="">About</a>
        <a href="">Services</a>
        <a href="">Projects</a>
      </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 Gurjar</p>
    </div>
  );
};

export default Footer;

The Footer.js component includes social media icons and a copyright notice.

Live Demo

To see the Sunnyside Agency website in action, visit Live Demo .

Conclusion

The Sunnyside Agency website is a testament to the versatility of React in creating modern, responsive web applications. By leveraging React’s component-based architecture, we have built a clean, professional site that effectively showcases the agency’s services and projects.

Feel free to explore the code and customize it to fit your needs. Happy coding!

Credits

React: For providing the framework used in this project.
Google Fonts: For typography.
React Scroll: For smooth scrolling functionality.

Author

Abhishek Gurjar is a dedicated web developer passionate about creating practical and functional web applications. Check out more of his projects on GitHub.

DEV Community