Skip to content

Commit 54106a4

Browse files
MindulMendulMindulMendul
authored
Merge pull request #86 from SWMTheFirstTake/dev
Dev
2 parents 0550f95 + 71f4cc3 commit 54106a4

14 files changed

Lines changed: 292 additions & 119 deletions

File tree

‎app/page.tsx‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@ import HeroSection from '@/components/landing/HeroSection';
22
import NextChat from '@/components/landing/NextChat';
33
import Explanation from '@/components/landing/Explanation';
44
import Image from 'next/image';
5+
import Features from '@/components/landing/Features';
6+
import FAQ from '@/components/landing/FAQ';
57

68
export default function Home() {
79
return (
@@ -39,12 +41,9 @@ export default function Home() {
3941
</a>
4042
</div>
4143
</section>
42-
43-
<section id="about" className="py-20 md:py-28">
44-
<div className="max-w-6xl mx-auto px-4">
45-
<Explanation />
46-
</div>
47-
</section>
44+
<Explanation />
45+
<Features />
46+
<FAQ />
4847
</div>
4948
);
5049
}

‎package.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121
"@mdx-js/react": "^3.1.1",
2222
"@next/mdx": "^15.5.4",
2323
"@next/third-parties": "^15.5.4",
24+
"@radix-ui/react-accordion": "^1.2.12",
2425
"@radix-ui/react-dialog": "^1.1.15",
2526
"@radix-ui/react-scroll-area": "^1.2.10",
2627
"@radix-ui/react-separator": "^1.1.7",
@@ -40,8 +41,8 @@
4041
"react-dom": "^19.1.1",
4142
"tailwind-merge": "^3.3.1",
4243
"tanstack-query": "^1.0.0",
43-
"web-vitals": "^5.1.0",
44-
"typescript": "^5.9.2"
44+
"typescript": "^5.9.2",
45+
"web-vitals": "^5.1.0"
4546
},
4647
"devDependencies": {
4748
"@capacitor/android": "^7.4.3",

‎pnpm-lock.yaml‎

Lines changed: 87 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎public/landing/ai_chat.png‎

134 KB
Loading

‎public/landing/clothes_modal.png‎

139 KB
Loading

‎public/landing/fit_model.png‎

214 KB
Loading

‎public/landing/fit_profit.png‎

41 KB
Loading

‎src/components/chat/modal/ClothModal.tsx‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,7 @@ export default function ClothModal({ product, cloth, children }: ClothModalProps
9191
src={activeCloth.url}
9292
alt={activeCloth.id}
9393
fill
94-
className="object-cover rounded-lg"
94+
className="object-contain rounded-lg"
9595
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 80vw, 60vw"
9696
/>
9797
</div>
@@ -105,22 +105,22 @@ export default function ClothModal({ product, cloth, children }: ClothModalProps
105105

106106
<div className="space-y-6">
107107
{/* 상품 설명 */}
108-
<div>
108+
{/* <div>
109109
<h3 className="text-2xl font-semibold mb-4">상품 설명</h3>
110110
<div className="bg-gray-50 dark:bg-gray-700 p-4 rounded-lg">
111111
<p className="text-gray-600 dark:text-gray-300 leading-relaxed">{activeCloth.description}</p>
112112
</div>
113-
</div>
113+
</div> */}
114114

115115
{/* 스타일 정보 */}
116116
<div>
117117
<h3 className="text-2xl font-semibold mb-4">스타일 정보</h3>
118-
<div className="bg-gray-50 dark:bg-gray-700 p-4 rounded-lg">
118+
<div className=" p-4 rounded-lg">
119119
<div className="flex flex-wrap gap-2">
120120
{activeCloth.tags.map((tag, index) => (
121121
<span
122122
key={index}
123-
className="px-2 py-1 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 text-sm rounded-full"
123+
className="px-3 py-2 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 text-md rounded-full"
124124
>
125125
{tag}
126126
</span>
@@ -131,7 +131,6 @@ export default function ClothModal({ product, cloth, children }: ClothModalProps
131131

132132
{/* 액션 버튼들 */}
133133
<div>
134-
<h3 className="text-2xl font-semibold mb-4">액션</h3>
135134
<div className="space-y-3">
136135
<Button
137136
className="w-full bg-blue-600 hover:bg-blue-700 text-white h-12 text-lg"

‎src/components/landing/Explanation.tsx‎

Lines changed: 11 additions & 105 deletions
Original file line numberDiff line numberDiff line change
@@ -1,110 +1,16 @@
1-
import LucideIcon from '@/components/ui/icons/LucideIcon';
2-
31
export default function Explanation() {
42
return (
5-
<div className="transition-all duration-700 ease-out">
6-
<div className="py-16 space-y-8 max-w-6xl mx-auto px-4">
7-
{/* Card 1: 자연스러운 대화 */}
8-
<div className="translate-y-12 transition-all duration-1000 ease-out pointer-events-none" data-scroll="card">
9-
<div className="bg-white/90 dark:bg-slate-800/90 p-8 rounded-3xl border border-gray-200 dark:border-slate-600 shadow-xl">
10-
<div className="flex items-start space-x-6">
11-
<div className="flex-shrink-0 w-16 h-16 bg-blue rounded-2xl flex items-center justify-center">
12-
<LucideIcon name={'MessageSquare'} color="blue-50" className="w-8 h-8" />
13-
</div>
14-
<div>
15-
<h4 className="text-2xl font-bold text-gray-900 mb-3">자연스러운 대화로 취향 파악</h4>
16-
<p className="text-lg text-gray-600 leading-relaxed">
17-
복잡한 설문 없이 자연스러운 대화를 통해 당신의 스타일과 상황을 정확히 파악합니다. "회사 면접용 옷을
18-
찾고 있어요" 같은 간단한 설명만으로도 완벽한 추천을 받을 수 있어요.
19-
</p>
20-
</div>
21-
</div>
22-
</div>
23-
</div>
24-
25-
{/* Card 2: 맞춤 추천 */}
26-
<div
27-
className="translate-y-12 transition-all duration-1000 ease-out pointer-events-none"
28-
data-scroll="card"
29-
style={{ transitionDelay: '200ms' }}
30-
>
31-
<div className="bg-white/90 dark:bg-slate-800/90 p-8 rounded-3xl border border-gray-200 dark:border-slate-600 shadow-xl">
32-
<div className="flex items-start space-x-6">
33-
<div className="flex-shrink-0 w-16 h-16 bg-blue rounded-2xl flex items-center justify-center">
34-
<LucideIcon name={'Sparkles'} color="blue-50" className="w-8 h-8" />
35-
</div>
36-
<div>
37-
<h4 className="text-2xl font-bold text-gray-900 mb-3">체형과 상황을 고려한 맞춤 추천</h4>
38-
<p className="text-lg text-gray-600 leading-relaxed">
39-
키, 몸무게, 선호도까지 모두 고려하여 당신에게 가장 어울리는 딱 한 벌만 추천합니다. 여러 옵션 중에서
40-
고르는 스트레스 없이 바로 구매할 수 있는 완벽한 코디를 제안해드려요.
41-
</p>
42-
</div>
43-
</div>
44-
</div>
45-
</div>
46-
47-
{/* Card 3: 간편함 */}
48-
<div
49-
className="translate-y-12 transition-all duration-1000 ease-out pointer-events-none"
50-
data-scroll="card"
51-
style={{ transitionDelay: '400ms' }}
52-
>
53-
<div className="bg-white/90 dark:bg-slate-800/90 p-8 rounded-3xl border border-gray-200 dark:border-slate-600 shadow-xl">
54-
<div className="flex items-start space-x-6">
55-
<div className="flex-shrink-0 w-16 h-16 bg-blue rounded-2xl flex items-center justify-center">
56-
<LucideIcon name={'Timer'} color="blue-50" className="w-8 h-8" />
57-
</div>
58-
<div>
59-
<h4 className="text-2xl font-bold text-gray-900 mb-3">30초면 완성되는 간편함</h4>
60-
<p className="text-lg text-gray-600 leading-relaxed">
61-
긴 설문이나 복잡한 과정 없이 30초 만에 완벽한 스타일을 찾을 수 있습니다. 바쁜 일상 속에서도 빠르고
62-
정확한 패션 솔루션을 제공해드려요.
63-
</p>
64-
</div>
65-
</div>
66-
</div>
67-
</div>
68-
69-
{/* Card 4: 실용성 */}
70-
<div
71-
className="translate-y-12 transition-all duration-1000 ease-out pointer-events-none"
72-
data-scroll="card"
73-
style={{ transitionDelay: '600ms' }}
74-
>
75-
<div className="bg-white/90 dark:bg-slate-800/90 p-8 rounded-3xl border border-gray-200 dark:border-slate-600 shadow-xl">
76-
<div className="flex items-start space-x-6">
77-
<div className="flex-shrink-0 w-16 h-16 bg-blue rounded-2xl flex items-center justify-center">
78-
<LucideIcon name={'ShoppingBag'} color="blue-50" className="w-8 h-8" />
79-
</div>
80-
<div>
81-
<h4 className="text-2xl font-bold text-gray-900 mb-3">바로 구매 가능한 실용성</h4>
82-
<p className="text-lg text-gray-600 leading-relaxed">
83-
추천받은 아이템을 바로 구매할 수 있어요. 패션에 대한 지식이 없어도 AI가 골라준 완벽한 한 벌로 자신감
84-
넘치는 스타일을 완성하세요.
85-
</p>
86-
</div>
87-
</div>
88-
</div>
89-
</div>
90-
91-
{/* Final Card */}
92-
<div
93-
className="translate-y-12 transition-all duration-1000 ease-out pointer-events-none"
94-
data-scroll="card"
95-
style={{ transitionDelay: '800ms' }}
96-
>
97-
<div className="bg-white/90 p-8 rounded-3xl border border-gray-200 shadow-xl text-center">
98-
<div className="inline-flex items-center px-8 py-4 bg-blue/10 text-blue rounded-2xl">
99-
<LucideIcon name={'Check'} color="blue-500" className="w-6 h-6 mr-3" />
100-
<span className="text-lg font-semibold">패션 고민, 이제 끝!</span>
101-
</div>
102-
</div>
103-
</div>
104-
105-
{/* Bottom spacing */}
106-
<div className="h-48"></div>
3+
<section className="container mx-auto px-4 py-64 my-64 text-center">
4+
<div className="max-w-4xl mx-auto animate-fade-in">
5+
<h1 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-16 bg-gradient-hero bg-clip-text">
6+
당신을 위한 완벽한 스타일,
7+
<br />
8+
<span className="text-black">AI 전문가</span>와 함께 찾아드립니다.
9+
</h1>
10+
<p className="text-lg sm:text-xl text-muted-foreground mb-16 max-w-2xl mx-auto">
11+
AI가 당신의 취향과 체형을 분석하여 딱 맞는 옷 한 벌을 추천합니다.
12+
</p>
10713
</div>
108-
</div>
14+
</section>
10915
);
11016
}

‎src/components/landing/FAQ.tsx‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@/components/ui/accordion';
2+
3+
function FAQItem({ value, question, answer }: { value: string; question: string; answer: string }) {
4+
return (
5+
<AccordionItem className={'my-5'} value={value}>
6+
<AccordionTrigger className="text-left text-2xl font-semibold">{question}</AccordionTrigger>
7+
<AccordionContent className="text-xl">{answer}</AccordionContent>
8+
</AccordionItem>
9+
);
10+
}
11+
12+
export default function FAQ() {
13+
const FAQList = [
14+
{
15+
v: 'item-1',
16+
q: 'AI가 어떻게 제 체형을 파악하나요?',
17+
a: `간단한 대화를 통해 키, 몸무게, 체형 특징을 입력받습니다. 복잡한 측정이나 사진 업로드 없이도 정확한 추천이 가능하도록 설계되었습니다. 선호하는 핏과 스타일도 함께 고려합니다.`,
18+
},
19+
{
20+
v: 'item-2',
21+
q: '추천받은 옷이 마음에 안 들면 어떻게 하나요?',
22+
a: `언제든지 다시 대화를 시작하여 피드백을 주실 수 있습니다. "좀 더 캐주얼한 스타일로", "다른 색상으로" 등의 요청으로 즉시 새로운 추천을 받을 수 있습니다.`,
23+
},
24+
{
25+
v: 'item-3',
26+
q: '어떤 쇼핑몰의 상품을 추천받나요?',
27+
a: `현재는 무신사 등 국내 주요 온라인 쇼핑몰 및 브랜드 공식몰과 연동되어 있습니다. 다양한 가격대와 스타일의 제품 중에서 가장 적합한 것을 추천해드립니다.`,
28+
},
29+
{
30+
v: 'item-4',
31+
q: '정말 30초면 되나요?',
32+
a: `네! "데이트용 캐주얼 룩 찾아줘" 같은 간단한 설명만으로 즉시 추천을 받을 수 있습니다. 더 정확한 추천을 원하시면 체형 정보를 추가로 입력하실 수 있지만, 30초 이내로 빠르게 답변을 얻으실 수도 있습니다.`,
33+
},
34+
{
35+
v: 'item-5',
36+
q: '개인정보는 안전한가요?',
37+
a: `모든 개인정보는 암호화되어 안전하게 보관되며, 오직 추천 서비스 제공 목적으로만 사용됩니다. 제3자에게 공유되지 않으며, 언제든지 데이터 삭제를 요청하실 수 있습니다.`,
38+
},
39+
];
40+
return (
41+
<section className="max-w-[1024px] mx-auto px-20 py-20">
42+
<div className="text-center mb-12">
43+
<h3 className="text-5xl font-bold mb-4">자주 묻는 질문</h3>
44+
<p className="text-muted-foreground">궁금하신 점을 해결해드립니다</p>
45+
</div>
46+
<Accordion type="single" collapsible className="w-full">
47+
{FAQList.map((e, i) => (
48+
<FAQItem key={i} value={e.v} question={e.q} answer={e.a} />
49+
))}
50+
</Accordion>
51+
</section>
52+
);
53+
}

0 commit comments

Comments
 (0)