Merge pull request #30 from Krishna100604/main

navbar and 3 ways to download certificate

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",

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>
   );
 };

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;