Apply UI/UX review suggestions

Author: thomas-senechal

plugin/home/src/App.tsx

@@ -1,7 +1,29 @@
-import { FiSearch, FiGlobe, FiUpload, FiHash, FiInfo } from "react-icons/fi";
+import { FiSearch, FiInfo } from "react-icons/fi";
 import { useEffect, useState } from "react";
 import { GenerateTheme } from "deweb-pages/src/hooks/GenerateTheme";
 
+type QuickAccessItemProps = {
+  path: string;
+  title: string;
+  description: string;
+  href: string;
+};
+
+const QuickAccessItem = ({ path, title, description, href }: QuickAccessItemProps) => (
+  <a
+    href={href}
+    target="_blank"
+    rel="noopener noreferrer"
+    className="bg-secondary text-primary p-6 rounded-lg shadow-lg cursor-pointer hover:bg-opacity-90 transition-all no-underline block"
+  >
+    <div className="flex items-center justify-center mb-4">
+      <span className="paragraph-lg text-4xl">{path}</span>
+    </div>
+    <h3 className="paragraph-lg text-xl font-bold mb-2">{title}</h3>
+    <p className="paragraph-lg text-sm">{description}</p>
+  </a>
+);
+
 export default function App() {
   const [searchQuery, setSearchQuery] = useState("");
   const [port, setPort] = useState("");
@@ -35,21 +57,42 @@ export default function App() {
       });
   }, []);
 
-  const redirectTo = (service: string) => {
+  const generateUrl = (service: string, path: string = '') => {
     const { host } = new URL(window.location.href);
-    const url = host === "station.massa" && port
-      ? `http://${service}.localhost:${port}`
-      : `//${service}.${host}`;
-    window.open(url, '_blank');
+    return host === "station.massa" && port
+      ? `http://${service}.localhost:${port}${path}`
+      : `//${service}.${host}${path}`;
   };
 
   const handleSearch = (e: React.FormEvent) => {
     e.preventDefault();
     if (searchQuery.trim()) {
-      redirectTo(searchQuery);
+      window.open(generateUrl(searchQuery), '_blank');
     }
   };
 
+  const quickAccessItems = [
+    {
+      path: "/explore",
+      title: "Explore DeWeb",
+      description: "Browse the list of all websites available in the decentralized web ecosystem",
+      service: "deweb",
+      pathUrl: "/explore"
+    },
+    {
+      path: "/mns",
+      title: "Massa Name System",
+      description: "Decentralized naming service for users and smart contracts on the Massa blockchain",
+      service: "mns"
+    },
+    {
+      path: "/upload",
+      title: "DeWeb Uploader",
+      description: "Upload and manage your websites on DeWeb",
+      service: "dws"
+    }
+  ];
+
   const theme = GenerateTheme();
 
   return (
@@ -83,44 +126,18 @@ export default function App() {
         <span className="mr-3 text-primary">.massa</span>
       </form>
 
-      <h2 className="text-2xl font-bold mb-4">Quick Access</h2>
+      <h2 className="paragraph-lg text-2xl font-bold mb-4 text-secondary">Quick Access</h2>
 
       <div className="grid grid-cols-1 md:grid-cols-3 gap-6 w-full md:w-4/5 lg:w-3/4 xl:w-2/3 mb-8">
-        {/* DeWeb Homepage Card */}
-        <div
-          onClick={() => redirectTo('deweb')}
-          className="bg-secondary text-primary p-6 rounded-lg shadow-lg cursor-pointer hover:bg-opacity-90 transition-all"
-        >
-          <div className="flex items-center justify-center mb-4">
-            <FiGlobe className="text-4xl" />
-          </div>
-          <h3 className="text-xl font-bold mb-2">DeWeb</h3>
-          <p className="text-sm">Search for websites and browse the list of websites uploaded on DeWeb</p>
-        </div>
-
-        {/* MNS Card */}
-        <div
-          onClick={() => redirectTo('mns')}
-          className="bg-secondary text-primary p-6 rounded-lg shadow-lg cursor-pointer hover:bg-opacity-90 transition-all"
-        >
-          <div className="flex items-center justify-center mb-4">
-            <FiHash className="text-4xl" />
-          </div>
-          <h3 className="text-xl font-bold mb-2">Massa Name System</h3>
-          <p className="text-sm">Decentralized naming service for users and smart contracts on the Massa blockchain</p>
-        </div>
-
-        {/* DeWeb Uploader Card */}
-        <div
-          onClick={() => redirectTo('dws')}
-          className="bg-secondary text-primary p-6 rounded-lg shadow-lg cursor-pointer hover:bg-opacity-90 transition-all"
-        >
-          <div className="flex items-center justify-center mb-4">
-            <FiUpload className="text-4xl" />
-          </div>
-          <h3 className="text-xl font-bold mb-2">DeWeb Uploader</h3>
-          <p className="text-sm">Upload and manage your websites on DeWeb</p>
-        </div>
+        {quickAccessItems.map((item) => (
+          <QuickAccessItem
+            key={item.path}
+            path={item.path}
+            title={item.title}
+            description={item.description}
+            href={generateUrl(item.service, item.pathUrl || '')}
+          />
+        ))}
       </div>
     </div>
   );