1486 lines
56 KiB
TypeScript
1486 lines
56 KiB
TypeScript
import { useNavigate } from "react-router-dom";
|
|
import { motion } from "framer-motion";
|
|
import {
|
|
Apple,
|
|
ArrowRight,
|
|
Brush,
|
|
Bug,
|
|
Building,
|
|
Code,
|
|
Cpu,
|
|
Fingerprint,
|
|
Gamepad,
|
|
Gauge,
|
|
Layers,
|
|
Maximize,
|
|
MessageSquare,
|
|
Palette,
|
|
RefreshCcw,
|
|
Rocket,
|
|
Shield,
|
|
Smartphone,
|
|
Target,
|
|
TrendingUp,
|
|
UserPlus,
|
|
Zap
|
|
} from "lucide-react";
|
|
import { Helmet } from "react-helmet-async";
|
|
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 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";
|
|
|
|
// Native App Development Hero Section
|
|
const NativeHeroWithCTA = () => {
|
|
const navigate = useNavigate();
|
|
return (
|
|
<section className="relative py-20 overflow-hidden bg-black">
|
|
<Helmet>
|
|
{/* Page Title and Meta Description */}
|
|
<title>Native App Development Services | WDI Expert Solutions</title>
|
|
<meta
|
|
name="description"
|
|
content="WDI specializes in native app development, delivering high-performance, secure, and user-friendly apps for iOS and Android platforms. Boost your mobile strategy today."
|
|
/>
|
|
|
|
{/* Canonical Link */}
|
|
<link rel="canonical" href="https://www.wdipl.com/services/native-app-development" />
|
|
|
|
{/* Open Graph Tags (for Facebook, LinkedIn) */}
|
|
<meta property="og:title" content="Native App Development Services | WDI Expert Solutions" />
|
|
<meta
|
|
property="og:description"
|
|
content="WDI specializes in native app development, delivering high-performance, secure, and user-friendly apps for iOS and Android platforms. Boost your mobile strategy 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="Native App Development Services | WDI Expert Solutions" />
|
|
<meta
|
|
name="twitter:description"
|
|
content="WDI specializes in native app development, delivering high-performance, secure, and user-friendly apps for iOS and Android platforms. Boost your mobile strategy 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 mx-auto px-6 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"
|
|
>
|
|
{/* Native Development Label */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.6 }}
|
|
>
|
|
<span className="text-white/70 text-sm font-medium">
|
|
Native App Development
|
|
</span>
|
|
</motion.div>
|
|
|
|
{/* Main Heading */}
|
|
<div className="space-y-6">
|
|
<h1 className="text-4xl md:text-5xl lg:text-6xl font-semibold text-white leading-tight">
|
|
Native App Development: Uncompromising Performance & Experience
|
|
</h1>
|
|
|
|
<p className="text-lg text-gray-300 leading-relaxed max-w-lg">
|
|
Building bespoke applications tailored for a single operating
|
|
system to deliver the highest level of performance, security,
|
|
and device integration.
|
|
</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 sm:flex-row gap-4"
|
|
>
|
|
<ShimmerButton
|
|
className="text-lg px-8 py-4"
|
|
onClick={() => navigate("/start-a-project")}
|
|
>
|
|
<div className="inline-flex items-center gap-2">
|
|
<Gauge className="w-5 h-5 flex-shrink-0" />
|
|
<span>Discover Native Advantages</span>
|
|
</div>
|
|
</ShimmerButton>
|
|
<a
|
|
href="#consultation"
|
|
className="inline-flex items-center justify-center gap-2 rounded-md bg-gray-800 px-8 py-4 text-lg font-medium text-white transition 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="w-4 h-4 flex-shrink-0" />
|
|
<span>Request Consultation</span>
|
|
</a>
|
|
</motion.div>
|
|
</motion.div>
|
|
|
|
{/* Right side with split-screen native app 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"
|
|
>
|
|
{/* Split-screen Native App 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"
|
|
>
|
|
{/* Split-screen container */}
|
|
<div className="relative w-full h-full flex">
|
|
{/* iOS Native App (left half) */}
|
|
<div className="w-1/2 h-full bg-gradient-to-br from-blue-900/20 to-blue-800/20 rounded-l-3xl border-l border-t border-b border-blue-500/30 flex flex-col items-center justify-center p-6">
|
|
<div className="w-32 h-48 bg-gradient-to-br from-gray-800 to-gray-900 rounded-2xl border border-gray-700 shadow-xl mb-4">
|
|
<div className="w-full h-6 bg-gray-700 rounded-t-2xl flex items-center justify-center">
|
|
<div className="w-8 h-0.5 bg-gray-600 rounded-full"></div>
|
|
</div>
|
|
<div className="p-3 space-y-2">
|
|
<div className="h-2 bg-blue-500 rounded"></div>
|
|
<div className="h-1.5 bg-gray-600 rounded w-3/4"></div>
|
|
<div className="h-1.5 bg-gray-600 rounded w-1/2"></div>
|
|
<div className="grid grid-cols-2 gap-1 mt-3">
|
|
<div className="h-6 bg-gray-700 rounded-lg"></div>
|
|
<div className="h-6 bg-gray-700 rounded-lg"></div>
|
|
</div>
|
|
<div className="h-8 bg-blue-500/20 rounded-lg mt-2 flex items-center justify-center">
|
|
<Apple className="w-4 h-4 text-blue-500" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="text-center">
|
|
<Badge
|
|
variant="secondary"
|
|
className="bg-blue-500/20 text-blue-300 border-blue-500/30 text-xs"
|
|
>
|
|
iOS Native
|
|
</Badge>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Android Native App (right half) */}
|
|
<div className="w-1/2 h-full bg-gradient-to-br from-green-900/20 to-green-800/20 rounded-r-3xl border-r border-t border-b border-green-500/30 flex flex-col items-center justify-center p-6">
|
|
<div className="w-32 h-48 bg-gradient-to-br from-gray-800 to-gray-900 rounded-2xl border border-gray-700 shadow-xl mb-4">
|
|
<div className="w-full h-6 bg-gray-700 rounded-t-2xl flex items-center justify-center">
|
|
<div className="w-8 h-0.5 bg-gray-600 rounded-full"></div>
|
|
</div>
|
|
<div className="p-3 space-y-2">
|
|
<div className="h-2 bg-green-500 rounded"></div>
|
|
<div className="h-1.5 bg-gray-600 rounded w-3/4"></div>
|
|
<div className="h-1.5 bg-gray-600 rounded w-1/2"></div>
|
|
<div className="grid grid-cols-2 gap-1 mt-3">
|
|
<div className="h-6 bg-gray-700 rounded-lg"></div>
|
|
<div className="h-6 bg-gray-700 rounded-lg"></div>
|
|
</div>
|
|
<div className="h-8 bg-green-500/20 rounded-lg mt-2 flex items-center justify-center">
|
|
<svg
|
|
className="w-4 h-4 text-green-500"
|
|
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>
|
|
</div>
|
|
<div className="text-center">
|
|
<Badge
|
|
variant="secondary"
|
|
className="bg-green-500/20 text-green-300 border-green-500/30 text-xs"
|
|
>
|
|
Android Native
|
|
</Badge>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Central divider line */}
|
|
<div className="absolute top-0 left-1/2 transform -translate-x-1/2 h-full w-0.5 bg-accent"></div>
|
|
</div>
|
|
</motion.div>
|
|
|
|
{/* Native Technology Badges */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.6 }}
|
|
className="flex justify-center gap-4 flex-wrap"
|
|
>
|
|
<Badge
|
|
variant="secondary"
|
|
className="bg-accent/20 text-accent border-accent/30"
|
|
>
|
|
Platform Optimized
|
|
</Badge>
|
|
<Badge
|
|
variant="secondary"
|
|
className="bg-blue-500/20 text-blue-300 border-blue-500/30"
|
|
>
|
|
Maximum Performance
|
|
</Badge>
|
|
<Badge
|
|
variant="secondary"
|
|
className="bg-purple-500/20 text-purple-300 border-purple-500/30"
|
|
>
|
|
Native Features
|
|
</Badge>
|
|
</motion.div>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
// Native vs Cross-Platform Comparison
|
|
const NativeVsCrossPlatform = () => {
|
|
const comparisons = [
|
|
{
|
|
icon: Gauge,
|
|
title: "Unrivaled Performance",
|
|
description:
|
|
"Direct access to hardware, faster execution, and smoother animations through platform-specific optimization.",
|
|
},
|
|
{
|
|
icon: Maximize,
|
|
title: "Optimal User Experience",
|
|
description:
|
|
"Full adherence to platform-specific UI/UX guidelines ensuring familiar, intuitive user interactions.",
|
|
},
|
|
{
|
|
icon: Fingerprint,
|
|
title: "Maximum Security",
|
|
description:
|
|
"Leveraging built-in OS security features, platform-specific encryption, and reduced attack surface.",
|
|
},
|
|
{
|
|
icon: Cpu,
|
|
title: "Full Device Feature Access",
|
|
description:
|
|
"Seamless integration with cameras, GPS, sensors, AR/VR, and cutting-edge platform features.",
|
|
},
|
|
{
|
|
icon: TrendingUp,
|
|
title: "Scalability & Future-Proofing",
|
|
description:
|
|
"Best choice for complex, resource-intensive apps requiring long-term support and evolution.",
|
|
},
|
|
];
|
|
|
|
return (
|
|
<section className="py-32">
|
|
<div className="container mx-auto px-6 lg:px-8">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8 }}
|
|
viewport={{ once: true }}
|
|
className="text-center mb-16"
|
|
>
|
|
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
|
|
Native vs. Cross-Platform: When to Choose Native
|
|
</h2>
|
|
<p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
|
|
Native development delivers uncompromising performance and platform
|
|
integration for applications that demand the highest standards.
|
|
</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 md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto"
|
|
>
|
|
{comparisons.slice(0, 3).map((item, index) => {
|
|
const IconComponent = item.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="bg-card/20 backdrop-blur-md border-white/10 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl h-full">
|
|
<CardContent className="p-8 text-center">
|
|
<div className="w-16 h-16 bg-accent/20 rounded-2xl flex items-center justify-center mx-auto mb-6">
|
|
<IconComponent className="w-8 h-8 text-accent" />
|
|
</div>
|
|
<h3 className="text-xl font-semibold text-foreground mb-4">
|
|
{item.title}
|
|
</h3>
|
|
<p className="text-muted-foreground leading-relaxed">
|
|
{item.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 md:grid-cols-2 gap-8 max-w-4xl mx-auto mt-8"
|
|
>
|
|
{comparisons.slice(3).map((item, index) => {
|
|
const IconComponent = item.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="bg-card/20 backdrop-blur-md border-white/10 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl h-full">
|
|
<CardContent className="p-8 text-center">
|
|
<div className="w-16 h-16 bg-accent/20 rounded-2xl flex items-center justify-center mx-auto mb-6">
|
|
<IconComponent className="w-8 h-8 text-accent" />
|
|
</div>
|
|
<h3 className="text-xl font-semibold text-foreground mb-4">
|
|
{item.title}
|
|
</h3>
|
|
<p className="text-muted-foreground leading-relaxed">
|
|
{item.description}
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
</motion.div>
|
|
);
|
|
})}
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
// Native App Development Capabilities
|
|
const NativeCapabilities = () => {
|
|
const capabilities = [
|
|
{
|
|
title: "iOS Native Development",
|
|
description:
|
|
"Swift and Objective-C development for the complete Apple ecosystem with seamless integration.",
|
|
icon: Apple,
|
|
technologies: [
|
|
"Swift",
|
|
"SwiftUI",
|
|
"UIKit",
|
|
"Core Data",
|
|
"CloudKit",
|
|
"ARKit",
|
|
],
|
|
},
|
|
{
|
|
title: "Android Native Development",
|
|
description:
|
|
"Kotlin and Java development for the Android ecosystem with Google services integration.",
|
|
icon: Smartphone,
|
|
technologies: [
|
|
"Kotlin",
|
|
"Java",
|
|
"Jetpack Compose",
|
|
"Room",
|
|
"Firebase",
|
|
"ARCore",
|
|
],
|
|
},
|
|
{
|
|
title: "Performance Optimization",
|
|
description:
|
|
"Ensuring lightning-fast, smooth applications through platform-specific performance tuning.",
|
|
icon: Zap,
|
|
technologies: [
|
|
"Memory Management",
|
|
"Threading",
|
|
"Caching",
|
|
"Database Optimization",
|
|
"Network Optimization",
|
|
"Battery Efficiency",
|
|
],
|
|
},
|
|
{
|
|
title: "Advanced Feature Integration",
|
|
description:
|
|
"Leveraging device-specific capabilities including AR/VR, machine learning, and sensors.",
|
|
icon: Cpu,
|
|
technologies: [
|
|
"AR/VR",
|
|
"Machine Learning",
|
|
"Biometrics",
|
|
"Camera APIs",
|
|
"Location Services",
|
|
"Push Notifications",
|
|
],
|
|
},
|
|
{
|
|
title: "Code Modernization",
|
|
description:
|
|
"Updating and optimizing existing native codebases for modern performance and features.",
|
|
icon: RefreshCcw,
|
|
technologies: [
|
|
"Code Refactoring",
|
|
"Architecture Updates",
|
|
"Legacy Migration",
|
|
"Performance Audits",
|
|
"Security Updates",
|
|
"API Modernization",
|
|
],
|
|
},
|
|
{
|
|
title: "Enterprise Integration",
|
|
description:
|
|
"Seamless integration with enterprise systems, APIs, and security protocols.",
|
|
icon: Building,
|
|
technologies: [
|
|
"Enterprise APIs",
|
|
"SSO Integration",
|
|
"MDM Support",
|
|
"Data Encryption",
|
|
"Compliance",
|
|
"Custom Protocols",
|
|
],
|
|
},
|
|
];
|
|
|
|
return (
|
|
<section className="py-32 bg-black">
|
|
<div className="container mx-auto px-6 lg:px-8">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8 }}
|
|
viewport={{ once: true }}
|
|
className="text-center mb-20"
|
|
>
|
|
<h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
|
|
Expertise Across Leading Native Platforms
|
|
</h2>
|
|
<p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
|
|
Comprehensive native development capabilities covering both iOS and
|
|
Android ecosystems with deep platform expertise.
|
|
</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 md:grid-cols-2 lg:grid-cols-3 gap-8"
|
|
>
|
|
{capabilities.map((capability, index) => {
|
|
const IconComponent = capability.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="bg-gray-900/50 backdrop-blur-md border-gray-800 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl h-full">
|
|
<CardContent className="p-8">
|
|
<div className="w-12 h-12 bg-accent/20 rounded-lg flex items-center justify-center mb-6">
|
|
<IconComponent className="w-6 h-6 text-accent" />
|
|
</div>
|
|
<h3 className="text-xl font-semibold text-white mb-4">
|
|
{capability.title}
|
|
</h3>
|
|
<p className="text-gray-300 leading-relaxed mb-6">
|
|
{capability.description}
|
|
</p>
|
|
<div className="flex flex-wrap gap-2">
|
|
{capability.technologies.map((tech) => (
|
|
<Badge
|
|
key={tech}
|
|
variant="secondary"
|
|
className="text-xs bg-gray-800/50 text-gray-300 border-gray-700"
|
|
>
|
|
{tech}
|
|
</Badge>
|
|
))}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</motion.div>
|
|
);
|
|
})}
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
// Ideal Use Cases for Native Development
|
|
const NativeUseCases = () => {
|
|
const useCases = [
|
|
{
|
|
title: "High-Performance Apps",
|
|
description:
|
|
"Gaming, AR/VR applications, and complex data processing requiring maximum computational efficiency.",
|
|
icon: Gamepad,
|
|
examples: [
|
|
"3D Gaming",
|
|
"AR/VR Experiences",
|
|
"Real-time Analytics",
|
|
"Video Processing",
|
|
],
|
|
},
|
|
{
|
|
title: "Feature-Rich Applications",
|
|
description:
|
|
"Apps requiring extensive device hardware integration and platform-specific functionality.",
|
|
icon: Layers,
|
|
examples: [
|
|
"Camera Integration",
|
|
"Sensor Data",
|
|
"Biometric Auth",
|
|
"Device APIs",
|
|
],
|
|
},
|
|
{
|
|
title: "Custom UI/UX Experiences",
|
|
description:
|
|
"Highly customized interfaces and interactions not easily replicated in cross-platform solutions.",
|
|
icon: Brush,
|
|
examples: [
|
|
"Custom Animations",
|
|
"Unique Gestures",
|
|
"Platform-specific Design",
|
|
"Advanced Interactions",
|
|
],
|
|
},
|
|
{
|
|
title: "Security-Critical Applications",
|
|
description:
|
|
"Banking, healthcare, and enterprise solutions requiring maximum security and compliance.",
|
|
icon: Shield,
|
|
examples: [
|
|
"Financial Services",
|
|
"Healthcare Apps",
|
|
"Enterprise Security",
|
|
"Government Apps",
|
|
],
|
|
},
|
|
{
|
|
title: "Long-Term Scalable Products",
|
|
description:
|
|
"Core products that will evolve significantly and require extensive platform integration over time.",
|
|
icon: TrendingUp,
|
|
examples: [
|
|
"Enterprise Platforms",
|
|
"SaaS Products",
|
|
"Social Networks",
|
|
"E-commerce Platforms",
|
|
],
|
|
},
|
|
{
|
|
title: "Platform-Specific Features",
|
|
description:
|
|
"Applications leveraging cutting-edge platform features available only through native development.",
|
|
icon: Cpu,
|
|
examples: [
|
|
"ML Kit Integration",
|
|
"ARKit/ARCore",
|
|
"HealthKit/Google Fit",
|
|
"Platform Widgets",
|
|
],
|
|
},
|
|
];
|
|
|
|
return (
|
|
<section className="py-32">
|
|
<div className="container mx-auto px-6 lg:px-8">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8 }}
|
|
viewport={{ once: true }}
|
|
className="text-center mb-20"
|
|
>
|
|
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
|
|
When Native Development is Your Best Choice
|
|
</h2>
|
|
<p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
|
|
Certain application requirements and business goals make native
|
|
development the optimal choice for long-term success.
|
|
</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 md:grid-cols-2 lg:grid-cols-3 gap-8"
|
|
>
|
|
{useCases.map((useCase, index) => {
|
|
const IconComponent = useCase.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="bg-card/20 backdrop-blur-md border-white/10 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl h-full">
|
|
<CardContent className="p-8">
|
|
<div className="w-12 h-12 bg-accent/20 rounded-lg flex items-center justify-center mb-6">
|
|
<IconComponent className="w-6 h-6 text-accent" />
|
|
</div>
|
|
<h3 className="text-xl font-semibold text-foreground mb-4">
|
|
{useCase.title}
|
|
</h3>
|
|
<p className="text-muted-foreground leading-relaxed mb-6">
|
|
{useCase.description}
|
|
</p>
|
|
<div className="space-y-2">
|
|
<h4 className="text-sm font-medium text-foreground">
|
|
Key Examples:
|
|
</h4>
|
|
<div className="flex flex-wrap gap-2">
|
|
{useCase.examples.map((example) => (
|
|
<Badge
|
|
key={example}
|
|
variant="secondary"
|
|
className="text-xs bg-accent/10 text-accent border-accent/20"
|
|
>
|
|
{example}
|
|
</Badge>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</motion.div>
|
|
);
|
|
})}
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
// Native Development Process
|
|
const NativeProcess = () => {
|
|
const steps = [
|
|
{
|
|
title: "Deep Discovery & Platform Strategy",
|
|
description:
|
|
"Comprehensive analysis of your requirements to determine the optimal native platform approach and architecture decisions.",
|
|
icon: Target,
|
|
},
|
|
{
|
|
title: "Tailored UI/UX Design",
|
|
description:
|
|
"Platform-specific design that leverages native UI components and follows platform design guidelines for optimal user experience.",
|
|
icon: Palette,
|
|
},
|
|
{
|
|
title: "Platform-Specific Coding",
|
|
description:
|
|
"Expert native development using platform-specific languages, frameworks, and best practices for maximum performance.",
|
|
icon: Code,
|
|
},
|
|
{
|
|
title: "Intensive Native Testing",
|
|
description:
|
|
"Comprehensive testing across devices, OS versions, and platform-specific features to ensure flawless native functionality.",
|
|
icon: Bug,
|
|
},
|
|
{
|
|
title: "Launch & Post-Launch Native Support",
|
|
description:
|
|
"App store optimization, deployment, and ongoing native platform updates and feature enhancements.",
|
|
icon: Rocket,
|
|
},
|
|
];
|
|
|
|
return (
|
|
<section className="py-32 bg-black">
|
|
<div className="container mx-auto px-6 lg:px-8">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8 }}
|
|
viewport={{ once: true }}
|
|
className="text-center mb-20"
|
|
>
|
|
<h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
|
|
Precision & Excellence in Every Native Project
|
|
</h2>
|
|
<p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
|
|
Our proven native development methodology ensures optimal
|
|
performance and platform integration at every stage.
|
|
</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="bg-gray-900/50 backdrop-blur-md rounded-2xl border border-gray-800 p-8 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl">
|
|
<div className="flex items-center gap-4 mb-4 justify-center lg:justify-start">
|
|
<div className="w-12 h-12 bg-accent/20 rounded-xl flex items-center justify-center">
|
|
<IconComponent className="w-6 h-6 text-accent" />
|
|
</div>
|
|
<div className="text-2xl font-bold text-accent">
|
|
0{index + 1}
|
|
</div>
|
|
</div>
|
|
<h3 className="text-2xl font-semibold text-white mb-4">
|
|
{step.title}
|
|
</h3>
|
|
<p className="text-gray-300 leading-relaxed">
|
|
{step.description}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Timeline dot */}
|
|
<div className="w-4 h-4 bg-accent rounded-full border-4 border-black z-10 hidden lg:block"></div>
|
|
|
|
<div className="flex-1 hidden lg:block"></div>
|
|
</motion.div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
// Native Case Studies
|
|
const NativeCaseStudies = () => {
|
|
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 mx-auto px-6 lg:px-8">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8 }}
|
|
viewport={{ once: true }}
|
|
className="text-center mb-20"
|
|
>
|
|
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-8">
|
|
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.
|
|
</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 md:grid-cols-2 lg:grid-cols-3 gap-8"
|
|
>
|
|
{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="group cursor-pointer"
|
|
>
|
|
<Card className="bg-card/20 backdrop-blur-md border-white/10 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl overflow-hidden h-full">
|
|
<CardContent className="p-0 flex flex-col h-full">
|
|
<div className="p-8 pb-6">
|
|
<div className="flex items-start gap-4 mb-6">
|
|
<div className="w-12 h-12 bg-accent/20 rounded-xl flex items-center justify-center">
|
|
<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="text-xs text-muted-foreground mb-2 uppercase tracking-wider">
|
|
{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="px-8 pb-6 flex-1">
|
|
<div
|
|
className={`relative rounded-xl overflow-hidden bg-gradient-to-br ${study.gradient} p-4 border border-white/10`}
|
|
>
|
|
<ImageWithFallback
|
|
src={study.image}
|
|
alt={study.title}
|
|
className="w-full h-48 object-cover rounded-lg shadow-lg"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="px-8 pb-6">
|
|
<p className="text-muted-foreground text-sm leading-relaxed">
|
|
{study.description}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="p-8 pt-0 mt-auto">
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="w-full justify-between text-accent hover:text-accent hover:bg-accent/10 group-hover:translate-x-1 transition-all duration-300"
|
|
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 NativeInlineCTA = () => {
|
|
const navigate = useNavigate();
|
|
return (
|
|
<section className="py-20 bg-black">
|
|
<div className="container mx-auto px-6 lg:px-8">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 50 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8 }}
|
|
viewport={{ once: true }}
|
|
className="text-center max-w-4xl mx-auto"
|
|
>
|
|
<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="bg-black rounded-full px-6 py-3 flex items-center gap-2">
|
|
<Gauge className="w-5 h-5 text-white" />
|
|
<span className="text-white text-base font-medium">
|
|
Peak Performance
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 className="text-4xl lg:text-5xl font-semibold text-white leading-tight">
|
|
Ready to Achieve{" "}
|
|
<span className="text-accent">Peak App Performance?</span>
|
|
</h2>
|
|
|
|
<p className="text-xl text-gray-300 leading-relaxed max-w-2xl mx-auto">
|
|
Let our native experts guide your next high-impact application to
|
|
deliver uncompromising performance and user experience.
|
|
</p>
|
|
|
|
<ShimmerButton
|
|
className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl"
|
|
onClick={() => navigate("/start-a-project")}
|
|
>
|
|
<div className="inline-flex items-center gap-3">
|
|
<MessageSquare className="w-6 h-6 flex-shrink-0" />
|
|
<span>Discuss Your Native App Project</span>
|
|
</div>
|
|
</ShimmerButton>
|
|
</motion.div>
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
// NativeAppTechStack
|
|
|
|
const NativeAppTechStack = () => {
|
|
const technologies = [
|
|
{
|
|
name: "Swift",
|
|
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/swift/swift-original.svg",
|
|
},
|
|
{
|
|
name: "Objective-C",
|
|
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/objectivec/objectivec-plain.svg",
|
|
},
|
|
{
|
|
name: "Xcode",
|
|
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/xcode/xcode-original.svg",
|
|
},
|
|
{
|
|
name: "UIKit",
|
|
logo: "https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/Apple_logo_black.svg/512px-Apple_logo_black.svg.png",
|
|
},
|
|
{
|
|
name: "Android (Java/Kotlin)",
|
|
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/android/android-original.svg",
|
|
},
|
|
{
|
|
name: "Android Studio",
|
|
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/androidstudio/androidstudio-plain.svg",
|
|
},
|
|
{
|
|
name: "Firebase",
|
|
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/firebase/firebase-plain.svg",
|
|
},
|
|
{
|
|
name: "AWS",
|
|
logo: awsLogoImage,
|
|
},
|
|
];
|
|
|
|
return (
|
|
<section className="py-32 bg-black">
|
|
<div className="container mx-auto px-6 lg:px-8">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8 }}
|
|
viewport={{ once: true }}
|
|
className="text-center mb-20"
|
|
>
|
|
<h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
|
|
Powering Native App Development
|
|
</h2>
|
|
<p className="text-xl text-gray-300 leading-relaxed">
|
|
We leverage native frameworks and tools to deliver high-performance apps for iOS and Android.
|
|
</p>
|
|
</motion.div>
|
|
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-8 max-w-4xl mx-auto">
|
|
{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="w-20 h-20 bg-gray-900/50 rounded-2xl flex items-center justify-center border border-gray-800 group-hover:border-accent/30 transition-all duration-300 shadow-lg group-hover:shadow-xl mb-4">
|
|
<ImageWithFallback
|
|
src={tech.logo}
|
|
alt={tech.name}
|
|
className="w-12 h-12 object-contain"
|
|
/>
|
|
</div>
|
|
<span className="text-gray-300 text-sm group-hover:text-white transition-colors duration-300">
|
|
{tech.name}
|
|
</span>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
// Hire Native Developers
|
|
const HireNativeDevelopers = () => {
|
|
const navigate = useNavigate();
|
|
const developerTypes = [
|
|
{
|
|
title: "Senior iOS Native Developer",
|
|
experience: "6+ Years",
|
|
skills: ["Swift", "SwiftUI", "UIKit", "Core Data", "ARKit", "CloudKit"],
|
|
specialties:
|
|
"iOS Architecture, Performance Optimization, Apple Ecosystem",
|
|
},
|
|
{
|
|
title: "Senior Android Native Developer",
|
|
experience: "6+ Years",
|
|
skills: [
|
|
"Kotlin",
|
|
"Java",
|
|
"Jetpack Compose",
|
|
"Room",
|
|
"ARCore",
|
|
"Firebase",
|
|
],
|
|
specialties:
|
|
"Android Architecture, Google Services, Hardware Integration",
|
|
},
|
|
{
|
|
title: "Native App Architect",
|
|
experience: "8+ Years",
|
|
skills: [
|
|
"System Design",
|
|
"Both Platforms",
|
|
"Performance",
|
|
"Security",
|
|
"DevOps",
|
|
"Leadership",
|
|
],
|
|
specialties:
|
|
"Technical Leadership, Architecture Design, Performance Engineering",
|
|
},
|
|
];
|
|
|
|
return (
|
|
<section className="py-32">
|
|
<div className="container mx-auto px-6 lg:px-8">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8 }}
|
|
viewport={{ once: true }}
|
|
className="text-center mb-20"
|
|
>
|
|
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-8">
|
|
Find Your Elite Native App Development Team
|
|
</h2>
|
|
<p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
|
|
Access our pool of highly specialized iOS and Android native
|
|
developers for your most demanding projects.
|
|
</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 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-12"
|
|
>
|
|
{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="group cursor-pointer"
|
|
>
|
|
<Card className="bg-card/20 backdrop-blur-md border-white/10 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl h-full">
|
|
<CardContent className="p-8">
|
|
<div className="flex items-center gap-4 mb-6">
|
|
<div className="w-12 h-12 bg-accent/20 rounded-xl flex items-center justify-center">
|
|
<Gauge 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="text-xl font-semibold text-foreground mb-4">
|
|
{dev.title}
|
|
</h3>
|
|
|
|
<p className="text-muted-foreground text-sm mb-4">
|
|
{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 sm:flex-row gap-4 justify-center"
|
|
>
|
|
<ShimmerButton className="px-8 py-4"
|
|
onClick={() => navigate("/hire-talent/native-app-developers")}
|
|
>
|
|
<div className="inline-flex items-center gap-2">
|
|
<UserPlus className="w-5 h-5 flex-shrink-0" />
|
|
<span>Hire Native Developers</span>
|
|
</div>
|
|
</ShimmerButton>
|
|
<Button
|
|
variant="outline"
|
|
className="border-white text-white hover:bg-white/10 hover:text-white px-8 py-4 rounded-lg transition-all duration-300 h-auto"
|
|
style={{ color: "white" }}
|
|
>
|
|
<span>Get a Consultation</span>
|
|
<ArrowRight className="ml-2 w-4 h-4" />
|
|
</Button>
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
// Native FAQs
|
|
const NativeFAQs = () => {
|
|
const faqs = [
|
|
{
|
|
question: "Is native development always more expensive?",
|
|
answer:
|
|
"While native development typically requires a higher initial investment, it often provides better long-term value through superior performance, security, and maintainability. For complex applications or those requiring intensive platform integration, native development can actually be more cost-effective over the app's lifetime due to reduced technical debt and easier maintenance.",
|
|
},
|
|
{
|
|
question: "How long does native app development take?",
|
|
answer:
|
|
"Native development timelines vary based on complexity, but typically: Simple apps (10-16 weeks), Medium complexity (16-24 weeks), Complex apps (24+ weeks). While this may seem longer than cross-platform alternatives, the time investment results in superior performance, better user experience, and reduced post-launch issues.",
|
|
},
|
|
{
|
|
question: "What are the maintenance considerations for native apps?",
|
|
answer:
|
|
"Native apps require platform-specific maintenance, including OS updates, security patches, and feature enhancements. However, this maintenance is often more predictable and efficient than cross-platform alternatives because you're working directly with platform APIs and tools. We provide comprehensive maintenance packages tailored to each platform.",
|
|
},
|
|
{
|
|
question:
|
|
"Can you port an existing native app to another native platform?",
|
|
answer:
|
|
"Yes, we can port native apps between platforms while maintaining native performance and user experience. Our approach involves analyzing the existing architecture, identifying platform-specific optimizations, and rebuilding the app using the target platform's native technologies. This ensures optimal performance on both platforms while maintaining feature parity.",
|
|
},
|
|
];
|
|
|
|
return (
|
|
<section className="py-32 bg-black">
|
|
<div className="container mx-auto px-6 lg:px-8">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8 }}
|
|
viewport={{ once: true }}
|
|
className="text-center mb-20"
|
|
>
|
|
<h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
|
|
Frequently Asked Questions
|
|
</h2>
|
|
<p className="text-xl text-gray-300 leading-relaxed">
|
|
Common questions about native 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="bg-gray-900/50 backdrop-blur-md rounded-2xl border border-gray-800 px-10 shadow-lg"
|
|
>
|
|
<AccordionTrigger className="text-left hover:no-underline py-10 text-xl">
|
|
<span className="font-semibold text-white">
|
|
{faq.question}
|
|
</span>
|
|
</AccordionTrigger>
|
|
<AccordionContent className="text-gray-300 pb-10 text-lg leading-relaxed">
|
|
{faq.answer}
|
|
</AccordionContent>
|
|
</AccordionItem>
|
|
))}
|
|
</Accordion>
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
// Final CTA Section
|
|
const NativeFinalCTA = () => {
|
|
const navigate = useNavigate();
|
|
return (
|
|
<section className="py-20 relative overflow-hidden">
|
|
<div className="container mx-auto px-6 lg:px-8 relative z-10">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 50 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8 }}
|
|
viewport={{ once: true }}
|
|
className="text-center max-w-4xl mx-auto"
|
|
>
|
|
<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="bg-background rounded-full px-6 py-3 flex items-center gap-2">
|
|
<Gauge className="w-5 h-5 text-foreground" />
|
|
<span className="text-foreground text-base font-medium">
|
|
Maximum Potential
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
|
|
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6 leading-tight">
|
|
Unlock Full Potential with{" "}
|
|
<span className="text-accent">WDI's Native Expertise</span>
|
|
</h2>
|
|
|
|
<motion.p
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.3 }}
|
|
viewport={{ once: true }}
|
|
className="text-xl text-muted-foreground mb-12 max-w-2xl mx-auto leading-relaxed"
|
|
>
|
|
Invest in an application that delivers unparalleled performance,
|
|
security, and a truly immersive user experience.
|
|
</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 rounded-2xl shadow-2xl hover:shadow-accent/25"
|
|
onClick={() => navigate("/start-a-project")}
|
|
>
|
|
<div className="inline-flex items-center gap-3">
|
|
<Rocket className="w-6 h-6 flex-shrink-0" />
|
|
<span>Start Your Native App Journey</span>
|
|
</div>
|
|
</ShimmerButton>
|
|
|
|
<p className="text-muted-foreground text-sm">
|
|
Expert consultation • Architecture planning • Performance
|
|
optimization
|
|
</p>
|
|
</motion.div>
|
|
</motion.div>
|
|
</div>
|
|
|
|
{/* Background Decorative Elements */}
|
|
<div className="absolute top-0 left-0 w-full h-full pointer-events-none overflow-hidden">
|
|
<div className="absolute top-20 left-20 w-60 h-60 bg-accent/5 rounded-full blur-3xl"></div>
|
|
<div className="absolute bottom-20 right-20 w-60 h-60 bg-blue-500/5 rounded-full blur-3xl"></div>
|
|
<div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-80 h-80 bg-purple-500/3 rounded-full blur-3xl"></div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
// Main Native App Development Page
|
|
export const NativeAppDevelopment = () => {
|
|
return (
|
|
<div className="dark min-h-screen">
|
|
{/* <Navigation /> */}
|
|
|
|
{/* Hero Section */}
|
|
<section className="bg-black">
|
|
<NativeHeroWithCTA />
|
|
</section>
|
|
|
|
{/* Native vs Cross-Platform */}
|
|
<section className="bg-background">
|
|
<NativeVsCrossPlatform />
|
|
</section>
|
|
|
|
{/* Case Studies */}
|
|
<section className="bg-background">
|
|
<NativeCaseStudies />
|
|
</section>
|
|
|
|
{/* Capabilities */}
|
|
{/* <section className="bg-black">
|
|
<NativeCapabilities />
|
|
</section> */}
|
|
|
|
|
|
{/* Development Process */}
|
|
<section className="bg-card">
|
|
<NativeProcess />
|
|
</section>
|
|
|
|
{/* Use Cases */}
|
|
<section className="bg-background">
|
|
<NativeUseCases />
|
|
</section>
|
|
|
|
{/* Mid-Page CTA */}
|
|
{/* <section className="bg-card">
|
|
<NativeInlineCTA />
|
|
</section> */}
|
|
|
|
{/* NativeAppTechStack */}
|
|
<section className="bg-card">
|
|
<NativeAppTechStack />
|
|
</section>
|
|
|
|
{/* Hire Developers */}
|
|
<section className="bg-background">
|
|
<HireNativeDevelopers />
|
|
</section>
|
|
|
|
{/* FAQs */}
|
|
{/* <section className="bg-card">
|
|
<NativeFAQs />
|
|
</section> */}
|
|
|
|
{/* Final CTA */}
|
|
<section className="bg-card">
|
|
<NativeFinalCTA />
|
|
</section>
|
|
|
|
{/* Footer */}
|
|
<section className="bg-background">
|
|
{/* <Footer /> */}
|
|
</section>
|
|
</div>
|
|
);
|
|
};
|