feat(docs): Added lottie animations to the FeatureCards

Other changes:
- added mobile style to Hero component

WIP #707

examples/nextra/src/components/FeatureCards/FeatureCard.tsx

@@ -1,45 +1,75 @@
 import { morfeo } from '@morfeo/css';
-import { DetailedHTMLProps, HTMLAttributes } from 'react';
+import {
+  DetailedHTMLProps,
+  HTMLAttributes,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
 import { Card } from '../Card';
 import clsx from 'clsx';
-import Image from 'next/image';
+import { Player } from '@lottiefiles/react-lottie-player';
 
 const classes = morfeo.css({
   container: {
     minHeight: 'raw:300px',
+    '& svg': {
+      transition: 'fast',
+      filter: 'grayscale(0.3)',
+      opacity: 'medium',
+    },
+    '&:hover svg': {
+      filter: 'grayscale(0)',
+      opacity: 'strong',
+    },
   },
   content: {
     p: 's',
     display: 'flex',
     overflow: 'hidden',
     width: '100',
   },
+  bodyContainer: {
+    flex: '1',
+  },
   title: {
     componentName: 'Typography',
     variant: 'h2',
   },
   column: {
     display: 'flex',
     flexDirection: 'column-reverse',
-    alignContent: 'center',
-    justifyContent: 'flex-end',
-    '& img': {
-      alignSelf: 'center',
-    },
+    alignItems: 'center',
+    justifyContent: 'center',
   },
   row: {
     display: 'flex',
-    flexDirection: 'row',
-    justifyContent: 'flex-start',
+    width: '100',
+    flexDirection: {
+      default: 'column-reverse',
+      md: 'row',
+    },
+    justifyContent: 'space-between',
     overflow: 'hidden',
     position: 'relative',
+    alignItems: 'center',
     zIndex: 'low',
-    '& img': {
-      position: 'absolute',
-      right: 'xs',
-      top: 'xs',
-      zIndex: 'lowest',
+    gap: 's',
+  },
+  rowAnimationContainer: {
+    size: {
+      default: 'raw:150px',
+      md: 'raw:230px',
     },
+    mb: '2xs',
+    '& p': {
+      maxWidth: 'raw:200px',
+    },
+  },
+  columnAnimationContainer: {
+    display: 'flex',
+    size: 'raw:150px',
+    mb: '2xs',
   },
 });
 
@@ -49,28 +79,43 @@ type FeatureCardProps = DetailedHTMLProps<
 > & {
   title: string;
   variant?: 'row' | 'column';
-  imageSrc: string;
+  animationSrc: Player['props']['src'];
 };
 
 export function FeatureCard({
   title,
   variant = 'column',
-  imageSrc,
+  animationSrc,
   ...props
 }: FeatureCardProps) {
+  const [isHover, setIsHover] = useState(false);
+  const playerRef = useRef<Player>(null);
+
+  useEffect(() => {
+    if (isHover) {
+      playerRef.current?.setPlayerDirection(1);
+      playerRef.current?.play();
+      return;
+    }
+    playerRef.current?.setPlayerDirection(-1);
+    playerRef.current?.play();
+  }, [isHover]);
+
   return (
-    <Card {...props} className={classes.container}>
+    <Card
+      {...props}
+      className={classes.container}
+      onMouseEnter={() => setIsHover(true)}
+      onMouseLeave={() => setIsHover(false)}
+    >
       <div className={clsx(classes.content, classes[variant], props.className)}>
-        <div>
+        <div className={classes.bodyContainer}>
           <span className={classes.title}>{title}</span>
           {props.children}
         </div>
-        <Image
-          src={imageSrc}
-          alt={title}
-          height={variant === 'column' ? 100 : 250}
-          width={variant === 'column' ? 100 : 250}
-        />
+        <div className={classes[`${variant}AnimationContainer`]}>
+          <Player src={animationSrc} ref={playerRef} keepLastFrame />
+        </div>
       </div>
     </Card>
   );

examples/nextra/src/components/FeatureCards/FeatureCards.tsx

@@ -1,23 +1,30 @@
 import { morfeo } from '@morfeo/css';
 import { FeatureCard } from './FeatureCard';
+import webExtensionAnimationData from '@/lotties/web_extension.lottie.json';
+import typescriptFirstAnimationData from '@/lotties/typescript_first.lottie.json';
+import themingAnimationData from '@/lotties/theming.lottie.json';
+import buildTimeAnimationData from '@/lotties/build_time.lottie.json';
+import agnosticAnimationData from '@/lotties/agnostic.lottie.json';
 
 const classes = morfeo.css({
   container: {
     gradient:
       'raw:radial-gradient(circle at 50% 40%, #445ac74d 0%, transparent 50%)',
   },
   firstLine: {
+    width: '100',
     display: 'grid',
     gridTemplateColumns: {
       default: '1fr',
-      sm: '1fr 1fr',
-      md: '1fr 1fr 1fr',
+      sm: '1fr 1fr 1fr',
+      md: '1fr 2fr 1fr',
       lg: '1fr 2fr 1fr',
     },
     gap: 's',
     mb: 's',
   },
   secondLine: {
+    width: '100',
     display: 'grid',
     gridTemplateColumns: {
       default: '1fr',
@@ -35,7 +42,7 @@ export function FeatureCards() {
   return (
     <div className={classes.container}>
       <div className={classes.firstLine}>
-        <FeatureCard title="Theming" imageSrc="/theming.svg">
+        <FeatureCard title="Theming" animationSrc={themingAnimationData}>
           <p>
             Build your <span className={classes.gradientText}>constraints</span>
             . With Morfeo you have full control over your design system and your
@@ -45,19 +52,18 @@ export function FeatureCards() {
         <FeatureCard
           title="Fully agnostic"
           variant="row"
-          imageSrc="/agnostic.svg"
+          animationSrc={agnosticAnimationData}
         >
           <p>
-            Next, Remix, React, Svelte?
-            <br />
-            Webpack, Vite, Esbuild?
-            <br /> You name it, we have it!
-            <br />
-            Morfeo runs <span className={classes.gradientText}>everywhere</span>
-            .
+            Next, Remix, React, Svelte? Webpack, Vite, Esbuild? You name it, we
+            have it! Morfeo runs{' '}
+            <span className={classes.gradientText}>everywhere</span>.
           </p>
         </FeatureCard>
-        <FeatureCard title="Typescript first" imageSrc="/ts.svg">
+        <FeatureCard
+          title="Typescript first"
+          animationSrc={typescriptFirstAnimationData}
+        >
           <p>
             Always wear the{' '}
             <span className={classes.gradientText}>protection</span>.
@@ -69,29 +75,23 @@ export function FeatureCards() {
         <FeatureCard
           title="Web extension"
           variant="row"
-          imageSrc="/web_extension.svg"
+          animationSrc={webExtensionAnimationData}
         >
           <p>
-            Components and Design tokens are <br />
-            <span className={classes.gradientText}>automagically</span>{' '}
-            documented.
-            <br />
-            For free. For real!
+            Components and Design tokens are{' '}
+            <span className={classes.gradientText}>automagically</span>
+            documented. For free. For real!
           </p>
         </FeatureCard>
         <FeatureCard
           title="Build time"
           variant="row"
-          imageSrc="/build_time.svg"
+          animationSrc={buildTimeAnimationData}
         >
           <p>
-            DX of CSS-in-JS,
-            <br />
-            minimum possible CSS footprint,
-            <br />
-            without any runtime overhead.
-            <br />
-            Simply <span className={classes.gradientText}>Morfeo</span>.
+            DX of CSS-in-JS, minimum possible CSS footprint, without any runtime
+            overhead. Simply{' '}
+            <span className={classes.gradientText}>Morfeo</span>.
           </p>
         </FeatureCard>
       </div>

examples/nextra/src/components/GetStartedSection/GetStartedSection.tsx

@@ -19,18 +19,28 @@ const classes = morfeo.css({
     lineHeight: 'none',
   },
   buttonContainer: {
+    w: '100',
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
-    gap: 'l',
+    gap: {
+      default: 's',
+      sm: 'l',
+    },
+    flexDirection: {
+      default: 'column',
+      sm: 'row',
+    },
   },
   primaryButton: {
     componentName: 'Button',
     variant: 'primary',
+    minW: '100',
   },
   secondaryButton: {
     componentName: 'Button',
     variant: 'outline',
+    minW: '100',
   },
 });
 

examples/nextra/src/components/Hero/Hero.tsx

@@ -10,28 +10,58 @@ const classes = morfeo.css({
     flexDirection: 'column',
     alignItems: 'center',
     justifyContent: 'center',
-    py: 'raw:10rem',
+    py: {
+      default: '5xl',
+      sm: 'raw:10rem',
+    },
     gradient:
       'raw:radial-gradient(circle at 40% 40%, #445ac74d 0%, transparent 40%),radial-gradient(circle at 60% 60%, rgba(183, 65, 14, 0.4) 0%, transparent 30%)',
   },
   title: {
     componentName: 'Typography',
     variant: 'display',
     color: 'gray.lightest',
-    fontSize: '4xl',
+    fontSize: {
+      default: '3xl',
+      sm: '4xl',
+    },
     lineHeight: 'none',
     mb: 's',
   },
   subtitle: {
     componentName: 'Typography',
     variant: 'h2',
     color: 'gray.light',
-    maxWidth: 'raw:800px',
+    fontWeight: 'regular',
+    fontSize: {
+      default: 'l',
+      sm: 'xl',
+    },
+    maxWidth: {
+      default: '100',
+      sm: 'raw:800px',
+    },
   },
   cta: {
     display: 'flex',
     py: 'm',
-    gap: 'm',
+    gap: {
+      default: 's',
+      sm: 'm',
+    },
+    width: '100',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexDirection: {
+      default: 'column',
+      sm: 'row',
+    },
+    '& a': {
+      minW: {
+        default: '100',
+        sm: 'none',
+      },
+    },
   },
 });
 
@@ -41,9 +71,7 @@ export function Hero() {
   return (
     <section className={classes.container}>
       <h1 className={classes.title}>
-        <TypingAnimation words={words} /> Without
-        <br />
-        compromises.
+        <TypingAnimation words={words} /> <br /> Without compromises.
       </h1>
       <h2 className={classes.subtitle}>
         Morfeo is a build-time CSS-in-JS solution for the next level theming,

examples/nextra/src/components/TypingAnimation/TypingAnimation.tsx

@@ -10,7 +10,10 @@ const classes = morfeo.css({
       content: '"|"',
       textGradient: 'text.primary',
       fontWeight: 'medium',
-      fontSize: '4xl',
+      fontSize: {
+        default: '3xl',
+        sm: '4xl',
+      },
       animation: 'blink 1s alternate infinite',
     },
     '& a': {