coral-gaming

byKholwai

export default function KyroApp() { // KYRO MVP // Main Features: // 1. Gaming feed // 2. Live streaming // 3. Gift system // 4. Team finder // 5. Gamer profiles // 6. Wallet system const gamingFeed = [ { title: "1v4 Ranked Clutch", creator: "ShadowX", likes: "92K", game: "Valorant" }, { title: "Fortnite Funny Fails", creator: "NovaKid", likes: "55K", game: "Fortnite" }, { title: "Insane Trickshot", creator: "GhostAim", likes: "120K", game: "COD" } ]; const liveStreams = [ { title: "Road To Unreal Rank", creator: "KingViper", viewers: "18.2K", game: "Fortnite" }, { title: "Minecraft SMP Chaos", creator: "PixelGod", viewers: "9.7K", game: "Minecraft" } ]; const teammates = [ { username: "RageHunter", rank: "Diamond", region: "South Africa", game: "Valorant" }, { username: "LunaFPS", rank: "Elite", region: "EU", game: "Fortnite" } ]; const gifts = [ { name: "Heart", value: "R5" }, { name: "Fire", value: "R10" }, { name: "Crown", value: "R25" }, { name: "Diamond", value: "R50" } ]; return ( <div className="bg-black min-h-screen text-white p-5"> {/* HEADER */} <div className="mb-8"> <h1 className="text-5xl font-bold text-cyan-400"> KYRO </h1> <p className="text-purple-400 text-lg"> PLAY. CONNECT. WIN. </p> </div> {/* GAMING FEED */} <section className="mb-10"> <h2 className="text-3xl font-bold text-pink-400 mb-4"> Trending Clips </h2> {gamingFeed.map((clip, index) => ( <div key={index} className="bg-zinc-900 border border-pink-500 rounded-2xl p-4 mb-4 shadow-lg" > <h3 className="text-2xl font-bold"> {clip.title} </h3> <p className="text-zinc-300"> Creator: {clip.creator} </p> <p className="text-zinc-300"> Game: {clip.game} </p> <p className="text-pink-400"> Likes: {clip.likes} </p> <div className="flex gap-2 mt-4"> <button className="bg-pink-500 px-4 py-2 rounded-xl"> Like </button> <button className="bg-cyan-500 px-4 py-2 rounded-xl text-black"> Comment </button> <button className="bg-purple-500 px-4 py-2 rounded-xl"> Share </button> <button className="bg-yellow-400 px-4 py-2 rounded-xl text-black"> Gift </button> </div> </div> ))} </section> {/* LIVE STREAMS */} <section className="mb-10"> <h2 className="text-3xl font-bold text-cyan-400 mb-4"> Live Streams </h2> {liveStreams.map((stream, index) => ( <div key={index} className="bg-zinc-900 border border-cyan-500 rounded-2xl p-4 mb-4" > <h3 className="text-2xl font-bold"> {stream.title} </h3> <p>Creator: {stream.creator}</p> <p>Game: {stream.game}</p> <p className="text-red-400"> LIVE • {stream.viewers} viewers </p> <button className="mt-4 bg-cyan-400 text-black px-4 py-2 rounded-xl"> Watch Stream </button> </div> ))} </section> {/* TEAM FINDER */} <section className="mb-10"> <h2 className="text-3xl font-bold text-green-400 mb-4"> Team Finder </h2> {teammates.map((player, index) => ( <div key={index} className="bg-zinc-900 border border-green-500 rounded-2xl p-4 mb-4" > <h3 className="text-2xl font-bold"> {player.username} </h3> <p>Game: {player.game}</p> <p>Rank: {player.rank}</p> <p>Region: {player.region}</p> <button className="mt-4 bg-green-500 text-black px-4 py-2 rounded-xl"> Invite Player </button> </div> ))} </section> {/* GIFT SHOP */} <section className="mb-10"> <h2 className="text-3xl font-bold text-yellow-300 mb-4"> Gift Shop </h2> {gifts.map((gift, index) => ( <div key={index} className="bg-zinc-900 border border-yellow-400 rounded-2xl p-4 mb-4" > <h3 className="text-2xl font-bold"> {gift.name} </h3> <p>Price: {gift.value}</p> <button className="mt-4 bg-yellow-400 text-black px-4 py-2 rounded-xl"> Send Gift </button> </div> ))} </section> {/* PROFILE */} <section> <h2 className="text-3xl font-bold text-purple-400 mb-4"> Gamer Profile </h2> <div className="bg-zinc-900 border border-purple-500 rounded-2xl p-5">