Develop static speakers section and fix footer overlapping issue on 1440px breakpoint

app/home/templates/home/index.html

@@ -30,15 +30,15 @@
         <!-- Call For X -->
         {% include "home/sections/call-for-x.html" %}
         <!-- What is PyCon Section -->
-        {% comment%}{% include "home/sections/what-is-python-asia.html" %}
+        {% comment%}{% include "home/sections/what-is-python-asia.html" %}{% endcomment%}
+        <!-- Speakers Section -->
+        {% include "home/sections/speakers-section.html" %}
         <!-- Announcement Section -->
-    {% comment%}{% include "home/sections/announcement-section.html" %}{% endcomment%}
+        {% comment%}{% include "home/sections/announcement-section.html" %}{% endcomment%}
         <!-- When? Where? Section -->
         {% include "home/sections/when-where-section.html" %}
         <!-- Sponsors Section -->
-        {% comment %}
-          {% include "home/sections/sponsor-section.html" %}
-        {% endcomment %}
+        {% comment %}{% include "home/sections/sponsor-section.html" %}{% endcomment %}
         <!-- Code of Conduct Section -->
         {% include "home/sections/code-of-conduct.html" %}
         <!-- Footer Section -->

app/home/templates/home/sections/footer.html

@@ -39,8 +39,8 @@
     </p>
 
     <div class="relative w-full h-[800px] lg:h-[950px] lg:mt-[-20px] z-0">
-      <img src="{% static 'img/footer/pytonio.svg' %}" alt="Left Snake" class="absolute left-0 bottom-80 w-[670px] hidden lg:block">
-      <img src="{% static 'img/footer/pytria.svg' %}" alt="Right Snake" class="absolute right-0 bottom-80 w-[670px] hidden lg:block">
+      <img src="{% static 'img/footer/pytonio.svg' %}" alt="Left Snake" class="absolute left-0 mb-[-10px] bottom-72 2xl:bottom-80 w-[670px] hidden lg:block">
+      <img src="{% static 'img/footer/pytria.svg' %}" alt="Right Snake" class="absolute right-0 mb-[-10px] bottom-72 2xl:bottom-80 w-[670px] hidden lg:block">
       <img src="{% static 'img/footer/pot.svg' %}" alt="Pot" class="absolute bottom-80 left-1/2 lg:ml-[-70px] -translate-x-1/2 w-[500px] lg:w-[574.49px] z-10">
       <img src="{% static 'img/footer/base.svg' %}" alt="Bottom Base" class="absolute bottom-0 left-0 right-0 lg:w-full z-0 hidden lg:block">
 

app/home/templates/home/sections/speakers-section.html

@@ -1,20 +1,167 @@
 {% load static %}
 
-<section id="speakers" class="bg-white">
-  <div class="flex flex-col gap-10">
-    <div class="w-full max-w-[1160px] mx-auto px-6 flex flex-col gap-8 py-20">
+<section id="speakers" class="bg-white px-[4%]">
+  <div class="flex flex-col gap-10 w-full max-w-[1160px] mx-auto">
+    <div class="px-6 flex flex-col gap-8 py-20">
       <h2 class="font-td_pinoy text-6xl text-orange-2 text-center m-0">Keynote Speakers</h2>
-      <p class="font-bantayog text-[28px] leading-[130%] text-uppercase text-brown-1 text-center">Discover our keynote speakers for PyCon Philippines 2025</p>
+      <p class="text-4xl font-bold mb-0 font-bantayog text-brown-1 uppercase text-center">Discover our keynote speakers
+        for PyCon Philippines 2025</p>
     </div>
