Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The Snocial Club landing page will serve as a vibrant and engaging marketing site designed to showcase party packages and related services. It will allow customers to easily book parties, view a gallery of past events, and stay connected with the company's social media platforms, all while providing an ultra-premium, family-friendly experience.

## CORE FEATURES
1. **Hero Section**: An eye-catching introduction featuring a compelling tagline and a call-to-action button for booking parties.
2. **Services Overview**: A detailed section outlining the various party packages, face painting services, treats, food, drinks, and snow cones available.
3. **Gallery**: A visually appealing gallery showcasing photos from past events to highlight the quality and fun of the services offered.
4. **FAQ Section**: A user-friendly FAQ area addressing common queries to assist potential customers in making informed decisions.
5. **Social Media Integration**: Links and feeds from Facebook, Instagram, Snapchat, and TikTok to keep customers updated with the latest activities and promotions.
6. **Contact Form**: An easy-to-use contact form for customers to input their information and book parties directly through the website.

## 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, followed by content sections for services, gallery, FAQs, and social media, all structured in a single-scroll format to enhance user experience.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: Not specified; consider using React's built-in state management for simplicity.

## IMPLEMENTATION STEPS
1. **Set up the React project** using Create React App with TypeScript.
2. **Install Tailwind CSS** and configure it for global styles and responsive design.
3. **Import Inter font** from Google Fonts in the main CSS file.
4. **Create the hero section** with a background image and overlay text, including a booking button that links to the contact form.
5. **Develop the services overview section** using cards for each service with images and descriptions, ensuring each card has the specified border radius.
6. **Build the gallery section** to display images in a grid layout, utilizing Tailwind's grid utilities for responsiveness.
7. **Set up the FAQ section** with collapsible items to keep the layout clean and user-friendly.
8. **Integrate social media links** and feeds, ensuring they are visually appealing and consistent with the overall design.
9. **Implement the contact form** with appropriate fields for name, email, phone number, and party details, styled according to the design specifications.
10. **Test the website** for responsiveness and user experience across different devices.

## USER EXPERIENCE
Key user interactions include smooth scrolling through sections, intuitive navigation with clear calls to action, and a seamless booking experience via the contact form. The gallery will allow users to browse images effortlessly, while the FAQ section will provide immediate answers to common questions, enhancing overall user satisfaction. Social media integration will keep users engaged with the Snocial Club brand beyond the website.