-
Notifications
You must be signed in to change notification settings - Fork 324
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Aaron Hayslip
committed
Sep 21, 2023
1 parent
2ab348a
commit eb6991c
Showing
19 changed files
with
48,306 additions
and
1,902 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> | ||
</> | ||
); | ||
} |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> | ||
|
||
); | ||
} |
33 changes: 33 additions & 0 deletions
33
apps/web/src/components/Bootcamp/Faq/QuestionAccordion.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> | ||
); | ||
} |
29 changes: 29 additions & 0 deletions
29
apps/web/src/components/Bootcamp/HowItWorks/HowItWorksCard.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> | ||
); | ||
} |
Oops, something went wrong.