Add partner section (#210)

components/header.js

@@ -30,6 +30,18 @@ const navBarItems = [
         id: "attend",
         openInNewTab: false,
       },
+      {
+        name: "Community Partners",
+        href: "/#community-partners",
+        id: "community-partners",
+        openInNewTab: false,
+      },
+      {
+        name: "Partners",
+        href: "/#partners",
+        id: "partners",
+        openInNewTab: false,
+      },
     ],
   },
   {
@@ -44,12 +56,6 @@ const navBarItems = [
     id: "sponsors",
     openInNewTab: false,
   },
-  {
-    name: "Community Partners",
-    href: "/#community-partners",
-    id: "community-partners",
-    openInNewTab: false,
-  },
   {
     name: "Speakers",
     href: "/speakers",

components/partners.js

@@ -0,0 +1,28 @@
+import Link from "next/link";
+import PartnersData from "data/partners.yml";
+
+const Partners = () => {
+  return (
+    <section className="home-section" id="partners">
+      <div className="container pt-5 pb-5">
+        <div className="row align-items-center">
+          <h2 className="col-auto com-head" data-aos="fade-down" data-aos-duration="1000">Partners</h2>
+        </div>
+        <div className="row justify-content-center mt-3 py-5">
+          {PartnersData.map((partner, index) => (
+            <div className="col-md-3 col-6 bt-circle my-2 text-center" key={index}>
+              <img
+                src={partner.logo}
+                className={`img-fluid partners-logo ${partner.paddingClass}`}
+                alt={partner.name}
+              />
+              <p className="pt-2">{partner.title}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section >
+  );
+};
+
+export default Partners;

data/partners.yml

@@ -0,0 +1,12 @@
+- name:  JNTU, Hyderabad
+  title: Academic Partner
+  logo: images/partners/jntu.png
+  paddingClass: p-1
+- name:  Black Buck
+  title: Academic Partner
+  logo: images/partners/black-buck.png
+  paddingClass: p-1
+- name: Phenom People
+  title: Venue Partner
+  logo: images/partners/phenom-people.png
+  paddingClass: p-0

pages/pycon-landing.tsx

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

styles/css/style.css

@@ -698,6 +698,14 @@ button a {
   background: #1b726f;
 }
 
+.partners-logo {
+  object-fit: contain;
+  object-position: center;
+  width: 100%;
+  height: 100%;
+  background-color: #eac141;
+}
+
 .community-partners-avatar {
   height: 40px;
   width: 40px;