74 lines
2.6 KiB
TypeScript
Executable File
74 lines
2.6 KiB
TypeScript
Executable File
import React from "react";
|
|
import ModalLearnMore from "./ModalLearnMore/ModalLearnMore";
|
|
import { SourceModal } from "@/types";
|
|
import { Raleway } from "next/font/google";
|
|
|
|
const raleway = Raleway({
|
|
variable: "--display-font",
|
|
subsets: ["latin"],
|
|
});
|
|
|
|
function HeroHome() {
|
|
const bookDemoOnClick = () => {
|
|
const signUpModal = document.getElementById("sign-up-modal");
|
|
if (!signUpModal) return;
|
|
signUpModal.setAttribute("name", SourceModal.BookDemo);
|
|
signUpModal.removeAttribute("price_id");
|
|
signUpModal.click();
|
|
};
|
|
|
|
const learnMoreOnClick = () => {
|
|
const learnMoreModal = document.getElementById("learn-more-modal");
|
|
if (!learnMoreModal) return;
|
|
learnMoreModal.click();
|
|
};
|
|
|
|
return (
|
|
<section>
|
|
<div className="max-w-6xl mx-auto px-4 sm:px-6 relative">
|
|
{/* Hero content */}
|
|
<div className="relative pt-[12rem] pb-10 md:pt-40 md:pb-16">
|
|
{/* Section header */}
|
|
<div className="max-w-3xl mx-auto text-center pb-12 md:pb-10">
|
|
<h1
|
|
className={`${raleway.className} text-black dark:text-white font-raleway text-3xl leading-10 lg:py-12 tracking-[-1px] select-none w-[fit-content] md:leading-[6rem] m-auto mb-4 lg:mb-0 md:text-[5.5rem]`}
|
|
data-aos="fade-up"
|
|
>
|
|
Your Offline Digital Forms Simplified.
|
|
</h1>
|
|
<p
|
|
className="text-lg font-semibold pb-12 mb-8 md:text-4xl text-transparent bg-clip-text bg-gradient-to-r from-pink-default to-purple-default w-[fit-content] mx-auto"
|
|
data-aos="fade-up"
|
|
data-aos-delay="200"
|
|
>
|
|
Sign365
|
|
</p>
|
|
<div className="max-w-xs mx-auto mt-[8rem] sm:max-w-none sm:flex sm:justify-center md:mt-auto">
|
|
<div data-aos="fade-up" data-aos-delay="400">
|
|
<button
|
|
onClick={bookDemoOnClick}
|
|
className="btn text-base capitalize rounded text-white bg-pink-550 hover:bg-pink-700 w-full mb-4 sm:w-auto sm:mb-0"
|
|
>
|
|
Book Demo
|
|
</button>
|
|
</div>
|
|
<div data-aos="fade-up" data-aos-delay="600">
|
|
<button
|
|
onClick={learnMoreOnClick}
|
|
className="btn text-base capitalize rounded text-white bg-gray-825 hover:bg-gray-650 w-full sm:w-auto sm:ml-4"
|
|
>
|
|
Learn more
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<ModalLearnMore />
|
|
</section>
|
|
);
|
|
}
|
|
|
|
export default HeroHome;
|