mirror of
https://github.com/hyprwm/hyprland-website.git
synced 2025-12-20 04:00:02 +01:00
improve sponsor slice (#110)
This commit is contained in:
VDawg
GitHub
parent
5f5dbdefc0
commit
48eaae8d72
7 changed files with 161 additions and 91 deletions
|
|
@ -1,4 +1,5 @@
|
|||
{
|
||||
"diamond": [],
|
||||
"platinum": [
|
||||
{
|
||||
"name": "37signals",
|
||||
|
|
@ -8,10 +9,8 @@
|
|||
}
|
||||
],
|
||||
|
||||
"gold": [
|
||||
],
|
||||
"gold": [],
|
||||
|
||||
"silver": [],
|
||||
"bronze": [
|
||||
]
|
||||
"bronze": []
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,30 +6,40 @@
|
|||
export let sponsor: Sponsor
|
||||
export let showImage = false
|
||||
export let showSlogan = false
|
||||
export let size = 1
|
||||
export let sloganClass = ''
|
||||
</script>
|
||||
|
||||
<Clickable href={sponsor.link} class="flex flex-col items-center">
|
||||
<Clickable href={sponsor.link} class="flex flex-col items-center gap-4">
|
||||
{#if showImage && sponsor.image}
|
||||
<img
|
||||
title={sponsor.name}
|
||||
class="h-24 max-w-{size == 1 ? "32" : size == 2 ? "38" : "42"} self-center justify-self-start rounded-md object-contain"
|
||||
class={cn(
|
||||
'size-full self-center justify-self-start rounded-md object-contain',
|
||||
$$restProps.class
|
||||
)}
|
||||
src={sponsor.image}
|
||||
alt=""
|
||||
alt={sponsor.name}
|
||||
/>
|
||||
{:else}
|
||||
<div
|
||||
class={cn(
|
||||
'text-xs font-bold text-slate-100',
|
||||
sponsor.link && 'hover:text-cyan-100',
|
||||
'size-full px-1 py-0.5 text-sm font-medium text-slate-100',
|
||||
sponsor.link && 'hover:text-cyan-200',
|
||||
showImage && 'text-lg'
|
||||
)}
|
||||
>
|
||||
{sponsor.name}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if showSlogan && sponsor.slogan}
|
||||
<div class={cn('text-sm text-slate-100 italic')}>
|
||||
<div
|
||||
class={cn(
|
||||
'text-center text-base font-bold text-slate-300',
|
||||
sponsor.link && 'transition-colors hover:text-primary',
|
||||
sloganClass
|
||||
)}
|
||||
>
|
||||
{sponsor.slogan}
|
||||
</div>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -1,70 +0,0 @@
|
|||
<script lang="ts">
|
||||
import type { SponsorsRanked } from '../../routes/api/sponsors/+server'
|
||||
import Button from './Button.svelte'
|
||||
import Sponsor from './Sponsor.svelte'
|
||||
|
||||
export let sponsors: SponsorsRanked
|
||||
</script>
|
||||
|
||||
<div class="relative max-w-[1024px] select-none text-slate-100">
|
||||
<div class="flex min-h-max flex-wrap gap-8 text-sm">
|
||||
{#if sponsors.platinum.length > 0}
|
||||
<div class="flex flex-col gap-2 rounded-xl">
|
||||
<h2
|
||||
class="bg-gradient-to-r from-primary to-blue-500 bg-clip-text text-xl font-bold text-transparent"
|
||||
>
|
||||
Platinum
|
||||
</h2>
|
||||
<div class="flex flex-wrap gap-4">
|
||||
{#each sponsors.platinum as sponsor}
|
||||
<Sponsor {sponsor} showImage showSlogan size={3} />
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if sponsors.gold.length > 0}
|
||||
<div class="flex flex-col gap-2 rounded-xl">
|
||||
<h2
|
||||
class="bg-gradient-to-r from-yellow-200 to-yellow-400 bg-clip-text text-xl font-bold text-transparent"
|
||||
>
|
||||
Gold
|
||||
</h2>
|
||||
<div class="flex flex-wrap gap-4">
|
||||
{#each sponsors.gold as sponsor}
|
||||
<Sponsor {sponsor} showImage size={2} />
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="flex flex-wrap gap-4">
|
||||
{#if sponsors.silver.length > 0}
|
||||
<div class="flex flex-col gap-2">
|
||||
<h2 class="font-bold text-slate-300">Silver</h2>
|
||||
|
||||
<div class="flex flex-wrap gap-x-4 gap-y-2 font-medium">
|
||||
{#each sponsors.silver as sponsor}
|
||||
<Sponsor {sponsor} />
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if sponsors.bronze.length > 0}
|
||||
<div class="flex flex-col gap-2">
|
||||
<h2 class="font-bold text-slate-300">Bronze</h2>
|
||||
|
||||
<div class="flex flex-wrap gap-x-4 gap-y-2 font-medium">
|
||||
{#each sponsors.bronze as sponsor}
|
||||
<Sponsor {sponsor} />
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-full mt-8 flex size-full w-full items-center justify-center self-center" style="margin-top: 5rem; margin-bottom: -5rem;">
|
||||
<Button type="outline" href={'https://account.hypr.land/sponsors'} size="xl">Sponsor us</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,3 +1,13 @@
|
|||
<h1 class="mb-12 text-5xl font-bold md:text-7xl lg:text-8xl {$$restProps.class}">
|
||||
<script lang="ts">
|
||||
import { cn } from '$lib/Helper'
|
||||
|
||||
const sizes = {
|
||||
default: 'text-5xl md:text-7xl lg:text-8xl',
|
||||
small: 'text-3xl md:text-5xl lg:text-6xl'
|
||||
}
|
||||
export let size: keyof typeof sizes = 'default'
|
||||
</script>
|
||||
|
||||
<h1 class={cn('mb-12 font-bold', sizes[size], $$restProps.class)}>
|
||||
<slot>No title given!!!</slot>
|
||||
</h1>
|
||||
|
|
|
|||
|
|
@ -31,6 +31,8 @@
|
|||
|
||||
<HyprPerks />
|
||||
|
||||
<Sponsors sponsors={data.sponsors} />
|
||||
|
||||
<NewsSlice news={data.news} />
|
||||
|
||||
<InstallSlice />
|
||||
|
|
|
|||
|
|
@ -10,8 +10,9 @@ export type Sponsor = {
|
|||
|
||||
export type SponsorsRanked = Readonly<{
|
||||
/** The month for the top donators in `monthTop` */
|
||||
month: String
|
||||
month: string
|
||||
monthTop: readonly Sponsor[]
|
||||
diamond: readonly Sponsor[]
|
||||
platinum: readonly Sponsor[]
|
||||
gold: readonly Sponsor[]
|
||||
silver: readonly Sponsor[]
|
||||
|
|
|
|||
|
|
@ -1,17 +1,135 @@
|
|||
<script lang="ts">
|
||||
import TitlePre from '$lib/components/Title/TitlePre.svelte'
|
||||
import Title from '$lib/components/Title/TitleWrapper.svelte'
|
||||
import Sponsors from '$lib/components/SponsorsSlice.svelte'
|
||||
import Sponsor from '$lib/components/Sponsor.svelte'
|
||||
import type { SponsorsRanked } from '../api/sponsors/+server'
|
||||
import TitleHeading from '$lib/components/Title/TitleHeading.svelte'
|
||||
import Button from '$lib/components/Button.svelte'
|
||||
import PatternBackground from '$lib/PatternBackground.svelte'
|
||||
|
||||
export let sponsors: SponsorsRanked
|
||||
const hasSponsors = Object.values(sponsors)
|
||||
.filter((value) => !Array.isArray(value))
|
||||
.every((array) => array.length === 0)
|
||||
|
||||
const smallImages = 'aspect-square sm:size-12 size-10'
|
||||
</script>
|
||||
|
||||
<section class="relative mb-12 flex max-w-5xl flex-col gap-8 px-8 md:mb-20">
|
||||
<Title align="left" class="px-0">
|
||||
<TitlePre slot="pre">And a huge thank you!</TitlePre>
|
||||
<h2 slot="title" class="text-2xl font-bold md:text-3xl">Our sponsors</h2>
|
||||
</Title>
|
||||
{#if hasSponsors}
|
||||
<div class="relative flex w-full flex-col items-center justify-center">
|
||||
<PatternBackground
|
||||
class="absolute -inset-12 inset-x-0 h-[100%] w-full text-slate-800 opacity-40"
|
||||
/>
|
||||
|
||||
<Sponsors {sponsors} />
|
||||
</section>
|
||||
<section class="relative mb-12 flex max-w-5xl flex-col gap-2 px-8 md:mb-20">
|
||||
<Title class="px-0">
|
||||
<TitlePre slot="pre">And a huge thank you!</TitlePre>
|
||||
<TitleHeading size="small" slot="title">Our sponsors</TitleHeading>
|
||||
</Title>
|
||||
|
||||
<div
|
||||
class="relative flex max-w-[1024px] select-none flex-col justify-center rounded-t-xl p-6 text-slate-100"
|
||||
>
|
||||
<div class="flex min-h-max flex-col gap-20 text-sm">
|
||||
{#if sponsors.diamond.length > 0}
|
||||
<div class="flex flex-col gap-6 rounded-xl">
|
||||
<h2
|
||||
class="bg-gradient-to-r from-primary to-blue-500 bg-clip-text text-center text-xl font-bold text-transparent"
|
||||
>
|
||||
Diamond
|
||||
</h2>
|
||||
<div class="flex justify-center gap-14 md:gap-16">
|
||||
{#each sponsors.diamond as sponsor}
|
||||
<Sponsor {sponsor} showImage showSlogan class="h-16 w-40 md:h-24 md:w-64" />
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if sponsors.platinum.length > 0}
|
||||
<div class="flex flex-col gap-6 rounded-xl">
|
||||
<h2
|
||||
class="bg-gradient-to-r from-white to-cyan-300 bg-clip-text text-center text-xl font-bold text-transparent"
|
||||
>
|
||||
Platinum
|
||||
</h2>
|
||||
<div class="flex justify-center gap-14 md:gap-16">
|
||||
{#each sponsors.platinum as sponsor}
|
||||
<Sponsor {sponsor} showImage showSlogan class="h-16 w-40 md:h-20 md:w-60" />
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if sponsors.gold.length > 0}
|
||||
<div class="flex flex-col gap-6 rounded-xl">
|
||||
<h2
|
||||
class="bg-gradient-to-r from-yellow-200 to-yellow-400 bg-clip-text text-center text-xl font-bold text-transparent"
|
||||
>
|
||||
Gold
|
||||
</h2>
|
||||
<div class="flex flex-wrap justify-center gap-10">
|
||||
{#each sponsors.gold as sponsor}
|
||||
<Sponsor
|
||||
{sponsor}
|
||||
showImage
|
||||
showLink
|
||||
class="w-30 h-12 md:h-20 md:w-48"
|
||||
linkClass="max-md:hidden"
|
||||
/>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="flex flex-wrap justify-center gap-x-16 gap-y-10">
|
||||
{#if sponsors.silver.length > 0}
|
||||
<div class="flex flex-col gap-2">
|
||||
<h2 class="text-center font-bold text-slate-300">Silver</h2>
|
||||
|
||||
<div class="flex flex-wrap gap-x-4 gap-y-2 font-medium">
|
||||
{#each sponsors.silver as sponsor}
|
||||
<Sponsor {sponsor} showImage class={smallImages} />
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if sponsors.bronze.length > 0}
|
||||
<div class="flex flex-col gap-2">
|
||||
<h2 class="text-center font-bold text-slate-300">Bronze</h2>
|
||||
|
||||
<div class="flex flex-wrap gap-x-4 gap-y-2 font-medium">
|
||||
{#each sponsors.bronze as sponsor}
|
||||
<Sponsor {sponsor} class={smallImages} />
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="col-span-full mt-8 flex size-full w-full items-center justify-center self-center"
|
||||
style="margin-top: 5rem; margin-bottom: -5rem;"
|
||||
>
|
||||
<Button type="outline" href="https://account.hypr.land/sponsors" size="xl"
|
||||
>Sponsor us</Button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
{:else}
|
||||
<section
|
||||
class="group -my-5 mt-16 flex flex-col gap-3 self-center text-center text-slate-300 md:-my-[8rem]"
|
||||
>
|
||||
<p class="text-2xl font-medium text-slate-500">We currently have no sponsors :(</p>
|
||||
<p class="text-slate-200">Are you interested or know one person who might be?</p>
|
||||
<a
|
||||
href="https://account.hypr.land/sponsors"
|
||||
class="text-cyan-400 decoration-primary hover:text-cyan-300 hover:underline"
|
||||
>Hit us up :)
|
||||
</a>
|
||||
</section>
|
||||
{/if}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue