Reorganize homepage layout
Switch from 5 small photos to one larger photo on the right
This commit is contained in:
parent
18f711444f
commit
49751bb433
@ -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,55 +135,42 @@ 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="max-w-2xl">
|
||||
<h1 className="text-4xl font-bold tracking-tight text-zinc-800 dark:text-zinc-100 sm:text-5xl">
|
||||
West Sound Community Hall
|
||||
</h1>
|
||||
<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
|
||||
Eastsound. It has served as a public assembly hall since it was
|
||||
built by volunteers in 1902.
|
||||
</p>
|
||||
<p className="mt-6 text-base text-zinc-600 dark:text-zinc-400">
|
||||
Facing West Sound, the Hall is at the heart of the West Sound community.
|
||||
</p>
|
||||
<div className="mx-auto max-w-7xl px-6 mt-24 lg:px-8">
|
||||
<div className="relative px-4 sm:px-8 lg:px-12">
|
||||
<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
|
||||
Eastsound. It has served as a public assembly hall since it was
|
||||
built by volunteers in 1902.
|
||||
</p>
|
||||
<p className="mt-6 text-base text-zinc-600 dark:text-zinc-400">
|
||||
Facing West Sound, the Hall is at the heart of the West Sound community.
|
||||
</p>
|
||||
</div>
|
||||
<Image
|
||||
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>
|
||||
</Container>
|
||||
<Photos />
|
||||
</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">
|
||||
<Newsletter />
|
||||
<div className="lg:pl-16 xl:pl-24">
|
||||
<Events />
|
||||
</div>
|
||||
</div>
|
||||
|
Loading…
Reference in New Issue
Block a user