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.
"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>
);
}