114 lines
4.8 KiB
TypeScript
114 lines
4.8 KiB
TypeScript
import Link from "next/link";
|
|
import { Button } from "@/components/ui/button";
|
|
import { createClient } from "@/utils/supabase/server";
|
|
import { Header } from "@/features/layout/components/header";
|
|
import { AUTH_ROUTES } from "@/features/auth/constants";
|
|
import { SplineScene } from "@/features/home/components/spline-scene";
|
|
|
|
export default async function HomePage() {
|
|
const supabase = await createClient();
|
|
const {
|
|
data: { user },
|
|
} = await supabase.auth.getUser();
|
|
|
|
return (
|
|
<div className="flex min-h-screen flex-col">
|
|
<Header user={user} showDashboardLink={true} />
|
|
|
|
<main className="flex-1">
|
|
<section className="relative overflow-hidden pb-8 pt-6 md:pb-12 md:pt-10 lg:py-32">
|
|
<div className="container relative z-10 flex max-w-7xl flex-col items-center gap-4 lg:grid lg:grid-cols-2 lg:gap-8 lg:text-left">
|
|
<div className="flex flex-col items-center lg:items-start lg:gap-8">
|
|
<h1 className="font-heading text-3xl sm:text-5xl md:text-6xl lg:text-7xl">
|
|
투자의 미래,{" "}
|
|
<span className="text-gradient bg-linear-to-r from-indigo-500 to-purple-600 bg-clip-text text-transparent">
|
|
자동화하세요
|
|
</span>
|
|
</h1>
|
|
<p className="max-w-2xl leading-normal text-muted-foreground sm:text-xl sm:leading-8">
|
|
AutoTrade는 최첨단 알고리즘을 통해 당신의 암호화폐 투자를 24시간
|
|
관리합니다. 감정에 휘둘리지 않는 투자를 경험하세요.
|
|
</p>
|
|
<div className="space-x-4">
|
|
{user ? (
|
|
<Button asChild size="lg" className="h-11 px-8">
|
|
<Link href={AUTH_ROUTES.DASHBOARD}>대시보드로 이동</Link>
|
|
</Button>
|
|
) : (
|
|
<Button asChild size="lg" className="h-11 px-8">
|
|
<Link href={AUTH_ROUTES.LOGIN}>지금 시작하기</Link>
|
|
</Button>
|
|
)}
|
|
{!user && (
|
|
<Button
|
|
asChild
|
|
variant="outline"
|
|
size="lg"
|
|
className="h-11 px-8"
|
|
>
|
|
<Link href={AUTH_ROUTES.LOGIN}>데모 체험</Link>
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="relative mt-8 h-[400px] w-full lg:mt-0 lg:h-[600px]">
|
|
{/* Spline Scene Container */}
|
|
<div className="absolute inset-0 rounded-2xl bg-zinc-100/50 dark:bg-zinc-900/50">
|
|
<SplineScene
|
|
sceneUrl="https://prod.spline.design/6Wq1Q7YGyM-iab9i/scene.splinecode"
|
|
className="rounded-2xl"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="container space-y-6 bg-slate-50 py-8 dark:bg-transparent md:py-12 lg:py-24">
|
|
<div className="mx-auto flex max-w-[58rem] flex-col items-center space-y-4 text-center">
|
|
<h2 className="font-heading text-3xl leading-[1.1] sm:text-3xl md:text-6xl">
|
|
주요 기능
|
|
</h2>
|
|
<p className="max-w-[85%] leading-normal text-muted-foreground sm:text-lg sm:leading-7">
|
|
성공적인 투자를 위해 필요한 모든 도구가 준비되어 있습니다.
|
|
</p>
|
|
</div>
|
|
<div className="mx-auto grid justify-center gap-4 sm:grid-cols-2 md:max-w-5xl md:grid-cols-3">
|
|
{[
|
|
{
|
|
title: "실시간 모니터링",
|
|
description:
|
|
"시장 상황을 실시간으로 분석하고 최적의 타이밍을 포착합니다.",
|
|
},
|
|
{
|
|
title: "알고리즘 트레이딩",
|
|
description:
|
|
"검증된 전략을 기반으로 자동으로 매수와 매도를 실행합니다.",
|
|
},
|
|
{
|
|
title: "포트폴리오 관리",
|
|
description:
|
|
"자산 분배와 리스크 관리를 통해 안정적인 수익을 추구합니다.",
|
|
},
|
|
].map((feature, index) => (
|
|
<div
|
|
key={index}
|
|
className="relative overflow-hidden rounded-lg border bg-background p-2"
|
|
>
|
|
<div className="flex h-[180px] flex-col justify-between rounded-md p-6">
|
|
<div className="space-y-2">
|
|
<h3 className="font-bold">{feature.title}</h3>
|
|
<p className="text-sm text-muted-foreground">
|
|
{feature.description}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|