WDIPL/Wdipl-react
2
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

testing meta tags

Browse Source
This commit is contained in:
priyanshuvish
2025-07-22 17:47:37 +05:30
parent 07c8fe0b72
commit 3a7908a857
6 changed files with 148 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

146
pages/Services.tsx
View File

@@ -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,
ArrowRight, ChevronRight, Clock, TrendingUp, Layers,
Layout, Rocket, Monitor, Lock, RefreshCcw, ShieldCheck,
MessageSquare, Heart, CheckCircle, Lightbulb, Coffee,
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
import {
Bot,
Brain,
Calendar,
CheckCircle,
ChevronRight,
Code,
Eye,
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
@@ -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}