feat: add BrandSection area with template

gdsc-ssu · Aug 21, 2023 · 7b999db · 7b999db
1 parent f653275
commit 7b999db
Show file tree

Hide file tree

Showing 4 changed files with 229 additions and 2 deletions.
diff --git a/src/components/main/BrandSection/BrandSection.css.ts b/src/components/main/BrandSection/BrandSection.css.ts
@@ -0,0 +1,171 @@
+import { style } from '@vanilla-extract/css';
+import { TEXT_STYLES, COLORS, MEDIA_QUERY } from '@/constants/styles';
+
+const titleWrapper = style({
+  flexShrink: 0,
+  position: 'relative',
+  display: 'flex',
+  flexDirection: 'column',
+  paddingLeft: '101px',
+
+  [`@media ${MEDIA_QUERY.tabletLg}`]: {
+    paddingLeft: '76px',
+  },
+  [`@media ${MEDIA_QUERY.tabletSm}`]: {
+    paddingLeft: '101px',
+  },
+  [`@media ${MEDIA_QUERY.mobile}`]: {
+    paddingLeft: '52px',
+  },
+});
+
+const titleText = style({
+  ...TEXT_STYLES.maintitle,
+});
+
+export const title = style([titleWrapper, titleText]);
+
+const descriptionWrapper = style({
+  [`@media ${MEDIA_QUERY.tabletSm}`]: {
+    padding: '0 104px 100px',
+  },
+  [`@media ${MEDIA_QUERY.mobile}`]: {
+    padding: '0 52px',
+  },
+});
+
+const descriptionText = style({
+  ...TEXT_STYLES.description,
+});
+
+export const description = style([descriptionWrapper, descriptionText]);
+
+export const hipiText = style({
+  color: COLORS.primary.red,
+  wordBreak: 'keep-all',
+  fontSize: '32px',
+  fontWeight: 400,
+  lineHeight: '110%',
+
+  [`@media ${MEDIA_QUERY.tabletLg}`]: {
+    fontSize: '24px',
+  },
+  [`@media ${MEDIA_QUERY.tabletSm}`]: {
+    fontSize: '24px',
+  },
+  [`@media ${MEDIA_QUERY.mobile}`]: {
+    fontSize: '20px',
+  },
+});
+
+export const iconWrapper = style({
+  margin: '0 4px',
+});
+
+const textIcon = style({
+  verticalAlign: 'middle',
+});
+
+const starIcon = style({
+  width: '34px',
+  height: '33px',
+
+  [`@media ${MEDIA_QUERY.tabletLg}`]: {
+    width: '28px',
+    height: '27px',
+  },
+  [`@media ${MEDIA_QUERY.tabletSm}`]: {
+    width: '28px',
+    height: '27px',
+  },
+  [`@media ${MEDIA_QUERY.mobile}`]: {
+    width: '24px',
+    height: '23px',
+  },
+});
+
+const worldWithFlagIcon = style({
+  width: '24px',
+  height: '35px',
+
+  [`@media ${MEDIA_QUERY.tabletLg}`]: {
+    width: '18px',
+    height: '26px',
+  },
+  [`@media ${MEDIA_QUERY.tabletSm}`]: {
+    width: '18px',
+    height: '26px',
+  },
+  [`@media ${MEDIA_QUERY.mobile}`]: {
+    width: '14px',
+    height: '20px',
+  },
+});
+
+export const textStarIcon = style([textIcon, starIcon]);
+
+export const textWorldWithFlagIcon = style([textIcon, worldWithFlagIcon]);
+
+export const textWrapper = style({
+  display: 'flex',
+});
+
+export const textWithUnderscore = style({
+  position: 'relative',
+});
+
+export const smileIconWrapper = style({
+  display: 'flex',
+  height: '100%',
+});
+
+export const smileIcon = style({
+  width: '47px',
+  height: '35px',
+
+  [`@media ${MEDIA_QUERY.tabletLg}`]: {
+    width: '37px',
+    height: '28px',
+  },
+  [`@media ${MEDIA_QUERY.tabletSm}`]: {
+    width: '37px',
+    height: '28px',
+  },
+  [`@media ${MEDIA_QUERY.mobile}`]: {
+    width: '32px',
+    height: '24px',
+  },
+});
+
+export const unserscoreIcon = style({
+  position: 'absolute',
+  left: 0,
+  bottom: '-2px',
+  width: '100%',
+});
+
+export const paperAirplaneIcon = style({
+  position: 'absolute',
+  left: 0,
+  bottom: '-69px',
+  width: '182px',
+  height: '124px',
+
+  [`@media ${MEDIA_QUERY.tabletLg}`]: {
+    bottom: '-83px',
+    width: '160px',
+    height: '110px',
+  },
+  [`@media ${MEDIA_QUERY.tabletSm}`]: {
+    bottom: '-83px',
+    left: '25px',
+    width: '160px',
+    height: '110px',
+  },
+  [`@media ${MEDIA_QUERY.mobile}`]: {
+    bottom: '-51px',
+    left: '9px',
+    width: '114px',
+    height: '78px',
+  },
+});
diff --git a/src/components/main/BrandSection/BrandSection.tsx b/src/components/main/BrandSection/BrandSection.tsx
@@ -0,0 +1,53 @@
+import SectionWrapper from '../SectionWrapper';
+import Star from '@/assets/icons/Star.svg';
+import SmileFace from '@/assets/icons/SmileFace.svg';
+import WorldWithFlag from '@/assets/icons/WorldWithFlag.svg';
+import UnsderScore from '@/assets/icons/UnderScore.svg';
+import PaperAirplane from '@/assets/icons/PaperAirplane.svg';
+import * as styles from './BrandSection.css';
+
+const BrandSection = () => {
+  return (
+    <SectionWrapper>
+      <div className={styles.title}>
+        <span>실력 너머의</span>
+        <span className={styles.textWrapper}>
+          <span className={styles.textWithUnderscore}>
+            유쾌함으로
+            <UnsderScore className={styles.unserscoreIcon} />
+          </span>
+          <div className={styles.smileIconWrapper}>
+            <SmileFace className={styles.smileIcon} />
+          </div>
+        </span>
+        <span>세상을 바꿉니다.</span>
+        <PaperAirplane className={styles.paperAirplaneIcon} />
+      </div>
+      <div className={styles.description}>
+        GDSC Soongsil University는 서로의 실력과 무관하게 시너지를 발휘하는 학생
+        개발자 커뮤니티입니다. 그 시너지의 배경에는, 서로 마음을 맞추어 어떤
+        것도 함께라면 즐거운{' '}
+        <span style={{ display: 'inline-block' }}>
+          <div style={{ display: 'flex', alignItems: 'center' }}>
+            <span className={`${styles.hipiText} hipi`}> 놀이</span>
+            <span className={styles.iconWrapper}>
+              <Star className={styles.textStarIcon} />
+            </span>
+          </div>
+        </span>
+        로 만드는 선한 친화력이 있습니다. 그리고 우리는 그 즐거움을 전염시켜{' '}
+        <span style={{ display: 'inline-block' }}>
+          <div style={{ display: 'flex', alignItems: 'center' }}>
+            <span className={`${styles.hipiText} hipi`}> 세상</span>
+            <span className={styles.iconWrapper}>
+              <WorldWithFlag className={styles.textWorldWithFlagIcon} />
+            </span>
+          </div>
+        </span>
+        을 더 좋은 곳으로 만들 수 있다고 믿습니다.
+      </div>
+    </SectionWrapper>
+  );
+};
+
+export default BrandSection;
diff --git a/src/components/main/BrandSection/index.ts b/src/components/main/BrandSection/index.ts
@@ -0,0 +1,3 @@
+import BrandSection from './BrandSection';
+
+export default BrandSection;
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -1,5 +1,5 @@
-import { Test } from '@/components/common';
+import BrandSection from '@/components/main/BrandSection';
 
 export default function Home() {
-  return <Test text={'test'} />;
+  return <BrandSection />;
 }