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.

2026-08-01 18:54:43 +03:00
parent 55eb32b22a
commit b3dd36fa72
23 changed files with 260 additions and 28 deletions
--- a/src/app/opengraph-image.tsx
+++ b/src/app/opengraph-image.tsx
@@ -0,0 +1,92 @@
+import { ImageResponse } from "next/og";
+import { loadSiteOgFonts } from "@/lib/og-fonts";
+
+export const alt =
+  "KolayTercih — YKS tercihin, gerçek YÖK Atlas verisiyle. Sıralamanı gir, dengeli 24 tercihlik listeni al.";
+export const size = { width: 1200, height: 630 };
+export const contentType = "image/png";
+
+export default async function OpenGraphImage() {
+  const fonts = await loadSiteOgFonts();
+
+  return new ImageResponse(
+    (
+      <div
+        style={{
+          display: "flex",
+          width: "100%",
+          height: "100%",
+          alignItems: "center",
+          justifyContent: "center",
+          background: "white",
+        }}
+      >
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            maxWidth: 920,
+            padding: "0 48px",
+          }}
+        >
+          <div
+            style={{
+              display: "flex",
+              alignItems: "center",
+              fontFamily: "Bricolage Grotesque",
+              letterSpacing: "-0.05em",
+              color: "#0f172a",
+            }}
+          >
+            <svg
+              width="64"
+              height="64"
+              viewBox="0 0 180 180"
+              style={{ display: "flex", marginRight: 4 }}
+            >
+              <rect x="27" y="56" width="57" height="57" rx="13" fill="#3b82f6" />
+              <rect x="91" y="29" width="56" height="56" rx="13" fill="#fdc7a7" />
+              <rect x="91" y="95" width="56" height="56" rx="13" fill="#ff5a00" />
+            </svg>
+            <span style={{ display: "flex", fontSize: 72, lineHeight: 1 }}>
+              <span style={{ fontWeight: 300 }}>Kolay</span>
+              <span style={{ fontWeight: 600 }}>Tercih</span>
+            </span>
+          </div>
+
+          <div
+            style={{
+              display: "flex",
+              marginTop: 28,
+              fontFamily: "Clarity City",
+              fontSize: 34,
+              fontWeight: 600,
+              lineHeight: 1.25,
+              textAlign: "center",
+              color: "#1e293b",
+            }}
+          >
+            YKS tercihin, gerçek YÖK Atlas verisiyle
+          </div>
+
+          <div
+            style={{
+              display: "flex",
+              marginTop: 16,
+              fontFamily: "Clarity City",
+              fontSize: 26,
+              fontWeight: 300,
+              lineHeight: 1.3,
+              textAlign: "center",
+              color: "#64748b",
+            }}
+          >
+            Sıralamanı gir · Dengeli 24 tercihlik listeni al
+          </div>
+        </div>
+      </div>
+    ),
+    { ...size, fonts },
+  );
+}