responsive changes
This commit is contained in:
bharti
@ -460,3 +460,10 @@ html {
|
|||||||
maximum-scale: 5;
|
maximum-scale: 5;
|
||||||
user-scalable: yes;
|
user-scalable: yes;
|
||||||
}
|
}
|
||||||
|
.no-scrollbar::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.no-scrollbar {
|
||||||
|
-ms-overflow-style: none; /* IE and Edge */
|
||||||
|
scrollbar-width: none; /* Firefox */
|
||||||
|
}
|
||||||
|
|||||||
@ -140,7 +140,7 @@ export default function Home() {
|
|||||||
whileInView="animate"
|
whileInView="animate"
|
||||||
viewport={{ once: true, margin: "-50px" }}
|
viewport={{ once: true, margin: "-50px" }}
|
||||||
variants={fadeInLeft}
|
variants={fadeInLeft}
|
||||||
className="space-y-6 md:space-y-8 order-2 lg:order-1"
|
className="space-y-6 md:space-y-8 order-2 lg:order-1 px-4 md:px-0" // ← Added mobile padding
|
||||||
>
|
>
|
||||||
<motion.h2
|
<motion.h2
|
||||||
className="text-3xl md:text-4xl lg:text-5xl font-bold text-[#3C2A21] font-moneta text-gradient"
|
className="text-3xl md:text-4xl lg:text-5xl font-bold text-[#3C2A21] font-moneta text-gradient"
|
||||||
@ -215,10 +215,10 @@ export default function Home() {
|
|||||||
whileInView="animate"
|
whileInView="animate"
|
||||||
viewport={{ once: true, margin: "-50px" }}
|
viewport={{ once: true, margin: "-50px" }}
|
||||||
variants={fadeInRight}
|
variants={fadeInRight}
|
||||||
className="relative order-1 lg:order-2"
|
className="relative order-1 lg:order-2 w-screen md:w-auto -mx-4 md:mx-0" // ← Made full-width on mobile
|
||||||
>
|
>
|
||||||
<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"
|
className="relative w-full h-[300px] md:h-[400px] lg:h-[500px] rounded-none md:rounded-xl overflow-hidden shadow-premium hover:shadow-premium-hover transition-all duration-500" // ← Removed rounded corners on mobile
|
||||||
whileHover={{
|
whileHover={{
|
||||||
scale: 1.02,
|
scale: 1.02,
|
||||||
transition: { duration: 0.3 },
|
transition: { duration: 0.3 },
|
||||||
@ -258,10 +258,10 @@ export default function Home() {
|
|||||||
whileInView="animate"
|
whileInView="animate"
|
||||||
viewport={{ once: true, margin: "-50px" }}
|
viewport={{ once: true, margin: "-50px" }}
|
||||||
variants={fadeInLeft}
|
variants={fadeInLeft}
|
||||||
className="relative order-1 lg:order-1"
|
className="relative order-1 lg:order-1 w-screen md:w-auto -mx-4 md:mx-0" // ← Added for mobile edge-to-edge
|
||||||
>
|
>
|
||||||
<motion.div
|
<motion.div
|
||||||
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-none md:rounded-xl overflow-hidden shadow-premium hover:shadow-premium-hover transition-all duration-500" // ← Changed to rounded-none for mobile
|
||||||
whileHover={{
|
whileHover={{
|
||||||
scale: 1.02,
|
scale: 1.02,
|
||||||
transition: { duration: 0.3 },
|
transition: { duration: 0.3 },
|
||||||
@ -289,7 +289,7 @@ export default function Home() {
|
|||||||
whileInView="animate"
|
whileInView="animate"
|
||||||
viewport={{ once: true, margin: "-50px" }}
|
viewport={{ once: true, margin: "-50px" }}
|
||||||
variants={fadeInRight}
|
variants={fadeInRight}
|
||||||
className="space-y-4 md:space-y-6 order-2 lg:order-2"
|
className="space-y-4 md:space-y-6 order-2 lg:order-2 px-4 md:px-0" // ← Added px-4 for mobile padding
|
||||||
>
|
>
|
||||||
<div className="space-y-3 md:space-y-4">
|
<div className="space-y-3 md:space-y-4">
|
||||||
<motion.h2
|
<motion.h2
|
||||||
@ -379,7 +379,7 @@ export default function Home() {
|
|||||||
</motion.h2>
|
</motion.h2>
|
||||||
|
|
||||||
<motion.div
|
<motion.div
|
||||||
className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8"
|
className="flex overflow-x-auto no-scrollbar snap-x snap-mandatory gap-4 px-4 sm:px-0 sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:gap-6 md:gap-8"
|
||||||
variants={staggerContainer}
|
variants={staggerContainer}
|
||||||
initial="initial"
|
initial="initial"
|
||||||
whileInView="animate"
|
whileInView="animate"
|
||||||
@ -405,12 +405,12 @@ export default function Home() {
|
|||||||
<motion.div
|
<motion.div
|
||||||
key={item.title}
|
key={item.title}
|
||||||
variants={fadeInUp}
|
variants={fadeInUp}
|
||||||
className="group flex flex-col items-center justify-end transition-all duration-500 hover:-translate-y-2"
|
className="snap-start w-[calc(50%)] flex-shrink-0 sm:w-auto sm:flex-shrink sm:min-w-0 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" }}
|
// style={{ minHeight: "480px" }}
|
||||||
>
|
>
|
||||||
<Image
|
<Image
|
||||||
src={item.src}
|
src={item.src}
|
||||||
@ -454,9 +454,9 @@ export default function Home() {
|
|||||||
whileInView="animate"
|
whileInView="animate"
|
||||||
viewport={{ once: true, margin: "-50px" }}
|
viewport={{ once: true, margin: "-50px" }}
|
||||||
variants={fadeInLeft}
|
variants={fadeInLeft}
|
||||||
className="flex flex-col justify-center h-full bg-white px-4 md:px-8 py-8 md:py-12 order-2 lg:order-1"
|
className="flex flex-col justify-center h-full bg-white px-4 md:px-8 py-6 md:py-12 order-2 lg:order-1"
|
||||||
>
|
>
|
||||||
<ul className="space-y-2 md:space-y-4">
|
<ul className="space-y-4 md:space-y-6">
|
||||||
{categories.map((category, idx) => (
|
{categories.map((category, idx) => (
|
||||||
<motion.li
|
<motion.li
|
||||||
key={category}
|
key={category}
|
||||||
@ -466,41 +466,53 @@ export default function Home() {
|
|||||||
viewport={{ once: true }}
|
viewport={{ once: true }}
|
||||||
>
|
>
|
||||||
<button
|
<button
|
||||||
className={`transition-all duration-700 ease-out text-left w-full font-moneta text-[#703133] hover:scale-105 ${
|
className={`group flex items-center gap-4 transition-all duration-700 ease-out w-full text-left font-moneta hover:scale-105
|
||||||
idx === currentCategory
|
${
|
||||||
? "text-3xl md:text-5xl lg:text-7xl font-normal"
|
idx === currentCategory
|
||||||
: "text-2xl md:text-4xl lg:text-5xl font-light opacity-60"
|
? "text-[#703133] font-normal"
|
||||||
}`}
|
: "text-[#703133] opacity-60 font-light"
|
||||||
|
}
|
||||||
|
`}
|
||||||
style={{
|
style={{
|
||||||
fontFamily: "MonetaSans-Regular",
|
fontFamily: "MonetaSans-Regular",
|
||||||
fontWeight: idx === currentCategory ? 400 : 300,
|
fontWeight: idx === currentCategory ? 400 : 300,
|
||||||
fontSize:
|
fontSize:
|
||||||
idx === currentCategory
|
idx === currentCategory
|
||||||
? "clamp(32px, 6vw, 72px)"
|
? "clamp(22px, 5vw, 64px)"
|
||||||
: "clamp(24px, 4vw, 56px)",
|
: "clamp(18px, 4vw, 56px)",
|
||||||
lineHeight: "120%",
|
lineHeight: "120%",
|
||||||
letterSpacing: "0%",
|
letterSpacing: "0%",
|
||||||
color: "#703133",
|
|
||||||
transition: "all 0.7s cubic-bezier(0.25,0.46,0.45,0.94)",
|
transition: "all 0.7s cubic-bezier(0.25,0.46,0.45,0.94)",
|
||||||
}}
|
}}
|
||||||
tabIndex={-1}
|
|
||||||
onClick={() => setCurrentCategory(idx)}
|
onClick={() => setCurrentCategory(idx)}
|
||||||
onMouseEnter={() => setCurrentCategory(idx)}
|
onMouseEnter={() => setCurrentCategory(idx)}
|
||||||
|
tabIndex={-1}
|
||||||
>
|
>
|
||||||
{category}
|
{/* Show only on mobile */}
|
||||||
|
<div className="block lg:hidden w-10 h-10 rounded-full overflow-hidden shrink-0">
|
||||||
|
<img
|
||||||
|
src={categoryImages[idx]}
|
||||||
|
alt={category}
|
||||||
|
className="w-full h-full object-cover"
|
||||||
|
draggable={false}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Category name */}
|
||||||
|
<span className="text-left">{category}</span>
|
||||||
</button>
|
</button>
|
||||||
</motion.li>
|
</motion.li>
|
||||||
))}
|
))}
|
||||||
</ul>
|
</ul>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
|
|
||||||
{/* Right Column - Category Image */}
|
{/* Right Column - Large Category Image (desktop only) */}
|
||||||
<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="relative flex items-center justify-center h-full min-h-[300px] md:min-h-[400px] bg-white order-1 lg:order-2"
|
className="relative hidden lg:flex items-center justify-center h-full min-h-[300px] md:min-h-[400px] bg-white order-1 lg:order-2"
|
||||||
>
|
>
|
||||||
<AnimatePresence mode="wait">
|
<AnimatePresence mode="wait">
|
||||||
<motion.img
|
<motion.img
|
||||||
@ -543,14 +555,13 @@ export default function Home() {
|
|||||||
</h2>
|
</h2>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8 max-w-7xl mx-auto">
|
<div className="flex overflow-x-auto no-scrollbar snap-x snap-mandatory gap-4 px-4 sm:grid sm:grid-cols-2 lg:grid-cols-3 sm:gap-6 md:gap-8 max-w-7xl mx-auto">
|
||||||
{loading ? (
|
{loading ? (
|
||||||
// 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 snap-start w-[calc(80vw-1rem)] flex-shrink-0 sm:w-auto"
|
||||||
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 }}
|
||||||
@ -559,10 +570,8 @@ export default function Home() {
|
|||||||
))}
|
))}
|
||||||
</>
|
</>
|
||||||
) : error ? (
|
) : error ? (
|
||||||
// Error state - fallback to static content
|
|
||||||
isTokenExpired ? (
|
isTokenExpired ? (
|
||||||
// Token expired state
|
<div className="col-span-full text-center py-12 sm:col-span-2 lg:col-span-3">
|
||||||
<div className="col-span-full text-center py-12">
|
|
||||||
<motion.div
|
<motion.div
|
||||||
initial={{ opacity: 0, y: 20 }}
|
initial={{ opacity: 0, y: 20 }}
|
||||||
whileInView={{ opacity: 1, y: 0 }}
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
@ -593,7 +602,7 @@ export default function Home() {
|
|||||||
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 snap-start w-[calc(80vw-1rem)] flex-shrink-0 sm:w-auto"
|
||||||
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">
|
||||||
@ -623,7 +632,7 @@ export default function Home() {
|
|||||||
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 snap-start w-[calc(80vw-1rem)] flex-shrink-0 sm:w-auto"
|
||||||
whileHover={{ scale: 1.02 }}
|
whileHover={{ scale: 1.02 }}
|
||||||
>
|
>
|
||||||
<div className="p-4 md:p-6">
|
<div className="p-4 md:p-6">
|
||||||
@ -661,7 +670,7 @@ export default function Home() {
|
|||||||
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 snap-start w-[calc(80vw-1rem)] flex-shrink-0 sm:w-auto"
|
||||||
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">
|
||||||
@ -684,7 +693,6 @@ export default function Home() {
|
|||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
) : (
|
) : (
|
||||||
// Real Instagram posts
|
|
||||||
posts?.slice(0, 3).map((post, index) => (
|
posts?.slice(0, 3).map((post, index) => (
|
||||||
<motion.div
|
<motion.div
|
||||||
key={post.id}
|
key={post.id}
|
||||||
@ -698,7 +706,7 @@ export default function Home() {
|
|||||||
? fadeInUp
|
? fadeInUp
|
||||||
: fadeInRight
|
: fadeInRight
|
||||||
}
|
}
|
||||||
className="bg-white rounded-lg shadow-premium overflow-hidden hover:shadow-premium-hover transition-all duration-500 transform hover:-translate-y-2"
|
className="snap-start w-[calc(80vw-1rem)] flex-shrink-0 sm:w-auto 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
|
<a
|
||||||
@ -716,14 +724,11 @@ export default function Home() {
|
|||||||
draggable={false}
|
draggable={false}
|
||||||
quality={85}
|
quality={85}
|
||||||
onError={(e) => {
|
onError={(e) => {
|
||||||
// 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 */}
|
|
||||||
{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
|
<svg
|
||||||
@ -735,7 +740,6 @@ export default function Home() {
|
|||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<div className="absolute bottom-4 left-4 right-4">
|
<div className="absolute bottom-4 left-4 right-4">
|
||||||
<div className="glass rounded-lg p-3 border border-white/20">
|
<div className="glass rounded-lg p-3 border border-white/20">
|
||||||
<p className="text-sm text-gray-800 line-clamp-2">
|
<p className="text-sm text-gray-800 line-clamp-2">
|
||||||
|
|||||||
339
src/components/DesktopFooter.tsx
Normal file
339
src/components/DesktopFooter.tsx
Normal file
@ -0,0 +1,339 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { motion } from "framer-motion";
|
||||||
|
import Image from "next/image";
|
||||||
|
|
||||||
|
export default function DesktopFooter() {
|
||||||
|
return (
|
||||||
|
<footer className="bg-[#F8F6F5] text-[#703133] font-renner text-base relative overflow-hidden">
|
||||||
|
{/* Premium background pattern */}
|
||||||
|
<div className="absolute inset-0 opacity-5">
|
||||||
|
<div className="absolute inset-0 bg-[radial-gradient(circle_at_25%_25%,rgba(139,69,19,0.1)_1px,transparent_1px)] bg-[length:40px_40px]" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 md:py-12 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8 relative z-10">
|
||||||
|
{/* Column 1: Brand Identity */}
|
||||||
|
<motion.div
|
||||||
|
className="space-y-4 sm:col-span-2 lg:col-span-1"
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.6 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
>
|
||||||
|
{/* MOZIMO Logo */}
|
||||||
|
<Image
|
||||||
|
src="/logo/logo.svg"
|
||||||
|
alt="Mozimo Logo"
|
||||||
|
className="object-contain drop-shadow-lg"
|
||||||
|
priority
|
||||||
|
sizes="40px"
|
||||||
|
width={80}
|
||||||
|
height={80}
|
||||||
|
quality={95}
|
||||||
|
placeholder="blur"
|
||||||
|
blurDataURL="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAIAAoDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAv/xAAhEAACAQMDBQAAAAAAAAAAAAABAgMABAUGIWGRkqGx0f/EABUBAQEAAAAAAAAAAAAAAAAAAAMF/8QAGhEAAgIDAAAAAAAAAAAAAAAAAAECEgMRkf/aAAwDAQACEQMRAD8AltJagyeH0AthI5xdrLcNM91BF5pX2HaH9bcfaSXWGaRmknyJckliyjqTzSlT54b6bk+h0R//2Q=="
|
||||||
|
/>
|
||||||
|
{/* Tagline */}
|
||||||
|
<p
|
||||||
|
className="text-sm leading-relaxed opacity-80 font-renner"
|
||||||
|
style={{
|
||||||
|
fontWeight: 300,
|
||||||
|
fontSize: "14px",
|
||||||
|
lineHeight: "160%",
|
||||||
|
letterSpacing: "0%",
|
||||||
|
fontFamily: "Renner*",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
India's Premier European style bean-to-bar chocolate
|
||||||
|
experience.
|
||||||
|
</p>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
{/* Column 2: Get in touch */}
|
||||||
|
<motion.div
|
||||||
|
className="space-y-4"
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.6, delay: 0.1 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
>
|
||||||
|
<h3
|
||||||
|
className="font-semibold text-lg font-renner"
|
||||||
|
style={{
|
||||||
|
fontWeight: 600,
|
||||||
|
fontSize: "18px",
|
||||||
|
lineHeight: "120%",
|
||||||
|
letterSpacing: "0%",
|
||||||
|
fontFamily: "Renner*",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Get in touch
|
||||||
|
</h3>
|
||||||
|
<div
|
||||||
|
className="space-y-2 text-sm font-renner"
|
||||||
|
style={{
|
||||||
|
fontWeight: 300,
|
||||||
|
fontSize: "14px",
|
||||||
|
lineHeight: "160%",
|
||||||
|
letterSpacing: "0%",
|
||||||
|
fontFamily: "Renner*",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<motion.div
|
||||||
|
className="flex items-center space-x-2"
|
||||||
|
initial={{ opacity: 0, x: -10 }}
|
||||||
|
whileInView={{ opacity: 1, x: 0 }}
|
||||||
|
transition={{ duration: 0.4, delay: 0.2 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
whileHover={{ x: 5 }}
|
||||||
|
>
|
||||||
|
<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" />
|
||||||
|
</svg>
|
||||||
|
<span className="text-xs md:text-sm">0172-4045414</span>
|
||||||
|
</motion.div>
|
||||||
|
<motion.div
|
||||||
|
className="flex items-start space-x-2"
|
||||||
|
initial={{ opacity: 0, x: -10 }}
|
||||||
|
whileInView={{ opacity: 1, x: 0 }}
|
||||||
|
transition={{ duration: 0.4, delay: 0.3 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
whileHover={{ x: 5 }}
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
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>
|
||||||
|
<span className="text-xs md:text-sm">
|
||||||
|
SCO 8, Inner Market, 9-D, Sector 9, Chandigarh, 160009
|
||||||
|
</span>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
{/* Column 3: Know more */}
|
||||||
|
<motion.div
|
||||||
|
className="space-y-4"
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.6, delay: 0.2 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
>
|
||||||
|
<h3
|
||||||
|
className="font-semibold text-lg font-renner"
|
||||||
|
style={{
|
||||||
|
fontWeight: 600,
|
||||||
|
fontSize: "18px",
|
||||||
|
lineHeight: "120%",
|
||||||
|
letterSpacing: "0%",
|
||||||
|
fontFamily: "Renner*",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Know more
|
||||||
|
</h3>
|
||||||
|
<ul
|
||||||
|
className="space-y-2 text-sm font-renner"
|
||||||
|
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
|
||||||
|
key={link}
|
||||||
|
initial={{ opacity: 0, x: -10 }}
|
||||||
|
whileInView={{ opacity: 1, x: 0 }}
|
||||||
|
transition={{ duration: 0.4, delay: 0.2 + index * 0.1 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
className="hover:opacity-80 transition-all duration-300 relative group text-xs md:text-sm"
|
||||||
|
>
|
||||||
|
{link}
|
||||||
|
<span className="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-[#8B4513] to-[#DAA520] transition-all duration-300 group-hover:w-full"></span>
|
||||||
|
</a>
|
||||||
|
</motion.li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
{/* Column 4: FAQ, Store, Ordering, Social Media */}
|
||||||
|
<motion.div
|
||||||
|
className="space-y-4 sm:col-span-2 lg:col-span-1"
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.6, delay: 0.3 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
>
|
||||||
|
{/* Individual links */}
|
||||||
|
<div
|
||||||
|
className="space-y-2 text-sm font-renner"
|
||||||
|
style={{
|
||||||
|
fontWeight: 300,
|
||||||
|
fontSize: "14px",
|
||||||
|
lineHeight: "160%",
|
||||||
|
letterSpacing: "0%",
|
||||||
|
fontFamily: "Renner*",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{["FAQ", "Locate our store", "Bulk Ordering"].map((link, index) => (
|
||||||
|
<motion.div
|
||||||
|
key={link}
|
||||||
|
initial={{ opacity: 0, x: -10 }}
|
||||||
|
whileInView={{ opacity: 1, x: 0 }}
|
||||||
|
transition={{ duration: 0.4, delay: 0.3 + index * 0.1 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
className="hover:opacity-80 transition-all duration-300 relative group text-xs md:text-sm"
|
||||||
|
>
|
||||||
|
{link}
|
||||||
|
<span className="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-[#8B4513] to-[#DAA520] transition-all duration-300 group-hover:w-full"></span>
|
||||||
|
</a>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Find Us On */}
|
||||||
|
<div className="pt-4">
|
||||||
|
<h3
|
||||||
|
className="font-semibold text-lg font-renner mb-3"
|
||||||
|
style={{
|
||||||
|
fontWeight: 600,
|
||||||
|
fontSize: "18px",
|
||||||
|
lineHeight: "120%",
|
||||||
|
letterSpacing: "0%",
|
||||||
|
fontFamily: "Renner*",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Find Us On
|
||||||
|
</h3>
|
||||||
|
<div className="flex space-x-3 md:space-x-4">
|
||||||
|
{/* Facebook */}
|
||||||
|
<motion.a
|
||||||
|
href="#"
|
||||||
|
className="hover:opacity-80 transition-all duration-300 p-2 rounded-full hover:bg-white/20 backdrop-blur-sm"
|
||||||
|
initial={{ opacity: 0, scale: 0.8 }}
|
||||||
|
whileInView={{ opacity: 1, scale: 1 }}
|
||||||
|
transition={{ duration: 0.4, delay: 0.4 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
whileHover={{ scale: 1.2 }}
|
||||||
|
whileTap={{ scale: 0.9 }}
|
||||||
|
aria-label="Facebook"
|
||||||
|
>
|
||||||
|
<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" />
|
||||||
|
</svg>
|
||||||
|
</motion.a>
|
||||||
|
{/* Instagram */}
|
||||||
|
<motion.a
|
||||||
|
href="#"
|
||||||
|
className="hover:opacity-80 transition-all duration-300 p-2 rounded-full hover:bg-white/20 backdrop-blur-sm"
|
||||||
|
initial={{ opacity: 0, scale: 0.8 }}
|
||||||
|
whileInView={{ opacity: 1, scale: 1 }}
|
||||||
|
transition={{ duration: 0.4, delay: 0.5 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
whileHover={{ scale: 1.2 }}
|
||||||
|
whileTap={{ scale: 0.9 }}
|
||||||
|
aria-label="Instagram"
|
||||||
|
>
|
||||||
|
<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" />
|
||||||
|
</svg>
|
||||||
|
</motion.a>
|
||||||
|
{/* YouTube */}
|
||||||
|
<motion.a
|
||||||
|
href="#"
|
||||||
|
className="hover:opacity-80 transition-all duration-300 p-2 rounded-full hover:bg-white/20 backdrop-blur-sm"
|
||||||
|
initial={{ opacity: 0, scale: 0.8 }}
|
||||||
|
whileInView={{ opacity: 1, scale: 1 }}
|
||||||
|
transition={{ duration: 0.4, delay: 0.6 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
whileHover={{ scale: 1.2 }}
|
||||||
|
whileTap={{ scale: 0.9 }}
|
||||||
|
aria-label="YouTube"
|
||||||
|
>
|
||||||
|
<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" />
|
||||||
|
</svg>
|
||||||
|
</motion.a>
|
||||||
|
{/* LinkedIn */}
|
||||||
|
<motion.a
|
||||||
|
href="#"
|
||||||
|
className="hover:opacity-80 transition-all duration-300 p-2 rounded-full hover:bg-white/20 backdrop-blur-sm"
|
||||||
|
initial={{ opacity: 0, scale: 0.8 }}
|
||||||
|
whileInView={{ opacity: 1, scale: 1 }}
|
||||||
|
transition={{ duration: 0.4, delay: 0.7 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
whileHover={{ scale: 1.2 }}
|
||||||
|
whileTap={{ scale: 0.9 }}
|
||||||
|
aria-label="LinkedIn"
|
||||||
|
>
|
||||||
|
<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" />
|
||||||
|
</svg>
|
||||||
|
</motion.a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Bottom Bar */}
|
||||||
|
<motion.div
|
||||||
|
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={{
|
||||||
|
fontWeight: 300,
|
||||||
|
fontSize: "14px",
|
||||||
|
lineHeight: "160%",
|
||||||
|
letterSpacing: "0%",
|
||||||
|
fontFamily: "Renner*",
|
||||||
|
}}
|
||||||
|
initial={{ opacity: 0 }}
|
||||||
|
whileInView={{ opacity: 1 }}
|
||||||
|
transition={{ duration: 0.6, delay: 0.4 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
>
|
||||||
|
<p className="text-xs md:text-sm">
|
||||||
|
© 2024 Mozimo. All rights reserved.
|
||||||
|
</p>
|
||||||
|
</motion.div>
|
||||||
|
</footer>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -1,339 +1,18 @@
|
|||||||
|
// components/Footer.js
|
||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { motion } from "framer-motion";
|
import MobileFooter from "./MobileFooter";
|
||||||
import Image from "next/image";
|
import DesktopFooter from "./DesktopFooter";
|
||||||
|
|
||||||
export default function Footer() {
|
export default function Footer() {
|
||||||
return (
|
return (
|
||||||
<footer className="bg-[#F8F6F5] text-[#703133] font-renner text-base relative overflow-hidden">
|
<>
|
||||||
{/* Premium background pattern */}
|
<div className="md:hidden">
|
||||||
<div className="absolute inset-0 opacity-5">
|
<MobileFooter />
|
||||||
<div className="absolute inset-0 bg-[radial-gradient(circle_at_25%_25%,rgba(139,69,19,0.1)_1px,transparent_1px)] bg-[length:40px_40px]" />
|
|
||||||
</div>
|
</div>
|
||||||
|
<div className="hidden md:block">
|
||||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 md:py-12 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8 relative z-10">
|
<DesktopFooter />
|
||||||
{/* Column 1: Brand Identity */}
|
|
||||||
<motion.div
|
|
||||||
className="space-y-4 sm:col-span-2 lg:col-span-1"
|
|
||||||
initial={{ opacity: 0, y: 20 }}
|
|
||||||
whileInView={{ opacity: 1, y: 0 }}
|
|
||||||
transition={{ duration: 0.6 }}
|
|
||||||
viewport={{ once: true }}
|
|
||||||
>
|
|
||||||
{/* MOZIMO Logo */}
|
|
||||||
<Image
|
|
||||||
src="/logo/logo.svg"
|
|
||||||
alt="Mozimo Logo"
|
|
||||||
className="object-contain drop-shadow-lg"
|
|
||||||
priority
|
|
||||||
sizes="40px"
|
|
||||||
width={80}
|
|
||||||
height={80}
|
|
||||||
quality={95}
|
|
||||||
placeholder="blur"
|
|
||||||
blurDataURL="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAIAAoDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAv/xAAhEAACAQMDBQAAAAAAAAAAAAABAgMABAUGIWGRkqGx0f/EABUBAQEAAAAAAAAAAAAAAAAAAAMF/8QAGhEAAgIDAAAAAAAAAAAAAAAAAAECEgMRkf/aAAwDAQACEQMRAD8AltJagyeH0AthI5xdrLcNM91BF5pX2HaH9bcfaSXWGaRmknyJckliyjqTzSlT54b6bk+h0R//2Q=="
|
|
||||||
/>
|
|
||||||
{/* Tagline */}
|
|
||||||
<p
|
|
||||||
className="text-sm leading-relaxed opacity-80 font-renner"
|
|
||||||
style={{
|
|
||||||
fontWeight: 300,
|
|
||||||
fontSize: "14px",
|
|
||||||
lineHeight: "160%",
|
|
||||||
letterSpacing: "0%",
|
|
||||||
fontFamily: "Renner*",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
India's Premier European style bean-to-bar chocolate
|
|
||||||
experience.
|
|
||||||
</p>
|
|
||||||
</motion.div>
|
|
||||||
|
|
||||||
{/* Column 2: Get in touch */}
|
|
||||||
<motion.div
|
|
||||||
className="space-y-4"
|
|
||||||
initial={{ opacity: 0, y: 20 }}
|
|
||||||
whileInView={{ opacity: 1, y: 0 }}
|
|
||||||
transition={{ duration: 0.6, delay: 0.1 }}
|
|
||||||
viewport={{ once: true }}
|
|
||||||
>
|
|
||||||
<h3
|
|
||||||
className="font-semibold text-lg font-renner"
|
|
||||||
style={{
|
|
||||||
fontWeight: 600,
|
|
||||||
fontSize: "18px",
|
|
||||||
lineHeight: "120%",
|
|
||||||
letterSpacing: "0%",
|
|
||||||
fontFamily: "Renner*",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Get in touch
|
|
||||||
</h3>
|
|
||||||
<div
|
|
||||||
className="space-y-2 text-sm font-renner"
|
|
||||||
style={{
|
|
||||||
fontWeight: 300,
|
|
||||||
fontSize: "14px",
|
|
||||||
lineHeight: "160%",
|
|
||||||
letterSpacing: "0%",
|
|
||||||
fontFamily: "Renner*",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<motion.div
|
|
||||||
className="flex items-center space-x-2"
|
|
||||||
initial={{ opacity: 0, x: -10 }}
|
|
||||||
whileInView={{ opacity: 1, x: 0 }}
|
|
||||||
transition={{ duration: 0.4, delay: 0.2 }}
|
|
||||||
viewport={{ once: true }}
|
|
||||||
whileHover={{ x: 5 }}
|
|
||||||
>
|
|
||||||
<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" />
|
|
||||||
</svg>
|
|
||||||
<span className="text-xs md:text-sm">0172-4045414</span>
|
|
||||||
</motion.div>
|
|
||||||
<motion.div
|
|
||||||
className="flex items-start space-x-2"
|
|
||||||
initial={{ opacity: 0, x: -10 }}
|
|
||||||
whileInView={{ opacity: 1, x: 0 }}
|
|
||||||
transition={{ duration: 0.4, delay: 0.3 }}
|
|
||||||
viewport={{ once: true }}
|
|
||||||
whileHover={{ x: 5 }}
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
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>
|
|
||||||
<span className="text-xs md:text-sm">
|
|
||||||
SCO 8, Inner Market, 9-D, Sector 9, Chandigarh, 160009
|
|
||||||
</span>
|
|
||||||
</motion.div>
|
|
||||||
</div>
|
|
||||||
</motion.div>
|
|
||||||
|
|
||||||
{/* Column 3: Know more */}
|
|
||||||
<motion.div
|
|
||||||
className="space-y-4"
|
|
||||||
initial={{ opacity: 0, y: 20 }}
|
|
||||||
whileInView={{ opacity: 1, y: 0 }}
|
|
||||||
transition={{ duration: 0.6, delay: 0.2 }}
|
|
||||||
viewport={{ once: true }}
|
|
||||||
>
|
|
||||||
<h3
|
|
||||||
className="font-semibold text-lg font-renner"
|
|
||||||
style={{
|
|
||||||
fontWeight: 600,
|
|
||||||
fontSize: "18px",
|
|
||||||
lineHeight: "120%",
|
|
||||||
letterSpacing: "0%",
|
|
||||||
fontFamily: "Renner*",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Know more
|
|
||||||
</h3>
|
|
||||||
<ul
|
|
||||||
className="space-y-2 text-sm font-renner"
|
|
||||||
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
|
|
||||||
key={link}
|
|
||||||
initial={{ opacity: 0, x: -10 }}
|
|
||||||
whileInView={{ opacity: 1, x: 0 }}
|
|
||||||
transition={{ duration: 0.4, delay: 0.2 + index * 0.1 }}
|
|
||||||
viewport={{ once: true }}
|
|
||||||
>
|
|
||||||
<a
|
|
||||||
href="#"
|
|
||||||
className="hover:opacity-80 transition-all duration-300 relative group text-xs md:text-sm"
|
|
||||||
>
|
|
||||||
{link}
|
|
||||||
<span className="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-[#8B4513] to-[#DAA520] transition-all duration-300 group-hover:w-full"></span>
|
|
||||||
</a>
|
|
||||||
</motion.li>
|
|
||||||
))}
|
|
||||||
</ul>
|
|
||||||
</motion.div>
|
|
||||||
|
|
||||||
{/* Column 4: FAQ, Store, Ordering, Social Media */}
|
|
||||||
<motion.div
|
|
||||||
className="space-y-4 sm:col-span-2 lg:col-span-1"
|
|
||||||
initial={{ opacity: 0, y: 20 }}
|
|
||||||
whileInView={{ opacity: 1, y: 0 }}
|
|
||||||
transition={{ duration: 0.6, delay: 0.3 }}
|
|
||||||
viewport={{ once: true }}
|
|
||||||
>
|
|
||||||
{/* Individual links */}
|
|
||||||
<div
|
|
||||||
className="space-y-2 text-sm font-renner"
|
|
||||||
style={{
|
|
||||||
fontWeight: 300,
|
|
||||||
fontSize: "14px",
|
|
||||||
lineHeight: "160%",
|
|
||||||
letterSpacing: "0%",
|
|
||||||
fontFamily: "Renner*",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{["FAQ", "Locate our store", "Bulk Ordering"].map((link, index) => (
|
|
||||||
<motion.div
|
|
||||||
key={link}
|
|
||||||
initial={{ opacity: 0, x: -10 }}
|
|
||||||
whileInView={{ opacity: 1, x: 0 }}
|
|
||||||
transition={{ duration: 0.4, delay: 0.3 + index * 0.1 }}
|
|
||||||
viewport={{ once: true }}
|
|
||||||
>
|
|
||||||
<a
|
|
||||||
href="#"
|
|
||||||
className="hover:opacity-80 transition-all duration-300 relative group text-xs md:text-sm"
|
|
||||||
>
|
|
||||||
{link}
|
|
||||||
<span className="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-[#8B4513] to-[#DAA520] transition-all duration-300 group-hover:w-full"></span>
|
|
||||||
</a>
|
|
||||||
</motion.div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Find Us On */}
|
|
||||||
<div className="pt-4">
|
|
||||||
<h3
|
|
||||||
className="font-semibold text-lg font-renner mb-3"
|
|
||||||
style={{
|
|
||||||
fontWeight: 600,
|
|
||||||
fontSize: "18px",
|
|
||||||
lineHeight: "120%",
|
|
||||||
letterSpacing: "0%",
|
|
||||||
fontFamily: "Renner*",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Find Us On
|
|
||||||
</h3>
|
|
||||||
<div className="flex space-x-3 md:space-x-4">
|
|
||||||
{/* Facebook */}
|
|
||||||
<motion.a
|
|
||||||
href="#"
|
|
||||||
className="hover:opacity-80 transition-all duration-300 p-2 rounded-full hover:bg-white/20 backdrop-blur-sm"
|
|
||||||
initial={{ opacity: 0, scale: 0.8 }}
|
|
||||||
whileInView={{ opacity: 1, scale: 1 }}
|
|
||||||
transition={{ duration: 0.4, delay: 0.4 }}
|
|
||||||
viewport={{ once: true }}
|
|
||||||
whileHover={{ scale: 1.2 }}
|
|
||||||
whileTap={{ scale: 0.9 }}
|
|
||||||
aria-label="Facebook"
|
|
||||||
>
|
|
||||||
<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" />
|
|
||||||
</svg>
|
|
||||||
</motion.a>
|
|
||||||
{/* Instagram */}
|
|
||||||
<motion.a
|
|
||||||
href="#"
|
|
||||||
className="hover:opacity-80 transition-all duration-300 p-2 rounded-full hover:bg-white/20 backdrop-blur-sm"
|
|
||||||
initial={{ opacity: 0, scale: 0.8 }}
|
|
||||||
whileInView={{ opacity: 1, scale: 1 }}
|
|
||||||
transition={{ duration: 0.4, delay: 0.5 }}
|
|
||||||
viewport={{ once: true }}
|
|
||||||
whileHover={{ scale: 1.2 }}
|
|
||||||
whileTap={{ scale: 0.9 }}
|
|
||||||
aria-label="Instagram"
|
|
||||||
>
|
|
||||||
<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" />
|
|
||||||
</svg>
|
|
||||||
</motion.a>
|
|
||||||
{/* YouTube */}
|
|
||||||
<motion.a
|
|
||||||
href="#"
|
|
||||||
className="hover:opacity-80 transition-all duration-300 p-2 rounded-full hover:bg-white/20 backdrop-blur-sm"
|
|
||||||
initial={{ opacity: 0, scale: 0.8 }}
|
|
||||||
whileInView={{ opacity: 1, scale: 1 }}
|
|
||||||
transition={{ duration: 0.4, delay: 0.6 }}
|
|
||||||
viewport={{ once: true }}
|
|
||||||
whileHover={{ scale: 1.2 }}
|
|
||||||
whileTap={{ scale: 0.9 }}
|
|
||||||
aria-label="YouTube"
|
|
||||||
>
|
|
||||||
<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" />
|
|
||||||
</svg>
|
|
||||||
</motion.a>
|
|
||||||
{/* LinkedIn */}
|
|
||||||
<motion.a
|
|
||||||
href="#"
|
|
||||||
className="hover:opacity-80 transition-all duration-300 p-2 rounded-full hover:bg-white/20 backdrop-blur-sm"
|
|
||||||
initial={{ opacity: 0, scale: 0.8 }}
|
|
||||||
whileInView={{ opacity: 1, scale: 1 }}
|
|
||||||
transition={{ duration: 0.4, delay: 0.7 }}
|
|
||||||
viewport={{ once: true }}
|
|
||||||
whileHover={{ scale: 1.2 }}
|
|
||||||
whileTap={{ scale: 0.9 }}
|
|
||||||
aria-label="LinkedIn"
|
|
||||||
>
|
|
||||||
<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" />
|
|
||||||
</svg>
|
|
||||||
</motion.a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</motion.div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</>
|
||||||
{/* Bottom Bar */}
|
|
||||||
<motion.div
|
|
||||||
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={{
|
|
||||||
fontWeight: 300,
|
|
||||||
fontSize: "14px",
|
|
||||||
lineHeight: "160%",
|
|
||||||
letterSpacing: "0%",
|
|
||||||
fontFamily: "Renner*",
|
|
||||||
}}
|
|
||||||
initial={{ opacity: 0 }}
|
|
||||||
whileInView={{ opacity: 1 }}
|
|
||||||
transition={{ duration: 0.6, delay: 0.4 }}
|
|
||||||
viewport={{ once: true }}
|
|
||||||
>
|
|
||||||
<p className="text-xs md:text-sm">
|
|
||||||
© 2024 Mozimo. All rights reserved.
|
|
||||||
</p>
|
|
||||||
</motion.div>
|
|
||||||
</footer>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -75,11 +75,9 @@ export default function Header() {
|
|||||||
ease: [0.25, 0.46, 0.45, 0.94],
|
ease: [0.25, 0.46, 0.45, 0.94],
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<nav
|
<nav className="relative bg-white border border-white/20 shadow-premium w-full h-full flex items-center px-4">
|
||||||
className={`bg-white border border-white/20 shadow-premium w-full h-full flex justify-between items-center rounded-none`}
|
{/* Left: Hamburger Menu */}
|
||||||
>
|
<div className="absolute left-4 top-1/2 -translate-y-1/2">
|
||||||
<div className="flex justify-between items-center w-full px-4">
|
|
||||||
{/* Mobile Hamburger Menu */}
|
|
||||||
<motion.button
|
<motion.button
|
||||||
className="hamburger-button p-2 text-gray-800 hover:text-[#8B4513] transition-all duration-300 relative min-w-[40px] min-h-[40px] flex items-center justify-center rounded-full hover:bg-white/20 backdrop-blur-sm"
|
className="hamburger-button p-2 text-gray-800 hover:text-[#8B4513] transition-all duration-300 relative min-w-[40px] min-h-[40px] flex items-center justify-center rounded-full hover:bg-white/20 backdrop-blur-sm"
|
||||||
whileHover={{ scale: 1.1 }}
|
whileHover={{ scale: 1.1 }}
|
||||||
@ -110,10 +108,12 @@ export default function Header() {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</motion.button>
|
</motion.button>
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* Center Logo */}
|
{/* Center: Logo */}
|
||||||
|
<div className="absolute left-1/2 transform -translate-x-1/2">
|
||||||
<motion.div
|
<motion.div
|
||||||
className="flex items-center justify-center absolute left-1/2 transform -translate-x-1/2"
|
className="flex items-center justify-center"
|
||||||
initial={{ opacity: 0, y: -20 }}
|
initial={{ opacity: 0, y: -20 }}
|
||||||
animate={{ opacity: 1, y: 0 }}
|
animate={{ opacity: 1, y: 0 }}
|
||||||
transition={{ duration: 0.6 }}
|
transition={{ duration: 0.6 }}
|
||||||
@ -143,9 +143,72 @@ export default function Header() {
|
|||||||
/>
|
/>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* Mobile Right Side - Empty space to balance layout */}
|
{/* Right: Action Buttons */}
|
||||||
<div className="w-10 h-10"></div>
|
<div className="absolute right-4 top-1/2 -translate-y-1/2 flex items-center gap-1">
|
||||||
|
<motion.button
|
||||||
|
className="p-2"
|
||||||
|
whileHover={{ scale: 1.05 }}
|
||||||
|
whileTap={{ scale: 0.95 }}
|
||||||
|
aria-label="Search"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
className="w-5 h-5"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 28 28"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth={1}
|
||||||
|
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</motion.button>
|
||||||
|
|
||||||
|
<motion.button
|
||||||
|
className="p-2"
|
||||||
|
whileHover={{ scale: 1.05 }}
|
||||||
|
whileTap={{ scale: 0.95 }}
|
||||||
|
aria-label="Shopping bag"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
className="w-5 h-5"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 28 28"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth={1}
|
||||||
|
d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</motion.button>
|
||||||
|
|
||||||
|
<motion.button
|
||||||
|
className="p-2"
|
||||||
|
whileHover={{ scale: 1.05 }}
|
||||||
|
whileTap={{ scale: 0.95 }}
|
||||||
|
aria-label="User account"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
className="w-5 h-5"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
viewBox="0 0 28 28"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
strokeWidth={1}
|
||||||
|
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>
|
||||||
|
</motion.button>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
</motion.header>
|
</motion.header>
|
||||||
@ -405,70 +468,6 @@ export default function Header() {
|
|||||||
Categories
|
Categories
|
||||||
</motion.a>
|
</motion.a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Mobile Action Buttons */}
|
|
||||||
<div className="flex space-x-4 pt-4">
|
|
||||||
<motion.button
|
|
||||||
className="flex-1 p-3 text-gray-800 hover:text-[#8B4513] transition-all duration-300 relative min-h-[40px] flex items-center justify-center rounded-full hover:bg-white/20 backdrop-blur-sm border border-gray-200"
|
|
||||||
whileHover={{ scale: 1.05 }}
|
|
||||||
whileTap={{ scale: 0.95 }}
|
|
||||||
aria-label="Search"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
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>
|
|
||||||
</motion.button>
|
|
||||||
<motion.button
|
|
||||||
className="flex-1 p-3 text-gray-800 hover:text-[#8B4513] transition-all duration-300 relative min-h-[40px] flex items-center justify-center rounded-full hover:bg-white/20 backdrop-blur-sm border border-gray-200"
|
|
||||||
whileHover={{ scale: 1.05 }}
|
|
||||||
whileTap={{ scale: 0.95 }}
|
|
||||||
aria-label="Shopping bag"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
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>
|
|
||||||
</motion.button>
|
|
||||||
<motion.button
|
|
||||||
className="flex-1 p-3 text-gray-800 hover:text-[#8B4513] transition-all duration-300 relative min-h-[40px] flex items-center justify-center rounded-full hover:bg-white/20 backdrop-blur-sm border border-gray-200"
|
|
||||||
whileHover={{ scale: 1.05 }}
|
|
||||||
whileTap={{ scale: 0.95 }}
|
|
||||||
aria-label="User account"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
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>
|
|
||||||
</motion.button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
|
|||||||
291
src/components/MobileFooter.tsx
Normal file
291
src/components/MobileFooter.tsx
Normal file
@ -0,0 +1,291 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { motion } from "framer-motion";
|
||||||
|
import Image from "next/image";
|
||||||
|
|
||||||
|
export default function MobileFooter() {
|
||||||
|
return (
|
||||||
|
<footer className="bg-[#F8F6F5] text-[#703133] font-renner text-base relative overflow-hidden md:hidden">
|
||||||
|
{/* Premium background pattern */}
|
||||||
|
<div className="absolute inset-0 opacity-5">
|
||||||
|
<div className="absolute inset-0 bg-[radial-gradient(circle_at_25%_25%,rgba(139,69,19,0.1)_1px,transparent_1px)] bg-[length:40px_40px]" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="px-4 py-8 flex flex-col gap-8 relative z-10">
|
||||||
|
{/* Logo at top */}
|
||||||
|
<motion.div
|
||||||
|
className="flex"
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.6 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
>
|
||||||
|
<Image
|
||||||
|
src="/logo/logo.svg"
|
||||||
|
alt="Mozimo Logo"
|
||||||
|
className="object-contain drop-shadow-lg"
|
||||||
|
priority
|
||||||
|
sizes="40px"
|
||||||
|
width={80}
|
||||||
|
height={80}
|
||||||
|
quality={95}
|
||||||
|
placeholder="blur"
|
||||||
|
blurDataURL="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAIAAoDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAv/xAAhEAACAQMDBQAAAAAAAAAAAAABAgMABAUGIWGRkqGx0f/EABUBAQEAAAAAAAAAAAAAAAAAAAMF/8QAGhEAAgIDAAAAAAAAAAAAAAAAAAECEgMRkf/aAAwDAQACEQMRAD8AltJagyeH0AthI5xdrLcNM91BF5pX2HaH9bcfaSXWGaRmknyJckliyjqTzSlT54b6bk+h0R//2Q=="
|
||||||
|
/>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
{/* Two column layout */}
|
||||||
|
<div className="grid grid-cols-2 gap-6">
|
||||||
|
{/* Left Column - Contact Info */}
|
||||||
|
<motion.div
|
||||||
|
className="space-y-4"
|
||||||
|
initial={{ opacity: 0, x: -10 }}
|
||||||
|
whileInView={{ opacity: 1, x: 0 }}
|
||||||
|
transition={{ duration: 0.4, delay: 0.1 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
>
|
||||||
|
<h3
|
||||||
|
className="font-semibold text-lg font-renner"
|
||||||
|
style={{
|
||||||
|
fontWeight: 600,
|
||||||
|
fontSize: "18px",
|
||||||
|
lineHeight: "120%",
|
||||||
|
letterSpacing: "0%",
|
||||||
|
fontFamily: "Renner*",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Get in touch
|
||||||
|
</h3>
|
||||||
|
<div
|
||||||
|
className="space-y-2 text-sm font-renner"
|
||||||
|
style={{
|
||||||
|
fontWeight: 300,
|
||||||
|
fontSize: "14px",
|
||||||
|
lineHeight: "160%",
|
||||||
|
letterSpacing: "0%",
|
||||||
|
fontFamily: "Renner*",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<motion.div
|
||||||
|
className="flex items-center space-x-2"
|
||||||
|
initial={{ opacity: 0, x: -10 }}
|
||||||
|
whileInView={{ opacity: 1, x: 0 }}
|
||||||
|
transition={{ duration: 0.4, delay: 0.2 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
whileHover={{ x: 5 }}
|
||||||
|
>
|
||||||
|
<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" />
|
||||||
|
</svg>
|
||||||
|
<span className="text-xs md:text-sm">0172-4045414</span>
|
||||||
|
</motion.div>
|
||||||
|
<motion.div
|
||||||
|
className="flex items-start space-x-2"
|
||||||
|
initial={{ opacity: 0, x: -10 }}
|
||||||
|
whileInView={{ opacity: 1, x: 0 }}
|
||||||
|
transition={{ duration: 0.4, delay: 0.3 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
whileHover={{ x: 5 }}
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
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>
|
||||||
|
<span className="text-xs md:text-sm">
|
||||||
|
SCO 8, Inner Market, 9-D, Sector 9, Chandigarh, 160009
|
||||||
|
</span>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Find Us On */}
|
||||||
|
<div className="pt-4">
|
||||||
|
<h3
|
||||||
|
className="font-semibold text-lg font-renner mb-3"
|
||||||
|
style={{
|
||||||
|
fontWeight: 600,
|
||||||
|
fontSize: "18px",
|
||||||
|
lineHeight: "120%",
|
||||||
|
letterSpacing: "0%",
|
||||||
|
fontFamily: "Renner*",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Find Us On
|
||||||
|
</h3>
|
||||||
|
<div className="flex">
|
||||||
|
{/* Social icons with original animations */}
|
||||||
|
<motion.a
|
||||||
|
href="#"
|
||||||
|
className="hover:opacity-80 transition-all duration-300 p-2 rounded-full hover:bg-white/20 backdrop-blur-sm"
|
||||||
|
initial={{ opacity: 0, scale: 0.8 }}
|
||||||
|
whileInView={{ opacity: 1, scale: 1 }}
|
||||||
|
transition={{ duration: 0.4, delay: 0.4 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
whileHover={{ scale: 1.2 }}
|
||||||
|
whileTap={{ scale: 0.9 }}
|
||||||
|
aria-label="Facebook"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
className="w-5 h-5"
|
||||||
|
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" />
|
||||||
|
</svg>
|
||||||
|
</motion.a>
|
||||||
|
<motion.a
|
||||||
|
href="#"
|
||||||
|
className="hover:opacity-80 transition-all duration-300 p-2 rounded-full hover:bg-white/20 backdrop-blur-sm"
|
||||||
|
initial={{ opacity: 0, scale: 0.8 }}
|
||||||
|
whileInView={{ opacity: 1, scale: 1 }}
|
||||||
|
transition={{ duration: 0.4, delay: 0.5 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
whileHover={{ scale: 1.2 }}
|
||||||
|
whileTap={{ scale: 0.9 }}
|
||||||
|
aria-label="Instagram"
|
||||||
|
>
|
||||||
|
<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" />
|
||||||
|
</svg>
|
||||||
|
</motion.a>
|
||||||
|
<motion.a
|
||||||
|
href="#"
|
||||||
|
className="hover:opacity-80 transition-all duration-300 p-2 rounded-full hover:bg-white/20 backdrop-blur-sm"
|
||||||
|
initial={{ opacity: 0, scale: 0.8 }}
|
||||||
|
whileInView={{ opacity: 1, scale: 1 }}
|
||||||
|
transition={{ duration: 0.4, delay: 0.6 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
whileHover={{ scale: 1.2 }}
|
||||||
|
whileTap={{ scale: 0.9 }}
|
||||||
|
aria-label="YouTube"
|
||||||
|
>
|
||||||
|
<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" />
|
||||||
|
</svg>
|
||||||
|
</motion.a>
|
||||||
|
<motion.a
|
||||||
|
href="#"
|
||||||
|
className="hover:opacity-80 transition-all duration-300 p-2 rounded-full hover:bg-white/20 backdrop-blur-sm"
|
||||||
|
initial={{ opacity: 0, scale: 0.8 }}
|
||||||
|
whileInView={{ opacity: 1, scale: 1 }}
|
||||||
|
transition={{ duration: 0.4, delay: 0.7 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
whileHover={{ scale: 1.2 }}
|
||||||
|
whileTap={{ scale: 0.9 }}
|
||||||
|
aria-label="LinkedIn"
|
||||||
|
>
|
||||||
|
<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" />
|
||||||
|
</svg>
|
||||||
|
</motion.a>
|
||||||
|
{/* Other social icons... */}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
{/* Right Column - Know more and other links */}
|
||||||
|
<motion.div
|
||||||
|
className="space-y-4"
|
||||||
|
initial={{ opacity: 0, x: 10 }}
|
||||||
|
whileInView={{ opacity: 1, x: 0 }}
|
||||||
|
transition={{ duration: 0.4, delay: 0.2 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
>
|
||||||
|
<div className="space-y-4">
|
||||||
|
<h3
|
||||||
|
className="font-semibold text-lg font-renner"
|
||||||
|
style={{
|
||||||
|
fontWeight: 600,
|
||||||
|
fontSize: "18px",
|
||||||
|
lineHeight: "120%",
|
||||||
|
letterSpacing: "0%",
|
||||||
|
fontFamily: "Renner*",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Know more
|
||||||
|
</h3>
|
||||||
|
<ul
|
||||||
|
className="space-y-2 text-sm font-renner"
|
||||||
|
style={{
|
||||||
|
fontWeight: 300,
|
||||||
|
fontSize: "14px",
|
||||||
|
lineHeight: "160%",
|
||||||
|
letterSpacing: "0%",
|
||||||
|
fontFamily: "Renner*",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{[
|
||||||
|
"Privacy Policy",
|
||||||
|
"Refund & Return Policy",
|
||||||
|
"Terms & Conditions",
|
||||||
|
"Shipping Policy",
|
||||||
|
"FAQ",
|
||||||
|
"Locate our store",
|
||||||
|
"Bulk Ordering",
|
||||||
|
].map((link, index) => (
|
||||||
|
<motion.li
|
||||||
|
key={link}
|
||||||
|
initial={{ opacity: 0, x: -10 }}
|
||||||
|
whileInView={{ opacity: 1, x: 0 }}
|
||||||
|
transition={{ duration: 0.4, delay: 0.2 + index * 0.1 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
className="hover:opacity-80 transition-all duration-300 relative group text-xs md:text-sm"
|
||||||
|
>
|
||||||
|
{link}
|
||||||
|
<span className="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-[#8B4513] to-[#DAA520] transition-all duration-300 group-hover:w-full"></span>
|
||||||
|
</a>
|
||||||
|
</motion.li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Copyright - original styling preserved */}
|
||||||
|
<motion.div
|
||||||
|
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={{
|
||||||
|
fontWeight: 300,
|
||||||
|
fontSize: "14px",
|
||||||
|
lineHeight: "160%",
|
||||||
|
letterSpacing: "0%",
|
||||||
|
fontFamily: "Renner*",
|
||||||
|
}}
|
||||||
|
initial={{ opacity: 0 }}
|
||||||
|
whileInView={{ opacity: 1 }}
|
||||||
|
transition={{ duration: 0.6, delay: 0.4 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
>
|
||||||
|
<p className="text-xs md:text-sm">
|
||||||
|
© 2024 Mozimo. All rights reserved.
|
||||||
|
</p>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user