Merge pull request #245 from HackRU/dev

Dev

Author: avsomers25

app/(pre-dashboard)/offseason/page.tsx

@@ -1,68 +1,64 @@
-"use client"; 
+'use client';
 
 import { useState } from 'react';
 import Image from 'next/image';
 import { Button } from '@/app/ui/button';
- 
-export default function OffseasonPage() {
+
+export default function ComingSoonPage() {
   return (
-    <main className="flex h-[100vh] w-[100vw] flex-col items-center justify-center  relative">
-      
-      {/* HackRU Information Section */}
-      <section className="relative z-10 mt-20 text-center">
-        <h1 className="text-6xl font-extrabold text-white drop-shadow-lg">
-          HackRU Offseason
-        </h1>
-        <p className="mt-4 text-2xl text-gray-300 drop-shadow-md">
-          Thanks for your interest in HackRU! Our registrations are not open yet, but you can follow us on our social channels to stay updated.
+    <main className="relative flex min-h-screen w-screen flex-col items-center overflow-y-auto bg-gray-900 pt-28 text-white">
+      <h1 className="mt-4 text-center text-6xl font-bold">
+        HackRU Coming Soon
+      </h1>
+      <p className="mt-4 px-4 text-center text-lg">
+        HackRU is back on{' '}
+        <span className="font-bold text-teal-400">February 1st-2nd</span> at the{' '}
+        <span className="font-bold text-teal-400">Busch Student Center</span>!
+        Registration will open soon, so stay tuned for more information.
+      </p>
+
+      <div className="mt-8 px-4 text-center">
+        <p className="mb-4 text-lg">
+          Follow us on our socials through Linktree to stay updated and never
+          miss an announcement!
         </p>
         <Button
-          className="text-s text-grey-500 mt-2 hover:text-blue-500 cursor-pointer bg-green-600"
-          onClick={() => window.open('https://www.instagram.com/thehackru/', '_blank')}
+          className="mt-4 rounded-full bg-teal-500 px-6 py-3 font-medium text-white shadow-lg transition duration-300 hover:bg-teal-400 hover:shadow-2xl"
+          onClick={() => window.open('https://linktr.ee/thehackru', '_blank')}
         >
-          Follow us on Instagram
+          Visit Our Linktree
         </Button>
-      </section>
+      </div>
 
-      {/* Photos from the Last HackRU Section */}
-      <section className="relative z-10 mt-20">
-        <h2 className="text-4xl font-semibold text-gray-200 text-center drop-shadow-md">
-          Photos from the last HackRU
+      <div className="mt-12 w-full max-w-6xl px-4">
+        <h2 className="mb-8 text-center text-4xl font-semibold">
+          Memories from HackRU
         </h2>
-        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6 mt-8">
-          <div className="relative w-80 h-60 overflow-hidden rounded-lg shadow-lg transform transition hover:scale-105 hover:shadow-2xl justify-self-center">
-            <Image src="/offseason/offseason1.jpg" alt="Photo 1" layout="fill" objectFit="cover" />
-          </div>
-          <div className="relative w-80 h-60 overflow-hidden rounded-lg shadow-lg transform transition hover:scale-105 hover:shadow-2xl justify-self-center">
-            <Image src="/offseason/offseason2.jpg" alt="Photo 2" layout="fill" objectFit="cover" />
-          </div>
-          <div className="relative w-80 h-60 overflow-hidden rounded-lg shadow-lg transform transition hover:scale-105 hover:shadow-2xl justify-self-center">
-            <Image src="/offseason/offseason3.jpg" alt="Photo 3" layout="fill" objectFit="cover" />
-          </div>
+        <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3">
+          {[1, 2, 3].map((i) => (
+            <div
+              key={i}
+              className="relative h-60 w-full transform justify-self-center overflow-hidden rounded-lg shadow-lg transition hover:scale-105 hover:shadow-2xl"
+            >
+              <Image
+                src={`/offseason/offseason${i}.jpg`}
+                alt={`Photo ${i}`}
+                layout="fill"
+                objectFit="cover"
+              />
+            </div>
+          ))}
         </div>
-      </section>
+      </div>
 
-      {/* Linktree Section */}
-      <section className="relative z-10 mt-20 text-center">
-        <h2 className="text-3xl font-semibold text-gray-200 drop-shadow-md">
-          Explore More
-        </h2>
-        <p className="mt-4 text-lg text-gray-300 drop-shadow-sm">
-          Check out all our links and resources on our Linktree!
-        </p>
-        <Button
-          className="text-s text-grey-500 m-2 cursor-pointer bg-green-600"
-          onClick={() => window.open('https://linktr.ee/thehackru', '_blank')}
-        >
-          Visit Our Linktree
-        </Button>
+      <div className="mt-12 px-4 text-center">
         <Button
-          className="text-s text-grey-500  m-2 cursor-pointer bg-green-600"
+          className="mt-4 mb-8 rounded-full bg-blue-500 px-6 py-3 font-medium text-white shadow-lg transition duration-300 hover:bg-blue-400 hover:shadow-2xl"
           onClick={() => window.open('http://mlh.io/code-of-conduct', '_blank')}
         >
-          Code of Conduct
+          MLH Code of Conduct
         </Button>
-      </section>
+      </div>
     </main>
   );
 }