Hub

Page Mockups

Interactive prototypes for Sonographer in the Making

Product page

React App

SPI Exam Practice Questions

Full product page prototype — hero, feature breakdown, chapter preview, testimonials, related products, sticky add-to-cart. Built as a React app with Tailwind and shadcn/ui.

View prototype

Home page — Most Popular section

Variant 1

Three cards

Classic row: three rectangular product cards, hero center slightly larger, flanks animating in from the sides on scroll. Each card carries title, reviews, price, tagline, and CTA.

Open mockup
Variant 2

Circles centered

Three circular product orbs across the middle with a dynamic detail card below. Radial teal vignette background. Hover any orb to fade it forward and swap the detail card content.

Open mockup
Variant 3

Circles asymmetric

Off-center cluster of three tilted circular orbs on the left; heading plus dynamic detail card on the right. Two-column editorial layout, staggered orb sizes and rotations.

Open mockup

Home page — Section mockups

Browse by topic

Find Your Study Tool

Four overlapping circular category cards (Study Guides, Flash Cards, Workbooks, Bundles) with a 1px black border and gradient label legibility. Replaces the static SVG-icon ribbon.

Open mockup
Success stories

What Future Sonographers Say

Three testimonial cards with bordered (#172224) edges, photo + name + program. Grid layout fits all three at desktop width without clipping.

Open mockup
Newsletter

Get Free Study Tips

Diagonal teal-to-cream banner with email capture and Subscribe CTA. Dark button for contrast against the brand teal background.

Open mockup
Our Story

Dear Future Sonographers

Two-column founder narrative with organic blob portrait. SVG illustration of a medical student with copy pulled verbatim from the live site.

Open mockup