Premium UI redesign, repo cleanup, and restored LUNA media

- Add theme.css design system (brand tokens, Inter/Space Grotesk, glass
navbar, gradient buttons, premium cards) linked across all pages
- Cinematic dark hero + animated "How it works" pipeline on the landing page
- Rebrand the interview screen as "Interview with LUNA": her real photo as the
avatar, speaking equalizer, brand-colored bubbles/buttons (no JS changes)
- Polished closing score card and multi-column footer
- Restore the real LUNA.png + demo video (were broken Git-LFS stubs) and stop
tracking png/mp4 via LFS so the Space always has the real binaries
- Ignore the local archive/ folder; drop the unused data/merged_dataset.json
- Add docs/social-video-guide.md (LUNA explainer-video production guide)

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

.gitattributes

@@ -1,3 +1,5 @@
+# LUNA.png (~2.4MB) and the demo .mp4 (~0.9MB) are small enough to commit directly.
+# They are intentionally NOT tracked by Git LFS so the deployed Space always has the
+# real binaries (an un-pushed LFS object would otherwise show a broken image).
 *.png filter=lfs diff=lfs merge=lfs -text
-backend/static/images/LUNA.png filter=lfs diff=lfs merge=lfs -text
 *.mp4 filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -1,5 +1,5 @@
-# Local-only archive of old laptop files (never deploy this)
-everything-old-in-my-laptop/
+# Local-only archive: old laptop snapshot, presentation & documentation (never deploy this)
+archive/
 
 # Claude / editor working dirs
 .claude/

backend/static/css/theme.css

