pythonph · iRenanMatthew · Oct 27, 2025 · Oct 27, 2025
diff --git a/app/home/templates/home/index.html b/app/home/templates/home/index.html
@@ -6,30 +6,43 @@
        <!-- Navbar -->
         {% include "home/components/navbar.html" %}
        <main>
-            <section id="hero" class="text-white text-center flex items-center pt-[170px]">
-                <div class="container mx-auto px-6 bg-cover w-[960px] hero-content">
-                    <div class="flex flex-col items-center space-y-8">
+            <section id="hero" class="text-white text-center flex">
+                <div class="container mx-auto w-full max-w-[730px] pt-[140px] pb-[120px]">
+                    <div class="flex flex-col justify-center space-y-8">
                        <img src="{% static 'img/vectors/kalinga-baybayin.svg' %}"
                             alt="kliN"
-                             class="w-[189px] h-auto">
+                             class="w-full max-w-[189px] h-auto mx-auto">
                        <img src="{% static 'img/kalinga.png' %}"
                             alt="Kalinga"
-                             class="w-[336.34px] h-auto">
+                             class="w-full max-w-[336.34px] h-auto mx-auto">
                        <img src="{% static 'img/vectors/python-asia-branding.png' %}"
                             alt="PythonAsia 2026"
-                             class="w-[635px] h-auto">
+                             class="w-full max-w-[635px] h-auto mx-auto">
                        <div class="text-center text-[#7C5E3B] z-30">
                            Nurturing a community of care, compassion, and growth.
                            <br />
                            The same heart of PyCon APAC, now as PythonAsia.
                        </div>
+
+                        <div class="python-kalinga-pot">
+                            <img class="pot" src="{% static 'img/py_kalinga-pot.svg' %}" alt="Kalinga pot">
+                            <div class="justify-self-end self-center">
+                                <h2 class="font-bantayog text-[28px] text-white">Co-organized By</h2>
+                                <div class="flex flex-row items-center justify-center gap-[45px] co-organized">
+                                    <img src="{% static 'img/footer/pythonph.svg' %}" alt="PythonPH" class="w-full max-w-[210px]">
+                                    <img src="{% static 'img/footer/pythonasia.svg' %}" alt="Python Asia Organization" class="w-full max-w-[320px]">
+                                    <img src="{% static 'img/footer/dlsu.svg' %}" alt="DLSU" class="w-full max-w-[110px]">
+                                </div>
+                            </div>
+                        </div>
                    </div>
                </div>
            </section>
-            <img src="{% static 'img/vectors/footer.png' %}" class="w-full block xl:mt-[-10em] xl:mb-[-7em]">
+
        </main>
-        <!-- Section Break -->
-        <div class="w-full py-0 my-0 z-10 -mb-25 hidden xl:block cstm_break">
+        <!-- When? Where? Section -->
+        {% include "home/sections/when-where-section.html" %}
+        <div class="w-full py-0 my-0 z-10 -mb-25 hidden xl:block cstm_break mt-[-9vw]">
            <img src="{% static 'img/vectors/section-break-1.svg' %}"
                 alt="Section Break"
                 class="w-full block">
@@ -46,12 +59,12 @@
        {% include "home/sections/conference-at-a-glance.html" %}
        <!-- Why Python Section -->
        {% include "home/sections/why-python.html" %}
+        <!-- Call For X -->
+        {% include "home/sections/call-for-x.html" %}
        <!-- What is PyCon Section -->
        {% comment%}{% include "home/sections/what-is-python-asia.html" %}{% endcomment%}
        <!-- Announcement Section -->
        {% include "home/sections/announcement-section.html" %}
-        <!-- When? Where? Section -->
-        {% include "home/sections/when-where-section.html" %}
        <!-- Sponsors Section -->
        {% comment %}
          {% include "home/sections/sponsor-section.html" %}

