From 450ec7fc9c23c457dd92d3ab0171dc5bdfb0eff0 Mon Sep 17 00:00:00 2001
From: Karen Keiko <nascikeiko@gmail.com>
Date: Thu, 20 Jun 2024 14:43:18 -0300
Subject: [PATCH] feat(dashed): Creates component with text and box with dashed
 line with the appropriate responsiveness.

---
 app/carreira/page.tsx        |  2 ++
 app/components/DashedBox.tsx | 45 ++++++++++++++++++++++++++++++++++++
 2 files changed, 47 insertions(+)
 create mode 100644 app/components/DashedBox.tsx

diff --git a/app/carreira/page.tsx b/app/carreira/page.tsx
index 456596c..385aac9 100644
--- a/app/carreira/page.tsx
+++ b/app/carreira/page.tsx
@@ -1,5 +1,6 @@
 import IconText from '@/components/IconText';
 import contact from '@/assets/image/contact.svg';
+import DashedBox from '../components/DashedBox';
 
 export default function Career() {
   const data = [
@@ -35,6 +36,7 @@ export default function Career() {
           Se junte a nossa equipe
         </h1>
       </div>
+      <DashedBox />
       <div className="flex flex-col justify-center items-center mt-24 p-6 gap-16 lg:flex-row lg:flex-wrap xl:flex-nowrap lg:mt-52 lg:gap-8 2xl:max-w-[1300px] 2xl:m-auto">
         {data.map((item) => {
           return (
diff --git a/app/components/DashedBox.tsx b/app/components/DashedBox.tsx
new file mode 100644
index 0000000..65cd8d3
--- /dev/null
+++ b/app/components/DashedBox.tsx
@@ -0,0 +1,45 @@
+export default function DashedBox() {
+  return (
+    <>
+      <div className="flex flex-col gap-8 mt-24 p-4 justify-center text-center lg:flex-row lg:mt-48 lg:p-0 lg:gap-16 lg:text-start xl:w-[68rem] xl:max-w-[1300px] xl:m-auto xl:mt-48">
+        <div className="flex self-center lg:w-[58rem] lg:text-end lg:self-start">
+          <h1 className="flex text-4xl text-white font-extrabold uppercase lg:text-7xl lg:self-start">
+            Vem com a gente
+          </h1>
+        </div>
+        <div className="flex flex-col gap-16">
+          <div className="flex flex-col gap-16 text-start border-2 border-dashed border-gray-500 p-2">
+            <p className="text-xl lg:text-2xl xl:text-3xl">
+              Oferecemos um ambiente de trabalho acolhedor para que todos os
+              membros possam evoluir profissionalmente de forma sustentável e
+              segura.
+            </p>
+            <p className="text-xl lg:text-2xl xl:text-3xl">
+              Além de ser um ambiente onde é possivel compartilhar sugestões e
+              críticas do trabalho, fazer parte do Tesseract inclui:
+            </p>
+          </div>
+          <div className="flex justify-center lg:justify-start">
+            <ul className="flex flex-col gap-4">
+              <li className="text-xl text-gray font-light lg:text-2xl xl:text-3xl">
+                Trabalho 100% home office
+              </li>
+              <li className="text-xl text-gray font-light lg:text-2xl xl:text-3xl">
+                Horários flexíveis
+              </li>
+              <li className="text-xl text-gray font-light lg:text-2xl xl:text-3xl">
+                Plano de carreira
+              </li>
+              <li className="text-xl text-gray font-light lg:text-2xl xl:text-3xl">
+                Bonificações semestrais
+              </li>
+              <li className="text-xl text-gray font-light lg:text-2xl xl:text-3xl">
+                Descanso remunerado
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}