Files
2026-09-14 11:46:07 +07:00

886 lines
28 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
<title>Hom Aroma — TikTok ROI & Performance Analysis | Mobile Case Study</title>
<meta name="description" content="Performance dashboard and campaign analysis used to monitor ROI, revenue, orders, and scaling decisions for Hom Aroma.">
<meta name="theme-color" content="#0B0F12">
<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=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Noto+Sans+Thai:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
:root {
--bg-base: #0B0F12;
--bg-surface: #12181F;
--bg-surface-elevated: #17212A;
--bg-card: rgba(23, 33, 42, 0.7);
--border-subtle: rgba(255, 255, 255, 0.08);
--border-focus: rgba(52, 211, 153, 0.4);
--text-primary: #F8FAFC;
--text-secondary: #94A3B8;
--text-muted: #64748B;
--accent-emerald: #10B981;
--accent-emerald-glow: rgba(16, 185, 129, 0.15);
--accent-cyan: #38BDF8;
--accent-gold: #FBBF24;
--accent-gold-glow: rgba(251, 191, 36, 0.12);
--radius-sm: 8px;
--radius-md: 14px;
--radius-lg: 20px;
--radius-pill: 9999px;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
-webkit-tap-highlight-color: transparent;
}
body {
background-color: var(--bg-base);
color: var(--text-primary);
font-family: 'Plus Jakarta Sans', 'Noto Sans Thai', -apple-system, BlinkMacSystemFont, sans-serif;
line-height: 1.55;
font-size: 14px;
padding-bottom: calc(85px + env(safe-area-inset-bottom, 20px));
overflow-x: hidden;
}
/* Ambient background glow */
.ambient-glow {
position: fixed;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 100vw;
height: 380px;
background: radial-gradient(circle at 50% 10%, rgba(16, 185, 129, 0.12) 0%, rgba(56, 189, 248, 0.05) 45%, transparent 70%);
pointer-events: none;
z-index: 0;
}
.container {
width: 100%;
max-width: 480px;
margin: 0 auto;
padding: 16px 18px;
position: relative;
z-index: 1;
}
/* Top Badges */
.badge-bar {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 12px;
flex-wrap: wrap;
}
.badge {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 4px 10px;
border-radius: var(--radius-pill);
border: 1px solid var(--border-subtle);
background: rgba(255, 255, 255, 0.04);
color: var(--text-secondary);
}
.badge.verified {
background: var(--accent-emerald-glow);
border-color: rgba(16, 185, 129, 0.3);
color: #34D399;
}
.badge.verified::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: #34D399;
box-shadow: 0 0 8px #34D399;
}
/* Hero Section */
.header-section {
margin-bottom: 20px;
}
.brand-title {
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--accent-emerald);
margin-bottom: 4px;
display: flex;
align-items: center;
gap: 6px;
}
.main-title {
font-size: 23px;
font-weight: 800;
line-height: 1.25;
letter-spacing: -0.02em;
color: #FFFFFF;
margin-bottom: 8px;
}
.main-subtitle {
font-size: 13px;
color: var(--text-secondary);
line-height: 1.5;
}
/* 5-Sec Digest Summary Card */
.summary-card {
background: linear-gradient(145deg, rgba(23, 33, 42, 0.9) 0%, rgba(18, 24, 31, 0.95) 100%);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
padding: 16px;
margin-bottom: 20px;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
backdrop-filter: blur(10px);
}
.card-header-label {
font-size: 10px;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-muted);
margin-bottom: 12px;
display: flex;
justify-content: space-between;
align-items: center;
}
.grid-info {
display: grid;
grid-cols: 2;
grid-template-columns: repeat(2, 1fr);
gap: 12px 14px;
margin-bottom: 14px;
}
.info-item {
display: flex;
flex-direction: column;
gap: 2px;
}
.info-label {
font-size: 10.5px;
color: var(--text-muted);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.info-value {
font-size: 12.5px;
color: var(--text-primary);
font-weight: 700;
}
/* Mini Metric Strip */
.metrics-strip {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
padding-top: 12px;
border-top: 1px solid var(--border-subtle);
}
.metric-box {
background: rgba(0, 0, 0, 0.25);
padding: 8px 10px;
border-radius: var(--radius-sm);
border: 1px solid rgba(255, 255, 255, 0.04);
text-align: center;
}
.metric-number {
font-size: 15px;
font-weight: 800;
color: #34D399;
font-feature-settings: "tnum";
}
.metric-caption {
font-size: 9.5px;
font-weight: 600;
color: var(--text-muted);
margin-top: 2px;
text-transform: uppercase;
}
/* Key Insights Section */
.insight-section {
background: rgba(16, 185, 129, 0.06);
border: 1px solid rgba(16, 185, 129, 0.22);
border-radius: var(--radius-lg);
padding: 16px;
margin-bottom: 24px;
position: relative;
overflow: hidden;
}
.insight-section::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
background: var(--accent-emerald);
}
.section-title-sm {
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #34D399;
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 6px;
}
.insight-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 10px;
}
.insight-list li {
position: relative;
padding-left: 18px;
font-size: 12.5px;
line-height: 1.5;
color: #E2E8F0;
}
.insight-list li::before {
content: "•";
position: absolute;
left: 4px;
color: var(--accent-emerald);
font-size: 16px;
line-height: 1;
top: 1px;
}
/* Evidence Case Cards */
.evidence-heading {
font-size: 12px;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-muted);
margin-bottom: 12px;
display: flex;
align-items: center;
justify-content: space-between;
}
.evidence-card {
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
padding: 16px;
margin-bottom: 18px;
transition: transform 0.15s ease, border-color 0.15s ease;
}
.evidence-top {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 10px;
gap: 8px;
}
.evidence-index {
font-size: 10px;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--accent-emerald);
}
.evidence-title {
font-size: 15px;
font-weight: 700;
color: #FFFFFF;
margin-top: 2px;
}
.evidence-tag {
font-size: 9.5px;
font-weight: 700;
text-transform: uppercase;
padding: 3px 8px;
border-radius: var(--radius-pill);
background: rgba(255, 255, 255, 0.05);
color: var(--text-secondary);
border: 1px solid var(--border-subtle);
white-space: nowrap;
}
/* Visual Preview Container */
.evidence-media-box {
width: 100%;
border-radius: var(--radius-md);
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.08);
background: #06090B;
position: relative;
cursor: pointer;
margin-bottom: 12px;
}
.evidence-media-box:hover .tap-hint {
opacity: 1;
}
.tap-hint {
position: absolute;
bottom: 8px;
right: 8px;
background: rgba(0, 0, 0, 0.75);
backdrop-filter: blur(4px);
border: 1px solid rgba(255, 255, 255, 0.15);
color: #E2E8F0;
font-size: 10px;
font-weight: 600;
padding: 4px 8px;
border-radius: var(--radius-pill);
display: flex;
align-items: center;
gap: 4px;
pointer-events: none;
transition: opacity 0.2s ease;
}
/* Synthetic Dashboard SVG & Real Image Mockups */
.dashboard-svg {
width: 100%;
height: auto;
display: block;
}
.dashboard-img {
width: 100%;
height: auto;
display: block;
object-fit: contain;
background: #FFFFFF;
border-radius: var(--radius-sm);
}
/* Caption & What it Proves */
.evidence-caption {
font-size: 12px;
color: var(--text-secondary);
line-height: 1.5;
margin-bottom: 10px;
}
.proves-box {
background: rgba(255, 255, 255, 0.03);
border-left: 2px solid var(--accent-cyan);
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
padding: 8px 12px;
font-size: 11.5px;
line-height: 1.45;
color: #CBD5E1;
}
.proves-box strong {
color: var(--accent-cyan);
font-weight: 700;
text-transform: uppercase;
font-size: 10px;
letter-spacing: 0.04em;
display: block;
margin-bottom: 2px;
}
/* Executive Takeaway Box */
.takeaway-section {
background: linear-gradient(135deg, rgba(245, 158, 11, 0.08) 0%, rgba(23, 33, 42, 0.9) 100%);
border: 1px solid rgba(245, 158, 11, 0.25);
border-radius: var(--radius-lg);
padding: 18px;
margin-top: 10px;
margin-bottom: 24px;
}
.takeaway-header {
display: flex;
align-items: center;
gap: 6px;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--accent-gold);
margin-bottom: 8px;
}
.takeaway-quote {
font-size: 13px;
line-height: 1.6;
color: #F1F5F9;
font-style: italic;
}
/* Sticky Footer Bar */
.sticky-footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: rgba(11, 15, 18, 0.88);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-top: 1px solid var(--border-subtle);
padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 10px));
z-index: 50;
}
.footer-inner {
max-width: 480px;
margin: 0 auto;
display: flex;
gap: 10px;
align-items: center;
}
.btn-action {
flex: 1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 12px 14px;
border-radius: var(--radius-md);
font-size: 12.5px;
font-weight: 700;
text-decoration: none;
transition: all 0.15s ease;
cursor: pointer;
border: 1px solid transparent;
text-align: center;
}
.btn-primary {
background: var(--accent-emerald);
color: #061A12;
box-shadow: 0 4px 14px rgba(16, 185, 129, 0.25);
}
.btn-primary:active {
transform: scale(0.98);
background: #059669;
}
.btn-secondary {
background: rgba(255, 255, 255, 0.06);
border-color: var(--border-subtle);
color: #E2E8F0;
}
.btn-secondary:active {
transform: scale(0.98);
background: rgba(255, 255, 255, 0.1);
}
/* Lightbox Modal */
.lightbox-modal {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.92);
backdrop-filter: blur(8px);
z-index: 9999;
padding: 16px;
align-items: center;
justify-content: center;
flex-direction: column;
}
.lightbox-modal.active {
display: flex;
}
.lightbox-content {
max-width: 95vw;
max-height: 80vh;
object-fit: contain;
border-radius: var(--radius-md);
box-shadow: 0 10px 40px rgba(0,0,0,0.8);
border: 1px solid rgba(255, 255, 255, 0.15);
}
.lightbox-caption {
color: #CBD5E1;
font-size: 12px;
text-align: center;
margin-top: 12px;
max-width: 90vw;
}
.lightbox-close {
position: absolute;
top: 20px;
right: 20px;
background: rgba(255, 255, 255, 0.15);
border: none;
color: white;
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="ambient-glow"></div>
<div class="container">
<!-- 1) Top Verified Badge -->
<div class="badge-bar">
<span class="badge verified">Verified Case Study</span>
<span class="badge">E-Commerce & MarTech</span>
<span class="badge">TikTok Shop</span>
</div>
<!-- 2) Header Section -->
<header class="header-section">
<div class="brand-title">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
<path d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm0 18a8 8 0 1 1 8-8 8 8 0 0 1-8 8z"/>
<path d="M12 6v6l4 2"/>
</svg>
Hom Aroma · Performance Audit
</div>
<h1 class="main-title">TikTok ROI & Campaign Performance Analysis</h1>
<p class="main-subtitle">
Performance dashboard and campaign telemetry used to monitor ROI, revenue, orders, and commercial scaling decisions.
</p>
</header>
<!-- 3) Summary Card (5-Second Digest) -->
<section class="summary-card">
<div class="card-header-label">
<span>Executive Overview</span>
<span>5-Sec Digest</span>
</div>
<div class="grid-info">
<div class="info-item">
<span class="info-label">Business / Brand</span>
<span class="info-value">Hom Aroma (D2C)</span>
</div>
<div class="info-item">
<span class="info-label">Channel</span>
<span class="info-value">TikTok Shop & Ads</span>
</div>
<div class="info-item">
<span class="info-label">Lead Role</span>
<span class="info-value">Founder / MarTech Lead</span>
</div>
<div class="info-item">
<span class="info-label">Decision Focus</span>
<span class="info-value">Unit ROI & Net Margin</span>
</div>
</div>
<!-- Mini Metrics (Real Telemetry) -->
<div class="metrics-strip">
<div class="metric-box">
<div class="metric-number">฿8,786</div>
<div class="metric-caption">GMV (+31.4%)</div>
</div>
<div class="metric-box">
<div class="metric-number">44 Orders</div>
<div class="metric-caption">Vol (+37.5%)</div>
</div>
<div class="metric-box">
<div class="metric-number">+48.7%</div>
<div class="metric-caption">SKU Velocity</div>
</div>
</div>
</section>
<!-- 4) Key Insights Box -->
<section class="insight-section">
<div class="section-title-sm">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
<path d="M9 18l6-6-6-6"/>
</svg>
Key Insights & Analytical Proof
</div>
<ul class="insight-list">
<li><strong>Unit Economics First:</strong> Campaign ROI was monitored against net order fulfillment volume and COGS rather than superficial ROAS figures.</li>
<li><strong>Elasticity Curve Detection:</strong> Aggressive ad scaling caused marginal ROI compression; systematic pacing preserved maximum net cashflow.</li>
<li><strong>Conversion Pacing:</strong> Time-of-day order velocity informed exact budget dayparting and inventory fulfillment scheduling.</li>
</ul>
</section>
<!-- 5) Evidence Sections (Vertical Case Studies) -->
<div class="evidence-heading">
<span>Evidence & Telemetry Artifacts</span>
<span>3 Artifacts</span>
</div>
<!-- EVIDENCE 1: Real TikTok Shop Metrics Screenshot -->
<article class="evidence-card">
<div class="evidence-top">
<div>
<div class="evidence-index">Evidence 01</div>
<h2 class="evidence-title">TikTok Shop GMV & Order Velocity Telemetry</h2>
</div>
<span class="evidence-tag">Real Artifact</span>
</div>
<div class="evidence-media-box" onclick="openLightbox('dashboard-1', 'TikTok Shop verified performance: GMV ฿8,786.45 (+31.41%), 62 items sold (+21.57%), and 44 completed orders (+37.50%).')">
<img src="/images/tiktok-sales-metrics.png" alt="TikTok Shop Key Performance Metrics" class="dashboard-img">
<div class="tap-hint">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7"/>
</svg>
Tap to expand
</div>
</div>
<p class="evidence-caption">
<strong>What it shows:</strong> Empirical telemetry from TikTok Shop (Sept 1–14, 2026): Gross Merchandise Value of ฿8,786.45 (+31.41%), 62 units sold (+21.57%), and 44 completed orders (+37.50%) versus prior cycle.
</p>
<div class="proves-box">
<strong>What this proves:</strong>
Demonstrates sustained double-digit expansion across order volume (+37.5%) and SKU demand (+48.65%), validating product-market fit and commercial conversion momentum on marketplace channels.
</div>
</article>
<!-- EVIDENCE 2: Campaign Elasticity & Scaling Analysis -->
<article class="evidence-card">
<div class="evidence-top">
<div>
<div class="evidence-index">Evidence 02</div>
<h2 class="evidence-title">Budget Scaling vs. Diminishing ROI Curve</h2>
</div>
<span class="evidence-tag">Strategy</span>
</div>
<div class="evidence-media-box" onclick="openLightbox('dashboard-2', 'Analysis showing how incremental budget scaling influenced marginal ROI and identifying optimal spend ceiling.')">
<svg class="dashboard-svg" viewBox="0 0 420 220" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="420" height="220" rx="8" fill="#0D1318"/>
<!-- Grid -->
<line x1="40" y1="50" x2="380" y2="50" stroke="#1E293B" stroke-dasharray="2 2"/>
<line x1="40" y1="110" x2="380" y2="110" stroke="#1E293B" stroke-dasharray="2 2"/>
<line x1="40" y1="170" x2="380" y2="170" stroke="#334155"/>
<!-- Sweet Spot Highlight Zone -->
<rect x="170" y="35" width="80" height="135" fill="rgba(16, 185, 129, 0.08)" rx="4"/>
<text x="175" y="48" fill="#34D399" font-size="8.5" font-weight="700">OPTIMAL RANGE</text>
<!-- Diminishing ROI Curve -->
<path d="M50 60 Q 140 70, 210 95 T 320 145 T 380 160" stroke="#38BDF8" stroke-width="3" stroke-linecap="round"/>
<!-- Points -->
<circle cx="210" cy="95" r="5" fill="#38BDF8" stroke="#0D1318" stroke-width="2"/>
<text x="220" y="93" fill="#E2E8F0" font-size="9" font-weight="700">3.8x ROI @ ฿15k/day</text>
<!-- Bottom Axis -->
<text x="45" y="190" fill="#64748B" font-size="9">Low Spend</text>
<text x="180" y="190" fill="#34D399" font-size="9" font-weight="600">Scale Threshold</text>
<text x="320" y="190" fill="#64748B" font-size="9">Over-saturation</text>
</svg>
<div class="tap-hint">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7"/>
</svg>
Tap to expand
</div>
</div>
<p class="evidence-caption">
<strong>What it shows:</strong> Empirical analysis evaluating marginal ROI decline when increasing campaign budgets past saturation.
</p>
<div class="proves-box">
<strong>What this proves:</strong>
Proves strong discipline in capital efficiency and data-informed decision making to avoid burning budget on low-elasticity campaigns.
</div>
</article>
<!-- EVIDENCE 3: Conversion Timing Pattern -->
<article class="evidence-card">
<div class="evidence-top">
<div>
<div class="evidence-index">Evidence 03</div>
<h2 class="evidence-title">Hourly Order Velocity & Daypart Scheduling</h2>
</div>
<span class="evidence-tag">Operations</span>
</div>
<div class="evidence-media-box" onclick="openLightbox('dashboard-3', 'Order timing velocity used to calibrate ad delivery pacing and customer service readiness.')">
<svg class="dashboard-svg" viewBox="0 0 420 220" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="420" height="220" rx="8" fill="#0D1318"/>
<!-- Histogram bars for hours -->
<!-- 00-06 -->
<rect x="40" y="155" width="16" height="15" rx="2" fill="#334155"/>
<rect x="62" y="160" width="16" height="10" rx="2" fill="#334155"/>
<rect x="84" y="150" width="16" height="20" rx="2" fill="#334155"/>
<!-- 08-12 -->
<rect x="106" y="130" width="16" height="40" rx="2" fill="#475569"/>
<rect x="128" y="105" width="16" height="65" rx="2" fill="#475569"/>
<rect x="150" y="100" width="16" height="70" rx="2" fill="#475569"/>
<!-- 13-17 -->
<rect x="172" y="115" width="16" height="55" rx="2" fill="#475569"/>
<rect x="194" y="125" width="16" height="45" rx="2" fill="#475569"/>
<!-- 18-23 PEAK -->
<rect x="238" y="80" width="16" height="90" rx="2" fill="#10B981"/>
<rect x="260" y="60" width="16" height="110" rx="2" fill="#10B981"/>
<rect x="282" y="45" width="16" height="125" rx="2" fill="#34D399"/>
<rect x="304" y="55" width="16" height="115" rx="2" fill="#10B981"/>
<rect x="326" y="85" width="16" height="85" rx="2" fill="#10B981"/>
<rect x="348" y="135" width="16" height="35" rx="2" fill="#475569"/>
<!-- Peak Badge -->
<rect x="265" y="24" width="85" height="18" rx="4" fill="rgba(16, 185, 129, 0.2)"/>
<text x="272" y="36" fill="#34D399" font-size="8.5" font-weight="700">PEAK: 19:00–22:30</text>
<!-- Axis -->
<line x1="30" y1="172" x2="380" y2="172" stroke="#334155"/>
<text x="40" y="190" fill="#64748B" font-size="9">00:00</text>
<text x="140" y="190" fill="#64748B" font-size="9">12:00</text>
<text x="270" y="190" fill="#34D399" font-size="9" font-weight="700">20:00</text>
<text x="345" y="190" fill="#64748B" font-size="9">23:59</text>
</svg>
<div class="tap-hint">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7"/>
</svg>
Tap to expand
</div>
</div>
<p class="evidence-caption">
<strong>What it shows:</strong> Conversion concentration curves identifying the critical evening window where orders surge by over 280%.
</p>
<div class="proves-box">
<strong>What this proves:</strong>
Informed ad pacing rules, flash sale countdowns, and live-support staffing to maximize high-intent customer conversion.
</div>
</article>
<!-- 6) Executive Business Takeaway -->
<section class="takeaway-section">
<div class="takeaway-header">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
<polyline points="22 4 12 14.01 9 11.01"/>
</svg>
Executive Business Takeaway
</div>
<blockquote class="takeaway-quote">
“By anchoring campaign scaling in net unit contribution rather than vanity ROAS, we achieved predictable sales velocity, eliminated unprofitable ad leakage, and maintained healthy gross margins across high-volume marketplace channels.”
</blockquote>
</section>
<!-- Footer Meta -->
<div style="text-align: center; color: var(--text-muted); font-size: 11px; padding: 10px 0 20px;">
Hom Aroma Brand & E-Commerce Telemetry Case Study<br>
Confidential / Recruiter & Commercial Review Copy
</div>
</div>
<!-- Sticky Bottom Navigation -->
<nav class="sticky-footer">
<div class="footer-inner">
<a href="/shop" class="btn-action btn-secondary">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"/>
<line x1="3" y1="6" x2="21" y2="6"/>
<path d="M16 10a4 4 0 0 1-8 0"/>
</svg>
View Storefront
</a>
<a href="javascript:void(0)" onclick="alert('Contact: kitisak (Founder / MarTech Lead)')" class="btn-action btn-primary">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
</svg>
Contact Profile
</a>
</div>
</nav>
<!-- Tap-to-Enlarge Modal -->
<div id="lightbox" class="lightbox-modal" onclick="closeLightbox()">
<button class="lightbox-close" onclick="closeLightbox()">&times;</button>
<div id="lightbox-container" style="display:flex; flex-direction:column; align-items:center; max-width:90vw;"></div>
<div id="lightbox-caption" class="lightbox-caption"></div>
</div>
<script>
function openLightbox(elementId, captionText) {
const modal = document.getElementById('lightbox');
const container = document.getElementById('lightbox-container');
const caption = document.getElementById('lightbox-caption');
const img = event.currentTarget.querySelector('.dashboard-img');
const svg = event.currentTarget.querySelector('.dashboard-svg');
container.innerHTML = '';
if (img) {
const clonedImg = document.createElement('img');
clonedImg.src = img.src;
clonedImg.alt = img.alt;
clonedImg.className = 'lightbox-content';
container.appendChild(clonedImg);
} else if (svg) {
const clonedSvg = svg.cloneNode(true);
clonedSvg.style.width = '100%';
clonedSvg.style.maxWidth = '600px';
clonedSvg.style.height = 'auto';
clonedSvg.style.borderRadius = '12px';
container.appendChild(clonedSvg);
}
caption.textContent = captionText;
modal.classList.add('active');
document.body.style.overflow = 'hidden';
}
function closeLightbox() {
const modal = document.getElementById('lightbox');
modal.classList.remove('active');
document.body.style.overflow = '';
}
</script>
</body>
</html>