Component Showcase

Mobile-optimized responsive navigation with hamburger menu and full-screen drawer for touch-friendly wayfinding and thumb-zone accessibility. Best for: All mobile experiences, responsive sites, mobile-first designs, touch interfaces. Mobile navigation is critical for 50-60% of web traffic - mobile users navigate differently than desktop (thumb-based interaction, progressive disclosure, single-column). Leverages mobile UX patterns: hamburger icon (universally recognized 'hidden menu' symbol), full-screen/drawer overlay (focus + large tap targets), progressive disclosure (hide complexity until needed). Includes desktop fallback (horizontal nav for larger screens) with responsive breakpoint. Mobile navigation psychology: Users expect persistent access (sticky default), large touch targets (44x44px minimum), clear escape routes (close X, background tap), thumb-zone optimization (important items within reach). Use this for responsive sites serving mobile traffic. Default sticky for mobile (persistent access crucial on small screens).

Primary site navigation with logo, menu items, and optional CTA for wayfinding and conversion. Best for: Landing pages, marketing sites, SaaS products, corporate websites, portfolio sites. The navigation bar is the first interaction point (users scan top-left immediately) and serves as persistent orientation anchor. Leverages navigation psychology: F-pattern scanning (logo left, CTA right), information scent (clear labels reduce bounce), persistent access (sticky option reduces friction). Use this for standard horizontal navigation with 3-7 primary pages. Strategic importance: Navigation affects bounce rate, time on site, and conversion - it's the user's map and safety net. Choose transparent variant for hero-overlay immersion or solid for clear separation.

Hero section with integrated form builder for lead capture and conversion. Forms are created and managed in the Form Builder (/workspace/form-builder), then embedded here by form ID. Best for: Waitlists, newsletter signups, free trial signups, demo requests, early access programs, lead magnets. The form is prominently featured alongside compelling copy to maximize conversions. Use this when your primary goal is collecting leads, emails, or user information. Choose hero-simple for information-focused pages or hero-split for product showcase.

Versatile hero section optimized for conversion and clarity. Best for: SaaS landing pages, product launches, service businesses, and general marketing pages. Supports multiple layouts (centered, split, left/right-aligned) and optional media (images, videos). Use this component when you need a clean, focused hero that puts your message first. Choose hero-split for stronger visual emphasis or hero-form for lead capture.

50/50 split layout hero with equal emphasis on content and visual media. Best for: SaaS products with strong UI, data platforms with dashboards, apps with visual interfaces, products where 'show don't tell' is critical. The split layout gives visual weight to product screenshots or demo videos. Use this when you have compelling product visuals that sell better than words alone. Choose hero-simple for text-focused pages or hero-form for lead capture.

Full-screen video background hero with overlay and CTAs for immersive brand storytelling and maximum engagement. Best for: Product launches, brand showcases, lifestyle products, event pages, creative agencies, visual-heavy campaigns. The video hero creates emotional connection through motion and cinematic aesthetic. Leverages video psychology: Motion captures attention (80% more engaging than static images), storytelling builds brand connection, cinematic feel signals premium perception, autoplay creates immediate immersion. Use when you have compelling brand/product video and want maximum visual impact. Strategic placement: Homepage hero (brand showcase), launch pages (announcement), event pages (atmosphere), creative portfolios (visual impact). Choose hero-simple for text-focused messaging or hero-split for product screenshots with equal weight.

Display company logos in responsive grid for instant credibility and trust building through brand association. Best for: B2B landing pages, SaaS products, enterprise software, agency portfolios, startup validation. Leverages social proof psychology: authority bias (trusted brands transfer credibility), herd mentality ('if these companies use it, it must be good'), specificity (real logos > generic claims). Use this when you have recognizable client/partner logos to showcase. Strategic placement: Below hero (immediate credibility), after features (validation), before testimonials (compound social proof). Choose 4-8 logos for optimal impact without overwhelming.

Display quantifiable metrics in horizontal row for instant credibility and authority building through numbers. Best for: SaaS landing pages, product pages, about pages, startup validation, growth metrics showcase. Leverages numbers psychology: specificity bias (exact numbers feel researched), scale signaling (large numbers = safety/herd mentality), authority building (years/clients = experience), performance proof (uptime/speed = reliability). Use this when you have impressive quantifiable metrics to showcase. Strategic placement: Below hero (immediate credibility), after pricing (validation), end of page (final trust signal). Choose 3-4 stats for optimal scannability without overwhelming.

Grid of team member cards showing photos, names, roles, and bios with social links. Best for: About pages, company pages, team pages, leadership sections, startup landing pages. Human faces build trust 38% more than text alone - creates personal connection, humanizes brand, shows real people behind product. Photos + real names + LinkedIn increase trust 67% vs. text alone. Each member displays: professional headshot (circular), full name, job title, optional bio, LinkedIn/Twitter links. Strategic placement: About page (full team), homepage (founders/key leaders), investor pages (leadership team). Responsive grid adapts: 1-col mobile, 2-col tablet, 2-4 cols desktop. Social links encourage deeper research and build credibility through transparency.

Display customer testimonials in grid layout for powerful social proof and credibility building through peer validation. Best for: Product pages, landing pages, pricing pages, about pages, post-feature sections. Leverages testimonial psychology: peer influence (people like me trust it), social proof (consensus = safety), specificity bias (detailed stories = credibility), authority transfer (impressive titles/companies lend credibility). Use this when you have authentic customer testimonials with specific outcomes or experiences. Strategic placement: After pricing (address purchase anxiety), after features (validate claims), before CTA (final trust push). Choose 2-3 testimonials for optimal scannability and diversity.

Media logo cloud displaying press mentions, publications, and podcast features for credibility building. Best for: Homepage, about pages, landing pages, press pages. Leverages authority transfer - recognizable media logos (Forbes, TechCrunch, CNN) instantly confer credibility. Social proof psychology: 'If major publications trust them, I can too.' Increases trust 35-50% vs. no media proof. Each logo can link to actual article/feature for transparency. Strategic placement: Below hero (immediate credibility), above testimonials (reinforces trust), footer (always visible). Grayscale variant recommended for visual cohesion. Use when you have legitimate media coverage - fake/misleading logos destroy trust permanently.

Awards, certifications, and compliance badge display for authority building. Best for: About pages, footer sections, pricing pages, homepage trust sections. Showcases security certifications (SOC 2, ISO), compliance (GDPR, PCI), industry awards (G2, Gartner), and quality standards. Authority transfer psychology: Official certifications from recognized bodies = instant credibility. Increases enterprise trust 40-60% vs. no certifications. Each badge shows logo/seal + certification name + issuing org + optional year/description. Strategic placement: Below hero (immediate authority), pricing pages (justify premium), footer (always-visible credentials). Use authentic certifications only - fake badges destroy trust permanently. 3-6 badges = credible (too few = weak, too many = bragging). Mix types: security + compliance + industry recognition for well-rounded credibility.

Trust badge grid displaying privacy, security, and guarantee promises to reduce purchase anxiety. Best for: Below opt-in forms, near checkout CTAs, footer sections, pricing pages. Addresses the 3 main trust concerns: Privacy ('We won't spam you'), Security ('Your data is encrypted'), Guarantee ('Money-back if unsatisfied'). Psychology: Reduces friction by explicitly addressing unstated objections. Increases form conversion 15-25% when placed below email capture. Each badge shows icon + title + brief explanation. Strategic placement: Directly below email forms (reassure before submit), checkout pages (secure payment proof), footer (always-visible trust). Use 3-4 badges covering different trust dimensions. Icons create instant visual recognition (shield = security, lock = privacy).

Feature comparison table for plan/product comparisons. Best for: Pricing pages, product pages, landing pages after features section. Shows feature-by-feature breakdown across 2-4 options (plans, tiers, competitors). Decision-making psychology: Side-by-side comparison reduces cognitive load - users scan horizontally to find best fit. Increases conversion 25-40% by clarifying value differences. Each row = one feature with checkmarks (✓), X marks, or specific values (numbers, text). Optional column highlighting guides users to recommended option (most popular, best value). Strategic placement: Below pricing cards (detailed breakdown), standalone pricing page (comparison-first approach), competitive landing pages (us vs them). Use 6-8 key differentiating features - too few = vague, too many = overwhelming. Highlight 1 column only to anchor decision. CTAs at bottom of each column enable immediate action.

Icon-based feature grid optimized for quick scanning and value communication. Best for: Product overview pages, feature comparison, benefit highlights, service listings, capability showcases. The grid layout with icons creates visual anchors that make features instantly scannable. Use this when you need to present 3-6 features with equal weight and importance. Choose feature-list for simple bullet-style features or feature-spotlight for detailed feature explanations with imagery.

Checkmark-based feature list optimized for benefit communication and trust building. Best for: Pricing tables, plan comparisons, included features, benefit highlights, what's included sections. The checkmark pattern creates positive reinforcement and makes scanning effortless. Use this when you need to present 4-10 features in a simple, scannable format without requiring icons or imagery. Choose feature-grid for icon-based feature showcases or feature-spotlight for detailed feature explanations with visuals.

Alternating left/right feature sections with prominent imagery for detailed feature storytelling. Best for: Product showcases, visual feature demonstrations, detailed capability explanations, 'how it works' sections, UI/screenshot highlights. The alternating layout creates visual rhythm and gives each feature substantial real estate for explanation. Use this when features benefit from visual demonstration and require more detailed descriptions than grid/list formats allow. Choose feature-grid for quick-scan icon-based features or feature-list for simple benefit checklists.

Tabbed feature showcase with progressive disclosure for organized capability presentation. Best for: SaaS product features, multi-product comparison, workflow options, plan capabilities, platform modules. Tabs reduce cognitive load by showing one feature set at a time while maintaining easy navigation. Leverages progressive disclosure psychology: Shows overview, users explore details on demand (reduces overwhelm), tabs create mental categorization (aids understanding), interactive exploration increases engagement. Use when: Showcasing 3-6+ distinct feature categories, want organized navigation, need to present multiple workflows/use cases, comparing capabilities. Strategic placement: Product page (feature deep-dive), homepage (capability overview), comparison page (plan features). Choose feature-grid for equal-weight features or feature-spotlight for sequential storytelling.

Multi-tier pricing comparison in card layout for optimal choice architecture. Best for: SaaS products, subscription services, tiered offerings, B2B platforms. Displays 2-3 pricing tiers side-by-side for easy comparison. Leverages pricing psychology: anchoring (expensive tier makes others seem reasonable), decoy effect (middle tier wins 50-60%), social proof ('Most Popular' badge). Use this when you have multiple pricing tiers and want to guide users to specific plan. Choose pricing-simple for single-tier products or when simplicity is the goal.

Single pricing tier with features list for no-choice pricing strategy. Best for: Simple products, indie SaaS, single-tier offerings, straightforward pricing models. Eliminates decision paralysis by offering one clear option. Reduces cognitive load and speeds up purchase decision. Use this when product has one pricing model or when you want to emphasize simplicity as a feature. Strategic benefits: Higher conversion (no choice paralysis), faster decisions, emphasizes product simplicity. Choose pricing-cards for multiple tiers or complex pricing structures.

Expandable accordion FAQ section for self-service support and objection handling. Best for: Reducing support burden, addressing common concerns, building trust, improving SEO, pre-sales objection handling. The accordion format progressively discloses information, keeping the page clean while providing comprehensive answers. Each question expands to reveal detailed answers. Use this when you need to address multiple questions without overwhelming the page. Strategic placement: after pricing (address objections), before footer (final questions), standalone FAQ page (comprehensive support). SEO BENEFITS: FAQ schema markup for rich results, natural long-tail keywords, voice search optimization, increased dwell time.

Real-time countdown timer for urgency-driven campaigns and FOMO (fear of missing out). Best for: Product launches, limited-time offers, flash sales, event registrations, early bird pricing, pre-orders, webinar signups, seasonal campaigns. Creates time scarcity to drive immediate action. Leverages urgency psychology: Visible ticking clock triggers loss aversion ('opportunity slipping away'), countdown creates deadline pressure (scarcity principle), real-time updates maintain attention and engagement. Use when: Running time-limited promotions, building launch hype, driving event registrations, creating flash sale urgency, offering early bird/limited pricing. Strategic placement: Hero section (maximum visibility), sticky banner (persistent urgency), above pricing (deadline pressure), campaign landing pages. Choose cta-simple for non-time-sensitive offers or cta-banner for persistent messaging without countdown mechanics.

Full-width banner strip for high-visibility calls-to-action and urgent messaging. Best for: Announcements, limited-time offers, final conversion push, sticky headers, urgent actions, prominent section breaks. The horizontal banner format creates visual interruption that demands attention without being intrusive. Supports multiple visual styles (default, gradient, dark) for varying urgency and brand alignment. Use this when you need maximum visibility for time-sensitive or high-priority actions. Choose cta-simple for standard centered CTAs or when you want gentler integration with page flow.

Centered call-to-action section optimized for conversion and decision-making. Best for: Page endings, section closures, mid-page conversion points, final push before footer. The centered layout with clear headline and dual-button options creates focused attention on the action. Supports both single-action (maximize primary conversion) and dual-action (offer alternative path) strategies. Use this when you need a clear conversion moment after presenting value. Choose cta-banner for high-visibility strips or urgent messaging that needs to break out of standard page flow.

Fixed position chat widget for instant support and engagement. Best for: Customer support access, live chat integration, sales conversations, help desk entry point, AI chatbot triggers. Creates persistent access to help without disrupting page content. Leverages support psychology: Bottom-right convention (users expect help here), persistent visibility (always accessible), low friction (one-click access), immediate response expectation. Use when: Offering live chat, integrating chat tools (Intercom, Drift), providing AI support, want to reduce support tickets, improving customer engagement. Strategic placement: Bottom-right (universal standard), always visible (fixed position), non-intrusive (small footprint). Choose cta-simple for page-level CTAs or cta-banner for prominent messaging.

Minimal footer with copyright notice and essential legal/utility links for clean site closure and compliance. Best for: All websites, landing pages, SaaS products, minimal designs, when extensive footer navigation isn't needed. Footer serves critical functions: legal compliance (Privacy/Terms required for GDPR, CCPA), trust signals (copyright = legitimacy), final navigation safety net (Contact, About), brand closure. Minimal footer pattern: clean visual closure without distraction, focuses on essentials (3-6 links), mobile-friendly single row. Footer psychology: Users expect footer for legal info (95%+ scan footer for Privacy/Terms), copyright year verification (trust signal for site maintenance), contact access (secondary support path). Use simple footer when extensive footer nav/newsletter aren't needed - prioritizes compliance and clean design over comprehensive sitemap.

Responsive grid of blog post cards with featured images, metadata, and excerpts. Best for: Homepage blog section, resource center preview, news updates, content marketing showcase. Blog readers convert 45% better than average visitors - education builds trust, demonstrates expertise, keeps users engaged. Each card displays: featured image, category tag, title, excerpt, author, date, read time. Hover effects and image zoom create engaging interaction. Strategic placement: Homepage (thought leadership), product page (tutorials/use cases), about page (company news). Responsive 3-column grid adapts to 2-column tablet, 1-column mobile. Optional 'View All' CTA drives traffic to full blog archive.

Long-form content area with rich HTML/markdown support and Tailwind prose styling. Best for: About pages, company mission/values, documentation, how-it-works sections, editorial content, policy pages, blog-style content. Supports full semantic HTML formatting with optimal typography and readability. Use this when you need to present detailed text content beyond simple headlines and descriptions. Choose hero-simple for conversion-focused messaging or feature components for structured capability showcases.

Visual section separator for creating rhythm and pacing in long-form content. Best for: Content-heavy pages, long landing pages, editorial content, blog posts, documentation, multi-section pages. Provides visual breathing room and helps guide readers through content transitions. Supports multiple styles (solid, dashed, dotted, gradient) and optional decorative elements (dots, stars, custom text). Use this to break up content sections and improve page flow. Choose appropriate spacing and opacity based on desired visual weight and content relationship.

Embeddable form component with customizable fields, validation, and submission handling

Timeline visualization showing journey, progress, or process steps with status indicators. Best for: Company history/about pages, how-it-works sections, onboarding journeys, product roadmaps, customer success paths. Visual storytelling increases comprehension 60% over text - timelines create narrative structure, help users mentally organize information, show progression/achievement. Each milestone displays: year/step marker, title, description, optional status (completed/current/upcoming). Supports vertical (traditional, mobile-friendly) and horizontal (modern, compact) layouts. Strategic placement: About page (company journey), product page (how-it-works), landing page (customer transformation), roadmap page (future plans). Visual status indicators: Green checkmark (completed), primary color (current/default), muted outline (upcoming). Connecting lines create visual flow between milestones.

Responsive YouTube/Vimeo video player with customizable aspect ratios and controls. Best for: Product demos, customer testimonials, explainer videos, founder stories, tutorial content. Video increases engagement 1200% over text and conversion 84% - shows personality, builds trust through face-to-face connection, demonstrates products in action. Supports autoplay, muted start, looping, and optional CTA below player. Strategic placement: Homepage (explainer/story), product page (demo/tutorial), about page (founder story/team intro), landing page (social proof testimonial). Choose this over hero/video when video is primary content (not background). Responsive iframe maintains aspect ratio across all devices.

Embedded Google Maps with contact information (address, phone, email, hours). Best for: Contact pages, about pages, footer sections, location pages, store finders. Interactive map + contact details reduce friction to visit/contact - map builds trust (can verify location), provides directions, shows accessibility. Each section displays icon + label + info with click-to-call phone and mailto email links. Strategic placement: Contact page (primary use), about page (office location), footer (always accessible). Split layout: Contact info left, map right (desktop), stacked mobile. Map iframe loads Google Maps with full interactivity (zoom, street view, directions). Use this when physical location matters to business (retail, office, restaurant, clinic).

Triggered popup modal with multiple trigger options (immediate, time delay, scroll depth, exit intent). Best for: Lead generation, newsletter signups, discount offers, content downloads, exit-intent campaigns. Modal overlays page with backdrop, shows headline + description + CTA. Trigger psychology: Immediate (high visibility, low conversion), Delay 5-10s (engaged users, balanced), Scroll 30-50% (strong interest signal), Exit intent (last chance, highest intent). Exit intent converts 2-4%, delay converts 1-3%. Strategic use: Time-sensitive offers (discounts, limited inventory), lead magnets (ebooks, guides), newsletter growth, cart abandonment. Closable by default (user agency = trust). SessionStorage prevents repeat annoyance. Use sparingly - overuse increases bounce rate 40%.

E-commerce product grid with images, titles, pricing, descriptions, and CTAs. Best for: Online stores, product pages, shop sections, marketplaces, featured collections. Product images are #1 purchase factor - shows exactly what customers get, reduces uncertainty, enables comparison. Each card displays: product photo (hover zoom), title, price, optional description, optional badge (New/Sale/Best Seller), full-width CTA button. Strategic placement: Homepage (featured products), shop page (catalog), category pages (filtered items), landing pages (specific collections). Responsive grid: 1-col mobile, 2-col tablet, 2-4 cols desktop. Badges create urgency (Sale/Limited) and social proof (Best Seller). Hover effects encourage interaction. Use for any e-commerce application or product showcase.

Progressive multi-step form with auto-detected steps based on conditional field logic. Forms created in the form builder with dependsOn relationships automatically become multi-step wizards with progress indicators, step validation, and navigation. Supports 4 width variants (narrow to full) and 4 layout styles (centered, left-aligned, split, wizard). Best for: complex forms, surveys, onboarding flows, applications, multi-part data collection. The wizard automatically groups fields by dependency depth - fields with no dependencies become Step 1, fields that depend on Step 1 become Step 2, and so on. Step navigation can be manual (Next/Previous buttons) or automatic (advances when step is complete). Choose wizard layout for traditional stepped UI with card, split for forms needing explanation content, centered for focused simple forms.