Sollte richtig sein aber zu viele fonts

pages/index.jsx

@@ -232,24 +232,27 @@ export default function HomePage() {
             </div>
           )}
 
-          <motion.div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mt-10 mb-8" layout>
-            <AnimatePresence mode="popLayout">
-              {filteredFonts.map((name, i) => (
-                <PerformanceOptimizedFontCard
-                  key={name}
-                  fontName={name}
-                  transformedText={transformText(debouncedText, name)}
-                  category={fontTransforms[name]?.category}
-                  isPopular={popularFonts.includes(name)}
-                  animationsEnabled={animationsEnabled}
-                  index={i}
-                  onCopy={trackFontCopy}
-                  onLike={trackFontLike}
-                  onShare={handleQuickShare}
-                />
-              ))}
-            </AnimatePresence>
-          </motion.div>
+         <motion.div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mt-10 mb-8" layout>
+  <AnimatePresence mode="popLayout">
+    {filteredFonts.map((name, i) => (
+      <PerformanceOptimizedFontCard
+        key={name}
+        fontName={name}
+        transformedText={{
+          transformed: debouncedText,
+          fontClassName: fontTransforms[name].className,
+        }}
+        category={fontTransforms[name]?.category}
+        isPopular={popularFonts.includes(name)}
+        animationsEnabled={animationsEnabled}
+        index={i}
+        onCopy={trackFontCopy}
+        onLike={trackFontLike}
+        onShare={handleQuickShare}
+      />
+    ))}
+  </AnimatePresence>
+</motion.div>
 
 
           <SocialButtons onShare={handleQuickShare} />