feat: tailwind motion

package.json

@@ -42,14 +42,14 @@
     "@astrojs/tailwind": "5.1.4",
     "@iconify-json/mdi": "1.2.2",
     "@octokit/openapi-types": "22.2.0",
-    "@tailwindcss/typography": "0.5.15",
     "astro": "5.1.1",
     "astro-icon": "1.1.4",
     "date-fns": "4.1.0",
     "marked": "15.0.4",
     "octokit": "4.0.2",
     "sharp": "0.33.5",
     "tailwind-merge": "2.5.5",
+    "tailwindcss-motion": "1.0.0",
     "tailwindcss": "3.4.17"
   },
   "devDependencies": {

src/components/Footer.astro

@@ -2,29 +2,22 @@
 import { Icon } from "astro-icon/components";
 
 import { URLs, siteMetadata } from "~/constants";
-
-const { currentPathname } = Astro.props;
-const isHomepage = currentPathname === "/";
 ---
 
-<div
-  class={`bg-gray-800 text-white text-sm py-10 px-3 ${
-    isHomepage ? "mt-0" : "mt-12"
-  }`}
->
+<div class="bg-gray-800 text-white text-sm py-10 px-3 -mt-20">
   <div class="container mx-auto flex flex-col items-center text-center">
     <a
       target="_blank"
       rel="noopener noreferrer"
       href=`${URLs.GITHUB.REPO}`
       aria-label="GitHub Repository"
-      class="mt-1 mb-4 mx-2 p-1 text-white hover:text-gray-400"
+      class="mt-1 mb-4 mx-2 p-1 text-white hover:text-gray-400 hover:motion-preset-pulse hover:motion-duration-1000"
     >
       <Icon name="mdi:github" size={32} />
     </a>
 
     <div class="my-3">
-      Copyright © <a href={siteMetadata.author.site}
+      © Copyright <a href={siteMetadata.author.site}
         >{siteMetadata.author.name}</a
       >
       {new Date().getFullYear()}.

src/components/GitHubRepo.astro

@@ -42,7 +42,9 @@ const { stars } = await loadRepoStats();
   aria-label="GitHub Repository"
   class="text-white hover:text-red-300 hover:no-underline"
 >
-  <section class="flex flex-row items-center">
+  <section
+    class="flex flex-row items-center motion-preset-pop hover:motion-preset-oscillate hover:motion-duration-500"
+  >
     <Icon name="mdi:github" size={32} class="w-6 md:w-10" />
     <div class="font-light flex items-center gap-1">
       <Icon name="mdi:star-outline" />

src/components/Hero.astro

@@ -17,7 +17,9 @@ import { siteMetadata } from "~/constants";
       </h2>
     </div>
 
-    <div class="rotate-6 flex justify-center items-center flex-col">
+    <div
+      class="rotate-6 flex justify-center items-center flex-col motion-preset-pop motion-rotate-in-[-10deg]"
+    >
       <Image
         class="block w-full max-w-sm mx-auto h-auto shadow-2xl rounded-xl transform mt-10"
         src={cover}

src/layouts/SectionRow.astro

@@ -26,10 +26,7 @@ const { title, description = "", anchor, isDark = false } = Astro.props;
   >
     <div class="flex-1">
       <h3 class="mb-4 text-xl lg:text-2xl font-semibold">{title}</h3>
-      <div
-        class="text-lg lg:text-xl font-light"
-        set:html={marked(description)}
-      />
+      <div class="font-light" set:html={marked(description)} />
       <slot />
     </div>
   </div>

src/motion.d.ts

@@ -0,0 +1 @@
+declare module 'tailwindcss-motion';

src/sections/BestPractices.astro

@@ -14,10 +14,10 @@ import { bestPractices } from "~/memes/memes";
     {
       bestPractices.map((item) => (
         <div class="overflow-hidden group">
-          <div class="text-l italic font-semibold">{item.title}</div>
+          <div class="italic font-semibold">{item.title}</div>
           <div class="overflow-hidden group">
             <Image
-              class="w-full h-auto object-contain rounded-lg shadow-lg mb-2 transition-transform duration-300 ease-in-out transform group-hover:scale-95"
+              class="w-full h-auto object-contain rounded-lg shadow-lg mb-2 motion-preset-pop"
               style="max-height: 400px;"
               width="500"
               height="400"

src/sections/Contributing.astro

@@ -15,7 +15,7 @@ import SectionRow from "~/layouts/SectionRow.astro";
   >
     {
       openSourceLibs.map((item) => (
-        <div class="hover:bg-gray-200 p-2 m-2 rounded-lg">
+        <div class="p-2 m-2 rounded-lg hover:motion-preset-pulse hover:motion-duration-1000">
           <a href={item.link} target="_blank" rel="noopener noreferrer">
             <Icon
               name={item.svg}

src/sections/Overview.astro

@@ -6,7 +6,7 @@ import SectionRow from "~/layouts/SectionRow.astro";
   <div class="flex flex-col gap-4">
     <div>
       Meme Driven Development (MDD) is a novel approach to software development
-      derived from popular legacy methadologies like Test Driven Development
+      derived from popular legacy methodologies like Test Driven Development
       (TDD) and Behavior Driven Development (BDD).
     </div>
 
@@ -19,6 +19,10 @@ import SectionRow from "~/layouts/SectionRow.astro";
       By integrating humor and visual communication, MDD enhances team
       collaboration and makes the development process more enjoyable.
     </div>
+
+    <div>
+      Just like the saying <span class="quote">"measure what matters"</span>,
+      MDD encourages teams to <span class="quote">"meme what matters"</span>.
+    </div>
   </div>
 </SectionRow>
-

src/styles/app.css

@@ -5,3 +5,9 @@
 a {
   @apply font-semibold hover:text-red-600 hover:underline;
 }
+
+@layer components {
+  .quote {
+    @apply font-semibold italic;
+  }
+}

tailwind.config.ts

@@ -1,5 +1,5 @@
-import TailwindCSSTypography from '@tailwindcss/typography';
 import type { Config } from 'tailwindcss';
+import TailwindCSSMotion from 'tailwindcss-motion';
 
 const config: Config = {
   darkMode: ['class', '[data-kb-theme="dark"]'],
@@ -11,7 +11,7 @@ const config: Config = {
       },
     },
   },
-  plugins: [TailwindCSSTypography],
+  plugins: [TailwindCSSMotion],
 };
 
 export default config;