Skip to content

Commit 6bf79a7

Browse files
iRenanMatthewiRenanMatthew
authored
Merge pull request #48 from pythonph/feat/homepage-polish
Homepage polish in website
2 parents 08e4cb9 + 6408042 commit 6bf79a7

40 files changed

Lines changed: 618 additions & 239 deletions

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@
3535
</div>
3636

3737

38-
<div class="bg-transparent w-full max-w-[1260px] mx-auto flex pt-8 px-1 md:px-0">
38+
<div class="bg-transparent w-full max-w-[1260px] mx-auto flex pt-8 px-3 md:px-5">
3939

4040
<!-- Site Logo -->
4141
<div class="navbar-start px-4">
@@ -117,7 +117,7 @@
117117
</div>
118118
<!-- Ticket Button (desktop only) -->
119119
<div class="hidden lg:block">
120-
<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">
120+
<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">
121121
<span class="lg:inline font-bantayog text-base sm:text-xl">Get Tickets</span>
122122
</a>
123123
</div>

‎app/home/templates/home/index.html‎

Lines changed: 25 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,38 @@
11
{% extends "base.html" %}
2+
23
{% load static %}
4+
{% block extra_css %}
5+
<style>
6+
.cstm_bottom{
7+
position: absolute;
8+
bottom: -65px;
9+
left: 0;
10+
}
11+
12+
.cstm_top{
13+
position: absolute;
14+
top: -65px;
15+
left: 0;
16+
}
17+
18+
#conference-at-a-glance {
19+
background: url('{% static 'img/bg-conference-at-glance.png' %}'), #FFF9F2;
20+
background-size: contain;
21+
background-position: center;
22+
background-repeat: no-repeat;
23+
}
24+
</style>
25+
{% endblock %}
326
{% block content %}
427
<main>
528
<div class="min-h-screen" style="background-image: url('{% static 'img/background.png' %}')">
629
<!-- Navbar -->
730
{% include "home/components/navbar.html" %}
831
<!-- Hero Section -->
932
{% include "home/sections/hero-section.html" %}
10-
<div class="w-full py-0 my-0 z-10 -mb-25 hidden xl:block cstm_break mt-[-9vw]">
11-
<img src="{% static 'img/vectors/section-break-1.svg' %}" alt="Section Break" class="w-full block"
12-
width="1920" height="200">
13-
</div>
1433
<!-- About Us Section -->
1534
{% include "home/sections/about-us.html" %}
1635
<!-- Section Break -->
17-
<div class="w-full py-0 my-0 z-10 -mt-25 cstm_break about-us_break">
18-
<img src="{% static 'img/vectors/section-break-2.svg' %}" alt="Section Break" class="w-full block"
19-
width="1920" height="200">
20-
</div>
2136
<!-- Conference at a Glance Section -->
2237
{% include "home/sections/conference-at-a-glance.html" %}
2338
<!-- Why Python Section -->
@@ -34,10 +49,12 @@
3449
{% include "home/sections/when-where-section.html" %}
3550
<!-- Sponsors Section -->
3651
{% include "home/sections/sponsor-section.html" %}
52+
<div class="coc_footer_wrapper relative">
3753
<!-- Code of Conduct Section -->
3854
{% include "home/sections/code-of-conduct.html" %}
3955
<!-- Footer Section -->
4056
{% include "home/sections/footer.html" %}
57+
</div>
4158
</div>
4259
</main>
4360
{% endblock %}

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

