RaveRep: Public Profile Design Guide

Comprehensive UI/UX audit reference · April 2026

Sections

Overview Layout & Structure Header Styles Typography Color System Content Sections Block Types Bottom Bar Card Styles Raves Section Animations Responsive Audit Checklist

Overview: Public Profile Architecture

The public profile page is the core product surface of RaveRep, the page every visitor sees when a rep shares their link. It dynamically composes a personal landing page from profile settings and content blocks.

Rendering Modes

Block Builder · Visual Editor · Legacy Sections

Header Styles

cover · centered · minimal · overlay · profile_pic_overlay

Profile Templates

Individual · Company · Brand · Recruiting

Page Rendering Flow

// Decision tree for rendering engine

if (profile.profile_type ∈ ['company','brand','recruiting']) {

→ Specialized Template (CompanyProfileTemplate | BrandProfileTemplate | RecruitingProfileTemplate)

} else if (profile.visual_sections_config.length > 0) {

→ Block Builder (visual_sections_config array, sorted by order)

} else if (visualSections.length > 0) {

→ Visual Editor (ProfilePreview canvas)

} else {

→ Legacy sections_order (string array fallback)

}

URL Parameters

?username=Required. The rep's unique username slug.

?preview=draftLoads draft_visual_sections_config instead of live.

?track=CODEShare tracking code, increments ProfileShare views.

?sig_template=Email signature tracking: template type.

?sig_link=Email signature tracking: which link was clicked.

?embedded=trueSkips layout wrapper for iframe embeds.

Layout & Structure

Content Width Options

narrowmax-w-xl~600pxCompact, focused

normal (default)max-w-3xl~768pxStandard, most used

widemax-w-6xl~1152pxFull-width feel

Section Spacing Options

compactspace-y-2 md:space-y-3Tight, dense

normal (default)space-y-6 md:space-y-8Balanced spacing

spaciousspace-y-10 md:space-y-14Airy, premium feel

Text Alignment Options

left

center (default)

right

Page Background

Background

Applied to the full page wrapper

bg-gradient-to-br from-slate-50 to-slate-100

Bottom padding

Ensures content clears fixed bottom bar

pb-32

Overflow

Prevents horizontal scroll on mobile

overflow-x-hidden

z-index (bottom bar)

Fixed bottom CTA bar sits above all content

z-[9999]

Header Styles (HeaderRenderer)

All header styles use the same HeaderRenderer component. Below are pixel-accurate previews of each style with a sample profile.

1. Cover (Default)

header_style = "cover"

Full-width color/photo strip at top. Profile photo overlaps the bottom edge. Name, tagline, and social buttons on white below.

Jane Smith

Top Sales Manager

Austin, TX · Acme Corp

Book

📐 Cover strip: h-36 md:h-44🖼 Photo: w-20 h-20 overlapping -mt-10✅ Most commonly used style

2. Overlay

header_style = "overlay"

Cover photo fills the full header. Text is rendered on top of the image with a dark brand-colored gradient overlay. Profile photo sits above the name.

Jane Smith

Top Sales Manager

Austin, TX · Acme Corp

Book

🎨 Text + social buttons float on top of photo⚠️ Requires a strong/dark cover image for text legibility🎨 Brand color gradient overlay at bottom half

3. Profile Pic Overlay

header_style = "profile_pic_overlay"

The profile photo fills the entire header height (object-contain, centered). Blurred version fills the sides. Name/socials sit at the bottom over a dark gradient.

Jane Smith

Top Sales Manager · Acme Corp

Book

🖼 Profile photo is the hero, fills the full header💡 Works best with portrait-style headshots📐 Height: min-h-72 (normal) up to md:h-[36rem] (tall)

4. Centered

header_style = "centered"

No cover photo. Profile photo centered with a plain white background. Clean, simple, no distractions.

Jane Smith

Top Sales Manager

Austin, TX

Book

✅ Cleanest, most universally professional look📐 Photo: w-28 h-28 (large), centered💡 No cover photo required

