Update dependencies, fix typos, and enhance layout with new components

package-lock.json

@@ -15,7 +15,7 @@
         "astro-navbar": "^2.3.7",
         "autoprefixer": "10.4.14",
         "lucide-astro": "^0.460.0",
-        "motion": "^11.11.17",
+        "motion": "^11.13.1",
         "postcss": "8.4.21",
         "prettier": "^3.3.3",
         "prettier-plugin-astro": "^0.14.1",
@@ -2946,10 +2946,12 @@
       }
     },
     "node_modules/framer-motion": {
-      "version": "11.11.17",
+      "version": "11.13.1",
-      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.11.17.tgz",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.13.1.tgz",
-      "integrity": "sha512-O8QzvoKiuzI5HSAHbcYuL6xU+ZLXbrH7C8Akaato4JzQbX2ULNeniqC2Vo5eiCtFktX9XsJ+7nUhxcl2E2IjpA==",
+      "integrity": "sha512-F40tpGTHByhn9h3zdBQPcEro+pSLtzARcocbNqAyfBI+u9S+KZuHH/7O9+z+GEkoF3eqFxfvVw0eBDytohwqmQ==",
       "dependencies": {
+        "motion-dom": "^11.13.0",
+        "motion-utils": "^11.13.0",
         "tslib": "^2.4.0"
       },
       "peerDependencies": {
@@ -4504,11 +4506,11 @@
       }
     },
     "node_modules/motion": {
-      "version": "11.11.17",
+      "version": "11.13.1",
-      "resolved": "https://registry.npmjs.org/motion/-/motion-11.11.17.tgz",
+      "resolved": "https://registry.npmjs.org/motion/-/motion-11.13.1.tgz",
-      "integrity": "sha512-y6mXYElvJ5HHwPBUpYG/5wclKVGW4hJhqPkTjWccib5/WrcRM185adg3+4aSmG5iD10XKFt5uBOAiKwuzMHPPQ==",
+      "integrity": "sha512-64+QpZQv8WJJFn+tEEzX04il9s6ReA6lhKRZaxzD6SunGqoaq5g+AFVfcKWme8N83eytUOpGp7mpfJ9cyZlhAA==",
       "dependencies": {
-        "framer-motion": "^11.11.17",
+        "framer-motion": "^11.13.1",
         "tslib": "^2.4.0"
       },
       "peerDependencies": {
@@ -4528,6 +4530,16 @@
         }
       }
     },
+    "node_modules/motion-dom": {
+      "version": "11.13.0",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-11.13.0.tgz",
+      "integrity": "sha512-Oc1MLGJQ6nrvXccXA89lXtOqFyBmvHtaDcTRGT66o8Czl7nuA8BeHAd9MQV1pQKX0d2RHFBFaw5g3k23hQJt0w=="
+    },
+    "node_modules/motion-utils": {
+      "version": "11.13.0",
+      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-11.13.0.tgz",
+      "integrity": "sha512-lq6TzXkH5c/ysJQBxgLXgM01qwBH1b4goTPh57VvZWJbVJZF/0SB31UWEn4EIqbVPf3au88n2rvK17SpDTja1A=="
+    },
     "node_modules/mrmime": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.0.tgz",

package.json

@@ -17,7 +17,7 @@
     "astro-navbar": "^2.3.7",
     "autoprefixer": "10.4.14",
     "lucide-astro": "^0.460.0",
-    "motion": "^11.11.17",
+    "motion": "^11.13.1",
     "postcss": "8.4.21",
     "prettier": "^3.3.3",
     "prettier-plugin-astro": "^0.14.1",

src/components/Circles.astro

@@ -4,7 +4,7 @@ const sizes = [216, 396, 576, 756]
 const borderWidths = [20, 30, 40, 50]
 const multiplier = 0.9;
 ---
