hyprwm/hyprland-website
1
0
Fork 0
mirror of https://github.com/hyprwm/hyprland-website.git synced 2026-05-05 23:58:08 +02:00
Code Issues Projects Releases Packages Wiki Activity

done prob

Browse source
This commit is contained in:
VDawg 2025-07-30 00:01:45 +02:00
parent e4e9143cb8
commit 1467ca0259
9 changed files with 62 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/lib/components/Button.svelte
View file

@ -5,6 +5,7 @@
export let type: 'primary' | 'outline' | 'fancyOutline' = 'primary'
export let href: string | undefined = undefined
export let newTab = false
$: classes = cn(
'animate rounded text-sm font-bold hover:scale-[1.01] active:scale-100',
@ -26,6 +27,7 @@
{href}
role="button"
tabindex="0"
target={newTab ? '_blank' : undefined}
class={classes}
on:click
>

14
src/lib/components/Card.svelte
View file

@ -95,7 +95,9 @@
on:mouseenter
on:mouseleave
>
<div class="z-10 h-full w-full">
<div
class="absolute inset-0 z-10 m-0.5 size-full min-h-0 min-w-0 grow overflow-hidden rounded-3xl"
>
<slot>Nothing in the slot here</slot>
</div>
<div class="gradient max-sm:hidden" style:opacity={gradientOpacity} />
@ -107,7 +109,7 @@
<style lang="postcss">
.card {
@apply relative flex items-end justify-end rounded-3xl transition-colors duration-300;
@apply relative flex items-end rounded-3xl transition-colors duration-300 md:justify-end;
z-index: 2;
contain: paint style layout;
@ -137,6 +139,10 @@
/* This gradient is visible on the borders when hovering */
.border-gradient {
.isHoverCards & {
opacity: 100%;
}
position: absolute;
z-index: 1;
border-radius: inherit;
@ -154,10 +160,6 @@
color-mix(in srgb, var(--color1, theme(colors.cyan.500)), transparent 50%),
transparent
);
.isHoverCards & {
opacity: 100%;
}
}
.gradient {

1
src/lib/constants.ts
View file

@ -1,4 +1,5 @@
export const discordLink = 'https://discord.com/invite/hQ9XvMUjjr'
export const forgejoLink = 'https://code.hypr.land/'
export const accountsLink = 'https://account.hypr.land/'
export const hyprperksLink = 'https://account.hypr.land/pricing'
export const forumLink = 'https://forum.hypr.land/'

BIN
src/lib/images/features/beautiful-perky.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 48 KiB

BIN
src/lib/images/features/easy.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 17 KiB

BIN
src/lib/images/features/first-class_default.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 38 KiB

BIN
src/lib/images/features/first-class_hover.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 40 KiB

4
src/routes/+page.svelte
View file

@ -26,10 +26,10 @@
<Community />
<NewsSlice news={data.news} />
<HyprPerks />
<NewsSlice news={data.news} />
<InstallSlice />
</div>
</div>

90
src/routes/home-slices/HyprPerksSlice.svelte
View file

@ -6,32 +6,34 @@
import TitleSubtile from '$lib/components/Title/TitleSubtile.svelte'
import Title from '$lib/components/Title/TitleWrapper.svelte'
import Video from '$lib/components/Video.svelte'
import smoothDefaultImage from '$lib/images/features/smooth_default.webp'
import tileDefaultImage from '$lib/images/features/tiling_default.webp'
import firstClassDefaultImage from '$lib/images/features/first-class_default.webp'
import firstClassHoverImage from '$lib/images/features/first-class_hover.webp'
import easyImage from '$lib/images/features/easy.webp'
import beautifulImage from '$lib/images/features/beautiful-perky.webp'
import { accountsLink, forumLink } from '$lib/constants'
import { hyprperksLink } from '$lib/constants'
import Button from '$lib/components/Button.svelte'
</script>
<section class="relative w-full">
<div class="mb-10 md:mb-32">
<div class="h-[2px] w-full bg-gradient-to-l from-transparent via-white/20 to-transparent" />
<div class="mb-16 md:mb-32">
<div class="h-[2px] w-full bg-gradient-to-l from-transparent via-cyan-400/50 to-transparent" />
</div>
<div class="top-gradient"></div>
<div class="relative mx-auto mb-12 max-w-5xl px-8 md:mb-20">
<Title>
<Title class="mb-10">
<TitleHeading slot="title" class="">Hyprperks</TitleHeading>
<TitleSubtile class="max-w-[55ch]">
<a href={accountsLink} class=" text-primary hover:underline" target="_blank"
>Buy first-party configurations</a
<a href={hyprperksLink} class=" text-primary hover:underline" target="_blank"
>Subsribe for first-party configurations, priority support</a
>
and support the development.<br />Fully optional, but crafted with love
and to support the development. Fully optional, but crafted with love
</TitleSubtile>
</Title>
<CardsContainer
class="group grid w-full flex-wrap gap-6 text-lg font-medium text-white/70 lg:grid-cols-2 lg:grid-rows-2 lg:gap-4"
class="group flex w-full flex-col gap-8 text-lg font-medium text-white/70 md:grid lg:grid-cols-2 lg:grid-rows-2 lg:gap-4"
>
<Card class="col-span-2 row-span-2 aspect-video min-h-[20rem]" color="cyan">
<div class="grid h-full">
@ -54,38 +56,48 @@
Always working, actively developed, one-click-update
</p>
<div class="_wrapper absolute inset-0 select-none" aria-hidden="true">
<div class="feature-image">
<img
src={smoothDefaultImage}
class="feature-image_inner"
alt=""
aria-hidden="true"
loading="lazy"
/>
</div>
<div
class="_wrapper group/fc absolute bottom-0 right-0 top-0 size-1/2 select-none md:inset-0 md:size-full"
aria-hidden="true"
>
<img
src={firstClassDefaultImage}
class="absolute inset-0 transition-opacity duration-1000 group-hover/fc:opacity-0"
alt=""
aria-hidden="true"
loading="lazy"
/>
<img
src={firstClassHoverImage}
class="absolute inset-0 opacity-0 transition-opacity duration-1000 group-hover/fc:opacity-100"
alt=""
aria-hidden="true"
loading="lazy"
/>
</div>
</div>
</Card>
<Card class="min-h-[20rem]" color="purple">
<div class="flex h-full flex-col justify-end p-8 sm:p-12">
<div class="z-20 mix-blend-color-dodge">
<h2 class="mb-6 text-5xl font-bold text-slate-400">Easy</h2>
<h2 class="mb-6 text-5xl font-bold text-slate-300">Easy</h2>
<p class="max-w-[60ch]">Designed to stay out of your way, and let you do your thing.</p>
</div>
<img
src={configDefaultImage}
class="absolute inset-x-0 top-0 size-full object-contain"
src={easyImage}
class="absolute inset-x-0 top-0 size-full w-full object-cover bg-blend-screen"
alt=""
aria-hidden="true"
loading="lazy"
/>
</div>
</Card>
<Card class="min-h-[20rem]" color="purple">
<div class="flex h-full flex-col justify-end p-8 sm:p-12">
<div class="z-20 mix-blend-color-dodge">
<div class="flex h-full flex-col justify-end">
<div class="z-20 p-8 mix-blend-color-dodge sm:p-12">
<h2 class="mb-6 text-5xl font-bold text-slate-300">Beautiful</h2>
<p class="max-w-[60ch]">
Customizable, with automatic theming for everything. Crafted with love from the
@ -94,8 +106,8 @@
</div>
<img
src={tileDefaultImage}
class="absolute -top-20 object-contain"
src={beautifulImage}
class="absolute size-full object-cover"
alt=""
aria-hidden="true"
loading="lazy"
@ -103,21 +115,17 @@
</div>
</Card>
<Card class="col-span-full flex min-h-40 items-center justify-center "
><div class="flex size-full justify-center self-center">
<div class="flex items-center justify-between gap-6">
<div class="flex flex-col gap-1">
<h3 class="text-white">Support the development</h3>
<p>Hyprland itself will always stay free and open-source</p>
</div>
<div
class="flex flex-col items-center justify-center rounded-2xl border border-cyan-200/30 bg-cyan-400/5 px-5 py-2 md:px-20 md:py-8"
>
<Button type="fancyOutline" size="xl">Buy now</Button>
</div>
</div>
</div></Card
<div
class=" col-span-full mt-8 flex size-full w-full items-center justify-center self-center"
>
<div class="flex items-center justify-between gap-6">
<div
class="flex flex-col items-center justify-center rounded-2xl border border-cyan-200/30 bg-cyan-400/5 px-20 py-8"
>
<Button type="fancyOutline" href={hyprperksLink} size="xl">Subscribe now</Button>
</div>
</div>
</div>
</CardsContainer>
</div>
</section>