1466 lines
58 KiB
TypeScript
1466 lines
58 KiB
TypeScript
import { motion } from "framer-motion";
|
||
import {
|
||
ArrowRight,
|
||
Brush,
|
||
Bug,
|
||
CheckCircle,
|
||
Clock,
|
||
Code,
|
||
DollarSign,
|
||
GitMerge,
|
||
Layout,
|
||
MessageSquare,
|
||
Network,
|
||
Palette,
|
||
RefreshCcw,
|
||
Rocket,
|
||
Share2,
|
||
Smartphone,
|
||
Target,
|
||
UserPlus,
|
||
Users2,
|
||
Wrench,
|
||
Zap,
|
||
} from "lucide-react";
|
||
import { ImageWithFallback } from "../components/figma/ImageWithFallback";
|
||
import { Footer } from "../components/Footer";
|
||
import { Navigation } from "../components/Navigation";
|
||
import {
|
||
Accordion,
|
||
AccordionContent,
|
||
AccordionItem,
|
||
AccordionTrigger,
|
||
} from "../components/ui/accordion";
|
||
import { Badge } from "../components/ui/badge";
|
||
import { Button } from "../components/ui/button";
|
||
import { Card, CardContent } from "../components/ui/card";
|
||
import { ShimmerButton } from "../components/ui/shimmer-button";
|
||
import {
|
||
Tabs,
|
||
TabsContent,
|
||
TabsList,
|
||
TabsTrigger,
|
||
} from "../components/ui/tabs";
|
||
import { useNavigate } from "react-router-dom";
|
||
import { Helmet } from "react-helmet-async";
|
||
import ranoutofImage from "../src/images/ranoutof.webp"
|
||
// import seezunImage from "../src/images/seezun.webp";
|
||
import regroupImage from "../src/images/regroup.webp";
|
||
import awsLogoImage from "../src/images/aws-logo.png";
|
||
|
||
// Cross-Platform Hero Section
|
||
const CrossPlatformHeroWithCTA = () => {
|
||
const navigate = useNavigate();
|
||
return (
|
||
<section className="relative py-20 overflow-hidden bg-black">
|
||
<Helmet>
|
||
{/* Page Title and Meta Description */}
|
||
<title>Cross-Platform App Development Services | WDI Experts</title>
|
||
<meta
|
||
name="description"
|
||
content="WDI offers efficient and scalable cross-platform app development to deliver seamless mobile experiences on Android and iOS. Accelerate your app’s success today."
|
||
/>
|
||
|
||
{/* Canonical Link */}
|
||
<link rel="canonical" href="https://www.wdipl.com/services/cross-platform-app-development" />
|
||
|
||
{/* Open Graph Tags (for Facebook, LinkedIn) */}
|
||
<meta property="og:title" content="Cross-Platform App Development Services | WDI Experts" />
|
||
<meta
|
||
property="og:description"
|
||
content="WDI offers efficient and scalable cross-platform app development to deliver seamless mobile experiences on Android and iOS. Accelerate your app’s success today."
|
||
/>
|
||
<meta property="og:url" content="https://www.wdipl.com/services" />
|
||
<meta property="og:type" content="website" />
|
||
<meta property="og:image" content="https://www.wdipl.com/your-preview-image.jpg" />
|
||
|
||
{/* Twitter Card Tags */}
|
||
<meta name="twitter:card" content="summary_large_image" />
|
||
<meta name="twitter:title" content="Cross-Platform App Development Services | WDI Experts" />
|
||
<meta
|
||
name="twitter:description"
|
||
content="WDI offers efficient and scalable cross-platform app development to deliver seamless mobile experiences on Android and iOS. Accelerate your app’s success today."
|
||
/>
|
||
<meta name="twitter:image" content="https://www.wdipl.com/your-preview-image.jpg" />
|
||
|
||
{/* Social Profiles (using JSON-LD Schema) */}
|
||
<script type="application/ld+json">
|
||
{`
|
||
{
|
||
"@context": "https://schema.org",
|
||
"@type": "Organization",
|
||
"name": "WDI",
|
||
"url": "https://www.wdipl.com",
|
||
"sameAs": [
|
||
"https://www.facebook.com/wdideas",
|
||
"https://www.linkedin.com/in/website-developers-india/",
|
||
"https://www.instagram.com/wdipl/"
|
||
]
|
||
}
|
||
`}
|
||
</script>
|
||
</Helmet>
|
||
<div className="container px-6 mx-auto lg:px-8">
|
||
<div className="grid lg:grid-cols-2 gap-16 items-center min-h-[90vh]">
|
||
<motion.div
|
||
initial={{ opacity: 0, x: -50 }}
|
||
animate={{ opacity: 1, x: 0 }}
|
||
transition={{ duration: 0.8 }}
|
||
className="space-y-8"
|
||
>
|
||
{/* Cross-Platform Development Label */}
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.6 }}
|
||
>
|
||
<span className="text-sm font-medium text-white/70">
|
||
Cross-Platform App Development
|
||
</span>
|
||
</motion.div>
|
||
|
||
{/* Main Heading */}
|
||
<div className="space-y-6">
|
||
<h1 className="text-4xl font-semibold leading-tight text-white md:text-5xl lg:text-6xl">
|
||
Efficient Cross-Platform App Development
|
||
</h1>
|
||
|
||
<p className="max-w-lg text-lg leading-relaxed text-gray-300">
|
||
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>
|
||
|
||
{/* CTAs */}
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8, delay: 0.3 }}
|
||
className="flex flex-col gap-4 sm:flex-row"
|
||
>
|
||
<ShimmerButton
|
||
className="px-8 py-4 text-lg"
|
||
onClick={() => navigate("/start-a-project")}
|
||
>
|
||
<div className="inline-flex items-center gap-2">
|
||
<Share2 className="flex-shrink-0 w-5 h-5" />
|
||
<span>Discover Cross-Platform Benefits</span>
|
||
</div>
|
||
</ShimmerButton>
|
||
<a
|
||
href="#quote"
|
||
className="inline-flex items-center justify-center gap-2 px-8 py-4 text-lg font-medium text-white transition bg-gray-800 rounded-md hover:bg-gray-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-700 whitespace-nowrap"
|
||
>
|
||
<MessageSquare className="flex-shrink-0 w-4 h-4" />
|
||
<span>Request a Quote</span>
|
||
</a>
|
||
</motion.div>
|
||
</motion.div>
|
||
|
||
{/* Right side with overlapping device mockups */}
|
||
<motion.div
|
||
initial={{ opacity: 0, x: 50 }}
|
||
animate={{ opacity: 1, x: 0 }}
|
||
transition={{ duration: 0.8, delay: 0.2 }}
|
||
className="relative flex flex-col items-center"
|
||
>
|
||
{/* Cross-Platform Device Mockups */}
|
||
<div className="relative w-full max-w-lg mx-auto">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 30 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8, delay: 0.4 }}
|
||
className="relative h-[400px] w-full mb-8 flex items-center justify-center"
|
||
>
|
||
{/* Overlapping iOS and Android phones */}
|
||
<div className="relative">
|
||
{/* iOS-style phone (left) */}
|
||
<div className="absolute h-64 transform border border-gray-700 shadow-2xl -left-8 top-4 w-44 bg-gradient-to-br from-gray-800 to-gray-900 rounded-3xl -rotate-6">
|
||
<div className="flex items-center justify-center w-full h-8 bg-gray-700 rounded-t-3xl">
|
||
<div className="w-12 h-1 bg-gray-600 rounded-full"></div>
|
||
</div>
|
||
<div className="p-4 space-y-3">
|
||
<div className="h-3 rounded bg-accent"></div>
|
||
<div className="w-4/5 h-2 bg-gray-600 rounded"></div>
|
||
<div className="w-3/5 h-2 bg-gray-600 rounded"></div>
|
||
<div className="grid grid-cols-2 gap-2 mt-4">
|
||
<div className="h-8 bg-gray-700 rounded-lg"></div>
|
||
<div className="h-8 bg-gray-700 rounded-lg"></div>
|
||
</div>
|
||
<div className="flex items-center justify-center h-12 mt-4 rounded-lg bg-blue-500/20">
|
||
<span className="text-xs font-medium text-blue-400">
|
||
iOS
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Android-style phone (right) */}
|
||
<div className="absolute h-64 transform border border-gray-700 shadow-2xl right-8 top-8 w-44 bg-gradient-to-br from-gray-800 to-gray-900 rounded-3xl rotate-6">
|
||
<div className="flex items-center justify-center w-full h-8 bg-gray-700 rounded-t-3xl">
|
||
<div className="w-12 h-1 bg-gray-600 rounded-full"></div>
|
||
</div>
|
||
<div className="p-4 space-y-3">
|
||
<div className="h-3 rounded bg-accent"></div>
|
||
<div className="w-4/5 h-2 bg-gray-600 rounded"></div>
|
||
<div className="w-3/5 h-2 bg-gray-600 rounded"></div>
|
||
<div className="grid grid-cols-2 gap-2 mt-4">
|
||
<div className="h-8 bg-gray-700 rounded-lg"></div>
|
||
<div className="h-8 bg-gray-700 rounded-lg"></div>
|
||
</div>
|
||
<div className="flex items-center justify-center h-12 mt-4 rounded-lg bg-green-500/20">
|
||
<span className="text-xs font-medium text-green-400">
|
||
Android
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Central connection indicator */}
|
||
<div className="absolute flex items-center justify-center w-16 h-16 transform -translate-x-1/2 -translate-y-1/2 border-2 rounded-full top-1/2 left-1/2 bg-accent/20 border-accent/30 backdrop-blur-sm">
|
||
<GitMerge className="w-8 h-8 text-accent" />
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
|
||
{/* Cross-Platform Technology Badges */}
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 30 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8, delay: 0.6 }}
|
||
className="flex flex-wrap justify-center gap-4"
|
||
>
|
||
<Badge
|
||
variant="secondary"
|
||
className="text-blue-300 bg-blue-500/20 border-blue-500/30"
|
||
>
|
||
Flutter
|
||
</Badge>
|
||
<Badge
|
||
variant="secondary"
|
||
className="bg-cyan-500/20 text-cyan-300 border-cyan-500/30"
|
||
>
|
||
React Native
|
||
</Badge>
|
||
<Badge
|
||
variant="secondary"
|
||
className="text-purple-300 bg-purple-500/20 border-purple-500/30"
|
||
>
|
||
Single Codebase
|
||
</Badge>
|
||
</motion.div>
|
||
</div>
|
||
</motion.div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
};
|
||
|
||
// Advantages of Cross-Platform Development
|
||
const CrossPlatformBenefits = () => {
|
||
const benefits = [
|
||
{
|
||
icon: Clock,
|
||
title: "Faster Time-to-Market",
|
||
description:
|
||
"Simultaneous launch on multiple platforms with a single development cycle, significantly reducing time from concept to deployment.",
|
||
},
|
||
{
|
||
icon: DollarSign,
|
||
title: "Cost-Effective",
|
||
description:
|
||
"Single codebase reduces development and maintenance costs by up to 50% compared to separate native applications.",
|
||
},
|
||
{
|
||
icon: Users2,
|
||
title: "Wider Audience Reach",
|
||
description:
|
||
"Instantly accessible to both iOS and Android users, maximizing your market penetration and user acquisition potential.",
|
||
},
|
||
{
|
||
icon: Layout,
|
||
title: "Unified User Experience",
|
||
description:
|
||
"Consistent look and feel across platforms while maintaining platform-specific design guidelines and user expectations.",
|
||
},
|
||
{
|
||
icon: Wrench,
|
||
title: "Simplified Maintenance",
|
||
description:
|
||
"Updates applied to one codebase reflect everywhere, streamlining bug fixes, feature additions, and ongoing support.",
|
||
},
|
||
];
|
||
|
||
return (
|
||
<section className="py-32">
|
||
<div className="container px-6 mx-auto lg:px-8">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 30 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8 }}
|
||
viewport={{ once: true }}
|
||
className="mb-16 text-center"
|
||
>
|
||
<h2 className="mb-6 text-4xl font-semibold lg:text-5xl text-foreground">
|
||
Advantages of Choosing Cross-Platform Development </h2>
|
||
<p className="max-w-3xl mx-auto text-xl leading-relaxed text-muted-foreground">
|
||
Cross-platform AI mobile app development offers unparalleled efficiency and reach for businesses looking to maximize their mobile app impact.
|
||
</p>
|
||
</motion.div>
|
||
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 40 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8, delay: 0.2 }}
|
||
viewport={{ once: true }}
|
||
className="grid max-w-6xl gap-8 mx-auto md:grid-cols-2 lg:grid-cols-3"
|
||
>
|
||
{benefits.slice(0, 3).map((benefit, index) => {
|
||
const IconComponent = benefit.icon;
|
||
return (
|
||
<motion.div
|
||
key={index}
|
||
initial={{ opacity: 0, y: 20 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.5, delay: index * 0.01 }}
|
||
viewport={{ once: true }}
|
||
whileHover={{ y: -5 }}
|
||
className="group"
|
||
>
|
||
<Card className="h-full transition-all duration-300 shadow-lg bg-card/20 backdrop-blur-md border-white/10 hover:border-accent/30 hover:shadow-xl rounded-2xl">
|
||
<CardContent className="p-8 text-center">
|
||
<div className="flex items-center justify-center w-16 h-16 mx-auto mb-6 bg-accent/20 rounded-2xl">
|
||
<IconComponent className="w-8 h-8 text-accent" />
|
||
</div>
|
||
<h3 className="mb-4 text-xl font-semibold text-foreground">
|
||
{benefit.title}
|
||
</h3>
|
||
<p className="leading-relaxed text-muted-foreground">
|
||
{benefit.description}
|
||
</p>
|
||
</CardContent>
|
||
</Card>
|
||
</motion.div>
|
||
);
|
||
})}
|
||
</motion.div>
|
||
|
||
{/* Second row with 2 cards centered */}
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 40 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8, delay: 0.4 }}
|
||
viewport={{ once: true }}
|
||
className="grid max-w-4xl gap-8 mx-auto mt-8 md:grid-cols-2"
|
||
>
|
||
{benefits.slice(3).map((benefit, index) => {
|
||
const IconComponent = benefit.icon;
|
||
return (
|
||
<motion.div
|
||
key={index + 3}
|
||
initial={{ opacity: 0, y: 20 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.5, delay: (index + 3) * 0.1 }}
|
||
viewport={{ once: true }}
|
||
whileHover={{ y: -5 }}
|
||
className="group"
|
||
>
|
||
<Card className="h-full transition-all duration-300 shadow-lg bg-card/20 backdrop-blur-md border-white/10 hover:border-accent/30 hover:shadow-xl rounded-2xl">
|
||
<CardContent className="p-8 text-center">
|
||
<div className="flex items-center justify-center w-16 h-16 mx-auto mb-6 bg-accent/20 rounded-2xl">
|
||
<IconComponent className="w-8 h-8 text-accent" />
|
||
</div>
|
||
<h3 className="mb-4 text-xl font-semibold text-foreground">
|
||
{benefit.title}
|
||
</h3>
|
||
<p className="leading-relaxed text-muted-foreground">
|
||
{benefit.description}
|
||
</p>
|
||
</CardContent>
|
||
</Card>
|
||
</motion.div>
|
||
);
|
||
})}
|
||
</motion.div>
|
||
</div>
|
||
</section>
|
||
);
|
||
};
|
||
|
||
// Cross-Platform Technologies
|
||
const CrossPlatformTechnologies = () => {
|
||
return (
|
||
<section className="py-32 bg-black">
|
||
<div className="container px-6 mx-auto lg:px-8">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 30 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8 }}
|
||
viewport={{ once: true }}
|
||
className="mb-20 text-center"
|
||
>
|
||
<h2 className="mb-6 text-4xl font-semibold text-white lg:text-5xl">
|
||
Leading Cross-Platform Frameworks We Utilize
|
||
</h2>
|
||
<p className="max-w-3xl mx-auto text-xl leading-relaxed text-gray-300">
|
||
We leverage the most powerful and mature cross-platform frameworks
|
||
to deliver exceptional mobile experiences.
|
||
</p>
|
||
</motion.div>
|
||
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 40 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8, delay: 0.2 }}
|
||
viewport={{ once: true }}
|
||
>
|
||
<Tabs defaultValue="flutter" className="max-w-6xl mx-auto">
|
||
<TabsList className="grid w-full grid-cols-2 mb-12 border border-gray-800 bg-gray-900/50 h-17">
|
||
<TabsTrigger value="flutter" className="h-full py-4 text-base">
|
||
<div className="flex items-center gap-2">
|
||
<div className="flex items-center justify-center w-6 h-6 bg-blue-500 rounded">
|
||
<span className="text-xs font-bold text-white">F</span>
|
||
</div>
|
||
Flutter Development
|
||
</div>
|
||
</TabsTrigger>
|
||
<TabsTrigger
|
||
value="react-native"
|
||
className="h-full py-4 text-base"
|
||
>
|
||
<div className="flex items-center gap-2">
|
||
<div className="flex items-center justify-center w-6 h-6 rounded bg-cyan-500">
|
||
<span className="text-xs font-bold text-white">RN</span>
|
||
</div>
|
||
React Native Development
|
||
</div>
|
||
</TabsTrigger>
|
||
</TabsList>
|
||
|
||
<TabsContent value="flutter" className="mt-0">
|
||
<div className="grid items-center gap-16 lg:grid-cols-2">
|
||
<div className="space-y-8">
|
||
<div className="space-y-6">
|
||
<div className="flex items-center gap-4">
|
||
<div className="flex items-center justify-center w-16 h-16 bg-blue-500/20 rounded-2xl">
|
||
<div className="flex items-center justify-center w-8 h-8 bg-blue-500 rounded">
|
||
<span className="font-bold text-white">F</span>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<h3 className="text-2xl font-semibold text-white">
|
||
Flutter Development
|
||
</h3>
|
||
<p className="text-gray-400">
|
||
Google's UI toolkit for natively compiled applications
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<p className="leading-relaxed text-gray-300">
|
||
Known for expressive UIs and hot-reload functionality that
|
||
accelerates development cycles. Flutter allows for
|
||
pixel-perfect designs and smooth animations across
|
||
platforms.
|
||
</p>
|
||
</div>
|
||
|
||
<div className="space-y-4">
|
||
<h4 className="text-lg font-semibold text-white">
|
||
Key Benefits:
|
||
</h4>
|
||
<ul className="space-y-3">
|
||
{[
|
||
"Excellent performance with native compilation",
|
||
"Beautiful UIs with customizable widgets",
|
||
"Single codebase for mobile, web, and desktop",
|
||
"Fast development with hot-reload",
|
||
"Growing ecosystem and strong Google backing",
|
||
].map((benefit, index) => (
|
||
<li
|
||
key={index}
|
||
className="flex items-center gap-3 text-gray-300"
|
||
>
|
||
<CheckCircle className="flex-shrink-0 w-5 h-5 text-blue-500" />
|
||
{benefit}
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="p-8 border border-gray-800 bg-gray-900/50 backdrop-blur-md rounded-2xl">
|
||
<div className="space-y-6">
|
||
<div className="flex items-center gap-4 mb-6">
|
||
<div className="flex items-center justify-center w-12 h-12 bg-blue-500/20 rounded-xl">
|
||
<Code className="w-6 h-6 text-blue-500" />
|
||
</div>
|
||
<h4 className="text-lg font-semibold text-white">
|
||
Flutter Tech Stack
|
||
</h4>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-2 gap-4">
|
||
{[
|
||
"Dart Language",
|
||
"Material Design",
|
||
"Cupertino Widgets",
|
||
"Firebase Integration",
|
||
"Native Plugins",
|
||
"State Management",
|
||
].map((tech, index) => (
|
||
<div
|
||
key={index}
|
||
className="p-3 text-center rounded-lg bg-gray-800/50"
|
||
>
|
||
<span className="text-sm text-gray-300">{tech}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</TabsContent>
|
||
|
||
<TabsContent value="react-native" className="mt-0">
|
||
<div className="grid items-center gap-16 lg:grid-cols-2">
|
||
<div className="space-y-8">
|
||
<div className="space-y-6">
|
||
<div className="flex items-center gap-4">
|
||
<div className="flex items-center justify-center w-16 h-16 bg-cyan-500/20 rounded-2xl">
|
||
<div className="flex items-center justify-center w-8 h-8 rounded bg-cyan-500">
|
||
<span className="font-bold text-white">RN</span>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<h3 className="text-2xl font-semibold text-white">
|
||
React Native Development
|
||
</h3>
|
||
<p className="text-gray-400">
|
||
Facebook's framework for building native mobile apps
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<p className="leading-relaxed text-gray-300">
|
||
Uses JavaScript and React paradigms to create truly native
|
||
mobile applications. Leverages existing web development
|
||
skills for mobile app creation.
|
||
</p>
|
||
</div>
|
||
|
||
<div className="space-y-4">
|
||
<h4 className="text-lg font-semibold text-white">
|
||
Key Benefits:
|
||
</h4>
|
||
<ul className="space-y-3">
|
||
{[
|
||
"Large community and extensive libraries",
|
||
"Reusable components across platforms",
|
||
"Efficient development cycles",
|
||
"Native performance and feel",
|
||
"Easy integration with existing React web apps",
|
||
].map((benefit, index) => (
|
||
<li
|
||
key={index}
|
||
className="flex items-center gap-3 text-gray-300"
|
||
>
|
||
<CheckCircle className="flex-shrink-0 w-5 h-5 text-cyan-500" />
|
||
{benefit}
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="p-8 border border-gray-800 bg-gray-900/50 backdrop-blur-md rounded-2xl">
|
||
<div className="space-y-6">
|
||
<div className="flex items-center gap-4 mb-6">
|
||
<div className="flex items-center justify-center w-12 h-12 bg-cyan-500/20 rounded-xl">
|
||
<Code className="w-6 h-6 text-cyan-500" />
|
||
</div>
|
||
<h4 className="text-lg font-semibold text-white">
|
||
React Native Tech Stack
|
||
</h4>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-2 gap-4">
|
||
{[
|
||
"JavaScript/TypeScript",
|
||
"React Components",
|
||
"Native Modules",
|
||
"Redux/Context API",
|
||
"Expo Framework",
|
||
"Native Navigation",
|
||
].map((tech, index) => (
|
||
<div
|
||
key={index}
|
||
className="p-3 text-center rounded-lg bg-gray-800/50"
|
||
>
|
||
<span className="text-sm text-gray-300">{tech}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</TabsContent>
|
||
</Tabs>
|
||
</motion.div>
|
||
</div>
|
||
</section>
|
||
);
|
||
};
|
||
|
||
// Cross-Platform Development Process
|
||
const CrossPlatformProcess = () => {
|
||
const steps = [
|
||
{
|
||
title: "Feasibility & Strategy",
|
||
description:
|
||
"Analyze your project requirements and determine the optimal cross-platform approach for maximum efficiency and performance.",
|
||
icon: Target,
|
||
},
|
||
{
|
||
title: "UI/UX Design",
|
||
description:
|
||
"Create adaptable designs that maintain platform consistency while leveraging cross-platform capabilities for unified experiences.",
|
||
icon: Palette,
|
||
},
|
||
{
|
||
title: "Development",
|
||
description:
|
||
"Build your application using Flutter or React Native, ensuring optimal performance and native-like user experience.",
|
||
icon: Code,
|
||
},
|
||
{
|
||
title: "Multi-Platform QA",
|
||
description:
|
||
"Comprehensive testing across all target platforms and devices to ensure consistent functionality and performance.",
|
||
icon: Bug,
|
||
},
|
||
{
|
||
title: "Launch & Optimization",
|
||
description:
|
||
"Deploy to app stores and continuously optimize performance across platforms based on user feedback and analytics.",
|
||
icon: Rocket,
|
||
},
|
||
];
|
||
|
||
return (
|
||
<section className="py-32">
|
||
<div className="container px-6 mx-auto lg:px-8">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 30 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8 }}
|
||
viewport={{ once: true }}
|
||
className="mb-20 text-center"
|
||
>
|
||
<h2 className="mb-6 text-4xl font-semibold lg:text-5xl text-foreground">
|
||
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 AI mobile app development and deployment across multiple platforms with AI-powered features.
|
||
</p>
|
||
</motion.div>
|
||
|
||
<div className="relative">
|
||
{/* Timeline line */}
|
||
<div className="absolute left-1/2 transform -translate-x-1/2 h-full w-0.5 bg-gradient-to-b from-accent via-accent/50 to-transparent hidden lg:block"></div>
|
||
|
||
<div className="space-y-16">
|
||
{steps.map((step, index) => {
|
||
const IconComponent = step.icon;
|
||
const isEven = index % 2 === 0;
|
||
|
||
return (
|
||
<motion.div
|
||
key={index}
|
||
initial={{ opacity: 0, x: isEven ? -50 : 50 }}
|
||
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`}
|
||
>
|
||
<div
|
||
className={`flex-1 ${isEven ? "lg:text-right" : "lg:text-left"
|
||
} text-center lg:text-left`}
|
||
>
|
||
<div className="p-8 transition-all duration-300 border shadow-lg bg-card/20 backdrop-blur-md rounded-2xl border-white/10 hover:border-accent/30 hover:shadow-xl">
|
||
<div className="flex items-center justify-center gap-4 mb-4 lg:justify-start">
|
||
<div className="flex items-center justify-center w-12 h-12 bg-accent/20 rounded-xl">
|
||
<IconComponent className="w-6 h-6 text-accent" />
|
||
</div>
|
||
<div className="text-2xl font-bold text-accent">
|
||
0{index + 1}
|
||
</div>
|
||
</div>
|
||
<h3 className="mb-4 text-2xl font-semibold text-foreground">
|
||
{step.title}
|
||
</h3>
|
||
<p className="leading-relaxed text-muted-foreground">
|
||
{step.description}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Timeline dot */}
|
||
<div className="z-10 hidden w-4 h-4 border-4 rounded-full bg-accent border-background lg:block"></div>
|
||
|
||
<div className="flex-1 hidden lg:block"></div>
|
||
</motion.div>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
};
|
||
|
||
// Cross-Platform Services
|
||
const CrossPlatformServices = () => {
|
||
const services = [
|
||
{
|
||
title: "New Cross-Platform App Development",
|
||
description:
|
||
"Building custom applications from scratch using modern cross-platform frameworks for maximum efficiency.",
|
||
icon: Smartphone,
|
||
},
|
||
{
|
||
title: "Existing App Migration",
|
||
description:
|
||
"Migrating native apps to cross-platform solutions for improved maintenance and cost efficiency.",
|
||
icon: RefreshCcw,
|
||
},
|
||
{
|
||
title: "Cross-Platform UI/UX Design",
|
||
description:
|
||
"Designing consistent, adaptable interfaces that work seamlessly across all target platforms.",
|
||
icon: Brush,
|
||
},
|
||
{
|
||
title: "Performance Optimization",
|
||
description:
|
||
"Ensuring smooth performance on all devices through platform-specific optimizations and best practices.",
|
||
icon: Zap,
|
||
},
|
||
{
|
||
title: "Integration with Third-Party APIs",
|
||
description:
|
||
"Seamless connectivity for expanded functionality including payments, analytics, and cloud services.",
|
||
icon: Network,
|
||
},
|
||
{
|
||
title: "Cross-Platform Maintenance",
|
||
description:
|
||
"Ongoing support and updates for cross-platform applications with unified deployment strategies.",
|
||
icon: Wrench,
|
||
},
|
||
];
|
||
|
||
return (
|
||
<section className="py-32 bg-black">
|
||
<div className="container px-6 mx-auto lg:px-8">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 30 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8 }}
|
||
viewport={{ once: true }}
|
||
className="mb-20 text-center"
|
||
>
|
||
<h2 className="mb-6 text-4xl font-semibold text-white lg:text-5xl">
|
||
Our Comprehensive Cross-Platform Solutions
|
||
</h2>
|
||
<p className="max-w-3xl mx-auto text-xl leading-relaxed text-gray-300">
|
||
From new development to migration and ongoing support, we provide
|
||
end-to-end cross-platform services.
|
||
</p>
|
||
</motion.div>
|
||
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 40 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8, delay: 0.2 }}
|
||
viewport={{ once: true }}
|
||
className="grid gap-8 md:grid-cols-2 lg:grid-cols-3"
|
||
>
|
||
{services.map((service, index) => {
|
||
const IconComponent = service.icon;
|
||
return (
|
||
<motion.div
|
||
key={index}
|
||
initial={{ opacity: 0, y: 20 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.5, delay: index * 0.01 }}
|
||
viewport={{ once: true }}
|
||
whileHover={{ y: -5 }}
|
||
className="group"
|
||
>
|
||
<Card className="h-full transition-all duration-300 border-gray-800 shadow-lg bg-gray-900/50 backdrop-blur-md hover:border-accent/30 hover:shadow-xl rounded-2xl">
|
||
<CardContent className="p-8">
|
||
<div className="flex items-center justify-center w-12 h-12 mb-6 rounded-lg bg-accent/20">
|
||
<IconComponent className="w-6 h-6 text-accent" />
|
||
</div>
|
||
<h3 className="mb-4 text-xl font-semibold text-white">
|
||
{service.title}
|
||
</h3>
|
||
<p className="leading-relaxed text-gray-300">
|
||
{service.description}
|
||
</p>
|
||
</CardContent>
|
||
</Card>
|
||
</motion.div>
|
||
);
|
||
})}
|
||
</motion.div>
|
||
</div>
|
||
</section>
|
||
);
|
||
};
|
||
|
||
// Cross-Platform Case Studies
|
||
const CrossPlatformCaseStudies = () => {
|
||
const navigate = useNavigate();
|
||
const caseStudies = [
|
||
{
|
||
title: "Household Management Revolution",
|
||
client: "RanOutOf",
|
||
description:
|
||
"Smart inventory management app that helps households track supplies, create shopping lists, and reduce waste through intelligent notifications.",
|
||
image: ranoutofImage,
|
||
results: "3M+ downloads",
|
||
gradient: "from-[#007F33]/20 to-[#007F33]/10",
|
||
buttonLink: "/projects/ranoutof",
|
||
},
|
||
// {
|
||
// title: "E-commerce Platform Innovation",
|
||
// client: "Seezun",
|
||
// description:
|
||
// "Next-generation e-commerce solution with AI-powered recommendations, seamless checkout, and advanced analytics for modern retailers.",
|
||
// image: seezunImage,
|
||
// results: "800K+ users",
|
||
// gradient: "from-blue-500/20 to-cyan-500/20",
|
||
// buttonLink: "/projects/seezun",
|
||
// },
|
||
{
|
||
title: "Social Networking Platform",
|
||
client: "Regroup",
|
||
description:
|
||
"Revolutionary social platform connecting communities worldwide with advanced messaging, group management, and content sharing capabilities.",
|
||
image: regroupImage,
|
||
results: "1.5M+ downloads",
|
||
gradient: "from-[#a98453]/20 to-[#a98453]/10",
|
||
buttonLink: "/projects/regroup",
|
||
},
|
||
];
|
||
|
||
return (
|
||
<section className="py-32">
|
||
<div className="container px-6 mx-auto lg:px-8">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 30 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8 }}
|
||
viewport={{ once: true }}
|
||
className="mb-20 text-center"
|
||
>
|
||
<h2 className="mb-8 text-4xl font-semibold lg:text-5xl text-foreground">
|
||
Cross-Platform Apps That Define Industries </h2>
|
||
<p className="max-w-3xl mx-auto text-xl leading-relaxed text-muted-foreground">
|
||
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>
|
||
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 40 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8, delay: 0.2 }}
|
||
viewport={{ once: true }}
|
||
className="grid gap-8 md:grid-cols-2 lg:grid-cols-3"
|
||
>
|
||
{caseStudies.map((study, index) => (
|
||
<motion.div
|
||
key={index}
|
||
initial={{ opacity: 0, y: 20 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.5, delay: index * 0.01 }}
|
||
viewport={{ once: true }}
|
||
whileHover={{ y: -8, scale: 1.02 }}
|
||
className="cursor-pointer group"
|
||
>
|
||
<Card className="h-full overflow-hidden transition-all duration-300 shadow-lg bg-card/20 backdrop-blur-md border-white/10 hover:border-accent/30 hover:shadow-xl rounded-2xl">
|
||
<CardContent className="flex flex-col h-full p-0">
|
||
<div className="p-8 pb-6">
|
||
<div className="flex items-start gap-4 mb-6">
|
||
<div className="flex items-center justify-center w-12 h-12 bg-accent/20 rounded-xl">
|
||
<svg
|
||
className="w-6 h-6 text-accent"
|
||
viewBox="0 0 24 24"
|
||
fill="currentColor"
|
||
>
|
||
<path d="M17.523 15.3414c-.5665-.0085-1.2274-.1111-2.0032-.2551.7758-.1511 1.4368-.2551 2.0032-.2551.5665 0 1.2274.1111 2.0032.2551-.7758.1511-1.4368.2551-2.0032.2551zM12 2C13.1046 2 14 2.8954 14 4s-.8954 2-2 2-2-.8954-2-2 .8954-2 2-2zm6 18c1.1046 0 2-.8954 2-2s-.8954-2-2-2-2 .8954-2 2 .8954 2 2 2zM6 20c1.1046 0 2-.8954 2-2s-.8954-2-2-2-2 .8954-2 2 .8954 2 2 2z" />
|
||
</svg>
|
||
</div>
|
||
<div className="flex-1">
|
||
<div className="mb-2 text-xs tracking-wider uppercase text-muted-foreground">
|
||
{study.client}
|
||
</div>
|
||
<Badge
|
||
variant="secondary"
|
||
className="text-xs bg-accent/20 text-accent border-accent/30"
|
||
>
|
||
{study.results}
|
||
</Badge>
|
||
</div>
|
||
</div>
|
||
|
||
<h3 className="text-xl font-semibold text-foreground mb-4 leading-tight min-h-[45px]">
|
||
{study.title}
|
||
</h3>
|
||
</div>
|
||
|
||
<div className="flex-1 px-8 pb-6">
|
||
<div
|
||
className={`relative rounded-xl overflow-hidden bg-gradient-to-br ${study.gradient} p-4 border border-white/10`}
|
||
>
|
||
<ImageWithFallback
|
||
src={study.image}
|
||
alt={study.title}
|
||
className="object-cover w-full h-48 rounded-lg shadow-lg"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="px-8 pb-6">
|
||
<p className="text-sm leading-relaxed text-muted-foreground">
|
||
{study.description}
|
||
</p>
|
||
</div>
|
||
|
||
<div className="p-8 pt-0 mt-auto">
|
||
<Button
|
||
variant="ghost"
|
||
size="sm"
|
||
className="justify-between w-full transition-all duration-300 text-accent hover:text-accent hover:bg-accent/10 group-hover:translate-x-1"
|
||
onClick={() => navigate(study.buttonLink)}
|
||
>
|
||
<span className="text-sm font-medium">
|
||
VIEW CASE STUDY
|
||
</span>
|
||
<ArrowRight className="w-4 h-4" />
|
||
</Button>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</motion.div>
|
||
))}
|
||
</motion.div>
|
||
</div>
|
||
</section>
|
||
);
|
||
};
|
||
|
||
// Mid-Page CTA
|
||
const CrossPlatformInlineCTA = () => {
|
||
const navigate = useNavigate();
|
||
return (
|
||
<section className="py-20 bg-black">
|
||
<div className="container px-6 mx-auto lg:px-8">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 50 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8 }}
|
||
viewport={{ once: true }}
|
||
className="max-w-4xl mx-auto text-center"
|
||
>
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 30 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8, delay: 0.2 }}
|
||
viewport={{ once: true }}
|
||
className="space-y-8"
|
||
>
|
||
<div className="inline-block p-[2px] rounded-full bg-gradient-to-r from-accent via-blue-500 to-purple-500">
|
||
<div className="flex items-center gap-2 px-6 py-3 bg-black rounded-full">
|
||
<GitMerge className="w-5 h-5 text-white" />
|
||
<span className="text-base font-medium text-white">
|
||
Cross-Platform Innovation
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<h2 className="text-4xl font-semibold leading-tight text-white lg:text-5xl">
|
||
Considering a{" "}
|
||
<span className="text-accent">Cross-Platform Approach?</span>
|
||
</h2>
|
||
|
||
<p className="max-w-2xl mx-auto text-xl leading-relaxed text-gray-300">
|
||
Let's analyze if cross-platform is the right fit for your project
|
||
goals and maximize your development efficiency.
|
||
</p>
|
||
|
||
<ShimmerButton
|
||
className="px-10 py-5 text-xl shadow-lg rounded-2xl hover:shadow-xl"
|
||
onClick={() => navigate("/start-a-project")}
|
||
>
|
||
<div className="inline-flex items-center gap-3">
|
||
<Target className="flex-shrink-0 w-6 h-6" />
|
||
<span>Get a Free Strategy Session</span>
|
||
</div>
|
||
</ShimmerButton>
|
||
</motion.div>
|
||
</motion.div>
|
||
</div>
|
||
</section>
|
||
);
|
||
};
|
||
// CrossPlatformTechStack
|
||
|
||
const CrossPlatformTechStack = () => {
|
||
const technologies = [
|
||
{
|
||
name: "React Native",
|
||
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/react/react-original.svg",
|
||
},
|
||
{
|
||
name: "Flutter",
|
||
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/flutter/flutter-original.svg",
|
||
},
|
||
{
|
||
name: "Xamarin",
|
||
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/xamarin/xamarin-original.svg",
|
||
},
|
||
{
|
||
name: "Ionic",
|
||
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/ionic/ionic-original.svg",
|
||
},
|
||
{
|
||
name: "Firebase",
|
||
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/firebase/firebase-plain.svg",
|
||
},
|
||
{
|
||
name: "AWS",
|
||
logo: awsLogoImage,
|
||
},
|
||
{
|
||
name: "GraphQL / Apollo",
|
||
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/graphql/graphql-plain.svg",
|
||
},
|
||
{
|
||
name: "TypeScript",
|
||
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/typescript/typescript-original.svg",
|
||
},
|
||
];
|
||
|
||
return (
|
||
<section className="py-32 bg-black">
|
||
<div className="container px-6 mx-auto lg:px-8">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 30 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8 }}
|
||
viewport={{ once: true }}
|
||
className="mb-20 text-center"
|
||
>
|
||
<h2 className="mb-6 text-4xl font-semibold text-white lg:text-5xl">
|
||
Cross-Platform App Development Technologies
|
||
</h2>
|
||
<p className="text-xl leading-relaxed text-gray-300">
|
||
We build seamless apps for iOS, Android, and the web using
|
||
cutting-edge cross-platform frameworks and tools.
|
||
</p>
|
||
</motion.div>
|
||
|
||
<div className="grid max-w-4xl grid-cols-2 gap-8 mx-auto md:grid-cols-4">
|
||
{technologies.map((tech, index) => (
|
||
<motion.div
|
||
key={index}
|
||
initial={{ opacity: 0, scale: 0.8 }}
|
||
whileInView={{ opacity: 1, scale: 1 }}
|
||
transition={{ duration: 0.5, delay: index * 0.01 }}
|
||
viewport={{ once: true }}
|
||
whileHover={{ scale: 1.1, y: -5 }}
|
||
className="flex flex-col items-center group"
|
||
>
|
||
<div className="flex items-center justify-center w-20 h-20 mb-4 transition-all duration-300 border border-gray-800 shadow-lg bg-gray-900/50 rounded-2xl group-hover:border-accent/30 group-hover:shadow-xl">
|
||
<ImageWithFallback
|
||
src={tech.logo}
|
||
alt={tech.name}
|
||
className="object-contain w-12 h-12"
|
||
/>
|
||
</div>
|
||
<span className="text-sm text-gray-300 transition-colors duration-300 group-hover:text-white">
|
||
{tech.name}
|
||
</span>
|
||
</motion.div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
};
|
||
|
||
export default CrossPlatformTechStack;
|
||
|
||
|
||
// Hire Cross-Platform Developers
|
||
const HireCrossPlatformDevelopers = () => {
|
||
const navigate = useNavigate();
|
||
const developerTypes = [
|
||
{
|
||
title: "Senior Flutter Developer",
|
||
experience: "5+ Years",
|
||
skills: ["Flutter", "Dart", "Firebase", "State Management"],
|
||
specialties: "Cross-Platform UI, Performance Optimization",
|
||
},
|
||
{
|
||
title: "React Native Expert",
|
||
experience: "4+ Years",
|
||
skills: ["React Native", "JavaScript", "TypeScript", "Redux"],
|
||
specialties: "Native Bridges, Component Architecture",
|
||
},
|
||
{
|
||
title: "Cross-Platform Architect",
|
||
experience: "6+ Years",
|
||
skills: ["System Design", "Both Frameworks", "DevOps", "Testing"],
|
||
specialties: "Platform Strategy, Technical Leadership",
|
||
},
|
||
];
|
||
|
||
return (
|
||
<section className="py-32">
|
||
<div className="container px-6 mx-auto lg:px-8">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 30 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8 }}
|
||
viewport={{ once: true }}
|
||
className="mb-20 text-center"
|
||
>
|
||
<h2 className="mb-8 text-4xl font-semibold lg:text-5xl text-foreground">
|
||
Hire Expert Flutter & React Native Developers
|
||
</h2>
|
||
<p className="max-w-3xl mx-auto text-xl leading-relaxed text-muted-foreground">
|
||
Find seasoned professionals skilled in both Flutter and React Native
|
||
to accelerate your cross-platform development.
|
||
</p>
|
||
</motion.div>
|
||
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 40 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8, delay: 0.2 }}
|
||
viewport={{ once: true }}
|
||
className="grid gap-8 mb-12 md:grid-cols-2 lg:grid-cols-3"
|
||
>
|
||
{developerTypes.map((dev, index) => (
|
||
<motion.div
|
||
key={index}
|
||
initial={{ opacity: 0, y: 20 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.5, delay: index * 0.01 }}
|
||
viewport={{ once: true }}
|
||
whileHover={{ y: -8, scale: 1.02 }}
|
||
className="cursor-pointer group"
|
||
>
|
||
<Card className="h-full transition-all duration-300 shadow-lg bg-card/20 backdrop-blur-md border-white/10 hover:border-accent/30 hover:shadow-xl rounded-2xl">
|
||
<CardContent className="p-8">
|
||
<div className="flex items-center gap-4 mb-6">
|
||
<div className="flex items-center justify-center w-12 h-12 bg-accent/20 rounded-xl">
|
||
<GitMerge className="w-6 h-6 text-accent" />
|
||
</div>
|
||
<div>
|
||
<Badge
|
||
variant="secondary"
|
||
className="text-xs bg-accent/20 text-accent border-accent/30"
|
||
>
|
||
{dev.experience}
|
||
</Badge>
|
||
</div>
|
||
</div>
|
||
|
||
<h3 className="mb-4 text-xl font-semibold text-foreground">
|
||
{dev.title}
|
||
</h3>
|
||
|
||
<p className="mb-4 text-sm text-muted-foreground">
|
||
{dev.specialties}
|
||
</p>
|
||
|
||
<div className="flex flex-wrap gap-2">
|
||
{dev.skills.map((skill) => (
|
||
<Badge
|
||
key={skill}
|
||
variant="secondary"
|
||
className="text-xs bg-white/10 text-foreground"
|
||
>
|
||
{skill}
|
||
</Badge>
|
||
))}
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</motion.div>
|
||
))}
|
||
</motion.div>
|
||
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 30 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8, delay: 0.4 }}
|
||
viewport={{ once: true }}
|
||
className="flex flex-col justify-center gap-4 sm:flex-row"
|
||
>
|
||
<ShimmerButton className="px-8 py-4"
|
||
onClick={() => navigate("/hire-talent/cross-platform-developers")}
|
||
>
|
||
<div className="inline-flex items-center gap-2">
|
||
<UserPlus className="flex-shrink-0 w-5 h-5" />
|
||
<span>Hire Cross-Platform Developers</span>
|
||
</div>
|
||
</ShimmerButton>
|
||
<Button
|
||
variant="outline"
|
||
className="h-auto px-8 py-4 transition-all duration-300 rounded-lg border-white/20 text-foreground hover:bg-white/10"
|
||
>
|
||
<span>View Talent Profiles</span>
|
||
<ArrowRight className="w-4 h-4 ml-2" />
|
||
</Button>
|
||
</motion.div>
|
||
</div>
|
||
</section>
|
||
);
|
||
};
|
||
|
||
// Cross-Platform FAQs
|
||
const CrossPlatformFAQs = () => {
|
||
const faqs = [
|
||
{
|
||
question: "When is cross-platform development the best choice?",
|
||
answer:
|
||
"Cross-platform development is ideal when you need to reach both iOS and Android users quickly and cost-effectively, have limited resources, require consistent UI/UX across platforms, or want simplified maintenance. It's particularly beneficial for MVPs, content-driven apps, and business applications where time-to-market is crucial.",
|
||
},
|
||
{
|
||
question: "What are the limitations of cross-platform apps?",
|
||
answer:
|
||
"While cross-platform apps are highly capable, they may have slightly lower performance for graphics-intensive applications, limited access to some platform-specific features, and larger app sizes compared to native apps. However, modern frameworks like Flutter and React Native have significantly minimized these limitations.",
|
||
},
|
||
{
|
||
question: "Do cross-platform apps feel 'native'?",
|
||
answer:
|
||
"Yes, modern cross-platform frameworks produce apps that feel and perform like native applications. Flutter compiles to native code, while React Native uses native components. Our development approach ensures platform-specific design guidelines are followed for authentic user experiences.",
|
||
},
|
||
{
|
||
question: "How do you handle platform-specific features?",
|
||
answer:
|
||
"We leverage platform-specific code when needed through native modules, plugins, and bridge implementations. Both Flutter and React Native provide robust mechanisms for accessing platform-specific APIs, camera functions, sensors, and OS-level features while maintaining code sharing for common functionality.",
|
||
},
|
||
];
|
||
|
||
return (
|
||
<section className="py-32 bg-black">
|
||
<div className="container px-6 mx-auto lg:px-8">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 30 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8 }}
|
||
viewport={{ once: true }}
|
||
className="mb-20 text-center"
|
||
>
|
||
<h2 className="mb-6 text-4xl font-semibold text-white lg:text-5xl">
|
||
Frequently Asked Questions
|
||
</h2>
|
||
<p className="text-xl leading-relaxed text-gray-300">
|
||
Common questions about cross-platform app development.
|
||
</p>
|
||
</motion.div>
|
||
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 40 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8, delay: 0.2 }}
|
||
viewport={{ once: true }}
|
||
className="max-w-4xl mx-auto"
|
||
>
|
||
<Accordion type="single" collapsible className="space-y-8">
|
||
{faqs.map((faq, index) => (
|
||
<AccordionItem
|
||
key={index}
|
||
value={`item-${index}`}
|
||
className="px-10 border border-gray-800 shadow-lg bg-gray-900/50 backdrop-blur-md rounded-2xl"
|
||
>
|
||
<AccordionTrigger className="py-10 text-xl text-left hover:no-underline">
|
||
<span className="font-semibold text-white">
|
||
{faq.question}
|
||
</span>
|
||
</AccordionTrigger>
|
||
<AccordionContent className="pb-10 text-lg leading-relaxed text-gray-300">
|
||
{faq.answer}
|
||
</AccordionContent>
|
||
</AccordionItem>
|
||
))}
|
||
</Accordion>
|
||
</motion.div>
|
||
</div>
|
||
</section>
|
||
);
|
||
};
|
||
|
||
// Final CTA Section
|
||
const CrossPlatformFinalCTA = () => {
|
||
const navigate = useNavigate();
|
||
return (
|
||
<section className="relative py-20 overflow-hidden">
|
||
<div className="container relative z-10 px-6 mx-auto lg:px-8">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 50 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8 }}
|
||
viewport={{ once: true }}
|
||
className="max-w-4xl mx-auto text-center"
|
||
>
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.6 }}
|
||
viewport={{ once: true }}
|
||
className="mb-8"
|
||
>
|
||
<div className="inline-block p-[2px] rounded-full bg-gradient-to-r from-accent via-blue-500 to-purple-500">
|
||
<div className="flex items-center gap-2 px-6 py-3 rounded-full bg-background">
|
||
<GitMerge className="w-5 h-5 text-foreground" />
|
||
<span className="text-base font-medium text-foreground">
|
||
Ready to Launch?
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
|
||
<motion.h2
|
||
initial={{ opacity: 0, y: 30 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8, delay: 0.2 }}
|
||
viewport={{ once: true }}
|
||
className="mb-6 text-4xl font-semibold leading-tight lg:text-5xl text-foreground"
|
||
>
|
||
Achieve Broader Reach with{" "}
|
||
<span className="text-accent">WDI's Cross-Platform Expertise</span>
|
||
</motion.h2>
|
||
|
||
<motion.p
|
||
initial={{ opacity: 0, y: 20 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8, delay: 0.3 }}
|
||
viewport={{ once: true }}
|
||
className="max-w-2xl mx-auto mb-12 text-xl leading-relaxed text-muted-foreground"
|
||
>
|
||
Leverage our experience to build robust, beautiful apps for both iOS
|
||
and Android efficiently.
|
||
</motion.p>
|
||
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 40 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.8, delay: 0.4 }}
|
||
viewport={{ once: true }}
|
||
className="space-y-8"
|
||
>
|
||
<ShimmerButton
|
||
className="px-12 py-6 text-xl shadow-2xl rounded-2xl hover:shadow-accent/25"
|
||
onClick={() => navigate("/start-a-project")}
|
||
>
|
||
<div className="inline-flex items-center gap-3">
|
||
<Rocket className="flex-shrink-0 w-6 h-6" />
|
||
<span>Start Your Cross-Platform Project</span>
|
||
</div>
|
||
</ShimmerButton>
|
||
|
||
<p className="text-sm text-muted-foreground">
|
||
Free consultation • Strategy session • Rapid development
|
||
</p>
|
||
</motion.div>
|
||
</motion.div>
|
||
</div>
|
||
|
||
{/* Background Decorative Elements */}
|
||
<div className="absolute top-0 left-0 w-full h-full overflow-hidden pointer-events-none">
|
||
<div className="absolute rounded-full top-20 left-20 w-60 h-60 bg-accent/5 blur-3xl"></div>
|
||
<div className="absolute rounded-full bottom-20 right-20 w-60 h-60 bg-blue-500/5 blur-3xl"></div>
|
||
<div className="absolute transform -translate-x-1/2 -translate-y-1/2 rounded-full top-1/2 left-1/2 w-80 h-80 bg-purple-500/3 blur-3xl"></div>
|
||
</div>
|
||
</section>
|
||
);
|
||
};
|
||
|
||
// Main Cross-Platform App Development Page
|
||
export const CrossPlatformAppDevelopment = () => {
|
||
return (
|
||
<div className="min-h-screen dark">
|
||
{/* <Navigation /> */}
|
||
|
||
{/* Hero Section */}
|
||
<section className="bg-black">
|
||
<CrossPlatformHeroWithCTA />
|
||
</section>
|
||
|
||
{/* Key Benefits */}
|
||
<section className="bg-background">
|
||
<CrossPlatformBenefits />
|
||
</section>
|
||
|
||
{/* Case Studies */}
|
||
<section className="bg-black">
|
||
<CrossPlatformCaseStudies />
|
||
</section>
|
||
|
||
{/* Technologies */}
|
||
<section className="bg-background">
|
||
<CrossPlatformTechnologies />
|
||
</section>
|
||
|
||
{/* Development Process */}
|
||
<section className="bg-black">
|
||
<CrossPlatformProcess />
|
||
</section>
|
||
|
||
{/* Services */}
|
||
<section className="bg-background">
|
||
<CrossPlatformServices />
|
||
</section>
|
||
|
||
{/* Mid-Page CTA */}
|
||
{/* <section className="bg-card">
|
||
<CrossPlatformInlineCTA />
|
||
</section> */}
|
||
|
||
{/* cross platform tech */}
|
||
<section className="bg-black">
|
||
<CrossPlatformTechStack />
|
||
</section>
|
||
|
||
{/* Hire Developers */}
|
||
<section className="bg-background">
|
||
<HireCrossPlatformDevelopers />
|
||
</section>
|
||
|
||
{/* FAQs */}
|
||
{/* <section className="bg-card">
|
||
<CrossPlatformFAQs />
|
||
</section> */}
|
||
|
||
{/* Final CTA */}
|
||
<section className="bg-black">
|
||
<CrossPlatformFinalCTA />
|
||
</section>
|
||
|
||
{/* Footer */}
|
||
<section className="bg-background">
|
||
{/* <Footer /> */}
|
||
</section>
|
||
</div>
|
||
);
|
||
};
|