Fix banner, add mobile nav

2025-07-14 12:36:14 +02:00
parent 9be19a5401
commit 4260a990e8
8 changed files with 284 additions and 70 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -14,6 +14,7 @@
        "@prisma/client": "^6.11.1",
        "@radix-ui/react-checkbox": "^1.3.2",
        "@radix-ui/react-collapsible": "^1.1.11",
+        "@radix-ui/react-dialog": "^1.1.14",
        "@radix-ui/react-dropdown-menu": "^2.1.15",
        "@radix-ui/react-label": "^2.1.7",
        "@radix-ui/react-navigation-menu": "^1.2.13",
@ -2172,6 +2173,42 @@
        }
      }
    },
+    "node_modules/@radix-ui/react-dialog": {
+      "version": "1.1.14",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.1.14.tgz",
+      "integrity": "sha512-+CpweKjqpzTmwRwcYECQcNYbI8V9VSQt0SNFKeEBLgfucbsLssU6Ppq7wUdNXEGb573bMjFhVjKVll8rmV6zMw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.2",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-dismissable-layer": "1.1.10",
+        "@radix-ui/react-focus-guards": "1.1.2",
+        "@radix-ui/react-focus-scope": "1.1.7",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-portal": "1.1.9",
+        "@radix-ui/react-presence": "1.1.4",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-slot": "1.2.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "aria-hidden": "^1.2.4",
+        "react-remove-scroll": "^2.6.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/@radix-ui/react-direction": {
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.1.1.tgz",
--- a/package.json
+++ b/package.json
@ -15,6 +15,7 @@
    "@prisma/client": "^6.11.1",
    "@radix-ui/react-checkbox": "^1.3.2",
    "@radix-ui/react-collapsible": "^1.1.11",
+    "@radix-ui/react-dialog": "^1.1.14",
    "@radix-ui/react-dropdown-menu": "^2.1.15",
    "@radix-ui/react-label": "^2.1.7",
    "@radix-ui/react-navigation-menu": "^1.2.13",
--- a/src/app/miniatures/page.tsx
+++ b/src/app/miniatures/page.tsx
@ -0,0 +1,5 @@
+export default function MiniaturesPage() {
+  return (
+    <div>MiniaturesPage</div>
+  );
+}
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@ -3,25 +3,31 @@ import { Input } from "@/components/ui/input";
 import {
  Brush,
  HeartHandshake,
+  Logs,
  Palette,
  Search,
  Star
 } from "lucide-react";
-import Image from "next/image";
 import Link from "next/link";

 const sections = [
  {
-    title: "Portfolio",
+    title: "Art Portfolio",
    href: "/portfolio",
-    description: "Browse past artworks and highlights.",
+    description: "My artwork gallery",
    icon: Palette,
  },
+  {
+    title: "Miniatures",
+    href: "/miniatures",
+    description: "See my painted miniatures",
+    icon: Brush,
+  },
  {
    title: "Commissions",
    href: "/commissions",
    description: "See pricing, types, and open slots.",
-    icon: Brush,
+    icon: Logs,
  },
  {
    title: "YCH (Your Character Here)",
@ -39,34 +45,29 @@ const sections = [

 export default function Home() {
  return (
-    <div className="flex flex-col gap-6">
+    <div className="flex flex-col gap-10">
      {/* Hero Section */}
-      <div className="relative w-full h-64 md:h-96 overflow-hidden rounded-2xl shadow-md">
-        <Image
-          src="https://placehold.co/1600x600.png"
-          width={1600}
-          height={600}
-          alt="Hero"
-          className="object-cover w-full h-full"
-        />
-        <div className="absolute inset-0 bg-black/40 flex items-center justify-center text-center">
-          <h1 className="text-white text-3xl md:text-5xl font-bold drop-shadow">
-            Welcome to PLACEHOLDER
-          </h1>
+      <div className="text-center flex flex-col items-center justify-center mt-10 px-4">
+        <h1 className="text-4xl md:text-5xl font-bold mb-4">
+          Welcome to my place!
+        </h1>
+        <p className="text-muted-foreground max-w-xl text-lg mb-6">
+          I&apos;m an illustrator, character designer, miniature painter, 3d modeller, makeup artist and much more and happy to show you things i&apos;ve created.
+        </p>
+
+        {/* Search */}
+        <div className="relative w-full max-w-lg">
+          <span className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground">
+            <Search className="w-4 h-4" />
+          </span>
+          <Input
+            type="text"
+            placeholder="Search artworks, commissions, pages..."
+            className="p-6 pl-10"
+          />
        </div>
      </div>

-      {/* Search */}
-      <div className="relative w-full mx-auto">
-        <span className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground">
-          <Search className="w-4 h-4" />
-        </span>
-        <Input
-          type="text"
-          placeholder="Search artworks, pages ..."
-          className="p-6 pl-10 "
-        />
-      </div>

      {/* Section Cards */}
      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
@ -86,6 +87,6 @@ export default function Home() {
          </Link>
        ))}
      </div>
-    </div>
+    </div >
  );
 }
--- a/src/components/global/Banner.tsx
+++ b/src/components/global/Banner.tsx
@ -13,14 +13,12 @@ export default async function Banner() {
  })

  const alt = headerImage?.altText ?? "Header Image"
-  const title = "Placeholdertitle or logo"
-
-  console.log(headerImage)
+  const title = "Gaertan Art"

  return (
    <div className="w-full">
      {headerImage && (
-        <div className="relative w-full h-48 md:h-64 lg:h-72">
+        <div className="relative w-full h-24 md:h-48 lg:h-48">
          <Image
            src={`/api/image/${headerImage.variants[0].s3Key}`}
            alt={alt}
--- a/src/components/global/Header.tsx
+++ b/src/components/global/Header.tsx
@ -4,9 +4,13 @@ import TopNav from "./TopNav";
 export default function Header() {

  return (
-    <div className="flex items-center justify-between px-4 py-2">
-      <TopNav />
-      <ModeToggle />
+    <div className="flex items-center justify-between w-full">
+      <div className="flex items-center gap-2">
+        <TopNav />
+      </div>
+      <div>
+        <ModeToggle />
+      </div>
    </div>
  );
 }
--- a/src/components/global/TopNav.tsx
+++ b/src/components/global/TopNav.tsx
@ -1,43 +1,72 @@
 "use client"

 import { NavigationMenu, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, navigationMenuTriggerStyle } from "@/components/ui/navigation-menu";
+import { Menu } from "lucide-react";
 import Link from "next/link";
+import { useState } from "react";
+import { Button } from "../ui/button";
+import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "../ui/sheet";
+
+const links = [
+  { href: "/", label: "Home" },
+  { href: "/portfolio", label: "Art Portfolio" },
+  { href: "/miniatures", label: "Miniatures" },
+  { href: "/commissions", label: "Commissions" },
+  { href: "/ych", label: "YCH / Custom offers" },
+  { href: "/tos", label: "Terms of Service" },
+  { href: "/todo", label: "todo (temp)" },
+]

 export default function TopNav() {
+  const [open, setOpen] = useState(false)
+
  return (
-    <NavigationMenu viewport={false}>
-      <NavigationMenuList>
-        <NavigationMenuItem>
-          <NavigationMenuLink asChild className={navigationMenuTriggerStyle()}>
-            <Link href="/">Home</Link>
-          </NavigationMenuLink>
-        </NavigationMenuItem>
-        <NavigationMenuItem>
-          <NavigationMenuLink asChild className={navigationMenuTriggerStyle()}>
-            <Link href="/portfolio">Portfolio</Link>
-          </NavigationMenuLink>
-        </NavigationMenuItem>
-        <NavigationMenuItem>
-          <NavigationMenuLink asChild className={navigationMenuTriggerStyle()}>
-            <Link href="/commissions">Commissions</Link>
-          </NavigationMenuLink>
-        </NavigationMenuItem>
-        <NavigationMenuItem>
-          <NavigationMenuLink asChild className={navigationMenuTriggerStyle()}>
-            <Link href="/ych">YCH / Custom offers</Link>
-          </NavigationMenuLink>
-        </NavigationMenuItem>
-        <NavigationMenuItem>
-          <NavigationMenuLink asChild className={navigationMenuTriggerStyle()}>
-            <Link href="/tos">Terms of Service</Link>
-          </NavigationMenuLink>
-        </NavigationMenuItem>
-        <NavigationMenuItem>
-          <NavigationMenuLink asChild className={navigationMenuTriggerStyle()}>
-            <Link href="/todo">todo (temp)</Link>
-          </NavigationMenuLink>
-        </NavigationMenuItem>
-      </NavigationMenuList>
-    </NavigationMenu>
+    <div className="w-full flex items-center justify-between">
+      {/* Desktop Nav */}
+      <div className="hidden md:flex">
+        <NavigationMenu>
+          <NavigationMenuList>
+            {links.map(({ href, label }) => (
+              <NavigationMenuItem key={href}>
+                <NavigationMenuLink
+                  asChild
+                  className={navigationMenuTriggerStyle()}
+                >
+                  <Link href={href}>{label}</Link>
+                </NavigationMenuLink>
+              </NavigationMenuItem>
+            ))}
+          </NavigationMenuList>
+        </NavigationMenu>
+      </div>
+
+      {/* Mobile Nav */}
+      <div className="md:hidden">
+        <Sheet open={open} onOpenChange={setOpen}>
+          <SheetTrigger asChild>
+            <Button variant="outline" size="icon">
+              <Menu className="w-6 h-6" />
+            </Button>
+          </SheetTrigger>
+          <SheetContent side="left">
+            <SheetHeader>
+              <SheetTitle className="text-lg">Navigation</SheetTitle>
+            </SheetHeader>
+            <nav className="mt-4 flex flex-col gap-2">
+              {links.map(({ href, label }) => (
+                <Link
+                  key={href}
+                  href={href}
+                  onClick={() => setOpen(false)}
+                  className="block px-4 py-2 rounded-md hover:bg-muted text-sm font-medium transition-colors"
+                >
+                  {label}
+                </Link>
+              ))}
+            </nav>
+          </SheetContent>
+        </Sheet>
+      </div>
+    </div>
  );
 }
--- a/src/components/ui/sheet.tsx
+++ b/src/components/ui/sheet.tsx
@ -0,0 +1,139 @@
+"use client"
+
+import * as React from "react"
+import * as SheetPrimitive from "@radix-ui/react-dialog"
+import { XIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />
+}
+
+function SheetTrigger({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
+}
+
+function SheetClose({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Close>) {
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
+}
+
+function SheetPortal({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
+  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
+}
+
+function SheetOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
+  return (
+    <SheetPrimitive.Overlay
+      data-slot="sheet-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SheetContent({
+  className,
+  children,
+  side = "right",
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Content> & {
+  side?: "top" | "right" | "bottom" | "left"
+}) {
+  return (
+    <SheetPortal>
+      <SheetOverlay />
+      <SheetPrimitive.Content
+        data-slot="sheet-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+          side === "right" &&
+            "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
+          side === "left" &&
+            "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
+          side === "top" &&
+            "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
+          side === "bottom" &&
+            "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
+          <XIcon className="size-4" />
+          <span className="sr-only">Close</span>
+        </SheetPrimitive.Close>
+      </SheetPrimitive.Content>
+    </SheetPortal>
+  )
+}
+
+function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-header"
+      className={cn("flex flex-col gap-1.5 p-4", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-footer"
+      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Title>) {
+  return (
+    <SheetPrimitive.Title
+      data-slot="sheet-title"
+      className={cn("text-foreground font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Description>) {
+  return (
+    <SheetPrimitive.Description
+      data-slot="sheet-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Sheet,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+}