ZenBrowserMirrors/www
1
0
Fork 0
mirror of https://github.com/zen-browser/www.git synced 2025-07-08 17:30:01 +02:00
Code Issues Projects Releases Packages Wiki Activity

Fix Hero component text

Browse source
This commit is contained in:
Amoralchik 2025-05-05 18:02:23 +03:00
parent ffa05b936b
commit 42907cb1d1
No known key found for this signature in database
GPG key ID: BB3E180FAEC8A103
1 changed files with 17 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

22
src/components/Hero.astro
View file

@ -19,6 +19,14 @@ function getNewAnimationDelay() {
function getHeroTitleAnimation() { function getHeroTitleAnimation() {
return getTitleAnimation(getNewAnimationDelay()) return getTitleAnimation(getNewAnimationDelay())
} }
const {
title1 = 'welcome',
title2 = 'to',
title3 = 'a',
title4 = 'calmer',
title5 = 'internet',
} = Astro.props
--- ---
<header <header
@ -30,20 +38,24 @@ function getHeroTitleAnimation() {
class="relative px-12 text-center !font-normal !leading-8 leading-[108px] md:!text-7xl lg:px-0 lg:!text-9xl" class="relative px-12 text-center !font-normal !leading-8 leading-[108px] md:!text-7xl lg:px-0 lg:!text-9xl"
> >
<motion.span client:load {...getHeroTitleAnimation()}> <motion.span client:load {...getHeroTitleAnimation()}>
welcome {title1}
</motion.span>
<motion.span client:load {...getHeroTitleAnimation()}>
{title2}
</motion.span> </motion.span>
<motion.span client:load {...getHeroTitleAnimation()}> to </motion.span>
<br class="hidden md:block" /> <br class="hidden md:block" />
<motion.span client:load {...getHeroTitleAnimation()}> a </motion.span> <motion.span client:load {...getHeroTitleAnimation()}>
{title3}
</motion.span>
<motion.span <motion.span
client:load client:load
{...getHeroTitleAnimation()} {...getHeroTitleAnimation()}
className="italic text-coral" className="italic text-coral"
> >
calmer {title4}
</motion.span> </motion.span>
<motion.span client:load {...getHeroTitleAnimation()}> <motion.span client:load {...getHeroTitleAnimation()}>
internet {title5}
</motion.span> </motion.span>
</Title> </Title>
<motion.span client:load {...getHeroTitleAnimation()}> <motion.span client:load {...getHeroTitleAnimation()}>