lcepl-frontend/src/App.js

// src/App.js
import React, { useEffect } from 'react';
import './index.css';
import { Routes, Route, useLocation } from 'react-router-dom';
import Header from './components/Header';
import Footer from './components/Footer';

import Home from './pages/Home';
import AboutUs from './pages/AboutUs';
import Careers from './pages/Careers';
import Office from './pages/Office';
import ContactUs from './pages/ContactUs';
import Gallery from './pages/Gallery';
import Projects from './pages/Projects';
import AddProjects from './pages/AddProjects';
import GalleryAdmin from './pages/GalleryAdmin';
import BlogList from './pages/BlogList';
import BlogDetail from './pages/BlogDetail';
import JobApplicationForm from './pages/JobApplicationForm';

// Admin
import ProtectedRoute from './components/ProtectedRoute';
import AdminLogin from './pages/AdminLogin';
import AdminLayout from './components/AdminLayout';
import HRAdmin from './pages/HRAdmin';

import { ToastContainer } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

// ScrollToTop component
const ScrollToTop = () => {
  const { pathname } = useLocation();
  useEffect(() => {
    window.scrollTo(0, 0);
  }, [pathname]);
  return null;
};

const App = () => {
  return (
    <>
      <ScrollToTop /> {/* ensures scroll starts at top on route change */}

      <Routes>
        {/* Admin Login */}
        <Route path="/admin-login" element={<AdminLogin />} />

        {/* Protected Admin Routes with Layout */}
        <Route
          path="/admin"
          element={
            <ProtectedRoute>
              <AdminLayout />
            </ProtectedRoute>
          }
        >
          <Route path="projects" element={<AddProjects />} />
          <Route path="gallery" element={<GalleryAdmin />} />
          <Route path="hr" element={<HRAdmin />} />
        </Route>

        {/* Public Routes */}
        <Route
          path="/"
          element={
            <>
              <Header />
              <Home />
              <Footer />
            </>
          }
        />
        <Route
        path="/job-application"
        element={
          <>
            <Header />
            <JobApplicationForm />
            <Footer />
          </>
        }
      />

        <Route
          path="/about-us"
          element={
            <>
              <Header />
              <AboutUs />
              <Footer />
            </>
          }
        />
        <Route
          path="/careers"
          element={
            <>
              <Header />
              <Careers />
              <Footer />
            </>
          }
        />
        <Route
          path="/careers"
          element={
            <>
              <Header />
              <Careers />
              <Footer />
            </>
          }
        />
       
        <Route
          path="/office"
          element={
            <>
              <Header />
              <Office />
              <Footer />
            </>
          }
        />
        <Route
          path="/contact-us"
          element={
            <>
              <Header />
              <ContactUs />
              <Footer />
            </>
          }
        />
        <Route
          path="/gallery"
          element={
            <>
              <Header />
              <Gallery />
              <Footer />
            </>
          }
        />
        <Route
          path="/projects"
          element={
            <>
              <Header />
              <Projects />
              <Footer />
            </>
          }
        />
        <Route
          path="/blog"
          element={
            <>
              <Header />
              <BlogList />
              <Footer />
            </>
          }
        />
        <Route
          path="/blog/:slug"
          element={
            <>
              <Header />
              <BlogDetail />
              <Footer />
            </>
          }
        />

        {/* Fallback Route */}
        <Route
          path="*"
          element={
            <>
              <Header />
              <Home />
              <Footer />
            </>
          }
        />
      </Routes>

      <ToastContainer />
    </>
  );
};

export default App;