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

fix responsive & animation

Browse Source
main
Thuong_e 2 years ago
parent 11cb40299e
commit f676a7b1ac
21 changed files with 199 additions and 147 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. 33
      package-lock.json
  2. 2
      package.json
  3. 22
      src/i18n/en/home/roadmap.json
  4. 38
      src/i18n/vi/home/qna.json
  5. 44
      src/index.css
  6. 2
      src/shared/components/Footer.tsx
  7. 14
      src/shared/components/Header.tsx
  8. 2
      src/shared/components/backtotop/index.tsx
  9. 15
      src/shared/components/css/QnASection.css
  10. 10
      src/shared/components/css/Roadmap.css
  11. 6
      src/shared/components/healthcare/ApproachSection.tsx
  12. 2
      src/shared/components/healthcare/Competitions.tsx
  13. 18
      src/shared/components/healthcare/CustomerInsight.tsx
  14. 8
      src/shared/components/healthcare/FirstSection.tsx
  15. 14
      src/shared/components/healthcare/ProblemsSection.tsx
  16. 53
      src/shared/components/healthcare/SolutionsOfProduct​.tsx
  17. 4
      src/shared/components/home/AboutSection.tsx
  18. 4
      src/shared/components/home/FirstSection.tsx
  19. 8
      src/shared/components/home/QnASection.tsx
  20. 11
      src/shared/components/home/RoadMap.tsx
  21. 2
      src/shared/components/home/TokenomicsSection.tsx

33
package-lock.json generated
Unescape View File

@ -11,6 +11,7 @@
"@react-spring/parallax": "^9.7.1",
"@react-spring/web": "^9.7.1",
"animate.css": "^4.1.1",
"aos": "^2.3.4",
"chart.js": "^3.9.1",
"chartjs-plugin-datalabels": "^2.2.0",
"i18next": "^22.4.14",
@ -30,6 +31,7 @@
"sort-by": "^0.0.2"
},
"devDependencies": {
"@types/aos": "^3.0.4",
"@types/react": "^18.0.27",
"@types/react-copy-to-clipboard": "^5.0.4",
"@types/react-dom": "^18.0.10",
@ -607,6 +609,12 @@
"node": ">=14"
}
},
"node_modules/@types/aos": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/@types/aos/-/aos-3.0.4.tgz",
"integrity": "sha512-mna6Jd6bdK1NpwarLopGvXOgUoCfj0470IwLxuVOFDElTGI0JTd7xSGQ0AjbAEnHErC/b3fA9t2uB3IXVKmckA==",
"dev": true
},
"node_modules/@types/d3-array": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.0.4.tgz",
@ -790,6 +798,16 @@
"node": ">= 8"
}
},
"node_modules/aos": {
"version": "2.3.4",
"resolved": "https://registry.npmjs.org/aos/-/aos-2.3.4.tgz",
"integrity": "sha512-zh/ahtR2yME4I51z8IttIt4lC1Nw0ktsFtmeDzID1m9naJnWXhCoARaCgNOGXb5CLy3zm+wqmRAEgMYB5E2HUw==",
"dependencies": {
"classlist-polyfill": "^1.0.3",
"lodash.debounce": "^4.0.6",
"lodash.throttle": "^4.0.1"
}
},
"node_modules/arg": {
"version": "5.0.2",
"resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
@ -963,6 +981,11 @@
"node": ">= 6"
}
},
"node_modules/classlist-polyfill": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/classlist-polyfill/-/classlist-polyfill-1.2.0.tgz",
"integrity": "sha512-GzIjNdcEtH4ieA2S8NmrSxv7DfEV5fmixQeyTmqmRmRJPGpRBaSnA2a0VrCjyT8iW8JjEdMbKzDotAJf+ajgaQ=="
},
"node_modules/classnames": {
"version": "2.3.2",
"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
@ -1474,6 +1497,16 @@
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
},
"node_modules/lodash.debounce": {
"version": "4.0.8",
"resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
"integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="
},
"node_modules/lodash.throttle": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
"integrity": "sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ=="
},
"node_modules/loose-envify": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",

2
package.json
Unescape View File

