diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css index b5531db..e89ca68 100644 --- a/frontend/src/app/globals.css +++ b/frontend/src/app/globals.css @@ -69,6 +69,32 @@ img { decoding: async; } +/* Hero entrance animations */ +@keyframes hero-fade-up { + from { + opacity: 0; + transform: translateY(60px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +.hero-fade-up { + animation: hero-fade-up 1s cubic-bezier(0.33, 1, 0.68, 1) both; +} + +.hero-fade-up-delay-1 { + animation-delay: 0.6s; + animation-duration: 0.6s; +} + +.hero-fade-up-delay-2 { + animation-delay: 0.75s; + animation-duration: 0.6s; +} + /* Skeleton wave animation */ @keyframes wave { 0% { @@ -92,13 +118,6 @@ img { -/* Optimize font loading */ -@font-face { - font-family: "Inter"; - font-display: swap; - src: url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900"); -} - /* Prevent layout shift for lazy-loaded images */ img { aspect-ratio: auto; diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx index d35aaf2..d33cf10 100644 --- a/frontend/src/app/layout.tsx +++ b/frontend/src/app/layout.tsx @@ -54,22 +54,13 @@ export default function RootLayout({ {/* DNS prefetch for third-party domains */} - {/* Material Symbols with swap for faster first paint */} + {/* Material Symbols — reduced to single weight/fill, display=swap prevents render blocking */} - {/* Preload critical fonts */} - - - {/* Optimize LCP by reducing render-blocking resources */} + {/* Inter font is self-hosted by next/font — no external preload needed */} diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx index bdfd42a..b07a74a 100644 --- a/frontend/src/app/page.tsx +++ b/frontend/src/app/page.tsx @@ -1,25 +1,11 @@ -"use client"; -import { useGsapScrollTrigger } from "@/components/hooks/useGsapScrollTrigger"; import HeroSection from "@/components/sections/HeroSection"; -import ApproccioSection from "@/components/sections/ApproccioSection"; -import BeforeAfterSection from "@/components/sections/BeforeAfterSection"; -import ServicesSection from "@/components/sections/ServicesSection"; -import AboutSection from "@/components/sections/AboutSection"; -import FilosofiaSection from "@/components/sections/FilosofiaSection"; -import CtaSection from "@/components/sections/CtaSection"; +import HomeSections from "@/components/HomeSections"; export default function Home() { - useGsapScrollTrigger(); - return (
- - - - - - +
); } diff --git a/frontend/src/components/HomeSections.tsx b/frontend/src/components/HomeSections.tsx new file mode 100644 index 0000000..b452598 --- /dev/null +++ b/frontend/src/components/HomeSections.tsx @@ -0,0 +1,25 @@ +"use client"; +import dynamic from "next/dynamic"; +import { useGsapScrollTrigger } from "@/components/hooks/useGsapScrollTrigger"; + +const ApproccioSection = dynamic(() => import("@/components/sections/ApproccioSection"), { ssr: false }); +const BeforeAfterSection = dynamic(() => import("@/components/sections/BeforeAfterSection"), { ssr: false }); +const ServicesSection = dynamic(() => import("@/components/sections/ServicesSection"), { ssr: false }); +const AboutSection = dynamic(() => import("@/components/sections/AboutSection"), { ssr: false }); +const FilosofiaSection = dynamic(() => import("@/components/sections/FilosofiaSection"), { ssr: false }); +const CtaSection = dynamic(() => import("@/components/sections/CtaSection"), { ssr: false }); + +export default function HomeSections() { + useGsapScrollTrigger(); + + return ( + <> + + + + + + + + ); +} diff --git a/frontend/src/components/sections/AboutSection.tsx b/frontend/src/components/sections/AboutSection.tsx index a6b817d..eca97eb 100644 --- a/frontend/src/components/sections/AboutSection.tsx +++ b/frontend/src/components/sections/AboutSection.tsx @@ -4,9 +4,6 @@ import Image from "next/image"; import { useRef } from "react"; import { useGSAP } from "@gsap/react"; import gsap from "gsap"; -import { ScrollTrigger } from "gsap/ScrollTrigger"; - -gsap.registerPlugin(ScrollTrigger); export default function AboutSection() { const sectionRef = useRef(null); @@ -48,6 +45,7 @@ export default function AboutSection() { alt="Architettura moderna in vetro e acciaio" src="/images/architecture.jpg" fill + sizes="100vw" className="object-cover" priority={false} /> diff --git a/frontend/src/components/sections/ApproccioSection.tsx b/frontend/src/components/sections/ApproccioSection.tsx index ed086e0..a5b7001 100644 --- a/frontend/src/components/sections/ApproccioSection.tsx +++ b/frontend/src/components/sections/ApproccioSection.tsx @@ -2,9 +2,6 @@ import { useRef } from "react"; import { useGSAP } from "@gsap/react"; import gsap from "gsap"; -import { ScrollTrigger } from "gsap/ScrollTrigger"; - -gsap.registerPlugin(ScrollTrigger); export default function ApproccioSection() { const sectionRef = useRef(null); diff --git a/frontend/src/components/sections/BeforeAfterSection.tsx b/frontend/src/components/sections/BeforeAfterSection.tsx index 257c93c..8a219a7 100644 --- a/frontend/src/components/sections/BeforeAfterSection.tsx +++ b/frontend/src/components/sections/BeforeAfterSection.tsx @@ -2,9 +2,6 @@ import { useRef } from "react"; import { useGSAP } from "@gsap/react"; import gsap from "gsap"; -import { ScrollTrigger } from "gsap/ScrollTrigger"; - -gsap.registerPlugin(ScrollTrigger); export default function BeforeAfterSection() { const sectionRef = useRef(null); diff --git a/frontend/src/components/sections/FilosofiaSection.tsx b/frontend/src/components/sections/FilosofiaSection.tsx index d437489..d3a8904 100644 --- a/frontend/src/components/sections/FilosofiaSection.tsx +++ b/frontend/src/components/sections/FilosofiaSection.tsx @@ -2,9 +2,6 @@ import { useRef } from "react"; import { useGSAP } from "@gsap/react"; import gsap from "gsap"; -import { ScrollTrigger } from "gsap/ScrollTrigger"; - -gsap.registerPlugin(ScrollTrigger); export default function FilosofiaSection() { const sectionRef = useRef(null); diff --git a/frontend/src/components/sections/HeroSection.tsx b/frontend/src/components/sections/HeroSection.tsx index 7881e79..45eb463 100644 --- a/frontend/src/components/sections/HeroSection.tsx +++ b/frontend/src/components/sections/HeroSection.tsx @@ -1,52 +1,23 @@ -"use client"; import Link from "next/link"; -import { useRef } from "react"; -import { useGSAP } from "@gsap/react"; -import gsap from "gsap"; export default function HeroSection() { - const sectionRef = useRef(null); - const headlineRef = useRef(null); - const ctaRef = useRef(null); - - useGSAP(() => { - if (!headlineRef.current || !ctaRef.current) return; - - const tl = gsap.timeline({ defaults: { ease: "power3.out" } }); - tl.fromTo(headlineRef.current, - { y: 60, opacity: 0 }, - { y: 0, opacity: 1, duration: 1 } - ).fromTo( - Array.from(ctaRef.current.children), - { y: 30, opacity: 0 }, - { y: 0, opacity: 1, duration: 0.6, stagger: 0.15 }, - "-=0.4" - ); - }, { scope: sectionRef }); - return ( -
+
-

+

La struttura digitale del tuo business.

-
+
Inizia il Progetto Scopri il Metodo diff --git a/frontend/src/components/sections/ServicesSection.tsx b/frontend/src/components/sections/ServicesSection.tsx index 072b2a7..c86faf9 100644 --- a/frontend/src/components/sections/ServicesSection.tsx +++ b/frontend/src/components/sections/ServicesSection.tsx @@ -2,11 +2,8 @@ import { useRef, useState, useCallback, useEffect } from "react"; import { useGSAP } from "@gsap/react"; import gsap from "gsap"; -import { ScrollTrigger } from "gsap/ScrollTrigger"; import ScrollProgressDots from "@/components/ScrollProgressDots"; -gsap.registerPlugin(ScrollTrigger); - const services = [ { id: "portali",