diff --git a/src/assets/sgpt-bg.mp4 b/src/assets/sgpt-bg.mp4 new file mode 100644 index 0000000..1ba35fd Binary files /dev/null and b/src/assets/sgpt-bg.mp4 differ diff --git a/src/assets/sgpt.mp4 b/src/assets/sgpt.mp4 new file mode 100644 index 0000000..49292b5 Binary files /dev/null and b/src/assets/sgpt.mp4 differ diff --git a/src/index.css b/src/index.css index bd6213e..2fce690 100644 --- a/src/index.css +++ b/src/index.css @@ -1,3 +1,58 @@ @tailwind base; @tailwind components; -@tailwind utilities; \ No newline at end of file +@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; + } + } \ No newline at end of file diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx index e0afefc..c4941fb 100644 --- a/src/pages/Home.tsx +++ b/src/pages/Home.tsx @@ -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 ( -
- - - - -
- ); -}; + return ( +
+ + + + + +
+ ) +} -export default Home; +export default Home diff --git a/src/shared/components/Header.tsx b/src/shared/components/Header.tsx index c8cc984..453e822 100644 --- a/src/shared/components/Header.tsx +++ b/src/shared/components/Header.tsx @@ -1,223 +1,233 @@ -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); - } else { - window.addEventListener("scroll", () => { - if (window.scrollY > 0) { - setIsScrolled(true); + if (window.innerWidth <= 1024) { + setIsScrolled(true) } else { - setIsScrolled(false); + 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" }); + const jumpToSection = (section: string) => { + console.log('section', section) + const element = document.getElementById(section) + if (element) { + element.scrollIntoView({ behavior: 'smooth' }) + } } - }; - const openLocalPdf = () => { - const pdf = Whitepaper; - window.open(pdf); - }; + const openLocalPdf = () => { + const pdf = Whitepaper + window.open(pdf) + } - return ( - <> - {isScrolled ? ( -
-
-
-
- -
-

- SGPT -

-
+ return ( + <> + {isScrolled ? ( +
+
+
+
+ +
+

+ SGPT +

+
- { - // Mobile menu - isMobile ? ( -
setIsOpenMenu(!isOpenMenu)} - > -
-
-
-
- ) : ( -
-
    - {menuItems.map((item) => ( -
  • jumpToSection(item.id)} - > -

    - {item.name} -

    -
    • - ))} -
+ { + // Mobile menu + isMobile ? ( +
setIsOpenMenu(!isOpenMenu)} + > +
+
+
+
+ ) : ( +
+
    + {menuItems.map((item) => ( +
  • + jumpToSection(item.id) + } + > +

    + {item.name} +

    +
    • + ))} +
-
- - -
-
- ) - } +
+ + +
+
+ ) + } - { - // Mobile menu - isMobile && isOpenMenu ? ( -
-
-
    - {menuItems.map((item) => ( -
  • jumpToSection(item.id)} - > -

    - {item.name} -

    -
    • - ))} -
  • openLocalPdf()} - > -

    - Whitepaper -

    -
    • -
  • -

    - Audit -

    -
    • -
-
+ { + // Mobile menu + isMobile && isOpenMenu ? ( +
+
+
    + {menuItems.map((item) => ( +
  • + jumpToSection(item.id) + } + > +

    + {item.name} +

    +
    • + ))} +
  • openLocalPdf()} + > +

    + Whitepaper +

    +
    • +
  • +

    + Audit +

    +
    • +
+
+
+ ) : null + } +
- ) : null - } -
-
- ) : ( -
-
-
-
- -
-

- SGPT -

-
+ ) : ( +
+
+
+
+ +
+

+ SGPT +

+
-
-
    - {menuItems.map((item) => ( -
  • jumpToSection(item.id)} - > -

    - {item.name} -

    -
    • - ))} -
+
+
    + {menuItems.map((item) => ( +
  • jumpToSection(item.id)} + > +

    + {item.name} +

    +
    • + ))} +
-
- - -
-
-
-
- )} - - ); -}; +
+ + +
+
+
+
+ )} + + ) +} -export default Header; +export default Header diff --git a/src/shared/components/backtotop/index.tsx b/src/shared/components/backtotop/index.tsx new file mode 100644 index 0000000..699bcc4 --- /dev/null +++ b/src/shared/components/backtotop/index.tsx @@ -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 ( +
+ back + + 👆 + +
+ ) +} + +export default BackToTopButton diff --git a/src/shared/components/home/AboutSection.tsx b/src/shared/components/home/AboutSection.tsx index d2aa4b6..b491523 100644 --- a/src/shared/components/home/AboutSection.tsx +++ b/src/shared/components/home/AboutSection.tsx @@ -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); - }; + const copyToClipboard = (address: string) => { + navigator.clipboard.writeText(address) + } - return ( -
-
-
-

What is SGPT?

-

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

-
+ return ( +
+
+
+

+ What is SGPT? +

+

+ + 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 Solution

-

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

+
+

+ SGPT Solution +

+

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

+
+
+
+ +
-
-
- -
-
- ); -}; + ) +} -export default AboutSection; +export default AboutSection diff --git a/src/shared/components/home/FirstSection.tsx b/src/shared/components/home/FirstSection.tsx index 8780622..dee53ab 100644 --- a/src/shared/components/home/FirstSection.tsx +++ b/src/shared/components/home/FirstSection.tsx @@ -1,128 +1,144 @@ -import robotImage from "../../../assets/images/robot-2.png"; -import robotImage2 from "../../../assets/images/robot-coin1.png"; -import robotBgr from "../../../assets/images/robot-bgr.png"; -import Button from "../Button"; +import robotImage from '../../../assets/images/robot-2.png' +import robotImage2 from '../../../assets/images/robot-coin1.png' +import robotBgr from '../../../assets/images/robot-bgr.png' +import VideoSGPTBg from '../../../assets/sgpt-bg.mp4' +import Button from '../Button' import { - BsFacebook, - BsDiscord, - BsTwitter, - BsTelegram, - BsInstagram, -} from "react-icons/bs"; + BsFacebook, + BsDiscord, + BsTwitter, + BsTelegram, + BsInstagram, +} from 'react-icons/bs' -import { MdContentCopy } from "react-icons/md"; -import { useSprings, useSpring, animated } from "@react-spring/web"; +import { MdContentCopy } from 'react-icons/md' +import { useSprings, useSpring, animated } from '@react-spring/web' const socials = [ - { - name: "Telegram", - icon: , - link: "https://twitter.com/SGPT_SmartAi", - background: "bg-[#2ca5e0]", - }, - { - name: "Twitter", - icon: , - link: "https://twitter.com/SGPT_SmartAi", - background: "bg-[#1da1f2]", - }, - { - name: "Discord", - icon: , - link: "https://discord.com/invite/NNHV8JHBhk", - background: "bg-[#7289da]", - }, - { - name: "Facebook", - icon: , - link: "https://www.facebook.com/SGPTSmartAi", - background: "bg-[#3b5998]", - }, - { - name: "Instagram", - icon: , - link: "https://www.instagram.com/sgpt_smartai/", - background: "bg-[#e1306c]", - }, -]; + { + name: 'Telegram', + icon: , + link: 'https://twitter.com/SGPT_SmartAi', + background: 'bg-[#2ca5e0]', + }, + { + name: 'Twitter', + icon: , + link: 'https://twitter.com/SGPT_SmartAi', + background: 'bg-[#1da1f2]', + }, + { + name: 'Discord', + icon: , + link: 'https://discord.com/invite/NNHV8JHBhk', + background: 'bg-[#7289da]', + }, + { + name: 'Facebook', + icon: , + link: 'https://www.facebook.com/SGPTSmartAi', + background: 'bg-[#3b5998]', + }, + { + name: 'Instagram', + icon: , + link: 'https://www.instagram.com/sgpt_smartai/', + background: 'bg-[#e1306c]', + }, +] const FirstSection = () => { - const address = "0x3c97331438e90680a17c35905ffc2b8ef760f844"; - const truncateAddress = (address: string) => { - return address.slice(0, 8) + "......" + address.slice(-7); - }; + const address = '0x3c97331438e90680a17c35905ffc2b8ef760f844' + const truncateAddress = (address: string) => { + return address.slice(0, 8) + '......' + address.slice(-7) + } - const copyToClipboard = (address: string) => { - navigator.clipboard.writeText(address); - }; + const copyToClipboard = (address: string) => { + navigator.clipboard.writeText(address) + } - const springs = useSpring({ - from: { opacity: 0 }, - to: { opacity: 1 }, - }); - return ( - -
-
-
-
-
-

- A digital currency payment for SGPT chat bot services -

-

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

-
- -
-

Join Our Community

-
- {socials.map((social) => ( - - ))} + +
-
-
-
- +
+
+
+
+

+ A digital currency payment for chat bot services +

+ {/*

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

*/} +
+ +
+

+ Join Our Community +

- +
+ {socials.map((social) => ( + + ))} +
+
+
+
+ robot-ai -
-
-
-
- - ); -}; + robot-ai + +
+
+
+
+ + ) +} -export default FirstSection; +export default FirstSection diff --git a/src/shared/components/home/RoadMap.tsx b/src/shared/components/home/RoadMap.tsx index 7437674..67be03e 100644 --- a/src/shared/components/home/RoadMap.tsx +++ b/src/shared/components/home/RoadMap.tsx @@ -1,113 +1,120 @@ -import { useSpring, animated } from "@react-spring/web"; -import React, { useEffect, useRef, useState } from "react"; -import { VscDebugBreakpointLog } from "react-icons/vsc"; +import { useSpring, animated } from '@react-spring/web' +import React, { useEffect, useRef, useState } from 'react' +import { VscDebugBreakpointLog } from 'react-icons/vsc' -type Props = {}; +type Props = {} const roadMapData = [ - { - phase: "Phase 1", - listTitle: [ - "Development of CEO Ideology", - "Website Development and Release", - "Whitepaper Launch", - "Subscription Presale", - "Marketing Partners Advisory Board Formed", - ], - }, + { + phase: 'Phase 1', + listTitle: [ + 'Development of CEO Ideology', + 'Website Development and Release', + 'Whitepaper Launch', + 'Subscription Presale', + 'Marketing Partners Advisory Board Formed', + ], + }, - { - phase: "Phase 2", - listTitle: [ - "CEO DEX Token Launch", - "Massive Marketing Campaign", - "Real Time Suprise Buybacks", - "NFT Staking and APR Staking Launch", - "5 Million Marketcap Milestone CoinGecko Listing", - ], - }, + { + phase: 'Phase 2', + listTitle: [ + 'CEO DEX Token Launch', + 'Massive Marketing Campaign', + 'Real Time Suprise Buybacks', + 'NFT Staking and APR Staking Launch', + '5 Million Marketcap Milestone CoinGecko Listing', + ], + }, - { - phase: "Phase 3", - listTitle: [ - "Swap Development and Launch", - "Merchandise Launch", - "Tier 1 CEX Listings", - "CEO Bridge to ETH, Arbitrium and Polygon", - "10 Million MarketCap Milestone", - "CEOAI Bot Creator and integration with AI.", - ], - }, -]; + { + phase: 'Phase 3', + listTitle: [ + 'Swap Development and Launch', + 'Merchandise Launch', + 'Tier 1 CEX Listings', + 'CEO Bridge to ETH, Arbitrium and Polygon', + '10 Million MarketCap Milestone', + 'CEOAI Bot Creator and integration with AI.', + ], + }, +] const RoadMap = (props: Props) => { - const [isVisible, setIsVisible] = useState(false); + const [isVisible, setIsVisible] = useState(false) - useEffect(() => { - const section = document.querySelector(".animate-on-scroll"); - const observer = new IntersectionObserver( - ([entry]) => { - setIsVisible(entry.isIntersecting); - }, - { threshold: 0.5 } - ); + useEffect(() => { + const section = document.querySelector('.animate-on-scroll') + const observer = new IntersectionObserver( + ([entry]) => { + setIsVisible(entry.isIntersecting) + }, + { threshold: 0.5 } + ) - if (!section) { - return; - } - observer.observe(section); + if (!section) { + return + } + observer.observe(section) - return () => { - observer.unobserve(section); - }; - }, []); + return () => { + observer.unobserve(section) + } + }, []) - useEffect(() => { - console.log("isVisible", isVisible); - }, [isVisible]); + useEffect(() => { + console.log('isVisible', isVisible) + }, [isVisible]) - const styles = useSpring({ - opacity: isVisible ? 1 : 0, - transform: isVisible ? "translateY(0)" : "translateY(100px)", - config: { - duration: 500, - }, - }); + const styles = useSpring({ + opacity: isVisible ? 1 : 0, + transform: isVisible ? 'translateY(0)' : 'translateY(100px)', + config: { + duration: 500, + }, + }) - return ( -
-

RoadMap

+ return ( +
+

+ Road Map +

-
- {roadMapData.map((item, index) => { - return ( - -

- {item.phase} -

-
    - {item.listTitle.map((listItem, index) => { - return ( -
  1. - -

    {listItem}

    -
    2. - ); +
    + {roadMapData.map((item, index) => { + return ( + +

    + {item.phase} +

    +
      + {item.listTitle.map((listItem, index) => { + return ( +
    1. + +

      + {listItem} +

      +
      2. + ) + })} +
    +     + ) })} -
- - ); - })} -
-
- ); -}; +
+
+ ) +} -export default RoadMap; +export default RoadMap diff --git a/src/shared/components/home/TokenomicsSection.tsx b/src/shared/components/home/TokenomicsSection.tsx index 116756b..df625a7 100644 --- a/src/shared/components/home/TokenomicsSection.tsx +++ b/src/shared/components/home/TokenomicsSection.tsx @@ -1,132 +1,138 @@ -import { useSpring, animated } from "@react-spring/web"; -import { useEffect, useState } from "react"; -import tokenomicChart from "../../../assets/images/tokenomic-chart.png"; +import { useSpring, animated } from '@react-spring/web' +import { useEffect, useState } from 'react' +import tokenomicChart from '../../../assets/images/tokenomic-chart.png' -type Props = {}; +type Props = {} const tokenomics = [ - { - title: "Liquidity - 5% 1,000,000 SGPT", - description: " ", - color: "bg-[#86eae9]", - }, - { - title: "Private Sale - 17% 3,400,000 SGPT", - description: " ", - color: "bg-[#5dbdd3]", - }, - { - title: "Stacking & Farming - 15% 3,000,000 SGPT", - description: " ", - color: "bg-[#4591b8]", - }, - { - title: "Marketing & Promotion - 15% 3,000,000 SGPT", - description: " ", - color: "bg-[#3b6696]", - }, - { - title: "Public Sale - 14% 2,800,000 SGPT", - description: " ", - color: "bg-[#353c6e]", - }, - { - title: "Reward & Q&A - 10% 2,000,000 SGPT", - description: " ", - color: "bg-[#705788]", - }, - { - title: "Advisor - 10% 2,000,000 SGPT", - description: " ", - color: "bg-[#a5769e]", - }, - { - title: "Treasury - 14% 2,800,000 SGPT", - description: " ", - color: "bg-[#d59ab3]", - }, -]; + { + title: 'Liquidity - 5% 1,000,000 SGPT', + description: ' ', + color: 'bg-[#86eae9]', + }, + { + title: 'Private Sale - 17% 3,400,000 SGPT', + description: ' ', + color: 'bg-[#5dbdd3]', + }, + { + title: 'Stacking & Farming - 15% 3,000,000 SGPT', + description: ' ', + color: 'bg-[#4591b8]', + }, + { + title: 'Marketing & Promotion - 15% 3,000,000 SGPT', + description: ' ', + color: 'bg-[#3b6696]', + }, + { + title: 'Public Sale - 14% 2,800,000 SGPT', + description: ' ', + color: 'bg-[#353c6e]', + }, + { + title: 'Reward & Q&A - 10% 2,000,000 SGPT', + description: ' ', + color: 'bg-[#705788]', + }, + { + title: 'Advisor - 10% 2,000,000 SGPT', + description: ' ', + color: 'bg-[#a5769e]', + }, + { + title: 'Treasury - 14% 2,800,000 SGPT', + description: ' ', + color: 'bg-[#d59ab3]', + }, +] const TokenomicsSection = (props: Props) => { - const [isVisible, setIsVisible] = useState(true); + const [isVisible, setIsVisible] = useState(true) - useEffect(() => { - const section = document.querySelector("#tokenomics"); - const observer = new IntersectionObserver( - ([entry]) => { - setIsVisible(entry.isIntersecting); - }, - { threshold: 0.5 } - ); + useEffect(() => { + const section = document.querySelector('#tokenomics') + const observer = new IntersectionObserver( + ([entry]) => { + setIsVisible(entry.isIntersecting) + }, + { threshold: 0.5 } + ) - if (!section) { - return; - } - observer.observe(section); + if (!section) { + return + } + observer.observe(section) - return () => { - observer.unobserve(section); - }; - }, []); + return () => { + observer.unobserve(section) + } + }, []) - useEffect(() => { - console.log("isVisible", isVisible); - }, [isVisible]); + useEffect(() => { + console.log('isVisible', isVisible) + }, [isVisible]) - const styles = useSpring({ - opacity: isVisible ? 1 : 0, - from: { - opacity: 0, - transform: "translateY(100px)", - }, - to: { - opacity: isVisible ? 1 : 0, - transform: "translateY(0px)", - }, + const styles = useSpring({ + opacity: isVisible ? 1 : 0, + from: { + opacity: 0, + transform: 'translateY(100px)', + }, + to: { + opacity: isVisible ? 1 : 0, + transform: 'translateY(0px)', + }, - config: { - duration: 500, - }, - }); - return ( -
-
-

- Tokenomics -

+ config: { + duration: 500, + }, + }) + return ( +
+
+

+ Tokenomics +

-
-
- -
+
+
+ +
-
-
    - {tokenomics.map((item, index) => { - return ( - -
    -

    - {item.title} -

    -

    {item.description}

    -     - ); - })} -
-
+
+
    + {tokenomics.map((item, index) => { + return ( + +
    +

    + {item.title} +

    +

    + {item.description} +

    +     + ) + })} +
+
+
+
-
-
- ); -}; + ) +} -export default TokenomicsSection; +export default TokenomicsSection