style: standardize typography to use Tailwind utility classes

- Replace custom font sizes with Tailwind utility classes throughout the application
- Use text-5xl for main hero titles (from text-[3rem])
- Use text-3xl for page titles (from text-[2rem])
- Use text-2xl for section headings (from text-[1.5rem])
- Use text-xs for small text (from text-[0.75rem], text-[0.5rem])
- Improve consistency and maintainability of typography system

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

Author: ericyangpan

src/app/[locale]/page.tsx

@@ -95,7 +95,7 @@ export default async function Home({ params }: Props) {
               </pre>
             </div>
 
-            <h1 className="text-[2rem] font-semibold tracking-[-0.03em] mb-[var(--spacing-md)] homepage-h1">
+            <h1 className="text-3xl font-semibold tracking-[-0.03em] mb-[var(--spacing-md)] homepage-h1">
               {tHome('title')}
             </h1>
 
@@ -130,7 +130,7 @@ export default async function Home({ params }: Props) {
         className="py-[var(--spacing-xl)] border-b border-[var(--color-border)]"
       >
         <div className="max-w-6xl mx-auto px-[var(--spacing-md)]">
-          <h2 className="text-[1.5rem] font-semibold tracking-[-0.02em] mb-[var(--spacing-sm)] homepage-h2">
+          <h2 className="text-2xl font-semibold tracking-[-0.02em] mb-[var(--spacing-sm)] homepage-h2">
             {tFeatures('title')}
           </h2>
 
@@ -197,7 +197,7 @@ export default async function Home({ params }: Props) {
       {/* FAQ Section */}
       <section id="faq" className="py-[var(--spacing-xl)]">
         <div className="max-w-6xl mx-auto px-[var(--spacing-md)]">
-          <h2 className="text-[1.5rem] font-semibold tracking-[-0.02em] mb-[var(--spacing-sm)] homepage-h2">
+          <h2 className="text-2xl font-semibold tracking-[-0.02em] mb-[var(--spacing-sm)] homepage-h2">
             {tHome('faq')}
           </h2>
 

src/components/Footer.tsx

@@ -114,7 +114,7 @@ function Footer() {
 
         <div className="border-t border-[var(--color-border)] pt-[var(--spacing-md)]">
           <div className="text-center">
-            <div className="text-[0.75rem] leading-tight text-[var(--color-text-muted)]">
+            <div className="text-xs leading-tight text-[var(--color-text-muted)]">
               {tFooter('copyright')}
             </div>
           </div>

src/components/MDXComponents.tsx

@@ -4,17 +4,17 @@ import { Link } from '@/i18n/navigation'
 export function useMDXComponents(components: MDXComponents): MDXComponents {
   return {
     h1: ({ children }) => (
-      <h1 className="text-[2rem] font-semibold tracking-[-0.03em] mb-[var(--spacing-md)] text-[var(--color-text)]">
+      <h1 className="text-3xl font-semibold tracking-[-0.03em] mb-[var(--spacing-md)] text-[var(--color-text)]">
         {children}
       </h1>
     ),
     h2: ({ children }) => (
-      <h2 className="text-[1.5rem] font-semibold text-[var(--color-text)] mb-[var(--spacing-sm)] mt-[var(--spacing-lg)]">
+      <h2 className="text-2xl font-semibold text-[var(--color-text)] mb-[var(--spacing-sm)] mt-[var(--spacing-lg)]">
         {children}
       </h2>
     ),
     h3: ({ children }) => (
-      <h3 className="text-[1.25rem] font-semibold text-[var(--color-text)] mb-[var(--spacing-sm)] mt-[var(--spacing-md)]">
+      <h3 className="text-xl font-semibold text-[var(--color-text)] mb-[var(--spacing-sm)] mt-[var(--spacing-md)]">
         {children}
       </h3>
     ),

src/components/product/LinkCard.tsx

@@ -82,7 +82,7 @@ export function LinkCardGrid({
   return (
     <section className="py-[var(--spacing-lg)] border-b border-[var(--color-border)]">
       <div className="max-w-8xl mx-auto px-[var(--spacing-md)]">
-        <h2 className="text-[1.5rem] font-semibold tracking-[-0.02em] mb-[var(--spacing-sm)]">
+        <h2 className="text-2xl font-semibold tracking-[-0.02em] mb-[var(--spacing-sm)]">
           {title}
         </h2>
 

src/components/product/ProductCommands.tsx

@@ -21,7 +21,7 @@ function CommandSectionItem({ value, label }: Omit<CommandSection, 'labelKey'>)
   return (
     <section className="py-[var(--spacing-lg)] border-b border-[var(--color-border)]">
       <div className="max-w-8xl mx-auto px-[var(--spacing-md)]">
-        <h2 className="text-[1.5rem] font-semibold tracking-[-0.02em] mb-[var(--spacing-sm)]">
+        <h2 className="text-2xl font-semibold tracking-[-0.02em] mb-[var(--spacing-sm)]">
           {label}
         </h2>
 

src/components/product/ProductHero.tsx

@@ -104,9 +104,9 @@ export function ProductHero({
       <div className="max-w-8xl mx-auto px-[var(--spacing-md)] text-center">
         {/* Title with Badge */}
         <div className="relative inline-block mb-[var(--spacing-sm)]">
-          <h1 className="text-[3rem] font-semibold tracking-[-0.04em]">{name}</h1>
+          <h1 className="text-5xl font-semibold tracking-[-0.04em]">{name}</h1>
           <div className="absolute bottom-0 right-0 translate-x-[calc(100%+1rem)]">
-            <div className="px-[var(--spacing-xs)] py-[2px] text-[0.5rem] text-[var(--color-text-muted)] border-[1.5px] border-double border-[var(--color-border-strong)] whitespace-nowrap">
+            <div className="px-[var(--spacing-xs)] py-[2px] text-xs text-[var(--color-text-muted)] border-[1.5px] border-double border-[var(--color-border-strong)] whitespace-nowrap">
               {badgeText}
             </div>
           </div>

src/components/product/ProductPricing.tsx

@@ -16,7 +16,7 @@ export function ProductPricing({ pricing, pricingUrl }: ProductPricingProps) {
   return (
     <section className="py-[var(--spacing-lg)] border-b border-[var(--color-border)]">
       <div className="max-w-8xl mx-auto px-[var(--spacing-md)]">
-        <h2 className="text-[1.5rem] font-semibold tracking-[-0.02em] mb-[var(--spacing-sm)]">
+        <h2 className="text-2xl font-semibold tracking-[-0.02em] mb-[var(--spacing-sm)]">
           {t('title')}
         </h2>