62 lines
2.3 KiB
JavaScript
62 lines
2.3 KiB
JavaScript
import Link from "next/link";
|
|
import MovingLogos from "./MovingLogos/page";
|
|
import { motion } from "framer-motion";
|
|
import { fadeIn, textVariant } from "src/utils/motion";
|
|
import { useTranslations } from "next-intl";
|
|
|
|
const Hero = () => {
|
|
const t = useTranslations("page");
|
|
|
|
console.log("ssssst", t);
|
|
|
|
return (
|
|
<section className="relative w-full h-screen mx-auto">
|
|
<div className="flex justify-center pt-[200px] lg:pt-[300px] lg:ml-0">
|
|
<div className="ml-1 text-center">
|
|
<div className="flex justify-center items-start">
|
|
<small className="text-[20px] md:text-[60px] lg:text-[80px] mx-2 text-primary-300 xs:hidden lg:block">
|
|
"
|
|
</small>
|
|
<motion.div variants={fadeIn("", "", 0.1, 1)}>
|
|
<h1
|
|
className="font-black text-white text-[40px] xs:text-[30px] sm:text-[140px] lg:text-[60px] leading-tight mb-0 space-x-6 text-center"
|
|
style={{ wordSpacing: "10px" }}
|
|
>
|
|
{t("title")}
|
|
</h1>
|
|
</motion.div>
|
|
<small className="text-[20px] md:text-[60px] lg:text-[80px] mx-2 text-primary-300 xs:hidden lg:block">
|
|
"
|
|
</small>
|
|
</div>
|
|
|
|
<motion.div variants={fadeIn("", "", 0.1, 1)}>
|
|
<p className="text-gray-300 font-medium text-[14px] xs:text-[16px] sm:text-[22px] lg:text-[24px] leading-[20px] xs:leading-[24px] text-white-100 text-center lg:w-10/12 xs:w-full xs:px-4 mx-auto mt-5">
|
|
{t("desc")}
|
|
</p>
|
|
</motion.div>
|
|
|
|
<Link href="/app/login">
|
|
<div className="flex justify-center mt-10">
|
|
<button className="btn btn-primary rounded-full px-8 sm:px-16 lg:px-20 py-3 sm:py-5 text-black text-sm sm:text-lg font-bold">
|
|
{t("button")}{" "}
|
|
</button>
|
|
</div>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-[50px] lg:mt-[200px]">
|
|
<p className="opacity-60 text-white font-light text-[14px] xs:text-[16px] sm:text-[20px] lg:text-[22px] leading-[20px] lg:leading-[24px] text-center w-10/12 sm:w-8/12 mx-auto">
|
|
{t("brand")}{" "}
|
|
</p>
|
|
<div className="p-5 relative overflow-hidden w-10/12 mx-auto opacity-40 fade-mask">
|
|
<MovingLogos />
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default Hero;
|