58 lines
2.2 KiB
TypeScript
58 lines
2.2 KiB
TypeScript
import { useTranslation } from "react-i18next";
|
|
import HeroImg from "../../../assets/HeroImg.svg";
|
|
import Stars from "../../../assets/Stars.svg";
|
|
|
|
const Hero = () => {
|
|
const { t } = useTranslation();
|
|
|
|
const handleNavigation = (path: string) => {
|
|
const element = document.getElementById(path);
|
|
element?.scrollIntoView({ behavior: "smooth" });
|
|
};
|
|
|
|
return (
|
|
<div className="flex flex-col lg:mt-20 lg:flex-row 1920:padding-calc items-center">
|
|
<div className="lg:w-1/2 w-full xl:w-1/2 hidden lg:flex transform origin-left">
|
|
<img className="items-center" src={HeroImg} alt="hero"></img>
|
|
</div>
|
|
<div className="justify-center items-center lg:w-1/2 xl:w-1/2">
|
|
<div className="flex flex-col text-center lg:pt-10 lg:pr-20 lg:text-right 2xl:pr-40">
|
|
<img
|
|
src={Stars}
|
|
alt="hero"
|
|
className="md:px-0 ml-auto mr-auto lg:mr-0 lg:text-right"
|
|
></img>
|
|
<div>
|
|
<h1 className="hero-text">{t("hero.heading.part1")}</h1>
|
|
<h1 className="hero-text">{t("hero.heading.part2")}</h1>
|
|
<div>
|
|
<img
|
|
src={HeroImg}
|
|
alt="heroSm"
|
|
className="flex mt-6 lg:hidden"
|
|
></img>
|
|
</div>
|
|
</div>
|
|
<div className="mx-5 lg:mx-0">
|
|
<h2 className="italic text-lg md:text-2xl 2xl:text-3xl mt-4 md:mt-10">
|
|
{t("hero.subheading.part1")}
|
|
</h2>
|
|
<h2 className="italic text-lg md:text-2xl 2xl:text-3xl">
|
|
{t("hero.subheading.part2")}
|
|
</h2>
|
|
</div>
|
|
<div className="flex mt-5 lg:mt-12 mx-10 lg:mx-0 lg:ml-auto rounded-xl bg-gradient-to-br from-gold-light to-gold-dark p-0.5 shadow-lg">
|
|
<a className="flex w-full" href="#Contact">
|
|
<button className="flex-1 font-medium md:px-8 py-3 text-2xl md:text-3xl bg-gradient-to-br from-custom-bglight to-custom-bgdark rounded-xl hover:bg-transparent hover:from-transparent hover:to-transparent transition duration-500">
|
|
{t("hero.button")}
|
|
</button>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Hero;
|