Skip to content

Commit c1e0a4e

Browse files
author
Ahmed Elghareeb
committed
feat: make landing cards clickable
1 parent 250828f commit c1e0a4e

2 files changed

Lines changed: 113 additions & 9 deletions

File tree

‎src/components/FeatureCard.astro‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
---
2+
interface Props {
3+
title: string;
4+
href: string;
5+
tagline?: string;
6+
}
7+
8+
const { title, href, tagline } = Astro.props;
9+
---
10+
11+
<a class="feature-card" href={href}>
12+
<div class="feature-card__title">
13+
<span>{title}</span>
14+
{tagline && <small>{tagline}</small>}
15+
</div>
16+
<div class="feature-card__body">
17+
<slot />
18+
</div>
19+
<div class="feature-card__arrow" aria-hidden="true">↗</div>
20+
</a>
21+
22+
<style>
23+
:global(.card-grid) {
24+
gap: clamp(1rem, 2vw, 2rem);
25+
}
26+
27+
.feature-card {
28+
display: flex;
29+
flex-direction: column;
30+
gap: 0.75rem;
31+
padding: clamp(1.5rem, 2vw, 2.25rem);
32+
border-radius: 1.25rem;
33+
border: 1px solid transparent;
34+
text-decoration: none;
35+
color: inherit;
36+
position: relative;
37+
background:
38+
linear-gradient(135deg, rgba(243, 183, 92, 0.18), rgba(62, 126, 171, 0.18)),
39+
var(--sl-color-gray-6);
40+
box-shadow: 0 20px 45px rgba(5, 7, 15, 0.35);
41+
backdrop-filter: blur(12px);
42+
transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
43+
}
44+
45+
:global([data-theme='light']) .feature-card {
46+
background:
47+
linear-gradient(135deg, rgba(243, 183, 92, 0.22), rgba(62, 126, 171, 0.12)),
48+
#ffffff;
49+
box-shadow: 0 15px 30px rgba(15, 23, 42, 0.12);
50+
}
51+
52+
.feature-card:hover,
53+
.feature-card:focus-visible {
54+
transform: translateY(-6px);
55+
border-color: rgba(243, 183, 92, 0.55);
56+
box-shadow: 0 30px 55px rgba(5, 7, 15, 0.45);
57+
}
58+
59+
.feature-card__title {
60+
font-family: var(--sl-font-headings);
61+
font-size: 1.25rem;
62+
font-weight: 600;
63+
display: flex;
64+
flex-direction: column;
65+
gap: 0.4rem;
66+
color: var(--sl-color-gray-1);
67+
}
68+
69+
:global([data-theme='light']) .feature-card__title {
70+
color: var(--sl-color-gray-6);
71+
}
72+
73+
.feature-card__title small {
74+
font-size: 0.9rem;
75+
color: var(--sl-color-gray-3);
76+
text-transform: uppercase;
77+
letter-spacing: 0.08em;
78+
}
79+
80+
.feature-card__body {
81+
color: var(--sl-color-gray-2);
82+
line-height: 1.5;
83+
}
84+
85+
:global([data-theme='light']) .feature-card__body {
86+
color: var(--sl-color-gray-4);
87+
}
88+
89+
.feature-card__arrow {
90+
position: absolute;
91+
bottom: 1.25rem;
92+
right: 1.5rem;
93+
font-size: 1.5rem;
94+
color: var(--sl-color-accent-high);
95+
transition: transform 200ms ease;
96+
}
97+
98+
.feature-card:hover .feature-card__arrow,
99+
.feature-card:focus-visible .feature-card__arrow {
100+
transform: translate(4px, -4px);
101+
}
102+
</style>
103+

‎src/content/docs/index.mdx‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,8 @@ hero:
1616
variant: minimal
1717
---
1818

19-
import { Card, CardGrid } from '@astrojs/starlight/components';
19+
import { CardGrid } from '@astrojs/starlight/components';
20+
import FeatureCard from '../../components/FeatureCard.astro';
2021

2122
> “Archetype (formerly DigiPal) lets us search, annotate, and teach with the same manuscripts that inspired the project’s earliest blogs and conference papers. The reboot keeps that spirit alive with state-of-the-art tooling.”
2223
@@ -29,20 +30,20 @@ import { Card, CardGrid } from '@astrojs/starlight/components';
2930
## Explore the new stack
3031

3132
<CardGrid>
32-
<Card title="Overview" href="/overview/">
33+
<FeatureCard title="Overview" href="/overview/" tagline="Vision">
3334
See how Archetype extends DigiPal’s research story, the problems we’re solving,
3435
and the guiding product principles for the project.
35-
</Card>
36-
<Card title="Architecture" href="/architecture/">
36+
</FeatureCard>
37+
<FeatureCard title="Architecture" href="/architecture/" tagline="Stack">
3738
Dive into the backend, frontend, and infrastructure layers that power the new
3839
system, plus the shared services (Postgres, Elasticsearch, IIIF).
39-
</Card>
40-
<Card title="Roadmap" href="/roadmap/">
40+
</FeatureCard>
41+
<FeatureCard title="Roadmap" href="/roadmap/" tagline="Delivery">
4142
Follow our milestone-driven plan to reach feature parity and unlock new
4243
experiences along the way.
43-
</Card>
44-
<Card title="Community" href="/community/">
44+
</FeatureCard>
45+
<FeatureCard title="Community" href="/community/" tagline="Contribute">
4546
Learn how to contribute code, content, and datasets or embed the platform inside
4647
your own manuscript project.
47-
</Card>
48+
</FeatureCard>
4849
</CardGrid>

0 commit comments

Comments
 (0)