Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a landing page designed to showcase a 3D scrolling effect, providing an engaging visual experience for users while maintaining a minimalist aesthetic. The main purpose is to attract visitors and convert them through clear calls to action and an appealing design.

## CORE FEATURES
1. **Hero Section**: A visually striking hero section that introduces the 3D scrolling effect with a compelling headline and a call-to-action button.
2. **Features Showcase**: A section that highlights the key features of the 3D effect, using animations to demonstrate its impact on user engagement.
3. **Testimonials**: A section dedicated to user testimonials that provides social proof and encourages visitor trust.
4. **Contact Form**: An easy-to-use contact form that allows potential clients or users to reach out for more information or inquiries.
5. **Responsive Design**: Ensure that the layout adapts beautifully to various screen sizes, maintaining usability and aesthetics across devices.

## 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 consist of a full-width hero section at the top, followed by feature showcases arranged in a grid format, a testimonial slider, and a contact form at the bottom. Each section will utilize ample white space to enhance readability and focus.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS for a streamlined and responsive design.
- **UI Components**: shadcn/ui for consistent UI elements.
- **State Management**: Not required for this landing page, but can be implemented if needed for future interactivity (e.g., form submissions).

## IMPLEMENTATION STEPS
1. **Setup Project**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui.
2. **Create Components**:
   - Build the Hero component with a background image and a headline.
   - Develop the Features component using Tailwind CSS grids to display features.
   - Create a Testimonials component that cycles through user feedback.
   - Implement a Contact Form component with inputs for name, email, and message.
3. **Add 3D Scrolling Effect**: Implement the 3D scrolling effect using CSS transforms and JavaScript, ensuring it enhances the user experience without compromising performance.
4. **Style Components**: Apply the design specifications using Tailwind CSS classes to achieve the minimalist look, including the primary color and typography settings.
5. **Test Responsiveness**: Ensure all components work seamlessly on various screen sizes and devices.
6. **Deploy**: Host the landing page on a suitable platform (e.g., Vercel or Netlify) for public access.

## USER EXPERIENCE
The landing page will provide a smooth and engaging user experience. Users will be greeted with an eye-catching hero section that draws them in. As they scroll, they will experience the 3D effect, which will visually separate the sections while providing a sense of depth. Each feature showcased will be easy to read and visually appealing, leading users toward the testimonials that build trust. Finally, the contact form will be straightforward, encouraging users to reach out for more information or services. Overall, the design will focus on clarity, usability, and aesthetic appeal, ensuring a pleasant browsing experience.