import Link from "next/link"
import { useTranslations } from "next-intl"

export default function MersmHero() {
    const t = useTranslations("Hero")
    return (
        <>
            <section id="hero-13" className="hero-section">
                <div className="container">
                    <div className="row d-flex align-items-center">
                        {/* HERO TEXT */}
                        <div className="col-md-5">
                            <div className="hero-13-txt wow fadeInRight">
                                <h2 className="s-54 w-700">{t("title")} <span className="color--theme">{t("title1")}</span> </h2>
                                <p className="p-lg">{t("description")}</p>
                                <Link href={process.env.NEXT_PUBLIC_SIGNUP_URL} className="btn r-04 btn--theme hover--tra-black">{t("cta")}</Link>
                            </div>
                        </div>
                        {/* HERO IMAGE */}
                        <div className="col-md-7">
                            <div className="hero-13-img wow fadeInLeft">
                                <img className="img-fluid" src="/images/hero-13-b-img.png" alt="hero-image" />
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </>
    )
}