Skip to content

Commit f15f284

Browse files
HeliasHelias
committed
feat: improve homepage
1 parent 116d6c9 commit f15f284

9 files changed

Lines changed: 92 additions & 79 deletions

File tree

‎public/images/homepage/CallForSpeaker.jpeg‎

185 KB
Loading

‎public/images/homepage/NextMeetup.jpg‎

385 KB
Loading

‎public/images/homepage/PyCatania-intro.jpg‎

279 KB
Loading

‎src/app/components/call-for-speakers/call-for-speakers.component.html‎

Lines changed: 29 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,30 @@
1-
<section id="call-for-speakers" class="px-4 py-16 text-center">
2-
<h2>{{ 'callForSpeakers.title' | transloco }}</h2>
3-
<p class="mx-auto mb-8 max-w-xl">{{ 'callForSpeakers.description' | transloco }}</p>
4-
<a
5-
id="call-for-speakers-link"
6-
href="https://github.com/PythonCatania/PythonCatania.github.io/issues/new?title=Talk+Proposal&labels=talk"
7-
target="_blank"
8-
rel="noopener"
9-
role="button"
10-
aria-label="Proponi un talk"
11-
class="inline-flex cursor-pointer items-center justify-center gap-2 rounded-(--radius) border-2 border-(--color-primary) bg-(--color-primary) px-6 py-2 text-base font-semibold text-white no-underline transition-colors hover:border-(--color-primary-hover) hover:bg-(--color-primary-hover) hover:text-white"
12-
>
13-
{{ 'callForSpeakers.cta' | transloco }}
14-
</a>
1+
<section id="call-for-speakers" class="px-4">
2+
<div class="mx-auto flex max-w-5xl flex-col items-center gap-10 md:flex-row">
3+
<div class="w-full md:w-1/2">
4+
<img
5+
ngSrc="/images/homepage/CallForSpeaker.jpeg"
6+
alt="Call for Speakers"
7+
width="1440"
8+
height="1440"
9+
class="w-full rounded-(--radius) object-cover shadow-lg"
10+
/>
11+
</div>
12+
<div class="flex w-full flex-col items-center gap-4 text-center md:w-1/2 md:items-start md:text-left">
13+
<div class="py-16">
14+
<h2>{{ 'callForSpeakers.title' | transloco }}</h2>
15+
<p class="mb-8">{{ 'callForSpeakers.description' | transloco }}</p>
16+
<a
17+
id="call-for-speakers-link"
18+
href="https://github.com/PythonCatania/PythonCatania.github.io/issues/new?title=Talk+Proposal&labels=talk"
19+
target="_blank"
20+
rel="noopener"
21+
role="button"
22+
aria-label="Proponi un talk"
23+
class="inline-flex cursor-pointer items-center justify-center gap-2 rounded-(--radius) border-2 border-(--color-primary) bg-(--color-primary) px-6 py-2 text-base font-semibold text-white no-underline transition-colors hover:border-(--color-primary-hover) hover:bg-(--color-primary-hover) hover:text-white"
24+
>
25+
{{ 'callForSpeakers.cta' | transloco }}
26+
</a>
27+
</div>
28+
</div>
29+
</div>
1530
</section>

‎src/app/components/call-for-speakers/call-for-speakers.component.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
import { ChangeDetectionStrategy, Component } from '@angular/core';
2+
import { NgOptimizedImage } from '@angular/common';
23
import { TranslocoModule } from '@jsverse/transloco';
34

45
@Component({
56
selector: 'app-call-for-speakers',
6-
imports: [TranslocoModule],
7+
imports: [NgOptimizedImage, TranslocoModule],
78
templateUrl: './call-for-speakers.component.html',
89
changeDetection: ChangeDetectionStrategy.OnPush,
910
})

‎src/app/components/header/header.component.html‎

