diff --git a/app/(home)/button.tsx b/app/(main)/(home)/button.tsx
similarity index 100%
rename from app/(home)/button.tsx
rename to app/(main)/(home)/button.tsx
diff --git a/app/(home)/metadata.tsx b/app/(main)/(home)/metadata.tsx
similarity index 100%
rename from app/(home)/metadata.tsx
rename to app/(main)/(home)/metadata.tsx
diff --git a/app/(home)/page.tsx b/app/(main)/(home)/page.tsx
similarity index 100%
rename from app/(home)/page.tsx
rename to app/(main)/(home)/page.tsx
diff --git a/app/(main)/layout.tsx b/app/(main)/layout.tsx
new file mode 100644
index 0000000..aa34048
--- /dev/null
+++ b/app/(main)/layout.tsx
@@ -0,0 +1,13 @@
+import NavbarUI from "@/shared/ui/navbar";
+import React from "react";
+
+const mainLayout = ({ children }: Readonly<{ children: React.ReactNode }>) => {
+ return (
+
+
+ {children}
+
+ );
+};
+
+export default mainLayout;
diff --git a/shared/ui/navbar.tsx b/shared/ui/navbar.tsx
new file mode 100644
index 0000000..2766c7c
--- /dev/null
+++ b/shared/ui/navbar.tsx
@@ -0,0 +1,122 @@
+"use client";
+
+import {
+ Button,
+ Link,
+ Navbar,
+ NavbarBrand,
+ NavbarContent,
+ NavbarItem,
+ NavbarMenu,
+ NavbarMenuItem,
+ NavbarMenuToggle,
+} from "@heroui/react";
+import React, { useState } from "react";
+
+export const AcmeLogo = () => {
+ return (
+
+ );
+};
+
+const NavbarUI = () => {
+ const [isMenuOpen, setIsMenuOpen] = useState(false);
+
+ const navbarItems = [
+ {
+ title: "Home",
+ route: "/",
+ },
+ {
+ title: "Featured",
+ route: "/featured",
+ },
+ {
+ title: "Season",
+ route: "/season",
+ },
+ {
+ title: "Genres",
+ route: "/genres",
+ },
+ ];
+
+ return (
+
+
+
+
+
+ ACME
+
+
+
+
+
+
+ Home
+
+
+
+
+ Explore
+
+
+
+
+ Trending
+
+
+
+
+ Schedule
+
+
+
+
+
+
+ Login
+
+
+
+
+
+
+
+ {navbarItems.map((item, index) => (
+
+
+ {item.title}
+
+
+ ))}
+
+
+ );
+};
+
+export default NavbarUI;