feat: payload cms

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