115 lines
3.6 KiB
TypeScript
115 lines
3.6 KiB
TypeScript
import SeoNavbar from '@/components/seo/SeoNavbar'
|
|
import SeoFooter from '@/components/seo/SeoFooter'
|
|
import {
|
|
SeoHero,
|
|
SeoAdvantage,
|
|
SeoMethodology,
|
|
SeoComparison,
|
|
SeoContentSections,
|
|
SeoBestFit,
|
|
SeoFaq,
|
|
SeoRelated,
|
|
} from '@/components/seo/SeoSections'
|
|
import type { SeoPageProfile } from '@/lib/seoPages'
|
|
import { seoTemplateCopy } from '@/lib/seoTemplateCopy'
|
|
import { siteConfig, hasIosStoreUrl } from '@/lib/site'
|
|
|
|
interface SeoCategoryPageProps {
|
|
profile: SeoPageProfile
|
|
}
|
|
|
|
export default function SeoCategoryPage({ profile }: SeoCategoryPageProps) {
|
|
const locale = profile.locale ?? 'en'
|
|
const copy = seoTemplateCopy[locale]
|
|
|
|
const faqSchema = {
|
|
'@context': 'https://schema.org',
|
|
'@type': 'FAQPage',
|
|
mainEntity: profile.faqs.map((item) => ({
|
|
'@type': 'Question',
|
|
name: item.question,
|
|
acceptedAnswer: {
|
|
'@type': 'Answer',
|
|
text: item.answer,
|
|
},
|
|
})),
|
|
}
|
|
|
|
const appSchema = profile.includeAppSchema
|
|
? {
|
|
'@context': 'https://schema.org',
|
|
'@type': 'SoftwareApplication',
|
|
name: siteConfig.name,
|
|
operatingSystem: 'iOS, Android',
|
|
applicationCategory: 'LifestyleApplication',
|
|
description: profile.directAnswer,
|
|
...(hasIosStoreUrl && { downloadUrl: siteConfig.iosAppStoreUrl }),
|
|
offers: {
|
|
'@type': 'Offer',
|
|
price: '0',
|
|
priceCurrency: 'EUR',
|
|
},
|
|
}
|
|
: null
|
|
|
|
const breadcrumbSchema = {
|
|
'@context': 'https://schema.org',
|
|
'@type': 'BreadcrumbList',
|
|
itemListElement: [
|
|
{
|
|
'@type': 'ListItem',
|
|
position: 1,
|
|
name: 'Home',
|
|
item: siteConfig.domain,
|
|
},
|
|
{
|
|
'@type': 'ListItem',
|
|
position: 2,
|
|
name: profile.h1,
|
|
item: `${siteConfig.domain}${profile.canonical}`,
|
|
},
|
|
],
|
|
}
|
|
|
|
return (
|
|
<div className="bg-background text-on-background font-body antialiased">
|
|
<script
|
|
type="application/ld+json"
|
|
dangerouslySetInnerHTML={{ __html: JSON.stringify(faqSchema) }}
|
|
/>
|
|
{appSchema && (
|
|
<script
|
|
type="application/ld+json"
|
|
dangerouslySetInnerHTML={{ __html: JSON.stringify(appSchema) }}
|
|
/>
|
|
)}
|
|
<script
|
|
type="application/ld+json"
|
|
dangerouslySetInnerHTML={{ __html: JSON.stringify(breadcrumbSchema) }}
|
|
/>
|
|
|
|
<SeoNavbar locale={locale} />
|
|
|
|
<main className="pt-[72px] relative overflow-hidden bg-[#fdfbf6]">
|
|
{/* Dekorative Farb-Blobs */}
|
|
<div className="absolute inset-0 pointer-events-none -z-10" aria-hidden="true">
|
|
<div className="absolute top-[-5%] left-[-10%] w-[60vw] h-[60vw] max-w-[800px] max-h-[800px] bg-[#ffd8b1] blur-[120px] rounded-full mix-blend-multiply opacity-60"></div>
|
|
<div className="absolute top-[15%] right-[-5%] w-[50vw] h-[50vw] max-w-[600px] max-h-[600px] bg-[#c2e5cc] blur-[100px] rounded-full mix-blend-multiply opacity-80"></div>
|
|
<div className="absolute top-[40%] left-[15%] w-[40vw] h-[40vw] max-w-[500px] max-h-[500px] bg-[#e5f0cb] blur-[100px] rounded-full mix-blend-multiply opacity-70"></div>
|
|
</div>
|
|
|
|
<SeoHero profile={profile} copy={copy} />
|
|
<SeoAdvantage profile={profile} copy={copy} />
|
|
<SeoMethodology copy={copy} />
|
|
<SeoComparison profile={profile} copy={copy} />
|
|
<SeoContentSections profile={profile} />
|
|
<SeoBestFit profile={profile} copy={copy} />
|
|
<SeoFaq profile={profile} copy={copy} />
|
|
<SeoRelated profile={profile} copy={copy} />
|
|
</main>
|
|
|
|
<SeoFooter locale={locale} />
|
|
</div>
|
|
)
|
|
}
|