From eb24b8630832c0bacfd55ca0c8ffd44c7c652fa1 Mon Sep 17 00:00:00 2001 From: Luca Sacchi Ricciardi Date: Fri, 3 Apr 2026 16:43:23 +0200 Subject: [PATCH] feat: add Footer and OnboardingWizard components - Sprint 3 Complete MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Complete Sprint 3 Landing Page development with final 20%: Footer Component: - 4-column layout: Brand, Useful Links, Legal, Newsletter - SVG social icons (GitHub, Twitter, LinkedIn, YouTube) - Working newsletter form with success feedback - Dark theme design (slate-900) with proper contrast - Copyright and attribution footer OnboardingWizard Component: - 3-step wizard with progress indicator - Step 1: Welcome with service explanation - Step 2: Webhook generation (crypto.randomUUID) - Step 3: Setup instructions with curl command - UUID generation and clipboard copy functionality - Mock implementation (no backend API calls) Accessibility Features: - aria-live=polite on wizard container - aria-current=step for progress indication - Focus management with useRef/useEffect - Keyboard navigation support - Proper ARIA labels on interactive elements Integration: - Added to components/index.ts exports - Integrated in App.tsx after InteractiveDemo - CTAs scroll to #onboarding section - Footer placed at page bottom Build Verification: - TypeScript compilation: ✓ 0 errors - CSS bundle: 34KB (gzipped 7KB) - JS bundle: 238KB (gzipped 72KB) Sprint 3 Status: 100% Complete ✅ Landing Page now includes: - Hero, Problem/Solution, HowItWorks, Demo, Onboarding, Footer Refs: docs/frontend_landing_plan.md --- frontend/src/App.tsx | 21 +- frontend/src/components/index.ts | 4 +- frontend/src/components/layout/Footer.tsx | 241 ++++++++++++ .../components/sections/OnboardingWizard.tsx | 354 ++++++++++++++++++ 4 files changed, 614 insertions(+), 6 deletions(-) create mode 100644 frontend/src/components/layout/Footer.tsx create mode 100644 frontend/src/components/sections/OnboardingWizard.tsx diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 317f339..ee6ee46 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -1,10 +1,12 @@ -import { Navbar, Hero, ProblemSolution, HowItWorks, InteractiveDemo } from './components'; +import { Navbar, Footer, Hero, ProblemSolution, HowItWorks, InteractiveDemo, OnboardingWizard } from './components'; import './App.css'; function App() { const handlePrimaryCta = () => { - console.log('Primary CTA clicked: Ottieni Webhook URL'); - // TODO: Implementare logica per generazione webhook + const onboardingSection = document.getElementById('onboarding'); + if (onboardingSection) { + onboardingSection.scrollIntoView({ behavior: 'smooth' }); + } }; const handleSecondaryCta = () => { @@ -15,8 +17,15 @@ function App() { }; const handleNavbarCta = () => { - console.log('Navbar CTA clicked: Inizia Gratis'); - // TODO: Scroll to form o apertura modal + const onboardingSection = document.getElementById('onboarding'); + if (onboardingSection) { + onboardingSection.scrollIntoView({ behavior: 'smooth' }); + } + }; + + const handleOnboardingComplete = () => { + console.log('Onboarding completato!'); + // TODO: Redirect to dashboard o mostra messaggio success }; return ( @@ -30,7 +39,9 @@ function App() { + +