diff --git a/app/components/contents/WorkshopCard.js b/app/components/contents/WorkshopCard.js
new file mode 100644
index 0000000..1cd1fd5
--- /dev/null
+++ b/app/components/contents/WorkshopCard.js
@@ -0,0 +1,15 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+export default function WorkshopCard({ icon, title, description }) {
+ return (
+
+
+
+
+
+
+
{title}
+
{description}
+
+ );
+}
diff --git a/app/components/contents/WorkshopsCta.js b/app/components/contents/WorkshopsCta.js
new file mode 100644
index 0000000..b0714ce
--- /dev/null
+++ b/app/components/contents/WorkshopsCta.js
@@ -0,0 +1,15 @@
+import ButtonLink from '../common/ButtonLink';
+
+export default function WorkshopsCta({ title, description, buttonText, buttonLink }) {
+ return (
+
+
+
{title}
+
{description}
+
+
+
+
+
+ );
+}
diff --git a/app/labs/page.js b/app/labs/page.js
index 55637a7..e97c18c 100644
--- a/app/labs/page.js
+++ b/app/labs/page.js
@@ -1,10 +1,12 @@
import ButtonLink from '../components/common/ButtonLink';
import SectionDescription from '../components/common/SectionDescription';
import SectionTitle from '../components/common/SectionTitle';
+import WorkshopCard from '../components/contents/WorkshopCard';
+import WorkshopsCta from '../components/contents/WorkshopsCta';
import Github from "../github.js";
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faStar, faCode } from '@fortawesome/free-solid-svg-icons';
+import { faStar, faCode, faBookOpen, faUsers, faScrewdriverWrench } from '@fortawesome/free-solid-svg-icons';
export const dynamic = 'force-dynamic';
@@ -29,9 +31,65 @@ export default async function LabsPage() {
return (
+
+
+
Workshops & Labs
+
+ Acesse workshops introdutórios e projetos desenvolvidos pela comunidade da Web Tech Network para
+ aprender tecnologia de forma prática e colaborativa.
+
+
+
+
+
+
+
+
+ O que são os Workshops?
+
+ Os workshops da Web Tech Network são encontros introdutórios voltados para aprendizado prático em
+ diferentes áreas da tecnologia. Durante os encontros, os participantes têm contato com conceitos
+ fundamentais, demonstrações práticas e atividades guiadas para desenvolver conhecimentos técnicos de
+ forma acessível.
+
+
+
+
+
+
+
+
+
+
+
+
- Labs
- Todo projeto desenvolvido pelos membros da WebTech gera um ou mais labs, que são repositórios no GitHub que contam com todo o detalhamento técnico das tecnologias utilizadas e dos conhecimentos desenvolvidos.
+ O que são os Labs?
+
+ Os labs são repositórios no GitHub gerados a partir dos projetos desenvolvidos pelos membros da WebTech.
+ Eles reúnem o detalhamento técnico das tecnologias utilizadas e os conhecimentos adquiridos ao longo do desenvolvimento.
+
{data.map((repo) => )}
@@ -77,4 +135,5 @@ function LabLabel({ children }) {
return (