feat: page admin

src/app/admin/page.tsx

+import { Card } from '@/components/card'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { CoursesCard } from '@/utils/courses-array'
+import { Pencil, Search } from 'lucide-react'
+import Link from 'next/link'
+
+const areas = [
+  {
+    title: 'Educação',
+  },
+  {
+    title: 'Negócios',
+  },
+  {
+    title: 'Comunicação',
+  },
+  {
+    title: 'Saúde',
+  },
+  {
+    title: 'Tecnologia',
+  },
+  {
+    title: 'Teologia',
+  },
+]
+
+const banners = [
+  {
+    title: 'Banner Home',
+  },
+  {
+    title: 'CTAs',
+  },
+]
+
+export default function Admin() {
+  return (
+    <section className="container">
+      <h1 className="text-green-400 text-2xl">Bem vindo, João da Silva,</h1>
+      <div className="flex h-auto mb-20">
+        <aside className="mt-10 w-[348px]">
+          <h2 className="text-purple-50 text-2xl">Áreas</h2>
+          <Button className="uppercase mt-6">+ Adicionar novo</Button>
+          <nav className="my-6">
+            <ul className="space-y-4">
+              {areas.map((area) => (
+                <li
+                  key={area.title}
+                  className="flex justify-between border-b border-green-400 py-2"
+                >
+                  <Link href="#">{area.title}</Link>
+                  <Pencil className="text-green-400" />
+                </li>
+              ))}
+            </ul>
+          </nav>
+
+          <h2 className="text-purple-50 text-2xl mt-10">Banners</h2>
+          <nav className="my-6">
+            <ul className="space-y-4">
+              {banners.map((banner) => (
+                <li
+                  key={banner.title}
+                  className="flex justify-between border-b border-green-400 py-2"
+                >
+                  <Link href="#">{banner.title}</Link>
+                  <Pencil className="text-green-400" />
+                </li>
+              ))}
+            </ul>
+          </nav>
+        </aside>
+
+        <div className="flex-1 ml-4 pl-6 border-l border-gray-50">
+          <h2 className="text-purple-50 text-2xl">Cursos</h2>
+          <Button className="uppercase mt-6">+ Adicionar novo</Button>
+          <div className="flex items-center flex-1 my-6">
+            <Input className="pr-8" placeholder="Pesquisar" />
+            <Search size={24} className="-ml-6" />
+          </div>
+          <div className="flex flex-wrap justify-around gap-4">
+            {CoursesCard.map((course) => (
+              <Link key={course.id} className="lowercase" href="#">
+                <div className={`bg-gray-100 pb-4 rounded-lg max-w-[163px]`}>
+                  <Card.Image image={course.image.src} width="240" height="320">
+                    <Card.Title title={course.title} />
+                  </Card.Image>
+                  <Button
+                    variant="secondary"
+                    className="flex gap-4 mt-4 mx-auto"
+                  >
+                    <Pencil />
+                    <span className="uppercase">Editar</span>
+                  </Button>
+                </div>
+              </Link>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}

tailwind.config.ts

@@ -32,6 +32,7 @@ const config = {
           100: '#FFEB3B',
         },
         purple: {
+          50: '#BA68C8',
           100: '#9C27B0',
           200: '#7B1FA2',
         },