diff --git a/apps/base-docs/docusaurus.config.js b/apps/base-docs/docusaurus.config.js index 5654acdb88..a955a7851e 100644 --- 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 index 1e64571861..cbc7473bc9 100644 --- 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 new file mode 100644 index 0000000000..226214746d --- /dev/null +++ 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 ( + <> + + Base + + + + + + + + + + + + + + + + + +
+ + + + + + + + + +
+ + ); +} diff --git a/apps/web/public/images/base-bootcamp-white.png b/apps/web/public/images/base-bootcamp-white.png new file mode 100644 index 0000000000..e015b1d924 Binary files /dev/null and b/apps/web/public/images/base-bootcamp-white.png differ diff --git a/apps/web/public/images/bootcamp-background.png b/apps/web/public/images/bootcamp-background.png new file mode 100644 index 0000000000..7afb9256a3 Binary files /dev/null and b/apps/web/public/images/bootcamp-background.png differ diff --git a/apps/web/src/components/Bootcamp/Cost.tsx b/apps/web/src/components/Bootcamp/Cost.tsx new file mode 100644 index 0000000000..00cd9ab28c --- /dev/null +++ b/apps/web/src/components/Bootcamp/Cost.tsx @@ -0,0 +1,15 @@ +export function Cost() { + return ( +
+
+
+

Cost

+
+ +
+

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.

+
+
+
+ ); +} diff --git a/apps/web/src/components/Bootcamp/Dates.tsx b/apps/web/src/components/Bootcamp/Dates.tsx new file mode 100644 index 0000000000..926368d27d --- /dev/null +++ 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 ( +
+
+

Dates and deadlines

+
+
+
+

Cohort 3: Nov 13, 2023

+

Application deadline: Oct 27, 2023

+ +
+ + + +
+
+
+

Cohort 4: Jan 9, 2024

+

Application deadline: Dec 15, 2023

+ +
+ + + +
+
+
+
+ ); +} diff --git a/apps/web/src/components/Bootcamp/Faq/FaqSidebar.tsx b/apps/web/src/components/Bootcamp/Faq/FaqSidebar.tsx new file mode 100644 index 0000000000..5507baf323 --- /dev/null +++ b/apps/web/src/components/Bootcamp/Faq/FaqSidebar.tsx @@ -0,0 +1,80 @@ +import { QuestionAccordion } from './QuestionAccordion'; + +export function FaqSidebar() { + return ( +
+
+
+

Frequently Asked Questions

+
+ +
+ + + + + + + + + + + + + + +

Base Bootcamp will require ~15 hours/week for ~8 weeks. +

+

+ 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. +

+
+ )} + /> + + + + + + + + +
+
+
+ + ); +} diff --git a/apps/web/src/components/Bootcamp/Faq/QuestionAccordion.tsx b/apps/web/src/components/Bootcamp/Faq/QuestionAccordion.tsx new file mode 100644 index 0000000000..6efc5c1541 --- /dev/null +++ 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 ( +
+ + {isOpen && {answer}} +
+ ); +} diff --git a/apps/web/src/components/Bootcamp/Hero.tsx b/apps/web/src/components/Bootcamp/Hero.tsx new file mode 100644 index 0000000000..10640b6134 --- /dev/null +++ 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 ( +
+
+
+

Learn to build onchain

+

+ {subtitleCopy} +

+
+
+ + + +
+
+
+ ); +} diff --git a/apps/web/src/components/Bootcamp/HowItWorks/HowItWorksCard.tsx b/apps/web/src/components/Bootcamp/HowItWorks/HowItWorksCard.tsx new file mode 100644 index 0000000000..a5b69b82b9 --- /dev/null +++ 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 ( +
+

{number}

+
+ {isValidElement(title) ? ( + title + ) : ( +

{title}

+ )} + {isValidElement(description) ? ( + description + ) : ( +

{description}

+ )} +
+
+ ); +} diff --git a/apps/web/src/components/Bootcamp/HowItWorks/index.tsx b/apps/web/src/components/Bootcamp/HowItWorks/index.tsx new file mode 100644 index 0000000000..ccec298039 --- /dev/null +++ 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: ( +
+

+ Are you a crypto-proficient software engineer interested in learning to build smart + contracts? Start out by applying to Base Bootcamp. +

+
+ ), + }, + { + 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: ( +
+

+ Work through{' '} + + Base Camp + + , 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. +

+ +
+ +

+ Upon graduation, you’ll earn an exclusive soulbound{' '} + + Base Bootcamp Grad NFT + + . +

+
+ ), + }, +]; + +export function HowItWorks() { + return ( +
+
+

How it works

+
+
+ {featureItems.map((item) => ( + + ))} +
+
+ ); +} diff --git a/apps/web/src/components/Bootcamp/WhatsIncluded.tsx b/apps/web/src/components/Bootcamp/WhatsIncluded.tsx new file mode 100644 index 0000000000..67e71ce8bd --- /dev/null +++ b/apps/web/src/components/Bootcamp/WhatsIncluded.tsx @@ -0,0 +1,25 @@ +export function WhatsIncluded() { + return ( +
+
+
+

What`s included?

+
+ +
+

Base Camp Curriculum

+

Participants will work through the Base Camp content, which is publicly available. However, as part of the Base Bootcamp program, they will also have access to supplemental resources and graded projects, reviewed by Coinbase engineers.

+
+

Mentors

+

Each student is paired with a mentor whom you will meet with once a week.

+
+

Office Hours

+

Base Bootcamp staff will host regular open office hours via Google Meet to answer questions.

+
+

Discord

+

All students will have access to a private channel in the Base Discord where they can interact with Coinbase staff, mentors and other Base Bootcamp students.

+
+
+
+ ); +} diff --git a/apps/web/src/components/Layout/Nav/Nav.tsx b/apps/web/src/components/Layout/Nav/Nav.tsx index e1d2aebd4b..f601747101 100644 --- a/apps/web/src/components/Layout/Nav/Nav.tsx +++ b/apps/web/src/components/Layout/Nav/Nav.tsx @@ -2,6 +2,7 @@ import { useCallback, useState } from 'react'; import { AnimatePresence, motion } from 'framer-motion'; import getConfig from 'next/config'; import Link from 'next/link'; +import { useRouter } from 'next/router'; import { Icon } from '../../Icon/Icon'; import { Logo } from '../../Logo/Logo'; @@ -120,6 +121,7 @@ const mainnetBanner = ( export function Nav({ color }: NavProps) { const [showMobileMenu, toggleMobileMenu] = useState(false); + const { pathname } = useRouter(); const handleMenuButtonClick = useCallback(() => { toggleMobileMenu(true); @@ -138,7 +140,7 @@ export function Nav({ color }: NavProps) {