Skip to content

Commit 9a76d02

Browse files
iRenanMatthewiRenanMatthew
committed
feat: Update and restructure hero section and fix responsiveness from desktop to table for every sections on homepage
1 parent bc0d186 commit 9a76d02

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)