@ -12,6 +12,7 @@
"@react-spring/parallax": "^9.7.1",
"@react-spring/web": "^9.7.1",
"animate.css": "^4.1.1",
"aos": "^2.3.4",
"chart.js": "^3.9.1",
"chartjs-plugin-datalabels": "^2.2.0",
"i18next": "^22.4.14",
@ -31,6 +32,7 @@
"sort-by": "^0.0.2"
},
"devDependencies": {
"@types/aos": "^3.0.4",
"@types/react": "^18.0.27",
"@types/react-copy-to-clipboard": "^5.0.4",
"@types/react-dom": "^18.0.10",

22
src/i18n/en/home/roadmap.json
Unescape View File

@ -30,28 +30,6 @@
"10 Million MarketCap Milestone",
"CEOAI Bot Creator and integration with AI."
]
},
{
"phase": "Phase 4",
"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 5",
"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."
]
}
]
}

38
src/i18n/vi/home/qna.json
Unescape View File

@ -46,44 +46,6 @@
"id": 2,
"bgcolor": "bg-[#6666FF]",
"content": "SGPT Token cũng sẽ được sử dụng để thưởng cho các thành viên có đóng góp tích cực cho hệ thống."
},
{
"id": 3,
"bgcolor": "bg-[#3366FF]",
"content": "ádasffj12k"
},
{
"id": 4,
"bgcolor": "bg-[#0066FF]",
"content": "ádasffj123k"
}
]
},
{
"id": 4,
"title": "Điều gì tiếp theo cho Fight Out?",
"bgcolor": "bg-[#CC66FF]",
"contents": [
{
"id": 1,
"bgcolor": "bg-[#9966FF]",
"content": "Chúng tôi có kế hoạch lớn cho Fight Out sau khi bán trước! Phát triển nền tảng Fight Out và metaverse, đồng thời tiếp tục giới thiệu các đại sứ Fight Out cho các chương trình đào tạo riêng đều được nêu trong báo cáo chính thức của chúng tôi."
},
{
"id": 2,
"bgcolor": "bg-[#6666FF]",
"content": "Chúng tôi có kế hoạch lớn cho Fight Out sau khi bán trước! Phát triển nền tảng Fight Out và metaverse, đồng thời tiếp tục giới thiệu các đại sứ Fight Out cho các chương trình đào tạo riêng đều được nêu trong báo cáo chính thức của chúng tôi."
},
{
"id": 3,
"bgcolor": "bg-[#3366FF]",
"content": "Chúng tôi có kế hoạch lớn cho Fight Out sau khi bán trước! Phát triển nền tảng Fight Out và metaverse, đồng thời tiếp tục giới thiệu các đại sứ Fight Out cho các chương trình đào tạo riêng đều được nêu trong báo cáo chính thức của chúng tôi."
},
{
"id": 4,
"bgcolor": "bg-[#0066FF]",
"content": "Chúng tôi có kế hoạch lớn cho Fight Out sau khi bán trước! Phát triển nền tảng Fight Out và metaverse, đồng thời tiếp tục giới thiệu các đại sứ Fight Out cho các chương trình đào tạo riêng đều được nêu trong báo cáo chính thức của chúng tôi."
}
]
}

44
src/index.css
Unescape View File

