Worked on the new rebranding!

Co-authored-by: taroj1205 <taroj1205@users.noreply.github.com>

package-lock.json

@@ -12,6 +12,7 @@
         "@astrojs/tailwind": "^5.1.2",
         "@fontsource/bricolage-grotesque": "^5.1.0",
         "astro": "^4.16.13",
+        "astro-navbar": "^2.3.7",
         "autoprefixer": "10.4.14",
         "lucide-astro": "^0.460.0",
         "motion": "^11.11.17",
@@ -2114,6 +2115,11 @@
         "sharp": "^0.33.3"
       }
     },
+    "node_modules/astro-navbar": {
+      "version": "2.3.7",
+      "resolved": "https://registry.npmjs.org/astro-navbar/-/astro-navbar-2.3.7.tgz",
+      "integrity": "sha512-3rB27AkbTQVZCyrNc0C+8EK558eF9U/Ldmwnfl3w4lZ2zZCjUCiCqhoEAqkBEupiVsZux89/AkNUpBkufQQ5jA=="
+    },
     "node_modules/autoprefixer": {
       "version": "10.4.14",
       "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.14.tgz",

package.json

@@ -14,6 +14,7 @@
     "@astrojs/tailwind": "^5.1.2",
     "@fontsource/bricolage-grotesque": "^5.1.0",
     "astro": "^4.16.13",
+    "astro-navbar": "^2.3.7",
     "autoprefixer": "10.4.14",
     "lucide-astro": "^0.460.0",
     "motion": "^11.11.17",

src/components/Button.astro

@@ -2,14 +2,11 @@
 const { class: className, isPrimary, isBordered } = Astro.props;
 ---
 
-<button class:list={['px-4 py-2 flex gap-2 items-center justify-center rounded-full transition-transform duration-200', className, isPrimary ? 'bg-button-primary text-paper hover:!transform hover:!scale-105' : !isBordered ? 'hover:bg-dark/10' : 'border-2 border-dark hover:bg-dark hover:shadow-sm hover:text-paper !transition-bg']} >
+<button class:list={['px-6 py-2 flex gap-2 items-center justify-center rounded-full transition-transform duration-200', className, isPrimary ? 'bg-dark text-paper' : !isBordered ? 'hover:bg-dark border-2 border-dark hover:text-paper' : 'border-2 border-dark hover:bg-dark hover:shadow-sm hover:text-paper !transition-bg']} >
   <slot />
 </button>
 <style>
   button {
-    font-family: "Bricolage Grotesque", sans-serif !important;
+    font-size: .9rem;
-    font-optical-sizing: auto;
-    font-style: normal;
-    font-variation-settings: "wdth" 100;
   }
 </style>

src/components/Circles.astro

@@ -1,3 +1,18 @@
 ---
 // Circles.astro
+const sizes = [216, 396, 576, 756]
+const borderWidths = [20, 30, 40, 50]
 ---
+<div id="circles" class="absolute inset-0 overflow-hidden pointer-events-none -z-10">
+  <div class="absolute left-1/2 top-0 opacity-10 translate-y-[-90%] lg:opacity-100  -translate-x-1/2 lg:-translate-y-1/2">
+    {[...Array(4)].map((_, i) => (
+      <div class="absolute rounded-full border-coral -translate-x-1/2 -translate-y-1/2"
+       style={{
+        width: `${sizes[i]}px`,
+        height: `${sizes[i]}px`,
+        borderWidth: `${borderWidths[i]}px`,
+        }}
+      />
+      ))}
+  </div>
+</div>

src/components/Description.astro

@@ -4,14 +4,4 @@ const { class: className } = Astro.props;
 
 <p class:list={[className]}>
   <slot />
-</p>
+</p>
-<style>
-  h1 {
-    font-size: 1.2rem;
-    line-height: 1;
-    font-family: "Bricolage Grotesque", sans-serif;
-    font-optical-sizing: auto;
-    font-style: normal;
-    font-variation-settings: "wdth" 100;
-  }
-</style>

src/components/Hero.astro

@@ -0,0 +1,32 @@
+---
+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 } from 'lucide-astro'
+---
+
+<header
+  id="header"
+  class="flex h-screen w-full flex-col items-center gap-24 pt-24 text-center md:gap-[15%] md:pt-[30%]"
+>
+<Circles />
+  <div class="flex flex-col items-center">
+    <Title class='text-center leading-[108px]'>Welcome to<br class="hidden md:block" /> a calmer internet</Title>
+    <Description class='text-center'
+      >Beautifully designed, privacy-focused, and packed with features.<br
+      />We care about your experience, not your data.</Description
+    >
+    <div class="mt-6 gap-3 sm:gap-6 flex flex-col sm:flex-row">
+      <Button isPrimary>
+        Download
+        <ArrowRight class="size-4" />
+      </Button>
+      <Button>Start Exploring</Button>
+    </div>
+  </div>
+  <Image src={myImage} alt="Zen browser" class="mt-10" />
+  <!-- <img src="/browser.webp" id="header-browser-image" alt="Zen browser" /> -->
+</header>

