Add chat section

src/pages/landing.jsx

@@ -2,6 +2,7 @@ import { useEffect } from "react";
 import { Helmet } from "react-helmet-async";
 
 import gtag from "../gtag";
+import Chat from "../sections/Chat";
 import Steps from "../sections/Steps";
 import HelloWorld from "../sections/HelloWorld";
 import MarketingServices from "../sections/marketing-services";
@@ -31,6 +32,8 @@ export default function MarketingLandingPage() {
 
       <MarketingServicesInclude />
 
+      <Chat />
+
       <Steps />
 
       <HelloWorld />

src/sections/Chat.jsx

@@ -0,0 +1,70 @@
+import React from "react";
+
+import Box from "@mui/material/Box";
+import { Button } from "@mui/material";
+import Container from "@mui/material/Container";
+
+import { useResponsive } from "../hooks/use-responsive";
+
+// ----------------------------------------------------------------------
+
+export default function Chat() {
+  const mdUp = useResponsive("up", "md");
+  return (
+    <Container
+      sx={{
+        mb: 12,
+      }}
+    >
+      <Box>
+        <Box
+          sx={{
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            mb: 2,
+          }}
+        >
+          {mdUp && (
+            // eslint-disable-next-line jsx-a11y/media-has-caption
+            <video
+              src="https://cdn.nucleoid.com/media/a229559c-ef13-40d2-b188-5ff2451ccbee.mp4"
+              controls
+            />
+          )}
+          {!mdUp && (
+            // eslint-disable-next-line jsx-a11y/media-has-caption
+            <video
+              width="100%"
+              height="auto"
+              src="https://cdn.nucleoid.com/media/a229559c-ef13-40d2-b188-5ff2451ccbee.mp4"
+              controls
+            />
+          )}
+        </Box>
+        <Box
+          sx={{
+            display: "flex",
+            justifyContent: "center",
+          }}
+        >
+          <Button
+            size="large"
+            variant="outlined"
+            onClick={() => {
+              window.location.assign("/ide/chat");
+            }}
+            sx={{
+              mx: 1,
+              textTransform: "none",
+              color: "white",
+              display: { xs: "none", md: "block" },
+            }}
+          >
+            Go to Nucleoid Chat
+          </Button>
+        </Box>
+      </Box>
+    </Container>
+  );
+}

src/sections/marketing-landing-hero.jsx

@@ -89,13 +89,13 @@ export default function MarketingLandingHero() {
                 alignItems="center"
                 sx={{ typography: "h6" }}
                 onClick={() =>
-                  window.location.assign("https://nucleoid.com/ide/")
+                  window.location.assign("https://nucleoid.com/ide/chat")
                 }
               >
                 <Fab size="medium" sx={{ mr: 1 }}>
                   <Iconify width={24} icon="carbon:play" />
                 </Fab>
-                Try it out
+                Nucleoid Chat
               </Stack>
             </Stack>
           </Grid>