"use client"; import { FaRocket, FaArrowRight } from "react-icons/fa"; const config = { theme: { backgroundColor: "bg-gray-50", textPrimary: "text-gray-900", // ✅ explicit base text color textSecondary: "text-gray-600", buttonPrimary: "bg-[#323232] text-white", buttonSecondary: "bg-emerald-400 text-white", highlight: "bg-[#96CFFF]", accent: "bg-[#FFE4E4]", border: "border-[#323232]", shadow: "shadow-[6px_6px_#323232]", }, text: { welcome: "🚀 WELCOME TO THE FUTURE", heading: "Make Your Design Stand Out!", description: "Break free from boring designs! Our neo-brutalist components are here to make your website pop with personality. No snooze-fest allowed! ✨", buttonPrimary: "GET STARTED", buttonSecondary: "LEARN MORE", }, stats: [ { label: "Components", value: "50+" }, { label: "Downloads", value: "10k" }, { label: "Rating", value: "4.9" }, ], features: [ { icon: "🎨", title: "Unique Style" }, { icon: "⚡", title: "High Performance" }, { icon: "🛠️", title: "Easy to Customize" }, ], }; function Heading() { return (

{config.text.heading.split(" ").map((word, index) => ( {index === 2 ? ( <> {word}
) : ( word + " " )} ))}

); } type ButtonProps = { text: string; icon?: React.ReactNode; primary?: boolean; }; function Button({ text, icon, primary }: ButtonProps) { const color = primary ? config.theme.buttonPrimary : config.theme.buttonSecondary; return ( ); } export default function NeubrutalismHero() { return (

{/* Background decorations */}

{/* Left Side */}

{config.text.welcome}

{config.text.description}

{/* Right Side */}

{/* Stats */}

{config.stats.map((stat) => (

{stat.value}

{stat.label}

))}

{/* Features */}

{config.features.map((feature) => (

{feature.icon}

{feature.title}

))}

{/* Decorative Icon */}

); }

{config.text.heading.split(" ").map((word, index) => ( {index === 2 ? ( <> {word} ) : ( word + " " )} ))}

{config.text.heading.split(" ").map((word, index) => ( {index === 2 ? ( <> {word}
) : ( word + " " )} ))}

Burtalist Components

NeuBrutalism Hero