NumbersSection

Stats block with gradient hero card + 2×2 stat grid. Two variants: 'sphere' (Sphere in Numbers) and 'join' (Join 350+). Hero card can sit left or right.

TrustedBy

Logo marquee carousel — animates on loop, pauses on hover. Matches Figma 'Our Clients' section.

TestimonialsCarousel

Testimonial slider with drag/swipe support and pagination dots.

ServicesGrid

Asymmetric services grid with image cards. Desktop: 2-column layout. Mobile: stacked.

ServiceTile

Service/"What We Do" tile with icon, italic serif title, description, and bullet list. Two variants: "light" (white fill) and "dark" (blue outline on dark background). Designed to be used in a responsive grid.

IndustriesSection

Grid of industry tiles with icon and label, each linking to a dedicated page.

CustomerStories

Case study cards grid with tag, title, description and image.

StepsTimeline

Vertical step-by-step agenda with a blue gradient line threaded through small circle markers. Lora italic titles, DM Sans descriptions. Content column capped at 700px.

1. Free Assessment

   Sphere reviews your system: codebase size, language stack, integration surface, regulatory requirements.

2. Product Extraction Sprint

   Claude agents document the full system as a product. Functional requirements for the target state are written and validated with your team.

3. Phased Implementation

   Feature by feature through the spec-driven loop. First phase typically live in 6–12 weeks.

4. Go-Live & Handover

   Equivalence validation. Production deployment. Full documentation package.

5. Ongoing Support

   Monthly sprint cycles for feature additions, performance work, and next-phase modernization.

CtaQuote

Full-width blue quote banner with italic serif typography.

ContactForm

"Let’s Connect" contact section with inline form. Underlined fields, client rep block, optional logo row. Fully responsive — single column on mobile, stacked on tablet, split two-column on desktop.

CtaBanner

Dark gradient CTA section with headline and primary button.

ScrollCases

Swipable case study carousel with synced category tabs and progress bar. Supports dark/light themes. Used on service pages.

LatestInsights

Blog post grid (type-3 layout): full-bleed image cards with gradient overlay and hover color accent. 3-column grid with first card spanning 2 rows. Heading uses Lora italic accent.

GetStartedBanner

Simple CTA strip section with heading (DM Sans + Lora italic) and action button. Configurable background color.

Banner (Content Block)

Inline content banner for blog posts. Four styles: info, success, warning, error. Used inside Lexical rich text as a block node.

BorderBox

Styled content card with left accent border, optional icon, title, body text, and link. Supports shadow, custom colors, and line-clamp. Based on WP border-box shortcode.

SphereBanner

Promotional banner section with three background variants: light-blue, dark-blue (radial gradient), and rings. Supports image, CTA button, and full-width clickable mode. Based on WP sphere-baner shortcode.

SphereCallToAction

Full-width CTA section with centered title, description, and button. Dark gradient background with optional stars decoration and background image. Based on WP sphere-call-to-action shortcode.

TwoColumns

Two-column layout with text content and image. Supports reverse order, angled image mask, CTA button, and custom colors. Based on WP sphere_two_columns shortcode.

SphereHero

Hero section with multiple layout variants (center, simple, grid). Supports background image with overlay, decorative stars, subtitle, CTA button. Based on WP sphere-hero shortcode.

PodcastEmbed

Buzzsprout podcast player embed (script or iframe).

PodcastEpisodeCard

Card used on the /podcast listing.

PodcastListenOnSection

Podcast "Listen on" strip (Spotify / Apple / YouTube).

PodcastSubscribeSection

Podcast email subscribe banner ("Get SphereCast in your inbox").

ServiceHero

Service / accelerator / solution hero with eyebrow, dual-line heading (sans + Lora italic highlight), CTAs, and optional stair-stepped metric cards on the right.

LeadFormBanner

Dark rounded banner pairing a headline + italic Lora highlight with an inline lead-capture form. Used for whitepaper / guide CTAs.

LeadCaptureForm

Standalone lead-capture form. Renders name + work email by default, accepts custom fields and theme.

InlineCta

Minimal single-line CTA strip with optional secondary button and theme.

VideoCta

Centered play button + heading + CTAs that opens an embedded video in a modal.

AwardsBadges

