Animated Gradient

import { AnimatedGradient } from "@glinui/ui"


export function AnimatedGradientVariantsDemo() {
return (
  <div className="grid grid-cols-2 gap-4">
    <AnimatedGradient variant="warm" className="flex h-32 items-center justify-center rounded-xl">
      <span className="text-sm font-medium">Warm</span>
    </AnimatedGradient>
    <AnimatedGradient variant="cool" className="flex h-32 items-center justify-center rounded-xl">
      <span className="text-sm font-medium">Cool</span>
    </AnimatedGradient>
    <AnimatedGradient variant="aurora" className="flex h-32 items-center justify-center rounded-xl">
      <span className="text-sm font-medium text-[var(--color-foreground)]">Aurora</span>
    </AnimatedGradient>
    <AnimatedGradient variant="glass" className="flex h-32 items-center justify-center rounded-xl">
      <span className="text-sm font-medium">Glass</span>
    </AnimatedGradient>
  </div>
)
}

import { Check } from "@phosphor-icons/react"
import { AnimatedGradient, Badge, Button, Heading, Text } from "@glinui/ui"


const plans = [
  { name: "Starter", price: "$0", note: "For side projects", items: ["3 projects", "Community support"], featured: false },
  { name: "Pro", price: "$24", note: "For growing teams", items: ["Unlimited projects", "Priority support", "Audit log export"], featured: true },
  { name: "Scale", price: "$99", note: "For large orgs", items: ["SSO and SCIM", "99.99% uptime SLA"], featured: false }
]


const card = "flex flex-col gap-4 rounded-2xl border border-[var(--line-soft)] bg-[var(--surface-1)] p-6 text-left"


export function Pricing() {
  return (
    <section aria-label="Pricing" className="grid w-full gap-4 md:grid-cols-3">
      {plans.map((plan) => {
        const body = (
          <>
            <div className="flex items-center justify-between">
              <Heading level={3} size="sm">{plan.name}</Heading>
              {plan.featured ? <Badge tone="accent" variant="solid">Most popular</Badge> : null}
            </div>
            <p className="flex items-baseline gap-1"><span className="text-4xl font-semibold tabular-nums text-[var(--color-foreground)]">{plan.price}</span><span className="text-sm text-[var(--color-muted)]">/ seat</span></p>
            <Text size="sm" variant="muted">{plan.note}</Text>
            <ul className="flex flex-col gap-2 text-sm text-[var(--color-foreground)]">
              {plan.items.map((item) => (
                <li key={item} className="flex items-center gap-2"><Check aria-hidden weight="bold" className="size-4 shrink-0" />{item}</li>
              ))}
            </ul>
            <Button variant={plan.featured ? "solid" : "outline"} className="mt-auto w-full">{plan.featured ? "Start free trial" : "Choose plan"}</Button>
          </>
        )
        return plan.featured ? (
          <AnimatedGradient key={plan.name} variant="aurora" data-glin-theme="dark" className={`${card} border-transparent`}>{body}</AnimatedGradient>
        ) : (
          <div key={plan.name} className={card}>{body}</div>
        )
      })}
    </section>
  )
}