diff --git a/src/components/features/landing/landing.style.ts b/src/components/features/landing/landing.style.ts
index 8ec387e4..abb5cd1e 100644
--- a/src/components/features/landing/landing.style.ts
+++ b/src/components/features/landing/landing.style.ts
@@ -14,7 +14,7 @@ export const introWave = [
"tablet:h-[140px] tablet:bg-[auto_140px] ",
"desktop:h-[250px] desktop:bg-[auto_250px] ",
].join("");
-export const sectionWrapper = "py-10 tablet:py-24 px-[1.25rem] tablet:px-6";
+export const sectionWrapper = "py-16 tablet:py-24 px-[1.25rem] tablet:px-6 overflow-hidden";
export const sectionTitle = "text-center text-3xl tablet:text-5xl font-bold break-keep";
export const sectionTitleGradient = cva("bg-gradient-to-r bg-clip-text text-transparent", {
variants: {
@@ -29,7 +29,7 @@ export const sectionTitleGradient = cva("bg-gradient-to-r bg-clip-text text-tran
export const sectionInnerContainer = cva("mx-auto max-w-[760px] flex", {
variants: {
layout: {
- problem: "flex-col items-center gap-10 pt-10 tablet:pt-24",
+ problem: "flex-col items-center gap-10 tablet:gap-20 pt-10 tablet:pt-24",
whyPlango: "flex-col",
solution: "flex-col gap-10 pt-10 tablet:gap-20 tablet:pt-24",
dailySummary:
@@ -54,7 +54,7 @@ export const sectionContentBox = cva("flex flex-col rounded-3xl border p-5 table
problem:
"w-full tablet:max-w-[360px] gap-2 tablet:gap-4 text-center odd:mr-auto even:ml-auto",
solution: "flex flex-1 gap-3 tablet:gap-6 ",
- whyPlango: "p-3 rounded-2xl tablet:rounded-3xl",
+ whyPlango: "rounded-2xl tablet:rounded-3xl",
},
},
});
diff --git a/src/components/features/landing/problem-section.tsx b/src/components/features/landing/problem-section.tsx
index 60fbcf86..fe55c2e6 100644
--- a/src/components/features/landing/problem-section.tsx
+++ b/src/components/features/landing/problem-section.tsx
@@ -7,6 +7,7 @@ import {
sectionTitleGradient,
sectionWrapper,
} from "./landing.style";
+import { motion } from "motion/react";
const values = [
{
@@ -25,35 +26,68 @@ const values = [
icon: "🤷",
title: "일정 공유 누락",
description: "친구들과 계획 체크리스트를 공유하고 싶어요",
- solution: "“카톡에 흩어져버린 체크리스트, 결국 아무도 기억 못 하죠”",
+ solution: "“카톡에 흩어진 체크리스트, 결국 아무도 기억 못 하죠”",
},
];
export default function ProblemSection() {
return (
-
- 🤔
-
- 이런 고민 있으신가요?
-
-
-
- {values.map(v => {
+
+
+ 🤔
+
+ 이런 고민 있으신가요?
+
+
+
+
+ {values.map((v, index) => {
const { icon, title, description, solution } = v;
+ const isOdd = index % 2 === 0;
return (
- -
+
{icon}
{title}
{description}
{solution}
-
+
);
})}
-
-
+
);
}
diff --git a/src/components/features/landing/solution-section.tsx b/src/components/features/landing/solution-section.tsx
index ae715d43..a26501ad 100644
--- a/src/components/features/landing/solution-section.tsx
+++ b/src/components/features/landing/solution-section.tsx
@@ -10,6 +10,7 @@ import {
sectionWrapper,
} from "./landing.style";
import IcDone from "@/assets/icons/ic-done.svg";
+import { motion } from "motion/react";
type Color = "orange" | "blue" | "green" | "purple";
type ContentValueType = {
@@ -76,24 +77,46 @@ type ChecklistProps = {
function SectionH3() {
return (
- 🪴
- Plango에서
-
+ 🪴
+
+
+ Plango에서
+
+
친구들과 이런 걸 함께해요
-
+
);
}
function SectionH4() {
return (
- 다양한 활동들을 함께해요
- 운동, 여행, 공부, 취미 뭐든지 함께하면 더 즐거워져요
+
+ 다양한 활동들을 함께해요
+ 운동, 여행, 공부, 취미 뭐든지 함께하면 더 즐거워져요
+
);
}
@@ -110,15 +133,23 @@ function CheckList({ color, checkList }: ChecklistProps) {
{checkList.map((v, index) => {
return (
- -
{v}
-
+
);
})}
@@ -127,10 +158,20 @@ function CheckList({ color, checkList }: ChecklistProps) {
function SolutionList() {
return (
- {values.map(v => {
+ {values.map((v, index) => {
const { icon, theme, description, solution2, solution, color, percent, checkList } = v;
return (
- -
+
{icon}
{description}
@@ -147,7 +188,7 @@ function SolutionList() {
-
+
);
})}
diff --git a/src/components/features/landing/why-plango-section.tsx b/src/components/features/landing/why-plango-section.tsx
index 67f28ac0..e8c846f9 100644
--- a/src/components/features/landing/why-plango-section.tsx
+++ b/src/components/features/landing/why-plango-section.tsx
@@ -7,6 +7,7 @@ import {
sectionTitleGradient,
sectionWrapper,
} from "./landing.style";
+import { motion } from "motion/react";
const values = [
"🧑🤝🧑 같은 목표를 가진 친구들과",
@@ -18,34 +19,62 @@ export default function WhyPlangoSection() {
return (