This commit is contained in:
2024-09-24 16:19:41 +05:30
parent 42c4a08615
commit e4925eeb16
16 changed files with 329 additions and 151 deletions

View File

@ -10,126 +10,118 @@ import Image from 'next/image';
export function Footer() {
return (
<footer className='bg-[#f8f6f5] py-12 border-t-2 border-black'>
<div className='max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-4 gap-8 px-4'>
{/* First Column: Logo and Description */}
<div className='space-y-4'>
<div className='flex items-center'>
<Image
src='/images/logo.png' // Update with your logo path
alt='Mozimo Logo'
className='h-10'
width={100}
height={100}
/>
</div>
<p className='text-sm'>
India&apos;s Premier European style bean-to-bar chocolate
experience.
</p>
</div>
<footer className='bg-[#f8f6f5] flex flex-col md:flex-row py-12 border-t-2 border-black max-w-7xl mx-auto gap-8 px-4'>
{/* First Column: Logo and Description */}
<div className='space-y-4 flex flex-col basis-1/4'>
<Image
src='/images/logo.png' // Update with your logo path
alt='Mozimo Logo'
className='h-10'
width={100}
height={100}
/>
<p className='text-sm'>
India&apos;s Premier European style bean-to-bar chocolate experience.
</p>
</div>
{/* Second Column: Contact Information */}
<div className='space-y-4'>
<h3 className='font-semibold'>Get in touch</h3>
<p className='text-sm flex items-center'>
<FaPhoneAlt />
&nbsp; 0172-4045414
</p>
<p className='text-sm flex items-center'>
<FaMapLocationDot />
&nbsp; SCO 8, Inner Market, 9-D, Sector 9, Chandigarh, 160009
</p>
</div>
{/* Second Column: Contact Information */}
<div className='space-y-4 flex flex-col basis-1/4'>
<h3 className='font-semibold'>Get in touch</h3>
<p className='text-sm flex items-center'>
<FaPhoneAlt />
&nbsp; 0172-4045414
</p>
<p className='text-sm flex items-center'>
<FaMapLocationDot />
&nbsp; SCO 8, Inner Market, 9-D, Sector 9, Chandigarh, 160009
</p>
</div>
{/* Third Column: Links */}
<div className='space-y-4'>
<h3 className='font-semibold'>Know more</h3>
<ul className='space-y-2'>
<li>
<a
href='/privacy-policy'
className='text-sm text-brown-600 hover:underline'
>
Privacy Policy
</a>
</li>
<li>
<a
href='/refund-policy'
className='text-sm text-brown-600 hover:underline'
>
Refund & Return Policy
</a>
</li>
<li>
<a
href='/terms'
className='text-sm text-brown-600 hover:underline'
>
Terms & Conditions
</a>
</li>
<li>
<a
href='/shipping'
className='text-sm text-brown-600 hover:underline'
>
Shipping Policy
</a>
</li>
</ul>
</div>
{/* Third Column: Links */}
<div className='space-y-4 flex flex-col basis-1/4'>
<h3 className='font-semibold'>Know more</h3>
<ul className='space-y-2'>
<li>
<a
href='/privacy-policy'
className='text-sm text-brown-600 hover:underline'
>
Privacy Policy
</a>
</li>
<li>
<a
href='/refund-policy'
className='text-sm text-brown-600 hover:underline'
>
Refund & Return Policy
</a>
</li>
<li>
<a href='/terms' className='text-sm text-brown-600 hover:underline'>
Terms & Conditions
</a>
</li>
<li>
<a
href='/shipping'
className='text-sm text-brown-600 hover:underline'
>
Shipping Policy
</a>
</li>
</ul>
</div>
{/* Additional Links */}
<div className='space-y-4'>
<ul className='space-y-2'>
<li>
<a href='/faq' className='text-sm text-brown-600 hover:underline'>
FAQ
</a>
</li>
<li>
<a
href='/locate'
className='text-sm text-brown-600 hover:underline'
>
Locate our Store
</a>
</li>
<li>
<a
href='/bulk-ordering'
className='text-sm text-brown-600 hover:underline'
>
Bulk Ordering
</a>
</li>
</ul>
<h3 className='font-semibold'>Find Us On</h3>
<div className='flex space-x-4'>
{/* Additional Links */}
<div className='space-y-4 flex flex-col basis-1/4'>
<ul className='space-y-2'>
<li>
<a href='/faq' className='text-sm text-brown-600 hover:underline'>
FAQ
</a>
</li>
<li>
<a
href='https://facebook.com'
className='text-brown-600 hover:text-brown-800'
href='/locate'
className='text-sm text-brown-600 hover:underline'
>
<FaFacebook />
Locate our Store
</a>
</li>
<li>
<a
href='https://instagram.com'
className='text-brown-600 hover:text-brown-800'
href='/bulk-ordering'
className='text-sm text-brown-600 hover:underline'
>
<FaInstagram />
Bulk Ordering
</a>
<a
href='https://youtube.com'
className='text-brown-600 hover:text-brown-800'
>
<FaYoutube />
</a>
<a href='https://linkedin.com' className=''>
<FaLinkedin />
</a>
</div>
</li>
</ul>
<h3 className='font-semibold'>Find Us On</h3>
<div className='flex space-x-4'>
<a
href='https://facebook.com'
className='text-brown-600 hover:text-brown-800'
>
<FaFacebook />
</a>
<a
href='https://instagram.com'
className='text-brown-600 hover:text-brown-800'
>
<FaInstagram />
</a>
<a
href='https://youtube.com'
className='text-brown-600 hover:text-brown-800'
>
<FaYoutube />
</a>
<a href='https://linkedin.com' className=''>
<FaLinkedin />
</a>
</div>
</div>
</footer>