sponsers

src/assets/data/sponsersData.js

@@ -0,0 +1,56 @@
+import sponser1 from "../images/file10.png";
+import sponser2 from "../images/file11.png";
+import sponser3 from "../images/file12.png";
+import sponser4 from "../images/file13.png";
+import sponser5 from "../images/file14.png";
+import sponser6 from "../images/file15.png";
+import sponser7 from "../images/file16.png";
+
+const platinum = [
+  {
+    img: sponser1,
+  },
+  {
+    img: sponser2,
+  },
+  {
+    img: sponser3,
+  },
+  {
+    img: sponser2,
+  },
+  {
+    img: sponser3,
+  }, //repeated to show wrapping 
+];
+
+const gold = [
+  {
+    img: sponser4,
+  },
+];
+
+const silver = [
+  {
+    img: sponser5,
+  },
+  {
+    img: sponser6,
+  },
+  {
+    img: sponser7,
+  },
+  {
+    img: sponser6,
+  },
+  {
+    img: sponser7,
+  },
+  {
+    img: sponser5,
+  }, // repeated to show wrapping
+];
+
+const sponsers = { platinum, gold, silver };
+
+export default sponsers;

src/components/navbar/Navbar.js

@@ -19,12 +19,12 @@ export default class Navbar extends Component {
             <a href='#events'><div className='codeutsava__navbar-menu-heading'>
                     Events
                 </div></a>
-            <div className='codeutsava__navbar-menu-heading'>
-                    Sponsors
-            </div>
             <a href='#speakers'><div className='codeutsava__navbar-menu-heading'>
                     Speakers
                 </div></a>
+            <a href='#sponsers'><div className='codeutsava__navbar-menu-heading'>
+                    Sponsors
+                </div></a>
                 <div className='codeutsava__navbar-menu-heading'>
                     Team
                 </div>

src/pages/home/HomePage.js

@@ -6,6 +6,7 @@ import Section1 from '../../sections/section1/Section1';
 import Section2 from '../../sections/section2/Section2';
 import Section3 from '../../sections/section3/Section3';
 import Section4 from '../../sections/section4/Section4';
+import Section5 from '../../sections/section5/Section5';
 export default class HomePage extends Component {
   render() {
     return (
@@ -15,6 +16,7 @@ export default class HomePage extends Component {
         <Section2/>
         <Section3/>
         <Section4/>
+        <Section5/>
       </div>
     )
   }

src/sections/section5/Section5.css

@@ -0,0 +1,86 @@
+.codeutsava__section5 {
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+  font-family: "Poppins";
+  color: white;
+}
+
+.codeutsava__section5-body {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+.codeutsava__section5-title {
+  font-style: normal;
+  font-weight: 600;
+  font-size: 48px;
+  line-height: 82px;
+  text-align: center;
+  letter-spacing: 1px;
+  margin-bottom: 2rem;
+  margin-top: 2rem;
+  color: white;
+}
+
+.codeutsava__section5-content {
+  font-style: normal;
+  font-size: 24px;
+  width: 85%;
+  line-height: 36px;
+  text-align: center;
+  letter-spacing: -1px;
+}
+
+.codeutsava__section5-sponsers {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  margin: 4rem 0;
+  gap: 4rem;
+}
+
+.codeutsava__section5-sponser-title {
+  font-style: normal;
+  font-size: 32px;
+  line-height: 44px;
+  text-align: center;
+}
+
+.codeutsava__section5-sponser-platnium {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  border: 1px solid #e5e4e2;
+  padding: 2rem;
+  box-shadow: 0px 20px 50px rgba(18, 17, 39, 0.08);
+  border-radius: 20px;
+  gap: 3rem;
+}
+
+.codeutsava__section5-sponser-gold {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  border: 1px solid #FFD700;
+  padding: 2rem;
+  box-shadow: 0px 20px 50px rgba(18, 17, 39, 0.08);
+  border-radius: 20px;
+  gap: 3rem;
+}
+
+.codeutsava__section5-sponser-silver {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  align-items: center;
+  border: 1px solid #C0C0C0;
+  padding: 2rem;
+  box-shadow: 0px 20px 50px rgba(18, 17, 39, 0.08);
+  border-radius: 20px;
+  gap: 3rem;
+}

src/sections/section5/Section5.js

@@ -0,0 +1,47 @@
+import React from "react";
+
+import "./Section5.css";
+
+import sponsers from "../../assets/data/sponsersData.js";
+
+const Section5 = () => {
+  return (
+    <div className="codeutsava__section5" id="sponsers">
+      <div className="codeutsava__section5-body">
+        <div className="codeutsava__section5-title">Sponsers</div>
+        <div className="codeutsava__section5-content">
+          On behalf of team TCP, we would like to publicly thank the generous
+          sponsors without whom this event could not be held so smoothly.
+        </div>
+        <div className="codeutsava__section5-sponsers">
+          <div className="codeutsava__section5-sponser-title">
+            Platinum Sponsors
+          </div>
+          <div className="codeutsava__section5-sponser-platnium">
+            {sponsers.platinum.map((sponser, index) => (
+              <img src={sponser.img} />
+            ))}
+          </div>
+          <div className="codeutsava__section5-sponser-title">
+            Gold Sponsors
+          </div>
+          <div className="codeutsava__section5-sponser-gold">
+            {sponsers.gold.map((sponser, index) => (
+              <img src={sponser.img} />
+            ))}
+          </div>
+          <div className="codeutsava__section5-sponser-title">
+            Silver Sponsors
+          </div>
+          <div className="codeutsava__section5-sponser-silver">
+            {sponsers.silver.map((sponser, index) => (
+              <img src={sponser.img} />
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Section5;