Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a modern, premium single-page marketing website for "Digital Gravity," a one-person IT/AI agency. The website aims to help small local businesses attract more clients online through effective design and marketing strategies, focusing on simplicity and direct communication without technical jargon.

## CORE FEATURES
1. **Hero Section**: Engaging introduction with a compelling headline, subheadline, and clear CTAs to capture visitor interest.
2. **Pain Points**: Dramatic cards that highlight the consequences of inaction, emphasizing the need for the services offered.
3. **Solution Overview**: A clear comparison of the benefits of working with Digital Gravity versus competitors.
4. **Why Us Section**: Displaying the unique selling propositions of the agency through engaging cards that highlight Daniel’s experience and approach.
5. **Services Offered**: A grid layout showcasing the various services provided, each with a brief description emphasizing their benefits.
6. **How It Works**: A visual timeline that outlines the process of working with Digital Gravity, making it easy for potential clients to understand the steps involved.
7. **Lead Magnet Section**: An engaging section that promotes a free ebook download, encouraging email sign-ups.

## 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 layout will follow a single-page structure with sticky navigation at the top, clear sections for each feature, and smooth scrolling between them.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: React state for form handling and interactive elements.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install Tailwind CSS.
2. **Create Layout**: Develop the main layout structure with a sticky top navigation containing links to each section.
3. **Build Hero Section**: Implement the hero section with a two-column layout, including the text and a placeholder for an eye-catching image.
4. **Implement Pain Points Section**: Create the pain section using dramatic cards, each highlighting a critical pain point with appropriate animations.
5. **Design Solution Overview**: Use glassmorphism effects to create panels that present the solution offered by Digital Gravity.
6. **Develop Why Us Section**: Incorporate cards displaying the superpowers of the agency, including images and badges.
7. **Showcase Services**: Build a grid of service cards with hover effects to attract user interaction.
8. **Create How It Works Timeline**: Implement a vertical timeline that outlines the client journey and reveals steps on scroll.
9. **Lead Magnet Section**: Design the ebook download section with a floating cover mockup and email capture functionality.
10. **Optimize for Performance**: Ensure that images are optimized for lazy loading and that animations respect prefers-reduced-motion settings.

## USER EXPERIENCE
Visitors will experience a smooth, engaging journey through the site, beginning with a clear introduction and compelling reasons to choose Digital Gravity. Each section will flow seamlessly into the next, with animations that enhance the storytelling without overwhelming the visitor. The lead magnet section will provide a straightforward way to capture leads, encouraging engagement and follow-up. 

This minimalist design will focus on guiding the user to understand the value offered by Digital Gravity, making it easy for them to take action and reach out for services.