diff --git a/ui/index.html b/ui/index.html index d231bf7..b4ea48d 100644 --- a/ui/index.html +++ b/ui/index.html @@ -4,7 +4,7 @@ - + XTablo diff --git a/ui/src/App.tsx b/ui/src/App.tsx index 4751792..4e07204 100644 --- a/ui/src/App.tsx +++ b/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={ <>
-
-
-

+
+ {/* Hero Section */} +
+
+
+
+

Maîtrisez vos dépenses de chantier -

-

+

+

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.

- - +
+
- Démarrer gratuitement - +
+
+ -
+ {/* Features Section */} +
+
+

+ Une solution complète pour votre entreprise +

+

+ Découvrez comment XTablo peut transformer votre gestion + des dépenses +

+
+
+
+
+ + + +
+

+ Suivi en temps réel +

+

+ Visualisez vos dépenses en temps réel et prenez des + décisions éclairées +

+
+
+
+ + + +
+

+ Rapports personnalisés +

+

+ Générez des rapports détaillés adaptés à vos besoins +

+
+
+
+ + + +
+

+ Optimisation des coûts +

+

+ Identifiez les opportunités d'optimisation et réduisez + vos dépenses +

+
+
+
+ + {/* Testimonials Section */} +
+
+

+ Fait confiance par les entreprises du BTP +

+

+ Découvrez ce que nos clients disent de XTablo +

+
+
+
+

+ "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." +

+
+
+
+

+ Michel Dubois +

+

+ Chef de Projet +

+
+
+
+ +
+

+ "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." +

+
+
+
+

+ Sophie Martin +

+

+ Directrice Financière +

+
+
+
+ +
+

+ "La gestion des dépenses sur plusieurs chantiers n'a + jamais été aussi simple. XTablo nous donne une + visibilité totale sur nos coûts." +

+
+
+
+

+ David Laurent +

+

+ Chef de Chantier +

+
+
+
+
+
+ + {/* Pricing Section */} +
+
+

+ Des tarifs adaptés à vos besoins +

+

+ Choisissez le plan qui correspond le mieux à votre + entreprise +

+
+
-
+

+ Starter +

+
+ + 12€ + + + /mois + +
+
    +
  • + + + + Jusqu'à 5 chantiers +
    • +
  • + + + + Suivi des dépenses en temps réel +
    • +
  • + + + + Rapports mensuels +
    • +
  • + + + + Support par email +
    • +
+ +
+ +
+
+ + Plus populaire + +
+

+ Pro +

+
+ + 25€ + + + /mois + +
+
    +
  • + + + + Chantiers illimités +
    • +
  • + + + + Suivi des dépenses en temps réel +
    • +
  • + + + + Rapports personnalisés +
    • +
  • + + + + Support prioritaire +
    • +
  • + + + + API disponible +
    • +
+
+
-
-

- Fait confiance par les entreprises du BTP -

-
-
-

- "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." -

-
-
-
-

- Michel Dubois -

-

- Chef de Projet -

-
-
-
- -
-

- "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." -

-
-
-
-

- Sophie Martin -

-

- Directrice Financière -

-
-
-
- -
-

- "La gestion des dépenses sur plusieurs chantiers n'a - jamais été aussi simple. XTablo nous donne une - visibilité totale sur nos coûts." -

-
-
-
-

- David Laurent -

-

- Chef de Chantier -

-
-
-
-
-
- -
-

- Des tarifs adaptés à vos besoins -

-
-
-

- Starter -

-
- - 12€ - - - /mois - -
-
    -
  • - - - - Jusqu'à 5 chantiers -
    • -
  • - - - - Suivi des dépenses en temps réel -
    • -
  • - - - - Rapports mensuels -
    • -
  • - - - - Support par email -
    • -
- -
- -
-
- - Plus populaire - -
-

- Pro -

-
- - 25€ - - - /mois - -
-
    -
  • - - - - Chantiers illimités -
    • -
  • - - - - Suivi des dépenses en temps réel -
    • -
  • - - - - Rapports personnalisés -
    • -
  • - - - - Support prioritaire -
    • -
  • - - - - API disponible -
    • -
- -
-
-
- -
-

+ {/* CTA Section */} +
+
+

Prêt à optimiser vos dépenses de projet ? -

+

Commencez votre essai gratuit de 14 jours aujourd'hui. Aucune carte bancaire requise.

-
- - +
-
- +
+
+ + {/* Footer */} diff --git a/ui/src/assets/google.png b/ui/src/assets/google.png new file mode 100644 index 0000000..f9a56b1 Binary files /dev/null and b/ui/src/assets/google.png differ diff --git a/ui/src/components/BrandButtons/LoginWIthGoogle.tsx b/ui/src/components/BrandButtons/LoginWIthGoogle.tsx new file mode 100644 index 0000000..f739a2c --- /dev/null +++ b/ui/src/components/BrandButtons/LoginWIthGoogle.tsx @@ -0,0 +1,42 @@ +import "./login-with-google.css"; + +export function LoginWithGoogle() { + return ( + + ); +} diff --git a/ui/src/components/BrandButtons/login-with-google.css b/ui/src/components/BrandButtons/login-with-google.css new file mode 100644 index 0000000..501189a --- /dev/null +++ b/ui/src/components/BrandButtons/login-with-google.css @@ -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%; +} diff --git a/ui/src/pages/login.tsx b/ui/src/pages/login.tsx index 96db704..c920235 100644 --- a/ui/src/pages/login.tsx +++ b/ui/src/pages/login.tsx @@ -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 ( -
+
navigate("/")} + >
e.stopPropagation()} >

