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

meta tags added in all pages

Browse Source
This commit is contained in:
priyanshuvish
2025-07-23 18:53:54 +05:30
parent 08f05dab2c
commit cd8d88b4dd
69 changed files with 3743 additions and 519 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
pages/AIAutomationWorkflows.tsx
View File

@@ -46,11 +46,59 @@ 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 { Helmet } from "react-helmet-async";
// AI Automation & Workflows Hero Section
const AutomationHeroWithCTA = () => {
return (
<section className="relative py-20 overflow-hidden bg-black">
<Helmet>
{/* Page Title and Meta Description */}
<title>AI Automation | Smart AI-Powered Workflows by WDI</title>
<meta
name="description"
content="Streamline your operations with WDI’s AI automation workflows. Enhance efficiency, reduce cost, and drive results using smart, scalable AI solutions."
/>
{/* Canonical Link */}
<link rel="canonical" href="https://www.wdipl.com/services" />
{/* Open Graph Tags (for Facebook, LinkedIn) */}
<meta property="og:title" content="AI Automation | Smart AI-Powered Workflows by WDI" />
<meta
property="og:description"
content="Streamline your operations with WDI’s AI automation workflows. Enhance efficiency, reduce cost, and drive results using smart, scalable AI solutions."
/>
<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="AI Automation | Smart AI-Powered Workflows by WDI" />
<meta
name="twitter:description"
content="Streamline your operations with WDI’s AI automation workflows. Enhance efficiency, reduce cost, and drive results using smart, scalable AI solutions."
/>
<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

48
pages/AIChatbotsVirtualAssistants.tsx
View File

@@ -44,11 +44,59 @@ 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 { Helmet } from "react-helmet-async";
// AI Chatbots & Virtual Assistants Hero Section
const ChatbotsHeroWithCTA = () => {
return (
<section className="relative py-20 overflow-hidden bg-black">
<Helmet>
{/* Page Title and Meta Description */}
<title>AI Chatbots & Virtual Assistants | Conversational AI | WDI</title>
<meta
name="description"
content="WDI builds conversational AI solutions, from intelligent chatbots to virtual assistants, enabling automated customer support and natural interactions."
/>
{/* Canonical Link */}
<link rel="canonical" href="https://www.wdipl.com/services" />
{/* Open Graph Tags (for Facebook, LinkedIn) */}
<meta property="og:title" content="AI Chatbots & Virtual Assistants | Conversational AI | WDI" />
<meta
property="og:description"
content="WDI builds conversational AI solutions, from intelligent chatbots to virtual assistants, enabling automated customer support and natural interactions."
/>
<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="AI Chatbots & Virtual Assistants | Conversational AI | WDI" />
<meta
name="twitter:description"
content="WDI builds conversational AI solutions, from intelligent chatbots to virtual assistants, enabling automated customer support and natural interactions."
/>
<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

48
pages/AIIntegrationDigitalProducts.tsx
View File

@@ -42,11 +42,59 @@ 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 { Helmet } from "react-helmet-async";
// AI Integration Hero Section
const AIIntegrationHeroWithCTA = () => {
return (
<section className="relative py-20 overflow-hidden bg-black">
<Helmet>
{/* Page Title and Meta Description */}
<title>AI Integration | Smarter Digital Products with AI | WDI</title>
<meta
name="description"
content="WDI helps businesses enhance digital products with seamless AI integration. Improve UX, automation, and decision-making across platforms."
/>
{/* Canonical Link */}
<link rel="canonical" href="https://www.wdipl.com/services" />
{/* Open Graph Tags (for Facebook, LinkedIn) */}
<meta property="og:title" content="AI Integration | Smarter Digital Products with AI | WDI" />
<meta
property="og:description"
content="WDI helps businesses enhance digital products with seamless AI integration. Improve UX, automation, and decision-making across platforms."
/>
<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="AI Integration | Smarter Digital Products with AI | WDI" />
<meta
name="twitter:description"
content="WDI helps businesses enhance digital products with seamless AI integration. Improve UX, automation, and decision-making across platforms."
/>
<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

48
pages/AIModelDeploymentMLOps.tsx
View File

@@ -44,11 +44,59 @@ 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 { Helmet } from "react-helmet-async";
// AI Model Deployment & MLOps Hero Section
const MLOpsHeroWithCTA = () => {
return (
<section className="relative py-20 overflow-hidden bg-black">
<Helmet>
{/* Page Title and Meta Description */}
<title>AI Model Deployment | Strategic MLOps Services | WDI</title>
<meta
name="description"
content="WDI delivers robust MLOps for scalable AI model deployment. Ensure performance, security, and lifecycle management with enterprise-grade processes."
/>
{/* Canonical Link */}
<link rel="canonical" href="https://www.wdipl.com/services" />
{/* Open Graph Tags (for Facebook, LinkedIn) */}
<meta property="og:title" content="AI Model Deployment | Strategic MLOps Services | WDI" />
<meta
property="og:description"
content="WDI delivers robust MLOps for scalable AI model deployment. Ensure performance, security, and lifecycle management with enterprise-grade processes."
/>
<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="AI Model Deployment | Strategic MLOps Services | WDI" />
<meta
name="twitter:description"
content="WDI delivers robust MLOps for scalable AI model deployment. Ensure performance, security, and lifecycle management with enterprise-grade processes."
/>
<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

48
pages/AIStrategyConsulting.tsx
View File

@@ -33,11 +33,59 @@ 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 { Helmet } from "react-helmet-async";
// AI Strategy & Consulting Hero Section
const AIStrategyHeroWithCTA = () => {
return (
<section className="relative py-20 overflow-hidden bg-black">
<Helmet>
{/* Page Title and Meta Description */}
<title>AI Strategy Consulting | Enterprise AI Roadmap | WDI</title>
<meta
name="description"
content="WDI’s phased AI strategy consulting helps you adopt intelligent technologies with clarity, scalability, and long-term business transformation goals."
/>
{/* Canonical Link */}
<link rel="canonical" href="https://www.wdipl.com/services" />
{/* Open Graph Tags (for Facebook, LinkedIn) */}
<meta property="og:title" content="AI Strategy Consulting | Enterprise AI Roadmap | WDI" />
<meta
property="og:description"
content="WDI’s phased AI strategy consulting helps you adopt intelligent technologies with clarity, scalability, and long-term business transformation goals."
/>
<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="AI Strategy Consulting | Enterprise AI Roadmap | WDI" />
<meta
name="twitter:description"
content="WDI’s phased AI strategy consulting helps you adopt intelligent technologies with clarity, scalability, and long-term business transformation goals."
/>
<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

48
pages/APIBackendDevelopment.tsx
View File

@@ -46,11 +46,59 @@ 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";
import { Helmet } from "react-helmet-async";
// API & Backend Development Hero Section
const APIHeroWithCTA = () => {
return (
<section className="relative py-20 overflow-hidden bg-black">
<Helmet>
{/* Page Title and Meta Description */}
<title>API & Backend Development Services | Reliable Solutions by WDI</title>
<meta
name="description"
content="WDI provides robust API & backend development services, delivering secure, scalable, and high-performance solutions tailored to power your business applications."
/>
{/* Canonical Link */}
<link rel="canonical" href="https://www.wdipl.com/services" />
{/* Open Graph Tags (for Facebook, LinkedIn) */}
<meta property="og:title" content="API & Backend Development Services | Reliable Solutions by WDI" />
<meta
property="og:description"
content="WDI provides robust API & backend development services, delivering secure, scalable, and high-performance solutions tailored to power your business applications."
/>
<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="API & Backend Development Services | Reliable Solutions by WDI" />
<meta
name="twitter:description"
content="WDI provides robust API & backend development services, delivering secure, scalable, and high-performance solutions tailored to power your business applications."
/>
<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

48
pages/AdminPanelsDashboards.tsx
View File

@@ -46,11 +46,59 @@ 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";
import { Helmet } from "react-helmet-async";
// Admin Panels & Dashboards Hero Section
const AdminHeroWithCTA = () => {
return (
<section className="relative py-20 overflow-hidden bg-black">
<Helmet>
{/* Page Title and Meta Description */}
<title>Admin Panels & Dashboards Development | Custom Solutions by WDI</title>
<meta
name="description"
content="WDI builds custom Admin Panels & Dashboards that offer real-time insights, smooth control, and secure access for managing your digital platforms."
/>
{/* Canonical Link */}
<link rel="canonical" href="https://www.wdipl.com/services" />
{/* Open Graph Tags (for Facebook, LinkedIn) */}
<meta property="og:title" content="Admin Panels & Dashboards Development | Custom Solutions by WDI" />
<meta
property="og:description"
content="WDI builds custom Admin Panels & Dashboards that offer real-time insights, smooth control, and secure access for managing your digital platforms."
/>
<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="Admin Panels & Dashboards Development | Custom Solutions by WDI" />
<meta
name="twitter:description"
content="WDI builds custom Admin Panels & Dashboards that offer real-time insights, smooth control, and secure access for managing your digital platforms."
/>
<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

82
pages/AgriTechPlatforms.tsx
View File

@@ -10,16 +10,64 @@ import { SplitCallToAction } from "../components/SplitCallToAction";
import { Card, CardContent } from "../components/ui/card";
import { Badge } from "../components/ui/badge";
import { Button } from "../components/ui/button";
import {
Sprout, CloudRain, BarChart3, Thermometer, Eye,
Database, Bot, Target, CheckCircle, Star,
import {
Sprout, CloudRain, BarChart3, Thermometer, Eye,
Database, Bot, Target, CheckCircle, Star,
Zap, Shield, Globe, Award, Satellite
} from "lucide-react";
import { Helmet } from "react-helmet-async";
// Problem Solution Block Component
const ProblemSolutionBlock = () => {
return (
<section className="py-20 bg-[#0E0E0E]">
<Helmet>
{/* Page Title and Meta Description */}
<title>AgriTech Platform Development Services | WDI</title>
<meta
name="description"
content="WDI builds custom AgriTech Platforms that empower farmers and agribusinesses with smart, data-driven tools to enhance productivity, sustainability, and growth."
/>
{/* Canonical Link */}
<link rel="canonical" href="https://www.wdipl.com/services" />
{/* Open Graph Tags (for Facebook, LinkedIn) */}
<meta property="og:title" content="AgriTech Platform Development Services | WDI" />
<meta
property="og:description"
content="WDI builds custom AgriTech Platforms that empower farmers and agribusinesses with smart, data-driven tools to enhance productivity, sustainability, and growth."
/>
<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="AgriTech Platform Development Services | WDI" />
<meta
name="twitter:description"
content="WDI builds custom AgriTech Platforms that empower farmers and agribusinesses with smart, data-driven tools to enhance productivity, sustainability, and growth."
/>
<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">
<motion.div
initial={{ opacity: 0, y: 30 }}
@@ -32,7 +80,7 @@ const ProblemSolutionBlock = () => {
<span className="text-white">Addressing the Core Challenges of </span>
<span className="text-[#E5195E]">AgriTech Platforms</span>
</h2>
<div className="grid lg:grid-cols-2 gap-12 items-center">
<motion.div
initial={{ opacity: 0, x: -30 }}
@@ -53,7 +101,7 @@ const ProblemSolutionBlock = () => {
</p>
</div>
</motion.div>
<motion.div
initial={{ opacity: 0, x: 30 }}
whileInView={{ opacity: 1, x: 0 }}
@@ -137,7 +185,7 @@ const IconWithDescriptionGrid = () => {
Comprehensive tools to create intelligent agricultural solutions that maximize yields and promote sustainability.
</p>
</motion.div>
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
{features.map((feature, index) => {
const IconComponent = feature.icon;
@@ -214,7 +262,7 @@ const ThreeColumnFeatureBlock = () => {
Leverage our expertise to create agricultural technology solutions that truly transform farming operations.
</p>
</motion.div>
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
{advantages.map((advantage, index) => {
const IconComponent = advantage.icon;
@@ -281,7 +329,7 @@ const CaseStudyHighlightGrid = () => {
Real results from our AgriTech platform implementations that transformed agricultural operations.
</p>
</motion.div>
<div className="grid lg:grid-cols-2 gap-8">
{caseStudies.map((study, index) => (
<motion.div
@@ -355,7 +403,7 @@ export const AgriTechPlatforms = () => {
return (
<div className="min-h-screen bg-[#0E0E0E]">
<Navigation />
<HeroBanner
category="Industrial & Emerging Tech"
title="AgriTech Platforms"
@@ -372,29 +420,29 @@ export const AgriTechPlatforms = () => {
/>
<ProblemSolutionBlock />
<IconWithDescriptionGrid />
<ThreeColumnFeatureBlock />
<div className="bg-[#0E0E0E]">
<ProcessSection />
</div>
<CaseStudyHighlightGrid />
<div className="bg-[#0E0E0E]">
<FAQSection
<FAQSection
title="AgriTech Platform FAQs"
subtitle="Get answers to common questions about our agricultural technology development services."
faqs={agriTechFAQs}
/>
</div>
<div className="bg-black">
<SplitCallToAction />
</div>
<Footer />
</div>
);

58
pages/AndroidAppDevelopment.tsx
View File

@@ -40,11 +40,59 @@ 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";
import { Helmet } from "react-helmet-async";
// Android Hero Section with Android device mockups and Android vector
const AndroidHeroWithCTA = () => {
return (
<section className="relative py-20 overflow-hidden bg-black">
<Helmet>
{/* Page Title and Meta Description */}
<title>Android App Development by WDI | Boost Your Mobile Presence Today</title>
<meta
name="description"
content="WDI delivers custom Android app development with innovative, high-performance solutions designed to accelerate your business growth and engagement."
/>
{/* Canonical Link */}
<link rel="canonical" href="https://www.wdipl.com/services" />
{/* Open Graph Tags (for Facebook, LinkedIn) */}
<meta property="og:title" content="Android App Development by WDI | Boost Your Mobile Presence Today" />
<meta
property="og:description"
content="WDI delivers custom Android app development with innovative, high-performance solutions designed to accelerate your business growth and engagement."
/>
<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="Android App Development by WDI | Boost Your Mobile Presence Today" />
<meta
name="twitter:description"
content="WDI delivers custom Android app development with innovative, high-performance solutions designed to accelerate your business growth and engagement."
/>
<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
@@ -502,14 +550,12 @@ const AndroidProcessTimeline = () => {
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`}
className={`flex-1 ${isEven ? "lg:text-right" : "lg:text-left"
} text-center lg:text-left`}
>
<div className="bg-gray-900/50 backdrop-blur-md rounded-2xl border border-gray-800 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">

48
pages/Blog.tsx
View File

@@ -21,6 +21,7 @@ import {
BookOpen,
} from "lucide-react";
import { navigateTo } from "../App";
import { Helmet } from "react-helmet-async";
export const Blog = () => {
const [searchTerm, setSearchTerm] = useState("");
@@ -191,6 +192,53 @@ export const Blog = () => {
{/* Hero Section */}
<section className="pt-24 pb-16 bg-background">
<Helmet>
{/* Page Title and Meta Description */}
<title>Blogs | Thought Leadership in Software Development</title>
<meta
name="description"
content="Read expert blogs from WDI on software development and digital transformation. Stay informed with insights, trends, and thought leadership content."
/>
{/* Canonical Link */}
<link rel="canonical" href="https://www.wdipl.com/services" />
{/* Open Graph Tags (for Facebook, LinkedIn) */}
<meta property="og:title" content="Blogs | Thought Leadership in Software Development" />
<meta
property="og:description"
content="Read expert blogs from WDI on software development and digital transformation. Stay informed with insights, trends, and thought leadership content."
/>
<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="Blogs | Thought Leadership in Software Development" />
<meta
name="twitter:description"
content="Read expert blogs from WDI on software development and digital transformation. Stay informed with insights, trends, and thought leadership content."
/>
<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="max-w-4xl mx-auto text-center">
<div className="flex items-center justify-center gap-2 mb-6">

74
pages/CaseStudies.tsx
View File

@@ -7,8 +7,8 @@ import { Button } from "../components/ui/button";
import { Badge } from "../components/ui/badge";
import { Input } from "../components/ui/input";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../components/ui/select";
import {
Search, Filter, ArrowRight, ExternalLink, Clock, Users, TrendingUp,
import {
Search, Filter, ArrowRight, ExternalLink, Clock, Users, TrendingUp,
Star, Award, Building2, Smartphone, Heart, ShoppingCart, GraduationCap,
FileText, ArrowUpRight
} from "lucide-react";
@@ -22,6 +22,7 @@ import wokasideawardLocalImage from '../src/images/woka-side-award.webp';
import traderCircuitLocalImage from '../src/images/traders-circuit.webp';
import goodTimesLocalImage from '../src/images/goodtimes.webp';
import prospertyLocalImage from '../src/images/prosperty.webp';
import { Helmet } from "react-helmet-async";
// High-quality project images
@@ -225,9 +226,9 @@ export const CaseStudies = () => {
// Filter case studies based on search and filters
const filteredCaseStudies = caseStudies.filter(study => {
const matchesSearch = study.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
study.description.toLowerCase().includes(searchTerm.toLowerCase()) ||
study.technologies.some(tech => tech.toLowerCase().includes(searchTerm.toLowerCase()));
study.description.toLowerCase().includes(searchTerm.toLowerCase()) ||
study.technologies.some(tech => tech.toLowerCase().includes(searchTerm.toLowerCase()));
const matchesIndustry = selectedIndustry === "All Industries" || study.industry === selectedIndustry;
const matchesCategory = selectedCategory === "All Categories" || study.category === selectedCategory;
const matchesFeatured = !showFeaturedOnly || study.featured;
@@ -238,12 +239,59 @@ export const CaseStudies = () => {
return (
<div className="dark min-h-screen bg-background">
<Navigation />
{/* Hero Section */}
<section className="relative pt-24 pb-20 overflow-hidden bg-black">
<Helmet>
{/* Page Title and Meta Description */}
<title>Case Studies | AI Web Development Projects by WDI</title>
<meta
name="description"
content="Explore real-world AI web development case studies from WDI. See how we help enterprises and startups create scalable, smart digital solutions."
/>
{/* Canonical Link */}
<link rel="canonical" href="https://www.wdipl.com/services" />
{/* Open Graph Tags (for Facebook, LinkedIn) */}
<meta property="og:title" content="Case Studies | AI Web Development Projects by WDI" />
<meta
property="og:description"
content="Explore real-world AI web development case studies from WDI. See how we help enterprises and startups create scalable, smart digital solutions."
/>
<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="Case Studies | AI Web Development Projects by WDI" />
<meta
name="twitter:description"
content="Explore real-world AI web development case studies from WDI. See how we help enterprises and startups create scalable, smart digital solutions."
/>
<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="absolute inset-0 bg-gradient-to-br from-accent/5 via-background to-background" />
<motion.div
<motion.div
initial={{ opacity: 0, y: 30 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8 }}
@@ -362,7 +410,7 @@ export const CaseStudies = () => {
className="w-full h-48 object-cover transition-transform duration-500 group-hover:scale-110"
/>
<div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent" />
{/* Category Badge */}
<div className="absolute top-4 left-4">
<Badge className="bg-accent/90 text-white border-0">
@@ -455,8 +503,8 @@ export const CaseStudies = () => {
)}
{/* CTA Button */}
<Button
variant="ghost"
<Button
variant="ghost"
className="w-full justify-between text-accent hover:text-accent hover:bg-accent/10 group-hover:translate-x-1 transition-all duration-300 mt-auto"
onClick={(e) => {
e.stopPropagation();
@@ -494,7 +542,7 @@ export const CaseStudies = () => {
Join the ranks of industry leaders who have transformed their businesses with our innovative solutions.
</p>
<div className="flex flex-col sm:flex-row gap-4 justify-center">
<Button
<Button
size="lg"
className="bg-accent hover:bg-accent/90 text-white"
onClick={() => navigateTo("/start-a-project")}
@@ -502,7 +550,7 @@ export const CaseStudies = () => {
Start Your Project
<ArrowUpRight className="w-4 h-4 ml-2" />
</Button>
<Button
<Button
size="lg"
variant="outline"
onClick={() => navigateTo("/contact-us")}

48
pages/ClickablePrototypes.tsx
View File

@@ -43,11 +43,59 @@ 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 { Helmet } from "react-helmet-async";
// Clickable Prototypes Hero Section
const PrototypesHeroWithCTA = () => {
return (
<section className="relative py-20 overflow-hidden bg-black">
<Helmet>
{/* Page Title and Meta Description */}
<title>Prototypes | Mobile App Development Visualization | WDI</title>
<meta
name="description"
content="Test your mobile app idea with WDI’s interactive prototypes. Validate user flows and gather insights before full-scale mobile development begins."
/>
{/* Canonical Link */}
<link rel="canonical" href="https://www.wdipl.com/services" />
{/* Open Graph Tags (for Facebook, LinkedIn) */}
<meta property="og:title" content="Prototypes | Mobile App Development Visualization | WDI" />
<meta
property="og:description"
content="Test your mobile app idea with WDI’s interactive prototypes. Validate user flows and gather insights before full-scale mobile development begins."
/>
<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="Prototypes | Mobile App Development Visualization | WDI" />
<meta
name="twitter:description"
content="Test your mobile app idea with WDI’s interactive prototypes. Validate user flows and gather insights before full-scale mobile development begins."
/>
<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

48
pages/ClientTestimonials.tsx
View File

@@ -24,6 +24,7 @@ import {
Award,
} from "lucide-react";
import { navigateTo } from "../App";
import { Helmet } from "react-helmet-async";
export const ClientTestimonials = () => {
const [selectedIndustry, setSelectedIndustry] = useState("all");
@@ -392,6 +393,53 @@ export const ClientTestimonials = () => {
{/* Hero Section */}
<section className="pt-24 pb-16 bg-background">
<Helmet>
{/* Page Title and Meta Description */}
<title>Client Reviews | AI App Development Success Stories</title>
<meta
name="description"
content="See what clients say about WDI’s AI app development. Discover how startups and enterprises achieved success with our innovative digital products."
/>
{/* Canonical Link */}
<link rel="canonical" href="https://www.wdipl.com/services" />
{/* Open Graph Tags (for Facebook, LinkedIn) */}
<meta property="og:title" content="Client Reviews | AI App Development Success Stories" />
<meta
property="og:description"
content="See what clients say about WDI’s AI app development. Discover how startups and enterprises achieved success with our innovative digital products."
/>
<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="Client Reviews | AI App Development Success Stories" />
<meta
name="twitter:description"
content="See what clients say about WDI’s AI app development. Discover how startups and enterprises achieved success with our innovative digital products."
/>
<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="max-w-4xl mx-auto text-center">
<div className="flex items-center justify-center gap-2 mb-6">

48
pages/ComputerVisionApplications.tsx
View File

@@ -49,11 +49,59 @@ 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 { Helmet } from "react-helmet-async";
// Computer Vision Applications Hero Section
const ComputerVisionHeroWithCTA = () => {
return (
<section className="relative py-20 overflow-hidden bg-black">
<Helmet>
{/* Page Title and Meta Description */}
<title>Computer Vision Applications | Vision AI Development | WDI</title>
<meta
name="description"
content="WDI builds computer vision solutions that detect, classify, and understand visual data. Enable automation, safety, and intelligent systems."
/>
{/* Canonical Link */}
<link rel="canonical" href="https://www.wdipl.com/services" />
{/* Open Graph Tags (for Facebook, LinkedIn) */}
<meta property="og:title" content="Computer Vision Applications | Vision AI Development | WDI" />
<meta
property="og:description"
content="WDI builds computer vision solutions that detect, classify, and understand visual data. Enable automation, safety, and intelligent systems."
/>
<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="Computer Vision Applications | Vision AI Development | WDI" />
<meta
name="twitter:description"
content="WDI builds computer vision solutions that detect, classify, and understand visual data. Enable automation, safety, and intelligent systems."
/>
<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

58
pages/CrossPlatformAppDevelopment.tsx
View File

@@ -42,11 +42,59 @@ import {
TabsTrigger,
} from "../components/ui/tabs";
import { navigateTo } from "@/App";
import { Helmet } from "react-helmet-async";
// Cross-Platform Hero Section
const CrossPlatformHeroWithCTA = () => {
return (
<section className="relative py-20 overflow-hidden bg-black">
<Helmet>
{/* Page Title and Meta Description */}
<title>Cross-Platform App Development Services | WDI Experts</title>
<meta
name="description"
content="WDI offers efficient and scalable cross-platform app development to deliver seamless mobile experiences on Android and iOS. Accelerate your app’s success today."
/>
{/* Canonical Link */}
<link rel="canonical" href="https://www.wdipl.com/services" />
{/* Open Graph Tags (for Facebook, LinkedIn) */}
<meta property="og:title" content="Cross-Platform App Development Services | WDI Experts" />
<meta
property="og:description"
content="WDI offers efficient and scalable cross-platform app development to deliver seamless mobile experiences on Android and iOS. Accelerate your app’s success today."
/>
<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="Cross-Platform App Development Services | WDI Experts" />
<meta
name="twitter:description"
content="WDI offers efficient and scalable cross-platform app development to deliver seamless mobile experiences on Android and iOS. Accelerate your app’s success today."
/>
<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
@@ -632,14 +680,12 @@ 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`}
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">

63
pages/CustomMLModelDevelopment.tsx
View File

@@ -43,11 +43,59 @@ 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 { Helmet } from "react-helmet-async";
// Custom ML Model Development Hero Section
const CustomMLHeroWithCTA = () => {
return (
<section className="relative py-20 overflow-hidden bg-black">
<Helmet>
{/* Page Title and Meta Description */}
<title>Custom ML Model Development | Machine Learning by WDI</title>
<meta
name="description"
content="WDI builds custom machine learning models tailored to specific data, goals, and industry needs. Achieve performance, accuracy, and scalability."
/>
{/* Canonical Link */}
<link rel="canonical" href="https://www.wdipl.com/services" />
{/* Open Graph Tags (for Facebook, LinkedIn) */}
<meta property="og:title" content="Custom ML Model Development | Machine Learning by WDI" />
<meta
property="og:description"
content="WDI builds custom machine learning models tailored to specific data, goals, and industry needs. Achieve performance, accuracy, and scalability."
/>
<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="Custom ML Model Development | Machine Learning by WDI" />
<meta
name="twitter:description"
content="WDI builds custom machine learning models tailored to specific data, goals, and industry needs. Achieve performance, accuracy, and scalability."
/>
<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
@@ -599,14 +647,12 @@ const CustomMLDevelopmentProcess = () => {
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`}
className={`flex-1 ${isEven ? "lg:text-right" : "lg:text-left"
} text-center lg:text-left`}
>
<div className="bg-gray-900/50 backdrop-blur-md rounded-2xl border border-gray-800 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">
@@ -917,10 +963,9 @@ const CustomMLTechStack = () => {
>
<Card className="bg-gray-900/50 backdrop-blur-md border-gray-800 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl p-4 text-center">
<div
className={`w-12 h-12 rounded-lg flex items-center justify-center mx-auto mb-3 ${
colorClasses[tech.color as keyof typeof colorClasses] ||
className={`w-12 h-12 rounded-lg flex items-center justify-center mx-auto mb-3 ${colorClasses[tech.color as keyof typeof colorClasses] ||
"bg-accent/20 text-accent border-accent/30"
}`}
}`}
>
<IconComponent className="w-6 h-6" />
</div>

48
pages/CustomWebAppDevelopment.tsx
View File

@@ -47,11 +47,59 @@ 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";
import { Helmet } from "react-helmet-async";
// Custom Web App Development Hero Section
const CustomWebAppHeroWithCTA = () => {
return (
<section className="relative py-20 overflow-hidden bg-black">
<Helmet>
{/* Page Title and Meta Description */}
<title>Custom Web Application Development Experts | WDI</title>
<meta
name="description"
content="WDI specializes in custom web application development, delivering secure, scalable, and innovative solutions tailored to accelerate your business growth."
/>
{/* Canonical Link */}
<link rel="canonical" href="https://www.wdipl.com/services" />
{/* Open Graph Tags (for Facebook, LinkedIn) */}
<meta property="og:title" content="Custom Web Application Development Experts | WDI" />
<meta
property="og:description"
content="WDI specializes in custom web application development, delivering secure, scalable, and innovative solutions tailored to accelerate your business growth."
/>
<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="Custom Web Application Development Experts | WDI" />
<meta
name="twitter:description"
content="WDI specializes in custom web application development, delivering secure, scalable, and innovative solutions tailored to accelerate your business growth."
/>
<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

48
pages/DedicatedDevelopmentTeams.tsx
View File

@@ -18,6 +18,7 @@ import {
Star,
} from "lucide-react";
import { navigateTo } from "@/App";
import { Helmet } from "react-helmet-async";
export const DedicatedDevelopmentTeams = () => {
const benefits = [
@@ -122,6 +123,53 @@ export const DedicatedDevelopmentTeams = () => {
{/* Hero Section */}
<section className="relative pt-24 pb-16 overflow-hidden">
<Helmet>
{/* Page Title and Meta Description */}
<title>Dedicated Development Teams for Hire | WDI</title>
<meta
name="description"
content="Scale your business with WDI’s dedicated development teams. Get expert talent, faster delivery, and full project control tailored to your unique goals."
/>
{/* Canonical Link */}
<link rel="canonical" href="https://www.wdipl.com/services" />
{/* Open Graph Tags (for Facebook, LinkedIn) */}
<meta property="og:title" content="Dedicated Development Teams for Hire | WDI" />
<meta
property="og:description"
content="Scale your business with WDI’s dedicated development teams. Get expert talent, faster delivery, and full project control tailored to your unique goals."
/>
<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="Dedicated Development Teams for Hire | WDI" />
<meta
name="twitter:description"
content="Scale your business with WDI’s dedicated development teams. Get expert talent, faster delivery, and full project control tailored to your unique goals."
/>
<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="absolute inset-0 bg-gradient-to-br from-[#E5195E]/10 via-background to-background" />
<div
className="absolute inset-0 opacity-30"

122
pages/DesignExperience.tsx
View File

@@ -29,38 +29,38 @@ const HeroWithCTA = () => {
return (
<section className="relative py-20 overflow-hidden bg-black">
<Helmet>
{/* Page Title and Meta Description */}
<title>Design & User Experience Solutions | Expert Services by WDI</title>
<meta
name="description"
content="WDI provides innovative Design & User Experience Solutions that create seamless, user-centric digital products to enhance satisfaction and maximize business growth."
/>
{/* Canonical Link */}
<link rel="canonical" href="https://www.wdipl.com/services" />
{/* Open Graph Tags (for Facebook, LinkedIn) */}
<meta property="og:title" content="Design & User Experience Solutions | Expert Services by WDI" />
<meta
property="og:description"
content="WDI provides innovative Design & User Experience Solutions that create seamless, user-centric digital products to enhance satisfaction and maximize business growth."
/>
<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="Design & User Experience Solutions | Expert Services by WDI" />
<meta
name="twitter:description"
content="WDI provides innovative Design & User Experience Solutions that create seamless, user-centric digital products to enhance satisfaction and maximize business growth."
/>
<meta name="twitter:image" content="https://www.wdipl.com/your-preview-image.jpg" />
{/* Social Profiles (using JSON-LD Schema) */}
<script type="application/ld+json">
{`
{/* Page Title and Meta Description */}
<title>Design & User Experience Solutions | Expert Services by WDI</title>
<meta
name="description"
content="WDI provides innovative Design & User Experience Solutions that create seamless, user-centric digital products to enhance satisfaction and maximize business growth."
/>
{/* Canonical Link */}
<link rel="canonical" href="https://www.wdipl.com/services" />
{/* Open Graph Tags (for Facebook, LinkedIn) */}
<meta property="og:title" content="Design & User Experience Solutions | Expert Services by WDI" />
<meta
property="og:description"
content="WDI provides innovative Design & User Experience Solutions that create seamless, user-centric digital products to enhance satisfaction and maximize business growth."
/>
<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="Design & User Experience Solutions | Expert Services by WDI" />
<meta
name="twitter:description"
content="WDI provides innovative Design & User Experience Solutions that create seamless, user-centric digital products to enhance satisfaction and maximize business growth."
/>
<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",
@@ -73,8 +73,8 @@ const HeroWithCTA = () => {
]
}
`}
</script>
</Helmet>
</script>
</Helmet>
<div className="container mx-auto px-6 lg:px-8 max-w-7xl">
<div className="grid lg:grid-cols-2 gap-8 lg:gap-16 items-center min-h-[90vh]">
<motion.div
@@ -102,14 +102,14 @@ const HeroWithCTA = () => {
<span className="text-[#E5195E]">Design & User Experience</span>
<span className="text-white"> Solutions</span>
</h1>
<p className="text-lg text-gray-300 leading-relaxed max-w-lg">
Create engaging, intuitive user experiences that drive conversion and delight users through research-driven design and modern design thinking.
</p>
</div>
{/* BULLET POINTS REMOVED - Content flows directly to CTAs */}
{/* CTAs - STANDARDIZED BUTTON HEIGHTS WITH IMPROVED SPACING */}
<motion.div
initial={{ opacity: 0, y: 20 }}
@@ -117,8 +117,8 @@ const HeroWithCTA = () => {
transition={{ duration: 0.8, delay: 0.2 }}
className="flex flex-col sm:flex-row gap-4 pt-4"
>
<ShimmerButton
className="h-14 px-8 text-lg font-medium rounded-lg shadow-lg hover:shadow-xl transition-all duration-300"
<ShimmerButton
className="h-14 px-8 text-lg font-medium rounded-lg shadow-lg hover:shadow-xl transition-all duration-300"
onClick={() => navigateTo('/start-a-project')}
>
<div className="inline-flex items-center gap-2">
@@ -136,7 +136,7 @@ const HeroWithCTA = () => {
</Button>
</motion.div>
</motion.div>
{/* Right side with Custom UI/UX Design Animation - METRICS REMOVED, EXPANDED CONTAINER */}
<motion.div
initial={{ opacity: 0, x: 50 }}
@@ -152,7 +152,7 @@ const HeroWithCTA = () => {
<div className="absolute top-3/4 right-1/4 w-24 h-24 bg-gradient-to-r from-pink-500/20 to-violet-500/20 rounded-full blur-2xl animate-pulse delay-1000"></div>
<div className="absolute bottom-1/4 left-1/3 w-20 h-20 bg-gradient-to-r from-blue-500/20 to-cyan-500/20 rounded-full blur-2xl animate-pulse delay-2000"></div>
</div>
{/* Custom UI/UX Design Animation - CENTERED AND EXPANDED */}
<div className="absolute inset-0 flex items-center justify-center">
<div className="w-full h-full scale-105 transform-gpu">
@@ -197,7 +197,7 @@ const HorizontalTagScroller = () => {
Comprehensive design services that create meaningful user experiences and drive business results.
</p>
</motion.div>
<motion.div
initial={{ opacity: 0, y: 40 }}
whileInView={{ opacity: 1, y: 0 }}
@@ -207,7 +207,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 */}
{specialties.map((specialty, index) => {
@@ -234,7 +234,7 @@ const HorizontalTagScroller = () => {
</motion.div>
);
})}
{/* Second and third sets for seamless loop */}
{[...specialties, ...specialties].map((specialty, index) => {
const IconComponent = specialty.icon;
@@ -276,7 +276,7 @@ const SideBySideContentWithIcons = () => {
icon: Users
},
{
id: "conversion",
id: "conversion",
title: "Conversion Optimization",
icon: TrendingUp
},
@@ -312,7 +312,7 @@ const SideBySideContentWithIcons = () => {
<span className="text-[#E5195E]">WDI</span>
<span className="text-white"> for Design</span>
</h2>
<p className="text-2xl text-gray-300 leading-relaxed">
User-centered design that drives measurable business results.
</p>
@@ -343,7 +343,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>
@@ -368,7 +368,7 @@ const TabbedServiceDisplay = () => {
link: "/services/ui-ux-design"
},
{
title: "Clickable Prototypes",
title: "Clickable Prototypes",
icon: MousePointer,
description: "Interactive prototypes to validate concepts before development.",
link: "/services/clickable-prototypes"
@@ -416,7 +416,7 @@ const TabbedServiceDisplay = () => {
Comprehensive design services that create meaningful connections between users and digital products.
</p>
</motion.div>
<motion.div
initial={{ opacity: 0, y: 40 }}
whileInView={{ opacity: 1, y: 0 }}
@@ -442,7 +442,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}
@@ -490,21 +490,21 @@ const InlineCTA = () => {
</div>
</div>
</div>
{/* Main Heading */}
<h2 className="text-4xl lg:text-5xl font-semibold leading-tight">
<span className="text-foreground">Create Exceptional User Experiences with </span>
<span className="text-[#E5195E]">Research-Driven Design</span>
</h2>
{/* Subtitle */}
<p className="text-xl text-muted-foreground leading-relaxed max-w-2xl mx-auto">
Design solutions that not only look great but also drive conversion and user engagement.
</p>
{/* CTA Button */}
<div className="flex flex-col items-center 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')}
onClick={() => navigateTo("/start-a-project")}
@@ -514,7 +514,7 @@ const InlineCTA = () => {
<span>Start Your Design Project</span>
</div>
</ShimmerButton>
{/* Small benefit text */}
<p className="text-sm text-muted-foreground">
Design audit • User research • Prototype development
@@ -539,7 +539,7 @@ const HireDevelopersSection = () => {
link: "/hire-talent/ui-ux-designers"
},
{
title: "Product Designers",
title: "Product Designers",
icon: Layout,
skills: ["Product Strategy", "Design Systems", "User Journey"],
iconBg: "bg-blue-500",
@@ -582,7 +582,7 @@ const HireDevelopersSection = () => {
Get access to talented designers who create beautiful, functional user experiences.
</p>
</motion.div>
<motion.div
initial={{ opacity: 0, y: 40 }}
whileInView={{ opacity: 1, y: 0 }}
@@ -616,12 +616,12 @@ const HireDevelopersSection = () => {
</div>
</div>
</div>
<h3 className="text-xl font-semibold text-foreground mb-4 leading-tight">
{specialist.title}
</h3>
</div>
{/* Skills */}
<div className="px-8 pb-6 flex-1">
<div className="flex flex-wrap gap-2">
@@ -632,10 +632,10 @@ const HireDevelopersSection = () => {
))}
</div>
</div>
{/* CTA */}
<div className="p-8 pt-0 mt-auto space-y-3">
<ShimmerButton
<ShimmerButton
className="w-full py-3 text-sm rounded-xl shadow-lg hover:shadow-xl"
onClick={() => navigateTo(specialist.link)}
>
@@ -691,7 +691,7 @@ export function DesignExperience() {
<ProcessSection />
<InlineCTA />
<HireDevelopersSection />
<FAQSection
<FAQSection
title="Design & Experience Questions"
subtitle="Get answers to common questions about our design and user experience services."
faqs={designExperienceFAQs}

48
pages/DesignThinkingWorkshops.tsx
View File

@@ -43,11 +43,59 @@ 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 { Helmet } from "react-helmet-async";
// Design Thinking Workshops Hero Section
const WorkshopsHeroWithCTA = () => {
return (
<section className="relative py-20 overflow-hidden bg-black">
<Helmet>
{/* Page Title and Meta Description */}
<title>Design Thinking Workshop | Web Development Strategy</title>
<meta
name="description"
content="Join WDI’s interactive workshops to shape your web development strategy. Solve business challenges through design thinking and user-focused planning."
/>
{/* Canonical Link */}
<link rel="canonical" href="https://www.wdipl.com/services" />
{/* Open Graph Tags (for Facebook, LinkedIn) */}
<meta property="og:title" content="Design Thinking Workshop | Web Development Strategy" />
<meta
property="og:description"
content="Join WDI’s interactive workshops to shape your web development strategy. Solve business challenges through design thinking and user-focused planning."
/>
<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="Design Thinking Workshop | Web Development Strategy" />
<meta
name="twitter:description"
content="Join WDI’s interactive workshops to shape your web development strategy. Solve business challenges through design thinking and user-focused planning."
/>
<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

48
pages/EcommerceMarketplaces.tsx
View File

@@ -27,11 +27,59 @@ import {
Award,
Clock,
} from "lucide-react";
import { Helmet } from "react-helmet-async";
// Problem Solution Block Component
const ProblemSolutionBlock = () => {
return (
<section className="py-20 bg-[#0E0E0E]">
<Helmet>
{/* Page Title and Meta Description */}
<title>eCommerce & Marketplace Development Services | WDI</title>
<meta
name="description"
content="WDI builds powerful eCommerce & Marketplace platforms with seamless UX, secure payments, and scalable architecture to grow your online business."
/>
{/* Canonical Link */}
<link rel="canonical" href="https://www.wdipl.com/services" />
{/* Open Graph Tags (for Facebook, LinkedIn) */}
<meta property="og:title" content="eCommerce & Marketplace Development Services | WDI" />
<meta
property="og:description"
content="WDI builds powerful eCommerce & Marketplace platforms with seamless UX, secure payments, and scalable architecture to grow your online business."
/>
<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="eCommerce & Marketplace Development Services | WDI" />
<meta
name="twitter:description"
content="WDI builds powerful eCommerce & Marketplace platforms with seamless UX, secure payments, and scalable architecture to grow your online business."
/>
<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">
<motion.div
initial={{ opacity: 0, y: 30 }}

48
pages/EcommercePlatforms.tsx
View File

@@ -48,11 +48,59 @@ 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";
import { Helmet } from "react-helmet-async";
// eCommerce Platforms Hero Section
const EcommerceHeroWithCTA = () => {
return (
<section className="relative py-20 overflow-hidden bg-black">
<Helmet>
{/* Page Title and Meta Description */}
<title>eCommerce Platform Development by WDI| Build Powerful Online Stores</title>
<meta
name="description"
content="WDI delivers robust eCommerce platform development with secure, scalable, and user-friendly solutions that drive sales and enhance your online business growth."
/>
{/* Canonical Link */}
<link rel="canonical" href="https://www.wdipl.com/services" />
{/* Open Graph Tags (for Facebook, LinkedIn) */}
<meta property="og:title" content="eCommerce Platform Development by WDI| Build Powerful Online Stores" />
<meta
property="og:description"
content="WDI delivers robust eCommerce platform development with secure, scalable, and user-friendly solutions that drive sales and enhance your online business growth."
/>
<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="eCommerce Platform Development by WDI| Build Powerful Online Stores" />
<meta
name="twitter:description"
content="WDI delivers robust eCommerce platform development with secure, scalable, and user-friendly solutions that drive sales and enhance your online business growth."
/>
<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

80
pages/EdTechPlatforms.tsx
View File

@@ -10,16 +10,64 @@ import { SplitCallToAction } from "../components/SplitCallToAction";
import { Card, CardContent } from "../components/ui/card";
import { Badge } from "../components/ui/badge";
import { Button } from "../components/ui/button";
import {
BookOpen, Users, Shield, Accessibility, BarChart3,
import {
BookOpen, Users, Shield, Accessibility, BarChart3,
MessageSquare, Calendar, CheckCircle, Star, ArrowRight,
GraduationCap, Brain, Target, Zap, Award, Clock
} from "lucide-react";
import { Helmet } from "react-helmet-async";
// Problem Solution Block Component
const ProblemSolutionBlock = () => {
return (
<section className="py-20 bg-[#0E0E0E]">
<Helmet>
{/* Page Title and Meta Description */}
<title>EdTech Platform Development Services | WDI</title>
<meta
name="description"
content="WDI builds advanced EdTech platforms for engaging, scalable digital learning. Empower educational institutions with innovative, user-friendly technology solutions."
/>
{/* Canonical Link */}
<link rel="canonical" href="https://www.wdipl.com/services" />
{/* Open Graph Tags (for Facebook, LinkedIn) */}
<meta property="og:title" content="EdTech Platform Development Services | WDI" />
<meta
property="og:description"
content="WDI builds advanced EdTech platforms for engaging, scalable digital learning. Empower educational institutions with innovative, user-friendly technology solutions."
/>
<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="EdTech Platform Development Services | WDI" />
<meta
name="twitter:description"
content="WDI builds advanced EdTech platforms for engaging, scalable digital learning. Empower educational institutions with innovative, user-friendly technology solutions."
/>
<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">
<motion.div
initial={{ opacity: 0, y: 30 }}
@@ -32,7 +80,7 @@ const ProblemSolutionBlock = () => {
<span className="text-white">Addressing the Core Challenges of </span>
<span className="text-[#E5195E]">EdTech Platforms</span>
</h2>
<div className="grid lg:grid-cols-2 gap-12 items-center">
<motion.div
initial={{ opacity: 0, x: -30 }}
@@ -53,7 +101,7 @@ const ProblemSolutionBlock = () => {
</p>
</div>
</motion.div>
<motion.div
initial={{ opacity: 0, x: 30 }}
whileInView={{ opacity: 1, x: 0 }}
@@ -137,7 +185,7 @@ const IconWithDescriptionGrid = () => {
Comprehensive tools and capabilities to create engaging, effective, and accessible educational experiences.
</p>
</motion.div>
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
{features.map((feature, index) => {
const IconComponent = feature.icon;
@@ -214,7 +262,7 @@ const ThreeColumnFeatureBlock = () => {
Leverage our specialized expertise to create educational technology solutions that truly enhance learning outcomes.
</p>
</motion.div>
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
{advantages.map((advantage, index) => {
const IconComponent = advantage.icon;
@@ -281,7 +329,7 @@ const CaseStudyHighlightGrid = () => {
Real results from our EdTech platform implementations that transformed educational experiences.
</p>
</motion.div>
<div className="grid lg:grid-cols-2 gap-8">
{caseStudies.map((study, index) => (
<motion.div
@@ -355,7 +403,7 @@ export const EdTechPlatforms = () => {
return (
<div className="min-h-screen bg-[#0E0E0E]">
<Navigation />
<HeroBanner
category="Learning & Education"
title="EdTech Platforms"
@@ -372,29 +420,29 @@ export const EdTechPlatforms = () => {
/>
<ProblemSolutionBlock />
<IconWithDescriptionGrid />
<ThreeColumnFeatureBlock />
<div className="bg-[#0E0E0E]">
<ProcessSection />
</div>
<CaseStudyHighlightGrid />
<div className="bg-[#0E0E0E]">
<FAQSection
<FAQSection
title="EdTech Platform FAQs"
subtitle="Get answers to common questions about our EdTech platform development services."
faqs={edtechFAQs}
/>
</div>
<div className="bg-black">
<SplitCallToAction />
</div>
<Footer />
</div>
);

75
pages/EngagementModels.tsx
View File

@@ -16,6 +16,7 @@ import {
Star,
} from "lucide-react";
import { navigateTo } from "@/App";
import { Helmet } from "react-helmet-async";
export const EngagementModels = () => {
const models = [
@@ -134,6 +135,53 @@ export const EngagementModels = () => {
{/* Hero Section */}
<section className="relative pt-24 pb-16 overflow-hidden">
<Helmet>
{/* Page Title and Meta Description */}
<title>Engagement Models | Flexible Software Development Options</title>
<meta
name="description"
content="Explore WDI’s flexible software engagement models. Choose the right approach for your goals, timeline, and budget, from startups to enterprises."
/>
{/* Canonical Link */}
<link rel="canonical" href="https://www.wdipl.com/services" />
{/* Open Graph Tags (for Facebook, LinkedIn) */}
<meta property="og:title" content="Engagement Models | Flexible Software Development Options" />
<meta
property="og:description"
content="Explore WDI’s flexible software engagement models. Choose the right approach for your goals, timeline, and budget, from startups to enterprises."
/>
<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="Engagement Models | Flexible Software Development Options" />
<meta
name="twitter:description"
content="Explore WDI’s flexible software engagement models. Choose the right approach for your goals, timeline, and budget, from startups to enterprises."
/>
<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="absolute inset-0 bg-gradient-to-br from-[#E5195E]/10 via-background to-background" />
<div
className="absolute inset-0 opacity-30"
@@ -337,13 +385,12 @@ export const EngagementModels = () => {
<td className="p-6 text-center">
<Badge
variant="outline"
className={`border-blue-500/30 text-blue-400 ${
feature.fixedPrice === "High"
className={`border-blue-500/30 text-blue-400 ${feature.fixedPrice === "High"
? "bg-blue-500/10"
: feature.fixedPrice === "Medium"
? "bg-yellow-500/10"
: "bg-red-500/10"
}`}
? "bg-yellow-500/10"
: "bg-red-500/10"
}`}
>
{feature.fixedPrice}
</Badge>
@@ -351,13 +398,12 @@ export const EngagementModels = () => {
<td className="p-6 text-center">
<Badge
variant="outline"
className={`border-green-500/30 text-green-400 ${
feature.timeAndMaterial === "High"
className={`border-green-500/30 text-green-400 ${feature.timeAndMaterial === "High"
? "bg-green-500/10"
: feature.timeAndMaterial === "Medium"
? "bg-yellow-500/10"
: "bg-red-500/10"
}`}
? "bg-yellow-500/10"
: "bg-red-500/10"
}`}
>
{feature.timeAndMaterial}
</Badge>
@@ -365,13 +411,12 @@ export const EngagementModels = () => {
<td className="p-6 text-center">
<Badge
variant="outline"
className={`border-[#E5195E]/30 text-[#E5195E] ${
feature.dedicatedTeam === "High"
className={`border-[#E5195E]/30 text-[#E5195E] ${feature.dedicatedTeam === "High"
? "bg-[#E5195E]/10"
: feature.dedicatedTeam.includes("Medium")
? "bg-yellow-500/10"
: "bg-red-500/10"
}`}
? "bg-yellow-500/10"
: "bg-red-500/10"
}`}
>
{feature.dedicatedTeam}
</Badge>

58
pages/EnterpriseSoftwareSolutions.tsx
View File

@@ -47,11 +47,59 @@ import { Card, CardContent } from "../components/ui/card";
import { ShimmerButton } from "../components/ui/shimmer-button";
import awsLogo from "../src/images/aws-logo.png";
import { navigateTo } from "@/App";
import { Helmet } from "react-helmet-async";
// Enterprise Software Solutions Hero Section
const EnterpriseHeroWithCTA = () => {
return (
<section className="relative py-20 overflow-hidden bg-black">
<Helmet>
{/* Page Title and Meta Description */}
<title>Enterprise Software Solutions | Tailored Services by WDI</title>
<meta
name="description"
content="WDI delivers customized enterprise software solutions designed to optimize operations, enhance productivity, and drive scalable business growth."
/>
{/* Canonical Link */}
<link rel="canonical" href="https://www.wdipl.com/services" />
{/* Open Graph Tags (for Facebook, LinkedIn) */}
<meta property="og:title" content="Enterprise Software Solutions | Tailored Services by WDI" />
<meta
property="og:description"
content="WDI delivers customized enterprise software solutions designed to optimize operations, enhance productivity, and drive scalable business growth."
/>
<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="Enterprise Software Solutions | Tailored Services by WDI" />
<meta
name="twitter:description"
content="WDI delivers customized enterprise software solutions designed to optimize operations, enhance productivity, and drive scalable business growth."
/>
<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
@@ -613,14 +661,12 @@ const EnterpriseProcess = () => {
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`}
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">

48
pages/EventTicketingSolutions.tsx
View File

@@ -27,11 +27,59 @@ import {
Award,
Bell,
} from "lucide-react";
import { Helmet } from "react-helmet-async";
// Problem Solution Block Component
const ProblemSolutionBlock = () => {
return (
<section className="py-20 bg-[#0E0E0E]">
<Helmet>
{/* Page Title and Meta Description */}
<title>Event & Ticketing Solutions by WDI | Seamless Event Tech</title>
<meta
name="description"
content="WDI delivers custom Event & Ticketing Solutions with real-time booking, secure payments, and smooth user experience to manage events and boost sales."
/>
{/* Canonical Link */}
<link rel="canonical" href="https://www.wdipl.com/services" />
{/* Open Graph Tags (for Facebook, LinkedIn) */}
<meta property="og:title" content="Event & Ticketing Solutions by WDI | Seamless Event Tech" />
<meta
property="og:description"
content="WDI delivers custom Event & Ticketing Solutions with real-time booking, secure payments, and smooth user experience to manage events and boost sales."
/>
<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="Event & Ticketing Solutions by WDI | Seamless Event Tech" />
<meta
name="twitter:description"
content="WDI delivers custom Event & Ticketing Solutions with real-time booking, secure payments, and smooth user experience to manage events and boost sales."
/>
<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">
<motion.div
initial={{ opacity: 0, y: 30 }}

53
pages/FAQs.tsx
View File

@@ -20,6 +20,7 @@ import {
Mail,
} from "lucide-react";
import { navigateTo } from "../App";
import { Helmet } from "react-helmet-async";
export const FAQs = () => {
const [searchTerm, setSearchTerm] = useState("");
@@ -190,6 +191,53 @@ export const FAQs = () => {
{/* Hero Section */}
<section className="pt-24 pb-16 bg-background">
<Helmet>
{/* Page Title and Meta Description */}
<title>FAQ | Custom AI Solutions for Startups & Enterprises</title>
<meta
name="description"
content="Find answers about WDI’s custom AI development services. We help startups and enterprises build smart digital tools tailored to their goals."
/>
{/* Canonical Link */}
<link rel="canonical" href="https://www.wdipl.com/services" />
{/* Open Graph Tags (for Facebook, LinkedIn) */}
<meta property="og:title" content="FAQ | Custom AI Solutions for Startups & Enterprises" />
<meta
property="og:description"
content="Find answers about WDI’s custom AI development services. We help startups and enterprises build smart digital tools tailored to their goals."
/>
<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="FAQ | Custom AI Solutions for Startups & Enterprises" />
<meta
name="twitter:description"
content="Find answers about WDI’s custom AI development services. We help startups and enterprises build smart digital tools tailored to their goals."
/>
<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="max-w-4xl mx-auto text-center">
<div className="flex items-center justify-center gap-2 mb-6">
@@ -230,9 +278,8 @@ export const FAQs = () => {
<div className="text-center mt-4">
<span className="text-sm text-muted-foreground">
{searchTerm
? `${filteredFaqs.length} result${
filteredFaqs.length !== 1 ? "s" : ""
} found`
? `${filteredFaqs.length} result${filteredFaqs.length !== 1 ? "s" : ""
} found`
: `${allFaqs.length} questions available`}
</span>
</div>

89
pages/FinTechBankingApps.tsx
View File

@@ -56,11 +56,59 @@ 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 { Helmet } from "react-helmet-async";
// FinTech & Banking Apps Hero Section
const FinTechBankingAppsHero = () => {
return (
<section className="relative py-20 overflow-hidden bg-black">
<Helmet>
{/* Page Title and Meta Description */}
<title>FinTech & Banking Apps Development | WDI – Secure Digital Solutions</title>
<meta
name="description"
content="WDI designs FinTech & Banking Apps for secure, innovative financial solutions. Enhance digital banking experiences with robust, user-focused technology."
/>
{/* Canonical Link */}
<link rel="canonical" href="https://www.wdipl.com/services" />
{/* Open Graph Tags (for Facebook, LinkedIn) */}
<meta property="og:title" content="FinTech & Banking Apps Development | WDI – Secure Digital Solutions" />
<meta
property="og:description"
content="WDI designs FinTech & Banking Apps for secure, innovative financial solutions. Enhance digital banking experiences with robust, user-focused technology."
/>
<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="FinTech & Banking Apps Development | WDI – Secure Digital Solutions" />
<meta
name="twitter:description"
content="WDI designs FinTech & Banking Apps for secure, innovative financial solutions. Enhance digital banking experiences with robust, user-focused technology."
/>
<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
@@ -248,26 +296,24 @@ const FinTechBankingAppsHero = () => {
className="text-center"
>
<div
className={`w-12 h-12 rounded-2xl flex items-center justify-center mb-2 ${
action.color === "blue"
className={`w-12 h-12 rounded-2xl flex items-center justify-center mb-2 ${action.color === "blue"
? "bg-blue-500/20"
: action.color === "green"
? "bg-green-500/20"
: action.color === "purple"
? "bg-purple-500/20"
: "bg-orange-500/20"
}`}
? "bg-green-500/20"
: action.color === "purple"
? "bg-purple-500/20"
: "bg-orange-500/20"
}`}
>
<action.icon
className={`w-5 h-5 ${
action.color === "blue"
className={`w-5 h-5 ${action.color === "blue"
? "text-blue-400"
: action.color === "green"
? "text-green-400"
: action.color === "purple"
? "text-purple-400"
: "text-orange-400"
}`}
? "text-green-400"
: action.color === "purple"
? "text-purple-400"
: "text-orange-400"
}`}
/>
</div>
<div className="text-white text-xs">{action.label}</div>
@@ -326,11 +372,10 @@ const FinTechBankingAppsHero = () => {
</div>
</div>
<div
className={`text-sm font-medium ${
transaction.amount.startsWith("+")
className={`text-sm font-medium ${transaction.amount.startsWith("+")
? "text-green-400"
: "text-white"
}`}
}`}
>
{transaction.amount}
</div>
@@ -852,14 +897,12 @@ const FinTechBankingAppsProcess = () => {
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`}
className={`flex-1 ${isEven ? "lg:text-right" : "lg:text-left"
} text-center lg:text-left`}
>
<div className="bg-gray-900/50 backdrop-blur-md rounded-2xl border border-gray-800 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">

79
pages/FitnessWellnessPlatforms.tsx
View File

@@ -17,11 +17,59 @@ import { Badge } from "../components/ui/badge";
import { Button } from "../components/ui/button";
import { ShimmerButton } from "../components/ui/shimmer-button";
import { navigateTo } from "@/App";
import { Helmet } from "react-helmet-async";
// Fitness & Wellness Hero Section
const FitnessWellnessHero = () => {
return (
<section className="relative py-20 overflow-hidden bg-black">
<Helmet>
{/* Page Title and Meta Description */}
<title>Fitness & Wellness Platforms | WDI – Digital Health Solutions</title>
<meta
name="description"
content="WDI builds custom Fitness & Wellness Platforms to boost user engagement, track health goals, and deliver personalized wellness experiences across devices."
/>
{/* Canonical Link */}
<link rel="canonical" href="https://www.wdipl.com/services" />
{/* Open Graph Tags (for Facebook, LinkedIn) */}
<meta property="og:title" content="Fitness & Wellness Platforms | WDI – Digital Health Solutions" />
<meta
property="og:description"
content="WDI builds custom Fitness & Wellness Platforms to boost user engagement, track health goals, and deliver personalized wellness experiences across devices."
/>
<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="Fitness & Wellness Platforms | WDI – Digital Health Solutions" />
<meta
name="twitter:description"
content="WDI builds custom Fitness & Wellness Platforms to boost user engagement, track health goals, and deliver personalized wellness experiences across devices."
/>
<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
@@ -201,15 +249,14 @@ const FitnessWellnessHero = () => {
>
<div className="flex items-center gap-2 mb-2">
<metric.icon
className={`w-4 h-4 ${
metric.color === "orange"
className={`w-4 h-4 ${metric.color === "orange"
? "text-orange-400"
: metric.color === "blue"
? "text-blue-400"
: metric.color === "red"
? "text-red-400"
: "text-green-400"
}`}
? "text-blue-400"
: metric.color === "red"
? "text-red-400"
: "text-green-400"
}`}
/>
<span className="text-white font-medium text-sm">
{metric.name}
@@ -267,22 +314,20 @@ const FitnessWellnessHero = () => {
className="flex items-center gap-3 p-3 rounded-lg hover:bg-white/5 transition-colors"
>
<div
className={`w-8 h-8 rounded-full flex items-center justify-center ${
activity.color === "purple"
className={`w-8 h-8 rounded-full flex items-center justify-center ${activity.color === "purple"
? "bg-purple-500/20"
: activity.color === "green"
? "bg-green-500/20"
: "bg-blue-500/20"
}`}
? "bg-green-500/20"
: "bg-blue-500/20"
}`}
>
<activity.icon
className={`w-4 h-4 ${
activity.color === "purple"
className={`w-4 h-4 ${activity.color === "purple"
? "text-purple-400"
: activity.color === "green"
? "text-green-400"
: "text-blue-400"
}`}
? "text-green-400"
: "text-blue-400"
}`}
/>
</div>
<div className="flex-1">

48
pages/FoodOrderingDelivery.tsx
View File

@@ -26,11 +26,59 @@ import {
Globe,
Award,
} from "lucide-react";
import { Helmet } from "react-helmet-async";
// Problem Solution Block Component
const ProblemSolutionBlock = () => {
return (
<section className="py-20 bg-[#0E0E0E]">
<Helmet>
{/* Page Title and Meta Description */}
<title>Food Ordering & Delivery App Solutions | WDI</title>
<meta
name="description"
content="WDI develops custom Food Ordering & Delivery apps with real-time tracking, secure payments, and seamless user experience to grow your food business online."
/>
{/* Canonical Link */}
<link rel="canonical" href="https://www.wdipl.com/services" />
{/* Open Graph Tags (for Facebook, LinkedIn) */}
<meta property="og:title" content="Food Ordering & Delivery App Solutions | WDI" />
<meta
property="og:description"
content="WDI develops custom Food Ordering & Delivery apps with real-time tracking, secure payments, and seamless user experience to grow your food business online."
/>
<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="Food Ordering & Delivery App Solutions | WDI" />
<meta
name="twitter:description"
content="WDI develops custom Food Ordering & Delivery apps with real-time tracking, secure payments, and seamless user experience to grow your food business online."
/>
<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">
<motion.div
initial={{ opacity: 0, y: 30 }}

48
pages/GenAIIntegrationDigitalProducts.tsx
View File

@@ -43,11 +43,59 @@ 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 { Helmet } from "react-helmet-async";
// Gen AI Integration Hero Section
const GenAIIntegrationHeroWithCTA = () => {
return (
<section className="relative py-20 overflow-hidden bg-black">
<Helmet>
{/* Page Title and Meta Description */}
<title>Generative AI Integration | Smarter Products with WDI</title>
<meta
name="description"
content="Embed generative AI into your digital products with WDI. Enable intelligent automation, creativity, and enhanced user experiences through GenAI."
/>
{/* Canonical Link */}
<link rel="canonical" href="https://www.wdipl.com/services" />
{/* Open Graph Tags (for Facebook, LinkedIn) */}
<meta property="og:title" content="Generative AI Integration | Smarter Products with WDI" />
<meta
property="og:description"
content="Embed generative AI into your digital products with WDI. Enable intelligent automation, creativity, and enhanced user experiences through GenAI."
/>
<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="Generative AI Integration | Smarter Products with WDI" />
<meta
name="twitter:description"
content="Embed generative AI into your digital products with WDI. Enable intelligent automation, creativity, and enhanced user experiences through GenAI."
/>
<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

76
pages/HealthTechApplications.tsx
View File

@@ -46,11 +46,59 @@ 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 { Helmet } from "react-helmet-async";
// HealthTech Hero Section
const HealthTechHero = () => {
return (
<section className="relative py-20 overflow-hidden bg-black">
<Helmet>
{/* Page Title and Meta Description */}
<title>HealthTech Applications Development | WDI – Modern Healthcare</title>
<meta
name="description"
content="WDI builds secure, scalable HealthTech applications for modern healthcare. Enhance patient care, data access, and compliance with custom digital solutions."
/>
{/* Canonical Link */}
<link rel="canonical" href="https://www.wdipl.com/services" />
{/* Open Graph Tags (for Facebook, LinkedIn) */}
<meta property="og:title" content="HealthTech Applications Development | WDI – Modern Healthcare" />
<meta
property="og:description"
content="WDI builds secure, scalable HealthTech applications for modern healthcare. Enhance patient care, data access, and compliance with custom digital solutions."
/>
<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="HealthTech Applications Development | WDI – Modern Healthcare" />
<meta
name="twitter:description"
content="WDI builds secure, scalable HealthTech applications for modern healthcare. Enhance patient care, data access, and compliance with custom digital solutions."
/>
<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
@@ -341,22 +389,20 @@ const HealthTechHero = () => {
className="flex items-center gap-3 p-3 rounded-lg hover:bg-white/5 transition-colors"
>
<div
className={`w-8 h-8 rounded-full flex items-center justify-center ${
activity.color === "blue"
className={`w-8 h-8 rounded-full flex items-center justify-center ${activity.color === "blue"
? "bg-blue-500/20"
: activity.color === "green"
? "bg-green-500/20"
: "bg-purple-500/20"
}`}
? "bg-green-500/20"
: "bg-purple-500/20"
}`}
>
<activity.icon
className={`w-4 h-4 ${
activity.color === "blue"
className={`w-4 h-4 ${activity.color === "blue"
? "text-blue-400"
: activity.color === "green"
? "text-green-400"
: "text-purple-400"
}`}
? "text-green-400"
: "text-purple-400"
}`}
/>
</div>
<div className="flex-1">
@@ -885,14 +931,12 @@ const HealthTechProcess = () => {
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`}
className={`flex-1 ${isEven ? "lg:text-right" : "lg:text-left"
} text-center lg:text-left`}
>
<div className="bg-gray-900/50 backdrop-blur-md rounded-2xl border border-gray-800 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">

48
pages/HireBackendDevelopers.tsx
View File

@@ -17,6 +17,7 @@ import {
Code,
} from "lucide-react";
import { navigateTo } from "@/App";
import { Helmet } from "react-helmet-async";
export const HireBackendDevelopers = () => {
const expertise = [
@@ -197,6 +198,53 @@ export const HireBackendDevelopers = () => {
{/* Hero Section */}
<section className="relative pt-24 pb-16 overflow-hidden">
<Helmet>
{/* Page Title and Meta Description */}
<title>Hire Backend Developers | Skilled Experts at WDI</title>
<meta
name="description"
content="Hire Backend Developers from WDI to build secure, high-performance apps. Get expert backend talent to power your business with scalable tech solutions."
/>
{/* Canonical Link */}
<link rel="canonical" href="https://www.wdipl.com/services" />
{/* Open Graph Tags (for Facebook, LinkedIn) */}
<meta property="og:title" content="Hire Backend Developers | Skilled Experts at WDI" />
<meta
property="og:description"
content="Hire Backend Developers from WDI to build secure, high-performance apps. Get expert backend talent to power your business with scalable tech solutions."
/>
<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="Hire Backend Developers | Skilled Experts at WDI" />
<meta
name="twitter:description"
content="Hire Backend Developers from WDI to build secure, high-performance apps. Get expert backend talent to power your business with scalable tech solutions."
/>
<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="absolute inset-0 bg-gradient-to-br from-[#E5195E]/10 via-background to-background" />
<div
className="absolute inset-0 opacity-30"

48
pages/HireFrontendDevelopers.tsx
View File

@@ -17,6 +17,7 @@ import {
Palette,
} from "lucide-react";
import { navigateTo } from "@/App";
import { Helmet } from "react-helmet-async";
export const HireFrontendDevelopers = () => {
const expertise = [
@@ -132,6 +133,53 @@ export const HireFrontendDevelopers = () => {
{/* Hero Section */}
<section className="relative pt-24 pb-16 overflow-hidden">
<Helmet>
{/* Page Title and Meta Description */}
<title>Hire Frontend Developers | Skilled Talent at WDI</title>
<meta
name="description"
content="Hire frontend developers from WDI to build high-quality, responsive, and scalable web applications tailored to your business needs with expert skills"
/>
{/* Canonical Link */}
<link rel="canonical" href="https://www.wdipl.com/services" />
{/* Open Graph Tags (for Facebook, LinkedIn) */}
<meta property="og:title" content="Hire Frontend Developers | Skilled Talent at WDI" />
<meta
property="og:description"
content="Hire frontend developers from WDI to build high-quality, responsive, and scalable web applications tailored to your business needs with expert skills"
/>
<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="Hire Frontend Developers | Skilled Talent at WDI" />
<meta
name="twitter:description"
content="Hire frontend developers from WDI to build high-quality, responsive, and scalable web applications tailored to your business needs with expert skills"
/>
<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="absolute inset-0 bg-gradient-to-br from-[#E5195E]/10 via-background to-background" />
<div
className="absolute inset-0 opacity-30"

48
pages/HireFullStackDevelopers.tsx
View File

@@ -18,6 +18,7 @@ import {
Star,
} from "lucide-react";
import { navigateTo } from "@/App";
import { Helmet } from "react-helmet-async";
export const HireFullStackDevelopers = () => {
const expertise = [
@@ -139,6 +140,53 @@ export const HireFullStackDevelopers = () => {
{/* Hero Section */}
<section className="relative pt-24 pb-16 overflow-hidden">
<Helmet>
{/* Page Title and Meta Description */}
<title>Hire Full Stack Developers from WDI | Expert Web Solutions</title>
<meta
name="description"
content="Hire skilled full stack developers from WDI for seamless front-end and back-end solutions. Get dedicated experts to build scalable, efficient web and mobile apps."
/>
{/* Canonical Link */}
<link rel="canonical" href="https://www.wdipl.com/services" />
{/* Open Graph Tags (for Facebook, LinkedIn) */}
<meta property="og:title" content="Hire Full Stack Developers from WDI | Expert Web Solutions" />
<meta
property="og:description"
content="Hire skilled full stack developers from WDI for seamless front-end and back-end solutions. Get dedicated experts to build scalable, efficient web and mobile apps."
/>
<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="Hire Full Stack Developers from WDI | Expert Web Solutions" />
<meta
name="twitter:description"
content="Hire skilled full stack developers from WDI for seamless front-end and back-end solutions. Get dedicated experts to build scalable, efficient web and mobile apps."
/>
<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="absolute inset-0 bg-gradient-to-br from-[#E5195E]/10 via-background to-background" />
<div
className="absolute inset-0 opacity-30"

48
pages/HireMobileAppDevelopers.tsx
View File

@@ -6,6 +6,7 @@ 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";
import { Helmet } from "react-helmet-async";
export const HireMobileAppDevelopers = () => {
const expertise = [
@@ -98,6 +99,53 @@ export const HireMobileAppDevelopers = () => {
{/* Hero Section */}
<section className="relative pt-24 pb-16 overflow-hidden">
<Helmet>
{/* Page Title and Meta Description */}
<title>Hire Mobile App Developers | Expert Talent at WDI</title>
<meta
name="description"
content="Hire skilled mobile app developers from WDI to build powerful, scalable apps. Get expert developers for iOS, Android, and cross-platform solutions tailored to your needs."
/>
{/* Canonical Link */}
<link rel="canonical" href="https://www.wdipl.com/services" />
{/* Open Graph Tags (for Facebook, LinkedIn) */}
<meta property="og:title" content="Hire Mobile App Developers | Expert Talent at WDI" />
<meta
property="og:description"
content="Hire skilled mobile app developers from WDI to build powerful, scalable apps. Get expert developers for iOS, Android, and cross-platform solutions tailored to your needs."
/>
<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="Hire Mobile App Developers | Expert Talent at WDI" />
<meta
name="twitter:description"
content="Hire skilled mobile app developers from WDI to build powerful, scalable apps. Get expert developers for iOS, Android, and cross-platform solutions tailored to your needs."
/>
<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="absolute inset-0 bg-gradient-to-br from-[#E5195E]/10 via-background to-background" />
<div
className="absolute inset-0 opacity-30"

48
pages/HireQAEngineers.tsx
View File

@@ -18,6 +18,7 @@ import {
Search,
} from "lucide-react";
import { navigateTo } from "@/App";
import { Helmet } from "react-helmet-async";
export const HireQAEngineers = () => {
const expertise = [
@@ -205,6 +206,53 @@ export const HireQAEngineers = () => {
{/* Hero Section */}
<section className="relative pt-24 pb-16 overflow-hidden">
<Helmet>
{/* Page Title and Meta Description */}
<title>Hire QA Engineers from WDI | Ensure Software Quality</title>
<meta
name="description"
content="Hire QA Engineers from WDI to deliver bug-free, high-quality software. Ensure seamless performance with our expert testing and quality assurance team."
/>
{/* Canonical Link */}
<link rel="canonical" href="https://www.wdipl.com/services" />
{/* Open Graph Tags (for Facebook, LinkedIn) */}
<meta property="og:title" content="Hire QA Engineers from WDI | Ensure Software Quality" />
<meta
property="og:description"
content="Hire QA Engineers from WDI to deliver bug-free, high-quality software. Ensure seamless performance with our expert testing and quality assurance team."
/>
<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="Hire QA Engineers from WDI | Ensure Software Quality" />
<meta
name="twitter:description"
content="Hire QA Engineers from WDI to deliver bug-free, high-quality software. Ensure seamless performance with our expert testing and quality assurance team."
/>
<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="absolute inset-0 bg-gradient-to-br from-[#E5195E]/10 via-background to-background" />
<div
className="absolute inset-0 opacity-30"

88
pages/HireTalent.tsx
View File

@@ -6,6 +6,7 @@ import { Badge } from "../components/ui/badge";
import { Card, CardContent } from "../components/ui/card";
import { ArrowRight, Users, Clock, Target, DollarSign, Shield, Zap, CheckCircle, Smartphone, Code, Monitor, Database, Palette, TestTube } from "lucide-react";
import { navigateTo } from "../App";
import { Helmet } from "react-helmet-async";
export const HireTalent = () => {
const talentCategories = [
@@ -107,38 +108,87 @@ export const HireTalent = () => {
return (
<div className="dark min-h-screen bg-background">
<Navigation />
{/* Hero Section */}
<section className="relative pt-24 pb-16 overflow-hidden">
<Helmet>
{/* Page Title and Meta Description */}
<title>Hire Top Tech Talent | Build Your Dream Team with WDI</title>
<meta
name="description"
content="Hire top tech talent with WDI to build your dream team. Access skilled professionals, streamlined hiring, and tailored recruitment solutions for your business."
/>
{/* Canonical Link */}
<link rel="canonical" href="https://www.wdipl.com/services" />
{/* Open Graph Tags (for Facebook, LinkedIn) */}
<meta property="og:title" content="Hire Top Tech Talent | Build Your Dream Team with WDI" />
<meta
property="og:description"
content="Hire top tech talent with WDI to build your dream team. Access skilled professionals, streamlined hiring, and tailored recruitment solutions for your business."
/>
<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="Hire Top Tech Talent | Build Your Dream Team with WDI" />
<meta
name="twitter:description"
content="Hire top tech talent with WDI to build your dream team. Access skilled professionals, streamlined hiring, and tailored recruitment solutions for your business."
/>
<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="absolute inset-0 bg-gradient-to-br from-[#E5195E]/10 via-background to-background" />
<div
<div
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'
}}
/>
<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]">
Your Trusted Staffing Partner
</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 Top Tech Talent: Build Your
Hire Top Tech Talent: Build Your
<span className="bg-gradient-to-r from-[#E5195E] to-[#FF6B9D] bg-clip-text text-transparent"> Dream Team</span> with WDI
</h1>
<p className="text-lg md:text-xl text-muted-foreground mb-8 max-w-3xl mx-auto leading-relaxed">
Connecting You with Exceptional Tech Professionals, Effortlessly. In today's fast-paced digital landscape, access to top-tier technical talent is crucial for success.
</p>
<div className="flex flex-col sm:flex-row gap-4 justify-center">
<div className="flex flex-col sm:flex-row gap-4 justify-center"
onClick={() => navigateTo("/start-a-project")}
>
<Button size="lg" className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white">
Tell Us Your Hiring Needs
<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 Free Consultation
</Button>
</Button> */}
</div>
</div>
</div>
@@ -166,7 +216,7 @@ export const HireTalent = () => {
We provide more than just talent - we deliver complete hiring solutions
</p>
</div>
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto">
{whyChooseWDI.map((benefit, index) => (
<Card key={index} className="bg-card/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300 group">
@@ -196,21 +246,21 @@ export const HireTalent = () => {
Find the perfect expertise for your project needs
</p>
</div>
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
{talentCategories.map((category, index) => (
<Card key={index} className="bg-background/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300 group cursor-pointer" onClick={() => navigateTo(category.href)}>
<CardContent className="p-8">
<category.icon className="w-12 h-12 text-[#E5195E] mb-6 group-hover:scale-110 transition-transform duration-300" />
<h3 className="text-xl font-bold text-white mb-3 group-hover:text-[#E5195E] transition-colors duration-300">
{category.title}
</h3>
<p className="text-muted-foreground mb-6 leading-relaxed">
{category.description}
</p>
<div className="flex flex-wrap gap-2 mb-6">
{category.skills.map((skill, skillIndex) => (
<Badge key={skillIndex} variant="outline" className="border-white/20 text-white text-xs">
@@ -218,7 +268,7 @@ export const HireTalent = () => {
</Badge>
))}
</div>
<Button variant="ghost" className="text-[#E5195E] hover:bg-[#E5195E]/10 p-0">
Explore Talent
<ArrowRight className="ml-2 w-4 h-4" />
@@ -241,7 +291,7 @@ export const HireTalent = () => {
Simplified 4-step process to get you the right talent quickly
</p>
</div>
<div className="max-w-5xl mx-auto">
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
{hiringProcess.map((process, index) => (
@@ -254,11 +304,11 @@ export const HireTalent = () => {
<div className="hidden lg:block absolute top-8 left-full w-full h-0.5 bg-gradient-to-r from-[#E5195E]/50 to-transparent" />
)}
</div>
<h3 className="text-lg font-semibold text-white mb-3">
{process.title}
</h3>
<p className="text-muted-foreground text-sm leading-relaxed">
{process.description}
</p>
@@ -277,7 +327,7 @@ export const HireTalent = () => {
Trusted by Leading Companies
</h2>
</div>
<div className="grid grid-cols-2 md:grid-cols-4 gap-8">
{[
{ number: "500+", label: "Successful Placements" },
@@ -307,7 +357,9 @@ export const HireTalent = () => {
Let's discuss your hiring needs and find the perfect talent to drive your projects forward.
</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")}
>
Start Hiring Now
<ArrowRight className="ml-2 w-4 h-4" />
</Button>

48
pages/HireUIUXDesigners.tsx
View File

@@ -17,6 +17,7 @@ import {
TestTube,
} from "lucide-react";
import { navigateTo } from "@/App";
import { Helmet } from "react-helmet-async";
export const HireUIUXDesigners = () => {
const expertise = [
@@ -182,6 +183,53 @@ export const HireUIUXDesigners = () => {
{/* Hero Section */}
<section className="relative pt-24 pb-16 overflow-hidden">
<Helmet>
{/* Page Title and Meta Description */}
<title>Hire UI/UX Designers for Your Project | WDI</title>
<meta
name="description"
content="Engage top UI/UX designers from WDI for stunning, user-centric web and app interfaces. Elevate your digital products with award-winning design expertise."
/>
{/* Canonical Link */}
<link rel="canonical" href="https://www.wdipl.com/services" />
{/* Open Graph Tags (for Facebook, LinkedIn) */}
<meta property="og:title" content="Hire UI/UX Designers for Your Project | WDI" />
<meta
property="og:description"
content="Engage top UI/UX designers from WDI for stunning, user-centric web and app interfaces. Elevate your digital products with award-winning design expertise."
/>
<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="Hire UI/UX Designers for Your Project | WDI" />
<meta
name="twitter:description"
content="Engage top UI/UX designers from WDI for stunning, user-centric web and app interfaces. Elevate your digital products with award-winning design expertise."
/>
<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="absolute inset-0 bg-gradient-to-br from-[#E5195E]/10 via-background to-background" />
<div
className="absolute inset-0 opacity-30"

82
pages/ManufacturingAutomation.tsx
View File

@@ -10,16 +10,64 @@ import { SplitCallToAction } from "../components/SplitCallToAction";
import { Card, CardContent } from "../components/ui/card";
import { Badge } from "../components/ui/badge";
import { Button } from "../components/ui/button";
import {
Factory, Cog, BarChart3, Shield, Bot,
Eye, Database, Target, CheckCircle, Star,
import {
Factory, Cog, BarChart3, Shield, Bot,
Eye, Database, Target, CheckCircle, Star,
Zap, Globe, Clock, Award, Settings
} from "lucide-react";
import { Helmet } from "react-helmet-async";
// Problem Solution Block Component
const ProblemSolutionBlock = () => {
return (
<section className="py-20 bg-[#0E0E0E]">
<Helmet>
{/* Page Title and Meta Description */}
<title>Manufacturing Automation Solutions & Services | WDI</title>
<meta
name="description"
content="WDI delivers advanced manufacturing automation with custom optics, robotics, and precision controls to optimize production, quality, and efficiency in industry."
/>
{/* Canonical Link */}
<link rel="canonical" href="https://www.wdipl.com/services" />
{/* Open Graph Tags (for Facebook, LinkedIn) */}
<meta property="og:title" content="Manufacturing Automation Solutions & Services | WDI" />
<meta
property="og:description"
content="WDI delivers advanced manufacturing automation with custom optics, robotics, and precision controls to optimize production, quality, and efficiency in industry."
/>
<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="Manufacturing Automation Solutions & Services | WDI" />
<meta
name="twitter:description"
content="WDI delivers advanced manufacturing automation with custom optics, robotics, and precision controls to optimize production, quality, and efficiency in industry."
/>
<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">
<motion.div
initial={{ opacity: 0, y: 30 }}
@@ -32,7 +80,7 @@ const ProblemSolutionBlock = () => {
<span className="text-white">Addressing the Core Challenges of </span>
<span className="text-[#E5195E]">Manufacturing Automation</span>
</h2>
<div className="grid lg:grid-cols-2 gap-12 items-center">
<motion.div
initial={{ opacity: 0, x: -30 }}
@@ -53,7 +101,7 @@ const ProblemSolutionBlock = () => {
</p>
</div>
</motion.div>
<motion.div
initial={{ opacity: 0, x: 30 }}
whileInView={{ opacity: 1, x: 0 }}
@@ -137,7 +185,7 @@ const IconWithDescriptionGrid = () => {
Comprehensive tools to create intelligent manufacturing systems that maximize efficiency and minimize downtime.
</p>
</motion.div>
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
{features.map((feature, index) => {
const IconComponent = feature.icon;
@@ -214,7 +262,7 @@ const ThreeColumnFeatureBlock = () => {
Leverage our expertise to create manufacturing systems that truly transform your operations.
</p>
</motion.div>
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
{advantages.map((advantage, index) => {
const IconComponent = advantage.icon;
@@ -281,7 +329,7 @@ const CaseStudyHighlightGrid = () => {
Real results from our manufacturing automation implementations that transformed production operations.
</p>
</motion.div>
<div className="grid lg:grid-cols-2 gap-8">
{caseStudies.map((study, index) => (
<motion.div
@@ -355,7 +403,7 @@ export const ManufacturingAutomation = () => {
return (
<div className="min-h-screen bg-[#0E0E0E]">
<Navigation />
<HeroBanner
category="Industrial & Emerging Tech"
title="Manufacturing Automation"
@@ -372,29 +420,29 @@ export const ManufacturingAutomation = () => {
/>
<ProblemSolutionBlock />
<IconWithDescriptionGrid />
<ThreeColumnFeatureBlock />
<div className="bg-[#0E0E0E]">
<ProcessSection />
</div>
<CaseStudyHighlightGrid />
<div className="bg-[#0E0E0E]">
<FAQSection
<FAQSection
title="Manufacturing Automation FAQs"
subtitle="Get answers to common questions about our manufacturing automation development services."
faqs={manufacturingAutomationFAQs}
/>
</div>
<div className="bg-black">
<SplitCallToAction />
</div>
<Footer />
</div>
);

89
pages/MedicalComplianceSolutions.tsx
View File

@@ -48,11 +48,59 @@ import {
Archive,
} from "lucide-react";
import { navigateTo } from "@/App";
import { Helmet } from "react-helmet-async";
// Medical Compliance Hero Section
const MedicalComplianceHero = () => {
return (
<section className="relative py-20 overflow-hidden bg-black">
<Helmet>
{/* Page Title and Meta Description */}
<title>Medical Compliance Solutions & Services by WDI</title>
<meta
name="description"
content="WDI delivers medical compliance solutions to automate regulatory processes, minimize risks, and ensure your healthcare organization stays fully compliant."
/>
{/* Canonical Link */}
<link rel="canonical" href="https://www.wdipl.com/services" />
{/* Open Graph Tags (for Facebook, LinkedIn) */}
<meta property="og:title" content="Medical Compliance Solutions & Services by WDI" />
<meta
property="og:description"
content="WDI delivers medical compliance solutions to automate regulatory processes, minimize risks, and ensure your healthcare organization stays fully compliant."
/>
<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="Medical Compliance Solutions & Services by WDI" />
<meta
name="twitter:description"
content="WDI delivers medical compliance solutions to automate regulatory processes, minimize risks, and ensure your healthcare organization stays fully compliant."
/>
<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
@@ -242,15 +290,14 @@ const MedicalComplianceHero = () => {
>
<div className="flex items-center gap-2 mb-2">
<compliance.icon
className={`w-4 h-4 ${
compliance.color === "green"
className={`w-4 h-4 ${compliance.color === "green"
? "text-green-400"
: compliance.color === "yellow"
? "text-yellow-400"
: compliance.color === "blue"
? "text-blue-400"
: "text-gray-400"
}`}
? "text-yellow-400"
: compliance.color === "blue"
? "text-blue-400"
: "text-gray-400"
}`}
/>
<span className="text-white font-medium text-sm">
{compliance.name}
@@ -352,22 +399,20 @@ const MedicalComplianceHero = () => {
className="flex items-center gap-3 p-3 rounded-lg hover:bg-white/5 transition-colors"
>
<div
className={`w-8 h-8 rounded-full flex items-center justify-center ${
activity.color === "blue"
className={`w-8 h-8 rounded-full flex items-center justify-center ${activity.color === "blue"
? "bg-blue-500/20"
: activity.color === "green"
? "bg-green-500/20"
: "bg-purple-500/20"
}`}
? "bg-green-500/20"
: "bg-purple-500/20"
}`}
>
<activity.icon
className={`w-4 h-4 ${
activity.color === "blue"
className={`w-4 h-4 ${activity.color === "blue"
? "text-blue-400"
: activity.color === "green"
? "text-green-400"
: "text-purple-400"
}`}
? "text-green-400"
: "text-purple-400"
}`}
/>
</div>
<div className="flex-1">
@@ -898,14 +943,12 @@ const MedicalComplianceProcess = () => {
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`}
className={`flex-1 ${isEven ? "lg:text-right" : "lg:text-left"
} text-center lg:text-left`}
>
<div className="bg-gray-900/50 backdrop-blur-md rounded-2xl border border-gray-800 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">

82
pages/MicrolearningApps.tsx
View File

@@ -10,16 +10,64 @@ import { SplitCallToAction } from "../components/SplitCallToAction";
import { Card, CardContent } from "../components/ui/card";
import { Badge } from "../components/ui/badge";
import { Button } from "../components/ui/button";
import {
Smartphone, Gamepad2, Brain, Download, BarChart3,
Bell, FileText, Target, CheckCircle, Star,
import {
Smartphone, Gamepad2, Brain, Download, BarChart3,
Bell, FileText, Target, CheckCircle, Star,
Zap, Layers, Users, Award, Clock
} from "lucide-react";
import { Helmet } from "react-helmet-async";
// Problem Solution Block Component
const ProblemSolutionBlock = () => {
return (
<section className="py-20 bg-[#0E0E0E]">
<Helmet>
{/* Page Title and Meta Description */}
<title>Microlearning Apps by WDI | Innovative Learning Solutions</title>
<meta
name="description"
content="Explore WDI's Microlearning Apps for effective, engaging, and flexible education. Transform learning experiences with our cutting-edge solutions."
/>
{/* Canonical Link */}
<link rel="canonical" href="https://www.wdipl.com/services" />
{/* Open Graph Tags (for Facebook, LinkedIn) */}
<meta property="og:title" content="Microlearning Apps by WDI | Innovative Learning Solutions" />
<meta
property="og:description"
content="Explore WDI's Microlearning Apps for effective, engaging, and flexible education. Transform learning experiences with our cutting-edge solutions."
/>
<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="Microlearning Apps by WDI | Innovative Learning Solutions" />
<meta
name="twitter:description"
content="Explore WDI's Microlearning Apps for effective, engaging, and flexible education. Transform learning experiences with our cutting-edge solutions."
/>
<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">
<motion.div
initial={{ opacity: 0, y: 30 }}
@@ -32,7 +80,7 @@ const ProblemSolutionBlock = () => {
<span className="text-white">Addressing the Core Challenges of </span>
<span className="text-[#E5195E]">Microlearning Apps</span>
</h2>
<div className="grid lg:grid-cols-2 gap-12 items-center">
<motion.div
initial={{ opacity: 0, x: -30 }}
@@ -53,7 +101,7 @@ const ProblemSolutionBlock = () => {
</p>
</div>
</motion.div>
<motion.div
initial={{ opacity: 0, x: 30 }}
whileInView={{ opacity: 1, x: 0 }}
@@ -137,7 +185,7 @@ const IconWithDescriptionGrid = () => {
Essential features to create engaging, efficient, and addictive microlearning experiences.
</p>
</motion.div>
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
{features.map((feature, index) => {
const IconComponent = feature.icon;
@@ -214,7 +262,7 @@ const ThreeColumnFeatureBlock = () => {
Leverage our expertise in mobile learning to create apps that truly engage and educate.
</p>
</motion.div>
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
{advantages.map((advantage, index) => {
const IconComponent = advantage.icon;
@@ -281,7 +329,7 @@ const CaseStudyHighlightGrid = () => {
Real results from our microlearning app implementations that transformed how people learn.
</p>
</motion.div>
<div className="grid lg:grid-cols-2 gap-8">
{caseStudies.map((study, index) => (
<motion.div
@@ -355,7 +403,7 @@ export const MicrolearningApps = () => {
return (
<div className="min-h-screen bg-[#0E0E0E]">
<Navigation />
<HeroBanner
category="Learning & Education"
title="Microlearning Apps"
@@ -372,29 +420,29 @@ export const MicrolearningApps = () => {
/>
<ProblemSolutionBlock />
<IconWithDescriptionGrid />
<ThreeColumnFeatureBlock />
<div className="bg-[#0E0E0E]">
<ProcessSection />
</div>
<CaseStudyHighlightGrid />
<div className="bg-[#0E0E0E]">
<FAQSection
<FAQSection
title="Microlearning App FAQs"
subtitle="Get answers to common questions about our microlearning app development services."
faqs={microlearningFAQs}
/>
</div>
<div className="bg-black">
<SplitCallToAction />
</div>
<Footer />
</div>
);

48
pages/NLPTextAnalytics.tsx
View File

@@ -46,11 +46,59 @@ 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 { Helmet } from "react-helmet-async";
// NLP & Text Analytics Hero Section
const NLPHeroWithCTA = () => {
return (
<section className="relative py-20 overflow-hidden bg-black">
<Helmet>
{/* Page Title and Meta Description */}
<title>NLP & Text Analytics | Language AI & Text Intelligence | WDI</title>
<meta
name="description"
content="WDI offers NLP and text analytics services that extract meaning from unstructured data. Automate insight discovery and enhance AI applications."
/>
{/* Canonical Link */}
<link rel="canonical" href="https://www.wdipl.com/services" />
{/* Open Graph Tags (for Facebook, LinkedIn) */}
<meta property="og:title" content="NLP & Text Analytics | Language AI & Text Intelligence | WDI" />
<meta
property="og:description"
content="WDI offers NLP and text analytics services that extract meaning from unstructured data. Automate insight discovery and enhance AI applications."
/>
<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="NLP & Text Analytics | Language AI & Text Intelligence | WDI" />
<meta
name="twitter:description"
content="WDI offers NLP and text analytics services that extract meaning from unstructured data. Automate insight discovery and enhance AI applications."
/>
<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

48
pages/NativeAppDevelopment.tsx
View File

@@ -106,11 +106,59 @@ import {
Microscope,
} from "lucide-react";
import { navigateTo } from "@/App";
import { Helmet } from "react-helmet-async";
// Native App Development Hero Section
const NativeHeroWithCTA = () => {
return (
<section className="relative py-20 overflow-hidden bg-black">
<Helmet>
{/* Page Title and Meta Description */}
<title>Native App Development Services | WDI Expert Solutions</title>
<meta
name="description"
content="WDI specializes in native app development, delivering high-performance, secure, and user-friendly apps for iOS and Android platforms. Boost your mobile strategy today."
/>
{/* Canonical Link */}
<link rel="canonical" href="https://www.wdipl.com/services" />
{/* Open Graph Tags (for Facebook, LinkedIn) */}
<meta property="og:title" content="Native App Development Services | WDI Expert Solutions" />
<meta
property="og:description"
content="WDI specializes in native app development, delivering high-performance, secure, and user-friendly apps for iOS and Android platforms. Boost your mobile strategy today."
/>
<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="Native App Development Services | WDI Expert Solutions" />
<meta
name="twitter:description"
content="WDI specializes in native app development, delivering high-performance, secure, and user-friendly apps for iOS and Android platforms. Boost your mobile strategy today."
/>
<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

48
pages/OTTStreamingApps.tsx
View File

@@ -26,11 +26,59 @@ import {
Award,
Brain,
} from "lucide-react";
import { Helmet } from "react-helmet-async";
// Problem Solution Block Component
const ProblemSolutionBlock = () => {
return (
<section className="py-20 bg-[#0E0E0E]">
<Helmet>
{/* Page Title and Meta Description */}
<title>OTT & Streaming Apps by WDI | Custom Media Solutions</title>
<meta
name="description"
content="WDI delivers innovative OTT & Streaming Apps for seamless content delivery, user engagement, and scalable media experiences tailored to your business needs."
/>
{/* Canonical Link */}
<link rel="canonical" href="https://www.wdipl.com/services" />
{/* Open Graph Tags (for Facebook, LinkedIn) */}
<meta property="og:title" content="OTT & Streaming Apps by WDI | Custom Media Solutions" />
<meta
property="og:description"
content="WDI delivers innovative OTT & Streaming Apps for seamless content delivery, user engagement, and scalable media experiences tailored to your business needs."
/>
<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="OTT & Streaming Apps by WDI | Custom Media Solutions" />
<meta
name="twitter:description"
content="WDI delivers innovative OTT & Streaming Apps for seamless content delivery, user engagement, and scalable media experiences tailored to your business needs."
/>
<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">
<motion.div
initial={{ opacity: 0, y: 30 }}

82
pages/OilGasMonitoringSystems.tsx
View File

@@ -10,16 +10,64 @@ import { SplitCallToAction } from "../components/SplitCallToAction";
import { Card, CardContent } from "../components/ui/card";
import { Badge } from "../components/ui/badge";
import { Button } from "../components/ui/button";
import {
Activity, AlertTriangle, BarChart3, Settings, Eye,
Database, Shield, Target, CheckCircle, Star,
import {
Activity, AlertTriangle, BarChart3, Settings, Eye,
Database, Shield, Target, CheckCircle, Star,
Zap, Globe, Clock, Award, Gauge
} from "lucide-react";
import { Helmet } from "react-helmet-async";
// Problem Solution Block Component
const ProblemSolutionBlock = () => {
return (
<section className="py-20 bg-[#0E0E0E]">
<Helmet>
{/* Page Title and Meta Description */}
<title>Oil & Gas Monitoring System Solutions by WDI</title>
<meta
name="description"
content="WDI delivers advanced Oil & Gas Monitoring Systems with real-time data, safety alerts, and automation to optimize operations and ensure regulatory compliance."
/>
{/* Canonical Link */}
<link rel="canonical" href="https://www.wdipl.com/services" />
{/* Open Graph Tags (for Facebook, LinkedIn) */}
<meta property="og:title" content="Oil & Gas Monitoring System Solutions by WDI" />
<meta
property="og:description"
content="WDI delivers advanced Oil & Gas Monitoring Systems with real-time data, safety alerts, and automation to optimize operations and ensure regulatory compliance."
/>
<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="Oil & Gas Monitoring System Solutions by WDI" />
<meta
name="twitter:description"
content="WDI delivers advanced Oil & Gas Monitoring Systems with real-time data, safety alerts, and automation to optimize operations and ensure regulatory compliance."
/>
<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">
<motion.div
initial={{ opacity: 0, y: 30 }}
@@ -32,7 +80,7 @@ const ProblemSolutionBlock = () => {
<span className="text-white">Addressing the Core Challenges of </span>
<span className="text-[#E5195E]">Oil & Gas Monitoring Systems</span>
</h2>
<div className="grid lg:grid-cols-2 gap-12 items-center">
<motion.div
initial={{ opacity: 0, x: -30 }}
@@ -53,7 +101,7 @@ const ProblemSolutionBlock = () => {
</p>
</div>
</motion.div>
<motion.div
initial={{ opacity: 0, x: 30 }}
whileInView={{ opacity: 1, x: 0 }}
@@ -137,7 +185,7 @@ const IconWithDescriptionGrid = () => {
Comprehensive tools to create robust monitoring solutions that ensure safety, compliance, and operational efficiency.
</p>
</motion.div>
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
{features.map((feature, index) => {
const IconComponent = feature.icon;
@@ -214,7 +262,7 @@ const ThreeColumnFeatureBlock = () => {
Leverage our expertise to create monitoring systems that truly ensure safety, compliance, and operational excellence.
</p>
</motion.div>
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
{advantages.map((advantage, index) => {
const IconComponent = advantage.icon;
@@ -281,7 +329,7 @@ const CaseStudyHighlightGrid = () => {
Real results from our monitoring system implementations that enhanced safety and operational efficiency.
</p>
</motion.div>
<div className="grid lg:grid-cols-2 gap-8">
{caseStudies.map((study, index) => (
<motion.div
@@ -355,7 +403,7 @@ export const OilGasMonitoringSystems = () => {
return (
<div className="min-h-screen bg-[#0E0E0E]">
<Navigation />
<HeroBanner
category="Industrial & Emerging Tech"
title="Oil & Gas Monitoring Systems"
@@ -372,29 +420,29 @@ export const OilGasMonitoringSystems = () => {
/>
<ProblemSolutionBlock />
<IconWithDescriptionGrid />
<ThreeColumnFeatureBlock />
<div className="bg-[#0E0E0E]">
<ProcessSection />
</div>
<CaseStudyHighlightGrid />
<div className="bg-[#0E0E0E]">
<FAQSection
<FAQSection
title="Oil & Gas Monitoring System FAQs"
subtitle="Get answers to common questions about our oil and gas monitoring system development services."
faqs={oilGasMonitoringFAQs}
/>
</div>
<div className="bg-black">
<SplitCallToAction />
</div>
<Footer />
</div>
);

82
pages/OnDemandServices.tsx
View File

@@ -10,16 +10,64 @@ import { SplitCallToAction } from "../components/SplitCallToAction";
import { Card, CardContent } from "../components/ui/card";
import { Badge } from "../components/ui/badge";
import { Button } from "../components/ui/button";
import {
Smartphone, Users, MapPin, CreditCard, Clock,
Star, BarChart3, Target, CheckCircle, Zap,
import {
Smartphone, Users, MapPin, CreditCard, Clock,
Star, BarChart3, Target, CheckCircle, Zap,
Shield, Globe, Award, Settings, Bell
} from "lucide-react";
import { Helmet } from "react-helmet-async";
// Problem Solution Block Component
const ProblemSolutionBlock = () => {
return (
<section className="py-20 bg-[#0E0E0E]">
<Helmet>
{/* Page Title and Meta Description */}
<title>On-Demand Services by WDI | Custom Mobility Solutions</title>
<meta
name="description"
content="WDI delivers innovative On-Demand Services apps with flexible, scalable solutions for seamless booking, real-time tracking, and enhanced user experience."
/>
{/* Canonical Link */}
<link rel="canonical" href="https://www.wdipl.com/services" />
{/* Open Graph Tags (for Facebook, LinkedIn) */}
<meta property="og:title" content="On-Demand Services by WDI | Custom Mobility Solutions" />
<meta
property="og:description"
content="WDI delivers innovative On-Demand Services apps with flexible, scalable solutions for seamless booking, real-time tracking, and enhanced user experience."
/>
<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="On-Demand Services by WDI | Custom Mobility Solutions" />
<meta
name="twitter:description"
content="WDI delivers innovative On-Demand Services apps with flexible, scalable solutions for seamless booking, real-time tracking, and enhanced user experience."
/>
<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">
<motion.div
initial={{ opacity: 0, y: 30 }}
@@ -32,7 +80,7 @@ const ProblemSolutionBlock = () => {
<span className="text-white">Addressing the Core Challenges of </span>
<span className="text-[#E5195E]">On-Demand Services</span>
</h2>
<div className="grid lg:grid-cols-2 gap-12 items-center">
<motion.div
initial={{ opacity: 0, x: -30 }}
@@ -53,7 +101,7 @@ const ProblemSolutionBlock = () => {
</p>
</div>
</motion.div>
<motion.div
initial={{ opacity: 0, x: 30 }}
whileInView={{ opacity: 1, x: 0 }}
@@ -137,7 +185,7 @@ const IconWithDescriptionGrid = () => {
Comprehensive tools to create seamless on-demand experiences that connect customers with service providers efficiently.
</p>
</motion.div>
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
{features.map((feature, index) => {
const IconComponent = feature.icon;
@@ -214,7 +262,7 @@ const ThreeColumnFeatureBlock = () => {
Leverage our expertise to create on-demand platforms that truly serve modern consumer needs.
</p>
</motion.div>
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
{advantages.map((advantage, index) => {
const IconComponent = advantage.icon;
@@ -281,7 +329,7 @@ const CaseStudyHighlightGrid = () => {
Real results from our on-demand platform implementations that transformed service delivery.
</p>
</motion.div>
<div className="grid lg:grid-cols-2 gap-8">
{caseStudies.map((study, index) => (
<motion.div
@@ -355,7 +403,7 @@ export const OnDemandServices = () => {
return (
<div className="min-h-screen bg-[#0E0E0E]">
<Navigation />
<HeroBanner
category="Mobility & Logistics"
title="On-Demand Services"
@@ -372,29 +420,29 @@ export const OnDemandServices = () => {
/>
<ProblemSolutionBlock />
<IconWithDescriptionGrid />
<ThreeColumnFeatureBlock />
<div className="bg-[#0E0E0E]">
<ProcessSection />
</div>
<CaseStudyHighlightGrid />
<div className="bg-[#0E0E0E]">
<FAQSection
<FAQSection
title="On-Demand Services FAQs"
subtitle="Get answers to common questions about our on-demand platform development services."
faqs={onDemandServicesFAQs}
/>
</div>
<div className="bg-black">
<SplitCallToAction />
</div>
<Footer />
</div>
);

48
pages/PWADevelopment.tsx
View File

@@ -49,11 +49,59 @@ import { ShimmerButton } from "../components/ui/shimmer-button";
import tradersCircuitImage from "../src/images/traders-circuit.webp";
import goodTimesImage from "../src/images/goodtimes.webp";
import prospertyImage from "../src/images/prosperty.webp";
import { Helmet } from "react-helmet-async";
// PWA Hero Section
const PWAHeroWithCTA = () => {
return (
<section className="relative py-20 overflow-hidden bg-black">
<Helmet>
{/* Page Title and Meta Description */}
<title>Progressive Web App (PWA) Development by WDI | Next-Gen Solutions</title>
<meta
name="description"
content="WDI delivers cutting-edge Progressive Web App (PWA) development for fast, reliable, and engaging user experiences with offline access & seamless multi-device support."
/>
{/* Canonical Link */}
<link rel="canonical" href="https://www.wdipl.com/services" />
{/* Open Graph Tags (for Facebook, LinkedIn) */}
<meta property="og:title" content="Progressive Web App (PWA) Development by WDI | Next-Gen Solutions" />
<meta
property="og:description"
content="WDI delivers cutting-edge Progressive Web App (PWA) development for fast, reliable, and engaging user experiences with offline access & seamless multi-device support."
/>
<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="Progressive Web App (PWA) Development by WDI | Next-Gen Solutions" />
<meta
name="twitter:description"
content="WDI delivers cutting-edge Progressive Web App (PWA) development for fast, reliable, and engaging user experiences with offline access & seamless multi-device support."
/>
<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

48
pages/PredictiveAnalyticsForecasting.tsx
View File

@@ -48,11 +48,59 @@ 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 { Helmet } from "react-helmet-async";
// Predictive Analytics & Forecasting Hero Section
const PredictiveAnalyticsHeroWithCTA = () => {
return (
<section className="relative py-20 overflow-hidden bg-black">
<Helmet>
{/* Page Title and Meta Description */}
<title>Predictive Analytics | Forecasting & AI Insights | WDI</title>
<meta
name="description"
content="Leverage WDI’s predictive analytics solutions to forecast trends and behaviors. Drive proactive decisions with AI-powered forecasting systems."
/>
{/* Canonical Link */}
<link rel="canonical" href="https://www.wdipl.com/services" />
{/* Open Graph Tags (for Facebook, LinkedIn) */}
<meta property="og:title" content="Predictive Analytics | Forecasting & AI Insights | WDI" />
<meta
property="og:description"
content="Leverage WDI’s predictive analytics solutions to forecast trends and behaviors. Drive proactive decisions with AI-powered forecasting systems."
/>
<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="Predictive Analytics | Forecasting & AI Insights | WDI" />
<meta
name="twitter:description"
content="Leverage WDI’s predictive analytics solutions to forecast trends and behaviors. Drive proactive decisions with AI-powered forecasting systems."
/>
<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

58
pages/ProductModernization.tsx
View File

@@ -45,11 +45,59 @@ import { Card, CardContent } from "../components/ui/card";
import { ShimmerButton } from "../components/ui/shimmer-button";
import awsLogo from "../src/images/aws-logo.png";
import { navigateTo } from "@/App";
import { Helmet } from "react-helmet-async";
// Product Modernization Hero Section
const ModernizationHeroWithCTA = () => {
return (
<section className="relative py-20 overflow-hidden bg-black">
<Helmet>
{/* Page Title and Meta Description */}
<title>Product Modernization That Revives Legacy Systems | WDI</title>
<meta
name="description"
content="WDI’s Product Modernization services help upgrade outdated software into fast, secure, and scalable solutions that meet today’s business demands."
/>
{/* Canonical Link */}
<link rel="canonical" href="https://www.wdipl.com/services" />
{/* Open Graph Tags (for Facebook, LinkedIn) */}
<meta property="og:title" content="Product Modernization That Revives Legacy Systems | WDI" />
<meta
property="og:description"
content="WDI’s Product Modernization services help upgrade outdated software into fast, secure, and scalable solutions that meet today’s business demands."
/>
<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="Product Modernization That Revives Legacy Systems | WDI" />
<meta
name="twitter:description"
content="WDI’s Product Modernization services help upgrade outdated software into fast, secure, and scalable solutions that meet today’s business demands."
/>
<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
@@ -506,14 +554,12 @@ const ModernizationProcess = () => {
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`}
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">

89
pages/RealEstateTech.tsx
View File

@@ -42,11 +42,59 @@ 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 { Helmet } from "react-helmet-async";
// Real Estate Tech Hero Section
const RealEstateTechHero = () => {
return (
<section className="relative py-20 overflow-hidden bg-black">
<Helmet>
{/* Page Title and Meta Description */}
<title>Real Estate Tech Solutions & Services by WDI</title>
<meta
name="description"
content="WDI delivers advanced Real Estate Tech solutions, transforming property management and transactions with AI, analytics, and seamless PropTech platforms."
/>
{/* Canonical Link */}
<link rel="canonical" href="https://www.wdipl.com/services" />
{/* Open Graph Tags (for Facebook, LinkedIn) */}
<meta property="og:title" content="Real Estate Tech Solutions & Services by WDI" />
<meta
property="og:description"
content="WDI delivers advanced Real Estate Tech solutions, transforming property management and transactions with AI, analytics, and seamless PropTech platforms."
/>
<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="Real Estate Tech Solutions & Services by WDI" />
<meta
name="twitter:description"
content="WDI delivers advanced Real Estate Tech solutions, transforming property management and transactions with AI, analytics, and seamless PropTech platforms."
/>
<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
@@ -237,15 +285,14 @@ const RealEstateTechHero = () => {
>
<div className="flex items-center gap-2 mb-2">
<status.icon
className={`w-4 h-4 ${
status.color === "green"
className={`w-4 h-4 ${status.color === "green"
? "text-green-400"
: status.color === "orange"
? "text-orange-400"
: status.color === "red"
? "text-red-400"
: "text-blue-400"
}`}
? "text-orange-400"
: status.color === "red"
? "text-red-400"
: "text-blue-400"
}`}
/>
<span className="text-white font-medium text-sm">
{status.name}
@@ -347,22 +394,20 @@ const RealEstateTechHero = () => {
className="flex items-center gap-3 p-3 rounded-lg hover:bg-white/5 transition-colors"
>
<div
className={`w-8 h-8 rounded-full flex items-center justify-center ${
activity.color === "green"
className={`w-8 h-8 rounded-full flex items-center justify-center ${activity.color === "green"
? "bg-green-500/20"
: activity.color === "orange"
? "bg-orange-500/20"
: "bg-blue-500/20"
}`}
? "bg-orange-500/20"
: "bg-blue-500/20"
}`}
>
<activity.icon
className={`w-4 h-4 ${
activity.color === "green"
className={`w-4 h-4 ${activity.color === "green"
? "text-green-400"
: activity.color === "orange"
? "text-orange-400"
: "text-blue-400"
}`}
? "text-orange-400"
: "text-blue-400"
}`}
/>
</div>
<div className="flex-1">
@@ -897,14 +942,12 @@ const RealEstateTechProcess = () => {
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`}
className={`flex-1 ${isEven ? "lg:text-right" : "lg:text-left"
} text-center lg:text-left`}
>
<div className="bg-gray-900/50 backdrop-blur-md rounded-2xl border border-gray-800 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">

48
pages/RecommendationEngines.tsx
View File

@@ -50,11 +50,59 @@ 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 { Helmet } from "react-helmet-async";
// Personalized Recommendation Engines Hero Section
const RecommendationEnginesHeroWithCTA = () => {
return (
<section className="relative py-20 overflow-hidden bg-black">
<Helmet>
{/* Page Title and Meta Description */}
<title>Recommendation Engines | AI-Powered Personalization | WDI</title>
<meta
name="description"
content="WDI develops AI recommendation systems for hyper-personalized experiences. Improve engagement, conversion, and user satisfaction with smart engines."
/>
{/* Canonical Link */}
<link rel="canonical" href="https://www.wdipl.com/services" />
{/* Open Graph Tags (for Facebook, LinkedIn) */}
<meta property="og:title" content="Recommendation Engines | AI-Powered Personalization | WDI" />
<meta
property="og:description"
content="WDI develops AI recommendation systems for hyper-personalized experiences. Improve engagement, conversion, and user satisfaction with smart engines."
/>
<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="Recommendation Engines | AI-Powered Personalization | WDI" />
<meta
name="twitter:description"
content="WDI develops AI recommendation systems for hyper-personalized experiences. Improve engagement, conversion, and user satisfaction with smart engines."
/>
<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

106
pages/Resources.tsx
View File

@@ -12,16 +12,64 @@ import { Card, CardContent } from "../components/ui/card";
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "../components/ui/accordion";
import { GridPattern } from "../components/GridPattern";
import { navigateTo } from "../App";
import {
BookOpen, FileText, Star, FileCheck, HelpCircle, ArrowRight, Download,
import {
BookOpen, FileText, Star, FileCheck, HelpCircle, ArrowRight, Download,
Calendar, Users, TrendingUp, MessageSquare, Brain, Award, Target, Globe,
Heart, Shield, Eye, CheckCircle, Lightbulb, Coffee, Monitor, Smartphone, Rocket
} from "lucide-react";
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>Resources | Industry Best Practices & Insights by WDI</title>
<meta
name="description"
content="Access WDI’s library of resources, case studies, whitepapers, and expert articles, designed to reflect industry best practices and real-world impact."
/>
{/* Canonical Link */}
<link rel="canonical" href="https://www.wdipl.com/services" />
{/* Open Graph Tags (for Facebook, LinkedIn) */}
<meta property="og:title" content="Resources | Industry Best Practices & Insights by WDI" />
<meta
property="og:description"
content="Access WDI’s library of resources, case studies, whitepapers, and expert articles, designed to reflect industry best practices and real-world impact."
/>
<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="Resources | Industry Best Practices & Insights by WDI" />
<meta
name="twitter:description"
content="Access WDI’s library of resources, case studies, whitepapers, and expert articles, designed to reflect industry best practices and real-world impact."
/>
<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
@@ -45,12 +93,12 @@ const HeroWithCTA = () => {
<span className="text-white">Insights, Knowledge & </span>
<span className="text-[#E5195E]">Success Stories</span>
</h1>
<p className="text-lg text-gray-300 leading-relaxed max-w-lg">
Empower your decisions with WDI's comprehensive library of articles, case studies, client testimonials, and industry whitepapers.
</p>
</div>
{/* CTAs */}
<motion.div
initial={{ opacity: 0, y: 20 }}
@@ -67,7 +115,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')}
>
<FileText className="w-4 h-4 flex-shrink-0" />
@@ -75,7 +123,7 @@ const HeroWithCTA = () => {
</Button>
</motion.div>
</motion.div>
{/* Right side with stats */}
<motion.div
initial={{ opacity: 0, x: 50 }}
@@ -93,17 +141,17 @@ const HeroWithCTA = () => {
<div className="text-3xl lg:text-4xl font-bold text-white">100+</div>
<div className="text-sm text-gray-400 leading-tight">Blog Articles</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">Case Studies</div>
</div>
<div className="space-y-2 flex flex-col items-center">
<div className="text-3xl lg:text-4xl font-bold text-white">25+</div>
<div className="text-sm text-gray-400 leading-tight">Whitepapers</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-sm text-gray-400 leading-tight">Client Satisfaction</div>
@@ -145,7 +193,7 @@ const HorizontalTagScroller = () => {
Everything you need to understand our capabilities and the digital landscape.
</p>
</motion.div>
<motion.div
initial={{ opacity: 0, y: 40 }}
whileInView={{ opacity: 1, y: 0 }}
@@ -155,7 +203,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 */}
{resources.map((resource, index) => {
@@ -182,7 +230,7 @@ const HorizontalTagScroller = () => {
</motion.div>
);
})}
{/* Second and third sets for seamless loop */}
{[...resources, ...resources].map((resource, index) => {
const IconComponent = resource.icon;
@@ -224,7 +272,7 @@ const SideBySideContentWithIcons = () => {
icon: Lightbulb
},
{
id: "practical",
id: "practical",
title: "Practical Knowledge",
icon: Target
},
@@ -259,7 +307,7 @@ const SideBySideContentWithIcons = () => {
<span className="text-white">Knowledge That Drives </span>
<span className="text-[#E5195E]">Growth</span>
</h2>
<p className="text-xl text-gray-300 leading-relaxed">
Learn from our experience and industry expertise.
</p>
@@ -290,7 +338,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>
@@ -315,7 +363,7 @@ const TabbedServiceDisplay = () => {
link: "/resources/blog"
},
{
title: "Case Studies",
title: "Case Studies",
icon: FileText,
description: "Real-world examples of our impactful solutions.",
link: "/case-studies"
@@ -357,7 +405,7 @@ const TabbedServiceDisplay = () => {
Comprehensive knowledge base designed to empower your digital transformation journey.
</p>
</motion.div>
<motion.div
initial={{ opacity: 0, y: 40 }}
whileInView={{ opacity: 1, y: 0 }}
@@ -383,7 +431,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">
{resource.title}
@@ -431,21 +479,21 @@ const InlineCTA = () => {
</div>
</div>
</div>
{/* Main Heading */}
<h2 className="text-3xl lg:text-4xl font-semibold leading-tight">
<span className="text-white">Unlock Deeper Insights with </span>
<span className="text-[#E5195E]">WDI's Knowledge</span>
</h2>
{/* Subtitle */}
<p className="text-xl text-gray-300 leading-relaxed max-w-2xl">
Get exclusive access to our expert research, industry insights, and proven methodologies.
</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('/resources/whitepapers-insights')}
>
@@ -454,7 +502,7 @@ const InlineCTA = () => {
<span>Download Our Latest Whitepaper</span>
</div>
</ShimmerButton>
{/* Small benefit text */}
<p className="text-sm text-gray-400">
Free downloads • Expert insights • Industry analysis
@@ -480,7 +528,7 @@ const FeaturedContentSection = () => {
link: "/resources/blog"
},
{
title: "AI Integration Success Stories",
title: "AI Integration Success Stories",
type: "Case Study",
icon: Brain,
date: "Nov 2024",
@@ -526,7 +574,7 @@ const FeaturedContentSection = () => {
Stay updated with our latest insights, success stories, and industry expertise.
</p>
</motion.div>
<motion.div
initial={{ opacity: 0, y: 40 }}
whileInView={{ opacity: 1, y: 0 }}
@@ -563,15 +611,15 @@ const FeaturedContentSection = () => {
</div>
</div>
</div>
<h3 className="text-xl font-semibold text-foreground mb-4 leading-tight">
{item.title}
</h3>
</div>
{/* CTA */}
<div className="p-8 pt-0 mt-auto space-y-3">
<ShimmerButton
<ShimmerButton
className="w-full py-3 text-sm rounded-xl shadow-lg hover:shadow-xl"
onClick={() => navigateTo(item.link)}
>
@@ -627,7 +675,7 @@ export function Resources() {
<ProcessSection />
<InlineCTA />
<FeaturedContentSection />
<FAQSection
<FAQSection
title="Resources Questions"
subtitle="Get answers to common questions about our resource library and content."
faqs={resourcesFAQs}

48
pages/SaaSProductEngineering.tsx
View File

@@ -40,11 +40,59 @@ 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";
import { Helmet } from "react-helmet-async";
// SaaS Product Engineering Hero Section
const SaaSHeroWithCTA = () => {
return (
<section className="relative py-20 overflow-hidden bg-black">
<Helmet>
{/* Page Title and Meta Description */}
<title>SaaS Product Engineering Services | Expert Solutions by WDI</title>
<meta
name="description"
content="Partner with WDI for expert SaaS product engineering services. We create robust, customizable, and efficient cloud applications to elevate your business success."
/>
{/* Canonical Link */}
<link rel="canonical" href="https://www.wdipl.com/services" />
{/* Open Graph Tags (for Facebook, LinkedIn) */}
<meta property="og:title" content="SaaS Product Engineering Services | Expert Solutions by WDI" />
<meta
property="og:description"
content="Partner with WDI for expert SaaS product engineering services. We create robust, customizable, and efficient cloud applications to elevate your business success."
/>
<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="SaaS Product Engineering Services | Expert Solutions by WDI" />
<meta
name="twitter:description"
content="Partner with WDI for expert SaaS product engineering services. We create robust, customizable, and efficient cloud applications to elevate your business success."
/>
<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

82
pages/SocialPlatformsNetworks.tsx
View File

@@ -10,16 +10,64 @@ import { SplitCallToAction } from "../components/SplitCallToAction";
import { Card, CardContent } from "../components/ui/card";
import { Badge } from "../components/ui/badge";
import { Button } from "../components/ui/button";
import {
Users, MessageSquare, Heart, Share2, Bell,
Shield, Zap, Target, CheckCircle, Star,
import {
Users, MessageSquare, Heart, Share2, Bell,
Shield, Zap, Target, CheckCircle, Star,
Globe, Camera, Clock, Award, Brain
} from "lucide-react";
import { Helmet } from "react-helmet-async";
// Problem Solution Block Component
const ProblemSolutionBlock = () => {
return (
<section className="py-20 bg-[#0E0E0E]">
<Helmet>
{/* Page Title and Meta Description */}
<title>Social Platforms & Network Development | WDI</title>
<meta
name="description"
content="WDI builds engaging Social Platforms & Networks with scalable architecture, real-time features, and secure user interactions for global digital communities."
/>
{/* Canonical Link */}
<link rel="canonical" href="https://www.wdipl.com/services" />
{/* Open Graph Tags (for Facebook, LinkedIn) */}
<meta property="og:title" content="Social Platforms & Network Development | WDI" />
<meta
property="og:description"
content="WDI builds engaging Social Platforms & Networks with scalable architecture, real-time features, and secure user interactions for global digital communities."
/>
<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="Social Platforms & Network Development | WDI" />
<meta
name="twitter:description"
content="WDI builds engaging Social Platforms & Networks with scalable architecture, real-time features, and secure user interactions for global digital communities."
/>
<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">
<motion.div
initial={{ opacity: 0, y: 30 }}
@@ -32,7 +80,7 @@ const ProblemSolutionBlock = () => {
<span className="text-white">Addressing the Core Challenges of </span>
<span className="text-[#E5195E]">Social Platforms & Networks</span>
</h2>
<div className="grid lg:grid-cols-2 gap-12 items-center">
<motion.div
initial={{ opacity: 0, x: -30 }}
@@ -53,7 +101,7 @@ const ProblemSolutionBlock = () => {
</p>
</div>
</motion.div>
<motion.div
initial={{ opacity: 0, x: 30 }}
whileInView={{ opacity: 1, x: 0 }}
@@ -137,7 +185,7 @@ const IconWithDescriptionGrid = () => {
Comprehensive tools to create engaging social experiences that connect people and build thriving communities.
</p>
</motion.div>
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
{features.map((feature, index) => {
const IconComponent = feature.icon;
@@ -214,7 +262,7 @@ const ThreeColumnFeatureBlock = () => {
Leverage our expertise to create social platforms that truly connect people and build lasting communities.
</p>
</motion.div>
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
{advantages.map((advantage, index) => {
const IconComponent = advantage.icon;
@@ -281,7 +329,7 @@ const CaseStudyHighlightGrid = () => {
Real results from our social platform implementations that built thriving digital communities.
</p>
</motion.div>
<div className="grid lg:grid-cols-2 gap-8">
{caseStudies.map((study, index) => (
<motion.div
@@ -355,7 +403,7 @@ export const SocialPlatformsNetworks = () => {
return (
<div className="min-h-screen bg-[#0E0E0E]">
<Navigation />
<HeroBanner
category="Media & Community"
title="Social Platforms & Networks"
@@ -372,29 +420,29 @@ export const SocialPlatformsNetworks = () => {
/>
<ProblemSolutionBlock />
<IconWithDescriptionGrid />
<ThreeColumnFeatureBlock />
<div className="bg-[#0E0E0E]">
<ProcessSection />
</div>
<CaseStudyHighlightGrid />
<div className="bg-[#0E0E0E]">
<FAQSection
<FAQSection
title="Social Platform & Network FAQs"
subtitle="Get answers to common questions about our social platform development services."
faqs={socialPlatformFAQs}
/>
</div>
<div className="bg-black">
<SplitCallToAction />
</div>
<Footer />
</div>
);

82
pages/SportsFanEngagement.tsx
View File

@@ -10,16 +10,64 @@ import { SplitCallToAction } from "../components/SplitCallToAction";
import { Card, CardContent } from "../components/ui/card";
import { Badge } from "../components/ui/badge";
import { Button } from "../components/ui/button";
import {
Trophy, Users, Play, BarChart3, MessageSquare,
Ticket, Star, Target, CheckCircle, Zap,
import {
Trophy, Users, Play, BarChart3, MessageSquare,
Ticket, Star, Target, CheckCircle, Zap,
Globe, Clock, Award, Camera, Bell
} from "lucide-react";
import { Helmet } from "react-helmet-async";
// Problem Solution Block Component
const ProblemSolutionBlock = () => {
return (
<section className="py-20 bg-[#0E0E0E]">
<Helmet>
{/* Page Title and Meta Description */}
<title>Sports & Fan Engagement Solutions by WDI</title>
<meta
name="description"
content="Engage and thrill your audience with WDI’s Sports & Fan Engagement solutions. Drive loyalty, interactive experiences, and data-driven fan insights effectively."
/>
{/* Canonical Link */}
<link rel="canonical" href="https://www.wdipl.com/services" />
{/* Open Graph Tags (for Facebook, LinkedIn) */}
<meta property="og:title" content="Sports & Fan Engagement Solutions by WDI" />
<meta
property="og:description"
content="Engage and thrill your audience with WDI’s Sports & Fan Engagement solutions. Drive loyalty, interactive experiences, and data-driven fan insights effectively."
/>
<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="Sports & Fan Engagement Solutions by WDI" />
<meta
name="twitter:description"
content="Engage and thrill your audience with WDI’s Sports & Fan Engagement solutions. Drive loyalty, interactive experiences, and data-driven fan insights effectively."
/>
<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">
<motion.div
initial={{ opacity: 0, y: 30 }}
@@ -32,7 +80,7 @@ const ProblemSolutionBlock = () => {
<span className="text-white">Addressing the Core Challenges of </span>
<span className="text-[#E5195E]">Sports & Fan Engagement</span>
</h2>
<div className="grid lg:grid-cols-2 gap-12 items-center">
<motion.div
initial={{ opacity: 0, x: -30 }}
@@ -53,7 +101,7 @@ const ProblemSolutionBlock = () => {
</p>
</div>
</motion.div>
<motion.div
initial={{ opacity: 0, x: 30 }}
whileInView={{ opacity: 1, x: 0 }}
@@ -137,7 +185,7 @@ const IconWithDescriptionGrid = () => {
Comprehensive tools to create immersive sports experiences that engage fans and drive loyalty.
</p>
</motion.div>
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
{features.map((feature, index) => {
const IconComponent = feature.icon;
@@ -214,7 +262,7 @@ const ThreeColumnFeatureBlock = () => {
Leverage our expertise to create sports platforms that truly engage fans and drive revenue.
</p>
</motion.div>
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
{advantages.map((advantage, index) => {
const IconComponent = advantage.icon;
@@ -281,7 +329,7 @@ const CaseStudyHighlightGrid = () => {
Real results from our sports platform implementations that transformed fan experiences.
</p>
</motion.div>
<div className="grid lg:grid-cols-2 gap-8">
{caseStudies.map((study, index) => (
<motion.div
@@ -355,7 +403,7 @@ export const SportsFanEngagement = () => {
return (
<div className="min-h-screen bg-[#0E0E0E]">
<Navigation />
<HeroBanner
category="Media & Community"
title="Sports & Fan Engagement"
@@ -372,29 +420,29 @@ export const SportsFanEngagement = () => {
/>
<ProblemSolutionBlock />
<IconWithDescriptionGrid />
<ThreeColumnFeatureBlock />
<div className="bg-[#0E0E0E]">
<ProcessSection />
</div>
<CaseStudyHighlightGrid />
<div className="bg-[#0E0E0E]">
<FAQSection
<FAQSection
title="Sports & Fan Engagement FAQs"
subtitle="Get answers to common questions about our sports platform development services."
faqs={sportsFanEngagementFAQs}
/>
</div>
<div className="bg-black">
<SplitCallToAction />
</div>
<Footer />
</div>
);

82
pages/SupplyChainFleetManagement.tsx
View File

@@ -10,16 +10,64 @@ import { SplitCallToAction } from "../components/SplitCallToAction";
import { Card, CardContent } from "../components/ui/card";
import { Badge } from "../components/ui/badge";
import { Button } from "../components/ui/button";
import {
Truck, Package, BarChart3, MapPin, Clock,
Database, Settings, Target, CheckCircle, Star,
import {
Truck, Package, BarChart3, MapPin, Clock,
Database, Settings, Target, CheckCircle, Star,
Zap, Shield, Globe, Award, Route
} from "lucide-react";
import { Helmet } from "react-helmet-async";
// Problem Solution Block Component
const ProblemSolutionBlock = () => {
return (
<section className="py-20 bg-[#0E0E0E]">
<Helmet>
{/* Page Title and Meta Description */}
<title>Supply Chain & Fleet Management Solutions by WDI</title>
<meta
name="description"
content="WDI offers custom Supply Chain & Fleet Management solutions with real-time tracking, route optimization, and data-driven insights to boost efficiency and reduce costs."
/>
{/* Canonical Link */}
<link rel="canonical" href="https://www.wdipl.com/services" />
{/* Open Graph Tags (for Facebook, LinkedIn) */}
<meta property="og:title" content="Supply Chain & Fleet Management Solutions by WDI" />
<meta
property="og:description"
content="WDI offers custom Supply Chain & Fleet Management solutions with real-time tracking, route optimization, and data-driven insights to boost efficiency and reduce costs."
/>
<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="Supply Chain & Fleet Management Solutions by WDI" />
<meta
name="twitter:description"
content="WDI offers custom Supply Chain & Fleet Management solutions with real-time tracking, route optimization, and data-driven insights to boost efficiency and reduce costs."
/>
<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">
<motion.div
initial={{ opacity: 0, y: 30 }}
@@ -32,7 +80,7 @@ const ProblemSolutionBlock = () => {
<span className="text-white">Addressing the Core Challenges of </span>
<span className="text-[#E5195E]">Supply Chain & Fleet Management</span>
</h2>
<div className="grid lg:grid-cols-2 gap-12 items-center">
<motion.div
initial={{ opacity: 0, x: -30 }}
@@ -53,7 +101,7 @@ const ProblemSolutionBlock = () => {
</p>
</div>
</motion.div>
<motion.div
initial={{ opacity: 0, x: 30 }}
whileInView={{ opacity: 1, x: 0 }}
@@ -137,7 +185,7 @@ const IconWithDescriptionGrid = () => {
Comprehensive tools to create efficient, transparent, and optimized supply chain operations.
</p>
</motion.div>
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
{features.map((feature, index) => {
const IconComponent = feature.icon;
@@ -214,7 +262,7 @@ const ThreeColumnFeatureBlock = () => {
Leverage our expertise to create supply chain solutions that truly optimize your operations.
</p>
</motion.div>
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
{advantages.map((advantage, index) => {
const IconComponent = advantage.icon;
@@ -281,7 +329,7 @@ const CaseStudyHighlightGrid = () => {
Real results from our supply chain platform implementations that transformed logistics operations.
</p>
</motion.div>
<div className="grid lg:grid-cols-2 gap-8">
{caseStudies.map((study, index) => (
<motion.div
@@ -355,7 +403,7 @@ export const SupplyChainFleetManagement = () => {
return (
<div className="min-h-screen bg-[#0E0E0E]">
<Navigation />
<HeroBanner
category="Mobility & Logistics"
title="Supply Chain & Fleet Management"
@@ -372,29 +420,29 @@ export const SupplyChainFleetManagement = () => {
/>
<ProblemSolutionBlock />
<IconWithDescriptionGrid />
<ThreeColumnFeatureBlock />
<div className="bg-[#0E0E0E]">
<ProcessSection />
</div>
<CaseStudyHighlightGrid />
<div className="bg-[#0E0E0E]">
<FAQSection
<FAQSection
title="Supply Chain & Fleet Management FAQs"
subtitle="Get answers to common questions about our supply chain and fleet management development services."
faqs={supplyChainFleetFAQs}
/>
</div>
<div className="bg-black">
<SplitCallToAction />
</div>
<Footer />
</div>
);

48
pages/SystemArchitectureDevOps.tsx
View File

@@ -46,11 +46,59 @@ import { Card, CardContent } from "../components/ui/card";
import { ShimmerButton } from "../components/ui/shimmer-button";
import awsLogo from "../src/images/aws-logo.png";
import { navigateTo } from "@/App";
import { Helmet } from "react-helmet-async";
// System Architecture & DevOps Hero Section
const DevOpsHeroWithCTA = () => {
return (
<section className="relative py-20 overflow-hidden bg-black">
<Helmet>
{/* Page Title and Meta Description */}
<title>System Architecture & DevOps Services | Scalable Solutions by WDI</title>
<meta
name="description"
content="WDI delivers expert system architecture and DevOps services, enabling agile development, automation, and scalable infrastructure for faster, reliable software delivery."
/>
{/* Canonical Link */}
<link rel="canonical" href="https://www.wdipl.com/services" />
{/* Open Graph Tags (for Facebook, LinkedIn) */}
<meta property="og:title" content="System Architecture & DevOps Services | Scalable Solutions by WDI" />
<meta
property="og:description"
content="WDI delivers expert system architecture and DevOps services, enabling agile development, automation, and scalable infrastructure for faster, reliable software delivery."
/>
<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="System Architecture & DevOps Services | Scalable Solutions by WDI" />
<meta
name="twitter:description"
content="WDI delivers expert system architecture and DevOps services, enabling agile development, automation, and scalable infrastructure for faster, reliable software delivery."
/>
<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

48
pages/TeamAugmentationServices.tsx
View File

@@ -23,6 +23,7 @@ import {
Settings,
} from "lucide-react";
import { navigateTo } from "@/App";
import { Helmet } from "react-helmet-async";
export const TeamAugmentationServices = () => {
const benefits = [
@@ -185,6 +186,53 @@ export const TeamAugmentationServices = () => {
{/* Hero Section */}
<section className="relative pt-24 pb-16 overflow-hidden">
<Helmet>
{/* Page Title and Meta Description */}
<title>Team Augmentation Services by WDI | Scalable IT Talent</title>
<meta
name="description"
content="WDI offers expert Team Augmentation Services to quickly expand your tech workforce with skilled developers, ensuring flexible, efficient project delivery and growth."
/>
{/* Canonical Link */}
<link rel="canonical" href="https://www.wdipl.com/services" />
{/* Open Graph Tags (for Facebook, LinkedIn) */}
<meta property="og:title" content="Team Augmentation Services by WDI | Scalable IT Talent" />
<meta
property="og:description"
content="WDI offers expert Team Augmentation Services to quickly expand your tech workforce with skilled developers, ensuring flexible, efficient project delivery and growth."
/>
<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="Team Augmentation Services by WDI | Scalable IT Talent" />
<meta
name="twitter:description"
content="WDI offers expert Team Augmentation Services to quickly expand your tech workforce with skilled developers, ensuring flexible, efficient project delivery and growth."
/>
<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="absolute inset-0 bg-gradient-to-br from-[#E5195E]/10 via-background to-background" />
<div
className="absolute inset-0 opacity-30"

48
pages/ThirdPartyIntegrations.tsx
View File

@@ -45,11 +45,59 @@ 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 { Helmet } from "react-helmet-async";
// Third-Party Integrations Hero Section
const IntegrationsHeroWithCTA = () => {
return (
<section className="relative py-20 overflow-hidden bg-black">
<Helmet>
{/* Page Title and Meta Description */}
<title>Third-Party Integrations for Seamless Systems | WDI</title>
<meta
name="description"
content="WDI offers Third-Party Integrations to connect your apps, boost automation, and improve workflow efficiency with secure, scalable solutions."
/>
{/* Canonical Link */}
<link rel="canonical" href="https://www.wdipl.com/services" />
{/* Open Graph Tags (for Facebook, LinkedIn) */}
<meta property="og:title" content="Third-Party Integrations for Seamless Systems | WDI" />
<meta
property="og:description"
content="WDI offers Third-Party Integrations to connect your apps, boost automation, and improve workflow efficiency with secure, scalable solutions."
/>
<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="Third-Party Integrations for Seamless Systems | WDI" />
<meta
name="twitter:description"
content="WDI offers Third-Party Integrations to connect your apps, boost automation, and improve workflow efficiency with secure, scalable solutions."
/>
<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

82
pages/TransportationApps.tsx
View File

@@ -10,16 +10,64 @@ import { SplitCallToAction } from "../components/SplitCallToAction";
import { Card, CardContent } from "../components/ui/card";
import { Badge } from "../components/ui/badge";
import { Button } from "../components/ui/button";
import {
Car, MapPin, CreditCard, Users, Clock,
Route, BarChart3, Target, CheckCircle, Star,
import {
Car, MapPin, CreditCard, Users, Clock,
Route, BarChart3, Target, CheckCircle, Star,
Zap, Shield, Globe, Award, Navigation as NavIcon
} from "lucide-react";
import { Helmet } from "react-helmet-async";
// Problem Solution Block Component
const ProblemSolutionBlock = () => {
return (
<section className="py-20 bg-[#0E0E0E]">
<Helmet>
{/* Page Title and Meta Description */}
<title>Custom Transportation App Solutions by WDI</title>
<meta
name="description"
content="Trust WDI for top-tier Transportation Apps delivering real-time updates, efficient booking, and outstanding travel experiences for businesses and users."
/>
{/* Canonical Link */}
<link rel="canonical" href="https://www.wdipl.com/services" />
{/* Open Graph Tags (for Facebook, LinkedIn) */}
<meta property="og:title" content="Custom Transportation App Solutions by WDI" />
<meta
property="og:description"
content="Trust WDI for top-tier Transportation Apps delivering real-time updates, efficient booking, and outstanding travel experiences for businesses and users."
/>
<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="Custom Transportation App Solutions by WDI" />
<meta
name="twitter:description"
content="Trust WDI for top-tier Transportation Apps delivering real-time updates, efficient booking, and outstanding travel experiences for businesses and users."
/>
<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">
<motion.div
initial={{ opacity: 0, y: 30 }}
@@ -32,7 +80,7 @@ const ProblemSolutionBlock = () => {
<span className="text-white">Addressing the Core Challenges of </span>
<span className="text-[#E5195E]">Transportation Apps</span>
</h2>
<div className="grid lg:grid-cols-2 gap-12 items-center">
<motion.div
initial={{ opacity: 0, x: -30 }}
@@ -53,7 +101,7 @@ const ProblemSolutionBlock = () => {
</p>
</div>
</motion.div>
<motion.div
initial={{ opacity: 0, x: 30 }}
whileInView={{ opacity: 1, x: 0 }}
@@ -137,7 +185,7 @@ const IconWithDescriptionGrid = () => {
Comprehensive tools to create efficient, safe, and user-friendly transportation experiences.
</p>
</motion.div>
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
{features.map((feature, index) => {
const IconComponent = feature.icon;
@@ -214,7 +262,7 @@ const ThreeColumnFeatureBlock = () => {
Leverage our expertise to create transportation platforms that truly optimize mobility experiences.
</p>
</motion.div>
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
{advantages.map((advantage, index) => {
const IconComponent = advantage.icon;
@@ -281,7 +329,7 @@ const CaseStudyHighlightGrid = () => {
Real results from our transportation platform implementations that transformed mobility solutions.
</p>
</motion.div>
<div className="grid lg:grid-cols-2 gap-8">
{caseStudies.map((study, index) => (
<motion.div
@@ -355,7 +403,7 @@ export const TransportationApps = () => {
return (
<div className="min-h-screen bg-[#0E0E0E]">
<Navigation />
<HeroBanner
category="Mobility & Logistics"
title="Transportation Apps"
@@ -372,29 +420,29 @@ export const TransportationApps = () => {
/>
<ProblemSolutionBlock />
<IconWithDescriptionGrid />
<ThreeColumnFeatureBlock />
<div className="bg-[#0E0E0E]">
<ProcessSection />
</div>
<CaseStudyHighlightGrid />
<div className="bg-[#0E0E0E]">
<FAQSection
<FAQSection
title="Transportation App FAQs"
subtitle="Get answers to common questions about our transportation app development services."
faqs={transportationAppFAQs}
/>
</div>
<div className="bg-black">
<SplitCallToAction />
</div>
<Footer />
</div>
);

48
pages/TravelBookingSystems.tsx
View File

@@ -26,11 +26,59 @@ import {
Clock,
Award,
} from "lucide-react";
import { Helmet } from "react-helmet-async";
// Problem Solution Block Component
const ProblemSolutionBlock = () => {
return (
<section className="py-20 bg-[#0E0E0E]">
<Helmet>
{/* Page Title and Meta Description */}
<title>Travel & Booking System Development Services | WDI</title>
<meta
name="description"
content="Streamline your business with WDI's Travel & Booking Systems. Get advanced solutions for seamless reservations, management, and customer experience."
/>
{/* Canonical Link */}
<link rel="canonical" href="https://www.wdipl.com/services" />
{/* Open Graph Tags (for Facebook, LinkedIn) */}
<meta property="og:title" content="Travel & Booking System Development Services | WDI" />
<meta
property="og:description"
content="Streamline your business with WDI's Travel & Booking Systems. Get advanced solutions for seamless reservations, management, and customer experience."
/>
<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="Travel & Booking System Development Services | WDI" />
<meta
name="twitter:description"
content="Streamline your business with WDI's Travel & Booking Systems. Get advanced solutions for seamless reservations, management, and customer experience."
/>
<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">
<motion.div
initial={{ opacity: 0, y: 30 }}

48
pages/UIUXDesign.tsx
View File

@@ -40,11 +40,59 @@ 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 { Helmet } from "react-helmet-async";
// UI/UX Design Hero Section
const UIUXHeroWithCTA = () => {
return (
<section className="relative py-20 overflow-hidden bg-black">
<Helmet>
{/* Page Title and Meta Description */}
<title>UI/UX Design Services | Engaging Interfaces by WDI</title>
<meta
name="description"
content="WDI’s UI/UX design services create seamless, user-friendly digital experiences that boost engagement and drive business growth effectively."
/>
{/* Canonical Link */}
<link rel="canonical" href="https://www.wdipl.com/services" />
{/* Open Graph Tags (for Facebook, LinkedIn) */}
<meta property="og:title" content="UI/UX Design Services | Engaging Interfaces by WDI" />
<meta
property="og:description"
content="WDI’s UI/UX design services create seamless, user-friendly digital experiences that boost engagement and drive business growth effectively."
/>
<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="UI/UX Design Services | Engaging Interfaces by WDI" />
<meta
name="twitter:description"
content="WDI’s UI/UX design services create seamless, user-friendly digital experiences that boost engagement and drive business growth effectively."
/>
<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

48
pages/UserResearchTesting.tsx
View File

@@ -38,11 +38,59 @@ 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 { Helmet } from "react-helmet-async";
// User Research & Testing Hero Section
const ResearchHeroWithCTA = () => {
return (
<section className="relative py-20 overflow-hidden bg-black">
<Helmet>
{/* Page Title and Meta Description */}
<title>User Research & Testing | Software Development Insights</title>
<meta
name="description"
content="WDI delivers user research that fuels smarter software development. Understand behavior and needs to create user-centric digital experiences."
/>
{/* Canonical Link */}
<link rel="canonical" href="https://www.wdipl.com/services" />
{/* Open Graph Tags (for Facebook, LinkedIn) */}
<meta property="og:title" content="User Research & Testing | Software Development Insights" />
<meta
property="og:description"
content="WDI delivers user research that fuels smarter software development. Understand behavior and needs to create user-centric digital experiences."
/>
<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="User Research & Testing | Software Development Insights" />
<meta
name="twitter:description"
content="WDI delivers user research that fuels smarter software development. Understand behavior and needs to create user-centric digital experiences."
/>
<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

82
pages/VirtualClassroomsLMS.tsx
View File

@@ -10,16 +10,64 @@ import { SplitCallToAction } from "../components/SplitCallToAction";
import { Card, CardContent } from "../components/ui/card";
import { Badge } from "../components/ui/badge";
import { Button } from "../components/ui/button";
import {
Video, Users, BookOpen, ClipboardCheck, MessageSquare,
FolderOpen, BarChart3, Target, CheckCircle, Star,
import {
Video, Users, BookOpen, ClipboardCheck, MessageSquare,
FolderOpen, BarChart3, Target, CheckCircle, Star,
Monitor, Layers, Zap, Globe, Award, Clock
} from "lucide-react";
import { Helmet } from "react-helmet-async";
// Problem Solution Block Component
const ProblemSolutionBlock = () => {
return (
<section className="py-20 bg-[#0E0E0E]">
<Helmet>
{/* Page Title and Meta Description */}
<title>Virtual Classrooms & LMS Solutions for Education | WDI</title>
<meta
name="description"
content="Discover WDI’s advanced virtual classrooms and LMS platforms for seamless online learning. Empower educators and learners with innovative digital education tools."
/>
{/* Canonical Link */}
<link rel="canonical" href="https://www.wdipl.com/services" />
{/* Open Graph Tags (for Facebook, LinkedIn) */}
<meta property="og:title" content="Virtual Classrooms & LMS Solutions for Education | WDI" />
<meta
property="og:description"
content="Discover WDI’s advanced virtual classrooms and LMS platforms for seamless online learning. Empower educators and learners with innovative digital education tools."
/>
<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="Virtual Classrooms & LMS Solutions for Education | WDI" />
<meta
name="twitter:description"
content="Discover WDI’s advanced virtual classrooms and LMS platforms for seamless online learning. Empower educators and learners with innovative digital education tools."
/>
<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">
<motion.div
initial={{ opacity: 0, y: 30 }}
@@ -32,7 +80,7 @@ const ProblemSolutionBlock = () => {
<span className="text-white">Addressing the Core Challenges of </span>
<span className="text-[#E5195E]">Virtual Classrooms & LMS</span>
</h2>
<div className="grid lg:grid-cols-2 gap-12 items-center">
<motion.div
initial={{ opacity: 0, x: -30 }}
@@ -53,7 +101,7 @@ const ProblemSolutionBlock = () => {
</p>
</div>
</motion.div>
<motion.div
initial={{ opacity: 0, x: 30 }}
whileInView={{ opacity: 1, x: 0 }}
@@ -137,7 +185,7 @@ const IconWithDescriptionGrid = () => {
Comprehensive tools to create immersive virtual learning environments that engage students and empower educators.
</p>
</motion.div>
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
{features.map((feature, index) => {
const IconComponent = feature.icon;
@@ -214,7 +262,7 @@ const ThreeColumnFeatureBlock = () => {
Leverage our expertise to create virtual learning environments that truly engage and educate.
</p>
</motion.div>
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
{advantages.map((advantage, index) => {
const IconComponent = advantage.icon;
@@ -281,7 +329,7 @@ const CaseStudyHighlightGrid = () => {
Real results from our virtual learning platform implementations.
</p>
</motion.div>
<div className="grid lg:grid-cols-2 gap-8">
{caseStudies.map((study, index) => (
<motion.div
@@ -355,7 +403,7 @@ export const VirtualClassroomsLMS = () => {
return (
<div className="min-h-screen bg-[#0E0E0E]">
<Navigation />
<HeroBanner
category="Learning & Education"
title="Virtual Classrooms & LMS"
@@ -372,29 +420,29 @@ export const VirtualClassroomsLMS = () => {
/>
<ProblemSolutionBlock />
<IconWithDescriptionGrid />
<ThreeColumnFeatureBlock />
<div className="bg-[#0E0E0E]">
<ProcessSection />
</div>
<CaseStudyHighlightGrid />
<div className="bg-[#0E0E0E]">
<FAQSection
<FAQSection
title="Virtual Classrooms & LMS FAQs"
subtitle="Get answers to common questions about our virtual learning platform development services."
faqs={virtualClassroomFAQs}
/>
</div>
<div className="bg-black">
<SplitCallToAction />
</div>
<Footer />
</div>
);

72
pages/WealthTechPlatforms.tsx
View File

@@ -40,11 +40,59 @@ 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 { Helmet } from "react-helmet-async";
// WealthTech Platforms Hero Section
const WealthTechPlatformsHero = () => {
return (
<section className="relative py-20 overflow-hidden bg-black">
<Helmet>
{/* Page Title and Meta Description */}
<title>WealthTech Platform Development Services | WDI</title>
<meta
name="description"
content="WDI empowers businesses with advanced WealthTech platforms, delivering digital wealth management, automation, and secure solutions for modern financial growth."
/>
{/* Canonical Link */}
<link rel="canonical" href="https://www.wdipl.com/services" />
{/* Open Graph Tags (for Facebook, LinkedIn) */}
<meta property="og:title" content="WealthTech Platform Development Services | WDI" />
<meta
property="og:description"
content="WDI empowers businesses with advanced WealthTech platforms, delivering digital wealth management, automation, and secure solutions for modern financial growth."
/>
<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="WealthTech Platform Development Services | WDI" />
<meta
name="twitter:description"
content="WDI empowers businesses with advanced WealthTech platforms, delivering digital wealth management, automation, and secure solutions for modern financial growth."
/>
<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
@@ -238,11 +286,10 @@ const WealthTechPlatformsHero = () => {
{asset.name}
</span>
<span
className={`text-xs px-2 py-1 rounded ${
asset.change.startsWith("+")
className={`text-xs px-2 py-1 rounded ${asset.change.startsWith("+")
? "bg-green-500/20 text-green-300"
: "bg-red-500/20 text-red-300"
}`}
}`}
>
{asset.change}
</span>
@@ -349,13 +396,12 @@ const WealthTechPlatformsHero = () => {
</div>
</div>
<div
className={`w-2 h-2 rounded-full ${
rec.color === "red"
className={`w-2 h-2 rounded-full ${rec.color === "red"
? "bg-red-400"
: rec.color === "yellow"
? "bg-yellow-400"
: "bg-green-400"
}`}
? "bg-yellow-400"
: "bg-green-400"
}`}
></div>
</motion.div>
))}
@@ -908,14 +954,12 @@ const WealthTechPlatformsProcess = () => {
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`}
className={`flex-1 ${isEven ? "lg:text-right" : "lg:text-left"
} text-center lg:text-left`}
>
<div className="bg-gray-900/50 backdrop-blur-md rounded-2xl border border-gray-800 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">

48
pages/WearableDeviceDevelopment.tsx
View File

@@ -40,11 +40,59 @@ 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 { Helmet } from "react-helmet-async";
// Wearable & Device App Development Hero Section
const WearableHeroWithCTA = () => {
return (
<section className="relative py-20 overflow-hidden bg-black">
<Helmet>
{/* Page Title and Meta Description */}
<title>Wearable & IoT App Development Services | WDI Innovation</title>
<meta
name="description"
content="WDI delivers advanced Wearable & IoT app development, creating seamless, secure, and connected experiences to elevate your business with cutting-edge technology."
/>
{/* Canonical Link */}
<link rel="canonical" href="https://www.wdipl.com/services" />
{/* Open Graph Tags (for Facebook, LinkedIn) */}
<meta property="og:title" content="Wearable & IoT App Development Services | WDI Innovation" />
<meta
property="og:description"
content="WDI delivers advanced Wearable & IoT app development, creating seamless, secure, and connected experiences to elevate your business with cutting-edge technology."
/>
<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="Wearable & IoT App Development Services | WDI Innovation" />
<meta
name="twitter:description"
content="WDI delivers advanced Wearable & IoT app development, creating seamless, secure, and connected experiences to elevate your business with cutting-edge technology."
/>
<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

104
pages/WhitepapersInsights.tsx
View File

@@ -8,6 +8,7 @@ import { Input } from "../components/ui/input";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../components/ui/select";
import { FileCheck, Download, Search, Calendar, User, ArrowRight, BookOpen, FileText, TrendingUp, Brain, Shield, Cloud } from "lucide-react";
import { navigateTo } from "../App";
import { Helmet } from "react-helmet-async";
export const WhitepapersInsights = () => {
const [searchTerm, setSearchTerm] = useState("");
@@ -17,7 +18,7 @@ export const WhitepapersInsights = () => {
const categories = [
"All Categories",
"Technology Trends",
"Industry Analysis",
"Industry Analysis",
"Best Practices",
"Case Studies",
"Research Reports",
@@ -194,10 +195,10 @@ export const WhitepapersInsights = () => {
const filteredWhitepapers = whitepapers.filter(paper => {
const matchesSearch = paper.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
paper.description.toLowerCase().includes(searchTerm.toLowerCase());
paper.description.toLowerCase().includes(searchTerm.toLowerCase());
const matchesCategory = selectedCategory === "all" || paper.category === selectedCategory;
const matchesTopic = selectedTopic === "all" || paper.topics.includes(selectedTopic);
return matchesSearch && matchesCategory && matchesTopic;
});
@@ -222,9 +223,56 @@ export const WhitepapersInsights = () => {
return (
<div className="dark min-h-screen bg-background">
<Navigation />
{/* Hero Section */}
<section className="pt-24 pb-16 bg-background">
<Helmet>
{/* Page Title and Meta Description */}
<title>Insights & White Papers | Enterprise AI Development</title>
<meta
name="description"
content="Explore insights and white papers on enterprise AI development. WDI shares expertise to help you plan, scale, and innovate with confidence."
/>
{/* Canonical Link */}
<link rel="canonical" href="https://www.wdipl.com/services" />
{/* Open Graph Tags (for Facebook, LinkedIn) */}
<meta property="og:title" content="Insights & White Papers | Enterprise AI Development" />
<meta
property="og:description"
content="Explore insights and white papers on enterprise AI development. WDI shares expertise to help you plan, scale, and innovate with confidence."
/>
<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="Insights & White Papers | Enterprise AI Development" />
<meta
name="twitter:description"
content="Explore insights and white papers on enterprise AI development. WDI shares expertise to help you plan, scale, and innovate with confidence."
/>
<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="max-w-4xl mx-auto text-center">
<div className="flex items-center justify-center gap-2 mb-6">
@@ -258,7 +306,7 @@ export const WhitepapersInsights = () => {
/>
</div>
</div>
<div className="flex gap-4">
<Select value={selectedCategory} onValueChange={setSelectedCategory}>
<SelectTrigger className="w-48 bg-background/50 border-white/10 text-white">
@@ -287,7 +335,7 @@ export const WhitepapersInsights = () => {
</Select>
</div>
</div>
<div className="text-center mt-4">
<span className="text-sm text-muted-foreground">
{filteredWhitepapers.length} resource{filteredWhitepapers.length !== 1 ? 's' : ''} found
@@ -301,15 +349,15 @@ export const WhitepapersInsights = () => {
<section className="py-16 bg-background">
<div className="container mx-auto px-6 lg:px-8">
<h2 className="text-3xl font-bold text-white mb-12 text-center">Featured Research</h2>
<div className="grid lg:grid-cols-3 gap-8">
{featuredPapers.map((paper) => {
const TopicIcon = getTopicIcon(paper.topics[0]);
return (
<Card key={paper.id} className="bg-card/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300 group cursor-pointer overflow-hidden">
<div className="aspect-video overflow-hidden relative">
<img
src={paper.image}
<img
src={paper.image}
alt={paper.title}
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
/>
@@ -329,15 +377,15 @@ export const WhitepapersInsights = () => {
{paper.category}
</Badge>
</div>
<h3 className="text-xl font-semibold text-white mb-3 group-hover:text-[#E5195E] transition-colors duration-300 line-clamp-2">
{paper.title}
</h3>
<p className="text-muted-foreground mb-4 line-clamp-3">
{paper.description}
</p>
<div className="space-y-2 mb-4">
<h4 className="text-sm font-semibold text-white">Key Takeaways:</h4>
<ul className="space-y-1">
@@ -349,7 +397,7 @@ export const WhitepapersInsights = () => {
))}
</ul>
</div>
<div className="flex flex-wrap gap-2 mb-4">
{paper.topics.map((topic) => (
<Badge key={topic} variant="outline" className="border-white/20 text-white/70 text-xs">
@@ -357,7 +405,7 @@ export const WhitepapersInsights = () => {
</Badge>
))}
</div>
<div className="flex items-center justify-between pt-4 border-t border-white/10">
<div className="flex items-center gap-4 text-xs text-muted-foreground">
<div className="flex items-center gap-1">
@@ -374,7 +422,7 @@ export const WhitepapersInsights = () => {
Download
</Button>
</div>
<div className="mt-2 text-xs text-muted-foreground text-center">
{paper.downloads.toLocaleString()} downloads
</div>
@@ -392,15 +440,15 @@ export const WhitepapersInsights = () => {
<section className="py-16 bg-card/50">
<div className="container mx-auto px-6 lg:px-8">
<h2 className="text-3xl font-bold text-white mb-12 text-center">More Research & Insights</h2>
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
{regularPapers.map((paper) => {
const TopicIcon = getTopicIcon(paper.topics[0]);
return (
<Card key={paper.id} className="bg-background/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300 group cursor-pointer overflow-hidden">
<div className="aspect-video overflow-hidden relative">
<img
src={paper.image}
<img
src={paper.image}
alt={paper.title}
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
/>
@@ -417,15 +465,15 @@ export const WhitepapersInsights = () => {
{paper.category}
</Badge>
</div>
<h3 className="text-lg font-semibold text-white mb-3 group-hover:text-[#E5195E] transition-colors duration-300 line-clamp-2">
{paper.title}
</h3>
<p className="text-muted-foreground mb-4 line-clamp-3 text-sm">
{paper.description}
</p>
<div className="space-y-1 mb-4">
{paper.keyTakeaways.slice(0, 2).map((takeaway, index) => (
<div key={index} className="text-xs text-muted-foreground flex items-start gap-2">
@@ -434,7 +482,7 @@ export const WhitepapersInsights = () => {
</div>
))}
</div>
<div className="flex flex-wrap gap-1 mb-4">
{paper.topics.slice(0, 2).map((topic) => (
<Badge key={topic} variant="outline" className="border-white/20 text-white/70 text-xs">
@@ -442,7 +490,7 @@ export const WhitepapersInsights = () => {
</Badge>
))}
</div>
<div className="flex items-center justify-between pt-4 border-t border-white/10">
<div className="flex flex-col gap-1 text-xs text-muted-foreground">
<div className="flex items-center gap-1">
@@ -471,8 +519,8 @@ export const WhitepapersInsights = () => {
<div className="container mx-auto px-6 lg:px-8">
<div className="text-center">
<p className="text-muted-foreground mb-4">No whitepapers found matching your criteria.</p>
<Button
variant="outline"
<Button
variant="outline"
onClick={() => {
setSearchTerm("");
setSelectedCategory("all");
@@ -495,10 +543,10 @@ export const WhitepapersInsights = () => {
<p className="text-muted-foreground mb-8">
Get notified when we publish new whitepapers and insights. Subscribe to receive the latest research directly in your inbox.
</p>
<div className="flex flex-col sm:flex-row gap-4 max-w-md mx-auto">
<Input
type="email"
<Input
type="email"
placeholder="Enter your email address"
className="flex-1 bg-card/50 border-white/10"
/>

79
pages/iOSAppDevelopment.tsx
View File

@@ -48,11 +48,59 @@ import {
import { Button } from "@/components/ui/button";
import { navigateTo } from "@/App";
import Spline from "@splinetool/react-spline";
import { Helmet } from "react-helmet-async";
// iOS Hero Section with iPhone/iPad mockups
const IOSHeroWithCTA = () => {
return (
<section className="relative py-20 overflow-hidden bg-black">
<Helmet>
{/* Page Title and Meta Description */}
<title>iOS App Development Services Crafted by WDI Experts</title>
<meta
name="description"
content="iOS App Development Services by WDI delivering secure, high-performance apps built for scale and seamless user experience."
/>
{/* Canonical Link */}
<link rel="canonical" href="https://www.wdipl.com/services" />
{/* Open Graph Tags (for Facebook, LinkedIn) */}
<meta property="og:title" content="iOS App Development Services Crafted by WDI Experts" />
<meta
property="og:description"
content="iOS App Development Services by WDI delivering secure, high-performance apps built for scale and seamless user experience."
/>
<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="iOS App Development Services Crafted by WDI Experts" />
<meta
name="twitter:description"
content="iOS App Development Services by WDI delivering secure, high-performance apps built for scale and seamless user experience."
/>
<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
@@ -290,19 +338,18 @@ const IOSCaseStudies = () => {
>
<div className="flex items-center gap-3">
<div
className={`w-10 h-10 rounded-lg bg-gradient-to-r ${
study.accentColor === "blue"
className={`w-10 h-10 rounded-lg bg-gradient-to-r ${study.accentColor === "blue"
? "from-blue-500 to-cyan-500"
: study.accentColor === "green"
? "from-green-500 to-emerald-500"
: study.accentColor === "purple"
? "from-purple-500 to-pink-500"
: study.accentColor === "cyan"
? "from-cyan-500 to-blue-500"
: study.accentColor === "orange"
? "from-orange-500 to-red-500"
: "from-emerald-500 to-teal-500"
} flex items-center justify-center flex-shrink-0`}
? "from-green-500 to-emerald-500"
: study.accentColor === "purple"
? "from-purple-500 to-pink-500"
: study.accentColor === "cyan"
? "from-cyan-500 to-blue-500"
: study.accentColor === "orange"
? "from-orange-500 to-red-500"
: "from-emerald-500 to-teal-500"
} flex items-center justify-center flex-shrink-0`}
>
<AchievementIcon className="w-5 h-5 text-white" />
</div>
@@ -481,14 +528,12 @@ const IOSProcessTimeline = () => {
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`}
className={`flex-1 ${isEven ? "lg:text-right" : "lg:text-left"
} text-center lg:text-left`}
>
<div className="bg-gray-900/50 backdrop-blur-md rounded-2xl border border-gray-800 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">