3D Interactive Navbar

"use client";


import { Navbar } from "@/components/ui/3d-interactive-navbar";
import { motion } from "framer-motion";

export default function HeroSection() {
  return (
    <div> <Navbar />
    <section className="bg-black text-white min-h-screen flex items-center">
      <div className="container mx-auto px-4 md:px-6 lg:px-8 py-20">
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-x-12 gap-y-16 items-center">
          <div>
            <motion.h1 
              className="text-5xl md:text-7xl lg:text-8xl font-light tracking-tight leading-[0.9]"
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.8, ease: "easeOut" }}
            >
              Navbar
              <br />
              With Interactive
              <br />
              3D Element
            </motion.h1>
          </div>
          
          <div>
            <motion.p 
              className="text-lg md:text-xl font-light text-white/80 mb-8"
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.8, delay: 0.2, ease: "easeOut" }}
            >
               A sophisticated, interactive navbar with 3D effects powered by Three.js and React Three Fiber. Features smooth animations, hover effects, and responsive design. Includes custom card components with reflective materials and dynamic lighting.
            </motion.p>
            
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.8, delay: 0.4, ease: "easeOut" }}
            >
              <a 
                href="/contact"
                className="inline-flex items-center px-6 py-3 border border-white/20 bg-white/5 hover:bg-white/10 backdrop-blur-sm transition-colors rounded-md"
              >
                <span className="mr-2">Learn more</span>
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M5 12H19" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                  <path d="M12 5L19 12L12 19" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                </svg>
              </a>
            </motion.div>
          </div>
        </div>
      </div>
    </section>
    </div>
  );
}