Erstellen der Sunnyside Agency-Website mit React

Einführung

Willkommen zur detaillierten Aufschlüsselung der Sunnyside Agency-Website, einer modernen und stilvollen Website, die mit React erstellt wurde. Dieses Projekt zeigt die Leistungsfähigkeit von React bei der Erstellung dynamischer und reaktionsfähiger Webanwendungen. Lassen Sie uns in die verschiedenen Komponenten eintauchen, aus denen dieses Projekt besteht, und untersuchen, wie sie zusammenkommen, um ein ansprechendes Benutzererlebnis zu schaffen.

Projektübersicht

Die Website der Sunnyside Agency soll die Dienstleistungen, Projekte und Erfahrungsberichte einer Kreativagentur hervorheben. Es zeichnet sich durch ein klares, professionelles Design mit reibungslosem Scrollen und ansprechenden Layouts aus. Die Website umfasst die folgenden Abschnitte:

• Startseite
• Über
• Dienstleistungen
• Projekte
• Erfahrungsberichte
• Fußzeile

Merkmale

• Responsive Design: Passt sich für ein optimales Seherlebnis an verschiedene Bildschirmgrößen an.
• Reibungsloses Scrollen: Verbesserte Navigation mit reibungslosem Scrollen zwischen Abschnitten.
• Dynamischer Inhalt: React-Komponenten rendern dynamisch verschiedene Abschnitte der Website.
• Interaktive Elemente: Enthält Schaltflächen und Links mit Hover-Effekten und Übergängen.

Verwendete Technologien

• Reagieren: Zum Erstellen der Benutzeroberfläche und Verwalten des Status.
• CSS: Zur Gestaltung der Komponenten und zur Sicherstellung eines optisch ansprechenden Designs.
• Google Fonts: Für benutzerdefinierte Typografie zur Verbesserung der Ästhetik der Website.
• React Scroll: Für reibungsloses Scrollen zwischen Abschnitten.

Projektstruktur

Das Projekt ist in verschiedene React-Komponenten unterteilt, von denen jede für einen bestimmten Teil der Website verantwortlich ist:

• App.js: Die Hauptkomponente, die alle anderen Komponenten rendert.
• Navbar.js: Enthält die Navigationsleiste mit Links zu verschiedenen Abschnitten.
• Home.js: Zeigt den Einführungsinhalt und das Hauptbild an.
• Über.js: Bietet Informationen über die Agentur mit Bildern und Text.
• Services.js: Präsentiert die von der Agentur angebotenen Dienstleistungen mit Bildern und Beschreibungen.
• Projects.js: Zeigt eine Galerie mit Projektbildern an.
• Testimonials.js: Enthält Kundenreferenzen mit Fotos und Zitaten.
• Footer.js: Enthält Kontaktlinks und Social-Media-Symbole.

Installation

Um mit dem Sunnyside Agency-Projekt zu beginnen, befolgen Sie diese Schritte:

1. Das Repository klonen:

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

1. Navigieren Sie zum Projektverzeichnis:

   cd sunnyside-agency

1. Abhängigkeiten installieren:

   npm install

1. Starten Sie den Entwicklungsserver:

   npm start

1. Öffnen Sie Ihren Browser und besuchen Sie:

http://localhost:3000

Code-Erklärung

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></navbar>
      <home></home>
      <about></about>
      <services></services>
      <projects></projects>
      <testimonials></testimonials>
      <footer></footer>
    >
  );
};

export default App;

Die App.js-Datei ist die Hauptkomponente, die alle anderen Komponenten importiert und rendert und die Kernstruktur der Website bildet.

Navbar.js

import React from "react";
import Erstellen der Sunnyside Agency-Website mit React from "../assets/images/Erstellen der Sunnyside Agency-Website mit React.svg";
import { Link as ScrollLink } from 'react-scroll';
const Navbar = () => {
  return (
    <div classname="Navbar">
     <div classname="Erstellen der Sunnyside Agency-Website mit React">
     <img src="%7BErstellen" der sunnyside agency-website mit react alt="Erstellen der Sunnyside Agency-Website mit React">
     </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;

Die Navbar.js-Komponente bietet eine Navigationsleiste mit reibungslos scrollbaren Links zu verschiedenen Abschnitten der 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="%7Baero%7D" alt="">
    <img classname="head-image" src="%7BheadImage%7D" alt="">
    </div>
  )
}

export default Home

Home.js verfügt über den Einführungsbereich mit einer Überschrift und einem Hauptbild, die den Ton für den Rest der Website angeben.

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="%7BeggImage%7D" alt="">
    </div>
  </div>
  <div classname="about-second">
    <div classname="cup-section">
        <img src="%7BcupImage%7D" 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;

Die About.js-Komponente hebt die Mission und Dienstleistungen der Agentur mit visuell ansprechenden Abschnitten hervor.

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="%7BleftImage%7D" 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="%7BrightImage%7D" alt="">
        </div>
      </div>
      <div></div>
    </div>
  );
};

export default Services;

Services.js präsentiert die von der Agentur angebotenen Dienstleistungen mit Bildern und Beschreibungen.

Projekte.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="%7BProjectImage1%7D" alt="">
        <img classname="project" src="%7BProjectImage2%7D" alt="">
        <img classname="project" src="%7BProjectImage3%7D" alt="">
        <img classname="project" src="%7BProjectImage4%7D" alt="">
      </div>
  );
};

export default Projects;

Die Projects.js-Komponente zeigt eine Galerie mit Bildern an, die die Arbeit der Agentur präsentieren.

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="%7BEmily%7D" 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="%7BThomas%7D" 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="%7BJennie%7D" 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 hebt Kundenfeedback hervor und verleiht den Dienstleistungen der Agentur Glaubwürdigkeit.

Footer.js

import React from "react";
import LogoImage from "../assets/images/Erstellen der Sunnyside Agency-Website mit React.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="Erstellen der Sunnyside Agency-Website mit ReactImage" src="%7BLogoImage%7D" 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="%7Bfb%7D" alt="">
        </a>
        <a href="">
          {" "}
          <img src="%7Big%7D" alt="">
        </a>
        <a href="">
          {" "}
          <img src="%7Btw%7D" alt="">
        </a>
        <a href="">
          {" "}
          <img src="%7Bpt%7D" alt="">
        </a>
      </div>
      <p>Made with ❤️ by Abhishek Gurjar</p>
    </div>
  );
};

export default Footer;

Die Footer.js-Komponente enthält Social-Media-Symbole und einen Copyright-Hinweis.

Live-Demo

Um die Website der Sunnyside Agency in Aktion zu sehen, besuchen Sie die Live-Demo.

결론

Sunnyside Agency 웹사이트는 최신 반응형 웹 애플리케이션을 만드는 데 있어 React의 다양성을 입증합니다. React의 컴포넌트 기반 아키텍처를 활용하여 에이전시의 서비스와 프로젝트를 효과적으로 선보이는 깔끔하고 전문적인 사이트를 구축했습니다.

코드를 자유롭게 탐색하고 필요에 맞게 맞춤설정해 보세요. 즐거운 코딩하세요!

크레딧

• React: 이 프로젝트에 사용되는 프레임워크를 제공해주셔서 감사합니다.
• Google 글꼴: 타이포그래피용.
• React Scroll: 부드러운 스크롤 기능을 위해.

작가

Abhishek Gurjar는 실용적이고 기능적인 웹 애플리케이션 제작에 열정을 쏟는 헌신적인 웹 개발자입니다. GitHub에서 그의 프로젝트를 더 확인해 보세요.

Das obige ist der detaillierte Inhalt vonErstellen der Sunnyside Agency-Website mit React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!