216 lines
9.1 KiB
TypeScript
216 lines
9.1 KiB
TypeScript
/**
|
|
* @file app/(home)/page.tsx
|
|
* @description 서비스 메인 랜딩 페이지(Server Component)
|
|
*/
|
|
|
|
import Link from "next/link";
|
|
import { ArrowRight, Sparkles } from "lucide-react";
|
|
import { Header } from "@/features/layout/components/header";
|
|
import { AUTH_ROUTES } from "@/features/auth/constants";
|
|
import { Button } from "@/components/ui/button";
|
|
import ShaderBackground from "@/components/ui/shader-background";
|
|
import { createClient } from "@/utils/supabase/server";
|
|
import { AnimatedBrandTone } from "@/components/ui/animated-brand-tone";
|
|
|
|
interface StartStep {
|
|
step: string;
|
|
title: string;
|
|
description: string;
|
|
}
|
|
|
|
const START_STEPS: StartStep[] = [
|
|
{
|
|
step: "01",
|
|
title: "1분이면 충분해요",
|
|
description:
|
|
"복잡한 서류나 방문 없이, 쓰던 계좌 그대로 안전하게 연결할 수 있어요.",
|
|
},
|
|
{
|
|
step: "02",
|
|
title: "내 스타일대로 골라보세요",
|
|
description:
|
|
"공격적인 투자부터 안정적인 관리까지, 나에게 딱 맞는 전략이 준비되어 있어요.",
|
|
},
|
|
{
|
|
step: "03",
|
|
title: "이제 일상을 즐기세요",
|
|
description:
|
|
"차트는 JOORIN-E가 하루 종일 보고 있을게요. 마음 편히 본업에 집중하세요.",
|
|
},
|
|
];
|
|
|
|
/**
|
|
* 홈 메인 랜딩 페이지
|
|
* @returns 랜딩 UI
|
|
*/
|
|
export default async function HomePage() {
|
|
const supabase = await createClient();
|
|
const {
|
|
data: { user },
|
|
} = await supabase.auth.getUser();
|
|
|
|
const primaryCtaHref = user ? AUTH_ROUTES.DASHBOARD : AUTH_ROUTES.SIGNUP;
|
|
const primaryCtaLabel = user ? "시작하기" : "지금 무료로 시작하기";
|
|
|
|
return (
|
|
<div className="flex min-h-screen flex-col overflow-x-hidden bg-black text-white selection:bg-brand-500/30">
|
|
<Header user={user} showDashboardLink={true} blendWithBackground={true} />
|
|
|
|
<main className="relative isolate flex-1">
|
|
{/* ========== BACKGROUND ========== */}
|
|
<ShaderBackground opacity={0.6} className="-z-20" />
|
|
<div
|
|
aria-hidden="true"
|
|
className="pointer-events-none absolute inset-0 -z-10 bg-black/60"
|
|
/>
|
|
|
|
{/* ========== HERO SECTION ========== */}
|
|
<section className="container mx-auto max-w-5xl px-4 pt-32 md:pt-48">
|
|
<div className="flex flex-col items-center text-center">
|
|
<span className="inline-flex animate-in fade-in-0 slide-in-from-top-2 items-center gap-2 rounded-full border border-brand-400/30 bg-white/5 px-4 py-1.5 text-xs font-medium tracking-wide text-brand-200 backdrop-blur-md duration-1000">
|
|
<Sparkles className="h-3.5 w-3.5" />
|
|
자동 매매의 새로운 기준, JOORIN-E
|
|
</span>
|
|
|
|
<h1 className="mt-8 animate-in slide-in-from-bottom-4 text-5xl font-black tracking-tight text-white duration-1000 md:text-8xl">
|
|
주식, 이제는
|
|
<br />
|
|
<span className="bg-linear-to-b from-brand-300 via-brand-200 to-brand-500 bg-clip-text text-transparent">
|
|
마음 편하게 하세요.
|
|
</span>
|
|
</h1>
|
|
|
|
<p className="mt-8 max-w-2xl animate-in slide-in-from-bottom-4 text-sm leading-relaxed text-white/60 duration-1000 md:text-xl">
|
|
어렵고 불안한 주식 투자, 혼자 고민하지 마세요.
|
|
<br className="hidden md:block" />
|
|
검증된 원칙으로 24시간 당신의 자산을 지켜드릴게요.
|
|
</p>
|
|
|
|
<div className="mt-12 flex animate-in slide-in-from-bottom-6 flex-col gap-4 duration-1000 sm:flex-row">
|
|
<Button
|
|
asChild
|
|
size="lg"
|
|
className="group h-14 min-w-[200px] rounded-full bg-brand-500 px-10 text-lg font-bold text-white transition-all hover:scale-105 hover:bg-brand-400 active:scale-95"
|
|
>
|
|
<Link href={primaryCtaHref}>
|
|
{primaryCtaLabel}
|
|
<ArrowRight className="ml-2 h-5 w-5 transition-transform group-hover:translate-x-1" />
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* ========== BRAND TONE SECTION (움직이는 글자) ========== */}
|
|
<section className="container mx-auto max-w-5xl px-4 py-24 md:py-40">
|
|
<AnimatedBrandTone />
|
|
</section>
|
|
|
|
{/* ========== SIMPLE STEPS SECTION ========== */}
|
|
<section className="container mx-auto max-w-5xl px-4 py-24">
|
|
<div className="flex flex-col items-center gap-16 md:flex-row md:items-start">
|
|
<div className="flex-1 text-center md:text-left">
|
|
<h2 className="text-3xl font-black md:text-5xl">
|
|
설계부터 실행까지
|
|
<br />
|
|
<span className="text-brand-300">단 3단계면 끝.</span>
|
|
</h2>
|
|
<p className="mt-6 text-sm leading-relaxed text-white/50 md:text-lg">
|
|
복잡한 계산과 감시는 JOORIN-E가 대신할게요.
|
|
<br />
|
|
당신은 가벼운 마음으로 '시작' 버튼만 누르세요.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex-2 grid w-full gap-4 md:grid-cols-1">
|
|
{START_STEPS.map((item) => (
|
|
<div
|
|
key={item.step}
|
|
className="group flex items-center gap-6 rounded-2xl border border-white/5 bg-white/5 p-6 transition-all hover:bg-white/10"
|
|
>
|
|
<span className="text-3xl font-black text-brand-500/50 group-hover:text-brand-500">
|
|
{item.step}
|
|
</span>
|
|
<div>
|
|
<h3 className="text-lg font-bold text-white">
|
|
{item.title}
|
|
</h3>
|
|
<p className="mt-1 text-sm text-white/50">
|
|
{item.description}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* 보안 안심 문구 (사용자 요청 반영) */}
|
|
<div className="mt-16 flex flex-col items-center justify-center text-center animate-in slide-in-from-bottom-6 duration-1000 delay-300">
|
|
<div className="flex max-w-2xl flex-col items-center gap-4 rounded-2xl border border-brand-500/20 bg-brand-500/5 p-8 backdrop-blur-sm md:flex-row md:gap-8 md:text-left">
|
|
<div className="flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-brand-500/10 text-brand-400">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
className="lucide lucide-shield-check"
|
|
>
|
|
<path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z" />
|
|
<path d="m9 12 2 2 4-4" />
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<h3 className="text-lg font-bold text-brand-100">
|
|
내 계좌 정보, 서버에 저장되지 않나요?
|
|
</h3>
|
|
<p className="mt-2 text-sm leading-relaxed text-brand-200/70">
|
|
<strong className="text-brand-200">
|
|
네, 절대 저장하지 않으니 안심하세요.
|
|
</strong>
|
|
<br />
|
|
JOORIN-E는 여러분의 계좌 비밀번호와 API 키를 서버로 전송하지
|
|
않습니다.
|
|
<br className="hidden md:block" />
|
|
모든 중요 정보는 여러분의 기기(브라우저)에만 암호화되어
|
|
저장되며,
|
|
<br className="hidden md:block" />
|
|
매매 실행 시에만 증권사와 직접 통신하는 데 사용됩니다.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* ========== FINAL CTA SECTION ========== */}
|
|
<section className="container mx-auto max-w-5xl px-4 py-32">
|
|
<div className="relative overflow-hidden rounded-[2.5rem] border border-brand-500/20 bg-linear-to-b from-brand-500/10 to-transparent p-12 text-center md:p-24">
|
|
<h2 className="text-3xl font-black md:text-6xl">
|
|
더 이상 미루지 마세요.
|
|
<br />
|
|
지금 바로 경험해보세요.
|
|
</h2>
|
|
<div className="mt-12 flex justify-center">
|
|
<Button
|
|
asChild
|
|
size="lg"
|
|
className="h-16 rounded-full bg-white px-12 text-xl font-black text-black transition-all hover:scale-110 active:scale-95"
|
|
>
|
|
<Link href={primaryCtaHref}>{primaryCtaLabel}</Link>
|
|
</Button>
|
|
</div>
|
|
|
|
<p className="mt-8 text-sm text-white/30">
|
|
© 2026 POPUP STUDIO. All rights reserved.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|