Skip to content

Commit 9e9fb1c

Browse files
kyleaquinokyleaquino
committed
feat: initialize landing page design
1 parent 9fbce82 commit 9e9fb1c

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

41 files changed

+915
-205
lines changed

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

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
{% load static %}
2+
3+
<div class="navbar bg-base-100 shadow-sm">
4+
<div class="navbar-start">
5+
<div class="dropdown">
6+
<div tabindex="0" role="button" class="btn btn-ghost lg:hidden">
7+
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h8m-8 6h16" /> </svg>
8+
</div>
9+
<ul
10+
tabindex="0"
11+
class="menu menu-sm dropdown-content bg-base-100 rounded-box z-[1] mt-3 w-52 p-2 shadow">
12+
<li>
13+
<a>About</a>
14+
<ul class="p-2">
15+
<li><a href="#">About the Conference</a></li>
16+
<li><a href="#">About PythonAsia</a></li>
17+
<li><a href="#">Team</a></li>
18+
<li><a href="#">Venue</a></li>
19+
</ul>
20+
</li>
21+
<li>
22+
<a>Get Involved</a>
23+
<ul class="p-2">
24+
<li><a href="#">Become a Sponsor</a></li>
25+
<li><a href="#">Volunteer</a></li>
26+
<li><a href="#">Speak at the Event</a></li>
27+
</ul>
28+
</li>
29+
<li>
30+
<a>Policies</a>
31+
<ul class="p-2">
32+
<li><a href="#">Code of Conduct</a></li>
33+
<li><a href="#">Privacy Policy</a></li>
34+
<li><a href="#">Terms & Conditions</a></li>
35+
</ul>
36+
</li>
37+
<li>
38+
<a>Attend</a>
39+
<ul class="p-2">
40+
<li><a href="#">Schedule</a></li>
41+
<li><a href="#">Speakers</a></li>
42+
<li><a href="#">Accommodation</a></li>
43+
<li><a href="#">Travel Info</a></li>
44+
</ul>
45+
</li>
46+
</ul>
47+
</div>
48+
<a class="btn btn-ghost text-xl">
49+
<img src="{% static 'img/logo.png' %}" alt="PythonAsia 2026" class="h-8 w-auto">
50+
</a>
51+
</div>
52+
<div class="navbar-center hidden lg:flex">
53+
<ul class="menu menu-horizontal px-1">
54+
<li>
55+
<details>
56+
<summary>About</summary>
57+
<ul class="p-2 bg-base-100 rounded-box z-[1] w-52 shadow">
58+
<li><a href="#">About the Conference</a></li>
59+
<li><a href="#">About PythonAsia</a></li>
60+
<li><a href="#">Team</a></li>
61+
<li><a href="#">Venue</a></li>
62+
</ul>
63+
</details>
64+
</li>
65+
<li>
66+
<details>
67+
<summary>Get Involved</summary>
68+
<ul class="p-2 bg-base-100 rounded-box z-[1] w-52 shadow">
69+
<li><a href="#">Become a Sponsor</a></li>
70+
<li><a href="#">Volunteer</a></li>
71+
<li><a href="#">Speak at the Event</a></li>
72+
</ul>
73+
</details>
74+
</li>
75+
<li>
76+
<details>
77+
<summary>Policies</summary>
78+
<ul class="p-2 bg-base-100 rounded-box z-[1] w-52 shadow">
79+
<li><a href="#">Code of Conduct</a></li>
80+
<li><a href="#">Privacy Policy</a></li>
81+
<li><a href="#">Terms & Conditions</a></li>
82+
</ul>
83+
</details>
84+
</li>
85+
<li>
86+
<details>
87+
<summary>Attend</summary>
88+
<ul class="p-2 bg-base-100 rounded-box z-[1] w-52 shadow">
89+
<li><a href="#">Schedule</a></li>
90+
<li><a href="#">Speakers</a></li>
91+
<li><a href="#">Accommodation</a></li>
92+
<li><a href="#">Travel Info</a></li>
93+
</ul>
94+
</details>
95+
</li>
96+
</ul>
97+
</div>
98+
<div class="navbar-end">
99+
<a href="#" class="btn btn-primary btn-square lg:btn-wide">
100+
<span class="hidden lg:inline-block material-symbols-outlined">sell</span>
101+
<span class="lg:inline">Get Tickets</span>
102+
</a>
103+
</div>
104+
</div>

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

Lines changed: 35 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,10 @@
22
{% load static %}
33

44
{% block content %}
5-
<div class="min-h-screen" style="background-image: url("{% static 'img/background.png' %}");">
5+
<div class="min-h-screen" style="background-image: url('{% static 'img/background.png' %}');">
6+
<!-- Navbar -->
7+
{% include "home/components/navbar.html" %}
8+
69
<main>
710
<section id="hero" class="text-white text-center flex items-center pt-20">
811
<div class="container mx-auto px-6 bg-cover w-[959.82px] hero-content">
@@ -19,15 +22,36 @@
1922
</section>
2023
</main>
2124

