Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project aims to create a unique landing page for a data privacy awareness survey targeting young adults. The website will feature engaging animations on every click and scroll, enhancing user interaction while focusing on educating participants about data privacy issues. 

## CORE FEATURES
1. **Hero Section**: An eye-catching introduction with a compelling call-to-action to participate in the survey.
2. **Survey Form**: An interactive form that collects responses, featuring animations that respond to user inputs.
3. **Educational Resources**: A section dedicated to providing information and resources about data privacy tailored for young adults.
4. **Animated Infographics**: Visual representations of data privacy statistics and facts that animate on scroll to engage users.
5. **Testimonials**: A section showcasing quotes or feedback from previous participants to build credibility and encourage participation.
6. **Contact/Feedback**: A form for users to leave their thoughts or ask questions, ensuring they feel heard and engaged.

## 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 vertical flow; sections will include a hero area, survey, educational resources, infographics, testimonials, and a contact form, all with smooth scrolling and animated transitions.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: React Context API or a lightweight state management solution if needed.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Create a new React project with TypeScript and install Tailwind CSS and shadcn/ui.
2. **Build Layout**: Create the main components for the Hero, Survey Form, Resources, Infographics, Testimonials, and Contact sections.
3. **Implement Routing**: Use React Router if necessary for smooth scrolling between sections.
4. **Add Animations**: Integrate CSS animations or libraries (like Framer Motion) for interactive elements to enhance the clicking and scrolling experience.
5. **Form Handling**: Set up form validation and submission for the survey using Formik or React Hook Form.
6. **Optimize for Responsiveness**: Ensure the layout is mobile-friendly and test across various devices.
7. **Deploy**: Prepare the application for deployment and choose a suitable platform like Vercel or Netlify.

## USER EXPERIENCE
The user experience will be centered on interactivity and engagement. Users will be greeted with an animated hero section that draws their attention immediately. As they scroll down, they will encounter smooth transitions that introduce them to the survey, providing a seamless flow of information. The survey form will be easy to navigate, with animations that provide feedback on their inputs. Overall, the site will prioritize clarity, engagement, and ease of use to ensure young adults feel informed and motivated to participate in the survey.