63 lines
2.3 KiB
JavaScript
63 lines
2.3 KiB
JavaScript
import { motion } from "framer-motion";
|
|
import Link from "next/link";
|
|
import MovingLogos from "./MovingLogos/page";
|
|
|
|
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">
|
|
<div className="flex w-full justify-center">
|
|
<small className="text-[80px] mx-2 mt-[-30px] text-primary-300">
|
|
"
|
|
</small>
|
|
<h1
|
|
className={`font-black text-white lg:text-[60px] sm:text-[160px] xs:text-[140px] text-[40px] mb-0 space-x-6 text-center `}
|
|
style={{ "word-spacing": "10px" }}
|
|
>
|
|
SIMPLE AND SMOOTH OPERATION
|
|
</h1>
|
|
<small className="text-[80px] mx-2 mt-[-30px] text-primary-300 ">
|
|
"
|
|
</small>
|
|
</div>
|
|
<p
|
|
className={`text-gray-300 font-medium lg:text-[22px] sm:text-[26px] xs:text-[16px] text-[16px] lg:leading-[24px] text-white-100 text-center w-8/12 mx-auto `}
|
|
>
|
|
A task and shift management solution for coffee shops that provides
|
|
clear, trackable task management and monitoring of store operations.{" "}
|
|
</p>
|
|
|
|
<Link href="/app/login">
|
|
<div className="justify-center flex mt-10">
|
|
<button className="btn btn-primary rounded-full px-20 py-5 text-black text-lg font-bold ">
|
|
Get started
|
|
</button>
|
|
</div>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
|
|
{/* <ComputersCanvas /> */}
|
|
|
|
<div className="mt-[200px]">
|
|
<p
|
|
className={`opacity-60 text-white font-light lg:text-[20px] sm:text-[26px] xs:text-[16px] text-[16px] lg:leading-[24px] text-white-100 text-center w-8/12 mx-auto `}
|
|
>
|
|
Brands that trust us and use BRIZ for their managing.
|
|
</p>
|
|
<div className=" p-5 relative overflow-hidden w-10/12 mx-auto opacity-40 fade-mask">
|
|
<MovingLogos />
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default Hero;
|