The preview is showing the following runtime errors: ``` [2026-06-28T21:32:57.995Z] 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 ... <HTTPAccessFallbackErrorBoundary pathname="/" notFound={<SegmentViewNode>} forbidden={undefined} ...> <RedirectBoundary> <RedirectErrorBoundary router={{...}}> <InnerLayoutRouter url="/" tree={[...]} cacheNode={{lazyData:null, ...}} segmentPath={[...]}> <SegmentViewNode type="page" pagePath="page.tsx"> <SegmentTrieNode> <Page> <InvitationCard> <main style={{...}}> <article className="inv-animate" style={{width:"100%", ...}}> <div style={{position:"...", ...}}> <FloatingHearts> <Text> <_c direction="vertical" gap="condensed" align="center" style={{position:"...", ...}}> <div ref={null} style={{position:"...", ...}} className="prc-Stack-..." data-gap="condensed" ...> <NameLine name="Menna" tone="lavender"> <Text as="h1" style={{...}}> <h1 className="prc-Text-Text-9mHv3" data-size={undefined} data-weight={undefined} data-white-space={undefined} style={{fontFamily:"Georgia, \...",fontSize:"clamp(40px...",lineHeight:1,fontWeight:500,color:"var(--...", ...}} ref={null} > + Menna - أمل ... ... ... ... ... at throwOnHydrationMismatch (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@15.5.19_react-dom@19.2.7_react@19.2.7__react@19.2.7/node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:4506:11) at prepareToHydrateHostInstance (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@15.5.19_react-dom@19.2.7_react@19.2.7__react@19.2.7/node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:4602:21) at completeWork (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@15.5.19_react-dom@19.2.7_react@19.2.7__react@19.2.7/node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:11635:15) at runWithFiberInDEV (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@15.5.19_react-dom@19.2.7_react@19.2.7__react@19.2.7/node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:872:30) at completeUnitOfWork (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@15.5.19_react-dom@19.2.7_react@19.2.7__react@19.2.7/node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:15863:19) at performUnitOfWork (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@15.5.19_react-dom@19.2.7_react@19.2.7__react@19.2.7/node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:15744:11) at workLoopSync (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@15.5.19_react-dom@19.2.7_react@19.2.7__react@19.2.7/node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:15547:41) at renderRootSync (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@15.5.19_react-dom@19.2.7_react@19.2.7__react@19.2.7/node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:15527:11) at performWorkOnRoot (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@15.5.19_react-dom@19.2.7_react@19.2.7__react@19.2.7/node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:14991:13) at performSyncWorkOnRoot (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@15.5.19_react-dom@19.2.7_react@19.2.7__react@19.2.7/node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:16831:7) at flushSyncWorkAcrossRoots_impl (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@15.5.19_react-dom@19.2.7_react@19.2.7__react@19.2.7/node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:16677:21) at dispatchEvent (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@15.5.19_react-dom@19.2.7_react@19.2.7__react@19.2.7/node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:21402:25) at dispatchDiscreteEvent (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@15.5.19_react-dom@19.2.7_react@19.2.7__react@19.2.7/node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:21326:11) [2026-06-28T21:32:57.999Z] 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 ... <HTTPAccessFallbackErrorBoundary pathname="/" notFound={<SegmentViewNode>} forbidden={undefined} ...> <RedirectBoundary> <RedirectErrorBoundary router={{...}}> <InnerLayoutRouter url="/" tree={[...]} cacheNode={{lazyData:null, ...}} segmentPath={[...]}> <SegmentViewNode type="page" pagePath="page.tsx"> <SegmentTrieNode> <Page> <InvitationCard> <main style={{...}}> <article className="inv-animate" style={{width:"100%", ...}}> <div style={{position:"...", ...}}> <FloatingHearts> <Text> <_c direction="vertical" gap="condensed" align="center" style={{position:"...", ...}}> <div ref={null} style={{position:"...", ...}} className="prc-Stack-..." data-gap="condensed" ...> <NameLine name="Menna" tone="lavender"> <Text as="h1" style={{...}}> <h1 className="prc-Text-Text-9mHv3" data-size={undefined} data-weight={undefined} data-white-space={undefined} style={{fontFamily:"Georgia, \...",fontSize:"clamp(40px...",lineHeight:1,fontWeight:500,color:"var(--...", ...}} ref={null} > + Menna - أمل ... ... ... ... ... at throwOnHydrationMismatch (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@15.5.19_react-dom@19.2.7_react@19.2.7__react@19.2.7/node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:4506:11) at prepareToHydrateHostInstance (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@15.5.19_react-dom@19.2.7_react@19.2.7__react@19.2.7/node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:4602:21) at completeWork (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@15.5.19_react-dom@19.2.7_react@19.2.7__react@19.2.7/node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:11635:15) at runWithFiberInDEV (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@15.5.19_react-dom@19.2.7_react@19.2.7__react@19.2.7/node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:872:30) at completeUnitOfWork (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@15.5.19_react-dom@19.2.7_react@19.2.7__react@19.2.7/node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:15863:19) at performUnitOfWork (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@15.5.19_react-dom@19.2.7_react@19.2.7__react@19.2.7/node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:15744:11) at workLoopSync (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@15.5.19_react-dom@19.2.7_react@19.2.7__react@19.2.7/node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:15547:41) at renderRootSync (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@15.5.19_react-dom@19.2.7_react@19.2.7__react@19.2.7/node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:15527:11) at performWorkOnRoot (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@15.5.19_react-dom@19.2.7_react@19.2.7__react@19.2.7/node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:14991:13) at performSyncWorkOnRoot (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@15.5.19_react-dom@19.2.7_react@19.2.7__react@19.2.7/node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:16831:7) at flushSyncWorkAcrossRoots_impl (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@15.5.19_react-dom@19.2.7_react@19.2.7__react@19.2.7/node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:16677:21) at dispatchEvent (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@15.5.19_react-dom@19.2.7_react@19.2.7__react@19.2.7/node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:21402:25) at dispatchDiscreteEvent (webpack-internal:///(app-pages-browser)/./node_modules/.pnpm/next@15.5.19_react-dom@19.2.7_react@19.2.7__react@19.2.7/node_modules/next/dist/compiled/react-dom/cjs/react-dom-client.development.js:21326:11) ``` Fix the code to resolve them.