Hide Sections & Adjust Responsive Layouts

app/home/templates/home/components/navbar.html

@@ -1,7 +1,6 @@
 {% load static %}
 <nav class="absolute w-full z-10">
   <div class="relative flex flex-col">
-    {% comment %}
     <div class="bg-orange-1 py-1.5 flex items-center justify-center gap-2">
       <p class="text-white font-nunito text-sm font-semibold">
         👋 Registration for PyCon APAC 2025 is now open!
@@ -14,7 +13,7 @@
         </a>
       </div>
     </div>
-    {% endcomment %}
+
     <div class="bg-transparent w-[1260px] mx-auto flex pt-8">
       <div class="navbar-start">
         <div class="dropdown">
@@ -99,7 +98,7 @@
                class="h-8 w-full max-w-[233px]" />
         </a>
       </div>
-      {% comment %}
+
       <div class="flex justify-end items-center gap-7 w-full">
         <div class="hidden lg:flex">
           <ul class="menu menu-horizontal px-1">
@@ -181,7 +180,6 @@
           </a>
         </div>
       </div>
-      {% endcomment %}
     </div>
   </div>
 </nav>

app/home/templates/home/index.html

@@ -4,7 +4,7 @@
     <div class="min-h-screen"
          style="background-image: url('{% static 'img/background.png' %}')">
         <!-- Navbar -->
-        {% include "home/components/navbar.html" %}
+        {% comment %}{% include "home/components/navbar.html" %}{% endcomment %}
         <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">
@@ -26,13 +26,10 @@
                     </div>
                 </div>
             </section>
-            <img src="{% static 'img/vectors/footer.png' %}"
-                 class="w-full block"
-                 style="margin-top: -10em;
-                        margin-bottom: -7em">
+            <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">
+        <div class="w-full py-0 my-0 z-10 -mb-25 hidden xl:block">
             <img src="{% static 'img/vectors/section-break-1.svg' %}"
                  alt="Section Break"
                  class="w-full block">
@@ -56,7 +53,9 @@
         <!-- When? Where? Section -->
         {% include "home/sections/when-where-section.html" %}
         <!-- Sponsors Section -->