5. Minimal

header_style = "minimal"

Small avatar centered above the name. Subtle brand-tinted background. The most compact option, great for content-heavy profiles where you want users to scroll quickly.

Jane Smith

Top Sales Manager

Austin, TX

Book

📐 Photo: w-20 h-20 (smallest)✅ Best for content-first profiles🎨 Subtle brand-tinted background (5% opacity)

Cover Photo Height Classes

compact

cover_photo_height = 'compact'

h-40 (160px)

normal (default)

cover_photo_height = 'normal'

h-64 (256px)

tall

cover_photo_height = 'tall'

h-80 (320px) + md:h-96

Profile Photo Sizing

Cover style

Overlaps cover strip with -mt-10

w-20 h-20 md:w-28 md:h-28

Overlay / profile_pic_overlay

Larger for visual impact on dark backgrounds

w-28 h-28 md:w-36 md:h-36

Centered / Minimal

Centered layout uses larger photo

w-28 h-28 / w-20 h-20

Border

White ring separates photo from background

border-4 border-white shadow-md

Logo position

Logo pinned top-right on all cover-based styles

absolute top-4 right-4

Typography System

Font Families Available

Inter

inter

Sans-serif (default)

Roboto

roboto

Sans-serif

Poppins

poppins

Geometric sans-serif

Playfair Display

playfair

Serif

Montserrat

montserrat

Geometric sans-serif

Lora

lora

Serif

Open Sans

opensans

Humanist sans-serif

Raleway

raleway

Elegant sans-serif

All fonts loaded via Google Fonts on page load when set.

Type Scale Used on Profile

Profile Name (cover header)

text-2xl md:text-3xl font-bold

Section Headers

text-xl md:text-2xl font-bold

header_text_size: xlarge

text-5xl md:text-6xl font-extrabold

Card titles / Link labels

text-sm md:text-base font-semibold

Tagline / Position

text-sm md:text-base text-slate-600

Company name

text-base md:text-lg font-medium

Bio text

text-slate-700 leading-relaxed prose prose-sm

Badge / Subtext

text-xs

Bottom bar labels (mobile)

text-[10px] leading-tight font-medium

text-[9px] md:text-[10px] text-slate-400

Header Text Size Options

small

header_text_size field

text-xl md:text-2xl

medium (default)

text-2xl md:text-3xl

large

text-3xl md:text-4xl

xlarge

Bold statement style

text-5xl md:text-6xl font-extrabold

Color System & Themes

Theme Presets (Gradient Pairs)

Purple (default)

#9333ea → #2563eb

Blue

#2563eb → #0891b2

Orange

#ea580c → #db2777

Green

#16a34a → #059669

Pink

#db2777 → #e11d48

Custom hex

Custom

Fixed UI Colors (not theme-dependent)

Save Contact button

Bottom bar CTA (mobile)

Connect button

Bottom bar, always orange/pink

Leave a Rave

Bottom bar, always pink/purple

Page background

Full page bg

Card elevated (default)

Default card bg

Bottom bar

Fixed bottom panel

Header Text Color Override

header_text_color

Overrides default white/dark text on header name/tagline

user-defined hex

tagline_color

Separate color control for tagline only

user-defined hex

Content Sections: Section Order & Visibility

Each section is controlled by a show_* boolean on the profile + content existence checks.

Section Key	Profile Toggle	Content Check	Section Header
featured	show_featured_section	has featured items	None (no header text)
video	show_video	video_intro_url exists	None
videos	show_videos	videos.length > 0	🎥 Video Gallery
documents	show_documents	documents.length > 0	📄 Free Resources
goals	show_goals	goals.length > 0	🎯 My Goals
links	show_links	regularLinks.length > 0	Links (customizable)
showcase	show_showcase	showcases.length > 0	Per showcase.title
embeds	show_embeds	embedLinks.length > 0	Media
raves	show_raves	always renders if enabled	profile.raves_section_header (default: 'Raves')

Default sections_order Array

