complete UI

package.json

@@ -22,7 +22,6 @@
     "@types/react": "^18.0.27",
     "@types/react-dom": "^18.0.10",
     "@types/react-router-dom": "^5.3.3",
-    "@vitejs/plugin-react-swc": "^3.0.0",
     "autoprefixer": "^10.4.13",
     "postcss": "^8.4.21",
     "postcss-import": "^15.1.0",

src/shared/components/Footer.tsx

@@ -1,7 +1,34 @@
+import robotLogo from "../../assets/images/logo-robot.png";
+
 type Props = {};
 
 const Footer = (props: Props) => {
-  return <div className="container mx-auto bg-white">Footer</div>;
+  return (
+    <div className="container mx-auto flex justify-between text-white py-12">
+      <div className="md:w-1/4 flex gap-2 items-center">
+        <div className="bg-white rounded-full overflow-hidden p-1">
+          <img
+            src={robotLogo}
+            className="w-10 transition-all duration-150 rounded-full"
+            alt=""
+          />
+        </div>
+        <h4 className="text-xl transition-all duration-150 text-white uppercase font-bold">
+          SGPT
+        </h4>
+      </div>
+      <div className="md:w-1/4 flex gap-2 items-center">
+        Copyright 2023 SGPT
+      </div>
+
+      <div className="md:w-2/5 flex justify-between items-center">
+        <p>NFT Systems</p>
+        <p>Team</p>
+        <p>Privacy Policy</p>
+        <p>Terms & Conditions</p>
+      </div>
+    </div>
+  );
 };
 
 export default Footer;

src/shared/components/Header.tsx

@@ -1,5 +1,7 @@
 import React from "react";
 import Button from "./Button";
+import robotLogo from "../../assets/images/logo-robot.png";
+import { BsNewspaper, BsGithub } from "react-icons/bs";
 
 type Props = {};
 
