From d666de45661b39b1c3a4f61bfb88ff5b21a12153 Mon Sep 17 00:00:00 2001
From: Cosme Valera <cosmevalerareales@gmail.com>
Date: Sat, 6 Sep 2025 17:21:53 +0200
Subject: [PATCH 1/2] Change order to be: Introduction, Jenkins, Tutorials,
 Deployments

---
 frontend/src/components/Home.tsx             | 41 ++++++++++----------
 frontend/src/components/IntroductionPage.tsx | 32 ++++++++-------
 2 files changed, 38 insertions(+), 35 deletions(-)

diff --git a/frontend/src/components/Home.tsx b/frontend/src/components/Home.tsx
index 14a4b37..3140dce 100644
--- a/frontend/src/components/Home.tsx
+++ b/frontend/src/components/Home.tsx
@@ -53,18 +53,15 @@ const Home: React.FC<HomeProps> = ({ initialTab = "introduction" }) => {
               strokeLinecap="round"
               strokeLinejoin="round"
               className="main-nav__tab__icon">
-              <path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z" />
-              <path d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z" />
-              <path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0" />
-              <path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5" />
+              <path d="M9 12l2 2 4-4" />
+              <path d="M21 12c.552 0 1-.448 1-1V5c0-.552-.448-1-1-1H3c-.552 0-1 .448-1 1v6c0 .552.448 1 1 1h18z" />
+              <path d="M3 12v6c0 .552.448 1 1 1h16c.552 0 1-.448 1-1v-6" />
             </svg>
             <span className="main-nav__tab__text">Introduction</span>
           </button>
           <button
-            className={`main-nav__tab ${
-              activeTab === "deployments" ? "main-nav__tab--active" : ""
-            }`}
-            onClick={() => handleTabClick("deployments")}>
+            className={`main-nav__tab ${activeTab === "jenkins" ? "main-nav__tab--active" : ""}`}
+            onClick={() => handleTabClick("jenkins")}>
             <svg
               xmlns="http://www.w3.org/2000/svg"
               width="16"
@@ -76,12 +73,9 @@ const Home: React.FC<HomeProps> = ({ initialTab = "introduction" }) => {
               strokeLinecap="round"
               strokeLinejoin="round"
               className="main-nav__tab__icon">
-              <path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z" />
-              <path d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z" />
-              <path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0" />
-              <path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5" />
+              <polygon points="5,3 19,12 5,21" />
             </svg>
-            <span className="main-nav__tab__text">Deployments</span>
+            <span className="main-nav__tab__text">Jenkins</span>
           </button>
           <button
             className={`main-nav__tab ${
@@ -105,8 +99,10 @@ const Home: React.FC<HomeProps> = ({ initialTab = "introduction" }) => {
             <span className="main-nav__tab__text">Tutorials</span>
           </button>
           <button
-            className={`main-nav__tab ${activeTab === "jenkins" ? "main-nav__tab--active" : ""}`}
-            onClick={() => handleTabClick("jenkins")}>
+            className={`main-nav__tab ${
+              activeTab === "deployments" ? "main-nav__tab--active" : ""
+            }`}
+            onClick={() => handleTabClick("deployments")}>
             <svg
               xmlns="http://www.w3.org/2000/svg"
               width="16"
@@ -118,9 +114,12 @@ const Home: React.FC<HomeProps> = ({ initialTab = "introduction" }) => {
               strokeLinecap="round"
               strokeLinejoin="round"
               className="main-nav__tab__icon">
-              <polygon points="5,3 19,12 5,21" />
+              <path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z" />
+              <path d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z" />
+              <path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0" />
+              <path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5" />
             </svg>
-            <span className="main-nav__tab__text">Jenkins</span>
+            <span className="main-nav__tab__text">Deployments</span>
           </button>
         </div>
       </div>
@@ -128,14 +127,14 @@ const Home: React.FC<HomeProps> = ({ initialTab = "introduction" }) => {
       {/* Introduction Content */}
       {activeTab === "introduction" && <IntroductionPage />}
 
-      {/* Deployments Content */}
-      {activeTab === "deployments" && <DeploymentPage />}
+      {/* Jenkins Content */}
+      {activeTab === "jenkins" && <JenkinsPage />}
 
       {/* Tutorials Content */}
       {activeTab === "tutorials" && <TutorialsPage />}
 
-      {/* Jenkins Content */}
-      {activeTab === "jenkins" && <JenkinsPage />}
+      {/* Deployments Content */}
+      {activeTab === "deployments" && <DeploymentPage />}
     </div>
   );
 };
diff --git a/frontend/src/components/IntroductionPage.tsx b/frontend/src/components/IntroductionPage.tsx
index ab87559..e9bced9 100644
--- a/frontend/src/components/IntroductionPage.tsx
+++ b/frontend/src/components/IntroductionPage.tsx
@@ -148,20 +148,21 @@ const IntroductionPage: React.FC = () => {
         </div>
 
         <div className="navigation-guide">
+          {/* Jenkins */}
           <div 
             className="nav-card nav-card--clickable"
-            onClick={() => handleNavigation('deployments')}
+            onClick={() => handleNavigation('jenkins')}
           >
             <div className="nav-card__icon">
-              <Rocket size={24} />
+              <Zap size={24} />
             </div>
             <div className="nav-card__content">
-              <h3>Deployments</h3>
-              <p>Step-by-step deployment guides for Docker, Kubernetes, Kustomize, and Helm</p>
+              <h3>Jenkins</h3>
+              <p>CI/CD automation with live pipelines monitoring and configuration.</p>
               <div className="nav-card__features">
-                <span className="feature-tag">Interactive Commands</span>
-                <span className="feature-tag">Real-time Monitoring</span>
-                <span className="feature-tag">Best Practices</span>
+                <span className="feature-tag">Pipeline Status</span>
+                <span className="feature-tag">Interactive Jobs</span>
+                <span className="feature-tag">Configuration</span>
               </div>
               <div className="nav-card__action">
                 <Play size={16} />
@@ -171,6 +172,7 @@ const IntroductionPage: React.FC = () => {
             </div>
           </div>
 
+          {/* Tutorials */}
           <div 
             className="nav-card nav-card--clickable"
             onClick={() => handleNavigation('tutorials')}
@@ -194,20 +196,21 @@ const IntroductionPage: React.FC = () => {
             </div>
           </div>
 
+          {/* Deployments */}
           <div 
             className="nav-card nav-card--clickable"
-            onClick={() => handleNavigation('jenkins')}
+            onClick={() => handleNavigation('deployments')}
           >
             <div className="nav-card__icon">
-              <Zap size={24} />
+              <Rocket size={24} />
             </div>
             <div className="nav-card__content">
-              <h3>Jenkins</h3>
-              <p>CI/CD automation with live pipelines monitoring and configuration.</p>
+              <h3>Deployments</h3>
+              <p>Step-by-step deployment guides for Docker, Kubernetes, Kustomize, and Helm</p>
               <div className="nav-card__features">
-                <span className="feature-tag">Pipeline Status</span>
-                <span className="feature-tag">Interactive Jobs</span>
-                <span className="feature-tag">Configuration</span>
+                <span className="feature-tag">Interactive Commands</span>
+                <span className="feature-tag">Real-time Monitoring</span>
+                <span className="feature-tag">Best Practices</span>
               </div>
               <div className="nav-card__action">
                 <Play size={16} />
@@ -216,6 +219,7 @@ const IntroductionPage: React.FC = () => {
               </div>
             </div>
           </div>
+
         </div>
       </div>
     </div>

From f3c4cc071cff67ae8d476e9bbf9217be5f60de33 Mon Sep 17 00:00:00 2001
From: Cosme Valera <cosmevalerareales@gmail.com>
Date: Sat, 6 Sep 2025 17:26:54 +0200
Subject: [PATCH 2/2] Merge Home and HomeTabs to HomePage.tsx

---
 frontend/src/App.tsx                            | 17 ++++++++---------
 .../src/components/{Home.tsx => HomePage.tsx}   |  6 +++---
 frontend/src/components/HomeWithTab.tsx         | 12 ------------
 3 files changed, 11 insertions(+), 24 deletions(-)
 rename frontend/src/components/{Home.tsx => HomePage.tsx} (97%)
 delete mode 100644 frontend/src/components/HomeWithTab.tsx

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 83e8e9d..b751144 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -7,8 +7,7 @@ import KubernetesDeployment from "./components/deployments/KubernetesDeployment"
 import KustomizeDeployment from "./components/deployments/KustomizeDeployment";
 import HelmDeployment from "./components/deployments/HelmDeployment";
 import Dashboard from "./components/deployments/Dashboard";
-import Home from "./components/Home";
-import HomeWithTab from "./components/HomeWithTab";
+import HomePage from "./components/HomePage";
 import DockerTutorial from "./components/tutorials/DockerTutorial";
 import KubernetesTutorial from "./components/tutorials/KubernetesTutorial";
 import KustomizeTutorial from "./components/tutorials/KustomizeTutorial";
@@ -130,17 +129,17 @@ function App() {
       {/* Main Content */}
       <main className="container">
         <Routes>
-          {/* Home with previews */}
-          <Route path="/" element={<Home />} />
+          {/* Main Home Page - defaults to Introduction */}
+          <Route path="/" element={<HomePage />} />
 
-          {/* Redirect routes to Home with specific tabs */}
+          {/* Section pages - all use HomePage with specific tabs */}
           <Route
             path="/introduction"
-            element={<HomeWithTab tab="introduction" />}
+            element={<HomePage initialTab="introduction" />}
           />
-          <Route path="/deployments" element={<HomeWithTab tab="deployments" />} />
-          <Route path="/tutorials" element={<HomeWithTab tab="tutorials" />} />
-          <Route path="/jenkins" element={<HomeWithTab tab="jenkins" />} />
+          <Route path="/jenkins" element={<HomePage initialTab="jenkins" />} />
+          <Route path="/tutorials" element={<HomePage initialTab="tutorials" />} />
+          <Route path="/deployments" element={<HomePage initialTab="deployments" />} />
 
           {/* Individual deployment pages */}
           <Route path="/deployments/docker" element={<DockerDeployment />} />
diff --git a/frontend/src/components/Home.tsx b/frontend/src/components/HomePage.tsx
similarity index 97%
rename from frontend/src/components/Home.tsx
rename to frontend/src/components/HomePage.tsx
index 3140dce..2ec7a56 100644
--- a/frontend/src/components/Home.tsx
+++ b/frontend/src/components/HomePage.tsx
@@ -5,11 +5,11 @@ import DeploymentPage from "./deployments/DeploymentPage";
 import TutorialsPage from "./tutorials/TutorialsPage";
 import JenkinsPage from "./jenkins/JenkinsPage";
 
-interface HomeProps {
+interface HomePageProps {
   initialTab?: "introduction" | "deployments" | "tutorials" | "jenkins";
 }
 
-const Home: React.FC<HomeProps> = ({ initialTab = "introduction" }) => {
+const HomePage: React.FC<HomePageProps> = ({ initialTab = "introduction" }) => {
   const [activeTab, setActiveTab] = useState<
     "introduction" | "deployments" | "tutorials" | "jenkins"
   >(initialTab);
@@ -139,4 +139,4 @@ const Home: React.FC<HomeProps> = ({ initialTab = "introduction" }) => {
   );
 };
 
-export default Home;
+export default HomePage;
diff --git a/frontend/src/components/HomeWithTab.tsx b/frontend/src/components/HomeWithTab.tsx
deleted file mode 100644
index 2ea2336..0000000
--- a/frontend/src/components/HomeWithTab.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from 'react'
-import Home from './Home'
-
-interface HomeWithTabProps {
-  tab: 'introduction' | 'deployments' | 'tutorials' | 'jenkins'
-}
-
-const HomeWithTab: React.FC<HomeWithTabProps> = ({ tab }) => {
-  return <Home initialTab={tab} />
-}
-
-export default HomeWithTab