style: 💄 format remaining files with ESLint and Prettier

This PR fixes Tailwind CSS class inconsistencies and resolves all
remaining linting and formatting issues in the codebase.

BREAKING CHANGE: 🧨 no

✅ Closes: #

Author: sheikhlimon

package.json

@@ -108,7 +108,7 @@
   "engines": {
     "node": ">=18.0"
   },
-   "config": {
+  "config": {
     "commitizen": {
       "path": "git-cz"
     }

sidebars.ts

@@ -144,14 +144,14 @@ const sidebars: SidebarsConfig = {
           ],
         },
         {
-          type: 'category',
-          label: 'SQL Advance',
-          className: 'custom-sidebar-sql-advance',
+          type: "category",
+          label: "SQL Advance",
+          className: "custom-sidebar-sql-advance",
           items: [
-            'sql/SQL-Advance/sql-subqueries',
-            'sql/SQL-Advance/common-table-expressions',
-            'sql/SQL-Advance/window-functions',
-            'sql/SQL-Advance/sql-indexes'
+            "sql/SQL-Advance/sql-subqueries",
+            "sql/SQL-Advance/common-table-expressions",
+            "sql/SQL-Advance/window-functions",
+            "sql/SQL-Advance/sql-indexes",
           ],
         },
       ],

src/components/Comming/index.tsx