src/components/NavBar.astro

@@ -0,0 +1,51 @@
+
+---
+import Title from '../components/Title.astro'
+import Description from '../components/Description.astro'
+import Button from '../components/Button.astro'
+import { Astronav, MenuItems, MenuIcon, Dropdown, DropdownItems, DropdownSubmenu } from "astro-navbar";
+import { ArrowRight, ChevronDown } from 'lucide-astro'
+---
+
+<nav
+  id="nav-bar"
+  class="fixed flex justify-between w-full items-center pt-6 px-6 z-10 top-0 left-0" 
+>
+  <div class="font-bold text-lg">
+    zen browser
+  </div>
+  <Astronav>
+    <MenuItems class="rounded-full border-dark border-2 p-2 pl-4 backdrop-blur-xl bg-paper/30 hidden lg:flex">
+      <ul class="gap-6 lg:flex items-center">
+        <Dropdown class="group">
+          <button class="flex items-center">
+            <span>Getting Started</span>
+            <ChevronDown class="group-open:rotate-180 transform transition-transform duration-200" />
+          </button>
+          <DropdownItems>
+            <div class="absolute top-0">
+              wad
+            </div>
+          </DropdownItems>
+        </Dropdown>
+        <Dropdown class="group">
+          <button class="flex items-center">
+            <span>Useful Links</span>
+            <ChevronDown class="group-open:rotate-180 transform transition-transform duration-200" />
+          </button>
+          <DropdownItems>
+            <div class="absolute top-0">
+              wad
+            </div>
+          </DropdownItems>
+        </Dropdown>
+        <button class="flex items-center">
+          <span>Mods</span>
+        </button>
+        <Button>
+          Download
+          <ArrowRight class="size-4" />
+        </Button>
+    </MenuItems>
+  </Astronav> 
+</nav>

src/components/Title.astro

@@ -2,7 +2,7 @@
 const { class: className } = Astro.props
 ---
 
-<h1 class:list={[className]}>
+<h1 class:list={["text-dark", className]}>
   <slot />
 </h1>
 <style>
@@ -13,10 +13,10 @@ const { class: className } = Astro.props
 
   h1 {
     font-size: 6rem;
-    line-height: 1.5;
+    line-height: 0.9;
     margin-bottom: 0.4rem;
     font-family: 'Junicode', serif;
-    font-weight: 500;
+    font-weight: 600;
     font-variation-settings: unset;
     font-style: normal;
   }

src/layouts/Layout.astro

@@ -4,6 +4,8 @@ interface Props {
 }
 
 const { title } = Astro.props;
+import "@fontsource/bricolage-grotesque/400.css";
+import NavBar from "../components/NavBar.astro";
 ---
 
 <!doctype html>
@@ -32,8 +34,9 @@ const { title } = Astro.props;
 		 <link rel="preconnect" href="https://fonts.bunny.net">
 		 <link href="https://fonts.bunny.net/css?family=bricolage-grotesque:200,300,400,500,600,700,800|instrument-serif:400,400i" rel="stylesheet" />
 	</head>
-	<body class="bg-paper">
+	<body class="bg-paper font-['bricolage-grotesque']">
 		<slot />
