refactor: redesign projects page with full navigation functionallity
This commit is contained in:
sanjidaRimi023
+222
-149
@@ -9,10 +9,12 @@ import {
|
||||
ExternalLink,
|
||||
Github,
|
||||
Globe,
|
||||
Loader2,
|
||||
Search,
|
||||
Smartphone,
|
||||
Workflow,
|
||||
} from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import { useMemo, useState } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
const categories = [
|
||||
@@ -29,39 +31,44 @@ const containerVariants = {
|
||||
visible: {
|
||||
opacity: 1,
|
||||
transition: {
|
||||
staggerChildren: 0.1,
|
||||
staggerChildren: 0.08,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const itemVariants = {
|
||||
hidden: { opacity: 0, y: 30 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: { duration: 0.5, ease: "easeOut" as const },
|
||||
},
|
||||
};
|
||||
|
||||
export default function Projects() {
|
||||
const { data: projectsData } = useProjects();
|
||||
const projects = projectsData?.data.data.result;
|
||||
const { data: projectsData, isLoading, isError } = useProjects();
|
||||
|
||||
const [activeCategory, setActiveCategory] = useState("all");
|
||||
const [searchQuery, setSearchQuery] = useState("");
|
||||
|
||||
const filteredProjects =
|
||||
activeCategory === "all"
|
||||
? projects
|
||||
: projects?.filter((project) => project.category === activeCategory);
|
||||
const filteredProjects = useMemo(() => {
|
||||
const projects = projectsData?.data?.data?.result || [];
|
||||
if (!projects) return [];
|
||||
return projects.filter((project) => {
|
||||
const matchesCategory =
|
||||
activeCategory === "all" || project.category === activeCategory;
|
||||
|
||||
const matchesSearch =
|
||||
searchQuery.trim() === "" ||
|
||||
project.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
project.description.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||||
project.technologies.some((tech: string) =>
|
||||
tech.toLowerCase().includes(searchQuery.toLowerCase()),
|
||||
);
|
||||
|
||||
return matchesCategory && matchesSearch;
|
||||
});
|
||||
}, [projectsData, activeCategory, searchQuery]);
|
||||
|
||||
return (
|
||||
<PageTransition>
|
||||
<div className="min-h-screen bg-background overflow-x-hidden">
|
||||
<div className="min-h-screen bg-background overflow-x-hidden text-foreground antialiased">
|
||||
{/* Hero Section */}
|
||||
<section className="pt-32 pb-16 relative overflow-hidden">
|
||||
<div className="absolute inset-0">
|
||||
<div className="absolute top-1/4 left-1/4 w-96 h-96 bg-primary/20 rounded-full blur-3xl" />
|
||||
<div className="absolute bottom-0 right-1/4 w-64 h-64 bg-neon-purple/20 rounded-full blur-3xl" />
|
||||
<section className="pt-32 pb-16 relative overflow-hidden border-b border-primary/10">
|
||||
<div className="absolute inset-0 pointer-events-none select-none">
|
||||
<div className="absolute top-1/4 left-1/4 w-96 h-96 bg-primary/10 rounded-full blur-3xl" />
|
||||
<div className="absolute bottom-0 right-1/4 w-64 h-64 bg-accent/20 rounded-full blur-3xl" />
|
||||
</div>
|
||||
|
||||
<div className="container mx-auto px-4 relative z-10">
|
||||
@@ -69,10 +76,10 @@ export default function Projects() {
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 0.5 }}
|
||||
transition={{ duration: 0.4 }}
|
||||
>
|
||||
<Link to="/">
|
||||
<Button variant="ghost" className="mb-8 group">
|
||||
<Button variant="ghost" className="mb-8 group h-10 px-4">
|
||||
<ArrowLeft className="w-4 h-4 mr-2 transition-transform group-hover:-translate-x-1" />
|
||||
Back to Home
|
||||
</Button>
|
||||
@@ -81,156 +88,222 @@ export default function Projects() {
|
||||
|
||||
{/* Header */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
initial={{ opacity: 0, y: 15 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6 }}
|
||||
className="text-center mb-12"
|
||||
transition={{ duration: 0.5 }}
|
||||
className="text-center mb-10 max-w-3xl mx-auto"
|
||||
>
|
||||
<h1 className="text-5xl md:text-6xl font-bold mb-6">
|
||||
Our{" "}
|
||||
<span className="text-primary neon-text-glow">Projects</span>
|
||||
<h1 className="text-4xl md:text-6xl font-extrabold tracking-tight mb-4 bg-gradient-to-r from-primary via-primary/80 to-accent bg-clip-text text-transparent">
|
||||
Our Projects
|
||||
</h1>
|
||||
<p className="text-muted-foreground max-w-2xl mx-auto text-lg">
|
||||
Explore our portfolio of innovative solutions that have
|
||||
transformed businesses across industries.
|
||||
<p className="text-muted-foreground text-lg md:text-xl leading-relaxed max-w-2xl mx-auto">
|
||||
Explore our portfolio of innovative solutions designed to scale
|
||||
and transform businesses across industries.
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
{/* Filter Tabs */}
|
||||
{/* Interactive Search and Filter Section */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
initial={{ opacity: 0, y: 15 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.2 }}
|
||||
className="flex flex-wrap justify-center gap-3 mb-16"
|
||||
transition={{ duration: 0.5, delay: 0.1 }}
|
||||
className="flex flex-col items-center gap-6 mb-12"
|
||||
>
|
||||
{categories?.map((category) => {
|
||||
const Icon = category.icon;
|
||||
return (
|
||||
<Button
|
||||
key={category.id}
|
||||
variant={
|
||||
activeCategory === category.id ? "default" : "outline"
|
||||
}
|
||||
onClick={() => setActiveCategory(category.id)}
|
||||
className={`rounded-full px-6 transition-all duration-300 ${
|
||||
activeCategory === category.id
|
||||
? "neon-glow bg-primary text-primary-foreground"
|
||||
: "glass border-primary/30 hover:border-primary"
|
||||
}`}
|
||||
>
|
||||
{Icon && <Icon className="w-4 h-4 mr-2" />}
|
||||
{category.name}
|
||||
</Button>
|
||||
);
|
||||
})}
|
||||
{/* Search Bar */}
|
||||
<div className="relative w-full max-w-md">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-muted-foreground" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search projects, tech, or keywords..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="w-full pl-10 pr-4 py-2.5 rounded-full border border-border/50 bg-background/50 backdrop-blur-sm focus:outline-none focus:ring-2 focus:ring-primary/40 transition-all text-sm shadow-sm"
|
||||
aria-label="Search projects"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Filter Tabs */}
|
||||
<div className="flex flex-wrap justify-center gap-2 max-w-4xl">
|
||||
{categories.map((category) => {
|
||||
const Icon = category.icon;
|
||||
const isActive = activeCategory === category.id;
|
||||
|
||||
return (
|
||||
<Button
|
||||
key={category.id}
|
||||
variant={isActive ? "default" : "outline"}
|
||||
onClick={() => setActiveCategory(category.id)}
|
||||
aria-pressed={isActive}
|
||||
className={`rounded-full px-5 py-2 text-sm font-medium transition-all duration-300 ${
|
||||
isActive
|
||||
? "bg-primary text-primary-foreground shadow-sm shadow-primary/20"
|
||||
: "border-border/60 hover:bg-muted/50"
|
||||
}`}
|
||||
>
|
||||
{Icon && <Icon className="w-4 h-4 mr-2" />}
|
||||
{category.name}
|
||||
</Button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Projects Grid */}
|
||||
<section className="pb-24">
|
||||
<section className="py-20 bg-background/50">
|
||||
<div className="container mx-auto px-4">
|
||||
<AnimatePresence mode="wait">
|
||||
<motion.div
|
||||
key={activeCategory}
|
||||
variants={containerVariants}
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
exit="hidden"
|
||||
className="grid md:grid-cols-2 gap-8"
|
||||
>
|
||||
{filteredProjects?.map((project) => (
|
||||
<motion.article
|
||||
key={project._id}
|
||||
variants={itemVariants}
|
||||
layout
|
||||
className="group glass rounded-3xl overflow-hidden hover:neon-glow transition-all duration-500"
|
||||
>
|
||||
{/* Image */}
|
||||
<div className="relative h-64 overflow-hidden">
|
||||
<img
|
||||
src={project.image}
|
||||
alt={project.title}
|
||||
className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-background via-background/50 to-transparent opacity-60" />
|
||||
{/* Loading / Error State */}
|
||||
{isLoading && (
|
||||
<div className="flex flex-col items-center justify-center py-24 gap-4 text-muted-foreground animate-pulse">
|
||||
<Loader2 className="w-8 h-8 animate-spin text-primary" />
|
||||
<span className="text-sm font-medium">Loading projects...</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Category Badge */}
|
||||
<div className="absolute top-4 left-4">
|
||||
<span className="px-3 py-1 rounded-full bg-primary/20 text-primary text-sm font-medium backdrop-blur-sm border border-primary/30">
|
||||
{
|
||||
categories.find((c) => c.id === project.category)
|
||||
?.name
|
||||
}
|
||||
</span>
|
||||
{isError && (
|
||||
<div className="text-center py-20 text-destructive">
|
||||
<p className="text-lg font-semibold mb-2">
|
||||
Failed to load projects.
|
||||
</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Please check your network connection or try again later.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!isLoading && !isError && (
|
||||
<AnimatePresence mode="wait">
|
||||
<motion.div
|
||||
key={`${activeCategory}-${searchQuery}`}
|
||||
variants={containerVariants}
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
exit="hidden"
|
||||
className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"
|
||||
>
|
||||
{filteredProjects.map((project) => (
|
||||
<motion.article
|
||||
key={project._id}
|
||||
layout
|
||||
className="group flex flex-col justify-between bg-card/40 border border-border/50 backdrop-blur-sm rounded-3xl overflow-hidden hover:border-primary/50 transition-all duration-500 hover:shadow-xl hover:shadow-accent/5 p-4"
|
||||
>
|
||||
<div>
|
||||
{/* Project Image */}
|
||||
<div className="relative h-56 rounded-2xl overflow-hidden mb-6">
|
||||
<img
|
||||
src={project.image}
|
||||
alt={project.title}
|
||||
loading="lazy"
|
||||
className="w-full h-full object-cover transition-transform duration-700 ease-out group-hover:scale-105"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-background/90 via-background/20 to-transparent opacity-80" />
|
||||
|
||||
{/* Category Badge */}
|
||||
<div className="absolute top-4 left-4">
|
||||
<span className="px-3 py-1 rounded-full bg-primary/20 text-primary text-xs font-semibold backdrop-blur-md border border-primary/20">
|
||||
{
|
||||
categories.find(
|
||||
(c) => c.id === project.category,
|
||||
)?.name
|
||||
}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Quick External Links */}
|
||||
<div className="absolute top-4 right-4 flex gap-2 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
|
||||
{project.liveUrl && (
|
||||
<a
|
||||
href={project.liveUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="p-2 rounded-full bg-background/80 backdrop-blur-sm border border-border/40 hover:bg-primary/20 transition-colors"
|
||||
aria-label={`View live project: ${project.title}`}
|
||||
>
|
||||
<ExternalLink className="w-4 h-4" />
|
||||
</a>
|
||||
)}
|
||||
{project.githubUrl && (
|
||||
<a
|
||||
href={project.githubUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="p-2 rounded-full bg-background/80 backdrop-blur-sm border border-border/40 hover:bg-primary/20 transition-colors"
|
||||
aria-label={`View GitHub repository for: ${project.title}`}
|
||||
>
|
||||
<Github className="w-4 h-4" />
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Title & Description */}
|
||||
<div className="px-2">
|
||||
<div className="flex items-center gap-3 text-xs font-medium text-muted-foreground mb-3">
|
||||
<span>{project.client}</span>
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-muted-foreground/40" />
|
||||
<span>{project.year}</span>
|
||||
</div>
|
||||
|
||||
<h3 className="text-xl font-bold tracking-tight mb-3 group-hover:text-primary transition-colors line-clamp-1">
|
||||
<Link to={`/projects/${project._id}`}>
|
||||
{project.title}
|
||||
</Link>
|
||||
</h3>
|
||||
|
||||
<p className="text-muted-foreground text-sm leading-relaxed mb-6 line-clamp-3">
|
||||
{project.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Quick Links */}
|
||||
<div className="absolute top-4 right-4 flex gap-2 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
|
||||
<Link
|
||||
target="_blank"
|
||||
to={project.liveUrl}
|
||||
className="p-2 rounded-full glass hover:bg-primary/20 transition-colors"
|
||||
aria-label="View live project"
|
||||
>
|
||||
<ExternalLink className="w-4 h-4" />
|
||||
</Link>
|
||||
<Link
|
||||
target="_blank"
|
||||
to={project.githubUrl}
|
||||
className="p-2 rounded-full glass hover:bg-primary/20 transition-colors"
|
||||
aria-label="View on GitHub"
|
||||
>
|
||||
<Github className="w-4 h-4" />
|
||||
</Link>
|
||||
{/* Technologies and Detail Navigation */}
|
||||
<div className="px-2">
|
||||
<div className="flex flex-wrap gap-1.5 max-h-16 overflow-hidden mb-4">
|
||||
{project.technologies
|
||||
.slice(0, 5)
|
||||
.map((tech: string) => (
|
||||
<span
|
||||
key={tech}
|
||||
className="px-2.5 py-0.5 rounded-md bg-primary text-primary-foreground text-xs font-semibold tracking-wide"
|
||||
>
|
||||
{tech}
|
||||
</span>
|
||||
))}
|
||||
{project.technologies.length > 5 && (
|
||||
<span className="px-2.5 py-0.5 rounded-md bg-secondary text-secondary-foreground text-xs font-semibold tracking-wide">
|
||||
+{project.technologies.length - 5}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end pt-2 border-t border-border/30">
|
||||
<Link to={`/projects/${project._id}`}>
|
||||
<Button
|
||||
variant="link"
|
||||
size="sm"
|
||||
className="text-xs text-primary p-0 h-auto font-semibold group/btn"
|
||||
>
|
||||
View Details
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="p-8">
|
||||
{/* Meta */}
|
||||
<div className="flex items-center gap-4 text-sm text-muted-foreground mb-4">
|
||||
<span>{project.client}</span>
|
||||
<span className="w-1 h-1 rounded-full bg-muted-foreground" />
|
||||
<span>{project.year}</span>
|
||||
</div>
|
||||
|
||||
{/* Title */}
|
||||
<h3 className="text-2xl font-bold mb-4 group-hover:text-primary transition-colors">
|
||||
{project.title}
|
||||
</h3>
|
||||
|
||||
{/* Description */}
|
||||
<p className="text-muted-foreground mb-6 leading-relaxed">
|
||||
{project.description}
|
||||
</p>
|
||||
|
||||
{/* Technologies */}
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{project?.technologies.map((tech) => (
|
||||
<span
|
||||
key={tech}
|
||||
className="px-3 py-1 rounded-full bg-muted text-muted-foreground text-xs font-medium"
|
||||
>
|
||||
{tech}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</motion.article>
|
||||
))}
|
||||
</motion.div>
|
||||
</AnimatePresence>
|
||||
</motion.article>
|
||||
))}
|
||||
</motion.div>
|
||||
</AnimatePresence>
|
||||
)}
|
||||
|
||||
{/* Empty State */}
|
||||
{filteredProjects?.length === 0 && (
|
||||
{!isLoading && !isError && filteredProjects.length === 0 && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="text-center py-20"
|
||||
>
|
||||
<p className="text-muted-foreground text-lg">
|
||||
No projects found in this category.
|
||||
No projects match your current search or category.
|
||||
</p>
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user