hanzo.ai/components/datastore/UseCasesSection.tsx

'use client'

/**
 * NO TAILWIND. `Band` and `Head` carry the section frame and the centred head.
 *
 * The wash that used to be an absolutely-positioned overlay at `opacity-30` is
 * the band's own `ground`, composited: a white at 20% under 30% opacity IS a
 * white at 6%, and one background says it where an extra element and a
 * stacking context said it before.
 *
 * The tiles take `Leaf` — the site's one rule for a card whose edge lifts on
 * approach, with the padding and both edges as its three custom properties.
 * The source ALSO brightened the tile's ground on hover; the role carries the
 * edge and not the fill, and that half is dropped rather than written as two
 * more utilities.
 */

import React from "react";
import { motion } from "@/components/motion";
import { Activity, BarChart, Clock, ShoppingCart, Shield, Lightbulb, Signal, LineChart, Gamepad2, Cpu, Network, Users } from "lucide-react";
import { View } from '@hanzo/ui'
import { Grid as Columns } from '@hanzo/ui/grid'
import { Band, Head, Words } from '@/components/marketing/band'
import { Leaf } from '@hanzo/ui/marketing'

const GROUND = 'linear-gradient(to right, color-mix(in oklab, var(--pure-white) 6%, transparent), color-mix(in oklab, var(--pure-white) 3%, transparent)), var(--black)'

const TILE = { p: 24, borderColor: "var(--neutral-800)", display: "flex", flexDirection: "column", items: "center", text: "center", rounded: "var(--radius-lg)", bg: "color-mix(in oklab, var(--neutral-900) 20%, transparent)", hoverStyle: { borderColor: "var(--neutral-700)" } } as const

const UseCasesSection = () => {
  const useCases = [
    { name: "Web and app analytics", icon: BarChart },
    { name: "E-commerce and finance", icon: ShoppingCart },
    { name: "Time series", icon: Clock },
    { name: "Advertising networks and RTB", icon: Network },
    { name: "Information security", icon: Shield },
    { name: "Business intelligence", icon: Lightbulb },
    { name: "Telecommunications", icon: Signal },
    { name: "Monitoring and telemetry", icon: LineChart },
    { name: "Online games", icon: Gamepad2 },
    { name: "Internet of Things (IoT)", icon: Cpu },
    { name: "Observability", icon: Activity },
    { name: "User behavior analytics", icon: Users }
  ];

  return (
    <Band rule={false} pad="$14" measure={1152} ground={GROUND}>
      <Head
        title="What people point it at"
        lede="Different industries, the same shape of problem: a great many rows in, a small answer out, asked again a second later."
        measure={768}
      />

      <Columns columns={{ min: 160, max: 4 }} gap={24}>
        {useCases.map((useCase, index) => {
          const Icon = useCase.icon;
          return (
            <Leaf
              render={<motion.div initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ duration: 0.4, delay: index * 0.05 }} />}
              key={useCase.name}
              {...TILE}
              hoverStyle={{ borderColor: "var(--neutral-700)" }}
            >
              <View mb={12}>
                <Icon width={32} height={32} color="color-mix(in oklab, var(--foreground) 70%, transparent)" />
              </View>
              <Words render="p" color="color-mix(in oklab, var(--foreground) 80%, transparent)">{useCase.name}</Words>
            </Leaf>
          );
        })}
      </Columns>
    </Band>
  );
};

export default UseCasesSection;