Skip to content

Commit 24995a4

Browse files
IceBear9028IceBear9028
authored
Merge pull request #247 from DDD-Community/fix/landing
fix: 랜딩페이지 레이아웃 개선 및 편의성 추가
2 parents 5a083c2 + 0878c71 commit 24995a4

File tree

16 files changed

+393
-240
lines changed

16 files changed

+393
-240
lines changed

‎src/composite/landing/addGoal/index.tsx‎

Lines changed: 31 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -5,37 +5,39 @@ import { MotionWrapper } from '@/shared/components/layout/MotionWrapper';
55

66
export const AddGoalFeatureSection = () => {
77
return (
8-
<Section
9-
className={`w-full flex flex-col md:flex-row items-center justify-center md:justify-between ${LandingPageCommonStyle.padding} bg-bg-default`}
10-
>
11-
<MotionWrapper
12-
{...LandingPageCommonStyle.fadeIn.left}
13-
className="flex flex-col items-start gap-y-8 mb-12 md:mb-0 w-full"
8+
<Section className="w-full bg-bg-default">
9+
<div
10+
className={`flex flex-col md:flex-row items-center justify-center md:justify-between ${LandingPageCommonStyle.padding} ${LandingPageCommonStyle.innerContainer}`}
1411
>
15-
<p className="font-bold text-brand-neon text-xl lg:text-2xl">목표 추가</p>
16-
<h2 className="text-3xl md:text-5xl font-bold text-text-tertiary leading-[140%]">
17-
목표 세우기가 <br />
18-
어려우신가요? <br />
19-
<span className="text-text-strong">2번만 클릭하세요</span>
20-
</h2>
21-
<p className="max-w-3xl text-base font-medium md:text-lg lg:text-xl text-text-secondary">
22-
목표명과 종료일만 설정하면 30초 안에 목표 설정 끝 !
23-
</p>
24-
</MotionWrapper>
12+
<MotionWrapper
13+
{...LandingPageCommonStyle.fadeIn.left}
14+
className="flex flex-col items-start gap-y-8 mb-12 md:mb-0 w-full"
15+
>
16+
<p className="font-bold text-brand-neon text-xl lg:text-2xl">목표 추가</p>
17+
<h2 className="text-3xl md:text-5xl font-bold text-text-tertiary leading-[140%]">
18+
목표 세우기가 <br />
19+
어려우신가요? <br />
20+
<span className="text-text-strong">2번만 클릭하세요</span>
21+
</h2>
22+
<p className="max-w-3xl text-base font-medium md:text-lg lg:text-xl text-text-secondary">
23+
목표명과 종료일만 설정하면 30초 안에 목표 설정 끝 !
24+
</p>
25+
</MotionWrapper>
2526

26-
<MotionWrapper
27-
{...LandingPageCommonStyle.fadeIn.right}
28-
className="border-4 border-[rgba(26,26,26,0.7)] rounded-xl overflow-hidden"
29-
>
30-
<Image
31-
src="/landing/section-5.png"
32-
width={350}
33-
height={650}
34-
sizes="(max-width: 768px) 200px, 350px"
35-
className="w-50 md:w-87.5 h-auto shrink-0"
36-
alt="fifth-section-image"
37-
/>
38-
</MotionWrapper>
27+
<MotionWrapper
28+
{...LandingPageCommonStyle.fadeIn.right}
29+
className="border-4 border-[rgba(26,26,26,0.7)] rounded-xl overflow-hidden"
30+
>
31+
<Image
32+
src="/landing/section-5.png"
33+
width={350}
34+
height={650}
35+
sizes="(max-width: 768px) 200px, 350px"
36+
className="w-50 md:w-87.5 h-auto shrink-0"
37+
alt="fifth-section-image"
38+
/>
39+
</MotionWrapper>
40+
</div>
3941
</Section>
4042
);
4143
};

‎src/composite/landing/collectPlanet/index.tsx‎

Lines changed: 30 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -5,36 +5,38 @@ import { MotionWrapper } from '@/shared/components/layout/MotionWrapper';
55

