Work in Progress
This library is still a work in progress and things will likely change.
---
import site from '@src/site.js';
import util from '@src/util.js';
import Logo from '@components/Logo.astro';
import Flow from '@components/Flow.astro';
import Section from '@components/Section.astro';
---
<Section as="footer" class="py-12" collapse>
<Flow
class="flex flex-col items-center text-center text-sm text-gray-500"
space="lg"
>
<Logo />
<Flow space="sm">
<p>Copyright © {util.currentYear} {site.name}</p>
<nav>
<ul class="flex items-center divide-x" role="list">
<li>
<a class="px-4" href="/privacy-policy">Privacy Policy</a
>
</li>
<li>
<a class="px-4" href="/contact">Contact Us</a>
</li>
</ul>
</nav>
</Flow>
</Flow>
</Section>
---
import site from '@src/site.js';
import util from '@src/util.js';
import Logo from '@components/Logo.astro';
import Flow from '@components/Flow.astro';
import Section from '@components/Section.astro';
---
<Section as="footer" class="bg-gray-800 text-gray-100 py-12" collapse>
<Flow class="flex flex-col items-center text-center text-sm" space="lg">
<Logo variant="light" />
<Flow space="sm">
<p>Copyright © {util.currentYear} {site.name}</p>
<nav>
<ul
class="flex items-center divide-x divide-gray-600"
role="list"
>
<li>
<a
class="no-underline text-white hover:text-yellow-400 px-4"
href="/privacy-policy">Privacy Policy</a
>
</li>
<li>
<a
class="no-underline text-white hover:text-yellow-400 px-4"
href="/contact">Contact Us</a
>
</li>
</ul>
</nav>
</Flow>
</Flow>
</Section>
---
import site from '@src/site.js';
import util from '@src/util.js';
import Logo from '@components/Logo.astro';
import Flow from '@components/Flow.astro';
import Section from '@components/Section.astro';
import SocialLinks from '@components/SocialLinks.astro';
---
<Section as="footer" class="text-xs py-12" collapse>
<div class="grid gap-8 items-start md:grid-cols-2">
<Flow space="md">
<Logo />
<p class="text-gray-600 max-w-lg">
Nullam congue velit eu fringilla fringilla. Etiam nisl eros,
viverra ut nisl sit amet, mattis maximus ante. Vestibulum
ullamcorper ligula quam, eget blandit sapien egestas eget.
</p>
<p class="text-gray-400 pt-4">
Copyright © {util.currentYear}
{site.name}
</p>
<p class="flex items-center gap-3">
<img
src="https://assets.resknow.co.uk/branding/resknow/r-48x48.png"
width="28"
height="28"
alt=""
loading="lazy"
/>
<a href="https://www.resknow.co.uk" rel="nofollow"
>Web Design by Resknow</a
>
</p>
</Flow>
<SocialLinks variant="circle" class="md:justify-end" />
</div>
</Section>
---
import site from '@src/site.js';
import util from '@src/util.js';
import Logo from '@components/Logo.astro';
import Flow from '@components/Flow.astro';
import Section from '@components/Section.astro';
import SocialLinks from '@components/SocialLinks.astro';
---
<Section as="footer" class="bg-gray-800 text-gray-100 text-xs py-12" collapse>
<div class="grid gap-8 items-start md:grid-cols-2">
<Flow space="md">
<Logo variant="light" />
<p class="text-gray-300 max-w-lg">
Nullam congue velit eu fringilla fringilla. Etiam nisl eros,
viverra ut nisl sit amet, mattis maximus ante. Vestibulum
ullamcorper ligula quam, eget blandit sapien egestas eget.
</p>
<p class="text-gray-400 pt-4">
Copyright © {util.currentYear}
{site.name}
</p>
<p class="flex items-center gap-3">
<img
src="https://assets.resknow.co.uk/branding/resknow/r-48x48.png"
width="28"
height="28"
alt=""
loading="lazy"
/>
<a
class="text-white hover:text-yellow-500"
href="https://www.resknow.co.uk"
rel="nofollow">Web Design by Resknow</a
>
</p>
</Flow>
<SocialLinks variant="circle" class="md:justify-end" />
</div>
</Section>
---
import site from '@src/site.js';
import util from '@src/util.js';
import Logo from '@components/Logo.astro';
import Flow from '@components/Flow.astro';
import Section from '@components/Section.astro';
import SocialLinks from '@components/SocialLinks.astro';
import Icon from '@components/Icon.astro';
---
<Section as="footer" class="text-xs py-12" collapse>
<div class="grid gap-8 lg:grid-cols-2 lg:gap-32">
<Flow>
<Logo />
<p class="max-w-lg">
Nullam congue velit eu fringilla fringilla. Etiam nisl eros,
viverra ut nisl sit amet, mattis maximus ante.
</p>
<p><a href="/privacy-policy">Privacy Policy</a></p>
</Flow>
<div class="grid gap-8 sm:grid-cols-2">
<Flow>
<h3>Our Services</h3>
<nav>
<Flow as="ul" space="sm">
<li><a href="#">Plumbing</a></li>
<li><a href="#">Central Heating</a></li>
<li><a href="#">Drainage</a></li>
<li><a href="#">Leak Detection</a></li>
<li><a href="#">Bathrooms</a></li>
<li><a href="#">Gas Safety</a></li>
</Flow>
</nav>
</Flow>
<Flow>
<h3>Contact Us</h3>
<Flow as="ul" space="sm">
<li class="flex gap-3">
<Icon
name="phone"
class="flex-shrink-0 w-5 h-5 fill-current"
/>
<a class="font-bold" href={`tel:${site.phone}`}
>{site.phone}</a
>
</li>
<li class="flex gap-3">
<Icon
name="at"
class="flex-shrink-0 w-5 h-5 fill-current"
/>
<a href={`mailto:${site.email}`}>{site.email}</a>
</li>
<li class="flex gap-3">
<Icon
name="map-marker"
class="flex-shrink-0 w-5 h-5 fill-current"
/>
<p>{site.address}</p>
</li>
</Flow>
<SocialLinks
only={['facebook', 'twitter', 'instagram']}
variant="round"
class="pt-4"
/>
</Flow>
</div>
</div>
</Section>
---
import site from '@src/site.js';
import util from '@src/util.js';
import Logo from '@components/Logo.astro';
import Flow from '@components/Flow.astro';
import Section from '@components/Section.astro';
import SocialLinks from '@components/SocialLinks.astro';
import Icon from '@components/Icon.astro';
---
<Section as="footer" class="bg-gray-800 text-gray-100 text-xs py-12" collapse>
<div class="grid gap-8 lg:grid-cols-2 lg:gap-32">
<Flow>
<Logo variant="light" />
<p class="text-gray-300 max-w-lg">
Nullam congue velit eu fringilla fringilla. Etiam nisl eros,
viverra ut nisl sit amet, mattis maximus ante.
</p>
<p>
<a
class="text-yellow-500 hover:text-white"
href="/privacy-policy">Privacy Policy</a
>
</p>
</Flow>
<div class="grid gap-8 sm:grid-cols-2">
<Flow>
<h3>Our Services</h3>
<nav>
<Flow as="ul" space="sm">
<li>
<a class="text-yellow-500 hover:text-white" href="#"
>Plumbing</a
>
</li>
<li>
<a class="text-yellow-500 hover:text-white" href="#"
>Central Heating</a
>
</li>
<li>
<a class="text-yellow-500 hover:text-white" href="#"
>Drainage</a
>
</li>
<li>
<a class="text-yellow-500 hover:text-white" href="#"
>Leak Detection</a
>
</li>
<li>
<a class="text-yellow-500 hover:text-white" href="#"
>Bathrooms</a
>
</li>
<li>
<a class="text-yellow-500 hover:text-white" href="#"
>Gas Safety</a
>
</li>
</Flow>
</nav>
</Flow>
<Flow>
<h3>Contact Us</h3>
<Flow as="ul" space="sm">
<li class="flex gap-3">
<Icon
name="phone"
class="flex-shrink-0 w-5 h-5 fill-current"
/>
<a
class="text-gray-200 hover:text-white font-bold"
href={`tel:${site.phone}`}>{site.phone}</a
>
</li>
<li class="flex gap-3">
<Icon
name="at"
class="flex-shrink-0 w-5 h-5 fill-current"
/>
<a
class="text-gray-200 hover:text-white"
href={`mailto:${site.email}`}>{site.email}</a
>
</li>
<li class="flex gap-3">
<Icon
name="map-marker"
class="flex-shrink-0 w-5 h-5 fill-current"
/>
<p class="text-gray-200">{site.address}</p>
</li>
</Flow>
<SocialLinks
only={['facebook', 'twitter', 'instagram']}
variant="round"
class="pt-4"
/>
</Flow>
</div>
</div>
</Section>
---
import site from '@src/site.js';
import util from '@src/util.js';
import Container from '@components/Container.astro';
import Flow from '@components/Flow.astro';
import SocialLinks from '@components/SocialLinks.astro';
import Icon from '@components/Icon.astro';
---
<footer class="text-xs">
<div class="grid md:grid-cols-2">
<div class="h-80 md:h-full">
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2487.8098997190855!2d0.10292561228451809!3d51.42491861660774!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47d8ac1b4d9ddcb7%3A0xc03a536b4d7958f3!2sResknow!5e0!3m2!1sen!2suk!4v1691148951256!5m2!1sen!2suk"
width="600"
height="450"
style="border:0;"
allowfullscreen=""
loading="lazy"
referrerpolicy="no-referrer-when-downgrade"
class="w-full h-full"></iframe>
</div>
<div class="bg-teal-300 text-slate-800 p-16 lg:py-24">
<Flow class="max-w-lg">
<h2 class="text-4xl font-extrabold">Get in touch</h2>
<p>
Nullam congue velit eu fringilla fringilla. Etiam nisl eros,
viverra ut nisl sit amet, mattis maximus ante. Vestibulum
ullamcorper ligula quam, eget blandit sapien egestas eget.
</p>
<Flow as="ul" space="sm" class="py-4">
<li class="flex gap-3">
<Icon
name="map-marker"
class="flex-shrink-0 w-5 h-5 fill-current"
/>
<p>{site.address}</p>
</li>
<li class="flex gap-3">
<Icon
name="phone"
class="flex-shrink-0 w-5 h-5 fill-current"
/>
<a
class="text-gray-900 font-bold"
href={`tel:${site.phone}`}>{site.phone}</a
>
</li>
<li class="flex gap-3">
<Icon
name="at"
class="flex-shrink-0 w-5 h-5 fill-current"
/>
<a class="text-gray-900" href={`mailto:${site.email}`}
>{site.email}</a
>
</li>
</Flow>
<Flow space="sm">
<h2 class="text-lg">Or follow us on</h2>
<SocialLinks
variant="round"
only={['facebook', 'linkedin']}
/>
</Flow>
</Flow>
</div>
</div>
<div class="bg-gray-800 text-gray-200 py-6">
<Container class="grid gap-3 md:grid-cols-3 md:items-center">
<p>
<a
class="text-gray-200 hover:text-teal-300"
href="/privacy-policy">Privacy Policy</a
>
</p>
<p class="md:text-center">
© {util.currentYear}
{site.name}, all rights reserved.
</p>
<p class="flex items-center gap-3 md:justify-end">
<img
class="md:order-2"
src="https://assets.resknow.co.uk/branding/resknow/r-48x48.png"
width="28"
height="28"
alt=""
loading="lazy"
/>
<a
class="text-gray-200 hover:text-teal-300"
href="https://www.resknow.co.uk"
rel="nofollow">Web Design by Resknow</a
>
</p>
</Container>
</div>
</footer>
We use cookies to provide the best experience.