1import React from "react";
2
3import {
4 Box,
5 Container,
6 Stack,
7 Text,
8 Link,
9 Icon,
10 Input,
11 Button,
12 useColorModeValue,
13} from "@chakra-ui/react";
14import {
15 SocialFacebookIcon,
16 SocialTwitterIcon,
17 SocialInstagramIcon,
18} from "@salesforce/retail-react-app/app/components/icons";
19
20const Footer = () => {
21 return (
22 <Box
23 bg={useColorModeValue("gray.50", "gray.900")}
24 color={useColorModeValue("gray.700", "gray.200")}
25 >
26 <Container as={Stack} maxW={"6xl"} py={10}>
27 <Stack direction={{ base: "column", md: "row" }} spacing={4}>
28 <Link href="/about">About Us</Link>
29 <Link href="/contact">Contact</Link>
30 <Link href="/faq">FAQ</Link>
31 </Stack>
32 <Stack
33 direction={{ base: "column", md: "row" }}
34 justifyContent={"space-between"}
35 alignItems={"center"}
36 >
37 <Text>
38 © {new Date().getFullYear()} Your Company Name. All rights reserved
39 </Text>
40 <Stack direction={"row"} spacing={6}>
41 <Icon as={SocialFacebookIcon} />
42 <Icon as={SocialTwitterIcon} />
43 <Icon as={SocialInstagramIcon} />
44 </Stack>
45 </Stack>
46 <Stack
47 direction={{ base: "column", md: "row" }}
48 spacing={4}
49 mt={10}
50 alignItems={"center"}
51 >
52 <Text>Subscribe to our newsletter</Text>
53 <Input placeholder="Your email address" />
54 <Button>Subscribe</Button>
55 </Stack>
56 </Container>
57 </Box>
58 );
59};
60
61export default Footer;
j