Comparison 01

// Comparison 01 from Hirael <https://hirael.com/blocks/comparison/comparison-01>
// MIT · Mohammad Shehadeh · https://github.com/MohammadShehadeh/hirael

import type * as React from 'react';
import { Check, Minus } from 'lucide-react';

import { cn } from '@/lib/utils';
import { Button } from '@/registry/hirael/bases/radix/ui/button';

const ENTER =
  'animate-in fade-in slide-in-from-bottom-4 duration-500 ease-[cubic-bezier(0.22,1,0.36,1)] fill-mode-both motion-reduce:animate-none';

const stagger = (index: number): React.CSSProperties => ({ animationDelay: `${index * 60}ms` });

const HIRAEL = [
  'Source copied straight into your repo',
  'No runtime package and no version pin',
  'Compound parts with data-slot styling hooks',
  'RTL and light or dark theming built in',
  'Edit, extend, or delete any line, it is yours',
] as const;

const USUAL = [
  'A black-box dependency you cannot edit',
  "Locked to the maintainer's release cadence",
  "Restyling fights the library's internals",
  'RTL and theming bolted on after the fact',
  'Fork or eject the moment you outgrow it',
] as const;

const Comparison01 = () => {
  return (
    <section data-slot="comparison" className="bg-background py-20 sm:py-28">
      <div className="mx-auto w-full max-w-4xl px-6 md:px-10">
        <div data-slot="comparison-header" className="flex flex-col items-center gap-5 text-center">
          <span className={cn(ENTER, 'text-xs text-muted-foreground uppercase')}>Comparison</span>
          <h2
            style={stagger(1)}
            className={cn(ENTER, 'max-w-2xl font-serif text-4xl leading-[1.04] font-medium tracking-tight sm:text-5xl')}
          >
            The difference is ownership.
          </h2>
          <p style={stagger(2)} className={cn(ENTER, 'max-w-xl text-base text-muted-foreground sm:text-lg')}>
            Same install command you already use, a very different relationship with the code it leaves behind.
          </p>
        </div>

        <div
          data-slot="comparison-grid"
          className={cn(
            ENTER,
            'relative mt-12 grid overflow-hidden rounded-xl border border-border shadow-[0_24px_60px_-34px_color-mix(in_oklch,var(--foreground)_22%,transparent)] md:grid-cols-2',
          )}
          style={stagger(3)}
        >
          <span
            aria-hidden
            className="absolute start-1/2 top-1/2 z-20 hidden size-11 -translate-x-1/2 -translate-y-1/2 place-items-center rounded-full border border-border bg-background text-xs text-muted-foreground uppercase shadow-sm md:grid rtl:translate-x-1/2"
          >
            vs
          </span>

          <div
            data-slot="comparison-ours"
            className="relative border-b border-border bg-card p-7 sm:p-8 md:border-e md:border-b-0"
          >
            <div
              aria-hidden
              className="pointer-events-none absolute inset-0 bg-[radial-gradient(110%_80%_at_50%_0%,color-mix(in_oklch,var(--primary)_11%,transparent),transparent_62%)]"
            />
            <div className="relative z-10 flex flex-col gap-6">
              <div className="flex flex-col gap-1">
                <span className="text-xs text-muted-foreground uppercase">With Hirael</span>
                <h3 className="text-xl font-semibold tracking-[-0.01em]">Code you keep</h3>
              </div>
              <ul className="flex flex-col gap-3.5">
                {HIRAEL.map((item) => (
                  <li key={item} className="flex items-start gap-3 text-sm">
                    <span className="mt-0.5 inline-flex size-5 shrink-0 items-center justify-center rounded-full border border-primary/40 bg-transparent">
                      <Check className="size-3 text-primary" />
                    </span>
                    <span className="text-foreground">{item}</span>
                  </li>
                ))}
              </ul>
              <Button asChild className="mt-1 w-full sm:w-auto">
                <a href="#">Browse the registry</a>
              </Button>
            </div>
          </div>

          <div data-slot="comparison-theirs" className="bg-muted/20 p-7 sm:p-8">
            <div className="flex flex-col gap-6 opacity-80">
              <div className="flex flex-col gap-1">
                <span className="text-xs text-muted-foreground uppercase">The usual way</span>
                <h3 className="text-xl font-semibold tracking-[-0.01em] text-muted-foreground">Code you rent</h3>
              </div>
              <ul className="flex flex-col gap-3.5">
                {USUAL.map((item) => (
                  <li key={item} className="flex items-start gap-3 text-sm text-muted-foreground">
                    <span className="mt-0.5 inline-flex size-5 shrink-0 items-center justify-center rounded-full border border-border">
                      <Minus className="size-3 text-muted-foreground/60" />
                    </span>
                    <span>{item}</span>
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default Comparison01;