WDIPL/Wdipl-react
2
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

fix case study in mobile dev

Browse Source
This commit is contained in:
priyanshuvish
2025-07-28 19:57:37 +05:30
parent a3cacf7a6a
commit e67fd3163c
14 changed files with 464 additions and 237 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
components/GlobalOffices.tsx Normal file
View File

@@ -0,0 +1,89 @@
import React from "react";
import { Phone, Mail } from "lucide-react";
import { motion } from "framer-motion";
const offices = [
{
region: "Asia Pacific",
address: `614, 6th Floor, Palms Spring center,\nLink Road, Malad (West), Mumbai - 400064, India`,
image: "https://wordpress.betadelivery.com/headerr/assets/images/new-img/mapone.webp",
},
{
region: "America",
address: `215 Jefferson Street, Fort Collins,\nCO 80524, USA`,
image: "https://wordpress.betadelivery.com/headerr/assets/images/new-img/maptwo.webp",
},
{
region: "Europe",
address: `2, Frederick Street, Kings Cross,\nLondon, WC1X 0ND, England, UK.\nCRN-14194669, UK`,
image: "https://wordpress.betadelivery.com/headerr/assets/images/new-img/mapthree.webp",
},
{
region: "Middle East",
address: `Perth, WA 6000`,
image: "https://wordpress.betadelivery.com/headerr/assets/images/new-img/mapfour.webp",
},
];
export default function GlobalOffices() {
return (
<section className="bg-wdi-grey text-white py-16 lg:px-8 container mx-auto">
{/* Section Heading */}
<motion.h2
initial={{ opacity: 0, y: 30 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8 }}
viewport={{ once: true }}
className="text-3xl lg:text-4xl font-semibold leading-tight mb-16 text-center"
>
<span className="text-white">We serve customers </span>
<span className="text-[#E5195E]">globally</span>
</motion.h2>
{/* Office Cards */}
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-8 max-w-7xl mx-auto">
{offices.map((office, index) => (
<motion.div
key={index}
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5, delay: index * 0.1 }}
viewport={{ once: true }}
className="group relative p-6 rounded-xl overflow-hidden min-h-[250px] flex flex-col justify-between backdrop-blur-sm border border-gray-700/30 hover:border-[#E5195E]/30 transition-all duration-300"
>
{/* Background Image with Scale on Hover */}
<div
className="absolute inset-0 bg-cover bg-center opacity-20 transform transition-transform duration-500 group-hover:scale-105"
style={{ backgroundImage: `url(${office.image})` }}
></div>
{/* Foreground Content */}
<div className="relative z-10 flex flex-col justify-between h-full">
{/* Top Content */}
<div>
<h3 className="text-2xl font-semibold text-[#E5195E] mb-2">
{office.region}
</h3>
<p className="text-sm whitespace-pre-line leading-relaxed">
{office.address}
</p>
</div>
{/* Bottom Contact Info */}
<div className="mt-4 space-y-2 text-sm">
<div className="flex items-center gap-2">
<Phone size={16} />
<span>(+91) 7700900039</span>
</div>
<div className="flex items-center gap-2">
<Mail size={16} />
<span>ideas@wdipl.com</span>
</div>
</div>
</div>
</motion.div>
))}
</div>
</section>
);
}

126
components/HireDeveloperSection.tsx Normal file
View File

@@ -0,0 +1,126 @@
import { motion } from "framer-motion";
import { Badge } from "@/components/ui/badge";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { UserPlus, ArrowRight } from "lucide-react";
import { navigateTo } from "@/App";
import { ShimmerButton } from "./ui/shimmer-button";
const HireDeveloperSection = ({
title,
description,
developerTypes,
buttonText,
buttonLink,
}) => {
return (
<section className="py-32 bg-black">
<div className="container mx-auto px-6 lg:px-8">
{/* Header */}
<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">
{title}
</h2>
<p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
{description}
</p>
</motion.div>
{/* Developer Cards */}
<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.1 }}
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">
{/* Sample SVG or icon can be customized */}
<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>
<Badge
variant="secondary"
className="text-xs bg-accent/20 text-accent border-accent/30"
>
{dev.experience}
</Badge>
</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>
{/* Call-to-action */}
<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={() => navigateTo(buttonLink)}>
<div className="inline-flex items-center gap-2">
<UserPlus className="w-5 h-5 flex-shrink-0" />
<span>{buttonText}</span>
</div>
</ShimmerButton>
<Button
variant="outline"
className="border-white/20 text-foreground hover:bg-white/10 px-8 py-4 h-auto rounded-lg transition-all duration-300"
>
<span>Request Profiles</span>
<ArrowRight className="ml-2 w-4 h-4" />
</Button>
</motion.div>
</div>
</section>
);
};
export default HireDeveloperSection;

