From a86130fc07c4718aee5b8e4527e67e2d3521bb25 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?mr=2E=20m=20=20=F0=9F=A4=99?=
 <91018726+mr-cheff@users.noreply.github.com>
Date: Thu, 21 Nov 2024 12:49:29 +0000
Subject: [PATCH] Feat: add lucide-astro icons, enhance Button component with
 bordered option, and update layout styles

---
 package-lock.json           | 29 +++++++++++++++
 package.json                |  1 +
 src/components/Button.astro |  4 +-
 src/components/Title.astro  |  1 +
 src/layouts/Layout.astro    |  2 +-
 src/pages/index.astro       | 73 ++++++++++++++++++++++++++++++-------
 tailwind.config.mjs         |  3 ++
 7 files changed, 96 insertions(+), 17 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 61aea0e..4c63599 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
         "@astrojs/tailwind": "^5.1.2",
         "astro": "^4.16.13",
         "autoprefixer": "10.4.14",
+        "lucide-astro": "^0.460.0",
         "motion": "^11.11.17",
         "postcss": "8.4.21",
         "prettier": "^3.3.3",
@@ -1775,6 +1776,17 @@
         "@types/unist": "*"
       }
     },
+    "node_modules/@types/node": {
+      "version": "22.9.1",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.9.1.tgz",
+      "integrity": "sha512-p8Yy/8sw1caA8CdRIQBG5tiLHmxtQKObCijiAa9Ez+d4+PRffM4054xbju0msf+cvhJpnFEeNjxmVT/0ipktrg==",
+      "license": "MIT",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "undici-types": "~6.19.8"
+      }
+    },
     "node_modules/@types/unist": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
@@ -3631,6 +3643,15 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/lucide-astro": {
+      "version": "0.460.0",
+      "resolved": "https://registry.npmjs.org/lucide-astro/-/lucide-astro-0.460.0.tgz",
+      "integrity": "sha512-4iteWvZ2l/KjXXKnaKXdeCXOd2zsO6gqdhSm7krjYgDlb68mPpylPSvWciBP26h2IRKkorKqkkKCmkFBbChFiA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "astro": ">=2.7.1"
+      }
+    },
     "node_modules/magic-string": {
       "version": "0.30.13",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.13.tgz",
@@ -6076,6 +6097,14 @@
         "semver": "^7.3.8"
       }
     },
+    "node_modules/undici-types": {
+      "version": "6.19.8",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.19.8.tgz",
+      "integrity": "sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==",
+      "license": "MIT",
+      "optional": true,
+      "peer": true
+    },
     "node_modules/unified": {
       "version": "11.0.5",
       "resolved": "https://registry.npmjs.org/unified/-/unified-11.0.5.tgz",
diff --git a/package.json b/package.json
index d4cb6b5..b8232c9 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     "@astrojs/tailwind": "^5.1.2",
     "astro": "^4.16.13",
     "autoprefixer": "10.4.14",
+    "lucide-astro": "^0.460.0",
     "motion": "^11.11.17",
     "postcss": "8.4.21",
     "prettier": "^3.3.3",
diff --git a/src/components/Button.astro b/src/components/Button.astro
index b06bd10..d8eb443 100644
--- a/src/components/Button.astro
+++ b/src/components/Button.astro
@@ -1,8 +1,8 @@
 ---
-const { class: className, isPrimary, } = Astro.props;
+const { class: className, isPrimary, isBordered } = Astro.props;
 ---
 
-<button class:list={['px-4 py-2 rounded-full transition-transform duration-200', className, isPrimary ? 'bg-coral opacity-60 text-paper hover:!transform hover:!scale-105' : 'hover:bg-coral/10']}>
+<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']} >
   <slot />
 </button>
 <style>
diff --git a/src/components/Title.astro b/src/components/Title.astro
index 0ddfc51..c380c68 100644
--- a/src/components/Title.astro
+++ b/src/components/Title.astro
@@ -12,6 +12,7 @@ const { class: className } = Astro.props;
     margin-bottom: .4rem;
     font-family: "Instrument Serif", serif;
     font-weight: 400;
+    font-variation-settings: unset;
     font-style: normal;
   }
 </style>
