animate cards

web/src/components/Card.astro

@@ -3,7 +3,7 @@ import type { HTMLAttributes } from "astro/types";
 import { VariantProps, cva } from "class-variance-authority";
 
 const card = cva(
-    "rounded-card transition-colors bg-neutral-accent ring-2 ring-main/10",
+    "card rounded-card transition-colors bg-neutral-accent ring-2 ring-main/10",
     {
         variants: {
             interactable: {
@@ -12,7 +12,7 @@ const card = cva(
         hocus:shadow-lg hocus:ring-2 hocus:outline-none",
             },
             padding: {
-                true: "p-card",
+                true: "py-6 px-8",
                 false: "p-0",
             },
         },

web/src/components/Cards/CardFeature.astro

@@ -12,7 +12,9 @@ const { title, description, iconName } = Astro.props;
 ---
 
 <Card class="w-[300px] shrink-0 grow">
-    <div class="text-primary w-12 mb-4">
+    <div
+        class="text-primary w-12 mb-4 shadow-current drop-shadow-[0px_0px_10px_hsl(var(--color-primary)_/_0.5)]"
+    >
         <Icon name={iconName} />
     </div>
     <h4 class="text-lg font-bold">

web/src/sections/Features.astro

@@ -34,6 +34,7 @@ const features: Array<Feature> = [
         <Heading>Core Features & Values</Heading>
     </div>
     <div
+        id="features-cards-container"
         class="flex flex-row flex-nowrap overflow-x-auto snap-x snap-mandatory gap-card overflow-y-clip p-main snap-center"
     >
         {
@@ -47,3 +48,27 @@ const features: Array<Feature> = [
         }
     </div>
 </div>
+
+<script>
+    import { animate, inView, stagger } from "motion";
+    import { ease } from "@unom/style";
+
+    const cardsContainer = document.getElementById("features-cards-container");
+
+    const cards = document.querySelectorAll("#features-cards-container .card");
+
+    if (cardsContainer) {
+        inView(cardsContainer, () => {
+            animate(
+                cards,
+                {
+                    scale: [0.8, 1],
+                    opacity: [0, 1],
+                },
+                { ...ease.quint(0.8).out, delay: stagger(0.1) }
+            );
+        });
+    }
+
+    console.log(cardsContainer);
+</script>