Merge pull request #14 from hollow-leaf/redesign/main-page

feat: main-page & readme

README.md

@@ -1,83 +1,99 @@
-# Turborepo starter
+<div align="center">
+<h1>Konan</h1>
 
-This is an official starter Turborepo.
+<img src="https://cloudflare-ipfs.com/ipfs/QmZzuPWuvRWyGxAkGcTcGhnNDdJ3evrKZDuWbb73PhWLH9/" width="50%" height="50%"></img>
 
-## Using this example
+[![Frontend deploy](https://github.com/hollow-leaf/Konan/actions/workflows/ghpage.yml/badge.svg?branch=main)](https://github.com/hollow-leaf/Konan/actions/workflows/ghpage.yml)
 
-Run the following command:
+</div>
 
-```sh
-npx create-turbo@latest
-```
+### Demo Page
 
-## What's inside?
+- Video： [Konan demo](https://youtu.be/aFThCDy1UNg?si=9SaA8jX0pGBX45nK)
+- Konan Contract：
+  - Arbitrum Sepolia： [BlackStone](https://sepolia.arbiscan.io/address/0x585a1DDaB9116F483d367bCa6eb64797252051c8)
+  - ChainLink VRF：
+  - Celestia：
 
-This Turborepo includes the following packages/apps:
+### Abstract
 
-### Apps and Packages
+Konan is at the forefront of the digital revolution, providing developers with a groundbreaking platform to craft their unique Dynamic Non-Fungible Tokens (DNFTs). Our mission is to democratize the creation and validation of NFT metadata, empowering developers to unleash their creativity and revolutionize the digital asset landscape.
 
-- `docs`: a [Next.js](https://nextjs.org/) app
-- `web`: another [Next.js](https://nextjs.org/) app
-- `@repo/ui`: a stub React component library shared by both `web` and `docs` applications
-- `@repo/eslint-config`: `eslint` configurations (includes `eslint-config-next` and `eslint-config-prettier`)
-- `@repo/typescript-config`: `tsconfig.json`s used throughout the monorepo
+### Introduction
 
-Each package/app is 100% [TypeScript](https://www.typescriptlang.org/).
+With Konan, developers can tap into a world of endless possibilities by creating DNFTs tailored to their specific needs and visions. Whether it's artwork, collectibles, virtual real estate, or any other digital asset, Konan provides the tools and infrastructure to bring your ideas to life in the form of DNFTs.
 
-### Utilities
+Celestia seamlessly integrates with our DNFT platform, allowing developers to effortlessly validate the metadata of their NFTs. By leveraging Celestia's advanced verification mechanisms, developers can ensure the authenticity and integrity of their DNFTs, providing peace of mind to both creators and collectors alike.
 
-This Turborepo has some additional tools already setup for you:
+Konan's integration with ChainLink streamlines the DNFT generation process, allowing developers to effortlessly incorporate external data into their digital assets.Konan ensures that DNFTs reflect the latest and most relevant information, enhancing their value and utility.
 
-- [TypeScript](https://www.typescriptlang.org/) for static type checking
-- [ESLint](https://eslint.org/) for code linting
-- [Prettier](https://prettier.io) for code formatting
+<br/>
 
-### Build
+### Key Features
 
-To build all apps and packages, run the following command:
+- Streamlined DNFT Creation: Konan's intuitive interface and seamless ChainLink integration make DNFT creation effortless, allowing developers to focus on unleashing their creativity without worrying about technical complexities.
 
-```
-cd my-turborepo
-pnpm build
-```
+- Enhanced Authenticity: By incorporating real-time data feeds, Celestia ensures the authenticity and uniqueness of DNFTs, providing both creators and collectors with confidence in the integrity of their digital assets.
 
-### Develop
+- User-Friendly Interface: Celestia's intuitive platform ensures that DNFT creation is accessible to all users, regardless of technical expertise.
 
-To develop all apps and packages, run the following command:
 
-```
-cd my-turborepo
-pnpm dev
-```
+### Our solution:
 
-### Remote Caching
+- Chainlink VRF (Verifiable Random Function)：Generate Dynamic NFT
+- Celestia Data Avalibility：Verify ERC-721A token metadata avalibility using Celestia
+- Data Security：Ensures transparency and security with Celestia blockchain technology
+- UI/UX friendly：Easy integration with a simple interface for users to mint NFT
 
-Turborepo can use a technique known as [Remote Caching](https://turbo.build/repo/docs/core-concepts/remote-caching) to share cache artifacts across machines, enabling you to share build caches with your team and CI/CD pipelines.
+### Methods
 
-By default, Turborepo will cache locally. To enable Remote Caching you will need an account with Vercel. If you don't have an account you can [create one](https://vercel.com/signup), then enter the following commands:
+- Use [Celestia](https://celestia.org/what-is-celestia/) to access nft metadata and verify MetaData URI
+- Use [ChainkLink](https://chain.link/) VRF to draw nft accessory
+- Use [Arbitrum](https://arbitrum.io/) to deploy Smart Contract
+- Use [Solidity](https://soliditylang.org/) to develop smart contract
+- Use [IPFS](https://ipfs.tech/) to access nft photo and metadata
+- Use [Next.js](https://nextjs.org/) to build frontend web
+- Use [Cloudflare_serverless](https://developers.cloudflare.com/pages/framework-guides/deploy-a-hono-site/) to build serverless
+- Use [Golang](https://go.dev/) to develop backend server
 
-```
-cd my-turborepo
-npx turbo login
+### Technical Architecture
+Konan Architecture
+![Konan Architecture](https://github.com/hollow-leaf/psyduck/blob/main/apps/extension_app/img/Psyduck_architeture.png?raw=true)
+
+Konan workflow
+```mermaid
+	sequenceDiagram
+		actor User
+		participant Konan
+		participant Aribtrum smart contract
+		participant ChainLink VRF
+		participant Celestia
+			
+			
 ```
 
-This will authenticate the Turborepo CLI with your [Vercel account](https://vercel.com/docs/concepts/personal-accounts/overview).
+### Building & Installation
 
-Next, you can link your Turborepo to your Remote Cache by running the following command from the root of your Turborepo:
+> Konan is a monorepo managed using turbo. You can find the source code for each package in the apps/web and package/contract directory.
 
+- apps/web is the Frontend web for Konan. It is built using [Next.js](https://nextjs.org/).
+- package/contract is the smart contract for Konan. It is built using [Solidity](https://soliditylang.org/).
+
+## Setting project
+### Run Project
 ```
-npx turbo link
+git clone https://github.com/hollow-leaf/Konan/tree/main
+```
+```
+pnpm i
+```
+```
+pnpm dev
 ```
 
-## Useful Links
-
-Learn more about the power of Turborepo:
-
-- [Tasks](https://turbo.build/repo/docs/core-concepts/monorepos/running-tasks)
-- [Caching](https://turbo.build/repo/docs/core-concepts/caching)
-- [Remote Caching](https://turbo.build/repo/docs/core-concepts/remote-caching)
-- [Filtering](https://turbo.build/repo/docs/core-concepts/monorepos/filtering)
-- [Configuration Options](https://turbo.build/repo/docs/reference/configuration)
-- [CLI Usage](https://turbo.build/repo/docs/reference/command-line-reference)
+### Contributors
 
-# fullstack_template
+- System Architect: [Solo Lin](https://github.com/LinXJ1204)
+- Frontend engineer: [Jake Kuo](https://github.com/crypto0627)
+- Smart Contract developer: [Albert Cheng](https://github.com/cheng-chun-yuan)
+- Designer: [Sophia Liang](https://github.com/Showyuan)

apps/web/src/app/page.tsx

@@ -3,7 +3,7 @@ import { Box } from "@mui/material";
 
 export default function Profile() {
   return (
-    <Box className="bg-gradient-to-br from-purple-200 via-purple-100 to-purple-50">
+    <Box className="bg-white">
       <Navbar />
       <Hero />
       {/* <Mint_nft /> */}

apps/web/src/components/Business.tsx

@@ -1,10 +1,10 @@
 "use client";
 import { Box, Typography } from "@mui/material";
 import React from "react";
-import { ForkRight } from "@mui/icons-material";
+import { ForkRight, Wallet, Brush, Bolt, CallReceived, Storefront, Widgets } from "@mui/icons-material";
 export function Business() {
   return (
-    <Box className="relative w-full overflow-hidden py-6 sm:py-12 md:py-24 lg:py-32 xl:py-12">
+    <Box className=" flex flex-col w-full overflow-hidden py-6 sm:py-12 md:py-24 lg:py-32 xl:py-12">
       <Box className="max-w-full flex flex-col items-center py-20">
         <Typography className="text-4xl xl:text-8xl font-extrabold	bg-gradient-to-r from-blue-600 via-green-500 to-indigo-400 inline-block text-transparent bg-clip-text">
           Why choose celestia?
@@ -14,7 +14,7 @@ export function Business() {
         <Box className="basis-1/3 w-full flex flex-col items-center justify-center gap-5 rounded-2xl">
           <Box className="basis-1/3 py-16 w-full rounded-2xl border shadow-lg flex flex-col xl:flex-row gap-5 xl:gap-0">
             <Box className="border rounded-2xl h-14 w-14 ml-10 bg-gradient-to-tr from-blue-600 via-green-500 to-indigo-400 flex justify-center items-center">
-              <ForkRight className="text-white" />
+              <Wallet className="text-white" />
             </Box>
             <Box className="basis-3/4 flex flex-col px-10 gap-5">
               <Typography className="text-2xl font-bold">
@@ -27,73 +27,73 @@ export function Business() {
           </Box>
           <Box className="basis-1/3 py-16 w-full rounded-2xl border shadow-lg flex flex-col xl:flex-row gap-5 xl:gap-0">
             <Box className="border rounded-2xl h-14 w-14 ml-10 bg-gradient-to-tr from-blue-600 via-green-500 to-indigo-400 flex justify-center items-center">
-              <ForkRight className="text-white" />
+              <Brush className="text-white" />
             </Box>
             <Box className="basis-3/4 flex flex-col px-10 gap-5">
               <Typography className="text-2xl font-bold">
-                CONNECT YOUR WALLET
+                SELECT YOUR QUANTITY
               </Typography>
               <Typography className="text-lg">
-                Use Trust Wallet, Metamask or to connect to the app.
+                Upload your NFTs and set a title, description and price.
               </Typography>
             </Box>
           </Box>
           <Box className="basis-1/3 py-16 w-full rounded-2xl border shadow-lg flex flex-col xl:flex-row gap-5 xl:gap-0">
             <Box className="border rounded-2xl h-14 w-14 ml-10 bg-gradient-to-tr from-blue-600 via-green-500 to-indigo-400 flex justify-center items-center">
-              <ForkRight className="text-white" />
+              <Bolt className="text-white" />
             </Box>
             <Box className="basis-3/4 flex flex-col px-10 gap-5">
               <Typography className="text-2xl font-bold">
-                CONNECT YOUR WALLET
+              CONFIRM TRANSACTION
               </Typography>
               <Typography className="text-lg">
-                Use Trust Wallet, Metamask or to connect to the app.
+              Earn ETH all your NFTs that you sell on our marketplace.
               </Typography>
             </Box>
           </Box>
         </Box>
 
         <Box className="basis-1/3 w-full flex flex-col items-center justify-center gap-5 rounded-2xl">
-          <Box className="mt-4 min-w-80 min-h-96 rounded-lg bg-center bg-cover bg-[url('/konan-hero.webp')]"></Box>
+          <Box className="mt-4 min-w-80 min-h-96 rounded-lg bg-center bg-cover bg-[url('https://gateway.pinata.cloud/ipfs/QmeobMV4X8WZNfQJhmUgMFh3gZ6rAsWD63wVuENazZM24Z')]"></Box>
         </Box>
 
         <Box className="basis-1/3 w-full flex flex-col items-center justify-center gap-5 rounded-2xl">
           <Box className="basis-1/3 py-16 w-full rounded-2xl border shadow-lg flex flex-col xl:flex-row gap-5 xl:gap-0">
             <Box className="border rounded-2xl h-14 w-14 ml-10 bg-gradient-to-tr from-blue-600 via-green-500 to-indigo-400 flex justify-center items-center">
-              <ForkRight className="text-white" />
+              <CallReceived className="text-white" />
             </Box>
             <Box className="basis-3/4 flex flex-col px-10 gap-5">
               <Typography className="text-2xl font-bold">
-                CONNECT YOUR WALLET
+              RECEIVE YOUR OWN NFTS
               </Typography>
               <Typography className="text-lg">
-                Use Trust Wallet, Metamask or to connect to the app.
+              Invest and manage all your NFTs at one place on one platform.
               </Typography>
             </Box>
           </Box>
           <Box className="basis-1/3 py-16 w-full rounded-2xl border shadow-lg flex flex-col xl:flex-row gap-5 xl:gap-0">
             <Box className="border rounded-2xl h-14 w-14 ml-10 bg-gradient-to-tr from-blue-600 via-green-500 to-indigo-400 flex justify-center items-center">
-              <ForkRight className="text-white" />
+              <Storefront className="text-white" />
             </Box>
             <Box className="basis-3/4 flex flex-col px-10 gap-5">
               <Typography className="text-2xl font-bold">
-                CONNECT YOUR WALLET
+              TAKE A MARKET TO SELL
               </Typography>
               <Typography className="text-lg">
-                Use Trust Wallet, Metamask or to connect to the app.
+              Discover, collect the right NFT collections to buy or sell.
               </Typography>
             </Box>
           </Box>
           <Box className="basis-1/3 py-16 w-full rounded-2xl border shadow-lg flex flex-col xl:flex-row gap-5 xl:gap-0">
             <Box className="border rounded-2xl h-14 w-14 ml-10 bg-gradient-to-tr from-blue-600 via-green-500 to-indigo-400 flex justify-center items-center">
-              <ForkRight className="text-white" />
+              <Widgets className="text-white" />
             </Box>
             <Box className="basis-3/4 flex flex-col px-10 gap-5">
               <Typography className="text-2xl font-bold">
-                CONNECT YOUR WALLET
+              DRIVE YOUR COLLECTION
               </Typography>
               <Typography className="text-lg">
-                Use Trust Wallet, Metamask or to connect to the app.
+              We make it easy to Discover, Invest and manage.
               </Typography>
             </Box>
           </Box>

apps/web/src/components/hero.tsx

@@ -1,5 +1,6 @@
+"use client"
 import React, { useState } from "react";
-import { Box, Button, CircularProgress, Typography } from "@mui/material";
+import { Box, Button, Typography } from "@mui/material";
 import { CollectionCard, NFTCard } from "@/components";
 
 export function Hero() {
@@ -14,27 +15,27 @@ export function Hero() {
   };
 
   return (
+
     <Box className="relative w-full overflow-hidden py-6 sm:py-12 md:py-24 lg:py-32 xl:py-12">
       <Box className="max-w-full flex flex-col items-center py-20">
         <Typography className="text-4xl xl:text-8xl font-extrabold	text-black">
-          COLLECTION
+          Let's start
         </Typography>
         <Typography className="text-4xl xl: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
+          Mint Dynamic NFT
         </Typography>
       </Box>
-      {/* 這裡請寫好IPFS資訊在@/content/ipfs中，再導入map */}
       <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">
-          <Button onClick={handleCardClick} className="rounded-3xl">
+          <button onClick={handleCardClick} className="rounded-3xl transform transition-transform hover:scale-110">
             <CollectionCard />
-          </Button>
-          <Button onClick={handleCardClick} className="rounded-3xl">
+          </button>
+          <button onClick={handleCardClick} className="rounded-3xl transform transition-transform hover:scale-110">
             <CollectionCard />
-          </Button>
-          <Button onClick={handleCardClick} className="rounded-3xl">
+          </button>
+          <button onClick={handleCardClick} className="rounded-3xl transform transition-transform hover:scale-110">
             <CollectionCard />
-          </Button>
+          </button>
         </Box>
       </Box>
       {showBox && (

apps/web/src/components/navbar.tsx

@@ -88,7 +88,7 @@ export function Navbar() {
             }}
           >
             {NAV_MENU.map(({ name, icon: Icon, href, target }) => (
-              <Link key={name} href={href} target={target} passHref>
+              <Link key={name} href={href} target={target} passHref className="transform transition-transform hover:scale-110">
                 <Button
                   startIcon={Icon}
                   className="rounded-full hover:shadow font-bold text-black"
@@ -122,13 +122,13 @@ export function Navbar() {
             {NAV_MENU.map(({ name, icon: Icon, href, target }) => (
               <Link key={name} href={href} target={target} passHref>
                 <Box sx={{ display: "block", textAlign: "left", pt: 1 }}>
-                  <Button
+                  <button
                     onClick={handleOpen}
-                    className="rounded-full hover:shadow font-bold text-black"
+                    className="rounded-full hover:shadow font-bold text-black transform transition-transform hover:scale-110"
                   >
                     <ListItemIcon className="text-black">{Icon}</ListItemIcon>
                     <ListItemText primary={name} />
-                  </Button>
+                  </button>
                 </Box>
               </Link>
             ))}