Lines changed: 9 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -23,22 +23,22 @@
2323
>{{ 'nav.home' | transloco }}</a
2424
>
2525
</li>
26-
<!-- Contacts -->
26+
<!-- Call for Speakers -->
2727
<li class="flex list-none items-center">
2828
<a
29-
href="#contact"
30-
(click)="scrollTo($event, 'contact')"
29+
href="#call-for-speakers"
30+
(click)="scrollTo($event, 'call-for-speakers')"
3131
class="rounded-(--radius) px-3 py-[0.4rem] text-inherit no-underline transition-colors duration-150 hover:bg-(--surface)"
32-
>{{ 'nav.contacts' | transloco }}</a
32+
>{{ 'nav.callForSpeakers' | transloco }}</a
3333
>
3434
</li>
35-
<!-- Supporters -->
35+
<!-- Contacts -->
3636
<li class="flex list-none items-center">
3737
<a
38-
href="#supporters"
39-
(click)="scrollTo($event, 'supporters')"
38+
href="#contact"
39+
(click)="scrollTo($event, 'contact')"
4040
class="rounded-(--radius) px-3 py-[0.4rem] text-inherit no-underline transition-colors duration-150 hover:bg-(--surface)"
41-
>{{ 'nav.supporters' | transloco }}</a
41+
>{{ 'nav.contacts' | transloco }}</a
4242
>
4343
</li>
4444
<!-- Eventi -->
@@ -63,25 +63,6 @@
6363
>
6464
</li>
6565

66-
<!-- Next Meetup -->
67-
<!-- <li class="flex list-none items-center">
68-
<a
69-
href="#next-meetup"
70-
(click)="scrollTo($event, 'next-meetup')"
71-
class="rounded-(--radius) px-3 py-[0.4rem] text-inherit no-underline transition-colors duration-150 hover:bg-(--surface)"
72-
>{{ 'nav.nextMeetup' | transloco }}</a
73-
>
74-
</li> -->
75-
76-
<!-- Call for Speakers -->
77-
<!-- <li class="flex list-none items-center">
78-
<a
79-
href="#call-for-speakers"
80-
(click)="scrollTo($event, 'call-for-speakers')"
81-
class="rounded-(--radius) px-3 py-[0.4rem] text-inherit no-underline transition-colors duration-150 hover:bg-(--surface)"
82-
>{{ 'nav.callForSpeakers' | transloco }}</a
83-
>
84-
</li> -->
8566

