import Title from "@/components/Title";
import styles from "./styles.module.scss";
import { images } from "../../data";
import { useTranslations } from "@/hooks/translations";
import { ELocalesPlacement } from "@/locales";

function GivePersonalizedPlan() {
    const { translate } = useTranslations(ELocalesPlacement.EmailMarketingCompatibilityV1);
    
    return (
        <div className={styles.container}>
            <Title className={styles.title} variant="h2">
                {translate("marketing-landing.personalized-plan-title")}
                <span> {translate("marketing-landing.personalized-plan-free")}</span>
            </Title>
            <img className={styles.stars} src={images("stars.svg")} alt="stars" />
            <img className={styles.zodiacs} src={images("zodiac-in-space.svg")} alt="stars" />
        </div>
    )
}

export default GivePersonalizedPlan