67 lines
4.8 KiB
HTML
67 lines
4.8 KiB
HTML
<h2>Hero Layout: What's the main structure?</h2>
|
|
<p class="subtitle">The hero is the first thing visitors see. Which layout best suits a "start your build now" homepage?</p>
|
|
|
|
<div class="cards">
|
|
|
|
<div class="card" data-choice="centered" onclick="toggleSelect(this)">
|
|
<div class="card-image">
|
|
<div style="background:#0a0a0a;border-radius:8px;padding:28px 20px;font-family:sans-serif;min-height:220px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;border:1px solid #27272a;">
|
|
<div style="font-size:10px;letter-spacing:0.2em;color:#fbbf24;text-transform:uppercase;opacity:0.8;">AR-15 Build Planner</div>
|
|
<div style="font-size:22px;font-weight:700;color:#fff;text-align:center;line-height:1.2;">Build smarter rifles.<br><span style="color:#fbbf24;">No spreadsheets.</span></div>
|
|
<div style="font-size:11px;color:#a1a1aa;text-align:center;max-width:280px;">Pick parts by role, catch compatibility issues, compare live prices — all in one place.</div>
|
|
<div style="display:flex;gap:10px;margin-top:8px;">
|
|
<div style="background:#fbbf24;color:#000;font-size:11px;font-weight:700;padding:8px 20px;border-radius:6px;letter-spacing:0.05em;">START A BUILD →</div>
|
|
</div>
|
|
<div style="margin-top:10px;background:#1a1a1a;border-radius:6px;border:1px solid #27272a;width:100%;height:60px;display:flex;align-items:center;justify-content:center;">
|
|
<div style="font-size:10px;color:#52525b;">▶ Builder preview video</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<h3>A — Centered / Full-width</h3>
|
|
<p>Headline + tagline centered, single dominant CTA button, product video below. Clean, magazine-style. Works great on mobile.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card" data-choice="split" onclick="toggleSelect(this)">
|
|
<div class="card-image">
|
|
<div style="background:#0a0a0a;border-radius:8px;padding:20px;font-family:sans-serif;min-height:220px;display:flex;align-items:stretch;gap:16px;border:1px solid #27272a;">
|
|
<div style="flex:1.1;display:flex;flex-direction:column;justify-content:center;gap:10px;">
|
|
<div style="font-size:10px;letter-spacing:0.2em;color:#fbbf24;text-transform:uppercase;opacity:0.8;">AR-15 Build Planner</div>
|
|
<div style="font-size:18px;font-weight:700;color:#fff;line-height:1.25;">Build smarter rifles.<br><span style="color:#fbbf24;">No spreadsheets.</span></div>
|
|
<div style="font-size:10px;color:#a1a1aa;line-height:1.5;">Pick parts, catch clashes, compare prices.</div>
|
|
<div style="background:#fbbf24;color:#000;font-size:11px;font-weight:700;padding:8px 16px;border-radius:6px;letter-spacing:0.05em;align-self:flex-start;margin-top:4px;">START A BUILD →</div>
|
|
</div>
|
|
<div style="flex:1;background:#111;border-radius:8px;border:1px solid #27272a;display:flex;align-items:center;justify-content:center;">
|
|
<div style="font-size:10px;color:#52525b;text-align:center;">App screenshot<br>or animation</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<h3>B — Split (text left, visual right)</h3>
|
|
<p>Copy on the left, app screenshot or short animation on the right. Shows the product immediately. Strong for conversion, more complex layout.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card" data-choice="immersive" onclick="toggleSelect(this)">
|
|
<div class="card-image">
|
|
<div style="background:#0a0a0a;border-radius:8px;padding:20px;font-family:sans-serif;min-height:220px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:10px;border:1px solid #27272a;position:relative;overflow:hidden;">
|
|
<div style="position:absolute;inset:0;background:linear-gradient(135deg,#111 0%,#0a0a0a 100%);opacity:0.9;"></div>
|
|
<div style="position:absolute;top:16px;left:0;right:0;text-align:center;">
|
|
<div style="font-size:10px;color:#52525b;letter-spacing:0.1em;">Full-bleed product image or video background</div>
|
|
</div>
|
|
<div style="position:relative;z-index:1;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px;padding-bottom:10px;">
|
|
<div style="font-size:20px;font-weight:700;color:#fff;text-align:center;line-height:1.2;">Build smarter rifles.</div>
|
|
<div style="font-size:18px;font-weight:700;color:#fbbf24;">No spreadsheets.</div>
|
|
<div style="background:#fbbf24;color:#000;font-size:11px;font-weight:700;padding:8px 22px;border-radius:6px;letter-spacing:0.05em;margin-top:6px;">START A BUILD →</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<h3>C — Immersive / Full-bleed</h3>
|
|
<p>Hero image or dark atmospheric background fills the viewport. Copy overlaid with high contrast. Dramatic, brand-forward. Requires great imagery.</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|