import React from "react";
import placeholderImage from "../../assets/imgs/image-placeholder.png";
import "./Button_section_menu.css";

export default function Button_section_menu() {
	return (
		<div className="container-xl">
			<a href="#" className="button_section_menu margin__bottom--default">
				<div className="flexbox__center">
					<img
						src={placeholderImage}
						alt="Imagem ilustrativa do artigo"
						className="cardImage--tertiary"
					/>
					<div className="button_section_menu__content">
						<h4 className="heading4 margin-0">Título chamativo para ação</h4>
						<p className="legend margin-0">
							Ação a ser executada e Título da Página
						</p>
					</div>
				</div>
				<svg
					xmlns="http://www.w3.org/2000/svg"
					width="18"
					height="16"
					viewBox="0 0 18 16"
					fill="none">
					<path
						d="M12.7733 8.35372L7.14828 13.3537C7.09602 13.4002 7.03398 13.437 6.96569 13.4622C6.89741 13.4873 6.82422 13.5003 6.75031 13.5003C6.6764 13.5003 6.60322 13.4873 6.53493 13.4622C6.46665 13.437 6.40461 13.4002 6.35234 13.3537C6.30008 13.3073 6.25863 13.2521 6.23034 13.1914C6.20206 13.1307 6.1875 13.0657 6.1875 13C6.1875 12.9343 6.20206 12.8692 6.23034 12.8085C6.25863 12.7478 6.30008 12.6927 6.35234 12.6462L11.5801 7.99997L6.35234 3.35372C6.2468 3.2599 6.1875 3.13265 6.1875 2.99997C6.1875 2.86729 6.2468 2.74004 6.35234 2.64622C6.45789 2.5524 6.60105 2.49969 6.75031 2.49969C6.89958 2.49969 7.04273 2.5524 7.14828 2.64622L12.7733 7.64622C12.8256 7.69266 12.8671 7.7478 12.8954 7.8085C12.9237 7.8692 12.9383 7.93427 12.9383 7.99997C12.9383 8.06568 12.9237 8.13074 12.8954 8.19144C12.8671 8.25214 12.8256 8.30729 12.7733 8.35372Z"
						fill="#4B587E"
					/>
				</svg>
			</a>
			<div className="section_menu margin__bottom--default">
				<a href="#" className="button_section_menu">
					<div className="flexbox__center">
						<img
							src={placeholderImage}
							alt="Imagem ilustrativa do artigo"
							className="cardImage--tertiary"
						/>
						<div className="button_section_menu__content">
							<h4 className="heading4 margin-0">Título chamativo para ação</h4>
							<p className="legend margin-0">
								Ação a ser executada e Título da Página
							</p>
						</div>
					</div>
					<svg
						xmlns="http://www.w3.org/2000/svg"
						width="18"
						height="16"
						viewBox="0 0 18 16"
						fill="none">
						<path
							d="M12.7733 8.35372L7.14828 13.3537C7.09602 13.4002 7.03398 13.437 6.96569 13.4622C6.89741 13.4873 6.82422 13.5003 6.75031 13.5003C6.6764 13.5003 6.60322 13.4873 6.53493 13.4622C6.46665 13.437 6.40461 13.4002 6.35234 13.3537C6.30008 13.3073 6.25863 13.2521 6.23034 13.1914C6.20206 13.1307 6.1875 13.0657 6.1875 13C6.1875 12.9343 6.20206 12.8692 6.23034 12.8085C6.25863 12.7478 6.30008 12.6927 6.35234 12.6462L11.5801 7.99997L6.35234 3.35372C6.2468 3.2599 6.1875 3.13265 6.1875 2.99997C6.1875 2.86729 6.2468 2.74004 6.35234 2.64622C6.45789 2.5524 6.60105 2.49969 6.75031 2.49969C6.89958 2.49969 7.04273 2.5524 7.14828 2.64622L12.7733 7.64622C12.8256 7.69266 12.8671 7.7478 12.8954 7.8085C12.9237 7.8692 12.9383 7.93427 12.9383 7.99997C12.9383 8.06568 12.9237 8.13074 12.8954 8.19144C12.8671 8.25214 12.8256 8.30729 12.7733 8.35372Z"
							fill="#4B587E"
						/>
					</svg>
				</a>
				<hr className="section_menu--separator" />
				<a href="#" className="button_section_menu">
					<div className="flexbox__center">
						<img
							src={placeholderImage}
							alt="Imagem ilustrativa do artigo"
							className="cardImage--tertiary"
						/>
						<div className="button_section_menu__content">
							<h4 className="heading4 margin-0">Título chamativo para ação</h4>
							<p className="legend margin-0">
								Ação a ser executada e Título da Página
							</p>
						</div>
					</div>
					<svg
						xmlns="http://www.w3.org/2000/svg"
						width="18"
						height="16"
						viewBox="0 0 18 16"
						fill="none">
						<path
							d="M12.7733 8.35372L7.14828 13.3537C7.09602 13.4002 7.03398 13.437 6.96569 13.4622C6.89741 13.4873 6.82422 13.5003 6.75031 13.5003C6.6764 13.5003 6.60322 13.4873 6.53493 13.4622C6.46665 13.437 6.40461 13.4002 6.35234 13.3537C6.30008 13.3073 6.25863 13.2521 6.23034 13.1914C6.20206 13.1307 6.1875 13.0657 6.1875 13C6.1875 12.9343 6.20206 12.8692 6.23034 12.8085C6.25863 12.7478 6.30008 12.6927 6.35234 12.6462L11.5801 7.99997L6.35234 3.35372C6.2468 3.2599 6.1875 3.13265 6.1875 2.99997C6.1875 2.86729 6.2468 2.74004 6.35234 2.64622C6.45789 2.5524 6.60105 2.49969 6.75031 2.49969C6.89958 2.49969 7.04273 2.5524 7.14828 2.64622L12.7733 7.64622C12.8256 7.69266 12.8671 7.7478 12.8954 7.8085C12.9237 7.8692 12.9383 7.93427 12.9383 7.99997C12.9383 8.06568 12.9237 8.13074 12.8954 8.19144C12.8671 8.25214 12.8256 8.30729 12.7733 8.35372Z"
							fill="#4B587E"
						/>
					</svg>
				</a>
			</div>
		</div>
	);
}