mirror of
https://github.com/zen-browser/www.git
synced 2025-07-08 09:20:00 +02:00
refactor(components): remove translate-y-20 class for improved layout consistency
This commit is contained in:
parent
9f78e8e817
commit
64e904d405
4 changed files with 29 additions and 35 deletions
|
@ -23,28 +23,28 @@ const {
|
||||||
{
|
{
|
||||||
community.title.map(title =>
|
community.title.map(title =>
|
||||||
title !== '\n' ? (
|
title !== '\n' ? (
|
||||||
<span class="translate-y-20 opacity-0 blur-sm">{title}</span>
|
<span class="opacity-0 blur-sm">{title}</span>
|
||||||
) : (
|
) : (
|
||||||
<br class="hidden md:block" />
|
<br class="hidden md:block" />
|
||||||
)
|
)
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
</h2>
|
</h2>
|
||||||
<p class="translate-y-20 text-base opacity-80 blur-sm lg:w-1/2 lg:px-0">
|
<p class="text-base opacity-80 blur-sm lg:w-1/2 lg:px-0">
|
||||||
{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 translate-y-20 opacity-0 blur-sm">
|
<span 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>
|
</span>
|
||||||
<div class="community__button flex translate-y-20 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>
|
||||||
</div>
|
</div>
|
||||||
<div class="community__button flex translate-y-20 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.privateAndAlwaysUpToDate.title}</span>
|
<span>{community.lists.privateAndAlwaysUpToDate.title}</span>
|
||||||
</div>
|
</div>
|
||||||
|
@ -53,7 +53,7 @@ const {
|
||||||
<Image
|
<Image
|
||||||
src={ComImage}
|
src={ComImage}
|
||||||
alt={community.images.community.alt}
|
alt={community.images.community.alt}
|
||||||
class="translate-y-20 rounded-3xl opacity-0 shadow-md blur-sm lg:mx-auto dark:opacity-80"
|
class="rounded-3xl opacity-0 shadow-md blur-sm lg:mx-auto dark:opacity-80"
|
||||||
/>
|
/>
|
||||||
</span>
|
</span>
|
||||||
</section>
|
</section>
|
||||||
|
|
|
@ -57,12 +57,12 @@ const featureList = [
|
||||||
case '\n':
|
case '\n':
|
||||||
return <br class="hidden md:block" />
|
return <br class="hidden md:block" />
|
||||||
default:
|
default:
|
||||||
return <span class="translate-y-20 opacity-0 blur-sm">{title}</span>
|
return <span class="opacity-0 blur-sm">{title}</span>
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
</h2>
|
</h2>
|
||||||
<p class="max-w-2xl translate-y-20 text-base opacity-80 blur-sm sm:text-lg">
|
<p class="max-w-2xl text-base opacity-80 blur-sm sm:text-lg">
|
||||||
{features.description}
|
{features.description}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
@ -75,15 +75,15 @@ const featureList = [
|
||||||
class={`flex w-full flex-col items-center gap-6 xl:gap-12 ${index % 2 === 0 ? 'xl:flex-row-reverse' : 'xl:flex-row'}`}
|
class={`flex w-full flex-col items-center gap-6 xl:gap-12 ${index % 2 === 0 ? 'xl:flex-row-reverse' : 'xl:flex-row'}`}
|
||||||
>
|
>
|
||||||
<div class="flex flex-col items-center gap-4">
|
<div class="flex flex-col items-center gap-4">
|
||||||
<h3 class="translate-y-20 text-2xl font-bold opacity-0 blur-sm sm:text-3xl xl:text-4xl">
|
<h3 class="text-2xl font-bold opacity-0 blur-sm sm:text-3xl xl:text-4xl">
|
||||||
{feature.title}
|
{feature.title}
|
||||||
</h3>
|
</h3>
|
||||||
<p class="translate-y-20 text-base leading-relaxed opacity-80 blur-sm sm:text-lg">
|
<p class="text-base leading-relaxed opacity-80 blur-sm sm:text-lg">
|
||||||
{feature.description}
|
{feature.description}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<Video
|
<Video
|
||||||
class="max-h-[450px] w-[800px] translate-y-20 rounded-xl border-2 border-dark object-cover opacity-0 shadow-lg blur-sm"
|
class="max-h-[450px] w-[800px] rounded-xl border-2 border-dark object-cover opacity-0 shadow-lg blur-sm"
|
||||||
name={feature.video}
|
name={feature.video}
|
||||||
autoplay
|
autoplay
|
||||||
loop
|
loop
|
||||||
|
|
|
@ -26,12 +26,7 @@ const {
|
||||||
{
|
{
|
||||||
hero.title.map(title =>
|
hero.title.map(title =>
|
||||||
title.text !== '\n' ? (
|
title.text !== '\n' ? (
|
||||||
<span
|
<span class:list={['opacity-0 blur-sm', title.highlight && 'italic text-coral']}>
|
||||||
class:list={[
|
|
||||||
'translate-y-20 opacity-0 blur-sm',
|
|
||||||
title.highlight && 'italic text-coral',
|
|
||||||
]}
|
|
||||||
>
|
|
||||||
{title.text}
|
{title.text}
|
||||||
</span>
|
</span>
|
||||||
) : (
|
) : (
|
||||||
|
@ -40,28 +35,31 @@ const {
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
</Title>
|
</Title>
|
||||||
<p class="translate-y-20 px-12 text-center opacity-0 blur-sm lg:px-0">
|
<p class="px-12 text-center opacity-0 blur-sm lg:px-0">
|
||||||
{hero.description[0]}
|
{hero.description[0]}
|
||||||
<br class="hidden sm:inline" />
|
<br class="hidden sm:inline" />
|
||||||
{hero.description[1]}
|
{hero.description[1]}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="hero__link-group 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
|
<Button
|
||||||
class="w-fit translate-y-20 opacity-0 blur-sm"
|
class="hero__link-group_button w-fit opacity-0 blur-sm"
|
||||||
href={getLocalePath('/download')}
|
href={getLocalePath('/download')}
|
||||||
isPrimary
|
isPrimary
|
||||||
>
|
>
|
||||||
{hero.buttons.beta}
|
{hero.buttons.beta}
|
||||||
<ArrowRightIcon class="size-4" />
|
<ArrowRightIcon class="size-4" />
|
||||||
</Button>
|
</Button>
|
||||||
<Button href={getLocalePath('/donate')} class="w-fit translate-y-20 opacity-0 blur-sm">
|
<Button
|
||||||
|
href={getLocalePath('/donate')}
|
||||||
|
class="hero__link-group_button w-fit opacity-0 blur-sm"
|
||||||
|
>
|
||||||
{hero.buttons.support}
|
{hero.buttons.support}
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
<SocialMediaStrip class="translate-y-20 blur-sm" opacity={0} />
|
<SocialMediaStrip class="blur-sm" opacity={0} />
|
||||||
</div>
|
</div>
|
||||||
<Video
|
<Video
|
||||||
name="hero-video"
|
name="hero-video"
|
||||||
|
@ -70,7 +68,7 @@ const {
|
||||||
muted
|
muted
|
||||||
playsinline
|
playsinline
|
||||||
preload="none"
|
preload="none"
|
||||||
class="translate-y-20 rounded-xl opacity-0 blur-sm"
|
class="rounded-xl opacity-0 blur-sm"
|
||||||
/>
|
/>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
|
@ -81,7 +79,7 @@ const {
|
||||||
const debug = false
|
const debug = false
|
||||||
|
|
||||||
const elements = document.querySelectorAll(
|
const elements = document.querySelectorAll(
|
||||||
'#header h1 span, #header p, #header .hero__link-group a, #header video, #header ul'
|
'#header h1 span, #header p, #header .hero__link-group_button, #header video, #header ul'
|
||||||
)
|
)
|
||||||
|
|
||||||
animate(elements, {
|
animate(elements, {
|
||||||
|
@ -89,12 +87,12 @@ const {
|
||||||
opacity: element => {
|
opacity: element => {
|
||||||
// if ul is the element, return 0.8
|
// if ul is the element, return 0.8
|
||||||
if (element.tagName === 'UL') {
|
if (element.tagName === 'UL') {
|
||||||
return 0.8
|
return { from: 0.001, to: 0.8 }
|
||||||
}
|
}
|
||||||
return 1
|
return { from: 0.001, to: 1 }
|
||||||
},
|
},
|
||||||
translateY: 0,
|
translateY: { from: 20, to: 0 },
|
||||||
filter: 'blur(0px)',
|
filter: { from: 'blur(4px)', to: 'blur(0px)' },
|
||||||
duration: 300,
|
duration: 300,
|
||||||
delay: stagger(150),
|
delay: stagger(150),
|
||||||
easing: 'easeOutQuart',
|
easing: 'easeOutQuart',
|
||||||
|
|
|
@ -18,16 +18,12 @@ const {
|
||||||
|
|
||||||
<section id="sponsors" class:list={['py-12', !showSponsors && 'hidden']}>
|
<section id="sponsors" class:list={['py-12', !showSponsors && 'hidden']}>
|
||||||
<div class="flex flex-col items-center gap-6 text-center">
|
<div class="flex flex-col items-center gap-6 text-center">
|
||||||
<h3 class="translate-y-20 text-4xl font-bold opacity-0 blur-sm sm:text-6xl">
|
<h3 class="text-4xl font-bold opacity-0 blur-sm sm:text-6xl">
|
||||||
{sponsors.title}
|
{sponsors.title}
|
||||||
</h3>
|
</h3>
|
||||||
<p class="translate-y-20 text-base opacity-80 blur-sm" set:html={sponsors.description} />
|
<p class="text-base opacity-80 blur-sm" set:html={sponsors.description} />
|
||||||
<div class="sponsors__sponsor relative mt-8 flex items-center justify-center">
|
<div class="sponsors__sponsor relative mt-8 flex items-center justify-center">
|
||||||
<a
|
<a href={sponsors.sponsors['tuta'].url} target="_blank" class="w-fit opacity-0 blur-sm">
|
||||||
href={sponsors.sponsors['tuta'].url}
|
|
||||||
target="_blank"
|
|
||||||
class="w-fit translate-y-20 opacity-0 blur-sm"
|
|
||||||
>
|
|
||||||
<Image
|
<Image
|
||||||
src={tutaLogo}
|
src={tutaLogo}
|
||||||
alt={sponsors.sponsors['tuta'].name}
|
alt={sponsors.sponsors['tuta'].name}
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue