support/khy_website
1
0
Fork 0
mirror of https://git.kh3group.com/georgebiri/khy_website.git synced 2026-07-02 07:03:33 +00:00
Code Issues Projects Releases Packages Wiki Activity

refactor: update footer layout across multiple pages to improve consistency and reduce spacing, while enhancing link accessibility
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse source
This commit is contained in:
George Birikorang 2025-09-15 05:11:07 -07:00
parent 74e27ebd36
commit 4baf19983a
6 changed files with 164 additions and 242 deletions
Download patch file Download diff file Expand all files Collapse all files

78
contact.html
View file

@ -613,7 +613,7 @@
<footer class="bg-white">
<!-- Main Footer Content -->
<div class="max-w-7xl mx-auto px-5 py-16">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<!-- Company Information -->
<div class="space-y-2">
<!-- Logo -->
@ -664,82 +664,64 @@
</div>
<!-- Quick Links -->
<div class="space-y-6">
<div class="space-y-4 md:ml-6 lg:ml-8">
<h3
class="font-playfair font-normal text-md leading-relaxed tracking-wider text-eerie-black uppercase"
class="font-playfair font-normal text-sm leading-snug tracking-widest text-eerie-black uppercase"
>
Quick Links
</h3>
<div class="space-y-4">
<a
href="#"
class="block font-playfair font-normal text-base leading-relaxed tracking-wider text-gray-800 hover:text-black transition-colors"
href="index.html"
class="block font-playfair font-normal text-base leading-relaxed tracking-wider text-gray-900 hover:text-black transition-colors"
>
Home
</a>
<a
href="#"
class="block font-playfair font-normal text-base leading-relaxed tracking-wider text-gray-800 hover:text-black transition-colors"
href="product-catalog.html"
class="block font-playfair font-normal text-base leading-relaxed tracking-wider text-gray-900 hover:text-black transition-colors"
>
Products
</a>
<a
href="#"
class="block font-playfair font-normal text-base leading-relaxed tracking-wider text-gray-800 hover:text-black transition-colors"
href="#about"
class="block font-playfair font-normal text-base leading-relaxed tracking-wider text-gray-900 hover:text-black transition-colors"
>
About
</a>
</div>
</div>
<!-- Help -->
<div class="space-y-6">
<h3
class="font-playfair font-normal text-md leading-relaxed tracking-wider text-eerie-black uppercase"
>
Help
</h3>
<div class="space-y-4">
<a
href="#"
class="block font-playfair font-normal text-base leading-relaxed tracking-wider text-gray-800 hover:text-black transition-colors"
href="contact.html"
class="block font-playfair font-normal text-base leading-relaxed tracking-wider text-gray-900 hover:text-black transition-colors"
>
Contact Us
</a>
<a
href="#"
class="block font-playfair font-normal text-base leading-relaxed tracking-wider text-gray-800 hover:text-black transition-colors"
>
Privacy Policies
</a>
<a
href="#"
class="block font-playfair font-normal text-base leading-relaxed tracking-wider text-gray-800 hover:text-black transition-colors"
>
Terms and Conditions
</a>
</div>
</div>
<!-- Newsletter -->
<div class="space-y-6">
<!-- Company / Hours / Social -->
<div class="space-y-4">
<h3
class="font-playfair font-normal text-md leading-relaxed tracking-wider text-eerie-black uppercase"
class="font-playfair font-normal text-sm leading-snug tracking-widest text-eerie-black uppercase"
>
Newsletter
Company
</h3>
<div class="space-y-4">
<div class="flex items-center space-x-4">
<input
type="email"
placeholder="Enter Your Email Address"
class="flex-1 font-playfair font-normal text-sm leading-relaxed tracking-wider text-taupe-gray bg-transparent border-b border-black focus:outline-none focus:border-black"
/>
<button
class="font-playfair font-normal text-sm leading-relaxed tracking-wider text-gray-800 border-b border-black hover:text-black transition-colors"
<p
class="font-playfair font-normal text-base leading-relaxed text-gray-900"
>
Mon–Fri: 9AM – 5PM · Accra, Ghana
</p>
<div class="flex items-center space-x-6">
<a
href="#"
class="font-playfair font-normal text-base leading-relaxed text-gray-900 hover:text-black transition-colors"
>Instagram</a
>
<a
href="#"
class="font-playfair font-normal text-base leading-relaxed text-gray-900 hover:text-black transition-colors"
>LinkedIn</a
>
Subscribe
</button>
</div>
</div>
</div>

