Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a landing page for "Brownies Informatika," showcasing information about the brand and its offerings. The main purpose is to engage visitors with a clean, minimalist design that highlights key features, encourages conversions through a clear call-to-action (CTA), and provides contact information.

## CORE FEATURES
1. **Hero Section**: A prominent introduction with an engaging headline, subheadline, and a CTA button that encourages visitors to learn more or make a purchase.
2. **Features Section**: A brief overview of the unique selling points of Brownies Informatika, presented with icons and short descriptions to convey value quickly.
3. **Testimonials**: A section to showcase customer feedback or quotes that build trust and credibility, enhancing the brand’s reputation.
4. **Contact Information**: Easy access to contact details or a simple contact form for inquiries to foster communication with potential customers.
5. **Social Media Links**: Icons linking to social media profiles to encourage visitors to connect and engage with the brand online.

## 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**: A single-column layout for the landing page with clearly defined sections (Hero, Features, Testimonials, Contact) that are visually separated by ample whitespace, ensuring clarity and focus on content.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS for responsive design and utility-first styling.
- **UI Components**: shadcn/ui for pre-built UI components that adhere to the design specifications.
- **State Management**: Not required for this landing page.

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Initialize a new React project using Create React App with TypeScript.
2. **Install Dependencies**: Add Tailwind CSS and shadcn/ui to the project.
3. **Create Layout Components**: Build reusable components for the Hero, Features, Testimonials, and Contact sections.
4. **Implement Styling**: Use Tailwind CSS classes to apply the specified design guidelines, focusing on a minimalist aesthetic.
5. **Add Content**: Populate each section with relevant text, images, and links, ensuring alignment with the project vision.
6. **Optimize for Mobile**: Ensure that the landing page is responsive and looks great on all devices by utilizing Tailwind’s responsive utilities.
7. **Deploy the Application**: Use a hosting service like Vercel or Netlify to publish the landing page for public access.

## USER EXPERIENCE
Visitors will first encounter the Hero section, which captures attention with a compelling headline and CTA. Scrolling down will reveal the Features section, where users can quickly grasp the brand's value propositions. The Testimonials area will provide social proof, enhancing trust. Finally, the Contact section facilitates easy communication, ensuring a seamless user journey from awareness to engagement. The overall design will focus on simplicity, allowing users to navigate effortlessly while encouraging action.