DY-9

app/(home)/components/CountdownTimer.tsx

@@ -0,0 +1,68 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+
+interface CountdownTimerProps {
+  eventDate: string;
+}
+
+export default function CountdownTimer({ eventDate }: CountdownTimerProps) {
+  const formatNumber = (num: number) => (num < 10 ? `0${num}` : `${num}`);
+
+  const calculateTimeLeft = () => {
+    const difference = +new Date(eventDate) - +new Date();
+    if (difference > 0) {
+      return {
+        days: formatNumber(Math.floor(difference / (1000 * 60 * 60 * 24))),
+        hours: formatNumber(Math.floor((difference / (1000 * 60 * 60)) % 24)),
+        minutes: formatNumber(Math.floor((difference / 1000 / 60) % 60)),
+        seconds: formatNumber(Math.floor((difference / 1000) % 60)),
+      };
+    }
+    return { days: '00', hours: '00', minutes: '00', seconds: '00' };
+  };
+
+  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());
+  const [isClient, setIsClient] = useState(false);
+
+  useEffect(() => {
+    setIsClient(true);
+
+    const timer = setInterval(() => {
+      setTimeLeft(calculateTimeLeft());
+    }, 1000);
+
+    return () => clearInterval(timer);
+  }, [eventDate, calculateTimeLeft]);
+
+  if (!isClient) return null;
+
+  return (
+    <div className="bg-none p-2 w-full text-[#36FF90] md:w-auto">
+      <h2 className="text-sm font-bold mb-8 md:mb-6 xl:text-5xl text-center hidden xl:block">
+        COMING SOON
+      </h2>
+      <h2 className="text-[1rem] font-bold mb-2 md:mb-3 lg:text-[40px] md:text-3xl text-center block lg:block xl:hidden">
+        PYCON COUNTDOWN
+      </h2>
+      <div className="flex justify-center gap-4 md:space-x-8 text-center text-2xl lg:text-[75px] md:text-[55px] xl:text-[60px] leading-[100%]">
+        <div>
+          <p className="text-center tabular-nums tracking-[-0.05em]">{`${timeLeft.days}`}</p>
+          <p className="text-sm md:text-xl">DAYS</p>
+        </div>
+        <div>
+          <p className="text-center tabular-nums tracking-[-0.05em]">{`${timeLeft.hours}`}</p>
+          <p className="text-sm md:text-xl">HRS</p>
+        </div>
+        <div>
+          <p className="text-center tabular-nums tracking-[-0.05em]">{`${timeLeft.minutes}`}</p>
+          <p className="text-sm md:text-xl">MIN</p>
+        </div>
+        <div>
+          <p className="text-center tabular-nums tracking-[-0.05em]">{`${timeLeft.seconds}`}</p>
+          <p className="text-sm md:text-xl">SEC</p>
+        </div>
+      </div>
+    </div>
+  );
+}

app/(home)/components/EventCard.tsx

@@ -0,0 +1,62 @@
+import { Button } from '@/components/ui/button';
+import { cn } from '@/lib/utils';
+import CountdownTimer from './CountdownTimer';
+import Link from 'next/link';
+
+interface Event {
+  title: string;
+  date: string;
+  location: string;
+  variant: 'main' | 'regular'; // "main" for the featured event, "regular" for other events
+  link: string;
+}
+
+export default function EventCard({ event }: { event: Event }) {
+  return (
+    <div
+      className={cn(
+        'rounded-md border py-4 border-midori-green bg-medium-dark-green text-center xl:py-10',
+        event.variant !== 'main' &&
+          'transition-transform duration-200 hover:scale-105',
+        event.variant === 'main' &&
+          'bg-gradient-ltr-darkgreen-lightgreen py-8 lg:py-14 max-w-[80%] md:max-w-[80%] lg:max-w-[80%] mx-auto xl:text-left md:px-6 xl:px-14 xl:py-7 xl:flex xl:max-w-[100%] xl:justify-between hover:'
+      )}
+    >
+      <div>
+        <h2
+          className={cn(
+            'font-semibold text-sm lg:text-2xl md:text-xl xl:text-[40px] xl:mb-2',
+            event.variant === 'main' &&
+              'text-[20px] mb-2 lg:text-5xl lg:mb-3 md:text-3xl xl:text-[45px]'
+          )}
+        >
+          {event.title}
+        </h2>
+        <p
+          className={cn(
+            'text-[8px] lg:text-[15px] md:text-[11px] xl:text-xl space-y-1',
+            event.variant === 'main' &&
+              'text-xs lg:text-xl md:text-[17px] md:leading-tight'
+          )}
+        >
+          {event.date} <br /> {event.location}
+        </p>
+        {event.variant === 'main' && (
+          <Button className="mx-auto mt-5 text-[10px] font-medium text-dark-green px-[10px] py-[6px] bg-primary hover:scale-105 hover:bg-primary transition-transform duration-300 rounded-full md:py-[9px] md:px-5 md:text-[12px] lg:py-[12px] lg:px-6 lg:text-[16px] xl:mx-0 xl:text-2xl">
+            <Link href="/404">Register Here</Link>
+          </Button>
+        )}
+      </div>
+
+      {event.variant === 'main' && (
+        <div className="hidden xl:block border-4 rounded-full border-midori-green"></div>
+      )}
+
+      {event.variant === 'main' && (
+        <div className="hidden xl:block mr-8">
+          <CountdownTimer eventDate={new Date(event.date).toISOString()} />
+        </div>
+      )}
+    </div>
+  );
+}

