Merge pull request #2 from hollow-leaf/feat/NFT_page

feat: nft-mint page & change color

apps/web/src/app/components/collectionCard.tsx

@@ -1,30 +1,30 @@
-import React from "react"
+import React from "react";
 
 export function CollectionCard() {
-    return (
-        <div className="bg-white border border-gray-200 rounded-3xl shadow p-4 m-4">
-            <div className="flex mb-2">
-            <div className="m-2">
-              <img
-                src={"/konan-hero.webp"}
-                alt="xuedao logo"
-                width={80}
-                height={80}
-                className="rounded-full"
-              />
-            </div>
-            <div className="m-2 content-center">
-              <p className="text-xl font-bold	">#Polly Doll</p>
-              <p>@By TheSalvare</p>
-            </div>
-          </div>
-          <div className="flex">
-            <div className="mt-2 min-w-40 min-h-56 rounded-lg bg-center bg-cover bg-[url('/konan-hero.webp')]"></div>
-            <div className="mt-2 ml-4">
-                <div className="min-w-40 min-h-28 rounded-lg bg-center bg-cover bg-[url('/konan-hero.webp')]"></div>
-                <div className="mt-4 min-w-40 min-h-28 rounded-lg bg-center bg-cover bg-[url('/konan-hero.webp')]"></div>
-            </div>
-          </div>
+  return (
+    <div className="bg-white border border-gray-200 rounded-3xl shadow p-4 m-4">
+      <div className="flex mb-2">
+        <div className="m-2">
+          <img
+            src={"/konan-hero.webp"}
+            alt="xuedao logo"
+            width={80}
+            height={80}
+            className="rounded-full"
+          />
+        </div>
+        <div className="m-2 content-center">
+          <p className="text-xl font-bold	">#Polly Doll</p>
+          <p>@By TheSalvare</p>
+        </div>
       </div>
-    )
-}
+      <div className="flex">
+        <div className="mt-2 min-w-40 min-h-56 rounded-lg bg-center bg-cover bg-[url('/konan-hero.webp')]"></div>
+        <div className="mt-2 ml-4">
+          <div className="min-w-40 min-h-28 rounded-lg bg-center bg-cover bg-[url('/konan-hero.webp')]"></div>
+          <div className="mt-4 min-w-40 min-h-28 rounded-lg bg-center bg-cover bg-[url('/konan-hero.webp')]"></div>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/web/src/app/components/hero.tsx

@@ -10,7 +10,9 @@ export function Hero() {
     <Box className="relative w-full overflow-hidden bg-cover bg-center py-6 sm:py-12 md:py-24 lg:py-32 xl:py-48 bg-gradient-to-b">
       <div className="max-w-full flex flex-col items-center py-20">
         <p className="text-8xl font-extrabold	">COLLECTION</p>
-        <p className="text-8xl font-extrabold	bg-gradient-to-r from-blue-600 via-green-500 to-indigo-400 inline-block text-transparent bg-clip-text">BY ARTIST</p>
+        <p className="text-8xl font-extrabold	bg-gradient-to-r from-blue-600 via-green-500 to-indigo-400 inline-block text-transparent bg-clip-text">
+          BY ARTIST
+        </p>
       </div>
       <Box className="flex flex-col items-center justify-center gap-x-8 px-12 sm:flex-row sm:px-12 md:px-24 lg:px-32 xl:px-48">
         <Box className="flex flex-wrap items-center justify-center">

apps/web/src/app/nft-mint/components/hero.tsx

@@ -0,0 +1,96 @@
+import React from "react";
+import Image from "next/image";
+import { Box, IconButton, Typography } from "@mui/material";
+import {
+  Flag as FlagIcon,
+  Directions as DirectionsIcon,
+  Sms as SmsIcon,
+} from "@mui/icons-material";
+
+export function Hero() {
+  return (
+    <Box className="flex flex-col w-full h-full md:py-32 bg-white border border-gray-200 rounded-3xl shadow p-4 m-4">
+      <Box className="container mx-auto flex flex-col w-full h-full text-black">
+        <Box className="basis-4/6 sm:basis-2/3 mx-16 p-10 flex flex-col lg:flex-row">
+          <Box className="basis-3/4 lg:basis-2/5">
+            <Image src="/konan-hero.webp" width={400} height={700} alt="nft" />
+          </Box>
+          <Box className="basis-1/4 lg:basis-3/5 mt-5 md:mt-0 md:m-10 md:p-5 flex flex-col">
+            <Box className="basis-1/6">
+              <Typography className="font-bold text-lg sm:text-3xl md:text-4xl">
+                NFT Mint Section
+              </Typography>
+            </Box>
+            <Box className="basis-3/6">
+              <Typography>NFT detail</Typography>
+              <br />
+            </Box>
+            <Box className="basis-1/6">
+              <Typography className="font-bold flex flex-row">
+                Price:
+                <Typography className="pl-5 font-bold text-lg sm:text-3xl md:text-4xl flex">
+                  29.000ETH
+                </Typography>
+              </Typography>
+              <Typography className="font-bold flex flex-row">
+                Date:
+                <Typography className="pl-5 font-bold text-lg sm:text-3xl md:text-4xl">
+                  4.5.2024
+                </Typography>
+              </Typography>
+            </Box>
+            <Box className="basis-1/6 flex flex-row py-5 gap-3">
+              <IconButton className="border bg-gray-500 rounded-full">
+                <SmsIcon className="text-white hover:text-black" />
+              </IconButton>
+              <IconButton className="border bg-gray-500 rounded-full">
+                <DirectionsIcon className="text-white hover:text-black" />
+              </IconButton>
+              <IconButton className="border bg-gray-500 rounded-full">
+                <FlagIcon className="text-white hover:text-black" />
+              </IconButton>
+            </Box>
+          </Box>
+        </Box>
+        <Box className="basis-2/6 sm:basis-1/3 flex flex-col md:flex-row gap-5 m-5">
+          <Box className="basis-1/4 bg-gray-400 rounded-2xl flex flex-col justify-center items-center text-center px-5 w-1/2 md:w-full mx-auto py-10 lg:py-20">
+            <Typography variant="h4" className="font-bold">
+              0/500
+            </Typography>
+            <Typography className="font-bold">
+              Fair Launch and distribution-all boars have the same cost of 0.04
+              ETH
+            </Typography>
+          </Box>
+          <Box className="basis-1/4 bg-gray-400 rounded-2xl flex flex-col justify-center items-center text-center px-5 w-1/2 md:w-full mx-auto py-10 lg:py-20">
+            <Typography variant="h4" className="font-bold">
+              0/500
+            </Typography>
+            <Typography className="font-bold">
+              Fair Launch and distribution-all boars have the same cost of 0.04
+              ETH
+            </Typography>
+          </Box>
+          <Box className="basis-1/4 bg-gray-400 rounded-2xl flex flex-col justify-center items-center text-center px-5 w-1/2 md:w-full mx-auto py-10 lg:py-20">
+            <Typography variant="h4" className="font-bold">
+              0/500
+            </Typography>
+            <Typography className="font-bold">
+              Fair Launch and distribution-all boars have the same cost of 0.04
+              ETH
+            </Typography>
+          </Box>
+          <Box className="basis-1/4 bg-gray-400 rounded-2xl flex flex-col justify-center items-center text-center px-5 w-1/2 md:w-full mx-auto py-10 lg:py-20">
+            <Typography variant="h4" className="font-bold">
+              0/500
+            </Typography>
+            <Typography className="font-bold">
+              Fair Launch and distribution-all boars have the same cost of 0.04
+              ETH
+            </Typography>
+          </Box>
+        </Box>
+      </Box>
+    </Box>
+  );
+}

apps/web/src/app/nft-mint/components/index.ts

@@ -0,0 +1 @@
+export * from "./hero";

apps/web/src/app/nft-mint/page.tsx

@@ -0,0 +1,12 @@
+import { Navbar, Footer } from "@/components";
+import { Hero } from "@/app/nft-mint/components";
+
+export default function Profile() {
+  return (
+    <div className="bg-white">
+      <Navbar />
+      <Hero />
+      <Footer />
+    </div>
+  );
+}

apps/web/src/components/connectButton.tsx

@@ -1,3 +1,5 @@
 export function ConnectButton() {
-  return <w3m-button />;
+  return (
+    <w3m-button label="Connect to web3" loadingLabel="Waiting for loading" />
+  );
 }

apps/web/src/components/navbar.tsx

@@ -32,15 +32,9 @@ import { ConnectButton } from "@/components";
 
 const NAV_MENU: NavbarItemType[] = [
   {
-    name: "Learn",
-    icon: <WebIcon />,
-    href: "/",
-    target: "",
-  },
-  {
-    name: "Docs",
+    name: "Profile",
     icon: <AccountCircleIcon />,
-    href: "/",
+    href: "/nft-mint",
     target: "_blank",
   },
   {
@@ -49,12 +43,6 @@ const NAV_MENU: NavbarItemType[] = [
     href: "https://github.com/hollow-leaf/Konan",
     target: "_blank",
   },
-  {
-    name: "Community",
-    icon: <BookIcon />,
-    href: "/",
-    target: "_blank",
-  },
 ];
 
 export function Navbar() {
@@ -113,7 +101,7 @@ export function Navbar() {
               <Button
                 color="secondary"
                 startIcon={Icon}
-                className="rounded-full hover:bg-slate-900 font-bold"
+                className="rounded-full hover:shadow font-bold"
               >
                 {name}
               </Button>
@@ -122,20 +110,6 @@ export function Navbar() {
         </Box>
         <div style={{ flexGrow: 1 }} />
         <Box sx={{ display: { xs: "none", lg: "flex" } }}>
-          {/* <Link
-            href="/"
-            target="_blank"
-            passHref
-          >
-            <Button
-              color="secondary"
-              variant="outlined"
-              endIcon={<AccountCircleIcon />}
-              className="rounded-full font-bold hover:bg-slate-900"
-            >
-              Connect Wallet
-            </Button>
-          </Link> */}
           <ConnectButton />
         </Box>
         <IconButton
@@ -150,7 +124,7 @@ export function Navbar() {
         </IconButton>
       </Toolbar>
       <Collapse
-        className="bg-black flex"
+        className="bg-sky-500/10 flex"
         in={open}
         timeout="auto"
         unmountOnExit
@@ -161,7 +135,7 @@ export function Navbar() {
               <Box sx={{ display: "block", textAlign: "left", pt: 1 }}>
                 <Button
                   onClick={handleOpen}
-                  className="text-purple-700 rounded-full hover:bg-slate-900 font-bold"
+                  className="text-purple-700 rounded-full hover:shadow  font-bold"
                 >
                   <ListItemIcon className="text-purple-700">
                     {Icon}
@@ -172,20 +146,6 @@ export function Navbar() {
             </Link>
           ))}
           <ListItem>
-            {/* <Link
-              href="/"
-              target="_blank"
-              passHref
-            >
-              <Button
-                className="text-purple-700 rounded-full hover:bg-slate-900 font-bold"
-                color="secondary"
-                variant="outlined"
-                endIcon={<AccountCircleIcon />}
-              >
-                Connect Wallet
-              </Button>
-            </Link> */}
             <ConnectButton />
           </ListItem>
         </List>

apps/web/src/utils/config/wagmi.config.ts

@@ -5,7 +5,7 @@ import { mainnet, sepolia, goerli, optimism } from "wagmi/chains";
 
 // Get projectId at https://cloud.walletconnect.com
 export const projectId = process.env.NEXT_PUBLIC_PROJECT_ID;
-console.log(projectId)
+console.log(projectId);
 if (!projectId) throw new Error("Project ID is not defined");
 
 const metadata = {

apps/web/src/utils/index.tsx

@@ -21,9 +21,10 @@ createWeb3Modal({
   enableAnalytics: true, // Optional - defaults to your Cloud configuration
   enableOnramp: true, // Optional - false as default
   themeVariables: {
-    "--w3m-accent": "#7e22ce",
+    "--w3m-accent": "#6BE4FF",
+    "--w3m-color-mix": "#FFABD8",
     "--w3m-color-mix-strength": 40,
-    "--w3m-z-index": 2,
+    "--w3m-z-index": 5,
   },
 });