@tanstack/create 0.67.0 → 0.68.1

package/dist/frameworks/react/add-ons/drizzle/assets/src/routes/demo/drizzle.tsx.ejs

@@ -47,141 +47,91 @@ function DemoDrizzle() {
   }
 
   return (
-    <div
-      className="flex items-center justify-center min-h-screen p-4 text-white"
-      style={{
-        background:
-          'linear-gradient(135deg, #0c1a2b 0%, #1a2332 50%, #16202e 100%)',
-      }}
-    >
-      <div
-        className="w-full max-w-2xl p-8 rounded-xl shadow-2xl border border-white/10"
-        style={{
-          background:
-            'linear-gradient(135deg, rgba(22, 32, 46, 0.95) 0%, rgba(12, 26, 43, 0.95) 100%)',
-          backdropFilter: 'blur(10px)',
-        }}
-      >
-        <div
-          className="flex items-center justify-center gap-4 mb-8 p-4 rounded-lg"
-          style={{
-            background:
-              'linear-gradient(90deg, rgba(93, 103, 227, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%)',
-            border: '1px solid rgba(93, 103, 227, 0.2)',
-          }}
-        >
-          <div className="relative group">
-            <div className="absolute -inset-2 bg-gradient-to-r from-indigo-500 via-purple-500 to-indigo-500 rounded-lg blur-lg opacity-60 group-hover:opacity-100 transition duration-500"></div>
-            <div className="relative bg-gradient-to-br from-indigo-600 to-purple-600 p-3 rounded-lg">
-              <img
-                src="/drizzle.svg"
-                alt="Drizzle Logo"
-                className="w-8 h-8 transform group-hover:scale-110 transition-transform duration-300"
-              />
-            </div>
+    <main className="demo-page demo-center">
+      <section className="demo-panel w-full max-w-2xl">
+        <header className="mb-8 flex items-center gap-4">
+          <span className="demo-card flex h-14 w-14 items-center justify-center p-3">
+            <img src="/drizzle.svg" alt="Drizzle Logo" className="h-8 w-8" />
+          </span>
+          <div>
+            <p className="island-kicker mb-2">Database</p>
+            <h1 className="demo-title">Drizzle Demo</h1>
           </div>
-          <h1 className="text-3xl font-bold bg-gradient-to-r from-indigo-300 via-purple-300 to-indigo-300 text-transparent bg-clip-text">
-            Drizzle Database Demo
-          </h1>
-        </div>
+        </header>
 
-        <h2 className="text-2xl font-bold mb-4 text-indigo-200">Todos</h2>
+        <h2 className="demo-section-title mb-4">Todos</h2>
 
         <ul className="space-y-3 mb-6">
           {todos.map((todo) => (
             <li
               key={todo.id}
-              className="rounded-lg p-4 shadow-md border transition-all hover:scale-[1.02] cursor-pointer group"
-              style={{
-                background:
-                  'linear-gradient(135deg, rgba(93, 103, 227, 0.15) 0%, rgba(139, 92, 246, 0.15) 100%)',
-                borderColor: 'rgba(93, 103, 227, 0.3)',
-              }}
+              className="demo-list-item"
             >
               <div className="flex items-center justify-between">
-                <span className="text-lg font-medium text-white group-hover:text-indigo-200 transition-colors">
-                  {todo.title}
-                </span>
-                <span className="text-xs text-indigo-300/70">#{todo.id}</span>
+                <span className="font-medium">{todo.title}</span>
+                <span className="demo-muted text-xs">#{todo.id}</span>
               </div>
             </li>
           ))}
           {todos.length === 0 && (
-            <li className="text-center py-8 text-indigo-300/70">
+            <li className="demo-list-item text-center demo-muted">
               No todos yet. Create one below!
             </li>
           )}
         </ul>
 
-        <form onSubmit={handleSubmit} className="flex gap-2">
+        <form onSubmit={handleSubmit} className="flex flex-col gap-2 sm:flex-row">
           <input
             type="text"
             name="title"
             placeholder="Add a new todo..."
-            className="flex-1 px-4 py-3 rounded-lg border focus:outline-none focus:ring-2 transition-all text-white placeholder-indigo-300/50"
-            style={{
-              background: 'rgba(93, 103, 227, 0.1)',
-              borderColor: 'rgba(93, 103, 227, 0.3)',
-              focusRing: 'rgba(93, 103, 227, 0.5)',
-            }}
+            className="demo-input min-w-0 flex-1"
           />
           <button
             type="submit"
-            className="px-6 py-3 font-semibold rounded-lg shadow-lg transition-all duration-200 hover:shadow-xl hover:scale-105 active:scale-95 whitespace-nowrap"
-            style={{
-              background: 'linear-gradient(135deg, #5d67e3 0%, #8b5cf6 100%)',
-              color: 'white',
-            }}
+            className="demo-button whitespace-nowrap"
           >
             Add Todo
           </button>
         </form>
 
-        <div
-          className="mt-8 p-6 rounded-lg border"
-          style={{
-            background: 'rgba(93, 103, 227, 0.05)',
-            borderColor: 'rgba(93, 103, 227, 0.2)',
-          }}
-        >
-          <h3 className="text-lg font-semibold mb-2 text-indigo-200">
+        <div className="demo-card mt-8">
+          <h3 className="demo-section-title mb-2">
             Powered by Drizzle ORM
           </h3>
-          <p className="text-sm text-indigo-300/80 mb-4">
+          <p className="demo-muted mb-4 text-sm">
             Next-generation ORM for Node.js & TypeScript with PostgreSQL
           </p>
           <div className="space-y-2 text-sm">
-            <p className="text-indigo-200 font-medium">Setup Instructions:</p>
-            <ol className="list-decimal list-inside space-y-2 text-indigo-300/80">
+            <p className="font-medium">Setup Instructions:</p>
+            <ol className="demo-muted list-inside list-decimal space-y-2">
               <li>
                 Configure your{' '}
-                <code className="px-2 py-1 rounded bg-black/30 text-purple-300">
-                  DATABASE_URL
-                </code>{' '}
+                <code>DATABASE_URL</code>{' '}
                 in .env.local
               </li>
               <li>
                 Run:{' '}
-                <code className="px-2 py-1 rounded bg-black/30 text-purple-300">
+                <code>
                   <%- getPackageManagerExecuteScript('drizzle-kit', ['generate']) %>
                 </code>
               </li>
               <li>
                 Run:{' '}
-                <code className="px-2 py-1 rounded bg-black/30 text-purple-300">
+                <code>
                   <%- getPackageManagerExecuteScript('drizzle-kit', ['migrate']) %>
                 </code>
               </li>
               <li>
                 Optional:{' '}
-                <code className="px-2 py-1 rounded bg-black/30 text-purple-300">
+                <code>
                   <%- getPackageManagerExecuteScript('drizzle-kit', ['studio']) %>
                 </code>
               </li>
             </ol>
           </div>
         </div>
-      </div>
-    </div>
+      </section>
+    </main>
   )
 }

package/dist/frameworks/react/add-ons/form/assets/src/components/demo.FormComponents.tsx.ejs

@@ -33,7 +33,7 @@ function ErrorMessages({
       {errors.map((error) => (
         <div
           key={typeof error === 'string' ? error : error.message}
-          className="text-red-500 mt-1 font-bold"
+          className="mt-1 text-sm font-semibold text-red-600"
         >
           {typeof error === 'string' ? error : error.message}
         </div>
@@ -54,7 +54,7 @@ export function TextField({
 
   return (
     <div>
-      <Label htmlFor={label} className="mb-2 text-xl font-bold">
+      <Label htmlFor={label} className="mb-2 text-sm font-semibold text-[var(--sea-ink)]">
         {label}
       </Label>
       <Input
@@ -80,7 +80,7 @@ export function TextArea({
 
   return (
     <div>
-      <Label htmlFor={label} className="mb-2 text-xl font-bold">
+      <Label htmlFor={label} className="mb-2 text-sm font-semibold text-[var(--sea-ink)]">
         {label}
       </Label>
       <ShadcnTextarea
@@ -143,7 +143,7 @@ export function Slider({ label }: { label: string }) {
 
   return (
     <div>
-      <Label htmlFor={label} className="mb-2 text-xl font-bold">
+      <Label htmlFor={label} className="mb-2 text-sm font-semibold text-[var(--sea-ink)]">
         {label}
       </Label>
       <ShadcnSlider
@@ -186,7 +186,7 @@ export function SubscribeButton({ label }: { label: string }) {
         <button
           type="submit"
           disabled={isSubmitting}
-          className="px-6 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition-colors disabled:opacity-50"
+          className="demo-button"
         >
           {label}
         </button>
@@ -205,7 +205,7 @@ function ErrorMessages({
       {errors.map((error) => (
         <div
           key={typeof error === 'string' ? error : error.message}
-          className="text-red-500 mt-1 font-bold"
+          className="mt-1 text-sm font-semibold text-red-600"
         >
           {typeof error === 'string' ? error : error.message}
         </div>
@@ -226,14 +226,14 @@ export function TextField({
 
   return (
     <div>
-      <label htmlFor={label} className="block font-bold mb-1 text-xl">
+      <label htmlFor={label} className="mb-2 block text-sm font-semibold text-[var(--sea-ink)]">
         {label}
         <input
           value={field.state.value}
           placeholder={placeholder}
           onBlur={field.handleBlur}
           onChange={(e) => field.handleChange(e.target.value)}
-          className="w-full px-4 py-2 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500"
+          className="demo-input mt-2"
         />
       </label>
       {field.state.meta.isTouched && <ErrorMessages errors={errors} />}
@@ -253,14 +253,14 @@ export function TextArea({
 
   return (
     <div>
-      <label htmlFor={label} className="block font-bold mb-1 text-xl">
+      <label htmlFor={label} className="mb-2 block text-sm font-semibold text-[var(--sea-ink)]">
         {label}
         <textarea
           value={field.state.value}
           onBlur={field.handleBlur}
           rows={rows}
           onChange={(e) => field.handleChange(e.target.value)}
-          className="w-full px-4 py-2 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500"
+          className="demo-textarea mt-2"
         />
       </label>
       {field.state.meta.isTouched && <ErrorMessages errors={errors} />}
@@ -281,7 +281,7 @@ export function Select({
 
   return (
     <div>
-      <label htmlFor={label} className="block font-bold mb-1 text-xl">
+      <label htmlFor={label} className="mb-2 block text-sm font-semibold text-[var(--sea-ink)]">
         {label}
       </label>
       <select
@@ -289,7 +289,7 @@ export function Select({
         value={field.state.value}
         onBlur={field.handleBlur}
         onChange={(e) => field.handleChange(e.target.value)}
-        className="w-full px-4 py-2 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500"
+        className="demo-select"
       >
         {values.map((value) => (
           <option key={value.value} value={value.value}>

package/dist/frameworks/react/add-ons/form/assets/src/routes/demo/form.address.tsx.ejs

@@ -45,14 +45,15 @@ function AddressForm() {
   })
 
   return (
-    <div
-      className="flex items-center justify-center min-h-screen bg-gradient-to-br from-purple-100 to-blue-100 p-4 text-white"
-      style={{
-        backgroundImage:
-          'radial-gradient(50% 50% at 5% 40%, #f4a460 0%, #8b4513 70%, #1a0f0a 100%)',
-      }}
-    >
-      <div className="w-full max-w-2xl p-8 rounded-xl backdrop-blur-md bg-black/50 shadow-xl border-8 border-black/10">
+    <main className="demo-page demo-center">
+      <section className="demo-panel w-full max-w-2xl">
+        <div className="mb-6">
+          <p className="island-kicker mb-2">TanStack Form</p>
+          <h1 className="demo-title">Address Form</h1>
+          <p className="demo-muted mt-2">
+            Nested fields, field-level validation, and a select input.
+          </p>
+        </div>
         <form
           onSubmit={(e) => {
             e.preventDefault()
@@ -198,8 +199,8 @@ function AddressForm() {
             </form.AppForm>
           </div>
         </form>
-      </div>
-    </div>
+      </section>
+    </main>
   )
 }
 

package/dist/frameworks/react/add-ons/form/assets/src/routes/demo/form.simple.tsx.ejs

@@ -33,14 +33,15 @@ function SimpleForm() {
   })
 
   return (
-    <div
-      className="flex items-center justify-center min-h-screen bg-gradient-to-br from-purple-100 to-blue-100 p-4 text-white"
-      style={{
-        backgroundImage:
-          'radial-gradient(50% 50% at 5% 40%, #add8e6 0%, #0000ff 70%, #00008b 100%)',
-      }}
-    >
-      <div className="w-full max-w-2xl p-8 rounded-xl backdrop-blur-md bg-black/50 shadow-xl border-8 border-black/10">
+    <main className="demo-page demo-center">
+      <section className="demo-panel w-full max-w-2xl">
+        <div className="mb-6">
+          <p className="island-kicker mb-2">TanStack Form</p>
+          <h1 className="demo-title">Simple Form</h1>
+          <p className="demo-muted mt-2">
+            A small validated form using the generated field helpers.
+          </p>
+        </div>
         <form
           onSubmit={(e) => {
             e.preventDefault()
@@ -63,8 +64,8 @@ function SimpleForm() {
             </form.AppForm>
           </div>
         </form>
-      </div>
-    </div>
+      </section>
+    </main>
   )
 }
 

package/dist/frameworks/react/add-ons/mcp/assets/src/routes/demo/mcp-todos.tsx

@@ -32,22 +32,14 @@ function ORPCTodos() {
   }, [todo])
 
   return (
-    <div
-      className="flex items-center justify-center min-h-screen bg-gradient-to-br from-teal-200 to-emerald-900 p-4 text-white"
-      style={{
-        backgroundImage:
-          'radial-gradient(70% 70% at 20% 20%, #07A798 0%, #045C4B 60%, #01251F 100%)',
-      }}
-    >
-      <div className="w-full max-w-2xl p-8 rounded-xl backdrop-blur-md bg-black/50 shadow-xl border-8 border-black/10">
-        <h1 className="text-2xl mb-4">MCP Todos list</h1>
+    <main className="demo-page demo-center">
+      <section className="demo-panel w-full max-w-2xl">
+        <p className="island-kicker mb-2">MCP</p>
+        <h1 className="demo-title mb-6">Todos</h1>
         <ul className="mb-4 space-y-2">
           {todos?.map((t) => (
-            <li
-              key={t.id}
-              className="bg-white/10 border border-white/20 rounded-lg p-3 backdrop-blur-sm shadow-md"
-            >
-              <span className="text-lg text-white">{t.title}</span>
+            <li key={t.id} className="demo-list-item">
+              <span className="text-base font-medium">{t.title}</span>
             </li>
           ))}
         </ul>
@@ -62,17 +54,17 @@ function ORPCTodos() {
               }
             }}
             placeholder="Enter a new todo..."
-            className="w-full px-4 py-3 rounded-lg border border-white/20 bg-white/10 backdrop-blur-sm text-white placeholder-white/60 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-transparent"
+            className="demo-input"
           />
           <button
             disabled={todo.trim().length === 0}
             onClick={submitTodo}
-            className="bg-blue-500 hover:bg-blue-600 disabled:bg-blue-500/50 disabled:cursor-not-allowed text-white font-bold py-3 px-4 rounded-lg transition-colors"
+            className="demo-button"
           >
             Add todo
           </button>
         </div>
-      </div>
-    </div>
+      </section>
+    </main>
   )
 }

package/dist/frameworks/react/add-ons/neon/assets/src/routes/demo/neon.tsx

@@ -49,68 +49,57 @@ function App() {
   }
 
   if (!todos) {
-    return <DBConnectionError />
+    return (
+      <main className="demo-page demo-center">
+        <section className="demo-panel w-full max-w-2xl">
+          <DBConnectionError />
+        </section>
+      </main>
+    )
   }
 
   return (
-    <div
-      className="flex items-center justify-center min-h-screen bg-gradient-to-br from-purple-100 to-blue-100 p-4 text-white"
-      style={{
-        backgroundImage:
-          'radial-gradient(circle at 5% 40%, #63F655 0%, #00E0D9 40%, #1a0f0a 100%)',
-      }}
-    >
-      <div className="w-full max-w-2xl p-8 rounded-xl backdrop-blur-md bg-black/50 shadow-xl border-8 border-black/10">
-        <div className="flex items-center justify-center gap-4 mb-8 bg-black/30 p-4 rounded-lg">
-          <div className="relative">
-            <div className="absolute -inset-1 bg-gradient-to-r from-emerald-400 to-cyan-400 rounded-lg blur opacity-75 group-hover:opacity-100 transition duration-1000"></div>
-            <div className="relative">
-              <img
-                src="/demo-neon.svg"
-                alt="Neon Logo"
-                className="w-12 h-12 transform hover:scale-110 transition-transform duration-200"
-              />
-            </div>
+    <main className="demo-page demo-center">
+      <section className="demo-panel w-full max-w-2xl">
+        <header className="mb-8 flex items-center gap-4">
+          <span className="demo-card flex h-14 w-14 items-center justify-center p-3">
+            <img src="/demo-neon.svg" alt="Neon Logo" className="h-8 w-8" />
+          </span>
+          <div>
+            <p className="island-kicker mb-2">Database</p>
+            <h1 className="demo-title">Neon Demo</h1>
           </div>
-          <h1 className="text-3xl font-bold bg-gradient-to-r from-emerald-200 to-cyan-200 text-transparent bg-clip-text">
-            Neon Database Demo
-          </h1>
-        </div>
+        </header>
         {todos && (
           <>
-            <h1 className="text-2xl font-bold mb-4">Todos</h1>
+            <h2 className="demo-section-title mb-4">Todos</h2>
             <ul className="space-y-3 mb-6">
               {todos.map((todo: { id: number; title: string }) => (
-                <li
-                  key={todo.id}
-                  className="bg-white/10 backdrop-blur-sm rounded-lg p-4 shadow-sm border border-white/20 transition-all hover:bg-white/20 hover:scale-[1.02] cursor-pointer group"
-                >
+                <li key={todo.id} className="demo-list-item">
                   <div className="flex items-center justify-between">
-                    <span className="text-lg font-medium group-hover:text-white/90">
-                      {todo.title}
-                    </span>
-                    <span className="text-xs text-white/50">#{todo.id}</span>
+                    <span className="font-medium">{todo.title}</span>
+                    <span className="demo-muted text-xs">#{todo.id}</span>
                   </div>
                 </li>
               ))}
             </ul>
-            <form onSubmit={handleSubmit} className="mt-4 flex gap-2">
+            <form
+              onSubmit={handleSubmit}
+              className="mt-4 flex flex-col gap-2 sm:flex-row"
+            >
               <input
                 type="text"
                 name="title"
-                className="w-full px-4 py-2 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-[#00E0D9] bg-black/20"
+                className="demo-input min-w-0 flex-1"
               />
-              <button
-                type="submit"
-                className="px-6 py-2 bg-[#00E0D9] text-black font-medium rounded-md hover:bg-[#00E0D9]/80 focus:outline-none focus:ring-2 focus:ring-[#00E0D9] focus:ring-offset-2 transition-colors disabled:opacity-50 whitespace-nowrap"
-              >
+              <button type="submit" className="demo-button whitespace-nowrap">
                 Add Todo
               </button>
             </form>
           </>
         )}
-      </div>
-    </div>
+      </section>
+    </main>
   )
 }
 
@@ -134,31 +123,23 @@ function DBConnectionError() {
         </svg>
       </div>
       <h2 className="text-2xl font-bold mb-4">Database Connection Issue</h2>
-      <div className="text-lg mb-6">The Neon database is not connected.</div>
-      <div className="bg-black/30 p-6 rounded-lg max-w-xl mx-auto">
+      <div className="demo-muted text-lg mb-6">
+        The Neon database is not connected.
+      </div>
+      <div className="demo-card max-w-xl mx-auto text-left">
         <h3 className="text-lg font-semibold mb-4">Required Steps to Fix:</h3>
         <ul className="space-y-4 text-left list-none">
           <li className="flex items-start">
-            <span className="inline-flex items-center justify-center w-8 h-8 rounded-full bg-amber-500 text-black font-bold mr-3 min-w-8 min-h-8">
-              1
-            </span>
+            <span className="demo-pill mr-3 min-w-8 justify-center">1</span>
             <div>
-              Use the{' '}
-              <code className="bg-black/30 px-2 py-1 rounded">db/init.sql</code>{' '}
-              file to create the database
+              Use the <code>db/init.sql</code> file to create the database
             </div>
           </li>
           <li className="flex items-start">
-            <span className="inline-flex items-center justify-center w-8 h-8 rounded-full bg-amber-500 text-black font-bold mr-3 min-w-8 min-h-8">
-              2
-            </span>
+            <span className="demo-pill mr-3 min-w-8 justify-center">2</span>
             <div>
-              Set the{' '}
-              <code className="bg-black/30 px-2 py-1 rounded">
-                DATABASE_URL
-              </code>{' '}
-              environment variable to the connection string of your Neon
-              database
+              Set the <code>DATABASE_URL</code> environment variable to the
+              connection string of your Neon database
             </div>
           </li>
         </ul>

package/dist/frameworks/react/add-ons/oRPC/assets/src/routes/demo/orpc-todo.tsx

@@ -36,22 +36,14 @@ function ORPCTodos() {
   }, [addTodo, todo])
 
   return (
-    <div
-      className="flex items-center justify-center min-h-screen bg-gradient-to-br from-purple-100 to-blue-100 p-4 text-white"
-      style={{
-        backgroundImage:
-          'radial-gradient(50% 50% at 50% 50%, #D2149D 0%, #8E1066 50%, #2D0A1F 100%)',
-      }}
-    >
-      <div className="w-full max-w-2xl p-8 rounded-xl backdrop-blur-md bg-black/50 shadow-xl border-8 border-black/10">
-        <h1 className="text-2xl mb-4">oRPC Todos list</h1>
+    <main className="demo-page demo-center">
+      <section className="demo-panel w-full max-w-2xl">
+        <p className="island-kicker mb-2">oRPC</p>
+        <h1 className="demo-title mb-6">Todos</h1>
         <ul className="mb-4 space-y-2">
           {data?.map((t) => (
-            <li
-              key={t.id}
-              className="bg-white/10 border border-white/20 rounded-lg p-3 backdrop-blur-sm shadow-md"
-            >
-              <span className="text-lg text-white">{t.name}</span>
+            <li key={t.id} className="demo-list-item">
+              <span className="text-base font-medium">{t.name}</span>
             </li>
           ))}
         </ul>
@@ -66,17 +58,17 @@ function ORPCTodos() {
               }
             }}
             placeholder="Enter a new todo..."
-            className="w-full px-4 py-3 rounded-lg border border-white/20 bg-white/10 backdrop-blur-sm text-white placeholder-white/60 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-transparent"
+            className="demo-input"
           />
           <button
             disabled={todo.trim().length === 0}
             onClick={submitTodo}
-            className="bg-blue-500 hover:bg-blue-600 disabled:bg-blue-500/50 disabled:cursor-not-allowed text-white font-bold py-3 px-4 rounded-lg transition-colors"
+            className="demo-button"
           >
             Add todo
           </button>
         </div>
-      </div>
-    </div>
+      </section>
+    </main>
   )
 }

package/dist/frameworks/react/add-ons/paraglide/assets/src/routes/demo.i18n.tsx.ejs

@@ -9,16 +9,15 @@ export const Route = createFileRoute("/demo/i18n")({
 
 function App() {
   return (
-    <div className="text-center">
-      <header className="min-h-screen flex flex-col items-center justify-center bg-[#282c34] text-white text-[calc(10px+2vmin)] gap-4">
+    <main className="demo-page demo-center text-center">
+      <section className="demo-panel flex w-full max-w-2xl flex-col items-center gap-4">
         <img
           src={logo}
-          className="h-[40vmin] pointer-events-none animate-[spin_20s_linear_infinite]"
+          className="pointer-events-none h-28 animate-[spin_20s_linear_infinite]"
           alt="logo"
         />
-        <p>{m.example_message({ username: "TanStack Router" })}</p>
+        <p className="demo-muted text-lg">{m.example_message({ username: "TanStack Router" })}</p>
         <a
-          className="text-[#61dafb] hover:underline"
           href="https://inlang.com/m/gerre34r/library-inlang-paraglideJs"
           target="_blank"
           rel="noopener noreferrer"
@@ -28,7 +27,7 @@ function App() {
         <div className="mt-3">
           <LocaleSwitcher />
         </div>
-      </header>
-    </div>
+      </section>
+    </main>
   );
 }