skills/wix-headless-templates/blog/project/src/components/Hero.astro

<section id="hero">
	<div id="hero-inner">
		<h1 id="hero-heading">Keep building with your AI coding agent</h1>
		<p id="hero-body">
			Go back to your coding agent and keep prompting. Add pages, content,
			and design as you go.
		</p>
		<a
			href="https://dev.wix.com/docs/go-headless"
			target="_blank"
			rel="noopener noreferrer"
			id="hero-cta">Learn More About Headless</a
		>
	</div>
</section>

<style>
	#hero {
		width: 100%;
		height: 100vh;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 80px 40px;
		position: relative;
		overflow: hidden;
		background: linear-gradient(135deg, #dde9de 0%, #eaedf4 55%, #e0dced 100%);
		font-family:
			Inter, Roboto, "Helvetica Neue", "Arial Nova", "Nimbus Sans", Arial,
			sans-serif;
		box-sizing: border-box;
	}

	#hero-inner {
		max-width: 800px;
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	#hero-heading {
		font-size: clamp(36px, 5vw, 64px);
		font-weight: 400;
		line-height: 1.05;
		letter-spacing: -0.02em;
		color: #1a1d2e;
		margin: 0;
	}

	#hero-body {
		margin: 20px 0 0;
		font-size: 16px;
		line-height: 1.6;
		color: #4a4d5e;
		max-width: 520px;
	}

	#hero-cta {
		display: inline-block;
		margin-top: 36px;
		border-radius: 24px;
		padding: 13px 28px;
		font-size: 14px;
		font-weight: 500;
		width: fit-content;
		background: #1a1d2e;
		color: #fff;
		text-decoration: none;
	}

	@media (max-width: 640px) {
		#hero {
			padding: 80px 20px;
		}
	}
</style>