Create LandingPage.tsx

components/LandingPage.tsx

@@ -0,0 +1,228 @@
+
+import React from 'react';
+import { Sparkles, ArrowRight, Layers, Brain, Code2, Zap, Layout, ShieldCheck, Box } from 'lucide-react';
+
+interface LandingPageProps {
+  onEnterApp: () => void;
+}
+
+const LandingPage: React.FC<LandingPageProps> = ({ onEnterApp }) => {
+  const handleScrollTo = (id: string) => {
+    const element = document.getElementById(id);
+    if (element) {
+      element.scrollIntoView({ behavior: 'smooth' });
+    }
+  };
+
+  return (
+    <div className="h-screen w-full bg-slate-950 text-slate-200 overflow-y-auto overflow-x-hidden selection:bg-purple-500/30">
+      {/* Navbar */}
+      <nav 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-2">
+            <Box className="text-blue-500" size={24} />
+            <span className="font-bold text-lg tracking-tight text-white">wuhp</span>
+          </div>
+          <div className="hidden md:flex items-center gap-6 text-sm font-medium text-slate-400">
+            <button onClick={() => handleScrollTo('features')} className="hover:text-white transition-colors">Features</button>
+            <button onClick={onEnterApp} className="hover:text-white transition-colors">AI Agents</button>
+            <button onClick={onEnterApp} className="hover:text-white transition-colors">Code Gen</button>
+          </div>
+          <button 
+            onClick={onEnterApp}
+            className="bg-slate-800 hover:bg-slate-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition-all border border-slate-700 hover:border-blue-500/50"
+          >
+            Launch Builder
+          </button>
+        </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>
+          
+          <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>
+      </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."
+            />
+          </div>
+        </div>
+      </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. Describe your idea—like "A multimodal model that combines video and audio for sentiment analysis"—and watch the agents work.
+                   </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>
+      </section>
+
+      {/* Footer */}
+      <footer className="py-12 border-t border-slate-800/50 bg-slate-950 text-slate-500 text-sm">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col md:flex-row justify-between items-center gap-6">
+           <div className="flex items-center gap-2">
+             <Box size={20} className="text-slate-400" />
+             <span className="font-semibold text-slate-300">wuhp.org</span>
+           </div>
+           
+           <div>
+             &copy; {new Date().getFullYear()} wuhp. All rights reserved.
+           </div>
+        </div>
+      </footer>
+    </div>
+  );
+};
+
+const FeatureCard: React.FC<{ icon: React.ReactNode, title: string, description: string }> = ({ icon, title, description }) => (
+  <div className="p-6 rounded-2xl bg-slate-900 border border-slate-800 hover:bg-slate-800/80 transition-colors group">
+    <div className="w-12 h-12 rounded-lg bg-slate-950 border border-slate-800 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
+      {icon}
+    </div>
+    <h3 className="text-xl font-bold text-white mb-2">{title}</h3>
+    <p className="text-slate-400 leading-relaxed">{description}</p>
+  </div>
+);
+
+const AgentRow: React.FC<{ name: string, role: string, color: string }> = ({ name, role, color }) => (
+   <div className="flex items-start gap-4 p-4 rounded-xl bg-slate-950 border border-slate-800">
+      <div className={`w-2 h-2 mt-2 rounded-full shrink-0 ${color}`} />
+      <div>
+         <h4 className="font-bold text-slate-200">{name}</h4>
+         <p className="text-sm text-slate-400">{role}</p>
+      </div>
+   </div>
+);
+
+export default LandingPage;