Merge branch 'dev' into 'main'

implement UI See merge request d3/landing-page/sgpt-token!1
2 years ago · 070d1484f5
parent 4987bc6275 6c78596790
commit 070d1484f5
26 changed files with 432 additions and 1439 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,14 +13,15 @@
    "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",
    "@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",
--- 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/bgr9.jpeg
+++ b/src/assets/images/bgr9.jpeg
--- a/src/assets/images/coin.png
+++ b/src/assets/images/coin.png
--- a/src/assets/images/logo-robot.png
+++ b/src/assets/images/logo-robot.png
--- a/src/assets/images/poker-chips.webp
+++ b/src/assets/images/poker-chips.webp
--- a/src/assets/images/robot-2.png
+++ b/src/assets/images/robot-2.png
--- a/src/assets/images/robot-bgr.png
+++ b/src/assets/images/robot-bgr.png
--- a/src/assets/images/robot-coin1.png
+++ b/src/assets/images/robot-coin1.png
--- a/src/assets/images/robot-coin2.png
+++ b/src/assets/images/robot-coin2.png
--- a/src/assets/images/robot.png
+++ b/src/assets/images/robot.png
--- a/src/assets/images/robot32.png
+++ b/src/assets/images/robot32.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/Footer.tsx
+++ b/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;
--- a/src/shared/components/Header.tsx
+++ b/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 = {};

@ -7,18 +9,22 @@ const menuItems = [
  {
    name: "Home",
    path: "/",
+    id: "home",
  },
  {
    name: "About",
    path: "",
+    id: "about",
  },
  {
    name: "Tokenomics",
    path: "",
+    id: "tokenomics",
  },
  {
    name: "Roadmap",
    path: "",
+    id: "roadmap",
  },
 ];

@ -35,34 +41,60 @@ 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 ? (
        <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>
-              <h4 className="text-2xl transition-all duration-150 text-white uppercase font-bold">
-                Logo
+            <div className="flex gap-2 items-center">
+              <div className="bg-white rounded-full overflow-hidden p-1">
+                <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>

            <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>

              <div className="flex gap-4">
-                <Button size="sm">Whitepaper</Button>
-                <Button size="sm">Audit</Button>
+                <Button size="sm">
+                  <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>
@ -70,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>

@ -91,8 +130,18 @@ const Header = (props: Props) => {
              </ul>

              <div className="flex gap-4">
-                <Button size="md">Whitepaper</Button>
-                <Button size="md">Audit</Button>
+                <Button size="md">
+                  <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>
--- 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";
-
+import aboutImage from "../../../assets/images/robot32.png";
 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="flex flex-col gap-10 w-1/2">
+    <div className="container mx-auto text-white py-20 flex relative">
+      <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">
-            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} />
+      <div className="md:w-1/2 md:flex hidden justify-center items-center">
+        <img className="w-2/3 rounded-md" src={aboutImage} />
      </div>
    </div>
  );
--- a/src/shared/components/home/FirstSection.tsx
+++ b/src/shared/components/home/FirstSection.tsx
@ -1,39 +1,129 @@
-import robotImage from "../../../assets/images/robot.png";
+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,
+  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.
-          </h4>
-          <p className="w-3/4 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 className="flex w-2/3 flex-wrap gap-4">
-            <Button>Telegram</Button>
-            <Button>Telegram</Button>
-            <Button>Telegram</Button>
-            <Button>Telegram</Button>
-            <Button>Telegram</Button>
+    <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">
+              A digital currency payment for SGPT chat bot services.
+            </h4>
+            <p className="lg:w-2/3 font-body">
+              The SGPT Token is a digital currency designed to facilitate
+              payments for services provided by the SGPT chat bot. The chat bot
+              is a powerful tool that utilizes artificial intelligence to
+              communicate with users and provide valuable information and
+              services.
+            </p>
+          </div>
+
+          <div>
+            <h2 className="text-3xl mb-4 font-bold">Join Our Community</h2>
+            <div className="flex w-2/3 flex-wrap gap-4">
+              <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>
-        <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={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=""
+          />
+
+          <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 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
-          </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>
-            </li>
-          </ol>
-        </div>
+      <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 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% 3,400,000 SGPT",
+    description: " ",
+    color: "bg-[#5dbdd3]",
+  },
+  {
+    title: "Stacking & Farming - 15% 3,000,000 SGPT",
+    description: " ",
+    color: "bg-[#4591b8]",
+  },
+  {
+    title: "Marketing & Promotion - 15% 3,000,000 SGPT",
+    description: " ",
+    color: "bg-[#3b6696]",
+  },
+  {
+    title: "Public Sale - 14% 2,800,000 SGPT",
+    description: " ",
+    color: "bg-[#353c6e]",
+  },
+  {
+    title: "Reward & Q&A - 10% 2,000,000 SGPT",
+    description: " ",
+    color: "bg-[#705788]",
+  },
+  {
+    title: "Advisor - 10% 2,000,000 SGPT",
+    description: " ",
+    color: "bg-[#a5769e]",
+  },
+  {
+    title: "Treasury - 14% 2,800,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
@ -14,5 +14,6 @@ module.exports = {
      tailwindcss: {},
      autoprefixer: {},
    },
+    require("tailwindcss-brand-colors"),
  ],
 };
--- a/vite.config.ts
+++ b/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",