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;
+}