implement UI

2 years ago · 2aafe89ff2
parent 4987bc6275
commit 2aafe89ff2
17 changed files with 1534 additions and 1418 deletions
--- a/index.html
+++ b/index.html
@ -5,6 +5,16 @@
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>SGPT</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;500;600;700&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Sen:wght@400;700&display=swap"
+      rel="stylesheet"
+    />
  </head>
  <body>
    <div id="root"></div>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -13,8 +13,10 @@
    "match-sorter": "^6.3.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
+    "react-icons": "^4.7.1",
    "react-router-dom": "^6.8.2",
-    "sort-by": "^1.2.0"
+    "sort-by": "^0.0.2",
+    "tailwindcss-brand-colors": "^0.3.3"
  },
  "devDependencies": {
    "@types/react": "^18.0.27",
--- a/src/App.css
+++ b/src/App.css
--- a/src/App.tsx
+++ b/src/App.tsx
@ -1,4 +1,3 @@
-import "./App.css";
 import RouterProviderComponent from "./shared/providers/RouterProviderComponent";

 function App() {
--- a/src/assets/images/poker-chips.webp
+++ b/src/assets/images/poker-chips.webp
--- a/src/assets/images/robot.jpg
+++ b/src/assets/images/robot.jpg
--- a/src/assets/images/robot.png
+++ b/src/assets/images/robot.png
--- a/src/assets/images/tokenomic-chart.png
+++ b/src/assets/images/tokenomic-chart.png
--- a/src/index.css
+++ b/src/index.css
@ -1,5 +1,3 @@
-@import "tailwindcss/base";
-
-@import "tailwindcss/components";
-
-@import "tailwindcss/utilities";
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@ -1,6 +1,7 @@
 import AboutSection from "../shared/components/home/AboutSection";
 import FirstSection from "../shared/components/home/FirstSection";
 import RoadMap from "../shared/components/home/RoadMap";
+import TokenomicsSection from "../shared/components/home/TokenomicsSection";

 type Props = {};

@ -10,6 +11,7 @@ const Home = (props: Props) => {
      <FirstSection />
      <AboutSection />
      <RoadMap />
+      <TokenomicsSection />
    </div>
  );
 };
--- a/src/shared/components/Header.tsx
+++ b/src/shared/components/Header.tsx
@ -7,18 +7,22 @@ const menuItems = [
  {
    name: "Home",
    path: "/",
+    id: "home",
  },
  {
    name: "About",
    path: "",
+    id: "about",
  },
  {
    name: "Tokenomics",
    path: "",
+    id: "tokenomics",
  },
  {
    name: "Roadmap",
    path: "",
+    id: "roadmap",
  },
 ];

@ -35,6 +39,14 @@ const Header = (props: Props) => {
    });
  }, []);

+  const jumpToSection = (section: string) => {
+    console.log("section", section);
+    const element = document.getElementById(section);
+    if (element) {
+      element.scrollIntoView({ behavior: "smooth" });
+    }
+  };
+
  return (
    <>
      {isScrolled ? (
@ -49,13 +61,14 @@ const Header = (props: Props) => {
            <div className="flex gap-10 items-center">
              <ul className="flex gap-10">
                {menuItems.map((item) => (
-                  <li className="inline-block" key={item.path}>
-                    <a
-                      href="#"
-                      className="text-white text-md transition-all duration-150"
+                  <li
+                    className="inline-block"
+                    key={item.path}
+                    onClick={() => jumpToSection(item.id)}
                  >
+                    <p className="text-white text-md transition-all duration-150">
                      {item.name}
-                    </a>
+                    </p>
                  </li>
                ))}
              </ul>
--- a/src/shared/components/home/AboutSection.tsx
+++ b/src/shared/components/home/AboutSection.tsx
@ -1,48 +1,41 @@
 import React from "react";
-import pokerChips from "../../../assets/images/poker-chips.webp";

 type Props = {};

 const AboutSection = (props: Props) => {
+  const copyToClipboard = (address: string) => {
+    navigator.clipboard.writeText(address);
+  };
+
  return (
-    <div className="container mx-auto text-white py-20 flex">
+    <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 gap-4">
          <h4 className="text-5xl uppercase font-bold">What is SGPT?</h4>
          <p className="text-gray-300 md:w-4/5 text-lg">
-            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto
-            dignissimos necessitatibus nam vero in quis! Voluptatum doloremque
-            voluptatibus corporis animi ab. Quisquam alias error labore iste
-            dolores necessitatibus mollitia officia!
-          </p>
-
-          <p className="text-gray-300 md:w-4/5 text-lg">
-            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto
-            dignissimos necessitatibus nam vero in quis! Voluptatum doloremque
-            voluptatibus corporis animi ab. Quisquam alias error labore iste
-            dolores necessitatibus mollitia officia!
+            SGPT Token is a complementary token created on the blockchain
+            platform to provide a platform for small and medium-sized businesses
+            (SMBs) to create and manage an internal Q&A system. SGPT Token will
+            be used to conduct transactions on the platform and provide benefits
+            to members of the internal Q&A system. SGPT Token will also be used
+            to reward members who make positive contributions to the system.
          </p>
        </div>

        <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">
-            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto
-            dignissimos necessitatibus nam vero in quis! Voluptatum doloremque
-            voluptatibus corporis animi ab. Quisquam alias error labore iste
-            dolores necessitatibus mollitia officia!
-          </p>
-
+          <h4 className="text-5xl uppercase font-bold">SGPT Solution</h4>
          <p className="text-gray-300 md:w-4/5 text-lg">
-            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto
-            dignissimos necessitatibus nam vero in quis! Voluptatum doloremque
-            voluptatibus corporis animi ab. Quisquam alias error labore iste
-            dolores necessitatibus mollitia officia!
+            The SGPT Token is a solution to the problems associated with
+            traditional payment methods for chat bot services. The token is
+            built on blockchain technology, which ensures that transactions are
+            fast, secure, and transparent. Moreover, the use of the SGPT Token
+            eliminates the need for traditional payment methods, which are often
+            costly and inconvenient.
          </p>
        </div>
      </div>
      <div className="w-1/2 flex justify-center items-center">
-        <img className="w-2/3" src={pokerChips} />
+        <img className="w-2/3" src={""} />
      </div>
    </div>
  );
--- a/src/shared/components/home/FirstSection.tsx
+++ b/src/shared/components/home/FirstSection.tsx
@ -1,39 +1,118 @@
-import robotImage from "../../../assets/images/robot.png";
+import robotImage from "../../../assets/images/robot.jpg";
 import Button from "../Button";
+import {
+  BsFacebook,
+  BsDiscord,
+  BsTwitter,
+  BsTelegram,
+  BsInstagram,
+} from "react-icons/bs";

-type Props = {};
+import { MdContentCopy } from "react-icons/md";

-const FirstSection = (props: Props) => {
+const FirstSection = () => {
+  const address = "0x3c97331438e90680a17c35905ffc2b8ef760f844";
+  const truncateAddress = (address: string) => {
+    return address.slice(0, 8) + "......" + address.slice(-7);
+  };
+
+  const copyToClipboard = (address: string) => {
+    navigator.clipboard.writeText(address);
+  };
  return (
-    <div
-      // style={{ backgroundImage: `url(${background})` }}
-      className="min-h-screen flex bg-cover bg-center bg-no-repeat relative"
-    >
-      <div className="container flex mx-auto text-white z-20 mt-20">
-        <div className="md:w-1/2 flex flex-col justify-center gap-10 pb-20">
-          <h4 className="text-6xl font-bold">
-            Lorem ipsum dolor sit amet consectetur adipisicing elit.
+    <div className="min-h-screen flex bg-cover bg-center bg-no-repeat relative">
+      <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.
            </h4>
-          <p className="w-3/4 font-body">
+            <p className="lg:w-2/3 font-body">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique
              amet eveniet fugiat pariatur, illo in est officiis labore ad
              corrupti obcaecati asperiores! Quos ratione tempore dolorum
              temporibus tenetur quaerat.
            </p>
+          </div>

          <div className="flex w-2/3 flex-wrap gap-4">
-            <Button>Telegram</Button>
-            <Button>Telegram</Button>
-            <Button>Telegram</Button>
-            <Button>Telegram</Button>
-            <Button>Telegram</Button>
+            <Button bgColor="bg-telegram">
+              <div className="flex items-center gap-2">
+                <BsTelegram size={18} />
+                Telegram
+              </div>
+            </Button>
+            <Button bgColor="bg-discord">
+              <div className="flex items-center gap-2">
+                <BsDiscord size={18} />
+                Discord
+              </div>
+            </Button>
+            <Button bgColor="bg-facebook">
+              <div className="flex items-center gap-2">
+                <BsFacebook size={18} />
+                Facebook
+              </div>
+            </Button>
+            <Button bgColor="bg-twitter">
+              <div className="flex items-center gap-2">
+                <BsTwitter size={18} />
+                Twitter
+              </div>
+            </Button>
+            <Button bgColor="bg-instagram">
+              <div className="flex items-center gap-2">
+                <BsInstagram size={18} />
+                Instagram
+              </div>
+            </Button>
          </div>
        </div>
-        <div className="md:w-1/2 flex justify-center items-center">
-          <img src={robotImage} className="w-4/5" />
+        <div className="md:w-1/5 flex justify-center items-center relative">
+          <img
+            src={robotImage}
+            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=""
+          />
+
+          <img
+            src={robotImage}
+            className="object-cover absolute top-28 border-4 backdrop-blur-sm shadow-2xl shadow-cyan-300 border-cyan-500 rounded-full w-40 aspect-square"
+            alt=""
+          />
+
+          <div className="absolute w-10 aspect-square blur-sm bg-gradient-to-br from-rose-500 to-indigo-700 rounded-full top-32 -left-10"></div>
+          <div className="absolute w-10 aspect-square bg-[radial-gradient(ellipse_at_bottom,_var(--tw-gradient-stops))] from-sky-400 to-indigo-900 blur-sm rounded-full bottom-56 right-10"></div>
+        </div>
+      </div>
+      {/* <div className="w-full h-full bg-black absolute opacity-75 z-10"></div> */}
+      <div className="absolute z-50 rounded-full border-2 p-7 overflow-hidden text-white flex gap-4 items-center bottom-10 left-1/2 -translate-x-1/2  max-w-4xl min-h-[80px] mx-auto container">
+        <div className="w-1/3 flex items-center gap-3 justify-center font-semibold">
+          <p>{truncateAddress(address)}</p>
+
+          <button
+            className="hover:cursor-pointer bg-white/50 text-white rounded-full p-2"
+            onClick={() => copyToClipboard(address)}
+            type="button"
+          >
+            <MdContentCopy size={18} />
+          </button>
+        </div>
+
+        <div className="w-1/3 flex justify-center items-center gap-3 font-semibold">
+          <p>{truncateAddress(address)}</p>
+          <button
+            className="hover:cursor-pointer bg-white/50 text-white rounded-full p-2"
+            onClick={() => copyToClipboard(address)}
+            type="button"
+          >
+            <MdContentCopy size={18} />
+          </button>
+        </div>
+        <div className="w-1/3 flex justify-center font-semibold">
+          Audited By
        </div>
      </div>
-      <div className="w-full h-full bg-black absolute opacity-75 z-10"></div>
    </div>
  );
 };
--- a/src/shared/components/home/RoadMap.tsx
+++ b/src/shared/components/home/RoadMap.tsx
@ -1,30 +1,72 @@
 import React from "react";
+import { VscDebugBreakpointLog } from "react-icons/vsc";

 type Props = {};

+const roadMapData = [
+  {
+    phase: "Phase 1",
+    listTitle: [
+      "Development of CEO Ideology",
+      "Website Development and Release",
+      "Whitepaper Launch",
+      "Subscription Presale",
+      "Marketing Partners Advisory Board Formed",
+    ],
+  },
+
+  {
+    phase: "Phase 2",
+    listTitle: [
+      "CEO DEX Token Launch",
+      "Massive Marketing Campaign",
+      "Real Time Suprise Buybacks",
+      "NFT Staking and APR Staking Launch",
+      "5 Million Marketcap Milestone -CoinMarket Cap and CoinGecko Listing",
+    ],
+  },
+
+  {
+    phase: "Phase 3",
+    listTitle: [
+      "Swap Development and Launch",
+      "Merchandise Launch",
+      "Tier 1 CEX Listings",
+      "CEO Bridge to ETH, Arbitrium and Polygon",
+      "10 Million MarketCap Milestone",
+      "CEOAI Bot Creator and integration with AI.",
+    ],
+  },
+];
+
 const RoadMap = (props: Props) => {
  return (
-    <div className="container mx-auto text-white md:min-h-[40vh]">
+    <div className="container mx-auto text-white md:min-h-[60vh]" id="roadmap">
      <h1 className="text-5xl font-bold text-center">RoadMap</h1>

-      <div className="flex gap-10 mt-20">
-        <div className="w-1/4 bg-[conic-gradient(at_left,_var(--tw-gradient-stops))] from-orange-400 to-rose-400 rounded-lg min-h-[200px] p-5">
-          <h4 className="text-center text-2xl text-gray-100 font-semibold mb-3">
-            Phase 1
+      <div className="flex gap-10 mt-20 justify-center">
+        {roadMapData.map((item, index) => {
+          return (
+            <div
+              key={index}
+              className="w-1/4 bg-[conic-gradient(at_left,_var(--tw-gradient-stops))] from-orange-400 to-rose-400 rounded-lg min-h-[250px] p-5"
+            >
+              <h4 className="text-center text-3xl text-gray-100 font-semibold mb-6">
+                {item.phase}
              </h4>
-          <ol>
-            <li>
-              <p>
-                Lorem ipsum, dolor sit amet consectetur adipisicing elit. vitae.
-              </p>
-            </li>
-            <li>
-              <p>
-                Lorem ipsum, dolor sit amet consectetur adipisicing elit. vitae.
-              </p>
+              <ol className="flex flex-col gap-2">
+                {item.listTitle.map((listItem, index) => {
+                  return (
+                    <li key={index} className="flex items-center gap-3">
+                      <VscDebugBreakpointLog width={18} />
+                      <p className="font-medium font-body">{listItem}</p>
                    </li>
+                  );
+                })}
              </ol>
            </div>
+          );
+        })}
      </div>
    </div>
  );
--- a/src/shared/components/home/TokenomicsSection.tsx
+++ b/src/shared/components/home/TokenomicsSection.tsx
@ -0,0 +1,87 @@
+import tokenomicChart from "../../../assets/images/tokenomic-chart.png";
+
+type Props = {};
+
+const tokenomics = [
+  {
+    title: "Liquidity - 5% 1,000,000 SGPT",
+    description: " ",
+    color: "bg-[#86eae9]",
+  },
+  {
+    title: "Private Sale - 17% 1,000,000 SGPT",
+    description: " ",
+    color: "bg-[#5dbdd3]",
+  },
+  {
+    title: "Stacking & Farming - 5% 1,000,000 SGPT",
+    description: " ",
+    color: "bg-[#4591b8]",
+  },
+  {
+    title: "Marketing & Promotion - 5% 1,000,000 SGPT",
+    description: " ",
+    color: "bg-[#3b6696]",
+  },
+  {
+    title: "Public Sale - 5% 1,000,000 SGPT",
+    description: " ",
+    color: "bg-[#353c6e]",
+  },
+  {
+    title: "Reward & Q&A - 5% 1,000,000 SGPT",
+    description: " ",
+    color: "bg-[#705788]",
+  },
+  {
+    title: "Advisor - 5% 1,000,000 SGPT",
+    description: " ",
+    color: "bg-[#a5769e]",
+  },
+  {
+    title: "Treasury - 5% 1,000,000 SGPT",
+    description: " ",
+    color: "bg-[#d59ab3]",
+  },
+];
+
+const TokenomicsSection = (props: Props) => {
+  return (
+    <div className="w-full bg-white py-24" id="tokenomics">
+      <div className="container mx-auto">
+        <h1 className="text-5xl font-bold text-center text-black mb-20">
+          Tokenomics
+        </h1>
+
+        <div className="w-full flex flex-col md:flex-row">
+          <div className="md:w-1/2">
+            <img src={tokenomicChart} alt="" />
+          </div>
+
+          <div className="md:w-1/2">
+            <ul className="flex flex-col items-end justify-center h-full gap-3 px-3">
+              {tokenomics.map((item, index) => {
+                return (
+                  <li
+                    key={index}
+                    className={`text-center w-full md:w-2/3 bg-slate-200  py-3 relative`}
+                  >
+                    <div
+                      className={`absolute h-full top-0 w-2 ${item.color}`}
+                    ></div>
+                    <h4 className="text-xl font-bold text-gray-700">
+                      {item.title}
+                    </h4>
+                    <p className="text-gray-500">{item.description}</p>
+                  </li>
+                );
+              })}
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default TokenomicsSection;
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@ -1,3 +1,5 @@
+const { default: tailwindcssBrandColors } = require("tailwindcss-brand-colors");
+
 /** @type {import('tailwindcss').Config} */
 module.exports = {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
@ -14,5 +16,6 @@ module.exports = {
      tailwindcss: {},
      autoprefixer: {},
    },
+    tailwindcssBrandColors,
  ],
 };