fixed heading

konfig-dev · Oct 20, 2023 · 9c38936 · 9c38936
1 parent 59cdc18
commit 9c38936
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 26 deletions.
diff --git a/konfigthis.com/public/portal-logo-light.png b/konfigthis.com/public/portal-logo-light.png
diff --git a/konfigthis.com/src/components/Cta.tsx b/konfigthis.com/src/components/Cta.tsx
@@ -62,7 +62,7 @@ const useStyles = createStyles((theme) => ({
 export function Cta() {
   const { classes } = useStyles();
   return (
-    <Container>
+    <Container className="px-4 sm:px-12">
       <div
         className={clsx(
           classes.wrapper,
@@ -71,7 +71,7 @@ export function Cta() {
       >
         <div className={classes.body}>
           <Title className={classes.title}>
-            Generate SDKs, Docs, Demos, and Tutorials today
+            Generate SDKs, Docs, Demos & Tutorials today
           </Title>
           <Text fz="sm" c="dimmed">
             Impress your customers with an amazing onboarding experience

diff --git a/konfigthis.com/src/components/EnsureHighQualitySdks/EnsureHighQualitySdks.tsx b/konfigthis.com/src/components/EnsureHighQualitySdks/EnsureHighQualitySdks.tsx
@@ -158,7 +158,7 @@ export function EnsureHighQualitySdks() {
                 SDKs
               </Title>
               <div className={classes.textSize}>
-                <ul className="list-disc list-insideist-outside space-y-2">
+                <ul className="list-disc list-inside space-y-2">
                   <li>
                     Before any errors reaches your customers,{" Konfig's "}
                     <Anchor

diff --git a/konfigthis.com/src/components/HeaderSimple/HeaderSimple.tsx b/konfigthis.com/src/components/HeaderSimple/HeaderSimple.tsx
@@ -6,11 +6,15 @@ import {
   Group,
   Anchor,
   Button,
+  UnstyledButton,
+  Menu,
+  Burger,
 } from "@mantine/core";
-import logo from "./logo.png";
+import logo from "../../../public/portal-logo-light.png";
 import Image from "@/components/Image";
 import { useSubtleLinkStyles } from "@/utils/use-subtle-link-styles";
-import { IconCalendarEvent } from "@tabler/icons-react";
+import { IconCalendar, IconCalendarEvent } from "@tabler/icons-react";
+import { useState } from "react";
 
 const useStyles = createStyles((theme) => ({
   header: {
@@ -67,44 +71,66 @@ const useStyles = createStyles((theme) => ({
 
 export function HeaderSimple() {
   const { classes } = useStyles();
-  const styles = useSubtleLinkStyles();
+  const [opened, setOpened] = useState(false);
 
   return (
-    <Header height={60}>
+    <div className="h-16 fixed w-full bg-white/95 backdrop-blur-md  z-50">
       <Container size="lg" className={classes.header}>
         <Image height={40} src={logo} placeholder="empty" alt="Konfig Logo" />
-        <Group spacing="xs">
-          <Anchor
+        <Menu
+          opened={opened}
+          onChange={setOpened}
+          position="bottom-end"
+          shadow="md"
+          width={200}
+        >
+          <Menu.Target>
+            <Burger className="sm:hidden" opened={opened} />
+          </Menu.Target>
+          <Menu.Dropdown>
+            <a target="_blank" href="https://konfigthis.com/schedule-demo">
+              <Menu.Item
+                className="font-bold"
+                icon={<IconCalendar size={16} />}
+              >
+                Book a Demo
+              </Menu.Item>
+            </a>
+            <a target="_blank" href="/docs">
+              <Menu.Item className="text-gray-700">Documentation</Menu.Item>
+            </a>
+            <a target="_blank" href="/blog">
+              <Menu.Item className=" text-gray-700">Blog</Menu.Item>
+            </a>
+          </Menu.Dropdown>
+        </Menu>
+        <Group className="hidden sm:flex" spacing="md">
+          <a
+            className="text-gray-600 hover:text-black"
             target="_blank"
-            component="a"
-            className={styles.classes.subtleLink}
-            unstyled
-            variant="subtle"
             href="/blog"
           >
             Blog
-          </Anchor>
-          <Anchor
-            className={styles.classes.subtleLink}
-            unstyled
+          </a>
+          <a
+            className="text-gray-600 hover:text-black"
             target="_blank"
-            component="a"
             href="/docs"
           >
             Documentation
-          </Anchor>
+          </a>
           <Button
-            size="xs"
-            target="_blank"
             color="dark"
             component="a"
+            radius="lg"
+            target="_blank"
             href="https://konfigthis.com/schedule-demo"
             leftIcon={<IconCalendarEvent size="0.9rem" />}
           >
             Book a demo
           </Button>
         </Group>
       </Container>
-    </Header>
+    </div>
   );
 }
diff --git a/konfigthis.com/src/components/HeroBullets/HeroBullets.tsx b/konfigthis.com/src/components/HeroBullets/HeroBullets.tsx
@@ -109,7 +109,7 @@ export function HeroBullets() {
   const os = useOs();
   const isDesktop = os === "linux" || os === "windows" || os === "macos";
   return (
-    <div>
+    <div className="pt-16">
       <Container className={classes.wrapper} size={1400}>
         <div className={classes.inner}>
           <Title className={classes.title}>
@@ -122,13 +122,13 @@ export function HeroBullets() {
             >
               Effortlessly Generate{" "}
             </Text>
-            SDKs, Docs, Demos, and Tutorials for your REST API
+            SDKs, Docs, Demos & Tutorials for your REST API
           </Title>
 
           <Container p={0} size={700}>
             <Text size="lg" color="dimmed" className={classes.description}>
               With Konfig, onboarding external developers has never been easier.
-              Easily publish SDKs, Docs, Demos, and Tutorials in all major
+              Easily publish SDKs, Docs, Demos & Tutorials in all major
               languages so your customers can quickly integrate your API.
             </Text>
           </Container>
@@ -147,6 +147,7 @@ export function HeroBullets() {
                 target="_blank"
                 component="a"
                 variant="default"
+                radius="xl"
                 href="https://konfigthis.com/schedule-demo"
                 leftIcon={<IconCalendarEvent />}
                 className={clsx(
@@ -166,6 +167,7 @@ export function HeroBullets() {
                 size="lg"
                 variant="outline"
                 color="dark"
+                radius="xl"
                 className={clsx(
                   classes.control,
                   "relative leading-none divide-x"
@@ -177,6 +179,7 @@ export function HeroBullets() {
               <Button.Group>
                 <Button
                   fullWidth
+                  radius="xl"
                   component="a"
                   href="https://konfigthis.com/docs/getting-started/openapi-specification"
                   target="_blank"
@@ -190,6 +193,7 @@ export function HeroBullets() {
                 </Button>
                 <Button
                   fullWidth
+                  radius="xl"
                   component="a"
                   href="https://konfigthis.com/docs/getting-started/postman-collections"
                   target="_blank"
@@ -206,7 +210,12 @@ export function HeroBullets() {
           </div>
         </div>
         <Box className="my-8">
-          <AspectRatio className="shadow-lg" mx="auto" maw={600} ratio={16 / 9}>
+          <AspectRatio
+            className="rounded-xl overflow-hidden shadow-lg"
+            mx="auto"
+            maw={600}
+            ratio={16 / 9}
+          >
             <iframe
               src="https://www.youtube.com/embed/_rbFV2RmAc4"
               title="YouTube video player"