Files
supabase/apps/www/data/solutions/finserv.tsx
T
Danny White 2e7a8a3362 chore(www): rename customer logo folders to on-dark and on-light (#48962)
## What kind of change does this PR introduce?

Chore: rename customer logo folders and document the theme contract. No
intended visual change, aside from Phoenix Energy whose two marks were
in the wrong folders.

## What is the current behavior?

Customer logos live at:

- `/images/customers/logos/{slug}.png` (`logo`, light mode)
- `/images/customers/logos/light/{slug}.png` (`logo_inverse`, dark mode)

`light/` actually means “use me on a dark background”.

## What is the new behavior?

Same assets, clearer paths:

- `/images/customers/logos/on-light/{slug}.png` → dark/black mark →
`logo` → light mode
- `/images/customers/logos/on-dark/{slug}.png` → light/white mark →
`logo_inverse` → dark mode

Icon chips stay at `/images/customers/logos/{slug}-icon.svg`. Old
`/images/customers/logos/light/*` URLs redirect to `on-dark`. www README
now has the contract.

# To test

Use the [www
preview](https://zone-www-dot-com-git-dnywh-chorecustomer-logo-o-0d7bc1-supabase.vercel.app).
Toggle light/dark from the site header on each page. Logos should stay
readable (no white-on-white or black-on-black).

1. [Customers
grid](https://zone-www-dot-com-git-dnywh-chorecustomer-logo-o-0d7bc1-supabase.vercel.app/customers)
— main `logo` / `logo_inverse` surface. Spot-check Juniver, Phoenix
Energy, and one other card.
2. [Phoenix Energy
story](https://zone-www-dot-com-git-dnywh-chorecustomer-logo-o-0d7bc1-supabase.vercel.app/customers/phoenix-energy)
— story header uses `logo` only (on-light, plus a dark-mode brightness
filter). We swapped this pair.
3.
[Homepage](https://zone-www-dot-com-git-dnywh-chorecustomer-logo-o-0d7bc1-supabase.vercel.app/)
— “How industry leaders…” section. Icon chips only (`*-icon.svg`); the
wordmark `logo` field is unused here.
4. [Solutions /
Agents](https://zone-www-dot-com-git-dnywh-chorecustomer-logo-o-0d7bc1-supabase.vercel.app/solutions/agents)
— Chatbase quote near the top shows both theme variants. Same pattern on
[/healthcare](https://zone-www-dot-com-git-dnywh-chorecustomer-logo-o-0d7bc1-supabase.vercel.app/solutions/healthcare),
[/finserv](https://zone-www-dot-com-git-dnywh-chorecustomer-logo-o-0d7bc1-supabase.vercel.app/solutions/finserv),
and
[/b2b-saas](https://zone-www-dot-com-git-dnywh-chorecustomer-logo-o-0d7bc1-supabase.vercel.app/solutions/b2b-saas).
5. [Contact
sales](https://zone-www-dot-com-git-dnywh-chorecustomer-logo-o-0d7bc1-supabase.vercel.app/contact/sales)
— Good Tape / Xendit / Chatbase wordmarks (`on-light`). Same logos on
the demo form at
[/solutions/enterprise](https://zone-www-dot-com-git-dnywh-chorecustomer-logo-o-0d7bc1-supabase.vercel.app/solutions/enterprise).
6.
[Enterprise](https://zone-www-dot-com-git-dnywh-chorecustomer-logo-o-0d7bc1-supabase.vercel.app/solutions/enterprise)
— Mozilla / Epsilon3 / Pebblely icons in the use-cases section
(`on-dark`).
7.
[Vector](https://zone-www-dot-com-git-dnywh-chorecustomer-logo-o-0d7bc1-supabase.vercel.app/modules/vector)
— customer quotes. This is the only page that builds `on-light` /
`on-dark` paths at runtime from the customer slug.
8. [Mobbin
event](https://zone-www-dot-com-git-dnywh-chorecustomer-logo-o-0d7bc1-supabase.vercel.app/events/migrating-from-firebase-mobbin)
— company logo uses event `logo` / `logo_light` (dark vs light).
Optional second:
[/events/scale-to-millions-goodtape-auth](https://zone-www-dot-com-git-dnywh-chorecustomer-logo-o-0d7bc1-supabase.vercel.app/events/scale-to-millions-goodtape-auth).

Quick extra: hover **Product** in the site nav. The customer story
thumbnail uses `imgUrl` (`on-light`).

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

## Documentation
- Clarified customer logo requirements, including separate light and
dark asset locations, monochrome formats, and dark PNG assets for image
generation.

## Updates
- Standardized customer logos across stories, events, sales pages,
solution pages, testimonials, and generated images.
- Improved logo rendering across light and dark themes with dedicated
variants.
- Added permanent redirects for legacy logo URLs while preserving
filename suffixes.

## Tests
- Added coverage verifying legacy logo redirects resolve correctly,
including supported exceptions.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-08-12 03:49:21 +00:00

310 lines
11 KiB
TypeScript

import {
Check,
ClipboardCheck,
FolderLock,
HeartPulse,
Lightbulb,
List,
Lock,
ShieldAlert,
ShieldCheck,
Users,
UserX,
} from 'lucide-react'
import { PRODUCT_SHORTNAMES } from 'shared-data/products'
import { Image } from 'ui-patterns/Image'
import MainProducts from '../MainProducts'
import { getSharedSections } from './shared-sections'
import {
FrameworkLink,
type FeaturesSection,
type HeroSection,
type Metadata,
} from './solutions.utils'
import type { SecuritySectionProps } from '@/components/Enterprise/Security'
import { frameworks } from '@/components/Hero/HeroFrameworks'
import type { FeatureGridProps } from '@/components/Solutions/FeatureGrid'
import type { PlatformSectionProps } from '@/components/Solutions/PlatformSection'
import type { ResultsSectionProps } from '@/components/Solutions/ResultsSection'
import { TwoColumnsSectionProps } from '@/components/Solutions/TwoColumnsSection'
import { useSendTelemetryEvent } from '@/lib/telemetry'
const data: () => {
metadata: Metadata
heroSection: HeroSection
singleQuote: {
id: string
quote: {
text: string
author: string
role: string
link?: string
logo?: React.ReactElement
}
}
why: FeaturesSection
platform: PlatformSectionProps
developerExperience: ReturnType<typeof getSharedSections>['developerExperience']
resultsSection: ResultsSectionProps
featureGrid: FeatureGridProps
securitySection: SecuritySectionProps
platformStarterSection: TwoColumnsSectionProps
customerEvidence: {
id: string
heading: React.ReactNode
customers: Array<{
name: string
logo?: string
highlights: string[]
cta?: { label: string; href: string }
}>
}
} = () => {
const shared = getSharedSections()
const sendTelemetryEvent = useSendTelemetryEvent()
return {
metadata: {
metaTitle: 'Supabase for Financial Services',
metaDescription:
'Secure, compliant financial applications without the complexity. SOC 2, ACID transactions, real-time data, and audit trails built in.',
},
heroSection: {
id: 'hero',
title: 'Supabase for Financial Services',
h1: (
<>
<span className="block text-foreground">Secure, compliant financial applications</span>
<span className="block md:ml-0">without the complexity.</span>
</>
),
subheader: [
<>
Supabase is a Postgres development platform with SOC 2 certification, ACID transactions,
real-time data, and audit trails built in. Build for trading, payments, lending, and
embedded finance from one platform.
</>,
],
image: undefined,
ctas: [
{
label: 'Start your project',
href: 'https://supabase.com/dashboard',
type: 'primary' as any,
onClick: () =>
sendTelemetryEvent({
action: 'start_project_button_clicked',
properties: { buttonLocation: 'Solutions: FinServ page hero' },
}),
},
{
label: 'Request a demo',
href: 'https://supabase.com/contact/sales',
type: 'default' as any,
onClick: () =>
sendTelemetryEvent({
action: 'request_demo_button_clicked',
properties: { buttonLocation: 'Solutions: FinServ page hero' },
}),
},
],
},
singleQuote: {
id: 'social-proof',
quote: {
text: 'We wanted a backend that could accelerate our development while maintaining security and scalability. Supabase stood out due to its automation, integrations, and ecosystem.',
author: 'Raunak Kathuria',
role: 'VP of Engineering, Deriv',
link: '/customers/deriv',
logo: (
<>
<Image
src="/images/customers/logos/on-light/deriv.png"
alt="Deriv"
width={128}
height={48}
className="object-contain w-24 md:w-32 dark:hidden"
/>
<Image
src="/images/customers/logos/on-dark/deriv.png"
alt="Deriv"
width={128}
height={48}
className="object-contain w-24 md:w-32 hidden dark:block"
/>
</>
),
},
},
why: {
id: 'why-supabase',
label: '',
heading: (
<>
Why <span className="text-foreground">financial services companies</span> choose Supabase
</>
),
subheading: 'Build secure, scalable financial applications using a trusted data platform.',
features: [
{
id: 'compliance',
icon: ShieldCheck,
heading: 'Compliance you can prove, not just claim.',
subheading:
'SOC 2 Type II certified with comprehensive audit logs, encryption at rest and in transit, and database-level access controls. Meet regulatory requirements with infrastructure that documents every action automatically.',
},
{
id: 'transactional-integrity',
icon: Check,
heading: 'Transactional integrity at every layer.',
subheading:
'Postgres provides full ACID compliance for settlements, reversals, and multi-step financial operations. No partial writes, no eventual consistency surprises. Your ledger stays correct.',
},
{
id: 'realtime-data',
icon: MainProducts[PRODUCT_SHORTNAMES.REALTIME].icon,
heading: 'Real-time data for real-time decisions.',
subheading:
'Process transactions, detect fraud signals, and push updates to dashboards as they happen. Realtime subscriptions and Edge Functions give your applications the speed financial workloads demand.',
},
],
},
platform: {
...shared.platform,
title: (
<>
Supabase is the <span className="text-foreground">SOC 2-compliant Postgres platform</span>{' '}
you control
</>
),
subheading:
'Supabase includes everything you need to build secure, compliant financial applications.',
},
developerExperience: shared.developerExperience,
resultsSection: shared.resultsSection,
featureGrid: shared.featureGrid,
securitySection: {
id: 'security',
label: 'Security',
heading: (
<>
Trusted for{' '}
<span className="text-foreground">financial solutions and transactions of all types</span>
</>
),
subheading:
"Keep your data secure with SOC 2, HIPAA, and GDPR compliance. Your customers' data is encrypted at rest and in transit, with built-in tools for monitoring and managing security threats.",
features: [
{ icon: ShieldCheck, heading: 'SOC 2 Type II certified' },
{ icon: HeartPulse, heading: 'HIPAA compliant' },
{ icon: ShieldAlert, heading: 'DDoS Protection' },
{ icon: Lock, heading: 'Multi-factor Authentication' },
{ icon: ClipboardCheck, heading: 'Vulnerability Management' },
{ icon: Users, heading: 'Role-based access control' },
{ icon: List, heading: 'Database Audit Logs' },
{ icon: Lightbulb, heading: 'Security Advisors' },
{ icon: FolderLock, heading: 'Encrypted Storage' },
{ icon: UserX, heading: 'Network restrictions' },
],
cta: {
label: 'Learn about security',
url: '/security',
},
},
platformStarterSection: {
id: 'quickstarts',
heading: (
<>
<span className="text-foreground">Choose your platform</span> to start building in seconds
</>
),
headingRight: (
<>
Or, start with <span className="text-foreground">Supabase AI Prompts</span>
</>
),
docsUrl: 'https://supabase.com/docs/guides/getting-started/ai-prompts',
leftFooter: (
<div className="grid grid-cols-5 divide-x divide-y rounded-lg overflow-hidden border">
{frameworks.map((framework) => (
<FrameworkLink key={framework.name} framework={framework} />
))}
</div>
),
aiPrompts: [
{
id: 'auth-setup',
title: 'Bootstrap Next.js app with Supabase Auth',
code: 'Set up Supabase Auth with Next.js: install @supabase/supabase-js and @supabase/ssr, configure environment variables, create browser and server clients, and add middleware for token refresh.',
language: 'markdown',
docsUrl:
'https://supabase.com/docs/guides/getting-started/ai-prompts/nextjs-supabase-auth',
},
{
id: 'rls-policies',
title: 'Create RLS policies',
code: 'Generate Row Level Security policies for secure access control. Retrieve your schema, then write policies that restrict access to sensitive data based on user roles and auth.uid().',
language: 'markdown',
docsUrl:
'https://supabase.com/docs/guides/getting-started/ai-prompts/database-rls-policies',
},
],
},
customerEvidence: {
id: 'case-studies',
heading: (
<>
Customer <span className="text-foreground">stories</span>
</>
),
customers: [
{
name: 'Deriv',
logo: '/images/customers/logos/on-light/deriv.png',
highlights: [
'Accelerating online trading with scalable Postgres',
'Automation, integrations, and ecosystem',
],
cta: { label: 'Read the case study', href: '/customers/deriv' },
},
{
name: 'Bree',
logo: '/images/customers/logos/on-light/bree.png',
highlights: [
'10X performance gains when switching from Fauna',
'Greater developer velocity and AI-ready foundation',
],
cta: { label: 'Read the case study', href: '/customers/bree' },
},
{
name: 'Next Door Lending',
logo: '/images/customers/logos/on-light/next-door-lending.png',
highlights: [
'Top 10 mortgage broker with Supabase',
'Leveraged Postgres for lending workflows',
],
cta: { label: 'Read the case study', href: '/customers/next-door-lending' },
},
{
name: 'Rally',
logo: '/images/customers/logos/on-light/rally.png',
highlights: ['Building financial applications on Supabase'],
cta: { label: 'Read the case study', href: '/customers/rally' },
},
{
name: 'Xendit',
logo: '/images/customers/logos/on-light/xendit.png',
highlights: [
'Full solution shipped to production in less than one week',
'Payment processor with transaction verification',
],
cta: { label: 'Read the case study', href: '/customers/xendit' },
},
],
},
}
}
export default data