support/khy_website
1
0
Fork 0
mirror of https://git.kh3group.com/georgebiri/khy_website.git synced 2026-10-16 22:51:47 +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"> <footer class="bg-white">
<!-- Main Footer Content --> <!-- Main Footer Content -->
<div class="max-w-7xl mx-auto px-5 py-16"> <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 --> <!-- Company Information -->
<div class="space-y-2"> <div class="space-y-2">
<!-- Logo --> <!-- Logo -->
@ -664,82 +664,64 @@
</div> </div>
<!-- Quick Links --> <!-- Quick Links -->
<div class="space-y-6"> <div class="space-y-4 md:ml-6 lg:ml-8">
<h3 <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 Quick Links
</h3> </h3>
<div class="space-y-4"> <div class="space-y-4">
<a <a
href="#" href="index.html"
class="block font-playfair font-normal text-base leading-relaxed tracking-wider text-gray-800 hover:text-black transition-colors" class="block font-playfair font-normal text-base leading-relaxed tracking-wider text-gray-900 hover:text-black transition-colors"
> >
Home Home
</a> </a>
<a <a
href="#" href="product-catalog.html"
class="block font-playfair font-normal text-base leading-relaxed tracking-wider text-gray-800 hover:text-black transition-colors" class="block font-playfair font-normal text-base leading-relaxed tracking-wider text-gray-900 hover:text-black transition-colors"
> >
Products Products
</a> </a>
<a <a
href="#" href="#about"
class="block font-playfair font-normal text-base leading-relaxed tracking-wider text-gray-800 hover:text-black transition-colors" class="block font-playfair font-normal text-base leading-relaxed tracking-wider text-gray-900 hover:text-black transition-colors"
> >
About About
</a> </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 <a
href="#" href="contact.html"
class="block font-playfair font-normal text-base leading-relaxed tracking-wider text-gray-800 hover:text-black transition-colors" class="block font-playfair font-normal text-base leading-relaxed tracking-wider text-gray-900 hover:text-black transition-colors"
> >
Contact Us Contact Us
</a> </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>
</div> </div>
<!-- Newsletter --> <!-- Company / Hours / Social -->
<div class="space-y-6"> <div class="space-y-4">
<h3 <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> </h3>
<div class="space-y-4"> <div class="space-y-4">
<div class="flex items-center space-x-4"> <p
<input class="font-playfair font-normal text-base leading-relaxed text-gray-900"
type="email" >
placeholder="Enter Your Email Address" Mon–Fri: 9AM – 5PM · Accra, Ghana
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" </p>
/> <div class="flex items-center space-x-6">
<button <a
class="font-playfair font-normal text-sm leading-relaxed tracking-wider text-gray-800 border-b border-black hover:text-black transition-colors" 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> </div>
</div> </div>

78
index.html
View file

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

72
product-catalog.html
View file