22-
<footer class="relative w-full h-[950px] mt-[-20px] z-0">
23-
<img src="{% static 'img/pytonio.svg' %}" alt="Left Snake" class="absolute left-0 bottom-80 w-[670px]">
24-
<img src="{% static 'img/pytria.svg' %}" alt="Right Snake" class="absolute right-0 bottom-80 w-[670px]">
25-
<img src="{% static 'img/pot.svg' %}" alt="Pot" class="absolute bottom-80 left-1/2 ml-[-70px] -translate-x-1/2 w-[574.49px] z-10">
26-
<img src="{% static 'img/base.svg' %}" alt="Bottom Base" class="absolute bottom-0 left-0 right-0 w-full z-0">
27-
<div class="absolute bottom-40 w-full text-center z-30">
28-
<h3 class="text-white font-bold">CO-ORGANIZED BY</h3>
29-
<img class="mx-auto h-[100px]" src="{% static 'img/coorganizers.png' %}">
30-
</div>
31-
</footer>
25+
<!-- Section Break -->
26+
<div class="w-full py-0 my-0 z-10 -mb-25">
27+
<img src="{% static 'img/vectors/section-break-1.svg' %}" alt="Section Break" class="w-full block">
28+
</div>
29+
30+
<!-- About Us Section -->
31+
{% include "home/sections/about-us.html" %}
32+
33+
<!-- Section Break -->
34+
<div class="w-full py-0 my-0 z-10 -mt-25">
35+
<img src="{% static 'img/vectors/section-break-2.svg' %}" alt="Section Break" class="w-full block">
36+
</div>
37+
38+
<!-- Conference at a Glance Section -->
39+
{% include "home/sections/conference-at-a-glance.html" %}
40+
41+
<!-- Why Python Section -->
42+
{% include "home/sections/why-python.html" %}
43+
44+
<!-- What is PyCon Section -->
45+
{% include "home/sections/what-is-python-asia.html" %}
46+
47+
<!-- Sponsors Section -->
48+
{% include "home/sections/sponsor-section.html" %}
49+
50+
<!-- Code of Conduct Section -->
51+
{% include "home/sections/code-of-conduct.html" %}
52+
53+
<!-- Footer Section -->
54+
{% include "home/sections/footer.html" %}
55+
3256
</div>
3357
{% endblock %}

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

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
{% load static %}
2+
3+
<section id="about-us" class="py-20 mt-5 text-white" style="background-color: #BD4B06;">
4+
<div class="container mx-auto px-6">
5+
<!-- Header -->
6+
<div class="text-center mb-16">
7+
<p class="text-sm uppercase tracking-wider mb-4">
8+
ᜆᜓᜅ᜔ᜃᜓᜎ᜔ ᜐ ᜀᜋᜒᜈ᜔
9+
</p>
10+
<h2 class="text-5xl md:text-6xl font-bold mb-12">What is PythonAsia?</h2>
11+
</div>
12+
13+
<!-- Main Content -->
14+
<div class="grid md:grid-cols-2 gap-12 items-start mb-20">
15+
<div class="text-left">
16+
<h3 class="text-2xl font-bold mb-6 uppercase">
17+
The largest gathering of Python<br/>
18+
developers in the Philippines with a<br/>
19+
global experience ▶
20+
</h3>
21+
<p class="text-base leading-relaxed">
22+
PyCon is a volunteer-run, non-profit conference for the Python
23+
community, held worldwide since starting in the US. In the
24+
Philippines, PyCon PH has been organized annually since
25+
2012, featuring local and international speakers for a globally
26+
enriching experience.
27+
</p>
28+
</div>
29+
<div class="flex justify-center items-center">
30+
<div class="relative">
31+
<img src="{% static 'img/about-us-photo.png' %}" alt="PyCon PH 2025 Conference">
32+
</div>
33+
</div>
34+
</div>
35+
36+
<!-- 3 Days Section -->
37+
<div class="text-center mb-12">
38+
<h3 class="text-5xl font-bold mb-8">3 Days, Endless Possibilities</h3>
39+
<p class="text-lg max-w-4xl mx-auto leading-relaxed">
40+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Lorem ipsum dolor sit amet, consectetur
41+
adipiscing elit. Ut et massa mi. Aliquam in hendrerit urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi.
42+
</p>
43+
</div>
44+
45+
<!-- Features Grid -->
46+
<div class="grid md:grid-cols-3 gap-8 mb-16">
47+
<!-- World-Class Keynotes -->
48+
<div class="text-center">
49+
<div class="inline-block p-4 mb-4">
50+
<span class="material-symbols-outlined text-white" style="font-size: 64px;">star</span>
51+
</div>
52+
<h4 class="text-xl font-bold uppercase mb-3">World-Class Keynotes</h4>
53+
<p class="text-sm">
54+
From core contributors, startup founders, and AI pioneers.
55+
</p>
56+
</div>
57+
58+
<!-- Multi-Track & Live Labs -->
59+
<div class="text-center">
60+
<div class="inline-block p-4 mb-4">
61+
<span class="material-symbols-outlined text-white" style="font-size: 64px;">forum</span>
62+
</div>
63+
<h4 class="text-xl font-bold uppercase mb-3">Multi-Track & Live Labs</h4>
64+
<p class="text-sm">
65+
Covering AI/ML, data science, DevOps, and open source.
66+
</p>
67+
</div>
68+
69+
<!-- Hands-On Sprints -->
70+
<div class="text-center">
71+
<div class="inline-block p-4 mb-4">
72+
<span class="material-symbols-outlined text-white" style="font-size: 64px;">code</span>
73+
</div>
74+
<h4 class="text-xl font-bold uppercase mb-3">Hands-On Sprints</h4>
75+
<p class="text-sm">
76+
Code with maintainers (bring your laptop), then connect at our career expo & sponsor zone.
77+
</p>
78+
</div>
79+
</div>
80+
81+
<!-- Call to Action -->
82+
<div class="text-center">
83+
<p class="text-lg mb-2 uppercase tracking-wide">
84+
Join <strong>200+ builders, students, and founders</strong>, for <strong>48 hours</strong> of
85+
</p>
86+
<h3 class="text-5xl md:text-6xl font-bold uppercase">
87+
Code, Coffee, and Collaboration.
88+
</h3>
89+
</div>
90+
</div>
91+
</section>

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

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
{% load static %}
2+
3+
<section id="code-of-conduct" class="py-20" style="background: linear-gradient(to bottom, #F5DDB8 0%, #EDD4B0 100%);">
4+
<div class="container mx-auto px-6">
5+
<!-- Header -->
6+
<div class="text-center mb-16">
7+
<p class="text-sm uppercase tracking-wider mb-4" style="color: #7C5E3B;">
8+
ᜊᜆᜐ᜔ ᜊᜆᜐ᜔ ᜊᜓᜑᜌ᜔
9+
</p>
10+
<h2 class="text-5xl md:text-6xl font-bold mb-12" style="color: #D87A3F;">Code of Conduct</h2>
11+
</div>
12+
13+
<!-- Intro Text -->
14+
<div class="text-center mb-12 max-w-4xl mx-auto">
15+
<p class="text-lg uppercase font-semibold tracking-wide" style="color: #7C5E3B;">
16+
PyCon PH is a community conference intended for<br/>
17+
collaboration in the developer community.
18+
</p>
19+
</div>
20+
21+
<!-- Main Content Grid -->
22+
<div class="grid md:grid-cols-2 gap-12 mb-20 max-w-5xl mx-auto">
23+
<div class="text-left">
24+
<p class="text-base leading-relaxed" style="color: #7C5E3B;">
25+
We value the participation of each member of the Python
26+
community and want all attendees to have an enjoyable
27+
and fulfilling experience. Accordingly, all attendees are
28+
expected to show respect and courtesy to other attendees
29+
throughout the conference and at all conference events,
30+
whether officially sponsored by PythonPH, Inc. or not.
31+
</p>
32+
</div>
33+
<div class="text-left">
34+
<p class="text-base leading-relaxed" style="color: #7C5E3B;">
35+
To make clear what is expected, all delegates/attendees,
36+
speakers, exhibitors, organizers and volunteers at any
37+
PyCon event are required to conform to the following
38+
Code of Conduct. Organizers will enforce this code
39+
throughout the event.
40+
</p>
41+
</div>
42+
</div>
43+
44+
<!-- Contact Information -->
45+
<div class="mb-20 max-w-4xl mx-auto">
46+
<h3 class="text-3xl md:text-4xl font-bold text-center mb-8" style="color: #7C5E3B;">CONTACT INFORMATION</h3>
47+
<p class="text-base text-center leading-relaxed" style="color: #7C5E3B;">
48+
If you believe that someone is violating the code of conduct, or have any other concerns, please contact a member of the
49+
PyCon APAC 2025 Code of Conduct workgroup immediately. They can be reached by emailing coc@python.ph
50+
</p>
51+
</div>
52+
53+
<!-- License -->
54+
<div class="max-w-4xl mx-auto">
55+
<h3 class="text-3xl md:text-4xl font-bold text-center mb-8" style="color: #7C5E3B;">LICENSE</h3>
56+
<p class="text-base text-center leading-relaxed" style="color: #7C5E3B;">
57+
This Code of Conduct is based on the PyCon US 2015 CoC, and is licensed under a Creative Commons
58+
Attribution 3.0 Unported License.
59+
</p>
60+
</div>
61+
</div>
62+
</section>
63+

0 commit comments

Comments
 (0)