Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
Vibe is a visually captivating landing page that embodies a dark, futuristic aesthetic with a network-driven concept. The primary purpose is to showcase data-driven services such as scraping, APIs, and applications through an engaging scrolling narrative and interactive design elements that enhance user experience.

## CORE FEATURES
1. **Hero Section**: A stylized spider web made of interconnected data nodes featuring a central, slowly rotating glowing Python logo.
2. **Parallax Scrolling Effect**: Layered web strands that move at different speeds during scrolling, creating depth and engagement as users interact with the content.
3. **Data Droplet Narrative**: Each service appears as a “data droplet” that travels along a web strand. When it reaches a service card, the card flips to reveal detailed information.
4. **Micro-Animation**: The scraping service card displays a live terminal line with dynamic text, such as "Extracting 1,000+ records…" along with a blinking cursor to simulate real-time data extraction.
5. **Call to Action (CTA)**: An inviting button prompting users to learn more or get started, designed with the primary color for visual emphasis.
6. **Contact Section**: A simple form for users to get in touch, integrated into the minimalist layout for easy access.

## 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 features a single-page scroll structure with a prominent hero section at the top, followed by service descriptions, animations, and a contact form section at the bottom.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Not specified; use built-in React state management unless complex state interactions arise.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui.
2. **Create Basic Layout**: Structure the landing page with sections for Hero, Features, and Contact using Tailwind CSS classes for styling.
3. **Implement Hero Section**: Design the hero section with the spider web and Python logo; add CSS animations for the logo rotation.
4. **Add Parallax Effect**: Utilize CSS and JavaScript to create the parallax scrolling effect for the web strands.
5. **Develop Data Droplet Animation**: Program the movement of data droplets along the web strands and implement card flipping animations.
6. **Incorporate Micro-Animations**: Add the live terminal line animation to the scraping service card, using React state to manage the text display.
7. **Build Contact Form**: Design and implement the contact section with form validation and submission handling.
8. **Test Responsiveness**: Ensure the landing page is fully responsive across various devices and screen sizes.

## USER EXPERIENCE
The user experience is designed to be intuitive and engaging. Users will be drawn in by the dynamic hero section and smoothly transition through the site as they scroll. The interaction of data droplets and the flipping cards will keep users engaged, providing clear information about services. The contact form is easily accessible, allowing users to reach out without frustration, ensuring a smooth overall experience.