Merge branch 'main' into auth

CONTRIBUTION.md

@@ -63,6 +63,19 @@ We welcome pull requests for bug fixes, features, and documentation improvements
 
 <br>
 
+### 🤝 Steps to contribute to Chatbot
+Our chatbot is built using Botpress, a platform for creating powerful AI agents and chatbots. The conversation flow between users and the bot is manually generated using Botpress and can be improved to be more engaging and interactive.
+Exploring Botpress Studio, [documentation](https://botpress.com/docs/cloud/), and the chatbot itself are the best ways to identify areas for enhancement.
+
+- Raise an issue related to chatbot enhancement.
+- Create your botpress account and export the chatbot configurations to your botpress studio using `.bpz` file present in the project directory.
+- Make your changes and improvements.
+- Export your `.bpz` file having improved configurations and then replace the current `.bpz` file with yours.
+- Raise a PR and detail all the changes you've made (including screenshots, if possible).
+
+For reference: [documentation](https://botpress.com/docs/cloud/) | [video](https://www.youtube.com/watch?v=1EVE2jlFgOc)
+
+
 ## 🎨 Style Guides
 
 ### 📜 Git Commit Messages
@@ -276,4 +289,4 @@ Thank you for contributing to the Diabetes Prediction Website! Your efforts help
 
 ## **Happy Contributing 🔥** 
 
-<br>
+<br>

client/package.json

@@ -34,6 +34,7 @@
     "react-email-validator": "^1.0.2",
     "react-feather": "^2.0.10",
     "react-heatmap-grid": "^0.9.0",
+    "react-helmet": "^6.1.0",
     "react-icons": "^5.2.1",
     "react-router-dom": "^6.24.0",
     "react-scroll": "^1.9.0",

client/src/App.jsx

@@ -43,6 +43,44 @@ const App = () => {
         </AppWrapper>
       </Router>
     </GoogleOAuthProvider>
+import React from "react";
+import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
+import Navbar from "./components/Navbar";
+import Home from "./components/Home";
+import Prediction from "./components/Prediction";
+import DataInfo from "./components/DataInfo";
+import Visualization from "./components/Visualization";
+import Footer from "./components/Footer";
+import ContactUs from "./components/contact";
+import FloatBtn from "./components/FloatBtn";
+import FAQ from "./components/FAQ";
+import Helmet from "react-helmet";
+
+const App = () => {
+  return (
+    <>
+      <Helmet>
+        <script src="https://cdn.botpress.cloud/webchat/v2/inject.js"></script>
+        <script src="https://mediafiles.botpress.cloud/308f960c-95e7-4cc1-aa6a-f1c653965b80/webchat/v2/config.js"></script>
+      </Helmet>
+      <Router>
+        <div className="min-h-screen flex flex-col">
+          <Navbar />
+          <div className="flex-grow">
+            <Routes>
+              <Route path="/" element={<Home />} />
+              <Route path="/data-info" element={<DataInfo />} />
+              <Route path="/prediction" element={<Prediction />} />
+              <Route path="/visualization" element={<Visualization />} />
+              <Route path="/contact" element={<ContactUs />} />
+              <Route path="/FAQ" element={<FAQ />} />
+            </Routes>
+          </div>
+          <Footer />
+          <FloatBtn />
+        </div>
+      </Router>
+    </>
   );
 };
 

client/src/components/FloatBtn.jsx

@@ -33,8 +33,8 @@ const BackToTop = () => {
 
   const buttonStyles = {
     position: 'fixed',
-    bottom: '20px',
-    right: '10px',
+    bottom: '95px',
+    right: '40px',
     zIndex: 1000,
     backgroundColor: '#7E22CE',
     color: '#ffffff',

client/src/components/Footer.jsx

@@ -1,4 +1,4 @@
-import { FaInstagram, FaLinkedinIn, FaMapMarkerAlt, FaEnvelope, FaPhone } from 'react-icons/fa';
+import { FaInstagram, FaLinkedinIn, FaMapMarkerAlt, FaEnvelope, FaPhone, FaGithub, FaQuora } from 'react-icons/fa';
 import { Link } from 'react-router-dom';
 import logo from '../assets/tab-icon.png'; // Import your logo image
 
@@ -56,6 +56,12 @@ const Footer = () => {
             <a href="https://www.linkedin.com/in/bama-charan-chhandogi-b63420240/" className="text-white hover:text-gray-400 transition-colors duration-300">
               <FaLinkedinIn className="text-2xl" />
             </a>
+            <a href="https://github.com/BamaCharanChhandogi" className="text-white hover:text-gray-400 transition-colors duration-300">
+              <FaGithub className="text-2xl" />
+            </a>
+            <a href="https://quora.com/profile/Bama-Charan-Chhandogi" className="text-white hover:text-gray-400 transition-colors duration-300">
+              <FaQuora className="text-2xl" />
+            </a>
           </div>
         </div>
       </div>

client/src/components/Home.jsx

@@ -5,6 +5,7 @@ import predictionImg from "../assets/prediction.jpeg";
 import visualizationImg from "../assets/Visualization.jpeg";
 import { motion } from "framer-motion";
 import { Link } from "react-router-dom";
+import Testimonials from "./Testimonials/Testimonials.jsx";
 
 const Home = () => {
   return (
@@ -336,6 +337,18 @@ const Home = () => {
           </motion.div>
         </div>
       </div>
+      <motion.div
+  initial={{ opacity: 0, x: -150 }}
+  whileInView={{ opacity: 1, x: 0 }}
+  viewport={{ once: true }}
+  transition={{
+    duration: 0.8,
+    type: "spring",
+    stiffness: 100,
+    delay: 1,
+  }}>
+    <Testimonials />
+  </motion.div>
     </div>
   );
 };

client/src/components/Navbar.jsx

@@ -2,6 +2,10 @@ import React, { useState } from "react";
 import { Link } from "react-router-dom";
 import { CiStar } from "react-icons/ci";
 import { FaBars, FaTimes, FaGithub } from "react-icons/fa";
+import { FaGithub, FaBars, FaTimes } from "react-icons/fa"; 
+import { Link } from "react-router-dom";
+import { CiStar } from "react-icons/ci";
+import logo_final from '../assets/logo_final.png';
 
 const Navbar = () => {
   const [isOpen, setIsOpen] = useState(false);
@@ -14,13 +18,21 @@ const Navbar = () => {
     setIsOpen(false);
   };
 
+  const logoStyle = {
+    height: '60px',
+    width: '60px',
+    borderRadius: '50%',
+    marginRight: '10px',
+  };
+
   return (
-    <nav className="bg-gray-800 sticky z-50 top-0">
+    <nav className="bg-gray-800 sticky z-50 top-0" style={{ height: "5rem" }}>
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-        <div className="flex items-center justify-between h-16">
-          <div className="flex-shrink-0">
-            <Link to="/" className="text-white font-bold">
-              Diabetes Prediction App
+        <div className="flex items-center justify-between h-20">
+          <div className="flex items-center">
+            <Link to="/" className="text-white font-bold flex items-center">
+              <img src={logo_final} alt="Logo" style={logoStyle} />
+              <span className="ml-2">PreDiaBet</span>
             </Link>
           </div>
           <div className="hidden md:block">
@@ -67,11 +79,18 @@ const Navbar = () => {
               >
                 FAQ
               </Link>
+              <NavLink to="/" onClick={closeMenu}>Home</NavLink>
+              <NavLink to="/data-info" onClick={closeMenu}>Data Info</NavLink>
+              <NavLink to="/prediction" onClick={closeMenu}>Prediction</NavLink>
+              <NavLink to="/visualization" onClick={closeMenu}>Visualization</NavLink>
+              <NavLink to="/contact" onClick={closeMenu}>Contact Us</NavLink>
+              <NavLink to="/FAQ" onClick={closeMenu}>FAQ</NavLink>
               <a
                 href="https://github.com/BamaCharanChhandogi/Diabetes-Prediction"
                 target="_blank"
                 rel="noopener noreferrer"
-                className="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-md font-medium flex gap-2 items-center border-2 border-red-800"
+                className="flex items-center text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-md font-medium"
+                onClick={closeMenu}
               >
                 <CiStar className="w-7 h-7 text-yellow-500 font-bold" />
                 <FaGithub className="h-7 w-7" />
@@ -149,11 +168,17 @@ const Navbar = () => {
           >
             FAQ
           </Link>
+          <NavLink to="/" onClick={closeMenu}>Home</NavLink>
+          <NavLink to="/data-info" onClick={closeMenu}>Data Info</NavLink>
+          <NavLink to="/prediction" onClick={closeMenu}>Prediction</NavLink>
+          <NavLink to="/visualization" onClick={closeMenu}>Visualization</NavLink>
+          <NavLink to="/contact" onClick={closeMenu}>Contact Us</NavLink>
+          <NavLink to="/FAQ" onClick={closeMenu}>FAQ</NavLink>
           <a
             href="https://github.com/BamaCharanChhandogi/Diabetes-Prediction"
             target="_blank"
             rel="noopener noreferrer"
-            className="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium flex gap-2 items-center"
+            className="flex items-center text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium"
             onClick={closeMenu}
           >
             <CiStar className="w-5 h-5 text-yellow-500 font-bold" />
@@ -166,4 +191,15 @@ const Navbar = () => {
   );
 };
 
-export default Navbar;
+// Custom NavLink component for internal links
+const NavLink = ({ to, children, onClick }) => (
+  <Link
+    to={to}
+    onClick={onClick}
+    className="flex items-center text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-md font-medium"
+  >
+    {children}
+  </Link>
+);
+
+export default Navbar;