feat: animated pricingcards section cta

ably · Sep 27, 2024 · de54d97 · de54d97
1 parent 8e2d1d8
commit de54d97
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 8 deletions.
diff --git a/src/core/Pricing/PricingCards.stories.tsx b/src/core/Pricing/PricingCards.stories.tsx
@@ -18,7 +18,7 @@ export default {
 
 const Template = ({ data, theme = "dark", delimiter }: PricingCardsProps) => (
   <div
-    className={`${theme === "dark" ? "bg-gradient-to-r from-blue-500 to-pink-500" : ""} p-32`}
+    className={`${theme === "dark" ? "bg-gradient-to-r from-blue-800 to-pink-800" : ""} p-32`}
   >
     <PricingCards data={data} theme={theme} delimiter={delimiter} />
   </div>

diff --git a/src/core/Pricing/PricingCards.tsx b/src/core/Pricing/PricingCards.tsx
@@ -139,19 +139,22 @@ const PricingCards = ({
                       )}
                     </div>
                     {cta ? (
-                      <div className="flex items-center h-40">
-                        <div
-                          className={`hidden sm:block sm:group-hover:hidden leading-6 tracking-widen-0.15 font-light text-p3 ${t("text-neutral-800")}`}
-                        >
-                          •••
-                        </div>
+                      <div className="relative flex items-center h-40">
                         <FeaturedLink
                           url={cta.url}
-                          additionalCSS={`sm:hidden group-hover:block font-medium ui-text-p3 ${t("text-neutral-500")} hover:${t("text-neutral-000")} transition-colors cursor-pointer`}
+                          additionalCSS={`absolute sm:-translate-x-96 sm:opacity-0 sm:group-hover:translate-x-0 duration-300 delay-0 sm:group-hover:delay-100 sm:group-hover:opacity-100 transition-[transform,opacity] font-medium ui-text-p3 ${t("text-neutral-500")} hover:${t("text-neutral-000")}`}
                           onClick={cta.onClick}
+                          iconColor={t(
+                            listItemColors?.foreground ?? "text-white",
+                          )}
                         >
                           {cta.text}
                         </FeaturedLink>
+                        <div
+                          className={`absolute sm:translate-x-0 sm:opacity-100 sm:group-hover:translate-x-96 sm:group-hover:opacity-0 duration-200 delay-100 sm:group-hover:delay-0 transition-[transform,opacity] leading-6 tracking-widen-0.15 font-light text-p3 ${t("text-neutral-800")}`}
+                        >
+                          •••
+                        </div>
                       </div>
                     ) : null}
                   </div>