feat: payload cms

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