[CHORE] Move bootcamp page to App router (#720)

* move bootcam page to app router

* cleanup

apps/web/app/(base-org)/bootcamp/page.tsx

@@ -0,0 +1,37 @@
+import { Hero } from 'apps/web/src/components/Bootcamp/Hero';
+import { Cost } from 'apps/web/src/components/Bootcamp/Cost';
+import { Dates } from 'apps/web/src/components/Bootcamp/Dates';
+import { FaqSidebar } from 'apps/web/src/components/Bootcamp/Faq/FaqSidebar';
+import { HowItWorks } from 'apps/web/src/components/Bootcamp/HowItWorks';
+import { WhatsIncluded } from 'apps/web/src/components/Bootcamp/WhatsIncluded';
+import { Divider } from 'apps/web/src/components/Divider/Divider';
+
+import type { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  metadataBase: new URL('https://base.org'),
+  title: `Base | Bootcamp`,
+  openGraph: {
+    title: `Base | Bootcamp`,
+    url: `/bootcamp`,
+  },
+};
+
+export default async function Bootcamp() {
+  return (
+    <>
+      <Hero />
+      <main className="flex w-full flex-col items-center bg-black">
+        <HowItWorks />
+        <Divider />
+        <Dates />
+        <Divider />
+        <WhatsIncluded />
+        <Divider />
+        <Cost />
+        <Divider />
+        <FaqSidebar />
+      </main>
+    </>
+  );
+}

apps/web/src/components/Bootcamp/Cost.tsx

@@ -1,4 +1,4 @@
-export function Cost() {
+export async 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">

apps/web/src/components/Bootcamp/Dates.tsx

@@ -1,7 +1,7 @@
 import { Button, ButtonVariants } from '../Button/Button';
 import Link from 'next/link';
 
-export function Dates() {
+export async 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">

apps/web/src/components/Bootcamp/Faq/FaqSidebar.tsx

@@ -1,6 +1,6 @@
 import { QuestionAccordion } from './QuestionAccordion';
 
-export function FaqSidebar() {
+export async function FaqSidebar() {
   return (
     <div className="flex w-full max-w-[1440px] flex-col space-y-20 bg-black px-8 pt-12">
       <div className="lg:border-sidebar-border grid grid-cols-1 font-sans lg:border-l">

apps/web/src/components/Bootcamp/Faq/QuestionAccordion.tsx

@@ -1,3 +1,4 @@
+'use client';
 import { ReactNode, useCallback, useState } from 'react';
 import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/outline';
 

apps/web/src/components/Bootcamp/Hero.tsx

@@ -4,7 +4,7 @@ import Link from 'next/link';
 const subtitleCopy =
   'Base Bootcamp is an async, cohort-based training program designed to turn web developers into Smart Contract developers.';
 
-export function Hero() {
+export async function Hero() {
   return (
     <header className="mt-[-96px] flex h-[700px] w-full flex-col items-center bg-black bg-bootcamp_background_image bg-cover">
       <div className="mt-48 flex w-full max-w-[1440px] flex-col px-8 pt-12">
@@ -21,7 +21,7 @@ export function Hero() {
             target="_blank"
             rel="noreferrer noopener"
           >
-            <Button className="w-full">Apply now</Button>
+            <Button fullWidth>Apply now</Button>
           </Link>
         </div>
       </div>

apps/web/src/components/Bootcamp/HowItWorks/index.tsx

@@ -63,7 +63,7 @@ const featureItems = [
   },
 ];
 
-export function HowItWorks() {
+export async 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">

apps/web/src/components/Bootcamp/WhatsIncluded.tsx

@@ -1,4 +1,4 @@
-export function WhatsIncluded() {
+export async function WhatsIncluded() {
   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">

apps/web/src/components/Divider/Divider.tsx

@@ -2,7 +2,7 @@ type DividerProps = {
   fullWidth?: boolean;
 };
 
-export function Divider({ fullWidth = false }: DividerProps) {
+export async function Divider({ fullWidth = false }: DividerProps) {
   return (
     <div
       className={`flex h-24 w-full flex-row items-center justify-center bg-black${