Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a landing page for Tatanka Clothes, inspired by the Lakota tribe's aesthetics. The site will feature a fully animated experience that immerses visitors in nature, with flowing rivers and picturesque landscapes, while maintaining an intuitive navigation to ensure a user-friendly experience.

## CORE FEATURES
1. **Hero Section**: A captivating hero area with a full-screen background animation depicting nature scenes that reflect the Lakota tribe's heritage, accompanied by a prominent brand logo and a call-to-action button.
2. **Animated Buttons**: Interactive buttons that animate on hover and click, enhancing user engagement and providing a tactile feel to the navigation.
3. **Nature Background Animation**: Continuous animation in the background showcasing rivers and natural landscapes that change subtly as users scroll through the page.
4. **Product Showcase**: A visually appealing section to display featured products with brief descriptions, including hover effects that highlight each item.
5. **Testimonials**: A section featuring customer testimonials to build trust and authenticity around the brand, with animated transitions for each testimonial.
6. **Contact Form**: A simple, animated contact form for inquiries, ensuring users can easily reach out for more 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 layout will be a single-page structure with a fixed navigation bar at the top, followed by the hero section, features, product showcase, testimonials, and contact form. Each section will be visually distinct yet cohesive.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: Not necessary for this landing page, but can be integrated for future scalability.

## IMPLEMENTATION STEPS
1. **Setup Project**: Initialize a new React project using Create React App with TypeScript template.
2. **Install Dependencies**: Add Tailwind CSS and configure it for the project.
3. **Create Layout Structure**: Build the main structure with a fixed navigation bar and sections for hero, features, products, testimonials, and contact.
4. **Implement Background Animation**: Use CSS animations or a library like Framer Motion to create the flowing river and nature effects.
5. **Add Interactive Elements**: Create animated buttons and hover effects using Tailwind CSS utilities.
6. **Design Sections**: Style each section according to the specifications with a focus on whitespace and visual hierarchy.
7. **Test Responsiveness**: Ensure the design is responsive and works well on various devices and screen sizes.
8. **Deploy**: Deploy the landing page using a service like Vercel or Netlify.

## USER EXPERIENCE
Users will be greeted with an immersive animated hero section that captures their attention. As they scroll down, they will explore the brand's offerings through visually appealing sections with smooth transitions. The navigation will be straightforward, allowing users to easily navigate between different sections without confusion. The contact form will be easily accessible for inquiries, encouraging user interaction and engagement.