The preview is showing the following runtime errors: ``` [2026-08-20T14:09:14.645Z] Error: Hydration failed because the server rendered text didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used: - A server/client branch `if (typeof window !== 'undefined')`. - Variable input such as `Date.now()` or `Math.random()` which changes each time it's called. - Date formatting in a user's locale which doesn't match the server. - External changing data without sending a snapshot of it along with the HTML. - Invalid HTML tag nesting. It can also happen if the client has a browser extension installed which messes with the HTML before React loaded. https://react.dev/link/hydration-mismatch ... <LoadingBoundary name="/" loading={null}> <HTTPAccessFallbackBoundary notFound={<SegmentViewNode>} forbidden={undefined} unauthorized={undefined}> <HTTPAccessFallbackErrorBoundary pathname="/" notFound={<SegmentViewNode>} forbidden={undefined} ...> <RedirectBoundary> <RedirectErrorBoundary router={{...}}> <InnerLayoutRouter url="/" tree={[...]} params={{}} cacheNode={{lazyData:null, ...}} segmentPath={[...]} ...> <SegmentViewNode type="page" pagePath="page.tsx"> <SegmentTrieNode> <HomePage> <main className="min-h-scre..."> <Navigation> <HeroSection> ... <AnimatedVisual type="ai"> <AIVisual> <svg viewBox="0 0 200 160" className="w-full h-full"> <circle> <g> <g> <g> <g> <g> <line x1="100" y1="80" x2={74.99999999999997} + y2={36.69872981077808} - y2="36.698729810778076" stroke="currentColor" strokeWidth="1" opacity="0.3" > <circle cx={74.99999999999997} + cy={36.69872981077808} - cy="36.698729810778076" r="6" fill="none" stroke="currentColor" strokeWidth="2" > ... ... <HowItWorksSection> <MetricsSection> <section id="metrics" ref={{current:null}} className="relative p..."> <div className="max-w-[140..."> <div className="flex flex-..."> <div> <div className="flex items..."> <span> <span> <span> + 2:09:14 PM - 2:09:03 PM ... ... ... ... at throwOnHydrationMismatch (https://optimus-the-ai-platform-to-build-and-ship-2.v0.build/_next/static/chunks/a55d0_next_dist_compiled_react-dom_b7839bf2._.js:3342:56) at prepareToHydrateHostInstance (https://optimus-the-ai-platform-to-build-and-ship-2.v0.build/_next/static/chunks/a55d0_next_dist_compiled_react-dom_b7839bf2._.js:3396:23) at completeWork (https://optimus-the-ai-platform-to-build-and-ship-2.v0.build/_next/static/chunks/a55d0_next_dist_compiled_react-dom_b7839bf2._.js:6928:60) at runWithFiberInDEV (https://optimus-the-ai-platform-to-build-and-ship-2.v0.build/_next/static/chunks/a55d0_next_dist_compiled_react-dom_b7839bf2._.js:959:74) at completeUnitOfWork (https://optimus-the-ai-platform-to-build-and-ship-2.v0.build/_next/static/chunks/a55d0_next_dist_compiled_react-dom_b7839bf2._.js:9621:23) at performUnitOfWork (https://optimus-the-ai-platform-to-build-and-ship-2.v0.build/_next/static/chunks/a55d0_next_dist_compiled_react-dom_b7839bf2._.js:9558:28) at workLoopConcurrentByScheduler (https://optimus-the-ai-platform-to-build-and-ship-2.v0.build/_next/static/chunks/a55d0_next_dist_compiled_react-dom_b7839bf2._.js:9552:58) at renderRootConcurrent (https://optimus-the-ai-platform-to-build-and-ship-2.v0.build/_next/static/chunks/a55d0_next_dist_compiled_react-dom_b7839bf2._.js:9535:71) at performWorkOnRoot (https://optimus-the-ai-platform-to-build-and-ship-2.v0.build/_next/static/chunks/a55d0_next_dist_compiled_react-dom_b7839bf2._.js:9062:150) at performWorkOnRootViaSchedulerTask (https://optimus-the-ai-platform-to-build-and-ship-2.v0.build/_next/static/chunks/a55d0_next_dist_compiled_react-dom_b7839bf2._.js:10224:9) at MessagePort.performWorkUntilDeadline (https://optimus-the-ai-platform-to-build-and-ship-2.v0.build/_next/static/chunks/a55d0_next_dist_compiled_5082284e._.js:2647:64) [2026-08-20T14:09:14.648Z] Error: Hydration failed because the server rendered text didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used: - A server/client branch `if (typeof window !== 'undefined')`. - Variable input such as `Date.now()` or `Math.random()` which changes each time it's called. - Date formatting in a user's locale which doesn't match the server. - External changing data without sending a snapshot of it along with the HTML. - Invalid HTML tag nesting. It can also happen if the client has a browser extension installed which messes with the HTML before React loaded. https://react.dev/link/hydration-mismatch ... <LoadingBoundary name="/" loading={null}> <HTTPAccessFallbackBoundary notFound={<SegmentViewNode>} forbidden={undefined} unauthorized={undefined}> <HTTPAccessFallbackErrorBoundary pathname="/" notFound={<SegmentViewNode>} forbidden={undefined} ...> <RedirectBoundary> <RedirectErrorBoundary router={{...}}> <InnerLayoutRouter url="/" tree={[...]} params={{}} cacheNode={{lazyData:null, ...}} segmentPath={[...]} ...> <SegmentViewNode type="page" pagePath="page.tsx"> <SegmentTrieNode> <HomePage> <main className="min-h-scre..."> <Navigation> <HeroSection> ... <AnimatedVisual type="ai"> <AIVisual> <svg viewBox="0 0 200 160" className="w-full h-full"> <circle> <g> <g> <g> <g> <g> <line x1="100" y1="80" x2={74.99999999999997} + y2={36.69872981077808} - y2="36.698729810778076" stroke="currentColor" strokeWidth="1" opacity="0.3" > <circle cx={74.99999999999997} + cy={36.69872981077808} - cy="36.698729810778076" r="6" fill="none" stroke="currentColor" strokeWidth="2" > ... ... <HowItWorksSection> <MetricsSection> <section id="metrics" ref={{current:null}} className="relative p..."> <div className="max-w-[140..."> <div className="flex flex-..."> <div> <div className="flex items..."> <span> <span> <span> + 2:09:14 PM - 2:09:03 PM ... ... ... ... at throwOnHydrationMismatch (https://optimus-the-ai-platform-to-build-and-ship-2.v0.build/_next/static/chunks/a55d0_next_dist_compiled_react-dom_b7839bf2._.js:3342:56) at prepareToHydrateHostInstance (https://optimus-the-ai-platform-to-build-and-ship-2.v0.build/_next/static/chunks/a55d0_next_dist_compiled_react-dom_b7839bf2._.js:3396:23) at completeWork (https://optimus-the-ai-platform-to-build-and-ship-2.v0.build/_next/static/chunks/a55d0_next_dist_compiled_react-dom_b7839bf2._.js:6928:60) at runWithFiberInDEV (https://optimus-the-ai-platform-to-build-and-ship-2.v0.build/_next/static/chunks/a55d0_next_dist_compiled_react-dom_b7839bf2._.js:959:74) at completeUnitOfWork (https://optimus-the-ai-platform-to-build-and-ship-2.v0.build/_next/static/chunks/a55d0_next_dist_compiled_react-dom_b7839bf2._.js:9621:23) at performUnitOfWork (https://optimus-the-ai-platform-to-build-and-ship-2.v0.build/_next/static/chunks/a55d0_next_dist_compiled_react-dom_b7839bf2._.js:9558:28) at workLoopConcurrentByScheduler (https://optimus-the-ai-platform-to-build-and-ship-2.v0.build/_next/static/chunks/a55d0_next_dist_compiled_react-dom_b7839bf2._.js:9552:58) at renderRootConcurrent (https://optimus-the-ai-platform-to-build-and-ship-2.v0.build/_next/static/chunks/a55d0_next_dist_compiled_react-dom_b7839bf2._.js:9535:71) at performWorkOnRoot (https://optimus-the-ai-platform-to-build-and-ship-2.v0.build/_next/static/chunks/a55d0_next_dist_compiled_react-dom_b7839bf2._.js:9062:150) at performWorkOnRootViaSchedulerTask (https://optimus-the-ai-platform-to-build-and-ship-2.v0.build/_next/static/chunks/a55d0_next_dist_compiled_react-dom_b7839bf2._.js:10224:9) at MessagePort.performWorkUntilDeadline (https://optimus-the-ai-platform-to-build-and-ship-2.v0.build/_next/static/chunks/a55d0_next_dist_compiled_5082284e._.js:2647:64) ``` Fix the code to resolve them.