meta tags added in all pages
This commit is contained in:
priyanshuvish
@@ -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}
|
||||
|
||||
Reference in New Issue
Block a user