ourworld_web/www_circl
20
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add footer

Browse Source
This commit is contained in:
sasha-astiadi 2025-05-07 15:57:37 +02:00
parent 97937cf324
commit d0af1da776
2 changed files with 135 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

92
src/index.html
View File

@ -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');

48
src/output.css
View File

@ -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;
}