app/(home)/components/Footer.tsx

@@ -42,7 +42,12 @@ const socialLinks = [
 
 const links = [
   { label: 'Home', href: '/' },
-  { label: 'SIGs', href: '/sigs' },
+  // { label: 'SIGs', href: '/sigs' },
+  {
+    label: 'Code of Conduct',
+    href: '/code-of-conduct',
+    external: false,
+  },
   { label: 'About', href: 'https://www.meetup.com/durianpy/', external: true },
   {
     label: 'Speak',

app/(home)/components/UpcomingEvents.tsx

@@ -0,0 +1,78 @@
+import { Container } from '@/components/ui/container';
+import React from 'react';
+import EventCard from './EventCard';
+import CountdownTimer from './CountdownTimer';
+import { Button } from '@/components/ui/button';
+import Link from 'next/link';
+
+interface Event {
+  title: string;
+  date: string;
+  location: string;
+  variant: 'main' | 'regular';
+  link: string;
+}
+
+const EVENTS: Event[] = [
+  {
+    title: 'Pycon Mini Davao',
+    date: 'June 20, 2025',
+    location: 'Mugna Tech, Davao City',
+    variant: 'main',
+    link: '/404',
+  },
+  {
+    title: 'RAGs & DAGs',
+    date: 'June 20, 2025',
+    location: 'Mugna Tech, Davao City',
+    variant: 'regular',
+    link: '/404',
+  },
+  {
+    title: 'RAGs & DAGs',
+    date: 'June 20, 2025',
+    location: 'Mugna Tech, Davao City',
+    variant: 'regular',
+    link: '/404',
+  },
+  {
+    title: 'RAGs & DAGs',
+    date: 'June 20, 2025',
+    location: 'Mugna Tech, Davao City',
+    variant: 'regular',
+    link: '/404',
+  },
+];
+
+const UpcomingEvents = () => {
+  return (
+    <Container className="text-white space-y-4 lg:space-y-8">
+      {/* Title */}
+      <h1 className="font-montserrat font-bold text-center text-2xl xl:text-left lg:text-[80px] md:text-[70px] leading-[100%] xl:leading-normal">
+        Upcoming <span className="text-primary md:block xl:inline">Events</span>
+      </h1>
+
+      {/* Featured */}
+      <EventCard event={EVENTS[0]} />
+
+      {/* Countdown Timer */}
+      <div className="block lg:block xl:hidden">
+        <CountdownTimer eventDate={new Date(EVENTS[0].date).toISOString()} />
+      </div>
+
+      {/* Other events */}
+      <div className="grid grid-cols-1 gap-5 max-w-[40%] lg:max-w-[80%] md:max-w-[80%] mx-auto md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-3 xl:max-w-full">
+        {EVENTS.slice(1).map((event, idx) => (
+          <EventCard key={idx} event={event} />
+        ))}
+      </div>
+
+      {/* See more Events Button */}
+      <Button className="bg-primary hover:bg-primary mx-auto max-w-[80%] lg:max-w-[80%] md:max-w-[80%] w-full md:py-2 xl:py-4 md:font-medium text-dark-green lg:py-4 lg:text-[15px] py-[4px] font-semibold text-[11px] xl:text-2xl xl:max-w-full">
+        <Link href="/404">See More Events</Link>
+      </Button>
+    </Container>
+  );
+};
+
+export default UpcomingEvents;

app/(home)/page.tsx

@@ -4,6 +4,7 @@ import { CTASection } from './components/CTASection';
 import { StatsAndReviews } from './components/StatsAndReviews';
 import { PythonFoundation } from './components//PythonFoundation';
 import { Partners } from './components//Partners';
+import UpcomingEvents from './components//UpcomingEvents';
 import { Footer } from './components//Footer';
 
 export default function HomePage() {
@@ -15,6 +16,7 @@ export default function HomePage() {
       <StatsAndReviews />
       <PythonFoundation />
       <Partners />
+      <UpcomingEvents />
       <Footer />
     </main>
   );

app/code-of-conduct/page.tsx

@@ -0,0 +1,35 @@
+export default function CodeOfConductPage() {
+  return (
+    <main className="mt-20 bg-dark-green text-white min-h-[70vh] py-8 md:px-36 px-10 flex flex-col justify-center">
+      <h1 className="text-4xl md:text-6xl font-bold mb-8">
+        Code of <span className="text-primary">Conduct</span>
+      </h1>
+
+      <h2 className="text-xl md:text-4xl font-medium mb-8">
+        We value respect and inclusivity in all events.
+      </h2>
+
+      <p className="text-xl max-w-3xl leading-relaxed mb-8">
+        The Python community is made up of members from around the globe with a
+        diverse set of skills, personalities, and experiences. It is through
+        these differences that our community experiences great successes and
+        continued growth.
+      </p>
+
+      <p className="text-xl max-w-3xl leading-relaxed">
+        To clarify our expectations, all participants, including attendees,
+        speakers, exhibitors, organizers, and volunteers at any DurianPy event,
+        must adhere to the following{' '}
+        <a
+          href="https://policies.python.org/python.org/code-of-conduct/"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="text-[#F5B041] hover:underline"
+        >
+          Code of Conduct
+        </a>
+        .
+      </p>
+    </main>
+  );
+}

app/layout.tsx

@@ -2,6 +2,7 @@ import type { Metadata } from 'next';
 import '@/styles/globals.css';
 import Navbar from '@/components/navs/public/Navbar';
 import { ReactLenis } from 'lenis/react';
+import { Footer } from './(home)/components/Footer';
 
 const head = {
   title: 'DurianPy',
@@ -43,6 +44,7 @@ export default function RootLayout({
       <body className={`antialiased bg-dark-green`}>
         <Navbar />
         <ReactLenis root>{children}</ReactLenis>
+        <Footer />
       </body>
     </html>
   );

components/navs/public/DesktopView.tsx

@@ -73,16 +73,25 @@ export default function DesktopView() {
       >
         Speak
       </Button>
-      <Button
+      {/* <Button
         variant={'navLink'}
         onClick={() => router.push('/404')}
         className={`${pathname === '/sigs' ? 'text-primary border-primary' : ''}`}
       >
         SIGs
+      </Button> */}
+      <Button
+        variant={'navLink'}
+        onClick={() => router.push('/code-of-conduct')}
+        className={`${pathname === '/code-of-conduct' ? 'text-primary border-primary' : ''}`}
+      >
+        Code of Conduct
       </Button>
       <Button
         variant={'navLink'}
-        onClick={() => router.push('/contact')}
+        onClick={() =>
+          redirectTo({ href: 'https://www.facebook.com/durianpy' })
+        }
         className={`${pathname === '/contact' ? 'text-primary border-primary' : ''}`}
       >
         Contact Us

components/navs/public/MobileView.tsx

@@ -87,11 +87,17 @@ export default function MobileView() {
               </AccordionItem>
             </Accordion>
 
-            <Button
+            {/* <Button
               variant={'navLinkMobile'}
               onClick={() => router.push('/404')}
             >
               SIGs
+            </Button> */}
+            <Button
+              variant={'navLinkMobile'}
+              onClick={() => router.push('/code-of-conduct')}
+            >
+              Code of Conduct
             </Button>
             <Button
               variant={'navLinkMobile'}
@@ -103,7 +109,9 @@ export default function MobileView() {
             </Button>
             <Button
               variant={'navLinkMobile'}
-              onClick={() => router.push('/contact')}
+              onClick={() =>
+                redirectTo({ href: 'https://www.facebook.com/durianpy' })
+              }
             >
               Contact Us
             </Button>