feat: home layout max width

src/app/(home)/(activities)/layout.tsx

@@ -14,14 +14,12 @@ export default async function ActivitiesLayout({
   children?: React.ReactNode
 }) {
   return (
-    <section className="pt-24">
-      <div className="max-w-screen-lg px-5 mx-auto flex">
-        <div className="flex-1 min-w-[300px]">
-          <HomeActivitiesTabs />
-          {children}
-        </div>
-        <HomeSidebar />
+    <>
+      <div className="flex-1 min-w-[300px]">
+        <HomeActivitiesTabs />
+        {children}
       </div>
-    </section>
+      <HomeSidebar />
+    </>
   )
 }

src/app/(home)/about/page.tsx

@@ -108,8 +108,8 @@ async function Home() {
   ]
 
   return (
-    <div className="max-w-screen-lg px-5 mx-auto">
-      <div className="h-screen w-full flex justify-center flex-col relative text-center">
+    <div>
+      <div className="h-[calc(100vh-6rem)] w-full flex justify-center flex-col relative text-center">
         <h2 className="text-6xl sm:text-8xl font-bold mb-5">
           {features.map((feature) => (
             <span

src/app/(home)/layout.tsx

@@ -14,7 +14,7 @@ export default async function HomeLayout({
   return (
     <>
       <header className="py-5 fixed w-full top-0 bg-white z-[1]">
-        <div className="max-w-screen-lg px-5 mx-auto flex justify-between items-center">
+        <div className="max-w-screen-xl px-5 mx-auto flex justify-between items-center">
           <UniLink
             href="/"
             className="text-2xl font-extrabold flex items-center"
@@ -30,7 +30,9 @@ export default async function HomeLayout({
           </div>
         </div>
       </header>
-      {children}
+      <section className="pt-24">
+        <div className="max-w-screen-lg px-5 mx-auto flex">{children}</div>
+      </section>
       <footer className="mt-10 font-medium border-t">
         <div className="max-w-screen-lg px-5 py-14 mx-auto flex justify-between">
           <span className="text-zinc-700 ml-2 inline-flex items-center space-x-5 align-middle">

src/app/(home)/search/page.tsx

@@ -19,17 +19,15 @@ export function generateMetadata({
 
 async function Search() {
   return (
-    <section className="pt-24">
-      <div className="max-w-screen-lg px-5 mx-auto flex">
-        <div className="flex-1 min-w-[300px]">
-          <SearchInput />
-          <div className="mt-10">
-            <HomeFeed type="search" />
-          </div>
+    <>
+      <div className="flex-1 min-w-[300px]">
+        <SearchInput />
+        <div className="mt-10">
+          <HomeFeed type="search" />
         </div>
-        <HomeSidebar hideSearch={true} />
       </div>
-    </section>
+      <HomeSidebar hideSearch={true} />
+    </>
   )
 }
 

src/app/(home)/tag/[tag]/page.tsx

@@ -26,14 +26,12 @@ export default function Tag({
   params.tag = decodeURIComponent(params.tag)
 
   return (
-    <section className="pt-24">
-      <div className="max-w-screen-lg px-5 mx-auto flex">
-        <div className="flex-1 min-w-[300px]">
-          <h2 className="text-3xl font-bold">Tag: {params.tag}</h2>
-          <HomeFeed type="tag" />
-        </div>
-        <HomeSidebar />
+    <>
+      <div className="flex-1 min-w-[300px]">
+        <h2 className="text-3xl font-bold">Tag: {params.tag}</h2>
+        <HomeFeed type="tag" />
       </div>
-    </section>
+      <HomeSidebar />
+    </>
   )
 }

src/app/(home)/topic/[topic]/page.tsx

@@ -32,20 +32,18 @@ export default async function Topic({
   const info = topics.find((t) => t.name === params.topic)
 
   return (
-    <section className="pt-24">
-      <div className="max-w-screen-lg px-5 mx-auto flex">
-        <div className="flex-1 min-w-[300px]">
-          <h2 className="text-4xl font-bold mb-4">{t(params.topic)}</h2>
-          <p className="text-zinc-400 mb-2">{t(info?.description || "")}</p>
-          {info?.includeKeywords?.length || 0 > 0 ? (
-            <p className="text-zinc-400 mb-6">
-              {t("Topic Keywords")}: {info?.includeKeywords?.join(", ")}
-            </p>
-          ) : null}
-          <HomeFeed type="topic" noteIds={info?.notes} />
-        </div>
-        <HomeSidebar />
+    <>
+      <div className="flex-1 min-w-[300px]">
+        <h2 className="text-4xl font-bold mb-4">{t(params.topic)}</h2>
+        <p className="text-zinc-400 mb-2">{t(info?.description || "")}</p>
+        {info?.includeKeywords?.length || 0 > 0 ? (
+          <p className="text-zinc-400 mb-6">
+            {t("Topic Keywords")}: {info?.includeKeywords?.join(", ")}
+          </p>
+        ) : null}
+        <HomeFeed type="topic" noteIds={info?.notes} />
       </div>
-    </section>
+      <HomeSidebar />
+    </>
   )
 }