Lines changed: 28 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
11
{% load static %}
22
<section id="about-us" class="py-20 text-white" style="background-color: #BD4B06">
3-
<div class="container mx-auto px-6">
3+
<div class="container mx-auto px-[4%]">
44
<!-- Header -->
55
<div class="text-center mb-16">
66
<h2 class="text-5xl md:text-6xl font-bold mb-12 font-td_pinoy">What is PythonAsia?</h2>
77
</div>
88
<!-- Main Content -->
99
<div class="text-center px-8 md:px-16 lg:px-24 w-full max-w-[975px] mx-auto">
10-
<h3 class="text-2xl font-bold mb-6 uppercase font-bantayog">
10+
<h3 class="text-2xl md:text-3xl font-bold mb-6 uppercase font-bantayog">
1111
The Flagship Gathering for Python Enthusiasts Across Asia - Uniting Diverse Communities across the
1212
region
1313
</h3>
14-
<p class="text-base leading-relaxed font-nunito">
14+
<p class="text-base md:text-lg leading-relaxed font-nunito">
1515
Previously known as PyCon APAC, the conference has a long history of bringing together developers,
1616
students, educators, researchers, and industry leaders to collaborate, exchange ideas, and build lasting
1717
connections. Its goal remains to create a space for exploring, discussing, and applying Python and its
@@ -35,13 +35,12 @@ <h3 class="text-2xl font-bold mb-6 uppercase font-bantayog">
3535
</div>
3636
<div class="flex justify-center items-center mb-12">
3737
<div class="relative">
38-
<img src="{% static 'img/about-us-photo.png' %}" alt="PyCon PH 2025 Conference" width="800"
39-
height="600">
38+
<img src="{% static 'img/about-us-photo.png' %}" alt="PyCon PH 2025 Conference" class="w-full">
4039
</div>
4140
</div>
4241
<!-- 3 Days Section -->
4342
<div class="mb-12 w-full max-w-[1160px] mx-auto">
44-
<h3 class="text-5xl font-bold mb-8 font-td_pinoy text-center sm:text-left xl:text-left">3 Days, Endless
43+
<h3 class="text-4xl md:text-5xl font-bold mb-8 font-td_pinoy text-center md:text-left whitespace-wrap md:whitespace-nowrap">3 Days, Endless
4544
Possibilities</h3>
4645
<p class="text-lg leading-relaxed font-nunito text-center sm:text-left xl:text-left">
4746
Dive into three days of learning, building, and connecting with the Python community. From inspiring
@@ -55,11 +54,11 @@ <h3 class="text-5xl font-bold mb-8 font-td_pinoy text-center sm:text-left xl:tex
5554
<div
5655
class="flex flex-col items-center justify-center sm:items-start sm:justify-start xl:items-start xl:justify-start">
5756
<div class="inline-block mb-2">
58-
<img src="{% static 'img/vectors/star-icon.svg' %}" alt="Inspiring Keynotes" width="64"
59-
height="64" />
57+
<img src="{% static 'img/vectors/star-icon.svg' %}" alt="Inspiring Keynotes"
58+
class="w-[60px] h-[60px] mb-4" />
6059
</div>
6160
<h4 class="text-xl font-bold uppercase mb-3 font-bantayog">Inspiring Keynotes</h4>
62-
<p class="text-sm font-nunito w-full max-w-[305px] text-center sm:text-left xl:text-left">
61+
<p class="text-base font-nunito w-full max-w-[305px] text-center sm:text-left xl:text-left">
6362
Hear inspiring talks from core contributors, community leaders, and innovators shaping Python across
6463
Asia and beyond
6564
</p>
@@ -68,11 +67,11 @@ <h4 class="text-xl font-bold uppercase mb-3 font-bantayog">Inspiring Keynotes</h
6867
<div
6968
class="flex flex-col items-center justify-center sm:items-start sm:justify-start xl:items-start xl:justify-start">
7069
<div class="inline-block mb-2">
71-
<img src="{% static 'img/vectors/conversation-icon.svg' %}" alt="Talks & Lightning Talks" width="64"
72-
height="64" />
70+
<img src="{% static 'img/vectors/conversation-icon.svg' %}" alt="Talks & Lightning Talks"
71+
class="w-[60px] h-[60px] mb-4" />
7372
</div>
7473
<h4 class="text-xl font-bold uppercase mb-3 font-bantayog">Talks & Lightning Talks</h4>
75-
<p class="text-sm font-nunito w-full max-w-[305px] text-center sm:text-left xl:text-left">
74+
<p class="text-base font-nunito w-full max-w-[305px] text-center sm:text-left xl:text-left">
7675
From deep-dive sessions to quick, punchy insights, learn from diverse voices across the Python
7776
community.
7877
</p>
@@ -82,10 +81,10 @@ <h4 class="text-xl font-bold uppercase mb-3 font-bantayog">Talks & Lightning Tal
8281
class="flex flex-col items-center justify-center sm:items-start sm:justify-start xl:items-start xl:justify-start">
8382
<div class="inline-block mb-2">
8483
<img src="{% static 'img/vectors/icon-multitrack-and-live.svg' %}"
85-
alt="Multi-Track & Live Workshops" width="64" height="64" />
84+
alt="Multi-Track & Live Workshops" class="w-[60px] h-[60px] mb-4" />
8685
</div>
8786
<h4 class="text-xl font-bold uppercase mb-3 font-bantayog">Multi-Track & Live Workshops</h4>
88-
<p class="text-sm font-nunito w-full max-w-[305px] text-center sm:text-left xl:text-left">
87+
<p class="text-base font-nunito w-full max-w-[305px] text-center sm:text-left xl:text-left">
8988
Dive into AI/ML, Data Science, DevOps, Open Source, and region-specific use cases powering
9089
real-world impact.
9190
</p>
@@ -95,10 +94,10 @@ <h4 class="text-xl font-bold uppercase mb-3 font-bantayog">Multi-Track & Live Wo
9594
class="flex flex-col items-center justify-center sm:items-start sm:justify-start xl:items-start xl:justify-start">
9695
<div class="inline-block mb-2">
9796
<img src="{% static 'img/vectors/icon-community-gatherings.svg' %}" alt="Community Gatherings"
98-
width="64" height="64" />
97+
width="64" class="w-[85px] h-[60px] mb-4" />
9998
</div>
10099
<h4 class="text-xl font-bold uppercase mb-3 font-bantayog">Community Gatherings</h4>
101-
<p class="text-sm font-nunito w-full max-w-[305px] text-center sm:text-left xl:text-left">
100+
<p class="text-base font-nunito w-full max-w-[305px] text-center sm:text-left xl:text-left">
102101
Join special sessions like the PyLadies Lunch, and Open Spaces — designed to spark conversations and
103102
build connections.
104103
</p>
@@ -107,11 +106,11 @@ <h4 class="text-xl font-bold uppercase mb-3 font-bantayog">Community Gatherings<
107106
<div
108107
class="flex flex-col items-center justify-center sm:items-start sm:justify-start xl:items-start xl:justify-start">
109108
<div class="inline-block mb-2">
110-
<img src="{% static 'img/vectors/icon-career-mixer.svg' %}" alt="Career Mixer" width="64"
111-
height="64" />
109+
<img src="{% static 'img/vectors/icon-career-mixer.svg' %}" alt="Career Mixer"
110+
class="w-[60px] h-[60px] mb-4" />
112111
</div>
113112
<h4 class="text-xl font-bold uppercase mb-3 font-bantayog">Career Mixer</h4>
114-
<p class="text-sm font-nunito w-full max-w-[305px] text-center sm:text-left xl:text-left">
113+
<p class="text-base font-nunito w-full max-w-[305px] text-center sm:text-left xl:text-left">
115114
Meet potential employers, collaborators, and mentors in a relaxed, networking-focused environment.
116115
</p>
117116
</div>
@@ -120,10 +119,10 @@ <h4 class="text-xl font-bold uppercase mb-3 font-bantayog">Career Mixer</h4>
120119
class="flex flex-col items-center justify-center sm:items-start sm:justify-start xl:items-start xl:justify-start">
121120
<div class="inline-block mb-2">
122121
<img src="{% static 'img/vectors/icon-sponsor-booths.svg' %}" alt="Sponsor Booths & Stamp Quest"
123-
width="64" height="64" />
122+
class="w-[60px] h-[60px] mb-4" />
124123
</div>
125124
<h4 class="text-xl font-bold uppercase mb-3 font-bantayog">Sponsor Booths & Stamp Quest</h4>
126-
<p class="text-sm font-nunito w-full max-w-[305px] text-center sm:text-left xl:text-left">
125+
<p class="text-base font-nunito w-full max-w-[305px] text-center sm:text-left xl:text-left">
127126
Explore sponsor showcases, discover new opportunities, and complete our signature Stamp Collection
128127
Quest for fun tokens, prizes, and new connections.
129128
</p>
@@ -132,11 +131,10 @@ <h4 class="text-xl font-bold uppercase mb-3 font-bantayog">Sponsor Booths & Stam
132131
<div
133132
class="flex flex-col items-center justify-center sm:items-start sm:justify-start xl:items-start xl:justify-start">
134133
<div class="inline-block mb-2">
135-
<img src="{% static 'img/vectors/hands-on-icon.svg' %}" alt="Open Source Sprints" width="64"
136-
height="64" />
134+
<img src="{% static 'img/vectors/hands-on-icon.svg' %}" alt="Open Source Sprints" class="w-[75px] h-[60px] mb-4"/>
137135
</div>
138136
<h4 class="text-xl font-bold uppercase mb-3 font-bantayog">Open Source Sprints</h4>
139-
<p class="text-sm font-nunito w-full max-w-[305px] text-center sm:text-left xl:text-left">
137+
<p class="text-base font-nunito w-full max-w-[305px] text-center sm:text-left xl:text-left">
140138
Team up with maintainers and peers (bring your laptop!) to contribute to open source, then connect
141139
at our career fair.
142140
</p>
@@ -145,23 +143,23 @@ <h4 class="text-xl font-bold uppercase mb-3 font-bantayog">Open Source Sprints</
145143
<div
146144
class="flex flex-col items-center justify-center sm:items-start sm:justify-start xl:items-start xl:justify-start">
147145
<div class="inline-block mb-2">
148-
<img src="{% static 'img/vectors/icon-education-summit.svg' %}" alt="Education Summit" width="64"
149-
height="64" />
146+
<img src="{% static 'img/vectors/icon-education-summit.svg' %}" alt="Education Summit"
147+
class="w-[60px] h-[60px] mb-4" />
150148
</div>
151149
<h4 class="text-xl font-bold uppercase mb-3 font-bantayog">Education Summit</h4>
152-
<p class="text-sm font-nunito w-full max-w-[305px] text-center sm:text-left xl:text-left">
150+
<p class="text-base font-nunito w-full max-w-[305px] text-center sm:text-left xl:text-left">
153151
Co-organized with De La Salle University (DLSU), this special track brings together educators,
154152
students, and practitioners to explore how Python is shaping learning and research in Asia
155153
</p>
156154
</div>
157155
</div>
158156
<!-- Call to Action -->
159-
<div class="text-center bg-[#B04301] p-[30px] pb-10 rounded-2xl">
160-
<p class="text-lg mb-2 uppercase tracking-wide font-bantayog">
157+
<div class="text-center bg-[#B04301] p-[30px] pb-10 rounded-2xl" style="max-width: 1160 px; margin: 0 auto;">
158+
<p class="text-2xl mb-8 uppercase tracking-wide font-bantayog mx-auto" style="max-width: 900px;">
161159
Join hundreds of developers, students, educators, researchers, and community leaders from across Asia
162160
for 3 days of
163161
</p>
164-
<h3 class="md:text-6xl sm:text-4xl font-bold uppercase font-td_pinoy">Learning, Inspiration, and Connection
162+
<h3 class="md:text-[42px] text-4xl font-bold uppercase font-td_pinoy">Learning, Inspiration, and Connection
165163
</h3>
166164
</div>
167165
</div>

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{% load static %}
2-
<section id="annoucement" class="py-20 bg-[#FFF9F2]">
3-
<div class="w-full max-w-[1160px] mx-auto px-6 flex gap-[30px]">
2+
<section id="annoucement" class="py-20 bg-[#FFF9F2] section">
3+
<div class="w-full max-w-[1160px] mx-auto px-[4%] flex gap-[30px]">
44
<div class="w-[45%] max-w-[510px]">
55
<div>
66
<h2 class="text-orange-2 text-6xl leading-[120%] tracking-[2%] font-td_pinoy">

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

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
11
{% load static %}
2-
<section id="call-for-x" class="py-20 bg_call-for-links">
3-
<div class="container mx-auto px-6">
2+
<section id="call-for-x" class="py-20 md:py-36 px-[4%] bg_call-for-links relative">
3+
<div class="container mx-auto px-[4%]">
4+
<img src="{% static 'img/vectors/section-divider-03.svg' %}" alt="Section Break" class="w-full py-0 my-0 z-10 cstm_top block divider-03">
45
<!-- Header -->
5-
<div class="text-center mb-16">
6-
<h2 class="text-5xl md:text-6xl font-bold mb-12 font-td_pinoy text-white">Get Involved</h2>
6+
<div class="text-center md:mb-16 mb-8">
7+
<h2 class="text-5xl md:text-6xl font-bold mb-4 font-td_pinoy text-white">Get Involved</h2>
78
<p class="text-[28px] font-bantayog uppercase text-white">Magic happens when people come together to achieve
89
common goals.</p>
910
</div>
1011
<div
11-
class="flex flex-col sm:flex-row md:items-stretch md:justify-center items-center gap-8 mb-20 max-w-5xl mx-auto">
12+
class="flex flex-col sm:flex-row md:items-stretch md:justify-center items-center gap-8 max-w-5xl mx-auto">
1213

