diff --git a/src/views/MainPage/components/Tab/index.tsx b/src/views/MainPage/components/Tab/index.tsx new file mode 100644 index 00000000..7c478319 --- /dev/null +++ b/src/views/MainPage/components/Tab/index.tsx @@ -0,0 +1,18 @@ +import * as S from './style'; + +interface TabProps { + tab: string; + title: string; + description: string; +} +export default function Tab({ tab, title, description }: TabProps) { + return ( + + {tab} + {title} + {description.split('\n').map((string) => { + return {string}; + })} + + ); +} diff --git a/src/views/MainPage/components/Tab/style.ts b/src/views/MainPage/components/Tab/style.ts new file mode 100644 index 00000000..93b79bfb --- /dev/null +++ b/src/views/MainPage/components/Tab/style.ts @@ -0,0 +1,71 @@ +import styled from '@emotion/styled'; +import { colors } from '@sopt-makers/colors'; + +export const Wrapper = styled.section` + display: flex; + flex-direction: column; + align-items: flex-start; +`; + +export const Tab = styled.h2` + color: #5b88f8; + font-family: SUIT; + font-size: 18px; + font-style: normal; + font-weight: 600; + line-height: 46.311px; /* 257.282% */ + letter-spacing: -0.36px; + + margin-bottom: 8px; + /* 모바일 뷰 */ + @media (max-width: 375px) { + font-size: 11px; + } +`; + +export const Title = styled.h1` + color: #30324d; + font-family: SUIT; + font-size: 45px; + font-style: normal; + font-weight: 600; + line-height: 50.64px; /* 112.534% */ + letter-spacing: -1.35px; + + margin-bottom: 16px; + + /* 태블릿 뷰 */ + @media (max-width: 768px) and (min-width: 376px) { + font-size: 36px; + letter-spacing: -1.08px; + } + /* 모바일 뷰 */ + @media (max-width: 375px) { + font-size: 21px; + line-height: 29.103px; /* 138.588% */ + letter-spacing: -0.63px; + } +`; + +export const Description = styled.p` + color: #727272; + font-family: SUIT; + font-size: 17px; + font-style: normal; + font-weight: 400; + line-height: 28px; /* 164.706% */ + letter-spacing: -0.68px; + + /* 태블릿 뷰 */ + @media (max-width: 768px) and (min-width: 376px) { + font-size: 16px; + line-height: 26px; /* 162.5% */ + letter-spacing: -0.64px; + } + /* 모바일 뷰 */ + @media (max-width: 375px) { + font-size: 10px; + line-height: 14.942px; /* 149.424% */ + letter-spacing: -0.4px; + } +`;