mirror of
https://github.com/zen-browser/www.git
synced 2025-07-07 17:05:32 +02:00
Feat: add lucide-astro icons, enhance Button component with bordered option, and update layout styles
This commit is contained in:
mr. m 🤙
parent
f0b2c7a96d
commit
a86130fc07
7 changed files with 96 additions and 17 deletions
29
package-lock.json
generated
29
package-lock.json
generated
|
|
@ -12,6 +12,7 @@
|
||||||
"@astrojs/tailwind": "^5.1.2",
|
"@astrojs/tailwind": "^5.1.2",
|
||||||
"astro": "^4.16.13",
|
"astro": "^4.16.13",
|
||||||
"autoprefixer": "10.4.14",
|
"autoprefixer": "10.4.14",
|
||||||
|
"lucide-astro": "^0.460.0",
|
||||||
"motion": "^11.11.17",
|
"motion": "^11.11.17",
|
||||||
"postcss": "8.4.21",
|
"postcss": "8.4.21",
|
||||||
"prettier": "^3.3.3",
|
"prettier": "^3.3.3",
|
||||||
|
|
@ -1775,6 +1776,17 @@
|
||||||
"@types/unist": "*"
|
"@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": {
|
"node_modules/@types/unist": {
|
||||||
"version": "3.0.3",
|
"version": "3.0.3",
|
||||||
"resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
|
"resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
|
||||||
|
|
@ -3631,6 +3643,15 @@
|
||||||
"yallist": "^3.0.2"
|
"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": {
|
"node_modules/magic-string": {
|
||||||
"version": "0.30.13",
|
"version": "0.30.13",
|
||||||
"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.13.tgz",
|
"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.13.tgz",
|
||||||
|
|
@ -6076,6 +6097,14 @@
|
||||||
"semver": "^7.3.8"
|
"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": {
|
"node_modules/unified": {
|
||||||
"version": "11.0.5",
|
"version": "11.0.5",
|
||||||
"resolved": "https://registry.npmjs.org/unified/-/unified-11.0.5.tgz",
|
"resolved": "https://registry.npmjs.org/unified/-/unified-11.0.5.tgz",
|
||||||
|
|
|
||||||
|
|
@ -14,6 +14,7 @@
|
||||||
"@astrojs/tailwind": "^5.1.2",
|
"@astrojs/tailwind": "^5.1.2",
|
||||||
"astro": "^4.16.13",
|
"astro": "^4.16.13",
|
||||||
"autoprefixer": "10.4.14",
|
"autoprefixer": "10.4.14",
|
||||||
|
"lucide-astro": "^0.460.0",
|
||||||
"motion": "^11.11.17",
|
"motion": "^11.11.17",
|
||||||
"postcss": "8.4.21",
|
"postcss": "8.4.21",
|
||||||
"prettier": "^3.3.3",
|
"prettier": "^3.3.3",
|
||||||
|
|
|
||||||
|
|
@ -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 />
|
<slot />
|
||||||
</button>
|
</button>
|
||||||
<style>
|
<style>
|
||||||
|
|
|
||||||
|
|
@ -12,6 +12,7 @@ const { class: className } = Astro.props;
|
||||||
margin-bottom: .4rem;
|
margin-bottom: .4rem;
|
||||||
font-family: "Instrument Serif", serif;
|
font-family: "Instrument Serif", serif;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
|
font-variation-settings: unset;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -20,7 +20,7 @@ const { title } = Astro.props;
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
<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">
|
<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>
|
</head>
|
||||||
<body class="bg-paper/60">
|
<body class="bg-paper">
|
||||||
<slot />
|
<slot />
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -3,27 +3,72 @@ import Layout from '../layouts/Layout.astro';
|
||||||
import Title from '../components/Title.astro';
|
import Title from '../components/Title.astro';
|
||||||
import Description from '../components/Description.astro';
|
import Description from '../components/Description.astro';
|
||||||
import Button from '../components/Button.astro';
|
import Button from '../components/Button.astro';
|
||||||
|
import { Github, Lock, Check, HeartHandshake, Shield } from 'lucide-astro'
|
||||||
---
|
---
|
||||||
|
|
||||||
<Layout title="Welcome to Zen">
|
<Layout title="Welcome to Zen">
|
||||||
<main>
|
<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">
|
<div class="flex flex-col items-center">
|
||||||
<Title class:list={["text-center"]}>The browser made for <i>you</i></Title>
|
<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>
|
<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 mt-6">
|
||||||
<div class="gap-6 flex">
|
<Button isPrimary>Download</Button>
|
||||||
<Button isPrimary>Download</Button>
|
<Button>mods page</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>
|
</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>
|
</main>
|
||||||
</Layout>
|
</Layout>
|
||||||
|
|
|
||||||
|
|
@ -7,6 +7,9 @@ export default {
|
||||||
"paper": "#F2F0E3",
|
"paper": "#F2F0E3",
|
||||||
"coral": "#F76F53",
|
"coral": "#F76F53",
|
||||||
"dark": "#202020",
|
"dark": "#202020",
|
||||||
|
"button-primary": "#c95d47",
|
||||||
|
"zen-blue": "#537CF7",
|
||||||
|
"zen-green": "#53F77F",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue