Skip to content

Homepage polish in website #48

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

Open
iRenanMatthew wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Homepage polish in website #48

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b16fb20
Homepage polishing and cleaning contents
iRenanMatthew Feb 6, 2026
df7f4bf
Added styling for homepage
iRenanMatthew Feb 6, 2026
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
2 changes: 1 addition & 1 deletion app/home/templates/home/components/navbar.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,7 +117,7 @@
</div>
<!-- Ticket Button (desktop only) -->
<div class="hidden lg:block">
<a href="https://ti.to/pythonph/pythonasia-2026/" target="_blank" class="btn btn-primary btn-wide py-2 px-4 sm:py-3.5 sm:px-8">
<a href="https://ti.to/pythonph/pythonasia-2026/" target="_blank" class="btn btn-primary btn-wide py-2 px-4 sm:py-3.5 sm:px-8 text-white">
<span class="lg:inline font-bantayog text-base sm:text-xl">Get Tickets</span>
</a>
</div>
Expand Down
28 changes: 20 additions & 8 deletions app/home/templates/home/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,35 @@
{% extends "base.html" %}

{% load static %}
{% block extra_css %}
<style>
.cstm_bottom{
position: absolute;
bottom: -65px;
left: 0;
}

.cstm_top{
position: absolute;
top: -65px;
left: 0;
}

