feat: add web

2026-07-27 19:13:56 +02:00
parent bb6c425840
commit 07db8a2ae2
39 changed files with 7534 additions and 0 deletions
@@ -0,0 +1,87 @@
+import { useState } from 'react'
+import {
+  Box,
+  Button,
+  Card,
+  CardBody,
+  Container,
+  FormControl,
+  FormLabel,
+  Heading,
+  Input,
+  Stack,
+  Text,
+  Textarea,
+  useToast,
+} from '@chakra-ui/react'
+import { Link as RouterLink } from 'react-router-dom'
+import { api, ApiError } from '../lib/api'
+
+export function RequestDemo() {
+  const toast = useToast()
+  const [telegram, setTelegram] = useState('')
+  const [message, setMessage] = useState('')
+  const [loading, setLoading] = useState(false)
+  const [sent, setSent] = useState(false)
+
+  const onSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setLoading(true)
+    try {
+      await api.createLead(telegram.trim(), message.trim())
+      setSent(true)
+    } catch (err) {
+      const msg = err instanceof ApiError ? err.message : 'Envoi impossible'
+      toast({ status: 'error', title: 'Échec', description: msg })
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <Container maxW="md" py={16}>
+      <Stack spacing={6}>
+        <Box textAlign="center">
+          <Heading size="lg">Demander une démo</Heading>
+          <Text color="gray.500">
+            Laissez vos coordonnées, un commercial déploiera votre démo dédiée (30 jours).
+          </Text>
+        </Box>
+
+        {sent ? (
+          <Card>
+            <CardBody>
+              <Stack spacing={4} textAlign="center">
+                <Heading size="md">Merci&nbsp;!</Heading>
+                <Text>Votre demande a bien été enregistrée. Nous revenons vers vous rapidement.</Text>
+                <Button as={RouterLink} to="/" variant="outline">
+                  Retour à l'accueil
+                </Button>
+              </Stack>
+            </CardBody>
+          </Card>
+        ) : (
+          <Card>
+            <CardBody>
+              <form onSubmit={onSubmit}>
+                <Stack spacing={4}>
+                  <FormControl isRequired>
+                    <FormLabel>Telegram</FormLabel>
+                    <Input value={telegram} onChange={(e) => setTelegram(e.target.value)} />
+                  </FormControl>
+                  <FormControl>
+                    <FormLabel>Message (optionnel)</FormLabel>
+                    <Textarea value={message} onChange={(e) => setMessage(e.target.value)} rows={4} />
+                  </FormControl>
+                  <Button type="submit" colorScheme="primary" isLoading={loading}>
+                    Envoyer ma demande
+                  </Button>
+                </Stack>
+              </form>
+            </CardBody>
+          </Card>
+        )}
+      </Stack>
+    </Container>
+  )
+}