release/1.2.0

app/(home)/components/CountdownTimer.tsx

@@ -0,0 +1,68 @@
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+
+interface CountdownTimerProps {
+  eventDate: string;
+}
+
+export default function CountdownTimer({ eventDate }: CountdownTimerProps) {
+  const formatNumber = (num: number) => (num < 10 ? `0${num}` : `${num}`);
+
+  const calculateTimeLeft = useCallback(() => {
+    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' };
+  }, [eventDate]); // Dependency array ensures the function updates when `eventDate` changes
+
+  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());
+  const [isClient, setIsClient] = useState(false);
+
+  useEffect(() => {
+    setIsClient(true);
+
+    const timer = setInterval(() => {
+      setTimeLeft(calculateTimeLeft());
+    }, 1000);
+
+    return () => clearInterval(timer);
+  }, [calculateTimeLeft]); // Dependency array ensures the effect re-runs if `calculateTimeLeft` changes
+
+  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

@@ -8,13 +8,13 @@ import logo from '@/public/assets/logo.svg';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Checkbox } from '@/components/ui/checkbox';
-import { ChevronDown } from 'lucide-react';
-import {
-  Accordion,
-  AccordionTrigger,
-  AccordionContent,
-  AccordionItem,
-} from '@/components/ui/accordion';
+// import { ChevronDown } from 'lucide-react';
+// import {
+//   Accordion,
+//   AccordionTrigger,
+//   AccordionContent,
+//   AccordionItem,
+// } from '@/components/ui/accordion';
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import {
@@ -174,7 +174,7 @@ export function Footer() {
                 </Link>
               ))}
 
-              <div className="col-span-2 flex justify-center md:justify-start ">
+              {/* <div className="col-span-2 flex justify-center md:justify-start ">
                 <Accordion
                   type="single"
                   collapsible
@@ -194,7 +194,7 @@ export function Footer() {
                     </AccordionContent>
                   </AccordionItem>
                 </Accordion>
-              </div>
+              </div> */}
             </div>
           </div>
         </div>

app/(home)/components/Sponsors.tsx

@@ -0,0 +1,73 @@
+import { Container } from '@/components/ui/container';
+import dynamic from 'next/dynamic';
+const SponsorsDesktop = dynamic(() => import('./SponsorsDesktop'));
+const SponsorsMobile = dynamic(() => import('./SponsorsMobile'));
+
+interface SponsorshipProps {
+  name: string;
+  logo: string;
+  logoMobile: string;
+  description: string;
+  url: string;
+}
+
+export function Sponsors() {
+  const sponsors: SponsorshipProps[] = [
+    {
+      name: 'Mugna Tech',
+      logo: '/sponsor-logos/mugna-logo.png',
+      logoMobile: '/sponsor-logos/mugna-logo.png',
+      description:
+        'Mugna Tech specializes in Web, Software, and Mobile Development, UI/UX Design, and more, with 75+ projects for diverse businesses.',
+      url: 'https://mugna.tech',
+    },
+    {
+      name: 'Codev',
+      logo: '/sponsor-logos/codev-logo.png',
+      logoMobile: '/sponsor-logos/codev-logo.png',
+      description:
+        'Hire top offshore developers with CoDev—skilled professionals dedicated to your success.',
+      url: 'https://codev.com',
+    },
+    {
+      name: 'Ingenuity Software',
+      logo: '/sponsor-logos/ingenuity-logo.png',
+      logoMobile: '/sponsor-logos/ingenuity-logo-mobile.png',
+      description:
+        'Ingenuity Software is a Davao-based software development company that turns ideas into impactful digital solutions. ',
+      url: 'https://ingenuity.ph',
+    },
+    {
+      name: 'PythonPH',
+      logo: '/sponsor-logos/pythonph-logo.png',
+      logoMobile: '/sponsor-logos/pythonph-logo-mobile.png',
+      description:
+        'Python Philippines is a volunteer-run non-profit supporting the growth of the Python community in the country.',
+      url: 'https://python.ph',
+    },
+    {
+      name: 'Stace',
+      logo: '/sponsor-logos/stace-logo.svg',
+      logoMobile: '/sponsor-logos/stace-logo.svg',
+      description:
+        'Stace is a comprehensive platform designed to enhance and simplify the rental experience for both renters and landlords.',
+      url: 'https://www.stace.app',
+    },
+  ];
+
+  return (
+    <section className="bg-[#112018] py-16 font-montserrat lg:mb-[-90px] md:mb-[-70px] sm:mb-0">
+      <Container>
+        {/* Desktop View (768px and up) */}
+        <section className="hidden md:block">
+          <SponsorsDesktop sponsors={sponsors} />
+        </section>
+
+        {/* Mobile View (Below 768px) */}
+        <section className="md:hidden">
+          <SponsorsMobile sponsors={sponsors} />
+        </section>
+      </Container>
+    </section>
+  );
+}