78
index.html
View file

@ -883,7 +883,7 @@
<footer class="bg-white border-t border-black border-opacity-20">
<!-- Main Footer Content -->
<div class="max-w-7xl mx-auto px-5 py-16">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<!-- Company Information -->
<div class="space-y-1">
<!-- Logo -->
@ -935,82 +935,64 @@
</div>
<!-- Quick Links -->
<div class="space-y-6">
<div class="space-y-4 md:ml-6 lg:ml-8">
<h3
class="font-playfair font-normal text-md leading-relaxed tracking-wider text-eerie-black uppercase"
class="font-playfair font-normal text-sm leading-snug tracking-widest text-eerie-black uppercase"
>
Quick Links
</h3>
<div class="space-y-4">
<a
href="#"
class="block font-playfair font-normal text-base leading-relaxed tracking-wider text-gray-800 hover:text-black transition-colors"
href="index.html"
class="block font-playfair font-normal text-base leading-relaxed tracking-wider text-gray-900 hover:text-black transition-colors"
>
Home
</a>
<a
href="#"
class="block font-playfair font-normal text-base leading-relaxed tracking-wider text-gray-800 hover:text-black transition-colors"
href="product-catalog.html"
class="block font-playfair font-normal text-base leading-relaxed tracking-wider text-gray-900 hover:text-black transition-colors"
>
Products
</a>
<a
href="#"
class="block font-playfair font-normal text-base leading-relaxed tracking-wider text-gray-800 hover:text-black transition-colors"
href="#about"
class="block font-playfair font-normal text-base leading-relaxed tracking-wider text-gray-900 hover:text-black transition-colors"
>
About
</a>
</div>
</div>
<!-- Help -->
<div class="space-y-6">
<h3
class="font-playfair font-normal text-md leading-relaxed tracking-wider text-eerie-black uppercase"
>
Help
</h3>
<div class="space-y-4">
<a
href="#"
class="block font-playfair font-normal text-base leading-relaxed tracking-wider text-gray-800 hover:text-black transition-colors"
href="contact.html"
class="block font-playfair font-normal text-base leading-relaxed tracking-wider text-gray-900 hover:text-black transition-colors"
>
Contact Us
</a>
<a
href="#"
class="block font-playfair font-normal text-base leading-relaxed tracking-wider text-gray-800 hover:text-black transition-colors"
>
Privacy Policies
</a>
<a
href="#"
class="block font-playfair font-normal text-base leading-relaxed tracking-wider text-gray-800 hover:text-black transition-colors"
>
Terms and Conditions
</a>
</div>
</div>
<!-- Newsletter -->
<div class="space-y-6">
<!-- Company / Hours / Social -->
<div class="space-y-4">
<h3
class="font-playfair font-normal text-md leading-relaxed tracking-wider text-eerie-black uppercase"
class="font-playfair font-normal text-sm leading-snug tracking-widest text-eerie-black uppercase"
>
Newsletter
Company
</h3>
<div class="space-y-4">
<div class="flex items-center space-x-4">
<input
type="email"
placeholder="Enter Your Email Address"
class="flex-1 font-playfair font-normal text-sm leading-relaxed tracking-wider text-taupe-gray bg-transparent border-b border-black focus:outline-none focus:border-black"
/>
<button
class="font-playfair font-normal text-sm leading-relaxed tracking-wider text-gray-800 border-b border-black hover:text-black transition-colors"
<p
class="font-playfair font-normal text-base leading-relaxed text-gray-900"
>
Mon–Fri: 9AM – 5PM · Accra, Ghana
</p>
<div class="flex items-center space-x-6">
<a
href="#"
class="font-playfair font-normal text-base leading-relaxed text-gray-900 hover:text-black transition-colors"
>Instagram</a
>
<a
href="#"
class="font-playfair font-normal text-base leading-relaxed text-gray-900 hover:text-black transition-colors"
>LinkedIn</a
>
Subscribe
</button>
</div>
</div>
</div>

74
product-catalog.html
View file

