export default function TitanCoreWebsite() { return ( <div className="min-h-screen bg-black text-white overflow-hidden"> {/* Background Glow /} <div className="absolute inset-0 bg-gradient-to-b from-red-950 via-black to-black opacity-90"></div> {/ Navbar /} <nav className="relative z-10 flex items-center justify-between px-8 py-5 border-b border-red-900/40 backdrop-blur-md"> <div className="flex items-center gap-3"> <img src="/mnt/data/titan core.jpeg" alt="Titan Core Logo" className="w-14 h-14 rounded-xl shadow-2xl border border-red-700" /> <div> <h1 className="text-2xl font-extrabold tracking-wide text-red-500"> TITAN CORE </h1> <p className="text-xs text-gray-400">Divine • Power • Legends</p> </div> </div> <div className="hidden md:flex gap-8 text-sm font-semibold text-gray-300"> <a href="#home" className="hover:text-red-500 transition">Home</a> <a href="#videos" className="hover:text-red-500 transition">Videos</a> <a href="#about" className="hover:text-red-500 transition">About</a> <a href="#join" className="hover:text-red-500 transition">Join</a> </div> </nav> {/ Hero Section /} <section id="home" className="relative z-10 flex flex-col items-center justify-center text-center px-6 pt-20 pb-24" > <div className="relative"> <img src="/mnt/data/titan core.jpeg" alt="Titan Core" className="w-64 h-64 md:w-80 md:h-80 object-cover rounded-3xl border-4 border-red-700 shadow-[0_0_80px_rgba(255,0,0,0.5)]" /> <div className="absolute inset-0 rounded-3xl bg-red-600/10 blur-2xl"></div> </div> <h2 className="mt-10 text-5xl md:text-7xl font-black tracking-widest bg-gradient-to-r from-red-500 to-white bg-clip-text text-transparent"> TITAN CORE </h2> <p className="mt-6 max-w-2xl text-lg md:text-xl text-gray-300 leading-relaxed"> Welcome to Titan Core — a divine universe of gods, legends, celestial warriors, mythology-inspired edits, powerful visuals, and epic storytelling filled with heavenly energy and dark god-like aesthetics. </p> <div className="flex flex-wrap gap-5 mt-10 justify-center"> <button className="px-8 py-4 bg-red-600 hover:bg-red-700 transition rounded-2xl font-bold text-lg shadow-lg shadow-red-900/50"> Subscribe Now </button> <button className="px-8 py-4 border border-red-700 hover:bg-red-900/20 transition rounded-2xl font-bold text-lg"> Watch Videos </button> </div> </section> {/ Stats /} <section className="relative z-10 grid grid-cols-1 md:grid-cols-3 gap-6 px-8 pb-24"> {[ ["100K+", "Views"], ["Godly", "Mythic Content"], ["Daily", "Shorts Uploads"], ].map((item, index) => ( <div key={index} className="bg-white/5 border border-red-900/30 rounded-3xl p-8 backdrop-blur-lg hover:scale-105 transition" > <h3 className="text-4xl font-black text-red-500">{item[0]}</h3> <p className="mt-2 text-gray-300 text-lg">{item[1]}</p> </div> ))} </section> {/ Videos /} <section id="videos" className="relative z-10 px-8 pb-24"> <div className="flex items-center justify-between mb-10"> <h2 className="text-4xl font-black text-white">Latest Videos</h2> <div className="h-1 w-24 bg-red-600 rounded-full"></div> </div> <div className="grid grid-cols-1 md:grid-cols-3 gap-8"> {[1, 2, 3].map((video) => ( <div key={video} className="group bg-white/5 border border-red-900/30 rounded-3xl overflow-hidden hover:scale-105 transition duration-300" > <div className="h-56 bg-gradient-to-br from-red-900 to-black flex items-center justify-center text-5xl font-black text-red-500"> ▶ </div> <div className="p-6"> <h3 className="text-2xl font-bold group-hover:text-red-500 transition"> Titan Core Video #{video} </h3> <p className="mt-3 text-gray-400 text-sm leading-relaxed"> Mythology-inspired edits, god-level cinematic shorts, divine battles, celestial energy, and legendary entertainment. </p> </div> </div> ))} </div> </section> {/ About /} <section id="about" className="relative z-10 px-8 pb-28" > <div className="bg-gradient-to-r from-red-950/40 to-black border border-red-900/30 rounded-[2rem] p-10 backdrop-blur-xl"> <h2 className="text-4xl font-black text-red-500 mb-6">About Titan Core</h2> <p className="text-gray-300 text-lg leading-relaxed max-w-4xl"> Titan Core is built for fans of mythology, godly aesthetics, divine warriors, celestial power, dark fantasy, and legendary storytelling. The channel delivers cinematic edits, powerful visuals, and intense god-themed entertainment with a premium modern style. </p> </div> </section> {/ Join Section /} <section id="join" className="relative z-10 px-8 pb-28"> <div className="text-center bg-red-950/20 border border-red-900/40 rounded-[2rem] py-16 px-6"> <h2 className="text-5xl font-black text-white">ENTER THE DIVINE REALM</h2> <p className="mt-5 text-gray-400 text-lg max-w-2xl mx-auto"> Subscribe and become part of the Titan Core community. </p> <button className="mt-10 px-10 py-5 bg-red-600 hover:bg-red-700 rounded-2xl text-xl font-black shadow-xl shadow-red-900/50 transition"> SUBSCRIBE </button> </div> </section> {/ Footer /} <footer className="relative z-10 border-t border-red-900/30 py-8 text-center text-gray-500 text-sm"> © 2026 Titan Core • All Rights Reserved / DEPLOY YOUR WEBSITE LIVE 1. Go to https://vercel.com 2. Create a free account 3. Click “Add New Project” 4. Upload this React project 5. Click Deploy 6. Your Titan Core website will become live instantly You can also host on: - https://netlify.com - https://pages.github.com Recommended: Use Next.js + Vercel for best performance. */ </footer> </div> ); }