import React, { useState, useEffect } from 'react'; import { motion } from 'motion/react'; import { Container } from '@/components/ui/container'; import { Button } from '@/components/ui/button'; import { Badge } from '@/components/ui/badge'; const Header = () => { const [isScrolled, setIsScrolled] = useState(false); useEffect(() => { const handleScroll = () => { setIsScrolled(window.scrollY > 20); }; window.addEventListener('scroll', handleScroll); return () => window.removeEventListener('scroll', handleScroll); }, []); const navItems = [ { label: 'Features', href: '#features' }, { label: 'Pricing', href: '#pricing' }, { label: 'About', href: '#about' }, { label: 'Contact', href: '#contact' }, ]; return (

Nexus ); }; const HeroSection = () => { return (

{/* Left Content */} v2.0 Now Available Build faster with intelligent tools Streamline your development workflow with our comprehensive toolkit. Designed for modern teams who value speed, quality, and collaboration.

99.9% Uptime

24/7 Support

{/* Right Image */}

{/* Decorative elements */}

); }; const App = () => { return (

{/* Demo sections to show scroll effect */}

Features Section

Scroll to see header effect

); }; export default App;

Clean Header and Hero Section