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

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

	const news = [
		{
			id: 1,
			title: "Ocean Cleanup hits milestone",
			desc: "500 tons of plastic have been successfully removed from the Pacific garbage patch, marking a major breakthrough in ocean restoration efforts.",
			date: "2h ago",
			icon: "ri:ship-line",
			tag: "Trending",
		},
		{
			id: 2,
			title: "New Plastic Ban in effect",
			desc: "Major cities across the globe adopt strict single-use plastic policies, signaling a shift toward sustainable alternatives.",
			date: "5h ago",
			icon: "ri:prohibited-line",
			tag: "Policy",
		},
		{
			id: 3,
			title: "Ethix App launches globally",
			desc: "Empowering users worldwide to make better choices with AI-powered sustainability scanning and verification.",
			date: "1d ago",
			icon: "ri:global-line",
			tag: "Launch",
		},
	];
</script>

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

	<div class="content-container">
		<div class="header">
			<h1 class="page-title">Eco News</h1>
			<p class="subtitle">Latest sustainability updates</p>
		</div>

		<div class="news-grid">
			{#each news as item (item.id)}
				<article class="news-card">
					<div class="card-header">
						<div class="news-icon">
							<iconify-icon icon={item.icon} width="28"
							></iconify-icon>
						</div>
						<span class="news-tag">{item.tag}</span>
					</div>
					<div class="news-meta">{item.date}</div>
					<h2 class="news-title">{item.title}</h2>
					<p class="news-desc">{item.desc}</p>
					<a href="/news/{item.id}" class="news-link">
						Read more
						<iconify-icon icon="ri:arrow-right-line" width="16"
						></iconify-icon>
					</a>
				</article>
			{/each}
		</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 {
		margin-bottom: 40px;
		text-align: center;
	}

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

	.subtitle {
		color: rgba(255, 255, 255, 0.5);
		font-size: 16px;
		margin: 10px 0 0 0;
	}

	.news-grid {
		display: flex;
		flex-direction: column;
		gap: 20px;
	}

	.news-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;
		padding: 28px;
		transition: all 0.3s ease;
	}

	.news-card:hover {
		background: rgba(0, 0, 0, 0.45);
		border-color: rgba(255, 255, 255, 0.15);
		transform: translateY(-2px);
	}

	.card-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 16px;
	}

	.news-icon {
		width: 52px;
		height: 52px;
		background: rgba(34, 197, 94, 0.15);
		border-radius: 14px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #4ade80;
	}

	.news-tag {
		background: rgba(34, 197, 94, 0.2);
		color: #4ade80;
		padding: 6px 14px;
		border-radius: 50px;
		font-size: 12px;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.5px;
	}

	.news-meta {
		color: rgba(255, 255, 255, 0.4);
		font-size: 13px;
		margin-bottom: 8px;
	}

	.news-title {
		color: white;
		font-weight: 700;
		font-size: 22px;
		margin: 0 0 12px 0;
		line-height: 1.3;
	}

	.news-desc {
		color: rgba(255, 255, 255, 0.6);
		font-size: 15px;
		line-height: 1.6;
		margin: 0 0 20px 0;
	}

	.news-link {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		font-size: 14px;
		font-weight: 600;
		color: #4ade80;
		text-decoration: none;
		transition: all 0.2s ease;
	}

	.news-link:hover {
		gap: 12px;
		color: #86efac;
	}

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

		.news-grid {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 24px;
		}

		.news-card:first-child {
			grid-column: span 2;
		}
	}

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

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