From c2f0a9580202b2e590e666620b25cba8cbe27fd1 Mon Sep 17 00:00:00 2001
From: Waleed <walif6@gmail.com>
Date: Mon, 6 Oct 2025 13:20:12 -0700
Subject: [PATCH] fix(blog): center footer, fix dark mode, fix avatar (#1559)

---
 apps/sim/app/(landing)/building/layout.tsx    |  2 +-
 .../openai-vs-n8n-vs-sim/openai-n8n-sim.tsx   | 89 +++++++++++--------
 .../(landing)/components/footer/footer.tsx    |  6 ++
 apps/sim/app/theme-provider.tsx               |  3 +-
 4 files changed, 59 insertions(+), 41 deletions(-)

diff --git a/apps/sim/app/(landing)/building/layout.tsx b/apps/sim/app/(landing)/building/layout.tsx
index 5ae50a1e9e..bb580d23fd 100644
--- a/apps/sim/app/(landing)/building/layout.tsx
+++ b/apps/sim/app/(landing)/building/layout.tsx
@@ -8,7 +8,7 @@ export default function BuildingLayout({ children }: { children: React.ReactNode
     <>
       <Nav hideAuthButtons={false} variant='landing' />
       <main className='relative'>{children}</main>
-      <Footer />
+      <Footer fullWidth={true} />
     </>
   )
 }
diff --git a/apps/sim/app/(landing)/building/openai-vs-n8n-vs-sim/openai-n8n-sim.tsx b/apps/sim/app/(landing)/building/openai-vs-n8n-vs-sim/openai-n8n-sim.tsx
index c95862a56a..ab74b516e6 100644
--- a/apps/sim/app/(landing)/building/openai-vs-n8n-vs-sim/openai-n8n-sim.tsx
+++ b/apps/sim/app/(landing)/building/openai-vs-n8n-vs-sim/openai-n8n-sim.tsx
@@ -1,4 +1,5 @@
 import Image from 'next/image'
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
 import { soehne } from '@/app/fonts/soehne/soehne'
 
 /**
@@ -139,27 +140,32 @@ export default function OpenAiN8nSim() {
                 OpenAI AgentKit vs n8n vs Sim: AI Agent Workflow Builder Comparison
               </h1>
               <div className='mt-4 hidden items-center justify-end gap-2 sm:flex'>
-                <Image
-                  src='/building/openai-vs-n8n-vs-sim/emir-karabeg.png'
-                  alt='Emir Karabeg'
-                  width={24}
-                  height={24}
-                  className='rounded-full'
-                />
-                <p className='text-[14px] text-gray-600 leading-[1.5] sm:text-[16px]'>
-                  Written by{' '}
-                  <a
-                    href='https://x.com/karabegemir'
-                    target='_blank'
-                    rel='noopener noreferrer author'
-                    className='text-gray-600 hover:text-gray-900'
-                    itemProp='author'
-                    itemScope
-                    itemType='https://schema.org/Person'
-                  >
-                    <span itemProp='name'>Emir Karabeg</span>
-                  </a>
-                </p>
+                <a
+                  href='https://x.com/karabegemir'
+                  target='_blank'
+                  rel='noopener noreferrer author'
+                  aria-label='@karabegemir on X'
+                  className='block'
+                >
+                  <Avatar className='size-6'>
+                    <AvatarImage
+                      src='/building/openai-vs-n8n-vs-sim/emir-karabeg.png'
+                      alt='Emir Karabeg'
+                    />
+                    <AvatarFallback>EK</AvatarFallback>
+                  </Avatar>
+                </a>
+                <a
+                  href='https://x.com/karabegemir'
+                  target='_blank'
+                  rel='noopener noreferrer author'
+                  className='text-[14px] text-gray-600 leading-[1.5] hover:text-gray-900 sm:text-[16px]'
+                  itemProp='author'
+                  itemScope
+                  itemType='https://schema.org/Person'
+                >
+                  <span itemProp='name'>Emir Karabeg</span>
+                </a>
               </div>
             </div>
           </div>
@@ -180,24 +186,29 @@ export default function OpenAiN8nSim() {
               </time>
               <meta itemProp='dateModified' content='2025-10-06T00:00:00.000Z' />
               <div className='flex items-center gap-2 sm:hidden'>
-                <Image
-                  src='/building/openai-vs-n8n-vs-sim/emir-karabeg.png'
-                  alt='Emir Karabeg'
-                  width={24}
-                  height={24}
-                  className='rounded-full'
-                />
-                <p className='text-[14px] text-gray-600 leading-[1.5]'>
-                  Written by{' '}
-                  <a
-                    href='https://x.com/karabegemir'
-                    target='_blank'
-                    rel='noopener noreferrer author'
-                    className='text-gray-600 hover:text-gray-900'
-                  >
-                    Emir Karabeg
-                  </a>
-                </p>
+                <a
+                  href='https://x.com/karabegemir'
+                  target='_blank'
+                  rel='noopener noreferrer author'
+                  aria-label='@karabegemir on X'
+                  className='block'
+                >
+                  <Avatar className='size-6'>
+                    <AvatarImage
+                      src='/building/openai-vs-n8n-vs-sim/emir-karabeg.png'
+                      alt='Emir Karabeg'
+                    />
+                    <AvatarFallback>EK</AvatarFallback>
+                  </Avatar>
+                </a>
+                <a
+                  href='https://x.com/karabegemir'
+                  target='_blank'
+                  rel='noopener noreferrer author'
+                  className='text-[14px] text-gray-600 leading-[1.5] hover:text-gray-900'
+                >
+                  Emir Karabeg
+                </a>
               </div>
             </div>
 
diff --git a/apps/sim/app/(landing)/components/footer/footer.tsx b/apps/sim/app/(landing)/components/footer/footer.tsx
index 67a45c6283..abe43420c7 100644
--- a/apps/sim/app/(landing)/components/footer/footer.tsx
+++ b/apps/sim/app/(landing)/components/footer/footer.tsx
@@ -215,6 +215,12 @@ export default function Footer({ fullWidth = false }: FooterProps) {
               >
                 Enterprise
               </Link>
+              <Link
+                href='/building'
+                className='text-[14px] text-muted-foreground transition-colors hover:text-foreground'
+              >
+                Building
+              </Link>
               <Link
                 href='/changelog'
                 className='text-[14px] text-muted-foreground transition-colors hover:text-foreground'
diff --git a/apps/sim/app/theme-provider.tsx b/apps/sim/app/theme-provider.tsx
index 9221c452ee..d3f2dcf11b 100644
--- a/apps/sim/app/theme-provider.tsx
+++ b/apps/sim/app/theme-provider.tsx
@@ -19,7 +19,8 @@ export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
     pathname.startsWith('/invite') ||
     pathname.startsWith('/verify') ||
     pathname.startsWith('/changelog') ||
-    pathname.startsWith('/chat')
+    pathname.startsWith('/chat') ||
+    pathname.startsWith('/building')
       ? 'light'
       : undefined