brave-website
Monish RajCreate a modern responsive website for an AI-powered food ordering platform. Follow this style guide strictly: Design Style: - Clean, minimal, modern UI (2026 trend) - Card-based layout - Soft shadows and rounded corners - High-quality spacing and alignment Color System: - Primary: Deep Orange (#FF6B35) - Secondary: Dark Gray (#1F2937) - Background: Light Gray / White - Accent: Soft Green for success states Typography: - Modern sans-serif font - Clear hierarchy (Heading, Subheading, Body) - Good readability and spacing Components: - Navigation bar with clear CTA - Hero section with strong headline and search - Restaurant listing cards - Food item cards - CTA buttons (Order Now, Explore, etc.) Pages Required: - Landing page - Restaurant listing page - Food menu page - About section - Contact section Requirements: - Mobile-first responsive design - Consistent spacing, typography, and color usage - High-quality UI output (avoid placeholders) - Focus on visual clarity and usability
Comments (0)
Sign in to leave a comment
Project Tasks12
Implement Theme & Structure
As a user, I want to see a consistent theme and structure across all pages so that the website looks exactly identical to the mock-design pages. This task includes applying the Minimal Elegant color palette (Taupe #D8C3A5, Ivory White #F9F6F0, Burgundy #800020, Light Cream #FAF9F6, Warm Gray #F4F4F4), setting up global typography (modern sans-serif), shared layout components (navbar, footer), and removing any pages not required by the SRD. This task must be completed before all other frontend page tasks.
Implement Restaurants Listing API
As a user, I want to use a backend API to fetch a list of restaurants with their names, cuisine types, ratings, and image URLs so that the Restaurants Listing page can display real data. Implement a FastAPI endpoint GET /api/restaurants with MySQL integration and Alembic-managed schema.
Implement Contact Form API
As a user, I want to use a backend API to submit contact inquiries so that my messages are securely received and stored. Implement a FastAPI POST /api/contact endpoint with input validation and CSRF protection.
Implement Food Menu API
As a user, I want to use a backend API to fetch food items for a selected restaurant including item names, descriptions, prices, and image URLs so that the Food Menu page displays real data. Implement FastAPI endpoints GET /api/restaurants/{id}/menu with MySQL integration.
Build Landing Page
As a user, I want to view a responsive landing page with a hero section, dynamic search bar, parallax food imagery using high-quality stock images, micro-interactions on food items, and CTA buttons (Order Now, Explore) with ripple effects, based on the existing Landing (v6) JSX design. The page is the entry point in the user flow for both Guest and User personas, linking to Restaurants, About, and Contact sections.
Build About Section Page
As a user, I want to access an About section to learn more about the AI-powered food ordering platform, its mission, and key features. This section is accessible from the Landing page for both Guest and User personas. Implement as a dedicated page or scroll section with consistent theme and stock imagery.
Build Restaurants Listing Page
As a user, I want to browse a list of restaurants displayed as flip-on-hover cards with high-quality stock images showing restaurant interiors or dishes, ratings, and cuisine type. This page is reached from the Landing page search/explore flow and links to the Menu page upon selecting a restaurant. Implement based on the user flow for both Guest (Browse Listings) and User (Browse Listings → Select Restaurant) personas.
Build Food Menu Page
As a user, I want to view food items from a selected restaurant displayed as cards with high-quality stock images, item names, descriptions, and prices. This page is reached from the Restaurants page and allows users to explore item details. Implement the menu page following the user flow: Restaurants → Menu → Explore Item Details.
Build Contact Section Page
As a user, I want to access a Contact section to reach out for support or inquiries, including a contact form with input validation and a submission CTA. This section is accessible from About and Landing pages. Implement with WCAG 2.1 accessibility standards and CSRF protection on the form.
Integrate Restaurants API with Frontend
As a user, I want the Restaurants Listing page to fetch and display real restaurant data from the backend API, replacing any mock/static data with live API calls. Connect the React frontend to GET /api/restaurants and handle loading and error states.
Integrate Contact API with Frontend
As a user, I want the Contact section form to submit my inquiry to the backend API and display a success or error state after submission. Connect the React contact form to POST /api/contact.
Integrate Menu API with Frontend
As a user, I want the Food Menu page to fetch and display real food item data from the backend API for the selected restaurant. Connect the React frontend to GET /api/restaurants/{id}/menu and handle loading and error states.
No comments yet. Be the first!