@tanstack/create 0.68.0 → 0.68.2

package/src/frameworks/solid/add-ons/better-auth/assets/src/routes/demo.better-auth.tsx

@@ -1,24 +1,24 @@
-import { createFileRoute } from "@tanstack/solid-router";
-import { createSignal, Show } from "solid-js";
-import { authClient } from "../lib/auth-client";
+import { createFileRoute } from '@tanstack/solid-router'
+import { createSignal, Show } from 'solid-js'
+import { authClient } from '../lib/auth-client'
 
-export const Route = createFileRoute("/demo/better-auth")({
+export const Route = createFileRoute('/demo/better-auth')({
   component: BetterAuthDemo,
-});
+})
 
 function BetterAuthDemo() {
-  const session = authClient.useSession();
-  const [isSignUp, setIsSignUp] = createSignal(false);
-  const [email, setEmail] = createSignal("");
-  const [password, setPassword] = createSignal("");
-  const [name, setName] = createSignal("");
-  const [error, setError] = createSignal("");
-  const [loading, setLoading] = createSignal(false);
+  const session = authClient.useSession()
+  const [isSignUp, setIsSignUp] = createSignal(false)
+  const [email, setEmail] = createSignal('')
+  const [password, setPassword] = createSignal('')
+  const [name, setName] = createSignal('')
+  const [error, setError] = createSignal('')
+  const [loading, setLoading] = createSignal(false)
 
   const handleSubmit = async (e: Event) => {
-    e.preventDefault();
-    setError("");
-    setLoading(true);
+    e.preventDefault()
+    setError('')
+    setLoading(true)
 
     try {
       if (isSignUp()) {
@@ -26,47 +26,48 @@ function BetterAuthDemo() {
           email: email(),
           password: password(),
           name: name(),
-        });
+        })
         if (result.error) {
-          setError(result.error.message || "Sign up failed");
+          setError(result.error.message || 'Sign up failed')
         }
       } else {
         const result = await authClient.signIn.email({
           email: email(),
           password: password(),
-        });
+        })
         if (result.error) {
-          setError(result.error.message || "Sign in failed");
+          setError(result.error.message || 'Sign in failed')
         }
       }
     } catch (err) {
-      setError("An unexpected error occurred");
+      setError('An unexpected error occurred')
     } finally {
-      setLoading(false);
+      setLoading(false)
     }
