Elite Plan Card

import { ElitePlanCard } from "@/components/ruixen/elite-plan-card";
 
export default function App() {
  return (
    <div className="flex min-h-screen items-center justify-center bg-background p-6">
      <ElitePlanCard
        imageUrl="https://example.com/premium-image.jpg"
        title="Lunar Series"
        subtitle="Ruixen Collection"
        description="Experience the fusion of art and design with the Lunar Series. Minimalist, bold, and timeless."
        highlights={[
          "Premium Quality",
          "Limited Edition",
          "Exclusive Design",
          "Lifetime Support",
        ]}
        onAction={() => alert("Learn more clicked!")}
      />
    </div>
  );
}

// Modify the background colors
.bg-black → .bg-slate-900
.text-white → .text-slate-100
.text-gray-400 → .text-slate-400
.text-gray-300 → .text-slate-300

// Single column highlights
<ul className="mt-4 grid grid-cols-1 gap-2 text-xs text-gray-400">
 
// Three column highlights
<ul className="mt-4 grid grid-cols-3 gap-2 text-xs text-gray-400">

// Different button styles
<Button className="w-full bg-gradient-to-r from-blue-500 to-purple-600 text-white">
  Get Started
</Button>
 
<Button className="w-full bg-white text-black hover:bg-gray-100">
  Learn More
</Button>

<ElitePlanCard
  imageUrl="/software-hero.jpg"
  title="Pro Plan"
  subtitle="Development Suite"
  description="Advanced tools for professional developers with unlimited projects and priority support."
  highlights={[
    "Unlimited Projects",
    "Priority Support",
    "Advanced Analytics",
    "Team Collaboration",
  ]}
/>

<ElitePlanCard
  imageUrl="/membership-hero.jpg"
  title="Elite Membership"
  subtitle="Exclusive Access"
  description="Join our elite community with exclusive perks, early access, and premium content."
  highlights={[
    "Early Access",
    "Exclusive Content",
    "Community Access",
    "Monthly Rewards",
  ]}
/>

<ElitePlanCard
  imageUrl="/product-hero.jpg"
  title="Limited Edition"
  subtitle="Premium Collection"
  description="Handcrafted with attention to detail, this limited edition piece represents the pinnacle of design."
  highlights={[
    "Handcrafted",
    "Limited Edition",
    "Premium Materials",
    "Lifetime Warranty",
  ]}
/>