74 lines
2.4 KiB
TypeScript
74 lines
2.4 KiB
TypeScript
import { Box, Container, Divider, HStack, Link, SimpleGrid, Stack, Text } from '@chakra-ui/react'
|
|
import { Link as RouterLink } from 'react-router-dom'
|
|
|
|
export function Footer() {
|
|
return (
|
|
<Box as="footer" borderTopWidth="1px" mt={20} bg="chakra-subtle-bg">
|
|
<Container maxW="container.lg" py={12}>
|
|
<SimpleGrid columns={{ base: 1, md: 4 }} spacing={8}>
|
|
<Stack spacing={3}>
|
|
<Text fontWeight="bold" fontSize="lg">
|
|
Omnex
|
|
</Text>
|
|
<Text fontSize="sm" color="gray.500">
|
|
Plateforme de gestion de commandes & livraison, déployable en démo isolée en un clic.
|
|
</Text>
|
|
</Stack>
|
|
|
|
<FooterCol title="Produit">
|
|
<FooterLink to="/">Présentation</FooterLink>
|
|
<FooterLink to="/tarifs">Tarifs</FooterLink>
|
|
<FooterLink to="/register">Créer un compte</FooterLink>
|
|
</FooterCol>
|
|
|
|
<FooterCol title="Ressources">
|
|
<FooterLink to="/documentation">Documentation</FooterLink>
|
|
<FooterExt href="#">Statut</FooterExt>
|
|
<FooterExt href="#">Sécurité</FooterExt>
|
|
</FooterCol>
|
|
|
|
</SimpleGrid>
|
|
|
|
<Divider my={8} />
|
|
|
|
<HStack justify="space-between" flexWrap="wrap" spacing={4}>
|
|
<Text fontSize="sm" color="gray.500">
|
|
© {new Date().getFullYear()} Omnex. Tous droits réservés.
|
|
</Text>
|
|
<HStack spacing={6} fontSize="sm" color="gray.500">
|
|
<FooterExt href="#">Mentions légales</FooterExt>
|
|
<FooterExt href="#">Confidentialité</FooterExt>
|
|
</HStack>
|
|
</HStack>
|
|
</Container>
|
|
</Box>
|
|
)
|
|
}
|
|
|
|
function FooterCol({ title, children }: { title: string; children: React.ReactNode }) {
|
|
return (
|
|
<Stack spacing={2}>
|
|
<Text fontWeight="semibold" fontSize="sm" textTransform="uppercase" color="gray.500">
|
|
{title}
|
|
</Text>
|
|
{children}
|
|
</Stack>
|
|
)
|
|
}
|
|
|
|
function FooterLink({ to, children }: { to: string; children: React.ReactNode }) {
|
|
return (
|
|
<Link as={RouterLink} to={to} fontSize="sm" color="gray.600" _hover={{ color: 'primary.500' }}>
|
|
{children}
|
|
</Link>
|
|
)
|
|
}
|
|
|
|
function FooterExt({ href, children }: { href: string; children: React.ReactNode }) {
|
|
return (
|
|
<Link href={href} fontSize="sm" color="gray.600" _hover={{ color: 'primary.500' }}>
|
|
{children}
|
|
</Link>
|
|
)
|
|
}
|