Hugging Face's logo

Spaces:
cokarat
/
onecateringlanding
Running

App Files Community
cokarat commited on
Commit
0b6b2ca
·
verified ·
1 Parent(s): 0857b0b

Deepsite Prompt: OneCatering — The Dark-Mode Operating System for Catering High Concept: Build OneCatering, a cloud SaaS that replaces legacy catering tools with an automated, AI-powered operating system. The platform has two portals (Customer + Caterer), a Plugin Marketplace, open API docs, deep QuickBooks/Google/Zapier integrations, and voicebot automations. The entire experience is cinematic dark theme, space/universe visual language, and full-height immersive hero with a looping cosmic grid video. 🔭 Visual Direction & Theme (Dark + Futuristic) Color: Nearly-black background #0B0F14, layered panels #121824, accents in electric cyan #20E3FF, neon violet #A16BFF, success green #46E59A, warning amber #FFC857, danger rose #FF4D6D. Typography: Inter (UI), Clash Display or General Sans (headlines). Large, airy type; generous letter-spacing; 1.5–1.65 line height. Glass & Glow: Soft glassmorphism (subtle blur), micro-glows on focus/active states, depth via layered shadows. Motion: Framer-Motion style micro-interactions, parallax starfield, slow aurora waves in hero. Hover reveals, card tilt on marketplace tiles, “data streaming” lines for KPI loads. Imagery: Futuristic, cosmic—nebula gradients, orbital lines, constellation-like node graphs to suggest networks of events, staff, and automations. Video: Hero background = looping “universe grid” video (subtle), performance-optimized, <6MB, autoplay muted, with fallbacks. 🏠 Public Website (Marketing) – Pages & Sections 1) Homepage (full-height hero) Hero (100vh, dark cosmic video): H1: “OneCatering — Automate. Scale. Delight.” Sub: “The AI operating system that turns catering chaos into profit.” CTAs: Start Free Trial, See Customer Portal (modal preview). Live KPI ticker (fake but animated): Leads Qualified Today, Quotes Sent, Deposits Collected, Events Green-lit. Problem → Promise: Split panels comparing “Legacy Tools” (slow, pricey, no automation) vs OneCatering (AI workflows, instant setup, modern UX). Feature Grid (animated icons): AI Lead Qualification • Proposal & eSign • Menu Intelligence • VoiceBot Calls • Calendar & Shifts • BEO/Packout • QuickBooks Sync • Plugin Marketplace. Flow Cinematic (scroll-told): Website Plugin captures lead → AI Menu Draft + cost/margin calc → VoiceBot confirms details → Proposal & Deposit Link sent → Payment success → Calendar cell turns green → Kitchen receives BEO, Coordinator gets packout list → Customer portal shows timeline, chat, invoices. Social Proof: Logo strip; Owner Review (your storyline): “I rolled up multiple locations with zero time to retrain. OneCatering qualified leads, finalized menus, auto-booked events, and collected deposits. Then a plugin asked a few questions and built a fully SEO-optimized website connected to my portal—in one week. I needed fewer people. The future is here.” Screens Carousel (click-to-zoom): Customer Portal, Reports, Marketplace, Calendar, BEO, Packout, API docs. Pricing (cards): Starter, Growth, Multi-Location (includes plugins, voice minutes, seats). Footer: Docs, API, Status, Security, Compliance, Contact. 2) Product Pages Customer Portal (detail page) – see below. Caterer Portal (detail page) – see below. Plugin Marketplace (detail page) – see below. AI Voice & Automation (detail page) – call flows, usage pricing, compliance notes. Integrations – QuickBooks, Google Calendar, Zapier, Webhooks, SSO (Okta/Google). 3) Docs & API API reference (OpenAPI schema), Guides (webhooks, auth, plugins), SDKs (JS/TS), examples. 👤 Customer Portal (Full Feature Spec) Purpose: Give clients a single place to see event details, invoices, timeline, make changes, chat, and pay. Top-level navigation: Overview, Events, Invoices, Timeline, Files, Chat, Support. Dashboard (cards): Upcoming Event tile with date/time, venue, guest count, progress bar (Requirements, Menu, Payments). Invoices: outstanding vs paid; Pay Now CTA. Timeline: human-readable milestones (Approval, Deposit, Final Headcount, Load-in, Service, Tear-down). Messages: chat thread with coordinator; attachments. Change Requests: structured form (add/remove items, headcount adjustments, special notes). Files: proposal PDF, contract, BEO snapshots, floor plan. Notifications: payment receipts, change approvals, ETA reminders. UI details: Dark cards with subtle halos, status chips (Draft, Sent, Paid, Green-lit). Invoice view with line items, taxes, tips, surcharges; stored payment method; receipts. Timeline nodes with icons and tooltips; click to open micro-FAQ or chat. Accessibility: 4.5:1 text contrast, focus rings, keyboard nav. ⚙️ Caterer Portal (Operations “Mission Control”) Purpose: The back-office cockpit where the magic happens. Navigation: Leads, Events, Calendar, Menu, Staff, BEO, Packout, Invoices, Reports, Automations, Plugins, Settings. Key Screens: Leads (Kanban): New → Qualified → Proposal → Sent → Deposit → Green-lit. AI tags (wedding/corporate/school), expected budget, probability, auto-email & call attempts. Event Detail: left sidebar summary; tabs for Overview / Menu / Financials / Timeline / Files / Tasks / Messages. Menu Builder: drag-drop items, dietary filters, cost & margin calculator, per-guest pricing. Financials: estimate → proposal → invoice; deposits & schedule. Calendar: month/week/day with color codes: Green: Confirmed (paid), Yellow: Pending, Red: Conflict, Blue: Internal. Hover to preview; drag to reschedule; resource lanes (rooms, trucks, teams). Staff & Shifts: skills, certifications, availability; AI shift suggestions; SMS/email confirmations; no-show risk flagging. BEO Generator: per-event printable with items, counts, timing, equipment, notes; multi-language; versioning. Packout: dynamic checklist by menu, equipment, disposables; barcode support; mark loaded/returned. Invoices: QuickBooks sync, payment status, dunning automations. Reports: revenue, margin by event/type/menu, labor vs sales, on-time %, lead-to-win rate, plugin ROI. Automations: visual flow builder (triggers → conditions → actions). Plugins: browse/install, manage keys, configure per site. Settings: branding, taxes/fees, deposit rules, email/SMS templates, roles/permissions, locations. 🧩 Plugin Marketplace (App Store) Home: curated collections (Top Automations, Finance, Websites, AI Add-ons). Cards: icon, short pitch, rating, price (free/freemium/paid), badges (Official, Verified). Detail Page: screenshots, demo video, scopes/permissions, changelog, setup wizard, support link. Examples to include: QuickBooks Sync (AR/AP, item mapping). Google Calendar (bi-directional). Zapier (webhooks + actions). AI Website Builder (answers a few questions → generates SEO site + lead form wired to OneCatering). VoiceBot (lead intake, event confirmations, payment reminders). Kitchen Display (BEO live screens). Install Flow: 1-click install → OAuth/keys → test → enable per location. 🤖 Signature End-to-End Automation (Show this as a scrollytelling section) Scenario: “Lead to Green in One Week” Website Plugin injects a lead form on the caterer’s site; submits JSON to OneCatering. AI Lead Triage (NLP) infers event type, headcount, budget band → assigns probability & next step. AI Menu Draft auto-builds a popular menu for that event profile, calculates food cost & margin. VoiceBot Call confirms key details, records updates, and answers FAQs. Proposal + Deposit Link auto-sent; customer clicks to pay → success. Calendar cell flips green; notifications fan out: Kitchen receives BEO (final counts, timing). Coordinator receives Packout List. Staffing sees shifts created; SMS confirmations sent. Customer Portal updates timeline + receipt. Show this section visually with a horizontal stepper, animated status ticks, and real UI mock frames. 📈 Reports (must be beautiful & useful) Executive Overview: Revenue, GM%, Avg Margin per Event, Lead→Win, Deposit Lag, Top Menus. Operations: On-time %, Prep Load by Week, Labor vs Sales, Waste %, Packout Accuracy. Sales: Pipeline by stage, Win reasons, Price sensitivity, Seasonality. Finance: AR Aging, Deposits schedule, Refunds, Plugin cost vs ROI. Filters for location, event type, time; export to CSV/PDF. 🔐 Roles, Permissions, Multi-Location Roles: Owner, Manager, Coordinator, Kitchen, Staff, Accountant, Client. RLS: users only see their assigned locations; cross-location dashboards for owners only. SSO (Google/Okta); 2FA; audit log on sensitive actions. 🔌 Integrations & API QuickBooks (2-way): customers, items, invoices, payments. Google Calendar (2-way): event blocks + reminders. Zapier: triggers (LeadCreated, ProposalSent, DepositPaid, EventGreenlit); actions (CreateInvoice, SendMessage). Payments: Stripe/Adyen, saved methods, smart dunning. Open API: POST /leads (create) POST /events (create/update) POST /invoices/:id/pay GET /events/:id/beo (PDF) POST /plugins/install Webhooks: lead.created, proposal.sent, payment.succeeded, event.confirmed, beo.published. Example Request (Lead): POST /api/v1/leads { "name": "Ava Carter", "email": "ava@brand.com", "phone": "+1-206-555-0101", "event": { "date": "2025-09-18", "type": "Corporate Lunch", "guests": 120, "budget": 3800 }, "notes": "Buffet preferred, vegan options." } Webhook (Payment Succeeded): { "type": "payment.succeeded", "data": { "eventId": "EVT-9132", "invoiceId": "INV-4551", "amount": 1500, "currency": "USD", "method": "card", "status": "paid", "timestamp": "2025-08-14T10:12:45Z" } } 🗂 Data Model (concise) Account(id, name, contacts[], default_terms) Lead(id, source, fields, ai_score, status) Event(id, accountId, date/time, location, type, guests, status, color, timeline[]) Menu(id, items[], dietary, priceModel, cost, margin) Invoice(id, eventId, lines[], tax, tip, total, balance, status) Payment(id, invoiceId, amount, method, status) BEO(id, eventId, pdfUrl, version) Packout(id, eventId, items[], status) Staff/Shift(id, eventId, role, start, end, assignedTo) Plugin(id, name, scopes, config) Audit(id, userId, action, entity, before/after, timestamp) 🧪 AI Features (deterministic outputs) Lead Triage: entity extraction (date, headcount, location, budget), classify event type. Menu Intelligence: template library by event type + seasonal; cost engine; margin optimizer. VoiceBot: scripted confirmation call; fallback to SMS/email; logs transcript to event. Assistant Copilot: “What’s the margin if we switch to vegan sides?” → instant recompute. 🛠 Design System (components) Buttons (solid/ghost), Inputs, Selects w/ search, Date-time pickers, Tabs, Accordions, Badges, Chips, Toasts, Empty-states, Skeleton loaders, Data tables (sticky headers, column toggle), Cards with hover-glow, Stepper, Progress bars, Avatars/Stacks, Code blocks (for API docs), Markdown renderer. 🧰 Performance & Accessibility Next-gen images, lazy video, code-split routes, prefetch critical data. Keyboard nav, ARIA roles, color-contrast, reduced motion toggle. Offline caching for critical BEO/packout pages (PWA hint). 🚀 Deployment & States Loading, Error, Empty states for all pages. 404/500 screens in the cosmic style. Staging and Production environment banners. 📸 Must-Have Screen Mockups (export all) Homepage hero (full-height with cosmic video). Customer Portal dashboard (invoices, timeline, chat). Reports overview (cards + chart grid). Plugin Marketplace listing + plugin detail. Calendar with a green confirmed event. Event → BEO printable preview. Packout checklist. Automations flow editor (lead→menu→call→proposal→deposit→green→notifications). API Docs (reference + try-it). ✍️ Copy Hints (tone) Confident, clear, future-forward. Short headlines; one-line benefit subheads. Replace jargon with outcomes: “Book faster. Staff smarter. Earn more.” Deliver all pages fully wired as static mocks with realistic placeholder data and interactions (modals, toasts, hovers, loading skeletons). Keep the entire experience in a modern, dark, cosmic aesthetic with subtle motion. End of prompt. - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +897 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Onecateringlanding
3
- emoji: 👀
4
- colorFrom: blue
5
  colorTo: pink
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: onecateringlanding
3
+ emoji: 🐳
4
+ colorFrom: pink
5
  colorTo: pink
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,897 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>OneCatering — The AI Operating System for Catering</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://rsms.me/inter/inter.css">
9
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Clash+Display:wght@400;500;600;700&display=swap');
11
+
12
+ body {
13
+ background-color: #0B0F14;
14
+ color: #FFFFFF;
15
+ font-family: 'Inter', sans-serif;
16
+ }
17
+
18
+ .hero-video {
19
+ position: absolute;
20
+ top: 0;
21
+ left: 0;
22
+ width: 100%;
23
+ height: 100%;
24
+ object-fit: cover;
25
+ z-index: -1;
26
+ opacity: 0.3;
27
+ }
28
+
29
+ .glass-card {
30
+ background: rgba(18, 24, 36, 0.7);
31
+ backdrop-filter: blur(10px);
32
+ -webkit-backdrop-filter: blur(10px);
33
+ border: 1px solid rgba(255, 255, 255, 0.1);
34
+ }
35
+
36
+ .hover-glow:hover {
37
+ box-shadow: 0 0 15px rgba(32, 227, 255, 0.5);
38
+ }
39
+
40
+ .feature-card:hover {
41
+ transform: translateY(-5px);
42
+ transition: all 0.3s ease;
43
+ }
44
+
45
+ .status-chip {
46
+ padding: 0.25rem 0.5rem;
47
+ border-radius: 9999px;
48
+ font-size: 0.75rem;
49
+ font-weight: 600;
50
+ }
51
+
52
+ .timeline-node {
53
+ width: 12px;
54
+ height: 12px;
55
+ border-radius: 50%;
56
+ position: relative;
57
+ }
58
+
59
+ .timeline-node::after {
60
+ content: '';
61
+ position: absolute;
62
+ top: 50%;
63
+ left: 50%;
64
+ transform: translate(-50%, -50%);
65
+ width: 20px;
66
+ height: 20px;
67
+ border-radius: 50%;
68
+ opacity: 0.3;
69
+ }
70
+
71
+ .active-node {
72
+ background-color: #46E59A;
73
+ }
74
+
75
+ .active-node::after {
76
+ background-color: #46E59A;
77
+ }
78
+
79
+ .pending-node {
80
+ background-color: #FFC857;
81
+ }
82
+
83
+ .pending-node::after {
84
+ background-color: #FFC857;
85
+ }
86
+
87
+ .future-node {
88
+ background-color: #A16BFF;
89
+ }
90
+
91
+ .future-node::after {
92
+ background-color: #A16BFF;
93
+ }
94
+
95
+ @keyframes pulse {
96
+ 0% { opacity: 0.6; }
97
+ 50% { opacity: 1; }
98
+ 100% { opacity: 0.6; }
99
+ }
100
+
101
+ .pulse {
102
+ animation: pulse 2s infinite;
103
+ }
104
+
105
+ .kpi-ticker {
106
+ overflow: hidden;
107
+ white-space: nowrap;
108
+ }
109
+
110
+ .kpi-item {
111
+ display: inline-block;
112
+ padding-right: 2rem;
113
+ animation: ticker 20s linear infinite;
114
+ }
115
+
116
+ @keyframes ticker {
117
+ 0% { transform: translateX(0); }
118
+ 100% { transform: translateX(-100%); }
119
+ }
120
+
121
+ .plugin-card:hover {
122
+ transform: perspective(1000px) rotateX(5deg) rotateY(-5deg);
123
+ transition: all 0.3s ease;
124
+ }
125
+ </style>
126
+ </head>
127
+ <body class="min-h-screen">
128
+ <!-- Navigation -->
129
+ <nav class="bg-[#121824] border-b border-[#1E293B] py-4 px-6 sticky top-0 z-50">
130
+ <div class="max-w-7xl mx-auto flex justify-between items-center">
131
+ <div class="flex items-center space-x-2">
132
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#20E3FF" class="w-8 h-8">
133
+ <path fill-rule="evenodd" d="M9.315 7.584C12.195 3.883 16.695 1.5 21.75 1.5a.75.75 0 01.75.75c0 5.056-2.383 9.555-6.084 12.436A6.75 6.75 0 019.75 22.5a.75.75 0 01-.75-.75v-4.131A15.838 15.838 0 016.382 15H2.25a.75.75 0 01-.75-.75 6.75 6.75 0 017.815-6.666zM15 6.75a2.25 2.25 0 100 4.5 2.25 2.25 0 000-4.5z" clip-rule="evenodd" />
134
+ <path d="M5.26 17.242a.75.75 0 10-.897-1.203 5.243 5.243 0 00-2.05 5.022.75.75 0 00.625.627 5.243 5.243 0 005.022-2.051.75.75 0 10-1.202-.897 3.744 3.744 0 01-3.008 1.51c0-1.23.592-2.323 1.51-3.008z" />
135
+ </svg>
136
+ <span class="text-2xl font-bold" style="font-family: 'Clash Display', sans-serif;">OneCatering</span>
137
+ </div>
138
+ <div class="hidden md:flex items-center space-x-8">
139
+ <a href="#features" class="text-gray-300 hover:text-white transition">Features</a>
140
+ <a href="#solutions" class="text-gray-300 hover:text-white transition">Solutions</a>
141
+ <a href="#pricing" class="text-gray-300 hover:text-white transition">Pricing</a>
142
+ <a href="#marketplace" class="text-gray-300 hover:text-white transition">Marketplace</a>
143
+ <a href="#docs" class="text-gray-300 hover:text-white transition">Docs</a>
144
+ </div>
145
+ <div class="flex items-center space-x-4">
146
+ <a href="#" class="px-4 py-2 rounded-md border border-[#20E3FF] text-[#20E3FF] hover:bg-[#20E3FF] hover:bg-opacity-10 transition">Login</a>
147
+ <a href="#" class="px-4 py-2 rounded-md bg-gradient-to-r from-[#20E3FF] to-[#A16BFF] text-white hover:opacity-90 transition">Start Free Trial</a>
148
+ </div>
149
+ <button class="md:hidden text-gray-300">
150
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
151
+ <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
152
+ </svg>
153
+ </button>
154
+ </div>
155
+ </nav>
156
+
157
+ <!-- Hero Section -->
158
+ <section class="relative h-screen flex items-center justify-center overflow-hidden">
159
+ <video autoplay muted loop class="hero-video">
160
+ <source src="https://assets.mixkit.co/videos/preview/mixkit-stars-in-space-1610-large.mp4" type="video/mp4">
161
+ </video>
162
+ <div class="absolute inset-0 bg-gradient-to-b from-[#0B0F14]/0 via-[#0B0F14]/70 to-[#0B0F14]"></div>
163
+ <div class="max-w-7xl mx-auto px-6 z-10 text-center">
164
+ <h1 class="text-5xl md:text-7xl font-bold mb-6" style="font-family: 'Clash Display', sans-serif;">
165
+ <span class="bg-clip-text text-transparent bg-gradient-to-r from-[#20E3FF] to-[#A16BFF]">OneCatering</span>
166
+ <br>Automate. Scale. Delight.
167
+ </h1>
168
+ <p class="text-xl md:text-2xl text-gray-300 max-w-3xl mx-auto mb-10">
169
+ The AI operating system that turns catering chaos into profit.
170
+ </p>
171
+ <div class="flex flex-col sm:flex-row justify-center gap-4 mb-16">
172
+ <a href="#" class="px-8 py-4 rounded-lg bg-gradient-to-r from-[#20E3FF] to-[#A16BFF] text-white font-semibold hover:opacity-90 transition transform hover:scale-105">
173
+ Start Free Trial
174
+ </a>
175
+ <a href="#" class="px-8 py-4 rounded-lg border border-[#20E3FF] text-[#20E3FF] font-semibold hover:bg-[#20E3FF] hover:bg-opacity-10 transition transform hover:scale-105">
176
+ See Customer Portal
177
+ </a>
178
+ </div>
179
+
180
+ <!-- KPI Ticker -->
181
+ <div class="bg-[#121824] rounded-lg p-4 max-w-4xl mx-auto glass-card">
182
+ <div class="kpi-ticker">
183
+ <div class="kpi-item inline-flex items-center">
184
+ <span class="text-[#20E3FF] font-bold text-lg mr-2">1,247</span>
185
+ <span>Leads Qualified Today</span>
186
+ </div>
187
+ <div class="kpi-item inline-flex items-center">
188
+ <span class="text-[#A16BFF] font-bold text-lg mr-2">892</span>
189
+ <span>Quotes Sent</span>
190
+ </div>
191
+ <div class="kpi-item inline-flex items-center">
192
+ <span class="text-[#46E59A] font-bold text-lg mr-2">$184,320</span>
193
+ <span>Deposits Collected</span>
194
+ </div>
195
+ <div class="kpi-item inline-flex items-center">
196
+ <span class="text-[#FFC857] font-bold text-lg mr-2">317</span>
197
+ <span>Events Green-lit</span>
198
+ </div>
199
+ </div>
200
+ </div>
201
+ </div>
202
+ </section>
203
+
204
+ <!-- Legacy vs Modern Section -->
205
+ <section id="solutions" class="py-20 px-6 bg-[#121824]">
206
+ <div class="max-w-7xl mx-auto">
207
+ <h2 class="text-3xl md:text-4xl font-bold text-center mb-16" style="font-family: 'Clash Display', sans-serif;">
208
+ From Chaos to Control
209
+ </h2>
210
+
211
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
212
+ <!-- Legacy Tools -->
213
+ <div class="glass-card rounded-xl p-8 border border-[#FF4D6D]/30 hover-glow">
214
+ <div class="flex items-center mb-6">
215
+ <div class="w-12 h-12 rounded-full bg-[#FF4D6D]/10 flex items-center justify-center mr-4">
216
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#FF4D6D" class="w-6 h-6">
217
+ <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
218
+ </svg>
219
+ </div>
220
+ <h3 class="text-2xl font-bold">Legacy Tools</h3>
221
+ </div>
222
+ <ul class="space-y-4 text-gray-300">
223
+ <li class="flex items-start">
224
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#FF4D6D" class="w-5 h-5 mt-0.5 mr-2 flex-shrink-0">
225
+ <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
226
+ </svg>
227
+ <span>Manual data entry across 5+ disconnected systems</span>
228
+ </li>
229
+ <li class="flex items-start">
230
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#FF4D6D" class="w-5 h-5 mt-0.5 mr-2 flex-shrink-0">
231
+ <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
232
+ </svg>
233
+ <span>No automation for lead qualification or follow-ups</span>
234
+ </li>
235
+ <li class="flex items-start">
236
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#FF4D6D" class="w-5 h-5 mt-0.5 mr-2 flex-shrink-0">
237
+ <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
238
+ </svg>
239
+ <span>Paper-based BEOs and packout lists</span>
240
+ </li>
241
+ <li class="flex items-start">
242
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#FF4D6D" class="w-5 h-5 mt-0.5 mr-2 flex-shrink-0">
243
+ <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
244
+ </svg>
245
+ <span>Missed deadlines and last-minute scrambles</span>
246
+ </li>
247
+ <li class="flex items-start">
248
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#FF4D6D" class="w-5 h-5 mt-0.5 mr-2 flex-shrink-0">
249
+ <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
250
+ </svg>
251
+ <span>No real-time visibility into operations</span>
252
+ </li>
253
+ </ul>
254
+ </div>
255
+
256
+ <!-- OneCatering -->
257
+ <div class="glass-card rounded-xl p-8 border border-[#46E59A]/30 hover-glow">
258
+ <div class="flex items-center mb-6">
259
+ <div class="w-12 h-12 rounded-full bg-[#46E59A]/10 flex items-center justify-center mr-4">
260
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#46E59A" class="w-6 h-6">
261
+ <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
262
+ </svg>
263
+ </div>
264
+ <h3 class="text-2xl font-bold">OneCatering</h3>
265
+ </div>
266
+ <ul class="space-y-4 text-gray-300">
267
+ <li class="flex items-start">
268
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#46E59A" class="w-5 h-5 mt-0.5 mr-2 flex-shrink-0">
269
+ <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
270
+ </svg>
271
+ <span>AI-powered workflows from lead to event execution</span>
272
+ </li>
273
+ <li class="flex items-start">
274
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#46E59A" class="w-5 h-5 mt-0.5 mr-2 flex-shrink-0">
275
+ <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
276
+ </svg>
277
+ <span>VoiceBot automates confirmation calls & reminders</span>
278
+ </li>
279
+ <li class="flex items-start">
280
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#46E59A" class="w-5 h-5 mt-0.5 mr-2 flex-shrink-0">
281
+ <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
282
+ </svg>
283
+ <span>Real-time dashboards for every role in your business</span>
284
+ </li>
285
+ <li class="flex items-start">
286
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#46E59A" class="w-5 h-5 mt-0.5 mr-2 flex-shrink-0">
287
+ <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
288
+ </svg>
289
+ <span>Automated BEOs, packout lists, and staff assignments</span>
290
+ </li>
291
+ <li class="flex items-start">
292
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#46E59A" class="w-5 h-5 mt-0.5 mr-2 flex-shrink-0">
293
+ <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
294
+ </svg>
295
+ <span>Seamless QuickBooks sync and financial reporting</span>
296
+ </li>
297
+ </ul>
298
+ </div>
299
+ </div>
300
+ </div>
301
+ </section>
302
+
303
+ <!-- Features Grid -->
304
+ <section id="features" class="py-20 px-6 bg-[#0B0F14]">
305
+ <div class="max-w-7xl mx-auto">
306
+ <h2 class="text-3xl md:text-4xl font-bold text-center mb-4" style="font-family: 'Clash Display', sans-serif;">
307
+ The Complete Catering OS
308
+ </h2>
309
+ <p class="text-xl text-gray-400 text-center mb-16 max-w-3xl mx-auto">
310
+ Everything you need to run a modern catering business in one seamless platform
311
+ </p>
312
+
313
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
314
+ <!-- Feature 1 -->
315
+ <div class="glass-card rounded-xl p-6 feature-card hover-glow">
316
+ <div class="w-12 h-12 rounded-full bg-[#20E3FF]/10 flex items-center justify-center mb-4">
317
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#20E3FF" class="w-6 h-6">
318
+ <path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 00-2.456 2.456zM16.894 20.567L16.5 21.5l-.394-.933a2.25 2.25 0 00-1.423-1.423L13.5 18.5l.933-.394a2.25 2.25 0 001.423-1.423l.394-.933.394.933a2.25 2.25 0 001.423 1.423l.933.394-.933.394a2.25 2.25 0 00-1.423 1.423z" />
319
+ </svg>
320
+ </div>
321
+ <h3 class="text-xl font-bold mb-2">AI Lead Qualification</h3>
322
+ <p class="text-gray-400">Automatically score and prioritize leads based on event type, budget, and probability to book.</p>
323
+ </div>
324
+
325
+ <!-- Feature 2 -->
326
+ <div class="glass-card rounded-xl p-6 feature-card hover-glow">
327
+ <div class="w-12 h-12 rounded-full bg-[#A16BFF]/10 flex items-center justify-center mb-4">
328
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#A16BFF" class="w-6 h-6">
329
+ <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
330
+ </svg>
331
+ </div>
332
+ <h3 class="text-xl font-bold mb-2">Proposal & eSign</h3>
333
+ <p class="text-gray-400">Generate beautiful proposals with one click and get legally binding eSignatures in minutes.</p>
334
+ </div>
335
+
336
+ <!-- Feature 3 -->
337
+ <div class="glass-card rounded-xl p-6 feature-card hover-glow">
338
+ <div class="w-12 h-12 rounded-full bg-[#46E59A]/10 flex items-center justify-center mb-4">
339
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#46E59A" class="w-6 h-6">
340
+ <path stroke-linecap="round" stroke-linejoin="round" d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 002.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 00-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75 2.25 2.25 0 00-.1-.664m-5.8 0A2.251 2.251 0 0113.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25zM6.75 12h.008v.008H6.75V12zm0 3h.008v.008H6.75V15zm0 3h.008v.008H6.75V18z" />
341
+ </svg>
342
+ </div>
343
+ <h3 class="text-xl font-bold mb-2">Menu Intelligence</h3>
344
+ <p class="text-gray-400">AI suggests perfect menus based on event type, seasonality, and your most profitable items.</p>
345
+ </div>
346
+
347
+ <!-- Feature 4 -->
348
+ <div class="glass-card rounded-xl p-6 feature-card hover-glow">
349
+ <div class="w-12 h-12 rounded-full bg-[#FFC857]/10 flex items-center justify-center mb-4">
350
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#FFC857" class="w-6 h-6">
351
+ <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 002.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 01-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 00-1.091-.852H4.5A2.25 2.25 0 002.25 4.5v2.25z" />
352
+ </svg>
353
+ </div>
354
+ <h3 class="text-xl font-bold mb-2">VoiceBot Calls</h3>
355
+ <p class="text-gray-400">Automated calls confirm details, answer FAQs, and collect payments—saving hours each week.</p>
356
+ </div>
357
+
358
+ <!-- Feature 5 -->
359
+ <div class="glass-card rounded-xl p-6 feature-card hover-glow">
360
+ <div class="w-12 h-12 rounded-full bg-[#20E3FF]/10 flex items-center justify-center mb-4">
361
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#20E3FF" class="w-6 h-6">
362
+ <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5" />
363
+ </svg>
364
+ </div>
365
+ <h3 class="text-xl font-bold mb-2">Calendar & Shifts</h3>
366
+ <p class="text-gray-400">Color-coded calendar with drag-and-drop scheduling and automated staff notifications.</p>
367
+ </div>
368
+
369
+ <!-- Feature 6 -->
370
+ <div class="glass-card rounded-xl p-6 feature-card hover-glow">
371
+ <div class="w-12 h-12 rounded-full bg-[#A16BFF]/10 flex items-center justify-center mb-4">
372
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#A16BFF" class="w-6 h-6">
373
+ <path stroke-linecap="round" stroke-linejoin="round" d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 002.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 00-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75 2.25 2.25 0 00-.1-.664m-5.8 0A2.251 2.251 0 0113.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25zM6.75 12h.008v.008H6.75V12zm0 3h.008v.008H6.75V15zm0 3h.008v.008H6.75V18z" />
374
+ </svg>
375
+ </div>
376
+ <h3 class="text-xl font-bold mb-2">BEO/Packout</h3>
377
+ <p class="text-gray-400">Automatically generate Banquet Event Orders and packout lists that update in real-time.</p>
378
+ </div>
379
+
380
+ <!-- Feature 7 -->
381
+ <div class="glass-card rounded-xl p-6 feature-card hover-glow">
382
+ <div class="w-12 h-12 rounded-full bg-[#46E59A]/10 flex items-center justify-center mb-4">
383
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#46E59A" class="w-6 h-6">
384
+ <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v12m-3-2.818l.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182C13.536 12.219 12.768 12 12 12c-.725 0-1.45-.22-2.003-.659-1.106-.879-1.106-2.303 0-3.182s2.9-.879 4.006 0l.415.33M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
385
+ </svg>
386
+ </div>
387
+ <h3 class="text-xl font-bold mb-2">QuickBooks Sync</h3>
388
+ <p class="text-gray-400">Bidirectional sync with QuickBooks for seamless accounting and financial reporting.</p>
389
+ </div>
390
+
391
+ <!-- Feature 8 -->
392
+ <div class="glass-card rounded-xl p-6 feature-card hover-glow">
393
+ <div class="w-12 h-12 rounded-full bg-[#FFC857]/10 flex items-center justify-center mb-4">
394
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="#FFC857" class="w-6 h-6">
395
+ <path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 00-6.364-6.364l-4.5 4.5a4.5 4.5 0 001.242 7.244" />
396
+ </svg>
397
+ </div>
398
+ <h3 class="text-xl font-bold mb-2">Plugin Marketplace</h3>
399
+ <p class="text-gray-400">Extend functionality with plugins for websites, payments, kitchen displays, and more.</p>
400
+ </div>
401
+ </div>
402
+ </div>
403
+ </section>
404
+
405
+ <!-- Flow Cinematic -->
406
+ <section class="py-20 px-6 bg-[#121824]">
407
+ <div class="max-w-7xl mx-auto">
408
+ <h2 class="text-3xl md:text-4xl font-bold text-center mb-4" style="font-family: 'Clash Display', sans-serif;">
409
+ From Lead to Event in One Week
410
+ </h2>
411
+ <p class="text-xl text-gray-400 text-center mb-16 max-w-3xl mx-auto">
412
+ See how OneCatering automates your entire workflow
413
+ </p>
414
+
415
+ <div class="relative">
416
+ <!-- Timeline -->
417
+ <div class="hidden md:flex justify-between items-center mb-16">
418
+ <div class="flex flex-col items-center text-center w-1/6">
419
+ <div class="w-6 h-6 rounded-full bg-[#20E3FF] mb-2"></div>
420
+ <span class="text-sm font-medium">1. Lead Capture</span>
421
+ </div>
422
+ <div class="h-1 flex-1 bg-gradient-to-r from-[#20E3FF] to-[#A16BFF]"></div>
423
+ <div class="flex flex-col items-center text-center w-1/6">
424
+ <div class="w-6 h-6 rounded-full bg-[#A16BFF] mb-2"></div>
425
+ <span class="text-sm font-medium">2. AI Menu Draft</span>
426
+ </div>
427
+ <div class="h-1 flex-1 bg-gradient-to-r from-[#A16BFF] to-[#46E59A]"></div>
428
+ <div class="flex flex-col items-center text-center w-1/6">
429
+ <div class="w-6 h-6 rounded-full bg-[#46E59A] mb-2"></div>
430
+ <span class="text-sm font-medium">3. VoiceBot Call</span>
431
+ </div>
432
+ <div class="h-1 flex-1 bg-gradient-to-r from-[#46E59A] to-[#FFC857]"></div>
433
+ <div class="flex flex-col items-center text-center w-1/6">
434
+ <div class="w-6 h-6 rounded-full bg-[#FFC857] mb-2"></div>
435
+ <span class="text-sm font-medium">4. Proposal Sent</span>
436
+ </div>
437
+ <div class="h-1 flex-1 bg-gradient-to-r from-[#FFC857] to-[#FF4D6D]"></div>
438
+ <div class="flex flex-col items-center text-center w-1/6">
439
+ <div class="w-6 h-6 rounded-full bg-[#FF4D6D] mb-2"></div>
440
+ <span class="text-sm font-medium">5. Deposit Paid</span>
441
+ </div>
442
+ </div>
443
+
444
+ <!-- Mobile Timeline -->
445
+ <div class="md:hidden mb-12">
446
+ <div class="flex flex-col space-y-8">
447
+ <div class="flex items-start">
448
+ <div class="w-6 h-6 rounded-full bg-[#20E3FF] mt-1 mr-4 flex-shrink-0"></div>
449
+ <div>
450
+ <h4 class="font-medium mb-1">1. Lead Capture</h4>
451
+ <p class="text-gray-400 text-sm">Website plugin captures lead details</p>
452
+ </div>
453
+ </div>
454
+ <div class="flex items-start">
455
+ <div class="w-6 h-6 rounded-full bg-[#A16BFF] mt-1 mr-4 flex-shrink-0"></div>
456
+ <div>
457
+ <h4 class="font-medium mb-1">2. AI Menu Draft</h4>
458
+ <p class="text-gray-400 text-sm">AI suggests menu based on event type</p>
459
+ </div>
460
+ </div>
461
+ <div class="flex items-start">
462
+ <div class="w-6 h-6 rounded-full bg-[#46E59A] mt-1 mr-4 flex-shrink-0"></div>
463
+ <div>
464
+ <h4 class="font-medium mb-1">3. VoiceBot Call</h4>
465
+ <p class="text-gray-400 text-sm">Automated call confirms details</p>
466
+ </div>
467
+ </div>
468
+ <div class="flex items-start">
469
+ <div class="w-6 h-6 rounded-full bg-[#FFC857] mt-1 mr-4 flex-shrink-0"></div>
470
+ <div>
471
+ <h4 class="font-medium mb-1">4. Proposal Sent</h4>
472
+ <p class="text-gray-400 text-sm">eSign proposal with deposit link</p>
473
+ </div>
474
+ </div>
475
+ <div class="flex items-start">
476
+ <div class="w-6 h-6 rounded-full bg-[#FF4D6D] mt-1 mr-4 flex-shrink-0"></div>
477
+ <div>
478
+ <h4 class="font-medium mb-1">5. Deposit Paid</h4>
479
+ <p class="text-gray-400 text-sm">Calendar updates, notifications sent</p>
480
+ </div>
481
+ </div>
482
+ </div>
483
+ </div>
484
+
485
+ <!-- Flow Visualization -->
486
+ <div class="glass-card rounded-xl p-8">
487
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
488
+ <!-- Lead Capture -->
489
+ <div class="bg-[#121824] rounded-lg p-6 border border-[#20E3FF]/30">
490
+ <div class="flex items-center mb-4">
491
+ <div class="w-8 h-8 rounded-full bg-[#20E3FF]/10 flex items-center justify-center mr-3">
492
+ <span class="text-[#20E3FF] font-bold">1</span>
493
+ </div>
494
+ <h4 class="font-bold">Lead Capture</h4>
495
+ </div>
496
+ <div class="bg-[#0B0F14] rounded p-4 mb-4">
497
+ <div class="flex items-center mb-3">
498
+ <div class="w-3 h-3 rounded-full bg-[#20E3FF] mr-2"></div>
499
+ <span class="text-sm">New Lead: Corporate Lunch</span>
500
+ </div>
501
+ <div class="text-sm text-gray-400 space-y-2">
502
+ <p><span class="text-gray-300">Name:</span> Ava Carter</p>
503
+ <p><span class="text-gray-300">Date:</span> Sep 18, 2025</p>
504
+ <p><span class="text-gray-300">Guests:</span> 120</p>
505
+ <p><span class="text-gray-300">Budget:</span> $3,800</p>
506
+ </div>
507
+ </div>
508
+ <p class="text-sm text-gray-400">Website plugin captures lead details and sends to OneCatering</p>
509
+ </div>
510
+
511
+ <!-- AI Menu Draft -->
512
+ <div class="bg-[#121824] rounded-lg p-6 border border-[#A16BFF]/30">
513
+ <div class="flex items-center mb-4">
514
+ <div class="w-8 h-8 rounded-full bg-[#A16BFF]/10 flex items-center justify-center mr-3">
515
+ <span class="text-[#A16BFF] font-bold">2</span>
516
+ </div>
517
+ <h4 class="font-bold">AI Menu Draft</h4>
518
+ </div>
519
+ <div class="bg-[#0B0F14] rounded p-4 mb-4">
520
+ <div class="flex justify-between items-center mb-3">
521
+ <div class="flex items-center">
522
+ <div class="w-3 h-3 rounded-full bg-[#A16BFF] mr-2"></div>
523
+ <span class="text-sm">Suggested Menu</span>
524
+ </div>
525
+ <span class="text-xs bg-[#A16BFF]/10 text-[#A16BFF] px-2 py-1 rounded">45% Margin</span>
526
+ </div>
527
+ <div class="text-sm text-gray-400 space-y-2">
528
+ <p>• Mediterranean Buffet</p>
529
+ <p>• Vegan/GF Options</p>
530
+ <p>• Seasonal Fruit Display</p>
531
+ <p>• Artisan Beverage Station</p>
532
+ </div>
533
+ </div>
534
+ <p class="text-sm text-gray-400">AI suggests perfect menu based on event type and your most profitable items</p>
535
+ </div>
536
+
537
+ <!-- VoiceBot Call -->
538
+ <div class="bg-[#121824] rounded-lg p-6 border border-[#46E59A]/30">
539
+ <div class="flex items-center mb-4">
540
+ <div class="w-8 h-8 rounded-full bg-[#46E59A]/10 flex items-center justify-center mr-3">
541
+ <span class="text-[#46E59A] font-bold">3</span>
542
+ </div>
543
+ <h4 class="font-bold">VoiceBot Call</h4>
544
+ </div>
545
+ <div class="bg-[#0B0F14] rounded p-4 mb-4">
546
+ <div class="flex items-center mb-3">
547
+ <div class="w-3 h-3 rounded-full bg-[#46E59A] mr-2"></div>
548
+ <span class="text-sm">Call Transcript</span>
549
+ </div>
550
+ <div class="text-sm text-gray-400 space-y-2">
551
+ <p class="text-[#46E59A]">Bot: Confirm 120 guests on Sep 18?</p>
552
+ <p class="text-gray-300">Client: Yes, that's correct</p>
553
+ <p class="text-[#46E59A]">Bot: Any dietary restrictions?</p>
554
+ <p class="text-gray-300">Client: 15 vegan, 8 gluten-free</p>
555
+ </div>
556
+ </div>
557
+ <p class="text-sm text-gray-400">VoiceBot automatically calls to confirm details and answer FAQs</p>
558
+ </div>
559
+ </div>
560
+
561
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mt-8">
562
+ <!-- Proposal Sent -->
563
+ <div class="bg-[#121824] rounded-lg p-6 border border-[#FFC857]/30">
564
+ <div class="flex items-center mb-4">
565
+ <div class="w-8 h-8 rounded-full bg-[#FFC857]/10 flex items-center justify-center mr-3">
566
+ <span class="text-[#FFC857] font-bold">4</span>
567
+ </div>
568
+ <h4 class="font-bold">Proposal Sent</h4>
569
+ </div>
570
+ <div class="bg-[#0B0F14] rounded p-4 mb-4">
571
+ <div class="flex items-center mb-3">
572
+ <div class="w-3 h-3 rounded-full bg-[#FFC857] mr-2"></div>
573
+ <span class="text-sm">Proposal #PC-2025-0918</span>
574
+ </div>
575
+ <div class="text-sm text-gray-400 space-y-2">
576
+ <div class="flex justify-between">
577
+ <span>Mediterranean Buffet</span>
578
+ <span>$2,850</span>
579
+ </div>
580
+ <div class="flex justify-between">
581
+ <span>Service Fee</span>
582
+ <span>$950</span>
583
+ </div>
584
+ <div class="border-t border-[#1E293B] my-2"></div>
585
+ <div class="flex justify-between font-medium">
586
+ <span>Total</span>
587
+ <span>$3,800</span>
588
+ </div>
589
+ </div>
590
+ <div class="mt-4 flex justify-between items-center">
591
+ <span class="text-xs text-[#FFC857]">50% deposit required</span>
592
+ <button class="text-xs bg-[#FFC857]/10 text-[#FFC857] px-3 py-1 rounded">Pay Deposit</button>
593
+ </div>
594
+ </div>
595
+ <p class="text-sm text-gray-400">Professional proposal with eSign and deposit payment link</p>
596
+ </div>
597
+
598
+ <!-- Deposit Paid -->
599
+ <div class="bg-[#121824] rounded-lg p-6 border border-[#FF4D6D]/30">
600
+ <div class="flex items-center mb-4">
601
+ <div class="w-8 h-8 rounded-full bg-[#FF4D6D]/10 flex items-center justify-center mr-3">
602
+ <span class="text-[#FF4D6D] font-bold">5</span>
603
+ </div>
604
+ <h4 class="font-bold">Deposit Paid</h4>
605
+ </div>
606
+ <div class="bg-[#0B0F14] rounded p-4 mb-4">
607
+ <div class="flex items-center justify-between mb-3">
608
+ <div class="flex items-center">
609
+ <div class="w-3 h-3 rounded-full bg-[#FF4D6D] mr-2"></div>
610
+ <span class="text-sm">Payment Received</span>
611
+ </div>
612
+ <span class="text-xs bg-[#46E59A]/10 text-[#46E59A] px-2 py-1 rounded">Confirmed</span>
613
+ </div>
614
+ <div class="text-sm text-gray-400 space-y-2">
615
+ <div class="flex justify-between">
616
+ <span>Amount</span>
617
+ <span>$1,900</span>
618
+ </div>
619
+ <div class="flex justify-between">
620
+ <span>Method</span>
621
+ <span>Credit Card</span>
622
+ </div>
623
+ <div class="flex justify-between">
624
+ <span>Date</span>
625
+ <span>Aug 14, 2025</span>
626
+ </div>
627
+ </div>
628
+ <div class="mt-4 grid grid-cols-3 gap-2">
629
+ <div class="bg-[#1E293B] rounded p-2 text-center">
630
+ <p class="text-xs text-gray-400">Kitchen</p>
631
+ <p class="text-sm">BEO Sent</p>
632
+ </div>
633
+ <div class="bg-[#1E293B] rounded p-2 text-center">
634
+ <p class="text-xs text-gray-400">Coordinator</p>
635
+ <p class="text-sm">Packout List</p>
636
+ </div>
637
+ <div class="bg-[#1E293B] rounded p-2 text-center">
638
+ <p class="text-xs text-gray-400">Customer</p>
639
+ <p class="text-sm">Portal Updated</p>
640
+ </div>
641
+ </div>
642
+ </div>
643
+ <p class="text-sm text-gray-400">Calendar updates and notifications fan out to all teams</p>
644
+ </div>
645
+ </div>
646
+ </div>
647
+ </div>
648
+ </div>
649
+ </section>
650
+
651
+ <!-- Social Proof -->
652
+ <section class="py-20 px-6 bg-[#0B0F14]">
653
+ <div class="max-w-7xl mx-auto">
654
+ <h2 class="text-3xl md:text-4xl font-bold text-center mb-16" style="font-family: 'Clash Display', sans-serif;">
655
+ Trusted by Leading Caterers
656
+ </h2>
657
+
658
+ <!-- Logo Cloud -->
659
+ <div class="flex flex-wrap justify-center gap-12 mb-20 opacity-80">
660
+ <div class="flex items-center">
661
+ <svg viewBox="0 0 48 48" class="h-8 text-white">
662
+ <path fill="currentColor" d="M24,4C12.954,4,4,12.954,4,24s8.954,20,20,20s20-8.954,20-20S35.046,4,24,4z M24,42C13.523,42,6,34.477,6,24 S13.523,6,24,6s18,7.523,18,18S34.477,42,24,42z"></path>
663
+ <path fill="currentColor" d="M24,10c-7.732,0-14,6.268-14,14s6.268,14,14,14s14-6.268,14-14S31.732,10,24,10z M24,34 c-5.523,0-10-4.477-10-10s4.477-10,10-10s10,4.477,10,10S29.523,34,24,34z"></path>
664
+ <path fill="currentColor" d="M24,16c-4.418,0-8,3.582-8,8s3.582,8,8,8s8-3.582,8-8S28.418,16,24,16z M24,30c-3.314,0-6-2.686-6-6 s2.686-6,6-6s6,2.686,6,6S27.314,30,24,30z"></path>
665
+ </svg>
666
+ <span class="ml-2 text-xl font-bold">Elite Events</span>
667
+ </div>
668
+ <div class="flex items-center">
669
+ <svg viewBox="0 0 48 48" class="h-8 text-white">
670
+ <rect width="36" height="36" x="6" y="6" fill="none" stroke="currentColor" stroke-width="4"></rect>
671
+ <rect width="24" height="24" x="12" y="12" fill="none" stroke="currentColor" stroke-width="4"></rect>
672
+ <rect width="12" height="12" x="18" y="18" fill="currentColor"></rect>
673
+ </svg>
674
+ <span class="ml-2 text-xl font-bold">Gourmet Box</span>
675
+ </div>
676
+ <div class="flex items-center">
677
+ <svg viewBox="0 0 48 48" class="h-8 text-white">
678
+ <polygon fill="currentColor" points="24,6 9,18 9,30 24,42 39,30 39,18"></polygon>
679
+ </svg>
680
+ <span class="ml-2 text-xl font-bold">Platinum Plate</span>
681
+ </div>
682
+ <div class="flex items-center">
683
+ <svg viewBox="0 0 48 48" class="h-8 text-white">
684
+ <circle cx="24" cy="24" r="18" fill="none" stroke="currentColor" stroke-width="4"></circle>
685
+ <circle cx="24" cy="24" r="12" fill="none" stroke="currentColor" stroke-width="4"></circle>
686
+ <circle cx="24" cy="24" r="6" fill="currentColor"></circle>
687
+ </svg>
688
+ <span class="ml-2 text-xl font-bold">Culinary Art</span>
689
+ </div>
690
+ <div class="flex items-center">
691
+ <svg viewBox="0 0 48 48" class="h-8 text-white">
692
+ <path fill="currentColor" d="M24,6L6,24l18,18l18-18L24,6z M24,38L10,24l14-14l14,14L24,38z"></path>
693
+ </svg>
694
+ <span class="ml-2 text-xl font-bold">Taste Horizon</span>
695
+ </div>
696
+ </div>
697
+
698
+ <!-- Testimonial -->
699
+ <div class="glass-card rounded-xl p-8 max-w-4xl mx-auto">
700
+ <div class="flex items-center mb-8">
701
+ <div class="w-16 h-16 rounded-full bg-gradient-to-r from-[#20E3FF] to-[#A16BFF] flex items-center justify-center text-2xl font-bold mr-6">
702
+ JD
703
+ </div>
704
+ <div>
705
+ <h4 class="text-xl font-bold">Jamie Donovan</h4>
706
+ <p class="text-gray-400">Owner, Elite Events Catering</p>
707
+ </div>
708
+ </div>
709
+ <blockquote class="text-xl italic mb-6">
710
+ "I rolled up multiple locations with zero time to retrain. OneCatering qualified leads, finalized menus, auto-booked events, and collected deposits. Then a plugin asked a few questions and built a fully SEO-optimized website connected to my portal—in one week. I needed fewer people. The future is here."
711
+ </blockquote>
712
+ <div class="flex space-x-2">
713
+ <div class="w-3 h-3 rounded-full bg-[#20E3FF]"></div>
714
+ <div class="w-3 h-3 rounded-full bg-[#20E3FF]"></div>
715
+ <div class="w-3 h-3 rounded-full bg-[#20E3FF]"></div>
716
+ <div class="w-3 h-3 rounded-full bg-[#20E3FF]"></div>
717
+ <div class="w-3 h-3 rounded-full bg-[#20E3FF]/30"></div>
718
+ </div>
719
+ </div>
720
+ </div>
721
+ </section>
722
+
723
+ <!-- Screens Carousel -->
724
+ <section class="py-20 px-6 bg-[#121824]">
725
+ <div class="max-w-7xl mx-auto">
726
+ <h2 class="text-3xl md:text-4xl font-bold text-center mb-4" style="font-family: 'Clash Display', sans-serif;">
727
+ Beautiful, Functional Interfaces
728
+ </h2>
729
+ <p class="text-xl text-gray-400 text-center mb-16 max-w-3xl mx-auto">
730
+ Designed for speed and clarity at every step
731
+ </p>
732
+
733
+ <div class="relative">
734
+ <!-- Carousel Navigation -->
735
+ <div class="flex justify-center mb-8">
736
+ <button class="px-4 py-2 mx-1 rounded-md bg-[#20E3FF] text-[#0B0F14] font-medium">Customer Portal</button>
737
+ <button class="px-4 py-2 mx-1 rounded-md bg-[#121824] text-gray-300 font-medium">Caterer Portal</button>
738
+ <button class="px-4 py-2 mx-1 rounded-md bg-[#121824] text-gray-300 font-medium">Marketplace</button>
739
+ <button class="px-4 py-2 mx-1 rounded-md bg-[#121824] text-gray-300 font-medium">Calendar</button>
740
+ <button class="px-4 py-2 mx-1 rounded-md bg-[#121824] text-gray-300 font-medium">BEO</button>
741
+ </div>
742
+
743
+ <!-- Carousel Content -->
744
+ <div class="glass-card rounded-xl overflow-hidden">
745
+ <div class="p-4 bg-[#0B0F14] flex items-center">
746
+ <div class="flex space-x-2 mr-4">
747
+ <div class="w-3 h-3 rounded-full bg-[#FF4D6D]"></div>
748
+ <div class="w-3 h-3 rounded-full bg-[#FFC857]"></div>
749
+ <div class="w-3 h-3 rounded-full bg-[#46E59A]"></div>
750
+ </div>
751
+ <div class="text-sm text-gray-400">customer.onecatering.com/event/EVT-9132</div>
752
+ </div>
753
+ <div class="p-8 bg-[#121824]">
754
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
755
+ <!-- Event Summary -->
756
+ <div class="bg-[#0B0F14] rounded-lg p-6">
757
+ <h3 class="text-lg font-bold mb-4">Event Summary</h3>
758
+ <div class="space-y-4">
759
+ <div>
760
+ <p class="text-sm text-gray-400 mb-1">Date & Time</p>
761
+ <p class="font-medium">Sep 18, 2025 • 11:30 AM - 2:00 PM</p>
762
+ </div>
763
+ <div>
764
+ <p class="text-sm text-gray-400 mb-1">Location</p>
765
+ <p class="font-medium">Brand HQ • 1200 5th Ave, Seattle</p>
766
+ </div>
767
+ <div>
768
+ <p class="text-sm text-gray-400 mb-1">Guests</p>
769
+ <p class="font-medium">120 (15 vegan, 8 gluten-free)</p>
770
+ </div>
771
+ <div>
772
+ <p class="text-sm text-gray-400 mb-1">Status</p>
773
+ <div class="flex items-center">
774
+ <div class="w-2 h-2 rounded-full bg-[#46E59A] mr-2"></div>
775
+ <span class="font-medium">Confirmed</span>
776
+ </div>
777
+ </div>
778
+ </div>
779
+ </div>
780
+
781
+ <!-- Timeline -->
782
+ <div class="bg-[#0B0F14] rounded-lg p-6">
783
+ <h3 class="text-lg font-bold mb-4">Timeline</h3>
784
+ <div class="space-y-4">
785
+ <div class="flex items-start">
786
+ <div class="timeline-node active-node mr-4 mt-1"></div>
787
+ <div>
788
+ <p class="font-medium">Deposit Paid</p>
789
+ <p class="text-sm text-gray-400">Aug 14, 2025</p>
790
+ </div>
791
+ </div>
792
+ <div class="flex items-start">
793
+ <div class="timeline-node active-node mr-4 mt-1"></div>
794
+ <div>
795
+ <p class="font-medium">Menu Finalized</p>
796
+ <p class="text-sm text-gray-400">Aug 21, 2025</p>
797
+ </div>
798
+ </div>
799
+ <div class="flex items-start">
800
+ <div class="timeline-node pending-node mr-4 mt-1"></div>
801
+ <div>
802
+ <p class="font-medium">Final Headcount</p>
803
+ <p class="text-sm text-gray-400">Due Sep 4, 2025</p>
804
+ </div>
805
+ </div>
806
+ <div class="flex items-start">
807
+ <div class="timeline-node future-node mr-4 mt-1"></div>
808
+ <div>
809
+ <p class="font-medium">Event Day</p>
810
+ <p class="text-sm text-gray-400">Sep 18, 2025</p>
811
+ </div>
812
+ </div>
813
+ </div>
814
+ </div>
815
+
816
+ <!-- Invoices -->
817
+ <div class="bg-[#0B0F14] rounded-lg p-6">
818
+ <h3 class="text-lg font-bold mb-4">Invoices</h3>
819
+ <div class="space-y-4">
820
+ <div class="flex justify-between items-center p-3 bg-[#121824] rounded">
821
+ <div>
822
+ <p class="font-medium">Deposit</p>
823
+ <p class="text-sm text-gray-400">Paid Aug 14</p>
824
+ </div>
825
+ <div class="text-right">
826
+ <p class="font-medium">$1,900</p>
827
+ <p class="text-xs text-[#46E59A]">Completed</p>
828
+ </div>
829
+ </div>
830
+ <div class="flex justify-between items-center p-3 bg-[#121824] rounded border border-[#FFC857]/30">
831
+ <div>
832
+ <p class="font-medium">Final Payment</p>
833
+ <p class="text-sm text-gray-400">Due Sep 11</p>
834
+ </div>
835
+ <div class="text-right">
836
+ <p class="font-medium">$1,900</p>
837
+ <button class="text-xs bg-[#FFC857]/10 text-[#FFC857] px-3 py-1 rounded">Pay Now</button>
838
+ </div>
839
+ </div>
840
+ </div>
841
+ <div class="mt-6">
842
+ <h4 class="text-sm font-bold mb-2">Files</h4>
843
+ <div class="flex flex-wrap gap-2">
844
+ <div class="text-xs bg-[#1E293B] px-3 py-2 rounded flex items-center">
845
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 mr-1">
846
+ <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
847
+ </svg>
848
+ Proposal
849
+ </div>
850
+ <div class="text-xs bg-[#1E293B] px-3 py-2 rounded flex items-center">
851
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 mr-1">
852
+ <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
853
+ </svg>
854
+ Contract
855
+ </div>
856
+ <div class="text-xs bg-[#1E293B] px-3 py-2 rounded flex items-center">
857
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 mr-1">
858
+ <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
859
+ </svg>
860
+ Floor Plan
861
+ </div>
862
+ </div>
863
+ </div>
864
+ </div>
865
+ </div>
866
+
867
+ <!-- Chat Section -->
868
+ <div class="mt-8 bg-[#0B0F14] rounded-lg p-6">
869
+ <h3 class="text-lg font-bold mb-4">Messages</h3>
870
+ <div class="space-y-4 max-h-64 overflow-y-auto pr-4">
871
+ <div class="flex items-start">
872
+ <div class="w-8 h-8 rounded-full bg-[#20E3FF]/10 flex items-center justify-center text-[#20E3FF] font-bold mr-3 mt-1">JD</div>
873
+ <div>
874
+ <div class="bg-[#121824] rounded-lg p-3 inline-block">
875
+ <p>Hi Ava, your menu has been finalized per our call. Please review the attached proposal when you have a moment.</p>
876
+ </div>
877
+ <p class="text-xs text-gray-500 mt-1">Aug 21, 2025 • 10:15 AM</p>
878
+ </div>
879
+ </div>
880
+ <div class="flex items-start justify-end">
881
+ <div>
882
+ <div class="bg-[#20E3FF]/10 rounded-lg p-3 inline-block">
883
+ <p>Looks great! Just submitted the signed proposal and paid the deposit.</p>
884
+ </div>
885
+ <p class="text-xs text-gray-500 mt-1 text-right">Aug 21, 2025 • 1:30 PM</p>
886
+ </div>
887
+ <div class="w-8 h-8 rounded-full bg-[#A16BFF]/10 flex items-center justify-center text-[#A16BFF] font-bold ml-3 mt-1">AC</div>
888
+ </div>
889
+ <div class="flex items-start">
890
+ <div class="w-8 h-8 rounded-full bg-[#20E3FF]/10 flex items-center justify-center text-[#20E3FF] font-bold mr-3 mt-1">JD</div>
891
+ <div>
892
+ <div class="bg-[#121824] rounded-lg p-3 inline-block">
893
+ <p>Received, thank you! Your event is now confirmed. We'll reach out 2 weeks prior to finalize headcount and any last details.</p>
894
+ </div>
895
+ <p class="text-xs text-gray-500 mt-1">Aug 21, 2025
896
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=cokarat/onecateringlanding" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
897
+ </html>