Update components/LandingPage.tsx

components/LandingPage.tsx

@@ -17,12 +17,12 @@ const LandingPage: React.FC<LandingPageProps> = ({ onEnterApp }) => {
   return (
     <div className="fixed inset-0 w-screen h-screen bg-slate-950 text-slate-200 overflow-y-auto overflow-x-hidden selection:bg-purple-500/30 z-50">
       {/* Navbar */}
-      <nav className="border-b border-slate-800/50 bg-slate-950/80 backdrop-blur-md fixed top-0 w-full z-50">
+      <nav aria-label="Main navigation" className="border-b border-slate-800/50 bg-slate-950/80 backdrop-blur-md fixed top-0 w-full z-50">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
           <div className="flex items-center gap-3">
             <img 
               src="https://huggingface.co/spaces/wuhp/testarcbuilder/resolve/main/public/logo.png" 
-              alt="wuhp Architecture Builder Logo" 
+              alt="wuhp - Visual AI Architect Logo" 
               className="w-10 h-10 object-contain" 
             />
             <span className="font-bold text-lg tracking-tight text-white">wuhp</span>
@@ -41,156 +41,159 @@ const LandingPage: React.FC<LandingPageProps> = ({ onEnterApp }) => {
         </div>
       </nav>
 
-      {/* Hero Section */}
-      <section className="relative pt-32 pb-20 lg:pt-48 lg:pb-32 overflow-hidden">
-        <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[800px] h-[400px] bg-blue-600/20 rounded-full blur-[120px] -z-10" />
-        <div className="absolute bottom-0 right-0 w-[600px] h-[300px] bg-purple-600/10 rounded-full blur-[100px] -z-10" />
-        
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
-          <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-slate-800/50 border border-slate-700/50 text-xs font-medium text-blue-400 mb-6 animate-in fade-in slide-in-from-bottom-4 duration-700">
-            <Sparkles size={12} />
-            <span>Now powered by Gemini 2.5</span>
-          </div>
-          
-          <h1 className="text-5xl md:text-7xl font-extrabold text-white tracking-tight mb-6 animate-in fade-in slide-in-from-bottom-8 duration-700 delay-100">
-            Design Deep Learning <br />
-            <span className="bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent">
-              With AI Architect Agents
-            </span>
-          </h1>
+      {/* Main Content */}
+      <main>
+        {/* Hero Section */}
+        <section className="relative pt-32 pb-20 lg:pt-48 lg:pb-32 overflow-hidden">
+          <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[800px] h-[400px] bg-blue-600/20 rounded-full blur-[120px] -z-10" />
+          <div className="absolute bottom-0 right-0 w-[600px] h-[300px] bg-purple-600/10 rounded-full blur-[100px] -z-10" />
           
-          <p className="max-w-2xl mx-auto text-lg text-slate-400 mb-10 leading-relaxed animate-in fade-in slide-in-from-bottom-8 duration-700 delay-200">
-            The visual interface where human creativity meets AI precision. Draft complex neural networks, validate architectures, and generate production-ready PyTorch code instantly.
-          </p>
-          
-          <div className="flex flex-col sm:flex-row items-center justify-center gap-4 animate-in fade-in slide-in-from-bottom-8 duration-700 delay-300">
-            <button 
-              onClick={onEnterApp}
-              className="w-full sm:w-auto px-8 py-4 bg-blue-600 hover:bg-blue-500 text-white rounded-xl font-bold text-lg shadow-lg shadow-blue-500/25 transition-all flex items-center justify-center gap-2 group"
-            >
-              Get Started
-              <ArrowRight className="group-hover:translate-x-1 transition-transform" size={20} />
-            </button>
-            <button 
-              onClick={() => handleScrollTo('features')}
-              className="w-full sm:w-auto px-8 py-4 bg-slate-800/50 hover:bg-slate-800 text-slate-200 rounded-xl font-semibold text-lg border border-slate-700 backdrop-blur transition-all flex items-center justify-center"
-            >
-              Explore Features
-            </button>
+          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+            <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-slate-800/50 border border-slate-700/50 text-xs font-medium text-blue-400 mb-6 animate-in fade-in slide-in-from-bottom-4 duration-700">
+              <Sparkles size={12} />
+              <span>Now powered by Gemini 2.5</span>
+            </div>
+            
+            <h1 className="text-5xl md:text-7xl font-extrabold text-white tracking-tight mb-6 animate-in fade-in slide-in-from-bottom-8 duration-700 delay-100">
+              Design Deep Learning <br />
+              <span className="bg-gradient-to-r from-blue-400 to-purple-500 bg-clip-text text-transparent">
+                With AI Architect Agents
+              </span>
+            </h1>
+            
+            <p className="max-w-2xl mx-auto text-lg text-slate-400 mb-10 leading-relaxed animate-in fade-in slide-in-from-bottom-8 duration-700 delay-200">
+              The visual interface where human creativity meets AI precision. Draft complex neural networks, validate architectures, and generate production-ready PyTorch code instantly.
+            </p>
+            
+            <div className="flex flex-col sm:flex-row items-center justify-center gap-4 animate-in fade-in slide-in-from-bottom-8 duration-700 delay-300">
+              <button 
+                onClick={onEnterApp}
+                className="w-full sm:w-auto px-8 py-4 bg-blue-600 hover:bg-blue-500 text-white rounded-xl font-bold text-lg shadow-lg shadow-blue-500/25 transition-all flex items-center justify-center gap-2 group"
+              >
+                Get Started
+                <ArrowRight className="group-hover:translate-x-1 transition-transform" size={20} />
+              </button>
+              <button 
+                onClick={() => handleScrollTo('features')}
+                className="w-full sm:w-auto px-8 py-4 bg-slate-800/50 hover:bg-slate-800 text-slate-200 rounded-xl font-semibold text-lg border border-slate-700 backdrop-blur transition-all flex items-center justify-center"
+              >
+                Explore Features
+              </button>
+            </div>
           </div>
-        </div>
-      </section>
+        </section>
 
-      {/* Features Grid */}
-      <section id="features" className="py-24 bg-slate-900/30 border-t border-slate-800/50">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="text-center mb-16">
-            <h2 className="text-3xl font-bold text-white mb-4">Everything you need to build</h2>
-            <p className="text-slate-400">From concept to code, powered by advanced specialized agents.</p>
-          </div>
-          
-          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
-            <FeatureCard 
-              icon={<Layout className="text-blue-400" />}
-              title="Visual Node Editor"
-              description="Drag, drop, and connect over 50+ layer types including Transformers, Convolutions, and specialized blocks for Audio and 3D."
-            />
-            <FeatureCard 
-              icon={<Brain className="text-purple-400" />}
-              title="Multi-Agent System"
-              description="Our Architect, Critic, and Refiner agents collaborate to interpret your prompts and build optimal graph structures automatically."
-            />
-            <FeatureCard 
-              icon={<Code2 className="text-emerald-400" />}
-              title="PyTorch Export"
-              description="Instantly convert your visual graph into clean, runnable PyTorch code, complete with shape handling and forward passes."
-            />
-            <FeatureCard 
-              icon={<ShieldCheck className="text-amber-400" />}
-              title="Smart Validation"
-              description="Detect shape mismatches and disconnected nodes before you run. Use the Auto-Fixer to correct errors instantly."
-            />
-            <FeatureCard 
-              icon={<Zap className="text-pink-400" />}
-              title="Rapid Prototyping"
-              description="Start from templates like YOLO, ResNet, or Transformers, or use natural language to generate entire architectures from scratch."
-            />
-             <FeatureCard 
-              icon={<Layers className="text-cyan-400" />}
-              title="Advanced Modules"
-              description="Support for cutting-edge layers: Sparse MoE, RoPE, SwiGLU, 3D Gaussian Splats, and more out of the box."
-            />
+        {/* Features Grid */}
+        <section id="features" className="py-24 bg-slate-900/30 border-t border-slate-800/50">
+          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div className="text-center mb-16">
+              <h2 className="text-3xl font-bold text-white mb-4">Everything you need to build</h2>
+              <p className="text-slate-400">From concept to code, powered by advanced specialized agents.</p>
+            </div>
+            
+            <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
+              <FeatureCard 
+                icon={<Layout className="text-blue-400" />}
+                title="Visual Node Editor"
+                description="Drag, drop, and connect over 50+ layer types including Transformers, Convolutions, and specialized blocks for Audio and 3D."
+              />
+              <FeatureCard 
+                icon={<Brain className="text-purple-400" />}
+                title="Multi-Agent System"
+                description="Our Architect, Critic, and Refiner agents collaborate to interpret your prompts and build optimal graph structures automatically."
+              />
+              <FeatureCard 
+                icon={<Code2 className="text-emerald-400" />}
+                title="PyTorch Export"
+                description="Instantly convert your visual graph into clean, runnable PyTorch code, complete with shape handling and forward passes."
+              />
+              <FeatureCard 
+                icon={<ShieldCheck className="text-amber-400" />}
+                title="Smart Validation"
+                description="Detect shape mismatches and disconnected nodes before you run. Use the Auto-Fixer to correct errors instantly."
+              />
+              <FeatureCard 
+                icon={<Zap className="text-pink-400" />}
+                title="Rapid Prototyping"
+                description="Start from templates like YOLO, ResNet, or Transformers, or use natural language to generate entire architectures from scratch."
+              />
+              <FeatureCard 
+                icon={<Layers className="text-cyan-400" />}
+                title="Advanced Modules"
+                description="Support for cutting-edge layers: Sparse MoE, RoPE, SwiGLU, 3D Gaussian Splats, and more out of the box."
+              />
+            </div>
           </div>
-        </div>
-      </section>
+        </section>
 
-      {/* Agent Workflow Section */}
-      <section id="agents" className="py-24 relative overflow-hidden">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="bg-slate-900 border border-slate-800 rounded-3xl p-8 md:p-12 relative overflow-hidden">
-             {/* Background glow */}
-             <div className="absolute top-0 right-0 w-96 h-96 bg-blue-500/10 rounded-full blur-[80px] -z-10" />
-             
-             <div className="grid lg:grid-cols-2 gap-12 items-center">
-                <div>
-                   <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-purple-500/10 border border-purple-500/20 text-xs font-medium text-purple-400 mb-6">
-                      <Brain size={12} />
-                      <span>Intelligent Workflow</span>
-                   </div>
-                   <h2 className="text-3xl md:text-4xl font-bold text-white mb-6">
-                     Meet your new <br />
-                     <span className="text-blue-400">AI Engineering Team</span>
-                   </h2>
-                   <p className="text-slate-400 text-lg mb-8 leading-relaxed">
-                     Stop writing boilerplate. Simply describe your idea, such as "A multimodal model that combines video and audio for sentiment analysis," and let the agents handle the rest.
-                   </p>
-                   
-                   <div className="space-y-4">
-                      <AgentRow name="The Architect" role="Drafts initial graph structures based on your requirements." color="bg-blue-500" />
-                      <AgentRow name="The Critic" role="Reviews architectures for logical errors and bottlenecks." color="bg-amber-500" />
-                      <AgentRow name="The Refiner" role="Polishes the design and generates the final implementation." color="bg-emerald-500" />
-                   </div>
-                </div>
-                
-                <div className="relative">
-                   {/* Abstract Representation of Graph */}
-                   <div className="bg-slate-950 border border-slate-800 rounded-xl p-6 shadow-2xl relative z-10">
-                      <div className="flex items-center justify-between mb-4 border-b border-slate-800 pb-4">
-                         <div className="flex gap-2">
-                            <div className="w-3 h-3 rounded-full bg-red-500" />
-                            <div className="w-3 h-3 rounded-full bg-yellow-500" />
-                            <div className="w-3 h-3 rounded-full bg-green-500" />
-                         </div>
-                         <div className="text-xs text-slate-500 font-mono">agent_activity.log</div>
-                      </div>
-                      <div className="space-y-3 font-mono text-sm">
-                         <div className="flex gap-2">
-                            <span className="text-blue-400">[Architect]</span>
-                            <span className="text-slate-300">Drafting ResNet backbone...</span>
-                         </div>
-                         <div className="flex gap-2">
-                            <span className="text-amber-400">[Critic]</span>
-                            <span className="text-slate-300">Detected shape mismatch at Node 4.</span>
-                         </div>
-                         <div className="flex gap-2">
-                            <span className="text-emerald-400">[Refiner]</span>
-                            <span className="text-slate-300">Adding Pooling layer to fix dims.</span>
-                         </div>
-                         <div className="flex gap-2 opacity-50">
-                            <span className="text-slate-500">...</span>
-                         </div>
-                         <div className="mt-4 p-3 bg-slate-900 rounded border border-slate-800 text-emerald-400">
-                            Build Complete. 0 Errors.
-                         </div>
-                      </div>
-                   </div>
-                   {/* Decorative Elements */}
-                   <div className="absolute -bottom-6 -right-6 w-full h-full border border-slate-800 rounded-xl -z-10 bg-slate-900/50" />
-                </div>
-             </div>
+        {/* Agent Workflow Section */}
+        <section id="agents" className="py-24 relative overflow-hidden">
+          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div className="bg-slate-900 border border-slate-800 rounded-3xl p-8 md:p-12 relative overflow-hidden">
+              {/* Background glow */}
+              <div className="absolute top-0 right-0 w-96 h-96 bg-blue-500/10 rounded-full blur-[80px] -z-10" />
+              
+              <div className="grid lg:grid-cols-2 gap-12 items-center">
+                  <div>
+                    <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-purple-500/10 border border-purple-500/20 text-xs font-medium text-purple-400 mb-6">
+                        <Brain size={12} />
+                        <span>Intelligent Workflow</span>
+                    </div>
+                    <h2 className="text-3xl md:text-4xl font-bold text-white mb-6">
+                      Meet your new <br />
+                      <span className="text-blue-400">AI Engineering Team</span>
+                    </h2>
+                    <p className="text-slate-400 text-lg mb-8 leading-relaxed">
+                      Stop writing boilerplate. Simply describe your idea, such as "A multimodal model that combines video and audio for sentiment analysis," and let the agents handle the rest.
+                    </p>
+                    
+                    <div className="space-y-4">
+                        <AgentRow name="The Architect" role="Drafts initial graph structures based on your requirements." color="bg-blue-500" />
+                        <AgentRow name="The Critic" role="Reviews architectures for logical errors and bottlenecks." color="bg-amber-500" />
+                        <AgentRow name="The Refiner" role="Polishes the design and generates the final implementation." color="bg-emerald-500" />
+                    </div>
+                  </div>
+                  
+                  <div className="relative">
+                    {/* Abstract Representation of Graph */}
+                    <div className="bg-slate-950 border border-slate-800 rounded-xl p-6 shadow-2xl relative z-10">
+                        <div className="flex items-center justify-between mb-4 border-b border-slate-800 pb-4">
+                          <div className="flex gap-2">
+                              <div className="w-3 h-3 rounded-full bg-red-500" />
+                              <div className="w-3 h-3 rounded-full bg-yellow-500" />
+                              <div className="w-3 h-3 rounded-full bg-green-500" />
+                          </div>
+                          <div className="text-xs text-slate-500 font-mono">agent_activity.log</div>
+                        </div>
+                        <div className="space-y-3 font-mono text-sm">
+                          <div className="flex gap-2">
+                              <span className="text-blue-400">[Architect]</span>
+                              <span className="text-slate-300">Drafting ResNet backbone...</span>
+                          </div>
+                          <div className="flex gap-2">
+                              <span className="text-amber-400">[Critic]</span>
+                              <span className="text-slate-300">Detected shape mismatch at Node 4.</span>
+                          </div>
+                          <div className="flex gap-2">
+                              <span className="text-emerald-400">[Refiner]</span>
+                              <span className="text-slate-300">Adding Pooling layer to fix dims.</span>
+                          </div>
+                          <div className="flex gap-2 opacity-50">
+                              <span className="text-slate-500">...</span>
+                          </div>
+                          <div className="mt-4 p-3 bg-slate-900 rounded border border-slate-800 text-emerald-400">
+                              Build Complete. 0 Errors.
+                          </div>
+                        </div>
+                    </div>
+                    {/* Decorative Elements */}
+                    <div className="absolute -bottom-6 -right-6 w-full h-full border border-slate-800 rounded-xl -z-10 bg-slate-900/50" />
+                  </div>
+              </div>
+            </div>
           </div>
-        </div>
-      </section>
+        </section>
+      </main>
 
       {/* Footer */}
       <footer className="py-12 border-t border-slate-800/50 bg-slate-950 text-slate-500 text-sm">
@@ -198,7 +201,7 @@ const LandingPage: React.FC<LandingPageProps> = ({ onEnterApp }) => {
            <div className="flex items-center gap-2">
              <img 
               src="https://huggingface.co/spaces/wuhp/testarcbuilder/resolve/main/public/logo.png" 
-              alt="wuhp Architecture Builder Logo" 
+              alt="wuhp Logo" 
               className="w-6 h-6 object-contain opacity-80" 
              />
              <span className="font-semibold text-slate-300">wuhp.org</span>