Upload folder using huggingface_hub

App.tsx

@@ -0,0 +1,79 @@
+
+import React, { useState } from 'react';
+import Navbar from './components/Navbar';
+import Hero from './components/Hero';
+import TrustedBy from './components/TrustedBy';
+import ProductOverview from './components/ProductOverview';
+import InteractiveDemo from './components/InteractiveDemo';
+import UseCases from './components/UseCases';
+import HowItWorks from './components/HowItWorks';
+import Accuracy from './components/Accuracy';
+import Documentation from './components/Documentation';
+import FAQ from './components/FAQ';
+import Footer from './components/Footer';
+import SimulationPage from './components/SimulationPage';
+import ConversationPage from './components/ConversationPage';
+import ChatPage from './components/ChatPage';
+
+function App() {
+  const [currentView, setCurrentView] = useState<'landing' | 'simulation' | 'conversation' | 'chat'>('landing');
+
+  const startSimulation = () => {
+    setCurrentView('simulation');
+    window.scrollTo(0,0);
+  };
+
+  const goBackToLanding = () => {
+    setCurrentView('landing');
+  };
+
+  const openConversation = () => {
+    setCurrentView('conversation');
+  };
+
+  const openChat = () => {
+    setCurrentView('chat');
+  };
+
+  const goBackToSimulation = () => {
+    setCurrentView('simulation');
+  };
+
+  if (currentView === 'simulation') {
+    return (
+      <SimulationPage 
+        onBack={goBackToLanding} 
+        onOpenConversation={openConversation}
+        onOpenChat={openChat}
+      />
+    );
+  }
+
+  if (currentView === 'conversation') {
+    return <ConversationPage onBack={goBackToSimulation} />;
+  }
+
+  if (currentView === 'chat') {
+    return <ChatPage onBack={goBackToSimulation} />;
+  }
+
+  return (
+    <div className="bg-black min-h-screen text-white selection:bg-teal-500/30">
+      <Navbar onStart={startSimulation} />
+      <main>
+        <Hero onStart={startSimulation} />
+        <TrustedBy />
+        <ProductOverview />
+        <InteractiveDemo />
+        <UseCases />
+        <HowItWorks />
+        <Accuracy />
+        <Documentation />
+        <FAQ />
+      </main>
+      <Footer />
+    </div>
+  );
+}
+
+export default App;

Dockerfile

@@ -0,0 +1,15 @@
+FROM node:20-slim AS build
+WORKDIR /app
+COPY package*.json ./
+RUN npm install
+COPY . .
+RUN npm run build
+
+FROM node:20-slim
+WORKDIR /app
+COPY --from=build /app/dist ./dist
+COPY --from=build /app/package*.json ./
+RUN npm install --only=production
+COPY server.js ./
+EXPOSE 7860
+CMD ["node", "server.js"]

README.md

@@ -1,10 +1,29 @@
 ---
 title: UserSyncInterface
-emoji: 🐨
-colorFrom: red
-colorTo: indigo
-sdk: static
-pinned: false
+emoji: 🔄
+colorFrom: blue
+colorTo: blue
+sdk: docker
+app_port: 7860
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+<div align="center">
+<img width="1200" height="475" alt="GHBanner" src="https://github.com/user-attachments/assets/0aa67016-6eaf-458a-adb2-6e31a0763ed6" />
+</div>
+
+# Run and deploy your AI Studio app
+
+This contains everything you need to run your app locally.
+
+View your app in AI Studio: https://ai.studio/apps/drive/1uBpK_suSmvNgTEgSyU7qMenb62ZRrQwX
+
+## Run Locally
+
+**Prerequisites:**  Node.js
+
+
+1. Install dependencies:
+   `npm install`
+2. Set the `GEMINI_API_KEY` in [.env.local](.env.local) to your Gemini API key
+3. Run the app:
+   `npm run dev`

components/Accuracy.tsx