@ -354,7 +354,7 @@
<footer class="bg-white"> <footer class="bg-white">
<!-- Main Footer Content --> <!-- Main Footer Content -->
<div class="max-w-7xl mx-auto px-5 py-16"> <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 --> <!-- Company Information -->
<div class="space-y-2"> <div class="space-y-2">
<!-- Logo --> <!-- Logo -->
@ -405,85 +405,59 @@
</div> </div>
<!-- Quick Links --> <!-- Quick Links -->
<div class="space-y-6"> <div class="space-y-4 md:ml-6 lg:ml-8">
<h3 <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 Quick Links
</h3> </h3>
<div class="space-y-4"> <div class="space-y-4">
<a <a
href="#" href="index.html"
class="block font-playfair font-normal text-base leading-relaxed tracking-wider text-gray-800 hover:text-black transition-colors" class="block font-playfair font-normal text-base leading-relaxed tracking-wider text-gray-900 hover:text-black transition-colors"
> >
Home Home
</a> </a>
<a <a
href="#" href="product-catalog.html"
class="block font-playfair font-normal text-base leading-relaxed tracking-wider text-gray-800 hover:text-black transition-colors" class="block font-playfair font-normal text-base leading-relaxed tracking-wider text-gray-900 hover:text-black transition-colors"
> >
Products Products
</a> </a>
<a <a
href="#" href="#about"
class="block font-playfair font-normal text-base leading-relaxed tracking-wider text-gray-800 hover:text-black transition-colors" class="block font-playfair font-normal text-base leading-relaxed tracking-wider text-gray-900 hover:text-black transition-colors"
> >
About About
</a> </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 <a
href="#" href="contact.html"
class="block font-playfair font-normal text-base leading-relaxed tracking-wider text-gray-800 hover:text-black transition-colors" class="block font-playfair font-normal text-base leading-relaxed tracking-wider text-gray-900 hover:text-black transition-colors"
> >
Contact Us Contact Us
</a> </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>
</div> </div>
<!-- Newsletter --> <!-- Company / Hours / Social -->
<div class="space-y-6"> <div class="space-y-4">
<h3 <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> </h3>
<div class="space-y-4"> <div class="space-y-4">
<div class="flex items-center space-x-4"> <p class="font-playfair font-normal text-base leading-relaxed text-gray-900">
<input Mon–Fri: 9AM – 5PM · Accra, Ghana
type="email" </p>
placeholder="Enter Your Email Address" <div class="flex items-center space-x-6">
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" <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>
<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> </div>
</div> </div>
</div> </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"> <footer class="bg-white border-t border-black border-opacity-20">
<!-- Main Footer Content --> <!-- Main Footer Content -->
<div class="max-w-7xl mx-auto px-5 py-16"> <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 --> <!-- Company Information -->
<div class="space-y-1"> <div class="space-y-1">
<!-- Logo --> <!-- Logo -->
@ -961,82 +961,64 @@
</div> </div>
<!-- Quick Links --> <!-- Quick Links -->
<div class="space-y-6"> <div class="space-y-4 md:ml-6 lg:ml-8">
<h3 <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 Quick Links
</h3> </h3>
<div class="space-y-4"> <div class="space-y-4">
<a <a
href="#" href="index.html"
class="block font-playfair font-normal text-base leading-relaxed tracking-wider text-gray-800 hover:text-black transition-colors" class="block font-playfair font-normal text-base leading-relaxed tracking-wider text-gray-900 hover:text-black transition-colors"
> >
Home Home
</a> </a>
<a <a
href="#" href="product-catalog.html"
class="block font-playfair font-normal text-base leading-relaxed tracking-wider text-gray-800 hover:text-black transition-colors" class="block font-playfair font-normal text-base leading-relaxed tracking-wider text-gray-900 hover:text-black transition-colors"
> >
Products Products
</a> </a>
<a <a
href="#" href="#about"
class="block font-playfair font-normal text-base leading-relaxed tracking-wider text-gray-800 hover:text-black transition-colors" class="block font-playfair font-normal text-base leading-relaxed tracking-wider text-gray-900 hover:text-black transition-colors"
> >
About About
</a> </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 <a
href="#" href="contact.html"
class="block font-playfair font-normal text-base leading-relaxed tracking-wider text-gray-800 hover:text-black transition-colors" class="block font-playfair font-normal text-base leading-relaxed tracking-wider text-gray-900 hover:text-black transition-colors"
> >
Contact Us Contact Us
</a> </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>
</div> </div>
<!-- Newsletter --> <!-- Company / Hours / Social -->
<div class="space-y-6"> <div class="space-y-4">
<h3 <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> </h3>
<div class="space-y-4"> <div class="space-y-4">
<div class="flex items-center space-x-4"> <p
<input class="font-playfair font-normal text-base leading-relaxed text-gray-900"
type="email" >
placeholder="Enter Your Email Address" Mon–Fri: 9AM – 5PM · Accra, Ghana
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" </p>
/> <div class="flex items-center space-x-6">
<button <a
class="font-playfair font-normal text-sm leading-relaxed tracking-wider text-gray-800 border-b border-black hover:text-black transition-colors" 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> </div>
</div> </div>

78
product-detail.html
View file

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

20
styles/main.css
View file

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