Reorganize homepage layout

Switch from 5 small photos to one larger photo on the right

src/app/page.tsx

@@ -1,19 +1,15 @@
 import Image from 'next/image'
-import clsx from 'clsx'
 
 import Link from 'next/link'
 import { Card } from '@/components/Card'
 import { Container } from '@/components/Container'
-import { CalendarDaysIcon, EnvelopeIcon } from '@heroicons/react/24/solid'
+import { CalendarDaysIcon } from '@heroicons/react/24/solid'
 import exteriorFrontImage from '@/images/photos/exterior-front.png'
-import stageImage from '@/images/photos/stage.jpg'
-import exteriorSoutheastImage from '@/images/photos/exterior-southeast.jpg'
-import interorEmptyImage from '@/images/photos/interior-empty.jpg'
-import kitchenImage from '@/images/photos/kitchen.jpg'
 import { type BlogPostWithSlug, getAllBlogPosts } from '@/lib/articles'
 import { formatDate } from '@/lib/formatDate'
 import { promises as fs } from 'fs';
 
+
 function LinkButton({
   href,
   children,
@@ -24,9 +20,7 @@ function LinkButton({
   return (
     <Link
       href={href}
-      className="rounded-md px-3 py-2 font-semibold text-center transition hover:text-teal-500 dark:hover:text-teal-400 bg-zinc-200 hover:bg-zinc-100 dark:bg-zinc-700/40 dark:hover:bg-zinc-600/40"
+      className="rounded-md px-3 py-2 font-semibold text-center transition dark:hover:text-teal-400 bg-sky-300 hover:bg-sky-400 dark:bg-zinc-700/40 dark:hover:bg-zinc-600/40"
-
-
     >
       {children}
     </Link>
@@ -48,17 +42,6 @@ function Article({ article }: { article: BlogPostWithSlug }) {
   )
 }
 
-function Newsletter() {
-  return (
-    <div className="rounded-2xl border border-zinc-100 p-6 dark:border-zinc-700/40">
-      <div className="flex flex-col gap-y-4">
-        <LinkButton href='/club'>Join or Renew your Membership</LinkButton>
-        <LinkButton href='/rental'>Rent the Hall</LinkButton>
-      </div>
-    </div>
-  )
-}
-
 interface Meeting {
   title: string
   date: string
@@ -152,43 +135,18 @@ async function Events() {
   )
 }
 
-function Photos() {
-  let rotations = ['rotate-2', '-rotate-2', 'rotate-2', 'rotate-2', '-rotate-2']
-
-  return (
-    <div className="mt-16 sm:mt-20">
-      <div className="-my-4 flex justify-center gap-5 overflow-hidden py-4 sm:gap-8">
-        {[exteriorSoutheastImage, stageImage, exteriorFrontImage, interorEmptyImage, kitchenImage].map((image, imageIndex) => (
-          <div
-            key={image.src}
-            className={clsx(
-              'relative aspect-[9/10] w-44 flex-none overflow-hidden rounded-xl bg-zinc-100 dark:bg-zinc-800 sm:w-72 sm:rounded-2xl',
-              rotations[imageIndex % rotations.length],
-            )}
-          >
-            <Image
-              src={image}
-              alt=""
-              sizes="(min-width: 640px) 18rem, 11rem"
-              className="absolute inset-0 h-full w-full object-cover"
-            />
-          </div>
-        ))}
-      </div>
-    </div>
-  )
-}
-
 export default async function Home() {
   let articles = (await getAllBlogPosts()).slice(0, 4)
 
   return (
     <>
-      <Container className="mt-9">
+      <div className="mx-auto max-w-7xl px-6 mt-24 lg:px-8">
-        <div className="max-w-2xl">
+        <div className="relative px-4 sm:px-8 lg:px-12">
-          <h1 className="text-4xl font-bold tracking-tight text-zinc-800 dark:text-zinc-100 sm:text-5xl">
+          <div className="mx-auto max-w-2xl lg:mx-0 grid lg:max-w-none grid-cols-1 lg:grid-cols-2 lg:gap-x-8 gap-y-10">
+            <h1 className="text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl lg:col-span-2">
               West Sound Community Hall
             </h1>
+            <div className="max-w-xl">
               <p className="mt-6 text-base text-zinc-600 dark:text-zinc-400">
                 The West Sound Community Hall is located in the hamlet of West Sound
                 on Orcas Island, about 10 minutes from the ferry landing and
@@ -199,8 +157,20 @@ export default async function Home() {
                 Facing West Sound, the Hall is at the heart of the West Sound community.
               </p>
             </div>
-      </Container>
+            <Image
-      <Photos />
+              src={exteriorFrontImage}
+              alt="Exterior front of the West Sound Hall"
+              className="lg:row-span-2 w-full max-w-xl rounded-2xl object-cover lg:max-w-none"
+            />
+            <div className="h-fit max-w-xl rounded-2xl border border-zinc-100 p-6 dark:border-zinc-700/40">
+              <div className="flex flex-col gap-y-4">
+                <LinkButton href='/club'>Join or Renew your Membership</LinkButton>
+                <LinkButton href='/rental'>Rent the Hall</LinkButton>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
       <Container className="mt-24 md:mt-28">
         <div className="mx-auto grid max-w-xl grid-cols-1 gap-y-20 lg:max-w-none lg:grid-cols-2">
           <div className="flex flex-col gap-16">
@@ -208,8 +178,7 @@ export default async function Home() {
               <Article key={article.slug} article={article} />
             ))}
           </div>
-          <div className="space-y-10 lg:pl-16 xl:pl-24">
+          <div className="lg:pl-16 xl:pl-24">
-            <Newsletter />
             <Events />
           </div>
         </div>