Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
Balatah is a web application designed as a B2B/B2C tile marketplace in Saudi Arabia, featuring a dual interface for buyers and vendors. The vendor dashboard allows suppliers to customize their public store page through a Storefront Builder, while buyers can browse and visualize tiles in 3D, creating an engaging and user-friendly experience.

## CORE FEATURES
1. **Storefront Builder**: A split-screen visual editor for vendors to customize their public store page settings, including sections, layout, styles, and themes.
2. **Public Store Page**: Displays the vendor's customized settings, showcasing products and sections based on configurations saved in localStorage.
3. **Dynamic Sections**: The public store page can render five customizable sections—Hero, Featured Products, Collections, About Us, and Testimonials—based on vendor selections.
4. **Responsive Design**: The application ensures a seamless experience across devices, with adaptive layouts and optimal viewing.
5. **Theme Management**: Vendors can select from three predefined themes or create their own, affecting overall aesthetics and functionality of the storefront.
6. **User-Friendly Navigation**: The public store page includes a dedicated header for easy navigation, enhancing the buyer's browsing experience.

## DESIGN SPECIFICATIONS
- **Visual Style**: minimalist - Clean, simple design with plenty of white space, minimal color palette, and focus on typography
- **Color Mode**: Light theme with dark text on light backgrounds
- **Primary Color**: #1978E5 (accent for buttons, links, highlights)
- **Typography**: Use Inter from Google Fonts for headings, Inter for body text and UI elements
- **Border Radius**: 8px (moderately rounded) for buttons, cards, and inputs
- **Layout**: The layout will be structured to showcase the public store page sections prominently, with the header fixed at the top for easy navigation and a clear visual hierarchy to guide users through the content.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: localStorage for data persistence

## IMPLEMENTATION STEPS
1. **Setup Project**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui components.
2. **Create the Storefront Builder**: Build the vendor dashboard interface to allow customization of store settings, ensuring each change saves to localStorage under the key `balaat_storefront_builder_v2`.
3. **Develop the Public Store Page**: Create the `/store/[slug]` page that reads from localStorage upon mount and applies the saved settings to render the sections dynamically.
4. **Implement Section Logic**: Code functionality to conditionally render sections based on vendor preferences (show/hide) and in the specified order.
5. **Style the Page**: Apply Tailwind CSS for styling, ensuring adherence to the design specifications including primary color, typography, and border radius.
6. **Test Responsiveness**: Ensure the layout is responsive across different devices and screen sizes, refining as needed for optimal user experience.

## USER EXPERIENCE
Users will interact with a clean and intuitive interface. Vendors will enjoy an easy-to-use Storefront Builder that saves their configurations seamlessly. Buyers will appreciate the visualization of tiles and the organized layout of vendor stores. The navigation will guide users effectively, with quick access to important sections like Catalog, Collections, About, and Contact, enhancing engagement and facilitating a smooth purchasing process.