-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add hover transitions and partners page, update NumberTicker componen…
…t and stats on homepage, and refactor img-src directive (#147) This pull request includes several changes: - The "refactor: Add hover transitions" commit adds hover transitions to a Svelte component. - The "feat: add partners page" commit adds a new page to display partnerships with other communities. - The "feat: Add NumberTicker component" commit adds a new Svelte component called NumberTicker. - The "feat: add stats to homepage" commit adds statistics to the homepage. - The "refactor: Update img-src directive in svelte.config.js" commit updates the img-src directive in the svelte.config.js file. - The "chore: Update npm dependencies to latest versions" commit updates the npm dependencies to their latest versions. These changes improve the user experience by adding hover transitions, a new partners page, a NumberTicker component, and statistics on the homepage. The img-src directive in the svelte.config.js file is also updated for better security.
- Loading branch information
Showing
10 changed files
with
461 additions
and
251 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| <script lang="ts"> | ||
| import { cn } from "$lib/utils"; | ||
| import { onMount } from "svelte"; | ||
| import { cubicOut } from "svelte/easing"; | ||
| import { tweened } from "svelte/motion"; | ||
| export let value = 100; | ||
| export let initial = 0; | ||
| export let duration = 6000; | ||
| let num = tweened(initial, { | ||
| duration: duration, | ||
| easing: cubicOut | ||
| }); | ||
| let className: string = ""; | ||
| export { className as class }; | ||
| onMount(() => { | ||
| num.set(value); | ||
| }); | ||
| </script> | ||
|
|
||
| <div class={cn("inline-block tracking-normal", className)} {...$$restProps}> | ||
| {$num.toFixed(0)} | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| <script lang="ts"> | ||
| import PartnerCard from "./partner-card.svelte"; | ||
| import { partners } from "./partners"; | ||
| </script> | ||
|
|
||
| <div class="relative mx-auto flex w-full max-w-sm flex-col items-center justify-center gap-3"> | ||
| <h2 class="text-center text-6xl font-semibold leading-none text-foreground">Partnerships</h2> | ||
| <p class="text-center text-xs text-accent">We are proud to be partnered with the following communities. <br /> If you are interested in partnering with us, please reach out to us.</p> | ||
| </div> | ||
|
|
||
| <div class="py-8 max-md:pb-20"> | ||
| <div class="mx-auto flex max-w-7xl flex-wrap items-center justify-center gap-6 px-4 sm:px-6 lg:px-8"> | ||
| {#each partners as partner} | ||
| <PartnerCard cardData={partner} /> | ||
| {/each} | ||
| </div> | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,56 @@ | ||
| <script lang="ts"> | ||
| import * as Avatar from "$lib/components/ui/avatar"; | ||
| import * as Card from "$lib/components/ui/card"; | ||
| import * as Tooltip from "$lib/components/ui/tooltip"; | ||
| import Earth from "lucide-svelte/icons/earth"; | ||
| import type { CardData } from "./partners"; | ||
| export let cardData: CardData; | ||
| </script> | ||
|
|
||
| <Card.Root class="max-w-[32rem] border-border bg-background"> | ||
| <Card.Header class="flex flex-col items-center justify-center space-y-0 max-md:gap-6 md:flex-row md:justify-between"> | ||
| <a href={cardData.links[0].url} target="_blank" rel="noopener noreferrer" class="group flex flex-row items-center justify-start gap-2"> | ||
| <Avatar.Root class="pointer-events-none select-none"> | ||
| <Avatar.Image src={cardData.image} alt={cardData.title} class="transition-all duration-300 group-hover:brightness-150" /> | ||
| <Avatar.Fallback class="transition-all duration-300 group-hover:brightness-150">{cardData.title.slice(0, 2).toUpperCase()}</Avatar.Fallback> | ||
| </Avatar.Root> | ||
| <div class="flex flex-col"> | ||
| <Card.Title>{cardData.title}</Card.Title> | ||
| {#if cardData.subTitle} | ||
| <Card.Description>{cardData.subTitle}</Card.Description> | ||
| {/if} | ||
| </div> | ||
| </a> | ||
| <div class="flex flex-row-reverse flex-wrap items-center justify-center gap-2"> | ||
| {#each cardData.links as link} | ||
| <Tooltip.Root openDelay={100} closeDelay={0} group="links" closeOnPointerDown={true} closeOnEscape={true}> | ||
| <Tooltip.Trigger asChild let:builder class="group"> | ||
| <a href={link.url} target="_blank" rel="noopener noreferrer" class="group" use:builder.action {...builder} title={link.url}> | ||
| <Avatar.Root class="size-7 select-none"> | ||
| <Avatar.Image class="pointer-events-none h-full w-full rounded-full bg-accent p-0.5 transition-all duration-300 group-hover:p-0" src={`/api/internal/favicon/${encodeURIComponent(link.url.toString())}`} alt="Favicon" /> | ||
| <Avatar.Fallback class="pointer-events-none h-full w-full rounded-full bg-accent p-0.5 transition-all duration-300 group-hover:p-0"> | ||
| <Earth /> | ||
| </Avatar.Fallback> | ||
| </Avatar.Root> | ||
| </a> | ||
| </Tooltip.Trigger> | ||
| <Tooltip.Content class="border-border bg-popover"> | ||
| <p>{link.name}</p> | ||
| </Tooltip.Content> | ||
| </Tooltip.Root> | ||
| {/each} | ||
| </div> | ||
| </Card.Header> | ||
| <Card.Content class="text-sm"> | ||
| <p>{cardData.description}</p> | ||
| </Card.Content> | ||
| <Card.Footer class="flex flex-1 items-center justify-center"> | ||
| <Avatar.Root asChild> | ||
| <a href={cardData.links[0].url} target="_blank" rel="noopener noreferrer" class="group relative flex aspect-video h-auto w-full shrink-0 overflow-hidden rounded-xl border border-border shadow-sm"> | ||
| <Avatar.Image src={cardData.banner} alt={cardData.title} class="pointer-events-none select-none transition-all duration-300 group-hover:brightness-150" /> | ||
| <Avatar.Fallback class="pointer-events-none select-none rounded-xl transition-all duration-300 group-hover:brightness-150">{cardData.title.slice(0, 2).toUpperCase()}</Avatar.Fallback> | ||
| </a> | ||
| </Avatar.Root> | ||
| </Card.Footer> | ||
| </Card.Root> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| export type CardData = { | ||
| image: string; | ||
| title: string; | ||
| subTitle?: string; | ||
| description: string; | ||
| banner?: string; | ||
| links: { | ||
| name: string; | ||
| url: string; | ||
| }[]; | ||
| }; | ||
|
|
||
| export const partners: CardData[] = [ | ||
| { | ||
| image: "https://res.cloudinary.com/minionah/image/upload/v1/partners/icons/skyblock%20university", | ||
| title: "Skyblock University", | ||
| subTitle: "@sbuni", | ||
| description: "Skyblock University was founded with one goal in mind: to help brand new, early, and mid-game Hypixel Skyblock players by empowering them and equipping them with the tools, resources, and mentors they need to continually grow, learn, and progress.", | ||
| banner: "https://res.cloudinary.com/minionah/image/upload/v1/partners/banners/skyblock%20university%20banner", | ||
| links: [ | ||
| { | ||
| name: "Discord", | ||
| url: "https://discord.gg/sbuni" | ||
| }, | ||
| { | ||
| name: "Hypixel Forums", | ||
| url: "https://hypixel.net/threads/skyblock-university-helping-early-and-mid-game-players-no-reqs-friendly-and-welcoming-community-5-3k-member-discord-9-guilds.5730713/" | ||
| } | ||
| ] | ||
| } | ||
| ]; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters