-
+
);
};
diff --git a/src/components/focus-group-session/ReasoningPanel.tsx b/src/components/focus-group-session/ReasoningPanel.tsx
index ef73b0b4..2945ca78 100755
--- a/src/components/focus-group-session/ReasoningPanel.tsx
+++ b/src/components/focus-group-session/ReasoningPanel.tsx
@@ -28,7 +28,7 @@ const ActionIcon = ({ action }: { action: string }) => {
case 'participant_respond':
return
+
+ {/* ── Greeting ── */}
+
-
- Overview
- Synthetic Users
- Focus Groups
-
-
-
-
-
-
-
-
-
-
-
-
+
+ {/* ── Quick actions ── */}
+
+
+
+ {/* ── Banners ── */}
+ {user && !(user as any).email_verified && (
+
+
+
+ + Welcome back, {user?.username} +
+
+ {user?.role === 'admin' && (
+ Admin
+ )}
+
+ {balance?.credits_balance ?? '…'} credits remaining
+
+
+
+
+ )}
+
+ {quotaExceeded && (
+
+
+
+ + Please verify your email address to unlock all features. +
+
+
+ )}
+
+ {/* ── Stat row ── */}
+
+
+
+ Credit quota exceeded. Top up to continue.
+
+ navigate('/billing')}
+ actionLabel="Top up"
+ loading={balanceLoading}
+ />
+ navigate('/usage')}
+ actionLabel="Details"
+ loading={usageLoading}
+ />
+ navigate('/synthetic-users')}
+ actionLabel="View all"
+ loading={personasCount === null}
/>
-
0 ? `${activeFgCount} active now` : 'None active'}
+ action={() => navigate('/focus-groups')}
+ actionLabel="View all"
+ loading={fgCount === null}
/>
-
-
+
+
+ {/* ── Active tasks + Recent activity ── */}
+
+
+ {/* Active tasks */}
+
+
+ {/* ── Recent personas ── */}
+ {recentPersonas.length > 0 && (
+
+
+
+ {/* Recent transactions */}
+
+
+ {activeTasks.length === 0 ? (
+ Running tasks
+
+
+ ) : (
+ No active tasks
+
+ {activeTasks.map(task => (
+
+ )}
+
+
+ ))}
+
+
+ {task.progress !== undefined && (
+ {task.progress}%
+ )}
+ + {task.task_type.replace(/_/g, ' ')} +
+{formatDate(task.created_at)}
+
+
+
+
+ {txLoading ? (
+
+
+
+ View all →
+
+ Recent transactions
+
+ {[...Array(4)].map((_, i) => (
+
+ ))}
+
+ ) : transactions.length === 0 ? (
+ No transactions yet
+ ) : ( +
+ {transactions.map(tx => (
+
+ )}
+
+
+ ))}
+
+
+ + {TX_TYPE_LABELS[tx.type] || tx.type} +
+{formatDate(tx.created_at)}
+
+
+ + {tx.amount > 0 ? '+' : ''}{tx.amount} cr +
+{tx.balance_after} cr left
+
+
+ )}
+
+ {/* ── Admin link ── */}
+ {user?.role === 'admin' && (
+
+
+
+
+
+ View all →
+
+ Recent personas
+
+ {recentPersonas.map(p => (
+
+
+
+ {p.name?.[0] || '?'}
+
+ {p.name}
+
+ ))}
+
+
+ )}
+
+
+
+
+ Open admin →
+
+
+
+ Admin panel
+Manage users, usage, pricing, and analytics
+
- (null);
+ const [mobileOpen, setMobileOpen] = useState(false);
+
+ useEffect(() => {
+ if (!isAuthenticated) return;
+ billingApi.getBalance().then(r => setCredits(r.data.credits_balance)).catch(() => {});
+ }, [isAuthenticated]);
+
+ return (
+
+
+ );
+}
diff --git a/src/components/layout/PublicLayout.tsx b/src/components/layout/PublicLayout.tsx
new file mode 100644
index 00000000..1226bda0
--- /dev/null
+++ b/src/components/layout/PublicLayout.tsx
@@ -0,0 +1,15 @@
+import { Outlet } from 'react-router-dom';
+import Header from './Header';
+import Footer from './Footer';
+
+export default function PublicLayout() {
+ return (
+
+ {/* App header */}
+
+
+
+ {/* Page content — supports both nested
+ {children ??
+
+ );
+}
diff --git a/src/components/layout/Footer.tsx b/src/components/layout/Footer.tsx
new file mode 100644
index 00000000..6344cf24
--- /dev/null
+++ b/src/components/layout/Footer.tsx
@@ -0,0 +1,73 @@
+import { Link } from 'react-router-dom';
+import Logo from '@/components/brand/Logo';
+
+const footerLinks = {
+ Platform: [
+ { label: 'Synthetic Personas', to: '/synthetic-users' },
+ { label: 'Focus Groups', to: '/focus-groups' },
+ { label: 'Dashboard', to: '/dashboard' },
+ { label: 'Billing & Credits', to: '/billing' },
+ ],
+ Company: [
+ { label: 'About', to: '#' },
+ { label: 'Blog', to: '#' },
+ { label: 'Careers', to: '#' },
+ { label: 'Contact', to: '#' },
+ ],
+ Legal: [
+ { label: 'Privacy Policy', to: '#' },
+ { label: 'Terms of Service', to: '#' },
+ { label: 'Cookie Policy', to: '#' },
+ { label: 'GDPR', to: '#' },
+ ],
+};
+
+export default function Footer() {
+ return (
+
+ );
+}
diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
new file mode 100644
index 00000000..438375b7
--- /dev/null
+++ b/src/components/layout/Header.tsx
@@ -0,0 +1,157 @@
+import { useState, useEffect } from 'react';
+import { Link, NavLink, useNavigate } from 'react-router-dom';
+import { useAuth } from '@/contexts/AuthContext';
+import Logo from '@/components/brand/Logo';
+import UserDropdown from '@/components/brand/UserDropdown';
+import { Menu, X } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+const navLinks = [
+ { label: 'Home', to: '/' },
+ { label: 'Product', to: '/#product' },
+ { label: 'Pricing', to: '/#pricing' },
+ { label: 'Blog', to: '/blog' },
+ { label: 'Contact', to: '/contact' },
+];
+
+export default function Header() {
+ const { isAuthenticated } = useAuth();
+ const navigate = useNavigate();
+ const [scrolled, setScrolled] = useState(false);
+ const [mobileOpen, setMobileOpen] = useState(false);
+
+ useEffect(() => {
+ const onScroll = () => setScrolled(window.scrollY > 24);
+ window.addEventListener('scroll', onScroll, { passive: true });
+ return () => window.removeEventListener('scroll', onScroll);
+ }, []);
+
+ return (
+
+ {/* Logo */}
+
+
+
+ {/* Mobile menu */}
+ {mobileOpen && (
+
+ {credits !== null && (
+
+ )}
+
+
+ {appNavItems.map(({ label, to, icon: Icon }) => (
+
+ cn(
+ 'flex items-center gap-2.5 px-3 py-2.5 rounded-xl text-sm font-medium',
+ isActive ? 'text-primary bg-primary/10' : 'text-muted-foreground hover:text-foreground hover:bg-secondary/60'
+ )
+ }
+ onClick={() => setMobileOpen(false)}
+ >
+
+ ))}
+
+ )}
+
+
+
+ {/* Logo */}
+
+
+
+ {/* Mobile menu */}
+ {mobileOpen && (
+
+ {/* Language switcher */}
+
+
+ {/* Mobile toggle */}
+
+
+ 🌐
+ Eng
+
+
+ {isAuthenticated ? (
+
+
+
+ )}
+
+ {isAuthenticated ? (
+ setMobileOpen(false)}>
+
+
+ ) : (
+ <>
+ setMobileOpen(false)}
+ >
+ Log in
+
+ setMobileOpen(false)}
+ >
+ Get started free
+
+
+ )}
+
+
+
+
+
+
+ );
+}
diff --git a/src/components/persona/PersonaPersonality.tsx b/src/components/persona/PersonaPersonality.tsx
index f2544303..5afc6e24 100755
--- a/src/components/persona/PersonaPersonality.tsx
+++ b/src/components/persona/PersonaPersonality.tsx
@@ -49,7 +49,7 @@ export function PersonaPersonality({ persona }: PersonaPersonalityProps) {
{oceanData[0].value}%
-
+
{oceanData[0].value > 75 ? 'Highly creative and curious' : diff --git a/src/components/persona/PersonaProfile.tsx b/src/components/persona/PersonaProfile.tsx index 012a1cba..f088c14a 100755 --- a/src/components/persona/PersonaProfile.tsx +++ b/src/components/persona/PersonaProfile.tsx @@ -1,6 +1,5 @@ import { useState, useEffect, useCallback } from 'react'; -import Navigation from '@/components/Navigation'; import { Button } from '@/components/ui/button'; import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'; import { @@ -211,7 +210,7 @@ export default function PersonaProfile() { return (
-
{isEditing ? (
diff --git a/src/components/persona/PersonaProfileSkeleton.tsx b/src/components/persona/PersonaProfileSkeleton.tsx
index 32496973..cda5a35d 100755
--- a/src/components/persona/PersonaProfileSkeleton.tsx
+++ b/src/components/persona/PersonaProfileSkeleton.tsx
@@ -1,11 +1,10 @@
-import Navigation from '@/components/Navigation';
import { Card } from '@/components/ui/card';
import { Skeleton } from '@/components/ui/skeleton';
export function PersonaProfileSkeleton() {
return (
)}
diff --git a/src/index.css b/src/index.css
index d519727c..03d52f5e 100755
--- a/src/index.css
+++ b/src/index.css
@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap');
@tailwind base;
@tailwind components;
@@ -6,47 +6,47 @@
@layer base {
:root {
- /* Cohorta — dark navy + cyan palette (AImpress style) */
- --background: 222 47% 4%;
- --foreground: 210 40% 96%;
+ /* Cohorta — AIMPRESS rebrand: warm dark + orange */
+ --background: 220 22% 12%;
+ --foreground: 30 18% 92%;
- --card: 222 45% 7%;
- --card-foreground: 210 40% 96%;
+ --card: 220 20% 16%;
+ --card-foreground: 30 18% 92%;
- --popover: 222 45% 7%;
- --popover-foreground: 210 40% 96%;
+ --popover: 220 22% 14%;
+ --popover-foreground: 30 18% 92%;
- /* Cyan primary */
- --primary: 188 91% 44%;
- --primary-foreground: 222 47% 4%;
+ /* Orange primary */
+ --primary: 28 78% 56%;
+ --primary-foreground: 220 25% 10%;
- --secondary: 222 38% 13%;
- --secondary-foreground: 210 40% 80%;
+ --secondary: 220 18% 20%;
+ --secondary-foreground: 30 12% 78%;
- --muted: 222 38% 11%;
- --muted-foreground: 215 20% 50%;
+ --muted: 220 16% 22%;
+ --muted-foreground: 30 10% 58%;
- /* Violet accent */
- --accent: 258 89% 66%;
- --accent-foreground: 0 0% 100%;
+ /* Orange accent — used for full-bleed orange band sections */
+ --accent: 28 85% 60%;
+ --accent-foreground: 220 25% 10%;
--destructive: 0 84% 60%;
--destructive-foreground: 0 0% 100%;
- --border: 222 38% 16%;
- --input: 222 38% 13%;
- --ring: 188 91% 44%;
+ --border: 220 16% 24%;
+ --input: 220 18% 18%;
+ --ring: 28 78% 56%;
- --radius: 0.75rem;
+ --radius: 1rem;
- --sidebar-background: 222 47% 4%;
- --sidebar-foreground: 210 40% 96%;
- --sidebar-primary: 188 91% 44%;
- --sidebar-primary-foreground: 222 47% 4%;
- --sidebar-accent: 222 38% 11%;
- --sidebar-accent-foreground: 210 40% 80%;
- --sidebar-border: 222 38% 16%;
- --sidebar-ring: 188 91% 44%;
+ --sidebar-background: 220 22% 10%;
+ --sidebar-foreground: 30 18% 92%;
+ --sidebar-primary: 28 78% 56%;
+ --sidebar-primary-foreground: 220 25% 10%;
+ --sidebar-accent: 220 16% 20%;
+ --sidebar-accent-foreground: 30 12% 78%;
+ --sidebar-border: 220 16% 22%;
+ --sidebar-ring: 28 78% 56%;
}
}
@@ -62,7 +62,7 @@
}
h1, h2, h3, h4 {
- font-family: 'Syne', system-ui, sans-serif;
+ font-family: 'Space Grotesk', system-ui, sans-serif;
}
::-webkit-scrollbar {
@@ -75,42 +75,42 @@
}
::-webkit-scrollbar-thumb {
- background: hsl(222 38% 20%);
+ background: hsl(220 16% 28%);
border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
- background: hsl(188 91% 44% / 0.5);
+ background: hsl(28 78% 56% / 0.5);
}
}
@layer components {
- /* Glass cards — dark */
+ /* Glass cards — warm dark */
.glass-card {
- background: linear-gradient(135deg, hsl(222 45% 9% / 0.8), hsl(222 45% 7% / 0.9));
+ background: linear-gradient(135deg, hsl(220 20% 18% / 0.85), hsl(220 22% 14% / 0.9));
backdrop-filter: blur(12px);
- border: 1px solid hsl(222 38% 20% / 0.6);
- box-shadow: 0 4px 24px hsl(222 47% 2% / 0.4);
+ border: 1px solid hsl(220 16% 26% / 0.6);
+ box-shadow: 0 4px 24px hsl(220 25% 6% / 0.45);
}
.glass-panel {
- background: hsl(222 45% 8% / 0.7);
+ background: hsl(220 20% 16% / 0.75);
backdrop-filter: blur(16px);
- border: 1px solid hsl(222 38% 18% / 0.5);
+ border: 1px solid hsl(220 16% 24% / 0.5);
}
- /* Gradient text — cyan to violet */
+ /* Gradient text — orange to warm amber */
.text-gradient {
- background: linear-gradient(135deg, #06B6D4 0%, #8B5CF6 100%);
+ background: linear-gradient(135deg, hsl(28 78% 56%) 0%, hsl(38 90% 65%) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
- /* Gradient border card */
+ /* Gradient border card — orange glow on hover */
.gradient-border-card {
position: relative;
- background: hsl(222 45% 7%);
+ background: hsl(220 20% 16%);
border-radius: var(--radius);
}
.gradient-border-card::before {
@@ -119,7 +119,7 @@
inset: 0;
border-radius: var(--radius);
padding: 1px;
- background: linear-gradient(135deg, #06B6D4, #8B5CF6);
+ background: linear-gradient(135deg, hsl(28 78% 56%), hsl(38 90% 65%));
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
@@ -130,33 +130,34 @@
opacity: 1;
}
- /* CTA gradient button */
+ /* CTA primary button */
.btn-gradient {
- background: linear-gradient(135deg, #06B6D4 0%, #7C3AED 100%);
- color: white;
+ background: hsl(var(--primary));
+ color: hsl(var(--primary-foreground));
border: none;
transition: all 0.2s ease;
- box-shadow: 0 0 20px hsl(188 91% 44% / 0.25);
+ box-shadow: 0 0 20px hsl(28 78% 56% / 0.3);
}
.btn-gradient:hover {
- box-shadow: 0 0 32px hsl(188 91% 44% / 0.45);
+ background: hsl(28 78% 62%);
+ box-shadow: 0 0 32px hsl(28 78% 56% / 0.5);
transform: translateY(-1px);
}
.btn-gradient:active {
transform: translateY(0);
}
- /* Ghost button — white outline */
+ /* Ghost button — subtle outline */
.btn-ghost-outline {
background: transparent;
- color: hsl(210 40% 96%);
- border: 1px solid hsl(222 38% 25%);
+ color: hsl(var(--foreground));
+ border: 1px solid hsl(220 16% 30%);
transition: all 0.2s ease;
}
.btn-ghost-outline:hover {
- border-color: hsl(188 91% 44% / 0.6);
- color: #06B6D4;
- background: hsl(188 91% 44% / 0.05);
+ border-color: hsl(28 78% 56% / 0.6);
+ color: hsl(28 78% 65%);
+ background: hsl(28 78% 56% / 0.06);
}
/* Animated glow orb */
@@ -167,6 +168,49 @@
pointer-events: none;
}
+ /* Outline display text — huge hero-scale, stroke only */
+ .outline-display {
+ color: transparent;
+ -webkit-text-stroke: 2px hsl(var(--foreground) / 0.15);
+ text-stroke: 2px hsl(var(--foreground) / 0.15);
+ user-select: none;
+ }
+
+ /* Full-bleed orange band sections */
+ .orange-band {
+ background: hsl(var(--accent));
+ color: hsl(var(--accent-foreground));
+ }
+
+ /* Corner card — dark card with diagonal graphic overlay (like AIMPRESS stat cards) */
+ .corner-card {
+ position: relative;
+ overflow: hidden;
+ background: hsl(var(--card));
+ border: 1px solid hsl(var(--border));
+ border-radius: var(--radius);
+ }
+ .corner-card::after {
+ content: '';
+ position: absolute;
+ top: -30%;
+ right: -20%;
+ width: 60%;
+ height: 160%;
+ background: hsl(28 78% 56% / 0.06);
+ border-radius: 50%;
+ transform: rotate(-15deg);
+ pointer-events: none;
+ }
+
+ /* Persona orb — circular image mask */
+ .persona-orb {
+ aspect-ratio: 1;
+ border-radius: 9999px;
+ overflow: hidden;
+ flex-shrink: 0;
+ }
+
/* Persona card */
.persona-card {
@apply relative overflow-hidden;
@@ -178,19 +222,19 @@
}
.persona-card:hover .persona-card-overlay {
- background: hsl(188 91% 44% / 0.08);
+ background: hsl(28 78% 56% / 0.07);
}
.persona-card.selected .persona-card-overlay {
- background: hsl(188 91% 44% / 0.10);
+ background: hsl(28 78% 56% / 0.10);
}
.persona-card-checkmark {
@apply absolute top-3 left-3 z-20 opacity-0 transition-all duration-200 ease-out;
- background: hsl(222 45% 12% / 0.9);
+ background: hsl(220 22% 14% / 0.9);
border-radius: 9999px;
padding: 4px;
- border: 1px solid hsl(222 38% 22%);
+ border: 1px solid hsl(220 16% 26%);
}
.persona-card.selected .persona-card-checkmark {
@@ -200,7 +244,7 @@
/* Sidebar utilities */
.sidebar-icon {
@apply h-4 w-4 mr-3 mt-0.5 flex-shrink-0;
- color: hsl(215 20% 50%);
+ color: hsl(30 10% 55%);
}
.sidebar-section {
diff --git a/src/lib/api.ts b/src/lib/api.ts
index 3ce14fc9..4f1760d9 100755
--- a/src/lib/api.ts
+++ b/src/lib/api.ts
@@ -123,8 +123,11 @@ export const authApi = {
register: (username: string, email: string, password: string) =>
api.post('/auth/register', { username, email, password }),
- getProfile: () =>
- api.get('/auth/me')
+ getProfile: () =>
+ api.get('/auth/me'),
+
+ resendVerification: () =>
+ api.post('/auth/resend-verification'),
};
// Billing endpoints
diff --git a/src/pages/Billing.tsx b/src/pages/Billing.tsx
index b3c6c8a8..07067f7f 100644
--- a/src/pages/Billing.tsx
+++ b/src/pages/Billing.tsx
@@ -2,12 +2,7 @@ import { useState, useEffect } from 'react';
import { useSearchParams } from 'react-router-dom';
import { billingApi } from '@/lib/api';
import { toastService } from '@/lib/toast';
-import { Button } from '@/components/ui/button';
-import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
-import { Badge } from '@/components/ui/badge';
-import { Separator } from '@/components/ui/separator';
-import { Loader2, CreditCard, Zap, TrendingUp, Package } from 'lucide-react';
-import Navigation from '@/components/Navigation';
+import { Loader2, CreditCard, Zap, TrendingUp, Package, CheckCircle2 } from 'lucide-react';
interface CreditPack {
id: string;
@@ -23,6 +18,7 @@ interface Transaction {
balance_after: number;
description: string;
ts: string;
+ created_at?: string;
}
interface BalanceData {
@@ -32,12 +28,21 @@ interface BalanceData {
credit_packs: CreditPack[];
}
-const TX_BADGE: Record
-
{/* Header with back button and title */}
diff --git a/src/components/persona/PersonaSidebar.tsx b/src/components/persona/PersonaSidebar.tsx
index 55b4aaad..adf04fee 100755
--- a/src/components/persona/PersonaSidebar.tsx
+++ b/src/components/persona/PersonaSidebar.tsx
@@ -100,7 +100,7 @@ export function PersonaSidebar({ persona }: PersonaSidebarProps) {
{persona.brandLoyalty}%
-
+
-
+
+
-
-
-
-
-
-
-
{loading ? (
Billing
-Manage your credits and purchases
+Billing
+Manage your credits and purchase history
-
) : balanceData && (
<>
- {/* Balance card */}
-
- {balanceData.credits_balance}
- credits
+ {/* Balance */}
+
+
+
+
-
- Persona creation: {balanceData.persona_cost} cr
- Focus group run: {balanceData.run_cost} cr
+
+
+
+ Credit balance
+
+ {balanceData.credits_balance.toLocaleString()}
+ credits
+
+
+
+
+ {balanceData.persona_cost} cr
+per persona
+
+
-
-
-
- {/* Credit packs */}
- {balanceData.run_cost} cr
+per FG run
-
- {/* Transaction history */}
+ {/* Credit packs */}
Buy Credits
-
- {balanceData.credit_packs.map((pack) => (
-
- {pack.id === 'pro' && (
-
-
-
- {pack.credits} credits
-
-
-
-
-
-
-
- ))}
- Popular
-
- )}
- ${pack.price_usd}
-
- ${(pack.price_usd / pack.credits).toFixed(2)} per credit
-
-
-
-
+
+ {/* Transactions */}
+
-
+
+
+ {balanceData.credit_packs.map(pack => {
+ const isPopular = pack.id === 'pro';
+ const features = PACK_FEATURES[pack.id] || [];
+ return (
+
+ {isPopular && (
+
+ Most popular
+
+ )}
+ {pack.name}
+
+ ${pack.price_usd}
+ one-time
+
+
+ {features.map(f => (
+ -
+
+ ))}
+
+
+
+ );
+ })}
+
+
+ {isPopular && (
+
+ );
+ })}
+
+ Most popular
+
+ )}
+ {pack.name}
+
+ ${pack.price_usd}
+ one-time
+
+ -
+ {features.map(f => (
+
-
+
{f} +
+ ))}
+
+
+
{transactions.length === 0 ? (
-
-
- {transactions.map((tx, i) => {
- const badge = TX_BADGE[tx.type] || { label: tx.type, variant: 'outline' as const };
- const isPositive = tx.amount > 0;
- return (
-
+
{transactions.length === 0 ? (
- No transactions yet.
+No transactions yet.
) : ( -
- {i > 0 &&
diff --git a/src/pages/FocusGroupSession.tsx b/src/pages/FocusGroupSession.tsx
index 14afd4fb..2b203ed7 100755
--- a/src/pages/FocusGroupSession.tsx
+++ b/src/pages/FocusGroupSession.tsx
@@ -21,7 +21,6 @@ import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, D
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Badge } from '@/components/ui/badge';
import { Progress } from '@/components/ui/progress';
-import Navigation from '@/components/Navigation';
import ParticipantPanel from '@/components/focus-group-session/ParticipantPanel';
import DiscussionPanel from '@/components/focus-group-session/DiscussionPanel';
import ThemesPanel from '@/components/focus-group-session/ThemesPanel';
@@ -1762,7 +1761,7 @@ const FocusGroupSession = () => {
if (isLoading) {
return (
-
+
- {badge.label}
-
-
-
- {tx.description}
-- {new Date(tx.ts).toLocaleString()} -
-
-
- - {isPositive ? '+' : ''}{tx.amount} cr -
-bal: {tx.balance_after}
-
+ {transactions.map((tx, i) => (
+
)}
+
+ ))}
+
+
+ {TX_LABELS[tx.type] || tx.type}
+
+
+
+ {tx.description &&
- );
- })}
-
-
+ {tx.description}
} ++ {new Date(tx.ts || tx.created_at || '').toLocaleString('en-GB', { day: 'numeric', month: 'short', hour: '2-digit', minute: '2-digit' })} +
+
+ + {tx.amount > 0 ? '+' : ''}{tx.amount} cr +
+{tx.balance_after} left
+
-
@@ -1777,7 +1776,7 @@ const FocusGroupSession = () => {
if (!focusGroup) {
return (
-
Focus group not found
We couldn't find the focus group you're looking for.
@@ -1794,7 +1793,7 @@ const FocusGroupSession = () => { return (
-
-
diff --git a/src/pages/Index.tsx b/src/pages/Index.tsx
index c76e8555..7def41c8 100755
--- a/src/pages/Index.tsx
+++ b/src/pages/Index.tsx
@@ -1,381 +1,519 @@
-import { Link } from 'react-router-dom';
-import { Users, MessageSquare, LayoutDashboard, Sparkles, ArrowRight, Zap, Brain, Target, BarChart3, Globe } from 'lucide-react';
-import Navigation from '@/components/Navigation';
-import Hero from '@/components/Hero';
-import FeatureCard from '@/components/FeatureCard';
+import { useState, useEffect } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import {
+ Users, MessageSquare, Sparkles, Download, ArrowRight, ArrowDown,
+ Zap, Clock, DollarSign, Globe, ChevronDown, ChevronUp,
+ CheckCircle2, Star
+} from 'lucide-react';
+import { billingApi } from '@/lib/api';
-const SectionLabel = ({ children }: { children: React.ReactNode }) => (
-
- = {
+ starter: ['50 credits', '~25 AI personas', '1 focus group run', 'Export transcripts', 'Email support'],
+ pro: ['220 credits', '~110 AI personas', '5 focus group runs', 'Bulk export', 'Priority support', 'Advanced analytics'],
+ scale: ['600 credits', '~300 AI personas', '15 focus group runs', 'Unlimited exports', 'Dedicated support', 'Custom prompts', 'API access'],
+};
+
+const FAQ_ITEMS = [
+ {
+ q: 'What is a synthetic persona?',
+ a: 'A synthetic persona is an AI-generated profile that mimics a real human respondent — complete with demographics, psychographics, attitudes, and communication style. Unlike survey panels, synthetic personas are available instantly, cost nothing per respondent, and scale to thousands.',
+ },
+ {
+ q: 'How is this different from a real focus group?',
+ a: 'Traditional focus groups take 2–4 weeks to recruit, cost $5,000–$20,000, and max out at 12 participants. Cohorta generates your panel in minutes, runs sessions 24/7, and lets you test dozens of segments in parallel — all for the cost of a SaaS subscription.',
+ },
+ {
+ q: 'How accurate are the AI personas?',
+ a: 'Our two-stage generation pipeline builds each persona from a detailed audience brief, creating internally consistent profiles with demographic context, psychographic depth, and realistic response patterns. Results are directionally accurate for concept testing, message testing, and exploratory research.',
+ },
+ {
+ q: 'Is my research data secure?',
+ a: "All data is encrypted in transit (TLS 1.3) and at rest. Each user's personas and sessions are fully isolated. We do not use your research data to train AI models. Infrastructure is hosted on EU servers by AImpress LTD.",
+ },
+ {
+ q: 'How does the credit system work?',
+ a: 'Creating a persona costs 2 credits. Running a full focus group session costs 40 credits. You get 10 free trial credits on signup. Purchase credit packs as needed — credits never expire.',
+ },
+ {
+ q: 'Can I export the results?',
+ a: 'Yes. Download full discussion transcripts as Markdown, export personas as CSV, and generate structured discussion guides. Pro and Scale plans include bulk export.',
+ },
+];
+
+// ──────────────────────────────────────────────
+// FAQ accordion item
+// ──────────────────────────────────────────────
+
+function FAQItem({ q, a }: { q: string; a: string }) {
+ const [open, setOpen] = useState(false);
return (
-
+ {label && (
+
);
-const StepCard = ({ step, title, description }: { step: string; title: string; description: string }) => (
-
+ {label}
+
+ )}
+
-
-);
+interface CreditPack {
+ id: string;
+ name: string;
+ price_usd: number;
+ credits: number;
+ popular?: boolean;
+}
-const LogoMark = () => (
-
-);
+const DEFAULT_PACKS: CreditPack[] = [
+ { id: 'starter', name: 'Starter', price_usd: 49, credits: 50 },
+ { id: 'pro', name: 'Pro', price_usd: 199, credits: 220, popular: true },
+ { id: 'scale', name: 'Scale', price_usd: 499, credits: 600 },
+];
-const Index = () => {
+const PACK_FEATURES: Record
- {step}
-
- {title}
-{description}
-
-
-
+export default function Index() {
+ const navigate = useNavigate();
+ const [packs, setPacks] = useState(DEFAULT_PACKS);
+
+ useEffect(() => {
+ billingApi.getBalance()
+ .then(r => {
+ const apiPacks: CreditPack[] = (r.data.credit_packs || []).map((p: any) => ({
+ ...p,
+ popular: p.id === 'pro',
+ }));
+ if (apiPacks.length >= 2) setPacks(apiPacks);
+ })
+ .catch(() => {});
+ }, []);
+
+ return (
+
setOpen(v => !v)}
+ >
+
+ );
+}
-
+
+ {open && (
+ {q}
+ {open + ?
+
+ )}
+ {a}
+
+
+ {/* ── 1. HERO ── */}
+
+
+
+
+
+ {/* Outline hero text */}
-
-
-
- Why Cohorta?
-
+ className="absolute inset-x-0 flex items-center justify-center select-none pointer-events-none"
+ style={{ top: '50%', transform: 'translateY(-50%)' }}
+ >
+
+ COHORTA
+
+ - Everything you need for{' '} - - better research - -
-- Our platform combines advanced AI with intuitive design to help researchers - gain deeper insights faster than traditional methods. -
-
-
-
-
+
-
- {/* How It Works */}
-
+
+
+
+
+
+ Generate.
Moderate.
Decide.
+
+
+
-
- Simple Process
-
-
- - From idea to insight in{' '} - - minutes - -
-- Three simple steps to gather valuable insights from synthetic personas. -
-
- {/* Connector line */}
-
-
-
-
- {
- (e.currentTarget as HTMLElement).style.boxShadow = '0 0 48px hsl(188 91% 44% / 0.5)';
- (e.currentTarget as HTMLElement).style.transform = 'translateY(-2px)';
- }}
- onMouseLeave={e => {
- (e.currentTarget as HTMLElement).style.boxShadow = '0 0 28px hsl(188 91% 44% / 0.3)';
- (e.currentTarget as HTMLElement).style.transform = 'translateY(0)';
- }}
+ {/* Copy + CTA */}
+
-
+
+ {/* ── 2. STATS TRIPLET ── */}
+
+
+
+ {/* ── 3. ORANGE BAND — FEATURES ── */}
+
+
+
+ {/* ── 4. HOW IT WORKS ── */}
+
+
+
-
- {/* CTA Banner */}
- + Skip recruiting. Run{' '} + synthetic focus groups{' '} + in minutes — at any scale. +
+
+
+
+ Log in
+ No credit card required • 10 free credits on signup
-
+
+
+
+ {[
+ { icon: Clock, stat: '10×', label: 'FASTER', sub: 'Insights in hours, not weeks' },
+ { icon: DollarSign, stat: '99%', label: 'CHEAPER', sub: 'No recruiter, incentives, or no-shows' },
+ { icon: Globe, stat: '24/7', label: 'SCALE', sub: 'Run 50 sessions in parallel' },
+ ].map(({ icon: Icon, stat, label, sub }) => (
+
+
+
+ ))}
+
+
+ {stat}
+ {label}
+ {sub}
+
+
+
+
+ + Built for product, marketing & UX researchers +
++ Everything you need to generate insight — without recruiting a single real participant. +
+
+ {[
+ { icon: Users, title: 'AI Personas', desc: 'Two-stage generation from one brief. Demographic + psychographic depth in minutes.' },
+ { icon: MessageSquare, title: 'Focus Groups', desc: 'AI-moderated sessions — autonomous or manual. Real-time chat with your synthetic panel.' },
+ { icon: Sparkles, title: 'Theme Extraction', desc: 'Live key themes extracted per session. See patterns emerge as your panel speaks.' },
+ { icon: Download, title: 'Bulk Export', desc: 'Markdown discussion guides, CSV transcripts, full persona profiles — ready to share.' },
+ ].map(({ icon: Icon, title, desc }) => (
+
+
+
+ ))}
+
+
+ {title}
+{desc}
+
+
+
+
+
+
+
+ + From brief to insight in three steps +
+
+ {[
+ {
+ num: '01', title: 'Write a brief',
+ desc: 'Describe your target audience — age range, lifestyle, attitudes, geography. One paragraph is enough.',
+ },
+ {
+ num: '02', title: 'Generate your panel',
+ desc: 'Cohorta builds 5–50 rich synthetic personas from your brief in under 2 minutes. Review and adjust before proceeding.',
+ },
+ {
+ num: '03', title: 'Run your session',
+ desc: 'Launch an AI-moderated focus group — autonomous or manual mode. Export themes and transcripts when done.',
+ },
+ ].map(({ num, title, desc }) => (
+
+
+
+ ))}
+
+ {num}
+
+ {title}
+{desc}
+
+