+		<NavBar />
 	</body>
 </html>
 <style is:global>
@@ -41,5 +44,12 @@ const { title } = Astro.props;
 		margin: 0;
 		padding: 0;
 		box-sizing: border-box;
+
+    font-size: 18px;
+    font-family: "Bricolage Grotesque", sans-serif;
+    font-optical-sizing: auto;
+    font-style: normal;
+    font-weight: 500;
+    font-variation-settings: "wdth" 100;
 	}
 </style>

src/pages/index.astro

@@ -1,84 +1,12 @@
 ---
 import Layout from '../layouts/Layout.astro'
-import Title from '../components/Title.astro'
+import Hero from '../components/Hero.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, Lock, Check, HeartHandshake, Shield } from 'lucide-astro'
 ---
 
 <Layout title="Welcome to Zen">
   <main>
-    <header
+    <Hero />
-      id="header"
+    <!-- <div class="h-[500px]" /> -->
-      class="flex h-screen w-full flex-col items-center gap-24 overflow-hidden pt-24 text-center md:gap-[15%] md:pt-[15%]"
-    >
-      <Circles />
-      <div class="flex flex-col items-center">
-        <Title class:list={['text-center']}>Welcome to a calmer internet</Title>
-        <Description class:list={['text-center']}
-          >Beautifully designed, privacy-focused, and packed with features.<br
-          />We care about your experience, not your data.</Description
-        >
-        <div class="mt-6 gap-6 md:flex">
-          <Button isPrimary>Download</Button>
-          <Button>mods page</Button>
-        </div>
-      </div>
-      <Image
-        src={myImage}
-        id="header-browser-image"
-        alt="Zen browser"
-        loading="eager"
-      />
-      <!-- <img src="/browser.webp" id="header-browser-image" alt="Zen browser" /> -->
-    </header>
-    <div
-      class="flex h-screen flex-col items-center justify-center overflow-hidden bg-dark text-paper lg:flex-row lg:gap-24 lg:p-24"
-    >
-      <div class:list={['m-24 lg:m-0 lg:ml-24 lg:w-1/3']}>
-        <Title>Designed to maximize your productivity</Title>
-        <Description
-          >Our browser is designed to be as minimal as possible, so you can
-          focus on what matters most.</Description
-        >
-      </div>
-      <div class="h-2/3 w-1/3 rounded-lg bg-paper shadow-sm"></div>
-    </div>
-    <div
-      class="flex h-screen flex-col items-center justify-center overflow-hidden lg:flex-row lg:gap-12"
-    >
-      <div class:list={['flex h-2/3 flex-col px-12 lg:w-2/4']}>
-        <Title>Customizable, down to the last pixel</Title>
-        <Description
-          >Zen is built to be as customizable as possible, so you can make it
-          your own.</Description
-        >
-        <Description class="mt-3"
-          >Either by using our built-in themes generator and customization
-          tools, using custom CSS, or using community-made mods, the only limit
-          is your imagination.</Description
-        >
-        <div
-          class="mt-10 mt-auto h-full w-full rounded-md bg-dark text-paper shadow-md"
-        >
-          VIDEO HERE
-        </div>
-      </div>
-      <div
-        class:list={[
-          'flex h-2/3 flex-col justify-end rounded-lg bg-zen-blue p-12 text-paper shadow-sm lg:w-1/3',
-        ]}
-      >
-        <Title>Private, Open Source, and Secure</Title>
-        <Description
-          >Our browser is built onto the Firefox engine, so you can trust that
-          your data is safe with us.</Description
-        >
-      </div>
-    </div>
   </main>
 </Layout>
 <style>

tailwind.config.mjs

@@ -3,11 +3,14 @@ export default {
 	content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
 	theme: {
 		extend: {
+			screens: {
+				'-md': '@media (min-width: 768px)',
+				'-lg': '@media (min-width: 1024px)',
+			},
 			colors: {
 				"paper": "#F2F0E3",
 				"coral": "#F76F53",
 				"dark": "#202020",
-				"button-primary": "#c95d47",
 				"zen-blue": "#6287f5",
 				"zen-green": "#63f78b",
 			},