From f3c43f1725c42325cfc06832deaf61e16d2ef36e Mon Sep 17 00:00:00 2001
From: Nezumi-2711 <phanhuuloi15@gmail.com>
Date: Wed, 30 Apr 2025 16:41:10 +0700
Subject: [PATCH] feat: implement the layout of the application

---
 src/app/(home)/about/page.tsx     |   7 ++
 src/app/(home)/contact/page.tsx   |   7 ++
 src/app/(home)/features/page.tsx  |   7 ++
 src/app/(home)/footer.tsx         |  11 +++
 src/app/(home)/layout.tsx         |  22 ++++++
 src/app/(home)/navbar-sidebar.tsx |  65 ++++++++++++++++
 src/app/(home)/navbar.tsx         | 120 ++++++++++++++++++++++++++++++
 src/app/(home)/page.tsx           |   7 ++
 src/app/(home)/pricing/page.tsx   |   7 ++
 src/app/page.tsx                  |   9 ---
 src/components/ui/checkbox.tsx    |   1 +
 src/components/ui/progress.tsx    |   2 +-
 src/components/ui/textarea.tsx    |   4 +-
 13 files changed, 257 insertions(+), 12 deletions(-)
 create mode 100644 src/app/(home)/about/page.tsx
 create mode 100644 src/app/(home)/contact/page.tsx
 create mode 100644 src/app/(home)/features/page.tsx
 create mode 100644 src/app/(home)/footer.tsx
 create mode 100644 src/app/(home)/layout.tsx
 create mode 100644 src/app/(home)/navbar-sidebar.tsx
 create mode 100644 src/app/(home)/navbar.tsx
 create mode 100644 src/app/(home)/page.tsx
 create mode 100644 src/app/(home)/pricing/page.tsx
 delete mode 100644 src/app/page.tsx

