Skip to content

Commit

Permalink
feat: update landing page with video and donate button
Browse files Browse the repository at this point in the history
  • Loading branch information
@arrocke
arrocke committed Nov 6, 2024
1 parent 30c6411 commit a04a9b8
Showing 1 changed file with 65 additions and 57 deletions.
122 changes: 65 additions & 57 deletions app/[locale]/(landing)/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { query } from "@/shared/db"
import ProgressChart from "./ProgressChart"
import { Icon } from "@/app/components/Icon"

export default async function LandingPage() {
const stats = await fetchLanguageProgressStats()
Expand All @@ -8,7 +9,7 @@ export default async function LandingPage() {
<nav
className="bg-white flex items-center h-20 border-b border-gray-200 relative flex-shrink-0 px-4 md:px-8"
>
<a href="#hero" className="flex items-center mr-8 lg:mr-12">
<a href="#hero" className="flex items-center mr-2 sm:mr-8 lg:mr-12">
<img
src="/bet-scroll.png"
className="w-8 h-8 sm:w-10 sm:h-10 md:w-14 md:h-14"
Expand All @@ -20,39 +21,33 @@ export default async function LandingPage() {
<div className="flex-grow md:flex-grow-0"></div>
<a
className="h-full text-center hidden md:block pt-[30px] font-bold mx-3"
href="#resources"
href="#vision"
>
Resources
Vision
</a>
<a
className="h-full text-center hidden md:block pt-[30px] font-bold mx-3"
href="#progress"
>
Progress
</a>
<a
className="h-full text-center hidden md:block pt-[30px] font-bold mx-3"
href="#volunteer"
href="#contribute"
>
Volunteer
Contribute
</a>
<a
className="h-full text-center hidden md:block pt-[30px] font-bold mx-3"
href="#go-deeper"
href="#progress"
>
Go Deeper
Progress
</a>
<div className="md:flex-grow"></div>
<a
href="/read"
className="rounded-lg bg-blue-800 text-white font-bold shadow-md px-4 flex items-center justify-center h-8 md:mt-[4px] ms-1"
>
Reader's Bible
Reader&apos;s Bible
</a>
</nav>
<main className="flex-grow overflow-auto">
<section id="hero" className="relative">
<img src="/hero.png" className="w-full" />
<img src="/hero.png" className="w-full brightness-90" />
<div
className="absolute top-0 bottom-0 w-full flex flex-col items-center justify-center sm:mb-10 md:mb-20 px-8"
>
Expand All @@ -64,23 +59,37 @@ export default async function LandingPage() {
</p>
<a
className="rounded-lg bg-blue-800 text-white font-bold shadow-xl px-4 md:px-6 lg:px-8 flex items-center justify-center h-8 md:h-10 lg:h-12 md:text-lg lg:text-xl"
href="#resources"
href="#vision"
>
Learn More
</a>
</div>
</section>
<section
id="resources"
className="relative bg-brown-100 pt-12 md:pt-16 lg:pt-24 pb-32 px-6 md:px-8"
id="vision"
className="bg-brown-100 pt-12 md:pt-16 lg:pt-24 pb-32 px-6 md:px-8"
>
<div className="w-full max-w-[1000px] mx-auto">
<h2 className="text-3xl md:text-5xl font-bold mb-8">Resources</h2>
<p className="mb-8">
The following resources are essential for language learning and
biblical study. Currently these resources are only available in a
handful of even the largest languages.
</p>
<h2 className="text-3xl md:text-5xl font-bold mb-8">Vision</h2>
<div className="relative w-full shadow-lg mb-8">
<div className="pb-[56.25%]" />
<iframe
className="absolute h-full w-full top-0"
src="https://www.youtube.com/embed/Zern2kzSqk4?si=HQ2IkbtiiplE0LYd&amp;rel=0"
title="YouTube video player"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerPolicy="strict-origin-when-cross-origin"
allowFullScreen
/>
</div>
<div className="flex justify-center mb-16">
<a
className="font-bold text-blue-800 underline"
href="https://docs.google.com/document/d/1PfgkStvqrCJutpcQzq73zN_fZkfl17zs3MdQIhT3xg4/"
target="_blank"
rel="noopener noreferrer"
>Prefer to Read? <Icon icon="external-link"/></a>
</div>
<div
className="grid grid-rows-[auto_1fr_1fr_auto_1fr_1fr_1fr] md:grid-rows-[auto_1fr_1fr_1fr] grid-cols-1 md:grid-cols-2 grid-flow-col gap-8 lg:gap-x-16"
>
Expand Down Expand Up @@ -139,29 +148,30 @@ export default async function LandingPage() {
</div>
</section>
<section
id="progress"
id="contribute"
className="bg-blue-800 -mt-10 pt-20 md:pt-24 pb-40 px-6 md:px-8"
style={{ clipPath: 'polygon(0 0, 100% 40px, 100% 100%, 0 100%)' }}
>
<div className="w-full max-w-[1000px] mx-auto">
<h2 className="text-3xl md:text-5xl font-bold mb-8 text-white text-white">Reader&apos;s Bible Progress</h2>
<div className="bg-white rounded-lg shadow p-6 max-h-[80vh] overflow-y-auto">
<ProgressChart languageStats={stats} />
</div>
</div>
</section>
<section
id="volunteer"
className="bg-brown-100 -mt-10 pt-20 md:pt-24 pb-16 md:pb-24 lg:pb-32 px-6 md:px-8"
style={{ clipPath: 'polygon(0 40px, 100% 0, 100% 100%, 0 100%)' }}
>
<div className="w-full max-w-[1000px] mx-auto">
<h2 className="text-3xl md:text-5xl font-bold mb-8">
Volunteer
</h2>
<h2 className="text-3xl md:text-5xl font-bold mb-8 text-white text-white">Contribute</h2>
<ul
className="flex flex-col items-stretch md:flex-row md:justify-between gap-8"
className="flex flex-col md:grid lg:flex lg:flex-row grid-cols-2 gap-8 mb-8"
>
<li
className="w-full rounded-[16px] bg-white p-6 shadow md:text-center"
>
<h4 className="text-lg font-bold mb-3">Give</h4>
<p>
Please give through <a
className="font-bold text-blue-800 underline"
href="https://freehebrew.online/give/"
>Betheden Ministries</a> to fund this work.
Email <a
className="font-bold text-blue-800 underline"
href="mailto:[email protected]"
>Andrew Case</a> to indicate that your donation is for Global Bible Tools.
</p>
</li>
<li
className="w-full rounded-[16px] bg-white p-6 shadow md:text-center"
>
Expand All @@ -170,7 +180,7 @@ export default async function LandingPage() {
If you can help with software development or UI design, check
out our <a
className="font-bold text-blue-800 underline"
href="https://github.com/globalbibletools/gbt"
href="https://github.com/globalbibletools/platform"
>GitHub repository</a>.
</p>
</li>
Expand All @@ -180,10 +190,10 @@ export default async function LandingPage() {
<h4 className="text-lg font-bold mb-3">Translation</h4>
<p>
If you can help translate lexicons, grammars, and other
resources into other languages, contact <a
resources into other languages, please <a
className="font-bold text-blue-800 underline"
href="mailto:andrewdcase@gmail.com"
>Andrew Case</a>.
href="https://docs.google.com/forms/d/e/1FAIpQLSer70LItS-738tlwL3bDuku1qRpoWTmQBNfFd9b3NbPIH3G9w/viewform"
>fill out this form</a>.
</p>
</li>
<li
Expand All @@ -202,20 +212,18 @@ export default async function LandingPage() {
</div>
</section>
<section
id="go-deeper"
className="bg-blue-800 -mt-10 pt-20 md:pt-24 pb-40 px-6 md:px-8"
style={{ clipPath: 'polygon(0 0, 100% 40px, 100% 100%, 0 100%)' }}
id="progress"
className="bg-brown-100 -mt-10 pt-20 md:pt-24 pb-16 md:pb-24 lg:pb-32 px-6 md:px-8"
style={{ clipPath: 'polygon(0 40px, 100% 0, 100% 100%, 0 100%)' }}
>
<div className="w-full max-w-[1000px] mx-auto">
<h2 className="text-3xl md:text-5xl font-bold mb-8 text-white text-white">Go Deeper</h2>
<p className="text-white">
This is a significant need and endeavor for the global Church. We
invite you to <a
className="font-bold text-white underline"
href="https://docs.google.com/document/d/1PfgkStvqrCJutpcQzq73zN_fZkfl17zs3MdQIhT3xg4/"
>read the introduction</a> to our vision and roadmap for democratizing access to serious
bibilical language tools.
</p>
<h2 className="text-3xl md:text-5xl font-bold mb-8">
Progress
</h2>
<div className="bg-white rounded-[16px] shadow p-6 max-h-[80vh] overflow-y-auto">
<h3 className="text-lg text-center font-bold mb-4">Reader&apos;s Bible Translation</h3>
<ProgressChart languageStats={stats} />
</div>
</div>
</section>
</main>
Expand Down

0 comments on commit a04a9b8

Please sign in to comment.