@@ -0,0 +1,86 @@
+import React from 'react';
+import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer, Cell } from 'recharts';
+
+const data = [
+  { name: 'SyncUsers', score: 82, color: '#ffffff' }, // White
+  { name: 'Claude 3.7 Sonnet', score: 64, color: '#4b5563' }, // Gray-600
+  { name: 'Gemini 1.5 pro', score: 63, color: '#4b5563' },
+  { name: 'GPT-4o', score: 60, color: '#4b5563' },
+  { name: 'GPT-3.5 Turbo', score: 54, color: '#4b5563' },
+];
+
+const Accuracy: React.FC = () => {
+  return (
+    <section id="accuracy" className="py-24 bg-black">
+      <div className="max-w-7xl mx-auto px-6 grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
+        <div>
+           <div className="inline-block px-4 py-1.5 rounded-full border border-gray-700 text-sm text-gray-300 mb-8">Accuracy</div>
+           <h2 className="text-3xl md:text-5xl font-semibold leading-tight mb-8">
+             SyncUsers is <span className="text-white">30% more accurate</span> at predicting engagement than standard LLMs.
+           </h2>
+           
+           <div className="bg-gray-900/30 border border-gray-800 rounded-2xl p-6 md:p-8">
+             <h4 className="text-gray-400 mb-6">Success rate at picking winners from pairs of LinkedIn posts</h4>
+             <div className="h-[300px] w-full">
+               <ResponsiveContainer width="100%" height="100%">
+                 <BarChart data={data} layout="vertical" margin={{ left: 0, right: 40 }}>
+                   <XAxis type="number" hide />
+                   <YAxis 
+                     dataKey="name" 
+                     type="category" 
+                     width={150} 
+                     tick={{ fill: '#9ca3af', fontSize: 12 }} 
+                     axisLine={false}
+                     tickLine={false}
+                   />
+                   <Tooltip 
+                     cursor={{ fill: 'transparent' }}
+                     contentStyle={{ backgroundColor: '#111', border: '1px solid #333' }}
+                   />
+                   <Bar dataKey="score" radius={[0, 4, 4, 0]} barSize={32}>
+                     {data.map((entry, index) => (
+                       <Cell key={`cell-${index}`} fill={entry.name === 'SyncUsers' ? 'url(#gradient)' : '#374151'} />
+                     ))}
+                   </Bar>
+                 </BarChart>
+               </ResponsiveContainer>
+               {/* Def for gradient */}
+               <svg style={{ height: 0 }}>
+                 <defs>
+                   <linearGradient id="gradient" x1="0" y1="0" x2="1" y2="0">
+                     <stop offset="0%" stopColor="#e5e7eb" />
+                     <stop offset="100%" stopColor="#ffffff" />
+                   </linearGradient>
+                 </defs>
+               </svg>
+             </div>
+             {/* Custom Labels overlay for scores since Recharts labels are tricky with layout vertical sometimes */}
+             <div className="hidden"> 
+                {/* Placeholder for accessibility */}
+             </div>
+           </div>
+        </div>
+
+        {/* Right 3D Visual */}
+        <div className="relative h-[600px] flex items-end justify-center perspective-1000">
+             {/* Abstract 3D Bar representation */}
+             <div className="relative w-40 h-80 bg-teal-800 transform rotate-y-12 shadow-2xl translate-x-10 translate-y-10 z-10 opacity-90">
+                <div className="absolute top-0 left-0 w-full h-10 bg-teal-400 transform -skew-x-[40deg] origin-top -translate-y-10"></div>
+                <div className="absolute top-0 left-0 h-full w-10 bg-teal-900 transform skew-y-[50deg] origin-left -translate-x-10"></div>
+             </div>
+             
+             <div className="relative w-24 h-40 bg-blue-900 transform rotate-y-12 shadow-xl -translate-x-10 translate-y-20 opacity-70">
+                <div className="absolute top-0 left-0 w-full h-8 bg-blue-500 transform -skew-x-[40deg] origin-top -translate-y-8"></div>
+                <div className="absolute top-0 left-0 h-full w-8 bg-blue-950 transform skew-y-[50deg] origin-left -translate-x-8"></div>
+             </div>
+
+             <div className="absolute top-20 right-20 text-9xl font-bold text-gray-800 opacity-20 select-none">
+               Λ
+             </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default Accuracy;

components/ChatPage.tsx

@@ -0,0 +1,255 @@
+
+import React, { useState, useRef } from 'react';
+import { X, ClipboardList, Linkedin, Instagram, Mail, Layout, Edit3, MonitorPlay, Lightbulb, Image, Plus, Sparkles, Zap, AlertCircle, Video, Megaphone, Link as LinkIcon, Loader2, RefreshCw } from 'lucide-react';
+import { GradioService } from '../services/gradioService';
+
+// --- Types ---
+interface ChatPageProps {
+  onBack: () => void;
+}
+
+// --- Sub-components (Modular Structure) ---
+
+const ChatButton: React.FC<{ label: string; primary?: boolean; icon?: React.ReactNode; onClick?: () => void; className?: string }> = ({ label, primary, icon, onClick, className = "" }) => (
+  <button 
+    onClick={onClick}
+    className={`flex items-center gap-2 px-4 py-2 rounded-lg text-xs md:text-sm font-medium transition-all duration-200 whitespace-nowrap
+      ${primary 
+        ? 'bg-white text-black hover:bg-gray-200 shadow-[0_0_15px_rgba(255,255,255,0.2)]' 
+        : 'bg-gray-900 border border-gray-800 text-gray-300 hover:bg-gray-800 hover:text-white hover:border-gray-600'
+      } ${className}`}
+  >
+    {icon}
+    {primary && <Zap size={14} className="fill-black" />}
+    {label}
+  </button>
+);
+
+const CategoryCard: React.FC<{ title: string; options: { label: string; icon: React.ReactNode }[] }> = ({ title, options }) => (
+  <div className="flex flex-col gap-3">
+    <h3 className="text-[10px] font-bold text-gray-500 uppercase tracking-widest mb-2 ml-1">{title}</h3>
+    <div className="space-y-1">
+      {options.map((option) => (
+        <div key={option.label} className="group flex items-center gap-3 p-3 rounded-xl hover:bg-gray-900/80 cursor-pointer border border-transparent hover:border-gray-800 transition-all duration-200">
+          <div className="text-gray-500 group-hover:text-white transition-colors w-5 flex justify-center">
+            {option.icon}
+          </div>
+          <span className="text-sm font-medium text-gray-400 group-hover:text-gray-200">{option.label}</span>
+        </div>
+      ))}
+    </div>
+  </div>
+);
+
+const ChatInput: React.FC<{ onSimulate: (msg: string) => void; onHelpMeCraft: (msg: string) => void; isSimulating: boolean }> = ({ onSimulate, onHelpMeCraft, isSimulating }) => {
+  const [message, setMessage] = useState('');
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const handleUploadClick = () => {
+    fileInputRef.current?.click();
+  };
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (file) {
+      console.log("Selected file:", file.name);
+      // In a real app, you'd handle the upload here
+    }
+  };
+
+  return (
+    <div className="border-t border-gray-800 pt-6 mt-4 bg-[#0a0a0a] px-6 pb-8 md:pb-10 absolute bottom-0 left-0 right-0 z-20 shadow-[0_-20px_50px_rgba(0,0,0,0.8)]">
+      <div className="max-w-5xl mx-auto space-y-4">
+        <textarea
+          className="w-full h-24 bg-black border border-gray-800 text-gray-200 placeholder-gray-600 p-4 rounded-2xl resize-none focus:outline-none focus:border-gray-600 focus:ring-1 focus:ring-gray-600 transition-all text-sm leading-relaxed"
+          placeholder="Paste your website link here"
+          value={message}
+          onChange={(e) => setMessage(e.target.value)}
+        />
+        <div className="flex flex-wrap justify-between items-start gap-4">
+          <div className="flex gap-2 md:gap-3 flex-wrap">
+            <div className="flex flex-col gap-2">
+                <ChatButton label="Website Link for UX Testing" icon={<LinkIcon size={14} />} />
+            </div>
+            <input 
+              type="file" 
+              ref={fileInputRef} 
+              onChange={handleFileChange} 
+              className="hidden" 
+              accept="image/*"
+            />
+            <ChatButton 
+              label="Upload Images" 
+              icon={<Image size={14} />} 
+              className="h-fit" 
+              onClick={handleUploadClick}
+            />
+          </div>
+          <div className="flex gap-3 items-center mt-auto">
+             <button 
+               onClick={() => onHelpMeCraft(message)}
+               className="hidden md:flex text-xs text-gray-500 hover:text-white transition-colors items-center gap-1 mr-2"
+             >
+                Help Me Craft <Sparkles size={12} />
+             </button>
+            <ChatButton 
+              label={isSimulating ? "Simulating..." : "Simulate"} 
+              primary 
+              onClick={() => onSimulate(message)} 
+              icon={isSimulating ? <Loader2 size={14} className="animate-spin" /> : undefined}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+// --- Main Page Component ---
+
+const ChatPage: React.FC<ChatPageProps> = ({ onBack }) => {
+  const [showNotification, setShowNotification] = useState(false);
+  const [isSimulating, setIsSimulating] = useState(false);
+  const [simulationResult, setSimulationResult] = useState<string | null>(null);
+
+  const handleSimulate = (msg: string) => {
+    setIsSimulating(true);
+    setShowNotification(true);
+    
+    // Simulate API call
+    setTimeout(() => {
+      setIsSimulating(false);
+      setSimulationResult("Please wait, the results will show here. Click Refresh to gather results from the API.");
+    }, 2000);
+  };
+
+  const handleRefresh = async () => {
+    setIsSimulating(true);
+    try {
+      // In a real scenario, we would poll the Gradio API for results
+      // result = await GradioService.simulate(...)
+      setTimeout(() => {
+        setIsSimulating(false);
+        setSimulationResult("Final Simulation Results: The content resonated well with 85% of the target audience. Key feedback: 'Clearer value proposition needed in the header'.");
+      }, 1500);
+    } catch (error) {
+      setIsSimulating(false);
+    }
+  };
+
+  const handleHelpMeCraft = async (msg: string) => {
+    const crafted = await GradioService.helpMeCraft(msg);
+    alert("Help Me Craft suggestion: " + crafted);
+  };
+
+  const categories = {
+    'Survey': [
+      { label: 'Survey', icon: <ClipboardList size={18} /> }
+    ],
+    'Marketing Content': [
+      { label: 'Article', icon: <Edit3 size={18} /> },
+      { label: 'Website Link', icon: <Layout size={18} /> },
+      { label: 'Advertisement', icon: <Megaphone size={18} /> }
+    ],
+    'Social Media Posts': [
+      { label: 'LinkedIn Post', icon: <Linkedin size={18} /> },
+      { label: 'Instagram Post', icon: <Instagram size={18} /> },
+      { label: 'X Post', icon: <X size={18} /> },
+      { label: 'TikTok Script', icon: <Video size={18} /> }
+    ],
+    'Communication': [
+      { label: 'Email Subject Line', icon: <Mail size={18} /> },
+      { label: 'Email', icon: <Mail size={18} /> }
+    ],
+    'Product': [
+      { label: 'Product Proposition', icon: <Lightbulb size={18} /> }
+    ]
+  };
+
+  return (
+    <div className="fixed inset-0 z-50 bg-[#050505] text-white flex flex-col animate-in fade-in duration-300">
+      
+      {/* Header / Nav */}
+      <div className="flex items-center justify-between px-6 py-4 md:px-8 md:py-6 border-b border-gray-800/50 bg-[#050505] z-10 relative">
+         <div className="flex items-center gap-3">
+            <div className="w-8 h-8 flex items-center justify-center bg-gray-800 rounded-lg text-white font-bold">Λ</div>
+            <h2 className="text-xl font-medium tracking-tight">New Simulation</h2>
+         </div>
+         <button onClick={onBack} className="p-2 text-gray-500 hover:text-white hover:bg-gray-900 rounded-full transition-colors">
+            <X size={24} />
+         </button>
+      </div>
+
+      {/* Notification Banner */}
+      {showNotification && (
+        <div className="absolute top-24 left-1/2 -translate-x-1/2 z-50 w-[90%] max-w-lg animate-in slide-in-from-top-4 fade-in duration-500">
+            <div className="bg-[#0f1f15] backdrop-blur-xl border border-green-500/20 text-green-100 px-6 py-5 rounded-2xl shadow-2xl flex items-start gap-4 ring-1 ring-green-500/10">
+              <div className="p-1.5 bg-green-500/20 rounded-full mt-0.5 shrink-0">
+                <AlertCircle size={18} className="text-green-400" />
+              </div>
+              <div className="flex-1">
+                <h4 className="font-semibold text-green-300 mb-1">Simulation Initiated</h4>
+                <p className="text-sm text-green-200/70 leading-relaxed">
+                  The simulation has started. This process can take up to <strong className="text-white">30 minutes</strong>. The results will show here when ready.
+                </p>
+                {simulationResult && (
+                  <div className="mt-4 p-3 bg-black/40 rounded-xl border border-green-500/20 text-xs text-green-200 flex flex-col gap-3">
+                    <p>{simulationResult}</p>
+                    <button 
+                      onClick={handleRefresh}
+                      disabled={isSimulating}
+                      className="flex items-center gap-2 px-3 py-1.5 bg-green-600/20 hover:bg-green-600/40 rounded-lg self-end transition-colors disabled:opacity-50"
+                    >
+                      <RefreshCw size={14} className={isSimulating ? "animate-spin" : ""} />
+                      Gather Results
+                    </button>
+                  </div>
+                )}
+              </div>
+              <button onClick={() => setShowNotification(false)} className="text-green-400 hover:text-white ml-auto p-1">
+                <X size={16} />
+              </button>
+            </div>
+        </div>
+      )}
+
+      {/* Scrollable Content Area */}
+      <div className="flex-1 overflow-y-auto custom-scrollbar p-6 md:p-8 pb-80"> {/* Large bottom padding for fixed input */}
+        <div className="max-w-5xl mx-auto">
+          <h1 className="text-2xl md:text-3xl font-semibold text-center mb-12 mt-4 md:mt-8">What would you like to simulate?</h1>
+          
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-12">
+             {/* Column 1 */}
+             <div className="space-y-12">
+               <CategoryCard title="Survey" options={categories['Survey']} />
+               <CategoryCard title="Marketing Content" options={categories['Marketing Content']} />
+             </div>
+
+             {/* Column 2 */}
+             <div className="space-y-12">
+               <CategoryCard title="Social Media Posts" options={categories['Social Media Posts']} />
+             </div>
+
+             {/* Column 3 */}
+             <div className="space-y-12">
+                <CategoryCard title="Communication" options={categories['Communication']} />
+                <CategoryCard title="Product" options={categories['Product']} />
+             </div>
+          </div>
+
+          <div className="flex justify-center mt-16 mb-8">
+             <button className="flex items-center gap-2 text-gray-500 hover:text-gray-300 transition-colors text-sm px-4 py-2 hover:bg-gray-900 rounded-lg">
+                <Plus size={16} />
+                Request a new context
+             </button>
+          </div>
+        </div>
+      </div>
+
+      {/* Input Footer */}
+      <ChatInput onSimulate={handleSimulate} onHelpMeCraft={handleHelpMeCraft} isSimulating={isSimulating} />
+    </div>
+  );
+};
+
+export default ChatPage;

components/ConversationPage.tsx

@@ -0,0 +1,115 @@
+
+import React, { useState } from 'react';
+import { X, ClipboardList, Linkedin, Instagram, Mail, Layout, Edit3, Type, MonitorPlay, Lightbulb, Image, Plus } from 'lucide-react';
+import Button from './ui/Button';
+
+interface ConversationPageProps {
+  onBack: () => void;
+}
+
+const ConversationPage: React.FC<ConversationPageProps> = ({ onBack }) => {
+  const [activeTab, setActiveTab] = useState('Website Content');
+
+  return (
+    <div className="fixed inset-0 z-50 bg-black flex items-center justify-center p-6 animate-in fade-in duration-300">
+      {/* Background Mesh (Subtle) */}
+      <div className="absolute inset-0 pointer-events-none opacity-20">
+         <div className="absolute top-10 left-10 w-64 h-64 bg-purple-900/30 rounded-full blur-[100px]" />
+         <div className="absolute bottom-10 right-10 w-96 h-96 bg-teal-900/20 rounded-full blur-[120px]" />
+      </div>
+
+      <div className="bg-[#050505] border border-gray-800 w-full max-w-5xl rounded-3xl shadow-2xl flex flex-col overflow-hidden max-h-[90vh] relative z-10">
+         
+         {/* Close Button */}
+         <button onClick={onBack} className="absolute top-6 right-6 text-gray-500 hover:text-white transition-colors">
+            <X size={24} />
+         </button>
+
+         <div className="p-10 pb-0">
+            <h2 className="text-2xl font-semibold text-center mb-8">What would you like to simulate?</h2>
+            
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-12 gap-y-8 max-w-4xl mx-auto">
+               
+               {/* Column 1 */}
+               <div className="space-y-6">
+                  <h3 className="text-xs font-bold text-gray-500 uppercase tracking-widest mb-4">Survey</h3>
+                  <OptionItem icon={<ClipboardList />} label="Survey" />
+
+                  <h3 className="text-xs font-bold text-gray-500 uppercase tracking-widest mt-8 mb-4">Marketing Content</h3>
+                  <OptionItem icon={<Edit3 />} label="Article" />
+                  <OptionItem icon={<Layout />} label="Website Content" active />
+                  <OptionItem icon={<MonitorPlay />} label="Advertisement" />
+               </div>
+
+               {/* Column 2 */}
+               <div className="space-y-6">
+                  <h3 className="text-xs font-bold text-gray-500 uppercase tracking-widest mb-4">Social Media Posts</h3>
+                  <OptionItem icon={<Linkedin />} label="LinkedIn Post" />
+                  <OptionItem icon={<Instagram />} label="Instagram Post" />
+                  <OptionItem icon={<X className="text-white" />} label="X Post" />
+                  <OptionItem icon={<MonitorPlay />} label="TikTok Script" />
+               </div>
+
+               {/* Column 3 */}
+               <div className="space-y-6">
+                  <h3 className="text-xs font-bold text-gray-500 uppercase tracking-widest mb-4">Communication</h3>
+                  <OptionItem icon={<Mail />} label="Email Subject Line" />
+                  <OptionItem icon={<Mail />} label="Email" />
+
+                  <h3 className="text-xs font-bold text-gray-500 uppercase tracking-widest mt-8 mb-4">Product</h3>
+                  <OptionItem icon={<Lightbulb />} label="Product Proposition" />
+               </div>
+
+            </div>
+         </div>
+
+         {/* Bottom Input Area */}
+         <div className="mt-8 p-6 bg-gray-900/30 border-t border-gray-800 flex-1 flex flex-col justify-end">
+            <div className="max-w-4xl mx-auto w-full">
+               <div className="bg-black border border-gray-700 rounded-2xl p-4 shadow-lg">
+                  <textarea 
+                    placeholder="Upload an image of your website, describe it, or write your website content here..."
+                    className="w-full bg-transparent text-gray-300 placeholder-gray-600 resize-none focus:outline-none min-h-[80px]"
+                  />
+                  <div className="flex justify-between items-center mt-4">
+                     <div className="flex gap-3">
+                        <Button variant="outline" size="sm" className="gap-2 text-xs border-gray-800 bg-gray-900 text-gray-300">
+                           <Layout size={14} /> Website Content
+                        </Button>
+                        <Button variant="outline" size="sm" className="gap-2 text-xs border-gray-800 bg-gray-900 text-gray-300">
+                           <Image size={14} /> Upload Images
+                        </Button>
+                     </div>
+                     <div className="flex gap-3">
+                        <Button variant="ghost" size="sm" className="text-xs text-teal-400 hover:text-teal-300">
+                           Help Me Craft <span className="ml-1">✨</span>
+                        </Button>
+                        <Button variant="primary" size="sm" className="gap-2 bg-white text-black hover:bg-gray-200">
+                           Simulate <span className="ml-1">⚡</span>
+                        </Button>
+                     </div>
+                  </div>
+               </div>
+               
+               <div className="flex justify-center mt-4">
+                 <button className="text-gray-500 text-sm hover:text-white flex items-center gap-2">
+                   <Plus size={14} /> Request a new context
+                 </button>
+               </div>
+            </div>
+         </div>
+      </div>
+    </div>
+  );
+};
+
+const OptionItem: React.FC<{ icon: React.ReactNode, label: string, active?: boolean }> = ({ icon, label, active }) => (
+  <div className={`flex items-center gap-4 group cursor-pointer p-2 rounded-lg transition-colors ${active ? 'bg-gray-800' : 'hover:bg-gray-900'}`}>
+     <div className="w-8 h-8 flex items-center justify-center text-gray-400 group-hover:text-white transition-colors">
+        {icon}
+     </div>
+     <span className={`text-sm font-medium ${active ? 'text-white' : 'text-gray-400 group-hover:text-white'}`}>{label}</span>
+  </div>
+);
+
+export default ConversationPage;

components/Documentation.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import { Book, Code, Terminal, Zap } from 'lucide-react';
+import Button from './ui/Button';
+
+const Documentation: React.FC = () => {
+  return (
+    <section id="docs" className="py-24 bg-black border-t border-gray-900">
+      <div className="max-w-7xl mx-auto px-6">
+        <div className="flex flex-col md:flex-row justify-between items-end mb-12 gap-6">
+          <div>
+            <div className="inline-block px-4 py-1.5 rounded-full border border-gray-700 text-sm text-gray-300 mb-6">
+              Developers First
+            </div>
+            <h2 className="text-3xl md:text-5xl font-semibold mb-4">
+              Build with our API
+            </h2>
+            <p className="text-gray-400 text-lg max-w-xl">
+              Integrate user simulation directly into your CI/CD pipeline or product workflow. 
+              Get started for free.
+            </p>
+          </div>
+          <Button variant="outline">View Full Documentation</Button>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+            {/* Code Snippet Card */}
+            <div className="bg-gray-900/30 border border-gray-800 rounded-2xl p-6 md:p-8 font-mono text-sm overflow-hidden relative group">
+                <div className="absolute top-4 right-4 flex gap-2">
+                    <div className="w-3 h-3 rounded-full bg-red-500/20 border border-red-500/50"></div>
+                    <div className="w-3 h-3 rounded-full bg-yellow-500/20 border border-yellow-500/50"></div>
+                    <div className="w-3 h-3 rounded-full bg-green-500/20 border border-green-500/50"></div>
+                </div>
+                <div className="text-gray-500 mb-2"># Install the SDK</div>
+                <div className="text-teal-400 mb-6">$ npm install @aux/sdk</div>
+                
+                <div className="text-gray-500 mb-2"># Run a simulation</div>
+                <div className="text-purple-300">import</div> <div className="text-white inline">{`{ AuxClient }`}</div> <div className="text-purple-300 inline">from</div> <div className="text-green-300 inline">'@aux/sdk'</div>;
+                <br/>
+                <br/>
+                <div className="text-purple-300">const</div> <div className="text-white inline">client</div> = <div className="text-purple-300 inline">new</div> <div className="text-yellow-300 inline">AuxClient</div>({`{ apiKey: '...' }`});
+                <br/>
+                <br/>
+                <div className="text-purple-300">const</div> <div className="text-white inline">result</div> = <div className="text-purple-300 inline">await</div> client.simulation.<div className="text-blue-300 inline">create</div>({`{`}
+                <br/>
+                &nbsp;&nbsp;audience: <div className="text-green-300 inline">'tech-founders'</div>,
+                <br/>
+                &nbsp;&nbsp;content: <div className="text-green-300 inline">'https://myapp.com/launch'</div>
+                <br/>
+                {`}`});
+            </div>
+
+            {/* Docs Links Grid */}
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                <div className="bg-gray-900/20 border border-gray-800 p-6 rounded-xl hover:bg-gray-900/40 transition-colors cursor-pointer group">
+                    <Book className="w-8 h-8 text-teal-500 mb-4 group-hover:scale-110 transition-transform" />
+                    <h3 className="text-white font-medium mb-2">Quick Start Guide</h3>
+                    <p className="text-gray-500 text-sm">Deploy your first simulation in under 5 minutes.</p>
+                </div>
+                <div className="bg-gray-900/20 border border-gray-800 p-6 rounded-xl hover:bg-gray-900/40 transition-colors cursor-pointer group">
+                    <Terminal className="w-8 h-8 text-purple-500 mb-4 group-hover:scale-110 transition-transform" />
+                    <h3 className="text-white font-medium mb-2">API Reference</h3>
+                    <p className="text-gray-500 text-sm">Detailed endpoints, parameters, and response types.</p>
+                </div>
+                <div className="bg-gray-900/20 border border-gray-800 p-6 rounded-xl hover:bg-gray-900/40 transition-colors cursor-pointer group">
+                    <Code className="w-8 h-8 text-blue-500 mb-4 group-hover:scale-110 transition-transform" />
+                    <h3 className="text-white font-medium mb-2">SDKs & Libraries</h3>
+                    <p className="text-gray-500 text-sm">Official libraries for Node.js, Python, and Go.</p>
+                </div>
+                <div className="bg-gray-900/20 border border-gray-800 p-6 rounded-xl hover:bg-gray-900/40 transition-colors cursor-pointer group">
+                    <Zap className="w-8 h-8 text-yellow-500 mb-4 group-hover:scale-110 transition-transform" />
+                    <h3 className="text-white font-medium mb-2">Webhooks</h3>
+                    <p className="text-gray-500 text-sm">Real-time event notifications for your integrations.</p>
+                </div>
+            </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default Documentation;

components/FAQ.tsx

@@ -0,0 +1,54 @@
+import React, { useState } from 'react';
+import { FAQS } from '../constants';
+import { ChevronDown, ChevronUp } from 'lucide-react';
+
+const FAQ: React.FC = () => {
+  const [openIndex, setOpenIndex] = useState<number | null>(0);
+
+  const toggleFAQ = (index: number) => {
+    setOpenIndex(openIndex === index ? null : index);
+  };
+
+  return (
+    <section className="py-24 bg-black">
+      <div className="max-w-7xl mx-auto px-6 grid grid-cols-1 lg:grid-cols-2 gap-16">
+        <div>
+          <div className="inline-block px-4 py-1.5 rounded-full border border-gray-700 text-sm text-gray-300 mb-8">FAQ</div>
+          <h2 className="text-3xl md:text-5xl font-semibold mb-6">
+            We simulated what questions you need answering
+          </h2>
+          <p className="text-gray-400 text-lg mb-8">
+            Explore quick solutions to common questions. Need more? Feel free to contact our <u className="text-white cursor-pointer">support team</u>.
+          </p>
+        </div>
+
+        <div className="space-y-4">
+          {FAQS.map((faq, idx) => (
+            <div 
+              key={idx} 
+              className="border border-gray-800 rounded-xl overflow-hidden bg-gray-900/20"
+            >
+              <button 
+                className="w-full flex justify-between items-center p-6 text-left hover:bg-gray-900/50 transition-colors"
+                onClick={() => toggleFAQ(idx)}
+              >
+                <span className="font-medium text-lg">{faq.question}</span>
+                {openIndex === idx ? <ChevronUp className="text-gray-400" /> : <ChevronDown className="text-gray-400" />}
+              </button>
+              
+              <div 
+                className={`transition-all duration-300 ease-in-out overflow-hidden ${openIndex === idx ? 'max-h-48 opacity-100' : 'max-h-0 opacity-0'}`}
+              >
+                <div className="p-6 pt-0 text-gray-400 leading-relaxed">
+                  {faq.answer}
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default FAQ;

components/Footer.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+const Footer: React.FC = () => {
+  return (
+    <footer className="py-12 bg-black border-t border-gray-900 text-sm text-gray-500">
+      <div className="max-w-7xl mx-auto px-6 flex flex-col md:flex-row justify-between items-center gap-6">
+        <div className="flex items-center gap-2">
+            <div className="w-6 h-6 flex items-center justify-center font-bold text-white bg-gray-800 rounded">Λ</div>
+            <span className="text-white font-semibold">SyncUsers</span>
+        </div>
+        
+        <div className="flex gap-8">
+          <a href="#" className="hover:text-white transition-colors">Twitter</a>
+          <a href="#" className="hover:text-white transition-colors">LinkedIn</a>
+          <a href="#" className="hover:text-white transition-colors">Privacy</a>
+          <a href="#" className="hover:text-white transition-colors">Terms</a>
+        </div>
+
+        <div>
+          © 2024 SyncUsers Inc.
+        </div>
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;

components/Hero.tsx

@@ -0,0 +1,78 @@
+
+import React, { useState, useEffect } from 'react';
+import Button from './ui/Button';
+import RealNetworkGraph from './RealNetworkGraph';
+
+interface HeroProps {
+  onStart?: () => void;
+}
+
+const Hero: React.FC<HeroProps> = ({ onStart }) => {
+  const [currentSlide, setCurrentSlide] = useState(0);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setCurrentSlide((prev) => (prev === 0 ? 1 : 0));
+    }, 6000); 
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <section className="relative min-h-[90vh] flex flex-col items-center justify-center pt-32 pb-20 overflow-hidden">
+      {/* Background Ambience */}
+      <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[800px] h-[500px] bg-purple-900/10 rounded-full blur-[120px] pointer-events-none" />
+      
+      <div className="relative z-10 max-w-7xl mx-auto px-6 w-full grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
+        
+        {/* Left Content - Animated Transitions */}
+        <div className="space-y-8 relative h-[400px]">
+          {/* Slide 1 */}
+          <div className={`absolute top-0 left-0 w-full transition-all duration-1000 ease-in-out transform ${currentSlide === 0 ? 'opacity-100 translate-y-0' : 'opacity-0 -translate-y-10 pointer-events-none'}`}>
+             <h1 className="text-5xl md:text-7xl font-bold leading-tight">
+              User Simulation <span className="text-gray-400">API</span> for Developers
+            </h1>
+            <p className="text-xl text-gray-400 mt-6 max-w-lg">
+              Programmatically test your UX decisions. Integrate accurate user simulation into your CI/CD pipeline. Free for developers.
+            </p>
+            <div className="flex flex-wrap gap-4 mt-8">
+              <Button variant="primary" size="lg" onClick={onStart}>HF Space Demo</Button>
+              <Button variant="outline" size="lg" onClick={() => window.location.href='#docs'}>Read the Docs</Button>
+            </div>
+          </div>
+
+          {/* Slide 2 */}
+          <div className={`absolute top-0 left-0 w-full transition-all duration-1000 ease-in-out transform ${currentSlide === 1 ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10 pointer-events-none'}`}>
+            <h1 className="text-5xl md:text-7xl font-bold leading-tight">
+              Stop guessing. <span className="bg-gradient-to-r from-purple-400 to-pink-600 bg-clip-text text-transparent">Start simulating.</span>
+            </h1>
+            <p className="text-xl text-gray-400 mt-6 max-w-lg">
+              Validate features with AI-generated user societies before writing a single line of frontend code. The open standard for agentic UX testing.
+            </p>
+            <div className="flex flex-wrap gap-4 mt-8">
+              <Button variant="primary" size="lg" onClick={onStart}>Start Building</Button>
+              <Button variant="outline" size="lg" onClick={() => window.location.href='#docs'}>Documentation</Button>
+            </div>
+          </div>
+        </div>
+
+        {/* Right Visuals - Real Network Graph */}
+        <div className="relative h-[500px] w-full flex items-center justify-center">
+           <div 
+             className="w-full h-full opacity-80"
+             style={{ 
+               maskImage: 'linear-gradient(to bottom, black 0%, black 70%, transparent 100%)',
+               WebkitMaskImage: 'linear-gradient(to bottom, black 0%, black 70%, transparent 100%)'
+             }}
+           >
+              <RealNetworkGraph />
+           </div>
+           
+           {/* Overlay Elements for depth */}
+           <div className="absolute inset-0 pointer-events-none bg-gradient-to-t from-black via-transparent to-transparent"></div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default Hero;

components/HowItWorks.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import { User, Share2, Cpu, CheckCircle, Scale } from 'lucide-react';
+
+const HowItWorks: React.FC = () => {
+  const steps = [
+    { icon: <User />, label: "Persona Creation" },
+    { icon: <Share2 />, label: "Focus Group Construction" },
+    { icon: <Cpu />, label: "AI-driven Simulations" },
+    { icon: <CheckCircle />, label: "Result Generation" },
+    { icon: <Scale />, label: "Automatic A/B Testing" },
+  ];
+
+  return (
+    <section id="how-it-works" className="py-24 bg-black border-t border-gray-900">
+      <div className="max-w-7xl mx-auto px-6 text-center">
+        <div className="inline-block px-4 py-1.5 rounded-full border border-gray-700 text-sm text-gray-300 mb-8">How It Works</div>
+        <h2 className="text-3xl md:text-5xl font-semibold mb-20">From raw data to real understanding</h2>
+        
+        {/* Steps Navigation/Visual */}
+        <div className="flex flex-wrap justify-center gap-4 md:gap-8 mb-20">
+           {steps.map((step, idx) => (
+             <div key={idx} className="flex flex-col items-center gap-3 group cursor-default">
+                <div className="w-16 h-12 md:w-auto md:h-auto px-6 py-3 rounded-full border border-gray-700 bg-gray-900/50 flex items-center gap-2 text-gray-400 group-hover:text-white group-hover:border-gray-500 transition-all">
+                   {step.icon}
+                   <span className="text-sm font-medium hidden md:inline">{step.label}</span>
+                </div>
+             </div>
+           ))}
+        </div>
+
+        {/* Abstract Visualization */}
+        <div className="relative h-[400px] w-full max-w-4xl mx-auto border border-gray-800 rounded-3xl bg-black overflow-hidden flex items-center justify-center">
+             <div className="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/stardust.png')] opacity-20"></div>
+             {/* Radar/Network Graphic */}
+             <div className="relative w-96 h-96">
+                <div className="absolute inset-0 border border-blue-900/30 rounded-full animate-ping duration-[3000ms]"></div>
+                <div className="absolute inset-10 border border-blue-800/30 rounded-full"></div>
+                <div className="absolute inset-20 border border-blue-700/30 rounded-full"></div>
+                
+                {/* Connecting Lines */}
+                <svg className="absolute inset-0 w-full h-full pointer-events-none">
+                  {/* Center to Top (in) */}
+                  <line x1="50%" y1="50%" x2="50%" y2="5%" stroke="#3b82f6" strokeWidth="2" strokeOpacity="0.5" />
+                  {/* Center to Bottom Right (X) */}
+                  <line x1="50%" y1="50%" x2="85%" y2="85%" stroke="#3b82f6" strokeWidth="2" strokeOpacity="0.5" />
+                  {/* Center to Bottom Left (Globe) */}
+                  <line x1="50%" y1="50%" x2="15%" y2="85%" stroke="#3b82f6" strokeWidth="2" strokeOpacity="0.5" />
+                </svg>
+                
+                {/* Center Node */}
+                <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-16 h-16 bg-gray-900 rounded-full border-2 border-blue-500 flex items-center justify-center shadow-[0_0_30px_rgba(59,130,246,0.5)] z-10">
+                   <User className="text-white w-6 h-6" />
+                </div>
+
+                {/* Satellite Nodes */}
+                <div className="absolute top-0 left-1/2 -translate-x-1/2 w-10 h-10 bg-gray-900 border border-gray-600 rounded-full flex items-center justify-center z-10">
+                   <span className="text-xs font-bold">in</span>
+                </div>
+                <div className="absolute bottom-10 right-10 w-10 h-10 bg-gray-900 border border-gray-600 rounded-full flex items-center justify-center z-10">
+                   <span className="text-xs font-bold">X</span>
+                </div>
+                 <div className="absolute bottom-10 left-10 w-10 h-10 bg-gray-900 border border-gray-600 rounded-full flex items-center justify-center z-10">
+                   <GlobeIcon />
+                </div>
+             </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+const GlobeIcon = () => (
+  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="w-4 h-4">
+    <circle cx="12" cy="12" r="10"></circle>
+    <line x1="2" y1="12" x2="22" y2="12"></line>
+    <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path>
+  </svg>
+);
+
+export default HowItWorks;

components/InteractiveDemo.tsx

@@ -0,0 +1,374 @@
+import React, { useState, useEffect, useMemo } from 'react';
+import Button from './ui/Button';
+import { Check, Sparkles, Send, MessageSquare, X } from 'lucide-react';
+
+// --- Shared Components ---
+
+const NetworkBackground: React.FC<{ className?: string }> = ({ className = "" }) => {
+  // Static node positions for consistency in other steps
+  const nodes = [
+    { cx: "20%", cy: "20%", r: 4, fill: "#14b8a6" }, // teal
+    { cx: "50%", cy: "10%", r: 6, fill: "#a855f7" }, // purple
+    { cx: "80%", cy: "30%", r: 5, fill: "#f97316" }, // orange
+    { cx: "30%", cy: "50%", r: 7, fill: "#3b82f6" }, // blue
+    { cx: "70%", cy: "60%", r: 6, fill: "#ec4899" }, // pink
+    { cx: "10%", cy: "70%", r: 5, fill: "#ef4444" }, // red
+    { cx: "40%", cy: "80%", r: 4, fill: "#14b8a6" },
+    { cx: "90%", cy: "80%", r: 5, fill: "#8b5cf6" },
+    { cx: "60%", cy: "40%", r: 3, fill: "#eab308" },
+    { cx: "25%", cy: "90%", r: 6, fill: "#3b82f6" },
+  ];
+
+  return (
+    <div className={`absolute inset-0 overflow-hidden pointer-events-none opacity-30 ${className}`}>
+      <svg className="w-full h-full">
+        {/* Lines */}
+        <line x1="20%" y1="20%" x2="50%" y2="10%" stroke="#374151" strokeWidth="1" />
+        <line x1="50%" y1="10%" x2="80%" y2="30%" stroke="#374151" strokeWidth="1" />
+        <line x1="20%" y1="20%" x2="30%" y2="50%" stroke="#374151" strokeWidth="1" />
+        <line x1="30%" y1="50%" x2="70%" y2="60%" stroke="#374151" strokeWidth="1" />
+        <line x1="70%" y1="60%" x2="80%" y2="30%" stroke="#374151" strokeWidth="1" />
+        <line x1="30%" y1="50%" x2="10%" y2="70%" stroke="#374151" strokeWidth="1" />
+        <line x1="40%" y1="80%" x2="10%" y2="70%" stroke="#374151" strokeWidth="1" />
+        <line x1="70%" y1="60%" x2="90%" y2="80%" stroke="#374151" strokeWidth="1" />
+        <line x1="50%" y1="10%" x2="60%" y2="40%" stroke="#374151" strokeWidth="1" />
+        <line x1="25%" y1="90%" x2="40%" y2="80%" stroke="#374151" strokeWidth="1" />
+
+        {/* Nodes */}
+        {nodes.map((node, i) => (
+          <circle key={i} {...node} className="animate-pulse" style={{ animationDelay: `${i * 0.5}s` }} />
+        ))}
+      </svg>
+    </div>
+  );
+};
+
+const SectionLayout: React.FC<{
+  number: string;
+  title: string;
+  description: React.ReactNode;
+  visual: React.ReactNode;
+}> = ({ number, title, description, visual }) => {
+  return (
+    <section className="py-24 border-t border-gray-900 bg-black">
+      <div className="max-w-7xl mx-auto px-6 grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
+        {/* Text Content */}
+        <div className="order-2 lg:order-1">
+          <div className="w-12 h-12 rounded-full border border-gray-700 flex items-center justify-center mb-8 text-xl font-mono text-white">
+            {number}
+          </div>
+          <h2 className="text-4xl md:text-5xl font-semibold mb-6 text-white">{title}</h2>
+          <div className="text-xl text-gray-400 leading-relaxed max-w-lg">
+            {description}
+          </div>
+        </div>
+
+        {/* Visual Content */}
+        <div className="order-1 lg:order-2 relative h-[500px] bg-gray-900/20 border border-gray-800 rounded-3xl overflow-hidden flex items-center justify-center">
+          <div className="absolute inset-0 w-full h-full flex items-center justify-center p-0">
+            {visual}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+// --- Step 1: Generate Focus Group ---
+
+const Step1 = () => {
+  const [status, setStatus] = useState<'input' | 'creating' | 'ready'>('input');
+  const [inputValue, setInputValue] = useState("AI-focused startup founders in Europe");
+
+  const handleCreate = () => {
+    setStatus('creating');
+    setTimeout(() => {
+      setStatus('ready');
+    }, 2000);
+  };
+
+  return (
+    <SectionLayout
+      number="1"
+      title="Generate Any Focus Group"
+      description={
+        <div className="space-y-6">
+          <p>
+            Use plain english to describe your target audience, or generate a personal focus group based on your real social media interactions.
+          </p>
+          <div className="space-y-2 pt-2">
+             <p className="text-base font-medium text-gray-300">
+               Personalize your experience with your own LinkedIn network database.
+             </p>
+             <p className="text-sm text-gray-500">
+               LinkedIn and X data are going into the persona simulator.
+             </p>
+          </div>
+        </div>
+      }
+      visual={
+        <>
+           {/* Background for all phases, fully visible in 'ready' */}
+           <div className={`transition-opacity duration-1000 ${status === 'ready' ? 'opacity-100' : 'opacity-30'}`}>
+              <NetworkBackground className="opacity-100" />
+           </div>
+
+          {/* Input State */}
+          <div className={`transition-all duration-500 absolute w-full max-w-sm z-20 ${status === 'input' ? 'opacity-100 scale-100' : 'opacity-0 scale-95 pointer-events-none'}`}>
+             <div className="bg-black border border-gray-800 rounded-xl p-6 shadow-2xl">
+                <div className="flex justify-between items-center mb-6">
+                    <span className="text-gray-400 text-sm">Target Audience</span>
+                    <button className="text-gray-500 hover:text-white"><X size={16}/></button>
+                </div>
+                <h4 className="text-xl mb-4 text-center">Who would you like to simulate?</h4>
+                <div className="relative mb-6">
+                    <input 
+                      type="text" 
+                      value={inputValue}
+                      onChange={(e) => setInputValue(e.target.value)}
+                      className="w-full bg-gray-900 border border-gray-700 rounded-lg py-3 px-4 text-white focus:outline-none focus:border-teal-500"
+                    />
+                    <span className="absolute right-3 top-3.5 w-0.5 h-5 bg-teal-500 animate-blink"></span>
+                </div>
+                <Button className="w-full py-3" onClick={handleCreate}>
+                   Generate Your Focus Group <Sparkles size={16} className="ml-2" />
+                </Button>
+             </div>
+          </div>
+
+          {/* Creating State */}
+          <div className={`transition-all duration-500 absolute z-20 ${status === 'creating' ? 'opacity-100 scale-100' : 'opacity-0 scale-95 pointer-events-none'}`}>
+             <div className="bg-black/80 backdrop-blur-md border border-gray-700 rounded-full px-8 py-4 flex items-center gap-3 shadow-2xl">
+                <Sparkles className="text-teal-400 animate-pulse" />
+                <span className="text-lg font-medium">Generating Focus Group...</span>
+             </div>
+          </div>
+
+          {/* Ready State */}
+          <div className={`transition-all duration-1000 absolute inset-0 flex items-end justify-center pb-8 ${status === 'ready' ? 'opacity-100' : 'opacity-0 pointer-events-none'}`}>
+             {/* Bottom Toast Overlay */}
+             <div className="bg-black/80 backdrop-blur border border-gray-800 rounded-full pl-3 pr-6 py-2 flex items-center gap-3 shadow-2xl pointer-events-auto">
+                <div className="bg-green-500/20 rounded-full p-1">
+                    <Check className="w-4 h-4 text-green-500" />
+                </div>
+                <span className="text-sm font-medium text-white whitespace-nowrap">Your Personal Focus Group is Ready</span>
+             </div>
+             <div className="absolute bottom-2 text-center pointer-events-auto">
+                <button 
+                  onClick={() => setStatus('input')}
+                  className="text-xs text-gray-500 hover:text-white transition-colors"
+                >
+                  Start Over
+                </button>
+             </div>
+          </div>
+        </>
+      }
+    />
+  );
+};
+
+// --- Step 2: Run Experiments ---
+
+const Step2 = () => {
+  const [isSimulating, setIsSimulating] = useState(false);
+
+  const handleSimulate = () => {
+    setIsSimulating(true);
+    setTimeout(() => {
+      setIsSimulating(false);
+    }, 2500);
+  };
+
+  return (
+    <SectionLayout
+      number="2"
+      title="Run Rapid Experiments"
+      description="Execute simulations in minutes to find the optimal form of your content or idea."
+      visual={
+        <>
+          <NetworkBackground />
+          <div className="w-full max-w-sm relative z-10">
+             {/* Post Card */}
+             <div className={`bg-black border border-gray-800 rounded-xl p-6 shadow-2xl transition-all duration-500 ${isSimulating ? 'opacity-40 blur-sm scale-95' : 'opacity-100 scale-100'}`}>
+                <div className="flex items-center gap-3 mb-4">
+                  <div className="w-10 h-10 rounded-full bg-gray-700"></div>
+                  <div>
+                    <div className="w-24 h-3 bg-gray-700 rounded mb-1"></div>
+                    <div className="w-16 h-2 bg-gray-800 rounded"></div>
+                  </div>
+                </div>
+                <div className="space-y-2 mb-6">
+                  <div className="w-full h-2 bg-gray-800 rounded"></div>
+                  <div className="w-full h-2 bg-gray-800 rounded"></div>
+                  <div className="w-3/4 h-2 bg-gray-800 rounded"></div>
+                </div>
+                <div className="bg-gray-900 rounded-lg p-4 mb-4 border border-gray-800">
+                  <p className="text-gray-300 text-sm">
+                      We just secured $5.3M to build AI-native tools...
+                  </p>
+                </div>
+                <Button 
+                   className="w-full flex items-center justify-center gap-2"
+                   onClick={handleSimulate}
+                >
+                   Simulate Post <Send size={16} />
+                </Button>
+             </div>
+
+             {/* Simulating Overlay */}
+             <div className={`absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 transition-all duration-300 ${isSimulating ? 'opacity-100 scale-100' : 'opacity-0 scale-90 pointer-events-none'}`}>
+                 <div className="bg-black/90 backdrop-blur border border-gray-700 rounded-2xl p-6 shadow-2xl flex flex-col items-center gap-4 min-w-[200px]">
+                    <div className="relative">
+                      <div className="w-12 h-12 rounded-full border-2 border-gray-800 border-t-teal-500 animate-spin"></div>
+                      <Sparkles className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-teal-500 w-5 h-5" />
+                    </div>
+                    <span className="text-white font-medium">Simulating reactions...</span>
+                 </div>
+             </div>
+          </div>
+        </>
+      }
+    />
+  );
+};
+
+// --- Step 3: Get Insights ---
+
+const Step3 = () => {
+  return (
+    <SectionLayout
+      number="3"
+      title="Get Instant Insights"
+      description="Evaluate the performance of your experiment with scores, comments, and summaries."
+      visual={
+        <>
+        <NetworkBackground />
+        <div className="w-full max-w-sm space-y-4 relative z-10">
+           {/* Score Card */}
+           <div className="bg-black border border-gray-800 rounded-xl p-6 shadow-2xl hover:border-gray-600 transition-colors cursor-default group">
+              <div className="flex justify-between items-start mb-6">
+                  <div>
+                    <span className="text-xs text-gray-400 uppercase tracking-wider">Impact Score</span>
+                    <div className="text-3xl font-bold text-white mt-1">88<span className="text-base font-normal text-gray-500">/100</span></div>
+                  </div>
+                  <div className="bg-green-500/10 text-green-400 text-xs px-2 py-1 rounded border border-green-500/20">Exceptional</div>
+              </div>
+              
+              <div className="space-y-4">
+                 <div>
+                    <div className="flex justify-between text-xs text-gray-400 mb-1">
+                       <span>Attention</span>
+                       <span>80%</span>
+                    </div>
+                    <div className="h-1.5 bg-gray-800 rounded-full overflow-hidden">
+                       <div className="h-full bg-green-500 w-[80%] rounded-full group-hover:bg-green-400 transition-colors"></div>
+                    </div>
+                 </div>
+                 <div>
+                    <div className="flex justify-between text-xs text-gray-400 mb-1">
+                       <span>Relevance</span>
+                       <span>92%</span>
+                    </div>
+                    <div className="h-1.5 bg-gray-800 rounded-full overflow-hidden">
+                       <div className="h-full bg-teal-500 w-[92%] rounded-full group-hover:bg-teal-400 transition-colors"></div>
+                    </div>
+                 </div>
+              </div>
+           </div>
+
+           {/* Feedback Card */}
+           <div className="bg-gray-900/50 border border-gray-800 rounded-xl p-5 backdrop-blur-sm animate-fade-in-up" style={{ animationDelay: '0.2s' }}>
+              <div className="flex items-center gap-2 mb-3">
+                 <MessageSquare size={14} className="text-purple-400" />
+                 <span className="text-xs font-medium text-purple-200">Key Insight</span>
+              </div>
+              <p className="text-sm text-gray-300 leading-relaxed italic">
+                 "Founders in the EU region responded strongly to the 'no-code' angle, seeing it as a major time-saver."
+              </p>
+           </div>
+        </div>
+        </>
+      }
+    />
+  );
+};
+
+// --- Step 4: Forecast Outcome ---
+
+const Step4 = () => {
+  const [activeVariant, setActiveVariant] = useState(0);
+
+  const variants = [
+    { label: "Original", score: 48, text: "We just secured $5.3M to build AI-native tools..." },
+    { label: "Variant 1", score: 88, text: "Stop writing code before you have product-market fit. We just raised $5.3M to help you simulate it first." },
+    { label: "Variant 2", score: 83, text: "Big news: $5.3M raised! We're building the future of founder tools in Europe." },
+  ];
+
+  return (
+    <SectionLayout
+      number="4"
+      title="Forecast Every Outcome"
+      description="SyncUsers uses your style to generate and test variations of your original post every time you run a simulation."
+      visual={
+        <div className="relative w-full max-w-lg flex items-center justify-center">
+            <NetworkBackground />
+            
+            {/* Main Content Area */}
+            <div className="w-full max-w-xs bg-black border border-gray-800 rounded-xl p-6 shadow-2xl relative z-10 transition-all duration-300">
+                <div className="flex justify-between items-center mb-4">
+                  <span className="text-xs text-gray-500 uppercase tracking-wide">{variants[activeVariant].label}</span>
+                  <div className={`px-2 py-0.5 rounded text-xs font-bold ${activeVariant === 0 ? 'bg-gray-800 text-gray-400' : 'bg-green-900 text-green-400'}`}>
+                    Score: {variants[activeVariant].score}
+                  </div>
+                </div>
+                <div className="min-h-[100px]">
+                  <p className="text-sm text-gray-200 leading-relaxed animate-fade-in">
+                    {variants[activeVariant].text}
+                  </p>
+                </div>
+                <div className="mt-4 pt-4 border-t border-gray-800 flex gap-4">
+                   <div className="h-2 w-8 bg-gray-800 rounded-full"></div>
+                   <div className="h-2 w-16 bg-gray-800 rounded-full"></div>
+                </div>
+            </div>
+
+            {/* Floating Menu */}
+            <div className="absolute -right-4 top-1/2 -translate-y-1/2 translate-x-1/2 w-48 bg-gray-900/90 backdrop-blur border border-gray-700 rounded-xl p-2 shadow-2xl z-20">
+               <div className="text-[10px] text-gray-500 uppercase px-2 mb-2 font-bold tracking-wider">Select Variant</div>
+               <div className="space-y-1">
+                 {variants.map((v, i) => (
+                   <div 
+                      key={i}
+                      onMouseEnter={() => setActiveVariant(i)}
+                      className={`p-2 rounded cursor-pointer transition-all flex justify-between items-center group ${activeVariant === i ? 'bg-white text-black' : 'hover:bg-white/10 text-gray-400'}`}
+                   >
+                      <span className="text-xs font-medium">{v.label}</span>
+                      <span className={`text-xs font-bold ${activeVariant === i ? 'text-black' : 'text-gray-500 group-hover:text-white'}`}>{v.score}</span>
+                   </div>
+                 ))}
+               </div>
+            </div>
+
+            {/* Connecting Line Visual */}
+            <div className="absolute right-[50%] top-1/2 w-[30%] h-[1px] bg-gradient-to-r from-transparent to-gray-700 -z-10"></div>
+        </div>
+      }
+    />
+  );
+};
+
+// --- Main Container ---
+
+const InteractiveDemo: React.FC = () => {
+  return (
+    <div className="flex flex-col">
+      <Step1 />
+      <Step2 />
+      <Step3 />
+      <Step4 />
+    </div>
+  );
+};
+
+export default InteractiveDemo;

components/Navbar.tsx

@@ -0,0 +1,86 @@
+import React, { useState, useEffect } from 'react';
+import { Menu, X } from 'lucide-react';
+import { NAV_LINKS } from '../constants';
+import Button from './ui/Button';
+
+interface NavbarProps {
+  onStart?: () => void;
+}
+
+const Navbar: React.FC<NavbarProps> = ({ onStart }) => {
+  const [isScrolled, setIsScrolled] = useState(false);
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      setIsScrolled(window.scrollY > 20);
+    };
+    window.addEventListener('scroll', handleScroll);
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
+
+  return (
+    <nav className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${isScrolled ? 'bg-black/80 backdrop-blur-md py-3 border-b border-gray-800' : 'bg-transparent py-5'}`}>
+      <div className="max-w-7xl mx-auto px-6 flex items-center justify-between">
+        <div className="flex items-center gap-2 cursor-pointer" onClick={() => window.scrollTo(0,0)}>
+          <div className="w-8 h-8 flex items-center justify-center font-bold text-xl text-white">
+            {/* Stylized Logo Mockup */}
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" className="w-full h-full">
+              <path d="M12 2L2 22h20L12 2z" className="text-gray-400" />
+              <path d="M12 6L6 20h12L12 6z" className="text-white fill-white" />
+            </svg>
+          </div>
+          <span className="font-semibold text-lg tracking-tight">SyncUsers</span>
+        </div>
+
+        {/* Desktop Nav */}
+        <div className="hidden md:flex items-center gap-8">
+          {NAV_LINKS.map((link) => (
+            <a 
+              key={link.label} 
+              href={link.href} 
+              className="text-sm font-medium text-gray-300 hover:text-white transition-colors"
+            >
+              {link.label}
+            </a>
+          ))}
+        </div>
+
+        <div className="hidden md:block">
+          <Button variant="primary" size="sm" onClick={onStart}>Start Building</Button>
+        </div>
+
+        {/* Mobile Toggle */}
+        <button 
+          className="md:hidden text-gray-300 hover:text-white"
+          onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
+        >
+          {isMobileMenuOpen ? <X /> : <Menu />}
+        </button>
+      </div>
+
+      {/* Mobile Menu */}
+      {isMobileMenuOpen && (
+        <div className="md:hidden bg-black border-t border-gray-800 p-6 absolute top-full left-0 right-0">
+          <div className="flex flex-col gap-4">
+            {NAV_LINKS.map((link) => (
+              <a 
+                key={link.label} 
+                href={link.href} 
+                className="text-lg font-medium text-gray-300 hover:text-white"
+                onClick={() => setIsMobileMenuOpen(false)}
+              >
+                {link.label}
+              </a>
+            ))}
+            <div className="pt-4">
+              <Button variant="primary" className="w-full" onClick={() => { setIsMobileMenuOpen(false); if(onStart) onStart(); }}>Start Building</Button>
+            </div>
+          </div>
+        </div>
+      )}
+    </nav>
+  );
+};
+
+export default Navbar;

components/Pricing.tsx

@@ -0,0 +1,104 @@
+import React, { useState } from 'react';
+import Button from './ui/Button';
+import { Check } from 'lucide-react';
+
+const Pricing: React.FC = () => {
+  const [isYearly, setIsYearly] = useState(false);
+
+  const plans = [
+    {
+      name: "Free",
+      price: "$0",
+      desc: "No cost to run your first experiments",
+      features: ["Access all features", "Configure your own focus groups", "3 Starting simulation credits"],
+      cta: "Select Free",
+      featured: false
+    },
+    {
+      name: "Pro",
+      price: "$55",
+      period: "/ mo",
+      desc: "Billed monthly",
+      features: ["Everything in Free", "Unlimited focus groups", "Unlimited simulation credits"],
+      cta: "Select Pro",
+      featured: true
+    },
+    {
+      name: "Enterprise",
+      price: "Get in Touch",
+      desc: "Custom builds for businesses",
+      features: ["Custom audience builds", "Custom contexts & segments", "Data & CRM integration", "API Access", "Dedicated Account Manager"],
+      cta: "Enquire",
+      featured: false
+    }
+  ];
+
+  return (
+    <section id="pricing" className="py-24 bg-black">
+      <div className="max-w-7xl mx-auto px-6">
+        <div className="text-center mb-16">
+           <h2 className="text-4xl md:text-5xl font-semibold mb-6">Get started today</h2>
+           
+           {/* Toggle */}
+           <div className="inline-flex items-center bg-gray-900 rounded-full p-1 border border-gray-800 relative">
+              <button 
+                className={`px-6 py-2 rounded-full text-sm font-medium transition-all ${!isYearly ? 'bg-white text-black' : 'text-gray-400 hover:text-white'}`}
+                onClick={() => setIsYearly(false)}
+              >
+                Monthly
+              </button>
+              <button 
+                className={`px-6 py-2 rounded-full text-sm font-medium transition-all ${isYearly ? 'bg-white text-black' : 'text-gray-400 hover:text-white'}`}
+                onClick={() => setIsYearly(true)}
+              >
+                Yearly
+              </button>
+              <span className="absolute -top-3 -right-6 bg-teal-900 text-teal-200 text-[10px] font-bold px-2 py-0.5 rounded-full border border-teal-700">
+                -30%
+              </span>
+           </div>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+          {plans.map((plan, idx) => (
+            <div 
+              key={idx} 
+              className={`flex flex-col p-8 rounded-2xl border ${plan.featured ? 'border-gray-600 bg-gray-900/40 relative' : 'border-gray-800 bg-black'}`}
+            >
+               <div className="mb-8">
+                 <h3 className="text-lg font-medium text-white mb-2">{plan.name}</h3>
+                 <p className="text-gray-500 text-sm">{plan.name === 'Free' ? 'Get started with simulations' : plan.name === 'Pro' ? 'For founders, creators and builders' : 'Custom builds for businesses'}</p>
+               </div>
+               
+               <div className="mb-8">
+                 <div className="flex items-baseline">
+                   <span className="text-4xl font-bold text-white">{plan.price}</span>
+                   {plan.period && <span className="text-gray-400 ml-1">{plan.period}</span>}
+                 </div>
+                 <p className="text-gray-500 text-sm mt-2">{plan.desc}</p>
+               </div>
+
+               <div className="flex-grow space-y-4 mb-8">
+                 {plan.features.map((feature, fIdx) => (
+                   <div key={fIdx} className="flex items-start gap-3">
+                     <Check className="w-5 h-5 text-white shrink-0" />
+                     <span className="text-gray-300 text-sm">{feature}</span>
+                   </div>
+                 ))}
+               </div>
+
+               <Button 
+                  variant={plan.featured ? 'primary' : 'outline'} 
+                  className="w-full"
+                >
+                  {plan.cta}
+                </Button>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default Pricing;

components/ProductOverview.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { Target, Maximize, Zap, Code2 } from 'lucide-react';
+
+const ProductOverview: React.FC = () => {
+  const features = [
+    {
+      icon: <Target className="w-6 h-6" />,
+      title: "Targeted",
+      desc: "Accurately model even hard-to-reach audiences via API."
+    },
+    {
+      icon: <Maximize className="w-6 h-6" />,
+      title: "Scalable",
+      desc: "Run thousands of concurrent simulations."
+    },
+    {
+      icon: <Zap className="w-6 h-6" />,
+      title: "Low Latency",
+      desc: "Get actionable insights in your pipeline in seconds."
+    },
+    {
+      icon: <Code2 className="w-6 h-6" />,
+      title: "Free for Devs",
+      desc: "Generous free tier to build and test your integration."
+    }
+  ];
+
+  return (
+    <section id="features" className="py-24 bg-black">
+      <div className="max-w-7xl mx-auto px-6">
+        <div className="flex justify-center mb-8">
+          <span className="px-4 py-1.5 rounded-full border border-gray-700 text-sm text-gray-300">Product Overview</span>
+        </div>
+        
+        <h2 className="text-3xl md:text-5xl font-semibold text-center max-w-4xl mx-auto leading-tight mb-20">
+          Create realistic simulations of your target audience to instantly test messages, content, or ideas
+        </h2>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+          {features.map((feature, idx) => (
+            <div key={idx} className="p-8 border border-gray-800 rounded-2xl hover:border-gray-600 transition-colors bg-gray-900/20">
+              <div className="w-12 h-12 rounded-full border border-gray-700 flex items-center justify-center mb-6 text-white">
+                {feature.icon}
+              </div>
+              <h3 className="text-xl font-medium mb-3">{feature.title}</h3>
+              <p className="text-gray-400 leading-relaxed">{feature.desc}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default ProductOverview;

components/RealNetworkGraph.tsx

@@ -0,0 +1,128 @@
+
+import React, { useEffect, useRef } from 'react';
+import Plotly from 'plotly.js';
+
+const RealNetworkGraph: React.FC = () => {
+  const graphDiv = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!graphDiv.current) return;
+
+    // --- Data Generation Logic ---
+    const N = 80; // Node count
+    const radius = 0.22; // Connection threshold
+    const nodes = [];
+
+    // 1. Create nodes
+    for (let i = 0; i < N; i++) {
+      nodes.push({
+        x: Math.random(),
+        y: Math.random(),
+        connections: 0
+      });
+    }
+
+    // 2. Create edges
+    const edgeX: (number | null)[] = [];
+    const edgeY: (number | null)[] = [];
+    
+    for (let i = 0; i < N; i++) {
+      for (let j = i + 1; j < N; j++) {
+        const dx = nodes[i].x - nodes[j].x;
+        const dy = nodes[i].y - nodes[j].y;
+        const dist = Math.sqrt(dx * dx + dy * dy);
+        
+        if (dist < radius) {
+          nodes[i].connections++;
+          nodes[j].connections++;
+          edgeX.push(nodes[i].x, nodes[j].x, null);
+          edgeY.push(nodes[i].y, nodes[j].y, null);
+        }
+      }
+    }
+
+    const nodeX = nodes.map(n => n.x);
+    const nodeY = nodes.map(n => n.y);
+    const nodeColor = nodes.map(n => n.connections);
+
+    // --- Plotly Configuration ---
+    
+    const edgeTrace = {
+      x: edgeX,
+      y: edgeY,
+      mode: 'lines',
+      line: { width: 0.5, color: '#4b5563' }, // gray-600
+      hoverinfo: 'none',
+      type: 'scatter'
+    };
+
+    const nodeTrace = {
+      x: nodeX,
+      y: nodeY,
+      mode: 'markers',
+      hoverinfo: 'none', 
+      marker: {
+        showscale: false,
+        colorscale: 'Viridis', 
+        color: nodeColor,
+        size: 8,
+        line: { width: 0 }
+      },
+      type: 'scatter'
+    };
+
+    const layout = {
+      showlegend: false,
+      hovermode: false,
+      margin: { b: 0, l: 0, r: 0, t: 0 },
+      xaxis: { 
+        showgrid: false, 
+        zeroline: false, 
+        showticklabels: false, 
+        range: [-0.05, 1.05],
+        fixedrange: true 
+      },
+      yaxis: { 
+        showgrid: false, 
+        zeroline: false, 
+        showticklabels: false, 
+        range: [-0.05, 1.05],
+        fixedrange: true
+      },
+      paper_bgcolor: 'rgba(0,0,0,0)',
+      plot_bgcolor: 'rgba(0,0,0,0)',
+      autosize: true,
+      dragmode: false
+    };
+
+    const config = { 
+      staticPlot: true, // Disables all interactions for a cleaner background look
+      displayModeBar: false, 
+      responsive: true 
+    };
+
+    // @ts-ignore - Plotly types can be tricky with ESM imports
+    Plotly.newPlot(graphDiv.current, [edgeTrace, nodeTrace], layout, config);
+
+    // Handle Resize
+    const resizeObserver = new ResizeObserver(() => {
+        if (graphDiv.current) {
+            // @ts-ignore
+            Plotly.Plots.resize(graphDiv.current);
+        }
+    });
+    resizeObserver.observe(graphDiv.current);
+
+    return () => {
+        resizeObserver.disconnect();
+        // @ts-ignore
+        if (graphDiv.current) Plotly.purge(graphDiv.current);
+    };
+  }, []);
+
+  return (
+    <div ref={graphDiv} className="w-full h-full" />
+  );
+};
+
+export default RealNetworkGraph;

components/SimulationGraph.tsx

@@ -0,0 +1,203 @@
+import React, { useEffect, useRef, useState } from 'react';
+import Plotly from 'plotly.js';
+import { X, Linkedin, Globe, MapPin, User, Briefcase, Users } from 'lucide-react';
+import Button from './ui/Button';
+
+interface SimulationGraphProps {
+  isBuilding: boolean;
+  societyType: string;
+  onStartChat?: () => void;
+}
+
+const SimulationGraph: React.FC<SimulationGraphProps> = ({ isBuilding, societyType, onStartChat }) => {
+  const graphDiv = useRef<HTMLDivElement>(null);
+  const [selectedProfile, setSelectedProfile] = useState<{ x: number, y: number, data: any } | null>(null);
+
+  // Close popup if building starts
+  useEffect(() => {
+    if (isBuilding) setSelectedProfile(null);
+  }, [isBuilding]);
+
+  useEffect(() => {
+    if (!graphDiv.current || isBuilding) return;
+
+    // --- Dynamic Data Generation based on Society Type ---
+    const isTech = societyType.includes('Tech') || societyType.includes('Founders');
+    
+    const N = isTech ? 120 : 80; 
+    const radius = isTech ? 0.18 : 0.22; 
+    const nodes = [];
+
+    // Create nodes
+    for (let i = 0; i < N; i++) {
+      nodes.push({
+        x: Math.random(),
+        y: Math.random(),
+        connections: 0,
+        // Mock data for the popup
+        role: isTech ? ['Founder', 'CTO', 'Product Lead', 'VC'][Math.floor(Math.random() * 4)] : ['Journalist', 'Reader', 'Editor', 'Subscriber'][Math.floor(Math.random() * 4)],
+        location: ['New York, USA', 'London, UK', 'Berlin, DE', 'Paris, FR'][Math.floor(Math.random() * 4)]
+      });
+    }
+
+    // Create edges
+    const edgeX: (number | null)[] = [];
+    const edgeY: (number | null)[] = [];
+    
+    for (let i = 0; i < N; i++) {
+      for (let j = i + 1; j < N; j++) {
+        const dx = nodes[i].x - nodes[j].x;
+        const dy = nodes[i].y - nodes[j].y;
+        const dist = Math.sqrt(dx * dx + dy * dy);
+        
+        if (dist < radius) {
+          nodes[i].connections++;
+          nodes[j].connections++;
+          edgeX.push(nodes[i].x, nodes[j].x, null);
+          edgeY.push(nodes[i].y, nodes[j].y, null);
+        }
+      }
+    }
+
+    const nodeX = nodes.map(n => n.x);
+    const nodeY = nodes.map(n => n.y);
+    const nodeColor = nodes.map(n => n.connections); 
+
+    // --- Plotly Config ---
+    const edgeTrace = {
+      x: edgeX,
+      y: edgeY,
+      mode: 'lines',
+      line: { width: 0.5, color: '#4b5563' },
+      hoverinfo: 'none',
+      type: 'scatter'
+    };
+
+    const nodeTrace = {
+      x: nodeX,
+      y: nodeY,
+      mode: 'markers',
+      hoverinfo: 'none', 
+      marker: {
+        showscale: false,
+        colorscale: isTech ? 'Electric' : 'Viridis',
+        color: nodeColor,
+        size: 10,
+        line: { width: 0 }
+      },
+      type: 'scatter'
+    };
+
+    const layout = {
+      showlegend: false,
+      hovermode: 'closest',
+      margin: { b: 0, l: 0, r: 0, t: 0 },
+      xaxis: { showgrid: false, zeroline: false, showticklabels: false, range: [-0.05, 1.05], fixedrange: true },
+      yaxis: { showgrid: false, zeroline: false, showticklabels: false, range: [-0.05, 1.05], fixedrange: true },
+      paper_bgcolor: 'rgba(0,0,0,0)',
+      plot_bgcolor: 'rgba(0,0,0,0)',
+      autosize: true,
+      dragmode: false 
+    };
+
+    const config = { 
+      staticPlot: false, 
+      displayModeBar: false, 
+      responsive: true 
+    };
+
+    // @ts-ignore
+    Plotly.newPlot(graphDiv.current, [edgeTrace, nodeTrace], layout, config).then((gd) => {
+      // @ts-ignore
+      gd.on('plotly_click', (data) => {
+        const point = data.points[0];
+        if (point) {
+           const nodeIndex = point.pointNumber;
+           const nodeData = nodes[nodeIndex];
+           
+           setSelectedProfile({
+               x: point.x, 
+               y: point.y,
+               data: nodeData
+           });
+        }
+      });
+    });
+
+  }, [isBuilding, societyType]);
+
+  return (
+    <div className="relative w-full h-full bg-black">
+      {/* Loading Overlay */}
+      {isBuilding && (
+        <div className="absolute inset-0 z-50 flex flex-col items-center justify-center bg-black/80 backdrop-blur-sm transition-opacity duration-300">
+           <div className="w-16 h-16 border-4 border-teal-900 border-t-teal-500 rounded-full animate-spin mb-4"></div>
+           <p className="text-teal-400 font-mono animate-pulse">Constructing Focus Group Graph...</p>
+        </div>
+      )}
+
+      {/* The Graph */}
+      <div ref={graphDiv} className="w-full h-full" />
+
+      {/* Profile Popup */}
+      {selectedProfile && !isBuilding && (
+        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-80 bg-gray-900/90 backdrop-blur-md border border-gray-700 rounded-2xl shadow-2xl overflow-hidden z-40 animate-in fade-in zoom-in-95 duration-200">
+            {/* Header */}
+            <div className="p-4 border-b border-gray-800 flex justify-between items-start">
+               <div className="flex items-center gap-3">
+                  <div className="w-10 h-10 rounded-full bg-gradient-to-br from-teal-400 to-blue-600 flex items-center justify-center text-white font-bold text-lg">
+                    {selectedProfile.data.role[0]}
+                  </div>
+                  <div>
+                    <h3 className="text-white font-semibold text-sm">{selectedProfile.data.role}</h3>
+                    <p className="text-gray-400 text-xs">Head of Product at BrightCore</p>
+                  </div>
+               </div>
+               <button 
+                 onClick={() => setSelectedProfile(null)}
+                 className="text-gray-500 hover:text-white"
+               >
+                 <X size={16} />
+               </button>
+            </div>
+
+            {/* Body */}
+            <div className="p-4 space-y-4">
+               <div className="flex items-center gap-2 text-xs text-gray-400">
+                  <span>Built from</span>
+                  <Linkedin size={14} className="text-[#0077b5]" />
+                  <Globe size={14} className="text-gray-300" />
+               </div>
+
+               <div className="flex flex-wrap gap-2">
+                  <div className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg bg-gray-800 border border-gray-700 text-xs text-gray-300">
+                    <MapPin size={12} /> {selectedProfile.data.location}
+                  </div>
+                  <div className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg bg-gray-800 border border-gray-700 text-xs text-gray-300">
+                    <User size={12} /> Millennial
+                  </div>
+                   <div className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg bg-gray-800 border border-gray-700 text-xs text-gray-300">
+                    <Briefcase size={12} /> Mid Level
+                  </div>
+                  <div className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg bg-gray-800 border border-gray-700 text-xs text-gray-300">
+                    <Users size={12} /> Creative & Design
+                  </div>
+               </div>
+            </div>
+
+            {/* Footer */}
+            <div className="p-4 pt-0">
+               <Button 
+                 className="w-full text-sm py-2"
+                 onClick={onStartChat}
+               >
+                 Start Conversation
+               </Button>
+            </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default SimulationGraph;

components/SimulationPage.tsx

@@ -0,0 +1,246 @@
+import React, { useState } from 'react';
+import { ChevronDown, Plus, Info, MessageSquare, BookOpen, LogOut, PanelLeftClose, MessageCircle, AlertTriangle } from 'lucide-react';
+import SimulationGraph from './SimulationGraph';
+
+interface SimulationPageProps {
+  onBack: () => void;
+  onOpenConversation: () => void;
+  onOpenChat: () => void;
+}
+
+// Define the data structure for filters
+const VIEW_FILTERS: Record<string, Array<{ label: string; color: string }>> = {
+  'Country': [
+    { label: "United States", color: "bg-blue-600" },
+    { label: "United Kingdom", color: "bg-purple-600" },
+    { label: "Netherlands", color: "bg-teal-600" },
+    { label: "France", color: "bg-orange-600" },
+    { label: "India", color: "bg-pink-600" }
+  ],
+  'Job Title': [
+    { label: "Founder", color: "bg-indigo-500" },
+    { label: "Product Manager", color: "bg-emerald-500" },
+    { label: "Engineer", color: "bg-rose-500" },
+    { label: "Investor", color: "bg-amber-500" },
+    { label: "Designer", color: "bg-fuchsia-500" }
+  ],
+  'Sentiment': [
+    { label: "Positive", color: "bg-green-500" },
+    { label: "Neutral", color: "bg-gray-500" },
+    { label: "Negative", color: "bg-red-500" },
+    { label: "Mixed", color: "bg-yellow-500" }
+  ],
+  'Activity Level': [
+    { label: "Power User", color: "bg-red-600" },
+    { label: "Daily Active", color: "bg-orange-500" },
+    { label: "Weekly Active", color: "bg-blue-500" },
+    { label: "Lurker", color: "bg-slate-600" }
+  ]
+};
+
+const SimulationPage: React.FC<SimulationPageProps> = ({ onBack, onOpenConversation, onOpenChat }) => {
+  const [society, setSociety] = useState('User Group 1');
+  const [viewMode, setViewMode] = useState('Job Title');
+  const [isBuilding, setIsBuilding] = useState(false);
+  const [isRightPanelOpen, setIsRightPanelOpen] = useState(true);
+
+  // Function to simulate rebuilding the graph when settings change
+  const handleSettingChange = (setter: (val: string) => void, value: string) => {
+    if (value === society || (value === viewMode && setter === setViewMode)) return; // No change
+    
+    setter(value);
+    setIsBuilding(true);
+    // Simulate network delay
+    setTimeout(() => {
+        setIsBuilding(false);
+    }, 1500);
+  };
+
+  const currentFilters = VIEW_FILTERS[viewMode] || VIEW_FILTERS['Country'];
+
+  return (
+    <div className="flex h-screen w-screen overflow-hidden bg-black text-white font-sans">
+      {/* Sidebar */}
+      <aside className="w-[300px] flex-shrink-0 border-r border-gray-800 flex flex-col bg-[#0a0a0a] z-20">
+        {/* Header */}
+        <div className="p-4 h-16 border-b border-gray-800 flex items-center justify-between">
+           <div className="flex items-center gap-2 cursor-pointer" onClick={onBack}>
+              <div className="w-6 h-6 flex items-center justify-center font-bold text-white">Λ</div>
+              <span className="font-semibold tracking-tight">SyncUsers</span>
+           </div>
+           <button className="text-gray-500 hover:text-white"><PanelLeftClose size={18}/></button>
+        </div>
+
+        {/* Scrollable Content */}
+        <div className="flex-1 overflow-y-auto p-4 space-y-6">
+           
+           {/* Current Focus Group Control */}
+           <div className="space-y-2">
+              <label className="text-xs text-gray-500 font-medium uppercase tracking-wider">Current Focus Group</label>
+              <div className="relative group">
+                <select 
+                  value={society}
+                  onChange={(e) => handleSettingChange(setSociety, e.target.value)}
+                  className="w-full appearance-none bg-[#111] border border-gray-700 text-white rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:border-teal-500 cursor-pointer"
+                >
+                  <option>User Group 1</option>
+                </select>
+                <ChevronDown className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 pointer-events-none w-4 h-4" />
+              </div>
+           </div>
+
+           {/* Current View Control */}
+           <div className="space-y-2">
+              <label className="text-xs text-gray-500 font-medium uppercase tracking-wider">Current View</label>
+              <div className="relative">
+                <select 
+                  value={viewMode}
+                  onChange={(e) => handleSettingChange(setViewMode, e.target.value)}
+                  className="w-full appearance-none bg-[#111] border border-gray-700 text-white rounded-lg px-3 py-2.5 text-sm focus:outline-none focus:border-teal-500 cursor-pointer"
+                >
+                  <option>Country</option>
+                  <option>Job Title</option>
+                  <option>Sentiment</option>
+                  <option>Activity Level</option>
+                </select>
+                <ChevronDown className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 pointer-events-none w-4 h-4" />
+              </div>
+           </div>
+
+           <div className="h-px bg-gray-800 my-4" />
+
+           {/* Actions */}
+           <button 
+             onClick={onOpenConversation}
+             className="w-full flex items-center justify-between text-left text-sm text-gray-300 hover:text-white group py-2"
+           >
+              <span>Create a new test</span>
+              <Plus size={18} className="text-gray-500 group-hover:text-white" />
+           </button>
+
+           {/* Global Chat Button (Sidebar) */}
+           <button 
+             onClick={onOpenChat}
+             className="w-full flex items-center gap-3 px-4 py-3 bg-gray-800 hover:bg-gray-700 text-white rounded-lg transition-colors border border-gray-700"
+           >
+              <MessageCircle size={18} />
+              <span className="font-medium text-sm">Open Global Chat</span>
+           </button>
+
+           {/* Setup Warning */}
+           <div className="bg-amber-900/30 border border-amber-700/50 rounded-xl p-4 mt-4">
+              <div className="flex items-center gap-2 text-amber-200 font-bold text-xs mb-1">
+                 <AlertTriangle size={14}/>
+                 <span>Action Required</span>
+              </div>
+              <p className="text-amber-200/70 text-[10px] leading-relaxed">
+                Assemble a new group and create a new test before using the chat features.
+              </p>
+           </div>
+
+           {/* History List */}
+           <div className="space-y-1 pt-4">
+             <label className="text-xs text-gray-500 font-medium uppercase tracking-wider mb-2 block">Recent Tests</label>
+             <div className="text-sm text-gray-400 py-2 px-2 hover:bg-gray-800/50 rounded cursor-pointer truncate">
+               Duality in portraits and sha...
+             </div>
+             <div className="text-sm text-gray-400 py-2 px-2 hover:bg-gray-800/50 rounded cursor-pointer truncate">
+               Volcanoes: Threat or Misun...
+             </div>
+             <div className="text-sm text-gray-400 py-2 px-2 hover:bg-gray-800/50 rounded cursor-pointer truncate">
+               Sustainable Fashion 2024
+             </div>
+           </div>
+        </div>
+
+        {/* Footer */}
+        <div className="border-t border-gray-800 p-4 space-y-1 bg-[#0a0a0a]">
+           <div className="flex justify-between items-center py-2 text-sm text-gray-400 border-b border-gray-800 mb-2 pb-4">
+              <span>Credits: 0</span>
+              <Info size={14} className="cursor-help" />
+           </div>
+
+           <MenuItem icon={<Plus size={16}/>} label="Start Free Trial" highlight />
+           <MenuItem icon={<MessageSquare size={16}/>} label="Leave Feedback" />
+           <MenuItem icon={<BookOpen size={16}/>} label="Product Guide" />
+           <MenuItem icon={<LogOut size={16}/>} label="Log Out" />
+           
+           <div className="pt-4 text-[10px] text-gray-600">Version 2.1</div>
+        </div>
+      </aside>
+
+      {/* Main Content Area */}
+      <main className="flex-1 flex flex-col relative bg-black overflow-hidden">
+         {/* Top Navigation Overlay */}
+         <div className="absolute top-6 left-6 right-6 z-10 flex justify-center pointer-events-none">
+             {/* Legend / Filter Chips */}
+             <div className="flex flex-wrap justify-center gap-2 pointer-events-auto">
+                {currentFilters.map((filter, idx) => (
+                   <FilterChip key={idx} color={filter.color} label={filter.label} />
+                ))}
+             </div>
+         </div>
+
+         {/* Graph Container */}
+         <div className="flex-1 w-full h-full">
+            <SimulationGraph isBuilding={isBuilding} societyType={society} onStartChat={onOpenChat} />
+         </div>
+
+         {/* Floating Chat Button (Bottom) */}
+         <div className="absolute bottom-8 left-1/2 -translate-x-1/2 z-30">
+            <button 
+              onClick={onOpenChat}
+              className="flex items-center gap-2 bg-black/80 backdrop-blur-md border border-gray-700 text-white px-6 py-3 rounded-full shadow-2xl hover:bg-gray-900 transition-all hover:scale-105"
+            >
+              <MessageCircle size={20} />
+              <span className="font-medium">Open Simulation Chat</span>
+            </button>
+         </div>
+      </main>
+
+      {/* Right Sidebar (Output) */}
+      <aside className={`w-[300px] flex-shrink-0 border-l border-gray-800 flex flex-col bg-[#0a0a0a] z-20 transition-all duration-300 ${isRightPanelOpen ? 'mr-0' : '-mr-[300px]'}`}>
+        <div className="p-4 h-16 border-b border-gray-800 flex items-center justify-between">
+           <span className="font-semibold tracking-tight uppercase text-xs text-gray-500">Output</span>
+           <button onClick={() => setIsRightPanelOpen(false)} className="text-gray-500 hover:text-white"><PanelLeftClose size={18} className="rotate-180"/></button>
+        </div>
+        <div className="flex-1 overflow-y-auto p-4 space-y-4">
+           <div className="bg-gray-900/50 border border-gray-800 rounded-xl p-4">
+              <p className="text-xs text-gray-500 mb-2">Simulation Results</p>
+              <div className="text-sm text-gray-400 italic text-center py-8">
+                Results will appear here after running a simulation.
+              </div>
+           </div>
+        </div>
+      </aside>
+    </div>
+  );
+};
+
+// Helper Components
+interface MenuItemProps {
+  icon: React.ReactNode;
+  label: string;
+  highlight?: boolean;
+}
+
+const MenuItem: React.FC<MenuItemProps> = ({ icon, label, highlight = false }) => (
+  <button className={`w-full flex items-center gap-3 px-2 py-2.5 rounded-md text-sm transition-colors ${highlight ? 'text-teal-400 hover:bg-teal-950/30' : 'text-gray-400 hover:bg-gray-800 hover:text-white'}`}>
+    {icon}
+    <span>{label}</span>
+  </button>
+);
+
+interface FilterChipProps {
+  color: string;
+  label: string;
+}
+
+const FilterChip: React.FC<FilterChipProps> = ({ color, label }) => (
+  <button className="flex items-center gap-2 bg-gray-900/80 backdrop-blur border border-gray-700 rounded-full pl-2 pr-4 py-1.5 hover:border-gray-500 transition-colors">
+     <span className={`w-2.5 h-2.5 rounded-full ${color}`}></span>
+     <span className="text-xs font-medium text-gray-300">{label}</span>
+  </button>
+);
+
+export default SimulationPage;

components/Testimonials.tsx

@@ -0,0 +1,47 @@
+
+import React from 'react';
+import { TESTIMONIALS } from '../constants';
+import { ArrowLeft, ArrowRight } from 'lucide-react';
+
+const Testimonials: React.FC = () => {
+  return (
+    <section className="py-24 bg-black border-y border-gray-900">
+       <div className="max-w-7xl mx-auto px-6">
+         <div className="flex justify-center mb-8">
+           <span className="px-4 py-1.5 rounded-full border border-gray-700 text-sm text-gray-300">Testimonials</span>
+         </div>
+         <h2 className="text-3xl md:text-5xl font-semibold text-center mb-16 max-w-3xl mx-auto">
+           Join thousands using Agentic User Experience (AUX) to run simulations and test ideas
+         </h2>
+
+         <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+            {TESTIMONIALS.map((t, idx) => (
+              <div key={idx} className="bg-gray-900/30 border border-gray-800 p-8 rounded-2xl flex flex-col justify-between h-full">
+                 <p className="text-xl leading-relaxed text-gray-200 mb-8 font-light">"{t.quote}"</p>
+                 <div className="flex items-center gap-4">
+                    <div className="w-12 h-12 rounded-full bg-white text-black flex items-center justify-center font-bold text-lg">
+                      {t.company[0]}
+                    </div>
+                    <div>
+                      <div className="font-semibold">{t.company}</div>
+                      <div className="text-sm text-gray-400">{t.author} • {t.role}</div>
+                    </div>
+                 </div>
+              </div>
+            ))}
+         </div>
+
+         <div className="flex justify-center gap-4 mt-12">
+            <button className="w-12 h-12 rounded-full border border-gray-700 flex items-center justify-center hover:bg-white hover:text-black transition-colors">
+              <ArrowLeft size={20} />
+            </button>
+            <button className="w-12 h-12 rounded-full border border-gray-700 flex items-center justify-center hover:bg-white hover:text-black transition-colors">
+              <ArrowRight size={20} />
+            </button>
+         </div>
+       </div>
+    </section>
+  );
+};
+
+export default Testimonials;

components/TrustedBy.tsx

@@ -0,0 +1,89 @@
+import React from 'react';
+import { CheckCircle, Timer, Clock, ClipboardCheck, Smile, Gauge } from 'lucide-react';
+
+const TrustedBy: React.FC = () => {
+  const metrics = [
+    {
+      icon: <CheckCircle size={20} />,
+      category: "Task Success Rate",
+      question: "Do users complete their goals?",
+      outcome: "Identify drop-off points in critical flows."
+    },
+    {
+      icon: <Timer size={20} />,
+      category: "Time-on-Task",
+      question: "How quickly do they finish?",
+      outcome: "Benchmark efficiency against previous versions."
+    },
+    {
+      icon: <Clock size={20} />,
+      category: "Session Duration",
+      question: "How long do they stay engaged?",
+      outcome: "Balance retention with efficient task completion."
+    },
+    {
+      icon: <ClipboardCheck size={20} />,
+      category: "System Usability Scale",
+      question: "Is the product usable?",
+      outcome: "Standardized scoring for overall usability."
+    },
+    {
+      icon: <Smile size={20} />,
+      category: "Customer Satisfaction",
+      question: "Are users happy with the experience?",
+      outcome: "Predict long-term retention and loyalty."
+    },
+    {
+      icon: <Gauge size={20} />,
+      category: "Customer Effort Score",
+      question: "Is it easy to get things done?",
+      outcome: "Reduce friction to increase conversion."
+    }
+  ];
+
+  return (
+    <section className="py-24 border-t border-gray-800 bg-black">
+      <div className="max-w-7xl mx-auto px-6">
+        <h3 className="text-center text-3xl md:text-4xl font-semibold text-white mb-6">
+          Quantify your UX quality programmatically.
+        </h3>
+        <p className="text-center text-gray-400 mb-16 max-w-2xl mx-auto text-lg">
+           Developers use SyncUsers to predict performance on core metrics without waiting for live traffic data.
+        </p>
+
+        {/* UX Metrics Grid */}
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-24">
+           {metrics.map((item, idx) => (
+             <div key={idx} className="group p-8 rounded-2xl border border-gray-800 bg-gray-900/20 hover:border-teal-900/50 hover:bg-gray-900/40 transition-all duration-300">
+                <div className="flex items-center gap-3 mb-5 text-gray-500 group-hover:text-teal-400 transition-colors">
+                   {item.icon}
+                   <span className="text-xs font-mono uppercase tracking-widest">{item.category}</span>
+                </div>
+                <div className="text-xl font-medium text-white mb-3 group-hover:translate-x-1 transition-transform duration-300">
+                  {item.question}
+                </div>
+                <p className="text-sm text-gray-500 leading-relaxed group-hover:text-gray-400 transition-colors">
+                  {item.outcome}
+                </p>
+             </div>
+           ))}
+        </div>
+
+        {/* Stats Grid */}
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-4xl mx-auto">
+          {[
+            { value: "2,000+", label: "Persona Database ready", color: "border-blue-900" },
+            { value: "REST & GraphQL", label: "API Available", color: "border-teal-900" },
+          ].map((stat, idx) => (
+            <div key={idx} className={`relative flex flex-col items-center justify-center py-16 rounded-full border border-t-2 ${stat.color} bg-gradient-to-b from-gray-900 to-black`}>
+              <h4 className="text-4xl md:text-5xl font-bold text-white mb-2">{stat.value}</h4>
+              <p className="text-gray-400">{stat.label}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default TrustedBy;

components/UseCases.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { USE_CASES } from '../constants';
+
+const UseCases: React.FC = () => {
+  return (
+    <section id="use-cases" className="py-24 bg-black">
+      <div className="max-w-7xl mx-auto px-6">
+        <div className="flex justify-center mb-8">
+           <span className="px-4 py-1.5 rounded-full border border-gray-700 text-sm text-gray-300">Use Cases</span>
+        </div>
+        <h2 className="text-3xl md:text-5xl font-semibold text-center mb-20">Optimize any kind of message</h2>
+        
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          {USE_CASES.map((useCase, idx) => (
+            <div key={idx} className="group p-8 border border-gray-800 rounded-2xl bg-gradient-to-br from-gray-900/50 to-black hover:border-gray-600 transition-all duration-300 hover:shadow-lg hover:shadow-gray-900/20">
+              <div className="mb-6">
+                 <span className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-gray-800 text-xs font-medium text-gray-300 border border-gray-700">
+                    <span className={`w-2 h-2 rounded-full ${useCase.color}`}></span>
+                    {useCase.category}
+                 </span>
+              </div>
+              <h3 className="text-2xl font-semibold mb-3 group-hover:text-white transition-colors">{useCase.title}</h3>
+              <p className="text-gray-400 leading-relaxed text-sm">{useCase.description}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default UseCases;

components/ui/Button.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: 'primary' | 'secondary' | 'outline' | 'ghost';
+  size?: 'sm' | 'md' | 'lg';
+}
+
+const Button: React.FC<ButtonProps> = ({ 
+  children, 
+  variant = 'primary', 
+  size = 'md', 
+  className = '', 
+  ...props 
+}) => {
+  const baseStyles = "inline-flex items-center justify-center rounded-full font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-black disabled:opacity-50 disabled:pointer-events-none";
+  
+  const variants = {
+    primary: "bg-white text-black hover:bg-gray-200 border border-transparent",
+    secondary: "bg-gray-800 text-white hover:bg-gray-700 border border-transparent",
+    outline: "bg-transparent text-white border border-gray-600 hover:border-gray-400 hover:text-gray-200",
+    ghost: "bg-transparent text-white hover:bg-white/10"
+  };
+
+  const sizes = {
+    sm: "px-4 py-1.5 text-sm",
+    md: "px-6 py-2.5 text-base",
+    lg: "px-8 py-3.5 text-lg"
+  };
+
+  return (
+    <button 
+      className={`${baseStyles} ${variants[variant]} ${sizes[size]} ${className}`}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+};
+
+export default Button;

constants.ts

@@ -0,0 +1,73 @@
+import { NavLink, UseCase, UseCaseCategory, Testimonial, FaqItem } from './types';
+
+export const NAV_LINKS: NavLink[] = [
+  { label: 'Features', href: '#features' },
+  { label: 'Use Cases', href: '#use-cases' },
+  { label: 'How it Works', href: '#how-it-works' },
+  { label: 'Accuracy', href: '#accuracy' },
+  { label: 'Docs', href: '#docs' },
+];
+
+export const USE_CASES: UseCase[] = [
+  {
+    category: UseCaseCategory.PR_COMMS,
+    title: "Craft Narratives",
+    description: "Test different communication strategies via API to deliver the right reaction",
+    color: "bg-purple-500"
+  },
+  {
+    category: UseCaseCategory.PRODUCT,
+    title: "Decide Features",
+    description: "Test how your target customers react to product ideas and new features",
+    color: "bg-teal-500"
+  },
+  {
+    category: UseCaseCategory.BRANDING,
+    title: "Stand Out",
+    description: "Test how different brand and voice ideas resonate with your ideal buyer.",
+    color: "bg-pink-500"
+  },
+  {
+    category: UseCaseCategory.MARKETING,
+    title: "Generate Leads",
+    description: "Test marketing content in a simulation of your target customers",
+    color: "bg-orange-500"
+  },
+  {
+    category: UseCaseCategory.SOCIAL_MEDIA,
+    title: "Make Content",
+    description: "Test social content in simulations of your network and audience",
+    color: "bg-blue-500"
+  },
+  {
+    category: UseCaseCategory.JOURNALISM,
+    title: "Capture Attention",
+    description: "Test headlines, thumbnails, and article content to maximise reader attention",
+    color: "bg-yellow-500"
+  }
+];
+
+export const TESTIMONIALS: Testimonial[] = [];
+
+export const FAQS: FaqItem[] = [
+  {
+    question: "Is the API free for developers?",
+    answer: "Yes. We offer a generous free tier specifically designed for developers and hobbyists to build, test, and integrate user simulations without upfront costs."
+  },
+  {
+    question: "What is a Focus Group?",
+    answer: "A Focus Group is a simulated collective of AI personas that mirror the behaviors, preferences, and interactions of a specific real-world audience."
+  },
+  {
+    question: "How do credits work in the free tier?",
+    answer: "Credits are used to run simulations. One credit equals one simulated interaction. The developer plan includes 1,000 free credits per month, refreshing automatically."
+  },
+  {
+    question: "Can I integrate this into my CI/CD?",
+    answer: "Absolutely. Our CLI tool and API are designed to run as part of your testing pipeline, allowing you to validate UX decisions before merging code."
+  },
+  {
+    question: "How do I get an API key?",
+    answer: "You need a Huggingface token with a valid account."
+  }
+];

dist/index.html

@@ -0,0 +1,78 @@
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>SyncUsers</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <style>
+      @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+      
+      body {
+        font-family: 'Inter', sans-serif;
+        background-color: #050505;
+        color: #ffffff;
+      }
+      
+      /* Custom Scrollbar */
+      
+      ::-webkit-scrollbar {
+        width: 8px;
+      }
+      
+      ::-webkit-scrollbar-track {
+        background: #050505; 
+      }
+      
+      ::-webkit-scrollbar-thumb {
+        background: #333; 
+        border-radius: 4px;
+      }
+      
+      ::-webkit-scrollbar-thumb:hover {
+        background: #555; 
+      }
+      
+      /* Utilities for gradients */
+      
+      .bg-glass {
+        background: rgba(255, 255, 255, 0.05);
+        backdrop-filter: blur(10px);
+        -webkit-backdrop-filter: blur(10px);
+      }
+      
+      .gradient-text {
+        background: linear-gradient(to right, #fff, #aaa);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+      }
+      
+      /* Blink animation for cursor */
+      
+      @keyframes blink {
+        0%, 100% { opacity: 1; }
+        50% { opacity: 0; }
+      }
+      
+      .animate-blink {
+        animation: blink 1s step-end infinite;
+      }
+    </style>
+  <script type="importmap">
+{
+  "imports": {
+    "react-dom/": "https://aistudiocdn.com/react-dom@^19.2.0/",
+    "react/": "https://aistudiocdn.com/react@^19.2.0/",
+    "react": "https://aistudiocdn.com/react@^19.2.0",
+    "lucide-react": "https://aistudiocdn.com/lucide-react@^0.555.0",
+    "recharts": "https://aistudiocdn.com/recharts@^3.5.0",
+    "plotly.js": "https://cdn.jsdelivr.net/npm/plotly.js-dist-min@2.30.0/+esm"
+  }
+}
+</script>
+</head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

index.html

@@ -14,28 +14,23 @@
         background-color: #050505;
         color: #ffffff;
       }
-      
+
       /* Custom Scrollbar */
-      
       ::-webkit-scrollbar {
         width: 8px;
       }
-      
       ::-webkit-scrollbar-track {
         background: #050505; 
       }
-      
       ::-webkit-scrollbar-thumb {
         background: #333; 
         border-radius: 4px;
       }
-      
       ::-webkit-scrollbar-thumb:hover {
         background: #555; 
       }
       
       /* Utilities for gradients */
-      
       .bg-glass {
         background: rgba(255, 255, 255, 0.05);
         backdrop-filter: blur(10px);
@@ -49,17 +44,14 @@
       }
       
       /* Blink animation for cursor */
-      
       @keyframes blink {
         0%, 100% { opacity: 1; }
         50% { opacity: 0; }
       }
-      
       .animate-blink {
         animation: blink 1s step-end infinite;
       }
     </style>
-
   <script type="importmap">
 {
   "imports": {
@@ -72,7 +64,6 @@
   }
 }
 </script>
-  <script type="module" crossorigin src="/assets/index-Ca5kstnp.js"></script>
 </head>
   <body>
     <div id="root"></div>

index.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+
+const rootElement = document.getElementById('root');
+if (!rootElement) {
+  throw new Error("Could not find root element to mount to");
+}
+
+const root = ReactDOM.createRoot(rootElement);
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

metadata.json

@@ -0,0 +1,5 @@
+{
+  "name": "SyncUsers Testing MVP",
+  "description": "A high-fidelity clone of the SyncUsers marketing frontend, featuring interactive simulations and data visualizations.",
+  "requestFramePermissions": []
+}

package.json

@@ -0,0 +1,28 @@
+{
+  "name": "syncusers-testing-mvp",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@gradio/client": "^2.0.4",
+    "express": "^5.2.1",
+    "lucide-react": "^0.555.0",
+    "plotly.js": "2.30.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-is": "^19.2.4",
+    "recharts": "^3.5.0",
+    "vite-plugin-node-polyfills": "^0.25.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.14.0",
+    "@vitejs/plugin-react": "^5.0.0",
+    "typescript": "~5.8.2",
+    "vite": "^6.2.0"
+  }
+}

server.js

@@ -0,0 +1,18 @@
+const express = require('express');
+const path = require('path');
+const app = express();
+const port = 7860;
+
+app.use(express.static(path.join(__dirname, 'dist')));
+
+app.get('/health', (req, res) => {
+  res.status(200).send('OK');
+});
+
+app.get('*', (req, res) => {
+  res.sendFile(path.join(__dirname, 'dist', 'index.html'));
+});
+
+app.listen(port, () => {
+  console.log(`Server running on port ${port}`);
+});

services/gradioService.ts

@@ -0,0 +1,49 @@
+import { Client } from "@gradio/client";
+
+const HF_SPACE = "AUXteam/tiny_factory";
+
+export class GradioService {
+  private static client: any = null;
+
+  static async getClient() {
+    if (!this.client) {
+      this.client = await Client.connect(HF_SPACE);
+    }
+    return this.client;
+  }
+
+  static async identifyPersonas(context: string) {
+    try {
+      const client = await this.getClient();
+      const result = await client.predict("/identify_personas", [context]);
+      return result.data;
+    } catch (error) {
+      console.error("Error identifying personas:", error);
+      throw error;
+    }
+  }
+
+  static async simulate(persona: string, message: string) {
+    try {
+      const client = await this.getClient();
+      const result = await client.predict("/simulate", [persona, message]);
+      return result.data;
+    } catch (error) {
+      console.error("Error in simulation:", error);
+      throw error;
+    }
+  }
+
+  static async helpMeCraft(content: string) {
+    try {
+      // Assuming an endpoint for help me craft or similar
+      const client = await this.getClient();
+      const result = await client.predict("/help_me_craft", [content]);
+      return result.data;
+    } catch (error) {
+      console.error("Error helping to craft content:", error);
+      // Fallback or generic error handling
+      return "Unable to craft content at this time.";
+    }
+  }
+}

tsconfig.json

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "experimentalDecorators": true,
+    "useDefineForClassFields": false,
+    "module": "ESNext",
+    "lib": [
+      "ES2022",
+      "DOM",
+      "DOM.Iterable"
+    ],
+    "skipLibCheck": true,
+    "types": [
+      "node"
+    ],
+    "moduleResolution": "bundler",
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "allowJs": true,
+    "jsx": "react-jsx",
+    "paths": {
+      "@/*": [
+        "./*"
+      ]
+    },
+    "allowImportingTsExtensions": true,
+    "noEmit": true
+  }
+}

types.ts

@@ -0,0 +1,32 @@
+export enum UseCaseCategory {
+  PR_COMMS = "PR & Comms",
+  PRODUCT = "Product",
+  BRANDING = "Branding",
+  MARKETING = "Marketing",
+  SOCIAL_MEDIA = "Social Media",
+  JOURNALISM = "Journalism"
+}
+
+export interface UseCase {
+  category: UseCaseCategory;
+  title: string;
+  description: string;
+  color: string;
+}
+
+export interface NavLink {
+  label: string;
+  href: string;
+}
+
+export interface Testimonial {
+  quote: string;
+  author: string;
+  role: string;
+  company: string;
+}
+
+export interface FaqItem {
+  question: string;
+  answer: string;
+}

vite.config.ts

@@ -0,0 +1,33 @@
+import path from 'path';
+import { defineConfig, loadEnv } from 'vite';
+import react from '@vitejs/plugin-react';
+import { nodePolyfills } from 'vite-plugin-node-polyfills';
+
+export default defineConfig(({ mode }) => {
+    const env = loadEnv(mode, '.', '');
+    return {
+      server: {
+        port: 3000,
+        host: '0.0.0.0',
+      },
+      plugins: [
+        react(),
+        nodePolyfills({
+          include: ['buffer', 'process', 'util', 'stream'],
+          globals: {
+            Buffer: true,
+            process: true,
+          },
+        }),
+      ],
+      define: {
+        'process.env.API_KEY': JSON.stringify(env.GEMINI_API_KEY),
+        'process.env.GEMINI_API_KEY': JSON.stringify(env.GEMINI_API_KEY)
+      },
+      resolve: {
+        alias: {
+          '@': path.resolve(__dirname, '.'),
+        }
+      }
+    };
+});