Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a landing page designed to showcase a collection of Roblox jokes. The main purpose is to engage users with humor related to Roblox, encouraging sharing and interaction. The page will be designed with a minimalist aesthetic to enhance readability and user experience.

## CORE FEATURES
1. **Hero Section**: A welcoming introduction with a catchy tagline and a prominent call-to-action button encouraging users to explore the jokes.
2. **Joke Display**: A clean, organized section where users can view a list of Roblox jokes, each clearly labeled for easy navigation.
3. **Featured Jokes**: Highlight a selection of the top-rated jokes to draw attention and provide quick access to popular content.
4. **User Interaction**: Options for users to share jokes on social media platforms, increasing engagement and reach.
5. **Contact Section**: A simple form for users to submit their own jokes or feedback, fostering community involvement.

## 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 feature a top navigation bar, a hero section, followed by the joke display and featured jokes sections, and ending with the contact form. Each section will be distinct yet cohesive, ensuring a seamless flow of content.

## TECHNICAL REQUIREMENTS
- Framework: React with TypeScript
- Styling: Tailwind CSS
- UI Components: shadcn/ui
- State Management: Not necessary for this landing page as it will be primarily static content.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript using Create React App.
2. **Install Dependencies**: Install Tailwind CSS and shadcn/ui for styling components.
3. **Create Components**: Build individual components for the Hero Section, Joke Display, Featured Jokes, and Contact Form.
4. **Style Components**: Use Tailwind CSS classes to apply the minimalist design principles and ensure responsiveness.
5. **Implement Navigation**: Create a simple top navigation bar with links to the sections on the page.
6. **Add Jokes Data**: Either hard-code a list of jokes or set up a simple JSON file to store joke data for the display.
7. **Test Responsiveness**: Ensure that the layout works well on various screen sizes, making adjustments as necessary.
8. **Deploy**: Use a platform like Vercel or Netlify to deploy the landing page for public access.

## USER EXPERIENCE
Users will land on the page greeted by a friendly hero section with an inviting call-to-action. They can quickly browse through the jokes with a clean layout that focuses on readability. The featured jokes will capture attention, and easy sharing options will allow users to spread the humor on social media. The contact form will encourage users to contribute their own jokes, enhancing community engagement and interaction. The overall experience will be enjoyable, straightforward, and visually appealing, aligning with the minimalist design ethos.