diff --git a/backend/src/main/resources/templates/invoice.html b/backend/src/main/resources/templates/invoice.html index f0ff3b5..620b3f3 100644 --- a/backend/src/main/resources/templates/invoice.html +++ b/backend/src/main/resources/templates/invoice.html @@ -277,8 +277,8 @@
3D Fab Switzerland
-
Sede Ticino, Svizzera
-
Sede Bienne, Svizzera
+
Via G. pioda 29a - 6710 Biasca, Svizzera
+
Lyss-Strasse 71 - 2560 Nidau, Svizzera
www.3d-fab.ch diff --git a/frontend/src/app/features/home/home.component.html b/frontend/src/app/features/home/home.component.html index ba263cf..ed3ffee 100644 --- a/frontend/src/app/features/home/home.component.html +++ b/frontend/src/app/features/home/home.component.html @@ -63,28 +63,28 @@
- +

{{ 'HOME.CAP_1_TITLE' | translate }}

{{ 'HOME.CAP_1_TEXT' | translate }}
- +

{{ 'HOME.CAP_2_TITLE' | translate }}

{{ 'HOME.CAP_2_TEXT' | translate }}
- +

{{ 'HOME.CAP_3_TITLE' | translate }}

{{ 'HOME.CAP_3_TEXT' | translate }}
- +

{{ 'HOME.CAP_4_TITLE' | translate }}

{{ 'HOME.CAP_4_TEXT' | translate }}

@@ -110,6 +110,11 @@ {{ 'HOME.BTN_REQ_SOLUTION' | translate }}
+
+
+ +
+

{{ 'HOME.CARD_SHOP_1_TITLE' | translate }}

@@ -134,12 +139,36 @@

{{ 'HOME.SEC_ABOUT_TEXT' | translate }}

