diff --git a/certificate-generator/package-lock.json b/certificate-generator/package-lock.json
index b0ee6d4..c28f204 100644
--- a/certificate-generator/package-lock.json
+++ b/certificate-generator/package-lock.json
@@ -11,7 +11,8 @@
         "html2pdf.js": "^0.10.2",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
-        "react-icons": "^5.2.1"
+        "react-icons": "^5.2.1",
+        "react-router-dom": "^6.24.1"
       },
       "devDependencies": {
         "@types/react": "^18.3.3",
@@ -1006,6 +1007,14 @@
         "node": ">=14"
       }
     },
+    "node_modules/@remix-run/router": {
+      "version": "1.17.1",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.17.1.tgz",
+      "integrity": "sha512-mCOMec4BKd6BRGBZeSnGiIgwsbLGp3yhVqAD8H+PxiRNEHgDpZb8J1TnrSDlg97t0ySKMQJTHCWBCmBpSmkF6Q==",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/@rollup/rollup-android-arm-eabi": {
       "version": "4.18.0",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.18.0.tgz",
@@ -4378,6 +4387,36 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "6.24.1",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.24.1.tgz",
+      "integrity": "sha512-PTXFXGK2pyXpHzVo3rR9H7ip4lSPZZc0bHG5CARmj65fTT6qG7sTngmb6lcYu1gf3y/8KxORoy9yn59pGpCnpg==",
+      "dependencies": {
+        "@remix-run/router": "1.17.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.24.1",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.24.1.tgz",
+      "integrity": "sha512-U19KtXqooqw967Vw0Qcn5cOvrX5Ejo9ORmOtJMzYWtCT4/WOfFLIZGGsVLxcd9UkBO0mSTZtXqhZBsWlHr7+Sg==",
+      "dependencies": {
+        "@remix-run/router": "1.17.1",
+        "react-router": "6.24.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
diff --git a/certificate-generator/package.json b/certificate-generator/package.json
index 120e123..53a1ef7 100644
--- a/certificate-generator/package.json
+++ b/certificate-generator/package.json
@@ -13,7 +13,8 @@
     "html2pdf.js": "^0.10.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-icons": "^5.2.1"
+    "react-icons": "^5.2.1",
+    "react-router-dom": "^6.24.1"
   },
   "devDependencies": {
     "@types/react": "^18.3.3",
diff --git a/certificate-generator/src/App.jsx b/certificate-generator/src/App.jsx
index aa73b74..40deb2d 100644
--- a/certificate-generator/src/App.jsx
+++ b/certificate-generator/src/App.jsx
@@ -1,17 +1,27 @@
 import React from "react";
 import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
+import Navbar from "./Compenents/Navbar";
 import Home from "./Home/HomePage";
 import CertificateGenerator from "./Compenents/Certificate";
 import ContactForm from "./Compenents/Contact";
+import Services from "./Compenents/Service";
+import About from "./Compenents/About";
 
 const App = () => {
   return (
     <Router>
-      <Routes>
-        <Route path="/" element={<Home />} />
-        <Route path="/certificate-generator" element={<CertificateGenerator />} />
-        <Route path="/contact" element={<ContactForm />} />
-      </Routes>
+      <div className="flex flex-col min-h-screen">
+        <Navbar />
+        <main className="flex-grow">
+          <Routes>
+            <Route path="/" element={<Home />} />
+            <Route path="/certificate-generator" element={<CertificateGenerator />} />
+            <Route path="/contact" element={<ContactForm />} />
+            <Route path="/services" element={<Services />} />
+            <Route path="/about" element={<About />} />
+          </Routes>
+        </main>
+      </div>
     </Router>
   );
 };
diff --git a/certificate-generator/src/Compenents/About.jsx b/certificate-generator/src/Compenents/About.jsx
new file mode 100644
index 0000000..d875759
--- /dev/null
+++ b/certificate-generator/src/Compenents/About.jsx
@@ -0,0 +1,29 @@
+// About.js
+
+import React from 'react';
+
+const About = () => {
+    return (
+        <div className="min-h-screen flex flex-col justify-center items-center bg-gradient-to-br from-purple-200 to-pink-200">
+            <header className="text-center mb-8">
+                <h1 className="text-4xl font-bold">About Us</h1>
+                <p className="mt-4 text-lg text-gray-700">Learn more about our company:</p>
+            </header>
+            <section className="max-w-3xl mx-auto mb-8">
+                <h2 className="text-2xl font-bold mb-4">Our Mission</h2>
+                <p className="text-lg text-gray-800">
+                    Description of your company's mission.
+                </p>
+            </section>
+            <section className="max-w-3xl mx-auto mb-8">
+                <h2 className="text-2xl font-bold mb-4">Our Team</h2>
+                <p className="text-lg text-gray-800">
+                    Meet our dedicated team members.
+                </p>
+            </section>
+            {/* Add more about us sections as needed */}
+        </div>
+    );
+};
+
+export default About;
diff --git a/certificate-generator/src/Compenents/Certificate.jsx b/certificate-generator/src/Compenents/Certificate.jsx
index aec685f..e9d1953 100644
--- a/certificate-generator/src/Compenents/Certificate.jsx
+++ b/certificate-generator/src/Compenents/Certificate.jsx
@@ -10,123 +10,191 @@ const CertificateGenerator = () => {
   const [designation, setDesignation] = useState("");
   const [certificateGenerated, setCertificateGenerated] = useState(false);
 
-  const generateCertificate = () => {
-    const date = new Date().toLocaleDateString();
-    const cinNumber = `CIN: ${generateRandomString(21)}`;
-    const officeAddress = "1234 Elm Street, Suite 567, City, State, 12345";
-    const website = "https://www.example.com";
-    const phoneNumber = "+1 (123) 456-7890";
+  const generateRandomString = (length) => {
+    const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+    let result = "";
+    for (let i = 0; i < length; i++) {
+      result += characters.charAt(Math.floor(Math.random() * characters.length));
+    }
+    return result;
+  };
 
+  const generateCertificate = () => {
     setCertificateGenerated(true);
 
     // Scroll to certificate section
     setTimeout(() => {
-      document.getElementById("certificate-section").scrollIntoView({
-        behavior: "smooth",
-      });
+      const certificateSection = document.getElementById("certificate-section");
+      if (certificateSection) {
+        certificateSection.scrollIntoView({ behavior: "smooth" });
+      }
     }, 500);
   };
 
-  const downloadCertificate = () => {
+  const downloadCertificate = (format) => {
     const element = document.getElementById("certificate");
-    html2pdf()
-      .set({
-        margin: 0,
-        filename: "Experience_Certificate.pdf",
-        image: { type: "jpeg", quality: 0.98 },
-        html2canvas: { scale: 2, windowWidth: 210 * 2.83, windowHeight: 297 * 2.83 },
-        jsPDF: { unit: "mm", format: "a4", orientation: "portrait" },
-      })
-      .from(element)
-      .save();
+    switch (format) {
+      case "pdf":
+        html2pdf()
+          .set({
+            margin: 0,
+            filename: "Experience_Certificate.pdf",
+            image: { type: "jpeg", quality: 0.98 },
+            html2canvas: { scale: 2, windowWidth: 210 * 2.83, windowHeight: 297 * 2.83 },
+            jsPDF: { unit: "mm", format: "a4", orientation: "portrait" },
+          })
+          .from(element)
+          .save();
+        break;
+      case "doc":
+        downloadAsDoc();
+        break;
+      case "txt":
+        downloadAsTxt();
+        break;
+      default:
+        break;
+    }
   };
 
-  const generateRandomString = (length) => {
-    const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
-    let result = "";
-    for (let i = 0; i < length; i++) {
-      result += characters.charAt(Math.floor(Math.random() * characters.length));
-    }
-    return result;
+  const downloadAsDoc = () => {
+    const content = `
+      <html xmlns:v="urn:schemas-microsoft-com:vml"
+            xmlns:o="urn:schemas-microsoft-com:office:office"
+            xmlns:w="urn:schemas-microsoft-com:office:word"
+            xmlns:m="http://schemas.microsoft.com/office/2004/12/omml"
+            xmlns="http://www.w3.org/TR/REC-html40">
+      <head><meta charset="utf-8"><title>Experience Certificate</title></head>
+      <body>
+        <h2>Experience Certificate</h2>
+        <p>This is to certify that <strong>${employeeName}</strong> has worked as a <strong>${designation}</strong> at <strong>${companyName}</strong> for a duration of <strong>${duration}</strong>.</p>
+        <p>During their tenure, they have demonstrated excellent performance and contributed significantly to the success of our organization.</p>
+        <p>We wish them all the best in their future endeavors.</p>
+        <p><strong>Signature</strong></p>
+        <h3>${companyName}</h3>
+        <p>1234 Elm Street, Suite 567, City, State, 12345</p>
+        <p>CIN: ${generateRandomString(21)}</p>
+        <p>Website: https://www.example.com</p>
+        <p>Phone: +1 (123) 456-7890</p>
+      </body>
+      </html>
+    `;
+    const blob = new Blob(['\ufeff', content], { type: "application/msword" });
+    const link = document.createElement("a");
+    link.href = URL.createObjectURL(blob);
+    link.download = "Experience_Certificate.doc";
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  };
+
+  const downloadAsTxt = () => {
+    const textContent = `Experience Certificate\n\n
+      This is to certify that ${employeeName} has worked as a ${designation} at ${companyName} for a duration of ${duration}.\n
+      During their tenure, they have demonstrated excellent performance and contributed significantly to the success of our organization.\n
+      We wish them all the best in their future endeavors.\n
+      \n
+      Signature\n
+      ${companyName}
+      \n\n
+      1234 Elm Street, Suite 567, City, State, 12345
+      \n
+      CIN: ${generateRandomString(21)}
+      \n
+      Website: https://www.example.com
+      \n
+      Phone: +1 (123) 456-7890
+    `;
+    const blob = new Blob([textContent], { type: "text/plain" });
+    const link = document.createElement("a");
+    link.href = URL.createObjectURL(blob);
+    link.download = "Experience_Certificate.txt";
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
   };
 
   return (
     <motion.section
-      className="form-section bg-white p-6 rounded shadow-md mx-auto max-w-lg"
+      className="min-h-screen flex flex-col items-center justify-center bg-gradient-to-br from-gray-100 to-gray-300 p-6"
       initial={{ opacity: 0 }}
       animate={{ opacity: 1 }}
     >
-      <h2 className="text-3xl font-bold mb-6 text-center">Generate Certificate</h2>
-      <form id="certificate-form" className="space-y-4">
-        <div className="form-group">
-          <label htmlFor="employeeName" className="block text-sm font-semibold mb-1">
-            <FiUser className="inline-block mr-2" /> Employee Name:
-          </label>
-          <input
-            type="text"
-            id="employeeName"
-            name="employeeName"
-            required
-            className="w-full p-3 border border-gray-300 rounded focus:outline-none focus:border-green-600"
-            value={employeeName}
-            onChange={(e) => setEmployeeName(e.target.value)}
-          />
-        </div>
-        <div className="form-group">
-          <label htmlFor="companyName" className="block text-sm font-semibold mb-1">
-            <FiBriefcase className="inline-block mr-2" /> Company Name:
-          </label>
-          <input
-            type="text"
-            id="companyName"
-            name="companyName"
-            required
-            className="w-full p-3 border border-gray-300 rounded focus:outline-none focus:border-green-600"
-            value={companyName}
-            onChange={(e) => setCompanyName(e.target.value)}
-          />
-        </div>
-        <div className="form-group">
-          <label htmlFor="duration" className="block text-sm font-semibold mb-1">
-            <FiCalendar className="inline-block mr-2" /> Duration:
-          </label>
-          <input
-            type="text"
-            id="duration"
-            name="duration"
-            required
-            className="w-full p-3 border border-gray-300 rounded focus:outline-none focus:border-green-600"
-            value={duration}
-            onChange={(e) => setDuration(e.target.value)}
-          />
-        </div>
-        <div className="form-group">
-          <label htmlFor="designation" className="block text-sm font-semibold mb-1">
-            <FiMapPin className="inline-block mr-2" /> Designation:
-          </label>
-          <input
-            type="text"
-            id="designation"
-            name="designation"
-            required
-            className="w-full p-3 border border-gray-300 rounded focus:outline-none focus:border-green-600"
-            value={designation}
-            onChange={(e) => setDesignation(e.target.value)}
-          />
-        </div>
-        <button
-          type="button"
-          onClick={generateCertificate}
-          className="bg-green-600 text-white py-3 px-6 rounded hover:bg-green-700 focus:outline-none focus:bg-green-700 transition duration-300 w-full"
-        >
-          Generate Certificate
-        </button>
-      </form>
+      <div className="bg-white p-6 rounded shadow-md w-full max-w-md">
+        <h2 className="text-3xl font-bold mb-6 text-center">Generate Certificate</h2>
+        <form id="certificate-form" className="space-y-4">
+          <div className="form-group">
+            <label htmlFor="employeeName" className="block text-sm font-semibold mb-1">
+              <FiUser className="inline-block mr-2" /> Employee Name:
+            </label>
+            <input
+              type="text"
+              id="employeeName"
+              name="employeeName"
+              required
+              className="w-full p-3 border border-gray-300 rounded focus:outline-none focus:border-green-600"
+              value={employeeName}
+              onChange={(e) => setEmployeeName(e.target.value)}
+            />
+          </div>
+          <div className="form-group">
+            <label htmlFor="companyName" className="block text-sm font-semibold mb-1">
+              <FiBriefcase className="inline-block mr-2" /> Company Name:
+            </label>
+            <input
+              type="text"
+              id="companyName"
+              name="companyName"
+              required
+              className="w-full p-3 border border-gray-300 rounded focus:outline-none focus:border-green-600"
+              value={companyName}
+              onChange={(e) => setCompanyName(e.target.value)}
+            />
+          </div>
+          <div className="form-group">
+            <label htmlFor="duration" className="block text-sm font-semibold mb-1">
+              <FiCalendar className="inline-block mr-2" /> Duration:
+            </label>
+            <input
+              type="text"
+              id="duration"
+              name="duration"
+              required
+              className="w-full p-3 border border-gray-300 rounded focus:outline-none focus:border-green-600"
+              value={duration}
+              onChange={(e) => setDuration(e.target.value)}
+            />
+          </div>
+          <div className="form-group">
+            <label htmlFor="designation" className="block text-sm font-semibold mb-1">
+              <FiMapPin className="inline-block mr-2" /> Designation:
+            </label>
+            <input
+              type="text"
+              id="designation"
+              name="designation"
+              required
+              className="w-full p-3 border border-gray-300 rounded focus:outline-none focus:border-green-600"
+              value={designation}
+              onChange={(e) => setDesignation(e.target.value)}
+            />
+          </div>
+          <motion.button
+            type="button"
+            onClick={generateCertificate}
+            className="bg-green-600 text-white py-3 px-6 rounded hover:bg-green-700 focus:outline-none focus:bg-green-700 transition duration-300 w-full"
+            whileHover={{ scale: 1.05 }}
+            whileTap={{ scale: 0.95 }}
+          >
+            Generate Certificate
+          </motion.button>
+        </form>
+      </div>
 
       {certificateGenerated && (
         <motion.section
           id="certificate-section"
-          className="certificate-section bg-white p-6 mt-8 rounded shadow-md mx-auto max-w-4xl"
+          className="bg-white p-6 mt-8 rounded shadow-md w-full max-w-4xl"
           initial={{ opacity: 0 }}
           animate={{ opacity: 1 }}
         >
@@ -143,40 +211,14 @@ const CertificateGenerator = () => {
               </p>
             </div>
             <h2 className="text-2xl font-bold mb-4">Experience Certificate</h2>
-            <div id="cerdiv" className="mb-8">
-              <p>
-                This is to certify that{" "}
-                <span id="cert-employeeName" className="font-semibold">
-                  {employeeName}
-                </span>{" "}
-                has worked as a{" "}
-                <span id="cert-designation" className="font-semibold">
-                  {designation}
-                </span>{" "}
-                at{" "}
-                <span id="cert-companyName" className="font-semibold">
-                  {companyName}
-                </span>{" "}
-                for a duration of{" "}
-                <span id="cert-duration" className="font-semibold">
-                  {duration}
-                </span>
-                .
-              </p>
-              <p>
-                During their tenure, they have demonstrated excellent performance and contributed
-                significantly to the success of our organization.
-              </p>
-              <p>We wish them all the best in their future endeavors.</p>
-            </div>
-            <div className="signature-section text-left mb-8">
-              <p>
-                <strong>Signature</strong>
-              </p>
-              <h3 id="cert-companyFullName" className="font-semibold">
-                {companyName}
-              </h3>
-            </div>
+            <p id="cert-content" className="text-justify mb-6">
+              This is to certify that <strong>{employeeName}</strong> has worked as a <strong>{designation}</strong> at <strong>{companyName}</strong> for a duration of <strong>{duration}</strong>.
+              During their tenure, they have demonstrated excellent performance and contributed significantly to the success of our organization.
+              We wish them all the best in their future endeavors.
+            </p>
+            <p id="cert-signature" className="mb-6">
+              <strong>Signature</strong>
+            </p>
             <div className="footer">
               <div className="footer-line">
                 <p id="cert-officeAddress">
@@ -197,13 +239,32 @@ const CertificateGenerator = () => {
               </div>
             </div>
           </div>
-          <button
-            id="downloadBtn"
-            onClick={downloadCertificate}
-            className="bg-blue-600 text-white py-2 px-4 mt-4 rounded hover:bg-blue-700 focus:outline-none focus:bg-blue-700 transition duration-300 w-full"
-          >
-            Download Certificate
-          </button>
+          <div className="mt-4 flex justify-around">
+            <motion.button
+              onClick={() => downloadCertificate("pdf")}
+              className="bg-blue-600 text-white py-2 px-4 rounded hover:bg-blue-700 focus:outline-none focus:bg-blue-700 transition duration-300"
+              whileHover={{ scale: 1.05 }}
+              whileTap={{ scale: 0.95 }}
+            >
+              Download as PDF
+            </motion.button>
+            <motion.button
+              onClick={() => downloadCertificate("doc")}
+              className="bg-blue-600 text-white py-2 px-4 rounded hover:bg-blue-700 focus:outline-none focus:bg-blue-700 transition duration-300"
+              whileHover={{ scale: 1.05 }}
+              whileTap={{ scale: 0.95 }}
+            >
+              Download as DOC
+            </motion.button>
+            <motion.button
+              onClick={() => downloadCertificate("txt")}
+              className="bg-blue-600 text-white py-2 px-4 rounded hover:bg-blue-700 focus:outline-none focus:bg-blue-700 transition duration-300"
+              whileHover={{ scale: 1.05 }}
+              whileTap={{ scale: 0.95 }}
+            >
+              Download as TXT
+            </motion.button>
+          </div>
         </motion.section>
       )}
     </motion.section>
diff --git a/certificate-generator/src/Compenents/Contact.jsx b/certificate-generator/src/Compenents/Contact.jsx
index 8ef790d..288ee1e 100644
--- a/certificate-generator/src/Compenents/Contact.jsx
+++ b/certificate-generator/src/Compenents/Contact.jsx
@@ -43,7 +43,7 @@ const ContactForm = () => {
               <FiMessageCircle className="inline-block mr-2" /> Your Message:
             </label>
             <textarea
-              id="contactMessage"
+              id="contactMessage"SS
               name="contactMessage"
               placeholder="Enter your message"
               required
diff --git a/certificate-generator/src/Compenents/Navbar.jsx b/certificate-generator/src/Compenents/Navbar.jsx
new file mode 100644
index 0000000..47905ea
--- /dev/null
+++ b/certificate-generator/src/Compenents/Navbar.jsx
@@ -0,0 +1,49 @@
+import React, { useState } from "react";
+import { Link } from "react-router-dom";
+import { motion } from "framer-motion";
+import { FiMenu, FiX } from "react-icons/fi";
+
+const Navbar = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const toggleMenu = () => {
+    setIsOpen(!isOpen);
+  };
+
+  return (
+    <nav className="bg-gray-800 text-white p-4">
+      <div className="container mx-auto flex justify-between items-center">
+        <Link to="/" className="text-2xl font-bold">
+          Certificate Generator App
+        </Link>
+        <div className="md:hidden">
+          <button onClick={toggleMenu} className="focus:outline-none">
+            {isOpen ? <FiX size={24} /> : <FiMenu size={24} />}
+          </button>
+        </div>
+        <div className="hidden md:flex space-x-4">
+          <Link to="/" className="hover:text-gray-400">Home</Link>
+          <Link to="/certificate-generator" className="hover:text-gray-400">Certificate</Link>
+          <Link to="/services" className="hover:text-gray-400">Services</Link>
+          <Link to="/about" className="hover:text-gray-400">About</Link>
+          <Link to="/contact" className="hover:text-gray-400">Contact</Link>
+        </div>
+      </div>
+      {isOpen && (
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          className="md:hidden mt-4 space-y-2"
+        >
+          <Link to="/" className="block hover:text-gray-400" onClick={toggleMenu}>Home</Link>
+          <Link to="/certificate-generator" className="block hover:text-gray-400" onClick={toggleMenu}>Certificate</Link>
+          <Link to="/services" className="block hover:text-gray-400" onClick={toggleMenu}>Services</Link>
+          <Link to="/about" className="block hover:text-gray-400" onClick={toggleMenu}>About</Link>
+          <Link to="/contact" className="block hover:text-gray-400" onClick={toggleMenu}>Contact</Link>
+        </motion.div>
+      )}
+    </nav>
+  );
+};
+
+export default Navbar;
diff --git a/certificate-generator/src/Compenents/Service.jsx b/certificate-generator/src/Compenents/Service.jsx
new file mode 100644
index 0000000..3b337cc
--- /dev/null
+++ b/certificate-generator/src/Compenents/Service.jsx
@@ -0,0 +1,29 @@
+// Services.js
+
+import React from 'react';
+
+const Services = () => {
+    return (
+        <div className="min-h-screen flex flex-col justify-center items-center bg-gradient-to-br from-yellow-200 to-green-200">
+            <header className="text-center mb-8">
+                <h1 className="text-4xl font-bold">Our Services</h1>
+                <p className="mt-4 text-lg text-gray-700">Explore what we offer:</p>
+            </header>
+            <section className="max-w-3xl mx-auto mb-8">
+                <h2 className="text-2xl font-bold mb-4">Service 1</h2>
+                <p className="text-lg text-gray-800">
+                    Description of Service 1.
+                </p>
+            </section>
+            <section className="max-w-3xl mx-auto mb-8">
+                <h2 className="text-2xl font-bold mb-4">Service 2</h2>
+                <p className="text-lg text-gray-800">
+                    Description of Service 2.
+                </p>
+            </section>
+            {/* Add more services sections as needed */}
+        </div>
+    );
+};
+
+export default Services;
diff --git a/certificate-generator/src/Home/HomePage.jsx b/certificate-generator/src/Home/HomePage.jsx
index 76f871c..94dcaa6 100644
--- a/certificate-generator/src/Home/HomePage.jsx
+++ b/certificate-generator/src/Home/HomePage.jsx
@@ -1,30 +1,78 @@
+// Home.js
+
 import React from 'react';
 import { Link } from 'react-router-dom';
 import { motion } from 'framer-motion';
 
 const Home = () => {
     return (
-        <motion.div className="min-h-screen flex flex-col justify-center items-center bg-gray-100"
+        <motion.div className="min-h-screen flex flex-col justify-center items-center bg-gradient-to-br from-blue-200 to-purple-200"
             initial={{ opacity: 0 }}
             animate={{ opacity: 1 }}
         >
             <header className="text-center mb-8">
                 <h1 className="text-4xl font-bold">Welcome to Our Website</h1>
+                <p className="mt-4 text-lg text-gray-700">Explore what we have to offer:</p>
             </header>
-            <nav className="text-center">
+            <nav className="text-center mb-8">
                 <ul className="space-y-4">
-                    <li>
+                    <motion.li
+                        whileHover={{ scale: 1.05 }}
+                        whileTap={{ scale: 0.95 }}
+                    >
                         <Link to="/certificate-generator" className="bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded block transition duration-300">
                             Certificate Generator
                         </Link>
-                    </li>
-                    <li>
+                    </motion.li>
+                    <motion.li
+                        whileHover={{ scale: 1.05 }}
+                        whileTap={{ scale: 0.95 }}
+                    >
                         <Link to="/contact" className="bg-green-600 hover:bg-green-700 text-white py-2 px-4 rounded block transition duration-300">
                             Contact
                         </Link>
-                    </li>
+                    </motion.li>
+                    <motion.li
+                        whileHover={{ scale: 1.05 }}
+                        whileTap={{ scale: 0.95 }}
+                    >
+                        <Link to="/services" className="bg-yellow-600 hover:bg-yellow-700 text-white py-2 px-4 rounded block transition duration-300">
+                            Our Services
+                        </Link>
+                    </motion.li>
+                    <motion.li
+                        whileHover={{ scale: 1.05 }}
+                        whileTap={{ scale: 0.95 }}
+                    >
+                        <Link to="/about" className="bg-purple-600 hover:bg-purple-700 text-white py-2 px-4 rounded block transition duration-300">
+                            About Us
+                        </Link>
+                    </motion.li>
                 </ul>
             </nav>
+            <section className="max-w-3xl mx-auto mb-8">
+                <h2 className="text-2xl font-bold mb-4">Featured Content</h2>
+                <p className="text-lg text-gray-800">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eu nisl vitae justo dapibus venenatis in vel velit.
+                </p>
+                {/* Add more featured content or sections here */}
+            </section>
+            <section className="max-w-3xl mx-auto mb-8">
+                <h2 className="text-2xl font-bold mb-4">Latest News</h2>
+                <div className="flex space-x-4">
+                    <div className="bg-white p-4 shadow-md rounded-lg flex-1">
+                        <h3 className="text-lg font-semibold mb-2">News Title</h3>
+                        <p className="text-sm text-gray-600">Published on June 30, 2024</p>
+                        <p className="text-gray-700">
+                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce volutpat justo sit amet blandit lacinia.
+                        </p>
+                    </div>
+                    {/* Add more news items or cards here */}
+                </div>
+            </section>
+            <footer className="text-center text-gray-500">
+                <p>&copy; 2024 Company Name. All rights reserved.</p>
+            </footer>
         </motion.div>
     );
 };