192 lines
8.5 KiB
TypeScript
192 lines
8.5 KiB
TypeScript
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import InfoPageShell from "@/components/InfoPageShell";
|
|
import { getOpinionArticles } from "@/content/courseVisits";
|
|
import {
|
|
createBreadcrumbJsonLd,
|
|
createCollectionPageJsonLd,
|
|
createPageMetadata,
|
|
} from "@/app/seo";
|
|
|
|
const pageTitle = "Meninger";
|
|
const pageDescription =
|
|
"Redaksjonelle artikler, siste nytt og kommentarer fra TeeOff, samlet i én egen seksjon.";
|
|
|
|
export const metadata = createPageMetadata({
|
|
title: pageTitle,
|
|
description: pageDescription,
|
|
path: "/meninger",
|
|
});
|
|
|
|
export const dynamic = "force-dynamic";
|
|
|
|
export default async function OpinionsPage() {
|
|
const articles = await getOpinionArticles();
|
|
const featuredArticle = articles[0];
|
|
|
|
const collectionJsonLd = createCollectionPageJsonLd({
|
|
name: pageTitle,
|
|
description: pageDescription,
|
|
path: "/meninger",
|
|
});
|
|
|
|
const breadcrumbJsonLd = createBreadcrumbJsonLd([
|
|
{ name: "Hjem", path: "/" },
|
|
{ name: "Meninger", path: "/meninger" },
|
|
]);
|
|
|
|
return (
|
|
<>
|
|
<script
|
|
type="application/ld+json"
|
|
dangerouslySetInnerHTML={{ __html: JSON.stringify(collectionJsonLd) }}
|
|
/>
|
|
<script
|
|
type="application/ld+json"
|
|
dangerouslySetInnerHTML={{ __html: JSON.stringify(breadcrumbJsonLd) }}
|
|
/>
|
|
|
|
<InfoPageShell
|
|
eyebrow="Meninger"
|
|
title="Redaksjonelt innhold uten tvangstrøye"
|
|
intro="Meninger samler TeeOffs kommentarer, siste nytt og andre artikler som ikke nødvendigvis er rene banebesøk. Her kan innholdet stå alene, men fortsatt kobles til baneprofiler når det gir mening."
|
|
>
|
|
{featuredArticle ? (
|
|
<section className="grid gap-6 xl:grid-cols-[1.2fr,0.8fr]">
|
|
<article className="surface-card overflow-hidden rounded-[2rem]">
|
|
<div className="relative aspect-[4/5] sm:aspect-[16/10]">
|
|
<Image
|
|
src={featuredArticle.heroImages[0].src}
|
|
alt={featuredArticle.heroImages[0].alt}
|
|
fill
|
|
priority
|
|
sizes="(max-width: 768px) 100vw, 70vw"
|
|
className="object-cover"
|
|
/>
|
|
<div className="absolute inset-0 bg-gradient-to-t from-[#112015]/90 via-[#112015]/42 to-transparent" />
|
|
<div className="absolute inset-x-0 bottom-0 p-5 sm:p-8">
|
|
<p className="text-[11px] font-black uppercase tracking-[0.24em] text-[#8BC34A]">
|
|
{featuredArticle.eyebrow}
|
|
</p>
|
|
<h2 className="mt-4 max-w-3xl text-4xl font-black text-white sm:text-5xl">
|
|
{featuredArticle.title}
|
|
</h2>
|
|
<p className="mt-4 max-w-2xl text-base leading-7 text-white/86">
|
|
{featuredArticle.excerpt}
|
|
</p>
|
|
<div className="mt-6 flex flex-wrap gap-3 text-[11px] font-black uppercase tracking-[0.16em] text-white/72">
|
|
<span>{featuredArticle.locationLabel}</span>
|
|
<span>{featuredArticle.readingTime}</span>
|
|
<span>{featuredArticle.publishedAt}</span>
|
|
</div>
|
|
<div className="mt-6 flex flex-wrap gap-3">
|
|
<Link
|
|
href={`/meninger/${featuredArticle.slug}`}
|
|
className="inline-flex items-center rounded-full bg-[#FF5722] px-5 py-3 text-sm font-black uppercase tracking-[0.16em] text-white transition hover:bg-[#C94F2D]"
|
|
>
|
|
Les artikkelen
|
|
</Link>
|
|
{featuredArticle.facilitySlug ? (
|
|
<Link
|
|
href={`/golfbaner/${featuredArticle.facilitySlug}`}
|
|
className="inline-flex items-center rounded-full border border-white/18 bg-white/10 px-5 py-3 text-sm font-black uppercase tracking-[0.16em] text-white transition hover:bg-white/18"
|
|
>
|
|
Gå til baneprofil
|
|
</Link>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
<aside className="surface-card rounded-[2rem] p-6 sm:p-8">
|
|
<p className="text-[11px] font-black uppercase tracking-[0.24em] text-[#FF5722]">
|
|
Redaksjonell seksjon
|
|
</p>
|
|
<h2 className="mt-4 text-3xl font-black text-[#112015]">Meninger står nå separat</h2>
|
|
<div className="mt-6 grid gap-3">
|
|
{featuredArticle.highlights.map((highlight) => (
|
|
<div
|
|
key={highlight}
|
|
className="rounded-[1.4rem] border border-[#112015]/8 bg-[#F7F9F2] px-4 py-4"
|
|
>
|
|
<p className="text-sm font-bold leading-6 text-[#334238]">{highlight}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<p className="mt-6 text-sm leading-6 text-[#536256]">
|
|
Artikler med kategorier som ikke er Banebesøk kan nå importeres og publiseres
|
|
uten å lekes om til baneartikler først.
|
|
</p>
|
|
</aside>
|
|
</section>
|
|
) : null}
|
|
|
|
<section className="mt-8">
|
|
<div className="flex items-end justify-between gap-4">
|
|
<div>
|
|
<p className="text-[11px] font-black uppercase tracking-[0.24em] text-[#8BC34A]">
|
|
Artikler
|
|
</p>
|
|
<h2 className="mt-3 text-3xl font-black text-[#112015]">Meninger i system</h2>
|
|
</div>
|
|
<p className="text-sm font-bold text-[#5A685C]">{articles.length} publisert</p>
|
|
</div>
|
|
|
|
<div className="mt-6 grid gap-5 lg:grid-cols-2">
|
|
{articles.map((article) => (
|
|
<article key={article.slug} className="surface-card overflow-hidden rounded-[2rem]">
|
|
<div className="grid gap-0 md:grid-cols-[0.95fr,1.05fr]">
|
|
<div className="relative min-h-[16rem]">
|
|
<Image
|
|
src={article.heroImages[0].src}
|
|
alt={article.heroImages[0].alt}
|
|
fill
|
|
sizes="(max-width: 768px) 100vw, 40vw"
|
|
className="object-cover"
|
|
/>
|
|
</div>
|
|
<div className="p-5 sm:p-6">
|
|
<div className="flex flex-wrap gap-3 text-[10px] font-black uppercase tracking-[0.18em] text-[#6A766C]">
|
|
<span>{article.eyebrow}</span>
|
|
<span>{article.locationLabel}</span>
|
|
<span>{article.readingTime}</span>
|
|
</div>
|
|
<h3 className="mt-4 text-3xl font-black text-[#112015]">{article.title}</h3>
|
|
<p className="mt-4 text-sm leading-6 text-[#536256]">{article.excerpt}</p>
|
|
<div className="mt-5 flex flex-wrap gap-2">
|
|
{article.quickFacts.slice(0, 3).map((fact) => (
|
|
<span
|
|
key={`${article.slug}-${fact.label}`}
|
|
className="rounded-full border border-[#112015]/8 bg-[#F7F9F2] px-3 py-2 text-[10px] font-black uppercase tracking-[0.16em] text-[#334238]"
|
|
>
|
|
{fact.label}: {fact.value}
|
|
</span>
|
|
))}
|
|
</div>
|
|
<div className="mt-6 flex flex-wrap gap-3">
|
|
<Link
|
|
href={`/meninger/${article.slug}`}
|
|
className="inline-flex items-center rounded-full bg-[#112015] px-4 py-3 text-[11px] font-black uppercase tracking-[0.16em] text-white transition hover:bg-[#25312A]"
|
|
>
|
|
Åpne artikkel
|
|
</Link>
|
|
{article.facilitySlug ? (
|
|
<Link
|
|
href={`/golfbaner/${article.facilitySlug}`}
|
|
className="inline-flex items-center rounded-full border border-[#112015]/10 bg-white px-4 py-3 text-[11px] font-black uppercase tracking-[0.16em] text-[#112015] transition hover:border-[#8BC34A]"
|
|
>
|
|
Baneprofil
|
|
</Link>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
))}
|
|
</div>
|
|
</section>
|
|
</InfoPageShell>
|
|
</>
|
|
);
|
|
}
|