feat: add download page and update button links; remove favicon.svg and release notes page

package-lock.json

@@ -14,6 +14,7 @@
         "astro": "^4.16.13",
         "astro-navbar": "^2.3.7",
         "autoprefixer": "10.4.14",
+        "free-astro-components": "^1.1.1",
         "lucide-astro": "^0.460.0",
         "motion": "^11.13.1",
         "postcss": "8.4.21",
@@ -2971,6 +2972,79 @@
         }
       }
     },
+    "node_modules/free-astro-components": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/free-astro-components/-/free-astro-components-1.1.1.tgz",
+      "integrity": "sha512-yCxo9TrXuVn5jejd7Pt3GjxKrvpZQaCVya9B7XXtSk9KERIsWO5zBMqbfn73eVsZAFk57BRUVQjdhO0ic2lB1w==",
+      "dependencies": {
+        "@astrojs/check": "^0.8.2",
+        "astro": "^4.12.2",
+        "typescript": "^5.5.3"
+      }
+    },
+    "node_modules/free-astro-components/node_modules/@astrojs/check": {
+      "version": "0.8.3",
+      "resolved": "https://registry.npmjs.org/@astrojs/check/-/check-0.8.3.tgz",
+      "integrity": "sha512-ajcSe+ezX5jCc3dreQlWzbknzXgSGnDETNe3C1mawUOtGpO4t5z2YGaD0y+wzB84lmgPWaWZa0fKSPwLq/wUHw==",
+      "dependencies": {
+        "@astrojs/language-server": "^2.12.7",
+        "chokidar": "^3.5.3",
+        "fast-glob": "^3.3.1",
+        "kleur": "^4.1.5",
+        "yargs": "^17.7.2"
+      },
+      "bin": {
+        "astro-check": "dist/bin.js"
+      },
+      "peerDependencies": {
+        "typescript": "^5.0.0"
+      }
+    },
+    "node_modules/free-astro-components/node_modules/chokidar": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
+      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/free-astro-components/node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/free-astro-components/node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
     "node_modules/fsevents": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",

package.json

@@ -16,6 +16,7 @@
     "astro": "^4.16.13",
     "astro-navbar": "^2.3.7",
     "autoprefixer": "10.4.14",
+    "free-astro-components": "^1.1.1",
     "lucide-astro": "^0.460.0",
     "motion": "^11.13.1",
     "postcss": "8.4.21",

public/favicon.svg

@@ -1,9 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
-    <path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
-    <style>
-        path { fill: #000; }
-        @media (prefers-color-scheme: dark) {
-            path { fill: #FFF; }
-        }
-    </style>
-</svg>

src/components/Button.astro

@@ -1,10 +1,16 @@
 ---
-const { class: className, isPrimary, isBordered } = Astro.props;
+const { class: className, isPrimary, isBordered, href } = Astro.props;
 ---
 
-<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>
+{href ? (
+  <a href={href} 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 />
+  </a>
+) : (
+  <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-size: .9rem;

src/components/Circles.astro

@@ -1,18 +1,17 @@
 ---
-// Circles.astro
+const { white, multiplier = 0.9, class: classList } = Astro.props;
 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">
+<div id="circles" class:list={["inset-0 overflow-hidden pointer-events-none", classList]}>
   <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"
+      <div class:list={["absolute rounded-full -translate-x-1/2 -translate-y-1/2", white ? "border-white" : "border-coral"]}
        style={{
-        width: `${multiplier*sizes[i]}px`,
-        height: `${multiplier*sizes[i]}px`,
-        borderWidth: `${multiplier*borderWidths[i]}px`,
-        }}
+          width: `${multiplier*sizes[i]}px`,
+          height: `${multiplier*sizes[i]}px`,
+          borderWidth: `${multiplier*borderWidths[i]}px`,
+          }}
       />
       ))}
   </div>

src/components/Footer.astro

