From 97d617f22c3f39a071c1edf4923053b4ab6ea58b Mon Sep 17 00:00:00 2001 From: Vrezh Fedora Date: Thu, 6 Feb 2025 11:04:05 +0100 Subject: [PATCH] feat(NavBar, hero Image): added new navbar animations + mobile version, fixed hero image on mobile --- src/animations.ts | 6 +- src/components/Hero.astro | 8 +- src/components/Logo.astro | 5 ++ src/components/MobileNavBar.tsx | 155 ++++++++++++++++++++++++++++++++ src/components/Mylogo.tsx | 37 ++++++++ src/components/NavBar.astro | 32 ++++--- src/layouts/Layout.astro | 2 + tailwind.config.mjs | 14 +++ 8 files changed, 241 insertions(+), 18 deletions(-) create mode 100644 src/components/MobileNavBar.tsx create mode 100644 src/components/Mylogo.tsx diff --git a/src/animations.ts b/src/animations.ts index dc5de1f..dce498c 100644 --- a/src/animations.ts +++ b/src/animations.ts @@ -1,13 +1,13 @@ -export function getTitleAnimation(delay = 0) { +export function getTitleAnimation(delay = 0, duration = 0.3, once = true) { return { initial: { opacity: 0, translateY: 20, filter: 'blur(4px)' }, whileInView: { opacity: 1, translateY: 0, filter: 'blur(0px)', - transition: { duration: 0.3, delay }, + transition: { duration, delay }, }, - viewport: { once: true }, + viewport: { once: once }, } } diff --git a/src/components/Hero.astro b/src/components/Hero.astro index bc86f8e..ef8375a 100644 --- a/src/components/Hero.astro +++ b/src/components/Hero.astro @@ -63,11 +63,15 @@ function getHeroTitleAnimation() { - + Zen browser diff --git a/src/components/Logo.astro b/src/components/Logo.astro index 7a5be94..d892917 100644 --- a/src/components/Logo.astro +++ b/src/components/Logo.astro @@ -1,4 +1,9 @@ +--- +const { class: className } = Astro.props +--- + { + const [isMenuOpen, setMenuOpen] = useState(false) + + const menuTransformClass = isMenuOpen ? 'translate-x-0' : 'translate-x-full' + + return ( +
+ {/* Mobile Header */} +
+ + + zen browser + + +
+ + {/* Mobile Slide Menu (slides in from the right) */} +
+
+
Menu
+ +
+ +
+ + {/* Overlay for Mobile Menu */} + {isMenuOpen && ( +
setMenuOpen(false)} + /> + )} +
+ ) +} + +export default MobileNavbar diff --git a/src/components/Mylogo.tsx b/src/components/Mylogo.tsx new file mode 100644 index 0000000..2015eae --- /dev/null +++ b/src/components/Mylogo.tsx @@ -0,0 +1,37 @@ +import React from 'react' + +interface MyLogoProps { + className?: string +} + +const MyLogo: React.FC = ({ className }) => ( + + + + + +) + +export default MyLogo diff --git a/src/components/NavBar.astro b/src/components/NavBar.astro index fb06e84..3109594 100644 --- a/src/components/NavBar.astro +++ b/src/components/NavBar.astro @@ -1,4 +1,5 @@ --- +import { motion } from 'motion/react' import Title from '../components/Title.astro' import Description from '../components/Description.astro' import Button from '../components/Button.astro' @@ -13,21 +14,22 @@ import { import { ArrowRight, ChevronDown, Download, DownloadCloud } from 'lucide-astro' import Logo from './Logo.astro' import { ThemeSwitch } from 'free-astro-components' +import { getTitleAnimation } from '../animations.ts' ---
-
+
@@ -129,10 +135,10 @@ import { ThemeSwitch } from 'free-astro-components' +