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 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; |
||||
} |
||||
} |
||||
@ -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]"> |
||||
<div className="flex flex-col gap-4 bg-[#212b30]"> |
||||
<FirstSection /> |
||||
<AboutSection /> |
||||
<RoadMap /> |
||||
<TokenomicsSection /> |
||||
<BackToTopButton /> |
||||
</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 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); |
||||
}; |
||||
navigator.clipboard.writeText(address) |
||||
} |
||||
|
||||
return ( |
||||
<div |
||||
className="container mx-auto text-white py-20 flex relative" |
||||
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"> |
||||
<div className="flex flex-col gap-4"> |
||||
<h4 className="text-5xl uppercase font-bold">What is SGPT?</h4> |
||||
<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. |
||||
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> |
||||
<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"> |
||||
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> |
||||
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"> |
||||
<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> |
||||
); |
||||
}; |
||||
) |
||||
} |
||||
|
||||
export default AboutSection; |
||||
export default AboutSection |
||||
|
||||
Loading…
Reference in new issue