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

chore: adjust hero animation

Browse source
This commit is contained in:
taroj1205 2025-06-06 00:50:48 +12:00
parent 64e904d405
commit d2e0166e64
No known key found for this signature in database
GPG key ID: 0FCB6CFFE0981AB7
4 changed files with 17 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/components/Community.astro
View file

@ -34,12 +34,12 @@ const {
{community.description} {community.description}
</p> </p>
<div class="flex w-full flex-wrap gap-3 sm:gap-10 md:justify-center"> <div class="flex w-full flex-wrap gap-3 sm:gap-10 md:justify-center">
<span class="community__button opacity-0 blur-sm"> <div class="community__button opacity-0 blur-sm">
<Button class:list={['px-4']} href="https://github.com/zen-browser"> <Button class:list={['px-4']} href="https://github.com/zen-browser">
<GitHubIcon class="size-4" /> <GitHubIcon class="size-4" />
<span>{community.lists.freeAndOpenSource.title}</span> <span>{community.lists.freeAndOpenSource.title}</span>
</Button> </Button>
</span> </div>
<div class="community__button flex items-center gap-4 opacity-0 blur-sm"> <div class="community__button flex items-center gap-4 opacity-0 blur-sm">
<CheckIcon class="size-4" /> <CheckIcon class="size-4" />
<span>{community.lists.simpleYetPowerful.title}</span> <span>{community.lists.simpleYetPowerful.title}</span>
@ -74,7 +74,7 @@ const {
filter: { from: 'blur(4px)', to: 'blur(0px)' }, filter: { from: 'blur(4px)', to: 'blur(0px)' },
duration: 300, duration: 300,
delay: stagger(150), delay: stagger(150),
easing: 'easeOutQuart', ease: 'cubicBezier(0.25, 0.1, 0.25, 1)',
autoplay: onScroll({ autoplay: onScroll({
target: '#community', target: '#community',
debug, debug,

2
src/components/Features.astro
View file

@ -113,7 +113,7 @@ const featureList = [
filter: { from: 'blur(4px)', to: 'blur(0px)' }, filter: { from: 'blur(4px)', to: 'blur(0px)' },
duration: 300, duration: 300,
delay: stagger(150), delay: stagger(150),
easing: 'easeOutQuart', ease: 'cubicBezier(0.25, 0.1, 0.25, 1)',
autoplay: onScroll({ autoplay: onScroll({
target: '#features', target: '#features',
debug, debug,

17
src/components/Hero.astro
View file

@ -44,21 +44,18 @@ const {
<div <div
class="flex w-2/3 flex-col items-center justify-center gap-3 sm:gap-6 md:w-fit md:flex-row" class="flex w-2/3 flex-col items-center justify-center gap-3 sm:gap-6 md:w-fit md:flex-row"
> >
<Button <div class="hero__link-group_button opacity-0 blur-sm">
class="hero__link-group_button w-fit opacity-0 blur-sm" <Button class="w-fit" href={getLocalePath('/download')} isPrimary>
href={getLocalePath('/download')}
isPrimary
>
{hero.buttons.beta} {hero.buttons.beta}
<ArrowRightIcon class="size-4" /> <ArrowRightIcon class="size-4" />
</Button> </Button>
<Button </div>
href={getLocalePath('/donate')} <div class="hero__link-group_button opacity-0 blur-sm">
class="hero__link-group_button w-fit opacity-0 blur-sm" <Button class="w-fit" href={getLocalePath('/donate')}>
>
{hero.buttons.support} {hero.buttons.support}
</Button> </Button>
</div> </div>
</div>
<SocialMediaStrip class="blur-sm" opacity={0} /> <SocialMediaStrip class="blur-sm" opacity={0} />
</div> </div>
<Video <Video
@ -95,7 +92,7 @@ const {
filter: { from: 'blur(4px)', to: 'blur(0px)' }, filter: { from: 'blur(4px)', to: 'blur(0px)' },
duration: 300, duration: 300,
delay: stagger(150), delay: stagger(150),
easing: 'easeOutQuart', ease: 'cubicBezier(0.25, 0.1, 0.25, 1)',
autoplay: onScroll({ autoplay: onScroll({
target: '#header', target: '#header',
debug, debug,

2
src/components/Sponsors.astro
View file

@ -50,7 +50,7 @@ const {
filter: { from: 'blur(4px)', to: 'blur(0px)' }, filter: { from: 'blur(4px)', to: 'blur(0px)' },
duration: 300, duration: 300,
delay: stagger(150), delay: stagger(150),
easing: 'easeOutQuart', ease: 'cubicBezier(0.25, 0.1, 0.25, 1)',
autoplay: onScroll({ autoplay: onScroll({
target: '#sponsors', target: '#sponsors',
debug, debug,