Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a **web application** designed as a **service page** for a cybersecurity company offering various security assessment services. The application aims to present detailed information about security services in a clean, professional manner while ensuring ease of navigation and user engagement.

## CORE FEATURES
1. **Hero Section**: 
   - A visually appealing introductory section with a brief description of the cybersecurity services offered and a strong call-to-action (CTA) button for inquiries or quotes.

2. **Service Offerings**: 
   - Detailed descriptions of various services, such as Penetration Testing, Vulnerability Assessment, Compliance Audits, and Incident Response, each with a brief overview and benefits.

3. **Pricing Table**: 
   - A structured pricing table displaying different service tiers/packages with features included in each, allowing users to easily compare options.

4. **Client Testimonials**: 
   - A section dedicated to showcasing client feedback to establish trust and credibility.

5. **FAQs Section**: 
   - A list of frequently asked questions to address common inquiries, helping users find information quickly.

6. **Contact Form**: 
   - A simple contact form for users to submit inquiries, request quotes, or ask for more information.

## 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-column layout for mobile responsiveness with sections stacked vertically. Each section should have clear headings and sufficient padding to enhance readability.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Not specifically required for this simple service page.

## IMPLEMENTATION STEPS
1. **Set Up the Project**: 
   - Initialize a new React project using Create React App with TypeScript. 
   - Install Tailwind CSS and shadcn/ui for styling.

2. **Create Component Structure**:
   - Develop components for the Hero Section, Service Offerings, Pricing Table, Testimonials, FAQs, and Contact Form.
   - Ensure each component is modular and reusable.

3. **Design the Layout**:
   - Use Tailwind CSS to style components according to the specified design guidelines.
   - Utilize flexbox and grid utilities for responsive design.

4. **Implement Navigation**:
   - Create smooth scrolling navigation links that jump to the respective sections on the page.

5. **Add Functionality to Contact Form**:
   - Implement form handling using React state management to capture user inputs.
   - Integrate a simple email notification system (e.g., using EmailJS or an API of choice).

6. **Test Responsiveness**:
   - Ensure the application looks and functions well on different devices (desktop, tablet, mobile).

7. **Deploy the Application**:
   - Use platforms like Vercel or Netlify for easy deployment of the web application.

## USER EXPERIENCE
Users will first encounter a visually compelling hero section that summarizes the services offered. They can scroll down to explore detailed descriptions of each service, view pricing information, read client testimonials, and find answers to frequently asked questions. The contact form allows for easy inquiries. The minimalist design will ensure that users remain focused on the content without distractions, while responsive layouts will provide an optimal experience across devices.