From 1017d52859c84fa66f0f99e44cfc66d58ecd561c Mon Sep 17 00:00:00 2001
From: taroj1205 <taroj1205@gmail.com>
Date: Fri, 6 Jun 2025 11:50:12 +1200
Subject: [PATCH] refactor(components): improve layout and animation
 consistency in Features and Hero components

---
 src/components/Features.astro | 42 +++++++++++++++++++++++------------
 src/components/Hero.astro     | 31 ++++++++++++++++----------
 2 files changed, 47 insertions(+), 26 deletions(-)

diff --git a/src/components/Features.astro b/src/components/Features.astro
index f1c2b60..b8b362d 100644
--- a/src/components/Features.astro
+++ b/src/components/Features.astro
@@ -46,10 +46,10 @@ const featureList = [
 
 <section
   id="features"
-  class="relative flex w-full flex-col items-center gap-8 py-8 text-center sm:gap-12 sm:py-12 xl:gap-16 xl:py-36"
+  class="relative flex w-full flex-col items-center gap-8 py-8 text-center sm:gap-12 sm:py-12 xl:gap-24 xl:py-36"
 >
   <!-- Section Header -->
-  <div class="flex w-full flex-col items-center gap-4 sm:gap-6 xl:gap-12">
+  <div class="flex w-full flex-col items-center gap-4 sm:gap-6">
     <h2 class="text-3xl sm:text-4xl md:text-6xl">
       {
         (titles || features.titles).map(title => {
@@ -70,7 +70,7 @@ const featureList = [
       }
     </h2>
     <p
-      class="max-w-2xl text-base sm:text-lg"
+      class="max-w-4xl text-base sm:text-lg"
       style="transform: translateY(20px); opacity: 0.001; filter: blur(4px)"
     >
       <span class="opacity-80">{features.description}</span>
@@ -78,25 +78,23 @@ const featureList = [
   </div>
 
   <!-- Features Layout -->
-  <div class="space-between flex w-full flex-col gap-12 sm:gap-16 xl:gap-24">
+  <div id="showcase" class="flex w-full flex-col gap-12 sm:gap-16 xl:gap-36">
     {
       featureList.map((feature, index) => (
-        <div
-          class={`flex w-full flex-col items-center gap-6 xl:gap-12 ${index % 2 === 0 ? 'xl:flex-row-reverse' : 'xl:flex-row'}`}
-        >
+        <div class="flex w-full flex-col items-center gap-6 xl:gap-12">
           <div class="flex flex-col items-center gap-4">
-            <h3 class="text-2xl font-bold opacity-0 blur-sm sm:text-3xl xl:text-4xl">
+            <h3 class="text-3xl font-bold opacity-0 blur-sm sm:text-4xl xl:text-5xl">
               {feature.title}
             </h3>
             <p
-              class="text-base leading-relaxed sm:text-lg"
+              class="max-w-3xl text-center text-base leading-relaxed sm:text-lg"
               style="transform: translateY(20px); opacity: 0.001; filter: blur(4px)"
             >
               <span class="opacity-80">{feature.description}</span>
             </p>
           </div>
           <Video
-            class="max-h-[450px] w-[800px] rounded-xl border-2 border-dark object-cover shadow-lg"
+            class="w-full rounded-xl object-cover shadow-lg"
             style="transform: translateY(20px); opacity: 0.001; filter: blur(4px)"
             name={feature.video}
             autoplay
@@ -117,22 +115,38 @@ const featureList = [
   function initAnimations() {
     const debug = false
 
-    const elements = document.querySelectorAll(
-      '#features h2 b, #features h3, #features p, #features video'
-    )
+    const elements = document.querySelectorAll('#features h2 b, #features > div > p')
+    const showcase = document.getElementById('showcase') as HTMLElement
 
     animate(elements, {
       opacity: { from: 0.001, to: 1 },
       translateY: { from: 20, to: 0 },
       filter: { from: 'blur(4px)', to: 'blur(0px)' },
       duration: 300,
-      delay: stagger(150),
+      delay: stagger(200),
       ease: 'cubicBezier(0.25, 0.1, 0.25, 1)',
       autoplay: onScroll({
         target: '#features',
         debug,
       }),
     })
+
+    for (const element of showcase.children) {
+      const target = element.querySelectorAll('p, h3, video')
+      animate(target, {
+        opacity: { from: 0.001, to: 1 },
+        translateY: { from: 20, to: 0 },
+        filter: { from: 'blur(4px)', to: 'blur(0px)' },
+        duration: 300,
+        delay: stagger(150),
+        ease: 'cubicBezier(0.25, 0.1, 0.25, 1)',
+        autoplay: onScroll({
+          target,
+          enter: 'bottom-=200 top',
+          debug,
+        }),
+      })
+    }
   }
   initAnimations()
 </script>
diff --git a/src/components/Hero.astro b/src/components/Hero.astro
index 15ca6fc..b787597 100644
--- a/src/components/Hero.astro
+++ b/src/components/Hero.astro
@@ -17,7 +17,10 @@ const {
 } = getUI(locale)
 ---
 
-<header id="header" class="flex w-full flex-col items-center gap-12 py-32 text-center lg:gap-16">
+<header
+  id="header"
+  class="flex w-full flex-col items-center gap-12 py-16 text-center lg:gap-16 lg:py-32"
+>
   <div class="flex h-full flex-col items-center justify-center gap-6 md:gap-12">
     <div class="flex flex-col items-center justify-center gap-4 md:gap-8">
       <div>
@@ -49,19 +52,13 @@ const {
       <div
         class="flex w-2/3 flex-col items-center justify-center gap-3 sm:gap-6 md:w-fit md:flex-row"
       >
-        <div
-          class="hero__link-group_button"
-          style="transform: translateY(20px); opacity: 0.001; filter: blur(4px)"
-        >
+        <div style="transform: translateY(20px); opacity: 0.001; filter: blur(4px)">
           <Button class="w-fit" href={getLocalePath('/download')} isPrimary>
             {hero.buttons.beta}
             <ArrowRightIcon class="size-4" />
           </Button>
         </div>
-        <div
-          class="hero__link-group_button"
-          style="transform: translateY(20px); opacity: 0.001; filter: blur(4px)"
-        >
+        <div style="transform: translateY(20px); opacity: 0.001; filter: blur(4px)">
           <Button class="w-fit" href={getLocalePath('/donate')}>
             {hero.buttons.support}
           </Button>
@@ -78,7 +75,7 @@ const {
     playsinline
     preload="none"
     class="rounded-xl"
-    style="transform: translateY(20px); opacity: 0.001; filter: blur(4px)"
+    style="transform: translateY(20px) scale(0.6); opacity: 0.001; filter: blur(4px); transform-origin: top;"
   />
 </header>
 
@@ -89,13 +86,12 @@ const {
     const debug = false
 
     const elements = document.querySelectorAll(
-      '#header h1 b, #header p, #header .hero__link-group_button, #header video, #header ul'
+      '#header h1 b, #header p, #header div:has(a), #header video, #header ul'
     )
 
     animate(elements, {
       // @ts-expect-error - element is HTMLElement
       opacity: element => {
-        // if ul is the element, return 0.8
         if (element.tagName === 'UL') {
           return { from: 0.001, to: 0.8 }
         }
@@ -111,6 +107,17 @@ const {
         debug,
       }),
     })
+
+    animate('#header video', {
+      scale: { from: 0.6, to: 1 },
+      ease: 'cubicBezier(0.25, 0.1, 0.25, 1)',
+      autoplay: onScroll({
+        enter: 'bottom-=100 top',
+        leave: 'top+=100 bottom',
+        sync: true,
+        debug,
+      }),
+    })
   }
   initAnimations()
 </script>