66
export const CollectPlanetFeatureSection = () => {
77
return (
8-
<Section
9-
className={`w-full flex flex-col md:flex-row items-center justify-center lg:justify-between ${LandingPageCommonStyle.padding} bg-bg-default`}
10-
>
11-
<MotionWrapper
12-
{...LandingPageCommonStyle.fadeIn.left}
13-
className="flex flex-col items-start gap-y-8 mb-12 md:mb-0 w-full"
8+
<Section className="w-full bg-bg-default">
9+
<div
10+
className={`flex flex-col md:flex-row items-center justify-center lg:justify-between ${LandingPageCommonStyle.padding} ${LandingPageCommonStyle.innerContainer}`}
1411
>
15-
<p className="font-bold text-brand-neon text-xl lg:text-2xl">행성 수집</p>
16-
<h2 className="text-3xl md:text-5xl font-bold text-text-strong leading-[140%]">
17-
목표 유형별로 다양한 <br />
18-
행성 뱃지를 모아보세요
19-
</h2>
20-
<p className="max-w-3xl text-base font-medium md:text-lg lg:text-xl text-text-secondary">
21-
귀여운 행성 뱃지를 수집하는 재미까지 더해졌어요.
22-
</p>
23-
</MotionWrapper>
12+
<MotionWrapper
13+
{...LandingPageCommonStyle.fadeIn.left}
14+
className="flex flex-col items-start gap-y-8 mb-12 md:mb-0 w-full"
15+
>
16+
<p className="font-bold text-brand-neon text-xl lg:text-2xl">행성 수집</p>
17+
<h2 className="text-3xl md:text-5xl font-bold text-text-strong leading-[140%]">
18+
목표 유형별로 다양한 <br />
19+
행성 뱃지를 모아보세요
20+
</h2>
21+
<p className="max-w-3xl text-base font-medium md:text-lg lg:text-xl text-text-secondary">
22+
귀여운 행성 뱃지를 수집하는 재미까지 더해졌어요.
23+
</p>
24+
</MotionWrapper>
2425

25-
<MotionWrapper
26-
{...LandingPageCommonStyle.fadeIn.right}
27-
className="border-4 border-[rgba(26,26,26,0.7)] rounded-xl overflow-hidden"
28-
>
29-
<Image
30-
src="/landing/section-8.png"
31-
width={350}
32-
height={650}
33-
sizes="(max-width: 768px) 200px, 350px"
34-
className="w-50 md:w-87.5 h-auto shrink-0"
35-
alt="eighth-section-image"
36-
/>
37-
</MotionWrapper>
26+
<MotionWrapper
27+
{...LandingPageCommonStyle.fadeIn.right}
28+
className="border-4 border-[rgba(26,26,26,0.7)] rounded-xl overflow-hidden"
29+
>
30+
<Image
31+
src="/landing/section-8.png"
32+
width={350}
33+
height={650}
34+
sizes="(max-width: 768px) 200px, 350px"
35+
className="w-50 md:w-87.5 h-auto shrink-0"
36+
alt="eighth-section-image"
37+
/>
38+
</MotionWrapper>
39+
</div>
3840
</Section>
3941
);
4042
};

