cima-squad/cima.it
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

further improvements

Browse Source
This commit is contained in:
Nicola Leone Ciardi (CEO)
2026-04-09 18:13:32 +02:00
parent 8fdf2e47a2
commit ea7350518c
6 changed files with 45 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/app/contatti/page.tsx
+2
View File
@@ -2,6 +2,7 @@ import type { Metadata } from "next";
import Image from "next/image";
import { LazySection } from "@/components/LazySection";
import { Skeleton, SkeletonWave } from "@/components/Skeleton";
import MaterialSymbolsFont from "@/components/MaterialSymbolsFont";
export const metadata: Metadata = {
title: "Contatti | CiMa Progetti",
@@ -11,6 +12,7 @@ export const metadata: Metadata = {
export default function Contatti() {
return (
<div className="pt-24 sm:pt-32 pb-16 sm:pb-24 px-6 lg:px-8 max-w-7xl mx-auto overflow-x-hidden">
<MaterialSymbolsFont />
{/* Hero Section - Priority render */}
<section className="grid grid-cols-1 lg:grid-cols-12 mb-16 lg:mb-24">
<div className="col-span-12 md:col-span-8">
frontend/src/app/globals.css
+19 -7
View File
@@ -69,11 +69,21 @@ img {
decoding: async;
}
/* Hero entrance animations */
/* Hero entrance animations — headline uses slide-only (no opacity)
so LCP fires immediately; CTAs fade in after. */
@keyframes hero-slide-up {
from {
transform: translateY(40px);
}
to {
transform: translateY(0);
}
}
@keyframes hero-fade-up {
from {
opacity: 0;
transform: translateY(60px);
transform: translateY(30px);
}
to {
opacity: 1;
@@ -81,18 +91,20 @@ img {
}
}
.hero-slide-up {
animation: hero-slide-up 0.8s cubic-bezier(0.33, 1, 0.68, 1) both;
}
.hero-fade-up {
animation: hero-fade-up 1s cubic-bezier(0.33, 1, 0.68, 1) both;
animation: hero-fade-up 0.6s cubic-bezier(0.33, 1, 0.68, 1) both;
}
.hero-fade-up-delay-1 {
animation-delay: 0.6s;
animation-duration: 0.6s;
animation-delay: 0.5s;
}
.hero-fade-up-delay-2 {
animation-delay: 0.75s;
animation-duration: 0.6s;
animation-delay: 0.65s;
}
/* Skeleton wave animation */
frontend/src/app/layout.tsx
+2 -17
View File
@@ -43,24 +43,9 @@ export default function RootLayout({
return (
<html lang="it" className={`${inter.variable} scroll-smooth`}>
<head>
{/* Preconnect to Google Fonts for faster loading */}
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link
rel="preconnect"
href="https://fonts.gstatic.com"
crossOrigin="anonymous"
/>
{/* DNS prefetch for third-party domains */}
{/* Preconnect to Google Fonts — used by Material Symbols loaded lazily */}
<link rel="dns-prefetch" href="https://fonts.googleapis.com" />
{/* Material Symbols — reduced to single weight/fill, display=swap prevents render blocking */}
<link
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@400,0&display=swap"
rel="stylesheet"
/>
{/* Inter font is self-hosted by next/font — no external preload needed */}
<link rel="dns-prefetch" href="https://fonts.gstatic.com" />
</head>
<body className="min-h-screen flex flex-col">
<Navbar />
frontend/src/components/HomeSections.tsx
+2
View File
@@ -1,6 +1,7 @@
"use client";
import dynamic from "next/dynamic";
import { useGsapScrollTrigger } from "@/components/hooks/useGsapScrollTrigger";
import MaterialSymbolsFont from "@/components/MaterialSymbolsFont";
const ApproccioSection = dynamic(() => import("@/components/sections/ApproccioSection"), { ssr: false });
const BeforeAfterSection = dynamic(() => import("@/components/sections/BeforeAfterSection"), { ssr: false });
@@ -14,6 +15,7 @@ export default function HomeSections() {
return (
<>
<MaterialSymbolsFont />
<ApproccioSection />
<BeforeAfterSection />
<ServicesSection />
frontend/src/components/MaterialSymbolsFont.tsx
+19
View File
@@ -0,0 +1,19 @@
"use client";
import { useEffect } from "react";
const MATERIAL_SYMBOLS_URL =
"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@400,0&display=swap";
let loaded = false;
export default function MaterialSymbolsFont() {
useEffect(() => {
if (loaded) return;
loaded = true;
const link = document.createElement("link");
link.rel = "stylesheet";
link.href = MATERIAL_SYMBOLS_URL;
document.head.appendChild(link);
}, []);
return null;
}
frontend/src/components/sections/HeroSection.tsx
+1 -1
View File
@@ -4,7 +4,7 @@ export default function HeroSection() {
return (
<section className="snap-section min-h-screen flex items-center justify-center px-6 lg:px-8 pt-20">
<div className="max-w-5xl mx-auto text-center">
<h1 className="text-huge font-black uppercase mb-8 sm:mb-12 hero-fade-up">
<h1 className="text-huge font-black uppercase mb-8 sm:mb-12 hero-slide-up">
La <span className="text-primary">struttura</span> digitale del
tuo business.
</h1>