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

feat: animation

Browse Source
main
Trần Hiếu 2 years ago
parent fbba816dbe
commit b78e6f8844
10 changed files with 745 additions and 597 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. BIN
      src/assets/sgpt-bg.mp4
  2. BIN
      src/assets/sgpt.mp4
  3. 55
      src/index.css
  4. 32
      src/pages/Home.tsx
  5. 418
      src/shared/components/Header.tsx
  6. 39
      src/shared/components/backtotop/index.tsx
  7. 109
      src/shared/components/home/AboutSection.tsx
  8. 246
      src/shared/components/home/FirstSection.tsx
  9. 201
      src/shared/components/home/RoadMap.tsx
  10. 240
      src/shared/components/home/TokenomicsSection.tsx

BIN
src/assets/sgpt-bg.mp4
View File

Binary file not shown.

BIN
src/assets/sgpt.mp4
View File

Binary file not shown.

55
src/index.css
Unescape View File

@ -1,3 +1,58 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@keyframes slide-loop {
0% { transform: translateX(0); }
50% { transform: translateX(50px); }
100% { transform: translateX(0); }
}
.animate-slide-loop {
animation-name: slide-loop;
animation-duration: 3s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: alternate;
}
/* .text-container {
white-space: nowrap;
overflow: hidden;
}
.text-container span {
display: inline-block;
opacity: 0;
transform: translateX(-10px);
transition: opacity 0.3s ease-out, transform 0.3s ease-out;
} */
.back-to-top {
position: fixed;
bottom: 20px;
right: 20px;
color: #fff;
width: 60px;
height: 60px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
opacity: 0;
transition: opacity 0.4s ease-in-out;
}
.back-to-top.visible {
opacity: 1;
}
@keyframes TopToBottom {
0% {
transform: translate(50%, -20px);
opacity: 0;
}
100% {
transform: translate(50%, 0);
opacity: 1;
}
}

32
src/pages/Home.tsx
Unescape View File

@ -1,19 +1,21 @@
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";
import BackToTopButton from '../shared/components/backtotop'
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 = {};
type Props = {}
const Home = (props: Props) => {
return (
<div className="flex flex-col gap-20 bg-[#253237]">
<FirstSection />
<AboutSection />
<RoadMap />
<TokenomicsSection />
</div>
);
};
return (
<div className="flex flex-col gap-4 bg-[#212b30]">
<FirstSection />
<AboutSection />
<RoadMap />
<TokenomicsSection />
<BackToTopButton />
</div>
)
}
export default Home;
export default Home

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

