diff --git a/web/public/assets/avif/landing-banner-cat.avif b/web/public/assets/avif/landing-banner-cat.avif new file mode 100644 index 000000000..8e257029e Binary files /dev/null and b/web/public/assets/avif/landing-banner-cat.avif differ diff --git a/web/public/prerendered/index.html b/web/public/prerendered/index.html index 79e91800e..f6fd7616d 100644 --- a/web/public/prerendered/index.html +++ b/web/public/prerendered/index.html @@ -4,7 +4,7 @@ 봄봄 | 읽고 남기고 쌓는 뉴스레터 리딩 플랫폼 @@ -145,6 +145,11 @@ .newsletter-card:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } + .newsletter-card a { + text-decoration: none; + color: inherit; + display: block; + } .newsletter-card img { width: 80px; height: 80px; @@ -188,9 +193,8 @@
@@ -204,160 +208,146 @@

- - - + + + + +
+ + + + + +
diff --git a/web/public/sitemap.xml b/web/public/sitemap.xml index 1bb1f16c9..82bb5f674 100644 --- a/web/public/sitemap.xml +++ b/web/public/sitemap.xml @@ -12,11 +12,4 @@ 1.0 - - - https://www.bombom.news/landing - 2026-03-25T00:00:00+00:00 - monthly - 0.8 - \ No newline at end of file diff --git a/web/src/components/Carousel/CarouselSlide.tsx b/web/src/components/Carousel/CarouselSlide.tsx index 48bdf4d76..77612846c 100644 --- a/web/src/components/Carousel/CarouselSlide.tsx +++ b/web/src/components/Carousel/CarouselSlide.tsx @@ -19,5 +19,6 @@ const CarouselSlide = ({ children }: PropsWithChildren) => { export default CarouselSlide; const Slide = styled.li` + min-width: 0; flex: 0 0 100%; `; diff --git a/web/src/pages/recommend/components/LandingIntroBanner/LandingIntroBanner.tsx b/web/src/pages/recommend/components/LandingIntroBanner/LandingIntroBanner.tsx new file mode 100644 index 000000000..e13462cf5 --- /dev/null +++ b/web/src/pages/recommend/components/LandingIntroBanner/LandingIntroBanner.tsx @@ -0,0 +1,128 @@ +import styled from '@emotion/styled'; +import { Link } from '@tanstack/react-router'; +import { useDevice } from '@/hooks/useDevice'; +import type { Device } from '@/hooks/useDevice'; +import landingCharacter from '#/assets/avif/landing-banner-cat.avif'; + +const LandingIntroBanner = () => { + const device = useDevice(); + + return ( + + + + + + <Highlight>봄봄</Highlight>이 처음이라면 + + 봄봄 서비스를 소개합니다. + + 서비스 소개 보기 + + + + + ); +}; + +export default LandingIntroBanner; + +const Container = styled(Link)` + overflow: hidden; + position: relative; + width: 100%; + padding: 0 clamp(40px, 5vw, 56px); + border-radius: 24px; + + display: flex; + align-items: center; + justify-content: center; + + background: + radial-gradient( + ellipse at top left, + rgb(254 94 4 / 9%) 0%, + rgb(254 94 4 / 4%) 44%, + transparent 68% + ), + linear-gradient(135deg, #fff6ef 0%, #fffaf2 48%, #fff1e8 100%); + + cursor: pointer; +`; + +const Content = styled.div` + width: 100%; + max-width: min(420px, 90%); + + display: grid; + gap: 12px; + align-items: center; + + grid-template-columns: 1fr auto; +`; + +const TextWrapper = styled.div` + width: 100%; + + display: flex; + gap: 12px; + flex-direction: column; +`; + +const TextGroup = styled.div` + display: flex; + gap: 8px; + flex-direction: column; +`; + +const Title = styled.p<{ device: Device }>` + width: calc(100% + clamp(80px, 20vw, 175px) + 12px); + + color: ${({ theme }) => theme.colors.textPrimary}; + font: ${({ device, theme }) => { + if (device === 'mobile') { + return theme.fonts.t8Bold; + } + if (device === 'tablet') { + return theme.fonts.t9Bold; + } + return theme.fonts.t12Bold; + }}; +`; + +const Description = styled.p<{ device: Device }>` + color: ${({ theme }) => theme.colors.textSecondary}; + font: ${({ device, theme }) => { + if (device === 'mobile') { + return theme.fonts.t5Regular; + } + if (device === 'tablet') { + return theme.fonts.t6Regular; + } + return theme.fonts.t7Regular; + }}; + + word-break: keep-all; +`; + +const Highlight = styled.span` + color: ${({ theme }) => theme.colors.primaryBomBom}; +`; + +const ActionText = styled.span<{ device: Device }>` + padding: ${({ device }) => (device === 'mobile' ? '4px 10px' : '8px 12px')}; + border-radius: 24px; + + align-self: flex-start; + + background: ${({ theme }) => theme.colors.primaryBomBom}; + color: ${({ theme }) => theme.colors.white}; + font: ${({ theme }) => theme.fonts.t4Bold}; + letter-spacing: -0.01em; + white-space: nowrap; +`; + +const CharacterImage = styled.img` + width: clamp(84px, 20vw, 175px); + height: auto; +`; diff --git a/web/src/pages/recommend/components/SlideCardList/SlideCardList.tsx b/web/src/pages/recommend/components/SlideCardList/SlideCardList.tsx index 272fd0ff3..26950d925 100644 --- a/web/src/pages/recommend/components/SlideCardList/SlideCardList.tsx +++ b/web/src/pages/recommend/components/SlideCardList/SlideCardList.tsx @@ -1,4 +1,5 @@ import styled from '@emotion/styled'; +import LandingIntroBanner from '../LandingIntroBanner/LandingIntroBanner'; import BlogOpenBanner from '../PromotionBanner/BlogOpenBanner'; import MaeilMailPromotionBanner from '../PromotionBanner/MaeilMailPromotionBanner'; import { Carousel } from '@/components/Carousel/Carousel'; @@ -23,6 +24,11 @@ const SlideCardList = () => { + + + + + diff --git a/web/src/routes/_bombom.tsx b/web/src/routes/_bombom.tsx index bae851ec4..f561bd320 100644 --- a/web/src/routes/_bombom.tsx +++ b/web/src/routes/_bombom.tsx @@ -3,7 +3,6 @@ import { queries } from '@/apis/queries'; import AppInstallPromptModal from '@/components/AppInstallPromptModal/AppInstallPromptModal'; import BomBomPageLayout from '@/components/PageLayout/BomBomPageLayout'; import { useWebViewRegisterToken } from '@/libs/webview/useWebViewRegisterToken'; -import { LANDING_VISITED_KEY } from '@/pages/landing/constants/localStorage'; let isFirstVisit = true; @@ -13,11 +12,6 @@ export const Route = createFileRoute('/_bombom')({ context, location, }): Promise> => { - const hasVisitedLanding = localStorage.getItem(LANDING_VISITED_KEY); - if (!hasVisitedLanding) { - return redirect({ to: '/landing' }); - } - if (!isFirstVisit) return; const { queryClient } = context; diff --git a/web/src/routes/landing.tsx b/web/src/routes/landing.tsx index 8d97c1f16..da5fcc9f1 100644 --- a/web/src/routes/landing.tsx +++ b/web/src/routes/landing.tsx @@ -23,6 +23,7 @@ export const Route = createFileRoute('/landing')({ title: '봄봄 | 읽고 남기고 쌓는 뉴스레터 리딩 플랫폼', }, ], + links: [{ rel: 'canonical', href: 'https://www.bombom.news/landing' }], }), component: LandingPage, });