Skip to content

Commit 210c498

Browse files
Mohit Khandelwalfarhaanbukhsh
Mohit Khandelwal
authored and
farhaanbukhsh
committed
feat: add billboard component to display date and venue
Issue: #169
1 parent e378816 commit 210c498

File tree

5 files changed

+160
-21
lines changed

5 files changed

+160
-21
lines changed

‎src/_data/event_schedule.json

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
"summary": {
3+
"title": "12 Sep - 15 Sep"
4+
},
5+
"workshop": {
6+
"title": "12 Sep - Workshop",
7+
"body": "St. Francis College, Bengaluru",
8+
"theme": "purple"
9+
},
10+
"conference": {
11+
"title": "13-14 Sep - Conference",
12+
"body": "NIMHANS Convention Centre, Bengaluru",
13+
"theme": "red"
14+
},
15+
"devsprint": {
16+
"title": "15 Sep - DevSprint",
17+
"body": "To be announced",
18+
"theme": "blue"
19+
}
20+
}

‎src/_includes/components/billboard.njk

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
{% macro billboard(theme="", title="", body="") %}
2+
{% if theme == "purple" %}
3+
{% set titlebar_bg_color = "bg-[#CD89FF]" %}
4+
{% set content_bg_color = "bg-[#F3E3FF]" %}
5+
{% set title_text_color = "text-[#8E32D2]" %}
6+
{% set subtitle_text_color = "text-[#000000A8]" %}
7+
{% elif theme == "red" %}
8+
{% set titlebar_bg_color = "bg-[#F073B4]" %}
9+
{% set content_bg_color = "bg-[#FFE1F1]" %}
10+
{% set title_text_color = "text-[#CD1F7A]" %}
11+
{% set subtitle_text_color = "text-[#000000A8]" %}
12+
{% elif theme == "blue" %}
13+
{% set titlebar_bg_color = "bg-[#7291EB]" %}
14+
{% set content_bg_color = "bg-[#E9EFFD]" %}
15+
{% set title_text_color = "text-[#3D60FF]" %}
16+
{% set subtitle_text_color = "text-[#000000A8]" %}
17+
{% else %}
18+
{% set titlebar_bg_color = "bg-[#8385F2]" %}
19+
{% set content_bg_color = "bg-[#F0EEFF]" %}
20+
{% set title_text_color = "text-[#7D83F9]" %}
21+
{% set subtitle_text_color = "text-[#000000A8]" %}
22+
{% endif %}
23+
24+
<div class="border border-black">
25+
<div class="px-4 py-1 border-b border-black {{ titlebar_bg_color }}">
26+
<!-- header -->
27+
<div class="window-titlebar-dots-reverse">
28+
<div class="w-2 h-2 bg-[#D7FF7B] rounded-full"></div>
29+
<div class="w-2 h-2 bg-[#D7FF7B] rounded-full"></div>
30+
<div class="w-2 h-2 bg-[#D7FF7B] rounded-full"></div>
31+
</div>
32+
<!--// header -->
33+
</div>
34+
<div class="p-5 {{ content_bg_color }}" style="display: flex; flex-direction: column; gap: 0.5rem;">
35+
<!-- title -->
36+
{% if title != "" %}
37+
{% if body == "" %}
38+
<p class="text-2xl font-bold text-center {{ title_text_color }}">{{ title }}</p>
39+
{% else %}
40+
<p class="text-xl {{ title_text_color }}">{{ title }}</p>
41+
{% endif %}
42+
{% endif %}
43+
<!-- // title -->
44+
45+
<!-- body -->
46+
{% if body != "" %}
47+
<p class="text-base {{ subtitle_text_color }} {{ text_align }}">{{ body }}</p>
48+
{% endif %}
49+
<!-- //body -->
50+
</div>
51+
</div>
52+
{% endmacro %}

‎src/_includes/landing/hero.njk

Lines changed: 42 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,48 @@
11
{% from "components/button.njk" import button %}
2+
{% from "components/billboard.njk" import billboard %}
23

