export default function EyeskartScentkartLanding() { const floatingCard = "transform-gpu transition-all duration-700 hover:scale-110 hover:-translate-y-4 hover:rotate-2 hover:shadow-[0_30px_80px_rgba(0,0,0,0.45)]"; return ( <div className="min-h-screen bg-black text-white overflow-hidden font-sans"> {/* Hero Section */} <section className="relative min-h-screen flex flex-col items-center justify-center bg-gradient-to-br from-slate-950 via-blue-950 to-black px-6 text-center perspective-[2500px] overflow-hidden"> <div className="absolute inset-0 opacity-20 bg-[radial-gradient(circle_at_center,rgba(59,130,246,0.4),transparent_60%)]"></div> <div className="absolute top-20 left-10 w-72 h-72 bg-blue-500/20 blur-3xl rounded-full animate-pulse motion-safe:animate-[pulse_4s_ease-in-out_infinite]"></div> <div className="absolute bottom-20 right-10 w-72 h-72 bg-yellow-500/20 blur-3xl rounded-full animate-pulse motion-safe:animate-[pulse_4s_ease-in-out_infinite]"></div> <div className="relative z-10 max-w-7xl mx-auto"> <h1 className="text-5xl md:text-7xl font-extrabold tracking-tight leading-tight"> KARTLE </h1> <p className="mt-4 text-blue-300 text-lg tracking-[0.35em] uppercase"> Master Brand Experience </p> <p className="mt-6 text-xl md:text-2xl text-slate-300 max-w-3xl mx-auto leading-relaxed"> Where Premium Brands Meet World-Class Digital Experience. </p> <div className="mt-10 flex flex-col md:flex-row gap-5 justify-center"> <a href="#eyeskart" className="px-8 py-4 rounded-2xl bg-slate-300 text-black hover:bg-slate-200 transition-all duration-300 text-lg font-semibold shadow-2xl" > Enter Eyeskart </a> <a href="#scentkart" className="px-8 py-4 rounded-2xl bg-yellow-500 text-black hover:bg-yellow-400 transition-all duration-300 text-lg font-semibold shadow-2xl" > Enter Scentkart </a> </div> <div className="mt-16 animate-pulse motion-safe:animate-[pulse_4s_ease-in-out_infinite] text-slate-400 text-sm tracking-widest uppercase"> Expert Edition • Cinematic Motion Ready Ultra Premium 3D CGI / Expert Experience </div> </div> </section> {/* Eyeskart Section */} <section className="py-24 px-6 bg-black relative overflow-hidden"> <div className="max-w-7xl mx-auto text-center mb-20"> <h2 className="text-4xl md:text-6xl font-bold">Kartle Premium Brand Universe</h2> <p className="text-slate-400 mt-4">Immersive 3D Multi-Brand Luxury Experience</p> </div> </section> <section id="eyeskart" className="relative py-24 px-6 bg-gradient-to-b from-slate-950 via-[#020b1f] to-[#041a40]" > <div className="max-w-7xl mx-auto grid md:grid-cols-2 gap-14 items-center"> <div> <div className="inline-block px-4 py-2 rounded-full bg-slate-300/10 text-slate-200 text-sm mb-6 border border-slate-300/20"> Silver Signature Optical Experience </div> <h2 className="text-5xl md:text-6xl font-bold mb-8"> EYESKART </h2> <p className="text-slate-300 text-lg leading-relaxed mb-10"> Your Vision, Our Focus. Advanced eye care, premium frames, instant fittings and home eye checkups for senior citizens. </p> <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-10"> {[ 'Eye Checkup', 'Frames', 'Goggles', 'Spects', 'Repair', 'Fitting', 'Home Eye Checkup', 'Instant 10% Offer' ].map((item) => ( <div key={item} className="bg-white/5 border border-white/10 rounded-2xl p-4 backdrop-blur-md hover:scale-110 hover:-translate-y-2 transition-all duration-500" > {item} </div> ))} </div> <div className="flex flex-wrap gap-4"> <a href="https://instagram.com/eyeskart.official" target="_blank" className="px-6 py-3 rounded-xl bg-slate-300 text-black hover:bg-slate-200 transition-all" > Instagram Order </a> <a href="https://wa.me/919272527913" target="_blank" className="px-6 py-3 rounded-xl bg-green-600 hover:bg-green-500 transition-all" > WhatsApp Order </a> </div> </div> <div className="relative"> <div className="absolute inset-0 bg-blue-500/20 blur-3xl rounded-full"></div> <div className={`relative rounded-[40px] border border-white/10 bg-white/5 backdrop-blur-2xl p-8 shadow-2xl ${floatingCard}`}> <div className="aspect-square rounded-3xl bg-gradient-to-br from-slate-200/30 via-slate-400/10 to-[#020b1f] border border-slate-300/20 shadow-[0_0_60px_rgba(192,192,192,0.15)] flex items-center justify-center text-4xl font-bold tracking-widest"> 3D CGI </div> <div className="mt-6 text-center text-slate-300"> 3D Silver Optical Luxury Experience </div> </div> </div> </div> </section> {/* Scentkart Section */} <section id="scentkart" className="relative py-24 px-6 bg-gradient-to-b from-black to-yellow-950" > <div className="max-w-7xl mx-auto grid md:grid-cols-2 gap-14 items-center"> <div className="order-2 md:order-1 relative"> <div className="absolute inset-0 bg-yellow-500/20 blur-3xl rounded-full"></div> <div className={`relative rounded-[40px] border border-white/10 bg-white/5 backdrop-blur-2xl p-8 shadow-2xl ${floatingCard}`}> <div className="aspect-square rounded-3xl bg-gradient-to-br from-yellow-300/30 to-black flex items-center justify-center text-4xl font-bold tracking-widest"> LUXURY </div> <div className="mt-6 text-center text-slate-300"> Signature Fragrance Experience </div> </div> </div> <div className="order-1 md:order-2"> <div className="inline-block px-4 py-2 rounded-full bg-yellow-500/20 text-yellow-300 text-sm mb-6 border border-yellow-400/20"> Premium Fragrance Brand </div> <h2 className="text-5xl md:text-6xl font-bold mb-8"> SCENTKART </h2> <p className="text-slate-300 text-lg leading-relaxed mb-10"> Fragrance To The Soul. Explore luxurious perfumes, attars, branded replicas and custom fragrance creation. </p> <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-10"> {[ 'Regular Perfumes', 'Regular Attars', 'Branded Perfumes', 'Branded Attars', 'Replica Making', 'Perfume On Demand', 'Luxury Collection', 'Instant 10% Offer' ].map((item) => ( <div key={item} className="bg-white/5 border border-white/10 rounded-2xl p-4 backdrop-blur-md hover:scale-110 hover:-translate-y-2 transition-all duration-500" > {item} </div> ))} </div> <div className="flex flex-wrap gap-4"> <a href="https://instagram.com/scentkart.official" target="_blank" className="px-6 py-3 rounded-xl bg-yellow-500 text-black hover:bg-yellow-400 transition-all" > Instagram Order </a> <a href="https://wa.me/919272527913" target="_blank" className="px-6 py-3 rounded-xl bg-green-600 hover:bg-green-500 transition-all" > WhatsApp Order </a> </div> </div> </div> </section> {/* Booking Section */} <section className="py-24 px-6 bg-black"> <div className="max-w-4xl mx-auto text-center"> <h2 className="text-4xl md:text-5xl font-bold mb-6"> Book Premium Experience </h2> <p className="text-slate-400 text-lg mb-12"> Eye checkups, premium frame consultation, fragrance consultation and custom perfume requests. </p> <div className="grid md:grid-cols-2 gap-6 text-left"> <input placeholder="Your Name" className="bg-white/5 border border-white/10 rounded-2xl px-5 py-4 outline-none" /> <input placeholder="Mobile Number" className="bg-white/5 border border-white/10 rounded-2xl px-5 py-4 outline-none" /> <input placeholder="Service Type" className="bg-white/5 border border-white/10 rounded-2xl px-5 py-4 outline-none" /> <input placeholder="Preferred Date" className="bg-white/5 border border-white/10 rounded-2xl px-5 py-4 outline-none" /> </div> <button className="mt-8 px-10 py-4 rounded-2xl bg-white text-black font-bold hover:scale-110 hover:-translate-y-2 transition-all duration-500 shadow-2xl"> Book Now </button> </div> </section> {/* Luxury Trust Section */} <section className="py-24 px-6 bg-gradient-to-b from-black to-slate-950"> <div className="max-w-7xl mx-auto grid md:grid-cols-4 gap-6 text-center"> {[ ['5000+', 'Happy Customers'], ['Premium', 'Luxury Collections'], ['24/7', 'Order Support'], ['Top Rated', 'Customer Experience'] ].map(([num, label]) => ( <div key={label} className="rounded-3xl border border-white/10 bg-white/5 backdrop-blur-xl p-8"> <div className="text-4xl font-bold text-white mb-2">{num}</div> <div className="text-slate-400">{label}</div> </div> ))} </div> </section> {/* Premium Testimonials */} <section className="py-24 px-6 bg-black"> <div className="max-w-6xl mx-auto text-center"> <h2 className="text-4xl md:text-5xl font-bold mb-12">Trusted By Premium Clients</h2> <div className="grid md:grid-cols-3 gap-6"> {['Luxury Experience!', 'Best Optical Service!', 'Amazing Fragrance Collection!'].map((quote) => ( <div key={quote} className="rounded-3xl border border-white/10 bg-white/5 p-8 backdrop-blur-xl text-slate-300"> {quote} </div> ))} </div> </div> </section> {/* Footer */} <footer className="border-t border-white/10 py-10 px-6 bg-black text-center text-slate-400"> <div className="text-lg font-semibold text-white mb-3"> EYESKART X SCENTKART </div> <div> Branch 1: 11 Mukti Plaza Opp Cinemax Bytco Point MG Road Nashik Road 422101 </div> <div className="mt-3"> Contact: +91 9272527913 </div> <div className="mt-2 text-slate-400"> Eyeskart: eyeskarts@gmail.com </div> <div className="mt-1 text-slate-400"> Scentkart: scentkart@gmail.com </div> <div className="mt-6 text-sm text-slate-500"> Designed With International Luxury Brand Standards • Expert Edition </div> </footer> </div> ); }