@@ -11,7 +11,7 @@ interface ComingProps {
  */
 const Coming: React.FC<ComingProps> = () => {
   return (
-    <div className="flex flex-col justify-center items-center p-6 mx-auto my-8 max-w-2xl rounded-xl bg-white dark:bg-gray-800 shadow-lg">
+    <div className="mx-auto my-8 flex max-w-2xl flex-col items-center justify-center rounded-xl bg-white p-6 shadow-lg dark:bg-gray-800">
       <img
         src="https://www.svgrepo.com/show/426192/cogs-settings.svg"
         alt="Maintenance in progress"
@@ -20,16 +20,16 @@ const Coming: React.FC<ComingProps> = () => {
         width={100}
         loading="lazy"
       />
-      <h1 className="text-3xl font-bold text-center text-gray-800 dark:text-white mb-3">
+      <h1 className="mb-3 text-center text-3xl font-bold text-gray-800 dark:text-white">
         Site Maintenance
       </h1>
-      <p className="text-center text-gray-600 dark:text-gray-300 mb-6">
+      <p className="mb-6 text-center text-gray-600 dark:text-gray-300">
         We're working hard to improve your experience. Please check back soon!
       </p>
-      <div className="flex flex-col sm:flex-row gap-10 w-full">
+      <div className="flex w-full flex-col gap-10 sm:flex-row">
         <a
           href="/contact"
-          className="flex-1 bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-lg text-center transition-colors "
+          className="flex-1 rounded-lg bg-blue-600 px-4 py-2 text-center font-medium text-white transition-colors hover:bg-blue-700"
         >
           Contact Support
         </a>

src/components/NewsLetterPopup.tsx

@@ -31,25 +31,25 @@ const NewsletterPopup = () => {
 
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 px-4">
-      <div className="bg-white/80 backdrop-blur-xl max-w-xl w-full rounded-3xl shadow-2xl p-8 text-center relative border border-gray-200 animate-fade-in">
+      <div className="animate-fade-in relative w-full max-w-xl rounded-3xl border border-gray-200 bg-white/80 p-8 text-center shadow-2xl backdrop-blur-xl">
         <img
           src="/img/logo.png"
           alt="recode hive Logo"
-          className="w-16 h-16 mx-auto mb-4 rounded-full shadow-md"
+          className="mx-auto mb-4 h-16 w-16 rounded-full shadow-md"
         />
 
-        <h2 className="text-3xl font-extrabold mb-2 text-gray-900">
+        <h2 className="mb-2 text-3xl font-extrabold text-gray-900">
           Sanjay’s Substack
         </h2>
 
-        <p className="text-gray-700 text-base leading-relaxed mb-4">
+        <p className="mb-4 text-base leading-relaxed text-gray-700">
           recode hive is an inclusive and welcoming platform where everyone can
           contribute, learn, and grow together. ⚡ <br />
           Check my ✨ Website:{" "}
           <a
             href="https://www.recodehive.com"
             target="_blank"
-            className="text-blue-600 hover:underline font-medium"
+            className="font-medium text-blue-600 hover:underline"
             rel="noreferrer"
           >
             https://www.recodehive.com{" "}
@@ -59,7 +59,7 @@ const NewsletterPopup = () => {
           <a
             href="https://github.com/sanjay-kv"
             target="_blank"
-            className="text-blue-600 hover:underline font-medium"
+            className="font-medium text-blue-600 hover:underline"
             rel="noreferrer"
           >
             github.com/sanjay-kv
@@ -68,13 +68,13 @@ const NewsletterPopup = () => {
           👫 Join my opensource community
         </p>
 
-        <p className="text-sm font-semibold text-gray-700 mb-4">
+        <p className="mb-4 text-sm font-semibold text-gray-700">
           By <span className="text-gray-900">Sanjay Viswanathan</span> · Over{" "}
           <span className="text-gray-900">31,000 subscribers</span>
         </p>
 
         <form
-          className="flex items-stretch w-full border-2 border-gray-300 rounded-xl overflow-hidden bg-white shadow-inner mb-4 focus-within:ring-2 focus-within:ring-blue-500"
+          className="mb-4 flex w-full items-stretch overflow-hidden rounded-xl border-2 border-gray-300 bg-white shadow-inner focus-within:ring-2 focus-within:ring-blue-500"
           onSubmit={(e) => {
             e.preventDefault();
             alert("Subscribed! (Integrate with Substack API)");
@@ -85,17 +85,17 @@ const NewsletterPopup = () => {
             type="email"
             required
             placeholder="Type your email..."
-            className="flex-1 px-4 py-2 text-sm bg-transparent focus:outline-none text-gray-800 placeholder-gray-400"
+            className="flex-1 bg-transparent px-4 py-2 text-sm text-gray-800 placeholder-gray-400 focus:outline-none"
           />
           <button
             type="submit"
-            className="bg-gradient-to-r from-orange-400 to-orange-600 text-white px-6 text-sm font-bold transition duration-300 hover:from-orange-500 hover:to-orange-700"
+            className="bg-gradient-to-r from-orange-400 to-orange-600 px-6 text-sm font-bold text-white transition duration-300 hover:from-orange-500 hover:to-orange-700"
           >
             Subscribe
           </button>
         </form>
 
-        <p className="text-xs text-gray-500 mb-4">
+        <p className="mb-4 text-xs text-gray-500">
           By subscribing, I agree to Substack’s{" "}
           <a href="#" className="underline hover:text-blue-600">
             Terms of Use
@@ -113,7 +113,7 @@ const NewsletterPopup = () => {
 
         <button
           onClick={handleClose}
-          className="text-sm text-gray-600 font-medium hover:text-black transition"
+          className="text-sm font-medium text-gray-600 transition hover:text-black"
           aria-label="Close newsletter popup"
         >
           No thanks →

src/components/blogCarousel/blogCard.tsx

@@ -47,11 +47,11 @@ const BlogCard = ({ type, date, title, content, imageUrl, id, authors }) => {
       }}
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
-      className="relative overflow-hidden h-full transition-all duration-300"
+      className="relative h-full overflow-hidden transition-all duration-300"
     >
       <Link
         to={`/blog/${id}`}
-        className="block h-full text-decoration-none"
+        className="text-decoration-none block h-full"
         style={{ textDecoration: "none" }}
       >
         <div className="article-card h-full">

src/components/blogCarousel/blogCarousel.tsx

@@ -33,7 +33,7 @@ export function BlogCarousel() {
   }, [api]);
 
   return (
-    <div className="w-full max-w-8xl mx-auto px-4">
+    <div className="max-w-8xl mx-auto w-full px-4">
       <Carousel
         setApi={setApi}
         className="w-full"
@@ -68,24 +68,24 @@ export function BlogCarousel() {
         </CarouselContent>
 
         {/* Enhanced Carousel controls */}
-        <div className="flex items-center justify-center gap-4 mt-8">
-          <CarouselPrevious className="static translate-y-0 h-12 w-12 border-2 border-blue-200 dark:border-blue-800 hover:border-blue-400 dark:hover:border-blue-600 transition-all duration-300 hover:scale-110" />
+        <div className="mt-8 flex items-center justify-center gap-4">
+          <CarouselPrevious className="static h-12 w-12 translate-y-0 border-2 border-blue-200 transition-all duration-300 hover:scale-110 hover:border-blue-400 dark:border-blue-800 dark:hover:border-blue-600" />
           <div className="flex gap-2">
             {Array.from({ length: count }).map((_, index) => (
               <Button
                 key={index}
                 variant="ghost"
                 size="sm"
-                className={`h-3 w-3 p-0 rounded-full transition-all duration-300 ${
+                className={`h-3 w-3 rounded-full p-0 transition-all duration-300 ${
                   current === index + 1
-                    ? "bg-gradient-to-r from-blue-500 to-purple-500 scale-125"
-                    : "bg-gray-300 dark:bg-gray-600 hover:bg-gray-400 dark:hover:bg-gray-500"
+                    ? "scale-125 bg-gradient-to-r from-blue-500 to-purple-500"
+                    : "bg-gray-300 hover:bg-gray-400 dark:bg-gray-600 dark:hover:bg-gray-500"
                 }`}
                 onClick={() => api?.scrollTo(index)}
               />
             ))}
           </div>
-          <CarouselNext className="static translate-y-0 h-12 w-12 border-2 border-blue-200 dark:border-blue-800 hover:border-blue-400 dark:hover:border-blue-600 transition-all duration-300 hover:scale-110" />
+          <CarouselNext className="static h-12 w-12 translate-y-0 border-2 border-blue-200 transition-all duration-300 hover:scale-110 hover:border-blue-400 dark:border-blue-800 dark:hover:border-blue-600" />
         </div>
       </Carousel>
     </div>

src/components/dashboard/LeaderBoard/leaderboard.css

@@ -261,7 +261,6 @@
   margin-bottom: 4px;
   text-align: center;
   width: 100%;
-
 }
 
 .light .stat-value {
@@ -392,9 +391,11 @@
   font-weight: 600;
   letter-spacing: 0.3px;
   appearance: none;
-  background: linear-gradient(to bottom,
-      rgba(255, 255, 255, 0.05) 0%,
-      rgba(0, 0, 0, 0.05) 100%);
+  background: linear-gradient(
+    to bottom,
+    rgba(255, 255, 255, 0.05) 0%,
+    rgba(0, 0, 0, 0.05) 100%
+  );
   cursor: pointer;
   transition: all 0.25s ease;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
@@ -917,7 +918,6 @@
 }
 
 @media (max-width: 475px) {
-
   .contributors-container .page-numbers .page-btn,
   .contributors-container .pagination .pagination-btn,
   .contributors-container .pagination-ellipsis {
@@ -934,7 +934,6 @@
 }
 
 @media (max-width: 320px) {
-
   .contributors-container .page-numbers .page-btn,
   .contributors-container .pagination .pagination-btn,
   .contributors-container .pagination-ellipsis {
@@ -1002,19 +1001,23 @@
   width: 32px;
   height: 32px;
   border-radius: 50%;
-  background: linear-gradient(90deg,
-      rgba(0, 0, 0, 0.06) 25%,
-      rgba(0, 0, 0, 0.12) 50%,
-      rgba(0, 0, 0, 0.06) 75%);
+  background: linear-gradient(
+    90deg,
+    rgba(0, 0, 0, 0.06) 25%,
+    rgba(0, 0, 0, 0.12) 50%,
+    rgba(0, 0, 0, 0.06) 75%
+  );
   background-size: 200% 100%;
   animation: skeleton-shimmer 2s infinite;
 }
 
 .skeleton-loader.dark .skeleton-avatar {
-  background: linear-gradient(90deg,
-      rgba(255, 255, 255, 0.05) 25%,
-      rgba(255, 255, 255, 0.1) 50%,
-      rgba(255, 255, 255, 0.05) 75%);
+  background: linear-gradient(
+    90deg,
+    rgba(255, 255, 255, 0.05) 25%,
+    rgba(255, 255, 255, 0.1) 50%,
+    rgba(255, 255, 255, 0.05) 75%
+  );
   background-size: 200% 100%;
 }
 
@@ -1034,19 +1037,23 @@
   height: 16px;
   width: 60%;
   border-radius: 4px;
-  background: linear-gradient(90deg,
-      rgba(0, 0, 0, 0.06) 25%,
-      rgba(0, 0, 0, 0.12) 50%,
-      rgba(0, 0, 0, 0.06) 75%);
+  background: linear-gradient(
+    90deg,
+    rgba(0, 0, 0, 0.06) 25%,
+    rgba(0, 0, 0, 0.12) 50%,
+    rgba(0, 0, 0, 0.06) 75%
+  );
   background-size: 200% 100%;
   animation: skeleton-shimmer 2s infinite;
 }
 
 .skeleton-loader.dark .skeleton-bar {
-  background: linear-gradient(90deg,
-      rgba(255, 255, 255, 0.05) 25%,
-      rgba(255, 255, 255, 0.1) 50%,
-      rgba(255, 255, 255, 0.05) 75%);
+  background: linear-gradient(
+    90deg,
+    rgba(255, 255, 255, 0.05) 25%,
+    rgba(255, 255, 255, 0.1) 50%,
+    rgba(255, 255, 255, 0.05) 75%
+  );
   background-size: 200% 100%;
 }
 
@@ -1059,19 +1066,23 @@
   height: 20px;
   width: 60px;
   border-radius: 12px;
-  background: linear-gradient(90deg,
-      rgba(0, 0, 0, 0.06) 25%,
-      rgba(0, 0, 0, 0.12) 50%,
-      rgba(0, 0, 0, 0.06) 75%);
+  background: linear-gradient(
+    90deg,
+    rgba(0, 0, 0, 0.06) 25%,
+    rgba(0, 0, 0, 0.12) 50%,
+    rgba(0, 0, 0, 0.06) 75%
+  );
   background-size: 200% 100%;
   animation: skeleton-shimmer 2s infinite;
 }
 
 .skeleton-loader.dark .skeleton-badge {
-  background: linear-gradient(90deg,
-      rgba(255, 255, 255, 0.05) 25%,
-      rgba(255, 255, 255, 0.1) 50%,
-      rgba(255, 255, 255, 0.05) 75%);
+  background: linear-gradient(
+    90deg,
+    rgba(255, 255, 255, 0.05) 25%,
+    rgba(255, 255, 255, 0.1) 50%,
+    rgba(255, 255, 255, 0.05) 75%
+  );
   background-size: 200% 100%;
 }
 
@@ -1503,4 +1514,4 @@
   .pr-item-meta {
     gap: 12px;
   }
-}
+}

src/components/faqs/faqs.tsx

@@ -58,14 +58,14 @@ const FAQs: React.FC = () => {
       }`}
     >
       <div className="mx-auto px-2 sm:px-4 lg:px-6">
-        <div className="flex flex-col justify-center items-center gap-x-8 gap-y-12 xl:gap-28 lg:flex-row lg:justify-between">
+        <div className="flex flex-col items-center justify-center gap-x-8 gap-y-12 lg:flex-row lg:justify-between xl:gap-28">
           <div className="w-full">
             <div className="mb-8 lg:mb-16">
-              <h6 className="text-lg text-center lg:text-left font-medium text-indigo-600 mb-2">
+              <h6 className="mb-2 text-center text-lg font-medium text-indigo-600 lg:text-left">
                 FAQs
               </h6>
               <h2
-                className={`text-4xl text-center lg:text-left font-bold ${
+                className={`text-center text-4xl font-bold lg:text-left ${
                   isDark ? "text-gray-100" : "text-gray-900"
                 } leading-snug`}
               >
@@ -85,19 +85,17 @@ const FAQs: React.FC = () => {
               {faqData.map((faq, index) => (
                 <motion.div
                   key={index}
-                  className="accordion h-fit border-gray-200 dark:border-gray-700 pb-4 mb-4 break-inside-avoid"
+                  className="accordion mb-4 h-fit break-inside-avoid border-gray-200 pb-4 dark:border-gray-700"
                   initial={{ opacity: 0, y: 10 }}
                   animate={{ opacity: 1, y: 0 }}
                   transition={{ duration: 0.3 }}
                 >
                   <button
-                    className={`cursor-pointer accordion-toggle group flex justify-between items-center text-lg font-medium w-full transition-all duration-300 
-                      ${
-                        isDark
-                          ? "text-gray-200 bg-gray-800 hover:text-indigo-400"
-                          : "text-gray-700 bg-gray-100 hover:text-indigo-600"
-                      } 
-                      p-4 rounded-lg focus:outline-none`}
+                    className={`accordion-toggle group flex w-full cursor-pointer items-center justify-between text-lg font-medium transition-all duration-300 ${
+                      isDark
+                        ? "bg-gray-800 text-gray-200 hover:text-indigo-400"
+                        : "bg-gray-100 text-gray-700 hover:text-indigo-600"
+                    } rounded-lg p-4 focus:outline-none`}
                     onClick={() => toggleAccordion(index)}
                   >
                     {faq.question}