reunion schedule landing page

package.json

@@ -11,11 +11,17 @@
     "prepare": "husky"
   },
   "dependencies": {
+    "@fontsource/inter": "^5.1.0",
+    "autoprefixer": "^10.4.20",
     "husky": "^9.0.11",
     "lint-staged": "^15.2.7",
-    "next": "14.2.4",
-    "react": "^18",
-    "react-dom": "^18"
+    "next": "^14.2.15",
+    "postcss": "^8.4.47",
+    "react": "^18.3.1",
+    "react-countdown": "^2.3.6",
+    "react-dom": "^18.3.1",
+    "seo-practices": "file:",
+    "tailwindcss": "^3.4.13"
   },
   "devDependencies": {
     "@types/node": "^20",

postcss.config.mjs

@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    tailwindcss: {},
+  },
+};
+
+export default config;

src/components/index.tsx

@@ -0,0 +1,9 @@
+const Sidebar = () => {
+  return (
+    <div>
+      <div className="text-rose-50 text-4xl">Hello Sidebar</div>
+    </div>
+  );
+};
+
+export default Sidebar;

src/pages/AboutUs.tsx

@@ -0,0 +1,65 @@
+import React from "react";
+
+const AboutUs = () => {
+  return (
+    <div className="flex justify-center flex-col items-center min-h-screen bg-black p-4">
+      <div className="flex flex-col lg:flex-row items-center justify-center text-white w-full">
+        <div className="relative w-full lg:w-[576px] h-[321px] lg:h-[371px] mb-6 lg:mb-0 lg:mr-20">
+          <div className="absolute inset-0 w-full h-full z-10">
+            <img
+              src="aboutus.png"
+              className="w-full h-full object-contain"
+              alt="Main"
+            />
+          </div>
+        </div>
+
+        <div className="flex flex-col justify-center items-center lg:items-start w-full lg:w-[576px] lg:h-[533px] text-center lg:text-left px-4 lg:px-0">
+          <h1 className="text-[#ED8325] text-[32px] lg:text-[48px] font-bold">
+            About The Reunion
+          </h1>
+          <p className="text-[18px] lg:text-[23px] mt-4">
+            Lorem Ipsum is simply dummy text of the printing and typesetting
+            industry. Lorem Ipsum has been the industry's standard dummy text
+            ever since the 1500s, when an unknown printer took a galley of type
+            and scrambled it to make a type specimen book. It has survived not
+            only five centuries, but also the leap into electronic typesetting,
+            remaining essentially unchanged.
+          </p>
+        </div>
+      </div>
+
+      <div className="flex flex-col md:flex-row justify-around items-center mt-10 w-full max-w-7xl space-y-6 md:space-y-0 mb-10">
+        <div className="flex flex-col w-full md:w-[250px] text-center md:text-left">
+          <h2 className="text-[20px] text-[#ED8325] md:text-[25px] font-bold">
+            WHERE
+          </h2>
+          <p className="text-[16px] text-white md:text-[20px] mt-2">
+            Lorem Ipsum is simply dummy text of the printing and typesetting
+            industry.
+          </p>
+        </div>
+
+        <div className="flex flex-col w-full md:w-[250px] text-center md:text-left">
+          <h2 className="text-[20px] text-[#ED8325] md:text-[25px] font-bold">
+            WHEN
+          </h2>
+          <p className="text-[16px] text-white md:text-[20px] mt-2">
+            Friday to Sunday
+          </p>
+          <p className="text-[16px] text-white md:text-[20px]">
+            Aug 30 - Sep 01, 2024
+          </p>
+        </div>
+
+        <div className="flex justify-center md:justify-start">
+          <button className="rounded-full text-white bg-transparent border-[#ED8325] border-[1px] px-6 md:px-14 py-2 md:py-2 text-[18px] md:text-[20px] font-bold">
+            Register Now
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AboutUs;

src/pages/Footer.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+
+const Footer = () => {
+  return (
+    <footer className="bg-black p-8 text-center text-white">
+      <div className="grid grid-cols-3 gap-8 text-left">
+
+        <div className="flex flex-col items-start">
+          <div className="flex items-center mb-2">
+            <img 
+              src="/logo.svg" 
+              alt="Logo" 
+              className="h-[283x] w-[198x] object-contain mr-2" 
+            />
+
+          </div>
+        </div>
+
+        <div className="flex flex-col items-start p-5">
+          <h4 className="text-[#ED8325] text-lg font-semibold mb-4">Info</h4>
+          <ul className="space-y-2">
+            <li className="text-white font-semibold drop-shadow-md">Home</li>
+            <li className="text-white font-semibold drop-shadow-md">Reunion Registrations</li>
+            <li className="text-white font-semibold drop-shadow-md">Participants</li>
+            <li className="text-white font-semibold drop-shadow-md">Memories</li>
+          </ul>
+        </div>
+
+        <div className="flex flex-col items-start p-5">
+          <h4 className="text-[#ED8325] text-lg font-semibold mb-4">Contact</h4>
+          <p className="text-white font-semibold drop-shadow-md mb-4">+1 (000) 000-0000</p>
+          <p className="text-white font-semibold drop-shadow-md">123, Lorem Ipsum is</p>
+          <p className="text-white font-semibold drop-shadow-md">xxxxxxxxxxxxxx, CA, 00000</p>
+        </div>
+
+      </div>
+
+      <div className="mt-8 border-t border-gray-600 pt-4">
+        <p className="text-sm text-left text-white">Copyright © Malai95.com</p>
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;

src/pages/Hurryup.tsx

@@ -0,0 +1,71 @@
+'use client'
+import React, { useState, useEffect } from 'react';
+import Countdown from 'react-countdown';
+
+const targetDate = new Date('2024-10-17T00:00:00').getTime();
+
+export default function HurryUp() {
+  const [isMounted, setIsMounted] = useState(false);
+
+  // Ensure the component only renders after mounting on the client
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);
+
+  return (
+    <div className="bg-[url('/audience.svg')] bg-cover bg-center bg-no-repeat backdrop:blur-md h-screen w-full">
+      <div className="relative flex flex-col items-center justify-center h-screen">
+      <h1 className="  w-[1127px] h-[105px] text-[48px] leading-[58.09px]  font-bold  text-center text-white mb-2 -mt-10 ">
+  Hurry Up!
+</h1>
+
+        {isMounted ? (
+          <Countdown
+            date={targetDate}
+            renderer={({ days, hours, minutes, seconds }) => {
+              // Calculate weeks and remaining days
+              const weeks = Math.floor(days / 7);
+
+              return (
+                <div className="grid grid-cols-5 gap-14 text-center bg-transparent">
+                  <div className="flex flex-col items-center" aria-label="Weeks left">
+                    <div className="mb-2 flex h-[140px] w-[140px] flex-col items-center justify-center rounded-lg bg-amber-500 p-2 shadow-lg">
+                      <span className=" text-[76px] w-[170px] h-[105px] font-bold text-white leading-[91.98px] ">{weeks}</span>
+                    </div>
+                    <span className="text-sm font-semibold uppercase text-white drop-shadow-md">weeks</span>
+                  </div>
+                  <div className="flex flex-col items-center" aria-label="Days left">
+                  <div className="mb-2 flex h-[140px] w-[140px] flex-col items-center justify-center rounded-lg bg-amber-500 p-2 shadow-lg">
+                      <span className=" text-[76px] w-[170px] h-[105px] font-bold text-white leading-[91.98px]">{days}</span>
+                    </div>
+                    <span className="text-sm font-semibold uppercase text-white drop-shadow-md">days</span>
+                  </div>
+                  <div className="flex flex-col items-center" aria-label="Hours left">
+                  <div className="mb-2 flex h-[140px] w-[140px] flex-col items-center justify-center rounded-lg bg-amber-500 p-2 shadow-lg">
+                      <span className=" text-[76px] w-[170px] h-[105px] font-bold text-white leading-[91.98px]">{hours}</span>
+                    </div>
+                    <span className="text-sm font-semibold uppercase text-white drop-shadow-md">Hours</span>
+                  </div>
+                  <div className="flex flex-col items-center" aria-label="Minutes left">
+                  <div className="mb-2 flex h-[140px] w-[140px] flex-col items-center justify-center rounded-lg bg-amber-500 p-2 shadow-lg">
+                      <span className=" text-[76px] w-[170px] h-[105px] font-bold text-white leading-[91.98px]">{minutes}</span>
+                    </div>
+                    <span className="text-sm font-semibold uppercase text-white drop-shadow-md">Minutes</span>
+                  </div>
+                  <div className="flex flex-col items-center" aria-label="Seconds left">
+                  <div className="mb-2 flex h-[140px] w-[140px] flex-col items-center justify-center rounded-lg bg-amber-500 p-2 shadow-lg">
+                      <span className=" text-[76px] w-[170px] h-[105px] font-bold text-white leading-[91.98px]">{seconds}</span>
+                    </div>
+                    <span className="text-sm font-semibold uppercase text-white drop-shadow-md">Seconds</span>
+                  </div>
+                </div>
+              );
+            }}
+          />
+        ) : (
+          <div>Loading...</div> // Placeholder to avoid hydration errors
+        )}
+      </div>
+    </div>
+  );
+}

src/pages/_app.tsx

@@ -1,4 +1,5 @@
 import "@/styles/globals.css";
+import '@fontsource/inter/400.css'; 
 import type { AppProps } from "next/app";
 
 export default function App({ Component, pageProps }: AppProps) {

src/pages/index.tsx

@@ -1,114 +1,14 @@
-import Head from "next/head";
-import Image from "next/image";
-import { Inter } from "next/font/google";
-import styles from "@/styles/Home.module.css";
-
-const inter = Inter({ subsets: ["latin"] });
 
+import HurryUp from "./Hurryup";
+import Footer from "./Footer";
+import AboutUs from "./AboutUs";
 export default function Home() {
   return (
     <>
-      <Head>
-        <title>Create Next App</title>
-        <meta name="description" content="Generated by create next app" />
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <link rel="icon" href="/favicon.ico" />
-      </Head>
-      <main className={`${styles.main} ${inter.className}`}>
-        <div className={styles.description}>
-          <p>
-            Get started by editing&nbsp;
-            <code className={styles.code}>src/pages/index.tsx</code>
-          </p>
-          <div>
-            <a
-              href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              By{" "}
-              <Image
-                src="/vercel.svg"
-                alt="Vercel Logo"
-                className={styles.vercelLogo}
-                width={100}
-                height={24}
-                priority
-              />
-            </a>
-          </div>
-        </div>
-
-        <div className={styles.center}>
-          <Image
-            className={styles.logo}
-            src="/next.svg"
-            alt="Next.js Logo"
-            width={180}
-            height={37}
-            priority
-          />
-        </div>
-
-        <div className={styles.grid}>
-          <a
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-            className={styles.card}
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <h2>
-              Docs <span>-&gt;</span>
-            </h2>
-            <p>
-              Find in-depth information about Next.js features and&nbsp;API.
-            </p>
-          </a>
-
-          <a
-            href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-            className={styles.card}
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <h2>
-              Learn <span>-&gt;</span>
-            </h2>
-            <p>
-              Learn about Next.js in an interactive course with&nbsp;quizzes!
-            </p>
-          </a>
-
-          <a
-            href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-            className={styles.card}
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <h2>
-              Templates <span>-&gt;</span>
-            </h2>
-            <p>
-              Discover and deploy boilerplate example Next.js&nbsp;projects.
-            </p>
-          </a>
-
-          <a
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-            className={styles.card}
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <h2>
-              Deploy <span>-&gt;</span>
-            </h2>
-            <p>
-              Instantly deploy your Next.js site to a shareable URL
-              with&nbsp;Vercel.
-            </p>
-          </a>
-        </div>
-      </main>
+      <AboutUs/>
+      <HurryUp/>
+      <Footer/>
+
     </>
   );
 }