From 20f3d76579c730d633d06b4aebf6273fdc275999 Mon Sep 17 00:00:00 2001
From: "mr. M" <mauro.balades@tutanota.com>
Date: Wed, 11 Dec 2024 21:16:07 +0100
Subject: [PATCH] feat: implement motion animations for Community and Hero
 components

---
 src/animations.ts              |  7 +++++++
 src/components/Community.astro | 38 +++++++++++++++++++++-------------
 src/components/Hero.astro      | 24 ++++++++++-----------
 3 files changed, 42 insertions(+), 27 deletions(-)
 create mode 100644 src/animations.ts

diff --git a/src/animations.ts b/src/animations.ts
new file mode 100644
index 0000000..045baf9
--- /dev/null
+++ b/src/animations.ts
@@ -0,0 +1,7 @@
+
+export function getTitleAnimation(delay = 0) {
+  return {
+    initial: { opacity: 0, translateY: 20, filter: 'blur(4px)' },
+    whileInView: { opacity: 1, translateY: 0, filter: 'blur(0px)', transition: { duration: 0.3, delay } },
+  };
+}
diff --git a/src/components/Community.astro b/src/components/Community.astro
index 9cfab3c..0b70800 100644
--- a/src/components/Community.astro
+++ b/src/components/Community.astro
@@ -2,36 +2,46 @@
 import Title from '../components/Title.astro'
 import Description from '../components/Description.astro'
 import Button from '../components/Button.astro'
-import Circles from '../components/Circles.astro'
-import { Image } from 'astro:assets'
-import myImage from '../assets/browser.png'
+import { motion } from 'motion/react';
 import { 
   Github,
   Check,
  } from 'lucide-astro'
+import { getTitleAnimation } from '../animations'
+
+ 
 ---
 
 <section
   id="Community"
   class="flex w-full flex-col items-center text-center relative"
 >
-  <Title>Community Driven</Title>
-  <Description class="px-4 lg:px-0 lg:w-1/2">
+  <Title>
+    <motion.span client:load viewport={{ once: true }} {...getTitleAnimation(0.2)}>
+      Community
+    </motion.span>
+    <motion.span client:load viewport={{ once: true }} {...getTitleAnimation(0.4)}>
+      Driven
+    </motion.span>
+  </Title>
+  <motion.p client:load viewport={{ once: true }} {...getTitleAnimation(0.6)} className="px-4 lg:px-0 lg:w-1/2">
     We are a community-driven project. We listen to our users and build the
     features they want. Zen focuses on privacy and customization, not on data collection.
-  </Description>
+  </motion.p>
   <div class="mt-6 gap-3 px-4 sm:px-0 w-full sm:gap-10 flex flex-wrap justify-center">
-    <Button class:list={['px-4']} href="https://github.com/zen-browser">
-      <Github class="size-4" />
-      <span>View on Github</span>
-    </Button>
-    <div class="flex items-center gap-4">
+    <motion.span client:load viewport={{ once: true }} {...getTitleAnimation(0.8)}>
+      <Button class:list={['px-4']} href="https://github.com/zen-browser">
+        <Github class="size-4" />
+        <span>View on Github</span>
+      </Button>
+    </motion.span>
+    <motion.div client:load viewport={{ once: true }} {...getTitleAnimation(1)} className="flex items-center gap-4">
       <Check class="size-4" />
       <span>Fully Customizable</span>
-    </div>
-    <div class="flex items-center gap-4">
+    </motion.div>
+    <motion.div client:load viewport={{ once: true }} {...getTitleAnimation(1.2)} className="flex items-center gap-4">
       <Check class="size-4" />
       <span>Privacy Focused</span>
-    </div>
+    </motion.div>
   </div>
 </section>
diff --git a/src/components/Hero.astro b/src/components/Hero.astro
index 243eda1..36b9def 100644
--- a/src/components/Hero.astro
+++ b/src/components/Hero.astro
@@ -7,6 +7,7 @@ import myImage from '../assets/browser.png'
 import { ArrowRight } from 'lucide-astro';
 import { motion } from 'motion/react';
 import { AnimatedText } from './AnimatedText';
+import { getTitleAnimation } from '../animations'
 
 let titleAnimationCounter = 0;
 function getNewAnimationDelay() {
@@ -14,11 +15,8 @@ function getNewAnimationDelay() {
   return titleAnimationCounter * 0.15;
 }
 
-function getTitleAnimation() {
-  return {
-    initial: { opacity: 0, translateY: 20, filter: 'blur(4px)' },
-    animate: { opacity: 1, translateY: 0, filter: 'blur(0px)', transition: { duration: 0.3, delay: getNewAnimationDelay() } },
-  };
+function getHeroTitleAnimation() {
+  return getTitleAnimation(getNewAnimationDelay());
 }
 
 ---
@@ -29,37 +27,37 @@ function getTitleAnimation() {
 >
   <div class="flex flex-col items-center h-full justify-center">
     <Title class='text-left px-12 lg:px-0 md:text-center leading-[108px] md:!text-7xl lg:!text-9xl !font-normal'>
-      <motion.span client:load {...getTitleAnimation()}>
+      <motion.span client:load {...getHeroTitleAnimation()}>
         Welcome
       </motion.span>
-      <motion.span client:load {...getTitleAnimation()}>
+      <motion.span client:load {...getHeroTitleAnimation()}>
         to
       </motion.span>
       <br class="hidden md:block" /> 
-      <motion.span client:load {...getTitleAnimation()}>
+      <motion.span client:load {...getHeroTitleAnimation()}>
         a
       </motion.span>
-      <motion.span client:load {...getTitleAnimation()} className='italic'>
+      <motion.span client:load {...getHeroTitleAnimation()} className='italic'>
         calmer
       </motion.span>
-      <motion.span client:load {...getTitleAnimation()}>
+      <motion.span client:load {...getHeroTitleAnimation()}>
         internet
       </motion.span>
     </Title>
-    <motion.span client:load {...getTitleAnimation()}>
+    <motion.span client:load {...getHeroTitleAnimation()}>
       <Description class='text-left px-12 lg:px-0 md:text-center'
         >Beautifully designed, privacy-focused, and packed with features.<br
         />We care about your experience, not your data.</Description
       >
     </motion.span>
     <div class="w-2/3 md:w-fit mt-6 gap-3 sm:gap-6 flex flex-col md:flex-row">
-      <motion.span client:load {...getTitleAnimation()}>
+      <motion.span client:load {...getHeroTitleAnimation()}>
         <Button class="w-full" href="/download" isPrimary>
           Download
           <ArrowRight class="size-4" />
         </Button>
       </motion.span>
-      <motion.span client:load {...getTitleAnimation()}>
+      <motion.span client:load {...getHeroTitleAnimation()}>
         <Button href="#features">Start Exploring</Button>
       </motion.span>
     </div>