headings

app/[locale]/products/[...slug]/page.tsx

@@ -5,7 +5,7 @@ import ProductSidebar from '@/components/ProductSidebar';
 import ProductTabs from '@/components/ProductTabs';
 import ProductTechnicalData from '@/components/ProductTechnicalData';
 import RelatedProducts from '@/components/RelatedProducts';
-import { Badge, Container, Section } from '@/components/ui';
+import { Badge, Container, Heading, Section } from '@/components/ui';
 import { getDatasheetPath } from '@/lib/datasheets';
 import { getAllProducts, getProductBySlug } from '@/lib/mdx';
 import { mapFileSlugToTranslated, mapSlugToFileSlug } from '@/lib/slugs';
@@ -180,9 +180,9 @@ export default async function ProductPage({ params }: ProductPageProps) {
                 <span className="mx-3 opacity-30">/</span>
                 <span className="text-white/90">{categoryTitle}</span>
               </nav>
-              <h1 className="text-5xl md:text-7xl lg:text-8xl font-extrabold text-white mb-8 tracking-tight leading-[1.05]">
+              <Heading level={1} className="text-white mb-8">
                 {categoryTitle}
-              </h1>
+              </Heading>
               <div className="h-1.5 w-24 bg-accent rounded-full" />
             </div>
           </Container>
@@ -325,9 +325,9 @@ export default async function ProductPage({ params }: ProductPageProps) {
                     </Badge>
                   ))}
                 </div>
-                <h1 className="text-6xl md:text-8xl lg:text-9xl font-black text-white mb-8 tracking-tighter leading-[0.9] uppercase">
+                <Heading level={1} className="text-white mb-8 uppercase">
                   {product.frontmatter.title}
-                </h1>
+                </Heading>
                 <p className="text-xl md:text-2xl text-white/60 max-w-2xl leading-relaxed font-medium">
                   {product.frontmatter.description}
                 </p>

app/[locale]/products/page.tsx

@@ -1,6 +1,6 @@
 import Reveal from '@/components/Reveal';
 import Scribble from '@/components/Scribble';
-import { Badge, Button, Card, Container, Section } from '@/components/ui';
+import { Badge, Button, Card, Container, Heading, Section } from '@/components/ui';
 import { getTranslations } from 'next-intl/server';
 import { Metadata } from 'next';
 import Image from 'next/image';
@@ -90,7 +90,7 @@ export default async function ProductsPage({ params }: ProductsPageProps) {
             <Badge variant="saturated" className="mb-4 md:mb-8 shadow-lg px-3 py-1 md:px-4 md:py-1.5">
               {t('heroSubtitle')}
             </Badge>
-            <h1 className="text-4xl md:text-6xl lg:text-7xl font-extrabold text-white mb-4 md:mb-8 tracking-tight leading-[1.05]">
+            <Heading level={1} className="text-white mb-4 md:mb-8">
               {t.rich('title', {
                 green: (chunks) => (
                   <span className="relative inline-block">
@@ -99,7 +99,7 @@ export default async function ProductsPage({ params }: ProductsPageProps) {
                   </span>
                 )
               })}
-            </h1>
+            </Heading>
             <p className="text-lg md:text-xl text-white/70 leading-relaxed max-w-2xl mb-8 md:mb-12 line-clamp-2 md:line-clamp-none">
               {t('subtitle')}
             </p>