feat: payload cms

components/home/CTA.tsx

@@ -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">&rarr;</span>
             </Button>
           </div>

components/home/Experience.tsx

@@ -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>

components/home/GallerySection.tsx

@@ -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">

components/home/Hero.tsx

@@ -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">
                   &rarr;
                 </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>

components/home/MeetTheTeam.tsx

@@ -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">&rarr;</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>

components/home/ProductCategories.tsx

@@ -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">

components/home/RecentPosts.tsx

@@ -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">&rarr;</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"
                       />

components/home/VideoSection.tsx

@@ -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>

components/home/WhatWeDo.tsx

@@ -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>

components/home/WhyChooseUs.tsx

@@ -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>
             ))}