Website Editor

🧪 Dev Website

🔗 Preview

DEV — VISUAL EDITOR

/var/www/dev-i-desks/index.html

0 lines 0 chars

<!DOCTYPE html>
<html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sarah — On-Premise AI Receptionist</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

:root {
            --black: #000000;
            --dark: #0b0b0b;
            --dark2: #111111;
            --dark3: #1a1a1a;
            --white: #ffffff;
            --grey: #8c8c8c;
            --grey-light: #b3b3b3;
            --grey-dark: #555555;
            --border: rgba(255,255,255,0.07);
        }

* { margin: 0; padding: 0; box-sizing: border-box; }
        html { scroll-behavior: smooth; }

body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            background: var(--black);
            color: var(--white);
            -webkit-font-smoothing: antialiased;
            overflow-x: hidden;
        }

/* ── STARLINK-STYLE NAV ── */
        nav {
            position: fixed;
            top: 0;
            width: 100%;
            z-index: 100;
            padding: 0 2rem;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: rgba(0,0,0,0.7);
            backdrop-filter: blur(30px);
            -webkit-backdrop-filter: blur(30px);
        }

.logo {
            font-size: 1.1rem;
            font-weight: 700;
            letter-spacing: 0.2em;
            text-transform: uppercase;
        }

.nav-links {
            display: flex;
            gap: 2.5rem;
            align-items: center;
        }

.nav-links a {
            color: var(--grey);
            text-decoration: none;
            font-size: 0.8rem;
            font-weight: 500;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            transition: color 0.3s;
        }

.nav-links a:hover { color: var(--white); }

.nav-cta {
            color: var(--white) !important;
            background: transparent;
            border: 1px solid rgba(255,255,255,0.3);
            padding: 0.5rem 1.5rem;
            border-radius: 4px;
            transition: all 0.3s !important;
        }

.nav-cta:hover {
            background: var(--white) !important;
            color: var(--black) !important;
        }

/* ── HERO — FULL VIEWPORT ── */
        .hero {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            padding: 0 2rem;
            position: relative;
            overflow: hidden;
        }

/* Starlink-style subtle star field */
        .hero::before {
            content: '';
            position: absolute;
            inset: 0;
            background:
                radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,0.3), transparent),
                radial-gradient(1px 1px at 40% 70%, rgba(255,255,255,0.2), transparent),
                radial-gradient(1px 1px at 50% 50%, rgba(255,255,255,0.15), transparent),
                radial-gradient(1px 1px at 60% 20%, rgba(255,255,255,0.25), transparent),
                radial-gradient(1px 1px at 80% 60%, rgba(255,255,255,0.2), transparent),
                radial-gradient(1px 1px at 10% 80%, rgba(255,255,255,0.15), transparent),
                radial-gradient(1px 1px at 70% 40%, rgba(255,255,255,0.2), transparent),
                radial-gradient(1px 1px at 30% 90%, rgba(255,255,255,0.1), transparent),
                radial-gradient(1px 1px at 90% 10%, rgba(255,255,255,0.2), transparent),
                radial-gradient(1px 1px at 15% 55%, rgba(255,255,255,0.15), transparent),
                radial-gradient(1px 1px at 85% 85%, rgba(255,255,255,0.1), transparent),
                radial-gradient(1px 1px at 55% 15%, rgba(255,255,255,0.2), transparent),
                radial-gradient(1.5px 1.5px at 45% 45%, rgba(255,255,255,0.12), transparent),
                radial-gradient(1.5px 1.5px at 75% 75%, rgba(255,255,255,0.08), transparent),
                radial-gradient(1px 1px at 25% 65%, rgba(255,255,255,0.18), transparent);
            background-size: 550px 550px;
            animation: drift 120s linear infinite;
        }

@keyframes drift {
            from { transform: translateY(0); }
            to { transform: translateY(-550px); }
        }

/* Subtle earth-glow at bottom */
        .hero::after {
            content: '';
            position: absolute;
            bottom: -20%;
            left: 50%;
            transform: translateX(-50%);
            width: 140%;
            height: 50%;
            background: radial-gradient(ellipse at center bottom, rgba(40,80,140,0.08) 0%, transparent 70%);
            pointer-events: none;
        }

.hero-content {
            position: relative;
            z-index: 1;
        }

