'use client' import React from 'react' import Link from 'next/link' import { ChevronRight, Menu, X } from 'lucide-react' import { Button } from '@/components/ui/button' import { AnimatedGroup } from '@/components/ui/animated-group' import { cn } from '@/lib/utils' import { useScroll } from 'motion/react' const transitionVariants = { item: { hidden: { opacity: 0, filter: 'blur(12px)', y: 12, }, visible: { opacity: 1, filter: 'blur(0px)', y: 0, transition: { type: 'spring', bounce: 0.3, duration: 1.5, }, }, }, } export function HeroSection() { return ( <>

Build and Ship 10x faster with NS

Tailwindcss highly customizable components for building modern websites and applications that look and feel the way you mean it.

Meet Our Customers

) } const menuItems = [ { name: 'Features', href: '#link' }, { name: 'Solution', href: '#link' }, { name: 'Pricing', href: '#link' }, { name: 'About', href: '#link' }, ] export const HeroHeader = () => { const [menuState, setMenuState] = React.useState(false) const [scrolled, setScrolled] = React.useState(false) const { scrollYProgress } = useScroll() React.useEffect(() => { const unsubscribe = scrollYProgress.on('change', (latest) => { setScrolled(latest > 0.05) }) return () => unsubscribe() }, [scrollYProgress]) return (

{item.name}

{item.name}

) } const Logo = ({ className }: { className?: string }) => { return ( ) }