tuanbt
/
SGPT
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

animation roadmap

Browse Source
main
Thuong_e 2 years ago
parent 9fbee934fc
commit 4af03a9e71
5 changed files with 273 additions and 140 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 0
      src/shared/components/css/QnASection.css
  2. 135
      src/shared/components/css/Roadmap.css
  3. 230
      src/shared/components/home/QnASection.tsx
  4. 47
      src/shared/components/home/RoadMap.tsx
  5. 1
      tailwind.config.cjs

0
src/shared/components/animated/QnASection.css → src/shared/components/css/QnASection.css
Unescape View File

135
src/shared/components/css/Roadmap.css
Unescape View File

@ -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%;
}
}

230
src/shared/components/home/QnASection.tsx
Unescape View File

@ -8,127 +8,127 @@ import {
VscDebugBreakpointLog, VscDebugBreakpointLog,
VscDiffAdded, VscDiffAdded,
} from "react-icons/vsc"; } from "react-icons/vsc";
import "../animated/QnASection.css"; import "../css/QnASection.css";
type Props = {}; type Props = {};
const QnASection = (props: Props) => { const QnASection = (props: Props) => {
const listQnA = [ // const listQnA = [
{ // {
id: 1, // id: 1,
title: "What is Fight Out?", // title: "What is Fight Out?",
bgcolor: "bg-[#CC99FF]", // bgcolor: "bg-[#CC99FF]",
contents: [ // contents: [
{ // {
id: 1, // id: 1,
content: // 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.", // "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]", // bgcolor: "bg-[#9999FF]",
}, // },
{ // {
id: 2, // id: 2,
content: // 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.", // "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]", // bgcolor: "bg-[#6699FF]",
}, // },
{ // {
id: 3, // id: 3,
content: // 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.", // "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]", // bgcolor: "bg-[#3399FF]",
}, // },
{ // {
id: 4, // id: 4,
content: // 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.", // "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]", // bgcolor: "bg-[#0099FF]",
}, // },
], // ],
}, // },
{ // {
id: 2, // id: 2,
title: "Abcd", // title: "Abcd",
bgcolor: "bg-[#CC66FF]", // bgcolor: "bg-[#CC66FF]",
contents: [ // contents: [
{ // {
id: 1, // id: 1,
bgcolor: "bg-[#9966FF]", // bgcolor: "bg-[#9966FF]",
content: "ádasffjk12", // content: "ádasffjk12",
}, // },
{ // {
id: 2, // id: 2,
bgcolor: "bg-[#6666FF]", // bgcolor: "bg-[#6666FF]",
content: "ádasffj1k", // content: "ádasffj1k",
}, // },
{ // {
id: 3, // id: 3,
bgcolor: "bg-[#3366FF]", // bgcolor: "bg-[#3366FF]",
content: "ádasffj12k", // content: "ádasffj12k",
}, // },
{ // {
id: 4, // id: 4,
bgcolor: "bg-[#0066FF]", // bgcolor: "bg-[#0066FF]",
content: "ádasffj123k", // content: "ádasffj123k",
}, // },
], // ],
}, // },
{ // {
id: 3, // id: 3,
title: "Abcd", // title: "Abcd",
bgcolor: "bg-[#CC66FF]", // bgcolor: "bg-[#CC66FF]",
contents: [ // contents: [
{ // {
id: 1, // id: 1,
bgcolor: "bg-[#9966FF]", // bgcolor: "bg-[#9966FF]",
content: "ádasffjk12", // content: "ádasffjk12",
}, // },
{ // {
id: 2, // id: 2,
bgcolor: "bg-[#6666FF]", // bgcolor: "bg-[#6666FF]",
content: "ádasffj1k", // content: "ádasffj1k",
}, // },
{ // {
id: 3, // id: 3,
bgcolor: "bg-[#3366FF]", // bgcolor: "bg-[#3366FF]",
content: "ádasffj12k", // content: "ádasffj12k",
}, // },
{ // {
id: 4, // id: 4,
bgcolor: "bg-[#0066FF]", // bgcolor: "bg-[#0066FF]",
content: "ádasffj123k", // content: "ádasffj123k",
}, // },
], // ],
}, // },
{ // {
id: 4, // id: 4,
title: "Abcd", // title: "Abcd",
bgcolor: "bg-[#CC66FF]", // bgcolor: "bg-[#CC66FF]",
contents: [ // contents: [
{ // {
id: 1, // id: 1,
bgcolor: "bg-[#9966FF]", // bgcolor: "bg-[#9966FF]",
content: "ádasffjk12", // content: "ádasffjk12",
}, // },
{ // {
id: 2, // id: 2,
bgcolor: "bg-[#6666FF]", // bgcolor: "bg-[#6666FF]",
content: "ádasffj1k", // content: "ádasffj1k",
}, // },
{ // {
id: 3, // id: 3,
bgcolor: "bg-[#3366FF]", // bgcolor: "bg-[#3366FF]",
content: "ádasffj12k", // content: "ádasffj12k",
}, // },
{ // {
id: 4, // id: 4,
bgcolor: "bg-[#0066FF]", // bgcolor: "bg-[#0066FF]",
content: "ádasffj123k", // content: "ádasffj123k",
}, // },
], // ],
}, // },
]; // ];
const { t } = useTranslation("qna"); const { t } = useTranslation("qna");
const [qnaData, setQnaData] = useState([]); const [qnaData, setQnaData] = useState([]);
const showListItem = (id: string, iconDropDown: string) => { const showListItem = (id: string, iconDropDown: string) => {

47
src/shared/components/home/RoadMap.tsx
Unescape View File

@ -2,7 +2,7 @@ import { useSpring, animated } from "@react-spring/web";
import React, { useEffect, useRef, useState } from "react"; import React, { useEffect, useRef, useState } from "react";
import { VscDebugBreakpointLog } from "react-icons/vsc"; import { VscDebugBreakpointLog } from "react-icons/vsc";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import "../css/Roadmap.css";
type Props = {}; type Props = {};
const roadMapData = [ const roadMapData = [
@ -109,45 +109,42 @@ const RoadMap = (props: Props) => {
return ( return (
<div <div
className="container mx-auto text-white md:min-h-[60vh] animate-on-scroll my-20 relative" className="container mx-auto text-white md:min-h-[60vh] animate-on-scroll my-20"
id="roadmap" id="roadmap"
> >
<animated.div
style={{ ...styles1 }}
className="absolute top-[10%] rounded-lg left-[50%] translate-x-[50%] w-2 h-[80%] lg:h-[85%] bg-gradient-to-b from-violet-500 to-fuchsia-500"
></animated.div>
<h1 className="text-4xl font-bold text-center hover:text-orange-400 pb-20 relative"> <h1 className="text-4xl font-bold text-center hover:text-orange-400 pb-20 relative">
Road Map Road Map
</h1> </h1>
{/* <div className="flex flex-col lg:flex-row gap-10 mt-20 justify-center px-10 lg:px-0"> */} {/* <div className="flex flex-col lg:flex-row gap-10 mt-20 justify-center px-10 lg:px-0"> */}
<animated.div style={{ ...styles }} className="px-3 "> <animated.div
style={{ ...styles }}
className="w-full flex sm:flex-col sm:gap-y-4 md:flex-row"
id="timeline"
>
{/* <animated.div
style={{ ...styles1 }}
className="absolute rounded-lg left-[50%] translate-x-[50%] w-2 h-[100%] bg-gradient-to-b from-violet-500 to-fuchsia-500"
></animated.div> */}
{roadMapData.map((item: any, index: any) => { {roadMapData.map((item: any, index: any) => {
return ( return (
<div <div key={index} className="tl-item md:hover:w-[40%!important]">
key={index} <div
className="relative w-full sm:w-3/4 md:w-4/5 sm:mx-auto [&:first-child]:top-[-30px] [&:first-child]:mb-[30px] mb-[60px] className="tl-bg"
lg:m-0 lg:w-[40%] lg:[&:first-child]:top-[0px] lg:[&:nth-child(even)>div]:left-0 lg:[&:nth-child(even)>div]:bg-gradient-to-t style={{
lg:[&:nth-child(odd)]:float-left lg:[&:nth-child(odd)]:clear-right lg:[&:nth-child(odd)]:left-20 backgroundImage: `url("https://placeimg.com/802/802/nature")`,
lg:[&:nth-child(even)]:float-right lg:[&:nth-child(even)]:clear-left lg:[&:nth-child(even)]:right-[4.5rem] }}
roadmapphase bg-white text-black rounded-lg" ></div>
> <h4 className="tl-title">{item.phase}</h4>
<div className="hidden lg:block absolute lg:right-0 h-[100%] w-[8px] bg-gradient-to-b to-violet-500 from-fuchsia-500"></div> <ol className="tl-content flex flex-col gap-y-[12px]">
<h4 className="timeline-title p-4 lg:pl-8 text-[28px] text-[#6a06ec] font-medium">
{item.phase}
</h4>
<ol className="flex flex-col gap-2">
{item.listTitle.map((listItem: any, index: any) => { {item.listTitle.map((listItem: any, index: any) => {
return ( return (
<li <li key={index} className="flex items-center gap-x-[20px]">
key={index}
className="flex items-center gap-3 p-4 lg:pl-8 text-lg"
>
<VscDebugBreakpointLog <VscDebugBreakpointLog
style={{ style={{
color: "#B051F2", color: "#B051F2",
}} }}
/> />
<p className="font-medium font-body">{listItem}</p> <p>{listItem}</p>
</li> </li>
); );
})} })}

1
tailwind.config.cjs
Unescape View File

@ -22,4 +22,5 @@ module.exports = {
autoprefixer: {}, autoprefixer: {},
}, },
], ],
mode: "jit",
}; };

Write Preview
Loading…
Cancel
Save