1 files changed, 60 insertions, 0 deletions
diff --git a/app/page.tsx b/app/page.tsx
new file mode 100644
index 0000000..384f0bc
--- /dev/null
+++ b/app/page.tsx
@@ -0,0 +1,60 @@
+"use client"
+
+import Link from "next/link"
+import WaveEffect from "./components/WaveEffect"
+import { useState, useCallback } from "react"
+
+export default function Home() {
+  const [triggerWave, setTriggerWave] = useState(false)
+  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 })
+  const [activeButton, setActiveButton] = useState<string | null>(null)
+
+  const handleMouseEnter = useCallback((e: React.MouseEvent<HTMLButtonElement>) => {
+    const rect = e.currentTarget.getBoundingClientRect()
+    setMousePosition({ x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 })
+    setTriggerWave(true)
+  }, [])
+
+  const handleMouseLeave = useCallback(() => {
+    setTriggerWave(false)
+    // We're not resetting the activeButton here to keep the color consistent
+  }, [])
+
+  return (
+    <div className="relative min-h-screen flex flex-col items-center justify-center bg-gradient-to-r from-blue-500 to-purple-600 overflow-hidden">
+      <WaveEffect
+        color={activeButton === "school" ? "173, 216, 230" : "230, 230, 250"}
+        triggerWave={triggerWave}
+        mousePosition={mousePosition}
+      />
+      <h1 className="text-4xl md:text-6xl font-bold text-white mb-8 text-center z-10">🤓️👆</h1>
+      <div className="flex flex-col md:flex-row gap-4 z-10">
+        <Link href="https://blackhao0426.web.illinois.edu" target="_blank" rel="noopener noreferrer">
+          <button
+            className="px-8 py-4 bg-white text-blue-600 font-semibold rounded-lg shadow-md hover:bg-blue-100 transition duration-300 ease-in-out transform hover:scale-105"
+            onMouseEnter={(e) => {
+              handleMouseEnter(e)
+              setActiveButton("school")
+            }}
+            onMouseLeave={handleMouseLeave}
+          >
+            School Page
+          </button>
+        </Link>
+        <Link href="/archive">
+          <button
+            className="px-8 py-4 bg-white text-purple-600 font-semibold rounded-lg shadow-md hover:bg-purple-100 transition duration-300 ease-in-out transform hover:scale-105"
+            onMouseEnter={(e) => {
+              handleMouseEnter(e)
+              setActiveButton("archive")
+            }}
+            onMouseLeave={handleMouseLeave}
+          >
+            Personal Archive
+          </button>
+        </Link>
+      </div>
+    </div>
+  )
+}
+