changes 1 - 21/07

components/ProcessSection.tsx

@@ -1,52 +1,71 @@
 import { motion } from "framer-motion";
 import { useRef } from "react";
-import { ArrowRight, FileText, Users, CheckCircle, Rocket, Search, Code, Palette, Monitor } from "lucide-react";
+import {
+  ArrowRight,
+  FileText,
+  Users,
+  CheckCircle,
+  Rocket,
+  Search,
+  Code,
+  Palette,
+  Monitor,
+} from "lucide-react";
 import { Button } from "./ui/button";
 import { Badge } from "./ui/badge";
+import { navigateTo } from "@/App";
 
 const steps = [
   {
     id: "step-1",
     title: "1. Define Scope",
-    description: "We begin by gathering all project inputs, defining clear goals, creating technical documentation, and aligning on expectations.",
+    description:
+      "We begin by gathering all project inputs, defining clear goals, creating technical documentation, and aligning on expectations.",
     visual: {
       type: "icon_or_doc_mockup",
-      style: "minimal_ui"
+      style: "minimal_ui",
-    }
+    },
   },
   {
     id: "step-2",
     title: "2. Design UI/UX",
-    description: "Our designers craft user-centric interfaces in Figma with clickable flows, visual systems, and detailed wireframes for all screens.",
+    description:
+      "Our designers craft user-centric interfaces in Figma with clickable flows, visual systems, and detailed wireframes for all screens.",
     tags: [
       { label: "Wireframes", color: "#6366F1" },
       { label: "Prototyping", color: "#10B981" },
-      { label: "UI System", color: "#F59E0B" }
+      { label: "UI System", color: "#F59E0B" },
-    ]
+    ],
   },
   {
     id: "step-3",
     title: "3. Develop with Agile Sprints",
-    description: "We use Agile sprints to turn designs into production-ready code, with continuous integration and weekly builds.",
+    description:
+      "We use Agile sprints to turn designs into production-ready code, with continuous integration and weekly builds.",
     tags: [
       { label: "Frontend", color: "#3B82F6" },
       { label: "Backend", color: "#0EA5E9" },
-      { label: "APIs", color: "#8B5CF6" }
+      { label: "APIs", color: "#8B5CF6" },
-    ]
+    ],
   },
   {
     id: "step-4",
     title: "4. Test, Launch & Scale",
-    description: "After QA and UAT, we help launch confidently. Then we monitor, iterate, and scale your product to grow with your users.",
+    description:
+      "After QA and UAT, we help launch confidently. Then we monitor, iterate, and scale your product to grow with your users.",
     chat_simulation: [
       { from: "You", text: "Are we ready to go live?" },
-      { from: "Team", text: "Yes! Final tests passed 🚀" }
+      { from: "Team", text: "Yes! Final tests passed 🚀" },
-    ]
+    ],
-  }
+  },
 ];
 
 // Chat simulation component - Compact version
-const ChatSimulation = ({ messages }: { messages: Array<{ from: string; text: string }> }) => {
+const ChatSimulation = ({
+  messages,
+}: {
+  messages: Array<{ from: string; text: string }>;
+}) => {
   return (
     <div className="space-y-2 p-3 bg-background rounded-lg border border-border">
       {messages.map((message, index) => (
@@ -56,7 +75,9 @@ const ChatSimulation = ({ messages }: { messages: Array<{ from: string; text: st
           whileInView={{ opacity: 1, x: 0 }}
           transition={{ duration: 0.5, delay: index * 0.3 }}
           viewport={{ once: true }}
-          className={`flex ${message.from === "You" ? "justify-start" : "justify-end"}`}
+          className={`flex ${
+            message.from === "You" ? "justify-start" : "justify-end"
+          }`}
         >
           <div
             className={`max-w-[80%] px-3 py-1.5 rounded-lg ${
@@ -65,7 +86,9 @@ const ChatSimulation = ({ messages }: { messages: Array<{ from: string; text: st
                 : "bg-accent text-accent-foreground"
             }`}
           >
-            <div className="text-xs font-medium mb-1 opacity-70">{message.from}</div>
+            <div className="text-xs font-medium mb-1 opacity-70">
+              {message.from}
+            </div>
             <div className="text-xs">{message.text}</div>
           </div>
         </motion.div>
@@ -84,7 +107,9 @@ const DocumentMockup = () => {
           <div className="flex items-center justify-between">
             <div className="flex items-center gap-2">
               <FileText className="w-4 h-4 text-accent" />
-              <span className="text-xs font-medium text-foreground">Project Scope</span>
+              <span className="text-xs font-medium text-foreground">
+                Project Scope
+              </span>
             </div>
             <div className="text-xs text-muted-foreground">Draft v1.2</div>
           </div>
@@ -134,7 +159,13 @@ const DocumentMockup = () => {
 };
 
 // Process step card component
-const ProcessCard = ({ step, index }: { step: typeof steps[0]; index: number }) => {
+const ProcessCard = ({
+  step,
+  index,
+}: {
+  step: (typeof steps)[0];
+  index: number;
+}) => {
   const cardRef = useRef(null);
 
   const renderContent = () => {
@@ -244,8 +275,9 @@ export const ProcessSection = () => {
             viewport={{ once: true }}
             className="text-muted-foreground text-xl max-w-2xl mx-auto"
           >
-            Our proven process transforms your vision into reality through strategic planning, 
+            Our proven process transforms your vision into reality through
-            thoughtful design, and expert engineering—every step of the way.
+            strategic planning, thoughtful design, and expert engineering—every
+            step of the way.
           </motion.p>
         </div>
 
@@ -267,6 +299,7 @@ export const ProcessSection = () => {
           <Button
             size="lg"
             className="bg-accent hover:bg-accent/90 text-accent-foreground border-0 rounded-lg px-8 py-4 group text-lg"
+            onClick={() => navigateTo("/start-a-project")}
           >
             <span className="flex items-center gap-2">
               Start Your Project Today

components/ResourceCards.tsx

@@ -7,46 +7,61 @@ import { navigateTo } from "../App";
 const resources = [
   {
     title: "UX review presentations",
-    excerpt: "How do you create compelling presentations that wow clients, and actually close projects and deals? Here are the key insights that will elevate your game.",
+    excerpt:
+      "How do you create compelling presentations that wow clients, and actually close projects and deals? Here are the key insights that will elevate your game.",
     readTime: "8 min read",
     date: "Dec 15, 2024",
-    image: "https://images.unsplash.com/photo-1560472355-536de3962603?w=800&h=400&fit=crop&auto=format",
+    image:
+      "https://images.unsplash.com/photo-1560472355-536de3962603?w=800&h=400&fit=crop&auto=format",
     author: {
       name: "Olivia Rhye",
-      avatar: "https://images.unsplash.com/photo-1494790108755-2616b612b47c?w=150&h=150&fit=crop&crop=face&auto=format"
+      avatar:
+        "https://images.unsplash.com/photo-1494790108755-2616b612b47c?w=150&h=150&fit=crop&crop=face&auto=format",
     },
     category: "Design",
-    slug: "ux-review-presentations"
+    slug: "ux-review-presentations",
   },
   {
     title: "Migrating to Linear 101",
-    excerpt: "Linear helps streamline software projects, sprints, tasks, and bug tracking. Here's how to get started and make the most of it.",
+    excerpt:
+      "Linear helps streamline software projects, sprints, tasks, and bug tracking. Here's how to get started and make the most of it.",
     readTime: "6 min read",
     date: "Dec 10, 2024",
-    image: "https://images.unsplash.com/photo-1551434678-e076c223a692?w=800&h=400&fit=crop&auto=format",
+    image:
+      "https://images.unsplash.com/photo-1551434678-e076c223a692?w=800&h=400&fit=crop&auto=format",
     author: {
       name: "Phoenix Baker",
-      avatar: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=150&h=150&fit=crop&crop=face&auto=format"
+      avatar:
+        "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=150&h=150&fit=crop&crop=face&auto=format",
     },
     category: "Software Engineering",
-    slug: "migrating-to-linear-101"
+    slug: "migrating-to-linear-101",
   },
   {
     title: "Building your API Stack",
-    excerpt: "The rise of RESTful APIs has been met by a rise in tools for creating, testing, and managing them. Here are the best practices for API development.",
+    excerpt:
+      "The rise of RESTful APIs has been met by a rise in tools for creating, testing, and managing them. Here are the best practices for API development.",
     readTime: "12 min read",
     date: "Dec 5, 2024",
-    image: "https://images.unsplash.com/photo-1555949963-ff9fe0c870eb?w=800&h=400&fit=crop&auto=format",
+    image:
+      "https://images.unsplash.com/photo-1555949963-ff9fe0c870eb?w=800&h=400&fit=crop&auto=format",
     author: {
       name: "Lana Steiner",
-      avatar: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=150&h=150&fit=crop&crop=face&auto=format"
+      avatar:
+        "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=150&h=150&fit=crop&crop=face&auto=format",
     },
     category: "Software Engineering",
-    slug: "building-your-api-stack"
+    slug: "building-your-api-stack",
-  }
+  },
 ];
 
-const ResourceCard = ({ resource, index }: { resource: typeof resources[0]; index: number }) => {
+const ResourceCard = ({
+  resource,
+  index,
+}: {
+  resource: (typeof resources)[0];
+  index: number;
+}) => {
   return (
     <motion.article
       initial={{ opacity: 0, y: 50 }}
@@ -96,8 +111,8 @@ const ResourceCard = ({ resource, index }: { resource: typeof resources[0]; inde
         </p>
 
         {/* Author */}
-        <div className="flex items-center gap-3 pt-2 border-t border-border">
+        <div className="flex items-center justify-end gap-3 pt-2 border-t border-border">
-          <ImageWithFallback
+          {/* <ImageWithFallback
             src={resource.author.avatar}
             alt={resource.author.name}
             className="w-10 h-10 rounded-full object-cover"
@@ -106,7 +121,7 @@ const ResourceCard = ({ resource, index }: { resource: typeof resources[0]; inde
             <div className="font-medium text-foreground text-sm">
               {resource.author.name}
             </div>
-          </div>
+          </div> */}
           <Button
             variant="ghost"
             size="sm"
@@ -140,14 +155,19 @@ export const ResourceCards = () => {
             Insights for Founders & Product Leaders
           </h2>
           <p className="text-muted-foreground text-lg max-w-2xl mx-auto">
-            Learn from our experience building 200+ digital products. Practical insights, real case studies, and actionable strategies.
+            Learn from our experience building 200+ digital products. Practical
+            insights, real case studies, and actionable strategies.
           </p>
         </motion.div>
 
         {/* Resource Cards Grid */}
         <div className="grid lg:grid-cols-3 gap-8 mb-12 max-w-7xl mx-auto">
           {resources.map((resource, index) => (
-            <ResourceCard key={resource.title} resource={resource} index={index} />
+            <ResourceCard
+              key={resource.title}
+              resource={resource}
+              index={index}
+            />
           ))}
         </div>
 
@@ -159,7 +179,10 @@ export const ResourceCards = () => {
           viewport={{ once: true }}
           className="text-center"
         >
-          <Button className="bg-accent hover:bg-accent/90 text-accent-foreground border-0 rounded-lg px-6 py-3" onClick={() => navigateTo('/resources')}>
+          <Button
+            className="bg-accent hover:bg-accent/90 text-accent-foreground border-0 rounded-lg px-6 py-3"
+            onClick={() => navigateTo("/resources")}
+          >
             View All Resources <ArrowRight className="w-4 h-4 ml-2" />
           </Button>
         </motion.div>

components/ui/checkbox.tsx

@@ -14,7 +14,7 @@ function Checkbox({
     <CheckboxPrimitive.Root
       data-slot="checkbox"
       className={cn(
-        "peer border bg-input-background dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        "peer border border-gray-400 bg-input-background dark:bg-input/20 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
         className,
       )}
       {...props}

pages/APIBackendDevelopment.tsx

@@ -29,17 +29,23 @@ import {
   TrendingUp,
   Users,
   Wifi,
-  Zap
+  Zap,
 } from "lucide-react";
 import { ImageWithFallback } from "../components/figma/ImageWithFallback";
 import { Footer } from "../components/Footer";
 import { Navigation } from "../components/Navigation";
-import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "../components/ui/accordion";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "../components/ui/accordion";
 import { Badge } from "../components/ui/badge";
 import { Button } from "../components/ui/button";
 import { Card, CardContent } from "../components/ui/card";
 import { ShimmerButton } from "../components/ui/shimmer-button";
 import iotDeviceImage from "../src/images/iot-device.webp";
+import { navigateTo } from "@/App";
 
 // API & Backend Development Hero Section
 const APIHeroWithCTA = () => {
@@ -59,7 +65,9 @@ const APIHeroWithCTA = () => {
               animate={{ opacity: 1, y: 0 }}
               transition={{ duration: 0.6 }}
             >
-              <span className="text-white/70 text-sm font-medium">Web & Cloud Solutions</span>
+              <span className="text-white/70 text-sm font-medium">
+                Web & Cloud Solutions
+              </span>
             </motion.div>
 
             {/* Main Heading */}
@@ -69,7 +77,8 @@ const APIHeroWithCTA = () => {
               </h1>
 
               <p className="text-lg text-gray-300 leading-relaxed max-w-lg">
-                Building powerful, scalable, and secure backend infrastructure and APIs to fuel your web, mobile, and IoT applications.
+                Building powerful, scalable, and secure backend infrastructure
+                and APIs to fuel your web, mobile, and IoT applications.
               </p>
             </div>
 
@@ -80,7 +89,10 @@ const APIHeroWithCTA = () => {
               transition={{ duration: 0.8, delay: 0.3 }}
               className="flex flex-col sm:flex-row gap-4"
             >
-              <ShimmerButton className="text-lg px-8 py-4">
+              <ShimmerButton
+                className="text-lg px-8 py-4"
+                onClick={() => navigateTo("/start-a-project")}
+              >
                 <div className="inline-flex items-center gap-2">
                   <Server className="w-5 h-5 flex-shrink-0" />
                   <span>Strengthen Your Backend</span>
@@ -117,7 +129,9 @@ const APIHeroWithCTA = () => {
                   <div className="flex items-center justify-between mb-6">
                     <div className="flex items-center gap-2">
                       <Server className="w-5 h-5 text-white" />
-                      <span className="text-white text-sm font-medium">Backend Infrastructure</span>
+                      <span className="text-white text-sm font-medium">
+                        Backend Infrastructure
+                      </span>
                     </div>
                     <div className="flex items-center gap-2">
                       <Database className="w-4 h-4 text-white/80" />
@@ -132,14 +146,21 @@ const APIHeroWithCTA = () => {
                     <div className="bg-white/20 rounded-lg p-3">
                       <div className="flex items-center gap-2 mb-2">
                         <Globe className="w-4 h-4 text-white/80" />
-                        <span className="text-white text-xs font-medium">REST API</span>
+                        <span className="text-white text-xs font-medium">
+                          REST API
+                        </span>
                       </div>
                       <div className="space-y-1">
-                        {['GET /users', 'POST /data', 'PUT /update'].map((endpoint, i) => (
+                        {["GET /users", "POST /data", "PUT /update"].map(
-                          <div key={i} className="text-white/70 text-xs bg-white/10 rounded px-2 py-1">
+                          (endpoint, i) => (
-                            {endpoint}
+                            <div
-                          </div>
+                              key={i}
-                        ))}
+                              className="text-white/70 text-xs bg-white/10 rounded px-2 py-1"
+                            >
+                              {endpoint}
+                            </div>
+                          )
+                        )}
                       </div>
                     </div>
 
@@ -147,7 +168,9 @@ const APIHeroWithCTA = () => {
                     <div className="bg-white/20 rounded-lg p-3">
                       <div className="flex items-center gap-2 mb-2">
                         <Layers className="w-4 h-4 text-white/80" />
-                        <span className="text-white text-xs font-medium">GraphQL</span>
+                        <span className="text-white text-xs font-medium">
+                          GraphQL
+                        </span>
                       </div>
                       <div className="h-12 bg-white/20 rounded flex items-center justify-center">
                         <Braces className="w-6 h-6 text-white/60" />
@@ -160,8 +183,14 @@ const APIHeroWithCTA = () => {
                     <div className="text-white text-xs">Data Flow</div>
                     <div className="flex items-center gap-1">
                       <div className="w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
-                      <div className="w-2 h-2 bg-blue-400 rounded-full animate-pulse" style={{animationDelay: '0.5s'}}></div>
+                      <div
-                      <div className="w-2 h-2 bg-yellow-400 rounded-full animate-pulse" style={{animationDelay: '1s'}}></div>
+                        className="w-2 h-2 bg-blue-400 rounded-full animate-pulse"
+                        style={{ animationDelay: "0.5s" }}
+                      ></div>
+                      <div
+                        className="w-2 h-2 bg-yellow-400 rounded-full animate-pulse"
+                        style={{ animationDelay: "1s" }}
+                      ></div>
                     </div>
                   </div>
 
@@ -250,20 +279,75 @@ const APIHeroWithCTA = () => {
                 </div>
 
                 {/* Connection Lines */}
-                <svg className="absolute inset-0 w-full h-full pointer-events-none" style={{top: '-20px', width: '100%', height: '450px'}}>
+                <svg
+                  className="absolute inset-0 w-full h-full pointer-events-none"
+                  style={{ top: "-20px", width: "100%", height: "450px" }}
+                >
                   <g className="opacity-30">
                     {/* Lines from Server to services */}
-                    <line x1="200" y1="140" x2="120" y2="220" stroke="#E5195E" strokeWidth="2" strokeDasharray="4,4">
+                    <line
-                      <animate attributeName="stroke-dashoffset" values="0;-8" dur="2s" repeatCount="indefinite" />
+                      x1="200"
+                      y1="140"
+                      x2="120"
+                      y2="220"
+                      stroke="#E5195E"
+                      strokeWidth="2"
+                      strokeDasharray="4,4"
+                    >
+                      <animate
+                        attributeName="stroke-dashoffset"
+                        values="0;-8"
+                        dur="2s"
+                        repeatCount="indefinite"
+                      />
                     </line>
-                    <line x1="200" y1="140" x2="160" y2="220" stroke="#E5195E" strokeWidth="2" strokeDasharray="4,4">
+                    <line
-                      <animate attributeName="stroke-dashoffset" values="0;-8" dur="2.5s" repeatCount="indefinite" />
+                      x1="200"
+                      y1="140"
+                      x2="160"
+                      y2="220"
+                      stroke="#E5195E"
+                      strokeWidth="2"
+                      strokeDasharray="4,4"
+                    >
+                      <animate
+                        attributeName="stroke-dashoffset"
+                        values="0;-8"
+                        dur="2.5s"
+                        repeatCount="indefinite"
+                      />
                     </line>
-                    <line x1="200" y1="140" x2="240" y2="220" stroke="#E5195E" strokeWidth="2" strokeDasharray="4,4">
+                    <line
-                      <animate attributeName="stroke-dashoffset" values="0;-8" dur="3s" repeatCount="indefinite" />
+                      x1="200"
+                      y1="140"
+                      x2="240"
+                      y2="220"
+                      stroke="#E5195E"
+                      strokeWidth="2"
+                      strokeDasharray="4,4"
+                    >
+                      <animate
+                        attributeName="stroke-dashoffset"
+                        values="0;-8"
+                        dur="3s"
+                        repeatCount="indefinite"
+                      />
                     </line>
-                    <line x1="200" y1="140" x2="280" y2="220" stroke="#E5195E" strokeWidth="2" strokeDasharray="4,4">
+                    <line
-                      <animate attributeName="stroke-dashoffset" values="0;-8" dur="3.5s" repeatCount="indefinite" />
+                      x1="200"
+                      y1="140"
+                      x2="280"
+                      y2="220"
+                      stroke="#E5195E"
+                      strokeWidth="2"
+                      strokeDasharray="4,4"
+                    >
+                      <animate
+                        attributeName="stroke-dashoffset"
+                        values="0;-8"
+                        dur="3.5s"
+                        repeatCount="indefinite"
+                      />
                     </line>
                   </g>
                 </svg>
@@ -276,15 +360,24 @@ const APIHeroWithCTA = () => {
                 transition={{ duration: 0.8, delay: 1.4 }}
                 className="flex justify-center gap-4 flex-wrap"
               >
-                <Badge variant="secondary" className="bg-blue-500/20 text-blue-300 border-blue-500/30">
+                <Badge
+                  variant="secondary"
+                  className="bg-blue-500/20 text-blue-300 border-blue-500/30"
+                >
                   <TrendingUp className="w-3 h-3 mr-1" />
                   Scalable
                 </Badge>
-                <Badge variant="secondary" className="bg-green-500/20 text-green-300 border-green-500/30">
+                <Badge
+                  variant="secondary"
+                  className="bg-green-500/20 text-green-300 border-green-500/30"
+                >
                   <Zap className="w-3 h-3 mr-1" />
                   High-Performance
                 </Badge>
-                <Badge variant="secondary" className="bg-purple-500/20 text-purple-300 border-purple-500/30">
+                <Badge
+                  variant="secondary"
+                  className="bg-purple-500/20 text-purple-300 border-purple-500/30"
+                >
                   <Shield className="w-3 h-3 mr-1" />
                   Secure
                 </Badge>
@@ -303,28 +396,31 @@ const APIBenefits = () => {
     {
       icon: TrendingUp,
       title: "Scalability for Growth",
-      description: "Handles increased data volume and user traffic seamlessly."
+      description: "Handles increased data volume and user traffic seamlessly.",
     },
     {
       icon: Zap,
       title: "Enhanced Performance",
-      description: "Fast data retrieval and processing for responsive applications."
+      description:
+        "Fast data retrieval and processing for responsive applications.",
     },
     {
       icon: Shield,
       title: "Ironclad Security",
-      description: "Protecting sensitive data and ensuring secure transactions."
+      description:
+        "Protecting sensitive data and ensuring secure transactions.",
     },
     {
       icon: Network,
       title: "Seamless Integration",
-      description: "Facilitates communication between diverse systems and services."
+      description:
+        "Facilitates communication between diverse systems and services.",
     },
     {
       icon: GitBranch,
       title: "Future-Proof Architecture",
-      description: "Modular and flexible for future expansion and innovation."
+      description: "Modular and flexible for future expansion and innovation.",
-    }
+    },
   ];
 
   return (
@@ -426,34 +522,40 @@ const APIProcess = () => {
   const steps = [
     {
       title: "Requirements & Architecture Design",
-      description: "Deep analysis of your system requirements, data flows, and designing robust, scalable architecture that supports your business goals.",
+      description:
-      icon: ClipboardList
+        "Deep analysis of your system requirements, data flows, and designing robust, scalable architecture that supports your business goals.",
+      icon: ClipboardList,
     },
     {
       title: "Database Design & Modeling",
-      description: "Creating optimized database schemas, relationships, and data models for efficient storage, retrieval, and performance.",
+      description:
-      icon: Database
+        "Creating optimized database schemas, relationships, and data models for efficient storage, retrieval, and performance.",
+      icon: Database,
     },
     {
       title: "API Development & Logic Implementation",
-      description: "Building RESTful APIs, GraphQL endpoints, and implementing core business logic with clean, maintainable code.",
+      description:
-      icon: Code
+        "Building RESTful APIs, GraphQL endpoints, and implementing core business logic with clean, maintainable code.",
+      icon: Code,
     },
     {
       title: "Security & Performance Testing",
-      description: "Comprehensive security audits, load testing, and performance optimization to ensure robust and fast backend systems.",
+      description:
-      icon: ShieldCheck
+        "Comprehensive security audits, load testing, and performance optimization to ensure robust and fast backend systems.",
+      icon: ShieldCheck,
     },
     {
       title: "Deployment & DevOps",
-      description: "Setting up CI/CD pipelines, container orchestration, and cloud infrastructure for reliable production deployment.",
+      description:
-      icon: CloudCog
+        "Setting up CI/CD pipelines, container orchestration, and cloud infrastructure for reliable production deployment.",
+      icon: CloudCog,
     },
     {
       title: "Monitoring & Maintenance",
-      description: "Implementing monitoring systems, logging, and providing ongoing maintenance to ensure optimal performance and uptime.",
+      description:
-      icon: Activity
+        "Implementing monitoring systems, logging, and providing ongoing maintenance to ensure optimal performance and uptime.",
-    }
+      icon: Activity,
+    },
   ];
 
   return (
@@ -487,15 +589,23 @@ const APIProcess = () => {
                   whileInView={{ opacity: 1, x: 0 }}
                   transition={{ duration: 0.8, delay: index * 0.2 }}
                   viewport={{ once: true }}
-                  className={`flex items-center ${isEven ? 'lg:flex-row' : 'lg:flex-row-reverse'} flex-col lg:gap-16 gap-8`}
+                  className={`flex items-center ${
+                    isEven ? "lg:flex-row" : "lg:flex-row-reverse"
+                  } flex-col lg:gap-16 gap-8`}
                 >
-                  <div className={`flex-1 ${isEven ? 'lg:text-right' : 'lg:text-left'} text-center lg:text-left`}>
+                  <div
+                    className={`flex-1 ${
+                      isEven ? "lg:text-right" : "lg:text-left"
+                    } text-center lg:text-left`}
+                  >
                     <div className="bg-card/20 backdrop-blur-md rounded-2xl border border-white/10 p-8 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl">
                       <div className="flex items-center gap-4 mb-4 justify-center lg:justify-start">
                         <div className="w-12 h-12 bg-accent/20 rounded-xl flex items-center justify-center">
                           <IconComponent className="w-6 h-6 text-accent" />
                         </div>
-                        <div className="text-2xl font-bold text-accent">0{index + 1}</div>
+                        <div className="text-2xl font-bold text-accent">
+                          0{index + 1}
+                        </div>
                       </div>
                       <h3 className="text-2xl font-semibold text-foreground mb-4">
                         {step.title}
@@ -525,46 +635,83 @@ const APIServices = () => {
   const services = [
     {
       title: "RESTful API Development",
-      description: "Building robust and well-documented APIs for diverse applications.",
+      description:
+        "Building robust and well-documented APIs for diverse applications.",
       icon: Globe,
-      features: ["REST Architecture", "OpenAPI Documentation", "Versioning Strategy", "Rate Limiting"]
+      features: [
+        "REST Architecture",
+        "OpenAPI Documentation",
+        "Versioning Strategy",
+        "Rate Limiting",
+      ],
     },
     {
       title: "Microservices Architecture",
       description: "Designing scalable, independent service components.",
       icon: Component,
-      features: ["Service Decomposition", "Inter-service Communication", "Data Consistency", "Service Discovery"]
+      features: [
+        "Service Decomposition",
+        "Inter-service Communication",
+        "Data Consistency",
+        "Service Discovery",
+      ],
     },
     {
       title: "GraphQL API Development",
       description: "Efficient data fetching for complex client needs.",
       icon: Layers,
-      features: ["Schema Design", "Query Optimization", "Real-time Subscriptions", "Federation"]
+      features: [
+        "Schema Design",
+        "Query Optimization",
+        "Real-time Subscriptions",
+        "Federation",
+      ],
     },
     {
       title: "Database Design & Management",
       description: "Optimizing SQL and NoSQL databases for performance.",
       icon: Database,
-      features: ["Schema Optimization", "Query Performance", "Data Migration", "Backup Strategies"]
+      features: [
+        "Schema Optimization",
+        "Query Performance",
+        "Data Migration",
+        "Backup Strategies",
+      ],
     },
     {
       title: "Cloud Backend Solutions",
       description: "Leveraging AWS, Azure, GCP for scalable infrastructure.",
       icon: Cloud,
-      features: ["Serverless Architecture", "Auto-scaling", "Load Balancing", "Multi-region Deployment"]
+      features: [
+        "Serverless Architecture",
+        "Auto-scaling",
+        "Load Balancing",
+        "Multi-region Deployment",
+      ],
     },
     {
       title: "Backend for IoT & Devices",
       description: "Building server-side logic for connected devices.",
       icon: Wifi,
-      features: ["Device Management", "Real-time Data Processing", "Protocol Integration", "Edge Computing"]
+      features: [
+        "Device Management",
+        "Real-time Data Processing",
+        "Protocol Integration",
+        "Edge Computing",
+      ],
     },
     {
       title: "Third-Party API Integration",
-      description: "Seamlessly connecting your applications with external services.",
+      description:
+        "Seamlessly connecting your applications with external services.",
       icon: PlugZap,
-      features: ["API Integration", "Data Synchronization", "Error Handling", "Webhook Management"]
+      features: [
-    }
+        "API Integration",
+        "Data Synchronization",
+        "Error Handling",
+        "Webhook Management",
+      ],
+    },
   ];
 
   return (
@@ -613,10 +760,16 @@ const APIServices = () => {
                       {service.description}
                     </p>
                     <div className="space-y-2">
-                      <h4 className="text-sm font-medium text-white">Key Features:</h4>
+                      <h4 className="text-sm font-medium text-white">
+                        Key Features:
+                      </h4>
                       <div className="flex flex-wrap gap-2">
                         {service.features.map((feature) => (
-                          <Badge key={feature} variant="secondary" className="text-xs bg-gray-800/50 text-gray-300 border-gray-700">
+                          <Badge
+                            key={feature}
+                            variant="secondary"
+                            className="text-xs bg-gray-800/50 text-gray-300 border-gray-700"
+                          >
                             {feature}
                           </Badge>
                         ))}
@@ -662,10 +815,16 @@ const APIServices = () => {
                         {service.description}
                       </p>
                       <div className="space-y-2">
-                        <h4 className="text-sm font-medium text-white">Key Features:</h4>
+                        <h4 className="text-sm font-medium text-white">
+                          Key Features:
+                        </h4>
                         <div className="flex flex-wrap gap-2">
                           {service.features.map((feature) => (
-                            <Badge key={feature} variant="secondary" className="text-xs bg-gray-800/50 text-gray-300 border-gray-700">
+                            <Badge
+                              key={feature}
+                              variant="secondary"
+                              className="text-xs bg-gray-800/50 text-gray-300 border-gray-700"
+                            >
                               {feature}
                             </Badge>
                           ))}
@@ -686,39 +845,103 @@ const APIServices = () => {
 // API & Backend Tech Stack
 const APITechStack = () => {
   const backends = [
-    { name: "Node.js", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nodejs/nodejs-original.svg", category: "Runtime" },
+    {
-    { name: "Python", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/python/python-original.svg", category: "Language" },
+      name: "Node.js",
-    { name: "Java", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/java/java-original.svg", category: "Language" },
+      logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nodejs/nodejs-original.svg",
-    { name: "Ruby", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/ruby/ruby-original.svg", category: "Language" },
+      category: "Runtime",
-    { name: "Go", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/go/go-original.svg", category: "Language" },
+    },
-    { name: "PHP", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/php/php-original.svg", category: "Language" }
+    {
+      name: "Python",
+      logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/python/python-original.svg",
+      category: "Language",
+    },
+    {
+      name: "Java",
+      logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/java/java-original.svg",
+      category: "Language",
+    },
+    {
+      name: "Ruby",
+      logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/ruby/ruby-original.svg",
+      category: "Language",
+    },
+    {
+      name: "Go",
+      logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/go/go-original.svg",
+      category: "Language",
+    },
+    {
+      name: "PHP",
+      logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/php/php-original.svg",
+      category: "Language",
+    },
   ];
 
   const frameworks = [
-    { name: "Express.js", icon: Terminal, description: "Fast Node.js web framework" },
+    {
-    { name: "Django", icon: Code, description: "High-level Python web framework" },
+      name: "Express.js",
-    { name: "Spring Boot", icon: Layers, description: "Java application framework" },
+      icon: Terminal,
-    { name: "Ruby on Rails", icon: GitBranch, description: "Full-stack web framework" }
+      description: "Fast Node.js web framework",
+    },
+    {
+      name: "Django",
+      icon: Code,
+      description: "High-level Python web framework",
+    },
+    {
+      name: "Spring Boot",
+      icon: Layers,
+      description: "Java application framework",
+    },
+    {
+      name: "Ruby on Rails",
+      icon: GitBranch,
+      description: "Full-stack web framework",
+    },
   ];
 
   const databases = [
-    { name: "PostgreSQL", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/postgresql/postgresql-original.svg", category: "SQL" },
+    {
-    { name: "MySQL", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/mysql/mysql-original.svg", category: "SQL" },
+      name: "PostgreSQL",
-    { name: "MongoDB", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/mongodb/mongodb-original.svg", category: "NoSQL" },
+      logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/postgresql/postgresql-original.svg",
-    { name: "Redis", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/redis/redis-original.svg", category: "Cache" }
+      category: "SQL",
+    },
+    {
+      name: "MySQL",
+      logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/mysql/mysql-original.svg",
+      category: "SQL",
+    },
+    {
+      name: "MongoDB",
+      logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/mongodb/mongodb-original.svg",
+      category: "NoSQL",
+    },
+    {
+      name: "Redis",
+      logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/redis/redis-original.svg",
+      category: "Cache",
+    },
   ];
 
   const cloudPlatforms = [
     { name: "AWS", icon: Cloud, description: "Amazon Web Services" },
     { name: "Azure", icon: CloudCog, description: "Microsoft Azure" },
-    { name: "Google Cloud", icon: CloudLightning, description: "Google Cloud Platform" }
+    {
+      name: "Google Cloud",
+      icon: CloudLightning,
+      description: "Google Cloud Platform",
+    },
   ];
 
   const devOpsTools = [
-    { name: "Docker", icon: Container, description: "Containerization platform" },
+    {
+      name: "Docker",
+      icon: Container,
+      description: "Containerization platform",
+    },
     { name: "Kubernetes", icon: Boxes, description: "Container orchestration" },
     { name: "GraphQL", icon: Layers, description: "Query language for APIs" },
-    { name: "REST", icon: Globe, description: "RESTful API architecture" }
+    { name: "REST", icon: Globe, description: "RESTful API architecture" },
   ];
 
   return (
@@ -735,7 +958,8 @@ const APITechStack = () => {
             Building Secure and High-Performance Backends
           </h2>
           <p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
-            With industry-leading technologies that ensure scalability, security, and reliability.
+            With industry-leading technologies that ensure scalability,
+            security, and reliability.
           </p>
         </motion.div>
 
@@ -747,7 +971,9 @@ const APITechStack = () => {
           viewport={{ once: true }}
           className="mb-16"
         >
-          <h3 className="text-2xl font-semibold text-foreground mb-8 text-center">Backend Languages & Runtimes</h3>
+          <h3 className="text-2xl font-semibold text-foreground mb-8 text-center">
+            Backend Languages & Runtimes
+          </h3>
           <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6">
             {backends.map((tech, index) => (
               <motion.div
@@ -767,8 +993,12 @@ const APITechStack = () => {
                       className="w-10 h-10 object-contain filter brightness-0 invert dark:brightness-100 dark:invert-0 group-hover:brightness-100 group-hover:invert-0 transition-all duration-300"
                     />
                   </div>
-                  <h4 className="font-semibold text-foreground text-sm mb-1">{tech.name}</h4>
+                  <h4 className="font-semibold text-foreground text-sm mb-1">
-                  <p className="text-xs text-muted-foreground">{tech.category}</p>
+                    {tech.name}
+                  </h4>
+                  <p className="text-xs text-muted-foreground">
+                    {tech.category}
+                  </p>
                 </Card>
               </motion.div>
             ))}
@@ -783,7 +1013,9 @@ const APITechStack = () => {
           viewport={{ once: true }}
           className="mb-16"
         >
-          <h3 className="text-2xl font-semibold text-foreground mb-8 text-center">Backend Frameworks</h3>
+          <h3 className="text-2xl font-semibold text-foreground mb-8 text-center">
+            Backend Frameworks
+          </h3>
           <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
             {frameworks.map((framework, index) => {
               const IconComponent = framework.icon;
@@ -801,8 +1033,12 @@ const APITechStack = () => {
                     <div className="w-12 h-12 bg-accent/20 rounded-lg flex items-center justify-center mx-auto mb-4">
                       <IconComponent className="w-6 h-6 text-accent" />
                     </div>
-                    <h4 className="font-semibold text-foreground mb-2">{framework.name}</h4>
+                    <h4 className="font-semibold text-foreground mb-2">
-                    <p className="text-sm text-muted-foreground leading-relaxed">{framework.description}</p>
+                      {framework.name}
+                    </h4>
+                    <p className="text-sm text-muted-foreground leading-relaxed">
+                      {framework.description}
+                    </p>
                   </Card>
                 </motion.div>
               );
@@ -818,7 +1054,9 @@ const APITechStack = () => {
           viewport={{ once: true }}
           className="mb-16"
         >
-          <h3 className="text-2xl font-semibold text-foreground mb-8 text-center">Database Technologies</h3>
+          <h3 className="text-2xl font-semibold text-foreground mb-8 text-center">
+            Database Technologies
+          </h3>
           <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
             {databases.map((db, index) => (
               <motion.div
@@ -838,7 +1076,9 @@ const APITechStack = () => {
                       className="w-8 h-8 object-contain filter brightness-0 invert dark:brightness-100 dark:invert-0 group-hover:brightness-100 group-hover:invert-0 transition-all duration-300"
                     />
                   </div>
-                  <h4 className="font-semibold text-foreground text-sm mb-1">{db.name}</h4>
+                  <h4 className="font-semibold text-foreground text-sm mb-1">
+                    {db.name}
+                  </h4>
                   <p className="text-xs text-muted-foreground">{db.category}</p>
                 </Card>
               </motion.div>
@@ -856,7 +1096,9 @@ const APITechStack = () => {
         >
           {/* Cloud Platforms */}
           <div>
-            <h3 className="text-2xl font-semibold text-foreground mb-8 text-center">Cloud Platforms</h3>
+            <h3 className="text-2xl font-semibold text-foreground mb-8 text-center">
+              Cloud Platforms
+            </h3>
             <div className="grid grid-cols-3 gap-4">
               {cloudPlatforms.map((platform, index) => {
                 const IconComponent = platform.icon;
@@ -874,8 +1116,12 @@ const APITechStack = () => {
                       <div className="w-10 h-10 bg-accent/20 rounded-lg flex items-center justify-center mx-auto mb-3">
                         <IconComponent className="w-5 h-5 text-accent" />
                       </div>
-                      <h4 className="font-semibold text-foreground text-sm mb-1">{platform.name}</h4>
+                      <h4 className="font-semibold text-foreground text-sm mb-1">
-                      <p className="text-xs text-muted-foreground">{platform.description}</p>
+                        {platform.name}
+                      </h4>
+                      <p className="text-xs text-muted-foreground">
+                        {platform.description}
+                      </p>
                     </Card>
                   </motion.div>
                 );
@@ -885,7 +1131,9 @@ const APITechStack = () => {
 
           {/* DevOps & Tools */}
           <div>
-            <h3 className="text-2xl font-semibold text-foreground mb-8 text-center">DevOps & API Tools</h3>
+            <h3 className="text-2xl font-semibold text-foreground mb-8 text-center">
+              DevOps & API Tools
+            </h3>
             <div className="grid grid-cols-2 gap-4">
               {devOpsTools.map((tool, index) => {
                 const IconComponent = tool.icon;
@@ -903,8 +1151,12 @@ const APITechStack = () => {
                       <div className="w-10 h-10 bg-accent/20 rounded-lg flex items-center justify-center mx-auto mb-3">
                         <IconComponent className="w-5 h-5 text-accent" />
                       </div>
-                      <h4 className="font-semibold text-foreground text-sm mb-1">{tool.name}</h4>
+                      <h4 className="font-semibold text-foreground text-sm mb-1">
-                      <p className="text-xs text-muted-foreground">{tool.description}</p>
+                        {tool.name}
+                      </h4>
+                      <p className="text-xs text-muted-foreground">
+                        {tool.description}
+                      </p>
                     </Card>
                   </motion.div>
                 );
@@ -923,30 +1175,35 @@ const APICaseStudies = () => {
     {
       title: "High-Traffic Social Platform Backend",
       client: "SocialConnect",
-      description: "Scalable microservices architecture supporting 10M+ daily active users with real-time messaging, content feeds, and comprehensive analytics systems",
+      description:
-      image: "https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=400&h=300&fit=crop&auto=format",
+        "Scalable microservices architecture supporting 10M+ daily active users with real-time messaging, content feeds, and comprehensive analytics systems",
+      image:
+        "https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=400&h=300&fit=crop&auto=format",
       results: "99.9% uptime at 10M+ DAU",
       gradient: "from-blue-500/20 to-cyan-500/20",
-      features: "Microservices, Real-time APIs, Auto-scaling"
+      features: "Microservices, Real-time APIs, Auto-scaling",
     },
     {
       title: "Financial Services API Gateway",
       client: "FinTech Pro",
-      description: "Secure, compliant API infrastructure for banking services with multi-layer security, transaction processing, and regulatory compliance features",
+      description:
-      image: "https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=400&h=300&fit=crop&auto=format",
+        "Secure, compliant API infrastructure for banking services with multi-layer security, transaction processing, and regulatory compliance features",
+      image:
+        "https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=400&h=300&fit=crop&auto=format",
       results: "PCI DSS compliant with 99.99% SLA",
       gradient: "from-green-500/20 to-emerald-500/20",
-      features: "Security Compliance, Transaction APIs, Real-time Processing"
+      features: "Security Compliance, Transaction APIs, Real-time Processing",
     },
     {
       title: "IoT Device Management Platform",
       client: "SmartTech Solutions",
-      description: "Backend infrastructure managing 500K+ connected devices with real-time data processing, device monitoring, and predictive analytics capabilities",
+      description:
+        "Backend infrastructure managing 500K+ connected devices with real-time data processing, device monitoring, and predictive analytics capabilities",
       image: iotDeviceImage,
       results: "500K+ devices managed seamlessly",
       gradient: "from-purple-500/20 to-pink-500/20",
-      features: "IoT Integration, Real-time Data, Device Management"
+      features: "IoT Integration, Real-time Data, Device Management",
-    }
+    },
   ];
 
   return (
@@ -992,7 +1249,10 @@ const APICaseStudies = () => {
                         <div className="text-xs text-gray-400 mb-2 uppercase tracking-wider">
                           {study.client}
                         </div>
-                        <Badge variant="secondary" className="text-xs bg-accent/20 text-accent border-accent/30">
+                        <Badge
+                          variant="secondary"
+                          className="text-xs bg-accent/20 text-accent border-accent/30"
+                        >
                           {study.results}
                         </Badge>
                       </div>
@@ -1004,7 +1264,9 @@ const APICaseStudies = () => {
                   </div>
 
                   <div className="px-8 pb-6 flex-1">
-                    <div className={`relative rounded-xl overflow-hidden bg-gradient-to-br ${study.gradient} p-4 border border-gray-700`}>
+                    <div
+                      className={`relative rounded-xl overflow-hidden bg-gradient-to-br ${study.gradient} p-4 border border-gray-700`}
+                    >
                       <ImageWithFallback
                         src={study.image}
                         alt={study.title}
@@ -1018,10 +1280,10 @@ const APICaseStudies = () => {
                       {study.description}
                     </p>
                     <div className="space-y-2">
-                      <h4 className="text-xs font-medium text-white uppercase tracking-wider">Key Features:</h4>
+                      <h4 className="text-xs font-medium text-white uppercase tracking-wider">
-                      <p className="text-xs text-gray-400">
+                        Key Features:
-                        {study.features}
+                      </h4>
-                      </p>
+                      <p className="text-xs text-gray-400">{study.features}</p>
                     </div>
                   </div>
 
@@ -1031,7 +1293,9 @@ const APICaseStudies = () => {
                       size="sm"
                       className="w-full justify-between text-accent hover:text-accent hover:bg-accent/10 group-hover:translate-x-1 transition-all duration-300"
                     >
-                      <span className="text-sm font-medium">VIEW CASE STUDY</span>
+                      <span className="text-sm font-medium">
+                        VIEW CASE STUDY
+                      </span>
                       <ArrowRight className="w-4 h-4" />
                     </Button>
                   </div>
@@ -1067,7 +1331,9 @@ const APIInlineCTA = () => {
             <div className="inline-block p-[2px] rounded-full bg-gradient-to-r from-accent via-blue-500 to-purple-500">
               <div className="bg-background rounded-full px-6 py-3 flex items-center gap-2">
                 <Server className="w-5 h-5 text-foreground" />
-                <span className="text-foreground text-base font-medium">Backend Excellence</span>
+                <span className="text-foreground text-base font-medium">
+                  Backend Excellence
+                </span>
               </div>
             </div>
 
@@ -1077,10 +1343,14 @@ const APIInlineCTA = () => {
             </h2>
 
             <p className="text-xl text-muted-foreground leading-relaxed max-w-2xl mx-auto">
-              Our architects and developers ensure your digital products are built on a strong foundation.
+              Our architects and developers ensure your digital products are
+              built on a strong foundation.
             </p>
 
-            <ShimmerButton className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl">
+            <ShimmerButton
+              className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl"
+              onClick={() => navigateTo("/start-a-project")}
+            >
               <div className="inline-flex items-center gap-3">
                 <MessageSquare className="w-6 h-6 flex-shrink-0" />
                 <span>Get a Free Backend Consultation</span>
@@ -1100,38 +1370,48 @@ const HireBackendDevelopers = () => {
       title: "Node.js Developers",
       description: "Specialists in JavaScript backend development",
       icon: Terminal,
-      skills: ["Express.js", "NestJS", "RESTful APIs", "Real-time Applications"]
+      skills: [
+        "Express.js",
+        "NestJS",
+        "RESTful APIs",
+        "Real-time Applications",
+      ],
     },
     {
       title: "Python Developers",
       description: "Experts in Django, Flask, and FastAPI",
       icon: Code,
-      skills: ["Django", "Flask", "FastAPI", "Data Processing"]
+      skills: ["Django", "Flask", "FastAPI", "Data Processing"],
     },
     {
       title: "Java Developers",
       description: "Spring Boot and enterprise application specialists",
       icon: Layers,
-      skills: ["Spring Boot", "Microservices", "Enterprise Solutions", "API Development"]
+      skills: [
+        "Spring Boot",
+        "Microservices",
+        "Enterprise Solutions",
+        "API Development",
+      ],
     },
     {
       title: "DevOps Engineers",
       description: "Infrastructure and deployment automation experts",
       icon: CloudCog,
-      skills: ["Docker", "Kubernetes", "CI/CD", "Cloud Platforms"]
+      skills: ["Docker", "Kubernetes", "CI/CD", "Cloud Platforms"],
     },
     {
       title: "Database Architects",
       description: "SQL and NoSQL database design specialists",
       icon: Database,
-      skills: ["PostgreSQL", "MongoDB", "Redis", "Database Optimization"]
+      skills: ["PostgreSQL", "MongoDB", "Redis", "Database Optimization"],
     },
     {
       title: "API Architects",
       description: "RESTful and GraphQL API design experts",
       icon: Globe,
-      skills: ["REST Design", "GraphQL", "API Security", "Documentation"]
+      skills: ["REST Design", "GraphQL", "API Security", "Documentation"],
-    }
+    },
   ];
 
   return (
@@ -1148,7 +1428,8 @@ const HireBackendDevelopers = () => {
             Hire Specialized Backend & API Developers
           </h2>
           <p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
-            Access our pool of expert backend engineers proficient in various languages, databases, and cloud platforms.
+            Access our pool of expert backend engineers proficient in various
+            languages, databases, and cloud platforms.
           </p>
         </motion.div>
 
@@ -1183,10 +1464,16 @@ const HireBackendDevelopers = () => {
                       {type.description}
                     </p>
                     <div className="space-y-2">
-                      <h4 className="text-sm font-medium text-white">Core Skills:</h4>
+                      <h4 className="text-sm font-medium text-white">
+                        Core Skills:
+                      </h4>
                       <div className="flex flex-wrap gap-2">
                         {type.skills.map((skill) => (
-                          <Badge key={skill} variant="secondary" className="text-xs bg-gray-800/50 text-gray-300 border-gray-700">
+                          <Badge
+                            key={skill}
+                            variant="secondary"
+                            className="text-xs bg-gray-800/50 text-gray-300 border-gray-700"
+                          >
                             {skill}
                           </Badge>
                         ))}
@@ -1235,20 +1522,24 @@ const APIFAQs = () => {
   const faqs = [
     {
       question: "What is the difference between REST and GraphQL APIs?",
-      answer: "REST is a architectural style using standard HTTP methods with multiple endpoints for different resources, while GraphQL uses a single endpoint with a query language that allows clients to request exactly the data they need. REST is simpler and widely adopted, making it great for straightforward CRUD operations. GraphQL offers more flexibility and efficiency for complex data fetching, reducing over-fetching and under-fetching of data. We help you choose the right approach based on your specific use case, team expertise, and performance requirements."
+      answer:
+        "REST is a architectural style using standard HTTP methods with multiple endpoints for different resources, while GraphQL uses a single endpoint with a query language that allows clients to request exactly the data they need. REST is simpler and widely adopted, making it great for straightforward CRUD operations. GraphQL offers more flexibility and efficiency for complex data fetching, reducing over-fetching and under-fetching of data. We help you choose the right approach based on your specific use case, team expertise, and performance requirements.",
     },
     {
       question: "How do you ensure the security of APIs?",
-      answer: "We implement multiple layers of API security including authentication (JWT, OAuth 2.0), authorization with role-based access control, rate limiting to prevent abuse, input validation and sanitization, HTTPS encryption, API key management, and comprehensive logging for audit trails. We also conduct security testing, implement CORS policies, use API gateways for additional protection, and follow OWASP guidelines. Regular security audits and penetration testing ensure your APIs remain secure against emerging threats."
+      answer:
+        "We implement multiple layers of API security including authentication (JWT, OAuth 2.0), authorization with role-based access control, rate limiting to prevent abuse, input validation and sanitization, HTTPS encryption, API key management, and comprehensive logging for audit trails. We also conduct security testing, implement CORS policies, use API gateways for additional protection, and follow OWASP guidelines. Regular security audits and penetration testing ensure your APIs remain secure against emerging threats.",
     },
     {
       question: "Can you help scale our existing backend infrastructure?",
-      answer: "Absolutely! We specialize in scaling existing backends through various approaches: performance auditing to identify bottlenecks, database optimization and query tuning, implementing caching strategies (Redis, CDN), load balancing, horizontal scaling with microservices architecture, cloud migration for auto-scaling capabilities, and code optimization. We can also refactor monolithic applications into microservices, implement container orchestration with Kubernetes, and set up monitoring systems to proactively manage performance as you grow."
+      answer:
+        "Absolutely! We specialize in scaling existing backends through various approaches: performance auditing to identify bottlenecks, database optimization and query tuning, implementing caching strategies (Redis, CDN), load balancing, horizontal scaling with microservices architecture, cloud migration for auto-scaling capabilities, and code optimization. We can also refactor monolithic applications into microservices, implement container orchestration with Kubernetes, and set up monitoring systems to proactively manage performance as you grow.",
     },
     {
       question: "What's the importance of microservices architecture?",
-      answer: "Microservices architecture breaks down applications into small, independent services that communicate via APIs. Key benefits include: independent deployment and scaling of services, technology diversity (different services can use different tech stacks), fault isolation (one service failure doesn't crash the entire system), team independence, and easier maintenance. However, microservices add complexity in service communication, data consistency, and deployment orchestration. We help you determine if microservices are right for your use case and handle the complex transition if needed."
+      answer:
-    }
+        "Microservices architecture breaks down applications into small, independent services that communicate via APIs. Key benefits include: independent deployment and scaling of services, technology diversity (different services can use different tech stacks), fault isolation (one service failure doesn't crash the entire system), team independence, and easier maintenance. However, microservices add complexity in service communication, data consistency, and deployment orchestration. We help you determine if microservices are right for your use case and handle the complex transition if needed.",
+    },
   ];
 
   return (
@@ -1281,7 +1572,9 @@ const APIFAQs = () => {
                 className="bg-gray-900/50 backdrop-blur-md rounded-2xl border border-gray-800 px-10 shadow-lg"
               >
                 <AccordionTrigger className="text-left hover:no-underline py-10 text-xl">
-                  <span className="font-semibold text-white">{faq.question}</span>
+                  <span className="font-semibold text-white">
+                    {faq.question}
+                  </span>
                 </AccordionTrigger>
                 <AccordionContent className="text-gray-300 pb-10 text-lg leading-relaxed">
                   {faq.answer}
@@ -1317,7 +1610,9 @@ const APIFinalCTA = () => {
             <div className="inline-block p-[2px] rounded-full bg-gradient-to-r from-accent via-blue-500 to-purple-500">
               <div className="bg-background rounded-full px-6 py-3 flex items-center gap-2">
                 <Server className="w-5 h-5 text-foreground" />
-                <span className="text-foreground text-base font-medium">Backend Excellence</span>
+                <span className="text-foreground text-base font-medium">
+                  Backend Excellence
+                </span>
               </div>
             </div>
           </motion.div>
@@ -1334,7 +1629,8 @@ const APIFinalCTA = () => {
             viewport={{ once: true }}
             className="text-xl text-muted-foreground mb-12 max-w-2xl mx-auto leading-relaxed"
           >
-            Ensure your applications are fast, secure, and scalable with our expert API and backend development services.
+            Ensure your applications are fast, secure, and scalable with our
+            expert API and backend development services.
           </motion.p>
 
           <motion.div
@@ -1344,7 +1640,10 @@ const APIFinalCTA = () => {
             viewport={{ once: true }}
             className="space-y-8"
           >
-            <ShimmerButton className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25">
+            <ShimmerButton
+              className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25"
+              onClick={() => navigateTo("/start-a-project")}
+            >
               <div className="inline-flex items-center gap-3">
                 <Rocket className="w-6 h-6 flex-shrink-0" />
                 <span>Empower Your Digital Products</span>
@@ -1352,7 +1651,8 @@ const APIFinalCTA = () => {
             </ShimmerButton>
 
             <p className="text-muted-foreground text-sm">
-              API Development • Microservices Architecture • Cloud Infrastructure
+              API Development • Microservices Architecture • Cloud
+              Infrastructure
             </p>
           </motion.div>
         </motion.div>

pages/AboutWDI.tsx

@@ -66,7 +66,7 @@ const HeroWithCTA = () => {
               <Button
                 variant="secondary"
                 size="lg"
-                className="text-lg px-8 py-4"
+                className="text-lg px-8 py-4 h-[56px]"
                 onClick={() => navigateTo('/case-studies')}
               >
                 <Eye className="w-4 h-4 flex-shrink-0" />
@@ -544,7 +544,7 @@ const InlineCTA = () => {
               <Button
                 variant="secondary"
                 size="lg"
-                className="text-xl px-10 py-5 rounded-2xl"
+                className="text-xl px-10 py-5 rounded-2xl h-[56px]"
                 onClick={() => navigateTo('/services')}
               >
                 <Briefcase className="w-6 h-6 flex-shrink-0" />
@@ -562,7 +562,7 @@ const InlineCTA = () => {
 const aboutWDIFAQs = [
   {
     question: "When was WDI founded?",
-    answer: "WDI was founded in 2018 with a mission to transform businesses through cutting-edge technology and exceptional service. Since then, we've grown to become industry leaders in digital solutions."
+    answer: "WDI was founded in 1999 with a mission to transform businesses through cutting-edge technology and exceptional service. Since then, we've grown to become industry leaders in digital solutions."
   },
   {
     question: "What makes WDI different from other development companies?",
@@ -589,7 +589,7 @@ export const AboutWDI = () => {
       <HeroWithCTA />
       <WhyChooseWDISection />
       <ImpactNumbersSection />
-      <LearnMoreSection />
+      {/* <LearnMoreSection /> */}
       <TestimonialSection />
       <MissionSection />
       <ProcessSection />

pages/AdminPanelsDashboards.tsx

@@ -29,17 +29,23 @@ import {
   Users as UsersIcon,
   Workflow,
   Wrench,
-  Zap
+  Zap,
 } from "lucide-react";
 import { ImageWithFallback } from "../components/figma/ImageWithFallback";
 import { Footer } from "../components/Footer";
 import { Navigation } from "../components/Navigation";
-import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "../components/ui/accordion";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "../components/ui/accordion";
 import { Badge } from "../components/ui/badge";
 import { Button } from "../components/ui/button";
 import { Card, CardContent } from "../components/ui/card";
 import { ShimmerButton } from "../components/ui/shimmer-button";
 import healthcareImage from "../src/images/healthcare.webp";
+import { navigateTo } from "@/App";
 
 // Admin Panels & Dashboards Hero Section
 const AdminHeroWithCTA = () => {
@@ -59,7 +65,9 @@ const AdminHeroWithCTA = () => {
               animate={{ opacity: 1, y: 0 }}
               transition={{ duration: 0.6 }}
             >
-              <span className="text-white/70 text-sm font-medium">Web & Cloud Solutions</span>
+              <span className="text-white/70 text-sm font-medium">
+                Web & Cloud Solutions
+              </span>
             </motion.div>
 
             {/* Main Heading */}
@@ -69,7 +77,9 @@ const AdminHeroWithCTA = () => {
               </h1>
 
               <p className="text-lg text-gray-300 leading-relaxed max-w-lg">
-                Empower your team with custom, data-rich admin interfaces and dashboards for streamlined operations, reporting, and management.
+                Empower your team with custom, data-rich admin interfaces and
+                dashboards for streamlined operations, reporting, and
+                management.
               </p>
             </div>
 
@@ -80,7 +90,10 @@ const AdminHeroWithCTA = () => {
               transition={{ duration: 0.8, delay: 0.3 }}
               className="flex flex-col sm:flex-row gap-4"
             >
-              <ShimmerButton className="text-lg px-8 py-4">
+              <ShimmerButton
+                className="text-lg px-8 py-4"
+                onClick={() => navigateTo("/start-a-project")}
+              >
                 <div className="inline-flex items-center gap-2">
                   <Monitor className="w-5 h-5 flex-shrink-0" />
                   <span>Request a Demo</span>
@@ -117,7 +130,9 @@ const AdminHeroWithCTA = () => {
                   <div className="flex items-center justify-between mb-6">
                     <div className="flex items-center gap-2">
                       <Monitor className="w-5 h-5 text-white" />
-                      <span className="text-white text-sm font-medium">Admin Dashboard</span>
+                      <span className="text-white text-sm font-medium">
+                        Admin Dashboard
+                      </span>
                     </div>
                     <div className="flex items-center gap-2">
                       <Bell className="w-4 h-4 text-white/80" />
@@ -132,17 +147,31 @@ const AdminHeroWithCTA = () => {
                     <div className="bg-white/20 rounded-lg p-3 col-span-2">
                       <BarChart2 className="w-4 h-4 text-white/80 mb-2" />
                       <div className="h-8 bg-white/20 rounded flex items-end gap-1 p-1">
-                        <div className="w-2 bg-white/60 rounded" style={{height: '60%'}}></div>
+                        <div
-                        <div className="w-2 bg-white/80 rounded" style={{height: '80%'}}></div>
+                          className="w-2 bg-white/60 rounded"
-                        <div className="w-2 bg-white/60 rounded" style={{height: '40%'}}></div>
+                          style={{ height: "60%" }}
-                        <div className="w-2 bg-white rounded" style={{height: '100%'}}></div>
+                        ></div>
+                        <div
+                          className="w-2 bg-white/80 rounded"
+                          style={{ height: "80%" }}
+                        ></div>
+                        <div
+                          className="w-2 bg-white/60 rounded"
+                          style={{ height: "40%" }}
+                        ></div>
+                        <div
+                          className="w-2 bg-white rounded"
+                          style={{ height: "100%" }}
+                        ></div>
                       </div>
                     </div>
 
                     {/* Stats Widget */}
                     <div className="bg-white/20 rounded-lg p-3 flex flex-col items-center justify-center">
                       <UsersIcon className="w-4 h-4 text-white/80 mb-1" />
-                      <span className="text-white text-xs font-medium">1,247</span>
+                      <span className="text-white text-xs font-medium">
+                        1,247
+                      </span>
                     </div>
                   </div>
 
@@ -150,7 +179,9 @@ const AdminHeroWithCTA = () => {
                   <div className="bg-white/20 rounded-lg p-2">
                     <div className="flex items-center gap-2 mb-2">
                       <Table className="w-3 h-3 text-white/80" />
-                      <span className="text-white text-xs">Data Management</span>
+                      <span className="text-white text-xs">
+                        Data Management
+                      </span>
                     </div>
                     <div className="space-y-1">
                       {[1, 2, 3].map((i) => (
@@ -238,20 +269,75 @@ const AdminHeroWithCTA = () => {
                 </div>
 
                 {/* Connection Lines */}
-                <svg className="absolute inset-0 w-full h-full pointer-events-none" style={{top: '-20px', width: '100%', height: '400px'}}>
+                <svg
+                  className="absolute inset-0 w-full h-full pointer-events-none"
+                  style={{ top: "-20px", width: "100%", height: "400px" }}
+                >
                   <g className="opacity-30">
                     {/* Lines from Dashboard to modules */}
-                    <line x1="200" y1="120" x2="120" y2="200" stroke="#E5195E" strokeWidth="2" strokeDasharray="4,4">
+                    <line
-                      <animate attributeName="stroke-dashoffset" values="0;-8" dur="2s" repeatCount="indefinite" />
+                      x1="200"
+                      y1="120"
+                      x2="120"
+                      y2="200"
+                      stroke="#E5195E"
+                      strokeWidth="2"
+                      strokeDasharray="4,4"
+                    >
+                      <animate
+                        attributeName="stroke-dashoffset"
+                        values="0;-8"
+                        dur="2s"
+                        repeatCount="indefinite"
+                      />
                     </line>
-                    <line x1="200" y1="120" x2="160" y2="200" stroke="#E5195E" strokeWidth="2" strokeDasharray="4,4">
+                    <line
-                      <animate attributeName="stroke-dashoffset" values="0;-8" dur="2.5s" repeatCount="indefinite" />
+                      x1="200"
+                      y1="120"
+                      x2="160"
+                      y2="200"
+                      stroke="#E5195E"
+                      strokeWidth="2"
+                      strokeDasharray="4,4"
+                    >
+                      <animate
+                        attributeName="stroke-dashoffset"
+                        values="0;-8"
+                        dur="2.5s"
+                        repeatCount="indefinite"
+                      />
                     </line>
-                    <line x1="200" y1="120" x2="240" y2="200" stroke="#E5195E" strokeWidth="2" strokeDasharray="4,4">
+                    <line
-                      <animate attributeName="stroke-dashoffset" values="0;-8" dur="3s" repeatCount="indefinite" />
+                      x1="200"
+                      y1="120"
+                      x2="240"
+                      y2="200"
+                      stroke="#E5195E"
+                      strokeWidth="2"
+                      strokeDasharray="4,4"
+                    >
+                      <animate
+                        attributeName="stroke-dashoffset"
+                        values="0;-8"
+                        dur="3s"
+                        repeatCount="indefinite"
+                      />
                     </line>
-                    <line x1="200" y1="120" x2="280" y2="200" stroke="#E5195E" strokeWidth="2" strokeDasharray="4,4">
+                    <line
-                      <animate attributeName="stroke-dashoffset" values="0;-8" dur="3.5s" repeatCount="indefinite" />
+                      x1="200"
+                      y1="120"
+                      x2="280"
+                      y2="200"
+                      stroke="#E5195E"
+                      strokeWidth="2"
+                      strokeDasharray="4,4"
+                    >
+                      <animate
+                        attributeName="stroke-dashoffset"
+                        values="0;-8"
+                        dur="3.5s"
+                        repeatCount="indefinite"
+                      />
                     </line>
                   </g>
                 </svg>
@@ -264,15 +350,24 @@ const AdminHeroWithCTA = () => {
                 transition={{ duration: 0.8, delay: 1.2 }}
                 className="flex justify-center gap-4 flex-wrap"
               >
-                <Badge variant="secondary" className="bg-blue-500/20 text-blue-300 border-blue-500/30">
+                <Badge
+                  variant="secondary"
+                  className="bg-blue-500/20 text-blue-300 border-blue-500/30"
+                >
                   <BarChart className="w-3 h-3 mr-1" />
                   Data-Rich
                 </Badge>
-                <Badge variant="secondary" className="bg-green-500/20 text-green-300 border-green-500/30">
+                <Badge
+                  variant="secondary"
+                  className="bg-green-500/20 text-green-300 border-green-500/30"
+                >
                   <Zap className="w-3 h-3 mr-1" />
                   Intuitive
                 </Badge>
-                <Badge variant="secondary" className="bg-purple-500/20 text-purple-300 border-purple-500/30">
+                <Badge
+                  variant="secondary"
+                  className="bg-purple-500/20 text-purple-300 border-purple-500/30"
+                >
                   <Shield className="w-3 h-3 mr-1" />
                   Secure
                 </Badge>
@@ -291,28 +386,28 @@ const AdminBenefits = () => {
     {
       icon: Workflow,
       title: "Streamlined Operations",
-      description: "Centralized control for all business functions."
+      description: "Centralized control for all business functions.",
     },
     {
       icon: BarChart,
       title: "Actionable Insights",
-      description: "Real-time data visualization for informed decisions."
+      description: "Real-time data visualization for informed decisions.",
     },
     {
       icon: Shield,
       title: "Enhanced Security",
-      description: "Granular access controls and data protection."
+      description: "Granular access controls and data protection.",
     },
     {
       icon: TrendingUp,
       title: "Scalability & Flexibility",
-      description: "Adapts as your business processes evolve."
+      description: "Adapts as your business processes evolve.",
     },
     {
       icon: Users,
       title: "User-Centric Design",
-      description: "Intuitive interfaces for efficient team management."
+      description: "Intuitive interfaces for efficient team management.",
-    }
+    },
   ];
 
   return (
@@ -414,29 +509,34 @@ const AdminProcess = () => {
   const steps = [
     {
       title: "Requirement Gathering & Workflow Analysis",
-      description: "Deep dive into your business processes, user roles, and operational requirements to design the perfect admin solution.",
+      description:
-      icon: ClipboardList
+        "Deep dive into your business processes, user roles, and operational requirements to design the perfect admin solution.",
+      icon: ClipboardList,
     },
     {
       title: "UX/UI Design & Prototyping",
-      description: "Creating intuitive, user-friendly interfaces with wireframes and interactive prototypes for efficient workflow management.",
+      description:
-      icon: Paintbrush2
+        "Creating intuitive, user-friendly interfaces with wireframes and interactive prototypes for efficient workflow management.",
+      icon: Paintbrush2,
     },
     {
       title: "Development & Backend Integration",
-      description: "Building robust admin panels with secure backend systems, database integration, and real-time data processing capabilities.",
+      description:
-      icon: Code
+        "Building robust admin panels with secure backend systems, database integration, and real-time data processing capabilities.",
+      icon: Code,
     },
     {
       title: "Testing & Security Audit",
-      description: "Comprehensive testing including functionality, performance, security vulnerabilities, and user acceptance testing.",
+      description:
-      icon: ShieldCheck
+        "Comprehensive testing including functionality, performance, security vulnerabilities, and user acceptance testing.",
+      icon: ShieldCheck,
     },
     {
       title: "Deployment & Training",
-      description: "Seamless deployment with comprehensive team training, documentation, and ongoing support for successful adoption.",
+      description:
-      icon: GraduationCap
+        "Seamless deployment with comprehensive team training, documentation, and ongoing support for successful adoption.",
-    }
+      icon: GraduationCap,
+    },
   ];
 
   return (
@@ -470,15 +570,23 @@ const AdminProcess = () => {
                   whileInView={{ opacity: 1, x: 0 }}
                   transition={{ duration: 0.8, delay: index * 0.2 }}
                   viewport={{ once: true }}
-                  className={`flex items-center ${isEven ? 'lg:flex-row' : 'lg:flex-row-reverse'} flex-col lg:gap-16 gap-8`}
+                  className={`flex items-center ${
+                    isEven ? "lg:flex-row" : "lg:flex-row-reverse"
+                  } flex-col lg:gap-16 gap-8`}
                 >
-                  <div className={`flex-1 ${isEven ? 'lg:text-right' : 'lg:text-left'} text-center lg:text-left`}>
+                  <div
+                    className={`flex-1 ${
+                      isEven ? "lg:text-right" : "lg:text-left"
+                    } text-center lg:text-left`}
+                  >
                     <div className="bg-card/20 backdrop-blur-md rounded-2xl border border-white/10 p-8 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl">
                       <div className="flex items-center gap-4 mb-4 justify-center lg:justify-start">
                         <div className="w-12 h-12 bg-accent/20 rounded-xl flex items-center justify-center">
                           <IconComponent className="w-6 h-6 text-accent" />
                         </div>
-                        <div className="text-2xl font-bold text-accent">0{index + 1}</div>
+                        <div className="text-2xl font-bold text-accent">
+                          0{index + 1}
+                        </div>
                       </div>
                       <h3 className="text-2xl font-semibold text-foreground mb-4">
                         {step.title}
@@ -510,38 +618,68 @@ const AdminServices = () => {
       title: "User & Content Management Systems",
       description: "For websites, apps, and platforms.",
       icon: UsersIcon,
-      features: ["User Roles & Permissions", "Content Publishing", "Media Management", "Workflow Approval"]
+      features: [
+        "User Roles & Permissions",
+        "Content Publishing",
+        "Media Management",
+        "Workflow Approval",
+      ],
     },
     {
       title: "Order & Inventory Management Dashboards",
       description: "Centralized control for eCommerce/logistics.",
       icon: PackageCheck,
-      features: ["Real-time Inventory", "Order Processing", "Shipping Management", "Stock Alerts"]
+      features: [
+        "Real-time Inventory",
+        "Order Processing",
+        "Shipping Management",
+        "Stock Alerts",
+      ],
     },
     {
       title: "Analytics & Reporting Dashboards",
       description: "Visualizing key performance indicators.",
       icon: BarChart,
-      features: ["Custom Reports", "Data Visualization", "KPI Tracking", "Export Functions"]
+      features: [
+        "Custom Reports",
+        "Data Visualization",
+        "KPI Tracking",
+        "Export Functions",
+      ],
     },
     {
       title: "Customer Relationship Management (CRM) Tools",
       description: "Custom interfaces for sales and support.",
       icon: Handshake,
-      features: ["Contact Management", "Sales Pipeline", "Support Tickets", "Communication History"]
+      features: [
+        "Contact Management",
+        "Sales Pipeline",
+        "Support Tickets",
+        "Communication History",
+      ],
     },
     {
       title: "Financial & Billing Dashboards",
       description: "Managing transactions, invoices, and subscriptions.",
       icon: Receipt,
-      features: ["Invoice Generation", "Payment Tracking", "Revenue Analytics", "Subscription Management"]
+      features: [
+        "Invoice Generation",
+        "Payment Tracking",
+        "Revenue Analytics",
+        "Subscription Management",
+      ],
     },
     {
       title: "Internal Tools Development",
       description: "Bespoke applications for internal team productivity.",
       icon: Wrench,
-      features: ["Custom Workflows", "Team Collaboration", "Task Management", "Resource Planning"]
+      features: [
-    }
+        "Custom Workflows",
+        "Team Collaboration",
+        "Task Management",
+        "Resource Planning",
+      ],
+    },
   ];
 
   return (
@@ -590,10 +728,16 @@ const AdminServices = () => {
                       {service.description}
                     </p>
                     <div className="space-y-2">
-                      <h4 className="text-sm font-medium text-white">Key Features:</h4>
+                      <h4 className="text-sm font-medium text-white">
+                        Key Features:
+                      </h4>
                       <div className="flex flex-wrap gap-2">
                         {service.features.map((feature) => (
-                          <Badge key={feature} variant="secondary" className="text-xs bg-gray-800/50 text-gray-300 border-gray-700">
+                          <Badge
+                            key={feature}
+                            variant="secondary"
+                            className="text-xs bg-gray-800/50 text-gray-300 border-gray-700"
+                          >
                             {feature}
                           </Badge>
                         ))}
@@ -613,27 +757,75 @@ const AdminServices = () => {
 // Admin Panel Tech Stack
 const AdminTechStack = () => {
   const frontends = [
-    { name: "React", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/react/react-original.svg", category: "Frontend" },
+    {
-    { name: "Angular", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/angularjs/angularjs-original.svg", category: "Frontend" },
+      name: "React",
-    { name: "Vue.js", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/vuejs/vuejs-original.svg", category: "Frontend" }
+      logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/react/react-original.svg",
+      category: "Frontend",
+    },
+    {
+      name: "Angular",
+      logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/angularjs/angularjs-original.svg",
+      category: "Frontend",
+    },
+    {
+      name: "Vue.js",
+      logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/vuejs/vuejs-original.svg",
+      category: "Frontend",
+    },
   ];
 
   const backends = [
-    { name: "Node.js", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nodejs/nodejs-original.svg", category: "Backend" },
+    {
-    { name: "Python/Django", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/python/python-original.svg", category: "Backend" },
+      name: "Node.js",
-    { name: "Ruby on Rails", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/ruby/ruby-original.svg", category: "Backend" },
+      logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nodejs/nodejs-original.svg",
-    { name: "PHP/Laravel", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/php/php-original.svg", category: "Backend" }
+      category: "Backend",
+    },
+    {
+      name: "Python/Django",
+      logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/python/python-original.svg",
+      category: "Backend",
+    },
+    {
+      name: "Ruby on Rails",
+      logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/ruby/ruby-original.svg",
+      category: "Backend",
+    },
+    {
+      name: "PHP/Laravel",
+      logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/php/php-original.svg",
+      category: "Backend",
+    },
   ];
 
   const databases = [
-    { name: "PostgreSQL", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/postgresql/postgresql-original.svg", category: "Database" },
+    {
-    { name: "MySQL", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/mysql/mysql-original.svg", category: "Database" },
+      name: "PostgreSQL",
-    { name: "MongoDB", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/mongodb/mongodb-original.svg", category: "Database" }
+      logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/postgresql/postgresql-original.svg",
+      category: "Database",
+    },
+    {
+      name: "MySQL",
+      logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/mysql/mysql-original.svg",
+      category: "Database",
+    },
+    {
+      name: "MongoDB",
+      logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/mongodb/mongodb-original.svg",
+      category: "Database",
+    },
   ];
 
   const visualizationTools = [
-    { name: "Chart.js", icon: BarChart2, description: "Interactive charts and graphs" },
+    {
-    { name: "D3.js", icon: LineChart, description: "Advanced data visualization" }
+      name: "Chart.js",
+      icon: BarChart2,
+      description: "Interactive charts and graphs",
+    },
+    {
+      name: "D3.js",
+      icon: LineChart,
+      description: "Advanced data visualization",
+    },
   ];
 
   return (
@@ -650,7 +842,8 @@ const AdminTechStack = () => {
             Building Powerful and Efficient Admin Interfaces
           </h2>
           <p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
-            With reliable technologies that ensure performance, security, and scalability.
+            With reliable technologies that ensure performance, security, and
+            scalability.
           </p>
         </motion.div>
 
@@ -662,7 +855,9 @@ const AdminTechStack = () => {
           viewport={{ once: true }}
           className="mb-16"
         >
-          <h3 className="text-2xl font-semibold text-foreground mb-8 text-center">Frontend Technologies</h3>
+          <h3 className="text-2xl font-semibold text-foreground mb-8 text-center">
+            Frontend Technologies
+          </h3>
           <div className="grid grid-cols-3 gap-6 max-w-2xl mx-auto">
             {frontends.map((tech, index) => (
               <motion.div
@@ -682,8 +877,12 @@ const AdminTechStack = () => {
                       className="w-10 h-10 object-contain filter brightness-0 invert dark:brightness-100 dark:invert-0 group-hover:brightness-100 group-hover:invert-0 transition-all duration-300"
                     />
                   </div>
-                  <h4 className="font-semibold text-foreground text-sm mb-1">{tech.name}</h4>
+                  <h4 className="font-semibold text-foreground text-sm mb-1">
-                  <p className="text-xs text-muted-foreground">{tech.category}</p>
+                    {tech.name}
+                  </h4>
+                  <p className="text-xs text-muted-foreground">
+                    {tech.category}
+                  </p>
                 </Card>
               </motion.div>
             ))}
@@ -701,7 +900,9 @@ const AdminTechStack = () => {
           <div className="grid lg:grid-cols-2 gap-12">
             {/* Backend */}
             <div>
-              <h3 className="text-2xl font-semibold text-foreground mb-8 text-center">Backend Technologies</h3>
+              <h3 className="text-2xl font-semibold text-foreground mb-8 text-center">
+                Backend Technologies
+              </h3>
               <div className="grid grid-cols-2 gap-4">
                 {backends.map((tech, index) => (
                   <motion.div
@@ -721,7 +922,9 @@ const AdminTechStack = () => {
                           className="w-8 h-8 object-contain filter brightness-0 invert dark:brightness-100 dark:invert-0 group-hover:brightness-100 group-hover:invert-0 transition-all duration-300"
                         />
                       </div>
-                      <h4 className="font-semibold text-foreground text-sm">{tech.name}</h4>
+                      <h4 className="font-semibold text-foreground text-sm">
+                        {tech.name}
+                      </h4>
                     </Card>
                   </motion.div>
                 ))}
@@ -730,7 +933,9 @@ const AdminTechStack = () => {
 
             {/* Database */}
             <div>
-              <h3 className="text-2xl font-semibold text-foreground mb-8 text-center">Database Technologies</h3>
+              <h3 className="text-2xl font-semibold text-foreground mb-8 text-center">
+                Database Technologies
+              </h3>
               <div className="grid grid-cols-3 gap-4">
                 {databases.map((tech, index) => (
                   <motion.div
@@ -750,7 +955,9 @@ const AdminTechStack = () => {
                           className="w-8 h-8 object-contain filter brightness-0 invert dark:brightness-100 dark:invert-0 group-hover:brightness-100 group-hover:invert-0 transition-all duration-300"
                         />
                       </div>
-                      <h4 className="font-semibold text-foreground text-sm">{tech.name}</h4>
+                      <h4 className="font-semibold text-foreground text-sm">
+                        {tech.name}
+                      </h4>
                     </Card>
                   </motion.div>
                 ))}
@@ -766,7 +973,9 @@ const AdminTechStack = () => {
           transition={{ duration: 0.8, delay: 0.4 }}
           viewport={{ once: true }}
         >
-          <h3 className="text-2xl font-semibold text-foreground mb-8 text-center">Data Visualization Tools</h3>
+          <h3 className="text-2xl font-semibold text-foreground mb-8 text-center">
+            Data Visualization Tools
+          </h3>
           <div className="grid md:grid-cols-2 gap-6 max-w-4xl mx-auto">
             {visualizationTools.map((tool, index) => {
               const IconComponent = tool.icon;
@@ -784,8 +993,12 @@ const AdminTechStack = () => {
                     <div className="w-12 h-12 bg-accent/20 rounded-lg flex items-center justify-center mx-auto mb-4">
                       <IconComponent className="w-6 h-6 text-accent" />
                     </div>
-                    <h4 className="font-semibold text-foreground mb-2">{tool.name}</h4>
+                    <h4 className="font-semibold text-foreground mb-2">
-                    <p className="text-sm text-muted-foreground leading-relaxed">{tool.description}</p>
+                      {tool.name}
+                    </h4>
+                    <p className="text-sm text-muted-foreground leading-relaxed">
+                      {tool.description}
+                    </p>
                   </Card>
                 </motion.div>
               );
@@ -803,30 +1016,37 @@ const AdminCaseStudies = () => {
     {
       title: "Healthcare Practice Management Dashboard",
       client: "MedCare Solutions",
-      description: "Comprehensive admin panel for managing patient records, appointments, billing, and compliance reporting with HIPAA-compliant security features",
+      description:
+        "Comprehensive admin panel for managing patient records, appointments, billing, and compliance reporting with HIPAA-compliant security features",
       image: healthcareImage,
       results: "75% reduction in admin time",
       gradient: "from-blue-500/20 to-cyan-500/20",
-      features: "Patient Management, Appointment Scheduling, Billing Integration"
+      features:
+        "Patient Management, Appointment Scheduling, Billing Integration",
     },
     {
       title: "E-learning Platform Admin Console",
       client: "EduTech Pro",
-      description: "Advanced admin dashboard for course management, student analytics, instructor tools, and automated grading systems with real-time progress tracking",
+      description:
-      image: "https://images.unsplash.com/photo-1522202176988-66273c2fd55f?w=400&h=300&fit=crop&auto=format",
+        "Advanced admin dashboard for course management, student analytics, instructor tools, and automated grading systems with real-time progress tracking",
+      image:
+        "https://images.unsplash.com/photo-1522202176988-66273c2fd55f?w=400&h=300&fit=crop&auto=format",
       results: "90% faster course deployment",
       gradient: "from-green-500/20 to-emerald-500/20",
-      features: "Course Management, Student Analytics, Automated Grading"
+      features: "Course Management, Student Analytics, Automated Grading",
     },
     {
       title: "Multi-Store Inventory Management System",
       client: "RetailChain Inc",
-      description: "Centralized admin panel for managing inventory across 50+ retail locations with real-time stock monitoring, automated reordering, and sales analytics",
+      description:
-      image: "https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?w=400&h=300&fit=crop&auto=format",
+        "Centralized admin panel for managing inventory across 50+ retail locations with real-time stock monitoring, automated reordering, and sales analytics",
+      image:
+        "https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?w=400&h=300&fit=crop&auto=format",
       results: "60% improvement in stock accuracy",
       gradient: "from-purple-500/20 to-pink-500/20",
-      features: "Multi-location Inventory, Automated Reordering, Sales Analytics"
+      features:
-    }
+        "Multi-location Inventory, Automated Reordering, Sales Analytics",
+    },
   ];
 
   return (
@@ -872,7 +1092,10 @@ const AdminCaseStudies = () => {
                         <div className="text-xs text-gray-400 mb-2 uppercase tracking-wider">
                           {study.client}
                         </div>
-                        <Badge variant="secondary" className="text-xs bg-accent/20 text-accent border-accent/30">
+                        <Badge
+                          variant="secondary"
+                          className="text-xs bg-accent/20 text-accent border-accent/30"
+                        >
                           {study.results}
                         </Badge>
                       </div>
@@ -884,7 +1107,9 @@ const AdminCaseStudies = () => {
                   </div>
 
                   <div className="px-8 pb-6 flex-1">
-                    <div className={`relative rounded-xl overflow-hidden bg-gradient-to-br ${study.gradient} p-4 border border-gray-700`}>
+                    <div
+                      className={`relative rounded-xl overflow-hidden bg-gradient-to-br ${study.gradient} p-4 border border-gray-700`}
+                    >
                       <ImageWithFallback
                         src={study.image}
                         alt={study.title}
@@ -898,10 +1123,10 @@ const AdminCaseStudies = () => {
                       {study.description}
                     </p>
                     <div className="space-y-2">
-                      <h4 className="text-xs font-medium text-white uppercase tracking-wider">Key Features:</h4>
+                      <h4 className="text-xs font-medium text-white uppercase tracking-wider">
-                      <p className="text-xs text-gray-400">
+                        Key Features:
-                        {study.features}
+                      </h4>
-                      </p>
+                      <p className="text-xs text-gray-400">{study.features}</p>
                     </div>
                   </div>
 
@@ -911,7 +1136,9 @@ const AdminCaseStudies = () => {
                       size="sm"
                       className="w-full justify-between text-accent hover:text-accent hover:bg-accent/10 group-hover:translate-x-1 transition-all duration-300"
                     >
-                      <span className="text-sm font-medium">VIEW CASE STUDY</span>
+                      <span className="text-sm font-medium">
+                        VIEW CASE STUDY
+                      </span>
                       <ArrowRight className="w-4 h-4" />
                     </Button>
                   </div>
@@ -947,7 +1174,9 @@ const AdminInlineCTA = () => {
             <div className="inline-block p-[2px] rounded-full bg-gradient-to-r from-accent via-blue-500 to-purple-500">
               <div className="bg-background rounded-full px-6 py-3 flex items-center gap-2">
                 <Workflow className="w-5 h-5 text-foreground" />
-                <span className="text-foreground text-base font-medium">Operational Excellence</span>
+                <span className="text-foreground text-base font-medium">
+                  Operational Excellence
+                </span>
               </div>
             </div>
 
@@ -957,10 +1186,14 @@ const AdminInlineCTA = () => {
             </h2>
 
             <p className="text-xl text-muted-foreground leading-relaxed max-w-2xl mx-auto">
-              Let's design an admin panel that empowers your team and optimizes workflows.
+              Let's design an admin panel that empowers your team and optimizes
+              workflows.
             </p>
 
-            <ShimmerButton className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl">
+            <ShimmerButton
+              className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl"
+              onClick={() => navigateTo("/start-a-project")}
+            >
               <div className="inline-flex items-center gap-3">
                 <MessageSquare className="w-6 h-6 flex-shrink-0" />
                 <span>Request a Custom Dashboard Consultation</span>
@@ -980,26 +1213,46 @@ const HireDesigners = () => {
       title: "UI/UX Designers",
       description: "Specialists in intuitive admin interface design",
       icon: Palette,
-      skills: ["User Experience Design", "Interface Design", "Wireframing", "Prototyping"]
+      skills: [
+        "User Experience Design",
+        "Interface Design",
+        "Wireframing",
+        "Prototyping",
+      ],
     },
     {
       title: "Dashboard Designers",
       description: "Experts in data visualization and dashboard layouts",
       icon: BarChart,
-      skills: ["Data Visualization", "Dashboard Design", "Information Architecture", "User Research"]
+      skills: [
+        "Data Visualization",
+        "Dashboard Design",
+        "Information Architecture",
+        "User Research",
+      ],
     },
     {
       title: "Interaction Designers",
       description: "Focused on user interactions and workflow optimization",
       icon: MousePointer,
-      skills: ["Interaction Design", "User Flow Design", "Usability Testing", "Accessibility Design"]
+      skills: [
+        "Interaction Design",
+        "User Flow Design",
+        "Usability Testing",
+        "Accessibility Design",
+      ],
     },
     {
       title: "Product Designers",
       description: "End-to-end design for complex admin systems",
       icon: Briefcase,
-      skills: ["Product Strategy", "Design Systems", "User Testing", "Cross-platform Design"]
+      skills: [
-    }
+        "Product Strategy",
+        "Design Systems",
+        "User Testing",
+        "Cross-platform Design",
+      ],
+    },
   ];
 
   return (
@@ -1016,7 +1269,8 @@ const HireDesigners = () => {
             Need UI/UX Expertise for Your Admin Panel?
           </h2>
           <p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
-            Our designers specialize in creating intuitive and functional interfaces for complex dashboards and internal tools.
+            Our designers specialize in creating intuitive and functional
+            interfaces for complex dashboards and internal tools.
           </p>
         </motion.div>
 
@@ -1051,10 +1305,16 @@ const HireDesigners = () => {
                       {type.description}
                     </p>
                     <div className="space-y-2">
-                      <h4 className="text-sm font-medium text-white">Core Skills:</h4>
+                      <h4 className="text-sm font-medium text-white">
+                        Core Skills:
+                      </h4>
                       <div className="flex flex-wrap gap-2">
                         {type.skills.map((skill) => (
-                          <Badge key={skill} variant="secondary" className="text-xs bg-gray-800/50 text-gray-300 border-gray-700">
+                          <Badge
+                            key={skill}
+                            variant="secondary"
+                            className="text-xs bg-gray-800/50 text-gray-300 border-gray-700"
+                          >
                             {skill}
                           </Badge>
                         ))}
@@ -1103,20 +1363,25 @@ const AdminFAQs = () => {
   const faqs = [
     {
       question: "Can you integrate our admin panel with existing systems?",
-      answer: "Absolutely! We specialize in creating admin panels that seamlessly integrate with your existing databases, APIs, CRM systems, and third-party tools. Our integration approach includes careful data mapping, secure API connections, and real-time synchronization to ensure your admin panel works harmoniously with your current technology stack while maintaining data integrity and security."
+      answer:
+        "Absolutely! We specialize in creating admin panels that seamlessly integrate with your existing databases, APIs, CRM systems, and third-party tools. Our integration approach includes careful data mapping, secure API connections, and real-time synchronization to ensure your admin panel works harmoniously with your current technology stack while maintaining data integrity and security.",
     },
     {
       question: "How do you ensure data security for internal tools?",
-      answer: "Security is paramount in our admin panel development. We implement multi-layered security including role-based access controls, encrypted data transmission, secure authentication (including multi-factor authentication), regular security audits, and compliance with industry standards like GDPR, HIPAA, or SOC 2. All sensitive data is encrypted both in transit and at rest, with comprehensive audit trails for all user actions."
+      answer:
+        "Security is paramount in our admin panel development. We implement multi-layered security including role-based access controls, encrypted data transmission, secure authentication (including multi-factor authentication), regular security audits, and compliance with industry standards like GDPR, HIPAA, or SOC 2. All sensitive data is encrypted both in transit and at rest, with comprehensive audit trails for all user actions.",
     },
     {
       question: "What is the importance of UX in admin panel design?",
-      answer: "Great UX in admin panels is crucial for productivity and user adoption. Poor UX leads to errors, inefficiency, and user frustration. We focus on intuitive navigation, clear information hierarchy, efficient workflows, and user-friendly interfaces that reduce training time and increase accuracy. Good admin panel UX can improve operational efficiency by 40-70% and significantly reduce user errors and support requests."
+      answer:
+        "Great UX in admin panels is crucial for productivity and user adoption. Poor UX leads to errors, inefficiency, and user frustration. We focus on intuitive navigation, clear information hierarchy, efficient workflows, and user-friendly interfaces that reduce training time and increase accuracy. Good admin panel UX can improve operational efficiency by 40-70% and significantly reduce user errors and support requests.",
     },
     {
-      question: "Do you provide training for our staff on using the new dashboard?",
+      question:
-      answer: "Yes, we provide comprehensive training and support packages. This includes hands-on training sessions for different user roles, detailed documentation, video tutorials, and ongoing support during the initial rollout period. We also offer train-the-trainer programs so your internal team can support new users, and we're available for additional training as your team grows or when new features are added."
+        "Do you provide training for our staff on using the new dashboard?",
-    }
+      answer:
+        "Yes, we provide comprehensive training and support packages. This includes hands-on training sessions for different user roles, detailed documentation, video tutorials, and ongoing support during the initial rollout period. We also offer train-the-trainer programs so your internal team can support new users, and we're available for additional training as your team grows or when new features are added.",
+    },
   ];
 
   return (
@@ -1149,7 +1414,9 @@ const AdminFAQs = () => {
                 className="bg-gray-900/50 backdrop-blur-md rounded-2xl border border-gray-800 px-10 shadow-lg"
               >
                 <AccordionTrigger className="text-left hover:no-underline py-10 text-xl">
-                  <span className="font-semibold text-white">{faq.question}</span>
+                  <span className="font-semibold text-white">
+                    {faq.question}
+                  </span>
                 </AccordionTrigger>
                 <AccordionContent className="text-gray-300 pb-10 text-lg leading-relaxed">
                   {faq.answer}
@@ -1185,7 +1452,9 @@ const AdminFinalCTA = () => {
             <div className="inline-block p-[2px] rounded-full bg-gradient-to-r from-accent via-blue-500 to-purple-500">
               <div className="bg-background rounded-full px-6 py-3 flex items-center gap-2">
                 <Monitor className="w-5 h-5 text-foreground" />
-                <span className="text-foreground text-base font-medium">Operational Excellence</span>
+                <span className="text-foreground text-base font-medium">
+                  Operational Excellence
+                </span>
               </div>
             </div>
           </motion.div>
@@ -1202,7 +1471,8 @@ const AdminFinalCTA = () => {
             viewport={{ once: true }}
             className="text-xl text-muted-foreground mb-12 max-w-2xl mx-auto leading-relaxed"
           >
-            Transform your internal operations with efficient, data-driven dashboards and management systems.
+            Transform your internal operations with efficient, data-driven
+            dashboards and management systems.
           </motion.p>
 
           <motion.div
@@ -1212,7 +1482,10 @@ const AdminFinalCTA = () => {
             viewport={{ once: true }}
             className="space-y-8"
           >
-            <ShimmerButton className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25">
+            <ShimmerButton
+              className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25"
+              onClick={() => navigateTo("/start-a-project")}
+            >
               <div className="inline-flex items-center gap-3">
                 <TrendingUp className="w-6 h-6 flex-shrink-0" />
                 <span>Optimize Your Business Today</span>

pages/AndroidAppDevelopment.tsx

@@ -39,6 +39,7 @@ import { Button } from "../components/ui/button";
 import { Card, CardContent } from "../components/ui/card";
 import { ShimmerButton } from "../components/ui/shimmer-button";
 import androidVectorImage from "../src/images/android-vector.png";
+import { navigateTo } from "@/App";
 
 // Android Hero Section with Android device mockups and Android vector
 const AndroidHeroWithCTA = () => {
@@ -113,7 +114,10 @@ const AndroidHeroWithCTA = () => {
               transition={{ duration: 0.8, delay: 0.3 }}
               className="flex flex-col sm:flex-row gap-4"
             >
-              <ShimmerButton className="text-lg px-8 py-4">
+              <ShimmerButton
+                className="text-lg px-8 py-4"
+                onClick={() => navigateTo("/start-a-project")}
+              >
                 <div className="inline-flex items-center gap-2">
                   <svg
                     className="w-6 h-4 flex-shrink-0"
@@ -911,7 +915,10 @@ const AndroidInlineCTA = () => {
               and create apps that stand out.
             </p>
 
-            <ShimmerButton className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl">
+            <ShimmerButton
+              className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl"
+              onClick={() => navigateTo("/start-a-project")}
+            >
               <div className="inline-flex items-center gap-3">
                 <svg
                   className="w-6 h-6 flex-shrink-0"
@@ -1054,7 +1061,10 @@ const HireAndroidDevelopers = () => {
           viewport={{ once: true }}
           className="flex flex-col sm:flex-row gap-4 justify-center"
         >
-          <ShimmerButton className="px-8 py-4">
+          <ShimmerButton
+            className="px-8 py-4"
+            onClick={() => navigateTo("/start-a-project")}
+          >
             <div className="inline-flex items-center gap-2">
               <UserPlus className="w-5 h-5 flex-shrink-0" />
               <span>Hire Android Developers</span>
@@ -1062,7 +1072,7 @@ const HireAndroidDevelopers = () => {
           </ShimmerButton>
           <Button
             variant="outline"
-            className="border-white/20 text-foreground hover:bg-white/10 px-8 py-4 rounded-lg transition-all duration-300"
+            className="border-white/20 text-foreground hover:bg-white/10 px-8 py-4 h-[56px] rounded-lg transition-all duration-300"
           >
             <span>Request Profiles</span>
             <ArrowRight className="ml-2 w-4 h-4" />
@@ -1213,7 +1223,10 @@ const AndroidFinalCTA = () => {
             viewport={{ once: true }}
             className="space-y-8"
           >
-            <ShimmerButton className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25">
+            <ShimmerButton
+              className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25"
+              onClick={() => navigateTo("/start-a-project")}
+            >
               <div className="inline-flex items-center gap-3">
                 <svg
                   className="w-6 h-6 flex-shrink-0"

pages/Careers.tsx

@@ -17,75 +17,77 @@ import {
   TrendingUp,
   Briefcase,
   Building,
-  Database
+  Database,
+  Bug,
+  LineChart
 } from "lucide-react";
 
 export const Careers = () => {
   // Job positions data
   const openPositions = [
     {
-      title: "Frontend Developer",
+      title: "Jr. Flutter Developer",
-      department: "Engineering",
+      department: "Mobile Development",
-      location: "Remote",
+      location: "In-office",
       type: "Full-time",
-      description: "Build responsive web applications using React, TypeScript, and modern CSS frameworks.",
+      description: "Build cross-platform mobile applications using Flutter and Dart for seamless performance across Android and iOS.",
       icon: Code
     },
     {
-      title: "Backend Developer",
+      title: "Jr. React.js Developer",
-      department: "Engineering", 
+      department: "Frontend Development",
-      location: "Mumbai",
+      location: "In-office",
       type: "Full-time",
-      description: "Develop scalable APIs and server-side applications using Node.js, Python, or Java.",
+      description: "Develop responsive and interactive web user interfaces using React.js, TypeScript, and modern JavaScript tools.",
+      icon: Code
+    },
+    {
+      title: "Jr. Laravel Developer",
+      department: "Backend Development", 
+      location: "In-office",
+      type: "Full-time",
+      description: "Build and maintain scalable web applications using Laravel, PHP, and MySQL, with a focus on clean architecture and APIs.",
       icon: Database
     },
     {
-      title: "Mobile App Developer",
+      title: "Jr. Node.js Developer",
-      department: "Engineering",
+      department: "Backend Development", 
-      location: "Remote",
+      location: "In-office",
       type: "Full-time",
-      description: "Create native iOS and Android apps or cross-platform solutions using React Native.",
+      description: "Design and implement backend services and RESTful APIs using Node.js, Express, and modern JavaScript/TypeScript.",
-      icon: Code
+      icon: Database
     },
     {
-      title: "UI/UX Designer",
+      title: "Jr. Python Developer",
-      department: "Design",
+      department: "Backend Development", 
-      location: "Remote",
+      location: "In-office",
       type: "Full-time",
-      description: "Design intuitive user interfaces and create engaging user experiences for digital products.",
+      description: "Develop server-side applications, automation scripts, and data-driven systems using Python and relevant frameworks like Django or Flask.",
-      icon: Palette
+      icon: Database
+    },
+    // {
+    //   title: "UI/UX Designer",
+    //   department: "Design & User Experience",
+    //   location: "In-office",
+    //   type: "Full-time",
+    //   description: "Design intuitive user interfaces and create engaging user experiences for digital products.",
+    //   icon: Palette
+    // },
+    {
+      title: "Jr. Software Tester / QA Engineer",
+      department: "Quality Assurance",
+      location: "In-office",
+      type: "Full-time",
+      description: "Create and execute manual and automated test plans to ensure quality, performance, and reliability of software applications.",
+      icon: Bug
     },
     {
-      title: "Product Manager",
+      title: "Business Development Executive (IT)",
-      department: "Product",
+      department: "Sales & Business Development",
-      location: "Mumbai",
+      location: "In-office",
       type: "Full-time",
-      description: "Drive product strategy, roadmap planning, and cross-functional team collaboration.",
+      description: "Generate leads, build client relationships, and drive sales growth for IT products and software services.",
-      icon: Settings
+      icon: LineChart
-    },
-    {
-      title: "DevOps Engineer",
-      department: "Engineering",
-      location: "Remote", 
-      type: "Full-time",
-      description: "Build and maintain CI/CD pipelines, cloud infrastructure, and deployment automation.",
-      icon: Building
-    },
-    {
-      title: "Sales Executive",
-      department: "Sales",
-      location: "Mumbai",
-      type: "Full-time",
-      description: "Generate leads, build client relationships, and drive revenue growth for our services.",
-      icon: TrendingUp
-    },
-    {
-      title: "QA Engineer",
-      department: "Engineering",
-      location: "Remote",
-      type: "Full-time",
-      description: "Ensure software quality through manual and automated testing across web and mobile platforms.",
-      icon: Briefcase
     }
   ];
 
@@ -269,7 +271,7 @@ Best regards,
             </motion.div>
             
             {/* Send CV Button */}
-            <motion.div
+            {/* <motion.div
               initial={{ opacity: 0, y: 20 }}
               whileInView={{ opacity: 1, y: 0 }}
               transition={{ duration: 0.6, delay: 0.3 }}
@@ -284,7 +286,7 @@ Best regards,
                 Send Your CV
                 <ArrowRight className="ml-3 w-5 h-5" />
               </Button>
-            </motion.div>
+            </motion.div> */}
           </motion.div>
         </div>
       </section>

pages/CrossPlatformAppDevelopment.tsx

@@ -20,17 +20,28 @@ import {
   UserPlus,
   Users2,
   Wrench,
-  Zap
+  Zap,
 } from "lucide-react";
 import { ImageWithFallback } from "../components/figma/ImageWithFallback";
 import { Footer } from "../components/Footer";
 import { Navigation } from "../components/Navigation";
-import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "../components/ui/accordion";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "../components/ui/accordion";
 import { Badge } from "../components/ui/badge";
 import { Button } from "../components/ui/button";
 import { Card, CardContent } from "../components/ui/card";
 import { ShimmerButton } from "../components/ui/shimmer-button";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "../components/ui/tabs";
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "../components/ui/tabs";
+import { navigateTo } from "@/App";
 
 // Cross-Platform Hero Section
 const CrossPlatformHeroWithCTA = () => {
@@ -50,7 +61,9 @@ const CrossPlatformHeroWithCTA = () => {
               animate={{ opacity: 1, y: 0 }}
               transition={{ duration: 0.6 }}
             >
-              <span className="text-white/70 text-sm font-medium">Cross-Platform App Development</span>
+              <span className="text-white/70 text-sm font-medium">
+                Cross-Platform App Development
+              </span>
             </motion.div>
 
             {/* Main Heading */}
@@ -60,7 +73,8 @@ const CrossPlatformHeroWithCTA = () => {
               </h1>
 
               <p className="text-lg text-gray-300 leading-relaxed max-w-lg">
-                Develop high-quality mobile apps that run seamlessly on iOS and Android from a single codebase, saving time and resources.
+                Develop high-quality mobile apps that run seamlessly on iOS and
+                Android from a single codebase, saving time and resources.
               </p>
             </div>
 
@@ -71,7 +85,10 @@ const CrossPlatformHeroWithCTA = () => {
               transition={{ duration: 0.8, delay: 0.3 }}
               className="flex flex-col sm:flex-row gap-4"
             >
-              <ShimmerButton className="text-lg px-8 py-4">
+              <ShimmerButton
+                className="text-lg px-8 py-4"
+                onClick={() => navigateTo("/start-a-project")}
+              >
                 <div className="inline-flex items-center gap-2">
                   <Share2 className="w-5 h-5 flex-shrink-0" />
                   <span>Discover Cross-Platform Benefits</span>
@@ -118,7 +135,9 @@ const CrossPlatformHeroWithCTA = () => {
                         <div className="h-8 bg-gray-700 rounded-lg"></div>
                       </div>
                       <div className="h-12 bg-blue-500/20 rounded-lg mt-4 flex items-center justify-center">
-                        <span className="text-xs text-blue-400 font-medium">iOS</span>
+                        <span className="text-xs text-blue-400 font-medium">
+                          iOS
+                        </span>
                       </div>
                     </div>
                   </div>
@@ -137,7 +156,9 @@ const CrossPlatformHeroWithCTA = () => {
                         <div className="h-8 bg-gray-700 rounded-lg"></div>
                       </div>
                       <div className="h-12 bg-green-500/20 rounded-lg mt-4 flex items-center justify-center">
-                        <span className="text-xs text-green-400 font-medium">Android</span>
+                        <span className="text-xs text-green-400 font-medium">
+                          Android
+                        </span>
                       </div>
                     </div>
                   </div>
@@ -156,13 +177,22 @@ const CrossPlatformHeroWithCTA = () => {
                 transition={{ duration: 0.8, delay: 0.6 }}
                 className="flex justify-center gap-4 flex-wrap"
               >
-                <Badge variant="secondary" className="bg-blue-500/20 text-blue-300 border-blue-500/30">
+                <Badge
+                  variant="secondary"
+                  className="bg-blue-500/20 text-blue-300 border-blue-500/30"
+                >
                   Flutter
                 </Badge>
-                <Badge variant="secondary" className="bg-cyan-500/20 text-cyan-300 border-cyan-500/30">
+                <Badge
+                  variant="secondary"
+                  className="bg-cyan-500/20 text-cyan-300 border-cyan-500/30"
+                >
                   React Native
                 </Badge>
-                <Badge variant="secondary" className="bg-purple-500/20 text-purple-300 border-purple-500/30">
+                <Badge
+                  variant="secondary"
+                  className="bg-purple-500/20 text-purple-300 border-purple-500/30"
+                >
                   Single Codebase
                 </Badge>
               </motion.div>
@@ -180,28 +210,33 @@ const CrossPlatformBenefits = () => {
     {
       icon: Clock,
       title: "Faster Time-to-Market",
-      description: "Simultaneous launch on multiple platforms with a single development cycle, significantly reducing time from concept to deployment."
+      description:
+        "Simultaneous launch on multiple platforms with a single development cycle, significantly reducing time from concept to deployment.",
     },
     {
       icon: DollarSign,
       title: "Cost-Effective",
-      description: "Single codebase reduces development and maintenance costs by up to 50% compared to separate native applications."
+      description:
+        "Single codebase reduces development and maintenance costs by up to 50% compared to separate native applications.",
     },
     {
       icon: Users2,
       title: "Wider Audience Reach",
-      description: "Instantly accessible to both iOS and Android users, maximizing your market penetration and user acquisition potential."
+      description:
+        "Instantly accessible to both iOS and Android users, maximizing your market penetration and user acquisition potential.",
     },
     {
       icon: Layout,
       title: "Unified User Experience",
-      description: "Consistent look and feel across platforms while maintaining platform-specific design guidelines and user expectations."
+      description:
+        "Consistent look and feel across platforms while maintaining platform-specific design guidelines and user expectations.",
     },
     {
       icon: Wrench,
       title: "Simplified Maintenance",
-      description: "Updates applied to one codebase reflect everywhere, streamlining bug fixes, feature additions, and ongoing support."
+      description:
-    }
+        "Updates applied to one codebase reflect everywhere, streamlining bug fixes, feature additions, and ongoing support.",
+    },
   ];
 
   return (
@@ -218,7 +253,8 @@ const CrossPlatformBenefits = () => {
             Advantages of Choosing Cross-Platform
           </h2>
           <p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
-            Cross-platform development offers unparalleled efficiency and reach for businesses looking to maximize their mobile app impact.
+            Cross-platform development offers unparalleled efficiency and reach
+            for businesses looking to maximize their mobile app impact.
           </p>
         </motion.div>
 
@@ -317,7 +353,8 @@ const CrossPlatformTechnologies = () => {
             Leading Cross-Platform Frameworks We Utilize
           </h2>
           <p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
-            We leverage the most powerful and mature cross-platform frameworks to deliver exceptional mobile experiences.
+            We leverage the most powerful and mature cross-platform frameworks
+            to deliver exceptional mobile experiences.
           </p>
         </motion.div>
 
@@ -337,7 +374,10 @@ const CrossPlatformTechnologies = () => {
                   Flutter Development
                 </div>
               </TabsTrigger>
-              <TabsTrigger value="react-native" className="text-base py-4 h-full">
+              <TabsTrigger
+                value="react-native"
+                className="text-base py-4 h-full"
+              >
                 <div className="flex items-center gap-2">
                   <div className="w-6 h-6 bg-cyan-500 rounded flex items-center justify-center">
                     <span className="text-white text-xs font-bold">RN</span>
@@ -358,28 +398,39 @@ const CrossPlatformTechnologies = () => {
                         </div>
                       </div>
                       <div>
-                        <h3 className="text-2xl font-semibold text-white">Flutter Development</h3>
+                        <h3 className="text-2xl font-semibold text-white">
-                        <p className="text-gray-400">Google's UI toolkit for natively compiled applications</p>
+                          Flutter Development
+                        </h3>
+                        <p className="text-gray-400">
+                          Google's UI toolkit for natively compiled applications
+                        </p>
                       </div>
                     </div>
 
                     <p className="text-gray-300 leading-relaxed">
-                      Known for expressive UIs and hot-reload functionality that accelerates development cycles. 
+                      Known for expressive UIs and hot-reload functionality that
-                      Flutter allows for pixel-perfect designs and smooth animations across platforms.
+                      accelerates development cycles. Flutter allows for
+                      pixel-perfect designs and smooth animations across
+                      platforms.
                     </p>
                   </div>
 
                   <div className="space-y-4">
-                    <h4 className="text-lg font-semibold text-white">Key Benefits:</h4>
+                    <h4 className="text-lg font-semibold text-white">
+                      Key Benefits:
+                    </h4>
                     <ul className="space-y-3">
                       {[
                         "Excellent performance with native compilation",
                         "Beautiful UIs with customizable widgets",
                         "Single codebase for mobile, web, and desktop",
                         "Fast development with hot-reload",
-                        "Growing ecosystem and strong Google backing"
+                        "Growing ecosystem and strong Google backing",
                       ].map((benefit, index) => (
-                        <li key={index} className="flex items-center gap-3 text-gray-300">
+                        <li
+                          key={index}
+                          className="flex items-center gap-3 text-gray-300"
+                        >
                           <CheckCircle className="w-5 h-5 text-blue-500 flex-shrink-0" />
                           {benefit}
                         </li>
@@ -394,7 +445,9 @@ const CrossPlatformTechnologies = () => {
                       <div className="w-12 h-12 bg-blue-500/20 rounded-xl flex items-center justify-center">
                         <Code className="w-6 h-6 text-blue-500" />
                       </div>
-                      <h4 className="text-lg font-semibold text-white">Flutter Tech Stack</h4>
+                      <h4 className="text-lg font-semibold text-white">
+                        Flutter Tech Stack
+                      </h4>
                     </div>
 
                     <div className="grid grid-cols-2 gap-4">
@@ -404,9 +457,12 @@ const CrossPlatformTechnologies = () => {
                         "Cupertino Widgets",
                         "Firebase Integration",
                         "Native Plugins",
-                        "State Management"
+                        "State Management",
                       ].map((tech, index) => (
-                        <div key={index} className="bg-gray-800/50 rounded-lg p-3 text-center">
+                        <div
+                          key={index}
+                          className="bg-gray-800/50 rounded-lg p-3 text-center"
+                        >
                           <span className="text-gray-300 text-sm">{tech}</span>
                         </div>
                       ))}
@@ -427,28 +483,38 @@ const CrossPlatformTechnologies = () => {
                         </div>
                       </div>
                       <div>
-                        <h3 className="text-2xl font-semibold text-white">React Native Development</h3>
+                        <h3 className="text-2xl font-semibold text-white">
-                        <p className="text-gray-400">Facebook's framework for building native mobile apps</p>
+                          React Native Development
+                        </h3>
+                        <p className="text-gray-400">
+                          Facebook's framework for building native mobile apps
+                        </p>
                       </div>
                     </div>
 
                     <p className="text-gray-300 leading-relaxed">
-                      Uses JavaScript and React paradigms to create truly native mobile applications. 
+                      Uses JavaScript and React paradigms to create truly native
-                      Leverages existing web development skills for mobile app creation.
+                      mobile applications. Leverages existing web development
+                      skills for mobile app creation.
                     </p>
                   </div>
 
                   <div className="space-y-4">
-                    <h4 className="text-lg font-semibold text-white">Key Benefits:</h4>
+                    <h4 className="text-lg font-semibold text-white">
+                      Key Benefits:
+                    </h4>
                     <ul className="space-y-3">
                       {[
                         "Large community and extensive libraries",
                         "Reusable components across platforms",
                         "Efficient development cycles",
                         "Native performance and feel",
-                        "Easy integration with existing React web apps"
+                        "Easy integration with existing React web apps",
                       ].map((benefit, index) => (
-                        <li key={index} className="flex items-center gap-3 text-gray-300">
+                        <li
+                          key={index}
+                          className="flex items-center gap-3 text-gray-300"
+                        >
                           <CheckCircle className="w-5 h-5 text-cyan-500 flex-shrink-0" />
                           {benefit}
                         </li>
@@ -463,7 +529,9 @@ const CrossPlatformTechnologies = () => {
                       <div className="w-12 h-12 bg-cyan-500/20 rounded-xl flex items-center justify-center">
                         <Code className="w-6 h-6 text-cyan-500" />
                       </div>
-                      <h4 className="text-lg font-semibold text-white">React Native Tech Stack</h4>
+                      <h4 className="text-lg font-semibold text-white">
+                        React Native Tech Stack
+                      </h4>
                     </div>
 
                     <div className="grid grid-cols-2 gap-4">
@@ -473,9 +541,12 @@ const CrossPlatformTechnologies = () => {
                         "Native Modules",
                         "Redux/Context API",
                         "Expo Framework",
-                        "Native Navigation"
+                        "Native Navigation",
                       ].map((tech, index) => (
-                        <div key={index} className="bg-gray-800/50 rounded-lg p-3 text-center">
+                        <div
+                          key={index}
+                          className="bg-gray-800/50 rounded-lg p-3 text-center"
+                        >
                           <span className="text-gray-300 text-sm">{tech}</span>
                         </div>
                       ))}
@@ -496,29 +567,34 @@ const CrossPlatformProcess = () => {
   const steps = [
     {
       title: "Feasibility & Strategy",
-      description: "Analyze your project requirements and determine the optimal cross-platform approach for maximum efficiency and performance.",
+      description:
-      icon: Target
+        "Analyze your project requirements and determine the optimal cross-platform approach for maximum efficiency and performance.",
+      icon: Target,
     },
     {
       title: "UI/UX Design",
-      description: "Create adaptable designs that maintain platform consistency while leveraging cross-platform capabilities for unified experiences.",
+      description:
-      icon: Palette
+        "Create adaptable designs that maintain platform consistency while leveraging cross-platform capabilities for unified experiences.",
+      icon: Palette,
     },
     {
       title: "Development",
-      description: "Build your application using Flutter or React Native, ensuring optimal performance and native-like user experience.",
+      description:
-      icon: Code
+        "Build your application using Flutter or React Native, ensuring optimal performance and native-like user experience.",
+      icon: Code,
     },
     {
       title: "Multi-Platform QA",
-      description: "Comprehensive testing across all target platforms and devices to ensure consistent functionality and performance.",
+      description:
-      icon: Bug
+        "Comprehensive testing across all target platforms and devices to ensure consistent functionality and performance.",
+      icon: Bug,
     },
     {
       title: "Launch & Optimization",
-      description: "Deploy to app stores and continuously optimize performance across platforms based on user feedback and analytics.",
+      description:
-      icon: Rocket
+        "Deploy to app stores and continuously optimize performance across platforms based on user feedback and analytics.",
-    }
+      icon: Rocket,
+    },
   ];
 
   return (
@@ -535,7 +611,8 @@ const CrossPlatformProcess = () => {
             Streamlined Process for Cross-Platform Success
           </h2>
           <p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
-            Our proven methodology ensures efficient development and deployment across multiple platforms.
+            Our proven methodology ensures efficient development and deployment
+            across multiple platforms.
           </p>
         </motion.div>
 
@@ -555,15 +632,23 @@ const CrossPlatformProcess = () => {
                   whileInView={{ opacity: 1, x: 0 }}
                   transition={{ duration: 0.8, delay: index * 0.2 }}
                   viewport={{ once: true }}
-                  className={`flex items-center ${isEven ? 'lg:flex-row' : 'lg:flex-row-reverse'} flex-col lg:gap-16 gap-8`}
+                  className={`flex items-center ${
+                    isEven ? "lg:flex-row" : "lg:flex-row-reverse"
+                  } flex-col lg:gap-16 gap-8`}
                 >
-                  <div className={`flex-1 ${isEven ? 'lg:text-right' : 'lg:text-left'} text-center lg:text-left`}>
+                  <div
+                    className={`flex-1 ${
+                      isEven ? "lg:text-right" : "lg:text-left"
+                    } text-center lg:text-left`}
+                  >
                     <div className="bg-card/20 backdrop-blur-md rounded-2xl border border-white/10 p-8 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl">
                       <div className="flex items-center gap-4 mb-4 justify-center lg:justify-start">
                         <div className="w-12 h-12 bg-accent/20 rounded-xl flex items-center justify-center">
                           <IconComponent className="w-6 h-6 text-accent" />
                         </div>
-                        <div className="text-2xl font-bold text-accent">0{index + 1}</div>
+                        <div className="text-2xl font-bold text-accent">
+                          0{index + 1}
+                        </div>
                       </div>
                       <h3 className="text-2xl font-semibold text-foreground mb-4">
                         {step.title}
@@ -593,34 +678,40 @@ const CrossPlatformServices = () => {
   const services = [
     {
       title: "New Cross-Platform App Development",
-      description: "Building custom applications from scratch using modern cross-platform frameworks for maximum efficiency.",
+      description:
-      icon: Smartphone
+        "Building custom applications from scratch using modern cross-platform frameworks for maximum efficiency.",
+      icon: Smartphone,
     },
     {
       title: "Existing App Migration",
-      description: "Migrating native apps to cross-platform solutions for improved maintenance and cost efficiency.",
+      description:
-      icon: RefreshCcw
+        "Migrating native apps to cross-platform solutions for improved maintenance and cost efficiency.",
+      icon: RefreshCcw,
     },
     {
       title: "Cross-Platform UI/UX Design",
-      description: "Designing consistent, adaptable interfaces that work seamlessly across all target platforms.",
+      description:
-      icon: Brush
+        "Designing consistent, adaptable interfaces that work seamlessly across all target platforms.",
+      icon: Brush,
     },
     {
       title: "Performance Optimization",
-      description: "Ensuring smooth performance on all devices through platform-specific optimizations and best practices.",
+      description:
-      icon: Zap
+        "Ensuring smooth performance on all devices through platform-specific optimizations and best practices.",
+      icon: Zap,
     },
     {
       title: "Integration with Third-Party APIs",
-      description: "Seamless connectivity for expanded functionality including payments, analytics, and cloud services.",
+      description:
-      icon: Network
+        "Seamless connectivity for expanded functionality including payments, analytics, and cloud services.",
+      icon: Network,
     },
     {
       title: "Cross-Platform Maintenance",
-      description: "Ongoing support and updates for cross-platform applications with unified deployment strategies.",
+      description:
-      icon: Wrench
+        "Ongoing support and updates for cross-platform applications with unified deployment strategies.",
-    }
+      icon: Wrench,
+    },
   ];
 
   return (
@@ -637,7 +728,8 @@ const CrossPlatformServices = () => {
             Our Comprehensive Cross-Platform Solutions
           </h2>
           <p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
-            From new development to migration and ongoing support, we provide end-to-end cross-platform services.
+            From new development to migration and ongoing support, we provide
+            end-to-end cross-platform services.
           </p>
         </motion.div>
 
@@ -688,30 +780,36 @@ const CrossPlatformCaseStudies = () => {
     {
       title: "FinTech Cross-Platform App with Flutter",
       client: "PayUnify",
-      description: "Unified payment solution deployed simultaneously on iOS and Android with 40% faster development",
+      description:
-      image: "https://images.unsplash.com/photo-1563013544-824ae1b704d3?w=400&h=300&fit=crop&auto=format",
+        "Unified payment solution deployed simultaneously on iOS and Android with 40% faster development",
+      image:
+        "https://images.unsplash.com/photo-1563013544-824ae1b704d3?w=400&h=300&fit=crop&auto=format",
       results: "40% faster delivery",
       gradient: "from-accent/20 to-accent/10",
-      framework: "Flutter"
+      framework: "Flutter",
     },
     {
       title: "E-Learning Platform with React Native",
       client: "EduCross",
-      description: "Educational platform serving millions of students across platforms with consistent UX",
+      description:
-      image: "https://images.unsplash.com/photo-1522202176988-66273c2fd55f?w=400&h=300&fit=crop&auto=format",
+        "Educational platform serving millions of students across platforms with consistent UX",
+      image:
+        "https://images.unsplash.com/photo-1522202176988-66273c2fd55f?w=400&h=300&fit=crop&auto=format",
       results: "2M+ students",
       gradient: "from-blue-500/20 to-cyan-500/20",
-      framework: "React Native"
+      framework: "React Native",
     },
     {
       title: "Healthcare Management with Flutter",
       client: "MediSync",
-      description: "Cross-platform healthcare app connecting patients and providers with real-time sync",
+      description:
-      image: "https://images.unsplash.com/photo-1576091160399-112ba8d25d1f?w=400&h=300&fit=crop&auto=format",
+        "Cross-platform healthcare app connecting patients and providers with real-time sync",
+      image:
+        "https://images.unsplash.com/photo-1576091160399-112ba8d25d1f?w=400&h=300&fit=crop&auto=format",
       results: "60% cost savings",
       gradient: "from-purple-500/20 to-pink-500/20",
-      framework: "Flutter"
+      framework: "Flutter",
-    }
+    },
   ];
 
   return (
@@ -728,7 +826,8 @@ const CrossPlatformCaseStudies = () => {
             Cross-Platform Apps That Deliver Unified Experiences
           </h2>
           <p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
-            Discover how businesses achieve greater reach and efficiency with our cross-platform solutions.
+            Discover how businesses achieve greater reach and efficiency with
+            our cross-platform solutions.
           </p>
         </motion.div>
 
@@ -761,10 +860,16 @@ const CrossPlatformCaseStudies = () => {
                           {study.client}
                         </div>
                         <div className="flex gap-2">
-                          <Badge variant="secondary" className="text-xs bg-accent/20 text-accent border-accent/30">
+                          <Badge
+                            variant="secondary"
+                            className="text-xs bg-accent/20 text-accent border-accent/30"
+                          >
                             {study.results}
                           </Badge>
-                          <Badge variant="secondary" className="text-xs bg-blue-500/20 text-blue-300 border-blue-500/30">
+                          <Badge
+                            variant="secondary"
+                            className="text-xs bg-blue-500/20 text-blue-300 border-blue-500/30"
+                          >
                             {study.framework}
                           </Badge>
                         </div>
@@ -777,7 +882,9 @@ const CrossPlatformCaseStudies = () => {
                   </div>
 
                   <div className="px-8 pb-6 flex-1">
-                    <div className={`relative rounded-xl overflow-hidden bg-gradient-to-br ${study.gradient} p-4 border border-white/10`}>
+                    <div
+                      className={`relative rounded-xl overflow-hidden bg-gradient-to-br ${study.gradient} p-4 border border-white/10`}
+                    >
                       <ImageWithFallback
                         src={study.image}
                         alt={study.title}
@@ -798,7 +905,9 @@ const CrossPlatformCaseStudies = () => {
                       size="sm"
                       className="w-full justify-between text-accent hover:text-accent hover:bg-accent/10 group-hover:translate-x-1 transition-all duration-300"
                     >
-                      <span className="text-sm font-medium">VIEW CASE STUDY</span>
+                      <span className="text-sm font-medium">
+                        VIEW CASE STUDY
+                      </span>
                       <ArrowRight className="w-4 h-4" />
                     </Button>
                   </div>
@@ -834,7 +943,9 @@ const CrossPlatformInlineCTA = () => {
             <div className="inline-block p-[2px] rounded-full bg-gradient-to-r from-accent via-blue-500 to-purple-500">
               <div className="bg-black rounded-full px-6 py-3 flex items-center gap-2">
                 <GitMerge className="w-5 h-5 text-white" />
-                <span className="text-white text-base font-medium">Cross-Platform Innovation</span>
+                <span className="text-white text-base font-medium">
+                  Cross-Platform Innovation
+                </span>
               </div>
             </div>
 
@@ -844,10 +955,14 @@ const CrossPlatformInlineCTA = () => {
             </h2>
 
             <p className="text-xl text-gray-300 leading-relaxed max-w-2xl mx-auto">
-              Let's analyze if cross-platform is the right fit for your project goals and maximize your development efficiency.
+              Let's analyze if cross-platform is the right fit for your project
+              goals and maximize your development efficiency.
             </p>
 
-            <ShimmerButton className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl">
+            <ShimmerButton
+              className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl"
+              onClick={() => navigateTo("/start-a-project")}
+            >
               <div className="inline-flex items-center gap-3">
                 <Target className="w-6 h-6 flex-shrink-0" />
                 <span>Get a Free Strategy Session</span>
@@ -867,20 +982,20 @@ const HireCrossPlatformDevelopers = () => {
       title: "Senior Flutter Developer",
       experience: "5+ Years",
       skills: ["Flutter", "Dart", "Firebase", "State Management"],
-      specialties: "Cross-Platform UI, Performance Optimization"
+      specialties: "Cross-Platform UI, Performance Optimization",
     },
     {
       title: "React Native Expert",
       experience: "4+ Years",
       skills: ["React Native", "JavaScript", "TypeScript", "Redux"],
-      specialties: "Native Bridges, Component Architecture"
+      specialties: "Native Bridges, Component Architecture",
     },
     {
       title: "Cross-Platform Architect",
       experience: "6+ Years",
       skills: ["System Design", "Both Frameworks", "DevOps", "Testing"],
-      specialties: "Platform Strategy, Technical Leadership"
+      specialties: "Platform Strategy, Technical Leadership",
-    }
+    },
   ];
 
   return (
@@ -897,7 +1012,8 @@ const HireCrossPlatformDevelopers = () => {
             Hire Expert Flutter & React Native Developers
           </h2>
           <p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
-            Find seasoned professionals skilled in both Flutter and React Native to accelerate your cross-platform development.
+            Find seasoned professionals skilled in both Flutter and React Native
+            to accelerate your cross-platform development.
           </p>
         </motion.div>
 
@@ -925,7 +1041,10 @@ const HireCrossPlatformDevelopers = () => {
                       <GitMerge className="w-6 h-6 text-accent" />
                     </div>
                     <div>
-                      <Badge variant="secondary" className="text-xs bg-accent/20 text-accent border-accent/30">
+                      <Badge
+                        variant="secondary"
+                        className="text-xs bg-accent/20 text-accent border-accent/30"
+                      >
                         {dev.experience}
                       </Badge>
                     </div>
@@ -941,7 +1060,11 @@ const HireCrossPlatformDevelopers = () => {
 
                   <div className="flex flex-wrap gap-2">
                     {dev.skills.map((skill) => (
-                      <Badge key={skill} variant="secondary" className="text-xs bg-white/10 text-foreground">
+                      <Badge
+                        key={skill}
+                        variant="secondary"
+                        className="text-xs bg-white/10 text-foreground"
+                      >
                         {skill}
                       </Badge>
                     ))}
@@ -967,7 +1090,7 @@ const HireCrossPlatformDevelopers = () => {
           </ShimmerButton>
           <Button
             variant="outline"
-            className="border-white/20 text-foreground hover:bg-white/10 px-8 py-4 rounded-lg transition-all duration-300"
+            className="border-white/20 text-foreground hover:bg-white/10 px-8 py-4 h-[56px] rounded-lg transition-all duration-300"
           >
             <span>View Talent Profiles</span>
             <ArrowRight className="ml-2 w-4 h-4" />
@@ -983,20 +1106,24 @@ const CrossPlatformFAQs = () => {
   const faqs = [
     {
       question: "When is cross-platform development the best choice?",
-      answer: "Cross-platform development is ideal when you need to reach both iOS and Android users quickly and cost-effectively, have limited resources, require consistent UI/UX across platforms, or want simplified maintenance. It's particularly beneficial for MVPs, content-driven apps, and business applications where time-to-market is crucial."
+      answer:
+        "Cross-platform development is ideal when you need to reach both iOS and Android users quickly and cost-effectively, have limited resources, require consistent UI/UX across platforms, or want simplified maintenance. It's particularly beneficial for MVPs, content-driven apps, and business applications where time-to-market is crucial.",
     },
     {
       question: "What are the limitations of cross-platform apps?",
-      answer: "While cross-platform apps are highly capable, they may have slightly lower performance for graphics-intensive applications, limited access to some platform-specific features, and larger app sizes compared to native apps. However, modern frameworks like Flutter and React Native have significantly minimized these limitations."
+      answer:
+        "While cross-platform apps are highly capable, they may have slightly lower performance for graphics-intensive applications, limited access to some platform-specific features, and larger app sizes compared to native apps. However, modern frameworks like Flutter and React Native have significantly minimized these limitations.",
     },
     {
       question: "Do cross-platform apps feel 'native'?",
-      answer: "Yes, modern cross-platform frameworks produce apps that feel and perform like native applications. Flutter compiles to native code, while React Native uses native components. Our development approach ensures platform-specific design guidelines are followed for authentic user experiences."
+      answer:
+        "Yes, modern cross-platform frameworks produce apps that feel and perform like native applications. Flutter compiles to native code, while React Native uses native components. Our development approach ensures platform-specific design guidelines are followed for authentic user experiences.",
     },
     {
       question: "How do you handle platform-specific features?",
-      answer: "We leverage platform-specific code when needed through native modules, plugins, and bridge implementations. Both Flutter and React Native provide robust mechanisms for accessing platform-specific APIs, camera functions, sensors, and OS-level features while maintaining code sharing for common functionality."
+      answer:
-    }
+        "We leverage platform-specific code when needed through native modules, plugins, and bridge implementations. Both Flutter and React Native provide robust mechanisms for accessing platform-specific APIs, camera functions, sensors, and OS-level features while maintaining code sharing for common functionality.",
+    },
   ];
 
   return (
@@ -1032,7 +1159,9 @@ const CrossPlatformFAQs = () => {
                 className="bg-gray-900/50 backdrop-blur-md rounded-2xl border border-gray-800 px-10 shadow-lg"
               >
                 <AccordionTrigger className="text-left hover:no-underline py-10 text-xl">
-                  <span className="font-semibold text-white">{faq.question}</span>
+                  <span className="font-semibold text-white">
+                    {faq.question}
+                  </span>
                 </AccordionTrigger>
                 <AccordionContent className="text-gray-300 pb-10 text-lg leading-relaxed">
                   {faq.answer}
@@ -1068,7 +1197,9 @@ const CrossPlatformFinalCTA = () => {
             <div className="inline-block p-[2px] rounded-full bg-gradient-to-r from-accent via-blue-500 to-purple-500">
               <div className="bg-background rounded-full px-6 py-3 flex items-center gap-2">
                 <GitMerge className="w-5 h-5 text-foreground" />
-                <span className="text-foreground text-base font-medium">Ready to Launch?</span>
+                <span className="text-foreground text-base font-medium">
+                  Ready to Launch?
+                </span>
               </div>
             </div>
           </motion.div>
@@ -1091,7 +1222,8 @@ const CrossPlatformFinalCTA = () => {
             viewport={{ once: true }}
             className="text-xl text-muted-foreground mb-12 max-w-2xl mx-auto leading-relaxed"
           >
-            Leverage our experience to build robust, beautiful apps for both iOS and Android efficiently.
+            Leverage our experience to build robust, beautiful apps for both iOS
+            and Android efficiently.
           </motion.p>
 
           <motion.div
@@ -1101,7 +1233,10 @@ const CrossPlatformFinalCTA = () => {
             viewport={{ once: true }}
             className="space-y-8"
           >
-            <ShimmerButton className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25">
+            <ShimmerButton
+              className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25"
+              onClick={() => navigateTo("/start-a-project")}
+            >
               <div className="inline-flex items-center gap-3">
                 <Rocket className="w-6 h-6 flex-shrink-0" />
                 <span>Start Your Cross-Platform Project</span>

pages/CustomWebAppDevelopment.tsx

@@ -12,7 +12,8 @@ import {
   Database,
   Eye,
   FileText,
-  Globe, Layers,
+  Globe,
+  Layers,
   Layers3,
   Layout,
   MessageSquare,
@@ -28,18 +29,24 @@ import {
   TrendingUp,
   Users,
   Workflow,
-  Zap
+  Zap,
 } from "lucide-react";
 import { ImageWithFallback } from "../components/figma/ImageWithFallback";
 import { Footer } from "../components/Footer";
 import { Navigation } from "../components/Navigation";
-import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "../components/ui/accordion";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "../components/ui/accordion";
 import { Badge } from "../components/ui/badge";
 import { Button } from "../components/ui/button";
 import { Card, CardContent } from "../components/ui/card";
 import { ShimmerButton } from "../components/ui/shimmer-button";
 import patientManagementPortal from "../src/images/patient-management-portal.webp";
 import awsLogo from "../src/images/aws-logo.png";
+import { navigateTo } from "@/App";
 
 // Custom Web App Development Hero Section
 const CustomWebAppHeroWithCTA = () => {
@@ -59,7 +66,9 @@ const CustomWebAppHeroWithCTA = () => {
               animate={{ opacity: 1, y: 0 }}
               transition={{ duration: 0.6 }}
             >
-              <span className="text-white/70 text-sm font-medium">Web & Cloud Solutions</span>
+              <span className="text-white/70 text-sm font-medium">
+                Web & Cloud Solutions
+              </span>
             </motion.div>
 
             {/* Main Heading */}
@@ -69,7 +78,8 @@ const CustomWebAppHeroWithCTA = () => {
               </h1>
 
               <p className="text-lg text-gray-300 leading-relaxed max-w-lg">
-                Building bespoke, scalable, and secure web applications tailored to your unique business processes and user needs.
+                Building bespoke, scalable, and secure web applications tailored
+                to your unique business processes and user needs.
               </p>
             </div>
 
@@ -80,7 +90,10 @@ const CustomWebAppHeroWithCTA = () => {
               transition={{ duration: 0.8, delay: 0.3 }}
               className="flex flex-col sm:flex-row gap-4"
             >
-              <ShimmerButton className="text-lg px-8 py-4">
+              <ShimmerButton
+                className="text-lg px-8 py-4"
+                onClick={() => navigateTo("/start-a-project")}
+              >
                 <div className="inline-flex items-center gap-2">
                   <MessageSquare className="w-5 h-5 flex-shrink-0" />
                   <span>Request a Free Consultation</span>
@@ -91,7 +104,7 @@ const CustomWebAppHeroWithCTA = () => {
                 className="inline-flex items-center justify-center gap-2 rounded-md bg-gray-800 px-8 py-4 text-lg font-medium text-white transition hover:bg-gray-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-700 whitespace-nowrap"
               >
                 <Eye className="w-4 h-4 flex-shrink-0" />
-                <span>Explore Our Web Projects</span>
+                <span>Explore Projects</span>
               </a>
             </motion.div>
           </motion.div>
@@ -127,7 +140,9 @@ const CustomWebAppHeroWithCTA = () => {
                   <div className="space-y-4">
                     {/* Navigation */}
                     <div className="flex space-x-4 text-sm">
-                      <div className="bg-accent/20 text-accent px-3 py-1 rounded-lg">Dashboard</div>
+                      <div className="bg-accent/20 text-accent px-3 py-1 rounded-lg">
+                        Dashboard
+                      </div>
                       <div className="text-gray-400 px-3 py-1">Analytics</div>
                       <div className="text-gray-400 px-3 py-1">Users</div>
                     </div>
@@ -157,7 +172,10 @@ const CustomWebAppHeroWithCTA = () => {
                     <div className="bg-gray-800/30 rounded-lg p-4">
                       <div className="space-y-2">
                         {[1, 2, 3].map((i) => (
-                          <div key={i} className="flex items-center justify-between">
+                          <div
+                            key={i}
+                            className="flex items-center justify-between"
+                          >
                             <div className="flex items-center gap-3">
                               <div className="w-6 h-6 bg-gray-600 rounded-full"></div>
                               <div className="h-2 bg-gray-600 rounded w-24"></div>
@@ -206,15 +224,24 @@ const CustomWebAppHeroWithCTA = () => {
                 transition={{ duration: 0.8, delay: 1.2 }}
                 className="flex justify-center gap-4 flex-wrap"
               >
-                <Badge variant="secondary" className="bg-blue-500/20 text-blue-300 border-blue-500/30">
+                <Badge
+                  variant="secondary"
+                  className="bg-blue-500/20 text-blue-300 border-blue-500/30"
+                >
                   <Database className="w-3 h-3 mr-1" />
                   Scalable
                 </Badge>
-                <Badge variant="secondary" className="bg-green-500/20 text-green-300 border-green-500/30">
+                <Badge
+                  variant="secondary"
+                  className="bg-green-500/20 text-green-300 border-green-500/30"
+                >
                   <Shield className="w-3 h-3 mr-1" />
                   Secure
                 </Badge>
-                <Badge variant="secondary" className="bg-purple-500/20 text-purple-300 border-purple-500/30">
+                <Badge
+                  variant="secondary"
+                  className="bg-purple-500/20 text-purple-300 border-purple-500/30"
+                >
                   <Layers className="w-3 h-3 mr-1" />
                   Custom Built
                 </Badge>
@@ -233,28 +260,33 @@ const CustomWebAppBenefits = () => {
     {
       icon: Target,
       title: "Tailored to Your Workflow",
-      description: "Perfectly aligns with unique business logic, unlike off-the-shelf solutions."
+      description:
+        "Perfectly aligns with unique business logic, unlike off-the-shelf solutions.",
     },
     {
       icon: TrendingUp,
       title: "Scalability & Flexibility",
-      description: "Built to grow with your business, easily adaptable to future needs."
+      description:
+        "Built to grow with your business, easily adaptable to future needs.",
     },
     {
       icon: Shield,
       title: "Enhanced Security",
-      description: "Custom architecture allows for robust, purpose-built security measures."
+      description:
+        "Custom architecture allows for robust, purpose-built security measures.",
     },
     {
       icon: Zap,
       title: "Operational Efficiency",
-      description: "Automate tasks, streamline processes, reduce manual effort."
+      description:
+        "Automate tasks, streamline processes, reduce manual effort.",
     },
     {
       icon: Award,
       title: "Competitive Advantage",
-      description: "Unique features and user experiences differentiate your brand."
+      description:
-    }
+        "Unique features and user experiences differentiate your brand.",
+    },
   ];
 
   return (
@@ -356,29 +388,34 @@ const CustomWebAppProcess = () => {
   const steps = [
     {
       title: "Discovery & Requirements",
-      description: "Comprehensive analysis of your business needs, user requirements, and technical specifications to define project scope.",
+      description:
-      icon: Search
+        "Comprehensive analysis of your business needs, user requirements, and technical specifications to define project scope.",
+      icon: Search,
     },
     {
       title: "UX/UI Design & Prototyping",
-      description: "Creating intuitive user experiences and visual designs with interactive prototypes for stakeholder feedback.",
+      description:
-      icon: Palette
+        "Creating intuitive user experiences and visual designs with interactive prototypes for stakeholder feedback.",
+      icon: Palette,
     },
     {
       title: "Agile Development Sprints",
-      description: "Iterative development approach with regular demonstrations and continuous integration for rapid progress.",
+      description:
-      icon: Code
+        "Iterative development approach with regular demonstrations and continuous integration for rapid progress.",
+      icon: Code,
     },
     {
       title: "Rigorous Testing & QA",
-      description: "Comprehensive testing including functionality, performance, security, and user acceptance testing.",
+      description:
-      icon: Bug
+        "Comprehensive testing including functionality, performance, security, and user acceptance testing.",
+      icon: Bug,
     },
     {
       title: "Deployment & Ongoing Support",
-      description: "Production deployment with monitoring, maintenance, and continuous improvement based on user feedback.",
+      description:
-      icon: Rocket
+        "Production deployment with monitoring, maintenance, and continuous improvement based on user feedback.",
-    }
+      icon: Rocket,
+    },
   ];
 
   return (
@@ -412,15 +449,23 @@ const CustomWebAppProcess = () => {
                   whileInView={{ opacity: 1, x: 0 }}
                   transition={{ duration: 0.8, delay: index * 0.2 }}
                   viewport={{ once: true }}
-                  className={`flex items-center ${isEven ? 'lg:flex-row' : 'lg:flex-row-reverse'} flex-col lg:gap-16 gap-8`}
+                  className={`flex items-center ${
+                    isEven ? "lg:flex-row" : "lg:flex-row-reverse"
+                  } flex-col lg:gap-16 gap-8`}
                 >
-                  <div className={`flex-1 ${isEven ? 'lg:text-right' : 'lg:text-left'} text-center lg:text-left`}>
+                  <div
+                    className={`flex-1 ${
+                      isEven ? "lg:text-right" : "lg:text-left"
+                    } text-center lg:text-left`}
+                  >
                     <div className="bg-card/20 backdrop-blur-md rounded-2xl border border-white/10 p-8 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl">
                       <div className="flex items-center gap-4 mb-4 justify-center lg:justify-start">
                         <div className="w-12 h-12 bg-accent/20 rounded-xl flex items-center justify-center">
                           <IconComponent className="w-6 h-6 text-accent" />
                         </div>
-                        <div className="text-2xl font-bold text-accent">0{index + 1}</div>
+                        <div className="text-2xl font-bold text-accent">
+                          0{index + 1}
+                        </div>
                       </div>
                       <h3 className="text-2xl font-semibold text-foreground mb-4">
                         {step.title}
@@ -450,40 +495,74 @@ const CustomWebAppServices = () => {
   const services = [
     {
       title: "Enterprise Web Portals",
-      description: "Secure, centralized access for employees, partners, or customers.",
+      description:
+        "Secure, centralized access for employees, partners, or customers.",
       icon: Building,
-      features: ["Single Sign-On", "Role-based Access", "Document Management", "Communication Tools"]
+      features: [
+        "Single Sign-On",
+        "Role-based Access",
+        "Document Management",
+        "Communication Tools",
+      ],
     },
     {
       title: "Workflow Automation Platforms",
       description: "Streamlining complex business operations.",
       icon: Workflow,
-      features: ["Process Automation", "Task Management", "Approval Workflows", "Integration APIs"]
+      features: [
+        "Process Automation",
+        "Task Management",
+        "Approval Workflows",
+        "Integration APIs",
+      ],
     },
     {
       title: "Data Management Systems",
-      description: "Custom solutions for large-scale data organization and retrieval.",
+      description:
+        "Custom solutions for large-scale data organization and retrieval.",
       icon: Database,
-      features: ["Data Visualization", "Advanced Analytics", "Real-time Processing", "Export Tools"]
+      features: [
+        "Data Visualization",
+        "Advanced Analytics",
+        "Real-time Processing",
+        "Export Tools",
+      ],
     },
     {
       title: "Interactive Dashboards",
-      description: "Real-time analytics and reporting for informed decision-making.",
+      description:
+        "Real-time analytics and reporting for informed decision-making.",
       icon: BarChart,
-      features: ["Custom Widgets", "Live Data Feeds", "Drill-down Analytics", "Scheduled Reports"]
+      features: [
+        "Custom Widgets",
+        "Live Data Feeds",
+        "Drill-down Analytics",
+        "Scheduled Reports",
+      ],
     },
     {
       title: "API Integrations",
       description: "Connecting disparate systems for seamless data flow.",
       icon: Network,
-      features: ["RESTful APIs", "Third-party Integrations", "Data Synchronization", "Webhook Support"]
+      features: [
+        "RESTful APIs",
+        "Third-party Integrations",
+        "Data Synchronization",
+        "Webhook Support",
+      ],
     },
     {
       title: "Web App Modernization",
-      description: "Revitalizing legacy systems for improved performance and user experience.",
+      description:
+        "Revitalizing legacy systems for improved performance and user experience.",
       icon: RefreshCcw,
-      features: ["Legacy Migration", "Performance Optimization", "Modern UI/UX", "Cloud Integration"]
+      features: [
-    }
+        "Legacy Migration",
+        "Performance Optimization",
+        "Modern UI/UX",
+        "Cloud Integration",
+      ],
+    },
   ];
 
   return (
@@ -532,10 +611,16 @@ const CustomWebAppServices = () => {
                       {service.description}
                     </p>
                     <div className="space-y-2">
-                      <h4 className="text-sm font-medium text-white">Key Features:</h4>
+                      <h4 className="text-sm font-medium text-white">
+                        Key Features:
+                      </h4>
                       <div className="flex flex-wrap gap-2">
                         {service.features.map((feature) => (
-                          <Badge key={feature} variant="secondary" className="text-xs bg-gray-800/50 text-gray-300 border-gray-700">
+                          <Badge
+                            key={feature}
+                            variant="secondary"
+                            className="text-xs bg-gray-800/50 text-gray-300 border-gray-700"
+                          >
                             {feature}
                           </Badge>
                         ))}
@@ -555,23 +640,75 @@ const CustomWebAppServices = () => {
 // Web App Tech Stack
 const WebAppTechStack = () => {
   const technologies = [
-    { name: "React", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/react/react-original.svg", category: "Frontend" },
+    {
-    { name: "Angular", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/angularjs/angularjs-original.svg", category: "Frontend" },
+      name: "React",
-    { name: "Vue.js", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/vuejs/vuejs-original.svg", category: "Frontend" },
+      logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/react/react-original.svg",
-    { name: "Node.js", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nodejs/nodejs-original.svg", category: "Backend" },
+      category: "Frontend",
-    { name: "Python", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/python/python-original.svg", category: "Backend" },
+    },
-    { name: "Java", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/java/java-original.svg", category: "Backend" },
+    {
+      name: "Angular",
+      logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/angularjs/angularjs-original.svg",
+      category: "Frontend",
+    },
+    {
+      name: "Vue.js",
+      logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/vuejs/vuejs-original.svg",
+      category: "Frontend",
+    },
+    {
+      name: "Node.js",
+      logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nodejs/nodejs-original.svg",
+      category: "Backend",
+    },
+    {
+      name: "Python",
+      logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/python/python-original.svg",
+      category: "Backend",
+    },
+    {
+      name: "Java",
+      logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/java/java-original.svg",
+      category: "Backend",
+    },
     { name: "AWS", logo: awsLogo, category: "Cloud" },
-    { name: "Azure", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/azure/azure-original.svg", category: "Cloud" },
+    {
-    { name: "PostgreSQL", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/postgresql/postgresql-original.svg", category: "Database" },
+      name: "Azure",
-    { name: "MongoDB", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/mongodb/mongodb-original.svg", category: "Database" }
+      logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/azure/azure-original.svg",
+      category: "Cloud",
+    },
+    {
+      name: "PostgreSQL",
+      logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/postgresql/postgresql-original.svg",
+      category: "Database",
+    },
+    {
+      name: "MongoDB",
+      logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/mongodb/mongodb-original.svg",
+      category: "Database",
+    },
   ];
 
   const frameworks = [
-    { name: "Django", icon: Code, description: "Python web framework for rapid development" },
+    {
-    { name: "Spring Boot", icon: Coffee, description: "Java framework for enterprise applications" },
+      name: "Django",
-    { name: "Ruby on Rails", icon: Layers, description: "Convention over configuration framework" },
+      icon: Code,
-    { name: "Laravel", icon: Boxes, description: "PHP framework for web artisans" }
+      description: "Python web framework for rapid development",
+    },
+    {
+      name: "Spring Boot",
+      icon: Coffee,
+      description: "Java framework for enterprise applications",
+    },
+    {
+      name: "Ruby on Rails",
+      icon: Layers,
+      description: "Convention over configuration framework",
+    },
+    {
+      name: "Laravel",
+      icon: Boxes,
+      description: "PHP framework for web artisans",
+    },
   ];
 
   return (
@@ -616,8 +753,12 @@ const WebAppTechStack = () => {
                       className="w-10 h-10 object-contain filter brightness-0 invert dark:brightness-100 dark:invert-0 group-hover:brightness-100 group-hover:invert-0 transition-all duration-300"
                     />
                   </div>
-                  <h4 className="font-semibold text-foreground text-sm mb-1">{tech.name}</h4>
+                  <h4 className="font-semibold text-foreground text-sm mb-1">
-                  <p className="text-xs text-muted-foreground">{tech.category}</p>
+                    {tech.name}
+                  </h4>
+                  <p className="text-xs text-muted-foreground">
+                    {tech.category}
+                  </p>
                 </Card>
               </motion.div>
             ))}
@@ -648,8 +789,12 @@ const WebAppTechStack = () => {
                     <div className="w-12 h-12 bg-accent/20 rounded-lg flex items-center justify-center mx-auto mb-4">
                       <IconComponent className="w-6 h-6 text-accent" />
                     </div>
-                    <h4 className="font-semibold text-foreground mb-2">{framework.name}</h4>
+                    <h4 className="font-semibold text-foreground mb-2">
-                    <p className="text-sm text-muted-foreground leading-relaxed">{framework.description}</p>
+                      {framework.name}
+                    </h4>
+                    <p className="text-sm text-muted-foreground leading-relaxed">
+                      {framework.description}
+                    </p>
                   </Card>
                 </motion.div>
               );
@@ -667,30 +812,36 @@ const WebAppCaseStudies = () => {
     {
       title: "Enterprise Resource Planning System",
       client: "TechCorp Industries",
-      description: "Comprehensive ERP solution streamlining operations across multiple departments with real-time analytics and automated workflows",
+      description:
-      image: "https://images.unsplash.com/photo-1551434678-e076c223a692?w=400&h=300&fit=crop&auto=format",
+        "Comprehensive ERP solution streamlining operations across multiple departments with real-time analytics and automated workflows",
+      image:
+        "https://images.unsplash.com/photo-1551434678-e076c223a692?w=400&h=300&fit=crop&auto=format",
       results: "40% operational efficiency increase",
       gradient: "from-blue-500/20 to-cyan-500/20",
-      features: "Multi-department integration, Real-time dashboards, Automated reporting"
+      features:
+        "Multi-department integration, Real-time dashboards, Automated reporting",
     },
     {
       title: "Patient Management Portal",
       client: "HealthFirst Clinics",
-      description: "Secure web application for patient records management, appointment scheduling, and telemedicine integration with HIPAA compliance",
+      description:
+        "Secure web application for patient records management, appointment scheduling, and telemedicine integration with HIPAA compliance",
       image: patientManagementPortal,
       results: "60% reduction in admin tasks",
       gradient: "from-green-500/20 to-emerald-500/20",
-      features: "HIPAA compliance, Telemedicine, Automated scheduling"
+      features: "HIPAA compliance, Telemedicine, Automated scheduling",
     },
     {
       title: "Supply Chain Management Platform",
       client: "GlobalLogistics Co",
-      description: "End-to-end supply chain visibility platform with predictive analytics, inventory management, and vendor integration capabilities",
+      description:
-      image: "https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d?w=400&h=300&fit=crop&auto=format",
+        "End-to-end supply chain visibility platform with predictive analytics, inventory management, and vendor integration capabilities",
+      image:
+        "https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d?w=400&h=300&fit=crop&auto=format",
       results: "25% cost reduction",
       gradient: "from-orange-500/20 to-red-500/20",
-      features: "Predictive analytics, Vendor integration, Real-time tracking"
+      features: "Predictive analytics, Vendor integration, Real-time tracking",
-    }
+    },
   ];
 
   return (
@@ -736,7 +887,10 @@ const WebAppCaseStudies = () => {
                         <div className="text-xs text-gray-400 mb-2 uppercase tracking-wider">
                           {study.client}
                         </div>
-                        <Badge variant="secondary" className="text-xs bg-accent/20 text-accent border-accent/30">
+                        <Badge
+                          variant="secondary"
+                          className="text-xs bg-accent/20 text-accent border-accent/30"
+                        >
                           {study.results}
                         </Badge>
                       </div>
@@ -748,7 +902,9 @@ const WebAppCaseStudies = () => {
                   </div>
 
                   <div className="px-8 pb-6 flex-1">
-                    <div className={`relative rounded-xl overflow-hidden bg-gradient-to-br ${study.gradient} p-4 border border-gray-700`}>
+                    <div
+                      className={`relative rounded-xl overflow-hidden bg-gradient-to-br ${study.gradient} p-4 border border-gray-700`}
+                    >
                       <ImageWithFallback
                         src={study.image}
                         alt={study.title}
@@ -762,10 +918,10 @@ const WebAppCaseStudies = () => {
                       {study.description}
                     </p>
                     <div className="space-y-2">
-                      <h4 className="text-xs font-medium text-white uppercase tracking-wider">Key Features:</h4>
+                      <h4 className="text-xs font-medium text-white uppercase tracking-wider">
-                      <p className="text-xs text-gray-400">
+                        Key Features:
-                        {study.features}
+                      </h4>
-                      </p>
+                      <p className="text-xs text-gray-400">{study.features}</p>
                     </div>
                   </div>
 
@@ -775,7 +931,9 @@ const WebAppCaseStudies = () => {
                       size="sm"
                       className="w-full justify-between text-accent hover:text-accent hover:bg-accent/10 group-hover:translate-x-1 transition-all duration-300"
                     >
-                      <span className="text-sm font-medium">VIEW CASE STUDY</span>
+                      <span className="text-sm font-medium">
+                        VIEW CASE STUDY
+                      </span>
                       <ArrowRight className="w-4 h-4" />
                     </Button>
                   </div>
@@ -811,7 +969,9 @@ const WebAppInlineCTA = () => {
             <div className="inline-block p-[2px] rounded-full bg-gradient-to-r from-accent via-blue-500 to-purple-500">
               <div className="bg-background rounded-full px-6 py-3 flex items-center gap-2">
                 <Puzzle className="w-5 h-5 text-foreground" />
-                <span className="text-foreground text-base font-medium">Complex Solutions</span>
+                <span className="text-foreground text-base font-medium">
+                  Complex Solutions
+                </span>
               </div>
             </div>
 
@@ -821,10 +981,14 @@ const WebAppInlineCTA = () => {
             </h2>
 
             <p className="text-xl text-muted-foreground leading-relaxed max-w-2xl mx-auto">
-              Our experts provide clarity on how custom web apps can transform your operations.
+              Our experts provide clarity on how custom web apps can transform
+              your operations.
             </p>
 
-            <ShimmerButton className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl">
+            <ShimmerButton
+              className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl"
+              onClick={() => navigateTo("/start-a-project")}
+            >
               <div className="inline-flex items-center gap-3">
                 <MessageSquare className="w-6 h-6 flex-shrink-0" />
                 <span>Get a Free Technical Consultation</span>
@@ -842,28 +1006,51 @@ const HireWebDevelopers = () => {
   const developerTypes = [
     {
       title: "Frontend Specialists",
-      description: "React, Angular, Vue.js experts for stunning user interfaces",
+      description:
+        "React, Angular, Vue.js experts for stunning user interfaces",
       icon: Layout,
-      skills: ["React/Angular/Vue", "TypeScript", "UI/UX Implementation", "Performance Optimization"]
+      skills: [
+        "React/Angular/Vue",
+        "TypeScript",
+        "UI/UX Implementation",
+        "Performance Optimization",
+      ],
     },
     {
       title: "Backend Engineers",
-      description: "Node.js, Python, Java developers for robust server-side solutions",
+      description:
+        "Node.js, Python, Java developers for robust server-side solutions",
       icon: Server,
-      skills: ["API Development", "Database Design", "Security Implementation", "Scalable Architecture"]
+      skills: [
+        "API Development",
+        "Database Design",
+        "Security Implementation",
+        "Scalable Architecture",
+      ],
     },
     {
       title: "Full-Stack Developers",
-      description: "End-to-end development expertise for complete web solutions",
+      description:
+        "End-to-end development expertise for complete web solutions",
       icon: Layers3,
-      skills: ["Frontend + Backend", "DevOps", "Database Management", "System Integration"]
+      skills: [
+        "Frontend + Backend",
+        "DevOps",
+        "Database Management",
+        "System Integration",
+      ],
     },
     {
       title: "DevOps Engineers",
       description: "Cloud infrastructure and deployment automation specialists",
       icon: CloudCog,
-      skills: ["AWS/Azure/GCP", "CI/CD Pipelines", "Container Orchestration", "Monitoring & Logging"]
+      skills: [
-    }
+        "AWS/Azure/GCP",
+        "CI/CD Pipelines",
+        "Container Orchestration",
+        "Monitoring & Logging",
+      ],
+    },
   ];
 
   return (
@@ -880,7 +1067,8 @@ const HireWebDevelopers = () => {
             Augment Your Team with Our Expert Web App Developers
           </h2>
           <p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
-            Access highly skilled frontend, backend, and full-stack developers specializing in custom web solutions.
+            Access highly skilled frontend, backend, and full-stack developers
+            specializing in custom web solutions.
           </p>
         </motion.div>
 
@@ -915,10 +1103,16 @@ const HireWebDevelopers = () => {
                       {type.description}
                     </p>
                     <div className="space-y-2">
-                      <h4 className="text-sm font-medium text-white">Core Skills:</h4>
+                      <h4 className="text-sm font-medium text-white">
+                        Core Skills:
+                      </h4>
                       <div className="flex flex-wrap gap-2">
                         {type.skills.map((skill) => (
-                          <Badge key={skill} variant="secondary" className="text-xs bg-gray-800/50 text-gray-300 border-gray-700">
+                          <Badge
+                            key={skill}
+                            variant="secondary"
+                            className="text-xs bg-gray-800/50 text-gray-300 border-gray-700"
+                          >
                             {skill}
                           </Badge>
                         ))}
@@ -948,7 +1142,7 @@ const HireWebDevelopers = () => {
             <Button
               variant="outline"
               size="lg"
-              className="text-lg px-8 py-4 border-gray-600 text-gray-300 hover:bg-gray-800 hover:text-white"
+              className="text-lg px-8 py-4 h-[56px] border-gray-600 text-gray-300 hover:bg-gray-800 hover:text-white"
             >
               <div className="inline-flex items-center gap-2">
                 <FileText className="w-5 h-5 flex-shrink-0" />
@@ -967,20 +1161,24 @@ const CustomWebAppFAQs = () => {
   const faqs = [
     {
       question: "How long does it take to develop a custom web app?",
-      answer: "Development timelines vary based on complexity and features. Simple web applications typically take 8-12 weeks, medium complexity apps with integrations take 12-20 weeks, and enterprise-level applications can take 20+ weeks. We provide detailed project timelines during the discovery phase based on your specific requirements."
+      answer:
+        "Development timelines vary based on complexity and features. Simple web applications typically take 8-12 weeks, medium complexity apps with integrations take 12-20 weeks, and enterprise-level applications can take 20+ weeks. We provide detailed project timelines during the discovery phase based on your specific requirements.",
     },
     {
       question: "What is the typical cost range for custom web development?",
-      answer: "Custom web application costs depend on features, complexity, and integrations. Basic web apps start from $25,000-$50,000, mid-level applications range from $50,000-$150,000, and enterprise solutions can range from $150,000+. We provide detailed estimates after understanding your requirements and technical specifications."
+      answer:
+        "Custom web application costs depend on features, complexity, and integrations. Basic web apps start from $25,000-$50,000, mid-level applications range from $50,000-$150,000, and enterprise solutions can range from $150,000+. We provide detailed estimates after understanding your requirements and technical specifications.",
     },
     {
       question: "Do you provide post-launch maintenance and support?",
-      answer: "Yes, we offer comprehensive post-launch support including bug fixes, security updates, performance monitoring, feature enhancements, and technical support. Our maintenance packages can be tailored to your needs, from basic monitoring to full-scale ongoing development and optimization."
+      answer:
+        "Yes, we offer comprehensive post-launch support including bug fixes, security updates, performance monitoring, feature enhancements, and technical support. Our maintenance packages can be tailored to your needs, from basic monitoring to full-scale ongoing development and optimization.",
     },
     {
       question: "How do you ensure the security of custom web applications?",
-      answer: "We implement multiple security layers including secure coding practices, data encryption, authentication systems, regular security audits, OWASP compliance, and secure hosting environments. We also conduct penetration testing and provide ongoing security monitoring to protect against emerging threats."
+      answer:
-    }
+        "We implement multiple security layers including secure coding practices, data encryption, authentication systems, regular security audits, OWASP compliance, and secure hosting environments. We also conduct penetration testing and provide ongoing security monitoring to protect against emerging threats.",
+    },
   ];
 
   return (
@@ -1013,7 +1211,9 @@ const CustomWebAppFAQs = () => {
                 className="bg-gray-900/50 backdrop-blur-md rounded-2xl border border-gray-800 px-10 shadow-lg"
               >
                 <AccordionTrigger className="text-left hover:no-underline py-10 text-xl">
-                  <span className="font-semibold text-white">{faq.question}</span>
+                  <span className="font-semibold text-white">
+                    {faq.question}
+                  </span>
                 </AccordionTrigger>
                 <AccordionContent className="text-gray-300 pb-10 text-lg leading-relaxed">
                   {faq.answer}
@@ -1049,7 +1249,9 @@ const CustomWebAppFinalCTA = () => {
             <div className="inline-block p-[2px] rounded-full bg-gradient-to-r from-accent via-blue-500 to-purple-500">
               <div className="bg-background rounded-full px-6 py-3 flex items-center gap-2">
                 <Globe className="w-5 h-5 text-foreground" />
-                <span className="text-foreground text-base font-medium">Strategic Advantage</span>
+                <span className="text-foreground text-base font-medium">
+                  Strategic Advantage
+                </span>
               </div>
             </div>
           </motion.div>
@@ -1066,7 +1268,8 @@ const CustomWebAppFinalCTA = () => {
             viewport={{ once: true }}
             className="text-xl text-muted-foreground mb-12 max-w-2xl mx-auto leading-relaxed"
           >
-            WDI crafts powerful, secure, and intuitive web solutions designed specifically for your business success.
+            WDI crafts powerful, secure, and intuitive web solutions designed
+            specifically for your business success.
           </motion.p>
 
           <motion.div
@@ -1076,7 +1279,10 @@ const CustomWebAppFinalCTA = () => {
             viewport={{ once: true }}
             className="space-y-8"
           >
-            <ShimmerButton className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25">
+            <ShimmerButton
+              className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25"
+              onClick={() => navigateTo("/start-a-project")}
+            >
               <div className="inline-flex items-center gap-3">
                 <Rocket className="w-6 h-6 flex-shrink-0" />
                 <span>Start Your Custom Web Project Today</span>

pages/EcommercePlatforms.tsx

@@ -31,17 +31,23 @@ import {
   Truck,
   Users,
   Wrench,
-  Zap
+  Zap,
 } from "lucide-react";
 import { ImageWithFallback } from "../components/figma/ImageWithFallback";
 import { Footer } from "../components/Footer";
 import { Navigation } from "../components/Navigation";
-import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "../components/ui/accordion";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "../components/ui/accordion";
 import { Badge } from "../components/ui/badge";
 import { Button } from "../components/ui/button";
 import { Card, CardContent } from "../components/ui/card";
 import { ShimmerButton } from "../components/ui/shimmer-button";
 import multiVendorImage from "../src/images/multifood.webp";
+import { navigateTo } from "@/App";
 
 // eCommerce Platforms Hero Section
 const EcommerceHeroWithCTA = () => {
@@ -61,7 +67,9 @@ const EcommerceHeroWithCTA = () => {
               animate={{ opacity: 1, y: 0 }}
               transition={{ duration: 0.6 }}
             >
-              <span className="text-white/70 text-sm font-medium">Web & Cloud Solutions</span>
+              <span className="text-white/70 text-sm font-medium">
+                Web & Cloud Solutions
+              </span>
             </motion.div>
 
             {/* Main Heading */}
@@ -71,7 +79,8 @@ const EcommerceHeroWithCTA = () => {
               </h1>
 
               <p className="text-lg text-gray-300 leading-relaxed max-w-lg">
-                Building high-converting, scalable, and secure online stores and marketplaces that drive sales and enhance customer experiences.
+                Building high-converting, scalable, and secure online stores and
+                marketplaces that drive sales and enhance customer experiences.
               </p>
             </div>
 
@@ -82,7 +91,10 @@ const EcommerceHeroWithCTA = () => {
               transition={{ duration: 0.8, delay: 0.3 }}
               className="flex flex-col sm:flex-row gap-4"
             >
-              <ShimmerButton className="text-lg px-8 py-4">
+              <ShimmerButton
+                className="text-lg px-8 py-4"
+                onClick={() => navigateTo("/start-a-project")}
+              >
                 <div className="inline-flex items-center gap-2">
                   <Store className="w-5 h-5 flex-shrink-0" />
                   <span>Launch Your Online Store</span>
@@ -93,7 +105,7 @@ const EcommerceHeroWithCTA = () => {
                 className="inline-flex items-center justify-center gap-2 rounded-md bg-gray-800 px-8 py-4 text-lg font-medium text-white transition hover:bg-gray-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-700 whitespace-nowrap"
               >
                 <Eye className="w-4 h-4 flex-shrink-0" />
-                <span>View Our eCommerce Portfolio</span>
+                <span>View Our Portfolio</span>
               </a>
             </motion.div>
           </motion.div>
@@ -117,14 +129,19 @@ const EcommerceHeroWithCTA = () => {
                 <div className="relative mx-auto w-64 h-40 bg-gradient-to-br from-accent to-purple-600 rounded-2xl border border-accent/30 shadow-2xl flex flex-col p-4 mb-8">
                   <div className="flex items-center justify-between mb-4">
                     <Store className="w-6 h-6 text-white" />
-                    <div className="text-white text-xs font-medium">Online Store</div>
+                    <div className="text-white text-xs font-medium">
+                      Online Store
+                    </div>
                     <CartIcon className="w-6 h-6 text-white" />
                   </div>
 
                   {/* Product Grid */}
                   <div className="grid grid-cols-3 gap-2 flex-1">
                     {[1, 2, 3, 4, 5, 6].map((item) => (
-                      <div key={item} className="bg-white/20 rounded-lg flex items-center justify-center">
+                      <div
+                        key={item}
+                        className="bg-white/20 rounded-lg flex items-center justify-center"
+                      >
                         <ShoppingBag className="w-4 h-4 text-white/80" />
                       </div>
                     ))}
@@ -194,17 +211,59 @@ const EcommerceHeroWithCTA = () => {
                 </div>
 
                 {/* Connection Lines */}
-                <svg className="absolute inset-0 w-full h-full pointer-events-none" style={{top: '-20px', width: '100%', height: '320px'}}>
+                <svg
+                  className="absolute inset-0 w-full h-full pointer-events-none"
+                  style={{ top: "-20px", width: "100%", height: "320px" }}
+                >
                   <g className="opacity-30">
                     {/* Lines from Store to integrations */}
-                    <line x1="160" y1="80" x2="80" y2="140" stroke="#E5195E" strokeWidth="2" strokeDasharray="4,4">
+                    <line
-                      <animate attributeName="stroke-dashoffset" values="0;-8" dur="2s" repeatCount="indefinite" />
+                      x1="160"
+                      y1="80"
+                      x2="80"
+                      y2="140"
+                      stroke="#E5195E"
+                      strokeWidth="2"
+                      strokeDasharray="4,4"
+                    >
+                      <animate
+                        attributeName="stroke-dashoffset"
+                        values="0;-8"
+                        dur="2s"
+                        repeatCount="indefinite"
+                      />
                     </line>
-                    <line x1="160" y1="80" x2="160" y2="140" stroke="#E5195E" strokeWidth="2" strokeDasharray="4,4">
+                    <line
-                      <animate attributeName="stroke-dashoffset" values="0;-8" dur="2.5s" repeatCount="indefinite" />
+                      x1="160"
+                      y1="80"
+                      x2="160"
+                      y2="140"
+                      stroke="#E5195E"
+                      strokeWidth="2"
+                      strokeDasharray="4,4"
+                    >
+                      <animate
+                        attributeName="stroke-dashoffset"
+                        values="0;-8"
+                        dur="2.5s"
+                        repeatCount="indefinite"
+                      />
                     </line>
-                    <line x1="160" y1="80" x2="240" y2="140" stroke="#E5195E" strokeWidth="2" strokeDasharray="4,4">
+                    <line
-                      <animate attributeName="stroke-dashoffset" values="0;-8" dur="3s" repeatCount="indefinite" />
+                      x1="160"
+                      y1="80"
+                      x2="240"
+                      y2="140"
+                      stroke="#E5195E"
+                      strokeWidth="2"
+                      strokeDasharray="4,4"
+                    >
+                      <animate
+                        attributeName="stroke-dashoffset"
+                        values="0;-8"
+                        dur="3s"
+                        repeatCount="indefinite"
+                      />
                     </line>
                   </g>
                 </svg>
@@ -217,15 +276,24 @@ const EcommerceHeroWithCTA = () => {
                 transition={{ duration: 0.8, delay: 1.2 }}
                 className="flex justify-center gap-4 flex-wrap"
               >
-                <Badge variant="secondary" className="bg-blue-500/20 text-blue-300 border-blue-500/30">
+                <Badge
+                  variant="secondary"
+                  className="bg-blue-500/20 text-blue-300 border-blue-500/30"
+                >
                   <TrendingUp className="w-3 h-3 mr-1" />
                   High-Converting
                 </Badge>
-                <Badge variant="secondary" className="bg-green-500/20 text-green-300 border-green-500/30">
+                <Badge
+                  variant="secondary"
+                  className="bg-green-500/20 text-green-300 border-green-500/30"
+                >
                   <Zap className="w-3 h-3 mr-1" />
                   Scalable
                 </Badge>
-                <Badge variant="secondary" className="bg-purple-500/20 text-purple-300 border-purple-500/30">
+                <Badge
+                  variant="secondary"
+                  className="bg-purple-500/20 text-purple-300 border-purple-500/30"
+                >
                   <Shield className="w-3 h-3 mr-1" />
                   Secure
                 </Badge>
@@ -244,28 +312,29 @@ const EcommerceBenefits = () => {
     {
       icon: Target,
       title: "Conversion-Optimized Design",
-      description: "Intuitive UX to maximize sales."
+      description: "Intuitive UX to maximize sales.",
     },
     {
       icon: TrendingUp,
       title: "Scalability & Performance",
-      description: "Handles high traffic and large product catalogs."
+      description: "Handles high traffic and large product catalogs.",
     },
     {
       icon: Shield,
       title: "Robust Security",
-      description: "Protecting customer data and payment information."
+      description: "Protecting customer data and payment information.",
     },
     {
       icon: Network,
       title: "Seamless Integrations",
-      description: "Connecting with payment, shipping, CRM, and ERP systems."
+      description: "Connecting with payment, shipping, CRM, and ERP systems.",
     },
     {
       icon: Layers,
       title: "Omnichannel Capabilities",
-      description: "Consistent experience across web, mobile, and physical stores."
+      description:
-    }
+        "Consistent experience across web, mobile, and physical stores.",
+    },
   ];
 
   return (
@@ -367,29 +436,34 @@ const EcommerceProcess = () => {
   const steps = [
     {
       title: "Strategy & User Research",
-      description: "Deep market analysis, competitor research, and user behavior studies to define your eCommerce strategy and target audience.",
+      description:
-      icon: Search
+        "Deep market analysis, competitor research, and user behavior studies to define your eCommerce strategy and target audience.",
+      icon: Search,
     },
     {
       title: "Platform Selection & Design",
-      description: "Choosing the optimal platform and creating conversion-focused designs with intuitive user experience and brand alignment.",
+      description:
-      icon: Paintbrush2
+        "Choosing the optimal platform and creating conversion-focused designs with intuitive user experience and brand alignment.",
+      icon: Paintbrush2,
     },
     {
       title: "Development & Customization",
-      description: "Building custom features, integrating payment systems, and developing responsive interfaces optimized for all devices.",
+      description:
-      icon: Code
+        "Building custom features, integrating payment systems, and developing responsive interfaces optimized for all devices.",
+      icon: Code,
     },
     {
       title: "Integration & Testing",
-      description: "Connecting with third-party services, implementing security measures, and conducting thorough testing across all systems.",
+      description:
-      icon: Link
+        "Connecting with third-party services, implementing security measures, and conducting thorough testing across all systems.",
+      icon: Link,
     },
     {
       title: "Launch & Marketing Support",
-      description: "Successful deployment with SEO optimization, analytics setup, and ongoing marketing support to drive initial sales.",
+      description:
-      icon: Rocket
+        "Successful deployment with SEO optimization, analytics setup, and ongoing marketing support to drive initial sales.",
-    }
+      icon: Rocket,
+    },
   ];
 
   return (
@@ -423,15 +497,23 @@ const EcommerceProcess = () => {
                   whileInView={{ opacity: 1, x: 0 }}
                   transition={{ duration: 0.8, delay: index * 0.2 }}
                   viewport={{ once: true }}
-                  className={`flex items-center ${isEven ? 'lg:flex-row' : 'lg:flex-row-reverse'} flex-col lg:gap-16 gap-8`}
+                  className={`flex items-center ${
+                    isEven ? "lg:flex-row" : "lg:flex-row-reverse"
+                  } flex-col lg:gap-16 gap-8`}
                 >
-                  <div className={`flex-1 ${isEven ? 'lg:text-right' : 'lg:text-left'} text-center lg:text-left`}>
+                  <div
+                    className={`flex-1 ${
+                      isEven ? "lg:text-right" : "lg:text-left"
+                    } text-center lg:text-left`}
+                  >
                     <div className="bg-card/20 backdrop-blur-md rounded-2xl border border-white/10 p-8 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl">
                       <div className="flex items-center gap-4 mb-4 justify-center lg:justify-start">
                         <div className="w-12 h-12 bg-accent/20 rounded-xl flex items-center justify-center">
                           <IconComponent className="w-6 h-6 text-accent" />
                         </div>
-                        <div className="text-2xl font-bold text-accent">0{index + 1}</div>
+                        <div className="text-2xl font-bold text-accent">
+                          0{index + 1}
+                        </div>
                       </div>
                       <h3 className="text-2xl font-semibold text-foreground mb-4">
                         {step.title}
@@ -463,44 +545,80 @@ const EcommerceServices = () => {
       title: "Custom eCommerce Store Development",
       description: "Tailored solutions beyond off-the-shelf platforms.",
       icon: Code,
-      features: ["Custom Features", "Unique Design", "Performance Optimization", "Scalable Architecture"]
+      features: [
+        "Custom Features",
+        "Unique Design",
+        "Performance Optimization",
+        "Scalable Architecture",
+      ],
     },
     {
       title: "Multi-Vendor Marketplaces",
-      description: "Building platforms like Etsy or Amazon for diverse sellers.",
+      description:
+        "Building platforms like Etsy or Amazon for diverse sellers.",
       icon: Store,
-      features: ["Vendor Management", "Commission Systems", "Multi-tier Catalogs", "Revenue Sharing"]
+      features: [
+        "Vendor Management",
+        "Commission Systems",
+        "Multi-tier Catalogs",
+        "Revenue Sharing",
+      ],
     },
     {
       title: "B2B eCommerce Solutions",
       description: "Streamlined purchasing portals for businesses.",
       icon: Building,
-      features: ["Bulk Pricing", "Quote Management", "Account Hierarchies", "Custom Catalogs"]
+      features: [
+        "Bulk Pricing",
+        "Quote Management",
+        "Account Hierarchies",
+        "Custom Catalogs",
+      ],
     },
     {
       title: "Headless Commerce Implementation",
       description: "Decoupling frontend and backend for ultimate flexibility.",
       icon: ArrowLeftRight,
-      features: ["API-First Design", "Omnichannel Ready", "Performance Focused", "Future-Proof"]
+      features: [
+        "API-First Design",
+        "Omnichannel Ready",
+        "Performance Focused",
+        "Future-Proof",
+      ],
     },
     {
       title: "eCommerce Migrations & Upgrades",
       description: "Moving to new platforms or modernizing existing ones.",
       icon: RotateCcw,
-      features: ["Data Migration", "SEO Preservation", "Zero Downtime", "Performance Improvement"]
+      features: [
+        "Data Migration",
+        "SEO Preservation",
+        "Zero Downtime",
+        "Performance Improvement",
+      ],
     },
     {
       title: "Payment Gateway Integration",
       description: "Secure and diverse payment options.",
       icon: CreditCard,
-      features: ["Multiple Gateways", "Global Payments", "Security Compliance", "Fraud Protection"]
+      features: [
+        "Multiple Gateways",
+        "Global Payments",
+        "Security Compliance",
+        "Fraud Protection",
+      ],
     },
     {
       title: "Inventory & Order Management",
       description: "Automated systems for efficient operations.",
       icon: PackageCheck,
-      features: ["Real-time Tracking", "Multi-warehouse", "Automated Workflows", "Analytics Dashboard"]
+      features: [
-    }
+        "Real-time Tracking",
+        "Multi-warehouse",
+        "Automated Workflows",
+        "Analytics Dashboard",
+      ],
+    },
   ];
 
   return (
@@ -549,10 +667,16 @@ const EcommerceServices = () => {
                       {service.description}
                     </p>
                     <div className="space-y-2">
-                      <h4 className="text-sm font-medium text-white">Key Features:</h4>
+                      <h4 className="text-sm font-medium text-white">
+                        Key Features:
+                      </h4>
                       <div className="flex flex-wrap gap-2">
                         {service.features.map((feature) => (
-                          <Badge key={feature} variant="secondary" className="text-xs bg-gray-800/50 text-gray-300 border-gray-700">
+                          <Badge
+                            key={feature}
+                            variant="secondary"
+                            className="text-xs bg-gray-800/50 text-gray-300 border-gray-700"
+                          >
                             {feature}
                           </Badge>
                         ))}
@@ -598,10 +722,16 @@ const EcommerceServices = () => {
                         {service.description}
                       </p>
                       <div className="space-y-2">
-                        <h4 className="text-sm font-medium text-white">Key Features:</h4>
+                        <h4 className="text-sm font-medium text-white">
+                          Key Features:
+                        </h4>
                         <div className="flex flex-wrap gap-2">
                           {service.features.map((feature) => (
-                            <Badge key={feature} variant="secondary" className="text-xs bg-gray-800/50 text-gray-300 border-gray-700">
+                            <Badge
+                              key={feature}
+                              variant="secondary"
+                              className="text-xs bg-gray-800/50 text-gray-300 border-gray-700"
+                            >
                               {feature}
                             </Badge>
                           ))}
@@ -622,28 +752,76 @@ const EcommerceServices = () => {
 // eCommerce Tech Stack
 const EcommerceTechStack = () => {
   const platforms = [
-    { name: "Shopify Plus", logo: "https://cdn.shopify.com/s/files/1/0533/2089/files/shopify_logo.svg", category: "Platform" },
+    {
-    { name: "Magento", logo: "https://upload.wikimedia.org/wikipedia/commons/5/55/Magento_Logo.svg", category: "Platform" },
+      name: "Shopify Plus",
-    { name: "WooCommerce", logo: "https://woocommerce.com/wp-content/themes/storefront-child/assets/images/logo-woocommerce.svg", category: "Platform" },
+      logo: "https://cdn.shopify.com/s/files/1/0533/2089/files/shopify_logo.svg",
-    { name: "BigCommerce", logo: "https://www.bigcommerce.com/assets/images/bc-logo.svg", category: "Platform" }
+      category: "Platform",
+    },
+    {
+      name: "Magento",
+      logo: "https://upload.wikimedia.org/wikipedia/commons/5/55/Magento_Logo.svg",
+      category: "Platform",
+    },
+    {
+      name: "WooCommerce",
+      logo: "https://woocommerce.com/wp-content/themes/storefront-child/assets/images/logo-woocommerce.svg",
+      category: "Platform",
+    },
+    {
+      name: "BigCommerce",
+      logo: "https://www.bigcommerce.com/assets/images/bc-logo.svg",
+      category: "Platform",
+    },
   ];
 
   const frontends = [
-    { name: "React", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/react/react-original.svg", category: "Frontend" },
+    {
-    { name: "Angular", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/angularjs/angularjs-original.svg", category: "Frontend" },
+      name: "React",
-    { name: "Vue.js", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/vuejs/vuejs-original.svg", category: "Frontend" }
+      logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/react/react-original.svg",
+      category: "Frontend",
+    },
+    {
+      name: "Angular",
+      logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/angularjs/angularjs-original.svg",
+      category: "Frontend",
+    },
+    {
+      name: "Vue.js",
+      logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/vuejs/vuejs-original.svg",
+      category: "Frontend",
+    },
   ];
 
   const backends = [
-    { name: "Node.js", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nodejs/nodejs-original.svg", category: "Backend" },
+    {
-    { name: "Python", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/python/python-original.svg", category: "Backend" },
+      name: "Node.js",
-    { name: "PHP", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/php/php-original.svg", category: "Backend" }
+      logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nodejs/nodejs-original.svg",
+      category: "Backend",
+    },
+    {
+      name: "Python",
+      logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/python/python-original.svg",
+      category: "Backend",
+    },
+    {
+      name: "PHP",
+      logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/php/php-original.svg",
+      category: "Backend",
+    },
   ];
 
   const payments = [
-    { name: "Stripe", icon: CreditCard, description: "Global payment processing" },
+    {
-    { name: "PayPal", icon: Banknote, description: "Worldwide payment solutions" },
+      name: "Stripe",
-    { name: "Square", icon: Scan, description: "Point-of-sale integration" }
+      icon: CreditCard,
+      description: "Global payment processing",
+    },
+    {
+      name: "PayPal",
+      icon: Banknote,
+      description: "Worldwide payment solutions",
+    },
+    { name: "Square", icon: Scan, description: "Point-of-sale integration" },
   ];
 
   return (
@@ -660,7 +838,8 @@ const EcommerceTechStack = () => {
             Utilizing Industry-Leading Platforms and Modern Frameworks
           </h2>
           <p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
-            For powerful eCommerce solutions that drive sales and scale with your business.
+            For powerful eCommerce solutions that drive sales and scale with
+            your business.
           </p>
         </motion.div>
 
@@ -672,7 +851,9 @@ const EcommerceTechStack = () => {
           viewport={{ once: true }}
           className="mb-16"
         >
-          <h3 className="text-2xl font-semibold text-foreground mb-8 text-center">eCommerce Platforms</h3>
+          <h3 className="text-2xl font-semibold text-foreground mb-8 text-center">
+            eCommerce Platforms
+          </h3>
           <div className="grid grid-cols-2 md:grid-cols-4 gap-6 max-w-4xl mx-auto">
             {platforms.map((platform, index) => (
               <motion.div
@@ -688,8 +869,12 @@ const EcommerceTechStack = () => {
                   <div className="w-12 h-12 mx-auto mb-4 flex items-center justify-center">
                     <Store className="w-8 h-8 text-accent" />
                   </div>
-                  <h4 className="font-semibold text-foreground text-sm mb-1">{platform.name}</h4>
+                  <h4 className="font-semibold text-foreground text-sm mb-1">
-                  <p className="text-xs text-muted-foreground">{platform.category}</p>
+                    {platform.name}
+                  </h4>
+                  <p className="text-xs text-muted-foreground">
+                    {platform.category}
+                  </p>
                 </Card>
               </motion.div>
             ))}
@@ -707,7 +892,9 @@ const EcommerceTechStack = () => {
           <div className="grid lg:grid-cols-2 gap-12">
             {/* Frontend */}
             <div>
-              <h3 className="text-2xl font-semibold text-foreground mb-8 text-center">Frontend Technologies</h3>
+              <h3 className="text-2xl font-semibold text-foreground mb-8 text-center">
+                Frontend Technologies
+              </h3>
               <div className="grid grid-cols-3 gap-4">
                 {frontends.map((tech, index) => (
                   <motion.div
@@ -727,7 +914,9 @@ const EcommerceTechStack = () => {
                           className="w-8 h-8 object-contain filter brightness-0 invert dark:brightness-100 dark:invert-0 group-hover:brightness-100 group-hover:invert-0 transition-all duration-300"
                         />
                       </div>
-                      <h4 className="font-semibold text-foreground text-sm">{tech.name}</h4>
+                      <h4 className="font-semibold text-foreground text-sm">
+                        {tech.name}
+                      </h4>
                     </Card>
                   </motion.div>
                 ))}
@@ -736,7 +925,9 @@ const EcommerceTechStack = () => {
 
             {/* Backend */}
             <div>
-              <h3 className="text-2xl font-semibold text-foreground mb-8 text-center">Backend Technologies</h3>
+              <h3 className="text-2xl font-semibold text-foreground mb-8 text-center">
+                Backend Technologies
+              </h3>
               <div className="grid grid-cols-3 gap-4">
                 {backends.map((tech, index) => (
                   <motion.div
@@ -756,7 +947,9 @@ const EcommerceTechStack = () => {
                           className="w-8 h-8 object-contain filter brightness-0 invert dark:brightness-100 dark:invert-0 group-hover:brightness-100 group-hover:invert-0 transition-all duration-300"
                         />
                       </div>
-                      <h4 className="font-semibold text-foreground text-sm">{tech.name}</h4>
+                      <h4 className="font-semibold text-foreground text-sm">
+                        {tech.name}
+                      </h4>
                     </Card>
                   </motion.div>
                 ))}
@@ -772,7 +965,9 @@ const EcommerceTechStack = () => {
           transition={{ duration: 0.8, delay: 0.4 }}
           viewport={{ once: true }}
         >
-          <h3 className="text-2xl font-semibold text-foreground mb-8 text-center">Payment Solutions</h3>
+          <h3 className="text-2xl font-semibold text-foreground mb-8 text-center">
+            Payment Solutions
+          </h3>
           <div className="grid md:grid-cols-3 gap-6 max-w-4xl mx-auto">
             {payments.map((payment, index) => {
               const IconComponent = payment.icon;
@@ -790,8 +985,12 @@ const EcommerceTechStack = () => {
                     <div className="w-12 h-12 bg-accent/20 rounded-lg flex items-center justify-center mx-auto mb-4">
                       <IconComponent className="w-6 h-6 text-accent" />
                     </div>
-                    <h4 className="font-semibold text-foreground mb-2">{payment.name}</h4>
+                    <h4 className="font-semibold text-foreground mb-2">
-                    <p className="text-sm text-muted-foreground leading-relaxed">{payment.description}</p>
+                      {payment.name}
+                    </h4>
+                    <p className="text-sm text-muted-foreground leading-relaxed">
+                      {payment.description}
+                    </p>
                   </Card>
                 </motion.div>
               );
@@ -809,30 +1008,35 @@ const EcommerceCaseStudies = () => {
     {
       title: "Luxury Fashion Marketplace",
       client: "StyleVault",
-      description: "High-end fashion platform with advanced filtering, AR try-on features, and seamless checkout experience for luxury brands and customers",
+      description:
-      image: "https://images.unsplash.com/photo-1441986300917-64674bd600d8?w=400&h=300&fit=crop&auto=format",
+        "High-end fashion platform with advanced filtering, AR try-on features, and seamless checkout experience for luxury brands and customers",
+      image:
+        "https://images.unsplash.com/photo-1441986300917-64674bd600d8?w=400&h=300&fit=crop&auto=format",
       results: "300% increase in conversion rate",
       gradient: "from-purple-500/20 to-pink-500/20",
-      features: "AR Try-on, Luxury UX, Advanced Search"
+      features: "AR Try-on, Luxury UX, Advanced Search",
     },
     {
       title: "B2B Industrial Supply Platform",
       client: "IndustrialHub",
-      description: "Comprehensive B2B marketplace with bulk pricing, quote management, and custom catalog solutions for industrial suppliers and buyers",
+      description:
-      image: "https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d?w=400&h=300&fit=crop&auto=format",
+        "Comprehensive B2B marketplace with bulk pricing, quote management, and custom catalog solutions for industrial suppliers and buyers",
+      image:
+        "https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d?w=400&h=300&fit=crop&auto=format",
       results: "150% growth in B2B sales",
       gradient: "from-blue-500/20 to-cyan-500/20",
-      features: "Bulk Pricing, Quote System, Custom Catalogs"
+      features: "Bulk Pricing, Quote System, Custom Catalogs",
     },
     {
       title: "Multi-Vendor Food Marketplace",
       client: "LocalEats",
-      description: "Food delivery platform connecting local restaurants with customers, featuring real-time tracking, multi-payment options, and vendor management",
+      description:
+        "Food delivery platform connecting local restaurants with customers, featuring real-time tracking, multi-payment options, and vendor management",
       image: multiVendorImage,
       results: "500+ vendors onboarded",
       gradient: "from-green-500/20 to-emerald-500/20",
-      features: "Real-time Tracking, Multi-vendor, Vendor Management"
+      features: "Real-time Tracking, Multi-vendor, Vendor Management",
-    }
+    },
   ];
 
   return (
@@ -878,7 +1082,10 @@ const EcommerceCaseStudies = () => {
                         <div className="text-xs text-gray-400 mb-2 uppercase tracking-wider">
                           {study.client}
                         </div>
-                        <Badge variant="secondary" className="text-xs bg-accent/20 text-accent border-accent/30">
+                        <Badge
+                          variant="secondary"
+                          className="text-xs bg-accent/20 text-accent border-accent/30"
+                        >
                           {study.results}
                         </Badge>
                       </div>
@@ -890,7 +1097,9 @@ const EcommerceCaseStudies = () => {
                   </div>
 
                   <div className="px-8 pb-6 flex-1">
-                    <div className={`relative rounded-xl overflow-hidden bg-gradient-to-br ${study.gradient} p-4 border border-gray-700`}>
+                    <div
+                      className={`relative rounded-xl overflow-hidden bg-gradient-to-br ${study.gradient} p-4 border border-gray-700`}
+                    >
                       <ImageWithFallback
                         src={study.image}
                         alt={study.title}
@@ -904,10 +1113,10 @@ const EcommerceCaseStudies = () => {
                       {study.description}
                     </p>
                     <div className="space-y-2">
-                      <h4 className="text-xs font-medium text-white uppercase tracking-wider">Key Features:</h4>
+                      <h4 className="text-xs font-medium text-white uppercase tracking-wider">
-                      <p className="text-xs text-gray-400">
+                        Key Features:
-                        {study.features}
+                      </h4>
-                      </p>
+                      <p className="text-xs text-gray-400">{study.features}</p>
                     </div>
                   </div>
 
@@ -917,7 +1126,9 @@ const EcommerceCaseStudies = () => {
                       size="sm"
                       className="w-full justify-between text-accent hover:text-accent hover:bg-accent/10 group-hover:translate-x-1 transition-all duration-300"
                     >
-                      <span className="text-sm font-medium">VIEW CASE STUDY</span>
+                      <span className="text-sm font-medium">
+                        VIEW CASE STUDY
+                      </span>
                       <ArrowRight className="w-4 h-4" />
                     </Button>
                   </div>
@@ -953,7 +1164,9 @@ const EcommerceInlineCTA = () => {
             <div className="inline-block p-[2px] rounded-full bg-gradient-to-r from-accent via-blue-500 to-purple-500">
               <div className="bg-background rounded-full px-6 py-3 flex items-center gap-2">
                 <TrendingUp className="w-5 h-5 text-foreground" />
-                <span className="text-foreground text-base font-medium">Sales Growth</span>
+                <span className="text-foreground text-base font-medium">
+                  Sales Growth
+                </span>
               </div>
             </div>
 
@@ -963,10 +1176,14 @@ const EcommerceInlineCTA = () => {
             </h2>
 
             <p className="text-xl text-muted-foreground leading-relaxed max-w-2xl mx-auto">
-              Let's discuss a platform strategy that maximizes your revenue potential.
+              Let's discuss a platform strategy that maximizes your revenue
+              potential.
             </p>
 
-            <ShimmerButton className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl">
+            <ShimmerButton
+              className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl"
+              onClick={() => navigateTo("/start-a-project")}
+            >
               <div className="inline-flex items-center gap-3">
                 <MessageSquare className="w-6 h-6 flex-shrink-0" />
                 <span>Get a Free eCommerce Consultation</span>
@@ -986,26 +1203,46 @@ const HireEcommerceDevelopers = () => {
       title: "Shopify Experts",
       description: "Specialists in Shopify and Shopify Plus development",
       icon: Store,
-      skills: ["Theme Development", "App Integration", "Performance Optimization", "Plus Features"]
+      skills: [
+        "Theme Development",
+        "App Integration",
+        "Performance Optimization",
+        "Plus Features",
+      ],
     },
     {
       title: "Magento Developers",
       description: "Adobe Commerce and Magento specialists",
       icon: Code,
-      skills: ["Custom Extensions", "B2B Solutions", "Multi-store Setup", "Performance Tuning"]
+      skills: [
+        "Custom Extensions",
+        "B2B Solutions",
+        "Multi-store Setup",
+        "Performance Tuning",
+      ],
     },
     {
       title: "WooCommerce Specialists",
       description: "WordPress and WooCommerce development experts",
       icon: ShoppingCart,
-      skills: ["Plugin Development", "Custom Themes", "Payment Integration", "SEO Optimization"]
+      skills: [
+        "Plugin Development",
+        "Custom Themes",
+        "Payment Integration",
+        "SEO Optimization",
+      ],
     },
     {
       title: "Custom eCommerce Engineers",
       description: "Full-stack developers for bespoke solutions",
       icon: Wrench,
-      skills: ["Custom Architecture", "API Development", "Database Design", "Security Implementation"]
+      skills: [
-    }
+        "Custom Architecture",
+        "API Development",
+        "Database Design",
+        "Security Implementation",
+      ],
+    },
   ];
 
   return (
@@ -1022,7 +1259,8 @@ const HireEcommerceDevelopers = () => {
             Find Expert eCommerce Developers
           </h2>
           <p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
-            Access our specialized developers proficient in Shopify, Magento, WooCommerce, and custom eCommerce solutions.
+            Access our specialized developers proficient in Shopify, Magento,
+            WooCommerce, and custom eCommerce solutions.
           </p>
         </motion.div>
 
@@ -1057,10 +1295,16 @@ const HireEcommerceDevelopers = () => {
                       {type.description}
                     </p>
                     <div className="space-y-2">
-                      <h4 className="text-sm font-medium text-white">Core Skills:</h4>
+                      <h4 className="text-sm font-medium text-white">
+                        Core Skills:
+                      </h4>
                       <div className="flex flex-wrap gap-2">
                         {type.skills.map((skill) => (
-                          <Badge key={skill} variant="secondary" className="text-xs bg-gray-800/50 text-gray-300 border-gray-700">
+                          <Badge
+                            key={skill}
+                            variant="secondary"
+                            className="text-xs bg-gray-800/50 text-gray-300 border-gray-700"
+                          >
                             {skill}
                           </Badge>
                         ))}
@@ -1090,7 +1334,7 @@ const HireEcommerceDevelopers = () => {
             <Button
               variant="outline"
               size="lg"
-              className="text-lg px-8 py-4 border-gray-600 text-gray-300 hover:bg-gray-800 hover:text-white"
+              className="text-lg px-8 py-4 h-[56px] border-gray-600 text-gray-300 hover:bg-gray-800 hover:text-white"
             >
               <div className="inline-flex items-center gap-2">
                 <FileText className="w-5 h-5 flex-shrink-0" />
@@ -1109,20 +1353,24 @@ const EcommerceFAQs = () => {
   const faqs = [
     {
       question: "Should I choose a platform or custom eCommerce development?",
-      answer: "The choice depends on your specific needs, budget, and scalability requirements. Platforms like Shopify or Magento offer faster deployment and built-in features, while custom development provides unlimited flexibility and unique functionality. We help you evaluate factors like expected traffic, product complexity, integration needs, and long-term growth plans to make the best decision."
+      answer:
+        "The choice depends on your specific needs, budget, and scalability requirements. Platforms like Shopify or Magento offer faster deployment and built-in features, while custom development provides unlimited flexibility and unique functionality. We help you evaluate factors like expected traffic, product complexity, integration needs, and long-term growth plans to make the best decision.",
     },
     {
       question: "How do you handle payment gateway integrations?",
-      answer: "We integrate multiple payment gateways including Stripe, PayPal, Square, and regional payment providers to maximize conversion rates. Our integration process includes security compliance (PCI DSS), fraud protection, multi-currency support, and seamless checkout experiences. We also implement backup payment methods and handle all technical certifications required for secure transactions."
+      answer:
+        "We integrate multiple payment gateways including Stripe, PayPal, Square, and regional payment providers to maximize conversion rates. Our integration process includes security compliance (PCI DSS), fraud protection, multi-currency support, and seamless checkout experiences. We also implement backup payment methods and handle all technical certifications required for secure transactions.",
     },
     {
       question: "What is headless commerce and its benefits?",
-      answer: "Headless commerce decouples the frontend presentation layer from the backend commerce functionality, allowing greater flexibility and performance. Benefits include faster page loads, omnichannel experiences, easier third-party integrations, and the ability to use modern frontend frameworks. This approach is ideal for businesses needing custom user experiences or planning to sell across multiple channels."
+      answer:
+        "Headless commerce decouples the frontend presentation layer from the backend commerce functionality, allowing greater flexibility and performance. Benefits include faster page loads, omnichannel experiences, easier third-party integrations, and the ability to use modern frontend frameworks. This approach is ideal for businesses needing custom user experiences or planning to sell across multiple channels.",
     },
     {
       question: "Do you offer ongoing support for my online store?",
-      answer: "Yes, we provide comprehensive ongoing support including security updates, performance monitoring, feature enhancements, backup management, and technical troubleshooting. Our support packages range from basic maintenance to full-service management, including marketing optimization, inventory management assistance, and regular performance audits to ensure your store continues to grow and succeed."
+      answer:
-    }
+        "Yes, we provide comprehensive ongoing support including security updates, performance monitoring, feature enhancements, backup management, and technical troubleshooting. Our support packages range from basic maintenance to full-service management, including marketing optimization, inventory management assistance, and regular performance audits to ensure your store continues to grow and succeed.",
+    },
   ];
 
   return (
@@ -1155,7 +1403,9 @@ const EcommerceFAQs = () => {
                 className="bg-gray-900/50 backdrop-blur-md rounded-2xl border border-gray-800 px-10 shadow-lg"
               >
                 <AccordionTrigger className="text-left hover:no-underline py-10 text-xl">
-                  <span className="font-semibold text-white">{faq.question}</span>
+                  <span className="font-semibold text-white">
+                    {faq.question}
+                  </span>
                 </AccordionTrigger>
                 <AccordionContent className="text-gray-300 pb-10 text-lg leading-relaxed">
                   {faq.answer}
@@ -1191,7 +1441,9 @@ const EcommerceFinalCTA = () => {
             <div className="inline-block p-[2px] rounded-full bg-gradient-to-r from-accent via-blue-500 to-purple-500">
               <div className="bg-background rounded-full px-6 py-3 flex items-center gap-2">
                 <Store className="w-5 h-5 text-foreground" />
-                <span className="text-foreground text-base font-medium">eCommerce Excellence</span>
+                <span className="text-foreground text-base font-medium">
+                  eCommerce Excellence
+                </span>
               </div>
             </div>
           </motion.div>
@@ -1208,7 +1460,8 @@ const EcommerceFinalCTA = () => {
             viewport={{ once: true }}
             className="text-xl text-muted-foreground mb-12 max-w-2xl mx-auto leading-relaxed"
           >
-            Partner with us to create an online presence that attracts, engages, and converts customers effectively.
+            Partner with us to create an online presence that attracts, engages,
+            and converts customers effectively.
           </motion.p>
 
           <motion.div
@@ -1218,7 +1471,10 @@ const EcommerceFinalCTA = () => {
             viewport={{ once: true }}
             className="space-y-8"
           >
-            <ShimmerButton className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25">
+            <ShimmerButton
+              className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25"
+              onClick={() => navigateTo("/start-a-project")}
+            >
               <div className="inline-flex items-center gap-3">
                 <Rocket className="w-6 h-6 flex-shrink-0" />
                 <span>Start Your eCommerce Project</span>

pages/HireBackendDevelopers.tsx

@@ -4,73 +4,136 @@ import { Footer } from "../components/Footer";
 import { Button } from "../components/ui/button";
 import { Badge } from "../components/ui/badge";
 import { Card, CardContent } from "../components/ui/card";
-import { ArrowRight, Database, Server, Cloud, Shield, Zap, Target, CheckCircle, Star, Code } from "lucide-react";
+import {
+  ArrowRight,
+  Database,
+  Server,
+  Cloud,
+  Shield,
+  Zap,
+  Target,
+  CheckCircle,
+  Star,
+  Code,
+} from "lucide-react";
+import { navigateTo } from "@/App";
 
 export const HireBackendDevelopers = () => {
   const expertise = [
     {
       category: "Languages & Frameworks",
-      description: "Node.js (Express, NestJS), Python (Django, Flask), Java (Spring Boot), PHP (Laravel, Symfony), Ruby on Rails, Go",
+      description:
-      skills: ["Node.js", "Python", "Java", "PHP", "Ruby", "Go", "C#", ".NET Core"]
+        "Node.js (Express, NestJS), Python (Django, Flask), Java (Spring Boot), PHP (Laravel, Symfony), Ruby on Rails, Go",
+      skills: [
+        "Node.js",
+        "Python",
+        "Java",
+        "PHP",
+        "Ruby",
+        "Go",
+        "C#",
+        ".NET Core",
+      ],
     },
     {
       category: "Database Management",
-      description: "Designing, optimizing, and managing SQL (MySQL, PostgreSQL, MS SQL Server) and NoSQL (MongoDB, Cassandra, Redis) databases",
+      description:
-      skills: ["MySQL", "PostgreSQL", "MongoDB", "Redis", "Cassandra", "Elasticsearch"]
+        "Designing, optimizing, and managing SQL (MySQL, PostgreSQL, MS SQL Server) and NoSQL (MongoDB, Cassandra, Redis) databases",
+      skills: [
+        "MySQL",
+        "PostgreSQL",
+        "MongoDB",
+        "Redis",
+        "Cassandra",
+        "Elasticsearch",
+      ],
     },
     {
       category: "API Development",
-      description: "Building secure and efficient RESTful APIs and GraphQL endpoints for seamless frontend communication",
+      description:
-      skills: ["REST APIs", "GraphQL", "WebSocket", "gRPC", "API Gateway", "OAuth"]
+        "Building secure and efficient RESTful APIs and GraphQL endpoints for seamless frontend communication",
+      skills: [
+        "REST APIs",
+        "GraphQL",
+        "WebSocket",
+        "gRPC",
+        "API Gateway",
+        "OAuth",
+      ],
     },
     {
       category: "Cloud Services",
-      description: "Leveraging AWS, Azure, Google Cloud Platform for scalable deployments",
+      description:
-      skills: ["AWS", "Azure", "Google Cloud", "Docker", "Kubernetes", "Serverless"]
+        "Leveraging AWS, Azure, Google Cloud Platform for scalable deployments",
+      skills: [
+        "AWS",
+        "Azure",
+        "Google Cloud",
+        "Docker",
+        "Kubernetes",
+        "Serverless",
+      ],
     },
     {
       category: "Security",
-      description: "Implementing authentication, authorization, data encryption, and vulnerability management",
+      description:
-      skills: ["JWT", "OAuth2", "SSL/TLS", "Encryption", "Security Audits", "OWASP"]
+        "Implementing authentication, authorization, data encryption, and vulnerability management",
+      skills: [
+        "JWT",
+        "OAuth2",
+        "SSL/TLS",
+        "Encryption",
+        "Security Audits",
+        "OWASP",
+      ],
     },
     {
       category: "Scalability & Performance",
       description: "Designing architectures for high traffic and future growth",
-      skills: ["Microservices", "Load Balancing", "Caching", "CDN", "Performance Optimization"]
+      skills: [
-    }
+        "Microservices",
+        "Load Balancing",
+        "Caching",
+        "CDN",
+        "Performance Optimization",
+      ],
+    },
   ];
 
   const deliverables = [
     {
       icon: Server,
       title: "Server-Side Logic",
-      description: "Developing the core business logic and functionalities."
+      description: "Developing the core business logic and functionalities.",
     },
     {
       icon: Database,
       title: "Database Integration",
-      description: "Efficient data storage, retrieval, and manipulation."
+      description: "Efficient data storage, retrieval, and manipulation.",
     },
     {
       icon: Code,
       title: "API Development",
-      description: "Creating robust and secure interfaces for other services to interact with."
+      description:
+        "Creating robust and secure interfaces for other services to interact with.",
     },
     {
       icon: Target,
       title: "System Architecture",
-      description: "Designing scalable and resilient backend systems."
+      description: "Designing scalable and resilient backend systems.",
     },
     {
       icon: Cloud,
       title: "Integrations",
-      description: "Connecting with third-party services, payment gateways, and external systems."
+      description:
+        "Connecting with third-party services, payment gateways, and external systems.",
     },
     {
       icon: Zap,
       title: "Performance Optimization",
-      description: "Ensuring rapid response times and efficient resource utilization."
+      description:
-    }
+        "Ensuring rapid response times and efficient resource utilization.",
+    },
   ];
 
   const projectTypes = [
@@ -79,45 +142,53 @@ export const HireBackendDevelopers = () => {
     "API Development for Mobile & Web Apps",
     "Real-Time Data Streaming",
     "Microservices Architecture",
-    "Enterprise-Grade Applications"
+    "Enterprise-Grade Applications",
   ];
 
   const techStacks = [
     {
       name: "Node.js Ecosystem",
       technologies: ["Express.js", "NestJS", "TypeScript", "MongoDB", "Redis"],
-      description: "JavaScript-based backend for fast, scalable applications"
+      description: "JavaScript-based backend for fast, scalable applications",
     },
     {
       name: "Python Stack",
       technologies: ["Django", "Flask", "FastAPI", "PostgreSQL", "Celery"],
-      description: "Robust Python frameworks for data-intensive applications"
+      description: "Robust Python frameworks for data-intensive applications",
     },
     {
       name: "Java Enterprise",
-      technologies: ["Spring Boot", "Spring Security", "JPA", "MySQL", "Apache Kafka"],
+      technologies: [
-      description: "Enterprise-grade Java solutions for large-scale systems"
+        "Spring Boot",
+        "Spring Security",
+        "JPA",
+        "MySQL",
+        "Apache Kafka",
+      ],
+      description: "Enterprise-grade Java solutions for large-scale systems",
     },
     {
       name: "PHP Modern",
       technologies: ["Laravel", "Symfony", "PHP 8+", "MySQL", "Redis"],
-      description: "Modern PHP development with elegant frameworks"
+      description: "Modern PHP development with elegant frameworks",
-    }
+    },
   ];
 
   const testimonials = [
     {
-      quote: "Our backend developer from WDI built a robust API that handles millions of requests daily without any performance issues. The architecture is solid and scalable.",
+      quote:
+        "Our backend developer from WDI built a robust API that handles millions of requests daily without any performance issues. The architecture is solid and scalable.",
       author: "Robert Chen",
       role: "CTO, ScaleUp Technologies",
-      rating: 5
+      rating: 5,
     },
     {
-      quote: "The microservices architecture they designed transformed our monolithic application. We can now deploy features independently and scale efficiently.",
+      quote:
+        "The microservices architecture they designed transformed our monolithic application. We can now deploy features independently and scale efficiently.",
       author: "Amanda Foster",
       role: "Engineering Manager, CloudFirst",
-      rating: 5
+      rating: 5,
-    }
+    },
   ];
 
   return (
@@ -131,30 +202,43 @@ export const HireBackendDevelopers = () => {
           className="absolute inset-0 opacity-30"
           style={{
             backgroundImage: `radial-gradient(circle at 1px 1px, rgba(255,255,255,0.15) 1px, transparent 0)`,
-            backgroundSize: '40px 40px'
+            backgroundSize: "40px 40px",
           }}
         />
 
         <div className="relative container mx-auto px-6 lg:px-8">
           <div className="max-w-4xl mx-auto text-center">
-            <Badge variant="outline" className="mb-6 border-[#E5195E]/20 text-[#E5195E]">
+            <Badge
+              variant="outline"
+              className="mb-6 border-[#E5195E]/20 text-[#E5195E]"
+            >
               Building Robust Server-Side Solutions
             </Badge>
             <h1 className="text-4xl md:text-6xl lg:text-7xl font-bold mb-6 bg-gradient-to-r from-white via-white to-white/80 bg-clip-text text-transparent">
               Hire Backend Developers: Powering Your Applications with
-              <span className="bg-gradient-to-r from-[#E5195E] to-[#FF6B9D] bg-clip-text text-transparent"> Robust Foundations</span>
+              <span className="bg-gradient-to-r from-[#E5195E] to-[#FF6B9D] bg-clip-text text-transparent">
+                {" "}
+                Robust Foundations
+              </span>
             </h1>
             <p className="text-lg md:text-xl text-muted-foreground mb-8 max-w-3xl mx-auto leading-relaxed">
-              The true power of any digital product lies in its robust and scalable backend. WDI provides expert backend developers who specialize in building the secure, efficient, and reliable server-side infrastructure that underpins your applications.
+              The true power of any digital product lies in its robust and
+              scalable backend. WDI provides expert backend developers who
+              specialize in building the secure, efficient, and reliable
+              server-side infrastructure that underpins your applications.
             </p>
             <div className="flex flex-col sm:flex-row gap-4 justify-center">
-              <Button size="lg" className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white">
+              <Button
+                size="lg"
+                className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
+                onClick={() => navigateTo("/start-a-project")}
+              >
                 Connect with Backend Experts
                 <ArrowRight className="ml-2 w-4 h-4" />
               </Button>
-              <Button size="lg" variant="outline" className="border-white/20 text-white hover:bg-white/10">
+              {/* <Button size="lg" variant="outline" className="border-white/20 text-white hover:bg-white/10">
                 Request a Technical Assessment
-              </Button>
+              </Button> */}
             </div>
           </div>
         </div>
@@ -165,7 +249,9 @@ export const HireBackendDevelopers = () => {
         <div className="container mx-auto px-6 lg:px-8">
           <div className="max-w-4xl mx-auto text-center">
             <p className="text-lg text-muted-foreground leading-relaxed">
-              From database management to API development, our talent ensures your system performs flawlessly under any load. We build the invisible foundation that makes everything else possible.
+              From database management to API development, our talent ensures
+              your system performs flawlessly under any load. We build the
+              invisible foundation that makes everything else possible.
             </p>
           </div>
         </div>
@@ -179,13 +265,17 @@ export const HireBackendDevelopers = () => {
               Popular Backend Technology Stacks
             </h2>
             <p className="text-muted-foreground max-w-2xl mx-auto">
-              Our developers are proficient in the most powerful backend technologies
+              Our developers are proficient in the most powerful backend
+              technologies
             </p>
           </div>
 
           <div className="grid md:grid-cols-2 gap-8">
             {techStacks.map((stack, index) => (
-              <Card key={index} className="bg-card/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300 group">
+              <Card
+                key={index}
+                className="bg-card/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300 group"
+              >
                 <CardContent className="p-8">
                   <h3 className="text-xl font-bold text-white mb-3 group-hover:text-[#E5195E] transition-colors duration-300">
                     {stack.name}
@@ -197,7 +287,11 @@ export const HireBackendDevelopers = () => {
 
                   <div className="flex flex-wrap gap-2">
                     {stack.technologies.map((tech, techIndex) => (
-                      <Badge key={techIndex} variant="outline" className="border-white/20 text-white text-xs">
+                      <Badge
+                        key={techIndex}
+                        variant="outline"
+                        className="border-white/20 text-white text-xs"
+                      >
                         {tech}
                       </Badge>
                     ))}
@@ -223,7 +317,10 @@ export const HireBackendDevelopers = () => {
 
           <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
             {expertise.map((area, index) => (
-              <Card key={index} className="bg-background/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300 group">
+              <Card
+                key={index}
+                className="bg-background/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300 group"
+              >
                 <CardContent className="p-6">
                   <h3 className="text-lg font-semibold text-white mb-3 group-hover:text-[#E5195E] transition-colors duration-300">
                     {area.category}
@@ -237,7 +334,9 @@ export const HireBackendDevelopers = () => {
                     {area.skills.map((skill, skillIndex) => (
                       <div key={skillIndex} className="flex items-center gap-2">
                         <div className="w-1.5 h-1.5 rounded-full bg-[#E5195E]" />
-                        <span className="text-muted-foreground text-xs">{skill}</span>
+                        <span className="text-muted-foreground text-xs">
+                          {skill}
+                        </span>
                       </div>
                     ))}
                   </div>
@@ -262,7 +361,10 @@ export const HireBackendDevelopers = () => {
 
           <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
             {deliverables.map((item, index) => (
-              <Card key={index} className="bg-card/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300 group">
+              <Card
+                key={index}
+                className="bg-card/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300 group"
+              >
                 <CardContent className="p-6 text-center">
                   <item.icon className="w-8 h-8 text-[#E5195E] mb-4 mx-auto group-hover:scale-110 transition-transform duration-300" />
                   <h3 className="text-lg font-semibold text-white mb-3 group-hover:text-[#E5195E] transition-colors duration-300">
@@ -292,7 +394,10 @@ export const HireBackendDevelopers = () => {
 
           <div className="grid md:grid-cols-2 gap-6 max-w-4xl mx-auto">
             {projectTypes.map((project, index) => (
-              <div key={index} className="flex items-center gap-3 p-4 rounded-lg bg-background/50 border border-white/10 hover:border-[#E5195E]/30 transition-all duration-300">
+              <div
+                key={index}
+                className="flex items-center gap-3 p-4 rounded-lg bg-background/50 border border-white/10 hover:border-[#E5195E]/30 transition-all duration-300"
+              >
                 <CheckCircle className="w-5 h-5 text-[#E5195E] flex-shrink-0" />
                 <span className="text-white">{project}</span>
               </div>
@@ -319,7 +424,10 @@ export const HireBackendDevelopers = () => {
                 <CardContent className="p-8">
                   <div className="flex gap-1 mb-4">
                     {[...Array(testimonial.rating)].map((_, i) => (
-                      <Star key={i} className="w-5 h-5 text-yellow-400 fill-current" />
+                      <Star
+                        key={i}
+                        className="w-5 h-5 text-yellow-400 fill-current"
+                      />
                     ))}
                   </div>
 
@@ -328,7 +436,9 @@ export const HireBackendDevelopers = () => {
                   </p>
 
                   <div className="border-t border-white/10 pt-6">
-                    <h4 className="text-white font-semibold">{testimonial.author}</h4>
+                    <h4 className="text-white font-semibold">
+                      {testimonial.author}
+                    </h4>
                     <p className="text-[#E5195E] text-sm">{testimonial.role}</p>
                   </div>
                 </CardContent>
@@ -346,14 +456,22 @@ export const HireBackendDevelopers = () => {
               Ready to Build a Solid Foundation?
             </h2>
             <p className="text-lg text-muted-foreground mb-8 max-w-2xl mx-auto">
-              Connect with our backend specialists and create the robust infrastructure your application needs.
+              Connect with our backend specialists and create the robust
+              infrastructure your application needs.
             </p>
             <div className="flex flex-col sm:flex-row gap-4 justify-center">
-              <Button size="lg" className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white">
+              <Button
+                size="lg"
+                className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
+              >
                 Start Your Project
                 <ArrowRight className="ml-2 w-4 h-4" />
               </Button>
-              <Button size="lg" variant="outline" className="border-white/20 text-white hover:bg-white/10">
+              <Button
+                size="lg"
+                variant="outline"
+                className="border-white/20 text-white hover:bg-white/10"
+              >
                 Technical Consultation
               </Button>
             </div>

pages/HireFrontendDevelopers.tsx

@@ -4,68 +4,101 @@ import { Footer } from "../components/Footer";
 import { Button } from "../components/ui/button";
 import { Badge } from "../components/ui/badge";
 import { Card, CardContent } from "../components/ui/card";
-import { ArrowRight, Monitor, Code, Smartphone, Zap, Target, Users, CheckCircle, Star, Palette } from "lucide-react";
+import {
+  ArrowRight,
+  Monitor,
+  Code,
+  Smartphone,
+  Zap,
+  Target,
+  Users,
+  CheckCircle,
+  Star,
+  Palette,
+} from "lucide-react";
+import { navigateTo } from "@/App";
 
 export const HireFrontendDevelopers = () => {
   const expertise = [
     {
       category: "JavaScript Frameworks",
-      description: "React.js, Angular, Vue.js for dynamic and single-page applications",
+      description:
-      skills: ["React.js", "Angular", "Vue.js", "Next.js", "Svelte"]
+        "React.js, Angular, Vue.js for dynamic and single-page applications",
+      skills: ["React.js", "Angular", "Vue.js", "Next.js", "Svelte"],
     },
     {
       category: "Core Technologies",
       description: "HTML5, CSS3 (Sass, Less), JavaScript (ES6+)",
-      skills: ["HTML5", "CSS3", "JavaScript ES6+", "TypeScript", "Sass/Less"]
+      skills: ["HTML5", "CSS3", "JavaScript ES6+", "TypeScript", "Sass/Less"],
     },
     {
       category: "Responsive Design",
-      description: "Building interfaces that adapt flawlessly across all devices and screen sizes",
+      description:
-      skills: ["CSS Grid", "Flexbox", "Media Queries", "Mobile-First Design"]
+        "Building interfaces that adapt flawlessly across all devices and screen sizes",
+      skills: ["CSS Grid", "Flexbox", "Media Queries", "Mobile-First Design"],
     },
     {
       category: "UI Libraries & Frameworks",
       description: "Bootstrap, Material-UI, Tailwind CSS",
-      skills: ["Bootstrap", "Material-UI", "Tailwind CSS", "Ant Design", "Chakra UI"]
+      skills: [
+        "Bootstrap",
+        "Material-UI",
+        "Tailwind CSS",
+        "Ant Design",
+        "Chakra UI",
+      ],
     },
     {
       category: "Performance Optimization",
       description: "Ensuring fast loading times and smooth interactions",
-      skills: ["Webpack", "Vite", "Code Splitting", "Lazy Loading", "Performance Auditing"]
+      skills: [
+        "Webpack",
+        "Vite",
+        "Code Splitting",
+        "Lazy Loading",
+        "Performance Auditing",
+      ],
     },
     {
       category: "Cross-Browser Compatibility",
-      description: "Developing solutions that work consistently across all major browsers",
+      description:
-      skills: ["Browser Testing", "Polyfills", "Progressive Enhancement", "Feature Detection"]
+        "Developing solutions that work consistently across all major browsers",
-    }
+      skills: [
+        "Browser Testing",
+        "Polyfills",
+        "Progressive Enhancement",
+        "Feature Detection",
+      ],
+    },
   ];
 
   const deliverables = [
     {
       icon: Target,
       title: "Pixel-Perfect Implementation",
-      description: "Translating UI/UX designs into precise code."
+      description: "Translating UI/UX designs into precise code.",
     },
     {
       icon: Zap,
       title: "Optimized Performance",
-      description: "Writing efficient code for speed and responsiveness."
+      description: "Writing efficient code for speed and responsiveness.",
     },
     {
       icon: Smartphone,
       title: "Interactive & Dynamic UIs",
-      description: "Creating engaging user experiences with animations and interactive elements."
+      description:
+        "Creating engaging user experiences with animations and interactive elements.",
     },
     {
       icon: Users,
       title: "Accessibility Standards",
-      description: "Ensuring applications are usable for everyone."
+      description: "Ensuring applications are usable for everyone.",
     },
     {
       icon: Code,
       title: "Collaboration with Backend Teams",
-      description: "Seamless integration with APIs and server-side logic."
+      description: "Seamless integration with APIs and server-side logic.",
-    }
+    },
   ];
 
   const projectTypes = [
@@ -73,22 +106,24 @@ export const HireFrontendDevelopers = () => {
     "Interactive Dashboards & Admin Panels",
     "E-commerce Frontends",
     "Marketing Websites with Complex Animations",
-    "Progressive Web Apps (PWAs)"
+    "Progressive Web Apps (PWAs)",
   ];
 
   const testimonials = [
     {
-      quote: "The frontend developer from WDI transformed our outdated interface into a modern, responsive design that our users love. The attention to detail was exceptional.",
+      quote:
+        "The frontend developer from WDI transformed our outdated interface into a modern, responsive design that our users love. The attention to detail was exceptional.",
       author: "Lisa Anderson",
       role: "Product Manager, DesignCorp",
-      rating: 5
+      rating: 5,
     },
     {
-      quote: "Our React-based dashboard is now lightning fast and incredibly user-friendly. The developer's expertise in performance optimization made all the difference.",
+      quote:
+        "Our React-based dashboard is now lightning fast and incredibly user-friendly. The developer's expertise in performance optimization made all the difference.",
       author: "James Wilson",
       role: "Tech Lead, Analytics Pro",
-      rating: 5
+      rating: 5,
-    }
+    },
   ];
 
   return (
@@ -102,30 +137,43 @@ export const HireFrontendDevelopers = () => {
           className="absolute inset-0 opacity-30"
           style={{
             backgroundImage: `radial-gradient(circle at 1px 1px, rgba(255,255,255,0.15) 1px, transparent 0)`,
-            backgroundSize: '40px 40px'
+            backgroundSize: "40px 40px",
           }}
         />
 
         <div className="relative container mx-auto px-6 lg:px-8">
           <div className="max-w-4xl mx-auto text-center">
-            <Badge variant="outline" className="mb-6 border-[#E5195E]/20 text-[#E5195E]">
+            <Badge
+              variant="outline"
+              className="mb-6 border-[#E5195E]/20 text-[#E5195E]"
+            >
               Crafting Engaging User Experiences
             </Badge>
             <h1 className="text-4xl md:text-6xl lg:text-7xl font-bold mb-6 bg-gradient-to-r from-white via-white to-white/80 bg-clip-text text-transparent">
               Hire Frontend Developers: Crafting Intuitive and
-              <span className="bg-gradient-to-r from-[#E5195E] to-[#FF6B9D] bg-clip-text text-transparent"> Engaging User Experiences</span>
+              <span className="bg-gradient-to-r from-[#E5195E] to-[#FF6B9D] bg-clip-text text-transparent">
+                {" "}
+                Engaging User Experiences
+              </span>
             </h1>
             <p className="text-lg md:text-xl text-muted-foreground mb-8 max-w-3xl mx-auto leading-relaxed">
-              The user interface is the face of your digital product. WDI offers highly skilled frontend developers who excel at transforming designs into interactive, responsive, and aesthetically pleasing web experiences.
+              The user interface is the face of your digital product. WDI offers
+              highly skilled frontend developers who excel at transforming
+              designs into interactive, responsive, and aesthetically pleasing
+              web experiences.
             </p>
             <div className="flex flex-col sm:flex-row gap-4 justify-center">
-              <Button size="lg" className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white">
+              <Button
+                size="lg"
+                className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
+                onClick={() => navigateTo("/start-a-project")}
+              >
                 Find Your Frontend Specialist
                 <ArrowRight className="ml-2 w-4 h-4" />
               </Button>
-              <Button size="lg" variant="outline" className="border-white/20 text-white hover:bg-white/10">
+              {/* <Button size="lg" variant="outline" className="border-white/20 text-white hover:bg-white/10">
                 Discuss Your UI Needs
-              </Button>
+              </Button> */}
             </div>
           </div>
         </div>
@@ -136,7 +184,10 @@ export const HireFrontendDevelopers = () => {
         <div className="container mx-auto px-6 lg:px-8">
           <div className="max-w-4xl mx-auto text-center">
             <p className="text-lg text-muted-foreground leading-relaxed">
-              Our experts ensure your users enjoy seamless navigation and a visually compelling journey. From responsive layouts to complex interactions, we bring your frontend vision to life with precision and creativity.
+              Our experts ensure your users enjoy seamless navigation and a
+              visually compelling journey. From responsive layouts to complex
+              interactions, we bring your frontend vision to life with precision
+              and creativity.
             </p>
           </div>
         </div>
@@ -156,7 +207,10 @@ export const HireFrontendDevelopers = () => {
 
           <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
             {expertise.map((area, index) => (
-              <Card key={index} className="bg-card/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300 group">
+              <Card
+                key={index}
+                className="bg-card/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300 group"
+              >
                 <CardContent className="p-6">
                   <h3 className="text-lg font-semibold text-white mb-3 group-hover:text-[#E5195E] transition-colors duration-300">
                     {area.category}
@@ -170,7 +224,9 @@ export const HireFrontendDevelopers = () => {
                     {area.skills.map((skill, skillIndex) => (
                       <div key={skillIndex} className="flex items-center gap-2">
                         <div className="w-1.5 h-1.5 rounded-full bg-[#E5195E]" />
-                        <span className="text-muted-foreground text-xs">{skill}</span>
+                        <span className="text-muted-foreground text-xs">
+                          {skill}
+                        </span>
                       </div>
                     ))}
                   </div>
@@ -195,7 +251,10 @@ export const HireFrontendDevelopers = () => {
 
           <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto">
             {deliverables.map((item, index) => (
-              <Card key={index} className="bg-background/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300 group">
+              <Card
+                key={index}
+                className="bg-background/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300 group"
+              >
                 <CardContent className="p-6 text-center">
                   <item.icon className="w-8 h-8 text-[#E5195E] mb-4 mx-auto group-hover:scale-110 transition-transform duration-300" />
                   <h3 className="text-lg font-semibold text-white mb-3 group-hover:text-[#E5195E] transition-colors duration-300">
@@ -225,7 +284,10 @@ export const HireFrontendDevelopers = () => {
 
           <div className="grid md:grid-cols-2 gap-6 max-w-3xl mx-auto">
             {projectTypes.map((project, index) => (
-              <div key={index} className="flex items-center gap-3 p-4 rounded-lg bg-card/50 border border-white/10 hover:border-[#E5195E]/30 transition-all duration-300">
+              <div
+                key={index}
+                className="flex items-center gap-3 p-4 rounded-lg bg-card/50 border border-white/10 hover:border-[#E5195E]/30 transition-all duration-300"
+              >
                 <CheckCircle className="w-5 h-5 text-[#E5195E] flex-shrink-0" />
                 <span className="text-white">{project}</span>
               </div>
@@ -252,7 +314,10 @@ export const HireFrontendDevelopers = () => {
                 <CardContent className="p-8">
                   <div className="flex gap-1 mb-4">
                     {[...Array(testimonial.rating)].map((_, i) => (
-                      <Star key={i} className="w-5 h-5 text-yellow-400 fill-current" />
+                      <Star
+                        key={i}
+                        className="w-5 h-5 text-yellow-400 fill-current"
+                      />
                     ))}
                   </div>
 
@@ -261,7 +326,9 @@ export const HireFrontendDevelopers = () => {
                   </p>
 
                   <div className="border-t border-white/10 pt-6">
-                    <h4 className="text-white font-semibold">{testimonial.author}</h4>
+                    <h4 className="text-white font-semibold">
+                      {testimonial.author}
+                    </h4>
                     <p className="text-[#E5195E] text-sm">{testimonial.role}</p>
                   </div>
                 </CardContent>
@@ -279,14 +346,22 @@ export const HireFrontendDevelopers = () => {
               Ready to Transform Your User Interface?
             </h2>
             <p className="text-lg text-muted-foreground mb-8 max-w-2xl mx-auto">
-              Connect with our frontend specialists and create user experiences that engage and convert.
+              Connect with our frontend specialists and create user experiences
+              that engage and convert.
             </p>
             <div className="flex flex-col sm:flex-row gap-4 justify-center">
-              <Button size="lg" className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white">
+              <Button
+                size="lg"
+                className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
+              >
                 Get Started Today
                 <ArrowRight className="ml-2 w-4 h-4" />
               </Button>
-              <Button size="lg" variant="outline" className="border-white/20 text-white hover:bg-white/10">
+              <Button
+                size="lg"
+                variant="outline"
+                className="border-white/20 text-white hover:bg-white/10"
+              >
                 View Portfolio
               </Button>
             </div>

pages/HireFullStackDevelopers.tsx

@@ -4,62 +4,85 @@ import { Footer } from "../components/Footer";
 import { Button } from "../components/ui/button";
 import { Badge } from "../components/ui/badge";
 import { Card, CardContent } from "../components/ui/card";
-import { ArrowRight, Code, Database, Cloud, Globe, Users, Zap, DollarSign, Target, CheckCircle, Star } from "lucide-react";
+import {
+  ArrowRight,
+  Code,
+  Database,
+  Cloud,
+  Globe,
+  Users,
+  Zap,
+  DollarSign,
+  Target,
+  CheckCircle,
+  Star,
+} from "lucide-react";
+import { navigateTo } from "@/App";
 
 export const HireFullStackDevelopers = () => {
   const expertise = [
     {
       category: "Frontend Technologies",
-      skills: ["HTML5", "CSS3", "JavaScript", "React", "Angular", "Vue.js"]
+      skills: ["HTML5", "CSS3", "JavaScript", "React", "Angular", "Vue.js"],
     },
     {
       category: "Backend Technologies",
-      skills: ["Node.js", "Python (Django, Flask)", "Ruby on Rails", "PHP (Laravel)", "Java (Spring Boot)"]
+      skills: [
+        "Node.js",
+        "Python (Django, Flask)",
+        "Ruby on Rails",
+        "PHP (Laravel)",
+        "Java (Spring Boot)",
+      ],
     },
     {
       category: "Databases",
-      skills: ["MySQL", "PostgreSQL", "MongoDB", "Cassandra", "Redis"]
+      skills: ["MySQL", "PostgreSQL", "MongoDB", "Cassandra", "Redis"],
     },
     {
       category: "Cloud Platforms",
-      skills: ["AWS", "Azure", "Google Cloud Platform", "Heroku"]
+      skills: ["AWS", "Azure", "Google Cloud Platform", "Heroku"],
     },
     {
       category: "Version Control",
-      skills: ["Git", "GitHub", "GitLab", "Bitbucket"]
+      skills: ["Git", "GitHub", "GitLab", "Bitbucket"],
     },
     {
       category: "APIs",
-      skills: ["RESTful APIs", "GraphQL", "WebSocket", "Microservices"]
+      skills: ["RESTful APIs", "GraphQL", "WebSocket", "Microservices"],
-    }
+    },
   ];
 
   const benefits = [
     {
       icon: Users,
       title: "Single Point of Contact",
-      description: "One developer managing both frontend and backend, ensuring seamless integration."
+      description:
+        "One developer managing both frontend and backend, ensuring seamless integration.",
     },
     {
       icon: Zap,
       title: "Faster Development Cycles",
-      description: "Reduced communication overhead and quicker problem-solving."
+      description:
+        "Reduced communication overhead and quicker problem-solving.",
     },
     {
       icon: DollarSign,
       title: "Cost-Efficiency",
-      description: "Often more economical than hiring separate frontend and backend specialists for smaller teams."
+      description:
+        "Often more economical than hiring separate frontend and backend specialists for smaller teams.",
     },
     {
       icon: Target,
       title: "Versatility",
-      description: "Adaptable to various project requirements and technology stacks."
+      description:
+        "Adaptable to various project requirements and technology stacks.",
     },
     {
       icon: Globe,
       title: "Holistic Project Understanding",
-      description: "A complete view of the application architecture."
+      description: "A complete view of the application architecture.",
-    }
+    },
   ];
 
   const solutionTypes = [
@@ -67,45 +90,47 @@ export const HireFullStackDevelopers = () => {
     "E-commerce Platforms with Custom Features",
     "Social Networking Sites",
     "Data-Intensive Dashboards",
-    "Real-Time Applications"
+    "Real-Time Applications",
   ];
 
   const techStacks = [
     {
       name: "MERN Stack",
       technologies: ["MongoDB", "Express.js", "React", "Node.js"],
-      description: "Modern JavaScript-based full-stack development"
+      description: "Modern JavaScript-based full-stack development",
     },
     {
       name: "MEAN Stack",
       technologies: ["MongoDB", "Express.js", "Angular", "Node.js"],
-      description: "Enterprise-grade Angular frontend with Node.js backend"
+      description: "Enterprise-grade Angular frontend with Node.js backend",
     },
     {
       name: "Django + React",
       technologies: ["Python", "Django", "React", "PostgreSQL"],
-      description: "Robust Python backend with dynamic React frontend"
+      description: "Robust Python backend with dynamic React frontend",
     },
     {
       name: "Laravel + Vue.js",
       technologies: ["PHP", "Laravel", "Vue.js", "MySQL"],
-      description: "Elegant PHP framework with progressive Vue.js frontend"
+      description: "Elegant PHP framework with progressive Vue.js frontend",
-    }
+    },
   ];
 
   const testimonials = [
     {
-      quote: "Our full-stack developer from WDI single-handedly built our entire SaaS platform. The seamless integration between frontend and backend was impressive.",
+      quote:
+        "Our full-stack developer from WDI single-handedly built our entire SaaS platform. The seamless integration between frontend and backend was impressive.",
       author: "David Rodriguez",
       role: "Founder, CloudTech Solutions",
-      rating: 5
+      rating: 5,
     },
     {
-      quote: "The full-stack expertise saved us months of development time. Having one developer understand the complete architecture made all the difference.",
+      quote:
+        "The full-stack expertise saved us months of development time. Having one developer understand the complete architecture made all the difference.",
       author: "Emma Thompson",
       role: "CTO, DataFlow Inc.",
-      rating: 5
+      rating: 5,
-    }
+    },
   ];
 
   return (
@@ -119,30 +144,43 @@ export const HireFullStackDevelopers = () => {
           className="absolute inset-0 opacity-30"
           style={{
             backgroundImage: `radial-gradient(circle at 1px 1px, rgba(255,255,255,0.15) 1px, transparent 0)`,
-            backgroundSize: '40px 40px'
+            backgroundSize: "40px 40px",
           }}
         />
 
         <div className="relative container mx-auto px-6 lg:px-8">
           <div className="max-w-4xl mx-auto text-center">
-            <Badge variant="outline" className="mb-6 border-[#E5195E]/20 text-[#E5195E]">
+            <Badge
+              variant="outline"
+              className="mb-6 border-[#E5195E]/20 text-[#E5195E]"
+            >
               End-to-End Development Experts
             </Badge>
             <h1 className="text-4xl md:text-6xl lg:text-7xl font-bold mb-6 bg-gradient-to-r from-white via-white to-white/80 bg-clip-text text-transparent">
               Hire Full Stack Developers: Comprehensive Solutions from
-              <span className="bg-gradient-to-r from-[#E5195E] to-[#FF6B9D] bg-clip-text text-transparent"> Front to Back</span>
+              <span className="bg-gradient-to-r from-[#E5195E] to-[#FF6B9D] bg-clip-text text-transparent">
+                {" "}
+                Front to Back
+              </span>
             </h1>
             <p className="text-lg md:text-xl text-muted-foreground mb-8 max-w-3xl mx-auto leading-relaxed">
-              For end-to-end project execution and a streamlined development process, full stack developers are invaluable. WDI provides highly skilled full stack professionals capable of handling every aspect of your web application.
+              For end-to-end project execution and a streamlined development
+              process, full stack developers are invaluable. WDI provides highly
+              skilled full stack professionals capable of handling every aspect
+              of your web application.
             </p>
             <div className="flex flex-col sm:flex-row gap-4 justify-center">
-              <Button size="lg" className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white">
+              <Button
+                size="lg"
+                className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
+                onClick={() => navigateTo("/start-a-project")}
+              >
                 Find Your Full Stack Expert
                 <ArrowRight className="ml-2 w-4 h-4" />
               </Button>
-              <Button size="lg" variant="outline" className="border-white/20 text-white hover:bg-white/10">
+              {/* <Button size="lg" variant="outline" className="border-white/20 text-white hover:bg-white/10">
                 Get a Quote for Full Stack Development
-              </Button>
+              </Button> */}
             </div>
           </div>
         </div>
@@ -153,7 +191,10 @@ export const HireFullStackDevelopers = () => {
         <div className="container mx-auto px-6 lg:px-8">
           <div className="max-w-4xl mx-auto text-center">
             <p className="text-lg text-muted-foreground leading-relaxed">
-              From intuitive user interfaces to robust server-side logic and database management, our full stack developers bring comprehensive expertise to every project. They ensure seamless integration across all layers of your application architecture.
+              From intuitive user interfaces to robust server-side logic and
+              database management, our full stack developers bring comprehensive
+              expertise to every project. They ensure seamless integration
+              across all layers of your application architecture.
             </p>
           </div>
         </div>
@@ -167,13 +208,17 @@ export const HireFullStackDevelopers = () => {
               Popular Technology Stacks
             </h2>
             <p className="text-muted-foreground max-w-2xl mx-auto">
-              Our developers are proficient in the most sought-after technology combinations
+              Our developers are proficient in the most sought-after technology
+              combinations
             </p>
           </div>
 
           <div className="grid md:grid-cols-2 gap-8">
             {techStacks.map((stack, index) => (
-              <Card key={index} className="bg-card/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300 group">
+              <Card
+                key={index}
+                className="bg-card/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300 group"
+              >
                 <CardContent className="p-8">
                   <h3 className="text-xl font-bold text-white mb-3 group-hover:text-[#E5195E] transition-colors duration-300">
                     {stack.name}
@@ -185,7 +230,11 @@ export const HireFullStackDevelopers = () => {
 
                   <div className="flex flex-wrap gap-2">
                     {stack.technologies.map((tech, techIndex) => (
-                      <Badge key={techIndex} variant="outline" className="border-white/20 text-white text-xs">
+                      <Badge
+                        key={techIndex}
+                        variant="outline"
+                        className="border-white/20 text-white text-xs"
+                      >
                         {tech}
                       </Badge>
                     ))}
@@ -211,7 +260,10 @@ export const HireFullStackDevelopers = () => {
 
           <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
             {expertise.map((area, index) => (
-              <Card key={index} className="bg-background/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300 group">
+              <Card
+                key={index}
+                className="bg-background/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300 group"
+              >
                 <CardContent className="p-6">
                   <h3 className="text-lg font-semibold text-white mb-4 group-hover:text-[#E5195E] transition-colors duration-300">
                     {area.category}
@@ -221,7 +273,9 @@ export const HireFullStackDevelopers = () => {
                     {area.skills.map((skill, skillIndex) => (
                       <div key={skillIndex} className="flex items-center gap-2">
                         <div className="w-2 h-2 rounded-full bg-[#E5195E]" />
-                        <span className="text-muted-foreground text-sm">{skill}</span>
+                        <span className="text-muted-foreground text-sm">
+                          {skill}
+                        </span>
                       </div>
                     ))}
                   </div>
@@ -246,7 +300,10 @@ export const HireFullStackDevelopers = () => {
 
           <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto">
             {benefits.map((benefit, index) => (
-              <Card key={index} className="bg-card/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300 group">
+              <Card
+                key={index}
+                className="bg-card/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300 group"
+              >
                 <CardContent className="p-6 text-center">
                   <benefit.icon className="w-8 h-8 text-[#E5195E] mb-4 mx-auto group-hover:scale-110 transition-transform duration-300" />
                   <h3 className="text-lg font-semibold text-white mb-3 group-hover:text-[#E5195E] transition-colors duration-300">
@@ -276,7 +333,10 @@ export const HireFullStackDevelopers = () => {
 
           <div className="grid md:grid-cols-2 gap-6 max-w-3xl mx-auto">
             {solutionTypes.map((solution, index) => (
-              <div key={index} className="flex items-center gap-3 p-4 rounded-lg bg-background/50 border border-white/10 hover:border-[#E5195E]/30 transition-all duration-300">
+              <div
+                key={index}
+                className="flex items-center gap-3 p-4 rounded-lg bg-background/50 border border-white/10 hover:border-[#E5195E]/30 transition-all duration-300"
+              >
                 <CheckCircle className="w-5 h-5 text-[#E5195E] flex-shrink-0" />
                 <span className="text-white">{solution}</span>
               </div>
@@ -303,7 +363,10 @@ export const HireFullStackDevelopers = () => {
                 <CardContent className="p-8">
                   <div className="flex gap-1 mb-4">
                     {[...Array(testimonial.rating)].map((_, i) => (
-                      <Star key={i} className="w-5 h-5 text-yellow-400 fill-current" />
+                      <Star
+                        key={i}
+                        className="w-5 h-5 text-yellow-400 fill-current"
+                      />
                     ))}
                   </div>
 
@@ -312,7 +375,9 @@ export const HireFullStackDevelopers = () => {
                   </p>
 
                   <div className="border-t border-white/10 pt-6">
-                    <h4 className="text-white font-semibold">{testimonial.author}</h4>
+                    <h4 className="text-white font-semibold">
+                      {testimonial.author}
+                    </h4>
                     <p className="text-[#E5195E] text-sm">{testimonial.role}</p>
                   </div>
                 </CardContent>
@@ -330,14 +395,22 @@ export const HireFullStackDevelopers = () => {
               Ready to Streamline Your Development Process?
             </h2>
             <p className="text-lg text-muted-foreground mb-8 max-w-2xl mx-auto">
-              Connect with our full stack developers and experience the efficiency of end-to-end expertise.
+              Connect with our full stack developers and experience the
+              efficiency of end-to-end expertise.
             </p>
             <div className="flex flex-col sm:flex-row gap-4 justify-center">
-              <Button size="lg" className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white">
+              <Button
+                size="lg"
+                className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
+              >
                 Start Your Project
                 <ArrowRight className="ml-2 w-4 h-4" />
               </Button>
-              <Button size="lg" variant="outline" className="border-white/20 text-white hover:bg-white/10">
+              <Button
+                size="lg"
+                variant="outline"
+                className="border-white/20 text-white hover:bg-white/10"
+              >
                 Discuss Your Requirements
               </Button>
             </div>

pages/HireMobileAppDevelopers.tsx

@@ -5,6 +5,7 @@ import { Button } from "../components/ui/button";
 import { Badge } from "../components/ui/badge";
 import { Card, CardContent } from "../components/ui/card";
 import { ArrowRight, Smartphone, Apple, Code, Zap, Shield, Target, Users, CheckCircle, Star } from "lucide-react";
+import { navigateTo } from "@/App";
 
 export const HireMobileAppDevelopers = () => {
   const expertise = [
@@ -119,13 +120,15 @@ export const HireMobileAppDevelopers = () => {
               Need a captivating and high-performing mobile application? WDI connects you with expert mobile app developers proficient in creating native iOS and Android experiences, as well as efficient cross-platform solutions.
             </p>
             <div className="flex flex-col sm:flex-row gap-4 justify-center">
-              <Button size="lg" className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white">
+              <Button size="lg" className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
+              onClick={() => navigateTo("/start-a-project")}
+              >
                 Get a Free Consultation for Mobile Developers
                 <ArrowRight className="ml-2 w-4 h-4" />
               </Button>
-              <Button size="lg" variant="outline" className="border-white/20 text-white hover:bg-white/10">
+              {/* <Button size="lg" variant="outline" className="border-white/20 text-white hover:bg-white/10">
                 View Developer Profiles
-              </Button>
+              </Button> */}
             </div>
           </div>
         </div>
@@ -283,7 +286,9 @@ export const HireMobileAppDevelopers = () => {
               Connect with our expert mobile app developers and turn your vision into a powerful mobile experience.
             </p>
             <div className="flex flex-col sm:flex-row gap-4 justify-center">
-              <Button size="lg" className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white">
+              <Button size="lg" className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
+              onClick={() => navigateTo("/start-a-project")}
+              >
                 Get Started Today
                 <ArrowRight className="ml-2 w-4 h-4" />
               </Button>

pages/HireQAEngineers.tsx

@@ -4,68 +4,129 @@ import { Footer } from "../components/Footer";
 import { Button } from "../components/ui/button";
 import { Badge } from "../components/ui/badge";
 import { Card, CardContent } from "../components/ui/card";
-import { ArrowRight, TestTube, Shield, Zap, Target, Users, CheckCircle, Star, Bug, Activity, Search } from "lucide-react";
+import {
+  ArrowRight,
+  TestTube,
+  Shield,
+  Zap,
+  Target,
+  Users,
+  CheckCircle,
+  Star,
+  Bug,
+  Activity,
+  Search,
+} from "lucide-react";
+import { navigateTo } from "@/App";
 
 export const HireQAEngineers = () => {
   const expertise = [
     {
       category: "Manual Testing",
-      description: "Comprehensive functional, usability, and exploratory testing to uncover subtle issues",
+      description:
-      skills: ["Functional Testing", "Usability Testing", "Exploratory Testing", "Regression Testing", "User Acceptance Testing"]
+        "Comprehensive functional, usability, and exploratory testing to uncover subtle issues",
+      skills: [
+        "Functional Testing",
+        "Usability Testing",
+        "Exploratory Testing",
+        "Regression Testing",
+        "User Acceptance Testing",
+      ],
     },
     {
       category: "Automated Testing",
-      description: "Developing and maintaining automated test scripts for faster, repeatable testing",
+      description:
-      skills: ["Selenium", "Cypress", "Playwright", "Jest", "TestNG", "JUnit", "Puppeteer"]
+        "Developing and maintaining automated test scripts for faster, repeatable testing",
+      skills: [
+        "Selenium",
+        "Cypress",
+        "Playwright",
+        "Jest",
+        "TestNG",
+        "JUnit",
+        "Puppeteer",
+      ],
     },
     {
       category: "Performance Testing",
-      description: "Evaluating application speed, responsiveness, and stability under various load conditions",
+      description:
-      skills: ["Load Testing", "Stress Testing", "Volume Testing", "JMeter", "LoadRunner", "K6"]
+        "Evaluating application speed, responsiveness, and stability under various load conditions",
+      skills: [
+        "Load Testing",
+        "Stress Testing",
+        "Volume Testing",
+        "JMeter",
+        "LoadRunner",
+        "K6",
+      ],
     },
     {
       category: "Security Testing",
-      description: "Identifying vulnerabilities and ensuring data protection measures are robust",
+      description:
-      skills: ["Vulnerability Assessment", "Penetration Testing", "OWASP Testing", "Security Audits"]
+        "Identifying vulnerabilities and ensuring data protection measures are robust",
+      skills: [
+        "Vulnerability Assessment",
+        "Penetration Testing",
+        "OWASP Testing",
+        "Security Audits",
+      ],
     },
     {
       category: "API Testing",
-      description: "Validating the functionality, reliability, and performance of APIs",
+      description:
-      skills: ["REST API Testing", "GraphQL Testing", "Postman", "Newman", "SoapUI", "Insomnia"]
+        "Validating the functionality, reliability, and performance of APIs",
+      skills: [
+        "REST API Testing",
+        "GraphQL Testing",
+        "Postman",
+        "Newman",
+        "SoapUI",
+        "Insomnia",
+      ],
     },
     {
       category: "Mobile App Testing",
-      description: "Testing across diverse devices, operating systems, and network conditions",
+      description:
-      skills: ["iOS Testing", "Android Testing", "Cross-Platform Testing", "Device Testing", "Network Testing"]
+        "Testing across diverse devices, operating systems, and network conditions",
-    }
+      skills: [
+        "iOS Testing",
+        "Android Testing",
+        "Cross-Platform Testing",
+        "Device Testing",
+        "Network Testing",
+      ],
+    },
   ];
 
   const deliverables = [
     {
       icon: Bug,
       title: "Defect Prevention & Detection",
-      description: "Minimizing bugs and ensuring a stable product release."
+      description: "Minimizing bugs and ensuring a stable product release.",
     },
     {
       icon: Users,
       title: "Enhanced User Satisfaction",
-      description: "A bug-free experience leads to happier users."
+      description: "A bug-free experience leads to happier users.",
     },
     {
       icon: Target,
       title: "Reduced Development Costs",
-      description: "Catching issues early saves significant time and resources."
+      description:
+        "Catching issues early saves significant time and resources.",
     },
     {
       icon: Shield,
       title: "Improved Brand Reputation",
-      description: "Delivering a reliable product builds trust and credibility."
+      description:
+        "Delivering a reliable product builds trust and credibility.",
     },
     {
       icon: CheckCircle,
       title: "Compliance & Standards Adherence",
-      description: "Ensuring your software meets industry and regulatory requirements."
+      description:
-    }
+        "Ensuring your software meets industry and regulatory requirements.",
+    },
   ];
 
   const projectTypes = [
@@ -73,49 +134,69 @@ export const HireQAEngineers = () => {
     "Complex Applications with Intricate Workflows",
     "E-commerce Platforms (Payment Gateways, Inventory)",
     "Applications with Strict Performance Requirements",
-    "Regulated Industry Software (Healthcare, Finance)"
+    "Regulated Industry Software (Healthcare, Finance)",
   ];
 
   const testingTools = [
     {
       category: "Automation Tools",
-      tools: ["Selenium WebDriver", "Cypress", "Playwright", "TestComplete", "Ranorex"]
+      tools: [
+        "Selenium WebDriver",
+        "Cypress",
+        "Playwright",
+        "TestComplete",
+        "Ranorex",
+      ],
     },
     {
       category: "Performance Tools",
-      tools: ["Apache JMeter", "LoadRunner", "K6", "Gatling", "BlazeMeter"]
+      tools: ["Apache JMeter", "LoadRunner", "K6", "Gatling", "BlazeMeter"],
     },
     {
       category: "API Testing",
-      tools: ["Postman", "SoapUI", "Insomnia", "REST Assured", "Karate"]
+      tools: ["Postman", "SoapUI", "Insomnia", "REST Assured", "Karate"],
     },
     {
       category: "Bug Tracking",
-      tools: ["Jira", "Azure DevOps", "Bugzilla", "TestRail", "Zephyr"]
+      tools: ["Jira", "Azure DevOps", "Bugzilla", "TestRail", "Zephyr"],
     },
     {
       category: "Mobile Testing",
-      tools: ["Appium", "Espresso", "XCTest", "Firebase Test Lab", "BrowserStack"]
+      tools: [
+        "Appium",
+        "Espresso",
+        "XCTest",
+        "Firebase Test Lab",
+        "BrowserStack",
+      ],
     },
     {
       category: "CI/CD Integration",
-      tools: ["Jenkins", "GitLab CI", "Azure Pipelines", "CircleCI", "GitHub Actions"]
+      tools: [
-    }
+        "Jenkins",
+        "GitLab CI",
+        "Azure Pipelines",
+        "CircleCI",
+        "GitHub Actions",
+      ],
+    },
   ];
 
   const testimonials = [
     {
-      quote: "Our QA engineer from WDI caught critical issues that could have cost us thousands in production. Their thorough testing approach saved our product launch.",
+      quote:
+        "Our QA engineer from WDI caught critical issues that could have cost us thousands in production. Their thorough testing approach saved our product launch.",
       author: "Kevin Martinez",
       role: "Product Owner, SecureApp Solutions",
-      rating: 5
+      rating: 5,
     },
     {
-      quote: "The automated testing framework they set up reduced our testing time by 80% while increasing coverage. Our releases are now faster and more reliable.",
+      quote:
+        "The automated testing framework they set up reduced our testing time by 80% while increasing coverage. Our releases are now faster and more reliable.",
       author: "Sophie Turner",
       role: "Development Manager, AgileWorks",
-      rating: 5
+      rating: 5,
-    }
+    },
   ];
 
   return (
@@ -129,30 +210,43 @@ export const HireQAEngineers = () => {
           className="absolute inset-0 opacity-30"
           style={{
             backgroundImage: `radial-gradient(circle at 1px 1px, rgba(255,255,255,0.15) 1px, transparent 0)`,
-            backgroundSize: '40px 40px'
+            backgroundSize: "40px 40px",
           }}
         />
 
         <div className="relative container mx-auto px-6 lg:px-8">
           <div className="max-w-4xl mx-auto text-center">
-            <Badge variant="outline" className="mb-6 border-[#E5195E]/20 text-[#E5195E]">
+            <Badge
+              variant="outline"
+              className="mb-6 border-[#E5195E]/20 text-[#E5195E]"
+            >
               Ensuring Software Quality & Reliability
             </Badge>
             <h1 className="text-4xl md:text-6xl lg:text-7xl font-bold mb-6 bg-gradient-to-r from-white via-white to-white/80 bg-clip-text text-transparent">
               Hire QA Engineers: Ensuring Flawless
-              <span className="bg-gradient-to-r from-[#E5195E] to-[#FF6B9D] bg-clip-text text-transparent"> Performance and Reliability</span>
+              <span className="bg-gradient-to-r from-[#E5195E] to-[#FF6B9D] bg-clip-text text-transparent">
+                {" "}
+                Performance and Reliability
+              </span>
             </h1>
             <p className="text-lg md:text-xl text-muted-foreground mb-8 max-w-3xl mx-auto leading-relaxed">
-              Quality Assurance (QA) is critical for delivering reliable, high-performing software. WDI provides highly skilled QA engineers who are meticulous in identifying and resolving defects, ensuring your product meets the highest standards.
+              Quality Assurance (QA) is critical for delivering reliable,
+              high-performing software. WDI provides highly skilled QA engineers
+              who are meticulous in identifying and resolving defects, ensuring
+              your product meets the highest standards.
             </p>
             <div className="flex flex-col sm:flex-row gap-4 justify-center">
-              <Button size="lg" className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white">
+              <Button
+                size="lg"
+                className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
+                onClick={() => navigateTo("/start-a-project")}
+              >
                 Strengthen Your Software Quality
                 <ArrowRight className="ml-2 w-4 h-4" />
               </Button>
-              <Button size="lg" variant="outline" className="border-white/20 text-white hover:bg-white/10">
+              {/* <Button size="lg" variant="outline" className="border-white/20 text-white hover:bg-white/10">
                 Discuss Your Testing Needs
-              </Button>
+              </Button> */}
             </div>
           </div>
         </div>
@@ -166,13 +260,17 @@ export const HireQAEngineers = () => {
               Testing Tools & Technologies
             </h2>
             <p className="text-muted-foreground max-w-2xl mx-auto">
-              Our QA engineers are proficient in the latest testing tools and methodologies
+              Our QA engineers are proficient in the latest testing tools and
+              methodologies
             </p>
           </div>
 
           <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
             {testingTools.map((category, index) => (
-              <Card key={index} className="bg-background/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300 group">
+              <Card
+                key={index}
+                className="bg-background/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300 group"
+              >
                 <CardContent className="p-6">
                   <h3 className="text-lg font-semibold text-white mb-4 group-hover:text-[#E5195E] transition-colors duration-300">
                     {category.category}
@@ -182,7 +280,9 @@ export const HireQAEngineers = () => {
                     {category.tools.map((tool, toolIndex) => (
                       <div key={toolIndex} className="flex items-center gap-2">
                         <div className="w-2 h-2 rounded-full bg-[#E5195E]" />
-                        <span className="text-muted-foreground text-sm">{tool}</span>
+                        <span className="text-muted-foreground text-sm">
+                          {tool}
+                        </span>
                       </div>
                     ))}
                   </div>
@@ -207,7 +307,10 @@ export const HireQAEngineers = () => {
 
           <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto">
             {deliverables.map((item, index) => (
-              <Card key={index} className="bg-card/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300 group">
+              <Card
+                key={index}
+                className="bg-card/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300 group"
+              >
                 <CardContent className="p-6 text-center">
                   <item.icon className="w-8 h-8 text-[#E5195E] mb-4 mx-auto group-hover:scale-110 transition-transform duration-300" />
                   <h3 className="text-lg font-semibold text-white mb-3 group-hover:text-[#E5195E] transition-colors duration-300">
@@ -238,7 +341,10 @@ export const HireQAEngineers = () => {
                 <CardContent className="p-8">
                   <div className="flex gap-1 mb-4">
                     {[...Array(testimonial.rating)].map((_, i) => (
-                      <Star key={i} className="w-5 h-5 text-yellow-400 fill-current" />
+                      <Star
+                        key={i}
+                        className="w-5 h-5 text-yellow-400 fill-current"
+                      />
                     ))}
                   </div>
 
@@ -247,7 +353,9 @@ export const HireQAEngineers = () => {
                   </p>
 
                   <div className="border-t border-white/10 pt-6">
-                    <h4 className="text-white font-semibold">{testimonial.author}</h4>
+                    <h4 className="text-white font-semibold">
+                      {testimonial.author}
+                    </h4>
                     <p className="text-[#E5195E] text-sm">{testimonial.role}</p>
                   </div>
                 </CardContent>
@@ -265,14 +373,22 @@ export const HireQAEngineers = () => {
               Ready to Ensure Quality Excellence?
             </h2>
             <p className="text-lg text-muted-foreground mb-8 max-w-2xl mx-auto">
-              Connect with our QA specialists and deliver software that exceeds expectations.
+              Connect with our QA specialists and deliver software that exceeds
+              expectations.
             </p>
             <div className="flex flex-col sm:flex-row gap-4 justify-center">
-              <Button size="lg" className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white">
+              <Button
+                size="lg"
+                className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
+              >
                 Start Quality Assurance
                 <ArrowRight className="ml-2 w-4 h-4" />
               </Button>
-              <Button size="lg" variant="outline" className="border-white/20 text-white hover:bg-white/10">
+              <Button
+                size="lg"
+                variant="outline"
+                className="border-white/20 text-white hover:bg-white/10"
+              >
                 Testing Strategy Consultation
               </Button>
             </div>

pages/HireUIUXDesigners.tsx

@@ -4,68 +4,126 @@ import { Footer } from "../components/Footer";
 import { Button } from "../components/ui/button";
 import { Badge } from "../components/ui/badge";
 import { Card, CardContent } from "../components/ui/card";
-import { ArrowRight, Palette, Users, Target, Eye, Smartphone, CheckCircle, Star, MousePointer2, TestTube } from "lucide-react";
+import {
+  ArrowRight,
+  Palette,
+  Users,
+  Target,
+  Eye,
+  Smartphone,
+  CheckCircle,
+  Star,
+  MousePointer2,
+  TestTube,
+} from "lucide-react";
+import { navigateTo } from "@/App";
 
 export const HireUIUXDesigners = () => {
   const expertise = [
     {
       category: "User Research & Analysis",
-      description: "Conducting usability testing, user interviews, and competitive analysis to understand user needs",
+      description:
-      skills: ["User Interviews", "Usability Testing", "Surveys", "Competitive Analysis", "Persona Development"]
+        "Conducting usability testing, user interviews, and competitive analysis to understand user needs",
+      skills: [
+        "User Interviews",
+        "Usability Testing",
+        "Surveys",
+        "Competitive Analysis",
+        "Persona Development",
+      ],
     },
     {
       category: "Information Architecture",
-      description: "Structuring content and navigation for clarity and ease of use",
+      description:
-      skills: ["Site Mapping", "User Flows", "Content Strategy", "Navigation Design", "Information Hierarchy"]
+        "Structuring content and navigation for clarity and ease of use",
+      skills: [
+        "Site Mapping",
+        "User Flows",
+        "Content Strategy",
+        "Navigation Design",
+        "Information Hierarchy",
+      ],
     },
     {
       category: "Wireframing & Prototyping",
-      description: "Creating low-fidelity wireframes and interactive prototypes to visualize user flows",
+      description:
-      skills: ["Wireframing", "Interactive Prototypes", "Paper Prototyping", "Digital Mockups", "Flow Diagrams"]
+        "Creating low-fidelity wireframes and interactive prototypes to visualize user flows",
+      skills: [
+        "Wireframing",
+        "Interactive Prototypes",
+        "Paper Prototyping",
+        "Digital Mockups",
+        "Flow Diagrams",
+      ],
     },
     {
       category: "User Interface (UI) Design",
-      description: "Designing aesthetic and consistent visual elements, including typography, color palettes, iconography, and layouts",
+      description:
-      skills: ["Visual Design", "Typography", "Color Theory", "Iconography", "Layout Design", "Brand Consistency"]
+        "Designing aesthetic and consistent visual elements, including typography, color palettes, iconography, and layouts",
+      skills: [
+        "Visual Design",
+        "Typography",
+        "Color Theory",
+        "Iconography",
+        "Layout Design",
+        "Brand Consistency",
+      ],
     },
     {
       category: "User Experience (UX) Design",
-      description: "Focusing on the entire user journey, ensuring efficiency, satisfaction, and accessibility",
+      description:
-      skills: ["Journey Mapping", "Interaction Design", "Accessibility (WCAG)", "User Psychology", "Experience Strategy"]
+        "Focusing on the entire user journey, ensuring efficiency, satisfaction, and accessibility",
+      skills: [
+        "Journey Mapping",
+        "Interaction Design",
+        "Accessibility (WCAG)",
+        "User Psychology",
+        "Experience Strategy",
+      ],
     },
     {
       category: "Design Systems",
-      description: "Developing scalable design systems for consistency across products",
+      description:
-      skills: ["Component Libraries", "Style Guides", "Design Tokens", "Pattern Libraries", "Brand Guidelines"]
+        "Developing scalable design systems for consistency across products",
-    }
+      skills: [
+        "Component Libraries",
+        "Style Guides",
+        "Design Tokens",
+        "Pattern Libraries",
+        "Brand Guidelines",
+      ],
+    },
   ];
 
   const deliverables = [
     {
       icon: Users,
       title: "User-Centric Designs",
-      description: "Solutions tailored to your target audience's needs and behaviors."
+      description:
+        "Solutions tailored to your target audience's needs and behaviors.",
     },
     {
       icon: Target,
       title: "Enhanced User Satisfaction",
-      description: "Intuitive interfaces that make products easy and enjoyable to use."
+      description:
+        "Intuitive interfaces that make products easy and enjoyable to use.",
     },
     {
       icon: Eye,
       title: "Increased Engagement & Conversion",
-      description: "Designs optimized to achieve your business goals."
+      description: "Designs optimized to achieve your business goals.",
     },
     {
       icon: Palette,
       title: "Brand Consistency",
-      description: "Visuals that align with your brand identity."
+      description: "Visuals that align with your brand identity.",
     },
     {
       icon: CheckCircle,
       title: "Accessibility Compliance",
-      description: "Designs that are inclusive and usable by individuals with diverse abilities."
+      description:
-    }
+        "Designs that are inclusive and usable by individuals with diverse abilities.",
+    },
   ];
 
   const projectTypes = [
@@ -73,41 +131,49 @@ export const HireUIUXDesigners = () => {
     "Website & Mobile App Redesigns",
     "SaaS Platforms & Enterprise Solutions",
     "Interactive Dashboards",
-    "E-commerce User Journeys"
+    "E-commerce User Journeys",
   ];
 
   const designTools = [
     {
       category: "Design Tools",
-      tools: ["Figma", "Sketch", "Adobe XD", "Adobe Creative Suite", "InVision"]
+      tools: [
+        "Figma",
+        "Sketch",
+        "Adobe XD",
+        "Adobe Creative Suite",
+        "InVision",
+      ],
     },
     {
       category: "Prototyping",
-      tools: ["Principle", "Framer", "ProtoPie", "Marvel", "Axure RP"]
+      tools: ["Principle", "Framer", "ProtoPie", "Marvel", "Axure RP"],
     },
     {
       category: "Research Tools",
-      tools: ["Miro", "Hotjar", "UserTesting", "Optimal Workshop", "Maze"]
+      tools: ["Miro", "Hotjar", "UserTesting", "Optimal Workshop", "Maze"],
     },
     {
       category: "Collaboration",
-      tools: ["Slack", "Notion", "Confluence", "Zeplin", "Abstract"]
+      tools: ["Slack", "Notion", "Confluence", "Zeplin", "Abstract"],
-    }
+    },
   ];
 
   const testimonials = [
     {
-      quote: "Our UI/UX designer from WDI completely transformed our user experience. User engagement increased by 150% and our conversion rates doubled after the redesign.",
+      quote:
+        "Our UI/UX designer from WDI completely transformed our user experience. User engagement increased by 150% and our conversion rates doubled after the redesign.",
       author: "Rachel Green",
       role: "Product Manager, InnovateTech",
-      rating: 5
+      rating: 5,
     },
     {
-      quote: "The design system they created streamlined our entire design process. Now our whole team can work efficiently with consistent, beautiful designs.",
+      quote:
+        "The design system they created streamlined our entire design process. Now our whole team can work efficiently with consistent, beautiful designs.",
       author: "Mark Davis",
       role: "Design Director, CreativeFlow",
-      rating: 5
+      rating: 5,
-    }
+    },
   ];
 
   return (
@@ -121,30 +187,43 @@ export const HireUIUXDesigners = () => {
           className="absolute inset-0 opacity-30"
           style={{
             backgroundImage: `radial-gradient(circle at 1px 1px, rgba(255,255,255,0.15) 1px, transparent 0)`,
-            backgroundSize: '40px 40px'
+            backgroundSize: "40px 40px",
           }}
         />
 
         <div className="relative container mx-auto px-6 lg:px-8">
           <div className="max-w-4xl mx-auto text-center">
-            <Badge variant="outline" className="mb-6 border-[#E5195E]/20 text-[#E5195E]">
+            <Badge
+              variant="outline"
+              className="mb-6 border-[#E5195E]/20 text-[#E5195E]"
+            >
               Creating Intuitive & Beautiful Digital Experiences
             </Badge>
             <h1 className="text-4xl md:text-6xl lg:text-7xl font-bold mb-6 bg-gradient-to-r from-white via-white to-white/80 bg-clip-text text-transparent">
               Hire UI/UX Designers: Crafting Intuitive & Beautiful
-              <span className="bg-gradient-to-r from-[#E5195E] to-[#FF6B9D] bg-clip-text text-transparent"> Digital Experiences</span>
+              <span className="bg-gradient-to-r from-[#E5195E] to-[#FF6B9D] bg-clip-text text-transparent">
+                {" "}
+                Digital Experiences
+              </span>
             </h1>
             <p className="text-lg md:text-xl text-muted-foreground mb-8 max-w-3xl mx-auto leading-relaxed">
-              Exceptional user experience (UX) and captivating user interface (UI) are the cornerstones of successful digital products. WDI connects you with talented UI/UX designers who blend creativity with user psychology.
+              Exceptional user experience (UX) and captivating user interface
+              (UI) are the cornerstones of successful digital products. WDI
+              connects you with talented UI/UX designers who blend creativity
+              with user psychology.
             </p>
             <div className="flex flex-col sm:flex-row gap-4 justify-center">
-              <Button size="lg" className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white">
+              <Button
+                size="lg"
+                className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
+                onClick={() => navigateTo("/start-a-project")}
+              >
                 Transform Your User Experience
                 <ArrowRight className="ml-2 w-4 h-4" />
               </Button>
-              <Button size="lg" variant="outline" className="border-white/20 text-white hover:bg-white/10">
+              {/* <Button size="lg" variant="outline" className="border-white/20 text-white hover:bg-white/10">
                 View Design Portfolios
-              </Button>
+              </Button> */}
             </div>
           </div>
         </div>
@@ -155,7 +234,10 @@ export const HireUIUXDesigners = () => {
         <div className="container mx-auto px-6 lg:px-8">
           <div className="max-w-4xl mx-auto text-center">
             <p className="text-lg text-muted-foreground leading-relaxed">
-              Our designers deliver interfaces that are not only visually stunning but also highly intuitive, accessible, and enjoyable to use. We create experiences that users love and that drive business success.
+              Our designers deliver interfaces that are not only visually
+              stunning but also highly intuitive, accessible, and enjoyable to
+              use. We create experiences that users love and that drive business
+              success.
             </p>
           </div>
         </div>
@@ -169,13 +251,17 @@ export const HireUIUXDesigners = () => {
               Design Tools & Technologies
             </h2>
             <p className="text-muted-foreground max-w-2xl mx-auto">
-              Our designers are proficient in the latest design tools and methodologies
+              Our designers are proficient in the latest design tools and
+              methodologies
             </p>
           </div>
 
           <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
             {designTools.map((category, index) => (
-              <Card key={index} className="bg-card/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300 group">
+              <Card
+                key={index}
+                className="bg-card/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300 group"
+              >
                 <CardContent className="p-6">
                   <h3 className="text-lg font-semibold text-white mb-4 group-hover:text-[#E5195E] transition-colors duration-300">
                     {category.category}
@@ -185,7 +271,9 @@ export const HireUIUXDesigners = () => {
                     {category.tools.map((tool, toolIndex) => (
                       <div key={toolIndex} className="flex items-center gap-2">
                         <div className="w-2 h-2 rounded-full bg-[#E5195E]" />
-                        <span className="text-muted-foreground text-sm">{tool}</span>
+                        <span className="text-muted-foreground text-sm">
+                          {tool}
+                        </span>
                       </div>
                     ))}
                   </div>
@@ -204,13 +292,17 @@ export const HireUIUXDesigners = () => {
               Our UI/UX Design Expertise
             </h2>
             <p className="text-muted-foreground max-w-2xl mx-auto">
-              Comprehensive design skills for creating exceptional user experiences
+              Comprehensive design skills for creating exceptional user
+              experiences
             </p>
           </div>
 
           <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
             {expertise.map((area, index) => (
-              <Card key={index} className="bg-background/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300 group">
+              <Card
+                key={index}
+                className="bg-background/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300 group"
+              >
                 <CardContent className="p-6">
                   <h3 className="text-lg font-semibold text-white mb-3 group-hover:text-[#E5195E] transition-colors duration-300">
                     {area.category}
@@ -224,7 +316,9 @@ export const HireUIUXDesigners = () => {
                     {area.skills.map((skill, skillIndex) => (
                       <div key={skillIndex} className="flex items-center gap-2">
                         <div className="w-1.5 h-1.5 rounded-full bg-[#E5195E]" />
-                        <span className="text-muted-foreground text-xs">{skill}</span>
+                        <span className="text-muted-foreground text-xs">
+                          {skill}
+                        </span>
                       </div>
                     ))}
                   </div>
@@ -249,7 +343,10 @@ export const HireUIUXDesigners = () => {
 
           <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto">
             {deliverables.map((item, index) => (
-              <Card key={index} className="bg-card/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300 group">
+              <Card
+                key={index}
+                className="bg-card/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300 group"
+              >
                 <CardContent className="p-6 text-center">
                   <item.icon className="w-8 h-8 text-[#E5195E] mb-4 mx-auto group-hover:scale-110 transition-transform duration-300" />
                   <h3 className="text-lg font-semibold text-white mb-3 group-hover:text-[#E5195E] transition-colors duration-300">
@@ -279,7 +376,10 @@ export const HireUIUXDesigners = () => {
 
           <div className="grid md:grid-cols-2 gap-6 max-w-3xl mx-auto">
             {projectTypes.map((project, index) => (
-              <div key={index} className="flex items-center gap-3 p-4 rounded-lg bg-background/50 border border-white/10 hover:border-[#E5195E]/30 transition-all duration-300">
+              <div
+                key={index}
+                className="flex items-center gap-3 p-4 rounded-lg bg-background/50 border border-white/10 hover:border-[#E5195E]/30 transition-all duration-300"
+              >
                 <CheckCircle className="w-5 h-5 text-[#E5195E] flex-shrink-0" />
                 <span className="text-white">{project}</span>
               </div>
@@ -306,7 +406,10 @@ export const HireUIUXDesigners = () => {
                 <CardContent className="p-8">
                   <div className="flex gap-1 mb-4">
                     {[...Array(testimonial.rating)].map((_, i) => (
-                      <Star key={i} className="w-5 h-5 text-yellow-400 fill-current" />
+                      <Star
+                        key={i}
+                        className="w-5 h-5 text-yellow-400 fill-current"
+                      />
                     ))}
                   </div>
 
@@ -315,7 +418,9 @@ export const HireUIUXDesigners = () => {
                   </p>
 
                   <div className="border-t border-white/10 pt-6">
-                    <h4 className="text-white font-semibold">{testimonial.author}</h4>
+                    <h4 className="text-white font-semibold">
+                      {testimonial.author}
+                    </h4>
                     <p className="text-[#E5195E] text-sm">{testimonial.role}</p>
                   </div>
                 </CardContent>
@@ -333,14 +438,22 @@ export const HireUIUXDesigners = () => {
               Ready to Create Exceptional User Experiences?
             </h2>
             <p className="text-lg text-muted-foreground mb-8 max-w-2xl mx-auto">
-              Connect with our UI/UX designers and transform your digital products into engaging user experiences.
+              Connect with our UI/UX designers and transform your digital
+              products into engaging user experiences.
             </p>
             <div className="flex flex-col sm:flex-row gap-4 justify-center">
-              <Button size="lg" className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white">
+              <Button
+                size="lg"
+                className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
+              >
                 Start Your Design Journey
                 <ArrowRight className="ml-2 w-4 h-4" />
               </Button>
-              <Button size="lg" variant="outline" className="border-white/20 text-white hover:bg-white/10">
+              <Button
+                size="lg"
+                variant="outline"
+                className="border-white/20 text-white hover:bg-white/10"
+              >
                 Portfolio Review
               </Button>
             </div>

pages/LeadershipTeam.tsx

@@ -3,82 +3,47 @@ import { Navigation } from "../components/Navigation";
 import { Footer } from "../components/Footer";
 import { Button } from "../components/ui/button";
 import { Badge } from "../components/ui/badge";
-import { ArrowRight, Linkedin, Twitter, Mail } from "lucide-react";
+import { ArrowRight, Linkedin, Mail } from "lucide-react";
+import { navigateTo } from "@/App";
+import riteshImage from "../src/images/ritesh-pandey.png";
+import manavImage from "../src/images/manav-sain.png";
+import sudhirImage from "../src/images/sudhir-malya.png";
+import kartikeyImage from "../src/images/kartikeya-gautam.png";
+import poojaImage from "../src/images/pooja-patade.png";
+import tanveerImage from "../src/images/tanveer-ajani.png";
 
 export const LeadershipTeam = () => {
   const leaders = [
     {
-      name: "Sarah Chen",
+      name: "Ritesh Pandey",
-      position: "Chief Executive Officer",
+      position: "Founder & CEO",
-      bio: "With 15+ years in tech leadership, Sarah drives WDI's vision for digital innovation and global expansion.",
+      image: riteshImage,
-      experience: "Former VP at Microsoft, Stanford MBA",
-      image: "https://images.unsplash.com/photo-1494790108755-2616b612b786?auto=format&fit=crop&q=80&w=400&h=400",
-      social: {
-        linkedin: "#",
-        twitter: "#",
-        email: "sarah@wdi.com"
-      }
     },
     {
-      name: "Michael Rodriguez",
+      name: "Manav Sain",
-      position: "Chief Technology Officer",
+      position: "VP- Business Solutions",
-      bio: "Michael leads our technical strategy and ensures we stay at the forefront of emerging technologies.",
+      image: manavImage,
-      experience: "Former Lead Engineer at Google, MIT Computer Science",
-      image: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?auto=format&fit=crop&q=80&w=400&h=400",
-      social: {
-        linkedin: "#",
-        twitter: "#",
-        email: "michael@wdi.com"
-      }
     },
     {
-      name: "Emily Watson",
+      name: "Sudhir Mallya",
-      position: "Chief Operating Officer",
+      position: "CTO",
-      bio: "Emily oversees global operations and ensures seamless delivery across all our international projects.",
+      image: sudhirImage,
-      experience: "Former Operations Director at Amazon, Harvard Business School",
-      image: "https://images.unsplash.com/photo-1580489944761-15a19d654956?auto=format&fit=crop&q=80&w=400&h=400",
-      social: {
-        linkedin: "#",
-        twitter: "#",
-        email: "emily@wdi.com"
-      }
     },
     {
-      name: "David Kumar",
+      name: "Kartikey Gautam",
-      position: "Head of AI & Machine Learning",
+      position: "Product Manager",
-      bio: "David leads our AI initiatives and ensures we deliver cutting-edge machine learning solutions.",
+      image: kartikeyImage,
-      experience: "Former AI Research Scientist at Tesla, PhD in Computer Science",
-      image: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&q=80&w=400&h=400",
-      social: {
-        linkedin: "#",
-        twitter: "#",
-        email: "david@wdi.com"
-      }
     },
     {
-      name: "Lisa Thompson",
+      name: "Pooja Patade",
-      position: "VP of Design & User Experience",
+      position: "Head - Accounts & HR",
-      bio: "Lisa ensures our solutions are not just functional but also provide exceptional user experiences.",
+      image: poojaImage,
-      experience: "Former Design Lead at Apple, RISD Design Graduate",
-      image: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?auto=format&fit=crop&q=80&w=400&h=400",
-      social: {
-        linkedin: "#",
-        twitter: "#",
-        email: "lisa@wdi.com"
-      }
     },
     {
-      name: "James Park",
+      name: "Tanveer Ajani",
-      position: "VP of Business Development",
+      position: "Compliance Head",
-      bio: "James drives our global partnerships and expansion into new markets and industries.",
+      image: tanveerImage,
-      experience: "Former BD Director at Salesforce, Wharton MBA",
+    },
-      image: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&q=80&w=400&h=400",
-      social: {
-        linkedin: "#",
-        twitter: "#",
-        email: "james@wdi.com"
-      }
-    }
   ];
 
   return (
@@ -92,21 +57,29 @@ export const LeadershipTeam = () => {
           className="absolute inset-0 opacity-30"
           style={{
             backgroundImage: `radial-gradient(circle at 1px 1px, rgba(255,255,255,0.15) 1px, transparent 0)`,
-            backgroundSize: '40px 40px'
+            backgroundSize: "40px 40px",
           }}
         />
 
         <div className="relative container mx-auto px-6 lg:px-8">
           <div className="max-w-4xl mx-auto text-center">
-            <Badge variant="outline" className="mb-6 border-[#E5195E]/20 text-[#E5195E]">
+            <Badge
+              variant="outline"
+              className="mb-6 border-[#E5195E]/20 text-[#E5195E]"
+            >
               Leadership Team
             </Badge>
             <h1 className="text-4xl md:text-6xl lg:text-7xl font-bold mb-6 bg-gradient-to-r from-white via-white to-white/80 bg-clip-text text-transparent">
               Meet the Visionaries Behind
-              <span className="bg-gradient-to-r from-[#E5195E] to-[#FF6B9D] bg-clip-text text-transparent"> WDI</span>
+              <span className="bg-gradient-to-r from-[#E5195E] to-[#FF6B9D] bg-clip-text text-transparent">
+                {" "}
+                WDI
+              </span>
             </h1>
             <p className="text-lg md:text-xl text-muted-foreground mb-8 max-w-3xl mx-auto leading-relaxed">
-              Our leadership team combines decades of experience from top tech companies with a shared passion for digital innovation and client success.
+              Our leadership team combines decades of experience from top tech
+              companies with a shared passion for digital innovation and client
+              success.
             </p>
           </div>
         </div>
@@ -141,38 +114,6 @@ export const LeadershipTeam = () => {
                         {leader.position}
                       </p>
                     </div>
-                    
-                    <p className="text-muted-foreground text-sm leading-relaxed">
-                      {leader.bio}
-                    </p>
-                    
-                    <div className="pt-2 border-t border-white/10">
-                      <p className="text-xs text-muted-foreground mb-3">
-                        {leader.experience}
-                      </p>
-                      
-                      {/* Social Links */}
-                      <div className="flex gap-3">
-                        <a 
-                          href={leader.social.linkedin}
-                          className="w-8 h-8 rounded-lg bg-white/10 hover:bg-[#E5195E]/20 flex items-center justify-center transition-colors duration-200"
-                        >
-                          <Linkedin className="w-4 h-4 text-white" />
-                        </a>
-                        <a 
-                          href={leader.social.twitter}
-                          className="w-8 h-8 rounded-lg bg-white/10 hover:bg-[#E5195E]/20 flex items-center justify-center transition-colors duration-200"
-                        >
-                          <Twitter className="w-4 h-4 text-white" />
-                        </a>
-                        <a 
-                          href={`mailto:${leader.social.email}`}
-                          className="w-8 h-8 rounded-lg bg-white/10 hover:bg-[#E5195E]/20 flex items-center justify-center transition-colors duration-200"
-                        >
-                          <Mail className="w-4 h-4 text-white" />
-                        </a>
-                      </div>
-                    </div>
                   </div>
                 </div>
               </div>
@@ -182,14 +123,15 @@ export const LeadershipTeam = () => {
       </section>
 
       {/* Advisory Board */}
-      <section className="py-16 bg-card/50">
+      {/* <section className="py-16 bg-card/50">
         <div className="container mx-auto px-6 lg:px-8">
           <div className="text-center mb-12">
             <h2 className="text-3xl md:text-4xl font-bold mb-4 text-white">
               Advisory Board
             </h2>
             <p className="text-muted-foreground max-w-2xl mx-auto">
-              Industry experts who guide our strategic direction and innovation initiatives
+              Industry experts who guide our strategic direction and innovation
+              initiatives
             </p>
           </div>
 
@@ -198,33 +140,43 @@ export const LeadershipTeam = () => {
               {
                 name: "Dr. Alan Foster",
                 title: "Former CTO, Meta",
-                expertise: "AI & Emerging Technologies"
+                expertise: "AI & Emerging Technologies",
               },
               {
                 name: "Maria Santos",
                 title: "Former VP, Netflix",
-                expertise: "Product Strategy & Growth"
+                expertise: "Product Strategy & Growth",
               },
               {
                 name: "Robert Kim",
                 title: "Former Director, Amazon",
-                expertise: "Cloud Infrastructure & Scalability"
+                expertise: "Cloud Infrastructure & Scalability",
-              }
+              },
             ].map((advisor, index) => (
-              <div key={index} className="text-center p-6 rounded-2xl bg-background/50 border border-white/10">
+              <div
+                key={index}
+                className="text-center p-6 rounded-2xl bg-background/50 border border-white/10"
+              >
                 <div className="w-16 h-16 rounded-full bg-gradient-to-br from-[#E5195E]/20 to-[#FF6B9D]/20 mx-auto mb-4 flex items-center justify-center">
                   <span className="text-2xl font-bold text-[#E5195E]">
-                    {advisor.name.split(' ').map(n => n[0]).join('')}
+                    {advisor.name
+                      .split(" ")
+                      .map((n) => n[0])
+                      .join("")}
                   </span>
                 </div>
-                <h3 className="text-lg font-semibold text-white mb-1">{advisor.name}</h3>
+                <h3 className="text-lg font-semibold text-white mb-1">
+                  {advisor.name}
+                </h3>
                 <p className="text-sm text-[#E5195E] mb-2">{advisor.title}</p>
-                <p className="text-xs text-muted-foreground">{advisor.expertise}</p>
+                <p className="text-xs text-muted-foreground">
+                  {advisor.expertise}
+                </p>
               </div>
             ))}
           </div>
         </div>
-      </section>
+      </section> */}
 
       {/* CTA Section */}
       <section className="py-16 bg-background">
@@ -234,14 +186,23 @@ export const LeadershipTeam = () => {
               Want to Work with Our Team?
             </h2>
             <p className="text-lg text-muted-foreground mb-8 max-w-2xl mx-auto">
-              Join our growing team of innovators or partner with us to transform your business
+              Join our growing team of innovators or partner with us to
+              transform your business
             </p>
             <div className="flex flex-col sm:flex-row gap-4 justify-center">
-              <Button size="lg" className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white">
+              <Button
+                size="lg"
+                className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
+              >
                 Explore Careers
                 <ArrowRight className="ml-2 w-4 h-4" />
               </Button>
-              <Button size="lg" variant="outline" className="border-white/20 text-white hover:bg-white/10">
+              <Button
+                size="lg"
+                variant="outline"
+                className="border-white/20 text-white hover:bg-white/10"
+                onClick={() => navigateTo("/start-a-project")}
+              >
                 Start a Project
               </Button>
             </div>

pages/NativeAppDevelopment.tsx

@@ -105,6 +105,7 @@ import {
   Briefcase,
   Microscope,
 } from "lucide-react";
+import { navigateTo } from "@/App";
 
 // Native App Development Hero Section
 const NativeHeroWithCTA = () => {
@@ -149,7 +150,10 @@ const NativeHeroWithCTA = () => {
               transition={{ duration: 0.8, delay: 0.3 }}
               className="flex flex-col sm:flex-row gap-4"
             >
-              <ShimmerButton className="text-lg px-8 py-4">
+              <ShimmerButton
+                className="text-lg px-8 py-4"
+                onClick={() => navigateTo("/start-a-project")}
+              >
                 <div className="inline-flex items-center gap-2">
                   <Gauge className="w-5 h-5 flex-shrink-0" />
                   <span>Discover Native Advantages</span>
@@ -160,7 +164,7 @@ const NativeHeroWithCTA = () => {
                 className="inline-flex items-center justify-center gap-2 rounded-md bg-gray-800 px-8 py-4 text-lg font-medium text-white transition hover:bg-gray-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-700 whitespace-nowrap"
               >
                 <MessageSquare className="w-4 h-4 flex-shrink-0" />
-                <span>Request a Native App Consultation</span>
+                <span>Request Consultation</span>
               </a>
             </motion.div>
           </motion.div>
@@ -1038,7 +1042,10 @@ const NativeInlineCTA = () => {
               deliver uncompromising performance and user experience.
             </p>
 
-            <ShimmerButton className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl">
+            <ShimmerButton
+              className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl"
+              onClick={() => navigateTo("/start-a-project")}
+            >
               <div className="inline-flex items-center gap-3">
                 <MessageSquare className="w-6 h-6 flex-shrink-0" />
                 <span>Discuss Your Native App Project</span>
@@ -1322,7 +1329,9 @@ const NativeFinalCTA = () => {
             viewport={{ once: true }}
             className="space-y-8"
           >
-            <ShimmerButton className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25">
+            <ShimmerButton className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25"
+            onClick={() => navigateTo("/start-a-project")}
+            >
               <div className="inline-flex items-center gap-3">
                 <Rocket className="w-6 h-6 flex-shrink-0" />
                 <span>Start Your Native App Journey</span>

pages/PWADevelopment.tsx

@@ -31,7 +31,7 @@ import {
   Users,
   Wifi,
   WifiOff,
-  Zap
+  Zap,
 } from "lucide-react";
 import { ImageWithFallback } from "../components/figma/ImageWithFallback";
 import { Footer } from "../components/Footer";
@@ -93,7 +93,10 @@ const PWAHeroWithCTA = () => {
               transition={{ duration: 0.8, delay: 0.3 }}
               className="flex flex-col sm:flex-row gap-4"
             >
-              <ShimmerButton className="text-lg px-8 py-4">
+              <ShimmerButton
+                className="text-lg px-8 py-4"
+                onClick={() => navigateTo("/start-a-project")}
+              >
                 <div className="inline-flex items-center gap-2">
                   <Globe className="w-5 h-5 flex-shrink-0" />
                   <span>Explore PWA Benefits</span>
@@ -882,18 +885,24 @@ const PWASuccessStories = () => {
       client: "TradersCircuit",
       subtitle: "Investment Platform PWA with Real-Time Trading",
       industry: "FinTech",
-      services: ["PWA Development", "Real-Time Trading", "Service Workers", "Push Notifications"],
+      services: [
+        "PWA Development",
+        "Real-Time Trading",
+        "Service Workers",
+        "Push Notifications",
+      ],
       technologies: ["React", "Service Workers", "WebSocket", "Push API"],
       image: tradersCircuitImage,
       results: [
         "90% faster load times vs native",
         "Offline trading capabilities",
         "85% home screen installation rate",
-        "Real-time push notifications"
+        "Real-time push notifications",
       ],
-      description: "Handcrafted PWA investment platform delivering native-like trading experience with offline capabilities, push notifications, and blazing-fast performance for the Indian market.",
+      description:
+        "Handcrafted PWA investment platform delivering native-like trading experience with offline capabilities, push notifications, and blazing-fast performance for the Indian market.",
       duration: "8 months",
-      teamSize: "12 experts"
+      teamSize: "12 experts",
     },
     {
       id: 2,
@@ -901,18 +910,24 @@ const PWASuccessStories = () => {
       client: "Prosperty Infra",
       subtitle: "Digital Real Estate PWA Platform",
       industry: "Real Estate",
-      services: ["PWA Development", "Property Listings", "Offline Browsing", "Investment Tools"],
+      services: [
+        "PWA Development",
+        "Property Listings",
+        "Offline Browsing",
+        "Investment Tools",
+      ],
       technologies: ["Vue.js", "Workbox", "IndexedDB", "Web Push"],
       image: prospertyImage,
       results: [
         "73% installation rate success",
         "38% reduction in bounce rate",
         "52% increase in property inquiries",
-        "Full offline property browsing"
+        "Full offline property browsing",
       ],
-      description: "Comprehensive PWA real estate platform enabling seamless property listings, investment opportunities, and post-sale services with full offline functionality and instant loading.",
+      description:
+        "Comprehensive PWA real estate platform enabling seamless property listings, investment opportunities, and post-sale services with full offline functionality and instant loading.",
       duration: "6 months",
-      teamSize: "10 experts"
+      teamSize: "10 experts",
     },
     {
       id: 3,
@@ -920,26 +935,37 @@ const PWASuccessStories = () => {
       client: "GoodTimes Ltd",
       subtitle: "Event Discovery & Booking PWA Platform",
       industry: "Events & Lifestyle",
-      services: ["PWA Development", "Event Booking", "Social Features", "Payment Integration"],
+      services: [
-      technologies: ["Angular", "Service Workers", "Web Share API", "Payment Request"],
+        "PWA Development",
+        "Event Booking",
+        "Social Features",
+        "Payment Integration",
+      ],
+      technologies: [
+        "Angular",
+        "Service Workers",
+        "Web Share API",
+        "Payment Request",
+      ],
       image: goodTimesImage,
       results: [
         "92% mobile user engagement",
         "30-second booking process",
         "67% increase in repeat users",
-        "Cross-platform compatibility"
+        "Cross-platform compatibility",
       ],
-      description: "Feature-rich PWA event discovery platform providing seamless booking experiences, social sharing, and offline ticket storage that works flawlessly across all devices.",
+      description:
+        "Feature-rich PWA event discovery platform providing seamless booking experiences, social sharing, and offline ticket storage that works flawlessly across all devices.",
       duration: "5 months",
-      teamSize: "9 experts"
+      teamSize: "9 experts",
-    }
+    },
   ];
 
   const getIndustryIcon = (industry: string) => {
     const icons = {
-      "FinTech": Building,
+      FinTech: Building,
       "Real Estate": Building,
-      "Events & Lifestyle": Calendar
+      "Events & Lifestyle": Calendar,
     };
     return icons[industry as keyof typeof icons] || Building;
   };
@@ -958,7 +984,9 @@ const PWASuccessStories = () => {
             Successful Progressive Web Apps by WDI
           </h2>
           <p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
-            See how we've transformed businesses with PWA solutions that deliver exceptional user experiences, offline capabilities, and measurable results across industries.
+            See how we've transformed businesses with PWA solutions that deliver
+            exceptional user experiences, offline capabilities, and measurable
+            results across industries.
           </p>
         </motion.div>
 
@@ -975,12 +1003,12 @@ const PWASuccessStories = () => {
                 whileHover={{ y: -5 }}
                 className="group cursor-pointer"
                 onClick={() => {
-                  if (study.title === 'TradersCircuit') {
+                  if (study.title === "TradersCircuit") {
-                    navigateTo('/projects/traderscircuit');
+                    navigateTo("/projects/traderscircuit");
-                  } else if (study.title === 'Prosperty') {
+                  } else if (study.title === "Prosperty") {
-                    navigateTo('/projects/prosperty');
+                    navigateTo("/projects/prosperty");
-                  } else if (study.title === 'GoodTimes') {
+                  } else if (study.title === "GoodTimes") {
-                    navigateTo('/projects/goodtimes');
+                    navigateTo("/projects/goodtimes");
                   }
                 }}
               >
@@ -996,7 +1024,10 @@ const PWASuccessStories = () => {
                   <CardContent className="p-6">
                     <div className="flex items-center gap-2 mb-3">
                       <IndustryIcon className="w-4 h-4 text-accent" />
-                      <Badge variant="secondary" className="bg-accent/20 text-accent border-none">
+                      <Badge
+                        variant="secondary"
+                        className="bg-accent/20 text-accent border-none"
+                      >
                         {study.industry}
                       </Badge>
                     </div>
@@ -1006,12 +1037,18 @@ const PWASuccessStories = () => {
                     </h3>
 
                     <p className="text-sm text-gray-400 mb-3">{study.client}</p>
-                    <p className="text-gray-300 mb-4 line-clamp-3 text-sm">{study.description}</p>
+                    <p className="text-gray-300 mb-4 line-clamp-3 text-sm">
+                      {study.description}
+                    </p>
 
                     <div className="space-y-3 mb-4">
                       <div className="flex flex-wrap gap-1">
                         {study.services.slice(0, 3).map((service) => (
-                          <Badge key={service} variant="outline" className="border-gray-600 text-gray-300 text-xs">
+                          <Badge
+                            key={service}
+                            variant="outline"
+                            className="border-gray-600 text-gray-300 text-xs"
+                          >
                             {service}
                           </Badge>
                         ))}
@@ -1020,7 +1057,10 @@ const PWASuccessStories = () => {
 
                     <div className="space-y-2 mb-4">
                       {study.results.slice(0, 2).map((result, resultIndex) => (
-                        <div key={resultIndex} className="flex items-center gap-2">
+                        <div
+                          key={resultIndex}
+                          className="flex items-center gap-2"
+                        >
                           <TrendingUp className="w-3 h-3 text-accent flex-shrink-0" />
                           <p className="text-xs text-gray-400">{result}</p>
                         </div>
@@ -1044,12 +1084,12 @@ const PWASuccessStories = () => {
                         className="text-accent hover:bg-accent/10 p-0"
                         onClick={(e) => {
                           e.stopPropagation();
-                          if (study.title === 'TradersCircuit') {
+                          if (study.title === "TradersCircuit") {
-                            navigateTo('/projects/traderscircuit');
+                            navigateTo("/projects/traderscircuit");
-                          } else if (study.title === 'Prosperty') {
+                          } else if (study.title === "Prosperty") {
-                            navigateTo('/projects/prosperty');
+                            navigateTo("/projects/prosperty");
-                          } else if (study.title === 'GoodTimes') {
+                          } else if (study.title === "GoodTimes") {
-                            navigateTo('/projects/goodtimes');
+                            navigateTo("/projects/goodtimes");
                           }
                         }}
                       >
@@ -1106,7 +1146,10 @@ const PWAInlineCTA = () => {
               progressive web app that works everywhere.
             </p>
 
-            <ShimmerButton className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl">
+            <ShimmerButton
+              className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl"
+              onClick={() => navigateTo("/start-a-project")}
+            >
               <div className="inline-flex items-center gap-3">
                 <Eye className="w-6 h-6 flex-shrink-0" />
                 <span>Get a Free PWA Assessment</span>
@@ -1245,7 +1288,10 @@ const PWAFinalCTA = () => {
             viewport={{ once: true }}
             className="space-y-8"
           >
-            <ShimmerButton className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25">
+            <ShimmerButton
+              className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25"
+              onClick={() => navigateTo("/start-a-project")}
+            >
               <div className="inline-flex items-center gap-3">
                 <Rocket className="w-6 h-6 flex-shrink-0" />
                 <span>Start Your PWA Project</span>

pages/SaaSProductEngineering.tsx

@@ -23,16 +23,23 @@ import {
   Target,
   TrendingUp,
   Users,
-  Zap
+  Zap,
 } from "lucide-react";
 import { ImageWithFallback } from "../components/figma/ImageWithFallback";
 import { Footer } from "../components/Footer";
 import { Navigation } from "../components/Navigation";
-import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "../components/ui/accordion";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "../components/ui/accordion";
 import { Badge } from "../components/ui/badge";
 import { Button } from "../components/ui/button";
 import { Card, CardContent } from "../components/ui/card";
 import { ShimmerButton } from "../components/ui/shimmer-button";
+import { navigateTo } from "@/App";
+import awsLogo from "../src/images/aws-logo.png";
 
 // SaaS Product Engineering Hero Section
 const SaaSHeroWithCTA = () => {
@@ -52,7 +59,9 @@ const SaaSHeroWithCTA = () => {
               animate={{ opacity: 1, y: 0 }}
               transition={{ duration: 0.6 }}
             >
-              <span className="text-white/70 text-sm font-medium">Web & Cloud Solutions</span>
+              <span className="text-white/70 text-sm font-medium">
+                Web & Cloud Solutions
+              </span>
             </motion.div>
 
             {/* Main Heading */}
@@ -62,7 +71,9 @@ const SaaSHeroWithCTA = () => {
               </h1>
 
               <p className="text-lg text-gray-300 leading-relaxed max-w-lg">
-                From ideation to scalable deployment, WDI specializes in engineering robust, multi-tenant SaaS products that drive recurring revenue.
+                From ideation to scalable deployment, WDI specializes in
+                engineering robust, multi-tenant SaaS products that drive
+                recurring revenue.
               </p>
             </div>
 
@@ -73,7 +84,10 @@ const SaaSHeroWithCTA = () => {
               transition={{ duration: 0.8, delay: 0.3 }}
               className="flex flex-col sm:flex-row gap-4"
             >
-              <ShimmerButton className="text-lg px-8 py-4">
+              <ShimmerButton
+                className="text-lg px-8 py-4"
+                onClick={() => navigateTo("/start-a-project")}
+              >
                 <div className="inline-flex items-center gap-2">
                   <Rocket className="w-5 h-5 flex-shrink-0" />
                   <span>Launch Your SaaS Product</span>
@@ -81,7 +95,7 @@ const SaaSHeroWithCTA = () => {
               </ShimmerButton>
               <a
                 href="#case-studies"
-                className="inline-flex items-center justify-center gap-2 rounded-md bg-gray-800 px-8 py-4 text-lg font-medium text-white transition hover:bg-gray-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-700 whitespace-nowrap"
+                className="inline-flex items-center justify-center gap-2 rounded-md bg-gray-800 px-6 py-4 text-lg font-medium text-white transition hover:bg-gray-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-700 whitespace-nowrap"
               >
                 <Eye className="w-4 h-4 flex-shrink-0" />
                 <span>Explore Our SaaS Portfolio</span>
@@ -108,7 +122,9 @@ const SaaSHeroWithCTA = () => {
                 <div className="relative mx-auto w-40 h-32 bg-gradient-to-br from-accent to-purple-600 rounded-2xl border border-accent/30 shadow-2xl flex items-center justify-center mb-8">
                   <div className="text-center">
                     <Cloud className="w-10 h-10 text-white mx-auto mb-2" />
-                    <div className="text-white text-sm font-medium">SaaS Platform</div>
+                    <div className="text-white text-sm font-medium">
+                      SaaS Platform
+                    </div>
                   </div>
 
                   {/* Pulse Animation */}
@@ -175,17 +191,59 @@ const SaaSHeroWithCTA = () => {
                 </div>
 
                 {/* Connection Lines */}
-                <svg className="absolute inset-0 w-full h-full pointer-events-none" style={{top: '-20px', width: '100%', height: '320px'}}>
+                <svg
+                  className="absolute inset-0 w-full h-full pointer-events-none"
+                  style={{ top: "-20px", width: "100%", height: "320px" }}
+                >
                   <g className="opacity-30">
                     {/* Lines from SaaS Platform to Tenants */}
-                    <line x1="160" y1="80" x2="80" y2="140" stroke="#E5195E" strokeWidth="2" strokeDasharray="4,4">
+                    <line
-                      <animate attributeName="stroke-dashoffset" values="0;-8" dur="2s" repeatCount="indefinite" />
+                      x1="160"
+                      y1="80"
+                      x2="80"
+                      y2="140"
+                      stroke="#E5195E"
+                      strokeWidth="2"
+                      strokeDasharray="4,4"
+                    >
+                      <animate
+                        attributeName="stroke-dashoffset"
+                        values="0;-8"
+                        dur="2s"
+                        repeatCount="indefinite"
+                      />
                     </line>
-                    <line x1="160" y1="80" x2="160" y2="140" stroke="#E5195E" strokeWidth="2" strokeDasharray="4,4">
+                    <line
-                      <animate attributeName="stroke-dashoffset" values="0;-8" dur="2.5s" repeatCount="indefinite" />
+                      x1="160"
+                      y1="80"
+                      x2="160"
+                      y2="140"
+                      stroke="#E5195E"
+                      strokeWidth="2"
+                      strokeDasharray="4,4"
+                    >
+                      <animate
+                        attributeName="stroke-dashoffset"
+                        values="0;-8"
+                        dur="2.5s"
+                        repeatCount="indefinite"
+                      />
                     </line>
-                    <line x1="160" y1="80" x2="240" y2="140" stroke="#E5195E" strokeWidth="2" strokeDasharray="4,4">
+                    <line
-                      <animate attributeName="stroke-dashoffset" values="0;-8" dur="3s" repeatCount="indefinite" />
+                      x1="160"
+                      y1="80"
+                      x2="240"
+                      y2="140"
+                      stroke="#E5195E"
+                      strokeWidth="2"
+                      strokeDasharray="4,4"
+                    >
+                      <animate
+                        attributeName="stroke-dashoffset"
+                        values="0;-8"
+                        dur="3s"
+                        repeatCount="indefinite"
+                      />
                     </line>
                   </g>
                 </svg>
@@ -198,15 +256,24 @@ const SaaSHeroWithCTA = () => {
                 transition={{ duration: 0.8, delay: 1.2 }}
                 className="flex justify-center gap-4 flex-wrap"
               >
-                <Badge variant="secondary" className="bg-blue-500/20 text-blue-300 border-blue-500/30">
+                <Badge
+                  variant="secondary"
+                  className="bg-blue-500/20 text-blue-300 border-blue-500/30"
+                >
                   <CloudLightning className="w-3 h-3 mr-1" />
                   Multi-Tenant
                 </Badge>
-                <Badge variant="secondary" className="bg-green-500/20 text-green-300 border-green-500/30">
+                <Badge
+                  variant="secondary"
+                  className="bg-green-500/20 text-green-300 border-green-500/30"
+                >
                   <TrendingUp className="w-3 h-3 mr-1" />
                   Scalable
                 </Badge>
-                <Badge variant="secondary" className="bg-purple-500/20 text-purple-300 border-purple-500/30">
+                <Badge
+                  variant="secondary"
+                  className="bg-purple-500/20 text-purple-300 border-purple-500/30"
+                >
                   <Shield className="w-3 h-3 mr-1" />
                   Secure
                 </Badge>
@@ -225,28 +292,30 @@ const SaaSBenefits = () => {
     {
       icon: TrendingUp,
       title: "Scalability for Growth",
-      description: "Architected for exponential user growth and feature expansion."
+      description:
+        "Architected for exponential user growth and feature expansion.",
     },
     {
       icon: DollarSign,
       title: "Cost Efficiency & ROI",
-      description: "Optimized development for lower TCO and higher profitability."
+      description:
+        "Optimized development for lower TCO and higher profitability.",
     },
     {
       icon: Shield,
       title: "Secure Multi-Tenancy",
-      description: "Robust solutions for isolating customer data securely."
+      description: "Robust solutions for isolating customer data securely.",
     },
     {
       icon: Zap,
       title: "Rapid Feature Delivery",
-      description: "Agile methodologies for continuous innovation."
+      description: "Agile methodologies for continuous innovation.",
     },
     {
       icon: Network,
       title: "Seamless Integrations",
-      description: "Expertise in connecting with other platforms and APIs."
+      description: "Expertise in connecting with other platforms and APIs.",
-    }
+    },
   ];
 
   return (
@@ -348,34 +417,40 @@ const SaaSProcess = () => {
   const steps = [
     {
       title: "Ideation & Market Validation",
-      description: "Research-driven validation of your SaaS concept with competitive analysis and market opportunity assessment.",
+      description:
-      icon: Lightbulb
+        "Research-driven validation of your SaaS concept with competitive analysis and market opportunity assessment.",
+      icon: Lightbulb,
     },
     {
       title: "Product Strategy & MVP Definition",
-      description: "Strategic planning to define core features, user personas, and minimum viable product scope for rapid market entry.",
+      description:
-      icon: Target
+        "Strategic planning to define core features, user personas, and minimum viable product scope for rapid market entry.",
+      icon: Target,
     },
     {
       title: "Architecture & Design",
-      description: "Scalable cloud architecture design with multi-tenant considerations, security frameworks, and technology selection.",
+      description:
-      icon: Layout
+        "Scalable cloud architecture design with multi-tenant considerations, security frameworks, and technology selection.",
+      icon: Layout,
     },
     {
       title: "Development & Iteration",
-      description: "Agile development sprints with continuous integration, regular demos, and iterative feature refinement.",
+      description:
-      icon: Code
+        "Agile development sprints with continuous integration, regular demos, and iterative feature refinement.",
+      icon: Code,
     },
     {
       title: "Deployment & DevOps",
-      description: "Automated deployment pipelines, monitoring systems, and scalable infrastructure management.",
+      description:
-      icon: Rocket
+        "Automated deployment pipelines, monitoring systems, and scalable infrastructure management.",
+      icon: Rocket,
     },
     {
       title: "Growth & Optimization",
-      description: "Performance optimization, feature expansion, and scaling strategies based on user feedback and analytics.",
+      description:
-      icon: TrendingUp
+        "Performance optimization, feature expansion, and scaling strategies based on user feedback and analytics.",
-    }
+      icon: TrendingUp,
+    },
   ];
 
   return (
@@ -409,15 +484,23 @@ const SaaSProcess = () => {
                   whileInView={{ opacity: 1, x: 0 }}
                   transition={{ duration: 0.8, delay: index * 0.2 }}
                   viewport={{ once: true }}
-                  className={`flex items-center ${isEven ? 'lg:flex-row' : 'lg:flex-row-reverse'} flex-col lg:gap-16 gap-8`}
+                  className={`flex items-center ${
+                    isEven ? "lg:flex-row" : "lg:flex-row-reverse"
+                  } flex-col lg:gap-16 gap-8`}
                 >
-                  <div className={`flex-1 ${isEven ? 'lg:text-right' : 'lg:text-left'} text-center lg:text-left`}>
+                  <div
+                    className={`flex-1 ${
+                      isEven ? "lg:text-right" : "lg:text-left"
+                    } text-center lg:text-left`}
+                  >
                     <div className="bg-card/20 backdrop-blur-md rounded-2xl border border-white/10 p-8 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl">
                       <div className="flex items-center gap-4 mb-4 justify-center lg:justify-start">
                         <div className="w-12 h-12 bg-accent/20 rounded-xl flex items-center justify-center">
                           <IconComponent className="w-6 h-6 text-accent" />
                         </div>
-                        <div className="text-2xl font-bold text-accent">0{index + 1}</div>
+                        <div className="text-2xl font-bold text-accent">
+                          0{index + 1}
+                        </div>
                       </div>
                       <h3 className="text-2xl font-semibold text-foreground mb-4">
                         {step.title}
@@ -449,44 +532,79 @@ const SaaSServices = () => {
       title: "SaaS MVP Development",
       description: "Rapidly launch and validate your core idea.",
       icon: Rocket,
-      features: ["Core Feature Set", "User Authentication", "Basic Analytics", "Payment Integration"]
+      features: [
+        "Core Feature Set",
+        "User Authentication",
+        "Basic Analytics",
+        "Payment Integration",
+      ],
     },
     {
       title: "Full-Cycle SaaS Product Development",
       description: "End-to-end engineering from scratch.",
       icon: Code,
-      features: ["Complete Development", "Advanced Features", "Integrations", "Scaling Support"]
+      features: [
+        "Complete Development",
+        "Advanced Features",
+        "Integrations",
+        "Scaling Support",
+      ],
     },
     {
       title: "SaaS Architecture Design",
       description: "Scalable, secure, and cost-effective cloud architectures.",
       icon: Layout,
-      features: ["Multi-tenant Architecture", "Microservices", "Cloud Infrastructure", "Security Design"]
+      features: [
+        "Multi-tenant Architecture",
+        "Microservices",
+        "Cloud Infrastructure",
+        "Security Design",
+      ],
     },
     {
       title: "Legacy SaaS Modernization",
       description: "Re-platforming and upgrading existing SaaS solutions.",
       icon: RefreshCcw,
-      features: ["Platform Migration", "Performance Optimization", "Feature Updates", "Security Enhancement"]
+      features: [
+        "Platform Migration",
+        "Performance Optimization",
+        "Feature Updates",
+        "Security Enhancement",
+      ],
     },
     {
       title: "Integrations & APIs",
       description: "Building robust APIs and third-party integrations.",
       icon: Network,
-      features: ["RESTful APIs", "Third-party Integrations", "Webhook Systems", "API Documentation"]
+      features: [
+        "RESTful APIs",
+        "Third-party Integrations",
+        "Webhook Systems",
+        "API Documentation",
+      ],
     },
     {
       title: "DevOps & Cloud Management",
       description: "Automation for continuous delivery and operations.",
       icon: CloudCog,
-      features: ["CI/CD Pipelines", "Infrastructure as Code", "Monitoring", "Auto-scaling"]
+      features: [
+        "CI/CD Pipelines",
+        "Infrastructure as Code",
+        "Monitoring",
+        "Auto-scaling",
+      ],
     },
     {
       title: "Data Analytics & Reporting",
       description: "Embedding actionable insights into your product.",
       icon: BarChart,
-      features: ["Custom Dashboards", "Real-time Analytics", "Reporting Tools", "Data Visualization"]
+      features: [
-    }
+        "Custom Dashboards",
+        "Real-time Analytics",
+        "Reporting Tools",
+        "Data Visualization",
+      ],
+    },
   ];
 
   return (
@@ -535,10 +653,16 @@ const SaaSServices = () => {
                       {service.description}
                     </p>
                     <div className="space-y-2">
-                      <h4 className="text-sm font-medium text-white">Key Features:</h4>
+                      <h4 className="text-sm font-medium text-white">
+                        Key Features:
+                      </h4>
                       <div className="flex flex-wrap gap-2">
                         {service.features.map((feature) => (
-                          <Badge key={feature} variant="secondary" className="text-xs bg-gray-800/50 text-gray-300 border-gray-700">
+                          <Badge
+                            key={feature}
+                            variant="secondary"
+                            className="text-xs bg-gray-800/50 text-gray-300 border-gray-700"
+                          >
                             {feature}
                           </Badge>
                         ))}
@@ -584,10 +708,16 @@ const SaaSServices = () => {
                         {service.description}
                       </p>
                       <div className="space-y-2">
-                        <h4 className="text-sm font-medium text-white">Key Features:</h4>
+                        <h4 className="text-sm font-medium text-white">
+                          Key Features:
+                        </h4>
                         <div className="flex flex-wrap gap-2">
                           {service.features.map((feature) => (
-                            <Badge key={feature} variant="secondary" className="text-xs bg-gray-800/50 text-gray-300 border-gray-700">
+                            <Badge
+                              key={feature}
+                              variant="secondary"
+                              className="text-xs bg-gray-800/50 text-gray-300 border-gray-700"
+                            >
                               {feature}
                             </Badge>
                           ))}
@@ -608,40 +738,112 @@ const SaaSServices = () => {
 // SaaS Tech Stack
 const SaaSTechStack = () => {
   const cloudPlatforms = [
-    { name: "AWS", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/amazonwebservices/amazonwebservices-original.svg", category: "Cloud Platform" },
+    { name: "AWS", logo: awsLogo, category: "Cloud Platform" },
-    { name: "Azure", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/azure/azure-original.svg", category: "Cloud Platform" },
+    {
-    { name: "Google Cloud", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/googlecloud/googlecloud-original.svg", category: "Cloud Platform" }
+      name: "Azure",
+      logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/azure/azure-original.svg",
+      category: "Cloud Platform",
+    },
+    {
+      name: "Google Cloud",
+      logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/googlecloud/googlecloud-original.svg",
+      category: "Cloud Platform",
+    },
   ];
 
   const containerization = [
-    { name: "Docker", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/docker/docker-original.svg", category: "Containerization" },
+    {
-    { name: "Kubernetes", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/kubernetes/kubernetes-plain.svg", category: "Orchestration" }
+      name: "Docker",
+      logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/docker/docker-original.svg",
+      category: "Containerization",
+    },
+    {
+      name: "Kubernetes",
+      logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/kubernetes/kubernetes-plain.svg",
+      category: "Orchestration",
+    },
   ];
 
   const backends = [
-    { name: "Node.js", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nodejs/nodejs-original.svg", category: "Backend" },
+    {
-    { name: "Python", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/python/python-original.svg", category: "Backend" },
+      name: "Node.js",
-    { name: "Java", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/java/java-original.svg", category: "Backend" },
+      logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nodejs/nodejs-original.svg",
-    { name: "Ruby", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/ruby/ruby-original.svg", category: "Backend" }
+      category: "Backend",
+    },
+    {
+      name: "Python",
+      logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/python/python-original.svg",
+      category: "Backend",
+    },
+    {
+      name: "Java",
+      logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/java/java-original.svg",
+      category: "Backend",
+    },
+    {
+      name: "Ruby",
+      logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/ruby/ruby-original.svg",
+      category: "Backend",
+    },
   ];
 
   const frontends = [
-    { name: "React", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/react/react-original.svg", category: "Frontend" },
+    {
-    { name: "Angular", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/angularjs/angularjs-original.svg", category: "Frontend" },
+      name: "React",
-    { name: "Vue.js", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/vuejs/vuejs-original.svg", category: "Frontend" }
+      logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/react/react-original.svg",
+      category: "Frontend",
+    },
+    {
+      name: "Angular",
+      logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/angularjs/angularjs-original.svg",
+      category: "Frontend",
+    },
+    {
+      name: "Vue.js",
+      logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/vuejs/vuejs-original.svg",
+      category: "Frontend",
+    },
   ];
 
   const databases = [
-    { name: "PostgreSQL", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/postgresql/postgresql-original.svg", category: "Database" },
+    {
-    { name: "MongoDB", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/mongodb/mongodb-original.svg", category: "Database" },
+      name: "PostgreSQL",
-    { name: "Redis", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/redis/redis-original.svg", category: "Cache" }
+      logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/postgresql/postgresql-original.svg",
+      category: "Database",
+    },
+    {
+      name: "MongoDB",
+      logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/mongodb/mongodb-original.svg",
+      category: "Database",
+    },
+    {
+      name: "Redis",
+      logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/redis/redis-original.svg",
+      category: "Cache",
+    },
   ];
 
   const specializedTools = [
-    { name: "Microservices", icon: Component, description: "Distributed architecture for scalability" },
+    {
-    { name: "GraphQL", icon: Network, description: "Flexible API query language" },
+      name: "Microservices",
-    { name: "Auto-scaling", icon: TrendingUp, description: "Dynamic resource management" },
+      icon: Component,
-    { name: "Multi-tenancy", icon: Users, description: "Isolated customer environments" }
+      description: "Distributed architecture for scalability",
+    },
+    {
+      name: "GraphQL",
+      icon: Network,
+      description: "Flexible API query language",
+    },
+    {
+      name: "Auto-scaling",
+      icon: TrendingUp,
+      description: "Dynamic resource management",
+    },
+    {
+      name: "Multi-tenancy",
+      icon: Users,
+      description: "Isolated customer environments",
+    },
   ];
 
   return (
@@ -658,7 +860,8 @@ const SaaSTechStack = () => {
             Building Resilient and High-Performing SaaS Products
           </h2>
           <p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
-            With cutting-edge technologies designed for scale, security, and performance.
+            With cutting-edge technologies designed for scale, security, and
+            performance.
           </p>
         </motion.div>
 
@@ -670,7 +873,9 @@ const SaaSTechStack = () => {
           viewport={{ once: true }}
           className="mb-16"
         >
-          <h3 className="text-2xl font-semibold text-foreground mb-8 text-center">Cloud Platforms</h3>
+          <h3 className="text-2xl font-semibold text-foreground mb-8 text-center">
+            Cloud Platforms
+          </h3>
           <div className="grid grid-cols-3 gap-6 max-w-2xl mx-auto">
             {cloudPlatforms.map((tech, index) => (
               <motion.div
@@ -690,8 +895,12 @@ const SaaSTechStack = () => {
                       className="w-10 h-10 object-contain filter brightness-0 invert dark:brightness-100 dark:invert-0 group-hover:brightness-100 group-hover:invert-0 transition-all duration-300"
                     />
                   </div>
-                  <h4 className="font-semibold text-foreground text-sm mb-1">{tech.name}</h4>
+                  <h4 className="font-semibold text-foreground text-sm mb-1">
-                  <p className="text-xs text-muted-foreground">{tech.category}</p>
+                    {tech.name}
+                  </h4>
+                  <p className="text-xs text-muted-foreground">
+                    {tech.category}
+                  </p>
                 </Card>
               </motion.div>
             ))}
@@ -709,7 +918,9 @@ const SaaSTechStack = () => {
           <div className="grid lg:grid-cols-2 gap-12">
             {/* Backend */}
             <div>
-              <h3 className="text-2xl font-semibold text-foreground mb-8 text-center">Backend Technologies</h3>
+              <h3 className="text-2xl font-semibold text-foreground mb-8 text-center">
+                Backend Technologies
+              </h3>
               <div className="grid grid-cols-2 gap-4">
                 {backends.map((tech, index) => (
                   <motion.div
@@ -729,7 +940,9 @@ const SaaSTechStack = () => {
                           className="w-8 h-8 object-contain filter brightness-0 invert dark:brightness-100 dark:invert-0 group-hover:brightness-100 group-hover:invert-0 transition-all duration-300"
                         />
                       </div>
-                      <h4 className="font-semibold text-foreground text-sm">{tech.name}</h4>
+                      <h4 className="font-semibold text-foreground text-sm">
+                        {tech.name}
+                      </h4>
                     </Card>
                   </motion.div>
                 ))}
@@ -738,7 +951,9 @@ const SaaSTechStack = () => {
 
             {/* Frontend */}
             <div>
-              <h3 className="text-2xl font-semibold text-foreground mb-8 text-center">Frontend Technologies</h3>
+              <h3 className="text-2xl font-semibold text-foreground mb-8 text-center">
+                Frontend Technologies
+              </h3>
               <div className="grid grid-cols-3 gap-4">
                 {frontends.map((tech, index) => (
                   <motion.div
@@ -758,7 +973,9 @@ const SaaSTechStack = () => {
                           className="w-8 h-8 object-contain filter brightness-0 invert dark:brightness-100 dark:invert-0 group-hover:brightness-100 group-hover:invert-0 transition-all duration-300"
                         />
                       </div>
-                      <h4 className="font-semibold text-foreground text-sm">{tech.name}</h4>
+                      <h4 className="font-semibold text-foreground text-sm">
+                        {tech.name}
+                      </h4>
                     </Card>
                   </motion.div>
                 ))}
@@ -774,7 +991,9 @@ const SaaSTechStack = () => {
           transition={{ duration: 0.8, delay: 0.4 }}
           viewport={{ once: true }}
         >
-          <h3 className="text-2xl font-semibold text-foreground mb-8 text-center">Specialized SaaS Technologies</h3>
+          <h3 className="text-2xl font-semibold text-foreground mb-8 text-center">
+            Specialized SaaS Technologies
+          </h3>
           <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
             {specializedTools.map((tool, index) => {
               const IconComponent = tool.icon;
@@ -792,8 +1011,12 @@ const SaaSTechStack = () => {
                     <div className="w-12 h-12 bg-accent/20 rounded-lg flex items-center justify-center mx-auto mb-4">
                       <IconComponent className="w-6 h-6 text-accent" />
                     </div>
-                    <h4 className="font-semibold text-foreground mb-2">{tool.name}</h4>
+                    <h4 className="font-semibold text-foreground mb-2">
-                    <p className="text-sm text-muted-foreground leading-relaxed">{tool.description}</p>
+                      {tool.name}
+                    </h4>
+                    <p className="text-sm text-muted-foreground leading-relaxed">
+                      {tool.description}
+                    </p>
                   </Card>
                 </motion.div>
               );
@@ -811,30 +1034,37 @@ const SaaSCaseStudies = () => {
     {
       title: "Enterprise CRM SaaS Platform",
       client: "SalesTech Pro",
-      description: "Comprehensive customer relationship management platform with advanced analytics, automation workflows, and multi-tenant architecture supporting 10,000+ users",
+      description:
-      image: "https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=400&h=300&fit=crop&auto=format",
+        "Comprehensive customer relationship management platform with advanced analytics, automation workflows, and multi-tenant architecture supporting 10,000+ users",
+      image:
+        "https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=400&h=300&fit=crop&auto=format",
       results: "500% user growth in 18 months",
       gradient: "from-blue-500/20 to-cyan-500/20",
-      features: "Multi-tenancy, Advanced Analytics, Workflow Automation"
+      features: "Multi-tenancy, Advanced Analytics, Workflow Automation",
     },
     {
       title: "Healthcare Practice Management SaaS",
       client: "MedFlow Solutions",
-      description: "HIPAA-compliant practice management system with patient scheduling, billing automation, and telehealth integration for healthcare providers",
+      description:
-      image: "https://images.unsplash.com/photo-1559757175-0eb30cd8c063?w=400&h=300&fit=crop&auto=format",
+        "HIPAA-compliant practice management system with patient scheduling, billing automation, and telehealth integration for healthcare providers",
+      image:
+        "https://images.unsplash.com/photo-1559757175-0eb30cd8c063?w=400&h=300&fit=crop&auto=format",
       results: "99.9% uptime achieved",
       gradient: "from-green-500/20 to-emerald-500/20",
-      features: "HIPAA Compliance, Telehealth Integration, Automated Billing"
+      features: "HIPAA Compliance, Telehealth Integration, Automated Billing",
     },
     {
       title: "Project Management SaaS Suite",
       client: "TeamSync",
-      description: "Collaborative project management platform with real-time collaboration, resource planning, and advanced reporting for distributed teams",
+      description:
-      image: "https://images.unsplash.com/photo-1551434678-e076c223a692?w=400&h=300&fit=crop&auto=format",
+        "Collaborative project management platform with real-time collaboration, resource planning, and advanced reporting for distributed teams",
+      image:
+        "https://images.unsplash.com/photo-1551434678-e076c223a692?w=400&h=300&fit=crop&auto=format",
       results: "50% faster project delivery",
       gradient: "from-purple-500/20 to-pink-500/20",
-      features: "Real-time Collaboration, Resource Planning, Advanced Reporting"
+      features:
-    }
+        "Real-time Collaboration, Resource Planning, Advanced Reporting",
+    },
   ];
 
   return (
@@ -880,7 +1110,10 @@ const SaaSCaseStudies = () => {
                         <div className="text-xs text-gray-400 mb-2 uppercase tracking-wider">
                           {study.client}
                         </div>
-                        <Badge variant="secondary" className="text-xs bg-accent/20 text-accent border-accent/30">
+                        <Badge
+                          variant="secondary"
+                          className="text-xs bg-accent/20 text-accent border-accent/30"
+                        >
                           {study.results}
                         </Badge>
                       </div>
@@ -892,7 +1125,9 @@ const SaaSCaseStudies = () => {
                   </div>
 
                   <div className="px-8 pb-6 flex-1">
-                    <div className={`relative rounded-xl overflow-hidden bg-gradient-to-br ${study.gradient} p-4 border border-gray-700`}>
+                    <div
+                      className={`relative rounded-xl overflow-hidden bg-gradient-to-br ${study.gradient} p-4 border border-gray-700`}
+                    >
                       <ImageWithFallback
                         src={study.image}
                         alt={study.title}
@@ -906,10 +1141,10 @@ const SaaSCaseStudies = () => {
                       {study.description}
                     </p>
                     <div className="space-y-2">
-                      <h4 className="text-xs font-medium text-white uppercase tracking-wider">Key Features:</h4>
+                      <h4 className="text-xs font-medium text-white uppercase tracking-wider">
-                      <p className="text-xs text-gray-400">
+                        Key Features:
-                        {study.features}
+                      </h4>
-                      </p>
+                      <p className="text-xs text-gray-400">{study.features}</p>
                     </div>
                   </div>
 
@@ -919,7 +1154,9 @@ const SaaSCaseStudies = () => {
                       size="sm"
                       className="w-full justify-between text-accent hover:text-accent hover:bg-accent/10 group-hover:translate-x-1 transition-all duration-300"
                     >
-                      <span className="text-sm font-medium">VIEW CASE STUDY</span>
+                      <span className="text-sm font-medium">
+                        VIEW CASE STUDY
+                      </span>
                       <ArrowRight className="w-4 h-4" />
                     </Button>
                   </div>
@@ -955,7 +1192,9 @@ const SaaSInlineCTA = () => {
             <div className="inline-block p-[2px] rounded-full bg-gradient-to-r from-accent via-blue-500 to-purple-500">
               <div className="bg-background rounded-full px-6 py-3 flex items-center gap-2">
                 <Lightbulb className="w-5 h-5 text-foreground" />
-                <span className="text-foreground text-base font-medium">Unicorn Potential</span>
+                <span className="text-foreground text-base font-medium">
+                  Unicorn Potential
+                </span>
               </div>
             </div>
 
@@ -968,7 +1207,10 @@ const SaaSInlineCTA = () => {
               Let's validate your idea and map out a scalable development plan.
             </p>
 
-            <ShimmerButton className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl">
+            <ShimmerButton
+              className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl"
+              onClick={() => navigateTo("/start-a-project")}
+            >
               <div className="inline-flex items-center gap-3">
                 <MessageSquare className="w-6 h-6 flex-shrink-0" />
                 <span>Get a Free SaaS Strategy Call</span>
@@ -986,28 +1228,51 @@ const HireSaaSDevelopers = () => {
   const developerTypes = [
     {
       title: "SaaS Architects",
-      description: "System architects specializing in scalable SaaS architecture design",
+      description:
+        "System architects specializing in scalable SaaS architecture design",
       icon: Layout,
-      skills: ["Multi-tenant Architecture", "Microservices", "Cloud Infrastructure", "Security Design"]
+      skills: [
+        "Multi-tenant Architecture",
+        "Microservices",
+        "Cloud Infrastructure",
+        "Security Design",
+      ],
     },
     {
       title: "Full-Stack SaaS Engineers",
-      description: "End-to-end developers with SaaS product development expertise",
+      description:
+        "End-to-end developers with SaaS product development expertise",
       icon: Code,
-      skills: ["Frontend + Backend", "API Development", "Database Design", "Payment Integration"]
+      skills: [
+        "Frontend + Backend",
+        "API Development",
+        "Database Design",
+        "Payment Integration",
+      ],
     },
     {
       title: "DevOps Specialists",
       description: "Infrastructure automation and deployment pipeline experts",
       icon: CloudCog,
-      skills: ["CI/CD Pipelines", "Container Orchestration", "Monitoring", "Auto-scaling"]
+      skills: [
+        "CI/CD Pipelines",
+        "Container Orchestration",
+        "Monitoring",
+        "Auto-scaling",
+      ],
     },
     {
       title: "Product Engineers",
-      description: "Feature-focused engineers with product development experience",
+      description:
+        "Feature-focused engineers with product development experience",
       icon: Rocket,
-      skills: ["Feature Development", "User Analytics", "A/B Testing", "Performance Optimization"]
+      skills: [
-    }
+        "Feature Development",
+        "User Analytics",
+        "A/B Testing",
+        "Performance Optimization",
+      ],
+    },
   ];
 
   return (
@@ -1024,7 +1289,8 @@ const HireSaaSDevelopers = () => {
             Need Specialized SaaS Talent?
           </h2>
           <p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
-            Hire experienced SaaS architects, engineers, and DevOps specialists to accelerate your product development.
+            Hire experienced SaaS architects, engineers, and DevOps specialists
+            to accelerate your product development.
           </p>
         </motion.div>
 
@@ -1059,10 +1325,16 @@ const HireSaaSDevelopers = () => {
                       {type.description}
                     </p>
                     <div className="space-y-2">
-                      <h4 className="text-sm font-medium text-white">Core Skills:</h4>
+                      <h4 className="text-sm font-medium text-white">
+                        Core Skills:
+                      </h4>
                       <div className="flex flex-wrap gap-2">
                         {type.skills.map((skill) => (
-                          <Badge key={skill} variant="secondary" className="text-xs bg-gray-800/50 text-gray-300 border-gray-700">
+                          <Badge
+                            key={skill}
+                            variant="secondary"
+                            className="text-xs bg-gray-800/50 text-gray-300 border-gray-700"
+                          >
                             {skill}
                           </Badge>
                         ))}
@@ -1111,20 +1383,25 @@ const SaaSFAQs = () => {
   const faqs = [
     {
       question: "What is multi-tenancy in SaaS and how do you handle it?",
-      answer: "Multi-tenancy allows multiple customers (tenants) to share the same application instance while keeping their data completely isolated. We implement multi-tenancy through database-level isolation, tenant-specific configurations, and secure data partitioning. This approach reduces costs while maintaining security and customization capabilities for each tenant."
+      answer:
+        "Multi-tenancy allows multiple customers (tenants) to share the same application instance while keeping their data completely isolated. We implement multi-tenancy through database-level isolation, tenant-specific configurations, and secure data partitioning. This approach reduces costs while maintaining security and customization capabilities for each tenant.",
     },
     {
       question: "How do you ensure the scalability of a SaaS product?",
-      answer: "We design SaaS products with scalability from day one using microservices architecture, auto-scaling cloud infrastructure, database optimization, and caching strategies. Our approach includes horizontal scaling, load balancing, and performance monitoring to ensure your product can handle exponential user growth without compromising performance."
+      answer:
+        "We design SaaS products with scalability from day one using microservices architecture, auto-scaling cloud infrastructure, database optimization, and caching strategies. Our approach includes horizontal scaling, load balancing, and performance monitoring to ensure your product can handle exponential user growth without compromising performance.",
     },
     {
       question: "What's the typical timeline for SaaS MVP development?",
-      answer: "SaaS MVP development typically takes 12-20 weeks, depending on complexity and feature scope. This includes market research, architecture design, core feature development, multi-tenant setup, payment integration, and initial testing. We use agile methodologies to deliver working software incrementally and gather user feedback early."
+      answer:
+        "SaaS MVP development typically takes 12-20 weeks, depending on complexity and feature scope. This includes market research, architecture design, core feature development, multi-tenant setup, payment integration, and initial testing. We use agile methodologies to deliver working software incrementally and gather user feedback early.",
     },
     {
-      question: "Do you assist with post-launch feature development and scaling?",
+      question:
-      answer: "Absolutely! We provide ongoing development support including feature expansion, performance optimization, scaling infrastructure, security updates, and technical maintenance. Our post-launch services include analytics implementation, user feedback integration, and continuous product improvement based on market demands."
+        "Do you assist with post-launch feature development and scaling?",
-    }
+      answer:
+        "Absolutely! We provide ongoing development support including feature expansion, performance optimization, scaling infrastructure, security updates, and technical maintenance. Our post-launch services include analytics implementation, user feedback integration, and continuous product improvement based on market demands.",
+    },
   ];
 
   return (
@@ -1157,7 +1434,9 @@ const SaaSFAQs = () => {
                 className="bg-gray-900/50 backdrop-blur-md rounded-2xl border border-gray-800 px-10 shadow-lg"
               >
                 <AccordionTrigger className="text-left hover:no-underline py-10 text-xl">
-                  <span className="font-semibold text-white">{faq.question}</span>
+                  <span className="font-semibold text-white">
+                    {faq.question}
+                  </span>
                 </AccordionTrigger>
                 <AccordionContent className="text-gray-300 pb-10 text-lg leading-relaxed">
                   {faq.answer}
@@ -1193,7 +1472,9 @@ const SaaSFinalCTA = () => {
             <div className="inline-block p-[2px] rounded-full bg-gradient-to-r from-accent via-blue-500 to-purple-500">
               <div className="bg-background rounded-full px-6 py-3 flex items-center gap-2">
                 <Cloud className="w-5 h-5 text-foreground" />
-                <span className="text-foreground text-base font-medium">Market Leadership</span>
+                <span className="text-foreground text-base font-medium">
+                  Market Leadership
+                </span>
               </div>
             </div>
           </motion.div>
@@ -1210,7 +1491,8 @@ const SaaSFinalCTA = () => {
             viewport={{ once: true }}
             className="text-xl text-muted-foreground mb-12 max-w-2xl mx-auto leading-relaxed"
           >
-            Partner with our experts to build a scalable, secure, and user-centric SaaS solution that captivates your market.
+            Partner with our experts to build a scalable, secure, and
+            user-centric SaaS solution that captivates your market.
           </motion.p>
 
           <motion.div
@@ -1220,7 +1502,10 @@ const SaaSFinalCTA = () => {
             viewport={{ once: true }}
             className="space-y-8"
           >
-            <ShimmerButton className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25">
+            <ShimmerButton
+              className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25"
+              onClick={() => navigateTo("/start-a-project")}
+            >
               <div className="inline-flex items-center gap-3">
                 <Rocket className="w-6 h-6 flex-shrink-0" />
                 <span>Start Your SaaS Project Today</span>

pages/SoftwareEngineering.tsx

@@ -1,26 +1,29 @@
-import React from "react";
 import { motion } from "framer-motion";
-import { Navigation } from "../components/Navigation";
-import { Footer } from "../components/Footer";
-import { ProcessSection } from "../components/ProcessSection";
-import { FAQSection } from "../components/FAQSection";
-import { AnimatedGradientText } from "../components/AnimatedGradientText";
-import { Button } from "../components/ui/button";
-import { ShimmerButton } from "../components/ui/shimmer-button";
-import { Badge } from "../components/ui/badge";
-import { Card, CardContent } from "../components/ui/card";
-import { GridPattern } from "../components/GridPattern";
-import { navigateTo } from "../App";
 import {
-  Code, Cpu, Database, Server, Shield, Zap, Users, Star, 
+  Building,
-  ArrowRight, ChevronRight, Clock, TrendingUp, Layers, 
+  Calendar,
-  Target, Layout, Rocket, Monitor, Lock, RefreshCcw, ShieldCheck,
+  CheckCircle,
-  MessageSquare, Heart, CheckCircle, Lightbulb, Coffee, 
+  Code,
-  Download, Calendar, Camera, Music, Gamepad2,
+  Eye,
-  CreditCard, Bell, Mail, Search, Home, MapPin, 
+  Layers,
-  Github, Slack, Figma, Chrome, Zap as ZapIcon, Video, MessageCircle, Brain,
+  RefreshCcw,
-  Cog, Settings, Sparkles, Handshake, Eye, Award, UserPlus, Building, Package
+  Rocket,
+  Server,
+  Settings,
+  Shield,
+  TrendingUp,
+  UserPlus,
+  Zap,
 } from "lucide-react";
+import { navigateTo } from "../App";
+import { FAQSection } from "../components/FAQSection";
+import { Footer } from "../components/Footer";
+import { Navigation } from "../components/Navigation";
+import { ProcessSection } from "../components/ProcessSection";
+import { Badge } from "../components/ui/badge";
+import { Button } from "../components/ui/button";
+import { Card, CardContent } from "../components/ui/card";
+import { ShimmerButton } from "../components/ui/shimmer-button";
 
 // Enhanced Hero Section
 const HeroWithCTA = () => {
@@ -40,7 +43,9 @@ const HeroWithCTA = () => {
               animate={{ opacity: 1, y: 0 }}
               transition={{ duration: 0.6 }}
             >
-              <span className="text-white/70 text-sm font-medium">Software Engineering</span>
+              <span className="text-white/70 text-sm font-medium">
+                Software Engineering
+              </span>
             </motion.div>
 
             {/* Main Heading */}
@@ -52,7 +57,8 @@ const HeroWithCTA = () => {
               </h1>
 
               <p className="text-lg text-gray-300 leading-relaxed max-w-lg">
-                Build robust, scalable enterprise software systems with modern engineering practices and proven methodologies.
+                Build robust, scalable enterprise software systems with modern
+                engineering practices and proven methodologies.
               </p>
             </div>
 
@@ -63,7 +69,11 @@ const HeroWithCTA = () => {
               transition={{ duration: 0.8, delay: 0.3 }}
               className="flex flex-col sm:flex-row gap-4"
             >
-              <ShimmerButton className="text-lg px-8 py-4" onClick={() => navigateTo('/contact/schedule-a-discovery-call')}>
+              <ShimmerButton
+                className="text-lg px-8 py-4"
+                // onClick={() => navigateTo('/contact/schedule-a-discovery-call')}
+                onClick={() => navigateTo("/start-a-project")}
+              >
                 <div className="inline-flex items-center gap-2">
                   <Calendar className="w-4 h-4 flex-shrink-0" />
                   <span>Discuss Your Project</span>
@@ -72,8 +82,8 @@ const HeroWithCTA = () => {
               <Button
                 variant="secondary"
                 size="lg"
-                className="text-lg px-8 py-4"
+                className="text-lg px-8 py-4 h-[56px]"
-                onClick={() => navigateTo('/case-studies')}
+                onClick={() => navigateTo("/case-studies")}
               >
                 <Eye className="w-4 h-4 flex-shrink-0" />
                 <span>View Case Studies</span>
@@ -95,23 +105,39 @@ const HeroWithCTA = () => {
               className="grid grid-cols-2 gap-8 text-center"
             >
               <div className="space-y-2 flex flex-col items-center">
-                <div className="text-3xl lg:text-4xl font-bold text-white">150+</div>
+                <div className="text-3xl lg:text-4xl font-bold text-white">
-                <div className="text-sm text-gray-400 leading-tight">Software Systems</div>
+                  150+
+                </div>
+                <div className="text-sm text-gray-400 leading-tight">
+                  Software Systems
+                </div>
               </div>
 
               <div className="space-y-2 flex flex-col items-center">
-                <div className="text-3xl lg:text-4xl font-bold text-white">95%</div>
+                <div className="text-3xl lg:text-4xl font-bold text-white">
-                <div className="text-sm text-gray-400 leading-tight">Code Quality Score</div>
+                  95%
+                </div>
+                <div className="text-sm text-gray-400 leading-tight">
+                  Code Quality Score
+                </div>
               </div>
 
               <div className="space-y-2 flex flex-col items-center">
-                <div className="text-3xl lg:text-4xl font-bold text-white">60%</div>
+                <div className="text-3xl lg:text-4xl font-bold text-white">
-                <div className="text-sm text-gray-400 leading-tight">Faster Development</div>
+                  60%
+                </div>
+                <div className="text-sm text-gray-400 leading-tight">
+                  Faster Development
+                </div>
               </div>
 
               <div className="space-y-2 flex flex-col items-center">
-                <div className="text-3xl lg:text-4xl font-bold text-white">24/7</div>
+                <div className="text-3xl lg:text-4xl font-bold text-white">
-                <div className="text-sm text-gray-400 leading-tight">System Reliability</div>
+                  24/7
+                </div>
+                <div className="text-sm text-gray-400 leading-tight">
+                  System Reliability
+                </div>
               </div>
             </motion.div>
           </motion.div>
@@ -124,12 +150,16 @@ const HeroWithCTA = () => {
 // Enhanced Horizontal Tag Scroller with Engineering Practices
 const HorizontalTagScroller = () => {
   const practices = [
-    { name: "Microservices Architecture", icon: Layers, color: "text-blue-400" },
+    {
+      name: "Microservices Architecture",
+      icon: Layers,
+      color: "text-blue-400",
+    },
     { name: "DevOps & CI/CD", icon: Zap, color: "text-green-400" },
     { name: "API-First Design", icon: Code, color: "text-purple-400" },
     { name: "Test-Driven Development", icon: Shield, color: "text-cyan-400" },
     { name: "Agile Methodologies", icon: TrendingUp, color: "text-orange-400" },
-    { name: "System Integration", icon: Settings, color: "text-yellow-400" }
+    { name: "System Integration", icon: Settings, color: "text-yellow-400" },
   ];
 
   return (
@@ -148,7 +178,8 @@ const HorizontalTagScroller = () => {
             <span className="text-foreground"> We Follow</span>
           </h2>
           <p className="text-2xl text-muted-foreground max-w-4xl mx-auto leading-relaxed">
-            Industry-leading methodologies that ensure code quality, scalability, and maintainability.
+            Industry-leading methodologies that ensure code quality,
+            scalability, and maintainability.
           </p>
         </motion.div>
 
@@ -177,7 +208,9 @@ const HorizontalTagScroller = () => {
                 >
                   <div className="bg-card/20 backdrop-blur-md rounded-2xl border border-white/10 px-8 py-6 hover:border-accent/30 transition-all duration-300 cursor-pointer shadow-lg hover:shadow-xl min-w-fit group-hover:scale-105 group-hover:-translate-y-1">
                     <div className="flex items-center gap-4">
-                      <div className={`w-8 h-8 flex items-center justify-center ${practice.color}`}>
+                      <div
+                        className={`w-8 h-8 flex items-center justify-center ${practice.color}`}
+                      >
                         <IconComponent className="w-6 h-6" />
                       </div>
                       <span className="text-xl font-medium text-foreground whitespace-nowrap">
@@ -197,13 +230,18 @@ const HorizontalTagScroller = () => {
                   key={`loop-${practice.name}-${index}`}
                   initial={{ opacity: 0, scale: 0.8 }}
                   whileInView={{ opacity: 1, scale: 1 }}
-                  transition={{ duration: 0.5, delay: (index + practices.length) * 0.1 }}
+                  transition={{
+                    duration: 0.5,
+                    delay: (index + practices.length) * 0.1,
+                  }}
                   viewport={{ once: true }}
                   className="group flex-shrink-0 mx-3"
                 >
                   <div className="bg-card/20 backdrop-blur-md rounded-2xl border border-white/10 px-8 py-6 hover:border-accent/30 transition-all duration-300 cursor-pointer shadow-lg hover:shadow-xl min-w-fit group-hover:scale-105 group-hover:-translate-y-1">
                     <div className="flex items-center gap-4">
-                      <div className={`w-8 h-8 flex items-center justify-center ${practice.color}`}>
+                      <div
+                        className={`w-8 h-8 flex items-center justify-center ${practice.color}`}
+                      >
                         <IconComponent className="w-6 h-6" />
                       </div>
                       <span className="text-xl font-medium text-foreground whitespace-nowrap">
@@ -227,28 +265,28 @@ const SideBySideContentWithIcons = () => {
     {
       id: "architecture",
       title: "Robust Architecture",
-      icon: Building
+      icon: Building,
     },
     {
       id: "quality",
       title: "Code Quality Excellence",
-      icon: CheckCircle
+      icon: CheckCircle,
     },
     {
       id: "scalability",
       title: "Future-Proof Scalability",
-      icon: TrendingUp
+      icon: TrendingUp,
     },
     {
       id: "integration",
       title: "Seamless Integration",
-      icon: Layers
+      icon: Layers,
     },
     {
       id: "maintenance",
       title: "Long-Term Maintainability",
-      icon: Settings
+      icon: Settings,
-    }
+    },
   ];
 
   return (
@@ -318,39 +356,44 @@ const TabbedServiceDisplay = () => {
     {
       title: "Enterprise Software Solutions",
       icon: Building,
-      description: "Complex enterprise systems with robust architecture and scalability.",
+      description:
-      link: "/services/enterprise-software-solutions"
+        "Complex enterprise systems with robust architecture and scalability.",
+      link: "/services/enterprise-software-solutions",
     },
     {
       title: "System Architecture & DevOps",
       icon: Layers,
-      description: "Modern system design with automated deployment and monitoring.",
+      description:
-      link: "/services/system-architecture-devops"
+        "Modern system design with automated deployment and monitoring.",
+      link: "/services/system-architecture-devops",
     },
     {
       title: "Third-Party Integrations",
       icon: Zap,
-      description: "Seamless integration with existing systems and external services.",
+      description:
-      link: "/services/third-party-integrations"
+        "Seamless integration with existing systems and external services.",
+      link: "/services/third-party-integrations",
     },
     {
       title: "Product Modernization",
       icon: RefreshCcw,
-      description: "Upgrade legacy systems with modern technologies and practices.",
+      description:
-      link: "/services/product-modernization"
+        "Upgrade legacy systems with modern technologies and practices.",
+      link: "/services/product-modernization",
     },
     {
       title: "API & Backend Development",
       icon: Server,
       description: "Robust APIs and scalable backend infrastructure solutions.",
-      link: "/services/api-backend-development"
+      link: "/services/api-backend-development",
     },
     {
       title: "Custom Software Development",
       icon: Code,
-      description: "Tailored software solutions built to your specific requirements.",
+      description:
-      link: "/services/custom-web-app-development"
+        "Tailored software solutions built to your specific requirements.",
-    }
+      link: "/services/custom-web-app-development",
+    },
   ];
 
   return (
@@ -367,7 +410,8 @@ const TabbedServiceDisplay = () => {
             Software Engineering Services
           </h2>
           <p className="text-lg text-gray-300 max-w-4xl mx-auto leading-relaxed">
-            Comprehensive software engineering solutions designed for enterprise-grade performance and reliability.
+            Comprehensive software engineering solutions designed for
+            enterprise-grade performance and reliability.
           </p>
         </motion.div>
 
@@ -440,27 +484,33 @@ const InlineCTA = () => {
               <div className="bg-gradient-to-r from-[#E5195E]/20 to-purple-500/20 border border-[#E5195E]/30 rounded-full px-6 py-3">
                 <div className="flex items-center gap-2">
                   <Rocket className="w-4 h-4 text-[#E5195E]" />
-                  <span className="text-[#E5195E] text-sm font-medium">Ready to Launch?</span>
+                  <span className="text-[#E5195E] text-sm font-medium">
+                    Ready to Launch?
+                  </span>
                 </div>
               </div>
             </div>
 
             {/* Main Heading */}
             <h2 className="text-4xl lg:text-5xl font-semibold leading-tight">
-              <span className="text-foreground">Build Enterprise Software with </span>
+              <span className="text-foreground">
+                Build Enterprise Software with{" "}
+              </span>
               <span className="text-[#E5195E]">Engineering Excellence</span>
             </h2>
 
             {/* Subtitle */}
             <p className="text-xl text-muted-foreground leading-relaxed max-w-2xl mx-auto">
-              Robust, scalable systems engineered with modern practices and proven methodologies.
+              Robust, scalable systems engineered with modern practices and
+              proven methodologies.
             </p>
 
             {/* CTA Button */}
             <div className="flex flex-col items-center gap-4">
               <ShimmerButton
                 className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl bg-[#E5195E] hover:bg-[#E5195E]/90"
-                onClick={() => navigateTo('/contact/schedule-a-discovery-call')}
+                // onClick={() => navigateTo('/contact/schedule-a-discovery-call')}
+                onClick={() => navigateTo("/start-a-project")}
               >
                 <div className="inline-flex items-center gap-3">
                   <Code className="w-6 h-6 flex-shrink-0" />
@@ -470,7 +520,8 @@ const InlineCTA = () => {
 
               {/* Small benefit text */}
               <p className="text-sm text-muted-foreground">
-                Architecture review • Code quality audit • Technical consultation
+                Architecture review • Code quality audit • Technical
+                consultation
               </p>
             </div>
           </motion.div>
@@ -489,7 +540,7 @@ const HireDevelopersSection = () => {
       skills: ["System Design", "Microservices", "Scalability"],
       iconBg: "bg-blue-500",
       iconColor: "text-white",
-      link: "/hire-talent/full-stack-developers"
+      link: "/hire-talent/full-stack-developers",
     },
     {
       title: "Backend Engineers",
@@ -497,7 +548,7 @@ const HireDevelopersSection = () => {
       skills: ["Node.js", "Python", "Java", "Go"],
       iconBg: "bg-green-500",
       iconColor: "text-white",
-      link: "/hire-talent/backend-developers"
+      link: "/hire-talent/backend-developers",
     },
     {
       title: "DevOps Engineers",
@@ -505,7 +556,7 @@ const HireDevelopersSection = () => {
       skills: ["CI/CD", "Docker", "Kubernetes", "AWS"],
       iconBg: "bg-purple-500",
       iconColor: "text-white",
-      link: "/hire-talent/full-stack-developers"
+      link: "/hire-talent/full-stack-developers",
     },
     {
       title: "Full Stack Developers",
@@ -513,8 +564,8 @@ const HireDevelopersSection = () => {
       skills: ["React", "Node.js", "TypeScript", "APIs"],
       iconBg: "bg-orange-500",
       iconColor: "text-white",
-      link: "/hire-talent/full-stack-developers"
+      link: "/hire-talent/full-stack-developers",
-    }
+    },
   ];
 
   return (
@@ -532,7 +583,8 @@ const HireDevelopersSection = () => {
             <span className="text-[#E5195E]">Engineering Experts</span>
           </h2>
           <p className="text-2xl text-muted-foreground max-w-4xl mx-auto leading-relaxed">
-            Get access to senior software engineers who build robust, scalable enterprise systems.
+            Get access to senior software engineers who build robust, scalable
+            enterprise systems.
           </p>
         </motion.div>
 
@@ -560,8 +612,12 @@ const HireDevelopersSection = () => {
                     {/* Header */}
                     <div className="p-8 pb-6">
                       <div className="flex items-start gap-4 mb-6">
-                        <div className={`w-12 h-12 ${specialist.iconBg} rounded-xl flex items-center justify-center backdrop-blur-sm`}>
+                        <div
-                          <IconComponent className={`w-6 h-6 ${specialist.iconColor}`} />
+                          className={`w-12 h-12 ${specialist.iconBg} rounded-xl flex items-center justify-center backdrop-blur-sm`}
+                        >
+                          <IconComponent
+                            className={`w-6 h-6 ${specialist.iconColor}`}
+                          />
                         </div>
                         <div className="flex-1">
                           <div className="text-xs text-muted-foreground mb-2 uppercase tracking-wider">
@@ -579,7 +635,11 @@ const HireDevelopersSection = () => {
                     <div className="px-8 pb-6 flex-1">
                       <div className="flex flex-wrap gap-2">
                         {specialist.skills.map((skill) => (
-                          <Badge key={skill} variant="secondary" className="text-xs bg-white/10 text-foreground">
+                          <Badge
+                            key={skill}
+                            variant="secondary"
+                            className="text-xs bg-white/10 text-foreground"
+                          >
                             {skill}
                           </Badge>
                         ))}
@@ -613,24 +673,29 @@ const HireDevelopersSection = () => {
 const softwareEngineeringFAQs = [
   {
     question: "What software engineering methodologies do you follow?",
-    answer: "We follow modern engineering practices including Agile/Scrum, DevOps, Test-Driven Development, continuous integration/deployment, and microservices architecture to ensure high-quality, maintainable software."
+    answer:
+      "We follow modern engineering practices including Agile/Scrum, DevOps, Test-Driven Development, continuous integration/deployment, and microservices architecture to ensure high-quality, maintainable software.",
   },
   {
     question: "How do you ensure code quality and maintainability?",
-    answer: "We implement comprehensive code review processes, automated testing, static code analysis, documentation standards, and follow SOLID principles and design patterns to ensure long-term maintainability."
+    answer:
+      "We implement comprehensive code review processes, automated testing, static code analysis, documentation standards, and follow SOLID principles and design patterns to ensure long-term maintainability.",
   },
   {
     question: "Can you modernize our existing legacy software?",
-    answer: "Yes, we specialize in legacy system modernization including code refactoring, architecture updates, technology migration, and gradual system replacement while maintaining business continuity."
+    answer:
+      "Yes, we specialize in legacy system modernization including code refactoring, architecture updates, technology migration, and gradual system replacement while maintaining business continuity.",
   },
   {
     question: "What is your approach to system architecture?",
-    answer: "We design scalable, modular architectures using microservices, API-first approaches, cloud-native patterns, and modern frameworks that can evolve with your business requirements."
+    answer:
+      "We design scalable, modular architectures using microservices, API-first approaches, cloud-native patterns, and modern frameworks that can evolve with your business requirements.",
   },
   {
     question: "Do you provide ongoing software maintenance?",
-    answer: "Yes, we offer comprehensive maintenance services including bug fixes, performance optimization, security updates, feature enhancements, and 24/7 monitoring to keep your software running smoothly."
+    answer:
-  }
+      "Yes, we offer comprehensive maintenance services including bug fixes, performance optimization, security updates, feature enhancements, and 24/7 monitoring to keep your software running smoothly.",
+  },
 ];
 
 export function SoftwareEngineering() {

pages/StartAProject.tsx

@@ -874,7 +874,7 @@ const ProcessStepsSection = () => {
           })}
         </motion.div>
 
-        <motion.div
+        {/* <motion.div
           initial={{ opacity: 0, y: 30 }}
           whileInView={{ opacity: 1, y: 0 }}
           transition={{ duration: 0.8, delay: 0.4 }}
@@ -890,7 +890,7 @@ const ProcessStepsSection = () => {
             Tell Us More
             <ArrowRight className="w-4 h-4 ml-2" />
           </Button>
-        </motion.div>
+        </motion.div> */}
       </div>
     </section>
   );
@@ -999,7 +999,7 @@ const JoinWDISection = () => {
               <ArrowRight className="w-4 h-4 ml-2" />
             </Button>
 
-            <Button
+            {/* <Button
               size="lg"
               variant="outline"
               className="border-gray-600 text-white hover:bg-gray-800 text-lg px-8 py-4"
@@ -1007,7 +1007,7 @@ const JoinWDISection = () => {
             >
               <Upload className="w-5 h-5 mr-2" />
               Send Your CV
-            </Button>
+            </Button> */}
           </div>
 
           <p className="text-gray-400 text-sm">
@@ -1126,28 +1126,28 @@ const ContactInfoSection = () => {
       icon: Mail,
       title: "Email Us",
       description: "Get in touch via email",
-      contact: "hello@webdevelopmentinstitute.com",
+      contact: "ideas@wdipl.com",
-      action: "mailto:hello@webdevelopmentinstitute.com",
+      action: "mailto:ideas@wdipl.com",
     },
     {
       icon: Phone,
       title: "Call Us",
       description: "Speak with our team",
-      contact: "+1 (555) 123-4567",
+      contact: "+91 7700900039",
-      action: "tel:+15551234567",
+      action: "tel:+91 7700900039",
     },
     {
       icon: MapPin,
       title: "Visit Us",
       description: "Our office locations",
-      contact: "Multiple Global Locations",
+      contact: "614, 6th floor Palm spring centre, Malad west, Mumbai Maharshatra",
       action: () => navigateTo("/company/office-locations"),
     },
     {
       icon: Clock,
       title: "Business Hours",
       description: "We're available",
-      contact: "Mon-Fri 9AM-6PM",
+      contact: "Mon-Fri 11AM-8PM",
       action: () => navigateTo("/contact/schedule-a-discovery-call"),
     },
   ];

pages/WearableDeviceDevelopment.tsx

@@ -39,6 +39,7 @@ import { Badge } from "../components/ui/badge";
 import { Button } from "../components/ui/button";
 import { Card, CardContent } from "../components/ui/card";
 import { ShimmerButton } from "../components/ui/shimmer-button";
+import { navigateTo } from "@/App";
 
 // Wearable & Device App Development Hero Section
 const WearableHeroWithCTA = () => {
@@ -83,7 +84,10 @@ const WearableHeroWithCTA = () => {
               transition={{ duration: 0.8, delay: 0.3 }}
               className="flex flex-col sm:flex-row gap-4"
             >
-              <ShimmerButton className="text-lg px-8 py-4">
+              <ShimmerButton
+                className="text-lg px-8 py-4"
+                onClick={() => navigateTo("/start-a-project")}
+              >
                 <div className="inline-flex items-center gap-2">
                   <Watch className="w-5 h-5 flex-shrink-0" />
                   <span>Discover Wearable Solutions</span>
@@ -94,7 +98,7 @@ const WearableHeroWithCTA = () => {
                 className="inline-flex items-center justify-center gap-2 rounded-md bg-gray-800 px-8 py-4 text-lg font-medium text-white transition hover:bg-gray-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-700 whitespace-nowrap"
               >
                 <MessageSquare className="w-4 h-4 flex-shrink-0" />
-                <span>Request a Device App Consultation</span>
+                <span>Request Consultation</span>
               </a>
             </motion.div>
           </motion.div>
@@ -1227,7 +1231,10 @@ const WearableInlineCTA = () => {
               ecosystems.
             </p>
 
-            <ShimmerButton className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl">
+            <ShimmerButton
+              className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl"
+              onClick={() => navigateTo("/start-a-project")}
+            >
               <div className="inline-flex items-center gap-3">
                 <Lightbulb className="w-6 h-6 flex-shrink-0" />
                 <span>Discuss Your Wearable/IoT Idea</span>
@@ -1363,7 +1370,10 @@ const WearableFinalCTA = () => {
             viewport={{ once: true }}
             className="space-y-8"
           >
-            <ShimmerButton className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25">
+            <ShimmerButton
+              className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25"
+              onClick={() => navigateTo("/start-a-project")}
+            >
               <div className="inline-flex items-center gap-3">
                 <Rocket className="w-6 h-6 flex-shrink-0" />
                 <span>Start Your Wearable/IoT Project</span>

pages/WebCloudServices.tsx

@@ -115,7 +115,8 @@ const HeroWithCTA = () => {
             >
               <ShimmerButton
                 className="text-lg px-8 py-4"
-                onClick={() => navigateTo("/contact/schedule-a-discovery-call")}
+                // onClick={() => navigateTo("/contact/schedule-a-discovery-call")}
+                onClick={() => navigateTo("/start-a-project")}
               >
                 <div className="inline-flex items-center gap-2">
                   <Calendar className="w-4 h-4 flex-shrink-0" />
@@ -537,7 +538,8 @@ const InlineCTA = () => {
             <div className="flex flex-col items-center gap-4">
               <ShimmerButton
                 className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl bg-[#E5195E] hover:bg-[#E5195E]/90"
-                onClick={() => navigateTo("/contact/schedule-a-discovery-call")}
+                // onClick={() => navigateTo("/contact/schedule-a-discovery-call")}
+                onClick={() => navigateTo("/start-a-project")}
               >
                 <div className="inline-flex items-center gap-3">
                   <Cloud className="w-6 h-6 flex-shrink-0" />

pages/iOSAppDevelopment.tsx

@@ -90,7 +90,10 @@ const IOSHeroWithCTA = () => {
               transition={{ duration: 0.8, delay: 0.3 }}
               className="flex flex-col sm:flex-row gap-4"
             >
-              <ShimmerButton className="text-lg px-8 py-4">
+              <ShimmerButton
+                className="text-lg px-8 py-4"
+                onClick={() => navigateTo("/start-a-project")}
+              >
                 <div className="inline-flex items-center gap-2">
                   <svg
                     className="w-6 h-4 flex-shrink-0"
@@ -1068,7 +1071,10 @@ export const IOSAppDevelopment = () => {
               delight users and drive business success.
             </p>
             <div className="flex flex-col sm:flex-row gap-6 justify-center">
-              <ShimmerButton className="text-lg px-8 py-4 h-[56px]">
+              <ShimmerButton
+                className="text-lg px-8 py-4 h-[56px]"
+                onClick={() => navigateTo("/start-a-project")}
+              >
                 <div className="inline-flex items-center gap-2">
                   <Apple className="w-5 h-5 flex-shrink-0" />
                   <span>Start Your iOS Project</span>