improve with header
This commit is contained in:
Arthur Belleville
parent
c04a437283
commit
14b29bde16
2 changed files with 178 additions and 47 deletions
140
ui/src/App.tsx
140
ui/src/App.tsx
|
|
@ -2,6 +2,8 @@ import { Button } from "./ui-components/button";
|
|||
import logo from "./assets/icon.jpg";
|
||||
import { useState, useEffect } from "react";
|
||||
import { Switch } from "./ui-components/switch";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
import { Header } from "./ui-components/header";
|
||||
|
||||
type Theme = "dark" | "light" | "system";
|
||||
|
||||
|
|
@ -24,37 +26,14 @@ export const App = () => {
|
|||
}, [theme]);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-emerald-100 via-green-100 to-white dark:bg-gradient-to-br dark:from-[#0a1f0a] dark:via-[#051505] dark:to-black">
|
||||
<div
|
||||
className={twMerge(
|
||||
"min-h-screen bg-gradient-to-br from-emerald-100 via-green-100 to-white",
|
||||
"dark:bg-gradient-to-br dark:from-[#0a1f0a] dark:via-[#051505] dark:to-black"
|
||||
)}
|
||||
>
|
||||
<Header theme={theme} onThemeChange={setTheme} />
|
||||
<div className="container mx-auto px-4 py-16">
|
||||
<nav className="flex items-center justify-between mb-16">
|
||||
<div className="flex items-center gap-2">
|
||||
<img src={logo} alt="Logo XTablo" className="w-8 h-8" />
|
||||
<h1 className="text-3xl font-bold text-slate-900 dark:text-white">
|
||||
XTablo
|
||||
</h1>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<Button
|
||||
variant="outline"
|
||||
className="text-slate-900 dark:text-white hover:text-slate-700 dark:hover:text-white/80 border-slate-300 dark:border-white/30 hover:border-slate-400 dark:hover:border-white/50 transition"
|
||||
>
|
||||
Connexion
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="text-slate-900 dark:text-white hover:text-slate-700 dark:hover:text-white/80 border-slate-300 dark:border-white/30 hover:border-slate-400 dark:hover:border-white/50 transition"
|
||||
>
|
||||
S'inscrire
|
||||
</Button>
|
||||
<Switch
|
||||
isSelected={theme === "dark"}
|
||||
onChange={() => setTheme(theme === "dark" ? "light" : "dark")}
|
||||
>
|
||||
Dark mode
|
||||
</Switch>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<main className="text-center">
|
||||
<h2 className="text-5xl font-bold text-slate-900 dark:text-white mb-6">
|
||||
Maîtrisez vos dépenses de chantier
|
||||
|
|
@ -67,25 +46,38 @@ export const App = () => {
|
|||
</p>
|
||||
|
||||
<Button
|
||||
className="inline-flex items-center gap-2 bg-blue-950 px-8 py-4 rounded-full
|
||||
text-white font-semibold hover:bg-blue-900 transition-colors
|
||||
shadow-lg hover:shadow-xl shadow-blue-950/20"
|
||||
className={twMerge(
|
||||
"inline-flex items-center gap-2 bg-blue-950 px-8 py-4 rounded-full",
|
||||
"text-white font-semibold hover:bg-blue-900 transition-colors",
|
||||
"shadow-lg hover:shadow-xl shadow-blue-950/20"
|
||||
)}
|
||||
>
|
||||
Démarrer gratuitement
|
||||
</Button>
|
||||
|
||||
<div className="mt-20">
|
||||
<div className="bg-white dark:bg-slate-800/50 backdrop-blur-lg rounded-2xl p-8 shadow-xl border border-emerald-200 dark:border-slate-700/50">
|
||||
<div
|
||||
className={twMerge(
|
||||
"bg-white dark:bg-slate-800/50 backdrop-blur-lg rounded-2xl p-8",
|
||||
"shadow-xl border border-emerald-200 dark:border-slate-700/50"
|
||||
)}
|
||||
>
|
||||
<div className="aspect-video rounded-lg bg-emerald-100 dark:bg-slate-700/50 animate-pulse" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section className="mt-24">
|
||||
<section id="features" className="mt-24">
|
||||
<h3 className="text-3xl font-bold text-slate-900 dark:text-white mb-12">
|
||||
Fait confiance par les entreprises du BTP
|
||||
</h3>
|
||||
<div className="flex overflow-x-hidden gap-12 pb-4 -mx-4 px-4 scrollbar-hide">
|
||||
<div className="flex-none w-[300px] bg-white dark:bg-slate-800/50 backdrop-blur-lg rounded-xl p-6 hover:bg-emerald-100/50 dark:hover:bg-slate-800/70 transition border border-emerald-200 dark:border-slate-700/50 flex flex-col animate-slide">
|
||||
<div
|
||||
className={twMerge(
|
||||
"flex-none w-[300px] bg-white dark:bg-slate-800/50 backdrop-blur-lg rounded-xl p-6",
|
||||
"hover:bg-emerald-100/50 dark:hover:bg-slate-800/70 transition",
|
||||
"border border-emerald-200 dark:border-slate-700/50 flex flex-col animate-slide"
|
||||
)}
|
||||
>
|
||||
<p className="text-slate-700 dark:text-white mb-4 flex-grow">
|
||||
"XTablo a révolutionné notre gestion des dépenses. Nous
|
||||
pouvons maintenant suivre chaque euro en temps réel et prendre
|
||||
|
|
@ -104,7 +96,13 @@ export const App = () => {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex-none w-[300px] bg-white dark:bg-slate-800/50 backdrop-blur-lg rounded-xl p-6 hover:bg-emerald-100/50 dark:hover:bg-slate-800/70 transition border border-emerald-200 dark:border-slate-700/50 flex flex-col animate-slide">
|
||||
<div
|
||||
className={twMerge(
|
||||
"flex-none w-[300px] bg-white dark:bg-slate-800/50 backdrop-blur-lg rounded-xl p-6",
|
||||
"hover:bg-emerald-100/50 dark:hover:bg-slate-800/70 transition",
|
||||
"border border-emerald-200 dark:border-slate-700/50 flex flex-col animate-slide"
|
||||
)}
|
||||
>
|
||||
<p className="text-slate-700 dark:text-white mb-4 flex-grow">
|
||||
"Les fonctionnalités de suivi des dépenses sont exactement ce
|
||||
dont nous avions besoin. Cela nous a permis de réduire nos
|
||||
|
|
@ -123,7 +121,13 @@ export const App = () => {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex-none w-[300px] bg-white dark:bg-slate-800/50 backdrop-blur-lg rounded-xl p-6 hover:bg-emerald-100/50 dark:hover:bg-slate-800/70 transition border border-emerald-200 dark:border-slate-700/50 flex flex-col animate-slide">
|
||||
<div
|
||||
className={twMerge(
|
||||
"flex-none w-[300px] bg-white dark:bg-slate-800/50 backdrop-blur-lg rounded-xl p-6",
|
||||
"hover:bg-emerald-100/50 dark:hover:bg-slate-800/70 transition",
|
||||
"border border-emerald-200 dark:border-slate-700/50 flex flex-col animate-slide"
|
||||
)}
|
||||
>
|
||||
<p className="text-slate-700 dark:text-white mb-4 flex-grow">
|
||||
"La gestion des dépenses sur plusieurs chantiers n'a jamais
|
||||
été aussi simple. XTablo nous donne une visibilité totale sur
|
||||
|
|
@ -143,12 +147,20 @@ export const App = () => {
|
|||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section className="mt-24">
|
||||
|
||||
<section id="pricing" className="mt-24">
|
||||
<h3 className="text-3xl font-bold text-slate-900 dark:text-white mb-12">
|
||||
Des tarifs adaptés à vos besoins
|
||||
</h3>
|
||||
<div className="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto">
|
||||
<div className="bg-white dark:bg-slate-800/50 backdrop-blur-lg rounded-2xl p-8 border border-emerald-200 dark:border-white/30 hover:border-emerald-300 dark:hover:border-white/50 transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl hover:shadow-emerald-200/20 dark:hover:shadow-emerald-900/20 flex flex-col">
|
||||
<div
|
||||
className={twMerge(
|
||||
"bg-white dark:bg-slate-800/50 backdrop-blur-lg rounded-2xl p-8",
|
||||
"border border-emerald-200 dark:border-white/30 hover:border-emerald-300 dark:hover:border-white/50",
|
||||
"transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl",
|
||||
"hover:shadow-emerald-200/20 dark:hover:shadow-emerald-900/20 flex flex-col"
|
||||
)}
|
||||
>
|
||||
<h4 className="text-2xl font-bold text-slate-900 dark:text-white mb-4">
|
||||
Starter
|
||||
</h4>
|
||||
|
|
@ -226,12 +238,25 @@ export const App = () => {
|
|||
Support par email
|
||||
</li>
|
||||
</ul>
|
||||
<button className="w-full px-6 py-3 bg-blue-950 rounded-full text-white font-semibold hover:bg-blue-900 transition-all duration-300 hover:scale-[1.02] hover:shadow-lg hover:shadow-xl shadow-blue-950/20 mt-auto">
|
||||
<button
|
||||
className={twMerge(
|
||||
"w-full px-6 py-3 bg-blue-950 rounded-full text-white font-semibold",
|
||||
"hover:bg-blue-900 transition-all duration-300 hover:scale-[1.02]",
|
||||
"hover:shadow-lg hover:shadow-xl shadow-blue-950/20 mt-auto"
|
||||
)}
|
||||
>
|
||||
Commencer
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="bg-white dark:bg-slate-800/50 backdrop-blur-lg rounded-2xl p-8 border border-emerald-200 dark:border-white/50 relative flex flex-col transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl hover:shadow-emerald-200/20 dark:hover:shadow-emerald-900/20">
|
||||
<div
|
||||
className={twMerge(
|
||||
"bg-white dark:bg-slate-800/50 backdrop-blur-lg rounded-2xl p-8",
|
||||
"border border-emerald-200 dark:border-white/50 relative flex flex-col",
|
||||
"transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl",
|
||||
"hover:shadow-emerald-200/20 dark:hover:shadow-emerald-900/20"
|
||||
)}
|
||||
>
|
||||
<div className="absolute -top-4 left-1/2 transform -translate-x-1/2 transition-all duration-300 group-hover:scale-110">
|
||||
<span className="bg-blue-950 text-white px-4 py-1 rounded-full text-sm font-semibold">
|
||||
Plus populaire
|
||||
|
|
@ -330,13 +355,20 @@ export const App = () => {
|
|||
API disponible
|
||||
</li>
|
||||
</ul>
|
||||
<button className="w-full px-6 py-3 bg-blue-950 rounded-full text-white font-semibold hover:bg-blue-900 transition-all duration-300 hover:scale-[1.02] hover:shadow-lg hover:shadow-xl shadow-blue-950/20 mt-auto">
|
||||
<button
|
||||
className={twMerge(
|
||||
"w-full px-6 py-3 bg-blue-950 rounded-full text-white font-semibold",
|
||||
"hover:bg-blue-900 transition-all duration-300 hover:scale-[1.02]",
|
||||
"hover:shadow-lg hover:shadow-xl shadow-blue-950/20 mt-auto"
|
||||
)}
|
||||
>
|
||||
Commencer
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section className="mt-24 text-center">
|
||||
|
||||
<section id="contact" className="mt-24 text-center">
|
||||
<h3 className="text-3xl font-bold text-slate-900 dark:text-white mb-6">
|
||||
Prêt à optimiser vos dépenses de projet ?
|
||||
</h3>
|
||||
|
|
@ -345,17 +377,31 @@ export const App = () => {
|
|||
carte bancaire requise.
|
||||
</p>
|
||||
<div className="flex justify-center gap-6">
|
||||
<button className="px-8 py-3 bg-blue-950 rounded-full text-white font-semibold hover:bg-blue-900 transition shadow-lg hover:shadow-xl shadow-blue-950/20">
|
||||
<button
|
||||
className={twMerge(
|
||||
"px-8 py-3 bg-blue-950 rounded-full text-white font-semibold",
|
||||
"hover:bg-blue-900 transition shadow-lg hover:shadow-xl shadow-blue-950/20"
|
||||
)}
|
||||
>
|
||||
Essai gratuit
|
||||
</button>
|
||||
<button className="px-8 py-3 border border-blue-400/30 rounded-full text-slate-900 dark:text-white font-semibold hover:bg-blue-950/30 transition">
|
||||
<button
|
||||
className={twMerge(
|
||||
"px-8 py-3 border border-blue-400/30 rounded-full",
|
||||
"text-slate-900 dark:text-white font-semibold hover:bg-blue-950/30 transition"
|
||||
)}
|
||||
>
|
||||
Contacter les ventes
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
<footer className="mt-24 py-8 border-t border-slate-200 dark:border-slate-800">
|
||||
<footer
|
||||
className={twMerge(
|
||||
"mt-24 py-8 border-t border-slate-200 dark:border-slate-800"
|
||||
)}
|
||||
>
|
||||
<div className="container mx-auto px-4 text-center">
|
||||
<p className="text-slate-600 dark:text-slate-400 text-sm">
|
||||
© {new Date().getFullYear()} XTablo. Tous droits réservés.
|
||||
|
|
|
|||
85
ui/src/ui-components/header.tsx
Normal file
85
ui/src/ui-components/header.tsx
Normal file
|
|
@ -0,0 +1,85 @@
|
|||
import { Button } from "./button";
|
||||
import { Switch } from "./switch";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
import logo from "../assets/icon.jpg";
|
||||
|
||||
interface HeaderProps {
|
||||
theme: "dark" | "light" | "system";
|
||||
onThemeChange: (theme: "dark" | "light" | "system") => void;
|
||||
}
|
||||
|
||||
export function Header({ theme, onThemeChange }: HeaderProps) {
|
||||
return (
|
||||
<header className="sticky top-0 z-50 w-full border-b border-slate-200 dark:border-slate-800 bg-white/80 dark:bg-slate-900/80 backdrop-blur-lg">
|
||||
<div className="container mx-auto px-4">
|
||||
<nav className="flex items-center justify-between h-16">
|
||||
<div className="flex items-center gap-2">
|
||||
<img src={logo} alt="Logo XTablo" className="w-8 h-8" />
|
||||
<h1 className="text-2xl font-bold text-slate-900 dark:text-white">
|
||||
XTablo
|
||||
</h1>
|
||||
</div>
|
||||
<div className="flex items-center gap-6">
|
||||
<div className="hidden md:flex items-center gap-6">
|
||||
<a
|
||||
href="#features"
|
||||
className={twMerge(
|
||||
"text-slate-600 dark:text-slate-300 hover:text-slate-900 dark:hover:text-white",
|
||||
"transition-colors"
|
||||
)}
|
||||
>
|
||||
Fonctionnalités
|
||||
</a>
|
||||
<a
|
||||
href="#pricing"
|
||||
className={twMerge(
|
||||
"text-slate-600 dark:text-slate-300 hover:text-slate-900 dark:hover:text-white",
|
||||
"transition-colors"
|
||||
)}
|
||||
>
|
||||
Tarifs
|
||||
</a>
|
||||
<a
|
||||
href="#contact"
|
||||
className={twMerge(
|
||||
"text-slate-600 dark:text-slate-300 hover:text-slate-900 dark:hover:text-white",
|
||||
"transition-colors"
|
||||
)}
|
||||
>
|
||||
Contact
|
||||
</a>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<Button
|
||||
variant="outline"
|
||||
className={twMerge(
|
||||
"text-slate-900 dark:text-white hover:text-slate-700 dark:hover:text-white/80",
|
||||
"border-slate-300 dark:border-white/30 hover:border-slate-400 dark:hover:border-white/50",
|
||||
"transition"
|
||||
)}
|
||||
>
|
||||
Connexion
|
||||
</Button>
|
||||
<Button
|
||||
className={twMerge(
|
||||
"bg-blue-950 text-white hover:bg-blue-900",
|
||||
"transition-colors"
|
||||
)}
|
||||
>
|
||||
S'inscrire
|
||||
</Button>
|
||||
<Switch
|
||||
isSelected={theme === "dark"}
|
||||
onChange={() =>
|
||||
onThemeChange(theme === "dark" ? "light" : "dark")
|
||||
}
|
||||
>
|
||||
Dark mode
|
||||
</Switch>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in a new issue