feat: remove unused assets and update release notes with new features and improvements

Author: mauro-balades

package.json

@@ -10,10 +10,6 @@
     "wrangler": "wrangler",
     "astro": "astro"
   },
-  "overrides": {
-    "react": "npm:@preact/compat@latest",
-    "react-dom": "npm:@preact/compat@latest"
-  },
   "dependencies": {
     "@astrojs/check": "^0.9.4",
     "@astrojs/cloudflare": "^12.2.1",

src/assets/HomePageVideo.mp4

@@ -1,38 +1,38 @@
 ---
-import Title from '../components/Title.astro'
 import Description from '../components/Description.astro'
 import Button from '../components/Button.astro'
 import { motion } from 'motion/react'
 import { Github, Check } from 'lucide-astro'
 import { getTitleAnimation } from '../animations'
+import Video from './Video.astro'
+import WorkspacesVideo from '../assets/Workspaces.mp4'
 ---
 
 <section
   id="Community"
-  class="relative flex w-full flex-col items-center px-4 text-start md:px-0 md:text-center lg:py-24"
+  class="relative flex w-full flex-col items-center px-4 text-start md:px-0 md:text-center lg:py-36"
 >
-  <Title class="px-4 font-bold">
-    <motion.span client:load {...getTitleAnimation(0.2)}>
-      Community
-    </motion.span>
-    <motion.span client:load {...getTitleAnimation(0.4)}> Driven </motion.span>
-  </Title>
+  <Description class="mb-2 px-4 text-6xl font-bold">
+    <motion.span client:load {...getTitleAnimation(0.2)}> What </motion.span>
+    <motion.span client:load {...getTitleAnimation(0.4)}> Defines </motion.span>
+    <motion.span client:load {...getTitleAnimation(0.6)}> Zen? </motion.span>
+  </Description>
   <motion.p
     client:load
     {...getTitleAnimation(0.6)}
     className="px-4 md:px-24 lg:w-1/2 lg:px-0"
   >
-    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.
+    We make it not only a priority but a necessity to ensure that Zen provides
+    always the best experience for you. We are committed to making Zen the most
+    beautiful, productive, and privacy-focused browser out there.
   </motion.p>
   <div
     class="mt-6 flex w-full flex-wrap gap-3 px-4 sm:gap-10 sm:px-0 md:justify-center"
   >
     <motion.span client:load {...getTitleAnimation(0.8)}>
       <Button class:list={['px-4']} href="https://github.com/zen-browser">
         <Github class="size-4" />
-        <span>View on GitHub</span>
+        <span>Free and open-source</span>
       </Button>
     </motion.span>
     <motion.div
@@ -41,15 +41,30 @@ import { getTitleAnimation } from '../animations'
       className="flex items-center gap-4"
     >
       <Check class="size-4" />
-      <span>Always on the latest version of Firefox</span>
+      <span>Simple yet powerful</span>
     </motion.div>
     <motion.div
       client:load
       {...getTitleAnimation(1.2)}
       className="flex items-center gap-4"
     >
       <Check class="size-4" />
-      <span>Privacy-focused</span>
+      <span>True privacy and always up-to-date</span>
     </motion.div>
   </div>
+  <motion.span
+    className="flex max-w-full px-8 lg:max-w-none lg:flex-none lg:px-0"
+    client:load
+    {...getTitleAnimation(1.4)}
+  >
+    <Video
+      src={WorkspacesVideo}
+      autoplay
+      loop
+      muted
+      playsinline
+      preload="none"
+      class="mb-24 mt-12 rounded-3xl shadow-md lg:mx-auto lg:w-3/4 dark:opacity-80"
+    />
+  </motion.span>
 </section>

src/assets/Workspaces.mp4

@@ -3,23 +3,8 @@ 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 SocialMediaStrip from '../components/SocialMediaStrip.astro'
 import { ArrowRight } from 'lucide-astro'
-
-import { library, icon } from '@fortawesome/fontawesome-svg-core'
-import {
-  faMastodon,
-  faBluesky,
-  faGithub,
-  faTwitter,
-  faReddit,
-} from '@fortawesome/free-brands-svg-icons'
-
-library.add(faMastodon, faBluesky, faGithub, faTwitter, faReddit)
-const Mastodon = icon({ prefix: 'fab', iconName: 'mastodon' })
-const Bluesky = icon({ prefix: 'fab', iconName: 'bluesky' })
-const Github = icon({ prefix: 'fab', iconName: 'github' })
-const Twitter = icon({ prefix: 'fab', iconName: 'twitter' })
-const Reddit = icon({ prefix: 'fab', iconName: 'reddit' })
 ---
 
 <footer
@@ -45,48 +30,7 @@ const Reddit = icon({ prefix: 'fab', iconName: 'reddit' })
     <div class="flex flex-col gap-10">
       <div class="flex flex-col gap-2">
         <Description class="!font-semibold"> Follow Us </Description>
-        <div class="flex items-center gap-4 opacity-80">
-          <a
-            href="https://github.com/zen-browser"
-            target="_blank"
-            class="font-bold"
-            aria-label="Visit Zen Browser on GitHub"
-          >
-            <Fragment set:html={Github.html} />
-          </a>
-          <a
-            href="https://twitter.com/zen_browser"
-            target="_blank"
-            class="font-normal"
-            aria-label="Visit Zen Browser on Twitter"
-          >
-            <Fragment set:html={Twitter.html} />
-          </a>
-          <a
-            href="https://fosstodon.org/@zenbrowser"
-            target="_blank"
-            class="font-normal"
-            aria-label="Visit Zen Browser on Mastodon"
-          >
-            <Fragment set:html={Mastodon.html} />
-          </a>
-          <a
-            href="https://bsky.app/profile/zen-browser.app"
-            target="_blank"
-            class="font-normal"
-            aria-label="Visit Zen Browser on Bluesky"
-          >
-            <Fragment set:html={Bluesky.html} />
-          </a>
-          <a
-            href="https://www.reddit.com/r/zen_browser"
-            target="_blank"
-            class="font-normal"
-            aria-label="Visit Zen Browser on Reddit"
-          >
-            <Fragment set:html={Reddit.html} />
-          </a>
-        </div>
+        <SocialMediaStrip />
       </div>
       <div class="flex flex-col gap-2">
         <Description class="!font-semibold"> About Us </Description>
@@ -135,7 +79,7 @@ const Reddit = icon({ prefix: 'fab', iconName: 'reddit' })
   <div class="flex h-32 w-full items-center">
     <div class="flex">
       Made with ❤️ by the <a href="/about" class="ml-2 inline-block font-bold"
-        >Zen Browser Team</a
+        >Zen Team</a
       >
     </div>
     <Circles