/dev
Numbers / stats components
Every reusable that renders big-number + label tiles, side-by-side. Use this to audit typography, color, and density across the site, and pick a canonical pattern for new pages.
NumbersSection variant="sphere" (default)
src/components/NumbersSection/index.tsx
4 stat tiles + blue hero card with looping video and CTA. Hardcoded sphere data: 20 Years of Excellence · 230 Delivered Projects · 200+ Senior Specialists · 94% Satisfaction Rate.
Live pages — click to audit
+ 7 unmappable usages (data / shared modules)
- src/app/(frontend)/changelog/changelog-data.ts
- src/app/(frontend)/design-system/_previews/component-previews.tsx
- src/app/(frontend)/design-system/components/ComponentsClient.tsx
- src/app/(frontend)/page.tsx
- src/app/(frontend)/ppc/[slug]/_components/code-audit.tsx
- src/app/(frontend)/ppc/[slug]/_components/technical-dd.tsx
- src/app/(frontend)/services/[service]/custom-rag-development-services/page.client.tsx
Sphere in Numbers
We understand that actions speak louder than words and numbers but here are some key facts about us.
Get the Right Talent now0
Years of Excellence
0+
Projects Delivered
0
Countries
Globally diverse, community-focused
0+
Clients
top 20 average 8+ years
NumbersSection variant="join"
src/components/NumbersSection/index.tsx
Partner / staffing-recruit copy. Hardcoded join data: 20 Years of Experience · 4.9* Clutch.co Review · 97% Client retention · 1600+ Completed Projects.
Join 300+
Satisfied Clients
0
Years of Excellence
0+
Projects Delivered
0
Countries
Globally diverse, community-focused
0+
Clients
top 20 average 8+ years
NumbersSection heroOnRight
src/components/NumbersSection/index.tsx
Mirrored layout — hero card swaps to the right on desktop. Same data.
Sphere in Numbers
We understand that actions speak louder than words and numbers but here are some key facts about us.
Get the Right Talent now0
Years of Excellence
0+
Projects Delivered
0
Countries
Globally diverse, community-focused
0+
Clients
top 20 average 8+ years
ImpactMetrics tone='dark' (default)
src/components/ImpactMetrics/index.tsx
Soft gradient backdrop, 2-column grid of large italic-Lora values + descriptions. Designed for ROI / business-impact callouts. Fully data-driven.
Live pages — click to audit
+ 2 unmappable usages (data / shared modules)
- src/app/(frontend)/design-system/_previews/component-previews.tsx
- src/app/(frontend)/design-system/components/ComponentsClient.tsx
Real outcomes, real numbers
27%
Average reduction in time-to-market for product launches.
$2.1M
Median annual savings from infrastructure modernization.
3.4×
Throughput improvement on data pipelines post-migration.
94%
Of clients report measurable ROI within six months.
ImpactMetrics tone='light'
src/components/ImpactMetrics/index.tsx
Light mode — matches WP counter-row on white (manufacturing-insight pattern).
Real outcomes, real numbers
27%
Average reduction in time-to-market for product launches.
$2.1M
Median annual savings from infrastructure modernization.
3.4×
Throughput improvement on data pipelines post-migration.
94%
Of clients report measurable ROI within six months.
IntroMetricsSection stat-band mode (items have labelTop)
src/components/IntroMetricsSection/index.tsx
Blue % labels + bold copy in 3 columns. Anchors a service / industry page in a few key numbers near the top of the fold.
Live pages — click to audit
Why teams pick Sphere
A data-driven engagement model that ties our work to outcomes you can measure — not slides, not handoffs.
20+ years building enterprise software across regulated industries.
450+ specialists, with senior leads on every engagement.
94% satisfaction across the last 200 closed projects.
ReferralEarningsSection interactive slider
src/components/ReferralEarningsSection/index.tsx
Slider → big $$$ tiles (Y1 5% / Y2 4%). One-off — only used on /about-us/referral-program. Visual style diverges from the other stat components (sans-serif black numbers, no italic Lora).
Live pages — click to audit
See what one introduction could earn you.
Estimated deal size
$200,000
Ambassadors — 5% Commission
Your total commission
$10,000
Ambassadors · 5% per referral
SolutionHero with metrics prop
src/components/SolutionHero/index.tsx
Dark hero with optional 3-4 stair-stepped metric cards in the right column (italic-Lora values, 22-32px). The metric typography is shared with ServiceHero's metrics prop.
Live pages — click to audit
+ 1 unmappable usage (data / shared modules)
- src/app/(frontend)/changelog/changelog-data.ts
AI systems that actually ship.
Production-grade AI engineering — from data plumbing to model serving — delivered by senior teams that own the metric.
ServiceHero (metrics prop)
src/components/ServiceHero/index.tsx
Same metric-card pattern as SolutionHero (stair-stepped on desktop, 2-col grid on mobile). Adds an optional iconSrc per metric. Not previewed standalone — only makes sense embedded in a full hero. See live examples on service detail pages.
Live pages — click to audit
+ 3 unmappable usages (data / shared modules)
- src/app/(frontend)/changelog/changelog-data.ts
- src/app/(frontend)/design-system/_previews/component-previews.tsx
- src/app/(frontend)/design-system/components/ComponentsClient.tsx
Consistency observations
- Two distinct typographic families for big numbers: NumbersSection uses sans-serif black ("20" / "230"), while ImpactMetrics + IntroMetricsSection + Service/SolutionHero metrics use italic Lora. ReferralEarningsSection is a third style (sans-serif black, larger, no Lora).
- Data sources diverge. NumbersSection has hardcoded sphere/join arrays; about-us page used to expose `COMPANY_FACTS` (450+ specialists / 600+ projects) which contradicts NumbersSection's defaults (200+ / 230). Pick one set of numbers and have every stat component read from a single source of truth in
src/data/about.ts. - NumbersSection hero card is opinionated(blue background + autoplay video + CTA) — it can't be used purely as a 4-stat row. Consider a `noHero` variant so we can drop it onto pages that don't want the hero card.