add local user groups and chapters (#214)

components/header.js

@@ -42,6 +42,12 @@ const navBarItems = [
         id: "partners",
         openInNewTab: false,
       },
+      {
+        name: "Local User Groups & Chapters",
+        href: "/#local-user-groups-chapters",
+        id: "local-user-groups-chapters",
+        openInNewTab: false,
+      }
     ],
   },
   {

components/localUserGroups.js

@@ -0,0 +1,29 @@
+import Link from "next/link";
+import localUserGroupsChaptersData from "data/localUserGroupsChapters.yml";
+
+
+const LocalUserGroupsChapters = () => {
+  return (
+    <section className="bg-local-groups home-section" id="local-user-groups-chapters">
+      <div className="container pt-5 pb-5">
+        <div className="row">
+          <h2 className="com-head text-white" data-aos="fade-down" data-aos-duration="1000">Local User Groups & Chapters</h2>
+        </div>
+        <div className="row justify-content-center mt-3 py-5">
+          {localUserGroupsChaptersData.map((partner, index) => (
+            <div className="col-md-3 col-6 bt-circle my-3" key={index}>
+              <Link href={partner.website} target="_blank">
+                <img
+                  src={partner.logo}
+                  className={`img-fluid local-group-logo ${partner.paddingClass}`}
+                  alt={partner.name} />
+              </Link>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section >
+  );
+};
+
+export default LocalUserGroupsChapters;

components/partners.js

@@ -5,9 +5,9 @@ const Partners = () => {
   return (
     <section className="home-section" id="partners">
       <div className="container pt-5 pb-5">
-        <div className="row align-items-center">
+        <div className="row">
           <h2
-            className="col-auto com-head"
+            className="com-head"
             data-aos="fade-down"
             data-aos-duration="1000"
           >

data/localUserGroupsChapters.yml

@@ -0,0 +1,16 @@
+- name: PythonPune
+  logo: images/local-user-groups-chapters/python-pune.png
+  website: https://pythonpune.in/
+  paddingClass: p-0
+- name: BangPypers
+  logo: images/local-user-groups-chapters/bang-pypers.png
+  website: https://bangalore.pythonindia.org/
+  paddingClass: p-0
+- name: HydPy
+  logo: images/local-user-groups-chapters/hyd-py.png
+  website: https://www.hydpy.org/
+  paddingClass: p-0
+- name: ChennaiPy
+  logo: images/local-user-groups-chapters/chennai-py.png
+  website: http://chennaipy.org/
+  paddingClass: p-0

pages/pycon-landing.tsx

@@ -9,6 +9,7 @@ import SubscribeSection from "../components/subscribe";
 import RegistrationSection from "../components/registration";
 import ConferenceSchedule from "../components/schedule";
 import Partners from "components/partners";
+import LocalUserGroupsChapters from "components/localUserGroups";
 
 export default function PyConIndiaWeb() {
   return (
@@ -21,6 +22,7 @@ export default function PyConIndiaWeb() {
       <SponsorComponent />
       <CommunityPartners />
       <Partners/>
+      <LocalUserGroupsChapters />
       {/* <section className="bg-latest">
       <div className="container">
         <div className="row pt-5 pb-5">

styles/css/style.css

@@ -690,6 +690,14 @@ button a {
   background-color: #f2eee2;
 }
 
+.local-group-logo {
+  object-fit: contain;
+  object-position: center;
+  width: 100%;
+  height: 100%;
+  background-color: #f2eee2;
+}
+
 .sp-sor {
   border-bottom: 2px solid #1f928d !important;
 }
@@ -698,6 +706,10 @@ button a {
   background: #1b726f;
 }
 
+.bg-local-groups {
+  background: #1b726f;
+}
+
 .partners-logo {
   object-fit: contain;
   object-position: center;