Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a minimalist landing page that emulates the visual style and animations of the provided reference site. The main purpose is to create an engaging user experience with smooth transitions, appealing typography, and a clean layout that emphasizes key content. like this https://www.fortvega.com/

## CORE FEATURES
1. **Hero Section**: A prominent hero section with a captivating headline, subheading, and a call-to-action button that invites users to learn more.
2. **Animated Transitions**: Incorporation of engaging 3D transitions and animations throughout the page to create a dynamic experience as users scroll.
3. **Features Showcase**: A section dedicated to highlighting the key features of the service or product, each with brief descriptions and illustrative icons or images.
4. **Testimonials**: A section displaying user testimonials to build trust and credibility, featuring quotes and user images.
5. **Contact Form**: A simple contact form allowing users to reach out easily, integrated with backend services for submission.
6. **Footer**: A footer section with links to social media and additional resources, ensuring users can access further information.

## 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 follow a vertical scrolling format with distinct sections for the hero, features, testimonials, and contact, maintaining a clear visual hierarchy and allowing for smooth navigation.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Not required for this static landing page.

## IMPLEMENTATION STEPS
1. **Setup Project**: Initialize a new React project using Create React App with TypeScript template.
2. **Install Dependencies**: Install Tailwind CSS and shadcn/ui for styling and UI components.
3. **Create Layout**: Design the layout structure with sections for Hero, Features, Testimonials, and Contact using Tailwind CSS classes.
4. **Implement Hero Section**: Create a hero component with a headline, subheading, and CTA button styled with the primary color.
5. **Add Animated Transitions**: Use CSS animations or a library like Framer Motion to add 3D effects and transitions between sections.
6. **Build Features Section**: Develop a features component that lists key features with icons and descriptions.
7. **Include Testimonials**: Create a testimonial component that cycles through user feedback with smooth transitions.
8. **Develop Contact Form**: Implement a contact form component to gather user inquiries, connected to a backend service for handling submissions.
9. **Final Touches**: Review responsiveness across devices, ensuring the layout adapts well to different screen sizes.

## USER EXPERIENCE
The user experience will focus on seamless navigation with smooth scrolling and visual transitions that engage users as they explore the landing page. Users will first encounter the hero section, prompting them to learn more, followed by informative sections that highlight features and testimonials, culminating in an easy-to-use contact form. The minimalist design will ensure clarity and ease of use across all devices.