mirror of
https://github.com/hanzo-apps/hanzo.ai.git
synced 2026-10-30 14:58:08 +00:00
zeekayandGitHub
3df66c3990
Pages from /machines to /risk, the model pages, and the kits they are made of
(page-kit, ProductLanding, LayerPage, Stack, the models kit, band's Head) mark
authored copy where it is written and draw it in the reader's language. A server
page marks a literal phrase('…') or wraps it in <T>; a client page calls t. The
kits translate a string prop through useSay (components/marketing/say), so a
page passes phrase('…') and markup passes as written. An arrow that points
turns over right to left (data-i18n-mirror).
Rebased on main: the fold-based heroes (Fold, PageHero, MachinesHero, the
product and layer pages) keep main's structure and copy, with their label,
title and lede marked phrase. /platform is main's CloudLanding; the deleted
/platform/layers and the old referral components stay deleted.
Claude-Session: https://claude.ai/code/session_015XYKLjZtDTJEnMo4eK3AFH
68 lines
2.4 KiB
TypeScript
68 lines
2.4 KiB
TypeScript
'use client'
|
|
|
|
import React from "react";
|
|
import { motion } from "@/components/motion";
|
|
import { ShieldCheck, AlertTriangle } from "lucide-react";
|
|
import { Band, Disc, FADE, Head } from '@/components/marketing/band'
|
|
import { Body, Bullet, Heading, LIST, Tile } from './kit'
|
|
import { XStack, YStack } from '@hanzo/ui'
|
|
import { Grid } from '@hanzo/ui/grid'
|
|
import { phrase } from '@hanzo/i18n'
|
|
import { useI18n } from '@hanzo/i18n/react'
|
|
|
|
const AREAS = [
|
|
{
|
|
icon: ShieldCheck,
|
|
title: phrase('Automated Tax Management'),
|
|
body: phrase('Automatically handle VAT, GST, and regional taxes (including sales tax).'),
|
|
points: [phrase('Real-time tax rate calculation'), phrase('Tax exemption handling'), phrase('Automated tax reporting')],
|
|
delay: 0,
|
|
},
|
|
{
|
|
icon: AlertTriangle,
|
|
title: phrase('Fraud Protection'),
|
|
body: phrase('Automatic fraud detection and prevention built-in to protect your business.'),
|
|
points: [phrase('Machine learning fraud detection'), phrase('Adaptive risk rules'), phrase('Chargeback protection')],
|
|
delay: 0.2,
|
|
},
|
|
]
|
|
|
|
const Compliance = () => {
|
|
const { t } = useI18n()
|
|
return (
|
|
<Band rule={false} pad="$11" measure={1152} ground={FADE}>
|
|
<Head
|
|
title={phrase("Automatic Global Tax Compliance")}
|
|
lede={phrase("Focus on your business while Hanzo handles the complexity of global tax regulations and compliance.")}
|
|
/>
|
|
|
|
<Grid columns={{ min: 300, max: 3 }} gap={32}>
|
|
{AREAS.map((area) => (
|
|
<XStack
|
|
key={area.title}
|
|
render={<motion.div initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ duration: 0.5, delay: area.delay }} />}
|
|
>
|
|
<Tile flex={1}>
|
|
<Disc>
|
|
<area.icon size={24} />
|
|
</Disc>
|
|
<Heading>{t(area.title)}</Heading>
|
|
<Body mb={16}>{t(area.body)}</Body>
|
|
{/* A `YStack`, never a `Box`: a Box is `display: block`, and a
|
|
gap on a block reaches nothing — which is the `space-y-2` this
|
|
list is replacing, silently lost. */}
|
|
<YStack render="ul" gap="$2" $platform-web={LIST}>
|
|
{area.points.map((p) => (
|
|
<Bullet key={p}>{t(p)}</Bullet>
|
|
))}
|
|
</YStack>
|
|
</Tile>
|
|
</XStack>
|
|
))}
|
|
</Grid>
|
|
</Band>
|
|
);
|
|
};
|
|
|
|
export default Compliance;
|