create-brainerce-store 1.62.0 → 1.64.0

package/templates/nextjs/base/src/components/seo/product-json-ld.tsx

@@ -1,8 +1,7 @@
 import type { Product, ShippingSummaryEntry } from 'brainerce';
-import { getProductPriceInfo } from 'brainerce';
+import { buildProductJsonLd, buildBreadcrumbJsonLd } from 'brainerce';
 import { getNonce } from '@/core/lib/nonce';
 import { resolveCurrency } from '@/core/lib/resolve-currency';
-import { stripHtmlForSeo } from '@/core/lib/seo';
 
 interface ProductJsonLdProps {
   product: Product;
@@ -12,143 +11,36 @@ interface ProductJsonLdProps {
   shipping?: ShippingSummaryEntry[];
 }
 
+/**
+ * Product + BreadcrumbList structured data for a product detail page (PDP).
+ *
+ * Uses the SDK's `buildProductJsonLd` — NEVER hand-roll the schema object
+ * here. The builder owns the availability mapping (InStock / BackOrder /
+ * OutOfStock from the backend's pre-computed inventory flags), the
+ * Offer/AggregateOffer split, identifier emission (gtin/mpn/sku), shipping
+ * details, and the aggregateRating gating; a local copy WILL drift from it.
+ * The <script> is rendered locally only to attach the CSP nonce (the SDK's
+ * jsonLdScriptProps can't).
+ */
 export async function ProductJsonLd({ product, url, currency, shipping }: ProductJsonLdProps) {
   // Defer to the shared server helper so the env-var + USD fallback chain
   // lives in exactly one place across all server-side currency reads.
   const resolvedCurrency = resolveCurrency(null, currency);
   const nonce = await getNonce();
-  const priceInfo = getProductPriceInfo(product);
-  const imageUrl = product.images?.[0]?.url;
   const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || '';
 
-  const availability =
-    product.inventory?.canPurchase !== false
-      ? 'https://schema.org/InStock'
-      : 'https://schema.org/OutOfStock';
+  const productJsonLd = buildProductJsonLd(product, {
+    siteUrl: baseUrl,
+    path: url,
+    currency: resolvedCurrency,
+    shipping,
+  });
 
-  // All Brainerce catalog listings are first-party new-goods sales — no
-  // used/refurbished condition data exists anywhere in the product model, so
-  // this is a deliberate always-true assumption, not a per-product field.
-  const itemCondition = 'https://schema.org/NewCondition';
-
-  const shippingDetails = (shipping ?? [])
-    .filter((z) => z.amount !== null)
-    .map((z) => ({
-      '@type': 'OfferShippingDetails',
-      shippingRate: { '@type': 'MonetaryAmount', value: z.amount, currency: resolvedCurrency },
-      shippingDestination: { '@type': 'DefinedRegion', addressCountry: z.countries },
-      ...(z.handlingTime != null || z.minDeliveryDays != null || z.maxDeliveryDays != null
-        ? {
-            deliveryTime: {
-              '@type': 'ShippingDeliveryTime',
-              ...(z.handlingTime != null
-                ? {
-                    handlingTime: {
-                      '@type': 'QuantitativeValue',
-                      minValue: 0,
-                      maxValue: z.handlingTime,
-                    },
-                  }
-                : {}),
-              ...(z.minDeliveryDays != null || z.maxDeliveryDays != null
-                ? {
-                    transitTime: {
-                      '@type': 'QuantitativeValue',
-                      minValue: z.minDeliveryDays ?? z.maxDeliveryDays,
-                      maxValue: z.maxDeliveryDays ?? z.minDeliveryDays,
-                    },
-                  }
-                : {}),
-            },
-          }
-        : {}),
-    }));
-
-  const isVariable = product.type === 'VARIABLE';
-  const offers =
-    isVariable && product.priceMin
-      ? {
-          '@type': 'AggregateOffer',
-          lowPrice: product.priceMin,
-          highPrice: product.priceMax ?? product.priceMin,
-          offerCount: product.variants?.length ?? 1,
-          priceCurrency: resolvedCurrency,
-          availability,
-          itemCondition,
-          ...(shippingDetails.length > 0 ? { shippingDetails } : {}),
-          url,
-        }
-      : {
-          '@type': 'Offer',
-          price: priceInfo.price,
-          priceCurrency: resolvedCurrency,
-          availability,
-          itemCondition,
-          ...(product.salePrice && product.salePriceEndsAt
-            ? { priceValidUntil: product.salePriceEndsAt }
-            : {}),
-          ...(shippingDetails.length > 0 ? { shippingDetails } : {}),
-          url,
-        };
-
-  // schema.org/Product.description must be plain text — Google's Rich Results
-  // and AI Overviews ingest this field directly and reject markup. Strip HTML
-  // first; if the description is empty after stripping, fall back to the name.
-  const cleanDescription = stripHtmlForSeo(product.description) || product.name;
-  const brandName = product.brands?.[0]?.name;
-  const productJsonLd: Record<string, unknown> = {
-    '@context': 'https://schema.org',
-    '@type': 'Product',
-    name: product.name,
-    description: cleanDescription,
-    image: imageUrl,
-    url,
-    sku: product.sku || product.id,
-    // Brand + identifiers qualify the PDP for Google's free merchant listings
-    // (no Merchant Center feed needed). Emitted only when present — Google
-    // penalizes fabricated identifiers.
-    ...(brandName ? { brand: { '@type': 'Brand', name: brandName } } : {}),
-    ...(product.gtin ? { gtin: product.gtin } : {}),
-    ...(product.mpn ? { mpn: product.mpn } : {}),
-    offers,
-  };
-
-  // Emit aggregateRating only when there is real review data — Google rejects
-  // self-serving / faked ratings and stores with 0 reviews shouldn't claim any.
-  if (product.reviewCount && product.reviewCount > 0) {
-    productJsonLd.aggregateRating = {
-      '@type': 'AggregateRating',
-      ratingValue: product.avgRating,
-      reviewCount: product.reviewCount,
-      bestRating: 5,
-      worstRating: 1,
-    };
-  }
-
-  const breadcrumbJsonLd = {
-    '@context': 'https://schema.org',
-    '@type': 'BreadcrumbList',
-    itemListElement: [
-      {
-        '@type': 'ListItem',
-        position: 1,
-        name: 'Home',
-        item: baseUrl || '/',
-      },
-      {
-        '@type': 'ListItem',
-        position: 2,
-        name: 'Products',
-        item: `${baseUrl}/products`,
-      },
-      {
-        '@type': 'ListItem',
-        position: 3,
-        name: product.name,
-        item: url,
-      },
-    ],
-  };
+  const breadcrumbJsonLd = buildBreadcrumbJsonLd([
+    { name: 'Home', url: baseUrl || '/' },
+    { name: 'Products', url: `${baseUrl}/products` },
+    { name: product.name, url },
+  ]);
 
   return (
     <>

package/templates/nextjs/base/src/components/tracking-bootstrap.tsx

@@ -0,0 +1,62 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
+import { usePathname } from 'next/navigation';
+import { getClient } from '@/core/lib/brainerce';
+import { useStoreInfo } from '@/core/providers/store-provider';
+
+/**
+ * Boots the merchant's marketing tags — GA4, Google Tag Manager, the Meta
+ * pixel, the TikTok pixel — from whatever they connected in the Brainerce
+ * dashboard.
+ *
+ * There is nothing to configure here and no environment variable to set. The
+ * tag ids arrive inside `storeInfo.tracking`, which the backend resolves from
+ * the merchant's connected marketplace apps: connecting the Google & YouTube
+ * app runs GA4 discovery and the measurement id shows up on its own, likewise
+ * the Meta and TikTok pixels. Connect an app in the dashboard and this file
+ * starts loading its tag within a minute — no redeploy, no code change.
+ *
+ * Loading GA4 also switches on Brainerce's server-side purchase conversion:
+ * the SDK captures gtag's `client_id`/`session_id` and attaches them to cart
+ * and checkout calls, which is what lets the backend send a purchase event
+ * that lands in the right GA4 session instead of orphaning.
+ */
+export function TrackingBootstrap() {
+  const { storeInfo } = useStoreInfo();
+  const pathname = usePathname();
+  const tracking = storeInfo?.tracking;
+  const bootedRef = useRef(false);
+
+  useEffect(() => {
+    if (!tracking) return;
+    getClient().initTracking(tracking);
+    bootedRef.current = true;
+  }, [tracking]);
+
+  // App Router client-side navigation never reloads the document, so the
+  // pixels' one-shot boot pageview is the only one they would ever record —
+  // every page after the landing page would be invisible. Re-fire on each
+  // path change, skipping the first run so the landing page isn't counted
+  // twice.
+  const lastPathRef = useRef<string | null>(null);
+  useEffect(() => {
+    if (!bootedRef.current) return;
+    if (lastPathRef.current === null) {
+      lastPathRef.current = pathname;
+      return;
+    }
+    if (lastPathRef.current === pathname) return;
+    lastPathRef.current = pathname;
+
+    if (typeof window === 'undefined') return;
+    try {
+      window.fbq?.('track', 'PageView');
+      (window.ttq as { page?: () => void } | undefined)?.page?.();
+    } catch {
+      // Analytics must never break navigation.
+    }
+  }, [pathname]);
+
+  return null;
+}

package/templates/nextjs/base/src/components/ui/accordion.tsx

@@ -1,53 +1,53 @@
-'use client';
-
-import * as React from 'react';
-import * as AccordionPrimitive from '@radix-ui/react-accordion';
-import { ChevronDown } from 'lucide-react';
-
-import { cn } from '@/core/lib/utils';
-
-const Accordion = AccordionPrimitive.Root;
-
-const AccordionItem = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
->(({ className, ...props }, ref) => (
-  <AccordionPrimitive.Item ref={ref} className={cn('border-b', className)} {...props} />
-));
-AccordionItem.displayName = 'AccordionItem';
-
-const AccordionTrigger = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
-  <AccordionPrimitive.Header className="flex">
-    <AccordionPrimitive.Trigger
-      ref={ref}
-      className={cn(
-        'flex flex-1 items-center justify-between py-4 text-start font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
-        className
-      )}
-      {...props}
-    >
-      {children}
-      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
-    </AccordionPrimitive.Trigger>
-  </AccordionPrimitive.Header>
-));
-AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
-
-const AccordionContent = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
->(({ className, children, ...props }, ref) => (
-  <AccordionPrimitive.Content
-    ref={ref}
-    className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
-    {...props}
-  >
-    <div className={cn('pb-4 pt-0', className)}>{children}</div>
-  </AccordionPrimitive.Content>
-));
-AccordionContent.displayName = AccordionPrimitive.Content.displayName;
-
-export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
+'use client';
+
+import * as React from 'react';
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import { ChevronDown } from 'lucide-react';
+
+import { cn } from '@/core/lib/utils';
+
+const Accordion = AccordionPrimitive.Root;
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item ref={ref} className={cn('border-b', className)} {...props} />
+));
+AccordionItem.displayName = 'AccordionItem';
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        'flex flex-1 items-center justify-between py-4 text-start font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+));
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    {...props}
+  >
+    <div className={cn('pb-4 pt-0', className)}>{children}</div>
+  </AccordionPrimitive.Content>
+));
+AccordionContent.displayName = AccordionPrimitive.Content.displayName;
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

