mirror of
https://github.com/hanzo-apps/hanzo.ai.git
synced 2026-10-29 07:20:43 +00:00
zeekayandHanzo Dev
f11062f432
The /analytics landing page hardcoded theme-independent colors (var(--pure-black), var(--pure-white), --neutral-*) into the hero ground, dashboard mock, code windows and section washes. In light mode that meant near-black ink on a pure-black hero and white chart lines on light surfaces — unreadable and harsh. Swap them for @hanzo/design's theme-aware tokens (--background, --muted, --secondary, --primary, --muted-foreground). Dark rendering is unchanged; light mode now resolves correctly. Verified with headless Chromium (hero bg/ink before vs after) and clean tsc --noEmit / design lint. Co-authored-by: Hanzo Dev <[email protected]>
40 lines
1.2 KiB
TypeScript
40 lines
1.2 KiB
TypeScript
'use client'
|
|
|
|
import React from "react";
|
|
import { motion } from "@/components/motion";
|
|
import { Body, Tile, Title } from '../kit'
|
|
import { Box } from '@hanzo/ui'
|
|
import { useI18n } from '@hanzo/i18n/react'
|
|
|
|
interface AIFeatureCardProps {
|
|
icon: React.ReactNode;
|
|
title: string;
|
|
description: string;
|
|
delay: number;
|
|
index: number;
|
|
}
|
|
|
|
/** Neutral falling to a fainter neutral — this card's own ground. */
|
|
const GROUND = 'linear-gradient(to bottom right, color-mix(in oklab, var(--muted) 60%, transparent), color-mix(in oklab, var(--muted) 40%, transparent))'
|
|
|
|
const AIFeatureCard = ({ icon, title, description, delay, index }: AIFeatureCardProps) => {
|
|
const { t } = useI18n()
|
|
return (
|
|
<motion.div
|
|
key={index}
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.5, delay }}
|
|
>
|
|
<Tile height="100%" p="$6" hoverStyle={{ borderColor: 'var(--white-30)' }} $platform-web={{ background: GROUND }}>
|
|
<Box mb={20}>{icon}</Box>
|
|
<Title>{t(title)}</Title>
|
|
<Body>{t(description)}</Body>
|
|
</Tile>
|
|
</motion.div>
|
|
);
|
|
};
|
|
|
|
export default AIFeatureCard;
|