feat: add Navbar and Hero components with Tailwind styling
Create landing page structure following 'Little Often' principle: Components Created: - Navbar.tsx: Logo + CTA button with sticky positioning - Hero.tsx: Headline, sub-headline, dual CTAs, trust indicators, stats - components/index.ts: Centralized exports Design Features: - Mobile-first responsive design (sm:, lg: breakpoints) - WCAG AA compliant contrast ratios (4.5:1+) - Accessible focus rings and aria-labels - Modern color palette (indigo primary, slate neutrals) - Smooth gradients and shadows Layout Structure: frontend/src/ ├── components/ │ ├── layout/ │ │ └── Navbar.tsx │ ├── sections/ │ │ └── Hero.tsx │ └── index.ts ├── App.tsx: Clean integration of Navbar + Hero Fixes Applied: - Install @tailwindcss/postcss for Tailwind v4 compatibility - Update postcss.config.js with new plugin - Remove @tailwind directives from index.css (v4 style) Build Verification: ✅ TypeScript compilation successful ✅ Tailwind CSS processing successful ✅ Production build completed (dist/ folder) Content: - Headline: 'Il DevOps tascabile che traduce i crash...' - Sub-headline: Explains monitoring + AI + Telegram flow - Primary CTA: 'Ottieni il tuo Webhook URL' - Secondary CTA: 'Guarda la Demo' - Stats: <5s response, 300+ models, €0.15/month Refs: docs/frontend_landing_plan.md, .opencode/skills/frontend-ui-ux/
This commit is contained in:
Luca Sacchi Ricciardi
@@ -1,121 +1,33 @@
|
||||
import { useState } from 'react'
|
||||
import reactLogo from './assets/react.svg'
|
||||
import viteLogo from './assets/vite.svg'
|
||||
import heroImg from './assets/hero.png'
|
||||
import './App.css'
|
||||
import { Navbar, Hero } from './components';
|
||||
import './App.css';
|
||||
|
||||
function App() {
|
||||
const [count, setCount] = useState(0)
|
||||
const handlePrimaryCta = () => {
|
||||
console.log('Primary CTA clicked: Ottieni Webhook URL');
|
||||
// TODO: Implementare logica per generazione webhook
|
||||
};
|
||||
|
||||
const handleSecondaryCta = () => {
|
||||
console.log('Secondary CTA clicked: Guarda Demo');
|
||||
// TODO: Implementare logica per apertura demo
|
||||
};
|
||||
|
||||
const handleNavbarCta = () => {
|
||||
console.log('Navbar CTA clicked: Inizia Gratis');
|
||||
// TODO: Scroll to form o apertura modal
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<section id="center">
|
||||
<div className="hero">
|
||||
<img src={heroImg} className="base" width="170" height="179" alt="" />
|
||||
<img src={reactLogo} className="framework" alt="React logo" />
|
||||
<img src={viteLogo} className="vite" alt="Vite logo" />
|
||||
</div>
|
||||
<div>
|
||||
<h1>Get started</h1>
|
||||
<p>
|
||||
Edit <code>src/App.tsx</code> and save to test <code>HMR</code>
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
className="counter"
|
||||
onClick={() => setCount((count) => count + 1)}
|
||||
>
|
||||
Count is {count}
|
||||
</button>
|
||||
</section>
|
||||
|
||||
<div className="ticks"></div>
|
||||
|
||||
<section id="next-steps">
|
||||
<div id="docs">
|
||||
<svg className="icon" role="presentation" aria-hidden="true">
|
||||
<use href="/icons.svg#documentation-icon"></use>
|
||||
</svg>
|
||||
<h2>Documentation</h2>
|
||||
<p>Your questions, answered</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://vite.dev/" target="_blank">
|
||||
<img className="logo" src={viteLogo} alt="" />
|
||||
Explore Vite
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://react.dev/" target="_blank">
|
||||
<img className="button-icon" src={reactLogo} alt="" />
|
||||
Learn more
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="social">
|
||||
<svg className="icon" role="presentation" aria-hidden="true">
|
||||
<use href="/icons.svg#social-icon"></use>
|
||||
</svg>
|
||||
<h2>Connect with us</h2>
|
||||
<p>Join the Vite community</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://github.com/vitejs/vite" target="_blank">
|
||||
<svg
|
||||
className="button-icon"
|
||||
role="presentation"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<use href="/icons.svg#github-icon"></use>
|
||||
</svg>
|
||||
GitHub
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://chat.vite.dev/" target="_blank">
|
||||
<svg
|
||||
className="button-icon"
|
||||
role="presentation"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<use href="/icons.svg#discord-icon"></use>
|
||||
</svg>
|
||||
Discord
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://x.com/vite_js" target="_blank">
|
||||
<svg
|
||||
className="button-icon"
|
||||
role="presentation"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<use href="/icons.svg#x-icon"></use>
|
||||
</svg>
|
||||
X.com
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://bsky.app/profile/vite.dev" target="_blank">
|
||||
<svg
|
||||
className="button-icon"
|
||||
role="presentation"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<use href="/icons.svg#bluesky-icon"></use>
|
||||
</svg>
|
||||
Bluesky
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div className="ticks"></div>
|
||||
<section id="spacer"></section>
|
||||
</>
|
||||
)
|
||||
<div className="min-h-screen bg-slate-50">
|
||||
<Navbar onCtaClick={handleNavbarCta} />
|
||||
<main>
|
||||
<Hero
|
||||
onPrimaryCtaClick={handlePrimaryCta}
|
||||
onSecondaryCtaClick={handleSecondaryCta}
|
||||
/>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default App
|
||||
export default App;
|
||||
2
frontend/src/components/index.ts
Normal file
2
frontend/src/components/index.ts
Normal file
@@ -0,0 +1,2 @@
|
||||
export { Navbar } from './layout/Navbar';
|
||||
export { Hero } from './sections/Hero';
|
||||
32
frontend/src/components/layout/Navbar.tsx
Normal file
32
frontend/src/components/layout/Navbar.tsx
Normal file
@@ -0,0 +1,32 @@
|
||||
import React from 'react';
|
||||
|
||||
interface NavbarProps {
|
||||
onCtaClick?: () => void;
|
||||
}
|
||||
|
||||
export const Navbar: React.FC<NavbarProps> = ({ onCtaClick }) => {
|
||||
return (
|
||||
<nav className="w-full px-4 sm:px-6 lg:px-8 py-4 bg-white/80 backdrop-blur-md sticky top-0 z-50 border-b border-slate-200/60">
|
||||
<div className="max-w-7xl mx-auto flex items-center justify-between">
|
||||
{/* Logo */}
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-2xl">🌌</span>
|
||||
<span className="text-xl font-bold text-slate-900 tracking-tight">
|
||||
LogWhisperer AI
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* CTA Button */}
|
||||
<button
|
||||
onClick={onCtaClick}
|
||||
className="px-5 py-2.5 bg-indigo-600 hover:bg-indigo-700 text-white font-semibold rounded-lg transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 text-sm sm:text-base"
|
||||
aria-label="Inizia gratis con LogWhisperer AI"
|
||||
>
|
||||
Inizia Gratis
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
};
|
||||
|
||||
export default Navbar;
|
||||
94
frontend/src/components/sections/Hero.tsx
Normal file
94
frontend/src/components/sections/Hero.tsx
Normal file
@@ -0,0 +1,94 @@
|
||||
import React from 'react';
|
||||
|
||||
interface HeroProps {
|
||||
onPrimaryCtaClick?: () => void;
|
||||
onSecondaryCtaClick?: () => void;
|
||||
}
|
||||
|
||||
export const Hero: React.FC<HeroProps> = ({
|
||||
onPrimaryCtaClick,
|
||||
onSecondaryCtaClick,
|
||||
}) => {
|
||||
return (
|
||||
<section className="w-full px-4 sm:px-6 lg:px-8 py-16 sm:py-20 lg:py-24 bg-gradient-to-b from-slate-50 to-white">
|
||||
<div className="max-w-5xl mx-auto text-center">
|
||||
{/* Badge */}
|
||||
<div className="inline-flex items-center gap-2 px-4 py-2 bg-indigo-50 border border-indigo-100 rounded-full mb-8">
|
||||
<span className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></span>
|
||||
<span className="text-sm font-medium text-indigo-700">
|
||||
Sprint 2 Completato - Ora in Beta
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Headline */}
|
||||
<h1 className="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-slate-900 tracking-tight leading-tight mb-6">
|
||||
Il DevOps tascabile che{' '}
|
||||
<span className="text-indigo-600">traduce i crash</span> del tuo
|
||||
server
|
||||
</h1>
|
||||
|
||||
{/* Sub-headline */}
|
||||
<p className="text-lg sm:text-xl text-slate-600 max-w-3xl mx-auto mb-10 leading-relaxed">
|
||||
Monitora i log in tempo reale, lascia che l'AI analizzi gli errori e
|
||||
ricevi su Telegram il comando esatto per risolverli. Senza perdere ore
|
||||
su StackOverflow.
|
||||
</p>
|
||||
|
||||
{/* CTA Buttons */}
|
||||
<div className="flex flex-col sm:flex-row items-center justify-center gap-4">
|
||||
{/* Primary CTA */}
|
||||
<button
|
||||
onClick={onPrimaryCtaClick}
|
||||
className="w-full sm:w-auto px-8 py-4 bg-indigo-600 hover:bg-indigo-700 text-white font-bold rounded-xl transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 shadow-lg shadow-indigo-200 text-lg"
|
||||
aria-label="Ottieni il tuo webhook URL gratis"
|
||||
>
|
||||
🚀 Ottieni il tuo Webhook URL
|
||||
</button>
|
||||
|
||||
{/* Secondary CTA */}
|
||||
<button
|
||||
onClick={onSecondaryCtaClick}
|
||||
className="w-full sm:w-auto px-8 py-4 bg-white hover:bg-slate-50 text-slate-700 font-semibold rounded-xl border-2 border-slate-200 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 text-lg"
|
||||
aria-label="Guarda la demo di LogWhisperer AI"
|
||||
>
|
||||
▶️ Guarda la Demo
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Trust Indicators */}
|
||||
<div className="mt-12 flex flex-col sm:flex-row items-center justify-center gap-6 text-sm text-slate-500">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-green-500">✓</span>
|
||||
<span>Setup in 2 minuti</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-green-500">✓</span>
|
||||
<span>Nessuna carta di credito</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-green-500">✓</span>
|
||||
<span>Open Source</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Visual Placeholder - Stats */}
|
||||
<div className="mt-16 grid grid-cols-1 sm:grid-cols-3 gap-6 max-w-2xl mx-auto">
|
||||
<div className="p-6 bg-white rounded-2xl border border-slate-100 shadow-sm">
|
||||
<div className="text-3xl font-bold text-indigo-600 mb-1">< 5s</div>
|
||||
<div className="text-sm text-slate-500">Tempo di risposta AI</div>
|
||||
</div>
|
||||
<div className="p-6 bg-white rounded-2xl border border-slate-100 shadow-sm">
|
||||
<div className="text-3xl font-bold text-indigo-600 mb-1">300+</div>
|
||||
<div className="text-sm text-slate-500">Modelli AI supportati</div>
|
||||
</div>
|
||||
<div className="p-6 bg-white rounded-2xl border border-slate-100 shadow-sm">
|
||||
<div className="text-3xl font-bold text-indigo-600 mb-1">€0.15</div>
|
||||
<div className="text-sm text-slate-500">Costo/mese (1000 log)</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default Hero;
|
||||
@@ -1,7 +1,3 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
:root {
|
||||
--text: #6b6375;
|
||||
--text-h: #08060d;
|
||||
|
||||
Reference in New Issue
Block a user