-
Notifications
You must be signed in to change notification settings - Fork 10
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
b2b293e
commit 5e193d5
Showing
3 changed files
with
216 additions
and
2 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,71 @@ | ||
| --- | ||
| import { Icon } from "astro-icon/components"; | ||
| interface Props { | ||
| cards: { | ||
| title: string; | ||
| description: string; | ||
| ages?: string; | ||
| date?: string; | ||
| type: string; | ||
| signupLink?: string; | ||
| }[]; | ||
| } | ||
| const { cards } = Astro.props; | ||
| --- | ||
|
|
||
| <!-- Icon Blocks --> | ||
| <div class="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto"> | ||
| <div class="grid sm:grid-cols-2 lg:grid-cols-3 items-center gap-6"> | ||
| <!-- Card --> | ||
| { | ||
| cards.map((card) => ( | ||
| <a | ||
| class="group flex gap-y-6 size-full hover:bg-gray-100 rounded-lg p-5 transition-all dark:hover:bg-neutral-800 dark:focus:outline-none dark:focus:outline-none dark:focus:bg-neutral-800" | ||
| href={card.signupLink} | ||
| > | ||
| <Icon | ||
| name="mdi:school" | ||
| class="flex-shrink-0 size-8 text-gray-800 mt-0.5 me-6 dark:text-neutral-200" | ||
| /> | ||
|
|
||
| <div> | ||
| <div> | ||
| <h3 class="block font-bold text-gray-800 dark:text-white"> | ||
| {card.title} | ||
| </h3> | ||
| <p class="text-gray-600 dark:text-neutral-400"> | ||
| {card.description} | ||
| </p> | ||
| <br /> | ||
| <ul class="list-disc text-gray-600 dark:text-neutral-400"> | ||
| <li>When: Every {card.date}</li> | ||
| <li>Age Range: School years {card.ages}</li> | ||
| </ul> | ||
| </div> | ||
| {card.signupLink && ( | ||
| <p class="mt-3 inline-flex items-center gap-x-1 text-sm font-semibold text-gray-800 dark:text-neutral-200"> | ||
| Sign Up | ||
| <svg | ||
| class="flex-shrink-0 size-4 transition ease-in-out group-hover:translate-x-1 group-focus:translate-x-1" | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| width="24" | ||
| height="24" | ||
| viewBox="0 0 24 24" | ||
| fill="none" | ||
| stroke="currentColor" | ||
| stroke-width="2" | ||
| stroke-linecap="round" | ||
| stroke-linejoin="round" | ||
| > | ||
| <path d="m9 18 6-6-6-6" /> | ||
| </svg> | ||
| </p> | ||
| )} | ||
| </div> | ||
| </a> | ||
| )) | ||
| } | ||
| </div> | ||
| </div> | ||
| <!-- End Icon Blocks --> |
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 |
|---|---|---|
| @@ -1,7 +1,41 @@ | ||
| --- | ||
| import Layout from "@layouts/Layout.astro"; | ||
| import IconCards from "@components/IconCards.astro"; | ||
| import featureImage from "@images/hero.avif"; | ||
| import { Image } from "astro:assets"; | ||
| import { sessions } from "../data"; | ||
| const title = "What We Do"; | ||
| --- | ||
|
|
||
| <Layout meta={{ title }} /> | ||
| <Layout meta={{ title }}> | ||
| <!-- Hero --> | ||
| <div class="max-w-[85rem] mx-auto px-4 sm:px-6 lg:px-8"> | ||
| <!-- Grid --> | ||
| <div class="grid lg:grid-cols-7 lg:gap-x-8 xl:gap-x-12 lg:items-center"> | ||
| <div class="lg:col-span-3"> | ||
| <h1 | ||
| class="block text-3xl font-bold text-gray-800 sm:text-4xl md:text-5xl lg:text-6xl dark:text-white" | ||
| > | ||
| What We Do | ||
| </h1> | ||
| <p class="mt-3 text-lg text-gray-800 dark:text-neutral-400"> | ||
| We Do a Lot | ||
| </p> | ||
| </div> | ||
| <!-- End Col --> | ||
|
|
||
| <div class="lg:col-span-4 mt-10 lg:mt-0"> | ||
| <Image | ||
| src={featureImage} | ||
| alt="Group of rangatahi" | ||
| class="w-full rounded-xl" | ||
| /> | ||
| </div> | ||
| <!-- End Col --> | ||
| </div> | ||
| <!-- End Grid --> | ||
| </div> | ||
| <!-- End Hero --> | ||
|
|
||
| {sessions.map((location) => <IconCards cards={location.sessions} />)} | ||
| </Layout> |