1314
<div
1415
class="p-8 rounded-2xl w-full max-w-[300px] min-h-[350px] bg-offwhite-2 border-t-[8px] border-t-[#B04301] h-[250px]">
@@ -34,9 +35,6 @@ <h4 class="text-2xl font-bold mb-0 font-bantayog text-brown-3">LINK:</h4>
3435
</div>
3536
</div>
3637
</div>
37-
38-
{% comment %}
39-
{% include "home/sections/tickets-section.html" %}
40-
{% endcomment %}
38+
<img src="{% static 'img/vectors/section-divider-04.svg' %}" alt="Section Break" class="w-full py-0 my-0 z-10 cstm_bottom block divider-04">
4139
</div>
4240
</section>

‎app/home/templates/home/sections/code-of-conduct.html‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
{% load static %}
22

3-
<section id="code-of-conduct" class="py-20" style="background: linear-gradient(to bottom, #F5DDB8 0%, #F3E6D4 100%);">
4-
<div class="container mx-auto px-6">
3+
<section id="code-of-conduct" class="py-24">
4+
<div class="container mx-auto px-[4%]">
55
<!-- Header -->
66
<div class="text-center mb-16">
77
<h2 class="text-5xl md:text-6xl font-bold mb-12 font-td_pinoy text-orange-2">Code of Conduct</h2>
88
</div>
99

