diff --git a/TheVibeQCom/PRD.md b/TheVibeQCom/PRD.md
new file mode 100644
index 0000000..44220bd
--- /dev/null
+++ b/TheVibeQCom/PRD.md
@@ -0,0 +1,1046 @@
+
+Product Requirements Document: Project Vibe (MVP)
+
+Document Version: 1.0
+Date: October 26, 2025
+Status: Draft for Review
+Author: Senior PRD Specialist
+Stakeholders: Engineering, Data Science, Product Design, Operations
+Assumptions:
+Initial Launch Market: Bengaluru, India.
+Target Platform: Mobile-first (Android & iOS via React Native), with a web-based admin portal for vendors.
+Delivery SLA: A 2-hour delivery window is the target for 95% of orders within the launch city.
+Baseline Stockout Rate: Assumed industry average of 15% for this product category.
+Target Stockout Reduction: 50% reduction (to <7.5%) within 90 days of launch.
+
+A. Executive Summary
+
+
+1.1 Product Elevator
+
+Project Vibe is a mobile-first Q-commerce platform that delivers curated home décor and lifestyle products in under two hours, powered by an AI engine that predicts demand, personalizes recommendations, and optimizes delivery routes. We drive industry-leading engagement through "Vibe-Code," an integrated productivity game where users achieve personal goals to outpace a customizable AI rival, creating a virtuous cycle of self-improvement and curated consumption.
+
+1.2 Primary User Problems
+
+The product addresses two distinct but interconnected problems in the Indian market:
+The Q-Commerce Problem: The Indian quick commerce market, while growing rapidly at a projected CAGR of over 25% 1, is maturing beyond groceries. Consumers seeking non-essential items like home décor and lifestyle products are underserved. They face frequent stockouts, irrelevant product recommendations that fail to capture personal aesthetic, and unreliable delivery windows from existing platforms.3 Concurrently, vendors and micro-retailers struggle with the high operational costs and logistical complexities of real-time inventory management and last-mile fulfillment, which hinders their ability to compete.5
+The Engagement Problem: Traditional e-commerce applications suffer from low user retention and high churn, forcing reliance on expensive performance marketing to drive transactions. For the target demographic of tech-savvy urban millennials and Gen Z, a purely transactional app fails to build a lasting habit.7 These users seek digital experiences that provide continuous value, align with goals of self-improvement, and integrate into their daily routines in a meaningful way.9
+
+1.3 MVP Objective & Success Criteria
+
+The primary objective of this MVP is to validate the core hypothesis: that the synergy between an AI-optimized Q-commerce service and a novel gamified productivity layer can create a defensible moat by simultaneously solving key operational inefficiencies and driving superior user engagement. Success will be measured against the following time-bound, measurable goals for the initial Bengaluru launch.
+Metric
+30-Day Goal
+60-Day Goal
+90-Day Goal
+Data Source
+On-Time Delivery Rate (%)
+85%
+90%
+95%
+Order Management System
+Stockout Rate (Top 100 SKUs)
+<12%
+<10%
+<8%
+Inventory Management System
+DAU/MAU Stickiness Ratio
+15%
+20%
+25%
+Analytics Platform
+Vibe-Code Task Completion Rate
+50%
+55%
+60%
+Vibe-Code Service DB
+Vibe-Code to Commerce Conversion
+2%
+3.5%
+5%
+Analytics Platform
+Average Delivery Time (Minutes)
+<120
+<100
+<90
+Order Management System
+
+
+B. Goals & Metrics
+
+
+2.1 Business Goals
+
+Operational Efficiency: Reduce stockouts for the top 100 SKUs by 50% (from a 15% baseline) within 90 days of launch.
+Service Reliability: Achieve an on-time delivery rate (within the 2-hour SLA) of 95% within 60 days.
+User Retention: Attain a Day-30 user retention rate of 20%, primarily driven by the Vibe-Code engagement loop.
+Revenue Growth: Increase Average Order Value (AOV) by 15% through superior AI-powered recommendations compared to a non-personalized baseline control group.
+
+2.2 North Star Metric & Supporting KPIs
+
+The North Star Metric is chosen to encapsulate the unique synergy between the platform's two core value propositions: engagement and commerce.
+North Star Metric: Number of Vibe-Code tasks completed that result in a Q-commerce purchase within 7 days.
+Supporting Key Performance Indicators (KPIs):
+Q-Commerce KPIs:
+Order Frequency: Average number of orders per active user per month.
+Cart Conversion Rate: Percentage of sessions with an "add to cart" event that result in a completed purchase.
+Average Delivery Time: Mean time from order confirmation to delivery confirmation.
+Order Fulfillment Accuracy: Percentage of orders delivered with no errors (wrong item, missing item).
+Customer Lifetime Value (CLV): Predicted net profit attributed to the entire future relationship with a customer.
+Vibe-Code KPIs:
+Daily Active Users (DAU): Number of unique users engaging with the Vibe-Code feature daily.
+Task Creation Rate: Average number of new tasks created per user per day.
+Task Completion Rate: Percentage of created tasks marked as "complete."
+Rival Interaction Frequency: Number of times a user views the rival screen or receives a rival-related notification per week.
+Leaderboard Engagement Rate: Percentage of active users who view the leaderboard at least once per week.
+AI Model KPIs:
+Demand Forecast Accuracy: Measured by Mean Absolute Percentage Error (MAPE) between predicted and actual sales. Target MAPE < 20%.
+Recommendation Click-Through Rate (CTR): Clicks on recommended products / Impressions of recommended products.
+Route Optimization Savings: Percentage reduction in total distance traveled and time taken per delivery batch compared to a non-optimized baseline (e.g., nearest-neighbor heuristic).
+The Indian Q-commerce market is undergoing a critical shift from prioritizing hyper-growth to focusing on monetization and operational efficiency.11 This pivot means that unit economics are paramount. Therefore, the AI systems are not merely user-facing enhancements; they are fundamental cost-control mechanisms. Accurate demand forecasting directly reduces inventory holding costs and lost revenue from stockouts, while dynamic route optimization minimizes fuel and labor costs—the largest operational expenditures in last-mile logistics.5 Success will be measured not just by delivery speed but by a steady reduction in the
+Cost Per Delivery.
+
+2.3 Operational SLAs
+
+Delivery Window: 95% of orders must be delivered within 2 hours of confirmation. 80% should target a 90-minute window.
+Inventory Sync Latency: Maximum 5-minute latency between a stock level change (sale, return, restock) and its reflection across all systems (Vendor Portal, Customer App, AI Models). This is critical to prevent overselling.13
+API Latency: The 95th percentile (P95) latency for all user-facing API endpoints, especially Recommendation and Order Placement, must be below 300ms.
+
+C. Target Users & Personas
+
+
+3.1 Persona 1: "Priya," the Urban Quick-Shopper
+
+Profile: 28, Marketing Manager, Bengaluru. Earns ₹18 Lakhs per annum.
+Problem: Priya is time-poor and highly values the aesthetic of her living space. When she needs a last-minute item for her home—a unique vase for flowers, a stylish cushion for a guest—she finds existing Q-commerce options (focused on groceries) uninspiring and traditional e-commerce too slow.7 She wants instant gratification without compromising on style.
+Desired Outcomes:
+Discover curated, aesthetically pleasing home décor items quickly.
+Receive her purchase within a couple of hours, not days.
+An app experience that feels personalized and understands her taste.
+Frequency of Use: 1-2 times per month for impulse or urgent home & lifestyle purchases.
+Tech Comfort: High. A power user of apps like Zomato, Swiggy Instamart, and Amazon Prime.
+
+3.2 Persona 2: "Rohan," the Vibe-Code Power User
+
+Profile: 24, Freelance Developer, working from home in Hyderabad.
+Problem: Rohan struggles with the lack of structure and motivation that comes with freelance work. He's tried numerous productivity apps (like Todoist, Habitica) but finds them either too simplistic or too complex, and ultimately easy to abandon.10 He is intrinsically motivated by metrics, progress, and a sense of competition.16
+Desired Outcomes:
+A fun, engaging system to structure his daily tasks (work, fitness, learning).
+A clear visualization of his progress and consistency.
+A motivational hook that makes procrastination feel like it has a tangible consequence.
+Frequency of Use: Daily, to manage his to-do list, track progress, and interact with his rival.
+Tech Comfort: Very High. Enjoys RPGs, understands game mechanics like XP and leveling, and is looking for a "gamified life" experience.
+
+3.3 Persona 3: "Sunil," the Delivery Partner
+
+Profile: 32, Gig Economy Worker, Delhi. Works for multiple platforms.
+Problem: Sunil's income is directly proportional to his efficiency. Inefficient routes, traffic delays, and unclear delivery instructions waste precious time and fuel, directly impacting his earnings. He is often frustrated by apps that provide suboptimal routing and poor communication tools.
+Desired Outcomes:
+Optimized, multi-stop routes that minimize travel time and distance.
+Clear, concise instructions for pickup and delivery.
+A stable, reliable app that doesn't crash.
+Transparent and immediate updates on his earnings.
+Frequency of Use: Daily, during his 8-10 hour work shifts.
+Tech Comfort: Medium. Proficient with Google Maps and various delivery apps, but values simplicity and reliability over complex features.
+
+3.4 Persona 4: "Anika," the Vendor/Micro-Retailer
+
+Profile: 40, Owner of a small home décor boutique in Mumbai.
+Problem: Anika wants to expand her business online and tap into the Q-commerce boom but lacks the technical expertise and capital for her own logistics fleet. She has tried selling on larger marketplaces but struggles with real-time inventory synchronization, leading to overselling, negative reviews, and penalties.4
+Desired Outcomes:
+An easy-to-use platform to list her products and manage orders.
+A foolproof system for keeping her online and offline inventory perfectly in sync.
+Access to a reliable, on-demand delivery network without the fixed costs.
+Frequency of Use: Daily, to update inventory and process new orders.
+Tech Comfort: Low to Medium. Needs a simple, intuitive web portal that requires minimal training.
+
+D. User Journeys & Flows
+
+
+4.1 Customer Purchase + Delivery Flow (Priya)
+
+Discovery: Priya opens the app. The home screen features a "Styled for You" carousel, which she scrolls through. She taps the search bar and types "ceramic planter." The intelligent search auto-suggests popular styles.
+Evaluation: On the product detail page (PDP) for a planter, she sees high-res images, dimensions, and a delivery ETA of "by 8:45 PM tonight." Below, a "Complete the Look" carousel, powered by the recommendation engine, shows a matching tray and a small succulent. She adds the planter and the tray to her cart.
+Checkout: She proceeds to checkout. Her address and preferred payment method (UPI) are pre-filled. She confirms the order with a single tap.
+Tracking: She immediately receives a push notification: "Your order is confirmed!" A few minutes later, another notification arrives: "Sunil is on his way to pick up your order." She taps it to open a live map view showing the delivery partner's icon moving towards her location, with a real-time ETA.
+Delivery: Sunil arrives. Priya receives her items. The app sends a final notification prompting her to rate the experience.
+
+4.2 Vendor Inventory & Listing Flow (Anika)
+
+Onboarding: Anika signs up on the Project Vibe vendor web portal. She uploads her GST certificate and bank details for verification.
+Listing: She downloads the CSV template for product uploads. She fills it out with SKUs, product names, descriptions, prices, and initial stock counts for 20 of her best-selling items and uploads it. The products appear in her dashboard as "Pending Review."
+Activation: The Ops team approves her listings. Her products are now live on the app.
+Real-Time Sync: A customer buys a vase in her physical store. Anika immediately logs into the portal, searches for the vase SKU, and decrements the stock count from 5 to 4. The change is reflected on the customer app within a minute.
+Order Fulfillment: She receives an email and a dashboard notification for a new online order. Her staff packs the items and clicks "Mark as Ready for Pickup." The system automatically assigns a delivery partner.
+Handover: Sunil arrives and presents a QR code on his app. Anika's staff scans it with a simple barcode scanner (or phone camera), which confirms the handover in the system.
+
+4.3 Delivery Partner Flow (Sunil)
+
+Start Shift: Sunil opens the Vibe Driver app and toggles his status to "Online." He is now available to receive orders.
+Assignment: He receives a notification for a new batched task. The routing engine has combined two orders. The app displays the optimal sequence: 1. Pickup from Anika's Boutique (Mumbai). 2. Deliver to Customer A. 3. Deliver to Customer B.
+Navigation: He accepts the task and taps "Navigate to Pickup." The app opens an integrated map interface with turn-by-turn directions.
+Pickup & Delivery: At Anika's boutique, he shows the QR code for a secure handover. At each customer's location, he marks the order as "Delivered" and has the option to take a photo as proof of delivery.
+Completion: After the final drop-off, the task is marked complete. His earnings for the batch are instantly credited to his in-app wallet.
+
+4.4 Vibe-Code Flow (Rohan)
+
+Onboarding: On his first use of the Vibe-Code tab, Rohan is prompted to create his rival. He names him "SynthSlayer," chooses a futuristic avatar, and selects the "Snarky" personality.
+Task Creation: He taps the '+' button and adds a task: "Debug the payment gateway module." He sets the difficulty to "Hard" (worth 500 XP) and sets a deadline for 5 PM today. He adds another task: "30-minute workout," difficulty "Medium" (300 XP), deadline 7 PM.
+Tracking & Completion: At 4:30 PM, he finishes debugging and marks the first task complete. A celebratory animation plays, showing +500 XP! and his XP bar filling up.
+Failure & Rival Interaction: He gets engrossed in a movie and forgets his workout. At 7:01 PM, he receives a push notification with the "Snarky" personality: "While you were testing the couch's structural integrity, SynthSlayer just banked an easy 300 XP. Getting stronger by the minute!"
+Leaderboard: Curious, he opens the Vibe-Code dashboard. He sees his rival's XP has increased. He taps on the "Weekly Leaderboard" and sees he's in 2nd place among his friends, just 150 XP behind the leader. This motivates him to add and complete a small task before bed to try and reclaim the top spot.
+
+E. Feature Spec (MVP Level)
+
+
+5.1 Prioritized MVP Feature List
+
+Feature
+Priority
+Description
+User & Q-Commerce
+
+
+
+
+User Account & Authentication
+Must
+Secure sign-up, login, and profile management via email/phone OTP.
+Product Catalog & Search
+Must
+View products by category, use text search with auto-complete.
+Real-time Inventory Check
+Must
+API call to verify stock availability before allowing "Add to Cart."
+Shopping Cart & Checkout
+Must
+Add/remove items, apply promo codes, seamless one-page checkout.
+Payment Gateway Integration
+Must
+Integration with a major Indian payment gateway (e.g., Razorpay) for UPI, cards, net banking.
+Order History & Tracking UI
+Must
+View past orders and see a live map view for in-progress deliveries.
+AI & Data Science
+
+
+
+
+AI Recommendation API
+Must
+Endpoint to serve personalized product carousels. Must include a rule-based fallback.
+Demand Prediction Model
+Should
+Initial model trained offline to provide forecasts to the Ops team for inventory planning.
+Dynamic Routing Engine
+Should
+Service that takes orders and drivers as input and returns optimized routes. MVP can use a heuristic.
+Vibe-Code Gamification
+
+
+
+
+Vibe-Code Task Creation/Mgmt
+Must
+Users can create, edit, complete, and delete personal tasks with deadlines and XP values.
+XP Ledger & Rival Logic
+Must
+A system to reliably award XP for completed tasks and transfer XP to the rival for missed tasks.
+Leaderboard (Friends Only)
+Must
+Users can connect with contacts and view a weekly leaderboard based on XP earned.
+Rival Creation & Customization
+Should
+Users can name their rival, choose an avatar, and select a personality type.
+Operations & Logistics
+
+
+
+
+Vendor Admin Portal (Web)
+Must
+Web-based dashboard for vendors to manage products, inventory, and orders.
+Driver App (Android)
+Must
+Native Android app for delivery partners to manage tasks, navigate, and track earnings.
+Future Scope
+
+
+
+
+Social Sharing of Achievements
+Could
+Ability to share Vibe-Code level-ups or leaderboard rankings on social media.
+Multi-City Support
+Won't
+The architecture will consider it, but the MVP will be hard-coded for a single city.
+Subscription Services
+Won't
+No "Pro" or subscription features for Vibe-Code or delivery in the MVP.
+
+
+5.2 Core Feature Specifications
+
+
+5.2.1 AI-Powered Recommendations
+
+Purpose: To solve the product discovery problem for users like Priya, increasing cart size, conversion rate, and overall user satisfaction.
+User Story: "As a user (Priya), I want to see products that are relevant to my tastes on the homepage and product pages, so I can easily find new items I'll love without having to search extensively."
+Acceptance Criteria:
+The home screen must contain a horizontally-scrolling carousel titled "Styled for You" that is populated by the Recommendation API.
+Each Product Detail Page (PDP) must contain a carousel titled "You Might Also Like" showing items similar to the one being viewed.
+The cart screen must contain a carousel titled "Frequently Bought Together" suggesting complementary items.
+For new users with no interaction history, all carousels must gracefully fall back to displaying a "Trending in Your Area" list, which is a non-personalized, rule-based ranking. This ensures no user sees an empty state.18
+The P99 latency of the recommendation API endpoint must be less than 300ms.
+UX Notes:
+Headlines should be clear and persuasive (e.g., "Complete your look," "Customers also bought").19
+Each recommended item card must have a clear image, price, and a one-tap "Add to Cart" button to reduce friction.19
+
+5.2.2 Vibe-Code AI Rival System
+
+Purpose: To create a powerful, persistent motivational hook that drives daily engagement and habit formation through the psychological principles of loss aversion and narrative progression.
+User Story: "As a user (Rohan), when I fail to complete a task by its deadline, I want my personalized AI rival to gain the experience points I missed, so I feel a tangible sense of consequence and am motivated to stay on track."
+Acceptance Criteria:
+During Vibe-Code onboarding, the user must be prompted to create a rival by providing a name and selecting an avatar from a predefined set.
+When a task's deadline passes and its status is not "complete," the XP value associated with that task must be added to the rival's total XP in the xp_ledger table.
+The user must receive a push notification within 5 minutes of the deadline passing, informing them that their rival has gained XP. The content of the notification should reflect the rival's chosen personality.
+The rival's avatar on the Vibe-Code dashboard should visually update (e.g., glow, level-up animation) when they gain XP.
+The rival's level must increase based on a predefined, non-linear XP curve (e.g., Level 2 at 1000 XP, Level 3 at 2500 XP, etc.).
+UX Notes:
+The rival gaining XP should trigger a distinct, slightly "taunting" animation and sound effect, contrasting with the celebratory feedback for the user gaining XP. This reinforces the loss aversion mechanic.20
+The rival's screen should maintain a log of how it earned XP (e.g., "+300 XP from your missed '30-minute workout' task"). This creates a personal narrative of the user's own procrastination.
+
+5.3 Data & Privacy Considerations
+
+Compliance: The application must be fully compliant with India's Digital Personal Data Protection (DPDP) Act, 2023.22
+Consent: During onboarding, a clear, itemized consent screen must be presented. Users must provide "free, specific, informed, unconditional and unambiguous" consent for the processing of their personal data for specific purposes, such as:
+Processing order and address data for fulfillment.
+Processing browsing and purchase history for personalized recommendations.
+Processing location data (only during active delivery) for order tracking.
+Data Security: All Personally Identifiable Information (PII) must be encrypted at rest (AES-256) and in transit (TLS 1.2+). Access to production data will be strictly limited to authorized personnel via role-based access control (RBAC).
+
+F. AI / Data Science Requirements
+
+The AI/ML systems are central to the product's value proposition, targeting both operational efficiency and user experience.
+
+Model
+Inputs
+Output
+MVP Latency Target
+MVP Retraining Cadence
+Demand Prediction
+Historical orders (SKU, timestamp, geo-hash), promotions data, seasonality flags (e.g., Diwali), weather API data, inventory levels.23
+A 7-day sales forecast (quantity) for each SKU, broken down by dark store/vendor location.
+N/A (Batch Process)
+Weekly
+Recommender System
+User ID, item ID, interaction history (views, clicks, purchases), item metadata (category, style tags, price, color), session context (time of day, device).25
+A ranked list of product SKUs with associated recommendation scores and rationale (e.g., "similar_to_viewed").
+<200ms (P95)
+Weekly (full model), Daily (feature updates)
+Routing Optimizer
+List of pending orders (pickup/dropoff lat/long, time windows, package size), list of available drivers (current lat/long, vehicle capacity), real-time traffic data (via Google Maps API).27
+An ordered sequence of stops (a route) for each assigned driver, including estimated arrival times (ETAs) for each stop.
+<5 seconds per batch
+N/A (Real-time solver)
+
+
+6.1 Minimal Dataset & Offline Training Plan
+
+The platform faces a critical "cold start" problem with no initial data. The following phased approach will be used to bootstrap the AI models.
+Phase 1 (Pre-Launch):
+Data Acquisition: Procure anonymized sales data for similar home décor categories in the target city from a market research provider. This will be used to build and test the initial architecture of the demand forecasting model.
+Recommender: The initial recommender will be purely rule-based (e.g., "Bestsellers," "New Arrivals").
+Phase 2 (Launch - Day 0 to 30):
+Data Collection: Log every user interaction: product views, add-to-carts, purchases, search queries, session duration. Log all order and delivery data: timestamps, locations, delivery times.
+Model State: The recommender remains in rule-based fallback mode. The routing engine uses a simple heuristic (e.g., batching orders by geographic proximity).
+Phase 3 (Day 31 Onwards):
+First Training: Use the collected 30 days of data to train the first version of the collaborative filtering recommendation model and the time-series demand forecasting model. The data sparsity will be high, but it provides a baseline.29
+Deployment: Deploy the v1 models in "shadow mode" for one week, comparing their predictions against the baseline. If performance is acceptable, switch to live deployment.
+
+6.2 Monitoring & Fallback Logic
+
+Recommender: A circuit breaker pattern will be implemented. If the recommendation service API call exceeds a 300ms timeout or returns an error, the client application will automatically call a static fallback endpoint that returns a curated list of global bestsellers. This ensures system resilience and prevents a poor user experience.
+Routing Optimizer: If the optimization service fails to generate a route within the 5-second SLA, the system will fall back to a simple assignment logic (assigning the closest available driver to the oldest pending order) and alert the on-call operations team.
+Model Degradation: Model performance will be tracked daily. A model is considered degraded if its primary metric (e.g., MAPE for demand, CTR for recommendations) drops by more than 15% from its post-training baseline. A degraded model will trigger an automated alert for the data science team to investigate and schedule a retraining cycle.30
+
+G. Technical Architecture (MVP Scale)
+
+A microservices architecture is mandated from the outset. While a monolith can be faster for initial development, the distinct operational loads of Q-commerce functions (e.g., high-concurrency writes for inventory, intense periodic computation for routing, high reads for catalog) make independent scaling essential for cost-efficiency and stability.31
+
+7.1 Components and Data Flows
+
+Clients:
+Customer App (React Native): Single codebase for iOS and Android to maximize MVP development speed.
+Driver App (Native Android): Native for MVP to ensure maximum reliability and access to background location services.
+Vendor Portal (React): Web-based dashboard for administrative tasks.
+API Gateway: A single, unified entry point (e.g., using Amazon API Gateway or Kong) that handles authentication, rate limiting, and routing of requests to the appropriate downstream microservices.
+Core Microservices:
+User Service: Manages user profiles, authentication (JWTs), and Vibe-Code user data. (Node.js, PostgreSQL)
+Catalog Service: Manages product information, categories, and search indexing. (Node.js, MongoDB/Elasticsearch)
+Inventory Service: Manages real-time stock levels with high transactional integrity. This is a critical, high-concurrency service. (Go, PostgreSQL with Redis for caching)
+Order Service: Orchestrates the order lifecycle from placement to completion. (Node.js, PostgreSQL)
+Vibe-Code Service: Manages tasks, XP ledger, rival logic, and leaderboards. (Node.js, PostgreSQL)
+AI/ML Microservices:
+Recommendation Service: Exposes an API to serve product recommendations. (Python, FastAPI, Scikit-learn/PyTorch)
+Demand Prediction Service: Runs batch jobs to generate forecasts. (Python, FastAPI, Prophet/TensorFlow)
+Routing Service: Exposes an API to solve the Vehicle Routing Problem (VRP). (Python, FastAPI, Google OR-Tools)
+Infrastructure & Data Layer:
+Message Queue (RabbitMQ): For asynchronous communication between services (e.g., order_placed event triggers inventory update and notification).
+Caching (Redis): For session management, real-time inventory counts, and leaderboard data.
+Databases: PostgreSQL for services requiring strong transactional consistency (Orders, Inventory, Users). MongoDB or a similar NoSQL store could be used for the flexible product catalog.
+Cloud Provider: AWS or GCP, utilizing managed services like RDS, S3, and EKS/GKE for container orchestration.
+Data Flow Example (Order Placement):
+Customer App sends POST /orders request to API Gateway.
+Gateway authenticates the request and routes it to the Order Service.
+Order Service creates an order entry in its PostgreSQL DB and publishes an ORDER_CREATED event to RabbitMQ.
+The Inventory Service consumes this event, decrements the stock for the ordered SKUs, and publishes an INVENTORY_UPDATED event.
+The Recommendation Service and Analytics systems consume these events to update their feature stores and dashboards.
+
+H. UX / UI Guidance
+
+
+8.1 Key Screens and States
+
+Home Screen: A dynamic, personalized dashboard. The top third should feature a prominent Vibe-Code summary: today's XP goal progress bar, rival's current status, and a shortcut to the task list. The rest of the screen is a vertical feed of product carousels ("Styled for You," "New Arrivals," "Trending").
+Product Detail Page (PDP): Must feature large, high-quality images. Above the fold, display the product name, price, and a dynamically calculated, specific delivery promise (e.g., "Get it between 7:30 PM - 8:00 PM").
+Order Tracking: A full-screen, map-centric UI. The map should show the user's location, the dark store/vendor location, and the delivery partner's real-time position. A persistent banner at the bottom displays the ETA, driver's name, and a button to call the driver.
+Vibe-Code Dashboard: This is the central hub for the gamified layer. It should feature:
+A clear, filterable list of tasks (Today, Upcoming, Completed).
+A large, visual representation of the user's daily/weekly XP progress.
+A smaller widget showing the rival's avatar, name, level, and XP. Tapping this leads to the Rival Screen.
+Rival Screen: A dedicated screen that builds the rival's narrative. It shows the rival's avatar prominently, their level and total XP, and a reverse-chronological feed of their recent XP gains, explicitly linking them to the user's missed tasks.
+
+8.2 Gamification UX
+
+Micro-interactions & Feedback: Every key action must have immediate, satisfying feedback.
+Task Completion: A "swoosh" sound effect, a burst of confetti, and the XP number animating and adding to the total. Use positive reinforcement.33
+Rival Gains XP: A contrasting, "negative" sound (e.g., a low thud), a red glow on the rival's avatar, and the XP number animating towards the rival. This creates a feeling of loss.9
+Microcopy: The language should be encouraging, slightly competitive, and on-brand.
+Streaks: "You're on a 5-day streak! Unstoppable!"
+Rival Notifications: "Heads up! Your rival is only 500 XP behind you."
+Progress Visualization: Use progress bars, rings, and streak counters extensively. These are fundamental tools for visualizing progress and motivating continued engagement.35
+
+8.3 Accessibility & Responsiveness
+
+The app must adhere to the Web Content Accessibility Guidelines (WCAG) 2.1 Level AA. This includes sufficient color contrast, support for screen readers, and tappable targets of adequate size.
+The UI must be fully responsive and tested on a range of popular Android device screen sizes and resolutions prevalent in the Indian market.
+
+I. Operations & Logistics
+
+
+9.1 Vendor Onboarding
+
+A simple, self-service web portal is required for vendors. The flow will be:
+Sign-up and submit required documents (GSTIN, PAN, bank account details).
+Automated verification process.
+Access to the dashboard to upload the product catalog via a provided CSV template.
+A mandatory, short, interactive tutorial on the importance of and process for maintaining real-time inventory accuracy. Emphasize that inventory accuracy is a key performance metric for vendors on the platform.
+
+9.2 Delivery Partner Onboarding
+
+An in-app onboarding flow for delivery partners:
+Download the Vibe Driver app.
+Sign-up with a phone number.
+Upload required documents: Driver's License, Vehicle Registration Certificate (RC), Aadhaar Card.
+Consent to a third-party background check.
+Once verified, the account is activated, and they can start accepting delivery tasks.
+
+9.3 Fallbacks & Exception Handling
+
+Failed Delivery: If a customer is unavailable, the driver app will prompt the partner to call the customer twice. If there is no response, they can mark the delivery as "Failed." The order is then returned to the hub on their next return trip, and the customer is automatically notified to contact support to reschedule (a redelivery fee may apply).
+Item Unavailability at Pickup: If a vendor reports an item is out of stock when the driver arrives (due to an inventory sync error), the driver app will allow them to mark the specific item as unavailable. The customer is immediately notified via push and given the option to cancel the entire order or receive the partial order with an automatic refund for the missing item.
+
+J. Security, Privacy & Compliance
+
+
+10.1 Authentication & Authorization
+
+Authentication: All user sessions (customer, driver, vendor) will be managed using JSON Web Tokens (JWT). Short-lived access tokens (15 minutes) and long-lived refresh tokens (30 days) will be used to enforce security.
+Authorization: API endpoints will be protected using a role-based access control (RBAC) model. For example, a user with a "DRIVER" role cannot access vendor-specific endpoints.
+
+10.2 Data Privacy & Consent
+
+DPDP Act Compliance: The platform will adhere strictly to India's DPDP Act.22 A Data Protection Officer (DPO) will be designated.
+Consent Management: A dedicated "Privacy Settings" section in the app will allow users to view and manage their consent settings granularly at any time. Revoking consent for a specific purpose (e.g., personalization) must be as easy as giving it.
+Data Retention: A data retention policy will be enforced. Order history will be retained, but user PII will be anonymized after 24 months of account inactivity.
+
+10.3 Safety & Location Sharing
+
+Customer and driver safety is paramount. The driver's real-time location will only be shared with the customer after they have picked up that specific customer's order.
+Location sharing is automatically disabled the moment the order is marked as "Delivered."
+All in-app communication between customer and driver will be routed through a number masking service to protect privacy.
+
+K. The Vibe-Code Game Explained
+
+
+11.1 What is the game?
+
+Vibe-Code is a single-player productivity game played against a personalized AI opponent. The goal is to build positive real-life habits by completing self-defined tasks to earn Experience Points (XP). Your success directly strengthens your in-game character, while your procrastination empowers your rival, creating a dynamic and personal motivational challenge.
+
+11.2 How do I play?
+
+Set Up: Create your character and customize your AI rival (name, look, personality).
+Create Tasks: Add real-life goals (e.g., "Finish project report," "Workout for 30 mins"). Assign each task a difficulty (Easy/Medium/Hard which corresponds to a set XP value) and a deadline.
+Complete Tasks: As you complete tasks in real life, mark them as "done" in the app before the deadline to earn XP and level up.
+Watch the Rival: If you miss a deadline, the XP you would have earned is automatically transferred to your rival, making them stronger and leveling them up.
+Compete: Track your progress, maintain streaks for bonus XP, and see how you stack up against friends on the weekly leaderboard.
+
+11.3 What are the patterns?
+
+Daily Loop: The core pattern is a daily cycle of setting tasks in the morning, checking them off during the day, and reviewing your progress against your rival in the evening.
+Weekly Rhythm: The leaderboard resets every Monday at midnight, creating a weekly competitive cadence and giving all players a fresh start.
+Risk vs. Reward: Players learn to balance their daily task list. Overloading with "Hard" tasks offers high XP rewards but increases the risk of failure, which directly benefits their rival. This encourages realistic goal-setting.
+
+11.4 How do I excel?
+
+Consistency is Key: The most effective strategy is to build and maintain daily streaks. Completing at least one task every day for 7 consecutive days unlocks a significant XP bonus.
+Strategic Task Management: Excel by breaking down large goals into smaller, manageable tasks. This creates more opportunities to earn XP and reduces the chance of missing a high-value deadline.
+Minimize Rival Gains: The ultimate path to excelling is to starve your rival of XP. This means being disciplined with deadlines. The fear of empowering your rival acts as a powerful motivator to complete tasks you might otherwise postpone.
+
+L. Roadmap & Milestones
+
+
+12.1 Suggested 12-Week MVP Sprint Plan
+
+This is an aggressive but achievable timeline for a focused team.
+Sprints 1-2 (Weeks 1-4): Foundation & Core Services
+Outputs: Cloud infrastructure provisioned (AWS/GCP), CI/CD pipeline established, User & Auth services built, core database schemas defined.
+Sprints 3-4 (Weeks 5-8): Q-Commerce & Vibe-Code MVP
+Outputs: Basic Catalog, Inventory, and Order services functional. Vibe-Code service with task creation, XP ledger, and rival logic implemented.
+Sprints 5-6 (Weeks 9-12): Integration, Ops Tools & Testing
+Outputs: Driver App (Android) MVP, Vendor Portal MVP, integration of Recommendation and Routing services, end-to-end testing, bug fixing, and preparation for beta launch.
+
+12.2 Beta Launch Criteria
+
+The product is ready for a closed beta launch when the following criteria are met:
+All features marked as "Must" in the prioritized list are complete and have passed QA.
+The end-to-end user journey for all four personas can be completed successfully in a staging environment.
+At least 5 vendors and 20 delivery partners have been successfully onboarded.
+The app is successfully published to the Google Play Store and Apple App Store under a closed beta track.
+A customer support process (ticketing system, basic FAQ) is in place.
+
+M. Risks & Mitigations
+
+Risk
+Category
+Likelihood
+Impact
+Mitigation Strategy
+Cold Start Problem for AI Models
+Technical
+High
+High
+Implement rule-based fallbacks for recommendations from Day 1. Use a phased data collection and model training strategy (see Section F). For demand, use a simple moving average as the initial forecast.
+Low Vendor Adoption / Poor Inventory Discipline
+Operational
+High
+High
+Design an extremely simple and intuitive vendor portal. Offer financial incentives for the first 3 months tied to maintaining >98% inventory accuracy. Provide dedicated onboarding support for the first 20 vendors.
+Intense Competition from Established Players
+Market
+High
+High
+Do not compete on delivery speed alone (e.g., 10-minute delivery). Differentiate aggressively on the niche product category (curated home décor) and the unique engagement and retention driven by the Vibe-Code layer.
+Last-Mile Delivery Variability
+Operational
+High
+Medium
+Utilize a dynamic routing engine that ingests real-time traffic data from an API like Google Maps. Build a 15-minute buffer into customer-facing ETAs. Proactively communicate any expected delays to the customer via push notifications.
+User Apathy Towards Gamification
+Product
+Medium
+High
+The "rival" mechanic is designed to be more compelling than simple points and badges. A/B test different notification styles and rival personalities early on to find what resonates most with the target audience. Ensure the core Q-commerce service is excellent on its own.
+
+
+N. Appendix
+
+
+14.1 Sample API Contracts
+
+1. Request Product Recommendations
+
+JSON
+
+
+// POST /v1/recommendations
+// Request Body
+{
+  "userId": "user-123",
+  "sessionId": "session-abc-456",
+  "context": {
+    "type": "PRODUCT_DETAIL_PAGE",
+    "itemId": "sku-decor-vase-007"
+  },
+  "placement": "YOU_MIGHT_ALSO_LIKE",
+  "maxResults": 5
+}
+
+// Success Response (200 OK)
+{
+  "recommendationId": "rec-xyz-789",
+  "items": [
+    { "sku": "sku-decor-candle-002", "score": 0.92 },
+    { "sku": "sku-lifestyle-book-011", "score": 0.87 },
+    { "sku": "sku-decor-tray-004", "score": 0.85 }
+  ],
+  "fallback": false
+}
+
+
+2. Request Route Optimization
+
+JSON
+
+
+// POST /v1/routing/optimize
+// Request Body
+{
+  "depot": { "lat": 12.9716, "lon": 77.5946 },
+  "drivers": [
+    { "driverId": "driver-01", "startLocation": { "lat": 12.9345, "lon": 77.6244 }, "capacity": 15 },
+    { "driverId": "driver-02", "startLocation": { "lat": 12.9986, "lon": 77.5991 }, "capacity": 15 }
+  ],
+  "orders": [
+    { "orderId": "order-101", "pickup": { "lat": 12.9279, "lon": 77.6271 }, "dropoff": { "lat": 12.9545, "lon": 77.6191 }, "size": 5 },
+    { "orderId": "order-102", "pickup": { "lat": 12.9279, "lon": 77.6271 }, "dropoff": { "lat": 12.9855, "lon": 77.6359 }, "size": 3 }
+  ]
+}
+
+// Success Response (200 OK)
+{
+  "optimizationId": "opt-abc-123",
+  "routes":
+    }
+  ],
+  "unassignedOrders":
+}
+
+
+3. Get Vibe-Code Rival Status
+
+JSON
+
+
+// GET /v1/vibecode/users/user-123/rival
+// Request (No Body)
+
+// Success Response (200 OK)
+{
+  "rival": {
+    "name": "SynthSlayer",
+    "avatarId": "avatar_future_03",
+    "personality": "SNARKY",
+    "level": 5,
+    "currentXp": 6500,
+    "xpToNextLevel": 2000
+  },
+  "recentActivity":
+}
+
+
+
+14.2 Sample SQL Table Outlines
+
+
+SQL
+
+
+-- For Inventory Service (PostgreSQL)
+CREATE TABLE inventory_levels (
+    sku VARCHAR(255) PRIMARY KEY,
+    location_id VARCHAR(255) NOT NULL, -- Foreign key to dark stores/vendors
+    quantity INT NOT NULL CHECK (quantity >= 0),
+    updated_at TIMESTAMPTZ NOT NULL DEFAULT NOW()
+);
+
+-- For Order Service (PostgreSQL)
+CREATE TABLE orders (
+    order_id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+    user_id VARCHAR(255) NOT NULL,
+    status VARCHAR(50) NOT NULL, -- e.g., PENDING, CONFIRMED, IN_TRANSIT, DELIVERED
+    total_amount DECIMAL(10, 2) NOT NULL,
+    delivery_address JSONB NOT NULL,
+    created_at TIMESTAMPTZ NOT NULL DEFAULT NOW(),
+    delivered_at TIMESTAMPTZ
+);
+
+-- For Vibe-Code Service (PostgreSQL)
+CREATE TABLE xp_ledger (
+    entry_id BIGSERIAL PRIMARY KEY,
+    user_id VARCHAR(255) NOT NULL,
+    entity_type VARCHAR(50) NOT NULL, -- 'USER' or 'RIVAL'
+    xp_amount INT NOT NULL,
+    source_task_id UUID, -- Foreign key to vibe_tasks, NULL for rival
+    reason_text VARCHAR(255),
+    created_at TIMESTAMPTZ NOT NULL DEFAULT NOW()
+);
+
+
+
+14.3 Sample User Stories
+
+As a new user (Priya), I want to sign up for an account using my mobile number and an OTP, so I can start shopping without the hassle of remembering a password.
+AC1: User enters a valid 10-digit Indian mobile number.
+AC2: System sends a 6-digit OTP via SMS which expires in 5 minutes.
+AC3: Upon successful OTP verification, the user account is created and the user is logged in.
+As a shopper (Priya), I want to see a real-time, accurate delivery ETA on the product page, so I can make a purchase decision based on when I will receive the item.
+AC1: The PDP must display an ETA (e.g., "Get it by 8 PM").
+AC2: This ETA should be calculated based on my location, current time, and operational hours.
+AC3: The ETA must update if I change my delivery address.
+As a productivity user (Rohan), I want to be able to create tasks with different levels of difficulty (Easy, Medium, Hard), so that the XP I earn reflects the effort required.
+AC1: The "Create Task" form must include a dropdown/selector for difficulty.
+AC2: Easy tasks award 100 XP, Medium 300 XP, and Hard 500 XP.
+AC3: The XP value must be visible to the user when creating the task.
+As a vendor (Anika), I want to receive an immediate notification on my dashboard when a new order is placed, so I can start preparing it for pickup without delay.
+AC1: The vendor web portal must show a real-time notification badge on the "Orders" tab.
+AC2: The new order must appear at the top of the order list with a "New" status.
+AC3: An optional email notification should also be sent to the registered vendor email.
+As a delivery partner (Sunil), I want the driver app to provide turn-by-turn navigation within the app, so I don't have to switch between apps while driving.
+AC1: Tapping "Navigate" on a stop should open an embedded map view (e.g., Google Maps SDK).
+AC2: The navigation should provide both visual and voice-guided directions.
+AC3: The app must handle GPS signal loss gracefully and recalculate the route upon reconnection.
+As a competitive user (Rohan), I want to see a weekly leaderboard that only includes my friends, so I can engage in friendly competition without being overwhelmed by global rankings.
+AC1: The app must allow users to connect with other users via their phone contacts.
+AC2: The Leaderboard tab must show a ranked list of the user and their connected friends based on XP earned in the current week.
+AC3: The leaderboard must clearly state when it will reset (e.g., "Resets on Monday at 12 AM").
+
+14.4 Sample Metrics Dashboard Mock (For Ops Team)
+
+A real-time dashboard built using a tool like Grafana or Metabase should display the following:
+Live Orders Map: A map of the city showing active delivery partners and pending order locations.
+Key Operational Metrics (Last Hour):
+Orders Received
+Orders Delivered
+Average Delivery Time
+On-Time Delivery %
+Driver Performance Table:
+Driver Name | Status | Active Time | Deliveries Completed | Average Time per Delivery
+Inventory Alerts:
+A list of SKUs where inventory_levels.quantity is below the reorder threshold.
+System Health:
+API Gateway P95 Latency (ms)
+API Gateway Error Rate (5xx %)
+Database CPU Utilization
+
+TL;DR Summary: Project Vibe MVP
+
+Product: A mobile app combining AI-powered Quick-Commerce for home décor with a gamified productivity layer called "Vibe-Code."
+Target Market: Launching in Bengaluru, India, targeting tech-savvy, urban millennials and Gen Z.
+Core Problems Solved:
+Q-Commerce: Fixes stockouts, poor recommendations, and unreliable delivery for lifestyle products.
+Engagement: Solves low retention of typical e-commerce apps by creating a daily habit through a compelling productivity game.
+MVP Goal: Validate that the synergy between the AI-driven commerce engine and the gamified Vibe-Code layer can drive both operational efficiency and superior user retention.
+Key Features (Must-Haves for MVP):
+Q-Commerce: Product catalog, real-time inventory, one-click checkout, live order tracking.
+AI Engine: Personalized recommendations (with rule-based fallback), route optimization for drivers.
+Vibe-Code: User task creation, XP system, a customizable AI rival that gains XP when the user fails, and a friends-only weekly leaderboard.
+Operations: Web portal for vendors to manage inventory; Android app for delivery partners.
+North Star Metric: Number of Vibe-Code tasks completed that result in a Q-commerce purchase within 7 days.
+Key Success Metrics (90-Day Targets):
+On-Time Delivery Rate: >95%
+Stockout Rate: <8%
+DAU/MAU Stickiness: >25%
+Vibe-Code to Commerce Conversion: >5%
+Technical Architecture: Microservices architecture from Day 1 to allow independent scaling of critical components like Inventory, Orders, and Routing. Tech stack to include React Native, Go/Node.js, Python for AI, PostgreSQL, and Redis.
+Primary Risks:
+AI Cold Start: Mitigated by using rule-based fallbacks and a phased data collection/training plan.
+Vendor Adoption: Mitigated by a simple onboarding process and financial incentives for inventory accuracy.
+Market Competition: Mitigated by differentiating on the niche product category and the unique Vibe-Code engagement loop, not just delivery speed.
+
+Prioritized MVP Feature List
+
+Feature
+Priority
+Description
+User & Q-Commerce
+
+
+
+
+User Account & Authentication
+Must
+Secure sign-up, login, and profile management via email/phone OTP.
+Product Catalog & Search
+Must
+View products by category, use text search with auto-complete.
+Real-time Inventory Check
+Must
+API call to verify stock availability before allowing "Add to Cart."
+Shopping Cart & Checkout
+Must
+Add/remove items, apply promo codes, seamless one-page checkout.
+Payment Gateway Integration
+Must
+Integration with a major Indian payment gateway (e.g., Razorpay) for UPI, cards, net banking.
+Order History & Tracking UI
+Must
+View past orders and see a live map view for in-progress deliveries.
+AI & Data Science
+
+
+
+
+AI Recommendation API
+Must
+Endpoint to serve personalized product carousels. Must include a rule-based fallback.
+Demand Prediction Model
+Should
+Initial model trained offline to provide forecasts to the Ops team for inventory planning.
+Dynamic Routing Engine
+Should
+Service that takes orders and drivers as input and returns optimized routes. MVP can use a heuristic.
+Vibe-Code Gamification
+
+
+
+
+Vibe-Code Task Creation/Mgmt
+Must
+Users can create, edit, complete, and delete personal tasks with deadlines and XP values.
+XP Ledger & Rival Logic
+Must
+A system to reliably award XP for completed tasks and transfer XP to the rival for missed tasks.
+Leaderboard (Friends Only)
+Must
+Users can connect with contacts and view a weekly leaderboard based on XP earned.
+Rival Creation & Customization
+Should
+Users can name their rival, choose an avatar, and select a personality type.
+Operations & Logistics
+
+
+
+
+Vendor Admin Portal (Web)
+Must
+Web-based dashboard for vendors to manage products, inventory, and orders.
+Driver App (Android)
+Must
+Native Android app for delivery partners to manage tasks, navigate, and track earnings.
+Future Scope
+
+
+
+
+Social Sharing of Achievements
+Could
+Ability to share Vibe-Code level-ups or leaderboard rankings on social media.
+Multi-City Support
+Won't
+The architecture will consider it, but the MVP will be hard-coded for a single city.
+Subscription Services
+Won't
+No "Pro" or subscription features for Vibe-Code or delivery in the MVP.
+
+
+Acceptance Criteria & Success Metrics
+
+
+Key Success KPIs (90-Day Targets)
+
+On-Time Delivery Rate: Achieve >95% of orders delivered within the 2-hour SLA.
+Measures operational reliability and customer promise fulfillment.
+Stockout Rate (Top 100 SKUs): Reduce the rate of a customer attempting to purchase an out-of-stock item to <8%.
+Measures the effectiveness of the demand prediction and inventory management systems.
+DAU/MAU Stickiness Ratio: Achieve a ratio of >25%.
+Measures user engagement and habit formation, primarily driven by Vibe-Code.
+Vibe-Code to Commerce Conversion Rate: Achieve a rate of >5% of monthly active Vibe-Code users making at least one Q-commerce purchase in that month.
+Measures the direct commercial impact of the gamification layer.
+Recommendation Engine Uplift (AOV): Achieve a 15% higher Average Order Value for users shown personalized recommendations vs. a control group shown non-personalized items.
+Measures the direct revenue impact of the recommendation AI.
+Cost Per Delivery: Reduce the inflation-adjusted cost per delivery by 20% from the first month's baseline by the end of the 90-day period.
+Measures the efficiency gains from the route optimization engine and operational improvements.
+
+Technical Architecture Diagram Description
+
+The system is designed as a cloud-native microservices architecture to ensure scalability, fault tolerance, and independent deployability of components.
+Clients (Frontend): The system serves three distinct clients: a Customer Mobile App (React Native), a Driver App (Native Android for MVP), and a Vendor Web Portal (React). All clients communicate exclusively with the backend via a single API Gateway.
+API Gateway: This acts as the central entry point, handling request routing, authentication (validating JWTs), rate limiting, and aggregating data from multiple services. It provides a unified and secure interface to the outside world.
+Backend Services (Microservices):
+Core Services (Node.js/Go): A set of independent services handle core business logic: User Service (auth, profiles), Catalog Service (products), Inventory Service (real-time stock), Order Service (lifecycle orchestration), and Vibe-Code Service (gamification logic). Each service owns its own database to ensure loose coupling.
+AI Services (Python/FastAPI): Specialized services for computationally intensive tasks: Recommendation Service (provides personalized product lists), Demand Prediction Service (runs batch forecasting jobs), and Routing Service (solves the VRP for delivery assignments).
+Data & Communication Layer:
+Databases: A polyglot persistence approach is used. PostgreSQL provides transactional integrity for Orders, Users, and Inventory. Redis is used for high-speed caching of sessions, leaderboards, and hot inventory items. Elasticsearch (managed by the Catalog Service) powers fast, text-based product search.
+Message Queue (RabbitMQ/Kafka): An asynchronous messaging backbone decouples services. For example, when an order is placed, the Order Service publishes an ORDER_CREATED event. The Inventory Service, Notification Service, and Analytics systems subscribe to this event to perform their respective tasks without creating a direct dependency, enhancing system resilience.
+Data Flow (Simplified): User requests hit the API Gateway, which routes them to the appropriate Core Service. The service processes the request, interacts with its Database, and may publish an event to the Message Queue. Other services, including the AI Services which continuously update their models from this stream of events, consume these messages to trigger subsequent workflows.
+
+Sample User Stories & API/Data Contracts
+
+
+Sample User Stories
+
+As a new user (Priya), I want to sign up for an account using my mobile number and an OTP, so I can start shopping without the hassle of remembering a password.
+Acceptance Criteria:
+User enters a valid 10-digit Indian mobile number.
+System sends a 6-digit OTP via SMS which expires in 5 minutes.
+Upon successful OTP verification, the user account is created and the user is logged in.
+As a shopper (Priya), I want to see a real-time, accurate delivery ETA on the product page, so I can make a purchase decision based on when I will receive the item.
+Acceptance Criteria:
+The PDP must display an ETA (e.g., "Get it by 8 PM").
+This ETA should be calculated based on my location, current time, and operational hours.
+The ETA must update if I change my delivery address.
+As a productivity user (Rohan), I want to be able to create tasks with different levels of difficulty (Easy, Medium, Hard), so that the XP I earn reflects the effort required.
+Acceptance Criteria:
+The "Create Task" form must include a dropdown/selector for difficulty.
+Easy tasks award 100 XP, Medium 300 XP, and Hard 500 XP.
+The XP value must be visible to the user when creating the task.
+As a vendor (Anika), I want to receive an immediate notification on my dashboard when a new order is placed, so I can start preparing it for pickup without delay.
+Acceptance Criteria:
+The vendor web portal must show a real-time notification badge on the "Orders" tab.
+The new order must appear at the top of the order list with a "New" status.
+An optional email notification should also be sent to the registered vendor email.
+As a delivery partner (Sunil), I want the driver app to provide turn-by-turn navigation within the app, so I don't have to switch between apps while driving.
+Acceptance Criteria:
+Tapping "Navigate" on a stop should open an embedded map view (e.g., Google Maps SDK).
+The navigation should provide both visual and voice-guided directions.
+The app must handle GPS signal loss gracefully and recalculate the route upon reconnection.
+As a competitive user (Rohan), I want to see a weekly leaderboard that only includes my friends, so I can engage in friendly competition without being overwhelmed by global rankings.
+Acceptance Criteria:
+The app must allow users to connect with other users via their phone contacts.
+The Leaderboard tab must show a ranked list of the user and their connected friends based on XP earned in the current week.
+The leaderboard must clearly state when it will reset (e.g., "Resets on Monday at 12 AM").
+
+Key API/Data Contracts (JSON Snippets)
+
+1. Demand Prediction (Internal Data Contract; Output of Batch Job)
+
+JSON
+
+
+{
+  "predictionRunId": "pred-run-20251026",
+  "generatedAt": "2025-10-26T04:00:00Z",
+  "forecasts": [
+    {
+      "sku": "sku-decor-vase-007",
+      "locationId": "darkstore-bengaluru-01",
+      "dailyForecast": [
+        { "date": "2025-10-27", "predictedUnits": 15 },
+        { "date": "2025-10-28", "predictedUnits": 12 },
+        { "date": "2025-10-29", "predictedUnits": 18 }
+      ]
+    }
+  ]
+}
+
+
+2. Product Recommendation Request & Response
+
+JSON
+
+
+// POST /v1/recommendations
+// Request Body
+{
+  "userId": "user-123",
+  "context": {
+    "type": "PRODUCT_DETAIL_PAGE",
+    "itemId": "sku-decor-vase-007"
+  },
+  "placement": "YOU_MIGHT_ALSO_LIKE",
+  "maxResults": 5
+}
+
+// Success Response (200 OK)
+{
+  "recommendationId": "rec-xyz-789",
+  "items": [
+    { "sku": "sku-decor-candle-002", "score": 0.92 },
+    { "sku": "sku-lifestyle-book-011", "score": 0.87 }
+  ],
+  "fallback": false
+}
+
+
+3. Route Assignment Request & Response
+
+JSON
+
+
+// POST /v1/routing/assign_route
+// Request Body
+{
+  "depot": { "lat": 12.9716, "lon": 77.5946 },
+  "drivers": [
+    { "driverId": "driver-01", "startLocation": { "lat": 12.9345, "lon": 77.6244 } }
+  ],
+  "orders": [
+    { "orderId": "order-101", "pickup": { "lat": 12.9279, "lon": 77.6271 }, "dropoff": { "lat": 12.9545, "lon": 77.6191 } }
+  ]
+}
+
+// Success Response (200 OK)
+{
+  "optimizationId": "opt-abc-123",
+  "routes":
+    }
+  ]
+}
+
+
+
+Vibe-Code Game Questions
+
+
+What is the game?
+
+Vibe-Code is a single-player productivity game played against a personalized AI opponent. The goal is to build positive real-life habits by completing self-defined tasks to earn Experience Points (XP). Your success directly strengthens your in-game character, while your procrastination empowers your rival, creating a dynamic and personal motivational challenge.
+
+How do I play?
+
+Set Up: Create your character and customize your AI rival (name, look, personality).
+Create Tasks: Add real-life goals (e.g., "Finish project report," "Workout for 30 mins"). Assign each task a difficulty (Easy/Medium/Hard which corresponds to a set XP value) and a deadline.
+Complete Tasks: As you complete tasks in real life, mark them as "done" in the app before the deadline to earn XP and level up.
+Watch the Rival: If you miss a deadline, the XP you would have earned is automatically transferred to your rival, making them stronger and leveling them up.
+Compete: Track your progress, maintain streaks for bonus XP, and see how you stack up against friends on the weekly leaderboard.
+
+What are the patterns?
+
+Daily Loop: The core pattern is a daily cycle of setting tasks in the morning, checking them off during the day, and reviewing your progress against your rival in the evening.
+Weekly Rhythm: The leaderboard resets every Monday at midnight, creating a weekly competitive cadence and giving all players a fresh start.
+Risk vs. Reward: Players learn to balance their daily task list. Overloading with "Hard" tasks offers high XP rewards but increases the risk of failure, which directly benefits their rival. This encourages realistic goal-setting.
+
+How do I excel?
+
+Consistency is Key: The most effective strategy is to build and maintain daily streaks. Completing at least one task every day for 7 consecutive days unlocks a significant XP bonus.
+Strategic Task Management: Excel by breaking down large goals into smaller, manageable tasks. This creates more opportunities to earn XP and reduces the chance of missing a high-value deadline.
+Minimize Rival Gains: The ultimate path to excelling is to starve your rival of XP. This means being disciplined with deadlines. The fear of empowering your rival acts as a powerful motivator to complete tasks you might otherwise postpone.
+Works cited
+India Q-Commerce Market Size, Share, Forecast by 2032 - UnivDatos, accessed on August 30, 2025, https://univdatos.com/reports/india-q-commerce-market
+The Rise of Quick Commerce in India: Revolutionising Retail and Last-Mile Delivery - IBEF, accessed on August 30, 2025, https://www.ibef.org/blogs/the-rise-of-quick-commerce-in-india-revolutionising-retail-and-last-mile-delivery
+Quick Commerce in India: Trends, Business Models & Challenges & Their Solutions, accessed on August 30, 2025, https://unicommerce.com/blog/quick-commerce-india-business-models-challenges-strategies/
+How to Tackle the Quick Commerce Challenges in India - MetricsCart, accessed on August 30, 2025, https://metricscart.com/insights/quick-commerce-challenges-in-india/
+India Quick Commerce (Qcommerce) Market Size, Trend & Growth 2030 | BlueWeave, accessed on August 30, 2025, https://www.blueweaveconsulting.com/report/india-quick-commerce-market
+5 Q-Commerce Challenges and How StoreHippo Handles Them, accessed on August 30, 2025, https://www.storehippo.com/en/blog/5-q-commerce-challenges-and-how-storehippo-handles-them
+Quick Commerce in India: Fast-Growing Retail Renovation - Tenovia, accessed on August 30, 2025, https://tenovia.com/blog/quick-commerce-in-india/
+The rise of quick commerce: transforming India's retail, consumer behaviors, and employment dynamics | Kearney, accessed on August 30, 2025, https://www.kearney.com/industry/consumer-retail/article/the-rise-of-quick-commerce-transforming-india-s-retail-consumer-behaviors-and-employment-dynamics
+Gamification in apps: A complete guide to using motivation to drive real value - RevenueCat, accessed on August 30, 2025, https://www.revenuecat.com/blog/growth/gamification-in-apps-complete-guide/
+Habitica: Gamified Taskmanager on the App Store - Apple, accessed on August 30, 2025, https://apps.apple.com/us/app/habitica-gamified-taskmanager/id994882113
+Quick Commerce Turns to Profit as India's E-Retail Sector Matures - India Briefing, accessed on August 30, 2025, https://www.india-briefing.com/news/quick-commerce-in-india-shifts-focus-to-profitability-amid-e-retail-boom-38894.html/
+Quick Commerce in India: Navigating Challenges and Unlocking Opportunities for Sustainable Growth, accessed on August 30, 2025, https://jier.org/index.php/journal/article/view/3076
+Best practices & tools for inventory management in e-commerce? - Reddit, accessed on August 30, 2025, https://www.reddit.com/r/InventoryManagement/comments/1izggja/best_practices_tools_for_inventory_management_in/
+Real-Time Inventory Management: Benefits and How To (2025) - Shopify, accessed on August 30, 2025, https://www.shopify.com/retail/real-time-inventory-management-benefits-and-how-to-2025
+How would you gamify reading in a productivity app? : r/ProductivityApps - Reddit, accessed on August 30, 2025, https://www.reddit.com/r/ProductivityApps/comments/1muflue/how_would_you_gamify_reading_in_a_productivity_app/
+Habitica: Gamify Your Tasks - Apps on Google Play, accessed on August 30, 2025, https://play.google.com/store/apps/details?id=com.habitrpg.android.habitica
+India Quick Commerce Market Size | Industry Analysis Report - MarkNtel Advisors, accessed on August 30, 2025, https://www.marknteladvisors.com/research-library/india-quick-commerce-market.html
+Choosing the right product recommendation strategy - Dynamic Yield, accessed on August 30, 2025, https://www.dynamicyield.com/lesson/product-recommendation-strategies/
+10 best practices for a successful product recommendations - Mediarithmics, accessed on August 30, 2025, https://www.mediarithmics.io/blog/10-best-practices-for-a-successful-product-recommendations
+$1 Billion Gameplay Mechanic Wasted | The Nemesis System - YouTube, accessed on August 30, 2025, https://www.youtube.com/watch?v=6LQeOOkqX2U
+The Nemesis System: Middle Earth's game-changing mechanic | Articles - Warner Bros, accessed on August 30, 2025, https://www.warnerbros.co.uk/news/articles/2020/01/22/nemesis-system-middle-earth's-game-changing-mechanic
+THE DIGITAL PERSONAL DATA PROTECTION ACT, 2023 (NO. 22 OF 2023) An Act to provide for the processing of digital personal data in, accessed on August 30, 2025, https://www.meity.gov.in/static/uploads/2024/06/2bf1f0e9f04e6fb4f8fef35e82c42aa5.pdf
+E-Commerce Demand Forecasting: Techniques, Tools & KPIs (2025) - EasyReplenish, accessed on August 30, 2025, https://www.easyreplenish.com/blog/ecommerce-demand-forecasting-techniques-tools-kpis
+What Is AI Demand Forecasting? Use Cases For Ecommerce (2025) - Shopify, accessed on August 30, 2025, https://www.shopify.com/blog/ai-demand-forecasting
+E-commerce Product Recommendation Engine - A 2025 Guide - MoEngage, accessed on August 30, 2025, https://www.moengage.com/blog/e-commerce-product-recommendation-engine/
+Modern Recommender Systems - Part 2: Data - Recombee, accessed on August 30, 2025, https://www.recombee.com/blog/modern-recommender-systems-part-2-data
+Vehicle Routing Problem: Complete Guide to VRP Solutions & Optimization (2025), accessed on August 30, 2025, https://www.upperinc.com/blog/vehicle-routing-problem/
+An Overview of Route Optimization Techniques | OptimoRoute, accessed on August 30, 2025, https://optimoroute.com/route-optimization-techniques/
+Part 2: How much data do I need for a recommendation system? | Shaped Blog, accessed on August 30, 2025, https://www.shaped.ai/blog/part-2-how-much-data-do-i-need-for-a-recommendation-system
+Model retraining recommendations | Deploy models - Tealium Docs, accessed on August 30, 2025, https://docs.tealium.com/predict/deploy/model-retraining-recommendations/
+How to Build Scalable E-commerce with Microservices Architecture - Strapi, accessed on August 30, 2025, https://strapi.io/blog/ecommerce-microservices-architecture-benefits-guide
+Microservices in ecommerce Explained - Alokai, accessed on August 30, 2025, https://alokai.com/blog/microservices
+How to gamify your productivity - Zapier, accessed on August 30, 2025, https://zapier.com/blog/gamify-productivity/
+Gamify Your Class Level I: Xp Grading System - Teched Up Teacher, accessed on August 30, 2025, https://www.techedupteacher.com/gamify-your-class-level-i-xp-grading-system-2/
+20 Productivity App Gamification Examples (2025) - Trophy, accessed on August 30, 2025, https://trophy.so/blog/productivity-gamification-examples
+Gamification Strategies to Increase App Engagement - Storyly, accessed on August 30, 2025, https://www.storyly.io/post/gamification-strategies-to-increase-app-engagement
diff --git a/TheVibeQCom/Wireframe/home_feed_screen/code.html b/TheVibeQCom/Wireframe/home_feed_screen/code.html
new file mode 100644
index 0000000..72acdae
--- /dev/null
+++ b/TheVibeQCom/Wireframe/home_feed_screen/code.html
@@ -0,0 +1,223 @@
+<html><head>
+<link crossorigin="" href="https://fonts.gstatic.com/" rel="preconnect"/>
+<link as="style" href="https://fonts.googleapis.com/css2?display=swap&amp;family=Noto+Sans%3Awght%40400%3B500%3B700%3B900&amp;family=Spline+Sans%3Awght%40400%3B500%3B700" onload="this.rel='stylesheet'" rel="stylesheet"/>
+<title>Vibe - Home</title>
+<link href="data:image/x-icon;base64," rel="icon" type="image/x-icon"/>
+<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
+<meta charset="utf-8"/>
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet"/>
+<style type="text/tailwindcss">
+      :root {
+        --primary-color: #38e07b;
+      }
+      .scroll-hidden::-webkit-scrollbar {
+          display: none;
+      }
+      .scroll-hidden {
+          -ms-overflow-style: none;
+          scrollbar-width: none;
+      }
+    </style>
+</head>
+<body class="bg-gray-900 text-white font-splineSans">
+<div class="flex flex-col min-h-screen">
+<header class="sticky top-0 z-10 bg-gray-900/80 backdrop-blur-sm">
+<div class="container mx-auto px-4 sm:px-6 lg:px-8">
+<div class="flex items-center justify-between py-4">
+<button class="flex items-center gap-2">
+<span class="material-symbols-outlined text-[var(--primary-color)]">
+                location_on
+              </span>
+<div>
+<p class="text-xs text-gray-400">Location</p>
+<p class="text-sm font-bold flex items-center">
+                  New York, USA
+                  <span class="material-symbols-outlined text-sm">
+                    expand_more
+                  </span>
+</p>
+</div>
+</button>
+<div class="flex items-center gap-3">
+<button class="p-2 rounded-full hover:bg-gray-800">
+<span class="material-symbols-outlined">
+                  search
+                </span>
+</button>
+<button class="relative p-2 rounded-full hover:bg-gray-800">
+<span class="material-symbols-outlined">
+                  shopping_bag
+                </span>
+<span class="absolute top-0 right-0 block h-2 w-2 rounded-full bg-[var(--primary-color)]"></span>
+</button>
+</div>
+</div>
+</div>
+</header>
+<main class="flex-grow overflow-y-auto scroll-hidden">
+<div class="container mx-auto px-4 sm:px-6 lg:px-8 py-6">
+<div class="mb-8">
+<div class="relative">
+<div class="flex overflow-x-auto snap-x snap-mandatory scroll-hidden gap-4">
+<div class="snap-center shrink-0 w-full md:w-2/3 lg:w-1/2">
+<div class="relative aspect-video rounded-2xl overflow-hidden">
+<img alt="Promotional banner 1" class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBTTiWSfbb18niwFEDKl4TTBoyvTLTZhWmFaJLPUF4MtQx4lWoyaC5qTHrxpoD4IWTov2_oidywynuPZvJ4EWuBiB8nvFAVy9iBXIGoxH_5hXPZQPd3dd8SFtFqDAHUxRD02OEzwDrKIxkyoYNJr1h_UMXORgFkefwtMxSuckd0knKa7wyoBuffDQYjZQAuI-X1Qgzw2Rzx37s1ZqBG0JC9o8nWD3fxtzSO1fy8nTamNLSo9UIkQHedXgZ5wcTLmV1GpWzYVWFmxIxO"/>
+<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
+<div class="absolute bottom-0 left-0 p-6">
+<h3 class="text-2xl font-bold">Elevate Your Space</h3>
+<p class="text-gray-300">Discover curated decor pieces</p>
+</div>
+</div>
+</div>
+<div class="snap-center shrink-0 w-full md:w-2/3 lg:w-1/2">
+<div class="relative aspect-video rounded-2xl overflow-hidden">
+<img alt="Promotional banner 2" class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDYcoj_YE4VO9epipCepqZ1CNRaFOf37IVhI2UoF9mo6tytg2ACecmCAAdM9cmidIc_8oUOGSAO3Q-z0eGvOhorjt53k8l8lJMBgE6sVtK_V4gmlLAljbjSLj1OEuzzKRKrBXKQF8xmZvKbhUe3AI03MUu46HWt0xqBuzgsRjR0Y-3r1Uss0Ah9w7MAqf0fLkfZnKenScK8KwwIryVw-2n8AB7uDBJciQRxgbdxn5_7aMdin9Nuzo9MdtBXWl1wtG6p_vhl5HUr_imW"/>
+<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
+<div class="absolute bottom-0 left-0 p-6">
+<h3 class="text-2xl font-bold">Curated Collections</h3>
+<p class="text-gray-300">Find your unique style</p>
+</div>
+</div>
+</div>
+<div class="snap-center shrink-0 w-full md:w-2/3 lg:w-1/2">
+<div class="relative aspect-video rounded-2xl overflow-hidden">
+<img alt="Promotional banner 3" class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuB_CCMMzWvmRQ-4tBT7Uto76SaaSbvKTp_YuyFcbTdwOTrEFG5sE-GPFCFe8Fto6H0vkfvyFCFBeVzDq_MHJvG0BcDV5IDS-7kLVaUVN4prF11cLKBtLhpmXkTyoaXnWHnb_KIaBE3kXGax0oJl2_zP7rKkmxXf65QC0gqCWgMHSudlwYXPGMR91N-r1eVclr-_mCIPzadVQdYwd9_muDntG2ndcf96g3eiiIoN9WElXO61G6AIUH5AKx8i7poO009asqR8iOQdSr-e"/>
+<div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
+<div class="absolute bottom-0 left-0 p-6">
+<h3 class="text-2xl font-bold">Find Your Vibe</h3>
+<p class="text-gray-300">Gamify your productivity</p>
+</div>
+</div>
+</div>
+</div>
+</div>
+</div>
+<div class="mb-8">
+<h2 class="text-xl font-bold mb-4">Just For You</h2>
+<div class="flex overflow-x-auto scroll-hidden -mx-4 px-4 gap-4">
+<div class="shrink-0 w-32 text-center">
+<img alt="Desk Essentials" class="w-full aspect-square object-cover rounded-full mb-2" src="https://lh3.googleusercontent.com/aida-public/AB6AXuADx3x2SKDhHsPW4AhKiV34b0KJJhMAkowOI7k12rnaXu21m6k3isC3WsD9JEV6_trZaO_LsaCG7LUQcQoZVJBo65Cd176NmzEG030rExxYQ_Iennk3l6zyEjzx-6GDyZxC0h1NP0imcutP6NJLLOogvnw_NI9XFph7Y9VqK-ZYt5aXvXsmdpF2BZThhZdzx3ngT0aFSfo0ju0OVjERYeHEabOPHoSEgFawmCpK32Oz0nUkEWEcwaNE9vt4Bpt7oyT8gb1fVmoN6n07"/>
+<p class="text-sm font-medium">Desk Essentials</p>
+</div>
+<div class="shrink-0 w-32 text-center">
+<img alt="Wall Decor" class="w-full aspect-square object-cover rounded-full mb-2" src="https://lh3.googleusercontent.com/aida-public/AB6AXuA4qbnjJ2EDlK4BUkZ2NjUrl8ZamfzgUymTsAXCLiQaxSnuKpuNtrygbzMumdmPsTlIEKHVE7KkdXg0DHhMB3jTNNX3BVVwxe-X-eFMmOwxPQfuLOHiID1Emb5xox_cIEY4C4D5pIhUB_BqdNE0QQEWxOok6B9-qL1PxuDDYn76n8Pus_NJYnMNtMoc39oPQiDXU1_rWn-o6KgvOsIiQ9dygQ6MFV-wN_ikRrmdo0LfX0kVGND-CyVUXi2IrZkkSI1G8J_WXIQoVODp"/>
+<p class="text-sm font-medium">Wall Decor</p>
+</div>
+<div class="shrink-0 w-32 text-center">
+<img alt="Cozy Comforts" class="w-full aspect-square object-cover rounded-full mb-2" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCDlpjnC_dzde-GTIy6ejy_O96GfydHs75NtMt4-uXcpsz08N2tK5Qcw7CXq7FfLtaEDovlHk-Dbv6fjSEFE9tKO0GMalbHV12vzh2GdCj6SMinr_BrPxiD8xnfB-FsktxMncy2Mmf3zyzF35Q1TUJdIz2fowYS-c0_HWIZqqo9IbFsl1ASQ-lrZliPVuu1UWIy2TkTYxasSeg6pUT7BAJpes9NHGjPaQXs2_zz0MZUbFya9wXUnoxr7xz7cmwN6AV-FIGiitIWtk6Y"/>
+<p class="text-sm font-medium">Cozy Comforts</p>
+</div>
+<div class="shrink-0 w-32 text-center">
+<img alt="Lighting" class="w-full aspect-square object-cover rounded-full mb-2" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCK20g8e4YYgNN6PLH0jWp-SiyTBfuprBrYG2XM25tj_CodCeJdrkqPa2V5EZrkRBsi6zXTEdqoN0Y32I3Qec3KXAoH56VnCsNtB9O8FcLk1-K_PV6WvC-WlJTlAqBHXuYxX0GQ0QTKRvGruD2TXknjm4gADdqkZUgNsiNmX8Qk5i0xhc-iPxV1sqzczYPQium5y3427vK5VYB9ZMPKwFj4IhAz4Q-Ax1fopY0NSRDG9o6xKpfBniypfDpHAuAyKvlkVMjb3gBSNjeB"/>
+<p class="text-sm font-medium">Lighting</p>
+</div>
+<div class="shrink-0 w-32 text-center">
+<div class="w-full aspect-square rounded-full mb-2 bg-gray-800 flex items-center justify-center">
+<span class="material-symbols-outlined text-4xl text-[var(--primary-color)]">arrow_forward</span>
+</div>
+<p class="text-sm font-medium">See All</p>
+</div>
+</div>
+</div>
+<div class="mb-8">
+<h2 class="text-xl font-bold mb-4">Shop by Category</h2>
+<div class="grid grid-cols-2 sm:grid-cols-4 gap-4">
+<a class="group" href="#">
+<div class="aspect-square bg-gray-800 rounded-2xl flex items-center justify-center p-4 transition-all duration-300 group-hover:bg-[var(--primary-color)]">
+<span class="material-symbols-outlined text-5xl text-[var(--primary-color)] group-hover:text-gray-900 transition-all duration-300">desktop_windows</span>
+</div>
+<p class="text-center mt-2 font-semibold">Home Office</p>
+</a>
+<a class="group" href="#">
+<div class="aspect-square bg-gray-800 rounded-2xl flex items-center justify-center p-4 transition-all duration-300 group-hover:bg-[var(--primary-color)]">
+<span class="material-symbols-outlined text-5xl text-gray-400 group-hover:text-gray-900 transition-all duration-300">living</span>
+</div>
+<p class="text-center mt-2 text-gray-400 group-hover:text-white font-semibold">Living Room</p>
+</a>
+<a class="group" href="#">
+<div class="aspect-square bg-gray-800 rounded-2xl flex items-center justify-center p-4 transition-all duration-300 group-hover:bg-[var(--primary-color)]">
+<span class="material-symbols-outlined text-5xl text-gray-400 group-hover:text-gray-900 transition-all duration-300">bed</span>
+</div>
+<p class="text-center mt-2 text-gray-400 group-hover:text-white font-semibold">Bedroom</p>
+</a>
+<a class="group" href="#">
+<div class="aspect-square bg-gray-800 rounded-2xl flex items-center justify-center p-4 transition-all duration-300 group-hover:bg-[var(--primary-color)]">
+<span class="material-symbols-outlined text-5xl text-gray-400 group-hover:text-gray-900 transition-all duration-300">soup_kitchen</span>
+</div>
+<p class="text-center mt-2 text-gray-400 group-hover:text-white font-semibold">Kitchen</p>
+</a>
+</div>
+</div>
+<div class="mb-8">
+<h2 class="text-xl font-bold mb-4">Popular in Your Area</h2>
+<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
+<div class="group">
+<img alt="Ergonomic Chair" class="w-full aspect-square object-cover rounded-xl mb-2" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCGoZcx0e4Pq9tK0Ij0LU9IQZgtUqmDihCqlg58BsDcJVUXMa4ETt6Wv_n57UNRI8Kl3Gj2xoFH_WCET-9Z8ZreZwIkIRZSi25Apz6kKojO00FbWyR61AQ7Y_GPpq88FVinhodaQR9Zws2GaIkh_6QvYLGkJUw3wt8MgoPnFLR2S5tE5ZjXrGoKeRdg3UfKvWjPpX47kNGwz2aXV3tM2YIXULEl1Lonk_ql-dwcdPK9G3D_52Prj-y-cPB2X_PxU3xE663t6o-Mu_e1"/>
+<p class="font-semibold">Ergonomic Chair</p>
+<p class="text-sm text-gray-400">$299.99</p>
+</div>
+<div class="group">
+<img alt="Smart Lamp" class="w-full aspect-square object-cover rounded-xl mb-2" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCfIWcADdnqFgA5usWR4CG1Q_s2Qw1YZ5Q5LwsDKwYipPWIVeUEkMbccTsf5llQDNLmm1VT2f0UH0fkV4EoJayBg3WXxeeytG8kXhCOvV_ro-2Ip213GlsbjojSaMe0n9N7fgCWtqWZRCVTt9KqHsEZZ5ZpG7kSjimKLtVnEpVSbvnWorP4IV6EkAwC7OD3Ks429PNbdO0VNjYcfiFWpEYDxgy83lp1R-GfnxgOI944LIoReccc9alAV8DuFC_oTqUh_SMT3nXdqayB"/>
+<p class="font-semibold">Smart Lamp</p>
+<p class="text-sm text-gray-400">$89.99</p>
+</div>
+<div class="group">
+<img alt="Floating Shelves" class="w-full aspect-square object-cover rounded-xl mb-2" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAH7noI3boLJtKzcbRDuZ4EBPKogmlni0WSjf2d3qUSKCbGvbCoT5K5Eq-oVYkLDuIlst1RD5CSDB3JKv3XNT9M8UyWSQI6sIiEoUQ7Qo9P6_W9srRCj1dxKxlWegoPtRROtj96Gghe_EMBf4Sy9fx5jyQz2wsc29--lJfiNgeudJ20e7kBj-Sdo4mUfSfxiZIEhHwY05Py_it_HMZ49dRHjWyg9TyaCfne2eUu3kKdgv1EDVhr3JZPPhvIOVK_JCdvLJ1oK6AF9m9g"/>
+<p class="font-semibold">Floating Shelves</p>
+<p class="text-sm text-gray-400">$45.00</p>
+</div>
+<div class="group">
+<img alt="Minimalist Clock" class="w-full aspect-square object-cover rounded-xl mb-2" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCeMcj-RFRCflNcjuoj5KlvUN9zs50ntAJafQdPjBeP0UCh21HrhXvqRfiOUdphRajNqjz0MhXkTMQ15r8EV4dO_WBxDzR5lMdbc-654s7s9xcQU_NDcAzOR1lJMcBi28YJ3RiKAdk9IsbrO3qlXGpmDgUKtKw59UXZPDcYw6cKLjKw6tId4_-iXpiZcuyV9EWlya1yDnlNroD3WH4wKUmZmS7UmRawop1zpiNqNAQ_yG1Dx6hcVEXV6EHVzhdAal2UC_ovNVMvg88s"/>
+<p class="font-semibold">Minimalist Clock</p>
+<p class="text-sm text-gray-400">$35.50</p>
+</div>
+</div>
+</div>
+<div class="mb-8">
+<h2 class="text-xl font-bold mb-4">Themed Collections</h2>
+<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+<div class="relative aspect-video rounded-2xl overflow-hidden group">
+<img alt="The Minimalist Collection" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBzPCHIzN9LiPZnf-Cr7mamXpsec0uzbTxPEE117libuBxY_AVkKCkHcsQD3HjUvROf1_196evaeOCCKP1LWLLadJq6NnayA1q7RYiUKdQ1qXwTkSHN13shaiPe0WEGGLZMjj34CU4wwijQHwkkBxm2K9bicSBcp_XmmI_4hRawBRTZLXHhPyqOAi9a-ZxTg6mPm59DKLcupQuCksMrXa95EiSg_TjsrPVXoTTZ-2oTzJj4BqCktGQp10xRnibSdXmYn8LfiYSB3uTY"/>
+<div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent"></div>
+<div class="absolute bottom-0 left-0 p-6">
+<h3 class="text-xl font-bold">The Minimalist</h3>
+<p class="text-gray-300 text-sm">Clean lines, simple forms.</p>
+</div>
+</div>
+<div class="relative aspect-video rounded-2xl overflow-hidden group">
+<img alt="The Bohemian Collection" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBgrBOQxiVSXeP53lPjdvWXf5REEFhtI7qmb0Kvn3qOfj4RKAbFuk6_HccRtkaVbow6L1VXBC3o-LmEBlzbpUF2IrkG6cXBHXsZidPGYkaHVWhTpkD5NtxYI0arEUeBEcEn2RJbAkxKkiWTcdTcUwj_gf-TEVVSE24wSfg663ZfkCJaChXTRnnZxwvxzpjkANlwwsqGF7xjLSfc3RVKfkXLfwPGHlh5DexQUndPEs0Ow3ASbF7V-8QXQilpHp28D1khIz7LsuqcEa8V"/>
+<div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent"></div>
+<div class="absolute bottom-0 left-0 p-6">
+<h3 class="text-xl font-bold">The Bohemian</h3>
+<p class="text-gray-300 text-sm">Free-spirited and eclectic.</p>
+</div>
+</div>
+</div>
+</div>
+</div>
+</main>
+<footer class="sticky bottom-0 bg-gray-900/80 backdrop-blur-sm border-t border-gray-800">
+<div class="container mx-auto px-4 sm:px-6 lg:px-8">
+<div class="flex justify-around py-2">
+<a class="flex flex-col items-center gap-1 text-[var(--primary-color)]" href="#">
+<span class="material-symbols-outlined">home</span>
+<span class="text-xs font-bold">Home</span>
+</a>
+<a class="flex flex-col items-center gap-1 text-gray-400 hover:text-[var(--primary-color)]" href="#">
+<span class="material-symbols-outlined">store</span>
+<span class="text-xs font-bold">Shop</span>
+</a>
+<a class="flex flex-col items-center gap-1 text-gray-400 hover:text-[var(--primary-color)]" href="#">
+<span class="material-symbols-outlined">qr_code_2</span>
+<span class="text-xs font-bold">Vibe-Code</span>
+</a>
+<a class="flex flex-col items-center gap-1 text-gray-400 hover:text-[var(--primary-color)]" href="#">
+<span class="material-symbols-outlined">person</span>
+<span class="text-xs font-bold">Profile</span>
+</a>
+</div>
+</div>
+</footer>
+</div>
+
+</body></html>
\ No newline at end of file
diff --git a/TheVibeQCom/Wireframe/home_feed_screen/screen.png b/TheVibeQCom/Wireframe/home_feed_screen/screen.png
new file mode 100644
index 0000000..d77d034
Binary files /dev/null and b/TheVibeQCom/Wireframe/home_feed_screen/screen.png differ
diff --git a/TheVibeQCom/Wireframe/location_permission_screen/code.html b/TheVibeQCom/Wireframe/location_permission_screen/code.html
new file mode 100644
index 0000000..8b1df77
--- /dev/null
+++ b/TheVibeQCom/Wireframe/location_permission_screen/code.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en"><head>
+<meta charset="utf-8"/>
+<link crossorigin="" href="https://fonts.gstatic.com/" rel="preconnect"/>
+<link as="style" href="https://fonts.googleapis.com/css2?display=swap&amp;family=Noto+Sans%3Awght%40400%3B500%3B700%3B900&amp;family=Spline+Sans%3Awght%40400%3B500%3B700" onload="this.rel='stylesheet'" rel="stylesheet"/>
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet"/>
+<title>Vibe - Location Access</title>
+<link href="data:image/x-icon;base64," rel="icon" type="image/x-icon"/>
+<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
+</head>
+<body class="bg-[#111714]" style='font-family: "Spline Sans", "Noto Sans", sans-serif;'>
+<div class="relative flex size-full min-h-screen flex-col items-center justify-center bg-gradient-to-br from-[#111714] to-[#1a2b23] dark group/design-root overflow-x-hidden">
+<div class="w-full max-w-md bg-[#181F1B]/60 backdrop-blur-xl rounded-2xl shadow-2xl p-8 text-center text-white">
+<div class="mx-auto mb-6 flex h-24 w-24 items-center justify-center rounded-full bg-[#38e07b]/10 text-[#38e07b]">
+<span class="material-symbols-outlined text-5xl">
+            location_on
+          </span>
+</div>
+<h1 class="text-3xl font-bold tracking-tight text-white sm:text-4xl">
+          Enable Location for Fast Deliveries
+        </h1>
+<p class="mt-4 text-lg text-gray-300">
+          To show you product availability and deliver to your address, we need
+          your location. Your data is safe with us.
+        </p>
+<div class="mt-8 space-y-4">
+<button class="flex w-full cursor-pointer items-center justify-center overflow-hidden rounded-full h-14 px-8 bg-[#38e07b] text-[#111714] text-lg font-bold leading-normal tracking-[0.015em] transition-transform hover:scale-105">
+<span class="truncate">Allow Location Access</span>
+</button>
+<button class="flex w-full cursor-pointer items-center justify-center overflow-hidden rounded-full h-12 px-6 bg-transparent text-gray-400 text-base font-medium leading-normal hover:bg-white/5 transition-colors">
+<span class="truncate">Enter Location Manually</span>
+</button>
+</div>
+</div>
+</div>
+
+</body></html>
\ No newline at end of file
diff --git a/TheVibeQCom/Wireframe/location_permission_screen/screen.png b/TheVibeQCom/Wireframe/location_permission_screen/screen.png
new file mode 100644
index 0000000..4b713e5
Binary files /dev/null and b/TheVibeQCom/Wireframe/location_permission_screen/screen.png differ
diff --git a/TheVibeQCom/Wireframe/login_/_sign_up_screen/code.html b/TheVibeQCom/Wireframe/login_/_sign_up_screen/code.html
new file mode 100644
index 0000000..91f8d69
--- /dev/null
+++ b/TheVibeQCom/Wireframe/login_/_sign_up_screen/code.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang="en"><head>
+<meta charset="utf-8"/>
+<link crossorigin="" href="https://fonts.gstatic.com/" rel="preconnect"/>
+<link as="style" href="https://fonts.googleapis.com/css2?display=swap&amp;family=Noto+Sans%3Awght%40400%3B500%3B700%3B900&amp;family=Spline+Sans%3Awght%40400%3B500%3B700" onload="this.rel='stylesheet'" rel="stylesheet"/>
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet"/>
+<title>Vibe - Login</title>
+<link href="data:image/x-icon;base64," rel="icon" type="image/x-icon"/>
+<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
+<style type="text/tailwindcss">
+      :root {
+        --primary-50: #f0fdf4;
+        --primary-100: #dcfce7;
+        --primary-200: #bbf7d0;
+        --primary-300: #86efac;
+        --primary-400: #4ade80;
+        --primary-500: #22c55e;
+        --primary-600: #16a34a;
+        --primary-700: #15803d;
+        --primary-800: #166534;
+        --primary-900: #14532d;
+        --primary-950: #052e16;
+      }
+    </style>
+</head>
+<body class="bg-[#111714]">
+<div class="relative flex size-full min-h-screen flex-col dark group/design-root" style='font-family: "Spline Sans", "Noto Sans", sans-serif;'>
+<div class="flex h-full grow flex-col">
+<header class="flex items-center justify-between whitespace-nowrap px-10 py-4">
+<div class="flex items-center gap-2 text-white">
+<svg class="h-8 w-8 text-[var(--primary-400)]" fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
+<path d="M39.5563 34.1455V13.8546C39.5563 15.708 36.8773 17.3437 32.7927 18.3189C30.2914 18.916 27.263 19.2655 24 19.2655C20.737 19.2655 17.7086 18.916 15.2073 18.3189C11.1227 17.3437 8.44365 15.708 8.44365 13.8546V34.1455C8.44365 35.9988 11.1227 37.6346 15.2073 38.6098C17.7086 39.2069 20.737 39.5564 24 39.5564C27.263 39.5564 30.2914 39.2069 32.7927 38.6098C36.8773 37.6346 39.5563 35.9988 39.5563 34.1455Z" fill="currentColor"></path>
+<path clip-rule="evenodd" d="M10.4485 13.8519C10.4749 13.9271 10.6203 14.246 11.379 14.7361C12.298 15.3298 13.7492 15.9145 15.6717 16.3735C18.0007 16.9296 20.8712 17.2655 24 17.2655C27.1288 17.2655 29.9993 16.9296 32.3283 16.3735C34.2508 15.9145 35.702 15.3298 36.621 14.7361C37.3796 14.246 37.5251 13.9271 37.5515 13.8519C37.5287 13.7876 37.4333 13.5973 37.0635 13.2931C36.5266 12.8516 35.6288 12.3647 34.343 11.9175C31.79 11.0295 28.1333 10.4437 24 10.4437C19.8667 10.4437 16.2099 11.0295 13.657 11.9175C12.3712 12.3647 11.4734 12.8516 10.9365 13.2931C10.5667 13.5973 10.4713 13.7876 10.4485 13.8519ZM37.5563 18.7877C36.3176 19.3925 34.8502 19.8839 33.2571 20.2642C30.5836 20.9025 27.3973 21.2655 24 21.2655C20.6027 21.2655 17.4164 20.9025 14.7429 20.2642C13.1498 19.8839 11.6824 19.3925 10.4436 18.7877V34.1275C10.4515 34.1545 10.5427 34.4867 11.379 35.027C12.298 35.6207 13.7492 36.2054 15.6717 36.6644C18.0007 37.2205 20.8712 37.5564 24 37.5564C27.1288 37.5564 29.9993 37.2205 32.3283 36.6644C34.2508 36.2054 35.702 35.6207 36.621 35.027C37.4573 34.4867 37.5485 34.1546 37.5563 34.1275V18.7877ZM41.5563 13.8546V34.1455C41.5563 36.1078 40.158 37.5042 38.7915 38.3869C37.3498 39.3182 35.4192 40.0389 33.2571 40.5551C30.5836 41.1934 27.3973 41.5564 24 41.5564C20.6027 41.5564 17.4164 41.1934 14.7429 40.5551C12.5808 40.0389 10.6502 39.3182 9.20848 38.3869C7.84205 37.5042 6.44365 36.1078 6.44365 34.1455L6.44365 13.8546C6.44365 12.2684 7.37223 11.0454 8.39581 10.2036C9.43325 9.3505 10.8137 8.67141 12.343 8.13948C15.4203 7.06909 19.5418 6.44366 24 6.44366C28.4582 6.44366 32.5797 7.06909 35.657 8.13948C37.1863 8.67141 38.5667 9.3505 39.6042 10.2036C40.6278 11.0454 41.5563 12.2684 41.5563 13.8546Z" fill="currentColor" fill-rule="evenodd"></path>
+</svg>
+<h1 class="text-white text-xl font-bold leading-tight tracking-[-0.015em]">Vibe</h1>
+</div>
+</header>
+<main class="flex flex-1 items-center justify-center py-16">
+<div class="flex w-full max-w-md flex-col items-center gap-8 px-4">
+<div class="flex flex-col items-center gap-2 text-center">
+<h2 class="text-3xl font-bold tracking-tight text-white">Welcome to Vibe</h2>
+<p class="text-base text-gray-400">Shop curated decor, achieve your goals.</p>
+</div>
+<form class="flex w-full flex-col gap-6">
+<div class="flex flex-col gap-2">
+<label class="text-sm font-medium text-white" for="mobile-number">Mobile Number</label>
+<div class="relative">
+<div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
+<span class="text-gray-400">+91</span>
+</div>
+<input class="form-input block w-full rounded-xl border border-gray-700 bg-gray-800 py-3 pl-12 pr-4 text-white placeholder-gray-500 transition-colors focus:border-[var(--primary-400)] focus:outline-none focus:ring-4 focus:ring-[var(--primary-400)]/20" id="mobile-number" pattern="\d{10}" placeholder="Enter your number" required="" type="tel"/>
+</div>
+</div>
+<button class="flex h-12 w-full items-center justify-center rounded-full bg-[var(--primary-500)] text-base font-bold text-black transition-colors hover:bg-[var(--primary-600)] focus:outline-none focus:ring-4 focus:ring-[var(--primary-400)]/50 disabled:cursor-not-allowed disabled:bg-gray-700 disabled:text-gray-400" type="submit">
+                Continue
+              </button>
+</form>
+<p class="px-4 text-center text-xs text-gray-500">
+              By continuing, you agree to our
+              <a class="font-medium text-gray-400 hover:text-[var(--primary-400)]" href="#">Terms of Service</a>
+              and
+              <a class="font-medium text-gray-400 hover:text-[var(--primary-400)]" href="#">Privacy Policy</a>.
+            </p>
+</div>
+</main>
+</div>
+</div>
+
+</body></html>
\ No newline at end of file
diff --git a/TheVibeQCom/Wireframe/login_/_sign_up_screen/screen.png b/TheVibeQCom/Wireframe/login_/_sign_up_screen/screen.png
new file mode 100644
index 0000000..3d977e1
Binary files /dev/null and b/TheVibeQCom/Wireframe/login_/_sign_up_screen/screen.png differ
diff --git a/TheVibeQCom/Wireframe/order_tracking_screen/code.html b/TheVibeQCom/Wireframe/order_tracking_screen/code.html
new file mode 100644
index 0000000..3ceef8e
--- /dev/null
+++ b/TheVibeQCom/Wireframe/order_tracking_screen/code.html
@@ -0,0 +1,159 @@
+<html><head>
+<link crossorigin="" href="https://fonts.gstatic.com/" rel="preconnect"/>
+<link as="style" href="https://fonts.googleapis.com/css2?display=swap&amp;family=Noto+Sans%3Awght%40400%3B500%3B700%3B900&amp;family=Spline+Sans%3Awght%40400%3B500%3B700" onload="this.rel='stylesheet'" rel="stylesheet"/>
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet"/>
+<meta charset="utf-8"/>
+<title>Vibe Order Tracking</title>
+<link href="data:image/x-icon;base64," rel="icon" type="image/x-icon"/>
+<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
+<style type="text/tailwindcss">
+      :root {
+        --primary-color: #38e07b;
+      }
+      .timeline-item.completed .timeline-icon {
+        background-color: var(--primary-color);
+        color: #111714;
+      }
+      .timeline-item.completed .timeline-line {
+        background-color: var(--primary-color);
+      }
+    </style>
+</head>
+<body class="bg-[#111714]" style='font-family: "Spline Sans", "Noto Sans", sans-serif;'>
+<div class="relative flex size-full min-h-screen flex-col text-white dark group/design-root overflow-x-hidden">
+<div class="layout-container flex h-full grow flex-col">
+<header class="flex items-center justify-between whitespace-nowrap border-b border-solid border-b-[#29382f] px-10 py-4">
+<div class="flex items-center gap-3 text-white">
+<svg class="h-8 w-8 text-[var(--primary-color)]" fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
+<path d="M39.5563 34.1455V13.8546C39.5563 15.708 36.8773 17.3437 32.7927 18.3189C30.2914 18.916 27.263 19.2655 24 19.2655C20.737 19.2655 17.7086 18.916 15.2073 18.3189C11.1227 17.3437 8.44365 15.708 8.44365 13.8546V34.1455C8.44365 35.9988 11.1227 37.6346 15.2073 38.6098C17.7086 39.2069 20.737 39.5564 24 39.5564C27.263 39.5564 30.2914 39.2069 32.7927 38.6098C36.8773 37.6346 39.5563 35.9988 39.5563 34.1455Z" fill="currentColor"></path>
+<path clip-rule="evenodd" d="M10.4485 13.8519C10.4749 13.9271 10.6203 14.246 11.379 14.7361C12.298 15.3298 13.7492 15.9145 15.6717 16.3735C18.0007 16.9296 20.8712 17.2655 24 17.2655C27.1288 17.2655 29.9993 16.9296 32.3283 16.3735C34.2508 15.9145 35.702 15.3298 36.621 14.7361C37.3796 14.246 37.5251 13.9271 37.5515 13.8519C37.5287 13.7876 37.4333 13.5973 37.0635 13.2931C36.5266 12.8516 35.6288 12.3647 34.343 11.9175C31.79 11.0295 28.1333 10.4437 24 10.4437C19.8667 10.4437 16.2099 11.0295 13.657 11.9175C12.3712 12.3647 11.4734 12.8516 10.9365 13.2931C10.5667 13.5973 10.4713 13.7876 10.4485 13.8519ZM37.5563 18.7877C36.3176 19.3925 34.8502 19.8839 33.2571 20.2642C30.5836 20.9025 27.3973 21.2655 24 21.2655C20.6027 21.2655 17.4164 20.9025 14.7429 20.2642C13.1498 19.8839 11.6824 19.3925 10.4436 18.7877V34.1275C10.4515 34.1545 10.5427 34.4867 11.379 35.027C12.298 35.6207 13.7492 36.2054 15.6717 36.6644C18.0007 37.2205 20.8712 37.5564 24 37.5564C27.1288 37.5564 29.9993 37.2205 32.3283 36.6644C34.2508 36.2054 35.702 35.6207 36.621 35.027C37.4573 34.4867 37.5485 34.1546 37.5563 34.1275V18.7877ZM41.5563 13.8546V34.1455C41.5563 36.1078 40.158 37.5042 38.7915 38.3869C37.3498 39.3182 35.4192 40.0389 33.2571 40.5551C30.5836 41.1934 27.3973 41.5564 24 41.5564C20.6027 41.5564 17.4164 41.1934 14.7429 40.5551C12.5808 40.0389 10.6502 39.3182 9.20848 38.3869C7.84205 37.5042 6.44365 36.1078 6.44365 34.1455L6.44365 13.8546C6.44365 12.2684 7.37223 11.0454 8.39581 10.2036C9.43325 9.3505 10.8137 8.67141 12.343 8.13948C15.4203 7.06909 19.5418 6.44366 24 6.44366C28.4582 6.44366 32.5797 7.06909 35.657 8.13948C37.1863 8.67141 38.5667 9.3505 39.6042 10.2036C40.6278 11.0454 41.5563 12.2684 41.5563 13.8546Z" fill="currentColor" fill-rule="evenodd"></path>
+</svg>
+<h1 class="text-white text-xl font-bold">Vibe</h1>
+</div>
+<div class="flex flex-1 justify-end gap-4 items-center">
+<button class="flex items-center justify-center rounded-full h-10 w-10 bg-[#29382f] text-white">
+<span class="material-symbols-outlined"> notifications </span>
+</button>
+<div class="bg-center bg-no-repeat aspect-square bg-cover rounded-full size-10" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuCRxvcwUEEg8xP5BB97oKEMoa5q134yliZpY67PEEjaFBJp2XqiDc85t0-1OtFSykoFeciKLnOHI3v8IQ1L_1WRRa-LO2TOXAqYOiDIty-WjCN12HaFPjxqD1nI4PjggKBuVJMnCVFuPxKWunCqaCrjj7vtiAWKp35c-UAF6YjFT3Aj_PAd0SXn4QlSlTHyR5P9D40ZzAM0B5dCui9OEZsAyOircrGEibBtIu4FgHNWfAz2fMV-Nf9m2JfPfNQ0XNlFwZLmq45rvzUA");'></div>
+</div>
+</header>
+<main class="px-10 lg:px-20 xl:px-40 flex flex-1 justify-center py-8">
+<div class="layout-content-container flex flex-col max-w-4xl flex-1 gap-8">
+<div>
+<p class="text-4xl font-bold">Your Vibe is on the way!</p>
+<p class="text-[#9eb7a8] text-sm mt-1">Order #123456789</p>
+</div>
+<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
+<div class="lg:col-span-2 space-y-8">
+<div class="w-full bg-center bg-no-repeat aspect-video bg-cover rounded-xl" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuAH7Amjyn3H8wbfccTYB3ZGJbaS2cmTw4O-wcPJ84-u5GaCwgkp33KlsbnLj5M0lt9Zqp1kSMZNYZv-SB9T5hzA1IiCEgmVE4QpLM0ZCFYrmiVmXsl4OBLOOU3VtgDxdMK3pEdBpFMLqiyIj5q16JzRDBMAzU5SvalQe2UK1EWdCF3QaXbWny_squGKXPuKZoYQ6T_C3kgD8NzvcRYjJJMZvI2koe-6meBTJMnMXiDRdJ5Fed-3IwV14489TtfJY2eCQ-y5rtSIKlEe");'></div>
+<div class="bg-[#1a241f] rounded-2xl p-6">
+<h3 class="text-xl font-bold mb-6">Order Status</h3>
+<div class="space-y-2">
+<div class="flex items-start timeline-item completed">
+<div class="flex flex-col items-center mr-4">
+<div class="timeline-icon flex items-center justify-center rounded-full size-8"><span class="material-symbols-outlined text-base">check</span></div>
+<div class="timeline-line w-0.5 h-12 bg-[#3d5245]"></div>
+</div>
+<div>
+<p class="font-medium">Order Placed</p>
+<p class="text-sm text-[#9eb7a8]">10:00 AM</p>
+</div>
+</div>
+<div class="flex items-start timeline-item completed">
+<div class="flex flex-col items-center mr-4">
+<div class="timeline-icon flex items-center justify-center rounded-full size-8"><span class="material-symbols-outlined text-base">inventory_2</span></div>
+<div class="timeline-line w-0.5 h-12 bg-[#3d5245]"></div>
+</div>
+<div>
+<p class="font-medium">Preparing Your Order</p>
+<p class="text-sm text-[#9eb7a8]">10:15 AM</p>
+</div>
+</div>
+<div class="flex items-start timeline-item">
+<div class="flex flex-col items-center mr-4">
+<div class="flex items-center justify-center rounded-full size-8 bg-[#29382f] timeline-icon"><span class="material-symbols-outlined text-base">local_shipping</span></div>
+<div class="w-0.5 h-12 bg-[#3d5245] timeline-line"></div>
+</div>
+<div>
+<p class="font-medium text-white/50">Out for Delivery</p>
+<p class="text-sm text-[#9eb7a8]/50">Est. 10:30 AM</p>
+</div>
+</div>
+<div class="flex items-start timeline-item">
+<div class="flex flex-col items-center mr-4">
+<div class="flex items-center justify-center rounded-full size-8 bg-[#29382f] timeline-icon"><span class="material-symbols-outlined text-base">home</span></div>
+</div>
+<div>
+<p class="font-medium text-white/50">Delivered</p>
+<p class="text-sm text-[#9eb7a8]/50">Est. 10:45 AM</p>
+</div>
+</div>
+</div>
+</div>
+</div>
+<div class="lg:col-span-1 space-y-8">
+<div class="bg-[#1a241f] rounded-2xl p-6">
+<h3 class="text-lg font-bold mb-2">Estimated Arrival</h3>
+<p class="text-3xl font-bold text-[var(--primary-color)]">10:45 AM</p>
+</div>
+<div class="bg-[#1a241f] rounded-2xl p-6">
+<h3 class="text-lg font-bold mb-4">Delivery Partner</h3>
+<div class="flex items-center gap-4">
+<img alt="Delivery partner Alex" class="rounded-full h-14 w-14 object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuC4mlPh9-l0EHYOeq-cmTooFwBchwg9VjdsKxn99IM0TE2GFR8fkVHmsm1R3Iw61R-45z6zsFcLik2NBo9iH_XXGyVsmx_G2XYgznJ2isezbF_C5-8O3KkvAf6qBSeroEuKk-j6-VbpXnB3wjFdxEB5h-yST44mj7EjdTKFGoUqibaouJuPnATx19TDTzebJYX_UtrNyPctkng3ePcLwdeuamINVzWf5UYe6FIIJpETPJ1YA6h3ftrtcx_M-d_4Ay4Rq__dvuNVQhaG"/>
+<div>
+<p class="font-medium">Alex</p>
+<p class="text-sm text-[#9eb7a8]">Vibe Delivery Team</p>
+</div>
+<button class="ml-auto flex items-center justify-center rounded-full h-10 w-10 bg-[#29382f] text-white">
+<span class="material-symbols-outlined text-xl">call</span>
+</button>
+</div>
+</div>
+<div class="bg-[#1a241f] rounded-2xl p-6">
+<details>
+<summary class="flex justify-between items-center cursor-pointer">
+<h3 class="text-lg font-bold">Order Summary</h3>
+<span class="material-symbols-outlined transition-transform duration-300 transform group-open:rotate-180">expand_more</span>
+</summary>
+<div class="mt-4 space-y-4 pt-4 border-t border-[#29382f]">
+<div class="flex justify-between text-sm">
+<p class="text-[#9eb7a8]">1 x Minimalist Desk Lamp</p>
+<p>$49.99</p>
+</div>
+<div class="flex justify-between text-sm">
+<p class="text-[#9eb7a8]">1 x Ergonomic Chair</p>
+<p>$199.99</p>
+</div>
+<div class="flex justify-between text-sm">
+<p class="text-[#9eb7a8]">1 x Productivity Planner</p>
+<p>$29.99</p>
+</div>
+<div class="pt-4 border-t border-[#29382f] space-y-2">
+<div class="flex justify-between text-sm">
+<p class="text-[#9eb7a8]">Subtotal</p>
+<p>$279.97</p>
+</div>
+<div class="flex justify-between text-sm">
+<p class="text-[#9eb7a8]">Delivery Fee</p>
+<p>$4.99</p>
+</div>
+<div class="flex justify-between font-bold text-base mt-2">
+<p>Total</p>
+<p>$284.96</p>
+</div>
+</div>
+</div>
+</details>
+</div>
+<button class="flex w-full items-center justify-center gap-2 rounded-full h-12 px-6 bg-[var(--primary-color)] text-[#111714] text-base font-bold">
+<span class="material-symbols-outlined">help_outline</span>
+<span>Need Help?</span>
+</button>
+</div>
+</div>
+</div>
+</main>
+</div>
+</div>
+
+</body></html>
\ No newline at end of file
diff --git a/TheVibeQCom/Wireframe/order_tracking_screen/screen.png b/TheVibeQCom/Wireframe/order_tracking_screen/screen.png
new file mode 100644
index 0000000..e727517
Binary files /dev/null and b/TheVibeQCom/Wireframe/order_tracking_screen/screen.png differ
diff --git a/TheVibeQCom/Wireframe/product_detail_page_(pdp)/code.html b/TheVibeQCom/Wireframe/product_detail_page_(pdp)/code.html
new file mode 100644
index 0000000..7a35e5d
--- /dev/null
+++ b/TheVibeQCom/Wireframe/product_detail_page_(pdp)/code.html
@@ -0,0 +1,156 @@
+<html><head>
+<link crossorigin="" href="https://fonts.gstatic.com/" rel="preconnect"/>
+<link as="style" href="https://fonts.googleapis.com/css2?display=swap&amp;family=Noto+Sans%3Awght%40400%3B500%3B700%3B900&amp;family=Spline+Sans%3Awght%40400%3B500%3B700" onload="this.rel='stylesheet'" rel="stylesheet"/>
+<meta charset="utf-8"/>
+<title>Vibe - Product Details</title>
+<link href="data:image/x-icon;base64," rel="icon" type="image/x-icon"/>
+<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet"/>
+</head>
+<body class="bg-[#111714]">
+<div class="relative flex size-full min-h-screen flex-col text-white dark group/design-root overflow-x-hidden" style='font-family: "Spline Sans", "Noto Sans", sans-serif;'>
+<div class="layout-container flex h-full grow flex-col">
+<header class="flex items-center justify-between whitespace-nowrap border-b border-solid border-b-[#29382f] px-10 py-3">
+<div class="flex items-center gap-4">
+<div class="size-8 text-[#38e07b]">
+<svg fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
+<path d="M39.5563 34.1455V13.8546C39.5563 15.708 36.8773 17.3437 32.7927 18.3189C30.2914 18.916 27.263 19.2655 24 19.2655C20.737 19.2655 17.7086 18.916 15.2073 18.3189C11.1227 17.3437 8.44365 15.708 8.44365 13.8546V34.1455C8.44365 35.9988 11.1227 37.6346 15.2073 38.6098C17.7086 39.2069 20.737 39.5564 24 39.5564C27.263 39.5564 30.2914 39.2069 32.7927 38.6098C36.8773 37.6346 39.5563 35.9988 39.5563 34.1455Z" fill="currentColor"></path>
+<path clip-rule="evenodd" d="M10.4485 13.8519C10.4749 13.9271 10.6203 14.246 11.379 14.7361C12.298 15.3298 13.7492 15.9145 15.6717 16.3735C18.0007 16.9296 20.8712 17.2655 24 17.2655C27.1288 17.2655 29.9993 16.9296 32.3283 16.3735C34.2508 15.9145 35.702 15.3298 36.621 14.7361C37.3796 14.246 37.5251 13.9271 37.5515 13.8519C37.5287 13.7876 37.4333 13.5973 37.0635 13.2931C36.5266 12.8516 35.6288 12.3647 34.343 11.9175C31.79 11.0295 28.1333 10.4437 24 10.4437C19.8667 10.4437 16.2099 11.0295 13.657 11.9175C12.3712 12.3647 11.4734 12.8516 10.9365 13.2931C10.5667 13.5973 10.4713 13.7876 10.4485 13.8519ZM37.5563 18.7877C36.3176 19.3925 34.8502 19.8839 33.2571 20.2642C30.5836 20.9025 27.3973 21.2655 24 21.2655C20.6027 21.2655 17.4164 20.9025 14.7429 20.2642C13.1498 19.8839 11.6824 19.3925 10.4436 18.7877V34.1275C10.4515 34.1545 10.5427 34.4867 11.379 35.027C12.298 35.6207 13.7492 36.2054 15.6717 36.6644C18.0007 37.2205 20.8712 37.5564 24 37.5564C27.1288 37.5564 29.9993 37.2205 32.3283 36.6644C34.2508 36.2054 35.702 35.6207 36.621 35.027C37.4573 34.4867 37.5485 34.1546 37.5563 34.1275V18.7877ZM41.5563 13.8546V34.1455C41.5563 36.1078 40.158 37.5042 38.7915 38.3869C37.3498 39.3182 35.4192 40.0389 33.2571 40.5551C30.5836 41.1934 27.3973 41.5564 24 41.5564C20.6027 41.5564 17.4164 41.1934 14.7429 40.5551C12.5808 40.0389 10.6502 39.3182 9.20848 38.3869C7.84205 37.5042 6.44365 36.1078 6.44365 34.1455L6.44365 13.8546C6.44365 12.2684 7.37223 11.0454 8.39581 10.2036C9.43325 9.3505 10.8137 8.67141 12.343 8.13948C15.4203 7.06909 19.5418 6.44366 24 6.44366C28.4582 6.44366 32.5797 7.06909 35.657 8.13948C37.1863 8.67141 38.5667 9.3505 39.6042 10.2036C40.6278 11.0454 41.5563 12.2684 41.5563 13.8546Z" fill="currentColor" fill-rule="evenodd"></path>
+</svg>
+</div>
+<h2 class="text-white text-xl font-bold leading-tight tracking-[-0.015em]">Vibe</h2>
+</div>
+<div class="flex flex-1 justify-end gap-4">
+<label class="relative hidden lg:block">
+<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-[#9eb7a8]">search</span>
+<input class="form-input w-full min-w-40 max-w-64 !h-10 flex-1 resize-none overflow-hidden rounded-full text-white focus:outline-0 focus:ring-2 focus:ring-[#38e07b] border-none bg-[#29382f] focus:border-none placeholder:text-[#9eb7a8] pl-10 pr-4 text-base font-normal leading-normal" placeholder="Search" value=""/>
+</label>
+<button class="flex size-10 cursor-pointer items-center justify-center overflow-hidden rounded-full bg-[#29382f] text-white">
+<span class="material-symbols-outlined">favorite_border</span>
+</button>
+<div class="bg-center bg-no-repeat aspect-square bg-cover rounded-full size-10" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuDr1b6Kj7QmXczbJLmseM5Vxzl0CjsMJyvkH1qR7O0wihLtxM-bmog5sV0VoM1tyMLymgY4slMsJO5eQz1InF_FJcOSdW7U7BWPpqizw9f7R6weGjR5O2hlSZ4NfRwBpjOdipmVxSCqH3OGSOIsslMDJTqjqI4uNfdaMGEGScl5XC35zdGrD_pd0Asic8_YszIXRoPpsE38UK1icHdxCptpimMcMQMW-aQ8R9E9d9Ysaz8Nv11eW4GGaTg6kH-xlVNoIJOqFL0N9f4E");'></div>
+</div>
+</header>
+<main class="flex-1 px-4 sm:px-6 lg:px-8 py-8">
+<div class="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-12">
+<div class="flex flex-col gap-4">
+<div class="relative w-full aspect-[4/3] rounded-2xl overflow-hidden shadow-lg">
+<div class="absolute inset-0 bg-cover bg-center" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuBuphkKwLdSYo6FXT7B2zfsHcsIDd-eHWPz28N4Uom_fMLWWJae8Y92VkX4EXiLYoStTTAUQ1HfgTEnaooSzxKvYhGX4ZNRbZYDgOj1w502W3prB2qJ1y5RZfcEtcTqVMku20giEuytV9E8sUbDKVeA7H6lag8xeMDCcXJQkbwG5yArBht5myXJSP4wHzBQ_3ypfmQN8TneNcGqiRNgloU84YF045xJdyl_E3NrsJYWvlh6BV9npRGkoaS3h7Ryjdu_1AzSZfF2QYSq");'></div>
+<div class="absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-2">
+<span class="w-2 h-2 rounded-full bg-white"></span>
+<span class="w-2 h-2 rounded-full bg-white/50"></span>
+<span class="w-2 h-2 rounded-full bg-white/50"></span>
+</div>
+</div>
+<div class="grid grid-cols-3 gap-4">
+<div class="aspect-square rounded-xl bg-cover bg-center" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuBuphkKwLdSYo6FXT7B2zfsHcsIDd-eHWPz28N4Uom_fMLWWJae8Y92VkX4EXiLYoStTTAUQ1HfgTEnaooSzxKvYhGX4ZNRbZYDgOj1w502W3prB2qJ1y5RZfcEtcTqVMku20giEuytV9E8sUbDKVeA7H6lag8xeMDCcXJQkbwG5yArBht5myXJSP4wHzBQ_3ypfmQN8TneNcGqiRNgloU84YF045xJdyl_E3NrsJYWvlh6BV9npRGkoaS3h7Ryjdu_1AzSZfF2QYSq");'></div>
+<div class="aspect-square rounded-xl bg-cover bg-center opacity-70" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuBTOH3Hubkm_VLtWgYjmKd62xx84u7EMWdTbWffNqgb4v0NOhli5Z8lmNF2ML29JW9h4OBD3VuVh5tktUlkYjJsT6nEv-vSSrV9AeYaCdVvDXOOoLILymUD1yKvGcT6lZzs6mObnEEzvwL3KqtAODJvyUGDXcY1Y8EEMOF8PPqfPmrDHBmI54rHvyluPamqOeocG6nDukqmX_vJbiAO0Z0ratHm6UKflmslMsXBxUC_BziCpNdwFiQEb7iB5BY8ME91dDglYbSj2GDh");'></div>
+<div class="aspect-square rounded-xl bg-cover bg-center opacity-70" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuD-TJaGTORFgN1QTnuJT3QPoEUBxTVoyFswI9LMJ9CIg1hWi5GkV3qCilubN66TDLXiBtrtHIs8EceQi60t26KlE4VgEdsLQVisRiGHvwAa8lKG5oJw9WEfRT6-5DRsq6WQln9bl9o70Ml0eeaV6gTw9U4-4z7h4GTOZoRweiSLm69IfZFepnXK89cXQMzmY32FXfoK6KO4EVjF6davq-HZGw5Pq46NlrFeUEREqkdi0XVsxF5VcEKgUibbJ7xx-90VERC7hbT3Qq4o");'></div>
+</div>
+</div>
+<div class="flex flex-col gap-6">
+<div>
+<a class="text-[#9eb7a8] text-sm font-medium leading-normal hover:text-[#38e07b] transition-colors" href="#">by StudioHaus</a>
+<h1 class="text-white text-3xl md:text-4xl font-bold leading-tight tracking-tight mt-1">Minimalist Desk Organizer</h1>
+<p class="text-[#9eb7a8] text-base font-normal leading-relaxed mt-4">Keep your workspace tidy with this sleek organizer. Perfect for pens, notebooks, and small accessories.</p>
+</div>
+<div class="flex items-baseline gap-3">
+<span class="text-white text-3xl font-bold">$28.00</span>
+<span class="text-red-500 text-lg line-through">$35.00</span>
+</div>
+<div class="flex items-center gap-4">
+<p class="text-[#9eb7a8] text-sm font-medium">Quantity</p>
+<div class="flex items-center rounded-full bg-[#29382f]">
+<button class="flex items-center justify-center size-10 text-[#9eb7a8] hover:text-white transition-colors rounded-l-full"><span class="material-symbols-outlined text-xl">remove</span></button>
+<span class="px-2 text-lg font-bold">1</span>
+<button class="flex items-center justify-center size-10 text-[#9eb7a8] hover:text-white transition-colors rounded-r-full"><span class="material-symbols-outlined text-xl">add</span></button>
+</div>
+</div>
+<div class="flex flex-col sm:flex-row gap-4">
+<button class="flex-1 flex min-w-[150px] max-w-[480px] cursor-pointer items-center justify-center overflow-hidden rounded-full h-12 px-6 bg-[#38e07b] text-[#111714] text-base font-bold leading-normal tracking-wide hover:bg-opacity-90 transition-all shadow-lg">
+<span class="truncate">Add to Cart</span>
+</button>
+<button class="flex-1 flex min-w-[150px] max-w-[480px] cursor-pointer items-center justify-center overflow-hidden rounded-full h-12 px-6 bg-gray-600 text-white text-base font-bold leading-normal tracking-wide hover:bg-opacity-90 transition-all shadow-lg">
+<span class="truncate">Out of Stock - Notify Me</span>
+</button>
+</div>
+<div class="border-t border-[#29382f] pt-6">
+<details class="group">
+<summary class="flex justify-between items-center cursor-pointer list-none">
+<h2 class="text-white text-xl font-bold">Product Details</h2>
+<span class="material-symbols-outlined transition-transform duration-300 group-open:rotate-180">expand_more</span>
+</summary>
+<div class="mt-4 space-y-4 text-sm text-[#9eb7a8]">
+<div class="grid grid-cols-1 sm:grid-cols-3 gap-2">
+<p class="font-semibold text-white">Full Description</p>
+<p class="col-span-2">This organizer is crafted from high-quality aluminum with a matte finish. Its modular design allows for customization to fit any desk size.</p>
+</div>
+<div class="grid grid-cols-1 sm:grid-cols-3 gap-2">
+<p class="font-semibold text-white">Dimensions</p>
+<p class="col-span-2">10" x 6" x 4"</p>
+</div>
+<div class="grid grid-cols-1 sm:grid-cols-3 gap-2">
+<p class="font-semibold text-white">Care Instructions</p>
+<p class="col-span-2">Wipe clean with a damp cloth. Avoid harsh chemicals.</p>
+</div>
+</div>
+</details>
+</div>
+<div class="border-t border-[#29382f] pt-6">
+<details class="group">
+<summary class="flex justify-between items-center cursor-pointer list-none">
+<h2 class="text-white text-xl font-bold">Delivery Information</h2>
+<span class="material-symbols-outlined transition-transform duration-300 group-open:rotate-180">expand_more</span>
+</summary>
+<div class="mt-4 space-y-4 text-sm text-[#9eb7a8]">
+<div class="grid grid-cols-1 sm:grid-cols-3 gap-2">
+<p class="font-semibold text-white">Shipping</p>
+<p class="col-span-2">Free shipping on orders over $50. Delivery within 3-5 business days.</p>
+</div>
+<div class="grid grid-cols-1 sm:grid-cols-3 gap-2">
+<p class="font-semibold text-white">Returns</p>
+<p class="col-span-2">30-day return policy. Items must be unused and in original packaging.</p>
+</div>
+</div>
+</details>
+</div>
+</div>
+</div>
+<div class="max-w-7xl mx-auto mt-16">
+<h2 class="text-white text-2xl font-bold mb-6">Customers Also Bought</h2>
+<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
+<div class="flex flex-col gap-4 group">
+<div class="w-full bg-center bg-no-repeat aspect-square bg-cover rounded-xl flex flex-col overflow-hidden transform group-hover:scale-105 transition-transform duration-300" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuAZRKIyK6wVgCnaCC5aNo3eu4Zp2CeBcOq7E9z_q-P4f3hJw-d63yHNFhcpvsTR4PqiLJQLwyDBhB3MmfhNm24V_CPUW6BWNynxHpa265Se4yVkQ6Ss46J2670-xDmxx_-lP_g-eAxI-nv7QsLsAeo8V9sgt5PEHX5FJudkgenvmWdf15FshxiWVv_cdFkGVBdukcrW2-EXzLMX3WarZ6C5a-fDa2DpWgF8tvTbXCepDggPpSylaSpTsahYtKrXpwVPIsRhZW4vcFic");'></div>
+<div>
+<p class="text-white text-base font-medium leading-normal">Ergonomic Mouse</p>
+<p class="text-[#9eb7a8] text-sm font-normal leading-normal">$25.00</p>
+</div>
+</div>
+<div class="flex flex-col gap-4 group">
+<div class="w-full bg-center bg-no-repeat aspect-square bg-cover rounded-xl flex flex-col overflow-hidden transform group-hover:scale-105 transition-transform duration-300" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuCggdyzbjtzkVoswdfCHyBjhrU9MRZdjFZyTBXNx9vnmRpPMp_zGiPRQI8EgNACAtrzGxqmz3nsbqvM61P8J14Kq_UramtKWif9Lr003MwGEp1hdgtKwHbZZ7wdsgFNQKN1m_uu21G5IeeofbXIOgZas6o2wYnSk7PqBU63JWqRp1VpJeKHkcrC1GcI1hvDM2-7fLZNi7N6uPlxra8Rmz3RKDXRF2Yfy3et2j0Iv4rU6gCkDSIoNMq41j6icAnQqY3V1kTq1ljH8QwT");'></div>
+<div>
+<p class="text-white text-base font-medium leading-normal">Wireless Keyboard</p>
+<p class="text-[#9eb7a8] text-sm font-normal leading-normal">$60.00</p>
+</div>
+</div>
+<div class="flex flex-col gap-4 group">
+<div class="w-full bg-center bg-no-repeat aspect-square bg-cover rounded-xl flex flex-col overflow-hidden transform group-hover:scale-105 transition-transform duration-300" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuDPyfGta5_6Vrr4M0JbKZzAc_urSa9VIpv3DtRmTGRg2NdUgHq8X_AB3SyuXJv2meSx7BgsgdXmzhebXBiWMNvMIW8hUv3fmWGD1J_06Nh-m-thUG6slU5Gt9PJdfCFzWx04UGd-BsM7Iqm3W1G0KsaM1H6Y70N7UQ8EdaMolFa6YKz4bM_e9bcUwEeMgKILD_gHAVfdg1mYvmHSXy6-MLlO9CxIwDLBp1NA1RGwHCc8ZP-rWA07blpxOV_1c5qAIU7uXzEH9gp8f4c");'></div>
+<div>
+<p class="text-white text-base font-medium leading-normal">Desk Lamp</p>
+<p class="text-[#9eb7a8] text-sm font-normal leading-normal">$45.00</p>
+</div>
+</div>
+<div class="flex flex-col gap-4 group">
+<div class="w-full bg-center bg-no-repeat aspect-square bg-cover rounded-xl flex flex-col overflow-hidden transform group-hover:scale-105 transition-transform duration-300" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuDvHXefC1YZSlH1ZEHqjmHxHgvvcw5ZLNJ0mxrKZci4eUnd_LuJ-chyd5aeT6tCeYz2RJq2Fbz7Tr-wueHhumrDH8uB80999pur-PpQLp-uWQzshlutDpZMBtY8-gDGD8vu8RYUsWuIlF8tv_nRS-J4KuZBmm4xnea9OlX8c5zuq_vXw_NoEUHjuN84f-SF-uBA6c-VJWZO3gNKuT8YIWiFqtn9Tq_DJlVY85F3xE5M6yrlasjXiFJpzfae6KvMRu0Ab1UKvd2Gh0ha");'></div>
+<div>
+<p class="text-white text-base font-medium leading-normal">Aesthetic Planter</p>
+<p class="text-[#9eb7a8] text-sm font-normal leading-normal">$30.00</p>
+</div>
+</div>
+</div>
+</div>
+</main>
+</div>
+</div>
+
+</body></html>
\ No newline at end of file
diff --git a/TheVibeQCom/Wireframe/product_detail_page_(pdp)/screen.png b/TheVibeQCom/Wireframe/product_detail_page_(pdp)/screen.png
new file mode 100644
index 0000000..b3da3a8
Binary files /dev/null and b/TheVibeQCom/Wireframe/product_detail_page_(pdp)/screen.png differ
diff --git a/TheVibeQCom/Wireframe/rival_details_screen/code.html b/TheVibeQCom/Wireframe/rival_details_screen/code.html
new file mode 100644
index 0000000..195bd40
--- /dev/null
+++ b/TheVibeQCom/Wireframe/rival_details_screen/code.html
@@ -0,0 +1,182 @@
+<html><head>
+<meta charset="utf-8"/>
+<link crossorigin="" href="https://fonts.gstatic.com/" rel="preconnect"/>
+<link as="style" href="https://fonts.googleapis.com/css2?display=swap&amp;family=Noto+Sans%3Awght%40400%3B500%3B700%3B900&amp;family=Spline+Sans%3Awght%40400%3B500%3B700" onload="this.rel='stylesheet'" rel="stylesheet"/>
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet"/>
+<title>Stitch Design</title>
+<link href="data:image/x-icon;base64," rel="icon" type="image/x-icon"/>
+<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
+<style type="text/tailwindcss">
+      :root {
+        --primary-color: #38e07b;
+      }
+      .material-symbols-outlined {
+        font-variation-settings:
+        'FILL' 0,
+        'wght' 400,
+        'GRAD' 0,
+        'opsz' 24
+      }
+    </style>
+</head>
+<body class="bg-[#111714]">
+<div class="relative flex size-full min-h-screen flex-col dark group/design-root overflow-x-hidden" style='font-family: "Spline Sans", "Noto Sans", sans-serif;'>
+<div class="layout-container flex h-full grow flex-col">
+<header class="flex items-center justify-between whitespace-nowrap border-b border-solid border-b-[#29382f] px-10 py-3">
+<div class="flex items-center gap-4 text-white">
+<svg class="size-7 text-[var(--primary-color)]" fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
+<path d="M39.5563 34.1455V13.8546C39.5563 15.708 36.8773 17.3437 32.7927 18.3189C30.2914 18.916 27.263 19.2655 24 19.2655C20.737 19.2655 17.7086 18.916 15.2073 18.3189C11.1227 17.3437 8.44365 15.708 8.44365 13.8546V34.1455C8.44365 35.9988 11.1227 37.6346 15.2073 38.6098C17.7086 39.2069 20.737 39.5564 24 39.5564C27.263 39.5564 30.2914 39.2069 32.7927 38.6098C36.8773 37.6346 39.5563 35.9988 39.5563 34.1455Z" fill="currentColor"></path>
+<path clip-rule="evenodd" d="M10.4485 13.8519C10.4749 13.9271 10.6203 14.246 11.379 14.7361C12.298 15.3298 13.7492 15.9145 15.6717 16.3735C18.0007 16.9296 20.8712 17.2655 24 17.2655C27.1288 17.2655 29.9993 16.9296 32.3283 16.3735C34.2508 15.9145 35.702 15.3298 36.621 14.7361C37.3796 14.246 37.5251 13.9271 37.5515 13.8519C37.5287 13.7876 37.4333 13.5973 37.0635 13.2931C36.5266 12.8516 35.6288 12.3647 34.343 11.9175C31.79 11.0295 28.1333 10.4437 24 10.4437C19.8667 10.4437 16.2099 11.0295 13.657 11.9175C12.3712 12.3647 11.4734 12.8516 10.9365 13.2931C10.5667 13.5973 10.4713 13.7876 10.4485 13.8519ZM37.5563 18.7877C36.3176 19.3925 34.8502 19.8839 33.2571 20.2642C30.5836 20.9025 27.3973 21.2655 24 21.2655C20.6027 21.2655 17.4164 20.9025 14.7429 20.2642C13.1498 19.8839 11.6824 19.3925 10.4436 18.7877V34.1275C10.4515 34.1545 10.5427 34.4867 11.379 35.027C12.298 35.6207 13.7492 36.2054 15.6717 36.6644C18.0007 37.2205 20.8712 37.5564 24 37.5564C27.1288 37.5564 29.9993 37.2205 32.3283 36.6644C34.2508 36.2054 35.702 35.6207 36.621 35.027C37.4573 34.4867 37.5485 34.1546 37.5563 34.1275V18.7877ZM41.5563 13.8546V34.1455C41.5563 36.1078 40.158 37.5042 38.7915 38.3869C37.3498 39.3182 35.4192 40.0389 33.2571 40.5551C30.5836 41.1934 27.3973 41.5564 24 41.5564C20.6027 41.5564 17.4164 41.1934 14.7429 40.5551C12.5808 40.0389 10.6502 39.3182 9.20848 38.3869C7.84205 37.5042 6.44365 36.1078 6.44365 34.1455L6.44365 13.8546C6.44365 12.2684 7.37223 11.0454 8.39581 10.2036C9.43325 9.3505 10.8137 8.67141 12.343 8.13948C15.4203 7.06909 19.5418 6.44366 24 6.44366C28.4582 6.44366 32.5797 7.06909 35.657 8.13948C37.1863 8.67141 38.5667 9.3505 39.6042 10.2036C40.6278 11.0454 41.5563 12.2684 41.5563 13.8546Z" fill="currentColor" fill-rule="evenodd"></path>
+</svg>
+<h1 class="text-white text-xl font-bold leading-tight tracking-[-0.015em]">Vibe</h1>
+</div>
+<div class="flex flex-1 justify-end gap-4 items-center">
+<button class="flex items-center justify-center rounded-full h-10 w-10 bg-[#29382f] text-white hover:bg-opacity-80 transition-colors">
+<span class="material-symbols-outlined text-2xl">
+                settings
+              </span>
+</button>
+<div class="bg-center bg-no-repeat aspect-square bg-cover rounded-full size-10 border-2 border-white" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuDRhEJzglIP4J2Ok7S10x6b-lMAFEhbnCX9Dv-vsbF2xi5crFTLmkq_THXzOXhCJtal2yHwTfYePUGy9cQK-sjMYnLK2GY0mgwYYe_rUpvqd3adUuC1Ol-HAl9kK6N0swoLy5K7JRDZzvLsUTCWPpOhxL99khte4uq9Vost51XSN_fh0HxPGcBZw_DXf1hxC2x8TI37McM5N62III8DGC1V-XRy-AiAqJA1qKflaiLnfZwDEPwOIyxaoksg95suo2dD4FOvAKzS2bL9");'></div>
+</div>
+</header>
+<main class="px-10 flex flex-1 justify-center py-8">
+<div class="layout-content-container flex flex-col w-full max-w-2xl py-5">
+<h1 class="text-white text-4xl font-bold leading-tight tracking-tight mb-8">Rival Details</h1>
+<div class="flex flex-col items-center gap-4 mb-12">
+<div class="relative">
+<div class="bg-center bg-no-repeat aspect-square bg-cover rounded-full size-32 border-4 border-white" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuA1y9k0qLCukcKTiDpVqu4FuWCuL7xIfV97T8yeovqFSS9iE6v-FocToq9MQ_KFcI8ugJYBgZ1VzWNltXpGVehRlDoyVUgYbYXYf41pZQ3qe1ohKP97buqgJUlvsbKOM-W1Anqhd_0zeTubtKUJ0nzvrWOhOrA9wkItJqLOodGYvfd3sbm7wyRlJS0nUIvhUHNA_oS95B_-3C2QKvLrVRIwO6Z9tZSOEds9_PN59iJbgL-R_Dm6YAz_1QLMARjh6ddglqed_RjI7pFB");'></div>
+<button class="absolute bottom-0 right-0 bg-[#38e07b] text-black rounded-full p-2 hover:bg-opacity-90 transition-colors">
+<span class="material-symbols-outlined">
+                    edit
+                  </span>
+</button>
+</div>
+<div class="flex flex-col items-center justify-center gap-1">
+<input class="bg-transparent text-white text-2xl font-bold leading-tight tracking-[-0.015em] text-center border-none focus:ring-0 p-1" type="text" value="Rival Name"/>
+<p class="text-[#9eb7a8] text-lg font-normal leading-normal text-center">Level 3 · 1200 XP</p>
+</div>
+</div>
+<section class="mb-12">
+<h2 class="text-white text-2xl font-bold leading-tight tracking-[-0.015em] mb-4">Customize Rival</h2>
+<div>
+<h3 class="text-[#9eb7a8] text-base font-medium leading-normal mb-3">Avatar</h3>
+<div class="flex flex-wrap gap-4">
+<label class="cursor-pointer">
+<img class="rounded-full size-14 border-4 border-transparent has-[:checked]:border-[var(--primary-color)] transition-all" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDceeQU1FmslY4RBw6Hip73HMFSm2rK8f5nwvaaQxbZEp9ZlO3LG38KKauoO8I1ORIVxkEmYjfOkUmhmJfqlMpSt0aoVK8RghpRba1Gmn6d2ii09f8Miz5APWpShKVkRLweNeEzXPw9fN3RfzSFq1-TXmGU1GwgB-li4dsGP3NHsjRtu4aX-18c6qgldZtwaq7KtWnuCMbPIFh_jYHVDF0kdzo6-LHb-XWGDbvO5F1OalbFOb63ogqFWBUSM-1T47giMUydY7Q7li4M"/>
+<input checked="" class="hidden" name="avatar" type="radio"/>
+</label>
+<label class="cursor-pointer">
+<img class="rounded-full size-14 border-4 border-transparent has-[:checked]:border-[var(--primary-color)] transition-all" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDceeQU1FmslY4RBw6Hip73HMFSm2rK8f5nwvaaQxbZEp9ZlO3LG38KKauoO8I1ORIVxkEmYjfOkUmhmJfqlMpSt0aoVK8RghpRba1Gmn6d2ii09f8Miz5APWpShKVkRLweNeEzXPw9fN3RfzSFq1-TXmGU1GwgB-li4dsGP3NHsjRtu4aX-18c6qgldZtwaq7KtWnuCMbPIFh_jYHVDF0kdzo6-LHb-XWGDbvO5F1OalbFOb63ogqFWBUSM-1T47giMUydY7Q7li4M"/>
+<input class="hidden" name="avatar" type="radio"/>
+</label>
+<label class="cursor-pointer">
+<img class="rounded-full size-14 border-4 border-transparent has-[:checked]:border-[var(--primary-color)] transition-all" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDceeQU1FmslY4RBw6Hip73HMFSm2rK8f5nwvaaQxbZEp9ZlO3LG38KKauoO8I1ORIVxkEmYjfOkUmhmJfqlMpSt0aoVK8RghpRba1Gmn6d2ii09f8Miz5APWpShKVkRLweNeEzXPw9fN3RfzSFq1-TXmGU1GwgB-li4dsGP3NHsjRtu4aX-18c6qgldZtwaq7KtWnuCMbPIFh_jYHVDF0kdzo6-LHb-XWGDbvO5F1OalbFOb63ogqFWBUSM-1T47giMUydY7Q7li4M"/>
+<input class="hidden" name="avatar" type="radio"/>
+</label>
+<label class="cursor-pointer">
+<img class="rounded-full size-14 border-4 border-transparent has-[:checked]:border-[var(--primary-color)] transition-all" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDceeQU1FmslY4RBw6Hip73HMFSm2rK8f5nwvaaQxbZEp9ZlO3LG38KKauoO8I1ORIVxkEmYjfOkUmhmJfqlMpSt0aoVK8RghpRba1Gmn6d2ii09f8Miz5APWpShKVkRLweNeEzXPw9fN3RfzSFq1-TXmGU1GwgB-li4dsGP3NHsjRtu4aX-18c6qgldZtwaq7KtWnuCMbPIFh_jYHVDF0kdzo6-LHb-XWGDbvO5F1OalbFOb63ogqFWBUSM-1T47giMUydY7Q7li4M"/>
+<input class="hidden" name="avatar" type="radio"/>
+</label>
+<label class="cursor-pointer">
+<img class="rounded-full size-14 border-4 border-transparent has-[:checked]:border-[var(--primary-color)] transition-all" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDceeQU1FmslY4RBw6Hip73HMFSm2rK8f5nwvaaQxbZEp9ZlO3LG38KKauoO8I1ORIVxkEmYjfOkUmhmJfqlMpSt0aoVK8RghpRba1Gmn6d2ii09f8Miz5APWpShKVkRLweNeEzXPw9fN3RfzSFq1-TXmGU1GwgB-li4dsGP3NHsjRtu4aX-18c6qgldZtwaq7KtWnuCMbPIFh_jYHVDF0kdzo6-LHb-XWGDbvO5F1OalbFOb63ogqFWBUSM-1T47giMUydY7Q7li4M"/>
+<input class="hidden" name="avatar" type="radio"/>
+</label>
+<label class="cursor-pointer">
+<img class="rounded-full size-14 border-4 border-transparent has-[:checked]:border-[var(--primary-color)] transition-all" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDceeQU1FmslY4RBw6Hip73HMFSm2rK8f5nwvaaQxbZEp9ZlO3LG38KKauoO8I1ORIVxkEmYjfOkUmhmJfqlMpSt0aoVK8RghpRba1Gmn6d2ii09f8Miz5APWpShKVkRLweNeEzXPw9fN3RfzSFq1-TXmGU1GwgB-li4dsGP3NHsjRtu4aX-18c6qgldZtwaq7KtWnuCMbPIFh_jYHVDF0kdzo6-LHb-XWGDbvO5F1OalbFOb63ogqFWBUSM-1T47giMUydY7Q7li4M"/>
+<input class="hidden" name="avatar" type="radio"/>
+</label>
+</div>
+</div>
+<div class="mt-6">
+<h3 class="text-[#9eb7a8] text-base font-medium leading-normal mb-3">Color Theme</h3>
+<div class="flex flex-wrap gap-4">
+<label class="cursor-pointer">
+<div class="size-12 rounded-full border-2 border-transparent has-[:checked]:border-[var(--primary-color)] flex items-center justify-center transition-all">
+<div class="size-10 rounded-full" style="background-color: rgb(255, 99, 71);"></div>
+</div>
+<input checked="" class="hidden" name="color-theme" type="radio"/>
+</label>
+<label class="cursor-pointer">
+<div class="size-12 rounded-full border-2 border-transparent has-[:checked]:border-[var(--primary-color)] flex items-center justify-center transition-all">
+<div class="size-10 rounded-full" style="background-color: rgb(70, 130, 180);"></div>
+</div>
+<input class="hidden" name="color-theme" type="radio"/>
+</label>
+<label class="cursor-pointer">
+<div class="size-12 rounded-full border-2 border-transparent has-[:checked]:border-[var(--primary-color)] flex items-center justify-center transition-all">
+<div class="size-10 rounded-full" style="background-color: rgb(50, 205, 50);"></div>
+</div>
+<input class="hidden" name="color-theme" type="radio"/>
+</label>
+<label class="cursor-pointer">
+<div class="size-12 rounded-full border-2 border-transparent has-[:checked]:border-[var(--primary-color)] flex items-center justify-center transition-all">
+<div class="size-10 rounded-full" style="background-color: rgb(255, 215, 0);"></div>
+</div>
+<input class="hidden" name="color-theme" type="radio"/>
+</label>
+<label class="cursor-pointer">
+<div class="size-12 rounded-full border-2 border-transparent has-[:checked]:border-[var(--primary-color)] flex items-center justify-center transition-all">
+<div class="size-10 rounded-full" style="background-color: rgb(218, 112, 214);"></div>
+</div>
+<input class="hidden" name="color-theme" type="radio"/>
+</label>
+<label class="cursor-pointer">
+<div class="size-12 rounded-full border-2 border-transparent has-[:checked]:border-[var(--primary-color)] flex items-center justify-center transition-all">
+<div class="size-10 rounded-full" style="background-color: rgb(135, 206, 250);"></div>
+</div>
+<input class="hidden" name="color-theme" type="radio"/>
+</label>
+</div>
+</div>
+</section>
+<section>
+<h2 class="text-white text-2xl font-bold leading-tight tracking-[-0.015em] mb-6">Rival's Log</h2>
+<div class="relative">
+<div class="absolute left-5 top-0 h-full w-0.5 bg-[#29382f]"></div>
+<div class="grid grid-cols-[40px_1fr] gap-x-4 mb-6 relative">
+<div class="flex justify-center items-center h-full">
+<div class="size-10 rounded-full bg-[#29382f] flex items-center justify-center z-10">
+<span class="material-symbols-outlined text-[var(--primary-color)]">
+                        check_circle
+                      </span>
+</div>
+</div>
+<div class="flex flex-col justify-center py-4">
+<p class="text-white text-lg font-medium leading-normal">Completed 'Organize Desk' task</p>
+<p class="text-[#9eb7a8] text-base font-normal leading-normal">+200 XP · 2 days ago</p>
+</div>
+</div>
+<div class="grid grid-cols-[40px_1fr] gap-x-4 mb-6 relative">
+<div class="flex justify-center items-center h-full">
+<div class="size-10 rounded-full bg-[#29382f] flex items-center justify-center z-10">
+<span class="material-symbols-outlined text-[var(--primary-color)]">
+                        check_circle
+                      </span>
+</div>
+</div>
+<div class="flex flex-col justify-center py-4">
+<p class="text-white text-lg font-medium leading-normal">Completed 'Declutter Closet' task</p>
+<p class="text-[#9eb7a8] text-base font-normal leading-normal">+500 XP · 5 days ago</p>
+</div>
+</div>
+<div class="grid grid-cols-[40px_1fr] gap-x-4 relative">
+<div class="flex justify-center items-center h-full">
+<div class="size-10 rounded-full bg-[#29382f] flex items-center justify-center z-10">
+<span class="material-symbols-outlined text-[var(--primary-color)]">
+                        check_circle
+                      </span>
+</div>
+</div>
+<div class="flex flex-col justify-center py-4">
+<p class="text-white text-lg font-medium leading-normal">Completed 'Rearrange Bookshelf' task</p>
+<p class="text-[#9eb7a8] text-base font-normal leading-normal">+500 XP · 7 days ago</p>
+</div>
+</div>
+</div>
+</section>
+</div>
+</main>
+</div>
+</div>
+
+</body></html>
\ No newline at end of file
diff --git a/TheVibeQCom/Wireframe/rival_details_screen/screen.png b/TheVibeQCom/Wireframe/rival_details_screen/screen.png
new file mode 100644
index 0000000..1a8d8e3
Binary files /dev/null and b/TheVibeQCom/Wireframe/rival_details_screen/screen.png differ
diff --git a/TheVibeQCom/Wireframe/splash_screen/code.html b/TheVibeQCom/Wireframe/splash_screen/code.html
new file mode 100644
index 0000000..5d522f7
--- /dev/null
+++ b/TheVibeQCom/Wireframe/splash_screen/code.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en"><head>
+<meta charset="utf-8"/>
+<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
+<title>Vibe - Splash Screen</title>
+<link href="https://fonts.googleapis.com" rel="preconnect"/>
+<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
+<link href="https://fonts.googleapis.com/css2?family=Spline+Sans:wght@400;500;700&amp;display=swap" rel="stylesheet"/>
+<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
+<style type="text/tailwindcss">
+      :root {
+        --primary-color: #38e07b;
+      }
+      body {
+        font-family: 'Spline Sans', sans-serif;
+      }
+      .animate-pulse-slow {
+        animation: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+      }
+      @keyframes pulse {
+        0%, 100% {
+          opacity: 1;
+        }
+        50% {
+          opacity: .5;
+        }
+      }
+    </style>
+</head>
+<body class="bg-[#111714] text-white">
+<div class="flex items-center justify-center min-h-screen">
+<div class="text-center">
+<h1 class="text-7xl font-bold tracking-wider text-white animate-pulse-slow">Vibe</h1>
+<div class="mt-8 flex justify-center">
+<div class="w-24 h-1 bg-gray-700 rounded-full overflow-hidden">
+<div class="h-full bg-[var(--primary-color)] w-full animate-[stripes_2s_linear_infinite]" style="background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent); background-size: 1rem 1rem;"></div>
+</div>
+</div>
+</div>
+</div>
+<style>
+      @keyframes stripes {
+        from {
+          background-position: 1rem 0;
+        }
+        to {
+          background-position: 0 0;
+        }
+      }
+    </style>
+
+</body></html>
\ No newline at end of file
diff --git a/TheVibeQCom/Wireframe/splash_screen/screen.png b/TheVibeQCom/Wireframe/splash_screen/screen.png
new file mode 100644
index 0000000..e9600aa
Binary files /dev/null and b/TheVibeQCom/Wireframe/splash_screen/screen.png differ
diff --git a/TheVibeQCom/Wireframe/vibe-code_dashboard_1/code.html b/TheVibeQCom/Wireframe/vibe-code_dashboard_1/code.html
new file mode 100644
index 0000000..32a9ed1
--- /dev/null
+++ b/TheVibeQCom/Wireframe/vibe-code_dashboard_1/code.html
@@ -0,0 +1,125 @@
+<!DOCTYPE html>
+<html><head>
+<meta charset="utf-8"/>
+<link crossorigin="" href="https://fonts.gstatic.com/" rel="preconnect"/>
+<link as="style" href="https://fonts.googleapis.com/css2?display=swap&amp;family=Noto+Sans%3Awght%40400%3B500%3B700%3B900&amp;family=Spline+Sans%3Awght%40400%3B500%3B700" onload="this.rel='stylesheet'" rel="stylesheet"/>
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet"/>
+<title>Vibe-Code Dashboard</title>
+<link href="data:image/x-icon;base64," rel="icon" type="image/x-icon"/>
+<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
+<style type="text/tailwindcss">
+        :root {
+            --primary-color: #38e07b;
+        }
+        .xp-gain-animation {
+            animation: xp-flow 1s ease-in-out forwards;
+        }
+        @keyframes xp-flow {
+            0% {
+                transform: translateX(0) scale(1);
+                opacity: 1;
+            }
+            100% {
+                transform: translateX(-150px) scale(0.5);
+                opacity: 0;
+            }
+        }
+    </style>
+</head>
+<body class="bg-[#111714]">
+<div class="relative flex size-full min-h-screen flex-col text-white" style='font-family: "Spline Sans", "Noto Sans", sans-serif;'>
+<header class="flex items-center justify-between whitespace-nowrap border-b border-solid border-[#29382f] px-10 py-4">
+<div class="flex items-center gap-3 text-white">
+<svg class="h-8 w-8 text-[var(--primary-color)]" fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
+<path d="M39.5563 34.1455V13.8546C39.5563 15.708 36.8773 17.3437 32.7927 18.3189C30.2914 18.916 27.263 19.2655 24 19.2655C20.737 19.2655 17.7086 18.916 15.2073 18.3189C11.1227 17.3437 8.44365 15.708 8.44365 13.8546V34.1455C8.44365 35.9988 11.1227 37.6346 15.2073 38.6098C17.7086 39.2069 20.737 39.5564 24 39.5564C27.263 39.5564 30.2914 39.2069 32.7927 38.6098C36.8773 37.6346 39.5563 35.9988 39.5563 34.1455Z" fill="currentColor"></path>
+<path clip-rule="evenodd" d="M10.4485 13.8519C10.4749 13.9271 10.6203 14.246 11.379 14.7361C12.298 15.3298 13.7492 15.9145 15.6717 16.3735C18.0007 16.9296 20.8712 17.2655 24 17.2655C27.1288 17.2655 29.9993 16.9296 32.3283 16.3735C34.2508 15.9145 35.702 15.3298 36.621 14.7361C37.3796 14.246 37.5251 13.9271 37.5515 13.8519C37.5287 13.7876 37.4333 13.5973 37.0635 13.2931C36.5266 12.8516 35.6288 12.3647 34.343 11.9175C31.79 11.0295 28.1333 10.4437 24 10.4437C19.8667 10.4437 16.2099 11.0295 13.657 11.9175C12.3712 12.3647 11.4734 12.8516 10.9365 13.2931C10.5667 13.5973 10.4713 13.7876 10.4485 13.8519ZM37.5563 18.7877C36.3176 19.3925 34.8502 19.8839 33.2571 20.2642C30.5836 20.9025 27.3973 21.2655 24 21.2655C20.6027 21.2655 17.4164 20.9025 14.7429 20.2642C13.1498 19.8839 11.6824 19.3925 10.4436 18.7877V34.1275C10.4515 34.1545 10.5427 34.4867 11.379 35.027C12.298 35.6207 13.7492 36.2054 15.6717 36.6644C18.0007 37.2205 20.8712 37.5564 24 37.5564C27.1288 37.5564 29.9993 37.2205 32.3283 36.6644C34.2508 36.2054 35.702 35.6207 36.621 35.027C37.4573 34.4867 37.5485 34.1546 37.5563 34.1275V18.7877ZM41.5563 13.8546V34.1455C41.5563 36.1078 40.158 37.5042 38.7915 38.3869C37.3498 39.3182 35.4192 40.0389 33.2571 40.5551C30.5836 41.1934 27.3973 41.5564 24 41.5564C20.6027 41.5564 17.4164 41.1934 14.7429 40.5551C12.5808 40.0389 10.6502 39.3182 9.20848 38.3869C7.84205 37.5042 6.44365 36.1078 6.44365 34.1455L6.44365 13.8546C6.44365 12.2684 7.37223 11.0454 8.39581 10.2036C9.43325 9.3505 10.8137 8.67141 12.343 8.13948C15.4203 7.06909 19.5418 6.44366 24 6.44366C28.4582 6.44366 32.5797 7.06909 35.657 8.13948C37.1863 8.67141 38.5667 9.3505 39.6042 10.2036C40.6278 11.0454 41.5563 12.2684 41.5563 13.8546Z" fill="currentColor" fill-rule="evenodd"></path>
+</svg>
+<h1 class="text-xl font-bold">Vibe</h1>
+</div>
+<nav class="flex items-center gap-8">
+<a class="text-sm font-medium text-gray-300 hover:text-white" href="#">Home</a>
+<a class="text-sm font-medium text-gray-300 hover:text-white" href="#">Shop</a>
+<a class="text-sm font-medium text-white" href="#">Vibe-Code</a>
+<a class="text-sm font-medium text-gray-300 hover:text-white" href="#">Profile</a>
+</nav>
+<div class="flex items-center gap-4">
+<button class="flex h-10 w-10 items-center justify-center rounded-full bg-[#29382f] text-gray-300 hover:bg-[#3d5245] hover:text-white">
+<span class="material-symbols-outlined">notifications</span>
+</button>
+<div class="h-10 w-10 rounded-full bg-cover bg-center" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuAuiA6TkjjZxOpp7wSpU9zgLHrzHzZTyMQTUPJ_vq3Mg51mGi05wFVLHewoVkIjNQGj0muKo9u_g0DxjU1JQPCBXpdm9oCUeNUrKCDyyX_kSRYoTtE_yWhIXAFvfnzUUkYGxpiE-KQf97nj0LVmcl5_zdIAgDEUehqrTuPRvCCS6GQUYQ9NlUVhlKNjb0L-8rxxBlI1D6oD_trSyywFCuVpimXm9IY28iyXEOxaphE8LQhf6ORHyUFbPh-EVmEE8Jie16S829TUqFKQ");'></div>
+</div>
+</header>
+<main class="flex-1 px-10 py-8 lg:px-40">
+<div class="mx-auto max-w-4xl">
+<h2 class="text-3xl font-bold tracking-tight">Vibe-Code Dashboard</h2>
+<section class="mt-8 rounded-lg bg-[#1a221e] p-6">
+<div class="flex items-center justify-between">
+<p class="text-sm font-medium text-gray-300">Level 3</p>
+<p class="text-sm font-bold text-white">600 / 1000 XP</p>
+</div>
+<div class="mt-2 h-2.5 w-full rounded-full bg-[#29382f]">
+<div class="h-2.5 rounded-full bg-[var(--primary-color)]" style="width: 60%;"></div>
+</div>
+<p class="mt-2 text-right text-xs text-gray-400">400 XP to next level</p>
+</section>
+<div class="mt-8 grid grid-cols-1 gap-8 md:grid-cols-2">
+<section class="rounded-lg bg-[#1a221e] p-6">
+<h3 class="text-lg font-bold">Rival Status</h3>
+<div class="mt-4 flex items-center gap-4">
+<div class="relative h-16 w-16">
+<img alt="Sophia's avatar" class="h-16 w-16 rounded-full border-2 border-[#3d5245]" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCth2dZ807pKjdj8Sm70eBbjw_tVJYeyZ8hYNbox8WQdTum8wHOX-GkoLQlVVp1nAMea3gQlV8yZnsrX2HUTvx-dCawSLc6GsXjH75frU88P_VSC9uAAX5HxEmS5IQYhrp9UuKwAvRiS-FNVJbgQ2vjrBsFXrEpv76AgobgQf66SbSYbozyIUWgMoJ7C-YeHUOTSldbDAeMZDgk5Wrdv6qoolpLCUFRTe4fhsDkpnhjvIEtDqTUqrUuLidGHCjAoP_QsvNmKDgRqYP3"/>
+<span class="xp-gain-animation absolute -right-4 top-0 text-lg font-bold text-red-500">-50</span>
+</div>
+<div>
+<p class="font-semibold">Sophia</p>
+<p class="text-sm text-gray-400">Level 2 - 500 XP</p>
+<p class="mt-1 text-sm font-medium text-orange-400">Rival is gaining on you!</p>
+</div>
+</div>
+</section>
+<section class="rounded-lg bg-[#1a221e] p-6">
+<h3 class="text-lg font-bold">Leaderboard</h3>
+<div class="mt-4 flex items-center gap-4">
+<div class="flex h-16 w-16 items-center justify-center rounded-full bg-[#29382f] text-[var(--primary-color)]">
+<span class="material-symbols-outlined text-4xl">emoji_events</span>
+</div>
+<div>
+<p class="text-2xl font-bold">Rank #3 <span class="text-base font-normal text-gray-400">of 10</span></p>
+<p class="text-sm text-gray-300">1200 XP</p>
+</div>
+</div>
+</section>
+</div>
+<section class="mt-8 rounded-lg bg-[#1a221e] p-6">
+<div class="flex items-center justify-between">
+<h3 class="text-lg font-bold">Today's Goals</h3>
+<button class="flex h-10 w-10 items-center justify-center rounded-full bg-[var(--primary-color)] text-[#111714] hover:bg-opacity-80">
+<span class="material-symbols-outlined">add</span>
+</button>
+</div>
+<div class="mt-4 space-y-4">
+<label class="flex cursor-pointer items-center gap-4 rounded-md p-3 hover:bg-[#29382f]">
+<input checked="" class="h-5 w-5 rounded border-2 border-[#3d5245] bg-transparent text-[var(--primary-color)] focus:ring-0 focus:ring-offset-0" type="checkbox"/>
+<span class="flex-1 text-gray-300">Complete project proposal</span>
+<span class="font-semibold text-[var(--primary-color)]">200 XP</span>
+</label>
+<label class="flex cursor-pointer items-center gap-4 rounded-md p-3 hover:bg-[#29382f]">
+<input class="h-5 w-5 rounded border-2 border-[#3d5245] bg-transparent text-[var(--primary-color)] focus:ring-0 focus:ring-offset-0" type="checkbox"/>
+<span class="flex-1 text-gray-300">Review team feedback</span>
+<span class="font-semibold text-[var(--primary-color)]">150 XP</span>
+</label>
+<label class="flex cursor-pointer items-center gap-4 rounded-md bg-red-900/30 p-3 hover:bg-red-900/50">
+<input class="h-5 w-5 rounded border-2 border-red-500 bg-transparent text-[var(--primary-color)] focus:ring-0 focus:ring-offset-0" type="checkbox"/>
+<span class="flex-1 font-medium text-red-400">Schedule client meeting (Overdue)</span>
+<span class="font-semibold text-red-400">100 XP</span>
+</label>
+</div>
+</section>
+</div>
+</main>
+<button class="fixed bottom-8 right-8 flex h-16 w-16 items-center justify-center rounded-full bg-[var(--primary-color)] text-[#111714] shadow-lg transition-transform hover:scale-110">
+<span class="material-symbols-outlined text-3xl">add</span>
+</button>
+</div>
+
+</body></html>
\ No newline at end of file
diff --git a/TheVibeQCom/Wireframe/vibe-code_dashboard_1/screen.png b/TheVibeQCom/Wireframe/vibe-code_dashboard_1/screen.png
new file mode 100644
index 0000000..9043414
Binary files /dev/null and b/TheVibeQCom/Wireframe/vibe-code_dashboard_1/screen.png differ
diff --git a/TheVibeQCom/Wireframe/vibe-code_dashboard_2/code.html b/TheVibeQCom/Wireframe/vibe-code_dashboard_2/code.html
new file mode 100644
index 0000000..0dfb8c4
--- /dev/null
+++ b/TheVibeQCom/Wireframe/vibe-code_dashboard_2/code.html
@@ -0,0 +1,151 @@
+<!DOCTYPE html>
+<html><head>
+<meta charset="utf-8"/>
+<link crossorigin="" href="https://fonts.gstatic.com/" rel="preconnect"/>
+<link as="style" href="https://fonts.googleapis.com/css2?display=swap&amp;family=Noto+Sans%3Awght%40400%3B500%3B700%3B900&amp;family=Spline+Sans%3Awght%40400%3B500%3B700" onload="this.rel='stylesheet'" rel="stylesheet"/>
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet"/>
+<title>Vibe-Code Dashboard</title>
+<link href="data:image/x-icon;base64," rel="icon" type="image/x-icon"/>
+<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
+<style type="text/tailwindcss">
+        :root {
+            --primary-color: #38e07b;
+        }
+        .xp-gain-animation {
+            animation: xp-flow 1s ease-in-out forwards;
+        }
+        @keyframes xp-flow {
+            0% {
+                transform: translateX(0) scale(1);
+                opacity: 1;
+            }
+            100% {
+                transform: translateX(-150px) scale(0.5);
+                opacity: 0;
+            }
+        }
+    </style>
+</head>
+<body class="bg-[#111714]">
+<div class="relative flex size-full min-h-screen flex-col text-white" style='font-family: "Spline Sans", "Noto Sans", sans-serif;'>
+<header class="flex items-center justify-between whitespace-nowrap border-b border-solid border-[#29382f] px-10 py-4">
+<div class="flex items-center gap-3 text-white">
+<svg class="h-8 w-8 text-[var(--primary-color)]" fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
+<path d="M39.5563 34.1455V13.8546C39.5563 15.708 36.8773 17.3437 32.7927 18.3189C30.2914 18.916 27.263 19.2655 24 19.2655C20.737 19.2655 17.7086 18.916 15.2073 18.3189C11.1227 17.3437 8.44365 15.708 8.44365 13.8546V34.1455C8.44365 35.9988 11.1227 37.6346 15.2073 38.6098C17.7086 39.2069 20.737 39.5564 24 39.5564C27.263 39.5564 30.2914 39.2069 32.7927 38.6098C36.8773 37.6346 39.5563 35.9988 39.5563 34.1455Z" fill="currentColor"></path>
+<path clip-rule="evenodd" d="M10.4485 13.8519C10.4749 13.9271 10.6203 14.246 11.379 14.7361C12.298 15.3298 13.7492 15.9145 15.6717 16.3735C18.0007 16.9296 20.8712 17.2655 24 17.2655C27.1288 17.2655 29.9993 16.9296 32.3283 16.3735C34.2508 15.9145 35.702 15.3298 36.621 14.7361C37.3796 14.246 37.5251 13.9271 37.5515 13.8519C37.5287 13.7876 37.4333 13.5973 37.0635 13.2931C36.5266 12.8516 35.6288 12.3647 34.343 11.9175C31.79 11.0295 28.1333 10.4437 24 10.4437C19.8667 10.4437 16.2099 11.0295 13.657 11.9175C12.3712 12.3647 11.4734 12.8516 10.9365 13.2931C10.5667 13.5973 10.4713 13.7876 10.4485 13.8519ZM37.5563 18.7877C36.3176 19.3925 34.8502 19.8839 33.2571 20.2642C30.5836 20.9025 27.3973 21.2655 24 21.2655C20.6027 21.2655 17.4164 20.9025 14.7429 20.2642C13.1498 19.8839 11.6824 19.3925 10.4436 18.7877V34.1275C10.4515 34.1545 10.5427 34.4867 11.379 35.027C12.298 35.6207 13.7492 36.2054 15.6717 36.6644C18.0007 37.2205 20.8712 37.5564 24 37.5564C27.1288 37.5564 29.9993 37.2205 32.3283 36.6644C34.2508 36.2054 35.702 35.6207 36.621 35.027C37.4573 34.4867 37.5485 34.1546 37.5563 34.1275V18.7877ZM41.5563 13.8546V34.1455C41.5563 36.1078 40.158 37.5042 38.7915 38.3869C37.3498 39.3182 35.4192 40.0389 33.2571 40.5551C30.5836 41.1934 27.3973 41.5564 24 41.5564C20.6027 41.5564 17.4164 41.1934 14.7429 40.5551C12.5808 40.0389 10.6502 39.3182 9.20848 38.3869C7.84205 37.5042 6.44365 36.1078 6.44365 34.1455L6.44365 13.8546C6.44365 12.2684 7.37223 11.0454 8.39581 10.2036C9.43325 9.3505 10.8137 8.67141 12.343 8.13948C15.4203 7.06909 19.5418 6.44366 24 6.44366C28.4582 6.44366 32.5797 7.06909 35.657 8.13948C37.1863 8.67141 38.5667 9.3505 39.6042 10.2036C40.6278 11.0454 41.5563 12.2684 41.5563 13.8546Z" fill="currentColor" fill-rule="evenodd"></path>
+</svg>
+<h1 class="text-xl font-bold">Vibe</h1>
+</div>
+<nav class="flex items-center gap-8">
+<a class="text-sm font-medium text-gray-300 hover:text-white" href="#">Home</a>
+<a class="text-sm font-medium text-gray-300 hover:text-white" href="#">Shop</a>
+<a class="text-sm font-medium text-white" href="#">Vibe-Code</a>
+<a class="text-sm font-medium text-gray-300 hover:text-white" href="#">Profile</a>
+</nav>
+<div class="flex items-center gap-4">
+<button class="flex h-10 w-10 items-center justify-center rounded-full bg-[#29382f] text-gray-300 hover:bg-[#3d5245] hover:text-white">
+<span class="material-symbols-outlined">notifications</span>
+</button>
+<div class="h-10 w-10 rounded-full bg-cover bg-center" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuAuiA6TkjjZxOpp7wSpU9zgLHrzHzZTyMQTUPJ_vq3Mg51mGi05wFVLHewoVkIjNQGj0muKo9u_g0DxjU1JQPCBXpdm9oCUeNUrKCDyyX_kSRYoTtE_yWhIXAFvfnzUUkYGxpiE-KQf97nj0LVmcl5_zdIAgDEUehqrTuPRvCCS6GQUYQ9NlUVhlKNjb0L-8rxxBlI1D6oD_trSyywFCuVpimXm9IY28iyXEOxaphE8LQhf6ORHyUFbPh-EVmEE8Jie16S829TUqFKQ");'></div>
+</div>
+</header>
+<main class="flex-1 px-10 py-8 lg:px-40">
+<div class="mx-auto max-w-4xl">
+<h2 class="text-3xl font-bold tracking-tight">Vibe-Code Dashboard</h2>
+<section class="mt-8 rounded-lg bg-[#1a221e] p-6">
+<div class="flex items-center justify-between">
+<p class="text-sm font-medium text-gray-300">Level 3</p>
+<p class="text-sm font-bold text-white">600 / 1000 XP</p>
+</div>
+<div class="mt-2 h-2.5 w-full rounded-full bg-[#29382f]">
+<div class="h-2.5 rounded-full bg-[var(--primary-color)]" style="width: 60%;"></div>
+</div>
+<p class="mt-2 text-right text-xs text-gray-400">400 XP to next level</p>
+</section>
+<section class="mt-8 rounded-lg bg-[#1a221e] p-6">
+<h3 class="text-lg font-bold">Daily Summary</h3>
+<div class="mt-4 grid grid-cols-1 gap-6 sm:grid-cols-3">
+<div class="flex items-center gap-4 rounded-lg bg-[#29382f] p-4">
+<span class="material-symbols-outlined text-3xl text-[var(--primary-color)]">check_circle</span>
+<div>
+<p class="text-2xl font-bold">1</p>
+<p class="text-sm text-gray-400">Task Completed</p>
+</div>
+</div>
+<div class="flex items-center gap-4 rounded-lg bg-[#29382f] p-4">
+<span class="material-symbols-outlined text-3xl text-[var(--primary-color)]">stars</span>
+<div>
+<p class="text-2xl font-bold">200</p>
+<p class="text-sm text-gray-400">XP Gained</p>
+</div>
+</div>
+<div class="flex items-center gap-4 rounded-lg bg-[#29382f] p-4">
+<span class="material-symbols-outlined text-3xl text-red-500">swords</span>
+<div>
+<p class="font-semibold text-white">Rival Update</p>
+<p class="text-sm text-gray-400">Sophia lost 50 XP!</p>
+</div>
+</div>
+</div>
+</section>
+<div class="mt-8 grid grid-cols-1 gap-8 md:grid-cols-2">
+<section class="rounded-lg bg-[#1a221e] p-6">
+<h3 class="text-lg font-bold">Rival Status</h3>
+<div class="mt-4 flex items-center gap-4">
+<div class="relative h-16 w-16">
+<img alt="Sophia's avatar" class="h-16 w-16 rounded-full border-2 border-[#3d5245]" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCth2dZ807pKjdj8Sm70eBbjw_tVJYeyZ8hYNbox8WQdTum8wHOX-GkoLQlVVp1nAMea3gQlV8yZnsrX2HUTvx-dCawSLc6GsXjH75frU88P_VSC9uAAX5HxEmS5IQYhrp9UuKwAvRiS-FNVJbgQ2vjrBsFXrEpv76AgobgQf66SbSYbozyIUWgMoJ7C-YeHUOTSldbDAeMZDgk5Wrdv6qoolpLCUFRTe4fhsDkpnhjvIEtDqTUqrUuLidGHCjAoP_QsvNmKDgRqYP3"/>
+<span class="xp-gain-animation absolute -right-4 top-0 text-lg font-bold text-red-500">-50</span>
+</div>
+<div>
+<p class="font-semibold">Sophia</p>
+<p class="text-sm text-gray-400">Level 2 - 500 XP</p>
+<p class="mt-1 text-sm font-medium text-orange-400">Rival is gaining on you!</p>
+</div>
+</div>
+</section>
+<section class="rounded-lg bg-[#1a221e] p-6">
+<h3 class="text-lg font-bold">Leaderboard</h3>
+<div class="mt-4 flex items-center gap-4">
+<div class="flex h-16 w-16 items-center justify-center rounded-full bg-[#29382f] text-[var(--primary-color)]">
+<span class="material-symbols-outlined text-4xl">emoji_events</span>
+</div>
+<div>
+<p class="text-2xl font-bold">Rank #3 <span class="text-base font-normal text-gray-400">of 10</span></p>
+<p class="text-sm text-gray-300">1200 XP</p>
+</div>
+</div>
+</section>
+</div>
+<section class="mt-8 rounded-lg bg-[#1a221e] p-6">
+<div class="flex items-center justify-between">
+<h3 class="text-lg font-bold">Today's Goals</h3>
+<button class="flex h-10 w-10 items-center justify-center rounded-full bg-[var(--primary-color)] text-[#111714] hover:bg-opacity-80">
+<span class="material-symbols-outlined">add</span>
+</button>
+</div>
+<div class="mt-4 space-y-4">
+<label class="flex cursor-pointer items-center gap-4 rounded-md p-3 hover:bg-[#29382f]">
+<input checked="" class="h-5 w-5 rounded border-2 border-[#3d5245] bg-transparent text-[var(--primary-color)] focus:ring-0 focus:ring-offset-0" type="checkbox"/>
+<span class="flex-1 text-gray-300">Complete project proposal</span>
+<span class="font-semibold text-[var(--primary-color)]">200 XP</span>
+</label>
+<label class="flex cursor-pointer items-center gap-4 rounded-md p-3 hover:bg-[#29382f]">
+<input class="h-5 w-5 rounded border-2 border-[#3d5245] bg-transparent text-[var(--primary-color)] focus:ring-0 focus:ring-offset-0" type="checkbox"/>
+<span class="flex-1 text-gray-300">Review team feedback</span>
+<span class="font-semibold text-[var(--primary-color)]">150 XP</span>
+</label>
+<label class="flex cursor-pointer items-center gap-4 rounded-md bg-red-900/30 p-3 hover:bg-red-900/50">
+<input class="h-5 w-5 rounded border-2 border-red-500 bg-transparent text-[var(--primary-color)] focus:ring-0 focus:ring-offset-0" type="checkbox"/>
+<span class="flex-1 font-medium text-red-400">Schedule client meeting (Overdue)</span>
+<span class="font-semibold text-red-400">100 XP</span>
+</label>
+</div>
+</section>
+</div>
+</main>
+<button class="fixed bottom-8 right-8 flex h-16 w-16 items-center justify-center rounded-full bg-[var(--primary-color)] text-[#111714] shadow-lg transition-transform hover:scale-110">
+<span class="material-symbols-outlined text-3xl">add</span>
+</button>
+</div>
+
+</body></html>
\ No newline at end of file
diff --git a/TheVibeQCom/Wireframe/vibe-code_dashboard_2/screen.png b/TheVibeQCom/Wireframe/vibe-code_dashboard_2/screen.png
new file mode 100644
index 0000000..404b80b
Binary files /dev/null and b/TheVibeQCom/Wireframe/vibe-code_dashboard_2/screen.png differ