Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
Create a cinematic Spider-Man 2 inspired portfolio/game marketing website as a full single-page React application. This application will showcase the game features, characters, and provide a call to action for potential players, all while being fully interactive and scroll-animated, providing an engaging user experience.

## CORE FEATURES
1. **Hero Section**: A captivating full-screen hero area with a bold headline, a small HUD label, and two call-to-action buttons that animate on load.
2. **Feature Highlight**: An asymmetric layout that highlights key features of the game with engaging animations and a visually striking design.
3. **Character Roster**: A section presenting a roster of characters with detailed stats and animated cards that respond to user interactions.
4. **World/Features Grid**: A bento grid layout showcasing various features and elements of the game, each tile animating into view as the user scrolls.
5. **Call to Action**: A visually appealing CTA section that encourages users to pre-order the game, complete with engaging animations.
6. **Footer**: A simple footer with relevant links and information that maintains the design aesthetic.

## 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 utilize a full-width structure with distinct sections for the hero, features, character roster, world/features grid, and CTA, maintaining a clear visual hierarchy and responsiveness.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS (custom config)
- **Animations**: GSAP with ScrollTrigger for scroll-driven animations
- **Cursor Effects**: Custom SVG cursor and hover effects using Vanilla Tilt

## IMPLEMENTATION STEPS
1. **Setup Project**:
   - Create a new React project using Vite.
   - Install Tailwind CSS and configure with the provided color tokens.
   - Setup GSAP and Vanilla Tilt for animations.

2. **Global Styles**:
   - Implement the global styles in `index.css` as per the specifications provided, including custom cursor and overlays.

3. **Create Components**:
   - Build individual components for the hero section, feature highlights, character cards, and the CTA. Ensure each section is responsive and interactive.
   - Use Tailwind CSS classes for styling and animations.

4. **Implement Scroll Animations**:
   - Use GSAP to create animations for the hero section, feature highlights, character cards, and world/features grid to enhance the user experience.

5. **Test Responsiveness**:
   - Ensure the application is responsive on all devices, adjusting font sizes and layout structures as specified.

6. **Deploy the Application**:
   - Once completed, deploy the application using a suitable hosting service to showcase the portfolio/game marketing website.

## USER EXPERIENCE
Users will engage with an immersive experience that showcases the cinematic elements of the Spider-Man 2 game. The scroll-driven animations will enhance the storytelling aspect, while interactive elements will encourage exploration of features and characters. The CTA will provide a straightforward path for users to express interest or pre-order the game, ensuring a smooth and engaging user journey throughout the site.