Initial commit

components/ui/FontCard.jsx

@@ -4,8 +4,9 @@ import { Card } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { Copy, Check, Heart, Share2, Info } from "lucide-react";
-import { fontTransforms } from "../fontTransforms";
+import { transformText, fontTransforms } from "../fontTransforms";
 import { getFontData } from "@/lib/fonts";
+import fontMap from "@/lib/tailwind-font-map";
 
 export default function FontCard({
   fontName,
@@ -19,12 +20,20 @@ export default function FontCard({
 
   const fontInfo = fontTransforms[fontName];
   const fontData = getFontData(fontName);
-  const displayText = transformedText || "Hallo Instagram!";
+  const fontKey = fontName.toLowerCase().replace(/\s+/g, "");
+  const fontVarName = fontMap[fontKey];
+  const fontVar = fontVarName ? { fontFamily: `var(${fontVarName})` } : {};
+  const fontClass = fontData?.className || "";
+
+  const rawText = "Hallo Instagram!";
+  const transformed = transformText(rawText, fontName);
+  const finalText = transformed?.transformed || rawText;
+  const copyText = transformed?.transformed || rawText;
 
   const handleCopy = () => {
     if (navigator.clipboard && window.isSecureContext) {
       navigator.clipboard
-        .writeText(displayText)
+        .writeText(copyText)
         .then(() => flashCopied())
         .catch(() => fallbackCopy());
     } else {
@@ -39,7 +48,7 @@ export default function FontCard({
 
   const fallbackCopy = () => {
     const textarea = document.createElement("textarea");
-    textarea.value = displayText;
+    textarea.value = copyText;
     textarea.setAttribute("readonly", "");
     textarea.style.position = "fixed";
     textarea.style.top = "0";
@@ -69,7 +78,7 @@ export default function FontCard({
     try {
       await navigator.share({
         title: `FancyText – ${fontName}`,
-        text: displayText,
+        text: copyText,
         url: window.location.href,
       });
     } catch (err) {
@@ -124,10 +133,10 @@ export default function FontCard({
 
           <input
             type="text"
-            value={displayText}
+            value={finalText}
             readOnly
-            className={`${fontData.className} text-2xl md:text-3xl mb-6 p-4 bg-gray-50 rounded-xl text-center text-gray-800 min-h-[80px] w-full select-all border-0 focus:ring-0`}
-            style={{ lineHeight: "1.2" }}
+            className={`${fontClass} text-2xl md:text-3xl mb-6 p-4 bg-gray-50 rounded-xl text-center text-gray-800 min-h-[80px] w-full select-all border-0 focus:ring-0`}
+            style={{ ...fontVar, lineHeight: "1.2" }}
           />
 
           <Button