Feat: add lucide-astro icons, enhance Button component with bordered option, and update layout styles

This commit is contained in:
mr. m 🤙 2024-11-21 12:49:29 +00:00
parent f0b2c7a96d
commit a86130fc07
7 changed files with 96 additions and 17 deletions

29
package-lock.json generated
View file

@ -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",

View file

@ -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",

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -7,6 +7,9 @@ export default {
"paper": "#F2F0E3",
"coral": "#F76F53",
"dark": "#202020",
"button-primary": "#c95d47",
"zen-blue": "#537CF7",
"zen-green": "#53F77F",
},
},
},