Membina Laman Web Agensi Sunnyside dengan React

pengenalan

Selamat datang ke pecahan terperinci tapak web Agensi Sunnyside, tapak moden dan bergaya yang dibina menggunakan React. Projek ini mempamerkan kuasa React dalam mencipta aplikasi web yang dinamik dan responsif. Mari kita selami pelbagai komponen yang membentuk projek ini dan terokai cara mereka bersatu untuk mencipta pengalaman pengguna yang menarik.

Gambaran Keseluruhan Projek

Tapak web Agensi Sunnyside direka untuk menyerlahkan perkhidmatan, projek dan testimoni agensi kreatif. Ia menampilkan reka bentuk yang bersih dan profesional dengan tatal lancar dan susun atur responsif. Laman web ini merangkumi bahagian berikut:

• Rumah
• Mengenai
• Perkhidmatan
• Projek
• Testimoni
• Pengaki

Ciri-ciri

• Reka Bentuk Responsif: Menyesuaikan diri dengan pelbagai saiz skrin untuk pengalaman tontonan yang optimum.
• Tatal Lancar: Navigasi dipertingkat dengan tatal lancar antara bahagian.
• Kandungan Dinamik: Komponen bertindak balas secara dinamik menjadikan bahagian tapak web yang berbeza.
• Elemen Interaktif: Termasuk butang dan pautan dengan kesan tuding dan peralihan.

Teknologi yang Digunakan

• React: Untuk membina antara muka pengguna dan keadaan pengurusan.
• CSS: Untuk menggayakan komponen dan memastikan reka bentuk yang menarik secara visual.
• Fon Google: Untuk tipografi tersuai untuk meningkatkan estetika tapak web.
• Tatal React: Untuk menatal lancar antara bahagian.

Struktur Projek

Projek ini disusun dalam pelbagai komponen React, masing-masing bertanggungjawab untuk bahagian tertentu tapak web:

• App.js: Komponen utama yang memaparkan semua komponen lain.
• Navbar.js: Mengandungi bar navigasi dengan pautan ke bahagian yang berbeza.
• Home.js: Memaparkan kandungan pengenalan dan imej utama.
• About.js: Menyediakan maklumat tentang agensi dengan imej dan teks.
• Services.js: Mempamerkan perkhidmatan yang ditawarkan oleh agensi dengan imej dan penerangan.
• Projects.js: Memaparkan galeri imej projek.
• Testimonials.js: Menampilkan testimoni pelanggan dengan foto dan petikan.
• Footer.js: Mengandungi pautan kenalan dan ikon media sosial.

Pemasangan

Untuk bermula dengan projek Agensi Sunnyside, ikut langkah berikut:

1. Klon Repositori:

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

1. Navigasi ke Direktori Projek:

   cd sunnyside-agency

1. Pasang Ketergantungan:

   npm install

1. Mulakan Pelayan Pembangunan:

   npm start

1. Buka Penyemak Imbas Anda dan Lawati:

http://localhost:3000

Penerangan Kod

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;

Fail App.js ialah komponen utama yang mengimport dan memaparkan semua komponen lain, membentuk struktur teras tapak web.

Navbar.js

import React from "react";
import Membina Laman Web Agensi Sunnyside dengan React from "../assets/images/Membina Laman Web Agensi Sunnyside dengan React.svg";
import { Link as ScrollLink } from 'react-scroll';
const Navbar = () => {
  return (
    <div classname="Navbar">
     <div classname="Membina Laman Web Agensi Sunnyside dengan React">
     <img src="%7BMembina" laman web agensi sunnyside dengan react alt="Membina Laman Web Agensi Sunnyside dengan 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;

Komponen Navbar.js menyediakan bar navigasi dengan pautan tatal lancar ke bahagian tapak web yang berbeza.

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 menampilkan bahagian pengenalan dengan tajuk dan imej utama, menetapkan nada untuk tapak web yang lain.

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;

Komponen About.js menyerlahkan misi dan perkhidmatan agensi dengan bahagian yang menarik secara visual.

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 mempersembahkan perkhidmatan yang ditawarkan oleh agensi dengan imej dan penerangan.

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="%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;

Komponen Projects.js memaparkan galeri imej yang mempamerkan hasil kerja agensi.

Testimonial.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 menyerlahkan maklum balas pelanggan, menambahkan kredibiliti kepada perkhidmatan agensi.

Footer.js

import React from "react";
import LogoImage from "../assets/images/Membina Laman Web Agensi Sunnyside dengan 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="Membina Laman Web Agensi Sunnyside dengan 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;

Komponen Footer.js termasuk ikon media sosial dan notis hak cipta.

Demo Langsung

Untuk melihat tapak web Agensi Sunnyside sedang beraksi, lawati Demo Langsung .

Abschluss

Die Website der Sunnyside Agency ist ein Beweis für die Vielseitigkeit von React bei der Erstellung moderner, reaktionsfähiger Webanwendungen. Durch die Nutzung der komponentenbasierten Architektur von React haben wir eine saubere, professionelle Website erstellt, die die Dienstleistungen und Projekte der Agentur effektiv präsentiert.

Zögern Sie nicht, den Code zu erkunden und ihn an Ihre Bedürfnisse anzupassen. Viel Spaß beim Codieren!

Credits

• Reagieren:Für die Bereitstellung des in diesem Projekt verwendeten Frameworks.
• Google Fonts:Für Typografie.
• React Scroll: Für reibungslose Scroll-Funktionalität.

Autor

Abhishek Gurjar ist ein engagierter Webentwickler, der sich mit der Entwicklung praktischer und funktionaler Webanwendungen beschäftigt. Schauen Sie sich weitere seiner Projekte auf GitHub an.

Atas ialah kandungan terperinci Membina Laman Web Agensi Sunnyside dengan React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!