chore: reducing code

src/app/layout.tsx

@@ -1,9 +1,10 @@
 import { PropsWithChildren } from "react";
-import LandingLayout from "@/components/LandingLayout";
 import type { Metadata } from "next";
 import { twMerge } from "tailwind-merge";
 import localFont from "next/font/local";
 import "./globals.css";
+import { Header } from "@/components/Header";
+import Footer from "@/components/Footer";
 
 const geistSans = localFont({
   src: "./fonts/GeistVF.woff",
@@ -17,7 +18,7 @@ const geistMono = localFont({
 });
 
 export const metadata: Metadata = {
-  title: "Next.js Polar starter kit",
+  title: "Polar | Next.js starter kit",
   description: "An easy to use setup for polar.sh with Next.js",
 };
 
@@ -33,7 +34,11 @@ export default function Layout({ children }: PropsWithChildren) {
           `${geistSans.variable} ${geistMono.variable} antialiased`
         )}
       >
-        <LandingLayout>{children}</LandingLayout>
+        <div className="dark:bg-[#0B0C0E] flex w-full flex-col items-center bg-white">
+          <Header />
+          {children}
+          <Footer />
+        </div>
       </body>
     </html>
   );

src/components/Footer.tsx

@@ -3,17 +3,16 @@ import Link, { LinkProps } from "next/link";
 import { PropsWithChildren } from "react";
 import { twMerge } from "tailwind-merge";
 
-const Footer = ({ wide }: { wide?: boolean }) => {
+const Footer = () => {
   return (
     <div
       className={twMerge(
-        "dark:border-polar-800 dark:bg-polar-950 border-gray-75 flex w-full flex-col items-center space-y-24 border-t bg-white py-24 md:py-32"
+        "dark:border-polar-800 dark:bg-polar-950 border-gray-75 flex w-full flex-col items-center space-y-24 border-t bg-white py-24 md:py-32 max-w-7xl"
       )}
     >
       <div
         className={twMerge(
-          "flex w-full flex-col gap-x-16 gap-y-24 px-8 md:flex-row md:justify-between md:gap-y-12",
-          wide ? "max-w-7xl" : "max-w-[970px]"
+          "flex w-full flex-col gap-x-16 gap-y-24 px-8 md:flex-row md:justify-between md:gap-y-12"
         )}
       >
         <div className="flex flex-col gap-y-6">
@@ -27,7 +26,7 @@ const Footer = ({ wide }: { wide?: boolean }) => {
         <div
           className={twMerge(
             "flex flex-col gap-y-12 md:flex-row",
-            wide ? "gap-x-24 lg:gap-x-32" : "gap-x-20"
+            "gap-x-24 lg:gap-x-32"
           )}
         >
           <div className="flex flex-col gap-y-4">

src/components/Header.tsx

@@ -0,0 +1,27 @@
+import { TopbarNavigation } from "@/components/TopbarNavigation";
+import { BrandingMenu } from "@/components/BrandingMenu";
+import Link from "next/link";
+import Button from "@/components/ui/atoms/button";
+
+export const Header = () => {
+  return (
+    <div className="w-full max-w-[100vw]  px-4  md:max-w-7xl md:px-12  dark:bg-blac py-4 md:py-8 sticky top-0 z-30 dark:bg-[#0B0C0E] bg-white flex flex-row items-center justify-between bg-transparent">
+      <TopbarNavigation />
+      <BrandingMenu
+        className="mt-1 hidden md:block"
+        size={100}
+        logoVariant="logotype"
+      />
+      <BrandingMenu
+        className="ml-2 mt-1 md:hidden"
+        logoVariant="logotype"
+        size={100}
+      />
+      <div className="flex flex-row items-center gap-x-4">
+        <Link href="/login">
+          <Button>Login</Button>
+        </Link>
+      </div>
+    </div>
+  );
+};