Update and restructure hero section and UI cleanup and fix for homepage

app/home/templates/home/index.html

@@ -1,47 +1,15 @@
 {% extends "base.html" %}
 {% load static %}
 {% block content %}
+<main>
     <div class="min-h-screen"
          style="background-image: url('{% static 'img/background.png' %}')">
         <!-- Navbar -->
          {% include "home/components/navbar.html" %}
-        <main>
-            <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-full max-w-[189px] h-auto mx-auto">
-                        <img src="{% static 'img/kalinga.png' %}"
-                             alt="Kalinga"
-                             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-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>
+
+        <!-- Hero Section -->
+         {% include "home/sections/hero-section.html" %}
 
-                        <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>
-
-        </main>
-        <!-- 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"
@@ -62,9 +30,11 @@ <h2 class="font-bantayog text-[28px] text-white">Co-organized By</h2>
         <!-- Call For X -->
         {% include "home/sections/call-for-x.html" %}
         <!-- What is PyCon Section -->
-        {% comment%}{% include "home/sections/what-is-python-asia.html" %}{% endcomment%}
+        {% comment%}{% include "home/sections/what-is-python-asia.html" %}
         <!-- Announcement Section -->
-        {% include "home/sections/announcement-section.html" %}
+    {% 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" %}
@@ -74,4 +44,5 @@ <h2 class="font-bantayog text-[28px] text-white">Co-organized By</h2>
         <!-- Footer Section -->
         {% include "home/sections/footer.html" %}
     </div>
+</main>
 {% endblock %}

app/home/templates/home/sections/about-us.html

@@ -35,96 +35,96 @@ <h3 class="text-2xl font-bold mb-6 uppercase font-bantayog">
         </div>
         <!-- 3 Days Section -->
         <div class="mb-12 w-full max-w-[1160px] mx-auto">
-            <h3 class="text-5xl font-bold mb-8 font-td_pinoy">3 Days, Endless Possibilities</h3>
-            <p class="text-lg leading-relaxed font-nunito">
+            <h3 class="text-5xl font-bold mb-8 font-td_pinoy text-center sm:text-left xl:text-left">3 Days, Endless Possibilities</h3>
+            <p class="text-lg leading-relaxed font-nunito text-center sm:text-left xl:text-left">
                 Dive into three days of learning, building, and connecting with the Python community. From inspiring talks to hands-on sprints, PythonAsia is where ideas spark, skills grow, and collaborations begin. Whether you're a first-time attendee or a seasoned contributor, there's something here for everyone.
             </p>
         </div>
         <!-- Features Grid -->
         <div class="grid lg:grid-cols-3 md:grid-cols-3 sm:grid-cols-2 gap-10 mb-16 w-full max-w-[1160px] mx-auto">
             <!-- Inspiring Keynotes -->
-            <div>
+            <div class="flex flex-col items-center justify-center sm:items-start sm:justify-start xl:items-start xl:justify-start">
                 <div class="inline-block mb-2">
                     <img src="{% static 'img/vectors/star-icon.svg' %}"
                          alt="Inspiring Keynotes" />
                 </div>
                 <h4 class="text-xl font-bold uppercase mb-3 font-bantayog">Inspiring Keynotes</h4>
-                <p class="text-sm font-nunito w-full max-w-[305px]">
+                <p class="text-sm font-nunito w-full max-w-[305px] text-center sm:text-left xl:text-left text-center sm:text-left xl:text-left">
                     Hear inspiring talks from core contributors, community leaders, and innovators shaping Python across Asia and beyond
                 </p>
             </div>
             <!-- Talks & Lightning Talks -->
-            <div>
+            <div class="flex flex-col items-center justify-center sm:items-start sm:justify-start xl:items-start xl:justify-start">
                 <div class="inline-block mb-2">
                     <img src="{% static 'img/vectors/conversation-icon.svg' %}"
                          alt="Talks & Lightning Talks" />
                 </div>
                 <h4 class="text-xl font-bold uppercase mb-3 font-bantayog">Talks & Lightning Talks</h4>
-                <p class="text-sm font-nunito w-full max-w-[305px]">
+                <p class="text-sm font-nunito w-full max-w-[305px] text-center sm:text-left xl:text-left text-center sm:text-left xl:text-left">
                     From deep-dive sessions to quick, punchy insights, learn from diverse voices across the Python community.
                 </p>
             </div>
             <!-- Multi-Track & Live Workshops -->
-            <div>
+            <div class="flex flex-col items-center justify-center sm:items-start sm:justify-start xl:items-start xl:justify-start">
                 <div class="inline-block mb-2">
                     <img src="{% static 'img/vectors/icon-multitrack-and-live.svg' %}"
                          alt="Multi-Track & Live Workshops" />
                 </div>
                 <h4 class="text-xl font-bold uppercase mb-3 font-bantayog">Multi-Track & Live Workshops</h4>
-                <p class="text-sm font-nunito w-full max-w-[305px]">
+                <p class="text-sm font-nunito w-full max-w-[305px] text-center sm:text-left xl:text-left text-center sm:text-left xl:text-left">
                     Dive into AI/ML, Data Science, DevOps, Open Source, and region-specific use cases powering real-world impact.
                 </p>
             </div>
             <!-- Community Gatherings -->
-            <div>
+            <div class="flex flex-col items-center justify-center sm:items-start sm:justify-start xl:items-start xl:justify-start">
                 <div class="inline-block mb-2">
                     <img src="{% static 'img/vectors/icon-community-gatherings.svg' %}"
                          alt="Community Gatherings" />
                 </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]">
+                <p class="text-sm font-nunito w-full max-w-[305px] text-center sm:text-left xl:text-left text-center sm:text-left xl:text-left">
                     Join special sessions like the PyLadies Lunch, and Open Spaces — designed to spark conversations and build connections.
                 </p>
             </div>
             <!-- Career Mixer -->
-            <div>
+            <div class="flex flex-col items-center justify-center sm:items-start sm:justify-start xl:items-start xl:justify-start">
                 <div class="inline-block mb-2">
                     <img src="{% static 'img/vectors/icon-career-mixer.svg' %}" alt="Career Mixer" />
                 </div>
                 <h4 class="text-xl font-bold uppercase mb-3 font-bantayog">Career Mixer</h4>
-                <p class="text-sm font-nunito w-full max-w-[305px]">
+                <p class="text-sm font-nunito w-full max-w-[305px] text-center sm:text-left xl:text-left text-center sm:text-left xl:text-left">
                     Meet potential employers, collaborators, and mentors in a relaxed, networking-focused environment.
                 </p>
             </div>
             <!-- Sponsor Booths & Stamp Quest -->
-            <div>
+            <div class="flex flex-col items-center justify-center sm:items-start sm:justify-start xl:items-start xl:justify-start">
                 <div class="inline-block mb-2">
                     <img src="{% static 'img/vectors/icon-sponsor-booths.svg' %}"
                          alt="Sponsor Booths & Stamp Quest" />
                 </div>
                 <h4 class="text-xl font-bold uppercase mb-3 font-bantayog">Sponsor Booths & Stamp Quest</h4>
-                <p class="text-sm font-nunito w-full max-w-[305px]">
+                <p class="text-sm font-nunito w-full max-w-[305px] text-center sm:text-left xl:text-left">
                     Explore sponsor showcases, discover new opportunities, and complete our signature Stamp Collection Quest for fun tokens, prizes, and new connections.
                 </p>
             </div>
             <!-- Open Source Sprints -->
-            <div>
+            <div class="flex flex-col items-center justify-center sm:items-start sm:justify-start xl:items-start xl:justify-start">
                 <div class="inline-block mb-2">
                     <img src="{% static 'img/vectors/hands-on-icon.svg' %}"
                          alt="Open Source Sprints" />
                 </div>
                 <h4 class="text-xl font-bold uppercase mb-3 font-bantayog">Open Source Sprints</h4>
