"use client"; import React, { useState, useEffect } from "react"; import { motion } from "framer-motion"; import { clsx, type ClassValue } from "clsx"; import { twMerge } from "tailwind-merge"; import { Tag, TrendingDown, ShoppingBag, ArrowRight } from "lucide-react"; /** * Technical Utility: Merges Tailwind classes safely. */ function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } interface PriceProps { oldPrice: string; newPrice: string; currency?: string; className?: string; } /** * Kinetic Strikethrough Price * A high-end pricing component featuring a dynamic vector-based * diagonal strike animation to emphasize value reduction. */ export default function KineticStrikethroughPrice({ oldPrice = "129.00", newPrice = "79.00", currency = "$", className, }: PriceProps) { const [mounted, setMounted] = useState(false); useEffect(() => setMounted(true), []); if (!mounted) return null; return (

{/* Background Decorative Aura */}

{/* Badge & Label */}

Limited_Offer

ID: XP-2026_PRC

{/* Pricing Composition */}

Retail_Value

{/* Animated Old Price */}

{currency}{oldPrice} {/* Vector Strike Line */}

{/* New Price Highlight */} {currency}{newPrice} USD

{/* Feature List (Compact & Clean) */}

Best Price Guaranteed

Instant Digital Access

{/* Action Button */}

{/* Bottom Technical Trace */}

Uixtra_Dynamic_Pricing_v2

); }