Skip to content

Commit 669f5b6

Browse files
iRenanMatthewiRenanMatthew
authored
Update and restructure hero section and UI cleanup and fix for homepage
Update and restructure hero section and UI cleanup and fix for homepage
2 parents b9834cc + 9a76d02 commit 669f5b6

File tree

10 files changed

+117
-126
lines changed

10 files changed

+117
-126
lines changed

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

Lines changed: 9 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,15 @@
11
{% extends "base.html" %}
22
{% load static %}
33
{% block content %}
4+
<main>
45
<div class="min-h-screen"
56
style="background-image: url('{% static 'img/background.png' %}')">
67
<!-- Navbar -->
78
{% include "home/components/navbar.html" %}
8-
<main>
9-
<section id="hero" class="text-white text-center flex">
10-
<div class="container mx-auto w-full max-w-[730px] pt-[140px] pb-[120px]">
11-
<div class="flex flex-col justify-center space-y-8">
12-
<img src="{% static 'img/vectors/kalinga-baybayin.svg' %}"
13-
alt="kliN"
14-
class="w-full max-w-[189px] h-auto mx-auto">
15-
<img src="{% static 'img/kalinga.png' %}"
16-
alt="Kalinga"
17-
class="w-full max-w-[336.34px] h-auto mx-auto">
18-
<img src="{% static 'img/vectors/python-asia-branding.png' %}"
19-
alt="PythonAsia 2026"
20-
class="w-full max-w-[635px] h-auto mx-auto">
21-
<div class="text-center text-[#7C5E3B] z-30">
22-
Nurturing a community of care, compassion, and growth.
23-
<br />
24-
The same heart of PyCon APAC, now as PythonAsia.
25-
</div>
9+
10+
<!-- Hero Section -->
11+
{% include "home/sections/hero-section.html" %}
2612

