hanzo.ai/components/zen/ZenQuoteSection.tsx

'use client'

/**
 * `Band` carries the section frame; the quote is `Line` — the site's one type
 * ramp — because it is the ONE line here that steps up a rung at a breakpoint.
 * The quote and the rule under it sit on the card's centre line, as the
 * centred text inside them always meant them to.
 *
 * `display="block"` on the quote is load-bearing: gui's `Text` is
 * `display: inline`, and an inline paragraph takes neither a measure nor an
 * auto margin.
 *
 * The mark draws itself in `currentColor`, so the disc it sits on carries the
 * ink and `TaijiSymbol` is passed nothing but its size.
 */

import React from "react";
import { motion } from "@/components/motion";
import TaijiSymbol from "./svg/TaijiSymbol";
import { Box, Text } from '@hanzo/ui'
import { Line, RELAXED } from '@/components/type'
import { Band } from '@/components/marketing/band'

const FADE = 'linear-gradient(to bottom, var(--background), color-mix(in oklab, var(--neutral-950) 30%, transparent))'

interface ZenQuoteSectionProps {
  quote: string;
  attribution?: string;
}

const ZenQuoteSection: React.FC<ZenQuoteSectionProps> = ({ quote, attribution }) => {
  return (
    <Band rule={false} measure={896} ground={FADE}>
      <motion.div initial={{ opacity: 0 }} whileInView={{ opacity: 1 }} viewport={{ once: true }} transition={{ duration: 0.8 }}>
        <Box
          position="relative"
          p={48}
          rounded="var(--radius-lg)"
          borderWidth={1}
          backdropFilter="blur(16px)"
          $platform-web={{
            textAlign: 'center',
            borderColor: 'color-mix(in oklab, var(--neutral-800) 30%, transparent)',
            background: 'linear-gradient(to bottom right, color-mix(in oklab, var(--neutral-900) 40%, transparent), var(--background))',
          }}
        >
          {/* The mark straddles the card's top edge, and carries its own ink. */}
          <Box position="absolute" t={0} l="50%" x="-50%" y="-50%" $platform-web={{ color: 'color-mix(in oklab, var(--white) 80%, transparent)' }}>
            <TaijiSymbol size={48} animate={true} />
          </Box>

          <Line
            render="p"
            display="block"
            tone="soft"
            lead={RELAXED}
            marginBottom={32}
            maxWidth={672}
            mx="auto"
            $md={{ fontSize: 'var(--text-xl)', lineHeight: '1.625' }}
          >
            "{quote}"
          </Line>

          <Box width={96} height={1} mb={16} mx="auto" $platform-web={{ background: 'linear-gradient(to right, transparent, var(--neutral-700), transparent)' }} />

          {attribution && (
            <Text render="p" display="block" fontSize="$2" lineHeight="1.1607rem" fontStyle="italic" color="var(--muted-foreground)">
              {attribution}
            </Text>
          )}
        </Box>
      </motion.div>
    </Band>
  );
};

export default ZenQuoteSection;