added tailwind css for manage css}

package.json

@@ -79,9 +79,12 @@
     "@docusaurus/module-type-aliases": "^3.3.2",
     "@docusaurus/types": "^3.3.2",
     "@types/node": "^22.0.1",
+    "autoprefixer": "^10.4.20",
     "dotenv": "^16.4.5",
     "gh-pages": "^6.1.1",
-    "lighthouse": "^12.1.0"
+    "lighthouse": "^12.1.0",
+    "postcss": "^8.4.47",
+    "tailwindcss": "^3.4.12"
   },
   "browserslist": {
     "production": [

plugins/my-plugin/index.js

@@ -1,8 +1,6 @@
 const Joi = require("joi");
 
-
 module.exports = function (context, options) {
-  //
   return {
     name: "my-plugin",
     // lifecycle methods
@@ -24,24 +22,29 @@ module.exports = function (context, options) {
         .description("This is a custom command")
         .action(() => {
           console.log("Hello World! - This is a custom command!");
-          console.log('Plugin options:', options);
+          console.log("Plugin options:", options);
         });
     },
+    configurePostCss(postcssOptions) {
+      // Add Tailwind CSS and other PostCSS plugins
+      postcssOptions.plugins = [
+        require("postcss-import"),
+        require("tailwindcss"),
+        require("autoprefixer"),
+      ];
+      return postcssOptions;
+    },
   };
 };
 
 module.exports.validateOptions = ({ validate, options }) => {
   const joiSchema = Joi.object({
-    settings: Joi.string()
-      .alphanum()
-      .min(3)
-      .max(30)
-      .required(),
+    settings: Joi.string().alphanum().min(3).max(30).required(),
     api: Joi.string().required(),
     keys: Joi.string().min(2).required(),
   });
 
   const validateOptions = validate(joiSchema, options);
 
   return validateOptions;
-};
+};

src/components/FAQs/index.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from "react";
-import "./faq.css";
-import { FiChevronDown } from 'react-icons/fi';
+import { FiChevronDown } from "react-icons/fi";
+import { motion } from "framer-motion";
+
 const faqData = [
   {
     question: "What is CodeHarborHub?",
@@ -10,48 +11,32 @@ const faqData = [
   {
     question: "What features does CodeHarborHub offer?",
     answer:
-      "  CodeHarborHub offers a variety of features including code solutions, project collaboration, coding quizzes, tutorials, and community section. Our platform is designed to help you learn,share, and grow as a developer.",
+      "CodeHarborHub offers features such as code solutions, project collaboration, coding quizzes, tutorials, and a community section. Our platform is designed to help you learn, share, and grow as a developer.",
   },
   {
-    question: "Is it possible to contribute my tutorials here?",
+    question: "Can I contribute my tutorials here?",
     answer:
-      "Yes, users can contribute tutorials by submitting them through sending a PR with the resources committed in it.",
+      "Yes, users can contribute tutorials by submitting them through a PR with the resources committed.",
   },
   {
-    question: "How many kinds of tutorial is available here?",
+    question: "How many types of tutorials are available?",
     answer:
-      " CodeHarborHub offers tutorials on HTML & CSS, JavaScript,React, and Node.js, providing a comprehensive guide to web development",
+      "CodeHarborHub offers tutorials on HTML, CSS, JavaScript, React, and Node.js, providing a comprehensive guide to web development.",
   },
   {
-    question: "What all type of courses are available here?",
+    question: "What types of courses are available?",
     answer:
-      "  CodeHarborHub offers courses in HTML & CSS, JavaScript, React,and Node.js. Each course is designed to help you build practical skills and projects.",
+      "CodeHarborHub offers courses in HTML, CSS, JavaScript, React, and Node.js. Each course is designed to help you build practical skills and projects.",
   },
   {
-    question: "How can I contribute to open source project?",
+    question: "How can I contribute to open-source projects?",
     answer:
-      " You can contribute to open source projects by navigating to the Showcase section, where you can find and join various community projects.",
+      "You can contribute by navigating to the Showcase section, where you can find and join community projects.",
   },
   {
     question: "How can I stay updated with the latest news?",
     answer:
-      "You can stay updated by following our blog and joining our community on social media platforms like LinkedIn, YouTube,Discord, and Twitter.",
-  },
-
-  {
-    question: "What types of tutorials does CodeHarborHub provide?",
-    answer:
-      "CodeHarborHub provides in-depth tutorials on a wide range of web development topics, including HTML & CSS, JavaScript, React, and Node.js. These tutorials are designed to help learners understand complex concepts and apply them in real-world scenarios.",
-  },
-  {
-    question: "What can I expect from the courses offered on CodeHarborHub?",
-    answer:
-      "The courses on CodeHarborHub are structured to help you achieve mastery in various web development topics. Each course includes comprehensive lessons, practical projects, and assessments to ensure you build practical skills and a solid understanding of the subject matter.",
-  },
-  {
-    question: "How can I engage with the community on CodeHarborHub?",
-    answer:
-      "CodeHarborHub has a vibrant community of developers where you can share knowledge, collaborate on projects, and get your questions answered. You can join our community on platforms like LinkedIn, YouTube, Discord, and Twitter to stay connected and engaged.",
+      "You can stay updated by following our blog and joining our community on social media platforms like LinkedIn, YouTube, Discord, and Twitter.",
   },
 ];
 
@@ -63,22 +48,51 @@ const FAQs: React.FC = () => {
   };
 
   return (
-    <div className="faq-container">
-      {faqData.map((faq, index) => (
-        <div key={index} className="faq-item">
-          <div className="faq-question" onClick={() => toggleAccordion(index)}>
-            {faq.question}
-            <span className={`icon ${activeIndex === index ? "rotate" : ""}`}>
-              <FiChevronDown />
-            </span>
-          </div>
-          <div className={`faq-answer ${activeIndex === index ? "show" : ""}`}>
-            {faq.answer}
-          </div>
-        </div>
-      ))}
+    <div className="faq-container transition duration-500">
+      <div className="max-w-6xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
+        {faqData.map((faq, index) => (
+          <motion.div
+            key={index}
+            className="faq-item border-b border-gray-200 dark:border-gray-700 py-4"
+            whileHover={{ scale: 1.02 }}
+            initial={{ opacity: 0, y: 10 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.3 }}
+          >
+            <div
+              className="faq-question flex justify-between items-center cursor-pointer bg-gray-100 dark:bg-gray-800 px-4 py-3 rounded-md shadow-md hover:shadow-lg transition-all duration-300"
+              onClick={() => toggleAccordion(index)}
+            >
+              <h3 className="text-lg md:text-xl font-semibold dark:text-gray-100 text-gray-900">
+                {faq.question}
+              </h3>
+              <motion.span
+                className="transition-transform"
+                animate={{ rotate: activeIndex === index ? 180 : 0 }}
+              >
+                <FiChevronDown
+                  size={24}
+                  className="dark:text-gray-100 text-gray-900"
+                />
+              </motion.span>
+            </div>
+            <motion.div
+              className="faq-answer mt-2 text-sm md:text-base dark:text-gray-200 text-gray-800"
+              initial={{ height: 0, opacity: 0 }}
+              animate={{
+                height: activeIndex === index ? "auto" : 0,
+                opacity: activeIndex === index ? 1 : 0,
+              }}
+              transition={{ duration: 0.3, ease: "easeInOut" }}
+              style={{ overflow: "hidden" }}
+            >
+              <p className="p-4">{faq.answer}</p>
+            </motion.div>
+          </motion.div>
+        ))}
+      </div>
     </div>
   );
 };
 
-export default FAQs;
+export default FAQs;

src/css/custom.css

@@ -1,3 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 /* width */
 ::-webkit-scrollbar {
   width: 5px;

src/pages/about/index.tsx

@@ -23,7 +23,7 @@ export default function About() {
           src="https://cdn.ampproject.org/v0/amp-auto-ads-0.1.js"
         />
         <meta name="google-adsense-account" content="ca-pub-5832817025080991" />
-      </Head>
+      </Head>     
       <AboutUsSection />
     </Layout>
   );

tailwind.config.js

@@ -0,0 +1,29 @@
+const { fontFamily } = require("tailwindcss/defaultTheme");
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  corePlugins: {
+    preflight: false,
+    container: false,
+  },
+  darkMode: ["class", '[data-theme="dark"]'],
+  content: ["./src/**/*.{jsx,tsx,html}"],
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: ['"Inter"', ...fontFamily.sans],
+        jakarta: ['"Plus Jakarta Sans"', ...fontFamily.sans],
+        mono: ['"Fira Code"', ...fontFamily.mono],
+      },
+      borderRadius: {
+        sm: "4px",
+      },
+      screens: {
+        sm: "0px",
+        lg: "997px",
+      },
+      colors: {},
+    },
+  },
+  plugins: [],
+};