#conference-at-a-glance {
background: url(/static/img/bg-conference-at-glance.png) no-repeat;
}
</style>
{% endblock %}
{% block content %}
<main>
<div class="min-h-screen" style="background-image: url('{% static 'img/background.png' %}')">
<!-- Navbar -->
{% include "home/components/navbar.html" %}
<!-- Hero Section -->
{% include "home/sections/hero-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"
width="1920" height="200">
</div>
<!-- About Us Section -->
{% include "home/sections/about-us.html" %}
<!-- Section Break -->
<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"
width="1920" height="200">
</div>
<!-- Conference at a Glance Section -->
{% include "home/sections/conference-at-a-glance.html" %}
<!-- Why Python Section -->
Expand Down
54 changes: 26 additions & 28 deletions app/home/templates/home/sections/about-us.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,11 @@ <h2 class="text-5xl md:text-6xl font-bold mb-12 font-td_pinoy">What is PythonAsi
</div>
<!-- Main Content -->
<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">
<h3 class="text-2xl md:text-3xl font-bold mb-6 uppercase font-bantayog">
The Flagship Gathering for Python Enthusiasts Across Asia - Uniting Diverse Communities across the
region
</h3>
<p class="text-base leading-relaxed font-nunito">
<p class="text-base md:text-lg leading-relaxed font-nunito">
Previously known as PyCon APAC, the conference has a long history of bringing together developers,
students, educators, researchers, and industry leaders to collaborate, exchange ideas, and build lasting
connections. Its goal remains to create a space for exploring, discussing, and applying Python and its
Expand All @@ -35,8 +35,7 @@ <h3 class="text-2xl font-bold mb-6 uppercase font-bantayog">
</div>
<div class="flex justify-center items-center mb-12">
<div class="relative">
<img src="{% static 'img/about-us-photo.png' %}" alt="PyCon PH 2025 Conference" width="800"
height="600">
<img src="{% static 'img/about-us-photo.png' %}" alt="PyCon PH 2025 Conference" class="w-full">
</div>
</div>
<!-- 3 Days Section -->
Expand All @@ -55,11 +54,11 @@ <h3 class="text-5xl font-bold mb-8 font-td_pinoy text-center sm:text-left xl:tex
<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" width="64"
height="64" />
<img src="{% static 'img/vectors/star-icon.svg' %}" alt="Inspiring Keynotes"
class="w-[60px] h-[60px] mb-4" />
</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] text-center sm:text-left xl:text-left">
<p class="text-base font-nunito w-full max-w-[305px] 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>
Expand All @@ -68,11 +67,11 @@ <h4 class="text-xl font-bold uppercase mb-3 font-bantayog">Inspiring Keynotes</h
<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" width="64"
height="64" />
<img src="{% static 'img/vectors/conversation-icon.svg' %}" alt="Talks & Lightning Talks"
class="w-[60px] h-[60px] mb-4" />
</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] text-center sm:text-left xl:text-left">
<p class="text-base font-nunito w-full max-w-[305px] 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>
Expand All @@ -82,10 +81,10 @@ <h4 class="text-xl font-bold uppercase mb-3 font-bantayog">Talks & Lightning Tal
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" width="64" height="64" />
alt="Multi-Track & Live Workshops" class="w-[60px] h-[60px] mb-4" />
</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] text-center sm:text-left xl:text-left">
<p class="text-base font-nunito w-full max-w-[305px] 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>
Expand All @@ -95,10 +94,10 @@ <h4 class="text-xl font-bold uppercase mb-3 font-bantayog">Multi-Track & Live Wo
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"
width="64" height="64" />
width="64" class="w-[85px] h-[60px] mb-4" />
</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] text-center sm:text-left xl:text-left">
<p class="text-base font-nunito w-full max-w-[305px] 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>
Expand All @@ -107,11 +106,11 @@ <h4 class="text-xl font-bold uppercase mb-3 font-bantayog">Community Gatherings<
<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" width="64"
height="64" />
<img src="{% static 'img/vectors/icon-career-mixer.svg' %}" alt="Career Mixer"
class="w-[60px] h-[60px] mb-4" />
</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] text-center sm:text-left xl:text-left">
<p class="text-base font-nunito w-full max-w-[305px] text-center sm:text-left xl:text-left">
Meet potential employers, collaborators, and mentors in a relaxed, networking-focused environment.
</p>
</div>
Expand All @@ -120,10 +119,10 @@ <h4 class="text-xl font-bold uppercase mb-3 font-bantayog">Career Mixer</h4>
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"
width="64" height="64" />
class="w-[60px] h-[60px] mb-4" />
</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] text-center sm:text-left xl:text-left">
<p class="text-base 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>
Expand All @@ -132,11 +131,10 @@ <h4 class="text-xl font-bold uppercase mb-3 font-bantayog">Sponsor Booths & Stam
<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" width="64"
height="64" />
<img src="{% static 'img/vectors/hands-on-icon.svg' %}" alt="Open Source Sprints" class="w-[75px] h-[60px] mb-4"/>
</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] text-center sm:text-left xl:text-left">
<p class="text-base font-nunito w-full max-w-[305px] 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>
Expand All @@ -145,23 +143,23 @@ <h4 class="text-xl font-bold uppercase mb-3 font-bantayog">Open Source Sprints</
<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" width="64"
height="64" />
<img src="{% static 'img/vectors/icon-education-summit.svg' %}" alt="Education Summit"
class="w-[60px] h-[60px] mb-4" />
</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] text-center sm:text-left xl:text-left">
<p class="text-base font-nunito w-full max-w-[305px] 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>
</div>
<!-- Call to Action -->
<div class="text-center bg-[#B04301] p-[30px] pb-10 rounded-2xl">
<p class="text-lg mb-2 uppercase tracking-wide font-bantayog">
<div class="text-center bg-[#B04301] p-[30px] pb-10 rounded-2xl" style="max-width: 1160 px; margin: 0 auto;">
<p class="text-2xl mb-8 uppercase tracking-wide font-bantayog mx-auto" style="max-width: 900px;">
Join hundreds of developers, students, educators, researchers, and community leaders from across Asia
for 3 days of
</p>
<h3 class="md:text-6xl sm:text-4xl font-bold uppercase font-td_pinoy">Learning, Inspiration, and Connection
<h3 class="md:text-[42px] text-4xl font-bold uppercase font-td_pinoy">Learning, Inspiration, and Connection
</h3>
</div>
</div>
Expand Down
12 changes: 5 additions & 7 deletions app/home/templates/home/sections/call-for-x.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,15 @@
{% load static %}
<section id="call-for-x" class="py-20 bg_call-for-links">
<section id="call-for-x" class="py-32 bg_call-for-links relative">
<div class="container mx-auto px-6">
<img src="{% static 'img/vectors/section-divider-03.svg' %}" alt="Section Break" class="w-full py-0 my-0 z-10 cstm_top block">
<!-- Header -->
<div class="text-center mb-16">
<h2 class="text-5xl md:text-6xl font-bold mb-12 font-td_pinoy text-white">Get Involved</h2>
<h2 class="text-5xl md:text-6xl font-bold mb-4 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">
class="flex flex-col sm:flex-row md:items-stretch md:justify-center items-center gap-8 max-w-5xl mx-auto">

<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]">
Expand All @@ -34,9 +35,6 @@ <h4 class="text-2xl font-bold mb-0 font-bantayog text-brown-3">LINK:</h4>
</div>
</div>
</div>