-    <div class="speakers-wrapper">
-      <div class="rounded-[24px] bg-cream-1 flex gap-10" style="padding: 30px;">
-        <div class="overflow-hidden grow">
-          <img src="{% static 'img/speakers/speakers-img-1.jpg' %}" alt="'' style="border-radius: 70px; object-fit: cover;">
+    <div class="keynote-speakers-wrapper flex justify-center items-center gap-[30px] flex-wrap">
+      <div class="rounded-[24px] bg-cream-1 flex flex-col sm:flex-row gap-10 w-full max-w-[100%] lg:max-w-[48%] grow items-center"
+        style="padding: 30px;">
+        <div class="overflow-hidden flex-shrink-0 w-[230px]">
+          <img src="{% static 'img/speakers/speakers-img-1.jpg' %}" class="w-full object-cover rounded-[85px]"
+            alt="JC Peralta - Image">
         </div>
         <div>
           <h3 class="font-bantayog text-brown-1 text-2xl">JC PERALTA</h3>
-          <p class="font-nunito text-brown-2 font-semibold">Insert Title</p>
-          <p class="font-nunito text-brown-2">JC Peralta is a data scientist, Geospatial Machine Learning Consultant, and Climate Scientist. He earned his Master's in Atmospheric Science from Ateneo de Manila University in 2019 and has worked on projects in climate science, disaster management, renewable energy, and climate action.</p>
+          <p class="font-nunito text-brown-2 font-semibold text-sm mb-2">Insert Title</p>
+          <p class="font-nunito text-brown-2 text-[13px]">JC Peralta is a data scientist, Geospatial Machine Learning
+            Consultant, and Climate Scientist. He earned his Master's in Atmospheric Science from Ateneo de Manila
+            University in 2019 and has worked on projects in climate science, disaster management, renewable energy, and
+            climate action.</p>
+        </div>
+      </div>
+      <div class="rounded-[24px] bg-cream-2 flex flex-col sm:flex-row gap-10 w-full max-w-[100%] lg:max-w-[48%] grow items-center"
+        style="padding: 30px;">
+        <div class="overflow-hidden flex-shrink-0 w-[230px]">
+          <img src="{% static 'img/speakers/speakers-img-2.jpg' %}" class="w-full object-cover rounded-[85px]"
+            alt="Michael Kennedy - Image">
+        </div>
+        <div>
+          <h3 class="font-bantayog text-brown-1 text-2xl uppercase">Michael Kennedy</h3>
+          <p class="font-nunito text-brown-2 font-semibold text-sm mb-2">Insert Title</p>
+          <p class="font-nunito text-brown-2 text-[13px]">Michael Kennedy is a Python Software Foundation Fellow,
+            entrepreneur, and host of the Talk Python To Me and Python Bytes podcasts. He founded Talk Python Training,
+            offering 250+ hours of online courses for developers and data scientists. He is based in Portland, OR.</p>
+        </div>
+      </div>
+      <div class="rounded-[24px] bg-cream-3 flex flex-col sm:flex-row gap-10 w-full max-w-[100%] lg:max-w-[48%] grow items-center"
+        style="padding: 30px;">
+        <div class="overflow-hidden flex-shrink-0 w-[230px]">
+          <img src="{% static 'img/speakers/speakers-img-3.jpg' %}" class="w-full object-cover rounded-[85px]"
+            alt="Matt Harrison - Image">
+        </div>
+        <div>
+          <h3 class="font-bantayog text-brown-1 text-2xl">Matt Harrison</h3>
+          <p class="font-nunito text-brown-2 font-semibold text-sm mb-2">Insert Title</p>
+          <p class="font-nunito text-brown-2 text-[13px]">Matt Harrison is a Stanford-educated CS expert and bestselling
+            author of Effective XGBoost and Effective Pandas. With 20+ years of Python experience, he has taught
+            professionals at companies like Netflix and NASA and impacted thousands through live and online courses.</p>
+        </div>
+      </div>
+      <div class="rounded-[24px] bg-cream-1 flex flex-col sm:flex-row gap-10 w-full max-w-[100%] lg:max-w-[48%] grow items-center"
+        style="padding: 30px;">
+        <div class="overflow-hidden flex-shrink-0 w-[230px]">
+          <img src="{% static 'img/speakers/speakers-img-4.jpg' %}" class="w-full object-cover rounded-[85px]"
+            alt="Reina Reyes - Image">
+        </div>
+        <div>
+          <h3 class="font-bantayog text-brown-1 text-2xl">Reina Reyes</h3>
+          <p class="font-nunito text-brown-2 font-semibold text-sm mb-2">Insert Title</p>
+          <p class="font-nunito text-brown-2 text-[13px]">Reinabelle "Reina" Reyes, Ph.D., is an Associate Professor at
+            UP Diliman's National Institute of Physics, where she leads the Data and Computation Research Group. She
+            consults for Z-Lift Solutions and WeSolve Foundation and received the 2023 NAST Outstanding Young Scientist
+            Award.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="flex flex-col gap-10 w-full max-w-[1160px] mx-auto mt-[120px] pb-[90px]">
+    <div class="px-6 flex flex-col gap-8">
+      <h2 class="font-td_pinoy text-6xl text-orange-2 text-center m-0">Speakers</h2>
+      <p class="text-4xl font-bold mb-0 font-bantayog text-brown-1 uppercase text-center">Discover our speakers for
+        PyCon Philippines 2024</p>
+    </div>
+    <div class="speakers-wrapper flex items-center gap-[30px] flex-row flex-wrap justify-between">
+      <div class="rounded-[24px] flex flex-col gap-5 w-full max-w-[100%] lg:max-w-[250px] grow items-center">
+        <div class="overflow-hidden flex-shrink-0 w-[250px]">
+          <img src="{% static 'img/speakers/speakers-img-1.jpg' %}" class="w-full object-cover rounded-[85px]"
+            alt="JC Peralta - Image">
+        </div>
+        <div>
+          <h3 class="font-bantayog text-brown-1 text-2xl uppercase">Athena Aliafe Abe</h3>
+          <p class="font-nunito text-brown-2 text-[13px]">Limit to 5 times only.</p>
+          <p class="font-nunito text-brown-2 text-[13px]">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Pellentesque sit amet. Pellentesque sit amet.</p>
+        </div>
+      </div>
+      <div class="rounded-[24px] flex flex-col gap-5 w-full max-w-[100%] lg:max-w-[250px] grow items-center">
+        <div class="overflow-hidden flex-shrink-0 w-[250px]">
+          <img src="{% static 'img/speakers/speakers-img-2.jpg' %}" class="w-full object-cover rounded-[85px]"
+            alt="JC Peralta - Image">
+        </div>
+        <div>
+          <h3 class="font-bantayog text-brown-1 text-2xl uppercase">Swastik Anupam</h3>
+          <p class="font-nunito text-brown-2 text-[13px]">Limit to 5 times only.</p>
+          <p class="font-nunito text-brown-2 text-[13px]">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Pellentesque sit amet. Pellentesque sit amet.</p>
+        </div>
+      </div>
+      <div class="rounded-[24px] flex flex-col gap-5 w-full max-w-[100%] lg:max-w-[250px] grow items-center">
+        <div class="overflow-hidden flex-shrink-0 w-[250px]">
+          <img src="{% static 'img/speakers/speakers-img-3.jpg' %}" class="w-full object-cover rounded-[85px]"
+            alt="JC Peralta - Image">
+        </div>
+        <div>
+          <h3 class="font-bantayog text-brown-1 text-2xl uppercase">Neil Riego</h3>
+          <p class="font-nunito text-brown-2 text-[13px]">Limit to 5 times only.</p>
+          <p class="font-nunito text-brown-2 text-[13px]">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Pellentesque sit amet. Pellentesque sit amet.</p>
+        </div>
+      </div>
+      <div class="rounded-[24px] flex flex-col gap-5 w-full max-w-[100%] lg:max-w-[250px] grow items-center">
+        <div class="overflow-hidden flex-shrink-0 w-[250px]">
+          <img src="{% static 'img/speakers/speakers-img-4.jpg' %}" class="w-full object-cover rounded-[85px]"
+            alt="JC Peralta - Image">
+        </div>
+        <div>
+          <h3 class="font-bantayog text-brown-1 text-2xl uppercase">Ian Panganiban</h3>
+          <p class="font-nunito text-brown-2 text-[13px]">Limit to 5 times only.</p>
+          <p class="font-nunito text-brown-2 text-[13px]">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Pellentesque sit amet. Pellentesque sit amet.</p>
+        </div>
+      </div>
+      <div class="rounded-[24px] flex flex-col gap-5 w-full max-w-[100%] lg:max-w-[250px] grow items-center">
+        <div class="overflow-hidden flex-shrink-0 w-[250px]">
+          <img src="{% static 'img/speakers/speakers-img-1.jpg' %}" class="w-full object-cover rounded-[85px]"
+            alt="JC Peralta - Image">
+        </div>
+        <div>
+          <h3 class="font-bantayog text-brown-1 text-2xl uppercase">Athena Aliafe Abe</h3>
+          <p class="font-nunito text-brown-2 text-[13px]">Limit to 5 times only.</p>
+          <p class="font-nunito text-brown-2 text-[13px]">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Pellentesque sit amet. Pellentesque sit amet.</p>
+        </div>
+      </div>
+      <div class="rounded-[24px] flex flex-col gap-5 w-full max-w-[100%] lg:max-w-[250px] grow items-center">
+        <div class="overflow-hidden flex-shrink-0 w-[250px]">
+          <img src="{% static 'img/speakers/speakers-img-2.jpg' %}" class="w-full object-cover rounded-[85px]"
+            alt="JC Peralta - Image">
+        </div>
+        <div>
+          <h3 class="font-bantayog text-brown-1 text-2xl uppercase">Fidel Ivan Racines</h3>
+          <p class="font-nunito text-brown-2 text-[13px]">Limit to 5 times only.</p>
+          <p class="font-nunito text-brown-2 text-[13px]">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Pellentesque sit amet. Pellentesque sit amet.</p>
+        </div>
+      </div>
+      <div class="rounded-[24px] flex flex-col gap-5 w-full max-w-[100%] lg:max-w-[250px] grow items-center">
+        <div class="overflow-hidden flex-shrink-0 w-[250px]">
+          <img src="{% static 'img/speakers/speakers-img-3.jpg' %}" class="w-full object-cover rounded-[85px]"
+            alt="JC Peralta - Image">
+        </div>
+        <div>
+          <h3 class="font-bantayog text-brown-1 text-2xl uppercase">Albert Yumol</h3>
+          <p class="font-nunito text-brown-2 text-[13px]">Limit to 5 times only.</p>
+          <p class="font-nunito text-brown-2 text-[13px]">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Pellentesque sit amet. Pellentesque sit amet.</p>
+        </div>
+      </div>
+      <div class="rounded-[24px] flex flex-col gap-5 w-full max-w-[100%] lg:max-w-[250px] grow items-center">
+        <div class="overflow-hidden flex-shrink-0 w-[250px]">
+          <img src="{% static 'img/speakers/speakers-img-4.jpg' %}" class="w-full object-cover rounded-[85px]"
+            alt="JC Peralta - Image">
+        </div>
+        <div>
+          <h3 class="font-bantayog text-brown-1 text-2xl uppercase">Yoshi Yamaguchi</h3>
+          <p class="font-nunito text-brown-2 text-[13px]">Limit to 5 times only.</p>
+          <p class="font-nunito text-brown-2 text-[13px]">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Pellentesque sit amet. Pellentesque sit amet.</p>
         </div>
       </div>
     </div>

src/styles/main.css

@@ -30,7 +30,7 @@
   --bg-cream-3: #f8f0e5;
 
   /* === Stroke / Borders === */
-  --stroke-1: #c9ac8a;
+  --stroke-1: #212121;
 }
 
 @font-face {