From 6d9eef56a1936e6e9ff189f5e4a31336d241619a Mon Sep 17 00:00:00 2001
From: Ignat <ign.romanov@gmail.com>
Date: Mon, 25 May 2026 02:47:03 -0300
Subject: [PATCH 01/10] perf(landing/faq): hoist useReducedMotion, React.memo +
 useCallback on FaqItem (1-3/4)

Kai lag-analysis 2026-05-25: 12 matchMedia subscriptions (one per FaqItem)
collapsed to 1 in FaqSection. FaqItem wrapped in React.memo; handleToggle
stabilised via useCallback + index passed as arg to avoid per-render arrow
wrappers. backdrop-blur-sm removed from section root (Fix 2, FAQ part).
---
 .../landing/faq-section/FaqSection.tsx        | 30 ++++++++++++-------
 1 file changed, 19 insertions(+), 11 deletions(-)

diff --git a/src/widgets/landing/faq-section/FaqSection.tsx b/src/widgets/landing/faq-section/FaqSection.tsx
index 6bb7f04e..a29a9626 100644
--- a/src/widgets/landing/faq-section/FaqSection.tsx
+++ b/src/widgets/landing/faq-section/FaqSection.tsx
@@ -6,7 +6,7 @@
 
 'use client'
 
-import { useState } from 'react'
+import { useState, useCallback, memo } from 'react'
 import { ChevronDownIcon } from '@/shared/ui/icons'
 import { useReducedMotion } from '@/shared/ui'
 
@@ -17,14 +17,20 @@ import { AnimatePresence, motion } from '@/shared/ui/motion'
 
 import { FAQ_ITEMS, type FaqItem } from '../constants/faq'
 
