Hero

1<section id="hero">
2	<div id="hero-inner">
3		<h1 id="hero-heading">Keep building with your AI coding agent</h1>
4		<p id="hero-body">
5			Go back to your coding agent and keep prompting. Add pages, content,
6			and design as you go.
7		</p>
8		<a
9			href="https://dev.wix.com/docs/go-headless"
10			target="_blank"
11			rel="noopener noreferrer"
12			id="hero-cta">Learn More About Headless</a
13		>
14	</div>
15</section>
16
17<style>
18	#hero {
19		width: 100%;
20		height: 100vh;
21		display: flex;
22		align-items: center;
23		justify-content: center;
24		padding: 80px 40px;
25		position: relative;
26		overflow: hidden;
27		background: linear-gradient(135deg, #dde9de 0%, #eaedf4 55%, #e0dced 100%);
28		font-family:
29			Inter, Roboto, "Helvetica Neue", "Arial Nova", "Nimbus Sans", Arial,
30			sans-serif;
31		box-sizing: border-box;
32	}
33
34	#hero-inner {
35		max-width: 800px;
36		text-align: center;
37		display: flex;
38		flex-direction: column;
39		align-items: center;
40	}
41
42	#hero-heading {
43		font-size: clamp(36px, 5vw, 64px);
44		font-weight: 400;
45		line-height: 1.05;
46		letter-spacing: -0.02em;
47		color: #1a1d2e;
48		margin: 0;
49	}
50
51	#hero-body {
52		margin: 20px 0 0;
53		font-size: 16px;
54		line-height: 1.6;
55		color: #4a4d5e;
56		max-width: 520px;
57	}
58
59	#hero-cta {
60		display: inline-block;
61		margin-top: 36px;
62		border-radius: 24px;
63		padding: 13px 28px;
64		font-size: 14px;
65		font-weight: 500;
66		width: fit-content;
67		background: #1a1d2e;
68		color: #fff;
69		text-decoration: none;
70	}
71
72	@media (max-width: 640px) {
73		#hero {
74			padding: 80px 20px;
75		}
76	}
77</style>