Update Result Page

2025-08-16 11:30:55 +07:00
parent bc1900d3f7
commit dc759df038
4 changed files with 205 additions and 13 deletions
@@ -0,0 +1,50 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import Image from "next/image"
+
+export function RevealScreen() {
+  const [isVisible, setIsVisible] = useState(true)
+  const [isAnimating, setIsAnimating] = useState(false)
+
+  useEffect(() => {
+    // Start fade out animation after 2 seconds
+    const timer = setTimeout(() => {
+      setIsAnimating(true)
+      // Remove the component after animation completes
+      setTimeout(() => {
+        setIsVisible(false)
+      }, 500)
+    }, 2000)
+
+    return () => clearTimeout(timer)
+  }, [])
+
+  if (!isVisible) return null
+
+  return (
+    <div
+      className={`fixed inset-0 z-50 flex items-center justify-center transition-opacity duration-500 ${
+        isAnimating ? "opacity-0" : "opacity-100"
+      }`}
+      style={{ backgroundColor: "#118a69" }}
+    >
+      <div className="flex flex-col items-center">
+        <div className="relative w-48 h-48 sm:w-64 sm:h-64 animate-pulse">
+          <Image
+            src="/images/meti-logo.png"
+            alt="METI Logo"
+            fill
+            style={{ objectFit: "contain" }}
+            priority
+          />
+        </div>
+        <div className="mt-8 flex space-x-2">
+          <div className="w-3 h-3 bg-white rounded-full animate-bounce" style={{ animationDelay: "0ms" }}></div>
+          <div className="w-3 h-3 bg-white rounded-full animate-bounce" style={{ animationDelay: "150ms" }}></div>
+          <div className="w-3 h-3 bg-white rounded-full animate-bounce" style={{ animationDelay: "300ms" }}></div>
+        </div>
+      </div>
+    </div>
+  )
+}