Upload folder using huggingface_hub

components/ChatPage.tsx

@@ -62,14 +62,14 @@ const ChatInput: React.FC<{ onSimulate: (msg: string) => void; onHelpMeCraft: (m
       <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"
+          placeholder="Paste your brand narrative or campaign copy 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} />} />
+                <ChatButton label="Brand Asset for Testing" icon={<LinkIcon size={14} />} />
             </div>
             <input 
               type="file" 

components/Hero.tsx

@@ -29,10 +29,10 @@ const Hero: React.FC<HeroProps> = ({ onStart }) => {
           {/* 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
+              Branding Simulation <span className="text-gray-400">API</span> for Global Teams
             </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.
+              Programmatically test your brand narratives. Integrate accurate audience simulation into your creative workflow. Free for developers.
             </p>
             <div className="flex flex-wrap gap-4 mt-8">
               <Button variant="primary" size="lg" onClick={onStart}>HF Space Demo</Button>
@@ -43,10 +43,10 @@ const Hero: React.FC<HeroProps> = ({ onStart }) => {
           {/* 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>
+              Test your Brand. <span className="bg-gradient-to-r from-purple-400 to-pink-600 bg-clip-text text-transparent">Before you launch.</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.
+              Validate brand voice and campaign ideas with AI-generated focus groups. The new standard for agentic brand testing and narrative validation.
             </p>
             <div className="flex flex-wrap gap-4 mt-8">
               <Button variant="primary" size="lg" onClick={onStart}>Start Building</Button>

components/InteractiveDemo.tsx

@@ -183,8 +183,8 @@ const Step2 = () => {
   return (
     <SectionLayout
       number="2"
-      title="Run Rapid Experiments"
-      description="Execute simulations in minutes to find the optimal form of your content or idea."
+      title="Validate Campaign Narratives"
+      description="Execute simulations in minutes to find the optimal resonance of your brand message."
       visual={
         <>
           <NetworkBackground />
@@ -205,14 +205,14 @@ const Step2 = () => {
                 </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...
+                      Our new brand identity focuses on radical transparency and community-driven growth...
                   </p>
                 </div>
                 <Button 
                    className="w-full flex items-center justify-center gap-2"
                    onClick={handleSimulate}
                 >
-                   Simulate Post <Send size={16} />
+                   Simulate Campaign <Send size={16} />
                 </Button>
              </div>
 
@@ -239,8 +239,8 @@ const Step3 = () => {
   return (
     <SectionLayout
       number="3"
-      title="Get Instant Insights"
-      description="Evaluate the performance of your experiment with scores, comments, and summaries."
+      title="Measure Brand Resonance"
+      description="Evaluate how your brand values land with specific demographics through detailed sentiment scores."
       visual={
         <>
         <NetworkBackground />
@@ -249,29 +249,29 @@ const Step3 = () => {
            <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>
+                    <span className="text-xs text-gray-400 uppercase tracking-wider">Brand Alignment</span>
+                    <div className="text-3xl font-bold text-white mt-1">94<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 className="bg-green-500/10 text-green-400 text-xs px-2 py-1 rounded border border-green-500/20">Highly Coherent</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>
+                       <span>Trustworthiness</span>
+                       <span>88%</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 className="h-full bg-green-500 w-[88%] 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>
+                       <span>Brand Recall</span>
+                       <span>82%</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 className="h-full bg-teal-500 w-[82%] rounded-full group-hover:bg-teal-400 transition-colors"></div>
                     </div>
                  </div>
               </div>
@@ -281,10 +281,10 @@ const Step3 = () => {
            <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>
+                 <span className="text-xs font-medium text-purple-200">Brand 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."
+                 "The 'transparency' angle increased trust scores by 25% among Millennial tech professionals."
               </p>
            </div>
         </div>
@@ -300,9 +300,9 @@ 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." },
+    { label: "Original", score: 52, text: "We're launching a new sustainable clothing line next month." },
+    { label: "Variant 1", score: 91, text: "Radical transparency in every stitch. Meet the brand that's redefining sustainable luxury." },
+    { label: "Variant 2", score: 78, text: "Style without compromise. Our eco-friendly collection arrives soon." },
   ];
 
   return (

components/ProductOverview.tsx

@@ -33,7 +33,7 @@ const ProductOverview: React.FC = () => {
         </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
+          Create realistic simulations of your target audience to instantly test brand narratives, voice, and campaign ideas
         </h2>
 
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">

components/SimulationPage.tsx

@@ -1,5 +1,5 @@
-import React, { useState } from 'react';
-import { ChevronDown, Plus, Info, MessageSquare, BookOpen, LogOut, PanelLeftClose, MessageCircle, AlertTriangle } from 'lucide-react';
+import React, { useState, useEffect } from 'react';
+import { ChevronDown, Plus, Info, MessageSquare, BookOpen, LogOut, PanelLeftClose, MessageCircle, AlertTriangle, Menu, PanelRightClose } from 'lucide-react';
 import SimulationGraph from './SimulationGraph';
 
 interface SimulationPageProps {
@@ -42,7 +42,20 @@ const SimulationPage: React.FC<SimulationPageProps> = ({ onBack, onOpenConversat
   const [society, setSociety] = useState('User Group 1');
   const [viewMode, setViewMode] = useState('Job Title');
   const [isBuilding, setIsBuilding] = useState(false);
-  const [isRightPanelOpen, setIsRightPanelOpen] = useState(true);
+  const [isRightPanelOpen, setIsRightPanelOpen] = useState(window.innerWidth > 1200);
+  const [isLeftPanelOpen, setIsLeftPanelOpen] = useState(window.innerWidth > 768);
+
+  // Handle window resize for mobile responsiveness
+  useEffect(() => {
+    const handleResize = () => {
+      if (window.innerWidth < 768) {
+        setIsLeftPanelOpen(false);
+        setIsRightPanelOpen(false);
+      }
+    };
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
 
   // Function to simulate rebuilding the graph when settings change
   const handleSettingChange = (setter: (val: string) => void, value: string) => {
@@ -59,16 +72,21 @@ const SimulationPage: React.FC<SimulationPageProps> = ({ onBack, onOpenConversat
   const currentFilters = VIEW_FILTERS[viewMode] || VIEW_FILTERS['Country'];
 
   return (
-    <div className="flex h-screen w-screen overflow-hidden bg-black text-white font-sans">
+    <div className="flex h-screen w-screen overflow-hidden bg-black text-white font-sans relative">
       {/* Sidebar */}
-      <aside className="w-[300px] flex-shrink-0 border-r border-gray-800 flex flex-col bg-[#0a0a0a] z-20">
+      <aside className={`fixed md:relative w-[300px] h-full flex-shrink-0 border-r border-gray-800 flex flex-col bg-[#0a0a0a] z-40 transition-all duration-300 ${isLeftPanelOpen ? 'translate-x-0' : '-translate-x-full md:-ml-[300px]'}`}>
         {/* 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>
+           <button 
+             onClick={() => setIsLeftPanelOpen(false)}
+             className="text-gray-500 hover:text-white"
+           >
+             <PanelLeftClose size={18}/>
+           </button>
         </div>
 
         {/* Scrollable Content */}
@@ -142,13 +160,13 @@ const SimulationPage: React.FC<SimulationPageProps> = ({ onBack, onOpenConversat
            <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...
+               Sustainable Luxury Narrative
              </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...
+               Radical Transparency Voice
              </div>
              <div className="text-sm text-gray-400 py-2 px-2 hover:bg-gray-800/50 rounded cursor-pointer truncate">
-               Sustainable Fashion 2024
+               Gen-Z Greenwash Perception
              </div>
            </div>
         </div>
@@ -172,9 +190,27 @@ const SimulationPage: React.FC<SimulationPageProps> = ({ onBack, onOpenConversat
       {/* Main Content Area */}
       <main className="flex-1 flex flex-col relative bg-black overflow-hidden">
          {/* Top Navigation Overlay */}
+         <div className="absolute top-4 left-4 right-4 z-30 flex justify-between items-center pointer-events-none">
+             {/* Left Toggle (when sidebar closed) */}
+             <button 
+               onClick={() => setIsLeftPanelOpen(true)}
+               className={`pointer-events-auto p-2 bg-gray-900/80 border border-gray-700 rounded-lg text-gray-400 hover:text-white transition-opacity ${isLeftPanelOpen ? 'opacity-0 pointer-events-none' : 'opacity-100'}`}
+             >
+                <Menu size={20} />
+             </button>
+
+             {/* Right Toggle (when output closed) */}
+             <button 
+               onClick={() => setIsRightPanelOpen(true)}
+               className={`pointer-events-auto p-2 bg-gray-900/80 border border-gray-700 rounded-lg text-gray-400 hover:text-white transition-opacity ml-auto ${isRightPanelOpen ? 'opacity-0 pointer-events-none' : 'opacity-100'}`}
+             >
+                <PanelRightClose size={20} className="rotate-180" />
+             </button>
+         </div>
+
          <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">
+             <div className="flex flex-wrap justify-center gap-2 pointer-events-auto max-w-[60%]">
                 {currentFilters.map((filter, idx) => (
                    <FilterChip key={idx} color={filter.color} label={filter.label} />
                 ))}
@@ -199,10 +235,10 @@ const SimulationPage: React.FC<SimulationPageProps> = ({ onBack, onOpenConversat
       </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]'}`}>
+      <aside className={`fixed right-0 md:relative w-[300px] h-full flex-shrink-0 border-l border-gray-800 flex flex-col bg-[#0a0a0a] z-40 transition-all duration-300 ${isRightPanelOpen ? 'translate-x-0' : 'translate-x-full md:-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>
+           <button onClick={() => setIsRightPanelOpen(false)} className="text-gray-500 hover:text-white"><PanelRightClose size={18}/></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">

components/UseCases.tsx

@@ -8,7 +8,7 @@ const UseCases: React.FC = () => {
         <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>
+        <h2 className="text-3xl md:text-5xl font-semibold text-center mb-20">Solve high-stakes branding challenges</h2>
         
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
           {USE_CASES.map((useCase, idx) => (

constants.ts

@@ -11,20 +11,20 @@ export const NAV_LINKS: NavLink[] = [
 export const USE_CASES: UseCase[] = [
   {
     category: UseCaseCategory.PR_COMMS,
-    title: "Craft Narratives",
-    description: "Test different communication strategies via API to deliver the right reaction",
+    title: "Brand Narratives",
+    description: "Test different brand communication strategies via API to deliver the right emotional impact",
     color: "bg-purple-500"
   },
   {
     category: UseCaseCategory.PRODUCT,
-    title: "Decide Features",
-    description: "Test how your target customers react to product ideas and new features",
+    title: "Market Positioning",
+    description: "Test how your target customers perceive your brand positioning and values",
     color: "bg-teal-500"
   },
   {
     category: UseCaseCategory.BRANDING,
-    title: "Stand Out",
-    description: "Test how different brand and voice ideas resonate with your ideal buyer.",
+    title: "Visual Identity",
+    description: "Test how different visual brand assets and voice ideas resonate with your ideal buyer.",
     color: "bg-pink-500"
   },
   {