System Requirements Document (SRD) for heroic-web

1. Introduction

The heroic-web project is a premium SaaS web platform designed to showcase an AI receptionist service built on Vapi.ai. The platform targets professionals such as dentists, barbers, salons, veterinarians, and clinics, aiming to automate their client interactions and improve operational efficiency. The website's primary goal is to convert visitors into demo users or direct leads by presenting the service in a modern, clean, and highly engaging manner.

This document outlines the functional and non-functional requirements, user personas, visual design elements, and technical specifications necessary to bring the heroic-web project to life.

2. System Overview

The heroic-web platform will serve as a landing page and informational hub for the AI receptionist service. It will feature:

• A visually stunning design inspired by premium SaaS brands like Apple, Stripe, and Linear.
• A focus on high-conversion design principles, including clear CTAs, interactive demos, and tailored content for specific industries.
• Smooth animations and 3D elements to enhance user engagement.
• A dark mode default theme with a minimalist yet futuristic aesthetic.

The platform will be optimized for responsiveness, fast loading times, and SEO, ensuring accessibility and usability across devices and search engines.

3. Functional Requirements

• As a Visitor, I should be able to view a visually engaging hero section with a headline, subheadline, and CTAs.
• As a Visitor, I should be able to explore how the AI receptionist works through a simple explanation section.
• As a Visitor, I should be able to view a grid of features with icons and descriptions.
• As a Visitor, I should be able to browse industry-specific pages with tailored content and demos.
• As a Visitor, I should be able to see the benefits of the AI receptionist service.
• As a Visitor, I should be able to view pricing packages with clear details.
• As a Visitor, I should be able to explore additional services offered by the company.
• As a Visitor, I should be able to contact the company via a form.
• As a Visitor, I should be able to interact with smooth animations and 3D visuals throughout the site.

4. User Personas

1. Dentist

• Goals: Automate appointment scheduling, reduce missed calls, and improve patient communication.
• Pain Points: High call volume, missed opportunities, and administrative burden.

2. Barber

• Goals: Streamline bookings, handle last-minute changes, and maintain customer satisfaction.
• Pain Points: Frequent rescheduling and difficulty managing peak hours.

3. Salon Owner

• Goals: Offer seamless booking experiences and reduce staff workload.
• Pain Points: Managing multiple services and staff schedules.

4. Veterinarian

• Goals: Provide 24/7 support for pet owners and manage emergency calls effectively.
• Pain Points: High demand for after-hours support and missed calls.

5. Clinic Manager

• Goals: Improve patient intake processes and ensure no call goes unanswered.
• Pain Points: Overwhelmed staff and inefficient scheduling systems.

5. Visuals Colors and Theme

Color Palette

• Background: #334d50 (Dark Green)
• Surface: #cbcaa5 (Light Beige)
• Text: #ffffff (Off-White)
• Accent: #4a4a4a (Charcoal)
• Muted: #2c2c2c (Onyx)

Font

• Primary Font: Geist (modern, clean, and professional)

Theme

• Dark mode as the default with subtle gradients and clean typography.
• Minimalist design with a focus on whitespace and clear visual hierarchy.

6. Signature Design Concept

Interactive Voice Wave Landing Page

The homepage will feature a real-time interactive voice waveform that reacts dynamically to user interactions. Here's how it will work:

• Hero Section: A 3D animation of a phone call interface will float in the center of the screen. Surrounding it, a voice waveform will pulse and shift in real-time, responding to the user's cursor movements and scroll actions.
• Micro-Interactions: Hovering over CTAs will cause the waveform to ripple outward, creating a sense of energy and responsiveness.
• Transitions: As users scroll, the waveform will subtly morph into different shapes, transitioning seamlessly into the next section.
• Color Shifts: The waveform will incorporate the accent colors (#cbcaa5 and #4a4a4a), creating a glowing effect that contrasts beautifully with the dark background.
• 3D Cards: Floating UI cards (e.g., for orders, messages) will appear as users scroll, with smooth parallax effects and subtle shadows.

This design will immediately captivate visitors, making the website feel alive and interactive while maintaining a professional and premium aesthetic.

7. Non-Functional Requirements

• Performance: The website must load in under 2 seconds on a standard broadband connection.
• Responsiveness: Fully optimized for mobile, tablet, and desktop devices.
• SEO: Structured for high search engine rankings, including metadata and schema markup.
• Accessibility: WCAG 2.1 AA compliance to ensure usability for all users.
• Scalability: Modular design to support future expansion (e.g., additional industries).

8. Tech Stack

Frontend

• React for Web
• GSAP / Framer Motion for animations

Backend

• Python with FastAPI

Database

• MySQL with Alembic for migrations

AI Tools

• GPT 5.4 for user-friendly responses
• ElevenLabs for natural voice synthesis

Orchestration

• Docker and docker-compose for local development
• Kubernetes for server-side orchestration

9. Assumptions and Constraints

• The target audience is primarily located in the Czech Republic (CZ), so the website will default to Czech language content.
• The platform will focus on dark mode as the default theme.
• The website must integrate seamlessly with Vapi.ai for real-time voice communication.

10. Glossary

• AI Receptionist: A virtual assistant that handles phone calls and client interactions using artificial intelligence.
• Vapi.ai: A platform for real-time voice communication technology.
• CTA: Call-to-Action, a button or link designed to prompt user interaction.
• WCAG: Web Content Accessibility Guidelines, standards for web accessibility.
• SEO: Search Engine Optimization, the practice of improving a website's visibility on search engines.