import { BarChart3, Clock, FileText, Lock, TrendingUp } from 'lucide-react'; import { Head, useForm, usePage } from '@inertiajs/react'; import { UpgradePrompt } from '@/Components/billing/UpgradePrompt'; import { Input } from '@/Components/ui/input'; import { Label } from '@/Components/ui/label'; import { LoadingButton } from '@/Components/ui/loading-button'; import { useUnsavedChanges } from '@/hooks/useUnsavedChanges'; import DashboardLayout from '@/Layouts/DashboardLayout'; import { trackEvent } from '@/lib/analytics'; import { SITE_CREATED } from '@/lib/event-catalog'; import type { PageProps } from '@/types'; const BENEFITS = [ { icon: TrendingUp, title: "Find what's losing traffic", description: 'See exactly which pages dropped and why, with before/after comparisons.', }, { icon: BarChart3, title: 'Get actionable recommendations', description: 'Rule-based recommendations ranked by impact — no guesswork needed.', }, { icon: FileText, title: 'AI Drafts Included', description: 'Turn recommendations into ready-to-publish AI drafts. Included on every plan — no setup needed.', }, ]; const TRUST_SIGNALS = [ { icon: Lock, text: 'Read-only GSC access — we never modify your data' }, { icon: Clock, text: 'First insights in under 10 minutes' }, ]; export default function SitesCreate() { const { limits } = usePage().props; const { data, setData, post, processing, errors, isDirty } = useForm({ name: '', domain: '', }); useUnsavedChanges(isDirty); const submit = (e: React.FormEvent) => { e.preventDefault(); post(route('sites.store'), { onSuccess: () => { trackEvent(SITE_CREATED); }, }); }; const atSitesLimit = limits != null && limits.max_sites_per_user > 0 && limits.sites_used_count >= limits.max_sites_per_user; return ( <>
{atSitesLimit && (
)}
{/* Left: value proposition */}

Connect your WordPress site

Enter your site details to start diagnosing SEO issues and generating AI-powered content fixes.

    {BENEFITS.map(({ icon: Icon, title, description }) => (

  • {title}

    {description}

    • ))}
    {TRUST_SIGNALS.map(({ icon: Icon, text }) => (
  • {text}
    • ))}
{/* Right: form */}
setData('name', e.target.value)} placeholder="My Website" className="mt-1" aria-invalid={!!errors.name} aria-describedby={errors.name ? 'site-name-error' : undefined} /> {errors.name && (

{errors.name}

)}
setData('domain', e.target.value)} placeholder="https://example.com" className="mt-1" aria-invalid={!!errors.domain} aria-describedby={errors.domain ? 'site-domain-error' : 'site-domain-hint'} /> {errors.domain ? (

{errors.domain}

) : (

Enter the full URL including https://, e.g. https://myblog.com

)}
Connect site
); } SitesCreate.layout = (page: React.ReactNode) => {page};