diff --git a/src/app/(home)/about/page.tsx b/src/app/(home)/about/page.tsx
new file mode 100644
index 0000000..4765de8
--- /dev/null
+++ b/src/app/(home)/about/page.tsx
@@ -0,0 +1,7 @@
+const AboutPage = () => {
+  return (
+    <div>AboutPage</div>
+  )
+}
+
+export default AboutPage
\ No newline at end of file
diff --git a/src/app/(home)/contact/page.tsx b/src/app/(home)/contact/page.tsx
new file mode 100644
index 0000000..16e4821
--- /dev/null
+++ b/src/app/(home)/contact/page.tsx
@@ -0,0 +1,7 @@
+const ContactPage = () => {
+  return (
+    <div>Contact Page</div>
+  )
+}
+
+export default ContactPage
\ No newline at end of file
diff --git a/src/app/(home)/features/page.tsx b/src/app/(home)/features/page.tsx
new file mode 100644
index 0000000..76e3ef4
--- /dev/null
+++ b/src/app/(home)/features/page.tsx
@@ -0,0 +1,7 @@
+const FeaturesPage = () => {
+  return (
+    <div>FeaturesPage</div>
+  )
+}
+
+export default FeaturesPage
\ No newline at end of file
diff --git a/src/app/(home)/footer.tsx b/src/app/(home)/footer.tsx
new file mode 100644
index 0000000..28c4202
--- /dev/null
+++ b/src/app/(home)/footer.tsx
@@ -0,0 +1,11 @@
+const Footer = () => {
+  return (
+    <footer className="flex border-t justify-between font-medium p-6">
+      <div className="flex items-center gap-2">
+        <p>funroad, Inc.</p>
+      </div>
+    </footer>
+  )
+}
+
+export default Footer
\ No newline at end of file
diff --git a/src/app/(home)/layout.tsx b/src/app/(home)/layout.tsx
new file mode 100644
index 0000000..6fa6f14
--- /dev/null
+++ b/src/app/(home)/layout.tsx
@@ -0,0 +1,22 @@
+import { ReactNode } from 'react';
+
+import Navbar from './navbar';
+import Footer from './footer';
+
+interface LayoutProps {
+	children: ReactNode;
+}
+
+const Layout = ({ children }: LayoutProps) => {
+	return (
+		<div className="flex flex-col min-h-screen">
+			<Navbar />
+
+			<div className="flex-1 bg-[#F4F4F0]">{children}</div>
+
+			<Footer />
+		</div>
+	);
+};
+
+export default Layout;
diff --git a/src/app/(home)/navbar-sidebar.tsx b/src/app/(home)/navbar-sidebar.tsx
new file mode 100644
index 0000000..2654b22
--- /dev/null
+++ b/src/app/(home)/navbar-sidebar.tsx
@@ -0,0 +1,65 @@
+import { ScrollArea } from '@/components/ui/scroll-area';
+import {
+	Sheet,
+	SheetContent,
+	SheetHeader,
+	SheetTitle,
+} from '@/components/ui/sheet';
+import Link from 'next/link';
+import { ReactNode } from 'react';
+
+interface NavbarItem {
+	href: string;
+	children: ReactNode;
+}
+
+interface Props {
+	items: NavbarItem[];
+	open: boolean;
+	onOpenChange: (open: boolean) => void;
+}
+
+const NavbarSidebar = ({ items, open, onOpenChange }: Props) => {
+	return (
+		<Sheet open={open} onOpenChange={onOpenChange}>
+			<SheetContent side="left" className="p-0 transition-none">
+				<SheetHeader className="p-4 border-b">
+					<SheetTitle>Menu</SheetTitle>
+				</SheetHeader>
+
+				<ScrollArea className="flex flex-col overflow-y-auto h-full pb-2">
+					{items.map((item) => (
+						<Link
+							key={item.href}
+							href={item.href}
+							className="w-full text-left p-4 hover:bg-black hover:text-white flex items-center text-base font-medium"
+							onClick={() => onOpenChange(false)}
+						>
+							{item.children}
+						</Link>
+					))}
+
+					<div className="border-t">
+						<Link
+							href="/sign-in"
+							className="w-full text-left p-4 hover:bg-black hover:text-white flex items-center text-base font-medium"
+							onClick={() => onOpenChange(false)}
+						>
+							Log in
+						</Link>
+
+						<Link
+							href="/sign-up"
+							className="w-full text-left p-4 hover:bg-black hover:text-white flex items-center text-base font-medium"
+							onClick={() => onOpenChange(false)}
+						>
+							Start Selling
+						</Link>
+					</div>
+				</ScrollArea>
+			</SheetContent>
+		</Sheet>
+	);
+};
+
+export default NavbarSidebar;
diff --git a/src/app/(home)/navbar.tsx b/src/app/(home)/navbar.tsx
new file mode 100644
index 0000000..5635cce
--- /dev/null
+++ b/src/app/(home)/navbar.tsx
@@ -0,0 +1,120 @@
+'use client';
+
+import { ReactNode, useState } from 'react';
+import Link from 'next/link';
+import { Poppins } from 'next/font/google';
+import { MenuIcon } from 'lucide-react';
+import { usePathname } from 'next/navigation';
+
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
+
+import NavbarSidebar from './navbar-sidebar';
+
+const poppins = Poppins({
+	subsets: ['latin'],
+	weight: ['700'],
+});
+
+interface NavbarItemProps {
+	href: string;
+	children: ReactNode;
+	isActive?: boolean;
+}
+
+const navbarItems = [
+	{
+		href: '/',
+		children: 'Home',
+	},
+	{
+		href: '/about',
+		children: 'About',
+	},
+	{
+		href: '/features',
+		children: 'Features',
+	},
+	{
+		href: '/pricing',
+		children: 'Pricing',
+	},
+	{
+		href: '/contact',
+		children: 'Contact',
+	},
+];
+
+const NavbarItem = ({ href, children, isActive }: NavbarItemProps) => {
+	return (
+		<Button
+			asChild
+			variant="outline"
+			className={cn(
+				'bg-transparent hover:bg-transparent rounded-full hover:border-primary border-transparent px-3.5 text-lg',
+				isActive && 'bg-black text-white hover:bg-black hover:text-white'
+			)}
+		>
+			<Link href={href}>{children}</Link>
+		</Button>
+	);
+};
+
+const Navbar = () => {
+	const pathname = usePathname();
+	const [isSidebarOpen, setIsSidebarOpen] = useState(false);
+
+	return (
+		<nav className="h-20 flex border-b justify-between font-medium bg-white">
+			<Link href="/" className="pl-6 flex items-center">
+				<span className={cn('text-5xl font-semibold', poppins.className)}>
+					funroad
+				</span>
+			</Link>
+
+			<NavbarSidebar
+				items={navbarItems}
+				open={isSidebarOpen}
+				onOpenChange={setIsSidebarOpen}
+			/>
+
+			<div className="items-center gap-4 hidden lg:flex">
+				{navbarItems.map((item) => (
+					<NavbarItem
+						key={item.href}
+						href={item.href}
+						isActive={pathname === item.href}
+					>
+						{item.children}
+					</NavbarItem>
+				))}
+			</div>
+
+			<div className="hidden lg:flex">
+				<Button
+					asChild
+					variant="secondary"
+					className="border-l border-t-0 border-b-0 border-r-0 px-12 h-full rounded-none bg-white hover:bg-pink-400 transition-colors text-lg"
+				>
+					<Link href="/sign-in">Log in</Link>
+				</Button>
+
+				<Button
+					asChild
+					variant="secondary"
+					className="border-l border-t-0 border-b-0 border-r-0 px-12 h-full rounded-none bg-black text-white hover:bg-pink-400 hover:text-black transition-colors text-lg"
+				>
+					<Link href="/sign-up">Start Selling</Link>
+				</Button>
+			</div>
+
+      <div className='flex lg:hidden items-center justify-center'>
+        <Button variant="ghost" className="size-12 border-transparent bg-white" onClick={() => setIsSidebarOpen(true)}>
+          <MenuIcon />
+        </Button>
+      </div>
+		</nav>
+	);
+};
+
+export default Navbar;
diff --git a/src/app/(home)/page.tsx b/src/app/(home)/page.tsx
new file mode 100644
index 0000000..6656093
--- /dev/null
+++ b/src/app/(home)/page.tsx
@@ -0,0 +1,7 @@
+export default function Home() {
+  return (
+    <div>
+      Home page
+    </div>
+  );
+}
diff --git a/src/app/(home)/pricing/page.tsx b/src/app/(home)/pricing/page.tsx
new file mode 100644
index 0000000..338b2f0
--- /dev/null
+++ b/src/app/(home)/pricing/page.tsx
@@ -0,0 +1,7 @@
+const PricingPage = () => {
+  return (
+    <div>PricingPage</div>
+  )
+}
+
+export default PricingPage
\ No newline at end of file
diff --git a/src/app/page.tsx b/src/app/page.tsx
deleted file mode 100644
index 61e4e89..0000000
--- a/src/app/page.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import { Button } from "@/components/ui/button";
-
-export default function Home() {
-  return (
-    <div>
-      <Button variant="elevated">Hello World</Button>
-    </div>
-  );
-}
diff --git a/src/components/ui/checkbox.tsx b/src/components/ui/checkbox.tsx
index fa0e4b5..bf9fc76 100644
--- a/src/components/ui/checkbox.tsx
+++ b/src/components/ui/checkbox.tsx
@@ -15,6 +15,7 @@ function Checkbox({
       data-slot="checkbox"
       className={cn(
         "peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        "bg-white",
         className
       )}
       {...props}
diff --git a/src/components/ui/progress.tsx b/src/components/ui/progress.tsx
index 9d9ba2f..cddb96b 100644
--- a/src/components/ui/progress.tsx
+++ b/src/components/ui/progress.tsx
@@ -15,7 +15,7 @@ function Progress({
       data-slot="progress"
       className={cn(
         "relative h-3 w-full overflow-hidden rounded-full",
-        "border bg-transparent",
+        "border bg-white",
         className
       )}
       {...props}
diff --git a/src/components/ui/textarea.tsx b/src/components/ui/textarea.tsx
index d995988..d031971 100644
--- a/src/components/ui/textarea.tsx
+++ b/src/components/ui/textarea.tsx
@@ -7,8 +7,8 @@ function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
     <textarea
       data-slot="textarea"
       className={cn(
-        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
-        "md:text-base",
+        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border px-3 py-2 text-base transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        "md:text-base bg-white",
         className
       )}
       {...props}