feat: enhance community section and update release notes with new features

package.json

@@ -12,9 +12,9 @@
   },
   "dependencies": {
     "@astrojs/check": "^0.9.4",
-    "@astrojs/cloudflare": "^12.1.0",
+    "@astrojs/cloudflare": "^12.2.0",
-    "@astrojs/react": "^4.1.2",
+    "@astrojs/react": "^4.1.4",
-    "@astrojs/rss": "^4.0.10",
+    "@astrojs/rss": "^4.0.11",
     "@astrojs/sitemap": "^3.2.1",
     "@astrojs/tailwind": "^5.1.4",
     "@fontsource/bricolage-grotesque": "^5.1.0",
@@ -23,7 +23,7 @@
     "@fortawesome/free-solid-svg-icons": "^6.7.1",
     "@types/react": "^19.0.1",
     "@types/react-dom": "^19.0.2",
-    "astro": "^5.1.1",
+    "astro": "^5.1.6",
     "astro-navbar": "^2.3.7",
     "autoprefixer": "10.4.14",
     "date-fns": "^4.1.0",

src/components/Community.astro

@@ -9,7 +9,7 @@ import { getTitleAnimation } from '../animations'
 
 <section
   id="Community"
-  class="relative flex w-full flex-col items-center text-center"
+  class="relative flex w-full flex-col items-center text-center lg:py-32"
 >
   <Title>
     <motion.span client:load {...getTitleAnimation(0.2)}>

src/components/HomeExtras.astro

@@ -2,32 +2,72 @@
 import Title from '../components/Title.astro'
 import Description from '../components/Description.astro'
 import { Image } from 'astro:assets'
+import { motion } from 'motion/react'
 
 import browserCollapsed from '../assets/collapsed.png'
 import browseMultiToolbar from '../assets/multiple-toolbar.png'
 import browserSingleToolbar from '../assets/single-toolbar.png'
+import tutaLogo from '../assets/tuta-logo.png'
 import Button from './Button.astro'
 import { ArrowRight } from 'lucide-astro'
+
+import { getTitleAnimation, getZoomInAnimation } from '../animations'
 ---
 
+<section id="sponsors" class="px-4 py-44 pt-32 lg:flex-row lg:px-12 xl:px-24">
+  <div class="mx-auto flex flex-col items-center text-center lg:w-1/2">
+    <motion.span client:load {...getTitleAnimation(0.2)}>
+      <Title>Our Sponsors</Title>
+    </motion.span>
+    <motion.span client:load {...getTitleAnimation(0.4)}>
+      <Description>
+        We are grateful to our sponsors for their support. They help us to keep
+        the project alive.<br />You can also be part of this journey by donating <a
+          href="/donate"
+          class="text-coral">here</a
+        >!
+      </Description>
+    </motion.span>
+    <div class="relative mt-8 flex items-center justify-center">
+      <motion.span client:load {...getTitleAnimation(0.6)}>
+        <a
+          href="https://tuta.io"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="w-fit"
+        >
+          <Image src={tutaLogo} alt="Tuta" class="h-16 w-fit object-contain" />
+        </a>
+      </motion.span>
+    </div>
+  </div>
+</section>
 <section
   id="customization"
   class="relative flex w-full flex-col gap-16 overflow-y-hidden px-4 py-36 pt-24 lg:flex-row lg:px-12 xl:px-24"
 >
   <div>
-    <Title
+    <motion.span client:load {...getTitleAnimation(0.2)}>
-      >Customizable<br class="md:hidden" /> to <br class="hidden md:block" />the
+      <Title
-      last pixel</Title
+        >Customizable<br class="md:hidden" /> to <br
-    >
+          class="hidden md:block"
-    <Description class="lg:w-1/2 lg:px-0">
+        />the last pixel</Title
-      Zen Browser is designed to be customizable. You can change every aspect of
+      >
-      the browser to suit your needs. Literally, your imagination is the limit.
+    </motion.span>
-    </Description>
+    <motion.span client:load {...getTitleAnimation(0.4)}>
+      <Description class="lg:w-1/2 lg:px-0">
+        Zen Browser is designed to be customizable. You can change every aspect
+        of the browser to suit your needs. Literally, your imagination is the
+        limit.
+      </Description>
+    </motion.span>
     <div class="mt-4 flex">
-      <Button isPrimary href="/mods">
+      <motion.span client:load {...getTitleAnimation(0.6)}>
-        Zen Mods
+        <Button isPrimary href="/customization">
-        <ArrowRight className="size-4" />
+          Learn More
-      </Button>
+          <ArrowRight className="size-4" />
+        </Button>
+      </motion.span>
     </div>
   </div>
   <div class="relative ml-16 flex h-32 lg:mx-0 lg:w-1/2" id="browser-images">

src/pages/about.astro

@@ -21,9 +21,11 @@ import Layout from '../layouts/Layout.astro'
         >A little help?</Button
       >
     </div>
-    <div class="w-full relative flex flex-col lg:flex-row justify-center items-center">
+    <div
-      <div class="p-8 lg:pr-24 flex flex-col lg:w-1/3">
+      class="relative flex w-full flex-col items-center justify-center lg:flex-row"
-        <div class="font-bold text-4xl lg:text-6xl">Main Team</div>
+    >
+      <div class="flex flex-col p-8 lg:w-1/3 lg:pr-24">
+        <div class="text-4xl font-bold lg:text-6xl">Main Team</div>
         <Description>
           This list shows the main team members who are working hard to bring
           you the best browsing experience.
@@ -39,26 +41,30 @@ import Layout from '../layouts/Layout.astro'
               <strong class="italic">Oscar Gonzalez</strong><span
                 class="opacity-60"
               >
-                Site Reliability Engineer (SRE) and code signing.</span>
+                Site Reliability Engineer (SRE) and code signing.</span
+              >
             </li>
             <li class="mt-1 text-sm">
               <a href="https://janheres.eu/"
                 ><strong class="font-bold">Jan Heres</strong></a
               ><span class="opacity-60"
-                >: Active contributor and helps with MacOS builds</span>
+                >: Active contributor and helps with MacOS builds</span
+              >
             </li>
             <li class="mt-1 text-sm">
               <a href="https://github.com/BrhmDev"
                 ><strong class="font-bold">BrhmDev</strong></a
               ><span class="opacity-60"
-                >: Active contributor with great contributions</span>
+                >: Active contributor with great contributions</span
+              >
             </li>
             <li class="mt-1 text-sm">
               <a href="https://thatcanoa.org/"
                 ><strong class="font-bold">Canoa</strong></a
               ><span class="opacity-60"
                 >: Active contributor, and very active in issue handling and
-                website management</span>
+                website management</span
+              >
             </li>
             <li class="mt-1 text-sm">
               <a href="https://cybrneon.xyz/"
@@ -74,13 +80,15 @@ import Layout from '../layouts/Layout.astro'
               <a href="https://github.com/n7itro"
                 ><strong class="font-bold">n7itro</strong></a
               ><span class="opacity-60"
-                >: Active contributor and release notes writer</span>
+                >: Active contributor and release notes writer</span
+              >
             </li>
             <li class="mt-1 text-sm">
               <a href="https://josuegalre.netlify.app/"
                 ><strong class="font-bold">Bryan Galdámez</strong></a
               ><span class="opacity-60"
-                >: Huge contributor on theme functionalities</span>
+                >: Huge contributor on theme functionalities</span
+              >
             </li>
             <li class="mt-1 text-sm">
               <a href="https://iamjafeth.com/"
@@ -95,21 +103,35 @@ import Layout from '../layouts/Layout.astro'
             <li class="mt-1 text-sm">
               <strong class="italic">Daniel García</strong><span
                 class="opacity-60"
-                >: MacOS certificate and app notarization maintainer</span>
+                >: MacOS certificate and app notarization maintainer</span
+              >
             </li>
           </ul>
         </div>
       </div>
-      <div class="hidden lg:block h-full w-[1px] bg-dark absolute opacity-15"></div>
+      <div class="absolute hidden h-full w-[1px] bg-dark opacity-15 lg:block">
-      <div class="p-8 lg:pl-24 flex flex-col lg:w-1/3">
+      </div>
-        <div class="font-bold text-4xl lg:text-6xl">Contributors</div>
+      <div class="flex flex-col p-8 lg:w-1/3 lg:pl-24">
+        <div class="text-4xl font-bold lg:text-6xl">Contributors</div>
         <Description>
           Here are all the wonderful people that decided to contribute to the
           project! The first set of images are from the desktop repository, and
           the second set is from the website repository.
         </Description>
-        <a href="https://github.com/zen-browser/desktop/graphs/contributors"><img src="https://contributors-img.web.app/image?repo=zen-browser/desktop" alt="Contributors" class="mt-4" /></a>
+        <a href="https://github.com/zen-browser/desktop/graphs/contributors"
-        <a href="https://github.com/zen-browser/www/graphs/contributors"><img src="https://contributors-img.web.app/image?repo=zen-browser/www" alt="Contributors (website)" class="mt-4" /></a>
+          ><img
+            src="https://contributors-img.web.app/image?repo=zen-browser/desktop"
+            alt="Contributors"
+            class="mt-4"
+          /></a
+        >
+        <a href="https://github.com/zen-browser/www/graphs/contributors"
+          ><img
+            src="https://contributors-img.web.app/image?repo=zen-browser/www"
+            alt="Contributors (website)"
+            class="mt-4"
+          /></a
+        >
       </div>
     </div>
   </main>

src/pages/privacy-policy.astro

@@ -109,12 +109,14 @@ import Layout from '../layouts/Layout.astro'
     <ul>
       <li>
         <a href="https://www.mozilla.org/en-US/privacy/mozilla-accounts/"
-          >Mozilla Firefox Sync</a>
+          >Mozilla Firefox Sync</a
+        >
       </li>
       <li>
         <a
           href="https://support.mozilla.org/en-US/kb/how-firefox-securely-saves-passwords#:~:text=Firefox%20Desktop%20encrypts%20your%20passwords,cryptography%20to%20obscure%20your%20passwords."
-          >This is how we store your passwords</a>
+          >This is how we store your passwords</a
+        >
       </li>
     </ul>
     <Title class="mt-16 !text-4xl font-bold" id="4-data-security"
@@ -215,7 +217,8 @@ import Layout from '../layouts/Layout.astro'
     <ul>
       <li>
         Discord: <a href="https://discord.gg/zen-browser"
-          >Zen Browser&#39;s Discord</a>
+          >Zen Browser&#39;s Discord</a
+        >
       </li>
       <li>GitHub: <a href="https://github.com/zen-browser">Organization</a></li>
     </ul>

src/pages/release-notes/index.astro

@@ -25,7 +25,8 @@ import Title from '../../components/Title.astro'
         Thanks everyone for your feedback! ❤️
       </p>
       {
-        (releaseNotesTwilight.features.length || releaseNotesTwilight.fixes.length) ? (
+        releaseNotesTwilight.features.length ||
+        releaseNotesTwilight.fixes.length ? (
           <ReleaseNoteItem {...releaseNotesTwilight} isTwilight />
         ) : null
       }

src/release-notes/twilight.json

@@ -20,6 +20,7 @@
     }
   ],
   "features": [
+    "Updated to firefox 134.0.1",
     "New workspace behavior when closing tabs, it's more customizable now",
     "Improved workspace transitioning, giving it a more realistic and smooth feel",
     "Made context switching animations context aware, making them more intuitive",