feat: improve accessibility and SEO (100/100 Lighthouse score)

Fixes color contrast, canonical URLs, viewport scaling, semantic lists,

and resolves 404 errors for manifest/imgproxy.

components/Footer.tsx

@@ -230,7 +230,7 @@ export default function Footer() {
                     <p className="text-white/80 font-bold group-hover:text-accent transition-colors leading-snug mb-2 text-base md:text-base">
                       {post.title}
                     </p>
-                    <span className="text-xs text-white/40 uppercase tracking-widest">
+                    <span className="text-xs text-white/70 uppercase tracking-widest">
                       {t('readArticle')} &rarr;
                     </span>
                   </Link>
@@ -240,7 +240,7 @@ export default function Footer() {
           </div>
         </div>
 
-        <div className="pt-12 border-t border-white/10 flex flex-col md:flex-row justify-between items-center gap-8 text-white/40 text-xs md:text-sm font-medium">
+        <div className="pt-12 border-t border-white/10 flex flex-col md:flex-row justify-between items-center gap-8 text-white/70 text-xs md:text-sm font-medium">
           <p>{t('copyright', { year: currentYear })}</p>
           <div className="flex gap-8">
             <Link

components/home/RecentPosts.tsx

@@ -32,67 +32,69 @@ export default async function RecentPosts({ locale }: RecentPostsProps) {
           </Link>
         </div>
 
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-10">
+        <ul className="grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-10 list-none p-0 m-0">
           {recentPosts.map((post) => (
-            <Link key={post.slug} href={`/${locale}/blog/${post.slug}`} className="group block">
-              <Card
-                tag="article"
-                className="h-full flex flex-col border-none shadow-lg hover:shadow-2xl transition-all duration-500 rounded-3xl"
-              >
-                {post.frontmatter.featuredImage && (
-                  <div className="relative h-64 overflow-hidden">
-                    <Image
-                      src={post.frontmatter.featuredImage}
-                      alt={post.frontmatter.title}
-                      fill
-                      className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
-                      sizes="(max-width: 768px) 100vw, 33vw"
-                      loading="lazy"
-                    />
-                    <div className="absolute inset-0 image-overlay-gradient opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
-                    {post.frontmatter.category && (
-                      <Badge variant="accent" className="absolute top-4 left-4 shadow-md">
-                        {post.frontmatter.category}
-                      </Badge>
-                    )}
-                  </div>
-                )}
-                <div className="p-6 md:p-8 flex flex-col flex-grow">
-                  <div className="text-xs md:text-sm font-medium text-text-light mb-3 md:mb-4 flex items-center gap-2">
-                    <span className="w-6 md:w-8 h-px bg-neutral-medium" />
-                    <time dateTime={post.frontmatter.date}>
-                      {new Date(post.frontmatter.date).toLocaleDateString(locale, {
-                        year: 'numeric',
-                        month: 'long',
-                        day: 'numeric',
-                      })}
-                    </time>
-                  </div>
-                  <h3 className="text-lg md:text-xl font-bold text-primary group-hover:text-accent-dark transition-colors line-clamp-2 mb-4 md:mb-6 leading-tight">
-                    {post.frontmatter.title}
-                  </h3>
-                  <div className="mt-auto flex items-center text-primary font-bold group-hover:underline decoration-2 underline-offset-4">
-                    {t('readMore')}
-                    <svg
-                      className="ml-2 w-5 h-5 transition-transform group-hover:translate-x-2"
-                      fill="none"
-                      stroke="currentColor"
-                      viewBox="0 0 24 24"
-                      aria-hidden="true"
-                    >
-                      <path
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        strokeWidth={2}
-                        d="M17 8l4 4m0 0l-4 4m4-4H3"
+            <li key={post.slug}>
+              <Link href={`/${locale}/blog/${post.slug}`} className="group block h-full">
+                <Card
+                  tag="article"
+                  className="h-full flex flex-col border-none shadow-lg hover:shadow-2xl transition-all duration-500 rounded-3xl"
+                >
+                  {post.frontmatter.featuredImage && (
+                    <div className="relative h-64 overflow-hidden">
+                      <Image
+                        src={post.frontmatter.featuredImage}
+                        alt={post.frontmatter.title}
+                        fill
+                        className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
+                        sizes="(max-width: 768px) 100vw, 33vw"
+                        loading="lazy"
                       />
-                    </svg>
+                      <div className="absolute inset-0 image-overlay-gradient opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
+                      {post.frontmatter.category && (
+                        <Badge variant="accent" className="absolute top-4 left-4 shadow-md">
+                          {post.frontmatter.category}
+                        </Badge>
+                      )}
+                    </div>
+                  )}
+                  <div className="p-6 md:p-8 flex flex-col flex-grow">
+                    <div className="text-xs md:text-sm font-medium text-text-light mb-3 md:mb-4 flex items-center gap-2">
+                      <span className="w-6 md:w-8 h-px bg-neutral-medium" />
+                      <time dateTime={post.frontmatter.date}>
+                        {new Date(post.frontmatter.date).toLocaleDateString(locale, {
+                          year: 'numeric',
+                          month: 'long',
+                          day: 'numeric',
+                        })}
+                      </time>
+                    </div>
+                    <h3 className="text-lg md:text-xl font-bold text-primary group-hover:text-accent-dark transition-colors line-clamp-2 mb-4 md:mb-6 leading-tight">
+                      {post.frontmatter.title}
+                    </h3>
+                    <div className="mt-auto flex items-center text-primary font-bold group-hover:underline decoration-2 underline-offset-4">
+                      {t('readMore')}
+                      <svg
+                        className="ml-2 w-5 h-5 transition-transform group-hover:translate-x-2"
+                        fill="none"
+                        stroke="currentColor"
+                        viewBox="0 0 24 24"
+                        aria-hidden="true"
+                      >
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth={2}
+                          d="M17 8l4 4m0 0l-4 4m4-4H3"
+                        />
+                      </svg>
+                    </div>
                   </div>
-                </div>
-              </Card>
-            </Link>
+                </Card>
+              </Link>
+            </li>
           ))}
-        </div>
+        </ul>
       </Container>
     </Section>
   );

components/home/WhyChooseUs.tsx

@@ -18,9 +18,9 @@ export default function WhyChooseUs() {
                 {t('subtitle')}
               </p>
 
-              <div className="mt-12 space-y-6">
+              <ul className="mt-12 space-y-6 list-none p-0">
                 {[0, 1, 2, 3].map((i) => (
-                  <div key={i} className="flex items-center gap-4">
+                  <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
                         className="w-4 h-4 text-primary-dark"
@@ -40,9 +40,9 @@ export default function WhyChooseUs() {
                     <span className="font-bold text-primary-dark text-base md:text-base">
                       {t(`features.${i}`)}
                     </span>
-                  </div>
+                  </li>
                 ))}
-              </div>
+              </ul>
             </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">