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/FAQSection.tsx b/src/components/FAQSection.tsx index 716526d..3eb5df0 100644 --- a/src/components/FAQSection.tsx +++ b/src/components/FAQSection.tsx @@ -4,135 +4,148 @@ 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, ShieldQuestion, Sparkles } 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 */} -
-
- -
-
- {/* 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 */} - + Everything you need to know about working with TechZaa. Can't find + what you're looking for? Reach out to our team. +

+
+ + {/* Bottom Section: Interactive Accordion */} + - - {faqs.map((faq, index) => ( - ( + + - - - {faq.question} - - + +
+ +
+ + {faq.category} + + + {faq.question} + +
+
+ + +
{faq.answer} - - - - ))} - - + +
+ + + + ))} +
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 0720b41..8956028 100644 --- a/src/pages/ProjectDetails.tsx +++ b/src/pages/ProjectDetails.tsx @@ -1,6 +1,8 @@ +import Footer from "@/components/Footer"; +import Navbar from "@/components/Navbar"; import PageTransition from "@/components/PageTransition"; import { Button } from "@/components/ui/button"; -import { getProjectBySlug, getRelatedProjects } from "@/data/projectData"; +import { useProjectById } from "@/hooks/queires/useProjects"; import { motion } from "framer-motion"; import { Calendar, @@ -14,21 +16,77 @@ import ReactMarkdown from "react-markdown"; import { Link, useNavigate, useParams } from "react-router-dom"; import remarkGfm from "remark-gfm"; -export default function ProjectDetails() { - const { slug } = useParams<{ slug: string }>(); - const navigate = useNavigate(); - const project = getProjectBySlug(slug || ""); +interface Result { + label: string; + value: string | number; +} - if (!project) { +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 { id } = useParams<{ id: string }>(); + const navigate = useNavigate(); + const { data, isLoading, isError } = useProjectById(id || ""); + + 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... + +
+
+ + ); + } + + if (isError || !project) { + return ( + +
+
+

+ Project Not Found +

+

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

-
@@ -37,203 +95,229 @@ export default function ProjectDetails() { ); } - const relatedProjects = getRelatedProjects(project); - const categoryLabels: Record = { - web: "Web Development", - mobile: "Mobile App", - ai: "AI & Machine Learning", - cloud: "Cloud Solutions", - }; - return ( -
- {/* Hero */} -
-
-
-
+
+ + + {/* Hero Section */} +
+ {/* Ambient Background Glows */} +
+
+
-
- {/* Breadcrumb */} - + {/* Breadcrumb Navigation */} + Home - + Projects - - {project.title} - + + + {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}
    ), @@ -245,160 +329,104 @@ export default function ProjectDetails() { {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} +
+ ))}
- - - - - -
)}