coding-junction · coding-junction · May 26, 2025 · May 26, 2025 · May 26, 2025
diff --git a/.gitignore b/.gitignore
@@ -39,3 +39,6 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# clerk configuration (can include secrets)
+/.clerk/
diff --git a/app/Gallery/page.tsx b/app/Gallery/page.tsx
@@ -0,0 +1,64 @@
+"use client";
+
+import React from "react";
+import Image from "next/image";
+import { motion } from "framer-motion";
+import NavBar from "../NavBar/page";
+import Footer from "../Footer/page";
+
+const Gallery = () => {
+  return (
+    <div className="w-full min-h-screen bg-black">
+      <NavBar />
+
+      <div className="container mx-auto pt-32 pb-20 px-4 md:px-8 lg:px-16">
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8 }}
+          className="text-center mb-12"
+        >
+          <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-4">
+            Our <span className="text-primary">Gallery</span>
+          </h1>
+          <p className="text-white/70 max-w-2xl mx-auto text-lg">
+            Explore our collection of memorable moments and achievements
+          </p>
+        </motion.div>
+
+        <div className="flex justify-center">
+          <motion.div
+            initial={{ opacity: 0, scale: 0.9 }}
+            animate={{ opacity: 1, scale: 1 }}
+            transition={{ 
+              duration: 0.8,
+              delay: 0.3,
+              ease: "easeOut"
+            }}
+            className="relative overflow-hidden rounded-xl border border-white/10 shadow-lg w-full max-w-4xl mx-auto"
+            whileHover={{ scale: 1.02 }}
+            whileTap={{ scale: 0.98 }}
+          >
+            <div className="relative w-full aspect-[16/9] md:aspect-[16/10] lg:aspect-[16/9]">
+              <Image
+                src="/Assets/Images/gallery_image.jpg"
+                alt="Gallery Image"
+                fill
+                className="object-cover transition-transform duration-700 hover:scale-105"
+                sizes="(max-width: 768px) 100vw, (max-width: 1200px) 80vw, 70vw"
+                priority
+              />
+
+              <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 hover:opacity-100 transition-opacity duration-300 flex items-end justify-center p-6">
+                <p className="text-white text-base md:text-xl font-medium text-center">Capturing our journey of innovation and collaboration</p>
+              </div>
+            </div>
+          </motion.div>
+        </div>      </div>
+
+      <Footer />
+    </div>
+  );
+};
+
+export default Gallery;
diff --git a/app/NavBar/page.tsx b/app/NavBar/page.tsx
@@ -1,7 +1,7 @@
 "use client"
 
 import * as React from "react"
