added the top section of the landing page and also added countdown

GokulramGHV · Sep 9, 2023 · 04f3b96 · 04f3b96
1 parent 3015ef7
commit 04f3b96
Show file tree

Hide file tree

Showing 11 changed files with 141 additions and 120 deletions.
diff --git a/app/favicon.ico b/app/favicon.ico
diff --git a/app/layout.js b/app/layout.js
@@ -1,17 +1,17 @@
-import './globals.css'
-import { Inter } from 'next/font/google'
+import './globals.css';
+import { Inter } from 'next/font/google';
 
-const inter = Inter({ subsets: ['latin'] })
+const inter = Inter({ subsets: ['latin'] });
 
 export const metadata = {
-  title: 'Create Next App',
-  description: 'Generated by create next app',
-}
+  title: 'Invente 2023',
+  description: 'TechSpectrum: Traveling through time and Tech',
+};
 
 export default function RootLayout({ children }) {
   return (
     <html lang="en">
       <body className={inter.className}>{children}</body>
     </html>
-  )
+  );
 }
diff --git a/app/page.js b/app/page.js
diff --git a/app/page.jsx b/app/page.jsx
@@ -0,0 +1,36 @@
+import Image from 'next/image';
+
+import Countdown from '@/components/countdown';
+
+export default function Home() {
+  return (
+    <main className="flex min-h-screen flex-col items-center justify-center p-10">
+      <video
+        src="/Asc.m4v"
+        autoPlay
+        loop
+        muted
+        className="absolute top-0 left-0 z-0 w-full h-full object-cover"
+      ></video>
+      <div className="absolute top-0 left-0 flex justify-between items-center w-full p-16 z-10">
+        <Image src="/snuLogo.svg" alt="SNU Logo" width="200" height="200" />
+        <Image src="/ssnLogo.svg" alt="SSN Logo" width="130" height="130" />
+      </div>
+      <Image
+        src="/inventeLogo.svg"
+        alt="Invente"
+        width="600"
+        height="200"
+        className="z-20"
+      />
+      <Countdown />
+      <Image
+        src="/downArrow.png"
+        alt="Down Arrow"
+        width="50"
+        height="50"
+        className="z-50 relative top-20 transition duration-700 ease-in-out animate-bounce"
+      />
+    </main>
+  );
+}
diff --git a/components/countdown.jsx b/components/countdown.jsx
@@ -0,0 +1,38 @@
+'use client';
+
+import { useCountdown } from '@/hooks/useCountDown';
+import { Space_Grotesk } from 'next/font/google';
+
+const space_grotesk = Space_Grotesk({
+  preload: true,
+  subsets: ['latin'],
+});
+
+export default function Countdown() {
+  const [days, hours, minutes, seconds] = useCountdown('Oct 6, 2023 00:00:00');
+  return (
+    <div
+      id="countdown"
+      className={`${space_grotesk.className} flex gap-8 z-50 relative top-10`}
+    >
+      <div className="text-center">
+        <h1 className="text-7xl font-bold text-white">{days}</h1>
+        <p className="text-xl font-light text-[#F7971D] relative left-1">
+          days
+        </p>
+      </div>
+      <div className="text-center">
+        <h1 className="text-7xl font-bold text-white">{hours}</h1>
+        <p className="text-xl font-light text-[#F7971D] relative left-1">
+          hrs
+        </p>
+      </div>
+      <div className="text-center">
+        <h1 className="text-7xl font-bold text-white">{minutes}</h1>
+        <p className="text-xl font-light text-[#F7971D] relative left-1">
+          mins
+        </p>
+      </div>
+    </div>
+  );
+}
diff --git a/hooks/useCountDown.js b/hooks/useCountDown.js
@@ -0,0 +1,33 @@
+import { useEffect, useState } from 'react';
+
+const useCountdown = (targetDate) => {
+  const countDownDate = new Date(targetDate).getTime();
+
+  const [countDown, setCountDown] = useState(
+    countDownDate - new Date().getTime()
+  );
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setCountDown(countDownDate - new Date().getTime());
+    }, 1000);
+
+    return () => clearInterval(interval);
+  }, [countDownDate]);
+
+  return getReturnValues(countDown);
+};
+
+const getReturnValues = (countDown) => {
+  // calculate time left
+  const days = Math.floor(countDown / (1000 * 60 * 60 * 24));
+  const hours = Math.floor(
+    (countDown % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
+  );
+  const minutes = Math.floor((countDown % (1000 * 60 * 60)) / (1000 * 60));
+  const seconds = Math.floor((countDown % (1000 * 60)) / 1000);
+
+  return [days, hours, minutes, seconds];
+};
+
+export { useCountdown };
diff --git a/public/Asc.m4v b/public/Asc.m4v
diff --git a/public/downArrow.png b/public/downArrow.png
diff --git a/public/inventeLogo.svg b/public/inventeLogo.svg
diff --git a/public/snuLogo.svg b/public/snuLogo.svg
diff --git a/public/ssnLogo.svg b/public/ssnLogo.svg