@ -1,223 +1,233 @@
import React, { useEffect } from "react";
import Button from "./Button";
import robotLogo from "../../assets/images/robot-logo.png";
import { BsNewspaper, BsGithub } from "react-icons/bs";
import Whitepaper from "../../assets/Whitepaper.pdf";
type Props = {};
import React, { useEffect } from 'react'
import Button from './Button'
import robotLogo from '../../assets/images/robot-logo.png'
import { BsNewspaper, BsGithub } from 'react-icons/bs'
import Whitepaper from '../../assets/Whitepaper.pdf'
type Props = {}
const menuItems = [
{
name: "Home",
path: "/",
id: "home",
},
{
name: "About",
path: "",
id: "about",
},
{
name: "Roadmap",
path: "",
id: "roadmap",
},
{
name: "Tokenomics",
path: "",
id: "tokenomics",
},
];
{
name: 'Home',
path: '/',
id: 'home',
},
{
name: 'About',
path: '',
id: 'about',
},
{
name: 'Roadmap',
path: '',
id: 'roadmap',
},
{
name: 'Tokenomics',
path: '',
id: 'tokenomics',
},
]
const Header = (props: Props) => {
const [isScrolled, setIsScrolled] = React.useState(false);
const [isOpenMenu, setIsOpenMenu] = React.useState(false);
const [isMobile, setIsMobile] = React.useState(false);
const [isScrolled, setIsScrolled] = React.useState(false)
const [isOpenMenu, setIsOpenMenu] = React.useState(false)
const [isMobile, setIsMobile] = React.useState(false)
React.useEffect(() => {
// check is mobile
if (window.innerWidth <= 768) {
setIsMobile(true);
} else {
setIsMobile(false);
}
React.useEffect(() => {
// check is mobile
if (window.innerWidth <= 768) {
setIsMobile(true)
} else {
setIsMobile(false)
}
if (window.innerWidth <= 1024) {
setIsScrolled(true);
} else {
window.addEventListener("scroll", () => {
if (window.scrollY > 0) {
setIsScrolled(true);
if (window.innerWidth <= 1024) {
setIsScrolled(true)
} else {
setIsScrolled(false);
window.addEventListener('scroll', () => {
if (window.scrollY > 0) {
setIsScrolled(true)
} else {
setIsScrolled(false)
}
})
}
});
}
}, []);
}, [])
const jumpToSection = (section: string) => {
console.log("section", section);
const element = document.getElementById(section);
if (element) {
element.scrollIntoView({ behavior: "smooth" });
const jumpToSection = (section: string) => {
console.log('section', section)
const element = document.getElementById(section)
if (element) {
element.scrollIntoView({ behavior: 'smooth' })
}
}
};
const openLocalPdf = () => {
const pdf = Whitepaper;
window.open(pdf);
};
const openLocalPdf = () => {
const pdf = Whitepaper
window.open(pdf)
}
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 className="flex gap-2 items-center">
<div className="bg-white w-8 rounded-full overflow-hidden p-1">
<img
src={robotLogo}
className="w-full transition-all duration-150 rounded-full"
alt=""
/>
</div>
<h4 className="text-xl transition-all duration-150 text-white uppercase font-bold">
SGPT
</h4>
</div>
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 className="flex gap-2 items-center">
<div className="bg-white w-8 rounded-full overflow-hidden p-1">
<img
src={robotLogo}
className="w-full transition-all duration-150 rounded-full"
alt=""
/>
</div>
<h4 className="text-xl transition-all duration-150 text-white uppercase font-bold">
SGPT
</h4>
</div>
{
// Mobile menu
isMobile ? (
<div
className="flex flex-col items-center gap-1 px-2 py-1 cursor-pointer"
onClick={() => setIsOpenMenu(!isOpenMenu)}
>
<div className="w-6 h-1 bg-white rounded-full"></div>
<div className="w-6 h-1 bg-white rounded-full"></div>
<div className="w-6 h-1 bg-white rounded-full"></div>
</div>
) : (
<div className="flex gap-10 items-center">
<ul className="flex gap-10">
{menuItems.map((item) => (
<li
className="inline-block"
key={item.path}
onClick={() => jumpToSection(item.id)}
>
<p className="text-white text-md transition-all duration-150 cursor-pointer">
{item.name}
</p>
</li>
))}
</ul>
{
// Mobile menu
isMobile ? (
<div
className="flex flex-col items-center gap-1 px-2 py-1 cursor-pointer"
onClick={() => setIsOpenMenu(!isOpenMenu)}
>
<div className="w-6 h-1 bg-white rounded-full"></div>
<div className="w-6 h-1 bg-white rounded-full"></div>
<div className="w-6 h-1 bg-white rounded-full"></div>
</div>
) : (
<div className="flex gap-10 items-center">
<ul className="flex gap-10">
{menuItems.map((item) => (
<li
className="inline-block"
key={item.path}
onClick={() =>
jumpToSection(item.id)
}
>
<p className="text-white text-md transition-all duration-150 cursor-pointer transform motion-safe:hover:scale-110 hover:text-orange-500">
{item.name}
</p>
</li>
))}
</ul>
<div className="flex gap-4">
<Button size="sm" onClick={() => openLocalPdf()}>
<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 className="flex gap-4">
<Button
size="sm"
onClick={() => openLocalPdf()}
>
<div className="flex items-center gap-2 shadow-slate-50 transition-all transform motion-safe:hover:scale-110">
<BsNewspaper />
Whitepaper
</div>
</Button>
<Button size="sm">
<div className="flex items-center gap-2 shadow-slate-50 transform motion-safe:hover:scale-110">
<BsGithub />
Audit
</div>
</Button>
</div>
</div>
)
}
{
// Mobile menu
isMobile && isOpenMenu ? (
<div className="fixed top-11 right-5 p-4 bg-gray-800 z-40 rounded-xl">
<div className="flex flex-col items-center justify-center h-full">
<ul className="flex flex-col gap-3">
{menuItems.map((item) => (
<li
className="inline-block"
key={item.path}
onClick={() => jumpToSection(item.id)}
>
<p className="text-white text-md transition-all duration-150 cursor-pointer">
{item.name}
</p>
</li>
))}
<li
className="inline-block"
onClick={() => openLocalPdf()}
>
<p className="text-white text-md transition-all duration-150 cursor-pointer">
Whitepaper
</p>
</li>
<li className="inline-block">
<p className="text-white text-md transition-all duration-150 cursor-pointer">
Audit
</p>
</li>
</ul>
</div>
{
// Mobile menu
isMobile && isOpenMenu ? (
<div className="fixed top-11 right-5 p-4 bg-gray-800 z-40 rounded-xl">
<div className="flex flex-col items-center justify-center h-full">
<ul className="flex flex-col gap-3">
{menuItems.map((item) => (
<li
className="inline-block"
key={item.path}
onClick={() =>
jumpToSection(item.id)
}
>
<p className="text-white text-md transition-all duration-150 cursor-pointer">
{item.name}
</p>
</li>
))}
<li
className="inline-block"
onClick={() => openLocalPdf()}
>
<p className="text-white text-md transition-all duration-150 cursor-pointer">
Whitepaper
</p>
</li>
<li className="inline-block">
<p className="text-white text-md transition-all duration-150 cursor-pointer">
Audit
</p>
</li>
</ul>
</div>
</div>
) : null
}
</div>
</div>
) : null
}
</div>
</div>
) : (
<div className="fixed z-30 w-full p-5 transition-all duration-150">
<div className="container mx-auto flex justify-between items-center">
<div className="flex gap-2 items-center">
<div className="bg-white w-12 rounded-full overflow-hidden p-1">
<img
src={robotLogo}
className="w-full transition-all duration-150 rounded-full"
alt=""
/>
</div>
<h4 className="text-4xl transition-all duration-150 text-white uppercase font-bold">
SGPT
</h4>
</div>
) : (
<div className="fixed z-30 w-full p-5 transition-all duration-150">
<div className="container mx-auto flex justify-between items-center">
<div className="flex gap-2 items-center">
<div className="bg-white w-12 rounded-full overflow-hidden p-1">
<img
src={robotLogo}
className="w-full transition-all duration-150 rounded-full"
alt=""
/>
</div>
<h4 className="text-4xl 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}
onClick={() => jumpToSection(item.id)}
>
<p className="text-white text-md transition-all duration-150 cursor-pointer">
{item.name}
</p>
</li>
))}
</ul>
<div className="flex gap-10 items-center">
<ul className="flex gap-10">
{menuItems.map((item) => (
<li
className="inline-block"
key={item.path}
onClick={() => jumpToSection(item.id)}
>
<p className="text-white text-md transition-all duration-150 cursor-pointer">
{item.name}
</p>
</li>
))}
</ul>
<div className="flex gap-4">
<Button size="md" onClick={() => openLocalPdf()}>
<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>
</div>
)}
</>
);
};
<div className="flex gap-4">
<Button
size="md"
onClick={() => openLocalPdf()}
>
<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>
</div>
)}
</>
)
}
export default Header;
export default Header

39
src/shared/components/backtotop/index.tsx
Unescape View File

@ -0,0 +1,39 @@
import { useState } from 'react'
import robotLogo from '../../../assets/images/robot-coin1.png'
import { MdOutlineKeyboardDoubleArrowUp } from 'react-icons/md'
const BackToTopButton = () => {
const [isVisible, setIsVisible] = useState(false)
const toggleVisibility = () => {
if (window.pageYOffset > 100) {
setIsVisible(true)
} else {
setIsVisible(false)
}
}
const scrollToTop = () => {
window.scrollTo({
top: 0,
behavior: 'smooth',
})
}
window.addEventListener('scroll', toggleVisibility)
return (
<div
className={`bg-orange-500 back-to-top ${
isVisible ? 'visible' : ''
} group relative m-12 flex justify-center`}
onClick={scrollToTop}
>
<img src={robotLogo} className="rounded-full" alt="back" />
<span className="absolute scale-0 transition-all rounded bg-orange-500 group-hover:scale-100 p-1 text-center">
👆
</span>
</div>
)
}
export default BackToTopButton

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

@ -1,54 +1,67 @@
import React from "react";
import aboutImage from "../../../assets/images/robot32.png";
import MysteriousText from "../animated/MysteriousText";
type Props = {};
import React from 'react'
import aboutImage from '../../../assets/images/robot32.png'
import VideoSGPT from '../../../assets/sgpt.mp4'
import MysteriousText from '../animated/MysteriousText'
type Props = {}
const AboutSection = (props: Props) => {
const copyToClipboard = (address: string) => {
navigator.clipboard.writeText(address);
};
const copyToClipboard = (address: string) => {
navigator.clipboard.writeText(address)
}
return (
<div
className="container mx-auto text-white py-20 flex relative"
id="about"
style={{
backgroundImage: `url(https://awv3node-homepage.surge.sh/build/assets/stars.svg)}`,
}}
>
<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-100 md:w-4/5 text-lg">
<MysteriousText>
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.
</MysteriousText>
</p>
</div>
return (
<div
className="container mx-auto text-white py-2 flex relative"
id="about"
style={{
backgroundImage: `url(https://awv3node-homepage.surge.sh/build/assets/stars.svg)}`,
}}
>
<div className="flex flex-col justify-center gap-10 lg:w-1/2 w-full px-8 pt-2">
<div className="flex flex-col gap-8">
<h4 className="text-3xl uppercase font-bold hover:text-orange-400">
What is SGPT?
</h4>
<p className="text-gray-100 md:w-4/5 text-lg">
<MysteriousText>
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.
</MysteriousText>
</p>
</div>
<div className="flex flex-col gap-4">
<h4 className="text-5xl uppercase font-bold">SGPT Solution</h4>
<p className="text-gray-100 md:w-4/5 text-lg">
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 className="flex flex-col gap-4">
<h4 className="text-3xl uppercase font-bold hover:text-orange-400">
SGPT Solution
</h4>
<p className="text-gray-100 md:w-4/5 text-lg">
<MysteriousText>
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.
</MysteriousText>
</p>
</div>
</div>
<div className="md:w-1/2 md:flex hidden justify-center items-center">
<video controls className="rounded-md" muted autoPlay>
<source src={VideoSGPT} type="video/mp4" />
</video>
</div>
</div>
</div>
<div className="md:w-1/2 md:flex hidden justify-center items-center">
<img className="w-2/3 rounded-md" src={aboutImage} />
</div>
</div>
);
};
)
}
export default AboutSection;
export default AboutSection

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

