Countdown and Counter Part

astro.config.mjs

@@ -10,6 +10,13 @@ export default defineConfig({
   vite: {
     plugins: [tailwindcss()]
   },
+  server: {
+    allowedHosts: [
+      '94cf578a9552.ngrok-free.app', // your current ngrok host
+      '*.ngrok-free.app',            // allow all ngrok subdomains (recommended)
+    ],
+  },
+
 
   integrations: [react()]
 });

src/components/Countdown.jsx

@@ -0,0 +1,45 @@
+import { useState, useEffect } from 'react';
+
+export default function CountdownTimer() {
+  const targetDate = new Date("2025-10-05T00:00:00").getTime();
+  const [timeLeft, setTimeLeft] = useState({
+    days: 0, hours: 0, minutes: 0, seconds: 0
+  });
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      const now = new Date().getTime();
+      const diff = targetDate - now;
+
+      if (diff <= 0) {
+        clearInterval(interval);
+        setTimeLeft(null); // event started
+        return;
+      }
+
+      setTimeLeft({
+        days: Math.floor(diff / (1000 * 60 * 60 * 24)),
+        hours: Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)),
+        minutes: Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60)),
+        seconds: Math.floor((diff % (1000 * 60)) / 1000),
+      });
+    }, 1000);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  if (!timeLeft) {
+    return <p className="text-2xl sm:text-3xl lg:text-4xl font-bold text-green-600">The event has started! 🎉</p>
+  }
+
+  return (
+    <div className="grid grid-cols-2 sm:grid-cols-4 gap-4 sm:gap-6 lg:gap-8 justify-center">
+      {["days","hours","minutes","seconds"].map((unit) => (
+        <div key={unit} className="p-4 sm:p-6 bg-white rounded-2xl shadow-2xl">
+          <span className="block text-4xl sm:text-5xl lg:text-7xl font-extrabold text-green-600">{timeLeft[unit]}</span>
+          <span className="mt-2 block text-sm sm:text-base lg:text-lg text-black font-semibold">{unit.charAt(0).toUpperCase() + unit.slice(1)}</span>
+        </div>
+      ))}
+    </div>
+  );
+}

src/components/Counter.jsx

@@ -0,0 +1,24 @@
+// src/components/Counter.jsx
+import { useEffect, useState } from "react";
+
+export default function Counter({ target, duration = 2000 }) {
+  const [count, setCount] = useState(0);
+
+  useEffect(() => {
+    let start = 0;
+    const end = parseInt(target);
+    if (start === end) return;
+
+    let incrementTime = Math.floor(duration / end);
+
+    let timer = setInterval(() => {
+      start += 1;
+      setCount(start);
+      if (start === end) clearInterval(timer);
+    }, incrementTime);
+
+    return () => clearInterval(timer);
+  }, [target, duration]);
+
+  return <span>{count}</span>;
+}

src/components/Hero.jsx

@@ -1,5 +1,7 @@
 import { useEffect, useRef } from "react";
 import { HERO, BRANDING, EVENT } from "../config.ts";
