Implement UI components for consistency, update layout of existing co…

…mponents and add discord and pycon editions (#44)
HydPy · Jan 1, 2025 · 9f868b4 · 9f868b4
1 parent 475608a
commit 9f868b4
Show file tree

Hide file tree

Showing 8 changed files with 226 additions and 205 deletions.
diff --git a/data/details.js b/data/details.js
@@ -13,17 +13,11 @@ export const ASSETS = {
   navbarLogoAlt: 'PyConf Hyderabad 2025 Python Logo',
   logoUrl: '/images/logo.svg',
   logoAlt: 'PyConf Hyderabad 2025 Logo',
-  monumentsUrl: '/images/monuments.svg',
   monumentsSketchUrl: '/images/monumentsSketch.svg',
   monumentsSketchAlt:
     'Illustration showcasing various iconic monuments of Hyderabad.',
 };
 
-export const HERO_BANNER = {
-  volunteerFormUrl: 'https://forms.gle/aceBohpaYLWef4eU9',
-  cfpUrl: 'https://www.papercall.io/pyconfhyd2025',
-};
-
 export const ABOUT_HYDPY = {
   title: 'Meet our Organizers: HydPy',
   description:
@@ -34,6 +28,12 @@ export const ABOUT_HYDPY = {
   hydPyLinkText: 'Dive Into HydPy',
 };
 
+export const KEY_LINKS = {
+  volunteerFormUrl: 'https://forms.gle/aceBohpaYLWef4eU9',
+  cfpUrl: 'https://www.papercall.io/pyconfhyd2025',
+  interestedInSponsoringUrl: 'https://forms.gle/d5cg5WpayP9mEfAm9',
+};
+
 export const NAV_ITEMS = [
   {
     name: 'Home',
@@ -47,28 +47,42 @@ export const NAV_ITEMS = [
   },
 ];
 
-export const PAST_EDITIONS = [
-  {
-    year: 2022,
-    url: 'https://pyconf.hydpy.org/2022',
-    ariaLabel: 'PyConf Hyderabad 2022 website',
-  },
-  {
-    year: 2020,
-    url: 'https://pyconf.hydpy.org/2020',
-    ariaLabel: 'PyConf Hyderabad 2020 website',
-  },
-  {
-    year: 2019,
-    url: 'https://pyconf.hydpy.org/2019',
-    ariaLabel: 'PyConf Hyderabad 2019 website',
-  },
-  {
-    year: 2017,
-    url: 'https://pyconf.hydpy.org/2017',
-    ariaLabel: 'PyConf Hyderabad 2017 website',
-  },
-];
+export const PYCON_INDIA_HYDPY_PAST_EDITIONS = {
+  sectionTitle: 'PyCon India Editions: A Collective Effort Led by HydPy',
+  editions: [
+    {
+      year: 2023,
+      url: 'https://in.pycon.org/2023/',
+      ariaLabel: 'PyCon India 2023 website',
+    },
+  ],
+};
+
+export const PAST_EDITIONS = {
+  sectionTitle: 'Past Editions',
+  editions: [
+    {
+      year: 2022,
+      url: 'https://pyconf.hydpy.org/2022',
+      ariaLabel: 'PyConf Hyderabad 2022 website',
+    },
+    {
+      year: 2020,
+      url: 'https://pyconf.hydpy.org/2020',
+      ariaLabel: 'PyConf Hyderabad 2020 website',
+    },
+    {
+      year: 2019,
+      url: 'https://pyconf.hydpy.org/2019',
+      ariaLabel: 'PyConf Hyderabad 2019 website',
+    },
+    {
+      year: 2017,
+      url: 'https://pyconf.hydpy.org/2017',
+      ariaLabel: 'PyConf Hyderabad 2017 website',
+    },
+  ],
+};
 
 export const SOCIALS = [
   {
@@ -96,4 +110,9 @@ export const SOCIALS = [
     url: 'https://www.instagram.com/pyconfhyd',
     ariaLabel: "Hyperlink to PyConf Hyderabad's Instagram page.",
   },
+  {
+    name: 'Discord',
+    url: 'https://discord.com/invite/C3pnRHMyWJ',
+    ariaLabel: "Hyperlink to PyConf Hyderabad's Discord server.",
+  },
 ];
diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
@@ -6,7 +6,7 @@ import {
   CONFERENCE,
   SOCIALS,
   PAST_EDITIONS,
-  PYCON_INDIA_HYDPY_EDITIONS,
+  PYCON_INDIA_HYDPY_PAST_EDITIONS,
   ASSETS,
 } from '@/details';
 
@@ -22,11 +22,11 @@ const Footer = () => {
           ariaLabel: ASSETS.monumentsSketchAlt,
         }}
       ></div>
-      <div className="bg-gradient-to-r from-secondary-light-700 to-secondary-light-800 p-4">
-        <div className="sm:w-4/6 flex flex-wrap justify-between mx-auto">
-          <div className="flex flex-col flex-wrap">
+      <div className="bg-gradient-to-r from-secondary-700 to-secondary-800 p-4">
+        <div className="sm:w-4/6 flex flex-row flex-wrap justify-between mx-auto gap-3">
+          <div className="flex flex-col flex-wrap mt-2">
             <div className="font-medium text-gray-50">Contact Us On</div>
-            <div className="flex flex-row my-2">
+            <div className="flex flex-row flex-wrap mt-2">
               {SOCIALS.map((item, index) => (
                 <Link
                   key={index}
@@ -40,11 +40,29 @@ const Footer = () => {
               ))}
             </div>
           </div>
-          <div className="flex flex-col my-2">
-            <div className="col font-medium text-gray-50">Past Editions</div>
-            {PAST_EDITIONS.map((item, index) => (
+          <div className="flex flex-col mt-2">
+            <div className="font-medium text-gray-50">
+              {PAST_EDITIONS.sectionTitle}
+            </div>
+            {PAST_EDITIONS.editions.map((item, index) => (
+              <Link
+                className="text-gray-300 hover:text-gray-50 mt-1"
+                key={index}
+                href={item.url}
+                target="_blank"
+                aria-label={item.ariaLabel}
+              >
+                {item.year}
+              </Link>
+            ))}
+          </div>
+          <div className="flex flex-col mt-2">
+            <div className="font-medium text-gray-50">
+              {PYCON_INDIA_HYDPY_PAST_EDITIONS.sectionTitle}
+            </div>
+            {PYCON_INDIA_HYDPY_PAST_EDITIONS.editions.map((item, index) => (
               <Link
-                className="col text-gray-300 hover:text-gray-50 mt-1"
+                className="text-gray-300 hover:text-gray-50 mt-1"
                 key={index}
                 href={item.url}
                 target="_blank"
@@ -55,7 +73,7 @@ const Footer = () => {
             ))}
           </div>
         </div>
-        <hr className="h-px mt-2 text-gray-50" />
+        <hr className="h-px mt-4 text-gray-50" />
         <div className="text-center mt-4 text-gray-100">
           {CONFERENCE.copyrightTitle}
         </div>

diff --git a/src/components/Header.jsx b/src/components/Header.jsx
@@ -4,8 +4,27 @@ import Link from 'next/link';
 import React, { useState } from 'react';
 import Icon from '@/components/Icon';
 
+import { Span } from '@/components/Typography';
 import { NAV_ITEMS, ASSETS } from '@/details';
 
+const NavItem = ({ item, activePage, handleNavItemClick }) => {
+  return (
+    <Link
+      href={item.path}
+      className={`block py-2 px-4 mb-1 md:mb-0 rounded  ${
+        activePage === item.path
+          ? 'text-primary-700 dark:text-primary-600'
+          : 'text-gray-950 dark:text-gray-50'
+      }`}
+      aria-current={activePage === item.path ? 'page' : undefined}
+      onClick={() => handleNavItemClick(item)}
+      target={item.target}
+    >
+      <Span>{item.name}</Span>
+    </Link>
+  );
+};
+
 const Header = ({ themeToggle }) => {
   const [isMenuOpen, setIsMenuOpen] = useState(false);
   const [activePage, setActivePage] = useState('/');
@@ -29,7 +48,6 @@ const Header = ({ themeToggle }) => {
           <Image
             src={ASSETS.navbarLogoUrl}
             alt={ASSETS.navbarLogoAlt}
-            priority={true}
             width={50}
             height={50}
           />
@@ -39,12 +57,12 @@ const Header = ({ themeToggle }) => {
           <button
             data-collapse-toggle="navbar-dropdown"
             type="button"
-            className="inline-flex items-center p-2 w-10 h-10 justify-center text-sm rounded-lg md:hidden focus:outline-none focus:ring-2 focus:ring-light-100 text-gray-950 dark:text-gray-50"
+            className="inline-flex items-center p-2 w-10 h-10 justify-center rounded-lg md:hidden focus:outline-none focus:ring-2 focus:ring-light-100 text-gray-950 dark:text-gray-50"
             aria-controls="navbar-dropdown"
             aria-expanded={isMenuOpen}
             onClick={toggleMenu}
           >
-            <span className="sr-only">Open main menu</span>
+            <Span className="sr-only">Open main menu</Span>
             <Icon name="HamburgerMenu" />
           </button>
         </div>
@@ -54,22 +72,14 @@ const Header = ({ themeToggle }) => {
           } w-full md:block md:w-auto`}
           id="navbar-dropdown"
         >
-          <ul className="flex flex-col text-lg p-4 md:p-0 mt-4 md:mt-0 md:flex-row">
+          <ul className="flex flex-col p-4 md:p-0 mt-4 md:mt-0 md:flex-row">
             {NAV_ITEMS.map((item, index) => (
               <li key={index}>
-                <Link
-                  href={item.path}
-                  className={`block py-2 px-4 mb-1 md:mb-0 rounded  ${
-                    activePage === item.path
-                      ? 'text-primary-light-700 dark:text-primary-dark-700'
-                      : 'text-gray-950 dark:text-gray-50'
-                  }`}
-                  aria-current={activePage === item.path ? 'page' : undefined}
-                  onClick={() => handleNavItemClick(item)}
-                  target={item.target}
-                >
-                  {item.name}
-                </Link>
+                <NavItem
+                  item={item}
+                  activePage={activePage}
+                  handleNavItemClick={handleNavItemClick}
+                />
               </li>
             ))}
             <li className="hidden md:flex">{themeToggle}</li>

diff --git a/src/components/Hero.jsx b/src/components/Hero.jsx
@@ -1,48 +1,51 @@
 import Image from 'next/image';
 import Link from 'next/link';
-import { CONFERENCE, HERO_BANNER, ASSETS } from '@/details';
+import { CONFERENCE, KEY_LINKS, ASSETS } from '@/details';
 import Icon from '@/components/Icon';
 
+import { Heading, Paragraph, Span } from '@/components/Typography';
+
 const Hero = () => {
   return (
-    <section className="flex flex-col mx-8 my-6 items-center justify-center h-[550px] sm:h-[500px]">
+    <section className="flex flex-col py-6 items-center w-11/12 lg:w-5/6 mx-auto">
       {/*  For SEO */}
-      <h1 className="hidden">{CONFERENCE.title}</h1>
-      <Image
-        src={ASSETS.logoUrl}
-        alt={ASSETS.logoAlt}
-        priority={true}
-        width={600}
-        height={201}
-      />
-      <p className="my-6 text-center text-gray-600 dark:text-gray-400 text-lg md:text-xl">
-        {CONFERENCE.announcement}
-      </p>
-      <p className="text-2xl font-bold text-center text-gray-950 dark:text-gray-50 mb-8">
+      <Heading tagLevel={2} level={1} className="hidden">
+        {CONFERENCE.title}
+      </Heading>
+      <div className="relative w-full sm:w-3/4 md:w-1/2 aspect-[2/1]">
+        <Image src={ASSETS.logoUrl} alt={ASSETS.logoAlt} priority={true} fill />
+      </div>
+      <Span
+        level={1}
+        className="text-center font-semibold text-secondary-600 dark:text-secondary-400"
+      >
         {CONFERENCE.dates}
-      </p>
+      </Span>
+      <Paragraph className="mt-3 mb-6 text-center text-gray-600 dark:text-gray-400">
+        {CONFERENCE.announcement}
+      </Paragraph>
       <div className="flex flex-col sm:flex-row">
         <Link
-          href={HERO_BANNER.volunteerFormUrl}
+          href={KEY_LINKS.volunteerFormUrl}
           target="_blank"
           className="flex justify-center"
         >
-          <button className="inline-flex mt-2 sm:mr-4 bg-secondary-light-600 px-5 py-3 font-medium hover:bg-secondary-light-700 text-gray-50 border rounded-lg">
+          <button className="inline-flex mt-2 sm:mr-4 items-center bg-secondary-600 px-5 py-3 font-medium hover:bg-secondary-700 text-gray-50 border rounded-lg">
             <Icon name="VolunteerActivism" size={20} />
-            <span className="ml-2">BECOME A VOLUNTEER</span>
+            <Span className="ml-2">BECOME A VOLUNTEER</Span>
           </button>
         </Link>
-        <Link href={HERO_BANNER.cfpUrl} target="_blank">
-          <button className="inline-flex mt-2 bg-primary-light-700 px-5 py-3 font-medium hover:bg-primary-light-800 text-gray-50 border rounded-lg">
+        <Link href={KEY_LINKS.cfpUrl} target="_blank">
+          <button className="inline-flex mt-2 items-center bg-primary-700 px-5 py-3 font-medium hover:bg-primary-800 text-gray-50 border rounded-lg">
             <Icon name="MdCampaign" size={20} />
-            <span className="ml-2">SUBMIT YOUR PROPOSAL</span>
+            <Span className="ml-2">SUBMIT YOUR PROPOSAL</Span>
           </button>
         </Link>
       </div>
-      <Link href="https://forms.gle/d5cg5WpayP9mEfAm9" target="_blank">
-        <button className="inline-flex mt-2 bg-primary-light-700 px-5 py-3 font-medium hover:bg-primary-light-800 text-gray-50 border rounded-lg">
+      <Link href={KEY_LINKS.interestedInSponsoringUrl} target="_blank">
+        <button className="inline-flex mt-2 items-center bg-primary-700 px-5 py-3 font-medium hover:bg-primary-800 text-gray-50 border rounded-lg">
           <Icon name="HandHoldingHeart" size={20} />
-          <span className="ml-2">INTERESTED IN SPONSORING</span>
+          <Span className="ml-2">INTERESTED IN SPONSORING</Span>
         </button>
       </Link>
     </section>

diff --git a/src/components/Icon.jsx b/src/components/Icon.jsx
@@ -6,6 +6,7 @@ import {
   FaXTwitter,
   FaEnvelope,
   FaHandHoldingHeart,
+  FaDiscord,
 } from 'react-icons/fa6';
 import { MdLightMode, MdDarkMode } from 'react-icons/md';
 import { GiHamburgerMenu } from 'react-icons/gi';
@@ -24,6 +25,7 @@ const icons = {
   Sun: MdLightMode,
   Moon: MdDarkMode,
   HandHoldingHeart: FaHandHoldingHeart,
+  Discord: FaDiscord,
 };
 
 export const Icon = ({ name, size = 36, className = '', padding = 0 }) => {