feat: add notice about new home

src/app/components/LandingCTA.tsx

@@ -1,8 +1,12 @@
+import clx from 'classnames'
+
+import { LoginButtonClient } from './LoginButton'
 import { ShowEmailJS } from './ShowEmailJS'
+
 export const LandingCTA: React.FC = () => {
   return (
     <div className='w-full'>
-      <div className='flex flex-wrap gap-6 justify-center'>
+      <div className='flex flex-rows flex-wrap gap-6 justify-center'>
         <Card4All />
         <Card4Coders />
         <Leaders />
@@ -16,11 +20,11 @@ const Card4Coders: React.FC = () => {
   return (
     <Card
       title='Coders'
-      body='Fix a bug. Use OpenBeta data & API in your projects.'
+      body='Fix a bug. Use OpenBeta API & data in your projects.'
       action={
         <>
           <a href='https://docs.openbeta.io/how-to-contribute/overview' className='text-sm underline'>Dev onboarding</a>
-          <a className='btn btn-primary btn-sm' href='https://github.com/orgs/OpenBeta/'>GitHub</a>
+          <a className='btn btn-primary btn-sm btn-outline' href='https://github.com/orgs/OpenBeta/'>GitHub</a>
         </>
       }
     />
@@ -31,8 +35,8 @@ const Card4All: React.FC = () => {
   return (
     <Card
       title='Climbers'
-      body='Add a missing climb.  Help us make your local climbing&lsquo;s area page even better!'
-      action={<button className='btn btn-primary btn-sm'>Login</button>}
+      body='Add missing climbs.  Help us make your local climbing&lsquo;s area page even better!'
+      action={<LoginButtonClient className='btn btn-primary btn-sm px-4 btn-outline' label='Login' />}
     />
   )
 }
@@ -51,8 +55,8 @@ const Donate: React.FC = () => {
   return (
     <Card
       title='Become a financial supporter'
-      body='OpenBeta is 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-primary btn-sm' href='https://opencollective.com/openbeta'>Donate</a>}
+      body='OpenBeta is nonprofit and 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>}
     />
   )
 }
@@ -61,16 +65,17 @@ interface CTACardProps {
   title: string
   body: string
   action: React.ReactNode
+  className?: string
 }
 
-const Card: React.FC<CTACardProps> = ({ title, body, action }) => {
+const Card: React.FC<CTACardProps> = ({ title, body, action, className }) => {
   return (
-    <div>
+    <div className='px-4'>
       <h2 className='font-medium text-base-content/60 uppercase'>{title}</h2>
-      <div className='px-4 card  w-96 bg-base-100 shadow-lg'>
+      <div className={clx('px-4 card card-bordered max-w-sm bg-base-100 shadow-lg', className)}>
         <div className='card-body'>
           <p>{body}</p>
-          <div className='card-actions justify-end items-center gap-x-4'>
+          <div className='card-actions justify-end items-center gap-x-4 py-2'>
             {action}
           </div>
         </div>

src/app/components/LandingHero.tsx

@@ -3,7 +3,7 @@ import Heart from '@/assets/icons/heart-hero'
 export const LandingHero: React.FC = () => {
   return (
     <section className='w-full rounded-box p-10 flex justify-center'>
-      <div className='flex items-center gap-10'>
+      <div className='flex flex-wrap justify-center items-center gap-10'>
         <span className='text-4xl md:text-6xl tracking-tight'>Knowledge</span>
         <span className='align-text-bottom font-semibold text-2xl'>+</span>
         <span className='-translate-y-1 -rotate-6 font-bold text-4xl md:text-6xl tracking-tight hero-text-shadow'>You</span> <span className='font-semibold text-2xl'>=</span> <Heart className='h-16 w-16' />

src/app/components/LoginButton.tsx

@@ -0,0 +1,16 @@
+'use client'
+import { signIn } from 'next-auth/react'
+
+/**
+ * Client-side button
+ */
+export const LoginButtonClient: React.FC<{ className: string, label: string }> = ({ className, label }) => {
+  return (
+    <button
+      className={className} onClick={() => {
+        void signIn('auth0')
+      }}
+    >{label}
+    </button>
+  )
+}

src/app/components/RecentEdits.tsx

@@ -7,13 +7,13 @@ import Link from 'next/link'
 export const RecentEdits: React.FC = async () => {
   const history = await getChangeHistoryServerSide()
   return (
-    <section className='px-4 2xl:px-0 w-full'>
+    <section className='px-4 w-full'>
       <div className='flex items-center justify-between'>
         <h2>Recent edits</h2>
         <Link href='/edit' className='text-sm hover:underline'>See more</Link>
       </div>
       <hr className='mb-6 border-2 border-base-content' />
-      <div className='mt-4 flex justify-center flex-row flex-wrap gap-y-10 gap-x-2'>
+      <div className='mt-4 flex justify-center flex-row flex-wrap gap-y-10 gap-x-4'>
         {history.splice(0, 10).map(changetset =>
           <ChangesetRow key={changetset.id} changeset={changetset} />)}
       </div>

src/app/components/ShowEmailJS.tsx

@@ -7,5 +7,5 @@ import { useState } from 'react'
 export const ShowEmailJS: React.FC = () => {
   const [email, setEmail] = useState < string | null>()
 
-  return (<button onClick={() => setEmail('[email protected]')} className='btn btn-primary btn-sm'>Email us {email != null && <a href={`mailto:${email}`}>{email}</a>}</button>)
+  return (<button onClick={() => setEmail('[email protected]')} className='btn btn-primary btn-sm btn-outline'>Email us {email != null && <a href={`mailto:${email}`}>{email}</a>}</button>)
 }

src/app/global.css

@@ -28,4 +28,12 @@ h2 {
 
 .hero-text-shadow {
   text-shadow: 1px 1px 3px rgb(21, 8, 60);
+}
+
+.rainbow-border {
+  background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,0)) 50% 50%/calc(100% - 2px) calc(100% - 2px) no-repeat,
+            linear-gradient(0deg, #00a7f4 0%, transparent 70%),
+            radial-gradient(at 100% 0%, #00ff53 0%, transparent 70%),
+            #f15e40;
+  box-sizing: border-box;
 }

src/app/page.tsx

@@ -7,12 +7,13 @@ import { USAToC } from './components/USAToC'
 export default async function Home (): Promise<any> {
   return (
     <div className='mt-8 w-full flex flex-col gap-y-24'>
-      <div className='px-4 lg:grid lg:grid-cols-3'>
-        <div className='col-span-2 px-10 pb-10 bg-gradient-to-r from-cyan-500 to-blue-500 rounded-box'>
+      <div className='lg:pl-4 lg:grid lg:grid-cols-3'>
+        <div className='col-span-2 pb-10 bg-gradient-to-r from-cyan-500/40 to-blue-500/60 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>
         </div>
-        <div className='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'>
           <RecentEdits />
         </div>
       </div>