feat: new home page

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

@@ -0,0 +1,30 @@
+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>
+      </div>
+    )
+}

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

@@ -3,25 +3,20 @@ import React from "react";
 import Image from "next/image";
 import Link from "next/link";
 import { Box, Typography } from "@mui/material";
+import { CollectionCard } from "./collectionCard";
 
 export function Hero() {
   return (
-    <Box className="relative w-full overflow-hidden bg-black bg-cover bg-center py-6 sm:py-12 md:py-24 lg:py-32 xl:py-48">
-      <Box className="flex flex-col items-center justify-between gap-x-8 px-8 sm:flex-row sm:px-12 md:px-24 lg:px-32 xl:px-48">
-        <Box className="flex flex-col">
-          <Image
-            src={"/konan-hero.webp"}
-            alt="xuedao logo"
-            width={300}
-            height={300}
-            priority
-          />
-          <Typography className="max-w-[600px] md:text-2xl/relaxed text-gray-400">
-            Our mission is to break down barriers, foster global connections
-            among students, ignite a deep passion for learning, and promote a
-            vibrant culture of knowledge sharing for both students and lifelong
-            learners.
-          </Typography>
+    <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>
+      </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">
+          <CollectionCard />
+          <CollectionCard />
+          <CollectionCard />
         </Box>
         <Box className="absolute right-[20px] top-0 hidden sm:right-[-80px] md:right-[-100px] lg:right-[-120px] xl:right-[-150px] 2xl:right-[-180px] 2xl:block xl:mt-10">
           {/* <Image

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

@@ -7,7 +7,7 @@ export function Vision() {
   return (
     <Box
       id="vision"
-      className="w-full bg-black bg-cover bg-center py-12 md:py-24 lg:py-32"
+      className="w-full bg-cover bg-center py-12 md:py-24 lg:py-32"
       component="section"
     >
       <Box className="container mx-auto px-4 md:px-6">

apps/web/src/app/layout.tsx

@@ -2,14 +2,8 @@ import React from "react";
 
 import type { Metadata, Viewport } from "next";
 import { Roboto } from "next/font/google";
-import { Layout } from "@/components";
 import "./globals.css";
 
-import { headers } from "next/headers";
-
-import { cookieToInitialState } from "wagmi";
-
-import { config } from "@/utils/config/wagmi.config";
 import Web3ModalProvider from "@/utils";
 
 const roboto = Roboto({

apps/web/src/app/page.tsx

@@ -3,11 +3,11 @@ import { Hero, Vision } from "@/app/components";
 
 export default function Profile() {
   return (
-    <>
+    <div className="bg-white">
       <Navbar />
       <Hero />
       <Vision />
       <Footer />
-    </>
+    </div>
   );
 }

apps/web/src/components/footer.tsx

@@ -13,7 +13,7 @@ import { IconButton, Typography, Box } from "@mui/material";
 
 export function Footer() {
   return (
-    <Box className="flex w-full shrink-0 flex-col items-center justify-center gap-2 border-t bg-black px-4 py-6 sm:flex-row md:px-6">
+    <Box className="flex w-full shrink-0 flex-col items-center justify-center gap-2 border-t px-4 py-6 sm:flex-row md:px-6">
       <Typography variant="body1" className="text-gray-400">
         © 2024 XueDAO foundation. All rights reserved.
       </Typography>

apps/web/src/components/navbar.tsx

@@ -85,7 +85,7 @@ export function Navbar() {
       position="sticky"
       color="transparent"
       elevation={0}
-      className="bg-black"
+      className="bg-sky-500/10"
     >
       <Toolbar>
         <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>

apps/web/tailwind.config.ts

@@ -11,6 +11,7 @@ const config: Config = {
         "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
         "gradient-conic":
           "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
+        "hero-pattern": "/konan-hero.webp",
       },
       colors: {
         xuedao_pink: "#FFFAF4",