slicejs-web-framework 1.0.17 → 1.0.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "slicejs-web-framework",
-  "version": "1.0.17",
+  "version": "1.0.19",
   "description": "",
   "engines": {
     "node": ">=20"

package/src/Components/AppComponents/TheBuildMethod/TheBuildMethod.css

@@ -1,6 +1,7 @@
 slice-the-build-method {
   font-family: var(--font-family);
   color: var(--font-primary-color);
+  display: block;
 }
 
 slice-the-build-method .build-method-container {
@@ -9,107 +10,266 @@ slice-the-build-method .build-method-container {
   padding: 20px;
 }
 
+slice-the-build-method .build-method-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 1.5rem;
+}
+
 slice-the-build-method h1 {
   font-size: 2.2rem;
-  margin-bottom: 1.5rem;
   color: var(--primary-color);
   border-bottom: 2px solid var(--secondary-background-color);
   padding-bottom: 0.5rem;
+  margin-right: 1rem;
+  margin-bottom: 0;
+  flex-grow: 1;
+}
+
+slice-the-build-method .build-method-badge {
+  background-color: var(--primary-color);
+  color: var(--primary-color-contrast);
+  padding: 6px 12px;
+  border-radius: 20px;
+  font-size: 0.9rem;
+  font-weight: bold;
 }
 
 slice-the-build-method h2 {
   font-size: 1.8rem;
-  margin-top: 2rem;
-  margin-bottom: 1rem;
+  margin-top: 2.5rem;
+  margin-bottom: 1.2rem;
   color: var(--primary-color);
+  position: relative;
+  padding-left: 1rem;
+}
+
+slice-the-build-method h2:before {
+  content: "";
+  position: absolute;
+  left: 0;
+  height: 100%;
+  width: 4px;
+  background-color: var(--primary-color);
+  border-radius: 4px;
 }
 
 slice-the-build-method h3 {
   font-size: 1.5rem;
-  margin-top: 1.5rem;
-  margin-bottom: 0.75rem;
+  margin-top: 1.8rem;
+  margin-bottom: 1rem;
   color: var(--font-primary-color);
 }
 
 slice-the-build-method p {
-  margin-bottom: 1rem;
-  line-height: 1.6;
+  margin-bottom: 1.2rem;
+  line-height: 1.7;
   text-align: justify;
+  font-size: 1.05rem;
 }
 
 slice-the-build-method code {
   font-family: monospace;
   background-color: var(--secondary-background-color);
-  padding: 2px 5px;
+  padding: 3px 6px;
   border-radius: 4px;
-  font-size: 0.9em;
+  font-size: 0.95em;
+  color: var(--primary-color);
 }
 
 slice-the-build-method .syntax-box {
   background-color: var(--secondary-background-color);
-  padding: 15px;
+  padding: 20px;
   border-radius: var(--border-radius-slice);
   margin: 20px 0;
   overflow-x: auto;
+  border-left: 4px solid var(--primary-color);
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
+  transition: transform 0.2s ease;
+}
+
+slice-the-build-method .syntax-box:hover {
+  transform: translateY(-2px);
 }
 
 slice-the-build-method .syntax-box code {
-  font-size: 1.1em;
+  font-size: 1.2em;
   background: none;
 }
 
-slice-the-build-method .parameters-list,
-slice-the-build-method .best-practices-list,
-slice-the-build-method .lifecycle-steps {
-  margin-left: 20px;
-  margin-bottom: 1.5rem;
-  line-height: 1.6;
+slice-the-build-method .parameters-section,
+slice-the-build-method .return-section {
+  background-color: var(--primary-background-color);
+  padding: 15px 20px;
+  border-radius: var(--border-radius-slice);
+  margin: 15px 0;
+  border: 1px solid var(--secondary-background-color);
 }
 
-slice-the-build-method .parameters-list li,
-slice-the-build-method .best-practices-list li,
-slice-the-build-method .lifecycle-steps li {
-  margin-bottom: 0.75rem;
+slice-the-build-method .parameters-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
 }
 
+slice-the-build-method .parameters-list li {
+  display: grid;
+  grid-template-columns: 1fr 1fr 3fr;
+  gap: 15px;
+  margin-bottom: 12px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid var(--secondary-background-color);
+}
 
-slice-the-build-method .lifecycle-steps li {
-  counter-increment: step-counter;
-  position: relative;
-  padding-left: 10px;
+slice-the-build-method .parameters-list li:last-child {
+  border-bottom: none;
+  margin-bottom: 0;
+  padding-bottom: 0;
 }
 
-slice-the-build-method .lifecycle-steps li::before {
+slice-the-build-method .param-name {
   font-weight: bold;
-  margin-right: 8px;
+  color: var(--primary-color);
+}
+
+slice-the-build-method .param-type {
+  font-style: italic;
+  color: var(--font-secondary-color);
+}
+
+slice-the-build-method .example-card {
+  background-color: var(--primary-background-color);
+  border-radius: var(--border-radius-slice);
+  padding: 20px;
+  margin-bottom: 30px;
+  border: 1px solid var(--secondary-background-color);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
+  transition: box-shadow 0.3s ease;
+}
+
+slice-the-build-method .example-card:hover {
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
+}
+
+slice-the-build-method .example-card h3 {
+  margin-top: 0;
   color: var(--primary-color);
 }
 
 slice-the-build-method .method-examples div[class$="-container"] {
-  margin-bottom: 2rem;
+  margin-top: 1rem;
   border-radius: var(--border-radius-slice);
   overflow: hidden;
 }
 
+slice-the-build-method .lifecycle-diagram {
+  background-color: var(--primary-background-color);
+  border-radius: var(--border-radius-slice);
+  padding: 20px;
+  border: 1px solid var(--secondary-background-color);
+}
+
+slice-the-build-method .lifecycle-steps {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+slice-the-build-method .lifecycle-steps li {
+  display: flex;
+  align-items: center;
+  margin-bottom: 15px;
+  padding-bottom: 15px;
+  border-bottom: 1px dashed var(--secondary-background-color);
+}
+
+slice-the-build-method .lifecycle-steps li:last-child {
+  margin-bottom: 0;
+  padding-bottom: 0;
+  border-bottom: none;
+}
+
+slice-the-build-method .step-number {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  background-color: var(--primary-color);
+  color: var(--primary-color-contrast);
+  border-radius: 50%;
+  margin-right: 15px;
+  font-weight: bold;
+  flex-shrink: 0;
+}
+
+slice-the-build-method .step-content {
+  flex-grow: 1;
+  line-height: 1.5;
+}
+
+slice-the-build-method .best-practices-container {
+  background-color: var(--primary-background-color);
+  border-radius: var(--border-radius-slice);
+  padding: 20px;
+  border: 1px solid var(--secondary-background-color);
+}
+
+slice-the-build-method .best-practices-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+slice-the-build-method .best-practices-list li {
+  display: flex;
+  align-items: flex-start;
+  margin-bottom: 15px;
+  line-height: 1.6;
+}
+
+slice-the-build-method .best-practices-list li:last-child {
+  margin-bottom: 0;
+}
+
+slice-the-build-method .practice-icon {
+  display: inline-block;
+  margin-right: 10px;
+  color: var(--success-color);
+  font-weight: bold;
+  font-size: 1.2rem;
+}
+
+slice-the-build-method .method-introduction,
 slice-the-build-method .method-syntax,
 slice-the-build-method .method-examples,
 slice-the-build-method .method-lifecycle,
 slice-the-build-method .method-best-practices {
-  margin-bottom: 3rem;
+  margin-bottom: 3.5rem;
 }
 
 slice-the-build-method section {
-  padding-top: 10px;
+  padding-top: 15px;
 }
 
 @media only screen and (max-width: 770px) {
   slice-the-build-method .build-method-container {
     max-width: 100%;
-    padding: 10px;
+    padding: 15px;
+  }
+
+  slice-the-build-method .build-method-header {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  slice-the-build-method .build-method-badge {
+    margin-top: 10px;
   }
 
   slice-the-build-method h1 {
     font-size: 1.8rem;
+    margin-right: 0;
   }
 
   slice-the-build-method h2 {
@@ -119,4 +279,18 @@ slice-the-build-method section {
   slice-the-build-method h3 {
     font-size: 1.3rem;
   }
+
+  slice-the-build-method .parameters-list li {
+    grid-template-columns: 1fr;
+    gap: 5px;
+  }
+
+  slice-the-build-method .lifecycle-steps li {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  slice-the-build-method .step-number {
+    margin-bottom: 10px;
+  }
 }

package/src/Components/AppComponents/TheBuildMethod/TheBuildMethod.html

@@ -1,5 +1,8 @@
 <div class="build-method-container">
-   <h1 id="build-method">The Build Method</h1>
+   <div class="build-method-header">
+      <h1 id="build-method">The Build Method</h1>
+      <div class="build-method-badge">Core API</div>
+   </div>
    
    <section class="method-introduction">
       <p>
@@ -12,59 +15,75 @@
       <div class="syntax-box">
          <code>await slice.build(componentName, props);</code>
       </div>
-      <h3>Parameters</h3>
-      <ul class="parameters-list">
-         <li><strong>componentName</strong>: <em>string</em> - The name of the component to build as registered in components.js</li>
-         <li><strong>props</strong>: <em>object</em> - (Optional) An object containing properties to set on the component</li>
-      </ul>
-      <h3>Return Value</h3>
-      <p>A Promise that resolves to the constructed component instance, or null if construction fails.</p>
+      <div class="parameters-section">
+         <h3>Parameters</h3>
+         <ul class="parameters-list">
+            <li><div class="param-name">componentName</div><div class="param-type">string</div><div class="param-description">The name of the component to build as registered in components.js</div></li>
+            <li><div class="param-name">props</div><div class="param-type">object</div><div class="param-description">(Optional) An object containing properties to set on the component</div></li>
+         </ul>
+      </div>
+      <div class="return-section">
+         <h3>Return Value</h3>
+         <p>A Promise that resolves to the constructed component instance, or null if construction fails.</p>
+      </div>
    </section>
 
    <section class="method-examples">
       <h2 id="examples">Examples</h2>
       
-      <h3 id="basic-usage">Basic Usage</h3>
-      <p>Creating a simple button component and adding it to the DOM:</p>
-      <div class="basic-example-container"></div>
+      <div class="example-card">
+         <h3 id="basic-usage">Basic Usage</h3>
+         <p>Creating a simple button component and adding it to the DOM:</p>
+         <div class="basic-example-container"></div>
+      </div>
       
-      <h3 id="advanced-props">Advanced Properties</h3>
-      <p>Building a component with more complex properties:</p>
-      <div class="advanced-example-container"></div>
+      <div class="example-card">
+         <h3 id="advanced-props">Advanced Properties</h3>
+         <p>Building a component with more complex properties:</p>
+         <div class="advanced-example-container"></div>
+      </div>
       
-      <h3 id="nested-components">Building Nested Components</h3>
-      <p>Creating a structure of components that contain other components:</p>
-      <div class="nested-components-container"></div>
+      <div class="example-card">
+         <h3 id="nested-components">Building Nested Components</h3>
+         <p>Creating a structure of components that contain other components:</p>
+         <div class="nested-components-container"></div>
+      </div>
       
-      <h3 id="error-handling">Error Handling</h3>
-      <p>Proper error handling when building components:</p>
-      <div class="error-handling-container"></div>
+      <div class="example-card">
+         <h3 id="error-handling">Error Handling</h3>
+         <p>Proper error handling when building components:</p>
+         <div class="error-handling-container"></div>
+      </div>
    </section>
 
    <section class="method-lifecycle">
       <h2 id="build-lifecycle">Build Lifecycle</h2>
       <p>When <code>slice.build()</code> is called, the following steps occur:</p>
-      <ol class="lifecycle-steps">
-         <li>Verify that the component exists in the component registry</li>
-         <li>Load the component's template (HTML) if not already cached</li>
-         <li>Load the component's class (JS) if not already cached</li>
-         <li>Load the component's styles (CSS) if not already cached</li>
-         <li>Create an instance of the component with the provided properties</li>
-         <li>Call the component's <code>init()</code> method if it exists</li>
-         <li>Attach debug mode if enabled in configuration</li>
-         <li>Register the component in the controller's active components registry</li>
-         <li>Return the fully initialized component instance</li>
-      </ol>
+      <div class="lifecycle-diagram">
+         <ol class="lifecycle-steps">
+            <li><div class="step-number">1</div><div class="step-content">Verify that the component exists in the component registry</div></li>
+            <li><div class="step-number">2</div><div class="step-content">Load the component's template (HTML) if not already cached</div></li>
+            <li><div class="step-number">3</div><div class="step-content">Load the component's class (JS) if not already cached</div></li>
+            <li><div class="step-number">4</div><div class="step-content">Load the component's styles (CSS) if not already cached</div></li>
+            <li><div class="step-number">5</div><div class="step-content">Create an instance of the component with the provided properties</div></li>
+            <li><div class="step-number">6</div><div class="step-content">Call the component's <code>init()</code> method if it exists</div></li>
+            <li><div class="step-number">7</div><div class="step-content">Attach debug mode if enabled in configuration</div></li>
+            <li><div class="step-number">8</div><div class="step-content">Register the component in the controller's active components registry</div></li>
+            <li><div class="step-number">9</div><div class="step-content">Return the fully initialized component instance</div></li>
+         </ol>
+      </div>
    </section>
 
    <section class="method-best-practices">
       <h2 id="best-practices">Best Practices</h2>
-      <ul class="best-practices-list">
-         <li>Always use <code>await</code> with <code>slice.build()</code> since it returns a Promise</li>
-         <li>Provide a unique <code>sliceId</code> for components that need to be referenced later</li>
-         <li>Implement proper error handling around component building</li>
-         <li>Use the component's <code>init()</code> method for additional setup rather than the constructor</li>
-         <li>Remember that component properties are set after construction but before initialization</li>
-      </ul>
+      <div class="best-practices-container">
+         <ul class="best-practices-list">
+            <li><span class="practice-icon">✓</span> Always use <code>await</code> with <code>slice.build()</code> since it returns a Promise</li>
+            <li><span class="practice-icon">✓</span> Provide a unique <code>sliceId</code> for components that need to be referenced later</li>
+            <li><span class="practice-icon">✓</span> Implement proper error handling around component building</li>
+            <li><span class="practice-icon">✓</span> Use the component's <code>init()</code> method for additional setup rather than the constructor</li>
+            <li><span class="practice-icon">✓</span> Remember that component properties are set after construction but before initialization</li>
+         </ul>
+      </div>
    </section>
 </div>

package/src/Components/AppComponents/TheSliceTeam/TheSliceTeam.css

@@ -1,23 +1,208 @@
 .slice_team {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+}
+
+.slice_team_hero {
+  position: relative;
+  width: 100%;
+  height: 300px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  margin-top: 60px;
+  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+  color: var(--primary-color-contrast);
+  text-align: center;
+  overflow: hidden;
+}
+
+.hero_overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
+  opacity: 0.3;
+}
+
+.slice_team_hero h1 {
+  font-size: 2.5rem;
+  margin-bottom: 1rem;
+  z-index: 1;
+  text-shadow: 0 2px 4px rgba(0,0,0,0.2);
+  animation: fadeIn 1s ease-in-out;
+}
+
+.slice_team_hero p {
+  font-size: 1.2rem;
+  z-index: 1;
+  max-width: 600px;
+  animation: fadeIn 1s ease-in-out 0.3s both;
+}
+
+.slice_team_content {
   display: flex;
   flex-direction: column;
   align-items: center;
   padding: 2rem;
-  margin-top: 80px;  /* Ajusta este valor según la altura de tu navbar */
   width: 100%;
+  max-width: 1200px;
 }
 
 .slice_team_title {
   font-size: 2rem;
   color: var(--font-primary-color);
-  margin-bottom: 1rem;
+  margin: 2rem 0;
   text-align: center;
+  position: relative;
+}
+
+.slice_team_title::after {
+  content: '';
+  position: absolute;
+  width: 50px;
+  height: 3px;
+  background-color: var(--primary-color);
+  bottom: -10px;
+  left: 50%;
+  transform: translateX(-50%);
 }
 
 .slice_team_container {
   display: flex;
-  flex-direction: column; /* Cambiado para que estén en columna */
-  align-items: center; /* Centrar las tarjetas */
-  gap: 1.5rem;
+  flex-direction: column;
+  align-items: center;
+  gap: 2rem;
+  width: 100%;
+}
+
+slice-team-card {
+  opacity: 0;
+  animation: fadeInUp 0.8s ease-out forwards;
+  animation-delay: calc(var(--animation-order, 0) * 0.2s);
+}
+
+.slice_special_thanks {
+  margin: 4rem 0;
+  padding: 2rem;
+  background-color: var(--secondary-background-color);
+  border-radius: 10px;
+  width: 90%;
+  max-width: 800px;
+  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
+  transform: translateY(20px);
+  opacity: 0;
+  animation: fadeInUp 0.8s ease-out forwards;
+  animation-delay: 0.6s;
+}
+
+.special_thanks_content {
+  text-align: center;
+}
+
+.special_thanks_content h3 {
+  font-size: 1.8rem;
+  color: var(--primary-color);
+  margin-bottom: 1.5rem;
+}
+
+.special_thanks_content p {
+  color: var(--font-primary-color);
+  line-height: 1.7;
+  text-align: center;
+}
+
+.special_thanks_content strong {
+  color: var(--primary-color);
+  font-weight: bold;
+  position: relative;
+  display: inline-block;
+}
+
+.special_thanks_content strong::after {
+  content: '';
+  position: absolute;
   width: 100%;
+  height: 2px;
+  background-color: var(--primary-color);
+  bottom: -2px;
+  left: 0;
+  transform: scaleX(0);
+  transform-origin: left;
+  transition: transform 0.3s ease;
+}
+
+.special_thanks_content:hover strong::after {
+  transform: scaleX(1);
 }
+
+.slice_team_footer {
+  margin-top: 2rem;
+  text-align: center;
+  padding: 1rem;
+  width: 100%;
+}
+
+.slice_team_footer a {
+  color: var(--primary-color);
+  text-decoration: none;
+  font-weight: bold;
+  transition: color 0.3s ease;
+}
+
+.slice_team_footer a:hover {
+  text-decoration: underline;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Responsive styling */
+@media only screen and (min-width: 768px) {
+  .slice_team_container {
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+  
+  slice-team-card {
+    width: 45%;
+  }
+}
+
+@media only screen and (max-width: 767px) {
+  .slice_team_hero {
+    height: 250px;
+    padding: 1rem;
+  }
+  
+  .slice_team_hero h1 {
+    font-size: 2rem;
+  }
+  
+  .slice_special_thanks {
+    padding: 1.5rem;
+  }
+}

package/src/Components/AppComponents/TheSliceTeam/TheSliceTeam.html

@@ -1,6 +1,18 @@
- <div class="slice_team">
+<div class="slice_team">
+   <div class="slice_team_hero">
+      <div class="hero_overlay"></div>
+      <h1>The Minds Behind Slice.js</h1>
+      <p>Meet the passionate developers who created this framework</p>
+   </div>
+   
+   <div class="slice_team_content">
       <h2 class="slice_team_title">Our Team</h2>
       <div class="slice_team_container"></div>
-    </div>
- 
-  
+      
+      <div class="slice_special_thanks"></div>
+      
+      <div class="slice_team_footer">
+         <p>Want to contribute? Join us on <a href="https://github.com/VKneider/slice.js" target="_blank">GitHub</a></p>
+      </div>
+   </div>
+</div>

package/src/Components/AppComponents/TheSliceTeam/TheSliceTeam.js

@@ -5,99 +5,66 @@ export default class TheSliceTeam extends HTMLElement {
 
      this.$container = this.querySelector('.slice_team_container');
      this.$title = this.querySelector('.slice_team_title');
+     this.$specialThanks = this.querySelector('.slice_special_thanks');
 
      slice.controller.setComponentProps(this, props);
      this.debuggerProps = ['members'];
   }
 
   async init() {
+     const navBar = await slice.build('Navbar', {
+        position: 'fixed',
+        logo: {
+           src: '/images/Slice.js-logo.png',
+           path: '/',
+        },
+        items: [
+           { text: 'Home', path: '/' },
+           { text: 'Documentation', path: '/Documentation' },
+           { text: 'Playground', path: '/Playground' },
+           { text: 'Our Team', path: '/Team' }
+        ],
+        buttons: [{
+           value: 'Change Theme',
+           onClickCallback: async () => {
+              let theme = slice.stylesManager.themeManager.currentTheme;
+              if (theme === 'Slice') await slice.setTheme('Light');
+              else if (theme === 'Light') await slice.setTheme('Dark');
+              else if (theme === 'Dark') await slice.setTheme('Slice');
+           },
+        }],
+     });
 
-
-
-   const navBar = await slice.build('Navbar', {
-      position: 'fixed',
-      logo: {
-         src: '/images/Slice.js-logo.png',
-         path: '/',
-      },
-      items: [
-         {
-            text: 'Home',
-            path: '/',
-         },
-         {
-            text: 'Documentation',
-            path: '/Documentation',
-         },
-         {
-            text: 'Playground',
-            path: '/Playground',
-         },
-         {
-            text: 'Our Team',
-            path: '/Team',
-         }
-
-      ],
-      buttons: [
-         {
-            value: 'Change Theme',
-            // color:
-            onClickCallback: async () => {
-
-               let theme = slice.stylesManager.themeManager.currentTheme;
-               if (theme === 'Slice') {
-                  await slice.setTheme('Light');
-                  //theme = 'Light';
-               } else if (theme === 'Light') {
-                  await slice.setTheme('Dark');
-                  //theme = 'Dark';
-               } else if (theme === 'Dark') {
-                  await slice.setTheme('Slice');
-                  //theme = 'Slice';
-               }
-            },
-         },
-      ],
-   });
-
-
-   this.appendChild(navBar);
-   
-    const Victor = {
-      name: "Victor Kneider",
-      role: "Founder. Lead Developer. Software Architect.",
-      image:"https://avatars.githubusercontent.com/u/103617388?v=4",
-      description: "Computer Engineer passionate and ethusiast about technology and Component-Based Development. He is the creator of Slice.js and the main developer of the project.",
-      links: [
-         {label: "Github", href: "https://github.com/VKneider" },
-         {label: "Linkedin", href:"https://www.linkedin.com/in/vkneider/"}
-      ]
-   
-       
-
-      
-    }
-
-
-    const Julio = {
-      name: "Julio Graterol",
-      role: "Frontend Developer. Visual Components Library Creator and Designer",
-      image:"https://avatars.githubusercontent.com/u/99130732?v=4",
-      //julio is a frontend developer and designer, he is the creator of the visual components library and the designer of the Slice.js logo and website.
-      description: "Frontend Developer and Designer. He is the creator of the Visual Components Library and the designer of the Slice.js logo and website.",
-      links: [
-         {label: "Github", href: "https://github.com/juliograterol"},
-         {label: "Linkedin", href:"https://www.linkedin.com/in/julio-graterol-187589289/"}
-      ]
-
+     this.appendChild(navBar);
      
-    }
-
-    const members = [Victor, Julio];  
-
-    await this.addMembers(members);
+     // Team members data
+     const Victor = {
+        name: "Victor Kneider",
+        role: "Founder. Lead Developer. Software Architect.",
+        image: "https://avatars.githubusercontent.com/u/103617388?v=4",
+        description: "Computer Engineer and the principal creator of Slice.js. Victor architected the core framework, developed the structural components, implemented the router system, and designed the component lifecycle. He also created the documentation and maintains the repository, laying the groundwork for the entire framework ecosystem.",
+        links: [
+           {label: "Github", href: "https://github.com/VKneider" },
+           {label: "Linkedin", href: "https://www.linkedin.com/in/vkneider/"}
+        ]
+     };
+
+     const Julio = {
+        name: "Julio Graterol",
+        role: "Frontend Developer. Visual Components Library Creator and Designer",
+        image: "https://avatars.githubusercontent.com/u/99130732?v=4",
+        description: "Frontend Developer and Designer. He is the creator of the Visual Components Library and the designer of the Slice.js logo and website.",
+        links: [
+           {label: "Github", href: "https://github.com/juliograterol"},
+           {label: "Linkedin", href: "https://www.linkedin.com/in/julio-graterol-187589289/"}
+        ]
+     };
+
+     const members = [Victor, Julio];  
+     await this.addMembers(members);
      
+     // Add special thanks section with animation
+     this.renderSpecialThanks();
   }
 
   async addMembers(members) {
@@ -117,6 +84,21 @@ export default class TheSliceTeam extends HTMLElement {
      this.$container.appendChild(card);
   }
 
+  renderSpecialThanks() {
+     const specialThanksContent = document.createElement('div');
+     specialThanksContent.className = 'special_thanks_content';
+     specialThanksContent.innerHTML = `
+        <h3>Special Thanks</h3>
+        <p>
+          Victor Kneider would like to express his deepest gratitude to <strong>Jubert Pérez</strong> 
+          for being a constant source of motivation, support, and encouragement throughout 
+          the development of the Slice.js framework. Your belief in this project and guidance 
+          have been invaluable to its creation.
+        </p>
+     `;
+     this.$specialThanks.appendChild(specialThanksContent);
+  }
+
   get members() {
      return this._members;
   }
@@ -126,4 +108,4 @@ export default class TheSliceTeam extends HTMLElement {
   }
 }
 
-window.customElements.define('slice-team', TheSliceTeam);
+window.customElements.define('slice-team', TheSliceTeam);

package/src/Themes/Slice.css

@@ -1,47 +1,47 @@
 :root {
   /* Tipografía */
-  --font-primary-color: #6D2323; /* Rojo profundo para los textos principales */
-  --font-secondary-color: #A31D1D; /* Rojo más intenso para destacar */
-  
-  /** Primary - Colores cálidos **/
-  --primary-color: #A31D1D; /* Rojo oscuro pero sofisticado */
-  --primary-color-rgb: 163, 29, 29;
-  --primary-background-color: #FEF9E1; /* Beige suave para el fondo, cálido y acogedor */
-  --primary-color-contrast: #ffffff; /* Contraste blanco para claridad */
-  --primary-color-shade: #6D2323; /* Rojo más oscuro para énfasis */
-
-  /** Secondary - Color cálido y elegante **/
-  --secondary-color: #E5D0AC; /* Beige cálido y suave */
-  --secondary-color-rgb: 229, 208, 172;
-  --secondary-background-color: #FEF9E1; /* Fondo claro para resaltar los elementos */
-  --secondary-color-contrast: #6D2323; /* Contraste con el rojo más oscuro */
-
-  /** Tertiary - Colores neutros pero sofisticados **/
-  --tertiary-background-color: #F5E0C7; /* Beige un poco más oscuro para balancear el diseño */
-
-  /** Success - Verde suave para mensajes positivos **/
-  --success-color: #4CAF50; /* Verde natural para dar un toque de frescura */
+  --font-primary-color: #2E1A47; /* Uva oscuro, elegante para lectura */
+  --font-secondary-color: #7D3AC1; /* Uva brillante para títulos y resaltes */
+
+  /** Primary - Uva intenso **/
+  --primary-color: #7D3AC1;
+  --primary-color-rgb: 125, 58, 193;
+  --primary-background-color: #F8F4FF; /* Lila muy claro como fondo principal */
+  --primary-color-contrast: #ffffff;
+  --primary-color-shade: #4E2279;
+
+  /** Secondary - Lima vibrante **/
+  --secondary-color: #C6FF00; /* Amarillo lima brillante, capta la atención */
+  --secondary-color-rgb: 198, 255, 0;
+  --secondary-background-color: #F9FFE1;
+  --secondary-color-contrast: #2E2E2E;
+
+  /** Tertiary - Turquesa suave **/
+  --tertiary-background-color: #D0F4F2; /* Fondo suave, fresco y moderno */
+
+  /** Success - Verde esmeralda claro **/
+  --success-color: #00B894;
   --success-contrast: #ffffff;
 
-  /** Warning - Amarillo suave para advertencias sutiles **/
-  --warning-color: #FFB74D;
-  --warning-contrast: #4e342e;
+  /** Warning - Amarillo más tradicional pero suave **/
+  --warning-color: #FFD54F;
+  --warning-contrast: #3E2723;
 
-  /** Danger - Rojo más suave para alertas pero no tan fuerte **/
-  --danger-color: #6D2323; /* Rojo profundo para peligros o advertencias */
+  /** Danger - Coral vibrante (sin caer en rojo tradicional) **/
+  --danger-color: #FF6F61;
   --danger-contrast: #ffffff;
 
-  /** Medium - Gris cálido para textos secundarios **/
-  --medium-color: #A89F91;
+  /** Medium - Gris lavanda para texto secundario **/
+  --medium-color: #A89FB5;
   --medium-contrast: #000000;
 
-  /* Disabled - Un color claro para elementos deshabilitados */
-  --disabled-color: #E6E0B9;
+  /** Disabled - Gris pastel lavanda **/
+  --disabled-color: #E6E0F1;
 
-  /** Accent - Un toque cálido y sutil **/
-  --accent-color: #C75B5B;
+  /** Accent - Turquesa brillante para detalles elegantes **/
+  --accent-color: #00CFC1;
 
-  /* Sombras suaves para dar profundidad */
-  --box-shadow-primary: 0px 4px 10px rgba(163, 29, 29, 0.1);
-  --box-shadow-secondary: 0px 3px 8px rgba(109, 35, 35, 0.1);
+  /* Sombras */
+  --box-shadow-primary: 0px 4px 12px rgba(125, 58, 193, 0.15);
+  --box-shadow-secondary: 0px 3px 8px rgba(198, 255, 0, 0.1);
 }