feat: add ProblemSolution and HowItWorks sections with accessible animations
Create two new landing page sections following Day 3 objectives: ProblemSolution.tsx: - Before/After comparison layout (2-column grid) - Terminal simulation showing cryptic PostgreSQL logs - Telegram message simulation with clear solution - Pain points vs benefits comparison lists - Arrow connector between problem and solution - Final CTA button HowItWorks.tsx: - 3-step card layout (Monitor, Analyze, Notify) - StepCard sub-component with icons from Lucide React - Server, Brain, MessageSquare icons for each step - Detailed bullet points for each step - Connector lines between cards (desktop) - CSS fade-up animations with stagger effect - Final CTA box with button Accessibility Features: - Respects prefers-reduced-motion media query - Disables all animations if user prefers reduced motion - Proper focus rings on interactive elements - Aria-labels and aria-hidden on decorative icons - Semantic HTML structure Animation Implementation: - Pure CSS animations (no Framer Motion - parsimony) - @keyframes fadeUp: 600ms ease-out - Stagger delays: 0.1s, 0.2s, 0.3s between cards - Smooth hover transitions on cards - Transform scale on icon hover Responsive Design: - Mobile: single column layout - Tablet: 2-column grid - Desktop: 3-column grid with connector lines - Adaptive spacing and font sizes Integration: - Added exports to components/index.ts - Integrated into App.tsx below Hero section - Consistent styling with existing components Build Verification: - TypeScript compilation: ✓ 0 errors - Vite build: ✓ Success - Bundle size: 208KB (65KB gzipped) - All components render correctly Icons Installed: - lucide-react for consistent iconography - Terminal, AlertCircle, CheckCircle, ArrowRight - Server, Brain, MessageSquare Refs: .opencode/skills/ui-ux-master (animation best practices)
This commit is contained in:
Luca Sacchi Ricciardi
@@ -1,4 +1,4 @@
|
||||
import { Navbar, Hero } from './components';
|
||||
import { Navbar, Hero, ProblemSolution, HowItWorks } from './components';
|
||||
import './App.css';
|
||||
|
||||
function App() {
|
||||
@@ -25,6 +25,8 @@ function App() {
|
||||
onPrimaryCtaClick={handlePrimaryCta}
|
||||
onSecondaryCtaClick={handleSecondaryCta}
|
||||
/>
|
||||
<ProblemSolution />
|
||||
<HowItWorks />
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -1,2 +1,4 @@
|
||||
export { Navbar } from './layout/Navbar';
|
||||
export { Hero } from './sections/Hero';
|
||||
export { Hero } from './sections/Hero';
|
||||
export { ProblemSolution } from './sections/ProblemSolution';
|
||||
export { HowItWorks } from './sections/HowItWorks';
|
||||
185
frontend/src/components/sections/HowItWorks.tsx
Normal file
185
frontend/src/components/sections/HowItWorks.tsx
Normal file
@@ -0,0 +1,185 @@
|
||||
import React from 'react';
|
||||
import { Server, Brain, MessageSquare, ArrowRight } from 'lucide-react';
|
||||
|
||||
interface StepCardProps {
|
||||
number: string;
|
||||
icon: React.ReactNode;
|
||||
title: string;
|
||||
description: string;
|
||||
details: string[];
|
||||
delay?: number;
|
||||
}
|
||||
|
||||
const StepCard: React.FC<StepCardProps> = ({
|
||||
number,
|
||||
icon,
|
||||
title,
|
||||
description,
|
||||
details,
|
||||
}) => {
|
||||
return (
|
||||
<div
|
||||
className="relative group"
|
||||
style={{
|
||||
animation: 'fadeUp 0.6s ease-out backwards',
|
||||
}}
|
||||
>
|
||||
{/* Connector line (desktop) */}
|
||||
<div className="hidden lg:block absolute top-12 left-full w-full h-0.5 bg-gradient-to-r from-indigo-200 to-indigo-100 -z-10"
|
||||
style={{ width: 'calc(100% - 3rem)' }} />
|
||||
|
||||
<div className="bg-white rounded-2xl p-8 border border-slate-200 hover:border-indigo-300 hover:shadow-lg transition-all duration-300 h-full">
|
||||
{/* Step Number */}
|
||||
<div className="absolute -top-4 -left-2 w-10 h-10 bg-indigo-600 text-white rounded-full flex items-center justify-center font-bold text-lg shadow-lg">
|
||||
{number}
|
||||
</div>
|
||||
|
||||
{/* Icon */}
|
||||
<div className="w-14 h-14 bg-indigo-50 rounded-xl flex items-center justify-center text-indigo-600 mb-6 group-hover:scale-110 transition-transform duration-300">
|
||||
{icon}
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<h3 className="text-xl font-bold text-slate-900 mb-3">{title}</h3>
|
||||
<p className="text-slate-600 mb-4 leading-relaxed">{description}</p>
|
||||
|
||||
{/* Details List */}
|
||||
<ul className="space-y-2">
|
||||
{details.map((detail, index) => (
|
||||
<li key={index} className="flex items-start gap-2 text-sm text-slate-500">
|
||||
<span className="text-indigo-500 mt-0.5">•</span>
|
||||
{detail}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const HowItWorks: React.FC = () => {
|
||||
const steps = [
|
||||
{
|
||||
number: '1',
|
||||
icon: <Server className="w-7 h-7" aria-hidden="true" />,
|
||||
title: 'Monitora i Log',
|
||||
description:
|
||||
'Installa il nostro script Bash leggero sui tuoi server. Monitora syslog, nginx, PostgreSQL e altri log critici in tempo reale.',
|
||||
details: [
|
||||
'Script open source e trasparente',
|
||||
'Solo lettura, nessuna modifica ai log',
|
||||
'Validazione HMAC per sicurezza',
|
||||
'Configurazione in 2 minuti',
|
||||
],
|
||||
},
|
||||
{
|
||||
number: '2',
|
||||
icon: <Brain className="w-7 h-7" aria-hidden="true" />,
|
||||
title: 'Analisi AI',
|
||||
description:
|
||||
'Quando rileva un errore critico, il log viene inviato al nostro workflow n8n che utilizza OpenRouter per analizzarlo con GPT-4o-mini.',
|
||||
details: [
|
||||
'Analisi in < 5 secondi',
|
||||
'300+ modelli AI disponibili',
|
||||
'Metodo Sacchi: comandi sicuri',
|
||||
'DLP: dati sensibili mascherati',
|
||||
],
|
||||
},
|
||||
{
|
||||
number: '3',
|
||||
icon: <MessageSquare className="w-7 h-7" aria-hidden="true" />,
|
||||
title: 'Ricevi la Soluzione',
|
||||
description:
|
||||
'Ottieni una notifica su Telegram o Slack con la descrizione del problema e il comando esatto per risolverlo.',
|
||||
details: [
|
||||
'Notifica immediata',
|
||||
'Comando pronto da copiare',
|
||||
'Indicazione di sicurezza',
|
||||
'Note aggiuntive contestuali',
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<section className="w-full px-4 sm:px-6 lg:px-8 py-16 sm:py-20 lg:py-24 bg-slate-50">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
{/* Section Header */}
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-3xl sm:text-4xl font-bold text-slate-900 mb-4">
|
||||
Come funziona
|
||||
</h2>
|
||||
<p className="text-lg text-slate-600 max-w-2xl mx-auto">
|
||||
Tre passaggi semplici per trasformare i crash del tuo server in soluzioni immediate.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Steps Grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 lg:gap-6 relative">
|
||||
{steps.map((step, index) => (
|
||||
<StepCard
|
||||
key={index}
|
||||
{...step}
|
||||
delay={index * 150}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Bottom CTA */}
|
||||
<div className="text-center mt-16">
|
||||
<div className="inline-flex flex-col sm:flex-row items-center gap-4 p-6 bg-white rounded-2xl border border-slate-200 shadow-sm">
|
||||
<div className="text-left">
|
||||
<h3 className="font-semibold text-slate-900 mb-1">
|
||||
Pronto per iniziare?
|
||||
</h3>
|
||||
<p className="text-sm text-slate-600">
|
||||
Setup completo in meno di 5 minuti.
|
||||
</p>
|
||||
</div>
|
||||
<button className="inline-flex items-center gap-2 px-6 py-3 bg-indigo-600 hover:bg-indigo-700 text-white font-semibold rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 whitespace-nowrap">
|
||||
Inizia Ora
|
||||
<ArrowRight className="w-4 h-4" aria-hidden="true" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* CSS Animations with reduced-motion support */}
|
||||
<style>{`
|
||||
@keyframes fadeUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Respect reduced motion preference */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Stagger animation delays */
|
||||
.group:nth-child(1) {
|
||||
animation-delay: 0.1s;
|
||||
}
|
||||
.group:nth-child(2) {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
.group:nth-child(3) {
|
||||
animation-delay: 0.3s;
|
||||
}
|
||||
`}</style>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default HowItWorks;
|
||||
144
frontend/src/components/sections/ProblemSolution.tsx
Normal file
144
frontend/src/components/sections/ProblemSolution.tsx
Normal file
@@ -0,0 +1,144 @@
|
||||
import React from 'react';
|
||||
import { Terminal, AlertCircle, CheckCircle, ArrowRight } from 'lucide-react';
|
||||
|
||||
export const ProblemSolution: React.FC = () => {
|
||||
return (
|
||||
<section className="w-full px-4 sm:px-6 lg:px-8 py-16 sm:py-20 lg:py-24 bg-white">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
{/* Section Header */}
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-3xl sm:text-4xl font-bold text-slate-900 mb-4">
|
||||
Di fronte a un crash, ogni secondo conta
|
||||
</h2>
|
||||
<p className="text-lg text-slate-600 max-w-2xl mx-auto">
|
||||
Non perdere ore a cercare su StackOverflow. Ricevi immediatamente il comando giusto.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Comparison Grid */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12">
|
||||
{/* BEFORE - Problem */}
|
||||
<div className="relative">
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<AlertCircle className="w-5 h-5 text-red-500" aria-hidden="true" />
|
||||
<h3 className="text-lg font-semibold text-red-600">Prima: Frustrazione e tempo perso</h3>
|
||||
</div>
|
||||
|
||||
<div className="bg-slate-900 rounded-xl p-6 font-mono text-sm overflow-hidden">
|
||||
{/* Log output simulation */}
|
||||
<div className="text-slate-400 mb-2">$ tail -f /var/log/postgresql</div>
|
||||
<div className="space-y-1">
|
||||
<div className="text-red-400">FATAL: database system is out of memory</div>
|
||||
<div className="text-red-400">DETAIL: Failed on request of size 8192</div>
|
||||
<div className="text-yellow-400">HINT: Check memory usage and limits</div>
|
||||
</div>
|
||||
|
||||
{/* User frustration */}
|
||||
<div className="mt-6 pt-4 border-t border-slate-700">
|
||||
<div className="text-slate-300 flex items-start gap-2">
|
||||
<span className="text-slate-500">❯</span>
|
||||
<span>Cosa significa? Quanta memoria? Dove guardo?</span>
|
||||
</div>
|
||||
<div className="text-slate-500 text-xs mt-2">
|
||||
45 minuti di ricerca su Google e StackOverflow...
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Pain Points */}
|
||||
<ul className="mt-6 space-y-3">
|
||||
{[
|
||||
'Log criptici e tecnici',
|
||||
'Ore perse in ricerche',
|
||||
'Soluzioni generiche non applicabili',
|
||||
'Stress e pressione',
|
||||
].map((item, index) => (
|
||||
<li key={index} className="flex items-center gap-3 text-slate-600">
|
||||
<span className="w-5 h-5 rounded-full bg-red-100 text-red-600 flex items-center justify-center text-xs flex-shrink-0">✕</span>
|
||||
{item}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* AFTER - Solution */}
|
||||
<div className="relative">
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<CheckCircle className="w-5 h-5 text-green-500" aria-hidden="true" />
|
||||
<h3 className="text-lg font-semibold text-green-600">Dopo: Soluzione immediata</h3>
|
||||
</div>
|
||||
|
||||
{/* Telegram Message Simulation */}
|
||||
<div className="bg-gradient-to-br from-indigo-50 to-blue-50 rounded-xl p-6 border border-indigo-100">
|
||||
<div className="flex items-start gap-3 mb-4">
|
||||
<div className="w-10 h-10 bg-indigo-600 rounded-full flex items-center justify-center text-white flex-shrink-0">
|
||||
🌌
|
||||
</div>
|
||||
<div>
|
||||
<div className="font-semibold text-slate-900">LogWhisperer AI</div>
|
||||
<div className="text-xs text-slate-500">Ora</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-lg p-4 shadow-sm">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<span className="text-red-500">🚨</span>
|
||||
<span className="font-semibold text-slate-900">PostgreSQL Out of Memory</span>
|
||||
</div>
|
||||
<p className="text-slate-600 text-sm mb-3">
|
||||
Il database ha esaurito la memoria disponibile. Verifica processi e connessioni attive.
|
||||
</p>
|
||||
<div className="bg-slate-900 rounded-lg p-3 mb-3">
|
||||
<code className="text-green-400 text-sm font-mono">
|
||||
ps aux | grep postgres | head -5 && free -h
|
||||
</code>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-xs text-slate-500">
|
||||
<span className="text-green-500">✓</span>
|
||||
Comando sicuro - solo diagnostica
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Benefits */}
|
||||
<ul className="mt-6 space-y-3">
|
||||
{[
|
||||
'Analisi AI in < 5 secondi',
|
||||
'Comando esatto e sicuro',
|
||||
'Notifica su Telegram/Slack',
|
||||
'Zero stress, soluzione immediata',
|
||||
].map((item, index) => (
|
||||
<li key={index} className="flex items-center gap-3 text-slate-600">
|
||||
<span className="w-5 h-5 rounded-full bg-green-100 text-green-600 flex items-center justify-center text-xs flex-shrink-0">✓</span>
|
||||
{item}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Arrow connector (desktop only) */}
|
||||
<div className="hidden lg:flex justify-center items-center my-8">
|
||||
<div className="flex items-center gap-4 text-slate-400">
|
||||
<span className="text-sm">Da log criptici</span>
|
||||
<ArrowRight className="w-6 h-6 text-indigo-600" aria-hidden="true" />
|
||||
<span className="text-sm font-medium text-indigo-600">A comando chiaro</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bottom CTA */}
|
||||
<div className="text-center mt-12">
|
||||
<p className="text-slate-600 mb-4">
|
||||
Unisciti agli sviluppatori che risolvono i crash in secondi, non in ore.
|
||||
</p>
|
||||
<button className="inline-flex items-center gap-2 px-6 py-3 bg-indigo-600 hover:bg-indigo-700 text-white font-semibold rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
|
||||
<Terminal className="w-5 h-5" aria-hidden="true" />
|
||||
Prova Gratuitamente
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProblemSolution;
|
||||
Reference in New Issue
Block a user