281 lines
14 KiB
TypeScript
281 lines
14 KiB
TypeScript
'use client'
|
|
|
|
import { motion } from 'framer-motion'
|
|
import { useMemo, useState } from 'react'
|
|
|
|
const heroStats = [
|
|
{ label: 'Launch time', value: 'days', detail: 'From idea to a five-page microsite with forms and follow-up copy.' },
|
|
{ label: 'Mindshare', value: 'Small & micro businesses only', detail: 'Served with tools built for their pace, not enterprise bureaucracy.' },
|
|
{ label: 'Control', value: 'In your hands', detail: 'We never take over—just give you better drafts, faster loops, and steady oversight.' },
|
|
]
|
|
|
|
const moduleHighlights = [
|
|
{
|
|
title: 'Lead journey blueprint',
|
|
copy: 'We map every touch—click, form, DM—so your follow-ups feel personal and focused.',
|
|
},
|
|
{
|
|
title: 'Human-reviewed content',
|
|
copy: 'Blogs, emails, socials drafted by AI and approved by a human so the voice always sounds like you.',
|
|
},
|
|
{
|
|
title: 'Microsite sprint',
|
|
copy: 'A five-page experience with lightweight storytelling, responsive forms, and quick updates.',
|
|
},
|
|
]
|
|
|
|
const addonModules = [
|
|
{ name: 'Social pulse', note: 'Pre-written slices you edit and send', stat: '3 weekly social loops' },
|
|
{ name: 'Conversation lab', note: 'Smart replies you customize', stat: '1 workflow per channel' },
|
|
{ name: 'Content studio', note: 'Blog drafts with on-brand tone', stat: '2 long-form pieces' },
|
|
]
|
|
|
|
export default function Home() {
|
|
const [formData, setFormData] = useState({
|
|
name: '',
|
|
email: '',
|
|
company: '',
|
|
message: '',
|
|
})
|
|
const [submitted, setSubmitted] = useState(false)
|
|
const [error, setError] = useState('')
|
|
|
|
const isFormValid = useMemo(
|
|
() => formData.name.trim() && formData.email.includes('@') && formData.message.trim(),
|
|
[formData]
|
|
)
|
|
|
|
const handleChange = (field: keyof typeof formData) => (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
|
|
setFormData((prev) => ({ ...prev, [field]: event.target.value }))
|
|
}
|
|
|
|
const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
|
|
event.preventDefault()
|
|
if (!isFormValid) {
|
|
setError('Please share a name, valid email, and your main objective.')
|
|
return
|
|
}
|
|
setError('')
|
|
setSubmitted(true)
|
|
}
|
|
|
|
return (
|
|
<main className="min-h-screen bg-gradient-to-b from-zinc-950 via-slate-950 to-zinc-900 text-white">
|
|
<div className="relative z-10 overflow-hidden">
|
|
<div className="floating-ring pointer-events-none" aria-hidden="true" />
|
|
<div className="floating-ring floating-ring--secondary pointer-events-none" aria-hidden="true" />
|
|
</div>
|
|
<div className="container mx-auto px-4 py-16 space-y-20">
|
|
<section className="relative hero-prism max-w-6xl mx-auto space-y-10">
|
|
<div className="text-center space-y-4">
|
|
<p className="text-xs uppercase tracking-[0.4em] text-zinc-500">Post-marketing world for small teams</p>
|
|
<h1 className="text-4xl md:text-6xl font-bold leading-tight font-heading">
|
|
1KP gives you the AI tools that make your small business feel like it has its own marketing team.
|
|
</h1>
|
|
<p className="mx-auto max-w-3xl text-lg text-zinc-300">
|
|
Build lean, readable stories that win trust, capture leads, and stay in your voice. No hype, no ownership swaps—just the tools you can plug into your own rhythm.
|
|
</p>
|
|
</div>
|
|
<div className="flex flex-col-reverse gap-6 lg:flex-row lg:items-center">
|
|
<div className="space-y-4">
|
|
<div className="rounded-3xl border border-white/10 bg-white/5 p-6 shadow-[0_20px_45px_rgba(15,23,42,0.9)]">
|
|
<p className="text-xs uppercase tracking-[0.3em] text-zinc-400">Capstone offer</p>
|
|
<p className="text-sm text-zinc-300 leading-relaxed">
|
|
An AI-assisted five-page microsite with forms, follow-ups, and living content that you can tweak in minutes.
|
|
</p>
|
|
<div className="pt-4 space-y-2 font-data text-sm text-slate-200">
|
|
<div>
|
|
<span className="text-xs uppercase tracking-[0.4em] text-zinc-400">pages</span>
|
|
<p className="text-3xl font-semibold">5</p>
|
|
</div>
|
|
<div>
|
|
<span className="text-xs uppercase tracking-[0.4em] text-zinc-400">notes</span>
|
|
<p className="text-2xl font-semibold">live edit</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-col gap-3">
|
|
<button className="rounded-full bg-gradient-to-r from-violet-500 via-purple-600 to-pink-500 px-8 py-3 text-base font-semibold text-white shadow-lg shadow-violet-500/50 transition hover:scale-[1.02]">
|
|
Plan a walkthrough
|
|
</button>
|
|
<button className="rounded-full border border-zinc-700 px-8 py-3 text-sm uppercase tracking-[0.3em] text-zinc-400 transition hover:border-zinc-500">
|
|
Download the sprint brief
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 40 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8 }}
|
|
className="grid gap-4 md:grid-cols-2"
|
|
>
|
|
{heroStats.map((stat) => (
|
|
<motion.div
|
|
key={stat.label}
|
|
className="module-card border border-white/10 bg-white/5 p-5"
|
|
whileHover={{ scale: 1.02 }}
|
|
>
|
|
<p className="text-xs uppercase tracking-[0.4em] text-zinc-400">{stat.label}</p>
|
|
<p className="text-2xl font-heading text-white">{stat.value}</p>
|
|
<p className="text-sm text-zinc-300">{stat.detail}</p>
|
|
</motion.div>
|
|
))}
|
|
</motion.div>
|
|
</div>
|
|
<div className="flex justify-center">
|
|
<svg viewBox="0 0 100 100" className="svg-prism" role="presentation" aria-hidden="true">
|
|
<defs>
|
|
<linearGradient id="halo" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" stopColor="#a855f7" />
|
|
<stop offset="50%" stopColor="#38bdf8" />
|
|
<stop offset="100%" stopColor="#f472b6" />
|
|
</linearGradient>
|
|
</defs>
|
|
<polygon points="50,5 95,35 80,90 20,90 5,35" fill="url(#halo)" opacity="0.85" />
|
|
</svg>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="space-y-6 rounded-3xl border border-zinc-800 bg-zinc-950/70 p-8">
|
|
<div className="flex flex-col gap-3 md:flex-row md:items-end md:justify-between">
|
|
<div>
|
|
<p className="text-xs uppercase tracking-[0.3em] text-zinc-500">How we show up</p>
|
|
<h2 className="text-3xl font-heading font-bold tracking-tight">Practical tools for your customer journey</h2>
|
|
</div>
|
|
<p className="text-sm text-zinc-400 max-w-xl">
|
|
Each step is measurable, reviewed by humans, and built to help small and micro businesses capture leads faster. We keep the language plain and the results understandable.
|
|
</p>
|
|
</div>
|
|
<div className="grid gap-5 md:grid-cols-3">
|
|
{moduleHighlights.map((module) => (
|
|
<article key={module.title} className="module-card rounded-3xl border border-white/10 bg-white/5 p-6">
|
|
<div className="flex items-center justify-between">
|
|
<h3 className="text-xl font-heading font-semibold">{module.title}</h3>
|
|
<span className="h-2 w-2 rounded-full bg-violet-500" />
|
|
</div>
|
|
<p className="mt-3 text-sm text-zinc-300 leading-relaxed">{module.copy}</p>
|
|
</article>
|
|
))}
|
|
</div>
|
|
</section>
|
|
|
|
<section className="space-y-6 rounded-3xl border border-zinc-800 bg-gradient-to-br from-zinc-950/90 to-slate-900/70 p-8">
|
|
<div className="flex flex-col gap-3 md:flex-row md:items-end md:justify-between">
|
|
<div>
|
|
<p className="text-xs uppercase tracking-[0.3em] text-zinc-500">Capstone product</p>
|
|
<h2 className="text-3xl font-heading font-bold tracking-tight">Lead-capturing microsites, refreshed</h2>
|
|
</div>
|
|
<p className="text-sm text-zinc-400 max-w-xl">
|
|
Each microsite ships with lead forms, automated follow-ups, and living content modules you can edit in real time. Add-on packs stay affordable and flexible.
|
|
</p>
|
|
</div>
|
|
<div className="grid gap-4 md:grid-cols-3">
|
|
<div className="module-card rounded-3xl border border-white/10 bg-black/30 p-6">
|
|
<p className="text-xs uppercase tracking-[0.4em] text-zinc-400">Pages</p>
|
|
<p className="font-heading text-4xl text-white">5</p>
|
|
<p className="text-sm text-zinc-300">Story-driven layout, hero through CTA.</p>
|
|
</div>
|
|
<div className="module-card rounded-3xl border border-white/10 bg-black/30 p-6">
|
|
<p className="text-xs uppercase tracking-[0.4em] text-zinc-400">Forms</p>
|
|
<p className="font-heading text-4xl text-white">Live</p>
|
|
<p className="text-sm text-zinc-300">Track submissions, add human follow-ups, see the full path.</p>
|
|
</div>
|
|
<div className="module-card rounded-3xl border border-white/10 bg-black/30 p-6">
|
|
<p className="text-xs uppercase tracking-[0.4em] text-zinc-400">Drafts</p>
|
|
<p className="font-heading text-4xl text-white">Human-checked</p>
|
|
<p className="text-sm text-zinc-300">Every piece reviewed before it goes live.</p>
|
|
</div>
|
|
</div>
|
|
<div className="grid gap-4 md:grid-cols-3">
|
|
{addonModules.map((addon) => (
|
|
<article key={addon.name} className="module-card rounded-2xl border border-white/10 bg-white/5 p-5">
|
|
<p className="text-xs uppercase tracking-[0.4em] text-zinc-400">{addon.name}</p>
|
|
<p className="text-base font-semibold text-white">{addon.note}</p>
|
|
<p className="font-data text-sm text-emerald-200">{addon.stat}</p>
|
|
</article>
|
|
))}
|
|
</div>
|
|
</section>
|
|
|
|
<section className="space-y-6 rounded-3xl border border-zinc-800 bg-black/30 p-8">
|
|
<div className="flex flex-col gap-3 md:flex-row md:items-end md:justify-between">
|
|
<div>
|
|
<p className="text-xs uppercase tracking-[0.4em] text-zinc-500">Start a conversation</p>
|
|
<h2 className="text-3xl font-heading font-bold">Tell us what feels out of place today</h2>
|
|
</div>
|
|
<p className="text-sm text-zinc-400 max-w-xl">
|
|
Share your current lead flow or the content you wish you had. We will reply with a clear next step—the work is always human-reviewed.
|
|
</p>
|
|
</div>
|
|
<div className="grid gap-4 md:grid-cols-3">
|
|
<div className="skeleton h-10 rounded-3xl" />
|
|
<div className="skeleton h-10 rounded-3xl" />
|
|
<div className="skeleton h-10 rounded-3xl" />
|
|
</div>
|
|
<form className="space-y-4" onSubmit={handleSubmit}>
|
|
<div className="grid gap-4 md:grid-cols-2">
|
|
<label className="text-sm text-zinc-400 flex flex-col">
|
|
Name
|
|
<input
|
|
value={formData.name}
|
|
onChange={handleChange('name')}
|
|
className="mt-2 rounded-2xl bg-white/5 border border-zinc-800 px-4 py-3 text-white focus:border-white focus:ring-0"
|
|
type="text"
|
|
placeholder="Alex Rivera"
|
|
/>
|
|
</label>
|
|
<label className="text-sm text-zinc-400 flex flex-col">
|
|
Email
|
|
<input
|
|
value={formData.email}
|
|
onChange={handleChange('email')}
|
|
className="mt-2 rounded-2xl bg-white/5 border border-zinc-800 px-4 py-3 text-white focus:border-white focus:ring-0"
|
|
type="email"
|
|
placeholder="you@company.com"
|
|
/>
|
|
</label>
|
|
</div>
|
|
<label className="text-sm text-zinc-400 flex flex-col">
|
|
Company / project
|
|
<input
|
|
value={formData.company}
|
|
onChange={handleChange('company')}
|
|
className="mt-2 rounded-2xl bg-white/5 border border-zinc-800 px-4 py-3 text-white focus:border-white focus:ring-0"
|
|
type="text"
|
|
placeholder="Neighborhood Bakery, LLC"
|
|
/>
|
|
</label>
|
|
<label className="text-sm text-zinc-400 flex flex-col">
|
|
What feels hard about your current marketing stack?
|
|
<textarea
|
|
value={formData.message}
|
|
onChange={handleChange('message')}
|
|
className="mt-2 rounded-2xl bg-white/5 border border-zinc-800 px-4 py-3 text-white focus:border-white focus:ring-0 resize-none min-h-[140px]"
|
|
placeholder="Tell us about the workflows or customer journey you want to own."
|
|
/>
|
|
</label>
|
|
{error && <p className="text-sm text-rose-400">{error}</p>}
|
|
{submitted && <p className="text-sm text-emerald-400">Thanks! Expect a plain-language reply with the next steps.</p>}
|
|
<button
|
|
type="submit"
|
|
className="w-full rounded-2xl bg-gradient-to-r from-violet-500 to-purple-700 px-6 py-4 text-base font-semibold text-white shadow-lg shadow-violet-700/40"
|
|
>
|
|
Request a clearer automation path
|
|
</button>
|
|
<p className="text-xs text-zinc-500">
|
|
Every plan is reviewed by a human before we build anything for your team.
|
|
</p>
|
|
</form>
|
|
</section>
|
|
|
|
<section className="space-y-4 rounded-3xl border border-zinc-800 bg-white/5 p-8">
|
|
<p className="text-xs uppercase tracking-[0.4em] text-zinc-500">Testing ground</p>
|
|
<h2 className="text-2xl font-heading font-bold">1000planets.cloud is under testing</h2>
|
|
<p className="text-sm text-zinc-400 leading-relaxed">
|
|
We keep the site public while we refine the experience. Expect updates, shimmer, and new modules as we respond to small business customer feedback.
|
|
</p>
|
|
</section>
|
|
</div>
|
|
</main>
|
|
)
|
|
}
|