save

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

@@ -153,6 +153,7 @@ export function EnsureHighQualitySdks() {
               </Title>
               <Stack className={classes.textSize} spacing="xs">
                 <Text>
+                  Before any errors reaches your customers,
                   {"Konfig's"}{" "}
                   <Anchor
                     className={classes.link}
@@ -161,8 +162,7 @@ export function EnsureHighQualitySdks() {
                   >
                     linter
                   </Anchor>{" "}
-                  catches errors in your OpenAPI Specification before they can
-                  reach your customers and cause confusion.
+                  identifies and rectifies them in your OpenAPI Specification.
                 </Text>
                 <Text>
                   Konfig writes test cases for every SDK to ensure API updates

konfigthis.com/src/components/GeneratedSdkSnippets.tsx

@@ -4,29 +4,30 @@ import { LightSectionTitleHighlight } from "./LightSectionTitleHighlight";
 export function GeneratedSdkSnippets() {
   return (
     <ProductSection
-      noTopPadding
+      graphicBottom
       parent="Documentation"
       Section={() => (
         <>
-          Dynamically Generated{" "}
+          User Generated{" "}
           <LightSectionTitleHighlight>
             SDK Code Snippets
           </LightSectionTitleHighlight>
         </>
       )}
       Description={() => (
         <>
-          Quickly onboard in any language. Show customers the latest code they
-          need, directly in your documentation without having to manually update
-          code snippets.
+          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.mov"
+          src="/video/snippet-quick.mov"
         />
       )}
     />

konfigthis.com/src/components/GetSdksWithZeroEffort/GetSdksWithZeroEffort.tsx

@@ -338,13 +338,13 @@ export function GetSdksWithZeroEffort() {
                   most popular languages with no further work from you.
                 </Text>
                 <Text>
-                  Any time you publish a change to your spec, Konfig{" "}
+                  Whenever you update your spec, Konfig{" "}
                   <Anchor
                     className={classes.link}
                     target="_blank"
                     href="https://konfigthis.com/docs/tutorials/automate-sdk-updates"
                   >
-                    automatically update and republish all of your SDKs
+                    instantly republishes all your SDKs—keeping them current
                   </Anchor>
                   .
                 </Text>

konfigthis.com/src/components/HeroBullets/HeroBullets.tsx

@@ -120,14 +120,14 @@ export function HeroBullets() {
               className={classes.highlight}
               inherit
             >
-              Generate{" "}
+              Effortlessly Generate{" "}
             </Text>
             SDKs, Docs, and Demos for your REST API
           </Title>
 
           <Container p={0} size={700}>
             <Text size="lg" color="dimmed" className={classes.description}>
-              Konfig makes it easy for you to onboard external developers.
+              With Konfig, onboarding external developers has never been easier.
               Easily publish SDKs, Docs, and Demos in all major languages so
               your customers can quickly integrate your API.
             </Text>

konfigthis.com/src/components/ProductSection.tsx

@@ -34,13 +34,13 @@ export function ProductSection({
   Section,
   Description,
   Visual,
-  noTopPadding,
+  graphicBottom,
 }: {
   parent: string;
   Section: () => ReactElement;
   Description: () => ReactElement;
   Visual: () => ReactElement;
-  noTopPadding?: boolean;
+  graphicBottom?: boolean;
 }) {
   const { classes, cx } = useSectionStyles();
   const {
@@ -51,15 +51,19 @@ export function ProductSection({
     <Box className={"my-[200px]"}>
       <Box className="max-w-[1100px] relative m-auto">
         <div className={"flex flex-col lg:flex-row gap-0 lg:gap-12"}>
-          <Box className={cx("text-gray-800", classes.textSection)}>
+          <Box className={cx("text-gray-800 relative", classes.textSection)}>
             <div
               className={cx(
                 classes.graphicLayer,
                 texture,
-                "right-0 top-[-50px] w-200 h-200"
+                "right-0 w-200 h-200",
+                {
+                  ["top-[-50px]"]: !graphicBottom,
+                  ["bottom-[-25px]"]: graphicBottom,
+                }
               )}
             />
-            <Box className={classes.textLayer}>
+            <Box className={cx(classes.textLayer)}>
               <Title className="text-blue-900" order={6}>
                 {parent}
               </Title>

konfigthis.com/src/components/SdkFeatures.tsx

@@ -74,30 +74,30 @@ export function SdkFeatures() {
             <Feature
               gradientAngle={50}
               title="Documentation"
-              description="All your SDKs come with branded and friendly README.md files that makes it easy for developers to get started."
+              description="Every SDK you generate features a branded and user-friendly README.md, simplifying the onboarding process for developers."
               Icon={IconBook}
               link={{
-                label: "See example README.md",
+                label: "Explore a sample README.md",
                 href: "https://github.com/humanloop/humanloop-node#readme",
               }}
             />
             <Feature
               gradientAngle={230}
               title="Ergonomic"
-              description="We make sure your SDKs are easy to use and follow the best practices of the language they are written in."
+              description="Our SDKs are not just easy to use; they're crafted to adhere to the best practices of their respective programming languages."
               Icon={IconMouse}
               link={{
-                label: "See example code snippet",
+                label: "Dive into a code snippet example",
                 href: "https://github.com/passiv/snaptrade-sdks/tree/master/sdks/typescript#getting-started",
               }}
             />
             <Feature
               gradientAngle={160}
               title="Customization"
-              description="We made it easy to add custom code to your SDKs so you can add features like streaming, request signing, or polling."
+              description="With Konfig, integrating custom code into your SDKs is a breeze. Enhance your SDKs with features such as streaming, request signing, and polling with ease."
               Icon={IconCode}
               link={{
-                label: "Read the documentation",
+                label: "Discover more in our documentation",
                 href: "https://konfigthis.com/docs/custom-sdks",
               }}
             />

konfigthis.com/src/components/UpdatingDocs.tsx

@@ -3,13 +3,17 @@ import Image from "./Image";
 import { ProductSection } from "./ProductSection";
 import { LightSectionAnchor } from "./LightSectionAnchor";
 import { LightSectionTitleHighlight } from "./LightSectionTitleHighlight";
+import { useIntersection, useWindowScroll } from "@mantine/hooks";
+import { clsx } from "@mantine/core";
+import { useRef } from "react";
 
 export function UpdatingDocs() {
   return (
     <ProductSection
       parent="Documentation"
       Section={() => (
         <>
+          Beautiful{" "}
           <LightSectionTitleHighlight>
             API Docs & References
           </LightSectionTitleHighlight>{" "}
@@ -18,21 +22,46 @@ export function UpdatingDocs() {
       )}
       Description={() => (
         <>
-          Ensure your docs and SDKs are always in sync with a single source of
-          truth. Any time you publish a change to your spec, Konfig{" "}
+          Maintain seamless consistency between your docs and SDKs, anchored by
+          a source of truth. Any time you publish a change to your spec, Konfig{" "}
           <LightSectionAnchor href="https://konfigthis.com/docs/tutorials/automate-sdk-updates">
             automatically updates your docs
           </LightSectionAnchor>
           .
         </>
       )}
-      Visual={() => (
-        <Image
-          className="w-full lg:w-3/5 shadow-lg rounded-xl"
-          alt="API Documentation"
-          src={docs}
-        />
+      Visual={Visual}
+    />
+  );
+}
+
+function Visual() {
+  const ref = useRef<HTMLImageElement>(null);
+  const inView = useIsInView({ ref });
+  return (
+    // eslint-disable-next-line @next/next/no-img-element
+    <img
+      ref={ref}
+      className={clsx(
+        {
+          ["opacity-100 translate-x-0 blur-0"]: inView,
+        },
+        "w-full lg:w-3/5 h-[325px] sm:h-auto  rounded-xl shadow-xl transition duration-700 ease-in-out opacity-0 blur-md translate-x-full"
       )}
+      style={{ objectFit: "cover" }}
+      alt="API Documentation"
+      src="/docs.png"
     />
   );
 }
+
+function useIsInView({ ref }: { ref: React.RefObject<HTMLElement> }): boolean {
+  useWindowScroll();
+  if (typeof window === undefined) return false;
+  if (!ref.current) return false;
+  const windowBottom = (window.innerHeight * 2) / 3;
+  const { top, bottom } = ref.current.getBoundingClientRect();
+  console.log("windowBottom", windowBottom);
+  console.log("top", top);
+  return top < windowBottom && bottom > 0;
+}

konfigthis.com/src/pages/index.tsx

@@ -41,7 +41,10 @@ export default function Home() {
           <EnsureHighQualitySdks />
           <SdkFeatures />
         </Box>
-        <div className="px-16 bg-gradient-to-b from-[rgb(255,255,255)] to-[rgb(255,255,255)]  overflow-hidden">
+        <div
+          //  className="px-16 bg-gradient-to-b from-[rgb(255,255,255)] to-[rgb(255,255,255)] overflow-hidden"
+          className="px-16 bg-gray-50 overflow-hidden"
+        >
           <UpdatingDocs />
           <GeneratedSdkSnippets />
         </div>