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

57
src/index.css
Unescape View File

@ -1,3 +1,58 @@
@tailwind base; @tailwind base;
@tailwind components; @tailwind components;
@tailwind utilities; @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 BackToTopButton from '../shared/components/backtotop'
import FirstSection from "../shared/components/home/FirstSection"; import AboutSection from '../shared/components/home/AboutSection'
import RoadMap from "../shared/components/home/RoadMap"; import FirstSection from '../shared/components/home/FirstSection'
import TokenomicsSection from "../shared/components/home/TokenomicsSection"; import RoadMap from '../shared/components/home/RoadMap'
import TokenomicsSection from '../shared/components/home/TokenomicsSection'
type Props = {}; type Props = {}
const Home = (props: Props) => { const Home = (props: Props) => {
return ( return (
<div className="flex flex-col gap-20 bg-[#253237]"> <div className="flex flex-col gap-4 bg-[#212b30]">
<FirstSection /> <FirstSection />
<AboutSection /> <AboutSection />
<RoadMap /> <RoadMap />
<TokenomicsSection /> <TokenomicsSection />
</div> <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 React, { useEffect } from 'react'
import Button from "./Button"; import Button from './Button'
import robotLogo from "../../assets/images/robot-logo.png"; import robotLogo from '../../assets/images/robot-logo.png'
import { BsNewspaper, BsGithub } from "react-icons/bs"; import { BsNewspaper, BsGithub } from 'react-icons/bs'
import Whitepaper from "../../assets/Whitepaper.pdf"; import Whitepaper from '../../assets/Whitepaper.pdf'
type Props = {}; type Props = {}
const menuItems = [ const menuItems = [
{ {
name: "Home", name: 'Home',
path: "/", path: '/',
id: "home", id: 'home',
}, },
{ {
name: "About", name: 'About',
path: "", path: '',
id: "about", id: 'about',
}, },
{ {
name: "Roadmap", name: 'Roadmap',
path: "", path: '',
id: "roadmap", id: 'roadmap',
}, },
{ {
name: "Tokenomics", name: 'Tokenomics',
path: "", path: '',
id: "tokenomics", id: 'tokenomics',
}, },
]; ]
const Header = (props: Props) => { const Header = (props: Props) => {
const [isScrolled, setIsScrolled] = React.useState(false); const [isScrolled, setIsScrolled] = React.useState(false)
const [isOpenMenu, setIsOpenMenu] = React.useState(false); const [isOpenMenu, setIsOpenMenu] = React.useState(false)
const [isMobile, setIsMobile] = React.useState(false); const [isMobile, setIsMobile] = React.useState(false)
React.useEffect(() => { React.useEffect(() => {
// check is mobile // check is mobile
if (window.innerWidth <= 768) { if (window.innerWidth <= 768) {
setIsMobile(true); setIsMobile(true)
} else { } else {
setIsMobile(false); setIsMobile(false)
} }
if (window.innerWidth <= 1024) { if (window.innerWidth <= 1024) {
setIsScrolled(true); setIsScrolled(true)
} else {
window.addEventListener("scroll", () => {
if (window.scrollY > 0) {
setIsScrolled(true);
} else { } else {
setIsScrolled(false); window.addEventListener('scroll', () => {
if (window.scrollY > 0) {
setIsScrolled(true)
} else {
setIsScrolled(false)
}
})
} }
}); }, [])
}
}, []);
const jumpToSection = (section: string) => { const jumpToSection = (section: string) => {
console.log("section", section); console.log('section', section)
const element = document.getElementById(section); const element = document.getElementById(section)
if (element) { if (element) {
element.scrollIntoView({ behavior: "smooth" }); element.scrollIntoView({ behavior: 'smooth' })
}
} }
};
const openLocalPdf = () => { const openLocalPdf = () => {
const pdf = Whitepaper; const pdf = Whitepaper
window.open(pdf); window.open(pdf)
}; }
return ( return (
<> <>
{isScrolled ? ( {isScrolled ? (
<div className="fixed w-full z-30 p-1 transition-all duration-150 bg-gray-800"> <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="container mx-auto flex justify-between items-center">
<div className="flex gap-2 items-center"> <div className="flex gap-2 items-center">
<div className="bg-white w-8 rounded-full overflow-hidden p-1"> <div className="bg-white w-8 rounded-full overflow-hidden p-1">
<img <img
src={robotLogo} src={robotLogo}
className="w-full transition-all duration-150 rounded-full" className="w-full transition-all duration-150 rounded-full"
alt="" alt=""
/> />
</div> </div>
<h4 className="text-xl transition-all duration-150 text-white uppercase font-bold"> <h4 className="text-xl transition-all duration-150 text-white uppercase font-bold">
SGPT SGPT
</h4> </h4>
</div> </div>
{ {
// Mobile menu // Mobile menu
isMobile ? ( isMobile ? (
<div <div
className="flex flex-col items-center gap-1 px-2 py-1 cursor-pointer" className="flex flex-col items-center gap-1 px-2 py-1 cursor-pointer"
onClick={() => setIsOpenMenu(!isOpenMenu)} 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 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>
) : ( ) : (
<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 <li
className="inline-block" className="inline-block"
key={item.path} key={item.path}
onClick={() => jumpToSection(item.id)} onClick={() =>
> jumpToSection(item.id)
<p className="text-white text-md transition-all duration-150 cursor-pointer"> }
{item.name} >
</p> <p className="text-white text-md transition-all duration-150 cursor-pointer transform motion-safe:hover:scale-110 hover:text-orange-500">
</li> {item.name}
))} </p>
</ul> </li>
))}
</ul>
<div className="flex gap-4"> <div className="flex gap-4">
<Button size="sm" onClick={() => openLocalPdf()}> <Button
<div className="flex items-center gap-2"> size="sm"
<BsNewspaper /> onClick={() => openLocalPdf()}
Whitepaper >
</div> <div className="flex items-center gap-2 shadow-slate-50 transition-all transform motion-safe:hover:scale-110">
</Button> <BsNewspaper />
<Button size="sm"> Whitepaper
<div className="flex items-center gap-2"> </div>
<BsGithub /> </Button>
Audit <Button size="sm">
</div> <div className="flex items-center gap-2 shadow-slate-50 transform motion-safe:hover:scale-110">
</Button> <BsGithub />
</div> Audit
</div> </div>
) </Button>
} </div>
</div>
)
}
{ {
// Mobile menu // Mobile menu
isMobile && isOpenMenu ? ( isMobile && isOpenMenu ? (
<div className="fixed top-11 right-5 p-4 bg-gray-800 z-40 rounded-xl"> <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"> <div className="flex flex-col items-center justify-center h-full">
<ul className="flex flex-col gap-3"> <ul className="flex flex-col gap-3">
{menuItems.map((item) => ( {menuItems.map((item) => (
<li <li
className="inline-block" className="inline-block"
key={item.path} key={item.path}
onClick={() => jumpToSection(item.id)} onClick={() =>
> jumpToSection(item.id)
<p className="text-white text-md transition-all duration-150 cursor-pointer"> }
{item.name} >
</p> <p className="text-white text-md transition-all duration-150 cursor-pointer">
</li> {item.name}
))} </p>
<li </li>
className="inline-block" ))}
onClick={() => openLocalPdf()} <li
> className="inline-block"
<p className="text-white text-md transition-all duration-150 cursor-pointer"> onClick={() => openLocalPdf()}
Whitepaper >
</p> <p className="text-white text-md transition-all duration-150 cursor-pointer">
</li> Whitepaper
<li className="inline-block"> </p>
<p className="text-white text-md transition-all duration-150 cursor-pointer"> </li>
Audit <li className="inline-block">
</p> <p className="text-white text-md transition-all duration-150 cursor-pointer">
</li> Audit
</ul> </p>
</div> </li>
</ul>
</div>
</div>
) : null
}
</div>
</div> </div>
) : null ) : (
} <div className="fixed z-30 w-full p-5 transition-all duration-150">
</div> <div className="container mx-auto flex justify-between items-center">
</div> <div className="flex gap-2 items-center">
) : ( <div className="bg-white w-12 rounded-full overflow-hidden p-1">
<div className="fixed z-30 w-full p-5 transition-all duration-150"> <img
<div className="container mx-auto flex justify-between items-center"> src={robotLogo}
<div className="flex gap-2 items-center"> className="w-full transition-all duration-150 rounded-full"
<div className="bg-white w-12 rounded-full overflow-hidden p-1"> alt=""
<img />
src={robotLogo} </div>
className="w-full transition-all duration-150 rounded-full" <h4 className="text-4xl transition-all duration-150 text-white uppercase font-bold">
alt="" SGPT
/> </h4>
</div> </div>
<h4 className="text-4xl transition-all duration-150 text-white uppercase font-bold">
SGPT
</h4>
</div>
<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 <li
className="inline-block" className="inline-block"
key={item.path} key={item.path}
onClick={() => jumpToSection(item.id)} onClick={() => jumpToSection(item.id)}
> >
<p className="text-white text-md transition-all duration-150 cursor-pointer"> <p className="text-white text-md transition-all duration-150 cursor-pointer">
{item.name} {item.name}
</p> </p>
</li> </li>
))} ))}
</ul> </ul>
<div className="flex gap-4"> <div className="flex gap-4">
<Button size="md" onClick={() => openLocalPdf()}> <Button
<div className="flex items-center gap-2"> size="md"
<BsNewspaper /> onClick={() => openLocalPdf()}
Whitepaper >
</div> <div className="flex items-center gap-2">
</Button> <BsNewspaper />
<Button size="md"> Whitepaper
<div className="flex items-center gap-2"> </div>
<BsGithub /> </Button>
Audit <Button size="md">
</div> <div className="flex items-center gap-2">
</Button> <BsGithub />
</div> Audit
</div> </div>
</div> </Button>
</div> </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 React from 'react'
import aboutImage from "../../../assets/images/robot32.png"; import aboutImage from '../../../assets/images/robot32.png'
import MysteriousText from "../animated/MysteriousText"; import VideoSGPT from '../../../assets/sgpt.mp4'
type Props = {}; import MysteriousText from '../animated/MysteriousText'
type Props = {}
const AboutSection = (props: Props) => { const AboutSection = (props: Props) => {
const copyToClipboard = (address: string) => { const copyToClipboard = (address: string) => {
navigator.clipboard.writeText(address); navigator.clipboard.writeText(address)
}; }
return ( return (
<div <div
className="container mx-auto text-white py-20 flex relative" className="container mx-auto text-white py-2 flex relative"
id="about" id="about"
style={{ style={{
backgroundImage: `url(https://awv3node-homepage.surge.sh/build/assets/stars.svg)}`, 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 justify-center gap-10 lg:w-1/2 w-full px-8 pt-2">
<div className="flex flex-col gap-4"> <div className="flex flex-col gap-8">
<h4 className="text-5xl uppercase font-bold">What is SGPT?</h4> <h4 className="text-3xl uppercase font-bold hover:text-orange-400">
<p className="text-gray-100 md:w-4/5 text-lg"> What is SGPT?
<MysteriousText> </h4>
SGPT Token is a complementary token created on the blockchain <p className="text-gray-100 md:w-4/5 text-lg">
platform to provide a platform for small and medium-sized <MysteriousText>
businesses (SMBs) to create and manage an internal Q&A system. SGPT Token is a complementary token created on the
SGPT Token will be used to conduct transactions on the platform blockchain platform to provide a platform for small
and provide benefits to members of the internal Q&A system. SGPT and medium-sized businesses (SMBs) to create and
Token will also be used to reward members who make positive manage an internal Q&A system. SGPT Token will be
contributions to the system. used to conduct transactions on the platform and
</MysteriousText> provide benefits to members of the internal Q&A
</p> system. SGPT Token will also be used to reward
</div> members who make positive contributions to the
system.
</MysteriousText>
</p>
</div>
<div className="flex flex-col gap-4"> <div className="flex flex-col gap-4">
<h4 className="text-5xl uppercase font-bold">SGPT Solution</h4> <h4 className="text-3xl uppercase font-bold hover:text-orange-400">
<p className="text-gray-100 md:w-4/5 text-lg"> SGPT Solution
The SGPT Token is a solution to the problems associated with </h4>
traditional payment methods for chat bot services. The token is <p className="text-gray-100 md:w-4/5 text-lg">
built on blockchain technology, which ensures that transactions are <MysteriousText>
fast, secure, and transparent. Moreover, the use of the SGPT Token The SGPT Token is a solution to the problems
eliminates the need for traditional payment methods, which are often associated with traditional payment methods for chat
costly and inconvenient. bot services. The token is built on blockchain
</p> 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> )
<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 robotImage from '../../../assets/images/robot-2.png'
import robotImage2 from "../../../assets/images/robot-coin1.png"; import robotImage2 from '../../../assets/images/robot-coin1.png'
import robotBgr from "../../../assets/images/robot-bgr.png"; import robotBgr from '../../../assets/images/robot-bgr.png'
import Button from "../Button"; import VideoSGPTBg from '../../../assets/sgpt-bg.mp4'
import Button from '../Button'
import { import {
BsFacebook, BsFacebook,
BsDiscord, BsDiscord,
BsTwitter, BsTwitter,
BsTelegram, BsTelegram,
BsInstagram, BsInstagram,
} from "react-icons/bs"; } from 'react-icons/bs'
import { MdContentCopy } from "react-icons/md"; import { MdContentCopy } from 'react-icons/md'
import { useSprings, useSpring, animated } from "@react-spring/web"; import { useSprings, useSpring, animated } from '@react-spring/web'
const socials = [ const socials = [
{ {
name: "Telegram", name: 'Telegram',
icon: <BsTelegram />, icon: <BsTelegram />,
link: "https://twitter.com/SGPT_SmartAi", link: 'https://twitter.com/SGPT_SmartAi',
background: "bg-[#2ca5e0]", background: 'bg-[#2ca5e0]',
}, },
{ {
name: "Twitter", name: 'Twitter',
icon: <BsTwitter />, icon: <BsTwitter />,
link: "https://twitter.com/SGPT_SmartAi", link: 'https://twitter.com/SGPT_SmartAi',
background: "bg-[#1da1f2]", background: 'bg-[#1da1f2]',
}, },
{ {
name: "Discord", name: 'Discord',
icon: <BsDiscord />, icon: <BsDiscord />,
link: "https://discord.com/invite/NNHV8JHBhk", link: 'https://discord.com/invite/NNHV8JHBhk',
background: "bg-[#7289da]", background: 'bg-[#7289da]',
}, },
{ {
name: "Facebook", name: 'Facebook',
icon: <BsFacebook />, icon: <BsFacebook />,
link: "https://www.facebook.com/SGPTSmartAi", link: 'https://www.facebook.com/SGPTSmartAi',
background: "bg-[#3b5998]", background: 'bg-[#3b5998]',
}, },
{ {
name: "Instagram", name: 'Instagram',
icon: <BsInstagram />, icon: <BsInstagram />,
link: "https://www.instagram.com/sgpt_smartai/", link: 'https://www.instagram.com/sgpt_smartai/',
background: "bg-[#e1306c]", background: 'bg-[#e1306c]',
}, },
]; ]
const FirstSection = () => { const FirstSection = () => {
const address = "0x3c97331438e90680a17c35905ffc2b8ef760f844"; const address = '0x3c97331438e90680a17c35905ffc2b8ef760f844'
const truncateAddress = (address: string) => { const truncateAddress = (address: string) => {
return address.slice(0, 8) + "......" + address.slice(-7); return address.slice(0, 8) + '......' + address.slice(-7)
}; }
const copyToClipboard = (address: string) => { const copyToClipboard = (address: string) => {
navigator.clipboard.writeText(address); navigator.clipboard.writeText(address)
}; }
const springs = useSpring({ const springs = useSpring({
from: { opacity: 0 }, from: { opacity: 0 },
to: { opacity: 1 }, to: { opacity: 1 },
}); })
return ( return (
<animated.div <animated.div
className="lg:min-h-screen px-10 lg:px-0 flex bg-cover bg-center bg-no-repeat relative" className="lg:min-h-screen px-10 lg:px-0 flex bg-cover bg-center bg-no-repeat relative"
id="home" id="home"
style={springs} style={springs}
> >
<div {/* <div
style={{ backgroundImage: `url(${robotBgr})` }} style={{ backgroundImage: `url(${robotBgr})` }}
className="blur-sm absolute top-0 left-0 w-full h-full bg-cover bg-center bg-no-repeat" className="blur-sm absolute top-0 left-0 w-full h-full bg-cover bg-center bg-no-repeat"
></div> ></div> */}
<div className="absolute top-0 left-0 w-full h-full bg-black opacity-60"></div> <div>
<div className="container flex mx-auto min-h-[70vh] text-white z-20 mt-20"> <video
<div className="lg:w-4/5 flex flex-col justify-center lg:pb-48 gap-14 pb-20 z-50"> controls
<div className="flex flex-col gap-10"> autoPlay
<h4 className="lg:w-3/4 lg:text-8xl md:text-7xl text-5xl font-bold"> muted
A digital currency payment for SGPT chat bot services className="blur-sm absolute top-0 left-0 w-full h-full bg-cover bg-center bg-no-repeat"
</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")}
> >
<div className="flex items-center gap-2"> <source src={VideoSGPTBg} type="video/mp4" />
{social.icon} </video>
{social.name}
</div>
</Button>
))}
</div> </div>
</div> <div className="absolute top-0 left-0 w-full h-full bg-black opacity-60"></div>
</div> <div className="container flex mx-auto min-h-[70vh] text-white z-20 mt-20">
<div className="lg:w-1/5 hidden lg:flex justify-center items-center relative"> <div className="lg:w-4/5 flex flex-col justify-center lg:pb-0 gap-14 pb-20 z-50">
<img <div className="flex flex-col gap-10 ">
src={robotImage2} <h4 className="lg:w-3/4 lg:text-5xl md:text-5xl text-3xl font-bold hover:text-orange-400">
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" A digital currency payment for chat bot services
alt="" </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 <div className="flex lg:w-2/3 flex-wrap gap-4">
src={robotImage} {socials.map((social) => (
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" <Button
alt="" 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> <img
<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> src={robotImage}
</div> 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"
</div> alt="robot-ai"
</animated.div> />
);
}; <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 { useSpring, animated } from '@react-spring/web'
import React, { useEffect, useRef, useState } from "react"; import React, { useEffect, useRef, useState } from 'react'
import { VscDebugBreakpointLog } from "react-icons/vsc"; import { VscDebugBreakpointLog } from 'react-icons/vsc'
type Props = {}; type Props = {}
const roadMapData = [ const roadMapData = [
{ {
phase: "Phase 1", phase: 'Phase 1',
listTitle: [ listTitle: [
"Development of CEO Ideology", 'Development of CEO Ideology',
"Website Development and Release", 'Website Development and Release',
"Whitepaper Launch", 'Whitepaper Launch',
"Subscription Presale", 'Subscription Presale',
"Marketing Partners Advisory Board Formed", 'Marketing Partners Advisory Board Formed',
], ],
}, },
{ {
phase: "Phase 2", phase: 'Phase 2',
listTitle: [ listTitle: [
"CEO DEX Token Launch", 'CEO DEX Token Launch',
"Massive Marketing Campaign", 'Massive Marketing Campaign',
"Real Time Suprise Buybacks", 'Real Time Suprise Buybacks',
"NFT Staking and APR Staking Launch", 'NFT Staking and APR Staking Launch',
"5 Million Marketcap Milestone CoinGecko Listing", '5 Million Marketcap Milestone CoinGecko Listing',
], ],
}, },
{ {
phase: "Phase 3", phase: 'Phase 3',
listTitle: [ listTitle: [
"Swap Development and Launch", 'Swap Development and Launch',
"Merchandise Launch", 'Merchandise Launch',
"Tier 1 CEX Listings", 'Tier 1 CEX Listings',
"CEO Bridge to ETH, Arbitrium and Polygon", 'CEO Bridge to ETH, Arbitrium and Polygon',
"10 Million MarketCap Milestone", '10 Million MarketCap Milestone',
"CEOAI Bot Creator and integration with AI.", 'CEOAI Bot Creator and integration with AI.',
], ],
}, },
]; ]
const RoadMap = (props: Props) => { const RoadMap = (props: Props) => {
const [isVisible, setIsVisible] = useState(false); const [isVisible, setIsVisible] = useState(false)
useEffect(() => { useEffect(() => {
const section = document.querySelector(".animate-on-scroll"); const section = document.querySelector('.animate-on-scroll')
const observer = new IntersectionObserver( const observer = new IntersectionObserver(
([entry]) => { ([entry]) => {
setIsVisible(entry.isIntersecting); setIsVisible(entry.isIntersecting)
}, },
{ threshold: 0.5 } { threshold: 0.5 }
); )
if (!section) { if (!section) {
return; return
} }
observer.observe(section); observer.observe(section)
return () => { return () => {
observer.unobserve(section); observer.unobserve(section)
}; }
}, []); }, [])
useEffect(() => { useEffect(() => {
console.log("isVisible", isVisible); console.log('isVisible', isVisible)
}, [isVisible]); }, [isVisible])
const styles = useSpring({ const styles = useSpring({
opacity: isVisible ? 1 : 0, opacity: isVisible ? 1 : 0,
transform: isVisible ? "translateY(0)" : "translateY(100px)", transform: isVisible ? 'translateY(0)' : 'translateY(100px)',
config: { config: {
duration: 500, duration: 500,
}, },
}); })
return ( return (
<div <div
className="container mx-auto text-white md:min-h-[60vh] animate-on-scroll py-20" className="container mx-auto text-white md:min-h-[60vh] animate-on-scroll py-20"
id="roadmap" id="roadmap"
> >
<h1 className="text-5xl font-bold text-center">RoadMap</h1> <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"> <div className="flex flex-col lg:flex-row gap-10 mt-20 justify-center px-10 lg:px-0">
{roadMapData.map((item, index) => { {roadMapData.map((item, index) => {
return ( return (
<animated.div <animated.div
key={index} key={index}
className="lg:w-1/4 bg-[#E24666] rounded-lg min-h-[250px] p-5" className="lg:w-1/4 bg-orange-400 rounded-lg min-h-[250px] p-5"
style={styles} style={styles}
> >
<h4 className="text-center text-3xl text-gray-100 font-semibold mb-6"> <h4 className="text-center text-3xl text-gray-100 font-semibold mb-6">
{item.phase} {item.phase}
</h4> </h4>
<ol className="flex flex-col gap-2"> <ol className="flex flex-col gap-2">
{item.listTitle.map((listItem, index) => { {item.listTitle.map((listItem, index) => {
return ( return (
<li key={index} className="flex items-center gap-3"> <li
<VscDebugBreakpointLog width={18} /> key={index}
<p className="font-medium font-body">{listItem}</p> className="flex items-center gap-3"
</li> >
); <VscDebugBreakpointLog width={18} />
<p className="font-medium font-body">
{listItem}
</p>
</li>
)
})}
</ol>
</animated.div>
)
})} })}
</ol> </div>
</animated.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 { useSpring, animated } from '@react-spring/web'
import { useEffect, useState } from "react"; import { useEffect, useState } from 'react'
import tokenomicChart from "../../../assets/images/tokenomic-chart.png"; import tokenomicChart from '../../../assets/images/tokenomic-chart.png'
type Props = {}; type Props = {}
const tokenomics = [ const tokenomics = [
{ {
title: "Liquidity - 5% 1,000,000 SGPT", title: 'Liquidity - 5% 1,000,000 SGPT',
description: " ", description: ' ',
color: "bg-[#86eae9]", color: 'bg-[#86eae9]',
}, },
{ {
title: "Private Sale - 17% 3,400,000 SGPT", title: 'Private Sale - 17% 3,400,000 SGPT',
description: " ", description: ' ',
color: "bg-[#5dbdd3]", color: 'bg-[#5dbdd3]',
}, },
{ {
title: "Stacking & Farming - 15% 3,000,000 SGPT", title: 'Stacking & Farming - 15% 3,000,000 SGPT',
description: " ", description: ' ',
color: "bg-[#4591b8]", color: 'bg-[#4591b8]',
}, },
{ {
title: "Marketing & Promotion - 15% 3,000,000 SGPT", title: 'Marketing & Promotion - 15% 3,000,000 SGPT',
description: " ", description: ' ',
color: "bg-[#3b6696]", color: 'bg-[#3b6696]',
}, },
{ {
title: "Public Sale - 14% 2,800,000 SGPT", title: 'Public Sale - 14% 2,800,000 SGPT',
description: " ", description: ' ',
color: "bg-[#353c6e]", color: 'bg-[#353c6e]',
}, },
{ {
title: "Reward & Q&A - 10% 2,000,000 SGPT", title: 'Reward & Q&A - 10% 2,000,000 SGPT',
description: " ", description: ' ',
color: "bg-[#705788]", color: 'bg-[#705788]',
}, },
{ {
title: "Advisor - 10% 2,000,000 SGPT", title: 'Advisor - 10% 2,000,000 SGPT',
description: " ", description: ' ',
color: "bg-[#a5769e]", color: 'bg-[#a5769e]',
}, },
{ {
title: "Treasury - 14% 2,800,000 SGPT", title: 'Treasury - 14% 2,800,000 SGPT',
description: " ", description: ' ',
color: "bg-[#d59ab3]", color: 'bg-[#d59ab3]',
}, },
]; ]
const TokenomicsSection = (props: Props) => { const TokenomicsSection = (props: Props) => {
const [isVisible, setIsVisible] = useState(true); const [isVisible, setIsVisible] = useState(true)
useEffect(() => { useEffect(() => {
const section = document.querySelector("#tokenomics"); const section = document.querySelector('#tokenomics')
const observer = new IntersectionObserver( const observer = new IntersectionObserver(
([entry]) => { ([entry]) => {
setIsVisible(entry.isIntersecting); setIsVisible(entry.isIntersecting)
}, },
{ threshold: 0.5 } { threshold: 0.5 }
); )
if (!section) { if (!section) {
return; return
} }
observer.observe(section); observer.observe(section)
return () => { return () => {
observer.unobserve(section); observer.unobserve(section)
}; }
}, []); }, [])
useEffect(() => { useEffect(() => {
console.log("isVisible", isVisible); console.log('isVisible', isVisible)
}, [isVisible]); }, [isVisible])
const styles = useSpring({ const styles = useSpring({
opacity: isVisible ? 1 : 0, opacity: isVisible ? 1 : 0,
from: { from: {
opacity: 0, opacity: 0,
transform: "translateY(100px)", transform: 'translateY(100px)',
}, },
to: { to: {
opacity: isVisible ? 1 : 0, opacity: isVisible ? 1 : 0,
transform: "translateY(0px)", transform: 'translateY(0px)',
}, },
config: { config: {
duration: 500, duration: 500,
}, },
}); })
return ( return (
<div className="w-full py-24" id="tokenomics"> <div className="w-full pb-24" id="tokenomics">
<div className="container mx-auto"> <div className="container mx-auto">
<h1 className="text-5xl text-white font-bold text-center mb-20"> <h1 className="text-4xl text-white font-bold text-center mb-20">
Tokenomics Tokenomics
</h1> </h1>
<div className="w-full flex flex-col gap-4 lg:flex-row"> <div className="w-full flex flex-col gap-4 lg:flex-row">
<div className="lg:w-1/2 flex justify-center"> <div className="lg:w-1/2 flex justify-center">
<img src={tokenomicChart} alt="" className="rounded-3xl w-[80%]" /> <img
</div> src={tokenomicChart}
alt=""
className="rounded-3xl w-[80%]"
/>
</div>
<div className="lg:w-1/2"> <div className="lg:w-1/2">
<ul className="flex flex-col items-end justify-center h-full gap-3 px-3"> <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) => { {tokenomics.map((item, index) => {
return ( return (
<animated.li <animated.li
key={index} key={index}
className={`text-center w-full lg:w-2/3 bg-slate-200 py-3 relative`} className={`text-center w-full lg:w-2/3 bg-slate-200 py-3 relative`}
style={{ style={{
...styles, ...styles,
}} }}
> >
<div <div
className={`absolute h-full top-0 w-2 ${item.color}`} className={`absolute h-full top-0 w-2 ${item.color}`}
></div> ></div>
<h4 className="text-xl font-bold text-gray-700"> <h4 className="text-xl font-bold text-gray-700">
{item.title} {item.title}
</h4> </h4>
<p className="text-gray-500">{item.description}</p> <p className="text-gray-500">
</animated.li> {item.description}
); </p>
})} </animated.li>
</ul> )
</div> })}
</ul>
</div>
</div>
</div>
</div> </div>
</div> )
</div> }
);
};
export default TokenomicsSection; export default TokenomicsSection

Write Preview
Loading…
Cancel
Save