Add a Perks-slice (#106)

* doing doings

* wip more

* update content

* hero: decrease title line height

* wip hyprperks slice

* done prob

* remove subscribe now outline

src/lib/components/Button.svelte

@@ -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
 		>

src/lib/components/Card.svelte

@@ -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 {

src/lib/components/Footer.svelte

@@ -1,13 +1,13 @@
 <script>
 	import DiscordIcon from '~icons/prime/discord'
 	import GithubIcon from '~icons/ri/github-fill'
-	import { discordLink } from '$lib/constants.mjs'
-	import { forgejoLink } from '$lib/constants.mjs'
+	import { accountsLink, discordLink, forumLink } from '$lib/constants'
+	import { forgejoLink } from '$lib/constants'
 	import RssIcon from '~icons/mingcute/rss-fill'
 	import ForgejoIcon from '~icons/fe/git'
 
 	/** @type {[string, string, string, string]} */
-	let team = [
+	const team = [
 		['Fufexan', 'Supporting Developer', 'cyan', 'https://github.com/fufexan'],
 		['NotAShelf', 'Community Manager', 'teal', 'https://github.com/NotAShelf'],
 		['VDawg', 'Webdesign and dev', 'emerald', 'https://github.com/vdawg-git']
@@ -55,6 +55,8 @@
 					>
 				</li>
 				<li><a href="/hall_of_fame">Hall of fame</a></li>
+				<li><a href={forumLink} target="_blank">Forum</a></li>
+				<li><a href={accountsLink} target="_blank">Account</a></li>
 			</ul>
 		</div>
 
@@ -108,7 +110,7 @@
 
 <style lang="postcss">
 	.footer-inner {
-		@apply flex max-w-screen-xl flex-wrap items-start justify-between gap-12 px-8 py-14 text-slate-300;
+		@apply flex max-w-screen-xl flex-wrap items-start justify-between gap-x-12 gap-y-20 px-8 py-16 text-slate-300;
 	}
 
 	.pretitle {

src/lib/components/Video.svelte

@@ -55,7 +55,7 @@
 		{muted}
 		disablepictureinpicture="true"
 		disableremoteplayback="true"
-		class="rounded-xl {videoClass}"
+		class="rounded-[inherit] {videoClass}"
 		{loop}
 		preload="auto"
 		{poster}

src/lib/components/news-thumb.svelte

@@ -10,7 +10,7 @@
 <li class="flex" use:animateIn={{ fade: 0, slide: 24 }}>
 	<a href={link} class="w-full transition-transform hover:-translate-y-0.5">
 		<article
-			class="flex flex-col h-[100%] justify-between gap-3 rounded hover:outline-sky-500/80 md:flex-row md:rounded-3xl md:bg-gradient-to-tr md:from-cyan-500/10 md:to-transparent md:p-8 md:shadow-xl md:outline md:outline-1 md:outline-sky-500/30"
+			class="flex h-[100%] flex-col justify-between gap-3 rounded hover:outline-sky-500/80 md:flex-row md:rounded-3xl md:bg-gradient-to-tr md:from-cyan-500/10 md:to-transparent md:p-8 md:shadow-xl md:outline md:outline-1 md:outline-sky-500/30"
 		>
 			<div>
 				<div class="flex flex-col gap-4 font-medium text-slate-400">
@@ -25,7 +25,7 @@
 			>
 				<ArrowRight
 					class="h-4 w-4 transition-transform group-hover:translate-y-0.5 md:h-9 md:w-9"
-				/> Read up
+				/>
 			</p>
 		</article>
 	</a>

src/lib/constants.mjs

@@ -1,2 +0,0 @@
-export const discordLink = 'https://discord.com/invite/hQ9XvMUjjr'
-export const forgejoLink = 'https://code.hypr.land/'

src/lib/constants.ts

@@ -0,0 +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/'

src/routes/+page.svelte

@@ -7,6 +7,7 @@
 	import PreviewRiceSlice from './home-slices/PreviewRiceSlice.svelte'
 	import PluginsSlice from './home-slices/PluginsSlice.svelte'
 	import NewsSlice from './home-slices/NewsSlice.svelte'
+	import HyprPerks from './home-slices/HyprPerksSlice.svelte'
 
 	export let data
 </script>
@@ -25,6 +26,8 @@
 
 		<Community />
 
+		<HyprPerks />
+
 		<NewsSlice news={data.news} />
 
 		<InstallSlice />

src/routes/Navbar.svelte

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
 	import { navigating, page } from '$app/stores'
 	import GithubIcon from '~icons/ri/github-fill'
 	import DiscordIcon from '~icons/prime/discord'
@@ -6,8 +6,8 @@
 	import MenuIcon from '~icons/mingcute/menu-line'
 	import CloseIcon from '~icons/mingcute/close-line'
 	import HyprlandLogo from '$lib/images/logos/HyprlandLogo.svelte'
-	import { discordLink } from '$lib/constants.mjs'
-	import { forgejoLink } from '$lib/constants.mjs'
+	import { discordLink } from '$lib/constants'
+	import { forgejoLink } from '$lib/constants'
 
 	let isExpanded = false
 

src/routes/home-slices/CommunitySlice.svelte

@@ -2,7 +2,8 @@
 	export const contextId = Symbol('community context')
 </script>
 
-<script>
+<script lang="ts">
+	// @ts-nocheck Lets fix this file later on someday
 	import Button from '$lib/components/Button.svelte'
 	import DiscordIcon from '~icons/prime/discord'
 	import DiscordProfilePicture from '$lib/components/DiscordProfilePicture.svelte'
@@ -10,22 +11,20 @@
 	import Title from '$lib/components/Title/TitleWrapper.svelte'
 	import background from '$lib/images/community-bg.webp'
 	import amongUsGreenImage from '$lib/images/amongus/green.webp'
-	import { discordLink } from '$lib/constants.mjs'
+	import { discordLink } from '$lib/constants'
 	import profiles from '../../content/profiles.json'
 	import Poz from './community/Poz.svelte'
-	import { writable } from 'svelte/store'
-	import { Observable } from 'rxjs'
-	import { writableObservable } from '$lib/Helper.ts'
+	import { writableObservable } from '$lib/Helper'
 	import TitleHeading from '$lib/components/Title/TitleHeading.svelte'
 	import TitleSubtile from '$lib/components/Title/TitleSubtile.svelte'
+	import type { CommunityProfile } from '$lib/Types'
 
-	let sectionElement
+	let sectionElement: HTMLElement
 	let isDraggingChan = false
 
 	const validSizes = [16, 20, 24, 32, 40, 48, 64, 80, 96, 100, 128, 160, 240, 320, 640]
 
-	/** @type {Promise<import('$lib/Types').CommunityProfile[]>}*/
-	let allProfilesPromise = new Promise(() => {})
+	let allProfilesPromise: Promise<readonly CommunityProfile[]> = new Promise(() => {})
 
 	/** @type {import('$lib/Types').CommunityProfile[]} */
 	const extraProfiles = [

src/routes/home-slices/FeaturesSlice.svelte

@@ -86,7 +86,8 @@
 			<div class="flex h-full flex-col justify-end p-8 sm:p-12">
 				<h2 class="mb-6 text-5xl font-bold text-white">Dynamic tiling</h2>
 				<p class="max-w-[60ch]">
-					Automatic tiling that just works. Supports multiple fine-tuneable layouts, with even more as plugins.
+					Automatic tiling that just works. Supports multiple fine-tuneable layouts, with even more
+					as plugins.
 				</p>
 				<div class="_wrapper absolute inset-0 select-none" aria-hidden="true">
 					<div class="feature-image">

src/routes/home-slices/Hero.svelte

@@ -28,7 +28,7 @@
 		class="pointer-events-none z-10 flex h-full min-h-max flex-col items-center justify-center px-5"
 	>
 		<h1
-			class="ani-in title pointer-events-auto mb-4 max-w-[20ch] text-center text-4xl font-bold !leading-[1.25] fill-mode-backwards [animation-delay:384ms] sm:text-6xl md:text-7xl lg:text-8xl lg:tracking-tight"
+			class="ani-in title pointer-events-auto mb-4 max-w-[20ch] text-center text-4xl font-bold !leading-[1] fill-mode-backwards [animation-delay:384ms] sm:text-6xl md:text-7xl lg:text-8xl lg:tracking-tight"
 		>
 			Modern compositor <br /><span class="hyprgradient title-gradient">with the looks</span>
 		</h1>

src/routes/home-slices/HyprPerksSlice.svelte

@@ -0,0 +1,143 @@
+<script lang="ts">
+	import Card from '$lib/components/Card.svelte'
+	import CardsContainer from '$lib/components/CardsContainer.svelte'
+	import configDefaultImage from '$lib/images/features/config_default.webp'
+	import TitleHeading from '$lib/components/Title/TitleHeading.svelte'
+	import TitleSubtile from '$lib/components/Title/TitleSubtile.svelte'
+	import Title from '$lib/components/Title/TitleWrapper.svelte'
+	import Video from '$lib/components/Video.svelte'
+	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 { hyprperksLink } from '$lib/constants'
+	import Button from '$lib/components/Button.svelte'
+</script>
+
+<section class="relative w-full">
+	<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 class="mb-10">
+			<TitleHeading slot="title" class="">Hyprperks</TitleHeading>
+			<TitleSubtile class="max-w-[55ch]">
+				<a href={hyprperksLink} class=" text-primary hover:underline" target="_blank"
+					>Subsribe for first-party configurations, priority support</a
+				>
+				and to support the development. Fully optional, but crafted with love
+			</TitleSubtile>
+		</Title>
+
+		<CardsContainer
+			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">
+					<div class="col-start-1 col-end-2 row-start-1 row-end-2 m-0.5" aria-hidden="true">
+						<Video
+							muted
+							sources={['https://dl.hypr.land/videos/hyprde2.mp4']}
+							poster={'/videos/hyprde.webp'}
+							class="rounded-3xl "
+							autoplay
+						/>
+					</div>
+				</div>
+			</Card>
+
+			<Card class="row-span-2 min-h-[20rem]" color="purple">
+				<div class="flex h-full flex-col justify-end p-8 sm:p-12">
+					<h2 class="mb-6 text-2xl font-bold text-white lg:text-5xl">First-class support</h2>
+					<p class="max-w-[60ch] text-balance">
+						Always working, actively developed, one-click-update
+					</p>
+
+					<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-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={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">
+					<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
+							Hyprland team
+						</p>
+					</div>
+
+					<img
+						src={beautifulImage}
+						class="absolute size-full object-cover"
+						alt=""
+						aria-hidden="true"
+						loading="lazy"
+					/>
+				</div>
+			</Card>
+
+			<div
+				class=" col-span-full mt-8 flex size-full w-full items-center justify-center self-center"
+			>
+				<Button type="fancyOutline" href={hyprperksLink} size="xl">Subscribe now</Button>
+			</div>
+		</CardsContainer>
+	</div>
+</section>
+
+<style lang="postcss">
+	.top-gradient {
+		background-image: linear-gradient(
+			to bottom,
+			theme(colors.blue.500 / 30%),
+			transparent,
+			theme(colors.cyan.500 / 25%)
+		);
+		height: 100%;
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		mask-image: linear-gradient(to left, transparent, black, transparent);
+		contain: strict;
+	}
+</style>