Fix bylaws for mobile

client/src/components/Bylaws.tsx

@@ -1,7 +1,20 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { motion } from 'framer-motion';
 
 const Bylaws: React.FC = () => {
+  const [isMobile, setIsMobile] = useState(false);
+
+  useEffect(() => {
+    const checkMobile = () => {
+      setIsMobile(window.innerWidth < 768); // Adjust this breakpoint as needed
+    };
+
+    checkMobile();
+    window.addEventListener('resize', checkMobile);
+
+    return () => window.removeEventListener('resize', checkMobile);
+  }, []);
+
   return (
     <div className="container mx-auto px-4 py-8">
       <motion.h1
@@ -17,13 +30,27 @@ const Bylaws: React.FC = () => {
         transition={{ duration: 0.5 }}
         className="bg-white rounded-lg shadow-lg p-4"
       >
-        <div className="w-full" style={{ height: '800px' }}>
-          <iframe
-            src="/MCD-Inc._AOI_Bylaws.pdf#view=FitH"
-            className="w-full h-full rounded-md"
-            title="MCDi Bylaws"
-          />
-        </div>
+        {isMobile ? (
+          <div>
+            <p className="mb-4">Click the link below to view the MCDi Bylaws PDF:</p>
+            <a
+              href="/MCD-Inc._AOI_Bylaws.pdf"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="bg-[#8C1D40] text-white font-bold py-2 px-4 rounded hover:bg-[#6B1631] transition duration-300"
+            >
+              View Bylaws PDF
+            </a>
+          </div>
+        ) : (
+          <div className="w-full" style={{ height: '800px' }}>
+            <iframe
+              src="/MCD-Inc._AOI_Bylaws.pdf#view=FitH"
+              className="w-full h-full rounded-md"
+              title="MCDi Bylaws"
+            />
+          </div>
+        )}
       </motion.div>
     </div>
   );