add footer
This commit is contained in:
parent
97937cf324
commit
d0af1da776
@ -410,11 +410,93 @@
|
|||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<div class="container mx-auto px-4">
|
|
||||||
<footer class="mt-12 text-center text-gray-400">
|
<!-- footer -->
|
||||||
<p class="fade-up">© 2025 Circl. All rights reserved.</p>
|
<footer class="bg-black/50 backdrop-blur-sm border-t border-white/10">
|
||||||
</footer>
|
<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">© 2025 Circl. All rights reserved.</p>
|
||||||
</div>
|
</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>
|
<script>
|
||||||
// Pricing toggle functionality
|
// Pricing toggle functionality
|
||||||
const billingToggle = document.getElementById('billing-toggle');
|
const billingToggle = document.getElementById('billing-toggle');
|
||||||
|
|||||||
@ -1251,11 +1251,23 @@ body:is(.dark *) {
|
|||||||
border-radius: 0.375rem;
|
border-radius: 0.375rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.border-t {
|
||||||
|
border-top-width: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.border-white\/10 {
|
||||||
|
border-color: rgb(255 255 255 / 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
.bg-black {
|
.bg-black {
|
||||||
--tw-bg-opacity: 1;
|
--tw-bg-opacity: 1;
|
||||||
background-color: rgb(0 0 0 / var(--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 {
|
.bg-gray-500 {
|
||||||
--tw-bg-opacity: 1;
|
--tw-bg-opacity: 1;
|
||||||
background-color: rgb(107 114 128 / var(--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;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.leading-5 {
|
||||||
|
line-height: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
.tracking-tight {
|
.tracking-tight {
|
||||||
letter-spacing: -0.025em;
|
letter-spacing: -0.025em;
|
||||||
}
|
}
|
||||||
@ -1509,6 +1525,12 @@ body:is(.dark *) {
|
|||||||
--tw-ring-color: rgb(255 255 255 / 0.1);
|
--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-colors {
|
||||||
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
|
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
|
||||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
@ -1766,6 +1788,11 @@ body:is(.dark *) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 640px) {
|
@media (min-width: 640px) {
|
||||||
|
.sm\:py-16 {
|
||||||
|
padding-top: 4rem;
|
||||||
|
padding-bottom: 4rem;
|
||||||
|
}
|
||||||
|
|
||||||
.sm\:py-32 {
|
.sm\:py-32 {
|
||||||
padding-top: 8rem;
|
padding-top: 8rem;
|
||||||
padding-bottom: 8rem;
|
padding-bottom: 8rem;
|
||||||
@ -1793,6 +1820,18 @@ body:is(.dark *) {
|
|||||||
.md\:grid-cols-2 {
|
.md\:grid-cols-2 {
|
||||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
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) {
|
@media (min-width: 1024px) {
|
||||||
@ -1817,11 +1856,20 @@ body:is(.dark *) {
|
|||||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.lg\:grid-cols-5 {
|
||||||
|
grid-template-columns: repeat(5, minmax(0, 1fr));
|
||||||
|
}
|
||||||
|
|
||||||
.lg\:px-8 {
|
.lg\:px-8 {
|
||||||
padding-left: 2rem;
|
padding-left: 2rem;
|
||||||
padding-right: 2rem;
|
padding-right: 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.lg\:py-20 {
|
||||||
|
padding-top: 5rem;
|
||||||
|
padding-bottom: 5rem;
|
||||||
|
}
|
||||||
|
|
||||||
.lg\:pt-12 {
|
.lg\:pt-12 {
|
||||||
padding-top: 3rem;
|
padding-top: 3rem;
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user