testing meta tags

components/Footer.tsx

@@ -97,7 +97,7 @@ const socialLinks = [
   {
     name: "LinkedIn",
     icon: Linkedin,
-    url: "https://linkedin.com/company/wdi",
+    url: "https://www.linkedin.com/in/website-developers-india/",
   },
   {
     name: "Twitter",

index.html

@@ -6,12 +6,12 @@
   <link rel="icon" type="image/svg+xml" href="/vite.svg" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>WDI - Web Development & AI Solutions</title>
-  <meta name="description"
+  
-    content="Leading web development and AI solutions provider. Custom software development, mobile apps, and digital transformation services." />
-
   <!-- Preload Google Fonts -->
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <!-- <meta name="description"
+    content="Leading web development and AI solutions provider. Custom software development, mobile apps, and digital transformation services." /> -->
 
   <!-- SEO Meta Tags -->
   <meta property="og:title" content="WDI - Web Development & AI Solutions" />
@@ -21,8 +21,8 @@
   <meta property="og:url" content="https://wdi.com" />
   <meta name="twitter:card" content="summary_large_image" />
   <meta name="twitter:title" content="WDI - Web Development & AI Solutions" />
-  <meta name="twitter:description"
+  <!-- <meta name="twitter:description"
-    content="Leading web development and AI solutions provider. Custom software development, mobile apps, and digital transformation services." />
+    content="Leading web development and AI solutions provider. Custom software development, mobile apps, and digital transformation services." /> -->
 
   <!-- Google tag (gtag.js) -->
 

main.tsx

@@ -5,11 +5,14 @@ import './styles/globals.css'
 import { Provider } from 'react-redux'
 import store from './src/store/Store.tsx'
 import { BrowserRouter } from 'react-router-dom'
+import { HelmetProvider } from 'react-helmet-async'
 
 createRoot(document.getElementById('root')!).render(
  <Provider store={store}>
      <BrowserRouter>
-      <App />
+       <HelmetProvider> 
+          <App />
+        </HelmetProvider>
     </BrowserRouter>
   </Provider>,
 )

package-lock.json

@@ -49,6 +49,7 @@
         "react-dnd": "^16.0.1",
         "react-dnd-html5-backend": "^16.0.1",
         "react-dom": "^18.3.1",
+        "react-helmet-async": "^2.0.5",
         "react-hook-form": "^7.55.0",
         "react-redux": "^9.2.0",
         "react-resizable-panels": "^2.1.9",
@@ -5105,6 +5106,15 @@
         "node": ">=12"
       }
     },
+    "node_modules/invariant": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
+      "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "node_modules/is-extglob": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
@@ -6055,6 +6065,26 @@
         "react": "^18.3.1"
       }
     },
