14 Commits

Author SHA1 Message Date
e61e710fe1 worked on the hire developer 2026-04-02 12:11:43 +05:30
6f94ded9f9 worked the new direct 2026-03-30 19:33:06 +05:30
280b714ed0 Merge branch 'yasin-dev' of http://git.wdipl.com/PriyanshuVishwakarma/Wdipl-react into parth-dev 2026-03-27 11:21:16 +05:30
YasinShaikh123
7545e71b20 content update 22 to 32 pages 2026-03-27 11:17:56 +05:30
56b0828033 worked on on the pages 2026-03-27 11:13:52 +05:30
3a1446ab28 worked on the content update 2026-03-26 10:51:48 +05:30
c05c79db78 worked on the content chnage 2026-03-25 12:19:34 +05:30
2088f44fbd worked on the pages changes content 2026-03-20 13:50:28 +05:30
6451c09ea5 worked on the content update 2026-03-19 19:37:16 +05:30
e09c0033bb worked on the image and and form and links 2026-03-18 17:55:47 +05:30
priyanshuvish
37a2959524 Merge branch 'main' of http://git.wdipl.com/PriyanshuVishwakarma/Wdipl-react 2026-03-16 13:45:51 +05:30
priyanshuvish
90c3773920 resource>blog cliclj go on another tab blog 2026-03-16 13:45:47 +05:30
28ddab9f52 Merge pull request 'replace the hero image in MobileAppDevelopment component' (#3) from arya-dev into main
Reviewed-on: PriyanshuVishwakarma/Wdipl-react#3
2026-02-17 12:08:36 +00:00
742bd44d0d Merge pull request 'arya-dev' (#2) from arya-dev into main
Reviewed-on: PriyanshuVishwakarma/Wdipl-react#2
2026-02-17 06:42:16 +00:00
64 changed files with 2964 additions and 1437 deletions

BIN
assets/aihospital.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 MiB

BIN
assets/amble.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 40 KiB

BIN
assets/amoz.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

BIN
assets/hospitalise.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 533 KiB

BIN
assets/vib360.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.2 KiB

View File

@@ -40,6 +40,7 @@ import { ImageWithFallback } from "./figma/ImageWithFallback";
import { Badge } from "./ui/badge"; import { Badge } from "./ui/badge";
import { Button } from "./ui/button"; import { Button } from "./ui/button";
import { Card, CardContent } from "./ui/card"; import { Card, CardContent } from "./ui/card";
import { link } from "fs";
// Internal data (no need to pass props) // Internal data (no need to pass props)
const defaultCaseStudies = [ const defaultCaseStudies = [
@@ -100,8 +101,8 @@ const defaultCaseStudies = [
category: "Loyalty & Rewards", category: "Loyalty & Rewards",
industry: "Hospitality", industry: "Hospitality",
featured: false, featured: false,
link: "/comming-soon", // link: "/comming-soon",
icon: Utensils link: "", icon: Utensils
}, },
{ {
id: 9, id: 9,
@@ -130,7 +131,8 @@ const defaultCaseStudies = [
category: "Lifestyle", category: "Lifestyle",
industry: "Chemicals", industry: "Chemicals",
featured: false, featured: false,
link: "/comming-soon", // link: "/comming-soon",
link: "",
icon: FlaskConical icon: FlaskConical
}, },
{ {
@@ -150,8 +152,8 @@ const defaultCaseStudies = [
category: "Lifestyle", category: "Lifestyle",
industry: "Consumer", industry: "Consumer",
featured: false, featured: false,
link: "/comming-soon", // link: "/comming-soon",
icon: Trophy link: "", icon: Trophy
}, },
{ {
id: 14, id: 14,
@@ -180,8 +182,8 @@ const defaultCaseStudies = [
category: "AgriTech", category: "AgriTech",
industry: "Agriculture", industry: "Agriculture",
featured: false, featured: false,
link: "/comming-soon", // link: "/comming-soon",
icon: Tractor link: "", icon: Tractor
}, },
{ {
id: 17, id: 17,
@@ -190,8 +192,8 @@ const defaultCaseStudies = [
category: "AgriTech", category: "AgriTech",
industry: "Agriculture", industry: "Agriculture",
featured: false, featured: false,
link: "/comming-soon", // link: "/comming-soon",
icon: Globe link: "", icon: Globe
}, },
]; ];
@@ -379,11 +381,10 @@ export const CaseStudySlider = ({
<button <button
key={index} key={index}
onClick={() => goToSlide(index)} onClick={() => goToSlide(index)}
className={`w-2 h-2 rounded-full transition-all duration-300 ${ className={`w-2 h-2 rounded-full transition-all duration-300 ${index === currentIndex
index === currentIndex
? "bg-accent w-6" ? "bg-accent w-6"
: "bg-white/30 hover:bg-white/50" : "bg-white/30 hover:bg-white/50"
}`} }`}
/> />
))} ))}
</div> </div>

View File

@@ -1,5 +1,6 @@
import { motion } from "framer-motion"; import { motion } from "framer-motion";
import { GridPattern } from "./GridPattern"; import { GridPattern } from "./GridPattern";
import Flag from 'react-world-flags';
const companyLogos = [ const companyLogos = [
{ name: "TechFlow Solutions", logo: null, width: "140" }, { name: "TechFlow Solutions", logo: null, width: "140" },
@@ -38,90 +39,97 @@ const companyLogos = [
{ name: "InnovateLab", logo: null, width: "120" } { name: "InnovateLab", logo: null, width: "120" }
]; ];
const countryFlags = [ // const countryFlags = [
{ // {
name: "United States", // name: "United States",
alt: "United States flag icon", // alt: "United States flag icon",
flagSvg: ( // flagSvg: (
<svg viewBox="0 0 24 18" className="w-8 h-6"> // <svg viewBox="0 0 24 18" className="w-8 h-6">
<rect width="24" height="18" fill="#B22234"/> // <rect width="24" height="18" fill="#B22234"/>
<rect width="24" height="1.38" y="1.38" fill="white"/> // <rect width="24" height="1.38" y="1.38" fill="white"/>
<rect width="24" height="1.38" y="4.15" fill="white"/> // <rect width="24" height="1.38" y="4.15" fill="white"/>
<rect width="24" height="1.38" y="6.92" fill="white"/> // <rect width="24" height="1.38" y="6.92" fill="white"/>
<rect width="24" height="1.38" y="9.69" fill="white"/> // <rect width="24" height="1.38" y="9.69" fill="white"/>
<rect width="24" height="1.38" y="12.46" fill="white"/> // <rect width="24" height="1.38" y="12.46" fill="white"/>
<rect width="24" height="1.38" y="15.23" fill="white"/> // <rect width="24" height="1.38" y="15.23" fill="white"/>
<rect width="9.6" height="9.69" fill="#3C3B6E"/> // <rect width="9.6" height="9.69" fill="#3C3B6E"/>
</svg> // </svg>
) // )
}, // },
{ // {
name: "United Kingdom", // name: "United Kingdom",
alt: "United Kingdom flag icon", // alt: "United Kingdom flag icon",
flagSvg: ( // flagSvg: (
<svg viewBox="0 0 24 18" className="w-8 h-6"> // <svg viewBox="0 0 24 18" className="w-8 h-6">
<rect width="24" height="18" fill="#012169"/> // <rect width="24" height="18" fill="#012169"/>
<path d="M0 0L24 18M24 0L0 18" stroke="white" strokeWidth="2"/> // <path d="M0 0L24 18M24 0L0 18" stroke="white" strokeWidth="2"/>
<path d="M0 0L24 18M24 0L0 18" stroke="#C8102E" strokeWidth="1"/> // <path d="M0 0L24 18M24 0L0 18" stroke="#C8102E" strokeWidth="1"/>
<path d="M12 0V18M0 9H24" stroke="white" strokeWidth="3"/> // <path d="M12 0V18M0 9H24" stroke="white" strokeWidth="3"/>
<path d="M12 0V18M0 9H24" stroke="#C8102E" strokeWidth="2"/> // <path d="M12 0V18M0 9H24" stroke="#C8102E" strokeWidth="2"/>
</svg> // </svg>
) // )
}, // },
{ // {
name: "India", // name: "India",
alt: "India flag icon", // alt: "India flag icon",
flagSvg: ( // flagSvg: (
<svg viewBox="0 0 24 18" className="w-8 h-6"> // <svg viewBox="0 0 24 18" className="w-8 h-6">
<rect width="24" height="6" fill="#FF9933"/> // <rect width="24" height="6" fill="#FF9933"/>
<rect width="24" height="6" y="6" fill="white"/> // <rect width="24" height="6" y="6" fill="white"/>
<rect width="24" height="6" y="12" fill="#138808"/> // <rect width="24" height="6" y="12" fill="#138808"/>
<circle cx="12" cy="9" r="2" fill="none" stroke="#000080" strokeWidth="0.3"/> // <circle cx="12" cy="9" r="2" fill="none" stroke="#000080" strokeWidth="0.3"/>
<g transform="translate(12,9)"> // <g transform="translate(12,9)">
{Array.from({length: 24}, (_, i) => ( // {Array.from({length: 24}, (_, i) => (
<line key={i} x1="0" y1="-1.5" x2="0" y2="-1.8" stroke="#000080" strokeWidth="0.1" transform={`rotate(${i * 15})`}/> // <line key={i} x1="0" y1="-1.5" x2="0" y2="-1.8" stroke="#000080" strokeWidth="0.1" transform={`rotate(${i * 15})`}/>
))} // ))}
</g> // </g>
</svg> // </svg>
) // )
}, // },
{ // {
name: "Canada", // name: "Canada",
alt: "Canada flag icon", // alt: "Canada flag icon",
flagSvg: ( // flagSvg: (
<svg viewBox="0 0 24 18" className="w-8 h-6"> // <svg viewBox="0 0 24 18" className="w-8 h-6">
<rect width="6" height="18" fill="#FF0000"/> // <rect width="6" height="18" fill="#FF0000"/>
<rect width="12" height="18" x="6" fill="white"/> // <rect width="12" height="18" x="6" fill="white"/>
<rect width="6" height="18" x="18" fill="#FF0000"/> // <rect width="6" height="18" x="18" fill="#FF0000"/>
<path d="M12 4L13 7H16L13.5 9L14.5 12L12 10L9.5 12L10.5 9L8 7H11L12 4Z" fill="#FF0000"/> // <path d="M12 4L13 7H16L13.5 9L14.5 12L12 10L9.5 12L10.5 9L8 7H11L12 4Z" fill="#FF0000"/>
</svg> // </svg>
) // )
}, // },
{ // {
name: "Australia", // name: "Australia",
alt: "Australia flag icon", // alt: "Australia flag icon",
flagSvg: ( // flagSvg: (
<svg viewBox="0 0 24 18" className="w-8 h-6"> // <svg viewBox="0 0 24 18" className="w-8 h-6">
<rect width="24" height="18" fill="#012169"/> // <rect width="24" height="18" fill="#012169"/>
<g transform="scale(0.5)"> // <g transform="scale(0.5)">
<rect width="24" height="9" fill="#012169"/> // <rect width="24" height="9" fill="#012169"/>
<path d="M0 0L24 18M24 0L0 18" stroke="white" strokeWidth="2"/> // <path d="M0 0L24 18M24 0L0 18" stroke="white" strokeWidth="2"/>
<path d="M0 0L24 18M24 0L0 18" stroke="#C8102E" strokeWidth="1"/> // <path d="M0 0L24 18M24 0L0 18" stroke="#C8102E" strokeWidth="1"/>
<path d="M12 0V18M0 9H24" stroke="white" strokeWidth="3"/> // <path d="M12 0V18M0 9H24" stroke="white" strokeWidth="3"/>
<path d="M12 0V18M0 9H24" stroke="#C8102E" strokeWidth="2"/> // <path d="M12 0V18M0 9H24" stroke="#C8102E" strokeWidth="2"/>
</g> // </g>
<g fill="white"> // <g fill="white">
<circle cx="18" cy="6" r="0.5"/> // <circle cx="18" cy="6" r="0.5"/>
<circle cx="20" cy="8" r="0.3"/> // <circle cx="20" cy="8" r="0.3"/>
<circle cx="19" cy="10" r="0.4"/> // <circle cx="19" cy="10" r="0.4"/>
<circle cx="21" cy="12" r="0.3"/> // <circle cx="21" cy="12" r="0.3"/>
<circle cx="18" cy="14" r="0.5"/> // <circle cx="18" cy="14" r="0.5"/>
</g> // </g>
</svg> // </svg>
) // )
} // }
]; // ];
const countryFlags = [
{ name: "United States", code: "US", alt: "United States flag" },
{ name: "United Kingdom", code: "GB", alt: "United Kingdom flag" },
{ name: "India", code: "IN", alt: "India flag" },
{ name: "Canada", code: "CA", alt: "Canada flag" },
{ name: "Australia", code: "AU", alt: "Australia flag" }
];
const ProjectImageCircles = () => ( const ProjectImageCircles = () => (
<motion.div <motion.div
initial={{ opacity: 0, y: 20 }} initial={{ opacity: 0, y: 20 }}
@@ -154,13 +162,14 @@ const ProjectImageCircles = () => (
zIndex: countryFlags.length - index zIndex: countryFlags.length - index
}} }}
> >
{/* Circular container */}
<div className="absolute inset-0 flex items-center justify-center w-16 h-16 overflow-hidden transition-all duration-300 border-2 rounded-full shadow-lg bg-white/10 backdrop-blur-sm border-white/20 group-hover:border-accent/50 group-hover:bg-white/15 group-hover:shadow-xl"> <div className="absolute inset-0 flex items-center justify-center w-16 h-16 overflow-hidden transition-all duration-300 border-2 rounded-full shadow-lg bg-white/10 backdrop-blur-sm border-white/20 group-hover:border-accent/50 group-hover:bg-white/15 group-hover:shadow-xl">
<div <div
className="flex items-center justify-center w-10 h-8 transition-transform duration-300 transform group-hover:scale-110" className="flex items-center justify-center w-10 h-8 transition-transform duration-300 transform group-hover:scale-110"
role="img" role="img"
aria-label={flag.alt} aria-label={flag.alt}
> >
{flag.flagSvg} <Flag code={flag.code} style={{ width: '40px', height: '30px' }} />
</div> </div>
</div> </div>

View File

@@ -185,7 +185,7 @@ const FeaturedCaseStudies = () => {
Featured Success Stories Featured Success Stories
</h2> </h2>
<p className="max-w-3xl mx-auto text-xl leading-relaxed text-gray-300"> <p className="max-w-3xl mx-auto text-xl leading-relaxed text-gray-300">
Discover how we've helped companies across industries achieve remarkable results with our innovative development solutions. Discover how AI mobile app development transformed companies across industries, delivering remarkable engagement and business results through innovative solutions.
</p> </p>
</motion.div> </motion.div>
@@ -250,11 +250,11 @@ const FeaturedCaseStudies = () => {
> >
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className={`w-10 h-10 rounded-lg bg-gradient-to-r ${study.accentColor === 'blue' ? 'from-blue-500 to-cyan-500' : <div 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 === 'green' ? 'from-green-500 to-emerald-500' :
study.accentColor === 'purple' ? 'from-purple-500 to-pink-500' : study.accentColor === 'purple' ? 'from-purple-500 to-pink-500' :
study.accentColor === 'cyan' ? 'from-cyan-500 to-blue-500' : study.accentColor === 'cyan' ? 'from-cyan-500 to-blue-500' :
study.accentColor === 'orange' ? 'from-orange-500 to-red-500' : study.accentColor === 'orange' ? 'from-orange-500 to-red-500' :
'from-emerald-500 to-teal-500' 'from-emerald-500 to-teal-500'
} flex items-center justify-center flex-shrink-0`}> } flex items-center justify-center flex-shrink-0`}>
<AchievementIcon className="w-5 h-5 text-white" /> <AchievementIcon className="w-5 h-5 text-white" />
</div> </div>
@@ -346,8 +346,13 @@ const FeaturedCaseStudies = () => {
<h3 className="mb-12 text-3xl font-semibold text-center text-white lg:text-4xl"> <h3 className="mb-12 text-3xl font-semibold text-center text-white lg:text-4xl">
More Success Stories More Success Stories
</h3> </h3>
<p className="mt-4 text-gray-400 max-w-2xl mx-auto">
<div className="grid items-stretch gap-8 lg:grid-cols-3"> Explore additional triumphs where AI-powered features revolutionized user engagement and drove exponential growth for diverse enterprises.
</p>
<div className="grid items-stretch gap-8 lg:grid-cols-3" style={{ marginTop: "25px" }}
>
{moreSuccessStories.map((story, index) => { {moreSuccessStories.map((story, index) => {
const AchievementIcon = story.keyAchievement.icon; const AchievementIcon = story.keyAchievement.icon;
@@ -361,6 +366,7 @@ const FeaturedCaseStudies = () => {
className="h-full group" className="h-full group"
> >
<Card <Card
className="bg-gray-900/50 backdrop-blur-md border-gray-800 hover:border-accent/30 transition-all duration-500 shadow-lg hover:shadow-2xl rounded-2xl overflow-hidden h-full group-hover:scale-[1.02] transform flex flex-col cursor-pointer" className="bg-gray-900/50 backdrop-blur-md border-gray-800 hover:border-accent/30 transition-all duration-500 shadow-lg hover:shadow-2xl rounded-2xl overflow-hidden h-full group-hover:scale-[1.02] transform flex flex-col cursor-pointer"
onClick={() => { onClick={() => {
if (story.title === 'TradersCircuit') { if (story.title === 'TradersCircuit') {
@@ -397,11 +403,11 @@ const FeaturedCaseStudies = () => {
> >
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className={`w-10 h-10 rounded-lg bg-gradient-to-r ${story.accentColor === 'blue' ? 'from-blue-500 to-cyan-500' : <div className={`w-10 h-10 rounded-lg bg-gradient-to-r ${story.accentColor === 'blue' ? 'from-blue-500 to-cyan-500' :
story.accentColor === 'green' ? 'from-green-500 to-emerald-500' : story.accentColor === 'green' ? 'from-green-500 to-emerald-500' :
story.accentColor === 'purple' ? 'from-purple-500 to-pink-500' : story.accentColor === 'purple' ? 'from-purple-500 to-pink-500' :
story.accentColor === 'cyan' ? 'from-cyan-500 to-blue-500' : story.accentColor === 'cyan' ? 'from-cyan-500 to-blue-500' :
story.accentColor === 'orange' ? 'from-orange-500 to-red-500' : story.accentColor === 'orange' ? 'from-orange-500 to-red-500' :
'from-emerald-500 to-teal-500' 'from-emerald-500 to-teal-500'
} flex items-center justify-center flex-shrink-0`}> } flex items-center justify-center flex-shrink-0`}>
<AchievementIcon className="w-5 h-5 text-white" /> <AchievementIcon className="w-5 h-5 text-white" />
</div> </div>

View File

@@ -28,6 +28,9 @@ const footerNavigation = {
{ label: "Resources", url: "/resources" }, { label: "Resources", url: "/resources" },
{ label: "Contact", url: "/start-a-project" }, { label: "Contact", url: "/start-a-project" },
], ],
// weServe: [
// { label: "Mobile App Development", url: "/industries/startups" },
// ]
Resources: [ Resources: [
{ label: "Articles", url: "/resources/blog" }, { label: "Articles", url: "/resources/blog" },
{ label: "Portfolio", url: "/case-studies" }, { label: "Portfolio", url: "/case-studies" },

View File

@@ -70,7 +70,8 @@ export function HeroSection() {
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.3 }} transition={{ duration: 0.8, delay: 0.3 }}
> >
Architecting Digital Success for Startups &amp; Enterprises {/* Architecting Digital Success for Startups &amp; Enterprises */}
Mobile application developers for Startups &amp; Enterprises
</motion.h1> </motion.h1>
<motion.p <motion.p

View File

@@ -84,7 +84,8 @@ export const HorizontalTagScroller = () => {
Tailored Solutions for Your Industry Tailored Solutions for Your Industry
</h2> </h2>
<p className="text-[#CCCCCC] text-lg max-w-2xl mx-auto"> <p className="text-[#CCCCCC] text-lg max-w-2xl mx-auto">
We serve diverse industries with specialized expertise and domain knowledge {/* We serve diverse industries with specialized expertise and domain knowledge */}
We serve diverse industries with specialized expertise in AI mobile app development and domain knowledge.
</p> </p>
</motion.div> </motion.div>

View File

@@ -461,7 +461,13 @@ const navigationData = {
{ text: "Careers", icon: Briefcase, href: "/company/careers" }, { text: "Careers", icon: Briefcase, href: "/company/careers" },
], ],
resources: [ resources: [
{ text: "Blogs", icon: BookOpen, href: "/resources/blog" }, {
text: "Blogs",
icon: BookOpen,
href: "https://www.wdipl.com/blog",
target: "_blank",
rel: "noopener noreferrer"
},
{ text: "Portfolio", icon: FileText, href: "/case-studies" }, { text: "Portfolio", icon: FileText, href: "/case-studies" },
{ {
text: "Client Testimonials", text: "Client Testimonials",
@@ -618,8 +624,12 @@ const MegaMenu = ({
if (!isOpen) return null; if (!isOpen) return null;
const handleNavigate = (path: string) => { const handleNavigate = (path: string, target?: string) => {
navigate(path); if (target === "_blank") {
window.open(path, "_blank", "noopener,noreferrer");
} else {
navigate(path);
}
onClose(); onClose();
}; };
@@ -639,7 +649,7 @@ const MegaMenu = ({
className="font-semibold text-white text-sm cursor-pointer hover:text-[#E5195E] transition-colors" className="font-semibold text-white text-sm cursor-pointer hover:text-[#E5195E] transition-colors"
onClick={(e) => { onClick={(e) => {
e.preventDefault(); e.preventDefault();
service.href && handleNavigate(service.href); handleNavigate(service.href);
}} }}
> >
{service.category} {service.category}
@@ -653,7 +663,7 @@ const MegaMenu = ({
className="text-[#CCCCCC] hover:text-white text-sm transition-colors duration-200 block py-1 hover:translate-x-1 transform text-left w-full" className="text-[#CCCCCC] hover:text-white text-sm transition-colors duration-200 block py-1 hover:translate-x-1 transform text-left w-full"
onClick={(e) => { onClick={(e) => {
e.preventDefault(); e.preventDefault();
subService.href && handleNavigate(subService.href); handleNavigate(subService.href);
}} }}
> >
{subService.name} {subService.name}
@@ -685,7 +695,7 @@ const MegaMenu = ({
className="font-semibold text-white text-lg cursor-pointer hover:text-[#E5195E] transition-colors" className="font-semibold text-white text-lg cursor-pointer hover:text-[#E5195E] transition-colors"
onClick={(e) => { onClick={(e) => {
e.preventDefault(); e.preventDefault();
category.href && handleNavigate(category.href); handleNavigate(category.href);
}} }}
> >
{category.category} {category.category}
@@ -699,7 +709,7 @@ const MegaMenu = ({
className="text-[#CCCCCC] hover:text-white text-sm transition-colors duration-200 block py-1 hover:translate-x-1 transform text-left w-full" className="text-[#CCCCCC] hover:text-white text-sm transition-colors duration-200 block py-1 hover:translate-x-1 transform text-left w-full"
onClick={(e) => { onClick={(e) => {
e.preventDefault(); e.preventDefault();
service.href && handleNavigate(service.href); handleNavigate(service.href);
}} }}
> >
{service.name} {service.name}
@@ -727,7 +737,7 @@ const MegaMenu = ({
className="flex items-center gap-4 text-[#CCCCCC] hover:text-white transition-all duration-200 p-4 rounded-lg hover:bg-white/5 group w-full text-left" className="flex items-center gap-4 text-[#CCCCCC] hover:text-white transition-all duration-200 p-4 rounded-lg hover:bg-white/5 group w-full text-left"
onClick={(e) => { onClick={(e) => {
e.preventDefault(); e.preventDefault();
solution.href && handleNavigate(solution.href); handleNavigate(solution.href);
}} }}
> >
<div className="w-8 h-8 rounded-lg bg-[#E5195E]/20 flex items-center justify-center group-hover:scale-110 transition-transform"> <div className="w-8 h-8 rounded-lg bg-[#E5195E]/20 flex items-center justify-center group-hover:scale-110 transition-transform">
@@ -765,7 +775,7 @@ const MegaMenu = ({
className="text-[#CCCCCC] hover:text-white text-sm transition-colors duration-200 block py-1 hover:translate-x-1 transform text-left w-full" className="text-[#CCCCCC] hover:text-white text-sm transition-colors duration-200 block py-1 hover:translate-x-1 transform text-left w-full"
onClick={(e) => { onClick={(e) => {
e.preventDefault(); e.preventDefault();
item.href && handleNavigate(item.href); handleNavigate(item.href);
}} }}
> >
{item.name} {item.name}
@@ -790,10 +800,12 @@ const MegaMenu = ({
<a <a
key={item.text} key={item.text}
href={item.href} href={item.href}
target={item.target || "_self"}
rel={item.rel || ""}
className="flex items-center gap-4 text-[#CCCCCC] hover:text-white transition-all duration-200 p-4 rounded-lg hover:bg-white/5 group w-full text-left" className="flex items-center gap-4 text-[#CCCCCC] hover:text-white transition-all duration-200 p-4 rounded-lg hover:bg-white/5 group w-full text-left"
onClick={(e) => { onClick={(e) => {
e.preventDefault(); e.preventDefault();
item.href && handleNavigate(item.href); handleNavigate(item.href, item.target);
}} }}
> >
<div className="w-8 h-8 rounded-lg bg-[#E5195E]/20 flex items-center justify-center group-hover:scale-110 transition-transform"> <div className="w-8 h-8 rounded-lg bg-[#E5195E]/20 flex items-center justify-center group-hover:scale-110 transition-transform">
@@ -969,8 +981,12 @@ export const Navigation = () => {
} }
}; };
const handleNavigation = (path: string) => { const handleNavigation = (path: string, target?: string) => {
navigate(path); if (target === "_blank") {
window.open(path, "_blank", "noopener,noreferrer");
} else {
navigate(path);
}
setIsMobileMenuOpen(false); setIsMobileMenuOpen(false);
setActiveMenu(null); setActiveMenu(null);
}; };
@@ -1014,9 +1030,8 @@ export const Navigation = () => {
{item} {item}
{hasDropdown(item) && ( {hasDropdown(item) && (
<ChevronDown <ChevronDown
className={`w-4 h-4 transition-transform duration-200 ${ className={`w-4 h-4 transition-transform duration-200 ${activeMenu === item ? "rotate-180" : ""
activeMenu === item ? "rotate-180" : "" }`}
}`}
/> />
)} )}
</a> </a>
@@ -1029,7 +1044,8 @@ export const Navigation = () => {
onClick={() => handleNavigation("/start-a-project")} onClick={() => handleNavigation("/start-a-project")}
className="hidden lg:flex" className="hidden lg:flex"
> >
Get Started {/* Get Started */}
Contact Us
</Button> </Button>
{/* Mobile Menu Button */} {/* Mobile Menu Button */}
@@ -1084,11 +1100,32 @@ export const Navigation = () => {
{item} {item}
</a> </a>
))} ))}
{/* Mobile Resources Submenu */}
<div className="pl-4 space-y-2 border-l-2 border-[#E5195E]/30">
{navigationData.resources.map((resource) => (
<a
key={resource.text}
href={resource.href}
target={resource.target || "_self"}
rel={resource.rel || ""}
className="block text-[#CCCCCC] hover:text-white transition-colors py-1 text-sm text-left w-full"
onClick={(e) => {
e.preventDefault();
handleNavigation(resource.href, resource.target);
}}
>
{resource.text} {resource.target === "_blank" && "↗"}
</a>
))}
</div>
<Button <Button
onClick={() => handleNavigation("/start-a-project")} onClick={() => handleNavigation("/start-a-project")}
className="w-full mt-4" className="w-full mt-4"
> >
Get Started {/* Get Started */}
Contact Us
</Button> </Button>
</div> </div>
</div> </div>

View File

@@ -15,29 +15,46 @@ const packages: Package[] = [
icon: <Tablet className="w-8 h-8" />, icon: <Tablet className="w-8 h-8" />,
title: "The Blueprint", title: "The Blueprint",
timeline: "Product Definition in 1 Week", timeline: "Product Definition in 1 Week",
priceRange: "$1,500 - $2,500", // priceRange: "$1,500 - $2,500",
priceRange: "",
features: [ features: [
// "Strategy & roadmap",
// "User flows & wireframes",
// "Technical architecture"
"Strategy & roadmap", "Strategy & roadmap",
"User flows & wireframes", "User flows & wireframes",
"Technical architecture" "Technical architecture",
"The Prototype",
"Working Demo in 2 Weeks"
] ]
}, },
{ {
icon: <Rocket className="w-8 h-8" />, icon: <Rocket className="w-8 h-8" />,
title: "The Prototype", title: "The Prototype",
timeline: "Working Demo in 2 Weeks", timeline: "Working Demo in 2 Weeks",
priceRange: "$6,000 - $8,000", // priceRange: "$6,000 - $8,000",
priceRange: "",
features: [ features: [
// "Functional web or mobile prototype",
// "Core features implemented",
// "User testing ready"
"Functional web or mobile prototype", "Functional web or mobile prototype",
"Core features implemented", "Core features implemented",
"User testing ready" "User testing ready",
"The Launchpad",
"Market-Ready MVP in 6 Weeks"
] ]
}, },
{ {
icon: <Crown className="w-8 h-8" />, icon: <Crown className="w-8 h-8" />,
title: "The Launchpad", title: "The Launchpad",
timeline: "Market-Ready MVP in 6 Weeks", timeline: "Market-Ready MVP in 6 Weeks",
priceRange: "$20,000 - $30,000", // priceRange: "$20,000 - $30,000",
priceRange: "",
features: [ features: [
"Full website or app", "Full website or app",
"SEO-optimized & scalable", "SEO-optimized & scalable",

View File

@@ -75,16 +75,14 @@ const ChatSimulation = ({
whileInView={{ opacity: 1, x: 0 }} whileInView={{ opacity: 1, x: 0 }}
transition={{ duration: 0.5, delay: index * 0.3 }} transition={{ duration: 0.5, delay: index * 0.3 }}
viewport={{ once: true }} viewport={{ once: true }}
className={`flex ${ className={`flex ${message.from === "You" ? "justify-start" : "justify-end"
message.from === "You" ? "justify-start" : "justify-end" }`}
}`}
> >
<div <div
className={`max-w-[80%] px-3 py-1.5 rounded-lg ${ className={`max-w-[80%] px-3 py-1.5 rounded-lg ${message.from === "You"
message.from === "You" ? "bg-muted border border-border text-foreground"
? "bg-muted border border-border text-foreground" : "bg-accent text-accent-foreground"
: "bg-accent text-accent-foreground" }`}
}`}
> >
<div className="text-xs font-medium mb-1 opacity-70"> <div className="text-xs font-medium mb-1 opacity-70">
{message.from} {message.from}
@@ -276,9 +274,9 @@ export const ProcessSection = () => {
viewport={{ once: true }} viewport={{ once: true }}
className="text-muted-foreground text-xl max-w-2xl mx-auto" className="text-muted-foreground text-xl max-w-2xl mx-auto"
> >
Our proven process transforms your vision into reality through Our proven process transforms your vision into reality through strategic planning, AI-powered design, and expert engineering every step of the way.
strategic planning, thoughtful design, and expert engineeringevery
step of the way.
</motion.p> </motion.p>
</div> </div>

View File

@@ -157,8 +157,10 @@ export const ResourceCards = () => {
Insights for Founders & Product Leaders Insights for Founders & Product Leaders
</h2> </h2>
<p className="text-muted-foreground text-lg max-w-2xl mx-auto"> <p className="text-muted-foreground text-lg max-w-2xl mx-auto">
Learn from our experience building 200+ digital products. Practical {/* Learn from our experience building 200+ digital products. Practical
insights, real case studies, and actionable strategies. insights, real case studies, and actionable strategies. */}
Learn from our experience building 200+ digital products, including AI mobile apps. Practical insights, real case studies, and actionable strategies.
</p> </p>
</motion.div> </motion.div>

View File

@@ -25,7 +25,7 @@ export const SplitCallToAction = () => {
Ready to Build with WDI? Ready to Build with WDI?
</h2> </h2>
<p className="text-xl text-muted-foreground leading-relaxed mb-8"> <p className="text-xl text-muted-foreground leading-relaxed mb-8">
Schedule a no-commitment discovery call with our consulting team. Let's discuss your vision and create a roadmap to success. Schedule a no-commitment discovery call with our consulting team. Let's discuss your AI mobile app vision and create a roadmap to success.
</p> </p>
</div> </div>

261
package-lock.json generated
View File

@@ -56,6 +56,7 @@
"react-responsive-masonry": "^2.7.1", "react-responsive-masonry": "^2.7.1",
"react-router-dom": "^7.6.3", "react-router-dom": "^7.6.3",
"react-slick": "^0.30.3", "react-slick": "^0.30.3",
"react-world-flags": "^1.6.0",
"recharts": "^2.15.4", "recharts": "^2.15.4",
"slick-carousel": "^1.8.1", "slick-carousel": "^1.8.1",
"sonner": "^2.0.3", "sonner": "^2.0.3",
@@ -142,7 +143,6 @@
"integrity": "sha512-UlLAnTPrFdNGoFtbSXwcGFQBtQZJCNjaN6hQNP3UPvuNXT1i82N26KL3dZeIpNalWywr9IuQuncaAfUaS1g6sQ==", "integrity": "sha512-UlLAnTPrFdNGoFtbSXwcGFQBtQZJCNjaN6hQNP3UPvuNXT1i82N26KL3dZeIpNalWywr9IuQuncaAfUaS1g6sQ==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"peer": true,
"dependencies": { "dependencies": {
"@ampproject/remapping": "^2.2.0", "@ampproject/remapping": "^2.2.0",
"@babel/code-frame": "^7.27.1", "@babel/code-frame": "^7.27.1",
@@ -3172,7 +3172,6 @@
"integrity": "sha512-Qm9OYVOFHFYg3wJoTSrz80hoec5Lia/dPp84do3X7dZvLikQvM1YpmvTBEdIr/e+U8HTkFjLHLnl78K/qjf+jQ==", "integrity": "sha512-Qm9OYVOFHFYg3wJoTSrz80hoec5Lia/dPp84do3X7dZvLikQvM1YpmvTBEdIr/e+U8HTkFjLHLnl78K/qjf+jQ==",
"devOptional": true, "devOptional": true,
"license": "MIT", "license": "MIT",
"peer": true,
"dependencies": { "dependencies": {
"undici-types": "~7.8.0" "undici-types": "~7.8.0"
} }
@@ -3190,7 +3189,6 @@
"integrity": "sha512-/LDXMQh55EzZQ0uVAZmKKhfENivEvWz6E+EYzh+/MCjMhNsotd+ZHhBGIjFDTi6+fz0OhQQQLbTgdQIxxCsC0w==", "integrity": "sha512-/LDXMQh55EzZQ0uVAZmKKhfENivEvWz6E+EYzh+/MCjMhNsotd+ZHhBGIjFDTi6+fz0OhQQQLbTgdQIxxCsC0w==",
"devOptional": true, "devOptional": true,
"license": "MIT", "license": "MIT",
"peer": true,
"dependencies": { "dependencies": {
"@types/prop-types": "*", "@types/prop-types": "*",
"csstype": "^3.0.2" "csstype": "^3.0.2"
@@ -3202,7 +3200,6 @@
"integrity": "sha512-MEe3UeoENYVFXzoXEWsvcpg6ZvlrFNlOQ7EOsvhI3CfAXwzPfO8Qwuxd40nepsYKqyyVQnTdEfv68q91yLcKrQ==", "integrity": "sha512-MEe3UeoENYVFXzoXEWsvcpg6ZvlrFNlOQ7EOsvhI3CfAXwzPfO8Qwuxd40nepsYKqyyVQnTdEfv68q91yLcKrQ==",
"devOptional": true, "devOptional": true,
"license": "MIT", "license": "MIT",
"peer": true,
"peerDependencies": { "peerDependencies": {
"@types/react": "^18.0.0" "@types/react": "^18.0.0"
} }
@@ -3295,7 +3292,6 @@
"integrity": "sha512-tbsV1jPne5CkFQCgPBcDOt30ItF7aJoZL997JSF7MhGQqOeT3svWRYxiqlfA5RUdlHN6Fi+EI9bxqbdyAUZjYQ==", "integrity": "sha512-tbsV1jPne5CkFQCgPBcDOt30ItF7aJoZL997JSF7MhGQqOeT3svWRYxiqlfA5RUdlHN6Fi+EI9bxqbdyAUZjYQ==",
"dev": true, "dev": true,
"license": "BSD-2-Clause", "license": "BSD-2-Clause",
"peer": true,
"dependencies": { "dependencies": {
"@typescript-eslint/scope-manager": "6.21.0", "@typescript-eslint/scope-manager": "6.21.0",
"@typescript-eslint/types": "6.21.0", "@typescript-eslint/types": "6.21.0",
@@ -3486,7 +3482,6 @@
"integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==", "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"peer": true,
"bin": { "bin": {
"acorn": "bin/acorn" "acorn": "bin/acorn"
}, },
@@ -3647,6 +3642,12 @@
"integrity": "sha512-cRygWd7kGBQO3VEhPiTgq4Wc43ctsM+o46urrmPOiuAe+07fzlSB9OJVdpgDL0jPqXUVQ9ht7aq7kxOeJHRK+w==", "integrity": "sha512-cRygWd7kGBQO3VEhPiTgq4Wc43ctsM+o46urrmPOiuAe+07fzlSB9OJVdpgDL0jPqXUVQ9ht7aq7kxOeJHRK+w==",
"license": "MIT" "license": "MIT"
}, },
"node_modules/boolbase": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
"integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
"license": "ISC"
},
"node_modules/brace-expansion": { "node_modules/brace-expansion": {
"version": "2.0.2", "version": "2.0.2",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
@@ -3690,7 +3691,6 @@
} }
], ],
"license": "MIT", "license": "MIT",
"peer": true,
"dependencies": { "dependencies": {
"caniuse-lite": "^1.0.30001726", "caniuse-lite": "^1.0.30001726",
"electron-to-chromium": "^1.5.173", "electron-to-chromium": "^1.5.173",
@@ -4071,6 +4071,15 @@
"dev": true, "dev": true,
"license": "MIT" "license": "MIT"
}, },
"node_modules/commander": {
"version": "7.2.0",
"resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
"integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
"license": "MIT",
"engines": {
"node": ">= 10"
}
},
"node_modules/concat-map": { "node_modules/concat-map": {
"version": "0.0.1", "version": "0.0.1",
"resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -4116,6 +4125,80 @@
"node": ">= 8" "node": ">= 8"
} }
}, },
"node_modules/css-select": {
"version": "5.2.2",
"resolved": "https://registry.npmjs.org/css-select/-/css-select-5.2.2.tgz",
"integrity": "sha512-TizTzUddG/xYLA3NXodFM0fSbNizXjOKhqiQQwvhlspadZokn1KDy0NZFS0wuEubIYAV5/c1/lAr0TaaFXEXzw==",
"license": "BSD-2-Clause",
"dependencies": {
"boolbase": "^1.0.0",
"css-what": "^6.1.0",
"domhandler": "^5.0.2",
"domutils": "^3.0.1",
"nth-check": "^2.0.1"
},
"funding": {
"url": "https://github.com/sponsors/fb55"
}
},
"node_modules/css-tree": {
"version": "2.3.1",
"resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz",
"integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==",
"license": "MIT",
"dependencies": {
"mdn-data": "2.0.30",
"source-map-js": "^1.0.1"
},
"engines": {
"node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
}
},
"node_modules/css-what": {
"version": "6.2.2",
"resolved": "https://registry.npmjs.org/css-what/-/css-what-6.2.2.tgz",
"integrity": "sha512-u/O3vwbptzhMs3L1fQE82ZSLHQQfto5gyZzwteVIEyeaY5Fc7R4dapF/BvRoSYFeqfBk4m0V1Vafq5Pjv25wvA==",
"license": "BSD-2-Clause",
"engines": {
"node": ">= 6"
},
"funding": {
"url": "https://github.com/sponsors/fb55"
}
},
"node_modules/csso": {
"version": "5.0.5",
"resolved": "https://registry.npmjs.org/csso/-/csso-5.0.5.tgz",
"integrity": "sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==",
"license": "MIT",
"dependencies": {
"css-tree": "~2.2.0"
},
"engines": {
"node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0",
"npm": ">=7.0.0"
}
},
"node_modules/csso/node_modules/css-tree": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.2.1.tgz",
"integrity": "sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==",
"license": "MIT",
"dependencies": {
"mdn-data": "2.0.28",
"source-map-js": "^1.0.1"
},
"engines": {
"node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0",
"npm": ">=7.0.0"
}
},
"node_modules/csso/node_modules/mdn-data": {
"version": "2.0.28",
"resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.28.tgz",
"integrity": "sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==",
"license": "CC0-1.0"
},
"node_modules/csstype": { "node_modules/csstype": {
"version": "3.1.3", "version": "3.1.3",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
@@ -4366,6 +4449,61 @@
"csstype": "^3.0.2" "csstype": "^3.0.2"
} }
}, },
"node_modules/dom-serializer": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
"integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
"license": "MIT",
"dependencies": {
"domelementtype": "^2.3.0",
"domhandler": "^5.0.2",
"entities": "^4.2.0"
},
"funding": {
"url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
}
},
"node_modules/domelementtype": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
"integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
"funding": [
{
"type": "github",
"url": "https://github.com/sponsors/fb55"
}
],
"license": "BSD-2-Clause"
},
"node_modules/domhandler": {
"version": "5.0.3",
"resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
"integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
"license": "BSD-2-Clause",
"dependencies": {
"domelementtype": "^2.3.0"
},
"engines": {
"node": ">= 4"
},
"funding": {
"url": "https://github.com/fb55/domhandler?sponsor=1"
}
},
"node_modules/domutils": {
"version": "3.2.2",
"resolved": "https://registry.npmjs.org/domutils/-/domutils-3.2.2.tgz",
"integrity": "sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==",
"license": "BSD-2-Clause",
"dependencies": {
"dom-serializer": "^2.0.0",
"domelementtype": "^2.3.0",
"domhandler": "^5.0.3"
},
"funding": {
"url": "https://github.com/fb55/domutils?sponsor=1"
}
},
"node_modules/electron-to-chromium": { "node_modules/electron-to-chromium": {
"version": "1.5.182", "version": "1.5.182",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.182.tgz", "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.182.tgz",
@@ -4377,8 +4515,7 @@
"version": "8.6.0", "version": "8.6.0",
"resolved": "https://registry.npmjs.org/embla-carousel/-/embla-carousel-8.6.0.tgz", "resolved": "https://registry.npmjs.org/embla-carousel/-/embla-carousel-8.6.0.tgz",
"integrity": "sha512-SjWyZBHJPbqxHOzckOfo8lHisEaJWmwd23XppYFYVh10bU66/Pn5tkVkbkCMZVdbUE5eTCI2nD8OyIP4Z+uwkA==", "integrity": "sha512-SjWyZBHJPbqxHOzckOfo8lHisEaJWmwd23XppYFYVh10bU66/Pn5tkVkbkCMZVdbUE5eTCI2nD8OyIP4Z+uwkA==",
"license": "MIT", "license": "MIT"
"peer": true
}, },
"node_modules/embla-carousel-react": { "node_modules/embla-carousel-react": {
"version": "8.6.0", "version": "8.6.0",
@@ -4421,6 +4558,18 @@
"integrity": "sha512-/KujNpO+PT63F7Hlpu4h3pE3TokKRHN26JYmQpPyjkRD/N57R7bPDNojMXdi7uveAKjYB7yQnartCxZnFWr0Xw==", "integrity": "sha512-/KujNpO+PT63F7Hlpu4h3pE3TokKRHN26JYmQpPyjkRD/N57R7bPDNojMXdi7uveAKjYB7yQnartCxZnFWr0Xw==",
"license": "MIT" "license": "MIT"
}, },
"node_modules/entities": {
"version": "4.5.0",
"resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
"integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
"license": "BSD-2-Clause",
"engines": {
"node": ">=0.12"
},
"funding": {
"url": "https://github.com/fb55/entities?sponsor=1"
}
},
"node_modules/esbuild": { "node_modules/esbuild": {
"version": "0.21.5", "version": "0.21.5",
"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.5.tgz", "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.5.tgz",
@@ -4489,7 +4638,6 @@
"deprecated": "This version is no longer supported. Please see https://eslint.org/version-support for other options.", "deprecated": "This version is no longer supported. Please see https://eslint.org/version-support for other options.",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"peer": true,
"dependencies": { "dependencies": {
"@eslint-community/eslint-utils": "^4.2.0", "@eslint-community/eslint-utils": "^4.2.0",
"@eslint-community/regexpp": "^4.6.1", "@eslint-community/regexpp": "^4.6.1",
@@ -5599,6 +5747,12 @@
"dev": true, "dev": true,
"license": "ISC" "license": "ISC"
}, },
"node_modules/mdn-data": {
"version": "2.0.30",
"resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
"integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==",
"license": "CC0-1.0"
},
"node_modules/merge2": { "node_modules/merge2": {
"version": "1.4.1", "version": "1.4.1",
"resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz", "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -5749,6 +5903,18 @@
"node": ">=0.10.0" "node": ">=0.10.0"
} }
}, },
"node_modules/nth-check": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
"integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==",
"license": "BSD-2-Clause",
"dependencies": {
"boolbase": "^1.0.0"
},
"funding": {
"url": "https://github.com/fb55/nth-check?sponsor=1"
}
},
"node_modules/object-assign": { "node_modules/object-assign": {
"version": "4.1.1", "version": "4.1.1",
"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@@ -5763,6 +5929,7 @@
"resolved": "https://registry.npmjs.org/on-change/-/on-change-4.0.2.tgz", "resolved": "https://registry.npmjs.org/on-change/-/on-change-4.0.2.tgz",
"integrity": "sha512-cMtCyuJmTx/bg2HCpHo3ZLeF7FZnBOapLqZHr2AlLeJ5Ul0Zu2mUJJz051Fdwu/Et2YW04ZD+TtU+gVy0ACNCA==", "integrity": "sha512-cMtCyuJmTx/bg2HCpHo3ZLeF7FZnBOapLqZHr2AlLeJ5Ul0Zu2mUJJz051Fdwu/Et2YW04ZD+TtU+gVy0ACNCA==",
"license": "MIT", "license": "MIT",
"peer": true,
"engines": { "engines": {
"node": "^12.20.0 || ^14.13.1 || >=16.0.0" "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
}, },
@@ -5921,7 +6088,6 @@
} }
], ],
"license": "MIT", "license": "MIT",
"peer": true,
"dependencies": { "dependencies": {
"nanoid": "^3.3.11", "nanoid": "^3.3.11",
"picocolors": "^1.1.1", "picocolors": "^1.1.1",
@@ -6001,7 +6167,6 @@
"resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz", "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
"integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==", "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
"license": "MIT", "license": "MIT",
"peer": true,
"dependencies": { "dependencies": {
"loose-envify": "^1.1.0" "loose-envify": "^1.1.0"
}, },
@@ -6067,7 +6232,6 @@
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
"integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==", "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
"license": "MIT", "license": "MIT",
"peer": true,
"dependencies": { "dependencies": {
"loose-envify": "^1.1.0", "loose-envify": "^1.1.0",
"scheduler": "^0.23.2" "scheduler": "^0.23.2"
@@ -6133,7 +6297,6 @@
"resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz", "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz",
"integrity": "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==", "integrity": "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==",
"license": "MIT", "license": "MIT",
"peer": true,
"dependencies": { "dependencies": {
"@types/use-sync-external-store": "^0.0.6", "@types/use-sync-external-store": "^0.0.6",
"use-sync-external-store": "^1.4.0" "use-sync-external-store": "^1.4.0"
@@ -6333,6 +6496,20 @@
"react-dom": ">=16.6.0" "react-dom": ">=16.6.0"
} }
}, },
"node_modules/react-world-flags": {
"version": "1.6.0",
"resolved": "https://registry.npmjs.org/react-world-flags/-/react-world-flags-1.6.0.tgz",
"integrity": "sha512-eutSeAy5YKoVh14js/JUCSlA6EBk1n4k+bDaV+NkNB50VhnG+f4QDTpYycnTUTsZ5cqw/saPmk0Z4Fa0VVZ1Iw==",
"license": "MIT",
"dependencies": {
"svg-country-flags": "^1.2.10",
"svgo": "^3.0.2",
"world-countries": "^5.0.0"
},
"peerDependencies": {
"react": ">=0.14"
}
},
"node_modules/recharts": { "node_modules/recharts": {
"version": "2.15.4", "version": "2.15.4",
"resolved": "https://registry.npmjs.org/recharts/-/recharts-2.15.4.tgz", "resolved": "https://registry.npmjs.org/recharts/-/recharts-2.15.4.tgz",
@@ -6375,8 +6552,7 @@
"version": "5.0.1", "version": "5.0.1",
"resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz", "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
"integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==", "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
"license": "MIT", "license": "MIT"
"peer": true
}, },
"node_modules/redux-thunk": { "node_modules/redux-thunk": {
"version": "3.1.0", "version": "3.1.0",
@@ -6500,6 +6676,15 @@
"queue-microtask": "^1.2.2" "queue-microtask": "^1.2.2"
} }
}, },
"node_modules/sax": {
"version": "1.6.0",
"resolved": "https://registry.npmjs.org/sax/-/sax-1.6.0.tgz",
"integrity": "sha512-6R3J5M4AcbtLUdZmRv2SygeVaM7IhrLXu9BmnOGmmACak8fiUtOsYNWUS4uK7upbmHIBbLBeFeI//477BKLBzA==",
"license": "BlueOak-1.0.0",
"engines": {
"node": ">=11.0.0"
}
},
"node_modules/scheduler": { "node_modules/scheduler": {
"version": "0.23.2", "version": "0.23.2",
"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz", "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
@@ -6526,7 +6711,8 @@
"version": "1.0.0", "version": "1.0.0",
"resolved": "https://registry.npmjs.org/semver-compare/-/semver-compare-1.0.0.tgz", "resolved": "https://registry.npmjs.org/semver-compare/-/semver-compare-1.0.0.tgz",
"integrity": "sha512-YM3/ITh2MJ5MtzaM429anh+x2jiLVjqILF4m4oyQB18W7Ggea7BfqdH/wGMK7dDiMghv/6WG7znWMwUDzJiXow==", "integrity": "sha512-YM3/ITh2MJ5MtzaM429anh+x2jiLVjqILF4m4oyQB18W7Ggea7BfqdH/wGMK7dDiMghv/6WG7znWMwUDzJiXow==",
"license": "MIT" "license": "MIT",
"peer": true
}, },
"node_modules/set-cookie-parser": { "node_modules/set-cookie-parser": {
"version": "2.7.1", "version": "2.7.1",
@@ -6646,6 +6832,37 @@
"node": ">=8" "node": ">=8"
} }
}, },
"node_modules/svg-country-flags": {
"version": "1.2.10",
"resolved": "https://registry.npmjs.org/svg-country-flags/-/svg-country-flags-1.2.10.tgz",
"integrity": "sha512-xrqwo0TYf/h2cfPvGpjdSuSguUbri4vNNizBnwzoZnX0xGo3O5nGJMlbYEp7NOYcnPGBm6LE2axqDWSB847bLw==",
"license": "PD"
},
"node_modules/svgo": {
"version": "3.3.3",
"resolved": "https://registry.npmjs.org/svgo/-/svgo-3.3.3.tgz",
"integrity": "sha512-+wn7I4p7YgJhHs38k2TNjy1vCfPIfLIJWR5MnCStsN8WuuTcBnRKcMHQLMM2ijxGZmDoZwNv8ipl5aTTen62ng==",
"license": "MIT",
"dependencies": {
"commander": "^7.2.0",
"css-select": "^5.1.0",
"css-tree": "^2.3.1",
"css-what": "^6.1.0",
"csso": "^5.0.5",
"picocolors": "^1.0.0",
"sax": "^1.5.0"
},
"bin": {
"svgo": "bin/svgo"
},
"engines": {
"node": ">=14.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/svgo"
}
},
"node_modules/tailwind-merge": { "node_modules/tailwind-merge": {
"version": "2.6.0", "version": "2.6.0",
"resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.6.0.tgz", "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.6.0.tgz",
@@ -6660,8 +6877,7 @@
"version": "4.1.11", "version": "4.1.11",
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.11.tgz", "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.11.tgz",
"integrity": "sha512-2E9TBm6MDD/xKYe+dvJZAmg3yxIEDNRc0jwlNyDg/4Fil2QcSLjFKGVff0lAf1jjeaArlG/M75Ey/EYr/OJtBA==", "integrity": "sha512-2E9TBm6MDD/xKYe+dvJZAmg3yxIEDNRc0jwlNyDg/4Fil2QcSLjFKGVff0lAf1jjeaArlG/M75Ey/EYr/OJtBA==",
"license": "MIT", "license": "MIT"
"peer": true
}, },
"node_modules/tailwindcss-animate": { "node_modules/tailwindcss-animate": {
"version": "1.0.7", "version": "1.0.7",
@@ -6846,7 +7062,6 @@
"integrity": "sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ==", "integrity": "sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ==",
"dev": true, "dev": true,
"license": "Apache-2.0", "license": "Apache-2.0",
"peer": true,
"bin": { "bin": {
"tsc": "bin/tsc", "tsc": "bin/tsc",
"tsserver": "bin/tsserver" "tsserver": "bin/tsserver"
@@ -7002,7 +7217,6 @@
"resolved": "https://registry.npmjs.org/vite/-/vite-5.4.19.tgz", "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.19.tgz",
"integrity": "sha512-qO3aKv3HoQC8QKiNSTuUM1l9o/XX3+c+VTgLHbJWHZGeTPVAg2XwazI9UWzoxjIJCGCV2zU60uqMzjeLZuULqA==", "integrity": "sha512-qO3aKv3HoQC8QKiNSTuUM1l9o/XX3+c+VTgLHbJWHZGeTPVAg2XwazI9UWzoxjIJCGCV2zU60uqMzjeLZuULqA==",
"license": "MIT", "license": "MIT",
"peer": true,
"dependencies": { "dependencies": {
"esbuild": "^0.21.3", "esbuild": "^0.21.3",
"postcss": "^8.4.43", "postcss": "^8.4.43",
@@ -7083,6 +7297,11 @@
"node": ">=0.10.0" "node": ">=0.10.0"
} }
}, },
"node_modules/world-countries": {
"version": "5.1.0",
"resolved": "https://registry.npmjs.org/world-countries/-/world-countries-5.1.0.tgz",
"integrity": "sha512-CXR6EBvTbArDlDDIWU3gfKb7Qk0ck2WNZ234b/A0vuecPzIfzzxH+O6Ejnvg1sT8XuiZjVlzOH0h08ZtaO7g0w=="
},
"node_modules/wrappy": { "node_modules/wrappy": {
"version": "1.0.2", "version": "1.0.2",
"resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",

View File

@@ -58,6 +58,7 @@
"react-responsive-masonry": "^2.7.1", "react-responsive-masonry": "^2.7.1",
"react-router-dom": "^7.6.3", "react-router-dom": "^7.6.3",
"react-slick": "^0.30.3", "react-slick": "^0.30.3",
"react-world-flags": "^1.6.0",
"recharts": "^2.15.4", "recharts": "^2.15.4",
"slick-carousel": "^1.8.1", "slick-carousel": "^1.8.1",
"sonner": "^2.0.3", "sonner": "^2.0.3",

View File

@@ -63,26 +63,41 @@ const AutomationHeroWithCTA = () => {
/> />
{/* Canonical Link */} {/* Canonical Link */}
<link rel="canonical" href="https://www.wdipl.com/services/ai-automation-workflows" /> <link
rel="canonical"
href="https://www.wdipl.com/services/ai-automation-workflows"
/>
{/* Open Graph Tags (for Facebook, LinkedIn) */} {/* Open Graph Tags (for Facebook, LinkedIn) */}
<meta property="og:title" content="AI Automation | Smart AI-Powered Workflows by WDI" /> <meta
property="og:title"
content="AI Automation | Smart AI-Powered Workflows by WDI"
/>
<meta <meta
property="og:description" property="og:description"
content="Streamline your operations with WDIs AI automation workflows. Enhance efficiency, reduce cost, and drive results using smart, scalable AI solutions." content="Streamline your operations with WDIs 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:url" content="https://www.wdipl.com/services" />
<meta property="og:type" content="website" /> <meta property="og:type" content="website" />
<meta property="og:image" content="https://www.wdipl.com/your-preview-image.jpg" /> <meta
property="og:image"
content="https://www.wdipl.com/your-preview-image.jpg"
/>
{/* Twitter Card Tags */} {/* Twitter Card Tags */}
<meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="AI Automation | Smart AI-Powered Workflows by WDI" /> <meta
name="twitter:title"
content="AI Automation | Smart AI-Powered Workflows by WDI"
/>
<meta <meta
name="twitter:description" name="twitter:description"
content="Streamline your operations with WDIs AI automation workflows. Enhance efficiency, reduce cost, and drive results using smart, scalable AI solutions." content="Streamline your operations with WDIs 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" /> <meta
name="twitter:image"
content="https://www.wdipl.com/your-preview-image.jpg"
/>
{/* Social Profiles (using JSON-LD Schema) */} {/* Social Profiles (using JSON-LD Schema) */}
<script type="application/ld+json"> <script type="application/ld+json">
@@ -125,9 +140,9 @@ const AutomationHeroWithCTA = () => {
</h1> </h1>
<p className="text-lg text-gray-300 leading-relaxed max-w-lg"> <p className="text-lg text-gray-300 leading-relaxed max-w-lg">
Revolutionize your operations by embedding Artificial Embed AI into your workflows, automate repetitive tasks, and
Intelligence into workflows, automating repetitive tasks, and boost efficiency with AIpowered automation designed for modern
enhancing efficiency across your organization. businesses.
</p> </p>
</div> </div>
@@ -491,6 +506,11 @@ const AutomationBenefits = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6"> <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
Drive Efficiency and Innovation with AI Automation Drive Efficiency and Innovation with AI Automation
</h2> </h2>
<p className="mt-4 text-gray-400 max-w-2xl mx-auto">
A clean, selfstanding heading that pairs well with your earlier
AIpowered automation & workflow section. If you want, you can add
a short line under it like
</p>
</motion.div> </motion.div>
<motion.div <motion.div
@@ -626,6 +646,11 @@ const AutomationProcess = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6"> <h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
Our Strategic Approach to Workflow Automation Our Strategic Approach to Workflow Automation
</h2> </h2>
<p className="mt-4 text-gray-400 max-w-2xl mx-auto">
A structured, AIled approach to workflow automation that aligns
with your business goals, streamlines operations, and powers
AIpowered mobile and web solutions.
</p>
</motion.div> </motion.div>
<div className="relative"> <div className="relative">
@@ -783,6 +808,11 @@ const AutomationServices = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6"> <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
Our Specialized AI-Powered Automation Solutions Our Specialized AI-Powered Automation Solutions
</h2> </h2>
<p className="mt-4 text-gray-400 max-w-2xl mx-auto">
Custom AIdriven automation solutions that streamline workflows,
reduce manual effort, and power AIpowered mobile and web
operations.
</p>
</motion.div> </motion.div>
<motion.div <motion.div
@@ -1078,6 +1108,10 @@ const AutomationCaseStudies = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-8"> <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-8">
Real-World Impact of AI-Powered Automation Real-World Impact of AI-Powered Automation
</h2> </h2>
<p className="mt-4 text-gray-400 max-w-2xl mx-auto">
Clear, outcomefocused heading that sets up the section well. If
youd like, you can pair it with a short leadin line like:
</p>
</motion.div> </motion.div>
<motion.div <motion.div
@@ -1203,8 +1237,9 @@ const AutomationInlineCTA = () => {
</h2> </h2>
<p className="text-xl text-gray-300 leading-relaxed max-w-2xl mx-auto"> <p className="text-xl text-gray-300 leading-relaxed max-w-2xl mx-auto">
Discover how AI can transform your most repetitive and Discover how AIpowered automation can transform your most
time-consuming tasks. repetitive and timeconsuming tasks into streamlined, AIdriven
workflows.
</p> </p>
<ShimmerButton <ShimmerButton
@@ -1314,7 +1349,8 @@ const HireAutomationEngineers = () => {
</h2> </h2>
<p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed"> <p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
Hire our specialists in RPA, intelligent process automation, and Hire our specialists in RPA, intelligent process automation, and
workflow optimization with AI. AIdriven workflow optimization to build scalable, AIpowered
automation solutions.
</p> </p>
</motion.div> </motion.div>
@@ -1408,23 +1444,23 @@ const AutomationFAQs = () => {
{ {
question: "What types of processes are best suited for AI automation?", question: "What types of processes are best suited for AI automation?",
answer: answer:
"AI automation works best for repetitive, rule-based processes with high volume and predictable patterns. Ideal candidates include data entry, document processing, customer service routing, quality control inspection, invoice processing, and compliance reporting. Processes with clear inputs/outputs, minimal exceptions, and measurable outcomes typically yield the highest ROI. We conduct process assessments to identify automation opportunities that deliver maximum value.", "AI automation works best for repetitive, rulebased processes with high volume and predictable patterns, especially when they feed into AIpowered mobile and web workflows. Ideal candidates include data entry, document processing, customer service routing, quality control inspection, invoice processing, and compliance reporting. Processes with clear inputs/outputs, minimal exceptions, and measurable outcomes typically yield the highest ROI. We conduct process assessments to identify automation opportunities that deliver maximum value.",
}, },
{ {
question: "How do you measure the ROI of AI automation?", question: "How do you measure the ROI of AI automation?",
answer: answer:
"We measure ROI through multiple metrics including time savings (hours reduced), cost savings (labor and operational costs), accuracy improvements (error reduction), productivity gains (throughput increase), and compliance benefits. Our ROI calculation considers implementation costs, ongoing maintenance, and quantifiable benefits over 12-36 months. Most clients see 200-400% ROI within the first year, with payback periods typically ranging from 6-18 months depending on process complexity and volume.", "We measure ROI through multiple metrics including time savings (hours reduced), cost savings (labor and operational costs), accuracy improvements (error reduction), productivity gains (throughput increase), and compliance benefits. Our ROI calculation considers implementation costs, ongoing maintenance, and quantifiable benefits over 1236 months. Most clients see 200400% ROI within the first year, with payback periods typically ranging from 618 months depending on process complexity and volume.",
}, },
{ {
question: "What's the difference between RPA and IPA?", question: "What's the difference between RPA and IPA?",
answer: answer:
"RPA (Robotic Process Automation) handles rule-based, structured tasks by mimicking human actions on screens and systems. IPA (Intelligent Process Automation) combines RPA with AI technologies like machine learning, natural language processing, and computer vision to handle unstructured data and make decisions. While RPA follows predefined rules, IPA can learn, adapt, and handle exceptions. IPA is ideal for complex workflows requiring cognitive capabilities, document understanding, or decision-making based on variable inputs.", "RPA (Robotic Process Automation) handles rulebased, structured tasks by mimicking human actions on screens and systems. IPA (Intelligent Process Automation) combines RPA with AI technologies like machine learning, natural language processing, and computer vision to handle unstructured data and make decisions. While RPA follows predefined rules, IPA can learn, adapt, and handle exceptions. IPA is ideal for complex workflows requiring cognitive capabilities, document understanding, or decisionmaking based on variable inputs.",
}, },
{ {
question: question:
"Do you provide training for staff after automation implementation?", "Do you provide training for staff after automation implementation?",
answer: answer:
"Yes, comprehensive training and change management are integral parts of our automation implementation. We provide role-specific training for system administrators, process owners, and end-users. This includes hands-on workshops, documentation, troubleshooting guides, and ongoing support. Our change management approach ensures smooth adoption, addresses concerns, and helps teams adapt to new workflows. We also offer train-the-trainer programs to build internal capabilities for scaling automation across your organization.", "Yes, comprehensive training and change management are integral parts of our automation implementation, including AIpowered automation projects. We provide rolespecific training for system administrators, process owners, and endusers. This includes hands-on workshops, documentation, troubleshooting guides, and ongoing support. Our change management approach ensures smooth adoption, addresses concerns, and helps teams adapt to new workflows. We also offer trainthetrainer programs to build internal capabilities for scaling automation across your organization.",
}, },
]; ];
@@ -1517,7 +1553,8 @@ const AutomationFinalCTA = () => {
className="text-xl text-muted-foreground mb-12 max-w-2xl mx-auto leading-relaxed" className="text-xl text-muted-foreground mb-12 max-w-2xl mx-auto leading-relaxed"
> >
Drive unprecedented efficiency, accuracy, and scalability by Drive unprecedented efficiency, accuracy, and scalability by
integrating AI into your core business processes. integrating AIpowered automation into your core business processes
and workflows.
</motion.p> </motion.p>
<motion.div <motion.div
@@ -1611,9 +1648,7 @@ export const AIAutomationWorkflows = () => {
</section> </section>
{/* Footer */} {/* Footer */}
<section className="bg-background"> <section className="bg-background">{/* <Footer /> */}</section>
{/* <Footer /> */}
</section>
</div> </div>
); );
}; };

View File

@@ -123,9 +123,7 @@ const ChatbotsHeroWithCTA = () => {
</h1> </h1>
<p className="text-lg text-gray-300 leading-relaxed max-w-lg"> <p className="text-lg text-gray-300 leading-relaxed max-w-lg">
Building intelligent conversational AI solutions that enhance Building intelligent conversational AI solutions that enhance service, automate workflows, and deliver AIdriven chatbot experiences for your users.
customer service, streamline internal processes, and provide
instant, accurate information.
</p> </p>
</div> </div>
@@ -621,6 +619,9 @@ const ChatbotDevelopmentProcess = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6"> <h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
Our Comprehensive Approach to Conversational AI Our Comprehensive Approach to Conversational AI
</h2> </h2>
<p className="mt-4 text-gray-400 max-w-2xl mx-auto">
A focused strategy to design and deploy conversational AI solutions that drive AIdriven engagement and smarter support across your apps and platforms.
</p>
</motion.div> </motion.div>
<div className="relative"> <div className="relative">
@@ -783,6 +784,9 @@ const ChatbotServices = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6"> <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
Our Specialized Conversational AI Solutions Our Specialized Conversational AI Solutions
</h2> </h2>
<p className="mt-4 text-gray-400 max-w-2xl mx-auto">
Focused conversational AI products that deliver AIdriven engagement, automate support, and streamline workflows for your apps and teams.
</p>
</motion.div> </motion.div>
<motion.div <motion.div
@@ -1018,6 +1022,9 @@ const ChatbotCaseStudies = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-8"> <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-8">
Intelligent Chatbots Driving Customer Engagement Intelligent Chatbots Driving Customer Engagement
</h2> </h2>
<p className="mt-4 text-gray-400 max-w-2xl mx-auto">
Smarter conversational AI bots that guide users, automate support, and drive higher engagement throughout the customer journey.
</p>
</motion.div> </motion.div>
<motion.div <motion.div
@@ -1143,8 +1150,7 @@ const ChatbotInlineCTA = () => {
</h2> </h2>
<p className="text-xl text-gray-300 leading-relaxed max-w-2xl mx-auto"> <p className="text-xl text-gray-300 leading-relaxed max-w-2xl mx-auto">
Let's discuss how conversational AI can transform your Lets discuss how conversational AI can transform your interactions through AIpowered chatbots that automate support, personalize journeys, and deliver instant, accurate answers.
interactions.
</p> </p>
<ShimmerButton <ShimmerButton
@@ -1253,8 +1259,7 @@ const HireChatbotDevelopers = () => {
Access Expert Chatbot & Virtual Assistant Developers Access Expert Chatbot & Virtual Assistant Developers
</h2> </h2>
<p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed"> <p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
Hire our specialists in NLP, conversation design, and AI model Leverage deepdomain specialists in NLP and conversation design to create AIpowered chatbots that fit your voice, workflows, and userexperience goals.
training for cutting-edge chatbots.
</p> </p>
</motion.div> </motion.div>
@@ -1347,24 +1352,24 @@ const ChatbotFAQs = () => {
const faqs = [ const faqs = [
{ {
question: question:
"What is the difference between a rule-based chatbot and an AI chatbot?", "What is the difference between a rulebased chatbot and an AI chatbot?",
answer: answer:
"Rule-based chatbots follow predefined decision trees and can only respond to specific keywords or phrases they're programmed to recognize. They're limited to scripted responses and can't handle variations in user queries. AI chatbots, on the other hand, use natural language processing and machine learning to understand user intent, context, and variations in language. They can learn from conversations, handle complex queries, understand synonyms and context, and provide more natural, human-like responses. AI chatbots are more flexible, scalable, and capable of handling unexpected user inputs.", "Rulebased chatbots follow predefined decision trees and can only respond to specific keywords or phrases they are programmed to recognize. They are limited to scripted responses and cannot handle variations in user queries. AI chatbots, in contrast, use natural language processing (NLP) and machine learning to understand user intent, context, and variations in language. They learn from conversations, handle complex queries, recognize synonyms and context shifts, and provide more natural, humanlike responses. AI chatbots are more flexible, scalable, and able to cope with unexpected inputs.",
}, },
{ {
question: "How long does it take to develop a custom chatbot?", question: "How long does it take to develop a custom chatbot?",
answer: answer:
"The development timeline varies based on complexity and requirements. A simple rule-based chatbot can be developed in 2-4 weeks, while a basic AI chatbot typically takes 6-8 weeks. More sophisticated conversational AI with advanced NLP, multiple integrations, and custom training can take 3-6 months. Factors affecting timeline include: conversation complexity, number of integrations, training data availability, multi-language support, voice capabilities, and testing requirements. We provide detailed project timelines during the planning phase based on your specific needs.", "The development timeline depends on scope and complexity. A simple rulebased chatbot can be built in 24 weeks, while a basic AI chatbot typically takes 68 weeks. More sophisticated conversational AI with advanced NLP, multiple integrations, and custom training usually requires 36 months. Key factors affecting the timeline include conversation complexity, the number of integrations, availability of training data, multilanguage support, voice capabilities, and testing depth. We provide a detailed, projectspecific timeline during the planning phase.",
}, },
{ {
question: "Can a chatbot integrate with my existing CRM/ERP system?", question: "Can a chatbot integrate with my existing CRM/ERP system?",
answer: answer:
"Yes, chatbots can integrate with virtually any CRM, ERP, or business system through APIs, webhooks, or direct database connections. Common integrations include Salesforce, HubSpot, Microsoft Dynamics, SAP, Oracle, Zendesk, and custom systems. Integration capabilities include: retrieving customer information, updating records, creating tickets, processing orders, scheduling appointments, and accessing knowledge bases. We ensure secure, real-time data synchronization while maintaining data privacy and system performance. The integration complexity depends on your system's API capabilities and security requirements.", "Yes. Chatbots can integrate with virtually any CRM, ERP, or business system using APIs, webhooks, or direct database connections. Common integrations include Salesforce, HubSpot, Microsoft Dynamics, SAP, Oracle, Zendesk, and custombuilt platforms. Typical integration capabilities include retrieving customer profiles, updating records, creating support tickets, processing orders, scheduling appointments, and accessing knowledge bases. We ensure secure, realtime data sync, maintain dataprivacy standards, and optimize for system performance. Complexity depends on your systems API maturity and security requirements.",
}, },
{ {
question: "How do you measure the success of a chatbot?", question: "How do you measure the success of a chatbot?",
answer: answer:
"Chatbot success is measured through multiple key performance indicators (KPIs): User Engagement (conversation completion rate, session duration, return users), Resolution Metrics (first contact resolution, escalation rate, successful task completion), Customer Satisfaction (CSAT scores, user feedback ratings, Net Promoter Score), Operational Efficiency (response time, cost per interaction, agent workload reduction), and Business Impact (lead generation, conversion rates, cost savings). We implement comprehensive analytics dashboards to track these metrics in real-time and provide regular performance reports with actionable insights for continuous improvement.", "We implement analytics dashboards that monitor these KPIs in real time and deliver regular performance reports with actionable recommendations for continuous improvement.",
}, },
]; ];

View File

@@ -59,26 +59,41 @@ const AIIntegrationHeroWithCTA = () => {
/> />
{/* Canonical Link */} {/* Canonical Link */}
<link rel="canonical" href="https://www.wdipl.com/services/ai-integration-digital-products" /> <link
rel="canonical"
href="https://www.wdipl.com/services/ai-integration-digital-products"
/>
{/* Open Graph Tags (for Facebook, LinkedIn) */} {/* Open Graph Tags (for Facebook, LinkedIn) */}
<meta property="og:title" content="AI Integration | Smarter Digital Products with AI | WDI" /> <meta
property="og:title"
content="AI Integration | Smarter Digital Products with AI | WDI"
/>
<meta <meta
property="og:description" property="og:description"
content="WDI helps businesses enhance digital products with seamless AI integration. Improve UX, automation, and decision-making across platforms." 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:url" content="https://www.wdipl.com/services" />
<meta property="og:type" content="website" /> <meta property="og:type" content="website" />
<meta property="og:image" content="https://www.wdipl.com/your-preview-image.jpg" /> <meta
property="og:image"
content="https://www.wdipl.com/your-preview-image.jpg"
/>
{/* Twitter Card Tags */} {/* Twitter Card Tags */}
<meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="AI Integration | Smarter Digital Products with AI | WDI" /> <meta
name="twitter:title"
content="AI Integration | Smarter Digital Products with AI | WDI"
/>
<meta <meta
name="twitter:description" name="twitter:description"
content="WDI helps businesses enhance digital products with seamless AI integration. Improve UX, automation, and decision-making across platforms." 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" /> <meta
name="twitter:image"
content="https://www.wdipl.com/your-preview-image.jpg"
/>
{/* Social Profiles (using JSON-LD Schema) */} {/* Social Profiles (using JSON-LD Schema) */}
<script type="application/ld+json"> <script type="application/ld+json">
@@ -121,9 +136,9 @@ const AIIntegrationHeroWithCTA = () => {
</h1> </h1>
<p className="text-lg text-gray-300 leading-relaxed max-w-lg"> <p className="text-lg text-gray-300 leading-relaxed max-w-lg">
Elevate your existing applications with intelligent features Enhance your existing digital products with AIdriven features
that personalize user experiences, automate functions, and that personalize experiences, automate tasks, and deliver
provide predictive insights. predictive insights.
</p> </p>
</div> </div>
@@ -543,6 +558,11 @@ const AIIntegrationBenefits = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6"> <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
Why Integrate AI into Your Existing Products? Why Integrate AI into Your Existing Products?
</h2> </h2>
<p className="mt-4 text-gray-400 max-w-2xl mx-auto">
To unlock AIpowered features that enhance user experiences,
automate key functions, and deliver predictive insights without
rebuilding your digital products from scratch.
</p>
</motion.div> </motion.div>
<motion.div <motion.div
@@ -676,8 +696,13 @@ const AIIntegrationProcess = () => {
className="text-center mb-20" className="text-center mb-20"
> >
<h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6"> <h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
Our Strategic Approach to AI-Powered Product Enhancement Our Strategic Approach to AIPowered Product Enhancement
</h2> </h2>
<p className="mt-4 text-gray-400 max-w-2xl mx-auto">
A clear roadmap to enrich your current products with AIdriven
features that improve UX, automate workflows, and unlock predictive
insights.
</p>
</motion.div> </motion.div>
<div className="relative"> <div className="relative">
@@ -843,6 +868,11 @@ const AIIntegrationServices = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6"> <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
Our Specialized AI Product Integration Solutions Our Specialized AI Product Integration Solutions
</h2> </h2>
<p className="mt-4 text-gray-400 max-w-2xl mx-auto">
Specialized AI product integration for existing apps and platforms,
focused on AIdriven enhancements, seamless workflows, and faster
timetovalue.
</p>
</motion.div> </motion.div>
<motion.div <motion.div
@@ -1076,6 +1106,10 @@ const AIIntegrationCaseStudies = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-8"> <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-8">
Digital Products Transformed by AI Integration Digital Products Transformed by AI Integration
</h2> </h2>
<p className="mt-4 text-gray-400 max-w-2xl mx-auto">
See how AI integration turns your current digital products into
smarter, faster, and more userfocused mobile and web experiences.
</p>
</motion.div> </motion.div>
<motion.div <motion.div
@@ -1201,8 +1235,9 @@ const AIIntegrationInlineCTA = () => {
</h2> </h2>
<p className="text-xl text-gray-300 leading-relaxed max-w-2xl mx-auto"> <p className="text-xl text-gray-300 leading-relaxed max-w-2xl mx-auto">
Discover how AI can unlock new value and capabilities within your Discover how AIpowered integration can unlock new value,
existing applications. capabilities, and personalized experiences within your existing
mobile and web applications.
</p> </p>
<ShimmerButton <ShimmerButton
@@ -1312,8 +1347,8 @@ const HireAIIntegrationSpecialists = () => {
Access Expert AI Integration Engineers Access Expert AI Integration Engineers
</h2> </h2>
<p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed"> <p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
Hire our skilled developers and data scientists experienced in Hire developers and data scientists who specialize in embedding AI
embedding AI models into diverse digital products. models into your existing digital products.
</p> </p>
</motion.div> </motion.div>
@@ -1407,22 +1442,22 @@ const AIIntegrationFAQs = () => {
{ {
question: "What data do I need to prepare for AI integration?", question: "What data do I need to prepare for AI integration?",
answer: answer:
"The data requirements depend on your specific AI use case. Generally, you'll need clean, relevant data that represents your users' behavior and preferences. For recommendation engines, user interaction data and product/content metadata are essential. For chatbots, conversation logs and FAQ databases help train the model. For predictive analytics, historical user behavior and outcome data are crucial. We conduct a thorough data audit to identify what you have, what you need, and help prepare your data for optimal AI performance.", "The data requirements depend on your specific AI use case. Generally, youll need clean, relevant data that represents your users behavior and preferences, especially for AIpowered mobile and web experiences. For recommendation engines, user interaction data and product/content metadata are essential. For chatbots, conversation logs and FAQ databases help train the model. For predictive analytics, historical user behavior and outcome data are crucial. We conduct a thorough data audit to identify what you have, what you need, and help prepare your data for optimal AI performance.",
}, },
{ {
question: "Will AI integration impact my app's performance?", question: "Will AI integration impact my app's performance?",
answer: answer:
"When implemented correctly, AI integration should enhance rather than hinder your app's performance. We use efficient API architectures, caching strategies, and optimized models to minimize latency. Many AI features can be processed asynchronously or in the background. We also implement progressive loading and fallback mechanisms to ensure your app remains fast and responsive. Performance testing is a crucial part of our integration process to ensure optimal user experience.", "When implemented correctly, AI integration should enhance rather than hinder your apps performance. We use efficient API architectures, caching strategies, and optimized models to minimize latency. Many AI features can be processed asynchronously or in the background. We also implement progressive loading and fallback mechanisms to ensure your app remains fast and responsive. Performance testing is a crucial part of our integration process to ensure optimal user experience for AIpowered mobile and web applications.",
}, },
{ {
question: "Can you integrate AI into legacy applications?", question: "Can you integrate AI into legacy applications?",
answer: answer:
"Yes, we specialize in integrating AI into legacy applications through various approaches. We can create API-based integrations that work with existing systems, implement microservices architectures for gradual AI adoption, or develop hybrid solutions that bridge old and new technologies. Our team assesses your current architecture and recommends the best integration approach that minimizes disruption while maximizing AI benefits. We've successfully integrated AI into applications built on various legacy technologies.", "Yes, we specialize in integrating AI into legacy applications through various approaches. We can create APIbased integrations that work with existing systems, implement microservices architectures for gradual AI adoption, or develop hybrid solutions that bridge old and new technologies. Our team assesses your current architecture and recommends the best integration approach that minimizes disruption while maximizing AI benefits for your existing digital products.",
}, },
{ {
question: "How do you handle data privacy and security with AI features?", question: "How do you handle data privacy and security with AI features?",
answer: answer:
"Data privacy and security are paramount in our AI integrations. We implement privacy-by-design principles, ensuring compliance with GDPR, CCPA, and other relevant regulations. This includes data encryption, anonymization techniques, secure API communications, and minimal data collection practices. We can implement on-premise AI solutions for sensitive data, use federated learning approaches, or ensure strict data governance in cloud deployments. All AI models are designed with privacy protection and security best practices from the ground up.", "Data privacy and security are paramount in our AI integrations. We implement privacybydesign principles, ensuring compliance with GDPR, CCPA, and other relevant regulations. This includes data encryption, anonymization techniques, secure API communications, and minimal data collection practices. We can implement onpremise AI solutions for sensitive data, use federated learning approaches, or ensure strict data governance in cloud deployments. All AI models are designed with privacy protection and security best practices from the ground up, especially for AIpowered features.",
}, },
]; ];
@@ -1514,8 +1549,7 @@ const AIIntegrationFinalCTA = () => {
viewport={{ once: true }} viewport={{ once: true }}
className="text-xl text-muted-foreground mb-12 max-w-2xl mx-auto leading-relaxed" className="text-xl text-muted-foreground mb-12 max-w-2xl mx-auto leading-relaxed"
> >
Empower your digital offerings with WDI's expertise in seamlessly Empower your digital offerings with WDIs expertise in seamlessly embedding cuttingedge AI features and AIpowered enhancements.
embedding cutting-edge AI features.
</motion.p> </motion.p>
<motion.div <motion.div
@@ -1609,9 +1643,7 @@ export const AIIntegrationDigitalProducts = () => {
</section> </section>
{/* Footer */} {/* Footer */}
<section className="bg-background"> <section className="bg-background">{/* <Footer /> */}</section>
{/* <Footer /> */}
</section>
</div> </div>
); );
}; };

View File

@@ -123,9 +123,7 @@ const MLOpsHeroWithCTA = () => {
</h1> </h1>
<p className="text-lg text-gray-300 leading-relaxed max-w-lg"> <p className="text-lg text-gray-300 leading-relaxed max-w-lg">
Ensuring your Machine Learning models are seamlessly deployed, Streamline AI model deployment and MLOps workflows to deploy, monitor, and optimize machine learning models in production, ensuring reliable, scalable, and highperformance AI systems.
efficiently managed, and continuously optimized for peak
performance in production environments.
</p> </p>
</div> </div>
@@ -488,6 +486,9 @@ const MLOpsBenefits = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6"> <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
Why Robust MLOps is Crucial for Your AI Success Why Robust MLOps is Crucial for Your AI Success
</h2> </h2>
<p className="mt-4 text-gray-400 max-w-2xl mx-auto">
Robust MLOps is essential for turning machine learning models into scalable, productionready AI systems that deliver reliable, secure, and continuously optimized performance across your organization.
</p>
</motion.div> </motion.div>
<motion.div <motion.div
@@ -629,6 +630,9 @@ const MLOpsProcess = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6"> <h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
Our Strategic Approach to MLOps Excellence Our Strategic Approach to MLOps Excellence
</h2> </h2>
<p className="mt-4 text-gray-400 max-w-2xl mx-auto">
A structured, endtoend MLOps strategy that streamlines machine learning model deployment, monitors performance, and continuously optimizes AI systems for scalable, productiongrade results.
</p>
</motion.div> </motion.div>
<div className="relative"> <div className="relative">
@@ -795,6 +799,9 @@ const MLOpsServices = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6"> <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
Our Specialized MLOps Capabilities Our Specialized MLOps Capabilities
</h2> </h2>
<p className="mt-4 text-gray-400 max-w-2xl mx-auto">
A structured, endtoend MLOps strategy that streamlines machine learning model deployment, monitors performance, and continuously optimizes AI systems for scalable, productiongrade results.
</p>
</motion.div> </motion.div>
<motion.div <motion.div
@@ -1040,6 +1047,9 @@ const MLOpsCaseStudies = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-8"> <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-8">
Ensuring AI Performance in Production Ensuring AI Performance in Production
</h2> </h2>
<p className="mt-4 text-gray-400 max-w-2xl mx-auto">
Proactively monitoring, measuring, and optimizing AI model performance in production to maintain accuracy, stability, scalability, and lowlatency inference across realworld workloads.
</p>
</motion.div> </motion.div>
<motion.div <motion.div
@@ -1165,8 +1175,7 @@ const MLOpsInlineCTA = () => {
</h2> </h2>
<p className="text-xl text-gray-300 leading-relaxed max-w-2xl mx-auto"> <p className="text-xl text-gray-300 leading-relaxed max-w-2xl mx-auto">
Ensure your AI investments deliver continuous value with expert Ensure your AI and machine learning models deliver continuous business value through expert deployment, monitoring, and ongoing MLOpsdriven optimization.
deployment and maintenance.
</p> </p>
<ShimmerButton <ShimmerButton
@@ -1276,8 +1285,7 @@ const HireMLOpsEngineers = () => {
Access Expert MLOps & ML Infrastructure Talent Access Expert MLOps & ML Infrastructure Talent
</h2> </h2>
<p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed"> <p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
Hire our specialized engineers proficient in deploying, monitoring, Hire our specialized engineers proficient in deploying, monitoring, and maintaining productiongrade machine learning models, with deep expertise in MLOps, model observability, and scalable ML infrastructure.
and maintaining production-grade ML models.
</p> </p>
</motion.div> </motion.div>
@@ -1371,22 +1379,22 @@ const MLOpsFAQs = () => {
{ {
question: 'What is "model drift" and how do you handle it?', question: 'What is "model drift" and how do you handle it?',
answer: answer:
"Model drift occurs when a machine learning model's performance degrades over time due to changes in the underlying data distribution or relationships between variables. There are two main types: data drift (changes in input features) and concept drift (changes in the relationship between inputs and outputs). We handle drift through continuous monitoring systems that track statistical properties of incoming data, model performance metrics, and prediction distributions. Our automated systems detect drift using statistical tests, distance metrics, and performance thresholds, then trigger alerts and potentially automatic retraining workflows to maintain model accuracy.", "Model drift occurs when a machine learning models performance degrades over time due to changes in the underlying data distribution or relationships between variables. The two main types are data drift (changes in input features) and concept drift (changes in the relationship between inputs and outputs). We handle drift through continuous monitoring systems that track statistical properties of incoming data, model performance metrics, and prediction distributions. Our automated systems detect drift using statistical tests, distance metrics, and performance thresholds, then trigger alerts and potentially automatic retraining workflows to maintain model accuracy and keep your AI systems performing at peak levels in production.",
}, },
{ {
question: "How do you ensure data security for models in production?", question: "How do you ensure data security for models in production?",
answer: answer:
"We implement comprehensive security measures at multiple levels: data encryption in transit and at rest, secure API endpoints with authentication and authorization, network isolation using VPCs and firewalls, access control with role-based permissions, audit logging for all model interactions, and compliance with industry standards like GDPR, HIPAA, and SOC 2. We also employ techniques like differential privacy, federated learning where appropriate, and secure multi-party computation for sensitive data. Regular security audits, vulnerability assessments, and penetration testing ensure ongoing protection of your ML infrastructure and data.", "We implement comprehensive security measures at multiple levels for productiongrade AI and machine learning models: data encryption in transit and at rest, secure API endpoints with authentication and authorization, network isolation using VPCs and firewalls, access control with rolebased permissions, audit logging for all model interactions, and compliance with industry standards such as GDPR, HIPAA, and SOC 2. We also employ techniques like differential privacy, federated learning where appropriate, and secure multiparty computation for sensitive data. Regular security audits, vulnerability assessments, and penetration testing ensure ongoing protection of your ML infrastructure, models, and training data throughout the MLOps lifecycle.",
}, },
{ {
question: "What is the difference between DevOps and MLOps?", question: "What is the difference between DevOps and MLOps?",
answer: answer:
"While DevOps focuses on software development and deployment, MLOps extends these practices to machine learning workflows with unique considerations: MLOps manages data pipelines alongside code, handles model versioning and experiment tracking, monitors model performance and data drift (not just system metrics), deals with non-deterministic outcomes and model retraining, requires specialized infrastructure for GPU/TPU workloads, and addresses ML-specific compliance and explainability requirements. MLOps also involves continuous training alongside continuous integration/deployment, and requires different tooling for model registries, feature stores, and ML-specific monitoring systems.", "While DevOps focuses on software development, testing, and deployment, MLOps extends these practices to machine learning workflows with unique requirements. MLOps manages data pipelines alongside code, handles model versioning and experiment tracking, monitors model performance and data drift (not just system metrics), and deals with nondeterministic outcomes and periodic model retraining. MLOps also requires specialized infrastructure for GPU/TPU workloads, addresses MLspecific compliance, explainability, and governance needs, and includes continuous training in addition to continuous integration and deployment. It relies on different tooling for model registries, feature stores, and MLspecific monitoring systems, making it the backbone of scalable, productionready AI.",
}, },
{ {
question: "Can you help migrate existing models to a new MLOps platform?", question: "Can you help migrate existing models to a new MLOps platform?",
answer: answer:
"Yes, we specialize in MLOps platform migrations and model modernization. Our migration process includes: comprehensive assessment of existing models, infrastructure, and workflows; compatibility analysis and gap identification; migration strategy development with minimal downtime; model containerization and standardization; data pipeline recreation and optimization; CI/CD pipeline setup for the new platform; performance testing and validation; team training on new tools and processes; and gradual rollout with fallback capabilities. We support migrations between major platforms (AWS SageMaker, Azure ML, Google AI Platform, on-premise to cloud, etc.) and ensure all model governance, monitoring, and compliance requirements are maintained throughout the transition.", "Yes. We specialize in MLOps platform migrations and ML model modernization. Our migration process includes a comprehensive assessment of existing models, infrastructure, and workflows; compatibility analysis and gap identification; migration strategy development with minimal downtime; model containerization and standardization; data pipeline recreation and optimization; CI/CD pipeline setup for the new platform; performance testing and validation; team training on new tools and processes; and gradual rollout with fallback capabilities. We support migrations between major platforms such as AWS SageMaker, Azure ML, Google AI Platform, and onpremise to cloud environments, ensuring all model governance, monitoring, and compliance requirements are maintained throughout the transition and that your AI investments continue to deliver value in the new MLOps ecosystem.",
}, },
]; ];

View File

@@ -22,12 +22,17 @@ import {
Target, Target,
TrendingUp, TrendingUp,
UserPlus, UserPlus,
Users Users,
} from "lucide-react"; } from "lucide-react";
import { ImageWithFallback } from "../components/figma/ImageWithFallback"; import { ImageWithFallback } from "../components/figma/ImageWithFallback";
import { Footer } from "../components/Footer"; import { Footer } from "../components/Footer";
import { Navigation } from "../components/Navigation"; import { Navigation } from "../components/Navigation";
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "../components/ui/accordion"; import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from "../components/ui/accordion";
import { Badge } from "../components/ui/badge"; import { Badge } from "../components/ui/badge";
import { Button } from "../components/ui/button"; import { Button } from "../components/ui/button";
import { Card, CardContent } from "../components/ui/card"; import { Card, CardContent } from "../components/ui/card";
@@ -49,26 +54,41 @@ const AIStrategyHeroWithCTA = () => {
/> />
{/* Canonical Link */} {/* Canonical Link */}
<link rel="canonical" href="https://www.wdipl.com/services/ai-strategy-consulting" /> <link
rel="canonical"
href="https://www.wdipl.com/services/ai-strategy-consulting"
/>
{/* Open Graph Tags (for Facebook, LinkedIn) */} {/* Open Graph Tags (for Facebook, LinkedIn) */}
<meta property="og:title" content="AI Strategy Consulting | Enterprise AI Roadmap | WDI" /> <meta
property="og:title"
content="AI Strategy Consulting | Enterprise AI Roadmap | WDI"
/>
<meta <meta
property="og:description" property="og:description"
content="WDIs phased AI strategy consulting helps you adopt intelligent technologies with clarity, scalability, and long-term business transformation goals." content="WDIs 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:url" content="https://www.wdipl.com/services" />
<meta property="og:type" content="website" /> <meta property="og:type" content="website" />
<meta property="og:image" content="https://www.wdipl.com/your-preview-image.jpg" /> <meta
property="og:image"
content="https://www.wdipl.com/your-preview-image.jpg"
/>
{/* Twitter Card Tags */} {/* Twitter Card Tags */}
<meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="AI Strategy Consulting | Enterprise AI Roadmap | WDI" /> <meta
name="twitter:title"
content="AI Strategy Consulting | Enterprise AI Roadmap | WDI"
/>
<meta <meta
name="twitter:description" name="twitter:description"
content="WDIs phased AI strategy consulting helps you adopt intelligent technologies with clarity, scalability, and long-term business transformation goals." content="WDIs 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" /> <meta
name="twitter:image"
content="https://www.wdipl.com/your-preview-image.jpg"
/>
{/* Social Profiles (using JSON-LD Schema) */} {/* Social Profiles (using JSON-LD Schema) */}
<script type="application/ld+json"> <script type="application/ld+json">
@@ -111,7 +131,10 @@ const AIStrategyHeroWithCTA = () => {
</h1> </h1>
<p className="text-lg text-gray-300 leading-relaxed max-w-lg"> <p className="text-lg text-gray-300 leading-relaxed max-w-lg">
Guiding your business through the complexities of Artificial Intelligence, from identifying opportunities to defining a clear, actionable AI roadmap. Guiding your business through the complexities of Artificial
Intelligence, from identifying opportunities to defining a
clear, actionable AI roadmap for AIpowered mobile and web
development.
</p> </p>
</div> </div>
@@ -122,8 +145,9 @@ const AIStrategyHeroWithCTA = () => {
transition={{ duration: 0.8, delay: 0.3 }} transition={{ duration: 0.8, delay: 0.3 }}
className="flex flex-col sm:flex-row gap-4" className="flex flex-col sm:flex-row gap-4"
> >
<ShimmerButton className="text-lg px-8 py-4" <ShimmerButton
onClick={() => navigate("/start-a-project")} className="text-lg px-8 py-4"
onClick={() => navigate("/start-a-project")}
> >
<div className="inline-flex items-center gap-2"> <div className="inline-flex items-center gap-2">
<Brain className="w-5 h-5 flex-shrink-0" /> <Brain className="w-5 h-5 flex-shrink-0" />
@@ -178,7 +202,9 @@ const AIStrategyHeroWithCTA = () => {
<div className="w-8 h-8 bg-accent/20 rounded-lg flex items-center justify-center"> <div className="w-8 h-8 bg-accent/20 rounded-lg flex items-center justify-center">
<Brain className="w-5 h-5 text-accent" /> <Brain className="w-5 h-5 text-accent" />
</div> </div>
<h3 className="text-lg font-semibold text-white">AI Strategy Roadmap</h3> <h3 className="text-lg font-semibold text-white">
AI Strategy Roadmap
</h3>
</div> </div>
<div className="w-full h-1 bg-gradient-to-r from-accent via-blue-500 to-purple-500 rounded-full"></div> <div className="w-full h-1 bg-gradient-to-r from-accent via-blue-500 to-purple-500 rounded-full"></div>
</motion.div> </motion.div>
@@ -197,7 +223,9 @@ const AIStrategyHeroWithCTA = () => {
<Search className="w-3 h-3 text-white" /> <Search className="w-3 h-3 text-white" />
</div> </div>
<div className="flex-1"> <div className="flex-1">
<div className="text-white text-xs font-medium">Discovery & Analysis</div> <div className="text-white text-xs font-medium">
Discovery & Analysis
</div>
</div> </div>
<div className="text-xs text-blue-300">Phase 1</div> <div className="text-xs text-blue-300">Phase 1</div>
</div> </div>
@@ -221,7 +249,9 @@ const AIStrategyHeroWithCTA = () => {
<Target className="w-3 h-3 text-white" /> <Target className="w-3 h-3 text-white" />
</div> </div>
<div className="flex-1"> <div className="flex-1">
<div className="text-white text-xs font-medium">Opportunity Assessment</div> <div className="text-white text-xs font-medium">
Opportunity Assessment
</div>
</div> </div>
<div className="text-xs text-green-300">Phase 2</div> <div className="text-xs text-green-300">Phase 2</div>
</div> </div>
@@ -245,7 +275,9 @@ const AIStrategyHeroWithCTA = () => {
<Route className="w-3 h-3 text-white" /> <Route className="w-3 h-3 text-white" />
</div> </div>
<div className="flex-1"> <div className="flex-1">
<div className="text-white text-xs font-medium">Roadmap Development</div> <div className="text-white text-xs font-medium">
Roadmap Development
</div>
</div> </div>
<div className="text-xs text-purple-300">Phase 3</div> <div className="text-xs text-purple-300">Phase 3</div>
</div> </div>
@@ -269,7 +301,9 @@ const AIStrategyHeroWithCTA = () => {
<Rocket className="w-3 h-3 text-white" /> <Rocket className="w-3 h-3 text-white" />
</div> </div>
<div className="flex-1"> <div className="flex-1">
<div className="text-white text-xs font-medium">Implementation Planning</div> <div className="text-white text-xs font-medium">
Implementation Planning
</div>
</div> </div>
<div className="text-xs text-orange-300">Phase 4</div> <div className="text-xs text-orange-300">Phase 4</div>
</div> </div>
@@ -291,12 +325,20 @@ const AIStrategyHeroWithCTA = () => {
> >
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div> <div>
<div className="text-white text-sm font-medium">Projected ROI</div> <div className="text-white text-sm font-medium">
<div className="text-accent text-xs">12-month forecast</div> Projected ROI
</div>
<div className="text-accent text-xs">
12-month forecast
</div>
</div> </div>
<div className="text-right"> <div className="text-right">
<div className="text-2xl font-bold text-accent">+245%</div> <div className="text-2xl font-bold text-accent">
<div className="text-xs text-white/70">Expected Return</div> +245%
</div>
<div className="text-xs text-white/70">
Expected Return
</div>
</div> </div>
</div> </div>
</motion.div> </motion.div>
@@ -357,7 +399,11 @@ const AIStrategyHeroWithCTA = () => {
<Brain className="w-10 h-10 text-accent" /> <Brain className="w-10 h-10 text-accent" />
<motion.div <motion.div
animate={{ rotate: [0, 360] }} animate={{ rotate: [0, 360] }}
transition={{ duration: 8, repeat: Infinity, ease: "linear" }} transition={{
duration: 8,
repeat: Infinity,
ease: "linear",
}}
className="absolute inset-0 w-10 h-10" className="absolute inset-0 w-10 h-10"
> >
<div className="absolute top-0 left-1/2 w-1 h-1 bg-blue-400 rounded-full transform -translate-x-1/2"></div> <div className="absolute top-0 left-1/2 w-1 h-1 bg-blue-400 rounded-full transform -translate-x-1/2"></div>
@@ -377,15 +423,24 @@ const AIStrategyHeroWithCTA = () => {
transition={{ duration: 0.8, delay: 2.8 }} transition={{ duration: 0.8, delay: 2.8 }}
className="flex justify-center gap-4 flex-wrap mt-8" className="flex justify-center gap-4 flex-wrap mt-8"
> >
<Badge variant="secondary" className="bg-blue-500/20 text-blue-300 border-blue-500/30"> <Badge
variant="secondary"
className="bg-blue-500/20 text-blue-300 border-blue-500/30"
>
<Target className="w-3 h-3 mr-1" /> <Target className="w-3 h-3 mr-1" />
Strategic Strategic
</Badge> </Badge>
<Badge variant="secondary" className="bg-green-500/20 text-green-300 border-green-500/30"> <Badge
variant="secondary"
className="bg-green-500/20 text-green-300 border-green-500/30"
>
<BarChart3 className="w-3 h-3 mr-1" /> <BarChart3 className="w-3 h-3 mr-1" />
Data-Driven Data-Driven
</Badge> </Badge>
<Badge variant="secondary" className="bg-purple-500/20 text-purple-300 border-purple-500/30"> <Badge
variant="secondary"
className="bg-purple-500/20 text-purple-300 border-purple-500/30"
>
<Rocket className="w-3 h-3 mr-1" /> <Rocket className="w-3 h-3 mr-1" />
Actionable Actionable
</Badge> </Badge>
@@ -404,28 +459,32 @@ const AIStrategyBenefits = () => {
{ {
icon: Route, icon: Route,
title: "Clear Roadmap", title: "Clear Roadmap",
description: "Translate AI potential into a practical, implementable plan." description:
"Translate AI potential into a practical, implementable plan.",
}, },
{ {
icon: DollarSign, icon: DollarSign,
title: "Identified ROI", title: "Identified ROI",
description: "Focus on AI initiatives that deliver measurable business value." description:
"Focus on AI initiatives that deliver measurable business value.",
}, },
{ {
icon: Shield, icon: Shield,
title: "Risk Mitigation", title: "Risk Mitigation",
description: "Address ethical, data privacy, and implementation challenges upfront." description:
"Address ethical, data privacy, and implementation challenges upfront.",
}, },
{ {
icon: TrendingUp, icon: TrendingUp,
title: "Competitive Edge", title: "Competitive Edge",
description: "Leverage AI to innovate and differentiate your offerings." description: "Leverage AI to innovate and differentiate your offerings.",
}, },
{ {
icon: Brain, icon: Brain,
title: "Informed Decisions", title: "Informed Decisions",
description: "Gain insights into AI technologies relevant to your business." description:
} "Gain insights into AI technologies relevant to your business.",
},
]; ];
return ( return (
@@ -439,8 +498,12 @@ const AIStrategyBenefits = () => {
className="text-center mb-20" className="text-center mb-20"
> >
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6"> <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
Why Partner with WDI for AI Strategy? Why Choose WDI for AI Strategy?
</h2> </h2>
<p className="mt-4 text-gray-400 max-w-2xl mx-auto">
WDI combines AI expertise with businessaligned strategy to design
scalable AIpowered solutions tailored to your needs.
</p>
</motion.div> </motion.div>
<motion.div <motion.div
@@ -527,34 +590,40 @@ const AIStrategyProcess = () => {
const steps = [ const steps = [
{ {
title: "Discovery & Business Needs Analysis", title: "Discovery & Business Needs Analysis",
description: "Understanding your business objectives, current capabilities, and specific challenges to identify where AI can create the most value.", description:
icon: Search "Understanding your business objectives, current capabilities, and specific challenges to identify where AI can create the most value.",
icon: Search,
}, },
{ {
title: "AI Opportunity Assessment", title: "AI Opportunity Assessment",
description: "Evaluating potential AI use cases, market opportunities, and alignment with your business strategy and goals.", description:
icon: Target "Evaluating potential AI use cases, market opportunities, and alignment with your business strategy and goals.",
icon: Target,
}, },
{ {
title: "Data Readiness Evaluation", title: "Data Readiness Evaluation",
description: "Assessing your data quality, infrastructure, and governance to determine AI readiness and requirements.", description:
icon: Database "Assessing your data quality, infrastructure, and governance to determine AI readiness and requirements.",
icon: Database,
}, },
{ {
title: "Technology & Feasibility Study", title: "Technology & Feasibility Study",
description: "Analyzing technical requirements, platform options, and implementation feasibility for identified AI initiatives.", description:
icon: Cpu "Analyzing technical requirements, platform options, and implementation feasibility for identified AI initiatives.",
icon: Cpu,
}, },
{ {
title: "Roadmap Definition & ROI Projection", title: "Roadmap Definition & ROI Projection",
description: "Creating a prioritized implementation plan with timelines, resource requirements, and expected return on investment.", description:
icon: Route "Creating a prioritized implementation plan with timelines, resource requirements, and expected return on investment.",
icon: Route,
}, },
{ {
title: "Implementation Planning & Pilot Program", title: "Implementation Planning & Pilot Program",
description: "Developing detailed implementation strategies and launching pilot programs to validate concepts and approaches.", description:
icon: Rocket "Developing detailed implementation strategies and launching pilot programs to validate concepts and approaches.",
} icon: Rocket,
},
]; ];
return ( return (
@@ -570,6 +639,10 @@ const AIStrategyProcess = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6"> <h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
Our Phased Approach to Your AI Transformation Our Phased Approach to Your AI Transformation
</h2> </h2>
<p className="mt-4 text-gray-400 max-w-2xl mx-auto">
A structured AI strategy that moves your business from vision to
AIpowered mobile and web solutions in clear, measurable steps.
</p>
</motion.div> </motion.div>
<div className="relative"> <div className="relative">
@@ -588,15 +661,19 @@ const AIStrategyProcess = () => {
whileInView={{ opacity: 1, x: 0 }} whileInView={{ opacity: 1, x: 0 }}
transition={{ duration: 0.8, delay: index * 0.2 }} transition={{ duration: 0.8, delay: index * 0.2 }}
viewport={{ once: true }} 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`}> <div
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="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"> <div className="flex items-center gap-4 mb-4 justify-center lg:justify-start">
<div className="w-12 h-12 bg-accent/20 rounded-xl flex items-center justify-center"> <div className="w-12 h-12 bg-accent/20 rounded-xl flex items-center justify-center">
<IconComponent className="w-6 h-6 text-accent" /> <IconComponent className="w-6 h-6 text-accent" />
</div> </div>
<div className="text-2xl font-bold text-accent">0{index + 1}</div> <div className="text-2xl font-bold text-accent">
0{index + 1}
</div>
</div> </div>
<h3 className="text-2xl font-semibold text-white mb-4"> <h3 className="text-2xl font-semibold text-white mb-4">
{step.title} {step.title}
@@ -628,44 +705,80 @@ const AIStrategyOfferings = () => {
title: "AI Opportunity Identification", title: "AI Opportunity Identification",
description: "Pinpointing areas where AI can create value.", description: "Pinpointing areas where AI can create value.",
icon: Lightbulb, icon: Lightbulb,
features: ["Use Case Analysis", "Value Assessment", "Opportunity Mapping", "Business Impact"] features: [
"Use Case Analysis",
"Value Assessment",
"Opportunity Mapping",
"Business Impact",
],
}, },
{ {
title: "AI Readiness Assessment", title: "AI Readiness Assessment",
description: "Evaluating your data, infrastructure, and team for AI adoption.", description:
"Evaluating your data, infrastructure, and team for AI adoption.",
icon: CheckCircle, icon: CheckCircle,
features: ["Data Maturity", "Infrastructure Audit", "Team Capability", "Organizational Readiness"] features: [
"Data Maturity",
"Infrastructure Audit",
"Team Capability",
"Organizational Readiness",
],
}, },
{ {
title: "AI Roadmap Development", title: "AI Roadmap Development",
description: "Creating a phased plan for AI implementation.", description: "Creating a phased plan for AI implementation.",
icon: Route, icon: Route,
features: ["Strategic Planning", "Phase Prioritization", "Resource Planning", "Timeline Development"] features: [
"Strategic Planning",
"Phase Prioritization",
"Resource Planning",
"Timeline Development",
],
}, },
{ {
title: "AI Ethics & Governance", title: "AI Ethics & Governance",
description: "Advising on responsible and unbiased AI practices.", description: "Advising on responsible and unbiased AI practices.",
icon: Shield, icon: Shield,
features: ["Ethical Framework", "Bias Mitigation", "Compliance Strategy", "Risk Management"] features: [
"Ethical Framework",
"Bias Mitigation",
"Compliance Strategy",
"Risk Management",
],
}, },
{ {
title: "Vendor & Technology Selection", title: "Vendor & Technology Selection",
description: "Guiding choices for AI platforms and tools.", description: "Guiding choices for AI platforms and tools.",
icon: Settings, icon: Settings,
features: ["Platform Evaluation", "Vendor Analysis", "Technology Fit", "Cost-Benefit Analysis"] features: [
"Platform Evaluation",
"Vendor Analysis",
"Technology Fit",
"Cost-Benefit Analysis",
],
}, },
{ {
title: "Change Management for AI Adoption", title: "Change Management for AI Adoption",
description: "Preparing your organization for AI integration.", description: "Preparing your organization for AI integration.",
icon: Users, icon: Users,
features: ["Change Strategy", "Training Programs", "Culture Transformation", "Adoption Support"] features: [
"Change Strategy",
"Training Programs",
"Culture Transformation",
"Adoption Support",
],
}, },
{ {
title: "GenAI Strategy & Use Case Identification", title: "GenAI Strategy & Use Case Identification",
description: "Consulting on the strategic application of Generative AI.", description: "Consulting on the strategic application of Generative AI.",
icon: Brain, icon: Brain,
features: ["GenAI Opportunities", "Use Case Development", "Implementation Strategy", "ROI Assessment"] features: [
} "GenAI Opportunities",
"Use Case Development",
"Implementation Strategy",
"ROI Assessment",
],
},
]; ];
return ( return (
@@ -681,6 +794,10 @@ const AIStrategyOfferings = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6"> <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
Our Specialized AI Consulting Capabilities Our Specialized AI Consulting Capabilities
</h2> </h2>
<p className="mt-4 text-gray-400 max-w-2xl mx-auto">
Expert AI consulting to align your business goals with AIpowered
mobile and web solutions that drive measurable impact.
</p>
</motion.div> </motion.div>
<motion.div <motion.div
@@ -714,10 +831,16 @@ const AIStrategyOfferings = () => {
{offering.description} {offering.description}
</p> </p>
<div className="space-y-2"> <div className="space-y-2">
<h4 className="text-sm font-medium text-foreground">Key Areas:</h4> <h4 className="text-sm font-medium text-foreground">
Key Areas:
</h4>
<div className="flex flex-wrap gap-2"> <div className="flex flex-wrap gap-2">
{offering.features.map((feature) => ( {offering.features.map((feature) => (
<Badge key={feature} variant="secondary" className="text-xs bg-muted/50 text-muted-foreground border-muted"> <Badge
key={feature}
variant="secondary"
className="text-xs bg-muted/50 text-muted-foreground border-muted"
>
{feature} {feature}
</Badge> </Badge>
))} ))}
@@ -762,10 +885,16 @@ const AIStrategyOfferings = () => {
{offering.description} {offering.description}
</p> </p>
<div className="space-y-2"> <div className="space-y-2">
<h4 className="text-sm font-medium text-foreground">Key Areas:</h4> <h4 className="text-sm font-medium text-foreground">
Key Areas:
</h4>
<div className="flex flex-wrap gap-2"> <div className="flex flex-wrap gap-2">
{offering.features.map((feature) => ( {offering.features.map((feature) => (
<Badge key={feature} variant="secondary" className="text-xs bg-muted/50 text-muted-foreground border-muted"> <Badge
key={feature}
variant="secondary"
className="text-xs bg-muted/50 text-muted-foreground border-muted"
>
{feature} {feature}
</Badge> </Badge>
))} ))}
@@ -785,11 +914,31 @@ const AIStrategyOfferings = () => {
// Target Audience // Target Audience
export const AIStrategyTargetAudience = () => { export const AIStrategyTargetAudience = () => {
const audiences = [ const audiences = [
{ title: "CTOs", icon: Code, description: "Technical leaders driving AI transformation initiatives" }, {
{ title: "Product Leaders", icon: Rocket, description: "Product managers integrating AI into product strategy" }, title: "CTOs",
{ title: "Business Owners", icon: Briefcase, description: "Executives seeking competitive advantage through AI" }, icon: Code,
{ title: "Innovation Teams", icon: Lightbulb, description: "Teams exploring AI opportunities and applications" }, description: "Technical leaders driving AI transformation initiatives",
{ title: "Enterprise Leaders", icon: Building, description: "Decision makers considering AI adoption" } },
{
title: "Product Leaders",
icon: Rocket,
description: "Product managers integrating AI into product strategy",
},
{
title: "Business Owners",
icon: Briefcase,
description: "Executives seeking competitive advantage through AI",
},
{
title: "Innovation Teams",
icon: Lightbulb,
description: "Teams exploring AI opportunities and applications",
},
{
title: "Enterprise Leaders",
icon: Building,
description: "Decision makers considering AI adoption",
},
]; ];
return ( return (
@@ -805,6 +954,10 @@ export const AIStrategyTargetAudience = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6"> <h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
Ideal For... Ideal For...
</h2> </h2>
<p className="mt-4 text-gray-400 max-w-2xl mx-auto">
Businesses ready to adopt AIpowered mobile and web solutions for
smarter automation, datadriven decisions, and scalable growth.
</p>
</motion.div> </motion.div>
<motion.div <motion.div
@@ -854,21 +1007,25 @@ const AIStrategyCaseStudies = () => {
{ {
title: "Manufacturing AI Transformation", title: "Manufacturing AI Transformation",
client: "Industrial Manufacturing Corp", client: "Industrial Manufacturing Corp",
description: "Developed comprehensive AI strategy that identified 8 key use cases, resulting in 30% operational efficiency improvement and $2.5M annual savings through predictive maintenance and quality optimization.", description:
image: "https://images.unsplash.com/photo-1697577418970-95d99b5a55cf?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8QUl8ZW58MHx8MHx8fDA%3D", // AI/ML circuit board "Developed comprehensive AI strategy that identified 8 key use cases, resulting in 30% operational efficiency improvement and $2.5M annual savings through predictive maintenance and quality optimization.",
image:
"https://images.unsplash.com/photo-1697577418970-95d99b5a55cf?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8QUl8ZW58MHx8MHx8fDA%3D", // AI/ML circuit board
results: "$2.5M annual savings, 30% efficiency gain", results: "$2.5M annual savings, 30% efficiency gain",
engagement: "6-month strategy engagement", engagement: "6-month strategy engagement",
gradient: "from-blue-500/20 to-cyan-500/20" gradient: "from-blue-500/20 to-cyan-500/20",
}, },
{ {
title: "Financial Services AI Roadmap", title: "Financial Services AI Roadmap",
client: "Regional Banking Institution", client: "Regional Banking Institution",
description: "Created strategic AI roadmap focusing on customer experience and risk management, leading to 40% reduction in loan processing time and improved fraud detection capabilities.", description:
image: "https://images.unsplash.com/photo-1677442136019-21780ecad995?w=400&h=300&fit=crop&auto=format", // AI visualization "Created strategic AI roadmap focusing on customer experience and risk management, leading to 40% reduction in loan processing time and improved fraud detection capabilities.",
image:
"https://images.unsplash.com/photo-1677442136019-21780ecad995?w=400&h=300&fit=crop&auto=format", // AI visualization
results: "40% faster processing, enhanced fraud detection", results: "40% faster processing, enhanced fraud detection",
engagement: "4-month strategic assessment", engagement: "4-month strategic assessment",
gradient: "from-green-500/20 to-emerald-500/20" gradient: "from-green-500/20 to-emerald-500/20",
} },
]; ];
return ( return (
@@ -884,6 +1041,10 @@ const AIStrategyCaseStudies = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-8"> <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-8">
Guiding Businesses to AI Success Guiding Businesses to AI Success
</h2> </h2>
<p className="mt-4 text-gray-400 max-w-2xl mx-auto">
Helping companies turn AI potential into realworld AIpowered
mobile and web solutions that drive growth and efficiency.
</p>
</motion.div> </motion.div>
<motion.div <motion.div
@@ -914,7 +1075,10 @@ const AIStrategyCaseStudies = () => {
<div className="text-xs text-muted-foreground mb-2 uppercase tracking-wider"> <div className="text-xs text-muted-foreground mb-2 uppercase tracking-wider">
{study.client} {study.client}
</div> </div>
<Badge variant="secondary" className="text-xs bg-accent/20 text-accent border-accent/30"> <Badge
variant="secondary"
className="text-xs bg-accent/20 text-accent border-accent/30"
>
{study.results} {study.results}
</Badge> </Badge>
</div> </div>
@@ -926,7 +1090,9 @@ const AIStrategyCaseStudies = () => {
</div> </div>
<div className="px-8 pb-6 flex-1"> <div className="px-8 pb-6 flex-1">
<div className={`relative rounded-xl overflow-hidden bg-gradient-to-br ${study.gradient} p-4 border border-white/10`}> <div
className={`relative rounded-xl overflow-hidden bg-gradient-to-br ${study.gradient} p-4 border border-white/10`}
>
<ImageWithFallback <ImageWithFallback
src={study.image} src={study.image}
alt={study.title} alt={study.title}
@@ -953,7 +1119,9 @@ const AIStrategyCaseStudies = () => {
size="sm" size="sm"
className="w-full justify-between text-accent hover:text-accent hover:bg-accent/10 group-hover:translate-x-1 transition-all duration-300 h-auto py-3" className="w-full justify-between text-accent hover:text-accent hover:bg-accent/10 group-hover:translate-x-1 transition-all duration-300 h-auto py-3"
> >
<span className="text-sm font-medium">VIEW FULL CASE STUDY</span> <span className="text-sm font-medium">
VIEW FULL CASE STUDY
</span>
<ArrowRight className="w-4 h-4" /> <ArrowRight className="w-4 h-4" />
</Button> </Button>
</div> </div>
@@ -990,7 +1158,9 @@ const AIStrategyInlineCTA = () => {
<div className="inline-block p-[2px] rounded-full bg-gradient-to-r from-accent via-blue-500 to-purple-500"> <div className="inline-block p-[2px] rounded-full bg-gradient-to-r from-accent via-blue-500 to-purple-500">
<div className="bg-black rounded-full px-6 py-3 flex items-center gap-2"> <div className="bg-black rounded-full px-6 py-3 flex items-center gap-2">
<Brain className="w-5 h-5 text-white" /> <Brain className="w-5 h-5 text-white" />
<span className="text-white text-base font-medium">AI Strategy</span> <span className="text-white text-base font-medium">
AI Strategy
</span>
</div> </div>
</div> </div>
@@ -1000,11 +1170,13 @@ const AIStrategyInlineCTA = () => {
</h2> </h2>
<p className="text-xl text-gray-300 leading-relaxed max-w-2xl mx-auto"> <p className="text-xl text-gray-300 leading-relaxed max-w-2xl mx-auto">
Our AI consultants provide clarity and a strategic direction for your business. Our AI consultants help you clarify your goals and define a
focused AIpowered roadmap for your business.
</p> </p>
<ShimmerButton className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl" <ShimmerButton
onClick={() => navigate("/start-a-project")} className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl"
onClick={() => navigate("/start-a-project")}
> >
<div className="inline-flex items-center gap-3"> <div className="inline-flex items-center gap-3">
<MessageSquare className="w-6 h-6 flex-shrink-0" /> <MessageSquare className="w-6 h-6 flex-shrink-0" />
@@ -1023,40 +1195,71 @@ const HireAIConsultants = () => {
const consultantTypes = [ const consultantTypes = [
{ {
title: "AI Strategy Consultants", title: "AI Strategy Consultants",
description: "Senior strategists who design comprehensive AI transformation plans", description:
"Senior strategists who design comprehensive AI transformation plans",
icon: Brain, icon: Brain,
skills: ["AI Strategy", "Business Analysis", "Roadmap Development", "ROI Planning"] skills: [
"AI Strategy",
"Business Analysis",
"Roadmap Development",
"ROI Planning",
],
}, },
{ {
title: "AI Solution Architects", title: "AI Solution Architects",
description: "Technical architects who design scalable AI infrastructure", description: "Technical architects who design scalable AI infrastructure",
icon: Cpu, icon: Cpu,
skills: ["Solution Architecture", "Platform Design", "Technology Selection", "Integration Planning"] skills: [
"Solution Architecture",
"Platform Design",
"Technology Selection",
"Integration Planning",
],
}, },
{ {
title: "Data Strategy Leaders", title: "Data Strategy Leaders",
description: "Experts in data governance and AI-ready data architecture", description: "Experts in data governance and AI-ready data architecture",
icon: Database, icon: Database,
skills: ["Data Strategy", "Governance Framework", "Data Architecture", "Quality Management"] skills: [
"Data Strategy",
"Governance Framework",
"Data Architecture",
"Quality Management",
],
}, },
{ {
title: "AI Ethics Consultants", title: "AI Ethics Consultants",
description: "Specialists in responsible AI and ethical implementation", description: "Specialists in responsible AI and ethical implementation",
icon: Shield, icon: Shield,
skills: ["AI Ethics", "Bias Mitigation", "Compliance Strategy", "Risk Assessment"] skills: [
"AI Ethics",
"Bias Mitigation",
"Compliance Strategy",
"Risk Assessment",
],
}, },
{ {
title: "AI Product Strategists", title: "AI Product Strategists",
description: "Product leaders who integrate AI into product development", description: "Product leaders who integrate AI into product development",
icon: Rocket, icon: Rocket,
skills: ["Product Strategy", "AI Integration", "User Experience", "Market Analysis"] skills: [
"Product Strategy",
"AI Integration",
"User Experience",
"Market Analysis",
],
}, },
{ {
title: "Change Management Consultants", title: "Change Management Consultants",
description: "Experts in organizational transformation for AI adoption", description: "Experts in organizational transformation for AI adoption",
icon: Users, icon: Users,
skills: ["Change Management", "Training Strategy", "Culture Transformation", "Adoption Planning"] skills: [
} "Change Management",
"Training Strategy",
"Culture Transformation",
"Adoption Planning",
],
},
]; ];
return ( return (
@@ -1073,7 +1276,9 @@ const HireAIConsultants = () => {
Access Expert AI Strategy & Leadership Talent Access Expert AI Strategy & Leadership Talent
</h2> </h2>
<p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed"> <p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
Hire experienced AI strategists, solution architects, and data leaders to drive your AI initiatives. Hire experienced AI strategists, solution architects, and data
leaders to drive your AI initiatives and AIpowered mobile and web
development roadmap.
</p> </p>
</motion.div> </motion.div>
@@ -1108,10 +1313,16 @@ const HireAIConsultants = () => {
{type.description} {type.description}
</p> </p>
<div className="space-y-2"> <div className="space-y-2">
<h4 className="text-sm font-medium text-foreground">Core Skills:</h4> <h4 className="text-sm font-medium text-foreground">
Core Skills:
</h4>
<div className="flex flex-wrap gap-2"> <div className="flex flex-wrap gap-2">
{type.skills.map((skill) => ( {type.skills.map((skill) => (
<Badge key={skill} variant="secondary" className="text-xs bg-muted/50 text-muted-foreground border-muted"> <Badge
key={skill}
variant="secondary"
className="text-xs bg-muted/50 text-muted-foreground border-muted"
>
{skill} {skill}
</Badge> </Badge>
))} ))}
@@ -1159,21 +1370,25 @@ const HireAIConsultants = () => {
const AIStrategyFAQs = () => { const AIStrategyFAQs = () => {
const faqs = [ const faqs = [
{ {
question: "What is an \"AI Roadmap\"?", question: 'What is an "AI Roadmap"?',
answer: "An AI roadmap is a strategic plan that outlines how your organization will adopt and implement AI technologies over time. It includes identified use cases, prioritized initiatives, resource requirements, timeline milestones, and expected outcomes. The roadmap typically spans 12-36 months and provides a clear path from current state to AI-enabled future state, including technical infrastructure, data preparation, team development, and change management considerations." answer:
"An AI roadmap is a strategic plan that outlines how your organization will adopt and implement AI technologies over time. It includes identified use cases, prioritized initiatives, resource requirements, timeline milestones, and expected outcomes for AIpowered mobile and web solutions. The roadmap typically spans 1236 months and provides a clear path from current state to AIenabled future state, including technical infrastructure, data preparation, team development, and change management considerations.",
}, },
{ {
question: "How long does an AI strategy engagement typically last?", question: "How long does an AI strategy engagement typically last?",
answer: "AI strategy engagements typically range from 8-16 weeks, depending on organization size and complexity. A typical engagement includes 2-3 weeks for discovery and assessment, 3-4 weeks for opportunity identification and feasibility analysis, 2-3 weeks for roadmap development and ROI modeling, and 1-2 weeks for implementation planning and stakeholder alignment. Larger enterprises or complex multi-business unit organizations may require longer engagements." answer:
"AI strategy engagements typically range from 816 weeks, depending on organization size and complexity. A typical engagement includes 23 weeks for discovery and assessment, 34 weeks for opportunity identification and feasibility analysis, 23 weeks for roadmap development and ROI modeling, and 12 weeks for implementation planning and stakeholder alignment. Larger enterprises or complex multibusiness unit organizations may require longer engagements and AIpowered design input.",
}, },
{ {
question: "Do you help with AI ethics and responsible AI?", question: "Do you help with AI ethics and responsible AI?",
answer: "Yes, AI ethics and responsible AI practices are integral parts of our strategy consulting. We help establish ethical AI frameworks, identify and mitigate bias risks, ensure compliance with regulations like GDPR and emerging AI laws, develop transparent AI governance policies, and create accountability mechanisms. This includes bias testing methodologies, explainable AI requirements, data privacy protection, and ongoing monitoring systems to ensure ethical AI deployment." answer:
"Yes, AI ethics and responsible AI practices are integral parts of our strategy consulting. We help establish ethical AI frameworks, identify and mitigate bias risks, ensure compliance with regulations like GDPR and emerging AI laws, develop transparent AI governance policies, and create accountability mechanisms. This includes bias testing methodologies, explainable AI requirements, data privacy protection, and ongoing monitoring systems to ensure ethical AI deployment and AIpowered features done right.",
}, },
{ {
question: "What data do I need to prepare for an AI assessment?", question: "What data do I need to prepare for an AI assessment?",
answer: "For an AI assessment, we typically need access to business process documentation, existing data inventories and quality reports, current technology architecture diagrams, team skill assessments, and business performance metrics. We'll also review data governance policies, compliance requirements, and any existing analytics or automation initiatives. Most information gathering happens through interviews and workshops, so detailed preparation isn't required upfront - we guide you through the discovery process." answer:
} "For an AI assessment, we typically need access to business process documentation, existing data inventories and quality reports, current technology architecture diagrams, team skill assessments, and business performance metrics. Well also review data governance policies, compliance requirements, and any existing analytics or automation initiatives. Most information gathering happens through interviews and workshops, so detailed preparation isnt required upfront we guide you through the discovery process for AI mobile app development and related use cases.",
},
]; ];
return ( return (
@@ -1206,7 +1421,9 @@ const AIStrategyFAQs = () => {
className="bg-gray-900/50 backdrop-blur-md rounded-2xl border border-gray-800 px-10 shadow-lg" className="bg-gray-900/50 backdrop-blur-md rounded-2xl border border-gray-800 px-10 shadow-lg"
> >
<AccordionTrigger className="text-left hover:no-underline py-10 text-xl"> <AccordionTrigger className="text-left hover:no-underline py-10 text-xl">
<span className="font-semibold text-white">{faq.question}</span> <span className="font-semibold text-white">
{faq.question}
</span>
</AccordionTrigger> </AccordionTrigger>
<AccordionContent className="text-gray-300 pb-10 text-lg leading-relaxed"> <AccordionContent className="text-gray-300 pb-10 text-lg leading-relaxed">
{faq.answer} {faq.answer}
@@ -1243,7 +1460,9 @@ const AIStrategyFinalCTA = () => {
<div className="inline-block p-[2px] rounded-full bg-gradient-to-r from-accent via-blue-500 to-purple-500"> <div className="inline-block p-[2px] rounded-full bg-gradient-to-r from-accent via-blue-500 to-purple-500">
<div className="bg-background rounded-full px-6 py-3 flex items-center gap-2"> <div className="bg-background rounded-full px-6 py-3 flex items-center gap-2">
<Brain className="w-5 h-5 text-foreground" /> <Brain className="w-5 h-5 text-foreground" />
<span className="text-foreground text-base font-medium">AI Strategy</span> <span className="text-foreground text-base font-medium">
AI Strategy
</span>
</div> </div>
</div> </div>
</motion.div> </motion.div>
@@ -1260,7 +1479,7 @@ const AIStrategyFinalCTA = () => {
viewport={{ once: true }} viewport={{ once: true }}
className="text-xl text-muted-foreground mb-12 max-w-2xl mx-auto leading-relaxed" className="text-xl text-muted-foreground mb-12 max-w-2xl mx-auto leading-relaxed"
> >
Partner with our expert AI consultants to transform complex ideas into actionable strategies and achieve measurable results. Work with our expert AI consultants to turn complex ideas into an actionable AIpowered roadmap and measurable business outcomes.
</motion.p> </motion.p>
<motion.div <motion.div
@@ -1270,8 +1489,9 @@ const AIStrategyFinalCTA = () => {
viewport={{ once: true }} viewport={{ once: true }}
className="space-y-8" className="space-y-8"
> >
<ShimmerButton className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25" <ShimmerButton
onClick={() => navigate("/start-a-project")} className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25"
onClick={() => navigate("/start-a-project")}
> >
<div className="inline-flex items-center gap-3"> <div className="inline-flex items-center gap-3">
<Rocket className="w-6 h-6 flex-shrink-0" /> <Rocket className="w-6 h-6 flex-shrink-0" />
@@ -1353,9 +1573,7 @@ export const AIStrategyConsulting = () => {
</section> </section>
{/* Footer */} {/* Footer */}
<section className="bg-background"> <section className="bg-background">{/* <Footer /> */}</section>
{/* <Footer /> */}
</section>
</div> </div>
); );
}; };

View File

@@ -126,8 +126,7 @@ const APIHeroWithCTA = () => {
</h1> </h1>
<p className="text-lg text-gray-300 leading-relaxed max-w-lg"> <p className="text-lg text-gray-300 leading-relaxed max-w-lg">
Building powerful, scalable, and secure backend infrastructure Building powerful, scalable, and secure backend infrastructure enhanced by AI mobile app technology to fuel your web, mobile, and IoT applications.
and APIs to fuel your web, mobile, and IoT applications.
</p> </p>
</div> </div>
@@ -485,6 +484,12 @@ const APIBenefits = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6"> <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
The Foundation of Your Digital Success The Foundation of Your Digital Success
</h2> </h2>
<p className="mt-4 text-gray-400 max-w-2xl mx-auto">
{/* End-to-end solutions for every stage of your product lifecycle. */}
WDI's robust AI mobile app backend powers seamless scalability and security, forming the unbreakable core for your web, mobile, and IoT applications.
</p>
</motion.div> </motion.div>
<motion.div <motion.div
@@ -620,6 +625,13 @@ const APIProcess = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6"> <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
Our Methodical Approach to Backend Excellence Our Methodical Approach to Backend Excellence
</h2> </h2>
<p className="mt-4 text-gray-400 max-w-2xl mx-auto">
{/* End-to-end solutions for every stage of your product lifecycle. */}
WDI employs a proven methodology, from architecture design and API development to AI app development company security protocols, ensuring scalable, high-performance backends for your digital ecosystem.
</p>
</motion.div> </motion.div>
<div className="relative"> <div className="relative">
@@ -774,6 +786,14 @@ const APIServices = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6"> <h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
Our Specialized Backend Development Services Our Specialized Backend Development Services
</h2> </h2>
<p className="mt-4 text-gray-400 max-w-2xl mx-auto">
{/* End-to-end solutions for every stage of your product lifecycle. */}
WDI delivers comprehensive AI-powered features including RESTful APIs, microservices architecture, cloud deployment, and database optimization for enterprise-grade performance.
</p>
</motion.div> </motion.div>
<motion.div <motion.div
@@ -1017,8 +1037,7 @@ const APITechStack = () => {
Building Secure and High-Performance Backends Building Secure and High-Performance Backends
</h2> </h2>
<p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed"> <p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
With industry-leading technologies that ensure scalability, With industry-leading technologies enhanced by AI iOS development that ensure scalability, security, and reliability for mission-critical applications.
security, and reliability.
</p> </p>
</motion.div> </motion.div>
@@ -1306,6 +1325,13 @@ const APICaseStudies = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-white mb-8"> <h2 className="text-4xl lg:text-5xl font-semibold text-white mb-8">
Robust Backends Powering Digital Innovation Robust Backends Powering Digital Innovation
</h2> </h2>
<p className="mt-4 text-gray-400 max-w-2xl mx-auto">
{/* End-to-end solutions for every stage of your product lifecycle. */}
WDI engineers scalable AI-powered features that deliver predictive scaling, automated monitoring, and intelligent optimization for unmatched digital performance.
</p>
</motion.div> </motion.div>
<motion.div <motion.div
@@ -1517,8 +1543,7 @@ const HireBackendDevelopers = () => {
Hire Specialized Backend & API Developers Hire Specialized Backend & API Developers
</h2> </h2>
<p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed"> <p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
Access our pool of expert backend engineers proficient in various Access WDI's pool of expert iOS mobile app development engineers proficient in Node.js, Python, MongoDB, AWS, and seamless cloud integrations.
languages, databases, and cloud platforms.
</p> </p>
</motion.div> </motion.div>
@@ -1721,8 +1746,7 @@ const APIFinalCTA = () => {
viewport={{ once: true }} viewport={{ once: true }}
className="text-xl text-muted-foreground mb-12 max-w-2xl mx-auto leading-relaxed" className="text-xl text-muted-foreground mb-12 max-w-2xl mx-auto leading-relaxed"
> >
Ensure your applications are fast, secure, and scalable with our Ensure your applications are fast, secure, and scalable with our expert AI-powered design API and backend development services.
expert API and backend development services.
</motion.p> </motion.p>
<motion.div <motion.div

View File

@@ -129,9 +129,7 @@ const AdminHeroWithCTA = () => {
</h1> </h1>
<p className="text-lg text-gray-300 leading-relaxed max-w-lg"> <p className="text-lg text-gray-300 leading-relaxed max-w-lg">
Empower your team with custom, data-rich admin interfaces and Empower your team with custom, data-rich admin interfaces enhanced by AI mobile app features for streamlined operations, reporting, and management.
dashboards for streamlined operations, reporting, and
management.
</p> </p>
</div> </div>
@@ -475,6 +473,13 @@ const AdminBenefits = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6"> <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
Why Choose a Bespoke Admin Panel from WDI? Why Choose a Bespoke Admin Panel from WDI?
</h2> </h2>
<p className="mt-4 text-gray-400 max-w-2xl mx-auto">
{/* End-to-end solutions for every stage of your product lifecycle. */}
WDI delivers fully customized AI mobile app admin panels offering superior scalability, real-time insights, and role-based security for seamless eCommerce management.
</p>
</motion.div> </motion.div>
<motion.div <motion.div
@@ -604,6 +609,12 @@ const AdminProcess = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6"> <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
Our Approach to Building Your Operational Command Center Our Approach to Building Your Operational Command Center
</h2> </h2>
<p className="mt-4 text-gray-400 max-w-2xl mx-auto">
{/* End-to-end solutions for every stage of your product lifecycle. */}
WDI follows a discovery-design-develop-deploy methodology enhanced by AI mobile app insights to create intuitive, scalable admin panels that optimize your eCommerce operations.
</p>
</motion.div> </motion.div>
<div className="relative"> <div className="relative">
@@ -745,6 +756,13 @@ const AdminServices = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6"> <h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
Our Specialized Admin & Dashboard Solutions Our Specialized Admin & Dashboard Solutions
</h2> </h2>
<p className="mt-4 text-gray-400 max-w-2xl mx-auto">
{/* End-to-end solutions for every stage of your product lifecycle. */}
WDI delivers tailored AI mobile app-powered admin panels with real-time analytics, role-based access, and seamless integrations for optimized eCommerce control.
</p>
</motion.div> </motion.div>
<motion.div <motion.div
@@ -1128,6 +1146,13 @@ const AdminCaseStudies = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-white mb-8"> <h2 className="text-4xl lg:text-5xl font-semibold text-white mb-8">
Streamlined Operations with WDI-Built Admin Panels Streamlined Operations with WDI-Built Admin Panels
</h2> </h2>
<p className="mt-4 text-gray-400 max-w-2xl mx-auto">
{/* End-to-end solutions for every stage of your product lifecycle. */}
WDI's custom admin panels with AI mobile app integration deliver real-time insights, automated workflows, and intuitive controls for peak eCommerce efficiency.
</p>
</motion.div> </motion.div>
<motion.div <motion.div
@@ -1316,7 +1341,7 @@ const HireDevelopers = () => {
Need Expert Developers for Your Admin Panel? Need Expert Developers for Your Admin Panel?
</h2> </h2>
<p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed"> <p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
Our developers specialize in creating powerful and scalable admin interfaces with robust backend systems and seamless integrations. Our AI mobile app developers specialize in creating powerful, scalable admin interfaces with robust backend systems and seamless integrations.
</p> </p>
</motion.div> </motion.div>
@@ -1514,8 +1539,7 @@ const AdminFinalCTA = () => {
viewport={{ once: true }} viewport={{ once: true }}
className="text-xl text-muted-foreground mb-12 max-w-2xl mx-auto leading-relaxed" className="text-xl text-muted-foreground mb-12 max-w-2xl mx-auto leading-relaxed"
> >
Transform your internal operations with efficient, data-driven Transform your internal operations with efficient, data-driven dashboards enhanced by AI mobile app technology and advanced management systems.
dashboards and management systems.
</motion.p> </motion.p>
<motion.div <motion.div

View File

@@ -4,6 +4,7 @@ import { Footer } from "../components/Footer";
import { Button } from "../components/ui/button"; import { Button } from "../components/ui/button";
import { Badge } from "../components/ui/badge"; import { Badge } from "../components/ui/badge";
import { Card, CardContent } from "../components/ui/card"; import { Card, CardContent } from "../components/ui/card";
import ambleImg from "../assets/amble.png"
import { ArrowRight, Calendar, Users, Smartphone, Globe, Check, Star, TrendingUp, MapPin, Shield, Navigation as NavigationIcon, Zap, Heart, Target, AlertCircle, Clock, UserCheck } from "lucide-react"; import { ArrowRight, Calendar, Users, Smartphone, Globe, Check, Star, TrendingUp, MapPin, Shield, Navigation as NavigationIcon, Zap, Heart, Target, AlertCircle, Clock, UserCheck } from "lucide-react";
import { ImageWithFallback } from "../components/figma/ImageWithFallback"; import { ImageWithFallback } from "../components/figma/ImageWithFallback";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
@@ -108,7 +109,7 @@ export const AmbleProject = () => {
<div className="relative"> <div className="relative">
<div className="aspect-square bg-gradient-to-br from-[#E5195E]/20 to-transparent rounded-2xl p-8 border border-white/10"> <div className="aspect-square bg-gradient-to-br from-[#E5195E]/20 to-transparent rounded-2xl p-8 border border-white/10">
<ImageWithFallback <ImageWithFallback
src="/images/amble-app-mockup.jpg" src={ambleImg}
alt="Amble Navigation App" alt="Amble Navigation App"
className="w-full h-full object-cover rounded-lg" className="w-full h-full object-cover rounded-lg"
/> />

View File

@@ -3,6 +3,7 @@ import { Navigation } from "../components/Navigation";
import { Footer } from "../components/Footer"; import { Footer } from "../components/Footer";
import { Button } from "../components/ui/button"; import { Button } from "../components/ui/button";
import { Badge } from "../components/ui/badge"; import { Badge } from "../components/ui/badge";
import amozImg from "../assets/amoz.jpg"
import { Card, CardContent } from "../components/ui/card"; import { Card, CardContent } from "../components/ui/card";
import { ArrowRight, Calendar, Users, Smartphone, Globe, Check, Star, TrendingUp, ShoppingBag, Brain, Zap, MessageCircle, Target, AlertCircle, Clock, DollarSign, Play, Shield, CreditCard } from "lucide-react"; import { ArrowRight, Calendar, Users, Smartphone, Globe, Check, Star, TrendingUp, ShoppingBag, Brain, Zap, MessageCircle, Target, AlertCircle, Clock, DollarSign, Play, Shield, CreditCard } from "lucide-react";
import { ImageWithFallback } from "../components/figma/ImageWithFallback"; import { ImageWithFallback } from "../components/figma/ImageWithFallback";
@@ -56,10 +57,21 @@ export const AmozProject = () => {
<div className="text-lg font-bold text-white font-manrope">8 experts</div> <div className="text-lg font-bold text-white font-manrope">8 experts</div>
<div className="text-xs text-muted-foreground font-manrope">Team Size</div> <div className="text-xs text-muted-foreground font-manrope">Team Size</div>
</div> </div>
<div className="text-center p-3 bg-card/30 rounded-lg border border-white/10"> {/* <div className="text-center p-3 bg-card/30 rounded-lg border border-white/10">
<Globe className="w-5 h-5 text-[#E5195E] mx-auto mb-2" /> <Globe className="w-5 h-5 text-[#E5195E] mx-auto mb-2" />
<div className="text-lg font-bold text-white font-manrope">iOS/Android/Web</div> <div className="text-lg font-bold text-white font-manrope">iOS/Android/Web</div>
<div className="text-xs text-muted-foreground font-manrope">Platforms</div> <div className="text-xs text-muted-foreground font-manrope">Platforms</div>
</div> */}
<div className="text-center p-3 bg-card/30 rounded-lg border border-white/10">
<Globe className="w-5 h-5 text-[#E5195E] mx-auto mb-2" />
<div className="text-lg font-bold text-white font-manrope break-words">
iOS/Android/Web
</div>
<div className="text-xs text-muted-foreground font-manrope">
Platforms
</div>
</div> </div>
<div className="text-center p-3 bg-card/30 rounded-lg border border-white/10"> <div className="text-center p-3 bg-card/30 rounded-lg border border-white/10">
<DollarSign className="w-5 h-5 text-[#E5195E] mx-auto mb-2" /> <DollarSign className="w-5 h-5 text-[#E5195E] mx-auto mb-2" />
@@ -108,7 +120,7 @@ export const AmozProject = () => {
<div className="relative"> <div className="relative">
<div className="aspect-square bg-gradient-to-br from-[#E5195E]/20 to-transparent rounded-2xl p-8 border border-white/10"> <div className="aspect-square bg-gradient-to-br from-[#E5195E]/20 to-transparent rounded-2xl p-8 border border-white/10">
<ImageWithFallback <ImageWithFallback
src="/images/amoz-platform-mockup.jpg" src={amozImg}
alt="Amoz AI-Powered Social Commerce Platform" alt="Amoz AI-Powered Social Commerce Platform"
className="w-full h-full object-cover rounded-lg" className="w-full h-full object-cover rounded-lg"
/> />

View File

@@ -402,8 +402,7 @@ const AndroidKeyBenefits = () => {
Why Develop a Native Android App? Why Develop a Native Android App?
</h2> </h2>
<p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed"> <p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
Android development offers unparalleled reach and flexibility for AI mobile app development offers unparalleled reach and flexibility for businesses looking to tap into the world's largest mobile ecosystem.
businesses looking to tap into the world's largest mobile ecosystem.
</p> </p>
</motion.div> </motion.div>
@@ -831,8 +830,7 @@ const AndroidCaseStudies = () => {
Android Apps That Define Industries Android Apps That Define Industries
</h2> </h2>
<p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed"> <p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
Discover how we've helped businesses succeed with powerful Android Discover how our AI mobile application developers have helped businesses succeed with powerful Android applications that leverage AI-powered features.
applications that leverage the platform's capabilities.
</p> </p>
</motion.div> </motion.div>

View File

@@ -32,38 +32,53 @@ const HeroWithCTA = () => {
return ( return (
<section className="relative py-20 overflow-hidden bg-black"> <section className="relative py-20 overflow-hidden bg-black">
<Helmet> <Helmet>
{/* Page Title and Meta Description */} {/* Page Title and Meta Description */}
<title>Artificial Intelligence | Custom AI Solutions by WDI</title> <title>Artificial Intelligence | Custom AI Solutions by WDI</title>
<meta <meta
name="description" name="description"
content="Discover how WDI builds tailored AI solutions that drive automation, insights, and competitive edge for businesses through smart digital systems." content="Discover how WDI builds tailored AI solutions that drive automation, insights, and competitive edge for businesses through smart digital systems."
/> />
{/* Canonical Link */} {/* Canonical Link */}
<link rel="canonical" href="https://www.wdipl.com/artificial-intelligence" /> <link
rel="canonical"
href="https://www.wdipl.com/artificial-intelligence"
/>
{/* Open Graph Tags (for Facebook, LinkedIn) */} {/* Open Graph Tags (for Facebook, LinkedIn) */}
<meta property="og:title" content="Artificial Intelligence | Custom AI Solutions by WDI" /> <meta
<meta property="og:title"
property="og:description" content="Artificial Intelligence | Custom AI Solutions by WDI"
content="Discover how WDI builds tailored AI solutions that drive automation, insights, and competitive edge for businesses through smart digital systems." />
/> <meta
<meta property="og:url" content="https://www.wdipl.com/services" /> property="og:description"
<meta property="og:type" content="website" /> content="Discover how WDI builds tailored AI solutions that drive automation, insights, and competitive edge for businesses through smart digital systems."
<meta property="og:image" content="https://www.wdipl.com/your-preview-image.jpg" /> />
<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 */} {/* Twitter Card Tags */}
<meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Artificial Intelligence | Custom AI Solutions by WDI" /> <meta
<meta name="twitter:title"
name="twitter:description" content="Artificial Intelligence | Custom AI Solutions by WDI"
content="Discover how WDI builds tailored AI solutions that drive automation, insights, and competitive edge for businesses through smart digital systems." />
/> <meta
<meta name="twitter:image" content="https://www.wdipl.com/your-preview-image.jpg" /> name="twitter:description"
content="Discover how WDI builds tailored AI solutions that drive automation, insights, and competitive edge for businesses through smart digital systems."
/>
<meta
name="twitter:image"
content="https://www.wdipl.com/your-preview-image.jpg"
/>
{/* Social Profiles (using JSON-LD Schema) */} {/* Social Profiles (using JSON-LD Schema) */}
<script type="application/ld+json"> <script type="application/ld+json">
{` {`
{ {
"@context": "https://schema.org", "@context": "https://schema.org",
"@type": "Organization", "@type": "Organization",
@@ -76,8 +91,8 @@ const HeroWithCTA = () => {
] ]
} }
`} `}
</script> </script>
</Helmet> </Helmet>
<div className="container mx-auto px-6 lg:px-8"> <div className="container mx-auto px-6 lg:px-8">
<div className="grid lg:grid-cols-2 gap-16 items-center min-h-[90vh]"> <div className="grid lg:grid-cols-2 gap-16 items-center min-h-[90vh]">
<motion.div <motion.div
@@ -106,9 +121,9 @@ const HeroWithCTA = () => {
</h1> </h1>
<p className="text-lg text-gray-300 leading-relaxed max-w-lg"> <p className="text-lg text-gray-300 leading-relaxed max-w-lg">
Transform your business with cutting-edge artificial Transform your business with cuttingedge AI mobile app
intelligence solutions that drive automation, insights, and development and artificial intelligence solutions that drive
competitive advantage. automation, insights, and competitive advantage.
</p> </p>
</div> </div>
@@ -232,8 +247,9 @@ const HorizontalTagScroller = () => {
<span className="text-white"> We Master</span> <span className="text-white"> We Master</span>
</h2> </h2>
<p className="text-xl text-gray-300 max-w-4xl leading-relaxed"> <p className="text-xl text-gray-300 max-w-4xl leading-relaxed">
Cutting-edge artificial intelligence technologies that power Cuttingedge artificial intelligence technologies that power
next-generation business solutions. nextgeneration business solutions and AIpowered features for
modern mobile and web applications.
</p> </p>
</motion.div> </motion.div>
@@ -360,7 +376,8 @@ const SideBySideContentWithIcons = () => {
</h2> </h2>
<p className="text-xl text-gray-300 leading-relaxed"> <p className="text-xl text-gray-300 leading-relaxed">
Leading AI innovation with proven results and expertise. Leading AI innovation with proven results and expertise in
AIpowered mobile and web development for modern businesses.
</p> </p>
</motion.div> </motion.div>
@@ -465,8 +482,9 @@ const TabbedServiceDisplay = () => {
AI Services & Solutions AI Services & Solutions
</h2> </h2>
<p className="text-lg text-gray-300 max-w-4xl leading-relaxed"> <p className="text-lg text-gray-300 max-w-4xl leading-relaxed">
Comprehensive artificial intelligence services designed to transform Comprehensive artificial intelligence services, including AI mobile
your business operations and drive innovation. app development and AIpowered features, designed to transform your
business operations and drive innovation.
</p> </p>
</motion.div> </motion.div>
@@ -556,7 +574,8 @@ const InlineCTA = () => {
{/* Subtitle */} {/* Subtitle */}
<p className="text-xl text-gray-300 leading-relaxed max-w-2xl"> <p className="text-xl text-gray-300 leading-relaxed max-w-2xl">
Unlock the power of artificial intelligence to automate processes, Unlock the power of artificial intelligence to automate processes,
gain insights, and drive competitive advantage. gain insights, and drive competitive advantage with AIpowered
mobile and web solutions.
</p> </p>
{/* CTA Button */} {/* CTA Button */}
@@ -637,8 +656,7 @@ const HireDevelopersSection = () => {
<span className="text-[#E5195E]">AI Specialists</span> <span className="text-[#E5195E]">AI Specialists</span>
</h2> </h2>
<p className="text-xl text-gray-300 max-w-4xl leading-relaxed"> <p className="text-xl text-gray-300 max-w-4xl leading-relaxed">
Get access to expert AI professionals who build intelligent Get access to expert AI professionals and AI mobile application developers who build intelligent solutions that drive business transformation.
solutions that drive business transformation.
</p> </p>
</motion.div> </motion.div>
@@ -728,27 +746,27 @@ const aiServicesFAQs = [
{ {
question: "What types of AI solutions can WDI develop?", question: "What types of AI solutions can WDI develop?",
answer: answer:
"We develop a wide range of AI solutions including machine learning models, natural language processing systems, computer vision applications, predictive analytics, chatbots, and recommendation engines tailored to your business needs.", "We develop a wide range of AI solutions, including machine learning models, natural language processing systems, computer vision applications, predictive analytics, chatbots, and recommendation engines tailored to your business needs and AI mobile app development requirements.",
}, },
{ {
question: "How do you ensure AI models are accurate and reliable?", question: "How do you ensure AI models are accurate and reliable?",
answer: answer:
"We follow rigorous testing methodologies, use cross-validation techniques, implement continuous monitoring, and employ best practices in data quality management to ensure our AI models deliver accurate and reliable results.", "We follow rigorous testing methodologies, use crossvalidation techniques, implement continuous monitoring, and employ best practices in data quality management to ensure our AI models deliver accurate and reliable results for your AIpowered applications.",
}, },
{ {
question: "Can you integrate AI into our existing software systems?", question: "Can you integrate AI into our existing software systems?",
answer: answer:
"Yes, we specialize in seamlessly integrating AI capabilities into existing systems through APIs, microservices architecture, and custom integration solutions that work with your current technology stack.", "Yes, we specialize in seamlessly integrating AI capabilities into existing systems through APIs, microservices architecture, and custom integration solutions that work with your current technology stack and support AIpowered design.",
}, },
{ {
question: "What is your approach to data privacy and AI ethics?", question: "What is your approach to data privacy and AI ethics?",
answer: answer:
"We prioritize data privacy and ethical AI practices by implementing secure data handling, ensuring model transparency, addressing bias issues, and following industry standards and regulations like GDPR and AI governance frameworks.", "We prioritize data privacy and ethical AI practices by implementing secure data handling, ensuring model transparency, addressing bias issues, and following industry standards and regulations like GDPR and AI governance frameworks for responsible AI solutions.",
}, },
{ {
question: "How long does it take to develop and deploy an AI solution?", question: "How long does it take to develop and deploy an AI solution?",
answer: answer:
"Development timelines vary based on complexity, but typically range from 3-6 months for custom AI solutions. We provide detailed project timelines during the planning phase and follow agile methodologies for faster delivery.", "Development timelines vary based on complexity, but typically range from 36 months for custom AI solutions. We provide detailed project timelines during the planning phase and follow agile methodologies for faster delivery of AIpowered features.",
}, },
]; ];
@@ -765,7 +783,7 @@ export function ArtificialIntelligenceServices() {
<HireDevelopersSection /> <HireDevelopersSection />
<FAQSection <FAQSection
title="AI Services Questions" title="AI Services Questions"
subtitle="Get answers to common questions about our artificial intelligence services." subtitle="Get answers to common questions about our artificial intelligence services and AIpowered features."
faqs={aiServicesFAQs} faqs={aiServicesFAQs}
/> />
{/* <Footer /> */} {/* <Footer /> */}

View File

@@ -9,6 +9,7 @@ import { Separator } from "../components/ui/separator";
import { Calendar, Clock, User, ArrowRight, Share2, Linkedin, Twitter, ExternalLink, Tag } from "lucide-react"; import { Calendar, Clock, User, ArrowRight, Share2, Linkedin, Twitter, ExternalLink, Tag } from "lucide-react";
import { ImageWithFallback } from "../components/figma/ImageWithFallback"; import { ImageWithFallback } from "../components/figma/ImageWithFallback";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import hospitalAi from "../assets/aihospital.jpg"
const articleData = { const articleData = {
id: "automation-reshaping-business", id: "automation-reshaping-business",
@@ -276,7 +277,8 @@ const articleData = {
title: "The Future of AI in Healthcare: Transforming Patient Care Through Technology", title: "The Future of AI in Healthcare: Transforming Patient Care Through Technology",
excerpt: "Discover how artificial intelligence is revolutionizing healthcare delivery and patient outcomes.", excerpt: "Discover how artificial intelligence is revolutionizing healthcare delivery and patient outcomes.",
readTime: "12 min read", readTime: "12 min read",
image: "https://images.unsplash.com/photo-1576091160399-112ba8d25d1f?w=400&h=250&fit=crop&auto=format", // image: "https://images.unsplash.com/photo-1576091160399-112ba8d25d1f?w=400&h=250&fit=crop&auto=format",
image: hospitalAi,
category: "Healthcare AI" category: "Healthcare AI"
} }
] ]

View File

@@ -5,6 +5,7 @@ import { Button } from "../components/ui/button";
import { Badge } from "../components/ui/badge"; import { Badge } from "../components/ui/badge";
import { Card, CardContent } from "../components/ui/card"; import { Card, CardContent } from "../components/ui/card";
import { Input } from "../components/ui/input"; import { Input } from "../components/ui/input";
import hospitalAi from "../assets/aihospital.jpg"
import { import {
Select, Select,
SelectContent, SelectContent,
@@ -57,8 +58,9 @@ export const Blog = () => {
"The Future of AI in Healthcare: Transforming Patient Care Through Technology", "The Future of AI in Healthcare: Transforming Patient Care Through Technology",
excerpt: excerpt:
"Discover how artificial intelligence is revolutionizing healthcare delivery, from diagnostic accuracy to personalized treatment plans and administrative efficiency.", "Discover how artificial intelligence is revolutionizing healthcare delivery, from diagnostic accuracy to personalized treatment plans and administrative efficiency.",
image: // image:
"https://images.unsplash.com/photo-1576091160399-112ba8d25d1f?w=800&h=600&fit=crop&auto=format", // "https://images.unsplash.com/photo-1576091160399-112ba8d25d1f?w=800&h=600&fit=crop&auto=format",
image: hospitalAi,
author: "Dr. Sarah Chen", author: "Dr. Sarah Chen",
date: "January 8, 2025", date: "January 8, 2025",
category: "Healthcare AI", category: "Healthcare AI",

View File

@@ -106,7 +106,7 @@ const caseStudies = [
category: "Loyalty & Rewards", category: "Loyalty & Rewards",
industry: "Hospitality", industry: "Hospitality",
featured: false, featured: false,
link: "/comming-soon", link: "",
icon: Utensils icon: Utensils
}, },
{ {
@@ -136,7 +136,7 @@ const caseStudies = [
category: "Lifestyle", category: "Lifestyle",
industry: "Chemicals", industry: "Chemicals",
featured: false, featured: false,
link: "/comming-soon", link: "",
icon: FlaskConical icon: FlaskConical
}, },
{ {
@@ -156,7 +156,7 @@ const caseStudies = [
category: "Lifestyle", category: "Lifestyle",
industry: "Consumer", industry: "Consumer",
featured: false, featured: false,
link: "/comming-soon", link: "",
icon: Trophy icon: Trophy
}, },
{ {
@@ -186,7 +186,7 @@ const caseStudies = [
category: "AgriTech", category: "AgriTech",
industry: "Agriculture", industry: "Agriculture",
featured: false, featured: false,
link: "/comming-soon", link: "",
icon: Tractor icon: Tractor
}, },
{ {
@@ -196,13 +196,13 @@ const caseStudies = [
category: "AgriTech", category: "AgriTech",
industry: "Agriculture", industry: "Agriculture",
featured: false, featured: false,
link: "/comming-soon", link: "",
icon: Globe icon: Globe
}, },
]; ];
const industries = ["All Industries", "Consumer", "Retail", "Healthcare", "Technology", "Agriculture", "Finance", "Entertainment", "Real Estate","Heritage","Chemicals","Hospitality"]; const industries = ["All Industries", "Consumer", "Retail", "Healthcare", "Technology", "Agriculture", "Finance", "Entertainment", "Real Estate", "Heritage", "Chemicals", "Hospitality"];
const categories = ["All Categories", "Lifestyle", "E-commerce", "Health & Fitness", "Social", "AgriTech", "FinTech", "Events", "PropTech","Loyalty & Rewards"]; const categories = ["All Categories", "Lifestyle", "E-commerce", "Health & Fitness", "Social", "AgriTech", "FinTech", "Events", "PropTech", "Loyalty & Rewards"];
export const CaseStudies = () => { export const CaseStudies = () => {
const [searchTerm, setSearchTerm] = useState(""); const [searchTerm, setSearchTerm] = useState("");

View File

@@ -59,26 +59,41 @@ const PrototypesHeroWithCTA = () => {
/> />
{/* Canonical Link */} {/* Canonical Link */}
<link rel="canonical" href="https://www.wdipl.com/services/clickable-prototypes" /> <link
rel="canonical"
href="https://www.wdipl.com/services/clickable-prototypes"
/>
{/* Open Graph Tags (for Facebook, LinkedIn) */} {/* Open Graph Tags (for Facebook, LinkedIn) */}
<meta property="og:title" content="Prototypes | Mobile App Development Visualization | WDI" /> <meta
property="og:title"
content="Prototypes | Mobile App Development Visualization | WDI"
/>
<meta <meta
property="og:description" property="og:description"
content="Test your mobile app idea with WDIs interactive prototypes. Validate user flows and gather insights before full-scale mobile development begins." content="Test your mobile app idea with WDIs 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:url" content="https://www.wdipl.com/services" />
<meta property="og:type" content="website" /> <meta property="og:type" content="website" />
<meta property="og:image" content="https://www.wdipl.com/your-preview-image.jpg" /> <meta
property="og:image"
content="https://www.wdipl.com/your-preview-image.jpg"
/>
{/* Twitter Card Tags */} {/* Twitter Card Tags */}
<meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Prototypes | Mobile App Development Visualization | WDI" /> <meta
name="twitter:title"
content="Prototypes | Mobile App Development Visualization | WDI"
/>
<meta <meta
name="twitter:description" name="twitter:description"
content="Test your mobile app idea with WDIs interactive prototypes. Validate user flows and gather insights before full-scale mobile development begins." content="Test your mobile app idea with WDIs 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" /> <meta
name="twitter:image"
content="https://www.wdipl.com/your-preview-image.jpg"
/>
{/* Social Profiles (using JSON-LD Schema) */} {/* Social Profiles (using JSON-LD Schema) */}
<script type="application/ld+json"> <script type="application/ld+json">
@@ -119,12 +134,13 @@ const PrototypesHeroWithCTA = () => {
{/* Main Heading */} {/* Main Heading */}
<div className="space-y-6"> <div className="space-y-6">
<h1 className="text-4xl md:text-5xl lg:text-6xl font-semibold text-white leading-tight"> <h1 className="text-4xl md:text-5xl lg:text-6xl font-semibold text-white leading-tight">
Interactive Clickable Prototypes Create Exceptional User Experiences with Research-Driven Design
</h1> </h1>
<p className="text-lg text-gray-300 leading-relaxed max-w-lg"> <p className="text-lg text-gray-300 leading-relaxed max-w-lg">
Visualize and test your digital product idea before development, Design solutions that not only look great but also drive
ensuring flawless user flows and gathering invaluable feedback. conversion and user engagement through AI-powered design and AI
mobile app thinking.
</p> </p>
</div> </div>
@@ -433,6 +449,11 @@ const PrototypeBenefits = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6"> <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
Why Prototype Before You Build? Why Prototype Before You Build?
</h2> </h2>
<p className="mt-4 text-gray-400 max-w-2xl mx-auto">
Test clickable prototypes early to perfect user flows, catch design
flaws, and gather stakeholder feedback, saving costs before full AI
mobile application development and web development.
</p>
</motion.div> </motion.div>
<motion.div <motion.div
@@ -524,6 +545,12 @@ const PrototypingProcess = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6"> <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
Our Process for Bringing Your Idea to Life Our Process for Bringing Your Idea to Life
</h2> </h2>
<p className="mt-4 text-gray-400 max-w-2xl mx-auto">
We turn your vision into reality with clickable prototypes,
intuitive user flows, and continuous user feedback to shape an AI
mobile app or web product users truly love, built by an experienced
AI app development company.
</p>
</motion.div> </motion.div>
<div className="relative"> <div className="relative">
@@ -678,6 +705,12 @@ const PrototypingServices = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6"> <h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
Our Specialized Prototyping Capabilities Our Specialized Prototyping Capabilities
</h2> </h2>
<p className="mt-4 text-gray-400 max-w-2xl mx-auto">
Advanced clickable prototypes for seamless user flows, rapid user
feedback loops, and polished interactive prototypes tailored to your
AI mobile app, iOS mobile app development, and web development
roadmap.{" "}
</p>
</motion.div> </motion.div>
<motion.div <motion.div
@@ -836,8 +869,10 @@ const PrototypingTools = () => {
Prototyping Tools We Use Prototyping Tools We Use
</h2> </h2>
<p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed"> <p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
Utilizing industry-leading tools to create realistic and testable Utilizing industryleading tools like Figma, ProtoPie, and Proto.io
prototypes. to create realistic, interactive and testable clickable prototypes
that reflect true user interactions for AI mobile app and AI iOS
development projects.
</p> </p>
</motion.div> </motion.div>
@@ -849,40 +884,41 @@ const PrototypingTools = () => {
className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6" className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6"
> >
{tools.map((tech, index) => { {tools.map((tech, index) => {
const IconComponent = tech.icon; const IconComponent = tech.icon;
const colorClasses = { const colorClasses = {
blue: "bg-blue-500/20 text-blue-400 border-blue-500/30", blue: "bg-blue-500/20 text-blue-400 border-blue-500/30",
orange: "bg-orange-500/20 text-orange-400 border-orange-500/30", orange: "bg-orange-500/20 text-orange-400 border-orange-500/30",
green: "bg-green-500/20 text-green-400 border-green-500/30", green: "bg-green-500/20 text-green-400 border-green-500/30",
red: "bg-red-500/20 text-red-400 border-red-500/30", red: "bg-red-500/20 text-red-400 border-red-500/30",
}; };
return ( return (
<motion.div <motion.div
key={index} key={index}
initial={{ opacity: 0, y: 20 }} initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }} whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5, delay: index * 0.01 }} transition={{ duration: 0.5, delay: index * 0.01 }}
viewport={{ once: true }} viewport={{ once: true }}
whileHover={{ y: -5, scale: 1.05 }} whileHover={{ y: -5, scale: 1.05 }}
className="group" className="group"
> >
<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"> <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 <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 ${
"bg-accent/20 text-accent border-accent/30" colorClasses[tech.color as keyof typeof colorClasses] ||
}`} "bg-accent/20 text-accent border-accent/30"
> }`}
<IconComponent className="w-6 h-6" /> >
</div> <IconComponent className="w-6 h-6" />
<h4 className="font-semibold text-white text-sm mb-1"> </div>
{tech.name} <h4 className="font-semibold text-white text-sm mb-1">
</h4> {tech.name}
<p className="text-xs text-gray-400">{tech.category}</p> </h4>
</Card> <p className="text-xs text-gray-400">{tech.category}</p>
</motion.div> </Card>
); </motion.div>
})} );
})}
</motion.div> </motion.div>
</div> </div>
</section> </section>
@@ -940,6 +976,12 @@ const PrototypingCaseStudies = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-white mb-8"> <h2 className="text-4xl lg:text-5xl font-semibold text-white mb-8">
Prototypes That Led to Successful Products Prototypes That Led to Successful Products
</h2> </h2>
<p className="mt-4 text-gray-400 max-w-2xl mx-auto">
Clickable prototypes transformed Dyson vacuums, Apple iPhones, and
Super Soakers into billiondollar successes through perfected user
flows and feedback, much like a modern AI mobile app or iOS mobile
app development project would.
</p>
</motion.div> </motion.div>
<motion.div <motion.div
@@ -1171,8 +1213,9 @@ const HirePrototypeDesigners = () => {
Need Expertise in Interactive Prototyping? Need Expertise in Interactive Prototyping?
</h2> </h2>
<p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed"> <p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
Our designers specialize in creating realistic and testable Our AI mobile application developers and designers specialize in
prototypes for web and mobile applications. clickable prototypes and realistic, testable user flows for AI
mobile app, iOS mobile app development, and web development
</p> </p>
</motion.div> </motion.div>
@@ -1237,8 +1280,11 @@ const HirePrototypeDesigners = () => {
className="text-center space-y-6" className="text-center space-y-6"
> >
<div className="flex flex-col sm:flex-row gap-4 justify-center"> <div className="flex flex-col sm:flex-row gap-4 justify-center">
<ShimmerButton className="text-lg px-8 py-4" <ShimmerButton
onClick={() => navigate("/hire-talent/clickable-prototypes-developers")} className="text-lg px-8 py-4"
onClick={() =>
navigate("/hire-talent/clickable-prototypes-developers")
}
> >
<div className="inline-flex items-center gap-2"> <div className="inline-flex items-center gap-2">
<Users className="w-5 h-5 flex-shrink-0" /> <Users className="w-5 h-5 flex-shrink-0" />
@@ -1376,8 +1422,10 @@ const PrototypingFinalCTA = () => {
viewport={{ once: true }} viewport={{ once: true }}
className="text-xl text-muted-foreground mb-12 max-w-2xl mx-auto leading-relaxed" className="text-xl text-muted-foreground mb-12 max-w-2xl mx-auto leading-relaxed"
> >
Reduce risk and ensure product-market fit by visualizing and testing Reduce risk and ensure productmarket fit by visualizing and testing
your ideas before coding begins. clickable prototypes, refining user flows, and collecting user
feedback before full AI mobile app development, AI iOS development,
or web development begins.
</motion.p> </motion.p>
<motion.div <motion.div
@@ -1471,9 +1519,7 @@ export const ClickablePrototypes = () => {
</section> </section>
{/* Footer */} {/* Footer */}
<section className="bg-background"> <section className="bg-background">{/* <Footer /> */}</section>
{/* <Footer /> */}
</section>
</div> </div>
); );
}; };

View File

@@ -6,6 +6,7 @@ import { Badge } from "../components/ui/badge";
import { Card, CardContent } from "../components/ui/card"; import { Card, CardContent } from "../components/ui/card";
import { Avatar, AvatarFallback, AvatarImage } from "../components/ui/avatar"; import { Avatar, AvatarFallback, AvatarImage } from "../components/ui/avatar";
import { Separator } from "../components/ui/separator"; import { Separator } from "../components/ui/separator";
import hosptialAi from "../assets/aihospital.jpg"
import { Calendar, Clock, User, ArrowRight, Share2, Linkedin, Twitter, ExternalLink, Tag } from "lucide-react"; import { Calendar, Clock, User, ArrowRight, Share2, Linkedin, Twitter, ExternalLink, Tag } from "lucide-react";
import { ImageWithFallback } from "../components/figma/ImageWithFallback"; import { ImageWithFallback } from "../components/figma/ImageWithFallback";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
@@ -196,7 +197,8 @@ const articleData = {
title: "The Future of AI in Healthcare: Transforming Patient Care Through Technology", title: "The Future of AI in Healthcare: Transforming Patient Care Through Technology",
excerpt: "Discover how artificial intelligence is revolutionizing healthcare delivery and patient outcomes.", excerpt: "Discover how artificial intelligence is revolutionizing healthcare delivery and patient outcomes.",
readTime: "12 min read", readTime: "12 min read",
image: "https://images.unsplash.com/photo-1576091160399-112ba8d25d1f?w=400&h=250&fit=crop&auto=format", // image: "https://images.unsplash.com/photo-1576091160399-112ba8d25d1f?w=400&h=250&fit=crop&auto=format",
image: hosptialAi,
category: "Healthcare AI" category: "Healthcare AI"
}, },
{ {

View File

@@ -27,6 +27,7 @@ import {
X, X,
} from "lucide-react"; } from "lucide-react";
import { ImageWithFallback } from "../components/figma/ImageWithFallback"; import { ImageWithFallback } from "../components/figma/ImageWithFallback";
import hospitalize from "../assets/hospitalise.jpg"
import { Footer } from "../components/Footer"; import { Footer } from "../components/Footer";
import { Navigation } from "../components/Navigation"; import { Navigation } from "../components/Navigation";
import { import {
@@ -227,8 +228,8 @@ const ComplianceReadySystemsHero = () => {
animate={{ opacity: 1, scale: 1 }} animate={{ opacity: 1, scale: 1 }}
transition={{ duration: 0.5, delay: item.delay }} transition={{ duration: 0.5, delay: item.delay }}
className={`p-3 rounded-lg border text-center ${item.status === "compliant" className={`p-3 rounded-lg border text-center ${item.status === "compliant"
? "bg-green-500/10 border-green-500/30" ? "bg-green-500/10 border-green-500/30"
: "bg-orange-500/10 border-orange-500/30" : "bg-orange-500/10 border-orange-500/30"
}`} }`}
> >
<div className="flex items-center justify-center mb-2"> <div className="flex items-center justify-center mb-2">
@@ -240,16 +241,16 @@ const ComplianceReadySystemsHero = () => {
</div> </div>
<div <div
className={`text-sm font-medium ${item.status === "compliant" className={`text-sm font-medium ${item.status === "compliant"
? "text-green-300" ? "text-green-300"
: "text-orange-300" : "text-orange-300"
}`} }`}
> >
{item.standard} {item.standard}
</div> </div>
<div <div
className={`text-xs ${item.status === "compliant" className={`text-xs ${item.status === "compliant"
? "text-green-400" ? "text-green-400"
: "text-orange-400" : "text-orange-400"
}`} }`}
> >
{item.status === "compliant" {item.status === "compliant"
@@ -1141,8 +1142,9 @@ const ComplianceReadySystemsCaseStudies = () => {
client: "Healthcare Provider", client: "Healthcare Provider",
description: description:
"Developed a secure platform for patient data, achieving full HIPAA compliance within 8 months while ensuring seamless patient-provider communication and maintaining the highest security standards for protected health information.", "Developed a secure platform for patient data, achieving full HIPAA compliance within 8 months while ensuring seamless patient-provider communication and maintaining the highest security standards for protected health information.",
image: // image:
"https://images.unsplash.com/photo-1576091160399-112ba8d25d1f?w=400&h=300&fit=crop&auto=format", // "https://images.unsplash.com/photo-1576091160399-112ba8d25d1f?w=400&h=300&fit=crop&auto=format",
image: hospitalize,
results: "Full HIPAA compliance in 8 months", results: "Full HIPAA compliance in 8 months",
engagement: "Healthcare compliance success", engagement: "Healthcare compliance success",
gradient: "from-blue-500/20 to-cyan-500/20", gradient: "from-blue-500/20 to-cyan-500/20",

View File

@@ -126,8 +126,7 @@ const CrossPlatformHeroWithCTA = () => {
</h1> </h1>
<p className="max-w-lg text-lg leading-relaxed text-gray-300"> <p className="max-w-lg text-lg leading-relaxed text-gray-300">
Develop high-quality mobile apps that run seamlessly on iOS and Develop high-quality AI mobile apps that run seamlessly on iOS and Android from a single codebase with AI-powered features, saving time and resources.
Android from a single codebase, saving time and resources.
</p> </p>
</div> </div>
@@ -303,11 +302,9 @@ const CrossPlatformBenefits = () => {
className="mb-16 text-center" className="mb-16 text-center"
> >
<h2 className="mb-6 text-4xl font-semibold lg:text-5xl text-foreground"> <h2 className="mb-6 text-4xl font-semibold lg:text-5xl text-foreground">
Advantages of Choosing Cross-Platform Advantages of Choosing Cross-Platform Development </h2>
</h2>
<p className="max-w-3xl mx-auto text-xl leading-relaxed text-muted-foreground"> <p className="max-w-3xl mx-auto text-xl leading-relaxed text-muted-foreground">
Cross-platform development offers unparalleled efficiency and reach Cross-platform AI mobile app development offers unparalleled efficiency and reach for businesses looking to maximize their mobile app impact.
for businesses looking to maximize their mobile app impact.
</p> </p>
</motion.div> </motion.div>
@@ -664,8 +661,7 @@ const CrossPlatformProcess = () => {
Streamlined Process for Cross-Platform Success Streamlined Process for Cross-Platform Success
</h2> </h2>
<p className="max-w-3xl mx-auto text-xl leading-relaxed text-muted-foreground"> <p className="max-w-3xl mx-auto text-xl leading-relaxed text-muted-foreground">
Our proven methodology ensures efficient development and deployment Our proven methodology ensures efficient AI mobile app development and deployment across multiple platforms with AI-powered features.
across multiple platforms.
</p> </p>
</motion.div> </motion.div>
@@ -872,11 +868,9 @@ const CrossPlatformCaseStudies = () => {
className="mb-20 text-center" className="mb-20 text-center"
> >
<h2 className="mb-8 text-4xl font-semibold lg:text-5xl text-foreground"> <h2 className="mb-8 text-4xl font-semibold lg:text-5xl text-foreground">
Android Apps That Define Industries Cross-Platform Apps That Define Industries </h2>
</h2>
<p className="max-w-3xl mx-auto text-xl leading-relaxed text-muted-foreground"> <p className="max-w-3xl mx-auto text-xl leading-relaxed text-muted-foreground">
Discover how we've helped businesses succeed with powerful Android Discover how our AI mobile application developers have helped businesses succeed with powerful applications that leverage cross-platform capabilities with AI-powered features.
applications that leverage the platform's capabilities.
</p> </p>
</motion.div> </motion.div>

View File

@@ -127,8 +127,7 @@ const CustomWebAppHeroWithCTA = () => {
</h1> </h1>
<p className="text-lg text-gray-300 leading-relaxed max-w-lg"> <p className="text-lg text-gray-300 leading-relaxed max-w-lg">
Building bespoke, scalable, and secure web applications tailored Building bespoke, scalable, and secure web applications tailored to your unique business processes and user needs.
to your unique business processes and user needs.
</p> </p>
</div> </div>
@@ -351,6 +350,10 @@ const CustomWebAppBenefits = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6"> <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
Why Invest in a Custom Web Application? Why Invest in a Custom Web Application?
</h2> </h2>
<p className="mt-4 text-gray-400 max-w-2xl mx-auto">
{/* End-to-end solutions for every stage of your product lifecycle. */}
Tailored web development solutions with AI-powered design that scale, secure your data, and streamline your unique business workflows.
</p>
</motion.div> </motion.div>
<motion.div <motion.div
@@ -480,6 +483,10 @@ const CustomWebAppProcess = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6"> <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
Our Collaborative Journey to Your Custom Web App Our Collaborative Journey to Your Custom Web App
</h2> </h2>
<p className="mt-4 text-gray-400 max-w-2xl mx-auto">
From requirement gathering and AI-powered design to development, testing, and deployment. We partner every step for scalable web development success.
</p>
</motion.div> </motion.div>
<div className="relative"> <div className="relative">
@@ -625,6 +632,10 @@ const CustomWebAppServices = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6"> <h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
Our Expertise in Custom Web Solutions Our Expertise in Custom Web Solutions
</h2> </h2>
<p className="mt-4 text-gray-400 max-w-2xl mx-auto">
Mastering web development with AI-powered design, from React/Next.js frontends and Node.js backends to AWS/Azure cloud integration and scalable microservices architecture.
</p>
</motion.div> </motion.div>
<motion.div <motion.div
@@ -686,68 +697,68 @@ const CustomWebAppServices = () => {
// Web App Tech Stack // Web App Tech Stack
const WebAppTechStack = () => { const WebAppTechStack = () => {
const technologies = [ const technologies = [
{ {
name: "React", name: "React",
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/react/react-original.svg", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/react/react-original.svg",
category: "Frontend", category: "Frontend",
color: "blue", color: "blue",
}, },
{ {
name: "Angular", name: "Angular",
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/angularjs/angularjs-original.svg", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/angularjs/angularjs-original.svg",
category: "Frontend", category: "Frontend",
color: "blue", color: "blue",
}, },
{ {
name: "Vue.js", name: "Vue.js",
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/vuejs/vuejs-original.svg", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/vuejs/vuejs-original.svg",
category: "Frontend", category: "Frontend",
color: "blue", color: "blue",
}, },
{ {
name: "Node.js", name: "Node.js",
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nodejs/nodejs-original.svg", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nodejs/nodejs-original.svg",
category: "Backend", category: "Backend",
color: "green", color: "green",
}, },
{ {
name: "Python", name: "Python",
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/python/python-original.svg", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/python/python-original.svg",
category: "Backend", category: "Backend",
color: "green", color: "green",
}, },
{ {
name: "Java", name: "Java",
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/java/java-original.svg", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/java/java-original.svg",
category: "Backend", category: "Backend",
color: "green", color: "green",
}, },
{ {
name: "AWS", name: "AWS",
logo: awsLogo, logo: awsLogo,
category: "Cloud", category: "Cloud",
color: "red", color: "red",
}, },
{ {
name: "Azure", name: "Azure",
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/azure/azure-original.svg", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/azure/azure-original.svg",
category: "Cloud", category: "Cloud",
color: "orange", color: "orange",
}, },
{ {
name: "PostgreSQL", name: "PostgreSQL",
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/postgresql/postgresql-original.svg", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/postgresql/postgresql-original.svg",
category: "Database", category: "Database",
color: "red", color: "red",
}, },
{ {
name: "MongoDB", name: "MongoDB",
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/mongodb/mongodb-original.svg", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/mongodb/mongodb-original.svg",
category: "Database", category: "Database",
color: "red", color: "red",
}, },
]; ];
const frameworks = [ const frameworks = [
@@ -786,6 +797,10 @@ const WebAppTechStack = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6"> <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
Leveraging Robust and Modern Web Technologies Leveraging Robust and Modern Web Technologies
</h2> </h2>
<p className="mt-4 text-gray-400 max-w-2xl mx-auto">
Powering web development with AI-powered design, React/Next.js frontends, Node.js backends, and cloud-native stacks like Jamstack for superior performance and scalability.
</p>
</motion.div> </motion.div>
{/* Core Technologies */} {/* Core Technologies */}
@@ -932,6 +947,10 @@ const WebAppCaseStudies = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-white mb-8"> <h2 className="text-4xl lg:text-5xl font-semibold text-white mb-8">
Custom Web Applications That Drive Business Growth Custom Web Applications That Drive Business Growth
</h2> </h2>
<p className="mt-4 text-gray-400 max-w-2xl mx-auto">
Scalable web development solutions with AI-powered design that boost efficiency, enhance security, and fuel your business expansion.
</p>
</motion.div> </motion.div>
<motion.div <motion.div
@@ -1144,8 +1163,7 @@ const HireWebDevelopers = () => {
Augment Your Team with Our Expert Web App Developers Augment Your Team with Our Expert Web App Developers
</h2> </h2>
<p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed"> <p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
Access highly skilled frontend, backend, and full-stack developers Access highly skilled frontend, backend, and full-stack developers specializing in custom web development solutions with AI-powered design.
specializing in custom web solutions.
</p> </p>
</motion.div> </motion.div>
@@ -1349,8 +1367,7 @@ const CustomWebAppFinalCTA = () => {
viewport={{ once: true }} viewport={{ once: true }}
className="text-xl text-muted-foreground mb-12 max-w-2xl mx-auto leading-relaxed" className="text-xl text-muted-foreground mb-12 max-w-2xl mx-auto leading-relaxed"
> >
WDI crafts powerful, secure, and intuitive web solutions designed WDI crafts powerful, secure, and intuitive web development solutions with AI-powered design specifically for your business success.
specifically for your business success.
</motion.p> </motion.p>
<motion.div <motion.div

View File

@@ -105,7 +105,7 @@ const HeroWithCTA = () => {
</h1> </h1>
<p className="text-lg text-gray-300 leading-relaxed max-w-lg"> <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. Create engaging, intuitive experiences with AI-powered design that drive conversions and delight users through research-driven, modern design thinking.
</p> </p>
</div> </div>
@@ -195,7 +195,7 @@ const HorizontalTagScroller = () => {
<span className="text-foreground"> & Expertise</span> <span className="text-foreground"> & Expertise</span>
</h2> </h2>
<p className="text-2xl text-muted-foreground max-w-4xl mx-auto leading-relaxed"> <p className="text-2xl text-muted-foreground max-w-4xl mx-auto leading-relaxed">
Comprehensive design services that create meaningful user experiences and drive business results. Comprehensive iOS mobile app development design services that craft meaningful user experiences, boost engagement, and deliver measurable business results.
</p> </p>
</motion.div> </motion.div>
@@ -315,8 +315,7 @@ const SideBySideContentWithIcons = () => {
</h2> </h2>
<p className="text-2xl text-gray-300 leading-relaxed"> <p className="text-2xl text-gray-300 leading-relaxed">
User-centered design that drives measurable business results. User-centered web development design that drives higher engagement, intuitive experiences, and measurable business results through proven UX methodologies. </p>
</p>
</motion.div> </motion.div>
<motion.div <motion.div
@@ -415,7 +414,7 @@ const TabbedServiceDisplay = () => {
Design & Experience Services Design & Experience Services
</h2> </h2>
<p className="text-lg text-gray-300 max-w-4xl mx-auto leading-relaxed"> <p className="text-lg text-gray-300 max-w-4xl mx-auto leading-relaxed">
Comprehensive design services that create meaningful connections between users and digital products. Comprehensive AI mobile app design services that create meaningful connections between users and digital products through intuitive, conversion-focused experiences.
</p> </p>
</motion.div> </motion.div>
@@ -502,8 +501,7 @@ const InlineCTA = () => {
{/* Subtitle */} {/* Subtitle */}
<p className="text-xl text-muted-foreground leading-relaxed max-w-2xl mx-auto"> <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. Design solutions that not only look great but also drive conversion and user engagement through AI-powered design. </p>
</p>
{/* CTA Button */} {/* CTA Button */}
<div className="flex flex-col items-center gap-4"> <div className="flex flex-col items-center gap-4">
@@ -583,8 +581,7 @@ const HireDevelopersSection = () => {
<span className="text-[#E5195E]">Design Experts</span> <span className="text-[#E5195E]">Design Experts</span>
</h2> </h2>
<p className="text-2xl text-muted-foreground max-w-4xl mx-auto leading-relaxed"> <p className="text-2xl text-muted-foreground max-w-4xl mx-auto leading-relaxed">
Get access to talented designers who create beautiful, functional user experiences. Get access to talented AI mobile application developers who create beautiful, functional user experiences that drive engagement and conversions. </p>
</p>
</motion.div> </motion.div>
<motion.div <motion.div
@@ -664,23 +661,23 @@ const HireDevelopersSection = () => {
const designExperienceFAQs = [ const designExperienceFAQs = [
{ {
question: "What is your design process?", question: "What is your design process?",
answer: "Our design process includes discovery, user research, wireframing, prototyping, visual design, usability testing, and iterative refinement. We involve clients at every stage to ensure alignment with business goals." answer: "Our design process includes discovery, user research, wireframing, prototyping, visual design, usability testing, and iterative refinement. We involve clients at every stage with AI mobile app insights to ensure alignment with business goals."
}, },
{ {
question: "How do you ensure designs convert users?", question: "How do you ensure designs convert users?",
answer: "We use data-driven design principles, conduct user research, A/B test design elements, analyze user behavior, and optimize based on conversion metrics to ensure designs drive business results." answer: "We use data-driven design principles, conduct user research, A/B test design elements, analyze user behavior, and optimize based on conversion metrics. AI-powered features help predict user actions to maximize business results."
}, },
{ {
question: "Do you create design systems?", question: "Do you create design systems?",
answer: "Yes, we create comprehensive design systems including component libraries, style guides, pattern libraries, and documentation to ensure consistency across all touchpoints and enable scalable design." answer: "Yes, we create comprehensive design systems including component libraries, style guides, pattern libraries, and documentation. These ensure consistency across all touchpoints with web development scalability"
}, },
{ {
question: "Can you redesign our existing product?", question: "Can you redesign our existing product?",
answer: "Absolutely! We conduct design audits, user research, and competitive analysis to identify improvement opportunities, then redesign your product to enhance user experience and business performance." answer: "Absolutely! We conduct design audits, user research, and competitive analysis to identify improvement opportunities. Then we redesign using iOS mobile app development standards to enhance user experience and performance."
}, },
{ {
question: "How do you handle accessibility in design?", question: "How do you handle accessibility in design?",
answer: "We follow WCAG guidelines and design for accessibility from the start, ensuring our designs are inclusive and usable by people with various abilities. This includes color contrast, typography, navigation, and interaction design." answer: "We follow WCAG guidelines and design for accessibility from the start, ensuring inclusivity for all abilities. This covers color contrast, typography, navigation, and interaction design with AI iOS development support."
} }
]; ];
@@ -697,7 +694,7 @@ export function DesignExperience() {
<HireDevelopersSection /> <HireDevelopersSection />
<FAQSection <FAQSection
title="Design & Experience Questions" title="Design & Experience Questions"
subtitle="Get answers to common questions about our design and user experience services." subtitle="Get answers to common questions about design and user experience services enhanced with AI-powered design."
faqs={designExperienceFAQs} faqs={designExperienceFAQs}
/> />
{/* <Footer /> */} {/* <Footer /> */}

View File

@@ -59,26 +59,41 @@ const WorkshopsHeroWithCTA = () => {
/> />
{/* Canonical Link */} {/* Canonical Link */}
<link rel="canonical" href="https://www.wdipl.com/services/design-thinking-workshops" /> <link
rel="canonical"
href="https://www.wdipl.com/services/design-thinking-workshops"
/>
{/* Open Graph Tags (for Facebook, LinkedIn) */} {/* Open Graph Tags (for Facebook, LinkedIn) */}
<meta property="og:title" content="Design Thinking Workshop | Web Development Strategy" /> <meta
property="og:title"
content="Design Thinking Workshop | Web Development Strategy"
/>
<meta <meta
property="og:description" property="og:description"
content="Join WDIs interactive workshops to shape your web development strategy. Solve business challenges through design thinking and user-focused planning." content="Join WDIs 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:url" content="https://www.wdipl.com/services" />
<meta property="og:type" content="website" /> <meta property="og:type" content="website" />
<meta property="og:image" content="https://www.wdipl.com/your-preview-image.jpg" /> <meta
property="og:image"
content="https://www.wdipl.com/your-preview-image.jpg"
/>
{/* Twitter Card Tags */} {/* Twitter Card Tags */}
<meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Design Thinking Workshop | Web Development Strategy" /> <meta
name="twitter:title"
content="Design Thinking Workshop | Web Development Strategy"
/>
<meta <meta
name="twitter:description" name="twitter:description"
content="Join WDIs interactive workshops to shape your web development strategy. Solve business challenges through design thinking and user-focused planning." content="Join WDIs 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" /> <meta
name="twitter:image"
content="https://www.wdipl.com/your-preview-image.jpg"
/>
{/* Social Profiles (using JSON-LD Schema) */} {/* Social Profiles (using JSON-LD Schema) */}
<script type="application/ld+json"> <script type="application/ld+json">
@@ -123,9 +138,10 @@ const WorkshopsHeroWithCTA = () => {
</h1> </h1>
<p className="text-lg text-gray-300 leading-relaxed max-w-lg"> <p className="text-lg text-gray-300 leading-relaxed max-w-lg">
Unlock innovation and problem-solve effectively with WDI's Unlock innovation and problemsolve effectively with WDIs
facilitated design thinking workshops, tailored to your business AIpowered design thinking workshops, tailored to your business
challenges. challenges and aligned with your AI mobile app, web development,
and AI iOS development goals.
</p> </p>
</div> </div>
@@ -483,6 +499,12 @@ const WorkshopBenefits = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6"> <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
Why Facilitate Innovation with Design Thinking? Why Facilitate Innovation with Design Thinking?
</h2> </h2>
<p className="mt-4 text-gray-400 max-w-2xl mx-auto">
Design thinking aligns innovation with real user needs, enabling
AI-powered design, AI mobile app, and web development teams to
prototype faster, reduce risk, and deliver truly humancentered
products.
</p>
</motion.div> </motion.div>
<motion.div <motion.div
@@ -587,9 +609,11 @@ const DesignThinkingApproach = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6"> <h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
WDI's Facilitated Design Thinking Journey WDI's Facilitated Design Thinking Journey
</h2> </h2>
<p className="text-xl text-gray-300 leading-relaxed mb-8"> <p className="mt-4 text-gray-400 leading-relaxed mb-8">
Our expert facilitators guide your team through every step, Our expert facilitators guide your team through every step with
ensuring clear objectives and actionable results. AIpowered design, turning challenges in AI mobile app, web
development, and AI iOS development into clear objectives and
actionable results.
</p> </p>
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
<div className="w-12 h-12 bg-accent/20 rounded-lg flex items-center justify-center"> <div className="w-12 h-12 bg-accent/20 rounded-lg flex items-center justify-center">
@@ -763,6 +787,12 @@ const WorkshopFormats = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6"> <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
Tailored Workshops for Your Specific Needs Tailored Workshops for Your Specific Needs
</h2> </h2>
<p className="mt-4 text-gray-400 max-w-2xl mx-auto">
Customdesigned Interactive Design Thinking Workshops aligned with
your AI mobile app, web development, and AI iOS development goals,
so your team builds AIpowered features and products with clear,
usercentered outcomes.
</p>
</motion.div> </motion.div>
<motion.div <motion.div
@@ -956,6 +986,12 @@ const WorkshopCaseStudies = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-8"> <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-8">
Success Stories from Our Workshops Success Stories from Our Workshops
</h2> </h2>
<p className="mt-4 text-gray-400 max-w-2xl mx-auto">
Realworld results from WDIs Interactive Design Thinking Workshops
helping teams ship better AI mobile app experiences, AIpowered
features, and web development products through focused, AIpowered
design thinking sprints.
</p>
</motion.div> </motion.div>
<motion.div <motion.div
@@ -1192,7 +1228,8 @@ const HireFacilitators = () => {
</h2> </h2>
<p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed"> <p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
Our senior UX strategists and design thinking facilitators can guide Our senior UX strategists and design thinking facilitators can guide
your team to actionable outcomes. your team to actionable outcomes for AIpowered design, AI mobile
app, iOS mobile app development, and web development initiatives.
</p> </p>
</motion.div> </motion.div>
@@ -1257,8 +1294,11 @@ const HireFacilitators = () => {
className="text-center space-y-6" className="text-center space-y-6"
> >
<div className="flex flex-col sm:flex-row gap-4 justify-center"> <div className="flex flex-col sm:flex-row gap-4 justify-center">
<ShimmerButton className="text-lg px-8 py-4" <ShimmerButton
onClick={() => navigate("/hire-talent/design-thinking-workshops-developers")} className="text-lg px-8 py-4"
onClick={() =>
navigate("/hire-talent/design-thinking-workshops-developers")
}
> >
<div className="inline-flex items-center gap-2"> <div className="inline-flex items-center gap-2">
<UserPlus className="w-5 h-5 flex-shrink-0" /> <UserPlus className="w-5 h-5 flex-shrink-0" />
@@ -1395,8 +1435,10 @@ const WorkshopFinalCTA = () => {
viewport={{ once: true }} viewport={{ once: true }}
className="text-xl text-muted-foreground mb-12 max-w-2xl mx-auto leading-relaxed" className="text-xl text-muted-foreground mb-12 max-w-2xl mx-auto leading-relaxed"
> >
Harness the power of Design Thinking to create user-centric Harness the power of Design Thinking and AIpowered design to create
solutions and drive meaningful business results. AI mobile appready, usercentric solutions that drive meaningful
business results across web development and iOS mobile app
development.
</motion.p> </motion.p>
<motion.div <motion.div
@@ -1491,9 +1533,7 @@ export const DesignThinkingWorkshops = () => {
</section> </section>
{/* Footer */} {/* Footer */}
<section className="bg-background"> <section className="bg-background">{/* <Footer /> */}</section>
{/* <Footer /> */}
</section>
</div> </div>
); );
}; };

View File

@@ -64,7 +64,7 @@ const EcommerceHeroWithCTA = () => {
/> />
{/* Canonical Link */} {/* Canonical Link */}
<link rel="canonical" href="https://www.wdipl.com/services/ecommerce-platforms" /> <link rel="canonical" href="https://www.wdipl.com/services/ecommerce-platforms" />
{/* Open Graph Tags (for Facebook, LinkedIn) */} {/* Open Graph Tags (for Facebook, LinkedIn) */}
<meta property="og:title" content="eCommerce Platform Development by WDI| Build Powerful Online Stores" /> <meta property="og:title" content="eCommerce Platform Development by WDI| Build Powerful Online Stores" />
@@ -128,8 +128,7 @@ const EcommerceHeroWithCTA = () => {
</h1> </h1>
<p className="text-lg text-gray-300 leading-relaxed max-w-lg"> <p className="text-lg text-gray-300 leading-relaxed max-w-lg">
Building high-converting, scalable, and secure online stores and Building high-converting, scalable AI mobile app stores with AI-powered features for iOS mobile app development, secure marketplaces that drive sales through expertise and enhanced customer experiences.
marketplaces that drive sales and enhance customer experiences.
</p> </p>
</div> </div>
@@ -399,6 +398,13 @@ const EcommerceBenefits = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6"> <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
Why Choose WDI for Your eCommerce Platform? Why Choose WDI for Your eCommerce Platform?
</h2> </h2>
<p className="mt-4 text-gray-400 max-w-2xl mx-auto">
{/* End-to-end solutions for every stage of your product lifecycle. */}
WDI delivers bespoke AI mobile app solutions that ensure scalability, security, and superior customer experiences for high-converting online stores.
</p>
</motion.div> </motion.div>
<motion.div <motion.div
@@ -528,6 +534,12 @@ const EcommerceProcess = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6"> <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
Our Streamlined Process for Your eCommerce Success Our Streamlined Process for Your eCommerce Success
</h2> </h2>
<p className="mt-4 text-gray-400 max-w-2xl mx-auto">
{/* End-to-end solutions for every stage of your product lifecycle. */}
WDI's proven steps. from discovery and design to AI mobile app integration and launch, ensure your platform scales effortlessly and converts at peak performance.
</p>
</motion.div> </motion.div>
<div className="relative"> <div className="relative">
@@ -546,14 +558,12 @@ const EcommerceProcess = () => {
whileInView={{ opacity: 1, x: 0 }} whileInView={{ opacity: 1, x: 0 }}
transition={{ duration: 0.8, delay: index * 0.2 }} transition={{ duration: 0.8, delay: index * 0.2 }}
viewport={{ once: true }} viewport={{ once: true }}
className={`flex items-center ${ className={`flex items-center ${isEven ? "lg:flex-row" : "lg:flex-row-reverse"
isEven ? "lg:flex-row" : "lg:flex-row-reverse" } flex-col lg:gap-16 gap-8`}
} flex-col lg:gap-16 gap-8`}
> >
<div <div
className={`flex-1 ${ className={`flex-1 ${isEven ? "lg:text-right" : "lg:text-left"
isEven ? "lg:text-right" : "lg:text-left" } text-center 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="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"> <div className="flex items-center gap-4 mb-4 justify-center lg:justify-start">
@@ -683,6 +693,13 @@ const EcommerceServices = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6"> <h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
Our Comprehensive eCommerce Development Services Our Comprehensive eCommerce Development Services
</h2> </h2>
<p className="mt-4 text-gray-400 max-w-2xl mx-auto">
{/* End-to-end solutions for every stage of your product lifecycle. */}
WDI offers end-to-end solutions including custom platforms, AI mobile app integration, secure payments, and scalable marketplaces for seamless online success.
</p>
</motion.div> </motion.div>
<motion.div <motion.div
@@ -887,8 +904,7 @@ const EcommerceTechStack = () => {
Utilizing Industry-Leading Platforms and Modern Frameworks Utilizing Industry-Leading Platforms and Modern Frameworks
</h2> </h2>
<p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed"> <p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
For powerful eCommerce solutions that drive sales and scale with For powerful eCommerce solutions enhanced by AI mobile app capabilities that drive sales and scale seamlessly with your business.
your business.
</p> </p>
</motion.div> </motion.div>
@@ -1101,6 +1117,12 @@ const EcommerceCaseStudies = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-white mb-8"> <h2 className="text-4xl lg:text-5xl font-semibold text-white mb-8">
eCommerce Solutions That Drive Sales eCommerce Solutions That Drive Sales
</h2> </h2>
<p className="mt-4 text-gray-400 max-w-2xl mx-auto">
{/* End-to-end solutions for every stage of your product lifecycle. */}
WDI crafts high-converting platforms powered by AI mobile app technology to boost revenue and deliver seamless customer experiences.
</p>
</motion.div> </motion.div>
<motion.div <motion.div
@@ -1310,8 +1332,7 @@ const HireEcommerceDevelopers = () => {
Find Expert eCommerce Developers Find Expert eCommerce Developers
</h2> </h2>
<p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed"> <p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
Access our specialized developers proficient in Shopify, Magento, Access WDI's specialized developers proficient in Shopify, Magento, WooCommerce, and custom solutions powered by AI mobile app expertise.
WooCommerce, and custom eCommerce solutions.
</p> </p>
</motion.div> </motion.div>
@@ -1377,7 +1398,7 @@ const HireEcommerceDevelopers = () => {
> >
<div className="flex flex-col sm:flex-row gap-4 justify-center"> <div className="flex flex-col sm:flex-row gap-4 justify-center">
<ShimmerButton className="text-lg px-8 py-4" <ShimmerButton className="text-lg px-8 py-4"
onClick={() => navigate("/hire-talent/ecommerce-platform-developers")} onClick={() => navigate("/hire-talent/ecommerce-platform-developers")}
> >
<div className="inline-flex items-center gap-2"> <div className="inline-flex items-center gap-2">
<Users className="w-5 h-5 flex-shrink-0" /> <Users className="w-5 h-5 flex-shrink-0" />
@@ -1514,8 +1535,7 @@ const EcommerceFinalCTA = () => {
viewport={{ once: true }} viewport={{ once: true }}
className="text-xl text-muted-foreground mb-12 max-w-2xl mx-auto leading-relaxed" className="text-xl text-muted-foreground mb-12 max-w-2xl mx-auto leading-relaxed"
> >
Partner with us to create an online presence that attracts, engages, Partner with WDI's AI mobile app experts to create an online presence that attracts, engages, and converts customers effectively.
and converts customers effectively.
</motion.p> </motion.p>
<motion.div <motion.div

View File

@@ -127,9 +127,7 @@ const EnterpriseHeroWithCTA = () => {
</h1> </h1>
<p className="text-lg text-gray-300 leading-relaxed max-w-lg"> <p className="text-lg text-gray-300 leading-relaxed max-w-lg">
Crafting custom, high-impact software tailored to streamline Crafting custom, high-impact AI-powered features software tailored to streamline large-scale operations, enhance productivity, and drive digital transformation for enterprises.
large-scale operations, enhance productivity, and drive digital
transformation for enterprises.
</p> </p>
</div> </div>
@@ -509,6 +507,13 @@ const EnterpriseBenefits = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6"> <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
Why Custom Enterprise Solutions from WDI? Why Custom Enterprise Solutions from WDI?
</h2> </h2>
<p className="mt-4 text-gray-400 max-w-2xl mx-auto">
{/* End-to-end solutions for every stage of your product lifecycle. */}
WDI delivers tailored AI app development company solutions that optimize processes, unlock real-time insights, and scale seamlessly with your enterprise growth.
</p>
</motion.div> </motion.div>
<motion.div <motion.div
@@ -644,6 +649,11 @@ const EnterpriseProcess = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6"> <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
Our Strategic Approach to Enterprise Software Our Strategic Approach to Enterprise Software
</h2> </h2>
<p className="mt-4 text-gray-400 max-w-2xl mx-auto">
WDI aligns business objectives with AI iOS development through discovery, agile execution, and cloud-native architecture delivering scalable systems that evolve with enterprise growth.
</p>
</motion.div> </motion.div>
<div className="relative"> <div className="relative">
@@ -797,6 +807,11 @@ const EnterpriseServices = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6"> <h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
Our Comprehensive Enterprise Software Capabilities Our Comprehensive Enterprise Software Capabilities
</h2> </h2>
<p className="mt-4 text-gray-400 max-w-2xl mx-auto">
WDI offers end-to-end AI mobile app solutions from custom ERP/CRM systems and cloud migration to intelligent analytics platforms that power enterprise-wide digital transformation
</p>
</motion.div> </motion.div>
<motion.div <motion.div
@@ -1012,8 +1027,7 @@ const EnterpriseTechStack = () => {
Leveraging Robust Enterprise-Grade Technologies Leveraging Robust Enterprise-Grade Technologies
</h2> </h2>
<p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed"> <p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
For reliability and performance at scale with proven enterprise For reliability and performance at scale with proven AI-powered features enterprise solutions that ensure seamless operations across your entire organization.
solutions.
</p> </p>
</motion.div> </motion.div>
@@ -1262,6 +1276,11 @@ const EnterpriseCaseStudies = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-white mb-8"> <h2 className="text-4xl lg:text-5xl font-semibold text-white mb-8">
Enterprise Solutions Driving Real Business Impact Enterprise Solutions Driving Real Business Impact
</h2> </h2>
<p className="mt-4 text-gray-400 max-w-2xl mx-auto">
WDI crafts AI-powered features that deliver measurable ROI through streamlined operations, enhanced decision-making, and accelerated digital transformation for enterprises.
</p>
</motion.div> </motion.div>
<motion.div <motion.div
@@ -1478,8 +1497,7 @@ const HireEnterpriseTalent = () => {
Build Your Enterprise Team with WDI Talent Build Your Enterprise Team with WDI Talent
</h2> </h2>
<p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed"> <p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
Access highly experienced architects, project managers, and senior Access highly experienced AI app development company architects, project managers, and senior developers skilled in complex enterprise environments.
developers skilled in complex enterprise environments.
</p> </p>
</motion.div> </motion.div>
@@ -1684,8 +1702,7 @@ const EnterpriseFinalCTA = () => {
viewport={{ once: true }} viewport={{ once: true }}
className="text-xl text-muted-foreground mb-12 max-w-2xl mx-auto leading-relaxed" className="text-xl text-muted-foreground mb-12 max-w-2xl mx-auto leading-relaxed"
> >
Partner with us for custom enterprise software solutions that Partner with WDI's AI-powered design experts for custom enterprise software solutions that deliver efficiency, innovation, and competitive edge.
deliver efficiency, innovation, and a competitive edge.
</motion.p> </motion.p>
<motion.div <motion.div

View File

@@ -7,6 +7,7 @@ import { Card, CardContent } from "../components/ui/card";
import { Avatar, AvatarFallback, AvatarImage } from "../components/ui/avatar"; import { Avatar, AvatarFallback, AvatarImage } from "../components/ui/avatar";
import { Separator } from "../components/ui/separator"; import { Separator } from "../components/ui/separator";
import { Calendar, Clock, User, ArrowRight, Share2, Linkedin, Twitter, ExternalLink, Tag } from "lucide-react"; import { Calendar, Clock, User, ArrowRight, Share2, Linkedin, Twitter, ExternalLink, Tag } from "lucide-react";
import hosptialAi from "../assets/aihospital.jpg"
import { ImageWithFallback } from "../components/figma/ImageWithFallback"; import { ImageWithFallback } from "../components/figma/ImageWithFallback";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
@@ -109,7 +110,8 @@ const articleData = {
readTime: "12 min read", readTime: "12 min read",
category: "Healthcare AI", category: "Healthcare AI",
tags: ["Artificial Intelligence", "Healthcare", "Medical Technology", "Digital Health", "Machine Learning"], tags: ["Artificial Intelligence", "Healthcare", "Medical Technology", "Digital Health", "Machine Learning"],
bannerImage: "https://images.unsplash.com/photo-1576091160399-112ba8d25d1f?w=1200&h=600&fit=crop&auto=format", // bannerImage: "https://images.unsplash.com/photo-1576091160399-112ba8d25d1f?w=1200&h=600&fit=crop&auto=format",
bannerImage: hosptialAi,
relatedArticles: [ relatedArticles: [
{ {
id: "compliance-ready-systems-fintech", id: "compliance-ready-systems-fintech",

View File

@@ -122,9 +122,7 @@ const GenAIIntegrationHeroWithCTA = () => {
</h1> </h1>
<p className="text-lg text-gray-300 leading-relaxed max-w-lg"> <p className="text-lg text-gray-300 leading-relaxed max-w-lg">
Infuse your applications with the power of Generative AI, Infuse your applications with the power of Generative AI, enabling dynamic content creation, intelligent code generation, and hyperpersonalized user experiences through AIpowered mobile and web solutions.
enabling dynamic content creation, intelligent code generation,
and hyper-personalized user experiences.
</p> </p>
</div> </div>
@@ -503,6 +501,9 @@ const GenAIIntegrationBenefits = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6"> <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
Unlock New Dimensions with Generative AI Unlock New Dimensions with Generative AI
</h2> </h2>
<p className="mt-4 text-gray-400 max-w-2xl mx-auto">
Unleash creative, intelligent, and highly personalized experiences in your digital products with Generative AIpowered features.
</p>
</motion.div> </motion.div>
<motion.div <motion.div
@@ -638,6 +639,9 @@ const GenAIIntegrationProcess = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6"> <h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
Our Strategic Path to Embedding Generative AI Our Strategic Path to Embedding Generative AI
</h2> </h2>
<p className="mt-4 text-gray-400 max-w-2xl mx-auto">
A focused roadmap to integrate Generative AI into your mobile and web products and unlock AIdriven creativity and automation.
</p>
</motion.div> </motion.div>
<div className="relative"> <div className="relative">
@@ -792,6 +796,9 @@ const GenAIIntegrationServices = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6"> <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
Our Specialized Generative AI Integration Solutions Our Specialized Generative AI Integration Solutions
</h2> </h2>
<p className="mt-4 text-gray-400 max-w-2xl mx-auto">
Specialized Generative AI integration that embeds smart, creative, and scalable AI features into your existing digital products.
</p>
</motion.div> </motion.div>
<motion.div <motion.div
@@ -1083,6 +1090,9 @@ const GenAICaseStudies = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-8"> <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-8">
Digital Products Reimagined with Generative AI Digital Products Reimagined with Generative AI
</h2> </h2>
<p className="mt-4 text-gray-400 max-w-2xl mx-auto">
Where Generative AI turns your existing products into dynamic, AIpowered digital experiences.
</p>
</motion.div> </motion.div>
<motion.div <motion.div
@@ -1208,8 +1218,7 @@ const GenAIInlineCTA = () => {
</h2> </h2>
<p className="text-xl text-gray-300 leading-relaxed max-w-2xl mx-auto"> <p className="text-xl text-gray-300 leading-relaxed max-w-2xl mx-auto">
Let's unlock the creative and functional potential of Generative Lets unlock the creative and functional potential of Generative AI to reimagine your apps and workflows.
AI for your applications.
</p> </p>
<ShimmerButton <ShimmerButton
@@ -1319,9 +1328,7 @@ const HireGenAISpecialists = () => {
Access Expert Generative AI Engineers Access Expert Generative AI Engineers
</h2> </h2>
<p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed"> <p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
Hire our data scientists and developers specialized in prompt Hire our data scientists and developers who specialize in prompt engineering, model finetuning, and largelanguagemodel integration.
engineering, model fine-tuning, and integrating large language
models.
</p> </p>
</motion.div> </motion.div>
@@ -1415,23 +1422,23 @@ const GenAIFAQs = () => {
{ {
question: "What are the ethical considerations for using Generative AI?", question: "What are the ethical considerations for using Generative AI?",
answer: answer:
"Ethical GenAI implementation involves several key considerations: bias prevention and mitigation, ensuring diverse training data, implementing content filtering and safety measures, maintaining transparency about AI-generated content, respecting intellectual property rights, protecting user privacy, and establishing clear guidelines for AI use. We work with you to develop comprehensive AI ethics policies, implement bias detection systems, create content moderation workflows, and ensure compliance with emerging AI regulations while maintaining responsible AI practices throughout the development lifecycle.", "Ethical GenAI implementation involves several key considerations: bias prevention and mitigation, ensuring diverse training data, implementing content filtering and safety measures, maintaining transparency about AIgenerated content, respecting intellectual property rights, protecting user privacy, and establishing clear guidelines for AI use. We work with you to develop comprehensive AI ethics policies, implement bias detection systems, create content moderation workflows, and ensure compliance with emerging AI regulations while maintaining responsible AI practices throughout the development lifecycle and AIpowered digital products.",
}, },
{ {
question: question:
"How do you ensure the accuracy and safety of AI-generated content?", "How do you ensure the accuracy and safety of AI-generated content?",
answer: answer:
"We implement multi-layered content validation systems including automated fact-checking, human review processes, confidence scoring, and real-time monitoring. Our approach includes prompt engineering for consistent outputs, implementing guardrails and safety filters, creating feedback loops for continuous improvement, and establishing clear escalation procedures for problematic content. We also use techniques like retrieval-augmented generation (RAG) to ground AI responses in verified information sources and implement version control for prompt templates to maintain quality standards.", "We implement multilayered content validation systems including automated factchecking, human review processes, confidence scoring, and realtime monitoring. Our approach includes prompt engineering for consistent outputs, implementing guardrails and safety filters, creating feedback loops for continuous improvement, and establishing clear escalation procedures for problematic content. We also use techniques like retrievalaugmented generation (RAG) to ground AI responses in verified information sources and implement version control for prompt templates, all designed to keep your AIpowered applications accurate and safe.",
}, },
{ {
question: "Can GenAI be customized with our own data?", question: "Can GenAI be customized with our own data?",
answer: answer:
"Yes, GenAI can be extensively customized with your proprietary data through several approaches: fine-tuning models on your specific domain data, implementing retrieval-augmented generation (RAG) to access your knowledge base, creating custom prompt templates reflecting your brand voice, and developing domain-specific model variants. We ensure data privacy through secure training environments, implement data anonymization when needed, and can deploy models on-premises or in private cloud environments. The customization level depends on your specific use case, data volume, and privacy requirements.", "Yes, GenAI can be extensively customized with your proprietary data through several approaches: finetuning models on your specific domain data, implementing retrievalaugmented generation (RAG) to access your knowledge base, creating custom prompt templates reflecting your brand voice, and developing domainspecific model variants. We ensure data privacy through secure training environments, implement data anonymization when needed, and can deploy models onpremises or in private cloud environments. The customization level depends on your specific use case, data volume, and privacy requirements, and it directly supports AIdriven mobile and web experiences.",
}, },
{ {
question: "What's the typical cost for GenAI integration?", question: "What's the typical cost for GenAI integration?",
answer: answer:
"GenAI integration costs vary based on several factors: the complexity of use cases, volume of API calls, model selection (GPT-4 vs. open-source models), level of customization required, and infrastructure needs. Costs typically include API usage fees, development time, fine-tuning expenses, and ongoing monitoring. We help optimize costs through efficient prompt engineering, model selection strategies, caching mechanisms, and usage optimization. We provide detailed cost projections during the planning phase and implement cost monitoring to ensure budget alignment throughout the project lifecycle.", "GenAI integration costs vary based on several factors: the complexity of use cases, volume of API calls, model selection (GPT4 vs. opensource models), level of customization required, and infrastructure needs. Costs typically include API usage fees, development time, finetuning expenses, and ongoing monitoring. We help optimize costs through efficient prompt engineering, model selection strategies, caching mechanisms, and usage optimization. We provide detailed cost projections during the planning phase and implement cost monitoring to ensure budget alignment throughout the project lifecycle for AIpowered product development.",
}, },
]; ];
@@ -1523,8 +1530,7 @@ const GenAIFinalCTA = () => {
viewport={{ once: true }} viewport={{ once: true }}
className="text-xl text-muted-foreground mb-12 max-w-2xl mx-auto leading-relaxed" className="text-xl text-muted-foreground mb-12 max-w-2xl mx-auto leading-relaxed"
> >
Transform your products with dynamic content generation, smart Transform your products with dynamic content generation, smart automation, and unparalleled personalization through AIpowered mobile and web experiences.
automation, and unparalleled personalization.
</motion.p> </motion.p>
<motion.div <motion.div

View File

@@ -35,6 +35,7 @@ import {
import { ImageWithFallback } from "../components/figma/ImageWithFallback"; import { ImageWithFallback } from "../components/figma/ImageWithFallback";
import { Footer } from "../components/Footer"; import { Footer } from "../components/Footer";
import { Navigation } from "../components/Navigation"; import { Navigation } from "../components/Navigation";
import hospitalize from "../assets/hospitalise.jpg"
import { import {
Accordion, Accordion,
AccordionContent, AccordionContent,
@@ -391,18 +392,18 @@ const HealthTechHero = () => {
> >
<div <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" ? "bg-blue-500/20"
: activity.color === "green" : activity.color === "green"
? "bg-green-500/20" ? "bg-green-500/20"
: "bg-purple-500/20" : "bg-purple-500/20"
}`} }`}
> >
<activity.icon <activity.icon
className={`w-4 h-4 ${activity.color === "blue" className={`w-4 h-4 ${activity.color === "blue"
? "text-blue-400" ? "text-blue-400"
: activity.color === "green" : activity.color === "green"
? "text-green-400" ? "text-green-400"
: "text-purple-400" : "text-purple-400"
}`} }`}
/> />
</div> </div>
@@ -983,9 +984,10 @@ const HealthTechCaseStudies = () => {
"WDI developed an end-to-end telemedicine solution with secure video conferencing, appointment scheduling, e-prescribing, and patient record access, ensuring full HIPAA compliance.", "WDI developed an end-to-end telemedicine solution with secure video conferencing, appointment scheduling, e-prescribing, and patient record access, ensuring full HIPAA compliance.",
results: results:
"Enabled 30% more patient consultations and extended reach to underserved areas, significantly improving patient access.", "Enabled 30% more patient consultations and extended reach to underserved areas, significantly improving patient access.",
image: // image:
"https://images.unsplash.com/photo-1576091160399-112ba8d25d1f?w=400&h=300&fit=crop&auto=format", // "https://images.unsplash.com/photo-1576091160399-112ba8d25d1f?w=400&h=300&fit=crop&auto=format",
engagement: "Telehealth transformation", // engagement: "Telehealth transformation",
image: hospitalize,
gradient: "from-blue-500/20 to-cyan-500/20", gradient: "from-blue-500/20 to-cyan-500/20",
}, },
{ {

View File

@@ -75,7 +75,7 @@ export const HireMobileAppDevelopers = () => {
const heroBanner = [ const heroBanner = [
{ {
category: "Hire Expert Developers", category: "Hire Expert Developers",
title: "Hire Mobile App Developers", title: "Hire Mobile App Developers for Your Project",
description: "Get access to top-tier mobile app developers specialized in iOS, Android, React Native, and Flutter. Build engaging, high-performance mobile applications that users love.", description: "Get access to top-tier mobile app developers specialized in iOS, Android, React Native, and Flutter. Build engaging, high-performance mobile applications that users love.",
primaryCTA: { primaryCTA: {
text: "Hire Mobile Developers", text: "Hire Mobile Developers",
@@ -117,39 +117,39 @@ export const HireMobileAppDevelopers = () => {
return ( return (
<div className="dark min-h-screen bg-background"> <div className="dark min-h-screen bg-background">
{/* <Navigation /> */} {/* <Navigation /> */}
<Helmet> <Helmet>
{/* Page Title and Meta Description */} {/* Page Title and Meta Description */}
<title>Hire Mobile App Developers | Expert Talent at WDI</title> <title>Hire Mobile App Developers | Dedicated App Experts - WDIPL</title>
<meta <meta
name="description" 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." content="Hire mobile app developers with proven expertise in iOS, Android and cross-platform apps. Scale faster with dedicated developers and agile delivery."
/> />
{/* Canonical Link */} {/* Canonical Link */}
<link rel="canonical" href="https://www.wdipl.com/services" /> <link rel="canonical" href="https://www.wdipl.com/services" />
{/* Open Graph Tags (for Facebook, LinkedIn) */} {/* Open Graph Tags (for Facebook, LinkedIn) */}
<meta property="og:title" content="Hire Mobile App Developers | Expert Talent at WDI" /> <meta property="og:title" content="Hire Mobile App Developers | Expert Talent at WDI" />
<meta <meta
property="og:description" 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." content="Hire mobile app developers with proven expertise in iOS, Android and cross-platform apps. Scale faster with dedicated developers and agile delivery."
/> />
<meta property="og:url" content="https://www.wdipl.com/services" /> <meta property="og:url" content="https://www.wdipl.com/services" />
<meta property="og:type" content="website" /> <meta property="og:type" content="website" />
<meta property="og:image" content="https://www.wdipl.com/your-preview-image.jpg" /> <meta property="og:image" content="https://www.wdipl.com/your-preview-image.jpg" />
{/* Twitter Card Tags */} {/* Twitter Card Tags */}
<meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Hire Mobile App Developers | Expert Talent at WDI" /> <meta name="twitter:title" content="Hire Mobile App Developers | Expert Talent at WDI" />
<meta <meta
name="twitter:description" 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." content="Hire mobile app developers with proven expertise in iOS, Android and cross-platform apps. Scale faster with dedicated developers and agile delivery."
/> />
<meta name="twitter:image" content="https://www.wdipl.com/your-preview-image.jpg" /> <meta name="twitter:image" content="https://www.wdipl.com/your-preview-image.jpg" />
{/* Social Profiles (using JSON-LD Schema) */} {/* Social Profiles (using JSON-LD Schema) */}
<script type="application/ld+json"> <script type="application/ld+json">
{` {`
{ {
"@context": "https://schema.org", "@context": "https://schema.org",
"@type": "Organization", "@type": "Organization",
@@ -162,8 +162,8 @@ export const HireMobileAppDevelopers = () => {
] ]
} }
`} `}
</script> </script>
</Helmet> </Helmet>
{/* Hero Section with MobileAppVector */} {/* Hero Section with MobileAppVector */}
<HireTalentHeroBanner <HireTalentHeroBanner
vectorComponent={MobileAppVector} vectorComponent={MobileAppVector}

View File

@@ -0,0 +1,378 @@
import React from "react";
import { Navigation } from "../components/Navigation";
import { Footer } from "../components/Footer";
import { Button } from "../components/ui/button";
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 { useNavigate } from "react-router-dom";
import { Helmet } from "react-helmet-async";
import { HireTalentHeroBanner } from "@/components/HireTalentHeroBanner";
import { MobileAppVector } from "@/components/vectors";
export const HireMobileAppDevelopersIndia = () => {
const navigate = useNavigate();
const expertise = [
{
icon: Apple,
title: "iOS Developers",
description: (
<>
To develop iOS apps, you can{" "}
<a
href="/hire-talent/mobile-app-developers"
className="text-[#E5195E] underline"
>
hire mobile app developers
</a>{" "}
in India from us, as they are proficient in Swift and Objective-C for crafting robust and stylish mobile applications for iPhone and iPad.
</>
),
skills: ["Swift", "Objective-C", "Xcode", "Core Data", "SwiftUI"]
},
{
icon: Code,
title: "Android Developers",
description: (
<>
Our expert{" "}
<a
href="/services/android-app-development"
className="text-[#E5195E] underline"
>
Android app developers
</a>{" "}
in India are skilled in Kotlin and Java to develop applications with extensive features and enhanced scalability for the broader Android ecosystem.
</>
),
skills: ["Kotlin", "Java", "Android Studio", "Room Database", "Jetpack Compose"]
},
{
icon: Smartphone,
title: "Cross-Platform Developers",
description: (
<>
We have expert developers in frameworks like React Native and Flutter for efficient{" "}
<a
href="/services/cross-platform-app-development"
className="text-[#E5195E] underline"
>
development across multiple platforms
</a>{" "}
using a single codebase.
</>
),
skills: ["React Native", "Flutter", "Dart", "Expo", "Xamarin"]
},
{
icon: Code,
title: "Hybrid App Developers",
description: "Experience with technologies like Ionic and Xamarin for web-based mobile applications.",
skills: ["Ionic", "Cordova", "PhoneGap", "Progressive Web Apps"]
}
];
const deliverables = [
{
icon: Target,
title: "Intuitive UI/UX",
description: "Ensuring a seamless and engaging user experience."
},
{
icon: Zap,
title: "High Performance",
description: "Optimized apps for speed, responsiveness, and stability."
},
{
icon: Shield,
title: "Robust Security",
description: "Implementing best practices for data protection and user privacy."
},
{
icon: Code,
title: "API Integration",
description: "Connecting with backend services and third-party APIs seamlessly."
},
{
icon: Users,
title: "Scalability",
description: "Building apps that can grow with your user base and feature set."
},
{
icon: CheckCircle,
title: "Post-Launch Support",
description: "Assistance with updates, maintenance, and performance monitoring."
}
];
const heroBanner = [
{
category: "Hire Expert Developers",
title: "Hire Mobile App Developers in India",
description: "Reach out to our premium mobile app developers in India, specialized in iOS, Android, React native, and Flutter. Develop high-impact and appealing mobile applications that Indian users love.",
primaryCTA: {
text: "Hire Mobile Developers",
href: "/start-a-project",
icon: Smartphone
},
secondaryCTA: {
text: "View Developer Profiles",
href: "/hire-talent",
icon: Users
}
},
]
const projectTypes = [
"E-commerce & Retail Apps",
"On-Demand Services & Delivery Apps",
"Social Networking Platforms",
"Enterprise & Business Productivity Tools",
"Health & Fitness Trackers",
"Educational Apps & E-learning Platforms"
];
const testimonials = [
{
quote: "The mobile app developers from WDI delivered an exceptional iOS app that exceeded our expectations. Their expertise in Swift and attention to detail was outstanding.",
author: "Sarah Johnson",
role: "CTO, TechStart Inc.",
rating: 5
},
{
quote: "Our React Native app was completed ahead of schedule and performs flawlessly across both platforms. The team's cross-platform expertise saved us significant time and cost.",
author: "Michael Chen",
role: "Product Manager, InnovateNow",
rating: 5
}
];
return (
<div className="dark min-h-screen bg-background">
{/* <Navigation /> */}
<Helmet>
{/* Page Title and Meta Description */}
<title>Hire Mobile App Developers in India | WDIPL</title>
<meta
name="description"
content="Hire mobile app developers in India to build scalable iOS & Android apps. Work with expert app developers in India. Get a free consultation today."
/>
{/* 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 mobile app developers in India to build scalable iOS & Android apps. Work with expert app developers in India. Get a free consultation 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="Hire Mobile App Developers | Expert Talent at WDI" />
<meta
name="twitter:description"
content="Hire mobile app developers in India to build scalable iOS & Android apps. Work with expert app developers in India. Get a free consultation 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>
{/* Hero Section with MobileAppVector */}
<HireTalentHeroBanner
vectorComponent={MobileAppVector}
category={heroBanner[0].category}
title={heroBanner[0].title}
description={heroBanner[0].description}
primaryCTA={heroBanner[0].primaryCTA}
secondaryCTA={heroBanner[0].secondaryCTA}
/>
{/* Introduction */}
<section className="py-16 bg-card/50">
<div className="container mx-auto px-6 lg:px-8">
<div className="max-w-4xl mx-auto text-center">
<p className="text-lg text-muted-foreground leading-relaxed">
Our expert app developers in India can proficiently develop and deliver intuitive, stable, and scalable mobile applications that connect to Indian users and influence business growth in India in varied sectors. We provide a wide range of mobile application solutions, from native iOS and Android apps to cross-platform applications. Combining our proven expertise and your trust, we are here to make your mobile visions a reality.
</p>
</div>
</div>
</section>
{/* Mobile Development Expertise */}
<section className="py-16 bg-background">
<div className="container mx-auto px-6 lg:px-8">
<div className="text-center mb-12">
<h2 className="text-3xl md:text-4xl font-bold mb-4 text-white">
Our Proven Expertise in Mobile App Development </h2>
<p className="text-muted-foreground max-w-2xl mx-auto">
We provide 360-degree mobile app development expertise across all main platforms and frameworks, with proven outcomes.
</p>
</div>
<div className="grid md:grid-cols-2 gap-8">
{expertise.map((area, index) => (
<Card key={index} className="bg-card/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300 group">
<CardContent className="p-8">
<area.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-4 group-hover:text-[#E5195E] transition-colors duration-300">
{area.title}
</h3>
<p className="text-muted-foreground mb-6 leading-relaxed">
{area.description}
</p>
<div className="flex flex-wrap gap-2">
{area.skills.map((skill, skillIndex) => (
<Badge key={skillIndex} variant="outline" className="border-white/20 text-white text-xs">
{skill}
</Badge>
))}
</div>
</CardContent>
</Card>
))}
</div>
</div>
</section>
{/* What Our Developers Deliver */}
<section className="py-16 bg-card/50">
<div className="container mx-auto px-6 lg:px-8">
<div className="text-center mb-12">
<h2 className="text-3xl md:text-4xl font-bold mb-4 text-white">
What Our Mobile Developers Deliver
</h2>
<p className="text-muted-foreground max-w-2xl mx-auto">
Comprehensive mobile solutions that exceed expectations
</p>
</div>
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
{deliverables.map((item, index) => (
<Card key={index} className="bg-background/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300 group">
<CardContent className="p-6 text-center">
<item.icon className="w-8 h-8 text-[#E5195E] mb-4 mx-auto group-hover:scale-110 transition-transform duration-300" />
<h3 className="text-lg font-semibold text-white mb-3 group-hover:text-[#E5195E] transition-colors duration-300">
{item.title}
</h3>
<p className="text-muted-foreground text-sm leading-relaxed">
{item.description}
</p>
</CardContent>
</Card>
))}
</div>
</div>
</section>
{/* Ideal Projects */}
<section className="py-16 bg-background">
<div className="container mx-auto px-6 lg:px-8">
<div className="text-center mb-12">
<h2 className="text-3xl md:text-4xl font-bold mb-4 text-white">
Ideal for Projects Like
</h2>
<p className="text-muted-foreground max-w-2xl mx-auto">
Our mobile developers excel across various industry verticals
</p>
</div>
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-4xl mx-auto">
{projectTypes.map((project, index) => (
<div key={index} className="flex items-center gap-3 p-4 rounded-lg bg-card/50 border border-white/10 hover:border-[#E5195E]/30 transition-all duration-300">
<CheckCircle className="w-5 h-5 text-[#E5195E] flex-shrink-0" />
<span className="text-white">{project}</span>
</div>
))}
</div>
</div>
</section>
{/* Testimonials */}
{/* <section className="py-16 bg-card/50">
<div className="container mx-auto px-6 lg:px-8">
<div className="text-center mb-12">
<h2 className="text-3xl md:text-4xl font-bold mb-4 text-white">
What Our Clients Say
</h2>
<p className="text-muted-foreground max-w-2xl mx-auto">
Success stories from satisfied clients
</p>
</div>
<div className="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto">
{testimonials.map((testimonial, index) => (
<Card key={index} className="bg-background/50 border-white/10">
<CardContent className="p-8">
<div className="flex gap-1 mb-4">
{[...Array(testimonial.rating)].map((_, i) => (
<Star key={i} className="w-5 h-5 text-yellow-400 fill-current" />
))}
</div>
<p className="text-muted-foreground mb-6 leading-relaxed italic">
"{testimonial.quote}"
</p>
<div className="border-t border-white/10 pt-6">
<h4 className="text-white font-semibold">{testimonial.author}</h4>
<p className="text-[#E5195E] text-sm">{testimonial.role}</p>
</div>
</CardContent>
</Card>
))}
</div>
</div>
</section> */}
{/* CTA Section */}
<section className="py-16 bg-background">
<div className="container mx-auto px-6 lg:px-8">
<div className="max-w-4xl mx-auto text-center">
<h2 className="text-3xl md:text-4xl font-bold mb-6 text-white">
Ready to Build Your Mobile App?
</h2>
<p className="text-lg text-muted-foreground mb-8 max-w-2xl mx-auto">
Connect with our expert mobile app developers and turn your vision into a powerful mobile experience.
</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"
onClick={() => navigate("/start-a-project")}
>
Get Started Today
<ArrowRight className="ml-2 w-4 h-4" />
</Button>
<Button size="lg" variant="outline" className="border-white/20 text-white hover:bg-white/10">
Schedule a Consultation
</Button>
</div>
</div>
</div>
</section>
{/* <Footer /> */}
</div>
);
};

View File

@@ -30,7 +30,7 @@ const services = [
d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"
/> />
), ),
description: "Native & cross-platform apps with pixel-perfect UIs and seamless user experiences.", description: "Native & cross-platform apps with AI-powered features, pixel-perfect UIs, and seamless user experiences.",
link: "/services/mobile-app-development" link: "/services/mobile-app-development"
}, },
{ {
@@ -185,7 +185,8 @@ export const Homepage = () => {
<div className="text-center"> <div className="text-center">
<h2 className="text-3xl sm:text-4xl font-semibold tracking-tight text-white">What We Do</h2> <h2 className="text-3xl sm:text-4xl font-semibold tracking-tight text-white">What We Do</h2>
<p className="mt-4 text-gray-400 max-w-2xl mx-auto"> <p className="mt-4 text-gray-400 max-w-2xl mx-auto">
End-to-end solutions for every stage of your product lifecycle. {/* End-to-end solutions for every stage of your product lifecycle. */}
We are the AI app development company, End-to-end solutions for every stage of your product lifecycle.
</p> </p>
</div> </div>
</motion.div> </motion.div>

View File

@@ -6,6 +6,7 @@ import { Badge } from "../components/ui/badge";
import { Card, CardContent } from "../components/ui/card"; import { Card, CardContent } from "../components/ui/card";
import { Avatar, AvatarFallback, AvatarImage } from "../components/ui/avatar"; import { Avatar, AvatarFallback, AvatarImage } from "../components/ui/avatar";
import { Separator } from "../components/ui/separator"; import { Separator } from "../components/ui/separator";
import hosptialAi from "../assets/aihospital.jpg"
import { Calendar, Clock, User, ArrowRight, Share2, Linkedin, Twitter, ExternalLink, Tag } from "lucide-react"; import { Calendar, Clock, User, ArrowRight, Share2, Linkedin, Twitter, ExternalLink, Tag } from "lucide-react";
import { ImageWithFallback } from "../components/figma/ImageWithFallback"; import { ImageWithFallback } from "../components/figma/ImageWithFallback";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
@@ -218,7 +219,8 @@ const articleData = {
title: "The Future of AI in Healthcare: Transforming Patient Care Through Technology", title: "The Future of AI in Healthcare: Transforming Patient Care Through Technology",
excerpt: "Discover how artificial intelligence is revolutionizing healthcare delivery and patient outcomes.", excerpt: "Discover how artificial intelligence is revolutionizing healthcare delivery and patient outcomes.",
readTime: "12 min read", readTime: "12 min read",
image: "https://images.unsplash.com/photo-1576091160399-112ba8d25d1f?w=400&h=250&fit=crop&auto=format", // image: "https://images.unsplash.com/photo-1576091160399-112ba8d25d1f?w=400&h=250&fit=crop&auto=format",
image: hosptialAi,
category: "Healthcare AI" category: "Healthcare AI"
}, },
{ {

View File

@@ -102,7 +102,7 @@ const HeroWithCTA = () => {
</h1> </h1>
<p className="text-lg text-gray-300 leading-relaxed max-w-lg"> <p className="text-lg text-gray-300 leading-relaxed max-w-lg">
Harness the power of machine learning to predict outcomes, automate decisions, and unlock valuable insights from your data. Harness the power of machine learning to predict outcomes, automate decisions, and unlock datadriven insights with scalable, AIpowered predictive analytics and decisionautomation solutions.
</p> </p>
</div> </div>
@@ -201,7 +201,7 @@ const HorizontalTagScroller = () => {
<span className="text-white"> We Master</span> <span className="text-white"> We Master</span>
</h2> </h2>
<p className="text-xl text-gray-300 max-w-4xl leading-relaxed"> <p className="text-xl text-gray-300 max-w-4xl leading-relaxed">
Cutting-edge machine learning methodologies that deliver accurate predictions and intelligent automation. Cuttingedge machine learning methodologies that deliver accurate predictions, intelligent automation, and scalable AIdriven analytics across highimpact use cases.
</p> </p>
</motion.div> </motion.div>
@@ -321,7 +321,7 @@ const SideBySideContentWithIcons = () => {
</h2> </h2>
<p className="text-xl text-gray-300 leading-relaxed"> <p className="text-xl text-gray-300 leading-relaxed">
Advanced ML capabilities with proven results and enterprise-grade deployment. Advanced ML capabilities with proven business outcomes, productionready AI models, and enterprisegrade deployment and MLOps for scalable, secure machine learning solutions.
</p> </p>
</motion.div> </motion.div>
@@ -421,7 +421,7 @@ const TabbedServiceDisplay = () => {
Machine Learning Services Machine Learning Services
</h2> </h2>
<p className="text-lg text-gray-300 max-w-4xl leading-relaxed"> <p className="text-lg text-gray-300 max-w-4xl leading-relaxed">
Comprehensive machine learning solutions that turn your data into competitive advantage. Comprehensive machine learning solutions that turn your data into actionable insights, predictive intelligence, and competitive advantage with scalable, AIdriven ML models.
</p> </p>
</motion.div> </motion.div>
@@ -508,7 +508,7 @@ const InlineCTA = () => {
{/* Subtitle */} {/* Subtitle */}
<p className="text-xl text-gray-300 leading-relaxed max-w-2xl"> <p className="text-xl text-gray-300 leading-relaxed max-w-2xl">
Transform your data into predictive intelligence that drives smarter business decisions and competitive advantage. Transform your data into predictive intelligence that drives smarter business decisions, AIdriven automation, and measurable competitive advantage.
</p> </p>
{/* CTA Button */} {/* CTA Button */}
@@ -588,7 +588,7 @@ const HireDevelopersSection = () => {
<span className="text-[#E5195E]">ML Specialists</span> <span className="text-[#E5195E]">ML Specialists</span>
</h2> </h2>
<p className="text-xl text-gray-300 max-w-4xl leading-relaxed"> <p className="text-xl text-gray-300 max-w-4xl leading-relaxed">
Get access to expert machine learning professionals who build predictive models that drive business value. Get access to expert machine learning professionals who design, build, and deploy predictive models that drive measurable business value and scalable AIdriven outcomes.
</p> </p>
</motion.div> </motion.div>
@@ -669,23 +669,23 @@ const HireDevelopersSection = () => {
const machineLearningFAQs = [ const machineLearningFAQs = [
{ {
question: "What types of machine learning models can you develop?", question: "What types of machine learning models can you develop?",
answer: "We develop various ML models including supervised learning (classification, regression), unsupervised learning (clustering, dimensionality reduction), reinforcement learning, and deep learning models using frameworks like TensorFlow and PyTorch." answer: "We develop various machine learning models including supervised learning (classification, regression), unsupervised learning (clustering, dimensionality reduction), reinforcement learning, and deep learning models using frameworks like TensorFlow and PyTorch."
}, },
{ {
question: "How do you ensure the accuracy of machine learning models?", question: "How do you ensure the accuracy of machine learning models?",
answer: "We use rigorous validation techniques including cross-validation, train-test-validation splits, A/B testing, and continuous monitoring. We also implement feature engineering, hyperparameter tuning, and ensemble methods to maximize accuracy." answer: "We use rigorous validation techniques including crossvalidation, traintestvalidation splits, A/B testing, and continuous monitoring. We also implement feature engineering, hyperparameter tuning, and ensemble methods to maximize machine learning model accuracy and ensure reliable, productiongrade predictions."
}, },
{ {
question: "Can you integrate ML models into our existing systems?", question: "Can you integrate ML models into our existing systems?",
answer: "Yes, we specialize in ML model deployment and integration. We can deploy models as REST APIs, batch processing systems, real-time streaming solutions, or embed them directly into your applications using various deployment strategies." answer: "Yes. We specialize in ML model deployment and integration into your existing infrastructure. We can deploy models as REST APIs, batch processing systems, realtime streaming solutions, or embed them directly into your applications using cloud, onpremise, or hybrid deployment strategies."
}, },
{ {
question: "How do you handle data quality and preprocessing?", question: "How do you handle data quality and preprocessing?",
answer: "We implement comprehensive data pipelines that include data cleaning, normalization, feature engineering, handling missing values, outlier detection, and data validation to ensure your ML models work with high-quality, reliable data." answer: "We implement comprehensive data pipelines that include data cleaning, normalization, feature engineering, handling missing values, outlier detection, and data validation to ensure your machine learning models work with highquality, reliable, and consistent data."
}, },
{ {
question: "What is your approach to MLOps and model maintenance?", question: "What is your approach to MLOps and model maintenance?",
answer: "We follow MLOps best practices including version control for models and data, automated testing, continuous integration/deployment, model monitoring, performance tracking, and automated retraining to ensure models remain accurate over time." answer: "We follow MLOps best practices including version control for models and data, automated testing, continuous integration and deployment, model monitoring, performance tracking, and automated retraining workflows to ensure models remain accurate, robust, and productionready over time."
} }
]; ];

View File

@@ -44,10 +44,10 @@ const HeroWithCTA = () => {
<section className="relative py-20 overflow-hidden bg-black"> <section className="relative py-20 overflow-hidden bg-black">
<Helmet> <Helmet>
{/* Page Title and Meta Description */} {/* Page Title and Meta Description */}
<title>Mobile App Development Services by WDI Experts</title> <title>Mobile Application Development Services | Mobile App Development Company - WDIPL</title>
<meta <meta
name="description" name="description"
content="Mobile App Development Services by WDI to build secure, scalable apps for iOS, Android, and cross-platform with expert engineering." content="WDI is a trusted Mobile App Development Company offering end-to-end Mobile Application Development Services for startups and enterprises worldwide."
/> />
{/* Canonical Link */} {/* Canonical Link */}
@@ -56,7 +56,7 @@ const HeroWithCTA = () => {
<meta property="og:title" content="Mobile App Development Services by WDI Experts" /> <meta property="og:title" content="Mobile App Development Services by WDI Experts" />
<meta <meta
property="og:description" property="og:description"
content="Mobile App Development Services by WDI to build secure, scalable apps for iOS, Android, and cross-platform with expert engineering." content="WDI is a trusted Mobile App Development Company offering end-to-end Mobile Application Development Services for startups and enterprises worldwide."
/> />
<meta property="og:url" content="https://www.wdipl.com/services" /> <meta property="og:url" content="https://www.wdipl.com/services" />
<meta property="og:type" content="website" /> <meta property="og:type" content="website" />
@@ -67,7 +67,7 @@ const HeroWithCTA = () => {
<meta name="twitter:title" content="Mobile App Development Services by WDI Experts" /> <meta name="twitter:title" content="Mobile App Development Services by WDI Experts" />
<meta <meta
name="twitter:description" name="twitter:description"
content="Mobile App Development Services by WDI to build secure, scalable apps for iOS, Android, and cross-platform with expert engineering." content="WDI is a trusted Mobile App Development Company offering end-to-end Mobile Application Development Services for startups and enterprises worldwide."
/> />
<meta name="twitter:image" content="https://www.wdipl.com/your-preview-image.jpg" /> <meta name="twitter:image" content="https://www.wdipl.com/your-preview-image.jpg" />
@@ -116,13 +116,13 @@ const HeroWithCTA = () => {
className="space-y-6" className="space-y-6"
> >
<h1 className="text-4xl font-semibold leading-tight md:text-5xl lg:text-6xl"> <h1 className="text-4xl font-semibold leading-tight md:text-5xl lg:text-6xl">
<span className="text-white">From concept to </span> <span className="text-white">Mobile App </span>
<span className="text-[#E5195E]">App Store</span> <span className="text-[#E5195E]">Development Services</span>
<span className="text-white"> in just 6 weeks.</span> <span className="text-white"> for iOS & Android.</span>
</h1> </h1>
<p className="max-w-lg text-lg leading-relaxed text-gray-300"> <p className="max-w-lg text-lg leading-relaxed text-gray-300">
Build secure, scalable, high-performance apps for iOS, Android, or cross-platform fast. Build secure, scalable, AI-powered high-performance apps for iOS, Android, or cross-platform fast.
</p> </p>
</motion.div> </motion.div>
@@ -234,7 +234,7 @@ const HorizontalTagScroller = () => {
Apps Built for High-Impact Industries Apps Built for High-Impact Industries
</h2> </h2>
<p className="max-w-4xl mx-auto text-2xl leading-relaxed text-muted-foreground"> <p className="max-w-4xl mx-auto text-2xl leading-relaxed text-muted-foreground">
Our mobile apps power industries where user trust, speed, and uptime are critical. Our AI mobile apps power industries where user trust, speed, and uptime are critical.
</p> </p>
</motion.div> </motion.div>
@@ -382,7 +382,7 @@ const SideBySideContentWithIcons = () => {
{/* Subtext */} {/* Subtext */}
<p className="text-2xl leading-relaxed text-gray-300"> <p className="text-2xl leading-relaxed text-gray-300">
Not just a dev agency. A product partner. Not just a dev agency. An AI mobile app product partner.
</p> </p>
</motion.div> </motion.div>
@@ -485,7 +485,7 @@ const TabbedServiceDisplay = () => {
Mobile App Development Services Mobile App Development Services
</h2> </h2>
<p className="max-w-4xl mx-auto text-lg leading-relaxed text-gray-300"> <p className="max-w-4xl mx-auto text-lg leading-relaxed text-gray-300">
Comprehensive mobile development services that transform your ideas into powerful, user-friendly applications across all platforms. Comprehensive AI mobile development services that transform your ideas into powerful, user-friendly applications across all platforms.
</p> </p>
</motion.div> </motion.div>
@@ -650,10 +650,10 @@ const HireDevelopersSection = () => {
> >
<h2 className="mb-8 text-4xl font-semibold lg:text-5xl"> <h2 className="mb-8 text-4xl font-semibold lg:text-5xl">
<span className="text-foreground">Hire Our </span> <span className="text-foreground">Hire Our </span>
<span className="text-[#E5195E]">Mobile App Experts</span> <span className="text-[#E5195E]">AI Mobile Application Developers</span>
</h2> </h2>
<p className="max-w-4xl mx-auto text-2xl leading-relaxed text-muted-foreground"> <p className="max-w-4xl mx-auto text-2xl leading-relaxed text-muted-foreground">
Get access to top-tier mobile developers who can bring your vision to life with cutting-edge technology and proven expertise. Get access to top-tier AI app development company experts who can bring your vision to life with AI-powered features and proven expertise.
</p> </p>
</motion.div> </motion.div>
@@ -734,35 +734,35 @@ const HireDevelopersSection = () => {
const mobileAppFAQs = [ const mobileAppFAQs = [
{ {
question: "Do you develop both iOS and Android apps?", question: "Do you develop both iOS and Android apps?",
answer: "Yes, we develop native iOS apps using Swift and Android apps using Kotlin. We also offer cross-platform solutions using React Native and Flutter for cost-effective multi-platform deployment." answer: "Yes, our AI mobile application developers create native iOS apps using Swift (including AI iOS development) and Android apps using Kotlin. We also offer cross-platform AI mobile app development using React Native and Flutter for cost-effective multi-platform deployment."
}, },
{ {
question: "What is the typical timeline for mobile app development?", question: "What is the typical timeline for mobile app development?",
answer: "Timeline varies based on complexity. Simple apps take 8-12 weeks, while complex enterprise apps can take 16-24 weeks. We provide detailed project timelines after requirements analysis." answer: "Timeline varies based on complexity. Simple AI mobile apps take 8-12 weeks, while complex enterprise apps with AI-powered features can take 16-24 weeks. We provide detailed project timelines after requirements analysis."
}, },
{ {
question: "How much does mobile app development cost?", question: "How much does mobile app development cost?",
answer: "Costs depend on features, platforms, and complexity. We offer competitive pricing with transparent estimates. Contact us for a detailed quote based on your specific requirements." answer: "Costs depend on features, platforms, and complexity for AI app development company services. We offer competitive pricing with transparent estimates. Contact us for a detailed quote based on your specific requirements."
}, },
{ {
question: "Do you help with App Store submissions?", question: "Do you help with App Store submissions?",
answer: "Yes, we handle the complete App Store submission process for both Apple App Store and Google Play Store, including app optimization, compliance, and approval assistance." answer: "Yes, we handle the complete App Store submission process for both Apple App Store and Google Play Store, including AI mobile app optimization, compliance, and approval assistance."
}, },
{ {
question: "Can you integrate third-party services and APIs?", question: "Can you integrate third-party services and APIs?",
answer: "Absolutely! We integrate various third-party services including payment gateways, social media, analytics, push notifications, maps, and custom APIs to enhance app functionality." answer: "Absolutely! Our AI mobile application developers integrate various third-party services including payment gateways, social media, analytics, push notifications, maps, and custom APIs to enhance AI-powered features."
}, },
{ {
question: "Do you provide app maintenance and updates?", question: "Do you provide app maintenance and updates?",
answer: "Yes, we offer comprehensive maintenance services including bug fixes, OS updates, security patches, feature enhancements, and performance optimization to keep your app current." answer: "Yes, our AI app development company offers comprehensive maintenance services including bug fixes, OS updates, security patches, AI-powered feature enhancements, and performance optimization to keep your app current."
}, },
{ {
question: "What about app security and data protection?", question: "What about app security and data protection?",
answer: "We implement robust security measures including data encryption, secure API communication, user authentication, and compliance with privacy regulations like GDPR and CCPA." answer: "We implement robust security measures including data encryption, secure API communication, user authentication, and compliance with privacy regulations like GDPR and CCPA for all AI mobile apps."
}, },
{ {
question: "Can you develop offline-capable mobile apps?", question: "Can you develop offline-capable mobile apps?",
answer: "Yes, we can develop apps with offline functionality using local storage, caching strategies, and data synchronization to ensure your app works even without internet connectivity." answer: "Yes, we can develop offline-capable AI mobile apps using local storage, caching strategies, and data synchronization to ensure your app works seamlessly even without internet connectivity."
} }
]; ];

View File

@@ -121,9 +121,7 @@ const NativeHeroWithCTA = () => {
</h1> </h1>
<p className="max-w-lg text-lg leading-relaxed text-gray-300"> <p className="max-w-lg text-lg leading-relaxed text-gray-300">
Building bespoke applications tailored for a single operating AI mobile application developers build bespoke iOS mobile app development and Android applications tailored for a single operating system to deliver the highest level of performance, security, and device integration with AI-powered features.
system to deliver the highest level of performance, security,
and device integration.
</p> </p>
</div> </div>
@@ -322,8 +320,7 @@ const NativeVsCrossPlatform = () => {
Native vs. Cross-Platform: When to Choose Native Native vs. Cross-Platform: When to Choose Native
</h2> </h2>
<p className="max-w-3xl mx-auto text-xl leading-relaxed text-muted-foreground"> <p className="max-w-3xl mx-auto text-xl leading-relaxed text-muted-foreground">
Native development delivers uncompromising performance and platform AI mobile app development with native mobile app development delivers uncompromising performance and platform integration for applications that demand the highest standards with AI-powered features.
integration for applications that demand the highest standards.
</p> </p>
</motion.div> </motion.div>
@@ -768,8 +765,7 @@ const NativeProcess = () => {
Precision & Excellence in Every Native Project Precision & Excellence in Every Native Project
</h2> </h2>
<p className="max-w-3xl mx-auto text-xl leading-relaxed text-gray-300"> <p className="max-w-3xl mx-auto text-xl leading-relaxed text-gray-300">
Our proven native development methodology ensures optimal Our proven native development methodology ensures optimal performance and platform integration at every stage with AI-powered features.
performance and platform integration at every stage.
</p> </p>
</motion.div> </motion.div>
@@ -878,8 +874,7 @@ const NativeCaseStudies = () => {
Android Apps That Define Industries Android Apps That Define Industries
</h2> </h2>
<p className="max-w-3xl mx-auto text-xl leading-relaxed text-muted-foreground"> <p className="max-w-3xl mx-auto text-xl leading-relaxed text-muted-foreground">
Discover how we've helped businesses succeed with powerful Android Discover how our AI mobile application developers have helped businesses succeed with powerful Android applications that leverage AI-powered features.
applications that leverage the platform's capabilities.
</p> </p>
</motion.div> </motion.div>

View File

@@ -135,13 +135,11 @@ const PWAHeroWithCTA = () => {
{/* Main Heading */} {/* Main Heading */}
<div className="space-y-6"> <div className="space-y-6">
<h1 className="text-4xl md:text-5xl lg:text-6xl font-semibold text-white leading-tight"> <h1 className="text-4xl md:text-5xl lg:text-6xl font-semibold text-white leading-tight">
Progressive Web App (PWA) Development Progressive Web App Development
</h1> </h1>
<p className="text-lg text-gray-300 leading-relaxed max-w-lg"> <p className="text-lg text-gray-300 leading-relaxed max-w-lg">
Deliver app-like experiences directly through the web browser, Deliver app-like experiences directly through the web browser with AI-powered features, combining the best of web development and AI mobile app for unparalleled reach.
combining the best of web and mobile apps for unparalleled
reach.
</p> </p>
</div> </div>
@@ -347,8 +345,7 @@ const PWABenefits = () => {
Why Choose a Progressive Web App? Why Choose a Progressive Web App?
</h2> </h2>
<p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed"> <p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
PWAs combine the best of web and mobile apps, delivering native-like PWAs combine the best of web development and AI mobile app experiences, delivering native-like performance with AI-powered design, web-based flexibility, and unparalleled reach.
experiences with web-based flexibility and reach.
</p> </p>
</motion.div> </motion.div>
@@ -543,8 +540,7 @@ const PWAProcess = () => {
Our Agile Approach to PWA Development Our Agile Approach to PWA Development
</h2> </h2>
<p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed"> <p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
Our proven methodology ensures your PWA delivers exceptional user Our proven methodology ensures your PWA delivers exceptional user experiences through AI-powered design while meeting your business objectives.
experiences while meeting your business objectives.
</p> </p>
</motion.div> </motion.div>
@@ -689,8 +685,7 @@ const PWAUseCases = () => {
When a PWA is the Right Choice for Your Business When a PWA is the Right Choice for Your Business
</h2> </h2>
<p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed"> <p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
Progressive Web Apps excel in scenarios where broad reach, Progressive Web Apps excel in scenarios where our AI app development company delivers broad reach, cost-effectiveness, and offline capabilities through AI-powered features.
cost-effectiveness, and offline capabilities are crucial.
</p> </p>
</motion.div> </motion.div>
@@ -843,8 +838,7 @@ const PWATechStack = () => {
Modern Web Technologies for Powerful PWA Experiences Modern Web Technologies for Powerful PWA Experiences
</h2> </h2>
<p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed"> <p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
We leverage cutting-edge web technologies and PWA-specific APIs to We leverage cutting-edge web development technologies and PWA-specific APIs through AI-powered design to deliver exceptional AI mobile app experiences.
deliver exceptional user experiences.
</p> </p>
</motion.div> </motion.div>
@@ -1057,9 +1051,7 @@ const PWASuccessStories = () => {
Successful Progressive Web Apps by WDI Successful Progressive Web Apps by WDI
</h2> </h2>
<p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed"> <p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
See how we've transformed businesses with PWA solutions that deliver See how our AI mobile application developers have transformed businesses with PWA solutions that deliver exceptional user experiences through AI app development company expertise, offline capabilities, and measurable results across industries.
exceptional user experiences, offline capabilities, and measurable
results across industries.
</p> </p>
</motion.div> </motion.div>
@@ -1352,8 +1344,7 @@ const PWAFinalCTA = () => {
viewport={{ once: true }} viewport={{ once: true }}
className="text-xl text-gray-300 mb-12 max-w-2xl mx-auto leading-relaxed" className="text-xl text-gray-300 mb-12 max-w-2xl mx-auto leading-relaxed"
> >
WDI helps you harness the speed, reliability, and engagement of PWAs WDI helps you harness the speed, reliability, and engagement of PWAs through AI-powered design for your audience.
for your audience.
</motion.p> </motion.p>
<motion.div <motion.div
@@ -1406,7 +1397,7 @@ export const PWADevelopment = () => {
<PWABenefits /> <PWABenefits />
</section> </section>
{/* Case Studies */} {/* Case Studies */}
<section className="bg-card"> <section className="bg-card">
<PWASuccessStories /> <PWASuccessStories />
</section> </section>
@@ -1433,7 +1424,7 @@ export const PWADevelopment = () => {
<HireDeveloperSection <HireDeveloperSection
title="Augment Your Team with Top PWA Developers" title="Augment Your Team with Top PWA Developers"
description="Build fast, installable, and offline-first Progressive Web Apps that feel like native mobile apps." description="Build fast, installable, and offline-first Progressive Web Apps through our AI app development company that feel like AI mobile apps."
buttonText="Hire PWA Developers" buttonText="Hire PWA Developers"
buttonLink="/hire-talent/pwa-developers" buttonLink="/hire-talent/pwa-developers"
developerTypes={[ developerTypes={[

View File

@@ -125,9 +125,7 @@ const ModernizationHeroWithCTA = () => {
</h1> </h1>
<p className="text-lg text-gray-300 leading-relaxed max-w-lg"> <p className="text-lg text-gray-300 leading-relaxed max-w-lg">
Revitalize your outdated software and digital products, Revitalize outdated software through AI mobile app development, transforming legacy systems into modern, scalable solutions that boost performance and agility.
transforming them into modern, scalable, and high-performing
solutions.
</p> </p>
</div> </div>
@@ -440,6 +438,11 @@ const ModernizationBenefits = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6"> <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
Why Modernize Your Existing Product? Why Modernize Your Existing Product?
</h2> </h2>
<p className="mt-4 text-gray-400 max-w-2xl mx-auto">
Modernizing with WDI unlocks AI-powered features, enhances scalability, cuts maintenance costs, and future-proofs your software for sustained enterprise growth.
</p>
</motion.div> </motion.div>
<motion.div <motion.div
@@ -537,6 +540,12 @@ const ModernizationProcess = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6"> <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
Our Strategic Phased Approach to Modernization Our Strategic Phased Approach to Modernization
</h2> </h2>
<p className="mt-4 text-gray-400 max-w-2xl mx-auto">
A structured roadmap using AI iOS development transforms legacy systems step-by-step from assessment to deployment minimizing risks while maximizing performance gains.
</p>
</motion.div> </motion.div>
<div className="relative"> <div className="relative">
@@ -702,6 +711,11 @@ const ModernizationServices = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6"> <h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
Our Comprehensive Product Modernization Capabilities Our Comprehensive Product Modernization Capabilities
</h2> </h2>
<p className="mt-4 text-gray-400 max-w-2xl mx-auto">
Mastering AI mobile app integrations and web development, we rebuild legacy systems into scalable, high-performance platforms that drive enterprise innovation.
</p>
</motion.div> </motion.div>
<motion.div <motion.div
@@ -1117,6 +1131,11 @@ const ModernizationCaseStudies = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-white mb-8"> <h2 className="text-4xl lg:text-5xl font-semibold text-white mb-8">
Successful Product Modernization Stories Successful Product Modernization Stories
</h2> </h2>
<p className="mt-4 text-gray-400 max-w-2xl mx-auto">
Legacy systems reborn through AI-powered features deliver 3-5x faster performance, seamless scalability, and millions in annual savings as proven in enterprise transformations.
</p>
</motion.div> </motion.div>
<motion.div <motion.div
@@ -1348,8 +1367,7 @@ const HireModernizationTalent = () => {
Access Expert Talent for Your Modernization Project Access Expert Talent for Your Modernization Project
</h2> </h2>
<p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed"> <p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
Hire skilled architects and developers experienced in safely Hire AI mobile application developers skilled in safely migrating and upgrading complex legacy systems for seamless, high-performance transformations.
migrating and upgrading complex legacy systems.
</p> </p>
</motion.div> </motion.div>
@@ -1556,8 +1574,7 @@ const ModernizationFinalCTA = () => {
viewport={{ once: true }} viewport={{ once: true }}
className="text-xl text-muted-foreground mb-12 max-w-2xl mx-auto leading-relaxed" className="text-xl text-muted-foreground mb-12 max-w-2xl mx-auto leading-relaxed"
> >
Don't let outdated technology hinder your growth. Transform your Don't let outdated technology hinder growth. Transform software into modern, competitive assets through AI-powered design
software into a modern, competitive asset.
</motion.p> </motion.p>
<motion.div <motion.div

View File

@@ -120,9 +120,7 @@ const SaaSHeroWithCTA = () => {
</h1> </h1>
<p className="text-lg text-gray-300 leading-relaxed max-w-lg"> <p className="text-lg text-gray-300 leading-relaxed max-w-lg">
From ideation to scalable deployment, WDI specializes in From ideation to scalable deployment, WDI specializes in engineering robust, multi-tenant SaaS products with AI-powered design that drive recurring revenue.
engineering robust, multi-tenant SaaS products that drive
recurring revenue.
</p> </p>
</div> </div>
@@ -380,6 +378,13 @@ const SaaSBenefits = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6"> <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
Why Partner with WDI for Your SaaS Product? Why Partner with WDI for Your SaaS Product?
</h2> </h2>
<p className="mt-4 text-gray-400 max-w-2xl mx-auto">
{/* End-to-end solutions for every stage of your product lifecycle. */}
Discover expert SaaS product development that scales your vision into a revenue-driving platform with WDI's proven 25+ years of excellence.
</p>
</motion.div> </motion.div>
<motion.div <motion.div
@@ -515,6 +520,11 @@ const SaaSProcess = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6"> <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
Your SaaS Journey: From Concept to Market Leader Your SaaS Journey: From Concept to Market Leader
</h2> </h2>
<p className="mt-4 text-gray-400 max-w-2xl mx-auto">
Embark on a seamless SaaS development journey with WDI, where we transform your concept into an MVP, optimize for growth, and propel you to market dominance with data-driven scaling.
</p>
</motion.div> </motion.div>
<div className="relative"> <div className="relative">
@@ -667,6 +677,12 @@ const SaaSServices = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6"> <h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
Comprehensive SaaS Engineering Capabilities Comprehensive SaaS Engineering Capabilities
</h2> </h2>
<p className="mt-4 text-gray-400 max-w-2xl mx-auto">
{/* End-to-end solutions for every stage of your product lifecycle. */}
Unlock WDI's full-spectrum SaaS engineering prowess, from ideation and MVP builds to cloud-native architecture, AI integrations, DevOps automation, and ongoing optimization for peak performance.
</p>
</motion.div> </motion.div>
<motion.div <motion.div
@@ -914,8 +930,7 @@ const SaaSTechStack = () => {
Building Resilient and High-Performing SaaS Products Building Resilient and High-Performing SaaS Products
</h2> </h2>
<p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed"> <p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
With cutting-edge technologies designed for scale, security, and With cutting-edge technologies designed for scale, security, and performance, WDI leverages AI mobile app development and AI-powered features to engineer unbreakable SaaS products with 99.99% uptime and global speed.
performance.
</p> </p>
</motion.div> </motion.div>
@@ -1147,6 +1162,13 @@ const SaaSCaseStudies = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-white mb-8"> <h2 className="text-4xl lg:text-5xl font-semibold text-white mb-8">
Successful SaaS Products Engineered by WDI Successful SaaS Products Engineered by WDI
</h2> </h2>
<p className="mt-4 text-gray-400 max-w-2xl mx-auto">
{/* End-to-end solutions for every stage of your product lifecycle. */}
Explore powerhouse SaaS platforms like AI-powered trading portals, yoga/meditation subscription apps, and fintech ecosystems, delivered with scalable architecture for startups and enterprises.
</p>
</motion.div> </motion.div>
<motion.div <motion.div
@@ -1358,8 +1380,7 @@ const HireSaaSDevelopers = () => {
Need Specialized SaaS Talent? Need Specialized SaaS Talent?
</h2> </h2>
<p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed"> <p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
Hire experienced SaaS architects, engineers, and DevOps specialists Hire experienced SaaS architects, AI mobile application developers, and DevOps specialists from WDI to accelerate your AI mobile app development and iOS mobile app development product timelines.
to accelerate your product development.
</p> </p>
</motion.div> </motion.div>
@@ -1563,8 +1584,7 @@ const SaaSFinalCTA = () => {
viewport={{ once: true }} viewport={{ once: true }}
className="text-xl text-muted-foreground mb-12 max-w-2xl mx-auto leading-relaxed" className="text-xl text-muted-foreground mb-12 max-w-2xl mx-auto leading-relaxed"
> >
Partner with our experts to build a scalable, secure, and Partner with our AI mobile application developers and AI app development company experts to build a scalable, secure AI mobile app with AI-powered features that captivates your market.
user-centric SaaS solution that captivates your market.
</motion.p> </motion.p>
<motion.div <motion.div

View File

@@ -106,8 +106,7 @@ const HeroWithCTA = () => {
</h1> </h1>
<p className="text-lg text-gray-300 leading-relaxed max-w-lg"> <p className="text-lg text-gray-300 leading-relaxed max-w-lg">
Build robust, scalable enterprise software systems with modern Build robust, scalable enterprise systems with AI app development company expertise and modern practices like microservices, CI/CD pipelines, and cloud-native architecture.
engineering practices and proven methodologies.
</p> </p>
</div> </div>
@@ -227,8 +226,7 @@ const HorizontalTagScroller = () => {
<span className="text-foreground"> We Follow</span> <span className="text-foreground"> We Follow</span>
</h2> </h2>
<p className="text-2xl text-muted-foreground max-w-4xl mx-auto leading-relaxed"> <p className="text-2xl text-muted-foreground max-w-4xl mx-auto leading-relaxed">
Industry-leading methodologies that ensure code quality, Industry-leading methodologies like DevOps, microservices, and CI/CD pipelines enhanced by AI-powered features ensure code quality, scalability, and maintainability.
scalability, and maintainability.
</p> </p>
</motion.div> </motion.div>
@@ -355,7 +353,8 @@ const SideBySideContentWithIcons = () => {
</h2> </h2>
<p className="text-2xl text-gray-300 leading-relaxed"> <p className="text-2xl text-gray-300 leading-relaxed">
Engineering excellence that stands the test of time.
WDI delivers AI mobile app development excellence with battle-tested enterprise architectures that ensure long-term scalability, zero-downtime deployments, and future-proof innovation.
</p> </p>
</motion.div> </motion.div>
@@ -461,8 +460,7 @@ const TabbedServiceDisplay = () => {
Software Engineering Services Software Engineering Services
</h2> </h2>
<p className="text-lg text-gray-300 max-w-4xl mx-auto leading-relaxed"> <p className="text-lg text-gray-300 max-w-4xl mx-auto leading-relaxed">
Comprehensive software engineering solutions designed for Comprehensive AI-powered design solutions designed for enterprise-grade performance, reliability, and seamless scalability across complex business ecosystems.
enterprise-grade performance and reliability.
</p> </p>
</motion.div> </motion.div>
@@ -553,8 +551,7 @@ const InlineCTA = () => {
{/* Subtitle */} {/* Subtitle */}
<p className="text-xl text-muted-foreground leading-relaxed max-w-2xl mx-auto"> <p className="text-xl text-muted-foreground leading-relaxed max-w-2xl mx-auto">
Robust, scalable systems engineered with modern practices and Robust, scalable systems engineered with AI mobile application developers and modern practices for unmatched performance.
proven methodologies.
</p> </p>
{/* CTA Button */} {/* CTA Button */}
@@ -637,8 +634,7 @@ const HireDevelopersSection = () => {
<span className="text-[#E5195E]">Engineering Experts</span> <span className="text-[#E5195E]">Engineering Experts</span>
</h2> </h2>
<p className="text-2xl text-muted-foreground max-w-4xl mx-auto leading-relaxed"> <p className="text-2xl text-muted-foreground max-w-4xl mx-auto leading-relaxed">
Get access to senior software engineers who build robust, scalable Get access to WDI's senior AI-powered features engineers who build robust, scalable enterprise systems with cutting-edge expertise.
enterprise systems.
</p> </p>
</motion.div> </motion.div>
@@ -728,7 +724,7 @@ const softwareEngineeringFAQs = [
{ {
question: "What software engineering methodologies do you follow?", question: "What software engineering methodologies do you follow?",
answer: answer:
"We follow modern engineering practices including Agile/Scrum, DevOps, Test-Driven Development, continuous integration/deployment, and microservices architecture to ensure high-quality, maintainable software.", "We follow modern engineering practices including Agile/Scrum, DevOps, Test-Driven Development, continuous integration/deployment, and microservices architecture enhanced by AI-powered features to ensure high-quality, maintainable software.",
}, },
{ {
question: "How do you ensure code quality and maintainability?", question: "How do you ensure code quality and maintainability?",
@@ -743,7 +739,7 @@ const softwareEngineeringFAQs = [
{ {
question: "What is your approach to system architecture?", question: "What is your approach to system architecture?",
answer: answer:
"We design scalable, modular architectures using microservices, API-first approaches, cloud-native patterns, and modern frameworks that can evolve with your business requirements.", "We design scalable, modular architectures using microservices, API-first approaches, cloud-native patterns, and modern frameworks that evolve with your business requirements.",
}, },
{ {
question: "Do you provide ongoing software maintenance?", question: "Do you provide ongoing software maintenance?",
@@ -765,7 +761,7 @@ export function SoftwareEngineering() {
<HireDevelopersSection /> <HireDevelopersSection />
<FAQSection <FAQSection
title="Software Engineering Questions" title="Software Engineering Questions"
subtitle="Get answers to common questions about our software engineering services." subtitle="Get answers to common questions about our AI app development company software engineering services."
faqs={softwareEngineeringFAQs} faqs={softwareEngineeringFAQs}
/> />
{/* <Footer /> */} {/* <Footer /> */}

View File

@@ -126,9 +126,7 @@ const DevOpsHeroWithCTA = () => {
</h1> </h1>
<p className="text-lg text-gray-300 leading-relaxed max-w-lg"> <p className="text-lg text-gray-300 leading-relaxed max-w-lg">
Designing robust, scalable system architectures and implementing Designing AI-powered, robust, scalable system architectures and implementing efficient DevOps practices for continuous delivery and operational excellence.
efficient DevOps practices for continuous delivery and
operational excellence.
</p> </p>
</div> </div>
@@ -510,6 +508,11 @@ const DevOpsBenefits = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6"> <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
The Foundation for High-Performance Software The Foundation for High-Performance Software
</h2> </h2>
<p className="mt-4 text-gray-400 max-w-2xl mx-auto">
Harnessing enterprise-grade technologies and scalable architectures, WDI delivers the resilient core infrastructure essential for high-performance applications driving enterprise innovation.
</p>
</motion.div> </motion.div>
<motion.div <motion.div
@@ -645,6 +648,11 @@ const DevOpsProcess = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6"> <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
Our Approach to Building and Optimizing Your Digital Infrastructure Our Approach to Building and Optimizing Your Digital Infrastructure
</h2> </h2>
<p className="mt-4 text-gray-400 max-w-2xl mx-auto">
WDI's AI iOS development methodology crafts resilient, scalable digital foundations through agile DevOps and web development expertise, ensuring optimal performance and future-ready operations.
</p>
</motion.div> </motion.div>
<div className="relative"> <div className="relative">
@@ -810,6 +818,11 @@ const DevOpsServices = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6"> <h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
Our Specialized Expertise Our Specialized Expertise
</h2> </h2>
<p className="mt-4 text-gray-400 max-w-2xl mx-auto">
WDI excels in AI mobile app development and iOS mobile app development, delivering scalable enterprise solutions with cutting-edge expertise.
</p>
</motion.div> </motion.div>
<motion.div <motion.div
@@ -1016,8 +1029,7 @@ const DevOpsTechStack = () => {
Leveraging Industry-Leading Tools Leveraging Industry-Leading Tools
</h2> </h2>
<p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed"> <p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
For robust and automated infrastructure management. WDI uses top AI-powered design platforms for automated infrastructure management, ensuring robust efficiency and seamless scalability. </p>
</p>
</motion.div> </motion.div>
{/* Cloud Platforms */} {/* Cloud Platforms */}
@@ -1306,6 +1318,11 @@ const DevOpsCaseStudies = () => {
Empowering Businesses with Resilient Infrastructure & Agile Empowering Businesses with Resilient Infrastructure & Agile
Operations Operations
</h2> </h2>
<p className="mt-4 text-gray-400 max-w-2xl mx-auto">
WDI delivers AI mobile app development infrastructure and agile operations that ensure resilient performance, rapid scalability, and seamless enterprise agility.
</p>
</motion.div> </motion.div>
<motion.div <motion.div
@@ -1538,8 +1555,7 @@ const HireDevOpsTalent = () => {
Need Specialized DevOps or Cloud Architecture Talent? Need Specialized DevOps or Cloud Architecture Talent?
</h2> </h2>
<p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed"> <p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
Access our highly skilled engineers proficient in cloud platforms, Access WDI's AI mobile application developers. highly skilled engineers proficient in AI iOS development, cloud platforms, CI/CD pipelines, and system automation for enterprise excellence.
CI/CD, and system automation.
</p> </p>
</motion.div> </motion.div>
@@ -1743,8 +1759,7 @@ const DevOpsFinalCTA = () => {
viewport={{ once: true }} viewport={{ once: true }}
className="text-xl text-muted-foreground mb-12 max-w-2xl mx-auto leading-relaxed" className="text-xl text-muted-foreground mb-12 max-w-2xl mx-auto leading-relaxed"
> >
Partner with WDI to build a secure, scalable, and efficient digital Partner with WDI for AI mobile app development to build secure, scalable foundations that ensure seamless enterprise operations.
foundation for your business.
</motion.p> </motion.p>
<motion.div <motion.div

View File

@@ -125,9 +125,7 @@ const IntegrationsHeroWithCTA = () => {
</h1> </h1>
<p className="text-lg text-gray-300 leading-relaxed max-w-lg"> <p className="text-lg text-gray-300 leading-relaxed max-w-lg">
Connecting your disparate software systems and applications for Enable AI-powered features to connect disparate systems, ensuring unified data flow, automated workflows, and enhanced app functionality.
unified data flow, automated workflows, and enhanced
functionality.
</p> </p>
</div> </div>
@@ -482,6 +480,11 @@ const IntegrationBenefits = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6"> <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
Why Integrate Your Systems with WDI? Why Integrate Your Systems with WDI?
</h2> </h2>
<p className="mt-4 text-gray-400 max-w-2xl mx-auto">
WDI streamlines your operations with AI-powered features, breaking down silos for real-time data flow, smarter decisions, and scalable growth.
</p>
</motion.div> </motion.div>
<motion.div <motion.div
@@ -617,6 +620,11 @@ const IntegrationProcess = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6"> <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
Our Strategic Approach to Seamless Integration Our Strategic Approach to Seamless Integration
</h2> </h2>
<p className="mt-4 text-gray-400 max-w-2xl mx-auto">
WDI employs AI iOS development techniques to unify systems effortlessly, enabling smooth data exchange and automated processes for peak operational efficiency.
</p>
</motion.div> </motion.div>
<div className="relative"> <div className="relative">
@@ -635,14 +643,12 @@ const IntegrationProcess = () => {
whileInView={{ opacity: 1, x: 0 }} whileInView={{ opacity: 1, x: 0 }}
transition={{ duration: 0.8, delay: index * 0.2 }} transition={{ duration: 0.8, delay: index * 0.2 }}
viewport={{ once: true }} viewport={{ once: true }}
className={`flex items-center ${ className={`flex items-center ${isEven ? "lg:flex-row" : "lg:flex-row-reverse"
isEven ? "lg:flex-row" : "lg:flex-row-reverse" } flex-col lg:gap-16 gap-8`}
} flex-col lg:gap-16 gap-8`}
> >
<div <div
className={`flex-1 ${ className={`flex-1 ${isEven ? "lg:text-right" : "lg:text-left"
isEven ? "lg:text-right" : "lg:text-left" } text-center 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="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"> <div className="flex items-center gap-4 mb-4 justify-center lg:justify-start">
@@ -782,6 +788,11 @@ const IntegrationServices = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6"> <h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
Our Comprehensive Integration Capabilities Our Comprehensive Integration Capabilities
</h2> </h2>
<p className="mt-4 text-gray-400 max-w-2xl mx-auto">
WDI's web development expertise powers seamless API connections and AI mobile app integrations, creating unified ecosystems that boost efficiency and scalability.
</p>
</motion.div> </motion.div>
<motion.div <motion.div
@@ -956,7 +967,7 @@ const IntegrationTechStack = () => {
Utilizing Robust Protocols and Platforms Utilizing Robust Protocols and Platforms
</h2> </h2>
<p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed"> <p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
For reliable system connectivity and seamless data exchange. WDI leverages AI-powered design protocols and platforms for reliable system connectivity, ensuring seamless data exchange and uninterrupted enterprise workflows.
</p> </p>
</motion.div> </motion.div>
@@ -1177,6 +1188,11 @@ const IntegrationCaseStudies = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-white mb-8"> <h2 className="text-4xl lg:text-5xl font-semibold text-white mb-8">
Systems That Speak: Our Integration Success Stories Systems That Speak: Our Integration Success Stories
</h2> </h2>
<p className="mt-4 text-gray-400 max-w-2xl mx-auto">
WDI's AI-powered features bring systems together seamlessly, powering real-time data sync and automated workflows that transform enterprise operations.
</p>
</motion.div> </motion.div>
<motion.div <motion.div
@@ -1408,8 +1424,7 @@ const HireIntegrationTalent = () => {
Need Expertise in System Integration? Need Expertise in System Integration?
</h2> </h2>
<p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed"> <p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
Hire our developers experienced in API development, middleware, and Hire WDI's AI mobile application developers experienced in API development, middleware, and connecting diverse software platforms for seamless enterprise integration.
connecting diverse software platforms.
</p> </p>
</motion.div> </motion.div>
@@ -1613,8 +1628,7 @@ const IntegrationFinalCTA = () => {
viewport={{ once: true }} viewport={{ once: true }}
className="text-xl text-muted-foreground mb-12 max-w-2xl mx-auto leading-relaxed" className="text-xl text-muted-foreground mb-12 max-w-2xl mx-auto leading-relaxed"
> >
Achieve unparalleled efficiency and data consistency by seamlessly Achieve unparalleled efficiency and data consistency through AI app development company solutions that seamlessly integrate your essential software systems.
integrating your essential software systems.
</motion.p> </motion.p>
<motion.div <motion.div
@@ -1667,7 +1681,7 @@ export const ThirdPartyIntegrations = () => {
<IntegrationBenefits /> <IntegrationBenefits />
</section> </section>
{/* Case Studies */} {/* Case Studies */}
<section className="bg-background"> <section className="bg-background">
<IntegrationCaseStudies /> <IntegrationCaseStudies />
</section> </section>

View File

@@ -120,8 +120,7 @@ const UIUXHeroWithCTA = () => {
</h1> </h1>
<p className="text-lg text-gray-300 leading-relaxed max-w-lg"> <p className="text-lg text-gray-300 leading-relaxed max-w-lg">
Crafting visually stunning and highly intuitive user interfaces Crafting visually stunning and highly intuitive interfaces with AI-powered design that engage users and drive business objectives.
and experiences that engage users and drive business objectives.
</p> </p>
</div> </div>
@@ -488,6 +487,11 @@ const UIUXBenefits = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6"> <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
Why User-Centric Design Matters Why User-Centric Design Matters
</h2> </h2>
<p className="mt-4 text-gray-400 max-w-2xl mx-auto">
User-centric AI-powered design boosts satisfaction, cuts development costs, and drives higher engagement by prioritizing intuitive experiences over aesthetics.
</p>
</motion.div> </motion.div>
<motion.div <motion.div
@@ -579,6 +583,11 @@ const UIUXDesignProcess = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6"> <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
Our Collaborative & Iterative Design Process Our Collaborative & Iterative Design Process
</h2> </h2>
<p className="mt-4 text-gray-400 max-w-2xl mx-auto">
Team-driven cycles of prototyping, testing, and refinement with AI-powered design ensure user-focused outcomes and continuous improvement at every stage.
</p>
</motion.div> </motion.div>
<div className="relative"> <div className="relative">
@@ -738,6 +747,11 @@ const UIUXDesignServices = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6"> <h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
Our Comprehensive UI/UX Design Capabilities Our Comprehensive UI/UX Design Capabilities
</h2> </h2>
<p className="mt-4 text-gray-400 max-w-2xl mx-auto">
Full-spectrum AI-powered design expertise from user research and wireframing to prototyping, testing, and scalable design systems that drive engagement and conversions.
</p>
</motion.div> </motion.div>
<motion.div <motion.div
@@ -892,8 +906,7 @@ const DesignToolsMethodologies = () => {
Design Tools & Methodologies Design Tools & Methodologies
</h2> </h2>
<p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed"> <p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
Leveraging industry-standard tools and methodologies for impactful Leveraging industry-standard tools like Figma, Sketch, and Adobe XD alongside AI-powered design methodologies for impactful, scalable user experiences.
design.
</p> </p>
</motion.div> </motion.div>
@@ -1123,8 +1136,7 @@ const HireUIUXDesigners = () => {
Hire World-Class UI/UX Designers Hire World-Class UI/UX Designers
</h2> </h2>
<p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed"> <p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
Access our pool of talented designers specializing in intuitive Access our pool of talented AI-powered design specialists who excel in intuitive interfaces, user research, and strategic UX that drives results.
interfaces, user research, and strategic UX.
</p> </p>
</motion.div> </motion.div>
@@ -1327,8 +1339,7 @@ const UIUXFinalCTA = () => {
viewport={{ once: true }} viewport={{ once: true }}
className="text-xl text-muted-foreground mb-12 max-w-2xl mx-auto leading-relaxed" className="text-xl text-muted-foreground mb-12 max-w-2xl mx-auto leading-relaxed"
> >
Partner with WDI for compelling UI/UX design that captures attention Partner with WDI for compelling AI-powered design that captures attention and drives meaningful interactions.
and drives meaningful interactions.
</motion.p> </motion.p>
<motion.div <motion.div

View File

@@ -6,7 +6,8 @@ import {
Brain, Brain,
Compass, Compass,
DollarSign, DollarSign,
Eye, FileText, Eye,
FileText,
GitBranch, GitBranch,
GitPullRequest, GitPullRequest,
Grid, Grid,
@@ -27,12 +28,17 @@ import {
UserCheck, UserCheck,
UserPlus, UserPlus,
Users, Users,
Video Video,
} from "lucide-react"; } from "lucide-react";
import { ImageWithFallback } from "../components/figma/ImageWithFallback"; import { ImageWithFallback } from "../components/figma/ImageWithFallback";
import { Footer } from "../components/Footer"; import { Footer } from "../components/Footer";
import { Navigation } from "../components/Navigation"; import { Navigation } from "../components/Navigation";
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "../components/ui/accordion"; import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from "../components/ui/accordion";
import { Badge } from "../components/ui/badge"; import { Badge } from "../components/ui/badge";
import { Button } from "../components/ui/button"; import { Button } from "../components/ui/button";
import { Card, CardContent } from "../components/ui/card"; import { Card, CardContent } from "../components/ui/card";
@@ -54,26 +60,41 @@ const ResearchHeroWithCTA = () => {
/> />
{/* Canonical Link */} {/* Canonical Link */}
<link rel="canonical" href="https://www.wdipl.com/services/user-research-testing" /> <link
rel="canonical"
href="https://www.wdipl.com/services/user-research-testing"
/>
{/* Open Graph Tags (for Facebook, LinkedIn) */} {/* Open Graph Tags (for Facebook, LinkedIn) */}
<meta property="og:title" content="User Research & Testing | Software Development Insights" /> <meta
property="og:title"
content="User Research & Testing | Software Development Insights"
/>
<meta <meta
property="og:description" property="og:description"
content="WDI delivers user research that fuels smarter software development. Understand behavior and needs to create user-centric digital experiences." 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:url" content="https://www.wdipl.com/services" />
<meta property="og:type" content="website" /> <meta property="og:type" content="website" />
<meta property="og:image" content="https://www.wdipl.com/your-preview-image.jpg" /> <meta
property="og:image"
content="https://www.wdipl.com/your-preview-image.jpg"
/>
{/* Twitter Card Tags */} {/* Twitter Card Tags */}
<meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="User Research & Testing | Software Development Insights" /> <meta
name="twitter:title"
content="User Research & Testing | Software Development Insights"
/>
<meta <meta
name="twitter:description" name="twitter:description"
content="WDI delivers user research that fuels smarter software development. Understand behavior and needs to create user-centric digital experiences." 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" /> <meta
name="twitter:image"
content="https://www.wdipl.com/your-preview-image.jpg"
/>
{/* Social Profiles (using JSON-LD Schema) */} {/* Social Profiles (using JSON-LD Schema) */}
<script type="application/ld+json"> <script type="application/ld+json">
@@ -106,7 +127,9 @@ const ResearchHeroWithCTA = () => {
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6 }} transition={{ duration: 0.6 }}
> >
<span className="text-white/70 text-sm font-medium">Design & Experience</span> <span className="text-white/70 text-sm font-medium">
Design & Experience
</span>
</motion.div> </motion.div>
{/* Main Heading */} {/* Main Heading */}
@@ -116,7 +139,9 @@ const ResearchHeroWithCTA = () => {
</h1> </h1>
<p className="text-lg text-gray-300 leading-relaxed max-w-lg"> <p className="text-lg text-gray-300 leading-relaxed max-w-lg">
Gaining deep insights into user behaviors, needs, and pain points to inform design decisions and build truly user-centric products. Gain deep insights into user behaviors, needs, and pain points
through user research and user testing to inform AIpowered
design decisions and build truly usercentric AI mobile apps.
</p> </p>
</div> </div>
@@ -127,8 +152,9 @@ const ResearchHeroWithCTA = () => {
transition={{ duration: 0.8, delay: 0.3 }} transition={{ duration: 0.8, delay: 0.3 }}
className="flex flex-col sm:flex-row gap-4" className="flex flex-col sm:flex-row gap-4"
> >
<ShimmerButton className="text-lg px-8 py-4" <ShimmerButton
onClick={() => navigate("/start-a-project")} className="text-lg px-8 py-4"
onClick={() => navigate("/start-a-project")}
> >
<div className="inline-flex items-center gap-2"> <div className="inline-flex items-center gap-2">
<Users className="w-5 h-5 flex-shrink-0" /> <Users className="w-5 h-5 flex-shrink-0" />
@@ -184,7 +210,9 @@ const ResearchHeroWithCTA = () => {
<div className="w-3 h-3 bg-yellow-500 rounded-full"></div> <div className="w-3 h-3 bg-yellow-500 rounded-full"></div>
<div className="w-3 h-3 bg-green-500 rounded-full"></div> <div className="w-3 h-3 bg-green-500 rounded-full"></div>
</div> </div>
<div className="text-xs text-gray-400">User Testing Session</div> <div className="text-xs text-gray-400">
User Testing Session
</div>
</motion.div> </motion.div>
{/* User Interface Being Tested */} {/* User Interface Being Tested */}
@@ -196,7 +224,9 @@ const ResearchHeroWithCTA = () => {
transition={{ duration: 0.6, delay: 1.2 }} transition={{ duration: 0.6, delay: 1.2 }}
className="h-10 bg-gradient-to-r from-accent to-blue-500 rounded-lg flex items-center px-4" className="h-10 bg-gradient-to-r from-accent to-blue-500 rounded-lg flex items-center px-4"
> >
<div className="text-white text-sm font-medium">Product Interface</div> <div className="text-white text-sm font-medium">
Product Interface
</div>
</motion.div> </motion.div>
{/* Interactive Elements Being Tested */} {/* Interactive Elements Being Tested */}
@@ -211,11 +241,16 @@ const ResearchHeroWithCTA = () => {
<Search className="w-3 h-3 text-white" /> <Search className="w-3 h-3 text-white" />
</div> </div>
<div className="flex-1"> <div className="flex-1">
<div className="text-white text-xs">Search Function</div> <div className="text-white text-xs">
Search Function
</div>
</div> </div>
{/* Click indicator */} {/* Click indicator */}
<motion.div <motion.div
animate={{ scale: [1, 1.5, 1], opacity: [1, 0.5, 1] }} animate={{
scale: [1, 1.5, 1],
opacity: [1, 0.5, 1],
}}
transition={{ duration: 2, repeat: Infinity }} transition={{ duration: 2, repeat: Infinity }}
className="absolute -top-1 -right-1 w-3 h-3 bg-accent rounded-full" className="absolute -top-1 -right-1 w-3 h-3 bg-accent rounded-full"
></motion.div> ></motion.div>
@@ -231,7 +266,9 @@ const ResearchHeroWithCTA = () => {
<Settings className="w-3 h-3 text-white" /> <Settings className="w-3 h-3 text-white" />
</div> </div>
<div className="flex-1"> <div className="flex-1">
<div className="text-white text-xs">User Settings</div> <div className="text-white text-xs">
User Settings
</div>
</div> </div>
</motion.div> </motion.div>
@@ -307,14 +344,18 @@ const ResearchHeroWithCTA = () => {
transition={{ duration: 4, repeat: Infinity }} transition={{ duration: 4, repeat: Infinity }}
className="w-16 h-16 bg-yellow-300 rounded-lg shadow-lg p-2 text-gray-800 text-xs flex items-center justify-center font-medium transform rotate-2" className="w-16 h-16 bg-yellow-300 rounded-lg shadow-lg p-2 text-gray-800 text-xs flex items-center justify-center font-medium transform rotate-2"
> >
User<br/>Feedback User
<br />
Feedback
</motion.div> </motion.div>
<motion.div <motion.div
animate={{ rotate: [-3, 3, -3] }} animate={{ rotate: [-3, 3, -3] }}
transition={{ duration: 4, repeat: Infinity, delay: 1 }} transition={{ duration: 4, repeat: Infinity, delay: 1 }}
className="absolute -top-2 -right-2 w-12 h-12 bg-pink-300 rounded-lg shadow-lg p-2 text-gray-800 text-xs flex items-center justify-center font-medium transform -rotate-3" className="absolute -top-2 -right-2 w-12 h-12 bg-pink-300 rounded-lg shadow-lg p-2 text-gray-800 text-xs flex items-center justify-center font-medium transform -rotate-3"
> >
Pain<br/>Point Pain
<br />
Point
</motion.div> </motion.div>
<motion.div <motion.div
animate={{ rotate: [1, -1, 1] }} animate={{ rotate: [1, -1, 1] }}
@@ -334,15 +375,24 @@ const ResearchHeroWithCTA = () => {
transition={{ duration: 0.8, delay: 2.6 }} transition={{ duration: 0.8, delay: 2.6 }}
className="flex justify-center gap-4 flex-wrap mt-8" className="flex justify-center gap-4 flex-wrap mt-8"
> >
<Badge variant="secondary" className="bg-blue-500/20 text-blue-300 border-blue-500/30"> <Badge
variant="secondary"
className="bg-blue-500/20 text-blue-300 border-blue-500/30"
>
<Eye className="w-3 h-3 mr-1" /> <Eye className="w-3 h-3 mr-1" />
Observational Observational
</Badge> </Badge>
<Badge variant="secondary" className="bg-green-500/20 text-green-300 border-green-500/30"> <Badge
variant="secondary"
className="bg-green-500/20 text-green-300 border-green-500/30"
>
<BarChart3 className="w-3 h-3 mr-1" /> <BarChart3 className="w-3 h-3 mr-1" />
Data-Driven Data-Driven
</Badge> </Badge>
<Badge variant="secondary" className="bg-purple-500/20 text-purple-300 border-purple-500/30"> <Badge
variant="secondary"
className="bg-purple-500/20 text-purple-300 border-purple-500/30"
>
<Users className="w-3 h-3 mr-1" /> <Users className="w-3 h-3 mr-1" />
User-Centric User-Centric
</Badge> </Badge>
@@ -361,33 +411,34 @@ const ResearchBenefits = () => {
{ {
icon: Shield, icon: Shield,
title: "Reduce Development Risk", title: "Reduce Development Risk",
description: "Build what users actually need, not what you assume." description: "Build what users actually need, not what you assume.",
}, },
{ {
icon: Heart, icon: Heart,
title: "Increase User Satisfaction", title: "Increase User Satisfaction",
description: "Create intuitive and enjoyable experiences." description: "Create intuitive and enjoyable experiences.",
}, },
{ {
icon: TrendingUp, icon: TrendingUp,
title: "Improve Conversion Rates", title: "Improve Conversion Rates",
description: "Optimize flows based on real user interactions." description: "Optimize flows based on real user interactions.",
}, },
{ {
icon: DollarSign, icon: DollarSign,
title: "Save Costs", title: "Save Costs",
description: "Identify usability issues early, avoiding expensive reworks." description:
"Identify usability issues early, avoiding expensive reworks.",
}, },
{ {
icon: Target, icon: Target,
title: "Gain Competitive Edge", title: "Gain Competitive Edge",
description: "Develop products that truly stand out in the market." description: "Develop products that truly stand out in the market.",
}, },
{ {
icon: Brain, icon: Brain,
title: "Informed Decision Making", title: "Informed Decision Making",
description: "Data-driven insights to guide product strategy." description: "Data-driven insights to guide product strategy.",
} },
]; ];
return ( return (
@@ -403,6 +454,12 @@ const ResearchBenefits = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6"> <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
Why Invest in Understanding Your Users? Why Invest in Understanding Your Users?
</h2> </h2>
<p className="mt-4 text-gray-400 max-w-2xl mx-auto">
Because deep user research leads to AIpowered design that truly
fits how people behave, reduces costly redesigns, and drives higher
engagement and retention across your AI mobile app, web development,
and iOS mobile app development products.
</p>
</motion.div> </motion.div>
<motion.div <motion.div
@@ -451,39 +508,46 @@ const ResearchProcess = () => {
const steps = [ const steps = [
{ {
title: "Define Objectives", title: "Define Objectives",
description: "Clearly establish research goals and key questions to be answered.", description:
icon: Target "Clearly establish research goals and key questions to be answered.",
icon: Target,
}, },
{ {
title: "Select Methodology", title: "Select Methodology",
description: "Choose the most appropriate research methods for your specific needs.", description:
icon: Compass "Choose the most appropriate research methods for your specific needs.",
icon: Compass,
}, },
{ {
title: "Recruit Participants", title: "Recruit Participants",
description: "Find and screen participants that represent your target user base.", description:
icon: Users "Find and screen participants that represent your target user base.",
icon: Users,
}, },
{ {
title: "Conduct Research", title: "Conduct Research",
description: "Execute research sessions using proven methodologies and best practices.", description:
icon: Search "Execute research sessions using proven methodologies and best practices.",
icon: Search,
}, },
{ {
title: "Analyze Findings", title: "Analyze Findings",
description: "Process and synthesize data to extract meaningful insights and patterns.", description:
icon: BarChart3 "Process and synthesize data to extract meaningful insights and patterns.",
icon: BarChart3,
}, },
{ {
title: "Deliver Actionable Insights", title: "Deliver Actionable Insights",
description: "Present findings in clear, actionable recommendations for your team.", description:
icon: FileText "Present findings in clear, actionable recommendations for your team.",
icon: FileText,
}, },
{ {
title: "Test & Iterate", title: "Test & Iterate",
description: "Validate improvements and continue refining based on ongoing feedback.", description:
icon: RefreshCcw "Validate improvements and continue refining based on ongoing feedback.",
} icon: RefreshCcw,
},
]; ];
return ( return (
@@ -499,6 +563,11 @@ const ResearchProcess = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6"> <h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
Our Methodical Approach to Uncovering User Insights Our Methodical Approach to Uncovering User Insights
</h2> </h2>
<p className="mt-4 text-gray-400 max-w-2xl mx-auto">
A structured, researchdriven process that combines user testing
with targeted activities to uncover deep insights for your web
development products.
</p>
</motion.div> </motion.div>
<div className="relative"> <div className="relative">
@@ -517,15 +586,19 @@ const ResearchProcess = () => {
whileInView={{ opacity: 1, x: 0 }} whileInView={{ opacity: 1, x: 0 }}
transition={{ duration: 0.8, delay: index * 0.2 }} transition={{ duration: 0.8, delay: index * 0.2 }}
viewport={{ once: true }} 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`}> <div
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="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"> <div className="flex items-center gap-4 mb-4 justify-center lg:justify-start">
<div className="w-12 h-12 bg-accent/20 rounded-xl flex items-center justify-center"> <div className="w-12 h-12 bg-accent/20 rounded-xl flex items-center justify-center">
<IconComponent className="w-6 h-6 text-accent" /> <IconComponent className="w-6 h-6 text-accent" />
</div> </div>
<div className="text-2xl font-bold text-accent">0{index + 1}</div> <div className="text-2xl font-bold text-accent">
0{index + 1}
</div>
</div> </div>
<h3 className="text-2xl font-semibold text-white mb-4"> <h3 className="text-2xl font-semibold text-white mb-4">
{step.title} {step.title}
@@ -557,50 +630,90 @@ const ResearchServices = () => {
title: "Qualitative Research", title: "Qualitative Research",
description: "User interviews, focus groups, ethnographic studies.", description: "User interviews, focus groups, ethnographic studies.",
icon: MessageCircle, icon: MessageCircle,
features: ["User Interviews", "Focus Groups", "Ethnographic Studies", "Contextual Inquiries"] features: [
"User Interviews",
"Focus Groups",
"Ethnographic Studies",
"Contextual Inquiries",
],
}, },
{ {
title: "Quantitative Research", title: "Quantitative Research",
description: "Surveys, analytics review, A/B testing setup.", description: "Surveys, analytics review, A/B testing setup.",
icon: BarChart3, icon: BarChart3,
features: ["User Surveys", "Analytics Analysis", "A/B Testing", "Statistical Analysis"] features: [
"User Surveys",
"Analytics Analysis",
"A/B Testing",
"Statistical Analysis",
],
}, },
{ {
title: "Usability Testing", title: "Usability Testing",
description: "Moderated and unmoderated testing with real users.", description: "Moderated and unmoderated testing with real users.",
icon: TestTube, icon: TestTube,
features: ["Moderated Testing", "Unmoderated Testing", "Task Analysis", "Performance Metrics"] features: [
"Moderated Testing",
"Unmoderated Testing",
"Task Analysis",
"Performance Metrics",
],
}, },
{ {
title: "Persona Development", title: "Persona Development",
description: "Creating archetypes of your key user segments.", description: "Creating archetypes of your key user segments.",
icon: UserCheck, icon: UserCheck,
features: ["User Personas", "Journey Mapping", "Behavioral Patterns", "Segment Analysis"] features: [
"User Personas",
"Journey Mapping",
"Behavioral Patterns",
"Segment Analysis",
],
}, },
{ {
title: "User Journey Mapping", title: "User Journey Mapping",
description: "Visualizing the complete user experience.", description: "Visualizing the complete user experience.",
icon: Route, icon: Route,
features: ["Experience Mapping", "Touchpoint Analysis", "Pain Point Identification", "Opportunity Areas"] features: [
"Experience Mapping",
"Touchpoint Analysis",
"Pain Point Identification",
"Opportunity Areas",
],
}, },
{ {
title: "Competitor Analysis", title: "Competitor Analysis",
description: "Understanding market benchmarks and user expectations.", description: "Understanding market benchmarks and user expectations.",
icon: Target, icon: Target,
features: ["Competitive Benchmarking", "Feature Analysis", "Best Practices", "Market Research"] features: [
"Competitive Benchmarking",
"Feature Analysis",
"Best Practices",
"Market Research",
],
}, },
{ {
title: "Information Architecture Testing", title: "Information Architecture Testing",
description: "Card sorting, tree testing for content organization.", description: "Card sorting, tree testing for content organization.",
icon: Layers, icon: Layers,
features: ["Card Sorting", "Tree Testing", "Content Strategy", "Navigation Testing"] features: [
"Card Sorting",
"Tree Testing",
"Content Strategy",
"Navigation Testing",
],
}, },
{ {
title: "Accessibility Audits", title: "Accessibility Audits",
description: "Ensuring your product is usable for everyone.", description: "Ensuring your product is usable for everyone.",
icon: Accessibility, icon: Accessibility,
features: ["WCAG Compliance", "Screen Reader Testing", "Keyboard Navigation", "Color Contrast"] features: [
} "WCAG Compliance",
"Screen Reader Testing",
"Keyboard Navigation",
"Color Contrast",
],
},
]; ];
return ( return (
@@ -616,6 +729,10 @@ const ResearchServices = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6"> <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
Our Specialized User Research & Testing Capabilities Our Specialized User Research & Testing Capabilities
</h2> </h2>
<p className="mt-4 text-gray-400 max-w-2xl mx-auto">
Advanced user research expertise to map behaviors, needs, and pain
points for your AI mobile app experience.
</p>
</motion.div> </motion.div>
<motion.div <motion.div
@@ -649,10 +766,16 @@ const ResearchServices = () => {
{service.description} {service.description}
</p> </p>
<div className="space-y-2"> <div className="space-y-2">
<h4 className="text-xs font-medium text-foreground">Key Methods:</h4> <h4 className="text-xs font-medium text-foreground">
Key Methods:
</h4>
<div className="flex flex-wrap gap-1"> <div className="flex flex-wrap gap-1">
{service.features.map((feature) => ( {service.features.map((feature) => (
<Badge key={feature} variant="secondary" className="text-xs bg-muted/50 text-muted-foreground border-muted"> <Badge
key={feature}
variant="secondary"
className="text-xs bg-muted/50 text-muted-foreground border-muted"
>
{feature} {feature}
</Badge> </Badge>
))} ))}
@@ -672,18 +795,73 @@ const ResearchServices = () => {
// Research Tools // Research Tools
const ResearchTools = () => { const ResearchTools = () => {
const tools = [ const tools = [
{ name: "UserTesting", icon: Users, category: "User Testing", color: "green" }, {
name: "UserTesting",
icon: Users,
category: "User Testing",
color: "green",
},
{ name: "Maze", icon: Route, category: "User Testing", color: "blue" }, { name: "Maze", icon: Route, category: "User Testing", color: "blue" },
{ name: "Optimal Workshop", icon: Layers, category: "Information Architecture", color: "purple" }, {
{ name: "Hotjar", icon: MousePointer2, category: "User Behavior", color: "orange" }, name: "Optimal Workshop",
{ name: "Google Analytics", icon: BarChart3, category: "Web Analytics", color: "yellow" }, icon: Layers,
{ name: "SurveyMonkey", icon: MessageSquare, category: "Surveys", color: "green" }, category: "Information Architecture",
{ name: "Qualtrics", icon: FileText, category: "Research Platform", color: "blue" }, color: "purple",
{ name: "UsabilityHub", icon: TestTube, category: "Quick Testing", color: "red" }, },
{ name: "Card Sorting", icon: Grid, category: "Information Architecture", color: "purple" }, {
{ name: "Tree Testing", icon: GitBranch, category: "Navigation Testing", color: "teal" }, name: "Hotjar",
{ name: "A/B Testing", icon: GitPullRequest, category: "Conversion Testing", color: "pink" }, icon: MousePointer2,
{ name: "Lookback", icon: Video, category: "User Interviews", color: "indigo" } category: "User Behavior",
color: "orange",
},
{
name: "Google Analytics",
icon: BarChart3,
category: "Web Analytics",
color: "yellow",
},
{
name: "SurveyMonkey",
icon: MessageSquare,
category: "Surveys",
color: "green",
},
{
name: "Qualtrics",
icon: FileText,
category: "Research Platform",
color: "blue",
},
{
name: "UsabilityHub",
icon: TestTube,
category: "Quick Testing",
color: "red",
},
{
name: "Card Sorting",
icon: Grid,
category: "Information Architecture",
color: "purple",
},
{
name: "Tree Testing",
icon: GitBranch,
category: "Navigation Testing",
color: "teal",
},
{
name: "A/B Testing",
icon: GitPullRequest,
category: "Conversion Testing",
color: "pink",
},
{
name: "Lookback",
icon: Video,
category: "User Interviews",
color: "indigo",
},
]; ];
return ( return (
@@ -700,7 +878,8 @@ const ResearchTools = () => {
Research Tools & Methodologies Research Tools & Methodologies
</h2> </h2>
<p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed"> <p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
Employing a robust toolkit for comprehensive user insights. Employing a robust toolkit for comprehensive user insights through
AIpowered design driven analysis and synthesis.
</p> </p>
</motion.div> </motion.div>
@@ -722,7 +901,7 @@ const ResearchTools = () => {
red: "bg-red-500/20 text-red-400 border-red-500/30", red: "bg-red-500/20 text-red-400 border-red-500/30",
teal: "bg-teal-500/20 text-teal-400 border-teal-500/30", teal: "bg-teal-500/20 text-teal-400 border-teal-500/30",
pink: "bg-pink-500/20 text-pink-400 border-pink-500/30", pink: "bg-pink-500/20 text-pink-400 border-pink-500/30",
indigo: "bg-indigo-500/20 text-indigo-400 border-indigo-500/30" indigo: "bg-indigo-500/20 text-indigo-400 border-indigo-500/30",
}; };
return ( return (
@@ -736,10 +915,14 @@ const ResearchTools = () => {
className="group" className="group"
> >
<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"> <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-10 h-10 rounded-lg flex items-center justify-center mx-auto mb-3 ${colorClasses[tool.color as keyof typeof colorClasses] || 'bg-accent/20 text-accent border-accent/30'}`}> <div
className={`w-10 h-10 rounded-lg flex items-center justify-center mx-auto mb-3 ${colorClasses[tool.color as keyof typeof colorClasses] || "bg-accent/20 text-accent border-accent/30"}`}
>
<IconComponent className="w-5 h-5" /> <IconComponent className="w-5 h-5" />
</div> </div>
<h4 className="font-semibold text-white text-sm mb-1">{tool.name}</h4> <h4 className="font-semibold text-white text-sm mb-1">
{tool.name}
</h4>
<p className="text-xs text-gray-400">{tool.category}</p> <p className="text-xs text-gray-400">{tool.category}</p>
</Card> </Card>
</motion.div> </motion.div>
@@ -757,33 +940,39 @@ const ResearchCaseStudies = () => {
{ {
title: "E-commerce Usability Study", title: "E-commerce Usability Study",
client: "Online Retail Platform", client: "Online Retail Platform",
description: "Conducted comprehensive usability testing that identified critical checkout flow issues, resulting in a 45% increase in conversion rates after implementing recommended changes.", description:
image: "https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?w=400&h=300&fit=crop&auto=format", "Conducted comprehensive usability testing that identified critical checkout flow issues, resulting in a 45% increase in conversion rates after implementing recommended changes.",
image:
"https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?w=400&h=300&fit=crop&auto=format",
results: "45% conversion rate increase", results: "45% conversion rate increase",
methodology: "Usability Testing", methodology: "Usability Testing",
participants: "32 users", participants: "32 users",
gradient: "from-green-500/20 to-emerald-500/20" gradient: "from-green-500/20 to-emerald-500/20",
}, },
{ {
title: "SaaS User Journey Research", title: "SaaS User Journey Research",
client: "B2B Software Company", client: "B2B Software Company",
description: "In-depth user interviews and journey mapping revealed key pain points in onboarding, leading to a redesign that reduced churn by 60% in the first month.", description:
image: "https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=400&h=300&fit=crop&auto=format", "In-depth user interviews and journey mapping revealed key pain points in onboarding, leading to a redesign that reduced churn by 60% in the first month.",
image:
"https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=400&h=300&fit=crop&auto=format",
results: "60% churn reduction", results: "60% churn reduction",
methodology: "User Interviews & Journey Mapping", methodology: "User Interviews & Journey Mapping",
participants: "18 stakeholders", participants: "18 stakeholders",
gradient: "from-blue-500/20 to-cyan-500/20" gradient: "from-blue-500/20 to-cyan-500/20",
}, },
{ {
title: "Mobile App Accessibility Audit", title: "Mobile App Accessibility Audit",
client: "Healthcare Technology", client: "Healthcare Technology",
description: "Comprehensive accessibility testing and user research with disabled users resulted in WCAG 2.1 AA compliance and expanded user base by 25%.", description:
image: "https://images.unsplash.com/photo-1576091160399-112ba8d25d1f?w=400&h=300&fit=crop&auto=format", "Comprehensive accessibility testing and user research with disabled users resulted in WCAG 2.1 AA compliance and expanded user base by 25%.",
image:
"https://images.unsplash.com/photo-1576091160399-112ba8d25d1f?w=400&h=300&fit=crop&auto=format",
results: "25% user base expansion", results: "25% user base expansion",
methodology: "Accessibility Testing", methodology: "Accessibility Testing",
participants: "24 diverse users", participants: "24 diverse users",
gradient: "from-purple-500/20 to-pink-500/20" gradient: "from-purple-500/20 to-pink-500/20",
} },
]; ];
return ( return (
@@ -799,6 +988,12 @@ const ResearchCaseStudies = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-8"> <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-8">
Research-Driven Products That Connect with Users Research-Driven Products That Connect with Users
</h2> </h2>
<p className="mt-4 text-gray-400 max-w-2xl mx-auto">
AIpowered design informed by deep user research and user testing
builds AI mobile app, web development, and iOS mobile app
development experiences that truly connect with users and solve real
problems.
</p>
</motion.div> </motion.div>
<motion.div <motion.div
@@ -829,7 +1024,10 @@ const ResearchCaseStudies = () => {
<div className="text-xs text-muted-foreground mb-2 uppercase tracking-wider"> <div className="text-xs text-muted-foreground mb-2 uppercase tracking-wider">
{study.client} {study.client}
</div> </div>
<Badge variant="secondary" className="text-xs bg-accent/20 text-accent border-accent/30"> <Badge
variant="secondary"
className="text-xs bg-accent/20 text-accent border-accent/30"
>
{study.results} {study.results}
</Badge> </Badge>
</div> </div>
@@ -841,7 +1039,9 @@ const ResearchCaseStudies = () => {
</div> </div>
<div className="px-8 pb-6 flex-1"> <div className="px-8 pb-6 flex-1">
<div className={`relative rounded-xl overflow-hidden bg-gradient-to-br ${study.gradient} p-4 border border-white/10`}> <div
className={`relative rounded-xl overflow-hidden bg-gradient-to-br ${study.gradient} p-4 border border-white/10`}
>
<ImageWithFallback <ImageWithFallback
src={study.image} src={study.image}
alt={study.title} alt={study.title}
@@ -872,7 +1072,9 @@ const ResearchCaseStudies = () => {
size="sm" size="sm"
className="w-full justify-between text-accent hover:text-accent hover:bg-accent/10 group-hover:translate-x-1 transition-all duration-300" className="w-full justify-between text-accent hover:text-accent hover:bg-accent/10 group-hover:translate-x-1 transition-all duration-300"
> >
<span className="text-sm font-medium">VIEW FULL CASE STUDY</span> <span className="text-sm font-medium">
VIEW FULL CASE STUDY
</span>
<ArrowRight className="w-4 h-4" /> <ArrowRight className="w-4 h-4" />
</Button> </Button>
</div> </div>
@@ -909,7 +1111,9 @@ const ResearchInlineCTA = () => {
<div className="inline-block p-[2px] rounded-full bg-gradient-to-r from-accent via-blue-500 to-purple-500"> <div className="inline-block p-[2px] rounded-full bg-gradient-to-r from-accent via-blue-500 to-purple-500">
<div className="bg-black rounded-full px-6 py-3 flex items-center gap-2"> <div className="bg-black rounded-full px-6 py-3 flex items-center gap-2">
<Search className="w-5 h-5 text-white" /> <Search className="w-5 h-5 text-white" />
<span className="text-white text-base font-medium">User Research</span> <span className="text-white text-base font-medium">
User Research
</span>
</div> </div>
</div> </div>
@@ -919,11 +1123,13 @@ const ResearchInlineCTA = () => {
</h2> </h2>
<p className="text-xl text-gray-300 leading-relaxed max-w-2xl mx-auto"> <p className="text-xl text-gray-300 leading-relaxed max-w-2xl mx-auto">
Let's design a research plan that reveals invaluable insights for your product. Let's design a research plan that reveals invaluable insights for
your product.
</p> </p>
<ShimmerButton className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl" <ShimmerButton
onClick={() => navigate("/start-a-project")} className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl"
onClick={() => navigate("/start-a-project")}
> >
<div className="inline-flex items-center gap-3"> <div className="inline-flex items-center gap-3">
<MessageCircle className="w-6 h-6 flex-shrink-0" /> <MessageCircle className="w-6 h-6 flex-shrink-0" />
@@ -942,40 +1148,73 @@ const HireResearchers = () => {
const researcherTypes = [ const researcherTypes = [
{ {
title: "Senior User Researchers", title: "Senior User Researchers",
description: "Experienced researchers who design and execute comprehensive research studies", description:
"Experienced researchers who design and execute comprehensive research studies",
icon: Search, icon: Search,
skills: ["Research Strategy", "Mixed Methods", "Data Analysis", "Insight Synthesis"] skills: [
"Research Strategy",
"Mixed Methods",
"Data Analysis",
"Insight Synthesis",
],
}, },
{ {
title: "UX Researchers", title: "UX Researchers",
description: "Specialists in user experience research and usability testing", description:
"Specialists in user experience research and usability testing",
icon: Users, icon: Users,
skills: ["Usability Testing", "User Interviews", "Journey Mapping", "Persona Development"] skills: [
"Usability Testing",
"User Interviews",
"Journey Mapping",
"Persona Development",
],
}, },
{ {
title: "Quantitative Researchers", title: "Quantitative Researchers",
description: "Data analysts who focus on statistical research and metrics", description:
"Data analysts who focus on statistical research and metrics",
icon: BarChart3, icon: BarChart3,
skills: ["Statistical Analysis", "Survey Design", "A/B Testing", "Analytics"] skills: [
"Statistical Analysis",
"Survey Design",
"A/B Testing",
"Analytics",
],
}, },
{ {
title: "Qualitative Researchers", title: "Qualitative Researchers",
description: "Experts in ethnographic studies and behavioral research", description: "Experts in ethnographic studies and behavioral research",
icon: MessageCircle, icon: MessageCircle,
skills: ["Ethnographic Studies", "Focus Groups", "Interview Techniques", "Behavioral Analysis"] skills: [
"Ethnographic Studies",
"Focus Groups",
"Interview Techniques",
"Behavioral Analysis",
],
}, },
{ {
title: "Research Operations Specialists", title: "Research Operations Specialists",
description: "Professionals who streamline and scale research processes", description: "Professionals who streamline and scale research processes",
icon: Settings, icon: Settings,
skills: ["Research Ops", "Tool Management", "Process Optimization", "Team Coordination"] skills: [
"Research Ops",
"Tool Management",
"Process Optimization",
"Team Coordination",
],
}, },
{ {
title: "Accessibility Researchers", title: "Accessibility Researchers",
description: "Specialists in inclusive design and accessibility testing", description: "Specialists in inclusive design and accessibility testing",
icon: Accessibility, icon: Accessibility,
skills: ["Accessibility Testing", "Inclusive Design", "WCAG Compliance", "Assistive Technology"] skills: [
} "Accessibility Testing",
"Inclusive Design",
"WCAG Compliance",
"Assistive Technology",
],
},
]; ];
const navigate = useNavigate(); const navigate = useNavigate();
@@ -994,7 +1233,9 @@ const HireResearchers = () => {
Access Expert User Research Talent Access Expert User Research Talent
</h2> </h2>
<p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed"> <p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
Our dedicated user researchers and UX strategists provide the insights you need to build truly impactful products. Our dedicated user researchers and UX strategists provide the user
research insights you need to build truly impactful AI mobile app
products.
</p> </p>
</motion.div> </motion.div>
@@ -1029,10 +1270,16 @@ const HireResearchers = () => {
{type.description} {type.description}
</p> </p>
<div className="space-y-2"> <div className="space-y-2">
<h4 className="text-sm font-medium text-foreground">Core Skills:</h4> <h4 className="text-sm font-medium text-foreground">
Core Skills:
</h4>
<div className="flex flex-wrap gap-2"> <div className="flex flex-wrap gap-2">
{type.skills.map((skill) => ( {type.skills.map((skill) => (
<Badge key={skill} variant="secondary" className="text-xs bg-muted/50 text-muted-foreground border-muted"> <Badge
key={skill}
variant="secondary"
className="text-xs bg-muted/50 text-muted-foreground border-muted"
>
{skill} {skill}
</Badge> </Badge>
))} ))}
@@ -1053,8 +1300,11 @@ const HireResearchers = () => {
className="text-center space-y-6" className="text-center space-y-6"
> >
<div className="flex flex-col sm:flex-row gap-4 justify-center"> <div className="flex flex-col sm:flex-row gap-4 justify-center">
<ShimmerButton className="text-lg px-8 py-4" <ShimmerButton
onClick={() => navigate("/hire-talent/user-research-testing-developers")} className="text-lg px-8 py-4"
onClick={() =>
navigate("/hire-talent/user-research-testing-developers")
}
> >
<div className="inline-flex items-center gap-2"> <div className="inline-flex items-center gap-2">
<UserPlus className="w-5 h-5 flex-shrink-0" /> <UserPlus className="w-5 h-5 flex-shrink-0" />
@@ -1083,20 +1333,25 @@ const ResearchFAQs = () => {
const faqs = [ const faqs = [
{ {
question: "How many users should I test with?", question: "How many users should I test with?",
answer: "The optimal number depends on your research method and goals. For qualitative research like usability testing, 5-8 users often reveal 85% of usability issues. For quantitative research like surveys, you'll need larger sample sizes (typically 100+ respondents) for statistical significance. For A/B testing, sample sizes depend on your baseline conversion rate and the effect size you want to detect. We help determine the right sample size based on your specific research objectives and budget constraints." answer:
"The optimal number depends on your research method and goals. For qualitative research like usability testing, 5-8 users often reveal 85% of usability issues. For quantitative research like surveys, you'll need larger sample sizes (typically 100+ respondents) for statistical significance. For A/B testing, sample sizes depend on your baseline conversion rate and the effect size you want to detect. We help determine the right sample size based on your specific research objectives and budget constraints.",
}, },
{ {
question: "What's the difference between qualitative and quantitative research?", question:
answer: "Qualitative research focuses on understanding the 'why' behind user behaviors through methods like interviews, focus groups, and ethnographic studies. It provides rich insights into user motivations, emotions, and contexts. Quantitative research measures the 'what' and 'how much' through surveys, analytics, and A/B testing, providing statistical data about user behaviors and preferences. Most effective research strategies combine both approaches: qualitative research to understand user needs and quantitative research to validate findings at scale." "What's the difference between qualitative and quantitative research?",
answer:
"Qualitative research focuses on understanding the 'why' behind user behaviors through methods like interviews, focus groups, and ethnographic studies. It provides rich insights into user motivations, emotions, and contexts. Quantitative research measures the 'what' and 'how much' through surveys, analytics, and A/B testing, providing statistical data about user behaviors and preferences. Most effective research strategies combine both approaches: qualitative research to understand user needs and quantitative research to validate findings at scale.",
}, },
{ {
question: "Can user research be done remotely?", question: "Can user research be done remotely?",
answer: "Yes, remote user research has become increasingly effective and is often preferred for its convenience and broader participant reach. We conduct remote usability testing, interviews, surveys, and card sorting sessions using tools like Zoom, UserTesting, Maze, and specialized research platforms. Remote research eliminates geographical constraints, reduces costs, and often makes participants more comfortable in their natural environment. However, some research methods like ethnographic studies or physical product testing may still require in-person sessions." answer:
"Yes, remote user research has become increasingly effective and is often preferred for its convenience and broader participant reach. We conduct remote usability testing, interviews, surveys, and card sorting sessions using tools like Zoom, UserTesting, Maze, and specialized research platforms. Remote research eliminates geographical constraints, reduces costs, and often makes participants more comfortable in their natural environment. However, some research methods like ethnographic studies or physical product testing may still require in-person sessions.",
}, },
{ {
question: "How long does a typical usability test take?", question: "How long does a typical usability test take?",
answer: "Usability test duration varies by complexity and scope. Individual user sessions typically last 30-90 minutes, with simple task-based tests taking 30-45 minutes and comprehensive product evaluations lasting 60-90 minutes. The complete process including planning, recruitment, testing, and analysis usually takes 2-4 weeks. Unmoderated tests can be completed faster (1-2 weeks) as users complete tasks on their own time. We provide detailed timelines during project planning to align with your product development schedule." answer:
} "Usability test duration varies by complexity and scope. Individual user sessions typically last 30-90 minutes, with simple task-based tests taking 30-45 minutes and comprehensive product evaluations lasting 60-90 minutes. The complete process including planning, recruitment, testing, and analysis usually takes 2-4 weeks. Unmoderated tests can be completed faster (1-2 weeks) as users complete tasks on their own time. We provide detailed timelines during project planning to align with your product development schedule.",
},
]; ];
return ( return (
@@ -1129,7 +1384,9 @@ const ResearchFAQs = () => {
className="bg-gray-900/50 backdrop-blur-md rounded-2xl border border-gray-800 px-10 shadow-lg" className="bg-gray-900/50 backdrop-blur-md rounded-2xl border border-gray-800 px-10 shadow-lg"
> >
<AccordionTrigger className="text-left hover:no-underline py-10 text-xl"> <AccordionTrigger className="text-left hover:no-underline py-10 text-xl">
<span className="font-semibold text-white">{faq.question}</span> <span className="font-semibold text-white">
{faq.question}
</span>
</AccordionTrigger> </AccordionTrigger>
<AccordionContent className="text-gray-300 pb-10 text-lg leading-relaxed"> <AccordionContent className="text-gray-300 pb-10 text-lg leading-relaxed">
{faq.answer} {faq.answer}
@@ -1166,7 +1423,9 @@ const ResearchFinalCTA = () => {
<div className="inline-block p-[2px] rounded-full bg-gradient-to-r from-accent via-blue-500 to-purple-500"> <div className="inline-block p-[2px] rounded-full bg-gradient-to-r from-accent via-blue-500 to-purple-500">
<div className="bg-background rounded-full px-6 py-3 flex items-center gap-2"> <div className="bg-background rounded-full px-6 py-3 flex items-center gap-2">
<Search className="w-5 h-5 text-foreground" /> <Search className="w-5 h-5 text-foreground" />
<span className="text-foreground text-base font-medium">User Research</span> <span className="text-foreground text-base font-medium">
User Research
</span>
</div> </div>
</div> </div>
</motion.div> </motion.div>
@@ -1183,7 +1442,9 @@ const ResearchFinalCTA = () => {
viewport={{ once: true }} viewport={{ once: true }}
className="text-xl text-muted-foreground mb-12 max-w-2xl mx-auto leading-relaxed" className="text-xl text-muted-foreground mb-12 max-w-2xl mx-auto leading-relaxed"
> >
Partner with WDI for thorough user research and testing that ensures your digital products resonate with your audience. Partner with WDI for AIpowered designdriven insights that ensure
your AI mobile app and iOS mobile app development products resonate
with your audience.
</motion.p> </motion.p>
<motion.div <motion.div
@@ -1193,8 +1454,9 @@ const ResearchFinalCTA = () => {
viewport={{ once: true }} viewport={{ once: true }}
className="space-y-8" className="space-y-8"
> >
<ShimmerButton className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25" <ShimmerButton
onClick={() => navigate("/start-a-project")} className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25"
onClick={() => navigate("/start-a-project")}
> >
<div className="inline-flex items-center gap-3"> <div className="inline-flex items-center gap-3">
<Rocket className="w-6 h-6 flex-shrink-0" /> <Rocket className="w-6 h-6 flex-shrink-0" />
@@ -1235,7 +1497,7 @@ export const UserResearchTesting = () => {
<ResearchBenefits /> <ResearchBenefits />
</section> </section>
{/* Case Studies */} {/* Case Studies */}
<section className="bg-background"> <section className="bg-background">
<ResearchCaseStudies /> <ResearchCaseStudies />
</section> </section>
@@ -1276,9 +1538,7 @@ export const UserResearchTesting = () => {
</section> </section>
{/* Footer */} {/* Footer */}
<section className="bg-background"> <section className="bg-background">{/* <Footer /> */}</section>
{/* <Footer /> */}
</section>
</div> </div>
); );
}; };

View File

@@ -4,6 +4,7 @@ import { Footer } from "../components/Footer";
import { Button } from "../components/ui/button"; import { Button } from "../components/ui/button";
import { Badge } from "../components/ui/badge"; import { Badge } from "../components/ui/badge";
import { Card, CardContent } from "../components/ui/card"; import { Card, CardContent } from "../components/ui/card";
import vib360 from "../assets/vib360.jpg"
import { ArrowRight, Calendar, Users, Smartphone, Globe, Monitor, Check, Star, TrendingUp, Factory, Shield, Zap, Settings, Target, AlertCircle, Clock, Database, Wifi, BarChart3, Bell, Activity, Wrench, Brain } from "lucide-react"; import { ArrowRight, Calendar, Users, Smartphone, Globe, Monitor, Check, Star, TrendingUp, Factory, Shield, Zap, Settings, Target, AlertCircle, Clock, Database, Wifi, BarChart3, Bell, Activity, Wrench, Brain } from "lucide-react";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
// import vib360Image from "figma:asset/6e4d0e4c1e2f3a4b5c6d7e8f9g0h1i2j3k4l5m6n7o8p9q0r1s2t.png"; // import vib360Image from "figma:asset/6e4d0e4c1e2f3a4b5c6d7e8f9g0h1i2j3k4l5m6n7o8p9q0r1s2t.png";

View File

@@ -122,9 +122,7 @@ const WearableHeroWithCTA = () => {
</h1> </h1>
<p className="text-lg text-gray-300 leading-relaxed max-w-lg"> <p className="text-lg text-gray-300 leading-relaxed max-w-lg">
Extending your digital presence to smartwatches, fitness Extending your digital presence to smartwatches, fitness trackers, IoT devices, and emerging platforms through AI-powered features for unique user experiences.
trackers, IoT devices, and emerging platforms for unique user
experiences.
</p> </p>
</div> </div>
@@ -416,6 +414,9 @@ const WearableBenefits = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6"> <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
Why Invest in Device-Specific App Development? Why Invest in Device-Specific App Development?
</h2> </h2>
<p className="text-[#CCCCCC] text-lg max-w-2xl mx-auto">
AI mobile app development unlocks smartwatch, fitness tracker, and IoT device capabilities for unique, context-aware user experiences.
</p>
</motion.div> </motion.div>
<motion.div <motion.div
@@ -696,6 +697,9 @@ const WearableProcess = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6"> <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
Tailored Process for Emerging Device Applications Tailored Process for Emerging Device Applications
</h2> </h2>
<p className="text-[#CCCCCC] text-lg max-w-2xl mx-auto">
Our proven methodology ensures optimal performance across smartwatches, fitness trackers, and IoT devices through AI-powered design.
</p>
</motion.div> </motion.div>
<div className="relative"> <div className="relative">
@@ -826,6 +830,9 @@ const WearableUseCases = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6"> <h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
Industries & Scenarios Benefiting from Device Apps Industries & Scenarios Benefiting from Device Apps
</h2> </h2>
<p className="text-[#CCCCCC] text-lg max-w-2xl mx-auto">
Healthcare, fitness, manufacturing, logistics, and retail leverage smartwatch and IoT apps through AI mobile app development for real-time monitoring and insights.
</p>
</motion.div> </motion.div>
<motion.div <motion.div
@@ -1016,6 +1023,9 @@ const WearableTechStack = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6"> <h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
Leveraging Specialized Technologies for Seamless Device Integration Leveraging Specialized Technologies for Seamless Device Integration
</h2> </h2>
<p className="text-[#CCCCCC] text-lg max-w-2xl mx-auto">
We harness AI-powered design and platform-specific APIs for smartwatches, fitness trackers, and IoT devices to deliver native-like performance.
</p>
</motion.div> </motion.div>
{/* Core Technologies */} {/* Core Technologies */}
@@ -1026,7 +1036,7 @@ const WearableTechStack = () => {
viewport={{ once: true }} viewport={{ once: true }}
className="mb-16" className="mb-16"
> >
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6"> <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
{technologies.map((tech, index) => { {technologies.map((tech, index) => {
// const IconComponent = tech.icon; // const IconComponent = tech.icon;
const colorClasses = { const colorClasses = {
@@ -1162,6 +1172,9 @@ const WearableCaseStudies = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-white mb-8"> <h2 className="text-4xl lg:text-5xl font-semibold text-white mb-8">
Innovative Device Applications by WDI Innovative Device Applications by WDI
</h2> </h2>
<p className="text-[#CCCCCC] text-lg max-w-2xl mx-auto">
See how our AI mobile application developers deliver smartwatch, fitness tracker, and IoT solutions with AI-powered features across industries.
</p>
</motion.div> </motion.div>
<motion.div <motion.div
@@ -1420,8 +1433,7 @@ const WearableFinalCTA = () => {
viewport={{ once: true }} viewport={{ once: true }}
className="text-xl text-muted-foreground mb-12 max-w-2xl mx-auto leading-relaxed" className="text-xl text-muted-foreground mb-12 max-w-2xl mx-auto leading-relaxed"
> >
From smartwatches to complex IoT systems, we build connected From smartwatches to complex IoT systems, we build connected AI mobile apps that push the boundaries of digital interaction.
applications that push the boundaries of digital interaction.
</motion.p> </motion.p>
<motion.div <motion.div
@@ -1502,7 +1514,7 @@ export const WearableDeviceDevelopment = () => {
<HireDeveloperSection <HireDeveloperSection
title="Augment Your Team with Top Wearable App Developers" title="Augment Your Team with Top Wearable App Developers"
description="Develop seamless, real-time apps for smartwatches and wearable devices tailored for fitness, healthcare, and lifestyle industries." description="Develop seamless, real-time AI mobile apps for smartwatches and wearable devices tailored for fitness, healthcare, and lifestyle industries."
buttonText="Hire Wearable Developers" buttonText="Hire Wearable Developers"
buttonLink="/hire-talent/wearable-app-developers" buttonLink="/hire-talent/wearable-app-developers"
developerTypes={[ developerTypes={[

View File

@@ -150,8 +150,7 @@ const HeroWithCTA = () => {
</h1> </h1>
<p className="text-lg text-gray-300 leading-relaxed max-w-lg"> <p className="text-lg text-gray-300 leading-relaxed max-w-lg">
Build high-performance web applications and robust cloud Build high-performance web development applications and robust cloud infrastructure with AI-powered design that scales with your business growth.
infrastructure that scales with your business growth.
</p> </p>
</div> </div>
@@ -258,8 +257,7 @@ const HorizontalTagScroller = () => {
<span className="text-foreground"> We Master</span> <span className="text-foreground"> We Master</span>
</h2> </h2>
<p className="text-2xl text-muted-foreground max-w-4xl mx-auto leading-relaxed"> <p className="text-2xl text-muted-foreground max-w-4xl mx-auto leading-relaxed">
Modern web and cloud technologies that power enterprise-grade Modern web development and cloud technologies with AI-powered features that power enterprise-grade AI mobile app solutions.
solutions.
</p> </p>
</motion.div> </motion.div>
@@ -386,7 +384,7 @@ const SideBySideContentWithIcons = () => {
</h2> </h2>
<p className="text-2xl text-gray-300 leading-relaxed"> <p className="text-2xl text-gray-300 leading-relaxed">
Enterprise-grade solutions with proven reliability. Enterprise-grade web development solutions with proven reliability and AI-powered design.
</p> </p>
</motion.div> </motion.div>
@@ -490,8 +488,8 @@ const TabbedServiceDisplay = () => {
Web & Cloud Service Areas Web & Cloud Service Areas
</h2> </h2>
<p className="text-lg text-gray-300 max-w-4xl mx-auto leading-relaxed"> <p className="text-lg text-gray-300 max-w-4xl mx-auto leading-relaxed">
Comprehensive web development and cloud solutions designed for Comprehensive web development and cloud solutions with AI-powered design designed for scalability and performance.
scalability and performance.
</p> </p>
</motion.div> </motion.div>
@@ -582,8 +580,7 @@ const InlineCTA = () => {
{/* Subtitle */} {/* Subtitle */}
<p className="text-xl text-muted-foreground leading-relaxed max-w-2xl mx-auto"> <p className="text-xl text-muted-foreground leading-relaxed max-w-2xl mx-auto">
Deploy robust, secure, and high-performance applications that Deploy robust, secure, and high-performance web development applications with AI-powered design that scale with your business growth.
scale with your business growth.
</p> </p>
{/* CTA Button */} {/* CTA Button */}
@@ -666,8 +663,7 @@ const HireDevelopersSection = () => {
<span className="text-[#E5195E]">Cloud Specialists</span> <span className="text-[#E5195E]">Cloud Specialists</span>
</h2> </h2>
<p className="text-2xl text-muted-foreground max-w-4xl mx-auto leading-relaxed"> <p className="text-2xl text-muted-foreground max-w-4xl mx-auto leading-relaxed">
Get access to expert developers who specialize in modern web and Get access to expert developers who specialize in modern web development and cloud technologies with AI-powered design.
cloud technologies.
</p> </p>
</motion.div> </motion.div>
@@ -757,7 +753,7 @@ const webCloudFAQs = [
{ {
question: "What web technologies do you specialize in?", question: "What web technologies do you specialize in?",
answer: answer:
"We specialize in modern web technologies including React, Next.js, Node.js, Python, TypeScript, and various cloud platforms like AWS, Azure, and Google Cloud. Our team stays current with the latest frameworks and best practices.", "We specialize in modern web development technologies including React, Next.js, Node.js, Python, TypeScript, and various cloud platforms like AWS, Azure, and Google Cloud with AI-powered design. Our team stays current with the latest frameworks and best practices.",
}, },
{ {
question: "How do you ensure web application security?", question: "How do you ensure web application security?",
@@ -772,7 +768,7 @@ const webCloudFAQs = [
{ {
question: "What is your approach to scalable architecture?", question: "What is your approach to scalable architecture?",
answer: answer:
"We design applications with scalability in mind from the start, using microservices architecture, containerization, load balancing, and auto-scaling features. This ensures your application can handle growth efficiently.", "We design applications with scalability in mind from the start, using microservices architecture, containerization, load balancing, and auto-scaling features with AI-powered design. This ensures your application can handle growth efficiently.",
}, },
{ {
question: "Do you provide ongoing maintenance and support?", question: "Do you provide ongoing maintenance and support?",

View File

@@ -131,8 +131,7 @@ const IOSHeroWithCTA = () => {
</h1> </h1>
<p className="max-w-lg text-lg leading-relaxed text-gray-300"> <p className="max-w-lg text-lg leading-relaxed text-gray-300">
Crafting intuitive, high-performance iPhone and iPad Crafting intuitive, high-performance iPhone and iPad applications with AI iOS development that define user experience and drive engagement.
applications that define user experience and drive engagement.
</p> </p>
</div> </div>
@@ -186,7 +185,7 @@ const IOSHeroWithCTA = () => {
{/* {" "} */} {/* {" "} */}
<Spline <Spline
scene="https://prod.spline.design/3GGwAe3v1Q7oobGU/scene.splinecode" scene="https://prod.spline.design/3GGwAe3v1Q7oobGU/scene.splinecode"
// className="w-[40%] h-full" // className="w-[40%] h-full"
/> />
</div> </div>
</motion.div> </motion.div>
@@ -285,9 +284,7 @@ const IOSCaseStudies = () => {
iOS Apps That Drive Results iOS Apps That Drive Results
</h2> </h2>
<p className="max-w-3xl mx-auto text-xl leading-relaxed text-muted-foreground"> <p className="max-w-3xl mx-auto text-xl leading-relaxed text-muted-foreground">
Discover how we've helped businesses succeed with exceptional iOS Discover how our AI mobile application developers have helped businesses succeed with exceptional iOS applications that leverage AI iOS development capabilities and deliver outstanding AI mobile app experiences.
applications that leverage native capabilities and deliver
outstanding user experiences.
</p> </p>
</motion.div> </motion.div>
@@ -513,8 +510,7 @@ const IOSProcessTimeline = () => {
Our Proven Approach to Building Your iOS App Our Proven Approach to Building Your iOS App
</h2> </h2>
<p className="max-w-3xl mx-auto text-xl leading-relaxed text-gray-300"> <p className="max-w-3xl mx-auto text-xl leading-relaxed text-gray-300">
From concept to App Store success, we guide you through every step From concept to App Store success, our AI mobile application developers guide you through every step of the AI iOS development journey.
of the iOS development journey.
</p> </p>
</motion.div> </motion.div>
@@ -809,8 +805,7 @@ const IOSKeyBenefits = () => {
Why Choose Native iOS for Your App? Why Choose Native iOS for Your App?
</h2> </h2>
<p className="max-w-3xl mx-auto text-xl leading-relaxed text-muted-foreground"> <p className="max-w-3xl mx-auto text-xl leading-relaxed text-muted-foreground">
iOS development offers unparalleled advantages for businesses AI iOS development offers unparalleled advantages for businesses looking to create premium AI mobile app experiences.
looking to create premium mobile experiences.
</p> </p>
</motion.div> </motion.div>

View File

@@ -173,209 +173,213 @@ import { HireThirdPartyIntegrationsDevelopers } from "../pages/HireThirdPartyInt
import { HireClickablePrototypesDevelopers } from "../pages/HireClickablePrototypesDevelopers"; import { HireClickablePrototypesDevelopers } from "../pages/HireClickablePrototypesDevelopers";
import { HireDesignThinkingWorkshopsDevelopers } from "../pages/HireDesignThinkingWorkshopsDevelopers"; import { HireDesignThinkingWorkshopsDevelopers } from "../pages/HireDesignThinkingWorkshopsDevelopers";
import { HireUserResearchTestingDevelopers } from "../pages/HireUserResearchTestingDevelopers"; import { HireUserResearchTestingDevelopers } from "../pages/HireUserResearchTestingDevelopers";
import { HireMobileAppDevelopersIndia } from "../pages/HireMobileAppDevelopersIndia";
// Placeholder // Placeholder
import { ArticleDetail } from "../pages/ArticleDetail"; import { ArticleDetail } from "../pages/ArticleDetail";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
export const AppRouter = () => ( export const AppRouter = () => (
<Routes> <Routes>
{/* Homepage */} {/* Homepage */}
<Route path="/" element={<Homepage />} /> <Route path="/" element={<Homepage />} />
<Route path="/home" element={<Homepage />} /> <Route path="/home" element={<Homepage />} />
{/* Main Category Pages */} {/* Main Category Pages */}
<Route path="/services" element={<Services />} /> <Route path="/services" element={<Services />} />
<Route path="/solutions" element={<Solutions />} /> <Route path="/solutions" element={<Solutions />} />
<Route path="/industries" element={<Industries />} /> <Route path="/industries" element={<Industries />} />
<Route path="/resources" element={<Resources />} /> <Route path="/resources" element={<Resources />} />
<Route path="/web-cloud" element={<WebCloudServices />} /> <Route path="/web-cloud" element={<WebCloudServices />} />
<Route path="/software-engineering" element={<SoftwareEngineering />} /> <Route path="/software-engineering" element={<SoftwareEngineering />} />
<Route path="/design-experience" element={<DesignExperience />} /> <Route path="/design-experience" element={<DesignExperience />} />
<Route path="/artificial-intelligence" element={<ArtificialIntelligenceServices />} /> <Route path="/artificial-intelligence" element={<ArtificialIntelligenceServices />} />
<Route path="/machine-learning" element={<MachineLearning />} /> <Route path="/machine-learning" element={<MachineLearning />} />
{/* SERVICES */} {/* SERVICES */}
<Route path="/services/mobile-app-development" element={<MobileAppDevelopment />} /> <Route path="/services/mobile-app-development" element={<MobileAppDevelopment />} />
<Route path="/services/ios-app-development" element={<IOSAppDevelopment />} /> <Route path="/services/ios-app-development" element={<IOSAppDevelopment />} />
<Route path="/services/android-app-development" element={<AndroidAppDevelopment />} /> <Route path="/services/android-app-development" element={<AndroidAppDevelopment />} />
<Route path="/services/cross-platform-app-development" element={<CrossPlatformAppDevelopment />} /> <Route path="/services/cross-platform-app-development" element={<CrossPlatformAppDevelopment />} />
<Route path="/services/native-app-development" element={<NativeAppDevelopment />} /> <Route path="/services/native-app-development" element={<NativeAppDevelopment />} />
<Route path="/services/pwa-development" element={<PWADevelopment />} /> <Route path="/services/pwa-development" element={<PWADevelopment />} />
<Route path="/services/wearable-device-development" element={<WearableDeviceDevelopment />} /> <Route path="/services/wearable-device-development" element={<WearableDeviceDevelopment />} />
<Route path="/services/custom-web-app-development" element={<CustomWebAppDevelopment />} /> <Route path="/services/custom-web-app-development" element={<CustomWebAppDevelopment />} />
<Route path="/services/saas-product-engineering" element={<SaaSProductEngineering />} /> <Route path="/services/saas-product-engineering" element={<SaaSProductEngineering />} />
<Route path="/services/ecommerce-platforms" element={<EcommercePlatforms />} /> <Route path="/services/ecommerce-platforms" element={<EcommercePlatforms />} />
<Route path="/services/admin-panels-dashboards" element={<AdminPanelsDashboards />} /> <Route path="/services/admin-panels-dashboards" element={<AdminPanelsDashboards />} />
<Route path="/services/api-backend-development" element={<APIBackendDevelopment />} /> <Route path="/services/api-backend-development" element={<APIBackendDevelopment />} />
<Route path="/services/enterprise-software-solutions" element={<EnterpriseSoftwareSolutions />} /> <Route path="/services/enterprise-software-solutions" element={<EnterpriseSoftwareSolutions />} />
<Route path="/services/system-architecture-devops" element={<SystemArchitectureDevOps />} /> <Route path="/services/system-architecture-devops" element={<SystemArchitectureDevOps />} />
<Route path="/services/third-party-integrations" element={<ThirdPartyIntegrations />} /> <Route path="/services/third-party-integrations" element={<ThirdPartyIntegrations />} />
<Route path="/services/product-modernization" element={<ProductModernization />} /> <Route path="/services/product-modernization" element={<ProductModernization />} />
<Route path="/services/ui-ux-design" element={<UIUXDesign />} /> <Route path="/services/ui-ux-design" element={<UIUXDesign />} />
<Route path="/services/clickable-prototypes" element={<ClickablePrototypes />} /> <Route path="/services/clickable-prototypes" element={<ClickablePrototypes />} />
<Route path="/services/design-thinking-workshops" element={<DesignThinkingWorkshops />} /> <Route path="/services/design-thinking-workshops" element={<DesignThinkingWorkshops />} />
<Route path="/services/user-research-testing" element={<UserResearchTesting />} /> <Route path="/services/user-research-testing" element={<UserResearchTesting />} />
<Route path="/services/ai-strategy-consulting" element={<AIStrategyConsulting />} /> <Route path="/services/ai-strategy-consulting" element={<AIStrategyConsulting />} />
<Route path="/services/ai-automation-workflows" element={<AIAutomationWorkflows />} /> <Route path="/services/ai-automation-workflows" element={<AIAutomationWorkflows />} />
<Route path="/services/ai-integration-digital-products" element={<AIIntegrationDigitalProducts />} /> <Route path="/services/ai-integration-digital-products" element={<AIIntegrationDigitalProducts />} />
<Route path="/services/gen-ai-integration-digital-products" element={<GenAIIntegrationDigitalProducts />} /> <Route path="/services/gen-ai-integration-digital-products" element={<GenAIIntegrationDigitalProducts />} />
<Route path="/services/ai-chatbots-virtual-assistants" element={<AIChatbotsVirtualAssistants />} /> <Route path="/services/ai-chatbots-virtual-assistants" element={<AIChatbotsVirtualAssistants />} />
<Route path="/services/ai-model-deployment-mlops" element={<AIModelDeploymentMLOps />} /> <Route path="/services/ai-model-deployment-mlops" element={<AIModelDeploymentMLOps />} />
<Route path="/services/custom-ml-model-development" element={<CustomMLModelDevelopment />} /> <Route path="/services/custom-ml-model-development" element={<CustomMLModelDevelopment />} />
<Route path="/services/predictive-analytics-forecasting" element={<PredictiveAnalyticsForecasting />} /> <Route path="/services/predictive-analytics-forecasting" element={<PredictiveAnalyticsForecasting />} />
<Route path="/services/computer-vision-applications" element={<ComputerVisionApplications />} /> <Route path="/services/computer-vision-applications" element={<ComputerVisionApplications />} />
<Route path="/services/nlp-text-analytics" element={<NLPTextAnalytics />} /> <Route path="/services/nlp-text-analytics" element={<NLPTextAnalytics />} />
<Route path="/services/recommendation-engines" element={<RecommendationEngines />} /> <Route path="/services/recommendation-engines" element={<RecommendationEngines />} />
{/* SOLUTIONS */} {/* SOLUTIONS */}
<Route path="/solutions/digital-product-development" element={<DigitalProductDevelopment />} /> <Route path="/solutions/digital-product-development" element={<DigitalProductDevelopment />} />
<Route path="/solutions/mvp-startup-launch-packages" element={<MVPStartupLaunchPackages />} /> <Route path="/solutions/mvp-startup-launch-packages" element={<MVPStartupLaunchPackages />} />
<Route path="/solutions/legacy-system-rebuilds" element={<LegacySystemRebuilds />} /> <Route path="/solutions/legacy-system-rebuilds" element={<LegacySystemRebuilds />} />
<Route path="/solutions/dedicated-offshore-odc" element={<DedicatedOffshoreODC />} /> <Route path="/solutions/dedicated-offshore-odc" element={<DedicatedOffshoreODC />} />
<Route path="/solutions/business-process-automation" element={<BusinessProcessAutomation />} /> <Route path="/solutions/business-process-automation" element={<BusinessProcessAutomation />} />
<Route path="/solutions/compliance-ready-systems" element={<ComplianceReadySystems />} /> <Route path="/solutions/compliance-ready-systems" element={<ComplianceReadySystems />} />
{/* Simplified solution routes */} {/* Simplified solution routes */}
<Route path="/digital-product-development" element={<DigitalProductDevelopment />} /> <Route path="/digital-product-development" element={<DigitalProductDevelopment />} />
<Route path="/mvp-startup-launch" element={<MVPStartupLaunchPackages />} /> <Route path="/mvp-startup-launch" element={<MVPStartupLaunchPackages />} />
<Route path="/legacy-system-rebuilds" element={<LegacySystemRebuilds />} /> <Route path="/legacy-system-rebuilds" element={<LegacySystemRebuilds />} />
<Route path="/dedicated-development-centers" element={<DedicatedOffshoreODC />} /> <Route path="/dedicated-development-centers" element={<DedicatedOffshoreODC />} />
<Route path="/business-process-automation" element={<BusinessProcessAutomation />} /> <Route path="/business-process-automation" element={<BusinessProcessAutomation />} />
<Route path="/compliance-ready-systems" element={<ComplianceReadySystems />} /> <Route path="/compliance-ready-systems" element={<ComplianceReadySystems />} />
{/* INDUSTRIES - Financial Services */} {/* INDUSTRIES - Financial Services */}
<Route path="/industries/fintech-banking-apps" element={<FinTechBankingApps />} /> <Route path="/industries/fintech-banking-apps" element={<FinTechBankingApps />} />
<Route path="/industries/financial-services/wealthtech-platforms" element={<WealthTechPlatforms />} /> <Route path="/industries/financial-services/wealthtech-platforms" element={<WealthTechPlatforms />} />
<Route path="/industries/financial-services/real-estate-tech" element={<RealEstateTech />} /> <Route path="/industries/financial-services/real-estate-tech" element={<RealEstateTech />} />
{/* INDUSTRIES - Healthcare & Wellness */} {/* INDUSTRIES - Healthcare & Wellness */}
<Route path="/industries/healthcare/healthtech-applications" element={<HealthTechApplications />} /> <Route path="/industries/healthcare/healthtech-applications" element={<HealthTechApplications />} />
<Route path="/industries/healthcare/medical-compliance-solutions" element={<MedicalComplianceSolutions />} /> <Route path="/industries/healthcare/medical-compliance-solutions" element={<MedicalComplianceSolutions />} />
<Route path="/industries/healthcare/fitness-wellness-platforms" element={<FitnessWellnessPlatforms />} /> <Route path="/industries/healthcare/fitness-wellness-platforms" element={<FitnessWellnessPlatforms />} />
{/* INDUSTRIES - Learning & Education */} {/* INDUSTRIES - Learning & Education */}
<Route path="/industries/education/edtech-platforms" element={<EdTechPlatforms />} /> <Route path="/industries/education/edtech-platforms" element={<EdTechPlatforms />} />
<Route path="/industries/education/virtual-classrooms-lms" element={<VirtualClassroomsLMS />} /> <Route path="/industries/education/virtual-classrooms-lms" element={<VirtualClassroomsLMS />} />
<Route path="/industries/education/microlearning-apps" element={<MicrolearningApps />} /> <Route path="/industries/education/microlearning-apps" element={<MicrolearningApps />} />
{/* INDUSTRIES - Commerce & Consumer */} {/* INDUSTRIES - Commerce & Consumer */}
<Route path="/industries/commerce/ecommerce-marketplaces" element={<EcommerceMarketplaces />} /> <Route path="/industries/commerce/ecommerce-marketplaces" element={<EcommerceMarketplaces />} />
<Route path="/industries/commerce/food-ordering-delivery" element={<FoodOrderingDelivery />} /> <Route path="/industries/commerce/food-ordering-delivery" element={<FoodOrderingDelivery />} />
<Route path="/industries/commerce/travel-booking-systems" element={<TravelBookingSystems />} /> <Route path="/industries/commerce/travel-booking-systems" element={<TravelBookingSystems />} />
<Route path="/industries/commerce/event-ticketing-solutions" element={<EventTicketingSolutions />} /> <Route path="/industries/commerce/event-ticketing-solutions" element={<EventTicketingSolutions />} />
{/* INDUSTRIES - Media & Community */} {/* INDUSTRIES - Media & Community */}
<Route path="/industries/media/ott-streaming-apps" element={<OTTStreamingApps />} /> <Route path="/industries/media/ott-streaming-apps" element={<OTTStreamingApps />} />
<Route path="/industries/media/social-platforms-networks" element={<SocialPlatformsNetworks />} /> <Route path="/industries/media/social-platforms-networks" element={<SocialPlatformsNetworks />} />
<Route path="/industries/media/sports-fan-engagement" element={<SportsFanEngagement />} /> <Route path="/industries/media/sports-fan-engagement" element={<SportsFanEngagement />} />
{/* INDUSTRIES - Mobility & Logistics */} {/* INDUSTRIES - Mobility & Logistics */}
<Route path="/industries/mobility/transportation-apps" element={<TransportationApps />} /> <Route path="/industries/mobility/transportation-apps" element={<TransportationApps />} />
<Route path="/industries/mobility/on-demand-services" element={<OnDemandServices />} /> <Route path="/industries/mobility/on-demand-services" element={<OnDemandServices />} />
<Route path="/industries/mobility/supply-chain-fleet-management" element={<SupplyChainFleetManagement />} /> <Route path="/industries/mobility/supply-chain-fleet-management" element={<SupplyChainFleetManagement />} />
{/* INDUSTRIES - Industrial & Emerging Tech */} {/* INDUSTRIES - Industrial & Emerging Tech */}
<Route path="/industries/industrial/manufacturing-automation" element={<ManufacturingAutomation />} /> <Route path="/industries/industrial/manufacturing-automation" element={<ManufacturingAutomation />} />
<Route path="/industries/industrial/agritech-platforms" element={<AgriTechPlatforms />} /> <Route path="/industries/industrial/agritech-platforms" element={<AgriTechPlatforms />} />
<Route path="/industries/industrial/oil-gas-monitoring-systems" element={<OilGasMonitoringSystems />} /> <Route path="/industries/industrial/oil-gas-monitoring-systems" element={<OilGasMonitoringSystems />} />
{/* COMPANY PAGES */} {/* COMPANY PAGES */}
<Route path="/company/about-wdi" element={<AboutWDI />} /> <Route path="/company/about-wdi" element={<AboutWDI />} />
<Route path="/company/our-history" element={<OurHistory />} /> <Route path="/company/our-history" element={<OurHistory />} />
<Route path="/company/leadership-team" element={<LeadershipTeam />} /> <Route path="/company/leadership-team" element={<LeadershipTeam />} />
<Route path="/company/awards-certifications" element={<AwardsCertifications />} /> <Route path="/company/awards-certifications" element={<AwardsCertifications />} />
<Route path="/company/careers" element={<Careers />} /> <Route path="/company/careers" element={<Careers />} />
<Route path="/company/culture-values" element={<CultureValues />} /> <Route path="/company/culture-values" element={<CultureValues />} />
<Route path="/company/press-media" element={<PressMedia />} /> <Route path="/company/press-media" element={<PressMedia />} />
{/* CAREERS PAGES */} {/* CAREERS PAGES */}
<Route path="/careers" element={<Careers />} /> <Route path="/careers" element={<Careers />} />
<Route path="/careers/open-positions" element={<Careers />} /> <Route path="/careers/open-positions" element={<Careers />} />
<Route path="/careers/send-cv" element={<Careers />} /> <Route path="/careers/send-cv" element={<Careers />} />
{/* HIRE TALENT PAGES */} {/* HIRE TALENT PAGES */}
<Route path="/hire-talent" element={<HireTalent />} /> <Route path="/hire-talent" element={<HireTalent />} />
<Route path="/hire-talent/mobile-app-developers" element={<HireMobileAppDevelopers />} /> <Route path="/hire-talent/mobile-app-developers" element={<HireMobileAppDevelopers />} />
<Route path="/hire-talent/full-stack-developers" element={<HireFullStackDevelopers />} /> <Route path="/hire-talent/full-stack-developers" element={<HireFullStackDevelopers />} />
<Route path="/hire-talent/frontend-developers" element={<HireFrontendDevelopers />} /> <Route path="/hire-talent/frontend-developers" element={<HireFrontendDevelopers />} />
<Route path="/hire-talent/backend-developers" element={<HireBackendDevelopers />} /> <Route path="/hire-talent/backend-developers" element={<HireBackendDevelopers />} />
<Route path="/hire-talent/ui-ux-designers" element={<HireUIUXDesigners />} /> <Route path="/hire-talent/ui-ux-designers" element={<HireUIUXDesigners />} />
<Route path="/hire-talent/qa-engineers" element={<HireQAEngineers />} /> <Route path="/hire-talent/qa-engineers" element={<HireQAEngineers />} />
<Route path="/dedicated-development-teams" element={<DedicatedDevelopmentTeams />} /> <Route path="/dedicated-development-teams" element={<DedicatedDevelopmentTeams />} />
<Route path="/engagement-models" element={<EngagementModels />} /> <Route path="/engagement-models" element={<EngagementModels />} />
<Route path="/team-augmentation-services" element={<TeamAugmentationServices />} /> <Route path="/team-augmentation-services" element={<TeamAugmentationServices />} />
<Route path="/hire-talent/mobile-app-developers-india" element={<HireMobileAppDevelopersIndia />} />
{/* New hire pages */}
<Route path="/hire-talent/ios-app-developers" element={<HireiOSAppDevelopers />} />
<Route path="/hire-talent/android-app-developers" element={<HireAndroidAppDevelopers />} />
<Route path="/hire-talent/cross-platform-developers" element={<HireCrossPlatformDevelopers />} />
<Route path="/hire-talent/native-app-developers" element={<HireNativeAppDevelopers />} />
<Route path="/hire-talent/pwa-developers" element={<HirePWADevelopers />} />
<Route path="/hire-talent/wearable-app-developers" element={<HireWearableAppDevelopers />} />
<Route path="/hire-talent/custom-web-app-developers" element={<HireCustomWebAppDevelopers />} />
<Route path="/hire-talent/saas-product-developers" element={<HireSaaSProductDevelopers />} />
<Route path="/hire-talent/ecommerce-platform-developers" element={<HireEcommercePlatformDevelopers />} />
<Route path="/hire-talent/admin-panel-developers" element={<HireAdminPanelDevelopers />} />
<Route path="/hire-talent/api-backend-developers" element={<HireAPIBackendDevelopers />} />
<Route path="/hire-talent/enterprise-software-developers" element={<HireEnterpriseSoftwareDevelopers />} />
<Route path="/hire-talent/system-architecture-developers" element={<HireSystemArchitectureDevOpsDevelopers />} />
<Route path="/hire-talent/third-party-integration-developers" element={<HireThirdPartyIntegrationsDevelopers />} />
<Route path="/hire-talent/product-modernization-developers" element={<HireProductModernizationDevelopers />} />
<Route path="/hire-talent/clickable-prototypes-developers" element={<HireClickablePrototypesDevelopers />} />
<Route path="/hire-talent/design-thinking-workshops-developers" element={<HireDesignThinkingWorkshopsDevelopers />} />
<Route path="/hire-talent/user-research-testing-developers" element={<HireUserResearchTestingDevelopers />} />
{/* RESOURCES PAGES */} {/* New hire pages */}
<Route path="/resources/blog" element={<Blog />} /> <Route path="/hire-talent/ios-app-developers" element={<HireiOSAppDevelopers />} />
<Route path="/case-studies" element={<CaseStudies />} /> <Route path="/hire-talent/android-app-developers" element={<HireAndroidAppDevelopers />} />
<Route path="/resources/client-testimonials" element={<ClientTestimonials />} /> <Route path="/hire-talent/cross-platform-developers" element={<HireCrossPlatformDevelopers />} />
<Route path="/resources/whitepapers-insights" element={<WhitepapersInsights />} /> <Route path="/hire-talent/native-app-developers" element={<HireNativeAppDevelopers />} />
<Route path="/resources/faqs" element={<FAQs />} /> <Route path="/hire-talent/pwa-developers" element={<HirePWADevelopers />} />
<Route path="/hire-talent/wearable-app-developers" element={<HireWearableAppDevelopers />} />
<Route path="/hire-talent/custom-web-app-developers" element={<HireCustomWebAppDevelopers />} />
<Route path="/hire-talent/saas-product-developers" element={<HireSaaSProductDevelopers />} />
<Route path="/hire-talent/ecommerce-platform-developers" element={<HireEcommercePlatformDevelopers />} />
<Route path="/hire-talent/admin-panel-developers" element={<HireAdminPanelDevelopers />} />
<Route path="/hire-talent/api-backend-developers" element={<HireAPIBackendDevelopers />} />
<Route path="/hire-talent/enterprise-software-developers" element={<HireEnterpriseSoftwareDevelopers />} />
<Route path="/hire-talent/system-architecture-developers" element={<HireSystemArchitectureDevOpsDevelopers />} />
<Route path="/hire-talent/third-party-integration-developers" element={<HireThirdPartyIntegrationsDevelopers />} />
<Route path="/hire-talent/product-modernization-developers" element={<HireProductModernizationDevelopers />} />
<Route path="/hire-talent/clickable-prototypes-developers" element={<HireClickablePrototypesDevelopers />} />
<Route path="/hire-talent/design-thinking-workshops-developers" element={<HireDesignThinkingWorkshopsDevelopers />} />
<Route path="/hire-talent/user-research-testing-developers" element={<HireUserResearchTestingDevelopers />} />
{/* CONTACT PAGES */} {/* RESOURCES PAGES */}
<Route path="/contact-us" element={<Contact />} /> <Route path="/resources/blog" element={<Blog />} />
<Route path="/contact-us-now" element={<Contact />} /> <Route path="/case-studies" element={<CaseStudies />} />
<Route path="/contact/request-a-proposal" element={<RequestProposal />} /> <Route path="/resources/client-testimonials" element={<ClientTestimonials />} />
<Route path="/contact/schedule-a-discovery-call" element={<ScheduleDiscoveryCall />} /> <Route path="/resources/whitepapers-insights" element={<WhitepapersInsights />} />
<Route path="/contact/office-locations" element={<OfficeLocations />} /> <Route path="/resources/faqs" element={<FAQs />} />
<Route path="/contact/client-support" element={<ClientSupport />} />
<Route path="/contact/send-your-cv" element={<SendYourCV />} />
<Route path="/start-a-project" element={<StartAProject />} />
<Route path="/thank-you" element={<ThankYou />} />
{/* LEGACY CONTACT ROUTE SUPPORT */} {/* CONTACT PAGES */}
<Route path="/contact/contact-form" element={<ContactMain />} /> <Route path="/contact-us" element={<Contact />} />
<Route path="/contact-us-now" element={<Contact />} />
<Route path="/contact/request-a-proposal" element={<RequestProposal />} />
<Route path="/contact/schedule-a-discovery-call" element={<ScheduleDiscoveryCall />} />
<Route path="/contact/office-locations" element={<OfficeLocations />} />
<Route path="/contact/client-support" element={<ClientSupport />} />
<Route path="/contact/send-your-cv" element={<SendYourCV />} />
<Route path="/start-a-project" element={<StartAProject />} />
<Route path="/thank-you" element={<ThankYou />} />
{/* PROJECT PAGES */} {/* LEGACY CONTACT ROUTE SUPPORT */}
<Route path="/projects/regroup" element={<RegroupProject />} /> <Route path="/contact/contact-form" element={<ContactMain />} />
{/* <Route path="/projects/seezun" element={<SeezunProject />} /> */}
<Route path="/projects/woka" element={<WokaProject />} />
<Route path="/projects/tanami" element={<TanamiProject />} />
<Route path="/projects/traderscircuit" element={<TradersCircuitProject />} />
<Route path="/projects/goodtimes" element={<GoodTimesProject />} />
<Route path="/projects/prosperty" element={<ProspertyProject />} />
<Route path="/projects/ranoutof" element={<RanOutOfProject />} />
<Route path="/projects/vib360" element={<VIB360Project />} />
<Route path="/projects/amble" element={<AmbleProject />} />
<Route path="/projects/amoz" element={<AmozProject />} />
<Route path="/projects/simpletend" element={<SimpliTendProject />} />
{/* ARTICLE PAGES */} {/* PROJECT PAGES */}
<Route path="/articles/future-of-ai-healthcare" element={<FutureOfAIHealthcare />} /> <Route path="/projects/regroup" element={<RegroupProject />} />
<Route path="/articles/compliance-ready-systems-fintech" element={<ComplianceReadyFintech />} /> {/* <Route path="/projects/seezun" element={<SeezunProject />} /> */}
<Route path="/articles/legacy-system-scaling" element={<LegacySystemScaling />} /> <Route path="/projects/woka" element={<WokaProject />} />
<Route path="/articles/automation-reshaping-business" element={<AutomationReshapingBusiness />} /> <Route path="/projects/tanami" element={<TanamiProject />} />
<Route path="/projects/traderscircuit" element={<TradersCircuitProject />} />
<Route path="/projects/goodtimes" element={<GoodTimesProject />} />
<Route path="/projects/prosperty" element={<ProspertyProject />} />
<Route path="/projects/ranoutof" element={<RanOutOfProject />} />
<Route path="/projects/vib360" element={<VIB360Project />} />
<Route path="/projects/amble" element={<AmbleProject />} />
<Route path="/projects/amoz" element={<AmozProject />} />
<Route path="/projects/simpletend" element={<SimpliTendProject />} />
{/* INSIGHT PAGES */} {/* ARTICLE PAGES */}
<Route path="/insights/ux-review-presentations" element={<UXReviewPresentations />} /> <Route path="/articles/future-of-ai-healthcare" element={<FutureOfAIHealthcare />} />
<Route path="/insights/migrating-to-linear-101" element={<MigratingToLinear101 />} /> <Route path="/articles/compliance-ready-systems-fintech" element={<ComplianceReadyFintech />} />
<Route path="/insights/building-your-api-stack" element={<BuildingYourAPIStack />} /> <Route path="/articles/legacy-system-scaling" element={<LegacySystemScaling />} />
<Route path="/articles/automation-reshaping-business" element={<AutomationReshapingBusiness />} />
{/* PLACEHOLDER */} {/* INSIGHT PAGES */}
{/* <Route path="/comming-soon" element={<CaseStudyComingSoon projectTitle="Coming Soon Project" />} /> */} <Route path="/insights/ux-review-presentations" element={<UXReviewPresentations />} />
</Routes> <Route path="/insights/migrating-to-linear-101" element={<MigratingToLinear101 />} />
<Route path="/insights/building-your-api-stack" element={<BuildingYourAPIStack />} />
{/* PLACEHOLDER */}
{/* <Route path="/comming-soon" element={<CaseStudyComingSoon projectTitle="Coming Soon Project" />} /> */}
</Routes>
); );
export const dynamicRoutes = { export const dynamicRoutes = {