From b81500ae46b8c1373430449bca5bc2e2ac8f5897 Mon Sep 17 00:00:00 2001
From: KumariAnjali <kumarianjali206700@gmail.com>
Date: Sat, 24 Aug 2024 20:22:46 +0530
Subject: [PATCH 1/2] Added Professor rating page, improved navbar

---
 src/app/(routes)/(home)/home/page.tsx | 10 +--
 src/app/(routes)/professor/page.tsx   | 10 +++
 src/components/Footer.tsx             |  2 +-
 src/components/Navbar.tsx             | 44 ++++++++++---
 src/components/Professor.tsx          | 95 +++++++++++++++++++++++++++
 5 files changed, 148 insertions(+), 13 deletions(-)
 create mode 100644 src/app/(routes)/professor/page.tsx
 create mode 100644 src/components/Professor.tsx

diff --git a/src/app/(routes)/(home)/home/page.tsx b/src/app/(routes)/(home)/home/page.tsx
index a3f7de5..4b32e5e 100644
--- a/src/app/(routes)/(home)/home/page.tsx
+++ b/src/app/(routes)/(home)/home/page.tsx
@@ -1,14 +1,16 @@
 import React from 'react'
+import { Navbar } from '@/components/Navbar'
 import { Chat } from './chat'
 import { Footer } from '@/components/Footer'
-import { Navbar } from '@/components/Navbar'
 
 type Props = {}
 
