+ {/* transparent div for vertical margin */}
+
+ {/* button */}
+
+
+
+
+
+
+
+ {/* Featured */}
+
+
More by Artist Name
+
+ {currentProducts.map(product => (
+
+ ))}
+
+
+
+
+
+
+ );
+}
diff --git a/packages/nextjs/app/artistPage/page.tsx b/packages/nextjs/app/artistPage/page.tsx
new file mode 100644
index 0000000..9329db8
--- /dev/null
+++ b/packages/nextjs/app/artistPage/page.tsx
@@ -0,0 +1,162 @@
+"use client";
+
+import { useState } from "react";
+import Image from "next/image";
+import Artist from "../../components/assets/artist.jpg";
+import Pagination from "../../components/layout/Pagination";
+import ProductCard from "../../components/ui/product-card";
+import { Heart } from "lucide-react";
+import { Button } from "~~/components/ui/button";
+
+const products = [
+ {
+ artistName: "Takashi Murakami",
+ artName: "Flowers Blooming",
+ amount: "1 Token",
+ tags: ["Open for Commissions", "AI Generated", "Fantasy", "Wizard", "Dungeons & Dragons"],
+ imgSrc: "/ceptor.png",
+ imgAlt: "A vibrant floral artwork by Takashi Murakami",
+ },
+ {
+ artistName: "Beeple",
+ artName: "Everydays: The First 5000 Days",
+ amount: "1 Token",
+ tags: ["Open for Commissions", "AI Generated", "Fantasy", "Wizard", "Dungeons & Dragons"],
+ imgSrc: "/ceptor.png",
+ imgAlt: "A digital collage artwork by Beeple",
+ },
+ {
+ artistName: "Banksy",
+ artName: "Girl with Balloon",
+ amount: "1 Token",
+ tags: ["Open for Commissions", "AI Generated", "Fantasy", "Wizard", "Dungeons & Dragons"],
+ imgSrc: "/ceptor.png",
+ imgAlt: "A street art piece of a girl releasing a heart-shaped balloon by Banksy",
+ },
+ {
+ artistName: "Yayoi Kusama",
+ artName: "Infinity Nets",
+ amount: "1 Token",
+ tags: ["Open for Commissions", "AI Generated", "Fantasy", "Wizard", "Dungeons & Dragons"],
+ imgSrc: "/ceptor.png",
+ imgAlt: "An abstract artwork with polka dots by Yayoi Kusama",
+ },
+ {
+ artistName: "Andy Warhol",
+ artName: "Marilyn Diptych",
+ amount: "1 Token",
+ tags: ["Open for Commissions", "AI Generated", "Fantasy", "Wizard", "Dungeons & Dragons"],
+ imgSrc: "/ceptor.png",
+ imgAlt: "A pop art portrait of Marilyn Monroe by Andy Warhol",
+ },
+ {
+ artistName: "Andy Warhol",
+ artName: "Marilyn Diptych",
+ amount: "1 Token",
+ tags: ["Open for Commissions", "AI Generated", "Fantasy", "Wizard", "Dungeons & Dragons"],
+ imgSrc: "/ceptor.png",
+ imgAlt: "A pop art portrait of Marilyn Monroe by Andy Warhol",
+ },
+ {
+ artistName: "Yayoi Kusama",
+ artName: "Infinity Nets",
+ amount: "1 Token",
+ tags: ["Open for Commissions", "AI Generated", "Fantasy", "Wizard", "Dungeons & Dragons"],
+ imgSrc: "/ceptor.png",
+ imgAlt: "An abstract artwork with polka dots by Yayoi Kusama",
+ },
+ {
+ artistName: "Andy Warhol",
+ artName: "Marilyn Diptych",
+ amount: "1 Token",
+ tags: ["Open for Commissions", "AI Generated", "Fantasy", "Wizard", "Dungeons & Dragons"],
+ imgSrc: "/ceptor.png",
+ imgAlt: "A pop art portrait of Marilyn Monroe by Andy Warhol",
+ },
+ {
+ artistName: "Andy Warhol",
+ artName: "Marilyn Diptych",
+ amount: "1 Token",
+ tags: ["Open for Commissions", "AI Generated", "Fantasy", "Wizard", "Dungeons & Dragons"],
+ imgSrc: "/ceptor.png",
+ imgAlt: "A pop art portrait of Marilyn Monroe by Andy Warhol",
+ },
+];
+
+const ITEMS_PER_PAGE = 6;
+
+export default function Home() {
+ const [currentPage, setCurrentPage] = useState(1);
+
+ const indexOfLastItem = currentPage * ITEMS_PER_PAGE;
+ const indexOfFirstItem = indexOfLastItem - ITEMS_PER_PAGE;
+ const currentProducts = products.slice(indexOfFirstItem, indexOfLastItem);
+
+ const totalPages = Math.ceil(products.length / ITEMS_PER_PAGE);
+
+ const handlePageChange = (pageNumber: number) => {
+ if (pageNumber >= 1 && pageNumber <= totalPages) {
+ setCurrentPage(pageNumber);
+ }
+ };
+
+ return (
+
+
+
+
+
+
+
+
Artist Name
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sodales porta semper. Vivamus dapibus lorem
+ posuere dui semper, et malesuada dui lacinia.
+
+
+
+ Follow This Artist
+
+ {/* transparent div for vertical margin */}
+
+ {/* button */}
+
+
+
+
+
+
+ {/* Featured */}
+
+
Gallery
+
+ {currentProducts.map(product => (
+
+ ))}
+
+
+
+
+
+
+ );
+}
diff --git a/packages/nextjs/app/layout.tsx b/packages/nextjs/app/layout.tsx
index e08c8d6..c1918ef 100644
--- a/packages/nextjs/app/layout.tsx
+++ b/packages/nextjs/app/layout.tsx
@@ -1,6 +1,6 @@
+import { ScaffoldEthAppWithProviders } from "../components/ScaffoldEthAppWithProviders";
import "@rainbow-me/rainbowkit/styles.css";
import { Metadata } from "next";
-import { ScaffoldEthAppWithProviders } from "~~/components/ScaffoldEthAppWithProviders";
import { ThemeProvider } from "~~/components/ThemeProvider";
import "~~/styles/globals.css";
@@ -9,9 +9,9 @@ const baseUrl = process.env.VERCEL_URL
: `http://localhost:${process.env.PORT || 3000}`;
const imageUrl = `${baseUrl}/thumbnail.jpg`;
-const title = "Scaffold-OP App";
-const titleTemplate = "%s | Scaffold-OP";
-const description = "Built with 🏗 Scaffold-OP";
+const title = "Ceptor Artist Market Place";
+const titleTemplate = "%s | Ceptor Artist";
+const description = "Get your art in front of million users";
export const metadata: Metadata = {
metadataBase: new URL(baseUrl),
diff --git a/packages/nextjs/app/lib/utils.ts b/packages/nextjs/app/lib/utils.ts
new file mode 100644
index 0000000..365058c
--- /dev/null
+++ b/packages/nextjs/app/lib/utils.ts
@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+ return twMerge(clsx(inputs));
+}
diff --git a/packages/nextjs/app/page.tsx b/packages/nextjs/app/page.tsx
index 8243e2f..c02dd82 100644
--- a/packages/nextjs/app/page.tsx
+++ b/packages/nextjs/app/page.tsx
@@ -1,71 +1,161 @@
"use client";
-import Link from "next/link";
-import type { NextPage } from "next";
-import { useAccount } from "wagmi";
-import { BugAntIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";
-import { Address } from "~~/components/scaffold-eth";
+import { useState } from "react";
+import Filter from "../components/ui/filter";
+import ProductCard from "../components/ui/product-card";
+import Search from "../components/ui/search";
+import Sort from "../components/ui/sort";
+import Pagination from "~~/components/layout/Pagination";
-const Home: NextPage = () => {
- const { address: connectedAddress } = useAccount();
+const products = [
+ {
+ artistName: "Takashi Murakami",
+ artName: "Flowers Blooming",
+ amount: "1 Token",
+ tags: ["Open for Commissions", "AI Generated", "Fantasy", "Wizard", "Dungeons & Dragons"],
+ imgSrc: "/ceptor.png",
+ imgAlt: "A vibrant floral artwork by Takashi Murakami",
+ },
+ {
+ artistName: "Beeple",
+ artName: "Everydays: The First 5000 Days",
+ amount: "1 Token",
+ tags: ["Open for Commissions", "AI Generated", "Fantasy", "Wizard", "Dungeons & Dragons"],
+ imgSrc: "/ceptor.png",
+ imgAlt: "A digital collage artwork by Beeple",
+ },
+ {
+ artistName: "Banksy",
+ artName: "Girl with Balloon",
+ amount: "1 Token",
+ tags: ["Open for Commissions", "AI Generated", "Fantasy", "Wizard", "Dungeons & Dragons"],
+ imgSrc: "/ceptor.png",
+ imgAlt: "A street art piece of a girl releasing a heart-shaped balloon by Banksy",
+ },
+ {
+ artistName: "Yayoi Kusama",
+ artName: "Infinity Nets",
+ amount: "1 Token",
+ tags: ["Open for Commissions", "AI Generated", "Fantasy", "Wizard", "Dungeons & Dragons"],
+ imgSrc: "/ceptor.png",
+ imgAlt: "An abstract artwork with polka dots by Yayoi Kusama",
+ },
+ {
+ artistName: "Andy Warhol",
+ artName: "Marilyn Diptych",
+ amount: "1 Token",
+ tags: ["Open for Commissions", "AI Generated", "Fantasy", "Wizard", "Dungeons & Dragons"],
+ imgSrc: "/ceptor.png",
+ imgAlt: "A pop art portrait of Marilyn Monroe by Andy Warhol",
+ },
+ {
+ artistName: "Andy Warhol",
+ artName: "Marilyn Diptych",
+ amount: "1 Token",
+ tags: ["Open for Commissions", "AI Generated", "Fantasy", "Wizard", "Dungeons & Dragons"],
+ imgSrc: "/ceptor.png",
+ imgAlt: "A pop art portrait of Marilyn Monroe by Andy Warhol",
+ },
+ {
+ artistName: "Yayoi Kusama",
+ artName: "Infinity Nets",
+ amount: "1 Token",
+ tags: ["Open for Commissions", "AI Generated", "Fantasy", "Wizard", "Dungeons & Dragons"],
+ imgSrc: "/ceptor.png",
+ imgAlt: "An abstract artwork with polka dots by Yayoi Kusama",
+ },
+ {
+ artistName: "Andy Warhol",
+ artName: "Marilyn Diptych",
+ amount: "1 Token",
+ tags: ["Open for Commissions", "AI Generated", "Fantasy", "Wizard", "Dungeons & Dragons"],
+ imgSrc: "/ceptor.png",
+ imgAlt: "A pop art portrait of Marilyn Monroe by Andy Warhol",
+ },
+ {
+ artistName: "Andy Warhol",
+ artName: "Marilyn Diptych",
+ amount: "1 Token",
+ tags: ["Open for Commissions", "AI Generated", "Fantasy", "Wizard", "Dungeons & Dragons"],
+ imgSrc: "/ceptor.png",
+ imgAlt: "A pop art portrait of Marilyn Monroe by Andy Warhol",
+ },
+];
+
+const ITEMS_PER_PAGE = 6;
+
+export default function Home() {
+ const [currentPage, setCurrentPage] = useState(1);
+
+ const indexOfLastItem = currentPage * ITEMS_PER_PAGE;
+ const indexOfFirstItem = indexOfLastItem - ITEMS_PER_PAGE;
+ const currentProducts = products.slice(indexOfFirstItem, indexOfLastItem);
+
+ const totalPages = Math.ceil(products.length / ITEMS_PER_PAGE);
+
+ const handlePageChange = (pageNumber: number) => {
+ if (pageNumber >= 1 && pageNumber <= totalPages) {
+ setCurrentPage(pageNumber);
+ }
+ };
return (
- <>
-
-
-
- Welcome to
- Scaffold-OP 🏗🔴
-
-
-
Connected Address:
-
-
-
- Get started by editing{" "}
-
- packages/nextjs/app/page.tsx
-
-