0% found this document useful (0 votes)
16 views4 pages

Click Trigger

Uploaded by

sabnamsharma200
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
16 views4 pages

Click Trigger

Uploaded by

sabnamsharma200
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 4

import React, { useState } from "react";

import OurProject1 from "../assets/our-project/OurProject1.png";


import OurProject2 from "../assets/our-project/OurProject2.png";
import ArrowCircleLeft from "../assets/our-project/ArrowCircleLeft.png";
import ArrowCircleRight from "../assets/our-project/ArrowCircleRight.png";
import Constants from "./constants/constants";
import { motion, AnimatePresence } from "framer-motion";

const OurProject = () => {


const [currentImage, setCurrentImage] = useState(OurProject1);

const handleNext = () => {


setCurrentImage(OurProject2);
};

const handlePrev = () => {


setCurrentImage(OurProject1);
};

return (
<div className="OurProject">
<div className="max-w-full h-[955px] px-[72px] py-[120px]">
<div className="max-w-full h-full flex flex-col items-center">
<motion.div
className="w-[532px] h-[114px] text-center"
variants={{
hidden: { opacity: 0, y: 50 },
visible: { opacity: 1, y: 0 },
}}
initial="hidden"
animate="visible"
transition={{ duration: 0.15, delay: 0.35 }}
>
<p className="flex text-[48px] font-bold justify-center">
{Constants.OURPROJECT_TEXT}
</p>
<p className="text-[24px] font-medium text-[#4f4f4f] mt-[16px]">
{Constants.OURPROJECT_SUBTEXT}
</p>
</motion.div>
<div className="w-full flex mt-[80px]">
<div className="flex flex-1">
<div className="w-[599px] h-[356px] mt-[18.5px]">
<motion.p
className="text-[20px] text-[#00829b] font-bold"
variants={{
hidden: { opacity: 0, y: 50 },
visible: { opacity: 1, y: 0 },
}}
initial="hidden"
animate="visible"
transition={{ duration: 0.15, delay: 0.45 }}
>
{Constants.JUDICIARYMUNICIPAL_TEXT}
</motion.p>
<motion.p
className="mt-[8px] text-[16px] font-normal text-[#4f4f4f]"
variants={{
hidden: { opacity: 0, y: 50 },
visible: { opacity: 1, y: 0 },
}}
initial="hidden"
animate="visible"
transition={{ duration: 0.15, delay: 0.45 }}
>
{Constants.JUDICIARYMUNICIPAL_SUBTEXT}
</motion.p>
<motion.ul
variants={{
hidden: { opacity: 0, y: 50 },
visible: { opacity: 1, y: 0 },
}}
initial="hidden"
animate="visible"
transition={{ duration: 0.15, delay: 0.45 }}
>
<hr
className="w-[599px] h-[1px] my-[28px]"
style={{ color: "#e0e0e0" }}
/>
<motion.li
className="h-[32px] pt-[16px] text-[20px] font-semibold"
variants={{
hidden: { opacity: 0, y: 50 },
visible: { opacity: 1, y: 0 },
}}
initial="hidden"
animate="visible"
transition={{ duration: 0.15, delay: 0.55 }}
>
{Constants.CARDMANAGEMENT_TEXT}
</motion.li>
<hr
className="w-[599px] h-[1px] my-[28px]"
style={{ color: "#e0e0e0" }}
/>
<motion.li
className="h-[32px] pt-[16px] text-[20px] font-semibold"
variants={{
hidden: { opacity: 0, y: 50 },
visible: { opacity: 1, y: 0 },
}}
initial="hidden"
animate="visible"
transition={{ duration: 0.15, delay: 0.65 }}
>
{Constants.BOOKINNEPAL_TEXT}
</motion.li>
<hr
className="bg-[#e0e0e0] w-[599px] h-[1px] my-[28px]"
style={{ color: "#e0e0e0" }}
/>
<motion.li
className="h-[32px] pt-[16px] text-[20px] font-semibold"
variants={{
hidden: { opacity: 0, y: 50 },
visible: { opacity: 1, y: 0 },
}}
initial="hidden"
animate="visible"
transition={{ duration: 0.15, delay: 0.75 }}
>
{Constants.FUTSALBOOKING_TEXT}
</motion.li>
</motion.ul>
</div>
</div>
<motion.div
className="flex flex-1 justify-end items-center"
variants={{
hidden: { opacity: 0, y: 50 },
visible: { opacity: 1, y: 0 },
}}
initial="hidden"
animate="visible"
transition={{ duration: 0.15, delay: 0.45 }}
>
<AnimatePresence>
<motion.img
key={currentImage}
src={currentImage}
className="w-[607px] h-[393px] object-contain"
initial={{ opacity: 0, y: 100 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: -100 }}
transition={{ duration: 0.5 }}
alt="Project Image"
/>
</AnimatePresence>
</motion.div>
</div>
<motion.div
className="w-full flex items-center justify-center mt-[80px]"
variants={{
hidden: { opacity: 0, y: 50 },
visible: { opacity: 1, y: 0 },
}}
initial="hidden"
animate="visible"
transition={{ duration: 0.15, delay: 0.35 }}
>
<hr
className="bg-[#e0e0e0] w-[599px] h-[1px]"
style={{ color: "#e0e0e0" }}
/>
<img
src={ArrowCircleLeft}
alt="Left Arrow"
className="mx-4 cursor-pointer"
onClick={handlePrev}
/>
<img
src={ArrowCircleRight}
alt="Right Arrow"
className="mx-4 cursor-pointer"
onClick={handleNext}
/>
<hr
className="bg-[#e0e0e0] w-[599px] h-[1px]"
style={{ color: "#e0e0e0" }}
/>
</motion.div>
</div>
</div>
</div>
);
};

export default OurProject;

You might also like