language-learning-app/frontend/src/routes/login/+page.svelte

<script lang="ts">
	import type { PageProps } from './$types';
</script>

<div class="page">
	<aside class="brand-panel" aria-hidden="true">
		<div class="brand-content">
			<p class="brand-eyebrow">Language Learning App</p>
			<h1 class="brand-headline">Read.<br />Listen.<br />Remember.</h1>
		</div>
	</aside>

	<main class="form-panel">
		<div class="form-inner">
			<header class="form-header">
				<p class="form-eyebrow">Language Learnnig App</p>
				<h2 class="form-title">Sign in</h2>
			</header>

			<form method="POST" class="form">
				<div class="field">
					<label for="email" class="field-label">Email</label>
					<input
						id="email"
						name="email"
						class="field-input"
						type="email"
						placeholder="you@example.com"
						autocomplete="email"
						required
					/>
				</div>

				<div class="field">
					<label for="password" class="field-label">Password</label>
					<input
						id="password"
						name="password"
						class="field-input"
						type="password"
						placeholder="••••••••"
						autocomplete="current-password"
						required
					/>
				</div>

				<div class="field">
					<input type="submit" value="Log In" />
				</div>
			</form>

			<footer class="form-footer">
				<span>Don't have an account?</span>
				<a href="/register" class="link">Create one</a>
			</footer>
		</div>
	</main>
</div>

<style>
	/* -----------------------------------------------------------------------
	   Page layout: two-panel split
	   ----------------------------------------------------------------------- */

	.page {
		display: grid;
		grid-template-columns: 1fr 1fr;
		min-height: 100svh;
	}

	/* -----------------------------------------------------------------------
	   Left: brand panel
	   ----------------------------------------------------------------------- */

	.brand-panel {
		display: flex;
		align-items: flex-end;
		padding: var(--space-8);
		background: radial-gradient(
			ellipse at 30% 60%,
			var(--color-surface-container-low) 0%,
			var(--color-surface) 70%
		);
		border-right: none; /* no-line rule — tonal shift does the work */
	}

	.brand-content {
		max-width: 28rem;
	}

	.brand-eyebrow {
		font-family: var(--font-label);
		font-size: var(--text-label-md);
		font-weight: var(--weight-medium);
		letter-spacing: var(--tracking-wide);
		text-transform: uppercase;
		color: var(--color-primary);
		margin-bottom: var(--space-3);
	}

	.brand-headline {
		font-family: var(--font-display);
		font-size: var(--text-display-lg);
		font-weight: var(--weight-bold);
		line-height: var(--leading-tight);
		letter-spacing: var(--tracking-tight);
		color: var(--color-on-surface);
	}

	/* -----------------------------------------------------------------------
	   Right: form panel
	   ----------------------------------------------------------------------- */

	.form-panel {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: var(--space-8) var(--space-6);
		background-color: var(--color-surface-container-lowest);
	}

	.form-inner {
		width: 100%;
		max-width: 22rem;
	}

	/* -----------------------------------------------------------------------
	   Responsive: collapse to single column on mobile
	   ----------------------------------------------------------------------- */

	@media (max-width: 640px) {
		.page {
			grid-template-columns: 1fr;
		}

		.brand-panel {
			display: none;
		}

		.form-panel {
			padding: var(--space-10) var(--space-5);
		}
	}
</style>