diff --git a/src/app/globals.css b/src/app/globals.css index ebe4245..563bfb9 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -460,3 +460,10 @@ html { maximum-scale: 5; user-scalable: yes; } +.no-scrollbar::-webkit-scrollbar { + display: none; +} +.no-scrollbar { + -ms-overflow-style: none; /* IE and Edge */ + scrollbar-width: none; /* Firefox */ +} diff --git a/src/app/page.tsx b/src/app/page.tsx index 342bcf2..5f01fd5 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -140,7 +140,7 @@ export default function Home() { whileInView="animate" viewport={{ once: true, margin: "-50px" }} 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 >
-
    +
      {categories.map((category, idx) => ( ))}
    - {/* Right Column - Category Image */} + {/* Right Column - Large Category Image (desktop only) */} -
    +
    {loading ? ( - // Loading state <> {[1, 2, 3].map((i) => ( ) : error ? ( - // Error state - fallback to static content isTokenExpired ? ( - // Token expired state -
    +
    @@ -623,7 +632,7 @@ export default function Home() { whileInView="animate" viewport={{ once: true, margin: "-50px" }} 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 }} >
    @@ -661,7 +670,7 @@ export default function Home() { whileInView="animate" viewport={{ once: true, margin: "-50px" }} 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 }} >
    @@ -684,7 +693,6 @@ export default function Home() { ) ) : ( - // Real Instagram posts posts?.slice(0, 3).map((post, index) => ( { - // Fallback to a placeholder if image fails to load const target = e.target as HTMLImageElement; target.src = "/bst/bs1.svg"; }} />
    - - {/* Video indicator */} {post.mediaType === "VIDEO" && (
    )} -

    diff --git a/src/components/DesktopFooter.tsx b/src/components/DesktopFooter.tsx new file mode 100644 index 0000000..405447e --- /dev/null +++ b/src/components/DesktopFooter.tsx @@ -0,0 +1,339 @@ +"use client"; + +import { motion } from "framer-motion"; +import Image from "next/image"; + +export default function DesktopFooter() { + return ( +

    + ); +} diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx index fbddee8..1910440 100644 --- a/src/components/Footer.tsx +++ b/src/components/Footer.tsx @@ -1,339 +1,18 @@ +// components/Footer.js "use client"; -import { motion } from "framer-motion"; -import Image from "next/image"; +import MobileFooter from "./MobileFooter"; +import DesktopFooter from "./DesktopFooter"; export default function Footer() { return ( -
    - {/* Premium background pattern */} -
    -
    + <> +
    +
    - -
    - {/* Column 1: Brand Identity */} - - {/* MOZIMO Logo */} - Mozimo Logo - {/* Tagline */} -

    - India's Premier European style bean-to-bar chocolate - experience. -

    -     - - {/* Column 2: Get in touch */} - -

    - Get in touch -

    -
    - - - - - 0172-4045414 - - - - - - - SCO 8, Inner Market, 9-D, Sector 9, Chandigarh, 160009 - - -
    -     - - {/* Column 3: Know more */} - -

    - Know more -

    -
      - {[ - "Privacy Policy", - "Refund & Return Policy", - "Terms & Conditions", - "Shipping Policy", - ].map((link, index) => ( - - - {link} - - - - ))} -
    -     - - {/* Column 4: FAQ, Store, Ordering, Social Media */} - - {/* Individual links */} -
    - {["FAQ", "Locate our store", "Bulk Ordering"].map((link, index) => ( - - - {link} - - - - ))} -
    - - {/* Find Us On */} -
    -

    - Find Us On -

    -
    - {/* Facebook */} - - - - - - {/* Instagram */} - - - - - - {/* YouTube */} - - - - - - {/* LinkedIn */} - - - - - -
    -
    -     +
    +
    - - {/* Bottom Bar */} - -

    - © 2024 Mozimo. All rights reserved. -

    -     -
    + ); } diff --git a/src/components/Header.tsx b/src/components/Header.tsx index a482a5b..cf3ac80 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -75,11 +75,9 @@ export default function Header() { ease: [0.25, 0.46, 0.45, 0.94], }} > - @@ -405,70 +468,6 @@ export default function Header() { Categories
    - - {/* Mobile Action Buttons */} -
    - - - - - - - - - - - - - - - -
    diff --git a/src/components/MobileFooter.tsx b/src/components/MobileFooter.tsx new file mode 100644 index 0000000..068e350 --- /dev/null +++ b/src/components/MobileFooter.tsx @@ -0,0 +1,291 @@ +"use client"; + +import { motion } from "framer-motion"; +import Image from "next/image"; + +export default function MobileFooter() { + return ( + + ); +}