fix: add financial contributors (#1001)

fix: simplify hero banner

src/app/components/FinancialContributors.tsx

@@ -0,0 +1,30 @@
+import { getSummaryReport } from '@/js/graphql/opencollective'
+import { FinancialBackerAccountType } from '@/js/types'
+import { DonateButton } from './LandingCTA'
+
+/**
+ * List financial contributors
+ */
+export const FinancialContributors: React.FC = async () => {
+  const { donors, totalRaised } = await getSummaryReport()
+
+  return (
+    <div className='rounded-box bg-accent/80 block w-full p-4 xl:p-10 mx-auto max-w-5xl xl:max-w-7xl'>
+      <div className='flex items-center gap-6'>
+        <h2>Financial Contributors</h2>
+        <span className='mt-0.5 text-sm'>Total: {new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(totalRaised)}</span>
+      </div>
+      <hr className='mb-6 border-2 border-base-content' />
+      <div className='columns-3xs'>
+        {donors.map(donor => <Donor key={donor.account.id} donor={donor} />)}
+      </div>
+
+      <div className='mt-6'><DonateButton /></div>
+    </div>
+  )
+}
+
+const Donor: React.FC<{ donor: FinancialBackerAccountType }> = ({ donor }) => {
+  const { name } = donor.account
+  return (<div className='text-sm uppercase'>{name}</div>)
+}

src/app/components/LandingCTA.tsx

@@ -1,11 +1,12 @@
 import clx from 'classnames'
+
 import { LoginButtonClient } from './LoginButton'
 import { ShowEmailJS } from './ShowEmailJS'
 import { ReactNode } from 'react'
 
 export const LandingCTA: React.FC = () => {
   return (
-    <div className='w-full bg-gradient-to-r from-neutral/80 to-neutral/90 rounded-box p-4 md:p-10'>
+    <div className='w-full p-4 md:p-10'>
       <div className='flex flex-rows flex-wrap gap-6 justify-center'>
         <Card4All />
         <Card4Coders />
@@ -46,7 +47,7 @@ const Card4All: React.FC = () => {
           <li>☑️ Help us make your local climbing area&#39;s pages even better!</li>
         </ul>
       }
-      action={<LoginButtonClient className='btn btn-primary btn-sm px-4 btn-outline' label='Login' />}
+      action={<LoginButtonClient className='btn btn-outline bg-accent btn-sm px-4 border-b-neutral border-b-2' label='Login' />}
     />
   )
 }
@@ -61,12 +62,14 @@ const Leaders: React.FC = () => {
   )
 }
 
+export const DonateButton: React.FC = () => (<a className='btn btn-outline btn-sm bg-emerald-500 border-b-2 px-4' href='https://opencollective.com/openbeta'>Donate</a>)
+
 const Donate: React.FC = () => {
   return (
     <Card
       title='Become a financial supporter'
       body='OpenBeta is a nonprofit funded by users like you!  If you support our mission to keep climbing knowledge free and open, please consider making a donation today.'
-      action={<a className='btn btn-outline btn-sm bg-emerald-500 border-b-2 px-4' href='https://opencollective.com/openbeta'>Donate</a>}
+      action={<DonateButton />}
     />
   )
 }
