feat: payload cms
This commit is contained in:
@@ -137,7 +137,7 @@ export default function Header() {
|
||||
];
|
||||
|
||||
const headerClass = cn(
|
||||
'fixed top-0 left-0 right-0 z-50 transition-all duration-500 safe-area-p transform-gpu animate-in fade-in slide-in-from-top-12 fill-mode-both',
|
||||
'fixed top-0 left-0 right-0 z-50 transition-all duration-500 safe-area-p transform-gpu fill-mode-both',
|
||||
{
|
||||
'bg-primary/95 backdrop-blur-md md:bg-transparent py-3 md:py-8 shadow-2xl md:shadow-none':
|
||||
isHomePage && !isScrolled && !isMobileMenuOpen,
|
||||
@@ -153,8 +153,7 @@ export default function Header() {
|
||||
<header className={headerClass} style={{ animationDuration: '800ms' }}>
|
||||
<div className="container mx-auto px-4 md:px-12 lg:px-16 max-w-7xl flex items-center justify-between">
|
||||
<div
|
||||
className="flex-shrink-0 group touch-target animate-in fade-in zoom-in-90 fill-mode-both"
|
||||
style={{ animationDuration: '600ms', animationDelay: '100ms' }}
|
||||
className="flex-shrink-0 group touch-target fill-mode-both"
|
||||
>
|
||||
<Link
|
||||
href={`/${currentLocale}`}
|
||||
@@ -173,6 +172,9 @@ export default function Header() {
|
||||
style={{ width: 'auto' }}
|
||||
className="h-10 md:h-14 w-auto transition-all duration-500 group-hover:scale-110"
|
||||
priority
|
||||
fetchPriority="high"
|
||||
loading="eager"
|
||||
decoding="sync"
|
||||
/>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { defaultJSXConverters, RichText } from '@payloadcms/richtext-lexical/react';
|
||||
import type { JSXConverters } from '@payloadcms/richtext-lexical/react';
|
||||
import Image from 'next/image';
|
||||
import { Suspense } from 'react';
|
||||
|
||||
// Import all custom React components that were previously mapped via MDX
|
||||
import StickyNarrative from '@/components/blog/StickyNarrative';
|
||||
@@ -16,6 +17,24 @@ import Stats from '@/components/blog/Stats';
|
||||
import SplitHeading from '@/components/blog/SplitHeading';
|
||||
import ProductTabs from '@/components/ProductTabs';
|
||||
import ProductTechnicalData from '@/components/ProductTechnicalData';
|
||||
import ContactForm from '@/components/ContactForm';
|
||||
import ContactMap from '@/components/ContactMap';
|
||||
import Gallery from '@/components/team/Gallery';
|
||||
import Reveal from '@/components/Reveal';
|
||||
import { Badge, Container, Heading, Section, Card } from '@/components/ui';
|
||||
import TrackedLink from '@/components/analytics/TrackedLink';
|
||||
import { useLocale } from 'next-intl';
|
||||
|
||||
import HomeHero from '@/components/home/Hero';
|
||||
import ProductCategories from '@/components/home/ProductCategories';
|
||||
import WhatWeDo from '@/components/home/WhatWeDo';
|
||||
import RecentPosts from '@/components/home/RecentPosts';
|
||||
import Experience from '@/components/home/Experience';
|
||||
import WhyChooseUs from '@/components/home/WhyChooseUs';
|
||||
import MeetTheTeam from '@/components/home/MeetTheTeam';
|
||||
import GallerySection from '@/components/home/GallerySection';
|
||||
import VideoSection from '@/components/home/VideoSection';
|
||||
import CTA from '@/components/home/CTA';
|
||||
|
||||
const jsxConverters: JSXConverters = {
|
||||
...defaultJSXConverters,
|
||||
@@ -255,6 +274,372 @@ const jsxConverters: JSXConverters = {
|
||||
{node.fields.content && <RichText data={node.fields.content} converters={jsxConverters} />}
|
||||
</ProductTabs>
|
||||
),
|
||||
// ─── New Page Blocks ───────────────────────────────────────────
|
||||
heroSection: ({ node }: any) => {
|
||||
const f = node.fields;
|
||||
const bgSrc = f.backgroundImage?.sizes?.card?.url || f.backgroundImage?.url;
|
||||
return (
|
||||
<Reveal>
|
||||
<section className={`relative min-h-[50vh] md:min-h-[70vh] flex items-center pt-32 pb-20 md:pt-40 md:pb-32 overflow-hidden bg-primary-dark ${f.alignment === 'center' ? 'justify-center text-center' : ''}`}>
|
||||
{bgSrc && (
|
||||
<>
|
||||
<div className="absolute inset-0 z-0">
|
||||
<Image
|
||||
src={bgSrc}
|
||||
alt={f.title}
|
||||
fill
|
||||
className="object-cover opacity-30 md:opacity-40"
|
||||
style={{ objectPosition: `${f.backgroundImage?.focalX ?? 50}% ${f.backgroundImage?.focalY ?? 50}%` }}
|
||||
sizes="100vw"
|
||||
priority
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-primary-dark/80 via-primary-dark/40 to-primary-dark/80" />
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
<Container className={`relative z-10 ${f.alignment === 'center' ? 'max-w-5xl' : ''}`}>
|
||||
<div className={`max-w-4xl ${f.alignment === 'center' ? 'mx-auto' : ''}`}>
|
||||
{f.badge && <Badge variant="saturated" className="mb-4 md:mb-8 shadow-lg">{f.badge}</Badge>}
|
||||
<Heading level={1} className="text-white mb-4 md:mb-8">{f.title}</Heading>
|
||||
{f.subtitle && <p className="text-lg md:text-2xl text-white/70 font-medium leading-relaxed max-w-2xl">{f.subtitle}</p>}
|
||||
{f.ctaLabel && f.ctaHref && (
|
||||
<div className="mt-8">
|
||||
<a href={f.ctaHref} className="inline-flex items-center px-8 py-4 bg-accent text-primary-dark font-bold rounded-full hover:bg-white transition-all duration-300 group">
|
||||
{f.ctaLabel}
|
||||
<span className="ml-3 transition-transform group-hover:translate-x-2">→</span>
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
</Reveal>
|
||||
);
|
||||
},
|
||||
'block-heroSection': ({ node }: any) => {
|
||||
const f = node.fields;
|
||||
const bgSrc = f.backgroundImage?.sizes?.card?.url || f.backgroundImage?.url;
|
||||
return (
|
||||
<Reveal>
|
||||
<section className={`relative min-h-[50vh] md:min-h-[70vh] flex items-center pt-32 pb-20 md:pt-40 md:pb-32 overflow-hidden bg-primary-dark ${f.alignment === 'center' ? 'justify-center text-center' : ''}`}>
|
||||
{bgSrc && (
|
||||
<>
|
||||
<div className="absolute inset-0 z-0">
|
||||
<Image src={bgSrc} alt={f.title} fill className="object-cover opacity-30 md:opacity-40" style={{ objectPosition: `${f.backgroundImage?.focalX ?? 50}% ${f.backgroundImage?.focalY ?? 50}%` }} sizes="100vw" priority />
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-primary-dark/80 via-primary-dark/40 to-primary-dark/80" />
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
<Container className={`relative z-10 ${f.alignment === 'center' ? 'max-w-5xl' : ''}`}>
|
||||
<div className={`max-w-4xl ${f.alignment === 'center' ? 'mx-auto' : ''}`}>
|
||||
{f.badge && <Badge variant="saturated" className="mb-4 md:mb-8 shadow-lg">{f.badge}</Badge>}
|
||||
<Heading level={1} className="text-white mb-4 md:mb-8">{f.title}</Heading>
|
||||
{f.subtitle && <p className="text-lg md:text-2xl text-white/70 font-medium leading-relaxed max-w-2xl">{f.subtitle}</p>}
|
||||
{f.ctaLabel && f.ctaHref && (
|
||||
<div className="mt-8">
|
||||
<a href={f.ctaHref} className="inline-flex items-center px-8 py-4 bg-accent text-primary-dark font-bold rounded-full hover:bg-white transition-all duration-300 group">{f.ctaLabel}<span className="ml-3 transition-transform group-hover:translate-x-2">→</span></a>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Container>
|
||||
</section>
|
||||
</Reveal>
|
||||
);
|
||||
},
|
||||
teamProfile: ({ node }: any) => {
|
||||
const f = node.fields;
|
||||
const imgSrc = f.image?.sizes?.card?.url || f.image?.url;
|
||||
const isDark = f.colorScheme === 'dark';
|
||||
const isImageRight = f.layout === 'imageRight';
|
||||
return (
|
||||
<article className="relative bg-white overflow-hidden">
|
||||
<div className="flex flex-col lg:flex-row">
|
||||
<Reveal className={`w-full lg:w-1/2 p-6 md:p-24 lg:p-32 flex flex-col justify-center relative ${isImageRight ? 'order-2 lg:order-1' : 'order-2'} ${isDark ? 'bg-primary-dark text-white' : 'bg-neutral-light text-saturated'}`}>
|
||||
<div className="relative z-10">
|
||||
<Badge variant={isDark ? 'accent' : 'saturated'} className="mb-4 md:mb-8">{f.role}</Badge>
|
||||
<Heading level={2} className={`${isDark ? 'text-white' : 'text-saturated'} mb-6 md:mb-10 text-3xl md:text-5xl`}>{f.name}</Heading>
|
||||
{f.quote && (
|
||||
<div className="relative mb-6 md:mb-12">
|
||||
<div className={`absolute -left-4 md:-left-8 top-0 bottom-0 w-1 md:w-1.5 ${isDark ? 'bg-accent' : 'bg-saturated'} rounded-full`} />
|
||||
<p className={`text-lg md:text-2xl font-bold italic leading-relaxed pl-5 md:pl-8 ${isDark ? 'text-white/90' : 'text-text-secondary'}`}>{f.quote}</p>
|
||||
</div>
|
||||
)}
|
||||
{f.description && <p className={`text-base md:text-xl leading-relaxed mb-6 md:mb-12 max-w-xl ${isDark ? 'text-white/70' : 'text-text-secondary'}`}>{f.description}</p>}
|
||||
{f.linkedinUrl && (
|
||||
<TrackedLink
|
||||
href={f.linkedinUrl}
|
||||
className={`inline-flex items-center px-8 py-4 font-bold rounded-full transition-all duration-300 group ${isDark ? 'bg-accent text-primary-dark hover:bg-white' : 'bg-saturated text-white hover:bg-primary'}`}
|
||||
eventProperties={{ type: 'social_linkedin', person: f.name, location: 'team_page' }}
|
||||
>
|
||||
{f.linkedinLabel || 'LinkedIn'}
|
||||
<span className="ml-3 transition-transform group-hover:translate-x-2">→</span>
|
||||
</TrackedLink>
|
||||
)}
|
||||
</div>
|
||||
</Reveal>
|
||||
<Reveal className={`w-full lg:w-1/2 relative min-h-[400px] md:min-h-[600px] lg:min-h-screen overflow-hidden ${isImageRight ? 'order-1 lg:order-2' : 'order-1'}`}>
|
||||
{imgSrc && (
|
||||
<>
|
||||
<Image
|
||||
src={imgSrc}
|
||||
alt={f.name}
|
||||
fill
|
||||
className="object-cover scale-105 hover:scale-100 transition-transform duration-1000"
|
||||
style={{ objectPosition: `${f.image?.focalX ?? 50}% ${f.image?.focalY ?? 50}%` }}
|
||||
sizes="(max-width: 1024px) 100vw, 50vw"
|
||||
/>
|
||||
<div className={`absolute inset-0 ${isDark ? 'bg-gradient-to-t from-primary-dark/60 lg:bg-gradient-to-r lg:from-primary-dark/20 to-transparent' : 'bg-gradient-to-t from-white/60 lg:bg-gradient-to-l lg:from-primary-dark/20 to-transparent'}`} />
|
||||
</>
|
||||
)}
|
||||
</Reveal>
|
||||
</div>
|
||||
</article>
|
||||
);
|
||||
},
|
||||
'block-teamProfile': ({ node }: any) => {
|
||||
const f = node.fields;
|
||||
const imgSrc = f.image?.sizes?.card?.url || f.image?.url;
|
||||
const isDark = f.colorScheme === 'dark';
|
||||
const isImageRight = f.layout === 'imageRight';
|
||||
return (
|
||||
<article className="relative bg-white overflow-hidden">
|
||||
<div className="flex flex-col lg:flex-row">
|
||||
<Reveal className={`w-full lg:w-1/2 p-6 md:p-24 lg:p-32 flex flex-col justify-center relative ${isImageRight ? 'order-2 lg:order-1' : 'order-2'} ${isDark ? 'bg-primary-dark text-white' : 'bg-neutral-light text-saturated'}`}>
|
||||
<div className="relative z-10">
|
||||
<Badge variant={isDark ? 'accent' : 'saturated'} className="mb-4 md:mb-8">{f.role}</Badge>
|
||||
<Heading level={2} className={`${isDark ? 'text-white' : 'text-saturated'} mb-6 md:mb-10 text-3xl md:text-5xl`}>{f.name}</Heading>
|
||||
{f.quote && (
|
||||
<div className="relative mb-6 md:mb-12">
|
||||
<div className={`absolute -left-4 md:-left-8 top-0 bottom-0 w-1 md:w-1.5 ${isDark ? 'bg-accent' : 'bg-saturated'} rounded-full`} />
|
||||
<p className={`text-lg md:text-2xl font-bold italic leading-relaxed pl-5 md:pl-8 ${isDark ? 'text-white/90' : 'text-text-secondary'}`}>{f.quote}</p>
|
||||
</div>
|
||||
)}
|
||||
{f.description && <p className={`text-base md:text-xl leading-relaxed mb-6 md:mb-12 max-w-xl ${isDark ? 'text-white/70' : 'text-text-secondary'}`}>{f.description}</p>}
|
||||
{f.linkedinUrl && (
|
||||
<TrackedLink href={f.linkedinUrl} className={`inline-flex items-center px-8 py-4 font-bold rounded-full transition-all duration-300 group ${isDark ? 'bg-accent text-primary-dark hover:bg-white' : 'bg-saturated text-white hover:bg-primary'}`} eventProperties={{ type: 'social_linkedin', person: f.name, location: 'team_page' }}>
|
||||
{f.linkedinLabel || 'LinkedIn'}<span className="ml-3 transition-transform group-hover:translate-x-2">→</span>
|
||||
</TrackedLink>
|
||||
)}
|
||||
</div>
|
||||
</Reveal>
|
||||
<Reveal className={`w-full lg:w-1/2 relative min-h-[400px] md:min-h-[600px] lg:min-h-screen overflow-hidden ${isImageRight ? 'order-1 lg:order-2' : 'order-1'}`}>
|
||||
{imgSrc && (<><Image src={imgSrc} alt={f.name} fill className="object-cover scale-105 hover:scale-100 transition-transform duration-1000" style={{ objectPosition: `${f.image?.focalX ?? 50}% ${f.image?.focalY ?? 50}%` }} sizes="(max-width: 1024px) 100vw, 50vw" /><div className={`absolute inset-0 ${isDark ? 'bg-gradient-to-t from-primary-dark/60 lg:bg-gradient-to-r lg:from-primary-dark/20 to-transparent' : 'bg-gradient-to-t from-white/60 lg:bg-gradient-to-l lg:from-primary-dark/20 to-transparent'}`} /></>)}
|
||||
</Reveal>
|
||||
</div>
|
||||
</article>
|
||||
);
|
||||
},
|
||||
contactSection: ({ node }: any) => {
|
||||
const f = node.fields;
|
||||
return (
|
||||
<Section className="bg-neutral-light py-12 md:py-28">
|
||||
<Container>
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-8 md:gap-16">
|
||||
{f.showForm && (
|
||||
<div className="lg:col-span-7">
|
||||
<Suspense fallback={<div className="animate-pulse bg-neutral-medium h-96 rounded-2xl md:rounded-3xl" />}>
|
||||
<ContactForm />
|
||||
</Suspense>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Container>
|
||||
{f.showMap && (
|
||||
<section className="mt-12 h-[300px] md:h-[500px] bg-neutral-medium relative overflow-hidden grayscale hover:grayscale-0 transition-all duration-1000">
|
||||
<Suspense fallback={<div className="h-full w-full bg-neutral-medium animate-pulse" />}>
|
||||
<ContactMap address="Raiffeisenstraße 22\n73630 Remshalden" lat={48.8144} lng={9.4144} />
|
||||
</Suspense>
|
||||
</section>
|
||||
)}
|
||||
</Section>
|
||||
);
|
||||
},
|
||||
'block-contactSection': ({ node }: any) => {
|
||||
const f = node.fields;
|
||||
return (
|
||||
<Section className="bg-neutral-light py-12 md:py-28">
|
||||
<Container>
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-8 md:gap-16">
|
||||
{f.showForm && (
|
||||
<div className="lg:col-span-7">
|
||||
<Suspense fallback={<div className="animate-pulse bg-neutral-medium h-96 rounded-2xl md:rounded-3xl" />}>
|
||||
<ContactForm />
|
||||
</Suspense>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Container>
|
||||
{f.showMap && (
|
||||
<section className="mt-12 h-[300px] md:h-[500px] bg-neutral-medium relative overflow-hidden grayscale hover:grayscale-0 transition-all duration-1000">
|
||||
<Suspense fallback={<div className="h-full w-full bg-neutral-medium animate-pulse" />}>
|
||||
<ContactMap address="Raiffeisenstraße 22\n73630 Remshalden" lat={48.8144} lng={9.4144} />
|
||||
</Suspense>
|
||||
</section>
|
||||
)}
|
||||
</Section>
|
||||
);
|
||||
},
|
||||
imageGallery: ({ node }: any) => <Gallery />,
|
||||
'block-imageGallery': ({ node }: any) => <Gallery />,
|
||||
categoryGrid: ({ node }: any) => {
|
||||
const cats = node.fields.categories || [];
|
||||
return (
|
||||
<Section className="bg-neutral-light relative">
|
||||
<Container>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-8 lg:gap-12">
|
||||
{cats.map((cat: any, idx: number) => {
|
||||
const imgSrc = cat.image?.sizes?.card?.url || cat.image?.url;
|
||||
const iconSrc = cat.icon?.url;
|
||||
return (
|
||||
<Reveal key={idx} delay={idx * 100}>
|
||||
<a href={cat.href} className="group block">
|
||||
<Card className="h-full border-none shadow-sm hover:shadow-2xl transition-all duration-500 rounded-[24px] md:rounded-[48px] overflow-hidden bg-white active:scale-[0.98]">
|
||||
<div className="relative h-[200px] md:h-[400px] overflow-hidden">
|
||||
{imgSrc && (
|
||||
<Image src={imgSrc} alt={cat.title} fill className="object-cover transition-transform duration-1000 group-hover:scale-105" style={{ objectPosition: `${cat.image?.focalX ?? 50}% ${cat.image?.focalY ?? 50}%` }} sizes="(max-width: 768px) 100vw, 50vw" />
|
||||
)}
|
||||
<div className="absolute inset-0 image-overlay-gradient opacity-80 group-hover:opacity-90 transition-opacity duration-500" />
|
||||
{iconSrc && (
|
||||
<div className="absolute top-3 right-3 md:top-8 md:right-8 w-10 h-10 md:w-20 md:h-20 bg-white/10 backdrop-blur-md rounded-xl md:rounded-[24px] flex items-center justify-center border border-white/20 shadow-2xl transition-all duration-500 group-hover:scale-110 group-hover:bg-white/20">
|
||||
<Image src={iconSrc} alt="" width={24} height={24} className="w-6 h-6 md:w-12 md:h-12 brightness-0 invert opacity-80" />
|
||||
</div>
|
||||
)}
|
||||
<div className="absolute bottom-4 left-4 md:bottom-10 md:left-10 right-4 md:right-10">
|
||||
<h2 className="text-xl md:text-4xl font-bold text-white leading-tight">{cat.title}</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-5 md:p-10">
|
||||
{cat.description && <p className="text-text-secondary text-sm md:text-lg leading-relaxed mb-4 md:mb-8 line-clamp-2 md:line-clamp-none">{cat.description}</p>}
|
||||
<div className="flex items-center text-saturated font-bold text-base md:text-lg group-hover:text-accent-dark transition-colors">
|
||||
<span className="border-b-2 border-saturated/10 group-hover:border-accent-dark transition-colors pb-1">{cat.ctaLabel || 'View Products'}</span>
|
||||
<div className="ml-3 md:ml-4 w-8 h-8 md:w-10 md:h-10 rounded-full bg-primary-light flex items-center justify-center text-saturated group-hover:bg-accent group-hover:text-primary-dark transition-all duration-300 shadow-sm">
|
||||
<svg className="w-4 h-4 md:w-5 md:h-5 transition-transform group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" /></svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</a>
|
||||
</Reveal>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
);
|
||||
},
|
||||
'block-categoryGrid': ({ node }: any) => {
|
||||
const cats = node.fields.categories || [];
|
||||
return (
|
||||
<Section className="bg-neutral-light relative">
|
||||
<Container>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-8 lg:gap-12">
|
||||
{cats.map((cat: any, idx: number) => {
|
||||
const imgSrc = cat.image?.sizes?.card?.url || cat.image?.url;
|
||||
const iconSrc = cat.icon?.url;
|
||||
return (
|
||||
<Reveal key={idx} delay={idx * 100}>
|
||||
<a href={cat.href} className="group block">
|
||||
<Card className="h-full border-none shadow-sm hover:shadow-2xl transition-all duration-500 rounded-[24px] md:rounded-[48px] overflow-hidden bg-white active:scale-[0.98]">
|
||||
<div className="relative h-[200px] md:h-[400px] overflow-hidden">
|
||||
{imgSrc && (<Image src={imgSrc} alt={cat.title} fill className="object-cover transition-transform duration-1000 group-hover:scale-105" style={{ objectPosition: `${cat.image?.focalX ?? 50}% ${cat.image?.focalY ?? 50}%` }} sizes="(max-width: 768px) 100vw, 50vw" />)}
|
||||
<div className="absolute inset-0 image-overlay-gradient opacity-80 group-hover:opacity-90 transition-opacity duration-500" />
|
||||
{iconSrc && (<div className="absolute top-3 right-3 md:top-8 md:right-8 w-10 h-10 md:w-20 md:h-20 bg-white/10 backdrop-blur-md rounded-xl md:rounded-[24px] flex items-center justify-center border border-white/20"><Image src={iconSrc} alt="" width={24} height={24} className="w-6 h-6 md:w-12 md:h-12 brightness-0 invert opacity-80" /></div>)}
|
||||
<div className="absolute bottom-4 left-4 md:bottom-10 md:left-10 right-4 md:right-10"><h2 className="text-xl md:text-4xl font-bold text-white leading-tight">{cat.title}</h2></div>
|
||||
</div>
|
||||
<div className="p-5 md:p-10">
|
||||
{cat.description && <p className="text-text-secondary text-sm md:text-lg leading-relaxed mb-4 md:mb-8">{cat.description}</p>}
|
||||
<div className="flex items-center text-saturated font-bold text-base md:text-lg group-hover:text-accent-dark transition-colors"><span>{cat.ctaLabel || 'View Products'}</span></div>
|
||||
</div>
|
||||
</Card>
|
||||
</a>
|
||||
</Reveal>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
);
|
||||
},
|
||||
manifestoGrid: ({ node }: any) => {
|
||||
const f = node.fields;
|
||||
return (
|
||||
<Section className="bg-white text-primary py-16 md:py-28">
|
||||
<Container>
|
||||
<div className="sticky-narrative-container">
|
||||
<div className="sticky-narrative-sidebar mb-8 lg:mb-0">
|
||||
<div className="lg:sticky lg:top-32">
|
||||
{f.title && <Heading level={2} subtitle={f.subtitle}>{f.title}</Heading>}
|
||||
{f.tagline && <p className="text-base md:text-xl text-text-secondary leading-relaxed">{f.tagline}</p>}
|
||||
</div>
|
||||
</div>
|
||||
<ul className="sticky-narrative-content grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-10 list-none p-0 m-0">
|
||||
{(f.items || []).map((item: any, idx: number) => (
|
||||
<li key={idx} className="p-6 md:p-10 bg-neutral-light rounded-2xl md:rounded-[40px] border border-transparent hover:border-accent hover:bg-white hover:shadow-2xl transition-all duration-500 group active:scale-[0.98]">
|
||||
<div className="w-10 h-10 md:w-16 md:h-16 bg-white rounded-xl md:rounded-2xl flex items-center justify-center mb-4 md:mb-8 shadow-sm group-hover:bg-accent transition-colors duration-500">
|
||||
<span className="text-primary font-extrabold text-lg md:text-2xl group-hover:text-primary-dark">0{idx + 1}</span>
|
||||
</div>
|
||||
<h3 className="text-lg md:text-2xl font-bold mb-2 md:mb-4 text-primary">{item.title}</h3>
|
||||
<p className="text-sm md:text-lg text-text-secondary leading-relaxed">{item.description}</p>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
);
|
||||
},
|
||||
'block-manifestoGrid': ({ node }: any) => {
|
||||
const f = node.fields;
|
||||
return (
|
||||
<Section className="bg-white text-primary py-16 md:py-28">
|
||||
<Container>
|
||||
<div className="sticky-narrative-container">
|
||||
<div className="sticky-narrative-sidebar mb-8 lg:mb-0">
|
||||
<div className="lg:sticky lg:top-32">
|
||||
{f.title && <Heading level={2} subtitle={f.subtitle}>{f.title}</Heading>}
|
||||
{f.tagline && <p className="text-base md:text-xl text-text-secondary leading-relaxed">{f.tagline}</p>}
|
||||
</div>
|
||||
</div>
|
||||
<ul className="sticky-narrative-content grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-10 list-none p-0 m-0">
|
||||
{(f.items || []).map((item: any, idx: number) => (
|
||||
<li key={idx} className="p-6 md:p-10 bg-neutral-light rounded-2xl md:rounded-[40px] border border-transparent hover:border-accent hover:bg-white hover:shadow-2xl transition-all duration-500 group active:scale-[0.98]">
|
||||
<div className="w-10 h-10 md:w-16 md:h-16 bg-white rounded-xl md:rounded-2xl flex items-center justify-center mb-4 md:mb-8 shadow-sm group-hover:bg-accent transition-colors duration-500">
|
||||
<span className="text-primary font-extrabold text-lg md:text-2xl group-hover:text-primary-dark">0{idx + 1}</span>
|
||||
</div>
|
||||
<h3 className="text-lg md:text-2xl font-bold mb-2 md:mb-4 text-primary">{item.title}</h3>
|
||||
<p className="text-sm md:text-lg text-text-secondary leading-relaxed">{item.description}</p>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</Container>
|
||||
</Section>
|
||||
);
|
||||
},
|
||||
homeHero: ({ node }: any) => {
|
||||
console.log('[PayloadRichText] Rendering homeHero block');
|
||||
return <HomeHero data={node?.fields} />;
|
||||
},
|
||||
'block-homeHero': ({ node }: any) => {
|
||||
console.log('[PayloadRichText] Rendering block-homeHero block');
|
||||
return <HomeHero data={node?.fields} />;
|
||||
},
|
||||
homeProductCategories: ({ node }: any) => <Reveal><ProductCategories data={node?.fields} /></Reveal>,
|
||||
'block-homeProductCategories': ({ node }: any) => <Reveal><ProductCategories data={node?.fields} /></Reveal>,
|
||||
homeWhatWeDo: ({ node }: any) => <Reveal><WhatWeDo data={node?.fields} /></Reveal>,
|
||||
'block-homeWhatWeDo': ({ node }: any) => <Reveal><WhatWeDo data={node?.fields} /></Reveal>,
|
||||
homeExperience: ({ node }: any) => <Reveal><Experience data={node?.fields} /></Reveal>,
|
||||
'block-homeExperience': ({ node }: any) => <Reveal><Experience data={node?.fields} /></Reveal>,
|
||||
homeWhyChooseUs: ({ node }: any) => <Reveal><WhyChooseUs data={node?.fields} /></Reveal>,
|
||||
'block-homeWhyChooseUs': ({ node }: any) => <Reveal><WhyChooseUs data={node?.fields} /></Reveal>,
|
||||
homeMeetTheTeam: ({ node }: any) => <Reveal><MeetTheTeam data={node?.fields} /></Reveal>,
|
||||
'block-homeMeetTheTeam': ({ node }: any) => <Reveal><MeetTheTeam data={node?.fields} /></Reveal>,
|
||||
homeGallery: ({ node }: any) => <Reveal><GallerySection data={node?.fields} /></Reveal>,
|
||||
'block-homeGallery': ({ node }: any) => <Reveal><GallerySection data={node?.fields} /></Reveal>,
|
||||
homeVideo: ({ node }: any) => <Reveal><VideoSection data={node?.fields} /></Reveal>,
|
||||
'block-homeVideo': ({ node }: any) => <Reveal><VideoSection data={node?.fields} /></Reveal>,
|
||||
homeCTA: ({ node }: any) => <Reveal className="content-visibility-auto"><CTA data={node?.fields} /></Reveal>,
|
||||
'block-homeCTA': ({ node }: any) => <Reveal className="content-visibility-auto"><CTA data={node?.fields} /></Reveal>,
|
||||
},
|
||||
// Custom converter for the Payload "upload" Lexical node (Media collection)
|
||||
// This natively reconstructs Next.js <Image /> tags pointing to the focal-point cropped sizes
|
||||
@@ -297,12 +682,29 @@ const jsxConverters: JSXConverters = {
|
||||
},
|
||||
};
|
||||
|
||||
export default function PayloadRichText({ data }: { data: any }) {
|
||||
export default function PayloadRichText({
|
||||
data,
|
||||
className = 'article-content max-w-none',
|
||||
}: {
|
||||
data: any;
|
||||
className?: string;
|
||||
}) {
|
||||
const locale = useLocale();
|
||||
|
||||
if (!data) return null;
|
||||
|
||||
const dynamicConverters: JSXConverters = {
|
||||
...jsxConverters,
|
||||
blocks: {
|
||||
...jsxConverters.blocks,
|
||||
homeRecentPosts: () => <Reveal><RecentPosts locale={locale} /></Reveal>,
|
||||
'block-homeRecentPosts': () => <Reveal><RecentPosts locale={locale} /></Reveal>,
|
||||
},
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="article-content max-w-none">
|
||||
<RichText data={data} converters={jsxConverters} />
|
||||
<div className={className}>
|
||||
<RichText data={data} converters={dynamicConverters} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { getAllProducts } from '@/lib/mdx';
|
||||
import { getAllProducts } from '@/lib/products';
|
||||
import { getTranslations } from 'next-intl/server';
|
||||
import Image from 'next/image';
|
||||
import { RelatedProductLink } from './RelatedProductLink';
|
||||
|
||||
@@ -30,8 +30,11 @@ export default function PostNavigation({
|
||||
{/* Background Image */}
|
||||
{prev.frontmatter.featuredImage ? (
|
||||
<div
|
||||
className="absolute inset-0 bg-cover bg-center transition-transform duration-700 group-hover:scale-110"
|
||||
style={{ backgroundImage: `url(${prev.frontmatter.featuredImage.split('?')[0]})` }}
|
||||
className="absolute inset-0 z-0 bg-cover transition-transform duration-1000 group-hover:scale-105"
|
||||
style={{
|
||||
backgroundImage: `url(${prev.frontmatter.featuredImage.split('?')[0]})`,
|
||||
backgroundPosition: `${prev.frontmatter.focalX ?? 50}% ${prev.frontmatter.focalY ?? 50}%`,
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<div className="absolute inset-0 bg-neutral-100" />
|
||||
@@ -81,8 +84,11 @@ export default function PostNavigation({
|
||||
{/* Background Image */}
|
||||
{next.frontmatter.featuredImage ? (
|
||||
<div
|
||||
className="absolute inset-0 bg-cover bg-center transition-transform duration-700 group-hover:scale-110"
|
||||
style={{ backgroundImage: `url(${next.frontmatter.featuredImage.split('?')[0]})` }}
|
||||
className="absolute inset-0 z-0 bg-cover transition-transform duration-1000 group-hover:scale-105"
|
||||
style={{
|
||||
backgroundImage: `url(${next.frontmatter.featuredImage.split('?')[0]})`,
|
||||
backgroundPosition: `${next.frontmatter.focalX ?? 50}% ${next.frontmatter.focalY ?? 50}%`,
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<div className="absolute inset-0 bg-neutral-100" />
|
||||
|
||||
@@ -2,7 +2,7 @@ import React from 'react';
|
||||
import { useTranslations, useLocale } from 'next-intl';
|
||||
import { Section, Container, Button, Heading } from '../../components/ui';
|
||||
|
||||
export default function CTA() {
|
||||
export default function CTA({ data }: { data?: any }) {
|
||||
const t = useTranslations('Home.cta');
|
||||
const locale = useLocale();
|
||||
|
||||
@@ -10,20 +10,20 @@ export default function CTA() {
|
||||
<Section className="bg-primary text-white py-32 relative overflow-hidden">
|
||||
<div className="absolute top-0 right-0 w-1/3 h-full bg-accent/5 -skew-x-12 translate-x-1/2" />
|
||||
<div className="absolute bottom-0 left-0 w-1/4 h-1/2 bg-primary/10 rounded-full blur-3xl -translate-x-1/2 translate-y-1/2" />
|
||||
|
||||
|
||||
<Container className="relative z-10">
|
||||
<div className="flex flex-col lg:flex-row items-center justify-between gap-16">
|
||||
<div className="max-w-3xl text-center lg:text-left">
|
||||
<Heading level={2} subtitle={t('subtitle')} className="text-white mb-6">
|
||||
<span className="text-white">{t('title')}</span>
|
||||
<Heading level={2} subtitle={data?.subtitle || t('subtitle')} className="text-white mb-6">
|
||||
<span className="text-white">{data?.title || t('title')}</span>
|
||||
</Heading>
|
||||
<p className="text-lg md:text-xl text-white/70 leading-relaxed">
|
||||
{t('description')}
|
||||
{data?.description || t('description')}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex-shrink-0">
|
||||
<Button href={`/${locale}/contact`} variant="accent" size="xl" className="group px-12">
|
||||
{t('button')}
|
||||
{data?.buttonLabel || t('button')}
|
||||
<span className="ml-3 transition-transform group-hover:translate-x-2">→</span>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
@@ -3,7 +3,7 @@ import Image from 'next/image';
|
||||
import { useTranslations } from 'next-intl';
|
||||
import { Section, Container, Heading } from '../../components/ui';
|
||||
|
||||
export default function Experience() {
|
||||
export default function Experience({ data }: { data?: any }) {
|
||||
const t = useTranslations('Home.experience');
|
||||
|
||||
return (
|
||||
@@ -11,7 +11,7 @@ export default function Experience() {
|
||||
<div className="absolute inset-0 z-0">
|
||||
<Image
|
||||
src="/uploads/2024/12/1694273920124-copy-2.webp"
|
||||
alt={t('subtitle')}
|
||||
alt={data?.subtitle || t('subtitle')}
|
||||
fill
|
||||
className="object-cover object-center scale-105 animate-slow-zoom"
|
||||
sizes="100vw"
|
||||
@@ -22,31 +22,31 @@ export default function Experience() {
|
||||
|
||||
<Container className="relative z-10">
|
||||
<div className="max-w-3xl">
|
||||
<Heading level={2} subtitle={t('subtitle')} className="text-white">
|
||||
<span className="text-white">{t('title')}</span>
|
||||
<Heading level={2} subtitle={data?.subtitle || t('subtitle')} className="text-white">
|
||||
<span className="text-white">{data?.title || t('title')}</span>
|
||||
</Heading>
|
||||
<div className="space-y-8 text-lg md:text-xl text-white/90 leading-relaxed font-medium">
|
||||
<p className="border-l-4 border-accent pl-8 py-2 bg-white/5 backdrop-blur-sm rounded-r-xl">
|
||||
{t('p1')}
|
||||
{data?.paragraph1 || t('p1')}
|
||||
</p>
|
||||
<p className="pl-9">{t('p2')}</p>
|
||||
<p className="pl-9">{data?.paragraph2 || t('p2')}</p>
|
||||
</div>
|
||||
|
||||
<dl className="mt-16 grid grid-cols-1 md:grid-cols-2 gap-12">
|
||||
<div className="animate-fade-in">
|
||||
<dt className="text-2xl md:text-3xl font-extrabold text-accent mb-4">
|
||||
{t('certifiedQuality')}
|
||||
{data?.badge1 || t('certifiedQuality')}
|
||||
</dt>
|
||||
<dd className="text-base md:text-lg font-bold uppercase tracking-widest text-white/60">
|
||||
{t('vdeApproved')}
|
||||
{data?.badge1Text || t('vdeApproved')}
|
||||
</dd>
|
||||
</div>
|
||||
<div className="animate-fade-in" style={{ animationDelay: '100ms' }}>
|
||||
<dt className="text-2xl md:text-3xl font-extrabold text-accent mb-4">
|
||||
{t('fullSpectrum')}
|
||||
{data?.badge2 || t('fullSpectrum')}
|
||||
</dt>
|
||||
<dd className="text-base md:text-lg font-bold uppercase tracking-widest text-white/60">
|
||||
{t('solutionsRange')}
|
||||
{data?.badge2Text || t('solutionsRange')}
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
|
||||
@@ -7,7 +7,7 @@ import dynamic from 'next/dynamic';
|
||||
const Lightbox = dynamic(() => import('../Lightbox'), { ssr: false });
|
||||
import { useSearchParams } from 'next/navigation';
|
||||
|
||||
export default function GallerySection() {
|
||||
export default function GallerySection({ data }: { data?: any }) {
|
||||
const t = useTranslations('Home.gallery');
|
||||
const searchParams = useSearchParams();
|
||||
const images = [
|
||||
@@ -26,8 +26,8 @@ export default function GallerySection() {
|
||||
return (
|
||||
<Section className="bg-white text-white py-32">
|
||||
<Container>
|
||||
<Heading level={2} subtitle={t('subtitle')} align="center">
|
||||
{t('title')}
|
||||
<Heading level={2} subtitle={data?.subtitle || t('subtitle')} align="center">
|
||||
{data?.title || t('title')}
|
||||
</Heading>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
|
||||
@@ -8,7 +8,7 @@ import { useAnalytics } from '../analytics/useAnalytics';
|
||||
import { AnalyticsEvents } from '../analytics/analytics-events';
|
||||
const HeroIllustration = dynamic(() => import('./HeroIllustration'), { ssr: false });
|
||||
|
||||
export default function Hero() {
|
||||
export default function Hero({ data }: { data?: any }) {
|
||||
const t = useTranslations('Home.hero');
|
||||
const locale = useLocale();
|
||||
const { trackEvent } = useAnalytics();
|
||||
@@ -22,24 +22,28 @@ export default function Hero() {
|
||||
level={1}
|
||||
className="text-center md:text-left mb-6 md:mb-8 md:max-w-none text-white text-4xl sm:text-5xl md:text-7xl font-extrabold [text-shadow:_-2px_-2px_0_#002b49,_2px_-2px_0_#002b49,_-2px_2px_0_#002b49,_2px_2px_0_#002b49,_-2px_0_0_#002b49,_2px_0_0_#002b49,_0_-2px_0_#002b49,_0_2px_0_#002b49]"
|
||||
>
|
||||
{t.rich('title', {
|
||||
green: (chunks) => (
|
||||
<span className="relative inline-block">
|
||||
<span className="relative z-10 text-accent italic inline-block">{chunks}</span>
|
||||
<div
|
||||
className="w-[140%] h-[140%] -top-[20%] -left-[20%] text-accent/30 hidden md:block absolute -z-10 animate-in fade-in zoom-in-0 duration-1000 ease-out fill-mode-both"
|
||||
style={{ animationDelay: '500ms' }}
|
||||
>
|
||||
<Scribble variant="circle" />
|
||||
</div>
|
||||
</span>
|
||||
),
|
||||
})}
|
||||
{data?.title ? (
|
||||
<span dangerouslySetInnerHTML={{ __html: data.title.replace(/<green>/g, '<span class="relative inline-block"><span class="relative z-10 text-accent italic inline-block">').replace(/<\/green>/g, '</span><div class="w-[140%] h-[140%] -top-[20%] -left-[20%] text-accent/30 hidden md:block absolute -z-10 animate-in fade-in zoom-in-0 duration-1000 ease-out fill-mode-both" style="animation-delay: 500ms;"><Scribble variant="circle" /></div></span>') }} />
|
||||
) : (
|
||||
t.rich('title', {
|
||||
green: (chunks) => (
|
||||
<span className="relative inline-block">
|
||||
<span className="relative z-10 text-accent italic inline-block">{chunks}</span>
|
||||
<div
|
||||
className="w-[140%] h-[140%] -top-[20%] -left-[20%] text-accent/30 hidden md:block absolute -z-10 animate-in fade-in zoom-in-0 duration-1000 ease-out fill-mode-both"
|
||||
style={{ animationDelay: '500ms' }}
|
||||
>
|
||||
<Scribble variant="circle" />
|
||||
</div>
|
||||
</span>
|
||||
),
|
||||
})
|
||||
)}
|
||||
</Heading>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-lg md:text-xl text-white leading-relaxed max-w-2xl mb-10 md:mb-12">
|
||||
{t('subtitle')}
|
||||
{data?.subtitle || t('subtitle')}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-col sm:flex-row justify-center md:justify-start gap-4 md:gap-6">
|
||||
@@ -51,12 +55,12 @@ export default function Hero() {
|
||||
className="group w-full sm:w-auto h-14 md:h-16 px-8 md:px-10 text-base md:text-lg hover:scale-105 transition-transform"
|
||||
onClick={() =>
|
||||
trackEvent(AnalyticsEvents.BUTTON_CLICK, {
|
||||
label: t('cta'),
|
||||
label: data?.ctaLabel || t('cta'),
|
||||
location: 'home_hero_primary',
|
||||
})
|
||||
}
|
||||
>
|
||||
{t('cta')}
|
||||
{data?.ctaLabel || t('cta')}
|
||||
<span className="transition-transform group-hover/btn:translate-x-1 ml-2">
|
||||
→
|
||||
</span>
|
||||
@@ -70,12 +74,12 @@ export default function Hero() {
|
||||
className="group w-full sm:w-auto h-14 md:h-16 px-8 md:px-10 text-base md:text-lg md:bg-white md:text-primary md:hover:bg-neutral-light md:border-none hover:scale-105 transition-transform"
|
||||
onClick={() =>
|
||||
trackEvent(AnalyticsEvents.BUTTON_CLICK, {
|
||||
label: t('exploreProducts'),
|
||||
label: data?.secondaryCtaLabel || t('exploreProducts'),
|
||||
location: 'home_hero_secondary',
|
||||
})
|
||||
}
|
||||
>
|
||||
{t('exploreProducts')}
|
||||
{data?.secondaryCtaLabel || t('exploreProducts')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -3,7 +3,7 @@ import Image from 'next/image';
|
||||
import { useTranslations, useLocale } from 'next-intl';
|
||||
import { Section, Container, Button, Heading } from '../../components/ui';
|
||||
|
||||
export default function MeetTheTeam() {
|
||||
export default function MeetTheTeam({ data }: { data?: any }) {
|
||||
const t = useTranslations('Home.meetTheTeam');
|
||||
const teamT = useTranslations('Team');
|
||||
const locale = useLocale();
|
||||
@@ -13,7 +13,7 @@ export default function MeetTheTeam() {
|
||||
<div className="absolute inset-0 z-0">
|
||||
<Image
|
||||
src="/uploads/2024/12/DSC08036-Large.webp"
|
||||
alt={t('subtitle')}
|
||||
alt={data?.subtitle || t('subtitle')}
|
||||
fill
|
||||
className="object-cover scale-105 animate-slow-zoom"
|
||||
sizes="100vw"
|
||||
@@ -24,20 +24,20 @@ export default function MeetTheTeam() {
|
||||
|
||||
<Container className="relative z-10">
|
||||
<div className="max-w-3xl text-white animate-slide-up">
|
||||
<Heading level={2} subtitle={t('subtitle')} className="text-white mb-8">
|
||||
<span className="text-white">{t('title')}</span>
|
||||
<Heading level={2} subtitle={data?.subtitle || t('subtitle')} className="text-white mb-8">
|
||||
<span className="text-white">{data?.title || t('title')}</span>
|
||||
</Heading>
|
||||
|
||||
<div className="relative mb-12">
|
||||
<div className="absolute -left-8 top-0 bottom-0 w-1 bg-accent rounded-full" />
|
||||
<p className="text-xl md:text-2xl leading-relaxed font-medium italic text-white/90 pl-8">
|
||||
"{t('description')}"
|
||||
"{data?.description || t('description')}"
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap gap-8 items-center">
|
||||
<Button href={`/${locale}/team`} variant="accent" size="xl" className="group">
|
||||
{t('cta')}
|
||||
{data?.ctaLabel || t('cta')}
|
||||
<span className="ml-3 transition-transform group-hover:translate-x-2">→</span>
|
||||
</Button>
|
||||
|
||||
@@ -61,7 +61,7 @@ export default function MeetTheTeam() {
|
||||
</div>
|
||||
</div>
|
||||
<span className="text-white/60 font-bold text-xs md:text-sm uppercase tracking-widest">
|
||||
{t('andNetwork')}
|
||||
{data?.networkLabel || t('andNetwork')}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -4,7 +4,7 @@ import Image from 'next/image';
|
||||
import { useTranslations, useLocale } from 'next-intl';
|
||||
import { Section } from '../../components/ui';
|
||||
|
||||
export default function ProductCategories() {
|
||||
export default function ProductCategories({ data }: { data?: any }) {
|
||||
const t = useTranslations('Products');
|
||||
const locale = useLocale();
|
||||
|
||||
@@ -43,9 +43,13 @@ export default function ProductCategories() {
|
||||
|
||||
return (
|
||||
<Section className="bg-neutral-light py-0 md:py-0 lg:py-0 -mt-px">
|
||||
{t.has('title') && (
|
||||
{(data?.title || t.has('title')) && (
|
||||
<h2 className="sr-only">
|
||||
{t.rich('title', { green: (chunks: any) => <span>{chunks}</span> })}
|
||||
{data?.title ? (
|
||||
<span dangerouslySetInnerHTML={{ __html: data.title }} />
|
||||
) : (
|
||||
t.rich('title', { green: (chunks: any) => <span>{chunks}</span> })
|
||||
)}
|
||||
</h2>
|
||||
)}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4">
|
||||
|
||||
@@ -7,34 +7,38 @@ import { Section, Container, Heading, Card, Badge } from '../../components/ui';
|
||||
|
||||
interface RecentPostsProps {
|
||||
locale: string;
|
||||
data?: any;
|
||||
}
|
||||
|
||||
export default async function RecentPosts({ locale }: RecentPostsProps) {
|
||||
export default async function RecentPosts({ locale, data }: RecentPostsProps) {
|
||||
const t = await getTranslations('Blog');
|
||||
const posts = await getAllPosts(locale);
|
||||
const recentPosts = posts.slice(0, 3);
|
||||
|
||||
if (recentPosts.length === 0) return null;
|
||||
|
||||
const title = data?.title || t('allArticles');
|
||||
const subtitle = data?.subtitle || t('latestNews');
|
||||
|
||||
return (
|
||||
<Section className="bg-neutral py-16 md:py-24">
|
||||
<Container>
|
||||
<div className="flex flex-col md:flex-row items-start md:items-end justify-between mb-12 md:mb-16 gap-6">
|
||||
<Heading level={2} subtitle={t('latestNews')} className="mb-0 text-primary">
|
||||
{t('allArticles')}
|
||||
<Heading level={2} subtitle={subtitle} className="mb-0 text-primary">
|
||||
{title}
|
||||
</Heading>
|
||||
<Link
|
||||
href={`/${locale}/blog`}
|
||||
className="group flex items-center text-primary font-bold text-base md:text-lg touch-target"
|
||||
>
|
||||
{t('allArticles')}
|
||||
{title}
|
||||
<span className="ml-2 transition-transform group-hover:translate-x-2">→</span>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<ul className="grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-10 list-none p-0 m-0">
|
||||
{recentPosts.map((post) => (
|
||||
<li key={post.slug}>
|
||||
{recentPosts.map((post, idx) => (
|
||||
<li key={`${post.slug}-${idx}`}>
|
||||
<Link href={`/${locale}/blog/${post.slug}`} className="group block h-full">
|
||||
<Card
|
||||
tag="article"
|
||||
@@ -47,6 +51,9 @@ export default async function RecentPosts({ locale }: RecentPostsProps) {
|
||||
alt={post.frontmatter.title}
|
||||
fill
|
||||
className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
|
||||
style={{
|
||||
objectPosition: `${post.frontmatter.focalX ?? 50}% ${post.frontmatter.focalY ?? 50}%`,
|
||||
}}
|
||||
sizes="(max-width: 768px) 100vw, 33vw"
|
||||
loading="lazy"
|
||||
/>
|
||||
|
||||
@@ -4,7 +4,7 @@ import React, { useState, useEffect, useRef } from 'react';
|
||||
import Scribble from '@/components/Scribble';
|
||||
import { useTranslations } from 'next-intl';
|
||||
|
||||
export default function VideoSection() {
|
||||
export default function VideoSection({ data }: { data?: any }) {
|
||||
const t = useTranslations('Home.video');
|
||||
const [isVisible, setIsVisible] = useState(false);
|
||||
const sectionRef = useRef<HTMLElement>(null);
|
||||
@@ -40,17 +40,21 @@ export default function VideoSection() {
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-primary/60 via-transparent to-primary/60 flex items-center justify-center pointer-events-none">
|
||||
<div className="max-w-5xl px-6 text-center animate-slide-up pointer-events-auto">
|
||||
<h2 className="text-3xl md:text-4xl lg:text-5xl font-extrabold text-white leading-[1.1]">
|
||||
{t.rich('title', {
|
||||
future: (chunks) => (
|
||||
<span className="relative inline-block mx-2">
|
||||
<span className="relative z-10 italic text-accent">{chunks}</span>
|
||||
<Scribble
|
||||
variant="underline"
|
||||
className="w-full h-4 -bottom-2 left-0 text-accent/40"
|
||||
/>
|
||||
</span>
|
||||
),
|
||||
})}
|
||||
{data?.title ? (
|
||||
<span dangerouslySetInnerHTML={{ __html: data.title.replace(/<future>/g, '<span class="relative inline-block mx-2"><span class="relative z-10 italic text-accent">').replace(/<\/future>/g, '</span><Scribble variant="underline" class="w-full h-4 -bottom-2 left-0 text-accent/40" /></span>') }} />
|
||||
) : (
|
||||
t.rich('title', {
|
||||
future: (chunks) => (
|
||||
<span className="relative inline-block mx-2">
|
||||
<span className="relative z-10 italic text-accent">{chunks}</span>
|
||||
<Scribble
|
||||
variant="underline"
|
||||
className="w-full h-4 -bottom-2 left-0 text-accent/40"
|
||||
/>
|
||||
</span>
|
||||
),
|
||||
})
|
||||
)}
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -2,30 +2,35 @@ import React from 'react';
|
||||
import { useTranslations } from 'next-intl';
|
||||
import { Section, Container, Heading } from '../../components/ui';
|
||||
|
||||
export default function WhatWeDo() {
|
||||
export default function WhatWeDo({ data }: { data?: any }) {
|
||||
const t = useTranslations('Home.whatWeDo');
|
||||
|
||||
const items = data?.items?.length ? data.items : [0, 1, 2, 3].map(idx => ({
|
||||
title: t(`items.${idx}.title`),
|
||||
description: t(`items.${idx}.description`)
|
||||
}));
|
||||
|
||||
return (
|
||||
<Section className="bg-white">
|
||||
<Container>
|
||||
<div className="sticky-narrative-container">
|
||||
<div className="sticky-narrative-sidebar">
|
||||
<div className="lg:sticky lg:top-32">
|
||||
<Heading level={2} subtitle={t('expertise')} className="text-primary-dark">
|
||||
{t('title')}
|
||||
<Heading level={2} subtitle={data?.expertiseLabel || t('expertise')} className="text-primary-dark">
|
||||
{data?.title || t('title')}
|
||||
</Heading>
|
||||
<p className="text-base md:text-lg text-text-secondary leading-relaxed">
|
||||
{t('subtitle')}
|
||||
{data?.subtitle || t('subtitle')}
|
||||
</p>
|
||||
<div className="mt-8 md:mt-12 p-6 md:p-8 bg-saturated/10 rounded-2xl border border-saturated/10">
|
||||
<p className="text-saturated font-bold text-base md:text-base italic">
|
||||
"{t('quote')}"
|
||||
"{data?.quote || t('quote')}"
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="sticky-narrative-content grid grid-cols-1 md:grid-cols-2 gap-x-8 md:gap-x-12 gap-y-12 md:gap-y-20">
|
||||
{[0, 1, 2, 3].map((idx) => (
|
||||
{items.map((item: any, idx: number) => (
|
||||
<div key={idx} className="group">
|
||||
<div className="flex items-center gap-4 mb-4 md:mb-6">
|
||||
<span className="flex items-center justify-center w-10 h-10 md:w-12 md:h-12 rounded-full bg-saturated text-white font-bold text-base md:text-lg shadow-lg shadow-saturated/20 group-hover:scale-110 transition-transform">
|
||||
@@ -33,8 +38,8 @@ export default function WhatWeDo() {
|
||||
</span>
|
||||
<div className="h-px flex-grow bg-neutral-medium" />
|
||||
</div>
|
||||
<h3 className="text-lg md:text-xl font-bold mb-3 md:mb-4 text-primary-dark group-hover:text-accent-dark transition-colors">{t(`items.${idx}.title`)}</h3>
|
||||
<p className="text-text-secondary text-base md:text-base leading-relaxed">{t(`items.${idx}.description`)}</p>
|
||||
<h3 className="text-lg md:text-xl font-bold mb-3 md:mb-4 text-primary-dark group-hover:text-accent-dark transition-colors">{item.title}</h3>
|
||||
<p className="text-text-secondary text-base md:text-base leading-relaxed">{item.description}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@@ -2,24 +2,27 @@ import React from 'react';
|
||||
import { useTranslations } from 'next-intl';
|
||||
import { Section, Container, Heading } from '../../components/ui';
|
||||
|
||||
export default function WhyChooseUs() {
|
||||
export default function WhyChooseUs({ data }: { data?: any }) {
|
||||
const t = useTranslations('Home.whyChooseUs');
|
||||
|
||||
const features = data?.features?.length ? data.features.map((f: any) => f.feature) : [0, 1, 2, 3].map(i => t(`features.${i}`));
|
||||
const items = data?.items?.length ? data.items : [0, 1, 2, 3].map(idx => ({ title: t(`items.${idx}.title`), description: t(`items.${idx}.description`) }));
|
||||
|
||||
return (
|
||||
<Section className="bg-neutral-light">
|
||||
<Container>
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-16 lg:gap-24">
|
||||
<div className="lg:col-span-4 order-1 lg:order-2">
|
||||
<div className="sticky top-32">
|
||||
<Heading level={2} subtitle={t('whyKlz')} className="text-primary-dark">
|
||||
{t('title')}
|
||||
<Heading level={2} subtitle={data?.tagline || t('whyKlz')} className="text-primary-dark">
|
||||
{data?.title || t('title')}
|
||||
</Heading>
|
||||
<p className="text-base md:text-lg text-text-secondary leading-relaxed">
|
||||
{t('subtitle')}
|
||||
{data?.subtitle || t('subtitle')}
|
||||
</p>
|
||||
|
||||
<ul className="mt-12 space-y-6 list-none p-0">
|
||||
{[0, 1, 2, 3].map((i) => (
|
||||
{features.map((featureText: string, i: number) => (
|
||||
<li key={i} className="flex items-center gap-4">
|
||||
<div className="flex-shrink-0 w-6 h-6 rounded-full bg-accent flex items-center justify-center">
|
||||
<svg
|
||||
@@ -38,7 +41,7 @@ export default function WhyChooseUs() {
|
||||
</svg>
|
||||
</div>
|
||||
<span className="font-bold text-primary-dark text-base md:text-base">
|
||||
{t(`features.${i}`)}
|
||||
{featureText}
|
||||
</span>
|
||||
</li>
|
||||
))}
|
||||
@@ -46,7 +49,7 @@ export default function WhyChooseUs() {
|
||||
</div>
|
||||
</div>
|
||||
<ul className="lg:col-span-8 grid grid-cols-1 md:grid-cols-2 gap-8 order-2 lg:order-1 list-none p-0 m-0">
|
||||
{[0, 1, 2, 3].map((idx) => (
|
||||
{items.map((item: any, idx: number) => (
|
||||
<li
|
||||
key={idx}
|
||||
className="p-10 bg-white rounded-3xl border border-neutral-medium hover:border-accent transition-all duration-500 hover:shadow-xl group"
|
||||
@@ -57,10 +60,10 @@ export default function WhyChooseUs() {
|
||||
</span>
|
||||
</div>
|
||||
<h3 className="text-xl font-bold mb-4 text-primary-dark">
|
||||
{t(`items.${idx}.title`)}
|
||||
{item.title}
|
||||
</h3>
|
||||
<p className="text-text-secondary text-base md:text-base leading-relaxed">
|
||||
{t(`items.${idx}.description`)}
|
||||
{item.description}
|
||||
</p>
|
||||
</li>
|
||||
))}
|
||||
|
||||
Reference in New Issue
Block a user