diff --git a/ui/src/App.tsx b/ui/src/App.tsx index baaab1f..e6b3971 100644 --- a/ui/src/App.tsx +++ b/ui/src/App.tsx @@ -1,64 +1,371 @@ -import { FieldError, Label } from "./ui-components/field"; -import { Heading, SubHeading } from "./ui-components/heading"; -import { Form } from "./ui-components/form"; -import { Text, Strong, TextLink } from "./ui-components/text"; import { Button } from "./ui-components/button"; -import { Checkbox } from "./ui-components/checkbox"; -import { TextField, Input } from "./ui-components/field"; -import { ChevronRightIcon } from "./ui-components/icons"; -import { PasswordInput } from "./ui-components/password-input"; +import logo from "./assets/icon.jpg"; +import { useState, useEffect } from "react"; +import { Switch } from "./ui-components/switch"; + +type Theme = "dark" | "light" | "system"; + +export const App = () => { + const [theme, setTheme] = useState("system"); + + useEffect(() => { + const root = window.document.documentElement; + root.classList.remove("light", "dark"); + + if (theme === "system") { + const systemTheme = window.matchMedia("(prefers-color-scheme: dark)") + .matches + ? "dark" + : "light"; + root.classList.add(systemTheme); + } else { + root.classList.add(theme); + } + }, [theme]); -function App() { return ( -
- -
-
- - Sign in to your account - - - Welcome back! Please sign into continue - -
+
+
+ -
- - - - - +
+

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

- -
- - - Forgot password? - -
- - - - - Remember me - - - - -
-
- - Do you have account?{" "} - - Register - - +
+
+
+
+
+ +
+

+ 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 +
    • +
+ +
+
+
+
+

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

+

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

+
+ + +
+
+
+
); -} - -export default App; +}; diff --git a/ui/src/assets/icon.jpg b/ui/src/assets/icon.jpg new file mode 100644 index 0000000..026425e Binary files /dev/null and b/ui/src/assets/icon.jpg differ diff --git a/ui/src/main.tsx b/ui/src/main.tsx index 98ccb21..f258e49 100644 --- a/ui/src/main.tsx +++ b/ui/src/main.tsx @@ -1,6 +1,6 @@ import { StrictMode } from "react"; import { createRoot } from "react-dom/client"; -import App from "./App.tsx"; +import { App } from "./App"; createRoot(document.getElementById("root")!).render(