Flex-wrapped grid of award badge logos with optional heading. Defaults to current Clutch awards.

AiValueSection

Dark-bg section pairing a segmented heading (alternating sans/italic Lora) + body paragraphs with a full-width diagram below. Used on /services/data-analytics.

ValueProposition

Cyan-bg centered section with a 3-col grid of white value cards (icon, title, description, optional link).

WhatWeDeliver

Brand-blue section with centered heading and 3-col grid of white feature cards (icon, title, description, optional bullets and CTA).

WhatWeDoTabs

Vertical tabs (desktop) / accordion (mobile) showcasing service capabilities with a synced image panel.

ServicesShowcase

Mosaic 6-tile grid showcasing services. Featured tall tile + smaller tiles in a 2-column right rail.

ServiceFeaturesGrid

Responsive 2- or 3-col grid of feature cards with optional images, titles, descriptions, and 'Read More' links.

ManagedServicesSection

Card grid of managed-services capabilities. Optional inverted (dark + accent border) variants per index.

DeliveryPaths

Dark-bg section with a heading + intro on the left and bordered delivery-path cards on the right (icon, eyebrow, title, description, bullets).

DeliveryPodsOffer

Dedicated pod offering with feature pills, stats, and primary CTA.

PodPackages

Stacked pod-package cards on a green background, each with shape and what-you-get bullet lists.

ModernizeStacks

Cyan-bg 2-column card grid (Legacy / Modern) with composite logo strips per row. Used on the modernization service pages.

ProcessSteps

Numbered process timeline (horizontal or vertical). Phase eyebrow, title, description per step. Light or dark theme.

OutcomeGoals

3-column grid of outcome goal titles with accent underlines.

Outcomes

2-col section: image or description on the left, scrollable outcome pill list on the right.

Differentiators

Heading + grid of differentiator tiles. Per-tile light/dark variant for mixed dark backgrounds.

UseCases

Zigzag 2-col layout pairing image + title overlay with descriptive text.

UseCasesFitGrid

2-col 'fit/use case' list with border-top dividers per row.

UseCasesTiles

3-col grid of tiles with top image + title + description. Used for industry use-case sections.

IndustriesGrid

3-col grid of industry cards (image-on-top, italic Lora title, description, 'Show more' link).

IntegrationCategoriesGrid

Light-blue section with a zigzag row of 5 brand-blue diamond tiles (icon + italic Lora title + short description). Used on /solution/netsuite-integrations as 'What Gets Integrated'.

BenefitsList

White section with heading + intro and a 2-col list of benefits/outcomes (icon+title left, description right, dividers between rows). Used as 'What You Get After Working With Us'.

AudienceCards

Dark section with a centered heading and a 2-col grid of large white cards (icon + italic Lora title + description). Used as 'Who This Is Built For'.

IntegrationsGrid

Brand-blue section with a 4-col grid of white logo tiles + uppercase tool names and a centered CTA. Used on /services/netsuite-integrations.

WhoThisIsFor

2-column reference table (industry / vertical application) inside a white rounded container.

ForYouOrNot

Two-card 'For You / Not For You' qualifier with bullet checklists. Strong colors per side.

ImpactMetrics

ROI / business-impact section — soft gradient backdrop with translucent dark cards showing large italic Lora values.

RoiCalculator

Interactive ROI calculator with 5 inputs and live computed results.

CostProgramsSection

Cost-savings programs explainer with a labeled rows table and metrics block. Used on cloud-cost service pages.

TechPartners

Light-blue heading + paragraphs paired with a 4-col partner-logo grid.

TechStackTable

2-column reference table mapping service areas to specific technology stacks.

FAQAccordion

Collapsible Q&A list with animated arrow markers.

BlogPostsGrid

4-column grid of blog post cards with category badges and a 'View All' link. Has built-in placeholder posts.

CaseStudiesGrid

3-col grid of case-study cards (tag, title, description, image, optional metric).

StrategySection

Flexible 2-col text + image (or single-column text) section with split heading.

TilesCarousel

Auto-rotating tile carousel. Active tile expands with full-bleed image and description; inactive tiles show only a title. Click any tile to make it active.

WhyThisMatters

Light-blue 2-col section: image left, heading + intro + numbered problem list right.