diff --git a/package-lock.json b/package-lock.json index 1196c66..324e78f 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index f0027f9..64c27ec 100644 --- a/package.json +++ b/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", diff --git a/src/components/Button.astro b/src/components/Button.astro index d8eb443..161f79e 100644 --- a/src/components/Button.astro +++ b/src/components/Button.astro @@ -2,14 +2,11 @@ const { class: className, isPrimary, isBordered } = Astro.props; --- - \ No newline at end of file diff --git a/src/components/Circles.astro b/src/components/Circles.astro index 5b07259..e00e0db 100644 --- a/src/components/Circles.astro +++ b/src/components/Circles.astro @@ -1,3 +1,18 @@ --- // Circles.astro +const sizes = [216, 396, 576, 756] +const borderWidths = [20, 30, 40, 50] --- +
+
+ {[...Array(4)].map((_, i) => ( +
+ ))} +
+
\ No newline at end of file diff --git a/src/components/Description.astro b/src/components/Description.astro index 68c97e5..3422f83 100644 --- a/src/components/Description.astro +++ b/src/components/Description.astro @@ -4,14 +4,4 @@ const { class: className } = Astro.props;

-

- \ No newline at end of file +

\ No newline at end of file diff --git a/src/components/Hero.astro b/src/components/Hero.astro new file mode 100644 index 0000000..e01bdd5 --- /dev/null +++ b/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' +--- + + \ No newline at end of file diff --git a/src/components/NavBar.astro b/src/components/NavBar.astro new file mode 100644 index 0000000..d213516 --- /dev/null +++ b/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' +--- + + diff --git a/src/components/Title.astro b/src/components/Title.astro index 04c2b00..320e354 100644 --- a/src/components/Title.astro +++ b/src/components/Title.astro @@ -2,7 +2,7 @@ const { class: className } = Astro.props --- -

+

diff --git a/src/pages/index.astro b/src/pages/index.astro index b5de842..ec520d1 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -1,84 +1,12 @@ --- 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 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' +import Hero from '../components/Hero.astro' ---
- -
-
- Designed to maximize your productivity - Our browser is designed to be as minimal as possible, so you can - focus on what matters most. -
-
-
-
-
- Customizable, down to the last pixel - Zen is built to be as customizable as possible, so you can make it - your own. - 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. -
- VIDEO HERE -
-
-
- Private, Open Source, and Secure - Our browser is built onto the Firefox engine, so you can trust that - your data is safe with us. -
-
+ +