Ecommerce Highlight Card

1"use client";
2 
3import { NativeButton } from "../../native/baseui/native-button-baseui";
4import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
5import { Check, ShieldCheck, Sparkles, Star, Truck } from "lucide-react";
6import { useState } from "react";
7 
8type Plan = {
9  id: string;
10  title: string;
11  price: string;
12  description: string;
13  promise: string;
14};
15 
16const plans: Plan[] = [
17  {
18    id: "essential",
19    title: "Essential",
20    price: "$48.00",
21    description:
22      "Everyday comfort with signature cushioning and durable materials.",
23    promise: "Ships in 2 business days • 30-day returns",
24  },
25  {
26    id: "plus",
27    title: "Plus",
28    price: "$68.00",
29    description:
30      "Upgraded foam footbed, recycled laces, and breathable knit upper.",
31    promise: "Ships next business day • 45-day returns",
32  },
33  {
34    id: "premium",
35    title: "Premium",
36    price: "$92.00",
37    description:
38      "Adaptive arch support and antimicrobial lining for long days on your feet.",
39    promise: "Priority fulfillment • 60-day returns",
40  },
41];
42 
43const highlights = [
44  {
45    icon: Sparkles,
46    label: "Best Seller",
47  },
48  {
49    icon: ShieldCheck,
50    label: "2-year warranty",
51  },
52];
53 
54export function EcommerceHighlightCardBaseUI() {
55  const [activePlan, setActivePlan] = useState<Plan>(plans[1]);
56  const shouldReduceMotion = useReducedMotion();
57 
58  return (
59    <div className="w-full">
60      <motion.div
61        initial={shouldReduceMotion ? false : { opacity: 0, y: 24 }}
62        animate={shouldReduceMotion ? { opacity: 1 } : { opacity: 1, y: 0 }}
63        transition={
64          shouldReduceMotion ? undefined : { duration: 0.45, ease: "easeOut" }
65        }
66        className="relative z-10"
67      >
68        {/* Card replacement */}
69        <div className="group relative overflow-hidden rounded-[28px] border border-border/40 bg-background text-foreground">
70          <div
71            aria-hidden="true"
72            className="absolute inset-0 bg-gradient-to-br from-foreground/[0.04] via-transparent to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100 -z-10"
73          />
74 
75          {/* CardHeader replacement */}
76          <div className="relative flex flex-col space-y-1.5 p-6 pb-0">
77            {/* Badge replacement */}
78// … truncated