home layout

components.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/app/(app)/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "tajer",
+  "name": "marketdz",
   "version": "0.1.0",
   "private": true,
   "scripts": {
@@ -9,19 +9,64 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@hookform/resolvers": "^5.0.1",
+    "@radix-ui/react-accordion": "^1.2.8",
+    "@radix-ui/react-alert-dialog": "^1.1.11",
+    "@radix-ui/react-aspect-ratio": "^1.1.4",
+    "@radix-ui/react-avatar": "^1.1.7",
+    "@radix-ui/react-checkbox": "^1.2.3",
+    "@radix-ui/react-collapsible": "^1.1.8",
+    "@radix-ui/react-context-menu": "^2.2.12",
+    "@radix-ui/react-dialog": "^1.1.11",
+    "@radix-ui/react-dropdown-menu": "^2.1.12",
+    "@radix-ui/react-hover-card": "^1.1.11",
+    "@radix-ui/react-label": "^2.1.4",
+    "@radix-ui/react-menubar": "^1.1.12",
+    "@radix-ui/react-navigation-menu": "^1.2.10",
+    "@radix-ui/react-popover": "^1.1.11",
+    "@radix-ui/react-progress": "^1.1.4",
+    "@radix-ui/react-radio-group": "^1.3.4",
+    "@radix-ui/react-scroll-area": "^1.2.6",
+    "@radix-ui/react-select": "^2.2.2",
+    "@radix-ui/react-separator": "^1.1.4",
+    "@radix-ui/react-slider": "^1.3.2",
+    "@radix-ui/react-slot": "^1.2.0",
+    "@radix-ui/react-switch": "^1.2.2",
+    "@radix-ui/react-tabs": "^1.1.9",
+    "@radix-ui/react-toggle": "^1.1.6",
+    "@radix-ui/react-toggle-group": "^1.1.7",
+    "@radix-ui/react-tooltip": "^1.2.4",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "date-fns": "^4.1.0",
+    "embla-carousel-react": "^8.6.0",
+    "geist": "^1.4.1",
+    "input-otp": "^1.4.2",
+    "lucide-react": "^0.507.0",
+    "next": "15.2.4",
+    "next-themes": "^0.4.6",
     "react": "^19.0.0",
+    "react-day-picker": "8.10.1",
     "react-dom": "^19.0.0",
-    "next": "15.2.4"
+    "react-hook-form": "^7.56.1",
+    "react-resizable-panels": "^3.0.0",
+    "recharts": "^2.15.3",
+    "sonner": "^2.0.3",
+    "tailwind-merge": "^3.2.0",
+    "vaul": "^1.1.2",
+    "zod": "^3.24.3"
   },
   "devDependencies": {
-    "typescript": "^5",
+    "@eslint/eslintrc": "^3",
+    "@tailwindcss/postcss": "^4",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
-    "@tailwindcss/postcss": "^4",
-    "tailwindcss": "^4",
     "eslint": "^9",
     "eslint-config-next": "15.2.4",
-    "@eslint/eslintrc": "^3"
+    "tailwindcss": "^4",
+    "tw-animate-css": "^1.2.9",
+    "typescript": "^5"
   }
-}
+}

