Vapi-Clone_FrontEnd

A comprehensive frontend dashboard clone for the Vapi Chatbot Management Platform, built with vanilla HTML and CSS.

---

📸 Preview

Dashboard Overview

Analytics View

---

📖 About This Project

This project is a high-fidelity frontend clone of the Vapi Chatbot Management Platform. It features a clean, professional dashboard interface designed to help users manage chatbots across various industries like Real Estate, Mortgage, and Solar. The implementation focuses on layout structure, analytics visualization, and responsive navigation based on the official Figma Design.

---

✨ Features

• 🚀 Dashboard Management - Centralized hub for managing multiple chatbots and subcategories.
• 📊 Call Analytics - Visualize metrics for booked appointments, calls made, and answered calls.
• 📂 Industry Categories - Specialized sections for Real Estate, Mortgage, Solar, Insurance, and more.
• 📝 Call Documentation - Interfaces for viewing transcriptions, summaries, and recordings.
• 🎨 Pixel Perfect Design - Faithfully implemented from Figma design specifications.
• 📱 Clean UI - Professional dashboard-style sidebar and main content area.

---

🛠️ Tech Stack

Layer	Technology
Language	HTML5
Styling	CSS3
Icons	Font Awesome 5
Design Tool	Figma

---

📋 Prerequisites

• A modern web browser (Chrome, Firefox, Edge, etc.)
• Git

---

⚙️ Getting Started

1. Clone the repository

git clone https://github.com/PramudithaN/Vapi-Clone_FrontEnd.git
cd Vapi-Clone_FrontEnd

2. Launch the application

Since this is a static project, you can simply open the Vapi.html file in your preferred browser:

# On Windows
start Vapi.html

# On macOS
open Vapi.html

---

📁 Project Structure

Vapi-Clone_FrontEnd/
├── Container/                 # Reusable HTML snippets and sub-pages
│   ├── detialContainer.html   # Detailed view components
│   └── subNav.html            # Secondary navigation layouts
├── Images/                    # Graphical assets and branding
│   └── Logo.png               # Project logo
├── horse.ogv                  # Media/Video asset
├── README.md                  # Project documentation
├── vapi.css                   # Main stylesheet containing all layout rules
└── Vapi.html                  # Main entry point and dashboard dashboard

---

🙋‍♂️ Connect with Me

• GitHub: PramudithaN
• LinkedIn: Pramuditha Nadun
• Email: pramudithanadun@gmail.com

---

Developed with ❤️ by Pramuditha Nadun.