A
Anonymous

Birthday Celebration - Copy this React, Tailwind Component to your project

Create an immersive, interactive one page website to celebrate Samia's birthday. The site should be modern, vibrant, and tech focused, reflecting her passion for programming and her Amazigh heritage. The design should include interactive programming elements, Amazigh cultural touches, and an engaging user experience. Structure & Content 1. Header Section Main Headline: 'Happy Birthday, Samia!' Below it, display this phrase prominently in Tifinagh script: ⴰⵙⴳⴰⵙ ⴰⵎⴰⵢⵏⵓ ⵙⴰⵎⵢⴰ! (Asgas amaynu Samia!). Subheadline: 'Samia, you are the "CSS" to my "HTML"' — styled as if it's part of a code comment. Background Design: A gradient featuring pastel colors (purple, blue, and neon green) with binary patterns, code snippets, and Amazigh symbols subtly integrated. Animation: Confetti falling and glowing Amazigh symbols (like ⵣ) pulsating on load. 2. Main Section: Interactive Coding Area Add an interactive code editor simulation where visitors can type or "run" birthday wishes. Pre filled example: javascript نسخ الكود const birthdayMessage = "ⴰⵙⴳⴰⵙ ⴰⵎⴰⵢⵏⵓ ⵙⴰⵎⵢⴰ!"; console.log(birthdayMessage); // Happy Birthday, Samia! Button: "Run the Code" displays the message on screen with animations like fireworks or glowing text. 3. About Samia Section Highlight Key Details: Passion: Programming (mention languages or projects she’s learning). Cultural Note: Celebrate her Amazigh roots. Add her photo framed by coding brackets { } or a laptop graphic. 4. Milestone Tracker (Gamified) Showcase Samia's programming achievements as a level up timeline: "Level 1: Started Learning HTML" "Level 2: Built My First Website" "Level 3: Debugged My First Code!" Include milestones for her future goals. 5. Wishes Wall Interactive Feature: Visitors leave messages via a form styled like a terminal. Example: bash نسخ الكود > Leave your wish for Samia: "ⴰⵙⴳⴰⵙ ⴰⵎⴰⵢⵏⵓ ⵙⴰⵎⵢⴰ! May your coding journey shine brightly!" Messages appear as comments in a styled code block with visitor names. Footer Section Include the phrase: ⵜⴰⵏⵎⵉⵔⵜ ⴰ ⵢⵉⴷ ⴷ ⵓⵎⴰⴷⴷⵉⴷ ⵙⴰⵎⵢⴰ! (Tanmirt a yid d umaddid Samia!) “Thank you for celebrating with me!” Add buttons to share the page on social media styled as code snippets, e.g., html نسخ الكود <button>Share on Instagram</button> Design Style Color Palette: Pastel tech colors (neon purple, teal, and green) with Amazigh accents (yellow, blue, and red). Typography: Coding font (e.g., Consolas, Fira Code) for interactive sections. Tifinagh script for Amazigh phrases. Technical Features Responsive Design: Works seamlessly on desktops, tablets, and mobiles. Interactive Elements: Code editor where visitors can leave and "run" custom birthday messages. Terminal style wish board for an immersive coding vibe. Animations: Pulsating buttons. Fireworks triggered when visitors interact with the code. Music Player: Background Amazigh instrumental with modern beats. 🎉 Let’s code a birthday celebration for Samia that’s as inspiring as her programming journey! 🎂

Prompt
Component Preview

About

BirthdayCelebration - Create an interactive birthday site for Samia with coding elements, animations, and cultural touches, built with. Get code instantly!

Share

Last updated 1 month ago