Connexion

-
- - - - +
+
diff --git a/ui/src/pages/signup.tsx b/ui/src/pages/signup.tsx index 5d66699..ed22073 100644 --- a/ui/src/pages/signup.tsx +++ b/ui/src/pages/signup.tsx @@ -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 ( -
+
navigate("/")} + >
e.stopPropagation()} >

Créer un compte

-
- - - - +
+
diff --git a/ui/src/ui-components/avatar.tsx b/ui/src/ui-library/avatar.tsx similarity index 100% rename from ui/src/ui-components/avatar.tsx rename to ui/src/ui-library/avatar.tsx diff --git a/ui/src/ui-components/breadcrumbs.tsx b/ui/src/ui-library/breadcrumbs.tsx similarity index 100% rename from ui/src/ui-components/breadcrumbs.tsx rename to ui/src/ui-library/breadcrumbs.tsx diff --git a/ui/src/ui-components/button.tsx b/ui/src/ui-library/button.tsx similarity index 100% rename from ui/src/ui-components/button.tsx rename to ui/src/ui-library/button.tsx diff --git a/ui/src/ui-components/calendar.tsx b/ui/src/ui-library/calendar.tsx similarity index 100% rename from ui/src/ui-components/calendar.tsx rename to ui/src/ui-library/calendar.tsx diff --git a/ui/src/ui-components/checkbox.tsx b/ui/src/ui-library/checkbox.tsx similarity index 100% rename from ui/src/ui-components/checkbox.tsx rename to ui/src/ui-library/checkbox.tsx diff --git a/ui/src/ui-components/clipboard.tsx b/ui/src/ui-library/clipboard.tsx similarity index 100% rename from ui/src/ui-components/clipboard.tsx rename to ui/src/ui-library/clipboard.tsx diff --git a/ui/src/ui-components/combobox.tsx b/ui/src/ui-library/combobox.tsx similarity index 100% rename from ui/src/ui-components/combobox.tsx rename to ui/src/ui-library/combobox.tsx diff --git a/ui/src/ui-components/connection-form.tsx b/ui/src/ui-library/connection-form.tsx similarity index 100% rename from ui/src/ui-components/connection-form.tsx rename to ui/src/ui-library/connection-form.tsx diff --git a/ui/src/ui-components/date-field.tsx b/ui/src/ui-library/date-field.tsx similarity index 100% rename from ui/src/ui-components/date-field.tsx rename to ui/src/ui-library/date-field.tsx diff --git a/ui/src/ui-components/date-picker.tsx b/ui/src/ui-library/date-picker.tsx similarity index 100% rename from ui/src/ui-components/date-picker.tsx rename to ui/src/ui-library/date-picker.tsx diff --git a/ui/src/ui-components/date-range-picker.tsx b/ui/src/ui-library/date-range-picker.tsx similarity index 100% rename from ui/src/ui-components/date-range-picker.tsx rename to ui/src/ui-library/date-range-picker.tsx diff --git a/ui/src/ui-components/dialog.tsx b/ui/src/ui-library/dialog.tsx similarity index 100% rename from ui/src/ui-components/dialog.tsx rename to ui/src/ui-library/dialog.tsx diff --git a/ui/src/ui-components/disclosure.tsx b/ui/src/ui-library/disclosure.tsx similarity index 100% rename from ui/src/ui-components/disclosure.tsx rename to ui/src/ui-library/disclosure.tsx diff --git a/ui/src/ui-components/dropzone.tsx b/ui/src/ui-library/dropzone.tsx similarity index 100% rename from ui/src/ui-components/dropzone.tsx rename to ui/src/ui-library/dropzone.tsx diff --git a/ui/src/ui-components/empty-state.tsx b/ui/src/ui-library/empty-state.tsx similarity index 100% rename from ui/src/ui-components/empty-state.tsx rename to ui/src/ui-library/empty-state.tsx diff --git a/ui/src/ui-components/field.tsx b/ui/src/ui-library/field.tsx similarity index 100% rename from ui/src/ui-components/field.tsx rename to ui/src/ui-library/field.tsx diff --git a/ui/src/ui-components/file-trigger.tsx b/ui/src/ui-library/file-trigger.tsx similarity index 100% rename from ui/src/ui-components/file-trigger.tsx rename to ui/src/ui-library/file-trigger.tsx diff --git a/ui/src/ui-components/form.tsx b/ui/src/ui-library/form.tsx similarity index 100% rename from ui/src/ui-components/form.tsx rename to ui/src/ui-library/form.tsx diff --git a/ui/src/ui-components/grid-list.tsx b/ui/src/ui-library/grid-list.tsx similarity index 100% rename from ui/src/ui-components/grid-list.tsx rename to ui/src/ui-library/grid-list.tsx diff --git a/ui/src/ui-components/header.tsx b/ui/src/ui-library/header.tsx similarity index 100% rename from ui/src/ui-components/header.tsx rename to ui/src/ui-library/header.tsx diff --git a/ui/src/ui-components/heading.tsx b/ui/src/ui-library/heading.tsx similarity index 100% rename from ui/src/ui-components/heading.tsx rename to ui/src/ui-library/heading.tsx diff --git a/ui/src/ui-components/hooks/use-clipboard.ts b/ui/src/ui-library/hooks/use-clipboard.ts similarity index 100% rename from ui/src/ui-components/hooks/use-clipboard.ts rename to ui/src/ui-library/hooks/use-clipboard.ts diff --git a/ui/src/ui-components/hooks/use-image-loading-status.ts b/ui/src/ui-library/hooks/use-image-loading-status.ts similarity index 100% rename from ui/src/ui-components/hooks/use-image-loading-status.ts rename to ui/src/ui-library/hooks/use-image-loading-status.ts diff --git a/ui/src/ui-components/hover-card.tsx b/ui/src/ui-library/hover-card.tsx similarity index 100% rename from ui/src/ui-components/hover-card.tsx rename to ui/src/ui-library/hover-card.tsx diff --git a/ui/src/ui-components/icon.tsx b/ui/src/ui-library/icon.tsx similarity index 100% rename from ui/src/ui-components/icon.tsx rename to ui/src/ui-library/icon.tsx diff --git a/ui/src/ui-components/icons.tsx b/ui/src/ui-library/icons.tsx similarity index 100% rename from ui/src/ui-components/icons.tsx rename to ui/src/ui-library/icons.tsx diff --git a/ui/src/ui-components/initials.ts b/ui/src/ui-library/initials.ts similarity index 100% rename from ui/src/ui-components/initials.ts rename to ui/src/ui-library/initials.ts diff --git a/ui/src/ui-components/kbd.tsx b/ui/src/ui-library/kbd.tsx similarity index 100% rename from ui/src/ui-components/kbd.tsx rename to ui/src/ui-library/kbd.tsx diff --git a/ui/src/ui-components/link.tsx b/ui/src/ui-library/link.tsx similarity index 100% rename from ui/src/ui-components/link.tsx rename to ui/src/ui-library/link.tsx diff --git a/ui/src/ui-components/list-box.tsx b/ui/src/ui-library/list-box.tsx similarity index 100% rename from ui/src/ui-components/list-box.tsx rename to ui/src/ui-library/list-box.tsx diff --git a/ui/src/ui-components/menu.tsx b/ui/src/ui-library/menu.tsx similarity index 100% rename from ui/src/ui-components/menu.tsx rename to ui/src/ui-library/menu.tsx diff --git a/ui/src/ui-components/meter.tsx b/ui/src/ui-library/meter.tsx similarity index 100% rename from ui/src/ui-components/meter.tsx rename to ui/src/ui-library/meter.tsx diff --git a/ui/src/ui-components/modal.tsx b/ui/src/ui-library/modal.tsx similarity index 100% rename from ui/src/ui-components/modal.tsx rename to ui/src/ui-library/modal.tsx diff --git a/ui/src/ui-components/multi-select.tsx b/ui/src/ui-library/multi-select.tsx similarity index 100% rename from ui/src/ui-components/multi-select.tsx rename to ui/src/ui-library/multi-select.tsx diff --git a/ui/src/ui-components/native-select.tsx b/ui/src/ui-library/native-select.tsx similarity index 100% rename from ui/src/ui-components/native-select.tsx rename to ui/src/ui-library/native-select.tsx diff --git a/ui/src/ui-components/notification-badge.tsx b/ui/src/ui-library/notification-badge.tsx similarity index 100% rename from ui/src/ui-components/notification-badge.tsx rename to ui/src/ui-library/notification-badge.tsx diff --git a/ui/src/ui-components/number-field.tsx b/ui/src/ui-library/number-field.tsx similarity index 100% rename from ui/src/ui-components/number-field.tsx rename to ui/src/ui-library/number-field.tsx diff --git a/ui/src/ui-components/pagination.tsx b/ui/src/ui-library/pagination.tsx similarity index 100% rename from ui/src/ui-components/pagination.tsx rename to ui/src/ui-library/pagination.tsx diff --git a/ui/src/ui-components/password-input.tsx b/ui/src/ui-library/password-input.tsx similarity index 100% rename from ui/src/ui-components/password-input.tsx rename to ui/src/ui-library/password-input.tsx diff --git a/ui/src/ui-components/popover.tsx b/ui/src/ui-library/popover.tsx similarity index 100% rename from ui/src/ui-components/popover.tsx rename to ui/src/ui-library/popover.tsx diff --git a/ui/src/ui-components/progress-bar.tsx b/ui/src/ui-library/progress-bar.tsx similarity index 100% rename from ui/src/ui-components/progress-bar.tsx rename to ui/src/ui-library/progress-bar.tsx diff --git a/ui/src/ui-components/radio-group.tsx b/ui/src/ui-library/radio-group.tsx similarity index 100% rename from ui/src/ui-components/radio-group.tsx rename to ui/src/ui-library/radio-group.tsx diff --git a/ui/src/ui-components/range-calendar.tsx b/ui/src/ui-library/range-calendar.tsx similarity index 100% rename from ui/src/ui-components/range-calendar.tsx rename to ui/src/ui-library/range-calendar.tsx diff --git a/ui/src/ui-components/search-field.tsx b/ui/src/ui-library/search-field.tsx similarity index 100% rename from ui/src/ui-components/search-field.tsx rename to ui/src/ui-library/search-field.tsx diff --git a/ui/src/ui-components/select.tsx b/ui/src/ui-library/select.tsx similarity index 100% rename from ui/src/ui-components/select.tsx rename to ui/src/ui-library/select.tsx diff --git a/ui/src/ui-components/separator.tsx b/ui/src/ui-library/separator.tsx similarity index 100% rename from ui/src/ui-components/separator.tsx rename to ui/src/ui-library/separator.tsx diff --git a/ui/src/ui-components/signup-form.tsx b/ui/src/ui-library/signup-form.tsx similarity index 100% rename from ui/src/ui-components/signup-form.tsx rename to ui/src/ui-library/signup-form.tsx diff --git a/ui/src/ui-components/skeleton.tsx b/ui/src/ui-library/skeleton.tsx similarity index 100% rename from ui/src/ui-components/skeleton.tsx rename to ui/src/ui-library/skeleton.tsx diff --git a/ui/src/ui-components/slider.tsx b/ui/src/ui-library/slider.tsx similarity index 100% rename from ui/src/ui-components/slider.tsx rename to ui/src/ui-library/slider.tsx diff --git a/ui/src/ui-components/slot.tsx b/ui/src/ui-library/slot.tsx similarity index 100% rename from ui/src/ui-components/slot.tsx rename to ui/src/ui-library/slot.tsx diff --git a/ui/src/ui-components/switch.tsx b/ui/src/ui-library/switch.tsx similarity index 100% rename from ui/src/ui-components/switch.tsx rename to ui/src/ui-library/switch.tsx diff --git a/ui/src/ui-components/table.tsx b/ui/src/ui-library/table.tsx similarity index 100% rename from ui/src/ui-components/table.tsx rename to ui/src/ui-library/table.tsx diff --git a/ui/src/ui-components/tabs.tsx b/ui/src/ui-library/tabs.tsx similarity index 100% rename from ui/src/ui-components/tabs.tsx rename to ui/src/ui-library/tabs.tsx diff --git a/ui/src/ui-components/tag-group.tsx b/ui/src/ui-library/tag-group.tsx similarity index 100% rename from ui/src/ui-components/tag-group.tsx rename to ui/src/ui-library/tag-group.tsx diff --git a/ui/src/ui-components/tag-input.tsx b/ui/src/ui-library/tag-input.tsx similarity index 100% rename from ui/src/ui-components/tag-input.tsx rename to ui/src/ui-library/tag-input.tsx diff --git a/ui/src/ui-components/text.tsx b/ui/src/ui-library/text.tsx similarity index 100% rename from ui/src/ui-components/text.tsx rename to ui/src/ui-library/text.tsx diff --git a/ui/src/ui-components/theme/index.css b/ui/src/ui-library/theme/index.css similarity index 100% rename from ui/src/ui-components/theme/index.css rename to ui/src/ui-library/theme/index.css diff --git a/ui/src/ui-components/time-field.tsx b/ui/src/ui-library/time-field.tsx similarity index 100% rename from ui/src/ui-components/time-field.tsx rename to ui/src/ui-library/time-field.tsx diff --git a/ui/src/ui-components/time-picker.ts b/ui/src/ui-library/time-picker.ts similarity index 100% rename from ui/src/ui-components/time-picker.ts rename to ui/src/ui-library/time-picker.ts diff --git a/ui/src/ui-components/toast/toast-queue.ts b/ui/src/ui-library/toast/toast-queue.ts similarity index 100% rename from ui/src/ui-components/toast/toast-queue.ts rename to ui/src/ui-library/toast/toast-queue.ts diff --git a/ui/src/ui-components/toast/toast-region.tsx b/ui/src/ui-library/toast/toast-region.tsx similarity index 100% rename from ui/src/ui-components/toast/toast-region.tsx rename to ui/src/ui-library/toast/toast-region.tsx diff --git a/ui/src/ui-components/tooltip.tsx b/ui/src/ui-library/tooltip.tsx similarity index 100% rename from ui/src/ui-components/tooltip.tsx rename to ui/src/ui-library/tooltip.tsx diff --git a/ui/src/ui-components/utils.ts b/ui/src/ui-library/utils.ts similarity index 100% rename from ui/src/ui-components/utils.ts rename to ui/src/ui-library/utils.ts