feat: implement hero section, navbar and footer

src/components/MemberCard.tsx

@@ -13,13 +13,13 @@ const MemberCard = ({ member }: MemberCardProps) => {
   )}&background=random&size=200`;
 
   return (
-    <div className="flex flex-col items-center text-center px-4 py-8 gap-3">
+    <div className="flex flex-col items-center text-center py-8 gap-3">
       {/* Avatar */}
-      <div className="w-40 h-40 rounded-[1.5rem] overflow-hidden">
+      <div className="w-40 h-40 rounded-xl overflow-hidden shadow-lg p-2">
         <img
           src={member.avatarUrl ?? fallbackAvatar}
           alt={member.name}
-          className="w-full h-full object-cover"
+          className="w-full h-full object-cover rounded-lg"
         />
       </div>
 

src/components/gallery/GalleryItem.tsx

@@ -0,0 +1,22 @@
+import './gallery.css';
+
+interface GalleryItemProps {
+  imageSrc: string;
+  altText: string;
+  rotation?: number;
+}
+
+const GalleryItem: React.FC<GalleryItemProps> = ({ imageSrc, altText, rotation = 0 }) => {
+  return (
+    <div className="gallery-item transition-transform hover:scale-102 mx-8 flex-shrink-0" style={{ transform: `rotate(${rotation}deg)` }}>
+      <div className="pin border-white border-2 shadow-lg z-10 rounded-sm bg-[#ef4444] w-3 h-10 absolute" />
+      <div className="polaroid-card bg-white rounded-lg shadow-lg p-3 w-[250px]">
+        <div className="overflow-hidden rounded-sm bg-gray-100">
+          <img src={imageSrc} alt={altText} className="w-full h-52 object-cover bg-[#f3f4f6] rounded-sm" />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default GalleryItem;

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 (
+    <div className="gallery-container w-full overflow-hidden py-10">
+      {/* The Line - Static */}
+      <div className="h-0.5 bg-black"></div>
+
+      {/* Scrolling Track */}
+      <div className="gallery-track flex animate-scroll w-fit">
+        {items.map((src, index) => (
+          <GalleryItem
+            key={`gallery-item-${index}`}
+            imageSrc={src}
+            altText={`Gallery image ${index}`}
+            rotation={(index % 2 === 0 ? 2 : -2) + (Math.random() * 2 - 1)}
+          />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default InfiniteGallery;

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%);
+}

src/components/user/MemberUserCard.tsx

@@ -27,8 +27,11 @@ const MemberUserCard = () => {
   if (!members.length) return <p className="text-center py-10">No members found.</p>;
 
   return (
-    <section className="mx-auto max-w-6xl px-4 py-10">
-      <div className="grid grid-cols-2 gap-6 sm:grid-cols-3 lg:grid-cols-4">
+    <section>
+      <h2 className="text-primary mb-6 text-center text-3xl font-bold">
+        Meet Our Team
+      </h2>
+      <div className="flex flex-wrap justify-center sm:justify-between gap-x-20">
         {members.map((member) => (
           <MemberCard key={member.id} member={member} />
         ))}