['featured', 'video', 'links', 'raves', 'goals', 'videos', 'showcase', 'embeds', 'documents']

Users can reorder via Section Order Manager. Order is stored on profile.sections_order.

Block Builder: Block Types

When visual_sections_config is populated, the block builder renders instead of the legacy section order. Each block has { id, type, order, enabled, settings }.

Section Blocks (All items of a type)

links

All active links, sorted by order. Supports list + grid display modes.

raves

Raves section with slider/grid/list display options.

goals

All public goals with progress bars.

videos

Video gallery grid.

featured

Featured links, goals, raves and videos in theme gradient style.

showcase

Rich visual sections: gallery, listings, portfolio, etc.

embeds

Spotify, Calendly, forms, and iframe embeds.

documents

Free resource downloads with gated email capture.

Individual / Spotlight Blocks

single_link

Spotlight one specific link, full-width button style.

single_goal

Highlight one goal with progress bar.

single_rave

Feature one testimonial card.

single_video

Spotlight one video with EnhancedVideoPlayer.

single_embed

One calendar, form, or iframe. Supports raw embed_url or Link record.

Block Settings Options (per block)

bg_color

Optional background wrapper around the block

Tailwind class

title

Custom section heading (e.g., links block)

string

showcase_ids

Filter showcases shown in a showcase block

string[]

selected_item_id

For single_* blocks, which item to spotlight

entity id

embed_url

For single_embed block, raw iframe or URL

url or HTML

Fixed Bottom Bar / CTAs

The bottom bar is a fixed panel at the bottom of the page on both mobile and desktop. It is always visible and drives the primary conversion actions.

Mobile Layout (md:hidden)

Mobile Bottom Barpb-safe zone recommended

Save My Contact Info

Connect

Referral

Rave

⚠ The "Save My Contact" button is only shown if show_contact_button !== false AND show_contact_in_bottom_bar !== false

Desktop Layout (hidden md:flex)

Desktop Bottom Bar

Save Contact

Connect

Send Referral

Leave a Rave

Custom Buttons

Reps can add custom buttons via profile.custom_buttons[]. Each button: { id, label, url, icon, color, order }. These inject before the Connect button in both mobile and desktop bars.

Bottom Bar Visibility Controls

show_contact_button

Controls 'Save Contact' button

boolean (default: true)

show_contact_in_bottom_bar

Controls mobile 'Save My Contact Info' large button

boolean (default: true)

contact_form_enabled

Shows Connect button

boolean (default: true)

show_referral_button

Shows Send Referral button

boolean (default: true)

Card Styles

The card_style field applies to all content cards (links, goals, raves, documents). Applied via the ContentCard component.

elevated (default)

White card with drop shadow

glass

Frosted glass, works on colored backgrounds

bordered

Stronger border, no shadow

minimal

Borderless, flat separation

gradient

Subtle gradient fill

Raves Section Details

Display Styles (raves_display_style)

slider (default)

Horizontal drag/swipe carousel. One rave visible at a time on mobile.

Best for impact + mobile UX

grid

2-column card grid on desktop, 1-column mobile.

Shows more at once

list

Full-width stacked cards.

Best for long rave text

Rave Sources (Priority Order)

→ 1. Rep's own raves (status=approved), sorted by display_order
→ 2. SharedRave records (manager spotlighted raves from team pool)
→ 3. Seed raves from CompanyRave (team-wide seed raves, if not hidden)

⚠ Deduplication by text prevents duplicate raves from appearing. Reps can hide individual seed raves via hidden_seed_rave_ids.

Rave Card Anatomy

Rave Card, Annotated

Jane Customer

✓ RaveRep verified

Sales Manager · Acme Corp

Client

Mar 15, 2025

"This is where the rave message text appears. Long messages get truncated with a 'Read more' expand button after 250 characters..."

• Avatar: customer_photo or gradient initial fallback

• Check badge ✓: shown if customer has a RaveRep profile (customer_username exists)

• Relationship badge: formatted from snake_case → Title Case

• External link: shown for Google/Facebook/LinkedIn imported raves

