Add landing page for Base Bootcamp

base-org · Sep 21, 2023 · eb6991c · eb6991c
1 parent 2ab348a
commit eb6991c
Show file tree

Hide file tree

Showing 19 changed files with 48,306 additions and 1,902 deletions.
diff --git a/apps/base-docs/docusaurus.config.js b/apps/base-docs/docusaurus.config.js
@@ -11,14 +11,14 @@ const baseConfig = {
         autoCollapseCategories: true,
         hideable: true,
       },
-    }
+    },
   },
-};;
+};
 
 const lightCodeTheme = require('prism-react-renderer/themes/github');
 const darkCodeTheme = require('prism-react-renderer/themes/oceanicNext');
 
-const APP_TITLE = `Base`;
+const APP_TITLE = 'Base';
 const PRODUCT_NAME = 'Base';
 
 const config = {
@@ -73,12 +73,12 @@ const config = {
           type: 'doc',
           docId: 'overview',
           position: 'left',
-          label: `Documentation`,
+          label: 'Documentation',
         },
         {
           to: '/base-camp/docs/welcome',
           position: 'left',
-          label: `Base Camp`,
+          label: 'Base Camp',
           items: [
             {
               label: 'Learn',
@@ -88,13 +88,17 @@ const config = {
               label: 'Track your progress',
               to: '/base-camp/progress',
             },
+            {
+              label: 'Bootcamp',
+              href: 'https://base.org/bootcamp',
+            },
           ],
         },
         {
           type: 'doc',
           docId: 'security',
           position: 'left',
-          label: `Security`,
+          label: 'Security',
         },
         {
           type: 'dropdown',

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 is a secure, low-cost, builder-friendly Ethereum L2 built to bring the next billion users onchain."
+          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 is a secure, low-cost, builder-friendly Ethereum L2 built to bring the next billion users onchain."
+        />
+        <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 is a secure, low-cost, builder-friendly Ethereum L2 built to bring the next billion users onchain."
+        />
+        <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.jsx b/apps/web/src/components/Bootcamp/Cost.jsx
@@ -0,0 +1,19 @@
+import { Button } from '../../components/Button/Button';
+import Link from 'next/link';
+
+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 deposit 1 ETH, 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>
+          <p></p>      
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/src/components/Bootcamp/Dates.jsx b/apps/web/src/components/Bootcamp/Dates.jsx
@@ -0,0 +1,34 @@
+import { Button } from '../../components/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 15, 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,61 @@
+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="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="Deploy smart contracts!"
+        />
+
+        <QuestionAccordion
+          question="By what criteria are you using to accept applicants?"
+          answer="We are looking for committed candidates that are “crypto-proficient”, passionate about Blockchain technology and experienced as Software Engineers. Base Bootcamp is not an intro course and will assume you have several years of professional programming experience."
+        />
+
+        <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,33 @@
+import { ReactNode, useCallback, useState } from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+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,58 @@
+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>We are looking for crypto proficient, senior-level Web2 Engineers who want to acquire the skills necessary to build dApps.</p>
+
+        <br />
+
+        <p>Once you submit your application, please give us 5 to 7 days to respond.
+        </p>
+      </div>
+    ),
+  },
+  {
+    number: '2',
+    title: 'Onboard',
+    description:
+      'Upon acceptance, you will be invited to the Base Bootcamp Onboarding Course where you will receive all relevant onboarding materials (student handbook, mentor-pairing info, invite to private Base Bootcamp Discord channel, invite to launch day, etc).',
+  },
+  {
+    number: '3',
+    title: 'Kickoff',
+    description: 'On day 1 of your cohort we will gather via Google Meet for our initial kick-off. From here, 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>For 8 weeks, you’ll meet with your mentor and work asynchronously through our <a className="underline" target="_blank" href="https://docs.base.org/base-camp/docs/welcome">Base Camp curriculum</a>. During the final 2 weeks of the program you’ll build your final project - a real world dApp, which 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">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>
+  );
+}