student council page

app/[locale]/(animations)/animate-button-group.tsx

@@ -0,0 +1,144 @@
+'use client';
+
+import { motion, type Variants } from 'framer-motion';
+import Link from 'next/link';
+import { type IconType } from 'react-icons';
+
+import { Button } from '~/components/buttons';
+import { cn } from '~/lib/utils';
+
+import { viewportSettings } from './animation-variants';
+
+// Custom container variants with enhanced stagger
+const buttonContainerVariants: Variants = {
+  hidden: {
+    opacity: 0,
+  },
+  visible: {
+    opacity: 1,
+    transition: {
+      staggerChildren: 0.15,
+      delayChildren: 0.1,
+    },
+  },
+};
+
+// Enhanced button item variants with scale and rotation
+const buttonItemVariants: Variants = {
+  hidden: {
+    opacity: 0,
+    y: 60,
+    scale: 0.8,
+    rotateX: 15,
+  },
+  visible: {
+    opacity: 1,
+    y: 0,
+    scale: 1,
+    rotateX: 0,
+    transition: {
+      type: 'spring',
+      stiffness: 100,
+      damping: 12,
+      mass: 0.8,
+    },
+  },
+};
+
+// Icon animation variants
+const iconVariants: Variants = {
+  hidden: {
+    scale: 0,
+    rotate: -180,
+  },
+  visible: {
+    scale: 1,
+    rotate: 0,
+    transition: {
+      type: 'spring',
+      stiffness: 200,
+      damping: 15,
+      delay: 0.2,
+    },
+  },
+};
+
+// Text animation variants
+const textVariants: Variants = {
+  hidden: {
+    opacity: 0,
+    y: 10,
+  },
+  visible: {
+    opacity: 1,
+    y: 0,
+    transition: {
+      duration: 0.4,
+      delay: 0.3,
+    },
+  },
+};
+
+interface AnimateButtonGroupProps {
+  buttonArray: {
+    label: string;
+    href: string;
+    icon: IconType;
+  }[];
+}
+
+export default function AnimateButtonGroup({
+  buttonArray,
+}: AnimateButtonGroupProps) {
+  return (
+    <motion.nav
+      className={cn(
+        'container',
+        'my-10',
+        'flex flex-col gap-5 lg:flex-row lg:justify-around'
+      )}
+      initial="hidden"
+      whileInView="visible"
+      viewport={viewportSettings}
+      variants={buttonContainerVariants}
+    >
+      {buttonArray.map(({ label, href, icon: Icon }, index) => (
+        <motion.div
+          key={index}
+          className={cn('mx-auto w-full lg:w-72 xl:w-80 2xl:w-96')}
+          variants={buttonItemVariants}
+          whileHover={{
+            scale: 1.02,
+            y: -3,
+            transition: { type: 'spring', stiffness: 400, damping: 17 },
+          }}
+          whileTap={{ scale: 0.98 }}
+          style={{ perspective: 1000 }}
+        >
+          <Button
+            asChild
+            className={cn(
+              'flex flex-col',
+              'gap-2 md:gap-3 lg:gap-4 xl:gap-5',
+              'h-44 w-full md:h-48 lg:h-60',
+              'overflow-hidden'
+            )}
+            variant="secondary"
+          >
+            <Link href={href}>
+              <motion.div variants={iconVariants}>
+                <Icon className="size-12" />
+              </motion.div>
+              <motion.p
+                className="whitespace-normal font-serif font-semibold"
+                variants={textVariants}
+              >
+                {label}
+              </motion.p>
+            </Link>
+          </Button>
+        </motion.div>
+      ))}
+    </motion.nav>
+  );
+}

app/[locale]/(animations)/animate-events-grid.tsx

@@ -0,0 +1,101 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import Image from 'next/image';
+import { useState } from 'react';
+
+import { Card, CardContent, CardDescription, CardTitle } from '~/components/ui';
+import { cn } from '~/lib/utils';
+
+import { EventModal } from '../events/EventModal';
+import type { EventItem } from '../events/EventsList';
+import {
+  staggerContainerVariants,
+  staggerItemVariants,
+  viewportSettings,
+} from './animation-variants';
+
+interface AnimateEventsGridProps {
+  events: EventItem[];
+  locale: string;
+  s3Url: string;
+}
+
+export default function AnimateEventsGrid({
+  events,
+  locale,
+  s3Url,
+}: AnimateEventsGridProps) {
+  const [selectedEvent, setSelectedEvent] = useState<EventItem | null>(null);
+
+  return (
+    <>
+      <motion.ol
+        className="z-elevated grid grid-cols-1 grid-rows-6 gap-6 lg:grid-cols-5 lg:grid-rows-3"
+        initial="hidden"
+        whileInView="visible"
+        viewport={viewportSettings}
+        variants={staggerContainerVariants}
+      >
+        {events.map((event, index) => (
+          <motion.li
+            key={event.id}
+            className={cn(
+              index % 3 === 0 || index === 4
+                ? 'lg:col-span-3'
+                : 'lg:col-span-2',
+              'h-[448px] cursor-pointer list-none'
+            )}
+            onClick={() => setSelectedEvent(event)}
+            variants={staggerItemVariants}
+          >
+            <Card
+              className={cn(
+                'flex h-full flex-col border-0 bg-shade-light transition-shadow hover:shadow-lg'
+              )}
+            >
+              <Image
+                alt={event.title}
+                className="h-64 w-full rounded-t-md object-cover"
+                height={0}
+                src={
+                  event.images.length > 0
+                    ? event.images[0]
+                    : `${s3Url}/events/${event.startDate.slice(0, 4)}/${event.startDate.slice(5, 7)}/${event.title}/image01.jpg`
+                }
+                width={0}
+              />
+              <CardContent className="relative pt-3">
+                <time className="absolute -top-10 right-8 flex h-20 w-16 flex-col items-center justify-center bg-primary-500 bg-opacity-90 text-shade-light">
+                  <span className="font-serif text-2xl">
+                    {new Intl.DateTimeFormat('en-GB', {
+                      day: '2-digit',
+                    }).format(new Date(event.startDate))}
+                  </span>
+                  <span className="font-serif text-xl">
+                    {new Intl.DateTimeFormat('en-GB', { month: 'short' })
+                      .format(new Date(event.startDate))
+                      .substring(0, 3)
+                      .toUpperCase()}
+                  </span>
+                </time>
+                <CardTitle className="mr-20 lg:text-2xl">
+                  {event.title}
+                </CardTitle>
+                <CardDescription className="line-clamp-3">
+                  {event.description}
+                </CardDescription>
+              </CardContent>
+            </Card>
+          </motion.li>
+        ))}
+      </motion.ol>
+
+      <EventModal
+        event={selectedEvent}
+        onClose={() => setSelectedEvent(null)}
+        locale={locale}
+      />
+    </>
+  );
+}