hanzo.ai/components/datastore/HeroSection.tsx

'use client'

/**
 * The Datastore fold.
 *
 * NO TAILWIND. Layout is gui props, type is `ChromeText` and @hanzo/ui's
 * marketing roles (`Chip`, `Lede`, `Action`, `More`), and the three washes
 * behind it are gui props over @hanzo/design's tokens.
 */

import React from "react";
import { motion } from "@/components/motion";
import ChromeText from "@/components/ui/chrome-text";
import { Box, View, YStack } from '@hanzo/ui'
import { DOCS } from '@/components/home/nav-data'
import { Action, Chip, Lede, More } from '@hanzo/ui/marketing'

/** The wash over the whole fold, and the two blurred discs at its corners. */
const SHEEN = 'linear-gradient(to bottom, var(--background), color-mix(in oklab, var(--neutral-900) 30%, transparent))'

const DISC = {
  position: 'absolute',
  width: 320,
  height: 320,
  rounded: 'var(--radius-full)',
  filter: 'blur(64px)',
} as const

/** `Chip` leaves the padding, the fill and the ink to its caller. */
const BADGE = { mb: 24, px: 16, py: 4, fontWeight: "500", bg: "color-mix(in oklab, var(--pure-white) 20%, transparent)", borderColor: "color-mix(in oklab, var(--pure-white) 30%, transparent)", color: "color-mix(in oklab, var(--foreground) 70%, transparent)" } as const

/**
 * The two controls. `Action` is the site's one button shape; what varies here
 * is the fill and the rung — a lg control at 32px of gutter. `justifyContent`
 * because the column that holds them stretches its items and `Action` is
 * `inline-flex`, so without it the label packs to the left edge of the pill.
 */
const ACTION = { justify: 'center', px: 32, fontSize: '$4' } as const

/** The loud one: a wash of white, no edge, and its ground holds under the pointer. */
const FILLED = {
  ...ACTION,
  borderWidth: 0,
  bg: 'transparent',
  backgroundImage: 'linear-gradient(to right, color-mix(in oklab, var(--pure-white) 20%, transparent), color-mix(in oklab, var(--pure-white) 10%, transparent))',
} as const

const OUTLINED = {
  ...ACTION,
  borderColor: 'var(--border)',
  bg: 'color-mix(in oklab, var(--white) 5%, transparent)',
  color: 'var(--white)',
} as const

const HeroSection = () => {
  return (
    <YStack
      render="section"
      position="relative"
      overflow="hidden"
      minH="100vh"
      justify="center"
      py={128}
      px={16}
      $sm={{ px: 24 }}
      $lg={{ px: 32 }}
    >
      <Box position="absolute" inset={0} pointerEvents="none" background={SHEEN} />
      <Box {...DISC} t={-160} r={-160} background="color-mix(in oklab, var(--pure-white) 10%, transparent)" />
      <Box {...DISC} b={-160} l={-160} background="color-mix(in oklab, var(--pure-white) 5%, transparent)" />

      {/* A BLOCK, not a stack: the inline-flex badge centres itself against
          `text-align` here. Inside a flex column it would be an item and would
          stretch the full measure instead. */}
      <Box
        position="relative"
        z="var(--z-raised)"
        width="100%"
        maxW={1152}
        mx="auto"
        mb={64}
        $platform-web={{ textAlign: 'center' }}
      >
        <View
          render={<motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.6 }} />}
          display="block"
          mb={32}
        >
          <Chip {...BADGE}>
            Hanzo Datastore
          </Chip>
          <ChromeText as="h1" mb={24}>
            A column store for analytical SQL
          </ChromeText>
          <Lede mt={24} maxW={768} mx="auto">
            Datastore keeps each column of a table in its own file, compressed on
            its own terms, so a query naming four columns out of a hundred reads
            four. Aggregations run over compressed blocks with vector
            instructions rather than a row at a time. It is built for the
            queries that scan a great deal and return very little — dashboards,
            event analytics, metrics, logs and traces. It is an analytics
            database and only that, not the place your application's rows live.
          </Lede>
        </View>

        <View
          render={<motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.6, delay: 0.3 }} />}
          display="block"
          mt={40}
        >
          <YStack gap={16} justify="center" $sm={{ flexDirection: 'row' }}>
            <Action href="/login" {...FILLED}>
              Try Hanzo
            </Action>
            <Action href={DOCS} {...OUTLINED}>
              Documentation
            </Action>
          </YStack>
        </View>

        <View
          render={<motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.6, delay: 0.5 }} />}
          display="block"
          mt={64}
        >
          <More href="#features">
            Scroll to explore
            <svg width={20} height={20} fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 14l-7 7m0 0l-7-7m7 7V3" />
            </svg>
          </More>
        </View>
      </Box>
    </YStack>
  );
};

export default HeroSection;