chatrpg-app/src/routes/Hero.svelte

<script>
	import image01 from '$lib/assets/image01.gif';

	let { scrollTo } = $props();
</script>

<header class="hero">
	<div class="hero-content">
		<div class="badge">IN DEVELOPMENT • LAUNCHING SOON</div>
		
		<h1>
			Your story.<br />
			<span class="accent">Infinite possibilities.</span>
		</h1>
		
		<p class="hero-subtitle">
			An LLM-powered text RPG where you describe anything in natural language.
			No commands. No limits. Just pure collaborative storytelling.
		</p>

		<div class="hero-ctas">
			<button class="btn btn-primary large" onclick={() => scrollTo('pricing')}>
				See Pricing
			</button>
			<button class="btn btn-secondary large" onclick={() => scrollTo('how')}>
				See How It Works
			</button>
		</div>

		<div class="hero-stats">
			<div><strong>100% freeform</strong> input</div>
			<div><strong>$1</strong> per million tokens</div>
			<div><strong>Unlimited</strong> adventure length</div>
		</div>
	</div>

	<!-- Visual preview -->
	<div class="hero-visual">
		<img src={image01} alt="Sample animated scene from a ChatRPG adventure" />
	</div>
</header>

<style>
	/* Hero specific styles */
	.hero {
		min-height: 100dvh;
		display: grid;
		grid-template-columns: 1fr 1fr;
		align-items: center;
		gap: 60px;
		padding: 120px 24px 60px;
		max-width: 1080px;
		margin: 0 auto;
	}
	.hero-content {
		max-width: 560px;
	}
	.hero .badge {
		display: inline-block;
		background: #1f1f27;
		color: #c084fc;
		font-size: 12px;
		font-weight: 600;
		padding: 4px 14px;
		border-radius: 999px;
		margin-bottom: 24px;
		letter-spacing: 1px;
	}
	.hero h1 {
		font-size: clamp(2.8rem, 7vw, 4.2rem);
		margin-bottom: 24px;
		letter-spacing: -2.5px;
	}
	.hero-subtitle {
		font-size: 1.25rem;
		color: #a1a1aa;
		margin-bottom: 32px;
		max-width: 460px;
	}
	.hero-ctas {
		display: flex;
		gap: 14px;
		flex-wrap: wrap;
		margin-bottom: 48px;
	}
	.hero-stats {
		display: flex;
		gap: 28px;
		font-size: 14px;
		color: #a1a1aa;
	}
	.hero-stats strong {
		color: #e5e5ea;
	}

	/* Hero visual */
	.hero-visual {
		position: relative;
	}
	.hero-visual img {
		background: #121218;
		border: 1px solid #2a2a35;
		border-radius: 16px;
		box-shadow: 0 30px 70px -15px rgba(0, 0, 0, 0.6);
		max-width: 380px;
		margin-left: auto;
		display: block;
		width: 100%;
		height: auto;
	}

	@media (max-width: 900px) {
		.hero {
			grid-template-columns: 1fr;
			padding-top: 100px;
			text-align: center;
		}
		.hero-content {
			max-width: none;
		}
		.hero-subtitle {
			margin-left: auto;
			margin-right: auto;
		}
		.hero-ctas {
			justify-content: center;
		}
		.hero-stats {
			justify-content: center;
		}
		.hero-visual {
			display: none;
		}
	}
</style>