React を使用して Sunnyside Agency Web サイトを構築する-CSSチュートリアル-php.cn

Building the Sunnyside Agency Website with React

導入

Sunnyside Agency の Web サイトの詳細な説明へようこそ。React を使用して構築されたモダンでスタイリッシュなサイトです。このプロジェクトでは、動的で応答性の高い Web アプリケーションを作成する際の React の力を紹介します。このプロジェクトを構成するさまざまなコンポーネントを詳しく見て、それらがどのように連携して魅力的なユーザーエクスペリエンスを生み出すのかを探ってみましょう。

プロジェクト概要

サニーサイドエージェンシーの Web サイトは、クリエイティブエージェンシーのサービス、プロジェクト、紹介文を強調するように設計されています。スムーズなスクロールと応答性の高いレイアウトを備えたクリーンでプロフェッショナルなデザインが特徴です。 Web サイトには次のセクションが含まれています:

ホーム
サービス
プロジェクト
お客様の声
フッター

特徴

レスポンシブデザイン: さまざまな画面サイズに適応して、最適な表示エクスペリエンスを実現します。
スムーズスクロール: セクション間のスムーズなスクロールによりナビゲーションが強化されました。
動的コンテンツ: React コンポーネントは、Web サイトのさまざまなセクションを動的にレンダリングします。
インタラクティブ要素: ホバー効果とトランジションを備えたボタンとリンクが含まれます。

使用されている技術

React: ユーザーインターフェイスの構築と状態の管理用。
CSS: コンポーネントのスタイルを設定し、視覚的に魅力的なデザインを確保します。
Google フォント: ウェブサイトの美しさを高めるカスタムタイポグラフィ用。
React Scroll: セクション間をスムーズにスクロールします。

プロジェクトの構造

プロジェクトはさまざまな React コンポーネントで構成されており、それぞれが Web サイトの特定の部分を担当します。

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 ファイルは、他のすべてのコンポーネントをインポートしてレンダリングする主要なコンポーネントであり、Web サイトの中核構造を形成します。

Navbar.js

import React from "react";
import React を使用して Sunnyside Agency Web サイトを構築する from "../assets/images/React を使用して Sunnyside Agency Web サイトを構築する.svg";
import { Link as ScrollLink } from 'react-scroll';
const Navbar = () => {
  return (
    <div classname="Navbar">
     <div classname="React を使用して Sunnyside Agency Web サイトを構築する">
     <img src="%7BReact" sunnyside agency web alt="React を使用して Sunnyside Agency Web サイトを構築する">
     </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 コンポーネントは、Web サイトのさまざまなセクションへのスムーズにスクロールするリンクを備えたナビゲーションバーを提供します。

ホーム.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 には、見出しとメイン画像を含む導入セクションがあり、Web サイトの残りの部分の雰囲気を設定します。

.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 コンポーネントは、視覚的に魅力的なセクションで代理店の使命とサービスを強調表示します。

サービス.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 コンポーネントには、代理店の仕事を紹介する画像のギャラリーが表示されます。

お客様の声.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 Web サイトを構築する.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 Web サイトを構築する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;

ログイン後にコピー

Footer.js コンポーネントには、ソーシャルメディアアイコンと著作権表示が含まれています。

ライブデモ

Sunnyside Agency Web サイトの動作を確認するには、ライブデモにアクセスしてください。

結論

Sunnyside Agency の Web サイトは、最新の応答性の高い Web アプリケーションを作成する際の React の多用途性を証明しています。 React のコンポーネントベースのアーキテクチャを活用することで、代理店のサービスとプロジェクトを効果的に紹介するクリーンでプロフェッショナルなサイトを構築しました。

自由にコードを調べて、ニーズに合わせてカスタマイズしてください。コーディングを楽しんでください!