Lovable Prompt Creator - AI Prompt Generator

PROJECT SETUP
Create a new Shopify theme project using Tailwind CSS v4 and Framer Motion. Organize your project files as follows:
- src/
  - components/ (for reusable components)
  - sections/ (for individual sections like hero, features, etc.)
  - styles/ (for Tailwind CSS configurations)
  - utils/ (for utility functions)
  - pages/ (for different page templates)
  - snippets/ (for reusable code snippets)
- public/ (for static assets)
- package.json (for dependencies and scripts)
- tailwind.config.js (for Tailwind CSS configuration)
- theme.liquid (main Shopify template)

DESIGN REQUIREMENTS
- 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

CORE COMPONENTS
1. Hero Section: A visually appealing introduction with a background image and a call-to-action button.
2. Rich Text Section: For informative content, styled with headings and paragraphs.
3. Image with Text Section: To feature products alongside descriptive text.
4. Bundle Section: Highlight special product bundles with pricing and descriptions.
5. Logo Marquee: Display partner or brand logos in a scrolling format.
6. Feature Products: Showcase best-selling or new products in a grid layout.
7. Collection Section: Dynamic display of product collections with filters.
8. Collection Sidebar: Sidebar for navigation through different collections.
9. Contact Section: Form for customer inquiries with validation.
10. Testimonials Section: Customer reviews with star ratings.
11. Newsletter Signup: A section for email subscriptions.
12. Blog Previews: Display recent blog posts with image and excerpt.
13. FAQ Section: Accordion-style questions and answers.
14. Social Media Links: Icons linking to social media profiles.
15. Shipping Information: Details about shipping policies.
16. Terms of Service: A link to the terms and conditions.
17. Privacy Policy: A link to the privacy policy.
18. Special Offers: Section for current promotions or discounts.
19. About Us: A section detailing the brand’s story and mission.
20. Footer: Comprehensive footer with navigation and contact details.

IMPLEMENTATION APPROACH
1. Set up Tailwind CSS by configuring the tailwind.config.js file to include custom styles.
2. Create reusable components in the components directory, such as buttons and card layouts.
3. Implement each section as a separate component in the sections directory, ensuring they are dynamic and can accept props for content.
4. Use Framer Motion to add animations to key components for a smoother user experience.
5. Utilize Shopify's Liquid templating language to pull dynamic data into components and sections.

ARCHITECTURE CONSIDERATIONS
Adopt a component-based architecture to promote reusability and maintainability. Each section should be modular and easily customizable. Use Tailwind CSS for styling to ensure a consistent design language across the theme.

ERROR HANDLING
Implement error handling for form submissions using JavaScript to validate inputs and provide user feedback. Ensure that any API calls for fetching data from Shopify handle errors gracefully, displaying relevant messages to users.

TESTING STRATEGY
Establish a testing strategy that includes:
- Unit tests for individual components using Jest.
- End-to-end testing with Cypress to ensure that user interactions function as expected.
- Performance testing to ensure the theme loads efficiently and meets SEO requirements.

By following these guidelines, you will create a comprehensive and fully functional Shopify theme for beauty products that is visually appealing and optimized for SEO.