initial commit

components/SplashScreen.tsx

@@ -0,0 +1,96 @@
+'use client'
+
+import * as React from 'react'
+
+interface SplashScreenProps {
+  onComplete: () => void
+  minDuration?: number
+}
+
+export function SplashScreen({ onComplete, minDuration = 1500 }: SplashScreenProps) {
+  const [visible, setVisible] = React.useState(true)
+  const [logoScale, setLogoScale] = React.useState(0.8)
+  const [textOpacity, setTextOpacity] = React.useState(0)
+  const onCompleteRef = React.useRef(onComplete)
+
+  onCompleteRef.current = onComplete
+
+  React.useEffect(() => {
+    let mounted = true
+
+    // Animation sequence
+    const timer = setTimeout(() => {
+      if (!mounted) return
+      setLogoScale(1)
+      setTextOpacity(1)
+
+      setTimeout(() => {
+        if (!mounted) return
+        setVisible(false)
+        onCompleteRef.current()
+      }, 800)
+    }, minDuration)
+
+    return () => {
+      mounted = false
+      clearTimeout(timer)
+    }
+  }, [minDuration])
+
+  if (!visible) return null
+
+  return (
+    <div
+      className="fixed inset-0 z-[100] flex items-center justify-center bg-background"
+      style={{ backgroundColor: 'var(--background)' }}
+      role="img"
+      aria-label="OfflineAcademy loading"
+    >
+      <div className="flex flex-col items-center gap-6">
+        {/* Animated logo - using favicon.ico */}
+        <div
+          className="relative"
+          style={{
+            transform: `scale(${logoScale})`,
+            transition: 'transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1)',
+          }}
+        >
+          <img
+            src="/favicon16x16.ico"
+            alt="OfflineAcademy"
+            className="w-28 h-28 object-contain"
+            style={{ imageRendering: 'pixelated' }}
+          />
+        </div>
+
+        {/* App name */}
+        <div
+          className="text-center"
+          style={{
+            opacity: textOpacity,
+            transition: 'opacity 0.4s ease 0.2s',
+          }}
+        >
+          <h1 className="text-2xl font-bold tracking-tight bg-gradient-to-r from-primary to-emerald-400 bg-clip-text text-transparent">
+            OfflineAcademy
+          </h1>
+          <p className="text-sm text-muted-foreground mt-1">Your Personal Offline Learning Center</p>
+        </div>
+
+        {/* Loading indicator */}
+        <div
+          className="w-48 h-1.5 bg-muted rounded-full overflow-hidden"
+          style={{
+            opacity: textOpacity,
+            transition: 'opacity 0.4s ease 0.4s',
+          }}
+        >
+          <div
+            className="h-full bg-gradient-to-r from-primary via-emerald-400 to-primary rounded-full animate-pulse"
+            style={{ width: '60%' }}
+          />
+        </div>
+      </div>
+    </div>
+  )
+}