201 lines
10 KiB
TypeScript
201 lines
10 KiB
TypeScript
import Head from 'next/head';
|
|
import Link from 'next/link';
|
|
import type { ReactElement } from 'react';
|
|
import LayoutGuest from '../layouts/Guest';
|
|
import { getPageTitle } from '../config';
|
|
|
|
const quickPoints = [
|
|
'Calm, chat-first workspace',
|
|
'Conversation history that stays out of the way',
|
|
'Backoffice still included when you need it',
|
|
];
|
|
|
|
const previewThreads = [
|
|
{
|
|
title: 'Launch prep',
|
|
summary: 'Define the MVP checklist and the admin follow-up tasks.',
|
|
active: true,
|
|
},
|
|
{
|
|
title: 'API cleanup',
|
|
summary: 'Tighten validation and error handling in the route layer.',
|
|
},
|
|
{
|
|
title: 'Spec drafting',
|
|
summary: 'Turn rough notes into a short product spec with decisions.',
|
|
desktopOnly: true,
|
|
},
|
|
];
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<>
|
|
<Head>
|
|
<title>{getPageTitle('AI Chat Workspace')}</title>
|
|
</Head>
|
|
|
|
<div className="relative min-h-screen overflow-hidden bg-[linear-gradient(180deg,#f8f6f1_0%,#f2f4f8_52%,#f8f5ef_100%)] text-slate-900">
|
|
<div className="pointer-events-none absolute inset-0">
|
|
<div className="absolute left-[-10rem] top-[-7rem] h-[24rem] w-[24rem] rounded-full bg-[#f7d9c7]/55 blur-3xl" />
|
|
<div className="absolute right-[-6rem] top-[7rem] h-[26rem] w-[26rem] rounded-full bg-[#d7defd]/65 blur-3xl" />
|
|
<div className="absolute bottom-[-10rem] left-[32%] h-[22rem] w-[22rem] rounded-full bg-[#e6efe6]/55 blur-3xl" />
|
|
</div>
|
|
|
|
<header className="relative z-10 mx-auto flex w-full max-w-7xl items-center justify-between px-6 py-6 lg:px-10">
|
|
<Link className="text-xs font-semibold uppercase tracking-[0.34em] text-slate-500" href="/">
|
|
AI Chat Workspace
|
|
</Link>
|
|
<nav className="flex items-center gap-3">
|
|
<Link
|
|
className="rounded-full border border-white/70 bg-white/70 px-4 py-2 text-sm font-medium text-slate-700 shadow-[0_12px_30px_-24px_rgba(15,23,42,0.3)] backdrop-blur transition hover:bg-white"
|
|
href="/login"
|
|
>
|
|
Sign in
|
|
</Link>
|
|
<Link
|
|
className="rounded-full bg-slate-900 px-4 py-2 text-sm font-medium text-white shadow-[0_18px_35px_-24px_rgba(15,23,42,0.55)] transition hover:bg-slate-800"
|
|
href="/workspace"
|
|
>
|
|
Open workspace
|
|
</Link>
|
|
</nav>
|
|
</header>
|
|
|
|
<main className="relative z-10 mx-auto w-full max-w-7xl px-6 pb-16 pt-6 lg:px-10 lg:pb-24 lg:pt-10">
|
|
<section className="grid gap-10 lg:grid-cols-[minmax(0,1fr)_460px] lg:items-start xl:grid-cols-[minmax(0,1fr)_540px] xl:items-center">
|
|
<div className="max-w-[38rem] xl:max-w-3xl">
|
|
<p className="text-xs font-semibold uppercase tracking-[0.34em] text-slate-400">
|
|
Chat-first product shell
|
|
</p>
|
|
<h1 className="mt-6 max-w-4xl text-5xl font-semibold tracking-[-0.075em] text-slate-900 md:text-6xl lg:text-[4.5rem] lg:leading-[0.94] xl:text-[5.2rem]">
|
|
A more human workspace for thinking with an AI agent.
|
|
</h1>
|
|
<p className="mt-6 max-w-2xl text-base leading-8 text-slate-600 md:text-lg">
|
|
Start a new chat, reopen older threads, switch agents, and keep work moving without
|
|
losing context. The interface stays calm and legible so the conversation can stay
|
|
central.
|
|
</p>
|
|
|
|
<div className="mt-8 flex flex-wrap items-center gap-3">
|
|
<Link
|
|
className="rounded-full bg-slate-900 px-6 py-3 text-sm font-medium text-white shadow-[0_18px_40px_-24px_rgba(15,23,42,0.55)] transition hover:bg-slate-800"
|
|
href="/workspace"
|
|
>
|
|
Try the workspace
|
|
</Link>
|
|
<Link
|
|
className="rounded-full border border-white/70 bg-white/70 px-6 py-3 text-sm font-medium text-slate-700 backdrop-blur transition hover:bg-white"
|
|
href="/login"
|
|
>
|
|
Sign in
|
|
</Link>
|
|
</div>
|
|
|
|
<div className="mt-10 grid gap-3 sm:max-w-2xl">
|
|
{quickPoints.map((point) => (
|
|
<div
|
|
className="inline-flex w-fit items-center rounded-full border border-white/70 bg-white/60 px-4 py-2 text-sm text-slate-600 shadow-[0_12px_30px_-24px_rgba(15,23,42,0.28)] backdrop-blur"
|
|
key={point}
|
|
>
|
|
{point}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<section className="relative lg:pt-2">
|
|
<div className="absolute inset-4 rounded-[30px] bg-[radial-gradient(circle_at_top_left,rgba(255,255,255,0.95),rgba(255,255,255,0.4))] blur-2xl" />
|
|
<div className="relative overflow-hidden rounded-[34px] border border-white/80 bg-white/75 shadow-[0_35px_120px_-50px_rgba(15,23,42,0.32)] backdrop-blur">
|
|
<div className="border-b border-slate-200/80 px-5 py-3.5 xl:px-6 xl:py-4.5">
|
|
<p className="text-[11px] font-semibold uppercase tracking-[0.26em] text-slate-400">
|
|
Workspace preview
|
|
</p>
|
|
<h2 className="mt-2 max-w-[21rem] text-[1.45rem] font-semibold tracking-[-0.05em] text-slate-900 xl:max-w-sm xl:text-[1.8rem]">
|
|
History stays visible, but the active conversation keeps the spotlight.
|
|
</h2>
|
|
</div>
|
|
|
|
<div className="grid min-h-[24rem] lg:grid-cols-[170px_minmax(0,1fr)] xl:min-h-[30rem] xl:grid-cols-[205px_minmax(0,1fr)]">
|
|
<div className="border-r border-slate-200/80 bg-[#fbfaf7]/90 p-3 xl:p-4">
|
|
<button
|
|
className="inline-flex w-full items-center justify-center rounded-2xl bg-slate-900 px-4 py-2.5 text-[13px] font-medium text-white shadow-[0_16px_30px_-22px_rgba(15,23,42,0.6)] xl:text-sm"
|
|
type="button"
|
|
>
|
|
New chat
|
|
</button>
|
|
|
|
<div className="mt-4 space-y-2.5 xl:space-y-3">
|
|
{previewThreads.map((thread) => (
|
|
<div
|
|
className={`rounded-[20px] border px-3 py-3 transition xl:px-3.5 xl:py-3.5 ${
|
|
thread.active
|
|
? 'border-slate-900 bg-slate-900 text-white shadow-[0_18px_40px_-28px_rgba(15,23,42,0.6)]'
|
|
: 'border-slate-200/90 bg-white/85 text-slate-900'
|
|
} ${thread.desktopOnly ? 'hidden xl:block' : ''}`}
|
|
key={thread.title}
|
|
>
|
|
<p className="text-[13px] font-medium xl:text-sm">{thread.title}</p>
|
|
<p
|
|
className={`mt-2 text-[11px] leading-5 xl:text-xs xl:leading-6 ${
|
|
thread.active ? 'text-slate-300' : 'text-slate-500'
|
|
}`}
|
|
>
|
|
{thread.summary}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex flex-col bg-[linear-gradient(180deg,rgba(252,252,253,0.92)_0%,rgba(246,247,250,0.98)_100%)]">
|
|
<div className="border-b border-slate-200/80 px-4 py-3.5 xl:px-5 xl:py-4">
|
|
<p className="text-[11px] font-semibold uppercase tracking-[0.26em] text-slate-400">
|
|
Current conversation
|
|
</p>
|
|
<h3 className="mt-2 text-[1.1rem] font-semibold tracking-[-0.05em] text-slate-900 xl:text-[1.5rem]">
|
|
Draft a launch checklist
|
|
</h3>
|
|
</div>
|
|
|
|
<div className="flex-1 space-y-3 px-4 py-3.5 xl:space-y-4 xl:px-5 xl:py-4.5">
|
|
<div className="ml-auto max-w-[88%] rounded-[22px] border border-slate-900 bg-slate-900 px-4 py-3.5 text-white shadow-[0_22px_45px_-30px_rgba(15,23,42,0.6)] xl:max-w-[84%] xl:rounded-[24px] xl:px-4.5 xl:py-4.5">
|
|
<p className="text-[11px] uppercase tracking-[0.22em] text-white/55">You</p>
|
|
<p className="mt-2.5 text-[13px] leading-6 xl:mt-3 xl:text-[14px] xl:leading-7">
|
|
Build a concise launch checklist for the MVP and include the most
|
|
important backoffice follow-ups.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="max-w-[94%] rounded-[22px] border border-slate-200 bg-white px-4 py-3.5 shadow-[0_16px_35px_-28px_rgba(15,23,42,0.25)] xl:max-w-[92%] xl:rounded-[24px] xl:px-4.5 xl:py-4.5">
|
|
<p className="text-[11px] uppercase tracking-[0.22em] text-slate-400">Assistant</p>
|
|
<div className="mt-2.5 space-y-2 text-[13px] leading-6 text-slate-600 xl:mt-3 xl:space-y-2.5 xl:text-[14px] xl:leading-7">
|
|
<p className="font-semibold text-slate-900">Launch checklist</p>
|
|
<p>- Validate sign-in, new chat, rename, archive, and delete flows.</p>
|
|
<p>- Confirm agent selection and conversation persistence.</p>
|
|
<p className="hidden xl:block">
|
|
- Review visibility of users, conversations, messages, and usage events.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="border-t border-slate-200/80 px-4 py-3 xl:px-5 xl:py-3.5">
|
|
<div className="rounded-[20px] border border-white/90 bg-white px-4 py-2.5 text-[12px] text-slate-500 shadow-[0_14px_35px_-28px_rgba(15,23,42,0.18)] xl:rounded-[22px] xl:py-3 xl:text-sm">
|
|
Ask for a draft, plan, code snippet, or product spec…
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</section>
|
|
</main>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
|
|
LandingPage.getLayout = function getLayout(page: ReactElement) {
|
|
return <LayoutGuest>{page}</LayoutGuest>;
|
|
};
|