import { card } from "../assets";
import styles, { layout } from "../styles";
import Button from "./Button";
import { Link } from "react-router-dom";

const CardDeal = () => (
  <section className={layout.section}>
    {/* Card Deal Info */}
    <div className={layout.sectionInfo}>
      <h2 className={styles.heading2}>
        Find a better card deal
        <br className="sm:block hidden" /> in few easy steps.
      </h2>
      <p className={`${styles.paragraph} max-w-[470px] mt-5`}>
        Arcu tortor, purus in mattis at sed integer faucibus. Aliquet quis
        aliquet eget mauris tortor.ç Aliquet ultrices ac, ametau.
      </p>
      {/* Get Started */}
      <Link to="/register">
        <Button styles="mt-10" />
      </Link>
    </div>

    {/* Background Image */}
    <div className={layout.sectionImg}>
      <img src={card} alt="Card Deal" className="w-[100%] h-[100%]" />
    </div>
  </section>
);

export default CardDeal;
