amfoss · ganidande905 · Oct 7, 2025 · Oct 4, 2025 · Oct 7, 2025
diff --git a/app/globals.css b/app/globals.css
@@ -0,0 +1,114 @@
+/* Atkinson Hyperlegible Regular */
+@font-face {
+  font-family: "AtkinsonHyperlegible";
+  src: url("/assets/fonts/AtkinsonHyperlegible-Regular.ttf") format("truetype");
+  font-weight: 400;
+  font-style: normal;
+}
+
+/* Atkinson Hyperlegible Italic */
+@font-face {
+  font-family: "AtkinsonHyperlegible";
+  src: url("/assets/fonts/AtkinsonHyperlegible-Italic.ttf") format("truetype");
+  font-weight: 400;
+  font-style: italic;
+}
+
+/* Atkinson Hyperlegible Bold */
+@font-face {
+  font-family: "AtkinsonHyperlegible";
+  src: url("/assets/fonts/AtkinsonHyperlegible-Bold.ttf") format("truetype");
+  font-weight: 700;
+  font-style: normal;
+}
+
+/* Atkinson Hyperlegible Bold Italic */
+@font-face {
+  font-family: "AtkinsonHyperlegible";
+  src: url("/assets/fonts/AtkinsonHyperlegible-BoldItalic.ttf") format("truetype");
+  font-weight: 700;
+  font-style: italic;
+}
+
+/* Atkinson Hyperlegible Mono */
+@font-face {
+  font-family: "AtkinsonHyperlegibleMono";
+  src: url("/assets/fonts/AtkinsonHyperlegibleMono-VariableFont_wght.ttf") format("truetype");
+  font-weight: 100 900;
+  font-style: normal;
+}
+
+/* Atkinson Hyperlegible Mono Italic */
+@font-face {
+  font-family: "AtkinsonHyperlegibleMono";
+  src: url("/assets/fonts/AtkinsonHyperlegibleMono-Italic-VariableFont_wght.ttf") format("truetype");
+  font-weight: 100 900;
+  font-style: italic;
+}
+
+/* Atkinson Hyperlegible Next */
+@font-face {
+  font-family: "AtkinsonHyperlegibleNext";
+  src: url("/assets/fonts/AtkinsonHyperlegibleNext-VariableFont_wght.ttf") format("truetype");
+  font-weight: 100 900;
+  font-style: normal;
+}
+
+/* Atkinson Hyperlegible Next Italic */
+@font-face {
+  font-family: "AtkinsonHyperlegibleNext";
+  src: url("/assets/fonts/AtkinsonHyperlegibleNext-Italic-VariableFont_wght.ttf") format("truetype");
+  font-weight: 100 900;
+  font-style: italic;
+}
+
+:root {
+  --primary-color: #1C1C3F;
+  --hacktober-dark: #1C1C3F;
+  --Theme-Primary: #D0CCE3;
+  --button-hover-color: linear-gradient(90deg, #5A5AB5 0%, #C2C2FF 100%);
+  --border-color: color(srgb 0.815686 0.8 0.890196 / 0.25) 0px 0px 0px 1px;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  font-family: "AtkinsonHyperlegible", -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  background: var(--hacktober-dark);
+  color: white;
+  scroll-behavior: smooth;
+  overflow-x: hidden;
+}
+
+code {
+  font-family: "AtkinsonHyperlegibleMono", source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}
+
+.App {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  overflow-x: hidden;
+  box-sizing: border-box;
+}
+
+/* .scroll-container {
+  height: 100vh;
+  overflow-y: scroll;
+  scroll-snap-type: y mandatory;
+}
+
+
+.section {
+  height: 100vh;
+  scroll-snap-align: start;
+} */
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -0,0 +1,21 @@
+import type { Metadata } from "next";
+import "./globals.css";
+
+export const metadata: Metadata = {
+  title: "Hacktoberfest Event Portal",
+  description: "Join us for Hacktoberfest!",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body>
+        {children}
+      </body>
+    </html>
+  );
+}
diff --git a/app/page.tsx b/app/page.tsx
@@ -0,0 +1,22 @@
+'use client';
+
+import React from 'react';
+import Footer from '@/components/Footer';
+import Header from '@/components/Header/Header';
+import Description from '@/components/description';
+import HeroStats from '@/components/HeroStats/HeroStats';
+import RegistrationForm from '@/components/RegistrationForm/RegistrationForm';
+import ParticleBackground from '@/components/ParticleBackground/ParticleBackground';
+
+export default function Home() {
+  return (
+    <div className="App scroll-container">
+      <ParticleBackground />
+      <Header />
+      <Description />
+      <HeroStats />
+      <RegistrationForm />
+      <Footer />
+    </div>
+  );
+}
diff --git a/components/Countdown/CountdownTimer.css b/components/Countdown/CountdownTimer.css
@@ -0,0 +1,161 @@
+.countdown-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.countdown-timer {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  background-color: rgb(from rgb(28, 28, 63) r g b / 0.15);
+  backdrop-filter: blur(10px);
+  /* background-color: #1b1b1b; */
+  /* border-radius: 48px; */
+  /* border: 1px solid var(--border-color); */
+  /* box-shadow: 0 20px 50px rgba(0, 255, 0, 0.2);  */
+  /* box-shadow: 0px 10px 4px 0px #3C9D2140; */
+  box-shadow: var(--border-color);
+  width: 100%;
+  padding: 20px;
+
+}
+
+.time-section {
+  text-align: center;
+  margin: 0px 20px;
+  position: relative;
+  padding: 16px 0px;
+  width: 80px;
+}
+
+.time-section:not(:last-child)::after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  right: -20px;
+  height: 100%;
+  width: 1px;
+  /* background-color: #00ff00;  */
+  background-color: var(--primary-color);
+}
+
+.time-value {
+  font-size: 3rem;
+  /* color: #50DA4C; */
+  color: var(--primary-color);
+  font-weight: bold;
+  padding: 20px;
+  width: 100%;
+}
+
+.time-label {
+  font-size: 1.2rem;
+  color: #ffffff;
+  margin-top: 10px;
+  display: block;
+}
+
+.countdown-message {
+  margin-top: 30px;
+  font-size: 1.8rem;
+  color: #ffffff;
+}
+
+
+/* For medium-sized screens (tablets, small laptops) */
+@media (max-width: 1100px) {
+  .countdown-timer {
+    width: 100%;
+    padding: 20px;
+  }
+
+  .time-section {
+    width: 80px;
+    /* Reduce width for medium-sized screens */
+    margin: 0 10px;
+    /* Adjust the spacing */
+
+  }
+
+  .time-value {
+    font-size: 2.5rem;
+    /* Adjust font size */
+    padding: 16px;
+    /* Reduce padding */
+  }
+
+  .time-label {
+    font-size: 1rem;
+    /* Adjust label font size */
+  }
+}
+
+/* For small screens (mobiles) */
+@media (max-width: 768px) {
+  .countdown-timer {
+    flex-direction: row;
+    padding: 10px;
+  }
+
+  .time-section {
+    width: 100%;
+    /* Full width for stacked layout */
+    margin: 10px 0;
+  }
+
+  .time-value {
+    font-size: 2rem;
+    /* Smaller font size for mobile */
+  }
+
+  .time-label {
+    font-size: 0.9rem;
+    /* Smaller label size */
+  }
+  .time-section:not(:last-child)::after {
+    content: "";
+    position: absolute;
+    top: 10px;
+    right: 0px;
+    height: 80%;
+    width: 1px;
+    /* background-color: #00ff00;  */
+    background-color: var(--primary-color);
+  }
+}
+
+/* For very small screens (phones) */
+@media (max-width: 480px) {
+  .countdown-timer {
+    margin-top: 25px;
+  }
+
+
+  .time-section {
+    margin: 5px 0;
+
+  }
+
+  .time-section:not(:last-child)::after {
+    content: "";
+    position: absolute;
+    top: 10px;
+    right: 0px;
+    height: 80%;
+    width: 1px;
+    /* background-color: #00ff00;  */
+    background-color: var(--primary-color);
+  }
+
+  .time-value {
+    font-size: 1.5rem;
+    /* Smaller font for small screens */
+    padding: 12px;
+  }
+
+  .time-label {
+    font-size: 0.8rem;
+  }
+}
diff --git a/components/Countdown/CountdownTimer.js b/components/Countdown/CountdownTimer.js
@@ -0,0 +1,60 @@
+'use client';
+
+import React, { useState, useEffect } from "react";
+import "./CountdownTimer.css";
+
+const CountdownTimer = () => {
+  const calculateTimeLeft = () => {
+    const targetDate =new Date("2025-10-22T23:59:59"); 
+    const now = new Date();
+    const difference = targetDate - now;
+
+    let timeLeft = {};
+    if (difference > 0) {
+      timeLeft = {
+        days: Math.floor(difference / (1000 * 60 * 60 * 24)),
+        hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
+        minutes: Math.floor((difference / 1000 / 60) % 60),
+        seconds: Math.floor((difference / 1000) % 60),
+      };
+    }
+
+    return timeLeft;
+  };
+
+  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setTimeLeft(calculateTimeLeft());
+    }, 1000);
+
+    return () => clearTimeout(timer);
+  }, [timeLeft]);
+
+  return (
+    <div className="countdown-container">
+      <div className="countdown-timer">
+        <div className="time-section">
+          <span className="time-value">{timeLeft.days || "00"}</span>
+          <span className="time-label">Days</span>
+        </div>
+        <div className="time-section">
+          <span className="time-value">{timeLeft.hours || "00"}</span>
+          <span className="time-label">Hours</span>
+        </div>
+        <div className="time-section">
+          <span className="time-value">{timeLeft.minutes || "00"}</span>
+          <span className="time-label">Mins</span>
+        </div>
+        <div className="time-section">
+          <span className="time-value">{timeLeft.seconds || "00"}</span>
+          <span className="time-label">Secs</span>
+        </div>
+      </div>
+      <div className="countdown-message">The clock is ticking!</div>
+    </div>
+  );
+};
+
+export default CountdownTimer;