Merge pull request #5 from devhimal/01-school

updated the bugs

src/app/components/molecules/FeatureProgram/FeatureProgram.tsx

@@ -49,7 +49,7 @@ const FeatureProgram = () => {
       <div>
         <SectionHeading>Featured Program</SectionHeading>
 
-        <div className="h-fit ml-6 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 sm:gap-10 ">
+        <div className="h-fit ml-6  pb-0 sm:pb-10 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 sm:gap-10 ">
           {Program.map((item, index) => {
             return (
               <LazyShow key={index}>
@@ -58,12 +58,12 @@ const FeatureProgram = () => {
                   href={item.url ? item.url : "bhotenamlangschool.com"}
                   key={index}
                 >
-                  <div className="flex basis-full flex-col p-4 tracking-tight text-slate-100/50 sm:basis-1/2  h-full w-full ">
-                    <h3 className="max-w-xs !pb-2 !m-0 font-bold  text-base text-slate-100">
+                  <div className="flex basis-full flex-col p-4 tracking-tight text-black sm:basis-1/2  h-full w-full ">
+                    <h3 className="max-w-xs !pb-2 !m-0 font-bold  text-base ">
                       {item.title}
                     </h3>
                     <div className="text-base !m-0 !p-0 font-normal">
-                      <span className="text-white">{item.desc}</span>
+                      <span className="">{item.desc}</span>
                     </div>
 
                     <Image

src/app/components/molecules/Navbar/Navbar.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import React, { useState } from "react"
+import React, { useState, useEffect } from "react"
 import Container from "../../atoms/Container/Container"
 import { NavItems } from "@/app/helpers/helpers"
 import Link from "next/link"
@@ -10,30 +10,38 @@ import { MdClose } from "react-icons/md"
 const Navbar = () => {
   // State to manage the navbar's visibility
   const [nav, setNav] = useState(false)
+  const [scroll, setScroll] = useState(false)
 
   // Toggle function to handle the navbar's display
   const handleNav = () => {
     setNav(!nav)
   }
+
+  // Effect to handle scroll event
+  useEffect(() => {
+    const handleScroll = () => {
+      if (window.scrollY > 50) {
+        setScroll(true)
+      } else {
+        setScroll(false)
+      }
+    }
+    window.addEventListener("scroll", handleScroll)
+    return () => {
+      window.removeEventListener("scroll", handleScroll)
+    }
+  }, [])
+
   return (
-    // <Container classNames={nav ? "fixed bg-black z-50 " : "fixed z-50"}>
     <div
-      className={
-        nav
-          ? "fixed z-50 bg-black w-full"
-          : "fixed z-50 bg-transparent py-8 text-xl flex text-white boder w-full capitalize"
-      }
+      className={`fixed z-50 overflow-hidden w-full ${
+        scroll ? "bg-[#48823E]" : "bg-transparent"
+      } py-4 text-xl flex text-white w-full capitalize transition-all duration-500`}
     >
       <Container>
         <nav className="flex justify-between w-full">
           <div>
-            <h1
-              className={
-                nav
-                  ? "py-2 font-extrabold text-xl  tracking-wide md:text-xl"
-                  : "font-extrabold  w-[50%] tracking-wide text-xl"
-              }
-            >
+            <h1 className="font-extrabold tracking-wide text-xl">
               Shree Bhotenamlang S.S
             </h1>
           </div>
@@ -44,10 +52,10 @@ const Navbar = () => {
             {nav ? <MdClose size={30} /> : <CiMenuBurger size={30} />}
           </div>
           <ul className="hidden md:flex justify-center gap-1 items-center">
-            {NavItems.map((item: any, index: number) => (
+            {NavItems.map((item, index) => (
               <li
                 key={index}
-                className="capitalize hover:bg-green-700 py-2 px-4 rounded-md hover:transition-all hover:duration-500"
+                className="capitalize hover:text-black py-2 px-4 rounded-md hover:transition-all hover:duration-500"
               >
                 <Link href={index === 3 ? `#${item.link}` : `${item.link}`}>
                   {item.label}
@@ -57,13 +65,17 @@ const Navbar = () => {
           </ul>
 
           {/* mobile app */}
+          {/* <div className={`${nav ? "w-full h-full bg-black" : "else"}`}> */}
           <ul
-            className={
+            className={`${
               nav
-                ? "fixed md:hidden  z-50 pt-10 left-0 top-[70px] sm:top-[90px] px-8 flex flex-col gap-2 w-[70%] h-full border-r border-r-gray-900 bg-[#000300] ease-in-out duration-1000"
+                ? "fixed md:hidden z-50 top-0 py-10 left-0 px-8 flex flex-col gap-4 w-[80%] h-full bg-[#48823E] ease-in-out duration-1000"
                 : "ease-in-out w-[70%] duration-1000 fixed top-0 bottom-0 left-[-100%]"
-            }
+            }`}
           >
+            <div className="mb-4">
+              <h1>Shree Bhotenamlang secondary School</h1>
+            </div>
             {NavItems.map((item, index) => (
               <li key={index} className="capitalize">
                 <Link
@@ -75,11 +87,10 @@ const Navbar = () => {
               </li>
             ))}
           </ul>
+          {/* </div> */}
         </nav>
       </Container>
     </div>
-
-    // </Container>
   )
 }
 

src/app/components/molecules/Story/Story.tsx

@@ -12,7 +12,7 @@ const Story = () => {
         <LazyShow>
           <div className="mb-8">
             <SectionHeading classNames=" text-center">
-              Story of our students
+              Seeking Support
             </SectionHeading>
             <p className="text-center">
               Your kindness and support can help create a brighter future for

src/app/components/ui/PinContainer.tsx

@@ -30,7 +30,7 @@ export const PinContainer = ({
   return (
     <div
       className={cn(
-        "relative group/pin z-50  cursor-pointer",
+        "relative group/pin z-40  cursor-pointer",
         containerClassName
       )}
       onMouseEnter={onMouseEnter}
@@ -47,7 +47,7 @@ export const PinContainer = ({
           style={{
             transform: transform,
           }}
-          className="absolute flex justify-start items-start text-white  rounded-2xl  shadow-[0_8px_16px_rgb(0_0_0/0.4)] bg-green-700 group-hover/pin:border-white/[0.2] transition duration-700 overflow-hidden"
+          className="absolute flex justify-start items-star rounded-2xl  shadow-[0_8px_16px_rgb(0_0_0/0.4)] text-black group-hover/pin:border-white/[0.2] transition duration-700 overflow-hidden"
         >
           <div className={cn(" relative z-50 ", className)}>{children}</div>
         </div>
@@ -65,7 +65,7 @@ export const PinPerspective = ({
   href?: string
 }) => {
   return (
-    <motion.div className="pointer-events-none  w-96 h-80 flex items-center justify-center opacity-0 group-hover/pin:opacity-100 z-[60] transition duration-500">
+    <motion.div className="pointer-events-none  w-96 h-80 flex items-center justify-center opacity-0 group-hover/pin:opacity-100 transition duration-500">
       <div className=" w-full h-full -mt-7 flex-none  inset-0">
         <div className="absolute top-0 inset-x-0  flex justify-center">
           <a