10 Commits

48 changed files with 1130 additions and 658 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

@@ -1,5 +1,6 @@
import { motion } from "framer-motion";
import { GridPattern } from "./GridPattern";
import Flag from 'react-world-flags';
const companyLogos = [
{ name: "TechFlow Solutions", logo: null, width: "140" },
@@ -38,90 +39,97 @@ const companyLogos = [
{ name: "InnovateLab", logo: null, width: "120" }
];
const countryFlags = [
{
name: "United States",
alt: "United States flag icon",
flagSvg: (
<svg viewBox="0 0 24 18" className="w-8 h-6">
<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="4.15" 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="12.46" fill="white"/>
<rect width="24" height="1.38" y="15.23" fill="white"/>
<rect width="9.6" height="9.69" fill="#3C3B6E"/>
</svg>
)
},
{
name: "United Kingdom",
alt: "United Kingdom flag icon",
flagSvg: (
<svg viewBox="0 0 24 18" className="w-8 h-6">
<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="#C8102E" strokeWidth="1"/>
<path d="M12 0V18M0 9H24" stroke="white" strokeWidth="3"/>
<path d="M12 0V18M0 9H24" stroke="#C8102E" strokeWidth="2"/>
</svg>
)
},
{
name: "India",
alt: "India flag icon",
flagSvg: (
<svg viewBox="0 0 24 18" className="w-8 h-6">
<rect width="24" height="6" fill="#FF9933"/>
<rect width="24" height="6" y="6" fill="white"/>
<rect width="24" height="6" y="12" fill="#138808"/>
<circle cx="12" cy="9" r="2" fill="none" stroke="#000080" strokeWidth="0.3"/>
<g transform="translate(12,9)">
{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})`}/>
))}
</g>
</svg>
)
},
{
name: "Canada",
alt: "Canada flag icon",
flagSvg: (
<svg viewBox="0 0 24 18" className="w-8 h-6">
<rect width="6" height="18" fill="#FF0000"/>
<rect width="12" height="18" x="6" fill="white"/>
<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"/>
</svg>
)
},
{
name: "Australia",
alt: "Australia flag icon",
flagSvg: (
<svg viewBox="0 0 24 18" className="w-8 h-6">
<rect width="24" height="18" fill="#012169"/>
<g transform="scale(0.5)">
<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="#C8102E" strokeWidth="1"/>
<path d="M12 0V18M0 9H24" stroke="white" strokeWidth="3"/>
<path d="M12 0V18M0 9H24" stroke="#C8102E" strokeWidth="2"/>
</g>
<g fill="white">
<circle cx="18" cy="6" r="0.5"/>
<circle cx="20" cy="8" r="0.3"/>
<circle cx="19" cy="10" r="0.4"/>
<circle cx="21" cy="12" r="0.3"/>
<circle cx="18" cy="14" r="0.5"/>
</g>
</svg>
)
}
];
// const countryFlags = [
// {
// name: "United States",
// alt: "United States flag icon",
// flagSvg: (
// <svg viewBox="0 0 24 18" className="w-8 h-6">
// <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="4.15" 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="12.46" fill="white"/>
// <rect width="24" height="1.38" y="15.23" fill="white"/>
// <rect width="9.6" height="9.69" fill="#3C3B6E"/>
// </svg>
// )
// },
// {
// name: "United Kingdom",
// alt: "United Kingdom flag icon",
// flagSvg: (
// <svg viewBox="0 0 24 18" className="w-8 h-6">
// <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="#C8102E" strokeWidth="1"/>
// <path d="M12 0V18M0 9H24" stroke="white" strokeWidth="3"/>
// <path d="M12 0V18M0 9H24" stroke="#C8102E" strokeWidth="2"/>
// </svg>
// )
// },
// {
// name: "India",
// alt: "India flag icon",
// flagSvg: (
// <svg viewBox="0 0 24 18" className="w-8 h-6">
// <rect width="24" height="6" fill="#FF9933"/>
// <rect width="24" height="6" y="6" fill="white"/>
// <rect width="24" height="6" y="12" fill="#138808"/>
// <circle cx="12" cy="9" r="2" fill="none" stroke="#000080" strokeWidth="0.3"/>
// <g transform="translate(12,9)">
// {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})`}/>
// ))}
// </g>
// </svg>
// )
// },
// {
// name: "Canada",
// alt: "Canada flag icon",
// flagSvg: (
// <svg viewBox="0 0 24 18" className="w-8 h-6">
// <rect width="6" height="18" fill="#FF0000"/>
// <rect width="12" height="18" x="6" fill="white"/>
// <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"/>
// </svg>
// )
// },
// {
// name: "Australia",
// alt: "Australia flag icon",
// flagSvg: (
// <svg viewBox="0 0 24 18" className="w-8 h-6">
// <rect width="24" height="18" fill="#012169"/>
// <g transform="scale(0.5)">
// <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="#C8102E" strokeWidth="1"/>
// <path d="M12 0V18M0 9H24" stroke="white" strokeWidth="3"/>
// <path d="M12 0V18M0 9H24" stroke="#C8102E" strokeWidth="2"/>
// </g>
// <g fill="white">
// <circle cx="18" cy="6" r="0.5"/>
// <circle cx="20" cy="8" r="0.3"/>
// <circle cx="19" cy="10" r="0.4"/>
// <circle cx="21" cy="12" r="0.3"/>
// <circle cx="18" cy="14" r="0.5"/>
// </g>
// </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 = () => (
<motion.div
initial={{ opacity: 0, y: 20 }}
@@ -136,15 +144,15 @@ const ProjectImageCircles = () => (
key={index}
initial={{ opacity: 0, scale: 0 }}
whileInView={{ opacity: 1, scale: 1 }}
transition={{
duration: 0.5,
transition={{
duration: 0.5,
delay: 0.5 + (index * 0.1),
type: "spring",
stiffness: 200
stiffness: 200
}}
viewport={{ once: true }}
whileHover={{
scale: 1.1,
whileHover={{
scale: 1.1,
zIndex: 10,
transition: { duration: 0.2 }
}}
@@ -154,19 +162,20 @@ const ProjectImageCircles = () => (
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
<div
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}
>
{flag.flagSvg}
<Flag code={flag.code} style={{ width: '40px', height: '30px' }} />
</div>
</div>
{/* Subtle glow effect */}
<div className="absolute inset-0 w-16 h-16 transition-opacity duration-300 rounded-full opacity-0 bg-gradient-to-br from-accent/10 to-transparent group-hover:opacity-100"></div>
{/* Tooltip */}
<div className="absolute -top-12 left-1/2 transform -translate-x-1/2 bg-[#0E0E0E] text-white text-xs px-3 py-1.5 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none shadow-lg border border-white/10 z-50">
<div className="text-center">
@@ -181,7 +190,7 @@ const ProjectImageCircles = () => (
);
const LogoCard = ({ name, width }: { name: string; width: string }) => (
<div
<div
className="flex items-center justify-center h-16 px-6 transition-all duration-300 border shadow-lg bg-white/8 rounded-xl border-white/10 hover:scale-105 hover:bg-white/12 hover:border-accent/20 backdrop-blur-sm group"
style={{ minWidth: `${width}px` }}
>
@@ -219,7 +228,7 @@ export const ClientLogos = () => {
return (
<section className="relative py-20 bg-[#121212] border-y border-white/5 overflow-hidden">
<GridPattern strokeDasharray="4 2" />
<div className="container relative z-10 px-6 mx-auto lg:px-8">
<motion.div
initial={{ opacity: 0, y: 30 }}
@@ -232,10 +241,10 @@ export const ClientLogos = () => {
Trusted by Founders and CTOs Across 15+ Countries
</h2>
</motion.div>
{/* Project Image Circles */}
<ProjectImageCircles />
{/* Company Logos Ticker */}
<div className="overflow-hidden">
<MarqueeRow logos={companyLogos} />

View File

@@ -185,7 +185,7 @@ const FeaturedCaseStudies = () => {
Featured Success Stories
</h2>
<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>
</motion.div>
@@ -250,11 +250,11 @@ const FeaturedCaseStudies = () => {
>
<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' :
study.accentColor === 'green' ? 'from-green-500 to-emerald-500' :
study.accentColor === 'purple' ? 'from-purple-500 to-pink-500' :
study.accentColor === 'cyan' ? 'from-cyan-500 to-blue-500' :
study.accentColor === 'orange' ? 'from-orange-500 to-red-500' :
'from-emerald-500 to-teal-500'
study.accentColor === 'green' ? 'from-green-500 to-emerald-500' :
study.accentColor === 'purple' ? 'from-purple-500 to-pink-500' :
study.accentColor === 'cyan' ? 'from-cyan-500 to-blue-500' :
study.accentColor === 'orange' ? 'from-orange-500 to-red-500' :
'from-emerald-500 to-teal-500'
} flex items-center justify-center flex-shrink-0`}>
<AchievementIcon className="w-5 h-5 text-white" />
</div>
@@ -346,8 +346,13 @@ const FeaturedCaseStudies = () => {
<h3 className="mb-12 text-3xl font-semibold text-center text-white lg:text-4xl">
More Success Stories
</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) => {
const AchievementIcon = story.keyAchievement.icon;
@@ -361,6 +366,7 @@ const FeaturedCaseStudies = () => {
className="h-full group"
>
<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"
onClick={() => {
if (story.title === 'TradersCircuit') {
@@ -397,11 +403,11 @@ const FeaturedCaseStudies = () => {
>
<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' :
story.accentColor === 'green' ? 'from-green-500 to-emerald-500' :
story.accentColor === 'purple' ? 'from-purple-500 to-pink-500' :
story.accentColor === 'cyan' ? 'from-cyan-500 to-blue-500' :
story.accentColor === 'orange' ? 'from-orange-500 to-red-500' :
'from-emerald-500 to-teal-500'
story.accentColor === 'green' ? 'from-green-500 to-emerald-500' :
story.accentColor === 'purple' ? 'from-purple-500 to-pink-500' :
story.accentColor === 'cyan' ? 'from-cyan-500 to-blue-500' :
story.accentColor === 'orange' ? 'from-orange-500 to-red-500' :
'from-emerald-500 to-teal-500'
} flex items-center justify-center flex-shrink-0`}>
<AchievementIcon className="w-5 h-5 text-white" />
</div>

View File

@@ -70,7 +70,8 @@ export function HeroSection() {
animate={{ opacity: 1, y: 0 }}
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.p

View File

@@ -1,10 +1,10 @@
import { motion } from "framer-motion";
import {
CreditCard,
Heart,
ShoppingCart,
GraduationCap,
Truck,
import {
CreditCard,
Heart,
ShoppingCart,
GraduationCap,
Truck,
Video,
Building,
Plane,
@@ -34,13 +34,13 @@ const industries = [
{ name: "SaaS", icon: Cloud, link: "/industries/financial-services/wealthtech-platforms" }
];
const IndustryCard = ({ industry, index, onClick }: {
industry: { name: string; icon: any; link: string };
const IndustryCard = ({ industry, index, onClick }: {
industry: { name: string; icon: any; link: string };
index: number;
onClick: (link: string) => void;
}) => {
const Icon = industry.icon;
return (
<motion.div
initial={{ opacity: 0, y: 30 }}
@@ -71,7 +71,7 @@ export const HorizontalTagScroller = () => {
return (
<section className="relative py-20 bg-[#0E0E0E] overflow-hidden">
<GridPattern strokeDasharray="4 2" />
<div className="relative z-10 container mx-auto px-6 lg:px-8">
<motion.div
initial={{ opacity: 0, y: 30 }}
@@ -84,15 +84,16 @@ export const HorizontalTagScroller = () => {
Tailored Solutions for Your Industry
</h2>
<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>
</motion.div>
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 max-w-7xl mx-auto">
{industries.map((industry, index) => (
<IndustryCard
key={industry.name}
industry={industry}
<IndustryCard
key={industry.name}
industry={industry}
index={index}
onClick={handleIndustryClick}
/>

View File

@@ -461,7 +461,13 @@ const navigationData = {
{ text: "Careers", icon: Briefcase, href: "/company/careers" },
],
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: "Client Testimonials",
@@ -615,11 +621,15 @@ const MegaMenu = ({
timeoutRef,
}: MegaMenuProps) => {
const navigate = useNavigate();
if (!isOpen) return null;
const handleNavigate = (path: string) => {
navigate(path);
const handleNavigate = (path: string, target?: string) => {
if (target === "_blank") {
window.open(path, "_blank", "noopener,noreferrer");
} else {
navigate(path);
}
onClose();
};
@@ -639,7 +649,7 @@ const MegaMenu = ({
className="font-semibold text-white text-sm cursor-pointer hover:text-[#E5195E] transition-colors"
onClick={(e) => {
e.preventDefault();
service.href && handleNavigate(service.href);
handleNavigate(service.href);
}}
>
{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"
onClick={(e) => {
e.preventDefault();
subService.href && handleNavigate(subService.href);
handleNavigate(subService.href);
}}
>
{subService.name}
@@ -685,7 +695,7 @@ const MegaMenu = ({
className="font-semibold text-white text-lg cursor-pointer hover:text-[#E5195E] transition-colors"
onClick={(e) => {
e.preventDefault();
category.href && handleNavigate(category.href);
handleNavigate(category.href);
}}
>
{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"
onClick={(e) => {
e.preventDefault();
service.href && handleNavigate(service.href);
handleNavigate(service.href);
}}
>
{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"
onClick={(e) => {
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">
@@ -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"
onClick={(e) => {
e.preventDefault();
item.href && handleNavigate(item.href);
handleNavigate(item.href);
}}
>
{item.name}
@@ -790,10 +800,12 @@ const MegaMenu = ({
<a
key={item.text}
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"
onClick={(e) => {
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">
@@ -969,8 +981,12 @@ export const Navigation = () => {
}
};
const handleNavigation = (path: string) => {
navigate(path);
const handleNavigation = (path: string, target?: string) => {
if (target === "_blank") {
window.open(path, "_blank", "noopener,noreferrer");
} else {
navigate(path);
}
setIsMobileMenuOpen(false);
setActiveMenu(null);
};
@@ -1014,9 +1030,8 @@ export const Navigation = () => {
{item}
{hasDropdown(item) && (
<ChevronDown
className={`w-4 h-4 transition-transform duration-200 ${
activeMenu === item ? "rotate-180" : ""
}`}
className={`w-4 h-4 transition-transform duration-200 ${activeMenu === item ? "rotate-180" : ""
}`}
/>
)}
</a>
@@ -1029,7 +1044,8 @@ export const Navigation = () => {
onClick={() => handleNavigation("/start-a-project")}
className="hidden lg:flex"
>
Get Started
{/* Get Started */}
Contact Us
</Button>
{/* Mobile Menu Button */}
@@ -1084,11 +1100,32 @@ export const Navigation = () => {
{item}
</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
onClick={() => handleNavigation("/start-a-project")}
className="w-full mt-4"
>
Get Started
{/* Get Started */}
Contact Us
</Button>
</div>
</div>

View File

@@ -15,29 +15,46 @@ const packages: Package[] = [
icon: <Tablet className="w-8 h-8" />,
title: "The Blueprint",
timeline: "Product Definition in 1 Week",
priceRange: "$1,500 - $2,500",
// priceRange: "$1,500 - $2,500",
priceRange: "",
features: [
// "Strategy & roadmap",
// "User flows & wireframes",
// "Technical architecture"
"Strategy & roadmap",
"User flows & wireframes",
"Technical architecture"
"Technical architecture",
"The Prototype",
"Working Demo in 2 Weeks"
]
},
{
icon: <Rocket className="w-8 h-8" />,
title: "The Prototype",
timeline: "Working Demo in 2 Weeks",
priceRange: "$6,000 - $8,000",
// priceRange: "$6,000 - $8,000",
priceRange: "",
features: [
// "Functional web or mobile prototype",
// "Core features implemented",
// "User testing ready"
"Functional web or mobile prototype",
"Core features implemented",
"User testing ready"
"User testing ready",
"The Launchpad",
"Market-Ready MVP in 6 Weeks"
]
},
{
icon: <Crown className="w-8 h-8" />,
title: "The Launchpad",
timeline: "Market-Ready MVP in 6 Weeks",
priceRange: "$20,000 - $30,000",
// priceRange: "$20,000 - $30,000",
priceRange: "",
features: [
"Full website or app",
"SEO-optimized & scalable",
@@ -50,7 +67,7 @@ export const PackagesSection = () => {
return (
<section className="relative py-20 bg-background overflow-hidden">
<GridPattern strokeDasharray="4 2" />
<div className="relative z-10 container mx-auto px-6 lg:px-8">
<motion.div
initial={{ opacity: 0, y: 30 }}
@@ -63,7 +80,7 @@ export const PackagesSection = () => {
Choose Your Speed. We'll Deliver Your Launch.
</h2>
</motion.div>
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-7xl mx-auto">
{packages.map((pkg, index) => (
<motion.div
@@ -78,22 +95,22 @@ export const PackagesSection = () => {
<div className="mb-6 inline-flex items-center justify-center w-16 h-16 rounded-full bg-accent/10 text-accent group-hover:bg-accent/20 group-hover:scale-110 transition-all duration-300">
{pkg.icon}
</div>
{/* Title */}
<h3 className="text-2xl font-semibold text-foreground mb-2 group-hover:text-accent transition-colors duration-300">
{pkg.title}
</h3>
{/* Timeline */}
<p className="text-muted-foreground mb-4">
{pkg.timeline}
</p>
{/* Price Range */}
<div className="text-3xl font-semibold text-foreground mb-8">
{pkg.priceRange}
</div>
{/* Features List */}
<ul className="space-y-4">
{pkg.features.map((feature, idx) => (

View File

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

View File

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

View File

@@ -9,7 +9,7 @@ export const SplitCallToAction = () => {
return (
<section className="relative py-20 overflow-hidden">
<GridPattern strokeDasharray="4 2" />
<div className="relative z-10 container mx-auto px-6 lg:px-8">
<div className="grid lg:grid-cols-2 gap-16 items-center max-w-6xl mx-auto">
{/* Left Content */}
@@ -25,10 +25,10 @@ export const SplitCallToAction = () => {
Ready to Build with WDI?
</h2>
<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>
</div>
<div className="space-y-6">
<div className="flex items-center gap-4">
<div className="w-12 h-12 bg-white/10 backdrop-blur-sm rounded-lg border border-white/20 flex items-center justify-center">
@@ -39,7 +39,7 @@ export const SplitCallToAction = () => {
<div className="text-muted-foreground text-sm">No sales pitch, just honest advice</div>
</div>
</div>
<div className="flex items-center gap-4">
<div className="w-12 h-12 bg-white/10 backdrop-blur-sm rounded-lg border border-white/20 flex items-center justify-center">
<Clock className="w-6 h-6 text-accent" />
@@ -49,7 +49,7 @@ export const SplitCallToAction = () => {
<div className="text-muted-foreground text-sm">Available across all time zones</div>
</div>
</div>
<div className="flex items-center gap-4">
<div className="w-12 h-12 bg-white/10 backdrop-blur-sm rounded-lg border border-white/20 flex items-center justify-center">
<Zap className="w-6 h-6 text-accent" />
@@ -61,7 +61,7 @@ export const SplitCallToAction = () => {
</div>
</div>
</motion.div>
{/* Right CTA */}
<motion.div
initial={{ opacity: 0, x: 50 }}
@@ -82,10 +82,10 @@ export const SplitCallToAction = () => {
Let's discuss your project and explore how we can help you succeed.
</p>
</div>
<div className="space-y-8">
<Button
size="lg"
<Button
size="lg"
className="w-full bg-accent hover:bg-accent/90 text-accent-foreground py-4 text-lg border-0 rounded-lg"
onClick={() => navigate('/start-a-project')}
>
@@ -93,7 +93,7 @@ export const SplitCallToAction = () => {
Schedule Free Call
</Button>
</div>
<div className="mt-8 pt-8 border-t border-border">
<div className="grid grid-cols-3 gap-4 text-center text-sm">
<div>

261
package-lock.json generated
View File

@@ -56,6 +56,7 @@
"react-responsive-masonry": "^2.7.1",
"react-router-dom": "^7.6.3",
"react-slick": "^0.30.3",
"react-world-flags": "^1.6.0",
"recharts": "^2.15.4",
"slick-carousel": "^1.8.1",
"sonner": "^2.0.3",
@@ -142,7 +143,6 @@
"integrity": "sha512-UlLAnTPrFdNGoFtbSXwcGFQBtQZJCNjaN6hQNP3UPvuNXT1i82N26KL3dZeIpNalWywr9IuQuncaAfUaS1g6sQ==",
"dev": true,
"license": "MIT",
"peer": true,
"dependencies": {
"@ampproject/remapping": "^2.2.0",
"@babel/code-frame": "^7.27.1",
@@ -3172,7 +3172,6 @@
"integrity": "sha512-Qm9OYVOFHFYg3wJoTSrz80hoec5Lia/dPp84do3X7dZvLikQvM1YpmvTBEdIr/e+U8HTkFjLHLnl78K/qjf+jQ==",
"devOptional": true,
"license": "MIT",
"peer": true,
"dependencies": {
"undici-types": "~7.8.0"
}
@@ -3190,7 +3189,6 @@
"integrity": "sha512-/LDXMQh55EzZQ0uVAZmKKhfENivEvWz6E+EYzh+/MCjMhNsotd+ZHhBGIjFDTi6+fz0OhQQQLbTgdQIxxCsC0w==",
"devOptional": true,
"license": "MIT",
"peer": true,
"dependencies": {
"@types/prop-types": "*",
"csstype": "^3.0.2"
@@ -3202,7 +3200,6 @@
"integrity": "sha512-MEe3UeoENYVFXzoXEWsvcpg6ZvlrFNlOQ7EOsvhI3CfAXwzPfO8Qwuxd40nepsYKqyyVQnTdEfv68q91yLcKrQ==",
"devOptional": true,
"license": "MIT",
"peer": true,
"peerDependencies": {
"@types/react": "^18.0.0"
}
@@ -3295,7 +3292,6 @@
"integrity": "sha512-tbsV1jPne5CkFQCgPBcDOt30ItF7aJoZL997JSF7MhGQqOeT3svWRYxiqlfA5RUdlHN6Fi+EI9bxqbdyAUZjYQ==",
"dev": true,
"license": "BSD-2-Clause",
"peer": true,
"dependencies": {
"@typescript-eslint/scope-manager": "6.21.0",
"@typescript-eslint/types": "6.21.0",
@@ -3486,7 +3482,6 @@
"integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
"dev": true,
"license": "MIT",
"peer": true,
"bin": {
"acorn": "bin/acorn"
},
@@ -3647,6 +3642,12 @@
"integrity": "sha512-cRygWd7kGBQO3VEhPiTgq4Wc43ctsM+o46urrmPOiuAe+07fzlSB9OJVdpgDL0jPqXUVQ9ht7aq7kxOeJHRK+w==",
"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": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
@@ -3690,7 +3691,6 @@
}
],
"license": "MIT",
"peer": true,
"dependencies": {
"caniuse-lite": "^1.0.30001726",
"electron-to-chromium": "^1.5.173",
@@ -4071,6 +4071,15 @@
"dev": true,
"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": {
"version": "0.0.1",
"resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -4116,6 +4125,80 @@
"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": {
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
@@ -4366,6 +4449,61 @@
"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": {
"version": "1.5.182",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.182.tgz",
@@ -4377,8 +4515,7 @@
"version": "8.6.0",
"resolved": "https://registry.npmjs.org/embla-carousel/-/embla-carousel-8.6.0.tgz",
"integrity": "sha512-SjWyZBHJPbqxHOzckOfo8lHisEaJWmwd23XppYFYVh10bU66/Pn5tkVkbkCMZVdbUE5eTCI2nD8OyIP4Z+uwkA==",
"license": "MIT",
"peer": true
"license": "MIT"
},
"node_modules/embla-carousel-react": {
"version": "8.6.0",
@@ -4421,6 +4558,18 @@
"integrity": "sha512-/KujNpO+PT63F7Hlpu4h3pE3TokKRHN26JYmQpPyjkRD/N57R7bPDNojMXdi7uveAKjYB7yQnartCxZnFWr0Xw==",
"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": {
"version": "0.21.5",
"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.",
"dev": true,
"license": "MIT",
"peer": true,
"dependencies": {
"@eslint-community/eslint-utils": "^4.2.0",
"@eslint-community/regexpp": "^4.6.1",
@@ -5599,6 +5747,12 @@
"dev": true,
"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": {
"version": "1.4.1",
"resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -5749,6 +5903,18 @@
"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": {
"version": "4.1.1",
"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",
"integrity": "sha512-cMtCyuJmTx/bg2HCpHo3ZLeF7FZnBOapLqZHr2AlLeJ5Ul0Zu2mUJJz051Fdwu/Et2YW04ZD+TtU+gVy0ACNCA==",
"license": "MIT",
"peer": true,
"engines": {
"node": "^12.20.0 || ^14.13.1 || >=16.0.0"
},
@@ -5921,7 +6088,6 @@
}
],
"license": "MIT",
"peer": true,
"dependencies": {
"nanoid": "^3.3.11",
"picocolors": "^1.1.1",
@@ -6001,7 +6167,6 @@
"resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
"integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
"license": "MIT",
"peer": true,
"dependencies": {
"loose-envify": "^1.1.0"
},
@@ -6067,7 +6232,6 @@
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
"integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
"license": "MIT",
"peer": true,
"dependencies": {
"loose-envify": "^1.1.0",
"scheduler": "^0.23.2"
@@ -6133,7 +6297,6 @@
"resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz",
"integrity": "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==",
"license": "MIT",
"peer": true,
"dependencies": {
"@types/use-sync-external-store": "^0.0.6",
"use-sync-external-store": "^1.4.0"
@@ -6333,6 +6496,20 @@
"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": {
"version": "2.15.4",
"resolved": "https://registry.npmjs.org/recharts/-/recharts-2.15.4.tgz",
@@ -6375,8 +6552,7 @@
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
"integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
"license": "MIT",
"peer": true
"license": "MIT"
},
"node_modules/redux-thunk": {
"version": "3.1.0",
@@ -6500,6 +6676,15 @@
"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": {
"version": "0.23.2",
"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
@@ -6526,7 +6711,8 @@
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/semver-compare/-/semver-compare-1.0.0.tgz",
"integrity": "sha512-YM3/ITh2MJ5MtzaM429anh+x2jiLVjqILF4m4oyQB18W7Ggea7BfqdH/wGMK7dDiMghv/6WG7znWMwUDzJiXow==",
"license": "MIT"
"license": "MIT",
"peer": true
},
"node_modules/set-cookie-parser": {
"version": "2.7.1",
@@ -6646,6 +6832,37 @@
"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": {
"version": "2.6.0",
"resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.6.0.tgz",
@@ -6660,8 +6877,7 @@
"version": "4.1.11",
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.11.tgz",
"integrity": "sha512-2E9TBm6MDD/xKYe+dvJZAmg3yxIEDNRc0jwlNyDg/4Fil2QcSLjFKGVff0lAf1jjeaArlG/M75Ey/EYr/OJtBA==",
"license": "MIT",
"peer": true
"license": "MIT"
},
"node_modules/tailwindcss-animate": {
"version": "1.0.7",
@@ -6846,7 +7062,6 @@
"integrity": "sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ==",
"dev": true,
"license": "Apache-2.0",
"peer": true,
"bin": {
"tsc": "bin/tsc",
"tsserver": "bin/tsserver"
@@ -7002,7 +7217,6 @@
"resolved": "https://registry.npmjs.org/vite/-/vite-5.4.19.tgz",
"integrity": "sha512-qO3aKv3HoQC8QKiNSTuUM1l9o/XX3+c+VTgLHbJWHZGeTPVAg2XwazI9UWzoxjIJCGCV2zU60uqMzjeLZuULqA==",
"license": "MIT",
"peer": true,
"dependencies": {
"esbuild": "^0.21.3",
"postcss": "^8.4.43",
@@ -7083,6 +7297,11 @@
"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": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",

View File

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

View File

@@ -126,8 +126,7 @@ const APIHeroWithCTA = () => {
</h1>
<p className="text-lg text-gray-300 leading-relaxed max-w-lg">
Building powerful, scalable, and secure backend infrastructure
and APIs to fuel your web, mobile, and IoT applications.
Building powerful, scalable, and secure backend infrastructure enhanced by AI mobile app technology to fuel your web, mobile, and IoT applications.
</p>
</div>
@@ -485,6 +484,12 @@ const APIBenefits = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
The Foundation of Your Digital Success
</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
@@ -620,6 +625,13 @@ const APIProcess = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
Our Methodical Approach to Backend Excellence
</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>
<div className="relative">
@@ -774,6 +786,14 @@ const APIServices = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
Our Specialized Backend Development Services
</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
@@ -1017,8 +1037,7 @@ const APITechStack = () => {
Building Secure and High-Performance Backends
</h2>
<p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
With industry-leading technologies that ensure scalability,
security, and reliability.
With industry-leading technologies enhanced by AI iOS development that ensure scalability, security, and reliability for mission-critical applications.
</p>
</motion.div>
@@ -1306,6 +1325,13 @@ const APICaseStudies = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-white mb-8">
Robust Backends Powering Digital Innovation
</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
@@ -1517,8 +1543,7 @@ const HireBackendDevelopers = () => {
Hire Specialized Backend & API Developers
</h2>
<p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
Access our pool of expert backend engineers proficient in various
languages, databases, and cloud platforms.
Access WDI's pool of expert iOS mobile app development engineers proficient in Node.js, Python, MongoDB, AWS, and seamless cloud integrations.
</p>
</motion.div>
@@ -1721,8 +1746,7 @@ const APIFinalCTA = () => {
viewport={{ once: true }}
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
expert API and backend development services.
Ensure your applications are fast, secure, and scalable with our expert AI-powered design API and backend development services.
</motion.p>
<motion.div

View File

@@ -129,9 +129,7 @@ const AdminHeroWithCTA = () => {
</h1>
<p className="text-lg text-gray-300 leading-relaxed max-w-lg">
Empower your team with custom, data-rich admin interfaces and
dashboards for streamlined operations, reporting, and
management.
Empower your team with custom, data-rich admin interfaces enhanced by AI mobile app features for streamlined operations, reporting, and management.
</p>
</div>
@@ -475,6 +473,13 @@ const AdminBenefits = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
Why Choose a Bespoke Admin Panel from WDI?
</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
@@ -604,6 +609,12 @@ const AdminProcess = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
Our Approach to Building Your Operational Command Center
</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>
<div className="relative">
@@ -745,6 +756,13 @@ const AdminServices = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
Our Specialized Admin & Dashboard Solutions
</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
@@ -1128,6 +1146,13 @@ const AdminCaseStudies = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-white mb-8">
Streamlined Operations with WDI-Built Admin Panels
</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
@@ -1316,7 +1341,7 @@ const HireDevelopers = () => {
Need Expert Developers for Your Admin Panel?
</h2>
<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>
</motion.div>
@@ -1514,8 +1539,7 @@ const AdminFinalCTA = () => {
viewport={{ once: true }}
className="text-xl text-muted-foreground mb-12 max-w-2xl mx-auto leading-relaxed"
>
Transform your internal operations with efficient, data-driven
dashboards and management systems.
Transform your internal operations with efficient, data-driven dashboards enhanced by AI mobile app technology and advanced management systems.
</motion.p>
<motion.div

View File

@@ -4,6 +4,7 @@ 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 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 { ImageWithFallback } from "../components/figma/ImageWithFallback";
import { useNavigate } from "react-router-dom";
@@ -13,7 +14,7 @@ export const AmbleProject = () => {
return (
<div className="dark min-h-screen bg-background">
{/* <Navigation /> */}
{/* Hero Section */}
<section className="pt-24 pb-16 bg-background relative overflow-hidden">
<div className="absolute inset-0 bg-gradient-to-br from-[#E5195E]/5 via-transparent to-transparent" />
@@ -26,11 +27,11 @@ export const AmbleProject = () => {
Navigation App Case Study
</Badge>
</div>
<h1 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 text-white font-manrope">
Amble App
</h1>
<p className="text-xl text-muted-foreground mb-8 font-manrope">
Accessible Navigation & Community Engagement App - Making urban exploration easier and more inclusive for everyone
</p>
@@ -86,7 +87,7 @@ export const AmbleProject = () => {
{/* CTA Buttons */}
<div className="flex flex-col sm:flex-row gap-4">
<Button
<Button
size="lg"
className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white font-manrope"
onClick={() => navigate('/start-a-project')}
@@ -94,7 +95,7 @@ export const AmbleProject = () => {
Build Your Navigation App
<ArrowRight className="w-5 h-5 ml-2" />
</Button>
<Button
<Button
size="lg"
variant="outline"
className="border-white/20 text-white hover:bg-white/10 font-manrope"
@@ -107,8 +108,8 @@ export const AmbleProject = () => {
<div className="relative">
<div className="aspect-square bg-gradient-to-br from-[#E5195E]/20 to-transparent rounded-2xl p-8 border border-white/10">
<ImageWithFallback
src="/images/amble-app-mockup.jpg"
<ImageWithFallback
src={ambleImg}
alt="Amble Navigation App"
className="w-full h-full object-cover rounded-lg"
/>
@@ -138,7 +139,7 @@ export const AmbleProject = () => {
<div className="container mx-auto px-6 lg:px-8">
<div className="max-w-6xl mx-auto">
<h2 className="text-3xl font-bold text-white mb-12 text-center font-manrope">Project Overview</h2>
<div className="grid md:grid-cols-3 gap-8">
<Card className="bg-card/50 border-white/10">
<CardContent className="p-6">
@@ -179,7 +180,7 @@ export const AmbleProject = () => {
<div className="container mx-auto px-6 lg:px-8">
<div className="max-w-6xl mx-auto">
<h2 className="text-3xl font-bold text-white mb-12 text-center font-manrope">Project Scope</h2>
<div className="grid md:grid-cols-2 gap-12">
<div>
<h3 className="text-xl font-semibold text-white mb-6 font-manrope">Core Features</h3>
@@ -227,7 +228,7 @@ export const AmbleProject = () => {
<div className="container mx-auto px-6 lg:px-8">
<div className="max-w-6xl mx-auto">
<h2 className="text-3xl font-bold text-white mb-12 text-center font-manrope">Challenges & Solution Architecture</h2>
<div className="grid md:grid-cols-2 gap-12 mb-16">
<div>
<h3 className="text-xl font-semibold text-white mb-6 font-manrope">Technical Challenges</h3>
@@ -312,38 +313,38 @@ export const AmbleProject = () => {
<div className="container mx-auto px-6 lg:px-8">
<div className="max-w-6xl mx-auto">
<h2 className="text-3xl font-bold text-white mb-12 text-center font-manrope">Development Process & Methodology</h2>
<div className="mb-12">
<div className="text-center mb-8">
<p className="text-lg text-muted-foreground font-manrope">
<strong>Agile</strong> (weekly sprints) with weekly sprint planning, mid-sprint QA cycles for early bug detection, and client demos at the end of each sprint
</p>
</div>
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
{[
{
phase: "Discovery & Planning",
{
phase: "Discovery & Planning",
duration: "2 weeks",
description: "Feature prioritization, UI/UX wireframing, technical feasibility review"
},
{
phase: "Design & Prototyping",
{
phase: "Design & Prototyping",
duration: "3 weeks",
description: "Mobile UI design for both platforms, map interface prototypes"
},
{
phase: "Core Development",
{
phase: "Core Development",
duration: "6 weeks",
description: "Walking route module, event listing module, user authentication and profiles"
},
{
phase: "Integration & Testing",
{
phase: "Integration & Testing",
duration: "4 weeks",
description: "Google Maps API integration, push notifications setup, offline mode implementation"
},
{
phase: "Launch & Handover",
{
phase: "Launch & Handover",
duration: "1 week",
description: "App store submission, documentation and client training"
}
@@ -374,7 +375,7 @@ export const AmbleProject = () => {
<div className="container mx-auto px-6 lg:px-8">
<div className="max-w-6xl mx-auto">
<h2 className="text-3xl font-bold text-white mb-12 text-center font-manrope">Key Features & Functionality</h2>
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
{[
{
@@ -426,7 +427,7 @@ export const AmbleProject = () => {
<div className="container mx-auto px-6 lg:px-8">
<div className="max-w-6xl mx-auto">
<h2 className="text-3xl font-bold text-white mb-12 text-center font-manrope">Results & Impact</h2>
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
{[
{ label: "GPS Accuracy", value: "±6m", icon: MapPin, desc: "average accuracy" },
@@ -486,7 +487,7 @@ export const AmbleProject = () => {
<div className="container mx-auto px-6 lg:px-8">
<div className="max-w-4xl mx-auto">
<h2 className="text-3xl font-bold text-white mb-12 text-center font-manrope">Lessons Learned & Best Practices</h2>
<div className="grid md:grid-cols-2 gap-8">
<Card className="bg-card/50 border-white/10">
<CardContent className="p-6">
@@ -551,7 +552,7 @@ export const AmbleProject = () => {
<div className="container mx-auto px-6 lg:px-8">
<div className="max-w-4xl mx-auto">
<h2 className="text-3xl font-bold text-white mb-8 text-center font-manrope">Future Roadmap</h2>
<div className="grid md:grid-cols-2 gap-8">
<Card className="bg-card/50 border-white/10">
<CardContent className="p-6">
@@ -602,7 +603,7 @@ export const AmbleProject = () => {
Create accessible, inclusive mobile applications that empower users to explore and navigate their world with confidence.
</p>
<div className="flex flex-col sm:flex-row gap-4 justify-center">
<Button
<Button
size="lg"
className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white px-8 py-3 font-manrope"
onClick={() => navigate('/start-a-project')}
@@ -610,7 +611,7 @@ export const AmbleProject = () => {
Start Your Project
<ArrowRight className="w-5 h-5 ml-2" />
</Button>
<Button
<Button
size="lg"
variant="outline"
className="border-white/20 text-white hover:bg-white/10 px-8 py-3 font-manrope"

View File

@@ -3,6 +3,7 @@ import { Navigation } from "../components/Navigation";
import { Footer } from "../components/Footer";
import { Button } from "../components/ui/button";
import { Badge } from "../components/ui/badge";
import amozImg from "../assets/amoz.jpg"
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 { ImageWithFallback } from "../components/figma/ImageWithFallback";
@@ -13,7 +14,7 @@ export const AmozProject = () => {
return (
<div className="dark min-h-screen bg-background">
{/* <Navigation /> */}
{/* Hero Section */}
<section className="pt-24 pb-16 bg-background relative overflow-hidden">
<div className="absolute inset-0 bg-gradient-to-br from-[#E5195E]/5 via-transparent to-transparent" />
@@ -26,11 +27,11 @@ export const AmozProject = () => {
AI Social Commerce Case Study
</Badge>
</div>
<h1 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 text-white font-manrope">
Amoz Platform
</h1>
<p className="text-xl text-muted-foreground mb-8 font-manrope">
AI-Powered Social Commerce Platform - Merging social networking and e-commerce with AI-driven recommendations and influencer monetization capabilities
</p>
@@ -56,10 +57,21 @@ export const AmozProject = () => {
<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>
<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" />
<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> */}
<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 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" />
@@ -86,7 +98,7 @@ export const AmozProject = () => {
{/* CTA Buttons */}
<div className="flex flex-col sm:flex-row gap-4">
<Button
<Button
size="lg"
className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white font-manrope"
onClick={() => navigate('/start-a-project')}
@@ -94,7 +106,7 @@ export const AmozProject = () => {
Build Your AI Commerce Platform
<ArrowRight className="w-5 h-5 ml-2" />
</Button>
<Button
<Button
size="lg"
variant="outline"
className="border-white/20 text-white hover:bg-white/10 font-manrope"
@@ -107,8 +119,8 @@ export const AmozProject = () => {
<div className="relative">
<div className="aspect-square bg-gradient-to-br from-[#E5195E]/20 to-transparent rounded-2xl p-8 border border-white/10">
<ImageWithFallback
src="/images/amoz-platform-mockup.jpg"
<ImageWithFallback
src={amozImg}
alt="Amoz AI-Powered Social Commerce Platform"
className="w-full h-full object-cover rounded-lg"
/>
@@ -138,7 +150,7 @@ export const AmozProject = () => {
<div className="container mx-auto px-6 lg:px-8">
<div className="max-w-6xl mx-auto">
<h2 className="text-3xl font-bold text-white mb-12 text-center font-manrope">Project Overview</h2>
<div className="grid md:grid-cols-3 gap-8">
<Card className="bg-card/50 border-white/10">
<CardContent className="p-6">
@@ -179,7 +191,7 @@ export const AmozProject = () => {
<div className="container mx-auto px-6 lg:px-8">
<div className="max-w-6xl mx-auto">
<h2 className="text-3xl font-bold text-white mb-12 text-center font-manrope">Project Scope</h2>
<div className="grid md:grid-cols-2 gap-12">
<div>
<h3 className="text-xl font-semibold text-white mb-6 font-manrope">Core Features</h3>
@@ -227,7 +239,7 @@ export const AmozProject = () => {
<div className="container mx-auto px-6 lg:px-8">
<div className="max-w-6xl mx-auto">
<h2 className="text-3xl font-bold text-white mb-12 text-center font-manrope">Challenges & Solution Architecture</h2>
<div className="grid md:grid-cols-2 gap-12 mb-16">
<div>
<h3 className="text-xl font-semibold text-white mb-6 font-manrope">Technical Challenges</h3>
@@ -312,43 +324,43 @@ export const AmozProject = () => {
<div className="container mx-auto px-6 lg:px-8">
<div className="max-w-6xl mx-auto">
<h2 className="text-3xl font-bold text-white mb-12 text-center font-manrope">Development Process & Methodology</h2>
<div className="mb-12">
<div className="text-center mb-8">
<p className="text-lg text-muted-foreground font-manrope">
<strong>Agile</strong> (2-week sprints) with feature prioritization with merchant and influencer input, weekly demos for stakeholders, continuous integration with automated deployments to staging
</p>
</div>
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
{[
{
phase: "Discovery & Planning",
{
phase: "Discovery & Planning",
duration: "3 weeks",
description: "Market analysis of social commerce trends, AI recommendation system design, payment integration planning"
},
{
phase: "Design & Prototyping",
{
phase: "Design & Prototyping",
duration: "5 weeks",
description: "Wireframes for influencer storefronts & live shopping pages, AI model training on sample product datasets"
},
{
phase: "Core Development",
{
phase: "Core Development",
duration: "10 weeks",
description: "Social feed & product catalog integration, influencer tools & storefronts, recommendation engine integration"
},
{
phase: "Live Shopping & Messaging",
{
phase: "Live Shopping & Messaging",
duration: "5 weeks",
description: "Real-time video streaming module, in-app chat and engagement features"
},
{
phase: "Testing & Optimization",
{
phase: "Testing & Optimization",
duration: "3 weeks",
description: "Load & stress testing for peak events, AI accuracy tuning"
},
{
phase: "Launch & Scaling",
{
phase: "Launch & Scaling",
duration: "2 weeks",
description: "Beta rollout to select merchants & influencers, marketing support and onboarding sessions"
}
@@ -379,7 +391,7 @@ export const AmozProject = () => {
<div className="container mx-auto px-6 lg:px-8">
<div className="max-w-6xl mx-auto">
<h2 className="text-3xl font-bold text-white mb-12 text-center font-manrope">Key Features & Functionality</h2>
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
{[
{
@@ -431,7 +443,7 @@ export const AmozProject = () => {
<div className="container mx-auto px-6 lg:px-8">
<div className="max-w-6xl mx-auto">
<h2 className="text-3xl font-bold text-white mb-12 text-center font-manrope">Results & Impact</h2>
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
{[
{ label: "Merchant Onboarding", value: "5,000+", icon: Users, desc: "first 2 months" },
@@ -492,7 +504,7 @@ export const AmozProject = () => {
<div className="container mx-auto px-6 lg:px-8">
<div className="max-w-4xl mx-auto">
<h2 className="text-3xl font-bold text-white mb-12 text-center font-manrope">Lessons Learned & Best Practices</h2>
<div className="grid md:grid-cols-2 gap-8">
<Card className="bg-card/50 border-white/10">
<CardContent className="p-6">
@@ -557,7 +569,7 @@ export const AmozProject = () => {
<div className="container mx-auto px-6 lg:px-8">
<div className="max-w-4xl mx-auto">
<h2 className="text-3xl font-bold text-white mb-8 text-center font-manrope">Future Roadmap</h2>
<div className="grid md:grid-cols-2 gap-8">
<Card className="bg-card/50 border-white/10">
<CardContent className="p-6">
@@ -608,7 +620,7 @@ export const AmozProject = () => {
Create innovative social commerce solutions that merge AI-powered recommendations with seamless shopping experiences for the next generation of consumers.
</p>
<div className="flex flex-col sm:flex-row gap-4 justify-center">
<Button
<Button
size="lg"
className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white px-8 py-3 font-manrope"
onClick={() => navigate('/start-a-project')}
@@ -616,7 +628,7 @@ export const AmozProject = () => {
Start Your Project
<ArrowRight className="w-5 h-5 ml-2" />
</Button>
<Button
<Button
size="lg"
variant="outline"
className="border-white/20 text-white hover:bg-white/10 px-8 py-3 font-manrope"

View File

@@ -402,8 +402,7 @@ const AndroidKeyBenefits = () => {
Why Develop a Native Android App?
</h2>
<p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
Android development offers unparalleled reach and flexibility for
businesses looking to tap into the world's largest mobile ecosystem.
AI mobile app development offers unparalleled reach and flexibility for businesses looking to tap into the world's largest mobile ecosystem.
</p>
</motion.div>
@@ -793,7 +792,7 @@ const AndroidCaseStudies = () => {
image: ranoutofImage,
results: "3M+ downloads",
gradient: "from-[#007F33]/20 to-[#007F33]/10",
buttonLink: "/projects/ranoutof",
buttonLink: "/projects/ranoutof",
},
{
title: "Financial Trading Platform",
@@ -803,7 +802,7 @@ const AndroidCaseStudies = () => {
image: tradersCircuitImage,
results: "800K+ users",
gradient: "from-blue-500/20 to-cyan-500/20",
buttonLink: "/projects/traderscircuit",
buttonLink: "/projects/traderscircuit",
},
{
title: "Real Estate Investment Platform",
@@ -813,7 +812,7 @@ const AndroidCaseStudies = () => {
image: prospertyImage,
results: "1.5M+ downloads",
gradient: "from-[#a98453]/20 to-[#a98453]/10",
buttonLink: "/projects/prosperty",
buttonLink: "/projects/prosperty",
},
];
@@ -831,8 +830,7 @@ const AndroidCaseStudies = () => {
Android Apps That Define Industries
</h2>
<p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
Discover how we've helped businesses succeed with powerful Android
applications that leverage the platform's capabilities.
Discover how our AI mobile application developers have helped businesses succeed with powerful Android applications that leverage AI-powered features.
</p>
</motion.div>

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 { ImageWithFallback } from "../components/figma/ImageWithFallback";
import { useNavigate } from "react-router-dom";
import hospitalAi from "../assets/aihospital.jpg"
const articleData = {
id: "automation-reshaping-business",
@@ -276,7 +277,8 @@ const articleData = {
title: "The Future of AI in Healthcare: Transforming Patient Care Through Technology",
excerpt: "Discover how artificial intelligence is revolutionizing healthcare delivery and patient outcomes.",
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"
}
]
@@ -286,7 +288,7 @@ export const AutomationReshapingBusiness = () => {
const handleShare = (platform: string) => {
const url = encodeURIComponent(window.location.href);
const title = encodeURIComponent(articleData.title);
let shareUrl = '';
switch (platform) {
case 'linkedin':
@@ -299,7 +301,7 @@ export const AutomationReshapingBusiness = () => {
shareUrl = `https://wa.me/?text=${title} ${url}`;
break;
}
if (shareUrl) {
window.open(shareUrl, '_blank', 'width=600,height=400');
}
@@ -310,7 +312,7 @@ export const AutomationReshapingBusiness = () => {
return (
<div className="dark min-h-screen bg-background">
{/* <Navigation /> */}
{/* Hero Section */}
<section className="pt-24 pb-16 bg-background">
<div className="container mx-auto px-6 lg:px-8">
@@ -377,13 +379,13 @@ export const AutomationReshapingBusiness = () => {
<section className="py-16 bg-card/50">
<div className="container mx-auto px-6 lg:px-8">
<div className="grid lg:grid-cols-10 gap-12 max-w-7xl mx-auto">
{/* Article Content - 70% */}
<article className="lg:col-span-7">
<Card className="bg-background/50 border-white/10">
<CardContent className="p-8 lg:p-12">
{/* Article Body */}
<div
<div
className="prose prose-invert prose-lg max-w-none
prose-headings:text-white prose-headings:font-semibold
prose-h2:text-3xl prose-h2:mt-12 prose-h2:mb-6
@@ -478,15 +480,15 @@ export const AutomationReshapingBusiness = () => {
{/* Sidebar - 30% */}
<aside className="lg:col-span-3 space-y-8">
{/* Related Articles */}
<Card className="bg-background/50 border-white/10">
<CardContent className="p-6">
<h3 className="text-xl font-semibold text-white mb-6">You Might Also Like</h3>
<div className="space-y-6">
{articleData.relatedArticles.map((article) => (
<div
key={article.id}
<div
key={article.id}
className="group cursor-pointer"
onClick={() => navigate(`/articles/${article.id}`)}
>
@@ -508,11 +510,11 @@ export const AutomationReshapingBusiness = () => {
</div>
))}
</div>
<Separator className="my-6" />
<Button
variant="outline"
<Button
variant="outline"
className="w-full border-white/20 text-white hover:bg-white/10"
onClick={() => navigate('/resources/blog')}
>
@@ -527,10 +529,10 @@ export const AutomationReshapingBusiness = () => {
<CardContent className="p-6">
<h3 className="text-xl font-semibold text-white mb-4">About WDI</h3>
<p className="text-muted-foreground text-sm leading-relaxed mb-4">
Web Development Institute helps startups and enterprises build scalable, secure digital products.
Web Development Institute helps startups and enterprises build scalable, secure digital products.
With 25+ years of experience, we've delivered 200+ successful projects across 15+ countries.
</p>
<Button
<Button
className="w-full bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
onClick={() => navigate('/contact')}
>
@@ -552,21 +554,21 @@ export const AutomationReshapingBusiness = () => {
Enjoyed this article? Let's talk.
</h2>
<p className="text-muted-foreground mb-8 max-w-2xl mx-auto">
Ready to automate your business operations and drive efficiency? Our team of experts is here to help you
Ready to automate your business operations and drive efficiency? Our team of experts is here to help you
implement intelligent automation solutions that transform your business processes.
</p>
<div className="flex flex-col sm:flex-row gap-4 justify-center">
<Button
size="lg"
<Button
size="lg"
className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
onClick={() => navigate('/contact')}
>
Start Your Automation Journey
<ArrowRight className="ml-2 w-4 h-4" />
</Button>
<Button
size="lg"
variant="outline"
<Button
size="lg"
variant="outline"
className="border-white/20 text-white hover:bg-white/10"
onClick={() => navigate('/resources/blog')}
>

View File

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

View File

@@ -106,7 +106,7 @@ const caseStudies = [
category: "Loyalty & Rewards",
industry: "Hospitality",
featured: false,
link: "/comming-soon",
link: "",
icon: Utensils
},
{
@@ -136,7 +136,7 @@ const caseStudies = [
category: "Lifestyle",
industry: "Chemicals",
featured: false,
link: "/comming-soon",
link: "",
icon: FlaskConical
},
{
@@ -156,7 +156,7 @@ const caseStudies = [
category: "Lifestyle",
industry: "Consumer",
featured: false,
link: "/comming-soon",
link: "",
icon: Trophy
},
{
@@ -186,7 +186,7 @@ const caseStudies = [
category: "AgriTech",
industry: "Agriculture",
featured: false,
link: "/comming-soon",
link: "",
icon: Tractor
},
{
@@ -196,13 +196,13 @@ const caseStudies = [
category: "AgriTech",
industry: "Agriculture",
featured: false,
link: "/comming-soon",
link: "",
icon: Globe
},
];
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 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"];
export const CaseStudies = () => {
const [searchTerm, setSearchTerm] = useState("");

View File

@@ -6,6 +6,7 @@ import { Badge } from "../components/ui/badge";
import { Card, CardContent } from "../components/ui/card";
import { Avatar, AvatarFallback, AvatarImage } from "../components/ui/avatar";
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 { ImageWithFallback } from "../components/figma/ImageWithFallback";
import { useNavigate } from "react-router-dom";
@@ -196,7 +197,8 @@ const articleData = {
title: "The Future of AI in Healthcare: Transforming Patient Care Through Technology",
excerpt: "Discover how artificial intelligence is revolutionizing healthcare delivery and patient outcomes.",
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"
},
{

View File

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

View File

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

View File

@@ -127,8 +127,7 @@ const CustomWebAppHeroWithCTA = () => {
</h1>
<p className="text-lg text-gray-300 leading-relaxed max-w-lg">
Building bespoke, scalable, and secure web applications tailored
to your unique business processes and user needs.
Building bespoke, scalable, and secure web applications tailored to your unique business processes and user needs.
</p>
</div>
@@ -351,6 +350,10 @@ const CustomWebAppBenefits = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
Why Invest in a Custom Web Application?
</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
@@ -480,6 +483,10 @@ const CustomWebAppProcess = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
Our Collaborative Journey to Your Custom Web App
</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>
<div className="relative">
@@ -625,6 +632,10 @@ const CustomWebAppServices = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
Our Expertise in Custom Web Solutions
</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
@@ -686,68 +697,68 @@ const CustomWebAppServices = () => {
// Web App Tech Stack
const WebAppTechStack = () => {
const technologies = [
{
name: "React",
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/react/react-original.svg",
category: "Frontend",
color: "blue",
},
{
name: "Angular",
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/angularjs/angularjs-original.svg",
category: "Frontend",
color: "blue",
},
{
name: "Vue.js",
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/vuejs/vuejs-original.svg",
category: "Frontend",
color: "blue",
},
{
name: "Node.js",
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nodejs/nodejs-original.svg",
category: "Backend",
color: "green",
},
{
name: "Python",
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/python/python-original.svg",
category: "Backend",
color: "green",
},
{
name: "Java",
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/java/java-original.svg",
category: "Backend",
color: "green",
},
{
name: "AWS",
logo: awsLogo,
category: "Cloud",
color: "red",
},
{
name: "Azure",
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/azure/azure-original.svg",
category: "Cloud",
color: "orange",
},
{
name: "PostgreSQL",
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/postgresql/postgresql-original.svg",
category: "Database",
color: "red",
},
{
name: "MongoDB",
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/mongodb/mongodb-original.svg",
category: "Database",
color: "red",
},
];
const technologies = [
{
name: "React",
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/react/react-original.svg",
category: "Frontend",
color: "blue",
},
{
name: "Angular",
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/angularjs/angularjs-original.svg",
category: "Frontend",
color: "blue",
},
{
name: "Vue.js",
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/vuejs/vuejs-original.svg",
category: "Frontend",
color: "blue",
},
{
name: "Node.js",
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nodejs/nodejs-original.svg",
category: "Backend",
color: "green",
},
{
name: "Python",
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/python/python-original.svg",
category: "Backend",
color: "green",
},
{
name: "Java",
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/java/java-original.svg",
category: "Backend",
color: "green",
},
{
name: "AWS",
logo: awsLogo,
category: "Cloud",
color: "red",
},
{
name: "Azure",
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/azure/azure-original.svg",
category: "Cloud",
color: "orange",
},
{
name: "PostgreSQL",
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/postgresql/postgresql-original.svg",
category: "Database",
color: "red",
},
{
name: "MongoDB",
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/mongodb/mongodb-original.svg",
category: "Database",
color: "red",
},
];
const frameworks = [
@@ -786,6 +797,10 @@ const WebAppTechStack = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
Leveraging Robust and Modern Web Technologies
</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>
{/* Core Technologies */}
@@ -932,6 +947,10 @@ const WebAppCaseStudies = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-white mb-8">
Custom Web Applications That Drive Business Growth
</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
@@ -1144,8 +1163,7 @@ const HireWebDevelopers = () => {
Augment Your Team with Our Expert Web App Developers
</h2>
<p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
Access highly skilled frontend, backend, and full-stack developers
specializing in custom web solutions.
Access highly skilled frontend, backend, and full-stack developers specializing in custom web development solutions with AI-powered design.
</p>
</motion.div>
@@ -1349,8 +1367,7 @@ const CustomWebAppFinalCTA = () => {
viewport={{ once: true }}
className="text-xl text-muted-foreground mb-12 max-w-2xl mx-auto leading-relaxed"
>
WDI crafts powerful, secure, and intuitive web solutions designed
specifically for your business success.
WDI crafts powerful, secure, and intuitive web development solutions with AI-powered design specifically for your business success.
</motion.p>
<motion.div

View File

@@ -105,7 +105,7 @@ const HeroWithCTA = () => {
</h1>
<p className="text-lg text-gray-300 leading-relaxed max-w-lg">
Create engaging, intuitive user experiences that drive conversion and delight users through research-driven design and modern design thinking.
Create engaging, intuitive experiences with AI-powered design that drive conversions and delight users through research-driven, modern design thinking.
</p>
</div>
@@ -195,7 +195,7 @@ const HorizontalTagScroller = () => {
<span className="text-foreground"> & Expertise</span>
</h2>
<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>
</motion.div>
@@ -315,8 +315,7 @@ const SideBySideContentWithIcons = () => {
</h2>
<p className="text-2xl text-gray-300 leading-relaxed">
User-centered design that drives measurable business results.
</p>
User-centered web development design that drives higher engagement, intuitive experiences, and measurable business results through proven UX methodologies. </p>
</motion.div>
<motion.div
@@ -415,7 +414,7 @@ const TabbedServiceDisplay = () => {
Design & Experience Services
</h2>
<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>
</motion.div>
@@ -502,8 +501,7 @@ const InlineCTA = () => {
{/* Subtitle */}
<p className="text-xl text-muted-foreground leading-relaxed max-w-2xl mx-auto">
Design solutions that not only look great but also drive conversion and user engagement.
</p>
Design solutions that not only look great but also drive conversion and user engagement through AI-powered design. </p>
{/* CTA Button */}
<div className="flex flex-col items-center gap-4">
@@ -583,8 +581,7 @@ const HireDevelopersSection = () => {
<span className="text-[#E5195E]">Design Experts</span>
</h2>
<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.
</p>
Get access to talented AI mobile application developers who create beautiful, functional user experiences that drive engagement and conversions. </p>
</motion.div>
<motion.div
@@ -664,23 +661,23 @@ const HireDevelopersSection = () => {
const designExperienceFAQs = [
{
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?",
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?",
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?",
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?",
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 />
<FAQSection
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}
/>
{/* <Footer /> */}

View File

@@ -64,7 +64,7 @@ const EcommerceHeroWithCTA = () => {
/>
{/* 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) */}
<meta property="og:title" content="eCommerce Platform Development by WDI| Build Powerful Online Stores" />
@@ -128,8 +128,7 @@ const EcommerceHeroWithCTA = () => {
</h1>
<p className="text-lg text-gray-300 leading-relaxed max-w-lg">
Building high-converting, scalable, and secure online stores and
marketplaces that drive sales and enhance customer experiences.
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.
</p>
</div>
@@ -399,6 +398,13 @@ const EcommerceBenefits = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
Why Choose WDI for Your eCommerce Platform?
</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
@@ -528,6 +534,12 @@ const EcommerceProcess = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
Our Streamlined Process for Your eCommerce Success
</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>
<div className="relative">
@@ -546,14 +558,12 @@ const EcommerceProcess = () => {
whileInView={{ opacity: 1, x: 0 }}
transition={{ duration: 0.8, delay: index * 0.2 }}
viewport={{ once: true }}
className={`flex items-center ${
isEven ? "lg:flex-row" : "lg:flex-row-reverse"
} flex-col lg:gap-16 gap-8`}
className={`flex items-center ${isEven ? "lg:flex-row" : "lg:flex-row-reverse"
} flex-col lg:gap-16 gap-8`}
>
<div
className={`flex-1 ${
isEven ? "lg:text-right" : "lg:text-left"
} text-center lg:text-left`}
className={`flex-1 ${isEven ? "lg:text-right" : "lg:text-left"
} text-center lg:text-left`}
>
<div className="bg-card/20 backdrop-blur-md rounded-2xl border border-white/10 p-8 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl">
<div className="flex items-center gap-4 mb-4 justify-center lg:justify-start">
@@ -683,6 +693,13 @@ const EcommerceServices = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
Our Comprehensive eCommerce Development Services
</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
@@ -887,8 +904,7 @@ const EcommerceTechStack = () => {
Utilizing Industry-Leading Platforms and Modern Frameworks
</h2>
<p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
For powerful eCommerce solutions that drive sales and scale with
your business.
For powerful eCommerce solutions enhanced by AI mobile app capabilities that drive sales and scale seamlessly with your business.
</p>
</motion.div>
@@ -1101,6 +1117,12 @@ const EcommerceCaseStudies = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-white mb-8">
eCommerce Solutions That Drive Sales
</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
@@ -1310,8 +1332,7 @@ const HireEcommerceDevelopers = () => {
Find Expert eCommerce Developers
</h2>
<p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
Access our specialized developers proficient in Shopify, Magento,
WooCommerce, and custom eCommerce solutions.
Access WDI's specialized developers proficient in Shopify, Magento, WooCommerce, and custom solutions powered by AI mobile app expertise.
</p>
</motion.div>
@@ -1377,7 +1398,7 @@ const HireEcommerceDevelopers = () => {
>
<div className="flex flex-col sm:flex-row gap-4 justify-center">
<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">
<Users className="w-5 h-5 flex-shrink-0" />
@@ -1514,8 +1535,7 @@ const EcommerceFinalCTA = () => {
viewport={{ once: true }}
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,
and converts customers effectively.
Partner with WDI's AI mobile app experts to create an online presence that attracts, engages, and converts customers effectively.
</motion.p>
<motion.div

View File

@@ -127,9 +127,7 @@ const EnterpriseHeroWithCTA = () => {
</h1>
<p className="text-lg text-gray-300 leading-relaxed max-w-lg">
Crafting custom, high-impact software tailored to streamline
large-scale operations, enhance productivity, and drive digital
transformation for enterprises.
Crafting custom, high-impact AI-powered features software tailored to streamline large-scale operations, enhance productivity, and drive digital transformation for enterprises.
</p>
</div>
@@ -509,6 +507,13 @@ const EnterpriseBenefits = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
Why Custom Enterprise Solutions from WDI?
</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
@@ -644,6 +649,11 @@ const EnterpriseProcess = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
Our Strategic Approach to Enterprise Software
</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>
<div className="relative">
@@ -797,6 +807,11 @@ const EnterpriseServices = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
Our Comprehensive Enterprise Software Capabilities
</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
@@ -1012,8 +1027,7 @@ const EnterpriseTechStack = () => {
Leveraging Robust Enterprise-Grade Technologies
</h2>
<p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
For reliability and performance at scale with proven enterprise
solutions.
For reliability and performance at scale with proven AI-powered features enterprise solutions that ensure seamless operations across your entire organization.
</p>
</motion.div>
@@ -1262,6 +1276,11 @@ const EnterpriseCaseStudies = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-white mb-8">
Enterprise Solutions Driving Real Business Impact
</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
@@ -1478,8 +1497,7 @@ const HireEnterpriseTalent = () => {
Build Your Enterprise Team with WDI Talent
</h2>
<p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
Access highly experienced architects, project managers, and senior
developers skilled in complex enterprise environments.
Access highly experienced AI app development company architects, project managers, and senior developers skilled in complex enterprise environments.
</p>
</motion.div>
@@ -1684,8 +1702,7 @@ const EnterpriseFinalCTA = () => {
viewport={{ once: true }}
className="text-xl text-muted-foreground mb-12 max-w-2xl mx-auto leading-relaxed"
>
Partner with us for custom enterprise software solutions that
deliver efficiency, innovation, and a competitive edge.
Partner with WDI's AI-powered design experts for custom enterprise software solutions that deliver efficiency, innovation, and competitive edge.
</motion.p>
<motion.div

View File

@@ -7,6 +7,7 @@ import { Card, CardContent } from "../components/ui/card";
import { Avatar, AvatarFallback, AvatarImage } from "../components/ui/avatar";
import { Separator } from "../components/ui/separator";
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 { useNavigate } from "react-router-dom";
@@ -109,7 +110,8 @@ const articleData = {
readTime: "12 min read",
category: "Healthcare AI",
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: [
{
id: "compliance-ready-systems-fintech",
@@ -123,7 +125,7 @@ const articleData = {
id: "automation-reshaping-business",
title: "5 Ways Automation is Reshaping Business Operations",
excerpt: "Discover how intelligent automation is transforming modern business processes and operations.",
readTime: "10 min read",
readTime: "10 min read",
image: "https://images.unsplash.com/photo-1485827404703-89b55fcc595e?w=400&h=250&fit=crop&auto=format",
category: "Automation"
},
@@ -142,7 +144,7 @@ export const FutureOfAIHealthcare = () => {
const handleShare = (platform: string) => {
const url = encodeURIComponent(window.location.href);
const title = encodeURIComponent(articleData.title);
let shareUrl = '';
switch (platform) {
case 'linkedin':
@@ -155,7 +157,7 @@ export const FutureOfAIHealthcare = () => {
shareUrl = `https://wa.me/?text=${title} ${url}`;
break;
}
if (shareUrl) {
window.open(shareUrl, '_blank', 'width=600,height=400');
}
@@ -166,7 +168,7 @@ export const FutureOfAIHealthcare = () => {
return (
<div className="dark min-h-screen bg-background">
{/* <Navigation /> */}
{/* Hero Section */}
<section className="pt-24 pb-16 bg-background">
<div className="container mx-auto px-6 lg:px-8">
@@ -233,13 +235,13 @@ export const FutureOfAIHealthcare = () => {
<section className="py-16 bg-card/50">
<div className="container mx-auto px-6 lg:px-8">
<div className="grid lg:grid-cols-10 gap-12 max-w-7xl mx-auto">
{/* Article Content - 70% */}
<article className="lg:col-span-7">
<Card className="bg-background/50 border-white/10">
<CardContent className="p-8 lg:p-12">
{/* Article Body */}
<div
<div
className="prose prose-invert prose-lg max-w-none
prose-headings:text-white prose-headings:font-semibold
prose-h2:text-3xl prose-h2:mt-12 prose-h2:mb-6
@@ -334,15 +336,15 @@ export const FutureOfAIHealthcare = () => {
{/* Sidebar - 30% */}
<aside className="lg:col-span-3 space-y-8">
{/* Related Articles */}
<Card className="bg-background/50 border-white/10">
<CardContent className="p-6">
<h3 className="text-xl font-semibold text-white mb-6">You Might Also Like</h3>
<div className="space-y-6">
{articleData.relatedArticles.map((article) => (
<div
key={article.id}
<div
key={article.id}
className="group cursor-pointer"
onClick={() => navigate(`/articles/${article.id}`)}
>
@@ -364,11 +366,11 @@ export const FutureOfAIHealthcare = () => {
</div>
))}
</div>
<Separator className="my-6" />
<Button
variant="outline"
<Button
variant="outline"
className="w-full border-white/20 text-white hover:bg-white/10"
onClick={() => navigate('/resources/blog')}
>
@@ -383,10 +385,10 @@ export const FutureOfAIHealthcare = () => {
<CardContent className="p-6">
<h3 className="text-xl font-semibold text-white mb-4">About WDI</h3>
<p className="text-muted-foreground text-sm leading-relaxed mb-4">
Web Development Institute helps startups and enterprises build scalable, secure digital products.
Web Development Institute helps startups and enterprises build scalable, secure digital products.
With 25+ years of experience, we've delivered 200+ successful projects across 15+ countries.
</p>
<Button
<Button
className="w-full bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
onClick={() => navigate('/contact')}
>
@@ -408,21 +410,21 @@ export const FutureOfAIHealthcare = () => {
Enjoyed this article? Let's talk.
</h2>
<p className="text-muted-foreground mb-8 max-w-2xl mx-auto">
Ready to transform your healthcare technology with AI? Our team of experts is here to help you build
Ready to transform your healthcare technology with AI? Our team of experts is here to help you build
innovative solutions that improve patient outcomes and operational efficiency.
</p>
<div className="flex flex-col sm:flex-row gap-4 justify-center">
<Button
size="lg"
<Button
size="lg"
className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
onClick={() => navigate('/contact')}
>
Start Your AI Project
<ArrowRight className="ml-2 w-4 h-4" />
</Button>
<Button
size="lg"
variant="outline"
<Button
size="lg"
variant="outline"
className="border-white/20 text-white hover:bg-white/10"
onClick={() => navigate('/resources/blog')}
>

View File

@@ -35,6 +35,7 @@ import {
import { ImageWithFallback } from "../components/figma/ImageWithFallback";
import { Footer } from "../components/Footer";
import { Navigation } from "../components/Navigation";
import hospitalize from "../assets/hospitalise.jpg"
import {
Accordion,
AccordionContent,
@@ -391,18 +392,18 @@ const HealthTechHero = () => {
>
<div
className={`w-8 h-8 rounded-full flex items-center justify-center ${activity.color === "blue"
? "bg-blue-500/20"
: activity.color === "green"
? "bg-green-500/20"
: "bg-purple-500/20"
? "bg-blue-500/20"
: activity.color === "green"
? "bg-green-500/20"
: "bg-purple-500/20"
}`}
>
<activity.icon
className={`w-4 h-4 ${activity.color === "blue"
? "text-blue-400"
: activity.color === "green"
? "text-green-400"
: "text-purple-400"
? "text-blue-400"
: activity.color === "green"
? "text-green-400"
: "text-purple-400"
}`}
/>
</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.",
results:
"Enabled 30% more patient consultations and extended reach to underserved areas, significantly improving patient access.",
image:
"https://images.unsplash.com/photo-1576091160399-112ba8d25d1f?w=400&h=300&fit=crop&auto=format",
engagement: "Telehealth transformation",
// image:
// "https://images.unsplash.com/photo-1576091160399-112ba8d25d1f?w=400&h=300&fit=crop&auto=format",
// engagement: "Telehealth transformation",
image: hospitalize,
gradient: "from-blue-500/20 to-cyan-500/20",
},
{

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"
/>
),
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"
},
{
@@ -185,7 +185,8 @@ export const Homepage = () => {
<div className="text-center">
<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">
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>
</div>
</motion.div>

View File

@@ -6,6 +6,7 @@ import { Badge } from "../components/ui/badge";
import { Card, CardContent } from "../components/ui/card";
import { Avatar, AvatarFallback, AvatarImage } from "../components/ui/avatar";
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 { ImageWithFallback } from "../components/figma/ImageWithFallback";
import { useNavigate } from "react-router-dom";
@@ -218,7 +219,8 @@ const articleData = {
title: "The Future of AI in Healthcare: Transforming Patient Care Through Technology",
excerpt: "Discover how artificial intelligence is revolutionizing healthcare delivery and patient outcomes.",
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"
},
{
@@ -236,7 +238,7 @@ export const LegacySystemScaling = () => {
const handleShare = (platform: string) => {
const url = encodeURIComponent(window.location.href);
const title = encodeURIComponent(articleData.title);
let shareUrl = '';
switch (platform) {
case 'linkedin':
@@ -249,7 +251,7 @@ export const LegacySystemScaling = () => {
shareUrl = `https://wa.me/?text=${title} ${url}`;
break;
}
if (shareUrl) {
window.open(shareUrl, '_blank', 'width=600,height=400');
}
@@ -260,7 +262,7 @@ export const LegacySystemScaling = () => {
return (
<div className="dark min-h-screen bg-background">
{/* <Navigation /> */}
{/* Hero Section */}
<section className="pt-24 pb-16 bg-background">
<div className="container mx-auto px-6 lg:px-8">
@@ -327,13 +329,13 @@ export const LegacySystemScaling = () => {
<section className="py-16 bg-card/50">
<div className="container mx-auto px-6 lg:px-8">
<div className="grid lg:grid-cols-10 gap-12 max-w-7xl mx-auto">
{/* Article Content - 70% */}
<article className="lg:col-span-7">
<Card className="bg-background/50 border-white/10">
<CardContent className="p-8 lg:p-12">
{/* Article Body */}
<div
<div
className="prose prose-invert prose-lg max-w-none
prose-headings:text-white prose-headings:font-semibold
prose-h2:text-3xl prose-h2:mt-12 prose-h2:mb-6
@@ -429,15 +431,15 @@ export const LegacySystemScaling = () => {
{/* Sidebar - 30% */}
<aside className="lg:col-span-3 space-y-8">
{/* Related Articles */}
<Card className="bg-background/50 border-white/10">
<CardContent className="p-6">
<h3 className="text-xl font-semibold text-white mb-6">You Might Also Like</h3>
<div className="space-y-6">
{articleData.relatedArticles.map((article) => (
<div
key={article.id}
<div
key={article.id}
className="group cursor-pointer"
onClick={() => navigate(`/articles/${article.id}`)}
>
@@ -459,11 +461,11 @@ export const LegacySystemScaling = () => {
</div>
))}
</div>
<Separator className="my-6" />
<Button
variant="outline"
<Button
variant="outline"
className="w-full border-white/20 text-white hover:bg-white/10"
onClick={() => navigate('/resources/blog')}
>
@@ -478,10 +480,10 @@ export const LegacySystemScaling = () => {
<CardContent className="p-6">
<h3 className="text-xl font-semibold text-white mb-4">About WDI</h3>
<p className="text-muted-foreground text-sm leading-relaxed mb-4">
Web Development Institute helps startups and enterprises build scalable, secure digital products.
Web Development Institute helps startups and enterprises build scalable, secure digital products.
With 25+ years of experience, we've delivered 200+ successful projects across 15+ countries.
</p>
<Button
<Button
className="w-full bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
onClick={() => navigate('/contact')}
>
@@ -503,21 +505,21 @@ export const LegacySystemScaling = () => {
Enjoyed this article? Let's talk.
</h2>
<p className="text-muted-foreground mb-8 max-w-2xl mx-auto">
Ready to scale your legacy system or modernize your infrastructure? Our team of experts is here to help you
Ready to scale your legacy system or modernize your infrastructure? Our team of experts is here to help you
build scalable, high-performance systems that grow with your business.
</p>
<div className="flex flex-col sm:flex-row gap-4 justify-center">
<Button
size="lg"
<Button
size="lg"
className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
onClick={() => navigate('/contact')}
>
Start Your Modernization Project
<ArrowRight className="ml-2 w-4 h-4" />
</Button>
<Button
size="lg"
variant="outline"
<Button
size="lg"
variant="outline"
className="border-white/20 text-white hover:bg-white/10"
onClick={() => navigate('/resources/blog')}
>

View File

@@ -122,7 +122,7 @@ const HeroWithCTA = () => {
</h1>
<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>
</motion.div>
@@ -234,7 +234,7 @@ const HorizontalTagScroller = () => {
Apps Built for High-Impact Industries
</h2>
<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>
</motion.div>
@@ -382,7 +382,7 @@ const SideBySideContentWithIcons = () => {
{/* Subtext */}
<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>
</motion.div>
@@ -485,7 +485,7 @@ const TabbedServiceDisplay = () => {
Mobile App Development Services
</h2>
<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>
</motion.div>
@@ -650,10 +650,10 @@ const HireDevelopersSection = () => {
>
<h2 className="mb-8 text-4xl font-semibold lg:text-5xl">
<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>
<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>
</motion.div>
@@ -734,35 +734,35 @@ const HireDevelopersSection = () => {
const mobileAppFAQs = [
{
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?",
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?",
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?",
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?",
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?",
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?",
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?",
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>
<p className="max-w-lg text-lg leading-relaxed text-gray-300">
Building bespoke applications tailored for a single operating
system to deliver the highest level of performance, security,
and device integration.
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.
</p>
</div>
@@ -322,8 +320,7 @@ const NativeVsCrossPlatform = () => {
Native vs. Cross-Platform: When to Choose Native
</h2>
<p className="max-w-3xl mx-auto text-xl leading-relaxed text-muted-foreground">
Native development delivers uncompromising performance and platform
integration for applications that demand the highest standards.
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.
</p>
</motion.div>
@@ -768,8 +765,7 @@ const NativeProcess = () => {
Precision & Excellence in Every Native Project
</h2>
<p className="max-w-3xl mx-auto text-xl leading-relaxed text-gray-300">
Our proven native development methodology ensures optimal
performance and platform integration at every stage.
Our proven native development methodology ensures optimal performance and platform integration at every stage with AI-powered features.
</p>
</motion.div>
@@ -878,8 +874,7 @@ const NativeCaseStudies = () => {
Android Apps That Define Industries
</h2>
<p className="max-w-3xl mx-auto text-xl leading-relaxed text-muted-foreground">
Discover how we've helped businesses succeed with powerful Android
applications that leverage the platform's capabilities.
Discover how our AI mobile application developers have helped businesses succeed with powerful Android applications that leverage AI-powered features.
</p>
</motion.div>

View File

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

View File

@@ -125,9 +125,7 @@ const ModernizationHeroWithCTA = () => {
</h1>
<p className="text-lg text-gray-300 leading-relaxed max-w-lg">
Revitalize your outdated software and digital products,
transforming them into modern, scalable, and high-performing
solutions.
Revitalize outdated software through AI mobile app development, transforming legacy systems into modern, scalable solutions that boost performance and agility.
</p>
</div>
@@ -440,6 +438,11 @@ const ModernizationBenefits = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
Why Modernize Your Existing Product?
</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
@@ -537,6 +540,12 @@ const ModernizationProcess = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
Our Strategic Phased Approach to Modernization
</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>
<div className="relative">
@@ -702,6 +711,11 @@ const ModernizationServices = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
Our Comprehensive Product Modernization Capabilities
</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
@@ -1117,6 +1131,11 @@ const ModernizationCaseStudies = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-white mb-8">
Successful Product Modernization Stories
</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
@@ -1348,8 +1367,7 @@ const HireModernizationTalent = () => {
Access Expert Talent for Your Modernization Project
</h2>
<p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
Hire skilled architects and developers experienced in safely
migrating and upgrading complex legacy systems.
Hire AI mobile application developers skilled in safely migrating and upgrading complex legacy systems for seamless, high-performance transformations.
</p>
</motion.div>
@@ -1556,8 +1574,7 @@ const ModernizationFinalCTA = () => {
viewport={{ once: true }}
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
software into a modern, competitive asset.
Don't let outdated technology hinder growth. Transform software into modern, competitive assets through AI-powered design
</motion.p>
<motion.div

View File

@@ -120,9 +120,7 @@ const SaaSHeroWithCTA = () => {
</h1>
<p className="text-lg text-gray-300 leading-relaxed max-w-lg">
From ideation to scalable deployment, WDI specializes in
engineering robust, multi-tenant SaaS products that drive
recurring revenue.
From ideation to scalable deployment, WDI specializes in engineering robust, multi-tenant SaaS products with AI-powered design that drive recurring revenue.
</p>
</div>
@@ -380,6 +378,13 @@ const SaaSBenefits = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
Why Partner with WDI for Your SaaS Product?
</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
@@ -515,6 +520,11 @@ const SaaSProcess = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
Your SaaS Journey: From Concept to Market Leader
</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>
<div className="relative">
@@ -667,6 +677,12 @@ const SaaSServices = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
Comprehensive SaaS Engineering Capabilities
</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
@@ -914,8 +930,7 @@ const SaaSTechStack = () => {
Building Resilient and High-Performing SaaS Products
</h2>
<p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
With cutting-edge technologies designed for scale, security, and
performance.
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.
</p>
</motion.div>
@@ -1147,6 +1162,13 @@ const SaaSCaseStudies = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-white mb-8">
Successful SaaS Products Engineered by WDI
</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
@@ -1358,8 +1380,7 @@ const HireSaaSDevelopers = () => {
Need Specialized SaaS Talent?
</h2>
<p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
Hire experienced SaaS architects, engineers, and DevOps specialists
to accelerate your product development.
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.
</p>
</motion.div>
@@ -1563,8 +1584,7 @@ const SaaSFinalCTA = () => {
viewport={{ once: true }}
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
user-centric SaaS solution that captivates your market.
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.
</motion.p>
<motion.div

View File

@@ -106,8 +106,7 @@ const HeroWithCTA = () => {
</h1>
<p className="text-lg text-gray-300 leading-relaxed max-w-lg">
Build robust, scalable enterprise software systems with modern
engineering practices and proven methodologies.
Build robust, scalable enterprise systems with AI app development company expertise and modern practices like microservices, CI/CD pipelines, and cloud-native architecture.
</p>
</div>
@@ -227,8 +226,7 @@ const HorizontalTagScroller = () => {
<span className="text-foreground"> We Follow</span>
</h2>
<p className="text-2xl text-muted-foreground max-w-4xl mx-auto leading-relaxed">
Industry-leading methodologies that ensure code quality,
scalability, and maintainability.
Industry-leading methodologies like DevOps, microservices, and CI/CD pipelines enhanced by AI-powered features ensure code quality, scalability, and maintainability.
</p>
</motion.div>
@@ -355,7 +353,8 @@ const SideBySideContentWithIcons = () => {
</h2>
<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>
</motion.div>
@@ -461,8 +460,7 @@ const TabbedServiceDisplay = () => {
Software Engineering Services
</h2>
<p className="text-lg text-gray-300 max-w-4xl mx-auto leading-relaxed">
Comprehensive software engineering solutions designed for
enterprise-grade performance and reliability.
Comprehensive AI-powered design solutions designed for enterprise-grade performance, reliability, and seamless scalability across complex business ecosystems.
</p>
</motion.div>
@@ -553,8 +551,7 @@ const InlineCTA = () => {
{/* Subtitle */}
<p className="text-xl text-muted-foreground leading-relaxed max-w-2xl mx-auto">
Robust, scalable systems engineered with modern practices and
proven methodologies.
Robust, scalable systems engineered with AI mobile application developers and modern practices for unmatched performance.
</p>
{/* CTA Button */}
@@ -637,8 +634,7 @@ const HireDevelopersSection = () => {
<span className="text-[#E5195E]">Engineering Experts</span>
</h2>
<p className="text-2xl text-muted-foreground max-w-4xl mx-auto leading-relaxed">
Get access to senior software engineers who build robust, scalable
enterprise systems.
Get access to WDI's senior AI-powered features engineers who build robust, scalable enterprise systems with cutting-edge expertise.
</p>
</motion.div>
@@ -728,7 +724,7 @@ const softwareEngineeringFAQs = [
{
question: "What software engineering methodologies do you follow?",
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?",
@@ -743,7 +739,7 @@ const softwareEngineeringFAQs = [
{
question: "What is your approach to system architecture?",
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?",
@@ -765,7 +761,7 @@ export function SoftwareEngineering() {
<HireDevelopersSection />
<FAQSection
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}
/>
{/* <Footer /> */}

View File

@@ -126,9 +126,7 @@ const DevOpsHeroWithCTA = () => {
</h1>
<p className="text-lg text-gray-300 leading-relaxed max-w-lg">
Designing robust, scalable system architectures and implementing
efficient DevOps practices for continuous delivery and
operational excellence.
Designing AI-powered, robust, scalable system architectures and implementing efficient DevOps practices for continuous delivery and operational excellence.
</p>
</div>
@@ -510,6 +508,11 @@ const DevOpsBenefits = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
The Foundation for High-Performance Software
</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
@@ -645,6 +648,11 @@ const DevOpsProcess = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
Our Approach to Building and Optimizing Your Digital Infrastructure
</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>
<div className="relative">
@@ -810,6 +818,11 @@ const DevOpsServices = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
Our Specialized Expertise
</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
@@ -1016,8 +1029,7 @@ const DevOpsTechStack = () => {
Leveraging Industry-Leading Tools
</h2>
<p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
For robust and automated infrastructure management.
</p>
WDI uses top AI-powered design platforms for automated infrastructure management, ensuring robust efficiency and seamless scalability. </p>
</motion.div>
{/* Cloud Platforms */}
@@ -1306,6 +1318,11 @@ const DevOpsCaseStudies = () => {
Empowering Businesses with Resilient Infrastructure & Agile
Operations
</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
@@ -1538,8 +1555,7 @@ const HireDevOpsTalent = () => {
Need Specialized DevOps or Cloud Architecture Talent?
</h2>
<p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
Access our highly skilled engineers proficient in cloud platforms,
CI/CD, and system automation.
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.
</p>
</motion.div>
@@ -1743,8 +1759,7 @@ const DevOpsFinalCTA = () => {
viewport={{ once: true }}
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
foundation for your business.
Partner with WDI for AI mobile app development to build secure, scalable foundations that ensure seamless enterprise operations.
</motion.p>
<motion.div

View File

@@ -125,9 +125,7 @@ const IntegrationsHeroWithCTA = () => {
</h1>
<p className="text-lg text-gray-300 leading-relaxed max-w-lg">
Connecting your disparate software systems and applications for
unified data flow, automated workflows, and enhanced
functionality.
Enable AI-powered features to connect disparate systems, ensuring unified data flow, automated workflows, and enhanced app functionality.
</p>
</div>
@@ -482,6 +480,11 @@ const IntegrationBenefits = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
Why Integrate Your Systems with WDI?
</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
@@ -617,6 +620,11 @@ const IntegrationProcess = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
Our Strategic Approach to Seamless Integration
</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>
<div className="relative">
@@ -635,14 +643,12 @@ const IntegrationProcess = () => {
whileInView={{ opacity: 1, x: 0 }}
transition={{ duration: 0.8, delay: index * 0.2 }}
viewport={{ once: true }}
className={`flex items-center ${
isEven ? "lg:flex-row" : "lg:flex-row-reverse"
} flex-col lg:gap-16 gap-8`}
className={`flex items-center ${isEven ? "lg:flex-row" : "lg:flex-row-reverse"
} flex-col lg:gap-16 gap-8`}
>
<div
className={`flex-1 ${
isEven ? "lg:text-right" : "lg:text-left"
} text-center lg:text-left`}
className={`flex-1 ${isEven ? "lg:text-right" : "lg:text-left"
} text-center lg:text-left`}
>
<div className="bg-card/20 backdrop-blur-md rounded-2xl border border-white/10 p-8 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl">
<div className="flex items-center gap-4 mb-4 justify-center lg:justify-start">
@@ -782,6 +788,11 @@ const IntegrationServices = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
Our Comprehensive Integration Capabilities
</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
@@ -956,7 +967,7 @@ const IntegrationTechStack = () => {
Utilizing Robust Protocols and Platforms
</h2>
<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>
</motion.div>
@@ -1177,6 +1188,11 @@ const IntegrationCaseStudies = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-white mb-8">
Systems That Speak: Our Integration Success Stories
</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
@@ -1408,8 +1424,7 @@ const HireIntegrationTalent = () => {
Need Expertise in System Integration?
</h2>
<p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
Hire our developers experienced in API development, middleware, and
connecting diverse software platforms.
Hire WDI's AI mobile application developers experienced in API development, middleware, and connecting diverse software platforms for seamless enterprise integration.
</p>
</motion.div>
@@ -1613,8 +1628,7 @@ const IntegrationFinalCTA = () => {
viewport={{ once: true }}
className="text-xl text-muted-foreground mb-12 max-w-2xl mx-auto leading-relaxed"
>
Achieve unparalleled efficiency and data consistency by seamlessly
integrating your essential software systems.
Achieve unparalleled efficiency and data consistency through AI app development company solutions that seamlessly integrate your essential software systems.
</motion.p>
<motion.div
@@ -1667,7 +1681,7 @@ export const ThirdPartyIntegrations = () => {
<IntegrationBenefits />
</section>
{/* Case Studies */}
{/* Case Studies */}
<section className="bg-background">
<IntegrationCaseStudies />
</section>

View File

@@ -120,8 +120,7 @@ const UIUXHeroWithCTA = () => {
</h1>
<p className="text-lg text-gray-300 leading-relaxed max-w-lg">
Crafting visually stunning and highly intuitive user interfaces
and experiences that engage users and drive business objectives.
Crafting visually stunning and highly intuitive interfaces with AI-powered design that engage users and drive business objectives.
</p>
</div>
@@ -488,6 +487,11 @@ const UIUXBenefits = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
Why User-Centric Design Matters
</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
@@ -579,6 +583,11 @@ const UIUXDesignProcess = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
Our Collaborative & Iterative Design Process
</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>
<div className="relative">
@@ -738,6 +747,11 @@ const UIUXDesignServices = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
Our Comprehensive UI/UX Design Capabilities
</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
@@ -892,8 +906,7 @@ const DesignToolsMethodologies = () => {
Design Tools & Methodologies
</h2>
<p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
Leveraging industry-standard tools and methodologies for impactful
design.
Leveraging industry-standard tools like Figma, Sketch, and Adobe XD alongside AI-powered design methodologies for impactful, scalable user experiences.
</p>
</motion.div>
@@ -1123,8 +1136,7 @@ const HireUIUXDesigners = () => {
Hire World-Class UI/UX Designers
</h2>
<p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
Access our pool of talented designers specializing in intuitive
interfaces, user research, and strategic UX.
Access our pool of talented AI-powered design specialists who excel in intuitive interfaces, user research, and strategic UX that drives results.
</p>
</motion.div>
@@ -1327,8 +1339,7 @@ const UIUXFinalCTA = () => {
viewport={{ once: true }}
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
and drives meaningful interactions.
Partner with WDI for compelling AI-powered design that captures attention and drives meaningful interactions.
</motion.p>
<motion.div

View File

@@ -4,6 +4,7 @@ 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 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 { useNavigate } from "react-router-dom";
// import vib360Image from "figma:asset/6e4d0e4c1e2f3a4b5c6d7e8f9g0h1i2j3k4l5m6n7o8p9q0r1s2t.png";
@@ -15,7 +16,7 @@ export const VIB360Project = () => {
return (
<div className="dark min-h-screen bg-background">
{/* <Navigation /> */}
{/* Hero Section */}
<section className="pt-24 pb-16 bg-background relative overflow-hidden">
<div className="absolute inset-0 bg-gradient-to-br from-[#E5195E]/5 via-transparent to-transparent" />
@@ -28,11 +29,11 @@ export const VIB360Project = () => {
Industrial IoT Case Study
</Badge>
</div>
<h1 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 text-white font-manrope">
VIB360 Platform
</h1>
<p className="text-xl text-muted-foreground mb-8 font-manrope">
Industrial IoT Vibration Monitoring & Predictive Maintenance Platform - AI-enabled solution for real-time monitoring and operational efficiency
</p>
@@ -88,7 +89,7 @@ export const VIB360Project = () => {
{/* CTA Buttons */}
<div className="flex flex-col sm:flex-row gap-4">
<Button
<Button
size="lg"
className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white font-manrope"
onClick={() => navigate('/start-a-project')}
@@ -96,7 +97,7 @@ export const VIB360Project = () => {
Build Your IoT Platform
<ArrowRight className="w-5 h-5 ml-2" />
</Button>
<Button
<Button
size="lg"
variant="outline"
className="border-white/20 text-white hover:bg-white/10 font-manrope"
@@ -109,8 +110,8 @@ export const VIB360Project = () => {
<div className="relative">
<div className="aspect-square bg-gradient-to-br from-[#E5195E]/20 to-transparent rounded-2xl p-8 border border-white/10">
<img
src={vib360Image}
<img
src={vib360Image}
alt="VIB360 Industrial IoT Vibration Monitoring Platform"
className="w-full h-full object-cover rounded-lg"
/>
@@ -140,7 +141,7 @@ export const VIB360Project = () => {
<div className="container mx-auto px-6 lg:px-8">
<div className="max-w-6xl mx-auto">
<h2 className="text-3xl font-bold text-white mb-12 text-center font-manrope">Project Overview</h2>
<div className="grid md:grid-cols-3 gap-8">
<Card className="bg-card/50 border-white/10">
<CardContent className="p-6">
@@ -181,7 +182,7 @@ export const VIB360Project = () => {
<div className="container mx-auto px-6 lg:px-8">
<div className="max-w-6xl mx-auto">
<h2 className="text-3xl font-bold text-white mb-12 text-center font-manrope">Project Scope</h2>
<div className="grid md:grid-cols-2 gap-12">
<div>
<h3 className="text-xl font-semibold text-white mb-6 font-manrope">Core Features</h3>
@@ -229,7 +230,7 @@ export const VIB360Project = () => {
<div className="container mx-auto px-6 lg:px-8">
<div className="max-w-6xl mx-auto">
<h2 className="text-3xl font-bold text-white mb-12 text-center font-manrope">Challenges & Solution Architecture</h2>
<div className="grid md:grid-cols-2 gap-12 mb-16">
<div>
<h3 className="text-xl font-semibold text-white mb-6 font-manrope">Technical Challenges</h3>
@@ -315,43 +316,43 @@ export const VIB360Project = () => {
<div className="container mx-auto px-6 lg:px-8">
<div className="max-w-6xl mx-auto">
<h2 className="text-3xl font-bold text-white mb-12 text-center font-manrope">Development Process & Methodology</h2>
<div className="mb-12">
<div className="text-center mb-8">
<p className="text-lg text-muted-foreground font-manrope">
<strong>Agile</strong> (2-week sprints) with sprint reviews with hardware + software teams, field testing after each major release, iterative model retraining with new sensor data
</p>
</div>
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
{[
{
phase: "Discovery & Planning",
{
phase: "Discovery & Planning",
duration: "3 weeks",
description: "Hardware-software integration feasibility, AI model baseline setup"
},
{
phase: "Design & Prototyping",
{
phase: "Design & Prototyping",
duration: "5 weeks",
description: "Sensor data visualization mockups, mobile UI/UX for technician workflows"
},
{
phase: "Core Platform Development",
{
phase: "Core Platform Development",
duration: "12 weeks",
description: "Sensor connectivity modules, time-series data ingestion pipeline, web dashboard core features"
},
{
phase: "AI & Analytics Module",
{
phase: "AI & Analytics Module",
duration: "6 weeks",
description: "Model training & tuning, predictive maintenance alerts"
},
{
phase: "Integration & Testing",
{
phase: "Integration & Testing",
duration: "5 weeks",
description: "SCADA/ERP integration APIs, field testing in pilot plants"
},
{
phase: "Deployment & Training",
{
phase: "Deployment & Training",
duration: "3 weeks",
description: "Rollout to initial sites, staff training & documentation"
}
@@ -382,7 +383,7 @@ export const VIB360Project = () => {
<div className="container mx-auto px-6 lg:px-8">
<div className="max-w-6xl mx-auto">
<h2 className="text-3xl font-bold text-white mb-12 text-center font-manrope">Key Features & Functionality</h2>
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
{[
{
@@ -434,7 +435,7 @@ export const VIB360Project = () => {
<div className="container mx-auto px-6 lg:px-8">
<div className="max-w-6xl mx-auto">
<h2 className="text-3xl font-bold text-white mb-12 text-center font-manrope">Results & Impact</h2>
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
{[
{ label: "Site Deployments", value: "15", icon: Factory, desc: "industrial sites" },
@@ -495,7 +496,7 @@ export const VIB360Project = () => {
<div className="container mx-auto px-6 lg:px-8">
<div className="max-w-4xl mx-auto">
<h2 className="text-3xl font-bold text-white mb-12 text-center font-manrope">Lessons Learned & Best Practices</h2>
<div className="grid md:grid-cols-2 gap-8">
<Card className="bg-card/50 border-white/10">
<CardContent className="p-6">
@@ -560,7 +561,7 @@ export const VIB360Project = () => {
<div className="container mx-auto px-6 lg:px-8">
<div className="max-w-4xl mx-auto">
<h2 className="text-3xl font-bold text-white mb-8 text-center font-manrope">Future Roadmap</h2>
<div className="grid md:grid-cols-2 gap-8">
<Card className="bg-card/50 border-white/10">
<CardContent className="p-6">
@@ -611,7 +612,7 @@ export const VIB360Project = () => {
Create advanced predictive maintenance platforms with AI-enabled vibration monitoring and real-time analytics for industrial excellence.
</p>
<div className="flex flex-col sm:flex-row gap-4 justify-center">
<Button
<Button
size="lg"
className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white px-8 py-3 font-manrope"
onClick={() => navigate('/start-a-project')}
@@ -619,7 +620,7 @@ export const VIB360Project = () => {
Start Your Project
<ArrowRight className="w-5 h-5 ml-2" />
</Button>
<Button
<Button
size="lg"
variant="outline"
className="border-white/20 text-white hover:bg-white/10 px-8 py-3 font-manrope"

View File

@@ -122,9 +122,7 @@ const WearableHeroWithCTA = () => {
</h1>
<p className="text-lg text-gray-300 leading-relaxed max-w-lg">
Extending your digital presence to smartwatches, fitness
trackers, IoT devices, and emerging platforms for unique user
experiences.
Extending your digital presence to smartwatches, fitness trackers, IoT devices, and emerging platforms through AI-powered features for unique user experiences.
</p>
</div>
@@ -416,6 +414,9 @@ const WearableBenefits = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
Why Invest in Device-Specific App Development?
</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
@@ -696,6 +697,9 @@ const WearableProcess = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
Tailored Process for Emerging Device Applications
</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>
<div className="relative">
@@ -826,6 +830,9 @@ const WearableUseCases = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
Industries & Scenarios Benefiting from Device Apps
</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
@@ -1016,6 +1023,9 @@ const WearableTechStack = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
Leveraging Specialized Technologies for Seamless Device Integration
</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>
{/* Core Technologies */}
@@ -1026,7 +1036,7 @@ const WearableTechStack = () => {
viewport={{ once: true }}
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) => {
// const IconComponent = tech.icon;
const colorClasses = {
@@ -1162,6 +1172,9 @@ const WearableCaseStudies = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-white mb-8">
Innovative Device Applications by WDI
</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
@@ -1420,8 +1433,7 @@ const WearableFinalCTA = () => {
viewport={{ once: true }}
className="text-xl text-muted-foreground mb-12 max-w-2xl mx-auto leading-relaxed"
>
From smartwatches to complex IoT systems, we build connected
applications that push the boundaries of digital interaction.
From smartwatches to complex IoT systems, we build connected AI mobile apps that push the boundaries of digital interaction.
</motion.p>
<motion.div
@@ -1502,7 +1514,7 @@ export const WearableDeviceDevelopment = () => {
<HireDeveloperSection
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"
buttonLink="/hire-talent/wearable-app-developers"
developerTypes={[

View File

@@ -150,8 +150,7 @@ const HeroWithCTA = () => {
</h1>
<p className="text-lg text-gray-300 leading-relaxed max-w-lg">
Build high-performance web applications and robust cloud
infrastructure that scales with your business growth.
Build high-performance web development applications and robust cloud infrastructure with AI-powered design that scales with your business growth.
</p>
</div>
@@ -258,8 +257,7 @@ const HorizontalTagScroller = () => {
<span className="text-foreground"> We Master</span>
</h2>
<p className="text-2xl text-muted-foreground max-w-4xl mx-auto leading-relaxed">
Modern web and cloud technologies that power enterprise-grade
solutions.
Modern web development and cloud technologies with AI-powered features that power enterprise-grade AI mobile app solutions.
</p>
</motion.div>
@@ -386,7 +384,7 @@ const SideBySideContentWithIcons = () => {
</h2>
<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>
</motion.div>
@@ -490,8 +488,8 @@ const TabbedServiceDisplay = () => {
Web & Cloud Service Areas
</h2>
<p className="text-lg text-gray-300 max-w-4xl mx-auto leading-relaxed">
Comprehensive web development and cloud solutions designed for
scalability and performance.
Comprehensive web development and cloud solutions with AI-powered design designed for scalability and performance.
</p>
</motion.div>
@@ -582,8 +580,7 @@ const InlineCTA = () => {
{/* Subtitle */}
<p className="text-xl text-muted-foreground leading-relaxed max-w-2xl mx-auto">
Deploy robust, secure, and high-performance applications that
scale with your business growth.
Deploy robust, secure, and high-performance web development applications with AI-powered design that scale with your business growth.
</p>
{/* CTA Button */}
@@ -650,7 +647,7 @@ const HireDevelopersSection = () => {
];
const navigate = useNavigate();
return (
<section className="py-32 bg-background">
<div className="container mx-auto px-6 lg:px-8">
@@ -666,8 +663,7 @@ const HireDevelopersSection = () => {
<span className="text-[#E5195E]">Cloud Specialists</span>
</h2>
<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
cloud technologies.
Get access to expert developers who specialize in modern web development and cloud technologies with AI-powered design.
</p>
</motion.div>
@@ -757,7 +753,7 @@ const webCloudFAQs = [
{
question: "What web technologies do you specialize in?",
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?",
@@ -772,7 +768,7 @@ const webCloudFAQs = [
{
question: "What is your approach to scalable architecture?",
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?",

View File

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