@@ -10,15 +10,21 @@ 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"
+  class="flex flex-col w-full p-4 lg:p-24 !pb-0 gap-24 md:gap-[15%] bg-dark text-paper border-t border-dark relative overflow-hidden"
 >
-  <Title>Zen Browser</Title>
-  <div class="flex flex-col justify-between w-full lg:flex-row gap-6">
-    <Button isPrimary class="h-fit">
+  <div>
+    <Title class="!text-paper">Zen Browser</Title>
+    <Description class="w-1/3">
+      Beautifully designed, privacy-focused, and packed with features. We care
+      about your experience, not your data.
+    </Description>
+  </div>
+  <div class="flex flex-col justify-between w-full lg:flex-row gap-6 lg:pr-52 my-12">
+    <Button href="/download" isPrimary class="h-fit bg-paper !text-dark">
       Download
       <ArrowRight class="size-4" />
     </Button>
-    <div class="gap-6 flex flex-col">
+    <div class="gap-10 flex flex-col">
       <div class="flex flex-col gap-2">
         <Description class="!font-semibold">
           Follow Us
@@ -34,40 +40,40 @@ import { ArrowRight, Github, Twitter } from 'lucide-astro'
       </div>
       <div class="flex flex-col gap-2">
         <Description class="!font-semibold">
-          About
+          About Us
         </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>
+          <a href="/privacy-policy" class="font-normal">Privacy Policy</a>
+          <a href="https://github.com/zen-browser/desktop/issues/new/choose" class="font-normal">Report an Issue</a>
         </div>
       </div>
     </div>
     <div class="flex flex-col gap-2">
       <Description class="!font-semibold">
-        About
+        Get Started
       </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>
+        <a href="/download" class="font-normal">Download</a>
+        <a href="/mods" class="font-normal">Zen Mods</a>
+        <a href="/release-notes" class="font-normal">Release Notes</a>
+        <a href="download?twilight" class="font-normal">Twilight</a>
       </div>
     </div>
     <div class="flex flex-col gap-2">
       <Description class="!font-semibold">
-        About
+        Get Help
       </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>
+        <a href="https://discord.gg/zen-browser" class="font-normal">Discord</a>
+        <a href="https://uptime.zen-browser.app/" class="font-normal">Uptime Status</a>
       </div>
     </div>
   </div>
-</footer>
+  <div class="flex w-full h-32 items-center">
+    <div class="flex">
+      Made with ❤️ by the <a href="/about" class="font-bold inline-block ml-2">Zen Browser Team</a>
+    </div>
+    <Circles white multiplier={0.7} class="ml-auto mb-[-100px] mr-[-80px] hidden lg:block" />
+  </div>  
+</footer>

src/components/Hero.astro

@@ -19,7 +19,7 @@ import { ArrowRight } from 'lucide-astro'
       />We care about your experience, not your data.</Description
     >
     <div class="mt-6 gap-3 sm:gap-6 flex flex-row">
-      <Button isPrimary>
+      <Button href="/download" isPrimary>
         Download
         <ArrowRight class="size-4" />
       </Button>

src/components/NavBar.astro

@@ -100,7 +100,7 @@ import { ArrowRight, ChevronDown } from 'lucide-astro'
         <a class="flex items-center" href="/mods">
           <span>Mods</span>
         </a>
-        <Button isPrimary>
+        <Button href="/download" isPrimary>
           Download
           <ArrowRight class="size-4" />
         </Button>

src/components/ReleaseNoteItem.astro

@@ -1,9 +1,13 @@
 ---
-import type { ReleaseNote } from '../release-notes'
-export type Props = ReleaseNote
-const props = Astro.props
+import { Accordion, AccordionItem } from 'free-astro-components'
 
-const date = new Date(Date.parse(props.date));
+import type { ReleaseNote } from '../release-notes'
+export type Props = ReleaseNote;
+const props = Astro.props;
+
+const [day, month, year] = props.date.split('/');
+const date = new Date(Date.parse(`${year}-${month}-${day}`));
+	
 ---
 
 <section
