Adjust logins
This commit is contained in:
Arthur Belleville
parent
0bb4963897
commit
c480b1396d
70 changed files with 771 additions and 443 deletions
|
|
@ -4,7 +4,7 @@
|
|||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/jpg+xml" href="/public/icon.jpg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" href="/src/ui-components/theme/index.css" />
|
||||
<link rel="stylesheet" href="/src/ui-library/theme/index.css" />
|
||||
<title>XTablo</title>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
944
ui/src/App.tsx
944
ui/src/App.tsx
|
|
@ -1,10 +1,11 @@
|
|||
import { Button } from "./ui-components/button";
|
||||
import { Button } from "./ui-library/button";
|
||||
import { useState, useEffect } from "react";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
import { Header } from "./ui-components/header";
|
||||
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
|
||||
import { Header } from "./ui-library/header";
|
||||
import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
|
||||
import { LoginPage } from "./pages/login";
|
||||
import { SignUpPage } from "./pages/signup";
|
||||
import logo from "./assets/icon.jpg";
|
||||
|
||||
type Theme = "dark" | "light" | "system";
|
||||
|
||||
|
|
@ -40,386 +41,637 @@ export const App = () => {
|
|||
element={
|
||||
<>
|
||||
<Header theme={theme} onThemeChange={setTheme} />
|
||||
<div className="container mx-auto px-4 py-16">
|
||||
<main className="text-center">
|
||||
<h2 className="text-5xl font-bold text-slate-900 dark:text-white mb-6">
|
||||
<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>
|
||||
<h1 className="text-6xl font-bold text-slate-900 dark:text-white mb-6 relative">
|
||||
Maîtrisez vos dépenses de chantier
|
||||
</h2>
|
||||
<p className="text-xl text-slate-700 dark:text-white mb-12 max-w-2xl mx-auto">
|
||||
</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. Mise en place en moins de 48h.
|
||||
décisions financières.
|
||||
</p>
|
||||
|
||||
<Button
|
||||
<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",
|
||||
"text-lg"
|
||||
)}
|
||||
>
|
||||
Démarrer gratuitement
|
||||
<svg
|
||||
className="w-5 h-5"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
d="M13 7l5 5m0 0l-5 5m5-5H6"
|
||||
/>
|
||||
</svg>
|
||||
</Button>
|
||||
</div>
|
||||
<div
|
||||
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"
|
||||
"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",
|
||||
"relative"
|
||||
)}
|
||||
>
|
||||
Démarrer gratuitement
|
||||
</Button>
|
||||
<div className="aspect-video rounded-lg bg-emerald-100 dark:bg-slate-700/50 animate-pulse" />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div className="mt-20">
|
||||
{/* Features Section */}
|
||||
<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
|
||||
</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
|
||||
</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"
|
||||
)}
|
||||
>
|
||||
<div className="w-12 h-12 bg-emerald-500/20 rounded-lg flex items-center justify-center mb-4">
|
||||
<svg
|
||||
className="w-6 h-6 text-emerald-600"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
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"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold text-slate-900 dark:text-white mb-2">
|
||||
Suivi en temps réel
|
||||
</h3>
|
||||
<p className="text-slate-700 dark:text-white">
|
||||
Visualisez vos dépenses en temps réel et prenez des
|
||||
décisions éclairées
|
||||
</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"
|
||||
)}
|
||||
>
|
||||
<div className="w-12 h-12 bg-emerald-500/20 rounded-lg flex items-center justify-center mb-4">
|
||||
<svg
|
||||
className="w-6 h-6 text-emerald-600"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
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"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold text-slate-900 dark:text-white mb-2">
|
||||
Rapports personnalisés
|
||||
</h3>
|
||||
<p className="text-slate-700 dark:text-white">
|
||||
Générez des rapports détaillés adaptés à vos besoins
|
||||
</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"
|
||||
)}
|
||||
>
|
||||
<div className="w-12 h-12 bg-emerald-500/20 rounded-lg flex items-center justify-center mb-4">
|
||||
<svg
|
||||
className="w-6 h-6 text-emerald-600"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
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"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold text-slate-900 dark:text-white mb-2">
|
||||
Optimisation des coûts
|
||||
</h3>
|
||||
<p className="text-slate-700 dark:text-white">
|
||||
Identifiez les opportunités d'optimisation et réduisez
|
||||
vos dépenses
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Testimonials Section */}
|
||||
<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
|
||||
</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
|
||||
</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"
|
||||
)}
|
||||
>
|
||||
<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."
|
||||
</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">
|
||||
Michel Dubois
|
||||
</p>
|
||||
<p className="text-slate-600 dark:text-white/80 text-sm">
|
||||
Chef de Projet
|
||||
</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">
|
||||
"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."
|
||||
</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">
|
||||
Sophie 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
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Pricing Section */}
|
||||
<section id="pricing" className="py-20">
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-4xl font-bold text-slate-900 dark:text-white mb-4">
|
||||
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
|
||||
</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",
|
||||
"shadow-xl border border-emerald-200 dark:border-slate-700/50"
|
||||
"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="aspect-video rounded-lg bg-emerald-100 dark:bg-slate-700/50 animate-pulse" />
|
||||
<h4 className="text-2xl font-bold text-slate-900 dark:text-white mb-4">
|
||||
Starter
|
||||
</h4>
|
||||
<div className="mb-6">
|
||||
<span className="text-4xl font-bold text-slate-900 dark:text-white">
|
||||
12€
|
||||
</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"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
d="M5 13l4 4L19 7"
|
||||
/>
|
||||
</svg>
|
||||
Jusqu'à 5 chantiers
|
||||
</li>
|
||||
<li className="flex items-center text-slate-700 dark:text-white">
|
||||
<svg
|
||||
className="w-5 h-5 text-emerald-500 mr-2"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
d="M5 13l4 4L19 7"
|
||||
/>
|
||||
</svg>
|
||||
Suivi des dépenses en temps réel
|
||||
</li>
|
||||
<li className="flex items-center text-slate-700 dark:text-white">
|
||||
<svg
|
||||
className="w-5 h-5 text-emerald-500 mr-2"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
d="M5 13l4 4L19 7"
|
||||
/>
|
||||
</svg>
|
||||
Rapports mensuels
|
||||
</li>
|
||||
<li className="flex items-center text-slate-700 dark:text-white">
|
||||
<svg
|
||||
className="w-5 h-5 text-emerald-500 mr-2"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
d="M5 13l4 4L19 7"
|
||||
/>
|
||||
</svg>
|
||||
Support par email
|
||||
</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-lg hover:shadow-xl shadow-emerald-700/20 mt-auto"
|
||||
)}
|
||||
>
|
||||
Commencer
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<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-emerald-700 text-white px-4 py-1 rounded-full text-sm font-semibold">
|
||||
Plus populaire
|
||||
</span>
|
||||
</div>
|
||||
<h4 className="text-2xl font-bold text-slate-900 dark:text-white mb-4">
|
||||
Pro
|
||||
</h4>
|
||||
<div className="mb-6">
|
||||
<span className="text-4xl font-bold text-slate-900 dark:text-white">
|
||||
25€
|
||||
</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"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
d="M5 13l4 4L19 7"
|
||||
/>
|
||||
</svg>
|
||||
Chantiers 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"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
d="M5 13l4 4L19 7"
|
||||
/>
|
||||
</svg>
|
||||
Suivi des dépenses en temps réel
|
||||
</li>
|
||||
<li className="flex items-center text-slate-700 dark:text-white">
|
||||
<svg
|
||||
className="w-5 h-5 text-emerald-500 mr-2"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
d="M5 13l4 4L19 7"
|
||||
/>
|
||||
</svg>
|
||||
Rapports personnalisés
|
||||
</li>
|
||||
<li className="flex items-center text-slate-700 dark:text-white">
|
||||
<svg
|
||||
className="w-5 h-5 text-emerald-500 mr-2"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
d="M5 13l4 4L19 7"
|
||||
/>
|
||||
</svg>
|
||||
Support prioritaire
|
||||
</li>
|
||||
<li className="flex items-center text-slate-700 dark:text-white">
|
||||
<svg
|
||||
className="w-5 h-5 text-emerald-500 mr-2"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
d="M5 13l4 4L19 7"
|
||||
/>
|
||||
</svg>
|
||||
API disponible
|
||||
</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-lg hover:shadow-xl shadow-emerald-700/20 mt-auto"
|
||||
)}
|
||||
>
|
||||
Commencer
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<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={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 de meilleures décisions pour nos
|
||||
projets de construction."
|
||||
</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">
|
||||
Michel Dubois
|
||||
</p>
|
||||
<p className="text-slate-600 dark:text-white/80 text-sm">
|
||||
Chef de Projet
|
||||
</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">
|
||||
"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."
|
||||
</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">
|
||||
Sophie 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
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<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={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>
|
||||
<div className="mb-6">
|
||||
<span className="text-4xl font-bold text-slate-900 dark:text-white">
|
||||
12€
|
||||
</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-slate-700 dark:text-white mr-2"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
d="M5 13l4 4L19 7"
|
||||
/>
|
||||
</svg>
|
||||
Jusqu'à 5 chantiers
|
||||
</li>
|
||||
<li className="flex items-center text-slate-700 dark:text-white">
|
||||
<svg
|
||||
className="w-5 h-5 text-slate-700 dark:text-white mr-2"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
d="M5 13l4 4L19 7"
|
||||
/>
|
||||
</svg>
|
||||
Suivi des dépenses en temps réel
|
||||
</li>
|
||||
<li className="flex items-center text-slate-700 dark:text-white">
|
||||
<svg
|
||||
className="w-5 h-5 text-slate-700 dark:text-white mr-2"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
d="M5 13l4 4L19 7"
|
||||
/>
|
||||
</svg>
|
||||
Rapports mensuels
|
||||
</li>
|
||||
<li className="flex items-center text-slate-700 dark:text-white">
|
||||
<svg
|
||||
className="w-5 h-5 text-slate-700 dark:text-white mr-2"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
d="M5 13l4 4L19 7"
|
||||
/>
|
||||
</svg>
|
||||
Support par email
|
||||
</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-lg hover:shadow-xl shadow-emerald-700/20 mt-auto"
|
||||
)}
|
||||
>
|
||||
Commencer
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<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-emerald-700 text-white px-4 py-1 rounded-full text-sm font-semibold">
|
||||
Plus populaire
|
||||
</span>
|
||||
</div>
|
||||
<h4 className="text-2xl font-bold text-slate-900 dark:text-white mb-4">
|
||||
Pro
|
||||
</h4>
|
||||
<div className="mb-6">
|
||||
<span className="text-4xl font-bold text-slate-900 dark:text-white">
|
||||
25€
|
||||
</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-slate-700 dark:text-white mr-2"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
d="M5 13l4 4L19 7"
|
||||
/>
|
||||
</svg>
|
||||
Chantiers illimités
|
||||
</li>
|
||||
<li className="flex items-center text-slate-700 dark:text-white">
|
||||
<svg
|
||||
className="w-5 h-5 text-slate-700 dark:text-white mr-2"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
d="M5 13l4 4L19 7"
|
||||
/>
|
||||
</svg>
|
||||
Suivi des dépenses en temps réel
|
||||
</li>
|
||||
<li className="flex items-center text-slate-700 dark:text-white">
|
||||
<svg
|
||||
className="w-5 h-5 text-slate-700 dark:text-white mr-2"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
d="M5 13l4 4L19 7"
|
||||
/>
|
||||
</svg>
|
||||
Rapports personnalisés
|
||||
</li>
|
||||
<li className="flex items-center text-slate-700 dark:text-white">
|
||||
<svg
|
||||
className="w-5 h-5 text-slate-700 dark:text-white mr-2"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
d="M5 13l4 4L19 7"
|
||||
/>
|
||||
</svg>
|
||||
Support prioritaire
|
||||
</li>
|
||||
<li className="flex items-center text-slate-700 dark:text-white">
|
||||
<svg
|
||||
className="w-5 h-5 text-slate-700 dark:text-white mr-2"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
d="M5 13l4 4L19 7"
|
||||
/>
|
||||
</svg>
|
||||
API disponible
|
||||
</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-lg hover:shadow-xl shadow-emerald-700/20 mt-auto"
|
||||
)}
|
||||
>
|
||||
Commencer
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="contact" className="mt-24 text-center">
|
||||
<h3 className="text-3xl font-bold text-slate-900 dark:text-white mb-6">
|
||||
{/* CTA Section */}
|
||||
<section id="contact" className="py-20 text-center">
|
||||
<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",
|
||||
"shadow-xl"
|
||||
)}
|
||||
>
|
||||
<h2 className="text-4xl font-bold text-slate-900 dark:text-white mb-6">
|
||||
Prêt à optimiser vos dépenses de projet ?
|
||||
</h3>
|
||||
</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.
|
||||
</p>
|
||||
<div className="flex justify-center gap-6">
|
||||
<button
|
||||
<div className="flex flex-col sm:flex-row justify-center gap-6">
|
||||
<Button
|
||||
className={twMerge(
|
||||
"px-8 py-3 bg-emerald-700 rounded-full text-white font-semibold",
|
||||
"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"
|
||||
)}
|
||||
>
|
||||
Essai gratuit
|
||||
</button>
|
||||
<button
|
||||
</Button>
|
||||
<Button
|
||||
className={twMerge(
|
||||
"px-8 py-3 border border-emerald-400/30 rounded-full",
|
||||
"text-slate-900 dark:text-white font-semibold hover:bg-emerald-700/30 transition"
|
||||
"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",
|
||||
"transition"
|
||||
)}
|
||||
>
|
||||
Contacter les ventes
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<footer
|
||||
className={twMerge(
|
||||
"mt-24 py-8 border-t border-slate-200 dark:border-slate-800"
|
||||
"py-12 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.
|
||||
</p>
|
||||
<p className="text-slate-500 dark:text-slate-500 text-xs mt-2">
|
||||
XTablo est une marque déposée. Les logos et noms de
|
||||
marques sont des marques déposées de leurs propriétaires
|
||||
respectifs.
|
||||
</p>
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="grid md:grid-cols-4 gap-8">
|
||||
<div>
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<img
|
||||
src={logo}
|
||||
alt="Logo XTablo"
|
||||
className="w-8 h-8"
|
||||
/>
|
||||
<h3 className="text-xl font-bold text-slate-900 dark:text-white">
|
||||
XTablo
|
||||
</h3>
|
||||
</div>
|
||||
<p className="text-slate-600 dark:text-slate-400">
|
||||
Optimisez vos dépenses de chantier avec XTablo
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-lg font-semibold text-slate-900 dark:text-white mb-4">
|
||||
Produit
|
||||
</h4>
|
||||
<ul className="space-y-2">
|
||||
<li>
|
||||
<a
|
||||
href="#features"
|
||||
className="text-slate-600 dark:text-slate-400 hover:text-emerald-600 dark:hover:text-emerald-400"
|
||||
>
|
||||
Fonctionnalités
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#pricing"
|
||||
className="text-slate-600 dark:text-slate-400 hover:text-emerald-600 dark:hover:text-emerald-400"
|
||||
>
|
||||
Tarifs
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-lg font-semibold text-slate-900 dark:text-white mb-4">
|
||||
Entreprise
|
||||
</h4>
|
||||
<ul className="space-y-2">
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
className="text-slate-600 dark:text-slate-400 hover:text-emerald-600 dark:hover:text-emerald-400"
|
||||
>
|
||||
À propos
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
className="text-slate-600 dark:text-slate-400 hover:text-emerald-600 dark:hover:text-emerald-400"
|
||||
>
|
||||
Blog
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
className="text-slate-600 dark:text-slate-400 hover:text-emerald-600 dark:hover:text-emerald-400"
|
||||
>
|
||||
Carrières
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-lg font-semibold text-slate-900 dark:text-white mb-4">
|
||||
Légal
|
||||
</h4>
|
||||
<ul className="space-y-2">
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
className="text-slate-600 dark:text-slate-400 hover:text-emerald-600 dark:hover:text-emerald-400"
|
||||
>
|
||||
Confidentialité
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
className="text-slate-600 dark:text-slate-400 hover:text-emerald-600 dark:hover:text-emerald-400"
|
||||
>
|
||||
Conditions
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
className="text-slate-600 dark:text-slate-400 hover:text-emerald-600 dark:hover:text-emerald-400"
|
||||
>
|
||||
Cookies
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-12 pt-8 border-t border-slate-200 dark:border-slate-800 text-center">
|
||||
<p className="text-slate-600 dark:text-slate-400 text-sm">
|
||||
© {new Date().getFullYear()} XTablo. Tous droits
|
||||
réservés.
|
||||
</p>
|
||||
<p className="text-slate-500 dark:text-slate-500 text-xs mt-2">
|
||||
XTablo est une marque déposée. Les logos et noms de
|
||||
marques sont des marques déposées de leurs propriétaires
|
||||
respectifs.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</>
|
||||
|
|
|
|||
BIN
ui/src/assets/google.png
Normal file
BIN
ui/src/assets/google.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
42
ui/src/components/BrandButtons/LoginWIthGoogle.tsx
Normal file
42
ui/src/components/BrandButtons/LoginWIthGoogle.tsx
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
import "./login-with-google.css";
|
||||
|
||||
export function LoginWithGoogle() {
|
||||
return (
|
||||
<button className="gsi-material-button">
|
||||
<div className="gsi-material-button-state"></div>
|
||||
<div className="gsi-material-button-content-wrapper">
|
||||
<div className="gsi-material-button-icon">
|
||||
<svg
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 48 48"
|
||||
xmlnsXlink="http://www.w3.org/1999/xlink"
|
||||
style={{ display: "block" }}
|
||||
>
|
||||
<path
|
||||
fill="#EA4335"
|
||||
d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"
|
||||
></path>
|
||||
<path
|
||||
fill="#4285F4"
|
||||
d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"
|
||||
></path>
|
||||
<path
|
||||
fill="#FBBC05"
|
||||
d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"
|
||||
></path>
|
||||
<path
|
||||
fill="#34A853"
|
||||
d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"
|
||||
></path>
|
||||
<path fill="none" d="M0 0h48v48H0z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<span className="gsi-material-button-contents">
|
||||
Continuer avec Google
|
||||
</span>
|
||||
<span style={{ display: "none" }}>Sign in with Google</span>
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
106
ui/src/components/BrandButtons/login-with-google.css
Normal file
106
ui/src/components/BrandButtons/login-with-google.css
Normal file
|
|
@ -0,0 +1,106 @@
|
|||
.gsi-material-button {
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
-webkit-appearance: none;
|
||||
background-color: WHITE;
|
||||
background-image: none;
|
||||
border: 1px solid #747775;
|
||||
-webkit-border-radius: 20px;
|
||||
border-radius: 20px;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
color: #1f1f1f;
|
||||
cursor: pointer;
|
||||
font-family: "Roboto", arial, sans-serif;
|
||||
font-size: 14px;
|
||||
height: 40px;
|
||||
letter-spacing: 0.25px;
|
||||
outline: none;
|
||||
overflow: hidden;
|
||||
padding: 0 12px;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
-webkit-transition: background-color 0.218s, border-color 0.218s,
|
||||
box-shadow 0.218s;
|
||||
transition: background-color 0.218s, border-color 0.218s, box-shadow 0.218s;
|
||||
vertical-align: middle;
|
||||
white-space: nowrap;
|
||||
width: auto;
|
||||
max-width: 400px;
|
||||
min-width: min-content;
|
||||
}
|
||||
|
||||
.gsi-material-button .gsi-material-button-icon {
|
||||
height: 20px;
|
||||
margin-right: 12px;
|
||||
min-width: 20px;
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
.gsi-material-button .gsi-material-button-content-wrapper {
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
-webkit-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-webkit-flex-wrap: nowrap;
|
||||
flex-wrap: nowrap;
|
||||
height: 100%;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.gsi-material-button .gsi-material-button-contents {
|
||||
-webkit-flex-grow: 1;
|
||||
flex-grow: 1;
|
||||
font-family: "Roboto", arial, sans-serif;
|
||||
font-weight: 500;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.gsi-material-button .gsi-material-button-state {
|
||||
-webkit-transition: opacity 0.218s;
|
||||
transition: opacity 0.218s;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.gsi-material-button:disabled {
|
||||
cursor: default;
|
||||
background-color: #ffffff61;
|
||||
border-color: #1f1f1f1f;
|
||||
}
|
||||
|
||||
.gsi-material-button:disabled .gsi-material-button-contents {
|
||||
opacity: 38%;
|
||||
}
|
||||
|
||||
.gsi-material-button:disabled .gsi-material-button-icon {
|
||||
opacity: 38%;
|
||||
}
|
||||
|
||||
.gsi-material-button:not(:disabled):active .gsi-material-button-state,
|
||||
.gsi-material-button:not(:disabled):focus .gsi-material-button-state {
|
||||
background-color: #303030;
|
||||
opacity: 12%;
|
||||
}
|
||||
|
||||
.gsi-material-button:not(:disabled):hover {
|
||||
-webkit-box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3),
|
||||
0 1px 3px 1px rgba(60, 64, 67, 0.15);
|
||||
box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3),
|
||||
0 1px 3px 1px rgba(60, 64, 67, 0.15);
|
||||
}
|
||||
|
||||
.gsi-material-button:not(:disabled):hover .gsi-material-button-state {
|
||||
background-color: #303030;
|
||||
opacity: 8%;
|
||||
}
|
||||
|
|
@ -1,66 +1,30 @@
|
|||
import { Button } from "../ui-components/button";
|
||||
import { Button } from "../ui-library/button";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { LoginWithGoogle } from "../components/BrandButtons/LoginWIthGoogle";
|
||||
|
||||
export function LoginPage() {
|
||||
const navigate = useNavigate();
|
||||
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center 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="min-h-screen flex items-center justify-center 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"
|
||||
onClick={() => navigate("/")}
|
||||
>
|
||||
<div
|
||||
className={twMerge(
|
||||
"w-full max-w-md p-8 bg-white dark:bg-slate-800/50 backdrop-blur-lg rounded-2xl",
|
||||
"border border-emerald-200 dark:border-emerald-900/30",
|
||||
"shadow-xl"
|
||||
)}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<h1 className="text-3xl font-bold text-slate-900 dark:text-white mb-8 text-center">
|
||||
Connexion
|
||||
</h1>
|
||||
|
||||
<div className="space-y-4">
|
||||
<Button
|
||||
className={twMerge(
|
||||
"w-full bg-white dark:bg-slate-800 text-slate-900 dark:text-white",
|
||||
"border border-slate-200 dark:border-slate-700",
|
||||
"hover:bg-slate-50 dark:hover:bg-slate-700/50",
|
||||
"flex items-center justify-center gap-2"
|
||||
)}
|
||||
>
|
||||
<svg className="w-5 h-5" viewBox="0 0 24 24">
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
|
||||
/>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
|
||||
/>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
|
||||
/>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
|
||||
/>
|
||||
</svg>
|
||||
Continuer avec Google
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
className={twMerge(
|
||||
"w-full bg-black text-white",
|
||||
"hover:bg-slate-900",
|
||||
"flex items-center justify-center gap-2"
|
||||
)}
|
||||
>
|
||||
<svg className="w-5 h-5" viewBox="0 0 24 24">
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M12 2C6.477 2 2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.879V14.89h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.989C18.343 21.129 22 16.99 22 12c0-5.523-4.477-10-10-10z"
|
||||
/>
|
||||
</svg>
|
||||
Continuer avec Apple
|
||||
</Button>
|
||||
|
||||
<div className="space-y-4 flex flex-col items-center">
|
||||
<LoginWithGoogle />
|
||||
<div className="relative my-6">
|
||||
<div className="absolute inset-0 flex items-center">
|
||||
<div className="w-full border-t border-slate-200 dark:border-slate-700"></div>
|
||||
|
|
|
|||
|
|
@ -1,66 +1,30 @@
|
|||
import { Button } from "../ui-components/button";
|
||||
import { Button } from "../ui-library/button";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { LoginWithGoogle } from "../components/BrandButtons/LoginWIthGoogle";
|
||||
|
||||
export function SignUpPage() {
|
||||
const navigate = useNavigate();
|
||||
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center 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="min-h-screen flex items-center justify-center 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"
|
||||
onClick={() => navigate("/")}
|
||||
>
|
||||
<div
|
||||
className={twMerge(
|
||||
"w-full max-w-md p-8 bg-white dark:bg-slate-800/50 backdrop-blur-lg rounded-2xl",
|
||||
"border border-emerald-200 dark:border-emerald-900/30",
|
||||
"shadow-xl"
|
||||
)}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<h1 className="text-3xl font-bold text-slate-900 dark:text-white mb-8 text-center">
|
||||
Créer un compte
|
||||
</h1>
|
||||
|
||||
<div className="space-y-4">
|
||||
<Button
|
||||
className={twMerge(
|
||||
"w-full bg-white dark:bg-slate-800 text-slate-900 dark:text-white",
|
||||
"border border-slate-200 dark:border-slate-700",
|
||||
"hover:bg-slate-50 dark:hover:bg-slate-700/50",
|
||||
"flex items-center justify-center gap-2"
|
||||
)}
|
||||
>
|
||||
<svg className="w-5 h-5" viewBox="0 0 24 24">
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
|
||||
/>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
|
||||
/>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
|
||||
/>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
|
||||
/>
|
||||
</svg>
|
||||
Continuer avec Google
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
className={twMerge(
|
||||
"w-full bg-black text-white",
|
||||
"hover:bg-slate-900",
|
||||
"flex items-center justify-center gap-2"
|
||||
)}
|
||||
>
|
||||
<svg className="w-5 h-5" viewBox="0 0 24 24">
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M12 2C6.477 2 2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.879V14.89h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.989C18.343 21.129 22 16.99 22 12c0-5.523-4.477-10-10-10z"
|
||||
/>
|
||||
</svg>
|
||||
Continuer avec Apple
|
||||
</Button>
|
||||
|
||||
<div className="space-y-4 flex flex-col items-center">
|
||||
<LoginWithGoogle />
|
||||
<div className="relative my-6">
|
||||
<div className="absolute inset-0 flex items-center">
|
||||
<div className="w-full border-t border-slate-200 dark:border-slate-700"></div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue