clean up ui pass 1

src/components/SupporterMessage.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import React from "react";
+import confetti from "canvas-confetti";
+import { Star } from "lucide-react";
+import { useTranslations } from 'next-intl';
+
+export default function SupporterMessage({ tier }: { tier: string }) {
+    
+    const t = useTranslations();
+
+    return (
+        <div className="relative flex items-center space-x-2 whitespace-nowrap group">
+            <span
+                className="cursor-pointer"
+                onClick={(e) => {
+                    // Get the bounding box of the element
+                    const rect = (
+                        e.target as HTMLElement
+                    ).getBoundingClientRect();
+
+                    // Trigger confetti centered on the word "Pangolin"
+                    confetti({
+                        particleCount: 100,
+                        spread: 70,
+                        origin: {
+                            x: (rect.left + rect.width / 2) / window.innerWidth,
+                            y: rect.top / window.innerHeight
+                        },
+                        colors: ["#FFA500", "#FF4500", "#FFD700"]
+                    });
+                }}
+            >
+                Pangolin
+            </span>
+            <Star className="w-3 h-3"/>
+            <div className="absolute left-1/2 transform -translate-x-1/2 -top-10 hidden group-hover:block  text-primary text-sm rounded-md border shadow-md px-4 py-2 pointer-events-none opacity-0 group-hover:opacity-100 transition-opacity">
+                {t('componentsSupporterMessage', {tier: tier})}
+            </div>
+        </div>
+    );
+}