improvement(landing): lighthouse performance and accessibility fixes

simstudioai · waleedlatif1 · Mar 30, 2026 · Mar 29, 2026 · Mar 30, 2026 · Mar 30, 2026
commit 53ac2657e1e45e5ba77f808b9225ec1cf676d8b0
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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()