Lovable Prompt Creator - AI Prompt Generator

PROJECT SETUP
Create a new project folder named "animated-website-upgrade". Inside this folder, the structure should be as follows:

- /src
  - /components
    - Header.js
    - Footer.js
    - ScrollAnimation.js
    - Button.js
  - /styles
    - main.css
  - /utils
    - scrollUtils.js
  - App.js
  - index.js
- /public
  - index.html
- package.json

This structure promotes clear organization and separation of concerns, ensuring maintainability and scalability.

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. **Header**: Contains the site navigation and logo.
2. **Footer**: Displays contact information and links to social media.
3. **ScrollAnimation**: Implements the discrete scrolling mechanism with animated transitions.
4. **Button**: A reusable button component styled according to the design requirements.

IMPLEMENTATION APPROACH
1. Install necessary dependencies (e.g., React, React Router for navigation).
2. In `App.js`, set up routing if needed and import core components.
3. Create the `ScrollAnimation.js` component to handle the scrolling effect:
   ```javascript
   import React, { useEffect } from 'react';
   import { useLocation } from 'react-router-dom';
   
   const ScrollAnimation = () => {
       const { pathname } = useLocation();
       
       useEffect(() => {
           window.scrollTo({ top: 0, behavior: 'smooth' });
       }, [pathname]);
       
       return null;
   };

   export default ScrollAnimation;
   ```
4. Style components in `main.css`, ensuring to use the specified typography and colors:
   ```css
   body {
       font-family: 'Inter', sans-serif;
       background-color: #ffffff;
       color: #333333;
   }
   button {
       border-radius: 8px;
       background-color: #1978E5;
       color: white;
       padding: 10px 20px;
       border: none;
       cursor: pointer;
   }
   ```

ARCHITECTURE CONSIDERATIONS
Utilize a component-based architecture with functional components. State management can be handled by React's built-in hooks or more complex solutions like Context API if needed. Maintain separation of presentation and logic by keeping styles in the `/styles` directory and utility functions in the `/utils` folder.

ERROR HANDLING
Implement basic error handling in the `ScrollAnimation` component to catch any issues during scrolling, ensuring that the application remains functional even if certain animations fail. Use `try/catch` blocks where necessary, especially in asynchronous operations.

TESTING STRATEGY
Adopt a testing approach that includes unit tests for individual components using Jest and React Testing Library. Ensure to cover edge cases, particularly in the scrolling functionality, to confirm that it behaves as expected under various conditions.

By following these guidelines, you will create a professional and robust animated scrolling mechanism for your website, enhancing user experience and engagement.