• Video raves: rendered with RaveVideoPlayer inline

Section Header

raves_section_header

Customizable section title, reps can rename to 'Testimonials', 'Reviews', etc.

string (default: 'Raves')

Animation System

Animation Styles

subtle (default)

Fade in + slide up (y: 20→0, opacity: 0→1). 0.1s delays between items.

Library: framer-motion

dynamic

Same as subtle but with whileHover scale (1.03) and x-axis slide (-20→0) on links.

Library: framer-motion

none

No animations. Pure CSS, no motion wrappers.

Library: N/A

Parallax (Cover Photo)

enable_parallax

Uses framer-motion useScroll + useTransform. scrollY [0,300] → coverY [0,150]

boolean (default: true)

Cover opacity on scroll

Cover photo fades slightly as user scrolls down

useTransform([0,300], [1, 0.3])

Section Delay Timing

Header elements0.1s stagger

Education / Biodelay={1} or {2}

Responsive Design

Breakpoints Used

Base (mobile-first)

Single column, compact spacing, bottom nav shows full-width Save Contact

< 768px

md: (tablet/desktop)

Desktop bottom bar (hidden md:flex), larger photo sizes, wider padding

≥ 768px

sm:

Grid columns switch from 1 to 2 in showcase/videos

≥ 640px

lg:

Video/showcase grids switch to 3 columns

≥ 1024px

Mobile-Specific Behaviors

Large 'Save My Contact Info' button shown full-width above the Connect/Referral/Rave trio
Bottom bar switches to icon+label layout (flex-col items-center, h-11)
Cover photo uses cover_photo_position_mobile for object-position
Header text is smaller (text-2xl vs text-3xl on desktop)
Section headers: text-xl vs text-2xl
Card padding: p-4 vs p-4 md:p-6
Link buttons: p-3 vs p-3 md:p-4
Profile photo: w-24 h-24 vs w-32 h-32

Audit Checklist: Improvement Opportunities

Use this checklist to systematically review each area. Mark items and prioritize based on impact vs. effort.

Area

Status

Observation

Suggestion

Header: Cover style

⚠ Review

Education section only shows inside cover header, other header styles render it below which can feel disconnected.

Review education positioning for all non-cover headers

Header: Text contrast

⚠ Review

Light cover photos can make white text hard to read. overlay_opacity not configurable.

Add adjustable overlay opacity control

Header: Logo display

✓ Good

booking_logo_display supports photo_only, logo_only, photo_and_logo, well handled.

Consider logo+photo side-by-side layout option

Header: Bio below header

⚠ Review

Bio renders below header in a separate AnimatedSection. On cover style, there's a visual gap between header bottom and bio.

Consider tighter spacing or embedding bio in header cards

Bottom Bar: Button order

⚠ Review

Custom buttons always appear first before Save Contact, which may not be the desired priority.

Allow custom button position ordering relative to standard CTA buttons

Bottom Bar: Mobile 3-col

⚠ Review

With only 2 CTAs (no referral), grid-cols becomes uneven. The grid-cols dynamic calc might not work perfectly.

Use flex or auto-grid instead of hardcoded grid-cols-N

Bottom Bar: CTA labels

💡 Idea

'Leave a Rave' on desktop vs 'Rave' on mobile, inconsistent labeling.

Standardize or allow customization

Raves: Slider vs Grid

✓ Good

3 display options give good flexibility. Slider is most engaging on mobile.

Add 'masonry' option for dense rave walls

Raves: Section header

💡 Idea

raves_section_header is customizable but not prominently surfaced to users in settings.

Highlight this in the profile editor UI

Raves: Seed rave visibility

⚠ Review

hide_seed_raves is a legacy all-or-nothing toggle. hidden_seed_rave_ids is more granular but UX for hiding individual seeds is unclear.

Add visual UI for selecting which seed raves to hide

Typography: Font loading

⚠ Review

Fonts are loaded by injecting a <link> tag on mount. No flash of unstyled text prevention.

