Skip to content

Develop #233

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Obrempong-1 merged 2 commits into from
Mar 3, 2026
Merged

Develop #233

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ab9a81d
fixes
Obrempong-1 Mar 3, 2026
d1758d7
Merge pull request #232 from GESA-KNUST/feature/fixes
Obrempong-1 Mar 3, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
56 changes: 18 additions & 38 deletions components/events/EventDetail.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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", {
Expand Down Expand Up @@ -83,50 +83,30 @@ 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}
</ReactMarkdown>
</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">
Expand Down
50 changes: 25 additions & 25 deletions components/home/ProvostSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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" />
Expand Down Expand Up @@ -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 */}
Expand Down Expand Up @@ -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>
Expand Down
21 changes: 0 additions & 21 deletions hooks/useEventCollection.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,13 +22,6 @@ export interface EventItem {
venueInPlainEnglish: string;
onlineLink?: string;
eventImage: EventImage;
eventImagesCollection?: {
items: {
title: string;
description: string;
url: string;
}[];
};
}

interface Props {
Expand Down Expand Up @@ -56,13 +49,6 @@ const GET_EVENTS = gql`
url
description
}
eventImagesCollection {
items {
title
description
url
}
}
}
}
}
Expand All @@ -87,13 +73,6 @@ const GET_EVENT_BY_SLUG = gql`
url
description
}
eventImagesCollection {
items {
title
description
url
}
}
}
}
}
Expand Down