add AI-generated landing page photography (Gemini 3 Pro)
20 images generated via gemini-3-pro-image-preview (Nano Banana Pro): - Documentary street photography style, British-diverse subjects - 12 square (1:1), 8 landscape (16:9) matching placeholder aspect ratios - Replaced all ImagePlaceholder components with LandingImage + next/image - Images in public/images/landing/, served statically Pages updated: /, /for/charities, /for/fundraisers, /for/volunteers, /for/organisations New component: LandingImage (next/image with fill + object-cover)
This commit is contained in:
@@ -1,4 +1,5 @@
|
||||
import Link from "next/link"
|
||||
import Image from "next/image"
|
||||
|
||||
/* ── Nav ── */
|
||||
export function Nav() {
|
||||
@@ -79,7 +80,24 @@ export function BottomCta({ headline, sub }: { headline?: string; sub?: string }
|
||||
)
|
||||
}
|
||||
|
||||
/* ── Image Placeholder ── */
|
||||
/* ── Landing Image ── */
|
||||
export function LandingImage({ src, alt, aspect = "video" }: { src: string; alt: string; aspect?: "video" | "square" | "wide" }) {
|
||||
const aspectClass = aspect === "square" ? "aspect-square" : aspect === "wide" ? "aspect-[2/1]" : "aspect-video"
|
||||
return (
|
||||
<div className={`${aspectClass} w-full relative overflow-hidden bg-gray-100`}>
|
||||
<Image
|
||||
src={src}
|
||||
alt={alt}
|
||||
fill
|
||||
className="object-cover"
|
||||
sizes="(max-width: 768px) 100vw, 50vw"
|
||||
quality={85}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
/* ── Image Placeholder (kept as fallback) ── */
|
||||
export function ImagePlaceholder({ aspect = "video", label }: { aspect?: "video" | "square" | "wide"; label?: string }) {
|
||||
const aspectClass = aspect === "square" ? "aspect-square" : aspect === "wide" ? "aspect-[2/1]" : "aspect-video"
|
||||
return (
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import Link from "next/link"
|
||||
import { Nav, Footer, BottomCta, ImagePlaceholder } from "../_components"
|
||||
import { Nav, Footer, BottomCta, LandingImage } from "../_components"
|
||||
|
||||
export default function ForCharitiesPage() {
|
||||
return (
|
||||
@@ -26,7 +26,7 @@ export default function ForCharitiesPage() {
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<ImagePlaceholder aspect="square" label="Charity manager reviewing dashboard on laptop at event" />
|
||||
<LandingImage src="/images/landing/08-charities-hero.jpg" alt="Charity manager reviewing dashboard on laptop at mosque fundraising event" aspect="square" />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -49,7 +49,7 @@ export default function ForCharitiesPage() {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ── How it works — with image ── */}
|
||||
{/* ── How it works — with images ── */}
|
||||
<section className="py-24 px-6">
|
||||
<div className="max-w-5xl mx-auto grid md:grid-cols-2 gap-16 items-start">
|
||||
<div>
|
||||
@@ -73,8 +73,8 @@ export default function ForCharitiesPage() {
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-6">
|
||||
<ImagePlaceholder aspect="square" label="Mobile pledge form — amount selection" />
|
||||
<ImagePlaceholder aspect="video" label="WhatsApp reminder conversation" />
|
||||
<LandingImage src="/images/landing/09-charities-amount-selection.jpg" alt="Hand holding phone at charity dinner table showing pledge amount selection" aspect="square" />
|
||||
<LandingImage src="/images/landing/10-charities-whatsapp.jpg" alt="Woman on sofa viewing WhatsApp pledge reminder conversation" aspect="video" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import Link from "next/link"
|
||||
import { Nav, Footer, BottomCta, ImagePlaceholder } from "../_components"
|
||||
import { Nav, Footer, BottomCta, LandingImage } from "../_components"
|
||||
|
||||
export default function ForFundraisersPage() {
|
||||
return (
|
||||
@@ -26,7 +26,7 @@ export default function ForFundraisersPage() {
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<ImagePlaceholder aspect="square" label="Fundraiser sharing pledge link on phone" />
|
||||
<LandingImage src="/images/landing/11-fundraisers-hero.jpg" alt="Fundraiser sharing pledge link on phone with friend on London high street" aspect="square" />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -73,8 +73,8 @@ export default function ForFundraisersPage() {
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-6">
|
||||
<ImagePlaceholder aspect="square" label="External redirect — branded LaunchGood handoff" />
|
||||
<ImagePlaceholder aspect="video" label="Pledge tracking dashboard — conversion funnel" />
|
||||
<LandingImage src="/images/landing/12-fundraisers-redirect.jpg" alt="Hands holding phone in café showing fundraising page redirect" aspect="square" />
|
||||
<LandingImage src="/images/landing/13-fundraisers-dashboard.jpg" alt="Laptop showing pledge tracking dashboard with conversion funnel" aspect="video" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import Link from "next/link"
|
||||
import { Nav, Footer, BottomCta, ImagePlaceholder } from "../_components"
|
||||
import { Nav, Footer, BottomCta, LandingImage } from "../_components"
|
||||
|
||||
export default function ForOrganisationsPage() {
|
||||
return (
|
||||
@@ -26,7 +26,7 @@ export default function ForOrganisationsPage() {
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<ImagePlaceholder aspect="square" label="Multi-org pledge pipeline — boardroom view" />
|
||||
<LandingImage src="/images/landing/17-orgs-hero-boardroom.jpg" alt="Three people in charity office meeting room discussing pledge pipeline" aspect="square" />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -74,8 +74,8 @@ export default function ForOrganisationsPage() {
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-6">
|
||||
<ImagePlaceholder aspect="square" label="Pipeline view — pledges by organisation" />
|
||||
<ImagePlaceholder aspect="video" label="Instalment schedule — multi-month commitment" />
|
||||
<LandingImage src="/images/landing/18-orgs-pipeline.jpg" alt="Laptop showing Kanban-style pledge pipeline view by organisation" aspect="square" />
|
||||
<LandingImage src="/images/landing/19-orgs-instalment-schedule.jpg" alt="Laptop showing instalment schedule with monthly progress bars" aspect="video" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -83,7 +83,7 @@ export default function ForOrganisationsPage() {
|
||||
{/* ── Why this works ── */}
|
||||
<section className="py-24 bg-gray-50 px-6">
|
||||
<div className="max-w-5xl mx-auto grid md:grid-cols-2 gap-12 items-center">
|
||||
<ImagePlaceholder aspect="square" label="Organisation dashboard — commitment tracking" />
|
||||
<LandingImage src="/images/landing/20-orgs-laptop-desk.jpg" alt="Laptop on charity office desk showing commitment tracking dashboard" aspect="square" />
|
||||
<div>
|
||||
<h2 className="text-3xl font-black text-gray-900 tracking-tight mb-8">Spreadsheets don't send reminders</h2>
|
||||
<div className="space-y-5">
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import Link from "next/link"
|
||||
import { Nav, Footer, ImagePlaceholder } from "../_components"
|
||||
import { Nav, Footer, LandingImage } from "../_components"
|
||||
|
||||
export default function ForVolunteersPage() {
|
||||
return (
|
||||
@@ -26,7 +26,7 @@ export default function ForVolunteersPage() {
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<ImagePlaceholder aspect="square" label="Volunteer at event table with QR code stand" />
|
||||
<LandingImage src="/images/landing/14-volunteers-hero.jpg" alt="Volunteer at charity dinner table with QR code stand" aspect="square" />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -72,8 +72,8 @@ export default function ForVolunteersPage() {
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-6">
|
||||
<ImagePlaceholder aspect="square" label="Volunteer stats — live pledge counter on mobile" />
|
||||
<ImagePlaceholder aspect="video" label="Leaderboard — top collectors" />
|
||||
<LandingImage src="/images/landing/15-volunteers-phone-stats.jpg" alt="Volunteer holding phone showing live pledge counter at event" aspect="square" />
|
||||
<LandingImage src="/images/landing/16-volunteers-leaderboard.jpg" alt="Phone showing volunteer leaderboard with rankings" aspect="video" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user