-        {% include "home/sections/sponsor-section.html" %}
+        {% 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/conference-at-a-glance.html

@@ -82,32 +82,9 @@ <h4 class="text-xl font-bold font-bantayog" style="color: #7C5E3B;">MONDAY</h4>
                 </div>
             </div>
         </div>
-        <!-- Tickets Section -->
-        <div class="text-center">
-            <h2 class="text-5xl font-bold mb-6 font-td_pinoy" style="color: #BD4B06;">Tickets Available</h2>
-            <p class="text-lg mb-8 max-w-3xl mx-auto font-nunito"
-               style="color: #7C5E3B">
-                Join us as we learn something new, teach something new, find opportunities, build cool things,
-                <br />
-                make friends, and geek out!
-            </p>
-            <div class="flex justify-center items-center mb-8 relative">
-                <!-- Left Python Logo -->
-                <!-- <div class="hidden md:block absolute left-0" style="transform: translateX(-120%);">
-                    <img src="{% static 'img/python-blue.png' %}" alt="Python Logo" class="w-32 h-auto">
-</div> -->
-                <!-- Get Tickets Button -->
-                <div class="inline-block">
-                    <a href="#"
-                       class="inline-block px-16 py-4 text-white font-bold text-xl uppercase rounded-lg transition-all hover:opacity-90"
-                       style="background-color: #D87A3F">Get Tickets</a>
-                    <p class="text-sm mt-4 uppercase tracking-wide" style="color: #7C5E3B;">Apply for Student Discount</p>
-                </div>
-                <!-- Right Python Logo -->
-                <!-- <div class="hidden md:block absolute right-0" style="transform: translateX(120%);">
-                    <img src="{% static 'img/python-yellow.png' %}" alt="Python Logo" class="w-32 h-auto">
-                </div> -->
-            </div>
-        </div>
+
+        {% comment %}
+          {% include "home/sections/tickets-section.html" %}
+        {% endcomment %}
     </div>
 </section>

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

@@ -3,42 +3,56 @@
 <footer class="flex flex-col items-center bg-[#F4E6D4] py-12">
     <!-- PythonAsia 2026 Branding -->
     <img src="{% static 'img/vectors/python-asia-branding.png' %}" class="mt-10" alt="Footer">
-    
+
     <!-- Action Links -->
+    {% comment %}
     <div class="flex gap-8 mt-10 mb-6">
         <a href="#" class="text-[#FFA218] text-xl font-bold hover:underline font-bantayog">GET TICKETS</a>
         <a href="#" class="text-[#F26D1D] text-xl font-bold hover:underline font-bantayog">BECOME A SPONSOR</a>
     </div>
-
+    {% endcomment %}
+
     <!-- Contact Message -->
     <p class="text-[#7C5E3B] text-sm mb-4 font-nunito">
         Message us at <a href="mailto:pycon@python.ph" class="underline">pycon@python.ph</a> for questions and inquiries
     </p>
-    
+
     <!-- Social Media Icons -->
     <div class="flex gap-4 mb-4">
-        <a href="#" class="hover:opacity-70 transition-opacity" aria-label="Slack">
-            <img src="https://cdn.simpleicons.org/slack/7C5E3B" alt="Slack" class="w-6 h-6">
-        </a>
         <a href="#" class="hover:opacity-70 transition-opacity" aria-label="Facebook">
             <img src="https://cdn.simpleicons.org/facebook/7C5E3B" alt="Facebook" class="w-6 h-6">
         </a>
         <a href="#" class="hover:opacity-70 transition-opacity" aria-label="GitHub">
             <img src="https://cdn.simpleicons.org/github/7C5E3B" alt="GitHub" class="w-6 h-6">
         </a>
-        <a href="#" class="hover:opacity-70 transition-opacity" aria-label="Twitter">
-            <img src="https://cdn.simpleicons.org/twitter/7C5E3B" alt="Twitter" class="w-6 h-6">
+        <a href="#" class="hover:opacity-70 transition-opacity" aria-label="X">
+            <img src="https://cdn.simpleicons.org/x/7C5E3B" alt="X" class="w-6 h-6">
         </a>
         <a href="#" class="hover:opacity-70 transition-opacity" aria-label="Instagram">
             <img src="https://cdn.simpleicons.org/instagram/7C5E3B" alt="Instagram" class="w-6 h-6">
         </a>
     </div>
-    
+
     <!-- Built With Text -->
     <p class="text-[#7C5E3B] text-sm mb-8 font-nunito">
         This site is built using Django.
     </p>
-
-    <!-- Decorative Footer Image -->
-    <img src="{% static 'img/vectors/footer.png' %}" alt="Footer decoration" class="w-full block -mt-30">
-</footer>
+
+    <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/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">
+
+      <div class="absolute bottom-0 lg:bottom-20 w-full text-center flex flex-col items-center justify-center z-30 py-6 bg-[#F26D1D] lg:bg-[unset]">
+        <h3 class="text-white font-bold mb-2 text-2xl">CO-ORGANIZED BY</h3>
+        <div class="flex flex-col md:flex-row items-center justify-center md:space-x-8 space-y-4 md:space-y-0 mt-2">
+          <img src="{% static 'img/footer/pythonph.svg' %}" alt="PythonPH" class="h-12 md:h-[60px]">
+          <img src="{% static 'img/footer/pythonasia.svg' %}" alt="Python Asia Organization" class="h-12 md:h-[60px]">
+          <img src="{% static 'img/footer/dlsu.svg' %}" alt="DLSU" class="h-12 md:h-[60px]">
+        </div>
+      </div>
+
+    </div>
+
+</footer>

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

@@ -0,0 +1,27 @@
+{% load static %}
+
+<div class="text-center">
+  <h2 class="text-5xl font-bold mb-6 font-td_pinoy" style="color: #BD4B06;">Tickets Available</h2>
+  <p class="text-lg mb-8 max-w-3xl mx-auto font-nunito" style="color: #7C5E3B">
+  Join us as we learn something new, teach something new, find opportunities, build cool things,
+  <br />
+  make friends, and geek out!
+  </p>
+  <div class="flex justify-center items-center mb-8 relative">
+    <!-- Left Python Logo -->
+    <div class="hidden md:block absolute left-0" style="transform: translateX(-120%);">
+      <img src="{% static 'img/python-blue.png' %}" alt="Python Logo" class="w-32 h-auto">
+    </div> 
+    <!-- Get Tickets Button -->
+    <div class="inline-block">
+      <a href="#"
+         class="inline-block px-16 py-4 text-white font-bold text-xl uppercase rounded-lg transition-all hover:opacity-90"
+         style="background-color: #D87A3F">Get Tickets</a>
+      <p class="text-sm mt-4 uppercase tracking-wide" style="color: #7C5E3B;">Apply for Student Discount</p>
+    </div>
+    <!-- Right Python Logo -->
+    <div class="hidden md:block absolute right-0" style="transform: translateX(120%);">
+      <img src="{% static 'img/python-yellow.png' %}" alt="Python Logo" class="w-32 h-auto">
+    </div> 
+  </div>
+</div>

app/home/templates/home/sections/what-is-python-asia.html

@@ -14,6 +14,7 @@ <h2 class="text-5xl lg:text-6xl font-bold text-[#D87532] mb-6 font-td_pinoy">Wha
         </div>
 
         <!-- Three Cards Grid -->
+        {% comment %}
         <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl mx-auto">
             <!-- Call for Sponsors -->
             <div class="bg-white/50 backdrop-blur-sm rounded-lg p-8 space-y-4">
@@ -52,6 +53,7 @@ <h3 class="text-2xl font-bold text-[#D87532] font-bantayog">
                 </div>
             </div>
         </div>
+        {% endcomment %}
     </div>
 </section>
 

app/home/templates/home/sections/when-where-section.html

@@ -9,13 +9,15 @@ <h2 class="font-bantayog text-[28px] text-[#F26D1D] leading-[130%]">WHEN? WHERE?
         <p class="font-td_pinoy text-[35px] text[#84400F] leading-[130%] tracking-[2%]">De La Salle University (DLSU),</p>
         <p class="font-td_pinoy text-[35px] text[#84400F] leading-[130%] tracking-[2%]">Malate, Manila</p>
       </div>
+      {% comment %}
       <div class="flex flex-col justify-center gap-3.5">
         <button class="rounded-lg bg-[#F26D1D] py-[27px] px-[90px] text-white text-[22px] leading-[120%] font-bantayog">
           GET TICKETS
         </button>
         <a href="#"
            class="underline text-[#84400F] text-center text-base font-bantayog">Apply for Student Discount</a>
       </div>
+      {% endcomment %}
     </div>
     <div class="relative w-full pb-[56.25%] overflow-hidden rounded-[24px]">
       <iframe class="absolute top-0 left-0 w-full h-full border-0"

app/home/urls.py

@@ -3,5 +3,5 @@
 from . import views
 
 urlpatterns = [
-    path("", views.home, name="home"),
+    path("", views.HomeView.as_view(), name="home"),
 ]

app/home/views.py

@@ -1,5 +1,6 @@
-from django.shortcuts import render
+from bakery.views import BuildableTemplateView
 
 
-def home(request):
-    return render(request, "home/index.html")
+class HomeView(BuildableTemplateView):
+    template_name = "home/index.html"
+    build_path = "index.html"

config/settings.py

@@ -52,6 +52,7 @@
 THIRD_PARTY_APPS = [
     "corsheaders",
     "django_tailwind_cli",
+    "bakery",
 ]
 
 if settings.APP_ENV == "development":
@@ -196,3 +197,9 @@
 # https://docs.djangoproject.com/en/5.2/ref/settings/#default-auto-field
 
 DEFAULT_AUTO_FIELD = "django.db.models.BigAutoField"
+
+# Build directory for bakery
+BUILD_DIR = BASE_DIR / "build"
+BAKERY_VIEWS = (
+    "app.home.views.HomeView",
+)

pyproject.toml

@@ -6,6 +6,7 @@ readme = "README.md"
 requires-python = ">=3.13"
 dependencies = [
     "django>=5.2.7",
+    "django-bakery>=0.13.5",
     "django-cors-headers>=4.9.0",
     "django-tailwind-cli>=4.4.2",
     "gunicorn>=23.0.0",

src/styles/main.css

@@ -89,7 +89,10 @@ body {
 }
 
 .font-nunito {
-  font-family: "Nunito", sans-serif;
+  font-family: "Nunito", regular, sans-serif;
+  weight: 400;
+  size: 18px;
+  line-height: 1.5;
 }
 
 .bg-orange-1 {