.hero h1 {
            font-size: clamp(3.5rem, 9vw, 7rem);
            font-weight: 800;
            letter-spacing: -0.04em;
            line-height: 0.95;
            margin-bottom: 2rem;
        }

.hero h1 .line2 {
            display: block;
            font-weight: 300;
            font-size: 0.55em;
            letter-spacing: -0.02em;
            color: var(--grey);
            margin-top: 0.3em;
        }

.hero-sub {
            font-size: 1.1rem;
            font-weight: 300;
            color: var(--grey);
            max-width: 500px;
            margin: 0 auto 3rem;
            line-height: 1.7;
        }

.hero-cta {
            display: inline-block;
            padding: 1rem 3rem;
            background: var(--white);
            color: var(--black);
            font-size: 0.85rem;
            font-weight: 600;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            text-decoration: none;
            border-radius: 4px;
            transition: all 0.3s;
        }

.hero-cta:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 40px rgba(255,255,255,0.1);
        }

.scroll-indicator {
            position: absolute;
            bottom: 2rem;
            left: 50%;
            transform: translateX(-50%);
            z-index: 1;
        }

.scroll-indicator span {
            display: block;
            width: 1px;
            height: 40px;
            background: linear-gradient(to bottom, var(--grey), transparent);
            margin: 0 auto;
            animation: scrollPulse 2s infinite;
        }

@keyframes scrollPulse {
            0%, 100% { opacity: 0.3; transform: scaleY(0.5); }
            50% { opacity: 1; transform: scaleY(1); }
        }

/* ── SECTION STYLE (Starlink panels) ── */
        .section {
            padding: 8rem 2rem;
            max-width: 1200px;
            margin: 0 auto;
        }

.section-label {
            font-size: 0.7rem;
            font-weight: 600;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            color: var(--grey-dark);
            margin-bottom: 1.5rem;
        }

.section h2 {
            font-size: clamp(2rem, 5vw, 3.5rem);
            font-weight: 700;
            letter-spacing: -0.03em;
            line-height: 1.1;
            margin-bottom: 1.5rem;
        }

.section h2 .light {
            font-weight: 300;
            color: var(--grey);
        }

.section-text {
            font-size: 1.05rem;
            font-weight: 300;
            color: var(--grey);
            max-width: 550px;
            line-height: 1.8;
        }

/* ── ELIMINATED ── */
        .eliminated {
            padding: 6rem 0;
            border-top: 1px solid var(--border);
            border-bottom: 1px solid var(--border);
        }

.elim-inner {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 2rem;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 6rem;
            align-items: center;
        }

.elim-left .section-label { margin-bottom: 1.5rem; }

.elim-list {
            display: flex;
            flex-direction: column;
            gap: 0;
        }

.elim-item {
            display: flex;
            align-items: center;
            gap: 1.5rem;
            padding: 1.2rem 0;
            border-bottom: 1px solid var(--border);
            font-size: 1.1rem;
            font-weight: 500;
        }

.elim-item:last-child { border-bottom: none; }

.elim-x {
            font-size: 0.65rem;
            font-weight: 600;
            letter-spacing: 0.15em;
            text-transform: uppercase;
            color: var(--grey-dark);
            width: 100px;
            flex-shrink: 0;
        }

.elim-item .text {
            color: var(--grey);
            text-decoration: line-through;
            text-decoration-color: var(--grey-dark);
        }

.req-section {
            text-align: center;
        }

.req-section .section-label {
            color: var(--grey);
            margin-bottom: 3rem;
        }

.req-items {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
            align-items: center;
        }

.req-item {
            font-size: 2.5rem;
            font-weight: 700;
            letter-spacing: -0.02em;
            display: flex;
            align-items: center;
            gap: 1rem;
        }

.req-item .icon {
            font-size: 1.2rem;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid var(--border);
            border-radius: 50%;
        }

.req-plus {
            font-size: 1.5rem;
            font-weight: 300;
            color: var(--grey-dark);
        }

/* ── FEATURES GRID ── */
        .features {
            border-top: 1px solid var(--border);
        }

.features-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            border-left: 1px solid var(--border);
        }

.feature-cell {
            padding: 3rem;
            border-right: 1px solid var(--border);
            border-bottom: 1px solid var(--border);
            transition: background 0.3s;
        }

.feature-cell:hover {
            background: var(--dark2);
        }

