Develop

package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "@gsap/react": "^2.1.1",
     "@reduxjs/toolkit": "^2.5.0",
+    "axios": "^1.7.9",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-icons": "^5.4.0",

src/App.jsx

@@ -1,10 +1,11 @@
 import React from "react";
-import Body from "./body";
+import Body from "./Body";
 import { BrowserRouter, Route, Routes } from "react-router-dom";
 import ErrorPage from "./components/ErrorPage";
 import About from "./pages/About";
-import Landing from "./pages/Landing";
+import Landing from "./pages/Home";
 import Student from "./pages/Student";
+import Album_Image from "./pages/Album_Image";
 const App = () => {
   return (
     <>
@@ -14,6 +15,7 @@ const App = () => {
             <Route path="/" element={<Landing />}></Route>
             <Route path="/about" element={<About />}></Route>
             <Route path="/student" element={<Student />}></Route>
+            <Route path="/album/:name" element={<Album_Image />}></Route>
           </Route>
           <Route path="*" element={<ErrorPage />}></Route>
         </Routes>

src/Body.jsx

@@ -1,9 +1,38 @@
-import React from "react";
 import Navbar from "./components/Navbar";
 import { Outlet } from "react-router-dom";
 import Footer from "./components/Footer";
+import { useDispatch, useSelector } from "react-redux";
+import { useEffect } from "react";
+import { setLandingPage } from "./store/uiSlice";
+import axios from "axios";
+
 
 const Body = () => {
+  let dispatch = useDispatch()
+  let landingPage = useSelector(state => state.ui.landingPage)
+  console.log('redux data',landingPage)
+
+
+  useEffect(() => {
+
+    const fetchData = async () => {
+      try {
+        const response = await axios.get("/api/frontend");
+        let data = response.data.data[0]
+        console.log(data.landingPage);
+        if(!landingPage){
+        dispatch(setLandingPage(data.landingPage))
+        }
+
+      } catch (error) {
+        console.error(error);
+      }
+    };
+
+    fetchData();
+
+  }, []);
+
   return (
     <>
       <Navbar />

src/components/Album.jsx

@@ -0,0 +1,139 @@
+import { GoArrowUpRight } from 'react-icons/go';
+import { get_Album } from '../service/user.service';
+import { useEffect, useState } from 'react';
+import { Link } from 'react-router-dom';
+
+const Album = () => {
+  const [lastAlbum, setlastAlbum] = useState()
+  const [albums, setAlbums] = useState([]);
+  const [error, setError] = useState(false);
+
+
+
+
+  useEffect(() => {
+    const fetchAlbums = async () => {
+      try {
+        const data = await get_Album();
+        if (!data || data.length === 0) {
+          setError(true);
+        } else {
+          setAlbums(data);
+
+
+          setError(false); // Reset error if data is available
+        }
+      } catch (err) {
+        console.log(err);
+        setError(true); // Set error if request fails
+      }
+    };
+
+    fetchAlbums();
+
+
+
+  }, [])
+
+
+  // useEffect(() => {
+  //   if (albums.length > 0) {
+  //     let obj = albums[albums.length - 1];
+  //     console.log('obj',obj)
+  //     setlastAlbum({ obj }); 
+  //   }
+  // }, [albums]); 
+
+
+
+
+  return (
+    <div className="w-full sm:h-[150vh] md:h-screen px-10 py-5 flex items-center justify-between sm:flex-col md:flex-row">
+      <div className="md:w-[55vw] md:h-[62vh] sm:w-full sm:h-full grid  grid-rows-2 grid-cols-2  md:grid-cols-3 gap-[3vw]  md:gap-[1.5vw]  place-items-center">
+        {error ? (
+          <h1 className='text-2xl text-center'>No Data From Backend</h1>
+        ) : albums.length === 0 ? (
+          <h1 className='text-2xl text-center'>Album Not Found</h1>
+        ) : (
+
+
+          albums.map(item => (
+
+
+            <Link to={`/album/${item.aName}`} className="sm:h-[230px] md:h-full w-full rounded-lg overflow-hidden relative m-[3vw] row-span-1" key={item.id}>
+              <div className="h-full w-full bg-zinc-500 absolute top-0 left-0 bg-cover bg-center">
+                <img
+                  src={item.aImage_url}
+                  alt={item.aName}
+                  className="w-full h-full object-cover object-top"
+                />
+              </div>
+              <div className="flex justify-center p-1.5 items-center rounded-full w-[2vw] h-[2vw] bg-black absolute z-40 right-1 top-1 my-2 mx-2">
+                <GoArrowUpRight className="text-2xl text-white" />
+              </div>
+              <div className="absolute bottom-0 left-0 bg-black bg-opacity-25 flex justify-between h-[25%] items-center px-1 w-full z-50">
+                <p className="sm:text-sm md:text-base text-white">{item.aName}</p>
+                {/* <p className="sm:text-sm md:text-base text-white">{item.aDescription}</p> */}
+                <p className="sm:text-sm md:text-base text-white">{item.createdAt}</p>
+              </div>
+
+            </Link>
+
+
+
+
+          ))
+        )}
+
+
+      </div>
+
+
+      <div className='bg-red-600 h-[63vh] w-[35vw] mr-[1vw] md:mr-[2vw] rounded-lg relative'>
+
+        {
+
+          albums.filter(() => albums.length > 5).slice(-1).map((item) => {
+            console.log('item', item)
+            console.log('item', item.aName)
+
+            return (
+
+
+              <Link to={`/album/${item.aName}`} className="rounded-lg  " key={item.id}>
+
+
+
+                <img srcSet={item.aImage_url} alt=""  className='w-full h-full object-cover rounded-lg object-center'/>
+
+                <div className="flex justify-center p-1.5 items-center rounded-full w-[2vw] h-[2vw] bg-black absolute z-40 right-1 top-1 my-2 mx-2">
+                <GoArrowUpRight className="text-2xl text-white" />
+              </div>
+
+                <div className="absolute bottom-0 right-0 bg-black bg-opacity-25 flex justify-between h-[25%] items-center px-1 w-full z-50  ">
+                <p className="sm:text-sm md:text-base text-white">{item.aName}</p>
+                {/* <p className="sm:text-sm md:text-base text-white">{item.aDescription}</p> */}
+                <p className="sm:text-sm md:text-base text-white">{item.createdAt}</p>
+                </div>
+
+
+
+              </Link>
+
+
+
+
+            )
+          })
+
+        }
+
+
+
+
+      </div>
+    </div>
+  );
+};
+
+export default Album;

src/components/Navbar.jsx

@@ -1,22 +1,87 @@
-import React from 'react'
+import { TiThMenu } from "react-icons/ti";
+import { AiFillCloseCircle } from "react-icons/ai";
+import { useGSAP } from '@gsap/react';
+import gsap from 'gsap'
 import { Link } from 'react-router-dom'
+import logo from '../assets/images/ciitmLogo.png'
 
 const Navbar = () => {
+
+
+  let Toggle_Open = () =>{
+
+    let tl = gsap.timeline()
+
+    tl.to('.open_menu', {
+      display: 'none',
+    })
+
+
+    tl.to('.close_menu', {
+      display: 'block',
+    })
+
+      tl.to('nav', {
+        height: '100vh',
+        duration : 0.5,
+      })
+
+
+
+
+
+  }
+
+
+  let Toggle_Close = () =>{
+
+    let tl = gsap.timeline()
+
+
+
+
+    tl.to('.close_menu', {
+      display: 'none',
+    })
+
+    tl.to('.open_menu', {
+      display: 'block',
+    })
+
+      tl.to('nav', {
+        height: '8vh',
+        duration : 0.5,
+      })
+
+
+
+
+
+  }
+
+
   return (
-    <nav className='max-lg:bg-red-500 w-full py-[2vh] fixed top-0 left-0 bg-white flex items-center justify-between px-10'>
-        <div className="logo">
-            <h1 className='text-[1.8vw]'>CIITM</h1>
+
+    <nav className='w-screen lg:py-[2vh] fixed top-0 left-0 bg-[#333] lg:bg-white flex flex-col lg:flex-row items-center justify-between lg:px-10 overflow-hidden lg:overflow-visible gap-7 lg:gap-0 h-[8vh] lg:h-auto z-50 '>
+        <div className="logo flex justify-between items-center lg:items-start lg:justify-normal w-full h-fit lg:h-auto lg:w-auto px-5 py-2 lg:py-0 lg:px-0 bg-white">
+          <Link to='/'>
+            <img src={logo} alt="Ciitm Logo" className="h-2/3" />
+
+          </Link>
+            <TiThMenu  className="open_menu lg:hidden text-2xl  rounded-full w-12 h-full p-2 bg-[#333] text-white" onClick={Toggle_Open}/>
+            <AiFillCloseCircle  className="close_menu lg:hidden text-4xl   w-12 h-full  text-[#333] hidden" onClick={Toggle_Close}/>
+
         </div>
-        <div className="flex gap-[2vw] text-[.9vw]">
+        <div className="flex gap-[3vw] lg:gap-[2vw] text-2xl items-center  lg:mt-0 lg:items-start lg:text-[.9vw]  w-full  lg:w-fit flex-col lg:flex-row bg-[#333333] lg:bg-white text-white lg:text-black font-bold lg:font-medium">
             <Link to="/">Home</Link>
             <Link to="/about">About US</Link>
             <Link to="/gallery">Gallery</Link>
             <Link to="/students">Students</Link>
             <Link to="/contact">Contact Us</Link>
         </div>
-        <div className="btns flex items-center justify-center gap-2">
-            <button className='px-8 py-2 bg-[#333] text-white rounded-md'>Login</button>
-            <button className='px-4 py-2 bg-[#F9F9F9] rounded-md'>Registration</button>
+        <div className="btns flex items-center justify-center gap-2 flex-col w-[80%] mb-[15vh] lg:mb-0 lg:w-auto lg:flex-row">
+            <button className='px-8 py-2 w-full bg-blue-600 lg:bg-[#333] text-white rounded-md'>Login</button>
+            <button className='px-4 py-2 w-full bg-[#F9F9F9] rounded-md'>Registration</button>
         </div>
     </nav>
   )

src/components/Notice_Card.jsx

@@ -32,10 +32,12 @@ useGSAP(()=>{
   }
 
   return (
-    <div ref={box_ref} className='notice-card w-[60%] h-[5vh] text-black bg-white rounded-md px-3 py-2 flex items-start justify-between opacity-0'>
+
+    <div ref={box_ref} className='notice-card w-10/12 sm:w-10/12 lg:w-[37vw] 2xl:w-[25vw] md:h-fit md:py-2 text-black bg-white rounded-md px-2 py-1 lg:px-3 lg:py-[1vh] flex items-center justify-between opacity-0'>
 
-      <h3 className='w-1/2'>{title}</h3>
-      <button className='bg-[#FF0000] px-2 rounded text-white h-full'>
+      <h3 className='w-1/2 text-[1.2vh] sm:text-sm md:text-base'>{title}</h3>
+      <button className='bg-[#FF0000] px-2 lg:px-[1vw] rounded text-white md:h-fit md:py-1 h-[1.5rem] text-[1.2vh] sm:text-[1.5vh] md:text-sm'>
+
         Explore Now
       </button>
       <IoClose fontWeight={900} size={20} onClick={Handle_Clone_Btn} />