add graphics to our products

konfig-dev · Oct 20, 2023 · 6d01d05 · 6d01d05
1 parent 606f444
commit 6d01d05
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 16 deletions.
diff --git a/konfigthis.com/src/components/GetSdksWithZeroEffort/GetSdksWithZeroEffort.tsx b/konfigthis.com/src/components/GetSdksWithZeroEffort/GetSdksWithZeroEffort.tsx
@@ -258,6 +258,9 @@ export const useSectionStyles = createStyles((theme) => ({
   triangleBottomLeft: {
     clipPath: "polygon(0% 100%, 0% 0%, 100% 100%)",
   },
+  triangleTopLeft: {
+    clipPath: "polygon(0% 0%, 100% 0%, 0% 100%)",
+  },
   link: {
     color: theme.white,
     fontWeight: 600,

diff --git a/konfigthis.com/src/components/OurProducts.tsx b/konfigthis.com/src/components/OurProducts.tsx
@@ -1,3 +1,4 @@
+import { useGraphicStyles } from "@/utils/use-graphic-styles";
 import { UnstyledButton, clsx } from "@mantine/core";
 import {
   IconBook2,
@@ -16,20 +17,23 @@ export function OurProducts() {
           product="SDKs"
           description="Publish SDKs in the most popular languages"
           className="bg-gradient-to-br hover:bg-gradient-to-bl"
+          graphicClassName="-top-10 -right-5 xl:-left-5 [clip-path:polygon(0%_0%,_100%_0%,_0%_100%)]"
           Icon={IconCode}
           scrollTo="sdks"
         />
         <Product
           product="Docs"
           description="Generate beautiful documentation for your API"
           className="bg-gradient-to-b hover:bg-gradient-to-br"
+          graphicClassName="xl:-top-10 xl:right-1/2 xl:left-auto xl:translate-x-1/2  -bottom-5 -left-5"
           Icon={IconBook2}
           scrollTo="docs"
         />
         <Product
           product="Demos & Tutorials"
           description="Build engaging demos and tutorials for your API"
           className="bg-gradient-to-bl hover:bg-gradient-to-br"
+          graphicClassName="-bottom-5 -right-5 xl:-top-10 rounded-full"
           Icon={IconTerminal2}
           scrollTo="demos"
         />
@@ -44,29 +48,43 @@ function Product({
   className,
   scrollTo,
   Icon,
+  graphicClassName,
 }: {
   product: string;
   description: string;
   className: string;
+  graphicClassName: string;
   scrollTo: string;
   Icon: (props: TablerIconsProps) => JSX.Element;
 }) {
+  const {
+    classes: { texture },
+  } = useGraphicStyles({})();
   return (
-    <UnstyledButton
-      onClick={() => scrollIntoView(scrollTo)}
-      className={clsx(
-        className,
-        "shadow-lg hover:shadow-xl",
-        "from-white to-gray-50 hover:to-gray-100 p-8 w-full xl:w-80 group rounded-xl border-solid border-gray-100 transition-all hover:scale-[1.01] bg-white"
-      )}
-    >
-      <Icon className="text-gray-300 mb-2" />
-      <div className="flex transition-all flex-row gap-2 items-center group-hover:gap-4">
-        <div className="font-semibold text-2xl">{product}</div>
-        <IconChevronRight className="text-gray-300 " />
-      </div>
-      <div className="text-gray-600 mt-4">{description}</div>
-    </UnstyledButton>
+    <div className="relative">
+      <UnstyledButton
+        onClick={() => scrollIntoView(scrollTo)}
+        className={clsx(
+          className,
+          "shadow-lg hover:shadow-xl",
+          "z-10 relative from-white to-gray-50 hover:to-gray-100 p-8 w-full xl:w-80 group rounded-xl border-solid border-gray-100 transition-all hover:scale-[1.01] bg-white"
+        )}
+      >
+        <Icon className="text-gray-300 mb-2" />
+        <div className="flex transition-all flex-row gap-2 items-center group-hover:gap-4">
+          <div className="font-semibold text-2xl">{product}</div>
+          <IconChevronRight className="text-gray-300 " />
+        </div>
+        <div className="text-gray-600 mt-4">{description}</div>
+      </UnstyledButton>
+      <div
+        className={clsx(
+          texture,
+          graphicClassName,
+          "w-[100px] h-[100px] absolute z-0"
+        )}
+      />
+    </div>
   );
 }
 
@@ -76,8 +94,10 @@ function Product({
  */
 function scrollIntoView(id: string) {
   const element = document.getElementById(id);
-  console.log(element);
+
   if (element) {
+    // set URL to include hash
+    window.history.pushState({}, "", `#${id}`);
     element.scrollIntoView({ behavior: "smooth", block: "start" });
   }
 }