From 9eb1e0ddf5935cdffbaf03b23970d1766cf4ecfe Mon Sep 17 00:00:00 2001
From: Luca Sacchi Ricciardi <luca@lucasacchi.net>
Date: Fri, 3 Apr 2026 16:22:32 +0200
Subject: [PATCH] fix: implement scroll to demo section on 'Guarda la Demo'
 button click

The 'Guarda la Demo' (Watch Demo) button in Hero section was not working.
Now it smoothly scrolls to the InteractiveDemo section.

Changes:
- Added id='demo-interattiva' to InteractiveDemo section
- Implemented handleSecondaryCta with document.getElementById
- Used scrollIntoView with smooth behavior for better UX

Refs: User feedback - button was not functional
---
 frontend/src/App.tsx                                 | 6 ++++--
 frontend/src/components/sections/InteractiveDemo.tsx | 2 +-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index e9b986d..317f339 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -8,8 +8,10 @@ function App() {
   };
 
   const handleSecondaryCta = () => {
-    console.log('Secondary CTA clicked: Guarda Demo');
-    // TODO: Implementare logica per apertura demo
+    const demoSection = document.getElementById('demo-interattiva');
+    if (demoSection) {
+      demoSection.scrollIntoView({ behavior: 'smooth' });
+    }
   };
 
   const handleNavbarCta = () => {
diff --git a/frontend/src/components/sections/InteractiveDemo.tsx b/frontend/src/components/sections/InteractiveDemo.tsx
index c347449..1354418 100644
--- a/frontend/src/components/sections/InteractiveDemo.tsx
+++ b/frontend/src/components/sections/InteractiveDemo.tsx
@@ -121,7 +121,7 @@ export const InteractiveDemo: React.FC = () => {
   const selectedLogData = DEMO_LOGS.find((l) => l.id === selectedLog);
 
   return (
-    <section className="w-full py-24 lg:py-32 bg-white" aria-labelledby="demo-heading">
+    <section id="demo-interattiva" className="w-full py-24 lg:py-32 bg-white" aria-labelledby="demo-heading">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         {/* Section Header */}
         <div className="text-center mb-16">