Merge branch 'main' into chore/bump-motion

package.json

@@ -12,18 +12,18 @@
   },
   "dependencies": {
     "@astrojs/check": "^0.9.4",
-    "@astrojs/cloudflare": "^12.2.0",
-    "@astrojs/react": "^4.1.4",
+    "@astrojs/cloudflare": "^12.2.1",
+    "@astrojs/react": "^4.2.0",
     "@astrojs/rss": "^4.0.11",
     "@astrojs/sitemap": "^3.2.1",
-    "@astrojs/tailwind": "^5.1.4",
+    "@astrojs/tailwind": "^6.0.0",
     "@fontsource/bricolage-grotesque": "^5.1.0",
     "@fortawesome/fontawesome-svg-core": "^6.7.1",
     "@fortawesome/free-brands-svg-icons": "^6.7.1",
     "@fortawesome/free-solid-svg-icons": "^6.7.1",
     "@types/react": "^19.0.1",
     "@types/react-dom": "^19.0.2",
-    "astro": "^5.1.6",
+    "astro": "^5.2.5",
     "astro-navbar": "^2.3.7",
     "autoprefixer": "10.4.14",
     "date-fns": "^4.1.0",

src/animations.ts

@@ -1,13 +1,13 @@
-export function getTitleAnimation(delay = 0) {
+export function getTitleAnimation(delay = 0, duration = 0.3, once = true) {
   return {
     initial: { opacity: 0, translateY: 20, filter: 'blur(4px)' },
     whileInView: {
       opacity: 1,
       translateY: 0,
       filter: 'blur(0px)',
-      transition: { duration: 0.3, delay },
+      transition: { duration, delay },
     },
-    viewport: { once: true },
+    viewport: { once: once },
   }
 }
 

src/components/Button.astro

@@ -17,14 +17,14 @@ const {
       {...extra}
       href={href}
       class:list={[
-        'transition-bg flex items-center justify-center gap-2 rounded-full px-6 py-2 transition-transform duration-200',
+        'transition-bg flex items-center justify-center gap-2 rounded-xl px-6 py-4 transition-transform duration-150 hover:scale-[1.02]',
         className,
         isPrimary
-          ? 'border-2 border-dark bg-dark text-paper hover:bg-paper hover:text-dark'
+          ? 'border-dark bg-dark text-paper shadow-lg'
           : isAlert
             ? 'bg-red-300 text-dark'
             : !isBordered
-              ? 'border-2 border-dark hover:bg-dark hover:text-paper'
+              ? 'bg-[rgba(0,0,0,.05)]'
               : '!transition-bg border-2 border-dark hover:bg-dark hover:text-paper hover:shadow-sm',
       ]}
     >
@@ -35,14 +35,14 @@ const {
       id={id}
       {...extra}
       class:list={[
-        'flex items-center justify-center gap-2 rounded-full px-6 py-2 transition-transform duration-200',
+        'transition-bg flex items-center justify-center gap-2 rounded-lg px-6 py-3 transition-transform duration-150 hover:scale-[1.02]',
         className,
         isPrimary
-          ? 'bg-dark text-paper'
+          ? 'border-dark bg-dark text-paper shadow-md'
           : isAlert
             ? 'bg-red-300 text-dark'
             : !isBordered
-              ? 'border-2 border-dark hover:bg-dark hover:text-paper'
+              ? ''
               : '!transition-bg border-2 border-dark hover:bg-dark hover:text-paper hover:shadow-sm',
       ]}
     >

src/components/Features.astro

@@ -53,7 +53,7 @@ import Video from './Video.astro'
         muted
         playsinline
         preload="none"
-        class="rounded-xl border-4 border-white object-cover shadow"
+        class="rounded-3xl object-cover shadow-md"
       />
     </div>
     <div class="long-feature xl:!flex-row-reverse">
@@ -73,7 +73,7 @@ import Video from './Video.astro'
         muted
         playsinline
         preload="none"
-        class="rounded-xl border-4 border-white object-cover shadow"
+        class="rounded-3xl object-cover shadow-md"
       />
     </div>
     <div class="long-feature">
@@ -95,7 +95,7 @@ import Video from './Video.astro'
         muted
         playsinline
         preload="none"
-        class="rounded-xl border-4 border-white object-cover shadow"
+        class="rounded-3xl object-cover shadow-md"
       />
     </div>
     <div class="long-feature xl:!flex-row-reverse">
@@ -116,7 +116,7 @@ import Video from './Video.astro'
         muted
         playsinline
         preload="none"
-        class="rounded-xl border-4 border-white object-cover shadow"
+        class="rounded-3xl object-cover shadow-md"
       />
     </div>
     <div class="long-feature">
@@ -135,7 +135,7 @@ import Video from './Video.astro'
         muted
         playsinline
         preload="none"
-        class="rounded-xl border-4 border-white object-cover shadow"
+        class="rounded-3xl object-cover shadow-md"
       />
     </div>
   </div>

src/components/Hero.astro

@@ -3,8 +3,7 @@ import Title from '../components/Title.astro'
 import Description from '../components/Description.astro'
 import Button from '../components/Button.astro'
 import { Image } from 'astro:assets'
-import myImage from '../assets/browsers.png'
-import myImageLight from '../assets/browsers-light.png'
+import myImage from '../assets/browser.png'
 import { ArrowRight } from 'lucide-astro'
 import { motion } from 'motion/react'
 import { getTitleAnimation } from '../animations'
@@ -22,7 +21,7 @@ function getHeroTitleAnimation() {
 
 <header
   id="header"
-  class="flex w-full flex-col items-center gap-[20%] py-32 pb-16 text-center md:pb-32 lg:gap-[15%] lg:pb-16"
+  class="flex w-full flex-col items-center gap-[20%] py-32 text-center lg:gap-[25%]"
 >
   <div class="flex h-full flex-col items-center justify-center">
     <Title
@@ -64,17 +63,15 @@ function getHeroTitleAnimation() {
     </div>
   </div>
 </header>
-<motion.span client:load {...getHeroTitleAnimation()}>
+<motion.span
+  className="flex max-w-full px-8 lg:max-w-none lg:flex-none lg:px-0"
+  client:load
+  {...getHeroTitleAnimation()}
+>
   <Image
     src={myImage}
     alt="Zen browser"
-    class="mx-auto mb-24 hidden dark:block"
-    loading="eager"
-  />
-  <Image
-    src={myImageLight}
-    alt="Zen browser"
-    class="mx-auto mb-24 block dark:hidden"
+    class="mb-24 rounded-3xl shadow-md lg:mx-auto lg:w-3/4 dark:opacity-80"
     loading="eager"
   />
 </motion.span>

src/components/Logo.astro

@@ -1,4 +1,9 @@
+---
+const { class: className } = Astro.props
+---
+
 <svg
+  class={className}
   width="32"
   height="32"
   viewBox="0 0 64 64"