import { motion } from "motion/react"; import { useState, useEffect } from "react"; import { Button } from "@/components/ui/button"; import { Container } from "@/components/ui/container"; import { Separator } from "@/components/ui/separator"; import { Badge } from "@/components/ui/badge"; import { Input } from "@/components/ui/input"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import { LayoutDashboard, Zap, BarChart2, Shield, CheckCircle, ArrowRight, Star, Layers, Code } from "lucide-react"; interface Feature { icon: React.ElementType; title: string; description: string; stats: string; } interface Stat { value: string; label: string; } const App = () => { const [scrollProgress, setScrollProgress] = useState(0); // Smooth scroll effect for parallax useEffect(() => { const handleScroll = () => { const scrolled = window.scrollY; const maxScroll = window.innerHeight; setScrollProgress(Math.min(scrolled / maxScroll, 1)); }; window.addEventListener("scroll", handleScroll); return () => window.removeEventListener("scroll", handleScroll); }, []); const features: Feature[] = [ { icon: Zap, title: "Lightning Fast", description: "Sub-100ms render times with optimized React 18 concurrent rendering.", stats: "99.9% uptime" }, { icon: Shield, title: "Enterprise Security", description: "SOC 2 compliant infrastructure with zero-trust architecture.", stats: "Bank-grade encryption" }, { icon: BarChart2, title: "Real-time Analytics", description: "Live dashboards with predictive ML models built-in.", stats: "2M+ daily events" } ]; const stats: Stat[] = [ { value: "10K+", label: "Active Users" }, { value: "2.4s", label: "Avg Load Time" }, { value: "99.8%", label: "NPS Score" }, { value: "40+", label: "Integrations" } ]; const techStack = ["React 18", "TypeScript", "Tailwind V4", "Framer Motion", "Shadcn UI"]; // Decorative SVG grain texture overlay const GrainOverlay = () => ( ); // Decorative rail components const HorizontalRail = () => (

); const VerticalRails = ({ children }: { children: React.ReactNode }) => (

{children}

); return (

{/* Visual Effects Layer */} {/* Hero Section */} {/* Multi-layered SVG Background with Masking */}

{/* Hero Content */} v3.0 Now Available Ship Products At Warp Speed The ultimate React development stack. Build production-ready apps with advanced motion systems, sophisticated data visualization, and military-grade security architecture. {/* Tech Stack Visualization */} {techStack.map((tech, i) => (


                  {tech}

))}



        {/* Horizontal Rail */}
        
          
        

        {/* Stats Section */}
        
          
            {stats.map((stat, i) => (
              
                
                  {stat.value}
                
                {stat.label}
              
            ))}
          
        

        {/* Horizontal Rail */}
        
          
        

        {/* Features Section */}
        
          
            {features.map((feature, i) => (
              
                
                  
                    
                      
                    
                    {feature.title}
                  
                  
                    {feature.description}
                    
                      {feature.stats}
                    
                  
                
              
            ))}
          
        

        {/* Horizontal Rail */}
        
          
        

        {/* CTA Section with Matte Lighting */}
        
          {/* Matte lighting overlay */}
          
          
          
            
              Ready to Transform Your Development?
            
            
              Join 10,000+ developers shipping faster with our enterprise-grade React stack.
            
            
            
              
              
            

            
              No credit card required • 14-day free trial • Cancel anytime
            
          
        

        {/* Footer Rail */}
        
          
        

        {/* Footer */}
        
          
            {["Docs", "GitHub", "Discord", "Twitter"].map((item) => (
              
                {item}
              
            ))}
          
          © 2024 Shadway Design. Crafted with precision and passion.
        
      
    
  );
};

export default App;

Svg Masked Landing Page