@ -354,7 +354,7 @@
<footer class="bg-white">
<!-- Main Footer Content -->
<div class="max-w-7xl mx-auto px-5 py-16">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<!-- Company Information -->
<div class="space-y-2">
<!-- Logo -->
@ -405,85 +405,59 @@
</div>
<!-- Quick Links -->
<div class="space-y-6">
<div class="space-y-4 md:ml-6 lg:ml-8">
<h3
class="font-playfair font-normal text-md leading-relaxed tracking-wider text-eerie-black uppercase"
class="font-playfair font-normal text-sm leading-snug tracking-widest text-eerie-black uppercase"
>
Quick Links
</h3>
<div class="space-y-4">
<a
href="#"
class="block font-playfair font-normal text-base leading-relaxed tracking-wider text-gray-800 hover:text-black transition-colors"
href="index.html"
class="block font-playfair font-normal text-base leading-relaxed tracking-wider text-gray-900 hover:text-black transition-colors"
>
Home
</a>
<a
href="#"
class="block font-playfair font-normal text-base leading-relaxed tracking-wider text-gray-800 hover:text-black transition-colors"
href="product-catalog.html"
class="block font-playfair font-normal text-base leading-relaxed tracking-wider text-gray-900 hover:text-black transition-colors"
>
Products
</a>
<a
href="#"
class="block font-playfair font-normal text-base leading-relaxed tracking-wider text-gray-800 hover:text-black transition-colors"
href="#about"
class="block font-playfair font-normal text-base leading-relaxed tracking-wider text-gray-900 hover:text-black transition-colors"
>
About
</a>
</div>
</div>
<!-- Help -->
<div class="space-y-6">
<h3
class="font-playfair font-normal text-md leading-relaxed tracking-wider text-eerie-black uppercase"
>
Help
</h3>
<div class="space-y-4">
<a
href="#"
class="block font-playfair font-normal text-base leading-relaxed tracking-wider text-gray-800 hover:text-black transition-colors"
href="contact.html"
class="block font-playfair font-normal text-base leading-relaxed tracking-wider text-gray-900 hover:text-black transition-colors"
>
Contact Us
</a>
<a
href="#"
class="block font-playfair font-normal text-base leading-relaxed tracking-wider text-gray-800 hover:text-black transition-colors"
>
Privacy Policies
</a>
<a
href="#"
class="block font-playfair font-normal text-base leading-relaxed tracking-wider text-gray-800 hover:text-black transition-colors"
>
Terms and Conditions
</a>
</div>
</div>
<!-- Newsletter -->
<div class="space-y-6">
<!-- Company / Hours / Social -->
<div class="space-y-4">
<h3
class="font-playfair font-normal text-md leading-relaxed tracking-wider text-eerie-black uppercase"
class="font-playfair font-normal text-sm leading-snug tracking-widest text-eerie-black uppercase"
>
Newsletter
Company
</h3>
<div class="space-y-4">
<div class="flex items-center space-x-4">
<input
type="email"
placeholder="Enter Your Email Address"
class="flex-1 font-playfair font-normal text-sm leading-relaxed tracking-wider text-taupe-gray bg-transparent border-b border-black focus:outline-none focus:border-black"
/>
<button
class="font-playfair font-normal text-sm leading-relaxed tracking-wider text-gray-800 border-b border-black hover:text-black transition-colors"
>
Subscribe
</button>
</div>
<p class="font-playfair font-normal text-base leading-relaxed text-gray-900">
Mon–Fri: 9AM – 5PM · Accra, Ghana
</p>
<div class="flex items-center space-x-6">
<a href="#" class="font-playfair font-normal text-base leading-relaxed text-gray-900 hover:text-black transition-colors">Instagram</a>
<a href="#" class="font-playfair font-normal text-base leading-relaxed text-gray-900 hover:text-black transition-colors">LinkedIn</a>
</div>
</div>
</div>
</div>
</div>

78
product-comparison.html
View file

