From 9d3ee16aef11dd0c5c8dd99fdf6328c208dbe516 Mon Sep 17 00:00:00 2001
From: QwertyMD <aaryandhakal2020@gmail.com>
Date: Sun, 26 Apr 2026 16:24:04 +0545
Subject: [PATCH] feat: enhance UI components and improve layout for user side

---
 src/App.css                                   |  2 +-
 src/components/user/FAQ.tsx                   | 15 +++-
 src/components/user/MemberUserCard.tsx        |  4 +-
 src/components/user/ProjectSection.tsx        | 89 ++++++++++---------
 src/components/user/UpcomingEventUserCard.tsx |  7 +-
 src/components/user/UserNavbar.tsx            |  2 +-
 src/pages/user/UserHome.tsx                   |  8 +-
 7 files changed, 69 insertions(+), 58 deletions(-)

diff --git a/src/App.css b/src/App.css
index 7f6fa70..2580904 100644
--- a/src/App.css
+++ b/src/App.css
@@ -45,7 +45,7 @@
   .hero-motion-panel {
     transform: translateY(calc((1 - var(--hero-progress)) * 44px))
       scale(calc(0.985 + (var(--hero-progress) * 0.015)));
-    opacity: calc(0.6 + (var(--hero-progress) * 0.4));
+    /* opacity: calc(0.6 + (var(--hero-progress) * 0.4)); */
     box-shadow: 0 -20px 50px rgba(15, 23, 42, calc(var(--hero-progress) * 0.14));
     transition:
       transform 120ms linear,
diff --git a/src/components/user/FAQ.tsx b/src/components/user/FAQ.tsx
index 25ab96c..924adec 100644
--- a/src/components/user/FAQ.tsx
+++ b/src/components/user/FAQ.tsx
@@ -51,6 +51,18 @@ const FAQ = () => {
   ];
 
   return (
+    <section>
+      <div className="flex flex-col gap-4">
+        <div className="flex items-center gap-3">
+          <span className="block h-px w-6 bg-red-700" />
+          <h2 className="text-xs font-bold tracking-widest uppercase text-red-700">
+            FAQ
+          </h2>
+        </div>
+        <h3 className="text-3xl font-bold text-slate-900 md:text-4xl">
+          Frequently Asked Questions
+        </h3>
+      </div>
     <div className="grid grid-cols-1 items-start gap-12 py-16 md:grid-cols-2 md:gap-24">
       <div className="space-y-4">
         {faqs.map((faq, index) => (
@@ -73,7 +85,7 @@ const FAQ = () => {
               type="email"
               placeholder="Enter Your Email"
               className="w-full rounded-full border border-gray-200 bg-gray-50 px-8 py-5 text-gray-800 placeholder-gray-400 shadow-sm transition-all focus:border-red-500 focus:bg-white focus:ring-4 focus:ring-red-500/10 focus:outline-none"
-            />
+              />
           </div>
           <button className="rounded-full bg-red-700 px-10 py-5 font-bold whitespace-nowrap text-white transition-all hover:bg-red-700 hover:shadow-lg hover:shadow-red-600/20 active:scale-95">
             Lets Talk
@@ -81,6 +93,7 @@ const FAQ = () => {
         </div>
       </div>
     </div>
+              </section>
   );
 };
 
diff --git a/src/components/user/MemberUserCard.tsx b/src/components/user/MemberUserCard.tsx
index f02f2b0..1daddc6 100644
--- a/src/components/user/MemberUserCard.tsx
+++ b/src/components/user/MemberUserCard.tsx
@@ -28,7 +28,7 @@ const MemberUserCard = () => {
 
   return (
     <section>
-      <div className="mb-10 flex flex-col gap-4">
+      <div className="flex flex-col gap-4">
         <div className="flex items-center gap-3">
           <span className="block h-px w-6 bg-red-700" />
           <h2 className="text-xs font-bold tracking-widest uppercase text-red-700">
@@ -36,7 +36,7 @@ const MemberUserCard = () => {
           </h2>
         </div>
         <h3 className="text-3xl font-bold text-slate-900 md:text-4xl">
-          Meet our people
+          Meet Our People
         </h3>
       </div>
       <div className="flex flex-wrap justify-between gap-x-8 gap-y-12 sm:gap-x-16 md:gap-x-20 pb-12 md:pb-24 pt-4">
diff --git a/src/components/user/ProjectSection.tsx b/src/components/user/ProjectSection.tsx
index efe7f7c..9e22b21 100644
--- a/src/components/user/ProjectSection.tsx
+++ b/src/components/user/ProjectSection.tsx
@@ -1,26 +1,27 @@
 import { useEffect, useState } from 'react';
-import { Calendar, GitBranch, ExternalLink } from 'lucide-react';
+import { Calendar, GitBranch, ExternalLink, Package, Monitor, Smartphone, Cpu } from 'lucide-react';
 import { Button } from '../ui/button';
 import { formatDate } from '@/utils/formatdate.utils';
 import { getAllProjects } from '@/services/admin/projectServices';
+import type { Contributor, ProjectResponse, Tag } from '@/types/project.types';
 
 const FILTERS = [
-  { label: 'All Projects', tag: 'all', icon: '📦' },
-  { label: 'Web', tag: 'Web', icon: '🖥️' },
-  { label: 'Mobile', tag: 'Mobile', icon: '📱' },
-  { label: 'AI/ML', tag: 'AI/ML', icon: '🤖' },
+  { label: 'All Projects', tag: 'all', icon: <Package size={18} /> },
+  { label: 'Web', tag: 'Web', icon: <Monitor size={18} /> },
+  { label: 'Mobile', tag: 'Mobile', icon: <Smartphone size={18} /> },
+  { label: 'AI/ML', tag: 'AI/ML', icon: <Cpu size={18} /> },
 ];
 
 const ProjectSection: React.FC = () => {
-  const [projects, setProjects] = useState([]);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState('');
-  const [activeFilter, setActiveFilter] = useState('all');
+  const [projects, setProjects] = useState<ProjectResponse[]>([]);
+  const [loading, setLoading] = useState<boolean>(true);
+  const [error, setError] = useState<string>('');
+  const [activeFilter, setActiveFilter] = useState<string>('all');
 
   useEffect(() => {
     const fetchProjects = async () => {
       try {
-        const projectsData = await getAllProjects();
+        const projectsData: ProjectResponse[] = await getAllProjects();
         setProjects(projectsData || []);
       } catch (err: any) {
         setError(err.message || 'Something went wrong');
@@ -34,60 +35,60 @@ const ProjectSection: React.FC = () => {
   if (loading) return <p className="py-10 text-center">Loading projects...</p>;
   if (error) return <p className="py-10 text-center text-red-500">{error}</p>;
 
-  const filteredProjects =
+  const filteredProjects: ProjectResponse[] =
     activeFilter === 'all'
       ? projects
-      : projects.filter((project) => (project.tags || []).some((tag) => tag.name === activeFilter));
+      : projects.filter((project: ProjectResponse) =>
+          (project.tags || []).some((tag: Tag | string) =>
+            typeof tag === 'string' ? tag === activeFilter : tag.name === activeFilter
+          )
+        );
 
   return (
     <section>
       <div className="mb-10 flex flex-col gap-4">
         <div className="flex items-center gap-3">
           <span className="block h-px w-6 bg-red-700" />
-          <h2 className="text-xs font-bold tracking-widest uppercase text-red-700">
-            Projects
-          </h2>
+          <h2 className="text-xs font-bold tracking-widest text-red-700 uppercase">Projects</h2>
         </div>
-        <h3 className="text-3xl font-bold text-slate-900 md:text-4xl">
-          Built by the community
-        </h3>
+        <h3 className="text-3xl font-bold text-slate-900 md:text-4xl">Built by the community</h3>
       </div>
 
       {/* Filter Buttons */}
-<div className="mb-8 flex flex-wrap justify-start gap-1 rounded-xl border border-slate-100 bg-slate-50/80 p-2 w-fit backdrop-blur-md shadow-sm">
-  {FILTERS.map((filter, idx) => (
-    <Button
-      key={`filter-item-${idx}`}
-      onClick={() => setActiveFilter(filter.tag)}
-      className={`flex items-center gap-2 rounded-lg px-3 py-5 text-md font-medium transition-all duration-200 border
-        ${
-          activeFilter === filter.tag
-            ? 'bg-white border-slate-200 text-gray-800 shadow-sm'
-            : 'bg-transparent border-transparent text-gray-500 shadow-none hover:bg-white/60 hover:text-gray-700'
-        }
-      `}
-    >
-      <span className="text-base leading-none">{filter.icon}</span>
-      {filter.label}
-    </Button>
-  ))}
-</div>
+      <div className="mb-8 flex w-fit flex-wrap justify-start gap-1 rounded-xl border border-slate-100 bg-slate-50/80 p-1 shadow-sm backdrop-blur-md">
+        {FILTERS.map((filter, idx) => (
+          <Button
+            key={`filter-item-${idx}`}
+            onClick={() => setActiveFilter(filter.tag)}
+            className={`text-md flex items-center gap-2 rounded-lg border px-3 py-5 font-medium transition-all duration-200 hover:bg-white ${
+              activeFilter === filter.tag
+                ? 'border-slate-200 bg-white text-gray-800'
+                : 'border-transparent bg-transparent text-gray-500 shadow-none hover:bg-white/60 hover:text-gray-700'
+            } `}
+          >
+            <span className="text-base leading-none">{filter.icon}</span>
+            {filter.label}
+          </Button>
+        ))}
+      </div>
+
       {/* Projects Grid */}
       <div className="grid gap-6 md:grid-cols-3">
-        {filteredProjects.map((project) => (
+        {filteredProjects.map((project: ProjectResponse) => (
           <div
             key={project.id}
-            className="flex min-w-[20rem] flex-col rounded-[2rem] border border-gray-100 bg-white p-5 shadow-[0_8px_30px_rgb(0,0,0,0.06)] transition hover:shadow-xl dark:border-gray-700 dark:bg-gray-800"
+            className="relative flex min-w-[20rem] flex-col rounded-xl border border-gray-100 bg-white p-3 pt-36 mb-28 shadow-lg transition-shadow hover:shadow-xl dark:border-gray-700 dark:bg-gray-800 translate-y-32 max-w-sm"
           >
-            <div className="relative mb-5 h-56 w-full overflow-hidden rounded-3xl bg-gray-100 dark:bg-gray-700">
+            {/* Image */}
+            <div className="absolute top-0 left-1/2 w-11/12 -translate-x-1/2 -translate-y-1/2 overflow-hidden rounded-xl shadow-lg">
               {project.thumbnailUrl ? (
                 <img
                   src={project.thumbnailUrl}
                   alt={project.name}
-                  className="h-full w-full object-cover"
+                  className="h-64 w-full object-cover"
                 />
               ) : (
-                <div className="flex h-full w-full items-center justify-center text-gray-400">
+                <div className="flex h-60 w-full items-center justify-center bg-gray-100 text-gray-400">
                   No Image
                 </div>
               )}
@@ -100,7 +101,7 @@ const ProjectSection: React.FC = () => {
 
               {/* Tech Stack */}
               <div className="mb-4 flex flex-wrap gap-2">
-                {(project.techStacks || []).map((tech, idx) => (
+                {(project.techStacks || []).map((tech: string, idx: number) => (
                   <span
                     key={`${project.id}-tech-${idx}`}
                     className="rounded-full bg-red-50 px-3 py-1 text-sm font-semibold text-red-700"
@@ -114,9 +115,9 @@ const ProjectSection: React.FC = () => {
                 <Calendar size={18} /> {formatDate(project.createdAt)}
               </p>
 
-              {/* Contributors*/}
+              {/* Contributors (hex masked, overlapping) */}
               <div className="mb-6 flex items-center -space-x-3">
-                {(project.contributors || []).slice(0, 3).map((c) => (
+                {(project.contributors || []).slice(0, 3).map((c: Contributor) => (
                   <div
                     key={c.id}
                     className="h-10 w-10 overflow-hidden rounded-full border-[3px] border-white bg-gray-200 transition-transform hover:scale-110 dark:border-gray-800"
diff --git a/src/components/user/UpcomingEventUserCard.tsx b/src/components/user/UpcomingEventUserCard.tsx
index 54dd951..db10d48 100644
--- a/src/components/user/UpcomingEventUserCard.tsx
+++ b/src/components/user/UpcomingEventUserCard.tsx
@@ -46,13 +46,10 @@ const UpcomingEventUserCard = () => {
           </h2>
         </div>
         <h3 className="text-3xl font-bold text-slate-900 md:text-4xl">
-          What's happening
+          What's Happening
         </h3>
-        <p className="max-w-2xl text-base text-slate-600">
-          Industry-grade events, workshops, and summits designed to push your skills forward.
-        </p>
       </div>
-      <div className="flex h-88 w-full overflow-hidden rounded-2xl bg-white shadow-xl transition-all duration-300 hover:shadow-2xl">
+      <div className="flex h-88 w-full overflow-hidden rounded-2xl bg-white shadow-lg transition-shadow duration-300 hover:shadow-xl">
         {/* Left Image */}
         <div className="relative h-full w-1/3 p-4">
           <img
diff --git a/src/components/user/UserNavbar.tsx b/src/components/user/UserNavbar.tsx
index e91894f..474269a 100644
--- a/src/components/user/UserNavbar.tsx
+++ b/src/components/user/UserNavbar.tsx
@@ -4,7 +4,7 @@ import SocialLinks from './navbar/SocialLinks';
 
 const UserNavbar = () => {
   return (
-    <nav className="bg-white border-border sticky top-0 z-50 flex w-full items-center justify-between border-b px-6 md:px-40">
+    <nav className="bg-white border-border fixed top-0 z-50 flex w-full items-center justify-between border-b px-6 md:px-40">
       {/* Logo */}
       <div className="flex items-center gap-2">
         <img src="/logo.png" alt="Devsphere Logo" className="h-16 md:h-20" />
diff --git a/src/pages/user/UserHome.tsx b/src/pages/user/UserHome.tsx
index 516986f..9b3ca56 100644
--- a/src/pages/user/UserHome.tsx
+++ b/src/pages/user/UserHome.tsx
@@ -56,7 +56,7 @@ const UserHome = () => {
       >
         <div className="hero-motion-content">
           <img
-            className="hero-motion-rocket-left absolute -top-10 -left-20 w-24 md:-top-12 md:-left-36 md:w-40"
+            className="hero-motion-rocket-left absolute -top-10 -left-20 w-24 md:-top-16 md:-left-40 md:w-56"
             src="/rocket.svg"
             alt="rocket"
           />
@@ -69,7 +69,7 @@ const UserHome = () => {
             <span className="text-red-700">Together</span>
           </div>
           <img
-            className="hero-motion-rocket-right absolute -right-20 -bottom-10 w-24 md:-right-36 md:-bottom-12 md:w-40"
+            className="hero-motion-rocket-right absolute -right-20 -bottom-10 w-24 md:-right-48 md:-bottom-16 md:w-56"
             src="/rocket.svg"
             alt="rocket"
           />
@@ -79,8 +79,8 @@ const UserHome = () => {
         </div>
       </section>
 
-      <div style={heroStyle} className="hero-motion-panel relative z-10 rounded-t-3xl bg-white">
-        <div className="space-y-20 px-6 py-20 md:px-40">
+      <div style={heroStyle} className="hero-motion-panel relative z-10 bg-white">
+        <div className="space-y-40 px-6 py-20 md:px-40">
           <section data-section-id="events">
             <UpcomingEventUserCard />
           </section>