Turn the entire Hero section into a clickable link

primer-hero-as-link.php

<?php

/**
 * Turn the entire Hero section into a clickable link.
 *
 * Put this hook inside your own must-use plugin, and replace the URL assigned to the `$hero_link` variable.
 *
 * How to make one: https://github.com/godaddy/wp-primer-theme/wiki/Customizing-Primer-with-hooks
 */
add_action( 'wp_print_footer_scripts', function () {

	if ( ! is_front_page() || ! is_active_sidebar( 'hero' ) ) {

		return;

	}

	$hero_link = 'http://example.com/product-page/'; // <--- PUT YOUR URL HERE

	?>
	<style type="text/css">.hero:hover { cursor: pointer; }</style>
	<script type="text/javascript">var $primerHero = document.getElementsByClassName("hero")[0]; if ( "undefined" !== typeof $primerHero ) { $primerHero.onclick = function() { window.location.href = "<?php echo esc_url( $hero_link ); ?>"; }; }</script>
	<?php

} );