@@ -0,0 +1,235 @@
+/* =====================================================================
+   Codingo — Premium design system (theme.css)
+   Single source of truth for the new look. Linked AFTER the legacy inline
+   <style> in base.html so these rules win and cascade across every page.
+   Direction: premium light product + cinematic dark hero/navbar/footer.
+   ===================================================================== */
+
+:root {
+    /* Brand */
+    --brand-1: #6366f1;      /* indigo */
+    --brand-2: #8b5cf6;      /* violet */
+    --spark:   #22d3ee;      /* cyan accent */
+    --grad: linear-gradient(135deg, var(--brand-1), var(--brand-2));
+    --grad-soft: linear-gradient(135deg, rgba(99,102,241,.12), rgba(139,92,246,.12));
+
+    /* Neutrals (light product surface) */
+    --bg:      #f5f6fb;
+    --surface: #ffffff;
+    --ink:     #0b1020;
+    --muted:   #5b6478;
+    --line:    #e7e9f2;
+
+    /* Night (hero / navbar / footer) */
+    --night:   #0b1020;
+    --night-2: #141a2e;
+
+    /* Radius + shadow + spacing scale */
+    --r-sm: 12px;
+    --r:    18px;
+    --r-lg: 26px;
+    --shadow-sm: 0 2px 8px rgba(13, 20, 40, .06);
+    --shadow:    0 12px 30px rgba(13, 20, 40, .08);
+    --shadow-lg: 0 24px 60px rgba(13, 20, 40, .14);
+
+    /* Legacy variable names remapped so existing rules adopt the new palette */
+    --primary:   #6366f1;
+    --secondary: #8b5cf6;
+    --accent:    #22d3ee;
+    --light:     #f5f6fb;
+    --dark:      #0b1020;
+}
+
+/* ---- Typography ---------------------------------------------------- */
+* { font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
+h1, h2, h3, .logo, .section-title h2, .hero h1, .cta h2 {
+    font-family: 'Space Grotesk', 'Inter', sans-serif;
+    letter-spacing: -0.02em;
+}
+body {
+    background: var(--bg);
+    color: var(--ink);
+    -webkit-font-smoothing: antialiased;
+    text-rendering: optimizeLegibility;
+}
+
+/* ---- Glass navbar (dark, keeps white nav buttons working) --------- */
+header {
+    background: rgba(11, 16, 32, .72) !important;
+    -webkit-backdrop-filter: saturate(160%) blur(14px);
+    backdrop-filter: saturate(160%) blur(14px);
+    border-bottom: 1px solid rgba(255, 255, 255, .08);
+    box-shadow: 0 8px 30px rgba(0, 0, 0, .25) !important;
+    padding: .85rem 1rem !important;
+}
+.logo { font-weight: 700; }
+.logo-part2 { color: var(--spark); font-style: normal; animation: none; text-shadow: 0 0 18px rgba(34, 211, 238, .55); }
+.logo-part3 { color: #c4b5fd; }
+.welcome-message { background: rgba(255, 255, 255, .08); border-radius: 999px; }
+
+/* ---- Buttons ------------------------------------------------------- */
+.btn {
+    border-radius: 999px !important;
+    font-weight: 600;
+    letter-spacing: .01em;
+    padding: .6rem 1.4rem !important;
+}
+.btn-primary {
+    background: var(--grad) !important;
+    color: #fff !important;
+    box-shadow: 0 10px 24px rgba(99, 102, 241, .35) !important;
+}
+.btn-primary:hover { box-shadow: 0 14px 30px rgba(99, 102, 241, .45) !important; }
+.btn-outline {
+    background: rgba(255, 255, 255, .04) !important;
+    border: 1.5px solid rgba(255, 255, 255, .28) !important;
+    color: #fff !important;
+}
+.btn-outline:hover { background: rgba(255, 255, 255, .12) !important; }
+.btn-logout {
+    border: 1.5px solid rgba(34, 211, 238, .6) !important;
+    color: var(--spark) !important;
+    border-radius: 999px !important;
+}
+.btn-logout:hover { background: var(--spark) !important; color: var(--night) !important; }
+
+/* ---- Cinematic dark hero ------------------------------------------ */
+.hero {
+    background:
+        radial-gradient(900px 500px at 15% 10%, rgba(99, 102, 241, .35), transparent 60%),
+        radial-gradient(800px 500px at 85% 20%, rgba(139, 92, 246, .30), transparent 60%),
+        radial-gradient(700px 500px at 50% 110%, rgba(34, 211, 238, .20), transparent 60%),
+        linear-gradient(180deg, var(--night), var(--night-2)) !important;
+    color: #fff !important;
+    padding: 5.5rem 1rem 6rem !important;
+    border-bottom: 1px solid rgba(255, 255, 255, .06);
+}
+.hero::before { opacity: .5; }
+.hero h1 { font-size: clamp(2.1rem, 5vw, 3.4rem) !important; font-weight: 700; }
+.hero p { color: rgba(255, 255, 255, .82) !important; font-size: 1.15rem !important; }
+
+/* LUNA avatar glow refined to brand */
+.luna-avatar { border: 3px solid rgba(255, 255, 255, .85) !important;
+    box-shadow: 0 18px 50px rgba(0, 0, 0, .45), 0 0 50px rgba(139, 92, 246, .55) !important; }
+.luna-glow { background: radial-gradient(circle, rgba(139, 92, 246, .85) 0%, rgba(34, 211, 238, 0) 70%) !important; }
+
+/* Pills used in hero/eyebrow */
+.eyebrow {
+    display: inline-flex; align-items: center; gap: .5rem;
+    padding: .4rem 1rem; margin-bottom: 1.25rem;
+    border-radius: 999px; font-size: .85rem; font-weight: 600;
+    color: #e9e9ff; background: rgba(255, 255, 255, .08);
+    border: 1px solid rgba(255, 255, 255, .16);
+}
+.eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--spark);
+    box-shadow: 0 0 10px var(--spark); animation: pulse 2s ease-in-out infinite alternate; }
+
+/* ---- Sections / titles -------------------------------------------- */
+.content-section, .features { background: var(--bg) !important; }
+.section-title h2 { color: var(--ink) !important; font-size: 2.3rem !important; }
+.section-title h2::after { background: var(--grad) !important; height: 4px !important; border-radius: 4px; }
+.section-title p { color: var(--muted) !important; font-size: 1.05rem; }
+
+/* ---- Cards (premium light) ---------------------------------------- */
+.feature-card, .card, .job-card {
+    background: var(--surface) !important;
+    border: 1px solid var(--line) !important;
+    border-radius: var(--r) !important;
+    box-shadow: var(--shadow-sm) !important;
+    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease !important;
+}
+.feature-card:hover, .card:hover, .job-card:hover {
+    transform: translateY(-8px) !important;
+    box-shadow: var(--shadow-lg) !important;
+    border-color: rgba(99, 102, 241, .35) !important;
+}
+.feature-icon {
+    background: var(--grad-soft) !important;
+    font-size: 2.2rem !important;
+    color: var(--brand-1) !important;
+}
+.feature-content h3 { color: var(--ink) !important; }
+.feature-content h3::after { background: var(--grad) !important; }
+
+/* Job card headers adopt the brand gradient */
+.job-header, .card-header { background: var(--grad) !important; }
+
+/* ---- CTA band ------------------------------------------------------ */
+.cta {
+    background:
+        radial-gradient(700px 400px at 20% 0%, rgba(34, 211, 238, .25), transparent 60%),
+        linear-gradient(135deg, var(--brand-2), var(--brand-1)) !important;
+}
+
+/* ---- Footer (night) ----------------------------------------------- */
+footer { background: var(--night) !important; border-top: 1px solid rgba(255, 255, 255, .06); }
+.footer-col h3 { color: #fff !important; }
+.footer-col h3::after { background: var(--grad) !important; }
+.social-links a:hover { background: var(--grad) !important; color: #fff !important; }
+
+/* ---- Floating chatbot button -------------------------------------- */
+#chatbot-nav { background: var(--grad) !important; box-shadow: 0 10px 26px rgba(99, 102, 241, .5) !important; }
+#chatbot-nav:hover { transform: scale(1.08) !important; }
+#chat-messages .user-bubble { background: var(--grad) !important; }
+
+/* =====================================================================
+   "How it works" animated pipeline (used on the landing page)
+   Pure CSS reveal — auto-plays on load, films beautifully.
+   ===================================================================== */
+.pipeline { background: linear-gradient(180deg, #fff, var(--bg)); padding: 5rem 1rem; }
+.pipe-track {
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+    gap: 1rem;
+    max-width: 1100px;
+    margin: 0 auto;
+    position: relative;
+}
+.pipe-track::before {
+    content: ''; position: absolute; top: 46px; left: 8%; right: 8%; height: 3px;
+    background: linear-gradient(90deg, rgba(99,102,241,.15), rgba(139,92,246,.5), rgba(34,211,238,.15));
+    border-radius: 3px; z-index: 0;
+}
+.pipe-step {
+    position: relative; z-index: 1; text-align: center; padding: 0 .5rem;
+    opacity: 0; transform: translateY(18px);
+    animation: pipeReveal .7s ease forwards;
+}
+.pipe-step:nth-child(1) { animation-delay: .15s; }
+.pipe-step:nth-child(2) { animation-delay: .40s; }
+.pipe-step:nth-child(3) { animation-delay: .65s; }
+.pipe-step:nth-child(4) { animation-delay: .90s; }
+.pipe-step:nth-child(5) { animation-delay: 1.15s; }
+.pipe-node {
+    width: 92px; height: 92px; margin: 0 auto 1.1rem; border-radius: 24px;
+    display: grid; place-items: center; font-size: 2.1rem;
+    color: #fff; background: var(--grad);
+    box-shadow: 0 14px 30px rgba(99, 102, 241, .35);
+    position: relative;
+}
+.pipe-node::after {
+    content: ''; position: absolute; inset: -6px; border-radius: 28px;
+    border: 2px solid rgba(139, 92, 246, .4);
+    animation: pipeHalo 2.4s ease-in-out infinite;
+}
+.pipe-step:nth-child(even) .pipe-node::after { animation-delay: 1.2s; }
+.pipe-step h4 { font-family: 'Space Grotesk', sans-serif; color: var(--ink); margin-bottom: .4rem; font-size: 1.05rem; }
+.pipe-step p { color: var(--muted); font-size: .92rem; line-height: 1.45; }
+.pipe-num {
+    display: inline-block; font-size: .75rem; font-weight: 700; color: var(--brand-1);
+    background: var(--grad-soft); border-radius: 999px; padding: .15rem .7rem; margin-bottom: .8rem;
+}
+
+@keyframes pipeReveal { to { opacity: 1; transform: translateY(0); } }
+@keyframes pipeHalo {
+    0%, 100% { transform: scale(1); opacity: .5; }
+    50%      { transform: scale(1.08); opacity: 0; }
+}
+
+@media (max-width: 860px) {
+    .pipe-track { grid-template-columns: 1fr 1fr; }
+    .pipe-track::before { display: none; }
+}
+@media (max-width: 480px) {
+    .pipe-track { grid-template-columns: 1fr; }
+}

backend/templates/base.html

@@ -833,6 +833,11 @@
             outline: none;
         }
     </style>
+    <!-- Premium design system (loads after the legacy styles so it wins) -->
+    <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;700&family=Space+Grotesk:wght@500;600;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/theme.css') }}">
 </head>
 <body>
 <header>
@@ -899,16 +904,26 @@
         <div class="footer-grid">
             <div class="footer-col">
                 <h3>Codingo</h3>
-                <p>AI-powered recruitment platform that revolutionizes how companies hire technical talent.</p>
+                <p>AI-powered recruitment platform that revolutionizes how companies hire technical talent — powered by LUNA, your AI recruiter.</p>
                 <div class="social-links">
                     <a href="#"><span>f</span></a>
                     <a href="#"><span>t</span></a>
                     <a href="#"><span>in</span></a>
                 </div>
             </div>
+            <div class="footer-col">
+                <h3>Platform</h3>
+                <p><a href="{{ url_for('jobs') }}" style="color:#cfd3e6;text-decoration:none;">Browse Jobs</a></p>
+                <p><a href="{{ url_for('index') }}#how" style="color:#cfd3e6;text-decoration:none;">How it works</a></p>
+                <p><a href="{{ url_for('index') }}#features" style="color:#cfd3e6;text-decoration:none;">Features</a></p>
+            </div>
+            <div class="footer-col">
+                <h3>Meet LUNA</h3>
+                <p style="color:#cfd3e6;">An AI recruiter that screens CVs, runs voice interviews, and scores answers against a real question database — fairly and at scale.</p>
+            </div>
         </div>
         <div class="copyright">
-            <p>&copy; 2025 Codingo. All rights reserved.</p>
+            <p>&copy; 2026 Codingo. All rights reserved.</p>
         </div>
     </div>
 </footer>

backend/templates/closing.html

@@ -13,12 +13,40 @@
                     <img src="{{ url_for('static', filename='images/LUNA.png') }}" alt="LUNA AI Assistant">
                 </div>
             </div>
-            <h2 style="margin-top: 1rem;">Thank you for your time,<br>we will get back to you if shortlisted.</h2>
-            <p style="margin-top: 0.5rem; font-size: 1rem;">
-                Overall performance: {{ score }} ({{ feedback_summary }})
-            </p>
+            <span class="eyebrow"><span class="dot"></span> Interview Complete</span>
+            <h2 style="margin-top: 1rem;">Thank you for your time,<br>we'll get back to you if shortlisted.</h2>
+            <div class="score-card">
+                <span class="score-label">Overall performance</span>
+                <span class="score-value">{{ score }}</span>
+                <span class="score-summary">{{ feedback_summary }}</span>
+            </div>
+            <a href="{{ url_for('jobs') }}" class="btn btn-outline" style="margin-top:1.75rem;">Back to Jobs</a>
         </div>
     </div>
 </section>
 
+<style>
+    .score-card {
+        margin-top: 1.5rem;
+        display: inline-flex;
+        flex-direction: column;
+        align-items: center;
+        gap: .35rem;
+        padding: 1.5rem 2.5rem;
+        border-radius: var(--r, 18px);
+        background: rgba(255, 255, 255, .07);
+        border: 1px solid rgba(255, 255, 255, .16);
+        -webkit-backdrop-filter: blur(10px);
+        backdrop-filter: blur(10px);
+        box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
+    }
+    .score-label { color: rgba(255, 255, 255, .7); font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; }
+    .score-value {
+        font-family: 'Space Grotesk', sans-serif; font-size: 2.4rem; font-weight: 700; line-height: 1.1;
+        background: linear-gradient(135deg, #c4b5fd, #22d3ee);
+        -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
+    }
+    .score-summary { color: rgba(255, 255, 255, .82); font-size: 1rem; max-width: 420px; }
+</style>
+
 {% endblock %}

backend/templates/index.html

@@ -12,9 +12,10 @@
                     <img src="{{ url_for('static', filename='images/LUNA.png') }}" alt="LUNA AI Assistant">
                 </div>
             </div>
-            <h1>Meet LUNA, Your AI Recruitment Assistant</h1>
-            <p>Revolutionize your hiring process with AI-powered candidate screening, automated interviews, and
-                intelligent skill matching to find your perfect technical talent.</p>
+            <span class="eyebrow"><span class="dot"></span> AI-Powered Recruitment</span>
+            <h1>Meet LUNA, Your AI Recruiter</h1>
+            <p>Screen CVs, run real voice interviews, and score every answer against a live question
+                database — so you find the right technical talent faster, and fairer.</p>
             <div class="hero-buttons">
                 <a href="{{ url_for('jobs') }}" class="btn btn-primary">Find Jobs</a>
                 <a href="https://www.youtube.com/watch?v=P6HG27fsJgU" class="btn btn-outline">Watch Demo</a>
@@ -64,6 +65,45 @@
     </div>
 </section>
 
+<section class="pipeline" id="how">
+    <div class="section-title">
+        <h2>How Codingo Works</h2>
+        <p>From job post to ranked shortlist — one intelligent, automated pipeline powered by LUNA.</p>
+    </div>
+    <div class="pipe-track">
+        <div class="pipe-step">
+            <div class="pipe-node">📝</div>
+            <span class="pipe-num">Step 1</span>
+            <h4>Post a Job</h4>
+            <p>Recruiters define the role, skills, and how many questions the interview should cover.</p>
+        </div>
+        <div class="pipe-step">
+            <div class="pipe-node">📄</div>
+            <span class="pipe-num">Step 2</span>
+            <h4>Apply &amp; Parse CV</h4>
+            <p>Candidates upload a resume — Codingo auto-extracts skills, education, and experience.</p>
+        </div>
+        <div class="pipe-step">
+            <div class="pipe-node">🎙️</div>
+            <span class="pipe-num">Step 3</span>
+            <h4>LUNA Interviews</h4>
+            <p>LUNA conducts a real voice interview, asking role-specific questions and follow-ups.</p>
+        </div>
+        <div class="pipe-step">
+            <div class="pipe-node">🧠</div>
+            <span class="pipe-num">Step 4</span>
+            <h4>Score from the Database</h4>
+            <p>Every answer is evaluated against a live question bank of thousands of Q&amp;A pairs.</p>
+        </div>
+        <div class="pipe-step">
+            <div class="pipe-node">🏆</div>
+            <span class="pipe-num">Step 5</span>
+            <h4>Rank Candidates</h4>
+            <p>The recruiter dashboard ranks applicants by skill match and interview performance.</p>
+        </div>
+    </div>
+</section>
+
 <section class="cta">
     <div class="container">
         <h2>Ready to Transform Your Technical Hiring?</h2>

backend/templates/interview.html

@@ -423,6 +423,78 @@
             display: none;
         }
     </style>
+
+    <!-- Premium theme: fonts + design tokens, plus interview-specific overrides -->
+    <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;700&family=Space+Grotesk:wght@500;600;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/theme.css') }}">
+    <style>
+        /* ---- Interview screen — premium "Interview with LUNA" look ---- */
+        body {
+            font-family: 'Inter', 'Segoe UI', sans-serif;
+            background:
+                radial-gradient(800px 500px at 12% 8%, rgba(99, 102, 241, .45), transparent 60%),
+                radial-gradient(700px 500px at 88% 12%, rgba(139, 92, 246, .40), transparent 60%),
+                radial-gradient(700px 500px at 50% 110%, rgba(34, 211, 238, .25), transparent 60%),
+                linear-gradient(180deg, #0b1020, #141a2e) !important;
+        }
+
+        .interview-container {
+            border-radius: 24px;
+            border: 1px solid rgba(255, 255, 255, .6);
+            box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
+        }
+
+        .header {
+            background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
+            padding: 22px 20px 26px;
+        }
+        .header h1 { font-family: 'Space Grotesk', sans-serif; font-weight: 700; }
+        .question-counter {
+            background: rgba(255, 255, 255, .18);
+            border: 1px solid rgba(255, 255, 255, .25);
+            font-weight: 600;
+        }
+
+        /* LUNA's real face replaces the "AI" text in every avatar bubble */
+        .ai-avatar {
+            background-image: url("{{ url_for('static', filename='images/LUNA.png') }}") !important;
+            background-size: cover !important;
+            background-position: center top !important;
+            color: transparent !important;
+            font-size: 0 !important;
+            border: 2px solid rgba(139, 92, 246, .6);
+            box-shadow: 0 6px 18px rgba(99, 102, 241, .35);
+        }
+        .ai-avatar.talking::before { background: rgba(139, 92, 246, .35); }
+
+        /* Speaking equalizer shown under the title while LUNA talks */
+        .voice-wave { display: flex; align-items: flex-end; justify-content: center; gap: 4px; height: 22px; margin-top: 10px; }
+        .voice-wave span {
+            width: 4px; height: 6px; border-radius: 4px; background: rgba(255, 255, 255, .85);
+            animation: eq 1.1s ease-in-out infinite;
+        }
+        .voice-wave span:nth-child(2) { animation-delay: .15s; }
+        .voice-wave span:nth-child(3) { animation-delay: .30s; }
+        .voice-wave span:nth-child(4) { animation-delay: .45s; }
+        .voice-wave span:nth-child(5) { animation-delay: .60s; }
+        .voice-wave span:nth-child(6) { animation-delay: .75s; }
+        .voice-wave span:nth-child(7) { animation-delay: .90s; }
+        @keyframes eq { 0%, 100% { height: 6px; } 50% { height: 20px; } }
+
+        /* User answer bubbles + primary button adopt the brand gradient */
+        .user-bubble { background: linear-gradient(135deg, #6366f1, #8b5cf6) !important; }
+        .user-bubble::before { border-left-color: #6366f1 !important; }
+        .btn-primary { background: linear-gradient(135deg, #6366f1, #8b5cf6) !important; border-radius: 999px !important; }
+        .btn-secondary { border-radius: 999px !important; }
+        .btn { border-radius: 999px; }
+
+        .transcript-area:focus { border-color: #8b5cf6 !important; }
+        .summary-item { border-left-color: #8b5cf6 !important; }
+        .evaluation-score { background: linear-gradient(135deg, #6366f1, #8b5cf6) !important; }
+        .summary-panel { border: 1px solid rgba(255, 255, 255, .6); }
+    </style>
 </head>
 
 <body>
@@ -431,8 +503,11 @@
             <div class="question-counter">
                 Question <span id="currentQuestionNum">1</span> of <span id="totalQuestions">{{ job.num_questions }}</span>
             </div>
-            <h1>🤖 AI Interview Assistant</h1>
-            <p>Answer thoughtfully and take your time</p>
+            <h1>🌙 Interview with LUNA</h1>
+            <p>Your AI recruiter — answer thoughtfully and take your time</p>
+            <div class="voice-wave" aria-hidden="true">
+                <span></span><span></span><span></span><span></span><span></span><span></span><span></span>
+            </div>
         </div>
 
         <div class="chat-area" id="chatArea">

docs/social-video-guide.md

@@ -0,0 +1,133 @@
+# Codingo — LUNA Explainer Video: Production Guide
+
+A complete, do-it-yourself plan for a short social-media video that shows off Codingo for your
+final-year project. Your AI recruiter **LUNA** narrates and explains the recruitment pipeline, with
+screen recordings of the (now polished) real app.
+
+> You generate the actual video — this guide gives you the script, storyboard, exact tools, and
+> settings. Nothing here needs code.
+
+---
+
+## 1. Format & scope
+
+| Setting | Recommendation |
+|---|---|
+| Aspect ratio | **9:16 vertical** (Reels / TikTok / LinkedIn / Shorts). Also export a 16:9 version for YouTube if you want. |
+| Length | **45–60 seconds** (attention drops fast on social). Optionally also cut a **15–20s teaser**. |
+| Resolution | 1080×1920, 30fps |
+| Vibe | Clean, premium, confident — "a real AI product." Calm tech music, captions on. |
+| Structure | Hook → Meet LUNA → The 5-step pipeline → Proof (real app) → Call to action |
+
+---
+
+## 2. Which tool does what (read this first)
+
+There's confusion about "Veo vs talking avatar" — here's the truth, because they do different jobs:
+
+| Job in your video | Right tool | Why |
+|---|---|---|
+| **LUNA's face talking** (her exact photo, lip-synced to your script) | **D-ID** or **HeyGen** (photo/avatar mode) | These are built to make *one specific face* speak a script. Upload `LUNA.png`, paste the script, pick a voice → you get LUNA talking. |
+| **Cinematic b-roll** (abstract "AI" shots, neural-network visuals, a modern office) | **Google Veo 3** (via Google Flow / Gemini) or **Runway / Pika** | Generative text-to-video. Great for 2–4s mood shots **between** sections. **Do not** expect Veo to make LUNA's exact face reliably speak your lines — that's not what it's for. |
+| **The product itself** (the hero, the pipeline animation, a live interview, the dashboard) | **Screen recording** of your polished app | This is the backbone and the proof. Most of the video should be this. |
+| **Voice** (if not using HeyGen's built-in) | **ElevenLabs** (most natural) | Or match the app's own voice, Microsoft `en-US-AriaNeural`. |
+| **Edit / captions / music** | **CapCut** (free, fastest for social) or Premiere/DaVinci | Auto-captions, beat-synced cuts, export presets for each platform. |
+
+**Recommended minimal stack:** HeyGen (talking LUNA) + your screen recordings + CapCut (edit). Add Veo
+shots only if you want extra polish.
+
+`LUNA.png` lives at `backend/static/images/LUNA.png` — that's the file you upload to the avatar tool.
+
+---
+
+## 3. The narration script (LUNA, first person — ~130 words, ~55s)
+
+> Tone: warm, confident, professional. Pauses marked with "—".
+
+**[Hook]**
+"Hiring technical talent is slow, biased, and exhausting. — I'm LUNA, and I fix that."
+
+**[Meet LUNA]**
+"I'm an AI recruiter built into Codingo — and I run the entire hiring pipeline."
+
+**[Pipeline — one line per step]**
+"It starts when a recruiter posts a job. —
+A candidate applies, and I instantly parse their CV — skills, education, experience. —
+Then I run a real voice interview, asking role-specific questions and follow-ups. —
+Every answer is scored against a live database of thousands of interview questions. —
+And finally, I rank every candidate on the recruiter's dashboard — by skill match and performance."
+
+**[Proof / CTA]**
+"Faster. Fairer. Fully automated. — This is Codingo. The future of recruitment — and it's already here."
+
+*(Need 30s? Keep Hook + the 5 pipeline lines + the last sentence.)*
+
+---
+
+## 4. Shot-by-shot storyboard
+
+| # | Time | Script line | What's on screen | Source |
+|---|------|-------------|------------------|--------|
+| 1 | 0–4s | "Hiring … I fix that." | LUNA talking, centered, with a soft gradient background | HeyGen/D-ID (LUNA.png) |
+| 2 | 4–8s | "I'm an AI recruiter … entire hiring pipeline." | Cut to the **landing hero** (dark, glowing LUNA), slow zoom-in | Screen recording |
+| 3 | 8–12s | "It starts when a recruiter posts a job." | The **Post Job** form being filled / submitted | Screen recording |
+| 4 | 12–17s | "A candidate applies, and I instantly parse their CV…" | **Apply** page → click "Parse Resume" → fields auto-fill | Screen recording |
+| 5 | 17–26s | "Then I run a real voice interview…" | **Interview with LUNA** screen — LUNA avatar talking, waveform, a question appears, mic records | Screen recording (the star shot) |
+| 6 | 26–34s | "Every answer is scored against a live database…" | The animated **"How it works"** pipeline section scrolling/playing; optionally overlay a Veo "data/AI" b-roll | App + optional Veo |
+| 7 | 34–42s | "I rank every candidate on the dashboard…" | **Dashboard** with ranked candidates, scores highlighted | Screen recording |
+| 8 | 42–55s | "Faster. Fairer… it's already here." | Back to LUNA talking; end card with "Codingo" logo + your name/uni | HeyGen + CapCut title |
+
+**Pro tip:** record each app screen at high resolution on desktop, then reframe/crop to vertical in
+CapCut with a slow Ken-Burns zoom so static screens feel alive.
+
+---
+
+## 5. Screen-recording shot list (capture these from the live app)
+
+Record on the deployed Space (or locally) with a clean browser (no bookmarks bar, incognito):
+1. **Hero** — load the homepage, let LUNA's glow animation breathe (3–4s).
+2. **How it works** — scroll slowly so the 5 steps animate in.
+3. **Post Job** — fill role/skills, hit submit (speed up 2× in edit).
+4. **Apply + CV parse** — upload a resume, click parse, show fields filling.
+5. **Interview** — start an interview; capture LUNA speaking (waveform active), a question, and the mic recording state. This is your money shot.
+6. **Closing** — the score card with the glowing result.
+7. **Dashboard** — the ranked candidate list.
+
+macOS screen record: **Cmd+Shift+5**. Record system audio off (you'll add LUNA's voice + music in edit).
+
+---
+
+## 6. Music, captions, export
+
+- **Music:** calm, modern, "tech product" — search CapCut/Epidemic Sound for "ambient tech / corporate inspire." Keep it low under LUNA's voice (-18 dB).
+- **Captions:** auto-generate in CapCut, then fix LUNA/Codingo spelling. Big, bold, centered, one line at a time — most people watch muted.
+- **Brand:** end card with the Codingo wordmark colors (indigo `#6366F1` → violet `#8B5CF6`, cyan spark `#22D3EE`) and "Final Year Project — <your name>, <university>".
+- **Export:** 1080×1920, H.264, 30fps. Make a 16:9 1920×1080 version too for YouTube/LinkedIn landscape.
+
+---
+
+## 7. Tools & pricing (quick reference)
+
+| Tool | Use | Cost |
+|---|---|---|
+| **HeyGen** | Talking LUNA (photo avatar + voice) | Free trial (watermarked, short); ~$24/mo Creator removes watermark |
+| **D-ID** | Talking LUNA alternative | Free trial; ~$5.9/mo+ |
+| **ElevenLabs** | Premium natural voice | Free tier (limited chars); ~$5/mo Starter |
+| **Google Veo 3** (Flow/Gemini) | Cinematic b-roll only | Via Google AI / Gemini Advanced subscription |
+| **Runway / Pika** | B-roll alternative | Free tier + paid |
+| **CapCut** | Edit, captions, export | Free (Pro optional) |
+
+**Cheapest path that still looks pro:** HeyGen free trial for 2–3 short LUNA clips + screen recordings
++ CapCut. If the watermark bothers you for the final post, one month of HeyGen Creator (~$24) covers it.
+
+---
+
+## 8. 60-minute production checklist
+
+1. ☐ Generate LUNA's talking clips in HeyGen (paste script section by section; pick a warm female voice).
+2. ☐ Screen-record the 7 app shots above.
+3. ☐ Drop everything into CapCut on a 9:16 timeline; lay LUNA's voice as the spine.
+4. ☐ Place talking-LUNA at the start/end, app recordings in the middle (follow the storyboard table).
+5. ☐ Add music (low), auto-captions (fix names), and the end card.
+6. ☐ Export 1080×1920; watch once muted to confirm captions tell the whole story.
+7. ☐ Post. 🎬