web/src/pages/index.astro
2025-01-22 22:38:19 -06:00

107 lines
4.3 KiB
Text

---
import Layout from "../layouts/Layout.astro";
import { siteConfig } from "../config/site";
const pageMetaInfo = {
title: siteConfig.name,
description: `Welcome to ${siteConfig.name} - ${siteConfig.description}`,
};
---
<Layout title={pageMetaInfo.title} description={pageMetaInfo.description}>
<div class="max-w-4xl mx-auto">
<section
class="card bg-neutral text-neutral-content shadow-xl"
aria-labelledby="welcome-heading"
>
<div class="card-body">
<h1 id="welcome-heading" class="card-title text-3xl">
{siteConfig.hero.title}
</h1>
<p>{siteConfig.hero.description}</p>
</div>
</section>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-8">
{
siteConfig.featureCards.cards.map((card) => (
<article
class={
card.variant === "primary"
? "card bg-primary text-primary-content"
: "card bg-secondary text-secondary-content"
}
>
<div class="card-body">
<h2 class="card-title">{card.title}</h2>
</div>
</article>
))
}
</div>
{
siteConfig.statistics.enabled &&
siteConfig.statistics.stats.length > 0 && (
<section
class="stats shadow mt-8 w-full bg-neutral text-neutral-content"
aria-label={siteConfig.statistics.title}
>
{siteConfig.statistics.stats.map((stat) => (
<div class="stat">
<div
class="stat-title"
id={`${stat.title.toLowerCase()}-stat`}
>
{stat.title}
</div>
<div
class="stat-value"
aria-labelledby={`${stat.title.toLowerCase()}-stat`}
>
{stat.value}
</div>
{stat.change && (
<div
class="stat-desc"
aria-label={`${
stat.change.direction === "up"
? "Increase"
: "Decrease"
} of ${stat.change.value} (${stat.change.percentage}%)`}
>
{stat.change.direction === "up"
? "↗︎"
: "↘︎"}{" "}
{stat.change.value} (
{stat.change.percentage}%)
</div>
)}
</div>
))}
</section>
)
}
<section
class="card bg-neutral text-neutral-content shadow-xl mt-8 hidden lg:block"
aria-labelledby="contact-heading"
>
<div class="card-body">
<h2 id="contact-heading" class="card-title">
{siteConfig.contact.title}
</h2>
<p>{siteConfig.contact.description}</p>
<div class="card-actions justify-end">
<button
class="btn btn-primary"
onclick={`window.location.href='${siteConfig.contact.cta.href}'`}
aria-label={siteConfig.contact.cta.ariaLabel}
>
{siteConfig.contact.cta.text}
</button>
</div>
</div>
</section>
</div>
</Layout>