Skip to content

Polish the styling, contents, and desktop to mobile responsiveness of homepage #14

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Oct 26, 2025
Merged

Polish the styling, contents, and desktop to mobile responsiveness of homepage #14

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 18 additions & 6 deletions app/home/templates/home/components/navbar.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
{% load static %}
<nav class="absolute w-full z-10">
<div class="relative flex flex-col">
{% comment %}
<!-- Ribbon CTA -->
<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!
Expand All @@ -13,9 +15,18 @@
</a>
</div>
</div>
{% endcomment %}

<div class="bg-transparent w-[1260px] mx-auto flex pt-8">
<div class="bg-transparent w-full max-w-[1260px] mx-auto flex pt-8">

<!-- Site Logo -->
<div class="navbar-start">
<a class="btn btn-ghost text-xl">
<img src="{% static 'img/logo.png' %}"
alt="PythonAsia 2026"
class="h-8 w-full max-w-[233px]" />
</a>
{% comment %}
<div class="dropdown">
<div tabindex="0" role="button" class="btn btn-ghost lg:hidden">
<svg xmlns="http://www.w3.org/2000/svg"
Expand Down Expand Up @@ -92,14 +103,13 @@
</li>
</ul>
</div>
<a class="btn btn-ghost text-xl">
<img src="{% static 'img/logo.png' %}"
alt="PythonAsia 2026"
class="h-8 w-full max-w-[233px]" />
</a>
{% endcomment %}
</div>

{% comment %}
<div class="flex justify-end items-center gap-7 w-full">

<!-- Header Links -->
<div class="hidden lg:flex">
<ul class="menu menu-horizontal px-1">
<li>
Expand Down Expand Up @@ -174,12 +184,14 @@
</li>
</ul>
</div>
<!-- Ticket Button -->
<div>
<a href="#" class="btn btn-primary btn-square lg:btn-wide">
<span class="lg:inline font-bantayog py-3.5 px-8 text-xl">Get Tickets</span>
</a>
</div>
</div>
{% endcomment %}
</div>
</div>
</nav>
8 changes: 4 additions & 4 deletions app/home/templates/home/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<div class="min-h-screen"
style="background-image: url('{% static 'img/background.png' %}')">
<!-- Navbar -->
{% comment %}{% include "home/components/navbar.html" %}{% endcomment %}
{% 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">
Expand All @@ -29,15 +29,15 @@
<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">
<div class="w-full py-0 my-0 z-10 -mb-25 hidden xl:block cstm_break">
<img src="{% static 'img/vectors/section-break-1.svg' %}"
alt="Section Break"
class="w-full block">
</div>
<!-- About Us Section -->
{% include "home/sections/about-us.html" %}
<!-- Section Break -->
<div class="w-full py-0 my-0 z-10 -mt-25">
<div class="w-full py-0 my-0 z-10 -mt-25 cstm_break about-us_break">
<img src="{% static 'img/vectors/section-break-2.svg' %}"
alt="Section Break"
class="w-full block">
Expand All @@ -47,7 +47,7 @@
<!-- Why Python Section -->
{% include "home/sections/why-python.html" %}
<!-- What is PyCon Section -->
{% include "home/sections/what-is-python-asia.html" %}
{% comment%}{% include "home/sections/what-is-python-asia.html" %}{% endcomment%}
<!-- Announcement Section -->
{% include "home/sections/announcement-section.html" %}
<!-- When? Where? Section -->
Expand Down
74 changes: 37 additions & 37 deletions app/home/templates/home/sections/about-us.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
{% load static %}
<section id="about-us"
class="py-20 mt-5 text-white"
class="py-20 text-white"
style="background-color: #BD4B06">
<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">What is PythonAsia?</h2>
</div>
<!-- Main Content -->
<div class="text-center px-8 md:px-16 lg:px-24">
<div class="text-center px-8 md:px-16 lg:px-24 w-full max-w-[975px] mx-auto">
<h3 class="text-2xl font-bold mb-6 uppercase font-bantayog">
The Flagship Gathering for Python Enthusiasts Across Asia - Uniting Diverse Communities across the region
</h3>
Expand All @@ -34,97 +34,97 @@ <h3 class="text-2xl font-bold mb-6 uppercase font-bantayog">
</div>
</div>
<!-- 3 Days Section -->
<div class="mb-12">
<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">
<p class="text-lg leading-relaxed font-nunito">
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 md:grid-cols-2 gap-8 mb-16">
<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="inline-block p-4 mb-4">
<img src="{% static 'img/vectors/conversation-icon.svg' %}"
<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">
<p class="text-sm font-nunito w-full max-w-[305px]">
Hear inspiring talks from core contributors, community leaders, and innovators shaping Python across Asia and beyond
</p>
</div>
<!-- Talks & Lightning Talks -->
<div>
<div class="inline-block p-4 mb-4">
<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">
<p class="text-sm font-nunito w-full max-w-[305px]">
From deep-dive sessions to quick, punchy insights, learn from diverse voices across the Python community.
</p>
</div>
<!-- Community Gatherings -->
<div>
<div class="inline-block p-4 mb-4">
<img src="{% static 'img/vectors/hands-on-icon.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">
Join special sessions like the PyLadies Lunch, Open Spaces, and Group Lunch—designed to spark conversations and build connections.
</p>
</div>
<!-- Multi-Track & Live Workshops -->
<div>
<div class="inline-block p-4 mb-4">
<img src="{% static 'img/vectors/star-icon.svg' %}"
<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">
<p class="text-sm font-nunito w-full max-w-[305px]">
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="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]">
Join special sessions like the PyLadies Lunch, Open Spaces, and Group Lunch—designed to spark conversations and build connections.
</p>
</div>
<!-- Career Mixer -->
<div>
<div class="inline-block p-4 mb-4">
<img src="{% static 'img/vectors/star-icon.svg' %}" alt="Career Mixer" />
<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">
<p class="text-sm font-nunito w-full max-w-[305px]">
Meet potential employers, collaborators, and mentors in a relaxed, networking-focused environment.
</p>
</div>
<!-- Sponsor Booths & Stamp Quest -->
<div>
<div class="inline-block p-4 mb-4">
<img src="{% static 'img/vectors/star-icon.svg' %}"
<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">
<p class="text-sm font-nunito w-full max-w-[305px]">
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="inline-block p-4 mb-4">
<img src="{% static 'img/vectors/star-icon.svg' %}"
<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">
<p class="text-sm font-nunito w-full max-w-[305px]">
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="inline-block p-4 mb-4">
<img src="{% static 'img/vectors/star-icon.svg' %}" alt="Education Summit" />
<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">
<p class="text-sm font-nunito w-full max-w-[305px]">
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>
Expand All @@ -134,7 +134,7 @@ <h4 class="text-xl font-bold uppercase mb-3 font-bantayog">Education Summit</h4>
<p class="text-lg mb-2 uppercase tracking-wide font-bantayog">
Join hundreds of developers, students, educators, researchers, and community leaders from across Asia for 3 days of
</p>
<h3 class="text-5xl md:text-6xl font-bold uppercase font-td_pinoy">Learning, Inspiration, and Connection</h3>
<h3 class="md:text-6xl sm:text-4xl font-bold uppercase font-td_pinoy">Learning, Inspiration, and Connection</h3>
</div>
</div>
</section>
Loading