Undertaking Generator Style Update for 24-25 3rd Term

src/app/utils/undertaking-generator/page.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { motion } from "framer-motion";
-import { GithubIcon, RocketIcon } from 'lucide-react';
+import { GithubIcon } from 'lucide-react';
 import Image from "next/image";
 import courseJSON from "public/data/json/courses.json";
 import { useEffect, useState } from 'react';
@@ -14,15 +14,111 @@ import { Label } from "~/components/ui/label";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "~/components/ui/select";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "~/components/ui/table";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "~/components/ui/tabs";
+import Credits from "~/components/undertaking-generator/credits";
 import { env } from "~/env";
 import { MAX_UNDERTAKING_IMG_SIZE, zodUndertaking } from "~/utils/zodUndertaking";
+
+const AnimatedGradientBackground = () => {
+    return (
+        <div className="animated-gradient-container">
+            <div className="gradient-blob blob-1"></div>
+            <div className="gradient-blob blob-2"></div>
+            <div className="gradient-blob blob-3"></div>
+            <style jsx>{`
+        .animated-gradient-container {
+          position: fixed;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          overflow: hidden;
+          z-index: -1;
+          opacity: 0.5;
+          filter: blur(80px);
+        }
+
+        .gradient-blob {
+          position: absolute;
+          border-radius: 50%;
+          filter: blur(40px);
+          opacity: 0.35;
+          mix-blend-mode: multiply;
+        }
+
+        .blob-1 {
+          background: linear-gradient(to right, rgba(126, 34, 206, 0.5), rgba(192, 38, 211, 0.5));
+          width: 60vw;
+          height: 60vw;
+          top: 20%;
+          left: 5%;
+          animation: blob-move-1 30s infinite ease-in-out alternate;
+        }
+
+        .blob-2 {
+          background: linear-gradient(to right, rgba(219, 39, 119, 0.4), rgba(236, 72, 153, 0.4));
+          width: 50vw;
+          height: 50vw;
+          top: 10%;
+          right: 10%;
+          animation: blob-move-2 40s infinite ease-in-out alternate;
+        }
+
+        .blob-3 {
+          background: linear-gradient(to right, rgba(139, 92, 246, 0.4), rgba(167, 139, 250, 0.4));
+          width: 55vw;
+          height: 55vw;
+          bottom: 5%;
+          right: 20%;
+          animation: blob-move-3 35s infinite ease-in-out alternate;
+        }
+
+        @keyframes blob-move-1 {
+          0% { transform: translate(0, 0) scale(1); }
+          50% { transform: translate(5%, 10%) scale(1.05); }
+          100% { transform: translate(-5%, 5%) scale(0.98); }
+        }
+
+        @keyframes blob-move-2 {
+          0% { transform: translate(0, 0) scale(1); }
+          50% { transform: translate(-7%, 5%) scale(1.1); }
+          100% { transform: translate(3%, -3%) scale(0.95); }
+        }
+
+        @keyframes blob-move-3 {
+          0% { transform: translate(0, 0) scale(1); }
+          50% { transform: translate(5%, -10%) scale(1.03); }
+          100% { transform: translate(-3%, 8%) scale(0.95); }
+        }
+
+        @media (max-width: 768px) {
+          .blob-1 {
+            width: 80vw;
+            height: 80vw;
+          }
+          .blob-2 {
+            width: 70vw;
+            height: 70vw;
+          }
+          .blob-3 {
+            width: 75vw;
+            height: 75vw;
+          }
+          .animated-gradient-container {
+            filter: blur(60px);
+          }
+        }
+      `}</style>
+        </div>
+    );
+};
+
 export default function Component() {
     const [loading, setLoading] = useState(false);
     const [fullName, setFullName] = useState('');
     const [studentNumber, setStudentNumber] = useState('');
     const [year, setYear] = useState('');
     const [program, setProgram] = useState('');
-    const [enrollmentFormat, setEnrollmentFormat] = useState('');
+    const [enrollmentFormat, setEnrollmentFormat] = useState('1');
     const [signatureImg, setSignatureImg] = useState<File | null>(null);
     const [idImg, setIdImg] = useState<File | null>(null);
     const [courses, setCourses] = useState<string[]>([]);
@@ -57,11 +153,11 @@ export default function Component() {
 
     const handleSignatureUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
         handleImgUpload(e, setSignatureImg);
-    }
+    };
 
     const handleIdUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
         handleImgUpload(e, setIdImg);
