mirror of
https://github.com/Luchexx/wacrm.git
synced 2026-11-02 17:29:45 +00:00
d5d406fe8e
Replaces the root redirect to /login with a real marketing landing so first-time visitors can learn about WaCRM and convert. Authed users still see it and get a "Go to Dashboard" CTA instead of "Sign in" / "Get started". Sections, in order: - Sticky nav with smooth scroll to Features / How it works / FAQ. Auth-aware CTA: pending/signed-in/signed-out states render the right buttons without layout shift. - Hero with clear one-liner, benefit subhead, primary + secondary CTA, trust cues, and a miniature inbox preview (pure CSS/SVG recreation of the real UI — no screenshot to age out). - Features grid: 6 benefit-first cards. - 4x feature spotlights (alternating): shared inbox, automations, pipelines, analytics. Each with a bespoke product miniature. - How It Works: 3 steps framed around "live in 30 minutes". - FAQ: 6 questions answering the real objections (BSP access, team sharing, setup speed, data ownership, templates, broadcasts). - Final CTA banner + footer with nav + product/account link columns. Implementation notes: - All visuals are CSS/SVG miniatures in src/components/landing/mock — intentionally not real screenshots so the page doesn't drift from the product over time. - Dark theme throughout to preserve the app's brand (per the repo's dark-only convention). No light sections. - Per-viewport verified: desktop (1440x900) two-column hero with mock; mobile (375x812) stacks hero and reveals a hamburger menu. - Middleware untouched — the page itself did the /login redirect; replacing page.tsx is enough. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
69 lines
2.1 KiB
TypeScript
69 lines
2.1 KiB
TypeScript
import { Plug, Users, Zap } from 'lucide-react'
|
|
import { Section, SectionHeader } from './section'
|
|
|
|
const STEPS = [
|
|
{
|
|
num: '01',
|
|
icon: Plug,
|
|
title: 'Connect your WhatsApp number',
|
|
body:
|
|
'Paste your phone number ID and access token from Meta. Works with any Meta-approved WhatsApp Business API provider.',
|
|
},
|
|
{
|
|
num: '02',
|
|
icon: Users,
|
|
title: 'Bring in your contacts',
|
|
body:
|
|
'Import a CSV, or let incoming messages build your contact list automatically. Tags and custom fields are ready from day one.',
|
|
},
|
|
{
|
|
num: '03',
|
|
icon: Zap,
|
|
title: 'Reply, automate, measure',
|
|
body:
|
|
'Use the shared inbox with your team, set up flows for repeat work, and track what is actually moving the needle in your analytics.',
|
|
},
|
|
]
|
|
|
|
export function HowItWorks() {
|
|
return (
|
|
<Section id="how-it-works">
|
|
<SectionHeader
|
|
eyebrow="How it works"
|
|
title="Live in under 30 minutes"
|
|
description="Most teams are up and running before their first coffee refill. No onboarding calls required."
|
|
/>
|
|
|
|
<div className="grid grid-cols-1 gap-6 md:grid-cols-3">
|
|
{STEPS.map((s) => {
|
|
const Icon = s.icon
|
|
return (
|
|
<div
|
|
key={s.num}
|
|
className="relative rounded-xl border border-slate-800 bg-slate-900/40 p-6"
|
|
>
|
|
<div className="flex items-start justify-between">
|
|
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-emerald-500/10 text-emerald-400">
|
|
<Icon className="h-5 w-5" />
|
|
</div>
|
|
<span
|
|
className="text-xl font-bold tracking-tight text-slate-800 tabular-nums"
|
|
aria-hidden
|
|
>
|
|
{s.num}
|
|
</span>
|
|
</div>
|
|
<h3 className="mt-4 text-base font-semibold text-white">
|
|
{s.title}
|
|
</h3>
|
|
<p className="mt-1.5 text-sm leading-relaxed text-slate-400">
|
|
{s.body}
|
|
</p>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
</Section>
|
|
)
|
|
}
|