Add landing page for Base Bootcamp (#14)

* Add landing page for Base Bootcamp * fix lint errors * add copy changes * update FAQ copy * update date and add attr for links * update meta tags
base-org · Oct 4, 2023 · 81ee08a · 81ee08a
1 parent bca5987
commit 81ee08a
Show file tree

Hide file tree

Showing 18 changed files with 48,332 additions and 1,895 deletions.
diff --git a/apps/base-docs/docusaurus.config.js b/apps/base-docs/docusaurus.config.js
@@ -101,6 +101,10 @@ const config = {
               label: 'Track your progress',
               to: '/base-camp/progress',
             },
+            {
+              label: 'Bootcamp',
+              href: 'https://base.org/bootcamp',
+            },
           ],
         },
         {

diff --git a/apps/web/package.json b/apps/web/package.json
@@ -10,6 +10,7 @@
     "update-contributors": "node ./scripts/updateContributors.js && npx prettier ./src/components/CoreContributors/CoreContributors.json -w"
   },
   "dependencies": {
+    "@heroicons/react": "^2.0.18",
     "@next/font": "^13.1.5",
     "ethers": "5.7.2",
     "framer-motion": "^8.5.5",

diff --git a/apps/web/pages/bootcamp.tsx b/apps/web/pages/bootcamp.tsx
@@ -0,0 +1,54 @@
+import Head from 'next/head';
+import { Divider } from '../src/components/Divider/Divider';
+import { HowItWorks } from '../src/components/Bootcamp/HowItWorks';
+import { WhatsIncluded } from '../src/components/Bootcamp/WhatsIncluded';
+import { Dates } from '../src/components/Bootcamp/Dates';
+import { Cost } from '../src/components/Bootcamp/Cost';
+import { Hero } from '../src/components/Bootcamp/Hero';
+import { FaqSidebar } from '../src/components/Bootcamp/Faq/FaqSidebar';
+
+export default function Home() {
+  return (
+    <>
+      <Head>
+        <title>Base</title>
+        <meta
+          content="Base Bootcamp is a cohort-based training program hosted by Coinbase engineers, designed to turn senior-level developers into Smart Contract developers."
+          name="description"
+        />
+        <meta property="og:site_name" content="Base" />
+        <meta property="og:type" content="website" />
+        <meta property="og:title" content="Base" />
+        <meta
+          property="og:description"
+          content="Base Bootcamp is a cohort-based training program hosted by Coinbase engineers, designed to turn senior-level developers into Smart Contract developers."
+        />
+        <meta property="og:url" content="https://base.org" />
+        <meta property="og:image" content="https://base.org/images/base-open-graph.png" />
+        <meta name="twitter:card" content="summary_large_image" />
+        <meta name="twitter:title" content="Base" />
+        <meta
+          name="twitter:description"
+          content="Base Bootcamp is a cohort-based training program hosted by Coinbase engineers, designed to turn senior-level developers into Smart Contract developers."
+        />
+        <meta name="twitter:url" content="https://base.org" />
+        <meta name="twitter:image" content="https://base.org/images/base-open-graph.png" />
+        <meta name="twitter:site" content="Base" />
+        <meta property="og:image:width" content="1200" />
+        <meta property="og:image:height" content="630" />
+      </Head>
+      <Hero />
+      <main className="flex w-full flex-col items-center bg-black">
+        <HowItWorks />
+        <Divider />
+        <Dates />
+        <Divider />
+        <WhatsIncluded />
+        <Divider />
+        <Cost />
+        <Divider />
+        <FaqSidebar />
+      </main>
+    </>
+  );
+}
diff --git a/apps/web/public/images/base-bootcamp-white.png b/apps/web/public/images/base-bootcamp-white.png
diff --git a/apps/web/public/images/bootcamp-background.png b/apps/web/public/images/bootcamp-background.png
diff --git a/apps/web/src/components/Bootcamp/Cost.tsx b/apps/web/src/components/Bootcamp/Cost.tsx
@@ -0,0 +1,15 @@
+export function Cost() {
+  return (
+    <div className="flex w-full max-w-[1440px] flex-col space-y-20 bg-black px-8 pt-12">
+      <div className="grid grid-cols-2">
+        <div className="flex w-full flex-col font-display text-3xl text-white md:text-5xl lg:text-6xl">
+          <p>Cost</p>
+        </div>
+
+        <div className="text-md font-sans text-white">
+          <p>Base Bootcamp is free. However, we require you to <span className="font-bold">deposit 1 ETH</span>, which we will return to you upon your successful, on-time graduation. We’re doing this so that you have skin in the game. The program is going to be difficult and we need you to have as many reasons as necessary to push through.</p>    
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/src/components/Bootcamp/Dates.tsx b/apps/web/src/components/Bootcamp/Dates.tsx
@@ -0,0 +1,34 @@
+import { Button } from '../Button/Button';
+import Link from 'next/link';
+
+export function Dates() {
+  return (
+    <div className="flex w-full max-w-[1440px] flex-col space-y-20 bg-black px-8 pt-12">
+      <div className="flex w-full flex-col font-display text-3xl text-white md:text-5xl lg:text-6xl">
+        <p>Dates and deadlines</p>
+      </div>
+      <div className="grid grid-cols-2">
+        <div className="text-md font-sans text-white">
+          <p className="pb-2"><span className="font-bold">Cohort 3:</span> Nov 13, 2023</p>
+          <p><span className="font-bold">Application deadline:</span> Oct 27, 2023</p>
+
+          <div className="mt-10 w-[200px]">
+            <Link className="w-full" href="https://forms.gle/iqZqJ6WAqkWaouLn8" target="_blank" rel="noreferrer noopener">
+              <Button variant="secondary" className="w-full">Apply now</Button>
+            </Link>
+          </div>
+        </div>
+        <div className="text-md font-sans text-white">
+          <p className="pb-2"><span className="font-bold">Cohort 4:</span> Jan 9, 2024</p>
+          <p><span className="font-bold">Application deadline:</span> Dec 15, 2023</p>
+
+          <div className="mt-10 w-[200px]">
+            <Link className="w-full" href="https://forms.gle/iqZqJ6WAqkWaouLn8" target="_blank" rel="noreferrer noopener">
+              <Button variant="secondary" className="w-full">Apply now</Button>
+            </Link>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/src/components/Bootcamp/Faq/FaqSidebar.tsx b/apps/web/src/components/Bootcamp/Faq/FaqSidebar.tsx
@@ -0,0 +1,80 @@
+import { QuestionAccordion } from './QuestionAccordion';
+
+export function FaqSidebar() {
+  return (
+    <div className="flex w-full max-w-[1440px] flex-col space-y-20 bg-black px-8 pt-12">
+      <div className="grid grid-cols-1 font-sans lg:border-l lg:border-sidebar-border">
+        <div className="flex w-full flex-col font-display text-3xl text-white md:text-5xl lg:text-6xl pb-10">
+          <p className="font-mono text-3xl uppercase">Frequently Asked Questions</p>
+        </div>
+
+        <div className="h-[1px] w-full bg-muted opacity-40" />
+
+        <QuestionAccordion
+          question="When will I hear back about my application?"
+          answer="You will hear from us within 5-7 business days if you’re accepted into the program. Please note that we’re not able to respond to every individual submission given the volume."
+        />
+
+        <QuestionAccordion
+          question="What is your selection criteria?"
+          answer="Students will be selected based on coding skills, “crypto-proficiency” (experience using crypto), and experience level. We’re looking for mid to senior level Software Engineering individual contributors."
+        />
+
+        <QuestionAccordion
+          question="What resources will I get if I am accepted into the program?"
+          answer="Your onboarding package will include the student handbook, mentor-pairing info, invite to the private Base Bootcamp Discord channel, and a launch day kickoff meeting with your cohort. You’ll also get to work through the Base Camp content with supplemental resources and graded projects reviewed by Coinbase engineers."
+        />
+
+        <QuestionAccordion
+          question="Who is my mentor?"
+          answer="An experienced Smart Contract Developer, either from Coinbase or part of the larger Base community."
+        />
+
+        <QuestionAccordion
+          question="Can I fail the program?"
+          answer="Yes - in order to graduate, you must complete the program on time. However, we will do everything we can to make sure you have all that you need to be successful."
+        />
+
+        <QuestionAccordion
+          question="Does it cost anything?"
+          answer=" We ask that you deposit 1 ETH with us, which you will receive back upon successfully completing the program. If you quit early, you will not receive your deposit back."
+        />
+
+        <QuestionAccordion
+          question="What is the time commitment?"
+          answer={(
+            <div className="flex flex-col space-y-4">
+              <p>Base Bootcamp will require ~15 hours/week for ~8 weeks.
+              </p>
+              <p>
+                Apart from a few live meetings, the majority of the time will be allocated to completing our self-paced Smart Contract development curriculum and building various projects.
+              </p>
+            </div>
+          )}
+        />
+
+        <QuestionAccordion
+          question="Are there live classes?"
+          answer="There are no live classes per-se, but you will meet live with your mentor each week (scheduled around your availability) and are welcome to attend live weekly office hours."
+        />
+
+        <QuestionAccordion
+          question="Can I quit if it’s too much for me?"
+          answer="Ideally, no! Before committing, do the work you need to do to make sure you can stick it out for the whole program. With only a handfull participants, the success of our program depends on having committed participants."
+        />
+
+        <QuestionAccordion
+          question="Will I be offered a job upon graduation?"
+          answer="No. There is no distinct relationship between Base Bootcamp and further employment opportunities."
+        />
+
+        <QuestionAccordion
+          question="What will I be able to do upon graduation?"
+          answer="You will learn to deploy smart contracts – the foundation of building any dapp."
+        />
+        <div className="h-[1px] w-full bg-muted opacity-40 mb-40" />
+      </div>
+    </div>
+
+  );
+}
diff --git a/apps/web/src/components/Bootcamp/Faq/QuestionAccordion.tsx b/apps/web/src/components/Bootcamp/Faq/QuestionAccordion.tsx
@@ -0,0 +1,32 @@
+import { ReactNode, useCallback, useState } from 'react';
+import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/outline';
+
+type QuestionAccordionProps = {
+  question: string;
+  answer: ReactNode;
+};
+
+export function QuestionAccordion({ question, answer }: QuestionAccordionProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const toggleOpen = useCallback(() => setIsOpen((o) => !o), [setIsOpen]);
+
+  return (
+    <div className="flex flex-col gap-6 border-b border-gray pb-6 pt-5">
+      <button
+        type="button"
+        className="flex flex-row justify-between py-2 text-base font-medium text-white"
+        onClick={toggleOpen}
+      >
+        <span className="text-left">{question}</span>
+        <span>
+          {isOpen ? (
+            <ChevronUpIcon className="ml-2 h-4 text-white" />
+          ) : (
+            <ChevronDownIcon className="ml-2 h-4 text-white" />
+          )}
+        </span>
+      </button>
+      {isOpen && <span className="text-base text-white">{answer}</span>}
+    </div>
+  );
+}
diff --git a/apps/web/src/components/Bootcamp/Hero.tsx b/apps/web/src/components/Bootcamp/Hero.tsx
@@ -0,0 +1,25 @@
+import { Button } from 'apps/web/src/components/Button/Button';
+import Link from 'next/link';
+
+const subtitleCopy =
+  'Base Bootcamp is an async, cohort-based training program designed to turn senior-level developers into Smart Contract developers.';
+
+export function Hero() {
+  return (
+    <header className="bg-bootcamp_background_image mt-[-96px] flex h-[700px] w-full flex-col items-center bg-black bg-cover">
+      <div className="mt-48 flex w-full max-w-[1440px] flex-col px-8 pt-12">
+        <div className="flex w-full flex-col font-display text-4xl text-white md:text-6xl lg:text-7xl">
+          <p>Learn to build onchain</p>
+          <p className="max-w-sm pt-6 font-display text-sm text-white md:max-w-md md:text-lg lg:text-left">
+            {subtitleCopy}
+          </p>
+        </div>
+        <div className="mt-10 w-[200px]">
+          <Link className="w-full" href="https://forms.gle/iqZqJ6WAqkWaouLn8" target="_blank" rel="noreferrer noopener">
+            <Button className="w-full">Apply now</Button>
+          </Link>
+        </div>
+      </div>
+    </header>
+  );
+}
diff --git a/apps/web/src/components/Bootcamp/HowItWorks/HowItWorksCard.tsx b/apps/web/src/components/Bootcamp/HowItWorks/HowItWorksCard.tsx
@@ -0,0 +1,29 @@
+import { isValidElement, ReactNode } from 'react';
+
+type FeatureCardProps = {
+  featureItem: {
+    number: string;
+    title?: string | JSX.Element;
+    description?: string | ReactNode;
+  };
+};
+
+export function HowItWorksCard({ featureItem: { number, title, description } }: FeatureCardProps) {
+  return (
+    <div className="flex w-[290px] flex-shrink-0 flex-col space-y-10   bg-gray p-8 md:w-[330px]">
+      <p className="font-mono text-2xl uppercase text-white">{number}</p>
+      <div className="flex flex-col space-y-4">
+        {isValidElement(title) ? (
+          title
+        ) : (
+          <p className="font-mono text-lg uppercase text-white">{title}</p>
+        )}
+        {isValidElement(description) ? (
+          description
+        ) : (
+          <p className="text-muted font-sans text-white">{description}</p>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/src/components/Bootcamp/HowItWorks/index.tsx b/apps/web/src/components/Bootcamp/HowItWorks/index.tsx
@@ -0,0 +1,79 @@
+import { HowItWorksCard } from 'apps/web/src/components/Bootcamp/HowItWorks/HowItWorksCard';
+
+const featureItems = [
+  {
+    number: '1',
+    title: 'Apply',
+    description: (
+      <div className="text-md font-sans text-white">
+        <p>
+          Are you a crypto-proficient software engineer interested in learning to build smart
+          contracts? Start out by applying to Base Bootcamp.
+        </p>
+      </div>
+    ),
+  },
+  {
+    number: '2',
+    title: 'Onboard',
+    description:
+      'Upon acceptance, you’ll be invited to the Base Bootcamp Onboarding Course where you will receive all relevant onboarding materials (student handbook, mentor-pairing info, invite to the private Base Bootcamp Discord channel, and invite to the launch day).',
+  },
+  {
+    number: '3',
+    title: 'Kickoff',
+    description:
+      'Gather virtually for our initial kick-off. We’ll pair you with your mentor (an experienced Smart Contract Developer) and you’ll start the program.',
+  },
+  {
+    number: '4',
+    title: 'Build!',
+    description: (
+      <div className="text-md font-sans text-white">
+        <p>
+          Work through{' '}
+          <a
+            className="underline"
+            target="_blank"
+            href="https://docs.base.org/base-camp/docs/welcome"
+            rel="noreferrer"
+          >
+            Base Camp
+          </a>
+          , meeting regularly with your mentor. You’ll build your final project during the final two
+          weeks - a real-world dapp that you’ll demo virtually on Demo Day.
+        </p>
+
+        <br />
+
+        <p>
+          Upon graduation, you’ll earn an exclusive soulbound{' '}
+          <a
+            className="underline"
+            href="https://opensea.io/collection/base-bootcamp-grad"
+            target="_blank"
+            rel="noreferrer"
+          >
+            Base Bootcamp Grad NFT
+          </a>
+          .
+        </p>
+      </div>
+    ),
+  },
+];
+
+export function HowItWorks() {
+  return (
+    <div className="flex w-full max-w-[1440px] flex-col space-y-24 bg-black px-8 pt-12">
+      <div className="flex w-full flex-col font-display text-3xl text-white md:text-5xl lg:text-6xl">
+        <p>How it works</p>
+      </div>
+      <div className="scrollbar flex w-full flex-row justify-between space-x-6 overflow-x-auto pb-12 2xl:overflow-x-hidden">
+        {featureItems.map((item) => (
+          <HowItWorksCard key={item.number} featureItem={item} />
+        ))}
+      </div>
+    </div>
+  );
+}