.feature-cell h3 {
            font-size: 0.95rem;
            font-weight: 600;
            margin-bottom: 0.75rem;
            letter-spacing: -0.01em;
        }

.feature-cell p {
            font-size: 0.85rem;
            font-weight: 300;
            color: var(--grey);
            line-height: 1.7;
        }

/* ── STATS BAR ── */
        .stats-bar {
            border-top: 1px solid var(--border);
            border-bottom: 1px solid var(--border);
            display: grid;
            grid-template-columns: repeat(4, 1fr);
        }

.stat-cell {
            padding: 4rem 2rem;
            text-align: center;
            border-right: 1px solid var(--border);
        }

.stat-cell:last-child { border-right: none; }

.stat-number {
            font-size: clamp(2.5rem, 5vw, 4rem);
            font-weight: 800;
            letter-spacing: -0.03em;
            margin-bottom: 0.5rem;
        }

.stat-label {
            font-size: 0.7rem;
            font-weight: 500;
            letter-spacing: 0.15em;
            text-transform: uppercase;
            color: var(--grey-dark);
        }

/* ── INDUSTRIES ── */
        .industries {
            border-bottom: 1px solid var(--border);
        }

.ind-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
        }

.ind-cell {
            padding: 3.5rem;
            border-right: 1px solid var(--border);
            border-bottom: 1px solid var(--border);
            transition: background 0.3s;
            cursor: default;
        }

.ind-cell:nth-child(3n) { border-right: none; }
        .ind-cell:nth-child(n+4) { border-bottom: none; }

.ind-cell:hover { background: var(--dark2); }

.ind-cell h3 {
            font-size: 1.1rem;
            font-weight: 600;
            margin-bottom: 0.75rem;
            letter-spacing: -0.01em;
        }

.ind-cell p {
            font-size: 0.85rem;
            font-weight: 300;
            color: var(--grey);
            line-height: 1.7;
        }

/* ── PRICING ── */
        .pricing {
            border-bottom: 1px solid var(--border);
        }

.pricing-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            border-left: 1px solid var(--border);
        }

.price-card {
            padding: 3.5rem;
            border-right: 1px solid var(--border);
            position: relative;
        }

.price-card.featured {
            background: var(--dark2);
        }

.price-featured-tag {
            position: absolute;
            top: 1.5rem;
            right: 1.5rem;
            font-size: 0.6rem;
            font-weight: 600;
            letter-spacing: 0.15em;
            text-transform: uppercase;
            color: var(--grey-dark);
            border: 1px solid var(--border);
            padding: 0.3rem 0.8rem;
            border-radius: 2px;
        }

.price-name {
            font-size: 0.7rem;
            font-weight: 600;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            color: var(--grey-dark);
            margin-bottom: 1.5rem;
        }

.price-amount {
            font-size: 3rem;
            font-weight: 800;
            letter-spacing: -0.03em;
            margin-bottom: 0.25rem;
        }

.price-type {
            font-size: 0.85rem;
            color: var(--grey-dark);
            margin-bottom: 2.5rem;
        }

.price-list {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

.price-list li {
            font-size: 0.9rem;
            font-weight: 400;
            color: var(--grey-light);
            padding-left: 1.2rem;
            position: relative;
        }

.price-list li::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0.55em;
            width: 4px;
            height: 1px;
            background: var(--grey-dark);
        }

.price-cta {
            display: block;
            margin-top: 2.5rem;
            padding: 0.9rem;
            text-align: center;
            font-size: 0.8rem;
            font-weight: 600;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            text-decoration: none;
            border: 1px solid var(--border);
            color: var(--white);
            border-radius: 4px;
            transition: all 0.3s;
        }

.price-cta:hover {
            background: var(--white);
            color: var(--black);
        }

.price-card.featured .price-cta {
            background: var(--white);
            color: var(--black);
            border-color: var(--white);
        }

.price-card.featured .price-cta:hover {
            background: transparent;
            color: var(--white);
        }

/* ── FINAL CTA ── */
        .final {
            padding: 10rem 2rem;
            text-align: center;
            position: relative;
        }

.final::before {
            content: '';
            position: absolute;
            inset: 0;
            background:
                radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,0.15), transparent),
                radial-gradient(1px 1px at 80% 60%, rgba(255,255,255,0.1), transparent),
                radial-gradient(1px 1px at 50% 80%, rgba(255,255,255,0.12), transparent);
            background-size: 400px 400px;
        }

.final h2 {
            font-size: clamp(2.5rem, 6vw, 4.5rem);
            font-weight: 800;
            letter-spacing: -0.04em;
            margin-bottom: 1.5rem;
            position: relative;
            z-index: 1;
        }

.final p {
            font-size: 1.05rem;
            font-weight: 300;
            color: var(--grey);
            margin-bottom: 3rem;
            position: relative;
            z-index: 1;
        }

.final .hero-cta {
            position: relative;
            z-index: 1;
        }

/* ── FOOTER ── */
        footer {
            padding: 2rem;
            text-align: center;
            font-size: 0.75rem;
            font-weight: 400;
            color: var(--grey-dark);
            letter-spacing: 0.05em;
            border-top: 1px solid var(--border);
        }

footer a {
            color: var(--grey);
            text-decoration: none;
        }

/* ── RESPONSIVE ── */
        @media (max-width: 900px) {
            .nav-links { display: none; }

.elim-inner {
                grid-template-columns: 1fr;
                gap: 4rem;
            }

.features-grid,
            .ind-grid,
            .pricing-grid {
                grid-template-columns: 1fr;
            }

.ind-cell { border-right: none; border-bottom: 1px solid var(--border); }
            .ind-cell:last-child { border-bottom: none; }

.stats-bar {
                grid-template-columns: repeat(2, 1fr);
            }

.stat-cell { border-bottom: 1px solid var(--border); }
            .stat-cell:nth-child(odd) { border-right: 1px solid var(--border); }
            .stat-cell:nth-child(even) { border-right: none; }

.feature-cell { border-right: none; }

.price-card { border-right: none; border-bottom: 1px solid var(--border); }
            .price-card:last-child { border-bottom: none; }
        }

@media (max-width: 600px) {
            .req-item { font-size: 1.8rem; }
            .stat-number { font-size: 2.5rem; }
        }
    </style>
