Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project aims to create a minimalist, user-friendly educational website designed for a vocational school (SMK). The website will facilitate easy navigation and showcase essential information through engaging visuals, interactive elements, and a clear content structure.

## CORE FEATURES
1. **Hero Section**: A captivating hero video that introduces the school, accompanied by a concise tagline and call-to-action buttons for easy navigation to key sections.
2. **About Us**: A dedicated section highlighting the school's mission, vision, and values, presented with clear headings and engaging imagery.
3. **Programs & Events**: A dynamic layout that displays various programs and upcoming events, utilizing cards with hover effects for interactivity and emphasis.
4. **Gallery Section**: A collage-style gallery that integrates high-quality photos and videos, serving as a visual CTA to important pages.
5. **Contact Information**: An accessible contact area with a simple form and clear details for inquiries, ensuring visitors can easily reach out for more information.
6. **Dynamic Background Effects**: Implement dynamic background effects that enhance the scrolling experience and keep users engaged as they navigate through the site.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - Clean, simple design with ample white space to create a fresh and inviting atmosphere. The layout focuses on clear content separation while enhancing readability.
- **Color Mode**: Light theme with dark text on light backgrounds to ensure readability and a modern aesthetic.
- **Layout**: A structured layout featuring a top navigation bar, hero section, followed by clearly defined sections for About, Programs & Events, Gallery, and Contact. Each section will utilize distinct card layouts for clarity.
- **Typography**: Use modern sans-serif fonts like 'Roboto' or 'Open Sans' for body text, with a bolder font for headings to establish a clear hierarchy and improve legibility.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript to ensure type safety and enhance development efficiency.
- **Styling**: Tailwind CSS for rapid and responsive styling, allowing for custom design without compromising performance.
- **UI Components**: Utilize shadcn/ui for pre-designed components that align with the minimalist aesthetic.
- **State Management**: Use React's built-in state management or consider Zustand for a lightweight solution if needed.

## IMPLEMENTATION STEPS
1. **Setup Project**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui components.
2. **Create Layout**: Build the main layout structure using React Router for navigation between sections. Implement the top navigation bar with links to each section.
3. **Implement Hero Section**: Add a hero video component with overlay text and CTA buttons. Ensure it is responsive and visually striking.
4. **Develop Content Sections**: Create individual components for the About, Programs & Events, Gallery, and Contact sections. Use Tailwind CSS for styling and layout.
5. **Dynamic Effects**: Integrate dynamic background effects in the Gallery section using CSS animations or libraries like Framer Motion for smooth transitions.
6. **Testing and Optimization**: Conduct thorough testing across devices to ensure responsive design, check for accessibility compliance, and optimize performance.

## USER EXPERIENCE
The website will provide users with a seamless browsing experience, featuring intuitive navigation and clear content segmentation. Users will be able to easily access key information through well-structured sections, engaging visuals, and interactive elements that encourage exploration. The responsive design will ensure a consistent experience across devices, enhancing user satisfaction and engagement.