- {{ 'HOME.BTN_CONTACT' | translate }} +
+ {{ 'HOME.SEC_ABOUT_TITLE' | translate }} + {{ 'HOME.BTN_CONTACT' | translate }} +
- - {{ 'HOME.FOUNDERS_PHOTO' | translate }} + + +
diff --git a/frontend/src/app/features/home/home.component.scss b/frontend/src/app/features/home/home.component.scss index 147d469..fe2049c 100644 --- a/frontend/src/app/features/home/home.component.scss +++ b/frontend/src/app/features/home/home.component.scss @@ -1,14 +1,16 @@ @use '../../../styles/patterns'; .home-page { - background: var(--color-bg); + --home-bg: #faf9f6; + --color-bg-card: #f7f7f7; + background: var(--home-bg); } .hero { position: relative; padding: 6rem 0 5rem; overflow: hidden; - background: var(--color-bg); + background: var(--home-bg); // Enhanced Grid Pattern &::after { content: ''; @@ -43,7 +45,7 @@ position: relative; z-index: 1; } - + .hero-copy { animation: fadeUp 0.8s ease both; } .hero-panel { animation: fadeUp 0.8s ease 0.15s both; } @@ -194,7 +196,7 @@ .capabilities-bg { display: none; } - + .section { padding: 5.5rem 0; position: relative; } .section-head { margin-bottom: var(--space-8); } .section-title { font-size: clamp(2rem, 1.8vw + 1.2rem, 2.8rem); margin-bottom: var(--space-3); } @@ -222,7 +224,7 @@ gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } - + .card-image-placeholder { width: 100%; height: 160px; @@ -234,20 +236,23 @@ align-items: center; justify-content: center; color: var(--color-neutral-400); + overflow: hidden; + } + + .card-image-placeholder img { + width: 100%; + height: 100%; + display: block; + object-fit: cover; } .shop { - background: var(--color-neutral-50); + background: var(--home-bg); position: relative; - // Triangular/Isogrid Pattern - &::before { - content: ''; - position: absolute; - inset: 0; - @include patterns.pattern-triangular(var(--color-neutral-900), 40px); - opacity: 0.03; - pointer-events: none; - } + } + .shop .split { align-items: start; } + .shop-copy { + max-width: 760px; } .split { display: grid; @@ -266,25 +271,61 @@ flex-wrap: wrap; gap: var(--space-3); } + .shop-gallery { + display: flex; + gap: var(--space-4); + overflow-x: auto; + scroll-snap-type: x mandatory; + padding-bottom: var(--space-2); + scrollbar-width: thin; + width: min(100%, 440px); + justify-self: end; + aspect-ratio: 16 / 11; + } + + .shop-gallery-item { + flex: 0 0 100%; + margin: 0; + border-radius: var(--radius-lg); + overflow: hidden; + border: 1px solid var(--color-border); + background: var(--color-neutral-100); + box-shadow: var(--shadow-sm); + scroll-snap-align: start; + aspect-ratio: 16 / 10; + } + + .shop-gallery-item img { + width: 100%; + height: 100%; + display: block; + object-fit: cover; + } + .shop-cards { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } + .shop-cards h3 { + margin-top: 0; + margin-bottom: var(--space-2); + } + + .shop-cards p { + margin: 0; + } + .about { - background: var(--color-neutral-50); + background: transparent; border-top: 1px solid var(--color-border); position: relative; - // Gyroid Pattern - &::before { - content: ''; - position: absolute; - inset: 0; - @include patterns.pattern-gyroid(var(--color-neutral-900), 40px); - opacity: 0.03; - pointer-events: none; - } + } + .about-actions { + display: flex; + flex-wrap: wrap; + gap: var(--space-3); } .about-grid { display: grid; @@ -293,20 +334,61 @@ } .about-media { position: relative; + display: flex; + justify-content: flex-end; } - + .about-feature-image { width: 100%; - height: 100%; - min-height: 320px; - object-fit: cover; + max-width: 620px; + aspect-ratio: 16 / 10; border-radius: var(--radius-lg); background: var(--color-neutral-100); border: 1px solid var(--color-border); - display: flex; + position: relative; + overflow: hidden; + contain: layout paint; + } + + .about-feature-photo { + position: absolute; + inset: 0; + width: 100%; + height: 100%; + display: block; + object-fit: cover; + } + + .founder-nav { + position: absolute; + top: 50%; + transform: translateY(-50%); + width: 2.25rem; + height: 2.25rem; + border-radius: 999px; + border: 1px solid rgba(255, 255, 255, 0.6); + background: rgba(17, 24, 39, 0.45); + color: #fff; + display: inline-flex; align-items: center; justify-content: center; - color: var(--color-text-muted); + font-size: 1.5rem; + line-height: 1; + cursor: pointer; + z-index: 1; + transition: background-color 0.2s ease; + } + + .founder-nav:hover { + background: rgba(17, 24, 39, 0.7); + } + + .founder-nav-prev { left: 0.75rem; } + .founder-nav-next { right: 0.75rem; } + + .founder-nav:focus-visible { + outline: 2px solid var(--color-brand); + outline-offset: 2px; } .media-tile p { margin: 0; @@ -322,12 +404,38 @@ .calculator-grid { grid-template-columns: 1.1fr 0.9fr; } .calculator-grid { grid-template-columns: 1.1fr 0.9fr; } .split { grid-template-columns: 1.1fr 0.9fr; } + .shop-copy { grid-column: 1; } + .shop-gallery { grid-column: 2; } + .shop-cards { + grid-column: 1 / -1; + grid-template-columns: repeat(3, minmax(0, 1fr)); + } .about-grid { grid-template-columns: 1.1fr 0.9fr; } } @media (max-width: 640px) { .hero-actions { flex-direction: column; align-items: stretch; } .quote-meta { grid-template-columns: 1fr; } + .shop-gallery { + width: min(100%, 320px); + justify-self: start; + } + .shop-gallery-item { + aspect-ratio: 16 / 11; + } + .shop-cards { grid-template-columns: 1fr; } + .about-media { + justify-content: flex-start; + } + .about-feature-image { + max-width: min(100%, 360px); + aspect-ratio: 16 / 11; + } + .founder-nav { + width: 2rem; + height: 2rem; + font-size: 1.25rem; + } } @keyframes fadeUp { diff --git a/frontend/src/app/features/home/home.component.ts b/frontend/src/app/features/home/home.component.ts index 2aec96c..1163e0e 100644 --- a/frontend/src/app/features/home/home.component.ts +++ b/frontend/src/app/features/home/home.component.ts @@ -12,4 +12,38 @@ import { AppCardComponent } from '../../shared/components/app-card/app-card.comp templateUrl: './home.component.html', styleUrls: ['./home.component.scss'] }) -export class HomeComponent {} +export class HomeComponent { + readonly shopGalleryImages = [ + { + src: 'assets/images/home/supporto-bici.jpg', + alt: 'Prodotto tecnico stampato in 3D' + } + ]; + + readonly founderImages = [ + { + src: 'assets/images/home/da-cambiare.jpg', + alt: 'Founder - da cambiare' + }, + { + src: 'assets/images/home/vino.JPG', + alt: 'Founder - vino' + } + ]; + + founderImageIndex = 0; + + prevFounderImage(): void { + this.founderImageIndex = + this.founderImageIndex === 0 + ? this.founderImages.length - 1 + : this.founderImageIndex - 1; + } + + nextFounderImage(): void { + this.founderImageIndex = + this.founderImageIndex === this.founderImages.length - 1 + ? 0 + : this.founderImageIndex + 1; + } +} diff --git a/frontend/src/assets/i18n/it.json b/frontend/src/assets/i18n/it.json index 17b0de1..1e86599 100644 --- a/frontend/src/assets/i18n/it.json +++ b/frontend/src/assets/i18n/it.json @@ -21,7 +21,7 @@ "BTN_CONTACT": "Parla con noi", "SEC_CALC_TITLE": "Prezzo corretto in pochi secondi", "SEC_CALC_SUBTITLE": "Nessuna registrazione necessaria. La stima è effettuata tramite vero slicing.", - "SEC_CALC_LIST_1": "Formati supportati: STL, 3MF, STEP, OBJ", + "SEC_CALC_LIST_1": "Formati supportati: STL, 3MF, STEP", "CARD_CALC_EYEBROW": "Calcolo automatico", "CARD_CALC_TITLE": "Prezzo e tempi in un click", "CARD_CALC_TAG": "Senza registrazione", diff --git a/frontend/src/assets/images/home/cad.jpg b/frontend/src/assets/images/home/cad.jpg new file mode 100644 index 0000000..1c5dfe2 Binary files /dev/null and b/frontend/src/assets/images/home/cad.jpg differ diff --git a/frontend/src/assets/images/home/da-cambiare.jpg b/frontend/src/assets/images/home/da-cambiare.jpg new file mode 100644 index 0000000..b0eb618 Binary files /dev/null and b/frontend/src/assets/images/home/da-cambiare.jpg differ diff --git a/frontend/src/assets/images/home/original-vs-3dprinted.jpg b/frontend/src/assets/images/home/original-vs-3dprinted.jpg new file mode 100644 index 0000000..a1230e0 Binary files /dev/null and b/frontend/src/assets/images/home/original-vs-3dprinted.jpg differ diff --git a/frontend/src/assets/images/home/prototipi.jpg b/frontend/src/assets/images/home/prototipi.jpg new file mode 100644 index 0000000..3efc5d7 Binary files /dev/null and b/frontend/src/assets/images/home/prototipi.jpg differ diff --git a/frontend/src/assets/images/home/serie.jpg b/frontend/src/assets/images/home/serie.jpg new file mode 100644 index 0000000..668b3b6 Binary files /dev/null and b/frontend/src/assets/images/home/serie.jpg differ diff --git a/frontend/src/assets/images/home/supporto-bici.jpg b/frontend/src/assets/images/home/supporto-bici.jpg new file mode 100644 index 0000000..71ba26e Binary files /dev/null and b/frontend/src/assets/images/home/supporto-bici.jpg differ diff --git a/frontend/src/assets/images/home/vino.JPG b/frontend/src/assets/images/home/vino.JPG new file mode 100644 index 0000000..eec2da5 Binary files /dev/null and b/frontend/src/assets/images/home/vino.JPG differ diff --git a/frontend/src/styles/_patterns.scss b/frontend/src/styles/_patterns.scss index 519a103..928ad2e 100644 --- a/frontend/src/styles/_patterns.scss +++ b/frontend/src/styles/_patterns.scss @@ -25,14 +25,13 @@ } // 3. Hexagonal (Honeycomb Infill) -// Best structural integrity to weight ratio. +// Flat top-view hex lattice (no 3D depth effect). @mixin pattern-honeycomb($color, $size: 32px) { - background-image: - radial-gradient(circle, transparent 65%, $color 66%, $color 70%, transparent 71%); - background-size: $size $size; - // This creates a "Dot/Ring" pattern that resembles printed layers or nozzle paths - // A true CSS honeycomb is complex and brittle across browsers. - // Using this "Nozzle Path" aesthetic instead which feels organic. + background-color: transparent; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='45' viewBox='0 0 52 45'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.25'%3E%3Cpath d='M13 0H39L52 22.5L39 45H13L0 22.5Z'/%3E%3Cpath d='M39 -22.5H65L78 0L65 22.5H39L26 0Z'/%3E%3Cpath d='M39 22.5H65L78 45L65 67.5H39L26 45Z'/%3E%3C/g%3E%3C/svg%3E"); + background-size: $size calc(#{$size} * 0.8653846); + background-position: 0 0; + background-repeat: repeat; } // 4. Diagonal (Rectilinear 45deg) diff --git a/frontend/src/styles/theme.scss b/frontend/src/styles/theme.scss index ec16db9..046496c 100644 --- a/frontend/src/styles/theme.scss +++ b/frontend/src/styles/theme.scss @@ -1,9 +1,9 @@ /* src/styles/theme.scss */ -@use 'tokens'; +@use './tokens'; :root { /* Semantic Colors - Theming Layer */ - --color-bg: #ffffff; + --color-bg: #faf9f6; --color-bg-card: #ffffff; --color-text: var(--color-neutral-900); --color-text-muted: var(--color-secondary-500);