Skip to content

Add Clarence gallery, testimonials, pre-order UI and clean hero visuals #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
offmybach wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Add Clarence gallery, testimonials, pre-order UI and clean hero visuals #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5c7e3ce
Add conversion-proof and Clarence imagery sections
offmybach Feb 18, 2026
3573e96
Reshape covers and rebuild 6-page magazine to match reference style
offmybach Feb 26, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
212 changes: 212 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,212 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Clarence Gets a Bargain | Kid Lit Is a Hit</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=Manrope:wght@400;600;700;800&family=Fredoka:wght@500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header class="hero hero--statement hero--storybook">
<nav class="top-nav" aria-label="Primary">
<span class="top-nav__brand">Clarence®</span>
<a href="#story" class="top-nav__link">The Story</a>
<a href="#magazine" class="top-nav__link">Flip Preview</a>
<a href="#buy" class="top-nav__link">Buy Now</a>
</nav>
<div class="hero-statement">
<p class="eyebrow">Financial Literacy Adventure Series</p>
<h1>Clarence Gets a Bargain.</h1>
<p class="approval">Approved by at least 3 teachers (my mother (retired), brother, and neighbor)</p>

<p class="author-line">A clever tale for clever kids, by Jonathan Bach — author, illustrator, wordsmith supreme.</p>
<p class="mission-line">Clarence Wyze thinks he needs the newest robot… until Mom teaches him comparison shopping, coupons, and the superpower of saving.</p>

<div class="hero-stats" aria-label="Book highlights">
<div class="hero-stat"><strong>32</strong><span>Pages</span></div>
<div class="hero-stat"><strong>1</strong><span>Mission</span></div>
<div class="hero-stat"><strong>∞</strong><span>Giggles</span></div>
</div>

<p class="tagline">KID LIT IS A HIT! AND KID FIN IS A WIN!</p>
<p class="stealth-note">Stealthy Edutainment for growing money-smart minds.</p>

<div class="hero__cta">
<a href="#buy" class="btn btn--solid">Shop the Book</a>
<a href="#magazine" class="btn btn--ghost">Explore Coupon Adventure</a>
</div>
<div class="hero-flair" aria-label="Audience highlights">
<span>Parents</span>
<span>Educators</span>
<span>Storytime Leaders</span>
</div>
</div>
</header>

<section class="story-ribbon" aria-label="Adventure ribbon">
<p>Wish You Were Here!</p>
</section>

<section class="clarence-strip section-card" aria-label="Clarence character gallery">
<div class="clarence-strip__head">
<h2>Bring Clarence Front & Center</h2>
<p>Drop one Clarence image below and it repeats across the page for a strong character brand feel.</p>
<label class="cover-upload-btn" for="clarenceImageInput">Choose Clarence Image</label>
<input id="clarenceImageInput" class="cover-upload-input" type="file" accept="image/*">
</div>
<div class="clarence-gallery" id="clarenceGallery">
<button class="clarence-tile" id="clarenceImageSlot" type="button" aria-label="Drop or choose Clarence image">
<img id="clarenceImageMain" alt="Clarence image" hidden>
<span>Drop Clarence Here<br>or click to choose</span>
</button>
<div class="clarence-tile is-mirror"><img class="clarence-echo" id="clarenceEcho1" alt="Clarence repeat image" hidden><span>Character spotlight</span></div>
<div class="clarence-tile is-mirror"><img class="clarence-echo" id="clarenceEcho2" alt="Clarence repeat image" hidden><span>Character spotlight</span></div>
</div>
</section>

<main>
<section id="story" class="book-story section-card" aria-label="Back cover highlights">
<h2>Meet Clarence Wyze</h2>
<div class="story-grid">
<article class="story-card">
<span class="story-card__number">1</span>
<h3>The Big Robot Reward</h3>
<p>Clarence finally gets his shopping day after earning top grades and finishing chores — and he wants the newest smart robot he can find.</p>
</article>
<article class="story-card">
<span class="story-card__number">2</span>
<h3>Mom's Money Lesson</h3>
<p>He learns that families budget for needs, compare prices, and use sale ads and coupons before shopping trips.</p>
</article>
<article class="story-card">
<span class="story-card__number">3</span>
<h3>Clearance vs Clarence</h3>
<p>A hilarious mix-up leads to the clearance aisle, where Clarence discovers that smart choices beat flashy choices.</p>
</article>
<article class="story-card">
<span class="story-card__number">4</span>
<h3>Smart Shopper Victory</h3>
<p>He stacks a coupon on a clearance deal, saves more money, and leaves with confidence plus real-life financial literacy skills.</p>
</article>
</div>
</section>

<section id="magazine" class="magazine-launch section-card">
<div>
<h2>Step Into Clarence's Coupon Quest</h2>
<p class="quick-start">Quick start: drag a cover image into either side card (or click the card) and it saves automatically. Then click the center magazine to pop it front-and-center.</p>
<p id="uploadStatus" class="upload-status" aria-live="polite"></p>
</div>
<div class="magazine-centerline">
<div class="cover-card cover-card--side">
<h3>Front Cover Upload (3:2)</h3>
<div class="cover-placeholder cover-placeholder--image" id="frontCoverSlot" role="button" tabindex="0" aria-label="Drop or choose front cover image">
<img id="frontCoverPreview" alt="Front cover preview" hidden>
<p class="cover-placeholder__text"><strong>Drop Front Cover Here</strong><span>or click to choose</span></p>
</div>
<label class="cover-upload-btn" for="frontCoverInput">Choose Front Cover</label>
<input id="frontCoverInput" class="cover-upload-input" type="file" accept="image/*">
</div>

