diff --git a/src/shared/components/animated/QnASection.css b/src/shared/components/css/QnASection.css similarity index 100% rename from src/shared/components/animated/QnASection.css rename to src/shared/components/css/QnASection.css diff --git a/src/shared/components/css/Roadmap.css b/src/shared/components/css/Roadmap.css new file mode 100644 index 0000000..36246ca --- /dev/null +++ b/src/shared/components/css/Roadmap.css @@ -0,0 +1,135 @@ +#timeline { + display: flex; + /* flex-direction: row; */ + column-gap: 12px; + background-color: #031625; + justify-content: space-between; +} + +#timeline:hover .tl-item { + width: 20%; +} + +.tl-item { + transform: translate3d(0, 0, 0); + position: relative; + width: auto; + height: 80vh; + color: #fff; + overflow: hidden; + transition: width 0.5s ease; +} + +.tl-item:before, +.tl-item:after { + transform: translate3d(0, 0, 0); + content: ""; + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; +} + +.tl-item:after { + background: rgba(6, 27, 43, 0.85); + opacity: 1; + transition: opacity 0.5s ease; +} + +.tl-item:before { + background: linear-gradient( + to bottom, + rgba(0, 0, 0, 0) 0%, + rgba(0, 0, 0, 1) 100% + ); + z-index: 1; + opacity: 0; + transform: translate3d(0, 0, 0) translateY(50%); + transition: opacity 0.5s ease, transform 0.5s ease; +} + +.tl-item:hover:after { + opacity: 0; +} + +.tl-item:hover:before { + opacity: 1; + transform: translate3d(0, 0, 0) translateY(0); + transition: opacity 1s ease, transform 1s ease 0.25s; +} + +.tl-item:hover .tl-content { + opacity: 1; + transform: translateY(0); + transition: all 0.75s ease 0.5s; +} +.tl-item:hover .tl-title { + top: 15%; + transition: all 0.75s ease 0.5s; +} +.tl-item:hover .tl-bg { + filter: grayscale(0); +} +.tl-title { + position: absolute; + top: 50%; + left: 50%; + transform: translateX(-50%) translateY(-50%); + z-index: 1; + border-top: 1px solid #fff; + border-bottom: 1px solid #fff; +} +.tl-content { + transform: translate3d(0, 0, 0) translateY(25px); + position: relative; + z-index: 1; + text-align: left; + margin: 0 8px; + top: 30%; + opacity: 0; +} +/* .tl-content p { + font-family: "Pathway Gothic One", Helvetica Neue, Helvetica, Arial, + sans-serif; + text-transform: uppercase; + color: #1779cf; + font-size: 1.44rem; + font-weight: normal; +} */ + +.tl-bg { + transform: translate3d(0, 0, 0); + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + background-size: cover; + background-position: center center; + transition: filter 0.5s ease; + filter: grayscale(100%); +} + +@media only screen and (max-width: 768px) { + #timeline { + width: 75%; + margin: 0 auto; + } + .tl-item:hover { + width: 100% !important; + } + #timeline:hover .tl-item { + width: 100%; + } + .tl-content li { + justify-content: left; + } + .tl-item:hover .tl-title { + top: 20%; + transition: all 0.75s ease 0.5s; + } + .tl-content { + top: 30%; + } +} diff --git a/src/shared/components/home/QnASection.tsx b/src/shared/components/home/QnASection.tsx index e2f788d..abad37a 100644 --- a/src/shared/components/home/QnASection.tsx +++ b/src/shared/components/home/QnASection.tsx @@ -8,127 +8,127 @@ import { VscDebugBreakpointLog, VscDiffAdded, } from "react-icons/vsc"; -import "../animated/QnASection.css"; +import "../css/QnASection.css"; type Props = {}; const QnASection = (props: Props) => { - const listQnA = [ - { - id: 1, - title: "What is Fight Out?", - bgcolor: "bg-[#CC99FF]", - contents: [ - { - id: 1, - content: - "Fight Out is changing the blueprint for metaverses. At its heart, Fight Out is a gaming platform that rewards users for competing and winning in a variety of contest modes. A player's ability to compete and how much they are rewarded is determined in part by their avatar’s attributes. Stats are increased through the Fight Out app by training in real -life.", - bgcolor: "bg-[#9999FF]", - }, - { - id: 2, - content: - "Fight Out is changing the blueprint for metaverses. At its heart, Fight Out is a gaming platform that rewards users for competing and winning in a variety of contest modes. A player's ability to compete and how much they are rewarded is determined in part by their avatar’s attributes. Stats are increased through the Fight Out app by training in real -life.", - bgcolor: "bg-[#6699FF]", - }, - { - id: 3, - content: - "Fight Out is changing the blueprint for metaverses. At its heart, Fight Out is a gaming platform that rewards users for competing and winning in a variety of contest modes. A player's ability to compete and how much they are rewarded is determined in part by their avatar’s attributes. Stats are increased through the Fight Out app by training in real -life.", - bgcolor: "bg-[#3399FF]", - }, - { - id: 4, - content: - "Fight Out is changing the blueprint for metaverses. At its heart, Fight Out is a gaming platform that rewards users for competing and winning in a variety of contest modes. A player's ability to compete and how much they are rewarded is determined in part by their avatar’s attributes. Stats are increased through the Fight Out app by training in real -life.", - bgcolor: "bg-[#0099FF]", - }, - ], - }, - { - id: 2, - title: "Abcd", - bgcolor: "bg-[#CC66FF]", + // const listQnA = [ + // { + // id: 1, + // title: "What is Fight Out?", + // bgcolor: "bg-[#CC99FF]", + // contents: [ + // { + // id: 1, + // content: + // "Fight Out is changing the blueprint for metaverses. At its heart, Fight Out is a gaming platform that rewards users for competing and winning in a variety of contest modes. A player's ability to compete and how much they are rewarded is determined in part by their avatar’s attributes. Stats are increased through the Fight Out app by training in real -life.", + // bgcolor: "bg-[#9999FF]", + // }, + // { + // id: 2, + // content: + // "Fight Out is changing the blueprint for metaverses. At its heart, Fight Out is a gaming platform that rewards users for competing and winning in a variety of contest modes. A player's ability to compete and how much they are rewarded is determined in part by their avatar’s attributes. Stats are increased through the Fight Out app by training in real -life.", + // bgcolor: "bg-[#6699FF]", + // }, + // { + // id: 3, + // content: + // "Fight Out is changing the blueprint for metaverses. At its heart, Fight Out is a gaming platform that rewards users for competing and winning in a variety of contest modes. A player's ability to compete and how much they are rewarded is determined in part by their avatar’s attributes. Stats are increased through the Fight Out app by training in real -life.", + // bgcolor: "bg-[#3399FF]", + // }, + // { + // id: 4, + // content: + // "Fight Out is changing the blueprint for metaverses. At its heart, Fight Out is a gaming platform that rewards users for competing and winning in a variety of contest modes. A player's ability to compete and how much they are rewarded is determined in part by their avatar’s attributes. Stats are increased through the Fight Out app by training in real -life.", + // bgcolor: "bg-[#0099FF]", + // }, + // ], + // }, + // { + // id: 2, + // title: "Abcd", + // bgcolor: "bg-[#CC66FF]", - contents: [ - { - id: 1, - bgcolor: "bg-[#9966FF]", - content: "ádasffjk12", - }, - { - id: 2, - bgcolor: "bg-[#6666FF]", - content: "ádasffj1k", - }, - { - id: 3, - bgcolor: "bg-[#3366FF]", - content: "ádasffj12k", - }, - { - id: 4, - bgcolor: "bg-[#0066FF]", - content: "ádasffj123k", - }, - ], - }, - { - id: 3, - title: "Abcd", - bgcolor: "bg-[#CC66FF]", + // contents: [ + // { + // id: 1, + // bgcolor: "bg-[#9966FF]", + // content: "ádasffjk12", + // }, + // { + // id: 2, + // bgcolor: "bg-[#6666FF]", + // content: "ádasffj1k", + // }, + // { + // id: 3, + // bgcolor: "bg-[#3366FF]", + // content: "ádasffj12k", + // }, + // { + // id: 4, + // bgcolor: "bg-[#0066FF]", + // content: "ádasffj123k", + // }, + // ], + // }, + // { + // id: 3, + // title: "Abcd", + // bgcolor: "bg-[#CC66FF]", - contents: [ - { - id: 1, - bgcolor: "bg-[#9966FF]", - content: "ádasffjk12", - }, - { - id: 2, - bgcolor: "bg-[#6666FF]", - content: "ádasffj1k", - }, - { - id: 3, - bgcolor: "bg-[#3366FF]", - content: "ádasffj12k", - }, - { - id: 4, - bgcolor: "bg-[#0066FF]", - content: "ádasffj123k", - }, - ], - }, - { - id: 4, - title: "Abcd", - bgcolor: "bg-[#CC66FF]", + // contents: [ + // { + // id: 1, + // bgcolor: "bg-[#9966FF]", + // content: "ádasffjk12", + // }, + // { + // id: 2, + // bgcolor: "bg-[#6666FF]", + // content: "ádasffj1k", + // }, + // { + // id: 3, + // bgcolor: "bg-[#3366FF]", + // content: "ádasffj12k", + // }, + // { + // id: 4, + // bgcolor: "bg-[#0066FF]", + // content: "ádasffj123k", + // }, + // ], + // }, + // { + // id: 4, + // title: "Abcd", + // bgcolor: "bg-[#CC66FF]", - contents: [ - { - id: 1, - bgcolor: "bg-[#9966FF]", - content: "ádasffjk12", - }, - { - id: 2, - bgcolor: "bg-[#6666FF]", - content: "ádasffj1k", - }, - { - id: 3, - bgcolor: "bg-[#3366FF]", - content: "ádasffj12k", - }, - { - id: 4, - bgcolor: "bg-[#0066FF]", - content: "ádasffj123k", - }, - ], - }, - ]; + // contents: [ + // { + // id: 1, + // bgcolor: "bg-[#9966FF]", + // content: "ádasffjk12", + // }, + // { + // id: 2, + // bgcolor: "bg-[#6666FF]", + // content: "ádasffj1k", + // }, + // { + // id: 3, + // bgcolor: "bg-[#3366FF]", + // content: "ádasffj12k", + // }, + // { + // id: 4, + // bgcolor: "bg-[#0066FF]", + // content: "ádasffj123k", + // }, + // ], + // }, + // ]; const { t } = useTranslation("qna"); const [qnaData, setQnaData] = useState([]); const showListItem = (id: string, iconDropDown: string) => { diff --git a/src/shared/components/home/RoadMap.tsx b/src/shared/components/home/RoadMap.tsx index 08a82ef..a9b30c4 100644 --- a/src/shared/components/home/RoadMap.tsx +++ b/src/shared/components/home/RoadMap.tsx @@ -2,7 +2,7 @@ import { useSpring, animated } from "@react-spring/web"; import React, { useEffect, useRef, useState } from "react"; import { VscDebugBreakpointLog } from "react-icons/vsc"; import { useTranslation } from "react-i18next"; - +import "../css/Roadmap.css"; type Props = {}; const roadMapData = [ @@ -109,45 +109,42 @@ const RoadMap = (props: Props) => { return (
-

Road Map

{/*
*/} - + + {/* */} {roadMapData.map((item: any, index: any) => { return ( -
-
-

- {item.phase} -

-
    +
    +
    +

    {item.phase}

    +
      {item.listTitle.map((listItem: any, index: any) => { return ( -
    1. +
    2. -

      {listItem}

      +

      {listItem}

      3. ); })} diff --git a/tailwind.config.cjs b/tailwind.config.cjs index 4549a87..3f6f5e5 100644 --- a/tailwind.config.cjs +++ b/tailwind.config.cjs @@ -22,4 +22,5 @@ module.exports = { autoprefixer: {}, }, ], + mode: "jit", };