Homepage renewal

messages/en.json

@@ -12,8 +12,8 @@
 	"header_learn": "Learn",
 	"header_proposal": "Proposal",
 	"home_action_c2a": "Take action",
-	"home_action_content": "Too few people are well-informed about the potential risks of AI. Inform others, and help stop this race to the bottom.",
-	"home_action_title": "<u>YOU</u> CAN HELP",
+	"home_action_content": "Recent breakthroughs on AI have started a race to the bottom. Too few people are well-informed about the potential risks of AI, so you can make the difference.",
+	"home_action_title": "WE NEED TO ACT <u>RIGHT NOW</u>",
 	"home_hero__instructions": "This is directed at the reader, translate it informally.",
 	"home_hero": "DON'T LET AI COMPANIES GAMBLE WITH OUR FUTURE",
 	"home_proposal_c2a": "Read the proposal",
@@ -38,7 +38,7 @@
 	"home_quotes_turing_text": "... we should have to expect the machines to take control.",
 	"home_quotes_turing_title": "Inventor of the modern computer",
 	"home_risks_c2a": "Read about the risks",
-	"home_risks_content": "AI can have amazing benefits, but it could also erode our democracy, destabilize our economy and could be used to create powerful cyber weapons.",
+	"home_risks_content": "AI can have amazing benefits, but it could also erode our democracy, destabilize our economy and could be used to create powerful cyber weapons. Also many AI labs and experts agree: AI could end humanity.",
 	"home_risks_title": "We risk <u>losing control</u>",
 	"home_stats_alignment": "of AI scientists believe the alignment problem is real & important",
 	"home_stats_citizens": "of citizens want AI to be slowed down by our governments",

src/lib/components/Hero.svelte

@@ -1,14 +1,11 @@
 <script lang="ts">
-	import london from '$assets/protests/london.jpeg?enhanced'
-	import denHaag from '$assets/protests/den-haag.jpeg?enhanced'
-	import sf from '$assets/protests/san-francisco.jpeg?enhanced'
+	import mashupDesktop from '$assets/protests/mashup_desktop.jpg?enhanced'
+	import mashupMobile from '$assets/protests/mashup_mobile.jpg?enhanced'
 	import { onMount } from 'svelte'
 	import { emulateCqwIfNeeded } from '$lib/container-query-units'
-	import * as m from '$lib/paraglide/messages.js'
+
 	import Link from '$lib/components/Link.svelte'
 
-	let currentImageIndex = 0
-	const images = [london, denHaag, sf]
 	let isMobile = false
 	let tagline: HTMLDivElement
 
@@ -20,17 +17,9 @@
 		checkMobile()
 		window.addEventListener('resize', checkMobile)
 
-		// Switch images every 5 seconds
-		const interval = setInterval(() => {
-			if (isMobile) {
-				currentImageIndex = (currentImageIndex + 1) % images.length
-			}
-		}, 5000)
-
 		const cleanupCqwEmulation = emulateCqwIfNeeded(tagline)
 
 		return () => {
-			clearInterval(interval)
 			window.removeEventListener('resize', checkMobile)
 			cleanupCqwEmulation?.()
 		}
