improvement(landing): lighthouse performance and accessibility fixes

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'>

apps/sim/app/(home)/components/enterprise/components/access-control-panel.tsx

@@ -81,6 +81,56 @@ 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={{ ...transition, delay }}
+      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' })
@@ -97,39 +147,25 @@ 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'>
-                {category.features.map((feature, featIdx) => {
-                  const enabled = accessState[feature.key]
-
-                  return (
-                    <motion.div
-                      key={feature.key}
-                      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] }))
-                      }
-                      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>
           )
@@ -140,43 +176,31 @@ 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'>
               {category.features.map((feature, featIdx) => {
-                const enabled = accessState[feature.key]
                 const currentIndex =
                   PERMISSION_CATEGORIES.slice(0, catIdx).reduce(
                     (sum, c) => sum + c.features.length,
                     0
                   ) + featIdx
 
                 return (
-                  <motion.div
+                  <FeatureToggleItem
                     key={feature.key}
-                    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] }))
                     }
-                    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>

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>

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>

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>
 

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',

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 />

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()