Act as a Principal Frontend Architect and UI/UX Designer.
Generated Prompt
## APPLICATION OVERVIEW This project involves creating a premium, highly optimized static website for the Agni Masala brand experience. The site will function as a professional web presence with multiple pages, focusing on showcasing products, telling the brand story, and facilitating customer inquiries while maintaining a minimalist aesthetic. ## CORE FEATURES 1. **Home / Landing Page**: Acts as the editorial entrance, featuring a hero section, key highlights of the brand, and CTAs directing users to shop or learn more about the brand. 2. **Shop / Catalog Page**: Displays a visually appealing grid of products, allowing users to browse and filter items easily. 3. **Product Detail Page**: Provides sensory descriptions of products along with a static cart-add UI, enhancing the shopping experience. 4. **Heritage / About Us**: Tells the brand story and origin, emphasizing artisanal craftsmanship and brand values. 5. **Contact / Stockist Inquiry**: Features a static inquiry form for stockist details and a map for location information. 6. **Utility & Legal Pages**: Includes essential information on shipping, returns, privacy policy, and terms of service. 7. **Cart Page**: Displays selected items for review before checkout. 8. **Login/Signup Page**: Allows users to create accounts or log in to manage their shopping 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 site will feature a fluid grid layout with ample whitespace, ensuring a focus on content and ease of navigation. ## TECHNICAL REQUIREMENTS - **Framework**: Static website using React with TypeScript or a framework like Next.js for static export. - **Styling**: Use Tailwind CSS for rapid styling and responsive design. - **UI Components**: shadcn/ui for pre-built components. - **State Management**: Not explicitly required for a static site, but could consider a simple context for handling cart state if needed. ## IMPLEMENTATION STEPS 1. **Set up the project** using Create React App or Next.js with TypeScript template. 2. **Install Tailwind CSS** and configure it to work with the project. 3. **Create page components** for Home, Shop, Product Detail, About Us, Contact, Utility Pages, Cart, and Login/Signup. 4. **Implement routing** using React Router or Next.js routing features. 5. **Design layouts** for each page following the specified design principles, ensuring responsive design throughout. 6. **Add animations and micro-interactions** using CSS and GSAP for scroll-triggered reveals, parallax effects, and magnetic buttons. 7. **Test the site** on various devices and browsers to ensure optimal performance and user experience. ## USER EXPERIENCE Key user interactions include browsing products on the Shop page, exploring product details with engaging descriptions and images, submitting inquiries through the Contact page, and managing the cart seamlessly. The minimalist design will ensure that users can navigate intuitively, with animations enhancing the luxury feel without overwhelming the experience. This comprehensive blueprint provides a clear direction for creating a static website that embodies the Agni Masala brand's premium, artisanal identity while ensuring a high-quality user experience.
Loved by thousands of makers from
From early prototypes to real products, they started here.







































Generate optimized prompts for your vibe coding projects
Generate prompt
Enter a brief description of the app you want to build and get an optimized prompt
Review and use your prompt
Review (and edit if necessary) the generated prompt, then copy it or open it directly in your chosen platform
Get inspired with new ideas
Get AI-generated suggestions to expand your product with features that will surprise your users
Frequently Asked Questions
Everything you need to know about creating better prompts for your Lovable projects
Still have questions?
Can't find what you're looking for? We're here to help!
