Repository: masumi-network/sokosumi
Pull request #77: feat(auth): make auth layout responsive
Author: login: golddydev
Created: 2025-03-12T13:10:43Z | Merged: 2025-03-14T08:02:26Z

This PR is for auth layout

## Updates

* Move `landing` page's `footer` and `navigation` to main components (`src/components`) 
Because that is both used in `landing` and `auth` layout.
(I think making common parent layout for both `landing` and `auth` pages compliate things)

* Add Heroes to auth layout

* Add props to auth buttons

* Make navigation link Component

* Make landing layout's header responsive


Diff:
diff --git a/web-app/src/app/(app)/components/nav-link.tsx b/web-app/src/app/(app)/components/nav-link.tsx
deleted file mode 100644
index 246cab2476..0000000000
--- a/web-app/src/app/(app)/components/nav-link.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-"use client";
-
-import Link from "next/link";
-import { usePathname } from "next/navigation";
-
-import { cn } from "@/lib/utils";
-
-interface NavLinkProps {
-  href: string;
-  label: string;
-}
-
-export default function NavLink({ href, label }: NavLinkProps) {
-  const pathname = usePathname();
-  const isActive = pathname.startsWith(href);
-
-  return (
-    <Link
-      href={href}
-      className={cn("hover:text-foreground/80 transition", {
-        "text-foreground underline": isActive,
-        "text-foreground/50": !isActive,
-      })}
-    >
-      {label}
-    </Link>
-  );
-}
diff --git a/web-app/src/app/(app)/components/nav-menu.tsx b/web-app/src/app/(app)/components/navigation-menu.tsx
similarity index 63%
rename from web-app/src/app/(app)/components/nav-menu.tsx
rename to web-app/src/app/(app)/components/navigation-menu.tsx
index d30724abbf..ec71390311 100644
--- a/web-app/src/app/(app)/components/nav-menu.tsx
+++ b/web-app/src/app/(app)/components/navigation-menu.tsx
@@ -1,30 +1,37 @@
 import { useTranslations } from "next-intl";
 
+import NavigationLink from "@/components/navigation-link";
 import { cn } from "@/lib/utils";
 
