24 about page

package.json

@@ -16,6 +16,7 @@
     "lodash": "^4.17.21",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-reveal": "^1.2.2",
     "react-router-dom": "^6.4.0",
     "react-scripts": "5.0.1",
     "swiper": "^8.4.4",

src/components/about/howWeAffect/BlogNews.tsx

@@ -0,0 +1,84 @@
+import { BlogNewsSection } from "../../../styles/about/howWeAffect";
+import { Text, Image } from "../../common";
+import BlogNewsImg1 from "../../../assets/blog_news1.png";
+import BlogNewsImg2 from "../../../assets/blog_news2.png";
+import BlogNewsImg3 from "../../../assets/blog_news3.png";
+
+const BlogNews = () => {
+  return (
+    <BlogNewsSection>
+      <div className="title">
+        <Text size="h1" weight="bold">
+          Blog&News
+        </Text>
+      </div>
+      <div className="contentBox">
+        <div className="content1">
+          <Image src={BlogNewsImg1} alt="image1" />
+          <div className="description">
+            <Text size="large" lineheight="30.59px">
+              클래스는 정기적으로 진행되는 강의입니다.
+              <br />한 분야에 특화된 강사가 여러 명을 알려주는
+              <br />
+              형식으로, 알고리즘이나 기초 프로그래밍 교육 등<br />
+              다양한 분야의 강의가 진행되고 있습니다.
+            </Text>
+          </div>
+          <div className="subtitle">
+            <Text size="large" weight="bold">
+              '수강신청 망하는 법' 특강 소식
+            </Text>
+          </div>
+          <Text size="medium" weight="bold" color="grey">
+            2022.08.16
+          </Text>
+        </div>
+        <div className="content2">
+          <Image src={BlogNewsImg2} alt="image2" />
+          <div className="description">
+            <Text size="large" lineheight="30.59px">
+              스터디는 정기적으로 진행되는 모임입니다.
+              <br />한 분야에 관심이 많은 동아리 부원들끼리 모여
+              <br />
+              책, 강의를 정해 주기적으로 만나 의견을 교환하고
+              <br />
+              코드를 리뷰하면서 진행되고 있습니다.
+            </Text>
+          </div>
+          <div className="subtitle">
+            <Text size="large" weight="bold">
+              '수강신청 망하는 법' 특강 소식
+            </Text>
+          </div>
+          <Text size="medium" weight="bold" color="grey">
+            2022.08.16
+          </Text>
+        </div>
+        <div className="content3">
+          <Image src={BlogNewsImg3} alt="image3" />
+          <div className="description">
+            <Text size="large" lineheight="30.59px">
+              특강, 세미나 그리고 동아리 부원들끼리 팀을 이뤄
+              <br />
+              참가하는 공모전, 경진대회를 통해
+              <br />
+              새로운 창조적 가치를 발굴하고 자체 역량을
+              <br />
+              강화할 수 있습니다.
+            </Text>
+          </div>
+          <div className="subtitle">
+            <Text size="large" weight="bold">
+              '수강신청 망하는 법' 특강 소식
+            </Text>
+          </div>
+          <Text size="medium" weight="bold" color="grey">
+            2022.08.16
+          </Text>
+        </div>
+      </div>
+    </BlogNewsSection>
+  );
+};
+
+export default BlogNews;

src/components/about/howWeAffect/TitleBg.tsx