diff --git a/app/home/templates/home/sections/about-us.html b/app/home/templates/home/sections/about-us.html
@@ -83,7 +83,7 @@ <h4 class="text-xl font-bold uppercase mb-3 font-bantayog">Multi-Track & Live Wo
                </div>
                <h4 class="text-xl font-bold uppercase mb-3 font-bantayog">Community Gatherings</h4>
                <p class="text-sm font-nunito w-full max-w-[305px]">
-                    Join special sessions like the PyLadies Lunch, Open Spaces, and Group Lunch—designed to spark conversations and build connections.
+                    Join special sessions like the PyLadies Lunch, and Open Spaces — designed to spark conversations and build connections.
                </p>
            </div>
            <!-- Career Mixer -->

diff --git a/app/home/templates/home/sections/call-for-x.html b/app/home/templates/home/sections/call-for-x.html
@@ -0,0 +1,36 @@
+{% load static %}
+<section id="call-for-x" class="py-20 bg-[url('{% static 'img/call-for-links.png' %}')] bg-contain bg-center">
+    <div class="container mx-auto px-6">
+        <!-- Header -->
+        <div class="text-center mb-16">
+            <h2 class="text-5xl md:text-6xl font-bold mb-12 font-td_pinoy"
+                style="color: #D87A3F">Get Involved</h2>
+                        <p class="text-lg font-nunito text-uppercase text-brown-2">
+          Magic happens when people come together to achieve common goals.
+        </p>
+        </div>
+        <div class="flex flex-col sm:flex-row md:items-stretch md:justify-center items-center gap-8 mb-20 max-w-5xl mx-auto">
+
+            <div class="p-8 rounded-2xl w-full max-w-[300px] bg-offwhite-2 border-t-[8px] border-t-[#F26D1D]  h-[250px]">
+                <div class="mb-6">
+                    <h3 class="text-2xl font-bold mb-0 font-bantayog text-brown-1">CALL FOR PROPOSALS</h3>
+                </div>
+                <div class="space-y-3">
+                    <a class="text-lg font-bold mb-2 font-bantayog text-brown-2" href="https://pretalx.com/python-asia-2026/" target="_blank">pretalx.com/python-asia-2026/</a>
+                </div>
+            </div>
+            <div class="p-8 rounded-2xl w-full max-w-[300px] bg-offwhite-2 border-t-[8px] border-t-[#ffa218] h-[250px]">
+                <div class="mb-6">
+                    <h3 class="text-2xl font-bold mb-0 font-bantayog text-brown-1">CALL FOR SPONSORS</h3>
+                </div>
+                <div class="space-y-3">
+                    <a class="text-lg font-bold mb-2 font-bantayog text-brown-2" href="https://docs.google.com/forms/d/e/1FAIpQLSd9yOxboIXUv4_nUnzeywojCjEagSfCFKs1D2-onUU4fjzl9g/viewform" target="_blank">bit.ly/PythonAsia2026-CallForSponsors</a>
+                </div>
+            </div>
+        </div>
+
+        {% comment %}
+          {% include "home/sections/tickets-section.html" %}
+        {% endcomment %}
+    </div>
+</section>
diff --git a/app/home/templates/home/sections/conference-at-a-glance.html b/app/home/templates/home/sections/conference-at-a-glance.html
@@ -38,11 +38,11 @@ <h4 class="text-2xl font-bold mb-0 font-bantayog text-brown-1">SATURDAY-SUNDAY</
                    </div>
                    <div class="flex items-center space-x-3 font-nunito">
                        <img src="{% static 'img/vectors/icon-checkbox-brown-2.svg' %}" alt="Checkbox Icon">
-                        <span class="font-nunito text-lg text-brown-2">Group Lunch</span>
+                        <span class="font-nunito text-lg text-brown-2">Career Mixer</span>
                    </div>
                    <div class="flex items-center space-x-3 font-nunito">
                        <img src="{% static 'img/vectors/icon-checkbox-brown-2.svg' %}" alt="Checkbox Icon">
-                        <span class="font-nunito text-lg text-brown-2">Career Mixer</span>
+                        <span class="font-nunito text-lg text-brown-2">Poster Session</span>
                    </div>
                </div>
            </div>

