Merge pull request #15 from Eric-Zhang-Developer/landing-page-update

Update landing page to have more design elements

Author: Eric-Zhang-Developer

public/codequestAllDark.png

@@ -1,32 +1,63 @@
+"use client";
+
 import Link from "next/link";
 import Image from "next/image";
 import "./globals.css";
+import { Cinzel } from "next/font/google";
+
+//font for words
+const cinzel = Cinzel({
+  subsets: ["latin"],
+  weight: ["400", "700"],
+});
 
 export default function LandingPage() {
   return (
-    <main className="min-h-dvh bg-white flex flex-col items-center justify-center pt-2 pb-8 px-8">
-      <div className="max-w-xl text-center">
-        <div className="mb-8 flex justify-center">
-          <div className="relative w-[500px] h-[100px] overflow-hidden rounded-lg">
-            <Image
-              src="/Cq_logo.png"
-              alt="CodeQuest Logo"
-              fill
-              className="object-cover object-center"
-            />
-          </div>
+    //setting background to desired image
+    <main
+      className="relative min-h-dvh flex flex-col items-center justify-center px-8 
+                 bg-[url('/gemininight3.png')] bg-cover bg-center bg-no-repeat text-white overflow-hidden
+                 "
+    >
+
+      {/*welcome text*/}
+      <div className="relative z-10 max-w-xl text-center">
+        <h1
+          className={`${cinzel.className} text-5xl md:text-6xl font-bold text-indigo-200 drop-shadow-[0_0_10px_rgba(99,102,241,0.6)] mb-4`}
+        >
+          Welcome to
+        </h1>
+
+        {/*all dark grey logo*/}
+        <div className="relative w-[auto] h-[auto]">
+          <Image
+            src="/codequestAllDark.png"
+            alt="CodeQuest Logo"
+            width={400}
+            height={120}
+            className="object-center scale-125"
+            //add in shadow for it to pop on dark background
+            style={{
+              filter: `
+                drop-shadow(0 0 10px #a5f3fc)
+                drop-shadow(0 0 20px #93c5fd)
+                drop-shadow(0 0 30px #60a5fa)
+              `
+            }}
+          />
         </div>
-        <h1 className="text-4xl md:text-5xl font-bold text-neutral-600">Welcome to CodeQuest</h1>
-        <p className="mt-3 text-neutral-600">
-          Simple flow: Landing → Login/Signup → Dashboard
-        </p>
-        <div className="mt-6 flex items-center justify-center gap-3">
 
+        {/* start button*/}
+        <div className="mt-2 flex items-center justify-center gap-3">
           <Link
             href="/dashboard"
-            className="btn btn-sof"
+            //make it glow pulsing to show that it is clickable to new users
+            //also becomes bigger and more vibrant when the mouse hovers over
+            className={`${cinzel.className} text-lg px-8 py-3 rounded-full shadow-lg transition-transform duration-500 hover:scale-105
+                        bg-indigo-500 hover:bg-indigo-600 font-semibold text-white
+                        animate-pulse hover:shadow-[0_0_20px_rgba(99,102,241,0.8)]`}
           >
-            Go to dashboard
+            Start Your Journey
           </Link>
         </div>
       </div>