Beginning of ecommerce

src/components/footer.tsx

@@ -7,19 +7,14 @@ import {
   FaLinkedin,
 } from 'react-icons/fa';
 import Image from 'next/image';
+import logoPic from '/public/images/logo-puce-red.svg';
 
 export function Footer() {
   return (
     <footer className='bg-[#f8f6f5] flex flex-col md:flex-row py-12 border-t-2 border-black max-w-7xl mx-auto gap-8 px-4'>
       {/* First Column: Logo and Description */}
       <div className='space-y-4 flex flex-col basis-1/4'>
-        <Image
-          src='/images/logo.png' // Update with your logo path
-          alt='Mozimo Logo'
-          className='h-10'
-          width={100}
-          height={100}
-        />
+        <Image src={logoPic} alt='Mozimo Logo' width={100} height={100} />
         <p className='text-sm'>
           India&apos;s Premier European style bean-to-bar chocolate experience.
         </p>

src/components/instagram.tsx

@@ -1,5 +1,5 @@
 'use client';
-import { InstagramPost, fetchInstagramPosts } from '@/app/lib/instagram';
+import { InstagramPost, fetchInstagramPosts } from '@/lib/instagram';
 import { useEffect, useState } from 'react';
 
 export function InstagramFeed() {

src/components/navbar.module.css

@@ -1,7 +1,5 @@
-/* navbar.module.css */
-
 .navBar {
-    @apply top-6 left-6 right-6 transition-all duration-300 z-50 h-16;
+    @apply top-6 left-6 right-6 transition-all duration-300 z-50 h-20;
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -9,11 +7,11 @@
   }
   
   .navBarInitial {
-    @apply bg-transparent text-white absolute;
+    @apply bg-white/30 text-black rounded-lg shadow-lg absolute;
   }
   
   .navBarScrolledUp {
-    @apply bg-white text-black rounded-lg shadow-lg fixed;
+    @apply bg-gradient-to-b from-black/30 to-black/10 text-white  rounded-lg fixed;
   }
   
   /* Custom style */
@@ -24,3 +22,13 @@
   .cls-1, .cls-2 {
     fill: #ffffff;
   }
+
+/* Transparent / almost transparent to white
+  .navBarInitial {
+    @apply bg-gradient-to-b from-black/50 to-black/30 text-white absolute rounded-lg;
+  }
+  
+  .navBarScrolledUp {
+    @apply bg-white text-black rounded-lg shadow-lg fixed;
+  }
+*/

src/components/navbar.tsx

@@ -5,7 +5,8 @@ import { FiSearch, FiUser } from 'react-icons/fi';
 import { HiShoppingBag } from 'react-icons/hi2';
 import styles from './navbar.module.css';
 import Image from 'next/image';
-import logoPic from '/public/images/logo.svg';
+import logoWhite from '/public/images/logo-white.svg';
+import logoBlack from '/public/images/logo-black.svg';
 
 // components/Navbar.tsx
 export function Navbar() {
@@ -49,7 +50,7 @@ export function Navbar() {
       <div className='flex-shrink-0'>
         <Link href='/' className='text-lg font-bold'>
           <Image
-            src={logoPic}
+            src={navBarStyle === 'scrolledUp' ? logoWhite : logoBlack}
             alt='Logo'
             className='logo text-white'
             width={100}