Files
hanzo.ai/app/(marketing)/payments/view.tsx
zeekay 3e01d979b7 Light theme: the black bands and white page ink that made /payments, /analytics, /commerce and /kai/guide unreadable follow the theme
INK, the band that drops to true black on dark, stayed black on a light
page while its headings and paragraphs took the light theme's dark ink:
1.06:1 on /payments, /analytics and /kai/guide, and /commerce's use
cases sat on --black the same way. INK is light-dark() now, the quiet
card surface on light and pure black on dark as before, and /commerce
and /kai/guide name it instead of a black of their own. Sixteen page
roots inked their whole tree --white, so anything that inherits (card
headings, bullets) was white on light; they take --foreground, the ink
the rest of the site is set in. Measured with a contrast walk over
fourteen of those pages in light: 57 runs under 3:1 on /analytics and
13 on /payments before, 7 left across all of them (chart labels and two
install chips), and none new on dark.
2026-10-18 17:07:46 -07:00

36 lines
1.1 KiB
TypeScript

'use client'
import React, { type ReactNode } from "react";
import HeroSection from "@/components/payments/HeroSection";
import PaymentsSuite from "@/components/payments/PaymentsSuite";
import Compliance from "@/components/payments/Compliance";
import CheckoutExperience from "@/components/payments/CheckoutExperience";
import Integrations from "@/components/payments/Integrations";
import UseCases from "@/components/payments/UseCases";
import TrustedBy from "@/components/payments/TrustedBy";
import CallToAction from "@/components/payments/CallToAction";
import { ProductFooter } from "@/components/products/ProductFooter"
import { Box } from '@hanzo/ui'
const Payments = ({ sample }: { sample: ReactNode }) => {
return (
<Box minH="100vh" $platform-web={{ color: 'var(--foreground)' }}>
<main>
<HeroSection />
<PaymentsSuite />
<Compliance />
<CheckoutExperience />
<Integrations sample={sample} />
<UseCases />
<TrustedBy />
<CallToAction />
<ProductFooter slug="payments" name="Payments" />
</main>
</Box>
);
};
export default Payments;