package/templates/nextjs/base/src/components/ui/badge.tsx

@@ -1,32 +1,32 @@
-import * as React from 'react';
-import { cva, type VariantProps } from 'class-variance-authority';
-
-import { cn } from '@/core/lib/utils';
-
-const badgeVariants = cva(
-  'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
-  {
-    variants: {
-      variant: {
-        default: 'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',
-        secondary: 'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
-        destructive:
-          'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
-        outline: 'text-foreground',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-    },
-  }
-);
-
-export interface BadgeProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof badgeVariants> {}
-
-function Badge({ className, variant, ...props }: BadgeProps) {
-  return <div className={cn(badgeVariants({ variant }), className)} {...props} />;
-}
-
-export { Badge, badgeVariants };
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '@/core/lib/utils';
+
+const badgeVariants = cva(
+  'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  {
+    variants: {
+      variant: {
+        default: 'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',
+        secondary: 'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        destructive:
+          'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
+        outline: 'text-foreground',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+);
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return <div className={cn(badgeVariants({ variant }), className)} {...props} />;
+}
+
+export { Badge, badgeVariants };

package/templates/nextjs/base/src/components/ui/button.tsx

@@ -1,49 +1,49 @@
-import * as React from 'react';
-import { Slot } from '@radix-ui/react-slot';
-import { cva, type VariantProps } from 'class-variance-authority';
-
-import { cn } from '@/core/lib/utils';
-
-const buttonVariants = cva(
-  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
-  {
-    variants: {
-      variant: {
-        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
-        destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
-        outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
-        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
-        ghost: 'hover:bg-accent hover:text-accent-foreground',
-        link: 'text-primary underline-offset-4 hover:underline',
-      },
-      size: {
-        default: 'h-10 px-4 py-2',
-        sm: 'h-9 rounded-md px-3',
-        lg: 'h-11 rounded-md px-8',
-        icon: 'h-10 w-10',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-      size: 'default',
-    },
-  }
-);
-
-export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
-  asChild?: boolean;
-}
-
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : 'button';
-    return (
-      <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />
-    );
-  }
-);
-Button.displayName = 'Button';
-
-export { Button, buttonVariants };
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '@/core/lib/utils';
+
+const buttonVariants = cva(
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+        outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-10 px-4 py-2',
+        sm: 'h-9 rounded-md px-3',
+        lg: 'h-11 rounded-md px-8',
+        icon: 'h-10 w-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button';
+    return (
+      <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />
+    );
+  }
+);
+Button.displayName = 'Button';
+
+export { Button, buttonVariants };

