Add the quorlasocial.com homepage

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

HANDOFF.md

@@ -16,6 +16,15 @@ Docker behind the Hestia nginx proxy on 127.0.0.1:4310). Hosting steps: `docs/ho
   - Testing-mode tokens expire after 7 days, so reconnect weekly until the app is verified. Details: `docs/google-app.md`.
 - Search Console: quorlasocial.com verified. Legal pages: /privacy and /terms.
 
+## Deploy (server, as `dev`)
+```bash
+cd ~/APPS/quorlasocial && git pull && docker compose up -d --build
+# Homepage for quorlasocial.com (replaces Hestia's "Coming Soon" page):
+sudo cp -r ~/APPS/quorlasocial/site/. /home/user/web/quorlasocial.com/public_html/   && sudo chown -R user:user /home/user/web/quorlasocial.com/public_html
+```
+Google verification and TikTok review both check that quorlasocial.com explains the app and links to the privacy policy.
+Request-access buttons email support@quorlasocial.com: make sure that mailbox exists (Hestia → Mail).
+
 ## To do next
 1. **TikTok, YouTube and Google Business Profile are on the wrong client** (C2C Agricorp India). After the next
    deploy, open Connections → C2C Agricorp India and click **Move** on each card, then pick

site/index.html

@@ -0,0 +1,223 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Quorla · Social media management for agencies</title>
+<meta name="description" content="Quorla helps marketing agencies plan, approve and publish client content to Instagram, Facebook, TikTok, YouTube, LinkedIn, Google Business Profile and more, with reports clients can read.">
+<link rel="icon" type="image/png" href="/assets/favicon.png">
+<link rel="apple-touch-icon" href="/assets/apple-touch-icon.png">
+<meta name="theme-color" content="#242142">
+<meta property="og:title" content="Quorla">
+<meta property="og:description" content="Plan, approve and publish client content on every platform, from one place.">
+<meta property="og:image" content="https://quorlasocial.com/assets/apple-touch-icon.png">
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Plus+Jakarta+Sans:wght@700;800&display=swap" rel="stylesheet">
+<style>
+  :root {
+    --navy: #242142; --navy-2: #3b3778; --coral: #fc6d45; --coral-deep: #c2461a;
+    --ink: #1f2024; --muted: #5d6070; --line: #e6e5ef; --soft: #f6f5fb; --bg: #ffffff;
+  }
+  * { box-sizing: border-box; }
+  html { -webkit-font-smoothing: antialiased; }
+  body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.6 Inter, "Segoe UI", system-ui, sans-serif; }
+  h1, h2, h3 { font-family: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif; letter-spacing: -0.015em; margin: 0; }
+  a { color: inherit; }
+  .wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
+  :focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; border-radius: 4px; }
+
+  /* header */
+  header.top { position: sticky; top: 0; z-index: 5; background: rgba(255,255,255,.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
+  header.top .wrap { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 16px; }
+  header.top img { height: 30px; width: auto; display: block; }
+  nav.links { display: flex; align-items: center; gap: 24px; font-size: 14.5px; font-weight: 500; }
+  nav.links a { text-decoration: none; color: var(--muted); }
+  nav.links a:hover { color: var(--ink); }
+  .btn { display: inline-flex; align-items: center; justify-content: center; height: 42px; padding: 0 18px; border-radius: 8px; font-weight: 600; font-size: 15px; text-decoration: none; border: 1px solid transparent; white-space: nowrap; }
+  .btn-primary { background: var(--navy); color: #fff; }
+  .btn-primary:hover { background: var(--navy-2); }
+  .btn-ghost { border-color: #d6d4e4; color: var(--navy); background: #fff; }
+  .btn-ghost:hover { background: var(--soft); }
+  .btn-coral { background: var(--coral); color: var(--navy); }
+  .btn-coral:hover { background: #ff8460; }
+  nav.links .btn { height: 36px; font-size: 14px; color: #fff; }
+
+  /* hero */
+  .hero { background: var(--navy); color: #fff; position: relative; overflow: hidden; }
+  .hero::after { content: ""; position: absolute; right: -180px; top: -180px; width: 560px; height: 560px; border-radius: 50%; background: radial-gradient(circle, rgba(252,109,69,.32), transparent 65%); pointer-events: none; }
+  .hero .wrap { position: relative; z-index: 1; padding-top: 88px; padding-bottom: 96px; display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; }
+  .eyebrow { font-size: 12.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--coral); margin: 0 0 16px; }
+  .hero h1 { font-size: clamp(36px, 5vw, 56px); line-height: 1.06; font-weight: 800; }
+  .hero p.lead { color: #cfcde3; font-size: 18px; max-width: 540px; margin: 20px 0 32px; }
+  .hero .ctas { display: flex; gap: 12px; flex-wrap: wrap; }
+  .hero .btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.28); }
+  .hero .btn-ghost:hover { background: rgba(255,255,255,.08); }
+
+  /* approval mock */
+  .mock { background: #fff; color: var(--ink); border-radius: 14px; padding: 18px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.45); font-size: 14px; }
+  .mock .row { display: flex; align-items: center; gap: 10px; }
+  .mock .who { font-weight: 600; }
+  .mock .sub { color: var(--muted); font-size: 12.5px; }
+  .mock .media { margin: 14px 0; height: 150px; border-radius: 10px; background: linear-gradient(135deg, #3b3778, #242142 55%, #fc6d45); display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 13px; letter-spacing: .04em; }
+  .mock .cap { color: #3a3c46; }
+  .chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0 14px; }
+  .chip { font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--soft); color: var(--navy); border: 1px solid var(--line); }
+  .mock .bar { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--line); padding-top: 12px; }
+  .pill { font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: #fff0ea; color: var(--coral-deep); }
+  .mock .approve { height: 34px; font-size: 13.5px; padding: 0 14px; }
+  .avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--soft); border: 1px solid var(--line); display: grid; place-items: center; font-weight: 700; color: var(--navy); font-size: 13px; flex-shrink: 0; }
+
+  /* sections */
+  section.block { padding: 88px 0; }
+  section.alt { background: var(--soft); }
+  .head { max-width: 640px; margin-bottom: 44px; }
+  .head h2 { font-size: clamp(28px, 3.4vw, 38px); line-height: 1.15; font-weight: 800; color: var(--navy); }
+  .head p { color: var(--muted); font-size: 17px; margin: 12px 0 0; }
+  .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: step; }
+  .step { border-top: 2px solid var(--navy); padding-top: 18px; }
+  .step::before { counter-increment: step; content: "0" counter(step); font: 700 13px "Plus Jakarta Sans", sans-serif; color: var(--coral-deep); }
+  .step h3 { font-size: 18px; margin: 8px 0 6px; color: var(--navy); }
+  .step p { margin: 0; color: var(--muted); font-size: 15px; }
+  .grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
+  .card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 22px; }
+  .card h3 { font-size: 17px; color: var(--navy); margin-bottom: 6px; }
+  .card p { margin: 0; color: var(--muted); font-size: 15px; }
+  .platforms { display: flex; flex-wrap: wrap; gap: 10px; }
+  .platforms span { padding: 10px 16px; border-radius: 10px; background: #fff; border: 1px solid var(--line); font-weight: 600; color: var(--navy); font-size: 15px; }
+  .note { color: var(--muted); font-size: 14px; margin-top: 18px; }
+
+  .cta { background: var(--navy); color: #fff; border-radius: 18px; padding: 48px; display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
+  .cta h2 { font-size: clamp(26px, 3vw, 34px); }
+  .cta p { color: #cfcde3; margin: 8px 0 0; }
+
+  footer { border-top: 1px solid var(--line); padding: 36px 0 48px; font-size: 14px; color: var(--muted); }
+  footer .wrap { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; align-items: center; }
+  footer nav { display: flex; gap: 20px; flex-wrap: wrap; }
+  footer a { text-decoration: none; }
+  footer a:hover { color: var(--ink); text-decoration: underline; }
+
+  @media (max-width: 900px) {
+    .hero .wrap { grid-template-columns: 1fr; padding-top: 56px; padding-bottom: 64px; }
+    .steps { grid-template-columns: 1fr 1fr; }
+    .grid3 { grid-template-columns: 1fr; }
+    nav.links a:not(.btn) { display: none; }
+  }
+  @media (max-width: 560px) {
+    .wrap { padding: 0 16px; }
+    .steps { grid-template-columns: 1fr; }
+    section.block { padding: 64px 0; }
+    .cta { padding: 32px 22px; }
+  }
+</style>
+</head>
+<body>
+
+<header class="top">
+  <div class="wrap">
+    <a href="/" aria-label="Quorla home"><img src="/assets/logo.png" alt="Quorla" width="107" height="30"></a>
+    <nav class="links" aria-label="Main">
+      <a href="#how">How it works</a>
+      <a href="#features">Features</a>
+      <a href="#platforms">Platforms</a>
+      <a class="btn btn-primary" href="https://app.quorlasocial.com">Sign in</a>
+    </nav>
+  </div>
+</header>
+
+<main>
+  <section class="hero">
+    <div class="wrap">
+      <div>
+        <p class="eyebrow">Social media management for agencies</p>
+        <h1>Every client's social, planned, approved and posted from one place.</h1>
+        <p class="lead">Quorla helps marketing agencies plan content, get each post approved, and publish it to the right client account on the right platform at the client's local time. Then it shows the client what worked.</p>
+        <div class="ctas">
+          <a class="btn btn-coral" href="mailto:support@quorlasocial.com?subject=Quorla%20access">Request access</a>
+          <a class="btn btn-ghost" href="https://app.quorlasocial.com">Sign in</a>
+        </div>
+      </div>
+      <div class="mock" aria-label="Example: a post waiting for approval">
+        <div class="row">
+          <div class="avatar" aria-hidden="true">GC</div>
+          <div><div class="who">Green Corner Café</div><div class="sub">Thu 11:30 a.m. · client's local time</div></div>
+        </div>
+        <div class="media" aria-hidden="true">VERTICAL VIDEO · 0:18</div>
+        <div class="cap">Fresh focaccia every morning at 8. First 20 people get a free cortado this Saturday.</div>
+        <div class="chips"><span class="chip">Instagram Reel</span><span class="chip">TikTok</span><span class="chip">Google Business Profile</span></div>
+        <div class="bar"><span class="pill">Waiting for approval</span><span class="btn btn-primary approve">Approve</span></div>
+      </div>
+    </div>
+  </section>
+
+  <section class="block" id="how">
+    <div class="wrap">
+      <div class="head">
+        <h2>How it works</h2>
+        <p>One workflow for every client, with a person signing off before anything goes live.</p>
+      </div>
+      <div class="steps">
+        <div class="step"><h3>Connect</h3><p>An admin connects each client's accounts once, with the platform's own sign-in. Quorla never asks for their passwords.</p></div>
+        <div class="step"><h3>Plan</h3><p>The team uploads finished work to each client's library and builds the week's posts from it, with captions written for each platform.</p></div>
+        <div class="step"><h3>Approve</h3><p>An admin reviews the exact caption, media and settings. Nothing is posted without that approval.</p></div>
+        <div class="step"><h3>Publish and report</h3><p>Quorla posts at the scheduled time, keeps within each platform's limits, and turns the results into a report the client can read.</p></div>
+      </div>
+    </div>
+  </section>
+
+  <section class="block alt" id="features">
+    <div class="wrap">
+      <div class="head">
+        <h2>Built for teams running many client accounts</h2>
+        <p>Each client keeps their own voice, accounts and data. Your team sees what it needs to.</p>
+      </div>
+      <div class="grid3">
+        <div class="card"><h3>Content library</h3><p>Designers and editors upload finished posts per client. Only approved items can be scheduled.</p></div>
+        <div class="card"><h3>Approval before publishing</h3><p>Drafts wait for an admin. Approval covers the exact caption and media, not just the idea.</p></div>
+        <div class="card"><h3>Client time zones</h3><p>Posts go out at the client's local hour, wherever your team is working from.</p></div>
+        <div class="card"><h3>Comments and messages</h3><p>See comments and DMs per client and draft replies. A person approves every reply.</p></div>
+        <div class="card"><h3>Reports clients can read</h3><p>Monthly audits and weekly reports in plain language, exported as PDFs with your agency's branding.</p></div>
+        <div class="card"><h3>Team roles</h3><p>Admins connect accounts and approve. Designers, editors and managers get the views they need.</p></div>
+      </div>
+    </div>
+  </section>
+
+  <section class="block" id="platforms">
+    <div class="wrap">
+      <div class="head">
+        <h2>Platforms</h2>
+        <p>Connect the accounts each client actually uses. Every platform has its own post settings, and Quorla respects its rules and rate limits.</p>
+      </div>
+      <div class="platforms">
+        <span>Instagram</span><span>Facebook</span><span>TikTok</span><span>YouTube</span><span>Google Business Profile</span><span>LinkedIn</span><span>Pinterest</span><span>Threads</span><span>Reddit</span>
+      </div>
+      <p class="note">On TikTok, creators choose who can see each post and whether comments, Duet and Stitch are on, and Quorla shows TikTok's music and branded-content terms before posting.</p>
+    </div>
+  </section>
+
+  <section class="block" style="padding-top:0">
+    <div class="wrap">
+      <div class="cta">
+        <div>
+          <h2>Run your clients' social in one place</h2>
+          <p>Quorla is available to agencies by invitation. Tell us about your team.</p>
+        </div>
+        <a class="btn btn-coral" href="mailto:support@quorlasocial.com?subject=Quorla%20access">Request access</a>
+      </div>
+    </div>
+  </section>
+</main>
+
+<footer>
+  <div class="wrap">
+    <div>© 2026 Quorla · Metatroncube Software Solutions, Waterloo, Ontario, Canada</div>
+    <nav aria-label="Legal">
+      <a href="https://app.quorlasocial.com/privacy">Privacy Policy</a>
+      <a href="https://app.quorlasocial.com/terms">Terms of Service</a>
+      <a href="mailto:support@quorlasocial.com">support@quorlasocial.com</a>
+    </nav>
+  </div>
+</footer>
+
+</body>
+</html>