Add font-display: swap in loader or preload fonts

Typography: Bio HTML

⚠ Review

Bio uses dangerouslySetInnerHTML, potential XSS if bio source not sanitized server-side.

Ensure bio is sanitized before storage

Links: Grid mode

✓ Good

Thumbnail + label grid is visually strong. Grid links render before list links in the same section.

Consider an option to show grid vs list as the ONLY layout (not mixed)

Links: Embed types

💡 Idea

spotify_track, youtube, soundcloud render with EmbedRenderer but are split from regular links in logic.

Consider a dedicated 'Media' section toggle

SEO: Meta tags

✓ Good

OG tags, Twitter card, and title set dynamically via useEffect. Good for social sharing.

Consider server-side rendering for OG image pre-generation

Performance: Data fetching

⚠ Review

Two separate useQuery calls, profile then profileData. The second waits for the first, creating a serial waterfall.

Explore parallel or combined fetch via backend function

Performance: Raves enrichment

⚠ Review

Individual Rave.filter() calls per original_rave_id (O(n) API calls). Can spike with many shared raves.

Batch fetch original raves with a single filter query

UX: Save Contact flow

✓ Good

SaveContactDialog → email or vCard download works well. RavePrompt shown after saves.

A/B test showing RavePrompt earlier in the flow

UX: Section title style

💡 Idea

section_title_style supports default/centered/underline/badge/minimal but these are not visibly differentiated in current rendering.

Ensure all 5 styles are fully implemented and visually distinct

UX: Empty state

⚠ Review

If a user has no content (no links, no raves, etc.), the profile body can look very sparse.

Add contextual empty state prompts for profile owners

UX: School badge

💡 Idea

Education section shows schools in a small chip format. selectedSchool triggers a modal, behavior is not obvious to visitors.

Add a subtle 'tap to see details' hint

A11y: CTA buttons

⚠ Review

Fixed bottom bar buttons lack aria-labels in some variants.

Add descriptive aria-label to all bottom bar buttons

A11y: Image alt text

⚠ Review

Profile photo and cover photo use name/empty strings for alt, acceptable but could be more descriptive.

Review all image alt attributes

A11y: Keyboard nav

⚠ Review

Motion buttons (motion.button) may not have explicit focus rings.

Audit all interactive elements for :focus-visible styles

Quick Wins: High Impact, Low Effort

Fix dynamic grid-cols-N in bottom bar, use flex-wrap instead
Add aria-labels to all bottom bar CTA buttons
Surface raves_section_header customization more prominently
Standardize 'Leave a Rave' vs 'Rave' button label
Add loading skeleton for raves section specifically (high visual priority)
Add font-display: swap to prevent FOUT on custom fonts

Bonus Ideas, "Sexiness" Upgrades (Medium Effort, Big Impact)

Add subtle skeleton loaders to ALL content sections (not just raves), creates perceived speed & polish
Interactive header style switcher on the guide itself, let users see all 5 styles with ONE sample profile (makes decision-making 10x easier)
Add profile completion score calculation, show reps what % of their profile is 'optimized' (name → photo → tagline → socials) with a progress ring
Implement section 'focus modes' in bottom bar, add a View Fullscreen button for featured/raves sections (mobile conversion boost)
Add micro-animations to CTA buttons, gentle scale on hover (1.02) + fade-in on scroll for bottom bar buttons (feels premium)
Social button icon sizing consistency audit, ensure Instagram, TikTok, custom icons all feel the same visual weight (some look smaller)
Empty state illustrations for sections with no content (no raves yet, no links added, etc.), turns blank space into onboarding prompts
Lazy-load profile photos on scroll → improves LCP (Largest Contentful Paint), faster perceived load, especially on mobile
Add 'Recommended Layout' logic, analyze profile data (has videos? has raves? has goals?) and suggest optimal header style + section order
Generate contrasting text color automatically based on header_text_color and background, prevent contrast issues (WCAG AA compliance boost)

RaveRep Profile Design Guide · Internal use · Generated April 2026