@ -909,7 +909,7 @@
<footer class="bg-white border-t border-black border-opacity-20">
<!-- Main Footer Content -->
<div class="max-w-7xl mx-auto px-5 py-16">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<!-- Company Information -->
<div class="space-y-1">
<!-- Logo -->
@ -961,82 +961,64 @@
</div>
<!-- Quick Links -->
<div class="space-y-6">
<div class="space-y-4 md:ml-6 lg:ml-8">
<h3
class="font-playfair font-normal text-md leading-relaxed tracking-wider text-eerie-black uppercase"
class="font-playfair font-normal text-sm leading-snug tracking-widest text-eerie-black uppercase"
>
Quick Links
</h3>
<div class="space-y-4">
<a
href="#"
class="block font-playfair font-normal text-base leading-relaxed tracking-wider text-gray-800 hover:text-black transition-colors"
href="index.html"
class="block font-playfair font-normal text-base leading-relaxed tracking-wider text-gray-900 hover:text-black transition-colors"
>
Home
</a>
<a
href="#"
class="block font-playfair font-normal text-base leading-relaxed tracking-wider text-gray-800 hover:text-black transition-colors"
href="product-catalog.html"
class="block font-playfair font-normal text-base leading-relaxed tracking-wider text-gray-900 hover:text-black transition-colors"
>
Products
</a>
<a
href="#"
class="block font-playfair font-normal text-base leading-relaxed tracking-wider text-gray-800 hover:text-black transition-colors"
href="#about"
class="block font-playfair font-normal text-base leading-relaxed tracking-wider text-gray-900 hover:text-black transition-colors"
>
About
</a>
</div>
</div>
<!-- Help -->
<div class="space-y-6">
<h3
class="font-playfair font-normal text-md leading-relaxed tracking-wider text-eerie-black uppercase"
>
Help
</h3>
<div class="space-y-4">
<a
href="#"
class="block font-playfair font-normal text-base leading-relaxed tracking-wider text-gray-800 hover:text-black transition-colors"
href="contact.html"
class="block font-playfair font-normal text-base leading-relaxed tracking-wider text-gray-900 hover:text-black transition-colors"
>
Contact Us
</a>
<a
href="#"
class="block font-playfair font-normal text-base leading-relaxed tracking-wider text-gray-800 hover:text-black transition-colors"
>
Privacy Policies
</a>
<a
href="#"
class="block font-playfair font-normal text-base leading-relaxed tracking-wider text-gray-800 hover:text-black transition-colors"
>
Terms and Conditions
</a>
</div>
</div>
<!-- Newsletter -->
<div class="space-y-6">
<!-- Company / Hours / Social -->
<div class="space-y-4">
<h3
class="font-playfair font-normal text-md leading-relaxed tracking-wider text-eerie-black uppercase"
class="font-playfair font-normal text-sm leading-snug tracking-widest text-eerie-black uppercase"
>
Newsletter
Company
</h3>
<div class="space-y-4">
<div class="flex items-center space-x-4">
<input
type="email"
placeholder="Enter Your Email Address"
class="flex-1 font-playfair font-normal text-sm leading-relaxed tracking-wider text-taupe-gray bg-transparent border-b border-black focus:outline-none focus:border-black"
/>
<button
class="font-playfair font-normal text-sm leading-relaxed tracking-wider text-gray-800 border-b border-black hover:text-black transition-colors"
<p
class="font-playfair font-normal text-base leading-relaxed text-gray-900"
>
Mon–Fri: 9AM – 5PM · Accra, Ghana
</p>
<div class="flex items-center space-x-6">
<a
href="#"
class="font-playfair font-normal text-base leading-relaxed text-gray-900 hover:text-black transition-colors"
>Instagram</a
>
<a
href="#"
class="font-playfair font-normal text-base leading-relaxed text-gray-900 hover:text-black transition-colors"
>LinkedIn</a
>
Subscribe
</button>
</div>
</div>
</div>

78
product-detail.html
View file

