lovero

src/app/components/footer/footer.component.scss

@@ -3,6 +3,149 @@
   width: 100%;
 }
 
+// ========== LAVERO FOOTER STYLES ==========
+.lavero-footer {
+  background: linear-gradient(135deg, #1a1208 0%, #2d1a00 100%);
+  color: white;
+  margin-top: auto;
+  padding: 3rem 0 0;
+  border-top: 3px solid var(--primary-color, #FD7300);
+}
+
+.lavero-footer-container {
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 0 2rem;
+}
+
+.lavero-footer-top {
+  display: grid;
+  grid-template-columns: 2fr 1fr 1fr 1fr;
+  gap: 3rem;
+  padding-bottom: 3rem;
+  border-bottom: 1px solid rgba(253, 115, 0, 0.2);
+}
+
+.lavero-footer-brand {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.lavero-footer-logo {
+  width: 140px;
+  height: 48px;
+  
+  app-logo {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.lavero-footer-col {
+  h4 {
+    font-size: 1.1rem;
+    font-weight: 600;
+    margin-bottom: 1.25rem;
+    color: var(--primary-color, #FD7300);
+  }
+
+  .lavero-footer-desc {
+    color: rgba(255, 255, 255, 0.65);
+    line-height: 1.6;
+    font-size: 0.9rem;
+  }
+}
+
+.lavero-footer-links {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+
+  li {
+    margin-bottom: 0.75rem;
+
+    a {
+      color: rgba(255, 255, 255, 0.7);
+      text-decoration: none;
+      font-size: 0.9rem;
+      transition: color 0.2s, transform 0.2s;
+      display: inline-block;
+
+      &:hover {
+        color: var(--primary-color, #FD7300);
+        transform: translateX(4px);
+      }
+    }
+  }
+}
+
+.lavero-footer-bottom {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1.5rem 0;
+}
+
+.lavero-copyright {
+  p {
+    color: rgba(255, 255, 255, 0.5);
+    font-size: 0.85rem;
+    margin: 0;
+  }
+}
+
+.lavero-payment-icons {
+  display: flex;
+  gap: 0.75rem;
+  align-items: center;
+
+  img {
+    height: 26px;
+    width: auto;
+    background: white;
+    padding: 0.25rem 0.5rem;
+    border-radius: 5px;
+    opacity: 0.85;
+    transition: opacity 0.2s;
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+}
+
+@media (max-width: 968px) {
+  .lavero-footer-top {
+    grid-template-columns: 1fr 1fr;
+    gap: 2rem;
+  }
+}
+
+@media (max-width: 600px) {
+  .lavero-footer {
+    padding: 2rem 0 0;
+  }
+
+  .lavero-footer-container {
+    padding: 0 1rem;
+  }
+
+  .lavero-footer-top {
+    grid-template-columns: 1fr;
+    gap: 1.5rem;
+    padding-bottom: 1.5rem;
+  }
+
+  .lavero-footer-bottom {
+    flex-direction: column;
+    gap: 1rem;
+    padding: 1rem 0;
+    text-align: center;
+  }
+}
+
 .footer {
   background-color: #1a1a1a;
   color: #ffffff;