adding meta tags in main pages and bio added in leadership team
This commit is contained in:
priyanshuvish
@@ -34,12 +34,60 @@ import { Button } from "../components/ui/button";
|
||||
import { Card, CardContent } from "../components/ui/card";
|
||||
import { ShimmerButton } from "../components/ui/shimmer-button";
|
||||
import heroMockupImage from '../src/images/mobile-app-banner.webp';
|
||||
import { Helmet } from "react-helmet-async";
|
||||
|
||||
|
||||
// Enhanced Hero Section - NEW IMAGE WITH COMPREHENSIVE CSS REQUIREMENTS
|
||||
const HeroWithCTA = () => {
|
||||
return (
|
||||
<section className="relative py-20 overflow-hidden bg-black">
|
||||
<Helmet>
|
||||
{/* Page Title and Meta Description */}
|
||||
<title>Mobile App Development Services by WDI Experts</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="Mobile App Development Services by WDI to build secure, scalable apps for iOS, Android, and cross-platform with expert engineering."
|
||||
/>
|
||||
|
||||
{/* Canonical Link */}
|
||||
<link rel="canonical" href="https://www.wdipl.com/services" />
|
||||
|
||||
{/* Open Graph Tags (for Facebook, LinkedIn) */}
|
||||
<meta property="og:title" content="Mobile App Development Services by WDI Experts" />
|
||||
<meta
|
||||
property="og:description"
|
||||
content="Mobile App Development Services by WDI to build secure, scalable apps for iOS, Android, and cross-platform with expert engineering."
|
||||
/>
|
||||
<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="Mobile App Development Services by WDI Experts" />
|
||||
<meta
|
||||
name="twitter:description"
|
||||
content="Mobile App Development Services by WDI to build secure, scalable apps for iOS, Android, and cross-platform with expert engineering."
|
||||
/>
|
||||
<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 max-w-7xl">
|
||||
<div className="grid lg:grid-cols-2 gap-8 lg:gap-16 items-center min-h-[90vh]">
|
||||
<motion.div
|
||||
@@ -72,14 +120,14 @@ const HeroWithCTA = () => {
|
||||
<span className="text-[#E5195E]">Mobile App Development</span>
|
||||
<span className="text-white"> Services</span>
|
||||
</h1>
|
||||
|
||||
|
||||
<p className="text-lg text-gray-300 leading-relaxed max-w-lg">
|
||||
Build secure, scalable, high-performance apps for iOS, Android, or cross-platform — fast.
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
{/* BULLET POINTS REMOVED - Content flows directly to CTAs */}
|
||||
|
||||
|
||||
{/* CTAs - STANDARDIZED BUTTON HEIGHTS WITH IMPROVED SPACING */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
@@ -87,8 +135,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">
|
||||
@@ -106,7 +154,7 @@ const HeroWithCTA = () => {
|
||||
</Button>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
|
||||
|
||||
{/* Right side with hero image - COMPREHENSIVE CSS IMPLEMENTATION */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: 50 }}
|
||||
@@ -115,7 +163,7 @@ const HeroWithCTA = () => {
|
||||
className="relative flex items-center justify-center order-first lg:order-last"
|
||||
>
|
||||
{/* Image Container - FOLLOWING ALL COMPREHENSIVE CSS REQUIREMENTS */}
|
||||
<div
|
||||
<div
|
||||
className="relative w-full h-[450px] sm:h-[550px] md:h-[650px] lg:h-[700px] max-w-full"
|
||||
style={{
|
||||
position: 'relative',
|
||||
@@ -136,9 +184,9 @@ const HeroWithCTA = () => {
|
||||
display: 'block'
|
||||
}}
|
||||
/>
|
||||
|
||||
|
||||
{/* Alternative background method for enhanced browser support */}
|
||||
<div
|
||||
<div
|
||||
className="absolute inset-0 opacity-0 pointer-events-none"
|
||||
style={{
|
||||
backgroundImage: `url(${heroMockupImage})`,
|
||||
@@ -189,7 +237,7 @@ const HorizontalTagScroller = () => {
|
||||
Our mobile apps power industries where user trust, speed, and uptime are critical.
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 40 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
@@ -200,7 +248,7 @@ const HorizontalTagScroller = () => {
|
||||
{/* Gradient overlays for smooth fade effect */}
|
||||
<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>
|
||||
|
||||
|
||||
{/* Marquee container */}
|
||||
<div className="flex animate-marquee hover:animate-marquee-paused">
|
||||
{/* First set of industries */}
|
||||
@@ -228,7 +276,7 @@ const HorizontalTagScroller = () => {
|
||||
</motion.div>
|
||||
);
|
||||
})}
|
||||
|
||||
|
||||
{/* Second set for seamless loop */}
|
||||
{industries.map((industry, index) => {
|
||||
const IconComponent = industry.icon;
|
||||
@@ -254,7 +302,7 @@ const HorizontalTagScroller = () => {
|
||||
</motion.div>
|
||||
);
|
||||
})}
|
||||
|
||||
|
||||
{/* Third set for extra smoothness */}
|
||||
{industries.map((industry, index) => {
|
||||
const IconComponent = industry.icon;
|
||||
@@ -296,7 +344,7 @@ const SideBySideContentWithIcons = () => {
|
||||
icon: Award
|
||||
},
|
||||
{
|
||||
id: "ownership",
|
||||
id: "ownership",
|
||||
title: "100% Ownership, No Lock-ins",
|
||||
icon: Shield
|
||||
},
|
||||
@@ -331,7 +379,7 @@ const SideBySideContentWithIcons = () => {
|
||||
<h2 className="text-4xl lg:text-5xl font-semibold text-white leading-tight mb-6">
|
||||
Why Founders and CTOs Trust WDI
|
||||
</h2>
|
||||
|
||||
|
||||
{/* Subtext */}
|
||||
<p className="text-2xl text-gray-300 leading-relaxed">
|
||||
Not just a dev agency. A product partner.
|
||||
@@ -365,7 +413,7 @@ const SideBySideContentWithIcons = () => {
|
||||
<div className="mb-6">
|
||||
<IconComponent className="w-10 h-10 text-accent mx-auto" />
|
||||
</div>
|
||||
|
||||
|
||||
{/* Title */}
|
||||
<h3 className="text-lg font-semibold text-white leading-tight">
|
||||
{factor.title}
|
||||
@@ -391,7 +439,7 @@ const TabbedServiceDisplay = () => {
|
||||
link: "/services/ios-app-development"
|
||||
},
|
||||
{
|
||||
title: "Android App Development",
|
||||
title: "Android App Development",
|
||||
icon: Smartphone,
|
||||
description: "High-performance Android apps using Kotlin with Google Play optimization.",
|
||||
link: "/services/android-app-development"
|
||||
@@ -439,7 +487,7 @@ const TabbedServiceDisplay = () => {
|
||||
Comprehensive mobile development services that transform your ideas into powerful, user-friendly applications across all platforms.
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 40 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
@@ -465,7 +513,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}
|
||||
@@ -513,22 +561,22 @@ const InlineCTA = () => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{/* Main Heading */}
|
||||
<h2 className="text-4xl lg:text-5xl font-semibold leading-tight">
|
||||
<span className="text-foreground">Let's Architect </span>
|
||||
<span className="text-[#E5195E]">Intelligence</span>
|
||||
<span className="text-foreground"> Into Your App</span>
|
||||
</h2>
|
||||
|
||||
|
||||
{/* Subtitle */}
|
||||
<p className="text-xl text-muted-foreground leading-relaxed max-w-2xl mx-auto">
|
||||
Schedule a discovery call to explore how AI can give you a strategic edge.
|
||||
</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('/start-a-project')}
|
||||
>
|
||||
@@ -537,7 +585,7 @@ const InlineCTA = () => {
|
||||
<span>Book an AI Discovery Call</span>
|
||||
</div>
|
||||
</ShimmerButton>
|
||||
|
||||
|
||||
{/* Small benefit text */}
|
||||
<p className="text-sm text-muted-foreground">
|
||||
App strategy • AI integration • Technology consultation
|
||||
@@ -562,7 +610,7 @@ const HireDevelopersSection = () => {
|
||||
link: "/hire-talent/mobile-app-developers"
|
||||
},
|
||||
{
|
||||
title: "Android Developers",
|
||||
title: "Android Developers",
|
||||
icon: Smartphone,
|
||||
skills: ["Kotlin", "Java", "Jetpack Compose"],
|
||||
iconBg: "bg-green-500",
|
||||
@@ -605,7 +653,7 @@ const HireDevelopersSection = () => {
|
||||
Get access to top-tier mobile developers who can bring your vision to life with cutting-edge technology and proven expertise.
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 40 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
@@ -639,12 +687,12 @@ const HireDevelopersSection = () => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h3 className="text-xl font-semibold text-foreground mb-4 leading-tight">
|
||||
{developer.title}
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
|
||||
{/* Skills section */}
|
||||
<div className="px-8 pb-6 flex-1">
|
||||
<div className="flex flex-wrap gap-2">
|
||||
@@ -655,10 +703,10 @@ const HireDevelopersSection = () => {
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{/* CTA Buttons - Updated with ShimmerButton */}
|
||||
<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(developer.link)}
|
||||
>
|
||||
@@ -720,7 +768,7 @@ export const MobileAppDevelopment = () => {
|
||||
// Set document title for SEO
|
||||
React.useEffect(() => {
|
||||
document.title = "Mobile App Development Services | WDI - iOS & Android App Development";
|
||||
|
||||
|
||||
// Update meta description for SEO
|
||||
const metaDescription = document.querySelector('meta[name="description"]');
|
||||
if (metaDescription) {
|
||||
@@ -731,31 +779,31 @@ export const MobileAppDevelopment = () => {
|
||||
return (
|
||||
<div className="dark min-h-screen bg-background">
|
||||
<Navigation />
|
||||
|
||||
|
||||
{/* Hero Section */}
|
||||
<HeroWithCTA />
|
||||
|
||||
|
||||
{/* Industries Scroller */}
|
||||
<HorizontalTagScroller />
|
||||
|
||||
|
||||
{/* Why Choose WDI */}
|
||||
<SideBySideContentWithIcons />
|
||||
|
||||
|
||||
{/* Service Categories */}
|
||||
<TabbedServiceDisplay />
|
||||
|
||||
|
||||
{/* Process Steps */}
|
||||
<ProcessSection />
|
||||
|
||||
|
||||
{/* Hire Developers */}
|
||||
<HireDevelopersSection />
|
||||
|
||||
|
||||
{/* Final CTA */}
|
||||
<InlineCTA />
|
||||
|
||||
|
||||
{/* FAQ Section */}
|
||||
<FAQSection faqs={mobileAppFAQs} />
|
||||
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user