chore: update designs

Author: adithyaakrishna

apps/sim/app/(landing)/blog/[slug]/article-sidebar.tsx

@@ -8,8 +8,10 @@ export function ArticleSidebar({ headings }: ArticleSidebarProps) {
   if (headings.length === 0) return null
 
   return (
-    <aside className='mr-2 hidden w-full shrink-0 self-start xl:sticky xl:top-[76px] xl:block xl:w-72 xl:pt-16'>
-      <TableOfContents headings={headings} />
+    <aside className='hidden w-full shrink-0 self-start xl:sticky xl:top-[76px] xl:col-start-3 xl:block xl:w-72 xl:pt-16'>
+      <div className='xl:max-h-[calc(100vh-140px)] xl:overflow-auto xl:pr-2'>
+        <TableOfContents headings={headings} />
+      </div>
     </aside>
   )
 }

apps/sim/app/(landing)/blog/[slug]/page.tsx

@@ -54,8 +54,9 @@ export default async function Page({ params }: { params: Promise<{ slug: string
         dangerouslySetInnerHTML={{ __html: JSON.stringify(breadcrumbLd) }}
       />
 
-      <div className='mx-auto flex w-full max-w-[1500px] flex-col items-start gap-8 px-4 pt-10 pb-24 sm:px-6 sm:pt-12 lg:px-8 lg:pt-16 xl:flex-row xl:gap-12'>
-        <div data-blog-main-content className='w-full min-w-0 max-w-5xl flex-1 lg:px-4'>
+      <div className='mx-auto flex w-full max-w-[1700px] xl:max-w-[1950px] flex-col items-start gap-8 px-4 pt-10 pb-24 sm:px-6 sm:pt-12 lg:px-16 lg:pt-16 xl:grid xl:grid-cols-[9rem_minmax(0,1fr)_14rem] xl:items-start xl:gap-8'>
+        <div className='hidden xl:block' />
+        <div data-blog-main-content className='w-full min-w-0 max-w-5xl xl:col-start-2 xl:mx-auto'>
           <Link
             href='/blog'
             className='group mb-8 inline-flex items-center gap-2 border border-[#2A2A2A] bg-[#232323] px-4 py-2 font-season text-[#999] text-[11px] uppercase tracking-widest transition-colors hover:text-[#ECECEC]'
@@ -131,7 +132,7 @@ export default async function Page({ params }: { params: Promise<{ slug: string
             <meta itemProp='dateModified' content={post.updated ?? post.date} />
           </header>
           <div itemProp='articleBody'>
-            <div className='prose-studio prose prose-lg prose-invert max-w-none'>
+            <div className='prose-studio prose prose-invert max-w-none'>
               <Article />
               {post.faq && post.faq.length > 0 ? <FAQ items={post.faq} /> : null}
             </div>

apps/sim/app/(landing)/blog/[slug]/prose-studio.css

@@ -2,26 +2,29 @@
   border-bottom: 1px solid #2a2a2a;
   padding-bottom: 1.5rem;
   font-weight: 500;
-  font-size: 30px;
+  font-size: 32px;
+  line-height: 1.15;
   color: #ececec;
   margin-top: 1.5rem !important;
   margin-bottom: 1.5rem;
-  letter-spacing: -0.025em;
+  letter-spacing: -0.02em;
 }
 
 .prose-studio h3 {
   font-weight: 500;
-  font-size: 24px;
+  font-size: 22px;
+  line-height: 1.2;
   color: #ececec;
   margin-top: 1.5rem;
   margin-bottom: 0.75rem;
-  letter-spacing: -0.015em;
+  letter-spacing: -0.01em;
 }
 
 .prose-studio p {
   margin-bottom: 1.5rem;
-  line-height: 1.8;
-  font-size: 1.05rem;
+  line-height: 1.7;
+  font-size: 15px;
+  letter-spacing: 0.02em;
   color: #cccccc;
 }
 
@@ -96,6 +99,9 @@
 .prose-studio li {
   color: #cccccc;
   margin-bottom: 0.5rem;
+  font-size: 15px;
+  line-height: 1.7;
+  letter-spacing: 0.02em;
 }
 
 .prose-studio li::marker {

apps/sim/app/(landing)/blog/[slug]/table-of-contents.tsx

@@ -506,7 +506,7 @@ export function TableOfContents({ headings }: TableOfContentsProps) {
     <TocContext.Provider value={tocCtx}>
       <nav
         ref={navRef}
-        className='flex w-[250px] flex-col'
+        className='group/toc flex w-[250px] flex-col'
         aria-label='On this page'
         onPointerMove={onPointerMove}
         onPointerLeave={onPointerLeave}
@@ -548,7 +548,7 @@ function TocOverline() {
           className='h-px w-8 rounded-full bg-[#484848] transition-colors duration-150 ease-out group-hover:bg-[#5D5D5D]'
         />
       </div>
-      <span className='font-medium font-season text-[#FFFFFF] text-[10px] uppercase leading-none tracking-[0.28em] transition-colors duration-150 ease-out group-hover:text-[#A1A1A1]'>
+      <span className='font-medium font-season text-[#FFFFFF] text-[10px] uppercase leading-none tracking-[0.28em] opacity-0 transition-[color,opacity] duration-150 ease-out group-hover:text-[#A1A1A1] group-hover/toc:opacity-100'>
         On this page
       </span>
     </button>
@@ -732,7 +732,7 @@ function NavLabel({
   return (
     <p
       className={clsx(
-        'max-w-[184px] truncate font-medium font-season text-[13px] transition-[color,filter,opacity] duration-150 ease-out',
+        'max-w-[184px] truncate font-medium font-season text-[13px] opacity-0 transition-[color,filter,opacity] duration-150 ease-out group-hover/toc:opacity-100',
         active ? 'text-[#ECECEC]' : 'text-[#777] group-hover/item:text-[#ECECEC]',
         !active && !hovered && 'nav-label-softenable'
       )}

apps/sim/app/(landing)/blog/studio-content.tsx

@@ -3,7 +3,6 @@
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import { StudioHero } from '@/app/(landing)/blog/hero'
 import { FeaturedGrid, PostGrid } from '@/app/(landing)/blog/post-grid'
-import { BlogStudioSidebar } from '@/app/(landing)/blog/studio-sidebar-client'
 import { CATEGORIES, getCategoryById, getPrimaryCategory } from '@/app/(landing)/blog/tag-colors'
 
 interface SerializedPost {
@@ -129,23 +128,16 @@ export function StudioContent({ posts, initialTag, initialQuery }: StudioContent
   }, [syncUrl])
 
   return (
-    <div className='flex min-h-0 flex-1 flex-col overflow-x-clip px-4 sm:px-6 lg:flex-row lg:px-12'>
-      <BlogStudioSidebar
-        posts={posts}
-        activeTag={activeTag}
-        query={query}
-        onChangeQuery={handleSearch}
-        onSelectTag={handleCategorySelect}
-      />
+    <div className='flex min-h-0 flex-1 flex-col overflow-x-clip px-4 sm:px-6 lg:px-12'>
 
       <main className='relative min-w-0 flex-1'>
         <div className='flex flex-col'>
           {showHero && (
-            <div className='-mr-4 sm:-mr-6 lg:-mr-12'>
+            <div className='-mx-4 sm:-mx-6 lg:-mx-12'>
               <StudioHero />
             </div>
           )}
-          <div className='mx-auto w-full max-w-5xl py-12 lg:mr-8'>
+          <div className='mx-auto w-full max-w-5xl py-12'>
             {lowerQ && (
               <div className='mb-8 flex items-center gap-3'>
                 <span className='font-season text-[#666] text-[10px] uppercase tracking-widest'>