feat: refactor Contact pages and icons

Helias · Helias · commit 9d507891117a · 2026-03-15T12:49:11.000+01:00
diff --git a/src/app/components/contact/contact.component.html b/src/app/components/contact/contact.component.html
diff --git a/src/app/components/contact/contact.component.ts b/src/app/components/contact/contact.component.ts
@@ -1,8 +1,31 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { IconFacebookComponent } from '../shared/icons/icon-facebook/icon-facebook.component';
+import { IconGdgComponent } from '../shared/icons/icon-gdg/icon-gdg.component';
+import { IconGithubComponent } from '../shared/icons/icon-github/icon-github.component';
+import { IconInstagramComponent } from '../shared/icons/icon-instagram/icon-instagram.component';
+import { IconLinkedinComponent } from '../shared/icons/icon-linkedin/icon-linkedin.component';
+import { IconMastodonComponent } from '../shared/icons/icon-mastodon/icon-mastodon.component';
+import { IconPsfComponent } from '../shared/icons/icon-psf/icon-psf.component';
+import { IconPyconItaliaComponent } from '../shared/icons/icon-pycon-italia/icon-pycon-italia.component';
+import { IconPythonItaliaComponent } from '../shared/icons/icon-python-italia/icon-python-italia.component';
+import { IconTelegramComponent } from '../shared/icons/icon-telegram/icon-telegram.component';
+import { IconYoutubeComponent } from '../shared/icons/icon-youtube/icon-youtube.component';
 
 @Component({
   selector: 'app-contact',
-  imports: [],
+  imports: [
+    IconTelegramComponent,
+    IconFacebookComponent,
+    IconLinkedinComponent,
+    IconYoutubeComponent,
+    IconInstagramComponent,
+    IconMastodonComponent,
+    IconGithubComponent,
+    IconPsfComponent,
+    IconPythonItaliaComponent,
+    IconPyconItaliaComponent,
+    IconGdgComponent,
+  ],
   templateUrl: './contact.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
diff --git a/src/app/components/meetup/meetup.component.html b/src/app/components/meetup/meetup.component.html
@@ -1,9 +1,8 @@
-<section id="meetup" class="py-16 px-4 text-center bg-[var(--surface)]">
+<section id="meetup" class="bg-(--surface) px-4 py-16 text-center">
   <h2>Meetup</h2>
-  <p class="mx-auto mb-6 max-w-[38rem]">
-    Organizziamo incontri periodici per condividere conoscenza, esperienze e
-    passione per Python. Chiunque sia curioso è il benvenuto, dal principiante
-    all'esperto.
+  <p class="mx-auto mb-6 max-w-152">
+    Organizziamo incontri periodici per condividere conoscenza, esperienze e passione per Python. Chiunque sia curioso è
+    il benvenuto, dal principiante all'esperto.
   </p>
   <a
     id="meetup-link"
@@ -13,19 +12,6 @@ <h2>Meetup</h2>
     role="button"
     aria-label="Meetup"
   >
-    <svg
-      aria-hidden="true"
-      focusable="false"
-      role="img"
-      xmlns="http://www.w3.org/2000/svg"
-      height="1.33em"
-      viewBox="0 0 24 24"
-    >
-      <title>Meetup</title>
-      <path
-        fill="currentColor"
-        d="M15.11 2.1c.13 0 .26.02.38.04.34.04.67.17.94.39.36.28.57.5.9.82.5.47.87.19 1.12.04.44-.25.78-.46 2.06-.43 1.33.02 2.85.5 3.17 2.75.35 2.51-4.11 8.97-3.8 11.97.22 2.11 3.8.63 4.1 2.55.39 2.5-4.47 1.58-5.58 1.03a4.26 4.26 0 0 1-2.34-4.72c.33-1.44 3.55-7.32 3.67-8.22.12-.92-.37-1-.68-1.02-.4-.02-.7.17-1.1.76-.35.53-4.35 8.55-4.7 9.2-.62 1.17-1.4 1.45-2.18 1.41-1.15-.06-1.67-.67-1.5-1.77.09-.65 2.63-6.38 2.76-7.27.08-.56-.03-1.15-.58-1.43-.55-.28-1.2.15-1.39.48-.26.45-3.86 9.84-4.25 10.54-.66 1.2-1.36 1.59-2.4 1.64-2.49.11-4.33-1.93-3.52-4.43.37-1.11 2.76-9.56 3.97-11.71.81-1.45 3.07-2.55 4.64-1.87.8.35 1.93.92 2.26 1.06.77.34 1.59-.58 1.91-.86.33-.28.63-.58 1.03-.75a3 3 0 0 1 1.11-.2Z"
-      /></svg
-    >Unisciti a noi</a
+    <app-icon-meetup />Unisciti a noi</a
   >
 </section>
diff --git a/src/app/components/meetup/meetup.component.ts b/src/app/components/meetup/meetup.component.ts
@@ -1,7 +1,9 @@
 import { ChangeDetectionStrategy, Component } from "@angular/core";
+import { IconMeetupComponent } from "../shared/icons/icon-meetup/icon-meetup.component";
 
 @Component({
   selector: "app-meetup",
+  imports: [IconMeetupComponent],
   templateUrl: "./meetup.component.html",
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
diff --git a/src/app/components/shared/icons/icon-facebook/icon-facebook.component.spec.ts b/src/app/components/shared/icons/icon-facebook/icon-facebook.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { IconFacebookComponent } from './icon-facebook.component';
+
+describe('IconFacebookComponent', () => {
+  let component: IconFacebookComponent;
+  let fixture: ComponentFixture<IconFacebookComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [IconFacebookComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(IconFacebookComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/components/shared/icons/icon-facebook/icon-facebook.component.ts b/src/app/components/shared/icons/icon-facebook/icon-facebook.component.ts
@@ -0,0 +1,13 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  selector: 'app-icon-facebook',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" height="1.33em" viewBox="0 0 24 24">
+      <title>Facebook</title>
+      <path fill="currentColor" d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
+    </svg>
+  `,
+})
+export class IconFacebookComponent {}
diff --git a/src/app/components/shared/icons/icon-gdg/icon-gdg.component.spec.ts b/src/app/components/shared/icons/icon-gdg/icon-gdg.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { IconGdgComponent } from './icon-gdg.component';
+
+describe('IconGdgComponent', () => {
+  let component: IconGdgComponent;
+  let fixture: ComponentFixture<IconGdgComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [IconGdgComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(IconGdgComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/components/shared/icons/icon-gdg/icon-gdg.component.ts b/src/app/components/shared/icons/icon-gdg/icon-gdg.component.ts
@@ -0,0 +1,14 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  selector: 'app-icon-gdg',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" height="1.33em" viewBox="0 0 24 24">
+      <title>Google Developer Group Catania</title>
+      <path fill="none" stroke="currentColor" stroke-width="1" d="M15.37 17.62c.32 0 .63-.1.95-.26l6.74-3.9-4.69-1.74L14.42 14a1.94 1.94 0 0 0-.68 2.63c.37.69 1 1 1.63 1zM5.8 12.21l3.9-2.27c.89-.52 1.2-1.68.68-2.63a1.94 1.94 0 0 0-2.64-.68L1 10.53Z"/>
+      <path fill="currentColor" d="M22.11 13.95c.69 0 1.32-.36 1.63-.94.53-.9.22-2.11-.68-2.64l-6.74-3.9c-.9-.52-2.1-.2-2.63.69-.53.9-.22 2.1.68 2.63l6.74 3.9c.32.16.69.26 1 .26zM8.68 17.8c.69 0 1.32-.37 1.63-.95.53-.9.22-2.1-.68-2.63l-6.74-3.9c-.9-.53-2.1-.21-2.63.69-.53.89-.22 2.1.68 2.63l6.74 3.9c.37.2.69.26 1 .26z"/>
+    </svg>
+  `,
+})
+export class IconGdgComponent {}
diff --git a/src/app/components/shared/icons/icon-github/icon-github.component.spec.ts b/src/app/components/shared/icons/icon-github/icon-github.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { IconGithubComponent } from './icon-github.component';
+
+describe('IconGithubComponent', () => {
+  let component: IconGithubComponent;
+  let fixture: ComponentFixture<IconGithubComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [IconGithubComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(IconGithubComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/components/shared/icons/icon-github/icon-github.component.ts b/src/app/components/shared/icons/icon-github/icon-github.component.ts
@@ -0,0 +1,13 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  selector: 'app-icon-github',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" height="1.33em" viewBox="0 0 24 24">
+      <title>GitHub</title>
+      <path fill="currentColor" d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
+    </svg>
+  `,
+})
+export class IconGithubComponent {}
diff --git a/src/app/components/shared/icons/icon-instagram/icon-instagram.component.spec.ts b/src/app/components/shared/icons/icon-instagram/icon-instagram.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { IconInstagramComponent } from './icon-instagram.component';
+
+describe('IconInstagramComponent', () => {
+  let component: IconInstagramComponent;
+  let fixture: ComponentFixture<IconInstagramComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [IconInstagramComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(IconInstagramComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/components/shared/icons/icon-instagram/icon-instagram.component.ts b/src/app/components/shared/icons/icon-instagram/icon-instagram.component.ts
@@ -0,0 +1,13 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  selector: 'app-icon-instagram',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" height="1.33em" viewBox="0 0 24 24">
+      <title>Instagram</title>
+      <path fill="currentColor" d="M12 2.163c3.206 0 3.58.012 4.844.07 1.2.058 2.04.25 2.5.42.6.24 1.04.54 1.5 1.04.46.46.76.9 1.04 1.5.17.46.36 1.3.42 2.5.058 1.264.07 1.638.07 4.844s-.012 3.58-.07 4.844c-.058 1.2-.25 2.04-.42 2.5-.24.6-.54 1.04-1.04 1.5-.46.46-.9.76-1.5 1.04-.46.17-1.3.36-2.5.42-1.264.058-1.638.07-4.844.07s-3.58-.012-4.844-.07c-1.2-.058-2.04-.25-2.5-.42-.6-.24-1.04-.54-1.5-1.04-.46-.46-.76-.9-1.04-1.5-.17-.46-.36-1.3-.42-2.5C2.175 12.743 2.163 12.368 2.163 9.163S2.175 5.58 2.233 4.316c.058-1.2.25-2.04.42-2.5.24-.6.54-1.04 1.04-1.5.46-.46.9-.76 1.5-1.04.46-.17 1.3-.36 2.5-.42C8.418 2.175 8.793 2.163 12 2.163zm0 5.837a6.163 6.163 0 1 0 0 12.326 6.163 6.163 0 0 0 0-12.326zm0 10.326a4.163 4.163 0 1 1 0-8.326 4.163 4.163 0 0 1 0 8.326zm6.5-10.326a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3z"/>
+    </svg>
+  `,
+})
+export class IconInstagramComponent {}
diff --git a/src/app/components/shared/icons/icon-linkedin/icon-linkedin.component.spec.ts b/src/app/components/shared/icons/icon-linkedin/icon-linkedin.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { IconLinkedinComponent } from './icon-linkedin.component';
+
+describe('IconLinkedinComponent', () => {
+  let component: IconLinkedinComponent;
+  let fixture: ComponentFixture<IconLinkedinComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [IconLinkedinComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(IconLinkedinComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/components/shared/icons/icon-linkedin/icon-linkedin.component.ts b/src/app/components/shared/icons/icon-linkedin/icon-linkedin.component.ts
@@ -0,0 +1,13 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  selector: 'app-icon-linkedin',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" height="1.33em" viewBox="0 0 24 24">
+      <title>LinkedIn</title>
+      <path fill="currentColor" d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
+    </svg>
+  `,
+})
+export class IconLinkedinComponent {}
diff --git a/src/app/components/shared/icons/icon-mastodon/icon-mastodon.component.spec.ts b/src/app/components/shared/icons/icon-mastodon/icon-mastodon.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { IconMastodonComponent } from './icon-mastodon.component';
+
+describe('IconMastodonComponent', () => {
+  let component: IconMastodonComponent;
+  let fixture: ComponentFixture<IconMastodonComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [IconMastodonComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(IconMastodonComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/components/shared/icons/icon-mastodon/icon-mastodon.component.ts b/src/app/components/shared/icons/icon-mastodon/icon-mastodon.component.ts
@@ -0,0 +1,13 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  selector: 'app-icon-mastodon',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" height="1.33em" viewBox="0 0 24 24">
+      <title>Mastodon</title>
+      <path fill="currentColor" d="M23.268 5.313c-.35-2.578-2.617-4.61-5.304-5.004C17.51.242 15.792 0 11.813 0h-.03c-3.98 0-4.835.242-5.288.309C3.882.692 1.496 2.518.917 5.127.64 6.412.61 7.837.661 9.143c.074 1.874.088 3.745.26 5.611.118 1.24.325 2.47.62 3.68.55 2.237 2.777 4.098 4.96 4.857 2.336.792 4.849.923 7.256.38.265-.061.527-.132.786-.213.585-.184 1.27-.39 1.774-.753a.057.057 0 0 0 .023-.043v-1.809a.052.052 0 0 0-.02-.041.053.053 0 0 0-.046-.01 20.282 20.282 0 0 1-4.709.545c-2.73 0-3.463-1.284-3.674-1.818a5.593 5.593 0 0 1-.319-1.433.053.053 0 0 1 .066-.054c1.517.363 3.072.546 4.632.546.376 0 .75 0 1.125-.01 1.57-.044 3.224-.124 4.768-.422.038-.008.077-.015.11-.024 2.435-.464 4.753-1.92 4.989-5.604.008-.145.03-1.52.03-1.67.002-.512.167-3.63-.024-5.545zm-3.748 9.195h-2.561V8.29c0-1.309-.55-1.976-1.67-1.976-1.23 0-1.846.79-1.846 2.35v3.403h-2.546V8.663c0-1.56-.617-2.35-1.848-2.35-1.112 0-1.668.668-1.67 1.977v6.218H4.822V8.102c0-1.31.337-2.35 1.011-3.12.696-.77 1.608-1.164 2.74-1.164 1.311 0 2.302.5 2.962 1.498l.638 1.06.638-1.06c.66-.999 1.65-1.498 2.96-1.498 1.13 0 2.043.395 2.74 1.164.675.77 1.012 1.81 1.012 3.12z"/>
+    </svg>
+  `,
+})
+export class IconMastodonComponent {}
diff --git a/src/app/components/shared/icons/icon-meetup/icon-meetup.component.spec.ts b/src/app/components/shared/icons/icon-meetup/icon-meetup.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { IconMeetupComponent } from './icon-meetup.component';
+
+describe('IconMeetupComponent', () => {
+  let component: IconMeetupComponent;
+  let fixture: ComponentFixture<IconMeetupComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [IconMeetupComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(IconMeetupComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/components/shared/icons/icon-meetup/icon-meetup.component.ts b/src/app/components/shared/icons/icon-meetup/icon-meetup.component.ts
@@ -0,0 +1,13 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  selector: 'app-icon-meetup',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" height="1.33em" viewBox="0 0 24 24">
+      <title>Meetup</title>
+      <path fill="currentColor" d="M15.11 2.1c.13 0 .26.02.38.04.34.04.67.17.94.39.36.28.57.5.9.82.5.47.87.19 1.12.04.44-.25.78-.46 2.06-.43 1.33.02 2.85.5 3.17 2.75.35 2.51-4.11 8.97-3.8 11.97.22 2.11 3.8.63 4.1 2.55.39 2.5-4.47 1.58-5.58 1.03a4.26 4.26 0 0 1-2.34-4.72c.33-1.44 3.55-7.32 3.67-8.22.12-.92-.37-1-.68-1.02-.4-.02-.7.17-1.1.76-.35.53-4.35 8.55-4.7 9.2-.62 1.17-1.4 1.45-2.18 1.41-1.15-.06-1.67-.67-1.5-1.77.09-.65 2.63-6.38 2.76-7.27.08-.56-.03-1.15-.58-1.43-.55-.28-1.2.15-1.39.48-.26.45-3.86 9.84-4.25 10.54-.66 1.2-1.36 1.59-2.4 1.64-2.49.11-4.33-1.93-3.52-4.43.37-1.11 2.76-9.56 3.97-11.71.81-1.45 3.07-2.55 4.64-1.87.8.35 1.93.92 2.26 1.06.77.34 1.59-.58 1.91-.86.33-.28.63-.58 1.03-.75a3 3 0 0 1 1.11-.2Z"/>
+    </svg>
+  `,
+})
+export class IconMeetupComponent {}
diff --git a/src/app/components/shared/icons/icon-psf/icon-psf.component.spec.ts b/src/app/components/shared/icons/icon-psf/icon-psf.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { IconPsfComponent } from './icon-psf.component';
+
+describe('IconPsfComponent', () => {
+  let component: IconPsfComponent;
+  let fixture: ComponentFixture<IconPsfComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [IconPsfComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(IconPsfComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/components/shared/icons/icon-psf/icon-psf.component.ts b/src/app/components/shared/icons/icon-psf/icon-psf.component.ts
@@ -0,0 +1,13 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  selector: 'app-icon-psf',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" height="1.33em" viewBox="0 0 24 24">
+      <title>Python Software Foundation</title>
+      <path fill="currentColor" d="M14.25.18l.9.2.73.26.59.3.45.32.34.34.25.34.16.33.1.3.04.26.02.2-.01.13V8.5l-.05.63-.13.55-.21.46-.26.38-.3.31-.33.25-.35.19-.35.14-.33.1-.3.07-.26.04-.21.02H8.77l-.69.05-.59.14-.5.22-.41.27-.33.32-.27.35-.2.36-.15.37-.1.35-.07.32-.04.27-.02.21v3.06H3.17l-.21-.03-.28-.07-.32-.12-.35-.18-.36-.26-.36-.36-.35-.46-.32-.59-.28-.73-.21-.88-.14-1.05-.05-1.23.06-1.22.16-1.04.24-.87.32-.71.36-.57.4-.44.42-.33.42-.24.4-.16.36-.1.32-.05.24-.01h.16l.06.01h8.16v-.83H6.18l-.01-2.75-.02-.37.05-.34.11-.31.17-.28.25-.26.31-.23.38-.2.44-.18.51-.15.58-.12.64-.1.71-.06.77-.04.84-.02 1.27.05zm-6.3 1.98l-.23.33-.08.41.08.41.23.34.33.22.41.09.41-.09.33-.22.23-.34.08-.41-.08-.41-.23-.33-.33-.22-.41-.09-.41.09zm13.09 3.95l.28.06.32.12.35.18.36.27.36.35.35.47.32.59.28.73.21.88.14 1.04.05 1.23-.06 1.23-.16 1.04-.24.86-.32.71-.36.57-.4.45-.42.33-.42.24-.4.16-.36.09-.32.05-.24.02-.16-.01h-8.22v.82h5.84l.01 2.76.02.36-.05.34-.11.31-.17.29-.25.25-.31.24-.38.2-.44.17-.51.15-.58.13-.64.09-.71.07-.77.04-.84.01-1.27-.04-1.07-.14-.9-.2-.73-.25-.59-.3-.45-.33-.34-.34-.25-.34-.16-.33-.1-.3-.04-.25-.02-.2.01-.13v-5.34l.05-.64.13-.54.21-.46.26-.38.3-.32.33-.24.35-.2.35-.14.33-.1.3-.06.26-.04.21-.02.13-.01h5.84l.69-.05.59-.14.5-.21.41-.28.33-.32.27-.35.2-.36.15-.36.1-.35.07-.32.04-.28.02-.21V6.07h2.09l.14.01zm-6.47 14.25l-.23.33-.08.41.08.41.23.33.33.23.41.08.41-.08.33-.23.23-.33.08-.41-.08-.41-.23-.33-.33-.23-.41-.08-.41.08z"/>
+    </svg>
+  `,
+})
+export class IconPsfComponent {}
diff --git a/src/app/components/shared/icons/icon-pycon-italia/icon-pycon-italia.component.spec.ts b/src/app/components/shared/icons/icon-pycon-italia/icon-pycon-italia.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { IconPyconItaliaComponent } from './icon-pycon-italia.component';
+
+describe('IconPyconItaliaComponent', () => {
+  let component: IconPyconItaliaComponent;
+  let fixture: ComponentFixture<IconPyconItaliaComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [IconPyconItaliaComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(IconPyconItaliaComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/components/shared/icons/icon-pycon-italia/icon-pycon-italia.component.ts b/src/app/components/shared/icons/icon-pycon-italia/icon-pycon-italia.component.ts
diff --git a/src/app/components/shared/icons/icon-python-italia/icon-python-italia.component.spec.ts b/src/app/components/shared/icons/icon-python-italia/icon-python-italia.component.spec.ts
diff --git a/src/app/components/shared/icons/icon-python-italia/icon-python-italia.component.ts b/src/app/components/shared/icons/icon-python-italia/icon-python-italia.component.ts
diff --git a/src/app/components/shared/icons/icon-telegram/icon-telegram.component.spec.ts b/src/app/components/shared/icons/icon-telegram/icon-telegram.component.spec.ts
diff --git a/src/app/components/shared/icons/icon-telegram/icon-telegram.component.ts b/src/app/components/shared/icons/icon-telegram/icon-telegram.component.ts
diff --git a/src/app/components/shared/icons/icon-youtube/icon-youtube.component.spec.ts b/src/app/components/shared/icons/icon-youtube/icon-youtube.component.spec.ts
diff --git a/src/app/components/shared/icons/icon-youtube/icon-youtube.component.ts b/src/app/components/shared/icons/icon-youtube/icon-youtube.component.ts
diff --git a/src/styles.scss b/src/styles.scss
