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>

View File

@ -1,11 +0,0 @@
// components/Header.js
export function Header() {
return (
<header className='bg-white shadow'>
<div className='container mx-auto px-4 py-6'>
<h1 className='text-2xl font-bold'>Kakawa Chocolate Shop</h1>
{/* Navigation links */}
</div>
</header>
);
}

View File

@ -1,5 +1,4 @@
// components/Layout.js
import { Header } from './header';
import { Footer } from './footer';
import { ReactNode } from 'react'; // Import ReactNode
@ -9,7 +8,6 @@ interface LayoutProps {
export function Layout({ children }: LayoutProps) {
return (
<>
<Header />
<main>{children}</main>
<Footer />
</>

View File

@ -19,4 +19,8 @@
/* Custom style */
.navBarScrolledUp {
backdrop-filter: blur(10px); /* Adds a blur effect */
}
}
.cls-1, .cls-2 {
fill: #ffffff;
}

View File

@ -5,6 +5,7 @@ import { FiSearch, FiUser } from 'react-icons/fi';
import { HiShoppingBag } from 'react-icons/hi2';
import styles from './navbar.module.css';
import Image from 'next/image';
import logoPic from '/public/images/logo.svg';
// components/Navbar.tsx
export function Navbar() {
@ -40,7 +41,7 @@ export function Navbar() {
<nav className={navClasses}>
{/* Left side */}
<div className='flex items-center'>
<Link href='/about' className='text-sm font-medium hover:underline'>
<Link href='/about-us' className='text-sm font-medium hover:underline'>
About Us
</Link>
</div>
@ -48,9 +49,9 @@ export function Navbar() {
<div className='flex-shrink-0'>
<Link href='/' className='text-lg font-bold'>
<Image
src='/images/logo.png'
src={logoPic}
alt='Logo'
className='logo'
className='logo text-white'
width={100}
height={100}
/>