Batch · 2026-04-22

Sonographer in the Making — homepage variations.

Nine sections, three to five directions each. Each variant is a standalone mockup using the locked palette and typography below. Source spec: /Downloads/sitm-homepage-variations.md.

#61BDB7 #242253 #1F3B3D #F082B4 #FAF5EE Fraunces / DM Serif Display Inter / Manrope

Reference baseline (current live site): homepage-baseline ↗

1. Hero

5 directions

Not yet mocked on the live site. Establishes palette, typography, and voice for the whole page.

AEditorial statementSerif headline, italic teal accent, single CTA. BAmbient wavesSame layout as A + SVG sine wave animation. CSplit screenDark teal left, Ken Burns photo right. DGrid-lockedScientific journal grid with data points. ETactile collageCutouts, rotations, pencil arrow.

2. Value / Trust strip

4 directions

Currently "A Quicker Way to Study" with icon-pattern background.

ANumber-first editorialLarge serif numerals, thin dividers, annual-report feel. BQuote stripSingle italic serif quote, byline, tiny nav dots. CLive counterNumbers animate from 0 on scroll-in. IntersectionObserver. DScroll tickerContinuous marquee of student outcomes.

3. Featured products / Most Popular

5 directions

Currently a 4-up grid. Variants include previously-seen "hover circles" and "numbered asymmetric" explorations.

AHover circlesMiddle circle pre-expanded; others reveal on hover/tap. BNumbered asymmetricVaried sizes, numbered badges, floating detail card. CEditorial grid3 equal cards, serif names, clean baseline. DSlide-over drawerQuick-view opens a right-side product detail panel. EBundle builderToggle products, total updates, 2+ unlocks discount.

4. Shop by Category

4 directions

Currently "Shop by Materials" — 4-tile grid.

AOverlapping circlesFour photo circles with label captions. BSidebar tabs galleryLeft tabs, right 2×2 grid with stagger reveal. CIcon minimalHand-drawn monoline icons, type-forward. DBy-exam pivotFrame by SPI / AB / OB / RVS. Structural shift.

5. Our Story / Founder

4 directions

Currently "Dear future sonographers" with Jenny's portrait.

AEditorial blob + 01Organic blob crop, giant "01" watermark, eyebrow/body/link. BHandwritten overlayCaveat-font note overlaid on Jenny's portrait. CInterview Q&AMagazine-style interview layout with teal-bordered portrait. DTimeline milestonesVertical timeline with dots, years, events.

6. Testimonials

4 directions

Currently Judge.me reviews carousel with pink-bordered cards.

AEditorial cardsWhite cards, initials avatars, italic pull-quotes. BLong-form featureOne student per viewport. Case-study treatment. CWall of proofMasonry grid of 9 short student quotes. DVerified passesEach card shows a "Verified ARDMS pass" checkmark badge.

7. Newsletter / Lead magnet

4 directions

Currently newsletter block in the footer. Lifting to a dedicated homepage section.

ATeal block + diagonalFull-width teal with diagonal cut to cream; pill input. BQuiz-first CTADiagnostic-as-lead-magnet. Email captured on results page. CLead-magnet previewPDF cover mockup left, email capture right. DMini-game hookDoppler shift calculator; capture reveals after 3 interactions.

8. Interactive block

3 directions

New section — positions SITM as tools-plus-merch rather than just merch.

APulsed showcaseOne live Doppler calculator, reverent pulse border. BTool grid preview2×2 tool cards with looping CSS animations. CTaste-test diagnostic3 visual questions, product recommendation, no email required.