<div id="openMagazine" class="magazine-dock" role="button" tabindex="0" aria-label="Open 3D Coupon Magazine">
<div class="magazine-preview" aria-hidden="true">
<p class="magazine-preview__eyebrow">6-Page Flip Magazine</p>
<h3>Coupon Adventure Preview</h3>
<div class="magazine-preview__mock">
<div class="magazine-preview__bar"></div>
<p class="magazine-preview__save">Extra Savings</p>
<p class="magazine-preview__title">COUPONS</p>
<div class="magazine-preview__dash"></div>
<div class="magazine-preview__dash"></div>
<div class="magazine-preview__dash"></div>
</div>
<p class="magazine-preview__burst">Tap to launch the full-size flip magazine</p>
</div>
<p class="magazine-dock__cta">Click here to see about Clarence's quest for the perfect smart robot</p>
</div>

<div class="cover-card cover-card--side">
<h3>Back Cover Upload (3:2)</h3>
<div class="cover-placeholder cover-placeholder--image" id="backCoverSlot" role="button" tabindex="0" aria-label="Drop or choose back cover image">
<img id="backCoverPreview" alt="Back cover preview" hidden>
<p class="cover-placeholder__text"><strong>Drop Back Cover Here</strong><span>or click to choose</span></p>
</div>
<label class="cover-upload-btn" for="backCoverInput">Choose Back Cover</label>
<input id="backCoverInput" class="cover-upload-input" type="file" accept="image/*">
</div>
</div>
</section>

<section class="dark-showcase" aria-label="Highlights">
<h2 class="section-title">Why Families & Educators Love It</h2>
<section class="feature-grid" aria-label="Highlights">
<article class="feature-card">
<h3>Read Together</h3>
<p>A polished, grown-up visual style made for parents and educators reading to kids.</p>
</article>
<article class="feature-card">
<h3>Classroom Friendly</h3>
<p>Built-in coupon pages support activities, incentive moments, and lesson tie-ins.</p>
</article>
<article class="feature-card">
<h3>Fully Editable Coupons</h3>
<p>Each page has multiple coupon spaces with resizable text areas and editable dotted cut-lines.</p>
</article>
</section>
</section>

<section class="quote-band" aria-label="Reader love">
<p>“A story with heart, humor, and practical money-smarts — perfect for read-aloud moments and classroom chats.”</p>
</section>

<section class="proof-strip section-card" aria-label="Testimonials">
<h2>What Early Readers Are Saying</h2>
<div class="proof-grid">
<blockquote>“Finally, a funny story that sneaks in real money habits kids can actually use.”<cite>— Parent Reviewer</cite></blockquote>
<blockquote>“The coupon mission format is classroom gold. Students stay engaged and absorb the vocabulary.”<cite>— Elementary Educator</cite></blockquote>
<blockquote>“Clarence is relatable, hilarious, and perfect for read-alouds.”<cite>— Family Literacy Volunteer</cite></blockquote>
</div>
</section>

<section id="buy" class="payment section-card">
<h2>Purchase & Pre-Order</h2>
<p><strong>Format:</strong> Soft Cover (Primary Edition)</p>
<p>Retail links can be added as soon as you pick channels. For now, use these placeholder slots.</p>
<div class="payment__actions">
<button class="btn btn--solid">Pre-Order Soft Cover</button>
<button class="btn btn--ghost">Retailer Slot A</button>
<button class="btn btn--ghost">Retailer Slot B</button>
<button class="btn btn--ghost">Retailer Slot C</button>
<button class="btn btn--ghost">Bulk / School Pricing</button>
</div>
<p class="glossary-note">Coming bonus: optional kid-friendly glossary/definition guide download from the end-of-book summary section.</p>
</section>
</main>

<div id="magazineModal" class="modal" aria-hidden="true" role="dialog" aria-label="Coupon Magazine">
<div class="modal__overlay" id="closeMagazine"></div>
<button class="modal__close" id="closeMagazineBtn" aria-label="Close magazine">×</button>
<div class="stage-tilt">
<button class="turn-hotspot turn-hotspot--prev" id="turnPrev" aria-label="Turn to previous pages"></button>
<div class="magazine" id="magazineBook" aria-live="polite"></div>
<button class="turn-hotspot turn-hotspot--next" id="turnNext" aria-label="Turn to next pages"></button>
</div>
<p class="hint">Tip: click a lower corner (or use ← / →) to turn pages.</p>
</div>

<template id="couponSlotTemplate">
<article class="coupon-slot" contenteditable="true">
<h4>Coupon Title</h4>
<p>Editable coupon details go here.</p>
<div class="coupon-slot__offer">$5 OFF</div>
<p class="coupon-slot__line">Terms & notes</p>
<div class="coupon-slot__cutline" contenteditable="true">Edit dotted cut-line text • bring to checkout</div>
</article>
</template>

<script src="script.js"></script>
</body>
</html>
Loading