83 lines
3.3 KiB
TypeScript
83 lines
3.3 KiB
TypeScript
import { useState } from "react";
|
|
|
|
import { Contact } from "@/components/sections/contact";
|
|
import { CoreValues } from "@/components/sections/core-values";
|
|
import { FinalCTA } from "@/components/sections/final-cta";
|
|
import { Footer } from "@/components/sections/footer";
|
|
import { Header } from "@/components/sections/header";
|
|
import { HeroGlassmorphic } from "@/components/sections/hero-glassmorphic";
|
|
import { HeroNeumorphic } from "@/components/sections/hero-neumorphic";
|
|
import { HowItWorksDemo } from "@/components/sections/how-it-works-demo";
|
|
import { NegotiationConsole } from "@/components/sections/negotiation-console";
|
|
import { Reinforcement } from "@/components/sections/reinforcement";
|
|
import { ROISimulator } from "@/components/sections/roi-simulator";
|
|
|
|
const TITLE = "negotium — AI 구매 협상 자동화";
|
|
const DESCRIPTION =
|
|
"가이드라인만 정하면 AI 흥정 봇이 여러 협력사와 단가를 대신 조율합니다. 흥정부터 낙찰까지 자동으로, 협상할수록 강화학습으로 더 좋은 조건을 만드는 B2B 구매 협상 자동화 솔루션.";
|
|
|
|
export function meta() {
|
|
return [
|
|
{ title: TITLE },
|
|
{ name: "description", content: DESCRIPTION },
|
|
{ property: "og:type", content: "website" },
|
|
{ property: "og:site_name", content: "negotium" },
|
|
{ property: "og:title", content: TITLE },
|
|
{ property: "og:description", content: DESCRIPTION },
|
|
{ property: "og:locale", content: "ko_KR" },
|
|
];
|
|
}
|
|
|
|
type HeroTheme = "neumorphic" | "glassmorphic";
|
|
|
|
export default function Home() {
|
|
// 히어로 디자인 비교용 — 스위처는 dev 에서만 노출, 배포본은 glassmorphic 고정
|
|
const [heroTheme, setHeroTheme] = useState<HeroTheme>("glassmorphic");
|
|
|
|
return (
|
|
<div className="min-h-screen bg-white text-ink font-sans antialiased selection:bg-primary/10 selection:text-primary">
|
|
<Header />
|
|
|
|
{import.meta.env.DEV && <HeroThemeSwitcher value={heroTheme} onChange={setHeroTheme} />}
|
|
|
|
<div className="relative">
|
|
{heroTheme === "neumorphic" && <HeroNeumorphic />}
|
|
{heroTheme === "glassmorphic" && <HeroGlassmorphic />}
|
|
</div>
|
|
|
|
<NegotiationConsole />
|
|
<HowItWorksDemo />
|
|
<Reinforcement />
|
|
<CoreValues />
|
|
<ROISimulator />
|
|
<FinalCTA />
|
|
<Contact />
|
|
<Footer />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const HERO_OPTIONS: { value: HeroTheme; label: string }[] = [
|
|
{ value: "neumorphic", label: "Neumorphic" },
|
|
{ value: "glassmorphic", label: "Soft Ambient" },
|
|
];
|
|
|
|
function HeroThemeSwitcher({ value, onChange }: { value: HeroTheme; onChange: (theme: HeroTheme) => void }) {
|
|
return (
|
|
<div className="fixed top-24 left-1/2 -translate-x-1/2 z-50 flex items-center gap-1.5 p-1 rounded-full shadow-[0_4px_20px_rgba(0,0,0,0.06)] border border-line-strong bg-white/95 text-ink-soft backdrop-blur-md text-xs font-semibold">
|
|
<span className="pl-3.5 pr-1.5 text-[10px] uppercase tracking-wider text-ink-muted font-bold">Hero Design:</span>
|
|
{HERO_OPTIONS.map((option) => (
|
|
<button
|
|
key={option.value}
|
|
onClick={() => onChange(option.value)}
|
|
className={`px-3.5 py-1.5 rounded-full transition-all cursor-pointer ${
|
|
value === option.value ? "bg-primary text-white shadow-sm font-bold" : "hover:text-ink"
|
|
}`}
|
|
>
|
|
{option.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|