Re-add sponsor section
This commit is contained in:
47
src/components/homepage/Sponsors.svelte
Normal file
47
src/components/homepage/Sponsors.svelte
Normal 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>
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user