Hoya26/frontend/src/routes/goal/+page.svelte

<script lang="ts">
	import ParallaxLandscape from "$lib/components/ParallaxLandscape.svelte";
</script>

<div class="page-wrapper">
	<div class="desktop-bg">
		<ParallaxLandscape />
	</div>

	<div class="content-container">
		<div class="header-card">
			<h1 class="page-title">Why We Exist</h1>
			<p class="subtitle">Our Mission & Goal</p>
		</div>

		<div class="grid-layout">
			<div class="glass-card mission-card">
				<div class="icon-circle problem-icon">
					<iconify-icon
						icon="ri:error-warning-fill"
						width="32"
						style="color: #ef4444;"
					></iconify-icon>
				</div>
				<h2 class="card-title">The Problem</h2>
				<p class="card-desc">
					"Greenwashing" is everywhere. Companies spend millions to
					make you believe their products are sustainable, when often
					they are not.
				</p>
				<div class="stat-highlight">
					<span class="stat-number">53%</span>
					<span class="stat-label"
						>of green claims are vague or misleading</span
					>
				</div>
			</div>

			<div class="glass-card mission-card">
				<div class="icon-circle solution-icon">
					<iconify-icon
						icon="ri:eye-fill"
						width="32"
						style="color: #4ade80;"
					></iconify-icon>
				</div>
				<h2 class="card-title">The Solution</h2>
				<p class="card-desc">
					We believe in radical transparency. By using AI to analyze
					packaging and verify claims, we give power back to you, the
					consumer.
				</p>
				<ul class="benefit-list">
					<li>
						<iconify-icon
							icon="ri:check-line"
							width="20"
							style="color: #4ade80;"
						></iconify-icon>
						<span>Instant Fact-Checking</span>
					</li>
					<li>
						<iconify-icon
							icon="ri:check-line"
							width="20"
							style="color: #4ade80;"
						></iconify-icon>
						<span>Unbiased Eco-Ratings</span>
					</li>
					<li>
						<iconify-icon
							icon="ri:check-line"
							width="20"
							style="color: #4ade80;"
						></iconify-icon>
						<span>Real Sustainable Alternatives</span>
					</li>
				</ul>
			</div>

			<div class="glass-card goal-card">
				<div class="header-row">
					<iconify-icon
						icon="ri:flag-fill"
						width="32"
						style="color: #4ade80;"
					></iconify-icon>
					<h2 class="card-title large">Our Ultimate Goal</h2>
				</div>
				<p class="goal-text">
					To create a world where <span class="highlight"
						>sustainability is the default</span
					>, not a luxury. Where every purchase you make pushes the
					industry toward a cleaner, ethical future.
				</p>
			</div>
		</div>
	</div>
</div>

<style>
	.page-wrapper {
		width: 100%;
		min-height: 100vh;
		overflow-x: hidden;
		position: relative;
	}

	.desktop-bg {
		display: none;
	}

	.content-container {
		position: relative;
		z-index: 10;
		padding: 100px 24px 120px;
		max-width: 900px;
		margin: 0 auto;
	}

	.header-card {
		text-align: center;
		margin-bottom: 48px;
	}

	.page-title {
		color: white;
		font-size: 48px;
		font-weight: 900;
		margin: 0;
		letter-spacing: -2px;
	}

	.subtitle {
		color: rgba(255, 255, 255, 0.5);
		font-size: 14px;
		margin: 12px 0 0 0;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 2px;
	}

	.grid-layout {
		display: flex;
		flex-direction: column;
		gap: 24px;
	}

	.glass-card {
		background: rgba(0, 0, 0, 0.35);
		backdrop-filter: blur(16px);
		-webkit-backdrop-filter: blur(16px);
		border: 1px solid rgba(255, 255, 255, 0.1);
		border-radius: 24px;
		box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
		padding: 36px;
		transition: all 0.3s ease;
	}

	.glass-card:hover {
		background: rgba(0, 0, 0, 0.45);
		border-color: rgba(255, 255, 255, 0.15);
	}

	.mission-card {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}

	.goal-card {
		text-align: center;
		align-items: center;
		display: flex;
		flex-direction: column;
	}

	.icon-circle {
		width: 64px;
		height: 64px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 20px;
	}

	.problem-icon {
		background: rgba(239, 68, 68, 0.15);
	}

	.solution-icon {
		background: rgba(34, 197, 94, 0.15);
	}

	.card-title {
		color: white;
		font-size: 24px;
		font-weight: 700;
		margin: 0 0 16px 0;
	}

	.card-title.large {
		font-size: 28px;
		margin-bottom: 0;
	}

	.card-desc {
		color: rgba(255, 255, 255, 0.7);
		font-size: 16px;
		line-height: 1.6;
		margin: 0 0 24px 0;
	}

	.stat-highlight {
		background: rgba(239, 68, 68, 0.15);
		border: 1px solid rgba(239, 68, 68, 0.3);
		padding: 16px 20px;
		border-radius: 16px;
		display: flex;
		align-items: center;
		gap: 16px;
		width: 100%;
	}

	.stat-number {
		font-size: 36px;
		font-weight: 900;
		color: #ef4444;
	}

	.stat-label {
		color: rgba(255, 255, 255, 0.8);
		font-size: 14px;
		font-weight: 500;
		line-height: 1.4;
	}

	.benefit-list {
		list-style: none;
		padding: 0;
		margin: 0;
		width: 100%;
	}

	.benefit-list li {
		display: flex;
		align-items: center;
		gap: 12px;
		margin-bottom: 14px;
		font-size: 15px;
		color: white;
		font-weight: 600;
	}

	.benefit-list li:last-child {
		margin-bottom: 0;
	}

	.header-row {
		display: flex;
		align-items: center;
		gap: 14px;
		margin-bottom: 20px;
	}

	.goal-text {
		color: rgba(255, 255, 255, 0.7);
		font-size: 18px;
		line-height: 1.7;
		margin: 0;
		max-width: 600px;
	}

	.highlight {
		color: #4ade80;
		font-weight: 700;
	}

	@media (min-width: 768px) {
		.desktop-bg {
			display: block;
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			pointer-events: none;
		}

		.grid-layout {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 24px;
		}

		.goal-card {
			grid-column: span 2;
		}
	}

	@media (max-width: 767px) {
		.content-container {
			padding: 60px 20px 100px;
		}

		.page-title {
			font-size: 32px;
		}
	}
</style>