-                <p class="text-sm font-nunito w-full max-w-[305px]">
+                <p class="text-sm font-nunito w-full max-w-[305px] text-center sm:text-left xl:text-left text-center sm:text-left xl:text-left">
                     Team up with maintainers and peers (bring your laptop!) to contribute to open source, then connect at our career fair.
                 </p>
             </div>
             <!-- Education Summit -->
-            <div>
+            <div class="flex flex-col items-center justify-center sm:items-start sm:justify-start xl:items-start xl:justify-start">
                 <div class="inline-block mb-2">
                     <img src="{% static 'img/vectors/icon-education-summit.svg' %}" alt="Education Summit" />
                 </div>
                 <h4 class="text-xl font-bold uppercase mb-3 font-bantayog">Education Summit</h4>
-                <p class="text-sm font-nunito w-full max-w-[305px]">
+                <p class="text-sm font-nunito w-full max-w-[305px] text-center sm:text-left xl:text-left text-center sm:text-left xl:text-left">
                     Co-organized with De La Salle University (DLSU), this special track brings together educators, students, and practitioners to explore how Python is shaping learning and research in Asia
                 </p>
             </div>

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

@@ -1,10 +1,9 @@
 {% load static %}
-{% comment %}
 <section id="annoucement" class="py-20 bg-[#FFF9F2]">
   <div class="w-full max-w-[1160px] mx-auto px-6 flex gap-[30px]">
     <div class="w-[45%] max-w-[510px]">
       <div>
-        <h2 class="color-[#F26D1D] text-6xl leading-[120%] tracking-[2%] font-td_pinoy">
+        <h2 class="text-orange-2 text-6xl leading-[120%] tracking-[2%] font-td_pinoy">
           Announcement
         </h2>
       </div>
@@ -65,4 +64,3 @@ <h3 class="font-bantayog [28px] leading-[130%] color-[#84400F] capitalize">Lorem
     </div>
   </div>
 </section>
-{% endcomment %}

app/home/templates/home/sections/call-for-x.html

@@ -1,30 +1,29 @@
 {% load static %}
-<section id="call-for-x" class="py-20 bg-[url('{% static 'img/call-for-links.png' %}')] bg-contain bg-center">
+<section id="call-for-x" class="py-20 bg_call-for-links">
     <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>
+            <h2 class="text-5xl md:text-6xl font-bold mb-12 font-td_pinoy text-white">Get Involved</h2>
+            <p class="text-[28px] font-bantayog uppercase text-white">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="p-8 rounded-2xl w-full max-w-[300px] min-h-[350px] bg-offwhite-2 border-t-[8px] border-t-[#B04301]  h-[250px]">
                 <div class="mb-6">
-                    <h3 class="text-2xl font-bold mb-0 font-bantayog text-brown-1">CALL FOR PROPOSALS</h3>
+                    <h3 class="text-4xl 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>
+                    <h4 class="text-2xl font-bold mb-0 font-bantayog text-brown-3 font-bold">LINK:</h4>
+                    <a class="text-lg font-bold mb-2 font-bantayog text-brown-2 leading-none underline pointer" 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="p-8 rounded-2xl w-full max-w-[300px] min-h-[350px] 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>
+                    <h3 class="text-4xl 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>
+                    <h4 class="text-2xl font-bold mb-0 font-bantayog text-brown-3 font-bold">LINK:</h4>
+                    <a class="text-lg font-bold mb-2 font-bantayog text-brown-2 leading-none underline pointer" href="https://docs.google.com/forms/d/e/1FAIpQLSd9yOxboIXUv4_nUnzeywojCjEagSfCFKs1D2-onUU4fjzl9g/viewform" target="_blank">bit.ly/PythonAsia2026-CallForSponsors</a>
                 </div>
             </div>
         </div>