From d0af1da776848bcdd1c88a484fb46e09e890182a Mon Sep 17 00:00:00 2001
From: sasha-astiadi <sasha@incubaid.com>
Date: Wed, 7 May 2025 15:57:37 +0200
Subject: [PATCH] add footer

---
 src/index.html | 92 +++++++++++++++++++++++++++++++++++++++++++++++---
 src/output.css | 48 ++++++++++++++++++++++++++
 2 files changed, 135 insertions(+), 5 deletions(-)

diff --git a/src/index.html b/src/index.html
index 78472f0..5673784 100644
--- a/src/index.html
+++ b/src/index.html
@@ -410,11 +410,93 @@
         </div>
         </main>
 
-        <div class="container mx-auto px-4">
-            <footer class="mt-12 text-center text-gray-400">
-            <p class="fade-up">&copy; 2025 Circl. All rights reserved.</p>
-            </footer>
-        </div>
+
+         <!-- footer -->
+         <footer class="bg-black/50 backdrop-blur-sm border-t border-white/10">
+          <div class="mx-auto max-w-7xl px-6 py-12 sm:py-16 lg:px-8 lg:py-20">
+            <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-8">
+              <!-- Logo Column -->
+              <div class="flex flex-col items-center md:items-start">
+                <img src="/assets/logos/logo_lightmode2.svg" alt="Logo" class="h-8 w-auto mb-6">
+                <p class="text-sm leading-5 text-gray-400 text-center md:text-left">&copy; 2025 Circl. All rights reserved.</p>
+              </div>
+              
+              <!-- Solutions Column -->
+              <div>
+                <h3 class="text-sm/6 font-semibold text-white">Solutions</h3>
+                <ul role="list" class="mt-6 space-y-4">
+                  <li>
+                    <a href="#" class="text-sm/6 text-gray-400 hover:text-white">Marketing</a>
+                  </li>
+                  <li>
+                    <a href="#" class="text-sm/6 text-gray-400 hover:text-white">Analytics</a>
+                  </li>
+                  <li>
+                    <a href="#" class="text-sm/6 text-gray-400 hover:text-white">Automation</a>
+                  </li>
+                  <li>
+                    <a href="#" class="text-sm/6 text-gray-400 hover:text-white">Commerce</a>
+                  </li>
+                  <li>
+                    <a href="#" class="text-sm/6 text-gray-400 hover:text-white">Insights</a>
+                  </li>
+                </ul>
+              </div>
+
+              <!-- Support Column -->
+              <div>
+                <h3 class="text-sm/6 font-semibold text-white">Support</h3>
+                <ul role="list" class="mt-6 space-y-4">
+                  <li>
+                    <a href="#" class="text-sm/6 text-gray-400 hover:text-white">Submit ticket</a>
+                  </li>
+                  <li>
+                    <a href="#" class="text-sm/6 text-gray-400 hover:text-white">Documentation</a>
+                  </li>
+                  <li>
+                    <a href="#" class="text-sm/6 text-gray-400 hover:text-white">Guides</a>
+                  </li>
+                </ul>
+              </div>
+
+              <!-- Company Column -->
+              <div>
+                <h3 class="text-sm/6 font-semibold text-white">Company</h3>
+                <ul role="list" class="mt-6 space-y-4">
+                  <li>
+                    <a href="#" class="text-sm/6 text-gray-400 hover:text-white">About</a>
+                  </li>
+                  <li>
+                    <a href="#" class="text-sm/6 text-gray-400 hover:text-white">Blog</a>
+                  </li>
+                  <li>
+                    <a href="#" class="text-sm/6 text-gray-400 hover:text-white">Jobs</a>
+                  </li>
+                  <li>
+                    <a href="#" class="text-sm/6 text-gray-400 hover:text-white">Press</a>
+                  </li>
+                </ul>
+              </div>
+
+              <!-- Legal Column -->
+              <div>
+                <h3 class="text-sm/6 font-semibold text-white">Legal</h3>
+                <ul role="list" class="mt-6 space-y-4">
+                  <li>
+                    <a href="#" class="text-sm/6 text-gray-400 hover:text-white">Terms of service</a>
+                  </li>
+                  <li>
+                    <a href="#" class="text-sm/6 text-gray-400 hover:text-white">Privacy policy</a>
+                  </li>
+                  <li>
+                    <a href="#" class="text-sm/6 text-gray-400 hover:text-white">License</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </footer>
+        
     <script>
         // Pricing toggle functionality
         const billingToggle = document.getElementById('billing-toggle');
diff --git a/src/output.css b/src/output.css
index 5941953..4fc6aa6 100644
--- a/src/output.css
+++ b/src/output.css
@@ -1251,11 +1251,23 @@ body:is(.dark *) {
   border-radius: 0.375rem;
 }
 
+.border-t {
+  border-top-width: 1px;
+}
+
+.border-white\/10 {
+  border-color: rgb(255 255 255 / 0.1);
+}
+
 .bg-black {
   --tw-bg-opacity: 1;
   background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
 }
 
+.bg-black\/50 {
+  background-color: rgb(0 0 0 / 0.5);
+}
+
 .bg-gray-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(107 114 128 / var(--tw-bg-opacity, 1));
@@ -1445,6 +1457,10 @@ body:is(.dark *) {
   font-weight: 600;
 }
 
+.leading-5 {
+  line-height: 1.25rem;
+}
+
 .tracking-tight {
   letter-spacing: -0.025em;
 }
@@ -1509,6 +1525,12 @@ body:is(.dark *) {
   --tw-ring-color: rgb(255 255 255 / 0.1);
 }
 
+.backdrop-blur-sm {
+  --tw-backdrop-blur: blur(4px);
+  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+}
+
 .transition-colors {
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -1766,6 +1788,11 @@ body:is(.dark *) {
 }
 
 @media (min-width: 640px) {
+  .sm\:py-16 {
+    padding-top: 4rem;
+    padding-bottom: 4rem;
+  }
+
   .sm\:py-32 {
     padding-top: 8rem;
     padding-bottom: 8rem;
@@ -1793,6 +1820,18 @@ body:is(.dark *) {
   .md\:grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
+
+  .md\:grid-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  .md\:items-start {
+    align-items: flex-start;
+  }
+
+  .md\:text-left {
+    text-align: left;
+  }
 }
 
 @media (min-width: 1024px) {
@@ -1817,11 +1856,20 @@ body:is(.dark *) {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
 
+  .lg\:grid-cols-5 {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+  }
+
   .lg\:px-8 {
     padding-left: 2rem;
     padding-right: 2rem;
   }
 
+  .lg\:py-20 {
+    padding-top: 5rem;
+    padding-bottom: 5rem;
+  }
+
   .lg\:pt-12 {
     padding-top: 3rem;
   }