feat: implement premium eco-futurism climate tech portal

2026-05-30 00:53:45 +03:00
parent c3944b3056
commit 44e75e50ac
22 changed files with 1920 additions and 83 deletions
@@ -0,0 +1,119 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+
+const DIAGNOSTICS = [
+  "SOLAR PANEL DİZİLERİ SENKRONİZE EDİLİYOR...",
+  "RÜZGAR TRÜBİN KOMPANSATÖRLERİ DENGELENİYOR...",
+  "KOJENERASYON OPTİMİZASYON KATI AKTİFLEŞTİRİLİYOR...",
+  "YEŞİL DÖNÜŞÜM KARBON AĞI YAPILANDIRILIYOR...",
+  "SCENERJİ ENERJİ AKIŞI STABİL DURUMA GETİRİLDİ.",
+];
+
+export default function Preloader({ onComplete }: { onComplete: () => void }) {
+  const [progress, setProgress] = useState(0);
+  const [diagnosticText, setDiagnosticText] = useState(DIAGNOSTICS[0]);
+  const [isVisible, setIsVisible] = useState(true);
+
+  useEffect(() => {
+    let currentProgress = 0;
+    const duration = 2400; // 2.4 seconds total preloader time
+    const intervalTime = 20;
+    const step = 100 / (duration / intervalTime);
+
+    const timer = setInterval(() => {
+      currentProgress += step;
+      if (currentProgress >= 100) {
+        currentProgress = 100;
+        clearInterval(timer);
+        setTimeout(() => {
+          setIsVisible(false);
+          setTimeout(onComplete, 800); // Allow curtain reveal animation to complete
+        }, 500);
+      }
+      setProgress(Math.floor(currentProgress));
+
+      // Update diagnostic text based on progress
+      const diagIndex = Math.min(
+        Math.floor((currentProgress / 100) * DIAGNOSTICS.length),
+        DIAGNOSTICS.length - 1
+      );
+      setDiagnosticText(DIAGNOSTICS[diagIndex]);
+    }, intervalTime);
+
+    return () => clearInterval(timer);
+  }, [onComplete]);
+
+  return (
+    <AnimatePresence>
+      {isVisible && (
+        <motion.div
+          initial={{ opacity: 1 }}
+          exit={{ 
+            clipPath: "polygon(0 0, 100% 0, 100% 0, 0 0)",
+            transition: { duration: 0.8, ease: [0.76, 0, 0.24, 1] }
+          }}
+          className="fixed inset-0 w-full h-full bg-[#03070b] z-[99999] flex flex-col items-center justify-center p-6 select-none"
+        >
+          {/* Subtle decorative grid in preloader */}
+          <div 
+            className="absolute inset-0 w-full h-full opacity-10 pointer-events-none"
+            style={{
+              backgroundImage: `
+                linear-gradient(to right, rgba(13, 242, 147, 0.05) 1px, transparent 1px),
+                linear-gradient(to bottom, rgba(13, 242, 147, 0.05) 1px, transparent 1px)
+              `,
+              backgroundSize: "40px 40px",
+            }}
+          />
+
+          <div className="w-full max-w-xl flex flex-col relative z-10">
+            {/* Tech Logo / Icon */}
+            <div className="flex items-center gap-3 mb-10">
+              <div className="w-6 h-6 border border-accent-emerald flex items-center justify-center rounded-sm animate-spin-slow">
+                <div className="w-2.5 h-2.5 bg-accent-emerald" />
+              </div>
+              <span className="font-space text-lg font-bold tracking-[0.2em] text-accent-emerald uppercase">
+                SCENERJİ SYSTEM
+              </span>
+              <span className="ml-auto text-[10px] font-mono text-text-dim px-2 py-0.5 border border-text-dim/20 rounded-sm">
+                v2.6.0
+              </span>
+            </div>
+
+            {/* Diagnostic Logs */}
+            <div className="h-16 font-mono text-xs text-text-secondary border-l border-accent-emerald/20 pl-4 mb-8 flex flex-col justify-center">
+              <span className="text-[10px] text-accent-cyan tracking-wider uppercase mb-1">
+                [SİSTEM TEŞHİS KÜTÜPHANESİ]
+              </span>
+              <span className="animate-pulse">{diagnosticText}</span>
+            </div>
+
+            {/* Progress Counter & Bar */}
+            <div className="flex items-end justify-between font-space mb-3">
+              <span className="text-sm font-light text-text-secondary tracking-widest uppercase">
+                ENERJİ AĞI KALİBRASYONU
+              </span>
+              <span className="text-3xl font-bold text-accent-emerald tabular-nums">
+                {progress}%
+              </span>
+            </div>
+            
+            <div className="w-full h-[2px] bg-bg-tertiary relative overflow-hidden rounded-full">
+              <motion.div 
+                className="h-full bg-gradient-to-r from-accent-cyan to-accent-emerald"
+                style={{ width: `${progress}%` }}
+              />
+            </div>
+
+            <div className="mt-8 flex justify-between font-mono text-[9px] text-text-dim uppercase tracking-wider">
+              <span>KURULUM: AYRIS TECH</span>
+              <span>LOKASYON: TÜRKİYE</span>
+            </div>
+          </div>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+}