Trần Hiếu
2 years ago
parent
fbba816dbe
commit
b78e6f8844
Binary file not shown.
Binary file not shown.
@ -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; |
||||||
|
} |
||||||
|
} |
||||||
@ -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 /> |
||||||
|
<BackToTopButton /> |
||||||
</div> |
</div> |
||||||
); |
) |
||||||
}; |
} |
||||||
|
|
||||||
export default Home; |
export default Home |
||||||
|
|||||||
@ -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 |
||||||
@ -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"> |
||||||
|
What is SGPT? |
||||||
|
</h4> |
||||||
<p className="text-gray-100 md:w-4/5 text-lg"> |
<p className="text-gray-100 md:w-4/5 text-lg"> |
||||||
<MysteriousText> |
<MysteriousText> |
||||||
SGPT Token is a complementary token created on the blockchain |
SGPT Token is a complementary token created on the |
||||||
platform to provide a platform for small and medium-sized |
blockchain platform to provide a platform for small |
||||||
businesses (SMBs) to create and manage an internal Q&A system. |
and medium-sized businesses (SMBs) to create and |
||||||
SGPT Token will be used to conduct transactions on the platform |
manage an internal Q&A system. SGPT Token will be |
||||||
and provide benefits to members of the internal Q&A system. SGPT |
used to conduct transactions on the platform and |
||||||
Token will also be used to reward members who make positive |
provide benefits to members of the internal Q&A |
||||||
contributions to the system. |
system. SGPT Token will also be used to reward |
||||||
|
members who make positive contributions to the |
||||||
|
system. |
||||||
</MysteriousText> |
</MysteriousText> |
||||||
</p> |
</p> |
||||||
</div> |
</div> |
||||||
|
|
||||||
<div className="flex flex-col gap-4"> |
<div className="flex flex-col gap-4"> |
||||||
<h4 className="text-5xl uppercase font-bold">SGPT Solution</h4> |
<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"> |
<p className="text-gray-100 md:w-4/5 text-lg"> |
||||||
The SGPT Token is a solution to the problems associated with |
<MysteriousText> |
||||||
traditional payment methods for chat bot services. The token is |
The SGPT Token is a solution to the problems |
||||||
built on blockchain technology, which ensures that transactions are |
associated with traditional payment methods for chat |
||||||
fast, secure, and transparent. Moreover, the use of the SGPT Token |
bot services. The token is built on blockchain |
||||||
eliminates the need for traditional payment methods, which are often |
technology, which ensures that transactions are |
||||||
costly and inconvenient. |
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> |
</p> |
||||||
</div> |
</div> |
||||||
</div> |
</div> |
||||||
<div className="md:w-1/2 md:flex hidden justify-center items-center"> |
<div className="md:w-1/2 md:flex hidden justify-center items-center"> |
||||||
<img className="w-2/3 rounded-md" src={aboutImage} /> |
<video controls className="rounded-md" muted autoPlay> |
||||||
|
<source src={VideoSGPT} type="video/mp4" /> |
||||||
|
</video> |
||||||
</div> |
</div> |
||||||
</div> |
</div> |
||||||
); |
) |
||||||
}; |
} |
||||||
|
|
||||||
export default AboutSection; |
export default AboutSection |
||||||
|
|||||||
Loading…
Reference in new issue