From 281fe98f1216faee6c012c96c60704a8f3439677 Mon Sep 17 00:00:00 2001 From: QwertyMD Date: Wed, 4 Mar 2026 19:00:29 +0545 Subject: [PATCH 1/4] feat: implement hero section, navbar and footer - Added InfiniteGallery component with scrolling functionality and example images. - Created GalleryItem component for individual gallery items with rotation effect. - Introduced UserFooter component with social and quick links. - Updated UserLayout to include UserFooter. - Enhanced UserNavbar with mobile menu and navigation links. - Created reusable components for mobile menu, navigation links, and social links. - Added styling for gallery and user components in respective CSS files. --- package-lock.json | 18 +--- public/rocket.svg | 27 ++++++ src/App.css | 59 ++++++++++++ src/components/gallery/GalleryItem.tsx | 25 +++++ src/components/gallery/InfiniteGallery.tsx | 37 ++++++++ src/components/gallery/gallery.css | 83 +++++++++++++++++ src/components/user/UserFooter.tsx | 102 +++++++++++++++++++++ src/components/user/UserLayout.tsx | 2 + src/components/user/UserNavbar.tsx | 27 +++++- src/components/user/navbar/MobileMenu.tsx | 38 ++++++++ src/components/user/navbar/NavLinks.tsx | 30 ++++++ src/components/user/navbar/SocialLinks.tsx | 26 ++++++ src/components/user/navbar/navbarData.tsx | 34 +++++++ src/pages/user/UserHome.tsx | 36 +++++++- 14 files changed, 519 insertions(+), 25 deletions(-) create mode 100644 public/rocket.svg create mode 100644 src/components/gallery/GalleryItem.tsx create mode 100644 src/components/gallery/InfiniteGallery.tsx create mode 100644 src/components/gallery/gallery.css create mode 100644 src/components/user/UserFooter.tsx create mode 100644 src/components/user/navbar/MobileMenu.tsx create mode 100644 src/components/user/navbar/NavLinks.tsx create mode 100644 src/components/user/navbar/SocialLinks.tsx create mode 100644 src/components/user/navbar/navbarData.tsx diff --git a/package-lock.json b/package-lock.json index 73c9f13..f5108fc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -79,7 +79,6 @@ "integrity": "sha512-2BCOP7TN8M+gVDj7/ht3hsaO/B/n5oDbiAyyvnRlNOs+u1o+JWNYTQrmpuNp1/Wq2gcFrI01JAW+paEKDMx/CA==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@babel/code-frame": "^7.27.1", "@babel/generator": "^7.28.3", @@ -2561,7 +2560,6 @@ "integrity": "sha512-/NbVmcGTP+lj5oa4yiYxxeBjRivKQ5Ns1eSZeB99ExsEQ6rX5XYU1Zy/gGxY/ilqtD4Etx9mKyrPxZRetiahhA==", "devOptional": true, "license": "MIT", - "peer": true, "dependencies": { "undici-types": "~7.14.0" } @@ -2572,7 +2570,6 @@ "integrity": "sha512-6mDvHUFSjyT2B2yeNx2nUgMxh9LtOWvkhIU3uePn2I2oyNymUAX1NIsdgviM4CH+JSrp2D2hsMvJOkxY+0wNRA==", "devOptional": true, "license": "MIT", - "peer": true, "dependencies": { "csstype": "^3.0.2" } @@ -2583,7 +2580,6 @@ "integrity": "sha512-/EEvYBdT3BflCWvTMO7YkYBHVE9Ci6XdqZciZANQgKpaiDRGOLIlRo91jbTNRQjgPFWVaRxcYc0luVNFitz57A==", "devOptional": true, "license": "MIT", - "peer": true, "peerDependencies": { "@types/react": "^19.2.0" } @@ -2634,7 +2630,6 @@ "integrity": "sha512-n1H6IcDhmmUEG7TNVSspGmiHHutt7iVKtZwRppD7e04wha5MrkV1h3pti9xQLcCMt6YWsncpoT0HMjkH1FNwWQ==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@typescript-eslint/scope-manager": "8.46.0", "@typescript-eslint/types": "8.46.0", @@ -2900,7 +2895,6 @@ "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==", "dev": true, "license": "MIT", - "peer": true, "bin": { "acorn": "bin/acorn" }, @@ -3121,7 +3115,6 @@ } ], "license": "MIT", - "peer": true, "dependencies": { "baseline-browser-mapping": "^2.8.9", "caniuse-lite": "^1.0.30001746", @@ -3313,8 +3306,7 @@ "version": "3.1.3", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==", - "license": "MIT", - "peer": true + "license": "MIT" }, "node_modules/debug": { "version": "4.4.3", @@ -3520,7 +3512,6 @@ "integrity": "sha512-XyLmROnACWqSxiGYArdef1fItQd47weqB7iwtfr9JHwRrqIXZdcFMvvEcL9xHCmL0SNsOvF0c42lWyM1U5dgig==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@eslint-community/eslint-utils": "^4.8.0", "@eslint-community/regexpp": "^4.12.1", @@ -4804,7 +4795,6 @@ "integrity": "sha512-I7AIg5boAr5R0FFtJ6rCfD+LFsWHp81dolrFD8S79U9tb8Az2nGrJncnMSnys+bpQJfRUzqs9hnA81OAA3hCuQ==", "dev": true, "license": "MIT", - "peer": true, "bin": { "prettier": "bin/prettier.cjs" }, @@ -4954,7 +4944,6 @@ "resolved": "https://registry.npmjs.org/react/-/react-19.2.0.tgz", "integrity": "sha512-tmbWg6W31tQLeB5cdIBOicJDJRR2KzXsV7uSK9iNfLWQ5bIZfxuPEHp7M8wiHyHnn0DD1i7w3Zmin0FtkrwoCQ==", "license": "MIT", - "peer": true, "engines": { "node": ">=0.10.0" } @@ -4964,7 +4953,6 @@ "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.0.tgz", "integrity": "sha512-UlbRu4cAiGaIewkPyiRGJk0imDN2T3JjieT6spoL2UeSf5od4n5LB/mQ4ejmxhCFT1tYe8IvaFulzynWovsEFQ==", "license": "MIT", - "peer": true, "dependencies": { "scheduler": "^0.27.0" }, @@ -5385,7 +5373,6 @@ "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz", "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", "license": "MIT", - "peer": true, "engines": { "node": ">=12" }, @@ -5472,7 +5459,6 @@ "integrity": "sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ==", "dev": true, "license": "Apache-2.0", - "peer": true, "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" @@ -5607,7 +5593,6 @@ "resolved": "https://registry.npmjs.org/vite/-/vite-7.1.9.tgz", "integrity": "sha512-4nVGliEpxmhCL8DslSAUdxlB6+SMrhB0a1v5ijlh1xB1nEPuy1mxaHxysVucLHuWryAxLWg6a5ei+U4TLn/rFg==", "license": "MIT", - "peer": true, "dependencies": { "esbuild": "^0.25.0", "fdir": "^6.5.0", @@ -5699,7 +5684,6 @@ "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz", "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", "license": "MIT", - "peer": true, "engines": { "node": ">=12" }, diff --git a/public/rocket.svg b/public/rocket.svg new file mode 100644 index 0000000..3e935e5 --- /dev/null +++ b/public/rocket.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/App.css b/src/App.css index e69de29..3f72522 100644 --- a/src/App.css +++ b/src/App.css @@ -0,0 +1,59 @@ +.grid-bg { + background-image: + linear-gradient(to right, #f3f4f6 1px, transparent 1px), + linear-gradient(to bottom, #f3f4f6 1px, transparent 1px); + background-size: 20px 20px; +} + +.pinned-line { + position: relative; + width: 100vw; + height: 2rem; + display: flex; + align-items: center; +} + +.pinned-line::before { + content: ''; + position: absolute; + width: 100%; + height: 0.25rem; + background-color: black; +} + +.pin { + width: 1rem; + height: 1rem; + background-color: #ef4444; + border-radius: 50%; + border: 2px solid white; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + position: relative; + z-index: 10; +} + +.infinite-gallery { + width: 100vw; + height: auto; + display: flex; + gap: 2rem; + overflow-x: auto; + scroll-behavior: smooth; + padding: 2rem 2rem; + cursor: grab; + user-select: none; + scrollbar-width: none; +} + +.infinite-gallery::-webkit-scrollbar { + display: none; +} + +.infinite-gallery:active { + cursor: grabbing; +} + +.gallery-item { + flex-shrink: 0; + min-width: fit-content; +} diff --git a/src/components/gallery/GalleryItem.tsx b/src/components/gallery/GalleryItem.tsx new file mode 100644 index 0000000..8f8a49b --- /dev/null +++ b/src/components/gallery/GalleryItem.tsx @@ -0,0 +1,25 @@ +import './gallery.css'; + +interface GalleryItemProps { + imageSrc: string; + altText: string; + rotation?: number; +} + +const GalleryItem: React.FC = ({ imageSrc, altText, rotation = 0 }) => { + return ( +
+
+
+
+ {altText} +
+
+
+ ); +}; + +export default GalleryItem; diff --git a/src/components/gallery/InfiniteGallery.tsx b/src/components/gallery/InfiniteGallery.tsx new file mode 100644 index 0000000..b526135 --- /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 */} +
+ {items.map((src, index) => ( + + ))} +
+
+ ); +}; + +export default InfiniteGallery; diff --git a/src/components/gallery/gallery.css b/src/components/gallery/gallery.css new file mode 100644 index 0000000..db6f9e0 --- /dev/null +++ b/src/components/gallery/gallery.css @@ -0,0 +1,83 @@ +.gallery-container { + overflow: hidden; + position: relative; + width: 100%; +} + +.gallery-track { + display: flex; + width: max-content; + animation: scroll 40s linear infinite; + /* Removed padding-top to align with container padding */ + position: relative; /* create stacking context */ + z-index: 20; /* ensure track (and pins) sit above the line */ +} + +.gallery-container:hover .gallery-track { + animation-play-state: paused; +} + +@keyframes scroll { + 0% { + transform: translateX(0); + } + 100% { + transform: translateX(-33.333%); + } +} + +.gallery-line { + position: absolute; + top: 39px; /* Aligned with pin center */ + left: 0; + width: 100%; + height: 2px; + background-color: #333; + z-index: 10; +} + +.gallery-item { + position: relative; + margin: 0 1rem; + transition: transform 0.3s ease; +} + +.gallery-item:hover { + transform: scale(1.02) rotate(0deg) !important; + z-index: 20; +} + +.pin { + width: 12px; + height: 40px; /* extended length */ + background-color: #ef4444; /* red-500 */ + border-radius: 6px; /* slightly rounded ends */ + position: absolute; + top: -14px; /* shift upward to maintain center alignment over the line */ + left: 50%; + transform: translateX(-50%); + transform: translateY(20%); + z-index: 20; /* ensure pins stay above the line */ + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); + border: 2px solid white; +} + +.polaroid-card { + background: white; + padding: 12px; + box-shadow: + 0 4px 6px -1px rgba(0, 0, 0, 0.1), + 0 2px 4px -1px rgba(0, 0, 0, 0.06); + border-radius: 4px; + width: 250px; + transform-origin: top center; + transform: translateY(10%) +} + +.polaroid-image { + width: 100%; + height: 200px; + object-fit: cover; + background-color: #f3f4f6; + border-radius: 2px; +} diff --git a/src/components/user/UserFooter.tsx b/src/components/user/UserFooter.tsx new file mode 100644 index 0000000..5200ad4 --- /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: , + label: 'Discord', + }, + { + href: 'https://instagram.com/', + icon: , + label: 'Instagram', + }, + { + href: 'https://linkedin.com/', + icon: , + label: 'LinkedIn', + }, +]; + +const quickLinks = [ + { to: '/', label: 'Members' }, + { to: '/', label: 'Events' }, + { to: '/', label: 'Projects' }, +]; + +const communityLinks = [ + { to: '/', label: 'How it works!' }, + { to: '/', label: 'Get in touch' }, +]; + +const UserFooter = () => { + return ( +
+
+ {/* Left Section */} +
+ Devsphere Logo +

+ Join our Discord channel or follow us on Instagram to keep up to date with our latest + work, events and announcements. +

+
+ {socialLinks.map(({ href, icon, label }, idx) => ( + + {icon} + + ))} +
+
+ {/* Quick Link */} +
+

Quick Link

+
    + {quickLinks.map(({ to, label }, idx) => ( +
  • + + {label} + +
    • + ))} +
+
+ {/* Community */} +
+

Community

+
    + {communityLinks.map(({ to, label }, idx) => ( +
  • + + {label} + +
    • + ))} +
+
+
+ {/* Copyright and Privacy Terms */} +
+
Copyright © 2025 Devsphere All Rights Reserved.
+
+ + Privacy Policy + + + Terms of Use + +
+
+
+ ); +}; + +export default UserFooter; diff --git a/src/components/user/UserLayout.tsx b/src/components/user/UserLayout.tsx index 209943e..4ada6ac 100644 --- a/src/components/user/UserLayout.tsx +++ b/src/components/user/UserLayout.tsx @@ -1,11 +1,13 @@ import { Outlet } from "react-router-dom"; import UserNavbar from "@/components/user/UserNavbar"; +import UserFooter from "@/components/user/UserFooter"; const UserLayout = () => { return (
+
); }; diff --git a/src/components/user/UserNavbar.tsx b/src/components/user/UserNavbar.tsx index 399592d..086f712 100644 --- a/src/components/user/UserNavbar.tsx +++ b/src/components/user/UserNavbar.tsx @@ -1,8 +1,27 @@ +import MobileMenu from './navbar/MobileMenu'; +import NavLinks from './navbar/NavLinks'; +import SocialLinks from './navbar/SocialLinks'; const UserNavbar = () => { return ( -
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..fc80aae --- /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) => ( + + `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..718fb3e --- /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 ( +
+ {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: }, + { to: '/events', label: 'Events', icon: }, + { to: '/projects', label: 'Projects', icon: }, + { to: '/members', label: 'Members', icon: }, +]; + +export const socialLinks: SocialLinkItem[] = [ + { href: 'https://linkedin.com/', icon: , label: 'LinkedIn' }, + { href: 'https://discord.com/', icon: , label: 'Discord' }, + { href: 'https://instagram.com/', icon: , label: 'Instagram' }, +]; diff --git a/src/pages/user/UserHome.tsx b/src/pages/user/UserHome.tsx index bb1d430..685d559 100644 --- a/src/pages/user/UserHome.tsx +++ b/src/pages/user/UserHome.tsx @@ -1,8 +1,36 @@ +import '@/App.css'; +import InfiniteGallery from '@/components/gallery/InfiniteGallery'; const UserHome = () => { return ( -
UserHome
- ) -} +
+
+
+ rocket +
+ Learn. + Code +
+
+ Grow. + Together +
+ rocket +
+
+
+ +
+
+ ); +}; -export default UserHome \ No newline at end of file +export default UserHome; From d91832af28dc609ea35b249f72b9bac1a0eac732 Mon Sep 17 00:00:00 2001 From: QwertyMD Date: Wed, 4 Mar 2026 20:14:50 +0545 Subject: [PATCH 2/4] feat: refactor gallery and user components, update styles and links --- src/App.css | 59 -------------------------- src/components/gallery/GalleryItem.tsx | 5 +-- src/components/gallery/gallery.css | 22 +++++----- src/components/user/UserFooter.tsx | 6 +-- src/pages/user/UserHome.tsx | 7 ++- 5 files changed, 17 insertions(+), 82 deletions(-) diff --git a/src/App.css b/src/App.css index 3f72522..e69de29 100644 --- a/src/App.css +++ b/src/App.css @@ -1,59 +0,0 @@ -.grid-bg { - background-image: - linear-gradient(to right, #f3f4f6 1px, transparent 1px), - linear-gradient(to bottom, #f3f4f6 1px, transparent 1px); - background-size: 20px 20px; -} - -.pinned-line { - position: relative; - width: 100vw; - height: 2rem; - display: flex; - align-items: center; -} - -.pinned-line::before { - content: ''; - position: absolute; - width: 100%; - height: 0.25rem; - background-color: black; -} - -.pin { - width: 1rem; - height: 1rem; - background-color: #ef4444; - border-radius: 50%; - border: 2px solid white; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); - position: relative; - z-index: 10; -} - -.infinite-gallery { - width: 100vw; - height: auto; - display: flex; - gap: 2rem; - overflow-x: auto; - scroll-behavior: smooth; - padding: 2rem 2rem; - cursor: grab; - user-select: none; - scrollbar-width: none; -} - -.infinite-gallery::-webkit-scrollbar { - display: none; -} - -.infinite-gallery:active { - cursor: grabbing; -} - -.gallery-item { - flex-shrink: 0; - min-width: fit-content; -} diff --git a/src/components/gallery/GalleryItem.tsx b/src/components/gallery/GalleryItem.tsx index 8f8a49b..bd8e91a 100644 --- a/src/components/gallery/GalleryItem.tsx +++ b/src/components/gallery/GalleryItem.tsx @@ -8,10 +8,7 @@ interface GalleryItemProps { const GalleryItem: React.FC = ({ imageSrc, altText, rotation = 0 }) => { return ( -
+
diff --git a/src/components/gallery/gallery.css b/src/components/gallery/gallery.css index db6f9e0..05d3793 100644 --- a/src/components/gallery/gallery.css +++ b/src/components/gallery/gallery.css @@ -8,9 +8,8 @@ display: flex; width: max-content; animation: scroll 40s linear infinite; - /* Removed padding-top to align with container padding */ - position: relative; /* create stacking context */ - z-index: 20; /* ensure track (and pins) sit above the line */ + position: relative; + z-index: 20; } .gallery-container:hover .gallery-track { @@ -28,7 +27,7 @@ .gallery-line { position: absolute; - top: 39px; /* Aligned with pin center */ + top: 39px; left: 0; width: 100%; height: 2px; @@ -49,15 +48,14 @@ .pin { width: 12px; - height: 40px; /* extended length */ - background-color: #ef4444; /* red-500 */ - border-radius: 6px; /* slightly rounded ends */ + height: 40px; + background-color: #ef4444; + border-radius: 6px; position: absolute; - top: -14px; /* shift upward to maintain center alignment over the line */ + top: -14px; left: 50%; - transform: translateX(-50%); - transform: translateY(20%); - z-index: 20; /* ensure pins stay above the line */ + transform: translateX(-50%) translateY(20%); + z-index: 20; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); border: 2px solid white; } @@ -71,7 +69,7 @@ border-radius: 4px; width: 250px; transform-origin: top center; - transform: translateY(10%) + transform: translateY(10%); } .polaroid-image { diff --git a/src/components/user/UserFooter.tsx b/src/components/user/UserFooter.tsx index 5200ad4..e83991c 100644 --- a/src/components/user/UserFooter.tsx +++ b/src/components/user/UserFooter.tsx @@ -20,9 +20,9 @@ const socialLinks = [ ]; const quickLinks = [ - { to: '/', label: 'Members' }, - { to: '/', label: 'Events' }, - { to: '/', label: 'Projects' }, + { to: '/members', label: 'Members' }, + { to: '/events', label: 'Events' }, + { to: '/projects', label: 'Projects' }, ]; const communityLinks = [ diff --git a/src/pages/user/UserHome.tsx b/src/pages/user/UserHome.tsx index 685d559..fcc22a6 100644 --- a/src/pages/user/UserHome.tsx +++ b/src/pages/user/UserHome.tsx @@ -1,14 +1,13 @@ -import '@/App.css'; import InfiniteGallery from '@/components/gallery/InfiniteGallery'; const UserHome = () => { return (
-
+
rocket
@@ -21,7 +20,7 @@ const UserHome = () => {
rocket
From 26d717a72476edab1759b058d3c91fdb92062afb Mon Sep 17 00:00:00 2001 From: QwertyMD Date: Sat, 7 Mar 2026 13:01:41 +0545 Subject: [PATCH 3/4] feat: update key props for better uniqueness --- src/components/gallery/InfiniteGallery.tsx | 2 +- src/components/user/UserFooter.tsx | 6 +++--- src/components/user/navbar/NavLinks.tsx | 2 +- src/components/user/navbar/SocialLinks.tsx | 2 +- 4 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/gallery/InfiniteGallery.tsx b/src/components/gallery/InfiniteGallery.tsx index b526135..7763ad8 100644 --- a/src/components/gallery/InfiniteGallery.tsx +++ b/src/components/gallery/InfiniteGallery.tsx @@ -23,7 +23,7 @@ const InfiniteGallery: React.FC = () => {
{items.map((src, index) => ( {
{socialLinks.map(({ href, icon, label }, idx) => ( {

Quick Link