added services section

Abubokkor98 · Jan 19, 2025 · cf9c981 · cf9c981
1 parent 24b5952
commit cf9c981
Show file tree

Hide file tree

Showing 13 changed files with 161 additions and 121 deletions.
diff --git a/.firebase/hosting.ZGlzdA.cache b/.firebase/hosting.ZGlzdA.cache
@@ -0,0 +1,6 @@
+index.html,1737309080942,01a2753341561222b6f58fa2c5c093a6fb6797f34146c2e4806428ed50a3328f
+vite.svg,1735530934329,699a02e0e68a579f687d364bbbe7633161244f35af068220aee37b1b33dfb3c7
+assets/default-avatar-DVE6JZcB.png,1737309080942,fcb2010c531eb12e0670e1f7aebf51fb79845156e605db81a461d7ee220218dd
+assets/index-ChCOBgsh.css,1737309080943,bd3485d64ee70255ba7875266048c0a4487fa2fa0a3177ee8cb7828ae0f3350c
+assets/teamwork-CThP8H8_.jpg,1737309080942,aa0a35edb27afafab2f8acdc32128a50b6eef727c7c79e72767119e232c0b7ca
+assets/index-DIAyA-cN.js,1737309080943,9d50eabe7b784d4ed01b06f0d40615e82386bba56934ebf06e29d6fd12ec872a
diff --git a/.firebaserc b/.firebaserc
@@ -0,0 +1,5 @@
+{
+  "projects": {
+    "default": "assignment-12-7ff66"
+  }
+}
diff --git a/firebase.json b/firebase.json
@@ -0,0 +1,16 @@
+{
+  "hosting": {
+    "public": "dist",
+    "ignore": [
+      "firebase.json",
+      "**/.*",
+      "**/node_modules/**"
+    ],
+    "rewrites": [
+      {
+        "source": "**",
+        "destination": "/index.html"
+      }
+    ]
+  }
+}
diff --git a/index.html b/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React</title>
+    <title>WorkForce Pro</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -16,6 +16,7 @@
     "axios": "^1.7.9",
     "date-fns": "^4.1.0",
     "firebase": "^11.1.0",
+    "framer-motion": "^11.18.1",
     "moment": "^2.30.1",
     "react": "^18.3.1",
     "react-awesome-reveal": "^4.3.1",

diff --git a/public/_redirects b/public/_redirects
@@ -0,0 +1 @@
+/*    /index.html    200
diff --git a/src/assets/banner-img.png b/src/assets/banner-img.png
diff --git a/src/assets/teamwork.jpg b/src/assets/teamwork.jpg
diff --git a/src/components/Banner.jsx b/src/components/Banner.jsx
@@ -1,5 +1,5 @@
 import { Fade } from "react-awesome-reveal";
-import bannerImg from "../assets/Teamwork.jpg";
+import bannerImg from "../assets/banner-img.png";
 
 export default function Banner() {
   return (
@@ -8,7 +8,7 @@ export default function Banner() {
         {/* Left Section */}
         <div className="text-center md:text-left max-w-xl">
           <Fade direction="left" triggerOnce>
-            <h1 className="text-4xl md:text-5xl font-bold leading-snug text-primary">
+            <h1 className="text-4xl font-bold leading-snug text-primary">
               Empowering Employees, Elevating Businesses
             </h1>
             <p className="mt-6 text-lg text-text">
