Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application designed to showcase strategic information and partnerships through engaging animations and a modern, minimalist aesthetic. The main purpose is to present the "2030 Strategic Roadmap" in a visually appealing manner, incorporating animated elements to enhance user interaction and experience.

## CORE FEATURES
1. **Established Partnerships Carousel**: An infinite carousel showcasing established partnerships with smooth animations that enhance visibility and engagement.
2. **2030 Strategic Roadmap**: A vertical scrollable section that dynamically updates the year displayed alongside relevant text, providing an interactive timeline experience.
3. **Additional Animations**: Implement various animations throughout the application to create a lively and engaging user experience.
4. **Responsive Design**: Ensure that the layout and animations adapt seamlessly to different screen sizes and devices.
5. **Smooth Scroll Effects**: Enhance the user experience with smooth scroll animations, especially when transitioning between sections.

## 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 main layout will feature a full-width hero section at the top, followed by the carousel for partnerships, a vertically scrolling roadmap section, and a footer with contact information.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: Use React's built-in state management for handling animations and dynamic content updates.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui components.
2. **Create Layout Components**: Develop the main layout including the hero section, carousel component for partnerships, and the vertical roadmap section.
3. **Implement Carousel Feature**: Use a library or custom code to create the infinite carousel for displaying partnerships with smooth animations.
4. **Add Vertical Roadmap Section**: Create a scrollable section where the year updates dynamically based on the scroll position, using React hooks for state management.
5. **Incorporate Additional Animations**: Utilize CSS animations or libraries like Framer Motion to add engaging animations throughout the app.
6. **Style Components**: Apply Tailwind CSS styling according to the defined design specifications, ensuring proper spacing, typography, and responsiveness.
7. **Test and Optimize**: Conduct thorough testing for responsiveness and user experience, making adjustments as necessary.

## USER EXPERIENCE
Users will interact with the application by scrolling through the vertically arranged roadmap, which updates the year and associated text dynamically. The carousel of established partnerships will draw attention with its infinite loop and smooth transitions. Overall, the design prioritizes clarity and engagement, ensuring that users can easily navigate through the content and appreciate the animations that enhance their experience.