-    }
+    };
 
     const handleCourseToggle = (courseCode: string) => {
         setCourses(prev =>
@@ -130,9 +226,10 @@ export default function Component() {
     }, [searchTerm]);
 
     return (
-        <div className="container h-screen sm:flex items-center justify-center flex-col mx-auto px-4 py-8 max-w-4xl">
+        <div className="container min-h-screen sm:flex items-center justify-center flex-col mx-auto px-4 py-8 max-w-4xl relative">
+            <AnimatedGradientBackground />
             {loading && <Spinner />}
-            <div className="flex flex-col items-center mb-4">
+            <div className="flex flex-col items-center mb-4 relative z-10">
                 <Image
                     src="/acm/FIT_ACM.png"
                     alt="FEU Tech ACM Logo"
@@ -148,13 +245,13 @@ export default function Component() {
                     Undertaking Generator
                 </motion.h1>
             </div>
-            <Card>
+            <Card className="w-full relative z-10 backdrop-blur-sm bg-opacity-80 bg-card shadow-lg">
                 <CardContent className="p-6">
                     <Tabs defaultValue="personal" className="w-full">
                         <TabsList className="grid w-full grid-cols-3">
-                            <TabsTrigger value="personal" className="text-xs sm:text-sm md:text-base">Your Information</TabsTrigger>
-                            <TabsTrigger value="courses" className="text-xs sm:text-sm md:text-base">Course Selection</TabsTrigger>
-                            <TabsTrigger value="compliance" className="text-xs sm:text-sm md:text-base">Compliance</TabsTrigger>
+                            <TabsTrigger value="personal" className="text-xs sm:text-sm">Your Information</TabsTrigger>
+                            <TabsTrigger value="courses" className="text-xs sm:text-sm">Course Selection</TabsTrigger>
+                            <TabsTrigger value="compliance" className="text-xs sm:text-sm">Compliance</TabsTrigger>
                         </TabsList>
                         <TabsContent value="personal">
                             <motion.div
@@ -304,22 +401,19 @@ export default function Component() {
                     </Tabs>
                 </CardContent>
             </Card>
-            <footer className="mt-8 text-center text-sm text-muted-foreground">
+            <footer className="mt-8 text-center text-sm text-muted-foreground relative z-10">
                 <p className="mb-2">
                     <strong>Disclaimer:</strong> This generator does not store any user data.
                 </p>
                 <div className="block sm:flex justify-center items-center space-x-2">
                     <div className="space-x-2">
                         <GithubIcon className="h-4 w-4 inline" />
                         <a href="https://github.com/FEUTechACMX/acmx" target="_blank" rel="noopener noreferrer" className="underline hover:text-primary">
-                        GitHub Repository
-                    </a>
+                            GitHub Repository
+                        </a>
                     </div>
                     <div className="space-x-2">
-                        <RocketIcon className="h-4 w-4 inline" />
-                        <a href={`${env.NEXT_PUBLIC_HOST_URL}/data/json/contributors.json`} target="_blank" rel="noopener noreferrer" className="underline hover:text-primary">
-                            Project ACM-X Team
-                    </a>
+                        <Credits />
                     </div>
                 </div>
             </footer>

src/components/undertaking-generator/credits.tsx

@@ -0,0 +1,92 @@
+"use client";
+
+import { AnimatePresence, motion } from "framer-motion";
+import { RocketIcon, X } from "lucide-react";
+import Image from "next/image";
+import { useState } from "react";
+import { Button } from "~/components/ui/button";
+
+const teamMembers = [
+    {
+        name: "Sir Jeneffer Sabonsolin",
+        position: "Adviser",
+        image: "/members/24_25/sir_sabonsolin.jpg",
+        linkedin: "https://www.linkedin.com/in/jeneffer-sabonsolin-70320329a",
+    },
+    {
+        name: "Alpha Romer Coma",
+        position: "Initiative Head",
+        image: "/members/24_25/coma.jpg",
+        linkedin: "https://www.linkedin.com/in/alpharomercoma",
+    },
+    {
+        name: "Rab Karl Colasino",
+        position: "Webmaster",
+        image: "/members/24_25/colasino.jpg",
+        linkedin: "https://www.linkedin.com/in/mr-colasino/",
+    },
+    {
+        name: "Csypres Ornos",
+        position: "President",
+        image: "/members/24_25/ornos.jpg",
+        linkedin: "https://www.linkedin.com/in/csypres-ornos-148528287",
+    },
+];
+
+const SettingsComponent: React.FC = () => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [showCredits, setShowCredits] = useState(false);
+
+    return (
+        <>
+            <p className="underline hover:text-primary cursor-pointer" onClick={() => setShowCredits(true)}>
+                <RocketIcon className="h-4 w-4 inline" />
+                Project ACMX Core Team
+            </p>
+            <AnimatePresence>
+                {showCredits && (
+                    <motion.div
+                        initial={{ opacity: 0 }}
+                        animate={{ opacity: 1 }}
+                        exit={{ opacity: 0 }}
+                        className="fixed inset-0 bg-transparent backdrop-blur-sm z-50"
+                    >
+                        <motion.div
+                            initial={{ scale: 0.9, opacity: 0 }}
+                            animate={{ scale: 1, opacity: 1 }}
+                            exit={{ scale: 0.9, opacity: 0 }}
+                            className="fixed inset-0 md:inset-10 bg-transparent rounded-lg shadow-lg overflow-auto"
+                        >
+                            <div className="p-6 w-full">
+                                <div className="flex justify-between items-center mb-4">
+                                    <h2 className="text-2xl font-bold text-center bg-gradient-to-r from-purple-600 to-pink-600 text-transparent bg-clip-text">Credits</h2>
+                                    <Button variant="outline" className="" size="icon" onClick={() => setShowCredits(false)}>
+                                        <X className="h-4 w-4" />
+                                        <span className="sr-only">Close</span>
+                                    </Button>
+                                </div>
+                                <div className="w-full grid grid-cols-2 lg:grid-cols-4 gap-6">
+                                    {teamMembers.map((member, index) => (
+                                        <a href={member.linkedin} key={index} className="flex border flex-col items-center p-4 rounded-lg">
+                                            <Image
+                                                src={member.image}
+                                                alt={member.name}
+                                                width={100}
+                                                height={100}
+                                                className="rounded-full mb-4"
+                                            />
+                                            <h3 className="text-lg font-semibold text-center">{member.name}</h3>
+                                            <p className="text-sm text-muted-foreground mb-2 text-balance text-center">{member.position}</p>
+                                        </a>
+                                    ))}
+                                </div>
+                            </div>
+                        </motion.div>
+                    </motion.div>
+                )}
+            </AnimatePresence>
+        </>
+    );
+};
+
+export default SettingsComponent;