{/* Avatar */}
-
+
diff --git a/src/components/gallery/GalleryItem.tsx b/src/components/gallery/GalleryItem.tsx
new file mode 100644
index 0000000..bf449eb
--- /dev/null
+++ b/src/components/gallery/GalleryItem.tsx
@@ -0,0 +1,22 @@
+import './gallery.css';
+
+interface GalleryItemProps {
+ imageSrc: string;
+ altText: string;
+ rotation?: number;
+}
+
+const GalleryItem: React.FC = ({ imageSrc, altText, rotation = 0 }) => {
+ return (
+
-
+
+
+ );
+};
+
+export default GalleryItem;
diff --git a/src/components/gallery/InfiniteGallery.tsx b/src/components/gallery/InfiniteGallery.tsx
new file mode 100644
index 0000000..63c2c8b
--- /dev/null
+++ b/src/components/gallery/InfiniteGallery.tsx
@@ -0,0 +1,37 @@
+import GalleryItem from './GalleryItem';
+import './gallery.css';
+
+const exampleImages = [
+ 'https://images.unsplash.com/photo-1506744038136-46273834b3fb?w=500&h=400&fit=crop',
+ 'https://images.unsplash.com/photo-1469474968028-56623f02e42e?w=500&h=400&fit=crop',
+ 'https://images.unsplash.com/photo-1447752875215-b2761acb3c5d?w=500&h=400&fit=crop',
+ 'https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?w=500&h=400&fit=crop',
+ 'https://images.unsplash.com/photo-1441974231531-c6227db76b6e?w=500&h=400&fit=crop',
+ 'https://images.unsplash.com/photo-1426604966848-d7adac402bff?w=500&h=400&fit=crop',
+];
+
+const InfiniteGallery: React.FC = () => {
+ // Duplicate items to create seamless loop
+ const items = [...exampleImages, ...exampleImages, ...exampleImages];
+
+ return (
+
+
+
+ 
+
+
+ {/* The Line - Static */}
+
+
+ {/* Scrolling Track */}
+
+ );
+};
+
+export default InfiniteGallery;
diff --git a/src/components/gallery/gallery.css b/src/components/gallery/gallery.css
new file mode 100644
index 0000000..c764766
--- /dev/null
+++ b/src/components/gallery/gallery.css
@@ -0,0 +1,30 @@
+.gallery-track {
+ animation: scroll 40s linear infinite;
+}
+
+.gallery-container:hover .gallery-track {
+ animation-play-state: paused;
+}
+
+@keyframes scroll {
+ 0% {
+ transform: translateX(0);
+ }
+ 100% {
+ transform: translateX(-33.333%);
+ }
+}
+
+.gallery-item:hover {
+ transform: rotate(0deg) !important;
+}
+
+.pin {
+ top: -14px;
+ left: 50%;
+ transform: translateX(-50%) translateY(20%);
+}
+
+.polaroid-card {
+ transform: translateY(10%);
+}
\ No newline at end of file
diff --git a/src/components/user/MemberUserCard.tsx b/src/components/user/MemberUserCard.tsx
index 89cd3bd..9cbdcd4 100644
--- a/src/components/user/MemberUserCard.tsx
+++ b/src/components/user/MemberUserCard.tsx
@@ -27,8 +27,11 @@ const MemberUserCard = () => {
if (!members.length) return
+ {items.map((src, index) => (
+
+ No members found.
; return ( -
+
+
+ Meet Our Team +
+
{members.map((member) => (
+
+
diff --git a/src/components/user/UserFooter.tsx b/src/components/user/UserFooter.tsx
new file mode 100644
index 0000000..684f607
--- /dev/null
+++ b/src/components/user/UserFooter.tsx
@@ -0,0 +1,102 @@
+import { FaDiscord, FaInstagram, FaLinkedin } from 'react-icons/fa';
+import { Link } from 'react-router-dom';
+
+const socialLinks = [
+ {
+ href: 'https://discord.com/',
+ icon:
+ `flex items-center gap-2 rounded-full px-6 py-2 text-lg font-medium transition ${
+ isActive ? 'border-r border-b text-red-500' : ''
+ }`
+ }
+ >
+ {icon}
+ {label}
+
+ ))}
+
+ );
+};
+
+export default NavLinks;
diff --git a/src/components/user/navbar/SocialLinks.tsx b/src/components/user/navbar/SocialLinks.tsx
new file mode 100644
index 0000000..3b7dc24
--- /dev/null
+++ b/src/components/user/navbar/SocialLinks.tsx
@@ -0,0 +1,26 @@
+import { socialLinks } from './navbarData';
+
+interface SocialLinksProps {
+ className?: string;
+}
+
+const SocialLinks = ({ className = '' }: SocialLinksProps) => {
+ return (
+
Projects
{/* Filter Buttons */}
- {FILTERS.map((filter) => (
+ {FILTERS.map((filter, idx) => (
))}
@@ -65,9 +62,9 @@ const ProjectSection: React.FC = () => {
{filteredProjects.map((project) => (
-
))}
diff --git a/src/components/user/UpcomingEventUserCard.tsx b/src/components/user/UpcomingEventUserCard.tsx
index 7b4f419..d06e635 100644
--- a/src/components/user/UpcomingEventUserCard.tsx
+++ b/src/components/user/UpcomingEventUserCard.tsx
@@ -35,7 +35,7 @@ const UpcomingEventUserCard = () => {
const event = events[0];
return (
-
+
+
{project.thumbnailUrl ? (
{
))}
+
+ {project.name} +
+
+
- {project.name} -
-- Created: {formatDate(project.createdAt)} -
+ {/* Tech Stack */} +
+ {(project.techStacks || []).map((tech) => (
+
+ {tech}
+
+ ))}
+
- {/* Tech Stack */}
-
- {(project.techStacks || []).map((tech, i) => (
-
- {tech}
-
- ))}
-
+ {/* Contributors*/}
+
+ {(project.contributors || []).slice(0, 3).map((c) => (
+
- {/* Contributors*/}
-
+ {c.avatarUrl && (
+ 
+ )}
+
+ ))}
+
- {(project.contributors || []).slice(0, 3).map((c) => (
-
- ))}
-
-
- {/* Buttons */}
-
Upcoming Events
@@ -43,7 +43,7 @@ const UpcomingEventUserCard = () => { {/* Left Image */}UserNavbar
- )
-}
+
+ );
+};
+
+export default UserNavbar;
diff --git a/src/components/user/navbar/MobileMenu.tsx b/src/components/user/navbar/MobileMenu.tsx
new file mode 100644
index 0000000..a4ca7c5
--- /dev/null
+++ b/src/components/user/navbar/MobileMenu.tsx
@@ -0,0 +1,38 @@
+import { Menu, X } from 'lucide-react';
+import { useState } from 'react';
+import NavLinks from './NavLinks';
+import SocialLinks from './SocialLinks';
+
+const MobileMenu = () => {
+ const [isOpen, setIsOpen] = useState(false);
+
+ const toggle = () => setIsOpen((prev) => !prev);
+ const close = () => setIsOpen(false);
+
+ return (
+
+ {/* Hamburger button */}
+
+
+ {/* Dropdown mobile menu */}
+ {isOpen && (
+
+ );
+};
+
+export default MobileMenu;
diff --git a/src/components/user/navbar/NavLinks.tsx b/src/components/user/navbar/NavLinks.tsx
new file mode 100644
index 0000000..22402e9
--- /dev/null
+++ b/src/components/user/navbar/NavLinks.tsx
@@ -0,0 +1,30 @@
+import { NavLink } from 'react-router-dom';
+import { navLinks } from './navbarData';
+
+interface NavLinksProps {
+ onClick?: () => void;
+}
+
+const NavLinks = ({ onClick }: NavLinksProps) => {
+ return (
+ <>
+ {navLinks.map(({ to, label, icon }, idx) => (
+
+
+
+ )}
+
+
+
+ {socialLinks.map(({ href, icon, label }, idx) => (
+
+ {icon}
+
+ ))}
+
+ );
+};
+
+export default SocialLinks;
diff --git a/src/components/user/navbar/navbarData.tsx b/src/components/user/navbar/navbarData.tsx
new file mode 100644
index 0000000..a0764bb
--- /dev/null
+++ b/src/components/user/navbar/navbarData.tsx
@@ -0,0 +1,34 @@
+import {
+ FaHome,
+ FaCalendarAlt,
+ FaRegClipboard,
+ FaUsers,
+ FaLinkedin,
+ FaDiscord,
+ FaInstagram,
+} from 'react-icons/fa';
+
+export interface NavLinkItem {
+ to: string;
+ label: string;
+ icon: React.ReactNode;
+}
+
+export interface SocialLinkItem {
+ href: string;
+ icon: React.ReactNode;
+ label: string;
+}
+
+export const navLinks: NavLinkItem[] = [
+ { to: '/', label: 'Home', icon:
+ UserEvents
+
)
}
diff --git a/src/pages/user/UserHome.tsx b/src/pages/user/UserHome.tsx
index bb1d430..fd2c061 100644
--- a/src/pages/user/UserHome.tsx
+++ b/src/pages/user/UserHome.tsx
@@ -1,8 +1,41 @@
+import InfiniteGallery from '@/components/gallery/InfiniteGallery';
+import MemberUserCard from '@/components/user/MemberUserCard';
+import ProjectSection from '@/components/user/ProjectSection';
+import UpcomingEventUserCard from '@/components/user/UpcomingEventUserCard';
const UserHome = () => {
return (
- UserHome
- )
-}
+
+
+ );
+};
-export default UserHome
\ No newline at end of file
+export default UserHome;
+
+
+ 
+
+
+
+
+ Learn.
+ Code
+
+
+ Grow.
+ Together
+
+
+
+
+