import React from "react"; import { FaDownload } from "react-icons/fa"; import { GiCircuitry, GiWireframeGlobe, GiCyberEye } from "react-icons/gi"; // Interface for grid item props interface GridItem { type: string; icon?: JSX.Element; title?: string; description?: string; buttonText?: string; buttonLink?: string; colSpan?: string; bgColor?: string; textColor?: string; glowColor?: string; quote?: string; footer?: string; imageUrl?: string; altText?: string; overlayText?: string; items?: string[]; } const gridItems: GridItem[] = [ { type: "feature", icon: , title: "Neural Nexus", description: "Transcend flesh limitations. Plug into the infinite dataverse and rewrite the code of your reality. Your mind is the ultimate frontier.", buttonText: "Initiate Uplink", buttonLink: "#", colSpan: "md:col-span-2", bgColor: "bg-gray-900", textColor: "text-cyan-400", glowColor: "glow-cyan", }, { type: "quote", quote: `"The street finds its own uses for things."`, footer: "— William Gibson, Burning Chrome", bgColor: "bg-purple-900", textColor: "text-pink-500", glowColor: "glow-pink", }, { type: "image", imageUrl: "https://images.unsplash.com/photo-1723701219389-2c90710b3a3c?q=80&w=2942&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D", altText: "Neon-drenched cityscape", overlayText: "Enter the Sprawl", bgColor: "bg-black bg-opacity-50", textColor: "text-cyan-400", glowColor: "glow-cyan", }, { type: "list", icon: , title: "Chrome Cowboy Toolkit", items: [ "Decrypt the mainframe", "Overlock your wetware", "Ghost through the Grid", "Outgun the corpo-rats", ], bgColor: "bg-blue-900", textColor: "text-cyan-300", glowColor: "glow-cyan", }, { type: "tallFeature", icon: , title: "Void Echo Protocol", description: "Tune into the static between worlds. What secrets lurk in the digital abyss? Only the bold dare to listen.", items: [ "Ride the data tsunami", "Embrace rogue AI chaos", "Hack the unhackable", "Become one with the machine", ], quote: `"Information wants to be free, but is everywhere in chains."`, footer: "— Adapted from Stewart Brand", colSpan: "md:row-span-2", bgColor: "bg-gray-800", textColor: "text-purple-400", glowColor: "glow-purple", }, { type: "cta", icon: , title: "Sync Your Synapses", description: "Upgrade your meat-brain. Subscribe now for daily neural downloads that'll make your synapses sizzle and your reality glitch.", buttonText: "Inject Data", colSpan: "md:col-span-2", bgColor: "bg-gray-900", textColor: "text-pink-500", glowColor: "glow-pink", }, ]; const renderGridItem = (item: GridItem) => { const baseClasses = `${item.colSpan} ${item.bgColor} ${item.glowColor} p-8 transition-all duration-300 ease-in-out hover:scale-105 hover:${item.glowColor}-intense relative overflow-hidden`; const renderContent = (content: JSX.Element) => (

{content}

); const commonStructure = (innerContent: JSX.Element) => (

{renderContent(innerContent)}

); const featureContent = ( <>

{item.icon}

{item.title}

{item.description}

{item.buttonText}

); switch (item.type) { case "feature": return commonStructure(featureContent); case "quote": return (

{item.quote}
{item.footer}

); case "image": return (

{item.overlayText}

); case "list": return (

{item.icon}

{item.title}

{listItem}

); case "tallFeature": return (

{item.icon}

{item.title}

{item.description}

{listItem}

{item.quote}

{item.footer}

); case "cta": return (

{item.icon}

{item.title}

{item.description}

); default: return null; } }; const CyberpunkBentoGrid: React.FC = () => { return (

{/* Cyberpunk grid background */}

{/* Neon lines */}

Embrace the Cyberverse

{gridItems.map((item, index) => ( {renderGridItem(item)} ))}

); }; export default CyberpunkBentoGrid;

Structure Components

Cyberpunk Bento Grid