React를 사용하여 Sunnyside Agency 웹사이트 구축-CSS 튜토리얼-php.cn

Building the Sunnyside Agency Website with React

소개

React를 사용하여 구축된 현대적이고 세련된 사이트인 Sunnyside Agency 웹사이트의 상세 분석에 오신 것을 환영합니다. 이 프로젝트는 동적이고 반응성이 뛰어난 웹 애플리케이션을 만드는 데 있어서 React의 힘을 보여줍니다. 이 프로젝트를 구성하는 다양한 구성 요소를 자세히 살펴보고 이들이 어떻게 결합되어 매력적인 사용자 경험을 만들어내는지 살펴보겠습니다.

프로젝트 개요

써니사이드 에이전시 웹사이트는 크리에이티브 에이전시의 서비스, 프로젝트, 추천사를 강조하기 위해 디자인되었습니다. 부드러운 스크롤과 반응형 레이아웃을 갖춘 깔끔하고 전문적인 디자인이 특징입니다. 웹사이트에는 다음 섹션이 포함되어 있습니다:

홈
소개
서비스
프로젝트
사용후기
바닥글

특징

반응형 디자인: 최적의 시청 경험을 위해 다양한 화면 크기에 적응합니다.
부드러운 스크롤: 섹션 간 부드러운 스크롤로 탐색 기능이 향상되었습니다.
동적 콘텐츠: React 구성요소는 웹사이트의 다양한 섹션을 동적으로 렌더링합니다.
대화형 요소: 호버 효과 및 전환 기능이 있는 버튼과 링크가 포함되어 있습니다.

사용된 기술

React: 사용자 인터페이스 구축 및 상태 관리를 위해.
CSS: 구성 요소의 스타일을 지정하고 시각적으로 매력적인 디자인을 보장합니다.
Google 글꼴: 웹사이트의 미적 아름다움을 향상시키는 맞춤 타이포그래피입니다.
반응 스크롤: 섹션 간 원활한 스크롤을 위해.

프로젝트 구조

이 프로젝트는 다양한 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

로그인 후 복사

설치 종속성:

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

export default App;

로그인 후 복사

App.js 파일은 웹사이트의 핵심 구조를 구성하는 다른 모든 구성 요소를 가져오고 렌더링하는 주요 구성 요소입니다.

Navbar.js

import React from "react";
import React를 사용하여 Sunnyside Agency 웹사이트 구축 from "../assets/images/React를 사용하여 Sunnyside Agency 웹사이트 구축.svg";
import { Link as ScrollLink } from 'react-scroll';
const Navbar = () => {
  return (
    <div classname="Navbar">
     <div classname="React를 사용하여 Sunnyside Agency 웹사이트 구축">
     <img src="%7BReact%EB%A5%BC" sunnyside agency alt="React를 사용하여 Sunnyside Agency 웹사이트 구축">
     </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;

로그인 후 복사

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 CREATIVES</h1>
    <img classname="aero-image" src="%7Baero%7D" alt="">
    <img classname="head-image" src="%7BheadImage%7D" 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> 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;

로그인 후 복사

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 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는 대행사가 제공하는 서비스를 이미지와 설명으로 보여줍니다.

프로젝트.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;

로그인 후 복사

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 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는 고객 피드백을 강조하여 대행사 서비스에 신뢰성을 더합니다.

바닥글.js

import React from "react";
import LogoImage from "../assets/images/React를 사용하여 Sunnyside Agency 웹사이트 구축.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="React를 사용하여 Sunnyside Agency 웹사이트 구축Image" 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;

로그인 후 복사

라이브 데모

써니사이드 에이전시 웹사이트의 실제 모습을 보려면 라이브 데모를 방문하세요.

Kesimpulan

Laman web Agensi Sunnyside adalah bukti kepelbagaian React dalam mencipta aplikasi web yang moden dan responsif. Dengan memanfaatkan seni bina berasaskan komponen React, kami telah membina tapak yang bersih dan profesional yang mempamerkan perkhidmatan dan projek agensi dengan berkesan.

Jangan ragu untuk menerokai kod dan menyesuaikannya agar sesuai dengan keperluan anda. Selamat mengekod!

Kredit

React: Untuk menyediakan rangka kerja yang digunakan dalam projek ini.
Fon Google: Untuk tipografi.
Tatal React: Untuk kefungsian tatal yang lancar.

Pengarang

Abhishek Gurjar ialah pembangun web berdedikasi yang bersemangat untuk mencipta aplikasi web yang praktikal dan berfungsi. Lihat lebih banyak projek beliau di GitHub.

위 내용은 React를 사용하여 Sunnyside Agency 웹사이트 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!