1010
<!-- Intro Text -->
11-
<div class="text-center mb-12 max-w-4xl mx-auto">
11+
<div class="text-center mb-12 max-w-5xl mx-auto">
1212
<p class="text-3xl md:text-4xl uppercase font-semibold tracking-wide font-bantayog text-brown-1">
13-
PythonAsia is a community conference intended for <br>
13+
PythonAsia is a community conference intended for
1414
collaboration in the developer community.
1515
</p>
1616
</div>
@@ -37,20 +37,20 @@ <h2 class="text-5xl md:text-6xl font-bold mb-12 font-td_pinoy text-orange-2">Cod
3737
</div>
3838

3939
<!-- Contact Information -->
40-
<div class="mb-20 max-w-4xl mx-auto">
40+
<div class="mb-20 max-w-5xl mx-auto">
4141
<h3 class="text-3xl md:text-4xl font-bold text-center mb-2 font-bantayog text-brown-1">CONTACT INFORMATION</h3>
4242
<p class="text-lg leading-relaxed font-nunito text-brown-2 font-normal text-center">
4343
If you believe that someone is violating the code of conduct, or have any other concerns,
4444
please contact a member of the PythonAsia 2026 Code of Conduct workgroup immediately.
45-
They can be reached by emailing <a href="mailto:coc@python.ph">coc@python.ph</a>
45+
They can be reached by emailing <a class="font-bantayog text-orange-2 uppercase underline cursor-pointer" href="mailto:coc@python.ph">coc@python.ph</a>
4646
</p>
4747
</div>
4848

4949
<!-- License -->
5050
<div class="max-w-4xl mx-auto">
5151
<h3 class="text-3xl md:text-4xl font-bold text-center mb-2 font-bantayog text-brown-1">LICENSE</h3>
5252
<p class="text-lg leading-relaxed font-nunito text-brown-2 font-normal text-center">
53-
This Code of Conduct is based on the PyCon US 2015 CoC, and is licensed under a Creative Commons
53+
This Code of Conduct is based on the PyCon US 2015 CoC, and is licensed under a Creative Commons Attribution 3.0 Unported License.
5454
</p>
5555
</div>
5656
</div>

0 commit comments

Comments
 (0)