@devvistatech/devvista-kit 0.0.10 → 0.0.13

package/components/addOns/functional/aboutSections/AboutSection.tsx

@@ -1,545 +1,582 @@
-"use client";
-
-import { motion } from "framer-motion";
-import Image from "next/image";
-import { useState, useEffect, useRef } from "react";
-import { EditIconButton, CloseButton, UpdateButton, CancelButton, ToggleButton } from "@/components/other/button";
-import Spinner from "@/components/addOns/non-functional/spinner";
-import { X } from "lucide-react";
-import { useAuth, useUser } from "@clerk/nextjs";
-import { ABOUT_SECTION } from "./constants/aboutSection";
-
-interface AboutContent {
-  id: number;
-  documentId: string;
-  title: string;
-  description: string;
-  about: boolean;
-  image?: { url: string; id: number };
-  createdAt: string;
-}
-
-interface StrapiUser {
-  id: number;
-  username: string;
-  email: string;
-  businessAdminId?: string;
-}
-
-interface AboutSectionProps {
-  user: StrapiUser | null;
-  authLoading: boolean;
-}
-
-export function AboutSection({ user, authLoading }: AboutSectionProps) {
-  const { getToken } = useAuth();
-  const { isSignedIn } = useUser();
-  const [isMobile, setIsMobile] = useState(false);
-  const [isEditModalOpen, setIsEditModalOpen] = useState(false);
-  const [formTitle, setFormTitle] = useState<string>("");
-  const [formDescription, setFormDescription] = useState<string>("");
-  const [formImage, setFormImage] = useState<File | null>(null);
-  const [isSubmitting, setIsSubmitting] = useState(false);
-  const [isExpanded, setIsExpanded] = useState(false);
-  const [title, setTitle] = useState<string | null>(null);
-  const [description, setDescription] = useState<string | null>(null);
-  const [imageUrl, setImageUrl] = useState<string | null>(null);
-  const [error, setError] = useState<string | null>(null);
-  const [isLoading, setIsLoading] = useState(true);
-  const hasFetched = useRef(false);
-
-  useEffect(() => {
-    if (hasFetched.current) return;
-    hasFetched.current = true;
-
-    const fetchAboutData = async () => {
-      setIsLoading(true);
-      try {
-        const response = await fetch(`/api/about?t=${Date.now()}`, {
-          headers: { "Content-Type": "application/json" },
-          cache: "no-store",
-        });
-        if (response.ok) {
-          const result = await response.json();
-          if (result.data) {
-            const aboutData: AboutContent = Array.isArray(result.data)
-              ? result.data[0]
-              : result.data;
-            setTitle(aboutData.title || null);
-            setDescription(aboutData.description || null);
-            setImageUrl(aboutData.image?.url || null);
-            setFormTitle(aboutData.title || "");
-            setFormDescription(aboutData.description || "");
-          } else {
-            throw new Error(ABOUT_SECTION.ERRORS.NO_DATA_FOUND);
-          }
-        } else {
-          const errorData = await response.json();
-          throw new Error(errorData.error || ABOUT_SECTION.ERRORS.FETCH_FAILED.replace("${response.status}", response.status.toString()));
-        }
-      } catch (err) {
-        console.error("Fetch About Error:", err);
-        setError(err instanceof Error ? err.message : ABOUT_SECTION.ERRORS.FETCH_ERROR);
-      } finally {
-        setIsLoading(false);
-      }
-    };
-    fetchAboutData();
-  }, []);
-
-  useEffect(() => {
-    const debounce = (fn: () => void, delay: number) => {
-      let timeout: NodeJS.Timeout;
-      return () => {
-        clearTimeout(timeout);
-        timeout = setTimeout(fn, delay);
-      };
-    };
-
-    const checkMobile = debounce(() => {
-      setIsMobile(window.innerWidth < 768);
-    }, 100);
-
-    checkMobile();
-    window.addEventListener("resize", checkMobile);
-    return () => window.removeEventListener("resize", checkMobile);
-  }, []);
-
-  useEffect(() => {
-    const event = new CustomEvent("modalStateChange", {
-      detail: { isOpen: isEditModalOpen },
-    });
-    window.dispatchEvent(event);
-  }, [isEditModalOpen]);
-
-  useEffect(() => {
-    if (isEditModalOpen) {
-      const scrollY = window.scrollY;
-      document.body.style.position = "fixed";
-      document.body.style.top = `-${scrollY}px`;
-      document.body.style.width = "100%";
-      document.body.classList.add("overflow-hidden");
-
-      return () => {
-        const scrollYRestored = parseInt(document.body.style.top || "0", 10) * -1;
-        document.body.style.position = "";
-        document.body.style.top = "";
-        document.body.style.width = "";
-        document.body.classList.remove("overflow-hidden");
-        window.scrollTo(0, scrollYRestored);
-      };
-    }
-  }, [isEditModalOpen]);
-
-  useEffect(() => {
-    const handleEsc = (e: KeyboardEvent) => {
-      if (e.key === "Escape" && isEditModalOpen) {
-        handleCancelEdit();
-      }
-    };
-    window.addEventListener("keydown", handleEsc);
-    return () => window.removeEventListener("keydown", handleEsc);
-  }, [isEditModalOpen]);
-
-  const openEditModal = () => {
-    setFormTitle(title || "");
-    setFormDescription(description || "");
-    setFormImage(null);
-    setIsEditModalOpen(true);
-  };
-
-  const handleCancelEdit = () => {
-    setIsEditModalOpen(false);
-    setFormTitle(title || "");
-    setFormDescription(description || "");
-    setFormImage(null);
-  };
-
-  const handlePatchSubmit = async (
-    e: React.FormEvent,
-    formTitle: string,
-    formDescription: string,
-    formImage: File | null,
-    onSuccess: () => void
-  ) => {
-    e.preventDefault();
-    if (!isSignedIn || !user?.businessAdminId) {
-      console.error("No user or businessAdminId:", {
-        user,
-        businessAdminId: user?.businessAdminId,
-      });
-      setError(ABOUT_SECTION.ERRORS.UNAUTHORIZED_UPDATE);
-      return;
-    }
-
-    try {
-      const formData = new FormData();
-      if (formTitle && formTitle !== title) {
-        formData.append("title", formTitle);
-      }
-      if (formDescription && formDescription !== description) {
-        formData.append("description", formDescription);
-      }
-      if (formImage) {
-        if (!["image/jpeg", "image/png", "image/gif"].includes(formImage.type)) {
-          throw new Error(ABOUT_SECTION.ERRORS.INVALID_IMAGE_TYPE);
-        }
-        formData.append("image", formImage);
-      }
-
-      if (!formData.has("title") && !formData.has("description") && !formData.has("image")) {
-        onSuccess();
-        return;
-      }
-
-      const token = await getToken();
-      if (!token) {
-        throw new Error(ABOUT_SECTION.ERRORS.NO_AUTH_TOKEN);
-      }
-
-      const response = await fetch("/api/about", {
-        method: "PUT",
-        headers: {
-          Authorization: `Bearer ${token}`,
-        },
-        body: formData,
-      });
-
-      if (!response.ok) {
-        const errorData = await response.json();
-        throw new Error(errorData.error || ABOUT_SECTION.ERRORS.UPDATE_FAILED.replace("${response.status}", response.status.toString()));
-      }
-
-      const result = await response.json();
-      if (result.data) {
-        const aboutData: AboutContent = Array.isArray(result.data)
-          ? result.data[0]
-          : result.data;
-        setImageUrl(aboutData.image?.url || null);
-        setDescription(aboutData.description || null);
-        setTitle(aboutData.title || null);
-        setFormTitle(aboutData.title || "");
-        setFormDescription(aboutData.description || "");
-        setError(null);
-        onSuccess();
-      }
-    } catch (err) {
-      console.error("Update Error:", err);
-      setError(err instanceof Error ? err.message : ABOUT_SECTION.ERRORS.UPDATE_ERROR);
-    }
-  };
-
-  const isAdmin = isSignedIn && !!user?.businessAdminId;
-
-  const sectionVariants = {
-    hidden: { opacity: 0, y: 20 },
-    visible: {
-      opacity: 1,
-      y: 0,
-      transition: { duration: isMobile ? 0.3 : 0.5, ease: "easeOut" },
-    },
-  };
-
-  const itemVariants = {
-    hidden: { opacity: 0, y: 10 },
-    visible: {
-      opacity: 1,
-      y: 0,
-      transition: { duration: isMobile ? 0.3 : 0.5, ease: "easeOut" },
-    },
-  };
-
-  const modalVariants = {
-    hidden: { opacity: 0, y: "100vh" },
-    visible: { opacity: 1, y: 0, transition: { duration: 0.5, ease: [0.16, 1, 0.3, 1] } },
-    exit: { opacity: 0, y: "100vh", transition: { duration: 0.3, ease: "easeIn" } },
-  };
-
-  const paragraphs = description
-    ? description.split("\n").filter((paragraph) => paragraph.trim() !== "")
-    : [];
-
-  return (
-    <div className="w-full">
-      <style jsx>{`
-        :root {
-          --jubilee: #F47C7C;
-          --exuberant-blue: #FF69B4;
-          --modern-purple: #D946EF;
-          --green-primary: #1a3c34;
-        }
-
-        .glassmorphism {
-          background: rgba(255, 255, 255, 0.08);
-          backdrop-filter: blur(10px);
-          border: 2px solid transparent;
-          border-image: linear-gradient(45deg, var(--exuberant-blue), var(--jubilee), var(--modern-purple)) 1;
-          box-shadow: 0 16px 48px rgba(0, 0, 0, 0.1);
-        }
-
-        .modal-form {
-          max-height: 90vh;
-          overflow-y: auto;
-          -webkit-overflow-scrolling: touch;
-        }
-
-        .modal-form input,
-        .modal-form textarea {
-          font-size: 0.875rem;
-          padding: 0.5rem;
-          border-radius: 0.375rem;
-          background: #374151;
-          color: #f3f4f6;
-          border: 1px solid #4b5563;
-        }
-
-        .modal-form input:focus,
-        .modal-form textarea:focus {
-          outline: none;
-          ring: 2px solid #3b82f6;
-        }
-
-        .modal-form label {
-          font-size: 0.875rem;
-          color: #d1d5db;
-        }
-
-        body.overflow-hidden {
-          overflow: hidden;
-        }
-
-        @supports not (backdrop-filter: blur(10px)) {
-          .glassmorphism {
-            background: rgba(255, 255, 255, 0.2);
-          }
-        }
-
-        @media (max-width: 768px) {
-          .glassmorphism {
-            backdrop-filter: none;
-            background: rgba(255, 255, 255, 0.2);
-          }
-
-          .modal-form input,
-          .modal-form textarea {
-            font-size: 0.875rem;
-            padding: 0.5rem;
-            border-radius: 0.375rem;
-          }
-
-          .modal-form label {
-            font-size: 0.875rem;
-          }
-
-          .modal-form .flex {
-            flex-direction: column;
-            gap: 0.5rem;
-          }
-
-          .modal-form textarea {
-            min-height: 80px;
-          }
-        }
-
-        @media (max-width: 320px) {
-          .modal-form input,
-          .modal-form textarea {
-            font-size: 0.75rem;
-            padding: 0.5rem;
-          }
-
-          .modal-form label {
-            font-size: 0.75rem;
-          }
-        }
-      `}</style>
-      <motion.div
-        variants={sectionVariants}
-        initial="hidden"
-        animate="visible"
-        className="mb-24 max-w-[200rem] mx-auto px-8 sm:px-10 pt-24"
-      >
-        <div className="flex flex-col md:flex-row gap-10 items-start min-h-[fit-content]">
-          <motion.div
-            variants={itemVariants}
-            className="relative h-[40vh] min-h-[400px] sm:h-[50vh] lg:h-[600px] rounded-[1.5rem] overflow-hidden glassmorphism w-full mx-auto max-w-3xl md:max-w-none md:mx-0"
-          >
-            {imageUrl ? (
-              <div className="relative w-full h-full">
-                <Image
-                  src={imageUrl}
-                  alt="About DevVista Kit"
-                  fill
-                  className="object-cover rounded-[1rem] transition-transform duration-700 hover:scale-110"
-                  sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw"
-                  loading="lazy"
-                  quality={85}
-                />
-                <div className="absolute inset-0 bg-gradient-to-t from-black/40 to-transparent opacity-0 hover:opacity-100 transition-opacity duration-500"></div>
-                {isAdmin && (
-                  <div className="absolute top-2 right-0 flex">
-                    <EditIconButton
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        openEditModal();
-                      }}
-                    />
-                  </div>
-                )}
-              </div>
-            ) : (
-              <div className="w-full h-full flex items-center justify-center">
-                <p className="text-gray-600 text-lg">{ABOUT_SECTION.UI.NO_IMAGE_AVAILABLE}</p>
-              </div>
-            )}
-          </motion.div>
-          <motion.div
-            variants={itemVariants}
-            className="space-y-6 min-h-[fit-content] h-auto w-full relative"
-          >
-            {title && (
-              <motion.h2
-                variants={itemVariants}
-                className="text-2xl sm:text-3xl font-bold text-gray-800"
-              >
-                {title}
-              </motion.h2>
-            )}
-            {paragraphs.length > 0 ? (
-              <>
-                {paragraphs
-                  .slice(0, isExpanded ? paragraphs.length : 3)
-                  .map((paragraph, index) => (
-                    <motion.p
-                      key={index}
-                      variants={itemVariants}
-                      className="text-gray-800 text-base sm:text-lg md:text-xl leading-relaxed font-medium"
-                    >
-                      {paragraph}
-                    </motion.p>
-                  ))}
-                {paragraphs.length > 3 && (
-                  <motion.div variants={itemVariants} className="mt-4">
-                    <ToggleButton
-                      variant="toggle-bio"
-                      onClick={() => setIsExpanded(!isExpanded)}
-                    >
-                      {isExpanded ? ABOUT_SECTION.BUTTONS.READ_LESS_BUTTON : ABOUT_SECTION.BUTTONS.READ_MORE_BUTTON}
-                    </ToggleButton>
-                  </motion.div>
-                )}
-              </>
-            ) : (
-              <motion.p
-                variants={itemVariants}
-                className="text-gray-600 text-base sm:text-lg md:text-xl leading-relaxed font-medium"
-              >
-                {ABOUT_SECTION.UI.NO_DESCRIPTION_AVAILABLE}
-              </motion.p>
-            )}
-            {authLoading || isLoading ? (
-              <Spinner />
-            ) : isAdmin ? (
-              <p className="text-gray-400 text-sm font-medium">
-                {ABOUT_SECTION.UI.ADMIN_LOGGED_IN_MESSAGE}
-              </p>
-            ) : null}
-            {error && (
-              <p className="text-red-400 text-base sm:text-lg md:text-xl text-center mt-4">{error}</p>
-            )}
-          </motion.div>
-        </div>
-      </motion.div>
-      {isEditModalOpen && (
-        <motion.div
-          variants={modalVariants}
-          initial="hidden"
-          animate="visible"
-          exit="exit"
-          className="fixed inset-0 bg-black/90 flex items-center justify-center z-[10000] p-4 isolate"
-          onClick={handleCancelEdit}
-          aria-modal="true"
-          role="dialog"
-        >
-          <div
-            className="relative max-w-5xl w-full mx-4 p-6 bg-gray-800/50 border border-gray-700/50 rounded-lg shadow-lg max-h-[90vh] overflow-y-auto modal-form"
-            onClick={(e) => e.stopPropagation()}
-          >
-            <CloseButton onClick={handleCancelEdit}>
-              <X className="h-6 w-6 sm:h-8 sm:w-8" />
-            </CloseButton>
-            <h3 className="text-xl font-bold text-white mb-4">{ABOUT_SECTION.UI.MODAL_HEADING}</h3>
-            <form
-              onSubmit={(e) => {
-                setIsSubmitting(true);
-                handlePatchSubmit(e, formTitle, formDescription, formImage, () => {
-                  setIsEditModalOpen(false);
-                }).finally(() => setIsSubmitting(false));
-              }}
-              className="space-y-4 modal-form"
-            >
-              <div>
-                <label
-                  htmlFor="aboutTitle"
-                  className="block text-sm font-medium text-gray-300 mb-1"
-                >
-                  {ABOUT_SECTION.UI.TITLE_LABEL}
-                </label>
-                <input
-                  id="aboutTitle"
-                  type="text"
-                  value={formTitle}
-                  onChange={(e) => setFormTitle(e.target.value)}
-                  className="w-full p-2 rounded bg-gray-700 text-white border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm"
-                  placeholder={ABOUT_SECTION.UI.TITLE_PLACEHOLDER}
-                />
-              </div>
-              <div>
-                <label
-                  htmlFor="aboutImage"
-                  className="block text-sm font-medium text-gray-300 mb-1"
-                >
-                  {ABOUT_SECTION.UI.IMAGE_LABEL}
-                </label>
-                <input
-                  id="aboutImage"
-                  type="file"
-                  accept="image/jpeg,image/png,image/gif"
-                  onChange={(e) => setFormImage(e.target.files?.[0] || null)}
-                  className="w-full p-2 rounded bg-gray-700 text-white border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm"
-                />
-                {formImage && (
-                  <p className="mt-2 text-gray-300 text-sm">{ABOUT_SECTION.UI.SELECTED_IMAGE_TEXT.replace("${formImage.name}", formImage.name)}</p>
-                )}
-              </div>
-              <div>
-                <label
-                  htmlFor="aboutDescription"
-                  className="block text-sm font-medium text-gray-300 mb-1"
-                >
-                  {ABOUT_SECTION.UI.DESCRIPTION_LABEL}
-                </label>
-                <textarea
-                  id="aboutDescription"
-                  value={formDescription}
-                  onChange={(e) => setFormDescription(e.target.value)}
-                  className="w-full p-2 rounded bg-gray-700 text-white border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm min-h-[80px]"
-                  placeholder={ABOUT_SECTION.UI.DESCRIPTION_PLACEHOLDER}
-                />
-              </div>
-              <div className="flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-3">
-                <UpdateButton type="submit" disabled={isSubmitting}>
-                  {isSubmitting ? ABOUT_SECTION.BUTTONS.SAVING_BUTTON : ABOUT_SECTION.BUTTONS.UPDATE_BUTTON}
-                </UpdateButton>
-                <CancelButton type="button" onClick={handleCancelEdit}>
-                  {ABOUT_SECTION.BUTTONS.CANCEL_BUTTON}
-                </CancelButton>
-              </div>
-              {error && <p className="text-red-400 text-sm font-medium">{error}</p>}
-            </form>
-          </div>
-        </motion.div>
-      )}
-    </div>
-  );
+"use client";
+
+import { motion } from "framer-motion";
+import Image from "next/image";
+import { useState, useEffect, useRef } from "react";
+import { EditIconButton, CloseButton, UpdateButton, CancelButton, ToggleButton, TrashIconButton } from "@/components/other/button";
+import Spinner from "@/components/addOns/non-functional/spinner";
+import { X } from "lucide-react";
+import { useAuth } from "@clerk/nextjs";
+import { ABOUT_SECTION } from "./constants/aboutSection";
+import { compressImage } from "@/lib/utils/compressImage";
+import { StrapiUser } from "@/lib/types";
+import { isAdminUser } from "@/lib/auth/auth-utils";
+
+interface AboutContent {
+  id: number;
+  documentId: string;
+  title: string;
+  description: string;
+  about: boolean;
+  image?: { url: string; id: number };
+  createdAt: string;
+}
+
+interface AboutSectionProps {
+  user: StrapiUser | null;
+  isSignedIn: boolean | undefined;
+}
+
+export function AboutSection({ user, isSignedIn }: AboutSectionProps) {
+  const { getToken } = useAuth();
+  const [isMobile, setIsMobile] = useState(false);
+  const [isEditModalOpen, setIsEditModalOpen] = useState(false);
+  const [formTitle, setFormTitle] = useState<string>("");
+  const [formDescription, setFormDescription] = useState<string>("");
+  const [formImage, setFormImage] = useState<File | null>(null);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [title, setTitle] = useState<string | null>(null);
+  const [description, setDescription] = useState<string | null>(null);
+  const [imageUrl, setImageUrl] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [isAdmin, setIsAdmin] = useState(false);
+  const hasFetched = useRef(false);
+
+  useEffect(() => {
+    if (hasFetched.current) return;
+    hasFetched.current = true;
+
+    const fetchAboutData = async () => {
+      setIsLoading(true);
+      try {
+        const response = await fetch(`/api/about?t=${Date.now()}`, {
+          headers: { "Content-Type": "application/json" },
+          cache: "no-store",
+        });
+        if (response.ok) {
+          const result = await response.json();
+          if (result.data) {
+            const aboutData: AboutContent = Array.isArray(result.data)
+              ? result.data[0]
+              : result.data;
+            setTitle(aboutData.title || null);
+            setDescription(aboutData.description || null);
+            setImageUrl(aboutData.image?.url || null);
+            setFormTitle(aboutData.title || "");
+            setFormDescription(aboutData.description || "");
+          } else {
+            setTitle(ABOUT_SECTION.UI.FALLBACK_TITLE);
+            setDescription(ABOUT_SECTION.UI.FALLBACK_DESCRIPTION);
+            setImageUrl(null);
+          }
+        } else {
+          const errorData = await response.json();
+          throw new Error(errorData.error || ABOUT_SECTION.ERRORS.FETCH_FAILED.replace("${response.status}", response.status.toString()));
+        }
+      } catch (err) {
+        console.error("Fetch About Error:", err);
+        setError(err instanceof Error ? err.message : ABOUT_SECTION.ERRORS.FETCH_ERROR);
+        setTitle(ABOUT_SECTION.UI.FALLBACK_TITLE);
+        setDescription(ABOUT_SECTION.UI.FALLBACK_DESCRIPTION);
+        setImageUrl(null);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    fetchAboutData();
+  }, []);
+
+  useEffect(() => {
+    let isMounted = true;
+    const checkAdmin = async () => {
+      if (!isSignedIn || !user?.authId) {
+
+        if (isMounted) setIsAdmin(false);
+        return;
+      }
+
+      const adminStatus = await isAdminUser(isSignedIn, user);
+      if (isMounted) {
+
+        setIsAdmin(adminStatus);
+      }
+    };
+    checkAdmin();
+    return () => {
+      isMounted = false;
+    };
+  }, [isSignedIn, user]);
+
+  useEffect(() => {
+    const debounce = (fn: () => void, delay: number) => {
+      let timeout: NodeJS.Timeout;
+      return () => {
+        clearTimeout(timeout);
+        timeout = setTimeout(fn, delay);
+      };
+    };
+
+    const checkMobile = debounce(() => {
+      setIsMobile(window.innerWidth < 768);
+    }, 100);
+
+    checkMobile();
+    window.addEventListener("resize", checkMobile);
+    return () => window.removeEventListener("resize", checkMobile);
+  }, []);
+
+  useEffect(() => {
+    const event = new CustomEvent("modalStateChange", {
+      detail: { isOpen: isEditModalOpen },
+    });
+    window.dispatchEvent(event);
+  }, [isEditModalOpen]);
+
+  useEffect(() => {
+    if (isEditModalOpen) {
+      const scrollY = window.scrollY;
+      document.body.style.position = "fixed";
+      document.body.style.top = `-${scrollY}px`;
+      document.body.style.width = "100%";
+      document.body.classList.add("overflow-hidden");
+
+      return () => {
+        const scrollYRestored = parseInt(document.body.style.top || "0", 10) * -1;
+        document.body.style.position = "";
+        document.body.style.top = "";
+        document.body.style.width = "";
+        document.body.classList.remove("overflow-hidden");
+        window.scrollTo(0, scrollYRestored);
+      };
+    }
+  }, [isEditModalOpen]);
+
+  useEffect(() => {
+    const handleEsc = (e: KeyboardEvent) => {
+      if (e.key === "Escape" && isEditModalOpen) {
+        handleCancelEdit();
+      }
+    };
+    window.addEventListener("keydown", handleEsc);
+    return () => window.removeEventListener("keydown", handleEsc);
+  }, [isEditModalOpen]);
+
+  const openEditModal = () => {
+    setFormTitle(title || "");
+    setFormDescription(description || "");
+    setFormImage(null);
+    setIsEditModalOpen(true);
+  };
+
+  const handleCancelEdit = () => {
+    setIsEditModalOpen(false);
+    setFormTitle(title || "");
+    setFormDescription(description || "");
+    setFormImage(null);
+  };
+
+  const handlePatchSubmit = async (
+    e: React.FormEvent,
+    formTitle: string,
+    formDescription: string,
+    formImage: File | null,
+    onSuccess: () => void
+  ) => {
+    e.preventDefault();
+    if (!(await isAdminUser(isSignedIn, user))) {
+      console.error("Unauthorized: User is not an admin", {
+        isSignedIn,
+        authId: user?.authId,
+        businessAdminId: user?.businessAdminId,
+        userRole: user?.userRole,
+        businessOwner: user?.businessOwner,
+      });
+      setError(ABOUT_SECTION.ERRORS.UNAUTHORIZED_UPDATE);
+      return;
+    }
+
+    try {
+      const formData = new FormData();
+      if (formTitle && formTitle !== title) {
+        formData.append("title", formTitle);
+      }
+      if (formDescription && formDescription !== description) {
+        formData.append("description", formDescription);
+      }
+      if (formImage) {
+        const compressedImage = await compressImage(formImage);
+        if (!["image/jpeg", "image/png", "image/gif"].includes(compressedImage.type)) {
+          throw new Error(ABOUT_SECTION.ERRORS.INVALID_IMAGE_TYPE);
+        }
+        formData.append("image", compressedImage);
+      }
+
+      if (!formData.has("title") && !formData.has("description") && !formData.has("image")) {
+        onSuccess();
+        return;
+      }
+
+      const token = await getToken();
+      if (!token) {
+        throw new Error(ABOUT_SECTION.ERRORS.NO_AUTH_TOKEN);
+      }
+
+      const response = await fetch("/api/about", {
+        method: "PUT",
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+        body: formData,
+      });
+
+      if (!response.ok) {
+        const errorData = await response.json();
+        throw new Error(errorData.error || ABOUT_SECTION.ERRORS.UPDATE_FAILED.replace("${response.status}", response.status.toString()));
+      }
+
+      const result = await response.json();
+      if (result.data) {
+        const aboutData: AboutContent = Array.isArray(result.data)
+          ? result.data[0]
+          : result.data;
+        setImageUrl(aboutData.image?.url || null);
+        setDescription(aboutData.description || null);
+        setTitle(aboutData.title || null);
+        setFormTitle(aboutData.title || "");
+        setFormDescription(aboutData.description || "");
+        setError(null);
+        onSuccess();
+      }
+    } catch (err) {
+      console.error("Update Error:", err);
+      setError(err instanceof Error ? err.message : ABOUT_SECTION.ERRORS.UPDATE_ERROR);
+    }
+  };
+
+  const sectionVariants = {
+    hidden: { opacity: 0, y: 20 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: { duration: isMobile ? 0.3 : 0.5, ease: "easeOut" },
+    },
+  };
+
+  const itemVariants = {
+    hidden: { opacity: 0, y: 10 },
+    visible: {
+      opacity: 1,
+      y: 0,
+      transition: { duration: isMobile ? 0.3 : 0.5, ease: "easeOut" },
+    },
+  };
+
+  const modalVariants = {
+    hidden: { opacity: 0, y: "100vh" },
+    visible: { opacity: 1, y: 0, transition: { duration: 0.5, ease: [0.16, 1, 0.3, 1] } },
+    exit: { opacity: 0, y: "100vh", transition: { duration: 0.3, ease: "easeIn" } },
+  };
+
+  const paragraphs = description
+    ? description.split("\n").filter((paragraph) => paragraph.trim() !== "")
+    : [];
+
+  return (
+    <div className="w-full">
+      <style jsx>{`
+        :root {
+          --jubilee: #F47C7C;
+          --exuberant-blue: #FF69B4;
+          --modern-purple: #D946EF;
+          --green-primary: #1a3c34;
+        }
+
+        .glassmorphism {
+          background: rgba(255, 255, 255, 0.08);
+          backdrop-filter: blur(10px);
+          border: 2px solid transparent;
+          border-image: linear-gradient(45deg, var(--exuberant-blue), var(--jubilee), var(--modern-purple)) 1;
+          box-shadow: 0 16px 48px rgba(0, 0, 0, 0.1);
+        }
+
+        .modal-form {
+          max-height: 90vh;
+          overflow-y: auto;
+          -webkit-overflow-scrolling: touch;
+        }
+
+        .modal-form input,
+        .modal-form textarea {
+          font-size: 0.875rem;
+          padding: 0.5rem;
+          border-radius: 0.375rem;
+          background: #374151;
+          color: #f3f4f6;
+          border: 1px solid #4b5563;
+        }
+
+        .modal-form input:focus,
+        .modal-form textarea:focus {
+          outline: none;
+          ring: 2px solid #3b82f6;
+        }
+
+        .modal-form label {
+          font-size: 0.875rem;
+          color: #d1d5db;
+        }
+
+        body.overflow-hidden {
+          overflow: hidden;
+        }
+
+        @supports not (backdrop-filter: blur(10px)) {
+          .glassmorphism {
+            background: rgba(255, 255, 255, 0.2);
+          }
+        }
+
+        @media (max-width: 768px) {
+          .glassmorphism {
+            backdrop-filter: none;
+            background: rgba(255, 255, 255, 0.2);
+          }
+
+          .modal-form input,
+          .modal-form textarea {
+            font-size: 0.875rem;
+            padding: 0.5rem;
+            border-radius: 0.375rem;
+          }
+
+          .modal-form label {
+            font-size: 0.875rem;
+          }
+
+          .modal-form .flex {
+            flex-direction: column;
+            gap: 0.5rem;
+          }
+
+          .modal-form textarea {
+            min-height: 80px;
+          }
+        }
+
+        @media (max-width: 320px) {
+          .modal-form input,
+          .modal-form textarea {
+            font-size: 0.75rem;
+            padding: 0.5rem;
+          }
+
+          .modal-form label {
+            font-size: 0.75rem;
+          }
+        }
+      `}</style>
+      <motion.div
+        variants={sectionVariants}
+        initial="hidden"
+        animate="visible"
+        className="mb-24 max-w-[200rem] mx-auto px-8 sm:px-10 pt-24"
+      >
+        <div className="flex flex-col md:flex-row gap-10 items-start min-h-[fit-content]">
+          <motion.div
+            variants={itemVariants}
+            className="relative h-[40vh] min-h-[400px] sm:h-[50vh] lg:h-[600px] rounded-[1.5rem] overflow-hidden glassmorphism w-full mx-auto max-w-3xl md:max-w-none md:mx-0"
+          >
+            {isLoading ? (
+              <div className="w-full h-full flex items-center justify-center">
+                <Spinner />
+              </div>
+            ) : imageUrl ? (
+              <div className="relative w-full h-full">
+                <Image
+                  src={imageUrl}
+                  alt="About Milton Supply Co"
+                  fill
+                  className="object-cover rounded-[1rem] transition-transform duration-700 hover:scale-110"
+                  sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw"
+                  loading="lazy"
+                  quality={85}
+                />
+                <div className="absolute inset-0 bg-gradient-to-t from-black/40 to-transparent opacity-0 hover:opacity-100 transition-opacity duration-500"></div>
+                {isAdmin && (
+                  <div className="absolute top-2 right-0 flex">
+                    <EditIconButton
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        openEditModal();
+                      }}
+                    />
+                    <TrashIconButton
+                      disabled
+                      className="disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-gray-400"
+                      title="Cannot delete this image"
+                    />
+                  </div>
+                )}
+              </div>
+            ) : (
+              <div className="w-full h-full flex items-center justify-center">
+                <p className="text-gray-600 text-lg">{ABOUT_SECTION.UI.NO_IMAGE_AVAILABLE}</p>
+              </div>
+            )}
+          </motion.div>
+          <motion.div
+            variants={itemVariants}
+            className="space-y-6 min-h-[fit-content] h-auto w-full relative"
+          >
+            {isLoading ? (
+              <Spinner />
+            ) : (
+              <>
+                {title && (
+                  <motion.h2
+                    variants={itemVariants}
+                    className="text-2xl sm:text-3xl font-bold text-gray-800"
+                  >
+                    {title}
+                  </motion.h2>
+                )}
+                {paragraphs.length > 0 ? (
+                  <>
+                    {paragraphs
+                      .slice(0, isExpanded ? paragraphs.length : 3)
+                      .map((paragraph, index) => (
+                        <motion.p
+                          key={index}
+                          variants={itemVariants}
+                          className="text-gray-800 text-base sm:text-lg md:text-xl leading-relaxed font-medium"
+                        >
+                          {paragraph}
+                        </motion.p>
+                      ))}
+                    {paragraphs.length > 3 && (
+                      <motion.div variants={itemVariants} className="mt-4">
+                        <ToggleButton
+                          variant="toggle-bio"
+                          onClick={() => setIsExpanded(!isExpanded)}
+                        >
+                          {isExpanded ? ABOUT_SECTION.BUTTONS.READ_LESS_BUTTON : ABOUT_SECTION.BUTTONS.READ_MORE_BUTTON}
+                        </ToggleButton>
+                      </motion.div>
+                    )}
+                  </>
+                ) : (
+                  <motion.p
+                    variants={itemVariants}
+                    className="text-gray-600 text-base sm:text-lg md:text-xl leading-relaxed font-medium"
+                  >
+                    {ABOUT_SECTION.UI.NO_DESCRIPTION_AVAILABLE}
+                  </motion.p>
+                )}
+                {error && (
+                  <p className="text-red-400 text-base sm:text-lg md:text-xl text-center mt-4">{error}</p>
+                )}
+                {isAdmin && (
+                  <p className="text-gray-400 text-sm font-medium">
+                    {ABOUT_SECTION.UI.ADMIN_LOGGED_IN_MESSAGE}
+                  </p>
+                )}
+              </>
+            )}
+          </motion.div>
+        </div>
+      </motion.div>
+      {isEditModalOpen && (
+        <motion.div
+          variants={modalVariants}
+          initial="hidden"
+          animate="visible"
+          exit="exit"
+          className="fixed inset-0 bg-black/90 flex items-center justify-center z-[10000] p-4 isolate"
+          onClick={handleCancelEdit}
+          aria-modal="true"
+          role="dialog"
+        >
+          <div
+            className="relative max-w-5xl w-full mx-4 p-6 bg-gray-800/50 border border-gray-700/50 rounded-lg shadow-lg modal-form"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <CloseButton onClick={handleCancelEdit}>
+              <X className="h-6 w-6 sm:h-8 sm:w-8" />
+            </CloseButton>
+            <h3 className="text-xl font-bold text-white mb-4">{ABOUT_SECTION.UI.MODAL_HEADING}</h3>
+            <form
+              onSubmit={(e) => {
+                setIsSubmitting(true);
+                handlePatchSubmit(e, formTitle, formDescription, formImage, () => {
+                  setIsEditModalOpen(false);
+                }).finally(() => setIsSubmitting(false));
+              }}
+              className="space-y-4 modal-form"
+            >
+              <div>
+                <label
+                  htmlFor="aboutTitle"
+                  className="block text-sm font-medium text-gray-300 mb-1"
+                >
+                  {ABOUT_SECTION.UI.TITLE_LABEL}
+                </label>
+                <input
+                  id="aboutTitle"
+                  type="text"
+                  value={formTitle}
+                  onChange={(e) => setFormTitle(e.target.value)}
+                  className="w-full p-2 rounded bg-gray-700 text-white border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm"
+                  placeholder={ABOUT_SECTION.UI.TITLE_PLACEHOLDER}
+                />
+              </div>
+              <div>
+                <label
+                  htmlFor="aboutImage"
+                  className="block text-sm font-medium text-gray-300 mb-1"
+                >
+                  {ABOUT_SECTION.UI.IMAGE_LABEL}
+                </label>
+                <input
+                  id="aboutImage"
+                  type="file"
+                  accept="image/jpeg,image/png,image/gif"
+                  onChange={(e) => setFormImage(e.target.files?.[0] || null)}
+                  className="w-full p-2 rounded bg-gray-700 text-white border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm"
+                />
+                {formImage && (
+                  <p className="mt-2 text-gray-300 text-sm">{ABOUT_SECTION.UI.SELECTED_IMAGE_TEXT.replace("${formImage.name}", formImage.name)}</p>
+                )}
+              </div>
+              <div>
+                <label
+                  htmlFor="aboutDescription"
+                  className="block text-sm font-medium text-gray-300 mb-1"
+                >
+                  {ABOUT_SECTION.UI.DESCRIPTION_LABEL}
+                </label>
+                <textarea
+                  id="aboutDescription"
+                  value={formDescription}
+                  onChange={(e) => setFormDescription(e.target.value)}
+                  className="modal-form w-full"
+                  placeholder={ABOUT_SECTION.UI.DESCRIPTION_PLACEHOLDER}
+                />
+              </div>
+              <div className="flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-3">
+                <UpdateButton type="submit" disabled={isSubmitting}>
+                  {isSubmitting ? ABOUT_SECTION.BUTTONS.SAVING_BUTTON : ABOUT_SECTION.BUTTONS.UPDATE_BUTTON}
+                </UpdateButton>
+                <CancelButton type="button" onClick={handleCancelEdit}>
+                  {ABOUT_SECTION.BUTTONS.CANCEL_BUTTON}
+                </CancelButton>
+              </div>
+              {error && <p className="text-red-400 text-sm font-medium">{error}</p>}
+            </form>
+          </div>
+        </motion.div>
+      )}
+    </div>
+  );
 }