Precision Card

import PrecisionCard from "@/components/ruixen/precision-card";
 
export default function App() {
  return (
    <PrecisionCard
      badge="Premium"
      title="Professional Plan"
      subtitle="Everything you need to succeed"
      description="Comprehensive solution for growing businesses with advanced features and dedicated support."
      features={[
        "Unlimited projects",
        "Priority support",
        "Advanced analytics",
        "Custom integrations",
      ]}
      price="$99/month"
      primaryAction={{
        label: "Get Started",
        onClick: () => console.log("Primary action"),
      }}
      secondaryAction={{
        label: "Learn More",
        onClick: () => console.log("Secondary action"),
      }}
    />
  );
}

type Action = {
  label: string;
  onClick: () => void;
};

import { Zap } from "lucide-react";
 
<PrecisionCard
  icon={<Zap className="w-8 h-8 text-primary" />}
  badge="Fast"
  title="Lightning Plan"
  // ... other props
/>;

// Modify badge styling
<Badge className="bg-blue-500 text-white">
  New
</Badge>
 
<Badge className="bg-green-500 text-white">
  Popular
</Badge>

features={[
  "Unlimited projects and workspaces",
  "Advanced analytics and reporting",
  "Priority 24/7 customer support",
  "Custom domain and branding",
  "API access and webhooks",
  "Team collaboration tools",
  "Advanced security features",
  "Dedicated account manager",
]}

<PrecisionCard
  title="Enterprise"
  description="Custom pricing for large teams"
  // No price prop
  primaryAction={{
    label: "Contact Sales",
    onClick: handleContact,
  }}
/>

import { Star, Check, Zap } from "lucide-react";
 
// Modify in component to use different icons

<PrecisionCard
  badge="Most Popular"
  title="Professional"
  subtitle="For growing teams"
  description="All the tools you need to scale your business"
  features={[
    "Up to 50 team members",
    "Unlimited projects",
    "Advanced analytics",
    "Priority support",
    "Custom integrations",
  ]}
  price="$49/month"
  primaryAction={{
    label: "Start Free Trial",
    onClick: () => router.push("/signup"),
  }}
  secondaryAction={{
    label: "View Demo",
    onClick: () => setShowDemo(true),
  }}
/>

import { Briefcase } from "lucide-react";
 
<PrecisionCard
  icon={<Briefcase className="w-8 h-8 text-blue-500" />}
  badge="Business"
  title="Consulting Package"
  subtitle="Expert guidance"
  description="Get personalized consulting from industry experts"
  features={[
    "10 hours of consulting",
    "Strategy development",
    "Implementation support",
    "Follow-up sessions",
  ]}
  price="$2,500"
  primaryAction={{
    label: "Book Consultation",
    onClick: handleBooking,
  }}
/>;

import { Building } from "lucide-react";
 
<PrecisionCard
  icon={<Building className="w-8 h-8 text-purple-500" />}
  badge="Enterprise"
  title="Custom Solution"
  subtitle="Tailored for your needs"
  description="Enterprise-grade solution with dedicated support"
  features={[
    "Unlimited everything",
    "Dedicated account manager",
    "Custom SLA",
    "On-premise deployment",
    "Advanced security",
    "Custom integrations",
  ]}
  price="Contact us"
  primaryAction={{
    label: "Schedule Demo",
    onClick: handleDemo,
  }}
  secondaryAction={{
    label: "Download Brochure",
    onClick: handleDownload,
  }}
/>;