modified: package.json modified: src/index.css modified: src/shared/components/Header.tsx new file: src/shared/components/animated/QnASection.css new file: src/shared/components/animated/TypingText.tsx modified: src/shared/components/backtotop/index.tsx modified: src/shared/providers/RouterProviderComponent.tsx modified: tailwind.config.cjsmain
Thuong_e
3 years ago
parent
e7cc1d132d
commit
3cb558ad6a
@ -1,233 +1,223 @@ |
|||||||
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 { |
||||||
window.addEventListener('scroll', () => { |
setIsScrolled(false); |
||||||
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 openLocalPdf = () => { |
const jumpToSection = (section: string) => { |
||||||
const pdf = Whitepaper |
console.log("section", section); |
||||||
window.open(pdf) |
const element = document.getElementById(section); |
||||||
|
if (element) { |
||||||
|
element.scrollIntoView({ behavior: "smooth" }); |
||||||
} |
} |
||||||
|
}; |
||||||
|
|
||||||
return ( |
const openLocalPdf = () => { |
||||||
<> |
const pdf = Whitepaper; |
||||||
{isScrolled ? ( |
window.open(pdf); |
||||||
<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 ( |
||||||
// Mobile menu
|
<> |
||||||
isMobile ? ( |
{isScrolled ? ( |
||||||
<div |
<div className="fixed w-full z-30 p-1 transition-all duration-150 bg-gray-800"> |
||||||
className="flex flex-col items-center gap-1 px-2 py-1 cursor-pointer" |
<div className="container mx-auto flex justify-between items-center"> |
||||||
onClick={() => setIsOpenMenu(!isOpenMenu)} |
<div className="flex gap-2 items-center"> |
||||||
> |
<div className="bg-white w-8 rounded-full overflow-hidden p-1"> |
||||||
<div className="w-6 h-1 bg-white rounded-full"></div> |
<img |
||||||
<div className="w-6 h-1 bg-white rounded-full"></div> |
src={robotLogo} |
||||||
<div className="w-6 h-1 bg-white rounded-full"></div> |
className="w-full transition-all duration-150 rounded-full" |
||||||
</div> |
alt="" |
||||||
) : ( |
/> |
||||||
<div className="flex gap-10 items-center"> |
</div> |
||||||
<ul className="flex gap-10"> |
<h4 className="text-xl transition-all duration-150 text-white uppercase font-bold"> |
||||||
{menuItems.map((item) => ( |
SGPT |
||||||
<li |
</h4> |
||||||
className="inline-block" |
</div> |
||||||
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 |
// Mobile menu
|
||||||
size="sm" |
isMobile ? ( |
||||||
onClick={() => openLocalPdf()} |
<div |
||||||
> |
className="flex flex-col items-center gap-1 px-2 py-1 cursor-pointer" |
||||||
<div className="flex items-center gap-2 shadow-slate-50 transition-all transform motion-safe:hover:scale-110"> |
onClick={() => setIsOpenMenu(!isOpenMenu)} |
||||||
<BsNewspaper /> |
> |
||||||
Whitepaper |
<div className="w-6 h-1 bg-white rounded-full"></div> |
||||||
</div> |
<div className="w-6 h-1 bg-white rounded-full"></div> |
||||||
</Button> |
<div className="w-6 h-1 bg-white rounded-full"></div> |
||||||
<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> |
|
||||||
</div> |
|
||||||
) : null |
|
||||||
} |
|
||||||
</div> |
|
||||||
</div> |
</div> |
||||||
) : ( |
) : ( |
||||||
<div className="fixed z-30 w-full p-5 transition-all duration-150"> |
<div className="flex gap-10 items-center"> |
||||||
<div className="container mx-auto flex justify-between items-center"> |
<ul className="flex gap-10"> |
||||||
<div className="flex gap-2 items-center"> |
{menuItems.map((item) => ( |
||||||
<div className="bg-white w-12 rounded-full overflow-hidden p-1"> |
<li |
||||||
<img |
className="inline-block " |
||||||
src={robotLogo} |
key={item.path} |
||||||
className="w-full transition-all duration-150 rounded-full" |
onClick={() => jumpToSection(item.id)} |
||||||
alt="" |
> |
||||||
/> |
<p className="text-white text-md transition-all duration-150 cursor-pointer transform motion-safe:hover:scale-110 hover:text-orange-500"> |
||||||
</div> |
{item.name} |
||||||
<h4 className="text-4xl transition-all duration-150 text-white uppercase font-bold"> |
</p> |
||||||
SGPT |
</li> |
||||||
</h4> |
))} |
||||||
</div> |
</ul> |
||||||
|
|
||||||
<div className="flex gap-10 items-center"> |
<div className="flex gap-4"> |
||||||
<ul className="flex gap-10"> |
<Button size="sm" onClick={() => openLocalPdf()}> |
||||||
{menuItems.map((item) => ( |
<div className="flex items-center gap-2 shadow-slate-50 transition-all transform motion-safe:hover:scale-110"> |
||||||
<li |
<BsNewspaper /> |
||||||
className="inline-block" |
Whitepaper |
||||||
key={item.path} |
</div> |
||||||
onClick={() => jumpToSection(item.id)} |
</Button> |
||||||
> |
<Button size="sm"> |
||||||
<p className="text-white text-md transition-all duration-150 cursor-pointer"> |
<div className="flex items-center gap-2 shadow-slate-50 transform motion-safe:hover:scale-110"> |
||||||
{item.name} |
<BsGithub /> |
||||||
</p> |
Audit |
||||||
</li> |
</div> |
||||||
))} |
</Button> |
||||||
</ul> |
</div> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
<div className="flex gap-4"> |
{ |
||||||
<Button |
// Mobile menu
|
||||||
size="md" |
isMobile && isOpenMenu ? ( |
||||||
onClick={() => openLocalPdf()} |
<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 items-center gap-2"> |
<ul className="flex flex-col gap-3"> |
||||||
<BsNewspaper /> |
{menuItems.map((item) => ( |
||||||
Whitepaper |
<li |
||||||
</div> |
className="inline-block" |
||||||
</Button> |
key={item.path} |
||||||
<Button size="md"> |
onClick={() => jumpToSection(item.id)} |
||||||
<div className="flex items-center gap-2"> |
> |
||||||
<BsGithub /> |
<p className="text-white text-md transition-all duration-150 cursor-pointer"> |
||||||
Audit |
{item.name} |
||||||
</div> |
</p> |
||||||
</Button> |
</li> |
||||||
</div> |
))} |
||||||
</div> |
<li |
||||||
</div> |
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> |
</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="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> |
||||||
|
)} |
||||||
|
</> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
export default Header |
export default Header; |
||||||
|
|||||||
@ -0,0 +1,15 @@ |
|||||||
|
/* .list-answer { |
||||||
|
animation: modalFadeIn ease 0.5s; |
||||||
|
background-color: red; |
||||||
|
} |
||||||
|
@keyframes modalFadeIn { |
||||||
|
0% { |
||||||
|
opacity: 0; |
||||||
|
transform: translateY(-150px); |
||||||
|
} |
||||||
|
|
||||||
|
100% { |
||||||
|
opacity: 1; |
||||||
|
transform: translateY(0px); |
||||||
|
} |
||||||
|
} */ |
||||||
@ -0,0 +1,28 @@ |
|||||||
|
import React, { useEffect, useState } from "react"; |
||||||
|
|
||||||
|
type Props = { |
||||||
|
children: string; |
||||||
|
}; |
||||||
|
const TypingText = ({ children, ...props }: Props) => { |
||||||
|
const [text, setText] = useState(``); |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
setText(children); |
||||||
|
}); |
||||||
|
const [typedText, setTypedText] = useState(""); |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
if (text.length === typedText.length) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
const timeoutId = setTimeout(() => { |
||||||
|
setTypedText(text.slice(0, typedText.length + 1)); |
||||||
|
}, 70); |
||||||
|
|
||||||
|
return () => clearTimeout(timeoutId); |
||||||
|
}, [text, typedText]); |
||||||
|
|
||||||
|
return <h1> {typedText}</h1>; |
||||||
|
}; |
||||||
|
export default TypingText; |
||||||
@ -1,39 +1,44 @@ |
|||||||
import { useState } from 'react' |
import { useState } from "react"; |
||||||
import robotLogo from '../../../assets/images/robot-coin1.png' |
import robotLogo from "../../../assets/images/robot-coin1.png"; |
||||||
import { MdOutlineKeyboardDoubleArrowUp } from 'react-icons/md' |
import { MdOutlineKeyboardDoubleArrowUp } from "react-icons/md"; |
||||||
|
import { VscFoldUp } from "react-icons/vsc"; |
||||||
const BackToTopButton = () => { |
const BackToTopButton = () => { |
||||||
const [isVisible, setIsVisible] = useState(false) |
const [isVisible, setIsVisible] = useState(false); |
||||||
|
|
||||||
const toggleVisibility = () => { |
const toggleVisibility = () => { |
||||||
if (window.pageYOffset > 100) { |
if (window.pageYOffset > 100) { |
||||||
setIsVisible(true) |
setIsVisible(true); |
||||||
} else { |
} else { |
||||||
setIsVisible(false) |
setIsVisible(false); |
||||||
} |
|
||||||
} |
} |
||||||
|
}; |
||||||
|
|
||||||
const scrollToTop = () => { |
const scrollToTop = () => { |
||||||
window.scrollTo({ |
window.scrollTo({ |
||||||
top: 0, |
top: 0, |
||||||
behavior: 'smooth', |
behavior: "smooth", |
||||||
}) |
}); |
||||||
} |
}; |
||||||
|
|
||||||
window.addEventListener('scroll', toggleVisibility) |
window.addEventListener("scroll", toggleVisibility); |
||||||
|
|
||||||
return ( |
return ( |
||||||
<div |
<div |
||||||
className={`bg-orange-500 back-to-top ${ |
className={`bg-orange-500 back-to-top ${ |
||||||
isVisible ? 'visible' : '' |
isVisible ? "visible" : "" |
||||||
} group relative m-12 flex justify-center`}
|
} group relative m-12 flex justify-center`}
|
||||||
onClick={scrollToTop} |
onClick={scrollToTop} |
||||||
> |
> |
||||||
<img src={robotLogo} className="rounded-full" alt="back" /> |
<VscFoldUp |
||||||
<span className="absolute scale-0 transition-all rounded bg-orange-500 group-hover:scale-100 p-1 text-center"> |
className="absolute top-[-18px] right-[50%] translate-x-[50%] opacity-70 w-4 h-4 transition-all rounded text-center" |
||||||
👆 |
width={50} |
||||||
</span> |
></VscFoldUp> |
||||||
</div> |
<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 |
export default BackToTopButton; |
||||||
|
|||||||
Loading…
Reference in new issue