diff --git a/app/creator/studio/layout.tsx b/app/creator/studio/layout.tsx index ccdf5fa..98d130d 100644 --- a/app/creator/studio/layout.tsx +++ b/app/creator/studio/layout.tsx @@ -51,10 +51,12 @@ function layout({ children }: Props) { + + + +
+ In{' '} + {item.type} + + ${item.price.toFixed(2)} +
+ + + ))} + + + + ); +} diff --git a/app/marketplace/artists/_components/Quick_Actions.tsx b/app/marketplace/artists/_components/Quick_Actions.tsx new file mode 100644 index 0000000..94253ee --- /dev/null +++ b/app/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/marketplace/artists/_components/SearchBar.tsx b/app/marketplace/artists/_components/SearchBar.tsx new file mode 100644 index 0000000..2817253 --- /dev/null +++ b/app/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/marketplace/artists/page.tsx b/app/marketplace/artists/page.tsx new file mode 100644 index 0000000..6fd93b0 --- /dev/null +++ b/app/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/marketplace/layout.tsx b/app/marketplace/layout.tsx new file mode 100644 index 0000000..c8fcf5a --- /dev/null +++ b/app/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/app/page.tsx b/app/page.tsx index 88f0cc9..edac1b0 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,103 +1,12 @@ -import Image from "next/image"; - +import MarketplaceNavbar from "@/components/custom/marketplace_Navbar"; +import HomeBanner from "@/components/custom/Home_Banner"; +import BooksFrame from "@/components/custom/books_Frame"; export default function Home() { return ( -
-
- Next.js logo -
    -
  1. - Get started by editing{" "} - - app/page.tsx - - . -
    2. -
  2. - Save and see your changes instantly. -
    3. -
- -
- - Vercel logomark - Deploy now - - - Read our docs - -
-
- -
+ <> + + + + ); } diff --git a/components/custom/Best_Seller.tsx b/components/custom/Best_Seller.tsx new file mode 100644 index 0000000..1012eb7 --- /dev/null +++ b/components/custom/Best_Seller.tsx @@ -0,0 +1,87 @@ +import Image from 'next/image'; +import { Heart, ChevronRight } from 'lucide-react'; +import { Button } from '@/components/ui/button'; + +const books = [ + { + title: 'Brutal', + author: 'Hoosh Ink', + price: '$4.99', + cover: '/book1.png', + }, + { + title: 'Authority', + author: 'Jeff Vandermeer', + price: '$11.99', + cover: '/book2.png', + }, + { + title: 'Babe Hager', + author: 'Babe Hager', + price: '$2.99', + cover: '/book3.png', + }, + { + title: 'Never Flinch', + author: 'Stephen King', + price: '$16.99', + cover: '/book4.png', + }, + { + title: 'The Obsession', + author: 'Jesse Q. Sutanto', + price: '$8.99', + cover: '/book5.png', + }, + { + title: 'Unlikely Story', + author: 'Ali Rosen', + price: '$2.99', + cover: '/book6.png', + }, + { + title: 'Thrill Ride', + author: 'Amy Ratcliffe', + price: '$9.99', + cover: '/book7.png', + }, +]; + +export default function BestSeller() { + return ( +
+
+

Best Sellers

+ See more +
+
+
+ {books.map((book, idx) => ( +
+
+ {book.title} +
+
+
+ {book.title} + +
+
+ {book.author} + {book.price} +
+
+
+ ))} +
+
+ ); +} diff --git a/components/custom/Home_Banner.tsx b/components/custom/Home_Banner.tsx new file mode 100644 index 0000000..2890bd4 --- /dev/null +++ b/components/custom/Home_Banner.tsx @@ -0,0 +1,40 @@ +import { Button } from "@/components/ui/button"; +import Image from "next/image"; + +export default function HomeBanner() { + return ( +
+
+
+ {/* Left: Text Content */} +
+

+ 1000 BLACK UMBRELLAS +

+

+ Poems of absolute nakedness that chase the power of love. Daniel McGinn is
one of the most admired poets in the underground American poetry scene. +

+ +
+ + {/* Right: Book Cover */} +
+ 1000 Black Umbrellas Book Cover +
+
+
+
+ ); +} diff --git a/components/custom/New_Release.tsx b/components/custom/New_Release.tsx new file mode 100644 index 0000000..b784f0d --- /dev/null +++ b/components/custom/New_Release.tsx @@ -0,0 +1,87 @@ +import Image from 'next/image'; +import { Heart, ChevronRight } from 'lucide-react'; +import { Button } from '@/components/ui/button'; + +const books = [ + { + title: 'Brutal', + author: 'Hoosh Ink', + price: '$4.99', + cover: '/book8.png', + }, + { + title: 'Authority', + author: 'Jeff Vandermeer', + price: '$11.99', + cover: '/book9.png', + }, + { + title: 'Babe Hager', + author: 'Babe Hager', + price: '$2.99', + cover: '/book10.png', + }, + { + title: 'Never Flinch', + author: 'Stephen King', + price: '$16.99', + cover: '/book11.png', + }, + { + title: 'The Obsession', + author: 'Jesse Q. Sutanto', + price: '$8.99', + cover: '/book12.png', + }, + { + title: 'Unlikely Story', + author: 'Ali Rosen', + price: '$2.99', + cover: '/book13.png', + }, + { + title: 'Thrill Ride', + author: 'Amy Ratcliffe', + price: '$9.99', + cover: '/book14.png', + }, +]; + +export default function NewRelease() { + return ( +
+
+

New Release

+ See more +
+
+
+ {books.map((book, idx) => ( +
+
+ {book.title} +
+
+
+ {book.title} + +
+
+ {book.author} + {book.price} +
+
+
+ ))} +
+
+ ); +} diff --git a/components/custom/books_Frame.tsx b/components/custom/books_Frame.tsx new file mode 100644 index 0000000..f2f0dba --- /dev/null +++ b/components/custom/books_Frame.tsx @@ -0,0 +1,14 @@ + +import BestSeller from './Best_Seller'; +import NewRelease from './New_Release'; + + + +export default function BooksFrame() { + return ( +
+ + +
+ ); +} diff --git a/components/custom/marketplace_Navbar.tsx b/components/custom/marketplace_Navbar.tsx new file mode 100644 index 0000000..e870308 --- /dev/null +++ b/components/custom/marketplace_Navbar.tsx @@ -0,0 +1,90 @@ +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 ( +
+
    +
  • Images
    • +
  • Videos
    • +
  • Audios
    • +
  • Gifs
    • +
  • Fonts
    • +
+
+ ); +} + +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 c930a3d..b06ecc8 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,7 @@ "@radix-ui/react-avatar": "^1.1.7", "@radix-ui/react-context-menu": "^2.2.12", "@radix-ui/react-hover-card": "^1.1.11", + "@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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 08b4241..8fae87f 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-context-menu': specifier: ^2.2.12 version: 2.2.12(@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) @@ -382,6 +385,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: @@ -646,6 +662,15 @@ 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-rect@1.1.1': resolution: {integrity: sha512-QTYuDesS0VtuHNNvMh+CjlKJ4LJickCMUAqjlE3+j8w+RlRpwyX3apEQKGFzbZGdo7XNG1tXa+bQqIE7HIXT2w==} peerDependencies: @@ -2419,6 +2444,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) @@ -2671,6 +2712,12 @@ 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-rect@1.1.1(@types/react@19.1.2)(react@19.1.0)': dependencies: '@radix-ui/rect': 1.1.1 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/book.png b/public/book.png new file mode 100644 index 0000000..3af2b32 Binary files /dev/null and b/public/book.png differ diff --git a/public/book1.png b/public/book1.png new file mode 100644 index 0000000..f5bb8a0 Binary files /dev/null and b/public/book1.png differ diff --git a/public/book10.png b/public/book10.png new file mode 100644 index 0000000..4715fd8 Binary files /dev/null and b/public/book10.png differ diff --git a/public/book11.png b/public/book11.png new file mode 100644 index 0000000..dcf1b30 Binary files /dev/null and b/public/book11.png differ diff --git a/public/book12.png b/public/book12.png new file mode 100644 index 0000000..065fbdd Binary files /dev/null and b/public/book12.png differ diff --git a/public/book13.png b/public/book13.png new file mode 100644 index 0000000..449f86e Binary files /dev/null and b/public/book13.png differ diff --git a/public/book14.png b/public/book14.png new file mode 100644 index 0000000..6c522ad Binary files /dev/null and b/public/book14.png differ diff --git a/public/book2.png b/public/book2.png new file mode 100644 index 0000000..a85eb46 Binary files /dev/null and b/public/book2.png differ diff --git a/public/book3.png b/public/book3.png new file mode 100644 index 0000000..fb3e18f Binary files /dev/null and b/public/book3.png differ diff --git a/public/book4.png b/public/book4.png new file mode 100644 index 0000000..9a876b2 Binary files /dev/null and b/public/book4.png differ diff --git a/public/book5.png b/public/book5.png new file mode 100644 index 0000000..e83a9d4 Binary files /dev/null and b/public/book5.png differ diff --git a/public/book6.png b/public/book6.png new file mode 100644 index 0000000..48a15bd Binary files /dev/null and b/public/book6.png differ diff --git a/public/book7.png b/public/book7.png new file mode 100644 index 0000000..71b120e Binary files /dev/null and b/public/book7.png differ diff --git a/public/book8.png b/public/book8.png new file mode 100644 index 0000000..c3cc901 Binary files /dev/null and b/public/book8.png differ diff --git a/public/book9.png b/public/book9.png new file mode 100644 index 0000000..626e89d Binary files /dev/null and b/public/book9.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