@@ -39,7 +39,7 @@ export default function Banner() {
               <img
                 src={bannerImg}
                 alt="Teamwork Success"
-                className="relative z-10 rounded-lg shadow-2xl hover:scale-105 transition-transform duration-300"
+                className="relative z-10 rounded-lg shadow-2xl w-[320px] h-[320px]"
               />
             </div>
           </div>

diff --git a/src/components/OurServices.jsx b/src/components/OurServices.jsx
@@ -0,0 +1,79 @@
+import React from "react";
+import { motion } from "framer-motion";
+import { FaUserTie, FaTasks, FaMoneyCheckAlt, FaChartLine } from "react-icons/fa";
+
+const services = [
+  {
+    id: 1,
+    title: "Employee Management",
+    description:
+      "Efficiently manage employee records, performance, and payroll with our streamlined tools.",
+    icon: <FaUserTie />,
+    bgColor: "bg-primary",
+  },
+  {
+    id: 2,
+    title: "HR Solutions",
+    description:
+      "Simplify HR processes, recruitment, and onboarding with advanced solutions.",
+    icon: <FaTasks />,
+    bgColor: "bg-secondary",
+  },
+  {
+    id: 3,
+    title: "Payroll Processing",
+    description:
+      "Automate salary processing and ensure timely and accurate payouts.",
+    icon: <FaMoneyCheckAlt />,
+    bgColor: "bg-accent",
+  },
+  {
+    id: 4,
+    title: "Performance Tracking",
+    description:
+      "Monitor employee performance and provide valuable feedback for growth.",
+    icon: <FaChartLine />,
+    bgColor: "bg-text",
+  },
+];
+
+export default function OurServices() {
+  return (
+    <section className="bg-background py-16">
+      <div className="container mx-auto px-4 text-center">
+        {/* Section Heading */}
+        <motion.h2
+          className="text-primary text-4xl font-bold mb-12"
+          initial={{ opacity: 0, y: -50 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8 }}
+        >
+          Our Services
+        </motion.h2>
+
+        {/* Services Grid */}
+        <div className="grid gap-8 sm:grid-cols-2 lg:grid-cols-4">
+          {services.map((service, index) => (
+            <motion.div
+              key={service.id}
+              className={`flex flex-col items-center rounded-lg shadow-lg p-6 ${service.bgColor} transition-transform transform hover:-translate-y-2`}
+              initial={{ opacity: 0, scale: 0.9 }}
+              whileInView={{ opacity: 1, scale: 1 }}
+              viewport={{ once: true, amount: 0.2 }}
+              transition={{
+                duration: 0.6,
+                delay: index * 0.2, // Add a stagger effect for each card
+              }}
+            >
+              <div className="text-5xl text-white mb-4">{service.icon}</div>
+              <h3 className="text-xl font-bold text-white mb-3">
+                {service.title}
+              </h3>
+              <p className="text-sm text-white">{service.description}</p>
+            </motion.div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/src/pages/home/Home.jsx b/src/pages/home/Home.jsx
@@ -1,6 +1,8 @@
 import React from "react";
 import Banner from "../../components/Banner";
 import { Helmet } from "react-helmet-async";
+import OurServices from "../../components/OurServices";
+import DashBoard from "../../test/DashBoard";
 
 export default function Home() {
   return (
@@ -9,6 +11,8 @@ export default function Home() {
         <title>Home | WorkForce Pro</title>
       </Helmet>
       <Banner></Banner>
+      <OurServices></OurServices>
+      {/* <DashBoard></DashBoard> */}
     </div>
   );
 }
diff --git a/src/test/DashBoard.jsx b/src/test/DashBoard.jsx
@@ -1,5 +1,5 @@
-import React from 'react'
-import { Fade } from 'react-awesome-reveal'
+import React from "react";
+import { Fade } from "react-awesome-reveal";
 
 export default function DashBoard() {
   return (
@@ -81,7 +81,8 @@ export default function DashBoard() {
           </h3>
           <ul className="space-y-3">
             <li className="bg-background p-3 rounded-md">
-              New employee <strong>Emily Johnson</strong> added to IT department.
+              New employee <strong>Emily Johnson</strong> added to IT
+              department.
             </li>
             <li className="bg-background p-3 rounded-md">
               Weekly attendance report is available.
@@ -94,118 +95,5 @@ export default function DashBoard() {
         </div>
       </div>
     </div>
-  )
+  );
 }
-
-/**  payment history */
-// import React, { useEffect, useState } from "react";
-// import axios from "axios";
-// import ReactPaginate from "react-paginate";
-
-// const PaymentHistory = () => {
-//   const [payments, setPayments] = useState([]);
-//   const [currentPage, setCurrentPage] = useState(0);
-//   const [itemsPerPage] = useState(5); // Change this value to increase/decrease items per page
-//   const [loading, setLoading] = useState(true);
-
-//   // Fetch payment history
-//   useEffect(() => {
-//     const fetchPayments = async () => {
-//       try {
-//         setLoading(true);
-//         const response = await axios.get("/api/payment-history"); // Update with your API endpoint
-//         const sortedPayments = response.data.sort((a, b) =>
-//           new Date(a.date) - new Date(b.date)
-//         );
-//         setPayments(sortedPayments);
-//       } catch (error) {
-//         console.error("Failed to fetch payment history:", error);
-//       } finally {
-//         setLoading(false);
-//       }
-//     };
-
-//     fetchPayments();
-//   }, []);
-
-//   // Paginate payments
-//   const startIndex = currentPage * itemsPerPage;
-//   const endIndex = startIndex + itemsPerPage;
-//   const displayedPayments = payments.slice(startIndex, endIndex);
-
-//   // Handle page change
-//   const handlePageClick = (event) => {
-//     setCurrentPage(event.selected);
-//   };
-
-//   if (loading) {
-//     return (
-//       <div className="flex items-center justify-center h-screen">
-//         <div className="text-primary text-xl font-semibold">Loading...</div>
-//       </div>
-//     );
-//   }
-
-//   return (
-//     <div className="container mx-auto px-4 py-6">
-//       <h2 className="text-2xl font-bold text-text mb-4">Payment History</h2>
-//       <div className="overflow-x-auto shadow-md rounded-lg">
-//         <table className="min-w-full bg-white rounded-lg shadow-md">
-//           <thead>
-//             <tr className="bg-primary text-white text-left">
-//               <th className="px-6 py-3">Month, Year</th>
-//               <th className="px-6 py-3">Amount</th>
-//               <th className="px-6 py-3">Transaction ID</th>
-//             </tr>
-//           </thead>
-//           <tbody>
-//             {displayedPayments.length > 0 ? (
-//               displayedPayments.map((payment, index) => (
-//                 <tr
-//                   key={index}
-//                   className={`border-b ${
-//                     index % 2 === 0 ? "bg-gray-100" : "bg-gray-50"
-//                   } hover:bg-accent`}
-//                 >
-//                   <td className="px-6 py-3">
-//                     {payment.month}, {payment.year}
-//                   </td>
-//                   <td className="px-6 py-3">${payment.amount}</td>
-//                   <td className="px-6 py-3">{payment.transactionId}</td>
-//                 </tr>
-//               ))
-//             ) : (
-//               <tr>
-//                 <td
-//                   colSpan={3}
-//                   className="text-center text-red-500 font-medium py-4"
-//                 >
-//                   No payment history found.
-//                 </td>
-//               </tr>
-//             )}
-//           </tbody>
-//         </table>
-//       </div>
-//       {payments.length > itemsPerPage && (
-//         <div className="mt-6">
-//           <ReactPaginate
-//             previousLabel={"Previous"}
-//             nextLabel={"Next"}
-//             pageCount={Math.ceil(payments.length / itemsPerPage)}
-//             onPageChange={handlePageClick}
-//             containerClassName={"pagination flex justify-center gap-4"}
-//             activeClassName={"text-accent font-bold"}
-//             previousClassName={"px-4 py-2 bg-primary text-white rounded-md"}
-//             nextClassName={"px-4 py-2 bg-primary text-white rounded-md"}
-//             pageClassName={"px-3 py-1 rounded-md"}
-//             breakLabel={"..."}
-//           />
-//         </div>
-//       )}
-//     </div>
-//   );
-// };
-
-// export default PaymentHistory;
-