utn-cli 2.1.52 → 2.1.54

package/templates/frontend/src/app/Paginas/Nucleo/conozcanos/conozcanos.component.css

@@ -0,0 +1,608 @@
+
+.subtitle {
+  background-color: #0b4794;
+  font-size: 25px;
+  color: white;
+  padding: 18px;
+  margin: 20px 0;
+  text-align: center;
+}
+.subtitle p {
+  margin: 5px 0;
+}
+.conozcanos-container {
+  margin: 0 auto;
+  box-sizing: border-box;
+  font-family: 'Roboto', sans-serif;
+  background-color: white;
+}
+
+.conozcanos-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 40px;
+  background-color: white;
+  border-radius: 20px;
+  padding: 40px;
+  margin: 30px 0;
+}
+
+.conozcanos-text {
+  flex: 1;
+}
+
+.conozcanos-text p {
+  font-size: 18px;
+  font-weight: 400;
+  color: #4D4D4D;
+  line-height: 1.6;
+  margin-bottom: 20px;
+}
+
+.conozcanos-image {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.conozcanos-image img {
+  width: 100%;
+  max-width: 390px;
+  height: auto;
+  object-fit: cover;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .conozcanos-container {
+    padding: 0 20px;
+  }
+  
+  .conozcanos-content {
+    flex-direction: column;
+    padding: 30px 20px;
+    gap: 25px;
+  }
+  
+  .conozcanos-text p {
+    font-size: 15px;
+  }
+  
+  .conozcanos-image img {
+    max-width: 280px;
+  }
+}
+@media (min-width: 1400px) {
+  .conozcanos-container {
+    max-width: 1200px;
+  }
+  
+  .conozcanos-text p {
+    font-size: 20px;
+  }
+}
+
+/* Sección Propósito*/
+.proposito-section {
+  margin: 50px 0 40px 0;
+  text-align: center;
+}
+
+.proposito-header {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 20px;
+  margin-bottom: 30px;
+}
+
+.proposito-line {
+  width: 80px;
+  height: 3px;
+  background: linear-gradient(90deg, #0b4794, #667eea);
+  border-radius: 2px;
+}
+
+.proposito-title {
+  font-size: 30px;
+  font-weight: 500;
+  color: black;
+  margin: 0;
+  letter-spacing: -0.5px;
+}
+
+.proposito-text {
+  max-width: 800px;
+  margin: 0 auto 40px auto;
+  text-align: center;
+}
+
+.proposito-text p {
+  font-size: 18px;
+  font-weight: 400;
+  color: #4D4D4D;
+  line-height: 1.6;
+  margin-bottom: 15px;
+}
+
+.proposito-grid {
+  display: flex;
+  justify-content: center;
+  gap: 30px;
+  flex-wrap: wrap;
+  margin-top: 20px;
+}
+
+.proposito-card {
+  flex: 1;
+  min-width: 250px;
+  max-width: 320px;
+  padding: 30px 25px;
+  text-align: left; 
+  background: white;
+}
+
+.card-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 15px;
+}
+
+.card-icon {
+  font-size: 25px;
+  font-weight: 500;
+  color: black;
+  background: #e8f0fe;
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 20px;
+  transition: all 0.3s ease;
+}
+
+
+.proposito-card h3 {
+  font-size: 20px;
+  font-weight: 500;
+  color: black;
+  margin: 0;
+}
+
+.proposito-card p {
+  font-size: 15px;
+  font-weight: 400;
+  color: #6b7280;
+  line-height: 1.5;
+  margin: 0;
+  padding-left: 56px;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .proposito-header {
+    gap: 5px;
+  }
+  
+  .proposito-line {
+    width: 40px;
+  }
+  
+  .proposito-title {
+    font-size: 22px;
+  }
+  
+  .proposito-text p {
+    font-size: 15px;
+  }
+  
+  .proposito-grid {
+    gap: 20px;
+  }
+  
+  .proposito-card {
+    min-width: 100%;
+    padding: 20px;
+  }
+  
+  .card-icon {
+    font-size: 20px;
+     width: 33px;
+  height: 33px;
+  }
+  
+  .proposito-card h3 {
+    font-size: 15px;
+  }
+  
+  .proposito-card p {
+    font-size: 14px;
+  }
+}
+
+@media (min-width: 1400px) {
+  .proposito-title {
+    font-size: 32px;
+  }
+  
+  .proposito-card {
+    max-width: 350px;
+    padding: 35px 30px;
+  }
+  
+  .proposito-card h3 {
+    font-size: 22px;
+  }
+}
+.Liderazgo-container {
+  margin: 0 auto;
+  box-sizing: border-box;
+  font-family: 'Roboto', sans-serif;
+  background-color: white;
+}
+
+.Liderazgo-content {
+  display: flex;
+  flex-direction: column;
+  padding: 20px 40px 40px 40px;
+  margin: 0px 0 40px 0;
+}
+.Liderazgo-header {
+  width: 50%;
+  margin-left: auto;
+  margin-bottom: 40px;
+}
+.Liderazgo-title {
+  font-size: 28px;
+  font-weight: 500;
+  color: black;
+  margin: 0;
+  letter-spacing: -0.5px;
+  text-align: left;
+}
+.Liderazgo-body {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 60px;
+}
+
+.Liderazgo-text {
+  flex: 1;
+  text-align: left;
+  margin-top: 0;
+  padding-top: 0;
+  transform: translateY(-80px); 
+}
+.Liderazgo-text .name {
+  font-size: 16px;
+  font-weight: 700;
+  color: black;
+  margin: 0 0 5px 0;
+}
+
+.Liderazgo-text .cargo {
+  font-size: 16px;
+  font-weight: 500;
+  color: #4D4D4D;
+  margin-bottom: 20px;
+  letter-spacing: 0.5px;
+}
+
+.Liderazgo-text p {
+  font-size: 16px;
+  font-weight: 400;
+  color: #4D4D4D;
+  line-height: 1.6;
+  margin-bottom: 15px;
+}
+
+.Liderazgo-image {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.Liderazgo-image img {
+  width: 100%;
+  max-width: 450px;
+  height: auto;
+  min-height: 350px;
+  object-fit: cover;
+  object-position: top;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .Liderazgo-container {
+    padding: 0 20px;
+  }
+  
+  .Liderazgo-content {
+    padding: 30px 25px;
+  }
+  
+   .Liderazgo-header {
+    width: 100%;
+    margin-left: 0;
+    margin-bottom: 20px;
+  }
+    .Liderazgo-title {
+    font-size: 24px;
+    text-align: left;
+    line-height: 1.3;
+  }
+
+  .Liderazgo-body {
+    flex-direction: column;
+    gap: 30px;
+  }
+  
+  .Liderazgo-text {
+    order: 1;
+    transform: none;
+  }
+  
+  .Liderazgo-image {
+    order: 2;
+  }
+  
+  .Liderazgo-text p {
+    font-size: 14px;
+  }
+  
+  .Liderazgo-image img {
+    max-width: 100%;
+    min-height: 250px;
+  }
+}
+
+@media (min-width: 1400px) {
+  .Liderazgo-container {
+    max-width: 1200px;
+  }
+  
+  .Liderazgo-title {
+    font-size: 32px;
+  }
+  
+  .Liderazgo-text p {
+    font-size: 18px;
+  }
+  
+  .Liderazgo-image img {
+    max-width: 500px;
+    min-height: 400px;
+  }
+}
+
+/* Sección team work*/
+.team-section {
+  margin: 50px 0 40px 0;
+  text-align: center;
+}
+
+.team-header {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 20px;
+  margin-bottom: 30px;
+}
+
+.team-title {
+  font-size: 28px;
+  font-weight: 500;
+  color: black;
+  margin: 0;
+  letter-spacing: -0.5px;
+}
+
+.team-text {
+  max-width: 800px;
+  margin: 0 auto 40px auto;
+  text-align: center;
+}
+
+.team-text p {
+  font-size: 18px;
+  font-weight: 400;
+  color: #4D4D4D;
+  line-height: 1.6;
+  margin-bottom: 15px;
+}
+
+.team-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 40px;
+  margin-top: 30px;
+}
+
+.team-card {
+  text-align: center;
+  background: white;
+  border-radius: 16px;
+  padding: 20px;
+  transition: all 0.3s ease;
+  cursor: pointer;
+}
+/* Flip 3D */
+.team-card{
+  perspective: 1000px;
+  min-height: 340px;
+  background: transparent;
+  padding: 0;
+}
+
+.team-card-inner{
+  position: relative;
+  width: 100%;
+  height: 100%;
+  min-height: 340px;
+  transition: transform 0.8s;
+  transform-style: preserve-3d;
+}
+
+.team-card.flipped .team-card-inner{
+  transform: rotateY(180deg);
+}
+
+.team-front,
+.team-back{
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  background: white;
+  border-radius: 16px;
+  padding: 20px;
+  box-sizing: border-box;
+  backface-visibility: hidden;
+}
+
+.team-front{
+  text-align: center;
+}
+
+.team-back{
+  transform: rotateY(180deg);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  color: #4D4D4D;
+  line-height: 1.6;
+}
+
+.team-card:hover {
+  transform: translateY(-8px);
+  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
+}
+
+.team-photo {
+  width: 180px;
+  height: 180px;
+  margin: 0 auto 20px auto;
+  border-radius: 50%;
+  overflow: hidden;
+  background: #f0f2f5;
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
+}
+
+.team-photo img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: transform 0.3s ease;
+}
+
+.team-card:hover .team-photo img {
+  transform: scale(1.05);
+}
+
+.team-name {
+  font-size: 18px;
+  font-weight: 700;
+  color:#4D4D4D;
+  margin: 0 0 5px 0;
+}
+
+.team-position {
+  font-size: 14px;
+  font-weight: 500;
+  color:#6b7280;
+  letter-spacing: 1px;
+  margin: 0;
+  text-transform: uppercase;
+}
+.team-btn {
+  margin-top: 15px;
+  padding: 8px 18px;
+  border: none;
+  border-radius: 20px;
+  background-color: #0b4794;
+  color: white;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: 0.3s;
+}
+
+.team-btn:hover {
+  background-color: #08366f;
+}
+
+/* Responsive */
+@media (max-width: 992px) {
+  .team-grid {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 30px;
+  }
+}
+
+@media (max-width: 768px) {
+  .team-section {
+    padding: 0 20px;
+  }
+  
+  .team-title {
+    font-size: 24px;
+  }
+  
+  .team-text p {
+    font-size: 14px;
+  }
+  
+  .team-grid {
+    grid-template-columns: 1fr;
+    gap: 30px;
+  }
+  
+  .team-photo {
+    width: 150px;
+    height: 150px;
+  }
+  
+  .team-name {
+    font-size: 16px;
+  }
+  
+  .team-position {
+    font-size: 12px;
+  }
+}
+
+@media (min-width: 1400px) {
+  .team-section {
+    max-width: 1400px;
+  }
+  
+  .team-title {
+    font-size: 36px;
+  }
+  
+  .team-text p {
+    font-size: 20px;
+  }
+  
+  .team-photo {
+    width: 220px;
+    height: 220px;
+  }
+  
+  .team-name {
+    font-size: 20px;
+  }
+  
+  .team-position {
+    font-size: 16px;
+  }
+}

