Fix animations bug in Firefox. Minor updates to marketing components.

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}

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(
+      className={cn('h-12 rounded-xl px-4 text-base font-semibold', className, {
-        'h-12 rounded-xl px-4 text-base font-semibold transition-all hover:shadow-2xl dark:shadow-primary/30',
+        ['transition-all hover:shadow-2xl dark:shadow-primary/30']:
-        className,
+          props.variant === 'default' || !props.variant,
-      )}
+      })}
       asChild
       ref={ref}
       {...props}

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-in fade-in zoom-in-90 slide-in-from-top-36']: animate,
-              animate,
           },
         )}
       >

packages/ui/src/makerkit/marketing/secondary-hero.tsx

@@ -23,11 +23,7 @@ export const SecondaryHero = forwardRef<HTMLDivElement, SecondaryHeroProps>(
         )}
         {...props}
       >
-        {pill && (
+        {pill}
-          <div className="delay-300 duration-700 animate-in fade-in">
-            {pill}
-          </div>
-        )}
 
         <div className="flex flex-col">
           <Heading level={2} className="tracking-tighter">