Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The project is a sleek creator hub landing page designed to showcase community work and engage users through a bright light theme, glassmorphism, and vibrant accents. This one-page marketing site will focus on conversion and delivering a visually appealing experience while highlighting various creative disciplines.

## CORE FEATURES
1. **Sticky Glass Navbar**: A navigation bar that transforms to a frosted glass effect when scrolled, including a mobile-friendly menu for easy access.
2. **Hero Section**: Features an animated badge, a gradient headline, a glass-framed video showcase card with a pulsating play button, and a live stats strip to engage visitors immediately.
3. **Showcase Reel**: An infinite marquee displaying community work that pauses on hover, with play buttons appearing on each card for enhanced interactivity.
4. **Featured Content Grid**: A grid layout with filter tabs (All / Videos / Podcasts / Articles) showcasing six cards that display author, category, duration, and date, with colored hover glows for visual feedback.
5. **Categories Panel**: Highlights six creative disciplines with interactive icons that shift to the accent color on hover, encouraging exploration.
6. **Newsletter Signup**: A dark glass panel for users to subscribe, featuring email validation, a loading spinner, and a success state to confirm subscription.

## 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-column structure with a sticky navbar on top, followed by the hero section, showcase reel, featured content grid, categories panel, newsletter signup, and footer. Each section will utilize ample spacing and smooth transitions.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS for utility-first styling.
- **UI Components**: shadcn/ui for pre-built, customizable components.
- **State Management**: React's built-in state management or Context API as needed.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Create a new React project using TypeScript and install Tailwind CSS and shadcn/ui.
2. **Configure Tailwind**: Set up the Tailwind configuration file to include custom styles and enable dark mode if needed.
3. **Build Global Styles**: Define global styles in a CSS file, ensuring to import Inter font from Google Fonts.
4. **Create Components**: 
   - Develop the Sticky Navbar component with responsive design.
   - Build the Hero Section with animated elements and the glass effect.
   - Implement the Showcase Reel component with infinite marquee behavior.
   - Design the Featured Content Grid with filtering functionality.
   - Create the Categories Panel with hover effects.
   - Develop the Newsletter Signup component with email validation.
   - Construct the Footer with social media links and navigation.
5. **Wire Components Together**: Integrate all components into the main `App.tsx`, ensuring proper data flow and state management.
6. **Testing**: Test for responsiveness across devices and ensure smooth animations and interactions.

## USER EXPERIENCE
Users will enjoy an engaging and interactive landing page that guides them through various creative disciplines. The sticky navbar provides easy navigation, while the hero section captures attention with dynamic visuals. Users can explore featured content through the grid and filter options, and the newsletter signup encourages them to stay connected. Smooth animations and glassmorphism effects throughout the site enhance the overall experience, making it visually appealing and user-friendly.