Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
Create a professional landing page that showcases content from the specified URL. The site will feature a clean, minimalist design with a focus on user experience and clear navigation. It will utilize white colors to maintain an open feel and incorporate animations for a modern touch.

## CORE FEATURES
1. **Hero Section**: A prominent introduction area with a compelling headline, subheadline, and a call-to-action (CTA) button that encourages users to engage with the content.
2. **Content Showcase**: A structured section to display the main content extracted from the provided URL, formatted clearly for easy reading.
3. **Features Section**: Highlight key features or benefits related to the content, presented in visually appealing cards or list format.
4. **Testimonials**: A section dedicated to user feedback or testimonials to build trust and credibility.
5. **Contact Form**: An interactive form for users to reach out for more information or inquiries, ensuring easy communication.
6. **Footer**: A well-designed footer that includes links to social media, privacy policy, and terms of service.

## 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 vertical structure, with the hero section at the top, followed by content, features, testimonials, and a contact form at the bottom, all separated by ample white space for clarity.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: No specific state management is needed for this landing page, but local state can be managed using React's built-in hooks.

## IMPLEMENTATION STEPS
1. **Setup Environment**: Create a new React project using Create React App with TypeScript support.
2. **Install Dependencies**: Install Tailwind CSS and shadcn/ui components.
3. **Create Components**: Build the following components:
   - HeroSection
   - ContentShowcase
   - FeaturesSection
   - TestimonialsSection
   - ContactForm
   - Footer
4. **Integrate Styles**: Apply Tailwind CSS classes to achieve the minimalist design and ensure responsiveness.
5. **Fetch Content**: Implement a method to extract and display content from the provided URL.
6. **Add Animations**: Use CSS transitions or libraries like Framer Motion to add animations to sections for a dynamic feel.
7. **Test and Deploy**: Ensure cross-browser compatibility and responsiveness, then deploy the landing page using a service like Vercel or Netlify.

## USER EXPERIENCE
Users will be greeted by a clean hero section that immediately conveys the purpose of the site. As they scroll down, they will encounter well-organized content that is easy to digest. The CTA will encourage engagement, while the testimonials will instill confidence. The contact form will provide a straightforward way for users to communicate, enhancing interaction and user satisfaction. The entire experience will be seamless, with smooth transitions and a responsive design ensuring accessibility on all devices.