Refactor code structure for improved readability and maintainability

app/docs/page.tsx

@@ -3,6 +3,8 @@
 import React from "react";
 import ReactMarkdown, { Components } from "react-markdown";
 import remarkGfm from "remark-gfm";
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
 
 const ReadmePage = () => {
   const readmeContent = `
@@ -225,44 +227,21 @@ Development Lead: Yussif Yahuza ([yussif@yoursoftwareengineers.com](mailto:yussi
   };
 
   return (
-    <div
+    <div className="container mx-auto px-4 py-8 max-w-4xl">
-      style={{
+      <div className="bg-white p-8 rounded-lg shadow-md">
-        padding: "2rem",
+        <ReactMarkdown components={components} remarkPlugins={[remarkGfm]}>
-        fontFamily:
+          {readmeContent}
-          '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
+        </ReactMarkdown>
-        lineHeight: "1.7",
+
-        color: "#24292e",
+        <div className="mt-8 border-t pt-6">
-        backgroundColor: "#ffffff",
+          <h3 className="text-xl font-semibold mb-4">Additional Resources</h3>
-        maxWidth: "800px",
+          <Link href="/docs/swot">
-        margin: "40px auto",
+            <Button className="bg-blue-600 hover:bg-blue-700">
-        boxShadow: "0 4px 12px rgba(0,0,0,0.08)",
+              View SWOT Analysis
-        borderRadius: "8px",
+            </Button>
-      }}
+          </Link>
-    >
+        </div>
-      <ReactMarkdown components={components} remarkPlugins={[remarkGfm]}>
+      </div>
-        {readmeContent}
-      </ReactMarkdown>
-      <a
-        href="http://35.207.46.142/Wodey/woedii"
-        target="_blank"
-        rel="noopener noreferrer"
-        style={{
-          display: "inline-block",
-          marginTop: "2.5rem",
-          padding: "0.8rem 1.6rem",
-          backgroundColor: "#0366d6",
-          color: "white",
-          textDecoration: "none",
-          borderRadius: "6px",
-          fontWeight: "600",
-          textAlign: "center",
-          transition: "background-color 0.2s ease-in-out",
-        }}
-        onMouseOver={(e) => (e.currentTarget.style.backgroundColor = "#005cc5")}
-        onMouseOut={(e) => (e.currentTarget.style.backgroundColor = "#0366d6")}
-      >
-        Go to Project Repo
-      </a>
     </div>
   );
 };

app/docs/swot/page.tsx

@@ -0,0 +1,63 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Button } from "@/components/ui/button";
+import Link from "next/link";
+
+export default function SwotAnalysisPage() {
+  const [isClient, setIsClient] = useState(false);
+
+  // This ensures the PDF viewer only renders on the client side
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
+
+  return (
+    <div className="container mx-auto px-4 py-8">
+      <div className="mb-6">
+        <Link href="/docs">
+          <Button variant="outline" className="mb-4">
+            ← Back to Documentation
+          </Button>
+        </Link>
+        <h1 className="text-3xl font-bold mb-2">WODEY SWOT Analysis</h1>
+        <p className="text-gray-600 mb-6">
+          An in-depth analysis of Strengths, Weaknesses, Opportunities, and
+          Threats for the WODEY platform.
+        </p>
+      </div>
+      
+      <div className="flex justify-end mb-4">
+        <a 
+          href="/docs/SWOT-Analysis.pdf"
+          download="WODEY-SWOT-Analysis.pdf"
+          className="flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded shadow-md"
+        >
+          <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
+          </svg>
+          Download PDF
+        </a>
+      </div>
+      
+      {isClient ? (
+        <div className="w-full h-[calc(100vh-200px)] border border-gray-300 rounded-lg overflow-hidden">
+          <object
+            data="/docs/SWOT-Analysis.pdf#toolbar=0"
+            type="application/pdf"
+            className="w-full h-full"
+            title="SWOT Analysis PDF"
+          >
+            <p>
+              Your browser does not support PDFs. Please download to view.
+            </p>
+          </object>
+        </div>
+      ) : (
+        <div className="flex items-center justify-center w-full h-[calc(100vh-200px)] bg-gray-100 rounded-lg">
+          Loading PDF viewer...
+        </div>
+      )}
+    </div>
+  );
+}