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

68 lines
2.6 KiB
Text

---
import Layout from "../layouts/Layout.astro";
import { siteConfig } from "../config/site";
const pageMetaInfo = {
title: "Services | " + siteConfig.name,
description:
"Comprehensive software development and IT services in Edmonton, Alberta",
};
---
<Layout title={pageMetaInfo.title} description={pageMetaInfo.description}>
<div class="max-w-5xl mx-auto flex flex-col gap-4">
<!-- Increased from 4xl to 5xl -->
<section class="card bg-neutral text-neutral-content shadow-xl">
<div class="card-body">
<h1 class="card-title text-3xl">Our Services</h1>
<p class="text-lg">
Comprehensive software development and IT solutions tailored
to your needs.
</p>
</div>
</section>
<div class="flex flex-wrap gap-4">
{
siteConfig.featureCards.cards.map((service, index) => (
<section class="card bg-neutral text-neutral-content shadow-xl basis-[calc(50%-0.5rem)]">
<div class="card-body">
<div class="flex items-center gap-4">
<div
class={`badge badge-${service.variant} badge-lg`}
>
{index + 1}
</div>
<h2 class="card-title text-2xl">
{service.title}
</h2>
</div>
<p class="text-lg mt-4">{service.content}</p>
</div>
</section>
))
}
</div>
<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>