136 lines
3.8 KiB
JavaScript
136 lines
3.8 KiB
JavaScript
"use clients";
|
|
import React, { useEffect, useState } from "react";
|
|
import { motion } from "framer-motion";
|
|
|
|
import { SectionWrapper } from "src/hoc";
|
|
import { fadeIn, textVariant } from "src/utils/motion";
|
|
import { styles } from "src/style";
|
|
import Image from "next/image";
|
|
import phi from "@img/adjustw.png";
|
|
import phi1 from "../../src/assets/phi1.png";
|
|
import phi2 from "../../src/assets/phi2.png";
|
|
import phi3 from "../../src/assets/phi3.png";
|
|
import { useLocale, useTranslations } from "next-intl";
|
|
|
|
const phiData = () => {
|
|
const t = useTranslations("phiData");
|
|
return [
|
|
{
|
|
title: t("bcg.title"),
|
|
desc: t("bcg.desc"),
|
|
},
|
|
{
|
|
title: t("oeg.title"),
|
|
desc: t("oeg.desc"),
|
|
},
|
|
{
|
|
title: t("et.title"),
|
|
desc: t("et.desc"),
|
|
},
|
|
];
|
|
};
|
|
|
|
const Phi = () => {
|
|
const [activeIndex, setActiveIndex] = useState(0);
|
|
|
|
console.log("object phiData().length", phiData().length);
|
|
|
|
const t = useTranslations("phiData");
|
|
|
|
const locale = useLocale();
|
|
const isRTL = locale === "fa";
|
|
|
|
console.log(activeIndex);
|
|
return (
|
|
<div className={` rounded-[20px] ${isRTL ? "rtl" : "ltr"} `}>
|
|
<div className={`bg-tertiary rounded-2xl `}>
|
|
<motion.div variants={textVariant()}>
|
|
<div className="flex ">
|
|
{isRTL ? (
|
|
<>
|
|
<span className="text-primary-300 text-[30px] xs:text-[100px] sm:text-[150px] relative top-[5px] sm:top-[10px] font-bold xs:mt-[89px] lg:mt-[52px]">
|
|
{" "}
|
|
HI
|
|
</span>
|
|
<div className="xs:w-[100px] lg:w-[120px] mt-[90px]">
|
|
<Image src={phi} />
|
|
</div>
|
|
</>
|
|
) : (
|
|
<>
|
|
{" "}
|
|
<div className="xs:w-[100px] lg:w-[120px] mt-[90px]">
|
|
<Image src={phi} />
|
|
</div>
|
|
<span className="text-primary-300 text-[30px] xs:text-[100px] sm:text-[150px] relative top-[5px] sm:top-[10px] font-bold xs:mt-[89px] lg:mt-[52px]">
|
|
{" "}
|
|
HI
|
|
</span>
|
|
</>
|
|
)}
|
|
</div>
|
|
|
|
<p className="mb-0 text-white xs:mt-0 lg:mt-5"> {t("desc")}</p>
|
|
</motion.div>
|
|
</div>
|
|
<div className={` pb-14 sm:py-16 grid lg:grid-cols-2 xs:grid-cols-1 `}>
|
|
<div>
|
|
{phiData().map((e, index) => (
|
|
<motion.div
|
|
key={index}
|
|
variants={fadeIn("", "spring", index * 0.5, 0.75)}
|
|
className={` p-5 rounded-3xl w-full tr03 cursor-pointer ${
|
|
activeIndex == index ? "bg-[#35685952]" : ""
|
|
}`}
|
|
onClick={() => setActiveIndex(index)}
|
|
>
|
|
<h3
|
|
className={`text-white font-bold tr03 ${
|
|
activeIndex == index ? "text-[24px]" : "opacity-50"
|
|
}`}
|
|
>
|
|
{e.title}
|
|
</h3>
|
|
|
|
{activeIndex == index && (
|
|
<div className="mt-3">
|
|
<p className="text-white tracking-wider text-[16px] font-light">
|
|
{e.desc}
|
|
</p>
|
|
</div>
|
|
)}
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
|
|
<motion.div variants={fadeIn("", "spring", 1 * 0.5, 0.75)}>
|
|
<Image
|
|
className="tr03"
|
|
src={
|
|
activeIndex == 0
|
|
? phi1
|
|
: activeIndex == 1
|
|
? phi2
|
|
: activeIndex == 2
|
|
? phi3
|
|
: phi3
|
|
}
|
|
/>
|
|
</motion.div>
|
|
{/*
|
|
<div>
|
|
<Image src={phi2} />
|
|
</div>
|
|
|
|
<div>
|
|
<Image src={phi3} />
|
|
</div> */}
|
|
</div>
|
|
|
|
<p className="mb-0 text-white">{t("endDesc")}</p>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default SectionWrapper(Phi, "Phi");
|