mirror of
https://github.com/hanzo-apps/hanzo.ai.git
synced 2026-10-30 14:58:08 +00:00
zeekay
ac64d5d7dd
The owner's spec for a landing page is the models bento's: monochrome, the words left and the art right, no extra prose. The folds carried two to four sentences under each heading, and some a claim, a lede and a list besides. Each now says one line: ProductLanding the tagline where a page states one (the lede still describes it to search), a claim alone where the claim is the line (/payments, /treasury, /zap, the extension), and elsewhere the sentence that says what the thing is. /philosophy's two points, /dns' claim that repeated its title, /calculator's capabilities line and the Spare clauses on /research and /learn go.
50 lines
2.0 KiB
TypeScript
50 lines
2.0 KiB
TypeScript
'use client'
|
|
|
|
import React from "react";
|
|
import { CreditCard, Lock, Globe, Zap } from "lucide-react";
|
|
import { Fold } from "@/components/marketing/fold";
|
|
import { Steps } from "@/components/preview/steps";
|
|
import { DOCS } from '@/components/home/nav-data'
|
|
import { Action } from '@hanzo/ui/marketing'
|
|
import { phrase } from '@hanzo/i18n'
|
|
import { useI18n } from '@hanzo/i18n/react'
|
|
|
|
/**
|
|
* The white-to-transparent fill the page's primary button wears. A gradient is
|
|
* the one thing no style prop says, so it is written as the CSS it is and rides
|
|
* `Action`'s shape rather than replacing it.
|
|
*/
|
|
const FILL = { backgroundImage: "linear-gradient(to right, var(--pure-white), var(--white-10))", bg: "transparent", color: "var(--pure-black)", borderWidth: 0 } as const
|
|
|
|
const CARDS = [
|
|
{ icon: CreditCard, title: phrase("One integration"), text: phrase("Cards, wallets, bank debits, buy-now-pay-later and crypto through the same API") },
|
|
{ icon: Lock, title: phrase("No card data"), text: phrase("Numbers are tokenized in the vault, so this service never holds one") },
|
|
{ icon: Globe, title: phrase("Route on outcome"), text: phrase("Send each payment to the processor most likely to approve it") },
|
|
{ icon: Zap, title: phrase("Retry elsewhere"), text: phrase("A decline cascades to a backup rather than to your customer") },
|
|
]
|
|
|
|
const HeroSection = () => {
|
|
const { t } = useI18n()
|
|
return (
|
|
<Fold
|
|
label="Payment orchestration"
|
|
mark={<CreditCard size={14} color="currentColor" aria-hidden />}
|
|
title="Hanzo Payments"
|
|
claim="One integration, and the processor becomes a routing decision."
|
|
actions={
|
|
<>
|
|
<Action href="/login" {...FILL}>
|
|
{t('Try Hanzo')}
|
|
</Action>
|
|
<Action href={`${DOCS}/docs/openapi`}>
|
|
{t('Explore APIs')}
|
|
</Action>
|
|
</>
|
|
}
|
|
preview={<Steps title="A payment, routed" icon={<CreditCard size={12} color="currentColor" />} steps={CARDS.map((c) => ({ title: c.title, body: c.text }))} />}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export default HeroSection;
|