hanzo.ai/components/extension/HanzoExtensionBrowsers.tsx

'use client'

/**
 * Where you can install it.
 *
 * NO TAILWIND. The section frame and its centred head are
 * `components/marketing/band`'s `Band` and `Head` — the rhythm, the gutter, the
 * measure and the same entrance this file used to write out by hand — and the
 * card is gui props over @hanzo/design's tokens.
 *
 * The deck wraps by WIDTH now rather than at named breakpoints: `Grid`'s
 * `{ min, max }` is "as many equal columns as fit, never narrower than this and
 * never more than four", which is the same value `components/realtime/Features`
 * already uses for a four-up deck. It costs a band between 1024 and ~1136 where
 * the four cards sit three-up; a per-breakpoint table would be a second way to
 * say a column width.
 */

import { motion } from "@/components/motion";
import { Compass, LayoutGrid, Globe } from "lucide-react"
import { Chrome } from "@/components/brand"
import { Box, YStack } from '@hanzo/ui'
import { Grid } from '@hanzo/ui/grid'
import { Band, Head, Words } from '@/components/marketing/band'
import { DOCS } from '@/components/home/nav-data'
import { Action } from '@hanzo/ui/marketing'

/** How narrow a column may get before the grid drops one. */
const DECK = { min: 260, max: 4 } as const


/** The control at the foot of a card, filling its width. */
const WIDE = { width: "100%", justify: "center" } as const

const BrowserCard = ({ icon: Icon, title, description, buttonText }) => {
  return (
    <YStack
      render={<motion.div initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ duration: 0.5 }} />}
      p={32}
      rounded="var(--radius-xl)"
      borderWidth={1}
      borderColor="var(--neutral-800)"
      background="color-mix(in oklab, var(--neutral-900) 30%, transparent)"
    >
      <Box mb={16}>
        {/* The icon sits on a line of its own, as it did when it carried the margin. */}
        <Words render="div" mb={16}>
          <Icon width={48} height={48} color="var(--foreground)" />
        </Words>
        <Words render="h3" mb={8} fontSize="$7" lineHeight="1.3333" weight="700" color="var(--foreground)">{title}</Words>
        <Words render="p" mb={24} color="color-mix(in oklab, var(--foreground) 80%, transparent)">{description}</Words>
      </Box>

      <Box mt="auto">
        {/* Where it stands, for every browser. There is no store listing to
            send anyone to and no public build to sideload: the guide says so,
            and names what works in a browser today. */}
        <Action href={`${DOCS}/docs/apps/browser`} fill {...WIDE}>
          {buttonText}
        </Action>
      </Box>
    </YStack>
  );
};

const HanzoExtensionBrowsers = () => {
  return (
    <Band id="browsers" rule={false} pad="$11" ground="var(--black)">
      <Head
        title="Built for every major browser"
        lede="It is not published yet: no browser store carries it and its builds are not public."
        measure={768}
      />

      <Grid columns={DECK} gap={32}>
        <BrowserCard
          icon={Chrome}
          title="Chrome"
          description="Perfect integration with Google Chrome browser with all features supported."
          buttonText="Chrome availability"
        />

        <BrowserCard
          icon={Globe}
          title="Firefox"
          description="Fully compatible with Mozilla Firefox for privacy-conscious users."
          buttonText="Firefox availability"
        />

        <BrowserCard
          icon={Compass}
          title="Edge"
          description="Enhanced experience on Microsoft Edge with optimized performance."
          buttonText="Edge availability"
        />

        <BrowserCard
          icon={LayoutGrid}
          title="More Browsers"
          description="Safari, Opera, and other Chromium-based browsers are also supported."
          buttonText="Other browsers"
        />
      </Grid>
    </Band>
  );
};

export default HanzoExtensionBrowsers;