1:"$Sreact.fragment"
2:I[93963,["/_next/static/chunks/8d73848dfbbaba88.js","/_next/static/chunks/b303d3c3f1ed68f0.js","/_next/static/chunks/5f7ff8d4aca97a9b.js"],"Header"]
3:I[22016,["/_next/static/chunks/8d73848dfbbaba88.js","/_next/static/chunks/b303d3c3f1ed68f0.js","/_next/static/chunks/5f7ff8d4aca97a9b.js"],""]
b:I[85437,["/_next/static/chunks/8d73848dfbbaba88.js","/_next/static/chunks/b303d3c3f1ed68f0.js","/_next/static/chunks/5f7ff8d4aca97a9b.js"],"Image"]
c:I[54488,["/_next/static/chunks/8d73848dfbbaba88.js","/_next/static/chunks/b303d3c3f1ed68f0.js","/_next/static/chunks/5f7ff8d4aca97a9b.js"],"TableOfContents"]
15:I[54231,["/_next/static/chunks/8d73848dfbbaba88.js","/_next/static/chunks/b303d3c3f1ed68f0.js","/_next/static/chunks/5f7ff8d4aca97a9b.js"],"Footer"]
16:I[97367,["/_next/static/chunks/ff1a16fafef87110.js","/_next/static/chunks/7340adf74ff47ec0.js"],"OutletBoundary"]
17:"$Sreact.suspense"
19:I[96820,["/_next/static/chunks/8d73848dfbbaba88.js","/_next/static/chunks/b303d3c3f1ed68f0.js","/_next/static/chunks/5f7ff8d4aca97a9b.js"],"CommentSection"]
0:{"buildId":"I78lrwYjY2SIsF00Y0JfO","rsc":["$","$1","c",{"children":[["$","main",null,{"className":"bg-background min-h-screen","children":[["$","$L2",null,{}],["$","section",null,{"className":"relative w-full pt-24 pb-10 px-[20px] md:px-[50px] border-b border-zinc-100 dark:border-zinc-900 bg-background","children":["$","div",null,{"className":"max-w-[1400px] mx-auto grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-20 items-center","children":[["$","div",null,{"className":"flex flex-col items-start text-left space-y-8","children":[["$","$L3",null,{"href":"/blog","className":"inline-flex items-center gap-2 text-sm text-zinc-500 hover:text-foreground transition-colors group","children":[["$","div",null,{"className":"flex items-center justify-center p-1 rounded-md bg-zinc-100 dark:bg-zinc-800 transition-colors group-hover:bg-zinc-200 dark:group-hover:bg-zinc-700","children":["$","svg",null,{"xmlns":"http://www.w3.org/2000/svg","width":14,"height":14,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-arrow-left group-hover:-translate-x-0.5 transition-transform","aria-hidden":"true","children":[["$","path","1l729n",{"d":"m12 19-7-7 7-7"}],["$","path","x3x0zl",{"d":"M19 12H5"}],"$undefined"]}]}],["$","span",null,{"className":"font-medium","children":"Back to Insights"}]]}],["$","div",null,{"className":"space-y-4","children":[["$","div",null,{"children":["$","span",null,{"className":"inline-flex items-center justify-center px-4 py-1 rounded-md bg-blue-500/10 text-blue-600 dark:text-blue-400 text-sm font-semibold uppercase tracking-wider","children":"Design"}]}],["$","h1",null,{"className":"text-3xl md:text-4xl lg:text-5xl mb-4 font-bold text-foreground leading-tight w-full mb-0","children":"Building Scalable Design Systems in React"}],["$","p",null,{"className":"text-md text-zinc-600 dark:text-zinc-400 mb-0 leading-relaxed max-w-7xl","children":"Consistency is key to a premium user experience. Learn how we structure our component libraries to ensure visual harmony and rapid development velocity across multiple products."}]]}],["$","div",null,{"className":"flex items-center flex-wrap gap-4 md:gap-10 w-full text-sm md:text-md overflow-x-auto scrollbar-hide","children":[["$","div",null,{"className":"flex items-center gap-2","children":[["$","svg",null,{"xmlns":"http://www.w3.org/2000/svg","width":16,"height":16,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-calendar text-zinc-500","aria-hidden":"true","children":[["$","path","1cmpym",{"d":"M8 2v4"}],["$","path","4m81vk",{"d":"M16 2v4"}],["$","rect","1hopcy",{"width":"18","height":"18","x":"3","y":"4","rx":"2"}],["$","path","8toen8",{"d":"M3 10h18"}],"$undefined"]}],["$","span",null,{"className":"text-zinc-500","children":"Date:"}],["$","span",null,{"className":"font-medium text-foreground","children":"December 05, 2024"}]]}],["$","div",null,{"className":"flex items-center gap-2","children":[["$","svg",null,{"xmlns":"http://www.w3.org/2000/svg","width":16,"height":16,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-clock text-zinc-500","aria-hidden":"true","children":[["$","path","mmk7yg",{"d":"M12 6v6l4 2"}],["$","circle","1mglay",{"cx":"12","cy":"12","r":"10"}],"$undefined"]}],["$","span",null,{"className":"text-zinc-500","children":"Read Time:"}],["$","span",null,{"className":"font-medium text-foreground","children":"6 min read"}]]}],["$","div",null,{"className":"flex items-center gap-2","children":[["$","svg",null,{"xmlns":"http://www.w3.org/2000/svg","width":16,"height":16,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-user text-zinc-500","aria-hidden":"true","children":[["$","path","975kel",{"d":"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"}],["$","circle","17ys0d",{"cx":"12","cy":"7","r":"4"}],"$undefined"]}],["$","span",null,{"className":"text-zinc-500","children":"Author:"}],["$","span",null,{"className":"font-medium text-foreground","children":"Ishwar Mule"}]]}]]}]]}],"$L4"]}]}],"$L5","$L6","$L7"]}],["$L8","$L9"],"$La"]}],"loading":null,"isPartial":false}
4:["$","div",null,{"className":"w-full relative","children":["$","div",null,{"className":"p-1.5 rounded-[2.5rem] bg-white/70 dark:bg-black/70 backdrop-blur-xl shadow-[0_4px_16px_rgba(0,0,0,0.1)] border border-white/20 dark:border-white/10 ring-1 ring-black/5 dark:ring-white/5","children":["$","div",null,{"className":"relative h-[350px] md:h-[450px] rounded-[2rem] overflow-hidden bg-white dark:bg-black border border-zinc-200 dark:border-zinc-800","children":[["$","$Lb",null,{"src":"/blog/brand-identity.png","alt":"Building Scalable Design Systems in React","fill":true,"className":"object-cover","priority":true}],["$","div",null,{"className":"absolute inset-0 bg-gradient-to-tr from-blue-600/10 to-transparent mix-blend-overlay"}]]}]}]}]
d:Tb2a,
      <h2>Why Most Design Systems Fail</h2>
      <p>A design system is more than just a Figma file or a library of React components. It is the shared language between designers and developers. However, most systems fall apart because they prioritize <em>artifacts</em> over <em>adoption</em>.</p>
      
      <p>True scalability comes when your design system treats code as the source of truth, not a downstream deliverable. At Domain Expansion, we use a "Code-First" approach that drastically reduces the drift between design intent and production reality.</p>

      <h3>Core Principles of a Scalable System</h3>
      <ul>
        <li><strong>Atomic Design:</strong> Breaking down UIs into atoms, molecules, and organisms to maximize reusability.</li>
        <li><strong>Tokenization:</strong> Using design tokens (variables) for colors, spacing, and typography to enable seamless theming (like Dark Mode) without code changes.</li>
        <li><strong>Strict vs. Loose Typing:</strong> Leveraging TypeScript to enforce usage patterns while allowing enough flexibility for innovation.</li>
      </ul>

      <div class="bg-purple-50 dark:bg-purple-900/20 p-6 rounded-lg my-8 border-l-4 border-purple-500">
        <h4 class="text-lg font-semibold mb-2">Infographic: The Token Pipeline</h4>
        <img src="/blog/infographics/token-pipeline.png" alt="Design Token Pipeline Infographic" class="w-full h-auto rounded-lg shadow-md" />
      </div>

      <h3>Component Architecture in React</h3>
      <p>We structure our component API surfaces to be "Composable by Default." avoiding the "Prop Drilling" hell that plagues many legacy codebases.</p>
      
      <h4>The "Commpon" Pattern</h4>
      <p>Instead of a massive configuration object, use sub-components:</p>
      <pre><code class="language-tsx">
// Avoid this:
&lt;Card title="Hello" content="World" footerButtonAction={...} /&gt;

// Do this:
&lt;Card&gt;
  &lt;Card.Header&gt;Hello&lt;/Card.Header&gt;
  &lt;Card.Body&gt;World&lt;/Card.Body&gt;
  &lt;Card.Footer&gt;
    &lt;Button&gt;Action&lt;/Button&gt;
  &lt;/Card.Footer&gt;
&lt;/Card&gt;
      </code></pre>

      <h3>Documentation as a Product</h3>
      <p>Your design system is a product, and your developers are its customers. We use tools like Storybook not just for development, but as living documentation that allows non-technical stakeholders to "play" with the UI pieces.</p>

      <h3>Measuring Success</h3>
      <p>How do you know if it's working? We track:</p>
      <ol>
        <li><strong>Detach Rate:</strong> How often are designers detaching instances in Figma?</li>
        <li><strong>Adoption Rate:</strong> What percentage of the codebase imports from <code>@system/ui</code>?</li>
        <li><strong>Velocity:</strong> Time-to-ship for standard UI features (Login, Settings, etc.).</li>
      </ol>
    5:["$","section",null,{"className":"px-[20px] md:px-[50px] pb-24 pt-10 bg-background","children":["$","div",null,{"className":"max-w-[1400px] mx-auto grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-20","children":[["$","div",null,{"className":"lg:col-span-8 flex flex-col","children":[["$","div",null,{"className":"lg:hidden mb-8","children":["$","$Lc",null,{}]}],["$","article",null,{"className":"prose prose-lg dark:prose-invert prose-headings:font-bold prose-blue max-w-none","children":["$","div",null,{"dangerouslySetInnerHTML":{"__html":"$d"}}]}],"$Le"]}],"$Lf"]}]}]
6:["$","section",null,{"className":"w-full py-24 px-[20px] md:px-[50px] bg-zinc-50 dark:bg-black/50 border-t border-zinc-200 dark:border-zinc-900","children":["$","div",null,{"className":"max-w-[1400px] mx-auto","children":[["$","div",null,{"className":"flex flex-col md:flex-row items-end justify-between mb-12 gap-6","children":[["$","div",null,{"className":"flex flex-col gap-4","children":[["$","span",null,{"className":"text-blue-600 font-semibold uppercase tracking-widest text-sm","children":"Read More"}],["$","h2",null,{"className":"text-3xl md:text-5xl font-bold text-foreground","children":"Related Insights"}]]}],["$","$L3",null,{"href":"/blog","children":["$","button",null,{"className":"px-8 py-3 rounded-md bg-zinc-900 dark:bg-white text-white dark:text-black font-bold hover:opacity-90 transition-opacity flex items-center gap-2","children":["View All Blogs ",["$","svg",null,{"xmlns":"http://www.w3.org/2000/svg","width":18,"height":18,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-arrow-right","aria-hidden":"true","children":[["$","path","1ays0h",{"d":"M5 12h14"}],["$","path","xquz4c",{"d":"m12 5 7 7-7 7"}],"$undefined"]}]]}]}]]}],["$","div",null,{"className":"grid grid-cols-1 md:grid-cols-3 gap-8","children":[["$","$L3","web3-infrastructure-scaling",{"href":"/blog/web3-infrastructure-scaling","className":"group flex flex-col h-full bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-200 dark:border-zinc-800 overflow-hidden hover:shadow-xl hover:-translate-y-1 transition-all duration-300","children":[["$","div",null,{"className":"relative aspect-[16/10] w-full overflow-hidden bg-zinc-100 dark:bg-zinc-800","children":[["$","$Lb",null,{"src":"/blog/web3-scale.png","alt":"Scaling Web3 Infrastructure for Mass Adoption","fill":true,"className":"object-cover transition-transform duration-700 group-hover:scale-110"}],["$","div",null,{"className":"absolute inset-0 bg-gradient-to-tr from-zinc-200/20 to-transparent dark:from-zinc-900/40 mix-blend-overlay"}],["$","div",null,{"className":"absolute top-4 left-4","children":["$","span",null,{"className":"px-3 py-1 bg-white/90 dark:bg-black/80 backdrop-blur text-[10px] font-bold uppercase tracking-wider rounded-md","children":"Web3"}]}]]}],["$","div",null,{"className":"flex-1 flex flex-col p-6","children":[["$","div",null,{"className":"flex items-center gap-2 text-xs font-semibold text-zinc-500 mb-4","children":["$","span",null,{"children":"November 12, 2024"}]}],["$","h3",null,{"className":"text-xl font-bold text-foreground mb-3 leading-snug group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors","children":"Scaling Web3 Infrastructure for Mass Adoption"}],["$","p",null,{"className":"text-sm text-zinc-600 dark:text-zinc-400 leading-relaxed line-clamp-2 mb-6","children":"Blockchain technology is ready for the mainstream, but infrastructure bottlenecks remain. We explore the layer-2 solutions and sharding techniques that are paving the way for the next billion users."}],["$","div",null,{"className":"mt-auto flex items-center text-sm font-bold text-blue-600 dark:text-blue-400 gap-2","children":["Read Article ",["$","svg",null,{"xmlns":"http://www.w3.org/2000/svg","width":14,"height":14,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-arrow-right group-hover:translate-x-1 transition-transform","aria-hidden":"true","children":[["$","path","1ays0h",{"d":"M5 12h14"}],["$","path","xquz4c",{"d":"m12 5 7 7-7 7"}],"$undefined"]}]]}]]}]]}],["$","$L3","design-systems-react",{"href":"/blog/design-systems-react","className":"group flex flex-col h-full bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-200 dark:border-zinc-800 overflow-hidden hover:shadow-xl hover:-translate-y-1 transition-all duration-300","children":[["$","div",null,{"className":"relative aspect-[16/10] w-full overflow-hidden bg-zinc-100 dark:bg-zinc-800","children":["$L10","$L11","$L12"]}],"$L13"]}],"$L14"]}]]}]}]
7:["$","$L15",null,{}]
8:["$","script","script-0",{"src":"/_next/static/chunks/b303d3c3f1ed68f0.js","async":true}]
9:["$","script","script-1",{"src":"/_next/static/chunks/5f7ff8d4aca97a9b.js","async":true}]
a:["$","$L16",null,{"children":["$","$17",null,{"name":"Next.MetadataOutlet","children":"$@18"}]}]
e:["$","$L19",null,{}]
f:["$","aside",null,{"className":"lg:col-span-4 space-y-12","children":["$","div",null,{"className":"sticky top-20 space-y-12","children":[["$","div",null,{"className":"hidden lg:block","children":["$","$Lc",null,{}]}],["$","div",null,{"className":"p-8 rounded-3xl bg-zinc-50 dark:bg-zinc-900/50 border border-zinc-200 dark:border-zinc-800","children":[["$","div",null,{"className":"flex items-center gap-4 mb-4","children":[["$","div",null,{"className":"relative w-16 h-16 rounded-full overflow-hidden bg-zinc-200 dark:bg-zinc-800 shadow-inner","children":["$","$Lb",null,{"src":"/authors/ishwar.jpg","alt":"Ishwar Mule","fill":true,"className":"object-cover"}]}],["$","div",null,{"className":"flex flex-col justify-center","children":[["$","h3",null,{"className":"text-lg font-bold text-foreground leading-none mb-2","children":"Ishwar Mule"}],["$","p",null,{"className":"text-xs font-semibold text-blue-600 dark:text-blue-400 uppercase tracking-wide leading-none","children":"Founder & CEO"}]]}]]}],["$","p",null,{"className":"text-sm text-zinc-600 dark:text-zinc-400 leading-relaxed mb-6","children":"Passionate about building scalable digital products and helping businesses grow through technology. Expert in Next.js, AI integration, and modern web architecture."}],["$","div",null,{"className":"flex gap-2","children":[["$","$L3",null,{"href":"https://linkedin.com/in/ishwarmule","className":"relative flex items-center justify-center px-3 py-2 rounded-md transition-all duration-300 ease-out group bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 text-zinc-600 dark:text-zinc-400 hover:text-blue-600 hover:border-blue-200 dark:hover:border-blue-900","children":[["$","svg",null,{"xmlns":"http://www.w3.org/2000/svg","width":16,"height":16,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-linkedin flex-shrink-0","aria-hidden":"true","children":[["$","path","c2jq9f",{"d":"M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"}],["$","rect","mk3on5",{"width":"4","height":"12","x":"2","y":"9"}],["$","circle","bt5ra8",{"cx":"4","cy":"4","r":"2"}],"$undefined"]}],["$","span",null,{"className":"max-w-0 overflow-hidden group-hover:max-w-32 transition-[max-width,opacity] duration-300 ease-out opacity-0 group-hover:opacity-100 whitespace-nowrap","children":["$","span",null,{"className":"pl-2 pr-1 text-xs font-medium","children":"LinkedIn"}]}]]}],["$","$L3",null,{"href":"mailto:ishwar.mule007@gmail.com","className":"relative flex items-center justify-center px-3 py-2 rounded-md transition-all duration-300 ease-out group bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 text-zinc-600 dark:text-zinc-400 hover:text-red-500 hover:border-red-200 dark:hover:border-red-900","children":[["$","svg",null,{"xmlns":"http://www.w3.org/2000/svg","width":16,"height":16,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-mail flex-shrink-0","aria-hidden":"true","children":[["$","path","132q7q",{"d":"m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7"}],["$","rect","izxlao",{"x":"2","y":"4","width":"20","height":"16","rx":"2"}],"$undefined"]}],["$","span",null,{"className":"max-w-0 overflow-hidden group-hover:max-w-32 transition-[max-width,opacity] duration-300 ease-out opacity-0 group-hover:opacity-100 whitespace-nowrap","children":["$","span",null,{"className":"pl-2 pr-1 text-xs font-medium","children":"Email"}]}]]}],["$","$L3",null,{"href":"https://wa.me/910000000000","className":"relative flex items-center justify-center px-3 py-2 rounded-md transition-all duration-300 ease-out group bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 text-zinc-600 dark:text-zinc-400 hover:text-green-500 hover:border-green-200 dark:hover:border-green-900","children":[["$","svg",null,{"xmlns":"http://www.w3.org/2000/svg","width":16,"height":16,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-smartphone flex-shrink-0","aria-hidden":"true","children":["$L1a","$L1b","$undefined"]}],"$L1c"]}]]}]]}],"$L1d","$L1e"]}]}]
10:["$","$Lb",null,{"src":"/blog/brand-identity.png","alt":"Building Scalable Design Systems in React","fill":true,"className":"object-cover transition-transform duration-700 group-hover:scale-110"}]
11:["$","div",null,{"className":"absolute inset-0 bg-gradient-to-tr from-zinc-200/20 to-transparent dark:from-zinc-900/40 mix-blend-overlay"}]
12:["$","div",null,{"className":"absolute top-4 left-4","children":["$","span",null,{"className":"px-3 py-1 bg-white/90 dark:bg-black/80 backdrop-blur text-[10px] font-bold uppercase tracking-wider rounded-md","children":"Design"}]}]
13:["$","div",null,{"className":"flex-1 flex flex-col p-6","children":[["$","div",null,{"className":"flex items-center gap-2 text-xs font-semibold text-zinc-500 mb-4","children":["$","span",null,{"children":"December 05, 2024"}]}],["$","h3",null,{"className":"text-xl font-bold text-foreground mb-3 leading-snug group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors","children":"Building Scalable Design Systems in React"}],["$","p",null,{"className":"text-sm text-zinc-600 dark:text-zinc-400 leading-relaxed line-clamp-2 mb-6","children":"Consistency is key to a premium user experience. Learn how we structure our component libraries to ensure visual harmony and rapid development velocity across multiple products."}],["$","div",null,{"className":"mt-auto flex items-center text-sm font-bold text-blue-600 dark:text-blue-400 gap-2","children":["Read Article ",["$","svg",null,{"xmlns":"http://www.w3.org/2000/svg","width":14,"height":14,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-arrow-right group-hover:translate-x-1 transition-transform","aria-hidden":"true","children":[["$","path","1ays0h",{"d":"M5 12h14"}],["$","path","xquz4c",{"d":"m12 5 7 7-7 7"}],"$undefined"]}]]}]]}]
14:["$","$L3","nextjs-performance-optimization",{"href":"/blog/nextjs-performance-optimization","className":"group flex flex-col h-full bg-white dark:bg-zinc-900 rounded-2xl border border-zinc-200 dark:border-zinc-800 overflow-hidden hover:shadow-xl hover:-translate-y-1 transition-all duration-300","children":[["$","div",null,{"className":"relative aspect-[16/10] w-full overflow-hidden bg-zinc-100 dark:bg-zinc-800","children":[["$","$Lb",null,{"src":"/blog/performance.png","alt":"Advanced Performance Optimization in Next.js 15","fill":true,"className":"object-cover transition-transform duration-700 group-hover:scale-110"}],["$","div",null,{"className":"absolute inset-0 bg-gradient-to-tr from-zinc-200/20 to-transparent dark:from-zinc-900/40 mix-blend-overlay"}],["$","div",null,{"className":"absolute top-4 left-4","children":["$","span",null,{"className":"px-3 py-1 bg-white/90 dark:bg-black/80 backdrop-blur text-[10px] font-bold uppercase tracking-wider rounded-md","children":"Engineering"}]}]]}],["$","div",null,{"className":"flex-1 flex flex-col p-6","children":[["$","div",null,{"className":"flex items-center gap-2 text-xs font-semibold text-zinc-500 mb-4","children":["$","span",null,{"children":"December 18, 2024"}]}],["$","h3",null,{"className":"text-xl font-bold text-foreground mb-3 leading-snug group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors","children":"Advanced Performance Optimization in Next.js 15"}],["$","p",null,{"className":"text-sm text-zinc-600 dark:text-zinc-400 leading-relaxed line-clamp-2 mb-6","children":"Speed is a feature. We dive deep into React Server Components, streaming hydration, and edge caching strategies to deliver sub-second load times for complex web applications."}],["$","div",null,{"className":"mt-auto flex items-center text-sm font-bold text-blue-600 dark:text-blue-400 gap-2","children":["Read Article ",["$","svg",null,{"xmlns":"http://www.w3.org/2000/svg","width":14,"height":14,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-arrow-right group-hover:translate-x-1 transition-transform","aria-hidden":"true","children":[["$","path","1ays0h",{"d":"M5 12h14"}],["$","path","xquz4c",{"d":"m12 5 7 7-7 7"}],"$undefined"]}]]}]]}]]}]
18:null
1a:["$","rect","1yt0o3",{"width":"14","height":"20","x":"5","y":"2","rx":"2","ry":"2"}]
1b:["$","path","mhygvu",{"d":"M12 18h.01"}]
1c:["$","span",null,{"className":"max-w-0 overflow-hidden group-hover:max-w-32 transition-[max-width,opacity] duration-300 ease-out opacity-0 group-hover:opacity-100 whitespace-nowrap","children":["$","span",null,{"className":"pl-2 pr-1 text-xs font-medium","children":"WhatsApp"}]}]
1d:["$","div",null,{"className":"p-8 rounded-3xl bg-white dark:bg-black border border-zinc-200 dark:border-zinc-800","children":[["$","h4",null,{"className":"text-sm font-bold text-foreground uppercase tracking-wider mb-6","children":"Related Topics"}],["$","div",null,{"className":"flex flex-wrap gap-2","children":[["$","span","React",{"className":"px-3 py-1.5 rounded-md text-xs font-semibold bg-zinc-100 dark:bg-zinc-900 text-zinc-600 dark:text-zinc-400 border border-zinc-200 dark:border-zinc-800","children":"React"}],["$","span","UI/UX",{"className":"px-3 py-1.5 rounded-md text-xs font-semibold bg-zinc-100 dark:bg-zinc-900 text-zinc-600 dark:text-zinc-400 border border-zinc-200 dark:border-zinc-800","children":"UI/UX"}],["$","span","Design Systems",{"className":"px-3 py-1.5 rounded-md text-xs font-semibold bg-zinc-100 dark:bg-zinc-900 text-zinc-600 dark:text-zinc-400 border border-zinc-200 dark:border-zinc-800","children":"Design Systems"}],["$","span","Frontend",{"className":"px-3 py-1.5 rounded-md text-xs font-semibold bg-zinc-100 dark:bg-zinc-900 text-zinc-600 dark:text-zinc-400 border border-zinc-200 dark:border-zinc-800","children":"Frontend"}]]}]]}]
1e:["$","div",null,{"children":[["$","h4",null,{"className":"text-sm font-bold text-foreground uppercase tracking-wider mb-4","children":"Share this article"}],["$","div",null,{"className":"flex gap-3","children":[["$","button",null,{"className":"flex items-center gap-2 px-4 py-2 rounded-md bg-blue-600 text-white text-sm font-medium hover:bg-blue-700 transition-colors shadow-sm","children":[["$","svg",null,{"xmlns":"http://www.w3.org/2000/svg","width":16,"height":16,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-twitter","aria-hidden":"true","children":[["$","path","pff0z6",{"d":"M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z"}],"$undefined"]}]," Tweet"]}],["$","button",null,{"className":"flex items-center gap-2 px-4 py-2 rounded-md bg-blue-800 text-white text-sm font-medium hover:bg-blue-900 transition-colors shadow-sm","children":[["$","svg",null,{"xmlns":"http://www.w3.org/2000/svg","width":16,"height":16,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-facebook","aria-hidden":"true","children":[["$","path","1jg4f8",{"d":"M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"}],"$undefined"]}]," Share"]}]]}]]}]