fixed folder stucture

2026-05-14 20:21:03 +06:00
parent 03b249a14a
commit 5249561a54
25 changed files with 84 additions and 29 deletions
@@ -0,0 +1,99 @@
+import { Button } from "@/components/ui/button";
+import { useProjects } from "@/hooks/queires/useProjects";
+import { motion, useInView } from "framer-motion";
+import { ArrowRight } from "lucide-react";
+import { useRef } from "react";
+import { Link } from "react-router-dom";
+import { ProjectCard } from "./ProjectCard";
+import PremiumBadge from "../shared/PremiumBadge";
+
+const gradientColors = [
+  "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, liveUrl",
+    limit: 6,
+  });
+
+  const projects = projectsData?.data.data.result || [];
+
+  const ref = useRef<HTMLElement>(null);
+  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 */}
+      <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>
+
+      <div className="container mx-auto px-4 relative z-10">
+        {/* Section Header */}
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={isInView ? { opacity: 1, y: 0 } : {}}
+          transition={{ duration: 0.7 }}
+          className="text-center mb-20"
+        >
+         <PremiumBadge text="our projects"/>
+          <h2 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-6">
+            Featured <span className="text-transparent bg-clip-text bg-gradient-to-r from-primary to-accent-foreground">Projects</span>
+          </h2>
+          <p className="text-muted-foreground max-w-2xl mx-auto text-lg">
+            Crafted with passion. Delivered with excellence.
+          </p>
+        </motion.div>
+
+        {/* Projects Grid */}
+        <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 (
+              <ProjectCard
+                key={project._id}
+                project={project}
+                color={color}
+                index={index}
+                isInView={isInView}
+              />
+            );
+          })}
+        </div>
+
+        {/* See All Button */}
+        <motion.div
+          initial={{ opacity: 0, y: 30 }}
+          animate={isInView ? { opacity: 1, y: 0 } : {}}
+          transition={{ duration: 0.7, delay: 0.3 }}
+          className="flex justify-center"
+        >
+          <Link to="/projects">
+            <Button
+              size="lg"
+              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"
+            >
+              Explore All Projects
+              <ArrowRight className="w-6 h-6 group-hover:translate-x-1 transition-transform" />
+            </Button>
+          </Link>
+        </motion.div>
+      </div>
+    </section>
+  );
+}