chore: deep semantic HTML audit and improvements across all pages

components/Footer.tsx

@@ -67,9 +67,9 @@ export default function Footer() {
 
           {/* Links Columns */}
           <div className="lg:col-span-2">
-            <h2 className="text-accent font-bold uppercase tracking-widest text-xs md:text-sm mb-8">
+            <h3 className="text-accent font-bold uppercase tracking-widest text-xs md:text-sm mb-8">
               {t('legal')}
-            </h2>
+            </h3>
             <ul className="space-y-4 text-white/70 list-none m-0 p-0">
               <li>
                 <Link
@@ -120,9 +120,9 @@ export default function Footer() {
           </div>
 
           <div className="lg:col-span-2">
-            <h2 className="text-accent font-bold uppercase tracking-widest text-xs md:text-sm mb-8">
+            <h3 className="text-accent font-bold uppercase tracking-widest text-xs md:text-sm mb-8">
               {t('company')}
-            </h2>
+            </h3>
             <ul className="space-y-4 text-white/70 list-none m-0 p-0">
               <li>
                 <Link
@@ -189,9 +189,9 @@ export default function Footer() {
 
           {/* Recent Posts Column */}
           <div className="lg:col-span-4">
-            <h2 className="text-accent font-bold uppercase tracking-widest text-xs md:text-sm mb-8">
+            <h3 className="text-accent font-bold uppercase tracking-widest text-xs md:text-sm mb-8">
               {t('recentPosts')}
-            </h2>
+            </h3>
             <ul className="space-y-6 list-none m-0 p-0">
               {[
                 {

components/Header.tsx

@@ -341,7 +341,7 @@ export default function Header() {
           aria-label={t('menu')}
           ref={mobileMenuRef}
         >
-          <motion.div
+          <motion.nav
             className="flex-grow flex flex-col justify-center items-center p-8 space-y-8"
             initial="closed"
             animate={isMobileMenuOpen ? 'open' : 'closed'}
@@ -463,7 +463,7 @@ export default function Header() {
                 <Image src="/logo-white.svg" alt={t('home')} width={80} height={80} unoptimized />
               </motion.div>
             </motion.div>
-          </motion.div>
+          </motion.nav>
         </div>
       </motion.header>
     </>

components/ProductSidebar.tsx

@@ -14,25 +14,30 @@ interface ProductSidebarProps {
   className?: string;
 }
 
-export default function ProductSidebar({ productName, productImage, datasheetPath, className }: ProductSidebarProps) {
+export default function ProductSidebar({
+  productName,
+  productImage,
+  datasheetPath,
+  className,
+}: ProductSidebarProps) {
   const t = useTranslations('Products');
 
   return (
-    <div className={cn("flex flex-col gap-4 animate-slight-fade-in-from-bottom", className)}>
+    <aside className={cn('flex flex-col gap-4 animate-slight-fade-in-from-bottom', className)}>
       {/* Request Quote Form Card */}
       <div className="bg-white rounded-3xl border border-neutral-medium shadow-sm transition-all duration-500 hover:shadow-2xl hover:-translate-y-1 overflow-hidden group/card">
         <div className="bg-primary p-6 text-white relative overflow-hidden">
           {/* Background Accent - Saturated Blue Glow */}
           <div className="absolute top-0 right-0 w-40 h-40 bg-saturated/30 rounded-full -translate-y-1/2 translate-x-1/2 blur-[80px] pointer-events-none" />
-          
+
           {/* Product Thumbnail with Reflection */}
           {productImage && (
             <div className="relative w-full aspect-[16/10] mb-6 rounded-2xl overflow-hidden bg-white/5 backdrop-blur-md p-4 border border-white/10 z-10 group">
               <div className="relative w-full h-full transition-transform duration-1000 ease-out group-hover:scale-105">
-                <Image 
-                  src={productImage} 
-                  alt={productName} 
-                  fill 
+                <Image
+                  src={productImage}
+                  alt={productName}
+                  fill
                   className="object-contain p-2 drop-shadow-[0_20px_30px_rgba(0,0,0,0.4)]"
                 />
                 {/* Subtle Reflection Overlay */}
@@ -46,9 +51,9 @@ export default function ProductSidebar({ productName, productImage, datasheetPat
               <h3 className="text-lg md:text-xl font-heading font-black m-0 tracking-tighter uppercase leading-none">
                 {t('requestQuote')}
               </h3>
-              <Scribble 
-                variant="underline" 
-                className="w-full h-3 -bottom-3 left-0 text-accent/80" 
+              <Scribble
+                variant="underline"
+                className="w-full h-3 -bottom-3 left-0 text-accent/80"
                 color="var(--color-accent)"
               />
             </div>
@@ -57,16 +62,14 @@ export default function ProductSidebar({ productName, productImage, datasheetPat
             </p>
           </div>
         </div>
-        
+
         <div className="p-6 bg-neutral-light/50">
           <RequestQuoteForm productName={productName} />
         </div>
       </div>
 
       {/* Datasheet Download */}
-      {datasheetPath && (
-        <DatasheetDownload datasheetPath={datasheetPath} className="mt-0" />
-      )}
-    </div>
+      {datasheetPath && <DatasheetDownload datasheetPath={datasheetPath} className="mt-0" />}
+    </aside>
   );
 }

components/home/Experience.tsx

@@ -32,24 +32,24 @@ export default function Experience() {
             <p className="pl-9">{t('p2')}</p>
           </div>
 
-          <div className="mt-16 grid grid-cols-1 md:grid-cols-2 gap-12">
+          <dl className="mt-16 grid grid-cols-1 md:grid-cols-2 gap-12">
             <div className="animate-fade-in">
-              <div className="text-2xl md:text-3xl font-extrabold text-accent mb-4">
+              <dt className="text-2xl md:text-3xl font-extrabold text-accent mb-4">
                 {t('certifiedQuality')}
-              </div>
-              <div className="text-base md:text-lg font-bold uppercase tracking-widest text-white/60">
+              </dt>
+              <dd className="text-base md:text-lg font-bold uppercase tracking-widest text-white/60">
                 {t('vdeApproved')}
-              </div>
+              </dd>
             </div>
             <div className="animate-fade-in" style={{ animationDelay: '100ms' }}>
-              <div className="text-2xl md:text-3xl font-extrabold text-accent mb-4">
+              <dt className="text-2xl md:text-3xl font-extrabold text-accent mb-4">
                 {t('fullSpectrum')}
-              </div>
-              <div className="text-base md:text-lg font-bold uppercase tracking-widest text-white/60">
+              </dt>
+              <dd className="text-base md:text-lg font-bold uppercase tracking-widest text-white/60">
                 {t('solutionsRange')}
-              </div>
+              </dd>
             </div>
-          </div>
+          </dl>
         </div>
       </Container>
     </Section>

components/home/RecentPosts.tsx

@@ -35,7 +35,10 @@ export default async function RecentPosts({ locale }: RecentPostsProps) {
         <div className="grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-10">
           {recentPosts.map((post) => (
             <Link key={post.slug} href={`/${locale}/blog/${post.slug}`} className="group block">
-              <Card className="h-full flex flex-col border-none shadow-lg hover:shadow-2xl transition-all duration-500 rounded-3xl">
+              <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
@@ -57,11 +60,13 @@ export default async function RecentPosts({ locale }: RecentPostsProps) {
                 <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" />
-                    {new Date(post.frontmatter.date).toLocaleDateString(locale, {
-                      year: 'numeric',
-                      month: 'long',
-                      day: 'numeric',
-                    })}
+                    <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}

components/home/WhyChooseUs.tsx

@@ -45,9 +45,9 @@ export default function WhyChooseUs() {
               </div>
             </div>
           </div>
-          <div className="lg:col-span-8 grid grid-cols-1 md:grid-cols-2 gap-8 order-2 lg:order-1">
+          <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) => (
-              <div
+              <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"
               >
@@ -62,9 +62,9 @@ export default function WhyChooseUs() {
                 <p className="text-text-secondary text-base md:text-base leading-relaxed">
                   {t(`items.${idx}.description`)}
                 </p>
-              </div>
+              </li>
             ))}
-          </div>
+          </ul>
         </div>
       </Container>
     </Section>

components/ui/Card.tsx

@@ -1,10 +1,14 @@
 import React from 'react';
 import { cn } from './utils';
 
-export function Card({ className, children, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+interface CardProps extends React.HTMLAttributes<HTMLElement> {
+  tag?: 'div' | 'article' | 'section' | 'aside' | 'header' | 'footer' | 'nav' | 'main';
+}
+
+export function Card({ className, children, tag: Tag = 'div', ...props }: CardProps) {
   return (
-    <div className={cn('premium-card overflow-hidden', className)} {...props}>
+    <Tag className={cn('premium-card overflow-hidden', className)} {...props}>
       {children}
-    </div>
+    </Tag>
   );
 }