Update the banner on the landing page from our github url to our soc2 reportwwzeng1/landing-page#363

Sign in

1import {
2  ChakraProvider,
3  Box,
4  extendTheme,
5  useColorMode,
6  ThemeConfig,
7} from "@chakra-ui/react";
8import CallToAction from "./components/CallToAction";
9import { Helmet } from "react-helmet";
10import Navbar from "./components/Navbar";
11import ogimage from "./assets/ogimage.png";
12import { ColorModeSwitcher } from "./ColorModeSwitcher";
13import { useEffect } from "react";
14import Testimonials from "./components/Testimonials";
15import Users from "./components/Users";
16
17import circles from "./assets/circles.svg";
18import Features from "./components/Features";
19import Conclusion from "./components/Conclusion";
20
21const config: ThemeConfig = {
22  initialColorMode: "dark",
23  useSystemColorMode: false,
24};
25
26const theme = extendTheme({ config });
27
28function ForceDarkMode(props: { children: JSX.Element }) {
29  const { colorMode, toggleColorMode } = useColorMode();
30
31  useEffect(() => {
32    if (colorMode === "dark") return;
33    toggleColorMode();
34  }, [colorMode, toggleColorMode]);
35
36  return props.children;
37}
38
39export const App = () => {
40  return (
41    <>
42      <Helmet>
43        <meta property="og:image" content={ogimage} />
44      </Helmet>
45      <ChakraProvider theme={theme}>
46        <ForceDarkMode>
47          <Box
48            textAlign="center"
49            fontSize="xl"
50            bgColor="#0d0a1a"
51            bgImage={circles}
52            bgPos="0 0"
53            bgSize="100%"
54            minH="100vh"
55            bgRepeat="no-repeat"
56            overflowX="hidden"
57          >
58            {false && <ColorModeSwitcher />}
59            <Navbar />
60            <CallToAction />
61            <Users />
62            <Features />
63            <Testimonials />
64            <Conclusion />
65          </Box>
66        </ForceDarkMode>
67      </ChakraProvider>
68    </>
69  );

1import { EmailIcon, HamburgerIcon } from "@chakra-ui/icons";
2import {
3  Box,
4  Button,
5  ButtonGroup,
6  Flex,
7  HStack,
8  IconButton,
9  Image,
10  Menu,
11  MenuButton,
12  MenuItem,
13  MenuList,
14  useBreakpointValue,
15} from "@chakra-ui/react";
16import { FaBook, FaDiscord, FaGithub, FaTwitter } from "react-icons/fa";
17import logo from "../assets/icon.png";
18
19export default function NavBar() {
20
21  const listDisplay = useBreakpointValue({ base: "none", lg: "flex" });
22  const menuDisplay = useBreakpointValue({ base: "flex", lg: "none" });
23  const navItems = [
24    {
25      label: "Twitter",
26      icon: <FaTwitter />,
27      link: "https://twitter.com/sweep__ai",
28    },
29    {
30      label: "Github",
31      icon: <FaGithub />,
32      link: "https://github.com/sweepai",
33    },
34    {
35      label: "Discord",
36      icon: <FaDiscord />,
37      link: "https://discord.gg/sweep-ai",
38    },
39    {
40      label: "Docs",
41      icon: <FaBook />,
42      link: "https://docs.sweep.dev/start",
43    },
44    {
45      label: "Email",
46      icon: <EmailIcon />,
47      link: "mailto:team@sweep.dev",
48    },
49    {
50      label: "Buy Sweep Pro",
51      icon: <p>Buy Sweep Pro</p>,
52      link: "https://buy.stripe.com/fZe03512h99u0AE6os",
53    },
54  ];
55
56  return (
57    <Box as="nav" bg="bg-surface" boxShadow="sm" width="full" p={4}>
58      <HStack spacing="10" justify="space-between">
59        <Flex justify="space-between" flex="1">
60          <HStack>
61            <Button variant="ghost">
62              <Image src={logo} alt="logo" width={10} borderRadius={12} />
63              Sweep AI
64            </Button>
65          </HStack>
66          <ButtonGroup variant="link" display={listDisplay}>
67            {navItems.map((item) => (
68              <IconButton
69                key={item.label}
70                icon={item.icon}
71                variant="ghost"
72                aria-label={item.label}
73                onClick={() => {
74                  window.open(item.link, "_blank");
75                }}
76                px={2}
77              />
78            ))}
79          </ButtonGroup>
80          <Menu>
81            <IconButton
82              key={"Sweep Pro"}
83              icon={<p>Sweep Pro</p>}
84              variant="ghost"
85              aria-label={"Sweep Pro"}
86              onClick={() => {
87                window.open("https://buy.stripe.com/fZe03512h99u0AE6os", "_blank");
88              }}
89              px={2}
90              display={menuDisplay}
91            />
92            <MenuButton
93              as={IconButton}
94              aria-label='Options'
95              icon={<HamburgerIcon />}
96              variant='outline'
97              display={menuDisplay}
98            />
99            <MenuList
100              backgroundColor="#333"
101            >
102              {navItems.map((item) => (
103                <MenuItem backgroundColor="#333">
104                  {item.label}
105                  {
106                    item.label !== "Buy Sweep Pro" &&
107                    <IconButton
108                      key={item.label}
109                      icon={item.icon}
110                      variant="ghost"
111                      aria-label={item.label}
112                      onClick={() => {
113                        window.open(item.link, "_blank");
114                      }}
115                    />
116                  }
117                </MenuItem>
118              ))}
119            </MenuList>
120          </Menu>
121        </Flex>
122      </HStack>
123    </Box>
124  );

1import {
2  Flex,
3  Container,
4  Heading,
5  Stack,
6  Text,
7  Button,
8} from "@chakra-ui/react";
9import { ArrowForwardIcon } from "@chakra-ui/icons";
10// @ts-ignore
11// import { Terminal } from "react-window-ui";
12import { FaDiscord, FaGithub } from "react-icons/fa";
13
14import logo from "../assets/icon.png";
15import ExternalLinkWithText from "./ExternalLinkWithText";
16const demo = require("../assets/demo.mp4");
17
18export default function CallToAction() {
19  return (
20    <Container maxW={"5xl"}>
21      <Stack
22        textAlign={"center"}
23        align={"center"}
24        spacing={{ base: 8, md: 10 }}
25        py={{ base: 4, md: 15 }}
26        style={{ paddingTop: "0 !important" }}
27        mb={36}
28      >
29        <img src={logo} alt="Logo" width={120} height={120} style={{
30          animation: "bob 0.75s ease-in-out infinite alternate",
31        }} />
32        <style>
33          {`
34            @keyframes bob {
35              from {
36                transform: translateY(0);
37              }
38              to {
39                transform: translateY(15px);
40              }
41            }
42          `}
43        </style>
44        <Heading
45          fontWeight={600}
46          fontSize={{ base: "3xl", sm: "4xl", md: "6xl" }}
47          lineHeight={"110%"}
48        >
49          <del>Develop</del>
50          <ArrowForwardIcon />Review Code
51        </Heading>
52        <Text color={"green.400"} maxW={"3xl"} mt="1rem !important" mb="1rem !important">
53          Spend time reviewing code generated by AI, not writing it
54        </Text>
55        <Button
56          color="white"
57          p={6}
58          colorScheme={"purple"}
59          bg={"purple.400"}
60          _hover={{ bg: "purple.600" }}
61          onClick={() => window.open("https://github.com/apps/sweep-ai")}
62          fontSize={"xl"}
63          mb="1rem !important"
64        >
65          <FaGithub />&nbsp;&nbsp;Install Sweep
66        </Button>
67        <ExternalLinkWithText
68          href="https://discord.gg/sweep-ai" // updated link
69          color="orange.400"
70          mt="0 !important"
71          style={{
72            display: "flex",
73            flexDirection: "row",
74            alignItems: "center",
75          }}
76        >
77          <FaDiscord />&nbsp;&nbsp;Join our Discord
78        </ExternalLinkWithText>
79        <Flex w={"full"} mt="4rem !important">
80          <Container width="100vw" boxShadow="0 0 80px #181818" p={0} maxWidth="full">
81            <video src={demo} autoPlay muted loop playsInline>
82              Your browser does not support the video tag.
83            </video>
84          </Container>
85        </Flex>
86      </Stack>
87    </Container>
88  );