153 lines
8.2 KiB
JavaScript
153 lines
8.2 KiB
JavaScript
import { useRef, useState } from "react";
|
|
import { Splide, SplideTrack, SplideSlide } from "@splidejs/react-splide";
|
|
import Section from "@/components/Section";
|
|
import Image from "@/components/Image";
|
|
import Button from "@/components/Button";
|
|
import Tagline from "@/components/Tagline";
|
|
import Arrows from "@/components/Arrows";
|
|
|
|
import { howItWorks } from "@/mocks/how-it-works";
|
|
|
|
type HowItWorksProps = {};
|
|
|
|
const HowItWorks = ({}: HowItWorksProps) => {
|
|
const [activeIndex, setActiveIndex] = useState<number>(0);
|
|
|
|
const ref = useRef<any>(null);
|
|
|
|
const handleClick = (index: number) => {
|
|
setActiveIndex(index);
|
|
ref.current?.go(index);
|
|
};
|
|
|
|
return (
|
|
<Section className="lg:-mb-16" crosses>
|
|
<div className="container">
|
|
<Splide
|
|
className="splide-custom"
|
|
options={{
|
|
type: "fade",
|
|
rewind: true,
|
|
pagination: false,
|
|
}}
|
|
hasTrack={false}
|
|
ref={ref}
|
|
>
|
|
<SplideTrack>
|
|
{howItWorks.map((item, index) => (
|
|
<SplideSlide key={item.id}>
|
|
<div className="lg:flex lg:flex-row-reverse lg:items-center">
|
|
<div className="">
|
|
<Tagline className="mb-4 lg:mb-6">
|
|
How it work: 0{index + 1}.
|
|
</Tagline>
|
|
<h2 className="h2 mb-4 lg:mb-6">
|
|
{item.title}
|
|
</h2>
|
|
<p className="body-2 mb-10 text-n-3">
|
|
{item.text}
|
|
</p>
|
|
<Button href="/login">
|
|
Connect now
|
|
</Button>
|
|
<Arrows
|
|
className="my-10 lg:hidden"
|
|
prevClassName="mr-3"
|
|
onPrev={() => ref.current?.go("<")}
|
|
onNext={() => ref.current?.go(">")}
|
|
/>
|
|
</div>
|
|
<div className="relative lg:w-[29.375rem] lg:flex-shrink-0 lg:mr-[7.125rem] xl:w-[34.375rem] xl:mr-40">
|
|
<div className="pt-0.25 pl-0.25 overflow-hidden bg-gradient-to-tl from-n-1/0 via-n-1/0 to-n-1/15 rounded-3xl">
|
|
<div className="h-[30.5rem] bg-n-7 rounded-[1.4375rem] xl:h-[35.625rem]">
|
|
<Image
|
|
className="w-full h-full object-contain"
|
|
src={item.image}
|
|
width={550}
|
|
height={570}
|
|
alt={item.title}
|
|
/>
|
|
<div className="absolute left-4 right-4 bottom-4 flex items-center h-16 px-5 bg-n-8 border border-n-1/10 rounded-xl lg:left-6 lg:right-6 lg:bottom-6">
|
|
<div className="flex items-center justify-center w-6 h-6 mr-5 bg-color-1 rounded-full">
|
|
<svg
|
|
className="w-2.5 h-2.5 fill-n-1"
|
|
viewBox="0 0 10 10"
|
|
>
|
|
<path d="M5 0a1 1 0 0 1 .993.883L6 1v3h3a1 1 0 0 1 .117 1.993L9 6H6v3a1 1 0 0 1-1.993.117L4 9V6H1a1 1 0 0 1-.117-1.993L1 4h3V1a1 1 0 0 1 1-1z" />
|
|
</svg>
|
|
</div>
|
|
<div className="text-base text-n-3/75">
|
|
Ask anything
|
|
</div>
|
|
<div className="w-6 h-6 ml-auto opacity-50">
|
|
<Image
|
|
className="w-full"
|
|
src="/images/icons/recording-01.svg"
|
|
width={24}
|
|
height={24}
|
|
alt="Recording"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="absolute -right-6 top-8 bottom-8 w-6 bg-[#1B1B2E] rounded-r-3xl"></div>
|
|
<div className="absolute -right-12 top-16 bottom-16 w-6 bg-[#1B1B2E]/50 rounded-r-3xl"></div>
|
|
</div>
|
|
</div>
|
|
</SplideSlide>
|
|
))}
|
|
</SplideTrack>
|
|
<Arrows
|
|
className="hidden justify-center mt-12 lg:flex lg:mt-15 xl:hidden"
|
|
prevClassName="mr-3"
|
|
onPrev={() => ref.current?.go("<")}
|
|
onNext={() => ref.current?.go(">")}
|
|
/>
|
|
<div className="absolute top-0 -left-[10rem] w-[29.5rem] h-[29.5rem] mix-blend-color-dodge opacity-20 pointer-events-none">
|
|
<Image
|
|
className="absolute top-1/2 left-1/2 w-[55.5rem] max-w-[55.5rem] h-[61.5rem] -translate-x-1/2 -translate-y-1/2"
|
|
src="/images/how-it-works/gradient.png"
|
|
width={984}
|
|
height={984}
|
|
alt="Gradient"
|
|
/>
|
|
</div>
|
|
<div className="hidden grid-cols-4 gap-6 mt-20 xl:grid">
|
|
{howItWorks.map((item, index) => (
|
|
<div
|
|
className="group cursor-pointer"
|
|
onClick={() => handleClick(index)}
|
|
key={item.id}
|
|
>
|
|
<div
|
|
className={`h-[0.125rem] mb-10 transition-colors ${
|
|
index === activeIndex
|
|
? "bg-color-1"
|
|
: "bg-[#D9D9D9]/10 group-hover:bg-[#D9D9D9]/50"
|
|
}`}
|
|
></div>
|
|
<div className="tagline mb-1 text-n-3">
|
|
0{index + 1}.
|
|
</div>
|
|
<h2 className="mb-[0.625rem] text-2xl leading-8">
|
|
{item.title}
|
|
</h2>
|
|
<p
|
|
className={`body-2 text-n-3 line-clamp-3 transition-opacity ${
|
|
index !== activeIndex && "opacity-0"
|
|
}`}
|
|
>
|
|
{item.text}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</Splide>
|
|
</div>
|
|
</Section>
|
|
);
|
|
};
|
|
|
|
export default HowItWorks;
|