@ -60,36 +60,48 @@ html {
}
}
/* .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;
transition: all 0.3s ease-in-out;
}
.back-to-top.visible {
opacity: 1;
}
/* .animation__showLine {
animation: showline 2s linear;
}
@keyframes showline {
0% {
max-height: 0;
opacity: 0;
}
100% {
opacity: 1;
max-height: 100vh;
}
} */
[data-aos="animation__showLine"] {
opacity: 0;
max-height: 0px;
transition-property: max-height, opacity;
}
[data-aos="animation__showLine"].aos-animate {
opacity: 1;
max-height: 100vh;
}
@keyframes TopToBottom {
0% {
transform: translate(50%, -20px);

2
src/shared/components/Footer.tsx
Unescape View File

@ -4,7 +4,7 @@ type Props = {};
const Footer = (props: Props) => {
return (
<div className="container mx-auto md: px-4 flex flex-col gap-4 items-center md:flex-row justify-between text-white py-12">
<div className="container xl:w-[90%] mx-auto md: px-4 flex flex-col gap-4 items-center md:flex-row justify-between text-white py-12">
<div className="md:w-1/4 flex gap-2 items-center">
<div className="bg-white rounded-full overflow-hidden p-1">
<img

14
src/shared/components/Header.tsx
Unescape View File

@ -94,7 +94,7 @@ const Header = (props: Props) => {
<>
{isScrolled ? (
<div className="fixed w-full z-30 p-4 transition-all duration-150 bg-gray-800">
<div className="container md:gap-2 mx-auto flex justify-between items-center ">
<div className="container md:gap-2 mx-auto flex justify-between items-center xl:w-[90%] ">
<div
className="flex gap-2 items-center cursor-pointer hover:text-orange-400"
onClick={() => backToHome()}
@ -125,7 +125,7 @@ const Header = (props: Props) => {
) : (
<>
<div className="flex lg:gap-4 gap-10 items-center">
<ul className="flex lg:gap-4 ">
<ul className="flex lg:gap-8 ">
{menuItems.map((item) => (
<HashLink
to={`${item.path}#${item.id}`}
@ -144,7 +144,7 @@ const Header = (props: Props) => {
))}
<li className="inline-block group relative">
<p className="text-white text-md transition-all duration-150 cursor-pointer transform motion-safe:group-hover:scale-110 group-hover:text-orange-500">
SGPT Products{" "}
SGPT Products
</p>
<div className=" h-10 w-[140px] absolute top-3"></div>
<ul className="hidden group-hover:flex animate-show-list-language absolute top-10 left-[-8px] flex-col gap-y-4 pt-2 bg-slate-800 w-[200px] min-h-[50px] rounded">
@ -171,7 +171,7 @@ const Header = (props: Props) => {
{currentLanguage}
</span>
<div className=" h-10 w-[140px] absolute top-3"></div>
<ul className="hidden group-hover:flex animate-show-list-language absolute top-10 flex-col gap-y-4 bg-slate-800 w-[120px] rounded">
<ul className="hidden group-hover:flex animate-show-list-language absolute top-10 flex-col gap-y-4 bg-slate-800 w-[120px] rounded z-10">
{languages.map((lng, index) => (
<>
<li
@ -187,7 +187,7 @@ const Header = (props: Props) => {
</ul>
</div>
</ul>
<div className="flex gap-4">
<div className="flex gap-4 z-20">
<Button size="sm" onClick={() => openLocalPdf()}>
<div className="flex items-center gap-2 shadow-slate-50 transition-all transform motion-safe:hover:scale-110">
<BsNewspaper />
@ -300,7 +300,7 @@ const Header = (props: Props) => {
</div>
) : (
<div className="fixed z-30 w-full p-5 transition-all duration-150">
<div className="container mx-auto flex justify-between items-center">
<div className="container mx-auto flex justify-between items-center xl:w-[90%]">
<div className="flex gap-2 items-center">
<div className="bg-white w-12 rounded-full overflow-hidden p-1">
<img
@ -356,7 +356,7 @@ const Header = (props: Props) => {
{currentLanguage}
</span>
<div className=" h-9 w-[140px] absolute top-3"></div>
<ul className="hidden group-hover:flex animate-show-list-language absolute top-10 flex-col gap-y-4 ">
<ul className="hidden group-hover:flex animate-show-list-language absolute top-10 flex-col gap-y-4 lg:w-[120px] lg:pb-[12px] z-10 ">
{languages.map((lng, index) => (
<>
<li

2
src/shared/components/backtotop/index.tsx
Unescape View File

@ -32,7 +32,7 @@ const BackToTopButton = () => {
return (
<div
className={`bg-orange-500 back-to-top ${
className={`bg-orange-500 back-to-top hover:scale-[1.1] transition-all duration-1000 ease-in-out right-0 md:right-[20px] bottom-[10px] md:bottom-[20px] w-[40px] h-[40px] sm:w-[60px] sm:h-[60px] ${
isVisible ? "visible" : ""
} group relative m-12 flex justify-center z-[1000]`}
onClick={scrollToTop}

15
src/shared/components/css/QnASection.css
Unescape View File

@ -1,17 +1,26 @@
.iconDropDown {
transform: rotate(0deg);
transition: transform 2.5s;
/* transition: transform 2.5s; */
}
.iconDropUp {
transform: rotate(180deg);
transition: transform 1s;
/* transition: transform 1s; */
}
.listItem__QnA {
max-height: 0;
overflow: hidden;
transition: all 1.5s ease-in-out;
/* transition: all 1s ease-in; */
}
.listItem__QnA-active {
max-height: 150vh;
}
.transitionHoverArrow {
transition-property: font-size;
transition-duration: 300ms;
}
.transitionArrowUpAndDown {
transition-property: rotate;
transition-duration: 3000ms;
}

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

@ -6,14 +6,14 @@
}
#timeline:hover .tl-item {
width: 20%;
/* width: 25%; */
}
.tl-item {
width: 100%;
transform: translate3d(0, 0, 0);
position: relative;
height: 80vh;
height: 70vh;
color: #fff;
overflow: hidden;
transition: width 0.5s ease;
@ -61,11 +61,11 @@
.tl-item:hover .tl-content {
opacity: 1;
transform: translateY(0);
transition: all 0.75s ease 0.5s;
transition: all 0.5s ease 0.5s;
}
.tl-item:hover .tl-title {
top: 15%;
transition: all 0.75s ease 0.5s;
transition: all 0.5s ease 0.5s;
}
.tl-item:hover .tl-bg {
filter: grayscale(0);
@ -112,7 +112,7 @@
@media only screen and (max-width: 768px) {
#timeline {
width: 75%;
width: 85%;
margin: 0 auto;
}
.tl-item:hover {

6
src/shared/components/healthcare/ApproachSection.tsx
Unescape View File

@ -65,7 +65,7 @@ const Approach = () => {
}, [t]);
return (
<div
className="container mx-auto text-black md:min-h-[100vh] animate-on-scroll my-20 relative"
className="container lg:w-[94%] mx-auto text-black md:min-h-[100vh] animate-on-scroll my-20 relative"
id="appRoach"
>
<h1 className="text-4xl font-bold text-center pb-20 ">The Approach​ ​</h1>
@ -73,9 +73,11 @@ const Approach = () => {
{appRoachData.map((item: any) => {
return (
<div
data-aos="zoom-in"
data-aos-duration="500"
className="flex flex-col shadow-[0_0px_8px_2px_rgba(0,0,0,0.1)]
hover:shadow-[0_0px_16px_4px_rgba(0,0,0,0.3)]
transition-all duration-500 ease-in-out group w-[60%] p-4 rounded-lg md:w-[30%] md:min-h-[360px] lg:w-[25%] "
transition-all duration-500 group w-[60%] p-4 rounded-lg md:w-[30%] md:min-h-[360px] lg:w-[25%] "
>
<div className=" transition-all duration-500 ease-in-out md flex flex-col gap-y-4">
<p className=" text-2xl text-center" key={item.title}>

2
src/shared/components/healthcare/Competitions.tsx
Unescape View File

@ -4,7 +4,7 @@ const Competitions = () => {
return (
<div
id="competitions"
className="container mx-auto text-black md:min-h-[100vh] animate-on-scroll my-20 relative"
className="container w-[94%] mx-auto text-black md:min-h-[100vh] animate-on-scroll my-20 relative"
>
<h1 className="text-4xl font-bold text-center pb-20 ">Competitions</h1>
<div className="w-[330px] h-[220px] md:w-[600px] md:h-[400px] lg:w-[800px] lg:h-[500px] border-l-2 border-b-2 border-black mx-auto relative md:absolute md:top-[50%] md:translate-y-[-50%] md:left-[50%] md:translate-x-[-50%] ">

18
src/shared/components/healthcare/CustomerInsight.tsx
Unescape View File

@ -1,9 +1,11 @@
import React from "react";
import React, { useEffect } from "react";
import { BiSearchAlt } from "react-icons/bi";
import { TbFileDislike, TbFileLike } from "react-icons/tb";
import { AiOutlineMessage } from "react-icons/ai";
import customerInsight from "../../../assets/images/image22.png";
import Aos from "aos";
import "aos/dist/aos.css";
import { useTranslation } from "react-i18next";
import customerInsight from "../../../assets/images/image22.png";
const listInsight = [
{
@ -24,16 +26,24 @@ const listInsight = [
},
];
const CustomerInsight = () => {
useEffect(() => {
Aos.init();
}, []);
const { t } = useTranslation("customerInsightHealthCare");
return (
<div
className="container mx-auto text-black md:min-h-[60vh] animate-on-scroll py-20 bg-slate-200 rounded-lg"
className="w-full text-black md:min-h-[60vh] animate-on-scroll py-20 bg-slate-200 rounded-lg"
id="customerInsight"
>
<h1 className="text-4xl font-bold text-center pb-20 relative">
{t("title")}​
</h1>
<div className="flex flex-wrap gap-y-10 sm:flex-row sm:items-start justify-around sm:gap-y-4 min-h-[50vh] relative ">
<div
data-aos="fade-up"
data-aos-easing="ease-out-cubic"
data-aos-duration="500"
className="container w-[94%] mx-auto flex flex-wrap gap-y-10 sm:flex-row sm:items-start justify-around sm:gap-y-4 min-h-[50vh] relative "
>
<div className="hidden md:block absolute left-[50%] translate-x-[-50%] top-[50%] translate-y-[-50%] border w-[150px] h-[150px] md:w-[200px] md:h-[200px] lg:w-[300px] lg:h-[300px] bg-white rounded-[50%] overflow-hidden">
<div className="absolute top-[0%] left-[0%] w-[75px] h-[75px] md:w-[100px] md:h-[100px] lg:w-[150px] lg:h-[150px] border-r-[1.5px] border-b-[1.5px] border-slate-400 group ">
<BiSearchAlt className="text-black absolute top-[50%] left-[50%] text-[16px] md:text-[20px] lg:text-[24px] group-hover:text-orange-500 motion-safe:group-hover:scale-110" />

8
src/shared/components/healthcare/FirstSection.tsx
Unescape View File

@ -5,11 +5,10 @@ const FirstSection = () => {
return (
<div
id="firstSection"
className="flex items-center justify-around min-h-[100vh] bg-gradient-to-r from-cyan-500 to-blue-500"
className=" flex items-center min-h-[100vh] bg-gradient-to-r from-cyan-500 to-blue-500"
>
<h1 className="pl-12 text-white text-5xl font-bold">
SGPT for Healthcare
</h1>
<div className="container w-[94%] flex justify-between mx-auto">
<h1 className="text-white text-5xl font-bold">SGPT for Healthcare</h1>
<div className=" lg:h-full lg:w-1/5 hidden lg:flex justify-center items-center relative">
<img
src={robotImage2}
@ -27,6 +26,7 @@ const FirstSection = () => {
<div className="absolute w-10 aspect-square bg-[radial-gradient(ellipse_at_bottom,_var(--tw-gradient-stops))] from-sky-400 to-indigo-900 blur-sm rounded-full bottom-56 right-10"></div>
</div>
</div>
</div>
);
};

14
src/shared/components/healthcare/ProblemsSection.tsx
Unescape View File

@ -2,7 +2,8 @@ import React, { useState, useEffect } from "react";
import { HiOutlineUserGroup } from "react-icons/hi";
import { TbReportSearch } from "react-icons/tb";
import { useTranslation } from "react-i18next";
import Aos from "aos";
import "aos/dist/aos.css";
import userBehavior from "../../../assets/images/icon-user-behavior.png";
import userInformation from "../../../assets/images/image20.png";
import userInteraction from "../../../assets/images/image21.png";
@ -26,6 +27,9 @@ const listProblems = [
},
];
const ProblemsSection = () => {
useEffect(() => {
Aos.init();
}, []);
const { t } = useTranslation("problemsSectionHealthCare");
const [problemsSectionData, setProblemsSectionData] = useState([]);
useEffect(() => {
@ -33,7 +37,7 @@ const ProblemsSection = () => {
}, [t]);
return (
<div
className="container mx-auto text-black md:min-h-[80vh] animate-on-scroll my-20 relative"
className="container w-[94%] mx-auto text-black md:min-h-[80vh] animate-on-scroll my-20 relative"
id="problems"
>
<h1 className="text-4xl font-bold text-center pb-20 relative">
@ -50,7 +54,11 @@ const ProblemsSection = () => {
return (
<>
<p className="line-problems first:hidden my-auto w-[2px] h-[150px] bg-slate-400"></p>
<div className="flex h-full justify-around [&>*:first-child]:items-center flex-1 ">
<div
data-aos="flip-left"
data-aos-duration="500"
className="flex h-full justify-around [&>*:first-child]:items-center flex-1 "
>
<div className="relative flex flex-col items-center gap-y-4 flex:1 text-black p-8 rounded-lg">
<div className="flex flex-col gap-y-2 items-center">
<img className="w-[44px] h-[44px] " src={item.src} alt="" />

53
src/shared/components/healthcare/SolutionsOfProduct​.tsx
Unescape View File

@ -1,12 +1,14 @@
import React from "react";
import React, { useEffect } from "react";
import { BiSearchAlt } from "react-icons/bi";
import { useTranslation } from "react-i18next";
import { TbFileDislike, TbFileLike } from "react-icons/tb";
import { AiOutlineMessage } from "react-icons/ai";
import customerInsight from "../../../assets/images/image22.png";
import { BsDatabaseCheck } from "react-icons/bs";
import { RiCodeSSlashLine, RiSettings4Line } from "react-icons/ri";
import Aos from "aos";
import "aos/dist/aos.css";
import customerInsight from "../../../assets/images/image22.png";
// import "../../../index.css";
const listSolutions = [
{
title: "DATA",
@ -30,17 +32,24 @@ const listSolutions = [
},
];
const SolutionsOfProduct = () => {
useEffect(() => {
Aos.init();
}, []);
const { t } = useTranslation("solutionsOfProductHealthCare");
return (
<div
className="container mx-auto text-black md:min-h-[60vh] animate-on-scroll py-20 bg-slate-200 rounded-lg px-10"
className="w-full text-black md:min-h-[60vh] animate-on-scroll py-20 bg-slate-200 rounded-lg px-10"
id="solutionsOfProduct"
>
<h1 className="text-4xl font-bold text-center pb-20 relative">
The Solutions of Product​
</h1>
<div className="flex flex-col gap-y-10 w-[100%] md:w-[60%] h-full">
<div className="flex items-center w-full gap-x-8">
<div className="container w-[94%] mx-auto flex flex-col gap-y-10 h-full">
<div
data-aos="fade-left"
data-aos-duration="1000"
className="flex items-center w-full gap-x-8"
>
<div className="w-[80px] bg-black flex h-[80px] rounded-[50%] justify-center items-center group">
<BsDatabaseCheck
className="text-white text-[32px] group-hover:rotateY transition-all
@ -55,8 +64,20 @@ const SolutionsOfProduct = () => {
</ul>
</div>
</div>
<div className="w-[2px] h-[40px] ml-[40px] bg-black"></div>
<div className="flex items-center w-full gap-x-8">
<div
data-aos="animation__showLine"
data-aos-duration="1500"
data-aos-easing="ease-in-out"
data-aos-delay="100"
className="w-[2px] h-[40px] ml-[40px] bg-black"
></div>
<div
data-aos="fade-left"
data-aos-duration="1000"
data-aos-easing="ease-in-out"
data-aos-delay="300"
className="flex items-center w-full gap-x-8"
>
<div className="w-[80px] bg-black flex h-[80px] rounded-[50%] justify-center items-center group">
<RiCodeSSlashLine
className="text-white text-[32px] group-hover:rotateY transition-all
@ -70,9 +91,21 @@ const SolutionsOfProduct = () => {
</ul>
</div>
</div>
<div className="w-[2px] h-[40px] ml-[40px] bg-black"></div>
<div
data-aos="animation__showLine"
data-aos-duration="1500"
data-aos-easing="ease-in-out"
data-aos-delay="100"
className="w-[2px] h-[40px] ml-[40px] bg-black overflow-hidden"
></div>
<div className="flex items-center w-full gap-x-8">
<div
data-aos="fade-left"
data-aos-duration="1000"
data-aos-easing="ease-in-out"
data-aos-delay="300"
className="flex items-center w-full gap-x-8"
>
<div className="w-[80px] bg-black flex h-[80px] rounded-[50%] justify-center items-center group">
<RiSettings4Line
className="text-white text-[32px] group-hover:rotateY transition-all

4
src/shared/components/home/AboutSection.tsx
Unescape View File

@ -16,13 +16,13 @@ const AboutSection = (props: Props) => {
return (
<div
className="container mx-auto text-white py-2 lg:flex-row flex-col flex relative scroll-mt-16 "
className="container mx-auto text-white py-2 lg:flex-row flex-col flex relative scroll-mt-16 w-[94%] "
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 pt-2 order-1">
<div className="flex flex-col justify-center gap-10 lg:w-1/2 w-full px-8 pt-2 order-1 xl:px-0 ">
<div className="flex flex-col gap-8">
<h4 className="text-3xl uppercase font-bold hover:text-orange-400">
{t("title1")}

4
src/shared/components/home/FirstSection.tsx
Unescape View File

@ -87,7 +87,7 @@ const FirstSection = () => {
</video>
</div>
<div className="absolute top-0 left-0 w-full h-full bg-black opacity-60 "></div>
<div className="container flex mx-auto min-h-[70vh] justify-center text-white z-20 mt-20">
<div className="container flex mx-auto min-h-[70vh] justify-center text-white z-20 mt-20 w-[94%] ">
<div className="lg:w-4/5 w-[99%] sm:w-full flex flex-col justify-center lg:pb-0 gap-16 pb-20 z-50 px-1">
<div className="flex flex-col gap-10 ">
<h4 className="lg:w-3/4 lg:text-5xl md:text-5xl text-3xl font-bold hover:text-orange-400">
@ -132,7 +132,7 @@ const FirstSection = () => {
key={social.name}
onClick={() => window.open(social.link, "_blank")}
>
<div className="flex items-center gap-2 transform motion-safe:hover:scale-110">
<div className="flex items-center gap-2 transform motion-safe:hover:scale-110 transition-all duration-500">
{social.icon}
{social.name}
</div>

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

@ -183,7 +183,7 @@ const QnASection = (props: Props) => {
return (
<div
className="container animate-[5s_ease] min-h-[400px] mb-[100px] lg:justify-center lg:flex mx-auto py-2 text-white "
className="container flex flex-col lg:flex-row w-[94%] animate-[5s_ease] min-h-[400px] mb-[100px] lg:justify-center mx-auto py-2 text-white "
id="qna"
>
<div className="w-full lg:w-[50%] min-h-[100px] ">
@ -214,7 +214,7 @@ const QnASection = (props: Props) => {
showListItem("title" + item.id, index + item.title)
}
>
<div className="w-full min-h-[20px] flex justify-between items-center p-2 z-10 relative ">
<div className="w-full min-h-[20px] flex justify-between items-center p-2 z-10 relative group ">
{/* <div
className={`absolute h-full left-0 top-0 w-2 ${item.bgcolor}`}
></div> */}
@ -224,11 +224,11 @@ const QnASection = (props: Props) => {
<div className="listQnA h-6 w-6 flex cursor-pointer ">
<VscChevronDown
id={index + item.title}
className="iconDropDown iconActive hover:text-2xl m-auto text-orange-500"
className="iconDropDown iconActive group-hover:text-2xl m-auto text-orange-500 transition-all duration-500 ease-in-out"
/>
</div>
</div>
<ul className="listItem__QnA flex-col w-full list-answer ">
<ul className="listItem__QnA flex-col w-full transition-all duration-1000 ease-in">
{item.contents.map((list: any, index: any) => {
return (
<li

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

@ -51,7 +51,7 @@ const RoadMap = (props: Props) => {
return (
<div
className="container mx-auto text-white md:min-h-[60vh] animate-on-scroll my-20"
className="container mx-auto text-white md:min-h-[60vh] animate-on-scroll my-20 w-[94%] "
id="roadmap"
>
<h1 className="text-4xl font-bold text-center hover:text-orange-400 pb-20 relative">
@ -61,7 +61,7 @@ const RoadMap = (props: Props) => {
<animated.div
id="timeline"
style={{ ...styles }}
className="w-full flex flex-col gap-y-4 md:flex-row"
className="w-full flex flex-col gap-y-4 lg:flex-row"
>
{/* <animated.div
style={{ ...styles1 }}
@ -69,7 +69,10 @@ const RoadMap = (props: Props) => {
></animated.div> */}
{roadMapData.map((item: any, index: any) => {
return (
<div key={index} className="tl-item md:hover:w-[35%!important] ">
<div
key={index}
className="tl-item w-[80%]mx-auto lg:hover:w-[150%!important] "
>
<div
className="tl-bg"
style={{
@ -77,7 +80,7 @@ const RoadMap = (props: Props) => {
}}
></div>
<h4 className="tl-title">{item.phase}</h4>
<ol className="tl-content flex flex-col gap-y-[12px]">
<ol className="tl-content w-[90%] md:w-[60%] lg:w-[90%] mx-auto flex flex-col gap-y-[12px]">
{item.listTitle.map((listItem: any, index: any) => {
return (
<li key={index} className="flex items-center gap-x-[20px]">

2
src/shared/components/home/TokenomicsSection.tsx
Unescape View File

@ -185,7 +185,7 @@ const TokenomicsSection = (props: Props) => {
ChartJS.register(ChartDataLabels);
return (
<div className="w-full pb-24 scroll-mt-16" id="tokenomics">
<div className="container mx-auto">
<div className="container w-[94%] mx-auto">
<h1 className="text-4xl text-white font-bold text-center mb-16 hover:text-orange-400">
Tokenomics
</h1>

Write Preview
Loading…
Cancel
Save