-<div id="circles" class="inset-0 overflow-hidden pointer-events-none -z-10 -translate-y-1/4">
+<div id="circles" class="inset-0 overflow-hidden pointer-events-none -z-10">
   <div class="mx-auto opacity-10 lg:opacity-100">
     {[...Array(4)].map((_, i) => (
       <div class="absolute rounded-full border-coral -translate-x-1/2 -translate-y-1/2"

src/components/Community.astro

@@ -0,0 +1,40 @@
+---
+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 { 
+  Github,
+  Check,
+ } from 'lucide-astro'
+---
+
+<section
+  id="Community"
+  class="flex min-h-screen w-full flex-col items-center text-center relative"
+>
+  <div class="flex-1 w-full"></div>
+  <Title>Community Driven</Title>
+  <Description class="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>
+  <div class="mt-6 gap-3 px-4 sm:px-0 w-full sm:gap-10 flex flex-wrap justify-center">
+    <a href="https://github.com/zen-browser">
+      <Button class:list={['px-4']}>
+        <Github class="size-4" />
+        <span>View on Github</span>
+      </Button>
+    </a>
+    <div class="flex items-center gap-4">
+      <Check class="size-4" />
+      <span>Fully Customizable</span>
+    </div>
+    <div class="flex items-center gap-4">
+      <Check class="size-4" />
+      <span>Privacy Focused</span>
+    </div>
+  </div>
+</section>

src/components/Features.astro

@@ -0,0 +1,127 @@
+---
+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 { 
+  Github,
+  Check,
+ } from 'lucide-astro'
+---
+
+<section
+  id="features"
+  class="flex min-h-screen w-full px-4 lg:px-12 xl:px-24 py-36 flex-col relative"
+>
+  <div class="flex flex-col lg:flex-row w-full items-start gap-12">
+    <div id="feature-list" class="lg:w-1/3 flex flex-col gap-4">
+      <Title>Features</Title>
+      <div class="feature flex hover:bg-coral/5 rounded-xl p-4 w-full cursor-pointer">
+        <div class="flex flex-col">
+          <Description class="feature-title font-bold text-2xl">
+            Workspaces
+          </Description>
+          <p class="desc text-base font-normal mt-2">
+            With Zen, you can create multiple workspaces to keep your tabs organized.
+          </p>
+        </div>
+      </div>
+      <div class="feature flex hover:bg-coral/5 rounded-xl p-4 w-full cursor-pointer">
+        <div class="flex flex-col">
+          <Description class="feature-title font-bold text-2xl">
+            Compact Mode
+          </Description>
+          <p class="desc text-base font-normal mt-2">
+            Zen's compact mode allows you to see more of your content at once.
+          </p>
+        </div>
+      </div>
+      <div class="feature flex hover:bg-coral/5 rounded-xl p-4 w-full cursor-pointer">
+        <div class="flex flex-col">
+          <Description class="feature-title font-bold text-2xl">
+            Split Views
+          </Description>
+          <p class="desc text-base font-normal mt-2">
+            Split your browser into multiple views to see more content at once.
+          </p>
+        </div>
+      </div>
+      <div class="feature flex hover:bg-coral/5 rounded-xl p-4 w-full cursor-pointer">
+        <div class="flex flex-col">
+          <Description class="feature-title font-bold text-2xl">
+            Sidebar
+          </Description>
+          <p class="desc text-base font-normal mt-2">
+            Zen's sidebar allows you to quickly access your favourite websites.
+          </p>
+        </div>
+      </div>
+      <div class="feature flex hover:bg-coral/5 rounded-xl p-4 w-full cursor-pointer">
+        <div class="flex flex-col">
+          <Description class="feature-title font-bold text-2xl">
+            Zen Glance
+          </Description>
+          <p class="desc text-base font-normal mt-2">
+            Preview your tabs with Zen Glance to quickly find what you're looking for, without switching tabs.
+          </p>
+        </div>
+      </div>
+    </div>
+    <div class="relative lg:w-2/3 lg:pl-20 items-center m-auto">
+      <div class="bg-coral rounded-xl ml-auto" id="feature-list-image">
+        <img src="/browser.webp" alt="" class="object-fit">
+        <img src="/browser.webp" alt="" class="object-fit">
+        <img src="/browser.webp" alt="" class="object-fit">
+        <img src="/browser.webp" alt="" class="object-fit">
+        <img src="/browser.webp" alt="" class="object-fit">
+      </div>
+    </div>
+  </div>
+</section>
+<script>
+  function changeFeature(index: number) {
+    document.querySelectorAll('#feature-list .feature').forEach((feature: any, i) => {
+      if (i === index) {
+        feature.setAttribute('active', '');
+      } else {
+        feature.removeAttribute('active');
+      }
+    });
+    document.querySelectorAll('#feature-list-image img').forEach((img: any, i) => {
+      img.style.opacity = i === index ? 1 : 0;
+      img.classList.toggle('absolute', i !== index);
+    });
+  }
+
+  window.addEventListener('DOMContentLoaded', () => {
+    document.querySelectorAll('#feature-list .feature').forEach((feature: any, i) => {
+      feature.addEventListener('click', () => {
+        changeFeature(i);
+      });
+    });
+    changeFeature(0);
+  });
+</script>
+<style>
+  .feature {
+    user-select: none;
+    transition: background-color 0.1s ease-in-out;
+  }
+
+  .feature p {
+    transition: max-height 0.2s ease-in-out, margin-top 0.1s ease-in-out;
+  }
+
+  .feature:not([active]) .desc {
+    max-height: 0;
+    overflow: hidden;
+    pointer-events: none;
+    margin-top: 0;
+  }
+
+  .feature[active] {
+    @apply bg-coral/10;
+  }
+</style>

src/components/Footer.astro

@@ -0,0 +1,73 @@
+---
+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 { ArrowRight, Github, Twitter } from 'lucide-astro'
+---
+
+<footer
+  id="footer"
+  class="flex flex-col w-full p-4 lg:p-24 gap-24 md:gap-[15%] bg-coral border-t border-dark"
+>
+  <Title>Zen Browser</Title>
+  <div class="flex flex-col justify-between w-full lg:flex-row gap-6">
+    <Button isPrimary class="h-fit">
+      Download
+      <ArrowRight class="size-4" />
+    </Button>
+    <div class="gap-6 flex flex-col">
+      <div class="flex flex-col gap-2">
+        <Description class="!font-semibold">
+          Follow Us
+        </Description>
+        <div class="opacity-80 flex gap-4">
+          <a href="https://github.com/zen-browser" target="_blank" class="font-bold">
+            <Github class="size-4" />
+          </a>
+          <a href="https://twitter.com/zen_browser" target="_blank" class="font-normal">
+            <Twitter class="size-4" />
+          </a>
+        </div>
+      </div>
+      <div class="flex flex-col gap-2">
+        <Description class="!font-semibold">
+          About
+        </Description>
+        <div class="opacity-80 flex flex-col">
+          <a href="/about" class="font-normal">About Us</a>
+          <a href="/about" class="font-normal">About Us</a>
+        </div>
+      </div>
+    </div>
+    <div class="flex flex-col gap-2">
+      <Description class="!font-semibold">
+        About
+      </Description>
+      <div class="opacity-80 flex flex-col">
+        <a href="/about" class="font-normal">About Us</a>
+        <a href="/about" class="font-normal">About Us</a>
+      </div>
+    </div>
+    <div class="flex flex-col gap-2">
+      <Description class="!font-semibold">
+        About
+      </Description>
+      <div class="opacity-80 flex flex-col">
+        <a href="/about" class="font-normal">About Us</a>
+        <a href="/about" class="font-normal">About Us</a>
+      </div>
+    </div>
+    <div class="flex flex-col gap-2">
+      <Description class="!font-semibold">
+        About
+      </Description>
+      <div class="opacity-80 flex flex-col">
+        <a href="/about" class="font-normal">About Us</a>
+        <a href="/about" class="font-normal">About Us</a>
+      </div>
+    </div>
+  </div>
+</footer>

src/components/Hero.astro

@@ -12,9 +12,8 @@ import { ArrowRight } from 'lucide-astro'
   id="header"
   class="flex h-screen w-full flex-col items-center gap-24 text-center md:gap-[15%]"
 >
-<Circles />
   <div class="flex flex-col items-center h-full justify-center">
-    <Title class='text-left px-12 lg:px-0 lg:text-center leading-[108px]'>Welcome to<br class="hidden md:block" /> a calmer internet</Title>
+    <Title class='text-left px-12 lg:px-0 lg:text-center leading-[108px] !text-9xl !font-normal'>Welcome to<br class="hidden md:block" /> a <span class="italic">calmer</span> internet</Title>
     <Description class='text-left px-12 lg:px-0 lg:text-center'
       >Beautifully designed, privacy-focused, and packed with features.<br
       />We care about your experience, not your data.</Description

src/components/Title.astro

@@ -6,18 +6,13 @@ const { class: className } = Astro.props
   <slot />
 </h1>
 <style>
-  @font-face {
-    font-family: 'Junicode';
-    src: url('/fonts/JunicodeVF-Roman.woff2') format('woff2');
-  }
-
   h1 {
     font-size: 6rem;
     line-height: 0.9;
     margin-bottom: 0.4rem;
     font-family: 'Junicode', serif;
     font-weight: 600;
-    font-variation-settings: unset;
     font-style: normal;
+    font-feature-settings: 'swsh' 1;
   }
 </style>

src/layouts/Layout.astro

@@ -6,6 +6,7 @@ interface Props {
 const { title } = Astro.props;
 import "@fontsource/bricolage-grotesque/400.css";
 import NavBar from "../components/NavBar.astro";
+import Footer from "../components/Footer.astro";
 ---
 
 <!doctype html>
@@ -36,20 +37,42 @@ import NavBar from "../components/NavBar.astro";
 	</head>
 	<body class="bg-paper font-['bricolage-grotesque']">
 		<slot />
+		<Footer />
 		<NavBar />
 	</body>
 </html>
 <style is:global>
+  @font-face {
+    font-family: 'Junicode';
+    src: url('/fonts/JunicodeVF-Roman.woff2') format('woff2');
+  }
+
+  @font-face {
+    font-family: 'Junicode-Italic';
+    src: url('/fonts/JunicodeVF-Italic.woff2') format('woff2');
+  }
+
 	* {
 		margin: 0;
 		padding: 0;
 		box-sizing: border-box;
+	}
 
-    font-size: 18px;
+	html {
+		scroll-behavior: smooth;
+	}
+
+	*:not(h1) > * {
+		font-size: 18px;
     font-family: "Bricolage Grotesque", sans-serif;
     font-optical-sizing: auto;
     font-style: normal;
     font-weight: 500;
     font-variation-settings: "wdth" 100;
 	}
+
+	h1 .italic {
+    font-family: 'Junicode-Italic', serif;
+		font-style: normal;
+  }
 </style>

src/pages/index.astro

@@ -1,12 +1,15 @@
 ---
 import Layout from '../layouts/Layout.astro'
 import Hero from '../components/Hero.astro' 
+import Community from '../components/Community.astro'
+import Features from '../components/Features.astro'
 ---
 
 <Layout title="Welcome to Zen">
   <main>
     <Hero />
-    <!-- <div class="h-[500px]" /> -->
+    <Community />
+    <Features />
   </main>
 </Layout>
 <style>
@@ -24,20 +27,4 @@ import Hero from '../components/Hero.astro'
   }
 </style>
 <script>
-  import { inView, animate } from 'motion'
-
-  inView('#browser-image-productivity', (entry) => {
-    animate(
-      '#browser-image-productivity',
-      {
-        opacity: [0, 1],
-        transform: ['translateX(20px)', 'translate(0,0)'],
-      },
-      {
-        delay: 0.9,
-        duration: 0.3,
-        ease: 'easeInOut',
-      }
-    )
-  })
 </script>

src/release-notes.ts

@@ -1239,7 +1239,7 @@ export const releaseNotes: ReleaseNote[] = [
 			},
 			{
 				description:
-					"Fixed about page linking 'global comunity' to a Mozilla page",
+					"Fixed about page linking 'global Community' to a Mozilla page",
 			},
 		],
 		features: [