tuanbt
/
SGPT
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

implement UI

Browse Source
main
Bùi Thanh Tuấn 2 years ago
parent 4987bc6275
commit 2aafe89ff2
17 changed files with 1534 additions and 1418 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 10
      index.html
  2. 2530
      package-lock.json
  3. 4
      package.json
  4. 0
      src/App.css
  5. 1
      src/App.tsx
  6. BIN
      src/assets/images/poker-chips.webp
  7. BIN
      src/assets/images/robot.jpg
  8. BIN
      src/assets/images/robot.png
  9. BIN
      src/assets/images/tokenomic-chart.png
  10. 8
      src/index.css
  11. 2
      src/pages/Home.tsx
  12. 23
      src/shared/components/Header.tsx
  13. 45
      src/shared/components/home/AboutSection.tsx
  14. 119
      src/shared/components/home/FirstSection.tsx
  15. 72
      src/shared/components/home/RoadMap.tsx
  16. 87
      src/shared/components/home/TokenomicsSection.tsx
  17. 3
      tailwind.config.cjs

10
index.html
Unescape View File

@ -5,6 +5,16 @@
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>SGPT</title> <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> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>

2530
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

4
package.json
Unescape View File

@ -13,8 +13,10 @@
"match-sorter": "^6.3.1", "match-sorter": "^6.3.1",
"react": "^18.2.0", "react": "^18.2.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-icons": "^4.7.1",
"react-router-dom": "^6.8.2", "react-router-dom": "^6.8.2",
"sort-by": "^1.2.0" "sort-by": "^0.0.2",
"tailwindcss-brand-colors": "^0.3.3"
}, },
"devDependencies": { "devDependencies": {
"@types/react": "^18.0.27", "@types/react": "^18.0.27",

0
src/App.css
Unescape View File

1
src/App.tsx
Unescape View File

@ -1,4 +1,3 @@
import "./App.css";
import RouterProviderComponent from "./shared/providers/RouterProviderComponent"; import RouterProviderComponent from "./shared/providers/RouterProviderComponent";
function App() { function App() {

BIN
src/assets/images/poker-chips.webp
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 618 KiB

BIN
src/assets/images/robot.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 27 KiB

BIN
src/assets/images/robot.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 220 KiB

BIN
src/assets/images/tokenomic-chart.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 85 KiB

8
src/index.css
Unescape View File

@ -1,5 +1,3 @@
@import "tailwindcss/base"; @tailwind base;
@tailwind components;
@import "tailwindcss/components"; @tailwind utilities;
@import "tailwindcss/utilities";

2
src/pages/Home.tsx
Unescape View File

@ -1,6 +1,7 @@
import AboutSection from "../shared/components/home/AboutSection"; import AboutSection from "../shared/components/home/AboutSection";
import FirstSection from "../shared/components/home/FirstSection"; import FirstSection from "../shared/components/home/FirstSection";
import RoadMap from "../shared/components/home/RoadMap"; import RoadMap from "../shared/components/home/RoadMap";
import TokenomicsSection from "../shared/components/home/TokenomicsSection";
type Props = {}; type Props = {};
@ -10,6 +11,7 @@ const Home = (props: Props) => {
<FirstSection /> <FirstSection />
<AboutSection /> <AboutSection />
<RoadMap /> <RoadMap />
<TokenomicsSection />
</div> </div>
); );
}; };

23
src/shared/components/Header.tsx
Unescape View File

@ -7,18 +7,22 @@ const menuItems = [
{ {
name: "Home", name: "Home",
path: "/", path: "/",
id: "home",
}, },
{ {
name: "About", name: "About",
path: "", path: "",
id: "about",
}, },
{ {
name: "Tokenomics", name: "Tokenomics",
path: "", path: "",
id: "tokenomics",
}, },
{ {
name: "Roadmap", name: "Roadmap",
path: "", 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 ( return (
<> <>
{isScrolled ? ( {isScrolled ? (
@ -49,13 +61,14 @@ const Header = (props: Props) => {
<div className="flex gap-10 items-center"> <div className="flex gap-10 items-center">
<ul className="flex gap-10"> <ul className="flex gap-10">
{menuItems.map((item) => ( {menuItems.map((item) => (
<li className="inline-block" key={item.path}> <li
<a className="inline-block"
href="#" key={item.path}
className="text-white text-md transition-all duration-150" onClick={() => jumpToSection(item.id)}
> >
<p className="text-white text-md transition-all duration-150">
{item.name} {item.name}
</a> </p>
</li> </li>
))} ))}
</ul> </ul>

45
src/shared/components/home/AboutSection.tsx
Unescape View File

@ -1,48 +1,41 @@
import React from "react"; import React from "react";
import pokerChips from "../../../assets/images/poker-chips.webp";
type Props = {}; type Props = {};
const AboutSection = (props: Props) => { const AboutSection = (props: Props) => {
const copyToClipboard = (address: string) => {
navigator.clipboard.writeText(address);
};
return ( 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-10 w-1/2">
<div className="flex flex-col gap-4"> <div className="flex flex-col gap-4">
<h4 className="text-5xl uppercase font-bold">What is SGPT?</h4> <h4 className="text-5xl uppercase font-bold">What is SGPT?</h4>
<p className="text-gray-300 md:w-4/5 text-lg"> <p className="text-gray-300 md:w-4/5 text-lg">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto SGPT Token is a complementary token created on the blockchain
dignissimos necessitatibus nam vero in quis! Voluptatum doloremque platform to provide a platform for small and medium-sized businesses
voluptatibus corporis animi ab. Quisquam alias error labore iste (SMBs) to create and manage an internal Q&A system. SGPT Token will
dolores necessitatibus mollitia officia! be used to conduct transactions on the platform and provide benefits
</p> 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 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>
</div> </div>
<div className="flex flex-col gap-4"> <div className="flex flex-col gap-4">
<h4 className="text-5xl uppercase font-bold">What is SGPT?</h4> <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!
</p>
<p className="text-gray-300 md:w-4/5 text-lg"> <p className="text-gray-300 md:w-4/5 text-lg">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto The SGPT Token is a solution to the problems associated with
dignissimos necessitatibus nam vero in quis! Voluptatum doloremque traditional payment methods for chat bot services. The token is
voluptatibus corporis animi ab. Quisquam alias error labore iste built on blockchain technology, which ensures that transactions are
dolores necessitatibus mollitia officia! 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> </p>
</div> </div>
</div> </div>
<div className="w-1/2 flex justify-center items-center"> <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>
</div> </div>
); );

119
src/shared/components/home/FirstSection.tsx
Unescape View File

@ -1,39 +1,118 @@
import robotImage from "../../../assets/images/robot.png"; import robotImage from "../../../assets/images/robot.jpg";
import Button from "../Button"; 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 ( return (
<div <div className="min-h-screen flex bg-cover bg-center bg-no-repeat relative">
// style={{ backgroundImage: `url(${background})` }} <div className="container flex mx-auto min-h-[70vh] text-white z-20 mt-20">
className="min-h-screen flex bg-cover bg-center bg-no-repeat relative" <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">
<div className="container flex mx-auto text-white z-20 mt-20"> <h4 className="w-3/4 lg:text-8xl text-7xl font-bold">
<div className="md:w-1/2 flex flex-col justify-center gap-10 pb-20"> Lorem ipsum dolor consectetur sit adipisicing.
<h4 className="text-6xl font-bold">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</h4> </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 Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique
amet eveniet fugiat pariatur, illo in est officiis labore ad amet eveniet fugiat pariatur, illo in est officiis labore ad
corrupti obcaecati asperiores! Quos ratione tempore dolorum corrupti obcaecati asperiores! Quos ratione tempore dolorum
temporibus tenetur quaerat. temporibus tenetur quaerat.
</p> </p>
</div>
<div className="flex w-2/3 flex-wrap gap-4"> <div className="flex w-2/3 flex-wrap gap-4">
<Button>Telegram</Button> <Button bgColor="bg-telegram">
<Button>Telegram</Button> <div className="flex items-center gap-2">
<Button>Telegram</Button> <BsTelegram size={18} />
<Button>Telegram</Button> Telegram
<Button>Telegram</Button> </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/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>
<div className="md:w-1/2 flex justify-center items-center"> <div className="w-1/3 flex justify-center font-semibold">
<img src={robotImage} className="w-4/5" /> Audited By
</div> </div>
</div> </div>
<div className="w-full h-full bg-black absolute opacity-75 z-10"></div>
</div> </div>
); );
}; };

72
src/shared/components/home/RoadMap.tsx
Unescape View File

@ -1,30 +1,72 @@
import React from "react"; import React from "react";
import { VscDebugBreakpointLog } from "react-icons/vsc";
type Props = {}; 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) => { const RoadMap = (props: Props) => {
return ( 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> <h1 className="text-5xl font-bold text-center">RoadMap</h1>
<div className="flex gap-10 mt-20"> <div className="flex gap-10 mt-20 justify-center">
<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"> {roadMapData.map((item, index) => {
<h4 className="text-center text-2xl text-gray-100 font-semibold mb-3"> return (
Phase 1 <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> </h4>
<ol> <ol className="flex flex-col gap-2">
<li> {item.listTitle.map((listItem, index) => {
<p> return (
Lorem ipsum, dolor sit amet consectetur adipisicing elit. vitae. <li key={index} className="flex items-center gap-3">
</p> <VscDebugBreakpointLog width={18} />
</li> <p className="font-medium font-body">{listItem}</p>
<li>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. vitae.
</p>
</li> </li>
);
})}
</ol> </ol>
</div> </div>
);
})}
</div> </div>
</div> </div>
); );

87
src/shared/components/home/TokenomicsSection.tsx
Unescape View File

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

3
tailwind.config.cjs
Unescape View File

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

Write Preview
Loading…
Cancel
Save