/wire-template:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ARTSABERS — UGC Gallery Component · 3 Variants</title>
<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=Orbitron:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&family=Onest:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap" rel="stylesheet">
<style>
:root {
--carbon: #060605;
--carbon-panel: #0F0F0F;
--carbon-lift: #1A1A1A;
--void: #030302;
--charcoal-warm: #161412;
--hull-edge: rgba(231,224,220,0.12);
--hull-edge-mid: rgba(231,224,220,0.25);
--ember-glow: #FFB347;
--ember: #FF7A2E;
--ember-deep: #D14810;
--ember-scar: #5A1A00;
--on-primary-fixed: #2A0800;
--chrome-highlight: #F7F5F3;
--chrome-warm: #E5E2E1;
--text-primary: #C7C1BE;
--text-dim: rgba(199,193,190,0.55);
--font-title: 'Orbitron', system-ui, sans-serif;
--font-chrome: 'Space Grotesk', system-ui, sans-serif;
--font-body: 'Onest', system-ui, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--carbon); color: var(--text-primary); font-family: var(--font-body); font-weight: 400; line-height: 1.5; -webkit-font-smoothing: antialiased; }
.page { max-width: 1440px; margin: 0 auto; padding: 80px 48px 120px; }
/* ==== Page header ==== */
.page-header { border-bottom: 1px solid var(--hull-edge); padding-bottom: 56px; margin-bottom: 96px; }
.page-header__eyebrow { font-family: var(--font-chrome); font-weight: 600; text-transform: uppercase; letter-spacing: 0.24em; color: var(--ember); font-size: 12px; margin-bottom: 24px; }
.page-header__title { font-family: var(--font-title); font-weight: 600; font-size: 48px; line-height: 1.1; letter-spacing: 0.8px; color: var(--chrome-highlight); max-width: 1000px; margin-bottom: 20px; }
.page-header__sub { font-size: 17px; line-height: 1.6; color: var(--text-primary); max-width: 780px; margin-bottom: 20px; }
.page-header__meta { font-family: var(--font-chrome); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-dim); }
.page-header__meta strong { color: var(--ember); font-weight: 600; }
/* ==== Variant section wrapper ==== */
.variant { margin-bottom: 120px; }
.variant__header { display: grid; grid-template-columns: 280px 1fr; gap: 48px; margin-bottom: 56px; padding-top: 40px; border-top: 1px solid var(--hull-edge); }
.variant__label { font-family: var(--font-chrome); font-weight: 600; font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ember); margin-bottom: 12px; }
.variant__name { font-family: var(--font-title); font-weight: 600; font-size: 28px; line-height: 1.12; letter-spacing: 0.8px; color: var(--chrome-highlight); margin-bottom: 8px; }
.variant__badge { display: inline-block; padding: 4px 10px; border: 1px solid var(--hull-edge); font-family: var(--font-chrome); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-dim); margin-top: 8px; }
.variant__desc { color: var(--text-primary); font-size: 16px; line-height: 1.65; max-width: 720px; }
.variant__desc strong { color: var(--chrome-warm); font-weight: 600; }
.variant__spec { font-family: var(--font-chrome); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); margin-top: 20px; line-height: 1.8; }
.variant__spec span { color: var(--chrome-warm); margin-right: 6px; }
/* ==== Section frame — a demo wrapper showing the component in a site-section context ==== */
.section-frame { background: var(--carbon-panel); border-top: 1px solid rgba(255,122,46,0.30); box-shadow: inset 0 1px 0 rgba(250,250,250,0.05); padding: 80px 56px; margin-top: 24px; }
.section-frame--warm { background: var(--charcoal-warm); }
.section-frame__eyebrow { font-family: var(--font-chrome); font-weight: 600; font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ember); margin-bottom: 20px; text-align: center; }
.section-frame__title { font-family: var(--font-title); font-weight: 600; font-size: 36px; line-height: 1.1; letter-spacing: 0.8px; color: var(--chrome-highlight); margin-bottom: 12px; text-align: center; }
.section-frame__sub { color: var(--text-primary); font-size: 16px; line-height: 1.65; text-align: center; max-width: 640px; margin: 0 auto 48px; }
/* ============================================================
VARIANT 1 · Editorial curated grid
============================================================ */
.editorial-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 260px; gap: 20px; }
.editorial-grid__cell { position: relative; overflow: hidden; background: var(--void); }
.editorial-grid__cell--wide { grid-column: span 2; }
.editorial-grid__cell--tall { grid-row: span 2; }
.editorial-grid__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.editorial-grid__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,6,5,0) 30%, rgba(6,6,5,0.5) 65%, rgba(6,6,5,0.90) 100%); pointer-events: none; }
.editorial-grid__badge { position: absolute; top: 16px; left: 16px; z-index: 3; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; background: rgba(255,122,46,0.16); border: 1px solid rgba(255,122,46,0.65); font-family: var(--font-chrome); font-size: 10px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ember-glow); backdrop-filter: blur(4px); }
.editorial-grid__meta { position: absolute; bottom: 0; left: 0; right: 0; padding: 20px 24px 22px; z-index: 3; }
.editorial-grid__handle { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.editorial-grid__handle-name { font-family: var(--font-chrome); font-size: 13px; font-weight: 600; letter-spacing: 0.02em; color: var(--chrome-highlight); }
.editorial-grid__handle-platform { font-family: var(--font-chrome); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ember); }
.editorial-grid__caption { font-family: var(--font-body); font-size: 14px; line-height: 1.4; color: var(--chrome-warm); margin-bottom: 12px; }
.editorial-grid__product { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px; border: 1px solid rgba(231,224,220,0.20); font-family: var(--font-chrome); font-size: 10px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--chrome-warm); text-decoration: none; }
.editorial-grid__product::before { content: '→'; color: var(--ember); font-size: 11px; }
/* ============================================================
VARIANT 2 · Community feed grid
============================================================ */
.feed-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.feed-grid__cell { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: var(--void); cursor: pointer; transition: transform 0.15s; }
.feed-grid__cell:hover { transform: scale(1.02); z-index: 2; }
.feed-grid__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity 0.15s; }
.feed-grid__cell:hover .feed-grid__img { opacity: 0.7; }
.feed-grid__overlay { position: absolute; inset: 0; opacity: 0; transition: opacity 0.15s; background: linear-gradient(180deg, rgba(6,6,5,0) 40%, rgba(6,6,5,0.8) 100%); padding: 12px; display: flex; flex-direction: column; justify-content: flex-end; z-index: 2; }
.feed-grid__cell:hover .feed-grid__overlay { opacity: 1; }
.feed-grid__handle { display: flex; align-items: center; gap: 6px; font-family: var(--font-chrome); font-size: 11px; font-weight: 500; color: var(--chrome-highlight); }
.feed-grid__platform { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; font-size: 10px; color: var(--ember); }
.feed-grid__cta-row { text-align: center; margin-top: 32px; }
.feed-grid__hashtag { display: inline-block; padding: 10px 18px; border: 1px solid var(--hull-edge-mid); font-family: var(--font-chrome); font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--chrome-warm); text-decoration: none; margin-right: 12px; transition: border-color 0.15s, color 0.15s; }
.feed-grid__hashtag:hover { border-color: var(--ember); color: var(--ember); }
/* Show hover state on one cell in the mockup so reviewers see the interaction */
.feed-grid__cell--demo .feed-grid__img { opacity: 0.7; }
.feed-grid__cell--demo .feed-grid__overlay { opacity: 1; }
.feed-grid__cell--demo::after { content: 'HOVER STATE'; position: absolute; top: 8px; right: 8px; z-index: 4; padding: 2px 6px; background: rgba(255,122,46,0.85); font-family: var(--font-chrome); font-size: 8px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--on-primary-fixed); }
/* ============================================================
VARIANT 3 · Featured testimonial
============================================================ */
.testimonial { display: grid; grid-template-columns: 55% 1fr; gap: 0; align-items: stretch; background: var(--void); min-height: 480px; }
.testimonial__media { position: relative; overflow: hidden; }
.testimonial__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.testimonial__scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6,6,5,0) 60%, rgba(6,6,5,0.6) 100%); pointer-events: none; }
.testimonial__badge { position: absolute; top: 24px; left: 24px; z-index: 2; padding: 6px 12px; background: rgba(255,122,46,0.16); border: 1px solid rgba(255,122,46,0.65); font-family: var(--font-chrome); font-size: 10px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ember-glow); backdrop-filter: blur(4px); }
.testimonial__content { padding: 56px 64px; display: flex; flex-direction: column; justify-content: center; background: var(--carbon-panel); position: relative; box-shadow: inset 1px 0 0 rgba(255,122,46,0.20); }
.testimonial__eyebrow { font-family: var(--font-chrome); font-weight: 600; font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ember); margin-bottom: 20px; }
.testimonial__quote-mark { font-family: 'Georgia', serif; font-size: 56px; line-height: 1; color: var(--ember); margin-bottom: 8px; opacity: 0.7; }
.testimonial__quote { font-family: var(--font-body); font-size: 21px; line-height: 1.45; color: var(--chrome-highlight); margin-bottom: 32px; font-style: italic; }
.testimonial__attribution { border-top: 1px solid var(--hull-edge); padding-top: 20px; }
.testimonial__handle { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.testimonial__handle-name { font-family: var(--font-chrome); font-size: 14px; font-weight: 600; color: var(--chrome-highlight); letter-spacing: 0.02em; }
.testimonial__handle-platform { font-family: var(--font-chrome); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ember); }
.testimonial__location { font-family: var(--font-body); font-size: 13px; color: var(--text-dim); margin-bottom: 20px; }
.testimonial__product { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border: 1px solid var(--ember); background: transparent; font-family: var(--font-chrome); font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ember); text-decoration: none; transition: background 0.15s, color 0.15s; }
.testimonial__product::after { content: '→'; }
.testimonial__product:hover { background: var(--ember); color: var(--on-primary-fixed); }
/* ==== Deployment notes ==== */
.deployment { margin-top: 96px; padding-top: 48px; border-top: 1px solid var(--hull-edge); }
.deployment__title { font-family: var(--font-title); font-weight: 600; font-size: 24px; letter-spacing: 0.8px; color: var(--chrome-highlight); margin-bottom: 24px; }
.deployment__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.deployment__cell { padding: 24px; background: var(--carbon-panel); box-shadow: inset 0 1px 0 rgba(250,250,250,0.05); }
.deployment__cell-title { font-family: var(--font-chrome); font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ember); margin-bottom: 10px; }
.deployment__cell-body { font-family: var(--font-body); font-size: 14px; line-height: 1.6; color: var(--text-primary); }
.deployment__cell-body strong { color: var(--chrome-warm); font-weight: 600; }
</style>
</head>
<body>
<main class="page">
<div class="page-header">
<div class="page-header__eyebrow">Component exploration · 2026-07-15 · Three variants</div>
<h1 class="page-header__title">UGC gallery component. Three shapes for three jobs.</h1>
<p class="page-header__sub">The community-photo surface needs to show up on Creator Takeover pages, product pages, and the homepage — each with a distinct job. Rather than one component with too many props, three purpose-built variants covering the range. All three use the same Kyber Hull substrate (Orbitron titles, Onest body, Space Grotesk chrome, ember accents on budget) and the same eight placeholder photos so you can compare treatments A/B.</p>
<p class="page-header__meta">Placeholders: <strong>8 nano-banana lifestyle photos</strong> · standing in for real UGC pending platform integration (Instagram / TikTok hashtag pull, submissions form)</p>
</div>
<!-- ============================================================
VARIANT 1 · EDITORIAL CURATED GRID
============================================================ -->
<section class="variant">
<div class="variant__header">
<div>
<div class="variant__label">Variant 01</div>
<div class="variant__name">Editorial curated grid</div>
<span class="variant__badge">Hand-picked · Rich chrome · Featured moment</span>
</div>
<div>
<p class="variant__desc">Editor-picked photos, considered composition, rich per-cell chrome. Each cell carries the creator's <strong>@handle + platform</strong>, a short caption in ARTSABERS voice, and a <strong>product tag</strong> linking back to the hilt in the photo. One cell in each grid gets an <strong>★ EDITOR'S PICK</strong> chip. Feels like a curated photo essay.</p>
<div class="variant__spec">
<span>Grid:</span> 3-column, mixed sizes (wide + tall + regular cells) ·
<span>Chrome:</span> full attribution + product link + caption ·
<span>Use for:</span> Creator Takeover, campaign hero bands, homepage featured moments
</div>
</div>
</div>
<div class="section-frame">
<div class="section-frame__eyebrow">Featured this month</div>
<h2 class="section-frame__title">What the community is building.</h2>
<p class="section-frame__sub">Hand-picked from what we've seen this month across Instagram, TikTok, and the Discord. Tap through to the hilt in each shot.</p>
<div class="editorial-grid">
<div class="editorial-grid__cell editorial-grid__cell--wide editorial-grid__cell--tall">
<img class="editorial-grid__img" src="https://camcom.dev/generated_imgs/generated-2026-07-15T14-40-13-208Z-i2tziq.jpg" alt="">
<div class="editorial-grid__scrim"></div>
<div class="editorial-grid__badge">★ Editor's pick</div>
<div class="editorial-grid__meta">
<div class="editorial-grid__handle">
<span class="editorial-grid__handle-name">@ember_riggs</span>
<span class="editorial-grid__handle-platform">Instagram</span>
</div>
<p class="editorial-grid__caption">"First night out with the Xenopixel V3. Every bit as clean in the flesh as it looks in the listing."</p>
<a class="editorial-grid__product" href="#">Anakin EP3 · Xenopixel V3</a>
</div>
</div>
<div class="editorial-grid__cell">
<img class="editorial-grid__img" src="https://camcom.dev/generated_imgs/generated-2026-07-15T14-42-01-230Z-eu4abg.jpg" alt="">
<div class="editorial-grid__scrim"></div>
<div class="editorial-grid__meta">
<div class="editorial-grid__handle">
<span class="editorial-grid__handle-name">@duel_club_bristol</span>
<span class="editorial-grid__handle-platform">Instagram</span>
</div>
<a class="editorial-grid__product" href="#">Three hilts, three cores</a>
</div>
</div>
<div class="editorial-grid__cell">
<img class="editorial-grid__img" src="https://camcom.dev/generated_imgs/generated-2026-07-15T14-41-45-672Z-phwq8x.jpg" alt="">
<div class="editorial-grid__scrim"></div>
<div class="editorial-grid__meta">
<div class="editorial-grid__handle">
<span class="editorial-grid__handle-name">@blades_and_glass</span>
<span class="editorial-grid__handle-platform">TikTok</span>
</div>
<a class="editorial-grid__product" href="#">Neopixel blade detail</a>
</div>
</div>
<div class="editorial-grid__cell editorial-grid__cell--wide">
<img class="editorial-grid__img" src="https://camcom.dev/generated_imgs/generated-2026-07-15T14-40-49-008Z-41sciu.jpg" alt="">
<div class="editorial-grid__scrim"></div>
<div class="editorial-grid__meta">
<div class="editorial-grid__handle">
<span class="editorial-grid__handle-name">@stormfront_choreo</span>
<span class="editorial-grid__handle-platform">Instagram</span>
</div>
<p class="editorial-grid__caption">"Sparring night — both hilts held up through 90 minutes of contact."</p>
<a class="editorial-grid__product" href="#">Duelling grade builds</a>
</div>
</div>
<div class="editorial-grid__cell">
<img class="editorial-grid__img" src="https://camcom.dev/generated_imgs/generated-2026-07-15T14-42-34-614Z-m8rz8j.jpg" alt="">
<div class="editorial-grid__scrim"></div>
<div class="editorial-grid__meta">
<div class="editorial-grid__handle">
<span class="editorial-grid__handle-name">@dusk_grafton</span>
<span class="editorial-grid__handle-platform">Instagram</span>
</div>
<a class="editorial-grid__product" href="#">Custom red build</a>
</div>
</div>
</div>
</div>
</section>
<!-- ============================================================
VARIANT 2 · COMMUNITY FEED GRID
============================================================ -->
<section class="variant">
<div class="variant__header">
<div>
<div class="variant__label">Variant 02</div>
<div class="variant__name">Community feed grid</div>
<span class="variant__badge">Auto-pulled · Dense · Minimal chrome</span>
</div>
<div>
<p class="variant__desc">Uniform 1:1 tiles pulled live from an <strong>Instagram / TikTok hashtag feed</strong> (or curated set). Minimal per-cell chrome — <strong>@handle + platform icon</strong> only, revealed on hover. High density (6-12 tiles), scannable at a glance, feels like a social feed embedded in the page. Bottom row anchors on a hashtag CTA + community link.</p>
<div class="variant__spec">
<span>Grid:</span> 6-column uniform 1:1 tiles ·
<span>Chrome:</span> hover-only overlay, @handle + platform icon ·
<span>Use for:</span> homepage community strip, product page "customers using it"
</div>
</div>
</div>
<div class="section-frame section-frame--warm">
<div class="section-frame__eyebrow">From the community</div>
<h2 class="section-frame__title">#ARTSABERSFAMILY</h2>
<p class="section-frame__sub">Real customers, real hilts. Tap any photo for the product. Tagged your own? We might feature it.</p>
<div class="feed-grid">
<div class="feed-grid__cell">
<img class="feed-grid__img" src="https://camcom.dev/generated_imgs/generated-2026-07-15T14-41-04-721Z-8b5fsw.jpg" alt="">
<div class="feed-grid__overlay">
<div class="feed-grid__handle"><span class="feed-grid__platform">◐</span>@sith_lord_theo</div>
</div>
</div>
<div class="feed-grid__cell feed-grid__cell--demo">
<img class="feed-grid__img" src="https://camcom.dev/generated_imgs/generated-2026-07-15T14-42-14-914Z-dme561.jpg" alt="">
<div class="feed-grid__overlay">
<div class="feed-grid__handle"><span class="feed-grid__platform">◐</span>@hand_and_hilt</div>
</div>
</div>
<div class="feed-grid__cell">
<img class="feed-grid__img" src="https://camcom.dev/generated_imgs/generated-2026-07-15T14-41-45-672Z-phwq8x.jpg" alt="">
<div class="feed-grid__overlay">
<div class="feed-grid__handle"><span class="feed-grid__platform">◐</span>@blades_and_glass</div>
</div>
</div>
<div class="feed-grid__cell">
<img class="feed-grid__img" src="https://camcom.dev/generated_imgs/generated-2026-07-15T14-42-01-230Z-eu4abg.jpg" alt="">
<div class="feed-grid__overlay">
<div class="feed-grid__handle"><span class="feed-grid__platform">◐</span>@duel_club_bristol</div>
</div>
</div>
<div class="feed-grid__cell">
<img class="feed-grid__img" src="https://camcom.dev/generated_imgs/generated-2026-07-15T14-40-13-208Z-i2tziq.jpg" alt="">
<div class="feed-grid__overlay">
<div class="feed-grid__handle"><span class="feed-grid__platform">◐</span>@ember_riggs</div>
</div>
</div>
<div class="feed-grid__cell">
<img class="feed-grid__img" src="https://camcom.dev/generated_imgs/generated-2026-07-15T14-40-30-370Z-j2l1gt.jpg" alt="">
<div class="feed-grid__overlay">
<div class="feed-grid__handle"><span class="feed-grid__platform">◐</span>@bench_and_saber</div>
</div>
</div>
<div class="feed-grid__cell">
<img class="feed-grid__img" src="https://camcom.dev/generated_imgs/generated-2026-07-15T14-40-49-008Z-41sciu.jpg" alt="">
<div class="feed-grid__overlay">
<div class="feed-grid__handle"><span class="feed-grid__platform">◐</span>@stormfront_choreo</div>
</div>
</div>
<div class="feed-grid__cell">
<img class="feed-grid__img" src="https://camcom.dev/generated_imgs/generated-2026-07-15T14-42-34-614Z-m8rz8j.jpg" alt="">
<div class="feed-grid__overlay">
<div class="feed-grid__handle"><span class="feed-grid__platform">◐</span>@dusk_grafton</div>
</div>
</div>
<div class="feed-grid__cell">
<img class="feed-grid__img" src="https://camcom.dev/generated_imgs/generated-2026-07-15T14-42-14-914Z-dme561.jpg" alt="">
<div class="feed-grid__overlay">
<div class="feed-grid__handle"><span class="feed-grid__platform">◐</span>@saber_r_us</div>
</div>
</div>
<div class="feed-grid__cell">
<img class="feed-grid__img" src="https://camcom.dev/generated_imgs/generated-2026-07-15T14-41-04-721Z-8b5fsw.jpg" alt="">
<div class="feed-grid__overlay">
<div class="feed-grid__handle"><span class="feed-grid__platform">◐</span>@cosplay_karolina</div>
</div>
</div>
<div class="feed-grid__cell">
<img class="feed-grid__img" src="https://camcom.dev/generated_imgs/generated-2026-07-15T14-42-01-230Z-eu4abg.jpg" alt="">
<div class="feed-grid__overlay">
<div class="feed-grid__handle"><span class="feed-grid__platform">◐</span>@three_of_us</div>
</div>
</div>
<div class="feed-grid__cell">
<img class="feed-grid__img" src="https://camcom.dev/generated_imgs/generated-2026-07-15T14-40-13-208Z-i2tziq.jpg" alt="">
<div class="feed-grid__overlay">
<div class="feed-grid__handle"><span class="feed-grid__platform">◐</span>@night_sabers</div>
</div>
</div>
</div>
<div class="feed-grid__cta-row">
<a class="feed-grid__hashtag" href="#">#ARTSABERSFAMILY on Instagram</a>
<a class="feed-grid__hashtag" href="#">Submit your photo</a>
</div>
</div>
</section>
<!-- ============================================================
VARIANT 3 · FEATURED TESTIMONIAL
============================================================ -->
<section class="variant">
<div class="variant__header">
<div>
<div class="variant__label">Variant 03</div>
<div class="variant__name">Featured testimonial</div>
<span class="variant__badge">Narrative moment · Big photo + quote</span>
</div>
<div>
<p class="variant__desc">Single hero photo alongside a quote from the community member, with attribution and a direct product-link CTA. Editorial narrative — <strong>one moment, told fully</strong> — rather than a wall of thumbnails. Best where you want the reader to slow down and read (product page, homepage story band, cross-linking to a specific hilt).</p>
<div class="variant__spec">
<span>Layout:</span> 55/45 split — photo left, quote panel right ·
<span>Chrome:</span> quote + attribution + product CTA button ·
<span>Use for:</span> product page testimonial band, homepage story moment
</div>
</div>
</div>
<div class="section-frame">
<div class="testimonial">
<div class="testimonial__media">
<img class="testimonial__img" src="https://camcom.dev/generated_imgs/generated-2026-07-15T14-42-34-614Z-m8rz8j.jpg" alt="">
<div class="testimonial__scrim"></div>
<div class="testimonial__badge">Community story</div>
</div>
<div class="testimonial__content">
<div class="testimonial__eyebrow">One year on</div>
<div class="testimonial__quote-mark">"</div>
<p class="testimonial__quote">Bought the Vader EP3 a year ago after months of comparing. Still ignites every time. Still sounds every bit as good. The Xenopixel V3 board earned its keep — and the customer service the one time I needed it was a real person, in a day.</p>
<div class="testimonial__attribution">
<div class="testimonial__handle">
<span class="testimonial__handle-name">Marcus Dusk</span>
<span class="testimonial__handle-platform">@dusk_grafton</span>
</div>
<div class="testimonial__location">Grafton, MA · Buyer since June 2025</div>
<a class="testimonial__product" href="#">Darth Vader EP3 · Xenopixel V3</a>
</div>
</div>
</div>
</div>
</section>
<!-- ==== Deployment notes ==== -->
<div class="deployment">
<h2 class="deployment__title">Where each variant lives.</h2>
<div class="deployment__grid">
<div class="deployment__cell">
<div class="deployment__cell-title">Variant 01 · Editorial grid</div>
<p class="deployment__cell-body"><strong>Creator Takeover (MAS80)</strong> mid-page community band · <strong>Homepage</strong> featured moment · <strong>Campaign hero bands</strong> (Workshop Takeover, Weekend campaign templates) · <strong>The Holocron</strong> guide article inline gallery when a piece walks through a specific build.</p>
</div>
<div class="deployment__cell">
<div class="deployment__cell-title">Variant 02 · Community feed</div>
<p class="deployment__cell-body"><strong>Homepage community strip</strong> near the footer · <strong>Product page (MAS44)</strong> "customers using it" section · <strong>Category landing pages</strong> when tagged content exists · <strong>Search results empty state</strong> as an alternative to a pure "no results" screen.</p>
</div>
<div class="deployment__cell">
<div class="deployment__cell-title">Variant 03 · Featured testimonial</div>
<p class="deployment__cell-body"><strong>Product page (MAS44)</strong> mid-page testimonial band · <strong>Homepage</strong> occasional narrative moment · <strong>The Holocron</strong> as an intro quote to a technical guide · <strong>Bundles page (MAS92)</strong> when a bundle has a strong customer story attached.</p>
</div>
</div>
</div>
</main>
</body>
</html>