@@ -0,0 +1,81 @@
+import {
+  HowWeAffectTitle,
+  SecondTitleBgSection,
+  TitleBgSection,
+} from "../../../styles/about/howWeAffect";
+import { Image, Text } from "../../common";
+import TitleImage from "../../../assets/how_we_affect_title.png";
+import TitleImageBlur from "../../../assets/how_we_affect_title_blur.png";
+import SecondTitleImage from "../../../assets/how_we_affect4.png";
+import SecondTitleImageBlur from "../../../assets/how_we_affect3.png";
+import PerfImg1 from "../../../assets/performance1.png";
+import PerfImg2 from "../../../assets/performance2.png";
+import PerfImg3 from "../../../assets/performance3.png";
+import { useScrollY } from "../../../hooks/useScrollY";
+
+const TitleBg = () => {
+  const scrollY = useScrollY();
+  console.log(scrollY);
+  return (
+    <>
+      <HowWeAffectTitle>
+        <TitleBgSection scrollY={scrollY}>
+          <div className="titleImage">
+            <Image src={TitleImage} alt="titleimage" width="100vw" />
+          </div>
+          <div className="blur">
+            <Image src={TitleImageBlur} alt="titleimageblur" width="100vw" />
+          </div>
+          <div className="text">
+            <div className="title">
+              <Text size="h1" weight="bold" color="white">
+                How We Affect
+              </Text>
+            </div>
+            <div className="description">
+              <Text size="xlarge" lineheight="34.42px" color="white">
+                NL 부원들은 '열정'과 '협업'을 통해 좋은 개발자로 성장합니다.
+                <br />
+                '네카라'를 비롯해 다양한 개발 분야에서 왕성히 활동하는 선배
+                부원들이 그 증거입니다.
+                <br />타 분야 전공자들과 자유로운 교류, 자율적인 운영, 열정적인
+                협업 경험은
+                <br />
+                졸업 후에도 사회에서 차별화된 역량을 펼칠 수 있게 하는 자양분이
+                됩니다.
+              </Text>
+            </div>
+          </div>
+        </TitleBgSection>
+
+        <SecondTitleBgSection scrollY={scrollY}>
+          <div className="titleImage">
+            <Image src={SecondTitleImage} alt="titleimage" width="100vw" />
+          </div>
+          <div className="blur">
+            <Image
+              src={SecondTitleImageBlur}
+              alt="titleimageblur"
+              width="100vw"
+            />
+          </div>
+          <div className="performance">
+            <Image src={PerfImg1} alt="performance" />
+          </div>
+          <div className="performance">
+            <Image src={PerfImg2} alt="performance" />
+          </div>
+          <div className="performance">
+            <Image src={PerfImg3} alt="performance" />
+          </div>
+          <div className="perfText">
+            <Text size="h1" color="white" weight="bold">
+              Performance
+            </Text>
+          </div>
+        </SecondTitleBgSection>
+      </HowWeAffectTitle>
+    </>
+  );
+};
+export default TitleBg;

src/components/about/howWeAffect/index.tsx

@@ -0,0 +1,12 @@
+import TitleBg from "./TitleBg";
+import BlogNews from "./BlogNews";
+
+const HowWeAffectSection = () => {
+  return (
+    <>
+      <TitleBg />
+      <BlogNews />
+    </>
+  );
+};
+export default HowWeAffectSection;

src/components/about/index.tsx

@@ -0,0 +1,18 @@
+import { Image } from "../common";
+
+import TopImageRoute from "../../assets/about_top_image.png";
+import WhoWeAreSection from "./whoWeAre";
+import WhatWeDoSection from "./whatWeDo";
+import HowWeAffectSection from "./howWeAffect";
+const About = () => {
+  return (
+    <>
+      <Image src={TopImageRoute} alt="TopImage" width="100vw" />
+      <WhoWeAreSection />
+      <WhatWeDoSection />
+      <HowWeAffectSection />
+    </>
+  );
+};
+
+export default About;

src/components/about/whatWeDo/Programs.tsx

@@ -0,0 +1,42 @@
+import { ProgramsSection } from "../../../styles/about/whatWeDo";
+import { Text } from "../../common";
+
+const Programs = () => {
+  return (
+    <ProgramsSection>
+      <div className="title">
+        <Text size="h2" weight="bold">
+          NL Programs
+        </Text>
+      </div>
+      <div className="contentBox">
+        <div className="content1">
+          <Text size="large" lineheight="30.59px">
+            클래스는 정기적으로 진행되는 강의입니다. <br />한 분야에 특화된
+            강사가 여러 명을 알려주는 <br />
+            형식으로, 알고리즘이나 기초 프로그래밍 교육 등 <br />
+            다양한 분야의 강의가 진행되고 있습니다.
+          </Text>
+        </div>
+        <div className="content2">
+          <Text size="large" lineheight="30.59px">
+            클래스는 정기적으로 진행되는 강의입니다. <br />한 분야에 특화된
+            강사가 여러 명을 알려주는 <br />
+            형식으로, 알고리즘이나 기초 프로그래밍 교육 등 <br />
+            다양한 분야의 강의가 진행되고 있습니다.
+          </Text>
+        </div>
+        <div className="content3">
+          <Text size="large" lineheight="30.59px">
+            클래스는 정기적으로 진행되는 강의입니다. <br />한 분야에 특화된
+            강사가 여러 명을 알려주는 <br />
+            형식으로, 알고리즘이나 기초 프로그래밍 교육 등 <br />
+            다양한 분야의 강의가 진행되고 있습니다.
+          </Text>
+        </div>
+      </div>
+    </ProgramsSection>
+  );
+};
+
+export default Programs;

