Merge pull request #21 from alan-turing-institute/hero-image-and-logo

fix responsiveness of hero section

Author: chrisdburr

public/images/hero.jpg

@@ -4,33 +4,43 @@ import Button from "@ui/Button.astro";
 const title = "Networks of Cardiovascular Digital Twins";
 const subTitle =
 	"Pioneering personalised cardiovascular care through interconnected digital twins";
-// TODO: Add Hero Image placeholder (_being developed_)
 const primaryCTA = { text: "Find Out More", href: "/about/project-overview" }; // Astro's Button component will handle base URL prefix
 const secondaryCTA = { text: "Contact Us", href: "/about/contact" }; // Astro's Button component will handle base URL prefix
 ---
 
-{/* Hero Content */}
-<div class="mx-auto max-w-4xl text-left select-none sm:text-center">
-	<h1
-		class="block text-4xl text-balance text-slate-800 sm:text-5xl md:text-6xl lg:text-7xl"
-	>
-		{title}
-	</h1>
-</div>
+<div
+	class="w-full space-y-5 px-3 pb-4 text-center sm:px-4 md:w-3/5 md:space-y-6 md:pb-0 md:text-left lg:w-1/2"
+>
+	<div class="select-none">
+		<h1
+			class="block text-3xl leading-tight font-bold text-pretty text-slate-800 drop-shadow-xl sm:text-4xl md:text-4xl lg:text-5xl xl:text-6xl"
+		>
+			{title}
+		</h1>
+	</div>
 
-<div class="mx-auto max-w-3xl text-left sm:text-center">
-	<p class="text-lg text-pretty text-slate-700">
-		{subTitle}
-	</p>
-</div>
+	<div>
+		<p
+			class="text-base text-pretty text-slate-800 drop-shadow-md md:text-lg"
+		>
+			{subTitle}
+		</p>
+	</div>
 
-{/* CTA Buttons */}
-<div class="flex flex-col justify-center gap-5 sm:flex-row">
-	{
-		/* Note: Swapped primary/secondary variants to match the variable renaming */
-	}
-	<Button href={primaryCTA.href} variant="primary">{primaryCTA.text}</Button>
-	<Button href={secondaryCTA.href} variant="secondary"
-		>{secondaryCTA.text}</Button
+	{/* CTA Buttons */}
+	<div
+		class="flex flex-col justify-center gap-3 pt-2 sm:flex-row md:justify-start md:pt-4"
 	>
+		<Button
+			href={primaryCTA.href}
+			variant="primary"
+			className="text-sm shadow-md md:text-base">{primaryCTA.text}</Button
+		>
+		<Button
+			href={secondaryCTA.href}
+			variant="secondary"
+			className="bg-white/80 text-sm shadow-sm md:text-base"
+			>{secondaryCTA.text}</Button
+		>
+	</div>
 </div>

public/images/logo.png

@@ -1,12 +1,43 @@
 ---
 import HeroContent from "@common/HeroContent.astro";
+import HeroBackground from "../../assets/images/hero_background.png";
+import HeroForeground from "../../assets/images/hero_foreground.svg";
 ---
 
-<section class="bg-linear-to-b/oklch from-teal-200 via-transparent to-white">
-  <div class="mx-auto max-w-[85rem] space-y-8 px-4 pb-12 pt-48 sm:px-6 lg:px-8">
+<section
+	class="hero-section relative min-h-[70vh] bg-cover bg-center pt-20 sm:pt-20 md:min-h-[75vh] md:pt-10 lg:pt-10"
+	style={`background-image: url(${HeroBackground.src})`}
+>
+	{/* Content container with z-index to position on top of image */}
+	<div
+		class="relative z-10 mx-auto flex min-h-[60vh] max-w-[85rem] flex-col items-center px-4 py-6 sm:px-6 md:min-h-[65vh] md:flex-row md:items-center md:py-12 lg:px-8 lg:py-16"
+	>
+		<HeroContent />
 
-    {/* Hero Content */}
-    <HeroContent />
-
-  </div>
+		<div class="mx-auto mt-6 w-full md:mx-0 md:mt-0 md:w-2/5 md:pl-4">
+			<img
+				src={HeroForeground.src}
+				alt="Cardiovascular Digital Twin Illustration"
+				class="mx-auto h-auto w-full max-w-full object-contain drop-shadow-xl md:w-full"
+			/>
+		</div>
+	</div>
 </section>
+
+<style>
+	.hero-section::after {
+		content: "";
+		position: absolute;
+		bottom: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		background: linear-gradient(
+			to bottom,
+			rgba(255, 255, 255, 0) 70%,
+			rgba(255, 255, 255, 0.8) 90%,
+			rgba(255, 255, 255, 1) 100%
+		);
+		pointer-events: none; /* Ensures clicks pass through to elements beneath */
+	}
+</style>