Feat/create hero

src/app/(frontend)/about-us/page.tsx

@@ -1,13 +1,17 @@
 import AboutIntro from '../components/AboutIntro'
 import Grid from '../components/Grid'
+import Hero from '../components/Hero'
 
 export default function AboutUsPage() {
   return (
-    <main className="min-h-screen bg-white text-black">
-      <AboutIntro />
-      <Grid title="People" placeholderSubtitle="Name" />
-      <Grid title="Alumni" placeholderSubtitle="Role" />
-      <Grid title="Partners" placeholderSubtitle="Company" />
-    </main>
+    <div>
+      <Hero title="About Us" backgroundImage="/hero-placeholder.jpg" />
+      <main className="min-h-screen bg-white text-black">
+        <AboutIntro />
+        <Grid title="People" placeholderSubtitle="Name" />
+        <Grid title="Alumni" placeholderSubtitle="Role" />
+        <Grid title="Partners" placeholderSubtitle="Company" />
+      </main>
+    </div>
   )
 }

src/app/(frontend)/components/Hero.tsx

@@ -0,0 +1,77 @@
+import Image from 'next/image'
+import Link from 'next/link'
+import React from 'react'
+
+const NAV_LINKS = [
+  { label: 'HOME', href: '/' },
+  { label: 'ABOUT US', href: '/about-us' },
+  { label: 'CONCERT & EVENTS', href: '/concerts-events' },
+  { label: 'JOIN AYO', href: '/join-ayo' },
+  { label: 'SUPPORT US', href: '/support-us' },
+]
+
+type HeroProps = {
+  title: string
+  /** Absolute path from /public, e.g. "/hero-orchestra.jpg" */
+  backgroundImage?: string
+}
+
+const Hero = ({ title, backgroundImage }: HeroProps) => {
+  return (
+    <section className="relative w-full h-screen min-h-[600px] flex flex-col overflow-hidden">
+      {/* Background */}
+      {backgroundImage ? (
+        <Image
+          src={backgroundImage}
+          alt={title}
+          fill
+          className="object-cover object-center"
+          priority
+        />
+      ) : (
+        <div className="absolute inset-0 bg-neutral-700" />
+      )}
+
+      {/* Dark scrim */}
+      <div className="absolute inset-0 bg-black/45" />
+
+      {/* Layered content */}
+      <div className="relative z-10 flex flex-col h-full">
+        {/* Nav */}
+        <nav className="flex items-center justify-between px-10 py-6">
+          <Image
+            src="/ayo-logo-white.png"
+            alt="Auckland Youth Orchestra"
+            width={110}
+            height={44}
+            className="object-contain"
+          />
+          <ul className="flex items-center gap-10 list-none m-0 p-0">
+            {NAV_LINKS.map((link) => (
+              <li key={link.label}>
+                <Link
+                  href={link.href}
+                  className="text-white text-sm font-semibold tracking-wide hover:opacity-70 transition-opacity no-underline"
+                >
+                  {link.label}
+                </Link>
+              </li>
+            ))}
+          </ul>
+        </nav>
+
+        {/* Title pinned to bottom-left */}
+        <div className="mt-auto px-10 pb-10">
+          <h1
+            className="text-white font-bold leading-none m-0"
+            style={{ fontSize: 'clamp(3.5rem, 9vw, 8rem)' }}
+          >
+            {title}
+          </h1>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default Hero

src/app/(frontend)/concerts-events/page.tsx

@@ -1,3 +1,11 @@
+import Hero from '../components/Hero'
 export default function ConcertsEventsPage() {
-  return <main>This is the concerts & events page</main>
+  return (
+    <div className="w-full h-[400px] relative">
+      <div className="w-full h-[vh] relative">
+        <Hero title="Concert & Events" backgroundImage="/hero-placeholder.jpg" />
+      </div>
+      <main>This is the concerts & events page</main>
+    </div>
+  )
 }

src/app/(frontend)/join-ayo/page.tsx

@@ -1,10 +1,12 @@
 import FAQSection from '../components/FAQSection'
 import OpportunitySection from '../components/OpportunitySection'
 import OpportunityModal from '../components/OpportunityModal'
+import Hero from '../components/Hero'
 
 export default function JoinAyoPage() {
   return (
     <main>
+      <Hero title="Join AYO" backgroundImage="/hero-placeholder.jpg" />
       <OpportunitySection />
       <FAQSection />
     </main>

src/app/(frontend)/layout.tsx

@@ -14,7 +14,6 @@ export default async function RootLayout(props: { children: React.ReactNode }) {
   return (
     <html lang="en">
       <body>
-        <Header />
         <main>{children}</main>
         <Footer />
       </body>

src/app/(frontend)/page.tsx

@@ -1,11 +1,13 @@
 import React from 'react'
+import Hero from './components/Hero'
 import AboutIntro from './components/AboutIntro'
 import EventsBlock from './components/events/EventsBlock'
 import BlogsBlock from './components/blogs/BlogsBlock'
 
 export default function LandingPage() {
   return (
     <main className="min-h-screen bg-white text-black">
+      <Hero title="Here Plays The Future" backgroundImage="/hero-placeholder.jpg" />
       <AboutIntro />
       <EventsBlock />
       <BlogsBlock />

src/app/(frontend)/support-us/page.tsx

@@ -1,14 +1,17 @@
 import Link from 'next/link'
 import DonationBlock from '../components/DonationBlock'
+import Hero from '../components/Hero'
 export default function SupportUsPage() {
   const tierArray = [
     {
       tierName: 'Subscriber',
       descriptionContent: (
-        <p>Subscribers pay an annual subscription of $25.00 as a donation towards our ongoing work and their names 
-          are listed in our printed concert programmes. 
-          They automatically become Members of the incorporated society 
-          and, as such, are entitled to attend General Meetings and vote.</p>
+        <p>
+          Subscribers pay an annual subscription of $25.00 as a donation towards our ongoing work
+          and their names are listed in our printed concert programmes. They automatically become
+          Members of the incorporated society and, as such, are entitled to attend General Meetings
+          and vote.
+        </p>
       ),
       linkText: 'Register',
       linkUrl: '',
@@ -17,28 +20,35 @@ export default function SupportUsPage() {
       tierName: 'Supporter',
       descriptionContent: (
         <>
-          <p>Supporters donate a minimum of <strong>$75.00</strong> and, to show our appreciation for their support: </p>
-
-          <ul className='list-disc pl-6 py-4'>
-            <li>Their names are listed in the printed programmes (unless anonymity is requested); and,</li>
-            <li>Some of the best seats are cordoned off exclusively for them at the free Auckland Town Hall concerts. </li>
+          <p>
+            Supporters donate a minimum of <strong>$75.00</strong> and, to show our appreciation for
+            their support:{' '}
+          </p>
+
+          <ul className="list-disc pl-6 py-4">
+            <li>
+              Their names are listed in the printed programmes (unless anonymity is requested); and,
+            </li>
+            <li>
+              Some of the best seats are cordoned off exclusively for them at the free Auckland Town
+              Hall concerts. 
+            </li>
           </ul>
 
-          <div className = "max-w">
-            <div className = "flex justify-between">
-              <span className = "font-semibold">General Supporter</span>
+          <div className="max-w">
+            <div className="flex justify-between">
+              <span className="font-semibold">General Supporter</span>
               <span>$75.00+</span>
             </div>
-            <div className = "flex justify-between">
-              <span className = "font-semibold">Special Supporter</span>
+            <div className="flex justify-between">
+              <span className="font-semibold">Special Supporter</span>
               <span>$500.00+</span>
             </div>
-            <div className = "flex justify-between">
-              <span className = "font-semibold">General Supporter</span>
+            <div className="flex justify-between">
+              <span className="font-semibold">General Supporter</span>
               <span>$5,000.00+</span>
             </div>
           </div>
-
         </>
       ),
       linkText: 'Register',
@@ -47,14 +57,22 @@ export default function SupportUsPage() {
     {
       tierName: 'KORA Cards',
       descriptionContent: (
-        <p>Sign up for Kora fuel cards and a few cents per litre will be donated to AYO every time you fill up at either a Mobil or Waitomo station.  Kora offers cardholders a discount of 10c/litre and you can have some (or all!) of that saving donated to AYO automatically!</p>
+        <p>
+          Sign up for Kora fuel cards and a few cents per litre will be donated to AYO every time
+          you fill up at either a Mobil or Waitomo station.  Kora offers cardholders a discount of
+          10c/litre and you can have some (or all!) of that saving donated to AYO automatically!
+        </p>
       ),
       linkText: 'Read More',
       linkUrl: '',
-    }
+    },
   ]
   return (
     <main>
+      <div className="w-full h-[vh] relative">
+        <Hero title="Support Us" backgroundImage="/hero-placeholder.jpg" />
+      </div>
+
       <div className="text-black w-full">
         <div className="flex justify-center">
           <div className="text-body my-10 w-[90%]">