-  };
+  }
 
   return (
     <Show
       when={!session().isPending}
       fallback={
-        <div class="flex items-center justify-center py-10">
+        <main class="demo-page demo-center">
           <div class="h-5 w-5 animate-spin rounded-full border-2 border-neutral-200 border-t-neutral-900 dark:border-neutral-800 dark:border-t-neutral-100" />
-        </div>
+        </main>
       }
     >
       <Show
         when={session().data?.user}
         fallback={
-          <div class="flex justify-center py-10 px-4">
-            <div class="w-full max-w-md p-6">
-              <h1 class="text-lg font-semibold leading-none tracking-tight">
-                {isSignUp() ? "Create an account" : "Sign in"}
+          <main class="demo-page demo-center">
+            <section class="demo-panel w-full max-w-md">
+              <p class="island-kicker mb-2">Better Auth</p>
+              <h1 class="demo-title">
+                {isSignUp() ? 'Create an account' : 'Sign in'}
               </h1>
-              <p class="text-sm text-neutral-500 dark:text-neutral-400 mt-2 mb-6">
+              <p class="demo-muted mt-2 mb-6 text-sm">
                 {isSignUp()
-                  ? "Enter your information to create an account"
-                  : "Enter your email below to login to your account"}
+                  ? 'Enter your information to create an account'
+                  : 'Enter your email below to login to your account'}
               </p>
 
               <form onSubmit={handleSubmit} class="grid gap-4">
@@ -80,7 +81,7 @@ function BetterAuthDemo() {
                       type="text"
                       value={name()}
                       onInput={(e) => setName(e.currentTarget.value)}
-                      class="flex h-9 w-full border border-neutral-300 dark:border-neutral-700 bg-transparent px-3 text-sm focus:outline-none focus:border-neutral-900 dark:focus:border-neutral-100 disabled:cursor-not-allowed disabled:opacity-50"
+                      class="demo-input"
                       required
                     />
                   </div>
@@ -95,7 +96,7 @@ function BetterAuthDemo() {
                     type="email"
                     value={email()}
                     onInput={(e) => setEmail(e.currentTarget.value)}
-                    class="flex h-9 w-full border border-neutral-300 dark:border-neutral-700 bg-transparent px-3 text-sm focus:outline-none focus:border-neutral-900 dark:focus:border-neutral-100 disabled:cursor-not-allowed disabled:opacity-50"
+                    class="demo-input"
                     required
                   />
                 </div>
@@ -112,24 +113,22 @@ function BetterAuthDemo() {
                     type="password"
                     value={password()}
                     onInput={(e) => setPassword(e.currentTarget.value)}
-                    class="flex h-9 w-full border border-neutral-300 dark:border-neutral-700 bg-transparent px-3 text-sm focus:outline-none focus:border-neutral-900 dark:focus:border-neutral-100 disabled:cursor-not-allowed disabled:opacity-50"
+                    class="demo-input"
                     required
                     minLength={8}
                   />
                 </div>
 
                 <Show when={error()}>
-                  <div class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 p-3">
-                    <p class="text-sm text-red-600 dark:text-red-400">
-                      {error()}
-                    </p>
+                  <div class="demo-alert demo-alert-danger">
+                    <p class="text-sm text-red-600">{error()}</p>
                   </div>
                 </Show>
 
                 <button
                   type="submit"
                   disabled={loading()}
-                  class="w-full h-9 px-4 text-sm font-medium text-white bg-neutral-900 hover:bg-neutral-800 dark:bg-neutral-50 dark:text-neutral-900 dark:hover:bg-neutral-200 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                  class="demo-button w-full"
                 >
                   <Show
                     when={!loading()}
@@ -140,7 +139,7 @@ function BetterAuthDemo() {
                       </span>
                     }
                   >
-                    {isSignUp() ? "Create account" : "Sign in"}
+                    {isSignUp() ? 'Create account' : 'Sign in'}
                   </Show>
                 </button>
               </form>
@@ -149,41 +148,40 @@ function BetterAuthDemo() {
                 <button
                   type="button"
                   onClick={() => {
-                    setIsSignUp(!isSignUp());
-                    setError("");
+                    setIsSignUp(!isSignUp())
+                    setError('')
                   }}
-                  class="text-sm text-neutral-500 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-neutral-100 transition-colors"
+                  class="demo-muted text-sm transition-colors hover:text-[var(--sea-ink)]"
                 >
                   {isSignUp()
-                    ? "Already have an account? Sign in"
+                    ? 'Already have an account? Sign in'
                     : "Don't have an account? Sign up"}
                 </button>
               </div>
 
-              <p class="mt-6 text-xs text-center text-neutral-400 dark:text-neutral-500">
-                Built with{" "}
+              <p class="demo-muted mt-6 text-center text-xs">
+                Built with{' '}
                 <a
                   href="https://better-auth.com"
                   target="_blank"
                   rel="noopener noreferrer"
-                  class="font-medium hover:text-neutral-600 dark:hover:text-neutral-300"
+                  class="font-medium"
                 >
                   BETTER-AUTH
                 </a>
                 .
               </p>
-            </div>
-          </div>
+            </section>
+          </main>
         }
       >
         {(user) => (
-          <div class="flex justify-center py-10 px-4">
-            <div class="w-full max-w-md p-6 space-y-6">
+          <main class="demo-page demo-center">
+            <section class="demo-panel w-full max-w-md space-y-6">
               <div class="space-y-1.5">
-                <h1 class="text-lg font-semibold leading-none tracking-tight">
-                  Welcome back
-                </h1>
-                <p class="text-sm text-neutral-500 dark:text-neutral-400">
+                <p class="island-kicker mb-2">Better Auth</p>
+                <h1 class="demo-title">Welcome back</h1>
+                <p class="demo-muted text-sm">
                   You're signed in as {user().email}
                 </p>
               </div>
@@ -194,7 +192,7 @@ function BetterAuthDemo() {
                   fallback={
                     <div class="h-10 w-10 bg-neutral-200 dark:bg-neutral-800 flex items-center justify-center">
                       <span class="text-sm font-medium text-neutral-600 dark:text-neutral-400">
-                        {user().name?.charAt(0).toUpperCase() || "U"}
+                        {user().name?.charAt(0).toUpperCase() || 'U'}
                       </span>
                     </div>
                   }
@@ -211,29 +209,29 @@ function BetterAuthDemo() {
 
               <button
                 onClick={() => {
-                  void authClient.signOut();
+                  void authClient.signOut()
                 }}
-                class="w-full h-9 px-4 text-sm font-medium border border-neutral-300 dark:border-neutral-700 hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors"
+                class="demo-button demo-button-secondary w-full"
               >
                 Sign out
               </button>
 
-              <p class="text-xs text-center text-neutral-400 dark:text-neutral-500">
-                Built with{" "}
+              <p class="demo-muted text-center text-xs">
+                Built with{' '}
                 <a
                   href="https://better-auth.com"
                   target="_blank"
                   rel="noopener noreferrer"
-                  class="font-medium hover:text-neutral-600 dark:hover:text-neutral-300"
+                  class="font-medium"
                 >
                   BETTER-AUTH
                 </a>
                 .
               </p>
-            </div>
-          </div>
+            </section>
+          </main>
         )}
       </Show>
     </Show>
-  );
+  )
 }

package/src/frameworks/solid/add-ons/convex/assets/src/routes/demo/convex.tsx

@@ -38,34 +38,25 @@ function ConvexTodos() {
   const totalCount = () => todos?.data()?.length || 0
 
   return (
-    <div
-      class="min-h-screen flex items-center justify-center p-4"
-      style={{
-        background:
-          'linear-gradient(135deg, #667a56 0%, #8fbc8f 25%, #90ee90 50%, #98fb98 75%, #f0fff0 100%)',
-      }}
-    >
-      <div class="w-full max-w-2xl">
-        {/* Header Card */}
-        <div class="bg-white/95 backdrop-blur-sm rounded-2xl shadow-2xl border border-green-200/50 p-8 mb-6">
+    <main class="demo-page">
+      <div class="mx-auto w-full max-w-2xl space-y-6">
+        <section class="demo-panel">
           <div class="text-center">
-            <h1 class="text-4xl font-bold text-green-800 mb-2">Convex Todos</h1>
-            <p class="text-green-600 text-lg">Powered by real-time sync</p>
+            <p class="island-kicker mb-2">Convex</p>
+            <h1 class="demo-title">Todos</h1>
+            <p class="demo-muted mt-2">Powered by real-time sync</p>
             <Show when={totalCount() > 0}>
               <div class="mt-4 flex justify-center space-x-6 text-sm">
-                <span class="text-green-700 font-medium">
-                  {completedCount()} completed
-                </span>
-                <span class="text-gray-600">
+                <span class="font-medium">{completedCount()} completed</span>
+                <span class="demo-muted">
                   {totalCount() - completedCount()} remaining
                 </span>
               </div>
             </Show>
           </div>
-        </div>
+        </section>
 
-        {/* Add Todo Card */}
-        <div class="bg-white/95 backdrop-blur-sm rounded-2xl shadow-xl border border-green-200/50 p-6 mb-6">
+        <section class="demo-card">
           <div class="flex gap-3">
             <input
               type="text"
@@ -77,46 +68,43 @@ function ConvexTodos() {
                 }
               }}
               placeholder="What needs to be done?"
-              class="flex-1 px-4 py-3 rounded-xl border-2 border-green-200 focus:border-green-400 focus:outline-none text-gray-800 placeholder-gray-500 bg-white/80 transition-colors"
+              class="demo-input min-w-0 flex-1"
             />
             <button
               onClick={handleAddTodo}
               disabled={!newTodo().trim()}
-              class="bg-gradient-to-r from-green-500 to-green-600 hover:from-green-600 hover:to-green-700 disabled:from-gray-300 disabled:to-gray-400 disabled:cursor-not-allowed text-white font-semibold py-3 px-6 rounded-xl transition-all duration-200 flex items-center gap-2 shadow-lg hover:shadow-xl"
+              class="demo-button"
             >
               <Plus size={20} />
               Add
             </button>
           </div>
-        </div>
+        </section>
 
-        {/* Todos List */}
-        <div class="bg-white/95 backdrop-blur-sm rounded-2xl shadow-xl border border-green-200/50 overflow-hidden">
+        <section class="demo-card overflow-hidden p-0">
           <Show when={todos.isLoading()}>
             <div class="p-8 text-center">
-              <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-green-500 mx-auto mb-4"></div>
-              <p class="text-green-600">Loading todos...</p>
+              <div class="mx-auto mb-4 h-8 w-8 animate-spin rounded-full border-b-2 border-[var(--lagoon-deep)]"></div>
+              <p class="demo-muted">Loading todos...</p>
             </div>
           </Show>
           <Show
             when={todos.data()?.length !== 0}
             fallback={
               <div class="p-12 text-center">
-                <Circle size={48} class="text-green-300 mx-auto mb-4" />
-                <h3 class="text-xl font-semibold text-green-800 mb-2">
-                  No todos yet
-                </h3>
-                <p class="text-green-600">
+                <Circle size={48} class="demo-muted mx-auto mb-4" />
+                <h3 class="demo-section-title mb-2">No todos yet</h3>
+                <p class="demo-muted">
                   Add your first todo above to get started!
                 </p>
               </div>
             }
           >
-            <div class="divide-y divide-green-100">
+            <div class="divide-y divide-[var(--line)]">
               <For each={todos.data()}>
                 {(todo, index) => (
                   <div
-                    class={`p-4 flex items-center gap-4 hover:bg-green-50/50 transition-colors ${
+                    class={`p-4 flex items-center gap-4 transition-colors hover:bg-[var(--link-bg-hover)] ${
                       todo.completed ? 'opacity-75' : ''
                     }`}
                     style={{
@@ -127,8 +115,8 @@ function ConvexTodos() {
                       onClick={() => handleToggleTodo(todo._id)}
                       class={`flex-shrink-0 w-6 h-6 rounded-full border-2 flex items-center justify-center transition-all duration-200 ${
                         todo.completed
-                          ? 'bg-green-500 border-green-500 text-white'
-                          : 'border-green-300 hover:border-green-400 text-transparent hover:text-green-400'
+                          ? 'border-[var(--lagoon-deep)] bg-[var(--lagoon)] text-[var(--sea-ink)]'
+                          : 'border-[var(--line)] text-transparent hover:border-[var(--lagoon-deep)] hover:text-[var(--lagoon-deep)]'
                       }`}
                     >
                       <Check size={14} />
@@ -137,8 +125,8 @@ function ConvexTodos() {
                     <span
                       class={`flex-1 text-lg transition-all duration-200 ${
                         todo.completed
-                          ? 'line-through text-gray-500'
-                          : 'text-gray-800'
+                          ? 'line-through demo-muted'
+                          : 'text-[var(--sea-ink)]'
                       }`}
                     >
                       {todo.text}
@@ -146,7 +134,7 @@ function ConvexTodos() {
 
                     <button
                       onClick={() => handleRemoveTodo(todo._id)}
-                      class="flex-shrink-0 p-2 text-red-400 hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors"
+                      class="demo-button demo-button-danger flex-shrink-0 p-2"
                     >
                       <Trash2 size={18} />
                     </button>
@@ -155,15 +143,14 @@ function ConvexTodos() {
               </For>
             </div>
           </Show>
-        </div>
+        </section>
 
-        {/* Footer */}
         <div class="text-center mt-6">
-          <p class="text-green-700/80 text-sm">
-            Built with Convex • Real-time updates • Always in sync
+          <p class="demo-muted text-sm">
+            Built with Convex, real-time updates, and synced state.
           </p>
         </div>
       </div>
-    </div>
+    </main>
   )
 }

package/src/frameworks/solid/add-ons/form/assets/src/routes/demo.form.tsx.ejs

@@ -18,12 +18,12 @@ function FieldWrapper(props: {
 }) {
   return (
     <div>
-      <label for={props.label} class="block font-bold mb-1 text-xl">
+      <label for={props.label} class="mb-2 block text-sm font-semibold text-[var(--sea-ink)]">
         {props.label}
       </label>
       {props.children}
       {props.errors.length ? (
-        <div class="text-red-500 mt-1 font-bold">{props.errors.join(', ')}</div>
+        <div class="mt-1 text-sm font-semibold text-red-600">{props.errors.join(', ')}</div>
       ) : null}
     </div>
   )
@@ -51,14 +51,15 @@ function FormExample() {
   }))
 
   return (
-    <div
-      class="flex items-center justify-center min-h-screen bg-gradient-to-br from-purple-100 to-blue-100 p-4 text-white"
-      style={{
-        'background-image':
-          'radial-gradient(50% 50% at 5% 40%, #f4a460 0%, #8b4513 70%, #1a0f0a 100%)',
-      }}
-    >
-      <div class="w-full max-w-2xl p-8 rounded-xl backdrop-blur-md bg-black/50 shadow-xl border-8 border-black/10">
+    <main class="demo-page demo-center">
+      <section class="demo-panel w-full max-w-2xl">
+        <div class="mb-6">
+          <p class="island-kicker mb-2">TanStack Form</p>
+          <h1 class="demo-title">Address Form</h1>
+          <p class="demo-muted mt-2">
+            Nested fields, field-level validation, and a select input.
+          </p>
+        </div>
         <form
           onSubmit={(e) => {
             e.preventDefault()
@@ -93,7 +94,7 @@ function FormExample() {
                     value={field().state.value}
                     onBlur={field().handleBlur}
                     onChange={(e) => field().handleChange(e.target.value)}
-                    class="w-full px-4 py-2 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500"
+                    class="demo-input"
                   />
                 </FieldWrapper>
               )}
@@ -127,7 +128,7 @@ function FormExample() {
                     value={field().state.value}
                     onBlur={field().handleBlur}
                     onChange={(e) => field().handleChange(e.target.value)}
-                    class="w-full px-4 py-2 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500"
+                    class="demo-input"
                   />
                 </FieldWrapper>
               )}
@@ -157,7 +158,7 @@ function FormExample() {
                     value={field().state.value}
                     onBlur={field().handleBlur}
                     onChange={(e) => field().handleChange(e.target.value)}
-                    class="w-full px-4 py-2 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500"
+                    class="demo-input"
                   />
                 </FieldWrapper>
               )}
@@ -185,7 +186,7 @@ function FormExample() {
                     value={field().state.value}
                     onBlur={field().handleBlur}
                     onChange={(e) => field().handleChange(e.target.value)}
-                    class="w-full px-4 py-2 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500"
+                    class="demo-input"
                   />
                 </FieldWrapper>
               )}
@@ -210,7 +211,7 @@ function FormExample() {
                     value={field().state.value}
                     onBlur={field().handleBlur}
                     onChange={(e) => field().handleChange(e.target.value)}
-                    class="w-full px-4 py-2 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500"
+                    class="demo-input"
                   />
                 </FieldWrapper>
               )}
@@ -241,7 +242,7 @@ function FormExample() {
                     value={field().state.value}
                     onBlur={field().handleBlur}
                     onChange={(e) => field().handleChange(e.target.value)}
-                    class="w-full px-4 py-2 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500"
+                    class="demo-input"
                   />
                 </FieldWrapper>
               )}
@@ -271,7 +272,7 @@ function FormExample() {
                     value={field().state.value}
                     onBlur={field().handleBlur}
                     onChange={(e) => field().handleChange(e.target.value)}
-                    class="w-full px-4 py-2 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500"
+                    class="demo-select"
                   >
                     <option value="">Select a country</option>
                     <option value="US">United States</option>
@@ -318,7 +319,7 @@ function FormExample() {
                     value={field().state.value}
                     onBlur={field().handleBlur}
                     onChange={(e) => field().handleChange(e.target.value)}
-                    class="w-full px-4 py-2 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500"
+                    class="demo-input"
                     placeholder="(123) 456-7890"
                   />
                 </FieldWrapper>
@@ -331,14 +332,14 @@ function FormExample() {
             <button
               type="submit"
               disabled={form.state.isSubmitting}
-              class="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"
+              class="demo-button"
             >
               {form.state.isSubmitting ? 'Submitting...' : 'Submit'}
             </button>
           </div>
         </form>
-      </div>
-    </div>
+      </section>
+    </main>
   )
 }
 
@@ -349,4 +350,3 @@ export default (parentRoute: RootRoute) => createRoute({
   getParentRoute: () => parentRoute,
 })
 <% } %>
-    

package/src/frameworks/solid/add-ons/sentry/assets/src/routes/demo.sentry.bad-event-handler.tsx

@@ -6,15 +6,20 @@ export const Route = createFileRoute('/demo/sentry/bad-event-handler')({
 
 function RouteComponent() {
   return (
-    <div className="p-4">
-      <button
-        type="button"
-        onClick={() => {
-          throw new Error('Sentry Frontend Error')
-        }}
-      >
-        Throw error
-      </button>
-    </div>
+    <main class="demo-page demo-center">
+      <section class="demo-panel w-full max-w-md text-center">
+        <p class="island-kicker mb-2">Sentry</p>
+        <h1 class="demo-title mb-6">Error Handler Demo</h1>
+        <button
+          type="button"
+          onClick={() => {
+            throw new Error('Sentry Frontend Error')
+          }}
+          class="demo-button"
+        >
+          Throw error
+        </button>
+      </section>
+    </main>
   )
 }

package/src/frameworks/solid/add-ons/store/assets/src/routes/demo.store.tsx.ejs

@@ -20,7 +20,7 @@ function FirstName() {
       onInput={(e) =>
         store.setState((state) => ({ ...state, firstName: e.target.value }))
       }
-      class="bg-white/10 rounded-lg px-4 py-2 outline-none border border-white/20 hover:border-white/40 focus:border-white/60 transition-colors duration-200 placeholder-white/40"
+      class="demo-input"
     />
   )
 }
@@ -34,7 +34,7 @@ function LastName() {
       onInput={(e) =>
         store.setState((state) => ({ ...state, lastName: e.target.value }))
       }
-      class="bg-white/10 rounded-lg px-4 py-2 outline-none border border-white/20 hover:border-white/40 focus:border-white/60 transition-colors duration-200 placeholder-white/40"
+      class="demo-input"
     />
   )
 }
@@ -42,7 +42,7 @@ function LastName() {
 function FullName() {
   const fName = useStore(fullName)
   return (
-    <div class="bg-white/10 rounded-lg px-4 py-2 outline-none ">
+    <div class="demo-list-item font-medium">
       {fName()}
     </div>
   )
@@ -50,20 +50,15 @@ function FullName() {
 
 function DemoStore() {
   return (
-    <div
-      class="min-h-[calc(100vh-32px)] text-white p-8 flex items-center justify-center w-full h-full"
-      style={{
-        'background-image':
-          'radial-gradient(50% 50% at 80% 80%, #f4a460 0%, #8b4513 70%, #1a0f0a 100%)',
-      }}
-    >
-      <div class="bg-white/10 backdrop-blur-lg rounded-xl p-8 shadow-lg flex flex-col gap-4 text-3xl min-w-1/2">
-        <h1 class="text-4xl font-bold mb-5">Store Example</h1>
+    <main class="demo-page demo-center">
+      <section class="demo-panel flex w-full max-w-xl flex-col gap-4">
+        <p class="island-kicker">TanStack Store</p>
+        <h1 class="demo-title mb-2">Store Example</h1>
         <FirstName />
         <LastName />
         <FullName />
-      </div>
-    </div>
+      </section>
+    </main>
   )
 }