diff --git a/public/assets/fonts/timeforsalad.ttf b/public/assets/fonts/timeforsalad.ttf new file mode 100644 index 00000000..c75080f4 Binary files /dev/null and b/public/assets/fonts/timeforsalad.ttf differ diff --git a/src/app/page.tsx b/src/app/page.tsx index 46e97816..17843e61 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -2,13 +2,12 @@ import { useRouter } from "next/navigation"; import { MATCH_PAGE_DATA } from "@/constants/match"; -import Image from "next/image"; import styled from "styled-components"; import { theme } from "@/styles/theme"; import { useState } from "react"; import Alert from "@/components/common/Alert"; import { getAccessToken } from "@/utils/storage"; -import { AuthAxios } from "@/api/auth"; +import Banner from "@/components/common/Banner"; const HomePage = () => { const router = useRouter(); @@ -30,16 +29,7 @@ const HomePage = () => { /> )} -
- logo - 겜구 커뮤니티에 오신 것을 환영합니다. -
+
{MATCH_PAGE_DATA.map((content) => { return ( diff --git a/src/components/common/Banner.tsx b/src/components/common/Banner.tsx new file mode 100644 index 00000000..df3b4508 --- /dev/null +++ b/src/components/common/Banner.tsx @@ -0,0 +1,55 @@ +import styled from "styled-components"; + +const Banner = () => { + return ( + + +

+ 겜구 커뮤니티에 오신 것을 환영해요 🎉 +

+ 게임 친구를 쉽고 빠르게 구해줄게요! +
+ GAMGOO +
+ ); +}; + +export default Banner; + +const BannerWrapper = styled.div` + width: 100%; + height: 128px; + background: #f0f0fc; + border-radius: 20px; + display: flex; + align-items: center; + padding: 40px; + position: relative; + margin-bottom: 32px; +`; + +const TextContainer = styled.div` + flex: 1; +`; + +const HighlightText = styled.span` + color: #8a63d2; + font-weight: bold; +`; + +const Description = styled.p` + margin: 0; + font-size: 16px; + color: #333; +`; + +const Logo = styled.div` + font-size: 72px; + font-weight: bold; + font-family: "TimeForSalad", sans-serif; + color: #c1b7ff; + opacity: 0.3; + position: absolute; + right: 20px; + letter-spacing: 5px; +`; diff --git a/src/styles/GlobalStyles.ts b/src/styles/GlobalStyles.ts index 3a508cfa..b05f2962 100644 --- a/src/styles/GlobalStyles.ts +++ b/src/styles/GlobalStyles.ts @@ -53,6 +53,14 @@ button { src: url("/public/assets/fonts/PretendardVariable.woff2") format('font-woff2'), url("/assets/fonts/PretendardVariable.ttf") format('truetype'); } +/* 새로 추가한 Time For Salad */ +@font-face { + font-family: "TimeForSalad"; + src: url("/assets/fonts/TimeForSalad.woff2") format("woff2"), + url("/assets/fonts/TimeForSalad.ttf") format("truetype"); + font-weight: normal; + font-style: normal; +} `; -export default GlobalStyles; \ No newline at end of file +export default GlobalStyles;