71 lines
2.7 KiB
TypeScript
71 lines
2.7 KiB
TypeScript
import Link from "next/link";
|
|
import ServiceCard from "@/components/ServiceCard";
|
|
import { defaultContent } from "@/lib/content/defaults";
|
|
import { getContent } from "@/lib/content/service";
|
|
import { createContentMetadata } from "./seo";
|
|
|
|
export const dynamic = "force-dynamic";
|
|
|
|
export async function generateMetadata() {
|
|
const content = await getContent("home");
|
|
return createContentMetadata(content.seo, defaultContent.home.seo);
|
|
}
|
|
|
|
export default async function HomePage() {
|
|
const content = await getContent("home");
|
|
|
|
return (
|
|
<>
|
|
<section
|
|
className="hero"
|
|
style={{ backgroundImage: `linear-gradient(90deg, rgba(6, 24, 52, 0.96), rgba(8, 42, 96, 0.78), rgba(8, 42, 96, 0.58)), url("${content.heroImage || "/workbench-signal.svg"}"), linear-gradient(135deg, #07172d, #0b3778)` }}
|
|
>
|
|
<div className="container hero-content">
|
|
<p className="eyebrow">{content.eyebrow}</p>
|
|
<h1>{content.title}</h1>
|
|
<p className="lead">{content.subtitle}</p>
|
|
<p className="hero-copy">{content.heroText}</p>
|
|
<div className="hero-badges" aria-label="Technische Schwerpunkte">
|
|
{content.badges.map((badge) => <span key={badge}>{badge}</span>)}
|
|
</div>
|
|
<div className="hero-actions">
|
|
<Link className="button" href={content.cta.primary.href}>{content.cta.primary.label}</Link>
|
|
<Link className="button secondary" href={content.cta.secondary.href}>{content.cta.secondary.label}</Link>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="section">
|
|
<div className="container">
|
|
<div className="section-head">
|
|
<p className="eyebrow">Leistungsbereiche</p>
|
|
<h2>{content.cta.text}</h2>
|
|
<p className="lead">{content.intro}</p>
|
|
</div>
|
|
<div className="grid three">
|
|
{content.features.map((feature) => <ServiceCard key={feature.title} title={feature.title}>{feature.text}</ServiceCard>)}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="section dark">
|
|
<div className="container split">
|
|
<div>
|
|
<p className="eyebrow">{content.promise.eyebrow}</p>
|
|
<h2>{content.promise.title}</h2>
|
|
<p className="lead">{content.promise.text}</p>
|
|
<div className="actions">
|
|
<Link className="button" href={content.promise.button.href}>{content.promise.button.label}</Link>
|
|
</div>
|
|
</div>
|
|
<div className="card">
|
|
<h3>{content.promise.title}</h3>
|
|
<ul className="list">
|
|
{content.promise.bullets.map((item) => <li key={item}>{item}</li>)}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</>
|
|
);
|
|
}
|