argobox/src/pages/homelab.astro

56 lines
1.6 KiB
Plaintext

---
// src/pages/homelab.astro - Fixed main file with proper component imports
import BaseLayout from '../layouts/BaseLayout.astro';
import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro';
import HeroSection from '../components/homelab/HeroSection.astro';
import ServicesSection from '../components/homelab/ServicesSection.astro';
import ProjectsSection from '../components/homelab/ProjectsSection.astro';
import { servicesData, projectsData, dashboardsData } from '../data/homelabData';
const title = "Home Lab | ArgoBox - ArgoBox Tech Hub";
const description = "ArgoBox - A production-grade Kubernetes homelab for DevOps experimentation, infrastructure automation, and containerized application deployment.";
// Calculate total services count for the hero section
const servicesCount = Object.values(servicesData).flat().length;
---
<BaseLayout {title} {description}>
<Header slot="header" />
<main class="homelab-page">
<HeroSection servicesCount={servicesCount} />
<ServicesSection servicesData={servicesData} />
<ProjectsSection projectsData={projectsData} />
</main>
<Footer slot="footer" />
</BaseLayout>
<style is:global>
/* Global styles - can be moved to a separate CSS file if needed */
.section-padding {
padding: 5rem 0;
}
.alt-bg {
background-color: var(--bg-secondary);
}
.section-header {
text-align: center;
margin-bottom: 3rem;
}
.section-title {
font-size: 2.5rem;
margin-bottom: 1rem;
}
.section-description {
font-size: 1.125rem;
color: var(--text-secondary);
max-width: 700px;
margin: 0 auto;
}
</style>