refactor:change the card UI expertise section

src/App.tsx

@@ -1,7 +1,6 @@
 import { Toaster } from "@/components/ui/toaster";
 import { Toaster as Sonner } from "@/components/ui/sonner";
 import { TooltipProvider } from "@/components/ui/tooltip";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { BrowserRouter, Routes, Route, useLocation } from "react-router-dom";
 import { ThemeProvider } from "@/contexts/ThemeContext";
 import { AnimatePresence } from "framer-motion";

src/components/HeroSection.tsx

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

src/components/Navbar.tsx

@@ -4,15 +4,16 @@ import { useTheme } from "@/contexts/ThemeContext";
 import { AnimatePresence, motion } from "framer-motion";
 import { Menu, Moon, Sun, X } from "lucide-react";
 import { useEffect, useState } from "react";
+import { Link } from "react-router-dom";
 import ContactModal from "./ContactModal";
 
 const navItems = [
-  { name: "Home", href: "#home" },
+  { name: "Home", href: "/#home" },
-  { name: "Services", href: "#services" },
+  { name: "Services", href: "/#services" },
-  { name: "Projects", href: "#projects" },
+  { name: "Projects", href: "/#projects" },
-  { name: "Team", href: "#team" },
+  { name: "Team", href: "/#team" },
-  { name: "About", href: "#about" },
+  { name: "About", href: "/#about" },
-  { name: "Contact", href: "#contact" },
+  { name: "Contact", href: "/#contact" },
 ];
 
 const accentColors = [
@@ -59,14 +60,9 @@ export default function Navbar() {
       >
         <div className="container mx-auto px-4 flex items-center justify-between">
           {/* Logo */}
-          <motion.a
+          <Link to="#home" className="flex items-center gap-2">
-            href="#home"
-            className="flex items-center gap-2"
-            whileHover={{ scale: 1.05 }}
-            whileTap={{ scale: 0.95 }}
-          >
             <img src={logo} alt="TechZaa" className="h-16 w-auto" />
-          </motion.a>
+          </Link>
 
           {/* Desktop Navigation */}
           <div className="hidden lg:flex items-center gap-8">

src/components/ServicesSection.tsx

@@ -1,44 +1,48 @@
-import { useRef } from 'react';
+import { motion, useInView } from "framer-motion";
-import { motion, useInView } from 'framer-motion';
+import { Brain, Cloud, Globe, Smartphone } from "lucide-react";
-import { Globe, Smartphone, Brain, Cloud } from 'lucide-react';
+import { useRef } from "react";
 
 const services = [
   {
     icon: Globe,
-    title: 'Web Development',
+    title: "Web Development",
-    description: 'Custom web applications built with cutting-edge technologies. From stunning landing pages to complex enterprise solutions.',
+    description:
-    color: 'neon-blue',
+      "Custom web applications built with cutting-edge technologies. From stunning landing pages to complex enterprise solutions.",
+    color: "primary",
   },
   {
     icon: Smartphone,
-    title: 'Mobile App Development',
+    title: "Mobile App Development",
-    description: 'Native and cross-platform mobile apps that deliver exceptional user experiences on iOS and Android.',
+    description:
-    color: 'neon-purple',
+      "Native and cross-platform mobile apps that deliver exceptional user experiences on iOS and Android.",
+    color: "primary",
   },
   {
     icon: Brain,
-    title: 'AI Solutions',
+    title: "AI Solutions",
-    description: 'Intelligent automation and machine learning solutions that transform data into actionable insights.',
+    description:
-    color: 'neon-green',
+      "Intelligent automation and machine learning solutions that transform data into actionable insights.",
+    color: "primary",
   },
   {
     icon: Cloud,
-    title: 'Cloud Solutions',
+    title: "Cloud Solutions",
-    description: 'Scalable cloud infrastructure and DevOps practices that ensure your applications run smoothly at any scale.',
+    description:
-    color: 'neon-blue',
+      "Scalable cloud infrastructure and DevOps practices that ensure your applications run smoothly at any scale.",
+    color: "primary",
   },
 ];
 
 export default function ServicesSection() {
   const ref = useRef<HTMLElement>(null);
-  const isInView = useInView(ref, { once: true, margin: '-100px' });
+  const isInView = useInView(ref, { once: true, margin: "-100px" });
 
   return (
     <section id="services" ref={ref} className="py-24 relative overflow-hidden">
       {/* Background decoration */}
       <div className="absolute inset-0 opacity-30">
-        <div className="absolute top-1/2 left-0 w-96 h-96 bg-primary/10 rounded-full blur-[150px]" />
+        <div className="absolute bottom-1/2 left-0 w-96 h-96 bg-primary rounded-full blur-[200px]" />
-        <div className="absolute bottom-0 right-0 w-80 h-80 bg-neon-purple/10 rounded-full blur-[120px]" />
+        <div className="absolute bottom-0 right-0 w-80 h-80 bg-primary rounded-full blur-[200px]" />
       </div>
 
       <div className="container mx-auto px-4 relative z-10">
@@ -56,8 +60,8 @@ export default function ServicesSection() {
             What We <span className="text-primary neon-text-glow">Do</span>
           </h2>
           <p className="text-muted-foreground max-w-2xl mx-auto text-lg">
-            We deliver comprehensive technology solutions that empower businesses 
+            We deliver comprehensive technology solutions that empower
-            to thrive in the digital age.
+            businesses to thrive in the digital age.
           </p>
         </motion.div>
 
@@ -73,7 +77,7 @@ export default function ServicesSection() {
               className="group relative"
             >
               {/* Card */}
-              <div className="relative h-full p-6 rounded-2xl glass border border-border/50 hover:border-primary/50 transition-all duration-300 overflow-hidden">
+              <div className="relative h-full p-6 rounded-2xl bg-primary/5 transition-all duration-300 overflow-hidden">
                 {/* Glow effect on hover */}
                 <div className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-500">
                   <div className="absolute inset-0 bg-gradient-to-br from-primary/10 to-transparent" />

tailwind.config.ts

@@ -2,7 +2,12 @@ import type { Config } from "tailwindcss";
 
 export default {
   darkMode: ["class"],
-  content: ["./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}"],
+  content: [
+    "./pages/**/*.{ts,tsx}",
+    "./components/**/*.{ts,tsx}",
+    "./app/**/*.{ts,tsx}",
+    "./src/**/*.{ts,tsx}",
+  ],
   prefix: "",
   theme: {
     container: {
@@ -114,8 +119,8 @@ export default {
         "bounce-subtle": "bounce-subtle 2s ease-in-out infinite",
       },
       fontFamily: {
-        sans: ["Inter", "system-ui", "sans-serif"],
+        sans: ["Inter", "system-ui", "sans-serif"], 
-        display: ["Inter", "system-ui", "sans-serif"],
+        display: ["Space Grotesk", "Inter", "sans-serif"],
       },
     },
   },

tsconfig.app.json

@@ -22,7 +22,6 @@
     "noImplicitAny": false,
     "noFallthroughCasesInSwitch": false,
 
-    "baseUrl": ".",
     "paths": {
       "@/*": ["./src/*"]
     }