diff --git a/package-lock.json b/package-lock.json index 332cf64..36383d6 100644 --- 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", diff --git a/package.json b/package.json index 2548812..b647650 100644 --- 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", diff --git a/src/app/miniatures/page.tsx b/src/app/miniatures/page.tsx new file mode 100644 index 0000000..a6e4020 --- /dev/null +++ b/src/app/miniatures/page.tsx @@ -0,0 +1,5 @@ +export default function MiniaturesPage() { + return ( +
MiniaturesPage
+ ); +} \ No newline at end of file diff --git a/src/app/page.tsx b/src/app/page.tsx index d0fb7e9..5a9fc81 100644 --- 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 ( -
+
{/* Hero Section */} -
- Hero -
-

- Welcome to PLACEHOLDER -

+
+

+ Welcome to my place! +

+

+ I'm an illustrator, character designer, miniature painter, 3d modeller, makeup artist and much more and happy to show you things i've created. +

+ + {/* Search */} +
+ + + +
- {/* Search */} -
- - - - -
{/* Section Cards */}
@@ -86,6 +87,6 @@ export default function Home() { ))}
-
+
); } diff --git a/src/components/global/Banner.tsx b/src/components/global/Banner.tsx index e325bf0..38326d2 100644 --- 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 (
{headerImage && ( -
+
{alt} - - +
+
+ +
+
+ +
); } \ No newline at end of file diff --git a/src/components/global/TopNav.tsx b/src/components/global/TopNav.tsx index be6ddbe..1b8dbf3 100644 --- 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 ( - - - - - Home - - - - - Portfolio - - - - - Commissions - - - - - YCH / Custom offers - - - - - Terms of Service - - - - - todo (temp) - - - - +
+ {/* Desktop Nav */} +
+ + + {links.map(({ href, label }) => ( + + + {label} + + + ))} + + +
+ + {/* Mobile Nav */} +
+ + + + + + + Navigation + + + + +
+
); } \ No newline at end of file diff --git a/src/components/ui/sheet.tsx b/src/components/ui/sheet.tsx new file mode 100644 index 0000000..84649ad --- /dev/null +++ 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) { + return +} + +function SheetTrigger({ + ...props +}: React.ComponentProps) { + return +} + +function SheetClose({ + ...props +}: React.ComponentProps) { + return +} + +function SheetPortal({ + ...props +}: React.ComponentProps) { + return +} + +function SheetOverlay({ + className, + ...props +}: React.ComponentProps) { + return ( + + ) +} + +function SheetContent({ + className, + children, + side = "right", + ...props +}: React.ComponentProps & { + side?: "top" | "right" | "bottom" | "left" +}) { + return ( + + + + {children} + + + Close + + + + ) +} + +function SheetHeader({ className, ...props }: React.ComponentProps<"div">) { + return ( +
+ ) +} + +function SheetFooter({ className, ...props }: React.ComponentProps<"div">) { + return ( +
+ ) +} + +function SheetTitle({ + className, + ...props +}: React.ComponentProps) { + return ( + + ) +} + +function SheetDescription({ + className, + ...props +}: React.ComponentProps) { + return ( + + ) +} + +export { + Sheet, + SheetTrigger, + SheetClose, + SheetContent, + SheetHeader, + SheetFooter, + SheetTitle, + SheetDescription, +}