Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is aimed at creating a minimalist landing page featuring a prominent header with a white dropdown banner. The backdrop of the page will have a glass effect, providing a blurred appearance that enhances the overall aesthetic. The goal is to create a visually appealing and user-friendly experience that emphasizes simplicity and clarity.

## CORE FEATURES
1. **Header**: A fixed header that houses the site logo and navigation links, ensuring easy access to different sections of the page.
2. **Dropdown Banner**: A full-width dropdown banner that seamlessly integrates with the header, providing important announcements or promotional content.
3. **Glass Effect Background**: The entire page will feature a glass effect that blurs the background content, creating a modern and sleek appearance.
4. **Call to Action (CTA)**: Strategically placed buttons encouraging users to take specific actions, such as signing up or learning more about the services offered.
5. **Footer**: A simple footer containing copyright information and additional links for user navigation.

## 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 with a fixed header at the top, followed by a full-width dropdown banner. Below the banner, additional content sections will be organized in a single-column format, with responsive design to ensure usability across devices.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS for utility-first styling.
- **UI Components**: shadcn/ui for pre-built component utility.
- **State Management**: Not required for this landing page as there are no complex interactions.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install Tailwind CSS.
2. **Configure Tailwind**: Set up Tailwind CSS by creating a configuration file and including the necessary styles in your project.
3. **Create Header Component**: Develop a responsive header component that includes navigation links and is fixed at the top of the viewport.
4. **Implement Dropdown Banner**: Create a dropdown banner component that spans the full width of the header, ensuring it integrates visually with the header.
5. **Apply Glass Effect**: Utilize CSS properties to create a blur effect on the background of the page, ensuring it maintains readability and aesthetic quality.
6. **Design Content Sections**: Organize content into clear sections below the dropdown banner and ensure they are styled consistently with the minimalist theme.
7. **Add CTA Buttons**: Integrate clearly visible call-to-action buttons throughout the page, using the primary color for emphasis.
8. **Final Touches**: Add a footer and any additional styling needed to finalize the design, ensuring all components are responsive.

## USER EXPERIENCE
Users will interact with a clean and straightforward interface, where the header provides immediate navigation options. The dropdown banner will catch their attention with important messages, while the glass effect background will create an immersive experience. The layout will be designed to guide users smoothly through the content, with clear CTAs leading them to engage with the site further. The overall experience will prioritize ease of use and visual appeal, encouraging users to explore the offerings without distractions.