feat: update style

packages/metavinci/src/views/home/index.tsx

@@ -1,10 +1,10 @@
 import React from 'react'
-import { Layout } from 'antd'
+import { Layout, Card, Avatar } from 'antd'
 
 import { Auction } from '../../types'
 import { MainAuctionCard } from '../../components/MainAuctionCard'
-
 import './index.less'
+const { Meta } = Card;
 
 const { Content, Sider } = Layout
 
@@ -18,20 +18,40 @@ const sampleAuction: Auction = {
   image: "http://localhost:3000/img/auction1.jpg",
 }
 
+const ExampleCard = () => {
+  return <Card
+  className="custom-card"
+  cover={
+    <img
+      alt="example"
+      src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
+    />
+  }
+>
+  <Meta
+    avatar={<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />}
+    title="Card title"
+    description="This is the description"
+  />
+</Card>;
+}
+
 export const HomeView = () => {
 
   return (
     <Layout style={{ margin: 0 }}>
       <MainAuctionCard auction={sampleAuction} />
       <Layout>
-        <Content>
-          <div>Top Auctions</div>
-          <div>auction 1</div>
+        <Content style={{ display: 'flex', justifyContent: 'space-between', alignContent: 'space-between', flexWrap: 'wrap' }}>
+          <ExampleCard />
+          <ExampleCard />
+          <ExampleCard />
+          <ExampleCard />
+          <ExampleCard />
+          <ExampleCard />
+          <ExampleCard />
+          <ExampleCard />
         </Content>
-        <Sider>
-          <div>Top Artists</div>
-          <div>artist 1</div>
-        </Sider>
       </Layout>
     </Layout>
   );