-import NavLink from "./nav-link";
-
-const navItems: Array<{
+type NavigationLinkData = {
   href: string;
   labelKey: keyof IntlMessages["App"]["Header"]["NavMenu"];
-}> = [
+};
+
+const navItems: NavigationLinkData[] = [
   { href: "/dashboard", labelKey: "home" },
   { href: "/jobs", labelKey: "jobs" },
   { href: "/billing", labelKey: "billing" },
   { href: "/settings", labelKey: "settings" },
 ];
 
-interface NavMenuProps {
+interface NavigationMenuProps {
   className?: string;
 }
 
-export default function NavMenu({ className = "" }: NavMenuProps) {
+export default function NavigationMenu({
+  className = "",
+}: NavigationMenuProps) {
   const t = useTranslations("App.Header.NavMenu");
 
   return (
     <ul className={cn("flex", className)}>
       {navItems.map((nav) => (
-        <NavLink key={nav.labelKey} href={nav.href} label={t(nav.labelKey)} />
+        <NavigationLink
+          key={nav.labelKey}
+          href={nav.href}
+          label={t(nav.labelKey)}
+        />
       ))}
       <div className="text-muted-foreground font-bold">
         {t("creditsBalance", { balance: "6901" })}
diff --git a/web-app/src/app/(app)/components/sheet-navigation.tsx b/web-app/src/app/(app)/components/sheet-navigation.tsx
index 3cb0eba4e4..d4b4f17f4b 100644
--- a/web-app/src/app/(app)/components/sheet-navigation.tsx
+++ b/web-app/src/app/(app)/components/sheet-navigation.tsx
@@ -11,7 +11,7 @@ import {
   SheetTrigger,
 } from "@/components/ui/sheet";
 
-import NavMenu from "./nav-menu";
+import NavigationMenu from "./navigation-menu";
 
 export default function SheetNavigation() {
   return (
@@ -23,7 +23,7 @@ export default function SheetNavigation() {
           </Button>
         </div>
       </SheetTrigger>
-      <SheetContent className="h-svh max-w-sm p-4" side="right">
+      <SheetContent className="h-svh w-full max-w-sm p-4" side="right">
         <SheetHeader>
           <SheetTitle className="flex justify-center">
             <SokosumiLogo />
@@ -31,7 +31,7 @@ export default function SheetNavigation() {
           <SheetDescription />
         </SheetHeader>
         <nav className="mt-4">
-          <NavMenu className="flex-col gap-4 text-base" />
+          <NavigationMenu className="flex-col gap-4 text-base" />
         </nav>
       </SheetContent>
     </Sheet>
diff --git a/web-app/src/app/(app)/components/sticky-navigation.tsx b/web-app/src/app/(app)/components/sticky-navigation.tsx
index d0cea54813..3b275764bc 100644
--- a/web-app/src/app/(app)/components/sticky-navigation.tsx
+++ b/web-app/src/app/(app)/components/sticky-navigation.tsx
@@ -1,9 +1,9 @@
-import NavMenu from "./nav-menu";
+import NavigationMenu from "./navigation-menu";
 
 export default function StickyNavigation() {
   return (
     <nav className="mx-4 hidden flex-1 md:block">
-      <NavMenu className="flex-row justify-end gap-4 text-sm lg:gap-6" />
+      <NavigationMenu className="flex-row justify-end gap-4 text-sm lg:gap-6" />
     </nav>
   );
 }
diff --git a/web-app/src/app/(auth)/layout.tsx b/web-app/src/app/(auth)/layout.tsx
deleted file mode 100644
index cae99a9eaa..0000000000
--- a/web-app/src/app/(auth)/layout.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import { X } from "lucide-react";
-import type { Metadata } from "next";
-import Link from "next/link";
-import { getTranslations } from "next-intl/server";
-
-import { Button } from "@/components/ui/button";
-
-export async function generateMetadata(): Promise<Metadata> {
-  const t = await getTranslations("Auth.Metadata");
-
-  return {
-    title: {
-      default: t("Title.default"),
-      template: t("Title.template"),
-    },
-    description: t("description"),
-  };
-}
-
-export default function AuthLayout({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
-  return (
-    <div className="flex flex-1 flex-col items-center justify-center">
-      <div className="flex w-full max-w-2xl flex-1 flex-col gap-6 p-6">
-        <div className="flex items-center justify-start">
-          <Link href="/">
-            <Button className="h-10 w-10 rounded-md bg-black">
-              <X className="text-md text-white" />
-            </Button>
-          </Link>
-        </div>
-        <div className="flex flex-1 items-center justify-center rounded-lg border border-gray-200 p-3">
-          <div className="flex w-full flex-col">{children}</div>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/web-app/src/app/(auth)/buttons.tsx b/web-app/src/app/(landing)/(auth)/buttons.tsx
similarity index 56%
rename from web-app/src/app/(auth)/buttons.tsx
rename to web-app/src/app/(landing)/(auth)/buttons.tsx
index 581bae2a20..76adbd5162 100644
--- a/web-app/src/app/(auth)/buttons.tsx
+++ b/web-app/src/app/(landing)/(auth)/buttons.tsx
@@ -3,21 +3,21 @@ import { useTranslations } from "next-intl";
 
 import { Button } from "@/components/ui/button";
 
-export function SignInButton() {
+export function SignInButton(props: React.ComponentProps<typeof Button>) {
   const t = useTranslations("Auth.Words");
 
   return (
     <Link href="/signin">
-      <Button variant="outline">{t("signIn")}</Button>
+      <Button {...props}>{t("signIn")}</Button>
     </Link>
   );
 }
 
-export function SignUpButton() {
+export function SignUpButton(props: React.ComponentProps<typeof Button>) {
   const t = useTranslations("Auth.Words");
   return (
     <Link href="/signup">
-      <Button>{t("signUp")}</Button>
+      <Button {...props}>{t("signUp")}</Button>
     </Link>
   );
 }
diff --git a/web-app/src/app/(landing)/(auth)/components/close-button.tsx b/web-app/src/app/(landing)/(auth)/components/close-button.tsx
new file mode 100644
index 0000000000..2adccbab29
--- /dev/null
+++ b/web-app/src/app/(landing)/(auth)/components/close-button.tsx
@@ -0,0 +1,14 @@
+import { X } from "lucide-react";
+import Link from "next/link";
+
+import { Button } from "@/components/ui/button";
+
+export default function CloseButton() {
+  return (
+    <Link href="/">
+      <Button className="h-10 w-10 rounded-md bg-black">
+        <X className="text-md text-white" />
+      </Button>
+    </Link>
+  );
+}
diff --git a/web-app/src/app/(auth)/components/divider.tsx b/web-app/src/app/(landing)/(auth)/components/divider.tsx
similarity index 100%
rename from web-app/src/app/(auth)/components/divider.tsx
rename to web-app/src/app/(landing)/(auth)/components/divider.tsx
diff --git a/web-app/src/app/(landing)/(auth)/components/heroes.tsx b/web-app/src/app/(landing)/(auth)/components/heroes.tsx
new file mode 100644
index 0000000000..a4a59892af
--- /dev/null
+++ b/web-app/src/app/(landing)/(auth)/components/heroes.tsx
@@ -0,0 +1,18 @@
+import Image from "next/image";
+
+export default function Heroes() {
+  return (
+    <div className="grid grid-cols-2 grid-rows-2 gap-8">
+      {Array.from({ length: 4 }).map((_, index) => (
+        <div key={index} className="relative h-48 w-48 xl:h-56 xl:w-56">
+          <Image
+            src="/placeholder.svg"
+            alt="Hero"
+            fill
+            className="object-cover"
+          />
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/web-app/src/app/(auth)/components/social-buttons.tsx b/web-app/src/app/(landing)/(auth)/components/social-buttons.tsx
similarity index 98%
rename from web-app/src/app/(auth)/components/social-buttons.tsx
rename to web-app/src/app/(landing)/(auth)/components/social-buttons.tsx
index 5cf24c4216..de6c82a757 100644
--- a/web-app/src/app/(auth)/components/social-buttons.tsx
+++ b/web-app/src/app/(landing)/(auth)/components/social-buttons.tsx
@@ -52,7 +52,7 @@ export default function SocialButtons({ variant }: SocialButtonsProps) {
           <socialButton.button
             onClick={() => handleClick(socialButton.key)}
             key={socialButton.key}
-            className="flex items-center justify-center !rounded-lg !px-3 !py-2 !text-base"
+            className="flex items-center justify-center !rounded-lg !px-3 !py-2 !text-sm"
             align="center"
             text={t("continueWith", { provider: socialButton.key })}
           />
diff --git a/web-app/src/app/(landing)/(auth)/layout.tsx b/web-app/src/app/(landing)/(auth)/layout.tsx
new file mode 100644
index 0000000000..8080e20f26
--- /dev/null
+++ b/web-app/src/app/(landing)/(auth)/layout.tsx
@@ -0,0 +1,35 @@
+import type { Metadata } from "next";
+import { getTranslations } from "next-intl/server";
+
+import Heroes from "./components/heroes";
+
+export async function generateMetadata(): Promise<Metadata> {
+  const t = await getTranslations("Auth.Metadata");
+
+  return {
+    title: {
+      default: t("Title.default"),
+      template: t("Title.template"),
+    },
+    description: t("description"),
+  };
+}
+
+export default function AuthLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <div className="container grid flex-1 grid-cols-1 justify-items-center gap-6 px-6 py-12 md:py-24 lg:grid-cols-2 lg:justify-items-start">
+      <div className="hidden lg:block">
+        <Heroes />
+      </div>
+      <div className="w-full max-w-xl">
+        <div className="flex flex-col rounded-lg border border-gray-200 p-3">
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/web-app/src/app/(auth)/signin/components/data.ts b/web-app/src/app/(landing)/(auth)/signin/components/data.ts
similarity index 100%
rename from web-app/src/app/(auth)/signin/components/data.ts
rename to web-app/src/app/(landing)/(auth)/signin/components/data.ts
diff --git a/web-app/src/app/(auth)/signin/components/form.tsx b/web-app/src/app/(landing)/(auth)/signin/components/form.tsx
similarity index 100%
rename from web-app/src/app/(auth)/signin/components/form.tsx
rename to web-app/src/app/(landing)/(auth)/signin/components/form.tsx
diff --git a/web-app/src/app/(auth)/signin/components/header.tsx b/web-app/src/app/(landing)/(auth)/signin/components/header.tsx
similarity index 100%
rename from web-app/src/app/(auth)/signin/components/header.tsx
rename to web-app/src/app/(landing)/(auth)/signin/components/header.tsx
diff --git a/web-app/src/app/(auth)/signin/page.tsx b/web-app/src/app/(landing)/(auth)/signin/page.tsx
similarity index 100%
rename from web-app/src/app/(auth)/signin/page.tsx
rename to web-app/src/app/(landing)/(auth)/signin/page.tsx
diff --git a/web-app/src/app/(auth)/signup/components/data.ts b/web-app/src/app/(landing)/(auth)/signup/components/data.ts
similarity index 100%
rename from web-app/src/app/(auth)/signup/components/data.ts
rename to web-app/src/app/(landing)/(auth)/signup/components/data.ts
diff --git a/web-app/src/app/(auth)/signup/components/form.tsx b/web-app/src/app/(landing)/(auth)/signup/components/form.tsx
similarity index 100%
rename from web-app/src/app/(auth)/signup/components/form.tsx
rename to web-app/src/app/(landing)/(auth)/signup/components/form.tsx
diff --git a/web-app/src/app/(auth)/signup/components/header.tsx b/web-app/src/app/(landing)/(auth)/signup/components/header.tsx
similarity index 100%
rename from web-app/src/app/(auth)/signup/components/header.tsx
rename to web-app/src/app/(landing)/(auth)/signup/components/header.tsx
diff --git a/web-app/src/app/(auth)/signup/page.tsx b/web-app/src/app/(landing)/(auth)/signup/page.tsx
similarity index 100%
rename from web-app/src/app/(auth)/signup/page.tsx
rename to web-app/src/app/(landing)/(auth)/signup/page.tsx
diff --git a/web-app/src/app/(landing)/components/auth-buttons.tsx b/web-app/src/app/(landing)/components/auth-buttons.tsx
new file mode 100644
index 0000000000..f5e608ce25
--- /dev/null
+++ b/web-app/src/app/(landing)/components/auth-buttons.tsx
@@ -0,0 +1,26 @@
+"use client";
+
+import { usePathname } from "next/navigation";
+
+import { SignInButton, SignUpButton } from "@/app/(landing)/(auth)/buttons";
+
+interface AuthButtonsProps {
+  containerClassName?: string;
+}
+
+export default function AuthButtons({
+  containerClassName = "flex items-center gap-4",
+}: AuthButtonsProps) {
+  const pathname = usePathname();
+
+  if (pathname.startsWith("/signin")) return <SignUpButton />;
+
+  if (pathname.startsWith("/signup")) return <SignInButton />;
+
+  return (
+    <div className={containerClassName}>
+      <SignInButton variant="outline" />
+      <SignUpButton />
+    </div>
+  );
+}
diff --git a/web-app/src/app/(landing)/components/header.tsx b/web-app/src/app/(landing)/components/header.tsx
index 883d80eb6c..017b34273b 100644
--- a/web-app/src/app/(landing)/components/header.tsx
+++ b/web-app/src/app/(landing)/components/header.tsx
@@ -1,11 +1,12 @@
-import { SignInButton, SignUpButton } from "@/app/(auth)/buttons";
 import { SokosumiLogo } from "@/components/masumi-logos";
 
+import AuthButtons from "./auth-buttons";
 import Navigation from "./navigation";
+import SheetNavigation from "./sheet-navigation";
 
 export default function Header() {
   return (
-    <div id="header" className="w-full px-4 py-6 lg:px-8">
+    <div id="header" className="w-full px-4 py-3 lg:px-8 lg:py-6">
       <div className="container mx-auto flex items-center justify-between gap-6">
         {/* Left - Logo */}
         <SokosumiLogo />
@@ -14,17 +15,13 @@ export default function Header() {
         <Navigation />
 
         {/* Right - Auth Buttons */}
-        <AuthButtons />
-      </div>
-    </div>
-  );
-}
+        <div className="ml-auto hidden sm:block">
+          <AuthButtons />
+        </div>
 
-function AuthButtons() {
-  return (
-    <div className="flex items-center gap-4">
-      <SignInButton />
-      <SignUpButton />
+        {/* Sheet Navigation Trigger */}
+        <SheetNavigation />
+      </div>
     </div>
   );
 }
diff --git a/web-app/src/app/(landing)/components/navigation-menu.tsx b/web-app/src/app/(landing)/components/navigation-menu.tsx
new file mode 100644
index 0000000000..05e61a915d
--- /dev/null
+++ b/web-app/src/app/(landing)/components/navigation-menu.tsx
@@ -0,0 +1,59 @@
+import { useTranslations } from "next-intl";
+
+import NavigationLink from "@/components/navigation-link";
+import { cn } from "@/lib/utils";
+
+type NavigationLinkData = {
+  href: string;
+  labelKey: keyof IntlMessages["Landing"]["Header"]["Navigation"];
+  showChevron?: boolean;
+};
+
+const navigationLinks: NavigationLinkData[] = [
+  {
+    href: "/gallery",
+    labelKey: "agents",
+    showChevron: true,
+  },
+  {
+    href: "/#how-it-works",
+    labelKey: "howItWorks",
+    showChevron: true,
+  },
+  {
+    href: "/#join-our-community",
+    labelKey: "community",
+    showChevron: true,
+  },
+  {
+    href: "/#monetize",
+    labelKey: "monetize",
+    showChevron: true,
+  },
+];
+
+interface NavigationMenuProps {
+  className?: string;
+}
+
+export default function NavigationMenu({
+  className = "",
+}: NavigationMenuProps) {
+  const t = useTranslations("Landing.Header.Navigation");
+
+  return (
+    <ul className={cn("flex", className)}>
+      {navigationLinks.map((nav) => (
+        <NavigationLink
+          key={nav.labelKey}
+          href={nav.href}
+          label={t(nav.labelKey)}
+          showChevron={nav.showChevron}
+          className="inline-flex items-center gap-1 p-2 text-sm font-medium transition-colors"
+          activeClassName="bg-landing-navigation-active text-primary"
+          inActiveClassName="text-muted-foreground hover:text-primary"
+        />
+      ))}
+    </ul>
+  );
+}
diff --git a/web-app/src/app/(landing)/components/navigation.tsx b/web-app/src/app/(landing)/components/navigation.tsx
index e5803eb801..cf01ed90b1 100644
--- a/web-app/src/app/(landing)/components/navigation.tsx
+++ b/web-app/src/app/(landing)/components/navigation.tsx
@@ -1,69 +1,9 @@
-"use client";
-import { ChevronDown } from "lucide-react";
-import Link from "next/link";
-import { usePathname } from "next/navigation";
-import { useTranslations } from "next-intl";
-
-import { cn } from "@/lib/utils";
-
-type NavigationLink = {
-  href: string;
-  labelKey: keyof IntlMessages["Landing"]["Header"]["Navigation"];
-  showChevron?: boolean;
-};
-
-const navigationLinks: NavigationLink[] = [
-  {
-    href: "/gallery",
-    labelKey: "agents",
-    showChevron: true,
-  },
-  {
-    href: "/#how-it-works",
-    labelKey: "howItWorks",
-    showChevron: true,
-  },
-  {
-    href: "/#join-our-community",
-    labelKey: "community",
-    showChevron: true,
-  },
-  {
-    href: "/#monetize",
-    labelKey: "monetize",
-    showChevron: true,
-  },
-];
-
-export default function Navigation({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLElement>) {
-  const pathname = usePathname();
-  const t = useTranslations("Landing.Header.Navigation");
+import NavigationMenu from "./navigation-menu";
 
+export default function Navigation() {
   return (
-    <div className="flex items-center gap-8">
-      <nav
-        className={cn("flex items-center space-x-4 lg:space-x-6", className)}
-        {...props}
-      >
-        {navigationLinks.map((link) => (
-          <Link
-            key={link.href}
-            href={link.href}
-            className={cn(
-              "inline-flex items-center gap-1 rounded-md px-4 py-2.5 text-sm font-medium transition-colors",
-              pathname === link.href
-                ? "bg-landing-navigation-active text-primary"
-                : "text-muted-foreground hover:text-primary",
-            )}
-          >
-            {t(link.labelKey)}
-            {link.showChevron && <ChevronDown className="h-4 w-4" />}
-          </Link>
-        ))}
-      </nav>
-    </div>
+    <nav className="mx-4 hidden flex-1 lg:block">
+      <NavigationMenu className="flex-row items-center justify-around gap-x-4" />
+    </nav>
   );
 }
diff --git a/web-app/src/app/(landing)/components/sheet-navigation.tsx b/web-app/src/app/(landing)/components/sheet-navigation.tsx
new file mode 100644
index 0000000000..d1498bd1d5
--- /dev/null
+++ b/web-app/src/app/(landing)/components/sheet-navigation.tsx
@@ -0,0 +1,39 @@
+import { Menu } from "lucide-react";
+
+import { SokosumiLogo } from "@/components/masumi-logos";
+import { Button } from "@/components/ui/button";
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "@/components/ui/sheet";
+
+import AuthButtons from "./auth-buttons";
+import NavigationMenu from "./navigation-menu";
+
+export default function SheetNavigation() {
+  return (
+    <Sheet>
+      <SheetTrigger asChild>
+        <Button variant="outline" size="icon" className="flex lg:hidden">
+          <Menu />
+        </Button>
+      </SheetTrigger>
+      <SheetContent className="h-svh w-full max-w-sm p-4" side="right">
+        <SheetHeader>
+          <SheetTitle className="flex justify-center">
+            <SokosumiLogo />
+          </SheetTitle>
+          <SheetDescription />
+        </SheetHeader>
+        <nav className="mt-4">
+          <AuthButtons containerClassName="flex items-center justify-around" />
+          <NavigationMenu className="mt-8 flex-col gap-4 text-base" />
+        </nav>
+      </SheetContent>
+    </Sheet>
+  );
+}
diff --git a/web-app/src/app/(landing)/layout.tsx b/web-app/src/app/(landing)/layout.tsx
index c4b405eff7..4f84c6dbac 100644
--- a/web-app/src/app/(landing)/layout.tsx
+++ b/web-app/src/app/(landing)/layout.tsx
@@ -23,7 +23,7 @@ export async function generateMetadata(): Promise<Metadata> {
 
 export default function LandingLayout({ children }: LandingLayoutProps) {
   return (
-    <div className="flex min-h-screen flex-col">
+    <div className="flex min-h-svh flex-col">
       <Header />
       <BreadcrumbNav />
       <main className="flex-1">{children}</main>
diff --git a/web-app/src/components/navigation-link.tsx b/web-app/src/components/navigation-link.tsx
new file mode 100644
index 0000000000..6913606fbb
--- /dev/null
+++ b/web-app/src/components/navigation-link.tsx
@@ -0,0 +1,41 @@
+"use client";
+
+import { ChevronDown } from "lucide-react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+
+import { cn } from "@/lib/utils";
+
+interface NavigationLinkProps {
+  href: string;
+  label: string;
+  className?: string;
+  activeClassName?: string;
+  inActiveClassName?: string;
+  showChevron?: boolean;
+}
+
+export default function NavigationLink({
+  href,
+  label,
+  className = "hover:text-foreground/80 transition-colors",
+  activeClassName = "text-foreground underline",
+  inActiveClassName = "text-foreground/50",
+  showChevron,
+}: NavigationLinkProps) {
+  const pathname = usePathname();
+  const isActive = pathname.startsWith(href);
+
+  return (
+    <Link
+      href={href}
+      className={cn(className, {
+        [activeClassName]: isActive,
+        [inActiveClassName]: !isActive,
+      })}
+    >
+      {label}
+      {showChevron && <ChevronDown className="h-4 w-4" />}
+    </Link>
+  );
+}


Reviews:
user: login: mrgrauel
body: On the `(landing)` layout I moved the footer to the bottom of the entire viewport. On a bigger screen it looks ugly with the whitespace beneath the footer. I would recommend to move the footer to the bottom.

![image](https://github.com/user-attachments/assets/7e9d71dd-fb4f-4943-a8cd-bc6b5208b921)

state: CHANGES_REQUESTED
author_association: COLLABORATOR
submitted_at: 2025-03-13T14:01:53Z
user: login: golddydev
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-03-13T14:45:29Z
user: login: mrgrauel
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-03-13T15:07:58Z
user: login: mrgrauel
body: https://github.com/masumi-network/sokosumi/pull/77#issuecomment-2721611206
state: CHANGES_REQUESTED
author_association: COLLABORATOR
submitted_at: 2025-03-13T15:12:39Z
user: login: mrgrauel
body: Nice 💪 
state: APPROVED
author_association: COLLABORATOR
submitted_at: 2025-03-13T20:41:56Z

Review comments:
path: web-app/src/components/main-navigation.tsx
user: login: mrgrauel
body: Is this really a `main-navigation`? Isn't it more of a `landing-navigation`?
It should never be used within the `(app)` route group.
created_at: 2025-03-13T13:57:49Z
author_association: COLLABORATOR
path: web-app/src/components/main-navigation.tsx
user: login: golddydev
body: Only I don't how to name it.
Since that is used in both `auth` and `landing`
created_at: 2025-03-13T14:45:29Z
author_association: COLLABORATOR
path: web-app/src/components/main-navigation.tsx
user: login: mrgrauel
body: Shouldn't we move the `auth` route group into the `landing` route group? We only need it in the `landing` context.
created_at: 2025-03-13T15:07:57Z
author_association: COLLABORATOR

PR comments:
user: login: mrgrauel
created_at: 2025-03-13T13:47:52Z
body: @golddydev, please change the title as we discussed today. We agreed to use the [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/#specification) format for Pull Request titles.
author_association: COLLABORATOR
user: login: mrgrauel
created_at: 2025-03-13T13:56:18Z
body: Did a small change with 6a49fa24105273c80369e8a68ec747086fbfbc64 to use your new component in the `(landing)` route group.
author_association: COLLABORATOR
user: login: golddydev
created_at: 2025-03-13T14:44:29Z
body: > Did a small change with [6a49fa2](https://github.com/masumi-network/sokosumi/commit/6a49fa24105273c80369e8a68ec747086fbfbc64) to use your new component in the `(landing)` route group.

Okay.

FYI, I suggest let's keep `layout` independent.
E.g. not use components from `auth` in `landing`

I'll move commonly used components into main components folder
author_association: COLLABORATOR
user: login: golddydev
created_at: 2025-03-13T14:59:22Z
body: I also used `min-h-svh` instead of `min-h-screen` in `landing` layout.
Because `svh` is good for mobile (in which address bar is visible and invisible)

[3fd4631](https://github.com/masumi-network/sokosumi/pull/77/commits/3fd463119ff830601effcce044c96404c7ea6b3a)
author_association: COLLABORATOR
user: login: mrgrauel
created_at: 2025-03-13T15:10:28Z
body: > > Did a small change with [6a49fa2](https://github.com/masumi-network/sokosumi/commit/6a49fa24105273c80369e8a68ec747086fbfbc64) to use your new component in the `(landing)` route group.
> 
> Okay.
> 
> FYI, I suggest let's keep `layout` independent. E.g. not use components from `auth` in `landing`
> 
> I'll move commonly used components into main components folder

That is also an argument for moving the `auth` route group into the `landing` route group. We only need it in the context of `landing`. We should never require the authentication feature within the `auth` route, as we are already a registered and authenticated user.
author_association: COLLABORATOR
user: login: golddydev
created_at: 2025-03-13T15:18:09Z
body: > [#77 (comment)](https://github.com/masumi-network/sokosumi/pull/77#issuecomment-2721611206)

So you are suggesting to have `auth` layout inside `landing` layout?
author_association: COLLABORATOR
user: login: mrgrauel
created_at: 2025-03-13T15:28:52Z
body: > > [#77 (comment)](https://github.com/masumi-network/sokosumi/pull/77#issuecomment-2721611206)
> 
> So you are suggesting to have `auth` layout inside `landing` layout?

I suggest to have the auth route group in the landing route group.
author_association: COLLABORATOR