Skip to content

Commit

Permalink
Merge pull request #19 from SethSharp/sharpie/dev-633-improve-footer-ux
Browse files Browse the repository at this point in the history 
Improved Footer design
  • Loading branch information
@SethSharp
SethSharp authored Dec 1, 2024
2 parents 9608847 + f2187f8 commit 0f657a0
Show file tree
Hide file tree
Showing 2 changed files with 139 additions and 100 deletions.
2 changes: 1 addition & 1 deletion config/framed.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@
|
*/

'copyright' => '© 1997-2024 Framed Just For You. All rights reserved.',
'copyright' => '© 1997-2024 All rights reserved.',

/*
|--------------------------------------------------------------------------
Expand Down
237 changes: 138 additions & 99 deletions resources/views/components/layouts/footer.blade.php
View file
Original file line number Diff line number Diff line change
@@ -1,109 +1,148 @@
<footer class="bg-primary-700">
<div class="lg:flex w-full">
<div class="w-1/2 lg:w-1/5 mx-6 mt-8">
<div class="pt-8 lg:pt-0">
<a href="{{route('home')}}">
<x-app-logo class="w-1/4 sm:w-1/2 lg:w-full"/>
</a>
</div>
</div>

<div class="w-full lg:w-3/5">
<div class="grid grid-cols-3 p-4">
<div>
<h6 class="text-lg text-white font-medium"> Pages </h6>
<footer class="bg-primary-800">
<div class="container mx-auto p-0 md:p-8 xl:px-0">
<div class="mx-auto max-w-7xl px-6 pb-10 pt-16">
<div class="xl:grid xl:grid-cols-3 xl:gap-8">
<div class="space-y-4">
<div>
<x-links.footer-nav href="{{route('home')}}">
Home
</x-links.footer-nav>

<x-links.footer-nav href="{{route('about')}}">
About
</x-links.footer-nav>

<x-links.footer-nav href="{{route('custom-framing')}}">
Framing
</x-links.footer-nav>

<x-links.footer-nav href="{{route('printing')}}">
Printing
</x-links.footer-nav>

<x-links.footer-nav href="{{route('contact')}}">
Contact
</x-links.footer-nav>
<a href="/">
<div class="flex items-center space-x-2 text-2xl font-medium">
<span>
<img src="{{ asset('images/christmas-logo.png') }}"
alt="FramedJustForYou logo"
aria-label="Application logo"
width="72" height="72" class="w-64">
</span>
</div>

</a>
</div>
<div class="max-w-md pr-16 text-md text-gray-200">
You goto for Custom Framing on the Gold Coast.
</div>
<div class="flex space-x-2">
<a href="" target="_blank" class="text-gray-200 hover:text-gray-200">
<span class="sr-only">Instagram</span>
<x-icons.socials.instagram/>
</a>
<a href="" target="_blank" class="text-gray-200 hover:text-gray-200">
<span class="sr-only">Facebook</span>
<x-icons.socials.facebook/>
</a>
</div>
</div>

<div>
<h6 class="text-lg text-white font-medium"> Services </h6>
<div>
<x-links.footer-nav href="{{route('services.framing.acrylic')}}">
Acrylic
</x-links.footer-nav>

<x-links.footer-nav href="{{route('services.framing.canvas')}}">
Canvas
</x-links.footer-nav>

<x-links.footer-nav href="{{route('services.framing.indigenous')}}">
Indigenous Art
</x-links.footer-nav>

<x-links.footer-nav href="{{route('services.framing.jigsaw')}}">
Jigsaws
</x-links.footer-nav>
<div class="mt-16 grid grid-cols-2 gap-8 xl:col-span-2 xl:mt-0">
<div class="md:grid md:grid-cols-2 md:gap-8">
<div>
<h3 class="text-md font-semibold leading-6 text-white">What we offer</h3>
<ul role="list" class="mt-6 space-y-4">
<li>
<a href="{{route('custom-framing')}}"
class="text-md leading-6 text-gray-300 hover:text-gray-50">
Custom Framing
</a>
</li>
<li>
<a href="{{route('printing')}}"
class="text-md leading-6 text-gray-300 hover:text-gray-50">
Printing
</a>
</li>
</ul>
</div>
<div class="mt-10 md:mt-0">
<h3 class="text-md font-semibold leading-6 text-white">Our Services</h3>
<ul role="list" class="mt-6 space-y-4">
<li>
<a href="{{route('services.framing.acrylic')}}"
class="text-md leading-6 text-gray-300 hover:text-gray-50">
Acrylic
</a>
</li>
<li>
<a href="{{route('services.framing.canvas')}}"
class="text-md leading-6 text-gray-300 hover:text-gray-50">
Canvas
</a>
</li>
<li>
<a href="{{route('services.framing.indigenous')}}"
class="text-md leading-6 text-gray-300 hover:text-gray-50">
Indigenous Art
</a>
</li>
<li>
<a href="{{route('services.framing.jigsaw')}}"
class="text-md leading-6 text-gray-300 hover:text-gray-50">
Jigsaws
</a>
</li>
<li>
<a href="{{route('services.framing.medals-memorabilia')}}"
class="text-md leading-6 text-gray-300 hover:text-gray-50">
Medals & Memorabilia
</a>
</li>
</ul>
</div>
</div>
<div class="md:grid md:grid-cols-2 md:gap-8">
<div>
<ul role="list" class="mt-12 space-y-4">
<li>
<a href="{{route('services.framing.mirror')}}"
class="text-md leading-6 text-gray-300 hover:text-gray-50">
Mirror
</a>
</li>
<li>
<a href="{{route('services.framing.prints-posters')}}"
class="text-md leading-6 text-gray-300 hover:text-gray-50">
Prints Posters & Photos
</a>
</li>
<li>
<a href="{{route('services.framing.handcrafted')}}"
class="text-md leading-6 text-gray-300 hover:text-gray-50">
Handcrafted Artwork
</a>
</li>
<li>
<a href="{{route('services.framing.restorations')}}"
class="text-md leading-6 text-gray-300 hover:text-gray-50">
Restorations
</a>
</li>
</ul>
</div>
<div class="mt-10 md:mt-0">
<h3 class="text-md font-semibold leading-6 text-white">The Company</h3>
<ul role="list" class="mt-6 space-y-4">
<li>
<a href="{{route('about')}}"
class="text-md leading-6 text-gray-300 hover:text-gray-50">
About us
</a>
</li>
<li>
<a href="{{route('contact')}}"
class="text-md leading-6 text-gray-300 hover:text-gray-50">
Contact us
</a>
</li>
</ul>
</div>
</div>
</div>

<div>
<x-links.footer-nav href="{{route('services.framing.medals-memorabilia')}}">
Medals & Memorabilia
</x-links.footer-nav>

<x-links.footer-nav href="{{route('services.framing.mirror')}}">
Mirror
</x-links.footer-nav>

<x-links.footer-nav href="{{route('services.framing.prints-posters')}}">
Prints, Posters & Photos
</x-links.footer-nav>

<x-links.footer-nav href="{{route('services.framing.handcrafted')}}">
Hand Crafted Artwork
</x-links.footer-nav>

<x-links.footer-nav href="{{route('services.framing.restorations')}}">
Restorations
</x-links.footer-nav>
</div>
<div class="mt-16 border-t border-gray-400/30 pt-8 sm:mt-20 lg:mt-24">
<div class="text-md text-center text-white">
{!! config('framed.copyright') !!}
<span class="text-gray-50">♥</span> by Framing enthusiasts at
<a rel="noopener" href="/">
Framed Just For You.
</a>
</div>
</div>
</div>
</div>

<div class="border-t border-gray-100 flex justify-between px-4 py-4">
<div class="text-sm flex text-gray-200 gap-x-6 my-auto">
{!! config('framed.copyright') !!}
</div>

<div class="flex space-x-4">
<a
href="https://www.facebook.com/framedjustforyou/"
aria-label="Framed Just For You Facebook"
class="text-white cursor-pointer"
>
<span class="sr-only"> Facebook </span>
<x-icons.socials.facebook/>
</a>

<a
href="https://www.instagram.com/framedjust4u/"
aria-label="Framed Just For You Instagram"
class="text-white cursor-pointer"
>
<span class="sr-only"> Instagram </span>
<x-icons.socials.instagram/>
</a>
</div>
</div>
</footer>

0 comments on commit 0f657a0

Please sign in to comment.