Improve landing page with blue colors
This commit is contained in:
Arthur Belleville
parent
4dcee49451
commit
ed0ad6098e
3 changed files with 199 additions and 145 deletions
|
|
@ -6,7 +6,7 @@ import { Link } from "react-router-dom";
|
|||
export function Header() {
|
||||
return (
|
||||
<>
|
||||
<header className="sticky top-0 z-50 w-full border-b border-emerald-200 dark:border-emerald-900/30 bg-emerald-100/90 dark:bg-[#0a1f0a]/90 backdrop-blur-lg">
|
||||
<header className="sticky top-0 z-50 w-full border-b border-blue-200 dark:border-blue-900/30 bg-blue-100/90 dark:bg-slate-900/90 backdrop-blur-lg">
|
||||
<div className="container mx-auto px-4">
|
||||
<nav className="flex items-center justify-between h-16">
|
||||
<Link to="/" className="flex items-center gap-2">
|
||||
|
|
@ -20,7 +20,7 @@ export function Header() {
|
|||
<a
|
||||
href="#features"
|
||||
className={twMerge(
|
||||
"text-slate-600 dark:text-slate-300 hover:text-emerald-700 dark:hover:text-emerald-400",
|
||||
"text-slate-600 dark:text-slate-300 hover:text-blue-700 dark:hover:text-blue-400",
|
||||
"transition-colors"
|
||||
)}
|
||||
>
|
||||
|
|
@ -29,7 +29,7 @@ export function Header() {
|
|||
<a
|
||||
href="#pricing"
|
||||
className={twMerge(
|
||||
"text-slate-600 dark:text-slate-300 hover:text-emerald-700 dark:hover:text-emerald-400",
|
||||
"text-slate-600 dark:text-slate-300 hover:text-blue-700 dark:hover:text-blue-400",
|
||||
"transition-colors"
|
||||
)}
|
||||
>
|
||||
|
|
@ -38,7 +38,7 @@ export function Header() {
|
|||
<a
|
||||
href="#contact"
|
||||
className={twMerge(
|
||||
"text-slate-600 dark:text-slate-300 hover:text-emerald-700 dark:hover:text-emerald-400",
|
||||
"text-slate-600 dark:text-slate-300 hover:text-blue-700 dark:hover:text-blue-400",
|
||||
"transition-colors"
|
||||
)}
|
||||
>
|
||||
|
|
@ -50,8 +50,8 @@ export function Header() {
|
|||
<Button
|
||||
variant="outline"
|
||||
className={twMerge(
|
||||
"text-slate-900 dark:text-white hover:text-emerald-700 dark:hover:text-emerald-400",
|
||||
"border-emerald-300 dark:border-emerald-700/30 hover:border-emerald-400 dark:hover:border-emerald-600/50",
|
||||
"text-slate-900 dark:text-white hover:text-blue-700 dark:hover:text-blue-400",
|
||||
"border-blue-300 dark:border-blue-700/30 hover:border-blue-400 dark:hover:border-blue-600/50",
|
||||
"transition"
|
||||
)}
|
||||
>
|
||||
|
|
@ -61,7 +61,7 @@ export function Header() {
|
|||
<Link to="/signup">
|
||||
<Button
|
||||
className={twMerge(
|
||||
"bg-emerald-700 text-white hover:bg-emerald-600",
|
||||
"bg-blue-700 text-white hover:bg-blue-600",
|
||||
"transition-colors"
|
||||
)}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -7,28 +7,28 @@ import { Header } from "@ui/components/header";
|
|||
export const LandingPage = () => {
|
||||
localStorage.setItem("xtablo-has-seen-landing-page", "true");
|
||||
return (
|
||||
<>
|
||||
<div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-slate-50 dark:from-slate-900 dark:via-slate-800 dark:to-blue-900/20">
|
||||
<Header />
|
||||
<div className="container mx-auto px-4">
|
||||
{/* Hero Section */}
|
||||
<section className="py-20 text-center relative">
|
||||
<div className="absolute inset-0 flex items-center justify-center pointer-events-none">
|
||||
<div className="w-[500px] h-[500px] bg-emerald-500/10 rounded-full blur-3xl" />
|
||||
<div className="w-[500px] h-[500px] bg-blue-500/10 rounded-full blur-3xl" />
|
||||
</div>
|
||||
<h1 className="text-6xl font-bold text-slate-900 dark:text-white mb-6 relative">
|
||||
Maîtrisez vos dépenses de chantier
|
||||
Simplifiez vos réunions et accélérez vos ventes
|
||||
</h1>
|
||||
<p className="text-xl text-slate-700 dark:text-white mb-12 max-w-2xl mx-auto relative">
|
||||
XTablo aide les entreprises du BTP à suivre, analyser et optimiser
|
||||
leurs dépenses de projet. Obtenez des insights en temps réel sur vos
|
||||
coûts et prenez de meilleures décisions financières.
|
||||
XTablo révolutionne la gestion de vos meetings, facilite la
|
||||
conclusion de vos deals et améliore la collaboration grâce à des
|
||||
discussions interactives et une planification intelligente.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row items-center justify-center gap-4 mb-16 relative">
|
||||
<Button
|
||||
className={twMerge(
|
||||
"inline-flex items-center gap-2 bg-emerald-700 px-8 py-4 rounded-full",
|
||||
"text-white font-semibold hover:bg-emerald-600 transition-colors",
|
||||
"shadow-lg hover:shadow-xl shadow-emerald-700/20",
|
||||
"inline-flex items-center gap-2 bg-blue-700 px-8 py-4 rounded-full",
|
||||
"text-white font-semibold hover:bg-blue-600 transition-colors",
|
||||
"shadow-lg hover:shadow-xl shadow-blue-700/20",
|
||||
"text-lg"
|
||||
)}
|
||||
>
|
||||
|
|
@ -51,11 +51,11 @@ export const LandingPage = () => {
|
|||
<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",
|
||||
"shadow-xl border border-blue-200 dark:border-slate-700/50",
|
||||
"relative"
|
||||
)}
|
||||
>
|
||||
<div className="aspect-video rounded-lg bg-emerald-100 dark:bg-slate-700/50 animate-pulse" />
|
||||
<div className="aspect-video rounded-lg bg-blue-100 dark:bg-slate-700/50 animate-pulse" />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
|
@ -63,24 +63,23 @@ export const LandingPage = () => {
|
|||
<section id="features" className="py-20">
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-4xl font-bold text-slate-900 dark:text-white mb-4">
|
||||
Une solution complète pour votre entreprise
|
||||
Tout ce dont vous avez besoin pour réussir
|
||||
</h2>
|
||||
<p className="text-xl text-slate-700 dark:text-white max-w-2xl mx-auto">
|
||||
Découvrez comment XTablo peut transformer votre gestion des
|
||||
dépenses
|
||||
Découvrez comment XTablo transforme votre façon de travailler
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid md:grid-cols-3 gap-8">
|
||||
<div
|
||||
className={twMerge(
|
||||
"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"
|
||||
"hover:bg-blue-100/50 dark:hover:bg-slate-800/70 transition",
|
||||
"border border-blue-200 dark:border-slate-700/50"
|
||||
)}
|
||||
>
|
||||
<div className="w-12 h-12 bg-emerald-500/20 rounded-lg flex items-center justify-center mb-4">
|
||||
<div className="w-12 h-12 bg-blue-500/20 rounded-lg flex items-center justify-center mb-4">
|
||||
<svg
|
||||
className="w-6 h-6 text-emerald-600"
|
||||
className="w-6 h-6 text-blue-600"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
|
|
@ -89,28 +88,28 @@ export const LandingPage = () => {
|
|||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
|
||||
d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold text-slate-900 dark:text-white mb-2">
|
||||
Suivi en temps réel
|
||||
Meetings simplifiés
|
||||
</h3>
|
||||
<p className="text-slate-700 dark:text-white">
|
||||
Visualisez vos dépenses en temps réel et prenez des décisions
|
||||
éclairées
|
||||
Organisez, planifiez et menez vos réunions avec une efficacité
|
||||
maximale. Agenda intelligent et outils de productivité intégrés.
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
className={twMerge(
|
||||
"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"
|
||||
"hover:bg-blue-100/50 dark:hover:bg-slate-800/70 transition",
|
||||
"border border-blue-200 dark:border-slate-700/50"
|
||||
)}
|
||||
>
|
||||
<div className="w-12 h-12 bg-emerald-500/20 rounded-lg flex items-center justify-center mb-4">
|
||||
<div className="w-12 h-12 bg-blue-500/20 rounded-lg flex items-center justify-center mb-4">
|
||||
<svg
|
||||
className="w-6 h-6 text-emerald-600"
|
||||
className="w-6 h-6 text-blue-600"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
|
|
@ -119,27 +118,28 @@ export const LandingPage = () => {
|
|||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"
|
||||
d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold text-slate-900 dark:text-white mb-2">
|
||||
Rapports personnalisés
|
||||
Conclusion de deals
|
||||
</h3>
|
||||
<p className="text-slate-700 dark:text-white">
|
||||
Générez des rapports détaillés adaptés à vos besoins
|
||||
Accélérez vos ventes avec des outils de suivi avancés, des
|
||||
propositions automatisées et un pipeline optimisé.
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
className={twMerge(
|
||||
"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"
|
||||
"hover:bg-blue-100/50 dark:hover:bg-slate-800/70 transition",
|
||||
"border border-blue-200 dark:border-slate-700/50"
|
||||
)}
|
||||
>
|
||||
<div className="w-12 h-12 bg-emerald-500/20 rounded-lg flex items-center justify-center mb-4">
|
||||
<div className="w-12 h-12 bg-blue-500/20 rounded-lg flex items-center justify-center mb-4">
|
||||
<svg
|
||||
className="w-6 h-6 text-emerald-600"
|
||||
className="w-6 h-6 text-blue-600"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
|
|
@ -148,16 +148,46 @@ export const LandingPage = () => {
|
|||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
|
||||
d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold text-slate-900 dark:text-white mb-2">
|
||||
Optimisation des coûts
|
||||
Chat interactif
|
||||
</h3>
|
||||
<p className="text-slate-700 dark:text-white">
|
||||
Identifiez les opportunités d'optimisation et réduisez vos
|
||||
dépenses
|
||||
Communiquez efficacement avec vos équipes grâce à un système de
|
||||
chat avancé et des discussions contextuelles en temps réel.
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
className={twMerge(
|
||||
"bg-white dark:bg-slate-800/50 backdrop-blur-lg rounded-xl p-6",
|
||||
"hover:bg-blue-100/50 dark:hover:bg-slate-800/70 transition",
|
||||
"border border-blue-200 dark:border-slate-700/50 md:col-start-2"
|
||||
)}
|
||||
>
|
||||
<div className="w-12 h-12 bg-blue-500/20 rounded-lg flex items-center justify-center mb-4">
|
||||
<svg
|
||||
className="w-6 h-6 text-blue-600"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold text-slate-900 dark:text-white mb-2">
|
||||
Planification intelligente
|
||||
</h3>
|
||||
<p className="text-slate-700 dark:text-white">
|
||||
Organisez vos projets, gérez vos ressources et optimisez votre
|
||||
planning avec des outils de planification avancés.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -167,30 +197,57 @@ export const LandingPage = () => {
|
|||
<section className="py-20">
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-4xl font-bold text-slate-900 dark:text-white mb-4">
|
||||
Fait confiance par les entreprises du BTP
|
||||
Ils ont révolutionné leur façon de travailler
|
||||
</h2>
|
||||
<p className="text-xl text-slate-700 dark:text-white max-w-2xl mx-auto">
|
||||
Découvrez ce que nos clients disent de XTablo
|
||||
Découvrez comment nos clients utilisent XTablo pour améliorer leur
|
||||
productivité
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex overflow-x-hidden gap-12 pb-4 -mx-4 px-4 scrollbar-hide">
|
||||
<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"
|
||||
"hover:bg-blue-100/50 dark:hover:bg-slate-800/70 transition",
|
||||
"border border-blue-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
|
||||
de meilleures décisions pour nos projets de construction."
|
||||
"XTablo a transformé notre processus de vente. Nos meetings
|
||||
sont plus efficaces et nous concluons 40% plus de deals
|
||||
qu'avant. L'outil de chat nous permet de rester
|
||||
connectés en permanence."
|
||||
</p>
|
||||
<div className="flex items-center mt-auto">
|
||||
<div className="w-10 h-10 rounded-full bg-emerald-500/20 border border-emerald-500/30" />
|
||||
<div className="w-10 h-10 rounded-full bg-blue-500/20 border border-blue-500/30" />
|
||||
<div className="ml-3">
|
||||
<p className="text-slate-900 dark:text-white font-medium">
|
||||
Michel Dubois
|
||||
Sarah Dubois
|
||||
</p>
|
||||
<p className="text-slate-600 dark:text-white/80 text-sm">
|
||||
Directrice Commerciale
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={twMerge(
|
||||
"flex-none w-[300px] bg-white dark:bg-slate-800/50 backdrop-blur-lg rounded-xl p-6",
|
||||
"hover:bg-blue-100/50 dark:hover:bg-slate-800/70 transition",
|
||||
"border border-blue-200 dark:border-slate-700/50 flex flex-col animate-slide"
|
||||
)}
|
||||
>
|
||||
<p className="text-slate-700 dark:text-white mb-4 flex-grow">
|
||||
"La planification intelligente de XTablo nous a fait gagner
|
||||
3 heures par semaine. Nos équipes sont mieux organisées et les
|
||||
projets avancent plus rapidement."
|
||||
</p>
|
||||
<div className="flex items-center mt-auto">
|
||||
<div className="w-10 h-10 rounded-full bg-blue-500/20 border border-blue-500/30" />
|
||||
<div className="ml-3">
|
||||
<p className="text-slate-900 dark:text-white font-medium">
|
||||
Marc Laurent
|
||||
</p>
|
||||
<p className="text-slate-600 dark:text-white/80 text-sm">
|
||||
Chef de Projet
|
||||
|
|
@ -202,49 +259,23 @@ export const LandingPage = () => {
|
|||
<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"
|
||||
"hover:bg-blue-100/50 dark:hover:bg-slate-800/70 transition",
|
||||
"border border-blue-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
|
||||
coûts de 15% et d'améliorer significativement nos
|
||||
marges."
|
||||
"Enfin un outil qui simplifie vraiment nos meetings ! Plus
|
||||
de temps perdu, des discussions structurées et des décisions
|
||||
rapides. Notre productivité a explosé."
|
||||
</p>
|
||||
<div className="flex items-center mt-auto">
|
||||
<div className="w-10 h-10 rounded-full bg-emerald-500/20 border border-emerald-500/30" />
|
||||
<div className="w-10 h-10 rounded-full bg-blue-500/20 border border-blue-500/30" />
|
||||
<div className="ml-3">
|
||||
<p className="text-slate-900 dark:text-white font-medium">
|
||||
Sophie Martin
|
||||
Julie Martin
|
||||
</p>
|
||||
<p className="text-slate-600 dark:text-white/80 text-sm">
|
||||
Directrice Financière
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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 nos coûts."
|
||||
</p>
|
||||
<div className="flex items-center mt-auto">
|
||||
<div className="w-10 h-10 rounded-full bg-emerald-500/20 border border-emerald-500/30" />
|
||||
<div className="ml-3">
|
||||
<p className="text-slate-900 dark:text-white font-medium">
|
||||
David Laurent
|
||||
</p>
|
||||
<p className="text-slate-600 dark:text-white/80 text-sm">
|
||||
Chef de Chantier
|
||||
Responsable Équipe
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -259,16 +290,16 @@ export const LandingPage = () => {
|
|||
Des tarifs adaptés à vos besoins
|
||||
</h2>
|
||||
<p className="text-xl text-slate-700 dark:text-white max-w-2xl mx-auto">
|
||||
Choisissez le plan qui correspond le mieux à votre entreprise
|
||||
Choisissez le plan qui correspond le mieux à votre équipe
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto">
|
||||
<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",
|
||||
"border border-blue-200 dark:border-white/30 hover:border-blue-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"
|
||||
"hover:shadow-blue-200/20 dark:hover:shadow-blue-900/20 flex flex-col"
|
||||
)}
|
||||
>
|
||||
<h4 className="text-2xl font-bold text-slate-900 dark:text-white mb-4">
|
||||
|
|
@ -276,14 +307,14 @@ export const LandingPage = () => {
|
|||
</h4>
|
||||
<div className="mb-6">
|
||||
<span className="text-4xl font-bold text-slate-900 dark:text-white">
|
||||
12€
|
||||
15€
|
||||
</span>
|
||||
<span className="text-slate-600 dark:text-white/80">/mois</span>
|
||||
</div>
|
||||
<ul className="space-y-4 mb-8 flex-grow">
|
||||
<li className="flex items-center text-slate-700 dark:text-white">
|
||||
<svg
|
||||
className="w-5 h-5 text-emerald-500 mr-2"
|
||||
className="w-5 h-5 text-blue-500 mr-2"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
|
|
@ -295,11 +326,11 @@ export const LandingPage = () => {
|
|||
d="M5 13l4 4L19 7"
|
||||
/>
|
||||
</svg>
|
||||
Jusqu'à 5 chantiers
|
||||
Jusqu'à 10 meetings/mois
|
||||
</li>
|
||||
<li className="flex items-center text-slate-700 dark:text-white">
|
||||
<svg
|
||||
className="w-5 h-5 text-emerald-500 mr-2"
|
||||
className="w-5 h-5 text-blue-500 mr-2"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
|
|
@ -311,11 +342,11 @@ export const LandingPage = () => {
|
|||
d="M5 13l4 4L19 7"
|
||||
/>
|
||||
</svg>
|
||||
Suivi des dépenses en temps réel
|
||||
Chat d'équipe basique
|
||||
</li>
|
||||
<li className="flex items-center text-slate-700 dark:text-white">
|
||||
<svg
|
||||
className="w-5 h-5 text-emerald-500 mr-2"
|
||||
className="w-5 h-5 text-blue-500 mr-2"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
|
|
@ -327,11 +358,11 @@ export const LandingPage = () => {
|
|||
d="M5 13l4 4L19 7"
|
||||
/>
|
||||
</svg>
|
||||
Rapports mensuels
|
||||
Planification simple
|
||||
</li>
|
||||
<li className="flex items-center text-slate-700 dark:text-white">
|
||||
<svg
|
||||
className="w-5 h-5 text-emerald-500 mr-2"
|
||||
className="w-5 h-5 text-blue-500 mr-2"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
|
|
@ -348,9 +379,9 @@ export const LandingPage = () => {
|
|||
</ul>
|
||||
<Button
|
||||
className={twMerge(
|
||||
"w-full px-6 py-3 bg-emerald-700 rounded-full text-white font-semibold",
|
||||
"hover:bg-emerald-600 transition-all duration-300 hover:scale-[1.02]",
|
||||
"hover:shadow-xl shadow-emerald-700/20 mt-auto"
|
||||
"w-full px-6 py-3 bg-blue-700 rounded-full text-white font-semibold",
|
||||
"hover:bg-blue-600 transition-all duration-300 hover:scale-[1.02]",
|
||||
"hover:shadow-xl shadow-blue-700/20 mt-auto"
|
||||
)}
|
||||
>
|
||||
Commencer
|
||||
|
|
@ -360,13 +391,13 @@ export const LandingPage = () => {
|
|||
<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",
|
||||
"border border-blue-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"
|
||||
"hover:shadow-blue-200/20 dark:hover:shadow-blue-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-emerald-700 text-white px-4 py-1 rounded-full text-sm font-semibold">
|
||||
<span className="bg-blue-700 text-white px-4 py-1 rounded-full text-sm font-semibold">
|
||||
Plus populaire
|
||||
</span>
|
||||
</div>
|
||||
|
|
@ -375,14 +406,14 @@ export const LandingPage = () => {
|
|||
</h4>
|
||||
<div className="mb-6">
|
||||
<span className="text-4xl font-bold text-slate-900 dark:text-white">
|
||||
25€
|
||||
35€
|
||||
</span>
|
||||
<span className="text-slate-600 dark:text-white/80">/mois</span>
|
||||
</div>
|
||||
<ul className="space-y-4 mb-8 flex-grow">
|
||||
<li className="flex items-center text-slate-700 dark:text-white">
|
||||
<svg
|
||||
className="w-5 h-5 text-emerald-500 mr-2"
|
||||
className="w-5 h-5 text-blue-500 mr-2"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
|
|
@ -394,11 +425,11 @@ export const LandingPage = () => {
|
|||
d="M5 13l4 4L19 7"
|
||||
/>
|
||||
</svg>
|
||||
Chantiers illimités
|
||||
Meetings illimités
|
||||
</li>
|
||||
<li className="flex items-center text-slate-700 dark:text-white">
|
||||
<svg
|
||||
className="w-5 h-5 text-emerald-500 mr-2"
|
||||
className="w-5 h-5 text-blue-500 mr-2"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
|
|
@ -410,11 +441,11 @@ export const LandingPage = () => {
|
|||
d="M5 13l4 4L19 7"
|
||||
/>
|
||||
</svg>
|
||||
Suivi des dépenses en temps réel
|
||||
Chat avancé + discussions
|
||||
</li>
|
||||
<li className="flex items-center text-slate-700 dark:text-white">
|
||||
<svg
|
||||
className="w-5 h-5 text-emerald-500 mr-2"
|
||||
className="w-5 h-5 text-blue-500 mr-2"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
|
|
@ -426,11 +457,11 @@ export const LandingPage = () => {
|
|||
d="M5 13l4 4L19 7"
|
||||
/>
|
||||
</svg>
|
||||
Rapports personnalisés
|
||||
Planification intelligente
|
||||
</li>
|
||||
<li className="flex items-center text-slate-700 dark:text-white">
|
||||
<svg
|
||||
className="w-5 h-5 text-emerald-500 mr-2"
|
||||
className="w-5 h-5 text-blue-500 mr-2"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
|
|
@ -442,11 +473,11 @@ export const LandingPage = () => {
|
|||
d="M5 13l4 4L19 7"
|
||||
/>
|
||||
</svg>
|
||||
Support prioritaire
|
||||
Pipeline de vente avancé
|
||||
</li>
|
||||
<li className="flex items-center text-slate-700 dark:text-white">
|
||||
<svg
|
||||
className="w-5 h-5 text-emerald-500 mr-2"
|
||||
className="w-5 h-5 text-blue-500 mr-2"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
|
|
@ -458,14 +489,14 @@ export const LandingPage = () => {
|
|||
d="M5 13l4 4L19 7"
|
||||
/>
|
||||
</svg>
|
||||
API disponible
|
||||
Support prioritaire + API
|
||||
</li>
|
||||
</ul>
|
||||
<Button
|
||||
className={twMerge(
|
||||
"w-full px-6 py-3 bg-emerald-700 rounded-full text-white font-semibold",
|
||||
"hover:bg-emerald-600 transition-all duration-300 hover:scale-[1.02]",
|
||||
"hover:shadow-xl shadow-emerald-700/20 mt-auto"
|
||||
"w-full px-6 py-3 bg-blue-700 rounded-full text-white font-semibold",
|
||||
"hover:bg-blue-600 transition-all duration-300 hover:scale-[1.02]",
|
||||
"hover:shadow-xl shadow-blue-700/20 mt-auto"
|
||||
)}
|
||||
>
|
||||
Commencer
|
||||
|
|
@ -479,34 +510,35 @@ export const LandingPage = () => {
|
|||
<div
|
||||
className={twMerge(
|
||||
"bg-white dark:bg-slate-800/50 backdrop-blur-lg rounded-2xl p-12",
|
||||
"border border-emerald-200 dark:border-slate-700/50",
|
||||
"border border-blue-200 dark:border-slate-700/50",
|
||||
"shadow-xl"
|
||||
)}
|
||||
>
|
||||
<h2 className="text-4xl font-bold text-slate-900 dark:text-white mb-6">
|
||||
Prêt à optimiser vos dépenses de projet ?
|
||||
Prêt à révolutionner votre productivité ?
|
||||
</h2>
|
||||
<p className="text-xl text-slate-700 dark:text-white mb-12 max-w-2xl mx-auto">
|
||||
Commencez votre essai gratuit de 14 jours aujourd'hui. Aucune
|
||||
carte bancaire requise.
|
||||
Rejoignez des milliers d'équipes qui utilisent XTablo pour
|
||||
simplifier leurs meetings, accélérer leurs ventes et améliorer
|
||||
leur collaboration.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row justify-center gap-6">
|
||||
<Button
|
||||
className={twMerge(
|
||||
"px-8 py-4 bg-emerald-700 rounded-full text-white font-semibold text-lg",
|
||||
"hover:bg-emerald-600 transition shadow-lg hover:shadow-xl shadow-emerald-700/20"
|
||||
"px-8 py-4 bg-blue-700 rounded-full text-white font-semibold text-lg",
|
||||
"hover:bg-blue-600 transition shadow-lg hover:shadow-xl shadow-blue-700/20"
|
||||
)}
|
||||
>
|
||||
Essai gratuit
|
||||
Essai gratuit 14 jours
|
||||
</Button>
|
||||
<Button
|
||||
className={twMerge(
|
||||
"px-8 py-4 border-2 border-emerald-700/30 rounded-full text-lg",
|
||||
"text-slate-900 dark:text-white font-semibold hover:border-emerald-700",
|
||||
"px-8 py-4 border-2 border-blue-700/30 rounded-full text-lg",
|
||||
"text-slate-900 dark:text-white font-semibold hover:border-blue-700",
|
||||
"transition"
|
||||
)}
|
||||
>
|
||||
Contacter les ventes
|
||||
Demander une démo
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -529,7 +561,7 @@ export const LandingPage = () => {
|
|||
</h3>
|
||||
</div>
|
||||
<p className="text-slate-600 dark:text-slate-400">
|
||||
Optimisez vos dépenses de chantier avec XTablo
|
||||
Révolutionnez votre productivité avec XTablo
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
|
|
@ -540,7 +572,7 @@ export const LandingPage = () => {
|
|||
<li>
|
||||
<a
|
||||
href="#features"
|
||||
className="text-slate-600 dark:text-slate-400 hover:text-emerald-600 dark:hover:text-emerald-400"
|
||||
className="text-slate-600 dark:text-slate-400 hover:text-blue-600 dark:hover:text-blue-400"
|
||||
>
|
||||
Fonctionnalités
|
||||
</a>
|
||||
|
|
@ -548,11 +580,19 @@ export const LandingPage = () => {
|
|||
<li>
|
||||
<a
|
||||
href="#pricing"
|
||||
className="text-slate-600 dark:text-slate-400 hover:text-emerald-600 dark:hover:text-emerald-400"
|
||||
className="text-slate-600 dark:text-slate-400 hover:text-blue-600 dark:hover:text-blue-400"
|
||||
>
|
||||
Tarifs
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
className="text-slate-600 dark:text-slate-400 hover:text-blue-600 dark:hover:text-blue-400"
|
||||
>
|
||||
Intégrations
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
|
|
@ -563,7 +603,7 @@ export const LandingPage = () => {
|
|||
<li>
|
||||
<a
|
||||
href="#"
|
||||
className="text-slate-600 dark:text-slate-400 hover:text-emerald-600 dark:hover:text-emerald-400"
|
||||
className="text-slate-600 dark:text-slate-400 hover:text-blue-600 dark:hover:text-blue-400"
|
||||
>
|
||||
À propos
|
||||
</a>
|
||||
|
|
@ -571,7 +611,7 @@ export const LandingPage = () => {
|
|||
<li>
|
||||
<a
|
||||
href="#"
|
||||
className="text-slate-600 dark:text-slate-400 hover:text-emerald-600 dark:hover:text-emerald-400"
|
||||
className="text-slate-600 dark:text-slate-400 hover:text-blue-600 dark:hover:text-blue-400"
|
||||
>
|
||||
Blog
|
||||
</a>
|
||||
|
|
@ -579,7 +619,7 @@ export const LandingPage = () => {
|
|||
<li>
|
||||
<a
|
||||
href="#"
|
||||
className="text-slate-600 dark:text-slate-400 hover:text-emerald-600 dark:hover:text-emerald-400"
|
||||
className="text-slate-600 dark:text-slate-400 hover:text-blue-600 dark:hover:text-blue-400"
|
||||
>
|
||||
Carrières
|
||||
</a>
|
||||
|
|
@ -594,7 +634,7 @@ export const LandingPage = () => {
|
|||
<li>
|
||||
<a
|
||||
href="#"
|
||||
className="text-slate-600 dark:text-slate-400 hover:text-emerald-600 dark:hover:text-emerald-400"
|
||||
className="text-slate-600 dark:text-slate-400 hover:text-blue-600 dark:hover:text-blue-400"
|
||||
>
|
||||
Confidentialité
|
||||
</a>
|
||||
|
|
@ -602,7 +642,7 @@ export const LandingPage = () => {
|
|||
<li>
|
||||
<a
|
||||
href="#"
|
||||
className="text-slate-600 dark:text-slate-400 hover:text-emerald-600 dark:hover:text-emerald-400"
|
||||
className="text-slate-600 dark:text-slate-400 hover:text-blue-600 dark:hover:text-blue-400"
|
||||
>
|
||||
Conditions
|
||||
</a>
|
||||
|
|
@ -610,7 +650,7 @@ export const LandingPage = () => {
|
|||
<li>
|
||||
<a
|
||||
href="#"
|
||||
className="text-slate-600 dark:text-slate-400 hover:text-emerald-600 dark:hover:text-emerald-400"
|
||||
className="text-slate-600 dark:text-slate-400 hover:text-blue-600 dark:hover:text-blue-400"
|
||||
>
|
||||
Cookies
|
||||
</a>
|
||||
|
|
@ -629,6 +669,6 @@ export const LandingPage = () => {
|
|||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -271,11 +271,19 @@ export const TabloPage = () => {
|
|||
if (updatedFolder.tablos.length === 0) {
|
||||
setFolders(folders.filter((f) => f.id !== folderId));
|
||||
setTablos([...tablos, tabloToRemove]);
|
||||
// Close modal if this folder was open
|
||||
if (openFolderId === folderId) {
|
||||
setOpenFolderId(null);
|
||||
}
|
||||
}
|
||||
// If folder has only one item left, dissolve it
|
||||
else if (updatedFolder.tablos.length === 1) {
|
||||
setFolders(folders.filter((f) => f.id !== folderId));
|
||||
setTablos([...tablos, tabloToRemove, ...updatedFolder.tablos]);
|
||||
// Close modal if this folder was open (folder is being dissolved)
|
||||
if (openFolderId === folderId) {
|
||||
setOpenFolderId(null);
|
||||
}
|
||||
}
|
||||
// Otherwise, keep the folder and just remove the tablo
|
||||
else {
|
||||
|
|
@ -345,10 +353,10 @@ export const TabloPage = () => {
|
|||
|
||||
{/* Folder creation overlay */}
|
||||
{canCreateFolder && (
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-blue-500/20 to-purple-500/20 rounded-lg flex items-center justify-center z-10 animate-bounce">
|
||||
<div className="bg-white/90 dark:bg-gray-800/90 rounded-full p-2 shadow-lg">
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-blue-500/20 to-purple-500/20 rounded-2xl flex items-center justify-center z-10 animate-bounce">
|
||||
<div className="bg-white/90 dark:bg-gray-800/90 rounded-full p-3 shadow-xl">
|
||||
<svg
|
||||
className="w-6 h-6 text-blue-600"
|
||||
className="w-8 h-8 text-blue-600"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
|
|
@ -367,8 +375,8 @@ export const TabloPage = () => {
|
|||
<div
|
||||
className={`${
|
||||
tablo.color
|
||||
} rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 cursor-pointer ${
|
||||
inFolder ? "aspect-square" : "aspect-square"
|
||||
} rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 cursor-pointer ${
|
||||
inFolder ? "aspect-square w-36 h-36" : "aspect-square w-40 h-40"
|
||||
} flex items-center justify-center ${
|
||||
draggedItem?.type === "tablo" && draggedItem?.id === tablo.id
|
||||
? "opacity-50 scale-95"
|
||||
|
|
@ -376,8 +384,14 @@ export const TabloPage = () => {
|
|||
} ${canCreateFolder ? "scale-105 shadow-2xl" : ""}`}
|
||||
onClick={() => console.log(`Open tablo: ${tablo.name}`)}
|
||||
>
|
||||
<div className="text-center p-6">
|
||||
<h3 className="text-white text-xl font-semibold">{tablo.name}</h3>
|
||||
<div className={`text-center ${inFolder ? "p-5" : "p-6"}`}>
|
||||
<h3
|
||||
className={`text-white font-semibold ${
|
||||
inFolder ? "text-lg" : "text-xl"
|
||||
}`}
|
||||
>
|
||||
{tablo.name}
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue