Update component configurations and styles: add new registry for @magicui in components.json, remove unused opengraph image files, and enhance opengraph-image.tsx with new font loading and styling adjustments. Refactor button sizes and styles in various components for improved responsiveness and visual consistency. Overall, these changes aim to streamline the application and enhance user experience.

src/app/rehber/[slug]/opengraph-image.tsx

@@ -1,5 +1,6 @@
 import { ImageResponse } from "next/og";
 import { getRehber } from "@/lib/rehber";
+import { loadRehberOgFonts } from "@/lib/og-fonts";
 import {
   rehberBasliginiBol,
   rehberMetniniParcala,
@@ -18,6 +19,7 @@ export default async function RehberOpenGraphImage({
   const yazi = getRehber(slug);
   const baslik = yazi?.baslik ?? "Tercih Rehberi";
   const { vurgu, kalan } = rehberBasliginiBol(baslik);
+  const fonts = await loadRehberOgFonts();
 
   return new ImageResponse(
     (
@@ -30,7 +32,7 @@ export default async function RehberOpenGraphImage({
           overflow: "hidden",
           background: "white",
           color: "#2563eb",
-          fontFamily: "sans-serif",
+          fontFamily: "Bricolage Grotesque",
         }}
       >
         {[
@@ -108,6 +110,7 @@ export default async function RehberOpenGraphImage({
             style={{
               display: "flex",
               alignItems: "center",
+              fontFamily: "Clarity City",
               fontSize: 20,
               fontWeight: 700,
               letterSpacing: "0.18em",
@@ -123,8 +126,9 @@ export default async function RehberOpenGraphImage({
               display: "flex",
               flexWrap: "wrap",
               maxWidth: 980,
+              fontFamily: "Cal Sans",
               fontSize: baslik.length > 70 ? 48 : baslik.length > 52 ? 54 : 62,
-              fontWeight: 300,
+              fontWeight: 400,
               lineHeight: 1.02,
               letterSpacing: "-0.025em",
               color: "#2563eb",
@@ -133,8 +137,9 @@ export default async function RehberOpenGraphImage({
             <span
               style={{
                 display: "flex",
+                fontFamily: "Bricolage Grotesque",
                 color: "#ff5a00",
-                fontWeight: 700,
+                fontWeight: 600,
                 letterSpacing: "-0.04em",
               }}
             >
@@ -144,6 +149,7 @@ export default async function RehberOpenGraphImage({
                     key={i}
                     style={{
                       display: "flex",
+                      fontFamily: "Bricolage Grotesque",
                       fontStyle: "italic",
                       fontWeight: 800,
                     }}
@@ -168,6 +174,7 @@ export default async function RehberOpenGraphImage({
                       key={i}
                       style={{
                         display: "flex",
+                        fontFamily: "Bricolage Grotesque",
                         fontStyle: "italic",
                         fontWeight: 800,
                       }}
@@ -203,18 +210,19 @@ export default async function RehberOpenGraphImage({
               style={{
                 display: "flex",
                 marginLeft: 2,
+                fontFamily: "Bricolage Grotesque",
                 fontSize: 24,
                 letterSpacing: "-0.05em",
                 color: "#2563eb",
               }}
             >
               <span style={{ fontWeight: 300 }}>Kolay</span>
-              <span style={{ fontWeight: 700 }}>Tercih</span>
+              <span style={{ fontWeight: 600 }}>Tercih</span>
             </span>
           </div>
         </div>
       </div>
     ),
-    size,
+    { ...size, fonts },
   );
 }