pguerrerox
867 lines
35 KiB
TypeScript
867 lines
35 KiB
TypeScript
import { type ReactElement, type SVGProps, useEffect, useState } from 'react';
|
|
import { APIProvider } from '@vis.gl/react-google-maps';
|
|
import {
|
|
AlertCircle,
|
|
ArrowRight,
|
|
Briefcase,
|
|
Building2,
|
|
Check,
|
|
LogIn,
|
|
Map,
|
|
MapPinned,
|
|
Search,
|
|
ShieldAlert,
|
|
Sparkles,
|
|
User,
|
|
UserPlus,
|
|
} from 'lucide-react';
|
|
import { Layout, type AppTab } from './components/Layout';
|
|
import { Dashboard } from './components/Dashboard';
|
|
import { MapView } from './components/MapView';
|
|
import { ResearchWorkspace } from './components/ResearchWorkspace';
|
|
import { ResultsWorkspace } from './components/ResultsWorkspace';
|
|
import type { SessionUser } from '../shared/types';
|
|
import { getLocalSessionUser, signInWithLocalAuth, signOutWithLocalAuth, signUpWithLocalAuth } from './lib/auth';
|
|
import { hasApiConfig } from './lib/api';
|
|
|
|
const GOOGLE_MAPS_API_KEY = import.meta.env.VITE_GOOGLE_MAPS_PLATFORM_KEY ?? '';
|
|
const hasValidMapsKey = Boolean(GOOGLE_MAPS_API_KEY) && GOOGLE_MAPS_API_KEY !== 'YOUR_API_KEY';
|
|
|
|
export default function App() {
|
|
const [publicPage, setPublicPage] = useState<'landing' | 'auth'>(() => getPublicPageFromLocation());
|
|
const [user, setUser] = useState<SessionUser | null>(null);
|
|
const [loading, setLoading] = useState(true);
|
|
const [activeTab, setActiveTab] = useState<AppTab>('setup');
|
|
const [selectedJobIds, setSelectedJobIds] = useState<string[]>([]);
|
|
const [authError, setAuthError] = useState<string | null>(null);
|
|
const [authNotice, setAuthNotice] = useState<string | null>(null);
|
|
const [isAuthenticating, setIsAuthenticating] = useState(false);
|
|
const [authMode, setAuthMode] = useState<'sign_in' | 'sign_up'>('sign_in');
|
|
const [email, setEmail] = useState('');
|
|
const [password, setPassword] = useState('');
|
|
const [displayName, setDisplayName] = useState('');
|
|
|
|
useEffect(() => {
|
|
const handlePopState = () => {
|
|
setPublicPage(getPublicPageFromLocation());
|
|
};
|
|
|
|
window.addEventListener('popstate', handlePopState);
|
|
|
|
return () => {
|
|
window.removeEventListener('popstate', handlePopState);
|
|
};
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
let isMounted = true;
|
|
|
|
const loadSession = async () => {
|
|
try {
|
|
const sessionUser = await getLocalSessionUser();
|
|
|
|
if (!isMounted) {
|
|
return;
|
|
}
|
|
|
|
setUser(sessionUser);
|
|
} catch (error) {
|
|
if (!isMounted) {
|
|
return;
|
|
}
|
|
|
|
setAuthError(error instanceof Error ? error.message : 'Failed to load session.');
|
|
} finally {
|
|
if (isMounted) {
|
|
setLoading(false);
|
|
}
|
|
}
|
|
};
|
|
|
|
void loadSession();
|
|
|
|
return () => {
|
|
isMounted = false;
|
|
};
|
|
}, []);
|
|
|
|
const handleToggleJobSelection = (jobId: string) => {
|
|
setSelectedJobIds((currentJobIds) =>
|
|
currentJobIds.includes(jobId) ? currentJobIds.filter((currentJobId) => currentJobId !== jobId) : [...currentJobIds, jobId],
|
|
);
|
|
};
|
|
|
|
const handleSelectCreatedJob = (jobId: string) => {
|
|
setSelectedJobIds((currentJobIds) => (currentJobIds.includes(jobId) ? currentJobIds : [...currentJobIds, jobId]));
|
|
};
|
|
|
|
const handleShowSelectedOnMap = () => {
|
|
if (selectedJobIds.length === 0) {
|
|
return;
|
|
}
|
|
|
|
setActiveTab('map');
|
|
};
|
|
|
|
const handleClearSelectedJobs = () => {
|
|
setSelectedJobIds([]);
|
|
};
|
|
|
|
const handleShowJobIdsOnMap = (jobIds: string[]) => {
|
|
setSelectedJobIds(jobIds);
|
|
setActiveTab('map');
|
|
};
|
|
|
|
const handleLogin = async () => {
|
|
setAuthError(null);
|
|
setAuthNotice(null);
|
|
setIsAuthenticating(true);
|
|
|
|
try {
|
|
if (authMode === 'sign_up') {
|
|
const nextUser = await signUpWithLocalAuth({
|
|
email,
|
|
password,
|
|
displayName: displayName.trim() || undefined,
|
|
});
|
|
|
|
setUser(nextUser);
|
|
setAuthNotice('Account created and signed in.');
|
|
return;
|
|
}
|
|
|
|
const nextUser = await signInWithLocalAuth({
|
|
email,
|
|
password,
|
|
});
|
|
|
|
setUser(nextUser);
|
|
navigatePublicPage('landing', setPublicPage);
|
|
} catch (error) {
|
|
setAuthError(error instanceof Error ? error.message : 'Authentication failed.');
|
|
} finally {
|
|
setIsAuthenticating(false);
|
|
}
|
|
};
|
|
|
|
const handleLogout = async () => {
|
|
const sessionId = user?.sessionId;
|
|
|
|
setAuthError(null);
|
|
setAuthNotice(null);
|
|
setSelectedJobIds([]);
|
|
setUser(null);
|
|
setActiveTab('setup');
|
|
|
|
try {
|
|
await signOutWithLocalAuth(sessionId);
|
|
} catch (error) {
|
|
setAuthError(error instanceof Error ? error.message : 'Failed to sign out.');
|
|
}
|
|
};
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="flex h-screen items-center justify-center bg-stone-50">
|
|
<div className="h-8 w-8 animate-spin rounded-full border-4 border-emerald-500 border-t-transparent"></div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (!hasApiConfig) {
|
|
return (
|
|
<ConfigScreen
|
|
icon={<ShieldAlert className="h-8 w-8" />}
|
|
title="Local API Config Required"
|
|
description="Add your local API base URL before running the app."
|
|
steps={[
|
|
'Start the local Fastify API server.',
|
|
'Add VITE_API_BASE_URL to your local environment.',
|
|
'Ensure the API can reach your local PostgreSQL database.',
|
|
'Restart the Vite dev server after updating env vars.',
|
|
]}
|
|
footer="The app now uses a local API, PostgreSQL, and local session auth."
|
|
/>
|
|
);
|
|
}
|
|
|
|
if (!user) {
|
|
const handleSetAuthMode = (mode: 'sign_in' | 'sign_up') => {
|
|
setAuthMode(mode);
|
|
setAuthError(null);
|
|
setAuthNotice(null);
|
|
};
|
|
|
|
if (publicPage === 'auth') {
|
|
return (
|
|
<AuthPage
|
|
authMode={authMode}
|
|
authError={authError}
|
|
authNotice={authNotice}
|
|
displayName={displayName}
|
|
email={email}
|
|
isAuthenticating={isAuthenticating}
|
|
password={password}
|
|
onDisplayNameChange={setDisplayName}
|
|
onEmailChange={setEmail}
|
|
onPasswordChange={setPassword}
|
|
onGoHome={() => navigatePublicPage('landing', setPublicPage)}
|
|
onSetAuthMode={handleSetAuthMode}
|
|
onSubmit={() => void handleLogin()}
|
|
/>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<LandingPage
|
|
onGoToAuth={(mode) => {
|
|
handleSetAuthMode(mode);
|
|
navigatePublicPage('auth', setPublicPage);
|
|
}}
|
|
/>
|
|
);
|
|
}
|
|
|
|
if (!hasValidMapsKey) {
|
|
return (
|
|
<ConfigScreen
|
|
icon={<MapIcon className="h-8 w-8" />}
|
|
title="Google Maps API Key Required"
|
|
description="Add a browser key for map rendering and a server key for the local search API."
|
|
steps={[
|
|
'Create a Google Maps Platform API key for the browser app.',
|
|
'Set VITE_GOOGLE_MAPS_PLATFORM_KEY locally for the frontend.',
|
|
'Set GOOGLE_MAPS_SERVER_KEY for the local API server.',
|
|
'Enable Geocoding API and Places API in Google Cloud.',
|
|
]}
|
|
footer="You can create a local account without the maps key, but the workspace needs it before loading."
|
|
/>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<APIProvider apiKey={GOOGLE_MAPS_API_KEY} version="weekly">
|
|
<Layout
|
|
user={user}
|
|
activeTab={activeTab}
|
|
setActiveTab={setActiveTab}
|
|
onLogout={() => void handleLogout()}
|
|
>
|
|
{activeTab === 'setup' && (
|
|
<ResearchWorkspace
|
|
user={user}
|
|
selectedJobIds={selectedJobIds}
|
|
onToggleJobSelection={handleToggleJobSelection}
|
|
onSelectCreatedJob={handleSelectCreatedJob}
|
|
onShowSelectedOnMap={handleShowSelectedOnMap}
|
|
onClearSelection={handleClearSelectedJobs}
|
|
onShowBatchOnMap={handleShowJobIdsOnMap}
|
|
/>
|
|
)}
|
|
{activeTab === 'results' && (
|
|
<ResultsWorkspace
|
|
user={user}
|
|
selectedJobIds={selectedJobIds}
|
|
onToggleJobSelection={handleToggleJobSelection}
|
|
onShowSelectedOnMap={handleShowSelectedOnMap}
|
|
onClearSelection={handleClearSelectedJobs}
|
|
onShowBatchOnMap={handleShowJobIdsOnMap}
|
|
/>
|
|
)}
|
|
{activeTab === 'dashboard' && <Dashboard user={user} />}
|
|
{activeTab === 'map' && <MapView user={user} jobIds={selectedJobIds} />}
|
|
</Layout>
|
|
</APIProvider>
|
|
);
|
|
}
|
|
|
|
function getPublicPageFromLocation(): 'landing' | 'auth' {
|
|
if (typeof window === 'undefined') {
|
|
return 'landing';
|
|
}
|
|
|
|
return window.location.pathname === '/auth' ? 'auth' : 'landing';
|
|
}
|
|
|
|
function navigatePublicPage(page: 'landing' | 'auth', setPublicPage: (page: 'landing' | 'auth') => void) {
|
|
const nextPath = page === 'auth' ? '/auth' : '/';
|
|
|
|
if (typeof window !== 'undefined' && window.location.pathname !== nextPath) {
|
|
window.history.pushState({}, '', nextPath);
|
|
}
|
|
|
|
setPublicPage(page);
|
|
}
|
|
|
|
function LandingPage(props: {
|
|
onGoToAuth: (mode: 'sign_in' | 'sign_up') => void;
|
|
}) {
|
|
const { onGoToAuth } = props;
|
|
|
|
const featureCards = [
|
|
{
|
|
icon: Search,
|
|
title: 'Research Runs',
|
|
description: 'Search by city, radius, business type, and keywords without juggling spreadsheets or manual lookups.',
|
|
},
|
|
{
|
|
icon: MapPinned,
|
|
title: 'Deep Research',
|
|
description: 'Drop one pin and expand intelligently into nearby postal areas to widen market coverage.',
|
|
},
|
|
{
|
|
icon: Map,
|
|
title: 'Clean Map View',
|
|
description: 'Review returned businesses on a focused map built for operational decision-making, not map clutter.',
|
|
},
|
|
{
|
|
icon: Briefcase,
|
|
title: 'Lead Workspace',
|
|
description: 'Keep past runs, saved businesses, and mapped results in one place for repeatable prospecting.',
|
|
},
|
|
] as const;
|
|
|
|
const audienceCards = [
|
|
{
|
|
icon: User,
|
|
title: 'Personal Use',
|
|
description: 'For solo operators, freelancers, and independent prospectors who need a focused local research workflow.',
|
|
},
|
|
{
|
|
icon: Building2,
|
|
title: 'Small Business',
|
|
description: 'For agencies and local teams running prospecting every week across multiple service areas.',
|
|
},
|
|
{
|
|
icon: Sparkles,
|
|
title: 'Enterprise',
|
|
description: 'For larger organizations that need custom research volume, rollout support, and tailored operating limits.',
|
|
},
|
|
] as const;
|
|
|
|
const plans = [
|
|
{
|
|
name: 'Personal',
|
|
audience: 'For solo operators',
|
|
price: '$19',
|
|
period: '/month',
|
|
cta: 'Start free',
|
|
featured: false,
|
|
items: ['1 user workspace', '40 research runs / month', 'Map view and dashboard history', 'Email support'],
|
|
},
|
|
{
|
|
name: 'Small Business',
|
|
audience: 'For growing local teams',
|
|
price: '$79',
|
|
period: '/month',
|
|
cta: 'Choose Small Business',
|
|
featured: true,
|
|
items: ['Everything in Personal', '250 research runs / month', 'Deep research workflows', 'Extended lead history', 'Priority support'],
|
|
},
|
|
{
|
|
name: 'Enterprise',
|
|
audience: 'For custom rollouts',
|
|
price: 'Contact',
|
|
period: 'sales',
|
|
cta: 'Talk to sales',
|
|
featured: false,
|
|
items: ['Custom research volume', 'Custom onboarding plan', 'Tailored support model', 'Deployment and process guidance'],
|
|
},
|
|
] as const;
|
|
|
|
return (
|
|
<div className="min-h-screen bg-[radial-gradient(circle_at_top_left,_rgba(16,185,129,0.12),_transparent_28%),linear-gradient(180deg,#fafaf9_0%,#f5f5f4_100%)] text-stone-900">
|
|
<div className="mx-auto max-w-7xl px-4 pb-16 pt-4 sm:px-6 lg:px-8 lg:pb-24">
|
|
<header className="sticky top-4 z-10 rounded-3xl border border-white/70 bg-white/80 px-5 py-4 shadow-sm backdrop-blur md:px-6">
|
|
<div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
|
|
<div className="flex items-center gap-3">
|
|
<div className="rounded-2xl bg-emerald-600 p-2.5 text-white shadow-sm">
|
|
<Briefcase className="h-5 w-5" />
|
|
</div>
|
|
<div>
|
|
<p className="text-lg font-bold tracking-tight">Leads4less</p>
|
|
<p className="text-sm text-stone-500">Local market research for modern teams</p>
|
|
</div>
|
|
</div>
|
|
|
|
<nav className="flex flex-wrap items-center gap-3 text-sm font-medium text-stone-600">
|
|
<a href="#product" className="rounded-full px-3 py-2 transition hover:bg-stone-100 hover:text-stone-900">
|
|
Product
|
|
</a>
|
|
<a href="#workflow" className="rounded-full px-3 py-2 transition hover:bg-stone-100 hover:text-stone-900">
|
|
Workflow
|
|
</a>
|
|
<a href="#pricing" className="rounded-full px-3 py-2 transition hover:bg-stone-100 hover:text-stone-900">
|
|
Pricing
|
|
</a>
|
|
<button
|
|
type="button"
|
|
onClick={() => onGoToAuth('sign_in')}
|
|
className="rounded-full px-3 py-2 transition hover:bg-stone-100 hover:text-stone-900"
|
|
>
|
|
Sign In
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => onGoToAuth('sign_up')}
|
|
className="inline-flex items-center gap-2 rounded-full bg-emerald-600 px-4 py-2 text-white shadow-sm transition hover:bg-emerald-700"
|
|
>
|
|
Sign Up
|
|
<ArrowRight className="h-4 w-4" />
|
|
</button>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
|
|
<section className="py-12 lg:py-16">
|
|
<div className="space-y-8">
|
|
<div className="inline-flex items-center gap-2 rounded-full border border-emerald-200 bg-emerald-50 px-4 py-2 text-sm font-medium text-emerald-700">
|
|
<Sparkles className="h-4 w-4" />
|
|
Built for local lead generation workflows
|
|
</div>
|
|
|
|
<div className="space-y-5">
|
|
<h1 className="max-w-4xl text-5xl font-bold tracking-tight text-stone-950 sm:text-6xl">
|
|
Research local markets, map opportunities, and build better lead lists faster.
|
|
</h1>
|
|
<p className="max-w-3xl text-lg leading-8 text-stone-600 sm:text-xl">
|
|
Run targeted searches, expand coverage from a single pin, and review every result in one focused workspace designed for real prospecting operations.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-3 sm:flex-row">
|
|
<button
|
|
type="button"
|
|
onClick={() => onGoToAuth('sign_up')}
|
|
className="inline-flex items-center justify-center gap-2 rounded-2xl bg-emerald-600 px-6 py-4 text-sm font-semibold text-white shadow-sm transition hover:bg-emerald-700"
|
|
>
|
|
Sign Up
|
|
<ArrowRight className="h-4 w-4" />
|
|
</button>
|
|
<a
|
|
href="#pricing"
|
|
className="inline-flex items-center justify-center rounded-2xl border border-stone-200 bg-white px-6 py-4 text-sm font-semibold text-stone-700 shadow-sm transition hover:border-stone-300 hover:bg-stone-50"
|
|
>
|
|
See pricing
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="product" className="rounded-[2rem] border border-stone-200 bg-white px-6 py-10 shadow-sm sm:px-8 lg:px-10">
|
|
<div className="max-w-3xl">
|
|
<p className="text-sm font-semibold uppercase tracking-[0.18em] text-emerald-600">Product</p>
|
|
<h2 className="mt-3 text-3xl font-bold tracking-tight text-stone-900 sm:text-4xl">One workspace for local lead generation</h2>
|
|
<p className="mt-4 text-base leading-8 text-stone-600">
|
|
Leads4less keeps market research, deep area expansion, map review, and saved business history in a single operating flow so your team can move faster without losing context.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="mt-8 grid gap-4 lg:grid-cols-3">
|
|
<div className="rounded-3xl bg-stone-950 p-6 text-white lg:col-span-2">
|
|
<p className="text-sm font-semibold uppercase tracking-[0.18em] text-emerald-300">Operational Workflow</p>
|
|
<p className="mt-4 text-2xl font-bold tracking-tight">Search a market, expand intelligently, and review results visually.</p>
|
|
<p className="mt-4 max-w-2xl text-sm leading-7 text-stone-300">
|
|
Instead of stitching together Google tabs, spreadsheets, and hand-written notes, run the full prospecting loop from one product surface built for repeatable research. Launch deeper market coverage from a single map interaction while keeping research, deep research, dashboard, and map review connected in one workspace.
|
|
</p>
|
|
</div>
|
|
<div className="rounded-3xl border border-stone-200 bg-stone-50 p-6">
|
|
<p className="text-sm font-semibold uppercase tracking-[0.18em] text-stone-500">Best Fit</p>
|
|
<p className="mt-4 text-2xl font-bold tracking-tight text-stone-900">Local teams who need speed and structure</p>
|
|
<p className="mt-4 text-sm leading-7 text-stone-600">Built for recurring lead generation, territory research, and targeted market expansion.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="workflow" className="py-16">
|
|
<div className="max-w-3xl">
|
|
<p className="text-sm font-semibold uppercase tracking-[0.18em] text-emerald-600">Workflow</p>
|
|
<h2 className="mt-3 text-3xl font-bold tracking-tight text-stone-900 sm:text-4xl">A clear research process from first search to mapped review</h2>
|
|
</div>
|
|
|
|
<div className="mt-8 grid gap-4 lg:grid-cols-4">
|
|
{[
|
|
['01', 'Search', 'Start with location, radius, business type, and optional keywords.'],
|
|
['02', 'Expand', 'Use deep research to fan out from a pin into nearby postal areas.'],
|
|
['03', 'Review', 'Inspect returned businesses on a clean map and in the dashboard.'],
|
|
['04', 'Act', 'Keep high-value results organized for follow-up and repeated market work.'],
|
|
].map(([step, title, description]) => (
|
|
<div key={step} className="rounded-3xl border border-stone-200 bg-white p-6 shadow-sm">
|
|
<p className="text-sm font-semibold uppercase tracking-[0.18em] text-emerald-600">{step}</p>
|
|
<h3 className="mt-4 text-xl font-bold tracking-tight text-stone-900">{title}</h3>
|
|
<p className="mt-3 text-sm leading-7 text-stone-600">{description}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
|
|
<section className="rounded-[2rem] border border-stone-200 bg-white px-6 py-10 shadow-sm sm:px-8 lg:px-10">
|
|
<div className="max-w-3xl">
|
|
<p className="text-sm font-semibold uppercase tracking-[0.18em] text-emerald-600">Who It's For</p>
|
|
<h2 className="mt-3 text-3xl font-bold tracking-tight text-stone-900 sm:text-4xl">Designed for personal use, small business teams, and enterprise rollouts</h2>
|
|
</div>
|
|
|
|
<div className="mt-8 grid gap-4 lg:grid-cols-3">
|
|
{audienceCards.map((audience) => (
|
|
<div key={audience.title} className="rounded-3xl border border-stone-200 bg-stone-50 p-6">
|
|
<div className="flex h-11 w-11 items-center justify-center rounded-2xl bg-white text-emerald-600 shadow-sm">
|
|
<audience.icon className="h-5 w-5" />
|
|
</div>
|
|
<h3 className="mt-5 text-xl font-bold tracking-tight text-stone-900">{audience.title}</h3>
|
|
<p className="mt-3 text-sm leading-7 text-stone-600">{audience.description}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
|
|
<section id="pricing" className="py-16">
|
|
<div className="max-w-3xl">
|
|
<p className="text-sm font-semibold uppercase tracking-[0.18em] text-emerald-600">Pricing</p>
|
|
<h2 className="mt-3 text-3xl font-bold tracking-tight text-stone-900 sm:text-4xl">Choose the plan that matches your research volume</h2>
|
|
<p className="mt-4 text-base leading-8 text-stone-600">
|
|
Start small, run local research consistently, and upgrade when your market coverage or team needs expand.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="mt-8 grid gap-5 xl:grid-cols-3">
|
|
{plans.map((plan) => (
|
|
<div
|
|
key={plan.name}
|
|
className={`rounded-[2rem] border p-7 shadow-sm ${
|
|
plan.featured ? 'border-emerald-300 bg-emerald-50/60 shadow-emerald-100' : 'border-stone-200 bg-white'
|
|
}`}
|
|
>
|
|
<div className="flex items-start justify-between gap-4">
|
|
<div>
|
|
<p className="text-xl font-bold tracking-tight text-stone-900">{plan.name}</p>
|
|
<p className="mt-2 text-sm text-stone-600">{plan.audience}</p>
|
|
</div>
|
|
{plan.featured && (
|
|
<span className="rounded-full bg-emerald-600 px-3 py-1 text-xs font-semibold uppercase tracking-wide text-white">
|
|
Most Popular
|
|
</span>
|
|
)}
|
|
</div>
|
|
|
|
<div className="mt-8 flex items-end gap-1">
|
|
<span className="text-4xl font-bold tracking-tight text-stone-950">{plan.price}</span>
|
|
<span className="pb-1 text-sm text-stone-500">{plan.period}</span>
|
|
</div>
|
|
|
|
<button
|
|
type="button"
|
|
onClick={() => onGoToAuth(plan.name === 'Enterprise' ? 'sign_in' : 'sign_up')}
|
|
className={`mt-8 inline-flex w-full items-center justify-center rounded-2xl px-4 py-3 text-sm font-semibold transition ${
|
|
plan.featured
|
|
? 'bg-emerald-600 text-white hover:bg-emerald-700'
|
|
: 'border border-stone-200 bg-white text-stone-800 hover:bg-stone-50'
|
|
}`}
|
|
>
|
|
{plan.cta}
|
|
</button>
|
|
|
|
<div className="mt-8 space-y-3">
|
|
{plan.items.map((item) => (
|
|
<div key={item} className="flex items-start gap-3 text-sm text-stone-700">
|
|
<div className="mt-0.5 flex h-5 w-5 items-center justify-center rounded-full bg-emerald-100 text-emerald-700">
|
|
<Check className="h-3.5 w-3.5" />
|
|
</div>
|
|
<span>{item}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
|
|
<section className="rounded-[2rem] bg-stone-950 px-6 py-12 text-white shadow-sm sm:px-8 lg:px-10">
|
|
<div className="flex flex-col gap-6 lg:flex-row lg:items-end lg:justify-between">
|
|
<div className="max-w-3xl">
|
|
<p className="text-sm font-semibold uppercase tracking-[0.18em] text-emerald-300">Start Now</p>
|
|
<h2 className="mt-3 text-3xl font-bold tracking-tight sm:text-4xl">Turn local market research into a repeatable system.</h2>
|
|
<p className="mt-4 text-base leading-8 text-stone-300">
|
|
Create an account, run your first research job, and build a cleaner lead workflow from day one.
|
|
</p>
|
|
</div>
|
|
<div className="flex flex-col gap-3 sm:flex-row">
|
|
<button
|
|
type="button"
|
|
onClick={() => onGoToAuth('sign_up')}
|
|
className="inline-flex items-center justify-center gap-2 rounded-2xl bg-emerald-500 px-6 py-4 text-sm font-semibold text-white transition hover:bg-emerald-400"
|
|
>
|
|
Choose a plan
|
|
<ArrowRight className="h-4 w-4" />
|
|
</button>
|
|
<a
|
|
href="#pricing"
|
|
className="inline-flex items-center justify-center rounded-2xl border border-white/20 px-6 py-4 text-sm font-semibold text-white transition hover:bg-white/10"
|
|
>
|
|
Compare plans
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function AuthPage(props: {
|
|
authMode: 'sign_in' | 'sign_up';
|
|
authError: string | null;
|
|
authNotice: string | null;
|
|
displayName: string;
|
|
email: string;
|
|
isAuthenticating: boolean;
|
|
password: string;
|
|
onDisplayNameChange: (value: string) => void;
|
|
onEmailChange: (value: string) => void;
|
|
onPasswordChange: (value: string) => void;
|
|
onGoHome: () => void;
|
|
onSetAuthMode: (mode: 'sign_in' | 'sign_up') => void;
|
|
onSubmit: () => void;
|
|
}) {
|
|
const {
|
|
authMode,
|
|
authError,
|
|
authNotice,
|
|
displayName,
|
|
email,
|
|
isAuthenticating,
|
|
password,
|
|
onDisplayNameChange,
|
|
onEmailChange,
|
|
onPasswordChange,
|
|
onGoHome,
|
|
onSetAuthMode,
|
|
onSubmit,
|
|
} = props;
|
|
|
|
return (
|
|
<div className="min-h-screen bg-[radial-gradient(circle_at_top_left,_rgba(16,185,129,0.12),_transparent_30%),linear-gradient(180deg,#fafaf9_0%,#f5f5f4_100%)] text-stone-900">
|
|
<div className="mx-auto max-w-7xl px-4 py-4 sm:px-6 lg:px-8">
|
|
<header className="rounded-3xl border border-white/70 bg-white/80 px-5 py-4 shadow-sm backdrop-blur md:px-6">
|
|
<div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
|
|
<button type="button" onClick={onGoHome} className="flex items-center gap-3 text-left">
|
|
<div className="rounded-2xl bg-emerald-600 p-2.5 text-white shadow-sm">
|
|
<Briefcase className="h-5 w-5" />
|
|
</div>
|
|
<div>
|
|
<p className="text-lg font-bold tracking-tight">Leads4less</p>
|
|
<p className="text-sm text-stone-500">Local market research for modern teams</p>
|
|
</div>
|
|
</button>
|
|
|
|
<div className="flex items-center gap-3 text-sm font-medium text-stone-600">
|
|
<button type="button" onClick={onGoHome} className="rounded-full px-3 py-2 transition hover:bg-stone-100 hover:text-stone-900">
|
|
Back to home
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<section className="grid gap-10 py-12 lg:grid-cols-[minmax(0,1fr)_440px] lg:items-center lg:py-16">
|
|
<div className="space-y-8">
|
|
<div className="inline-flex items-center gap-2 rounded-full border border-emerald-200 bg-emerald-50 px-4 py-2 text-sm font-medium text-emerald-700">
|
|
<Sparkles className="h-4 w-4" />
|
|
Secure access to your lead workspace
|
|
</div>
|
|
|
|
<div className="space-y-5">
|
|
<h1 className="max-w-3xl text-5xl font-bold tracking-tight text-stone-950 sm:text-6xl">
|
|
{authMode === 'sign_up' ? 'Create your workspace and start researching local markets.' : 'Sign in and continue your lead research workflow.'}
|
|
</h1>
|
|
<p className="max-w-2xl text-lg leading-8 text-stone-600 sm:text-xl">
|
|
Access research runs, deep research coverage, clean map review, and saved business history from one focused operating surface.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid gap-4 sm:grid-cols-3">
|
|
{[
|
|
['Targeted search', 'Run location-based business research with clear inputs and repeatable jobs.'],
|
|
['Map review', 'Inspect returned businesses on a cleaner map built for operational use.'],
|
|
['Persistent history', 'Keep lead runs and saved businesses available whenever you come back.'],
|
|
].map(([title, description]) => (
|
|
<div key={title} className="rounded-3xl border border-stone-200 bg-white p-5 shadow-sm">
|
|
<p className="text-base font-bold tracking-tight text-stone-900">{title}</p>
|
|
<p className="mt-2 text-sm leading-7 text-stone-600">{description}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="rounded-[2rem] border border-stone-200 bg-white p-6 shadow-xl shadow-stone-200/70 sm:p-8">
|
|
<div className="mb-6 flex items-center justify-between">
|
|
<div>
|
|
<p className="text-sm font-semibold uppercase tracking-[0.18em] text-emerald-600">Account Access</p>
|
|
<h2 className="mt-2 text-2xl font-bold tracking-tight text-stone-900">
|
|
{authMode === 'sign_up' ? 'Create account' : 'Sign in'}
|
|
</h2>
|
|
<p className="mt-2 text-sm text-stone-600">
|
|
{authMode === 'sign_up' ? 'Set up your account to start using Leads4less.' : 'Use your account to continue where you left off.'}
|
|
</p>
|
|
</div>
|
|
<div className="rounded-2xl bg-emerald-50 p-3 text-emerald-600">
|
|
{authMode === 'sign_up' ? <UserPlus className="h-6 w-6" /> : <LogIn className="h-6 w-6" />}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-2 rounded-2xl bg-stone-100 p-1">
|
|
<button
|
|
type="button"
|
|
onClick={() => onSetAuthMode('sign_in')}
|
|
className={`rounded-xl px-3 py-2.5 text-sm font-semibold transition-all ${
|
|
authMode === 'sign_in' ? 'bg-white text-stone-900 shadow-sm' : 'text-stone-500 hover:text-stone-900'
|
|
}`}
|
|
>
|
|
Sign In
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => onSetAuthMode('sign_up')}
|
|
className={`rounded-xl px-3 py-2.5 text-sm font-semibold transition-all ${
|
|
authMode === 'sign_up' ? 'bg-white text-stone-900 shadow-sm' : 'text-stone-500 hover:text-stone-900'
|
|
}`}
|
|
>
|
|
Sign Up
|
|
</button>
|
|
</div>
|
|
|
|
{authError && (
|
|
<div className="mt-5 flex items-start gap-3 rounded-2xl border border-red-100 bg-red-50 p-4 text-sm text-red-700">
|
|
<AlertCircle className="mt-0.5 h-5 w-5 flex-shrink-0" />
|
|
<div>
|
|
<p className="font-semibold">Authentication Error</p>
|
|
<p className="mt-1 opacity-90">{authError}</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{authNotice && <div className="mt-5 rounded-2xl border border-emerald-100 bg-emerald-50 p-4 text-sm text-emerald-700">{authNotice}</div>}
|
|
|
|
<form
|
|
className="mt-5 space-y-4"
|
|
onSubmit={(event) => {
|
|
event.preventDefault();
|
|
onSubmit();
|
|
}}
|
|
>
|
|
{authMode === 'sign_up' && (
|
|
<div>
|
|
<label className="mb-2 block text-sm font-semibold text-stone-700">Name</label>
|
|
<input
|
|
type="text"
|
|
value={displayName}
|
|
onChange={(event) => onDisplayNameChange(event.target.value)}
|
|
placeholder="Your name"
|
|
className="w-full rounded-2xl border border-stone-200 bg-stone-50 px-4 py-3 text-sm outline-none transition-all focus:border-emerald-500 focus:ring-2 focus:ring-emerald-500"
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
<div>
|
|
<label className="mb-2 block text-sm font-semibold text-stone-700">Email</label>
|
|
<input
|
|
type="email"
|
|
required
|
|
value={email}
|
|
onChange={(event) => onEmailChange(event.target.value)}
|
|
placeholder="you@example.com"
|
|
className="w-full rounded-2xl border border-stone-200 bg-stone-50 px-4 py-3 text-sm outline-none transition-all focus:border-emerald-500 focus:ring-2 focus:ring-emerald-500"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="mb-2 block text-sm font-semibold text-stone-700">Password</label>
|
|
<input
|
|
type="password"
|
|
required
|
|
minLength={6}
|
|
value={password}
|
|
onChange={(event) => onPasswordChange(event.target.value)}
|
|
placeholder="At least 6 characters"
|
|
className="w-full rounded-2xl border border-stone-200 bg-stone-50 px-4 py-3 text-sm outline-none transition-all focus:border-emerald-500 focus:ring-2 focus:ring-emerald-500"
|
|
/>
|
|
</div>
|
|
|
|
<button
|
|
type="submit"
|
|
disabled={isAuthenticating}
|
|
className="flex w-full items-center justify-center gap-3 rounded-2xl bg-emerald-600 px-4 py-3.5 text-sm font-semibold text-white shadow-sm transition-all hover:bg-emerald-700 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
|
|
>
|
|
{isAuthenticating ? (
|
|
<div className="h-5 w-5 animate-spin rounded-full border-2 border-white border-t-transparent"></div>
|
|
) : authMode === 'sign_up' ? (
|
|
<UserPlus className="h-5 w-5" />
|
|
) : (
|
|
<LogIn className="h-5 w-5" />
|
|
)}
|
|
{isAuthenticating
|
|
? authMode === 'sign_up'
|
|
? 'Creating account...'
|
|
: 'Signing in...'
|
|
: authMode === 'sign_up'
|
|
? 'Create Account'
|
|
: 'Sign In'}
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function ConfigScreen(props: {
|
|
icon: ReactElement;
|
|
title: string;
|
|
description: string;
|
|
steps: string[];
|
|
footer: string;
|
|
}) {
|
|
const { icon, title, description, steps, footer } = props;
|
|
|
|
return (
|
|
<div className="flex h-screen items-center justify-center bg-stone-50 p-6 font-sans">
|
|
<div className="w-full max-w-lg rounded-2xl bg-white p-8 text-center shadow-xl">
|
|
<div className="mx-auto mb-6 flex h-16 w-16 items-center justify-center rounded-full bg-red-100 text-red-600">
|
|
{icon}
|
|
</div>
|
|
<h2 className="mb-4 text-2xl font-bold text-stone-900">{title}</h2>
|
|
<p className="mb-6 text-left text-stone-600">{description}</p>
|
|
<div className="mb-6 space-y-4 rounded-xl border border-stone-200 bg-stone-50 p-6 text-left">
|
|
<p className="text-sm font-medium text-stone-900">Follow these steps:</p>
|
|
<ol className="list-inside list-decimal space-y-2 text-sm text-stone-600">
|
|
{steps.map((step) => (
|
|
<li key={step}>{step}</li>
|
|
))}
|
|
</ol>
|
|
</div>
|
|
<p className="text-xs text-stone-400">{footer}</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function MapIcon(props: SVGProps<SVGSVGElement>) {
|
|
return (
|
|
<svg
|
|
{...props}
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
>
|
|
<polygon points="3 6 9 3 15 6 21 3 21 18 15 21 9 18 3 21" />
|
|
<line x1="9" y1="3" x2="9" y2="18" />
|
|
<line x1="15" y1="6" x2="15" y2="21" />
|
|
</svg>
|
|
);
|
|
}
|