diff --git a/package-lock.json b/package-lock.json index 53b22b1..adb1afe 100644 --- a/package-lock.json +++ b/package-lock.json @@ -21,6 +21,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", @@ -13988,6 +13989,17 @@ "node": ">=0.10.0" } }, + "node_modules/react-reveal": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/react-reveal/-/react-reveal-1.2.2.tgz", + "integrity": "sha512-JCv3fAoU6Z+Lcd8U48bwzm4pMZ79qsedSXYwpwt6lJNtj/v5nKJYZZbw3yhaQPPgYePo3Y0NOCoYOq/jcsisuw==", + "dependencies": { + "prop-types": "^15.5.10" + }, + "peerDependencies": { + "react": "^15.3.0 || ^16.0.0" + } + }, "node_modules/react-router": { "version": "6.4.0", "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.4.0.tgz", @@ -26652,6 +26664,14 @@ "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz", "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==" }, + "react-reveal": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/react-reveal/-/react-reveal-1.2.2.tgz", + "integrity": "sha512-JCv3fAoU6Z+Lcd8U48bwzm4pMZ79qsedSXYwpwt6lJNtj/v5nKJYZZbw3yhaQPPgYePo3Y0NOCoYOq/jcsisuw==", + "requires": { + "prop-types": "^15.5.10" + } + }, "react-router": { "version": "6.4.0", "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.4.0.tgz", diff --git a/package.json b/package.json index db7fa1c..2370dc9 100644 --- a/package.json +++ b/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", diff --git a/src/assets/about_image1.png b/src/assets/about_image1.png new file mode 100644 index 0000000..d0c4ceb Binary files /dev/null and b/src/assets/about_image1.png differ diff --git a/src/assets/about_image2.png b/src/assets/about_image2.png new file mode 100644 index 0000000..b9456cc Binary files /dev/null and b/src/assets/about_image2.png differ diff --git a/src/assets/about_second_image.png b/src/assets/about_second_image.png new file mode 100644 index 0000000..7643c1a Binary files /dev/null and b/src/assets/about_second_image.png differ diff --git a/src/assets/about_top_image.png b/src/assets/about_top_image.png new file mode 100644 index 0000000..64efbd4 Binary files /dev/null and b/src/assets/about_top_image.png differ diff --git a/src/assets/blog_news1.png b/src/assets/blog_news1.png new file mode 100644 index 0000000..4985926 Binary files /dev/null and b/src/assets/blog_news1.png differ diff --git a/src/assets/blog_news2.png b/src/assets/blog_news2.png new file mode 100644 index 0000000..772fd46 Binary files /dev/null and b/src/assets/blog_news2.png differ diff --git a/src/assets/blog_news3.png b/src/assets/blog_news3.png new file mode 100644 index 0000000..68bb1ac Binary files /dev/null and b/src/assets/blog_news3.png differ diff --git a/src/assets/coreValue1.png b/src/assets/coreValue1.png new file mode 100644 index 0000000..01b067b Binary files /dev/null and b/src/assets/coreValue1.png differ diff --git a/src/assets/coreValue2.png b/src/assets/coreValue2.png new file mode 100644 index 0000000..1f2ea74 Binary files /dev/null and b/src/assets/coreValue2.png differ diff --git a/src/assets/coreValue3.png b/src/assets/coreValue3.png new file mode 100644 index 0000000..72c639e Binary files /dev/null and b/src/assets/coreValue3.png differ diff --git a/src/assets/core_value_image.png b/src/assets/core_value_image.png new file mode 100644 index 0000000..63e20f2 Binary files /dev/null and b/src/assets/core_value_image.png differ diff --git a/src/assets/how_we_affect3.png b/src/assets/how_we_affect3.png new file mode 100644 index 0000000..0ebd857 Binary files /dev/null and b/src/assets/how_we_affect3.png differ diff --git a/src/assets/how_we_affect4.png b/src/assets/how_we_affect4.png new file mode 100644 index 0000000..a4f59c1 Binary files /dev/null and b/src/assets/how_we_affect4.png differ diff --git a/src/assets/how_we_affect_title.png b/src/assets/how_we_affect_title.png new file mode 100644 index 0000000..d4b729b Binary files /dev/null and b/src/assets/how_we_affect_title.png differ diff --git a/src/assets/how_we_affect_title_blur.png b/src/assets/how_we_affect_title_blur.png new file mode 100644 index 0000000..0ebd857 Binary files /dev/null and b/src/assets/how_we_affect_title_blur.png differ diff --git a/src/assets/main_what_we_do.png b/src/assets/main_what_we_do.png new file mode 100644 index 0000000..48e8815 Binary files /dev/null and b/src/assets/main_what_we_do.png differ diff --git a/src/assets/main_who_we_are1.png b/src/assets/main_who_we_are1.png new file mode 100644 index 0000000..e47b6e1 Binary files /dev/null and b/src/assets/main_who_we_are1.png differ diff --git a/src/assets/main_who_we_are2.png b/src/assets/main_who_we_are2.png new file mode 100644 index 0000000..1c545d0 Binary files /dev/null and b/src/assets/main_who_we_are2.png differ diff --git a/src/assets/main_who_we_are3.png b/src/assets/main_who_we_are3.png new file mode 100644 index 0000000..dbc8b0e Binary files /dev/null and b/src/assets/main_who_we_are3.png differ diff --git a/src/assets/main_who_we_are_bg.png b/src/assets/main_who_we_are_bg.png new file mode 100644 index 0000000..34c81df Binary files /dev/null and b/src/assets/main_who_we_are_bg.png differ diff --git a/src/assets/main_who_we_are_bg_blur.png b/src/assets/main_who_we_are_bg_blur.png new file mode 100644 index 0000000..d2ff02c Binary files /dev/null and b/src/assets/main_who_we_are_bg_blur.png differ diff --git a/src/assets/performance1.png b/src/assets/performance1.png new file mode 100644 index 0000000..b3ea733 Binary files /dev/null and b/src/assets/performance1.png differ diff --git a/src/assets/performance2.png b/src/assets/performance2.png new file mode 100644 index 0000000..9c9cf54 Binary files /dev/null and b/src/assets/performance2.png differ diff --git a/src/assets/performance3.png b/src/assets/performance3.png new file mode 100644 index 0000000..6731bf2 Binary files /dev/null and b/src/assets/performance3.png differ diff --git a/src/assets/project_img.png b/src/assets/project_img.png new file mode 100644 index 0000000..16744fc Binary files /dev/null and b/src/assets/project_img.png differ diff --git a/src/assets/what_we_do_image2.png b/src/assets/what_we_do_image2.png new file mode 100644 index 0000000..c217651 Binary files /dev/null and b/src/assets/what_we_do_image2.png differ diff --git a/src/assets/what_we_do_image3.png b/src/assets/what_we_do_image3.png new file mode 100644 index 0000000..8e3cc12 Binary files /dev/null and b/src/assets/what_we_do_image3.png differ diff --git a/src/assets/what_we_do_img4.png b/src/assets/what_we_do_img4.png new file mode 100644 index 0000000..9800603 Binary files /dev/null and b/src/assets/what_we_do_img4.png differ diff --git a/src/assets/what_we_do_top_image.png b/src/assets/what_we_do_top_image.png new file mode 100644 index 0000000..0ebd857 Binary files /dev/null and b/src/assets/what_we_do_top_image.png differ diff --git a/src/components/about/howWeAffect/BlogNews.tsx b/src/components/about/howWeAffect/BlogNews.tsx new file mode 100644 index 0000000..e0bd658 --- /dev/null +++ b/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 ( + +
+ + Blog&News + +
+
+
+ image1 +
+ + 클래스는 정기적으로 진행되는 강의입니다. +
한 분야에 특화된 강사가 여러 명을 알려주는 +
+ 형식으로, 알고리즘이나 기초 프로그래밍 교육 등
+ 다양한 분야의 강의가 진행되고 있습니다. + +
+
+ + '수강신청 망하는 법' 특강 소식 + +
+ + 2022.08.16 + +
+
+ image2 +
+ + 스터디는 정기적으로 진행되는 모임입니다. +
한 분야에 관심이 많은 동아리 부원들끼리 모여 +
+ 책, 강의를 정해 주기적으로 만나 의견을 교환하고 +
+ 코드를 리뷰하면서 진행되고 있습니다. + +
+
+ + '수강신청 망하는 법' 특강 소식 + +
+ + 2022.08.16 + +
+
+ image3 +
+ + 특강, 세미나 그리고 동아리 부원들끼리 팀을 이뤄 +
+ 참가하는 공모전, 경진대회를 통해 +
+ 새로운 창조적 가치를 발굴하고 자체 역량을 +
+ 강화할 수 있습니다. + +
+
+ + '수강신청 망하는 법' 특강 소식 + +
+ + 2022.08.16 + +
+
+ + ); +}; + +export default BlogNews; diff --git a/src/components/about/howWeAffect/TitleBg.tsx b/src/components/about/howWeAffect/TitleBg.tsx new file mode 100644 index 0000000..3a1cdb9 --- /dev/null +++ b/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 ( + <> + + +
+ titleimage +
+
+ titleimageblur +
+
+
+ + How We Affect + +
+
+ + NL 부원들은 '열정'과 '협업'을 통해 좋은 개발자로 성장합니다. +
+ '네카라'를 비롯해 다양한 개발 분야에서 왕성히 활동하는 선배 + 부원들이 그 증거입니다. +
타 분야 전공자들과 자유로운 교류, 자율적인 운영, 열정적인 + 협업 경험은 +
+ 졸업 후에도 사회에서 차별화된 역량을 펼칠 수 있게 하는 자양분이 + 됩니다. + +
+
+ + + +
+ titleimage +
+
+ titleimageblur +
+
+ performance +
+
+ performance +
+
+ performance +
+
+ + Performance + +
+ + + + ); +}; +export default TitleBg; diff --git a/src/components/about/howWeAffect/index.tsx b/src/components/about/howWeAffect/index.tsx new file mode 100644 index 0000000..872958e --- /dev/null +++ b/src/components/about/howWeAffect/index.tsx @@ -0,0 +1,12 @@ +import TitleBg from "./TitleBg"; +import BlogNews from "./BlogNews"; + +const HowWeAffectSection = () => { + return ( + <> + + + + ); +}; +export default HowWeAffectSection; diff --git a/src/components/about/index.tsx b/src/components/about/index.tsx new file mode 100644 index 0000000..84ccc43 --- /dev/null +++ b/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 ( + <> + TopImage + + + + + ); +}; + +export default About; diff --git a/src/components/about/whatWeDo/Programs.tsx b/src/components/about/whatWeDo/Programs.tsx new file mode 100644 index 0000000..6f6a09b --- /dev/null +++ b/src/components/about/whatWeDo/Programs.tsx @@ -0,0 +1,42 @@ +import { ProgramsSection } from "../../../styles/about/whatWeDo"; +import { Text } from "../../common"; + +const Programs = () => { + return ( + +
+ + NL Programs + +
+
+
+ + 클래스는 정기적으로 진행되는 강의입니다.
한 분야에 특화된 + 강사가 여러 명을 알려주는
+ 형식으로, 알고리즘이나 기초 프로그래밍 교육 등
+ 다양한 분야의 강의가 진행되고 있습니다. + +
+
+ + 클래스는 정기적으로 진행되는 강의입니다.
한 분야에 특화된 + 강사가 여러 명을 알려주는
+ 형식으로, 알고리즘이나 기초 프로그래밍 교육 등
+ 다양한 분야의 강의가 진행되고 있습니다. + +
+
+ + 클래스는 정기적으로 진행되는 강의입니다.
한 분야에 특화된 + 강사가 여러 명을 알려주는
+ 형식으로, 알고리즘이나 기초 프로그래밍 교육 등
+ 다양한 분야의 강의가 진행되고 있습니다. + +
+
+ + ); +}; + +export default Programs; diff --git a/src/components/about/whatWeDo/SubTitle.tsx b/src/components/about/whatWeDo/SubTitle.tsx new file mode 100644 index 0000000..4e4fea6 --- /dev/null +++ b/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 ( + +
+ + 다양한 개발 관련 프로그램을 경험하면서 부원들은
+ 각기 다른 개발 역량, 지식, 경험을 쌓을 수 있고,
+ 좋은 개발자에 한 걸음씩 더 가까워집니다. + +
+
+ whatwedoimg3 +
+
+ whatwedoimg4 +
+
+ Network Leader +
+

Program

+
+ + ); +}; + +export default SubTitle; diff --git a/src/components/about/whatWeDo/Title.tsx b/src/components/about/whatWeDo/Title.tsx new file mode 100644 index 0000000..f31dea7 --- /dev/null +++ b/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 ( + +
+ whatWeDoTitle +
+
+ whatWeDoTitle2 +
+ +
+ + What We Do + +
+
+ + NL은 개발자의 성장을 돕는 다양한 프로그램을 운영합니다. 클래스 + 진행자로부터 운영되는
+ 여러 개발, 알고리즘 클래스와 관심사를 공유하는 부원들끼리 모여서 + 성장하는 스터디 외에도
+ NL Company 프로젝트를 통한 실제 IT기업이 개발하는 방법으로 실무 개발 + 경험을 쌓고
+ 디자인팀과의 협업까지 진행할 수 있습니다. 또한 스스로 활동 방향과 + 목표를 설정하고
+ 자발적으로 참여하는 여러 활동을 통해 주도적인 참여나 계획을 세우는 + 경험을 쌓을 수 있습니다. + +
+ + ); +}; + +export default Title; diff --git a/src/components/about/whatWeDo/index.tsx b/src/components/about/whatWeDo/index.tsx new file mode 100644 index 0000000..695b0f6 --- /dev/null +++ b/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 ( + <> + + <SubTitle /> + <Programs /> + <Project page="about" /> + </> + ); +}; + +export default WhatWeDoSection; diff --git a/src/components/about/whatWeDo/project/TagCollection.tsx b/src/components/about/whatWeDo/project/TagCollection.tsx new file mode 100644 index 0000000..2c2aa12 --- /dev/null +++ b/src/components/about/whatWeDo/project/TagCollection.tsx @@ -0,0 +1,108 @@ +import { TagBox } from "../../../../styles/about/whatWeDo"; +import { Tag, Text } from "../../../common"; + +const dummyTagData = [ + { + content: "Github", + index: 1, + description: "팀 프로젝트의 코드 저장 및 오픈소스 공개1", + }, + { + content: "Slack", + index: 2, + description: "팀 프로젝트의 코드 저장 및 오픈소스 공개2", + }, + { + content: "Notion", + index: 3, + description: "팀 프로젝트의 코드 저장 및 오픈소스 공개3", + }, + { + content: "Jira", + index: 4, + description: "팀 프로젝트의 코드 저장 및 오픈소스 공개4", + }, + { + content: "React.js", + index: 5, + description: "팀 프로젝트의 코드 저장 및 오픈소스 공개5", + }, + { + content: "Next.js", + index: 6, + description: "팀 프로젝트의 코드 저장 및 오픈소스 공개6", + }, + { + content: "Nest.js", + index: 7, + description: "팀 프로젝트의 코드 저장 및 오픈소스 공개7", + }, + { + content: "MongoDB", + index: 8, + description: "팀 프로젝트의 코드 저장 및 오픈소스 공개8", + }, + { + content: "AWS", + index: 9, + description: "팀 프로젝트의 코드 저장 및 오픈소스 공개9", + }, + { + content: "Github Action", + index: 10, + description: "팀 프로젝트의 코드 저장 및 오픈소스 공개10", + }, + { + content: "CodeDeploy", + index: 11, + description: "팀 프로젝트의 코드 저장 및 오픈소스 공개11", + }, + { + content: "Terraform", + index: 12, + description: "팀 프로젝트의 코드 저장 및 오픈소스 공개12", + }, + { + content: "Jenkins", + index: 13, + description: "팀 프로젝트의 코드 저장 및 오픈소스 공개13", + }, + { + content: "Ansible", + index: 14, + description: "팀 프로젝트의 코드 저장 및 오픈소스 공개14", + }, +]; + +const TagCollection = () => { + return ( + <TagBox> + {dummyTagData.map((item) => ( + <> + <Tag + key={item.index} + color="blue" + backgroundColor="blueopacity" + fontWeight="bold" + fontSize="xxlarge" + padding="large" + className="tag" + > + {item.content} + <div className="tagDetail"> + <div className="eclipse"></div> + <span className="title">활용 목적</span> + <div className="des"> + <Text color="black" size="medium" weight="bold"> + {item.description} + </Text> + </div> + </div> + </Tag> + </> + ))} + </TagBox> + ); +}; + +export default TagCollection; diff --git a/src/components/about/whatWeDo/project/index.tsx b/src/components/about/whatWeDo/project/index.tsx new file mode 100644 index 0000000..c0d57f5 --- /dev/null +++ b/src/components/about/whatWeDo/project/index.tsx @@ -0,0 +1,50 @@ +import { ProjectSection } from "../../../../styles/about/whatWeDo"; +import { Image, Text } from "../../../common"; +import ProjectImg from "../../../../assets/project_img.png"; +import MainWhatWeDo from "../../../../assets/main_what_we_do.png"; + +import TagCollection from "./TagCollection"; + +interface ProjectType { + page: string; +} + +const Project = ({ page }: ProjectType) => { + return ( + <ProjectSection> + <div className="title"> + <Text size="h1" weight="bold"> + {page === "about" ? "NL Company Project" : "What We Do"} + </Text> + </div> + <div className="contentBox"> + {page === "about" ? ( + <Image src={ProjectImg} alt="projectimg" /> + ) : ( + <Image src={MainWhatWeDo} alt="projectimg" /> + )} + <div className="content"> + <div className="contentTitle"> + <Text size="h2" weight="bold" lineheight="50.4px"> + 실제 배포 프로젝트를 만들어보며 + <br /> + 경험하는 IT 기업이 일하는 방법 + </Text> + </div> + <div className="contentDescription"> + <Text size="xlarge" lineheight="31.18px"> + 동아리 홈페이지 등 실제 필요한 서비스를 만들고 git 기반의 협업을 + <br /> + 경험해보고 서로 코드를 리뷰하고 더 좋은 방식으로 발전시켜가며 실제 + <br /> + IT기업이 일하는 방식을 경험해봅니다. + </Text> + </div> + <TagCollection /> + </div> + </div> + </ProjectSection> + ); +}; + +export default Project; diff --git a/src/components/about/whoWeAre/TitleText.tsx b/src/components/about/whoWeAre/TitleText.tsx new file mode 100644 index 0000000..a674b23 --- /dev/null +++ b/src/components/about/whoWeAre/TitleText.tsx @@ -0,0 +1,66 @@ +import { TitleTextSection } from "../../../styles/about/whoWeAre"; +import { Image, Text } from "../../common"; +import SecondImage from "../../../assets/about_second_image.png"; +import aboutImage1 from "../../../assets/about_image1.png"; +import aboutImage2 from "../../../assets/about_image2.png"; + +const TitleText = () => { + return ( + <TitleTextSection> + <div className="titleBox"> + <Text size="h1" weight="bold"> + Who We Are + </Text> + </div> + <div className="subTitleBox"> + <Text size="xlarge" lineheight="34.42px"> + NL은 서울과학기술대학교 컴퓨터공학 소속 학술동아리로 알고리즘과 개발에 + 관심이 많은 + <br /> + 학부생들이 모여 프로젝트와 스터디를 진행하는 동아리입니다. NL은 + Network Leader의 + <br /> + 줄임말로, 전 세계로 뻗어나가는 리더형 인재로 거듭나는 의미를 가지고 + 있습니다. + </Text> + </div> + <div className="secImageBox"> + <Image + src={SecondImage} + alt="Second Image" + width="calc(100vw - 208px)" + display="block" + /> + </div> + <div className="imageOneBox"> + <Image src={aboutImage1} alt="image1" /> + <Text size="xlarge" lineheight="34.42px"> + NL은 자율적인 참여로 여러 활동을 진행하고 있습니다. <br /> + 스터디나 클래스, 각종 행사, 홍보 등의 활동은 자발적인 + <br /> + 참여로 이루어지고, 스스로 활동 방향과 목표를 설정합니다. + </Text> + </div> + <div className="imageTwoBox"> + <div className="imageTwoTextBox"> + <div className="firstText"> + <Text size="xlarge" lineheight="34.42px"> + 1990년대부터 현재까지 NL의 선배 부원들은 + <br /> + 네이버, 라인, 카카오, 쿠팡을 비롯해 <br /> + 실리콘밸리 스타트업 등 다양한 개발 분야에서 <br /> + 두각을 보이고 있습니다. + </Text> + </div> + <Text size="xlarge" lineheight="34.42px"> + 약 40여 명으로 구성된 현 부원들은 <br /> + 개발, 알고리즘 대회 등 다양한 부문에서 <br /> + 활발한 활동을 이어나가고 있습니다. + </Text> + </div> + <Image src={aboutImage2} alt="image2" /> + </div> + </TitleTextSection> + ); +}; +export default TitleText; diff --git a/src/components/about/whoWeAre/coreValue/Content.tsx b/src/components/about/whoWeAre/coreValue/Content.tsx new file mode 100644 index 0000000..78cf89a --- /dev/null +++ b/src/components/about/whoWeAre/coreValue/Content.tsx @@ -0,0 +1,92 @@ +import { useState } from "react"; +import { CoreValueContentBox } from "../../../../styles/about/whoWeAre"; +import { Text } from "../../../common"; + +interface CoreValueType { + isSelectValue: string; + setIsSelectValue: (v: string) => void; +} + +const Content = ({ isSelectValue, setIsSelectValue }: CoreValueType) => { + return ( + <CoreValueContentBox isSelectValue={isSelectValue}> + <div className="coreValueTitle1Box"> + <div + className="coreValueTitle" + onClick={() => setIsSelectValue("value1")} + > + <Text + size="h2" + weight="bold" + color={isSelectValue !== "value1" ? "blackopacity" : "black"} + > + Core Value 1 + </Text> + </div> + <div className="coreValueContent"> + <Text size="large" lineheight="27.2px"> + Lorem Ipsum is simply dummy text of the printing and typesetting + <br /> + industry. Lorem Ipsum has been the industry's standard dummy text + <br /> + ever since the 1500s, when an unknown printer took a galley of type + <br /> + and scrambled + </Text> + </div> + </div> + <div className="coreValueTitle2Box"> + <div + className="coreValueTitle" + onClick={() => setIsSelectValue("value2")} + > + <Text + size="h2" + weight="bold" + color={isSelectValue !== "value2" ? "blackopacity" : "black"} + > + Core Value 2 + </Text> + </div> + <div className="coreValueContent"> + <Text size="large" lineheight="27.2px"> + Lorem Ipsum is simply dummy text of the printing and typesetting + <br /> + industry. Lorem Ipsum has been the industry's standard dummy text + <br /> + ever since the 1500s, when an unknown printer took a galley of type + <br /> + and scrambled + </Text> + </div> + </div> + <div className="coreValueTitle3Box"> + <div + className="coreValueTitle" + onClick={() => setIsSelectValue("value3")} + > + <Text + size="h2" + weight="bold" + color={isSelectValue !== "value3" ? "blackopacity" : "black"} + > + Core Value 3 + </Text> + </div> + <div className="coreValueContent"> + <Text size="large" lineheight="27.2px"> + Lorem Ipsum is simply dummy text of the printing and typesetting + <br /> + industry. Lorem Ipsum has been the industry's standard dummy text + <br /> + ever since the 1500s, when an unknown printer took a galley of type + <br /> + and scrambled + </Text> + </div> + </div> + </CoreValueContentBox> + ); +}; + +export default Content; diff --git a/src/components/about/whoWeAre/coreValue/index.tsx b/src/components/about/whoWeAre/coreValue/index.tsx new file mode 100644 index 0000000..830964c --- /dev/null +++ b/src/components/about/whoWeAre/coreValue/index.tsx @@ -0,0 +1,48 @@ +import { useState } from "react"; +import { CoreValueSection } from "../../../../styles/about/whoWeAre"; +import { Image } from "../../../common"; +import CoreValueImage1 from "../../../../assets/coreValue1.png"; +import CoreValueImage2 from "../../../../assets/coreValue2.png"; +import CoreValueImage3 from "../../../../assets/coreValue3.png"; +import Content from "./Content"; +const CoreValue = () => { + const [isSelectValue, setIsSelectValue] = useState<string>("value1"); + + return ( + <CoreValueSection isSelectValue={isSelectValue}> + <div className="coreValueImageBox"> + <div className="image1"> + <Image + src={CoreValueImage1} + alt="CoreValueImage" + width="460px" + height="460px" + /> + </div> + <div className="image2"> + <Image + src={CoreValueImage2} + alt="CoreValueImage" + width="460px" + height="460px" + /> + </div> + <div className="image3"> + <Image + src={CoreValueImage3} + alt="CoreValueImage" + width="460px" + height="460px" + /> + </div> + </div> + <div className="coreValueContentBox"> + <Content + isSelectValue={isSelectValue} + setIsSelectValue={setIsSelectValue} + /> + </div> + </CoreValueSection> + ); +}; +export default CoreValue; diff --git a/src/components/about/whoWeAre/index.tsx b/src/components/about/whoWeAre/index.tsx new file mode 100644 index 0000000..f405577 --- /dev/null +++ b/src/components/about/whoWeAre/index.tsx @@ -0,0 +1,13 @@ +import CoreValue from "./coreValue"; +import TitleText from "./TitleText"; + +const WhoWeAreSection = () => { + return ( + <> + <TitleText /> + <CoreValue /> + </> + ); +}; + +export default WhoWeAreSection; diff --git a/src/components/activity/modal/add/body/form/index.tsx b/src/components/activity/modal/add/body/form/index.tsx index df1ddaa..780ffc6 100644 --- a/src/components/activity/modal/add/body/form/index.tsx +++ b/src/components/activity/modal/add/body/form/index.tsx @@ -270,8 +270,8 @@ const AddActivityForm = ({ <Image src={fileDataURL} alt="thumbnail" - width={405} - height={265} + width="405px" + height="265px" fit="cover" display="inline-block" shape="rounded" diff --git a/src/components/activity/modal/register/body/Thumbnail.tsx b/src/components/activity/modal/register/body/Thumbnail.tsx index d3f5655..e2be2b7 100644 --- a/src/components/activity/modal/register/body/Thumbnail.tsx +++ b/src/components/activity/modal/register/body/Thumbnail.tsx @@ -6,8 +6,8 @@ const Thumbnail = ({ thumb }: { thumb: string | null }) => { <Image src={thumb ? thumb : defaultModalImg} alt="thumbnail" - width={405} - height={265} + width="405px" + height="265px" fit="cover" display="inline-block" shape="rounded" diff --git a/src/components/common/Image.tsx b/src/components/common/Image.tsx index 24c2911..d1f4a36 100644 --- a/src/components/common/Image.tsx +++ b/src/components/common/Image.tsx @@ -7,12 +7,12 @@ interface ImageProps { /** * @default 'auto' */ - width?: number; + width?: string; /** * @default 'auto' */ - height?: number; + height?: string; /** * @default 'square' @@ -38,8 +38,8 @@ interface ImageProps { function Image(props: ImageProps) { const Component = styled.img` - width: ${`${props.width}px` ?? "auto"}; - height: ${`${props.height}px` ?? "auto"}; + width: ${props.width ?? "auto"}; + height: ${props.height ?? "auto"}; border-radius: ${props.shape === "circle" ? "50%" : props.shape === "rounded" diff --git a/src/components/common/Tag.tsx b/src/components/common/Tag.tsx index d7b8066..5209c9b 100644 --- a/src/components/common/Tag.tsx +++ b/src/components/common/Tag.tsx @@ -5,7 +5,7 @@ interface TagPorps { /** * @default "medium" */ - padding?: "min" | "medium" | "max"; + padding?: "min" | "medium" | "large" | "max"; /** * @default 'medium' * @props fontSize small: 12px @@ -21,7 +21,7 @@ interface TagPorps { /** * @default 'black' */ - color?: "white" | "black" | "highlight"; + color?: "white" | "black" | "highlight" | "blue"; /** * @default 'black' */ @@ -30,7 +30,9 @@ interface TagPorps { | "block" | "purple" | "lightpurple" - | "purpleopacity"; + | "purpleopacity" + | "blue" + | "blueopacity"; /** * @default 'default' * @props radius default: 10px @@ -47,6 +49,7 @@ interface TagPorps { */ onClick?: () => void; children: React.ReactNode; + className?: string; } /** * @@ -58,6 +61,8 @@ interface TagPorps { * @param radius * @param icon * @param onClick + * @param onMouseOver + * @param onMouseLeave * @param children * @returns JSX.Element */ @@ -70,6 +75,7 @@ const Tag = ({ radius, icon, onClick, + className, children, }: TagPorps) => { const Component = styled.span` @@ -78,7 +84,9 @@ const Tag = ({ ? "8px 12px" : padding === "min" ? "4px 5px" - : "4px 20px"}; + : padding === "max" + ? "4px 20px" + : "8px 25px"}; border-radius: ${({ theme }) => theme.borderRadius[radius ?? "default"]}; font-size: ${({ theme }) => theme.font.size[fontSize ?? "medium"]}px; font-weight: ${({ theme }) => theme.font.weight[fontWeight ?? "medium"]}; @@ -87,7 +95,7 @@ const Tag = ({ theme.background[backgroundColor ?? "purple"]}; `; return ( - <Component onClick={onClick}> + <Component onClick={onClick} className={className}> {icon === "add" ? ( <> <span> diff --git a/src/components/common/Text.tsx b/src/components/common/Text.tsx index 84f2f18..7399daf 100644 --- a/src/components/common/Text.tsx +++ b/src/components/common/Text.tsx @@ -12,7 +12,15 @@ interface TextProps { | "medium" | "small"; weight?: "bold" | "medium" | "regular" | "light" | "thin"; - color?: "black" | "white" | "warning" | "highlight" | "block" | "foot"; + color?: + | "black" + | "white" + | "grey" + | "warning" + | "highlight" + | "block" + | "foot" + | "blackopacity"; lineheight?: string; children: React.ReactNode; } diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx index 50ff0c3..a6e0ffd 100644 --- a/src/components/layout/Header.tsx +++ b/src/components/layout/Header.tsx @@ -18,7 +18,7 @@ type Props = { const menuList = [ { name: "소개", - link: "/", + link: "/about", }, { name: "활동", diff --git a/src/components/mainpage/whatWeDoSection/index.tsx b/src/components/mainpage/whatWeDoSection/index.tsx new file mode 100644 index 0000000..1f5c6bb --- /dev/null +++ b/src/components/mainpage/whatWeDoSection/index.tsx @@ -0,0 +1,7 @@ +import Project from "../../about/whatWeDo/project"; + +const MainWhatWeDoSection = () => { + return <Project page="main" />; +}; + +export default MainWhatWeDoSection; diff --git a/src/components/mainpage/whoWeAreSection/index.tsx b/src/components/mainpage/whoWeAreSection/index.tsx new file mode 100644 index 0000000..98f785f --- /dev/null +++ b/src/components/mainpage/whoWeAreSection/index.tsx @@ -0,0 +1,82 @@ +import { MainWEAContainer } from "../../../styles/mainpage/whoWeAreSection"; +import { Image, Text } from "../../common"; +import BG from "../../../assets/main_who_we_are_bg.png"; +import BG_blur from "../../../assets/main_who_we_are_bg_blur.png"; +import Item1 from "../../../assets/main_who_we_are1.png"; +import Item2 from "../../../assets/main_who_we_are2.png"; +import Item3 from "../../../assets/main_who_we_are3.png"; + +const whoWeAreItem = [ + { + id: 1, + src: Item1, + subTitle: "주체적 배움", + subDes: + "개인과 공동체의 성장을 위해\n 스스로 목표를 설정하고\n 적극적이고 자발적으로\n 배우려는 자세를 지향합니다.", + }, + { + id: 2, + src: Item2, + subTitle: "지속적 나눔", + subDes: + "각자가 가진 능력은 어느\n누구에게 받은 것이기에 내가\n받은 가치를 나눔으로써\n공동체는 더욱 발전합니다.", + }, + { + id: 3, + src: Item3, + subTitle: "생각의 존중", + subDes: + "서로의 생각을 이해하기 위해\n노력하며 함께 발전 방향을\n모색하는 태도를 지향합니다.", + }, +]; + +const MainWhoWeAreSection = () => { + return ( + <MainWEAContainer> + <div className="titleImg"> + <Image src={BG} alt="bg" width="100vw" /> + </div> + <div className="titleImgBlur"> + <Image src={BG_blur} alt="bg_blur" width="106vw" /> + </div> + <div className="title"> + <Text size="h1" weight="bold" color="white"> + Who We Are + </Text> + </div> + <div className="content"> + {/* <div className="item1"> + <Image src={Item1} alt="item1" /> + </div> + <div className="item2"> + <Image src={Item2} alt="item2" /> + </div> + <div className="item3"> + <Image src={Item3} alt="item3" /> + </div> */} + {whoWeAreItem.map((item) => ( + <div className="item"> + <Image src={item.src} alt="item" /> + <div className="subTitle"> + <Text size="h3" weight="medium" color="white"> + {item.subTitle} + </Text> + </div> + <div className="subDes"> + <Text + size="xlarge" + weight="regular" + color="white" + lineheight="31.18px" + > + {item.subDes} + </Text> + </div> + </div> + ))} + </div> + </MainWEAContainer> + ); +}; + +export default MainWhoWeAreSection; diff --git a/src/pages/about.tsx b/src/pages/about.tsx index 1b3ca92..68fc520 100644 --- a/src/pages/about.tsx +++ b/src/pages/about.tsx @@ -1,7 +1,7 @@ -import { GlobalContainer } from "../styles/layout/layout"; +import About from "../components/about"; -const About = () => { - return <GlobalContainer></GlobalContainer>; +const AboutPage = () => { + return <About />; }; -export default About; +export default AboutPage; diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 0f824bb..9485b4c 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,14 +1,18 @@ import VideoTextSection from "../components/mainpage/videoTextSection"; import SlideSection from "../components/mainpage/slideSection"; import ApplicationSection from "../components/mainpage/applicationSection"; +import MainWhatWeDoSection from "../components/mainpage/whatWeDoSection"; +import MainWhoWeAreSection from "../components/mainpage/whoWeAreSection"; const MainPage = () => { return ( <> - <div style={{ height: "8000px" }}> + <div style={{ height: "7000px" }}> <VideoTextSection /> </div> <SlideSection /> + <MainWhoWeAreSection /> + <MainWhatWeDoSection /> <ApplicationSection /> </> ); diff --git a/src/router.tsx b/src/router.tsx index 4eff127..17742ce 100644 --- a/src/router.tsx +++ b/src/router.tsx @@ -1,4 +1,5 @@ -import { BrowserRouter, Route, Routes } from "react-router-dom"; +import { useEffect } from "react"; +import { BrowserRouter, Route, Routes, useLocation } from "react-router-dom"; import Layout from "./components/layout"; import MainPage from "./pages"; import SignIn from "./components/member/signIn"; @@ -10,9 +11,18 @@ import About from "./pages/about"; import Board from "./pages/board"; import Template from "./components/activity/modal"; +function ScrollToTop() { + const { pathname } = useLocation(); + useEffect(() => { + window.scrollTo(0, 0); + }, [pathname]); + return null; +} + function Router() { return ( <BrowserRouter> + <ScrollToTop /> <Routes> <Route element={<Layout />}> <Route path="/" element={<MainPage />} /> diff --git a/src/styles/about/howWeAffect.tsx b/src/styles/about/howWeAffect.tsx new file mode 100644 index 0000000..6caefe2 --- /dev/null +++ b/src/styles/about/howWeAffect.tsx @@ -0,0 +1,86 @@ +import styled from "@emotion/styled"; + +export const HowWeAffectTitle = styled.section` + position: relative; + margin-top: 450px; + margin-bottom: 265px; +`; + +export const TitleBgSection = styled.div<{ scrollY: number }>` + position: relative; + width: 100vw; + height: calc(100vw / 1440 * 960); + display: flex; + justify-content: center; + align-items: center; + .titleImage { + position: absolute; + top: 0; + left: 0; + } + .blur { + position: absolute; + top: 0; + left: 0; + } + .text { + z-index: 2; + display: flex; + flex-direction: column; + gap: 92px; + .title { + z-index: 2; + text-align: center; + } + .description { + z-index: 2; + text-align: center; + } + } +`; + +export const SecondTitleBgSection = styled.div<{ scrollY: number }>` + position: relative; + height: calc(100vw / 1440 * 960); + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + .titleImage { + position: absolute; + top: 0; + left: 0; + } + .blur { + position: absolute; + top: 0; + left: 0; + } + .performance { + z-index: 3; + } + .perfText { + position: absolute; + top: 38%; + z-index: 4; + } +`; + +export const BlogNewsSection = styled.section` + width: 1018px; + margin: 0 auto 328px; + .title { + text-align: center; + margin-bottom: 77px; + } + .contentBox { + display: flex; + gap: 26px; + .description { + margin: 42px 0 51px; + } + .subtitle { + margin-bottom: 15px; + } + } +`; diff --git a/src/styles/about/whatWeDo.tsx b/src/styles/about/whatWeDo.tsx new file mode 100644 index 0000000..ebeecbe --- /dev/null +++ b/src/styles/about/whatWeDo.tsx @@ -0,0 +1,184 @@ +import styled from "@emotion/styled"; + +export const WhatWeDoTitleSection = styled.section` + position: relative; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + height: calc(100vw / 1440 * 960); + margin-bottom: 256px; + gap: 92px; + .titleImage { + position: absolute; + top: 0; + z-index: 1; + } + .titleImage2 { + position: absolute; + top: 0; + } + .whatWeDoTitle { + z-index: 2; + } + .whatWeDoContent { + text-align: center; + z-index: 2; + } +`; + +export const SubTitleSection = styled.section<{ scrollY: number }>` + position: relative; + width: 100vw; + height: 46.2vw; + margin-bottom: 335px; + overflow: hidden; + .content { + position: absolute; + left: 14.6%; + top: 3.6%; + transition: 2s; + transform: ${(props) => + props.scrollY > 5550 ? "translate(0px)" : "translate(-1000px)"}; + } + .image3 { + position: absolute; + right: 0; + transition: 1s; + transform: ${(props) => + props.scrollY > 5650 ? "translate(0px)" : "translate(500px)"}; + } + .image4 { + position: absolute; + left: 17.3%; + top: 49%; + transition: 1s; + transform: ${(props) => + props.scrollY > 5850 ? "translate(0px)" : "translate(-1000px)"}; + } + .nlText { + display: flex; + position: absolute; + right: -1.1vw; + bottom: 0.8vw; + transition: 1s; + transform: ${(props) => + props.scrollY > 6050 ? "translate(0px)" : "translate(500px)"}; + .firstText { + color: black; + font-size: 6.8vw; + font-weight: 500; + mix-blend-mode: difference; + } + .symbol { + width: 5.7vw; + height: 5.7vw; + background-color: lightgray; + margin: 10px 1.7vw 0 1.1vw; + } + .secondText { + font-size: 6.8vw; + font-weight: 500; + } + } +`; + +export const ProgramsSection = styled.section` + width: 1024px; + margin: 0 auto; + margin-bottom: 450px; + .title { + margin-bottom: 40px; + } + .contentBox { + display: flex; + gap: 20px; + .content1 { + border-top: 1px solid black; + width: 328px; + padding-top: 34px; + } + .content2 { + border-top: 1px solid black; + width: 328px; + padding-top: 34px; + } + .content3 { + border-top: 1px solid black; + width: 328px; + padding-top: 34px; + } + } +`; + +export const ProjectSection = styled.section` + width: 1075px; + margin: 0 auto; + .title { + text-align: center; + margin-bottom: 80px; + } + .contentBox { + display: flex; + gap: 60px; + .contentTitle { + margin-top: 34px; + margin-bottom: 44px; + } + .contentDescription { + margin-bottom: 52px; + } + } +`; + +export const TagBox = styled.div` + display: flex; + flex-wrap: wrap; + gap: 20px; + .tag { + position: relative; + &:hover { + background-color: #4a38f4; + color: white; + .tagDetail { + display: block; + } + } + } + .tagDetail { + z-index: 3; + position: absolute; + top: 10px; + left: 80px; + background-color: rgba(255, 255, 255, 0.77); + display: none; + width: 295px; + border-radius: 10px; + box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.25); + backdrop-filter: blur(2px); + height: 82px; + .eclipse { + width: 4px; + height: 4px; + border-radius: 50%; + background-color: ${(props) => props.theme.background.blue}; + display: inline-block; + position: absolute; + top: 16px; + left: 17px; + } + .title { + color: #828282; + font-size: 12px; + font-weight: 700; + position: absolute; + top: 20px; + left: 23px; + } + .des { + position: absolute; + top: 43px; + left: 23px; + } + } +`; diff --git a/src/styles/about/whoWeAre.tsx b/src/styles/about/whoWeAre.tsx new file mode 100644 index 0000000..054a711 --- /dev/null +++ b/src/styles/about/whoWeAre.tsx @@ -0,0 +1,124 @@ +import styled from "@emotion/styled"; + +export const TitleTextSection = styled.section` + margin: 105px 0 371px 0; + text-align: center; + width: 100vw; + .titleBox { + margin-bottom: 63px; + } + .subTitleBox { + margin-bottom: 195px; + } + .secImageBox { + margin-bottom: 190px; + } + .imageOneBox { + display: flex; + gap: 22px; + margin-left: 41%; + align-items: center; + text-align: left; + margin-bottom: 266px; + } + .imageTwoBox { + display: flex; + gap: 89px; + text-align: left; + margin-left: 14.7%; + .imageTwoTextBox { + .firstText { + margin-bottom: 15px; + } + } + } +`; + +export const CoreValueSection = styled.section<{ isSelectValue: string }>` + width: 1024px; + margin: 0 auto; + display: flex; + .coreValueImageBox { + position: relative; + .image1 { + opacity: ${(props) => (props.isSelectValue === "value1" ? 1 : 0)}; + transition: 0.6s; + } + .image2 { + position: absolute; + top: 0; + left: 0; + opacity: ${(props) => (props.isSelectValue === "value2" ? 1 : 0)}; + transition: 0.6s; + } + .image3 { + position: absolute; + top: 0; + left: 0; + opacity: ${(props) => (props.isSelectValue === "value3" ? 1 : 0)}; + transition: 0.6s; + } + } + .coreValueContentBox { + width: 100%; + min-height: 100%; + padding: 30px 0 0 40px; + } +`; + +export const CoreValueContentBox = styled.div<{ isSelectValue: string }>` + margin-bottom: 420px; + .coreValueTitle1Box { + border-bottom: ${(props) => + props.isSelectValue === "value1" && "1px solid black"}; + padding-bottom: ${(props) => props.isSelectValue === "value1" && "35px"}; + margin-bottom: 45px; + .coreValueTitle { + cursor: pointer; + transition: color 0.6s; + margin-bottom: 0; + transition: margin 0.6s; + margin-bottom: ${(props) => props.isSelectValue === "value1" && "54px"}; + } + .coreValueContent { + height: 120px; + height: ${(props) => props.isSelectValue !== "value1" && 0}; + overflow: hidden; + transition: 0.4s; + } + } + .coreValueTitle2Box { + border-bottom: ${(props) => + props.isSelectValue === "value2" && "1px solid black"}; + padding-bottom: ${(props) => props.isSelectValue === "value2" && "35px"}; + margin-bottom: 45px; + .coreValueTitle { + cursor: pointer; + margin-bottom: 0; + transition: margin 0.6s; + margin-bottom: ${(props) => props.isSelectValue === "value2" && "54px"}; + } + .coreValueContent { + height: 120px; + height: ${(props) => props.isSelectValue !== "value2" && 0}; + overflow: hidden; + transition: 0.4s; + } + } + .coreValueTitle3Box { + padding-bottom: ${(props) => props.isSelectValue === "value3" && "35px"}; + margin-bottom: 45px; + .coreValueTitle { + cursor: pointer; + margin-bottom: 0; + transition: margin 0.6s; + margin-bottom: ${(props) => props.isSelectValue === "value3" && "54px"}; + } + .coreValueContent { + height: 120px; + height: ${(props) => props.isSelectValue !== "value3" && 0}; + overflow: hidden; + transition: 0.4s; + } + } +`; diff --git a/src/styles/layout/footer.ts b/src/styles/layout/footer.ts index e0a06dd..81f86d4 100644 --- a/src/styles/layout/footer.ts +++ b/src/styles/layout/footer.ts @@ -11,7 +11,13 @@ const FooterBox = styled.div` bottom: 0; background-color: black; `; +const FooterRightBox = styled.div` + /* float: right; */ +`; +const FooterLeftBox = styled.div` + margin-right: auto; +`; const FooterIconBox = styled.div` display: flex; justify-content: flex-start; @@ -21,14 +27,6 @@ const FooterIconBox = styled.div` border-bottom: 2px solid white; `; -const FooterRightBox = styled.div` - /* float: right; */ -`; - -const FooterLeftBox = styled.div` - margin-right: auto; -`; - const FooterContents = styled.div` min-width: 942px; color: white; diff --git a/src/styles/mainpage/applicationSection.ts b/src/styles/mainpage/applicationSection.ts index cb6730b..06fd847 100644 --- a/src/styles/mainpage/applicationSection.ts +++ b/src/styles/mainpage/applicationSection.ts @@ -6,6 +6,7 @@ export const CoverImageBox = styled.div<{ img: string }>` height: auto; width: 100%; background-size: cover; + margin-top: 300px; `; export const MainBox = styled.div` diff --git a/src/styles/mainpage/slideSection.ts b/src/styles/mainpage/slideSection.ts index f800e94..521e313 100644 --- a/src/styles/mainpage/slideSection.ts +++ b/src/styles/mainpage/slideSection.ts @@ -9,6 +9,7 @@ export const SlideWrapper = styled.section` width: 100vw; height: 800px; margin-top: 100px; + margin-bottom: 213px; background-color: white; `; diff --git a/src/styles/mainpage/whoWeAreSection.tsx b/src/styles/mainpage/whoWeAreSection.tsx new file mode 100644 index 0000000..deb3c9a --- /dev/null +++ b/src/styles/mainpage/whoWeAreSection.tsx @@ -0,0 +1,41 @@ +import styled from "@emotion/styled"; + +export const MainWEAContainer = styled.section` + position: relative; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 120px; + height: calc(100vw / 1440 * 960); + margin-bottom: 256px; + .titleImg { + position: absolute; + top: 0; + } + .titleImgBlur { + position: absolute; + top: 0; + z-index: 1; + } + .title { + z-index: 2; + } + .content { + display: flex; + flex-direction: row; + z-index: 2; + gap: 140px; + .item { + width: 230px; + margin: 0 auto; + text-align: center; + .subTitle { + margin: 53px 0 24px 0; + } + .subDes { + white-space: pre-line; + } + } + } +`; diff --git a/src/theme/emotion.d.ts b/src/theme/emotion.d.ts index 51c48af..1e4b727 100644 --- a/src/theme/emotion.d.ts +++ b/src/theme/emotion.d.ts @@ -23,11 +23,14 @@ declare module "@emotion/react" { }; color: { black: string; + blackopacity: string; + grey: string; white: string; warning: string; highlight: string; block: string; foot: string; + blue: string; }; }; background: { @@ -40,6 +43,8 @@ declare module "@emotion/react" { purple: string; lightpurple: string; purpleopacity: string; + blue: string; + blueopacity: string; }; borderRadius: { min: string; diff --git a/src/theme/theme.ts b/src/theme/theme.ts index ee2f5ea..290e661 100644 --- a/src/theme/theme.ts +++ b/src/theme/theme.ts @@ -22,11 +22,14 @@ const theme: Theme = { }, color: { black: "#000000", + blackopacity: "rgba(0,0,0,.35)", + grey: "#6C6C6C", white: "#FFFFFF", warning: "#FF3939", highlight: "#4A38F4", block: "#868686", foot: "#BEBEBE", + blue: "#4A38F4", }, }, background: { @@ -39,6 +42,8 @@ const theme: Theme = { purple: "#4A38F4", lightpurple: "#DAD4FD", purpleopacity: "rgba(153, 137, 247, 0.1)", + blue: "#4A38F4", + blueopacity: "rgba(74, 56, 244, 0.1)", }, borderRadius: { min: "5px", diff --git a/tsconfig.json b/tsconfig.json index 74caf0d..9d379a3 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,11 +1,7 @@ { "compilerOptions": { "target": "es5", - "lib": [ - "dom", - "dom.iterable", - "esnext" - ], + "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "skipLibCheck": true, "esModuleInterop": true, @@ -20,7 +16,5 @@ "noEmit": true, "jsx": "react-jsx" }, - "include": [ - "src" - ] -} \ No newline at end of file + "include": ["src"] +}