customizable footer implementation

This commit is contained in:
timurgordon
2022-02-22 14:49:27 +03:00
parent 97afd6c252
commit d0e6e8101d
6 changed files with 177 additions and 121 deletions

View File

@@ -3,18 +3,18 @@
Read the documentation to get started: https://tailwindui.com/documentation
-->
{%- set section = get_section(path="header/_index.md") %}
{%- set section = get_section(path="footer/_index.md") %}
{%- set logoPath = section.extra.logoPath %}
<html>
<head /><body>
<footer class="bg-white">
<div class="max-w-screen-xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8">
<div class="xl:grid xl:grid-cols-3 xl:gap-8">
<div class="xl:flex xl:gap-4">
<div class="space-y-8 xl:col-span-1">
<img class="h-6" src="{{logoPath}}" alt="Company name" />
<p class="text-gray-500 text-base leading-6">
Making the world a better place through constructing elegant hierarchies.
<p class="text-gray-500 text-base leading-6 ">
{{section.description}}
</p>
<div class="flex space-x-6">
<a href="#" class="text-gray-400 hover:text-gray-500">
@@ -49,119 +49,9 @@
</a>
</div>
</div>
<div class="mt-12 grid grid-cols-2 gap-8 xl:mt-0 xl:col-span-2">
<div class="md:grid md:grid-cols-2 md:gap-8">
<div>
<h4 class="text-sm leading-5 font-semibold text-gray-400 tracking-wider uppercase">
Solutions
</h4>
<ul class="mt-4 space-y-4">
<li>
<a href="#" class="text-base leading-6 text-gray-500 hover:text-gray-900">
Marketing
</a>
</li>
<li>
<a href="#" class="text-base leading-6 text-gray-500 hover:text-gray-900">
Analytics
</a>
</li>
<li>
<a href="#" class="text-base leading-6 text-gray-500 hover:text-gray-900">
Commerce
</a>
</li>
<li>
<a href="#" class="text-base leading-6 text-gray-500 hover:text-gray-900">
Insights
</a>
</li>
</ul>
</div>
<div class="mt-12 md:mt-0">
<h4 class="text-sm leading-5 font-semibold text-gray-400 tracking-wider uppercase">
Support
</h4>
<ul class="mt-4 space-y-4">
<li>
<a href="#" class="text-base leading-6 text-gray-500 hover:text-gray-900">
Pricing
</a>
</li>
<li>
<a href="#" class="text-base leading-6 text-gray-500 hover:text-gray-900">
Documentation
</a>
</li>
<li>
<a href="#" class="text-base leading-6 text-gray-500 hover:text-gray-900">
Guides
</a>
</li>
<li>
<a href="#" class="text-base leading-6 text-gray-500 hover:text-gray-900">
API Status
</a>
</li>
</ul>
</div>
</div>
<div class="md:grid md:grid-cols-2 md:gap-8">
<div>
<h4 class="text-sm leading-5 font-semibold text-gray-400 tracking-wider uppercase">
Company
</h4>
<ul class="mt-4 space-y-4">
<li>
<a href="#" class="text-base leading-6 text-gray-500 hover:text-gray-900">
About
</a>
</li>
<li>
<a href="#" class="text-base leading-6 text-gray-500 hover:text-gray-900">
Blog
</a>
</li>
<li>
<a href="#" class="text-base leading-6 text-gray-500 hover:text-gray-900">
Jobs
</a>
</li>
<li>
<a href="#" class="text-base leading-6 text-gray-500 hover:text-gray-900">
Press
</a>
</li>
<li>
<a href="#" class="text-base leading-6 text-gray-500 hover:text-gray-900">
Partners
</a>
</li>
</ul>
</div>
<div class="mt-12 md:mt-0">
<h4 class="text-sm leading-5 font-semibold text-gray-400 tracking-wider uppercase">
Legal
</h4>
<ul class="mt-4 space-y-4">
<li>
<a href="#" class="text-base leading-6 text-gray-500 hover:text-gray-900">
Claim
</a>
</li>
<li>
<a href="#" class="text-base leading-6 text-gray-500 hover:text-gray-900">
Privacy
</a>
</li>
<li>
<a href="#" class="text-base leading-6 text-gray-500 hover:text-gray-900">
Terms
</a>
</li>
</ul>
</div>
</div>
{{ section.content | safe }}
</div>
</div>
<div class="mt-12 border-t border-gray-200 pt-8">