<style>
    .ce-editing { outline: 2px solid #3b82f6 !important; outline-offset: 2px; border-radius: 3px; }
    .ce-hover { outline: 1px dashed rgba(59, 130, 246, 0.4) !important; outline-offset: 1px; }
    [contenteditable]:focus { outline: 2px solid #3b82f6 !important; outline-offset: 2px; }
    [contenteditable] { transition: outline 0.15s ease; }
  </style></head>
<body>

<nav>
        <div class="logo">SARAH</div>
        <div class="nav-links">
            <a href="#features">Features</a>
            <a href="#industries">Industries</a>
            <a href="#pricing" class="">SERVICES</a>
            <a href="#contact" class="nav-cta">Order</a>
        </div>
    </nav>

<section class="hero">
        <div class="hero-content">
            <h1 class="">
                SARAH
                <span class="line2">On-Premise Voice Conversational AI</span>
            </h1>
            <p class="hero-sub"></p><div><span style="font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif; cursor: text;">Voice Conversational AI Agent</span></div><div><span style="font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif; cursor: text;">that&nbsp;</span><span style="font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif; cursor: text;">answers calls, replies to WhatsApp &amp; Telegram&nbsp;</span><span style="font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif; cursor: text;">messages,&nbsp;</span></div><div><span style="font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif; cursor: text;">books appointments on your calendar,&nbsp;</span></div><div><span style="font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif; cursor: text;">handles enquiries and fills out forms</span></div><div><span style="font-size: 1.1rem; font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif; cursor: text;">Runs entirely on your hardware</span></div><div>Nothing leaves your premises<div>No Internet required (unless you wish to WhatsApp and Telegram)</div><div>No Third Party APIs required</div><div>No per minutes charges</div><div>No Third Party Accounts required</div><div>Integrates with your current phone system seamlessly</div><div>Integrates with your current website seamlessly</div><div>Talks to Directly via WhatsApp and Telegram via texts, voice notes</div><div><b>SARAH&nbsp;</b>comes with,</div><div>An Army of Voice AI Agents</div><div>A Unified Inbox</div><div>(Email, SMS, WhatsApp Web, Telegram, LinkedIn, Web Chat, Voice mail)</div><div>An Enterprise Phone System with call recording feature</div><div>WebRTC widgets for your websites</div><div>Bulk Email Marketing Platform</div><div>Wire Guard and Open VPN Server</div><div>(if you wish to expose it to the Internet and connect securely)</div><div>Universal Billing Platform</div></div><div><br></div><div><br></div><div><br style="color: rgb(255, 255, 255); font-size: medium;"></div><p></p>
            <a href="#contact" class="hero-cta">Order Sarah</a>
        </div>
        <div class="scroll-indicator"><span></span></div>
    </section>

<section class="eliminated">
        <div class="elim-inner">
            <div class="elim-left">
                <div class="section-label">Eliminated</div>
                <h2>Zero cloud.<br><span class="light">Zero dependencies.</span></h2>
                <div class="elim-list">
                    <div class="elim-item">
                        <span class="elim-x">Not required</span>
                        <span class="text">Internet connection</span>
                    </div>
                    <div class="elim-item">
                        <span class="elim-x">Not required</span>
                        <span class="text">Cloud APIs</span>
                    </div>
                    <div class="elim-item">
                        <span class="elim-x">Not required</span>
                        <span class="text">Per-minute fees</span>
                    </div>
                    <div class="elim-item">
                        <span class="elim-x">Not required</span>
                        <span class="text">Third-party accounts</span>
                    </div>
                    <div class="elim-item">
                        <span class="elim-x">Not required</span>
                        <span class="text">SIP trunk provider</span>
                    </div>
                </div>
            </div>
            <div class="req-section">
                <div class="section-label">All Sarah needs</div>
                <div class="req-items">
                    <div class="req-item">
                        <span class="icon">⚡</span>
                        Power
                    </div>
                    <div class="req-plus">+</div>
                    <div class="req-item">
                        <span class="icon">⬡</span>
                        Ethernet
                    </div>
                </div>
            </div>
        </div>
    </section>

<div class="stats-bar">
        <div class="stat-cell">
            <div class="stat-number">0</div>
            <div class="stat-label">Bytes to the cloud</div>
        </div>
        <div class="stat-cell">
            <div class="stat-number">0</div>
            <div class="stat-label">Third-party API calls</div>
        </div>
        <div class="stat-cell">
            <div class="stat-number">0</div>
            <div class="stat-label">Monthly API fees</div>
        </div>
        <div class="stat-cell">
            <div class="stat-number">100%</div>
            <div class="stat-label">Data sovereignty</div>
        </div>
    </div>

<section class="features" id="features">
        <div class="section" style="padding-bottom: 3rem;">
            <div class="section-label">Capabilities</div>
            <h2>Everything runs on your hardware.<br><span class="light">Nothing leaves your premises.</span></h2>
        </div>
        <div class="features-grid">
            <div class="feature-cell">
                <h3>Answers Calls 24/7</h3>
                <p>Never miss another call. Sarah picks up every time — day, night, weekends, public holidays.</p>
            </div>
            <div class="feature-cell">
                <h3>Books Appointments</h3>
                <p>Checks your calendar in real time. Finds the next available slot. Confirms the booking on the spot.</p>
            </div>
            <div class="feature-cell">
                <h3>17+ Languages</h3>
                <p>Automatically detects the caller's language and responds naturally in their native tongue.</p>
            </div>
            <div class="feature-cell">
                <h3>Records Everything</h3>
                <p>Full call recording and transcription. Stored locally on your hardware. Searchable. Yours forever.</p>
            </div>
            <div class="feature-cell">
                <h3>Sends Confirmations</h3>
                <p>SMS and email confirmations after every booking. Automated follow-ups. Zero manual work.</p>
            </div>
            <div class="feature-cell">
                <h3>Knows Your Callers</h3>
                <p>Remembers returning customers across every interaction. Greets them by name.</p>
            </div>
            <div class="feature-cell">
                <h3>Handles Enquiries</h3>
                <p>Answers questions about your business, services, hours, and pricing. Trained on your information.</p>
            </div>
            <div class="feature-cell">
                <h3>Connects to Your PBX</h3>
                <p>Plugs into any existing phone system via your local network. No external trunk required.</p>
            </div>
            <div class="feature-cell">
                <h3>Management Portal</h3>
                <p>Web dashboard to manage extensions, view call logs, listen to recordings, and configure everything.</p>
            </div>
        </div>
    </section>

<section class="industries" id="industries">
        <div class="section" style="padding-bottom: 3rem;">
            <div class="section-label">Industries</div>
            <h2>Built for businesses<br><span class="light">that take privacy seriously.</span></h2>
        </div>
        <div class="ind-grid">
            <div class="ind-cell">
                <h3>Hotels &amp; Hospitality</h3>
                <p>24/7 concierge that knows every guest by name and room. Room service, wake-up calls, requests — all handled.</p>
            </div>
            <div class="ind-cell">
                <h3>Medical &amp; Dental</h3>
                <p>Patient data never leaves the clinic. Book appointments, handle enquiries, triage calls. Compliance-ready by design.</p>
            </div>
            <div class="ind-cell">
                <h3>Legal</h3>
                <p>Privilege protected at the infrastructure level. Every conversation recorded and transcribed on-premise.</p>
            </div>
            <div class="ind-cell">
                <h3>Government</h3>
                <p>Sovereign infrastructure. Zero foreign cloud dependency. Meets the strictest data residency requirements.</p>
            </div>
            <div class="ind-cell">
                <h3>Trades &amp; Services</h3>
                <p>Turn missed calls into booked jobs while you're on the tools. Sarah fills your calendar automatically.</p>
            </div>
            <div class="ind-cell">
                <h3>Contact Centres</h3>
                <p>Scale to hundreds of concurrent calls on a single server. Multilingual. A fraction of the cost of human agents.</p>
            </div>
        </div>
    </section>

<section class="pricing" id="pricing">
        <div class="section" style="padding-bottom: 3rem;">
            <div class="section-label">Pricing</div>
            <h2 class="">One purchase.<br><span class="light">Your hardware. Your data. Forever.</span></h2>
        </div>
        <div class="pricing-grid">
            <div class="price-card">
                <div class="price-name">Sarah Mini</div>
                <div class="price-amount"><span style="letter-spacing: -1.44px; cursor: text;">SARAH Mini</span></div>
                <div class="price-type">One-time purchase</div>
                <ul class="price-list">
                    <li class="">Up to 50 concurrent conversations</li>
                    <li>17+ languages</li>
                    <li>Appointment booking</li>
                    <li class="">Call recording &amp; transcription</li>
                    <li>SMS &amp; email confirmations</li>
                    <li>Management portal</li>
                    <li class="">12 months support</li>
                </ul>
                <a href="#contact" class="price-cta">Order Mini</a>
            </div>
            <div class="price-card featured">
                <div class="price-featured-tag">Most popular</div>
                <div class="price-name">Sarah Pro</div>
                <div class="price-amount"><span style="letter-spacing: -1.44px; background-color: rgb(0, 0, 0); cursor: text;">SARAH Pro</span></div>
                <div class="price-type">One-time purchase</div>
                <ul class="price-list">
                    <li>Up to 100 concurrent conversations</li>
                    <li>Everything in Mini, plus:</li>
                    <li>Multiple departments</li>
                    <li>Custom voice cloning</li>
                    <li>CRM integration</li>
                    <li>Analytics dashboard</li>
                    <li>Priority support</li>
                </ul>
                <a href="#contact" class="price-cta">Order Pro</a>
            </div>
            <div class="price-card">
                <div class="price-name">Sarah Enterprise</div>
                <div class="price-amount"><span style="letter-spacing: -1.44px; cursor: text;">SARAH Ent</span></div>
                <div class="price-type">Tailored deployment</div>
                <ul class="price-list">
                    <li>Up to 800 concurrent conversations</li>
                    <li>Everything in Pro, plus:</li>
                    <li>Dedicated account manager</li>
                    <li>Custom AI training</li>
                    <li>White-label portal</li>
                    <li>Multi-site deployment</li>
                    <li>SLA guarantee</li>
                </ul>
                <a href="#contact" class="price-cta">Contact Sales</a>
            </div>
        </div>
    </section>

<section class="final" id="contact">
        <h2>Own your AI.</h2>
        <p>No subscriptions. No cloud. No data leaving your building.</p>
        <a href="mailto:chris@i-desks.com" class="hero-cta">Order Sarah</a>
    </section>

<footer>
        <p>© 2026 <a href="https://i-desks.com">iDesks Online AI</a> · Built in Australia</p>
    </footer>

🌐 Production Website

Live — us.i-desks.com

🔗 Preview

PRODUCTION — VISUAL EDITOR

/var/www/i-desks-prod/index.html