improve sponsor slice (#110)

src/content/sponsors.json

@@ -1,4 +1,5 @@
 {
+	"diamond": [],
 	"platinum": [
 		{
 			"name": "37signals",
@@ -8,10 +9,8 @@
 		}
 	],
 
-	"gold": [
+	"gold": [],
-	],
 
 	"silver": [],
-	"bronze": [
+	"bronze": []
-	]
 }

src/lib/components/Sponsor.svelte

@@ -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',
+				'size-full px-1 py-0.5 text-sm font-medium  text-slate-100',
-				sponsor.link && 'hover:text-cyan-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}

src/lib/components/SponsorsSlice.svelte

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

src/lib/components/Title/TitleHeading.svelte

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

src/routes/+page.svelte

@@ -31,6 +31,8 @@
 
 		<HyprPerks />
 
+		<Sponsors sponsors={data.sponsors} />
+
 		<NewsSlice news={data.news} />
 
 		<InstallSlice />

src/routes/api/sponsors/+server.ts

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

src/routes/home-slices/SponsorsSlice.svelte

@@ -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">
+{#if hasSponsors}
-	<Title align="left" class="px-0">
+	<div class="relative flex w-full flex-col items-center justify-center">
-		<TitlePre slot="pre">And a huge thank you!</TitlePre>
+		<PatternBackground
-		<h2 slot="title" class="text-2xl font-bold md:text-3xl">Our sponsors</h2>
+			class="absolute -inset-12 inset-x-0  h-[100%]  w-full text-slate-800 opacity-40"
-	</Title>
+		/>
 
-	<Sponsors {sponsors} />
+		<section class="relative mb-12 flex max-w-5xl flex-col gap-2 px-8 md:mb-20">
-</section>
+			<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}