@@ -52,9 +54,16 @@ const Header = (props: Props) => {
       {isScrolled ? (
         <div className="fixed w-full z-30 p-1 transition-all duration-150 bg-gray-800">
           <div className="container mx-auto flex justify-between items-center">
-            <div>
+            <div className="flex gap-2 items-center">
-              <h4 className="text-2xl transition-all duration-150 text-white uppercase font-bold">
+              <div className="bg-white rounded-full overflow-hidden p-1">
-                Logo
+                <img
+                  src={robotLogo}
+                  className="w-6 transition-all duration-150 rounded-full"
+                  alt=""
+                />
+              </div>
+              <h4 className="text-xl transition-all duration-150 text-white uppercase font-bold">
+                SGPT
               </h4>
             </div>
 
@@ -74,8 +83,18 @@ const Header = (props: Props) => {
               </ul>
 
               <div className="flex gap-4">
-                <Button size="sm">Whitepaper</Button>
+                <Button size="sm">
-                <Button size="sm">Audit</Button>
+                  <div className="flex items-center gap-2">
+                    <BsNewspaper />
+                    Whitepaper
+                  </div>
+                </Button>
+                <Button size="sm">
+                  <div className="flex items-center gap-2">
+                    <BsGithub />
+                    Audit
+                  </div>
+                </Button>
               </div>
             </div>
           </div>
@@ -83,9 +102,16 @@ const Header = (props: Props) => {
       ) : (
         <div className="fixed z-30 w-full p-5 transition-all duration-150">
           <div className="container mx-auto flex justify-between items-center">
-            <div>
+            <div className="flex gap-2 items-center">
+              <div className="bg-white rounded-full overflow-hidden p-1">
+                <img
+                  src={robotLogo}
+                  className="w-10 transition-all duration-150 rounded-full"
+                  alt=""
+                />
+              </div>
               <h4 className="text-4xl transition-all duration-150 text-white uppercase font-bold">
-                Logo
+                SGPT
               </h4>
             </div>
 
@@ -104,8 +130,18 @@ const Header = (props: Props) => {
               </ul>
 
               <div className="flex gap-4">
-                <Button size="md">Whitepaper</Button>
+                <Button size="md">
-                <Button size="md">Audit</Button>
+                  <div className="flex items-center gap-2">
+                    <BsNewspaper />
+                    Whitepaper
+                  </div>
+                </Button>
+                <Button size="md">
+                  <div className="flex items-center gap-2">
+                    <BsGithub />
+                    Audit
+                  </div>
+                </Button>
               </div>
             </div>
           </div>

src/shared/components/home/AboutSection.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-
+import aboutImage from "../../../assets/images/robot32.png";
 type Props = {};
 
 const AboutSection = (props: Props) => {
@@ -9,7 +9,7 @@ const AboutSection = (props: Props) => {
 
   return (
     <div className="container mx-auto text-white py-20 flex relative">
-      <div className="flex flex-col gap-10 w-1/2">
+      <div className="flex flex-col justify-center gap-10 lg:w-1/2 w-full px-8">
         <div className="flex flex-col gap-4">
           <h4 className="text-5xl uppercase font-bold">What is SGPT?</h4>
           <p className="text-gray-300 md:w-4/5 text-lg">
@@ -34,8 +34,8 @@ const AboutSection = (props: Props) => {
           </p>
         </div>
       </div>
-      <div className="w-1/2 flex justify-center items-center">
+      <div className="md:w-1/2 md:flex hidden justify-center items-center">
-        <img className="w-2/3" src={""} />
+        <img className="w-2/3 rounded-md" src={aboutImage} />
       </div>
     </div>
   );

src/shared/components/home/FirstSection.tsx

@@ -1,4 +1,6 @@
-import robotImage from "../../../assets/images/robot.jpg";
+import robotImage from "../../../assets/images/robot-2.png";
+import robotImage2 from "../../../assets/images/robot-coin1.png";
+import robotBgr from "../../../assets/images/robot-bgr.png";
 import Button from "../Button";
 import {
   BsFacebook,
@@ -21,56 +23,65 @@ const FirstSection = () => {
   };
   return (
     <div className="min-h-screen flex bg-cover bg-center bg-no-repeat relative">
+      <div
+        style={{ backgroundImage: `url(${robotBgr})` }}
+        className="blur-sm absolute top-0 left-0 w-full h-full bg-cover bg-center bg-no-repeat"
+      ></div>
+      <div className="absolute top-0 left-0 w-full h-full bg-black opacity-60"></div>
       <div className="container flex mx-auto min-h-[70vh] text-white z-20 mt-20">
         <div className="md:w-4/5 flex flex-col justify-center lg:pb-48 gap-14 pb-20 z-50">
           <div className="flex flex-col gap-10">
             <h4 className="w-3/4 lg:text-8xl text-7xl font-bold">
-              Lorem ipsum dolor consectetur sit adipisicing.
+              A digital currency payment for SGPT chat bot services.
             </h4>
             <p className="lg:w-2/3 font-body">
-              Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique
+              The SGPT Token is a digital currency designed to facilitate
-              amet eveniet fugiat pariatur, illo in est officiis labore ad
+              payments for services provided by the SGPT chat bot. The chat bot
-              corrupti obcaecati asperiores! Quos ratione tempore dolorum
+              is a powerful tool that utilizes artificial intelligence to
-              temporibus tenetur quaerat.
+              communicate with users and provide valuable information and
+              services.
             </p>
           </div>
 
-          <div className="flex w-2/3 flex-wrap gap-4">
+          <div>
-            <Button bgColor="bg-telegram">
+            <h2 className="text-3xl mb-4 font-bold">Join Our Community</h2>
-              <div className="flex items-center gap-2">
+            <div className="flex w-2/3 flex-wrap gap-4">
-                <BsTelegram size={18} />
+              <Button bgColor="bg-telegram">
-                Telegram
+                <div className="flex items-center gap-2">
-              </div>
+                  <BsTelegram size={18} />
-            </Button>
+                  Telegram
-            <Button bgColor="bg-discord">
+                </div>
-              <div className="flex items-center gap-2">
+              </Button>
-                <BsDiscord size={18} />
+              <Button bgColor="bg-discord">
-                Discord
+                <div className="flex items-center gap-2">
-              </div>
+                  <BsDiscord size={18} />
-            </Button>
+                  Discord
-            <Button bgColor="bg-facebook">
+                </div>
-              <div className="flex items-center gap-2">
+              </Button>
-                <BsFacebook size={18} />
+              <Button bgColor="bg-facebook">
-                Facebook
+                <div className="flex items-center gap-2">
-              </div>
+                  <BsFacebook size={18} />
-            </Button>
+                  Facebook
-            <Button bgColor="bg-twitter">
+                </div>
-              <div className="flex items-center gap-2">
+              </Button>
-                <BsTwitter size={18} />
+              <Button bgColor="bg-twitter">
-                Twitter
+                <div className="flex items-center gap-2">
-              </div>
+                  <BsTwitter size={18} />
-            </Button>
+                  Twitter
-            <Button bgColor="bg-instagram">
+                </div>
-              <div className="flex items-center gap-2">
+              </Button>
-                <BsInstagram size={18} />
+              <Button bgColor="bg-instagram">
-                Instagram
+                <div className="flex items-center gap-2">
-              </div>
+                  <BsInstagram size={18} />
-            </Button>
+                  Instagram
+                </div>
+              </Button>
+            </div>
           </div>
         </div>
         <div className="md:w-1/5 flex justify-center items-center relative">
           <img
-            src={robotImage}
+            src={robotImage2}
             className="object-cover absolute -left-40 border-4 backdrop-blur-sm shadow-2xl shadow-cyan-300 border-cyan-500 rounded-full w-full aspect-square"
             alt=""
           />

src/shared/components/home/RoadMap.tsx

@@ -22,7 +22,7 @@ const roadMapData = [
       "Massive Marketing Campaign",
       "Real Time Suprise Buybacks",
       "NFT Staking and APR Staking Launch",
-      "5 Million Marketcap Milestone -CoinMarket Cap and CoinGecko Listing",
+      "5 Million Marketcap Milestone CoinGecko Listing",
     ],
   },
 

src/shared/components/home/TokenomicsSection.tsx

@@ -9,37 +9,37 @@ const tokenomics = [
     color: "bg-[#86eae9]",
   },
   {
-    title: "Private Sale - 17% 1,000,000 SGPT",
+    title: "Private Sale - 17% 3,400,000 SGPT",
     description: " ",
     color: "bg-[#5dbdd3]",
   },
   {
-    title: "Stacking & Farming - 5% 1,000,000 SGPT",
+    title: "Stacking & Farming - 15% 3,000,000 SGPT",
     description: " ",
     color: "bg-[#4591b8]",
   },
   {
-    title: "Marketing & Promotion - 5% 1,000,000 SGPT",
+    title: "Marketing & Promotion - 15% 3,000,000 SGPT",
     description: " ",
     color: "bg-[#3b6696]",
   },
   {
-    title: "Public Sale - 5% 1,000,000 SGPT",
+    title: "Public Sale - 14% 2,800,000 SGPT",
     description: " ",
     color: "bg-[#353c6e]",
   },
   {
-    title: "Reward & Q&A - 5% 1,000,000 SGPT",
+    title: "Reward & Q&A - 10% 2,000,000 SGPT",
     description: " ",
     color: "bg-[#705788]",
   },
   {
-    title: "Advisor - 5% 1,000,000 SGPT",
+    title: "Advisor - 10% 2,000,000 SGPT",
     description: " ",
     color: "bg-[#a5769e]",
   },
   {
-    title: "Treasury - 5% 1,000,000 SGPT",
+    title: "Treasury - 14% 2,800,000 SGPT",
     description: " ",
     color: "bg-[#d59ab3]",
   },

tailwind.config.cjs

@@ -1,5 +1,3 @@
-const { default: tailwindcssBrandColors } = require("tailwindcss-brand-colors");
-
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
@@ -16,6 +14,6 @@ module.exports = {
       tailwindcss: {},
       autoprefixer: {},
     },
-    tailwindcssBrandColors,
+    require("tailwindcss-brand-colors"),
   ],
 };

vite.config.ts

@@ -1,9 +1,8 @@
-import react from "@vitejs/plugin-react-swc";
 import { defineConfig } from "vite";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [],
   server: {
     port: 5000,
     host: "0.0.0.0",