Add logo, past editions and revamp based on the logo (#23)

HydPy · Nov 29, 2024 · 89902cd · 89902cd
1 parent 9a781ba
commit 89902cd
Show file tree

Hide file tree

Showing 11 changed files with 355 additions and 110 deletions.
diff --git a/data/details.js b/data/details.js
@@ -5,13 +5,20 @@ export const CONFERENCE = {
   announcement:
     'Hyderabad’s biggest Python conference is on the way! Get ready for an unforgettable experience and stay tuned for updates!',
   copyrightTitle: 'Copyright @ 2025 PyConf Hyderabad',
-  logoUrl: '/images/logo.png',
+};
+
+export const ASSETS = {
+  navbarLogoUrl: '/images/navbarLogo.svg',
+  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 = {
-  imageUrl: '/images/hero-banner.webp',
-  imageAlt: 'PyConf Hyderabad 2025 volunteers picture',
   volunteerFormUrl: 'https://forms.gle/aceBohpaYLWef4eU9',
   cfpUrl: 'https://www.papercall.io/pyconfhyd2025',
 };
@@ -29,7 +36,35 @@ 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 SOCIALS = [
+  {
+    name: 'Envelope',
+    url: 'mailto:contact@hydpy.org',
+    ariaLabel: "Hyperlink to HydPy's email.",
+  },
   {
     name: 'LinkedIn',
     url: 'https://www.linkedin.com/company/pyconf-hyderabad',

diff --git a/public/images/hero-banner.webp b/public/images/hero-banner.webp
diff --git a/public/images/logo.png b/public/images/logo.png
diff --git a/public/images/logo.svg b/public/images/logo.svg
diff --git a/public/images/monumentsSketch.svg b/public/images/monumentsSketch.svg
diff --git a/public/images/navbarLogo.svg b/public/images/navbarLogo.svg
diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
@@ -2,29 +2,56 @@ import Link from 'next/link';
 import React from 'react';
 
 import Icon from '@/components/Icon';
-import { CONFERENCE, SOCIALS } from '@/details';
+import { CONFERENCE, SOCIALS, PAST_EDITIONS, ASSETS } from '@/details';
 
 const Footer = () => {
   return (
-    <footer className="bg-gradient-to-r from-primary-light-800 to-secondary-light-800 text-gray-50 p-4">
-      <div className="mx-auto w-full">
-        <div className="sm:flex sm:items-center sm:justify-between">
-          <div className="flex sm:justify-center ">
-            {SOCIALS.map((item, index) => (
+    <footer>
+      <div
+        className="mt-4"
+        style={{
+          backgroundImage: `url(${ASSETS.monumentsSketchUrl})`,
+          backgroundPosition: 'center',
+          height: '100px',
+          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="font-medium text-gray-50">Contact Us On</div>
+            <div className="flex flex-row my-2">
+              {SOCIALS.map((item, index) => (
+                <Link
+                  key={index}
+                  className="text-gray-300 hover:text-gray-50 mr-2"
+                  href={item.url}
+                  target="_blank"
+                  aria-label={item.ariaLabel}
+                >
+                  <Icon name={item.name} />
+                </Link>
+              ))}
+            </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) => (
               <Link
+                className="col text-gray-300 hover:text-gray-50 mt-1"
                 key={index}
-                className="text-gray-300 hover:text-gray-50 mr-2"
                 href={item.url}
                 target="_blank"
                 aria-label={item.ariaLabel}
               >
-                <Icon name={item.name} />
+                {item.year}
               </Link>
             ))}
           </div>
-          <div className="text-sm mt-3 sm:mt-0 text-center">
-            {CONFERENCE.copyrightTitle}
-          </div>
+        </div>
+        <hr className="h-px mt-2 text-gray-50" />
+        <div className="text-center mt-4 text-gray-100">
+          {CONFERENCE.copyrightTitle}
         </div>
       </div>
     </footer>

diff --git a/src/components/Header.jsx b/src/components/Header.jsx
@@ -4,7 +4,7 @@ import Link from 'next/link';
 import React, { useState } from 'react';
 import Icon from '@/components/Icon';
 
-import { CONFERENCE, NAV_ITEMS } from '@/details';
+import { CONFERENCE, NAV_ITEMS, ASSETS } from '@/details';
 
 const Header = () => {
   const [isMenuOpen, setIsMenuOpen] = useState(false);
@@ -20,54 +20,56 @@ const Header = () => {
   };
 
   return (
-    <header>
-      <nav className="bg-gradient-to-r from-primary-light-800 to-secondary-light-800 border-light-200 text-gray-50 p-4">
-        <div className="max-w-screen-xl flex flex-wrap items-center justify-between">
-          <Link
-            href="#"
-            className="flex items-center space-x-3 rtl:space-x-reverse"
-          >
-            <span className="self-center text-2xl font-semibold whitespace-nowrap">
-              PyConf Hyderabad 2025
-            </span>
-          </Link>
-          <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-300"
-            aria-controls="navbar-dropdown"
-            aria-expanded={isMenuOpen}
-            onClick={toggleMenu}
-          >
-            <span className="sr-only">Open main menu</span>
-            <Icon name="HamburgerMenu" />
-          </button>
-          <div
-            className={`${
-              isMenuOpen ? 'block' : 'hidden'
-            } w-full md:block md:w-auto`}
-            id="navbar-dropdown"
-          >
-            <ul className="flex flex-col text-lg font-normal p-4 md:p-0 mt-4 md:mt-0 md:border-0 bg-gray-800 md:bg-transparent rounded-lg md:space-x-8 rtl:space-x-reverse 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 text-gray-50 rounded  ${
-                      activePage === item.path
-                        ? 'bg-accent-light-600'
-                        : 'hover:bg-gray-700'
-                    }`}
-                    aria-current={activePage === item.path ? 'page' : undefined}
-                    onClick={() => handleNavItemClick(item)}
-                    target={item.target}
-                  >
-                    {item.name}
-                  </Link>
-                </li>
-              ))}
-            </ul>
-          </div>
+    <header className="bg-gray-50 p-4 shadow-lg">
+      <nav className="flex flex-wrap items-center justify-between sm:w-11/12 mx-auto">
+        <Link
+          href="#"
+          className="flex items-center space-x-3 rtl:space-x-reverse"
+        >
+          <Image
+            src={ASSETS.navbarLogoUrl}
+            alt={ASSETS.navbarLogoAlt}
+            priority={true}
+            width={50}
+            height={50}
+          />
+        </Link>
+        <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"
+          aria-controls="navbar-dropdown"
+          aria-expanded={isMenuOpen}
+          onClick={toggleMenu}
+        >
+          <span className="sr-only">Open main menu</span>
+          <Icon name="HamburgerMenu" />
+        </button>
+        <div
+          className={`${
+            isMenuOpen ? 'block' : 'hidden'
+          } 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">
+            {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'
+                      : 'text-gray-950'
+                  }`}
+                  aria-current={activePage === item.path ? 'page' : undefined}
+                  onClick={() => handleNavItemClick(item)}
+                  target={item.target}
+                >
+                  {item.name}
+                </Link>
+              </li>
+            ))}
+          </ul>
         </div>
       </nav>
     </header>

diff --git a/src/components/Hero.jsx b/src/components/Hero.jsx
@@ -1,45 +1,38 @@
 import Image from 'next/image';
 import Link from 'next/link';
-import { CONFERENCE, HERO_BANNER } from '@/details';
+import { CONFERENCE, HERO_BANNER, ASSETS } from '@/details';
 import Icon from '@/components/Icon';
 
 const Hero = () => {
   return (
-    <section className="px-4 py-8">
-      <div className="grid grid-cols-12 w-full">
-        <div className="place-self-center col-span-12 lg:col-span-7">
-          <h1 className="mb-4 text-3xl font-bold tracking-tight leading-none md:text-4xl lg:text-5xl">
-            {CONFERENCE.title}
-          </h1>
-          <p className="mb-6 text-gray-600 md:text-lg lg:text-1xl">
-            {CONFERENCE.announcement}
-          </p>
+    <section className="px-8 py-4 sm:py-8">
+      <div className="flex flex-col items-center">
+        {/*  For SEO */}
+        <h1 className="hidden">{CONFERENCE.title}</h1>
+        <Image
+          src={ASSETS.logoUrl}
+          alt={ASSETS.logoAlt}
+          priority={true}
+          width={600}
+          height={204.4}
+        />
+        <p className="my-6 text-gray-600 md:text-lg lg:text-1xl">
+          {CONFERENCE.announcement}
+        </p>
+        <div className="flex flex-col sm:flex-row">
           <Link href={HERO_BANNER.volunteerFormUrl} target="_blank">
-            <button className="inline-flex mt-1 items-center justify-center bg-accent-light-600 px-5 py-3 font-medium hover:bg-accent-light-700 text-center text-gray-50 border rounded-lg mr-4">
+            <button className="inline-flex mt-1 items-center justify-center bg-secondary-light-600 px-5 py-3 font-medium hover:bg-secondary-light-700 text-center text-gray-50 border rounded-lg mr-4">
               <Icon name="VolunteerActivism" size={20} />
               <span className="ml-2">BECOME A VOLUNTEER</span>
             </button>
           </Link>
           <Link href={HERO_BANNER.cfpUrl} target="_blank">
-            <button className="inline-flex mt-1 items-center justify-center bg-accent-light-600 px-5 py-3 font-medium hover:bg-accent-light-700 text-center text-gray-50 border rounded-lg">
+            <button className="inline-flex mt-1 items-center justify-center bg-primary-light-700 px-5 py-3 font-medium hover:bg-primary-light-800 text-center text-gray-50 border rounded-lg">
               <Icon name="MdCampaign" size={20} />
               <span className="ml-2">SUBMIT YOUR PROPOSAL</span>
             </button>
           </Link>
         </div>
-        <div className="col-span-12 lg:col-span-5 mt-4 lg:mt-0">
-          <Image
-            src={HERO_BANNER.imageUrl}
-            alt={HERO_BANNER.imageAlt}
-            priority={true}
-            width={1920}
-            height={1280}
-            style={{
-              maxWidth: '100%',
-              height: 'auto',
-            }}
-          />
-        </div>
       </div>
     </section>
   );

diff --git a/src/components/Icon.jsx b/src/components/Icon.jsx
@@ -4,11 +4,13 @@ import {
   FaInstagram,
   FaLinkedin,
   FaXTwitter,
+  FaEnvelope,
 } from 'react-icons/fa6';
 import { GiHamburgerMenu } from 'react-icons/gi';
 import { MdVolunteerActivism, MdCampaign } from 'react-icons/md';
 
 const icons = {
+  Envelope: FaEnvelope,
   Facebook: FaFacebook,
   GitHub: FaGithub,
   Instagram: FaInstagram,

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -9,33 +9,33 @@ module.exports = {
         // The main brand color that defines the website’s identity. Headers, logos, and active navigation links.
         primary: {
           light: {
-            50: '#eff6ff',
-            100: '#dbeafe',
-            200: '#bfdbfe',
-            300: '#93c5fd',
-            400: '#60a5fa',
-            500: '#3b82f6',
-            600: '#2563eb',
-            700: '#1d4ed8',
-            800: '#1e40af',
-            900: '#1e3a8a',
-            950: '#172554',
+            50: '#ffefdc',
+            100: '#ffdbba',
+            200: '#ffc797',
+            300: '#ffb274',
+            400: '#ff9e51',
+            500: '#fa8624', // Base color
+            600: '#c56a1c',
+            700: '#904e15',
+            800: '#5b310d',
+            900: '#261906',
+            950: '#120b03',
           },
         },
         // Complements the primary color and provides contrast. Buttons, section backgrounds, and icons for variation.
         secondary: {
           light: {
-            50: '#f0fdfa',
-            100: '#ccfbf1',
-            200: '#99f6e4',
-            300: '#5eead4',
-            400: '#2dd4bf',
-            500: '#14b8a6',
-            600: '#0d9488',
-            700: '#0f766e',
-            800: '#115e59',
-            900: '#134e4a',
-            950: '#042f2e',
+            50: '#d9fffe',
+            100: '#b3eeed',
+            200: '#8de3e2',
+            300: '#67d9d8',
+            400: '#40cecd',
+            500: '#018b87', // Base color
+            600: '#016e6b',
+            700: '#01514f',
+            800: '#013433',
+            900: '#001817',
+            950: '#000c0c',
           },
         },
         // Draws immediate attention to important elements. Call-to-action (CTA) buttons, alerts, or promotional banners.