web/components/landingComponents/Hero.jsx

60 lines
2.0 KiB
JavaScript

import { motion } from "framer-motion";
import Link from "next/link";
const Hero = () => {
return (
<section className={`relative w-full h-screen mx-auto`}>
<div className="flex justify-center lg:pt-[300px] xs:pt-[200px] xs:ml-5 lg:ml-0">
{/* <div className="flex flex-col justify-center items-center">
<div className="w-5 h-5 rounded-full bg-primary-100" />
<div className="w-1 h-[200px] violet-gradient" />
</div> */}
<div className=" ml-1 text-center">
<h1
className={`font-black text-white lg:text-[200px] sm:text-[160px] xs:text-[140px] text-[40px] mb-0 `}
>
Briz
</h1>
<p
className={`text-[#dfd9ff] font-medium lg:text-[30px] sm:text-[26px] xs:text-[16px] text-[16px] lg:leading-[40px] text-white-100 xs:mt-[-50px] lg:mt-[-77px]`}
>
<small className="text-[30px]">"</small> harmonious Routine
Management <small className="text-[30px]">"</small>
</p>
<Link href="/login">
<div className="justify-center flex mt-5">
<button className="btn btn-primary rounded-full px-20 py-4 ">
get start{" "}
</button>
</div>
</Link>
</div>
</div>
{/* <ComputersCanvas /> */}
<div className="absolute xs:bottom-10 bottom-32 w-full flex justify-center items-center">
<a href="#about">
<div className="w-[35px] h-[64px] rounded-3xl border-4 border-secondary flex justify-center items-start p-2">
<motion.div
animate={{
y: [0, 24, 0],
}}
transition={{
duration: 1.5,
repeat: Infinity,
repeatType: "loop",
}}
className="w-3 h-3 rounded-full bg-secondary mb-1"
/>
</div>
</a>
</div>
</section>
);
};
export default Hero;