From 8e863fc6ef85e178ebfdb125b20f238236286d1b Mon Sep 17 00:00:00 2001
From: Santiago Montoya <santiago.mordz@gmail.com>
Date: Wed, 25 Jun 2025 21:34:21 +0000
Subject: [PATCH] feat(process display): tab content rendering functionality

---
 src/front/components/Process.jsx | 82 ++++++++++++++++++++++++++++++++
 src/front/index.css              | 28 +++++++++++
 src/front/pages/Home.jsx         |  4 +-
 3 files changed, 113 insertions(+), 1 deletion(-)
 create mode 100644 src/front/components/Process.jsx

diff --git a/src/front/components/Process.jsx b/src/front/components/Process.jsx
new file mode 100644
index 0000000000..dd765c8f53
--- /dev/null
+++ b/src/front/components/Process.jsx
@@ -0,0 +1,82 @@
+import { useState } from "react"
+
+export const Process = () => {
+    const [activeSection, setActiveSection] = useState('capacidades');
+
+    const activeColor = "#fbff06"
+    const inactiveColor = "#A8AB02"
+
+    return (
+        <section>
+            <div className="container py-5">
+                <div className="row">
+                    <div className="col pe-sm-4 pe-md-5">
+                        <div className="d-flex justify-content-end">
+                            <button
+                                className="process-section-title mb-4"
+                                onClick={() => setActiveSection('capacidades')}
+                                style={{ color: activeSection === 'capacidades' ? activeColor : inactiveColor }}
+                            >Capacidades</button>
+                        </div>
+                    </div>
+
+                    <div className="col ps-sm-4 ps-md-3">
+                        <div className="d-flex justify-content-start">
+                            <button
+                                className="process-section-title mb-4"
+                                onClick={() => setActiveSection('proceso')}
+                                style={{ color: activeSection === 'proceso' ? activeColor : inactiveColor }}
+                            >
+                                Proceso
+                            </button>
+                        </div>
+                    </div>
+
+                    <div className="row">
+                        {activeSection === 'capacidades' ? (
+                            <>
+                                <div className="col-12 col-sm-6 pe-md-3">
+                                    <div className="d-flex justify-content-center justify-content-sm-end mb-4">
+                                        <div className="d-flex flex-column align-items-center gap-3">
+                                            <buton className="ct-btn-outline-accent px-5 py-2">Capacidad 1</buton>
+                                            <buton className="ct-btn-outline-accent px-4 py-2">Capacidad 2</buton>
+                                            <buton className="ct-btn-outline-accent px-5 py-2">Capacidad 3</buton>
+                                            <buton className="ct-btn-outline-accent px-4 py-2">Capacidad 4</buton>
+                                            <buton className="ct-btn-outline-accent px-5 py-2">Capacidad 5</buton>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <div className="col ps-sm-5 text-center text-sm-start">
+                                    <p className="text-white">Lorem ipsum dolor sit amet consectetur. Turpis nulla est hendrerit facilisis mollis faucibus accumsan tempus id. In et a faucibus aenean nunc. Risus lorem fermentum eu dui. Maecenas egestas sit elementum enim nisi consectetur metus non. Pellentesque quam at urna sed ipsum. Dignissim placerat molestie donec vitae. Blandit dolor elementum vitae integer convallis lectus tortor in ipsum.
+                                        Magna placerat volutpat odio egestas. Vestibulum sit cursus id interdum. Nunc vel quis purus pellentesque viverra fermentum aliquam. </p>
+                                </div>
+                            </>
+                        ) : (
+                            <>
+                                <div className="col-12 col-sm-6 pe-sm-5">
+                                    <div className="d-flex justify-content-center justify-content-sm-end mb-4">
+                                        <div className="d-flex flex-column align-items-center gap-3">
+                                            <buton className="ct-btn-outline-accent px-5 py-2">Paso 1</buton>
+                                            <buton className="ct-btn-outline-accent px-4 py-2">Paso 2</buton>
+                                            <buton className="ct-btn-outline-accent px-5 py-2">Paso 3</buton>
+                                            <buton className="ct-btn-outline-accent px-4 py-2">Paso 4</buton>
+                                            <buton className="ct-btn-outline-accent px-5 py-2">Paso 5</buton>
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <div className="col ps-sm-5 text-center text-sm-start">
+                                    <p className="text-white">Otro contenido necesario para explicar la secci'on de proceso </p>
+                                </div>
+                            </>
+                        )
+
+                        }
+
+                    </div>
+                </div>
+            </div>
+        </section>
+    )
+}
\ No newline at end of file
diff --git a/src/front/index.css b/src/front/index.css
index 2ab0bda063..8328fa3999 100644
--- a/src/front/index.css
+++ b/src/front/index.css
@@ -2,6 +2,21 @@ body {
   background-image: linear-gradient(0deg, #124652, #199ab7);
 }
 
+.ct-btn-outline-accent {
+  border: 0.15rem #fbff06 solid;
+  border-radius: 2rem;
+  /*padding: 0.5rem 5rem 0.5rem 5rem;*/
+  color: white;
+  font-weight: bold;
+}
+
+.ct-btn-outline-accent:hover {
+  background-color: #fbff06;
+  /*padding: 0.5rem 5rem 0.5rem 5rem;*/
+  color: #217b8f;
+  font-weight: bolder;
+}
+
 .text-ct-secondary {
   color: #60e0a5;
 }
@@ -14,6 +29,19 @@ body {
   color: #fbff06;
 }
 
+.process-section-title {
+  background: none;
+  border-style: none;
+  font-size: xx-large;
+  color: #fbff06;
+  transition: 0.2s ease;
+}
+
+.process-section-title:hover {
+  color: #fbff06;
+  font-size: 2.08rem;
+}
+
 .card-background {
   background-color: rgba(255, 255, 255, 16%);
   backdrop-filter: blur(3px);
diff --git a/src/front/pages/Home.jsx b/src/front/pages/Home.jsx
index 335078a307..719d31f6eb 100644
--- a/src/front/pages/Home.jsx
+++ b/src/front/pages/Home.jsx
@@ -1,6 +1,7 @@
 import React, { useEffect } from "react"
 import useGlobalReducer from "../hooks/useGlobalReducer.jsx";
 import { Services } from "../components/Services/Services.jsx";
+import { Process } from "../components/Process.jsx";
 
 
 export const Home = () => {
@@ -37,7 +38,8 @@ export const Home = () => {
 		<>
 			<div className="bg-secondary-subtle" style={{ height: "600px" }}>Hero Header Home</div>
 			<Services />
-			
+			<Process />
+
 		</>
 	);
 }; 
\ No newline at end of file