Blob Card Demo

1import {
2  BlobCard,
3  type BlobCardProps,
4} from "@/components/unlumen-ui/blob-card";
5import { Button } from "@/components/ui/button";
6import Link from "next/link";
7 
8import {
9  LayoutGridIcon as Blocks,
10  CodeSimpleIcon as Code2,
11  HeadphonesIcon as Headphones,
12  Infinity01Icon as InfinityIcon,
13  Refresh03Icon as RefreshCw,
14} from "hugeicons-react";
15 
16type BlobCardDemoProps = Pick<BlobCardProps, "headerHeight">;
17 
18export default function BlobCardDemo({
19  headerHeight = 224,
20}: BlobCardDemoProps) {
21  const PRODUCT_ID =
22    process.env.POLAR_PRODUCT_ID ?? "2958d6bb-2b8e-44c3-9404-d42ead77f8fd";
23 
24  const FEATURES = [
25    { label: "All premium components", icon: Blocks },
26    { label: "Future premium releases included", icon: RefreshCw },
27    { label: "Full source code and customization", icon: Code2 },
28    { label: "Lifetime access. Pay once, own forever.", icon: InfinityIcon },
29    { label: "Direct support from the maker", icon: Headphones },
30  ];
31 
32  return (
33    <div className="absolute inset-0 flex w-full items-center justify-center p-8">
34      <div className="max-w-sm">
35        <BlobCard
36          headerHeight={headerHeight}
37          header={
38            <>
39              <span className="text-lg font-serif">
40                Pro{" "}
41                <span className="text-sm text-foreground/50">
42                  {" "}
43                  [ Early Supporter Price ]{" "}
44                </span>
45              </span>
46              <div className="mt-2 flex items-baseline gap-3">
47                <span className="text-6xl font-medium tracking-tighter">
48                  $99
49                </span>
50                <div className="flex flex-col text-xs leading-snug text-foreground/70">
51                  <span className="line-through tracking-wide text-xl">
52                    $149
53                  </span>
54                  <span>One-time payment</span>
55                  <span>Lifetime access</span>
56                </div>
57              </div>
58            </>
59          }
60        >
61          <div className="flex w-full items-center justify-center">
62            <Button variant="pro" size="lg" className="px-22" asChild>
63              <Link href={`/api/checkout?products=${PRODUCT_ID}`}>
64                Get Instant Access
65              </Link>
66            </Button>
67          </div>
68          <div className="px-8 pt-8 pb-8">
69            <ul className="space-y-5">
70              {FEATURES.map((f) => (
71                <li
72                  key={f.label}
73// … truncated