‎src/composite/landing/constants.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
const LandingPageCommonStyle = {
22
padding: 'px-5 md:px-10 lg:px-28',
3+
innerContainer: 'max-w-[1200px] w-full mx-auto',
34
fadeIn: {
45
default: {
56
initial: { opacity: 0 },

‎src/composite/landing/fundingDiscount/index.tsx‎

Lines changed: 26 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -6,32 +6,34 @@ import { MotionWrapper } from '@/shared/components/layout/MotionWrapper';
66

77
export const FundingDiscountSection = () => {
88
return (
9-
<Section
10-
className={`w-full flex flex-col gap-y-5 md:flex-row items-center justify-center lg:justify-between ${LandingPageCommonStyle.padding} bg-white`}
11-
>
12-
<MotionWrapper
13-
{...LandingPageCommonStyle.fadeIn.left}
14-
className="flex flex-col items-center md:items-start gap-y-6 mb-12 md:mb-0 w-full"
9+
<Section className="w-full bg-white">
10+
<div
11+
className={`flex flex-col gap-y-5 md:flex-row items-center justify-center lg:justify-between ${LandingPageCommonStyle.padding} ${LandingPageCommonStyle.innerContainer}`}
1512
>
16-
<h2 className="text-3xl md:text-5xl font-bold text-text-inverse leading-[140%]">
17-
와디즈로 <br />
18-
그로잇 구독료 <br />
19-
50% 할인받기
20-
</h2>
21-
<FundingNavButton />
22-
</MotionWrapper>
13+
<MotionWrapper
14+
{...LandingPageCommonStyle.fadeIn.left}
15+
className="flex flex-col items-center md:items-start gap-y-6 mb-12 md:mb-0 w-full"
16+
>
17+
<h2 className="text-3xl md:text-5xl font-bold text-text-inverse leading-[140%]">
18+
와디즈로 <br />
19+
그로잇 구독료 <br />
20+
50% 할인받기
21+
</h2>
22+
<FundingNavButton />
23+
</MotionWrapper>
2324

24-
{/* 우측 이미지 컨테이너 */}
25-
<MotionWrapper {...LandingPageCommonStyle.fadeIn.right} className="relative flex items-center justify-between">
26-
<DarkToolTip>귀여운 키링도 준다구요!</DarkToolTip>
27-
<Image
28-
src="/landing/key-rings.png"
29-
width={500}
30-
height={400}
31-
sizes="(max-width: 768px) 300px 200px"
32-
alt="character-key-ring-image"
33-
/>
34-
</MotionWrapper>
25+
{/* 우측 이미지 컨테이너 */}
26+
<MotionWrapper {...LandingPageCommonStyle.fadeIn.right} className="relative flex items-center justify-between">
27+
<DarkToolTip>귀여운 키링도 준다구요!</DarkToolTip>
28+
<Image
29+
src="/landing/key-rings.png"
30+
width={500}
31+
height={400}
32+
sizes="(max-width: 768px) 300px 200px"
33+
alt="character-key-ring-image"
34+
/>
35+
</MotionWrapper>
36+
</div>
3537
</Section>
3638
);
3739
};

‎src/composite/landing/goalAdvice/index.tsx‎

Lines changed: 31 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -5,37 +5,39 @@ import { MotionWrapper } from '@/shared/components/layout/MotionWrapper';
55

66
export const GoalAdviceFeatureSection = () => {
77
return (
8-
<Section
9-
className={`w-full flex flex-col md:flex-row items-center justify-center lg:justify-between ${LandingPageCommonStyle.padding} bg-bg-default`}
10-
>
11-
<MotionWrapper
12-
{...LandingPageCommonStyle.fadeIn.left}
13-
className="flex flex-col items-center md:items-start gap-y-6 mb-12 md:mb-0 w-full"
8+
<Section className="w-full bg-bg-default">
9+
<div
10+
className={`flex flex-col md:flex-row items-center justify-center lg:justify-between ${LandingPageCommonStyle.padding} ${LandingPageCommonStyle.innerContainer}`}
1411
>
15-
<p className="font-bold text-brand-neon text-xl lg:text-2xl">목표 조언</p>
16-
<h2 className="text-3xl md:text-5xl font-bold text-text-tertiary leading-[140%]">
17-
목표에 대한 <br />
18-
고민이 있나요? <br />
19-
<span className="text-text-strong">맞춤 AI 조언을 받아요</span>
20-
</h2>
21-
<p className="max-w-3xl text-base font-medium md:text-lg lg:text-xl text-text-secondary">
22-
나의 상황과 감정에 알맞게 맞춤 조언을 해줘요
23-
</p>
24-
</MotionWrapper>
12+
<MotionWrapper
13+
{...LandingPageCommonStyle.fadeIn.left}
14+
className="flex flex-col items-center md:items-start gap-y-6 mb-12 md:mb-0 w-full"
15+
>
16+
<p className="font-bold text-brand-neon text-xl lg:text-2xl">목표 조언</p>
17+
<h2 className="text-3xl md:text-5xl font-bold text-text-tertiary leading-[140%]">
18+
목표에 대한 <br />
19+
고민이 있나요? <br />
20+
<span className="text-text-strong">맞춤 AI 조언을 받아요</span>
21+
</h2>
22+
<p className="max-w-3xl text-base font-medium md:text-lg lg:text-xl text-text-secondary">
23+
나의 상황과 감정에 알맞게 맞춤 조언을 해줘요
24+
</p>
25+
</MotionWrapper>
2526

26-
<MotionWrapper
27-
{...LandingPageCommonStyle.fadeIn.right}
28-
className="border-4 border-[rgba(26,26,26,0.7)] rounded-xl overflow-hidden"
29-
>
30-
<Image
31-
src="/landing/section-7.png"
32-
width={350}
33-
height={650}
34-
sizes="(max-width: 768px) 200px, 350px"
35-
className="w-50 md:w-87.5 h-auto shrink-0"
36-
alt="seventh-section-image"
37-
/>
38-
</MotionWrapper>
27+
<MotionWrapper
28+
{...LandingPageCommonStyle.fadeIn.right}
29+
className="border-4 border-[rgba(26,26,26,0.7)] rounded-xl overflow-hidden"
30+
>
31+
<Image
32+
src="/landing/section-7.png"
33+
width={350}
34+
height={650}
35+
sizes="(max-width: 768px) 200px, 350px"
36+
className="w-50 md:w-87.5 h-auto shrink-0"
37+
alt="seventh-section-image"
38+
/>
39+
</MotionWrapper>
40+
</div>
3941
</Section>
4042
);
4143
};

‎src/composite/landing/intro/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { EarlyBirdEvent } from './components/EarlyBirdEvent';
55

66
export const IntroSection = () => {
77
return (
8-
<Section className="relative w-full flex items-center justify-center overflow-hidden px-5 md:px-0">
8+
<Section className="relative w-full flex items-center justify-center overflow-hidden">
99
{/** 배경색 gradient */}
1010
<div className="absolute inset-0 h-full w-full overflow-hidden">
1111
<video
@@ -21,7 +21,7 @@ export const IntroSection = () => {
2121
</div>
2222
{/* 오버레이 (그라디언트) */}
2323
<div className="absolute inset-0 z-10 pointer-events-none bg-[linear-gradient(0deg,rgba(0,0,0,0.60)_0%,rgba(0,0,0,0.60)_100%)]" />
24-
<div className="relative z-20 flex flex-col items-center">
24+
<div className={`relative z-20 flex flex-col items-center ${LandingPageCommonStyle.innerContainer} ${LandingPageCommonStyle.padding}`}>
2525
<MotionWrapper {...LandingPageCommonStyle.fadeIn.default}>
2626
<h1 className="text-4xl md:text-6xl font-extrabold text-center text-text-strong animate-fade-in bg-clip-text leading-tight mb-6">
2727
<span className="bg-linear-to-brand">그로잇</span>으로 너의 인생이 바꿜거야

‎src/composite/landing/launch/index.tsx‎

Lines changed: 21 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -21,27 +21,29 @@ export const LaunchSection = () => {
2121
};
2222

2323
return (
24-
<Section className="relative w-full flex flex-col gap-y-7 items-center justify-center overflow-hidden px-5 md:px-0 bg-bg-default">
24+
<Section className="relative w-full overflow-hidden bg-bg-default">
2525
{/* 배경 & 오버레이 */}
2626
<div className="absolute inset-0 z-10 pointer-events-none landing-ten-bg" />
27-
<MotionWrapper
28-
{...LandingPageCommonStyle.fadeIn.default}
29-
className="relative z-20 flex flex-col gap-y-4 items-center text-center animate-fade-in"
30-
>
31-
<Image src="/landing/logo.png" width={64} height={64} alt="app-logo" />
32-
<h2 className="bg-linear-to-brand text-4xl font-extrabold leading-tight">2월 APP 런칭</h2>
33-
</MotionWrapper>
34-
35-
<MotionWrapper
36-
{...LandingPageCommonStyle.fadeIn.default}
37-
className="relative z-20 flex flex-col gap-y-6 text-center items-center"
38-
>
39-
<p className="text-sm font-medium md:text-base lg:text-xl text-text-secondary">
40-
얼리버드 신청하고, <br /> 앱 출시 소식을 빠르게 받아보세요.
41-
</p>
42-
43-
<Button size="lg" text="얼리버드 신청하기" variant="primary" onClick={handleOpenModal} />
44-
</MotionWrapper>
27+
<div className={`relative z-20 flex flex-col gap-y-7 items-center justify-center ${LandingPageCommonStyle.innerContainer} ${LandingPageCommonStyle.padding}`}>
28+
<MotionWrapper
29+
{...LandingPageCommonStyle.fadeIn.default}
30+
className="flex flex-col gap-y-4 items-center text-center animate-fade-in"
31+
>
32+
<Image src="/landing/logo.png" width={64} height={64} alt="app-logo" />
33+
<h2 className="bg-linear-to-brand text-4xl font-extrabold leading-tight">2월 APP 런칭</h2>
34+
</MotionWrapper>
35+
36+
<MotionWrapper
37+
{...LandingPageCommonStyle.fadeIn.default}
38+
className="flex flex-col gap-y-6 text-center items-center"
39+
>
40+
<p className="text-sm font-medium md:text-base lg:text-xl text-text-secondary">
41+
얼리버드 신청하고, <br /> 앱 출시 소식을 빠르게 받아보세요.
42+
</p>
43+
44+
<Button size="lg" text="얼리버드 신청하기" variant="primary" onClick={handleOpenModal} />
45+
</MotionWrapper>
46+
</div>
4547
{/* 모달 컴포넌트 */ <EarlyBirdModal open={isModalOpen} onClose={handleCloseModal} onSuccessSubmit={() => {}} />}
4648
</Section>
4749
);

0 commit comments

Comments
 (0)