import styles from "./styles.module.scss";

const BannerVDay = () => {
  return (
    <>
      <div className={styles.imgVday}>
        <picture>
          <source srcSet="https://about.suno.com/img/banner/v-day/BG_Heart.png, https://about.suno.com/img/banner/v-day/BG_Heart.png 2x" />
          <img
            id="heart"
            src="https://about.suno.com/img/banner/v-day/CD.png"
          />
        </picture>

        <picture>
          <source srcSet="https://about.suno.com/img/banner/v-day/CD.png, https://about.suno.com/img/banner/v-day/CD-@2x.png 2x" />
          <img id="cd" src="https://about.suno.com/img/banner/v-day/CD.png" />
        </picture>
      </div>
      <div className={styles.content}>
        <span className={styles.title}>Make a song for your Valentine</span>
        <span>
          Send love with Suno
          <svg
            width="16"
            height="17"
            viewBox="0 0 16 17"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              opacity="0.62"
              d="M10.2406 3.6064C9.67857 3.0202 8.76733 3.0202 8.20529 3.6064C7.64325 4.1926 7.64325 5.14302 8.20529 5.72922L9.42308 6.99937H3.1098C2.31287 6.99937 1.66683 7.67142 1.66683 8.50044C1.66683 9.32945 2.31287 10.0015 3.1098 10.0015H9.42909L8.21198 11.2709C7.64994 11.8571 7.64994 12.8076 8.21198 13.3938C8.77402 13.98 9.68527 13.98 10.2473 13.3938L13.912 9.57155C14.2613 9.20715 14.3935 8.70201 14.3086 8.2311C14.282 8.07848 14.2332 7.93389 14.1659 7.80109C14.0993 7.66628 14.0119 7.53978 13.9035 7.42681L10.2406 3.6064Z"
              fill="white"
            />
          </svg>
        </span>
      </div>
    </>
  );
};
export default BannerVDay;