27-
<div class="python-kalinga-pot">
28-
<img class="pot" src="{% static 'img/py_kalinga-pot.svg' %}" alt="Kalinga pot">
29-
<div class="justify-self-end self-center">
30-
<h2 class="font-bantayog text-[28px] text-white">Co-organized By</h2>
31-
<div class="flex flex-row items-center justify-center gap-[45px] co-organized">
32-
<img src="{% static 'img/footer/pythonph.svg' %}" alt="PythonPH" class="w-full max-w-[210px]">
33-
<img src="{% static 'img/footer/pythonasia.svg' %}" alt="Python Asia Organization" class="w-full max-w-[320px]">
34-
<img src="{% static 'img/footer/dlsu.svg' %}" alt="DLSU" class="w-full max-w-[110px]">
35-
</div>
36-
</div>
37-
</div>
38-
</div>
39-
</div>
40-
</section>
41-
42-
</main>
43-
<!-- When? Where? Section -->
44-
{% include "home/sections/when-where-section.html" %}
4513
<div class="w-full py-0 my-0 z-10 -mb-25 hidden xl:block cstm_break mt-[-9vw]">
4614
<img src="{% static 'img/vectors/section-break-1.svg' %}"
4715
alt="Section Break"
@@ -62,9 +30,11 @@ <h2 class="font-bantayog text-[28px] text-white">Co-organized By</h2>
6230
<!-- Call For X -->
6331
{% include "home/sections/call-for-x.html" %}
6432
<!-- What is PyCon Section -->
65-
{% comment%}{% include "home/sections/what-is-python-asia.html" %}{% endcomment%}
33+
{% comment%}{% include "home/sections/what-is-python-asia.html" %}
6634
<!-- Announcement Section -->
67-
{% include "home/sections/announcement-section.html" %}
35+
{% comment%}{% include "home/sections/announcement-section.html" %}{% endcomment%}
36+
<!-- When? Where? Section -->
37+
{% include "home/sections/when-where-section.html" %}
6838
<!-- Sponsors Section -->
6939
{% comment %}
7040
{% include "home/sections/sponsor-section.html" %}
@@ -74,4 +44,5 @@ <h2 class="font-bantayog text-[28px] text-white">Co-organized By</h2>
7444
<!-- Footer Section -->
7545
{% include "home/sections/footer.html" %}
7646
</div>
47+
</main>
7748
{% endblock %}

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

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -35,96 +35,96 @@ <h3 class="text-2xl font-bold mb-6 uppercase font-bantayog">
3535
</div>
3636
<!-- 3 Days Section -->
3737
<div class="mb-12 w-full max-w-[1160px] mx-auto">
38-
<h3 class="text-5xl font-bold mb-8 font-td_pinoy">3 Days, Endless Possibilities</h3>
39-
<p class="text-lg leading-relaxed font-nunito">
38+
<h3 class="text-5xl font-bold mb-8 font-td_pinoy text-center sm:text-left xl:text-left">3 Days, Endless Possibilities</h3>
39+
<p class="text-lg leading-relaxed font-nunito text-center sm:text-left xl:text-left">
4040
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.
4141
</p>
4242
</div>
4343
<!-- Features Grid -->
4444
<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">
4545
<!-- Inspiring Keynotes -->
46-
<div>
46+
<div class="flex flex-col items-center justify-center sm:items-start sm:justify-start xl:items-start xl:justify-start">
4747
<div class="inline-block mb-2">
4848
<img src="{% static 'img/vectors/star-icon.svg' %}"
4949
alt="Inspiring Keynotes" />
5050
</div>
5151
<h4 class="text-xl font-bold uppercase mb-3 font-bantayog">Inspiring Keynotes</h4>
52-
<p class="text-sm font-nunito w-full max-w-[305px]">
52+
<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">
5353
Hear inspiring talks from core contributors, community leaders, and innovators shaping Python across Asia and beyond
5454
</p>
5555
</div>
5656
<!-- Talks & Lightning Talks -->
57-
<div>
57+
<div class="flex flex-col items-center justify-center sm:items-start sm:justify-start xl:items-start xl:justify-start">
5858
<div class="inline-block mb-2">
5959
<img src="{% static 'img/vectors/conversation-icon.svg' %}"
6060
alt="Talks & Lightning Talks" />
6161
</div>
6262
<h4 class="text-xl font-bold uppercase mb-3 font-bantayog">Talks & Lightning Talks</h4>
63-
<p class="text-sm font-nunito w-full max-w-[305px]">
63+
<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">
6464
From deep-dive sessions to quick, punchy insights, learn from diverse voices across the Python community.
6565
</p>
6666
</div>
6767
<!-- Multi-Track & Live Workshops -->
68-
<div>
68+
<div class="flex flex-col items-center justify-center sm:items-start sm:justify-start xl:items-start xl:justify-start">
6969
<div class="inline-block mb-2">
7070
<img src="{% static 'img/vectors/icon-multitrack-and-live.svg' %}"
7171
alt="Multi-Track & Live Workshops" />
7272
</div>
7373
<h4 class="text-xl font-bold uppercase mb-3 font-bantayog">Multi-Track & Live Workshops</h4>
74-
<p class="text-sm font-nunito w-full max-w-[305px]">
74+
<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">
7575
Dive into AI/ML, Data Science, DevOps, Open Source, and region-specific use cases powering real-world impact.
7676
</p>
7777
</div>
7878
<!-- Community Gatherings -->
79-
<div>
79+
<div class="flex flex-col items-center justify-center sm:items-start sm:justify-start xl:items-start xl:justify-start">
8080
<div class="inline-block mb-2">
8181
<img src="{% static 'img/vectors/icon-community-gatherings.svg' %}"
8282
alt="Community Gatherings" />
8383
</div>
8484
<h4 class="text-xl font-bold uppercase mb-3 font-bantayog">Community Gatherings</h4>
85-
<p class="text-sm font-nunito w-full max-w-[305px]">
85+
<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">
8686
Join special sessions like the PyLadies Lunch, and Open Spaces — designed to spark conversations and build connections.
8787
</p>
8888
</div>
8989
<!-- Career Mixer -->
90-
<div>
90+
<div class="flex flex-col items-center justify-center sm:items-start sm:justify-start xl:items-start xl:justify-start">
9191
<div class="inline-block mb-2">
9292
<img src="{% static 'img/vectors/icon-career-mixer.svg' %}" alt="Career Mixer" />
9393
</div>
9494
<h4 class="text-xl font-bold uppercase mb-3 font-bantayog">Career Mixer</h4>
95-
<p class="text-sm font-nunito w-full max-w-[305px]">
95+
<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">
9696
Meet potential employers, collaborators, and mentors in a relaxed, networking-focused environment.
9797
</p>
9898
</div>
9999
<!-- Sponsor Booths & Stamp Quest -->
100-
<div>
100+
<div class="flex flex-col items-center justify-center sm:items-start sm:justify-start xl:items-start xl:justify-start">
101101
<div class="inline-block mb-2">
102102
<img src="{% static 'img/vectors/icon-sponsor-booths.svg' %}"
103103
alt="Sponsor Booths & Stamp Quest" />
104104
</div>
105105
<h4 class="text-xl font-bold uppercase mb-3 font-bantayog">Sponsor Booths & Stamp Quest</h4>
106-
<p class="text-sm font-nunito w-full max-w-[305px]">
106+
<p class="text-sm font-nunito w-full max-w-[305px] text-center sm:text-left xl:text-left">
107107
Explore sponsor showcases, discover new opportunities, and complete our signature Stamp Collection Quest for fun tokens, prizes, and new connections.
108108
</p>
109109
</div>
110110
<!-- Open Source Sprints -->
111-
<div>
111+
<div class="flex flex-col items-center justify-center sm:items-start sm:justify-start xl:items-start xl:justify-start">
112112
<div class="inline-block mb-2">
113113
<img src="{% static 'img/vectors/hands-on-icon.svg' %}"
114114
alt="Open Source Sprints" />
115115
</div>
116116
<h4 class="text-xl font-bold uppercase mb-3 font-bantayog">Open Source Sprints</h4>
117-
<p class="text-sm font-nunito w-full max-w-[305px]">
117+
<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">
118118
Team up with maintainers and peers (bring your laptop!) to contribute to open source, then connect at our career fair.
119119
</p>
120120
</div>
121121
<!-- Education Summit -->
122-
<div>
122+
<div class="flex flex-col items-center justify-center sm:items-start sm:justify-start xl:items-start xl:justify-start">
123123
<div class="inline-block mb-2">
124124
<img src="{% static 'img/vectors/icon-education-summit.svg' %}" alt="Education Summit" />
125125
</div>
126126
<h4 class="text-xl font-bold uppercase mb-3 font-bantayog">Education Summit</h4>
127-
<p class="text-sm font-nunito w-full max-w-[305px]">
127+
<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">
128128
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
129129
</p>
130130
</div>

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

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
{% load static %}
2-
{% comment %}
32
<section id="annoucement" class="py-20 bg-[#FFF9F2]">
43
<div class="w-full max-w-[1160px] mx-auto px-6 flex gap-[30px]">
54
<div class="w-[45%] max-w-[510px]">
65
<div>
7-
<h2 class="color-[#F26D1D] text-6xl leading-[120%] tracking-[2%] font-td_pinoy">
6+
<h2 class="text-orange-2 text-6xl leading-[120%] tracking-[2%] font-td_pinoy">
87
Announcement
98
</h2>
109
</div>
@@ -65,4 +64,3 @@ <h3 class="font-bantayog [28px] leading-[130%] color-[#84400F] capitalize">Lorem
6564
</div>
6665
</div>
6766
</section>
68-
{% endcomment %}

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