6
components/InlineCTA.tsx
View File

@@ -183,7 +183,7 @@ export const InlineCTA = () => {
transition={{ duration: 0.5, delay: 0.7 }}
viewport={{ once: true }}
>
<div className="text-2xl font-bold text-foreground">15min</div>
<div className="text-2xl font-bold text-foreground">45min</div>
<div className="text-sm text-muted-foreground">Quick Discovery Call</div>
</motion.div>
@@ -193,7 +193,7 @@ export const InlineCTA = () => {
transition={{ duration: 0.5, delay: 0.8 }}
viewport={{ once: true }}
>
<div className="text-2xl font-bold text-foreground">24hrs</div>
<div className="text-2xl font-bold text-foreground">48hrs</div>
<div className="text-sm text-muted-foreground">Detailed Proposal</div>
</motion.div>
@@ -203,7 +203,7 @@ export const InlineCTA = () => {
transition={{ duration: 0.5, delay: 0.9 }}
viewport={{ once: true }}
>
<div className="text-2xl font-bold text-foreground">48hrs</div>
<div className="text-2xl font-bold text-foreground">72hrs</div>
<div className="text-sm text-muted-foreground">Project Kickoff</div>
</motion.div>
</motion.div>

2
components/Navigation.tsx
View File

@@ -470,7 +470,7 @@ const navigationData = {
],
resources: [
{ text: "Blogs", icon: BookOpen, href: "/resources/blog" },
{ text: "Case Studies", icon: FileText, href: "/case-studies" },
{ text: "Portfolio", icon: FileText, href: "/case-studies" },
{
text: "Client Testimonials",
icon: Star,

8
pages/AboutWDI.tsx
View File

@@ -242,10 +242,10 @@ const WhyChooseWDISection = () => {
// Our Impact in Numbers Section
const ImpactNumbersSection = () => {
const stats = [
{ number: "500+", label: "Projects Delivered" },
{ number: "150+", label: "Expert Professionals" },
{ number: "50+", label: "Global Clients" },
{ number: "6+", label: "Years of Excellence" }
{ number: "200+", label: "Projects Delivered" },
{ number: "100+", label: "Expert Professionals" },
{ number: "500+", label: "Global Clients" },
{ number: "24+", label: "Years of Excellence" }
];
return (

40
pages/AndroidAppDevelopment.tsx
View File

@@ -41,6 +41,9 @@ import { ShimmerButton } from "../components/ui/shimmer-button";
import androidVectorImage from "../src/images/android-vector.png";
import { navigateTo } from "@/App";
import { Helmet } from "react-helmet-async";
import ranoutofImage from "../src/images/ranoutof.webp"
import tradersCircuitImage from "../src/images/traders-circuit.webp";
import prospertyImage from "../src/images/prosperty.webp";
// Android Hero Section with Android device mockups and Android vector
const AndroidHeroWithCTA = () => {
@@ -779,34 +782,34 @@ const AndroidTechStack = () => {
const AndroidCaseStudies = () => {
const caseStudies = [
{
title: "E-Commerce Android App with Google Pay",
client: "ShopNow",
title: "Household Management Revolution",
client: "RanOutOf",
description:
"Comprehensive shopping platform with Google services integration",
image:
"https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?w=400&h=300&fit=crop&auto=format",
"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-accent/20 to-accent/10",
gradient: "from-[#007F33]/20 to-[#007F33]/10",
buttonLink: "/projects/ranoutof",
},
{
title: "Fitness Tracking Android App",
client: "FitAndroid Pro",
title: "Financial Trading Platform",
client: "Traders Circuit",
description:
"Advanced fitness tracking with Google Fit integration and wearable support",
image:
"https://images.unsplash.com/photo-1576091160399-112ba8d25d1f?w=400&h=300&fit=crop&auto=format",
"Advanced trading platform with real-time market data, algorithmic trading capabilities, and comprehensive portfolio management tools.",
image: tradersCircuitImage,
results: "800K+ users",
gradient: "from-blue-500/20 to-cyan-500/20",
buttonLink: "/projects/traderscircuit",
},
{
title: "Business Productivity Android Suite",
client: "WorkFlow",
title: "Real Estate Investment Platform",
client: "Prosperty",
description:
"Enterprise-grade productivity app with Google Workspace integration",
image:
"https://images.unsplash.com/photo-1611224923853-80b023f02d71?w=400&h=300&fit=crop&auto=format",
"Digital platform for real estate investment with property analysis, portfolio management, and automated investment recommendations.",
image: prospertyImage,
results: "1.5M+ downloads",
gradient: "from-purple-500/20 to-pink-500/20",
gradient: "from-[#a98453]/20 to-[#a98453]/10",
buttonLink: "/projects/prosperty",
},
];
@@ -872,7 +875,7 @@ const AndroidCaseStudies = () => {
</div>
</div>
<h3 className="text-xl font-semibold text-foreground mb-4 leading-tight">
<h3 className="text-xl font-semibold text-foreground mb-4 leading-tight min-h-[45px]">
{study.title}
</h3>
</div>
@@ -900,6 +903,7 @@ const AndroidCaseStudies = () => {
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={() => navigateTo(study.buttonLink)}
>
<span className="text-sm font-medium">
VIEW CASE STUDY

71
pages/CrossPlatformAppDevelopment.tsx
View File

@@ -43,6 +43,9 @@ import {
} from "../components/ui/tabs";
import { navigateTo } from "@/App";
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";
// Cross-Platform Hero Section
const CrossPlatformHeroWithCTA = () => {
@@ -824,37 +827,34 @@ const CrossPlatformServices = () => {
const CrossPlatformCaseStudies = () => {
const caseStudies = [
{
title: "FinTech Cross-Platform App with Flutter",
client: "PayUnify",
title: "Household Management Revolution",
client: "RanOutOf",
description:
"Unified payment solution deployed simultaneously on iOS and Android with 40% faster development",
image:
"https://images.unsplash.com/photo-1563013544-824ae1b704d3?w=400&h=300&fit=crop&auto=format",
results: "40% faster delivery",
gradient: "from-accent/20 to-accent/10",
framework: "Flutter",
"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-Learning Platform with React Native",
client: "EduCross",
title: "E-commerce Platform Innovation",
client: "Seezun",
description:
"Educational platform serving millions of students across platforms with consistent UX",
image:
"https://images.unsplash.com/photo-1522202176988-66273c2fd55f?w=400&h=300&fit=crop&auto=format",
results: "2M+ students",
"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",
framework: "React Native",
buttonLink: "/projects/seezun",
},
{
title: "Healthcare Management with Flutter",
client: "MediSync",
title: "Social Networking Platform",
client: "Regroup",
description:
"Cross-platform healthcare app connecting patients and providers with real-time sync",
image:
"https://images.unsplash.com/photo-1576091160399-112ba8d25d1f?w=400&h=300&fit=crop&auto=format",
results: "60% cost savings",
gradient: "from-purple-500/20 to-pink-500/20",
framework: "Flutter",
"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",
},
];
@@ -869,11 +869,11 @@ const CrossPlatformCaseStudies = () => {
className="text-center mb-20"
>
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-8">
Cross-Platform Apps That Deliver Unified Experiences
Android Apps That Define Industries
</h2>
<p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
Discover how businesses achieve greater reach and efficiency with
our cross-platform solutions.
Discover how we've helped businesses succeed with powerful Android
applications that leverage the platform's capabilities.
</p>
</motion.div>
@@ -899,30 +899,28 @@ const CrossPlatformCaseStudies = () => {
<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">
<GitMerge className="w-6 h-6 text-accent" />
<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>
<div className="flex gap-2">
<Badge
variant="secondary"
className="text-xs bg-accent/20 text-accent border-accent/30"
>
{study.results}
</Badge>
<Badge
variant="secondary"
className="text-xs bg-blue-500/20 text-blue-300 border-blue-500/30"
>
{study.framework}
</Badge>
</div>
</div>
</div>
<h3 className="text-xl font-semibold text-foreground mb-4 leading-tight">
<h3 className="text-xl font-semibold text-foreground mb-4 leading-tight min-h-[45px]">
{study.title}
</h3>
</div>
@@ -950,6 +948,7 @@ const CrossPlatformCaseStudies = () => {
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={() => navigateTo(study.buttonLink)}
>
<span className="text-sm font-medium">
VIEW CASE STUDY

2
pages/HireFullStackDevelopers.tsx
View File

@@ -24,7 +24,7 @@ export const HireFullStackDevelopers = () => {
const expertise = [
{
category: "Frontend Technologies",
skills: ["HTML5", "CSS3", "JavaScript", "React", "Angular", "Vue.js"],
skills: ["HTML5", "CSS3", "JavaScript", "React", "Angular", "Vue.js", "Next.js"],
},
{
category: "Backend Technologies",

219
pages/NativeAppDevelopment.tsx
View File

@@ -1,112 +1,46 @@
import React, { useState } from "react";
import { navigateTo } from "@/App";
import { motion } from "framer-motion";
import { Navigation } from "../components/Navigation";
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 { AnimatedGradientText } from "../components/AnimatedGradientText";
import { Button } from "../components/ui/button";
import { ShimmerButton } from "../components/ui/shimmer-button";
import { Badge } from "../components/ui/badge";
import { Card, CardContent } from "../components/ui/card";
import { Navigation } from "../components/Navigation";
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from "../components/ui/accordion";
import { ImageWithFallback } from "../components/figma/ImageWithFallback";
import {
CheckCircle,
Smartphone,
Tablet,
Watch,
Code,
Shield,
Zap,
Users,
Star,
ArrowRight,
ChevronRight,
Clock,
TrendingUp,
Database,
Globe,
Layers,
Target,
Layout,
Rocket,
Bug,
Brush,
Lock,
RefreshCcw,
ShieldCheck,
MessageSquare,
Heart,
GraduationCap,
ShoppingCart,
Truck,
Bolt,
Palette,
Tv,
DollarSign,
Stethoscope,
BookOpen,
Play,
Package,
Wifi,
Activity,
Map,
Network,
UserPlus,
Award,
Cpu,
Settings,
Sparkles,
Lightbulb,
Handshake,
Monitor,
Download,
Coffee,
Calendar,
Camera,
Music,
Gamepad2,
CreditCard,
Bell,
Mail,
Search,
Home,
MapPin,
Eye,
Github,
Slack,
Figma,
Chrome,
Zap as ZapIcon,
Video,
MessageCircle,
Brain,
Cog,
Layers3,
Hexagon,
Wallet,
CreditCard as PaymentIcon,
Users2,
Merge,
Share2,
Wrench,
BarChart3,
GitMerge,
Apple,
Gauge,
Maximize,
Fingerprint,
Gamepad,
Building,
Briefcase,
Microscope,
} from "lucide-react";
import { navigateTo } from "@/App";
import { Helmet } from "react-helmet-async";
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";
// Native App Development Hero Section
const NativeHeroWithCTA = () => {
@@ -898,40 +832,34 @@ const NativeProcess = () => {
const NativeCaseStudies = () => {
const caseStudies = [
{
title: "High-Performance FinTech iOS App",
client: "SecureBank Pro",
title: "Household Management Revolution",
client: "RanOutOf",
description:
"Native iOS banking app with advanced security features and real-time trading capabilities",
image:
"https://images.unsplash.com/photo-1563013544-824ae1b704d3?w=400&h=300&fit=crop&auto=format",
results: "300% faster transactions",
gradient: "from-accent/20 to-accent/10",
platform: "iOS Native",
benefits: "Biometric security, real-time data, smooth animations",
"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: "Complex AR Android Solution",
client: "ARchitect Pro",
title: "E-commerce Platform Innovation",
client: "Seezun",
description:
"Advanced AR application for architecture visualization with complex 3D rendering and spatial tracking",
image:
"https://images.unsplash.com/photo-1592478411213-6153e4ebc696?w=400&h=300&fit=crop&auto=format",
results: "Industry-leading AR performance",
gradient: "from-purple-500/20 to-blue-500/20",
platform: "Android Native",
benefits: "ARCore integration, hardware acceleration, precise tracking",
"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: "Healthcare Compliance Platform",
client: "MedSecure",
title: "Social Networking Platform",
client: "Regroup",
description:
"HIPAA-compliant healthcare platform with end-to-end encryption and native device integration",
image:
"https://images.unsplash.com/photo-1576091160399-112ba8d25d1f?w=400&h=300&fit=crop&auto=format",
results: "100% compliance achieved",
gradient: "from-green-500/20 to-teal-500/20",
platform: "Cross-Platform Native",
benefits: "Advanced security, device sensors, offline capability",
"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",
},
];
@@ -946,11 +874,11 @@ const NativeCaseStudies = () => {
className="text-center mb-20"
>
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-8">
Impactful Native Apps We've Built
Android Apps That Define Industries
</h2>
<p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
Discover how native development delivered superior performance,
security, and user experience for our clients.
Discover how we've helped businesses succeed with powerful Android
applications that leverage the platform's capabilities.
</p>
</motion.div>
@@ -976,30 +904,28 @@ const NativeCaseStudies = () => {
<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">
<Gauge className="w-6 h-6 text-accent" />
<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>
<div className="flex gap-2 flex-wrap">
<Badge
variant="secondary"
className="text-xs bg-accent/20 text-accent border-accent/30"
>
{study.results}
</Badge>
<Badge
variant="secondary"
className="text-xs bg-blue-500/20 text-blue-300 border-blue-500/30"
>
{study.platform}
</Badge>
</div>
</div>
</div>
<h3 className="text-xl font-semibold text-foreground mb-4 leading-tight">
<h3 className="text-xl font-semibold text-foreground mb-4 leading-tight min-h-[45px]">
{study.title}
</h3>
</div>
@@ -1017,17 +943,9 @@ const NativeCaseStudies = () => {
</div>
<div className="px-8 pb-6">
<p className="text-muted-foreground text-sm leading-relaxed mb-4">
<p className="text-muted-foreground text-sm leading-relaxed">
{study.description}
</p>
<div className="space-y-2">
<h4 className="text-xs font-medium text-foreground uppercase tracking-wider">
Key Benefits:
</h4>
<p className="text-xs text-muted-foreground">
{study.benefits}
</p>
</div>
</div>
<div className="p-8 pt-0 mt-auto">
@@ -1035,6 +953,7 @@ const NativeCaseStudies = () => {
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={() => navigateTo(study.buttonLink)}
>
<span className="text-sm font-medium">
VIEW CASE STUDY

29
pages/PWADevelopment.tsx
View File

@@ -50,6 +50,7 @@ import tradersCircuitImage from "../src/images/traders-circuit.webp";
import goodTimesImage from "../src/images/goodtimes.webp";
import prospertyImage from "../src/images/prosperty.webp";
import { Helmet } from "react-helmet-async";
import HireDeveloperSection from "@/components/HireDeveloperSection";
// PWA Hero Section
const PWAHeroWithCTA = () => {
@@ -1402,6 +1403,34 @@ export const PWADevelopment = () => {
<PWASuccessStories />
</section>
<HireDeveloperSection
title="Augment Your Team with Top PWA Developers"
description="Build fast, installable, and offline-first Progressive Web Apps that feel like native mobile apps."
buttonText="Hire PWA Developers"
buttonLink="/start-a-project"
developerTypes={[
{
title: "Frontend PWA Developer",
experience: "4+ Years",
skills: ["React.js", "Next.js", "Service Workers", "Lighthouse"],
specialties: "Responsive UI, App-like Interactions",
},
{
title: "Backend for PWA",
experience: "5+ Years",
skills: ["Node.js", "Express", "MongoDB", "Firebase"],
specialties: "API Optimization, Offline Support",
},
{
title: "PWA Architect",
experience: "6+ Years",
skills: ["Workbox", "Webpack", "Web App Manifest", "CI/CD"],
specialties: "PWA Strategy, Cross-Browser Support",
},
]}
/>
{/* Mid-Page CTA */}
<section className="bg-background">
<PWAInlineCTA />

2
pages/StartAProject.tsx
View File

@@ -50,6 +50,7 @@ import {
Headphones,
Shield,
} from "lucide-react";
import GlobalOffices from "@/components/GlobalOffices";
@@ -1298,6 +1299,7 @@ export const StartAProject = () => {
<WhyPartnerSection />
<JoinWDISection />
<ContactInfoSection />
<GlobalOffices />
<Footer />
</div>
);

39
pages/WearableDeviceDevelopment.tsx
View File

@@ -41,6 +41,7 @@ import { Card, CardContent } from "../components/ui/card";
import { ShimmerButton } from "../components/ui/shimmer-button";
import { navigateTo } from "@/App";
import { Helmet } from "react-helmet-async";
import HireDeveloperSection from "@/components/HireDeveloperSection";
// Wearable & Device App Development Hero Section
const WearableHeroWithCTA = () => {
@@ -711,13 +712,11 @@ const WearableProcess = () => {
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"
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"
className={`flex-1 ${isEven ? "lg:text-right" : "lg:text-left"
} text-center lg:text-left`}
>
<div className="bg-card/20 backdrop-blur-md rounded-2xl border border-white/10 p-8 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl">
@@ -1482,9 +1481,37 @@ export const WearableDeviceDevelopment = () => {
</section>
{/* Case Studies */}
<section className="bg-card">
{/* <section className="bg-card">
<WearableCaseStudies />
</section>
</section> */}
<HireDeveloperSection
title="Augment Your Team with Top Wearable App Developers"
description="Develop seamless, real-time apps for smartwatches and wearable devices tailored for fitness, healthcare, and lifestyle industries."
buttonText="Hire Wearable Developers"
buttonLink="/start-a-project"
developerTypes={[
{
title: "WearOS Developer",
experience: "4+ Years",
skills: ["Kotlin", "Jetpack Compose", "WearOS SDK", "Bluetooth LE"],
specialties: "Smartwatch UIs, Health Data Integration",
},
{
title: "watchOS Developer",
experience: "5+ Years",
skills: ["Swift", "WatchKit", "HealthKit", "Core Motion"],
specialties: "Apple Watch Integration, Fitness Tracking",
},
{
title: "Cross-Platform Wearable Developer",
experience: "6+ Years",
skills: ["Flutter", "React Native", "Firebase", "Sensor APIs"],
specialties: "Hybrid Wearable Apps, Real-Time Sync",
},
]}
/>
{/* Mid-Page CTA */}
<section className="bg-background">

38
pages/iOSAppDevelopment.tsx
View File

@@ -8,10 +8,10 @@ import { ShimmerButton } from "../components/ui/shimmer-button";
import ranoutofImage from "../src/images/ranoutof.webp";
import seezunImage from "../src/images/seezun.webp";
import wokaImage from "../src/images/woka.webp";
import swiftImage from "../src/images/swift-programming.webp";
// High-quality iOS development images
const swiftImage =
"https://images.unsplash.com/photo-1517077304055-6e89abbf09b0?w=400&h=300&fit=crop&auto=format";
const swiftuiImage =
"https://images.unsplash.com/photo-1551650975-87deedd944c3?w=400&h=300&fit=crop&auto=format";
@@ -49,6 +49,7 @@ import { Button } from "@/components/ui/button";
import { navigateTo } from "@/App";
import Spline from "@splinetool/react-spline";
import { Helmet } from "react-helmet-async";
import HireDeveloperSection from "@/components/HireDeveloperSection";
// iOS Hero Section with iPhone/iPad mockups
const IOSHeroWithCTA = () => {
@@ -671,7 +672,10 @@ const IOSServicesGrid = () => {
// iOS Tech Stack
const IOSTechStack = () => {
const technologies = [
{ name: "Swift", logo: swiftImage },
{
name: "Swift",
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/swift/swift-original.svg",
},
{ name: "SwiftUI", logo: swiftuiImage },
{
name: "Xcode",
@@ -1034,6 +1038,34 @@ export const IOSAppDevelopment = () => {
<IOSTechStack />
</section>
<HireDeveloperSection
title="Augment Your Team with Top iOS App Developers"
description="Build sleek, high-performance iOS applications with our skilled Swift and Objective-C developers."
buttonText="Hire iOS Developers"
buttonLink="/start-a-project"
developerTypes={[
{
title: "Swift Developer",
experience: "4+ Years",
skills: ["Swift", "UIKit", "SwiftUI", "REST APIs"],
specialties: "Modern iOS UI, Performance Optimization",
},
{
title: "Objective-C Developer",
experience: "5+ Years",
skills: ["Objective-C", "Xcode", "Cocoa Touch", "Core Data"],
specialties: "Legacy App Maintenance, Native Libraries",
},
{
title: "iOS App Architect",
experience: "6+ Years",
skills: ["MVVM", "Swift", "App Store Deployment", "CI/CD"],
specialties: "Scalable Architecture, Release Pipelines",
},
]}
/>
<section className="bg-card">
<IOSTechnologies />
</section>

BIN
src/images/swift-programming.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 134 KiB