+import Counter from "../components/counter.jsx";
+
 
 const Hero = () => {
   const heroRef = useRef(null);
@@ -127,27 +129,31 @@ const Hero = () => {
 
         {/* Event details */}
         <div className="mt-12 md:mt-16 grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-8 text-center px-4">
-          <div className="light-card p-4 md:p-6 rounded-2xl shadow-lg">
-            <h3 className="text-xl md:text-2xl font-bold text-green-600 mb-2">
-              {EVENT.date}
-            </h3>
-            <p className="text-sm md:text-base text-black">One Day Event</p>
-          </div>
-          <div className="light-card p-4 md:p-6 rounded-2xl shadow-lg">
-            <h3 className="text-xl md:text-2xl font-bold text-green-600 mb-2">
-              {EVENT.stats.expectedAttendees}
-            </h3>
-            <p className="text-sm md:text-base text-black">
-              Attendees Expected
-            </p>
-          </div>
-          <div className="light-card p-4 md:p-6 rounded-2xl shadow-lg">
-            <h3 className="text-xl md:text-2xl font-bold text-green-600 mb-2">
-              {EVENT.stats.speakers}
-            </h3>
-            <p className="text-sm md:text-base text-black">Expert Speakers</p>
-          </div>
-        </div>
+
+  <div className="light-card p-4 md:p-6 rounded-2xl shadow-lg">
+    <h3 className="text-xl md:text-2xl font-bold text-green-600 mb-2">
+      {EVENT.date}
+    </h3>
+    <p className="text-sm md:text-base text-black">One Day Event</p>
+  </div>
+
+  {/* Attendees */}
+  <div className="light-card p-4 md:p-6 rounded-2xl shadow-lg">
+    <h3 className="text-xl md:text-2xl font-bold text-green-600 mb-2">
+      <Counter target={EVENT.stats.expectedAttendees} client:visible />+
+    </h3>
+    <p className="text-sm md:text-base text-black">Attendees Expected</p>
+  </div>
+
+  {/* Speakers */}
+  <div className="light-card p-4 md:p-6 rounded-2xl shadow-lg">
+    <h3 className="text-xl md:text-2xl font-bold text-green-600 mb-2">
+      <Counter target={EVENT.stats.speakers} client:visible />+
+    </h3>
+    <p className="text-sm md:text-base text-black">Expert Speakers</p>
+  </div>
+</div>
+
       </div>
 
       {/* Scroll indicator */}

src/pages/index.astro

@@ -4,7 +4,10 @@ import Navigation from '../components/Navigation.jsx';
 import Hero from '../components/Hero.jsx';
 import ScrollAnimations from '../components/ScrollAnimations.jsx';
 import Footer from '../components/Footer.jsx';
+import Counter from '../components/Counter';
 import '../styles/global.css';
+import Countdown from "../components/Countdown.jsx";
+
 ---
 
 <Layout title="Open Source Day 2025 - Celebrate Innovation">
@@ -67,29 +70,46 @@ import '../styles/global.css';
   </section>
 
   <!-- Stats Section -->
-  <section class="py-20 px-4 bg-gradient-to-r from-green-50 to-green-100">
-    <div class="max-w-6xl mx-auto text-center">
-      <h2 class="text-4xl md:text-5xl font-bold text-black mb-16">By the Numbers</h2>
-      <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
-        <div>
-          <div class="text-4xl md:text-6xl font-bold gradient-text mb-2">500+</div>
-          <div class="text-black">Expected Attendees</div>
+
+
+<section class="py-20 px-4 bg-gradient-to-r from-green-50 to-green-100">
+  <div class="max-w-6xl mx-auto text-center">
+    <h2 class="text-4xl md:text-5xl font-bold text-black mb-16">By the Numbers</h2>
+    <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
+
+      <div>
+        <div class="text-4xl md:text-6xl font-bold gradient-text mb-2">
+          <Counter target={500} client:visible />+
         </div>
-        <div>
-          <div class="text-4xl md:text-6xl font-bold gradient-text mb-2">10+</div>
-          <div class="text-black">Expert Speakers</div>
+        <div class="text-black">Expected Attendees</div>
+      </div>
+
+      <div>
+        <div class="text-4xl md:text-6xl font-bold gradient-text mb-2">
+          <Counter target={10} client:visible />+
         </div>
-        <div>
-          <div class="text-4xl md:text-6xl font-bold gradient-text mb-2">5+</div>
-          <div class="text-black">Technical Sessions</div>
+        <div class="text-black">Expert Speakers</div>
+      </div>
+
+      <div>
+        <div class="text-4xl md:text-6xl font-bold gradient-text mb-2">
+          <Counter target={5} client:visible />+
         </div>
-        <div>
-          <div class="text-4xl md:text-6xl font-bold gradient-text mb-2">1</div>
-          <div class="text-black">Full Day Event</div>
+        <div class="text-black">Technical Sessions</div>
+      </div>
+
+      <div>
+        <div class="text-4xl md:text-6xl font-bold gradient-text mb-2">
+          <Counter target={1} client:visible />
         </div>
+        <div class="text-black">Full Day Event</div>
       </div>
+
     </div>
-  </section>
+  </div>
+</section>
+
+
 
   <!-- CTA Section -->
   <section class="py-20 px-4 bg-white">
@@ -109,6 +129,38 @@ import '../styles/global.css';
     </div>
   </section>
 
+
+  <!-- Countdown Section -->
+
+<section class="py-20 px-4 bg-white">
+  <div class="max-w-4xl mx-auto text-center animate-fade-up">
+    <h2 class="text-4xl md:text-5xl font-bold text-black mb-6">Ready to Join Us?</h2>
+    <p class="text-xl text-black mb-8">
+      Don't miss out on this amazing open source community event. Register now!
+    </p>
+    <a
+      href="https://konfhub.com/open-source-day-2025"
+      target="_blank"
+      rel="noopener noreferrer"
+      class="inline-block bg-green-500 hover:bg-green-400 text-white px-12 py-4 rounded-full font-bold text-xl transition-all duration-200 glow-effect hover:scale-105 transform"
+    >
+      Register Now
+    </a>
+  </div>
+
+  <!-- Countdown appears here -->
+<div class="mt-5 py-16 px-4 bg-gradient-to-r from-green-50 to-green-100">
+  <div class="max-w-5xl mx-auto text-center">
+    <h3 class="text-3xl md:text-4xl lg:text-5xl font-bold text-black mb-10">
+      Countdown to the Event 🚀
+    </h3>
+
+    <Countdown client:load />
+  </div>
+</div>
+
+
+
   <!-- Footer -->
   <Footer client:load />
 </Layout>