import { Button } from "@/components/ui/button"; import { Container } from "@/components/ui/container"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import { Badge } from "@/components/ui/badge"; import { ArrowRight, Cpu, Database, Zap, Shield, BarChart, Server, Network, Cloud, Lock, Terminal, Code } from "lucide-react"; import { motion } from "framer-motion"; import { useState } from "react"; interface FeatureCard { icon: React.ReactNode; title: string; description: string; stats: string[]; } const App = () => { const [activeFeature, setActiveFeature] = useState(0); const features: FeatureCard[] = [ { icon: , title: "Compute Engine", description: "High-performance container orchestration with automatic scaling.", stats: ["99.99% uptime", "50ms cold start", "Auto-scaling 0-1000"] }, { icon: , title: "Data Layer", description: "Distributed SQL database with ACID compliance and global replication.", stats: ["<100ms read", "95% cache hit", "Multi-region sync"] }, { icon: , title: "Edge Functions", description: "Deploy serverless code to 300+ edge locations worldwide.", stats: ["<1ms latency", "Global routing", "Zero config"] }, { icon: , title: "Security", description: "Enterprise-grade security with automated compliance.", stats: ["SOC 2 Type II", "End-to-end TLS", "Role-based auth"] } ]; const metrics = [ { label: "Requests/sec", value: "45K", trend: "+12%" }, { label: "Cache Hit", value: "98.5%", trend: "+2.1%" }, { label: "Uptime", value: "99.99%", trend: "Stable" }, { label: "Latency", value: "47ms", trend: "-8ms" } ]; const navLinks = ["Docs", "Pricing", "Security", "Community"]; return (

{/* Background Pattern - SVG Masked */}

{/* Decorative Vertical Rails - Left */}

{/* Navigation */}

Vibecraft

{navLinks.map((link, i) => ( {link} ))}

{/* Hero Section */}

v2.0 Now Available Build at the Speed
of Thought Deploy production-ready applications with zero configuration. Scale automatically from prototype to enterprise.



          {/* Metrics Dashboard */}
          
            {metrics.map((metric, i) => (
              
                
                
                  
                    {metric.label}
                  
                  {metric.value}
                  {metric.trend}
                
              
            ))}



      {/* Decorative Horizontal Rails */}
      
      
      

      {/* Features Section */}
      
        
          
            {/* Left: Feature List */}
            
              
                Technical Stack
                
                  Engineered for performance. Built for scale. Deployed in seconds.
                
                
                
                  {features.map((feature, i) => (
                     setActiveFeature(i)}
                      className={`w-full text-left p-4 rounded-lg border transition-all ${
                        activeFeature === i
                          ? "border-primary bg-primary/10"
                          : "border-border hover:border-primary/50"
                      }`}
                      whileHover={{ x: 4 }}
                      whileTap={{ scale: 0.98 }}
                    >
                      
                        
                          {feature.icon}
                        
                        {feature.title}
                      
                    
                  ))}
                
              
            

            {/* Right: Active Feature Detail */}
            
              {features.map((feature, i) => (
                
                  
                    
                      
                        {feature.icon}
                        {feature.title}
                      
                    
                    
                      {feature.description}
                      
                      
                        {feature.stats.map((stat, j) => (
                          
                            {stat}
                          
                        ))}
                      
                      
                      {/* Mini Architecture Diagram */}
                      
                        
                          Request Flow
                          →
                        
                        
                          
                          
                          
                        
                        
                          Edge
                          Core
                          Region
                        
                      
                    
                  
                
              ))}
            
          
        
      

      {/* Decorative Horizontal Rails - Footer Area */}
      
      
      

      {/* Footer */}
      
        
          
            
              
            
            Vibecraft
          
          
          
            Status
            Changelog
            API
          
          
          
            © 2024 Vibecraft. Engineered with precision.
          
        
      

      {/* Decorative Vertical Rails - Right */}
      
      
    
  );
};

// Play Icon Component
const PlayIcon = () => (
  
);

export default App;

Vibecraft Hero Section