new landing page

konfigthis.com/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

konfigthis.com/.gitignore

@@ -0,0 +1,35 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

konfigthis.com/.node-version

@@ -0,0 +1 @@
+16.19.0

konfigthis.com/README.md

@@ -0,0 +1,38 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
+
+[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
+
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

konfigthis.com/next.config.js

@@ -0,0 +1,9 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  images: {
+    unoptimized: true,
+  },
+};
+
+module.exports = nextConfig;

konfigthis.com/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "konfig-demo-product-landing-page",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.11.0",
+    "@emotion/server": "^11.11.0",
+    "@mantine/core": "^6.0.13",
+    "@mantine/hooks": "^6.0.13",
+    "@mantine/next": "^6.0.13",
+    "@tabler/icons-react": "^2.20.0",
+    "@types/node": "20.2.5",
+    "@types/react": "18.2.7",
+    "@types/react-dom": "18.2.4",
+    "eslint": "8.41.0",
+    "eslint-config-next": "13.4.4",
+    "next": "13.4.4",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "reactflow": "^11.7.4",
+    "typescript": "5.0.4"
+  }
+}

konfigthis.com/src/components/Cta.tsx

@@ -0,0 +1,102 @@
+import {
+  createStyles,
+  Text,
+  Title,
+  TextInput,
+  Button,
+  Image,
+  rem,
+  Container,
+} from "@mantine/core";
+import { IconCalendarEvent } from "@tabler/icons-react";
+
+const useStyles = createStyles((theme) => ({
+  wrapper: {
+    display: "flex",
+    alignItems: "center",
+    padding: `calc(${theme.spacing.xl} * 2)`,
+    borderRadius: theme.radius.md,
+    backgroundColor:
+      theme.colorScheme === "dark" ? theme.colors.dark[8] : theme.white,
+    border: `${rem(1)} solid ${
+      theme.colorScheme === "dark" ? theme.colors.dark[8] : theme.colors.gray[3]
+    }`,
+
+    [theme.fn.smallerThan("sm")]: {
+      flexDirection: "column-reverse",
+      padding: theme.spacing.xl,
+    },
+  },
+
+  image: {
+    maxWidth: "40%",
+
+    [theme.fn.smallerThan("sm")]: {
+      maxWidth: "100%",
+    },
+  },
+
+  body: {
+    paddingRight: `calc(${theme.spacing.xl} * 4)`,
+
+    [theme.fn.smallerThan("sm")]: {
+      paddingRight: 0,
+      marginTop: theme.spacing.xl,
+    },
+  },
+
+  title: {
+    color: theme.colorScheme === "dark" ? theme.white : theme.black,
+    fontFamily: `Greycliff CF, ${theme.fontFamily}`,
+    lineHeight: 1,
+    marginBottom: theme.spacing.md,
+  },
+
+  controls: {
+    display: "flex",
+    marginTop: theme.spacing.xl,
+  },
+
+  inputWrapper: {
+    width: "100%",
+    flex: "1",
+  },
+
+  input: {
+    borderTopRightRadius: 0,
+    borderBottomRightRadius: 0,
+    borderRight: 0,
+  },
+
+  control: {},
+}));
+
+export function Cta() {
+  const { classes } = useStyles();
+  return (
+    <Container>
+      <div className={classes.wrapper}>
+        <div className={classes.body}>
+          <Title className={classes.title}>Generate SDKs today.</Title>
+          <Text fz="sm" c="dimmed">
+            Impress your customers with high quality SDKs today.
+          </Text>
+
+          <div className={classes.controls}>
+            <Button
+              className={classes.control}
+              size="lg"
+              target="_blank"
+              color="dark"
+              component="a"
+              href="https://calendly.com/dylan-konfig/meet"
+              leftIcon={<IconCalendarEvent />}
+            >
+              Book a demo
+            </Button>
+          </div>
+        </div>
+      </div>
+    </Container>
+  );
+}

konfigthis.com/src/components/EnsureHighQualitySdks/EnsureHighQualitySdks.tsx

@@ -0,0 +1,152 @@
+import {
+  Text,
+  Col,
+  Container,
+  Grid,
+  Title,
+  rem,
+  Box,
+  Stack,
+  ThemeIcon,
+  Paper,
+} from "@mantine/core";
+import { IconCertificate, IconTestPipe } from "@tabler/icons-react";
+import ReactFlow, { Position, Node, Edge } from "reactflow";
+import Image from "next/image";
+
+const initialNodes: Node[] = [
+  {
+    id: "validation",
+    position: { x: 0, y: 0 },
+    data: {
+      label: (
+        <>
+          <Title order={6}>Validate</Title>
+        </>
+      ),
+    },
+    sourcePosition: Position.Right,
+    targetPosition: Position.Bottom,
+  },
+  {
+    id: "testing",
+    position: { x: 200, y: 0 },
+    data: {
+      label: (
+        <>
+          <Title order={6}>Test</Title>
+        </>
+      ),
+    },
+    sourcePosition: Position.Right,
+    targetPosition: Position.Left,
+  },
+  {
+    id: "publish",
+    position: { x: 400, y: 0 },
+    data: {
+      label: (
+        <>
+          <Title order={6}>Publish</Title>
+        </>
+      ),
+    },
+    sourcePosition: Position.Bottom,
+    targetPosition: Position.Left,
+  },
+];
+const initialEdges: Edge[] = [
+  {
+    id: "validation-testing",
+    source: "validation",
+    target: "testing",
+    animated: true,
+  },
+  {
+    id: "testing-publish",
+    source: "testing",
+    target: "publish",
+    animated: true,
+  },
+  {
+    id: "publish-validate",
+    source: "publish",
+    target: "validation",
+    animated: true,
+    type: "step",
+  },
+];
+
+export function EnsureHighQualitySdks() {
+  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"} proprietary linter 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>
+          </Stack>
+        </Col>
+        <Col span={12} md={7}>
+          <Paper
+            radius="md"
+            withBorder
+            shadow="lg"
+            h={{ base: rem(300), sm: "100%" }}
+          >
+            <ReactFlow
+              fitView
+              preventScrolling={false}
+              elementsSelectable={false}
+              zoomOnScroll={false}
+              nodesConnectable={false}
+              draggable={false}
+              nodesDraggable={false}
+              panOnDrag={false}
+              zoomOnPinch={false}
+              proOptions={{ hideAttribution: true }}
+              nodes={initialNodes}
+              edges={initialEdges}
+            ></ReactFlow>
+          </Paper>
+        </Col>
+      </Grid>
+    </Container>
+  );
+}