Lovable Prompt Creator - AI Prompt Generator

PROJECT SETUP
Create a new project directory named "GrowCloserLandingPage". Inside, structure the project as follows:
- /src
  - /components
    - HeroSection.js
    - StoryCards.js
    - ZipCodeComparison.js
    - IntakeForm.js
  - /styles
    - main.css
  - App.js
  - index.js
- /public
  - index.html
- package.json
- README.md

The `components` folder will contain all reusable UI components. The `styles` folder will hold the main CSS file for styling. The `App.js` will serve as the main entry point for the application, while `index.js` will bootstrap the app.

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. HeroSection: This component will feature a captivating image and a brief introductory text that encapsulates the journey the customer will experience.
2. StoryCards: A series of cards that illustrate key points in the customer journey, leading to the intake form.
3. ZipCodeComparison: A fun and educational tool that allows users to compare their zip code against others, showcasing potential savings.
4. IntakeForm: A form that guides users to submit their information for further assistance, emphasizing the business's value proposition.

IMPLEMENTATION APPROACH
1. Set up a basic React application using Create React App.
2. In `main.css`, define styles for the minimalist design, incorporating the primary color and typography.
3. In `HeroSection.js`, create a functional component that displays a background image and text.
   Example:
   ```jsx
   import React from 'react';
   import './styles/main.css';

   const HeroSection = () => {
       return (
           <div className="hero-section" style={{ backgroundImage: 'url(path/to/image)', borderRadius: '8px' }}>
               <h1>Grow Closer to Your Financial Goals</h1>
               <p>Join us on a journey to savings and better financial health.</p>
           </div>
       );
   };

   export default HeroSection;
   ```
4. Repeat similar steps for `StoryCards.js`, `ZipCodeComparison.js`, and `IntakeForm.js`, ensuring to follow the same design principles.
5. Use React Router for seamless navigation between the ZipCodeComparison and IntakeForm components.

ARCHITECTURE CONSIDERATIONS
Utilize a component-based architecture to promote reusability and maintainability. Each component should handle its own state where necessary, and props should be used to pass data between components. Employ functional components and hooks (e.g., useState, useEffect) for state management.

ERROR HANDLING
Implement error handling strategies in the IntakeForm using try-catch blocks, and provide user feedback for failed submissions. Validate user input before form submission to ensure all necessary fields are completed and formatted correctly.

TESTING STRATEGY
Adopt a testing strategy that includes unit tests for each component using Jest and React Testing Library. Test the rendering of components, user interactions, and ensure that error handling works as intended. Include end-to-end tests using a framework like Cypress to verify the overall user journey from the landing page through the intake process.

By following these detailed instructions, you will create a comprehensive landing page that effectively communicates the brand's story and guides users toward the intake form while incorporating a fun educational element with the zip code comparison tool.