@@ -12,10 +16,10 @@ const date = new Date(Date.parse(props.date));
 	>
 	<div class="mb-0 hidden lg:block ml-5 md:ml-10 mr-24 mt-1 h-fit min-w-52 text-xs text-muted-foreground">
 		{date.toLocaleDateString('en-US', { dateStyle: 'long'})}
-		<div class="mt-2 flex items-center text-blue-500 opacity-60">
-			<a rel="noopener noreferrer" target="_blank" href={`https://github.com/zen-browser/desktop/releases/tag/${props.version}`}>Github Release<a/>
-			<span class="mx-1 text-muted-foreground">•</span>
-			<a rel="noopener noreferrer" target="_blank" href={`https://github.com/zen-browser/desktop/actions/runs/${props.workflowId}`}>Workflow run<a/>
+		<div class="mt-2 flex items-center">
+			<a rel="noopener noreferrer" class="whitespace-nowrap text-sm text-blue-500 opacity-60" target="_blank" href={`https://github.com/zen-browser/desktop/releases/tag/${props.version}`}>Github Release<a/>
+			<span class="text-muted-foreground mx-auto">•</span>
+			<a rel="noopener noreferrer" class="whitespace-nowrap text-sm text-blue-500 opacity-60" target="_blank" href={`https://github.com/zen-browser/desktop/actions/runs/${props.workflowId}`}>Workflow run<a/>
 		</div>
 	</div>
 
@@ -32,9 +36,71 @@ const date = new Date(Date.parse(props.date));
 			) : null
 		}
 		<div class="mt-8" data-orientation="vertical"></div>
-		<!--TODO: Fixes, Breaking changes, Features  -->
-
+		<Accordion>
+			{props.fixes ? (
+				<AccordionItem title="Fixes" name="fixes">
+					<ul class="list-disc list-inside">
+						{props.fixes.map((fix: any) => (
+							<li class="text-md text-muted-foreground">
+								{fix.description}
+								{fix.issue ? (
+									<a
+										class="text-blue-500"
+										href={`https://github.com/zen-browser/desktop/issues/${fix.issue}`}
+										rel="noopener noreferrer"
+										target="_blank"
+									>
+										#{fix.issue}
+									</a>
+								) : null}
+							</li>
+						))}
+					</ul>
+				</AccordionItem>
+			) : null}
+			{props.features ? (
+				<AccordionItem title="Features" name="features">
+					<ul class="list-disc list-inside">
+						{props.features.map((feature: string) => (
+							<li class="text-md text-muted-foreground">{feature}</li>
+						))}
+					</ul>
+				</AccordionItem>
+			) : null}
+			{props.themeChanges ? (
+				<AccordionItem title="Theme Changes" name="themeChanges">
+					<ul class="list-disc list-inside">
+						{props.themeChanges.map((themeChange: string) => (
+							<li class="text-md text-muted-foreground">{themeChange}</li>
+						))}
+					</ul>
+				</AccordionItem>
+			) : null}
+			{props.breakingChanges ? (
+				<AccordionItem title="Breaking Changes" name="breakingChanges">
+					<ul class="list-disc list-inside">
+						{props.breakingChanges.map((breakingChange: string) => (
+							<li class="text-md text-muted-foreground">{breakingChange}</li>
+						))}
+					</ul>
+				</AccordionItem>
+			) : null}
 	</div>
 </section>
+<style is:global>
+	.ac-accordion-item-title {
+		@apply !text-dark;
 
+		&:hover {
+			@apply !text-dark/70;
+		}
+	}
 
+	.ac-accordion-item {
+		transition: height 0.2s ease-in-out !important;
+
+		& li {
+			@apply !text-dark/70;
+		}
+	}
+</style>

src/layouts/Layout.astro

