Add EIN to footer

src/app/board-of-directors/page.tsx

@@ -0,0 +1,124 @@
+
+import { type Metadata } from 'next'
+import Link from 'next/link'
+import clsx from 'clsx'
+
+import { Container } from '@/components/Container'
+import { UserPlusIcon, GiftIcon, EnvelopeIcon } from '@heroicons/react/24/solid'
+import { TableCell, TableHeading, TableLeftHeading } from '@/components/Table'
+
+function SocialLink({
+  className,
+  href,
+  children,
+  icon: Icon,
+}: {
+  className?: string
+  href: string
+  icon: React.ComponentType<{ className?: string }>
+  children: React.ReactNode
+}) {
+  return (
+    <li className={clsx(className, 'flex')}>
+      <Link
+        href={href}
+        className="group flex text-sm font-medium text-zinc-800 transition hover:text-teal-500 dark:text-zinc-200 dark:hover:text-teal-500"
+      >
+        <Icon className="h-6 w-6 flex-none fill-zinc-500 transition group-hover:fill-teal-500" />
+        <span className="ml-4">{children}</span>
+      </Link>
+    </li>
+  )
+}
+
+export const metadata: Metadata = {
+  title: 'West Sound Community Club - Board of Directory',
+  description:
+    'The West Sound Community Club on Orcas Island.',
+}
+
+
+export default function Club() {
+  return (
+    <Container className="mt-16 sm:mt-32">
+      <div className="grid grid-cols-1 gap-y-16 lg:grid-cols-2 lg:grid-rows-[auto_1fr] lg:gap-y-12">
+        <div className="lg:order-first lg:row-span-2">
+          <h1 className="text-4xl font-bold tracking-tight text-zinc-800 dark:text-zinc-100 sm:text-5xl">
+            The Board of Directors
+          </h1>
+          <div className="mt-6 space-y-7 text-base text-zinc-600 dark:text-zinc-400">
+            <p>
+              Elections for the Board of Directors are held annually at the October member meeting and potluck.
+            </p>
+
+            <p>
+              If you are interested in being one the ballot at the upcoming
+              election, please
+              <a href="mailto:board@westsoundhall.org"
+                className="pl-1 text-blue-600 visited:text-purple-600 hover:underline">
+                contact the board
+              </a>.
+            </p>
+          </div>
+
+          <div className="overflow-x-auto -mx-4 sm:-mx-0">
+            <div className="inline-block min-w-full py-2 align-middle">
+              <table className="min-w-full divide-y divide-gray-300">
+                <thead>
+                  <tr>
+                    <th scope="col" className="py-3.5 pl-4 pr-3 sm:pl-0">Name</th>
+                    <TableHeading>Position</TableHeading>
+                  </tr>
+                </thead>
+                <tbody className="divide-y divide-gray-200 ">
+                  <tr>
+                    <TableLeftHeading>Lisa Pedersen</TableLeftHeading>
+                    <TableCell>President</TableCell>
+                  </tr>
+                  <tr>
+                    <TableLeftHeading>Betsy Wareham</TableLeftHeading>
+                    <TableCell>Vice President</TableCell>
+                  </tr>
+                  <tr>
+                    <TableLeftHeading>Tony Grosinger</TableLeftHeading>
+                    <TableCell>Secretary</TableCell>
+                  </tr>
+                  <tr>
+                    <TableLeftHeading>Temporarily performed by Secretary</TableLeftHeading>
+                    <TableCell>Treasurer</TableCell>
+                  </tr>
+                  <tr>
+                    <TableLeftHeading>Mark Gasser</TableLeftHeading>
+                    <TableCell>Director</TableCell>
+                  </tr>
+                  <tr>
+                    <TableLeftHeading>Leslie Brown</TableLeftHeading>
+                    <TableCell>Director</TableCell>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+        <div className="lg:pl-20">
+          <ul role="list">
+            <SocialLink
+              href="mailto:contact@westsoundhall.org"
+              icon={EnvelopeIcon}
+              className="mt-4 border-zinc-100 dark:border-zinc-700/40"
+            >
+              contact@westsoundhall.org
+            </SocialLink>
+            <SocialLink
+              href="mailto:contact@westsoundhall.org"
+              icon={EnvelopeIcon}
+              className="mt-4 border-zinc-100 dark:border-zinc-700/40"
+            >
+              board@westsoundhall.org
+            </SocialLink>
+          </ul>
+        </div>
+      </div>
+    </Container>
+  )
+}

src/app/club/page.tsx

@@ -5,7 +5,7 @@ import Link from 'next/link'
 import clsx from 'clsx'
 
 import { Container } from '@/components/Container'
-import { UserPlusIcon, GiftIcon, EnvelopeIcon } from '@heroicons/react/24/solid'
+import { UserPlusIcon, GiftIcon, EnvelopeIcon, UserGroupIcon } from '@heroicons/react/24/solid'
 import interiorEmptyImage from '@/images/photos/interior-empty.jpg'
 import { ClubPayment } from './payment';
 