src/app/(app)/(home)/Footer.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+const Footer = () => {
+  const currentYear = new Date().getFullYear();
+  return (
+    <footer className="flex border-t border-[--md-sys-color-outline-variant] bg-[--md-sys-color-surface] md-elevation-1">
+      <div className="w-full max-w-7xl mx-auto px-6 py-4 flex items-center">
+        <p className="text-[--md-sys-color-on-surface-variant] text-sm">
+          ©{currentYear} MarketDZ. All rights reserved.
+        </p>
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;

src/app/(app)/(home)/Navbar.tsx

@@ -0,0 +1,141 @@
+'use client';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
+import NavbarSidebar from './navbar-sidebar';
+import { useState, useEffect } from 'react';
+import { MenuIcon, Search } from 'lucide-react';
+
+interface NavbarItemProps {
+  href: string;
+  children: React.ReactNode;
+  isActive?: boolean;
+}
+
+const NavbarItem = ({ href, children, isActive }: NavbarItemProps) => {
+  return (
+    <Link
+      href={href}
+      className={cn(
+        'text-sm font-medium px-3 py-2 transition-all duration-200 relative group',
+        isActive ? 'text-black' : 'text-gray-500 hover:text-black'
+      )}
+    >
+      {children}
+      <span
+        className={cn(
+          'absolute bottom-0 left-0 w-full h-0.5 bg-black transform origin-left transition-transform duration-300 scale-x-0',
+          isActive ? 'scale-x-100' : 'group-hover:scale-x-100'
+        )}
+      />
+    </Link>
+  );
+};
+
+const navbarItems = [
+  { href: '/', children: 'Home' },
+  { href: '/products', children: 'Products' },
+  { href: '/solutions', children: 'Solutions' },
+  { href: '/pricing', children: 'Pricing' },
+  { href: '/resources', children: 'Resources' },
+];
+
+const Navbar = () => {
+  const pathname = usePathname();
+  const [isSidebarOpen, setSidebarOpen] = useState(false);
+  const [scrolled, setScrolled] = useState(false);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      setScrolled(window.scrollY > 10);
+    };
+
+    window.addEventListener('scroll', handleScroll);
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
+
+  return (
+    <header
+      className={cn(
+        'sticky top-0 z-50 w-full transition-all duration-300',
+        scrolled
+          ? 'border-b border-gray-200 bg-white/95 backdrop-blur shadow-sm'
+          : 'bg-white'
+      )}
+    >
+      <div className="container mx-auto px-4 sm:px-6 lg:px-8">
+        <nav className="flex h-20 items-center justify-between">
+          {/* Logo */}
+          <Link href="/" className="flex items-center">
+            <span className="text-xl font-bold tracking-tight">
+              Market<span className="text-primary">DZ</span>
+            </span>
+          </Link>
+
+          {/* Desktop Navigation */}
+          <div className="hidden mx-4 h-full items-center space-x-8 lg:flex">
+            {navbarItems.map((item) => (
+              <NavbarItem
+                key={item.href}
+                href={item.href}
+                isActive={pathname === item.href}
+              >
+                {item.children}
+              </NavbarItem>
+            ))}
+          </div>
+
+          {/* Search Bar - Desktop Only */}
+          <div className="hidden mx-4 lg:flex flex-1 max-w-md relative">
+            <div className="relative w-full">
+              <input
+                type="text"
+                placeholder="Search products..."
+                className="w-full pl-10 pr-4 py-2 text-sm rounded-full border border-gray-200 focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary"
+              />
+              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
+            </div>
+          </div>
+
+          {/* Desktop Actions */}
+          <div className="hidden items-center space-x-4 lg:flex">
+            <Button
+              asChild
+              variant="ghost"
+              className="text-sm border-0 font-medium text-gray-600 hover:text-black transition-colors"
+            >
+              <Link href="/sign-in">Log in</Link>
+            </Button>
+            <Button
+              asChild
+              variant="default"
+              className="bg-primary hover:bg-primary/90 px-6 py-2.5 text-sm font-medium rounded-full shadow-sm hover:shadow transition-all"
+            >
+              <Link href="/sign-up">Start free trial</Link>
+            </Button>
+          </div>
+
+          {/* Mobile Menu Button */}
+          <button
+            className="inline-flex items-center justify-center rounded-md p-2 text-gray-600 hover:bg-gray-100 hover:text-black focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary lg:hidden"
+            onClick={() => setSidebarOpen(true)}
+          >
+            <span className="sr-only">Open main menu</span>
+            <MenuIcon className="h-6 w-6" aria-hidden="true" />
+          </button>
+
+          {/* Mobile Sidebar Menu */}
+          <NavbarSidebar
+            items={navbarItems}
+            open={isSidebarOpen}
+            onOpenChange={setSidebarOpen}
+          />
+        </nav>
+      </div>
+    </header>
+  );
+};
+
+export default Navbar;

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

@@ -0,0 +1,20 @@
+import Footer from './Footer';
+import Navbar from './Navbar';
+
+interface Props {
+  children: React.ReactNode;
+}
+
+const layout = ({ children }: Props) => {
+  return (
+    <div className="flex flex-col min-h-screen bg-[--md-sys-color-surface]">
+      <Navbar />
+      <main className="flex-1 container mx-auto px-4 sm:px-6 lg:px-8 bg-[--md-sys-color-surface-container-lowest]">
+        {children}
+      </main>
+      <Footer />
+    </div>
+  );
+};
+
+export default layout;

src/app/(app)/(home)/navbar-sidebar.tsx

@@ -0,0 +1,82 @@
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { cn } from '@/lib/utils';
+
+interface NavbarItem {
+  href: string;
+  children: React.ReactNode;
+}
+
+interface Props {
+  items: NavbarItem[];
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+const NavbarSidebar = ({ items, open, onOpenChange }: Props) => {
+  const pathname = usePathname();
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent
+        side="left"
+        className="p-0 w-[280px] bg-white border-r border-[--md-sys-color-outline-variant] md-elevation-2"
+      >
+        <SheetHeader className="p-4 border-b border-[--md-sys-color-outline-variant]">
+          <div className="flex items-center">
+            <SheetTitle className="text-[--md-sys-color-on-surface] text-lg">
+              Menu
+            </SheetTitle>
+          </div>
+        </SheetHeader>
+        <ScrollArea className="flex flex-col h-full">
+          {items.map((item) => (
+            <Link
+              onClick={() => onOpenChange(false)}
+              key={item.href}
+              href={item.href}
+              className={cn(
+                'w-full text-left py-3 px-4 md-ripple transition-colors duration-200',
+                'text-[--md-sys-color-on-surface-variant] hover:bg-[--md-sys-color-surface-container-high] hover:text-[--md-sys-color-on-surface]',
+                'flex items-center text-base font-medium',
+                pathname === item.href &&
+                  'bg-[--md-sys-color-secondary-container] text-[--md-sys-color-on-secondary-container]'
+              )}
+            >
+              {item.children}
+            </Link>
+          ))}
+          <div className="mt-2 pt-2 border-t border-[--md-sys-color-outline-variant]">
+            <Link
+              onClick={() => onOpenChange(false)}
+              href="/sign-in"
+              className="w-full text-left py-3 px-4 md-ripple transition-colors duration-200
+                text-[--md-sys-color-primary] hover:bg-[--md-sys-color-surface-container-high]
+                flex items-center text-base font-medium"
+            >
+              Log in
+            </Link>
+            <Link
+              onClick={() => onOpenChange(false)}
+              href="/sign-up"
+              className="w-full text-left py-3 px-4 md-ripple transition-colors duration-200
+                text-[--md-sys-color-primary] hover:bg-[--md-sys-color-surface-container-high]
+                flex items-center text-base font-medium"
+            >
+              Start selling
+            </Link>
+          </div>
+        </ScrollArea>
+      </SheetContent>
+    </Sheet>
+  );
+};
+
+export default NavbarSidebar;

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

@@ -0,0 +1,27 @@
+import { Button } from '@/components/ui/button';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Input } from '@/components/ui/input';
+import { Progress } from '@/components/ui/progress';
+import { Textarea } from '@/components/ui/textarea';
+
+export default function Home() {
+  return (
+    <div className="flex flex-col gap-y-4 p-4">
+      <div>
+        <Button variant="elevated">I am a button</Button>
+      </div>
+      <div>
+        <Input placeholder="I am an input" />
+      </div>
+      <div>
+        <Progress value={50} />
+      </div>
+      <div>
+        <Textarea placeholder="I am a textarea" />
+      </div>
+      <div>
+        <Checkbox />
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const PricingPage = () => {
+  return <div>PricingPage</div>;
+};
+
+export default PricingPage;