mirror of https://github.com/VERT-sh/VERT.git
Componetize about page
This commit is contained in:
JovannMC
parent
a99eccc25d
commit
c7ca12a924
|
|
@ -0,0 +1,71 @@
|
||||||
|
<script lang="ts">
|
||||||
|
import Panel from "$lib/components/visual/Panel.svelte";
|
||||||
|
import { HeartHandshakeIcon } from "lucide-svelte";
|
||||||
|
|
||||||
|
let { mainContribs, ghContribs } = $props();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{#snippet contributor(name: string, role: string, avatar: string)}
|
||||||
|
<div class="flex items-center gap-4">
|
||||||
|
<img
|
||||||
|
src={avatar}
|
||||||
|
alt={name}
|
||||||
|
title={name}
|
||||||
|
class="w-14 h-14 rounded-full"
|
||||||
|
/>
|
||||||
|
<div class="flex flex-col gap-1">
|
||||||
|
<p class="text-xl font-semibold">{name}</p>
|
||||||
|
<p class="text-sm font-normal text-muted">{role}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/snippet}
|
||||||
|
|
||||||
|
<Panel class="flex flex-col gap-8 p-6">
|
||||||
|
<h2 class="text-2xl font-bold">
|
||||||
|
<HeartHandshakeIcon
|
||||||
|
size="40"
|
||||||
|
class="inline-block -mt-1 mr-2 bg-blue-300 p-1.5 rounded-full"
|
||||||
|
color="black"
|
||||||
|
/>
|
||||||
|
Credits
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<!-- Main Contributors -->
|
||||||
|
<div class="flex flex-col gap-4">
|
||||||
|
<div class="flex flex-row flex-wrap gap-2">
|
||||||
|
{#each mainContribs as contrib}
|
||||||
|
{@const { name, role, avatar } = contrib}
|
||||||
|
{@render contributor(name, role, avatar)}
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- GitHub Contributors -->
|
||||||
|
<div class="flex flex-col gap-4">
|
||||||
|
<div class="flex flex-col gap-1">
|
||||||
|
<h2 class="text-base font-bold">GitHub Contributors</h2>
|
||||||
|
<p class="text-sm text-muted font-normal">
|
||||||
|
Big thanks to all these people for helping out!
|
||||||
|
<a
|
||||||
|
class="text-blue-500 font-normal"
|
||||||
|
href="https://github.com/not-nullptr/VERT"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
>
|
||||||
|
Want to help too?
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-row flex-wrap gap-2">
|
||||||
|
{#each ghContribs as contrib}
|
||||||
|
{@const { name, avatar } = contrib}
|
||||||
|
<img
|
||||||
|
src={avatar}
|
||||||
|
alt={name}
|
||||||
|
title={name}
|
||||||
|
class="w-10 h-10 rounded-full"
|
||||||
|
/>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Panel>
|
||||||
|
|
@ -0,0 +1,113 @@
|
||||||
|
<script lang="ts">
|
||||||
|
import Panel from "$lib/components/visual/Panel.svelte";
|
||||||
|
import { CalendarHeartIcon, HandCoinsIcon, HeartIcon, WalletIcon } from "lucide-svelte";
|
||||||
|
|
||||||
|
let { donors } = $props();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{#snippet donor(name: string, amount: number | string, avatar: string)}
|
||||||
|
<div class="flex items-center bg-button rounded-full overflow-hidden">
|
||||||
|
<img
|
||||||
|
src={avatar}
|
||||||
|
alt={name}
|
||||||
|
title={name}
|
||||||
|
class="w-9 h-9 rounded-full"
|
||||||
|
/>
|
||||||
|
<p class="text-sm text-black dynadark:text-white px-4">${amount}</p>
|
||||||
|
</div>
|
||||||
|
{/snippet}
|
||||||
|
|
||||||
|
<Panel class="flex flex-col gap-8 p-6">
|
||||||
|
<div class="flex flex-col gap-3">
|
||||||
|
<h2 class="text-2xl font-bold">
|
||||||
|
<HeartIcon
|
||||||
|
size="40"
|
||||||
|
class="inline-block -mt-1 mr-2 bg-rose-300 p-1.5 rounded-full"
|
||||||
|
color="black"
|
||||||
|
/>
|
||||||
|
Donate to VERT
|
||||||
|
</h2>
|
||||||
|
<p class="text-base font-normal">
|
||||||
|
With your support, we can keep maintaining and improving
|
||||||
|
VERT.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex flex-col gap-3 w-full">
|
||||||
|
<div class="flex gap-2 w-full">
|
||||||
|
<button
|
||||||
|
class="flex-1 p-4 rounded-lg bg-rose-300 text-black flex items-center justify-center"
|
||||||
|
>
|
||||||
|
<HandCoinsIcon
|
||||||
|
size="24"
|
||||||
|
class="inline-block mr-2"
|
||||||
|
/>
|
||||||
|
One-time
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
class="flex-1 p-4 rounded-lg bg-button text-black dynadark:text-white flex items-center justify-center"
|
||||||
|
>
|
||||||
|
<CalendarHeartIcon
|
||||||
|
size="24"
|
||||||
|
class="inline-block mr-2"
|
||||||
|
/>
|
||||||
|
Monthly
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="flex gap-3 w-full">
|
||||||
|
<button
|
||||||
|
class="bg-rose-300 text-black p-4 rounded-lg flex-1"
|
||||||
|
>$1 USD</button
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
class="bg-button text-black dynadark:text-white p-4 rounded-lg flex-1"
|
||||||
|
>$5 USD</button
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
class="bg-button text-black dynadark:text-white p-4 rounded-lg flex-1"
|
||||||
|
>$10 USD</button
|
||||||
|
>
|
||||||
|
<div class="relative flex items-center flex-[2]">
|
||||||
|
<span class="absolute left-3 text-gray-500">$</span>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
class="pl-8 pr-2 rounded-lg border border-gray-300 dynadark:border-gray-500 w-full h-full bg-button text-black dynadark:text-white"
|
||||||
|
placeholder="Custom"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex flex-row justify-center w-full">
|
||||||
|
<p class="text-muted text-sm flex-[4] flex items-center">
|
||||||
|
Payments and subscription management <br /> are handled through
|
||||||
|
Liberapay
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<button
|
||||||
|
class="flex-1 p-3 rounded-3xl bg-rose-300 text-black flex items-center justify-center"
|
||||||
|
>
|
||||||
|
<WalletIcon size="24" class="inline-block mr-2" />
|
||||||
|
Pay Now
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- top donors -->
|
||||||
|
<div class="flex flex-col gap-4">
|
||||||
|
<div class="flex flex-col gap-1">
|
||||||
|
<h2 class="text-base font-bold">Our top donors</h2>
|
||||||
|
<p class="text-base text-muted font-normal">
|
||||||
|
People like these fuel the things we love to do.
|
||||||
|
Thank you so much!
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex flex-row flex-wrap gap-2">
|
||||||
|
{#each donors as dono}
|
||||||
|
{@const { name, amount, avatar } = dono}
|
||||||
|
{@render donor(name, amount, avatar)}
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Panel>
|
||||||
|
|
@ -0,0 +1,38 @@
|
||||||
|
<script lang="ts">
|
||||||
|
import Panel from "$lib/components/visual/Panel.svelte";
|
||||||
|
import { GithubIcon, LinkIcon, MessageCircleMoreIcon } from "lucide-svelte";
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<Panel class="flex flex-col gap-4 p-6">
|
||||||
|
<h2 class="text-2xl font-bold">
|
||||||
|
<LinkIcon
|
||||||
|
size="40"
|
||||||
|
class="inline-block -mt-1 mr-2 bg-violet-400 bg- p-1.5 rounded-full"
|
||||||
|
color="black"
|
||||||
|
/>
|
||||||
|
Resources
|
||||||
|
</h2>
|
||||||
|
<div class="flex gap-3">
|
||||||
|
<a
|
||||||
|
href="https://discord.gg/kqevGxYPak"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
class="flex-1 gap-2 p-4 rounded-full bg-button text-black dynadark:text-white flex items-center justify-center"
|
||||||
|
>
|
||||||
|
<MessageCircleMoreIcon
|
||||||
|
size="24"
|
||||||
|
class="inline-block mr-2"
|
||||||
|
/>
|
||||||
|
Discord Server
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="https://github.com/not-nullptr/VERT"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
class="flex-1 gap-2 p-4 rounded-full bg-button text-black dynadark:text-white flex items-center justify-center"
|
||||||
|
>
|
||||||
|
<GithubIcon size="24" class="inline-block mr-2" />
|
||||||
|
Source Code
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</Panel>
|
||||||
|
|
@ -0,0 +1,27 @@
|
||||||
|
<script lang="ts">
|
||||||
|
import Panel from "$lib/components/visual/Panel.svelte";
|
||||||
|
import { MessageCircleQuestionIcon } from "lucide-svelte";
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<Panel class="flex flex-col gap-3 p-6">
|
||||||
|
<h2 class="text-2xl font-bold">
|
||||||
|
<MessageCircleQuestionIcon
|
||||||
|
size="40"
|
||||||
|
class="inline-block -mt-1 mr-2 bg-accent p-1.5 rounded-full"
|
||||||
|
color="black"
|
||||||
|
/>
|
||||||
|
Why VERT?
|
||||||
|
</h2>
|
||||||
|
<p class="text-lg font-normal">
|
||||||
|
<b>File converters have always disappointed us.</b> They're
|
||||||
|
ugly, riddled with ads, and most importantly; slow. We
|
||||||
|
decided to solve this problem once and for all by making an
|
||||||
|
alternative that solves all those problems, and then some.<br
|
||||||
|
/>
|
||||||
|
<br />
|
||||||
|
All your files are converted completely on—device, which means
|
||||||
|
that there's no delay between sending and receiving the file
|
||||||
|
from a server, and that we never get to snoop on the files you
|
||||||
|
convert.
|
||||||
|
</p>
|
||||||
|
</Panel>
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
export { default as Credits } from './Credits.svelte';
|
||||||
|
export { default as Donate } from './Donate.svelte';
|
||||||
|
export { default as Resources } from './Resources.svelte';
|
||||||
|
export { default as Why } from './Why.svelte';
|
||||||
|
|
@ -11,7 +11,7 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
class="w-screen h-full flex items-center justify-center overflow-hidden -mt-20"
|
class="w-screen h-full flex items-center justify-center overflow-hidden -mt-14"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="absolute -z-30 top-0 left-0 w-screen flex items-center justify-center overflow-hidden"
|
class="absolute -z-30 top-0 left-0 w-screen flex items-center justify-center overflow-hidden"
|
||||||
|
|
|
||||||
|
|
@ -1,17 +1,6 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import Panel from "$lib/components/visual/Panel.svelte";
|
import * as About from "$lib/sections/about";
|
||||||
import {
|
import { InfoIcon } from "lucide-svelte";
|
||||||
CalendarHeartIcon,
|
|
||||||
GithubIcon,
|
|
||||||
HandCoinsIcon,
|
|
||||||
HeartHandshakeIcon,
|
|
||||||
HeartIcon,
|
|
||||||
InfoIcon,
|
|
||||||
LinkIcon,
|
|
||||||
MessageCircleMoreIcon,
|
|
||||||
MessageCircleQuestionIcon,
|
|
||||||
WalletIcon,
|
|
||||||
} from "lucide-svelte";
|
|
||||||
|
|
||||||
const donors = [
|
const donors = [
|
||||||
{
|
{
|
||||||
|
|
@ -110,33 +99,6 @@
|
||||||
];
|
];
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
{#snippet donor(name: string, amount: number | string, avatar: string)}
|
|
||||||
<div class="flex items-center bg-button rounded-full overflow-hidden">
|
|
||||||
<img
|
|
||||||
src={avatar}
|
|
||||||
alt={name}
|
|
||||||
title={name}
|
|
||||||
class="w-9 h-9 rounded-full"
|
|
||||||
/>
|
|
||||||
<p class="text-sm text-black dynadark:text-white px-4">${amount}</p>
|
|
||||||
</div>
|
|
||||||
{/snippet}
|
|
||||||
|
|
||||||
{#snippet contributor(name: string, role: string, avatar: string)}
|
|
||||||
<div class="flex items-center gap-4">
|
|
||||||
<img
|
|
||||||
src={avatar}
|
|
||||||
alt={name}
|
|
||||||
title={name}
|
|
||||||
class="w-14 h-14 rounded-full"
|
|
||||||
/>
|
|
||||||
<div class="flex flex-col gap-1">
|
|
||||||
<p class="text-xl font-semibold">{name}</p>
|
|
||||||
<p class="text-sm font-normal text-muted">{role}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{/snippet}
|
|
||||||
|
|
||||||
<div class="flex flex-col h-full items-center blur-in">
|
<div class="flex flex-col h-full items-center blur-in">
|
||||||
<h1
|
<h1
|
||||||
class="text-3xl tracking-tight leading-[72px] mb-6"
|
class="text-3xl tracking-tight leading-[72px] mb-6"
|
||||||
|
|
@ -149,214 +111,14 @@
|
||||||
<div class="w-full max-w-[1280px] flex flex-row gap-4">
|
<div class="w-full max-w-[1280px] flex flex-row gap-4">
|
||||||
<!-- Why VERT? & Credits -->
|
<!-- Why VERT? & Credits -->
|
||||||
<div class="flex flex-col gap-4 flex-1">
|
<div class="flex flex-col gap-4 flex-1">
|
||||||
<!-- Why VERT? -->
|
<About.Why />
|
||||||
<Panel class="flex flex-col gap-3 p-6">
|
<About.Credits {mainContribs} {ghContribs} />
|
||||||
<h2 class="text-2xl font-bold">
|
|
||||||
<MessageCircleQuestionIcon
|
|
||||||
size="40"
|
|
||||||
class="inline-block -mt-1 mr-2 bg-accent p-1.5 rounded-full"
|
|
||||||
color="black"
|
|
||||||
/>
|
|
||||||
Why VERT?
|
|
||||||
</h2>
|
|
||||||
<p class="text-lg font-normal">
|
|
||||||
<b>File converters have always disappointed us.</b> They're
|
|
||||||
ugly, riddled with ads, and most importantly; slow. We
|
|
||||||
decided to solve this problem once and for all by making an
|
|
||||||
alternative that solves all those problems, and then some.<br
|
|
||||||
/>
|
|
||||||
<br />
|
|
||||||
All your files are converted completely on—device, which means
|
|
||||||
that there's no delay between sending and receiving the file
|
|
||||||
from a server, and that we never get to snoop on the files you
|
|
||||||
convert.
|
|
||||||
</p>
|
|
||||||
</Panel>
|
|
||||||
|
|
||||||
<!-- Credits -->
|
|
||||||
<Panel class="flex flex-col gap-8 p-6">
|
|
||||||
<h2 class="text-2xl font-bold">
|
|
||||||
<HeartHandshakeIcon
|
|
||||||
size="40"
|
|
||||||
class="inline-block -mt-1 mr-2 bg-blue-300 p-1.5 rounded-full"
|
|
||||||
color="black"
|
|
||||||
/>
|
|
||||||
Credits
|
|
||||||
</h2>
|
|
||||||
|
|
||||||
<!-- Main Contributors -->
|
|
||||||
<div class="flex flex-col gap-4">
|
|
||||||
<div class="flex flex-row flex-wrap gap-2">
|
|
||||||
{#each mainContribs as contrib}
|
|
||||||
{@const { name, role, avatar } = contrib}
|
|
||||||
{@render contributor(name, role, avatar)}
|
|
||||||
{/each}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- GitHub Contributors -->
|
|
||||||
<div class="flex flex-col gap-4">
|
|
||||||
<div class="flex flex-col gap-1">
|
|
||||||
<h2 class="text-base font-bold">GitHub Contributors</h2>
|
|
||||||
<p class="text-sm text-muted font-normal">
|
|
||||||
Big thanks to all these people for helping out!
|
|
||||||
<a
|
|
||||||
class="text-blue-500 font-normal"
|
|
||||||
href="https://github.com/not-nullptr/VERT"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
>
|
|
||||||
Want to help too?
|
|
||||||
</a>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="flex flex-row flex-wrap gap-2">
|
|
||||||
{#each ghContribs as contrib}
|
|
||||||
{@const { name, avatar } = contrib}
|
|
||||||
<img
|
|
||||||
src={avatar}
|
|
||||||
alt={name}
|
|
||||||
title={name}
|
|
||||||
class="w-10 h-10 rounded-full"
|
|
||||||
/>
|
|
||||||
{/each}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Panel>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Resources & Donate to VERT -->
|
<!-- Resources & Donate to VERT -->
|
||||||
<div class="flex flex-col gap-4 flex-1">
|
<div class="flex flex-col gap-4 flex-1">
|
||||||
<!-- Resources -->
|
<About.Resources />
|
||||||
<Panel class="flex flex-col gap-4 p-6">
|
<About.Donate {donors} />
|
||||||
<h2 class="text-2xl font-bold">
|
|
||||||
<LinkIcon
|
|
||||||
size="40"
|
|
||||||
class="inline-block -mt-1 mr-2 bg-violet-400 bg- p-1.5 rounded-full"
|
|
||||||
color="black"
|
|
||||||
/>
|
|
||||||
Resources
|
|
||||||
</h2>
|
|
||||||
<div class="flex gap-3">
|
|
||||||
<a
|
|
||||||
href="https://discord.gg/kqevGxYPak"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
class="flex-1 gap-2 p-4 rounded-full bg-button text-black dynadark:text-white flex items-center justify-center"
|
|
||||||
>
|
|
||||||
<MessageCircleMoreIcon
|
|
||||||
size="24"
|
|
||||||
class="inline-block mr-2"
|
|
||||||
/>
|
|
||||||
Discord Server
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
href="https://github.com/not-nullptr/VERT"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
class="flex-1 gap-2 p-4 rounded-full bg-button text-black dynadark:text-white flex items-center justify-center"
|
|
||||||
>
|
|
||||||
<GithubIcon size="24" class="inline-block mr-2" />
|
|
||||||
Source Code
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</Panel>
|
|
||||||
|
|
||||||
<!-- Donate to VERT -->
|
|
||||||
<Panel class="flex flex-col gap-8 p-6">
|
|
||||||
<div class="flex flex-col gap-3">
|
|
||||||
<h2 class="text-2xl font-bold">
|
|
||||||
<HeartIcon
|
|
||||||
size="40"
|
|
||||||
class="inline-block -mt-1 mr-2 bg-rose-300 p-1.5 rounded-full"
|
|
||||||
color="black"
|
|
||||||
/>
|
|
||||||
Donate to VERT
|
|
||||||
</h2>
|
|
||||||
<p class="text-base font-normal">
|
|
||||||
With your support, we can keep maintaining and improving
|
|
||||||
VERT.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex flex-col gap-3 w-full">
|
|
||||||
<div class="flex gap-2 w-full">
|
|
||||||
<button
|
|
||||||
class="flex-1 p-4 rounded-lg bg-rose-300 text-black flex items-center justify-center"
|
|
||||||
>
|
|
||||||
<HandCoinsIcon
|
|
||||||
size="24"
|
|
||||||
class="inline-block mr-2"
|
|
||||||
/>
|
|
||||||
One-time
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button
|
|
||||||
class="flex-1 p-4 rounded-lg bg-button text-black dynadark:text-white flex items-center justify-center"
|
|
||||||
>
|
|
||||||
<CalendarHeartIcon
|
|
||||||
size="24"
|
|
||||||
class="inline-block mr-2"
|
|
||||||
/>
|
|
||||||
Monthly
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div class="flex gap-3 w-full">
|
|
||||||
<button
|
|
||||||
class="bg-rose-300 text-black p-4 rounded-lg flex-1"
|
|
||||||
>$1 USD</button
|
|
||||||
>
|
|
||||||
<button
|
|
||||||
class="bg-button text-black dynadark:text-white p-4 rounded-lg flex-1"
|
|
||||||
>$5 USD</button
|
|
||||||
>
|
|
||||||
<button
|
|
||||||
class="bg-button text-black dynadark:text-white p-4 rounded-lg flex-1"
|
|
||||||
>$10 USD</button
|
|
||||||
>
|
|
||||||
<div class="relative flex items-center flex-[2]">
|
|
||||||
<span class="absolute left-3 text-gray-500">$</span>
|
|
||||||
<input
|
|
||||||
type="number"
|
|
||||||
class="pl-8 pr-2 rounded-lg border border-gray-300 dynadark:border-gray-500 w-full h-full bg-button text-black dynadark:text-white"
|
|
||||||
placeholder="Custom"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex flex-row justify-center w-full">
|
|
||||||
<p class="text-muted text-sm flex-[4] flex items-center">
|
|
||||||
Payments and subscription management <br /> are handled through
|
|
||||||
Liberapay
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<button
|
|
||||||
class="flex-1 p-3 rounded-3xl bg-rose-300 text-black flex items-center justify-center"
|
|
||||||
>
|
|
||||||
<WalletIcon size="24" class="inline-block mr-2" />
|
|
||||||
Pay Now
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- top donors -->
|
|
||||||
<div class="flex flex-col gap-4">
|
|
||||||
<div class="flex flex-col gap-1">
|
|
||||||
<h2 class="text-base font-bold">Our top donors</h2>
|
|
||||||
<p class="text-base text-muted font-normal">
|
|
||||||
People like these fuel the things we love to do.
|
|
||||||
Thank you so much!
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex flex-row flex-wrap gap-2">
|
|
||||||
{#each donors as dono}
|
|
||||||
{@const { name, amount, avatar } = dono}
|
|
||||||
{@render donor(name, amount, avatar)}
|
|
||||||
{/each}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Panel>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue