fix all pages
This commit is contained in:
sanjidaRimi023
@@ -1,43 +1,43 @@
|
||||
import { useRef } from 'react';
|
||||
import { motion, useInView } from 'framer-motion';
|
||||
import { ArrowRight, ExternalLink } from 'lucide-react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { useProjects } from '@/hooks/queires/useProjects';
|
||||
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { useProjects } from "@/hooks/queires/useProjects";
|
||||
import { motion, useInView } from "framer-motion";
|
||||
import { ArrowRight, ExternalLink } from "lucide-react";
|
||||
import { useRef, useState } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
const gradientColors = [
|
||||
"from-neon-blue/80",
|
||||
"from-neon-purple/80",
|
||||
"from-neon-green/80",
|
||||
"from-neon-pink/80"
|
||||
"from-neon-blue/90",
|
||||
"from-neon-purple/90",
|
||||
"from-neon-green/90",
|
||||
"from-neon-pink/90",
|
||||
];
|
||||
|
||||
export default function ProjectsSection() {
|
||||
|
||||
const { data: projectsData } = useProjects({
|
||||
fields: "category, title, image",
|
||||
limit: 6
|
||||
fields: "category, title, image, liveUrl",
|
||||
limit: 6,
|
||||
});
|
||||
|
||||
|
||||
const projects = projectsData?.data.data.result;
|
||||
|
||||
|
||||
|
||||
const projects = projectsData?.data.data.result || [];
|
||||
|
||||
const ref = useRef<HTMLElement>(null);
|
||||
const isInView = useInView(ref, { once: true, margin: '-100px' });
|
||||
const isInView = useInView(ref, { once: true, margin: "-100px" });
|
||||
|
||||
return (
|
||||
<section id="projects" ref={ref} className="py-24 relative overflow-hidden bg-secondary/30">
|
||||
{/* Background pattern */}
|
||||
<section
|
||||
id="projects"
|
||||
ref={ref}
|
||||
className="py-24 relative overflow-hidden bg-secondary/30"
|
||||
>
|
||||
{/* Background Pattern */}
|
||||
<div className="absolute inset-0 opacity-5">
|
||||
<div className="absolute inset-0" style={{
|
||||
backgroundImage: `radial-gradient(circle at 1px 1px, currentColor 1px, transparent 0)`,
|
||||
backgroundSize: '40px 40px',
|
||||
}} />
|
||||
<div
|
||||
className="absolute inset-0"
|
||||
style={{
|
||||
backgroundImage: `radial-gradient(circle at 1px 1px, currentColor 1px, transparent 0)`,
|
||||
backgroundSize: "40px 40px",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="container mx-auto px-4 relative z-10">
|
||||
@@ -45,84 +45,52 @@ export default function ProjectsSection() {
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ duration: 0.6 }}
|
||||
className="text-center mb-16"
|
||||
transition={{ duration: 0.7 }}
|
||||
className="text-center mb-20"
|
||||
>
|
||||
<span className="inline-block px-4 py-1.5 rounded-full glass text-sm font-medium text-primary mb-4">
|
||||
Our Portfolio
|
||||
<span className="inline-block px-5 py-2 rounded-full glass text-sm font-medium text-primary mb-4 tracking-widest">
|
||||
OUR PORTFOLIO
|
||||
</span>
|
||||
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold mb-4">
|
||||
Our <span className="text-primary neon-text-glow">Projects</span>
|
||||
<h2 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-6">
|
||||
Featured{" "}
|
||||
<span className="text-primary neon-text-glow">Projects</span>
|
||||
</h2>
|
||||
<p className="text-muted-foreground max-w-2xl mx-auto text-lg">
|
||||
Explore our latest work and see how we've helped businesses
|
||||
transform their digital presence.
|
||||
Crafted with passion. Delivered with excellence.
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
{/* Projects Grid */}
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
|
||||
{projects?.map((project, index) => {
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 mb-16">
|
||||
{projects.map((project, index) => {
|
||||
const color = gradientColors[index % gradientColors.length];
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
<ProjectCard
|
||||
key={project._id}
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ duration: 0.5, delay: index * 0.1 }}
|
||||
whileHover={{ y: -8 }}
|
||||
className="group relative rounded-2xl overflow-hidden cursor-pointer"
|
||||
>
|
||||
{/* Image */}
|
||||
<div className="aspect-[4/3] overflow-hidden">
|
||||
<img
|
||||
src={project.image}
|
||||
alt={project.title}
|
||||
className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Overlay */}
|
||||
<div
|
||||
className={`absolute inset-0 bg-gradient-to-t ${color} to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300`}
|
||||
/>
|
||||
|
||||
{/* Content */}
|
||||
<div className="absolute inset-0 flex flex-col justify-end p-6">
|
||||
<div className="transform translate-y-4 opacity-0 group-hover:translate-y-0 group-hover:opacity-100 transition-all duration-300">
|
||||
<span className="inline-block px-3 py-1 rounded-full bg-background/20 backdrop-blur-sm text-white text-xs font-medium mb-2">
|
||||
{project.category}
|
||||
</span>
|
||||
<h3 className="text-xl font-bold text-white mb-2">{project.title}</h3>
|
||||
<div className="flex items-center gap-2 text-white/80 text-sm">
|
||||
<span>View Project</span>
|
||||
<ExternalLink className="w-4 h-4" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Border glow effect */}
|
||||
<div className="absolute inset-0 rounded-2xl border-2 border-transparent group-hover:border-primary/50 group-hover:neon-glow transition-all duration-300 pointer-events-none" />
|
||||
</motion.div>
|
||||
project={project}
|
||||
color={color}
|
||||
index={index}
|
||||
isInView={isInView}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* See All Button */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||||
transition={{ duration: 0.6, delay: 0.5 }}
|
||||
className="text-center"
|
||||
transition={{ duration: 0.7, delay: 0.3 }}
|
||||
className="flex justify-center"
|
||||
>
|
||||
<Link to="/projects">
|
||||
<Button
|
||||
size="lg"
|
||||
className="bg-primary text-primary-foreground font-semibold px-8 py-6 text-lg rounded-full neon-glow hover:neon-glow-strong transition-all group"
|
||||
className="bg-primary hover:bg-primary/90 text-primary-foreground font-semibold px-10 py-7 text-lg rounded-full neon-glow hover:neon-glow-strong transition-all group flex items-center gap-3"
|
||||
>
|
||||
See All Projects
|
||||
<ArrowRight className="ml-2 w-5 h-5 group-hover:translate-x-1 transition-transform" />
|
||||
Explore All Projects
|
||||
<ArrowRight className="w-6 h-6 group-hover:translate-x-1 transition-transform" />
|
||||
</Button>
|
||||
</Link>
|
||||
</motion.div>
|
||||
@@ -130,3 +98,99 @@ export default function ProjectsSection() {
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function ProjectCard({ project, color, index, isInView }) {
|
||||
const [mousePosition, setMousePosition] = useState({ x: 50, y: 50 });
|
||||
const [isHovered, setIsHovered] = useState(false);
|
||||
|
||||
const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
|
||||
const rect = e.currentTarget.getBoundingClientRect();
|
||||
const x = ((e.clientX - rect.left) / rect.width) * 100;
|
||||
const y = ((e.clientY - rect.top) / rect.height) * 100;
|
||||
setMousePosition({ x, y });
|
||||
};
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 60, rotateX: 15 }}
|
||||
animate={isInView ? { opacity: 1, y: 0, rotateX: 0 } : {}}
|
||||
transition={{ duration: 0.6, delay: index * 0.08 }}
|
||||
whileHover={{ scale: 1.02 }}
|
||||
className="group relative rounded-3xl overflow-hidden cursor-pointer h-full"
|
||||
onMouseMove={handleMouseMove}
|
||||
onMouseEnter={() => setIsHovered(true)}
|
||||
onMouseLeave={() => {
|
||||
setIsHovered(false);
|
||||
setMousePosition({ x: 50, y: 50 });
|
||||
}}
|
||||
>
|
||||
{/* Main Card Container with 3D Tilt */}
|
||||
<div
|
||||
className="relative h-full rounded-3xl overflow-hidden shadow-2xl transition-transform duration-300"
|
||||
style={{
|
||||
transform: isHovered
|
||||
? `perspective(1000px) rotateX(${(50 - mousePosition.y) * 0.12}deg) rotateY(${(mousePosition.x - 50) * 0.15}deg)`
|
||||
: "perspective(1000px) rotateX(0deg) rotateY(0deg)",
|
||||
transition: isHovered
|
||||
? "transform 0.1s ease-out"
|
||||
: "transform 0.4s ease-out",
|
||||
}}
|
||||
>
|
||||
{/* Image Container */}
|
||||
<div className="aspect-[16/13] overflow-hidden relative">
|
||||
<img
|
||||
src={project.image}
|
||||
alt={project.title}
|
||||
className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
|
||||
/>
|
||||
|
||||
{/* Dynamic Shine Overlay */}
|
||||
<div
|
||||
className="absolute inset-0 opacity-0 group-hover:opacity-30 transition-opacity duration-300 pointer-events-none"
|
||||
style={{
|
||||
background: `radial-gradient(circle at ${mousePosition.x}% ${mousePosition.y}%, rgba(255,255,255,0.8) 0%, transparent 60%)`,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Gradient Overlay */}
|
||||
<div
|
||||
className={`absolute inset-0 bg-gradient-to-t ${color} via-black/40 to-transparent opacity-60 group-hover:opacity-90 transition-all duration-500`}
|
||||
/>
|
||||
|
||||
{/* Content */}
|
||||
<div className="absolute inset-0 flex flex-col justify-end p-8">
|
||||
<div className="space-y-4 transform transition-all duration-500 group-hover:translate-y-0">
|
||||
{/* Category */}
|
||||
<motion.span
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={
|
||||
isHovered ? { opacity: 1, y: 0 } : { opacity: 0.7, y: 10 }
|
||||
}
|
||||
className="inline-block px-4 py-1.5 rounded-full bg-white/10 backdrop-blur-md text-white text-xs font-medium border border-white/20"
|
||||
>
|
||||
{project.category}
|
||||
</motion.span>
|
||||
|
||||
{/* Title */}
|
||||
<h3 className="text-2xl md:text-3xl font-bold text-white leading-tight tracking-tight">
|
||||
{project.title}
|
||||
</h3>
|
||||
|
||||
{/* View Project Link */}
|
||||
<Link
|
||||
to={project.liveUrl}
|
||||
className="flex items-center gap-3 text-white/80 group-hover:text-white transition-colors"
|
||||
>
|
||||
<span className="font-medium text-sm tracking-wider">live</span>
|
||||
<ExternalLink className="w-5 h-5 transition-transform group-hover:rotate-45" />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Neon Border Glow */}
|
||||
<div className="absolute inset-0 rounded-3xl border-2 border-transparent group-hover:border-primary/60 transition-all duration-500 pointer-events-none neon-glow" />
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user