Lines changed: 11 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,29 @@
11
{% load static %}
2-
<section id="call-for-x" class="py-20 bg-[url('{% static 'img/call-for-links.png' %}')] bg-contain bg-center">
2+
<section id="call-for-x" class="py-20 bg_call-for-links">
33
<div class="container mx-auto px-6">
44
<!-- Header -->
55
<div class="text-center mb-16">
6-
<h2 class="text-5xl md:text-6xl font-bold mb-12 font-td_pinoy"
7-
style="color: #D87A3F">Get Involved</h2>
8-
<p class="text-lg font-nunito text-uppercase text-brown-2">
9-
Magic happens when people come together to achieve common goals.
10-
</p>
6+
<h2 class="text-5xl md:text-6xl font-bold mb-12 font-td_pinoy text-white">Get Involved</h2>
7+
<p class="text-[28px] font-bantayog uppercase text-white">Magic happens when people come together to achieve common goals.</p>
118
</div>
129
<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">
1310

14-
<div class="p-8 rounded-2xl w-full max-w-[300px] bg-offwhite-2 border-t-[8px] border-t-[#F26D1D] h-[250px]">
11+
<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]">
1512
<div class="mb-6">
16-
<h3 class="text-2xl font-bold mb-0 font-bantayog text-brown-1">CALL FOR PROPOSALS</h3>
13+
<h3 class="text-4xl font-bold mb-0 font-bantayog text-brown-1">CALL FOR PROPOSALS</h3>
1714
</div>
1815
<div class="space-y-3">
19-
<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>
16+
<h4 class="text-2xl font-bold mb-0 font-bantayog text-brown-3 font-bold">LINK:</h4>
17+
<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>
2018
</div>
2119
</div>
22-
<div class="p-8 rounded-2xl w-full max-w-[300px] bg-offwhite-2 border-t-[8px] border-t-[#ffa218] h-[250px]">
20+
<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]">
2321
<div class="mb-6">
24-
<h3 class="text-2xl font-bold mb-0 font-bantayog text-brown-1">CALL FOR SPONSORS</h3>
22+
<h3 class="text-4xl font-bold mb-0 font-bantayog text-brown-1">CALL FOR SPONSORS</h3>
2523
</div>
2624
<div class="space-y-3">
27-
<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>
25+
<h4 class="text-2xl font-bold mb-0 font-bantayog text-brown-3 font-bold">LINK:</h4>
26+
<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>
2827
</div>
2928
</div>
3029
</div>

0 commit comments

Comments
 (0)