From 9c98052638943ad5b14ce1413aabb2de42767ace Mon Sep 17 00:00:00 2001 From: sanjidaRimi023 Date: Fri, 1 May 2026 22:19:05 +0600 Subject: [PATCH 1/3] feat:added project details page with prod. api --- src/App.tsx | 2 +- src/components/ProjectCard.tsx | 102 +++++ src/components/ProjectsSection.tsx | 101 +---- src/pages/ProjectDetails.tsx | 618 ++++++++++++++++------------- 4 files changed, 448 insertions(+), 375 deletions(-) create mode 100644 src/components/ProjectCard.tsx diff --git a/src/App.tsx b/src/App.tsx index c08e028..85a4320 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -23,7 +23,7 @@ function AnimatedRoutes() { } /> } /> - } /> + } /> {/* } /> } /> */} {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */} diff --git a/src/components/ProjectCard.tsx b/src/components/ProjectCard.tsx new file mode 100644 index 0000000..75dfd4a --- /dev/null +++ b/src/components/ProjectCard.tsx @@ -0,0 +1,102 @@ +import { motion } from "framer-motion"; +import { ExternalLink } from "lucide-react"; +import { useState } from "react"; +import { Link } from "react-router-dom"; + +export function ProjectCard({ project, color, index, isInView }) { + const [mousePosition, setMousePosition] = useState({ x: 50, y: 50 }); + const [isHovered, setIsHovered] = useState(false); + + const handleMouseMove = (e: React.MouseEvent) => { + 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 ( + + setIsHovered(true)} + onMouseLeave={() => { + setIsHovered(false); + setMousePosition({ x: 50, y: 50 }); + }} + > + {/* Main Card Container with 3D Tilt */} +
+ {/* Image Container */} +
+ {project.title} + + {/* Dynamic Shine Overlay */} +
+
+ + {/* Gradient Overlay */} +
+ + {/* Content */} +
+
+ {/* Category */} + + {project.category} + + + {/* Title */} +

+ {project.title} +

+ + {/* View Project Link */} + + live + + +
+
+ + {/* Neon Border Glow */} +
+
+ + + ); +} \ No newline at end of file diff --git a/src/components/ProjectsSection.tsx b/src/components/ProjectsSection.tsx index 5b1ce67..381eed3 100644 --- a/src/components/ProjectsSection.tsx +++ b/src/components/ProjectsSection.tsx @@ -1,9 +1,10 @@ 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 { ArrowRight } from "lucide-react"; +import { useRef } from "react"; import { Link } from "react-router-dom"; +import { ProjectCard } from "./ProjectCard"; const gradientColors = [ "from-neon-blue/90", @@ -98,99 +99,3 @@ export default function ProjectsSection() { ); } - -function ProjectCard({ project, color, index, isInView }) { - const [mousePosition, setMousePosition] = useState({ x: 50, y: 50 }); - const [isHovered, setIsHovered] = useState(false); - - const handleMouseMove = (e: React.MouseEvent) => { - 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 ( - setIsHovered(true)} - onMouseLeave={() => { - setIsHovered(false); - setMousePosition({ x: 50, y: 50 }); - }} - > - {/* Main Card Container with 3D Tilt */} -
- {/* Image Container */} -
- {project.title} - - {/* Dynamic Shine Overlay */} -
-
- - {/* Gradient Overlay */} -
- - {/* Content */} -
-
- {/* Category */} - - {project.category} - - - {/* Title */} -

- {project.title} -

- - {/* View Project Link */} - - live - - -
-
- - {/* Neon Border Glow */} -
-
- - ); -} diff --git a/src/pages/ProjectDetails.tsx b/src/pages/ProjectDetails.tsx index c6fe2d3..9f52362 100644 --- a/src/pages/ProjectDetails.tsx +++ b/src/pages/ProjectDetails.tsx @@ -1,366 +1,432 @@ -import { useParams, Link, useNavigate } from 'react-router-dom'; -import { motion } from 'framer-motion'; -import { ArrowLeft, ExternalLink, Github, Calendar, Clock, Users, ChevronRight } from 'lucide-react'; -import { Button } from '@/components/ui/button'; -import ReactMarkdown from 'react-markdown'; -import remarkGfm from 'remark-gfm'; -import Navbar from '@/components/Navbar'; -import Footer from '@/components/Footer'; -import PageTransition from '@/components/PageTransition'; -import { getProjectBySlug, getRelatedProjects } from '@/data/projectData'; +import Footer from "@/components/Footer"; +import Navbar from "@/components/Navbar"; +import PageTransition from "@/components/PageTransition"; +import { Button } from "@/components/ui/button"; +import { useProjectById } from "@/hooks/queires/useProjects"; +import { motion } from "framer-motion"; +import { + Calendar, + ChevronRight, + Clock, + ExternalLink, + Github, + Users, +} from "lucide-react"; +import ReactMarkdown from "react-markdown"; +import { Link, useNavigate, useParams } from "react-router-dom"; +import remarkGfm from "remark-gfm"; + +interface Result { + label: string; + value: string | number; +} + +interface ProjectData { + id: string; + category: string; + title: string; + description: string; + year: string | number; + duration: string; + team: string | number; + client: string; + liveUrl: string; + codeUrl?: string; + image: string; + results?: Result[]; + fullDescription: string; + features?: string[]; + technologies?: string[]; + challenges?: string[]; + gallery?: string[]; +} + +const CATEGORY_LABELS: Record = { + web: "Web Development", + mobile: "Mobile App", + ai: "AI & Machine Learning", + cloud: "Cloud Solutions", +}; export default function ProjectDetails() { - const { slug } = useParams<{ slug: string }>(); + const { id } = useParams<{ id: string }>(); const navigate = useNavigate(); - const project = getProjectBySlug(slug || ''); + const { data, isLoading, isError } = useProjectById(id || ""); - if (!project) { + const project: ProjectData | null = + data?.data?.data || data?.data || data || null; + + if (isLoading) { return (
-
-

Project Not Found

-

The project you're looking for doesn't exist.

- +
+
+ + Loading project details... +
); } - const relatedProjects = getRelatedProjects(project); - const categoryLabels: Record = { - web: 'Web Development', - mobile: 'Mobile App', - ai: 'AI & Machine Learning', - cloud: 'Cloud Solutions', - }; + if (isError || !project) { + return ( + +
+
+

+ Project Not Found +

+

+ The project you're looking for does not exist or could not be + loaded. +

+ +
+
+ + ); + } return ( -
+
- {/* Hero */} -
-
-
-
+ {/* Hero Section */} +
+ {/* Ambient Background Glows */} +
+
+
-
- {/* Breadcrumb */} - + {/* Breadcrumb Navigation */} + - Home - - Projects - - {project.title} - + + Home + + + + Projects + + + + {project.title} + +
- {/* Content */} -
+ {/* Content Block */} +
- {categoryLabels[project.category]} + {CATEGORY_LABELS[project.category] || project.category} {project.title} {project.description} - {/* Meta */} + {/* Project Metadata */} -
- -

Year

-

{project.year}

-
-
- -

Duration

-

{project.duration}

-
-
- -

Team

-

{project.team}

-
-
-

Client

-

{project.client}

-
+ {[ + { label: "Year", value: project.year, icon: Calendar }, + { label: "Duration", value: project.duration, icon: Clock }, + { label: "Team Size", value: project.team, icon: Users }, + { label: "Client", value: project.client }, + ].map((item, idx) => ( +
+ {item.icon ? ( + + ) : ( +
+ )} + + {item.label} + + + {item.value} + +
+ ))} - {/* Actions */} + {/* Call to Actions */} - - + + + + {project.codeUrl && ( + + + + )}
- {/* Image */} + {/* Project Cover Visual */} {project.title} +
- {/* Results */} -
-
- -

Key Results

- - -
- {project.results.map((result, index) => ( - -

- {result.value} -

-

{result.label}

- - ))} -
-
-
- - {/* Details */} -
-
-
- {/* Full Description */} + {/* Key Results Section */} + {project.results && project.results.length > 0 && ( +
+
-

About the Project

-
+

+ Key Performance Outcomes +

+

+ Measurable impact and business value generated by this + project. +

+ + +
+ {project.results.map((result, index) => ( + + + {result.value} + + + {result.label} + + + ))} +
+
+
+ )} + + {/* Main Details Section */} +
+
+
+ {/* Main Text Content */} +
+

+ About the Project +

+

{children}

, - strong: ({ children }) => {children}, - ul: ({ children }) =>
    {children}
, - li: ({ children }) =>
  • {children}
    • , + p: ({ children }) => ( +

    + {children} +

    + ), + strong: ({ children }) => ( + + {children} + + ), + ul: ({ children }) => ( +
      + {children} +
    + ), + li: ({ children }) => ( +
  • {children}
    • + ), }} > {project.fullDescription}
    - +
    - {/* Features & Tech */} -
    - -

    Key Features

    -
      - {project.features.map((feature, index) => ( -
    • - - {feature} -
      • - ))} -
    -     - - -

    Technologies Used

    -
    - {project.technologies.map((tech) => ( - - {tech} - - ))} + {/* Sidebar Capabilities */} +
    + {/* Features */} + {project.features && project.features.length > 0 && ( +
    +

    + Key Capabilities +

    +
      + {project.features.map((feature, index) => ( +
    • + + + {feature} + +
      • + ))} +
    - + )} - -

    Challenges Solved

    -
      - {project.challenges.map((challenge, index) => ( -
    • - - {challenge} -
      • - ))} -
    -     + {/* Technologies Used */} + {project.technologies && project.technologies.length > 0 && ( +
    +

    + Technologies Used +

    +
    + {project.technologies.map((tech) => ( + + {tech} + + ))} +
    +
    + )} + + {/* Challenges Solved */} + {project.challenges && project.challenges.length > 0 && ( +
    +

    + Challenges Solved +

    +
      + {project.challenges.map((challenge, index) => ( +
    • + + + {challenge} + +
      • + ))} +
    +
    + )}
    - {/* Gallery */} -
    -
    - -

    Project Gallery

    -     + {/* Gallery Section */} + {project.gallery && project.gallery.length > 0 && ( +
    +
    +
    +

    + Project Gallery +

    +

    + A visual overview of the implementation and user interface. +

    +
    -
    - {project.gallery.map((image, index) => ( - - {`${project.title} - - ))} -
    -
    -
    - - {/* Related Projects */} - {relatedProjects.length > 0 && ( -
    -
    - -

    Related Projects

    -     - -
    - {relatedProjects.map((relatedProject, index) => ( - + {project.gallery.map((image, index) => ( + - -
    - {relatedProject.title} -
    -
    -

    - {relatedProject.title} -

    -

    - {relatedProject.description} -

    -
    - -     + {`${project.title} +
    + ))}
    - - - - - -
    )} From f01b48b35f3732935c63b42f0bee70cd8887ec49 Mon Sep 17 00:00:00 2001 From: sanjidaRimi023 Date: Fri, 1 May 2026 22:55:38 +0600 Subject: [PATCH 2/3] refector:redesign faq section --- src/components/FAQSection.tsx | 213 +++++++++++++++++++--------------- 1 file changed, 121 insertions(+), 92 deletions(-) diff --git a/src/components/FAQSection.tsx b/src/components/FAQSection.tsx index 716526d..7fb60cf 100644 --- a/src/components/FAQSection.tsx +++ b/src/components/FAQSection.tsx @@ -4,135 +4,164 @@ import { AccordionItem, AccordionTrigger, } from "@/components/ui/accordion"; -import { motion, useInView } from "framer-motion"; -import { ArrowRight, Mail } from "lucide-react"; -import { useRef } from "react"; +import { motion, useInView, useScroll, useSpring } from "framer-motion"; +import { ArrowUpRight, Sparkles,ShieldQuestion } from "lucide-react"; +import { useRef, useState } from "react"; const faqs = [ { question: "What services does TechZaa offer?", answer: - "We provide comprehensive technology solutions including web development, mobile app development, AI/ML solutions, and cloud infrastructure services. Our team specializes in creating custom software tailored to your business needs.", + "We provide comprehensive technology solutions including web development, mobile app development, AI/ML solutions, and cloud infrastructure services.", + category: "Services", }, { question: "How long does a typical project take?", answer: - "Project timelines vary based on complexity and scope. A simple website might take 4-6 weeks, while complex enterprise applications can take 3-6 months. We provide detailed timelines during our initial consultation and keep you updated throughout the development process.", + "Timelines vary: simple sites take 4-6 weeks, while enterprise apps take 3-6 months. We prioritize agile delivery and constant feedback.", + category: "Process", }, { question: "What is your development process?", answer: - "We follow an agile methodology with iterative development cycles. Our process includes: Discovery & Planning, UI/UX Design, Development Sprints, Quality Assurance, Deployment, and Ongoing Support. We maintain transparent communication with regular updates and demos.", + "We follow an agile methodology: Discovery, UI/UX Design, Development Sprints, QA, Deployment, and 24/7 Ongoing Support.", + category: "Workflow", }, { - question: "Do you provide ongoing maintenance and support?", + question: "Do you provide maintenance?", answer: - "Yes! We offer comprehensive maintenance packages that include bug fixes, security updates, performance optimization, and feature enhancements. Our support team is available to ensure your application runs smoothly 24/7.", + "Yes. Our maintenance packages include security updates, performance optimization, and feature enhancements to keep you ahead.", + category: "Support", }, { question: "How do you handle project pricing?", answer: - "We offer flexible pricing models including fixed-price projects, time & materials, and dedicated team arrangements. After understanding your requirements, we provide transparent quotes with no hidden costs. Contact us for a free consultation and estimate.", - }, - { - question: "What industries do you serve?", - answer: - "We've delivered successful projects across fintech, healthcare, e-commerce, education, real estate, and SaaS industries. Our diverse experience allows us to bring cross-industry insights and best practices to every project.", + "Flexible models: fixed-price, time & materials, or dedicated teams. We ensure 100% transparency with no hidden costs.", + category: "Billing", }, ]; export default function FAQSection() { - const ref = useRef(null); - const isInView = useInView(ref, { once: true, margin: "-100px" }); + const [activeItem, setActiveItem] = useState(undefined); + const containerRef = useRef(null); + const isInView = useInView(containerRef, { once: true, amount: 0.2 }); + + // Progress bar for reading engagement + const { scrollYProgress } = useScroll({ + target: containerRef, + offset: ["start end", "end start"], + }); + const scaleX = useSpring(scrollYProgress, { stiffness: 100, damping: 30 }); return (
    - {/* Decorative gradients */} -
    -
    + {/* Dynamic Background Elements */} +
    +
    +
    +
    -
    -
    - {/* Left Column - Header and CTA */} - -
    - +
    +
    +
    +
    +
    + +
    + Got Questions? -

    - Frequently Asked
    - Questions -

    -

    - Everything you need to know about working with TechZaa. Can't - find what you're looking for? Reach out to our team. -

    - {/* Support CTA Card */} -
    -
    -
    - -
    -
    -

    - Still have questions? -

    -

    - We're here to help you out with any queries. -

    -
    -
    - - Contact Support - - -
    - +

    + Clear Answers
    + + For Big Ideas. + +

    - {/* Right Column - Accordion */} - + We believe in radical transparency. If you don't find your answer + here, our engineers are just a click away. +

    +
    + + {/* Bottom Section: Interactive Accordion */} + - - {faqs.map((faq, index) => ( - ( + + - - - {faq.question} - - + +
    + +
    + + {faq.category} + + + {faq.question} + +
    +
    +     + +
    {faq.answer} - - - - ))} - - +
    + +
    +
    +     +     +     + ))} +     + + {/* Bottom Indicator */} +
    From b50725ae2ec57b8e86c8885d0d0490b594f646a5 Mon Sep 17 00:00:00 2001 From: sanjidaRimi023 Date: Fri, 1 May 2026 23:10:53 +0600 Subject: [PATCH 3/3] refector:change faq card color --- src/components/FAQSection.tsx | 46 ++++++++++++----------------------- 1 file changed, 15 insertions(+), 31 deletions(-) diff --git a/src/components/FAQSection.tsx b/src/components/FAQSection.tsx index 7fb60cf..3eb5df0 100644 --- a/src/components/FAQSection.tsx +++ b/src/components/FAQSection.tsx @@ -5,7 +5,7 @@ import { AccordionTrigger, } from "@/components/ui/accordion"; import { motion, useInView, useScroll, useSpring } from "framer-motion"; -import { ArrowUpRight, Sparkles,ShieldQuestion } from "lucide-react"; +import { ArrowUpRight, ShieldQuestion, Sparkles } from "lucide-react"; import { useRef, useState } from "react"; const faqs = [ @@ -56,36 +56,30 @@ export default function FAQSection() { return (
    - {/* Dynamic Background Elements */} -
    -
    -
    -
    - -
    -
    -
    +
    +
    +
    - + Got Questions?
    -

    - Clear Answers
    - +

    + Clear Answers {" "} + For Big Ideas.

    -

    - We believe in radical transparency. If you don't find your answer - here, our engineers are just a click away. +

    + Everything you need to know about working with TechZaa. Can't find + what you're looking for? Reach out to our team.

    @@ -109,8 +103,8 @@ export default function FAQSection() { group border-none rounded-3xl transition-all duration-500 px-2 ${ activeItem === `item-${index}` - ? "bg-white dark:bg-zinc-900 shadow-[0_20px_50px_rgba(0,0,0,0.05)] scale-[1.01]" - : "bg-zinc-100/50 dark:bg-zinc-900/30 hover:bg-zinc-200/50 dark:hover:bg-zinc-800/50" + ? "bg-primary/20 shadow-[0_20px_50px_rgba(0,0,0,0.05)] scale-[1.01]" + : "bg-accent" } `} > @@ -145,23 +139,13 @@ export default function FAQSection() {
    {faq.answer} -
    - -
    +
    ))} - - {/* Bottom Indicator */} -