@@ -10,7 +10,7 @@ import Footer from "../components/Footer.astro";
 ---
 
 <!doctype html>
-<html lang="en">
+<html lang="en" data-theme="light">
 	<head>
 		<meta charset="UTF-8" />
 		<!-- no bot here for now -->
@@ -19,7 +19,7 @@ import Footer from "../components/Footer.astro";
 		<!-- end -->
 		<meta name="description" content="Beautifully designed, privacy-focused, and packed with features. We care about your experience, not your data." />
 		<meta name="viewport" content="width=device-width" />
-		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+		<link rel="icon" href="/favicon.ico" />
 		<meta name="generator" content={Astro.generator} />
 		<title>{title}</title>
 		<meta name="theme-color" content="#da755b">
@@ -35,7 +35,7 @@ import Footer from "../components/Footer.astro";
 		 <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 font-['bricolage-grotesque']">
+	<body class="bg-paper font-['bricolage-grotesque'] text-dark">
 		<slot />
 		<Footer />
 		<NavBar />

src/pages/download.astro

@@ -0,0 +1,24 @@
+---
+import Button from '../components/Button.astro'
+import Description from '../components/Description.astro'
+import Title from '../components/Title.astro'
+import Layout from '../layouts/Layout.astro'
+import { Image } from 'astro:assets';
+import myImage from '../assets/app-icon.png';
+---
+
+<Layout title="Welcome to Zen">
+  <main class="h-screen flex flex-col justify-center items-center">
+    <div class="flex">
+      <Image src={myImage } alt="Zen Browser" class="w-24 h-24" />
+      <div class="p-4 mb-24 lg:w-1/2">
+        <Title>Try out Zen!</Title>
+        <Description>
+          Start browsing the web with Zen Browser today. Beautifully designed,
+          privacy-focused, and packed with features!
+        </Description>
+      </div>
+    </div>
+    
+  </main>
+</Layout>

src/pages/release-notes/[...slug].astro

@@ -0,0 +1,14 @@
+---
+import { releaseNotes } from '../../release-notes'
+import Layout from '../../layouts/Layout.astro';
+
+export async function getStaticPaths() {
+  return releaseNotes.map((release: any) => ({
+    params: { slug: release.version },
+    props: { ...release },
+  }));
+}
+
+const release = Astro.props;
+return Astro.redirect(`/release-notes#${release.version}`);
+---

src/pages/release-notes/index.astro

@@ -1,7 +1,8 @@
 ---
-import Layout from '../layouts/Layout.astro'
-import ReleaseNoteItem from '../components/ReleaseNoteItem.astro'
-import { releaseNotes } from '../release-notes'
+import Layout from '../../layouts/Layout.astro'
+import ReleaseNoteItem from '../../components/ReleaseNoteItem.astro'
+import { releaseNotes } from '../../release-notes'
+import Title from '../../components/Title.astro'
 ---
 
 <Layout title="Release Notes">
@@ -11,7 +12,7 @@ import { releaseNotes } from '../release-notes'
 		<div
 			class="py-42 flex min-h-screen flex-col justify-center px-10 lg:px-10 xl:px-10 2xl:w-3/5"
 		>
-			<h1 class="mt-48 text-4xl font-bold">Release Notes</h1>
+			<Title class="mt-48 text-4xl font-bold">Release Notes</Title>
 			<p class="text-muted-foreground mt-8 text-lg">
 				Stay up to date with the latest changes to Zen Browser! Since the <a
 					class="text-blue-500"
@@ -23,7 +24,7 @@ import { releaseNotes } from '../release-notes'
 				>, we've been working hard to make Zen Browser the best it can be.
 				Thanks everyone for your feedback! ❤️
 			</p>
-			{releaseNotes.map((notes) => <ReleaseNoteItem {...notes} />)}
+			{releaseNotes.map((notes: any) => <ReleaseNoteItem {...notes} />)}
 		</div>
 	</main>
 </Layout>