173 lines
3.7 KiB
Plaintext
173 lines
3.7 KiB
Plaintext
---
|
|
import { getEmDashCollection, getSiteSettings } from "emdash";
|
|
import Base from "../layouts/Base.astro";
|
|
import ProjectCard from "../components/ProjectCard.astro";
|
|
|
|
const settings = await getSiteSettings();
|
|
const { entries: projects, cacheHint } =
|
|
await getEmDashCollection("projects");
|
|
|
|
Astro.cache.set(cacheHint);
|
|
|
|
// Get the 4 most recent projects for the homepage
|
|
const featuredProjects = projects
|
|
.toSorted((a, b) => {
|
|
const dateA = a.data.publishedAt?.getTime() ?? 0;
|
|
const dateB = b.data.publishedAt?.getTime() ?? 0;
|
|
return dateB - dateA;
|
|
})
|
|
.slice(0, 4);
|
|
---
|
|
|
|
<Base>
|
|
<section class="hero">
|
|
<h1 class="hero-title">{settings?.title || "Studio"}</h1>
|
|
<p class="hero-tagline">{settings?.tagline || "Design & Development"}</p>
|
|
</section>
|
|
|
|
{
|
|
featuredProjects.length > 0 ? (
|
|
<section class="featured">
|
|
<header class="section-header">
|
|
<h2 class="section-title">Selected Work</h2>
|
|
<a href="/work" class="section-link">
|
|
View all projects →
|
|
</a>
|
|
</header>
|
|
<div class="projects-grid">
|
|
{featuredProjects.map((project) => (
|
|
<ProjectCard
|
|
title={project.data.title ?? "Untitled"}
|
|
summary={project.data.summary}
|
|
featuredImage={project.data.featured_image ?? ""}
|
|
href={`/work/${project.id}`}
|
|
client={project.data.client}
|
|
year={project.data.year}
|
|
/>
|
|
))}
|
|
</div>
|
|
</section>
|
|
) : (
|
|
<section class="empty-state">
|
|
<h2>No projects yet</h2>
|
|
<p>Add your first project in the admin panel.</p>
|
|
<a href="/_emdash/admin/content/projects/new" class="btn">
|
|
Add a project
|
|
</a>
|
|
</section>
|
|
)
|
|
}
|
|
</Base>
|
|
|
|
<style>
|
|
.hero {
|
|
max-width: var(--wide-width);
|
|
margin: 0 auto;
|
|
padding: var(--spacing-4xl) var(--spacing-lg);
|
|
text-align: center;
|
|
}
|
|
|
|
.hero-title {
|
|
font-size: var(--font-size-4xl);
|
|
font-weight: 500;
|
|
margin-bottom: var(--spacing-md);
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
.hero-tagline {
|
|
font-size: var(--font-size-xl);
|
|
color: var(--color-muted);
|
|
font-family: var(--font-serif);
|
|
font-style: italic;
|
|
}
|
|
|
|
.featured {
|
|
max-width: var(--wide-width);
|
|
margin: 0 auto;
|
|
padding: 0 var(--spacing-lg) var(--spacing-4xl);
|
|
}
|
|
|
|
.section-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: baseline;
|
|
margin-bottom: var(--spacing-2xl);
|
|
padding-bottom: var(--spacing-md);
|
|
border-bottom: 1px solid var(--color-border);
|
|
}
|
|
|
|
.section-title {
|
|
font-size: var(--font-size-lg);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.section-link {
|
|
font-size: var(--font-size-sm);
|
|
color: var(--color-muted);
|
|
text-decoration: none;
|
|
transition: color var(--transition-fast);
|
|
}
|
|
|
|
.section-link:hover {
|
|
color: var(--color-text);
|
|
}
|
|
|
|
.projects-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: var(--spacing-2xl);
|
|
}
|
|
|
|
.empty-state {
|
|
text-align: center;
|
|
padding: var(--spacing-4xl) var(--spacing-lg);
|
|
max-width: 400px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.empty-state h2 {
|
|
font-size: var(--font-size-xl);
|
|
margin-bottom: var(--spacing-sm);
|
|
}
|
|
|
|
.empty-state p {
|
|
color: var(--color-muted);
|
|
margin-bottom: var(--spacing-lg);
|
|
}
|
|
|
|
.btn {
|
|
display: inline-block;
|
|
padding: var(--spacing-sm) var(--spacing-lg);
|
|
background: var(--color-text);
|
|
color: var(--color-bg);
|
|
text-decoration: none;
|
|
border-radius: var(--radius);
|
|
font-size: var(--font-size-sm);
|
|
transition: opacity var(--transition-fast);
|
|
}
|
|
|
|
.btn:hover {
|
|
opacity: 0.85;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.hero {
|
|
padding: var(--spacing-3xl) var(--spacing-lg);
|
|
}
|
|
|
|
.hero-title {
|
|
font-size: var(--font-size-3xl);
|
|
}
|
|
|
|
.projects-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.section-header {
|
|
flex-direction: column;
|
|
gap: var(--spacing-sm);
|
|
align-items: flex-start;
|
|
}
|
|
}
|
|
</style>
|