-export default function Home({}: Props) {
+export default function Home({ }: Props) {
   return (
-    <><><Chat />
+    <><> <Navbar /></>
+      <Chat />
       <Footer /></>
-      <Navbar /></>
+
+
   )
 }
\ No newline at end of file
diff --git a/src/app/(routes)/professor/page.tsx b/src/app/(routes)/professor/page.tsx
new file mode 100644
index 0000000..d17aab1
--- /dev/null
+++ b/src/app/(routes)/professor/page.tsx
@@ -0,0 +1,10 @@
+import Professor from '@/components/Professor';
+import React from 'react';
+
+export default function Page() {
+  return (
+    <div>
+      <Professor/> 
+    </div>
+  );
+}
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index faef700..0ce423c 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -20,7 +20,7 @@ export function Footer() {
             <Link href="/about" className="text-gray-400 hover:text-white text-xs md:text-sm"> {/* Reduced font size */}
               About Us
             </Link>
-            <Link href="/professors" className="text-gray-400 hover:text-white text-xs md:text-sm"> {/* Reduced font size */}
+            <Link href="/professor" className="text-gray-400 hover:text-white text-xs md:text-sm"> {/* Reduced font size */}
               Professors
             </Link>
             <Link href="/blog" className="text-gray-400 hover:text-white text-xs md:text-sm"> {/* Reduced font size */}
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index eb05c46..a236e1e 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -1,15 +1,14 @@
 
 "use client";
 import React from "react";
-import { FloatingNav } from "../components/ui/floating-navbar";
-import { FaHome, FaComments, FaGithub, FaBlog } from "react-icons/fa"; // Import Font Awesome icons
+import { FaHome, FaComments, FaGithub, FaSignOutAlt } from "react-icons/fa"; 
 
 export function Navbar() {
   const navItems = [
     {
       name: "Home",
       link: "/",
-      icon: <FaHome className="h-4 w-4  text-white dark:text-white" />,
+      icon: <FaHome className="h-4 w-4 text-white dark:text-white" />,
     },
     {
       name: "Chat",
@@ -21,16 +20,45 @@ export function Navbar() {
       link: "https://github.com/Suraj-kumar00/GuruNimbus",
       icon: <FaGithub className="h-4 w-4 text-white dark:text-white" />,
     },
+    
     {
-      name: "Blog",
-      link: "/",
-      icon: <FaBlog className="h-4 w-4  text-white dark:text-white" />,
+      name: "Logout",
+      action: handleLogout,
+      icon: <FaSignOutAlt className="h-4 w-4 text-white dark:text-white" />,
     },
   ];
 
+  // Define the logout function
+  function handleLogout() {
+    // Handle your logout logic here (e.g., Firebase auth, sign out from API)
+    console.log("User logged out");
+  }
+
   return (
-    <div className="relative w-full">
-      <FloatingNav navItems={navItems} />
+    <div className="sticky top-0 bg-gray-900 z-50 w-full shadow-md">
+      <nav className="flex justify-around items-center py-4 px-6">
+        {navItems.map((item, index) => (
+          item.link ? (
+            <a
+              key={index}
+              href={item.link}
+              className="flex items-center text-white hover:text-gray-300 space-x-2"
+            >
+              {item.icon}
+              <span>{item.name}</span>
+            </a>
+          ) : (
+            <button
+              key={index}
+              onClick={item.action}
+              className="flex items-center text-white hover:text-gray-300 space-x-2"
+            >
+              {item.icon}
+              <span>{item.name}</span>
+            </button>
+          )
+        ))}
+      </nav>
     </div>
   );
 }
diff --git a/src/components/Professor.tsx b/src/components/Professor.tsx
new file mode 100644
index 0000000..b29f2a3
--- /dev/null
+++ b/src/components/Professor.tsx
@@ -0,0 +1,95 @@
+
+"use client"; // Enable Client-side rendering
+
+import React from "react";
+import { FaSearch } from "react-icons/fa";
+
+export function Professor() {
+  // Dummy data for professors
+  const professors = [
+    {
+      name: "Professor1",
+      rating: 4.8,
+      img: "https://via.placeholder.com/150", 
+    },
+    {
+      name: "Professor2",
+      rating: 4.5,
+      img: "https://via.placeholder.com/150",
+    },
+    {
+      name: "Professor3",
+      rating: 4.7,
+      img: "https://via.placeholder.com/150",
+    },
+    {
+      name: "Professor4",
+      rating: 4.6,
+      img: "https://via.placeholder.com/150",
+    },
+    {
+      name: "Professor5",
+      rating: 4.9,
+      img: "https://via.placeholder.com/150",
+    },
+    {
+      name: "Professor6",
+      rating: 4.4,
+      img: "https://via.placeholder.com/150",
+    },
+    {
+      name: "Professor7",
+      rating: 4.8,
+      img: "https://via.placeholder.com/150",
+    },
+    {
+      name: "Professor8",
+      rating: 4.7,
+      img: "https://via.placeholder.com/150",
+    },
+  ];
+
+  return (
+    <div className="min-h-screen bg-gray-900 flex flex-col items-center pt-10">
+      {/* Search Bar */}
+      <div className="w-full flex justify-center mb-8">
+        <div className="relative">
+          <input
+            type="text"
+            placeholder="Search Professors"
+            className="rounded-full p-3 text-black w-80 shadow-lg"
+          />
+          <button className="absolute right-2 top-1/2 transform -translate-y-1/2 p-2 bg-white rounded-full shadow-lg">
+            <FaSearch className="w-6 h-6 text-gray-700" />
+          </button>
+        </div>
+      </div>
+
+      {/* Professors Grid */}
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
+        {professors.map((prof, index) => (
+          <div
+            key={index}
+            className="bg-white text-center p-6 rounded-lg shadow-2xl transform transition-all hover:scale-105"
+          >
+            <img
+              src={prof.img}
+              alt={prof.name}
+              className="w-24 h-24 rounded-full mx-auto mb-4"
+            />
+            <h3 className="text-xl font-semibold mb-3">{prof.name}</h3>
+            <p className="text-yellow-500 text-lg">
+              {Array.from({ length: Math.floor(prof.rating) }, (_, i) => (
+                <span key={i}>⭐</span>
+              ))}
+            </p>
+            <p className="text-sm text-gray-600">Rating: {prof.rating}</p>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default Professor;
+

From 4d57c8b04d120dcebcb694ad69d4396634f904c7 Mon Sep 17 00:00:00 2001
From: KumariAnjali <kumarianjali206700@gmail.com>
Date: Tue, 27 Aug 2024 12:31:23 +0530
Subject: [PATCH 2/2] added  FAQ section

---
 package-lock.json                |  63 +++++++++++++++---
 package.json                     |  14 ++--
 src/app/(routes)/faq/page.tsx    |  13 ++++
 src/app/(routes)/scrape/page.tsx |   0
 src/components/FAQ.tsx           | 108 +++++++++++++++++++++++++++++++
 5 files changed, 183 insertions(+), 15 deletions(-)
 create mode 100644 src/app/(routes)/faq/page.tsx
 create mode 100644 src/app/(routes)/scrape/page.tsx
 create mode 100644 src/components/FAQ.tsx

diff --git a/package-lock.json b/package-lock.json
index 97149d6..92ecea4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,6 +14,7 @@
         "@google/generative-ai": "^0.17.1",
         "@huggingface/inference": "^2.8.0",
         "@huggingface/transformers": "^3.0.0-alpha.9",
+        "@mui/icons-material": "^5.16.7",
         "@mui/material": "^5.16.7",
         "@pinecone-database/pinecone": "^3.0.1",
         "@radix-ui/react-avatar": "^1.1.0",
@@ -22,9 +23,10 @@
         "cheerio": "^1.0.0",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.1",
-        "framer-motion": "^11.3.29",
+        "framer-motion": "^11.3.30",
         "gemini-api": "^2.0.4",
         "lucide-react": "^0.429.0",
+        "mini-svg-data-uri": "^1.4.4",
         "next": "14.2.6",
         "node-cache": "^5.1.2",
         "node-fetch": "^3.3.2",
@@ -32,9 +34,9 @@
         "overlayscrollbars-react": "^0.5.6",
         "pinecone-client": "^2.0.0",
         "puppeteer": "^23.1.1",
-        "react": "^18",
+        "react": "^18.3.1",
         "react-circular-progressbar": "^2.1.0",
-        "react-dom": "^18",
+        "react-dom": "^18.3.1",
         "react-icons": "^5.3.0",
         "simplex-noise": "^4.0.3",
         "tailwind-merge": "^2.5.2",
@@ -42,13 +44,13 @@
       },
       "devDependencies": {
         "@types/node": "^20",
-        "@types/react": "^18",
-        "@types/react-dom": "^18",
+        "@types/react": "^18.3.4",
+        "@types/react-dom": "^18.3.0",
         "eslint": "^8",
         "eslint-config-next": "14.2.6",
         "postcss": "^8",
         "tailwindcss": "^3.4.1",
-        "typescript": "^5"
+        "typescript": "^5.5.4"
       }
     },
     "node_modules/@alloc/quick-lru": {
@@ -461,6 +463,7 @@
       "version": "11.13.3",
       "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.13.3.tgz",
       "integrity": "sha512-lIsdU6JNrmYfJ5EbUCf4xW1ovy5wKQ2CkPRM4xogziOxH1nXxBSjpC9YqbFAP7circxMfYp+6x676BqWcEiixg==",
+      "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.18.3",
         "@emotion/babel-plugin": "^11.12.0",
@@ -501,6 +504,7 @@
       "version": "11.13.0",
       "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.13.0.tgz",
       "integrity": "sha512-tkzkY7nQhW/zC4hztlwucpT8QEZ6eUzpXDRhww/Eej4tFfO0FxQYWRyg/c5CCXa4d/f174kqeXYjuQRnhzf6dA==",
+      "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.18.3",
         "@emotion/babel-plugin": "^11.12.0",
@@ -1122,10 +1126,37 @@
         "url": "https://opencollective.com/mui-org"
       }
     },
+    "node_modules/@mui/icons-material": {
+      "version": "5.16.7",
+      "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.16.7.tgz",
+      "integrity": "sha512-UrGwDJCXEszbDI7yV047BYU5A28eGJ79keTCP4cc74WyncuVrnurlmIRxaHL8YK+LI1Kzq+/JM52IAkNnv4u+Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@mui/material": "^5.0.0",
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@mui/material": {
       "version": "5.16.7",
       "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.16.7.tgz",
       "integrity": "sha512-cwwVQxBhK60OIOqZOVLFt55t01zmarKJiJUWbk0+8s/Ix5IaUzAShqlJchxsIQ4mSrWqgcKCCXKtIlG5H+/Jmg==",
+      "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.23.9",
         "@mui/core-downloads-tracker": "^5.16.7",
@@ -1871,6 +1902,7 @@
       "version": "18.3.4",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.4.tgz",
       "integrity": "sha512-J7W30FTdfCxDDjmfRM+/JqLHBIyl7xUIp9kwK637FGmY7+mkSFSe6L4jpZzhj5QMfLssSDP4/i75AKkrdC7/Jw==",
+      "license": "MIT",
       "dependencies": {
         "@types/prop-types": "*",
         "csstype": "^3.0.2"
@@ -1881,6 +1913,7 @@
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.0.tgz",
       "integrity": "sha512-EhwApuTmMBmXuFOikhQLIBUn6uFg81SwLMOAUgodJF14SOBOCMdU04gDoYi0WOJJHD144TL32z4yDqCW3dnkQg==",
       "devOptional": true,
+      "license": "MIT",
       "dependencies": {
         "@types/react": "*"
       }
@@ -4305,9 +4338,9 @@
       }
     },
     "node_modules/framer-motion": {
-      "version": "11.3.29",
-      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.3.29.tgz",
-      "integrity": "sha512-uyDuUOeOElJEA3kbkbyoTNEf75Jih1EUg0ouLKYMlGDdt/LaJPmO+FyOGAGxM2HwKhHcAoKFNveR5A8peb7yhw==",
+      "version": "11.3.30",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.3.30.tgz",
+      "integrity": "sha512-9VmqGe9OIjfMoCcs+ZsKXlv6JaG5QagKX2F1uSbkG3Z33wgjnz60Kw+CngC1M49rDYau+Y9aL+8jGagAwrbVyw==",
       "license": "MIT",
       "dependencies": {
         "tslib": "^2.4.0"
@@ -5613,6 +5646,15 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/mini-svg-data-uri": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz",
+      "integrity": "sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==",
+      "license": "MIT",
+      "bin": {
+        "mini-svg-data-uri": "cli.js"
+      }
+    },
     "node_modules/minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -6728,6 +6770,7 @@
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
       "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
+      "license": "MIT",
       "dependencies": {
         "loose-envify": "^1.1.0"
       },
@@ -6747,6 +6790,7 @@
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
       "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
+      "license": "MIT",
       "dependencies": {
         "loose-envify": "^1.1.0",
         "scheduler": "^0.23.2"
@@ -7903,6 +7947,7 @@
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.5.4.tgz",
       "integrity": "sha512-Mtq29sKDAEYP7aljRgtPOpTvOfbwRWlS6dPRzwjdE+C0R4brX/GUyhHSecbHMFLNBLcJIPt9nl9yG5TZ1weH+Q==",
       "devOptional": true,
+      "license": "Apache-2.0",
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
diff --git a/package.json b/package.json
index e0e5627..5bd0343 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "@google/generative-ai": "^0.17.1",
     "@huggingface/inference": "^2.8.0",
     "@huggingface/transformers": "^3.0.0-alpha.9",
+    "@mui/icons-material": "^5.16.7",
     "@mui/material": "^5.16.7",
     "@pinecone-database/pinecone": "^3.0.1",
     "@radix-ui/react-avatar": "^1.1.0",
@@ -23,9 +24,10 @@
     "cheerio": "^1.0.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
-    "framer-motion": "^11.3.29",
+    "framer-motion": "^11.3.30",
     "gemini-api": "^2.0.4",
     "lucide-react": "^0.429.0",
+    "mini-svg-data-uri": "^1.4.4",
     "next": "14.2.6",
     "node-cache": "^5.1.2",
     "node-fetch": "^3.3.2",
@@ -33,9 +35,9 @@
     "overlayscrollbars-react": "^0.5.6",
     "pinecone-client": "^2.0.0",
     "puppeteer": "^23.1.1",
-    "react": "^18",
+    "react": "^18.3.1",
     "react-circular-progressbar": "^2.1.0",
-    "react-dom": "^18",
+    "react-dom": "^18.3.1",
     "react-icons": "^5.3.0",
     "simplex-noise": "^4.0.3",
     "tailwind-merge": "^2.5.2",
@@ -43,12 +45,12 @@
   },
   "devDependencies": {
     "@types/node": "^20",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
+    "@types/react": "^18.3.4",
+    "@types/react-dom": "^18.3.0",
     "eslint": "^8",
     "eslint-config-next": "14.2.6",
     "postcss": "^8",
     "tailwindcss": "^3.4.1",
-    "typescript": "^5"
+    "typescript": "^5.5.4"
   }
 }
diff --git a/src/app/(routes)/faq/page.tsx b/src/app/(routes)/faq/page.tsx
new file mode 100644
index 0000000..9896f95
--- /dev/null
+++ b/src/app/(routes)/faq/page.tsx
@@ -0,0 +1,13 @@
+
+import React from 'react'
+import { FAQ } from '@/components/FAQ';
+import { Footer } from '@/components/Footer';
+
+type Props = {}
+
+export default function Home({}: Props) {
+  return (
+    <><FAQ /><Footer /></>
+  )
+}
+
diff --git a/src/app/(routes)/scrape/page.tsx b/src/app/(routes)/scrape/page.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/FAQ.tsx b/src/components/FAQ.tsx
new file mode 100644
index 0000000..746cc24
--- /dev/null
+++ b/src/components/FAQ.tsx
@@ -0,0 +1,108 @@
+'use client';
+
+import { useState } from 'react';
+
+export function FAQ() {
+  const [expanded, setExpanded] = useState(Array(10).fill(false));
+
+  const handleToggle = (index: number) => {
+    const newExpanded = [...expanded];
+    newExpanded[index] = !newExpanded[index];
+    setExpanded(newExpanded);
+  };
+
+  const faqs = [
+    {
+      question: "What is 'Rate My Workplace'?",
+      answer:
+        '"Rate My Workplace" is a platform where employees can anonymously share their experiences and rate their workplaces. The goal is to provide insights and transparency about various companies\' work environments.',
+    },
+    {
+      question: 'Can I submit my own review on "Rate My Workplace"?',
+      answer:
+        `"Rate My Workplace" does not accept user-submitted reviews. Instead, the platform uses AI to provide feedback based on a curated list of reviews already in our database.`,
+    },
+    {
+      question: 'Can I remain anonymous when submitting a review?',
+      answer:
+        'Yes, all reviews are submitted anonymously to protect your privacy. We do not collect personal information that could identify you.',
+    },
+    {
+      question: 'How do you ensure the authenticity of reviews?',
+      answer:
+        'We use a combination of automated and manual moderation processes to review and verify submissions. This helps ensure that the feedback we publish is authentic and valuable.',
+    },
+    {
+      question: 'How can I contact support if I have an issue?',
+      answer:
+        'If you have any issues or questions, please use the "Contact Us" section on the site. Fill out the contact form, and our support team will get back to you as soon as possible.',
+    },
+    {
+      question: 'Can I edit or delete my review after submission?',
+      answer:
+        'Once a review is submitted, it cannot be edited or deleted by the user. If you need to make changes, please contact our support team with the details of your request.',
+    },
+    {
+      question: 'How is the data used by the chatbot?',
+      answer:
+        'The chatbot uses semantic search embeddings to provide relevant responses based on the data stored in our database. It helps users find information quickly and accurately by understanding the context of their queries.',
+    },
+    {
+      question: 'What is Pinecone, and how is it used here?',
+      answer:
+        'Pinecone is a vector database used for semantic search. We use Pinecone to manage and search the embeddings of our data, allowing the chatbot to retrieve and provide precise answers based on user queries.',
+    },
+    {
+      question: 'Can I rate multiple workplaces?',
+      answer:
+        'Yes, you can rate multiple workplaces. Each review is considered individually and contributes to the overall rating of the respective workplace.',
+    },
+    {
+      question: 'How can I provide feedback about the website?',
+      answer:
+        'If you have feedback about the website, please use the "Contact Us" section to share your thoughts. We welcome suggestions and comments to help improve our platform.',
+    },
+  ];
+
+  return (
+    <div className="bg-slate-600 text-white py-16 px-6">
+      <div className="max-w-4xl mx-auto">
+        <h2 className="text-4xl font-bold text-center mb-12">Frequently Asked Questions</h2>
+        <div className="space-y-4">
+          {faqs.map((faq, index) => (
+            <div
+              key={index}
+              className="bg-gray-800 p-4 rounded-lg shadow-md cursor-pointer"
+              onClick={() => handleToggle(index)}
+            >
+              <div className="flex justify-between items-center">
+                <h3 className="text-xl font-semibold">{faq.question}</h3>
+                <svg
+                  className={`w-6 h-6 transform transition-transform ${
+                    expanded[index] ? 'rotate-180' : ''
+                  }`}
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M19 9l-7 7-7-7"
+                  />
+                </svg>
+              </div>
+              {expanded[index] && (
+                <div className="mt-4 text-gray-400">
+                  <p>{faq.answer}</p>
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}