Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project aims to redesign an existing website into a premium, futuristic, and minimalist landing page that showcases content in a visually appealing manner. The objective is to create an "Awwwards" level website that incorporates smooth animations and high-quality visuals, enhancing user engagement and delivering a top-tier user experience.

## CORE FEATURES
1. **Hero Section**: A captivating hero area featuring a striking image or video background with a compelling tagline and a clear call-to-action button.
2. **About Us Section**: A concise overview of the company’s mission and values, presented with engaging visuals and animations.
3. **Services Offered**: A showcase of the services provided, each highlighted with icons and brief descriptions, utilizing GSAP animations for an interactive feel.
4. **Portfolio Showcase**: A visually stunning display of past projects, using a grid layout to allow easy navigation through images and videos.
5. **Testimonials**: A section featuring client feedback with smooth scrolling animations to enhance the reading experience.
6. **Contact Form**: A user-friendly contact form that encourages visitors to reach out, designed with clear fields and a submit button that uses the primary color.

## 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 be structured in a single-page format with sections stacked vertically. The hero section will be followed by an about section, services, portfolio, testimonials, and a contact section, ensuring a smooth scrolling experience.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui for pre-built components.
- **State Management**: Not specifically required for a landing page, but can utilize React Context or local state where necessary.

## IMPLEMENTATION STEPS
1. **Set Up Environment**: Initialize a new React project using Create React App with TypeScript and install necessary dependencies including Tailwind CSS and shadcn/ui.
2. **Design Layout**: Create a main layout component that includes the header and footer, ensuring proper spacing and alignment.
3. **Build Hero Section**: Implement the hero section with a background image or video, tagline, and call-to-action button styled with the primary color.
4. **Develop Content Sections**: For each subsequent section (About, Services, Portfolio, Testimonials, Contact), create separate components, applying GSAP animations for transitions and interactions.
5. **Responsive Design**: Ensure the layout is responsive, adjusting the design for different screen sizes using Tailwind's responsive utilities.
6. **Testing**: Conduct thorough testing to ensure animations work smoothly and all elements are accessible and functional.

## USER EXPERIENCE
Key user interactions will include smooth scrolling between sections, engaging hover effects on buttons and portfolio items, and a seamless experience when submitting the contact form. The minimalist design will provide ample whitespace, making navigation intuitive and enhancing content readability. The use of animations will create a dynamic experience that keeps users engaged throughout their visit.