docs: homepage tweak

kirchoni · Jun 29, 2024 · 9c5bfc4 · 9c5bfc4
1 parent 9ca857c
commit 9c5bfc4
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 11 deletions.
diff --git a/apps/docs/design/katana/components/buttons/button.scss b/apps/docs/design/katana/components/buttons/button.scss
@@ -20,9 +20,13 @@
     border-style: solid;
 
     @include variant(cta) {
-      color: swatch(emphasis);
+      // color: swatch(emphasis);
+      color: #000;
+
       position: relative;
-      background-color: swatch(background);
+      // background-color: swatch(background);
+      background-color: transparent;
+
       background-clip: padding-box;
       padding: spacing(md) spacing(lg);
       transition: background-color 0.1s ease-in, color 0.1s ease-out;
@@ -37,9 +41,44 @@
         z-index: -2;
         background: var(--color-gradient);
         background-clip: padding-box;
-        filter: blur(24px);
-        transition: background-position 0.1s ease-in;
+        filter: blur(var(--blur, 24px));
+        background-position: 100%;
+        transition: transform 0.3s ease-in-out;
+      }
+
+      &::after {
+        content: "";
+        position: absolute;
+        top: -1px;
+        left: -1px;
+        width: calc(100% + 2px);
+        height: calc(100% + 2px);
+        z-index: -1;
+        border-radius: spacing(sm);
+        background-clip: padding-box;
+        background-position: 100%;
+
+        background: var(--color-gradient);
+        transition: background-position 1s ease-in;
+      }
+
+      @include hover {
+        // --angle: 270deg;
+        &::before {
+          // --angle: 270deg;
+          transform: scale(1.3);
+        }
       }
+    }
+
+    @include variant("secondary") {
+      --angle: 207deg;
+      color: swatch(emphasis);
+      position: relative;
+      background-color: swatch(background);
+      background-clip: padding-box;
+      padding: spacing(md) spacing(lg);
+      transition: background-color 0.1s ease-in, color 0.1s ease-out;
 
       &::after {
         content: "";
@@ -52,16 +91,18 @@
         border-radius: spacing(sm);
         background-clip: padding-box;
         background: var(--color-gradient);
+        transition: all .4s ease-in-out;
       }
 
       @include hover {
         background-color: transparent;
         color: #000;
-
-        &::before,
-        &::after {
-          background-position: 270deg;
-        }
+        --color-gradient: linear-gradient(
+          7deg,
+          #{swatch(brand)} 0%,
+          rgba(95, 154, 142, 1) 90%,
+          rgba(0, 255, 203, 1) 100%
+        );
       }
     }
 

diff --git a/apps/docs/src/app/(root)/page.tsx b/apps/docs/src/app/(root)/page.tsx
@@ -29,14 +29,23 @@ export default function Home() {
                 faster and more consistent user experiences in your web apps.
               </Text>
               <div className="mt-10 flex flex-col gap-md items-center">
-                <div className="flex gap-sm justify-center">
+                <div className="flex gap-lg justify-center">
                   <Button
                     variant="cta"
                     as={Link}
+                    className="w-[137px]"
+                    href="design/material-you"
+                  >
+                    Explore
+                  </Button>
+                  <Button
+                    variant="secondary"
+                    as={Link}
                     target="_blank"
+                    className="w-[137px]"
                     href="https://github.com/kspeyanski/baka"
                   >
-                    Explore
+                    Source Code
                   </Button>
                 </div>
                 <div>