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>
65 lines
1.8 KiB
TypeScript
65 lines
1.8 KiB
TypeScript
import type { ReactNode } from 'react'
|
|
import { Check } from 'lucide-react'
|
|
import { Section } from './section'
|
|
import { cn } from '@/lib/utils'
|
|
|
|
interface FeatureSpotlightProps {
|
|
eyebrow: string
|
|
title: string
|
|
body: string
|
|
bullets?: string[]
|
|
/** Right-side by default; flip to put the visual on the left. */
|
|
reverse?: boolean
|
|
visual: ReactNode
|
|
anchorId?: string
|
|
}
|
|
|
|
/**
|
|
* Reusable alternating feature section (copy on one side, product
|
|
* miniature on the other). Three instances on the page so we use the
|
|
* same component to keep spacing + typography consistent.
|
|
*/
|
|
export function FeatureSpotlight({
|
|
eyebrow,
|
|
title,
|
|
body,
|
|
bullets,
|
|
reverse,
|
|
visual,
|
|
anchorId,
|
|
}: FeatureSpotlightProps) {
|
|
return (
|
|
<Section id={anchorId} className="py-16 sm:py-20">
|
|
<div
|
|
className={cn(
|
|
'grid grid-cols-1 items-center gap-12 lg:grid-cols-2 lg:gap-16',
|
|
reverse && 'lg:[&>*:first-child]:order-2',
|
|
)}
|
|
>
|
|
<div>
|
|
<p className="text-xs font-semibold uppercase tracking-wider text-emerald-400">
|
|
{eyebrow}
|
|
</p>
|
|
<h3 className="mt-3 text-2xl font-bold tracking-tight text-white sm:text-3xl">
|
|
{title}
|
|
</h3>
|
|
<p className="mt-4 text-base leading-relaxed text-slate-400">
|
|
{body}
|
|
</p>
|
|
{bullets && bullets.length > 0 && (
|
|
<ul className="mt-5 space-y-2.5">
|
|
{bullets.map((b) => (
|
|
<li key={b} className="flex items-start gap-2.5 text-sm text-slate-300">
|
|
<Check className="mt-0.5 h-4 w-4 flex-shrink-0 text-emerald-400" />
|
|
<span>{b}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
</div>
|
|
<div>{visual}</div>
|
|
</div>
|
|
</Section>
|
|
)
|
|
}
|