Enhance application performance and user experience by enabling component caching in next.config.ts, optimizing database queries in various pages, and implementing lazy loading for heavy components. Updated styles for smoother transitions and improved visual clarity in multiple components, including globals.css and landing sections.

src/components/landing/reveal.tsx

@@ -1,12 +1,13 @@
 "use client";
 
-import type { ReactNode } from "react";
-import { motion, useReducedMotion } from "motion/react";
+import { useEffect, useRef, useState, type ReactNode } from "react";
+import { cn } from "@/lib/utils";
 
 /**
  * Landing bölümlerinin görünüme girerken yumuşakça belirmesi.
- * Yalnızca transform/opacity animasyonu yapar; hareket azaltılmışsa
- * kaydırma yerine sadece kısa bir belirme kalır.
+ * Motion yerine CSS transition + IntersectionObserver: SSR HTML'i görünür
+ * gelir (JS'siz/yavaş istemcide sayfa boş kalmaz), gizleme yalnızca
+ * `@media (scripting: enabled)` altında yaşar (bkz. globals.css .kt-reveal).
  */
 export function Reveal({
   children,
@@ -19,20 +20,38 @@ export function Reveal({
   y?: number;
   className?: string;
 }) {
-  const reduceMotion = useReducedMotion();
+  const ref = useRef<HTMLDivElement>(null);
+  const [gorunur, setGorunur] = useState(false);
+
+  useEffect(() => {
+    const el = ref.current;
+    if (!el || typeof IntersectionObserver === "undefined") {
+      setGorunur(true);
+      return;
+    }
+    const io = new IntersectionObserver(
+      (entries) => {
+        if (entries.some((e) => e.isIntersecting)) {
+          setGorunur(true);
+          io.disconnect();
+        }
+      },
+      { rootMargin: "0px 0px -80px 0px" },
+    );
+    io.observe(el);
+    return () => io.disconnect();
+  }, []);
+
   return (
-    <motion.div
-      className={className}
-      initial={{ opacity: 0, y: reduceMotion ? 0 : y }}
-      whileInView={{ opacity: 1, y: 0 }}
-      viewport={{ once: true, margin: "0px 0px -80px 0px" }}
-      transition={{
-        duration: reduceMotion ? 0.25 : 0.55,
-        delay,
-        ease: [0.21, 0.47, 0.32, 0.98],
-      }}
+    <div
+      ref={ref}
+      className={cn("kt-reveal", gorunur && "kt-reveal-in", className)}
+      style={{
+        transitionDelay: delay ? `${delay}s` : undefined,
+        ...(y !== 28 ? { "--reveal-y": `${y}px` } : null),
+      } as React.CSSProperties}
     >
       {children}
-    </motion.div>
+    </div>
   );
 }