Lovable Prompt Creator - AI Prompt Generator

PROJECT SETUP
Create a new React project using Create React App. Organize the project files as follows:
- src/
  - components/
    - Hero.js
    - ProblemSolution.js
    - Features.js
    - Testimonials.js
    - CTA.js
  - styles/
    - App.css
  - App.js
  - index.js
  - animations.js (for Framer Motion animations)

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**: This component will feature an animated text reveal that introduces Syllara and its mission. It should have a background image or soft gradient.
2. **ProblemSolution**: A narrative section using parallax cards to illustrate the problems with outdated teacher tools and Syllara's solutions.
3. **Features**: A grid that showcases Syllara's key features with staggered fade-in animations as the user scrolls.
4. **Testimonials**: A section displaying quotes from teachers to provide social proof, with smooth transitions between quotes.
5. **CTA**: A final call-to-action section with a prominent button encouraging users to join the waitlist, featuring a magnetic button effect.

IMPLEMENTATION APPROACH
1. **Hero Component**: Use Framer Motion for the text reveal. Structure the component to include a background image, text, and a button linking to the waitlist.
   ```jsx
   import { motion } from 'framer-motion';

   const Hero = () => {
     return (
       <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 1 }}>
         <h1>Syllara: Empowering Teachers for a Better Tomorrow</h1>
         <button>Join the Waitlist</button>
       </motion.div>
     );
   };
   ```
2. **ProblemSolution Component**: Implement parallax scrolling using CSS and Framer Motion to create an engaging narrative.
   ```jsx
   const ProblemSolution = () => {
     return (
       <div className="parallax-cards">
         {/* Card components with animations */}
       </div>
     );
   };
   ```
3. **Features Component**: Create a grid layout for features with staggered delays for fade-in effects.
4. **Testimonials Component**: Use state to cycle through teacher quotes, applying fade animations for transitions.
5. **CTA Component**: Design a prominent button using the primary color and apply the magnetic effect using CSS hover effects.

ARCHITECTURE CONSIDERATIONS
- Use functional components and hooks for state management where needed.
- Consider using context for global state management if necessary (e.g., for the waitlist sign-up).

ERROR HANDLING
- Implement error boundaries in the application to catch and handle any rendering errors gracefully.
- Provide user feedback for form submissions in the CTA section, indicating success or failure.

TESTING STRATEGY
- Write unit tests for each component using Jest and React Testing Library to ensure that components render correctly and handle state as expected.
- Implement end-to-end testing with Cypress for user flow testing, particularly for the waitlist signup process.

This comprehensive setup will ensure that the landing page for Syllara is visually appealing, functionally robust, and user-friendly, adhering to best practices in development.