diff --git a/apps/sim/app/(landing)/components/collaboration/collaboration.tsx b/apps/sim/app/(landing)/components/collaboration/collaboration.tsx
index 13200885ba7..d7b8cff120b 100644
--- a/apps/sim/app/(landing)/components/collaboration/collaboration.tsx
+++ b/apps/sim/app/(landing)/components/collaboration/collaboration.tsx
@@ -1,12 +1,16 @@
'use client'
import { useCallback, useEffect, useRef, useState } from 'react'
+import dynamic from 'next/dynamic'
import Image from 'next/image'
import Link from 'next/link'
import { Badge } from '@/components/emcn'
-import { AuthModal } from '@/app/(landing)/components/auth-modal/auth-modal'
import { trackLandingCta } from '@/app/(landing)/landing-analytics'
+const AuthModal = dynamic(() =>
+ import('@/app/(landing)/components/auth-modal/auth-modal').then((m) => m.AuthModal)
+)
+
interface DotGridProps {
className?: string
cols: number
diff --git a/apps/sim/app/(landing)/components/features/features.tsx b/apps/sim/app/(landing)/components/features/features.tsx
index 75dc371b373..f9ab0d6d6c0 100644
--- a/apps/sim/app/(landing)/components/features/features.tsx
+++ b/apps/sim/app/(landing)/components/features/features.tsx
@@ -2,12 +2,16 @@
import { useRef, useState } from 'react'
import { type MotionValue, motion, useScroll, useTransform } from 'framer-motion'
+import dynamic from 'next/dynamic'
import Image from 'next/image'
import { Badge } from '@/components/emcn'
-import { AuthModal } from '@/app/(landing)/components/auth-modal/auth-modal'
import { FeaturesPreview } from '@/app/(landing)/components/features/components/features-preview'
import { trackLandingCta } from '@/app/(landing)/landing-analytics'
+const AuthModal = dynamic(() =>
+ import('@/app/(landing)/components/auth-modal/auth-modal').then((m) => m.AuthModal)
+)
+
function hexToRgba(hex: string, alpha: number): string {
const r = Number.parseInt(hex.slice(1, 3), 16)
const g = Number.parseInt(hex.slice(3, 5), 16)
diff --git a/apps/sim/app/(landing)/components/footer/footer-cta.tsx b/apps/sim/app/(landing)/components/footer/footer-cta.tsx
index 9a06d79fafe..ff98ff7e156 100644
--- a/apps/sim/app/(landing)/components/footer/footer-cta.tsx
+++ b/apps/sim/app/(landing)/components/footer/footer-cta.tsx
@@ -2,13 +2,17 @@
import { useCallback, useRef, useState } from 'react'
import { ArrowUp } from 'lucide-react'
+import dynamic from 'next/dynamic'
import { cn } from '@/lib/core/utils/cn'
import { captureClientEvent } from '@/lib/posthog/client'
-import { AuthModal } from '@/app/(landing)/components/auth-modal/auth-modal'
import { useLandingSubmit } from '@/app/(landing)/components/landing-preview/components/landing-preview-panel/landing-preview-panel'
import { trackLandingCta } from '@/app/(landing)/landing-analytics'
import { useAnimatedPlaceholder } from '@/hooks/use-animated-placeholder'
+const AuthModal = dynamic(() =>
+ import('@/app/(landing)/components/auth-modal/auth-modal').then((m) => m.AuthModal)
+)
+
const MAX_HEIGHT = 120
const CTA_BUTTON =
diff --git a/apps/sim/app/(landing)/components/footer/footer.tsx b/apps/sim/app/(landing)/components/footer/footer.tsx
index a27a1cf30bf..cb4e0fb7796 100644
--- a/apps/sim/app/(landing)/components/footer/footer.tsx
+++ b/apps/sim/app/(landing)/components/footer/footer.tsx
@@ -38,7 +38,7 @@ const BLOCK_LINKS: FooterItem[] = [
{ label: 'Router', href: 'https://docs.sim.ai/blocks/router', external: true },
{ label: 'Function', href: 'https://docs.sim.ai/blocks/function', external: true },
{ label: 'Condition', href: 'https://docs.sim.ai/blocks/condition', external: true },
- { label: 'API', href: 'https://docs.sim.ai/blocks/api', external: true },
+ { label: 'API Block', href: 'https://docs.sim.ai/blocks/api', external: true },
{ label: 'Workflow', href: 'https://docs.sim.ai/blocks/workflow', external: true },
{ label: 'Parallel', href: 'https://docs.sim.ai/blocks/parallel', external: true },
{ label: 'Guardrails', href: 'https://docs.sim.ai/blocks/guardrails', external: true },
@@ -194,7 +194,7 @@ export default function Footer({ hideCTA }: FooterProps) {
+ import('@/app/(landing)/components/auth-modal/auth-modal').then((m) => m.AuthModal)
+)
+
+const DemoRequestModal = dynamic(() =>
+ import('@/app/(landing)/components/demo-request/demo-request-modal').then(
+ (m) => m.DemoRequestModal
+ )
+)
+
const LandingPreview = dynamic(
() =>
import('@/app/(landing)/components/landing-preview/landing-preview').then(
diff --git a/apps/sim/app/(landing)/components/landing-preview/components/landing-preview-home/landing-preview-home.tsx b/apps/sim/app/(landing)/components/landing-preview/components/landing-preview-home/landing-preview-home.tsx
index aea260a3cb0..338a3bd115a 100644
--- a/apps/sim/app/(landing)/components/landing-preview/components/landing-preview-home/landing-preview-home.tsx
+++ b/apps/sim/app/(landing)/components/landing-preview/components/landing-preview-home/landing-preview-home.tsx
@@ -334,6 +334,7 @@ export const LandingPreviewHome = memo(function LandingPreviewHome({
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 ? '#808080' : '#e0e0e0',
diff --git a/apps/sim/app/(landing)/components/landing-preview/components/landing-preview-panel/landing-preview-panel.tsx b/apps/sim/app/(landing)/components/landing-preview/components/landing-preview-panel/landing-preview-panel.tsx
index 6e7ba497aeb..94e39cb27b3 100644
--- a/apps/sim/app/(landing)/components/landing-preview/components/landing-preview-panel/landing-preview-panel.tsx
+++ b/apps/sim/app/(landing)/components/landing-preview/components/landing-preview-panel/landing-preview-panel.tsx
@@ -3,13 +3,13 @@
import { memo, useCallback, useEffect, useRef, useState } from 'react'
import { AnimatePresence, motion } from 'framer-motion'
import { ArrowUp } from 'lucide-react'
+import dynamic from 'next/dynamic'
import { useRouter } from 'next/navigation'
import { createPortal } from 'react-dom'
import { Blimp, BubbleChatPreview, ChevronDown, MoreHorizontal, Play } from '@/components/emcn'
import { AgentIcon, HubspotIcon, OpenAIIcon, SalesforceIcon } from '@/components/icons'
import { LandingPromptStorage } from '@/lib/core/utils/browser-storage'
import { captureClientEvent } from '@/lib/posthog/client'
-import { AuthModal } from '@/app/(landing)/components/auth-modal/auth-modal'
import {
EASE_OUT,
type EditorPromptData,
@@ -21,6 +21,10 @@ import {
} from '@/app/(landing)/components/landing-preview/components/landing-preview-workflow/workflow-data'
import { trackLandingCta } from '@/app/(landing)/landing-analytics'
+const AuthModal = dynamic(() =>
+ import('@/app/(landing)/components/auth-modal/auth-modal').then((m) => m.AuthModal)
+)
+
type PanelTab = 'copilot' | 'editor'
const EDITOR_BLOCK_ICONS: Record> = {
diff --git a/apps/sim/app/(landing)/components/navbar/navbar.tsx b/apps/sim/app/(landing)/components/navbar/navbar.tsx
index 54579bc173e..da1e114f076 100644
--- a/apps/sim/app/(landing)/components/navbar/navbar.tsx
+++ b/apps/sim/app/(landing)/components/navbar/navbar.tsx
@@ -1,13 +1,13 @@
'use client'
-import { useCallback, useEffect, useRef, useState, useSyncExternalStore } from 'react'
+import { useCallback, useContext, useEffect, useRef, useState, useSyncExternalStore } from 'react'
+import dynamic from 'next/dynamic'
import Image from 'next/image'
import Link from 'next/link'
import { useSearchParams } from 'next/navigation'
import { GithubOutlineIcon } from '@/components/icons'
-import { useSession } from '@/lib/auth/auth-client'
import { cn } from '@/lib/core/utils/cn'
-import { AuthModal } from '@/app/(landing)/components/auth-modal/auth-modal'
+import { SessionContext } from '@/app/_shell/providers/session-provider'
import {
BlogDropdown,
type NavBlogPost,
@@ -17,6 +17,10 @@ import { GitHubStars } from '@/app/(landing)/components/navbar/components/github
import { trackLandingCta } from '@/app/(landing)/landing-analytics'
import { getBrandConfig } from '@/ee/whitelabeling'
+const AuthModal = dynamic(() =>
+ import('@/app/(landing)/components/auth-modal/auth-modal').then((m) => m.AuthModal)
+)
+
type DropdownId = 'docs' | 'blog' | null
interface NavLink {
@@ -48,7 +52,9 @@ interface NavbarProps {
export default function Navbar({ logoOnly = false, blogPosts = [] }: NavbarProps) {
const brand = getBrandConfig()
const searchParams = useSearchParams()
- const { data: session, isPending: isSessionPending } = useSession()
+ const sessionCtx = useContext(SessionContext)
+ const session = sessionCtx?.data ?? null
+ const isSessionPending = sessionCtx?.isPending ?? true
const isAuthenticated = Boolean(session?.user?.id)
const isBrowsingHome = searchParams.has('home')
const useHomeLinks = isAuthenticated || isBrowsingHome
@@ -125,7 +131,7 @@ export default function Navbar({ logoOnly = false, blogPosts = [] }: NavbarProps
) : (
+ import('@/app/(landing)/components/auth-modal/auth-modal').then((m) => m.AuthModal)
+)
+
+const DemoRequestModal = dynamic(() =>
+ import('@/app/(landing)/components/demo-request/demo-request-modal').then(
+ (m) => m.DemoRequestModal
+ )
+)
+
interface PricingTier {
id: string
name: string
diff --git a/apps/sim/app/(landing)/components/templates/templates.tsx b/apps/sim/app/(landing)/components/templates/templates.tsx
index cb799237ae3..cbe2d0609b8 100644
--- a/apps/sim/app/(landing)/components/templates/templates.tsx
+++ b/apps/sim/app/(landing)/components/templates/templates.tsx
@@ -470,7 +470,7 @@ export default function Templates() {
aria-labelledby={`template-tab-${activeIndex}`}
className='relative hidden flex-1 lg:block'
>
-