@@ -39,64 +28,66 @@
 
 <div class="hero">
 	{#if isMobile}
-		{#each images as image, i}
-			<enhanced:img src={image} sizes="100vw" alt="" class:active={currentImageIndex === i} />
-		{/each}
+		<enhanced:img src={mashupMobile} sizes="100vw" alt="" />
 	{:else}
-		<enhanced:img src={london} sizes="100vw" alt="" />
-		<enhanced:img src={denHaag} sizes="100vw" alt="" />
-		<enhanced:img src={sf} sizes="100vw" alt="" />
+		<enhanced:img src={mashupDesktop} sizes="100vw" alt="" />
 	{/if}
 	<div class="overlay"></div>
-	<div class="tagline" bind:this={tagline}>
-		<h2>{m.home_hero()}</h2>
-	</div>
-	<div class="actions">
-		<Link href="/join">{m.header_join()}</Link>
-		<Link href="/donate">{m.header_donate()}</Link>
+	<div class="content" bind:this={tagline}>
+		<h2>Don’t let AI companies<br />gamble away our future</h2>
+		<div class="actions">
+			<Link href="/join" class="btn-primary">Get involved</Link>
+			<Link href="/donate" class="btn-secondary">Donate</Link>
+		</div>
 	</div>
 </div>
 
 <style>
-	.tagline {
-		background-color: black;
+	.content {
 		position: absolute;
 		top: 50%;
-		left: 50%;
-		transform: translate(-50%, -50%);
-		width: clamp(20rem, 45vw, 100%);
+		left: 10%; /* Left aligned */
+		transform: translateY(-50%);
+		width: clamp(20rem, 60vw, 100%);
 		container-type: inline-size;
 		--cqw: 1cqw;
+		display: flex;
+		flex-direction: column;
+		gap: 1.5rem;
 	}
 
-	.tagline h2 {
-		text-transform: uppercase;
+	.content h2 {
 		color: white;
-		font-size: calc(8.75 * var(--cqw));
-		text-align: center;
+		font-family: var(--font-heading);
+		font-weight: 700;
+		font-size: calc(6 * var(--cqw));
+		line-height: 1.1;
+		text-align: left;
 		margin: 0;
-		padding: calc(6.5 * var(--cqw));
+		text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
 	}
 
 	@media (max-width: 850px) {
-		.tagline h2 {
-			font-size: calc(8.5 * var(--cqw));
-			padding: calc(7.5 * var(--cqw));
+		.content {
+			left: 5%;
+			width: 90%;
+		}
+
+		.content h2 {
+			font-size: calc(8 * var(--cqw));
 		}
 	}
 
 	.hero {
-		display: grid;
-		grid-template-columns: repeat(3, 1fr);
+		display: block;
 		height: 100vh;
 		min-height: var(--hero-min-height);
 		overflow: hidden;
 		position: relative;
-		/* Full-bleed: use transform-based centering instead of margin calc
-		   (fixes WebKit/iOS Safari rendering issue - see #562) */
 		width: 100vw;
 		left: 50%;
 		transform: translateX(-50%);
+		background-color: white;
 	}
 
 	.overlay {
@@ -105,29 +96,42 @@
 		left: 0;
 		width: 100%;
 		height: 100%;
+		opacity: 0.75;
 		background-color: var(--brand);
-		opacity: 0.8;
+		/*background: linear-gradient(90deg, var(--brand) 0%, rgba(252, 151, 0, 0.4) 100%);*/
 	}
 
 	.actions {
-		position: absolute;
-		bottom: 10%;
-		left: 50%;
-		transform: translateX(-50%);
 		display: flex;
 		gap: 1rem;
+		justify-content: flex-start;
 	}
 
+	/* Global styles for Link component when used here */
 	.actions :global(a) {
-		background-color: white;
 		font-family: var(--font-heading);
 		text-decoration: none;
-		font-size: 1.2rem;
-		color: black;
-		padding: 1rem 2rem;
+		font-size: 1rem;
+		padding: 0.6rem 1.6rem;
 		text-transform: uppercase;
 		transition: scale 0.1s;
 		cursor: pointer;
+		border-radius: 4px; /* Slight rounding if desired, or keep square */
+		font-weight: bold;
+		display: inline-block;
+		text-align: center;
+	}
+
+	.actions :global(a.btn-primary) {
+		background-color: #1a1a1a; /* Dark button */
+		color: white;
+		border: 2px solid #1a1a1a;
+	}
+
+	.actions :global(a.btn-secondary) {
+		background-color: white;
+		color: black;
+		border: 2px solid white;
 	}
 
 	.actions :global(a:hover) {
@@ -139,30 +143,9 @@
 	}
 
 	.hero :global(img) {
-		/* 2x the blur */
-		width: calc(100% + 10px);
+		width: 100%;
 		height: 100%;
 		object-fit: cover;
-		filter: blur(5px);
-	}
-
-	@media (max-width: 768px) {
-		.hero {
-			display: block;
-		}
-
-		.hero :global(img) {
-			position: absolute;
-			opacity: 0;
-			transition:
-				opacity 1s ease-in-out,
-				transform 10s ease-in-out;
-			transform: scale(1.1);
-		}
-
-		.hero :global(img.active) {
-			opacity: 1;
-			transform: scale(1);
-		}
+		transform: scale(1) translateX(150px);
 	}
 </style>

src/lib/components/Home.svelte

@@ -29,21 +29,11 @@
 		<span slot="title">{@html m.home_risks_title()}</span>
 		{m.home_risks_content()}
 	</Block>
-	<Block linkText={m.home_xrisk_c2a()} href="/xrisk">
-		<!-- eslint-disable-next-line svelte/no-at-html-tags -- static content -->
-		<span slot="title">{@html m.home_xrisk_title()}</span>
-		{m.home_xrisk_content()}
-	</Block>
 	<Block linkText={m.home_proposal_c2a()} href="/proposal">
 		<!-- eslint-disable-next-line svelte/no-at-html-tags -- static content -->
 		<span slot="title">{@html m.home_proposal_title()}</span>
 		{m.home_proposal_content()}
 	</Block>
-	<Block linkText={m.home_urgency_c2a()} href="/urgency">
-		<!-- eslint-disable-next-line svelte/no-at-html-tags -- static content -->
-		<span slot="title">{@html m.home_urgency_title()}</span>
-		{m.home_urgency_content()}
-	</Block>
 	<Block linkText={m.home_action_c2a()} href="/action">
 		<!-- eslint-disable-next-line svelte/no-at-html-tags -- static content -->
 		<span slot="title">{@html m.home_action_title()}</span>