[ENG-1268] Add more information about what we can do at Konfig to web…

…site (#300) * update logos + update CTA buttons * restyle sdk sections * DRY * save * save * TODO: turn sdk section into component * save * save * use our custom Image component * fix alignment in diagram * api docs image * fix faint thin white line * cleanup * polish * polish * TODO: video for generated SDK snippets TODO: animated border bottom on highlighted text * TODO: speed up video * save --------- Co-authored-by: konfig-bot <[email protected]>
konfig-dev · Oct 19, 2023 · 8d13567 · 8d13567
1 parent 859d266
commit 8d13567
Show file tree

Hide file tree

Showing 29 changed files with 826 additions and 537 deletions.
diff --git a/konfigthis.com/public/docs.png b/konfigthis.com/public/docs.png
diff --git a/konfigthis.com/public/groundx-g.png b/konfigthis.com/public/groundx-g.png
diff --git a/konfigthis.com/public/humanloop-g.png b/konfigthis.com/public/humanloop-g.png
diff --git a/konfigthis.com/public/leap-g.png b/konfigthis.com/public/leap-g.png
diff --git a/konfigthis.com/public/snaptrade-g.png b/konfigthis.com/public/snaptrade-g.png
diff --git a/konfigthis.com/public/splitit-g.png b/konfigthis.com/public/splitit-g.png
diff --git a/konfigthis.com/public/video/snippet-quick.mov b/konfigthis.com/public/video/snippet-quick.mov
diff --git a/konfigthis.com/public/video/snippet.mov b/konfigthis.com/public/video/snippet.mov
diff --git a/konfigthis.com/src/components/EnsureHighQualitySdks/EnsureHighQualitySdks.tsx b/konfigthis.com/src/components/EnsureHighQualitySdks/EnsureHighQualitySdks.tsx
@@ -1,35 +1,13 @@
-import { useMdMediaQuery } from "@/utils/use-md-media-query";
+import { Text, Title, Box, Stack, Group, Anchor, Flex } from "@mantine/core";
 import {
-  Text,
-  Col,
-  Container,
-  Grid,
-  Title,
-  rem,
-  Box,
-  Stack,
-  ThemeIcon,
-  Paper,
-  Group,
-  Anchor,
-} from "@mantine/core";
-import { useViewportSize, useWindowScroll } from "@mantine/hooks";
-import {
-  IconCertificate,
   IconPackageExport,
   IconShieldCheck,
   IconShieldCheckFilled,
-  IconTestPipe,
 } from "@tabler/icons-react";
-import Link from "next/link";
-import { useState, useEffect, useMemo } from "react";
-import ReactFlow, {
-  Position,
-  Node,
-  Edge,
-  ReactFlowInstance,
-  FitViewOptions,
-} from "reactflow";
+import ReactFlow, { Position, Node, Edge } from "reactflow";
+import { useSectionStyles } from "../GetSdksWithZeroEffort/GetSdksWithZeroEffort";
+import { useReactFlow } from "@/utils/use-react-flow";
+import { useGraphicStyles } from "@/utils/use-graphic-styles";
 
 const desktopNodes: Node[] = [
   {
@@ -135,78 +113,65 @@ const edges: Edge[] = [
 ];
 
 export function EnsureHighQualitySdks() {
-  const matches = useMdMediaQuery();
-  const [nodes, setNodes] = useState(matches ? desktopNodes : mobileNodes);
+  const { classes, cx } = useSectionStyles();
 
-  useEffect(() => {
-    setNodes(matches ? desktopNodes : mobileNodes);
-  }, [matches]);
+  const { nodes, setInst, fitViewOptions } = useReactFlow({
+    padding: 0.5,
+    desktopNodes,
+    mobileNodes,
+  });
+
+  const {
+    classes: { texture },
+  } = useGraphicStyles({})();
 
-  const [inst, setInst] = useState<ReactFlowInstance | null>(null);
-  const { width, height } = useViewportSize();
-  const [{ x, y }] = useWindowScroll();
-  const fitViewOptions: FitViewOptions | undefined = useMemo(
-    () => (matches ? undefined : { padding: 0.5 }),
-    [matches]
-  );
-  useEffect(() => {
-    inst?.fitView(fitViewOptions);
-  }, [width, height, x, y, inst, fitViewOptions]);
   return (
-    <Container my={rem(150)} size="lg">
-      <Grid>
-        <Col span={12} md={5}>
-          <Title mb={rem(10)} order={2}>
-            Ensure high quality SDKs
-          </Title>
-          <Stack>
-            <Box c="dimmed">
-              <ThemeIcon
-                size={35}
-                radius="md"
-                variant="gradient"
-                gradient={{ deg: 133, from: "dark", to: "gray" }}
-              >
-                <IconCertificate size={rem(22)} stroke={1.5} />
-              </ThemeIcon>
-              <Text fz="lg" mt="sm" fw={500}>
-                Validation
-              </Text>
-              <Text c="dimmed" fz="sm">
-                {"Konfig's"}{" "}
-                <Anchor href="https://konfigthis.com/docs/lint-rules">
-                  linter
-                </Anchor>{" "}
-                catches errors in your OpenAPI Specification before they can
-                reach your customers and cause confusion
-              </Text>
-            </Box>
-            <Box c="dimmed">
-              <ThemeIcon
-                size={35}
-                radius="md"
-                variant="gradient"
-                gradient={{ deg: 133, from: "dark", to: "gray" }}
-              >
-                <IconTestPipe size={rem(22)} stroke={1.5} />
-              </ThemeIcon>
-              <Text fz="lg" mt="sm" fw={500}>
-                Testing
-              </Text>
-              <Text c="dimmed" fz="sm">
-                Konfig writes test cases for every SDK to ensure any API update
-                {"won't"} break the SDKs your customers are using
-              </Text>
+    <Box>
+      <Box className={classes.sectionInner}>
+        <Flex
+          className={classes.content}
+          gap="xl"
+          direction={{ base: "column", sm: "row" }}
+        >
+          <Box className={cx(classes.textColor, classes.textSection)}>
+            <div
+              className={cx(
+                classes.triangle,
+                classes.triangle2,
+                classes.triangleBottomRight,
+                texture
+              )}
+            />
+            <Box className={classes.textLayer}>
+              <Title c="hsl(214 36% 58% / 1)" order={6}>
+                SDKs
+              </Title>
+              <Title className={classes.title}>
+                Ensure{" "}
+                <span className={classes.titleHighlight}>high quality</span>{" "}
+                SDKs
+              </Title>
+              <Stack className={classes.textSize} spacing="xs">
+                <Text>
+                  Before any errors reaches your customers,
+                  {"Konfig's"}{" "}
+                  <Anchor
+                    className={classes.link}
+                    target="_blank"
+                    href="https://konfigthis.com/docs/lint-rules"
+                  >
+                    linter
+                  </Anchor>{" "}
+                  identifies and rectifies them in your OpenAPI Specification.
+                </Text>
+                <Text>
+                  Konfig writes test cases for every SDK to ensure API updates
+                  {" won't"} break the SDKs your customers are using.
+                </Text>
+              </Stack>
             </Box>
-          </Stack>
-        </Col>
-        <Col span={12} md={7}>
-          <Paper
-            radius="md"
-            withBorder
-            shadow="lg"
-            h={{ base: rem(500), md: "100%" }}
-          >
+          </Box>
+          <Box className={classes.diagram}>
             <ReactFlow
               onInit={setInst}
               fitView
@@ -223,10 +188,10 @@ export function EnsureHighQualitySdks() {
               proOptions={{ hideAttribution: true }}
               nodes={nodes}
               edges={edges}
-            ></ReactFlow>
-          </Paper>
-        </Col>
-      </Grid>
-    </Container>
+            />
+          </Box>
+        </Flex>
+      </Box>
+    </Box>
   );
 }
diff --git a/konfigthis.com/src/components/FooterSimple/FooterSimple.tsx b/konfigthis.com/src/components/FooterSimple/FooterSimple.tsx
@@ -6,10 +6,11 @@ import {
   Group,
   rem,
   Title,
+  Box,
 } from "@mantine/core";
 import { IconBrandLinkedin } from "@tabler/icons-react";
 import logo from "./logo.png";
-import Image from "@/components/image";
+import Image from "@/components/Image";
 import { useEffect } from "react";
 import Script from "next/script";
 
@@ -22,9 +23,6 @@ const useStyles = createStyles((theme) => ({
       theme.colorScheme === "dark"
         ? theme.colors.dark[6]
         : theme.colors.gray[0],
-    borderTop: `${rem(1)} solid ${
-      theme.colorScheme === "dark" ? theme.colors.dark[5] : theme.colors.gray[2]
-    }`,
   },
 
   logo: {
@@ -109,10 +107,6 @@ const useStyles = createStyles((theme) => ({
     borderTop: `${rem(1)} solid ${
       theme.colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[2]
     }`,
-
-    [theme.fn.smallerThan("sm")]: {
-      flexDirection: "column",
-    },
   },
 
   social: {
@@ -130,7 +124,7 @@ interface FooterLinksProps {
 }
 
 export function FooterSimple({ data }: FooterLinksProps) {
-  const { classes } = useStyles();
+  const { classes, cx } = useStyles();
 
   const groups = data.map((group) => {
     const links = group.links.map((link, index) => (
@@ -146,7 +140,7 @@ export function FooterSimple({ data }: FooterLinksProps) {
     ));
 
     return (
-      <div className={classes.wrapper} key={group.title}>
+      <div className={cx(classes.wrapper, "mb-8")} key={group.title}>
         <Text className={classes.title}>{group.title}</Text>
         {links}
       </div>
@@ -187,9 +181,14 @@ export function FooterSimple({ data }: FooterLinksProps) {
           </div>
           <div className={classes.groups}>{groups}</div>
         </Container>
-        <Container className={classes.afterFooter}>
+        <Container className={cx(classes.afterFooter, "flex-col sm:flex-row")}>
           <div className={classes.footerLogo}>
-            <Image src={logo} height={25} alt="Konfig Logo" />
+            <Image
+              className="m-auto sm:m-0"
+              src={logo}
+              height={25}
+              alt="Konfig Logo"
+            />
             <Text color="dimmed" size="xs" className={classes.description}>
               Copyright © Konfig Inc.
             </Text>

diff --git a/konfigthis.com/src/components/GeneratedSdkSnippets.tsx b/konfigthis.com/src/components/GeneratedSdkSnippets.tsx
@@ -0,0 +1,35 @@
+import { ProductSection } from "./ProductSection";
+import { LightSectionTitleHighlight } from "./LightSectionTitleHighlight";
+
+export function GeneratedSdkSnippets() {
+  return (
+    <ProductSection
+      graphicBottom
+      parent="Documentation"
+      Section={() => (
+        <>
+          User Generated{" "}
+          <LightSectionTitleHighlight>
+            SDK Code Snippets
+          </LightSectionTitleHighlight>
+        </>
+      )}
+      Description={() => (
+        <>
+          Efficiently onboard customers in any language. Enable developers to
+          easily copy and paste the required code directly from your
+          documentation. No manual updates needed on your end.
+        </>
+      )}
+      Visual={() => (
+        <video
+          className="rounded-xl bg-video-bg shadow-lg w-full lg:w-1/2 p-2"
+          autoPlay
+          muted
+          loop
+          src="/video/snippet-quick.mov"
+        />
+      )}
+    />
+  );
+}
diff --git a/konfigthis.com/src/components/GetSdksInAnyLanguage/GetSdksInAnyLanguage.tsx b/konfigthis.com/src/components/GetSdksInAnyLanguage/GetSdksInAnyLanguage.tsx
@@ -17,7 +17,7 @@ import csharp from "../../../public/csharp.png";
 import ruby from "../../../public/ruby.png";
 import swift from "../../../public/swift.png";
 import php from "../../../public/php.png";
-import Image from "@/components/image";
+import Image from "@/components/Image";
 
 export function GetSdksInAnyLanguage() {
   return (