{% comment %}
{% include "home/sections/tickets-section.html" %}
{% endcomment %}
<img src="{% static 'img/vectors/section-divider-04.svg' %}" alt="Section Break" class="w-full py-0 my-0 z-10 cstm_bottom block">
</div>
</section>
7 changes: 5 additions & 2 deletions app/home/templates/home/sections/conference-at-a-glance.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,13 @@
{% load static %}
<section id="conference-at-a-glance"
class="pt-20 bg-[url('{% static 'img/bg-conference-at-glance.png' %}')] bg-contain bg-center">
class="pt-48 bg-contain bg-center relative">

<img src="{% static 'img/vectors/section-divider-02.svg' %}" alt="Section Break" class="w-full py-0 my-0 z-10 cstm_top block">

<div class="container mx-auto px-6">
<!-- Header -->
<div class="text-center mb-16">
<h2 class="text-5xl md:text-6xl font-bold font-td_pinoy" style="color: #D87A3F">
<h2 class="text-5xl md:text-6xl font-bold font-td_pinoy text-orange-2" >
Conference at a Glance
</h2>
</div>
Expand Down
6 changes: 4 additions & 2 deletions app/home/templates/home/sections/hero-section.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
{% load static %}

<section id="hero" class="px-[4%] flex flex-col items-center justify-end">
<section id="hero" class="px-[4%] flex flex-col items-center justify-end relative">
<div class="flex flex-col max-w-[730px] mx-auto pb-[20px] pt-[180px] xl:pb-[50px] xl:pt-[150px] 2xl:pb-[100px]
2xl:pt-[250px] gap-5">
<div class="flex flex-col justify-center items-center gap-8">
Expand Down Expand Up @@ -39,4 +38,7 @@ <h2 class="font-bantayog text-[28px] text-white text-center">Co-organized By</h2
</div>
</div>


<img src="{% static 'img/vectors/section-divider-01.svg' %}" alt="Section Break" class="w-full py-0 my-0 z-10 cstm_bottom block">

</section>
4 changes: 2 additions & 2 deletions app/home/templates/home/sections/speakers-section.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,10 @@ <h2 class="font-td_pinoy text-6xl text-orange-2 text-center m-0">Keynote Speaker
for PythonAsia 2026
</p>
</div>
<div class="keynote-speakers-wrapper flex justify-center items-center gap-[30px] flex-wrap">
<div class="keynote-speakers-wrapper flex justify-center items-stretch gap-[30px] flex-wrap">
{% for speaker in featured_speakers %}
<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-stretch"
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-stretch h-full"
style="padding: 30px">
<div class="overflow-hidden flex-shrink-0 w-[230px] flex items-center justify-center">
{% if speaker.photo_url %}
Expand Down
16 changes: 8 additions & 8 deletions app/home/templates/home/sections/tickets-section.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,26 +1,26 @@
{% load static %}

<div class="text-center relative max-w-[940px] mx-auto">
<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">
<div class="text-center relative max-w-[940px] mx-auto overflow-hidden">
<h2 class="text-5xl font-bold mb-6 font-td_pinoy text-brown-1">Tickets Available</h2>
<p class="text-lg max-w-3xl mx-auto font-nunito text-brown-2">
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-between items-center relative max-w-[550px] gap-8 mx-auto">
<div class="flex justify-between items-center relative max-w-[900px] gap-8 mx-auto" style="margin-top: -30px;">
<!-- Left Python Logo -->
<div>
<img src="{% static 'img/python-blue.png' %}" alt="Python Logo" class="w-32 h-auto" width="128" height="128">
<img src="{% static 'img/python-blue.png' %}" alt="Python Logo" class="w-full max-w-56 h-80" style="margin-bottom: -50px;">
</div>
<!-- Get Tickets Button -->
<div class="inline-block">
<a href="https://ti.to/pythonph/pythonasia-2026/" target="_blank"
class="inline-block px-4 py-2 md:px-12 md:py-6 text-white font-bold text-base sm:text-xl uppercase rounded-lg transition-all hover:opacity-90 mb-5"
style="background-color: #D87A3F">Get Tickets</a>
class="inline-block px-4 py-2 md:px-12 md:py-6 text-white font-bold text-base sm:text-xl uppercase rounded-lg transition-all bg-orange-2 hover:opacity-90 mb-5"
>Get Tickets</a>
</div>
<!-- Right Python Logo -->
<div>
<img src="{% static 'img/python-yellow.png' %}" alt="Python Logo" class="w-32 h-auto" width="128" height="128">
<img src="{% static 'img/python-yellow.png' %}" alt="Python Logo" class="w-full max-w-56 h-80" style="margin-bottom: -50px;">
</div>
</div>
</div>
Loading