Merge pull request #94 from iamnikhilranjan/dev

fix: logo not showing in production

Author: arsrivastawa

components/associations/Associations.js

@@ -1,5 +1,5 @@
 import { useEffect, useRef } from 'react';
-import Image from 'next/image';
+// import Image from 'next/image';
 import Styles from './association.module.css';
 import BottomGlitter from '../StyledText/BottomGlitter';
 
@@ -14,32 +14,26 @@ function Associations() {
           <div className={Styles.associationMenu}>
             <div className={Styles.associationMenuItem}>
               <a href="#gdsc">
-                <Image
+                <img
                   className={Styles.associationImage}
-                  height="100%"
-                  width="100%"
                   src="/sponsors/gdsc.png"
                   alt="Google Developers Student Clubs, BIT Sindri"
                 />
               </a>
             </div>
             <div className={Styles.associationMenuItem}>
               <a href="#gfg">
-                <Image
+                <img
                   className={Styles.associationImage}
-                  height="100%"
-                  width="100%"
                   src="/sponsors/gfg.png"
                   alt="GeeksForGeeks Student Chapter, BIT Sindri"
                 />
               </a>
             </div>
             <div className={Styles.associationMenuItem}>
               <a href="#codechef">
-                <Image
+                <img
                   className={Styles.associationImage}
-                  height="100%"
-                  width="100%"
                   src="/sponsors/codechef.jpg"
                   alt="Codechef Student Chapter, BIT Sindri"
                 />

components/navbar/Navbar.js

@@ -1,13 +1,14 @@
 /* eslint-disable no-alert */
 import React, { useEffect, useState } from 'react';
 import { HiMenuAlt4 } from 'react-icons/hi';
-import Image from 'next/image';
 import Link from 'next/link';
 import styles from './Navbar.module.css';
-import Logo from '../../assets/hncc-logo.png';
+// ✅ Fixed: use logo directly with <img> instead of next/image for Netlify
 import Button from '../button/Button';
 import Sidebar from './Sidebar';
 
+const Logo = '/hncc-logo.png';
+
 const SpanStyle = {
   zIndex: 1,
   color: 'inherit',
@@ -61,7 +62,15 @@ function Navbar() {
       <div>
         <Link href="/">
           <a className="flex items-center">
-            <Image src={Logo} alt="HnCC" height="60px" width="60px" />
+            {/* ✅ Fixed: using <img> ensures it loads correctly from public on Netlify */}
+            <img
+              src={Logo}
+              alt="HnCC"
+              height="60"
+              width="60"
+              className="mr-2"
+              style={{ objectFit: 'contain' }}
+            />
             <h2 id="hnccTitle" className={styles.navTitle}>
               Hackathon and Coding Club
             </h2>

components/navbar/Sidebar.js

@@ -1,12 +1,13 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { CgClose } from 'react-icons/cg';
-import Image from 'next/image';
 import Link from 'next/link';
 import styles from './Hamburger.module.css';
-import Logo from '../../assets/hncc-logo.png';
+// ✅ Fixed: use logo directly with <img> instead of next/image for Netlify
 import Button from '../button/Button';
 
+const Logo = '/hncc-logo.png';
+
 const SpanStyle = {
   zIndex: 1,
   color: 'inherit',
@@ -65,7 +66,15 @@ function Sidebar({ isMounted, unmount }) {
         <div>
           <Link href="/">
             <a className="flex items-center" onClick={unmount}>
-              <Image src={Logo} alt="HnCC" height="60px" width="60px" />
+              {/* ✅ Fixed: use <img> for Netlify compatibility */}
+              <img
+                src={Logo}
+                alt="HnCC"
+                height="60"
+                width="60"
+                className="mr-2"
+                style={{ objectFit: 'contain' }}
+              />
             </a>
           </Link>
         </div>