docs(landing): github stars animation in hero

refinedev · Nov 9, 2023 · fc784ab · fc784ab
1 parent e9ef1ee
commit fc784ab
Show file tree

Hide file tree

Showing 2 changed files with 113 additions and 39 deletions.
diff --git a/documentation/src/refine-theme/landing-hero-github-stars.tsx b/documentation/src/refine-theme/landing-hero-github-stars.tsx
@@ -14,54 +14,103 @@ export const LandingHeroGithubStars = () => {
             rel="noopener noreferrer"
             className={clsx(
                 "self-start",
-                "py-[7px]",
-                "pl-2",
-                "pr-4",
-                "flex",
-                "gap-2",
-                "items-center",
-                "justify-center",
+                "relative",
                 "rounded-3xl",
-                "border border-solid",
-                "border-gray-200 dark:border-gray-700",
-                "bg-gray-50 dark:bg-gray-900",
-                "dark:bg-landing-hero-github-stars-gradient",
+                "p-px",
                 "hover:no-underline",
+                "w-auto",
+                "bg-gray-200 dark:bg-gray-700",
             )}
         >
-            <OrangeStarIcon
-                style={{
-                    filter: "drop-shadow(0px 0px 3px #FF993330) drop-shadow(0px 0px 6px #FF9933A0) drop-shadow(0px 0px 16px #FF9933A0) drop-shadow(0px 0px 16px #FF9933)",
-                }}
+            <div
+                className={clsx(
+                    "absolute",
+                    "inset-0",
+                    "overflow-hidden",
+                    "rounded-3xl",
+                    "",
+                )}
+            >
+                <div
+                    className={clsx(
+                        "absolute",
+                        "-top-8",
+                        "-left-8",
+                        "animate-github-stars-border",
+                        "w-24",
+                        "h-24",
+                        "rounded-full",
+                        "bg-refine-orange",
+                        "opacity-40",
+                        "blur-xl",
+                    )}
+                />
+            </div>
+            <div
+                className={clsx(
+                    "absolute",
+                    "-left-3",
+                    "-top-3",
+                    "z-[0]",
+                    "w-12",
+                    "h-12",
+                    "blur-lg",
+                    "bg-refine-orange",
+                    "rounded-full",
+                    "opacity-[0.15]",
+                    "animate-github-stars-glow",
+                )}
             />
-            <span
+            <div
                 className={clsx(
-                    "font-normal",
-                    "text-xs",
-                    "text-transparent",
-                    "bg-clip-text",
-                    "bg-landing-hero-github-stars-text-light",
-                    "dark:bg-landing-hero-github-stars-text-dark",
+                    "relative",
+                    "z-[1]",
+                    "rounded-[23px]",
+                    "py-[7px]",
+                    "pl-2",
+                    "pr-4",
+                    "flex",
+                    "gap-2",
+                    "items-center",
+                    "justify-center",
+                    "bg-gray-50 dark:bg-gray-900",
+                    "dark:bg-landing-hero-github-stars-gradient",
                 )}
             >
-                <span className={clsx("font-semibold")}>
-                    {loading ? (
-                        <Spinner
-                            className={clsx("w-3.5 h-3.5", "inline")}
-                            wrapperProps={{
-                                className: clsx(
-                                    "h-3.5",
-                                    "inline-block",
-                                    "w-[4ch]",
-                                ),
-                            }}
-                        />
-                    ) : (
-                        <span>{githubStarCountText}</span>
+                <OrangeStarIcon
+                    style={{
+                        filter: "drop-shadow(0px 0px 3px #FF993330) drop-shadow(0px 0px 6px #FF9933A0) drop-shadow(0px 0px 16px #FF9933A0) drop-shadow(0px 0px 16px #FF9933)",
+                    }}
+                />
+                <span
+                    className={clsx(
+                        "font-normal",
+                        "text-xs",
+                        "text-transparent",
+                        "bg-clip-text",
+                        "bg-landing-hero-github-stars-text-light",
+                        "dark:bg-landing-hero-github-stars-text-dark",
                     )}
-                </span>{" "}
-                <span>GitHub stars so far</span>
-            </span>
+                >
+                    <span className={clsx("font-semibold")}>
+                        {loading ? (
+                            <Spinner
+                                className={clsx("w-3.5 h-3.5", "inline")}
+                                wrapperProps={{
+                                    className: clsx(
+                                        "h-3.5",
+                                        "inline-block",
+                                        "w-[4ch]",
+                                    ),
+                                }}
+                            />
+                        ) : (
+                            <span>{githubStarCountText}</span>
+                        )}
+                    </span>{" "}
+                    <span>GitHub stars so far</span>
+                </span>
+            </div>
         </a>
     );
 };
diff --git a/documentation/tailwind.config.js b/documentation/tailwind.config.js
@@ -394,6 +394,7 @@ module.exports = {
                 "landing-sweet-spot-glow-size-lg": "auto auto, 1600px 1600px",
                 "landing-sweet-spot-glow-size-xs": "auto auto, 656px 656px",
                 "wheel-already-invented-size": "100% 1px",
+                "landing-github-stars-border-bg-size": "72px 72px",
             },
             animation: {
                 "spin-slow": "spin 3s linear infinite",
@@ -433,6 +434,10 @@ module.exports = {
                 "wheel-already-invented-reveal":
                     "wheel-already-invented-reveal 0.6s cubic-bezier(.23,.95,.64,1.24) forwards",
                 "showcase-reveal": "showcase-reveal 0.3s ease-in-out forwards",
+                "github-stars-border":
+                    "github-stars-border 10s linear infinite alternate",
+                "github-stars-glow":
+                    "github-stars-glow 10s linear infinite alternate",
             },
             keyframes: {
                 "code-scroll": {
@@ -652,6 +657,26 @@ module.exports = {
                         opacity: 1,
                     },
                 },
+                "github-stars-border": {
+                    "0%": {
+                        transform: "translateX(-72px)",
+                    },
+                    "100%": {
+                        transform: "translateX(216px)",
+                    },
+                },
+
+                "github-stars-glow": {
+                    "0%": {
+                        transform: "translateX(0) scale(0.5)",
+                    },
+                    "50%": {
+                        transform: "translateX(78px) scale(1)",
+                    },
+                    "100%": {
+                        transform: "translateX(156px) scale(0.5)",
+                    },
+                },
             },
         },
         screens: {