Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
"Robux Rewards" is a landing page designed to facilitate weekly giveaways of Robux through an official Roblox group. The page aims to provide a professional and trustworthy environment for users to participate in the giveaways without risking their account security.

## CORE FEATURES
1. **Hero Section**: A prominent section at the top featuring the title "Gana Robux Gratis Cada Semana", a subtitle explaining the giveaway process, and a "Participar Ahora" button to encourage immediate participation.
2. **Cómo Funciona**: An informative three-step guide detailing the process: 1) Join the official Roblox group [link space], 2) Follow the requirements, 3) Win Robux through Group Payouts.
3. **Recent Winners Table**: A dynamic table displaying recent winners, including their avatars, Roblox usernames, and the amount won, using example data.
4. **Participation Form**: A simple form that collects the participant's Roblox username and their reason for wanting to win Robux while ensuring no password is requested.
5. **Countdown Timer**: A visually engaging countdown timer indicating the time left until the next giveaway.
6. **FAQ Section**: An informative FAQ that clarifies the legitimacy of the giveaways, emphasizing that Robux are provided through the official Group Payouts system and that passwords are never requested.

## 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-page layout with a clear vertical flow from the hero section to the participation form, including sections for "Cómo Funciona", "Recent Winners", "FAQ", and the countdown timer, all organized for easy navigation.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: [Use React's built-in state management for simplicity, or specify if a library like Zustand is preferred].

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a React project with TypeScript and install Tailwind CSS and shadcn/ui.
2. **Create Components**:
   - Develop the Hero section with a title, subtitle, and button.
   - Implement the "Cómo Funciona" section with a three-step layout.
   - Create a Winners table component that fetches recent winners' data (mock data initially).
   - Build the Participation Form with fields for username and reason.
   - Add a Countdown Timer that updates dynamically.
   - Design the FAQ section with common questions and answers.
3. **Integrate Supabase**: Set up a Supabase project and create a "participantes" table with fields for username, reason, and date. Connect the Participation Form to submit entries to this table.
4. **Style Components**: Use Tailwind CSS to style each component according to the design specifications, ensuring responsiveness.
5. **Testing**: Thoroughly test user interactions, form submissions, and the countdown functionality. Ensure all links and buttons are functional.
6. **Deployment**: Deploy the landing page on a suitable platform (e.g., Vercel, Netlify) for public access.

## USER EXPERIENCE
Users will encounter a visually appealing landing page with a clear focus on the Robux giveaway process. They will easily navigate through the hero section, understand how to participate, view recent winners, and engage with the countdown timer. The participation form will provide a straightforward way to enter while assuring their security, fostering trust in the legitimacy of the giveaways. The FAQ section will address any concerns, reinforcing the professional tone of the site.