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 Image from 'next/image'
|
||||||
import clsx from 'clsx'
|
|
||||||
|
|
||||||
import Link from 'next/link'
|
import Link from 'next/link'
|
||||||
import { Card } from '@/components/Card'
|
import { Card } from '@/components/Card'
|
||||||
import { Container } from '@/components/Container'
|
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 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 { type BlogPostWithSlug, getAllBlogPosts } from '@/lib/articles'
|
||||||
import { formatDate } from '@/lib/formatDate'
|
import { formatDate } from '@/lib/formatDate'
|
||||||
import { promises as fs } from 'fs';
|
import { promises as fs } from 'fs';
|
||||||
|
|
||||||
|
|
||||||
function LinkButton({
|
function LinkButton({
|
||||||
href,
|
href,
|
||||||
children,
|
children,
|
||||||
@ -24,9 +20,7 @@ function LinkButton({
|
|||||||
return (
|
return (
|
||||||
<Link
|
<Link
|
||||||
href={href}
|
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}
|
{children}
|
||||||
</Link>
|
</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 {
|
interface Meeting {
|
||||||
title: string
|
title: string
|
||||||
date: 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() {
|
export default async function Home() {
|
||||||
let articles = (await getAllBlogPosts()).slice(0, 4)
|
let articles = (await getAllBlogPosts()).slice(0, 4)
|
||||||
|
|
||||||
return (
|
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">
|
||||||
West Sound Community Hall
|
<h1 className="text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl lg:col-span-2">
|
||||||
</h1>
|
West Sound Community Hall
|
||||||
<p className="mt-6 text-base text-zinc-600 dark:text-zinc-400">
|
</h1>
|
||||||
The West Sound Community Hall is located in the hamlet of West Sound
|
<div className="max-w-xl">
|
||||||
on Orcas Island, about 10 minutes from the ferry landing and
|
<p className="mt-6 text-base text-zinc-600 dark:text-zinc-400">
|
||||||
Eastsound. It has served as a public assembly hall since it was
|
The West Sound Community Hall is located in the hamlet of West Sound
|
||||||
built by volunteers in 1902.
|
on Orcas Island, about 10 minutes from the ferry landing and
|
||||||
</p>
|
Eastsound. It has served as a public assembly hall since it was
|
||||||
<p className="mt-6 text-base text-zinc-600 dark:text-zinc-400">
|
built by volunteers in 1902.
|
||||||
Facing West Sound, the Hall is at the heart of the West Sound community.
|
</p>
|
||||||
</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>
|
</div>
|
||||||
</Container>
|
</div>
|
||||||
<Photos />
|
|
||||||
<Container className="mt-24 md:mt-28">
|
<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="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">
|
<div className="flex flex-col gap-16">
|
||||||
@ -208,8 +178,7 @@ export default async function Home() {
|
|||||||
<Article key={article.slug} article={article} />
|
<Article key={article.slug} article={article} />
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
<div className="space-y-10 lg:pl-16 xl:pl-24">
|
<div className="lg:pl-16 xl:pl-24">
|
||||||
<Newsletter />
|
|
||||||
<Events />
|
<Events />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
Loading…
Reference in New Issue
Block a user