src/components/about/whatWeDo/SubTitle.tsx

@@ -0,0 +1,35 @@
+import { SubTitleSection } from "../../../styles/about/whatWeDo";
+import { Image, Text } from "../../common";
+import WhatWeDoImage3 from "../../../assets/what_we_do_image3.png";
+import WhatWeDoImage4 from "../../../assets/what_we_do_img4.png";
+import { useScrollY } from "../../../hooks/useScrollY";
+const Fade = require("react-reveal/Fade");
+
+const SubTitle = () => {
+  const scrollY = useScrollY();
+  console.log(scrollY);
+  return (
+    <SubTitleSection scrollY={scrollY}>
+      <div className="content">
+        <Text size="xlarge" lineheight="34.42px">
+          다양한 개발 관련 프로그램을 경험하면서 부원들은 <br />
+          각기 다른 개발 역량, 지식, 경험을 쌓을 수 있고, <br />
+          좋은 개발자에 한 걸음씩 더 가까워집니다.
+        </Text>
+      </div>
+      <div className="image3">
+        <Image src={WhatWeDoImage3} alt="whatwedoimg3" width="49.3vw" />
+      </div>
+      <div className="image4">
+        <Image src={WhatWeDoImage4} alt="whatwedoimg4" width="28.3vw" />
+      </div>
+      <div className="nlText">
+        <span className="firstText">Network Leader</span>
+        <div className="symbol"></div>
+        <p className="secondText">Program</p>
+      </div>
+    </SubTitleSection>
+  );
+};
+
+export default SubTitle;

src/components/about/whatWeDo/Title.tsx

@@ -0,0 +1,39 @@
+import { Image, Text } from "../../common";
+import whatWeDoTitleImage from "../../../assets/what_we_do_top_image.png";
+import whatWeDotitleImage2 from "../../../assets/what_we_do_image2.png";
+import { WhatWeDoTitleSection } from "../../../styles/about/whatWeDo";
+
+const Title = () => {
+  return (
+    <WhatWeDoTitleSection>
+      <div className="titleImage">
+        <Image src={whatWeDoTitleImage} alt="whatWeDoTitle" width="100vw" />
+      </div>
+      <div className="titleImage2">
+        <Image src={whatWeDotitleImage2} alt="whatWeDoTitle2" width="100vw" />
+      </div>
+
+      <div className="whatWeDoTitle">
+        <Text size="h1" weight="bold" color="white">
+          What We Do
+        </Text>
+      </div>
+      <div className="whatWeDoContent">
+        <Text size="xlarge" weight="medium" lineheight="34.42px" color="white">
+          NL은 개발자의 성장을 돕는 다양한 프로그램을 운영합니다. 클래스
+          진행자로부터 운영되는 <br />
+          여러 개발, 알고리즘 클래스와 관심사를 공유하는 부원들끼리 모여서
+          성장하는 스터디 외에도 <br />
+          NL Company 프로젝트를 통한 실제 IT기업이 개발하는 방법으로 실무 개발
+          경험을 쌓고 <br />
+          디자인팀과의 협업까지 진행할 수 있습니다. 또한 스스로 활동 방향과
+          목표를 설정하고 <br />
+          자발적으로 참여하는 여러 활동을 통해 주도적인 참여나 계획을 세우는
+          경험을 쌓을 수 있습니다.
+        </Text>
+      </div>
+    </WhatWeDoTitleSection>
+  );
+};
+
+export default Title;

src/components/about/whatWeDo/index.tsx

@@ -0,0 +1,17 @@
+import Programs from "./Programs";
+import SubTitle from "./SubTitle";
+import Title from "./Title";
+import Project from "./project";
+
+const WhatWeDoSection = () => {
+  return (
+    <>
+      <Title />
+      <SubTitle />
+      <Programs />
+      <Project page="about" />
+    </>
+  );
+};
+
+export default WhatWeDoSection;