Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The Genix Cyber website is a web application designed to showcase the company's cybersecurity services and expertise. The main purpose is to provide users with clear information about services, resources, and contact options, all presented in a clean and user-friendly manner.

## CORE FEATURES
1. **Service Overview**: A dedicated section highlighting various cybersecurity services offered by Genix Cyber, including detailed descriptions and benefits.
2. **Resource Center**: A repository of articles, whitepapers, and case studies that educate users on cybersecurity topics and best practices.
3. **Contact Form**: A streamlined interface for users to reach out for inquiries or consultations, featuring fields for name, email, and message.
4. **Blog Section**: An area for sharing industry news, updates, and insights, with easy navigation to read and share posts.
5. **Client Testimonials**: A section showcasing feedback from clients, enhancing credibility and trust in Genix Cyber’s services.
6. **Newsletter Signup**: An integrated form allowing users to subscribe to newsletters for updates and resources, enhancing user engagement.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist approach with a clean and simple design. Ample white space to enhance readability while ensuring a focus on typography.
- **Color Mode**: Light theme featuring a soft color palette with dark text against light backgrounds to ensure clarity and comfort for users.
- **Layout**: A top navigation bar for easy access to core sections, a hero section featuring the latest news or services, followed by distinct sections for services, resources, testimonials, and a footer with contact info and social links.
- **Typography**: Use a sans-serif font such as 'Roboto' or 'Open Sans' for headings and body text, maintaining a clear hierarchy with larger sizes for headings and consistent spacing for readability.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for building a robust and maintainable codebase.
- **Styling**: Tailwind CSS for rapid development and styling consistency, allowing for customized components while adhering to the minimalist design.
- **UI Components**: Utilize shadcn/ui for pre-designed components that align with the overall aesthetic and functionality.
- **State Management**: Implement Zustand for lightweight state management, ensuring smooth user interactions without unnecessary complexity.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript using Create React App or Vite.
2. **Install Dependencies**: Add Tailwind CSS, Zustand, and shadcn/ui to the project.
3. **Create Page Structure**: Establish a directory structure for components, pages, and assets.
4. **Implement Global Styles**: Configure Tailwind CSS for the light theme and apply global styles to ensure consistency.
5. **Build Core Features**: Develop individual components for each core feature, ensuring they are responsive and accessible.
6. **Integrate Form Handling**: Set up form management for the contact and newsletter signup forms, ensuring proper validation and submission handling.
7. **Test and Optimize**: Conduct thorough testing across devices and browsers, optimizing performance and UX.

## USER EXPERIENCE
Key user interactions include navigating through the service overview, easily accessing resources through the resource center, and submitting inquiries via the contact form. The layout is designed to guide users intuitively, with clear calls-to-action and a responsive design that adapts to various screen sizes, ensuring a seamless experience across devices. The minimalist approach fosters a distraction-free environment, allowing users to focus on the content while still feeling engaged with the site's functionality.