diff --git a/app/home/templates/home/sections/when-where-section.html b/app/home/templates/home/sections/when-where-section.html
@@ -1,6 +1,6 @@
 {% load static %}
 <section id="when-where"
-         class="py-20 bg-[url('/static/img/when-where-bg.jpg')] bg-cover bg-center">
+         class="pt-[80px] pb-[80px] bg-[url('/static/img/when-where-bg.jpg')] bg-cover bg-center">
  <div class="w-full max-w-[1160px] mx-auto px-6 flex flex-col gap-10">
    <div class="flex justify-between items-center">
      <div class="">

diff --git a/src/styles/main.css b/src/styles/main.css
@@ -4,15 +4,6 @@

 @plugin "daisyui";

-body {
-  background-color: #fff9f2;
-  color: #7c5e3b;
-  font-size: 24px;
-}
-
-.test {
-  padding: 500px;
-}

 :root {
  --color-primary: #f26d1d;
@@ -77,6 +68,12 @@ body {
  font-display: swap;
 }

+body {
+  background-color: var(--offwhite-1);
+  color: var(--brown-2);
+  font-size: 24px;
+}
+
 .font-bantayog {
  font-family: "Bantayog", sans-serif;
 }
@@ -160,6 +157,31 @@ body {
  color: var(--brown-1);
 }

+/* START: Custom CSS Here */
+
+#hero {
+    background: url("../../static/img/python-asia-bg.png") bottom / 100% no-repeat;
+    height: 1561px;
+}
+
+.python-kalinga-pot{
+  width: 100%;
+  max-width: 730px;
+  margin-left: auto;
+  margin-right: auto;
+  transform: translateY(-15vh);
+}
+
+.python-kalinga-pot .pot{
+  width: 100%;
+  max-width: 580px;
+  margin-left: auto;
+  margin-right: auto;
+  transform: translateX(-3.5vw);
+  margin-bottom: 45px;
+}
+
+/* Media Query */

 @media screen and (max-width: 1570px){
  .cstm_break.about-us_break{
@@ -178,3 +200,78 @@ body {
    padding: 250px 0 80px;
  }
 }
+
+@media screen and (max-width: 1100px){
+  .python-kalinga-pot .pot{
+    width: 100%;
+    max-width: 400px;
+    transform: translateX(-3.5vw);
+    margin-bottom: 45px;
+  }
+
+    #hero {
+      height: 150vh;
+  }
+
+  .python-kalinga-pot {
+    transform: translateY(-8vh);
+  }
+}
+
+@media screen and (max-width: 768px){
+  .python-kalinga-pot .pot{
+    width: 100%;
+    max-width: 280px;
+    transform: translateX(-3.5vw);
+    margin-bottom: 20px;
+  }
+
+    #hero {
+      height: 140vh;
+  }
+
+  .python-kalinga-pot {
+    transform: translateY(-5vh);
+  }
+}
+
+@media screen and (max-width: 768px){
+  .python-kalinga-pot .pot{
+    width: 100%;
+    max-width: 280px;
+    transform: translateX(-3.5vw);
+    margin-bottom: 20px;
+  }
+
+    #hero {
+      height: 145vh;
+      padding-inline: 4%;
+  }
+
+  .python-kalinga-pot {
+    transform: translateY(-5vh);
+  }
+
+
+  .python-kalinga-pot .co-organized{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+  }
+
+  .python-kalinga-pot .co-organized img{
+    width: 100%;
+    max-height: 50px !important;
+  }
+
+  #hero{
+    background-size: cover;
+    background-position: center;
+  }
+
+  .python-kalinga-pot .justify-self-end.self-center{
+    justify-self: unset;
+  }
+}
diff --git a/static/css/app.css b/static/css/app.css
diff --git a/static/img/call-for-links.png b/static/img/call-for-links.png
diff --git a/static/img/cstm_section-break.png b/static/img/cstm_section-break.png