f8b8f53d54
- Add Next.js frontend service (nextjs) with Dockerfile and source - Update docker-compose.yml: image names, Drupal 11.3.3, nextjs service - Add docker-compose.override.yml.disabled for dev hot-reload - Add install-headless-modules.sh for OAuth/JSON:API module setup - Add README.md with full setup and configuration guide - Update nginx/Dockerfile and nginx.conf.template for cms. subdomain - Update drupal/Dockerfile PHP-FPM build args - Gitignore **/.vscode/ to prevent IDE workspace files from being tracked
63 lines
2.6 KiB
TypeScript
63 lines
2.6 KiB
TypeScript
import Link from "next/link"
|
|
import { FileText, Database, ArrowRight } from "lucide-react"
|
|
|
|
const features = [
|
|
{
|
|
title: "Articles",
|
|
description:
|
|
"Tutorials, guides, and insights on data engineering and software development.",
|
|
href: "/resources/articles",
|
|
icon: FileText,
|
|
color: "emerald",
|
|
},
|
|
{
|
|
title: "Datamodelling",
|
|
description:
|
|
"Structured data models and schemas from real-world projects.",
|
|
href: "/resources/datamodelling",
|
|
icon: Database,
|
|
color: "fuchsia",
|
|
},
|
|
]
|
|
|
|
export function HomeFeatures() {
|
|
return (
|
|
<section className="home-features py-10">
|
|
<div className="home-features-header mb-6 text-center">
|
|
<h2 className="home-features-title mb-3 text-3xl font-bold tracking-tight text-slate-900">
|
|
Resources
|
|
</h2>
|
|
<p className="home-features-description mx-auto max-w-3xl text-slate-600" style={{ fontSize: "var(--fluid-hero-desc)" }}>
|
|
Use one or all. Curated content for data engineers and developers.
|
|
</p>
|
|
</div>
|
|
<div className="home-features-grid grid gap-8 sm:grid-cols-2">
|
|
{features.map((feature, index) => (
|
|
<Link
|
|
key={feature.href}
|
|
href={feature.href}
|
|
className={`home-features-card group block rounded-xl border border-slate-200 bg-white p-8 outline-none transition-all duration-200 ease-out hover:border-emerald-500/40 hover:shadow-lg focus-visible:ring-2 focus-visible:ring-emerald-600 focus-visible:ring-offset-2 animate-fade-in-up ${index === 1 ? "animate-delay-100" : ""}`}
|
|
>
|
|
<div
|
|
className={`home-features-card-icon mb-4 inline-flex rounded-lg p-3 ${
|
|
feature.color === "emerald"
|
|
? "bg-emerald-100 text-emerald-600"
|
|
: "bg-fuchsia-100 text-fuchsia-600"
|
|
}`}
|
|
>
|
|
<feature.icon className="size-6" aria-hidden />
|
|
</div>
|
|
<h3 className="home-features-card-title mb-2 text-xl font-semibold text-slate-900">
|
|
{feature.title}
|
|
</h3>
|
|
<p className="home-features-card-description mb-4 text-slate-600">{feature.description}</p>
|
|
<span className="home-features-card-link inline-flex items-center gap-2 text-sm font-medium text-emerald-600 transition-colors duration-200 ease-out group-hover:text-emerald-500">
|
|
Learn more
|
|
<ArrowRight className="size-4 transition-transform duration-200 ease-out group-hover:translate-x-1" aria-hidden />
|
|
</span>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|