feat: Add "Dev Wrapped" year-in-review page to showcase user listening data

- Introduced a new `/wrapped` page that summarizes users' podcast listening behavior using data from localStorage.
- Designed sections including top stats, favorite episodes, fun facts, and next year goals, all styled to align with Devtherapy's branding.
- Implemented a user-friendly interface that enhances engagement and celebrates user achievements.

Author: RomaLetodiani

prompts/7. wrapped-prompt.md

@@ -0,0 +1,90 @@
+Build a “Dev Wrapped” Year-in-Review Page Using Local Listening Data (No Backend)
+
+> You are adding a personalized, data-driven experience to the Devtherapy website.
+> Build a **“Dev Wrapped” year-in-review page** that summarizes a user's podcast listening behavior, based entirely on data stored in their browser (`localStorage`).
+
+---
+
+### 🎯 Goal
+
+Create a visually engaging, developer-themed page that reflects the user's year with Devtherapy — highlighting their listening habits, favorite topics, and fun personalized stats.
+
+---
+
+### 🧠 UX & Brand Guidelines
+
+- Theme: **Dark mode**, mint green highlights, developer-console-inspired layout
+- Tone: Friendly, data-driven, a little playful
+- Use Devtherapy font, spacing, animations — make it feel like a reward screen in VS Code
+
+---
+
+### 🧩 Feature Sections on `/wrapped`
+
+#### 1. **Hero Title**
+
+> “Here’s what your year looked like in Devtherapy.”
+
+- Mint green animated title
+- Subheadline: “You debugged. You listened. You thrived.”
+
+---
+
+#### 2. **Top Stats (from localStorage)**
+
+Pull from locally stored listening data:
+
+- Episodes completed: `X`
+- Total time listened (estimate): `Y hours`
+- Most-listened guest: `Z`
+- Most-used tag/topic (if available)
+
+---
+
+#### 3. **Favorite Episode**
+
+- Based on time spent or user marking as favorite
+- Show title, thumbnail, CTA to replay it
+
+---
+
+#### 4. **Fun Facts**
+
+Generate dynamic “achievements” like:
+
+- 🧠 “You listened to 3 hours in a single night. Respect.”
+- 🎧 “You completed 5 episodes about GPU programming.”
+
+---
+
+#### 5. **"Next Year Goals"**
+
+- CTA to add episodes to their Listen Later queue
+- Example:
+
+  > “Start your 2025 with Episode #9 — Devs, Burnout, and Balance.”
+
+---
+
+#### 6. **Share Button (Optional)**
+
+- “Share your Dev Wrapped”
+- Copy summary stats to clipboard
+- Optional: generate image/card for social (future phase)
+
+---
+
+### 🔧 Technical Notes
+
+- No backend or API
+- All user data pulled from `localStorage` used by the Listening Tracker feature
+- Use fallback messages if user has no data (e.g., “Start your Devtherapy journey now.”)
+
+---
+
+### 📦 Deliverables
+
+- Create a `/wrapped` route
+- Visually styled summary page with sections outlined above
+- Pull data from `localStorage` used by the Listen Later and Listening Tracker system
+- Use animations and styling to make it feel like a celebration

prompts/8. events-prompt.md

@@ -0,0 +1,71 @@
+Add a New “Events” Page to the Devtherapy Website
+
+> You are adding a new page to the Devtherapy website to showcase **community events, guest sessions, livestreams, and developer meetups**.
+> This page will list each event with a photo, description, optional links, and light metadata (date, type, location).
+
+---
+
+### 🧠 Brand & UX Requirements
+
+- Keep consistent with Devtherapy’s visual identity:
+
+  - Dark theme with mint green highlights (#3CE6B0)
+  - Minimalist, developer-first aesthetic
+  - Responsive layout for mobile/desktop
+
+- Use cards, modals, or expandable blocks to keep it clean and digestible
+- Prioritize readability and visual clarity of photos and links
+
+---
+
+### 🧩 Page Structure: `/events`
+
+#### 1. **Header Section**
+
+- Title: “Devtherapy Events”
+- Subtitle: “Live sessions, dev meetups, guest collabs, and community moments.”
+
+#### 2. **Event Cards Grid/List**
+
+Each event includes:
+
+- 📸 **Image or banner** (1:1 or 16:9 ratio)
+- 📝 **Title**
+- 🗓️ **Date** (with optional “Upcoming” or “Past” tag)
+- 🧭 **Location** (or “Online” tag if virtual)
+- 🧾 **Short description** (1–2 sentences)
+- 🔗 **Optional links** (e.g. RSVP, YouTube, Notion, Zoom, blog, external registration)
+
+#### 3. **Detail View **
+
+- Click event to open full view with:
+
+  - Full description
+  - Additional links
+  - Embedded media (if available, e.g. YouTube recap)
+  - Downloadable PDF (e.g. speaker slides or agenda)
+
+#### 4. **Filter or Toggle Option**
+
+- Allow user to toggle between:
+
+  - “Upcoming Events”
+  - “Past Events”
+
+---
+
+### ✨ Enhancements
+
+- Add countdown timer for upcoming events
+- Highlight “Featured” event at top
+
+---
+
+### 📦 Deliverables
+
+- New `/events` page route
+- New `/events/:eventId` page route
+- Responsive card layout for event entries
+- Optional modal or detail view per event
+- Use placeholders for images, links, and data — structure-focused
+- Fully consistent with Devtherapy visual identity and code-first tone