@@ -82,7 +85,7 @@ const Card: React.FC<CTACardProps> = ({ title, body, action, className }) => {
   return (
     <div className='px-4'>
       <h2 className='px-4 font-medium text-base-200 uppercase'>{title}</h2>
-      <div className={clx('px-4 card card-bordered max-w-sm bg-base-100 shadow-lg', className)}>
+      <div className={clx('bg-base-200/20 px-4 card max-w-sm bg-base-100 shadow-lg', className)}>
         <div className='card-body'>
           <div>{body}</div>
           <div className='card-actions justify-end items-center gap-x-4 py-2'>

src/app/components/LandingHero.tsx

@@ -1,8 +1,9 @@
 export const LandingHero: React.FC = () => {
   return (
-    <section className='w-full rounded-box pt-12 pb-24 px-16 text-center'>
-      <h1 className='text-2xl md:text-5xl tracking-tighter font-semibold'>Share your climbing route knowledge!</h1>
-      <p className=''>Join OpenBeta and help build a community resource for climbers</p>
+    <section className='w-full px-6'>
+      <h1 className='text-2xl tracking-tighter font-semibold'>Share your climbing route knowledge!</h1>
+      <div className='font-medium text-neutral/80'>Join OpenBeta and help build a community resource for climbers</div>
+      <hr className='mt-3 border-2 border-base-content w-full' />
     </section>
   )
 }

src/app/components/LoginButton.tsx

@@ -1,6 +1,8 @@
 'use client'
 import { signIn } from 'next-auth/react'
 
+import { ArrowRightIcon } from '@heroicons/react/24/outline'
+
 /**
  * Client-side button
  */
@@ -10,7 +12,7 @@ export const LoginButtonClient: React.FC<{ className: string, label: string }> =
       className={className} onClick={() => {
         void signIn('auth0')
       }}
-    >{label}
+    >{label} <ArrowRightIcon className='w-4 h-4' />
     </button>
   )
 }

src/app/global.css

@@ -15,7 +15,7 @@ html {
 }
 
 h1 {
-    @apply text-base-content text-4xl lg:text-5xl tracking-tight mb-4;
+    @apply text-base-content text-4xl lg:text-5xl tracking-tight;
 }
 
 h2 {

src/app/page.tsx

@@ -2,6 +2,7 @@ import { Suspense } from 'react'
 import { LandingCTA } from './components/LandingCTA'
 import { LandingHero } from './components/LandingHero'
 import { RecentEdits, RecentEditsSkeleton } from './components/RecentEdits'
+import { FinancialContributors } from './components/FinancialContributors'
 import { RecentTags } from './components/RecentTags'
 import { USAToC } from './components/USAToC'
 
@@ -20,16 +21,23 @@ export default async function Home (): Promise<any> {
         <div className='col-span-2 pb-10 rounded-box'>
           <LandingHero />
           <LandingCTA />
-          <p className='mt-12 px-10 text-center text-sm'>Our website is undergoing a facelift. Visit the <a href='/classic' className='underline'>old home</a>. <br /><span className='text-base-content/60'>Questions or comments? <a href='mailto:[email protected]'>[email protected]</a></span></p>
+          <Annoucement />
         </div>
-        <div className='mt-8 lg:mt-0 lg:overflow-y-auto lg:h-[800px] w-full'>
+        <div className='mt-8 lg:mt-0 lg:overflow-y-auto lg:h-[800px] w-full border-2 rounded-box'>
           <Suspense fallback={<RecentEditsSkeleton />}>
             <RecentEdits />
           </Suspense>
         </div>
       </div>
       <RecentTags />
       <USAToC />
+      <FinancialContributors />
     </div>
   )
 }
+
+const Annoucement: React.FC = () => (
+  <p className='mt-12 px-10 text-center text-sm'>
+    Our website is undergoing a facelift. Visit the <a href='/classic' className='underline'>old home</a>. <br />
+    <span className='text-base-content/60'>Questions or comments? <a href='mailto:[email protected]'>[email protected]</a></span>
+  </p>)

src/components/ui/BackerCard.tsx

@@ -5,17 +5,15 @@ interface BackerCardProps {
 
 export default function BackerCard ({ name, imageUrl }: BackerCardProps): JSX.Element {
   return (
-    <div className='shadow-lg card card-compact bg-amber-500'>
-      <div className='card-body items-center'>
-        <div className='avatar'>
-          <div className='rounded-full w-12'>
-            <img src={imageUrl} />
-          </div>
-        </div>
-        <div className='text-center text-xs capitalize'>
-          {name}
+    <div className='shadow-lg card card-compact card-side bg-amber-500 w-fit rounded-box overflow-hidden'>
+      <div className='avatar'>
+        <div className='rounded w-12'>
+          <img src={imageUrl} />
         </div>
       </div>
+      <div className='card-body text-xs capitalize mx-4'>
+        {name}
+      </div>
     </div>
   )
 }