Add tailwind homepage

src/assets/css/form.css

@@ -6,9 +6,9 @@
 
 
 body {
-    /* background-color: #F4F1EE; */
-    background-color: #282828;
-    height: 0;
+    background-color: #F4F1EE;
+    /* background-color: #282828;
+    height: 0; */
     /* margin: 0;
     padding: 0; */
     /* top: 0; */

src/components/connect-button.jsx

@@ -1,7 +1,4 @@
 import { useState } from "react";
-import * as React from 'react';
-
-import "../assets/css/button.css"
 
 async function getAccount() {
   const accounts = await window.ethereum.request({
@@ -30,8 +27,8 @@ export default function ConnectButton() {
   };
 
   return (
-    <button onClick={connectButtonOnClick} className="btn-connexion">
-      {!!accountAddress ? accountAddress : "Connect Button"}
+    <button onClick={connectButtonOnClick} className="bg-[#A5DFD5] text-[#282828] h-[2.5em] pl-[2em] pr-[2em] rounded-[10em] text-[16px] shadow-lg hover:bg-[#282828] hover:text-[#F4F1EE] transition ease-out delay-300 hover:translate-y-[-3px] last:mt-[2em]">
+      {!!accountAddress ? accountAddress : "Connect"}
     </button>
   );
 }

src/index.css

@@ -1,3 +1,13 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@font-face {
+    font-family: 'Inter';
+    src : url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;800&display=swap');
+}
+
+@font-face {
+    font-family: 'Thunder-ExtraBoldLC';
+    src: url('../fonts/Thunder-ExtraBoldLC.otf');
+}

src/pages/main-page.jsx

@@ -1,32 +1,25 @@
-import React from "react";
-import { Component } from "react";
 import ConnectButton from "../components/connect-button.jsx";
+import Logo from "../assets/PAYCONSENT.svg"
 
-import "../assets/css/home.css";
-
-class MainPage extends Component {
-  render() {
-    return (
-      <div class="w-screen h-screen">
-        <div>
-          <h1 class="logo-over-white">
-            PAYCONSENT<span class="dot-color">.</span>
-          </h1>
-        </div>
-        <div class="intro-div">
-          <h2 class="intro-title">
-            Giving You Solutions <br></br>For Smarter Contracts
-          </h2>
-          <quote class="intro-quote">
+function MainPage() {
+  return (
+    <div className="w-screen h-screen bg-[#f4f1ee] absolute flex flex-col">
+      <nav>
+        <img src={Logo} alt="Logo" className="h-[30px] ml-[80px] mt-[30px]"/>
+      </nav>
+      <main className='w-screen flex-grow flex flex-col justify-center items-center'>
+        <div className='text-center flex flex-col items-center max-w-[90%]'>
+          <h1 className='w-fit self-center text-3xl sm:text-5xl font-thunder'>Giving You Solutions <br></br>For Smarter Contracts</h1>
+          <p className='w-fit self-center text-xs sm:text-sm text-[#282828] font-inter'>
             Are you tired of complex and slow administration ? <br></br>Get your
             first decentralized contract, entirely <br></br>managed with
             blockchain technology
-          </quote>
-          <ConnectButton />
+          </p>
+          <ConnectButton/>
         </div>
-      </div>
-    );
-  }
+      </main>
+    </div>
+  )
 }
 
 export default MainPage;

tailwind.config.cjs

@@ -1,10 +1,26 @@
-/** @type {import('tailwindcss').Config} */
+// /** @type {import('tailwindcss').Config} */
+// module.exports = {
+// 	content: [
+// 		"./index.html",
+// 		"./src/**/*.{html,js,jsx}",],
+// 	theme: {
+// 	  extend: {},
+// 	},
+// 	plugins: [],
+// }
+
+
+/**  @type {import('tailwindcss').Config} */
 module.exports = {
 	content: [
 		"./index.html",
-		"./src/**/*.{html,js,jsx}",],
+		"./src/**/*.{html,js,jsx}"],
 	theme: {
+		fontFamily:{
+			'thunder': ['Thunder-ExtraBoldLC'],
+			'inter' : ['Inter'],
+		},
 	  extend: {},
 	},
 	plugins: [],
-}
+}