Card UI

src/app/codeedit/page.jsx

@@ -3,7 +3,7 @@ import React, { useState } from "react";
 import Editor from "./components/Editor";
 import Nav from "../components/nav";
 
-export default function CodeEditor(){
+export default function CodeEditor() {
   const [isDarkMode, setIsDarkMode] = useState(false);
   const toggleTheme = () => {
     setIsDarkMode(!isDarkMode);
@@ -20,4 +20,4 @@ export default function CodeEditor(){
       <Editor isDarkMode={isDarkMode} />
     </div>
   );
-};
+}

src/app/components/card.jsx

@@ -1,30 +1,20 @@
 import Link from "next/link";
 
-export function Card({ link, title, desc, isDarkMode }) {
+export function Card({ link, title, isDarkMode }) {
   return (
-    <Link href={link} className="group relative block h-64 sm:h-80 lg:h-96">
-      <span
-        className={`absolute inset-0 border-2 border-dashed border-transparent rounded transition-all duration-300 group-hover:border-yellow-500 ${isDarkMode ? "border-white" : "border-black"}`}
-      ></span>
-
+    <Link
+      href={link}
+      className="group relative block p-10 overflow-hidden rounded-lg shadow-lg transition-transform transform hover:scale-105"
+    >
       <div
-        className={`relative flex h-full transform rounded-lg items-end border-2 border-transparent bg-gradient-to-br ${isDarkMode ? "from-gray-500 via-slate-500 to-black" : "from-gray-100 via-slate-100 to-white"} transition-transform group-hover:-translate-x-2 group-hover:-translate-y-2 group-hover:shadow-xl`}
+        className={`absolute inset-0 ${isDarkMode ? "bg-gradient-to-r from-gray-900 via-gray-800 to-gray-700" : "bg-gradient-to-r from-blue-300 via-blue-400 to-blue-500"}`}
       >
-        <div
-          className={`p-4 !pt-0 transition-opacity group-hover:absolute group-hover:opacity-0 sm:p-6 lg:p-8 text-center absolute top-0 left-0 w-full h-full flex items-center justify-center ${isDarkMode ? "text-white" : "text-black"}`}
-        >
-          <h2 className="mt-4 text-2xl font-bold sm:text-3xl">{title}</h2>
-        </div>
-
-        <div
-          className={`absolute p-4 opacity-0 transition-opacity group-hover:relative group-hover:opacity-100 sm:p-6 lg:p-8 ${isDarkMode ? "text-white" : "text-black"}`}
-        >
-          <h3 className="mt-4 text-2xl font-bold sm:text-3xl">{title}</h3>
-
-          <p className="mt-4 text-sm sm:text-base">{desc}</p>
-
-          <p className="mt-8 font-extrabold">Try out</p>
-        </div>
+        <div className="absolute inset-0 bg-gradient-to-b from-transparent to-black opacity-70 group-hover:opacity-90 transition-opacity"></div>
+      </div>
+      <div className="relative z-10 flex items-center justify-center h-full">
+        <h1 className="text-white text-2xl font-bold transition-colors group-hover:text-yellow-300 text-center">
+          {title}
+        </h1>
       </div>
     </Link>
   );

src/app/components/nav.jsx

@@ -44,7 +44,7 @@ export default function Nav({ isDarkMode, toggleTheme }) {
     } catch {
       console.log("Failed to read localstorage");
     }
-  // eslint-disable-next-line react-hooks/exhaustive-deps
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   const togglePanel = () => {
     setOpen((prev) => !prev);
@@ -183,13 +183,15 @@ export default function Nav({ isDarkMode, toggleTheme }) {
               Json Generator
             </Link>
             <hr />
-      
+
             <Link
               href="/customizer/Readme-generator"
               className={`block px-4 py-2 hover:${
                 isDarkMode ? "bg-gray-800 text-white" : "bg-gray-200"
               }`}
-            >Readme Generator</Link>
+            >
+              Readme Generator
+            </Link>
           </div>
         )}
       </div>
@@ -272,5 +274,3 @@ export default function Nav({ isDarkMode, toggleTheme }) {
     </nav>
   );
 }
-
-

src/app/components/navbar.jsx

@@ -14,7 +14,7 @@ export function NavBar({ title, isDarkMode, toggleTheme }) {
     } catch {
       console.log("Failed to read localstorage");
     }
-  // eslint-disable-next-line react-hooks/exhaustive-deps
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   const handletoggleTheme = () => {
     localStorage.setItem("theme", !isDarkMode);

src/app/customizer/JsonGenerator/components/CardForm.jsx

@@ -67,7 +67,7 @@ export default function CardForm({ isDarkMode }) {
     setIsLoading(false);
     setPreviewClicked(false);
     setSubmitClicked(false);
-  // eslint-disable-next-line react-hooks/exhaustive-deps
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [previewClicked, submitClicked]);
 
   const addField = () => {

src/app/customizer/button/page.jsx

@@ -428,7 +428,8 @@ export default function ButtonCustomizer() {
         <div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50">
           <div className="bg-slate-500 p-8 rounded-lg">
             <p className="text-white font-mono">
-              &lt;button style=&quot; background-color: {backgroundColor}; color:
+              &lt;button style=&quot; background-color: {backgroundColor};
+              color:
               {textColor}; border-radius: {borderRadius}px; padding: 10px 20px;
               font-size: {fontSize}px; font-weight: {fontWeight}; font-family:
               {fontFamily}; border: none; cursor: {cursor}; width: {width}px;

src/app/customizer/conversionCalculator/page.jsx

@@ -31,7 +31,7 @@ export default function ButtonCustomizer() {
     setOpFrom(event.target.value);
     calc();
   };
-  
+
   const toggleTheme = () => {
     setIsDarkMode(!isDarkMode);
   };

src/app/gh-finder/page.jsx

@@ -174,7 +174,7 @@ export default function GhFinder() {
                   <p>Assignees: </p>
                   {item.assignees.length > 0 ? (
                     <div className="flex -space-x-4">
-                      {item.assignees.map((assignee ,key) => (
+                      {item.assignees.map((assignee, key) => (
                         <Link href={assignee.html_url} key={key}>
                           <Image
                             alt={assignee.login}

src/app/layout.js

@@ -1,15 +1,19 @@
-		import "./globals.css"  ;
-		import	 { Inter		} from "next/font/google"		;
+import "./globals.css";
+import { Inter } from "next/font/google";
 
-	const inTer = Inter	({ subsets :		["latin"	]		} )	;
+const inTer = Inter({ subsets: ["latin"] });
 
- export const mETADatA		=		{
-	 title  : "Web Dev Tools" ,
-	description :
- "Cool web dev tools, that can help you with your journey as a web developer"  ,	 }	;
+export const mETADatA = {
+  title: "Web Dev Tools",
+  description:
+    "Cool web dev tools, that can help you with your journey as a web developer",
+};
 
-	export default function RoOTLAyOut		({ children }  )	 {
-	return	 ( <html lang		="en" className		="overflow-x-hidden"	>
-	 <head	 ><  /head	 >
-	 <body className	 ={inTer .className		} >{children  }<		/body	 >
-		<	/html	 >  )  ;		}
+export default function RoOTLAyOut({ children }) {
+  return (
+    <html lang="en" className="overflow-x-hidden">
+      <head></head>
+      <body className={inTer.className}>{children}</body>
+    </html>
+  );
+}

src/app/page.jsx

@@ -8,7 +8,7 @@ import { Card } from "./components/card";
 export default function Home({ state }) {
   const [isDarkMode, setIsDarkMode] = useState(false);
   const [toolList, setToolList] = useState(tools);
-  const [searchValue, setSearch] = useState()
+  const [searchValue, setSearch] = useState();
   useEffect(() => {
     if (isDarkMode) {
       document.documentElement.classList.add("dark");
@@ -20,14 +20,18 @@ export default function Home({ state }) {
   const toggleTheme = () => {
     setIsDarkMode(!isDarkMode);
   };
-  const handleSeach = (e)=>{
+  const handleSeach = (e) => {
     setSearch(e.target.value);
-    if(e.target.value){
-      setToolList(tools.filter(tool=>tool.name.toLowerCase().includes(e.target.value.toLowerCase())))
-    }else{
-      setToolList(tools)
+    if (e.target.value) {
+      setToolList(
+        tools.filter((tool) =>
+          tool.name.toLowerCase().includes(e.target.value.toLowerCase()),
+        ),
+      );
+    } else {
+      setToolList(tools);
     }
-  }
+  };
   return (
     <main
       className={`${isDarkMode ? "bg-gray-900 text-white" : "bg-white text-black"} min-w-80 min-h-screen `}
@@ -37,29 +41,33 @@ export default function Home({ state }) {
         <div
           className={`mr-4 p-5 my-9 w-4/5 break-words py-6 md:p-6 border rounded-lg shadow ${isDarkMode ? "bg-gray-800 border-gray-700 text-white" : "bg-white border-gray-200 text-black"}`}
         >
-          <input type="text" placeholder="search" value={searchValue} onChange={handleSeach} className={`w-full p-2 my-5 border rounded-lg shadow ${isDarkMode ? "bg-gray-800 border-gray-700 text-white" : "bg-white border-gray-200 text-black"}`}/>
-          <div
-            className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4"
-          >
+          <input
+            type="text"
+            placeholder="search"
+            value={searchValue}
+            onChange={handleSeach}
+            className={`w-full p-2 my-5 border rounded-lg shadow ${isDarkMode ? "bg-gray-800 border-gray-700 text-white" : "bg-white border-gray-200 text-black"}`}
+          />
+          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
             {toolList.map((item, index) => (
               <Card
                 key={index}
                 title={item.name}
                 link={item.link}
-                desc={""}
                 isDarkMode={isDarkMode}
               />
             ))}
-
           </div>
-          {!toolList.length&&(
-              <p className="text-center">No match for <strong>&quot;{searchValue}&quot;</strong></p>
-            )}
+          {!toolList.length && (
+            <p className="text-center">
+              No match for <strong>&quot;{searchValue}&quot;</strong>
+            </p>
+          )}
         </div>
         <div className="flex justify-center">
           <Footer isDarkMode={isDarkMode} />
         </div>
       </div>
     </main>
   );
-}
+}