package/templates/nextjs/base/src/components/ui/card.tsx

@@ -1,55 +1,55 @@
-import * as React from 'react';
-
-import { cn } from '@/core/lib/utils';
-
-const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div
-      ref={ref}
-      className={cn('rounded-lg border bg-card text-card-foreground shadow-sm', className)}
-      {...props}
-    />
-  )
-);
-Card.displayName = 'Card';
-
-const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn('flex flex-col space-y-1.5 p-6', className)} {...props} />
-  )
-);
-CardHeader.displayName = 'CardHeader';
-
-const CardTitle = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div
-      ref={ref}
-      className={cn('text-2xl font-semibold leading-none tracking-tight', className)}
-      {...props}
-    />
-  )
-);
-CardTitle.displayName = 'CardTitle';
-
-const CardDescription = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />
-  )
-);
-CardDescription.displayName = 'CardDescription';
-
-const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
-  )
-);
-CardContent.displayName = 'CardContent';
-
-const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn('flex items-center p-6 pt-0', className)} {...props} />
-  )
-);
-CardFooter.displayName = 'CardFooter';
-
-export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };
+import * as React from 'react';
+
+import { cn } from '@/core/lib/utils';
+
+const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn('rounded-lg border bg-card text-card-foreground shadow-sm', className)}
+      {...props}
+    />
+  )
+);
+Card.displayName = 'Card';
+
+const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('flex flex-col space-y-1.5 p-6', className)} {...props} />
+  )
+);
+CardHeader.displayName = 'CardHeader';
+
+const CardTitle = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn('text-2xl font-semibold leading-none tracking-tight', className)}
+      {...props}
+    />
+  )
+);
+CardTitle.displayName = 'CardTitle';
+
+const CardDescription = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />
+  )
+);
+CardDescription.displayName = 'CardDescription';
+
+const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
+  )
+);
+CardContent.displayName = 'CardContent';
+
+const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('flex items-center p-6 pt-0', className)} {...props} />
+  )
+);
+CardFooter.displayName = 'CardFooter';
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };