tanshu/mozimo.in
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

design changes

Browse Source
This commit is contained in:
bharti
2025-08-05 00:29:15 +05:30
parent cdc634cb4a
commit 3b67c1149f
11 changed files with 766 additions and 631 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/fonts/MONETASANS-REGULAR.OTF Normal file
View File

Binary file not shown.

11
public/fonts/MonetaSans-Regular.ttf
View File

@ -1,11 +0,0 @@
<!DOCTYPE html>
<html lang=en>
<meta charset=utf-8>
<meta name=viewport content="initial-scale=1, minimum-scale=1, width=device-width">
<title>Error 404 (Not Found)!!1</title>
<style>
*{margin:0;padding:0}html,code{font:15px/22px arial,sans-serif}html{background:#fff;color:#222;padding:15px}body{margin:7% auto 0;max-width:390px;min-height:180px;padding:30px 0 15px}* > body{background:url(//www.google.com/images/errors/robot.png) 100% 5px no-repeat;padding-right:205px}p{margin:11px 0 22px;overflow:hidden}ins{color:#777;text-decoration:none}a img{border:0}@media screen and (max-width:772px){body{background:none;margin-top:0;max-width:none;padding-right:0}}#logo{background:url(//www.google.com/images/branding/googlelogo/1x/googlelogo_color_150x54dp.png) no-repeat;margin-left:-5px}@media only screen and (min-resolution:192dpi){#logo{background:url(//www.google.com/images/branding/googlelogo/2x/googlelogo_color_150x54dp.png) no-repeat 0% 0%/100% 100%;-moz-border-image:url(//www.google.com/images/branding/googlelogo/2x/googlelogo_color_150x54dp.png) 0}}@media only screen and (-webkit-min-device-pixel-ratio:2){#logo{background:url(//www.google.com/images/branding/googlelogo/2x/googlelogo_color_150x54dp.png) no-repeat;-webkit-background-size:100% 100%}}#logo{display:inline-block;height:54px;width:150px}
</style>
<a href=//www.google.com/><span id=logo aria-label=Google></span></a>
<p><b>404.</b> <ins>That’s an error.</ins>
<p>The requested URL <code>/s/moneta/v1/1Ptsg8zYS_SKggPNyC0IT4ttDfA.ttf</code> was not found on this server. <ins>That’s all we know.</ins>

BIN
public/fonts/RENNER_ 300 LIGHT.OTF Normal file
View File

Binary file not shown.

BIN
public/fonts/RENNER_ 500 MEDIUM.OTF Normal file
View File

Binary file not shown.

BIN
public/fonts/RENNER_ 700 BOLD.OTF Normal file
View File

Binary file not shown.

BIN
public/fonts/SAMANTHA SIGNATURE.OTF Normal file
View File

Binary file not shown.

105
public/fonts/Samantha-Signature.ttf
View File

File diff suppressed because one or more lines are too long

22
src/app/globals.css
View File

@ -5,17 +5,31 @@
/* Renner font */ /* Renner font */
@font-face { @font-face {
font-family: 'Renner*'; font-family: 'Renner*';
src: url('/fonts/Renner-Light.woff2') format('woff2'), src: url('/fonts/RENNER_ 300 LIGHT.OTF') format('opentype');
url('/fonts/Renner-Light.woff') format('woff');
font-weight: 300; font-weight: 300;
font-style: normal; font-style: normal;
font-display: swap; font-display: swap;
} }
@font-face {
font-family: 'Renner*';
src: url('/fonts/RENNER_ 500 MEDIUM.OTF') format('opentype');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Renner*';
src: url('/fonts/RENNER_ 700 BOLD.OTF') format('opentype');
font-weight: 700;
font-style: normal;
font-display: swap;
}
/* Samantha Signature font */ /* Samantha Signature font */
@font-face { @font-face {
font-family: 'Samantha Signature'; font-family: 'Samantha Signature';
src: url('/fonts/Samantha-Signature.ttf') format('truetype'); src: url('/fonts/SAMANTHA SIGNATURE.OTF') format('opentype');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
font-display: swap; font-display: swap;
@ -24,7 +38,7 @@
/* MonetaSans-Regular font */ /* MonetaSans-Regular font */
@font-face { @font-face {
font-family: 'MonetaSans-Regular'; font-family: 'MonetaSans-Regular';
src: url('/fonts/MonetaSans-Regular.ttf') format('truetype'); src: url('/fonts/MONETASANS-REGULAR.OTF') format('opentype');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
font-display: swap; font-display: swap;

706
src/app/page.tsx
View File

@ -1,65 +1,65 @@
'use client'; "use client";
import { motion } from 'framer-motion'; import { motion } from "framer-motion";
import Header from '@/components/Header'; import Header from "@/components/Header";
import Footer from '@/components/Footer'; import Footer from "@/components/Footer";
import Section from '@/components/Section'; import Section from "@/components/Section";
import Button from '@/components/Button'; import Button from "@/components/Button";
import BannerSlider from '@/components/BannerSlider'; import BannerSlider from "@/components/BannerSlider";
import Image from 'next/image'; import Image from "next/image";
import { useState, useEffect, useRef, useCallback, useMemo } from 'react'; import { useState, useEffect, useRef, useCallback, useMemo } from "react";
import { AnimatePresence } from 'framer-motion'; import { AnimatePresence } from "framer-motion";
import { useInstagram } from '@/hooks/useInstagram'; import { useInstagram } from "@/hooks/useInstagram";
// Premium animation variants // Premium animation variants
const fadeInUp = { const fadeInUp = {
initial: { opacity: 0, y: 30 }, initial: { opacity: 0, y: 30 },
animate: { opacity: 1, y: 0 }, animate: { opacity: 1, y: 0 },
transition: { duration: 0.8, ease: [0.25, 0.46, 0.45, 0.94] } transition: { duration: 0.8, ease: [0.25, 0.46, 0.45, 0.94] },
}; };
const fadeInLeft = { const fadeInLeft = {
initial: { opacity: 0, x: -30 }, initial: { opacity: 0, x: -30 },
animate: { opacity: 1, x: 0 }, animate: { opacity: 1, x: 0 },
transition: { duration: 0.8, ease: [0.25, 0.46, 0.45, 0.94] } transition: { duration: 0.8, ease: [0.25, 0.46, 0.45, 0.94] },
}; };
const fadeInRight = { const fadeInRight = {
initial: { opacity: 0, x: 30 }, initial: { opacity: 0, x: 30 },
animate: { opacity: 1, x: 0 }, animate: { opacity: 1, x: 0 },
transition: { duration: 0.8, ease: [0.25, 0.46, 0.45, 0.94] } transition: { duration: 0.8, ease: [0.25, 0.46, 0.45, 0.94] },
}; };
const staggerContainer = { const staggerContainer = {
animate: { animate: {
transition: { transition: {
staggerChildren: 0.2 staggerChildren: 0.2,
} },
} },
}; };
const categories = [ const categories = [
'Bars', "Bars",
'Barks', "Barks",
'Pralines', "Pralines",
'Spreads', "Spreads",
'Dragees', "Dragees",
'Gelatos', "Gelatos",
]; ];
const categoryImages = [ const categoryImages = [
'/categories/c1.svg', "/categories/c1.svg",
'/categories/c2.svg', "/categories/c2.svg",
'/categories/c3.svg', "/categories/c3.svg",
'/categories/c4.svg', "/categories/c4.svg",
'/categories/c5.svg', "/categories/c5.svg",
'/categories/c6.svg', "/categories/c6.svg",
]; ];
const partnerImages = [ const partnerImages = [
'/partners/p1.svg', "/partners/p1.svg",
'/partners/p2.svg', "/partners/p2.svg",
'/partners/p3.svg', "/partners/p3.svg",
'/partners/p4.svg', "/partners/p4.svg",
]; ];
export default function Home() { export default function Home() {
@ -80,12 +80,12 @@ export default function Home() {
if (e.deltaY > 0) { if (e.deltaY > 0) {
// Scroll down - next category // Scroll down - next category
if (currentCategoryRef.current < categories.length - 1) { if (currentCategoryRef.current < categories.length - 1) {
setCurrentCategory(prev => prev + 1); setCurrentCategory((prev) => prev + 1);
} }
} else if (e.deltaY < 0) { } else if (e.deltaY < 0) {
// Scroll up - previous category // Scroll up - previous category
if (currentCategoryRef.current > 0) { if (currentCategoryRef.current > 0) {
setCurrentCategory(prev => prev - 1); setCurrentCategory((prev) => prev - 1);
} }
} }
}, []); }, []);
@ -112,9 +112,9 @@ export default function Home() {
}, 800); }, 800);
}; };
section.addEventListener('wheel', onWheel, { passive: false }); section.addEventListener("wheel", onWheel, { passive: false });
return () => { return () => {
section.removeEventListener('wheel', onWheel); section.removeEventListener("wheel", onWheel);
clearTimeout(scrollTimeout); clearTimeout(scrollTimeout);
}; };
}, [handleWheel]); }, [handleWheel]);
@ -130,107 +130,117 @@ export default function Home() {
const { posts, loading, error, isTokenExpired } = useInstagram(); const { posts, loading, error, isTokenExpired } = useInstagram();
// Memoize expensive components // Memoize expensive components
const BrandStorySection = useMemo(() => ( const BrandStorySection = useMemo(
<Section background="white" id="about"> () => (
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8 md:gap-12 lg:gap-16 items-center"> <Section background="white" id="about">
{/* Left Column - Text */} <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 md:gap-12 lg:gap-16 items-center">
<motion.div {/* Left Column - Text */}
initial="initial"
whileInView="animate"
viewport={{ once: true, margin: "-50px" }}
variants={fadeInLeft}
className="space-y-6 md:space-y-8 order-2 lg:order-1"
>
<motion.h2
className="text-3xl md:text-4xl lg:text-5xl font-bold text-[#3C2A21] font-moneta text-gradient"
style={{
fontWeight: 400,
fontSize: 'clamp(32px, 5vw, 58px)',
lineHeight: '100%',
letterSpacing: '0%',
fontFamily: 'MonetaSans-Regular',
color: '#703133'
}}
whileHover={{ scale: 1.02 }}
transition={{ duration: 0.3 }}
>
Brand Story
</motion.h2>
<div className="space-y-4 md:space-y-6 text-gray-700 leading-relaxed font-renner" style={{
fontWeight: 300,
fontSize: 'clamp(16px, 2.5vw, 18px)',
lineHeight: '160%',
letterSpacing: '0%' ,
fontFamily: 'Renner*'
}}>
<motion.p
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6, delay: 0.1 }}
viewport={{ once: true }}
>
Mozimo&apos;s journey is a passionate pursuit of crafting exceptional chocolate that celebrates the origin of each cocoa bean.
</motion.p>
<motion.p
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6, delay: 0.2 }}
viewport={{ once: true }}
>
We meticulously roast, crack, winnow, and refine beans in-house, using modern techniques to highlight their natural flavors.
</motion.p>
<motion.p
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6, delay: 0.3 }}
viewport={{ once: true }}
>
Each chocolate is a masterpiece, capturing the essence of cocoa in its purest form.
</motion.p>
</div>
<motion.div <motion.div
className="pt-4" initial="initial"
initial={{ opacity: 0, y: 20 }} whileInView="animate"
whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true, margin: "-50px" }}
transition={{ duration: 0.6, delay: 0.4 }} variants={fadeInLeft}
viewport={{ once: true }} className="space-y-6 md:space-y-8 order-2 lg:order-1"
> >
<Button variant="white" size="lg" className="btn-premium"> <motion.h2
Discover more className="text-3xl md:text-4xl lg:text-5xl font-bold text-[#3C2A21] font-moneta text-gradient"
</Button> style={{
fontWeight: 400,
fontSize: "clamp(32px, 5vw, 58px)",
lineHeight: "100%",
letterSpacing: "0%",
fontFamily: "MonetaSans-Regular",
color: "#703133",
}}
whileHover={{ scale: 1.02 }}
transition={{ duration: 0.3 }}
>
Brand Story
</motion.h2>
<div
className="space-y-4 md:space-y-6 text-gray-700 leading-relaxed font-renner"
style={{
fontWeight: 300,
fontSize: "clamp(16px, 2.5vw, 18px)",
lineHeight: "160%",
letterSpacing: "0%",
fontFamily: "Renner*",
}}
>
<motion.p
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6, delay: 0.1 }}
viewport={{ once: true }}
>
Mozimo&apos;s journey is a passionate pursuit of crafting
exceptional chocolate that celebrates the origin of each cocoa
bean.
</motion.p>
<motion.p
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6, delay: 0.2 }}
viewport={{ once: true }}
>
We meticulously roast, crack, winnow, and refine beans in-house,
using modern techniques to highlight their natural flavors.
</motion.p>
<motion.p
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6, delay: 0.3 }}
viewport={{ once: true }}
>
Each chocolate is a masterpiece, capturing the essence of cocoa
in its purest form.
</motion.p>
</div>
<motion.div
className="pt-4"
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6, delay: 0.4 }}
viewport={{ once: true }}
>
<Button variant="white" size="lg" className="btn-premium">
Discover more
</Button>
</motion.div>
</motion.div> </motion.div>
</motion.div>
{/* Right Column - Image */} {/* Right Column - Image */}
<motion.div
initial="initial"
whileInView="animate"
viewport={{ once: true, margin: "-50px" }}
variants={fadeInRight}
className="relative order-1 lg:order-2"
>
<motion.div <motion.div
className="relative w-full h-[300px] md:h-[400px] lg:h-[500px] rounded-xl overflow-hidden shadow-premium hover:shadow-premium-hover transition-all duration-500" initial="initial"
whileHover={{ whileInView="animate"
scale: 1.02, viewport={{ once: true, margin: "-50px" }}
transition: { duration: 0.3 } variants={fadeInRight}
}} className="relative order-1 lg:order-2"
> >
<Image <motion.div
src="/bst/bs1.svg" className="relative w-full h-[300px] md:h-[400px] lg:h-[500px] rounded-xl overflow-hidden shadow-premium hover:shadow-premium-hover transition-all duration-500"
alt="Cocoa pods and beans - Mozimo chocolate ingredients" whileHover={{
fill scale: 1.02,
className="object-cover img-premium" transition: { duration: 0.3 },
draggable={false} }}
quality={85} >
/> <Image
{/* Premium overlay for depth */} src="/bst/bs1.svg"
<div className="absolute inset-0 bg-gradient-to-t from-black/20 via-transparent to-transparent" /> alt="Cocoa pods and beans - Mozimo chocolate ingredients"
fill
className="object-cover img-premium"
draggable={false}
quality={85}
/>
{/* Premium overlay for depth */}
<div className="absolute inset-0 bg-gradient-to-t from-black/20 via-transparent to-transparent" />
</motion.div>
</motion.div> </motion.div>
</motion.div> </div>
</div> </Section>
</Section> ),
), []); []
);
return ( return (
<div className="min-h-screen bg-white font-renner"> <div className="min-h-screen bg-white font-renner">
@ -254,7 +264,7 @@ export default function Home() {
className="relative w-full h-[400px] md:h-[500px] lg:h-[700px] rounded-xl overflow-hidden shadow-premium hover:shadow-premium-hover transition-all duration-500" className="relative w-full h-[400px] md:h-[500px] lg:h-[700px] rounded-xl overflow-hidden shadow-premium hover:shadow-premium-hover transition-all duration-500"
whileHover={{ whileHover={{
scale: 1.02, scale: 1.02,
transition: { duration: 0.3 } transition: { duration: 0.3 },
}} }}
> >
<video <video
@ -266,7 +276,7 @@ export default function Home() {
playsInline playsInline
preload="auto" preload="auto"
aria-label="Chocolate pouring from metallic spout - Mozimo chocolate tempering process" aria-label="Chocolate pouring from metallic spout - Mozimo chocolate tempering process"
style={{ display: 'block' }} style={{ display: "block" }}
/> />
{/* Premium overlay for depth */} {/* Premium overlay for depth */}
<div className="absolute inset-0 bg-gradient-to-t from-black/20 via-transparent to-transparent" /> <div className="absolute inset-0 bg-gradient-to-t from-black/20 via-transparent to-transparent" />
@ -286,11 +296,11 @@ export default function Home() {
className="text-2xl md:text-3xl lg:text-4xl font-bold text-[#3C2A21] font-renner text-gradient" className="text-2xl md:text-3xl lg:text-4xl font-bold text-[#3C2A21] font-renner text-gradient"
style={{ style={{
fontWeight: 200, fontWeight: 200,
fontSize: 'clamp(24px, 4vw, 40px)', fontSize: "clamp(24px, 4vw, 40px)",
lineHeight: '100%', lineHeight: "100%",
letterSpacing: '0%', letterSpacing: "0%",
fontFamily: 'MonetaSans-Regular', fontFamily: "MonetaSans-Regular",
color: '#703133' color: "#703133",
}} }}
whileHover={{ scale: 1.02 }} whileHover={{ scale: 1.02 }}
transition={{ duration: 0.3 }} transition={{ duration: 0.3 }}
@ -301,11 +311,11 @@ export default function Home() {
className="text-4xl md:text-5xl lg:text-7xl font-bold text-[#8B4513] font-samantha" className="text-4xl md:text-5xl lg:text-7xl font-bold text-[#8B4513] font-samantha"
style={{ style={{
fontWeight: 300, fontWeight: 300,
fontSize: 'clamp(36px, 6vw, 60px)', fontSize: "clamp(36px, 6vw, 60px)",
lineHeight: '120%', lineHeight: "120%",
letterSpacing: '0%', letterSpacing: "0%",
fontStyle: 'italic', fontStyle: "italic",
color: '#703133' color: "#703133",
}} }}
whileHover={{ scale: 1.02 }} whileHover={{ scale: 1.02 }}
transition={{ duration: 0.3 }} transition={{ duration: 0.3 }}
@ -327,17 +337,21 @@ export default function Home() {
className="text-gray-700 leading-relaxed font-renner" className="text-gray-700 leading-relaxed font-renner"
style={{ style={{
fontWeight: 300, fontWeight: 300,
fontSize: 'clamp(16px, 2.5vw, 18px)', fontSize: "clamp(16px, 2.5vw, 18px)",
lineHeight: '160%', lineHeight: "160%",
letterSpacing: '0%', letterSpacing: "0%",
fontFamily: 'Renner*' fontFamily: "Renner*",
}} }}
initial={{ opacity: 0, y: 20 }} initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }} whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6, delay: 0.3 }} transition={{ duration: 0.6, delay: 0.3 }}
viewport={{ once: true }} viewport={{ once: true }}
> >
Crafted to perfection Mozimo delivers a sublime sensory experience with every bite. Experience the epitome of indulgence with our perfectly tempered chocolate: velvety smooth, exquisitely rich, and artfully balanced. Each bite offers a symphony of nuanced cocoa flavors, melting luxuriously! Crafted to perfection Mozimo delivers a sublime sensory experience
with every bite. Experience the epitome of indulgence with our
perfectly tempered chocolate: velvety smooth, exquisitely rich,
and artfully balanced. Each bite offers a symphony of nuanced
cocoa flavors, melting luxuriously!
</motion.p> </motion.p>
</motion.div> </motion.div>
</div> </div>
@ -351,7 +365,13 @@ export default function Home() {
viewport={{ once: true, margin: "-50px" }} viewport={{ once: true, margin: "-50px" }}
variants={fadeInUp} variants={fadeInUp}
className="text-2xl md:text-3xl lg:text-4xl font-bold text-[#3C2A21] text-center mb-8 md:mb-12 font-renner text-gradient" className="text-2xl md:text-3xl lg:text-4xl font-bold text-[#3C2A21] text-center mb-8 md:mb-12 font-renner text-gradient"
style={{ fontWeight: 300, fontSize: 'clamp(24px, 4vw, 36px)', lineHeight: '100%', letterSpacing: '0%', fontFamily: 'MonetaSans-Regular' }} style={{
fontWeight: 300,
fontSize: "clamp(24px, 4vw, 36px)",
lineHeight: "100%",
letterSpacing: "0%",
fontFamily: "MonetaSans-Regular",
}}
whileHover={{ scale: 1.02 }} whileHover={{ scale: 1.02 }}
transition={{ duration: 0.3 }} transition={{ duration: 0.3 }}
> >
@ -366,32 +386,56 @@ export default function Home() {
viewport={{ once: true, margin: "-50px" }} viewport={{ once: true, margin: "-50px" }}
> >
{[ {[
{ src: '/collection/cl1.svg', title: 'Bestsellers', alt: 'Bestsellers - Mozimo chocolate bars with geometric patterns' }, {
{ src: '/collection/cl2.svg', title: 'New Arrivals', alt: 'New Arrivals - Stacked chocolate barks with nuts and toppings' }, src: "/collection/cl1.svg",
{ src: '/collection/cl3.svg', title: 'Gift Collection', alt: 'Gift Collection - Mozimo packaged chocolate products and gift items' } title: "Bestsellers",
alt: "Bestsellers - Mozimo chocolate bars with geometric patterns",
},
{
src: "/collection/cl2.svg",
title: "New Arrivals",
alt: "New Arrivals - Stacked chocolate barks with nuts and toppings",
},
{
src: "/collection/cl3.svg",
title: "Gift Collection",
alt: "Gift Collection - Mozimo packaged chocolate products and gift items",
},
].map((item) => ( ].map((item) => (
<motion.div <motion.div
key={item.title} key={item.title}
variants={fadeInUp} variants={fadeInUp}
className="bg-white rounded-2xl shadow-premium overflow-hidden hover:shadow-premium-hover transition-all duration-500 transform hover:-translate-y-2 group" className="group flex flex-col items-center justify-end transition-all duration-500 hover:-translate-y-2"
whileHover={{ whileHover={{
scale: 1.02, scale: 1.02,
transition: { duration: 0.3 } transition: { duration: 0.3 },
}} }}
style={{ minHeight: "480px" }}
> >
<div className="h-60 md:h-80 bg-white flex items-center justify-center overflow-hidden"> <Image
<Image src={item.src}
src={item.src} alt={item.alt}
alt={item.alt} width={320}
width={400} height={400}
height={320} className="object-contain img-premium group-hover:scale-105 transition-transform duration-500"
className="w-full h-full object-cover img-premium group-hover:scale-105 transition-transform duration-500" draggable={false}
draggable={false} quality={85}
quality={85} style={{ maxHeight: "380px", width: "100%" }}
/> />
</div>
<div className="p-4 md:p-6 text-center"> <div className="p-4 md:p-6 text-center mb-2 w-full">
<h3 className="text-lg md:text-xl font-semibold text-[#3C2A21] font-renner text-gradient" style={{ fontWeight: 300, fontSize: 'clamp(16px, 2.5vw, 20px)', lineHeight: '100%', letterSpacing: '0%', fontFamily: 'Renner*' }}>{item.title}</h3> <h3
className="text-lg md:text-xl font-semibold text-[#3C2A21] font-renner"
style={{
fontWeight: 300,
fontSize: "clamp(16px, 2.5vw, 20px)",
lineHeight: "100%",
letterSpacing: "0%",
fontFamily: "Renner*",
}}
>
{item.title}
</h3>
</div> </div>
</motion.div> </motion.div>
))} ))}
@ -400,7 +444,10 @@ export default function Home() {
{/* Product Categories Section */} {/* Product Categories Section */}
<Section background="white" id="categories"> <Section background="white" id="categories">
<div ref={categoriesSectionRef} className="grid grid-cols-1 lg:grid-cols-2 gap-0 items-stretch min-h-[400px] md:min-h-[500px]"> <div
ref={categoriesSectionRef}
className="grid grid-cols-1 lg:grid-cols-2 gap-0 items-stretch min-h-[400px] md:min-h-[500px]"
>
{/* Left Column - Categories List */} {/* Left Column - Categories List */}
<motion.div <motion.div
initial="initial" initial="initial"
@ -420,19 +467,25 @@ export default function Home() {
> >
<button <button
className={`transition-all duration-700 ease-out text-left w-full font-moneta text-[#703133] hover:scale-105 ${ className={`transition-all duration-700 ease-out text-left w-full font-moneta text-[#703133] hover:scale-105 ${
idx === currentCategory ? 'text-3xl md:text-5xl lg:text-7xl font-normal' : 'text-2xl md:text-4xl lg:text-5xl font-light opacity-60' idx === currentCategory
? "text-3xl md:text-5xl lg:text-7xl font-normal"
: "text-2xl md:text-4xl lg:text-5xl font-light opacity-60"
}`} }`}
style={{ style={{
fontFamily: 'MonetaSans-Regular', fontFamily: "MonetaSans-Regular",
fontWeight: idx === currentCategory ? 400 : 300, fontWeight: idx === currentCategory ? 400 : 300,
fontSize: idx === currentCategory ? 'clamp(32px, 6vw, 72px)' : 'clamp(24px, 4vw, 56px)', fontSize:
lineHeight: '120%', idx === currentCategory
letterSpacing: '0%', ? "clamp(32px, 6vw, 72px)"
color: '#703133', : "clamp(24px, 4vw, 56px)",
transition: 'all 0.7s cubic-bezier(0.25,0.46,0.45,0.94)' lineHeight: "120%",
letterSpacing: "0%",
color: "#703133",
transition: "all 0.7s cubic-bezier(0.25,0.46,0.45,0.94)",
}} }}
tabIndex={-1} tabIndex={-1}
onClick={() => setCurrentCategory(idx)} onClick={() => setCurrentCategory(idx)}
onMouseEnter={() => setCurrentCategory(idx)}
> >
{category} {category}
</button> </button>
@ -460,7 +513,7 @@ export default function Home() {
transition={{ duration: 0.7, ease: [0.25, 0.46, 0.45, 0.94] }} transition={{ duration: 0.7, ease: [0.25, 0.46, 0.45, 0.94] }}
className="w-full h-full object-cover rounded-2xl shadow-premium hover:shadow-premium-hover transition-all duration-500 img-premium" className="w-full h-full object-cover rounded-2xl shadow-premium hover:shadow-premium-hover transition-all duration-500 img-premium"
draggable={false} draggable={false}
style={{ maxHeight: '600px', maxWidth: '100%' }} style={{ maxHeight: "600px", maxWidth: "100%" }}
/> />
</AnimatePresence> </AnimatePresence>
</motion.div> </motion.div>
@ -476,7 +529,16 @@ export default function Home() {
variants={fadeInUp} variants={fadeInUp}
className="text-center mb-8 md:mb-12" className="text-center mb-8 md:mb-12"
> >
<h2 className="text-3xl md:text-4xl lg:text-5xl font-moneta text-[#703133] mb-6 md:mb-8 text-gradient" style={{ fontWeight: 400, fontSize: 'clamp(28px, 5vw, 48px)', lineHeight: '120%', letterSpacing: '0%', fontFamily: 'MonetaSans-Regular' }}> <h2
className="text-3xl md:text-4xl lg:text-5xl font-moneta text-[#703133] mb-6 md:mb-8 text-gradient"
style={{
fontWeight: 400,
fontSize: "clamp(28px, 5vw, 48px)",
lineHeight: "120%",
letterSpacing: "0%",
fontFamily: "MonetaSans-Regular",
}}
>
Follow us on Instagram Follow us on Instagram
</h2> </h2>
</motion.div> </motion.div>
@ -486,14 +548,14 @@ export default function Home() {
// Loading state // Loading state
<> <>
{[1, 2, 3].map((i) => ( {[1, 2, 3].map((i) => (
<motion.div <motion.div
key={i} key={i}
className="bg-white rounded-lg shadow-premium h-64 md:h-96 skeleton" className="bg-white rounded-lg shadow-premium h-64 md:h-96 skeleton"
initial={{ opacity: 0, y: 20 }} initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }} whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6, delay: i * 0.1 }} transition={{ duration: 0.6, delay: i * 0.1 }}
viewport={{ once: true }} viewport={{ once: true }}
/> />
))} ))}
</> </>
) : error ? ( ) : error ? (
@ -511,89 +573,115 @@ export default function Home() {
<div className="w-16 h-16 bg-gradient-to-br from-amber-200 to-orange-300 rounded-full mx-auto mb-4 flex items-center justify-center shadow-premium"> <div className="w-16 h-16 bg-gradient-to-br from-amber-200 to-orange-300 rounded-full mx-auto mb-4 flex items-center justify-center shadow-premium">
<span className="text-2xl">🔗</span> <span className="text-2xl">🔗</span>
</div> </div>
<h3 className="text-xl font-semibold text-[#703133] mb-2">Instagram Connection Expired</h3> <h3 className="text-xl font-semibold text-[#703133] mb-2">
<p className="text-gray-600 mb-4">Our Instagram connection needs to be refreshed. We&apos;re working on getting it back up!</p> Instagram Connection Expired
<div className="text-sm text-gray-500">In the meantime, follow us @mozimo_chocolate</div> </h3>
<p className="text-gray-600 mb-4">
Our Instagram connection needs to be refreshed. We&apos;re
working on getting it back up!
</p>
<div className="text-sm text-gray-500">
In the meantime, follow us @mozimo_chocolate
</div>
</motion.div> </motion.div>
</div> </div>
) : ( ) : (
<> <>
{/* Left Block - Chocolate Spread Jar */} {/* Left Block - Chocolate Spread Jar */}
<motion.div <motion.div
initial="initial" initial="initial"
whileInView="animate" whileInView="animate"
viewport={{ once: true, margin: "-50px" }} viewport={{ once: true, margin: "-50px" }}
variants={fadeInLeft} variants={fadeInLeft}
className="bg-white rounded-lg shadow-premium overflow-hidden hover:shadow-premium-hover transition-all duration-500 transform hover:-translate-y-2" className="bg-white rounded-lg shadow-premium overflow-hidden hover:shadow-premium-hover transition-all duration-500 transform hover:-translate-y-2"
whileHover={{ scale: 1.02 }} whileHover={{ scale: 1.02 }}
> >
<div className="relative h-64 md:h-96 bg-gradient-to-br from-amber-50 to-orange-50 flex items-center justify-center"> <div className="relative h-64 md:h-96 bg-gradient-to-br from-amber-50 to-orange-50 flex items-center justify-center">
<motion.div <motion.div
className="text-center" className="text-center"
whileHover={{ scale: 1.05 }} whileHover={{ scale: 1.05 }}
transition={{ duration: 0.3 }} transition={{ duration: 0.3 }}
> >
<div className="w-32 h-32 bg-gradient-to-br from-amber-200 to-orange-300 rounded-full mx-auto mb-4 flex items-center justify-center shadow-premium"> <div className="w-32 h-32 bg-gradient-to-br from-amber-200 to-orange-300 rounded-full mx-auto mb-4 flex items-center justify-center shadow-premium">
<span className="text-4xl">🍫</span> <span className="text-4xl">🍫</span>
</div> </div>
<div className="bg-white rounded-lg p-4 mx-4 shadow-premium"> <div className="bg-white rounded-lg p-4 mx-4 shadow-premium">
<div className="font-semibold text-[#703133] text-lg">MOZIMO</div> <div className="font-semibold text-[#703133] text-lg">
<div className="text-sm text-gray-600">SINGLE ORIGIN HAZELNUT SPREAD 45%</div> MOZIMO
</div> </div>
</motion.div> <div className="text-sm text-gray-600">
</div> SINGLE ORIGIN HAZELNUT SPREAD 45%
</motion.div> </div>
</div>
</motion.div>
</div>
</motion.div>
{/* Middle Block - Magazine Article */} {/* Middle Block - Magazine Article */}
<motion.div <motion.div
initial="initial" initial="initial"
whileInView="animate" whileInView="animate"
viewport={{ once: true, margin: "-50px" }} viewport={{ once: true, margin: "-50px" }}
variants={fadeInUp} variants={fadeInUp}
className="bg-white rounded-lg shadow-premium overflow-hidden hover:shadow-premium-hover transition-all duration-500 transform hover:-translate-y-2" className="bg-white rounded-lg shadow-premium overflow-hidden hover:shadow-premium-hover transition-all duration-500 transform hover:-translate-y-2"
whileHover={{ scale: 1.02 }} whileHover={{ scale: 1.02 }}
> >
<div className="p-4 md:p-6"> <div className="p-4 md:p-6">
<div className="bg-red-600 h-32 rounded-lg mb-4 flex items-center justify-center shadow-premium"> <div className="bg-red-600 h-32 rounded-lg mb-4 flex items-center justify-center shadow-premium">
<span className="text-white text-2xl">🍫</span> <span className="text-white text-2xl">🍫</span>
</div>
<div className="grid grid-cols-2 gap-4 mb-4">
<div className="bg-gray-200 h-20 rounded-lg flex items-center justify-center shadow-premium">
<span className="text-lg">🍰</span>
</div> </div>
<div className="bg-gray-200 h-20 rounded-lg flex items-center justify-center shadow-premium"> <div className="grid grid-cols-2 gap-4 mb-4">
<span className="text-lg">👨‍🍳</span> <div className="bg-gray-200 h-20 rounded-lg flex items-center justify-center shadow-premium">
<span className="text-lg">🍰</span>
</div>
<div className="bg-gray-200 h-20 rounded-lg flex items-center justify-center shadow-premium">
<span className="text-lg">👨‍🍳</span>
</div>
</div>
<div className="text-xs text-gray-700 space-y-2 leading-relaxed">
<p>
<strong>By RUPALI DEAN</strong>
</p>
<p>
<strong>
MOZIMO&apos;S CHOCOLATE PIE BY PRIYANKA GUPTA
</strong>
</p>
<p>
isolat[ing] beans to not only single ori- but also to
single farms so as to express unique complexity.
</p>
</div> </div>
</div> </div>
<div className="text-xs text-gray-700 space-y-2 leading-relaxed"> </motion.div>
<p><strong>By RUPALI DEAN</strong></p>
<p><strong>MOZIMO&apos;S CHOCOLATE PIE BY PRIYANKA GUPTA</strong></p>
<p>isolat[ing] beans to not only single ori- but also to single farms so as to express unique complexity.</p>
</div>
</div>
</motion.div>
{/* Right Block - World Chocolate Day */} {/* Right Block - World Chocolate Day */}
<motion.div <motion.div
initial="initial" initial="initial"
whileInView="animate" whileInView="animate"
viewport={{ once: true, margin: "-50px" }} viewport={{ once: true, margin: "-50px" }}
variants={fadeInRight} variants={fadeInRight}
className="bg-white rounded-lg shadow-premium overflow-hidden hover:shadow-premium-hover transition-all duration-500 transform hover:-translate-y-2" className="bg-white rounded-lg shadow-premium overflow-hidden hover:shadow-premium-hover transition-all duration-500 transform hover:-translate-y-2"
whileHover={{ scale: 1.02 }} whileHover={{ scale: 1.02 }}
> >
<div className="p-4 md:p-6 text-center"> <div className="p-4 md:p-6 text-center">
<div className="mb-4"> <div className="mb-4">
<h3 className="text-2xl font-bold text-[#8B4513] mb-2 text-gradient">World Chocolate Day</h3> <h3 className="text-2xl font-bold text-[#8B4513] mb-2 text-gradient">
<p className="text-gray-600">Celebrating the art of chocolate making</p> World Chocolate Day
</h3>
<p className="text-gray-600">
Celebrating the art of chocolate making
</p>
</div>
<div className="bg-gradient-to-br from-amber-100 to-orange-100 rounded-lg p-4 shadow-premium">
<div className="text-4xl mb-2">🍫</div>
<p className="text-sm text-gray-700">
Join us in celebrating the world&apos;s favorite treat
</p>
</div>
</div> </div>
<div className="bg-gradient-to-br from-amber-100 to-orange-100 rounded-lg p-4 shadow-premium"> </motion.div>
<div className="text-4xl mb-2">🍫</div> </>
<p className="text-sm text-gray-700">Join us in celebrating the world&apos;s favorite treat</p>
</div>
</div>
</motion.div>
</>
) )
) : ( ) : (
// Real Instagram posts // Real Instagram posts
@ -603,15 +691,26 @@ export default function Home() {
initial="initial" initial="initial"
whileInView="animate" whileInView="animate"
viewport={{ once: true, margin: "-50px" }} viewport={{ once: true, margin: "-50px" }}
variants={index === 0 ? fadeInLeft : index === 1 ? fadeInUp : fadeInRight} variants={
index === 0
? fadeInLeft
: index === 1
? fadeInUp
: fadeInRight
}
className="bg-white rounded-lg shadow-premium overflow-hidden hover:shadow-premium-hover transition-all duration-500 transform hover:-translate-y-2" className="bg-white rounded-lg shadow-premium overflow-hidden hover:shadow-premium-hover transition-all duration-500 transform hover:-translate-y-2"
whileHover={{ scale: 1.02 }} whileHover={{ scale: 1.02 }}
> >
<a href={post.permalink} target="_blank" rel="noopener noreferrer" className="block"> <a
href={post.permalink}
target="_blank"
rel="noopener noreferrer"
className="block"
>
<div className="relative h-64 md:h-96"> <div className="relative h-64 md:h-96">
<Image <Image
src={post.mediaUrl} src={post.mediaUrl}
alt={post.caption || 'Instagram post'} alt={post.caption || "Instagram post"}
fill fill
className="object-cover img-premium" className="object-cover img-premium"
draggable={false} draggable={false}
@ -619,16 +718,20 @@ export default function Home() {
onError={(e) => { onError={(e) => {
// Fallback to a placeholder if image fails to load // Fallback to a placeholder if image fails to load
const target = e.target as HTMLImageElement; const target = e.target as HTMLImageElement;
target.src = '/bst/bs1.svg'; target.src = "/bst/bs1.svg";
}} }}
/> />
<div className="absolute inset-0 bg-gradient-to-t from-black/30 via-transparent to-transparent" /> <div className="absolute inset-0 bg-gradient-to-t from-black/30 via-transparent to-transparent" />
{/* Video indicator */} {/* Video indicator */}
{post.mediaType === 'VIDEO' && ( {post.mediaType === "VIDEO" && (
<div className="absolute top-4 right-4 bg-black/50 rounded-full p-2"> <div className="absolute top-4 right-4 bg-black/50 rounded-full p-2">
<svg className="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 20 20"> <svg
<path d="M8 5v10l8-5-8-5z"/> className="w-4 h-4 text-white"
fill="currentColor"
viewBox="0 0 20 20"
>
<path d="M8 5v10l8-5-8-5z" />
</svg> </svg>
</div> </div>
)} )}
@ -656,46 +759,57 @@ export default function Home() {
viewport={{ once: true, margin: "-50px" }} viewport={{ once: true, margin: "-50px" }}
variants={fadeInUp} variants={fadeInUp}
className="text-3xl md:text-4xl lg:text-5xl font-moneta text-[#703133] mb-6 md:mb-8 text-center text-gradient" className="text-3xl md:text-4xl lg:text-5xl font-moneta text-[#703133] mb-6 md:mb-8 text-center text-gradient"
style={{ fontWeight: 400, fontSize: 'clamp(28px, 5vw, 48px)', lineHeight: '120%', letterSpacing: '0%', fontFamily: 'MonetaSans-Regular' }} style={{
fontWeight: 400,
fontSize: "clamp(28px, 5vw, 48px)",
lineHeight: "120%",
letterSpacing: "0%",
fontFamily: "MonetaSans-Regular",
}}
whileHover={{ scale: 1.02 }} whileHover={{ scale: 1.02 }}
transition={{ duration: 0.3 }} transition={{ duration: 0.3 }}
> >
In the Spotlight In the Spotlight
</motion.h2> </motion.h2>
<div className="w-full flex justify-center items-center overflow-hidden" style={{ minHeight: '8rem md:10rem' }}> <div
<div className="w-full max-w-[600px] overflow-hidden px-4"> className="w-full flex justify-center items-center overflow-hidden"
style={{ minHeight: "8rem md:10rem" }}
>
<div className="w-full max-w-[700px] overflow-hidden px-4">
<motion.div <motion.div
className="flex gap-8" className="flex gap-8"
animate={{ x: `-${spotlightIndex * 152}px` }} animate={{ x: `-${spotlightIndex * 152}px` }}
transition={{ type: 'spring', stiffness: 80, damping: 18 }} transition={{ type: "spring", stiffness: 80, damping: 18 }}
> >
{/* Create 12 tiles (3 sets of 4 logos) */} {/* Create 12 tiles (3 sets of 4 logos) */}
{Array(12).fill(0).map((_, i) => { {Array(12)
const imgIdx = i % partnerImages.length; .fill(0)
const img = partnerImages[imgIdx]; .map((_, i) => {
return ( const imgIdx = i % partnerImages.length;
<motion.div const img = partnerImages[imgIdx];
key={i} return (
className="w-24 h-24 md:w-32 md:h-32 lg:w-36 lg:h-36 bg-white rounded-full flex items-center justify-center shadow-premium hover:shadow-premium-hover flex-shrink-0 transition-all duration-300" <motion.div
style={{ boxShadow: '0 2px 12px 0 rgba(60,42,33,0.10)' }} key={i}
whileHover={{ className="w-24 h-24 md:w-32 md:h-32 lg:w-36 lg:h-36 bg-white rounded-full flex items-center justify-center shadow-premium hover:shadow-premium-hover flex-shrink-0 transition-all duration-300"
scale: 1.1, style={{ boxShadow: "0 2px 12px 0 rgba(60,42,33,0.10)" }}
rotate: 5, whileHover={{
transition: { duration: 0.3 } scale: 1.1,
}} rotate: 5,
> transition: { duration: 0.3 },
<Image }}
src={img} >
alt={`Partner ${imgIdx + 1}`} <Image
width={120} src={img}
height={120} alt={`Partner ${imgIdx + 1}`}
className="w-16 h-16 md:w-20 md:h-20 lg:w-20 lg:h-20 object-contain img-premium" width={120}
draggable={false} height={120}
quality={85} className="w-16 h-16 md:w-20 md:h-20 lg:w-20 lg:h-20 object-contain img-premium"
/> draggable={false}
</motion.div> quality={85}
); />
})} </motion.div>
);
})}
</motion.div> </motion.div>
</div> </div>
</div> </div>

235
src/components/Footer.tsx
View File

@ -1,6 +1,7 @@
'use client'; "use client";
import { motion } from 'framer-motion'; import { motion } from "framer-motion";
import Image from "next/image";
export default function Footer() { export default function Footer() {
return ( return (
@ -20,38 +21,31 @@ export default function Footer() {
viewport={{ once: true }} viewport={{ once: true }}
> >
{/* MOZIMO Logo */} {/* MOZIMO Logo */}
<div className="flex items-center space-x-2"> <Image
<div className="relative"> src="/logo/logo.svg"
{/* Cocoa pod icon */} alt="Mozimo Logo"
<div className="absolute -top-2 -left-1 w-4 h-4 text-[#8B4513]"> className="object-contain drop-shadow-lg"
<svg viewBox="0 0 24 24" fill="currentColor"> priority
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/> sizes="40px"
</svg> width={80}
</div> height={80}
{/* MOZIMO Text */} quality={95}
<div className="text-center"> placeholder="blur"
<div className="text-xs text-[#8B4513] font-samantha" style={{ fontFamily: 'Samantha Signature' }}> blurDataURL="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAIAAoDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAv/xAAhEAACAQMDBQAAAAAAAAAAAAABAgMABAUGIWGRkqGx0f/EABUBAQEAAAAAAAAAAAAAAAAAAAMF/8QAGhEAAgIDAAAAAAAAAAAAAAAAAAECEgMRkf/aAAwDAQACEQMRAD8AltJagyeH0AthI5xdrLcNM91BF5pX2HaH9bcfaSXWGaRmknyJckliyjqTzSlT54b6bk+h0R//2Q=="
HAND CRAFTED />
</div>
<div className="text-xl md:text-2xl font-bold text-[#703133] font-moneta" style={{ fontFamily: 'MonetaSans-Regular' }}>
MOZIMO
</div>
<div className="text-xs text-[#8B4513] font-renner">
CHOCOLATES
</div>
</div>
</div>
</div>
{/* Tagline */} {/* Tagline */}
<p className="text-sm leading-relaxed opacity-80 font-renner" style={{ <p
fontWeight: 300, className="text-sm leading-relaxed opacity-80 font-renner"
fontSize: '14px', style={{
lineHeight: '160%', fontWeight: 300,
letterSpacing: '0%', fontSize: "14px",
fontFamily: 'Renner*' lineHeight: "160%",
}}> letterSpacing: "0%",
India&apos;s Premier European style bean-to-bar chocolate experience. fontFamily: "Renner*",
}}
>
India&apos;s Premier European style bean-to-bar chocolate
experience.
</p> </p>
</motion.div> </motion.div>
@ -63,20 +57,28 @@ export default function Footer() {
transition={{ duration: 0.6, delay: 0.1 }} transition={{ duration: 0.6, delay: 0.1 }}
viewport={{ once: true }} viewport={{ once: true }}
> >
<h3 className="font-semibold text-lg font-renner" style={{ <h3
fontWeight: 600, className="font-semibold text-lg font-renner"
fontSize: '18px', style={{
lineHeight: '120%', fontWeight: 600,
letterSpacing: '0%', fontSize: "18px",
fontFamily: 'Renner*' lineHeight: "120%",
}}>Get in touch</h3> letterSpacing: "0%",
<div className="space-y-2 text-sm font-renner" style={{ fontFamily: "Renner*",
fontWeight: 300, }}
fontSize: '14px', >
lineHeight: '160%', Get in touch
letterSpacing: '0%', </h3>
fontFamily: 'Renner*' <div
}}> className="space-y-2 text-sm font-renner"
style={{
fontWeight: 300,
fontSize: "14px",
lineHeight: "160%",
letterSpacing: "0%",
fontFamily: "Renner*",
}}
>
<motion.div <motion.div
className="flex items-center space-x-2" className="flex items-center space-x-2"
initial={{ opacity: 0, x: -10 }} initial={{ opacity: 0, x: -10 }}
@ -85,7 +87,11 @@ export default function Footer() {
viewport={{ once: true }} viewport={{ once: true }}
whileHover={{ x: 5 }} whileHover={{ x: 5 }}
> >
<svg className="w-4 h-4 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20"> <svg
className="w-4 h-4 flex-shrink-0"
fill="currentColor"
viewBox="0 0 20 20"
>
<path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z" /> <path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z" />
</svg> </svg>
<span className="text-xs md:text-sm">0172-4045414</span> <span className="text-xs md:text-sm">0172-4045414</span>
@ -98,10 +104,20 @@ export default function Footer() {
viewport={{ once: true }} viewport={{ once: true }}
whileHover={{ x: 5 }} whileHover={{ x: 5 }}
> >
<svg className="w-4 h-4 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20"> <svg
<path fillRule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clipRule="evenodd" /> className="w-4 h-4 mt-0.5 flex-shrink-0"
fill="currentColor"
viewBox="0 0 20 20"
>
<path
fillRule="evenodd"
d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z"
clipRule="evenodd"
/>
</svg> </svg>
<span className="text-xs md:text-sm">SCO 8, Inner Market, 9-D, Sector 9, Chandigarh, 160009</span> <span className="text-xs md:text-sm">
SCO 8, Inner Market, 9-D, Sector 9, Chandigarh, 160009
</span>
</motion.div> </motion.div>
</div> </div>
</motion.div> </motion.div>
@ -114,21 +130,34 @@ export default function Footer() {
transition={{ duration: 0.6, delay: 0.2 }} transition={{ duration: 0.6, delay: 0.2 }}
viewport={{ once: true }} viewport={{ once: true }}
> >
<h3 className="font-semibold text-lg font-renner" style={{ <h3
fontWeight: 600, className="font-semibold text-lg font-renner"
fontSize: '18px', style={{
lineHeight: '120%', fontWeight: 600,
letterSpacing: '0%', fontSize: "18px",
fontFamily: 'Renner*' lineHeight: "120%",
}}>Know more</h3> letterSpacing: "0%",
<ul className="space-y-2 text-sm font-renner" style={{ fontFamily: "Renner*",
fontWeight: 300, }}
fontSize: '14px', >
lineHeight: '160%', Know more
letterSpacing: '0%', </h3>
fontFamily: 'Renner*' <ul
}}> className="space-y-2 text-sm font-renner"
{['Privacy Policy', 'Refund & Return Policy', 'Terms & Conditions', 'Shipping Policy'].map((link, index) => ( style={{
fontWeight: 300,
fontSize: "14px",
lineHeight: "160%",
letterSpacing: "0%",
fontFamily: "Renner*",
}}
>
{[
"Privacy Policy",
"Refund & Return Policy",
"Terms & Conditions",
"Shipping Policy",
].map((link, index) => (
<motion.li <motion.li
key={link} key={link}
initial={{ opacity: 0, x: -10 }} initial={{ opacity: 0, x: -10 }}
@ -157,14 +186,17 @@ export default function Footer() {
viewport={{ once: true }} viewport={{ once: true }}
> >
{/* Individual links */} {/* Individual links */}
<div className="space-y-2 text-sm font-renner" style={{ <div
fontWeight: 300, className="space-y-2 text-sm font-renner"
fontSize: '14px', style={{
lineHeight: '160%', fontWeight: 300,
letterSpacing: '0%', fontSize: "14px",
fontFamily: 'Renner*' lineHeight: "160%",
}}> letterSpacing: "0%",
{['FAQ', 'Locate our store', 'Bulk Ordering'].map((link, index) => ( fontFamily: "Renner*",
}}
>
{["FAQ", "Locate our store", "Bulk Ordering"].map((link, index) => (
<motion.div <motion.div
key={link} key={link}
initial={{ opacity: 0, x: -10 }} initial={{ opacity: 0, x: -10 }}
@ -185,13 +217,18 @@ export default function Footer() {
{/* Find Us On */} {/* Find Us On */}
<div className="pt-4"> <div className="pt-4">
<h3 className="font-semibold text-lg font-renner mb-3" style={{ <h3
fontWeight: 600, className="font-semibold text-lg font-renner mb-3"
fontSize: '18px', style={{
lineHeight: '120%', fontWeight: 600,
letterSpacing: '0%', fontSize: "18px",
fontFamily: 'Renner*' lineHeight: "120%",
}}>Find Us On</h3> letterSpacing: "0%",
fontFamily: "Renner*",
}}
>
Find Us On
</h3>
<div className="flex space-x-3 md:space-x-4"> <div className="flex space-x-3 md:space-x-4">
{/* Facebook */} {/* Facebook */}
<motion.a <motion.a
@ -205,7 +242,11 @@ export default function Footer() {
whileTap={{ scale: 0.9 }} whileTap={{ scale: 0.9 }}
aria-label="Facebook" aria-label="Facebook"
> >
<svg className="w-5 h-5 md:w-6 md:h-6" fill="currentColor" viewBox="0 0 24 24"> <svg
className="w-5 h-5 md:w-6 md:h-6"
fill="currentColor"
viewBox="0 0 24 24"
>
<path d="M22.675 0h-21.35C.595 0 0 .592 0 1.326v21.348C0 23.408.595 24 1.325 24h11.495v-9.294H9.692v-3.622h3.128V8.413c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.463.099 2.797.143v3.24l-1.918.001c-1.504 0-1.797.715-1.797 1.763v2.313h3.587l-.467 3.622h-3.12V24h6.116C23.406 24 24 23.408 24 22.674V1.326C24 .592 23.406 0 22.675 0" /> <path d="M22.675 0h-21.35C.595 0 0 .592 0 1.326v21.348C0 23.408.595 24 1.325 24h11.495v-9.294H9.692v-3.622h3.128V8.413c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.463.099 2.797.143v3.24l-1.918.001c-1.504 0-1.797.715-1.797 1.763v2.313h3.587l-.467 3.622h-3.12V24h6.116C23.406 24 24 23.408 24 22.674V1.326C24 .592 23.406 0 22.675 0" />
</svg> </svg>
</motion.a> </motion.a>
@ -221,7 +262,11 @@ export default function Footer() {
whileTap={{ scale: 0.9 }} whileTap={{ scale: 0.9 }}
aria-label="Instagram" aria-label="Instagram"
> >
<svg className="w-5 h-5 md:w-6 md:h-6" fill="currentColor" viewBox="0 0 24 24"> <svg
className="w-5 h-5 md:w-6 md:h-6"
fill="currentColor"
viewBox="0 0 24 24"
>
<path d="M12 2.163c3.204 0 3.584.012 4.85.07 1.366.062 2.633.334 3.608 1.308.974.974 1.246 2.241 1.308 3.608.058 1.266.069 1.646.069 4.85s-.012 3.584-.07 4.85c-.062 1.366-.334 2.633-1.308 3.608-.974.974-2.241 1.246-3.608 1.308-1.266.058-1.646.069-4.85.069s-3.584-.012-4.85-.07c-1.366-.062-2.633-.334-3.608-1.308-.974-.974-1.246-2.241-1.308-3.608C2.175 15.647 2.163 15.267 2.163 12s.012-3.584.07-4.85c.062-1.366.334-2.633 1.308-3.608C4.515 2.567 5.782 2.295 7.148 2.233 8.414 2.175 8.794 2.163 12 2.163zm0-2.163C8.741 0 8.332.012 7.052.07 5.771.128 4.659.334 3.678 1.315c-.98.98-1.187 2.092-1.245 3.373C2.012 5.668 2 6.077 2 12c0 5.923.012 6.332.07 7.612.058 1.281.265 2.393 1.245 3.373.98.98 2.092 1.187 3.373 1.245C8.332 23.988 8.741 24 12 24s3.668-.012 4.948-.07c1.281-.058 2.393-.265 3.373-1.245.98-.98 1.187-2.092 1.245-3.373.058-1.28.07-1.689.07-7.612 0-5.923-.012-6.332-.07-7.612-.058-1.281-.265-2.393-1.245-3.373-.98-.98-2.092-1.187-3.373-1.245C15.668.012 15.259 0 12 0zm0 5.838a6.162 6.162 0 1 0 0 12.324 6.162 6.162 0 0 0 0-12.324zm0 10.162a3.999 3.999 0 1 1 0-7.998 3.999 3.999 0 0 1 0 7.998zm6.406-11.845a1.44 1.44 0 1 0 0 2.88 1.44 1.44 0 0 0 0-2.88z" /> <path d="M12 2.163c3.204 0 3.584.012 4.85.07 1.366.062 2.633.334 3.608 1.308.974.974 1.246 2.241 1.308 3.608.058 1.266.069 1.646.069 4.85s-.012 3.584-.07 4.85c-.062 1.366-.334 2.633-1.308 3.608-.974.974-2.241 1.246-3.608 1.308-1.266.058-1.646.069-4.85.069s-3.584-.012-4.85-.07c-1.366-.062-2.633-.334-3.608-1.308-.974-.974-1.246-2.241-1.308-3.608C2.175 15.647 2.163 15.267 2.163 12s.012-3.584.07-4.85c.062-1.366.334-2.633 1.308-3.608C4.515 2.567 5.782 2.295 7.148 2.233 8.414 2.175 8.794 2.163 12 2.163zm0-2.163C8.741 0 8.332.012 7.052.07 5.771.128 4.659.334 3.678 1.315c-.98.98-1.187 2.092-1.245 3.373C2.012 5.668 2 6.077 2 12c0 5.923.012 6.332.07 7.612.058 1.281.265 2.393 1.245 3.373.98.98 2.092 1.187 3.373 1.245C8.332 23.988 8.741 24 12 24s3.668-.012 4.948-.07c1.281-.058 2.393-.265 3.373-1.245.98-.98 1.187-2.092 1.245-3.373.058-1.28.07-1.689.07-7.612 0-5.923-.012-6.332-.07-7.612-.058-1.281-.265-2.393-1.245-3.373-.98-.98-2.092-1.187-3.373-1.245C15.668.012 15.259 0 12 0zm0 5.838a6.162 6.162 0 1 0 0 12.324 6.162 6.162 0 0 0 0-12.324zm0 10.162a3.999 3.999 0 1 1 0-7.998 3.999 3.999 0 0 1 0 7.998zm6.406-11.845a1.44 1.44 0 1 0 0 2.88 1.44 1.44 0 0 0 0-2.88z" />
</svg> </svg>
</motion.a> </motion.a>
@ -237,7 +282,11 @@ export default function Footer() {
whileTap={{ scale: 0.9 }} whileTap={{ scale: 0.9 }}
aria-label="YouTube" aria-label="YouTube"
> >
<svg className="w-5 h-5 md:w-6 md:h-6" fill="currentColor" viewBox="0 0 24 24"> <svg
className="w-5 h-5 md:w-6 md:h-6"
fill="currentColor"
viewBox="0 0 24 24"
>
<path d="M23.498 6.186a2.994 2.994 0 0 0-2.107-2.117C19.163 3.5 12 3.5 12 3.5s-7.163 0-9.391.569A2.994 2.994 0 0 0 .502 6.186C0 8.413 0 12 0 12s0 3.587.502 5.814a2.994 2.994 0 0 0 2.107 2.117C4.837 20.5 12 20.5 12 20.5s7.163 0 9.391-.569a2.994 2.994 0 0 0 2.107-2.117C24 15.587 24 12 24 12s0-3.587-.502-5.814zM9.545 15.568V8.432l6.545 3.568-6.545 3.568z" /> <path d="M23.498 6.186a2.994 2.994 0 0 0-2.107-2.117C19.163 3.5 12 3.5 12 3.5s-7.163 0-9.391.569A2.994 2.994 0 0 0 .502 6.186C0 8.413 0 12 0 12s0 3.587.502 5.814a2.994 2.994 0 0 0 2.107 2.117C4.837 20.5 12 20.5 12 20.5s7.163 0 9.391-.569a2.994 2.994 0 0 0 2.107-2.117C24 15.587 24 12 24 12s0-3.587-.502-5.814zM9.545 15.568V8.432l6.545 3.568-6.545 3.568z" />
</svg> </svg>
</motion.a> </motion.a>
@ -253,7 +302,11 @@ export default function Footer() {
whileTap={{ scale: 0.9 }} whileTap={{ scale: 0.9 }}
aria-label="LinkedIn" aria-label="LinkedIn"
> >
<svg className="w-5 h-5 md:w-6 md:h-6" fill="currentColor" viewBox="0 0 24 24"> <svg
className="w-5 h-5 md:w-6 md:h-6"
fill="currentColor"
viewBox="0 0 24 24"
>
<path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.761 0 5-2.239 5-5v-14c0-2.761-2.239-5-5-5zm-11 19h-3v-10h3v10zm-1.5-11.268c-.966 0-1.75-.784-1.75-1.75s.784-1.75 1.75-1.75 1.75.784 1.75 1.75-.784 1.75-1.75 1.75zm15.5 11.268h-3v-5.604c0-1.337-.025-3.063-1.868-3.063-1.868 0-2.154 1.459-2.154 2.967v5.7h-3v-10h2.881v1.367h.041c.401-.761 1.381-1.563 2.841-1.563 3.039 0 3.6 2.001 3.6 4.601v5.595z" /> <path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.761 0 5-2.239 5-5v-14c0-2.761-2.239-5-5-5zm-11 19h-3v-10h3v10zm-1.5-11.268c-.966 0-1.75-.784-1.75-1.75s.784-1.75 1.75-1.75 1.75.784 1.75 1.75-.784 1.75-1.75 1.75zm15.5 11.268h-3v-5.604c0-1.337-.025-3.063-1.868-3.063-1.868 0-2.154 1.459-2.154 2.967v5.7h-3v-10h2.881v1.367h.041c.401-.761 1.381-1.563 2.841-1.563 3.039 0 3.6 2.001 3.6 4.601v5.595z" />
</svg> </svg>
</motion.a> </motion.a>
@ -267,17 +320,19 @@ export default function Footer() {
className="border-t border-[#e5e5e5] mt-6 md:mt-8 pt-6 md:pt-8 text-center text-sm font-renner relative z-10" className="border-t border-[#e5e5e5] mt-6 md:mt-8 pt-6 md:pt-8 text-center text-sm font-renner relative z-10"
style={{ style={{
fontWeight: 300, fontWeight: 300,
fontSize: '14px', fontSize: "14px",
lineHeight: '160%', lineHeight: "160%",
letterSpacing: '0%', letterSpacing: "0%",
fontFamily: 'Renner*' fontFamily: "Renner*",
}} }}
initial={{ opacity: 0 }} initial={{ opacity: 0 }}
whileInView={{ opacity: 1 }} whileInView={{ opacity: 1 }}
transition={{ duration: 0.6, delay: 0.4 }} transition={{ duration: 0.6, delay: 0.4 }}
viewport={{ once: true }} viewport={{ once: true }}
> >
<p className="text-xs md:text-sm">&copy; 2024 Mozimo. All rights reserved.</p> <p className="text-xs md:text-sm">
&copy; 2024 Mozimo. All rights reserved.
</p>
</motion.div> </motion.div>
</footer> </footer>
); );

204
src/components/Header.tsx
View File

@ -1,8 +1,8 @@
'use client'; "use client";
import { motion, AnimatePresence } from 'framer-motion'; import { motion, AnimatePresence } from "framer-motion";
import Image from 'next/image'; import Image from "next/image";
import { useState, useEffect } from 'react'; import { useState, useEffect } from "react";
export default function Header() { export default function Header() {
const [isScrolled, setIsScrolled] = useState(false); const [isScrolled, setIsScrolled] = useState(false);
@ -14,38 +14,41 @@ export default function Header() {
setIsScrolled(scrollPosition > 100); setIsScrolled(scrollPosition > 100);
}; };
window.addEventListener('scroll', handleScroll); window.addEventListener("scroll", handleScroll);
return () => window.removeEventListener('scroll', handleScroll); return () => window.removeEventListener("scroll", handleScroll);
}, []); }, []);
// Close mobile menu when clicking outside // Close mobile menu when clicking outside
useEffect(() => { useEffect(() => {
const handleClickOutside = (event: MouseEvent) => { const handleClickOutside = (event: MouseEvent) => {
const target = event.target as Element; const target = event.target as Element;
if (!target.closest('.mobile-menu') && !target.closest('.hamburger-button')) { if (
!target.closest(".mobile-menu") &&
!target.closest(".hamburger-button")
) {
setIsMobileMenuOpen(false); setIsMobileMenuOpen(false);
} }
}; };
if (isMobileMenuOpen) { if (isMobileMenuOpen) {
document.addEventListener('click', handleClickOutside); document.addEventListener("click", handleClickOutside);
} }
return () => { return () => {
document.removeEventListener('click', handleClickOutside); document.removeEventListener("click", handleClickOutside);
}; };
}, [isMobileMenuOpen]); }, [isMobileMenuOpen]);
// Prevent body scroll when mobile menu is open // Prevent body scroll when mobile menu is open
useEffect(() => { useEffect(() => {
if (isMobileMenuOpen) { if (isMobileMenuOpen) {
document.body.style.overflow = 'hidden'; document.body.style.overflow = "hidden";
} else { } else {
document.body.style.overflow = 'unset'; document.body.style.overflow = "unset";
} }
return () => { return () => {
document.body.style.overflow = 'unset'; document.body.style.overflow = "unset";
}; };
}, [isMobileMenuOpen]); }, [isMobileMenuOpen]);
@ -60,20 +63,20 @@ export default function Header() {
className="fixed top-0 z-[60] w-full md:hidden" className="fixed top-0 z-[60] w-full md:hidden"
initial={false} initial={false}
animate={{ animate={{
width: '100%', width: "100%",
left: '0%', left: "0%",
x: '0%', x: "0%",
top: isScrolled ? '0px' : '12px', top: isScrolled ? "0px" : "12px",
borderRadius: '0px', borderRadius: "0px",
height: isScrolled ? '64px' : '60px', height: isScrolled ? "64px" : "60px",
}} }}
transition={{ transition={{
duration: 0.5, duration: 0.5,
ease: [0.25, 0.46, 0.45, 0.94] ease: [0.25, 0.46, 0.45, 0.94],
}} }}
> >
<nav <nav
className={`glass border border-white/20 shadow-premium w-full h-full flex justify-between items-center rounded-none`} className={`bg-white border border-white/20 shadow-premium w-full h-full flex justify-between items-center rounded-none`}
> >
<div className="flex justify-between items-center w-full px-4"> <div className="flex justify-between items-center w-full px-4">
{/* Mobile Hamburger Menu */} {/* Mobile Hamburger Menu */}
@ -124,7 +127,7 @@ export default function Header() {
whileHover={{ whileHover={{
scale: 1.15, scale: 1.15,
rotate: 5, rotate: 5,
transition: { duration: 0.3 } transition: { duration: 0.3 },
}} }}
> >
<Image <Image
@ -152,21 +155,21 @@ export default function Header() {
className="fixed top-0 z-50 hidden md:block" className="fixed top-0 z-50 hidden md:block"
initial={false} initial={false}
animate={{ animate={{
width: isScrolled ? '100%' : '1440px', width: isScrolled ? "100%" : "1440px",
left: isScrolled ? '0%' : '50%', left: isScrolled ? "0%" : "50%",
x: isScrolled ? '0%' : '-50%', x: isScrolled ? "0%" : "-50%",
top: isScrolled ? '0px' : '24px', top: isScrolled ? "0px" : "24px",
borderRadius: isScrolled ? '0px' : '15px', borderRadius: isScrolled ? "0px" : "15px",
height: isScrolled ? '64px' : '80px', height: isScrolled ? "64px" : "80px",
}} }}
transition={{ transition={{
duration: 0.5, duration: 0.5,
ease: [0.25, 0.46, 0.45, 0.94] ease: [0.25, 0.46, 0.45, 0.94],
}} }}
> >
<nav <nav
className={`glass border border-white/20 shadow-premium w-full h-full flex justify-between items-center ${ className={`bg-white border border-white/20 shadow-premium w-full h-full flex justify-between items-center ${
isScrolled ? 'rounded-none' : 'rounded-[15px]' isScrolled ? "rounded-none" : "rounded-[15px]"
}`} }`}
> >
<div className="flex justify-between items-center w-full px-20"> <div className="flex justify-between items-center w-full px-20">
@ -177,10 +180,10 @@ export default function Header() {
className="text-gray-800 hover:text-[#8B4513] transition-all duration-300 font-renner relative group" className="text-gray-800 hover:text-[#8B4513] transition-all duration-300 font-renner relative group"
style={{ style={{
fontWeight: 100, fontWeight: 100,
fontFamily: 'Renner', fontFamily: "Renner",
fontSize: '18px', fontSize: "18px",
lineHeight: '100%', lineHeight: "100%",
letterSpacing: '0%' letterSpacing: "0%",
}} }}
whileHover={{ scale: 1.02 }} whileHover={{ scale: 1.02 }}
> >
@ -192,10 +195,10 @@ export default function Header() {
className="text-gray-800 hover:text-[#8B4513] transition-all duration-300 font-renner relative group" className="text-gray-800 hover:text-[#8B4513] transition-all duration-300 font-renner relative group"
style={{ style={{
fontWeight: 100, fontWeight: 100,
fontFamily: 'Renner', fontFamily: "Renner",
fontSize: '18px', fontSize: "18px",
lineHeight: '100%', lineHeight: "100%",
letterSpacing: '0%' letterSpacing: "0%",
}} }}
whileHover={{ scale: 1.02 }} whileHover={{ scale: 1.02 }}
> >
@ -220,7 +223,7 @@ export default function Header() {
whileHover={{ whileHover={{
scale: 1.15, scale: 1.15,
rotate: 5, rotate: 5,
transition: { duration: 0.3 } transition: { duration: 0.3 },
}} }}
> >
<Image <Image
@ -244,10 +247,10 @@ export default function Header() {
className="flex items-center space-x-1 text-gray-800 hover:text-[#8B4513] transition-all duration-300 font-renner relative group" className="flex items-center space-x-1 text-gray-800 hover:text-[#8B4513] transition-all duration-300 font-renner relative group"
style={{ style={{
fontWeight: 100, fontWeight: 100,
fontFamily: 'Renner', fontFamily: "Renner",
fontSize: '18px', fontSize: "18px",
lineHeight: '100%', lineHeight: "100%",
letterSpacing: '0%' letterSpacing: "0%",
}} }}
whileHover={{ scale: 1.02 }} whileHover={{ scale: 1.02 }}
aria-label="More options" aria-label="More options"
@ -262,7 +265,12 @@ export default function Header() {
whileHover={{ rotate: 180 }} whileHover={{ rotate: 180 }}
transition={{ duration: 0.3 }} transition={{ duration: 0.3 }}
> >
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" /> <path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M19 9l-7 7-7-7"
/>
</motion.svg> </motion.svg>
</motion.button> </motion.button>
@ -272,8 +280,18 @@ export default function Header() {
whileTap={{ scale: 0.95 }} whileTap={{ scale: 0.95 }}
aria-label="User account" aria-label="User account"
> >
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" /> className="w-5 h-5"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
/>
</svg> </svg>
</motion.button> </motion.button>
<motion.button <motion.button
@ -282,8 +300,18 @@ export default function Header() {
whileTap={{ scale: 0.95 }} whileTap={{ scale: 0.95 }}
aria-label="Search" aria-label="Search"
> >
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /> className="w-5 h-5"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
/>
</svg> </svg>
</motion.button> </motion.button>
<motion.button <motion.button
@ -292,8 +320,18 @@ export default function Header() {
whileTap={{ scale: 0.95 }} whileTap={{ scale: 0.95 }}
aria-label="Shopping bag" aria-label="Shopping bag"
> >
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" /> className="w-5 h-5"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"
/>
</svg> </svg>
</motion.button> </motion.button>
</div> </div>
@ -326,10 +364,10 @@ export default function Header() {
className="block text-lg font-renner text-gray-800 hover:text-[#8B4513] transition-all duration-300 py-3 border-b border-gray-100" className="block text-lg font-renner text-gray-800 hover:text-[#8B4513] transition-all duration-300 py-3 border-b border-gray-100"
style={{ style={{
fontWeight: 300, fontWeight: 300,
fontFamily: 'Renner', fontFamily: "Renner",
fontSize: '18px', fontSize: "18px",
lineHeight: '100%', lineHeight: "100%",
letterSpacing: '0%' letterSpacing: "0%",
}} }}
onClick={() => setIsMobileMenuOpen(false)} onClick={() => setIsMobileMenuOpen(false)}
whileHover={{ x: 10 }} whileHover={{ x: 10 }}
@ -341,10 +379,10 @@ export default function Header() {
className="block text-lg font-renner text-gray-800 hover:text-[#8B4513] transition-all duration-300 py-3 border-b border-gray-100" className="block text-lg font-renner text-gray-800 hover:text-[#8B4513] transition-all duration-300 py-3 border-b border-gray-100"
style={{ style={{
fontWeight: 300, fontWeight: 300,
fontFamily: 'Renner', fontFamily: "Renner",
fontSize: '18px', fontSize: "18px",
lineHeight: '100%', lineHeight: "100%",
letterSpacing: '0%' letterSpacing: "0%",
}} }}
onClick={() => setIsMobileMenuOpen(false)} onClick={() => setIsMobileMenuOpen(false)}
whileHover={{ x: 10 }} whileHover={{ x: 10 }}
@ -356,10 +394,10 @@ export default function Header() {
className="block text-lg font-renner text-gray-800 hover:text-[#8B4513] transition-all duration-300 py-3 border-b border-gray-100" className="block text-lg font-renner text-gray-800 hover:text-[#8B4513] transition-all duration-300 py-3 border-b border-gray-100"
style={{ style={{
fontWeight: 300, fontWeight: 300,
fontFamily: 'Renner', fontFamily: "Renner",
fontSize: '18px', fontSize: "18px",
lineHeight: '100%', lineHeight: "100%",
letterSpacing: '0%' letterSpacing: "0%",
}} }}
onClick={() => setIsMobileMenuOpen(false)} onClick={() => setIsMobileMenuOpen(false)}
whileHover={{ x: 10 }} whileHover={{ x: 10 }}
@ -376,8 +414,18 @@ export default function Header() {
whileTap={{ scale: 0.95 }} whileTap={{ scale: 0.95 }}
aria-label="Search" aria-label="Search"
> >
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /> className="w-5 h-5"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
/>
</svg> </svg>
</motion.button> </motion.button>
<motion.button <motion.button
@ -386,8 +434,18 @@ export default function Header() {
whileTap={{ scale: 0.95 }} whileTap={{ scale: 0.95 }}
aria-label="Shopping bag" aria-label="Shopping bag"
> >
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" /> className="w-5 h-5"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"
/>
</svg> </svg>
</motion.button> </motion.button>
<motion.button <motion.button
@ -396,8 +454,18 @@ export default function Header() {
whileTap={{ scale: 0.95 }} whileTap={{ scale: 0.95 }}
aria-label="User account" aria-label="User account"
> >
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" /> className="w-5 h-5"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
/>
</svg> </svg>
</motion.button> </motion.button>
</div> </div>