From ab9a81d9bb2584befbffbc7f6b24c77b2de796b5 Mon Sep 17 00:00:00 2001
From: Obrempong-1 <obrempong.kow@gmail.com>
Date: Tue, 3 Mar 2026 12:22:50 +0000
Subject: [PATCH] fixes

---
 components/events/EventDetail.tsx  | 56 ++++++++++--------------------
 components/home/ProvostSection.tsx | 50 +++++++++++++-------------
 hooks/useEventCollection.ts        | 21 -----------
 3 files changed, 43 insertions(+), 84 deletions(-)

diff --git a/components/events/EventDetail.tsx b/components/events/EventDetail.tsx
index 8113da2..dc653f7 100644
--- a/components/events/EventDetail.tsx
+++ b/components/events/EventDetail.tsx
@@ -16,7 +16,7 @@ interface EventDetailProps {
 const EventDetail: React.FC<EventDetailProps> = ({ event }) => {
     const [mapLoading, setMapLoading] = useState(true);
 
-    const { title, description, eventDate, eventImage, venue, onlineLink, eventImagesCollection } = event;
+    const { title, description, eventDate, eventImage, venue, onlineLink } = event;
 
     const dateObj = new Date(eventDate);
     const formattedDate = dateObj.toLocaleDateString("en-US", {
@@ -83,7 +83,23 @@ const EventDetail: React.FC<EventDetailProps> = ({ event }) => {
                                         p: ({ node, ...props }: any) => <p className="mb-6 leading-relaxed text-gray-700 text-lg" {...props} />,
                                         ul: ({ node, ...props }: any) => <ul className="list-disc pl-6 mb-6 text-gray-700 text-lg" {...props} />,
                                         ol: ({ node, ...props }: any) => <ol className="list-decimal pl-6 mb-6 text-gray-700 text-lg" {...props} />,
-                                        li: ({ node, ...props }: any) => <li className="mb-2 pl-2" {...props} />
+                                        li: ({ node, ...props }: any) => <li className="mb-2 pl-2" {...props} />,
+                                        img: ({ node, ...props }: any) => (
+                                            <div className="my-8 flex flex-col items-center">
+                                                <div className="relative w-full aspect-video rounded-2xl overflow-hidden shadow-lg border border-gray-100">
+                                                    <img
+                                                        {...props}
+                                                        className="w-full h-full object-cover transition-transform duration-500 hover:scale-[1.02]"
+                                                        style={{ display: 'block' }}
+                                                    />
+                                                </div>
+                                                {props.alt && (
+                                                    <p className="mt-3 text-sm text-gray-500 italic text-center">
+                                                        {props.alt}
+                                                    </p>
+                                                )}
+                                            </div>
+                                        )
                                     }}
                                 >
                                     {description}
@@ -91,42 +107,6 @@ const EventDetail: React.FC<EventDetailProps> = ({ event }) => {
                             </div>
                         </section>
 
-                        {/* Media Gallery Section */}
-                        {eventImagesCollection && eventImagesCollection.items.length > 0 && (
-                            <section className="bg-white rounded-3xl p-8 sm:p-10 shadow-sm border border-gray-100">
-                                <div className="flex items-center gap-3 mb-8">
-                                    <div className="bg-primary/10 p-2 rounded-xl">
-                                        <ImageIcon className="text-primary w-6 h-6" />
-                                    </div>
-                                    <h2 className="text-2xl font-bold text-gray-900 font-header">Media & Gallery</h2>
-                                </div>
-                                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-                                    {eventImagesCollection.items.map((asset, index) => (
-                                        <div
-                                            key={index}
-                                            className="group relative h-[300px] w-full rounded-2xl overflow-hidden shadow-md hover:shadow-xl transition-all duration-300"
-                                        >
-                                            <Image
-                                                src={asset.url}
-                                                alt={asset.description || asset.title || `Event item ${index + 1}`}
-                                                fill
-                                                className="object-cover transition-transform duration-500 group-hover:scale-105"
-                                            />
-                                            <div className="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors" />
-                                            {asset.title && (
-                                                <div className="absolute bottom-0 left-0 right-0 p-4 bg-gradient-to-t from-black/80 to-transparent translate-y-full group-hover:translate-y-0 transition-transform">
-                                                    <p className="text-white font-medium text-sm">{asset.title}</p>
-                                                    {asset.description && (
-                                                        <p className="text-white/70 text-xs mt-1 line-clamp-1">{asset.description}</p>
-                                                    )}
-                                                </div>
-                                            )}
-                                        </div>
-                                    ))}
-                                </div>
-                            </section>
-                        )}
-
                         {/* Map Section */}
                         <section className="bg-white rounded-3xl overflow-hidden shadow-sm border border-gray-100">
                             <div className="p-8 sm:p-10 border-b border-gray-100">
diff --git a/components/home/ProvostSection.tsx b/components/home/ProvostSection.tsx
index ec2610b..c24e4c1 100644
--- a/components/home/ProvostSection.tsx
+++ b/components/home/ProvostSection.tsx
@@ -32,13 +32,13 @@ const ProvostSection = () => {
     return (
         <section className="py-24 bg-gradient-to-b from-white to-gray-50 overflow-hidden">
             <Container size="xl">
-                <div className="flex flex-col lg:flex-row items-center gap-16 lg:gap-24">
+                <div className="flex flex-col lg:flex-row items-start gap-16 lg:gap-24">
                     <motion.div
                         initial={{ opacity: 0, x: -50 }}
                         whileInView={{ opacity: 1, x: 0 }}
                         viewport={{ once: true }}
                         transition={{ duration: 0.8, ease: "easeOut" }}
-                        className="relative w-full lg:w-1/2"
+                        className="relative w-full lg:w-1/2 flex flex-col gap-12 lg:-mt-4"
                     >
                         <div className="relative group">
                             <div className="absolute -inset-4 bg-primary/10 rounded-[2.5rem] -rotate-3 transition-transform group-hover:rotate-0 duration-500" />
@@ -66,6 +66,29 @@ const ProvostSection = () => {
                                 <p className="text-gray-500 text-sm font-medium leading-tight">Celebrating Excellence &<br />Leadership at KNUST</p>
                             </motion.div>
                         </div>
+
+                        <div className="grid grid-cols-2 gap-4 pt-4">
+                            {highlights.map((item, index) => (
+                                <motion.div
+                                    key={index}
+                                    initial={{ opacity: 0, y: 20 }}
+                                    whileInView={{ opacity: 1, y: 0 }}
+                                    viewport={{ once: true }}
+                                    transition={{ delay: 0.4 + (index * 0.1) }}
+                                    className="p-4 bg-white border border-gray-100 rounded-2xl shadow-sm hover:shadow-md transition-shadow"
+                                >
+                                    <div className="text-primary mb-2 bg-primary/5 w-fit p-2 rounded-lg">
+                                        {item.icon}
+                                    </div>
+                                    <p className="font-bold text-gray-900 group-hover:text-primary transition-colors">
+                                        {item.text}
+                                    </p>
+                                    <p className="text-xs text-gray-500 font-medium uppercase tracking-wider">
+                                        {item.label}
+                                    </p>
+                                </motion.div>
+                            ))}
+                        </div>
                     </motion.div>
 
                     {/* Content */}
@@ -105,29 +128,6 @@ const ProvostSection = () => {
                                 {`Prof Nyarko has over one hundred (100) publications in peer-reviewed journals, conference proceedings, and technical reports.`}
                             </p>
                         </motion.div>
-
-                        <div className="grid grid-cols-2 gap-4 pt-4">
-                            {highlights.map((item, index) => (
-                                <motion.div
-                                    key={index}
-                                    initial={{ opacity: 0, y: 20 }}
-                                    whileInView={{ opacity: 1, y: 0 }}
-                                    viewport={{ once: true }}
-                                    transition={{ delay: 0.4 + (index * 0.1) }}
-                                    className="p-4 bg-white border border-gray-100 rounded-2xl shadow-sm hover:shadow-md transition-shadow"
-                                >
-                                    <div className="text-primary mb-2 bg-primary/5 w-fit p-2 rounded-lg">
-                                        {item.icon}
-                                    </div>
-                                    <p className="font-bold text-gray-900 group-hover:text-primary transition-colors">
-                                        {item.text}
-                                    </p>
-                                    <p className="text-xs text-gray-500 font-medium uppercase tracking-wider">
-                                        {item.label}
-                                    </p>
-                                </motion.div>
-                            ))}
-                        </div>
                     </div>
                 </div>
             </Container>
diff --git a/hooks/useEventCollection.ts b/hooks/useEventCollection.ts
index 22b2334..e24cfea 100644
--- a/hooks/useEventCollection.ts
+++ b/hooks/useEventCollection.ts
@@ -22,13 +22,6 @@ export interface EventItem {
   venueInPlainEnglish: string;
   onlineLink?: string;
   eventImage: EventImage;
-  eventImagesCollection?: {
-    items: {
-      title: string;
-      description: string;
-      url: string;
-    }[];
-  };
 }
 
 interface Props {
@@ -56,13 +49,6 @@ const GET_EVENTS = gql`
           url
           description
         }
-        eventImagesCollection {
-          items {
-            title
-            description
-            url
-          }
-        }
       }
     }
   }
@@ -87,13 +73,6 @@ const GET_EVENT_BY_SLUG = gql`
           url
           description
         }
-        eventImagesCollection {
-          items {
-            title
-            description
-            url
-          }
-        }
       }
     }
   }