From 53ac2657e1e45e5ba77f808b9225ec1cf676d8b0 Mon Sep 17 00:00:00 2001
From: Waleed Latif <walif6@gmail.com>
Date: Sun, 29 Mar 2026 13:01:30 -0700
Subject: [PATCH 1/4] improvement(landing): lighthouse performance and
 accessibility fixes

---
 .../collaboration/collaboration.tsx           |  1 -
 .../components/access-control-panel.tsx       | 24 +++++++++++++++++--
 .../components/audit-log-preview.tsx          |  4 ++--
 .../components/enterprise/enterprise.tsx      | 14 +++++------
 .../(home)/components/features/features.tsx   |  1 -
 .../(home)/components/footer/footer-cta.tsx   |  1 +
 apps/sim/app/layout.tsx                       |  1 +
 apps/sim/app/page.tsx                         |  2 +-
 8 files changed, 34 insertions(+), 14 deletions(-)

diff --git a/apps/sim/app/(home)/components/collaboration/collaboration.tsx b/apps/sim/app/(home)/components/collaboration/collaboration.tsx
index 302bcc05904..02bee46ab15 100644
--- a/apps/sim/app/(home)/components/collaboration/collaboration.tsx
+++ b/apps/sim/app/(home)/components/collaboration/collaboration.tsx
@@ -288,7 +288,6 @@ export default function Collaboration() {
                 width={876}
                 height={480}
                 className='h-full w-auto object-left md:min-w-[100vw]'
-                priority
               />
             </div>
             <div className='hidden lg:block'>
diff --git a/apps/sim/app/(home)/components/enterprise/components/access-control-panel.tsx b/apps/sim/app/(home)/components/enterprise/components/access-control-panel.tsx
index 652b2b98ed3..6a45986c69b 100644
--- a/apps/sim/app/(home)/components/enterprise/components/access-control-panel.tsx
+++ b/apps/sim/app/(home)/components/enterprise/components/access-control-panel.tsx
@@ -97,7 +97,7 @@ export function AccessControlPanel() {
 
           return (
             <div key={category.label} className={catIdx > 0 ? 'mt-4' : ''}>
-              <span className='font-[430] font-season text-[#F6F6F6]/30 text-[10px] uppercase leading-none tracking-[0.08em]'>
+              <span className='font-[430] font-season text-[#F6F6F6]/55 text-[10px] uppercase leading-none tracking-[0.08em]'>
                 {category.label}
               </span>
               <div className='mt-2 grid grid-cols-2 gap-x-4 gap-y-2'>
@@ -107,6 +107,10 @@ export function AccessControlPanel() {
                   return (
                     <motion.div
                       key={feature.key}
+                      role='button'
+                      tabIndex={0}
+                      aria-label={`Toggle ${feature.name}`}
+                      aria-pressed={enabled}
                       className='flex cursor-pointer items-center gap-2 rounded-[4px] py-0.5'
                       initial={{ opacity: 0, x: -6 }}
                       animate={isInView ? { opacity: 1, x: 0 } : {}}
@@ -117,6 +121,12 @@ export function AccessControlPanel() {
                       onClick={() =>
                         setAccessState((prev) => ({ ...prev, [feature.key]: !prev[feature.key] }))
                       }
+                      onKeyDown={(e) => {
+                        if (e.key === 'Enter' || e.key === ' ') {
+                          e.preventDefault()
+                          setAccessState((prev) => ({ ...prev, [feature.key]: !prev[feature.key] }))
+                        }
+                      }}
                       whileTap={{ scale: 0.98 }}
                     >
                       <CheckboxIcon checked={enabled} color={category.color} />
@@ -140,7 +150,7 @@ export function AccessControlPanel() {
       <div className='hidden lg:block'>
         {PERMISSION_CATEGORIES.map((category, catIdx) => (
           <div key={category.label} className={catIdx > 0 ? 'mt-4' : ''}>
-            <span className='font-[430] font-season text-[#F6F6F6]/30 text-[10px] uppercase leading-none tracking-[0.08em]'>
+            <span className='font-[430] font-season text-[#F6F6F6]/55 text-[10px] uppercase leading-none tracking-[0.08em]'>
               {category.label}
             </span>
             <div className='mt-2 grid grid-cols-2 gap-x-4 gap-y-2'>
@@ -155,6 +165,10 @@ export function AccessControlPanel() {
                 return (
                   <motion.div
                     key={feature.key}
+                    role='button'
+                    tabIndex={0}
+                    aria-label={`Toggle ${feature.name}`}
+                    aria-pressed={enabled}
                     className='flex cursor-pointer items-center gap-2 rounded-[4px] py-0.5'
                     initial={{ opacity: 0, x: -6 }}
                     animate={isInView ? { opacity: 1, x: 0 } : {}}
@@ -166,6 +180,12 @@ export function AccessControlPanel() {
                     onClick={() =>
                       setAccessState((prev) => ({ ...prev, [feature.key]: !prev[feature.key] }))
                     }
+                    onKeyDown={(e) => {
+                      if (e.key === 'Enter' || e.key === ' ') {
+                        e.preventDefault()
+                        setAccessState((prev) => ({ ...prev, [feature.key]: !prev[feature.key] }))
+                      }
+                    }}
                     whileTap={{ scale: 0.98 }}
                   >
                     <CheckboxIcon checked={enabled} color={category.color} />
diff --git a/apps/sim/app/(home)/components/enterprise/components/audit-log-preview.tsx b/apps/sim/app/(home)/components/enterprise/components/audit-log-preview.tsx
index 53c938af1f5..89ad672e678 100644
--- a/apps/sim/app/(home)/components/enterprise/components/audit-log-preview.tsx
+++ b/apps/sim/app/(home)/components/enterprise/components/audit-log-preview.tsx
@@ -146,14 +146,14 @@ function AuditRow({ entry, index }: AuditRowProps) {
         </div>
 
         {/* Time */}
-        <span className='w-[56px] shrink-0 font-[430] font-season text-[#F6F6F6]/30 text-[11px] leading-none tracking-[0.02em]'>
+        <span className='w-[56px] shrink-0 font-[430] font-season text-[#F6F6F6]/55 text-[11px] leading-none tracking-[0.02em]'>
           {timeAgo}
         </span>
 
         <span className='min-w-0 truncate font-[430] font-season text-[12px] leading-none tracking-[0.02em]'>
           <span className='text-[#F6F6F6]/80'>{entry.actor}</span>
           <span className='hidden sm:inline'>
-            <span className='text-[#F6F6F6]/40'> · </span>
+            <span className='text-[#F6F6F6]/60'> · </span>
             <span className='text-[#F6F6F6]/55'>{entry.description}</span>
           </span>
         </span>
diff --git a/apps/sim/app/(home)/components/enterprise/enterprise.tsx b/apps/sim/app/(home)/components/enterprise/enterprise.tsx
index 52da8845d49..da8a88461c6 100644
--- a/apps/sim/app/(home)/components/enterprise/enterprise.tsx
+++ b/apps/sim/app/(home)/components/enterprise/enterprise.tsx
@@ -85,7 +85,7 @@ function TrustStrip() {
           <strong className='font-[430] font-season text-small text-white leading-none'>
             SOC 2 & HIPAA
           </strong>
-          <span className='font-[430] font-season text-[color-mix(in_srgb,var(--landing-text-subtle)_30%,transparent)] text-xs leading-none tracking-[0.02em] transition-colors group-hover:text-[color-mix(in_srgb,var(--landing-text-subtle)_55%,transparent)]'>
+          <span className='font-[430] font-season text-[color-mix(in_srgb,var(--landing-text-subtle)_55%,transparent)] text-xs leading-none tracking-[0.02em] transition-colors group-hover:text-[color-mix(in_srgb,var(--landing-text-subtle)_75%,transparent)]'>
             Type II · PHI protected →
           </span>
         </div>
@@ -105,7 +105,7 @@ function TrustStrip() {
           <strong className='font-[430] font-season text-small text-white leading-none'>
             Open Source
           </strong>
-          <span className='font-[430] font-season text-[color-mix(in_srgb,var(--landing-text-subtle)_30%,transparent)] text-xs leading-none tracking-[0.02em] transition-colors group-hover:text-[color-mix(in_srgb,var(--landing-text-subtle)_55%,transparent)]'>
+          <span className='font-[430] font-season text-[color-mix(in_srgb,var(--landing-text-subtle)_55%,transparent)] text-xs leading-none tracking-[0.02em] transition-colors group-hover:text-[color-mix(in_srgb,var(--landing-text-subtle)_75%,transparent)]'>
             View on GitHub →
           </span>
         </div>
@@ -120,7 +120,7 @@ function TrustStrip() {
           <strong className='font-[430] font-season text-small text-white leading-none'>
             SSO & SCIM
           </strong>
-          <span className='font-[430] font-season text-[color-mix(in_srgb,var(--landing-text-subtle)_30%,transparent)] text-xs leading-none tracking-[0.02em]'>
+          <span className='font-[430] font-season text-[color-mix(in_srgb,var(--landing-text-subtle)_55%,transparent)] text-xs leading-none tracking-[0.02em]'>
             Okta, Azure AD, Google
           </span>
         </div>
@@ -165,7 +165,7 @@ export default function Enterprise() {
                 <h3 className='font-[430] font-season text-[16px] text-white leading-[120%] tracking-[-0.01em]'>
                   Audit Trail
                 </h3>
-                <p className='mt-2 max-w-[480px] font-[430] font-season text-[#F6F6F6]/50 text-[14px] leading-[150%] tracking-[0.02em]'>
+                <p className='mt-2 max-w-[480px] font-[430] font-season text-[#F6F6F6]/70 text-[14px] leading-[150%] tracking-[0.02em]'>
                   Every action is captured with full actor attribution.
                 </p>
               </div>
@@ -179,7 +179,7 @@ export default function Enterprise() {
                 <h3 className='font-[430] font-season text-[16px] text-white leading-[120%] tracking-[-0.01em]'>
                   Access Control
                 </h3>
-                <p className='mt-1.5 font-[430] font-season text-[#F6F6F6]/50 text-[14px] leading-[150%] tracking-[0.02em]'>
+                <p className='mt-1.5 font-[430] font-season text-[#F6F6F6]/70 text-[14px] leading-[150%] tracking-[0.02em]'>
                   Restrict providers, surfaces, and tools per group.
                 </p>
               </div>
@@ -211,7 +211,7 @@ export default function Enterprise() {
                 (tag, i) => (
                   <span
                     key={i}
-                    className='enterprise-feature-marquee-tag whitespace-nowrap border-[var(--landing-bg-elevated)] border-r px-5 py-4 font-[430] font-season text-[color-mix(in_srgb,var(--landing-text-subtle)_40%,transparent)] text-small leading-none tracking-[0.02em] hover:bg-white/[0.04] hover:text-[color-mix(in_srgb,var(--landing-text-subtle)_55%,transparent)]'
+                    className='enterprise-feature-marquee-tag whitespace-nowrap border-[var(--landing-bg-elevated)] border-r px-5 py-4 font-[430] font-season text-[color-mix(in_srgb,var(--landing-text-subtle)_60%,transparent)] text-small leading-none tracking-[0.02em] hover:bg-white/[0.04] hover:text-[color-mix(in_srgb,var(--landing-text-subtle)_80%,transparent)]'
                   >
                     {tag}
                   </span>
@@ -221,7 +221,7 @@ export default function Enterprise() {
           </div>
 
           <div className='flex items-center justify-between border-[var(--landing-bg-elevated)] border-t px-6 py-5 md:px-8 md:py-6'>
-            <p className='font-[430] font-season text-[color-mix(in_srgb,var(--landing-text-subtle)_40%,transparent)] text-base leading-[150%] tracking-[0.02em]'>
+            <p className='font-[430] font-season text-[color-mix(in_srgb,var(--landing-text-subtle)_60%,transparent)] text-base leading-[150%] tracking-[0.02em]'>
               Ready for growth?
             </p>
             <DemoRequestModal>
diff --git a/apps/sim/app/(home)/components/features/features.tsx b/apps/sim/app/(home)/components/features/features.tsx
index d402803ac91..1b5d9b8c9a8 100644
--- a/apps/sim/app/(home)/components/features/features.tsx
+++ b/apps/sim/app/(home)/components/features/features.tsx
@@ -190,7 +190,6 @@ export default function Features() {
           width={1440}
           height={366}
           className='h-auto w-full'
-          priority
         />
       </div>
 
diff --git a/apps/sim/app/(home)/components/footer/footer-cta.tsx b/apps/sim/app/(home)/components/footer/footer-cta.tsx
index b67ae3b3f84..984252f270a 100644
--- a/apps/sim/app/(home)/components/footer/footer-cta.tsx
+++ b/apps/sim/app/(home)/components/footer/footer-cta.tsx
@@ -67,6 +67,7 @@ export function FooterCTA() {
               type='button'
               onClick={handleSubmit}
               disabled={isEmpty}
+              aria-label='Submit message'
               className='flex h-[28px] w-[28px] items-center justify-center rounded-full border-0 p-0 transition-colors'
               style={{
                 background: isEmpty ? '#C0C0C0' : '#1C1C1C',
diff --git a/apps/sim/app/layout.tsx b/apps/sim/app/layout.tsx
index a58f0c25cbf..05fd18a7c0b 100644
--- a/apps/sim/app/layout.tsx
+++ b/apps/sim/app/layout.tsx
@@ -218,6 +218,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
         <meta httpEquiv='x-ua-compatible' content='ie=edge' />
 
         {/* OneDollarStats Analytics */}
+        <link rel='dns-prefetch' href='https://assets.onedollarstats.com' />
         <script defer src='https://assets.onedollarstats.com/stonks.js' />
 
         <PublicEnvScript />
diff --git a/apps/sim/app/page.tsx b/apps/sim/app/page.tsx
index f20d55d623b..a873661326e 100644
--- a/apps/sim/app/page.tsx
+++ b/apps/sim/app/page.tsx
@@ -2,7 +2,7 @@ import type { Metadata } from 'next'
 import { getBaseUrl } from '@/lib/core/utils/urls'
 import Landing from '@/app/(home)/landing'
 
-export const dynamic = 'force-dynamic'
+export const revalidate = 3600
 
 const baseUrl = getBaseUrl()
 

From 95039f4b6001da36e42456a63da10715d43185b1 Mon Sep 17 00:00:00 2001
From: Waleed Latif <walif6@gmail.com>
Date: Sun, 29 Mar 2026 22:08:32 -0700
Subject: [PATCH 2/4] improvement(landing): extract FeatureToggleItem to
 deduplicate accessibility logic

---
 .../components/access-control-panel.tsx       | 149 +++++++++---------
 1 file changed, 78 insertions(+), 71 deletions(-)

diff --git a/apps/sim/app/(home)/components/enterprise/components/access-control-panel.tsx b/apps/sim/app/(home)/components/enterprise/components/access-control-panel.tsx
index 6a45986c69b..8bacd1fc647 100644
--- a/apps/sim/app/(home)/components/enterprise/components/access-control-panel.tsx
+++ b/apps/sim/app/(home)/components/enterprise/components/access-control-panel.tsx
@@ -81,6 +81,59 @@ function ProviderPreviewIcon({ providerId }: { providerId?: string }) {
   )
 }
 
+interface FeatureToggleItemProps {
+  feature: PermissionFeature
+  enabled: boolean
+  color: string
+  isInView: boolean
+  delay: number
+  textClassName: string
+  transition: Record<string, unknown>
+  onToggle: () => void
+}
+
+function FeatureToggleItem({
+  feature,
+  enabled,
+  color,
+  isInView,
+  delay,
+  textClassName,
+  transition,
+  onToggle,
+}: FeatureToggleItemProps) {
+  return (
+    <motion.div
+      key={feature.key}
+      role='button'
+      tabIndex={0}
+      aria-label={`Toggle ${feature.name}`}
+      aria-pressed={enabled}
+      className='flex cursor-pointer items-center gap-2 rounded-[4px] py-0.5'
+      initial={{ opacity: 0, x: -6 }}
+      animate={isInView ? { opacity: 1, x: 0 } : {}}
+      transition={{ delay, ...transition }}
+      onClick={onToggle}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault()
+          onToggle()
+        }
+      }}
+      whileTap={{ scale: 0.98 }}
+    >
+      <CheckboxIcon checked={enabled} color={color} />
+      <ProviderPreviewIcon providerId={feature.providerId} />
+      <span
+        className={textClassName}
+        style={{ color: enabled ? '#F6F6F6AA' : '#F6F6F640' }}
+      >
+        {feature.name}
+      </span>
+    </motion.div>
+  )
+}
+
 export function AccessControlPanel() {
   const ref = useRef(null)
   const isInView = useInView(ref, { once: true, margin: '-40px' })
@@ -101,45 +154,21 @@ export function AccessControlPanel() {
                 {category.label}
               </span>
               <div className='mt-2 grid grid-cols-2 gap-x-4 gap-y-2'>
-                {category.features.map((feature, featIdx) => {
-                  const enabled = accessState[feature.key]
-
-                  return (
-                    <motion.div
-                      key={feature.key}
-                      role='button'
-                      tabIndex={0}
-                      aria-label={`Toggle ${feature.name}`}
-                      aria-pressed={enabled}
-                      className='flex cursor-pointer items-center gap-2 rounded-[4px] py-0.5'
-                      initial={{ opacity: 0, x: -6 }}
-                      animate={isInView ? { opacity: 1, x: 0 } : {}}
-                      transition={{
-                        delay: 0.05 + (offsetBefore + featIdx) * 0.04,
-                        duration: 0.3,
-                      }}
-                      onClick={() =>
-                        setAccessState((prev) => ({ ...prev, [feature.key]: !prev[feature.key] }))
-                      }
-                      onKeyDown={(e) => {
-                        if (e.key === 'Enter' || e.key === ' ') {
-                          e.preventDefault()
-                          setAccessState((prev) => ({ ...prev, [feature.key]: !prev[feature.key] }))
-                        }
-                      }}
-                      whileTap={{ scale: 0.98 }}
-                    >
-                      <CheckboxIcon checked={enabled} color={category.color} />
-                      <ProviderPreviewIcon providerId={feature.providerId} />
-                      <span
-                        className='truncate font-[430] font-season text-[13px] leading-none tracking-[0.02em]'
-                        style={{ color: enabled ? '#F6F6F6AA' : '#F6F6F640' }}
-                      >
-                        {feature.name}
-                      </span>
-                    </motion.div>
-                  )
-                })}
+                {category.features.map((feature, featIdx) => (
+                  <FeatureToggleItem
+                    key={feature.key}
+                    feature={feature}
+                    enabled={accessState[feature.key]}
+                    color={category.color}
+                    isInView={isInView}
+                    delay={0.05 + (offsetBefore + featIdx) * 0.04}
+                    textClassName='truncate font-[430] font-season text-[13px] leading-none tracking-[0.02em]'
+                    transition={{ duration: 0.3 }}
+                    onToggle={() =>
+                      setAccessState((prev) => ({ ...prev, [feature.key]: !prev[feature.key] }))
+                    }
+                  />
+                ))}
               </div>
             </div>
           )
@@ -155,7 +184,6 @@ export function AccessControlPanel() {
             </span>
             <div className='mt-2 grid grid-cols-2 gap-x-4 gap-y-2'>
               {category.features.map((feature, featIdx) => {
-                const enabled = accessState[feature.key]
                 const currentIndex =
                   PERMISSION_CATEGORIES.slice(0, catIdx).reduce(
                     (sum, c) => sum + c.features.length,
@@ -163,40 +191,19 @@ export function AccessControlPanel() {
                   ) + featIdx
 
                 return (
-                  <motion.div
+                  <FeatureToggleItem
                     key={feature.key}
-                    role='button'
-                    tabIndex={0}
-                    aria-label={`Toggle ${feature.name}`}
-                    aria-pressed={enabled}
-                    className='flex cursor-pointer items-center gap-2 rounded-[4px] py-0.5'
-                    initial={{ opacity: 0, x: -6 }}
-                    animate={isInView ? { opacity: 1, x: 0 } : {}}
-                    transition={{
-                      delay: 0.1 + currentIndex * 0.04,
-                      duration: 0.3,
-                      ease: [0.25, 0.46, 0.45, 0.94],
-                    }}
-                    onClick={() =>
+                    feature={feature}
+                    enabled={accessState[feature.key]}
+                    color={category.color}
+                    isInView={isInView}
+                    delay={0.1 + currentIndex * 0.04}
+                    textClassName='truncate font-[430] font-season text-[11px] leading-none tracking-[0.02em] transition-opacity duration-200'
+                    transition={{ duration: 0.3, ease: [0.25, 0.46, 0.45, 0.94] }}
+                    onToggle={() =>
                       setAccessState((prev) => ({ ...prev, [feature.key]: !prev[feature.key] }))
                     }
-                    onKeyDown={(e) => {
-                      if (e.key === 'Enter' || e.key === ' ') {
-                        e.preventDefault()
-                        setAccessState((prev) => ({ ...prev, [feature.key]: !prev[feature.key] }))
-                      }
-                    }}
-                    whileTap={{ scale: 0.98 }}
-                  >
-                    <CheckboxIcon checked={enabled} color={category.color} />
-                    <ProviderPreviewIcon providerId={feature.providerId} />
-                    <span
-                      className='truncate font-[430] font-season text-[11px] leading-none tracking-[0.02em] transition-opacity duration-200'
-                      style={{ color: enabled ? '#F6F6F6AA' : '#F6F6F640' }}
-                    >
-                      {feature.name}
-                    </span>
-                  </motion.div>
+                  />
                 )
               })}
             </div>

From cb493e92842157749b18e7a6755ee0037142e129 Mon Sep 17 00:00:00 2001
From: Waleed Latif <walif6@gmail.com>
Date: Sun, 29 Mar 2026 22:10:04 -0700
Subject: [PATCH 3/4] lint

---
 .../enterprise/components/access-control-panel.tsx           | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/apps/sim/app/(home)/components/enterprise/components/access-control-panel.tsx b/apps/sim/app/(home)/components/enterprise/components/access-control-panel.tsx
index 8bacd1fc647..cd4fd2e31e2 100644
--- a/apps/sim/app/(home)/components/enterprise/components/access-control-panel.tsx
+++ b/apps/sim/app/(home)/components/enterprise/components/access-control-panel.tsx
@@ -124,10 +124,7 @@ function FeatureToggleItem({
     >
       <CheckboxIcon checked={enabled} color={color} />
       <ProviderPreviewIcon providerId={feature.providerId} />
-      <span
-        className={textClassName}
-        style={{ color: enabled ? '#F6F6F6AA' : '#F6F6F640' }}
-      >
+      <span className={textClassName} style={{ color: enabled ? '#F6F6F6AA' : '#F6F6F640' }}>
         {feature.name}
       </span>
     </motion.div>

From ba2ccdd1286202a0e5000101a1373d2deba549f9 Mon Sep 17 00:00:00 2001
From: Waleed Latif <walif6@gmail.com>
Date: Sun, 29 Mar 2026 22:15:46 -0700
Subject: [PATCH 4/4] fix(landing): ensure explicit delay prop takes precedence
 over transition spread

---
 .../components/enterprise/components/access-control-panel.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/sim/app/(home)/components/enterprise/components/access-control-panel.tsx b/apps/sim/app/(home)/components/enterprise/components/access-control-panel.tsx
index cd4fd2e31e2..e8c79862acd 100644
--- a/apps/sim/app/(home)/components/enterprise/components/access-control-panel.tsx
+++ b/apps/sim/app/(home)/components/enterprise/components/access-control-panel.tsx
@@ -112,7 +112,7 @@ function FeatureToggleItem({
       className='flex cursor-pointer items-center gap-2 rounded-[4px] py-0.5'
       initial={{ opacity: 0, x: -6 }}
       animate={isInView ? { opacity: 1, x: 0 } : {}}
-      transition={{ delay, ...transition }}
+      transition={{ ...transition, delay }}
       onClick={onToggle}
       onKeyDown={(e) => {
         if (e.key === 'Enter' || e.key === ' ') {