import React from "react"; import { FaRocket, FaArrowRight } from "react-icons/fa"; // Configuration object for customizable content const config = { theme: { backgroundColor: "bg-gray-50", textColor: "text-gray-700", primaryButtonColor: "bg-[#323232]", secondaryButtonColor: "bg-emerald-400", highlightColor: "bg-[#96CFFF]", accentColor: "bg-[#FFE4E4]", borderColor: "border-[#323232]", shadowColor: "shadow-[6px_6px_#323232]", }, textContent: { welcomeMessage: "🚀 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! ✨", primaryButtonText: "GET STARTED", secondaryButtonText: "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" }, ], }; // Heading component const Heading: React.FC = () => (

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

); // Button component const Button: React.FC<{ text: string; icon?: JSX.Element; primary?: boolean }> = ({ text, icon, primary = false, }) => ( ); // Main component const NeubrutalismHero: React.FC = () => { return (

{/* Background decorative elements */}

{/* Text Content */}

{config.textContent.welcomeMessage}

{config.textContent.description}

{/* Hero Image/Illustration */}

{/* Stats Row */}

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

{stat.value}

{stat.label}

))}

{/* Feature Cards */}

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

{feature.icon}

{feature.title}

))}

{/* Decorative Icon */}

); }; export default NeubrutalismHero;

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

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

Attention-grabbing Components

NeuBrutalism Hero