@@ -98,6 +98,9 @@ export default function Club() {
             >
               contact@westsoundhall.org
             </SocialLink>
+            <SocialLink href="/board-of-directors" icon={UserGroupIcon} className="mt-4">
+              Board of Directors
+            </SocialLink>
           </ul>
         </div>
         <div>

src/app/page.tsx

@@ -143,7 +143,7 @@ export default async function Home() {
       <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">
+            <h1 className="text-4xl font-bold tracking-tight text-zinc-800 dark:text-zinc-100 sm:text-6xl lg:col-span-2">
               West Sound Community Hall
             </h1>
             <div className="max-w-xl">

src/app/rental/page.tsx

@@ -6,6 +6,8 @@ import clsx from 'clsx'
 import { Container } from '@/components/Container'
 import exteriorFront from '@/images/photos/exterior-front.png'
 import { EnvelopeIcon, PencilSquareIcon, QuestionMarkCircleIcon } from '@heroicons/react/24/solid'
+import React from 'react'
+import { TableCell, TableHeading, TableLeftHeading } from '@/components/Table'
 
 function SocialLink({
   className,
@@ -107,42 +109,42 @@ export default function Rental() {
               <table className="min-w-full divide-y divide-gray-300">
                 <thead>
                   <tr>
-                    <th scope="col" className="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-0"></th>
-                    <th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Half day (4 hr)</th>
-                    <th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">All day</th>
-                    <th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Deposit</th>
+                    <th scope="col" className="py-3.5 pl-4 pr-3 sm:pl-0"></th>
+                    <TableHeading>Half day (4 hr)</TableHeading>
+                    <TableHeading>All day</TableHeading>
+                    <TableHeading>Deposit</TableHeading>
                   </tr>
                 </thead>
-                <tbody className="divide-y divide-gray-200">
+                <tbody className="divide-y divide-gray-200 ">
                   <tr>
-                    <td className="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-0">Orcas non-profit organizations</td>
-                    <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">$50 or 2 hours for $30*</td>
-                    <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">$100</td>
-                    <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">None†</td>
+                    <TableLeftHeading>Orcas non-profit organizations</TableLeftHeading>
+                    <TableCell>$50 or 2 hours for $30*</TableCell>
+                    <TableCell>$100</TableCell>
+                    <TableCell>None†</TableCell>
                   </tr>
                   <tr>
-                    <td className="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-0">WSCC and OIYC Members</td>
-                    <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">$50 or 2 hours for $30*</td>
-                    <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">$100</td>
-                    <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">None†</td>
+                    <TableLeftHeading>WSCC and OIYC Members</TableLeftHeading>
+                    <TableCell>$50 or 2 hours for $30*</TableCell>
+                    <TableCell>$100</TableCell>
+                    <TableCell>None†</TableCell>
                   </tr>
                   <tr>
-                    <td className="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-0">Off-island non-profit organizations</td>
-                    <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">$50</td>
-                    <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">$100</td>
-                    <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">$300</td>
+                    <TableLeftHeading>Off-island non-profit organizations</TableLeftHeading>
+                    <TableCell>$50</TableCell>
+                    <TableCell>$100</TableCell>
+                    <TableCell>$300</TableCell>
                   </tr>
                   <tr>
-                    <td className="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-0">Individuals and non-public use</td>
-                    <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">$40 per hour</td>
-                    <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">$300</td>
-                    <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">$300</td>
+                    <TableLeftHeading>Individuals and non-public use</TableLeftHeading>
+                    <TableCell>$40 per hour</TableCell>
+                    <TableCell>$300</TableCell>
+                    <TableCell>$300</TableCell>
                   </tr>
                   <tr>
-                    <td className="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-0">Government sponsored activities</td>
-                    <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">$50</td>
-                    <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">$50</td>
-                    <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">None†</td>
+                    <TableLeftHeading>Government sponsored activities</TableLeftHeading>
+                    <TableCell>$50</TableCell>
+                    <TableCell>$50</TableCell>
+                    <TableCell>None†</TableCell>
                   </tr>
                 </tbody>
               </table>
@@ -168,6 +170,7 @@ export default function Rental() {
               The West Sound Community Hall may not be used for either personal or
               organizational monetary gain or to promote business activities.
               The only exceptions to this restriction are:
+            </p>
 
             <ol className="list-decimal ml-8 mt-5">
               <li>
@@ -183,7 +186,6 @@ export default function Rental() {
                 sponsoring nonprofit organization.)
               </li>
             </ol>
-            </p>
 
             <p>
               Any individual or organizational nonpublic use of the hall which

src/components/Footer.tsx

@@ -32,9 +32,14 @@ export function Footer() {
                 <NavLink href="/rental">Rental</NavLink>
                 <NavLink href="/club">Club</NavLink>
               </div>
+              <div>
                 <p className="text-sm text-zinc-400 dark:text-zinc-500">
                   &copy; {new Date().getFullYear()} West Sound Community Club. All rights reserved.
                 </p>
+                <p className="text-sm text-zinc-400 dark:text-zinc-500">
+                  WSCC is a 501c3 nonprofit organization - 91-1283768
+                </p>
+              </div>
             </div>
           </ContainerInner>
         </div>

src/components/Table.tsx

@@ -0,0 +1,25 @@
+
+export function TableHeading({
+    children
+}: {
+    children: React.ReactNode
+}) {
+    return <th scope="col" className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-zinc-100">{children}</th>
+
+}
+
+export function TableLeftHeading({
+    children
+}: {
+    children: React.ReactNode
+}) {
+    return <td className="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 dark:text-zinc-100 sm:pl-0">{children}</td>
+}
+
+export function TableCell({
+    children
+}: {
+    children: React.ReactNode
+}) {
+    return <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-zinc-400">{children}</td>
+}