From 691cad1c0d9ee5076c6225a0d13829c4fbf80787 Mon Sep 17 00:00:00 2001
From: gbuomprisco <giancarlopsk@gmail.com>
Date: Tue, 10 Sep 2024 20:53:18 +0200
Subject: [PATCH] Fix animations bug in Firefox. Minor updates to marketing
 components.

---
 apps/web/app/(marketing)/page.tsx                     | 2 +-
 packages/ui/src/makerkit/marketing/cta-button.tsx     | 8 ++++----
 packages/ui/src/makerkit/marketing/hero.tsx           | 8 +++++---
 packages/ui/src/makerkit/marketing/secondary-hero.tsx | 6 +-----
 4 files changed, 11 insertions(+), 13 deletions(-)

diff --git a/apps/web/app/(marketing)/page.tsx b/apps/web/app/(marketing)/page.tsx
index 7aad64db3..50665141b 100644
--- a/apps/web/app/(marketing)/page.tsx
+++ b/apps/web/app/(marketing)/page.tsx
@@ -47,7 +47,7 @@ function Home() {
           <Image
             priority
             className={
-              'delay-250 rounded-2xl border border-gray-200 duration-1000 ease-out animate-in fade-in zoom-in-50 fill-mode-both dark:border-primary/10'
+              'rounded-2xl border border-gray-200 dark:border-primary/10'
             }
             width={3558}
             height={2222}
diff --git a/packages/ui/src/makerkit/marketing/cta-button.tsx b/packages/ui/src/makerkit/marketing/cta-button.tsx
index e8323a4f1..b0fb5de6e 100644
--- a/packages/ui/src/makerkit/marketing/cta-button.tsx
+++ b/packages/ui/src/makerkit/marketing/cta-button.tsx
@@ -9,10 +9,10 @@ export const CtaButton = forwardRef<
 >(function CtaButtonComponent({ className, children, ...props }, ref) {
   return (
     <Button
-      className={cn(
-        'h-12 rounded-xl px-4 text-base font-semibold transition-all hover:shadow-2xl dark:shadow-primary/30',
-        className,
-      )}
+      className={cn('h-12 rounded-xl px-4 text-base font-semibold', className, {
+        ['transition-all hover:shadow-2xl dark:shadow-primary/30']:
+          props.variant === 'default' || !props.variant,
+      })}
       asChild
       ref={ref}
       {...props}
diff --git a/packages/ui/src/makerkit/marketing/hero.tsx b/packages/ui/src/makerkit/marketing/hero.tsx
index 2c6eeee86..2f4672e23 100644
--- a/packages/ui/src/makerkit/marketing/hero.tsx
+++ b/packages/ui/src/makerkit/marketing/hero.tsx
@@ -26,11 +26,13 @@ export function Hero({
   return (
     <div className={cn('mx-auto flex flex-col space-y-20', className)}>
       <div
+        style={{
+          MozAnimationDuration: '100ms',
+        }}
         className={cn(
-          'mx-auto flex flex-1 flex-col items-center justify-center md:flex-row',
+          'mx-auto flex flex-1 flex-col items-center justify-center duration-1000 md:flex-row',
           {
-            ['duration-1000 animate-in fade-in zoom-in-90 slide-in-from-top-36']:
-              animate,
+            ['animate-in fade-in zoom-in-90 slide-in-from-top-36']: animate,
           },
         )}
       >
diff --git a/packages/ui/src/makerkit/marketing/secondary-hero.tsx b/packages/ui/src/makerkit/marketing/secondary-hero.tsx
index 3192bcca4..c5c3b0321 100644
--- a/packages/ui/src/makerkit/marketing/secondary-hero.tsx
+++ b/packages/ui/src/makerkit/marketing/secondary-hero.tsx
@@ -23,11 +23,7 @@ export const SecondaryHero = forwardRef<HTMLDivElement, SecondaryHeroProps>(
         )}
         {...props}
       >
-        {pill && (
-          <div className="delay-300 duration-700 animate-in fade-in">
-            {pill}
-          </div>
-        )}
+        {pill}
 
         <div className="flex flex-col">
           <Heading level={2} className="tracking-tighter">