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
2 years ago
parent
e7cc1d132d
commit
3cb558ad6a
@ -1,233 +1,223 @@ |
||||
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) |
||||
if (window.innerWidth <= 1024) { |
||||
setIsScrolled(true); |
||||
} else { |
||||
window.addEventListener("scroll", () => { |
||||
if (window.scrollY > 0) { |
||||
setIsScrolled(true); |
||||
} else { |
||||
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' }) |
||||
setIsScrolled(false); |
||||
} |
||||
}); |
||||
} |
||||
}, []); |
||||
|
||||
const openLocalPdf = () => { |
||||
const pdf = Whitepaper |
||||
window.open(pdf) |
||||
const jumpToSection = (section: string) => { |
||||
console.log("section", section); |
||||
const element = document.getElementById(section); |
||||
if (element) { |
||||
element.scrollIntoView({ behavior: "smooth" }); |
||||
} |
||||
}; |
||||
|
||||
return ( |
||||
<> |
||||
{isScrolled ? ( |
||||
<div className="fixed w-full z-30 p-1 transition-all duration-150 bg-gray-800"> |
||||
<div className="container mx-auto flex justify-between items-center"> |
||||
<div 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> |
||||
const openLocalPdf = () => { |
||||
const pdf = Whitepaper; |
||||
window.open(pdf); |
||||
}; |
||||
|
||||
{ |
||||
// 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> |
||||
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> |
||||
|
||||
<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> |
||||
</div> |
||||
) : null |
||||
} |
||||
</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="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 transform motion-safe:hover:scale-110 hover:text-orange-500"> |
||||
{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="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> |
||||
) |
||||
} |
||||
|
||||
<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> |
||||
{ |
||||
// 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 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 robotLogo from '../../../assets/images/robot-coin1.png' |
||||
import { MdOutlineKeyboardDoubleArrowUp } from 'react-icons/md' |
||||
import { useState } from "react"; |
||||
import robotLogo from "../../../assets/images/robot-coin1.png"; |
||||
import { MdOutlineKeyboardDoubleArrowUp } from "react-icons/md"; |
||||
import { VscFoldUp } from "react-icons/vsc"; |
||||
const BackToTopButton = () => { |
||||
const [isVisible, setIsVisible] = useState(false) |
||||
const [isVisible, setIsVisible] = useState(false); |
||||
|
||||
const toggleVisibility = () => { |
||||
if (window.pageYOffset > 100) { |
||||
setIsVisible(true) |
||||
} else { |
||||
setIsVisible(false) |
||||
} |
||||
const toggleVisibility = () => { |
||||
if (window.pageYOffset > 100) { |
||||
setIsVisible(true); |
||||
} else { |
||||
setIsVisible(false); |
||||
} |
||||
}; |
||||
|
||||
const scrollToTop = () => { |
||||
window.scrollTo({ |
||||
top: 0, |
||||
behavior: 'smooth', |
||||
}) |
||||
} |
||||
const scrollToTop = () => { |
||||
window.scrollTo({ |
||||
top: 0, |
||||
behavior: "smooth", |
||||
}); |
||||
}; |
||||
|
||||
window.addEventListener('scroll', toggleVisibility) |
||||
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> |
||||
) |
||||
} |
||||
return ( |
||||
<div |
||||
className={`bg-orange-500 back-to-top ${ |
||||
isVisible ? "visible" : "" |
||||
} group relative m-12 flex justify-center`}
|
||||
onClick={scrollToTop} |
||||
> |
||||
<VscFoldUp |
||||
className="absolute top-[-18px] right-[50%] translate-x-[50%] opacity-70 w-4 h-4 transition-all rounded text-center" |
||||
width={50} |
||||
></VscFoldUp> |
||||
<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