-function FaqItem({ question, answer, isOpen, onToggle, index }: FaqItem & { isOpen: boolean; onToggle: () => void; index: number }) {
-  const shouldReduceMotion = useReducedMotion()
+const FaqItem = memo(function FaqItem({
+  question,
+  answer,
+  isOpen,
+  onToggle,
+  index,
+  reducedMotion,
+}: FaqItem & { isOpen: boolean; onToggle: (index: number) => void; index: number; reducedMotion: boolean }) {
   return (
     <div className="border-b border-zinc-800 last:border-b-0">
       <button
         onClick={() => {
           track(AnalyticsEvent.FAQ_EXPAND, { question_id: question })
-          onToggle()
+          onToggle(index)
         }}
         className="flex w-full cursor-pointer items-center justify-between gap-4 py-6 text-left transition-colors hover:text-zinc-100"
         aria-expanded={isOpen}
@@ -46,7 +52,7 @@ function FaqItem({ question, answer, isOpen, onToggle, index }: FaqItem & { isOp
             initial={{ height: 0, opacity: 0 }}
             animate={{ height: 'auto', opacity: 1 }}
             exit={{ height: 0, opacity: 0 }}
-            transition={{ duration: shouldReduceMotion ? 0 : 0.2, ease: 'easeInOut' }}
+            transition={{ duration: reducedMotion ? 0 : 0.2, ease: 'easeInOut' }}
             className="overflow-hidden"
           >
             <Text variant="body" className="pb-6 text-zinc-400">
@@ -57,19 +63,20 @@ function FaqItem({ question, answer, isOpen, onToggle, index }: FaqItem & { isOp
       </AnimatePresence>
     </div>
   )
-}
+})
 
 export function FaqSection() {
   const [openIndex, setOpenIndex] = useState<number | null>(0)
+  const reducedMotion = useReducedMotion()
 
-  const handleToggle = (index: number) => {
-    setOpenIndex(openIndex === index ? null : index)
-  }
+  const handleToggle = useCallback((index: number) => {
+    setOpenIndex((prev) => (prev === index ? null : index))
+  }, [])
 
   return (
     <section
       id="faq"
-      className="relative border-t border-zinc-900 bg-zinc-950/10 px-4 py-16 backdrop-blur-sm md:px-6 md:py-32"
+      className="relative border-t border-zinc-900 bg-zinc-950/10 px-4 py-16 md:px-6 md:py-32"
       aria-labelledby="faq-heading"
     >
       <div className="mx-auto max-w-3xl">
@@ -92,7 +99,8 @@ export function FaqSection() {
               question={item.question}
               answer={item.answer}
               isOpen={openIndex === index}
-              onToggle={() => handleToggle(index)}
+              onToggle={handleToggle}
+              reducedMotion={reducedMotion ?? false}
             />
           ))}
         </div>

From cc2dc46e71bf38e4d3c82965c6627712dbccdf48 Mon Sep 17 00:00:00 2001
From: Ignat <ign.romanov@gmail.com>
Date: Mon, 25 May 2026 02:47:11 -0300
Subject: [PATCH 02/10] perf(landing): remove backdrop-blur-sm from
 ComparisonTable section root (2/4)

Kai lag-analysis 2026-05-25: backdrop-blur-sm on section roots forces GPU
compositing layers during scroll. Inner accordion card retains backdrop-blur-sm
(visually load-bearing). Section root is now flat bg.
---
 src/widgets/landing/comparison/ComparisonTable.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/widgets/landing/comparison/ComparisonTable.tsx b/src/widgets/landing/comparison/ComparisonTable.tsx
index 7689166a..b5166169 100644
--- a/src/widgets/landing/comparison/ComparisonTable.tsx
+++ b/src/widgets/landing/comparison/ComparisonTable.tsx
@@ -139,7 +139,7 @@ function ValueCell({ value }: { value: ComparisonValue }) {
 
 export function ComparisonTable() {
   return (
-    <section className="relative border-t border-zinc-900 bg-zinc-950/10 px-6 py-16 backdrop-blur-sm md:py-32">
+    <section className="relative border-t border-zinc-900 bg-zinc-950/10 px-6 py-16 md:py-32">
       <div className="mx-auto max-w-4xl">
         {/* Section header - SEO: competitor comparison keywords */}
         <div className="mb-16 text-center">

From 1ea0e9b90dde4668bd961013b0fdf462e1ea2129 Mon Sep 17 00:00:00 2001
From: Ignat <ign.romanov@gmail.com>
Date: Mon, 25 May 2026 02:47:23 -0300
Subject: [PATCH 03/10] perf(landing/comparison): decouple ComparisonTable via
 children-prop pattern (4/4)

Kai lag-analysis 2026-05-25: ComparisonTable has no hooks/state/handlers and
does not need to be bundled inside BelowFoldSections client chunk. Moved to
comparisonTable: ReactNode prop; LandingContent passes <ComparisonTable />.
Full RSC gain requires LandingContent server-shell split (follow-up for Kai).
---
 src/widgets/landing/ui/BelowFoldSections.tsx | 14 +++++++++++---
 src/widgets/landing/ui/LandingContent.tsx    |  7 ++++---
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/src/widgets/landing/ui/BelowFoldSections.tsx b/src/widgets/landing/ui/BelowFoldSections.tsx
index 69487969..22ec1eae 100644
--- a/src/widgets/landing/ui/BelowFoldSections.tsx
+++ b/src/widgets/landing/ui/BelowFoldSections.tsx
@@ -12,23 +12,31 @@
  *
  * All motion-dependent components are imported here to ensure
  * Framer Motion is bundled only in this chunk, not the initial load.
+ *
+ * comparisonTable is accepted as a ReactNode prop so ComparisonTable
+ * (which has no client-side needs) can be rendered by a server-side
+ * ancestor when the RSC boundary allows it.
  */
 
+import type { ReactNode } from 'react'
 import { HowItWorks } from '../how-it-works/HowItWorks'
 import { DemoSection } from '../demo-section/DemoSection'
 import { WhyVoidPay } from '../why-voidpay/WhyVoidPay'
-import { ComparisonTable } from '../comparison/ComparisonTable'
 import { AudienceSection } from '../audience-section/AudienceSection'
 import { FaqSection } from '../faq-section'
 import { FooterCta } from '../footer-cta/FooterCta'
 
-export function BelowFoldSections() {
+interface BelowFoldSectionsProps {
+  comparisonTable: ReactNode
+}
+
+export function BelowFoldSections({ comparisonTable }: BelowFoldSectionsProps) {
   return (
     <>
       <HowItWorks />
       <DemoSection />
       <WhyVoidPay />
-      <ComparisonTable />
+      {comparisonTable}
       <AudienceSection />
       <FaqSection />
       <FooterCta />
diff --git a/src/widgets/landing/ui/LandingContent.tsx b/src/widgets/landing/ui/LandingContent.tsx
index e337ca84..70dc990f 100644
--- a/src/widgets/landing/ui/LandingContent.tsx
+++ b/src/widgets/landing/ui/LandingContent.tsx
@@ -21,11 +21,12 @@
  * webpack from statically analyzing and bundling them.
  */
 
-import { useState, useEffect, type ComponentType } from 'react'
+import { useState, useEffect, type ComponentType, type ReactNode } from 'react'
 import { useCreatorStore } from '@/entities/creator'
 import { HeroSection } from '../hero-section/HeroSection'
 import { SocialProofStrip } from '../social-proof'
 import { BelowFoldLoader } from './BelowFoldLoader'
+import { ComparisonTable } from '../comparison/ComparisonTable'
 
 /**
  * SEO-friendly placeholder for below-fold content.
@@ -52,7 +53,7 @@ function BelowFoldPlaceholder() {
  * LazyBelowFold - Loads below-fold sections ONLY when triggered
  */
 function LazyBelowFold() {
-  const [Component, setComponent] = useState<ComponentType<object> | null>(null)
+  const [Component, setComponent] = useState<ComponentType<{ comparisonTable: ReactNode }> | null>(null)
   const [loadError, setLoadError] = useState<Error | null>(null)
 
   useEffect(() => {
@@ -81,7 +82,7 @@ function LazyBelowFold() {
   }
 
   if (!Component) return <BelowFoldPlaceholder />
-  return <Component />
+  return <Component comparisonTable={<ComparisonTable />} />
 }
 
 export function LandingContent() {

From c13000580982ae9e6d45e5998df98b5fb47faefa Mon Sep 17 00:00:00 2001
From: Ignat <ign.romanov@gmail.com>
Date: Thu, 28 May 2026 16:06:11 -0300
Subject: [PATCH 04/10] perf(landing): add framer-motion and @web3icons/react
 to optimizePackageImports

---
 next.config.mjs | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/next.config.mjs b/next.config.mjs
index a5d88820..deff7ee6 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -28,6 +28,8 @@ const nextConfig = {
       'wagmi',
       'viem',
       '@rainbow-me/rainbowkit',
+      'framer-motion',
+      '@web3icons/react',
     ],
   },
 

From 3fd08863f526c95fee7acc79ff29795e35b33381 Mon Sep 17 00:00:00 2001
From: Ignat <ign.romanov@gmail.com>
Date: Thu, 28 May 2026 16:06:22 -0300
Subject: [PATCH 05/10] perf(landing): replace next/script JSON-LD with plain
 <script> for SSR-in-HTML

---
 src/app/(landing)/page.tsx | 15 +++++----------
 1 file changed, 5 insertions(+), 10 deletions(-)

diff --git a/src/app/(landing)/page.tsx b/src/app/(landing)/page.tsx
index 4e66a755..0eada253 100644
--- a/src/app/(landing)/page.tsx
+++ b/src/app/(landing)/page.tsx
@@ -4,7 +4,6 @@
  */
 
 import type { Metadata } from 'next'
-import Script from 'next/script'
 
 import { APP_URLS, SOCIAL_URLS } from '@/shared/config'
 import { defaultOgImages } from '@/features/og-image'
@@ -140,25 +139,21 @@ export const metadata: Metadata = {
 export default function LandingPage() {
   return (
     <>
-      {/* JSON-LD Structured Data */}
-      <Script
-        id="faq-schema"
+      {/* JSON-LD Structured Data - rendered in initial SSR HTML for crawlers */}
+      <script
         type="application/ld+json"
         dangerouslySetInnerHTML={{ __html: JSON.stringify(faqSchema) }}
       />
-      <Script
-        id="organization-schema"
+      <script
         type="application/ld+json"
         dangerouslySetInnerHTML={{ __html: JSON.stringify(organizationSchema) }}
       />
-      <Script
-        id="software-schema"
+      <script
         type="application/ld+json"
         dangerouslySetInnerHTML={{ __html: JSON.stringify(softwareSchema) }}
       />
       {/* HowTo schema for rich snippets - safe: static data with JSON.stringify */}
-      <Script
-        id="howto-schema"
+      <script
         type="application/ld+json"
         dangerouslySetInnerHTML={{ __html: JSON.stringify(howToSchema) }}
       />

From ca22b916ddfe9ac837b43d57ce1efe908846cd84 Mon Sep 17 00:00:00 2001
From: Ignat <ign.romanov@gmail.com>
Date: Thu, 28 May 2026 16:06:37 -0300
Subject: [PATCH 06/10] perf(landing/hero): extract HeroCta client child, make
 HeroSection a Server Component

<h1> now paints from SSR HTML without waiting for hydration.
HeroCta owns the track() onClick call as a thin 'use client' boundary.
---
 src/widgets/landing/hero-section/HeroCta.tsx  | 36 +++++++++++++++++++
 .../landing/hero-section/HeroSection.tsx      | 28 ++++-----------
 2 files changed, 42 insertions(+), 22 deletions(-)
 create mode 100644 src/widgets/landing/hero-section/HeroCta.tsx

diff --git a/src/widgets/landing/hero-section/HeroCta.tsx b/src/widgets/landing/hero-section/HeroCta.tsx
new file mode 100644
index 00000000..38c2d34c
--- /dev/null
+++ b/src/widgets/landing/hero-section/HeroCta.tsx
@@ -0,0 +1,36 @@
+/**
+ * HeroCta - Client CTA button for HeroSection
+ * Feature: 012-landing-page
+ *
+ * Extracted as a thin client child so HeroSection can stay a Server Component
+ * (the <h1> paints from SSR HTML without waiting for hydration). This component
+ * owns the analytics track() call on click.
+ */
+
+'use client'
+
+import Link from 'next/link'
+
+import { track, AnalyticsEvent } from '@/features/analytics'
+import { ArrowRightIcon } from '@/shared/ui/icons'
+import { Button } from '@/shared/ui/button'
+
+export function HeroCta(): React.JSX.Element {
+  return (
+    <div className="hero-animate-cta flex flex-col items-center px-4 pt-8">
+      <Button
+        variant="glow"
+        size="lg"
+        className="h-14 rounded-2xl px-8 text-base shadow-[0_0_40px_-10px_rgba(124,58,237,0.5)]"
+        onClick={() => track(AnalyticsEvent.LANDING_CTA_CLICK, { cta_location: 'hero' })}
+        asChild
+      >
+        <Link href="/create">
+          Create Your Invoice
+          <ArrowRightIcon size={16} />
+        </Link>
+      </Button>
+      <span className="mt-3 text-sm text-zinc-400">No signup. Takes 30 seconds.</span>
+    </div>
+  )
+}
diff --git a/src/widgets/landing/hero-section/HeroSection.tsx b/src/widgets/landing/hero-section/HeroSection.tsx
index d81f3fc5..e023b6f5 100644
--- a/src/widgets/landing/hero-section/HeroSection.tsx
+++ b/src/widgets/landing/hero-section/HeroSection.tsx
@@ -6,18 +6,16 @@
  * Performance: Uses CSS animations instead of Framer Motion for LCP optimization.
  * CSS animations in globals.css: hero-animate-container, hero-animate-badge, etc.
  * Reduced motion is handled via @media (prefers-reduced-motion) in CSS.
+ *
+ * Server Component: the <h1> paints from SSR HTML without waiting for hydration.
+ * The CTA (which needs analytics) lives in the HeroCta client child.
  */
 
-'use client'
-
-import Link from 'next/link'
-
-import { track, AnalyticsEvent } from '@/features/analytics'
-import { ArrowRightIcon } from '@/shared/ui/icons'
 import { AuroraText } from '@/shared/ui/aurora-text'
-import { Button } from '@/shared/ui/button'
 import { Heading, Text } from '@/shared/ui/typography'
 
+import { HeroCta } from './HeroCta'
+
 export function HeroSection() {
   return (
     <section
@@ -58,21 +56,7 @@ export function HeroSection() {
         </Text>
 
         {/* CTA */}
-        <div className="hero-animate-cta flex flex-col items-center px-4 pt-8">
-          <Button
-            variant="glow"
-            size="lg"
-            className="h-14 rounded-2xl px-8 text-base shadow-[0_0_40px_-10px_rgba(124,58,237,0.5)]"
-            onClick={() => track(AnalyticsEvent.LANDING_CTA_CLICK, { cta_location: 'hero' })}
-            asChild
-          >
-            <Link href="/create">
-              Create Your Invoice
-              <ArrowRightIcon size={16} />
-            </Link>
-          </Button>
-          <span className="mt-3 text-sm text-zinc-400">No signup. Takes 30 seconds.</span>
-        </div>
+        <HeroCta />
       </div>
 
       {/* Scroll indicator - positioned at bottom of section */}

From f77930f9da78ddbbb229cdd6cf244ce928221ec4 Mon Sep 17 00:00:00 2001
From: Ignat <ign.romanov@gmail.com>
Date: Thu, 28 May 2026 16:06:45 -0300
Subject: [PATCH 07/10] =?UTF-8?q?perf(landing/network-bg):=20blur-3xl?=
 =?UTF-8?q?=E2=86=92blur-2xl,=20add=20will-change-transform,=20guard=20tra?=
 =?UTF-8?q?nsition=20under=20reduced-motion?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Reduces compositing cost on mobile. motion-reduce:transition-none prevents
color-transition animation for users who opted out. Test updated to match blur-2xl.
---
 .../network-background/NetworkBackground.tsx  |  4 +-
 .../__tests__/NetworkBackground.test.tsx      | 54 +++++++++----------
 2 files changed, 29 insertions(+), 29 deletions(-)

diff --git a/src/widgets/network-background/NetworkBackground.tsx b/src/widgets/network-background/NetworkBackground.tsx
index a50efbeb..a3bc3091 100644
--- a/src/widgets/network-background/NetworkBackground.tsx
+++ b/src/widgets/network-background/NetworkBackground.tsx
@@ -51,13 +51,13 @@ export function NetworkBackground({ className }: NetworkBackgroundProps) {
       {/* Animated gradient blobs */}
       <div
         className={cn(
-          'absolute top-1/4 left-1/4 h-96 w-96 rounded-full blur-3xl transition-colors duration-700',
+          'absolute top-1/4 left-1/4 h-96 w-96 rounded-full blur-2xl will-change-transform transition-colors duration-700 motion-reduce:transition-none',
           colors.primary
         )}
       />
       <div
         className={cn(
-          'absolute right-1/4 bottom-1/4 h-96 w-96 rounded-full blur-3xl transition-colors duration-700',
+          'absolute right-1/4 bottom-1/4 h-96 w-96 rounded-full blur-2xl will-change-transform transition-colors duration-700 motion-reduce:transition-none',
           colors.secondary
         )}
       />
diff --git a/src/widgets/network-background/__tests__/NetworkBackground.test.tsx b/src/widgets/network-background/__tests__/NetworkBackground.test.tsx
index 559ed773..b2b7a625 100644
--- a/src/widgets/network-background/__tests__/NetworkBackground.test.tsx
+++ b/src/widgets/network-background/__tests__/NetworkBackground.test.tsx
@@ -96,14 +96,14 @@ describe('NetworkBackground', () => {
     it('renders two gradient blobs', () => {
       const { container } = render(<NetworkBackground />)
 
-      const blobs = container.querySelectorAll('.rounded-full.blur-3xl')
+      const blobs = container.querySelectorAll('.rounded-full.blur-2xl')
       expect(blobs.length).toBe(2)
     })
 
     it('positions first blob at top-left quadrant', () => {
       const { container } = render(<NetworkBackground />)
 
-      const blobs = container.querySelectorAll('.rounded-full.blur-3xl')
+      const blobs = container.querySelectorAll('.rounded-full.blur-2xl')
       expect(blobs[0]).toHaveClass('top-1/4')
       expect(blobs[0]).toHaveClass('left-1/4')
     })
@@ -111,7 +111,7 @@ describe('NetworkBackground', () => {
     it('positions second blob at bottom-right quadrant', () => {
       const { container } = render(<NetworkBackground />)
 
-      const blobs = container.querySelectorAll('.rounded-full.blur-3xl')
+      const blobs = container.querySelectorAll('.rounded-full.blur-2xl')
       expect(blobs[1]).toHaveClass('right-1/4')
       expect(blobs[1]).toHaveClass('bottom-1/4')
     })
@@ -119,26 +119,26 @@ describe('NetworkBackground', () => {
     it('applies consistent size to blobs', () => {
       const { container } = render(<NetworkBackground />)
 
-      const blobs = container.querySelectorAll('.rounded-full.blur-3xl')
+      const blobs = container.querySelectorAll('.rounded-full.blur-2xl')
       blobs.forEach((blob) => {
         expect(blob).toHaveClass('h-96')
         expect(blob).toHaveClass('w-96')
       })
     })
 
-    it('applies blur-3xl effect to blobs', () => {
+    it('applies blur-2xl effect to blobs', () => {
       const { container } = render(<NetworkBackground />)
 
       const blobs = container.querySelectorAll('.rounded-full')
       blobs.forEach((blob) => {
-        expect(blob).toHaveClass('blur-3xl')
+        expect(blob).toHaveClass('blur-2xl')
       })
     })
 
     it('uses smooth color transitions', () => {
       const { container } = render(<NetworkBackground />)
 
-      const blobs = container.querySelectorAll('.rounded-full.blur-3xl')
+      const blobs = container.querySelectorAll('.rounded-full.blur-2xl')
       blobs.forEach((blob) => {
         expect(blob).toHaveClass('transition-colors')
         expect(blob).toHaveClass('duration-700')
@@ -152,7 +152,7 @@ describe('NetworkBackground', () => {
 
       const { container } = render(<NetworkBackground />)
 
-      const blobs = container.querySelectorAll('.rounded-full.blur-3xl')
+      const blobs = container.querySelectorAll('.rounded-full.blur-2xl')
       expect(blobs[0]).toHaveClass('bg-violet-600/10')
       expect(blobs[1]).toHaveClass('bg-indigo-600/10')
     })
@@ -164,7 +164,7 @@ describe('NetworkBackground', () => {
 
       const { container } = render(<NetworkBackground />)
 
-      const blobs = container.querySelectorAll('.rounded-full.blur-3xl')
+      const blobs = container.querySelectorAll('.rounded-full.blur-2xl')
       expect(blobs[0]).toHaveClass('bg-blue-600/10')
       expect(blobs[1]).toHaveClass('bg-cyan-600/10')
     })
@@ -176,7 +176,7 @@ describe('NetworkBackground', () => {
 
       const { container } = render(<NetworkBackground />)
 
-      const blobs = container.querySelectorAll('.rounded-full.blur-3xl')
+      const blobs = container.querySelectorAll('.rounded-full.blur-2xl')
       expect(blobs[0]).toHaveClass('bg-red-600/10')
       expect(blobs[1]).toHaveClass('bg-orange-600/10')
     })
@@ -188,7 +188,7 @@ describe('NetworkBackground', () => {
 
       const { container } = render(<NetworkBackground />)
 
-      const blobs = container.querySelectorAll('.rounded-full.blur-3xl')
+      const blobs = container.querySelectorAll('.rounded-full.blur-2xl')
       expect(blobs[0]).toHaveClass('bg-purple-600/10')
       expect(blobs[1]).toHaveClass('bg-violet-600/10')
     })
@@ -200,14 +200,14 @@ describe('NetworkBackground', () => {
 
       const { container, rerender } = render(<NetworkBackground />)
 
-      let blobs = container.querySelectorAll('.rounded-full.blur-3xl')
+      let blobs = container.querySelectorAll('.rounded-full.blur-2xl')
       expect(blobs[0]).toHaveClass('bg-violet-600/10')
 
       // Change theme
       useCreatorStore.setState({ networkTheme: 'arbitrum' })
       rerender(<NetworkBackground />)
 
-      blobs = container.querySelectorAll('.rounded-full.blur-3xl')
+      blobs = container.querySelectorAll('.rounded-full.blur-2xl')
       expect(blobs[0]).toHaveClass('bg-blue-600/10')
     })
 
@@ -216,14 +216,14 @@ describe('NetworkBackground', () => {
 
       const { container, rerender } = render(<NetworkBackground />)
 
-      let blobs = container.querySelectorAll('.rounded-full.blur-3xl')
+      let blobs = container.querySelectorAll('.rounded-full.blur-2xl')
       expect(blobs[0]).toHaveClass('bg-red-600/10')
 
       // Change theme
       useCreatorStore.setState({ networkTheme: 'polygon' })
       rerender(<NetworkBackground />)
 
-      blobs = container.querySelectorAll('.rounded-full.blur-3xl')
+      blobs = container.querySelectorAll('.rounded-full.blur-2xl')
       expect(blobs[0]).toHaveClass('bg-purple-600/10')
     })
 
@@ -243,7 +243,7 @@ describe('NetworkBackground', () => {
       useCreatorStore.setState({ networkTheme: 'polygon' })
       rerender(<NetworkBackground />)
 
-      const blobs = container.querySelectorAll('.rounded-full.blur-3xl')
+      const blobs = container.querySelectorAll('.rounded-full.blur-2xl')
       expect(blobs[0]).toHaveClass('bg-purple-600/10')
     })
   })
@@ -254,7 +254,7 @@ describe('NetworkBackground', () => {
 
       const { container } = render(<NetworkBackground />)
 
-      const blobs = container.querySelectorAll('.rounded-full.blur-3xl')
+      const blobs = container.querySelectorAll('.rounded-full.blur-2xl')
       // Should fallback to ethereum
       expect(blobs[0]).toHaveClass('bg-violet-600/10')
       expect(blobs[1]).toHaveClass('bg-indigo-600/10')
@@ -265,7 +265,7 @@ describe('NetworkBackground', () => {
 
       const { container } = render(<NetworkBackground />)
 
-      const blobs = container.querySelectorAll('.rounded-full.blur-3xl')
+      const blobs = container.querySelectorAll('.rounded-full.blur-2xl')
       // Should fallback to ethereum
       expect(blobs[0]).toHaveClass('bg-violet-600/10')
     })
@@ -300,7 +300,7 @@ describe('NetworkBackground', () => {
     it('uses smooth CSS transitions instead of JavaScript', () => {
       const { container } = render(<NetworkBackground />)
 
-      const blobs = container.querySelectorAll('.rounded-full.blur-3xl')
+      const blobs = container.querySelectorAll('.rounded-full.blur-2xl')
       blobs.forEach((blob) => {
         expect(blob).toHaveClass('transition-colors')
       })
@@ -309,7 +309,7 @@ describe('NetworkBackground', () => {
     it('applies long transition duration for subtle effect', () => {
       const { container } = render(<NetworkBackground />)
 
-      const blobs = container.querySelectorAll('.rounded-full.blur-3xl')
+      const blobs = container.querySelectorAll('.rounded-full.blur-2xl')
       blobs.forEach((blob) => {
         expect(blob).toHaveClass('duration-700')
       })
@@ -336,7 +336,7 @@ describe('NetworkBackground', () => {
     it('positions blobs relative to viewport on mobile', () => {
       const { container } = render(<NetworkBackground />)
 
-      const blobs = container.querySelectorAll('.rounded-full.blur-3xl')
+      const blobs = container.querySelectorAll('.rounded-full.blur-2xl')
       // Fractional positioning (1/4) scales with viewport
       expect(blobs[0]).toHaveClass('top-1/4')
       expect(blobs[0]).toHaveClass('left-1/4')
@@ -345,9 +345,9 @@ describe('NetworkBackground', () => {
     it('maintains consistent blur radius across screen sizes', () => {
       const { container } = render(<NetworkBackground />)
 
-      const blobs = container.querySelectorAll('.rounded-full.blur-3xl')
+      const blobs = container.querySelectorAll('.rounded-full.blur-2xl')
       blobs.forEach((blob) => {
-        expect(blob).toHaveClass('blur-3xl')
+        expect(blob).toHaveClass('blur-2xl')
       })
     })
   })
@@ -412,7 +412,7 @@ describe('NetworkBackground', () => {
     it('maintains consistent opacity', () => {
       const { container } = render(<NetworkBackground />)
 
-      const blobs = container.querySelectorAll('.rounded-full.blur-3xl')
+      const blobs = container.querySelectorAll('.rounded-full.blur-2xl')
       blobs.forEach((blob) => {
         // Opacity baked into color classes (e.g., bg-violet-600/10)
         expect(blob.className).toContain('/10')
@@ -448,15 +448,15 @@ describe('NetworkBackground', () => {
     it('applies consistent blur intensity', () => {
       const { container } = render(<NetworkBackground />)
 
-      const blobs = container.querySelectorAll('.blur-3xl')
+      const blobs = container.querySelectorAll('.blur-2xl')
       expect(blobs.length).toBe(2)
-      // blur-3xl matches design system blur scale
+      // blur-2xl matches design system blur scale
     })
 
     it('uses low opacity for subtle effect', () => {
       const { container } = render(<NetworkBackground />)
 
-      const blobs = container.querySelectorAll('.rounded-full.blur-3xl')
+      const blobs = container.querySelectorAll('.rounded-full.blur-2xl')
       blobs.forEach((blob) => {
         // /10 opacity (10%) for subtle ambient glow
         expect(blob.className).toContain('/10')

From 61da0965be24e7e5482467f0e5853665c58d929d Mon Sep 17 00:00:00 2001
From: Ignat <ign.romanov@gmail.com>
Date: Thu, 28 May 2026 16:06:56 -0300
Subject: [PATCH 08/10] perf(landing): strip backdrop-blur-sm from below-fold
 section roots and cards
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Removes 4px blur layers that trigger GPU compositing on mobile with no visible
effect on zinc-950 bg. Replaced with solid semi-opaque bg tokens. Affected:
SocialProofStrip, HowItWorks, FaqSection (section + inner accordion), WhyVoidPay
cards (×3), AudienceCard. ComparisonTable already done (cc2dc46). Snapshots updated.
---
 .../landing/audience-section/AudienceCard.tsx | 10 +++++++---
 .../landing/faq-section/FaqSection.tsx        |  4 ++--
 .../landing/how-it-works/HowItWorks.tsx       | 10 ++++++----
 .../__snapshots__/HowItWorks.test.tsx.snap    |  2 +-
 .../landing/social-proof/SocialProofStrip.tsx |  2 +-
 .../landing/why-voidpay/WhyVoidPay.tsx        | 20 ++++++++++---------
 .../why-voidpay/__tests__/WhyVoidPay.test.tsx |  6 +++---
 .../__snapshots__/WhyVoidPay.test.tsx.snap    |  6 +++---
 8 files changed, 34 insertions(+), 26 deletions(-)

diff --git a/src/widgets/landing/audience-section/AudienceCard.tsx b/src/widgets/landing/audience-section/AudienceCard.tsx
index d2022687..4b46a337 100644
--- a/src/widgets/landing/audience-section/AudienceCard.tsx
+++ b/src/widgets/landing/audience-section/AudienceCard.tsx
@@ -3,6 +3,8 @@
  * Feature: 012-landing-page
  */
 
+import { memo } from 'react'
+
 import type { IconProps } from '@/shared/ui/icons'
 
 import { cn } from '@/shared/lib/utils'
@@ -16,7 +18,7 @@ export type AudienceCardProps = {
   iconColor?: string
 }
 
-export function AudienceCard({
+export const AudienceCard = memo(function AudienceCard({
   icon: Icon,
   title,
   headline,
@@ -24,7 +26,7 @@ export function AudienceCard({
   iconColor = 'text-violet-500',
 }: AudienceCardProps) {
   return (
-    <div className="group rounded-3xl border border-zinc-800/50 bg-gradient-to-b from-zinc-900/60 to-zinc-950/60 p-5 backdrop-blur-sm transition-all hover:border-zinc-700 hover:shadow-lg hover:shadow-zinc-900/20 md:p-8">
+    <div className="group rounded-3xl border border-zinc-800/50 bg-gradient-to-b from-zinc-900/60 to-zinc-950/60 p-5 transition-all hover:border-zinc-700 hover:shadow-lg hover:shadow-zinc-900/20 md:p-8">
       {/* Icon + Title row */}
       <div className="mb-4 flex items-center gap-3">
         <div className="flex h-10 w-10 items-center justify-center rounded-xl border border-zinc-800 bg-zinc-950">
@@ -46,4 +48,6 @@ export function AudienceCard({
       </Text>
     </div>
   )
-}
+})
+
+AudienceCard.displayName = 'AudienceCard'
diff --git a/src/widgets/landing/faq-section/FaqSection.tsx b/src/widgets/landing/faq-section/FaqSection.tsx
index a29a9626..1112a7ab 100644
--- a/src/widgets/landing/faq-section/FaqSection.tsx
+++ b/src/widgets/landing/faq-section/FaqSection.tsx
@@ -76,7 +76,7 @@ export function FaqSection() {
   return (
     <section
       id="faq"
-      className="relative border-t border-zinc-900 bg-zinc-950/10 px-4 py-16 md:px-6 md:py-32"
+      className="relative border-t border-zinc-900 bg-zinc-950/50 px-4 py-16 md:px-6 md:py-32"
       aria-labelledby="faq-heading"
     >
       <div className="mx-auto max-w-3xl">
@@ -91,7 +91,7 @@ export function FaqSection() {
         </div>
 
         {/* FAQ Accordion */}
-        <div className="rounded-2xl border border-zinc-800 bg-zinc-900/20 px-4 backdrop-blur-sm md:px-8">
+        <div className="rounded-2xl border border-zinc-800 bg-zinc-900/50 px-4 md:px-8">
           {FAQ_ITEMS.map((item, index) => (
             <FaqItem
               key={index}
diff --git a/src/widgets/landing/how-it-works/HowItWorks.tsx b/src/widgets/landing/how-it-works/HowItWorks.tsx
index 81671c3b..cf9efc1e 100644
--- a/src/widgets/landing/how-it-works/HowItWorks.tsx
+++ b/src/widgets/landing/how-it-works/HowItWorks.tsx
@@ -4,7 +4,7 @@
  * User Story: US3 (Feature Discovery & Trust Building)
  */
 
-import type { SVGProps } from 'react'
+import { memo, type SVGProps } from 'react'
 
 import { ArrowRightIcon } from '@/shared/ui/icons'
 
@@ -12,7 +12,7 @@ import { Heading, Text } from '@/shared/ui/typography'
 
 import { WORKFLOW_STEPS } from '../constants/features'
 
-function TimelineStep({
+const TimelineStep = memo(function TimelineStep({
   step,
   icon: Icon,
   title,
@@ -56,13 +56,15 @@ function TimelineStep({
       )}
     </div>
   )
-}
+})
+
+TimelineStep.displayName = 'TimelineStep'
 
 export function HowItWorks() {
   return (
     <section
       id="how-it-works"
-      className="relative bg-zinc-950/10 px-6 py-16 backdrop-blur-sm md:py-32"
+      className="relative bg-zinc-950/50 px-6 py-16 md:py-32"
       aria-labelledby="how-it-works-heading"
     >
       <div className="mx-auto max-w-5xl space-y-16">
diff --git a/src/widgets/landing/how-it-works/__tests__/__snapshots__/HowItWorks.test.tsx.snap b/src/widgets/landing/how-it-works/__tests__/__snapshots__/HowItWorks.test.tsx.snap
index 6b99f4bd..d20aada2 100644
--- a/src/widgets/landing/how-it-works/__tests__/__snapshots__/HowItWorks.test.tsx.snap
+++ b/src/widgets/landing/how-it-works/__tests__/__snapshots__/HowItWorks.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`HowItWorks > T023-test: Snapshot > should match snapshot 1`] = `
 <div>
   <section
     aria-labelledby="how-it-works-heading"
-    class="relative bg-zinc-950/10 px-6 py-16 backdrop-blur-sm md:py-32"
+    class="relative bg-zinc-950/50 px-6 py-16 md:py-32"
     id="how-it-works"
   >
     <div
diff --git a/src/widgets/landing/social-proof/SocialProofStrip.tsx b/src/widgets/landing/social-proof/SocialProofStrip.tsx
index ec4c17cf..553aeeec 100644
--- a/src/widgets/landing/social-proof/SocialProofStrip.tsx
+++ b/src/widgets/landing/social-proof/SocialProofStrip.tsx
@@ -77,7 +77,7 @@ function TrustBadge({ icon: Icon, label, description, href }: TrustBadgeData) {
 
 export function SocialProofStrip() {
   return (
-    <section className="relative border-y border-zinc-800/50 bg-zinc-900/30 px-6 py-8 backdrop-blur-sm">
+    <section className="relative border-y border-zinc-800/50 bg-zinc-900/50 px-6 py-8">
       <div className="hero-animate-social-proof mx-auto max-w-5xl">
         <div className="grid grid-cols-2 gap-6 md:grid-cols-4 md:gap-8">
           {TRUST_BADGES.map((badge) => (
diff --git a/src/widgets/landing/why-voidpay/WhyVoidPay.tsx b/src/widgets/landing/why-voidpay/WhyVoidPay.tsx
index d43c6da1..ca63ae10 100644
--- a/src/widgets/landing/why-voidpay/WhyVoidPay.tsx
+++ b/src/widgets/landing/why-voidpay/WhyVoidPay.tsx
@@ -4,7 +4,7 @@
  * User Story: US3 (Feature Discovery & Trust Building)
  */
 
-import type { SVGProps } from 'react'
+import { memo, type SVGProps } from 'react'
 
 import { cn } from '@/shared/lib/utils'
 import { Heading, Text } from '@/shared/ui/typography'
@@ -14,7 +14,12 @@ import { FEATURE_CARDS } from '../constants/features'
 // TOP 3 features to highlight (by id) - order matters for display
 const TOP_FEATURES = ['no-database', 'instant', 'multichain']
 
-function HeroFeatureCard({
+// Sorted top cards - inputs are static constants, hoisted to module scope
+const topCards = TOP_FEATURES.map((id) => FEATURE_CARDS.find((card) => card.id === id)).filter(
+  (card): card is NonNullable<typeof card> => card !== undefined
+)
+
+const HeroFeatureCard = memo(function HeroFeatureCard({
   icon: Icon,
   title,
   description,
@@ -26,7 +31,7 @@ function HeroFeatureCard({
   iconColor?: string
 }) {
   return (
-    <div className="group rounded-3xl border border-violet-500/20 bg-gradient-to-b from-zinc-900/80 to-zinc-950/80 p-6 backdrop-blur-sm transition-all hover:border-violet-500/40 hover:shadow-lg hover:shadow-violet-900/10 md:p-10">
+    <div className="group rounded-3xl border border-violet-500/20 bg-gradient-to-b from-zinc-900/80 to-zinc-950/80 p-6 transition-all hover:border-violet-500/40 hover:shadow-lg hover:shadow-violet-900/10 md:p-10">
       {/* Icon container - larger */}
       <div className="mb-8 flex h-16 w-16 items-center justify-center rounded-2xl border border-zinc-700 bg-zinc-900 shadow-lg transition-transform group-hover:scale-110">
         <Icon className={cn('h-8 w-8', iconColor)} aria-hidden="true" />
@@ -39,14 +44,11 @@ function HeroFeatureCard({
       </Text>
     </div>
   )
-}
+})
 
-export function WhyVoidPay() {
-  // Sort topCards to match TOP_FEATURES order
-  const topCards = TOP_FEATURES.map((id) => FEATURE_CARDS.find((card) => card.id === id)).filter(
-    (card): card is NonNullable<typeof card> => card !== undefined
-  )
+HeroFeatureCard.displayName = 'HeroFeatureCard'
 
+export function WhyVoidPay() {
   return (
     <section className="relative bg-transparent px-6 py-16 md:py-32" aria-labelledby="why-voidpay-heading">
       <div className="mx-auto max-w-6xl">
diff --git a/src/widgets/landing/why-voidpay/__tests__/WhyVoidPay.test.tsx b/src/widgets/landing/why-voidpay/__tests__/WhyVoidPay.test.tsx
index 1b7aea2f..475f4c9f 100644
--- a/src/widgets/landing/why-voidpay/__tests__/WhyVoidPay.test.tsx
+++ b/src/widgets/landing/why-voidpay/__tests__/WhyVoidPay.test.tsx
@@ -44,11 +44,11 @@ describe('WhyVoidPay', () => {
       expect(screen.getByText('Why Choose VoidPay for Crypto Invoicing')).toBeInTheDocument()
     })
 
-    it('should render 3 cards with backdrop blur', () => {
+    it('should render 3 feature cards', () => {
       const { container } = render(<WhyVoidPay />)
 
-      // Should have 3 Card components (with backdrop-blur)
-      const cards = container.querySelectorAll('[class*="backdrop-blur"]')
+      // Should have 3 HeroFeatureCard components (rounded-3xl is structural)
+      const cards = container.querySelectorAll('.rounded-3xl')
       expect(cards.length).toBe(3)
     })
   })
diff --git a/src/widgets/landing/why-voidpay/__tests__/__snapshots__/WhyVoidPay.test.tsx.snap b/src/widgets/landing/why-voidpay/__tests__/__snapshots__/WhyVoidPay.test.tsx.snap
index a04a9d68..b52c8747 100644
--- a/src/widgets/landing/why-voidpay/__tests__/__snapshots__/WhyVoidPay.test.tsx.snap
+++ b/src/widgets/landing/why-voidpay/__tests__/__snapshots__/WhyVoidPay.test.tsx.snap
@@ -28,7 +28,7 @@ exports[`WhyVoidPay > T023-test: Snapshot > should match snapshot 1`] = `
         class="grid grid-cols-1 gap-6 md:grid-cols-3"
       >
         <div
-          class="group rounded-3xl border border-violet-500/20 bg-gradient-to-b from-zinc-900/80 to-zinc-950/80 p-6 backdrop-blur-sm transition-all hover:border-violet-500/40 hover:shadow-lg hover:shadow-violet-900/10 md:p-10"
+          class="group rounded-3xl border border-violet-500/20 bg-gradient-to-b from-zinc-900/80 to-zinc-950/80 p-6 transition-all hover:border-violet-500/40 hover:shadow-lg hover:shadow-violet-900/10 md:p-10"
         >
           <div
             class="mb-8 flex h-16 w-16 items-center justify-center rounded-2xl border border-zinc-700 bg-zinc-900 shadow-lg transition-transform group-hover:scale-110"
@@ -72,7 +72,7 @@ exports[`WhyVoidPay > T023-test: Snapshot > should match snapshot 1`] = `
           </p>
         </div>
         <div
-          class="group rounded-3xl border border-violet-500/20 bg-gradient-to-b from-zinc-900/80 to-zinc-950/80 p-6 backdrop-blur-sm transition-all hover:border-violet-500/40 hover:shadow-lg hover:shadow-violet-900/10 md:p-10"
+          class="group rounded-3xl border border-violet-500/20 bg-gradient-to-b from-zinc-900/80 to-zinc-950/80 p-6 transition-all hover:border-violet-500/40 hover:shadow-lg hover:shadow-violet-900/10 md:p-10"
         >
           <div
             class="mb-8 flex h-16 w-16 items-center justify-center rounded-2xl border border-zinc-700 bg-zinc-900 shadow-lg transition-transform group-hover:scale-110"
@@ -107,7 +107,7 @@ exports[`WhyVoidPay > T023-test: Snapshot > should match snapshot 1`] = `
           </p>
         </div>
         <div
-          class="group rounded-3xl border border-violet-500/20 bg-gradient-to-b from-zinc-900/80 to-zinc-950/80 p-6 backdrop-blur-sm transition-all hover:border-violet-500/40 hover:shadow-lg hover:shadow-violet-900/10 md:p-10"
+          class="group rounded-3xl border border-violet-500/20 bg-gradient-to-b from-zinc-900/80 to-zinc-950/80 p-6 transition-all hover:border-violet-500/40 hover:shadow-lg hover:shadow-violet-900/10 md:p-10"
         >
           <div
             class="mb-8 flex h-16 w-16 items-center justify-center rounded-2xl border border-zinc-700 bg-zinc-900 shadow-lg transition-transform group-hover:scale-110"

From a914d8f76959e807c8383ae0cf56be24f8240e63 Mon Sep 17 00:00:00 2001
From: Ignat <ign.romanov@gmail.com>
Date: Thu, 28 May 2026 16:07:04 -0300
Subject: [PATCH 09/10] perf(landing/demo): pause rotation on visibilitychange
 (tab hidden)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Stops the 10s interval while the tab is backgrounded so it stops re-rendering
the InvoicePaper subtree when the user is not watching. Composes independently
with the existing manual pause/resume and hover-pause — visibility state is a
separate isHidden flag, not overwriting isPaused. Tests: TDD red→green verified.
---
 .../__tests__/use-demo-rotation.test.tsx      | 65 +++++++++++++++++--
 .../landing/hooks/use-demo-rotation.ts        | 17 ++++-
 2 files changed, 75 insertions(+), 7 deletions(-)

diff --git a/src/widgets/landing/hooks/__tests__/use-demo-rotation.test.tsx b/src/widgets/landing/hooks/__tests__/use-demo-rotation.test.tsx
index ae08e980..c043b6c9 100644
--- a/src/widgets/landing/hooks/__tests__/use-demo-rotation.test.tsx
+++ b/src/widgets/landing/hooks/__tests__/use-demo-rotation.test.tsx
@@ -225,17 +225,74 @@ describe('useDemoRotation', () => {
       const { result } = renderHook(() =>
         useDemoRotation({ itemCount: 3 })
       )
-      
+
       act(() => {
         vi.advanceTimersByTime(9999)
       })
-      
+
       expect(result.current.activeIndex).toBe(0)
-      
+
       act(() => {
         vi.advanceTimersByTime(1)
       })
-      
+
+      expect(result.current.activeIndex).toBe(1)
+    })
+  })
+
+  describe('Visibility pause', () => {
+    function setHidden(hidden: boolean) {
+      Object.defineProperty(document, 'hidden', {
+        value: hidden,
+        writable: true,
+        configurable: true,
+      })
+      document.dispatchEvent(new Event('visibilitychange'))
+    }
+
+    afterEach(() => {
+      setHidden(false)
+    })
+
+    it('should pause rotation when the tab becomes hidden', () => {
+      const { result } = renderHook(() =>
+        useDemoRotation({ itemCount: 3, interval: 1000 })
+      )
+
+      act(() => {
+        setHidden(true)
+      })
+
+      act(() => {
+        vi.advanceTimersByTime(5000)
+      })
+
+      expect(result.current.activeIndex).toBe(0)
+    })
+
+    it('should resume rotation when the tab becomes visible again', () => {
+      const { result } = renderHook(() =>
+        useDemoRotation({ itemCount: 3, interval: 1000 })
+      )
+
+      act(() => {
+        setHidden(true)
+      })
+
+      act(() => {
+        vi.advanceTimersByTime(2000)
+      })
+
+      expect(result.current.activeIndex).toBe(0)
+
+      act(() => {
+        setHidden(false)
+      })
+
+      act(() => {
+        vi.advanceTimersByTime(1000)
+      })
+
       expect(result.current.activeIndex).toBe(1)
     })
   })
diff --git a/src/widgets/landing/hooks/use-demo-rotation.ts b/src/widgets/landing/hooks/use-demo-rotation.ts
index d45de537..71953e2d 100644
--- a/src/widgets/landing/hooks/use-demo-rotation.ts
+++ b/src/widgets/landing/hooks/use-demo-rotation.ts
@@ -5,7 +5,7 @@
  * Feature: 012-landing-page
  */
 
-import { useCallback, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 
 import { useInterval } from './use-interval'
 
@@ -37,6 +37,7 @@ export function useDemoRotation({
 }: UseDemoRotationOptions): UseDemoRotationReturn {
   const [activeIndex, setActiveIndex] = useState(0)
   const [isPaused, setIsPaused] = useState(!autoStart)
+  const [isHidden, setIsHidden] = useState(false)
 
   const next = useCallback(() => {
     setActiveIndex((current) => (current + 1) % itemCount)
@@ -58,8 +59,18 @@ export function useDemoRotation({
   const pause = useCallback(() => setIsPaused(true), [])
   const resume = useCallback(() => setIsPaused(false), [])
 
-  // Auto-rotate when not paused
-  useInterval(next, isPaused ? null : interval)
+  // Pause rotation while the tab is backgrounded - composes with manual/hover pause
+  useEffect(() => {
+    const handleVisibilityChange = (): void => {
+      setIsHidden(document.hidden)
+    }
+
+    document.addEventListener('visibilitychange', handleVisibilityChange)
+    return () => document.removeEventListener('visibilitychange', handleVisibilityChange)
+  }, [])
+
+  // Auto-rotate only when neither manually paused nor backgrounded
+  useInterval(next, isPaused || isHidden ? null : interval)
 
   return {
     activeIndex,

From ba8e8119f3b22e25d11317979e141b583059f6de Mon Sep 17 00:00:00 2001
From: Ignat <ign.romanov@gmail.com>
Date: Thu, 28 May 2026 16:07:13 -0300
Subject: [PATCH 10/10] =?UTF-8?q?perf(landing):=20remove=20mount-time=20se?=
 =?UTF-8?q?tNetworkTheme('ethereum')=20=E2=80=94=20store=20default=20alrea?=
 =?UTF-8?q?dy=20'ethereum'?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

uiSlice.ts initializes networkTheme: 'ethereum'. The useEffect mutation on mount
was redundant. All other pages (create, pay, invoice) set their own theme explicitly
from networkId — landing's removal is safe. Also consolidates below-fold placeholder
to pass BelowFoldPlaceholder as skeleton prop (single consistent placeholder with
min-h-[300vh] both pre- and post-trigger, eliminating CLS on the swap).
---
 src/widgets/landing/ui/LandingContent.tsx | 21 ++++++++++-----------
 1 file changed, 10 insertions(+), 11 deletions(-)

diff --git a/src/widgets/landing/ui/LandingContent.tsx b/src/widgets/landing/ui/LandingContent.tsx
index 70dc990f..44141599 100644
--- a/src/widgets/landing/ui/LandingContent.tsx
+++ b/src/widgets/landing/ui/LandingContent.tsx
@@ -5,7 +5,7 @@
  * Feature: 012-landing-page
  *
  * Background: Uses NetworkBackground from layout.tsx (unified across all pages).
- * Sets 'ethereum' theme on mount via useCreatorStore.
+ * Relies on the store's default 'ethereum' theme (no mount-time mutation).
  *
  * Performance Strategy (optimized for LCP < 2.5s):
  * 1. Above-fold (immediate): HeroSection + SocialProofStrip
@@ -22,7 +22,6 @@
  */
 
 import { useState, useEffect, type ComponentType, type ReactNode } from 'react'
-import { useCreatorStore } from '@/entities/creator'
 import { HeroSection } from '../hero-section/HeroSection'
 import { SocialProofStrip } from '../social-proof'
 import { BelowFoldLoader } from './BelowFoldLoader'
@@ -30,10 +29,14 @@ import { ComparisonTable } from '../comparison/ComparisonTable'
 
 /**
  * SEO-friendly placeholder for below-fold content.
+ *
+ * Reserves a min-height close to the real (7-section) content so the
+ * skeleton -> content swap does not push the footer/CTA upward (CLS).
+ * Keeps sr-only headings for SEO/crawlers.
  */
 function BelowFoldPlaceholder() {
   return (
-    <div className="space-y-32 py-20">
+    <div className="min-h-[300vh] space-y-32 py-20">
       <section className="container mx-auto px-4">
         <h2 className="sr-only">How VoidPay Works</h2>
         <div className="h-[600px] animate-pulse rounded-2xl bg-zinc-900/30" />
@@ -86,12 +89,7 @@ function LazyBelowFold() {
 }
 
 export function LandingContent() {
-  const setNetworkTheme = useCreatorStore((s) => s.setNetworkTheme)
-
-  // Set ethereum theme on mount (landing page uses default ethereum branding)
-  useEffect(() => {
-    setNetworkTheme('ethereum')
-  }, [setNetworkTheme])
+  // Landing uses the store's default 'ethereum' theme - no mount-time mutation needed.
 
   // Preload bundles after initial paint for smoother scrolling
   useEffect(() => {
@@ -135,8 +133,9 @@ export function LandingContent() {
         <HeroSection />
         <SocialProofStrip />
 
-        {/* Below-fold: Intersection Observer triggers lazy load */}
-        <BelowFoldLoader placeholderHeight="300vh" rootMargin="400px">
+        {/* Below-fold: Intersection Observer triggers lazy load.
+            Same placeholder pre-trigger and while the chunk loads -> no CLS on swap. */}
+        <BelowFoldLoader skeleton={<BelowFoldPlaceholder />} rootMargin="400px">
           <LazyBelowFold />
         </BelowFoldLoader>
       </div>