project-0a95242b

As a user, I want to use the Login page so that I can sign in as either a User or Admin. Implement the Login page based on the existing JSX design (v2) with: email/password form fields, Rosy Red CTA button, and redirect logic — Admins flow to Dashboard Overview, Users flow to Landing. Apply the Merian brand theme and ensure mobile-responsive layout. Basic authentication already exists — wire up the existing auth endpoints to this designed page.

As a user, I want to view the Landing page so that I can explore the virtual runway experience and navigate to Runway, Login, Events, and Shop. Implement the Landing page based on the existing JSX design (v2) which includes: NavBar, HeroRunway, SignatureConcept, FeaturedDesigns, VirtualRunwayExperience, AudienceSimulation, HowItWorks, EventsTicketing, Testimonials, CallToAction, and Footer sections. Entry point for the User flow (Landing: View Runway → Runway: Explore Designs). Design is already complete — focus on pixel-perfect implementation matching the v2 design.

As an admin, I want to use the Dashboard Overview page so that I can access all management features including designs, runway customization, and orders. Implement the Dashboard page based on the existing JSX design (v2) with: TopBar, Sidebar navigation, WelcomeBanner, StatsOverview (total designs, active shows, pending orders, revenue), RecentDesigns panel, RunwayPreview panel, OrdersActivity feed, and QuickActions (Upload Design, Add Model, Edit Runway, Manage Tickets). Sidebar links to Designs, Runway, and Orders pages. Apply Rich Espresso sidebar and Soft Ivory content area per brand theme.

As a user, I want to use the Runway page so that I can explore designs in an immersive virtual runway environment. Implement the Runway page based on the existing JSX design (v2) with: NavBar, animated flower runway scene (CSS keyframes/Three.js), models walking in a loop showcasing designs, interactive controls (zoom in/out, rotate view), a 'Live on the Runway' badge with pulsing indicator, audience simulation of 100 elegantly dressed avatars, a design carousel strip, Events booking CTA, and Footer. On mobile degrades gracefully to a swipeable carousel. Navigates from Landing and links to Design detail page and Events page.

As a user, I want to use the Events page so that I can browse upcoming fashion show events and book tickets. Implement the Events page based on the existing JSX design (v2) with: NavBar, a hero banner, a list/grid of upcoming shows with date, venue, streaming info, and availability status, a 'Book Ticket' flow with confirmation, Rosy Red date badges, and availability indicators. Connects from Runway page (Events: Book Ticket CTA).

As a user, I want to view a Design detail page so that I can see full design information including fabric details, styling tips, a runway preview, and purchase options. Implement the Design page based on the existing JSX design (v2) with: NavBar, DesignHero (large image + purchase CTA), DesignGallery (thumbnail strip), FabricDetails (material attributes), StylingTips (3-card editorial row), RunwayPreview (looping video/animation), PurchasePanel (sticky bottom bar on mobile), ShareExperience (social share buttons), RelatedDesigns grid, and Footer. Accessible from Runway page. Links to Shop (purchase) and Social (share).

As an admin, I want to use the Designs page so that I can upload new fashion designs and manage associated models. Implement the Designs page based on the existing JSX design (v2) with: a design upload form (image, title, fabric details, price), a model assignment interface, a grid view of existing designs with edit/delete options, and status badges (Published/Draft/Archived). Part of the Admin flow: Dashboard → Designs: Upload Design → Designs: Manage Models.

As a backend developer, I want to implement REST API endpoints for runway environment customization so that admins can configure the virtual runway scene. Endpoints: GET /runway/config, PUT /runway/config (update theme, lighting, flower style), POST /runway/models/assign, GET /runway/models. Store configuration in MySQL and serve to the frontend Runway page.

As an AI engineer, I want to integrate GPT 5.2 via LiteLLM and Langchain so that the platform can provide conversational responses and design recommendations. Implement a POST /ai/chat endpoint, connect to the Dashboard AI Assistant page, and build response chains for: design recommendations, event suggestions, and styling tips based on user preferences.

As an admin, I want to use the Orders page so that I can manage ticket bookings and e-commerce transactions. Implement the Orders page based on the existing JSX design (v2) with: a table of all orders (design purchases + event tickets), status indicators (pending, confirmed, cancelled), filter/search by date and type, order detail modal with customer info, and bulk action controls. Part of the Admin flow: Dashboard → Orders: Manage Transactions.

As a backend developer, I want to implement REST API endpoints for designs and models management so that the frontend Designs page can upload, retrieve, update, and delete fashion designs. Endpoints: POST /designs (upload with image), GET /designs, PUT /designs/{id}, DELETE /designs/{id}, POST /designs/{id}/models, GET /designs/{id}/models. Use FastAPI with MySQL via Alembic migrations.

As a user, I want to use the Social page so that I can share my fashion show experience on social media platforms. Implement the Social page based on the existing JSX design (v2) with: NavBar, ShareHeroBanner, ShareComposer (caption + platform buttons), SocialFeed (masonry community posts), DesignSpotlightCard (most-shared design), HashtagsTrending strip, AudienceReactions (live stats + avatar strip), ShareCallToAction band, and Footer. Connects from Design detail page's Share CTA.

As a backend developer, I want to implement REST API endpoints for events and ticket booking so that users can browse shows and book tickets. Endpoints: GET /events, POST /events (admin), GET /events/{id}, POST /events/{id}/book, GET /bookings/{user_id}, PUT /bookings/{id}/cancel. Include seat availability tracking and booking confirmation logic.

As a user, I want to use the Shop page so that I can purchase fashion designs directly from the platform. Implement the Shop page based on the existing JSX design (v2) with: NavBar, a filterable design grid (category/fabric), individual design cards with price and 'Buy Now' CTA, cart summary panel, and checkout flow. Connects from Design detail page's purchase CTA. Admin manages fulfilled orders via the Orders page.

As a frontend developer, I want to implement Arabic and English language support across all pages so that users can toggle between languages. Set up i18n library (react-i18next), create translation files for AR and EN, add language toggle in the NavBar (AR | EN), and ensure RTL layout support for Arabic. Cover all page labels, buttons, and content strings across Landing, Login, Dashboard, Runway, Design, Shop, Events, Social, Designs, and Orders pages.

As an AI engineer, I want to integrate the Google Nano Banana image generation model via LiteLLM so that the platform can generate high-quality design visuals and runway imagery. Set up LiteLLM routing for the image generation endpoint, create a POST /ai/generate-image API, and wire it into the Designs upload flow so admins can generate model images from text prompts.

As a backend developer, I want to implement REST API endpoints for design purchasing so that users can add items to cart and complete purchases. Endpoints: GET /shop/designs, POST /cart/add, GET /cart/{user_id}, POST /orders/checkout, GET /orders/{user_id}, PUT /orders/{id}/status (admin). Include payment flow stubs and order confirmation.

As a backend developer, I want to implement REST API endpoints for social sharing so that users can post and retrieve shared experiences. Endpoints: POST /social/share (caption, design_id, show_id, platform), GET /social/feed, DELETE /social/share/{id}. Integrate social platform OAuth tokens for direct sharing to Instagram, Twitter/X, and Facebook.

As a backend developer, I want to implement security measures and performance optimizations so that the platform loads within 3 seconds and protects user data. Tasks include: API rate limiting, JWT token validation, input sanitization, image CDN setup for high-res assets, lazy loading for runway animations, and data privacy compliance for Palestinian e-commerce regulations.