\ No newline at end of file
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 9985e75..be40ee4 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -20,7 +20,7 @@ const { title } = Astro.props;
 		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 		<link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&family=Instrument+Serif:ital@0;1&display=swap" rel="stylesheet">
 	</head>
-	<body class="bg-paper/60">
+	<body class="bg-paper">
 		<slot />
 	</body>
 </html>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 55ae497..15cb0b0 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -3,27 +3,72 @@ import Layout from '../layouts/Layout.astro';
 import Title from '../components/Title.astro';
 import Description from '../components/Description.astro';
 import Button from '../components/Button.astro';
+import { Github, Lock, Check, HeartHandshake, Shield } from 'lucide-astro'
 ---
 
 <Layout title="Welcome to Zen">
     <main>
-        <header id="header" class="h-[75vh] relative w-full flex flex-col items-center mt-64 gap-6 overflow-hidden">
+        <header id="header" class="h-screen w-full flex flex-col items-center gap-24 pt-36 overflow-hidden">
             <div class="flex flex-col items-center">
                 <Title class:list={["text-center"]}>The browser made for <i>you</i></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>
-						<div class="gap-6 flex">
-							<Button isPrimary>Download</Button>
-							<Button>mods page</Button>
-						</div>
-						<img src="/assets/browser.png" alt="Zen browser" class="absolute left-[50%] bottom-[-55%] transform translate-x-[-50%]" />
-        </header>
-				<div class="h-screen bg-dark text-paper flex gap-24 justify-center items-center p-24">
-					<div class:list={["w-1/3 ml-24"]}>
-						<Title>Designed to be distraction-free</Title>
-						<Description>Our browser is designed to be as minimal as possible, so you can focus on what matters most.</Description>
-					</div>
-					<img src="/assets/browser.png" alt="Zen browser" class:list={["w-1/2"]} />
+				<div class="gap-6 flex mt-6">
+					<Button isPrimary>Download</Button>
+					<Button>mods page</Button>
 				</div>
+			</div>
+			<img src="/assets/browser.png" alt="Zen browser" class="" />
+        </header>
+		<div class="h-screen bg-dark text-paper flex gap-24 justify-center items-center p-24">
+			<div class:list={["w-1/3 ml-24"]}>
+				<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>
+			<img src="/assets/browser.png" alt="Zen browser" class:list={["w-1/2"]} />
+		</div>
+		<div class="lg:h-screen">
+			<div class="lg:flex w-full h-full">
+				<div class="w-full bg-zen-blue border-r border-dark p-24 lg:py-0 flex items-center justify-center flex-col">
+					<div>
+						<div class="flex gap-2">
+							<Lock />
+							<HeartHandshake /> 
+							<Shield />
+						</div>
+						<Title>Private, Open Source, and Secure</Title>
+						<Description>Our browser is built on the Firefox engine, so you can trust that your data is safe and secure.</Description>
+						<div class="mt-4">
+							<Description class="flex gap-2">
+								<Check />
+								Always on the latest Firefox
+							</Description>
+							<Description class="flex gap-2">
+								<Check />
+								No accounts needed, no tracking and no ads
+							</Description>
+							<Description class="flex gap-2">
+								<Check />
+								Open source and community-driven
+							</Description>
+						</div>
+						<div class="flex gap-4 mt-6">
+							<Button isBordered>
+								<Github />
+								Source Code
+							</Button>
+							<Button>
+								Learn more
+							</Button>
+						</div>
+					</div>
+				</div>
+				<div class="w-full bg-zen-green border-l border-dark p-24 lg:py-0 flex items-center justify-center flex-col">
+
+				</div>
+			</div>
+			<div class="w-full border-2 border-dark bg-coral py-4 flex">
+
+			</div>
+		</div>
     </main>
 </Layout>
diff --git a/tailwind.config.mjs b/tailwind.config.mjs
index 5d4c330..942fc5c 100644
--- a/tailwind.config.mjs
+++ b/tailwind.config.mjs
@@ -7,6 +7,9 @@ export default {
 				"paper": "#F2F0E3",
 				"coral": "#F76F53",
 				"dark": "#202020",
+				"button-primary": "#c95d47",
+				"zen-blue": "#537CF7",
+				"zen-green": "#53F77F",
 			},
 		},
 	},