@ -520,7 +520,7 @@
<footer class="bg-white border-t border-black border-opacity-20">
<!-- Main Footer Content -->
<div class="max-w-7xl mx-auto px-5 py-16">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<!-- Company Information -->
<div class="space-y-1">
<!-- Logo -->
@ -572,82 +572,64 @@
</div>
<!-- Quick Links -->
<div class="space-y-6">
<div class="space-y-4 md:ml-6 lg:ml-8">
<h3
class="font-playfair font-normal text-md leading-relaxed tracking-wider text-eerie-black uppercase"
class="font-playfair font-normal text-sm leading-snug tracking-widest text-eerie-black uppercase"
>
Quick Links
</h3>
<div class="space-y-4">
<a
href="#"
class="block font-playfair font-normal text-base leading-relaxed tracking-wider text-gray-800 hover:text-black transition-colors"
href="index.html"
class="block font-playfair font-normal text-base leading-relaxed tracking-wider text-gray-900 hover:text-black transition-colors"
>
Home
</a>
<a
href="#"
class="block font-playfair font-normal text-base leading-relaxed tracking-wider text-gray-800 hover:text-black transition-colors"
href="product-catalog.html"
class="block font-playfair font-normal text-base leading-relaxed tracking-wider text-gray-900 hover:text-black transition-colors"
>
Products
</a>
<a
href="#"
class="block font-playfair font-normal text-base leading-relaxed tracking-wider text-gray-800 hover:text-black transition-colors"
href="#about"
class="block font-playfair font-normal text-base leading-relaxed tracking-wider text-gray-900 hover:text-black transition-colors"
>
About
</a>
</div>
</div>
<!-- Help -->
<div class="space-y-6">
<h3
class="font-playfair font-normal text-md leading-relaxed tracking-wider text-eerie-black uppercase"
>
Help
</h3>
<div class="space-y-4">
<a
href="#"
class="block font-playfair font-normal text-base leading-relaxed tracking-wider text-gray-800 hover:text-black transition-colors"
href="contact.html"
class="block font-playfair font-normal text-base leading-relaxed tracking-wider text-gray-900 hover:text-black transition-colors"
>
Contact Us
</a>
<a
href="#"
class="block font-playfair font-normal text-base leading-relaxed tracking-wider text-gray-800 hover:text-black transition-colors"
>
Privacy Policies
</a>
<a
href="#"
class="block font-playfair font-normal text-base leading-relaxed tracking-wider text-gray-800 hover:text-black transition-colors"
>
Terms and Conditions
</a>
</div>
</div>
<!-- Newsletter -->
<div class="space-y-6">
<!-- Company / Hours / Social -->
<div class="space-y-4">
<h3
class="font-playfair font-normal text-md leading-relaxed tracking-wider text-eerie-black uppercase"
class="font-playfair font-normal text-sm leading-snug tracking-widest text-eerie-black uppercase"
>
Newsletter
Company
</h3>
<div class="space-y-4">
<div class="flex items-center space-x-4">
<input
type="email"
placeholder="Enter Your Email Address"
class="flex-1 font-playfair font-normal text-sm leading-relaxed tracking-wider text-taupe-gray bg-transparent border-b border-black focus:outline-none focus:border-black"
/>
<button
class="font-playfair font-normal text-sm leading-relaxed tracking-wider text-gray-800 border-b border-black hover:text-black transition-colors"
<p
class="font-playfair font-normal text-base leading-relaxed text-gray-900"
>
Mon–Fri: 9AM – 5PM · Accra, Ghana
</p>
<div class="flex items-center space-x-6">
<a
href="#"
class="font-playfair font-normal text-base leading-relaxed text-gray-900 hover:text-black transition-colors"
>Instagram</a
>
<a
href="#"
class="font-playfair font-normal text-base leading-relaxed text-gray-900 hover:text-black transition-colors"
>LinkedIn</a
>
Subscribe
</button>
</div>
</div>
</div>

20
styles/main.css
View file

@ -1338,6 +1338,10 @@ video {
gap: 0.75rem;
}
.gap-10 {
gap: 2.5rem;
}
.gap-y-2 {
row-gap: 0.5rem;
}
@ -2003,10 +2007,18 @@ video {
line-height: 1.25;
}
.leading-snug {
line-height: 1.375;
}
.tracking-wider {
letter-spacing: 0.05em;
}
.tracking-widest {
letter-spacing: 0.1em;
}
.text-\[\#333333\] {
--tw-text-opacity: 1;
color: rgb(51 51 51 / var(--tw-text-opacity, 1));
@ -2706,6 +2718,10 @@ video {
margin-left: 2rem;
}
.md\:ml-6 {
margin-left: 1.5rem;
}
.md\:block {
display: block;
}
@ -2967,6 +2983,10 @@ video {
margin-top: 0px;
}
.lg\:ml-8 {
margin-left: 2rem;
}
.lg\:h-32 {
height: 8rem;
}