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 { 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 {
-  Smartphone, Globe, Code, Palette, Brain, Target, Users, Star, 
+  Bot,
-  ArrowRight, ChevronRight, Clock, TrendingUp, Layers, 
+  Brain,
-  Layout, Rocket, Monitor, Lock, RefreshCcw, ShieldCheck,
+  Calendar,
-  MessageSquare, Heart, CheckCircle, Lightbulb, Coffee, 
+  CheckCircle,
-  Download, Calendar, Camera, Music, Gamepad2,
+  ChevronRight,
-  CreditCard, Bell, Mail, Search, Home, MapPin, 
+  Code,
-  Github, Slack, Figma, Chrome, Zap as ZapIcon, Video, MessageCircle,
+  Eye,
-  Cog, Settings, Sparkles, Handshake, Eye, Award, UserPlus, Bot, Server, Database
+  Globe,
+  Lightbulb,
+  Palette,
+  Rocket,
+  Server,
+  Smartphone,
+  TrendingUp,
+  Users
 } 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
@@ -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" />