8667
<!-- Community dropdown -->
8768
@if (debugService.isEnabled) {
@@ -195,14 +176,7 @@
195176
>{{ 'nav.contacts' | transloco }}</a
196177
>
197178
</li>
198-
<li class="block">
199-
<a
200-
href="#supporters"
201-
(click)="scrollTo($event, 'supporters')"
202-
class="block rounded-[calc(var(--radius)-2px)] px-3 py-2 text-inherit no-underline hover:bg-(--surface)"
203-
>{{ 'nav.supporters' | transloco }}</a
204-
>
205-
</li>
179+
206180
<li class="mt-1 block border-t border-(--border) pt-1">
207181
<p class="px-3 py-1 text-xs tracking-wide text-(--color-muted) uppercase">
208182
{{ 'nav.community' | transloco }}

‎src/app/components/meetup/meetup.component.html‎

Lines changed: 29 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,30 @@
1-
<section id="next-meetup" class="bg-(--surface) px-4 py-16 text-center">
2-
<h2>{{ 'nextMeetup.title' | transloco }}</h2>
3-
<p class="mx-auto mb-6 max-w-152">{{ 'nextMeetup.description' | transloco }}</p>
4-
<a
5-
id="meetup-link"
6-
rel="me noopener"
7-
target="_blank"
8-
href="https://www.meetup.com/python-catania/"
9-
role="button"
10-
aria-label="Meetup"
11-
class="inline-flex cursor-pointer items-center justify-center gap-2 rounded-(--radius) border-2 border-(--color-primary) bg-(--color-primary) px-4 py-2 text-base font-semibold text-white no-underline transition-colors hover:border-(--color-primary-hover) hover:bg-(--color-primary-hover) hover:text-white [&_svg]:shrink-0"
12-
>
13-
<app-icon-meetup />{{ 'nextMeetup.join' | transloco }}</a
14-
>
1+
<section id="next-meetup" class="bg-(--surface) px-4">
2+
<div class="mx-auto flex max-w-5xl flex-col items-center gap-10 md:flex-row-reverse">
3+
<div class="w-full md:w-1/2">
4+
<img
5+
ngSrc="/images/homepage/NextMeetup.jpg"
6+
alt="Next Meetup"
7+
width="1440"
8+
height="1440"
9+
class="w-full rounded-(--radius) object-cover shadow-lg"
10+
/>
11+
</div>
12+
<div class="flex w-full flex-col items-center gap-4 text-center md:w-1/2 md:items-start md:text-left">
13+
<div class="py-16">
14+
<h2>{{ 'nextMeetup.title' | transloco }}</h2>
15+
<p class="mb-6">{{ 'nextMeetup.description' | transloco }}</p>
16+
<a
17+
id="meetup-link"
18+
rel="me noopener"
19+
target="_blank"
20+
href="https://www.meetup.com/python-catania/"
21+
role="button"
22+
aria-label="Meetup"
23+
class="inline-flex cursor-pointer items-center justify-center gap-2 rounded-(--radius) border-2 border-(--color-primary) bg-(--color-primary) px-4 py-2 text-base font-semibold text-white no-underline transition-colors hover:border-(--color-primary-hover) hover:bg-(--color-primary-hover) hover:text-white [&_svg]:shrink-0"
24+
>
25+
<app-icon-meetup />{{ 'nextMeetup.join' | transloco }}</a
26+
>
27+
</div>
28+
</div>
29+
</div>
1530
</section>

‎src/app/components/meetup/meetup.component.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
import { ChangeDetectionStrategy, Component } from '@angular/core';
2+
import { NgOptimizedImage } from '@angular/common';
23
import { TranslocoModule } from '@jsverse/transloco';
34
import { IconMeetupComponent } from '../shared/icons/icon-meetup/icon-meetup.component';
45

56
@Component({
67
selector: 'app-meetup',
7-
imports: [IconMeetupComponent, TranslocoModule],
8+
imports: [NgOptimizedImage, IconMeetupComponent, TranslocoModule],
89
templateUrl: './meetup.component.html',
910
changeDetection: ChangeDetectionStrategy.OnPush,
1011
})

‎src/app/components/py-catania/py-catania.component.html‎

Lines changed: 21 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,23 @@
1-
<section id="pycatania" class="px-4 py-16 text-center">
2-
<div>
3-
<img
4-
ngSrc="/images/pythoncatania.svg"
5-
alt="Python Catania logo"
6-
height="192"
7-
width="192"
8-
priority
9-
class="mx-auto mb-4 block"
10-
/>
1+
<section id="pycatania" class="px-4">
2+
<div class="mx-auto flex max-w-5xl flex-col items-center gap-10 md:flex-row">
3+
<div class="w-full md:w-1/2">
4+
<img
5+
ngSrc="/images/homepage/PyCatania-intro.jpg"
6+
alt="Python Catania intro"
7+
width="1440"
8+
height="1440"
9+
priority
10+
class="w-full rounded-(--radius) object-cover shadow-lg"
11+
/>
12+
</div>
13+
<div class="flex w-full flex-col items-center gap-4 text-center md:w-1/2 md:items-start md:text-left">
14+
<div class="py-16">
15+
<img ngSrc="/images/pythoncatania.svg" alt="Python Catania logo" height="96" width="96" />
16+
<hgroup>
17+
<h1>{{ 'hero.title' | transloco }}</h1>
18+
<p>{{ 'hero.tagline' | transloco }}</p>
19+
</hgroup>
20+
</div>
21+
</div>
1122
</div>
12-
<hgroup>
13-
<h1>{{ 'hero.title' | transloco }}</h1>
14-
<p class="mx-auto max-w-[40rem]">{{ 'hero.tagline' | transloco }}</p>
15-
</hgroup>
1623
</section>

0 commit comments

Comments
 (0)