Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a landing page designed to mimic an old western-style newspaper featuring a "Wanted" sign with a prize of 1 million dollars. It will prominently display a list of names labeled as "the most wanted group in school," published by Mesbah Middle School. The focus is on a clean, minimalist design that effectively communicates the message while engaging viewers.

## CORE FEATURES
1. **Hero Section**: A visually striking hero section at the top featuring the "Wanted" sign and the prize amount.
2. **Name List**: A clear, easy-to-read display of the 13 names, styled prominently to attract attention.
3. **Tagline**: "The most wanted group in school" displayed in large letters beneath the wanted sign for immediate recognition.
4. **Call to Action (CTA)**: A button encouraging visitors to learn more about the publication or to share it on social media.
5. **Contact Section**: An area where visitors can reach out for more information or submit inquiries related to the publication.

## 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 main layout will consist of a full-width hero section at the top, followed by a section for the name list and the tagline, a CTA button, and a contact information section at the bottom.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: Not necessary for this project as it is a static landing page.

## IMPLEMENTATION STEPS
1. **Set Up React Environment**: Initialize a new React project with TypeScript.
2. **Install Tailwind CSS**: Set up Tailwind CSS in the project to manage styling.
3. **Component Structure**: Create components for the Hero section, Name List, Tagline, CTA button, and Contact section.
4. **Implement Styling**: Use Tailwind CSS classes to apply the minimalist design, ensuring proper spacing, typography, and colors.
5. **Add Content**: Populate the components with the relevant content (names, prize amount, tagline).
6. **Test Responsiveness**: Ensure the landing page is responsive and looks good on different screen sizes.
7. **Deploy**: Use a platform like Vercel or Netlify to deploy the landing page.

## USER EXPERIENCE
Users will be greeted by a bold and engaging hero section that captures their attention at first glance. They will easily find the list of names and understand the context of the wanted sign. The CTA button will encourage further engagement, while the contact section will provide a way to connect for additional inquiries. The minimalist design ensures that the focus remains on the content, making for a smooth user experience.