feat(docs): improve button design

refinedev · Nov 29, 2024 · 9324d40 · 9324d40
1 parent 995bb69
commit 9324d40
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 5 deletions.
diff --git a/documentation/src/pages/ai/index.tsx b/documentation/src/pages/ai/index.tsx
@@ -357,6 +357,7 @@ const JoinTheWaitlistButton = (props: CommonSectionProps) => {
       target="_blank"
       rel="noreferrer"
       className={clsx(
+        "relative",
         "block",
         "text-inherit",
         "no-underline",
@@ -374,15 +375,14 @@ const JoinTheWaitlistButton = (props: CommonSectionProps) => {
           "items-center",
           "justify-center",
           "rounded-full",
-          "p-px",
+          "p-[2px]",
           "overflow-hidden",
           "border border-transparent",
         )}
       >
         <div
           className={clsx(
             "w-[300px] h-[300px]",
-            "z-[1]",
             "p-px",
             "absolute",
             "dark:bg-join-ai-waitlist-button-border-dark",

diff --git a/documentation/tailwind.config.js b/documentation/tailwind.config.js
@@ -530,14 +530,14 @@ module.exports = {
                 )`,
         "join-ai-waitlist-button-border-light": `conic-gradient(
                   from 45deg at 50% 50%,
-                    #bbbcff45,
                     #bbbcff45,
                     #4849FF,
-                    #bbbcff45,
+                    #4849FF,  
                     #bbbcff45,
                     #bbbcff45,
                     #4849FF,
-                    #bbbcff45,
+                    #4849FF,
+                    #bbbcff45,       
                     #bbbcff45
         )`,
         "refine-ai-page-bg-dark": [
@@ -624,6 +624,10 @@ module.exports = {
         "new-badge-border": "new-badge-border 4s linear infinite",
         reveal: "reveal 0.3s ease-in-out forwards",
         "progress-fill": "progressFill 1s linear 1 forwards",
+        "join-ai-waitlist-button-border-shadow-left":
+          "join-ai-waitlist-button-border-shadow-left 4s linear infinite",
+        "join-ai-waitlist-button-border-shadow-right":
+          "join-ai-waitlist-button-border-shadow-right 4s linear ease-in-out reverse",
       },
       keyframes: {
         progressFill: {