feat: add 4 CTAs - missing files

OpenBeta · Oct 27, 2023 · efbc77f · efbc77f
1 parent 596c732
commit efbc77f
Show file tree

Hide file tree

Showing 4 changed files with 132 additions and 0 deletions.
diff --git a/src/app/components/LandingCTA.tsx b/src/app/components/LandingCTA.tsx
@@ -0,0 +1,80 @@
+import { ShowEmailJS } from './ShowEmailJS'
+export const LandingCTA: React.FC = () => {
+  return (
+    <div className='w-full'>
+      <div className='flex flex-wrap gap-6 justify-center'>
+        <Card4All />
+        <Card4Coders />
+        <Leaders />
+        <Donate />
+      </div>
+    </div>
+  )
+}
+
+const Card4Coders: React.FC = () => {
+  return (
+    <Card
+      title='Coders'
+      body='Fix a bug. Use OpenBeta data & API 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>
+        </>
+      }
+    />
+  )
+}
+
+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>}
+    />
+  )
+}
+
+const Leaders: React.FC = () => {
+  return (
+    <Card
+      title='Community Leaders'
+      body='Serve as a core volunteer for 3-6 months. Apply your industry expertise to help shape the future of climbing in the digital age.'
+      action={<ShowEmailJS />}
+    />
+  )
+}
+
+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>}
+    />
+  )
+}
+
+interface CTACardProps {
+  title: string
+  body: string
+  action: React.ReactNode
+}
+
+const Card: React.FC<CTACardProps> = ({ title, body, action }) => {
+  return (
+    <div>
+      <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='card-body'>
+          <p>{body}</p>
+          <div className='card-actions justify-end items-center gap-x-4'>
+            {action}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/src/app/components/LandingHero.tsx b/src/app/components/LandingHero.tsx
@@ -0,0 +1,13 @@
+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'>
+        <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' />
+      </div>
+    </section>
+  )
+}
diff --git a/src/app/components/ShowEmailJS.tsx b/src/app/components/ShowEmailJS.tsx
@@ -0,0 +1,11 @@
+'use client'
+import { useState } from 'react'
+
+/**
+ * Show email on click to minimize spam
+ */
+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>)
+}
diff --git a/src/assets/icons/heart-hero.tsx b/src/assets/icons/heart-hero.tsx
@@ -0,0 +1,28 @@
+import * as React from 'react'
+const SvgComponent: React.FC<{ className: string }> = (props) => (
+  <svg
+    xmlns='http://www.w3.org/2000/svg'
+    xmlSpace='preserve'
+    width={96}
+    height={96}
+    fill='#082f49'
+    stroke='#082f49'
+    strokeWidth={1.536}
+    viewBox='-1.28 -1.28 66.56 66.56'
+    {...props}
+  >
+    <path
+      fill='#F15E40'
+      d='M58.714 29.977s-.612.75-1.823 1.961L33.414 55.414c-.391.391-.902.586-1.414.586s-1.023-.195-1.414-.586L7.109 31.937c-1.211-1.211-1.823-1.961-1.823-1.961C3.245 27.545 2 24.424 2 21 2 13.268 8.268 7 16 7c3.866 0 7.366 1.566 9.899 4.101l.009-.009 4.678 4.677a2 2 0 0 0 2.828 0l4.678-4.677.009.009A13.948 13.948 0 0 1 48 7c7.732 0 14 6.268 14 14 0 3.424-1.245 6.545-3.286 8.977z'
+    />
+    <path
+      fill='#F15E40'
+      d='M58.714 29.977s-.612.75-1.823 1.961L33.414 55.414c-.391.391-.902.586-1.414.586s-1.023-.195-1.414-.586L7.109 31.937c-1.211-1.211-1.823-1.961-1.823-1.961C3.245 27.545 2 24.424 2 21 2 13.268 8.268 7 16 7c3.866 0 7.366 1.566 9.899 4.101l.009-.009 4.678 4.677a2 2 0 0 0 2.828 0l4.678-4.677.009.009A13.948 13.948 0 0 1 48 7c7.732 0 14 6.268 14 14 0 3.424-1.245 6.545-3.286 8.977z'
+    />
+    <g fill='#394240'>
+      <path d='M48 5a15.946 15.946 0 0 0-11.313 4.687l-3.979 3.961a.999.999 0 0 1-1.414 0s-3.971-3.97-3.979-3.961A15.954 15.954 0 0 0 16 5C7.163 5 0 12.163 0 21c0 3.338 1.024 6.436 2.773 9 0 0 .734 1.164 1.602 2.031l24.797 24.797C29.953 57.609 30.977 58 32 58s2.047-.391 2.828-1.172l24.797-24.797c.867-.867 1.602-2.031 1.602-2.031A15.916 15.916 0 0 0 64 21c0-8.837-7.163-16-16-16zm10.714 24.977s-.612.75-1.823 1.961L33.414 55.414c-.391.391-.902.586-1.414.586s-1.023-.195-1.414-.586L7.109 31.937c-1.211-1.211-1.823-1.961-1.823-1.961C3.245 27.545 2 24.424 2 21 2 13.268 8.268 7 16 7c3.866 0 7.366 1.566 9.899 4.101l.009-.009 4.678 4.677a2 2 0 0 0 2.828 0l4.678-4.677.009.009A13.948 13.948 0 0 1 48 7c7.732 0 14 6.268 14 14 0 3.424-1.245 6.545-3.286 8.977z' />
+      <path d='M48 11a1 1 0 1 0 0 2 8 8 0 0 1 8 8 1 1 0 1 0 2 0c0-5.522-4.478-10-10-10z' />
+    </g>
+  </svg>
+)
+export default SvgComponent