Re-add sponsor section

This commit is contained in:
2026-01-25 11:31:13 -05:00
parent cd52d638f6
commit 84793c825d
2 changed files with 57 additions and 31 deletions

View File

@@ -0,0 +1,47 @@
<script lang="ts">
import type { Sponsors } from '$lib/schemas';
import Link from 'components/Link.svelte';
import Button from 'components/Button.svelte';
let { sponsors } = $props<{ sponsors: Sponsors[] }>();
</script>
<div class="container mx-auto px-4">
<!-- Section Header -->
<div class="my-12 text-center">
<h2 id="sponsors-title" class="text-ecsess-100 mb-2 text-4xl font-bold md:text-5xl">
Our Sponsors
</h2>
<p class="text-ecsess-200 mx-auto max-w-2xl text-base">
We're grateful to our sponsors for their continued support of ECSESS and our community.
</p>
<div class="mt-6">
<Link href="/sponsor">
<Button>Become a Sponsor</Button>
</Link>
</div>
</div>
<!-- Sponsors Flex -->
{#if sponsors && sponsors.length > 0}
<div class="flex flex-wrap justify-center gap-6 lg:gap-8">
{#each sponsors as sponsor}
<Link href={sponsor.url} external>
<div
class="bg-ecsess-950 border-ecsess-800 hover:border-ecsess-600 group flex h-32 w-sm items-center justify-center rounded-lg border p-4 transition-all hover:shadow-lg"
>
<img
src={sponsor.logo}
alt="{sponsor.name} Logo"
class="max-h-20 w-40 object-contain opacity-90 transition-opacity group-hover:opacity-100"
/>
</div>
</Link>
{/each}
</div>
{:else}
<div class="text-ecsess-300 py-12 text-center">
<p>No sponsors at this time.</p>
</div>
{/if}
</div>

View File

@@ -1,13 +1,11 @@
<script>
import FaqAccordion from 'components/homepage/FAQAccordion.svelte';
import Section from 'components/layout/Section.svelte';
import RichText from 'components/RichText.svelte';
import OhSchedule from 'components/officehour/OHSchedule.svelte';
import Link from 'components/Link.svelte';
import SeoMetaTags from 'components/layout/SeoMetaTags.svelte';
import AffiliatedGroups from 'components/homepage/AffiliatedGroups.svelte';
import { fade } from 'svelte/transition';
import Sponsors from 'components/homepage/Sponsors.svelte';
import QuickLinks from 'components/QuickLinks.svelte';
import { fade } from 'svelte/transition';
/** loading things from the server side */
let { data } = $props();
@@ -79,32 +77,13 @@
</div>
</Section>
<!-- Affiliated Clubs -->
<Section from="from-ecsess-900" to="to-ecsess-black">
<AffiliatedGroups />
<!-- Sponsors -->
<Section from="from-ecsess-900" to="to-ecsess-700" via="via-ecsess-800" direction="to-b">
<Sponsors sponsors={data.sponsors} />
</Section>
<!-- FAQs and Sponsors -->
<!-- <Section from="from-ecsess-950" to="to-ecsess-black">
<div class="grid w-full max-w-[80vw] grid-cols-1 gap-12 lg:grid-cols-2 lg:gap-24">
<div>
<h1>FAQs</h1>
<hr class="hr w-full border-dashed py-4" />
<FaqAccordion entries={data.faqs} />
</div>
<div id="sponsors" class="mb-24">
<h1>Sponsors</h1>
<hr class="hr w-full border-dashed py-4" />
<div class="flex gap-12">
{#each data.sponsors as sponsor}
<div class="max-h-20">
<Link href={sponsor.url}>
<img src={sponsor.logo} alt="{sponsor.name} Logo" class="max-h-24" />
</Link>
</div>
{/each}
</div>
</div>
</div>
</Section> -->
<!-- Affiliated Clubs -->
<Section from="from-ecsess-700" to="to-ecsess-black">
<AffiliatedGroups />
</Section>