style: add design system improvements

- Add "//" prefix to all H1 headings via CSS
- Add custom max-width-8xl CSS variable (88rem)
- Add cmdk component styling overrides for consistent typography
- Update component styles for better consistency
- Refine spacing and typography across components

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

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

Author: ericyangpan

src/app/[locale]/globals.css

@@ -42,6 +42,9 @@
   --color-acs-border: var(--color-border);
   --color-acs-border-strong: var(--color-border-strong);
   --color-acs-hover: var(--color-hover);
+
+  /* Custom max-width */
+  --max-width-8xl: 88rem;
 }
 
 body,
@@ -61,6 +64,14 @@ h6 {
   font-weight: 600;
 }
 
+/* H1 with "//" prefix */
+h1::before {
+  content: "//";
+  color: var(--color-text-muted);
+  font-weight: 300;
+  margin-right: 0.75rem;
+}
+
 strong {
   font-weight: 600;
 }
@@ -100,6 +111,19 @@ strong {
   animation: fadeIn 200ms ease-out;
 }
 
+/* cmdk overrides */
+[cmdk-root] {
+  font-family: var(--font-ibm-plex-mono), monospace;
+}
+
+[cmdk-input] {
+  font-family: var(--font-ibm-plex-mono), monospace;
+}
+
+[cmdk-item] {
+  font-family: var(--font-ibm-plex-mono), monospace;
+}
+
 /* Code block styling */
 pre {
   overflow-x: auto;

src/components/Footer.tsx

@@ -86,7 +86,7 @@ function Footer() {
 
   return (
     <footer className="bg-[var(--color-bg)] border-t border-[var(--color-border)] py-[var(--spacing-xl)] pb-[var(--spacing-md)]">
-      <div className="max-w-[1400px] mx-auto px-[var(--spacing-md)]">
+      <div className="max-w-8xl mx-auto px-[var(--spacing-md)]">
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-9 gap-[var(--spacing-lg)] mb-[var(--spacing-lg)]">
           <div className="flex flex-col gap-[var(--spacing-sm)] lg:col-span-3">
             <span className="text-sm font-semibold tracking-tight">{tFooter('aicodingstack')}</span>

src/components/MDXComponents.tsx

@@ -5,9 +5,6 @@ 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)]">
-        <span className="text-[var(--color-text-muted)] font-light mr-[var(--spacing-xs)]">
-          {'//'}
-        </span>
         {children}
       </h1>
     ),

src/components/MegaMenu.tsx

@@ -103,12 +103,6 @@ export const MegaMenu = memo(function MegaMenu({ isOpen, onClose }: MegaMenuProp
   // Memoize featured links configuration
   const featuredLinks = useMemo<FeaturedLink[]>(
     () => [
-      {
-        href: '/ai-coding-landscape',
-        titleKey: 'aiCodingLandscape',
-        descKey: 'aiCodingLandscapeDesc',
-        marginBottom: 'sm',
-      },
       {
         href: '/open-source-rank',
         titleKey: 'openSourceRank',

src/components/controls/BackToNavigation.tsx

@@ -28,7 +28,7 @@ export function BackToNavigation({ href, title }: BackToNavigationProps) {
 
   return (
     <section className="py-[var(--spacing-lg)] border-b border-[var(--color-border)]">
-      <div className="max-w-[1400px] mx-auto px-[var(--spacing-md)]">
+      <div className="max-w-8xl mx-auto px-[var(--spacing-md)]">
         <div className="grid grid-cols-1 md:grid-cols-3 gap-[var(--spacing-md)]">
           <Link
             href={href}

src/components/controls/Breadcrumb.tsx

@@ -63,7 +63,7 @@ export function Breadcrumb({
     <>
       <JsonLd data={breadcrumbListSchema} />
       <section className="py-[var(--spacing-sm)] bg-[var(--color-hover)] border-b border-[var(--color-border)]">
-        <div className="max-w-[1400px] mx-auto px-[var(--spacing-md)]">
+        <div className="max-w-8xl mx-auto px-[var(--spacing-md)]">
           <nav className="flex items-center gap-[var(--spacing-xs)] text-[0.8125rem]">
             {items.map((item, index) => {
               const isLast = index === items.length - 1

src/components/controls/FilterSortBar.tsx

@@ -85,7 +85,7 @@ export default function FilterSortBar({
       <div className="flex flex-wrap items-center gap-[var(--spacing-sm)]">
         {/* Search Box */}
         {onSearchChange && (
-          <div className="flex items-center gap-[var(--spacing-xs)] flex-1 min-w-[200px] max-w-[300px]">
+          <div className="flex items-center gap-[var(--spacing-xs)] flex-1 min-w-[200px] max-w-2xs">
             <input
               type="text"
               value={searchQuery}

src/components/product/GitHubStarHistory.tsx

@@ -107,7 +107,7 @@ export function GitHubStarHistory({ githubUrl }: GitHubStarHistoryProps) {
   if (loading) {
     return (
       <section className="py-[var(--spacing-lg)] border-b border-[var(--color-border)]">
-        <div className="max-w-[1400px] mx-auto px-[var(--spacing-md)]">
+        <div className="max-w-8xl mx-auto px-[var(--spacing-md)]">
           <div className="border border-[var(--color-border)] p-[var(--spacing-md)]">
             <div className="flex items-center justify-center h-[300px]">
               <p className="text-sm text-[var(--color-text-muted)] animate-pulse">
@@ -126,7 +126,7 @@ export function GitHubStarHistory({ githubUrl }: GitHubStarHistoryProps) {
 
   return (
     <section className="py-[var(--spacing-lg)] border-b border-[var(--color-border)]">
-      <div className="max-w-[1400px] mx-auto px-[var(--spacing-md)]">
+      <div className="max-w-8xl mx-auto px-[var(--spacing-md)]">
         <div className="border border-[var(--color-border)] p-[var(--spacing-md)]">
           {/* Header */}
           <div className="mb-[var(--spacing-md)]">

src/components/product/LinkCard.tsx

@@ -81,11 +81,8 @@ export function LinkCardGrid({
 
   return (
     <section className="py-[var(--spacing-lg)] border-b border-[var(--color-border)]">
-      <div className="max-w-[1400px] mx-auto px-[var(--spacing-md)]">
+      <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)]">
-          <span className="text-[var(--color-text-muted)] font-light mr-[var(--spacing-xs)]">
-            {'//'}
-          </span>
           {title}
         </h2>
 

src/components/product/ProductCommands.tsx

@@ -20,11 +20,8 @@ function CommandSectionItem({ value, label }: Omit<CommandSection, 'labelKey'>)
 
   return (
     <section className="py-[var(--spacing-lg)] border-b border-[var(--color-border)]">
-      <div className="max-w-[1400px] mx-auto px-[var(--spacing-md)]">
+      <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)]">
-          <span className="text-[var(--color-text-muted)] font-light mr-[var(--spacing-xs)]">
-            {'//'}
-          </span>
           {label}
         </h2>