+    "node_modules/react-fast-compare": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz",
+      "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==",
+      "license": "MIT"
+    },
+    "node_modules/react-helmet-async": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/react-helmet-async/-/react-helmet-async-2.0.5.tgz",
+      "integrity": "sha512-rYUYHeus+i27MvFE+Jaa4WsyBKGkL6qVgbJvSBoX8mbsWoABJXdEO0bZyi0F6i+4f0NuIb8AvqPMj3iXFHkMwg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "invariant": "^2.2.4",
+        "react-fast-compare": "^3.2.2",
+        "shallowequal": "^1.1.0"
+      },
+      "peerDependencies": {
+        "react": "^16.6.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/react-hook-form": {
       "version": "7.60.0",
       "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.60.0.tgz",
@@ -6492,6 +6522,12 @@
       "integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==",
       "license": "MIT"
     },
+    "node_modules/shallowequal": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
+      "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==",
+      "license": "MIT"
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",

package.json

@@ -51,6 +51,7 @@
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
     "react-dom": "^18.3.1",
+    "react-helmet-async": "^2.0.5",
     "react-hook-form": "^7.55.0",
     "react-redux": "^9.2.0",
     "react-resizable-panels": "^2.1.9",

pages/Services.tsx

@@ -1,31 +1,84 @@
-import React from "react";
 import { motion } from "framer-motion";
-import { Navigation } from "../components/Navigation";
+import {
-import { Footer } from "../components/Footer";
+  Bot,
-import { ProcessSection } from "../components/ProcessSection";
+  Brain,
-import { FAQSection } from "../components/FAQSection";
+  Calendar,
-import { AnimatedGradientText } from "../components/AnimatedGradientText";
+  CheckCircle,
-import { Button } from "../components/ui/button";
+  ChevronRight,
-import { ShimmerButton } from "../components/ui/shimmer-button";
+  Code,
-import { Badge } from "../components/ui/badge";
+  Eye,
-import { Card, CardContent } from "../components/ui/card";
+  Globe,
-import { GridPattern } from "../components/GridPattern";
+  Lightbulb,
-import { navigateTo } from "../App";
+  Palette,
-import { 
+  Rocket,
-  Smartphone, Globe, Code, Palette, Brain, Target, Users, Star, 
+  Server,
-  ArrowRight, ChevronRight, Clock, TrendingUp, Layers, 
+  Smartphone,
-  Layout, Rocket, Monitor, Lock, RefreshCcw, ShieldCheck,
+  TrendingUp,
-  MessageSquare, Heart, CheckCircle, Lightbulb, Coffee, 
+  Users
-  Download, Calendar, Camera, Music, Gamepad2,
-  CreditCard, Bell, Mail, Search, Home, MapPin, 
-  Github, Slack, Figma, Chrome, Zap as ZapIcon, Video, MessageCircle,
-  Cog, Settings, Sparkles, Handshake, Eye, Award, UserPlus, Bot, Server, Database
 } 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 { Button } from "../components/ui/button";
+import { Card, CardContent } from "../components/ui/card";
+import { ShimmerButton } from "../components/ui/shimmer-button";
+import { Helmet } from "react-helmet-async";
 
 // Enhanced Hero Section
 const HeroWithCTA = () => {
   return (
     <section className="relative py-20 overflow-hidden bg-black">
+      <Helmet>
+        {/* Page Title and Meta Description */}
+        <title>Get Expert Digital Services Today | WDI Game-Changing Solutions</title>
+        <meta
+          name="description"
+          content="Get the powerful digital solutions your brand needs to thrive. WDI’s proven services make growth faster and easier than ever before."
+        />
+
+        {/* Canonical Link */}
+        <link rel="canonical" href="https://www.wdipl.com/services" />
+
+        {/* Open Graph Tags (for Facebook, LinkedIn) */}
+        <meta property="og:title" content="Get Expert Digital Services Today | WDI Game-Changing Solutions" />
+        <meta
+          property="og:description"
+          content="Get the powerful digital solutions your brand needs to thrive. WDI’s proven services make growth faster and easier than ever before."
+        />
+        <meta property="og:url" content="https://www.wdipl.com/services" />
+        <meta property="og:type" content="website" />
+        <meta property="og:image" content="https://www.wdipl.com/your-preview-image.jpg" />
+
+        {/* Twitter Card Tags */}
+        <meta name="twitter:card" content="summary_large_image" />
+        <meta name="twitter:title" content="Get Expert Digital Services Today | WDI Game-Changing Solutions" />
+        <meta
+          name="twitter:description"
+          content="Get the powerful digital solutions your brand needs to thrive. WDI’s proven services make growth faster and easier than ever before."
+        />
+        <meta name="twitter:image" content="https://www.wdipl.com/your-preview-image.jpg" />
+
+        {/* Social Profiles (using JSON-LD Schema) */}
+        <script type="application/ld+json">
+          {`
+            {
+              "@context": "https://schema.org",
+              "@type": "Organization",
+              "name": "WDI",
+              "url": "https://www.wdipl.com",
+              "sameAs": [
+                "https://www.facebook.com/wdideas",
+                "https://www.linkedin.com/in/website-developers-india/",
+                "https://www.instagram.com/wdipl/"
+              ]
+            }
+          `}
+        </script>
+      </Helmet>
+
+
       <div className="container mx-auto px-6 lg:px-8">
         <div className="grid lg:grid-cols-2 gap-16 items-center min-h-[90vh]">
           <motion.div
@@ -50,12 +103,12 @@ const HeroWithCTA = () => {
                 <span className="text-[#E5195E]">Digital Solutions</span>
                 <span className="text-white"> for Modern Business</span>
               </h1>
-              
+
               <p className="text-lg text-gray-300 leading-relaxed max-w-lg">
                 From mobile apps to AI solutions, we deliver end-to-end digital services that transform ideas into powerful business solutions.
               </p>
             </div>
-            
+
             {/* CTAs */}
             <motion.div
               initial={{ opacity: 0, y: 20 }}
@@ -63,7 +116,10 @@ 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,7 +128,7 @@ const HeroWithCTA = () => {
               <Button
                 variant="secondary"
                 size="lg"
-                className="text-lg px-8 py-4"
+                className="text-lg px-8 py-4 h-auto"
                 onClick={() => navigateTo('/case-studies')}
               >
                 <Eye className="w-4 h-4 flex-shrink-0" />
@@ -80,7 +136,7 @@ const HeroWithCTA = () => {
               </Button>
             </motion.div>
           </motion.div>
-          
+
           {/* Right side with stats */}
           <motion.div
             initial={{ opacity: 0, x: 50 }}
@@ -98,17 +154,17 @@ const HeroWithCTA = () => {
                 <div className="text-3xl lg:text-4xl font-bold text-white">500+</div>
                 <div className="text-sm text-gray-400 leading-tight">Projects Delivered</div>
               </div>
-              
+
               <div className="space-y-2 flex flex-col items-center">
                 <div className="text-3xl lg:text-4xl font-bold text-white">50+</div>
                 <div className="text-sm text-gray-400 leading-tight">Service Offerings</div>
               </div>
-              
+
               <div className="space-y-2 flex flex-col items-center">
                 <div className="text-3xl lg:text-4xl font-bold text-white">98%</div>
                 <div className="text-sm text-gray-400 leading-tight">Client Satisfaction</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-sm text-gray-400 leading-tight">Support Available</div>
@@ -150,7 +206,7 @@ const HorizontalTagScroller = () => {
             Comprehensive digital services covering every aspect of modern technology solutions.
           </p>
         </motion.div>
-        
+
         <motion.div
           initial={{ opacity: 0, y: 40 }}
           whileInView={{ opacity: 1, y: 0 }}
@@ -160,7 +216,7 @@ const HorizontalTagScroller = () => {
         >
           <div className="absolute left-0 top-0 bottom-0 w-20 bg-gradient-to-r from-card to-transparent z-10 pointer-events-none"></div>
           <div className="absolute right-0 top-0 bottom-0 w-20 bg-gradient-to-l from-card to-transparent z-10 pointer-events-none"></div>
-          
+
           <div className="flex animate-marquee hover:animate-marquee-paused">
             {/* First set */}
             {categories.map((category, index) => {
@@ -187,7 +243,7 @@ const HorizontalTagScroller = () => {
                 </motion.div>
               );
             })}
-            
+
             {/* Second and third sets for seamless loop */}
             {[...categories, ...categories].map((category, index) => {
               const IconComponent = category.icon;
@@ -229,7 +285,7 @@ const SideBySideContentWithIcons = () => {
       icon: Brain
     },
     {
-      id: "quality", 
+      id: "quality",
       title: "Quality Assurance",
       icon: CheckCircle
     },
@@ -265,7 +321,7 @@ const SideBySideContentWithIcons = () => {
             <span className="text-[#E5195E]">WDI</span>
             <span className="text-white"> Services</span>
           </h2>
-          
+
           <p className="text-xl text-gray-300 leading-relaxed">
             Delivering excellence in every project with proven expertise and innovation.
           </p>
@@ -296,7 +352,7 @@ const SideBySideContentWithIcons = () => {
                     <div className="mb-6">
                       <IconComponent className="w-10 h-10 text-accent mx-auto" />
                     </div>
-                    
+
                     <h3 className="text-lg font-semibold text-white leading-tight">
                       {advantage.title}
                     </h3>
@@ -321,7 +377,7 @@ const TabbedServiceDisplay = () => {
       link: "/services/mobile-app-development"
     },
     {
-      title: "Web & Cloud Solutions", 
+      title: "Web & Cloud Solutions",
       icon: Globe,
       description: "Scalable web applications and cloud infrastructure solutions.",
       link: "/web-cloud"
@@ -369,7 +425,7 @@ const TabbedServiceDisplay = () => {
             End-to-end digital solutions designed to accelerate your business growth and digital transformation.
           </p>
         </motion.div>
-        
+
         <motion.div
           initial={{ opacity: 0, y: 40 }}
           whileInView={{ opacity: 1, y: 0 }}
@@ -395,7 +451,7 @@ const TabbedServiceDisplay = () => {
                     <div className="w-12 h-12 bg-accent/20 rounded-lg flex items-center justify-center">
                       <IconComponent className="w-6 h-6 text-accent" />
                     </div>
-                    
+
                     <div>
                       <h3 className="text-xl font-semibold text-white mb-4">
                         {service.title}
@@ -404,7 +460,7 @@ const TabbedServiceDisplay = () => {
                         {service.description}
                       </p>
                     </div>
-                    
+
                     <div className="flex items-center gap-2 text-accent font-medium">
                       <span>Explore Services</span>
                       <ChevronRight className="w-4 h-4" />
@@ -448,21 +504,21 @@ const InlineCTA = () => {
                 </div>
               </div>
             </div>
-            
+
             {/* Main Heading */}
             <h2 className="text-3xl lg:text-4xl font-semibold leading-tight">
               <span className="text-white">Transform Your Business with </span>
               <span className="text-[#E5195E]">Expert Digital Services</span>
             </h2>
-            
+
             {/* Subtitle */}
             <p className="text-xl text-gray-300 leading-relaxed max-w-2xl">
               From concept to deployment, we deliver comprehensive digital solutions that drive growth and innovation.
             </p>
-            
+
             {/* CTA Button */}
             <div className="flex flex-col items-start gap-4">
-              <ShimmerButton 
+              <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')}
               >
@@ -471,7 +527,7 @@ const InlineCTA = () => {
                   <span>Start Your Project</span>
                 </div>
               </ShimmerButton>
-              
+
               {/* Small benefit text */}
               <p className="text-sm text-gray-400">
                 Free consultation • Project roadmap • Technical guidance
@@ -518,7 +574,7 @@ export function Services() {
       <TabbedServiceDisplay />
       <ProcessSection />
       <InlineCTA />
-      <FAQSection 
+      <FAQSection
         title="Services Questions"
         subtitle="Get answers to common questions about our comprehensive service offerings."
         faqs={servicesFAQs}