3-
<div class="bg-pycon-blue w-full space-y-6 py-16 px-4 sm:px-20 md:px-40 -mt-1">
4-
<div class="flex justify-between w-full items-center">
5-
<h1 class="text-white text-4xl sm:text-5xl font-extrabold leading-tight">
6-
PYCON <br/>
7-
<span class="text-white">INDIA 2025</span>
8-
</h1>
9-
<div class="relative whitespace-nowrap">
10-
<div class="relative z-10 text-blue-600 font-semibold px-6 sm:px-8 py-6 sm:py-8 text-xl sm:text-2xl">
11-
12 Sep - 15 Sep
12-
</div>
13-
<img src="{{ env.baseUrl }}img/assets/date-display.svg" alt="Date background" class="absolute inset-0 w-full h-full z-0">
14-
<div class="absolute -bottom-8 -right-4">
15-
<img src="{{ env.baseUrl }}img/assets/star-lime-vector.svg" alt="Groovy star" class="w-12 h-12">
16-
</div>
4+
{% set events = event_schedule %}
5+
6+
<div class="bg-pycon-blue w-full py-16 px-4 sm:px-20 md:px-40 -mt-1 flex flex-col md:flex-row gap-2 justify-between">
7+
<div class="w-full">
8+
<div class="flex justify-between w-full items-center">
9+
<h1 class="text-white text-4xl sm:text-5xl font-extrabold leading-tight">
10+
PYCON <br/>
11+
<span class="text-white">INDIA 2025</span>
12+
</h1>
13+
</div>
14+
<p class="text-white text-md sm:text-lg max-w-xl leading-relaxed">
15+
PyCon India 2025 is the premier conference for Python enthusiasts and professionals, offering an unparalleled
16+
opportunity to dive deep into the world of Python and explore its limitless potential. Stay tuned for updates!
17+
</p>
18+
<div class="flex flex-wrap gap-4">
19+
{{ button(text="Get Tickets", url=env.baseUrl + "tickets", lime_bg=true)}}
20+
{{ button(text="View Schedule", url=env.baseUrl + "program/schedule", lime_bg=true)}}
1721
</div>
1822
</div>
19-
<p class="text-white text-md sm:text-lg max-w-xl leading-relaxed">
20-
PyCon India 2025 is the premier conference for Python enthusiasts and professionals, offering an unparalleled
21-
opportunity to dive deep into the world of Python and explore its limitless potential. Stay tuned for updates!
22-
</p>
23-
<div class="flex flex-wrap gap-4">
24-
{{ button(text="Get Tickets", url=env.baseUrl + "tickets", lime_bg=true)}}
25-
{{ button(text="View Schedule", url=env.baseUrl + "program/schedule", lime_bg=true)}}
23+
<div class="grid w-full grid-cols-1 gap-x-1 gap-y-2 lg:grid-cols-12 lg:auto-rows-auto">
24+
<div class="pb-2 lg:row-start-1 lg:col-start-2 lg:col-end-12 xl:col-start-3 xl:col-end-11">
25+
{% call billboard(theme="", title=events.summary.title) -%}
26+
{%- endcall %}
27+
</div>
28+
<div class="lg:row-start-2 lg:col-start-1 lg:col-end-9 xl:col-start-1 xl:col-end-7">
29+
{% call billboard(theme=events.workshop.theme, title=events.workshop.title, body=events.workshop.body) -%}
30+
{%- endcall %}
31+
</div>
32+
<div class="relative overflow-visible lg:row-start-2 lg:col-start-9 lg:col-end-13">
33+
<img
34+
src="{{ env.baseUrl }}img/assets/timeline.svg"
35+
alt="Calendar"
36+
class="absolute bottom-0 right-0 hidden w-full translate-x-8 translate-y-2 max-h-[140px] object-contain pointer-events-none lg:block z-0"
37+
/>
38+
</div>
39+
<div class="lg:row-start-3 lg:col-start-3 lg:col-end-11 xl:col-start-4 xl:col-end-10">
40+
{% call billboard(theme=events.conference.theme, title=events.conference.title, body=events.conference.body) -%}
41+
{%- endcall %}
42+
</div>
43+
<div class="lg:row-start-4 lg:col-start-5 lg:col-end-13 xl:col-start-7 xl:col-end-13">
44+
{% call billboard(theme=events.devsprint.theme, title=events.devsprint.title, body=events.devsprint.body) -%}
45+
{%- endcall %}
46+
</div>
2647
</div>
2748
</div>

‎src/css/main.css

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -479,6 +479,12 @@ body:not(.is-home-page) main {
479479
gap: 8px;
480480
}
481481

482+
.window-titlebar-dots-reverse {
483+
display: flex;
484+
gap: 8px;
485+
flex-direction: row-reverse;
486+
}
487+
482488
.window-titlebar-dot {
483489
width: 12px;
484490
height: 12px;

‎src/static/img/assets/timeline.svg

Lines changed: 40 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)