package/templates/frontend/src/app/Paginas/Nucleo/conozcanos/conozcanos.component.html

@@ -0,0 +1,109 @@
+<div class="subtitle">
+  <p>Conózcanos</p>
+</div>
+<div class="conozcanos-container">
+  <div class="conozcanos-content">
+    <div class="conozcanos-text">
+      <p>Somos el equipo profesional de TI de la Universidad Técnica Nacional, encargados del desarrollo y codificación
+        de herramientas que faciliten a toda la comunidad universitaria y al usuario en general que utilicen el sistema.
+        Somos los encargados del desarrollo de la plataforma SIGU.</p>
+      <p>Somos la unidad encargada del diseño, desarrollo, mantenimiento y soporte del Sistema Integrado de Gestión
+        Universitaria (SIGU).</p>
+    </div>
+    <div class="conozcanos-image">
+      <img src="conozcanos1.jpg" alt="Equipo SIGU">
+    </div>
+  </div>
+  <!-- Sección Propósito -->
+  <div class="proposito-section">
+    <div class="proposito-header">
+      <h2 class="proposito-title">Propósito del equipo</h2>
+    </div>
+    <div class="proposito-text">
+      <p>Trabajamos diariamente para asegurar que la plataforma sea una herramienta accesible, segura y eficiente,
+        facilitando la gestión académica y administrativa en cada una de sus etapas.</p>
+      <p>Un equipo capacitado y en mejora constante, que realmente se involucra en la calidad y seguridad de cada
+        sistema desarrollado. Aportando funciones claves como:</p>
+    </div>
+    <div class="proposito-grid">
+      <div class="proposito-card">
+        <div class="card-header">
+          <span class="card-icon">+</span>
+          <h3>Innovación</h3>
+        </div>
+        <p>El desarrollo de nuevas herramientas y actualizaciones.</p>
+      </div>
+      <div class="proposito-card">
+        <div class="card-header">
+          <span class="card-icon">+</span>
+          <h3>Soporte técnico y acompañamiento</h3>
+        </div>
+        <p>Resolución de problemas técnicos y atención a usuarios.</p>
+      </div>
+      <div class="proposito-card">
+        <div class="card-header">
+          <span class="card-icon">+</span>
+          <h3>Seguridad</h3>
+        </div>
+        <p>Garantizamos la seguridad de la información de cada uno de los usuarios.</p>
+      </div>
+    </div>
+  </div>
+
+  <div class="Liderazgo-container" *ngIf="desarrolladorLider">
+    <div class="Liderazgo-content">
+
+      <div class="Liderazgo-header">
+        <h2 class="Liderazgo-title">Dirección y liderazgo técnico</h2>
+      </div>
+
+      <div class="Liderazgo-body">
+        <div class="Liderazgo-image">
+          <img [src]="desarrolladorLider.FotoURL || 'conozcanos2.png'" [alt]="desarrolladorLider.NombreCompleto">
+        </div>
+
+        <div class="Liderazgo-text">
+          <p class="name">{{ desarrolladorLider.NombreCompleto }}</p>
+          <p class="cargo">Líder del equipo técnico</p>
+          <p>{{desarrolladorLider.Biografia}}</p>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Team work -->
+  <div class="team-section">
+    <div class="team-header">
+      <h2 class="team-title">Equipo de trabajo</h2>
+    </div>
+    <div class="team-text">
+      <p>Nuestro equipo de trabajo y de desarrollo del SIGU es un grupo pequeño pero capacitado que garantiza la
+        evolución, creación y seguridad. A continuación se muestra nuestro equipo.</p>
+    </div>
+
+    <div class="team-grid">
+      <div *ngFor="let desarrollador of datosDesarrolladores; let i = index" class="team-card">
+        <div class="team-card-inner">
+          <div class="team-front">
+            <div class="team-photo">
+              <img [src]="desarrollador.FotoURL || 'Avatar=45.png'"
+                [alt]="desarrollador.NombreCompleto || 'Miembro del equipo'">
+            </div>
+            <h3 class="team-name">{{ desarrollador.NombreCompleto || 'Miembro ' + (i+1) }}</h3>
+            <p class="team-position">Desarrollador</p>
+            <button class="team-btn" (click)="flipCard($event)">
+              Ver más
+            </button>
+          </div>
+          <div class="team-back">
+            <p>{{ desarrollador.Biografia || 'Sin biografía disponible.' }}</p>
+            <button class="team-btn" (click)="flipCard($event)">
+              Volver
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+  </div>
+</div>