Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This web application will serve as a modernized digital showcase for Savpaq, highlighting the company and its references. The focus will be on providing a clean and user-friendly experience that emphasizes content through a minimalist design, making it easy for visitors to navigate and learn about the company’s offerings.

## CORE FEATURES
1. **Homepage**: A welcoming introduction that features a high-level overview of Savpaq, including a brief company description and key services.
2. **References Section**: A gallery-style presentation of past projects and client testimonials, allowing users to explore the company's successful collaborations.
3. **About Us Page**: Detailed information about the company’s mission, values, and team, enhancing transparency and connection with visitors.
4. **Contact Form**: A simple, accessible form for inquiries, which includes fields for name, email, message, and a dropdown for service interest.
5. **Blog Section**: An area for sharing industry insights and company news, fostering engagement and establishing expertise.
6. **Responsive Design**: A layout that adapts seamlessly across devices, ensuring accessibility and a consistent experience for all users.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist with a clean, simple design that prioritizes white space and clarity. The overall aesthetic will be modern and inviting.
- **Color Mode**: Light theme featuring dark text on light backgrounds to enhance readability and provide a fresh, open feel.
- **Layout**: A grid-based layout for the homepage and references section, with a top navigation bar that remains fixed as users scroll. Each section will be clearly delineated with ample spacing.
- **Typography**: Use of sans-serif fonts such as 'Roboto' for headings and 'Open Sans' for body text. Headings will have a larger size and bolder weight to create a clear hierarchy, while body text will maintain a comfortable reading size.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS for rapid, responsive design implementation
- **UI Components**: Utilize shadcn/ui for pre-built, customizable components that align with the minimalist aesthetic
- **State Management**: Use React Context API for managing global state if necessary

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize the React application using Create React App with TypeScript.
2. **Install Dependencies**: Add Tailwind CSS and shadcn/ui to the project.
3. **Create Layout**: Develop the main layout structure, including the top navigation bar and footer, ensuring a responsive design.
4. **Build Core Features**: Implement each core feature as a separate component:
   - Create the Homepage component with an introductory section.
   - Develop the References component using grid layout to showcase projects.
   - Design the About Us component with text and images.
   - Implement the Contact Form component with validation.
   - Set up the Blog section for future posts.
5. **Style Components**: Use Tailwind CSS classes to apply the minimalist design principles throughout the application.
6. **Test Responsiveness**: Ensure all components function properly across various devices and screen sizes.
7. **Deploy**: Utilize a hosting service such as Vercel or Netlify for deployment, ensuring the application is accessible to the public.

## USER EXPERIENCE
Users will have a straightforward journey through the application. Upon landing on the homepage, they will be greeted with a concise introduction and easy navigation options. The References section will invite exploration through visually appealing thumbnails. The About Us page will foster connection through engaging content, while the Contact Form will provide an intuitive way to reach out. Responsive design will ensure ease of use on mobile devices, enhancing the overall user experience.