-import { Home, User, AppWindowIcon, LogInIcon } from "lucide-react"
+import { Home, User, AppWindowIcon, LogInIcon, ImageIcon } from "lucide-react"
 import { AnimeNavBar } from "@/components/ui/anime-navbar"
 
 const items = [
@@ -22,7 +22,14 @@ const items = [
     url: "/App",
     href: "#",
     icon: AppWindowIcon,
-  },{
+  },
+  {
+    name: "Gallery",
+    url: "/Gallery",
+    href: "#",
+    icon: ImageIcon,
+  },
+  {
     name: "Login",
     url: "/sign-in",
     href: "#",

diff --git a/app/Team/page.tsx b/app/Team/page.tsx
@@ -6,17 +6,20 @@ import {
   DialogTrigger, 
   DialogTitle 
 } from "@/components/ui/dialog";
-import { Menu } from "lucide-react";
+import { Menu, ChevronLeft, ChevronRight } from "lucide-react";
+import { motion, AnimatePresence } from "framer-motion";
 import Link from "next/link";
 import json from "./team.json";
 import { Button } from "@/components/ui/button";
 import { Mail } from "lucide-react";
 import { TwitterLogoIcon, LinkedInLogoIcon, GitHubLogoIcon,InstagramLogoIcon } from "@radix-ui/react-icons";
 import Footer from "../Footer/page";
 import NavBar from "../NavBar/page";
+import { useIsMobile } from "@/hooks/use-mobile";
 
 const Team = () => {
   const teamArray = json.teamArray;
+  const isMobile = useIsMobile();
 
   const Gen = [
     { label: "President", key: "p" },
@@ -27,84 +30,95 @@ const Team = () => {
   ];
 
   const [selectedGen, setSelectedGen] = useState("p");
+
+  // Navigate to prev/next generation
+  const navigateGeneration = (direction: 'prev' | 'next') => {
+    const currentIndex = Gen.findIndex(g => g.key === selectedGen);
+    if (direction === 'prev') {
+      const newIndex = currentIndex <= 0 ? Gen.length - 1 : currentIndex - 1;
+      setSelectedGen(Gen[newIndex].key);
+    } else {
+      const newIndex = currentIndex >= Gen.length - 1 ? 0 : currentIndex + 1;
+      setSelectedGen(Gen[newIndex].key);
+    }
+  };
 
   return (
     <div className="flex flex-col min-h-screen bg-gray-100 dark:bg-neutral-800">
-        <NavBar/>
-      {/* Mobile Header with Generations Dropdown */}
-      <div className="md:hidden sticky top-0 z-50 bg-white dark:bg-neutral-900 shadow-sm">
-        <div className="flex justify-between items-center p-4">
-          {/* <Logo /> */}
-          <Dialog>
-            <DialogTrigger asChild>
-              <Button variant="outline" size="icon">
-                <Menu className="h-6 w-6" />
+      <NavBar/>
+        {/* Mobile Floating Generation Selector */}      <AnimatePresence>
+        {isMobile && (
+          <motion.div 
+            className="fixed top-24 left-0 right-0 z-40 flex justify-center pointer-events-auto"
+            initial={{ y: -50, opacity: 0 }}
+            animate={{ y: 0, opacity: 1 }}
+            exit={{ y: -50, opacity: 0 }}
+            transition={{ type: "spring", stiffness: 300, damping: 25 }}
+          ><motion.div 
+              className="flex items-center gap-3 bg-black/50 border border-white/10 backdrop-blur-lg py-3 px-5 rounded-full shadow-lg"
+              whileHover={{ scale: 1.02 }}
+            >
+              <Button 
+                variant="ghost" 
+                size="sm"
+                className="text-white/70 hover:text-white h-8 w-8 p-0 flex items-center justify-center"
+                onClick={() => navigateGeneration('prev')}
+              >
+                <ChevronLeft className="h-5 w-5" />
               </Button>
-            </DialogTrigger>
-            <DialogContent className="w-64 max-w-full">
-              <DialogTitle className="sr-only">Select Team Generation</DialogTitle>
-              <div className="flex flex-col gap-4">
-                {Gen.map((gen) => (
-                  <Button 
-                    key={gen.key} 
-                    variant={selectedGen === gen.key ? "default" : "outline"}
-                    onClick={() => {
-                      setSelectedGen(gen.key);
-                      // You might want to close the dialog here
-                    }}
-                    className="w-full"
-                  >
-                    {gen.label}
-                  </Button>
-                ))}
-              </div>
-            </DialogContent>
-          </Dialog>
-        </div>
-      </div>
-
-      {/* Main Content Area */}
-      <div className="flex flex-1">
+
+              <span className="text-white font-medium px-3 min-w-[100px] text-center">
+                {Gen.find(g => g.key === selectedGen)?.label}
+              </span>
+
+              <Button 
+                variant="ghost" 
+                size="sm"
+                className="text-white/70 hover:text-white h-8 w-8 p-0 flex items-center justify-center"
+                onClick={() => navigateGeneration('next')}
+              >
+                <ChevronRight className="h-5 w-5" />
+              </Button>
+            </motion.div>
+          </motion.div>
+        )}
+      </AnimatePresence>      {/* Main Content Area */}
+      <div className="flex flex-1 pt-24 md:pt-0">
         {/* Desktop Sidebar */}
-        <div className="hidden md:flex w-64 bg-white dark:bg-neutral-900 p-6 flex-col border-r dark:border-neutral-700">
-          {/* <Logo /> */}
-          <div className="mt-8 space-y-2">
+        <div className="hidden md:flex w-64 bg-white dark:bg-neutral-900 p-6 flex-col border-r dark:border-neutral-700 mt-24">
+          <div className="mt-8 space-y-3">
             {Gen.map((gen) => (
               <Button 
                 key={gen.key} 
                 variant={selectedGen === gen.key ? "default" : "ghost"}
                 onClick={() => setSelectedGen(gen.key)}
-                className="w-full justify-start"
+                className="w-full justify-start h-10 text-base"
               >
                 {gen.label}
               </Button>
             ))}
           </div>
-        </div>
-
-        {/* Team Members Grid */}
-        <div className="flex-1 p-4 md:p-6 overflow-y-auto sm:mt-10 md:mt-20 lg:mt-25">
-          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
-            {teamArray.filter(member => member.gen === selectedGen).map(member => (
-              <div 
+        </div>        {/* Team Members Grid */}
+        <div className="flex-1 p-4 md:p-8 overflow-y-auto sm:mt-20 md:mt-24 lg:mt-28">
+          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8 pt-6">
+            {teamArray.filter(member => member.gen === selectedGen).map(member => (              <div 
                 key={member.name} 
-                className="flex flex-col items-center text-center gap-4 bg-white dark:bg-neutral-900 p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow"
+                className="flex flex-col items-center text-center gap-5 bg-white dark:bg-neutral-900 p-6 md:p-8 rounded-xl shadow-md hover:shadow-lg transition-shadow"
               >
                 <img
                   src={member.image}
                   alt={member.name}
-                  className="h-32 w-32 rounded-full object-cover border-4 border-gray-200 dark:border-neutral-700"
-                />
-                <div>
-                  <h3 className="text-xl font-bold text-gray-800 dark:text-gray-200">
+                  className="h-36 w-36 rounded-full object-cover border-4 border-gray-200 dark:border-neutral-700"
+                />                <div>
+                  <h3 className="text-xl md:text-2xl font-bold text-gray-800 dark:text-gray-200">
                     {member.name}
                   </h3>
                   {member.role && (
-                    <p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
+                    <p className="text-sm md:text-base text-gray-600 dark:text-gray-400 mt-2">
                       {member.role}
                     </p>
                   )}
-                  <div className="mt-4 flex justify-center gap-3">
+                  <div className="mt-5 flex justify-center gap-4">
                     {member.tw && (
                       <Button 
                         variant="outline" 
@@ -170,20 +184,12 @@ const Team = () => {
               </div>
             ))}
           </div>
-        </div>
-      </div>
+        </div>      </div>
 
       {/* Footer */}
       <Footer />
     </div>
   );
 }
 
-// export const Logo = () => (
-//   <Link href="#" className="flex space-x-2 items-center text-lg font-bold text-black dark:text-white">
-//     <div className="h-6 w-7 bg-black dark:bg-white rounded-lg" />
-//     <span className="whitespace-pre">Coding Junction</span>
-//   </Link>
-// );
-
 export default Team;
diff --git a/app/globals.css b/app/globals.css
@@ -151,3 +151,15 @@
     @apply bg-background text-foreground;
   }
 }
+
+@layer utilities {
+  /* Hide scrollbar while maintaining scroll functionality */
+  .no-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+
+  .no-scrollbar {
+    -ms-overflow-style: none;  /* IE and Edge */
+    scrollbar-width: none;  /* Firefox */
+  }
+}
diff --git a/public/Assets/Images/gallery_image.jpg b/public/Assets/Images/gallery_image.jpg