@ -1,128 +1,144 @@
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 robotImage from '../../../assets/images/robot-2.png'
import robotImage2 from '../../../assets/images/robot-coin1.png'
import robotBgr from '../../../assets/images/robot-bgr.png'
import VideoSGPTBg from '../../../assets/sgpt-bg.mp4'
import Button from '../Button'
import {
BsFacebook,
BsDiscord,
BsTwitter,
BsTelegram,
BsInstagram,
} from "react-icons/bs";
BsFacebook,
BsDiscord,
BsTwitter,
BsTelegram,
BsInstagram,
} from 'react-icons/bs'
import { MdContentCopy } from "react-icons/md";
import { useSprings, useSpring, animated } from "@react-spring/web";
import { MdContentCopy } from 'react-icons/md'
import { useSprings, useSpring, animated } from '@react-spring/web'
const socials = [
{
name: "Telegram",
icon: <BsTelegram />,
link: "https://twitter.com/SGPT_SmartAi",
background: "bg-[#2ca5e0]",
},
{
name: "Twitter",
icon: <BsTwitter />,
link: "https://twitter.com/SGPT_SmartAi",
background: "bg-[#1da1f2]",
},
{
name: "Discord",
icon: <BsDiscord />,
link: "https://discord.com/invite/NNHV8JHBhk",
background: "bg-[#7289da]",
},
{
name: "Facebook",
icon: <BsFacebook />,
link: "https://www.facebook.com/SGPTSmartAi",
background: "bg-[#3b5998]",
},
{
name: "Instagram",
icon: <BsInstagram />,
link: "https://www.instagram.com/sgpt_smartai/",
background: "bg-[#e1306c]",
},
];
{
name: 'Telegram',
icon: <BsTelegram />,
link: 'https://twitter.com/SGPT_SmartAi',
background: 'bg-[#2ca5e0]',
},
{
name: 'Twitter',
icon: <BsTwitter />,
link: 'https://twitter.com/SGPT_SmartAi',
background: 'bg-[#1da1f2]',
},
{
name: 'Discord',
icon: <BsDiscord />,
link: 'https://discord.com/invite/NNHV8JHBhk',
background: 'bg-[#7289da]',
},
{
name: 'Facebook',
icon: <BsFacebook />,
link: 'https://www.facebook.com/SGPTSmartAi',
background: 'bg-[#3b5998]',
},
{
name: 'Instagram',
icon: <BsInstagram />,
link: 'https://www.instagram.com/sgpt_smartai/',
background: 'bg-[#e1306c]',
},
]
const FirstSection = () => {
const address = "0x3c97331438e90680a17c35905ffc2b8ef760f844";
const truncateAddress = (address: string) => {
return address.slice(0, 8) + "......" + address.slice(-7);
};
const address = '0x3c97331438e90680a17c35905ffc2b8ef760f844'
const truncateAddress = (address: string) => {
return address.slice(0, 8) + '......' + address.slice(-7)
}
const copyToClipboard = (address: string) => {
navigator.clipboard.writeText(address);
};
const copyToClipboard = (address: string) => {
navigator.clipboard.writeText(address)
}
const springs = useSpring({
from: { opacity: 0 },
to: { opacity: 1 },
});
return (
<animated.div
className="lg:min-h-screen px-10 lg:px-0 flex bg-cover bg-center bg-no-repeat relative"
id="home"
style={springs}
>
<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="lg: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="lg:w-3/4 lg:text-8xl md:text-7xl text-5xl font-bold">
A digital currency payment for SGPT chat bot services
</h4>
<p className="lg:w-2/3 w-full 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 lg:w-2/3 flex-wrap gap-4">
{socials.map((social) => (
<Button
bgColor={social.background}
key={social.name}
onClick={() => window.open(social.link, "_blank")}
const springs = useSpring({
from: { opacity: 0 },
to: { opacity: 1 },
})
return (
<animated.div
className="lg:min-h-screen px-10 lg:px-0 flex bg-cover bg-center bg-no-repeat relative"
id="home"
style={springs}
>
{/* <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>
<video
controls
autoPlay
muted
className="blur-sm absolute top-0 left-0 w-full h-full bg-cover bg-center bg-no-repeat"
>
<div className="flex items-center gap-2">
{social.icon}
{social.name}
</div>
</Button>
))}
<source src={VideoSGPTBg} type="video/mp4" />
</video>
</div>
</div>
</div>
<div className="lg:w-1/5 hidden lg: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=""
/>
<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="lg:w-4/5 flex flex-col justify-center lg:pb-0 gap-14 pb-20 z-50">
<div className="flex flex-col gap-10 ">
<h4 className="lg:w-3/4 lg:text-5xl md:text-5xl text-3xl font-bold hover:text-orange-400">
A digital currency payment for chat bot services
</h4>
{/* <p className="lg:w-2/3 w-full 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 className="">
<h2 className="text-3xl mb-4 font-bold rounded animate-slide-loop hover:text-orange-400">
Join Our Community
</h2>
<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="flex lg:w-2/3 flex-wrap gap-4">
{socials.map((social) => (
<Button
bgColor={social.background}
key={social.name}
onClick={() =>
window.open(social.link, '_blank')
}
>
<div className="flex items-center gap-2 transform motion-safe:hover:scale-110">
{social.icon}
{social.name}
</div>
</Button>
))}
</div>
</div>
</div>
<div className="lg:w-1/5 hidden lg: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 transition-all duration-500 cursor-pointer filter hover:border-orange-500"
alt="robot-ai"
/>
<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>
</animated.div>
);
};
<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 hover:border-orange-500"
alt="robot-ai"
/>
<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>
</animated.div>
)
}
export default FirstSection;
export default FirstSection

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

@ -1,113 +1,120 @@
import { useSpring, animated } from "@react-spring/web";
import React, { useEffect, useRef, useState } from "react";
import { VscDebugBreakpointLog } from "react-icons/vsc";
import { useSpring, animated } from '@react-spring/web'
import React, { useEffect, useRef, useState } 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 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 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.",
],
},
];
{
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 [isVisible, setIsVisible] = useState(false);
const [isVisible, setIsVisible] = useState(false)
useEffect(() => {
const section = document.querySelector(".animate-on-scroll");
const observer = new IntersectionObserver(
([entry]) => {
setIsVisible(entry.isIntersecting);
},
{ threshold: 0.5 }
);
useEffect(() => {
const section = document.querySelector('.animate-on-scroll')
const observer = new IntersectionObserver(
([entry]) => {
setIsVisible(entry.isIntersecting)
},
{ threshold: 0.5 }
)
if (!section) {
return;
}
observer.observe(section);
if (!section) {
return
}
observer.observe(section)
return () => {
observer.unobserve(section);
};
}, []);
return () => {
observer.unobserve(section)
}
}, [])
useEffect(() => {
console.log("isVisible", isVisible);
}, [isVisible]);
useEffect(() => {
console.log('isVisible', isVisible)
}, [isVisible])
const styles = useSpring({
opacity: isVisible ? 1 : 0,
transform: isVisible ? "translateY(0)" : "translateY(100px)",
config: {
duration: 500,
},
});
const styles = useSpring({
opacity: isVisible ? 1 : 0,
transform: isVisible ? 'translateY(0)' : 'translateY(100px)',
config: {
duration: 500,
},
})
return (
<div
className="container mx-auto text-white md:min-h-[60vh] animate-on-scroll py-20"
id="roadmap"
>
<h1 className="text-5xl font-bold text-center">RoadMap</h1>
return (
<div
className="container mx-auto text-white md:min-h-[60vh] animate-on-scroll py-20"
id="roadmap"
>
<h1 className="text-4xl font-bold text-center hover:text-orange-400">
Road Map
</h1>
<div className="flex flex-col lg:flex-row gap-10 mt-20 justify-center px-10 lg:px-0">
{roadMapData.map((item, index) => {
return (
<animated.div
key={index}
className="lg:w-1/4 bg-[#E24666] rounded-lg min-h-[250px] p-5"
style={styles}
>
<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>
);
<div className="flex flex-col lg:flex-row gap-10 mt-20 justify-center px-10 lg:px-0">
{roadMapData.map((item, index) => {
return (
<animated.div
key={index}
className="lg:w-1/4 bg-orange-400 rounded-lg min-h-[250px] p-5"
style={styles}
>
<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>
</animated.div>
)
})}
</ol>
</animated.div>
);
})}
</div>
</div>
);
};
</div>
</div>
)
}
export default RoadMap;
export default RoadMap

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

@ -1,132 +1,138 @@
import { useSpring, animated } from "@react-spring/web";
import { useEffect, useState } from "react";
import tokenomicChart from "../../../assets/images/tokenomic-chart.png";
import { useSpring, animated } from '@react-spring/web'
import { useEffect, useState } from 'react'
import tokenomicChart from '../../../assets/images/tokenomic-chart.png'
type Props = {};
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]",
},
];
{
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) => {
const [isVisible, setIsVisible] = useState(true);
const [isVisible, setIsVisible] = useState(true)
useEffect(() => {
const section = document.querySelector("#tokenomics");
const observer = new IntersectionObserver(
([entry]) => {
setIsVisible(entry.isIntersecting);
},
{ threshold: 0.5 }
);
useEffect(() => {
const section = document.querySelector('#tokenomics')
const observer = new IntersectionObserver(
([entry]) => {
setIsVisible(entry.isIntersecting)
},
{ threshold: 0.5 }
)
if (!section) {
return;
}
observer.observe(section);
if (!section) {
return
}
observer.observe(section)
return () => {
observer.unobserve(section);
};
}, []);
return () => {
observer.unobserve(section)
}
}, [])
useEffect(() => {
console.log("isVisible", isVisible);
}, [isVisible]);
useEffect(() => {
console.log('isVisible', isVisible)
}, [isVisible])
const styles = useSpring({
opacity: isVisible ? 1 : 0,
from: {
opacity: 0,
transform: "translateY(100px)",
},
to: {
opacity: isVisible ? 1 : 0,
transform: "translateY(0px)",
},
const styles = useSpring({
opacity: isVisible ? 1 : 0,
from: {
opacity: 0,
transform: 'translateY(100px)',
},
to: {
opacity: isVisible ? 1 : 0,
transform: 'translateY(0px)',
},
config: {
duration: 500,
},
});
return (
<div className="w-full py-24" id="tokenomics">
<div className="container mx-auto">
<h1 className="text-5xl text-white font-bold text-center mb-20">
Tokenomics
</h1>
config: {
duration: 500,
},
})
return (
<div className="w-full pb-24" id="tokenomics">
<div className="container mx-auto">
<h1 className="text-4xl text-white font-bold text-center mb-20">
Tokenomics
</h1>
<div className="w-full flex flex-col gap-4 lg:flex-row">
<div className="lg:w-1/2 flex justify-center">
<img src={tokenomicChart} alt="" className="rounded-3xl w-[80%]" />
</div>
<div className="w-full flex flex-col gap-4 lg:flex-row">
<div className="lg:w-1/2 flex justify-center">
<img
src={tokenomicChart}
alt=""
className="rounded-3xl w-[80%]"
/>
</div>
<div className="lg:w-1/2">
<ul className="flex flex-col items-end justify-center h-full gap-3 px-3">
{tokenomics.map((item, index) => {
return (
<animated.li
key={index}
className={`text-center w-full lg:w-2/3 bg-slate-200 py-3 relative`}
style={{
...styles,
}}
>
<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>
</animated.li>
);
})}
</ul>
</div>
<div className="lg:w-1/2">
<ul className="flex flex-col items-end justify-center h-full gap-3 px-3 max-sm:pt-10 cursor-pointer">
{tokenomics.map((item, index) => {
return (
<animated.li
key={index}
className={`text-center w-full lg:w-2/3 bg-slate-200 py-3 relative`}
style={{
...styles,
}}
>
<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>
</animated.li>
)
})}
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
);
};
)
}
export default TokenomicsSection;
export default TokenomicsSection

Write Preview
Loading…
Cancel
Save