diff --git a/frontend/src/app/features/home/home.component.ts b/frontend/src/app/features/home/home.component.ts index 5222898..b7ec019 100644 --- a/frontend/src/app/features/home/home.component.ts +++ b/frontend/src/app/features/home/home.component.ts @@ -33,13 +33,6 @@ import { AppCardComponent } from '../../shared/components/app-card/app-card.comp Progettazione CAD e post-processing su richiesta - -
- -
- -
-
@@ -191,6 +184,8 @@ import { AppCardComponent } from '../../shared/components/app-card/app-card.comp `, styles: [` + @use '../../../styles/patterns'; + .home-page { background: var(--color-bg); } @@ -200,7 +195,20 @@ import { AppCardComponent } from '../../shared/components/app-card/app-card.comp padding: 6rem 0 5rem; overflow: hidden; background: var(--color-bg); + // Enhanced Grid Pattern + &::after { + content: ''; + position: absolute; + inset: 0; + @include patterns.pattern-grid(var(--color-neutral-900), 40px, 1px); + opacity: 0.12; + z-index: 0; + pointer-events: none; + mask-image: linear-gradient(to bottom, black 40%, transparent 100%); + } } + + // Keep the accent blob .hero::before { content: ''; position: absolute; @@ -213,18 +221,7 @@ import { AppCardComponent } from '../../shared/components/app-card/app-card.comp z-index: 0; animation: floatGlow 12s ease-in-out infinite; } - .hero::after { - content: ''; - position: absolute; - inset: 0; - background-image: - linear-gradient(rgba(16, 24, 32, 0.05) 1px, transparent 1px), - linear-gradient(90deg, rgba(16, 24, 32, 0.05) 1px, transparent 1px); - background-size: 32px 32px; - opacity: 0.25; - z-index: 0; - pointer-events: none; - } + .hero-grid { display: grid; gap: var(--space-12); @@ -374,11 +371,23 @@ import { AppCardComponent } from '../../shared/components/app-card/app-card.comp background: var(--color-neutral-50); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); + position: relative; + // Honeycomb/Gyroid Pattern + &::before { + content: ''; + position: absolute; + inset: 0; + @include patterns.pattern-gyroid(var(--color-neutral-900), 60px); + opacity: 0.03; + pointer-events: none; + } } .calculator-grid { display: grid; gap: var(--space-10); align-items: center; + position: relative; + z-index: 1; } .calculator-list { padding-left: var(--space-4); @@ -393,11 +402,23 @@ import { AppCardComponent } from '../../shared/components/app-card/app-card.comp .shop { background: var(--color-neutral-50); + 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; + } } .split { display: grid; gap: var(--space-10); align-items: center; + position: relative; + z-index: 1; } .shop-list { padding-left: var(--space-4); diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss index bcb5c2a..fa81a71 100644 --- a/frontend/src/styles.scss +++ b/frontend/src/styles.scss @@ -1,5 +1,6 @@ /* src/styles.scss */ @use './styles/theme'; +@use './styles/patterns'; /* Reset / Base */ *, *::before, *::after { diff --git a/frontend/src/styles/_patterns.scss b/frontend/src/styles/_patterns.scss new file mode 100644 index 0000000..4b6bf86 --- /dev/null +++ b/frontend/src/styles/_patterns.scss @@ -0,0 +1,53 @@ +@use 'sass:math'; + +// ============================================================================= +// 3D Print Infill Patterns +// ============================================================================= + +// 1. Grid (Rectilinear Infill) +// Basic square grid, standard infill. +@mixin pattern-grid($color, $size: 40px, $weight: 1px) { + background-image: + linear-gradient($color $weight, transparent $weight), + linear-gradient(90deg, $color $weight, transparent $weight); + background-size: $size $size; +} + +// 2. Triangular (Isogrid / Triangle Infill) +// Strong aesthetic, often used for structural parts. +@mixin pattern-triangular($color, $size: 40px, $weight: 1px) { + background-image: + linear-gradient(30deg, $color 1px, transparent 1px), + linear-gradient(150deg, $color 1px, transparent 1px), + linear-gradient(90deg, $color 1px, transparent 1px); + background-size: $size $size; + // Note: Simplification of true isogrid for CSS stability +} + +// 3. Hexagonal (Honeycomb Infill) +// Best structural integrity to weight ratio. +@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. +} + +// 4. Diagonal (Rectilinear 45deg) +@mixin pattern-diagonal($color, $size: 20px, $weight: 1px) { + background-image: + repeating-linear-gradient(45deg, $color 0, $color $weight, transparent $weight, transparent 50%), + repeating-linear-gradient(-45deg, $color 0, $color $weight, transparent $weight, transparent 50%); + background-size: $size $size; +} + +// 5. Gyroid (Approximation via Curves) +// Using radial gradients to simulate organic curves +@mixin pattern-gyroid($color, $size: 40px) { + background-image: + radial-gradient(circle at 0 0, transparent 47%, $color 48%, $color 50%, transparent 51%), + radial-gradient(circle at 100% 100%, transparent 47%, $color 48%, $color 50%, transparent 51%); + background-size: $size $size; +}