"use client"; import React, { useState } from "react"; import { FaUser, FaCalculator, FaCamera, FaComments } from "react-icons/fa"; // Configuration object for customizable content const config = { theme: { background: "bg-gray-100", border: "border-black border-4", text: "text-black", button: "bg-black text-white hover:bg-yellow-400 hover:text-black transition-colors", }, apps: [ { name: "Existential Calculator", icon: , color: "bg-yellow-300", }, { name: "Void Camera", icon: , color: "bg-blue-300" }, { name: "Nihilist Chat", icon: , color: "bg-green-300" }, ], headings: { main: "EMBRACE", sub: "THE VOID", }, downloadLink: "#", downloadText: "Download Void OS", }; const BrutalistPhoneFeatures: React.FC = () => { const [activeApp, setActiveApp] = useState("home"); return (

{/* Phone Mockup */}

{/* Screen content */}

{activeApp === "home" ? (

Void OS

{config.apps.map((app, index) => ( ))}

) : (

{activeApp}

{activeApp} content goes here

)}

{/* Home button */}

{/* Features List */}

{config.headings.main}
{config.headings.sub}

{app.icon}

{app.name}: Embrace the absurdity

{config.downloadText}

); }; export default BrutalistPhoneFeatures;

Void OS

{activeApp}

{config.headings.main} {config.headings.sub}

{config.headings.main}
{config.headings.sub}

Mockup Components

Brutalism Mockup