fix all pages

src/App.tsx

@@ -24,8 +24,8 @@ function AnimatedRoutes() {
         <Route path="/" element={<Index />} />
         <Route path="/projects" element={<Projects />} />
         <Route path="/projects/:slug" element={<ProjectDetails />} />
-        <Route path="/blog" element={<Blog />} />
+        {/* <Route path="/blog" element={<Blog />} />
-        <Route path="/blog/:id" element={<BlogArticle />} />
+        <Route path="/blog/:id" element={<BlogArticle />} /> */}
         {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
         <Route path="*" element={<NotFound />} />
         <Route path="/privacy" element={<PrivacyPolicy />} />

src/components/AboutSection.tsx

@@ -58,11 +58,6 @@ export default function AboutSection() {
       ref={ref}
       className="py-24 relative overflow-hidden bg-secondary/30"
     >
-      {/* Background decoration */}
-      <div className="absolute inset-0">
-        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-primary/5 rounded-full blur-[200px]" />
-      </div>
-
       <div className="container mx-auto px-4 relative z-10">
         <div className="grid lg:grid-cols-2 gap-16 items-center">
           {/* Content */}
@@ -102,7 +97,7 @@ export default function AboutSection() {
                 (value) => (
                   <span
                     key={value}
-                    className="px-4 py-2 rounded-full glass border border-primary/30 text-sm font-medium hover:border-primary hover:neon-glow transition-all cursor-default"
+                    className="px-4 py-2 rounded-full glass neon-glow text-sm font-medium hover:border-primary border transition-all cursor-default"
                   >
                     {value}
                   </span>
@@ -124,8 +119,7 @@ export default function AboutSection() {
                 initial={{ opacity: 0, y: 20 }}
                 animate={isInView ? { opacity: 1, y: 0 } : {}}
                 transition={{ duration: 0.5, delay: 0.3 + index * 0.1 }}
-                whileHover={{ y: -5, scale: 1.02 }}
+                className="p-6 rounded-2xl bg-primary/5 hover:neon-glow transition-all text-center group"
-                className="p-6 rounded-2xl glass hover:border-primary/50 transition-all text-center group"
               >
                 {/* Icon */}
                 <div className="w-12 h-12 rounded-xl bg-primary/10 flex items-center justify-center mx-auto mb-4 group-hover:neon-glow transition-all">

src/components/ContactSection.tsx

@@ -24,11 +24,24 @@ export default function ContactSection() {
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [isSuccess, setIsSuccess] = useState(false);
 
+  const [mousePositions, setMousePositions] = useState<
+    Record<number, { x: number; y: number }>
+  >({});
+
+  const handleMouseMove = (
+    index: number,
+    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;
+    setMousePositions((prev) => ({ ...prev, [index]: { x, y } }));
+  };
+
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     setIsSubmitting(true);
 
-    // Simulate form submission
     await new Promise((resolve) => setTimeout(resolve, 1500));
 
     setIsSubmitting(false);
@@ -50,11 +63,24 @@ export default function ContactSection() {
   };
 
   return (
-    <section id="contact" ref={ref} className="relative overflow-hidden pb-24">
+    <section id="contact" ref={ref} className="relative overflow-hidden pb-20">
-      {/* Background */}
+      <div className="absolute inset-0 opacity-40 pointer-events-none">
-      <div className="absolute inset-0 opacity-30">
+        <motion.div
-        <div className="absolute bottom-0 left-1/4 w-96 h-96 bg-primary/10 rounded-full blur-[150px]" />
+          animate={{
-        <div className="absolute top-1/4 right-1/4 w-72 h-72 bg-neon-purple/10 rounded-full blur-[120px]" />
+            x: [0, 30, 0],
+            y: [0, -40, 0],
+          }}
+          transition={{ duration: 25, repeat: Infinity, ease: "linear" }}
+          className="absolute bottom-10 left-1/4 w-96 h-96 bg-primary/10 rounded-full blur-[140px]"
+        />
+        <motion.div
+          animate={{
+            x: [0, -50, 0],
+            y: [0, 30, 0],
+          }}
+          transition={{ duration: 30, repeat: Infinity, ease: "linear" }}
+          className="absolute top-20 right-1/4 w-80 h-80 bg-neon-purple/10 rounded-full blur-[130px]"
+        />
       </div>
 
       <div className="container mx-auto px-4 relative z-10">
@@ -62,121 +88,118 @@ export default function ContactSection() {
         <motion.div
           initial={{ opacity: 0, y: 20 }}
           animate={isInView ? { opacity: 1, y: 0 } : {}}
-          transition={{ duration: 0.6 }}
+          transition={{ duration: 0.7 }}
-          className="text-center mb-16"
+          className="text-center mb-20"
         >
-          <span className="inline-block px-4 py-1.5 rounded-full text-sm font-medium text-primary mb-4">
+          <span className="inline-block px-5 py-2 rounded-full glass text-sm font-medium text-primary mb-4 tracking-widest">
-            Let's Connect
+            LET'S CONNECT
           </span>
-          <h2 className="text-3xl md:text-4xl lg:text-5xl font-bold mb-4">
+          <h2 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-6">
             Get In <span className="text-primary neon-text-glow">Touch</span>
           </h2>
           <p className="text-muted-foreground max-w-2xl mx-auto text-lg">
-            Ready to start your next project? We'd love to hear from you. Send
+            Ready to bring your vision to life? Drop us a message.
-            us a message and we'll respond as soon as possible.
           </p>
         </motion.div>
 
         <div className="grid lg:grid-cols-2 gap-12 max-w-6xl mx-auto">
-          {/* Contact Info */}
+          {/* Interactive Contact Info */}
           <motion.div
-            initial={{ opacity: 0, x: -30 }}
+            initial={{ opacity: 0, x: -40 }}
             animate={isInView ? { opacity: 1, x: 0 } : {}}
-            transition={{ duration: 0.6 }}
+            transition={{ duration: 0.7 }}
-            className="space-y-8"
+            className="space-y-6"
           >
-            <div>
+            <div className="mb-8">
-              <h3 className="text-2xl font-bold mb-4">Contact Information</h3>
+              <h3 className="text-3xl font-bold mb-3">Contact Information</h3>
-              <p className="text-muted-foreground">
+              <p className="text-muted-foreground text-lg">
-                Fill out the form and our team will get back to you within 24
+                Our team typically responds within 24 hours.
-                hours.
               </p>
             </div>
 
-            {/* Contact cards */}
+            <div className="space-y-6">
-            <div className="space-y-4">
+              {contactInfo.map((item, index) => {
-              {contactInfo.map((item, index) => (
+                const pos = mousePositions[index] || { x: 50, y: 50 };
+                return (
                   <motion.div
                     key={item.label}
-                  initial={{ opacity: 0, y: 20 }}
+                    initial={{ opacity: 0, y: 30 }}
                     animate={isInView ? { opacity: 1, y: 0 } : {}}
-                  transition={{ duration: 0.5, delay: 0.2 + index * 0.1 }}
+                    transition={{ delay: 0.1 * index }}
-                  whileHover={{ x: 5 }}
+                    onMouseMove={(e) => handleMouseMove(index, e)}
-                  className="flex items-center gap-4 p-4 rounded-xl glass border border-border/50 hover:border-primary/50 transition-all group"
+                    onMouseLeave={() => {
+                      setMousePositions((prev) => ({
+                        ...prev,
+                        [index]: { x: 50, y: 50 },
+                      }));
+                    }}
+                    whileHover={{ scale: 1.02 }}
+                    className="group relative rounded-xl overflow-hidden cursor-pointer h-full"
                   >
-                  <div className="w-12 h-12 rounded-xl bg-primary/10 flex items-center justify-center group-hover:neon-glow transition-all">
+                    <div
-                    <item.icon className="w-5 h-5 text-primary" />
+                      className="relative p-4 rounded-xl border transition-all duration-300"
+                      style={{
+                        transform: `perspective(800px) rotateX(${(50 - pos.y) * 0.08}deg) rotateY(${(pos.x - 50) * 0.1}deg)`,
+                      }}
+                    >
+                      <div className="flex items-start gap-6">
+                        <div className="w-16 h-16 rounded-2xl bg-primary/10 flex items-center justify-center group-hover:bg-primary/20 transition-all group-hover:neon-glow">
+                          <item.icon className="w-7 h-7 text-primary" />
                         </div>
-                  <div>
+                        <div className="pt-1">
-                    <p className="text-sm text-muted-foreground">
+                          <p className="text-sm text-muted-foreground mb-1">
                             {item.label}
                           </p>
-                    <p className="font-medium">{item.value}</p>
+                          <p className="text-xl font-medium group-hover:text-primary transition-colors">
+                            {item.value}
+                          </p>
+                        </div>
+                      </div>
                     </div>
                   </motion.div>
-              ))}
+                );
+              })}
             </div>
           </motion.div>
 
-          {/* Contact Form */}
+          {/* Interactive Contact Form */}
           <motion.div
-            initial={{ opacity: 0, x: 30 }}
+            initial={{ opacity: 0, x: 40 }}
             animate={isInView ? { opacity: 1, x: 0 } : {}}
-            transition={{ duration: 0.6, delay: 0.2 }}
+            transition={{ duration: 0.7, delay: 0.1 }}
-            className="relative"
           >
-            <div className="p-8 rounded-3xl glass border border-border/50 relative overflow-hidden">
+            <div className="p-10 rounded-3xl border backdrop-blur-2xl relative overflow-hidden">
-              {/* Decorative gradient */}
+              {/* Subtle moving gradient */}
-              <div className="absolute -top-20 -right-20 w-40 h-40 rounded-full gradient-primary opacity-20 blur-3xl" />
+              <div className="absolute -top-32 -right-32 w-64 h-64 bg-primary/10 rounded-full blur-3xl" />
 
               {isSuccess ? (
                 <motion.div
-                  initial={{ opacity: 0, scale: 0.8 }}
+                  initial={{ opacity: 0, scale: 0.9 }}
                   animate={{ opacity: 1, scale: 1 }}
-                  className="text-center py-12"
+                  className="text-center py-16"
                 >
-                  <motion.div
+                  <CheckCircle className="w-24 h-24 text-primary mx-auto mb-6 neon-text-glow" />
-                    initial={{ scale: 0 }}
+                  <h3 className="text-3xl font-bold mb-3">
-                    animate={{ scale: 1 }}
+                    Message Sent Successfully!
-                    transition={{
+                  </h3>
-                      type: "spring",
+                  <p className="text-muted-foreground text-lg">
-                      damping: 15,
+                    Thank you! We'll get back to you very soon.
-                      stiffness: 300,
-                      delay: 0.2,
-                    }}
-                  >
-                    <CheckCircle className="w-20 h-20 text-primary mx-auto mb-4 neon-text-glow" />
-                  </motion.div>
-                  <h3 className="text-2xl font-bold mb-2">Message Sent!</h3>
-                  <p className="text-muted-foreground">
-                    Thank you for reaching out. We'll get back to you soon.
                   </p>
                 </motion.div>
               ) : (
                 <form
                   onSubmit={handleSubmit}
-                  className="space-y-5 relative z-10"
+                  className="space-y-6 relative z-10"
-                >
-                  <div className="grid sm:grid-cols-2 gap-5">
-                    <motion.div
-                      initial={{ opacity: 0, y: 10 }}
-                      animate={isInView ? { opacity: 1, y: 0 } : {}}
-                      transition={{ delay: 0.3 }}
                 >
+                  <div className="grid sm:grid-cols-2 gap-6">
                     <Input
                       name="name"
                       placeholder="Your Name"
                       value={formData.name}
                       onChange={handleChange}
                       required
-                        className="glass border-border/50 focus:border-primary focus:neon-glow transition-all h-12"
+                      className="h-14  focus:border-primary focus:ring-2 focus:ring-primary/30 transition-all text-base"
                     />
-                    </motion.div>
-                    <motion.div
-                      initial={{ opacity: 0, y: 10 }}
-                      animate={isInView ? { opacity: 1, y: 0 } : {}}
-                      transition={{ delay: 0.35 }}
-                    >
                     <Input
                       name="email"
                       type="email"
@@ -184,70 +207,46 @@ export default function ContactSection() {
                       value={formData.email}
                       onChange={handleChange}
                       required
-                        className="glass border-border/50 focus:border-primary focus:neon-glow transition-all h-12"
+                      className="h-14  focus:border-primary focus:ring-2 focus:ring-primary/30 transition-all text-base"
                     />
-                    </motion.div>
                   </div>
 
-                  <motion.div
-                    initial={{ opacity: 0, y: 10 }}
-                    animate={isInView ? { opacity: 1, y: 0 } : {}}
-                    transition={{ delay: 0.4 }}
-                  >
                   <Input
                     name="subject"
                     placeholder="Subject"
                     value={formData.subject}
                     onChange={handleChange}
                     required
-                      className="glass border-border/50 focus:border-primary focus:neon-glow transition-all h-12"
+                    className="h-14  focus:border-primary focus:ring-2 focus:ring-primary/30 transition-all text-base"
                   />
-                  </motion.div>
 
-                  <motion.div
-                    initial={{ opacity: 0, y: 10 }}
-                    animate={isInView ? { opacity: 1, y: 0 } : {}}
-                    transition={{ delay: 0.45 }}
-                  >
                   <Textarea
                     name="message"
-                      placeholder="Your Message"
+                    placeholder="Tell us about your project..."
                     value={formData.message}
                     onChange={handleChange}
                     required
-                      rows={5}
+                    rows={6}
-                      className="glass border-border/50 focus:border-primary focus:neon-glow transition-all resize-none"
+                    className=" focus:border-primary focus:ring-2 focus:ring-primary/30 transition-all resize-none text-base"
                   />
-                  </motion.div>
 
-                  <motion.div
-                    initial={{ opacity: 0, y: 10 }}
-                    animate={isInView ? { opacity: 1, y: 0 } : {}}
-                    transition={{ delay: 0.5 }}
-                  >
                   <Button
                     type="submit"
                     disabled={isSubmitting}
-                      className="w-full bg-primary text-primary-foreground font-semibold py-6 rounded-full neon-glow hover:neon-glow-strong transition-all group"
+                    className="w-full h-14 bg-primary hover:bg-primary/90 text-lg font-semibold rounded-2xl neon-glow hover:neon-glow-strong transition-all group"
                   >
                     {isSubmitting ? (
-                        <motion.div
+                      <div className="flex items-center gap-3">
-                          animate={{ rotate: 360 }}
+                        <div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
-                          transition={{
+                        Sending...
-                            duration: 1,
+                      </div>
-                            repeat: Infinity,
-                            ease: "linear",
-                          }}
-                          className="w-5 h-5 border-2 border-primary-foreground/30 border-t-primary-foreground rounded-full"
-                        />
                     ) : (
-                        <>
+                      <div className="flex items-center justify-center gap-3">
                         Send Message
-                          <Send className="w-5 h-5 ml-2 group-hover:translate-x-1 transition-transform" />
+                        <Send className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
-                        </>
+                      </div>
                     )}
                   </Button>
-                  </motion.div>
                 </form>
               )}
             </div>

src/components/FAQSection.tsx

@@ -5,6 +5,7 @@ import {
   AccordionTrigger,
 } from "@/components/ui/accordion";
 import { motion, useInView } from "framer-motion";
+import { ArrowRight, Mail } from "lucide-react";
 import { useRef } from "react";
 
 const faqs = [
@@ -28,21 +29,11 @@ const faqs = [
     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.",
   },
-  {
-    question: "What technologies do you work with?",
-    answer:
-      "Our tech stack includes React, Next.js, Node.js, Python, TypeScript, AWS, Google Cloud, and more. We stay current with industry trends and select the best technologies for each project's specific requirements.",
-  },
   {
     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: "Can you work with our existing team?",
-    answer:
-      "Absolutely! We frequently collaborate with in-house teams, providing additional expertise and resources. Whether you need staff augmentation, specialized skills, or full project delivery, we adapt to your working style and processes.",
-  },
   {
     question: "What industries do you serve?",
     answer:
@@ -55,40 +46,69 @@ export default function FAQSection() {
   const isInView = useInView(ref, { once: true, margin: "-100px" });
 
   return (
-    <section id="faq" ref={ref} className="py-24 relative overflow-hidden">
+    <section
-      {/* Background decoration */}
+      id="faq"
-      <div className="absolute inset-0 opacity-30">
+      ref={ref}
-        <div className="absolute top-1/4 right-0 w-96 h-96 bg-primary/10 rounded-full blur-[150px]" />
+      className="pb-20 relative overflow-hidden bg-background"
-        <div className="absolute bottom-1/4 left-0 w-80 h-80 bg-neon-purple/10 rounded-full blur-[120px]" />
+    >
-      </div>
+      {/* Decorative gradients */}
+      <div className="absolute top-0 right-0 w-[500px] h-[500px] bg-primary/5 rounded-full blur-3xl -z-10" />
+      <div className="absolute bottom-0 left-0 w-[500px] h-[500px] bg-secondary/5 rounded-full blur-3xl -z-10" />
 
       <div className="container mx-auto px-4 relative z-10">
-        {/* Section Header */}
+        <div className="grid grid-cols-1 lg:grid-cols-[1fr,1.5fr] gap-12 lg:gap-20 items-start">
+          {/* Left Column - Header and CTA */}
           <motion.div
-          initial={{ opacity: 0, y: 20 }}
+            initial={{ opacity: 0, x: -30 }}
-          animate={isInView ? { opacity: 1, y: 0 } : {}}
+            animate={isInView ? { opacity: 1, x: 0 } : {}}
             transition={{ duration: 0.6 }}
-          className="text-center mb-16"
+            className="flex flex-col gap-8 lg:sticky lg:top-24"
           >
-          <span className="inline-block px-4 py-1.5 rounded-full glass text-sm font-medium text-primary mb-4">
+            <div>
+              <span className="inline-flex px-4 py-1.5 rounded-full text-xs font-semibold tracking-wider uppercase bg-primary/10 text-primary mb-4">
                 Got Questions?
               </span>
-          <h2 className="text-3xl md:text-4xl lg:text-5xl font-bold mb-4">
+              <h2 className="text-4xl md:text-5xl font-bold tracking-tight text-foreground mb-4 leading-[1.15]">
-            Frequently Asked{" "}
+                Frequently Asked <br />
-            <span className="text-primary neon-text-glow">Questions</span>
+                <span className="text-primary">Questions</span>
               </h2>
-          <p className="text-muted-foreground max-w-2xl mx-auto text-lg">
+              <p className="text-muted-foreground text-lg leading-relaxed max-w-md">
-            Everything you need to know about working with TechZaa. Can't find
+                Everything you need to know about working with TechZaa. Can't
-            what you're looking for? Reach out to our team.
+                find what you're looking for? Reach out to our team.
               </p>
+            </div>
+
+            {/* Support CTA Card */}
+            <div className="p-6 rounded-2xl border border-border/50 bg-card/40 backdrop-blur-sm flex flex-col gap-5 max-w-md shadow-sm">
+              <div className="flex items-center gap-4">
+                <div className="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary">
+                  <Mail className="w-5 h-5" />
+                </div>
+                <div>
+                  <h4 className="font-semibold text-foreground text-sm">
+                    Still have questions?
+                  </h4>
+                  <p className="text-muted-foreground text-xs">
+                    We're here to help you out with any queries.
+                  </p>
+                </div>
+              </div>
+              <a
+                href="mailto:support@techzaa.com"
+                className="inline-flex items-center justify-center gap-2 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground shadow hover:bg-primary/90 h-10 px-4 py-2 rounded-xl w-full group"
+              >
+                Contact Support
+                <ArrowRight className="w-4 h-4 transition-transform group-hover:translate-x-1" />
+              </a>
+            </div>
           </motion.div>
 
-        {/* FAQ Accordion */}
+          {/* Right Column - Accordion */}
           <motion.div
             initial={{ opacity: 0, y: 30 }}
             animate={isInView ? { opacity: 1, y: 0 } : {}}
             transition={{ duration: 0.6, delay: 0.2 }}
-          className="max-w-3xl mx-auto"
+            className="w-full"
           >
             <Accordion type="single" collapsible className="space-y-4">
               {faqs.map((faq, index) => (
@@ -96,16 +116,16 @@ export default function FAQSection() {
                   key={index}
                   initial={{ opacity: 0, y: 20 }}
                   animate={isInView ? { opacity: 1, y: 0 } : {}}
-                transition={{ duration: 0.4, delay: 0.1 * index }}
+                  transition={{ duration: 0.4, delay: 0.06 * index }}
                 >
                   <AccordionItem
                     value={`item-${index}`}
-                  className="glass border border-border/50 rounded-xl px-6 overflow-hidden data-[state=open]:border-primary/50 transition-colors"
+                    className="bg-card/40 border border-border/40 rounded-2xl px-6 py-1 overflow-hidden data-[state=open]:border-primary/50 data-[state=open]:shadow-md transition-all duration-300"
                   >
-                  <AccordionTrigger className="text-left hover:no-underline py-5 text-base md:text-lg font-medium hover:text-primary transition-colors">
+                    <AccordionTrigger className="text-left hover:no-underline py-5 text-base md:text-lg font-medium text-foreground hover:text-primary transition-colors">
                       {faq.question}
                     </AccordionTrigger>
-                  <AccordionContent className="text-muted-foreground pb-5 text-sm md:text-base leading-relaxed">
+                    <AccordionContent className="text-muted-foreground pt-1 pb-5 text-sm md:text-base leading-relaxed">
                       {faq.answer}
                     </AccordionContent>
                   </AccordionItem>
@@ -114,6 +134,7 @@ export default function FAQSection() {
             </Accordion>
           </motion.div>
         </div>
+      </div>
     </section>
   );
 }

src/components/HeroSection.tsx

@@ -27,7 +27,7 @@ export default function HeroSection() {
     <section
       id="home"
       ref={containerRef}
-      className="relative min-h-screen flex items-center justify-center overflow-hidden pt-20"
+      className="relative min-h-screen flex items-center justify-center overflow-hidden pt-10"
     >
       {/* Animated gradient background */}
       <div className="absolute inset-0 gradient-primary-animated opacity-10" />

src/components/Navbar.tsx

@@ -60,7 +60,7 @@ export default function Navbar() {
       >
         <div className="container mx-auto px-4 flex items-center justify-between">
           {/* Logo */}
-          <Link to="#home" className="flex items-center gap-2">
+          <Link to="/" className="flex items-center gap-2">
             <img src={logo} alt="TechZaa" className="h-16 w-auto" />
           </Link>
 

src/components/ProjectsSection.tsx

@@ -1,43 +1,43 @@
-import { useRef } from 'react';
+import { Button } from "@/components/ui/button";
-import { motion, useInView } from 'framer-motion';
+import { useProjects } from "@/hooks/queires/useProjects";
-import { ArrowRight, ExternalLink } from 'lucide-react';
+import { motion, useInView } from "framer-motion";
-import { Link } from 'react-router-dom';
+import { ArrowRight, ExternalLink } from "lucide-react";
-import { Button } from '@/components/ui/button';
+import { useRef, useState } from "react";
-import { useProjects } from '@/hooks/queires/useProjects';
+import { Link } from "react-router-dom";
-
-
 
 const gradientColors = [
-  "from-neon-blue/80",
+  "from-neon-blue/90",
-  "from-neon-purple/80",
+  "from-neon-purple/90",
-  "from-neon-green/80",
+  "from-neon-green/90",
-  "from-neon-pink/80"
+  "from-neon-pink/90",
 ];
 
 export default function ProjectsSection() {
-
   const { data: projectsData } = useProjects({
-    fields: "category, title, image",
+    fields: "category, title, image, liveUrl",
-    limit: 6
+    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">
+    <section
-      {/* Background pattern */}
+      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={{
+        <div
+          className="absolute inset-0"
+          style={{
             backgroundImage: `radial-gradient(circle at 1px 1px, currentColor 1px, transparent 0)`,
-          backgroundSize: '40px 40px',
+            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 }}
+          transition={{ duration: 0.7 }}
-          className="text-center mb-16"
+          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">
+          <span className="inline-block px-5 py-2 rounded-full glass text-sm font-medium text-primary mb-4 tracking-widest">
-            Our Portfolio
+            OUR PORTFOLIO
           </span>
-          <h2 className="text-3xl md:text-4xl lg:text-5xl font-bold mb-4">
+          <h2 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-6">
-            Our <span className="text-primary neon-text-glow">Projects</span>
+            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
+            Crafted with passion. Delivered with excellence.
-            transform their digital presence.
           </p>
         </motion.div>
 
         {/* Projects Grid */}
-        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
+        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 mb-16">
-          {projects?.map((project, index) => {
+          {projects.map((project, index) => {
             const color = gradientColors[index % gradientColors.length];
 
             return (
-              <motion.div
+              <ProjectCard
                 key={project._id}
-                initial={{ opacity: 0, y: 30 }}
+                project={project}
-                animate={isInView ? { opacity: 1, y: 0 } : {}}
+                color={color}
-                transition={{ duration: 0.5, delay: index * 0.1 }}
+                index={index}
-                whileHover={{ y: -8 }}
+                isInView={isInView}
-                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>
             );
           })}
         </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 }}
+          transition={{ duration: 0.7, delay: 0.3 }}
-          className="text-center"
+          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
+              Explore All Projects
-              <ArrowRight className="ml-2 w-5 h-5 group-hover:translate-x-1 transition-transform" />
+              <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>
+  );
+}

src/components/ServicesSection.tsx

@@ -38,7 +38,7 @@ export default function ServicesSection() {
   const isInView = useInView(ref, { once: true, margin: "-100px" });
 
   return (
-    <section id="services" ref={ref} className="py-24 relative overflow-hidden">
+    <section id="services" ref={ref} className="py-20 relative overflow-hidden">
       {/* Background decoration */}
       <div className="absolute inset-0 opacity-30">
         <div className="absolute bottom-1/2 left-0 w-96 h-96 bg-primary rounded-full blur-[200px]" />

src/components/TeamSection.tsx

@@ -1,32 +1,22 @@
 import { motion, useInView } from "framer-motion";
 import { Github, Linkedin, Twitter } from "lucide-react";
 import { useRef } from "react";
-// Import Swiper React components and modules
 import { Autoplay, Pagination } from "swiper/modules";
 import { Swiper, SwiperSlide } from "swiper/react";
 
-// Import Swiper styles
-import "swiper/css";
-import "swiper/css/pagination";
 import { useTeam } from "@/hooks/queires/useTeam";
 
-
 export default function TeamSection() {
-
   const { data: teamdata } = useTeam();
 
   const team = teamdata?.data.data;
 
-
-
-
-
   const ref = useRef<HTMLElement>(null);
   const isInView = useInView(ref, { once: true, margin: "-100px" });
   const shouldScroll = team?.length >= 5;
 
   return (
-    <section id="team" ref={ref} className="py-24 relative overflow-hidden">
+    <section id="team" ref={ref} className="pt-20 1relative overflow-hidden">
       {/* Background decoration */}
       <div className="absolute inset-0 opacity-30">
         <div className="absolute top-0 right-1/4 w-72 h-72 bg-neon-purple/10 rounded-full blur-[120px]" />

src/components/TestimonialsSection.tsx

@@ -41,11 +41,7 @@ export default function TestimonialsSection() {
 
   return (
     <section id="testimonials" className="py-24 relative overflow-hidden">
-      {/* Background */}
+     
-      <div className="absolute inset-0">
-        <div className="absolute top-1/4 left-1/4 w-96 h-96 bg-primary/10 rounded-full blur-3xl" />
-        <div className="absolute bottom-1/4 right-1/4 w-96 h-96 bg-neon-purple/10 rounded-full blur-3xl" />
-      </div>
 
       <div className="container mx-auto px-4 relative z-10">
         {/* Section Header */}
@@ -76,7 +72,7 @@ export default function TestimonialsSection() {
             variant="outline"
             size="icon"
             onClick={scrollPrev}
-            className="absolute left-0 top-1/2 -translate-y-1/2 -translate-x-4 z-10 rounded-full glass border-primary/30 hover:neon-glow hidden md:flex"
+            className="absolute left-0 top-1/2 -translate-y-1/2 -translate-x-4 z-10 rounded-full glass neon-glow hidden md:flex"
           >
             <ChevronLeft className="w-5 h-5" />
           </Button>
@@ -84,7 +80,7 @@ export default function TestimonialsSection() {
             variant="outline"
             size="icon"
             onClick={scrollNext}
-            className="absolute right-0 top-1/2 -translate-y-1/2 translate-x-4 z-10 rounded-full glass border-primary/30 hover:neon-glow hidden md:flex"
+            className="absolute right-0 top-1/2 -translate-y-1/2 translate-x-4 z-10 rounded-full glass neon-glow hidden md:flex"
           >
             <ChevronRight className="w-5 h-5" />
           </Button>
@@ -104,11 +100,13 @@ export default function TestimonialsSection() {
                       scale: selectedIndex === index ? 1 : 0.9,
                     }}
                     transition={{ duration: 0.4 }}
-                    className="glass-strong rounded-3xl p-8 md:p-10 relative"
+                    className="glass-strong rounded-3xl p-8 md:p-10 relative overflow-hidden border dark:border-none"
                   >
-                    {/* Quote Icon */}
+                    {/* Triangular Quote Corner Tab */}
-                    <div className="absolute -top-4 -left-4 w-12 h-12 rounded-full bg-primary flex items-center justify-center neon-glow">
+                    <div className="absolute top-0 right-0 w-20 h-20 bg-gradient-to-bl from-primary/10 to-transparent flex items-start justify-end p-3 rounded-bl-[60px] border-l border-b border-primary/20 pointer-events-none">
-                      <Quote className="w-6 h-6 text-primary-foreground" />
+                      <div className="pointer-events-auto flex items-center justify-center neon-glow w-9 h-9 rounded-full bg-primary shadow-lg">
+                        <Quote className="w-4 h-4 text-primary-foreground" />
+                      </div>
                     </div>
 
                     {/* Stars */}
@@ -121,7 +119,7 @@ export default function TestimonialsSection() {
                       ))}
                     </div>
 
-                    {/* Quote */}
+                    {/* review */}
                     <p className="text-lg md:text-xl text-foreground/90 mb-8 leading-relaxed">
                       "{testimonial.review}"
                     </p>
@@ -153,7 +151,7 @@ export default function TestimonialsSection() {
             {testimonials?.map((_, index) => (
               <button
                 key={index}
-                onClick={() => emblaApi?.scrollTo(index)}
+                onClick={() => (emblaApi) => emblaApi?.scrollTo(index)}
                 className={`w-2 h-2 rounded-full transition-all duration-300 ${
                   selectedIndex === index
                     ? "w-8 bg-primary neon-glow"

src/index.css

@@ -176,7 +176,7 @@
     background: hsl(var(--glass-bg));
     backdrop-filter: blur(30px);
     -webkit-backdrop-filter: blur(30px);
-    border: 1px solid hsl(var(--glass-border));
+    /* border: 1px solid hsl(var(--glass-border)); */
   }
 
   /* Gradient backgrounds */

src/pages/Index.tsx

@@ -19,7 +19,7 @@ const Index = () => {
         <TeamSection />
         <AboutSection />
         <TestimonialsSection />
-        <BlogSection />
+        {/* <BlogSection /> */}
         <FAQSection />
         <ContactSection />
       </div>

tsconfig.json

@@ -2,7 +2,6 @@
   "files": [],
   "references": [{ "path": "./tsconfig.app.json" }, { "path": "./tsconfig.node.json" }],
   "compilerOptions": {
-    "baseUrl": ".",
     "paths": {
       "@/*": ["./src/*"]
     },