diff --git a/app/creator/marketplace/artists/_components/Artist_Content.tsx b/app/creator/marketplace/artists/_components/Artist_Content.tsx new file mode 100644 index 0000000..1dfabe9 --- /dev/null +++ b/app/creator/marketplace/artists/_components/Artist_Content.tsx @@ -0,0 +1,183 @@ +import { Input } from '@/components/ui/input'; +import { Search, Heart } from 'lucide-react'; +import Image from 'next/image'; +import { Checkbox } from '@/components/ui/checkbox'; +import { Button } from '@/components/ui/button'; +import SearchBar from './SearchBar'; + +const mockItems = [ + { + title: 'Business Handshake', + type: 'Videos', + mediaType: 'video', + image: '/v1.png', + price: 0.49, + }, + { + title: 'Cowboy Howdy', + type: 'Fonts', + mediaType: 'font', + image: '/v2.png', + price: 4.99, + }, + { + title: 'SEPHORA', + type: 'Images', + mediaType: 'image', + image: '/v3.png', + price: 0.19, + }, + { + title: 'Gabe Hager', + type: 'Videos', + mediaType: 'video', + image: '/v4.png', + price: 9.99, + }, + { + title: 'Gabe Hager', + type: 'Audios', + mediaType: 'audio', + image: '/v5.png', + price: 3.99, + }, + { + title: 'Empty Flat Interior', + type: 'Videos', + mediaType: 'video', + image: '/v6.png', + price: 0.49, + }, + { + title: 'Black Swan', + type: 'Images', + mediaType: 'image', + image: '/v7.png', + price: 0.19, + }, + { + title: 'Panda', + type: 'Fonts', + mediaType: 'font', + image: '/v8.png', + price: 4.99, + }, + { + title: 'Lemon Garden', + type: 'Images', + mediaType: 'image', + image: '/v9.png', + price: 4.40, + }, + { + title: 'Wall Graphics', + type: 'Graphics', + mediaType: 'graphic', + image: '/v10.png', + price: 4.40, + }, + { + title: 'Wall Graphics', + type: 'Graphics', + mediaType: 'graphic', + image: '/v11.png', + price: 4.40, + }, + { + title: 'Wall Graphics', + type: 'Graphics', + mediaType: 'graphic', + image: '/v12.png', + price: 4.40, + }, + { + title: 'Wall Graphics', + type: 'Graphics', + mediaType: 'graphic', + image: '/v13.png', + price: 4.40, + }, + { + title: 'Wall Graphics', + type: 'Graphics', + mediaType: 'graphic', + image: '/v14.png', + price: 4.40, + }, + { + title: 'Wall Graphics', + type: 'Graphics', + mediaType: 'graphic', + image: '/v15.png', + price: 4.40, + }, + +]; + +export default function ArtistContent() { + return ( +
+
+
+ {/* Header with greeting and filters inside a card */} +
+ {/* Greeting */} +
+ Hi Daphne, + recommendations for you +
+ {/* Filter Chips */} +
+ {['Images','Videos','Audios','Fonts','Gifs','Graphics'].map((filter) => ( + + ))} +
+
+
+ {mockItems.map((item, idx) => ( +
+ {/* Image */} +
+ {item.title} + {/* Play overlay for video/audio */} + {(item.mediaType === 'video' || item.mediaType === 'audio') && ( +
+ Play +
+ )} +
+ {/* Card content */} +
+
+ {item.title} + +
+
+ In{' '} + {item.type} + + ${item.price.toFixed(2)} +
+
+
+ ))} +
+
+
+ ); +} diff --git a/app/creator/marketplace/artists/_components/Quick_Actions.tsx b/app/creator/marketplace/artists/_components/Quick_Actions.tsx new file mode 100644 index 0000000..94253ee --- /dev/null +++ b/app/creator/marketplace/artists/_components/Quick_Actions.tsx @@ -0,0 +1,76 @@ +import Image from 'next/image'; +import { Button } from '@/components/ui/button'; + +const quickActions = [ + { + subtitle: 'Create your own ebook', + title: 'Wodey Publishing Studio', + image: '/create.png', + button: { label: 'Design Now', link: '#' }, + }, + { + subtitle: 'Unlimited access to', + title: '15,000 Fonts', + image: '/text.png', + button: { label: 'View More', link: '#' }, + }, + { + subtitle: 'Unlimited access to', + title: '25,000 Audios', + image: '/paint.png', + button: { label: 'View More', link: '#' }, + }, + { + subtitle: 'Unlimited access to', + title: '175,000 Graphics', + image: '/brush.png', + button: { label: 'View More', link: '#' }, + }, + { + subtitle: 'Unlimited access to', + title: '45,000 Videos', + image: '/camera.png', + button: { label: 'View More', link: '#' }, + }, +]; + +export default function QuickActions() { + return ( +
+ {/* Top linear gradient image bar */} +
+ Gradient Bar +
+
+
+
+ Logo +
+
+ {quickActions.map((action, idx) => ( +
+ {action.title} +
{action.subtitle}
+
{action.title}
+ +
+ ))} +
+
+
+
+ ); +} diff --git a/app/creator/marketplace/artists/_components/SearchBar.tsx b/app/creator/marketplace/artists/_components/SearchBar.tsx new file mode 100644 index 0000000..2817253 --- /dev/null +++ b/app/creator/marketplace/artists/_components/SearchBar.tsx @@ -0,0 +1,25 @@ +import { Input } from '@/components/ui/input'; +import { Search } from 'lucide-react'; + +export default function SearchBar() { + return ( +
+
+ + | + + +
+
+ ); +} \ No newline at end of file diff --git a/app/creator/marketplace/artists/page.tsx b/app/creator/marketplace/artists/page.tsx new file mode 100644 index 0000000..6fd93b0 --- /dev/null +++ b/app/creator/marketplace/artists/page.tsx @@ -0,0 +1,16 @@ +import QuickActions from './_components/Quick_Actions'; +import ArtistContent from './_components/Artist_Content'; +import SearchBar from './_components/SearchBar'; + +export default function ArtistsPage() { + return ( +
+ + {/* Overlapping SearchBar */} +
+ +
+ +
+ ); +} \ No newline at end of file diff --git a/app/creator/marketplace/layout.tsx b/app/creator/marketplace/layout.tsx new file mode 100644 index 0000000..c8fcf5a --- /dev/null +++ b/app/creator/marketplace/layout.tsx @@ -0,0 +1,10 @@ +import MarketplaceNavbar from "@/components/custom/marketplace_Navbar"; + +export default function MarketplaceLayout({ children }: { children: React.ReactNode }) { + return ( +
+ + {children} +
+ ); +} \ No newline at end of file diff --git a/components/custom/marketplace_Navbar.tsx b/components/custom/marketplace_Navbar.tsx new file mode 100644 index 0000000..2deefbe --- /dev/null +++ b/components/custom/marketplace_Navbar.tsx @@ -0,0 +1,88 @@ +import Image from 'next/image'; +import { Input } from '@/components/ui/input'; +import { Bell, Heart, ShoppingCart, SquarePen } from 'lucide-react'; +import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar'; +import { Button } from '@/components/ui/button'; + +function MarketplaceNavbar() { + return ( + + ); +} + +function MarketplaceSecondaryMenu() { + return ( +
+ +
+ ); +} + +export default function MarketplaceNavbarWithMenu() { + return ( + <> + + + + ); +} diff --git a/components/ui/checkbox.tsx b/components/ui/checkbox.tsx new file mode 100644 index 0000000..fa0e4b5 --- /dev/null +++ b/components/ui/checkbox.tsx @@ -0,0 +1,32 @@ +"use client" + +import * as React from "react" +import * as CheckboxPrimitive from "@radix-ui/react-checkbox" +import { CheckIcon } from "lucide-react" + +import { cn } from "@/lib/utils" + +function Checkbox({ + className, + ...props +}: React.ComponentProps) { + return ( + + + + + + ) +} + +export { Checkbox } diff --git a/package.json b/package.json index 7234686..372180c 100644 --- a/package.json +++ b/package.json @@ -9,14 +9,15 @@ "lint": "next lint" }, "dependencies": { - "lucide-react": "^0.503.0", - "next": "15.3.1", "@radix-ui/react-avatar": "^1.1.7", + "@radix-ui/react-checkbox": "^1.2.3", "@radix-ui/react-slot": "^1.2.0", "@radix-ui/react-tabs": "^1.1.9", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "iconsax-react": "^0.0.8", + "lucide-react": "^0.503.0", + "next": "15.3.1", "react": "^19.0.0", "react-dom": "^19.0.0", "tailwind-merge": "^3.2.0" diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index d60506b..2dbf547 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -11,6 +11,9 @@ importers: '@radix-ui/react-avatar': specifier: ^1.1.7 version: 1.1.7(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0) + '@radix-ui/react-checkbox': + specifier: ^1.2.3 + version: 1.2.3(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0) '@radix-ui/react-slot': specifier: ^1.2.0 version: 1.2.0(@types/react@19.1.2)(react@19.1.0) @@ -345,6 +348,19 @@ packages: '@types/react-dom': optional: true + '@radix-ui/react-checkbox@1.2.3': + resolution: {integrity: sha512-pHVzDYsnaDmBlAuwim45y3soIN8H4R7KbkSVirGhXO+R/kO2OLCe0eucUEbddaTcdMHHdzcIGHtZSMSQlA+apw==} + 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 + '@radix-ui/react-collection@1.1.4': resolution: {integrity: sha512-cv4vSf7HttqXilDnAnvINd53OTl1/bjUYVZrkFnA7nwmY9Ob2POUy0WY0sfqBAe1s5FyKsyceQlqiEGPYNTadg==} peerDependencies: @@ -500,6 +516,24 @@ packages: '@types/react': optional: true + '@radix-ui/react-use-previous@1.1.1': + resolution: {integrity: sha512-2dHfToCj/pzca2Ck724OZ5L0EVrr3eHRNsG/b3xQJLA2hZpVCS99bLAX+hm1IHXDEnzU6by5z/5MIY794/a8NQ==} + peerDependencies: + '@types/react': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + + '@radix-ui/react-use-size@1.1.1': + resolution: {integrity: sha512-ewrXRDTAqAXlkl6t/fkXWNAhFX9I+CkKlw6zjEwk86RSPKwZr3xpBRso655aqYafwtnbpHLj6toFzmd6xdVptQ==} + peerDependencies: + '@types/react': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + '@rtsao/scc@1.1.0': resolution: {integrity: sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g==} @@ -2160,6 +2194,22 @@ snapshots: '@types/react': 19.1.2 '@types/react-dom': 19.1.2(@types/react@19.1.2) + '@radix-ui/react-checkbox@1.2.3(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)': + dependencies: + '@radix-ui/primitive': 1.1.2 + '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.2)(react@19.1.0) + '@radix-ui/react-context': 1.1.2(@types/react@19.1.2)(react@19.1.0) + '@radix-ui/react-presence': 1.1.4(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0) + '@radix-ui/react-primitive': 2.1.0(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0) + '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.2)(react@19.1.0) + '@radix-ui/react-use-previous': 1.1.1(@types/react@19.1.2)(react@19.1.0) + '@radix-ui/react-use-size': 1.1.1(@types/react@19.1.2)(react@19.1.0) + react: 19.1.0 + react-dom: 19.1.0(react@19.1.0) + optionalDependencies: + '@types/react': 19.1.2 + '@types/react-dom': 19.1.2(@types/react@19.1.2) + '@radix-ui/react-collection@1.1.4(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)': dependencies: '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.2)(react@19.1.0) @@ -2290,6 +2340,19 @@ snapshots: optionalDependencies: '@types/react': 19.1.2 + '@radix-ui/react-use-previous@1.1.1(@types/react@19.1.2)(react@19.1.0)': + dependencies: + react: 19.1.0 + optionalDependencies: + '@types/react': 19.1.2 + + '@radix-ui/react-use-size@1.1.1(@types/react@19.1.2)(react@19.1.0)': + dependencies: + '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.2)(react@19.1.0) + react: 19.1.0 + optionalDependencies: + '@types/react': 19.1.2 + '@rtsao/scc@1.1.0': {} '@rushstack/eslint-patch@1.11.0': {} diff --git a/public/GradientMesh_Light.png b/public/GradientMesh_Light.png new file mode 100644 index 0000000..1377b73 Binary files /dev/null and b/public/GradientMesh_Light.png differ diff --git a/public/avatar.png b/public/avatar.png new file mode 100644 index 0000000..75b6e03 Binary files /dev/null and b/public/avatar.png differ diff --git a/public/brush.png b/public/brush.png new file mode 100644 index 0000000..34ee002 Binary files /dev/null and b/public/brush.png differ diff --git a/public/camera.png b/public/camera.png new file mode 100644 index 0000000..0edf672 Binary files /dev/null and b/public/camera.png differ diff --git a/public/create.png b/public/create.png new file mode 100644 index 0000000..faaecd0 Binary files /dev/null and b/public/create.png differ diff --git a/public/marketplacelogo.png b/public/marketplacelogo.png new file mode 100644 index 0000000..983e28c Binary files /dev/null and b/public/marketplacelogo.png differ diff --git a/public/paint.png b/public/paint.png new file mode 100644 index 0000000..ce8b4eb Binary files /dev/null and b/public/paint.png differ diff --git a/public/play.png b/public/play.png new file mode 100644 index 0000000..48046d0 Binary files /dev/null and b/public/play.png differ diff --git a/public/text.png b/public/text.png new file mode 100644 index 0000000..2980b30 Binary files /dev/null and b/public/text.png differ diff --git a/public/titlelogo.png b/public/titlelogo.png new file mode 100644 index 0000000..1db4688 Binary files /dev/null and b/public/titlelogo.png differ diff --git a/public/v1.png b/public/v1.png new file mode 100644 index 0000000..d219f60 Binary files /dev/null and b/public/v1.png differ diff --git a/public/v10.png b/public/v10.png new file mode 100644 index 0000000..cdf49b3 Binary files /dev/null and b/public/v10.png differ diff --git a/public/v11.png b/public/v11.png new file mode 100644 index 0000000..f1fb2e2 Binary files /dev/null and b/public/v11.png differ diff --git a/public/v12.png b/public/v12.png new file mode 100644 index 0000000..d270747 Binary files /dev/null and b/public/v12.png differ diff --git a/public/v13.png b/public/v13.png new file mode 100644 index 0000000..7792d58 Binary files /dev/null and b/public/v13.png differ diff --git a/public/v14.png b/public/v14.png new file mode 100644 index 0000000..3acfa8f Binary files /dev/null and b/public/v14.png differ diff --git a/public/v15.png b/public/v15.png new file mode 100644 index 0000000..36682dc Binary files /dev/null and b/public/v15.png differ diff --git a/public/v2.png b/public/v2.png new file mode 100644 index 0000000..8858f6e Binary files /dev/null and b/public/v2.png differ diff --git a/public/v3.png b/public/v3.png new file mode 100644 index 0000000..1d7f15c Binary files /dev/null and b/public/v3.png differ diff --git a/public/v4.png b/public/v4.png new file mode 100644 index 0000000..0145d93 Binary files /dev/null and b/public/v4.png differ diff --git a/public/v5.png b/public/v5.png new file mode 100644 index 0000000..954d79e Binary files /dev/null and b/public/v5.png differ diff --git a/public/v6.png b/public/v6.png new file mode 100644 index 0000000..a645d86 Binary files /dev/null and b/public/v6.png differ diff --git a/public/v7.png b/public/v7.png new file mode 100644 index 0000000..ae0de56 Binary files /dev/null and b/public/v7.png differ diff --git a/public/v8.png b/public/v8.png new file mode 100644 index 0000000..24c4b76 Binary files /dev/null and b/public/v8.png differ diff --git a/public/v9.png b/public/v9.png new file mode 100644 index 0000000..15479c1 Binary files /dev/null and b/public/v9.png differ