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

pwa working, homepage cta redirect to start-a-project

Browse Source
This commit is contained in:
priyanshuvish
2025-07-17 17:13:18 +05:30
parent 477dbad434
commit 03f5a58986
7 changed files with 1396 additions and 561 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/HeroSection.tsx
View File

@@ -76,7 +76,7 @@ export function HeroSection() {
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.5 }}
>
<Button size="lg" className="whitespace-nowrap" onClick={() => navigateTo('/contact')}>
<Button size="lg" className="whitespace-nowrap" onClick={() => navigateTo('/start-a-project')}>
<Calendar className="w-4 h-4" />
Book a Free Consultation
</Button>

2
components/SplitCallToAction.tsx
View File

@@ -86,7 +86,7 @@ export const SplitCallToAction = () => {
<Button
size="lg"
className="w-full bg-accent hover:bg-accent/90 text-accent-foreground py-4 text-lg border-0 rounded-lg"
onClick={() => navigateTo('/contact')}
onClick={() => navigateTo('/start-a-project')}
>
<Phone className="w-5 h-5 mr-2" />
Schedule Free Call

576
pages/AndroidAppDevelopment.tsx
View File

@@ -1,28 +1,46 @@
import React, { useState } from "react";
import { motion } from "framer-motion";
import { Navigation } from "../components/Navigation";
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 { 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
ArrowRight,
Brush,
Bug,
Calendar,
CheckCircle,
Code,
Coffee,
DollarSign,
Eye,
Lightbulb,
Monitor,
Network,
Palette,
Play,
RefreshCcw,
Rocket,
Settings,
Smartphone,
Tablet,
TrendingUp,
UserPlus,
Users2,
Watch,
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 androidVectorImage from "../src/images/android-vector.png";
// Android Hero Section with Android device mockups
// Android Hero Section with Android device mockups and Android vector
const AndroidHeroWithCTA = () => {
return (
<section className="relative py-20 overflow-hidden bg-black">
@@ -40,20 +58,54 @@ const AndroidHeroWithCTA = () => {
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6 }}
>
<span className="text-white/70 text-sm font-medium">Android App Development</span>
<div className="inline-flex items-center gap-2 px-4 py-2 bg-gradient-to-r from-green-500/20 to-green-400/20 border border-green-500/30 rounded-full">
<Smartphone className="w-4 h-4 text-green-400" />
<span className="text-white/90 text-sm font-medium">
Android App Development
</span>
</div>
</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">
Robust Android App Development Services
<h1 className="text-4xl md:text-5xl lg:text-6xl font-semibold leading-tight">
<span className="text-white">Robust </span>
<span className="text-green-400">Android App</span>
<span className="text-white"> Development Services</span>
</h1>
<p className="text-lg text-gray-300 leading-relaxed max-w-lg">
Building scalable, secure, and user-centric Android applications for the world's largest mobile ecosystem.
Building scalable, secure, and user-centric Android applications
for the world's largest mobile ecosystem with modern development
practices.
</p>
</div>
{/* Key Benefits */}
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6, delay: 0.2 }}
className="grid grid-cols-2 gap-4 text-sm"
>
<div className="flex items-center gap-2 text-gray-300">
<CheckCircle className="w-4 h-4 text-green-400" />
<span>3+ Billion Users</span>
</div>
<div className="flex items-center gap-2 text-gray-300">
<CheckCircle className="w-4 h-4 text-green-400" />
<span>Native Performance</span>
</div>
<div className="flex items-center gap-2 text-gray-300">
<CheckCircle className="w-4 h-4 text-green-400" />
<span>Google Play Ready</span>
</div>
<div className="flex items-center gap-2 text-gray-300">
<CheckCircle className="w-4 h-4 text-green-400" />
<span>Kotlin & Java</span>
</div>
</motion.div>
{/* CTAs */}
<motion.div
initial={{ opacity: 0, y: 20 }}
@@ -63,15 +115,25 @@ const AndroidHeroWithCTA = () => {
>
<ShimmerButton className="text-lg px-8 py-4">
<div className="inline-flex items-center gap-2">
<svg className="w-6 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2-2v14a2 2 0 002 2z" />
<svg
className="w-6 h-4 flex-shrink-0"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2-2v14a2 2 0 002 2z"
/>
</svg>
<span>Book a Free Consultation</span>
</div>
</ShimmerButton>
<a
href="#portfolio"
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"
className="inline-flex items-center justify-center gap-2 rounded-md bg-gray-800 px-4 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"
>
<Eye className="w-4 h-4 flex-shrink-0" />
<span>Explore Our Android Portfolio</span>
@@ -79,74 +141,153 @@ const AndroidHeroWithCTA = () => {
</motion.div>
</motion.div>
{/* Right side with Android device mockups */}
{/* Right side with Android vector and 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"
>
{/* Android Device Mockups */}
<div className="relative w-full max-w-lg mx-auto">
{/* Android Vector and Device Mockups Container */}
<div className="relative w-full h-[400px] md:h-[500px] lg:h-[600px]">
{/* Animated Background Elements */}
<div className="absolute inset-0 overflow-hidden rounded-xl">
<div className="absolute top-1/4 left-1/4 w-32 h-32 bg-gradient-to-r from-green-500/20 to-green-400/20 rounded-full blur-3xl animate-pulse"></div>
<div className="absolute top-3/4 right-1/4 w-24 h-24 bg-gradient-to-r from-blue-500/20 to-cyan-500/20 rounded-full blur-2xl animate-pulse delay-1000"></div>
<div className="absolute bottom-1/4 left-1/3 w-20 h-20 bg-gradient-to-r from-purple-500/20 to-violet-500/20 rounded-full blur-2xl animate-pulse delay-2000"></div>
</div>
{/* Main Android Vector */}
<motion.div
initial={{ opacity: 0, scale: 0.8 }}
animate={{ opacity: 1, scale: 1 }}
transition={{ duration: 1, delay: 0.4 }}
className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-10"
>
<div className="relative">
{/* Android Vector Image */}
<div className="w-64 h-64 md:w-80 md:h-80 lg:w-96 lg:h-96 relative">
<ImageWithFallback
src={androidVectorImage}
alt="Android Development"
className="w-full h-full object-contain drop-shadow-2xl"
/>
{/* Glowing effect around Android vector */}
<div className="absolute inset-0 bg-gradient-to-r from-green-500/30 to-green-400/30 rounded-full blur-xl animate-pulse opacity-50"></div>
</div>
{/* Floating development icons around Android */}
<motion.div
animate={{ rotate: 360 }}
transition={{
duration: 20,
repeat: Infinity,
ease: "linear",
}}
className="absolute inset-0"
>
{/* Kotlin Badge */}
<div className="absolute -top-4 left-1/4 w-12 h-12 bg-gradient-to-r from-purple-500 to-violet-400 rounded-xl flex items-center justify-center shadow-lg">
<Code className="w-6 h-6 text-white" />
</div>
{/* Java Badge */}
<div className="absolute top-1/4 -right-6 w-10 h-10 bg-gradient-to-r from-orange-500 to-red-500 rounded-lg flex items-center justify-center shadow-lg">
<Coffee className="w-5 h-5 text-white" />
</div>
{/* Play Store Badge */}
<div className="absolute -bottom-4 right-1/4 w-11 h-11 bg-gradient-to-r from-green-500 to-emerald-400 rounded-xl flex items-center justify-center shadow-lg">
<Play className="w-5 h-5 text-white" />
</div>
{/* Firebase Badge */}
<div className="absolute bottom-1/4 -left-6 w-10 h-10 bg-gradient-to-r from-yellow-500 to-orange-500 rounded-lg flex items-center justify-center shadow-lg">
<Zap className="w-5 h-5 text-white" />
</div>
</motion.div>
</div>
</motion.div>
{/* Device Mockups */}
<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"
transition={{ duration: 0.8, delay: 0.6 }}
className="absolute bottom-0 left-0 right-0"
>
{/* Android Phone and Tablet mockup representation */}
<div className="relative">
<div className="absolute -left-16 top-8 w-32 h-20 bg-gradient-to-br from-accent/80 to-accent/90 rounded-xl border border-accent/70 shadow-2xl transform -rotate-12">
<div className="w-full h-4 bg-accent/70 rounded-t-xl flex items-center justify-center">
<div className="w-12 h-0.5 bg-accent/60 rounded-full"></div>
<div className="flex justify-center gap-4">
{/* Android Phone Mockup */}
<div className="w-20 h-32 bg-gradient-to-br from-gray-800 to-gray-900 rounded-2xl border border-gray-700 shadow-xl">
<div className="w-full h-4 bg-gray-700 rounded-t-2xl flex items-center justify-center">
<div className="w-6 h-0.5 bg-gray-600 rounded-full"></div>
</div>
<div className="p-2 space-y-1">
<div className="h-1.5 bg-white/60 rounded"></div>
<div className="h-1 bg-accent/60 rounded w-3/4"></div>
<div className="h-1 bg-accent/60 rounded w-1/2"></div>
<div className="h-1.5 bg-green-500 rounded"></div>
<div className="h-1 bg-gray-600 rounded w-3/4"></div>
<div className="h-1 bg-gray-600 rounded w-1/2"></div>
<div className="grid grid-cols-2 gap-1 mt-2">
<div className="h-3 bg-gray-700 rounded"></div>
<div className="h-3 bg-gray-700 rounded"></div>
</div>
<div className="h-4 bg-green-500/20 rounded mt-2 flex items-center justify-center">
<div className="w-2 h-2 bg-green-500 rounded-full"></div>
</div>
</div>
</div>
<div className="w-48 h-72 bg-gradient-to-br from-gray-800 to-gray-900 rounded-3xl border border-gray-700 shadow-2xl">
<div className="w-full h-8 bg-gray-700 rounded-t-3xl flex items-center justify-center">
<div className="w-12 h-1 bg-gray-600 rounded-full"></div>
{/* Android Tablet Mockup */}
<div className="w-24 h-16 bg-gradient-to-br from-gray-800 to-gray-900 rounded-xl border border-gray-700 shadow-xl">
<div className="w-full h-3 bg-gray-700 rounded-t-xl flex items-center justify-center">
<div className="w-8 h-0.5 bg-gray-600 rounded-full"></div>
</div>
<div className="p-4 space-y-3">
<div className="h-3 bg-accent rounded"></div>
<div className="h-2 bg-gray-600 rounded w-4/5"></div>
<div className="h-2 bg-gray-600 rounded w-3/5"></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="h-12 bg-accent/20 rounded-lg mt-4 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 className="p-2 space-y-1">
<div className="h-1 bg-green-500 rounded"></div>
<div className="h-0.5 bg-gray-600 rounded w-4/5"></div>
<div className="grid grid-cols-3 gap-1 mt-1">
<div className="h-2 bg-gray-700 rounded"></div>
<div className="h-2 bg-gray-700 rounded"></div>
<div className="h-2 bg-green-500/30 rounded"></div>
</div>
</div>
</div>
</div>
</motion.div>
</div>
{/* Android 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"
transition={{ duration: 0.8, delay: 0.8 }}
className="flex justify-center gap-4 flex-wrap mt-8"
>
<Badge
variant="secondary"
className="bg-green-500/20 text-green-300 border-green-500/30"
>
Android
</Badge>
<Badge
variant="secondary"
className="bg-purple-500/20 text-purple-300 border-purple-500/30"
>
<Badge variant="secondary" className="bg-accent/20 text-accent border-accent/30">
Kotlin
</Badge>
<Badge variant="secondary" className="bg-orange-500/20 text-orange-300 border-orange-500/30">
<Badge
variant="secondary"
className="bg-orange-500/20 text-orange-300 border-orange-500/30"
>
Java
</Badge>
<Badge variant="secondary" className="bg-blue-500/20 text-blue-300 border-blue-500/30">
<Badge
variant="secondary"
className="bg-blue-500/20 text-blue-300 border-blue-500/30"
>
Android Studio
</Badge>
</motion.div>
</div>
</motion.div>
</div>
</div>
@@ -160,28 +301,33 @@ const AndroidKeyBenefits = () => {
{
icon: Users2,
title: "Massive Reach",
description: "Access to billions of users globally across diverse markets and demographics with Android's dominant market share."
description:
"Access to billions of users globally across diverse markets and demographics with Android's dominant market share.",
},
{
icon: Settings,
title: "Flexibility & Customization",
description: "Open-source nature allows for extensive customization, diverse features, and innovative user experiences."
description:
"Open-source nature allows for extensive customization, diverse features, and innovative user experiences.",
},
{
icon: Monitor,
title: "Device Versatility",
description: "Optimized for a wide range of devices, screen sizes, and form factors from budget to premium devices."
description:
"Optimized for a wide range of devices, screen sizes, and form factors from budget to premium devices.",
},
{
icon: Network,
title: "Integration Potential",
description: "Seamless connection with Google services, APIs, and diverse hardware capabilities for rich functionality."
description:
"Seamless connection with Google services, APIs, and diverse hardware capabilities for rich functionality.",
},
{
icon: DollarSign,
title: "Cost-Effective Entry",
description: "Lower entry barrier with flexible development options and cost-effective deployment strategies."
}
description:
"Lower entry barrier with flexible development options and cost-effective deployment strategies.",
},
];
return (
@@ -198,7 +344,8 @@ const AndroidKeyBenefits = () => {
Why Develop a Native Android App?
</h2>
<p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
Android development offers unparalleled reach and flexibility for businesses looking to tap into the world's largest mobile ecosystem.
Android development offers unparalleled reach and flexibility for
businesses looking to tap into the world's largest mobile ecosystem.
</p>
</motion.div>
@@ -286,29 +433,34 @@ const AndroidProcessTimeline = () => {
const steps = [
{
title: "Discovery & Strategy",
description: "Comprehensive analysis of your Android app requirements, target audience, and optimal device compatibility strategy.",
icon: Lightbulb
description:
"Comprehensive analysis of your Android app requirements, target audience, and optimal device compatibility strategy.",
icon: Lightbulb,
},
{
title: "UI/UX Design",
description: "Create stunning designs following Material Design principles for optimal Android user experience and platform consistency.",
icon: Palette
description:
"Create stunning designs following Material Design principles for optimal Android user experience and platform consistency.",
icon: Palette,
},
{
title: "Native Android Development",
description: "Build your app using Kotlin/Java and modern Android frameworks for maximum performance and platform integration.",
icon: Code
description:
"Build your app using Kotlin/Java and modern Android frameworks for maximum performance and platform integration.",
icon: Code,
},
{
title: "Thorough QA & Testing",
description: "Comprehensive testing across diverse Android devices, OS versions, and screen sizes to ensure flawless functionality.",
icon: Bug
description:
"Comprehensive testing across diverse Android devices, OS versions, and screen sizes to ensure flawless functionality.",
icon: Bug,
},
{
title: "Google Play Launch & Maintenance",
description: "Handle Google Play Store submission, optimization, and provide ongoing maintenance and feature updates.",
icon: Rocket
}
description:
"Handle Google Play Store submission, optimization, and provide ongoing maintenance and feature updates.",
icon: Rocket,
},
];
return (
@@ -325,7 +477,8 @@ const AndroidProcessTimeline = () => {
Our Comprehensive Android App Development Journey
</h2>
<p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
From concept to Google Play success, we guide you through every step of the Android development process.
From concept to Google Play success, we guide you through every step
of the Android development process.
</p>
</motion.div>
@@ -345,15 +498,23 @@ const AndroidProcessTimeline = () => {
whileInView={{ opacity: 1, x: 0 }}
transition={{ duration: 0.8, delay: index * 0.2 }}
viewport={{ once: true }}
className={`flex items-center ${isEven ? 'lg:flex-row' : 'lg:flex-row-reverse'} flex-col lg:gap-16 gap-8`}
className={`flex items-center ${
isEven ? "lg:flex-row" : "lg:flex-row-reverse"
} flex-col lg:gap-16 gap-8`}
>
<div
className={`flex-1 ${
isEven ? "lg:text-right" : "lg:text-left"
} text-center lg:text-left`}
>
<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 className="text-2xl font-bold text-accent">
0{index + 1}
</div>
</div>
<h3 className="text-2xl font-semibold text-white mb-4">
{step.title}
@@ -383,34 +544,40 @@ const AndroidServicesGrid = () => {
const services = [
{
title: "Custom Android App Development",
description: "Tailored apps for diverse business requirements with native Android performance and capabilities.",
icon: Smartphone
description:
"Tailored apps for diverse business requirements with native Android performance and capabilities.",
icon: Smartphone,
},
{
title: "Android Tablet App Development",
description: "Creating immersive experiences for larger screens with optimized layouts and tablet-specific features.",
icon: Tablet
description:
"Creating immersive experiences for larger screens with optimized layouts and tablet-specific features.",
icon: Tablet,
},
{
title: "Android UI/UX Design",
description: "Crafting intuitive interfaces following Material Design principles for consistent user experiences.",
icon: Brush
description:
"Crafting intuitive interfaces following Material Design principles for consistent user experiences.",
icon: Brush,
},
{
title: "Android Wear & TV Apps",
description: "Extending your app's presence to other Android devices including smartwatches and Android TV.",
icon: Watch
description:
"Extending your app's presence to other Android devices including smartwatches and Android TV.",
icon: Watch,
},
{
title: "Android App Modernization",
description: "Upgrading existing apps for performance, security, and compatibility with latest Android versions.",
icon: RefreshCcw
description:
"Upgrading existing apps for performance, security, and compatibility with latest Android versions.",
icon: RefreshCcw,
},
{
title: "Google Play Store Optimization",
description: "Improving app visibility and download rates through strategic ASO practices and store optimization.",
icon: TrendingUp
}
description:
"Improving app visibility and download rates through strategic ASO practices and store optimization.",
icon: TrendingUp,
},
];
return (
@@ -427,7 +594,8 @@ const AndroidServicesGrid = () => {
Our Expertise in Android App Solutions
</h2>
<p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
From smartphones to smart TVs, we provide comprehensive Android development services across all device categories.
From smartphones to smart TVs, we provide comprehensive Android
development services across all device categories.
</p>
</motion.div>
@@ -475,14 +643,38 @@ const AndroidServicesGrid = () => {
// Android Tech Stack
const AndroidTechStack = () => {
const technologies = [
{ name: "Kotlin", logo: "https://images.unsplash.com/photo-1607706189992-eae578626c86?w=80&h=80&fit=crop&auto=format" },
{ name: "Java", logo: "https://images.unsplash.com/photo-1580121441575-41bcb5c6b47c?w=80&h=80&fit=crop&auto=format" },
{ name: "Android Studio", logo: "https://images.unsplash.com/photo-1611224923853-80b023f02d71?w=80&h=80&fit=crop&auto=format" },
{ name: "Material Design", logo: "https://images.unsplash.com/photo-1558655146-9f40138edfeb?w=80&h=80&fit=crop&auto=format" },
{ name: "Firebase", logo: "https://images.unsplash.com/photo-1618477388954-7852f32655ec?w=80&h=80&fit=crop&auto=format" },
{ name: "AWS", logo: "https://images.unsplash.com/photo-1606868306217-dbf5046868d2?w=80&h=80&fit=crop&auto=format" },
{ name: "Google APIs", logo: "https://images.unsplash.com/photo-1573804633927-bfcbcd909acd?w=80&h=80&fit=crop&auto=format" },
{ name: "Jetpack Compose", logo: "https://images.unsplash.com/photo-1621839673705-6617adf9e890?w=80&h=80&fit=crop&auto=format" }
{
name: "Kotlin",
logo: "https://images.unsplash.com/photo-1607706189992-eae578626c86?w=80&h=80&fit=crop&auto=format",
},
{
name: "Java",
logo: "https://images.unsplash.com/photo-1580121441575-41bcb5c6b47c?w=80&h=80&fit=crop&auto=format",
},
{
name: "Android Studio",
logo: "https://images.unsplash.com/photo-1611224923853-80b023f02d71?w=80&h=80&fit=crop&auto=format",
},
{
name: "Material Design",
logo: "https://images.unsplash.com/photo-1558655146-9f40138edfeb?w=80&h=80&fit=crop&auto=format",
},
{
name: "Firebase",
logo: "https://images.unsplash.com/photo-1618477388954-7852f32655ec?w=80&h=80&fit=crop&auto=format",
},
{
name: "AWS",
logo: "https://images.unsplash.com/photo-1606868306217-dbf5046868d2?w=80&h=80&fit=crop&auto=format",
},
{
name: "Google APIs",
logo: "https://images.unsplash.com/photo-1573804633927-bfcbcd909acd?w=80&h=80&fit=crop&auto=format",
},
{
name: "Jetpack Compose",
logo: "https://images.unsplash.com/photo-1621839673705-6617adf9e890?w=80&h=80&fit=crop&auto=format",
},
];
return (
@@ -499,7 +691,8 @@ const AndroidTechStack = () => {
Leveraging Cutting-Edge Android Technologies
</h2>
<p className="text-xl text-gray-300 leading-relaxed">
We use the latest Android frameworks and tools to create superior mobile applications.
We use the latest Android frameworks and tools to create superior
mobile applications.
</p>
</motion.div>
@@ -538,27 +731,33 @@ const AndroidCaseStudies = () => {
{
title: "E-Commerce Android App with Google Pay",
client: "ShopNow",
description: "Comprehensive shopping platform with Google services integration",
image: "https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?w=400&h=300&fit=crop&auto=format",
description:
"Comprehensive shopping platform with Google services integration",
image:
"https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?w=400&h=300&fit=crop&auto=format",
results: "3M+ downloads",
gradient: "from-accent/20 to-accent/10"
gradient: "from-accent/20 to-accent/10",
},
{
title: "Fitness Tracking Android App",
client: "FitAndroid Pro",
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",
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",
results: "800K+ users",
gradient: "from-blue-500/20 to-cyan-500/20"
gradient: "from-blue-500/20 to-cyan-500/20",
},
{
title: "Business Productivity Android Suite",
client: "WorkFlow",
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",
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",
results: "1.5M+ downloads",
gradient: "from-purple-500/20 to-pink-500/20"
}
gradient: "from-purple-500/20 to-pink-500/20",
},
];
return (
@@ -575,7 +774,8 @@ const AndroidCaseStudies = () => {
Android Apps That Define Industries
</h2>
<p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
Discover how we've helped businesses succeed with powerful Android applications that leverage the platform's capabilities.
Discover how we've helped businesses succeed with powerful Android
applications that leverage the platform's capabilities.
</p>
</motion.div>
@@ -601,15 +801,22 @@ const AndroidCaseStudies = () => {
<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
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">
<Badge
variant="secondary"
className="text-xs bg-accent/20 text-accent border-accent/30"
>
{study.results}
</Badge>
</div>
@@ -621,7 +828,9 @@ const AndroidCaseStudies = () => {
</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`}>
<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}
@@ -642,7 +851,9 @@ const AndroidCaseStudies = () => {
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"
>
<span className="text-sm font-medium">VIEW CASE STUDY</span>
<span className="text-sm font-medium">
VIEW CASE STUDY
</span>
<ArrowRight className="w-4 h-4" />
</Button>
</div>
@@ -677,10 +888,16 @@ const AndroidInlineCTA = () => {
>
<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">
<svg className="w-5 h-5 text-white" 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
className="w-5 h-5 text-white"
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>
<span className="text-white text-base font-medium">Android Innovation</span>
<span className="text-white text-base font-medium">
Android Innovation
</span>
</div>
</div>
@@ -690,13 +907,24 @@ const AndroidInlineCTA = () => {
</h2>
<p className="text-xl text-gray-300 leading-relaxed max-w-2xl mx-auto">
We'll help you navigate the vast Android landscape with confidence and create apps that stand out.
We'll help you navigate the vast Android landscape with confidence
and create apps that stand out.
</p>
<ShimmerButton className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl">
<div className="inline-flex items-center gap-3">
<svg className="w-6 h-6 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2-2v14a2 2 0 002 2z" />
<svg
className="w-6 h-6 flex-shrink-0"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2-2v14a2 2 0 002 2z"
/>
</svg>
<span>Get a Free Android Consultation</span>
</div>
@@ -715,20 +943,25 @@ const HireAndroidDevelopers = () => {
title: "Senior Android Developer",
experience: "5+ Years",
skills: ["Kotlin", "Java", "Jetpack Compose", "MVVM"],
specialties: "Native Android, Google Services Integration"
specialties: "Native Android, Google Services Integration",
},
{
title: "Android UI/UX Designer",
experience: "4+ Years",
skills: ["Material Design", "Sketch", "Figma", "Prototyping"],
specialties: "Android Design Patterns, Material Design"
specialties: "Android Design Patterns, Material Design",
},
{
title: "Android QA Specialist",
experience: "3+ Years",
skills: ["Espresso", "UI Automator", "Firebase Test Lab", "Device Testing"],
specialties: "Android Testing, Cross-Device Compatibility"
}
skills: [
"Espresso",
"UI Automator",
"Firebase Test Lab",
"Device Testing",
],
specialties: "Android Testing, Cross-Device Compatibility",
},
];
return (
@@ -745,7 +978,8 @@ const HireAndroidDevelopers = () => {
Augment Your Team with Top Android Talent
</h2>
<p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
Access our pool of skilled Android developers proficient in Kotlin and Java, ready to integrate with your existing team.
Access our pool of skilled Android developers proficient in Kotlin
and Java, ready to integrate with your existing team.
</p>
</motion.div>
@@ -770,12 +1004,19 @@ const HireAndroidDevelopers = () => {
<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">
<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
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>
<Badge variant="secondary" className="text-xs bg-accent/20 text-accent border-accent/30">
<Badge
variant="secondary"
className="text-xs bg-accent/20 text-accent border-accent/30"
>
{dev.experience}
</Badge>
</div>
@@ -791,7 +1032,11 @@ const HireAndroidDevelopers = () => {
<div className="flex flex-wrap gap-2">
{dev.skills.map((skill) => (
<Badge key={skill} variant="secondary" className="text-xs bg-white/10 text-foreground">
<Badge
key={skill}
variant="secondary"
className="text-xs bg-white/10 text-foreground"
>
{skill}
</Badge>
))}
@@ -832,21 +1077,27 @@ const HireAndroidDevelopers = () => {
const AndroidFAQs = () => {
const faqs = [
{
question: "How do you ensure app compatibility across diverse Android devices?",
answer: "We follow comprehensive testing strategies including device fragmentation testing, responsive design principles, and adaptive layouts. Our team tests across multiple screen sizes, Android versions, and hardware configurations to ensure consistent performance across the Android ecosystem."
question:
"How do you ensure app compatibility across diverse Android devices?",
answer:
"We follow comprehensive testing strategies including device fragmentation testing, responsive design principles, and adaptive layouts. Our team tests across multiple screen sizes, Android versions, and hardware configurations to ensure consistent performance across the Android ecosystem.",
},
{
question: "What's your approach to Android UI/UX design?",
answer: "We strictly follow Google's Material Design guidelines while incorporating your brand identity. Our designs prioritize usability, accessibility, and platform consistency while ensuring your app feels native to Android users and leverages platform-specific interaction patterns."
answer:
"We strictly follow Google's Material Design guidelines while incorporating your brand identity. Our designs prioritize usability, accessibility, and platform consistency while ensuring your app feels native to Android users and leverages platform-specific interaction patterns.",
},
{
question: "Do you provide post-launch updates and maintenance?",
answer: "Yes, we offer comprehensive post-launch support including regular updates for new Android versions, security patches, performance optimizations, feature enhancements, and Google Play Store compliance. Our maintenance packages are tailored to your specific needs."
answer:
"Yes, we offer comprehensive post-launch support including regular updates for new Android versions, security patches, performance optimizations, feature enhancements, and Google Play Store compliance. Our maintenance packages are tailored to your specific needs.",
},
{
question: "Can you integrate with specific Google services (e.g., Maps, Firebase)?",
answer: "Absolutely! We specialize in Google services integration including Google Maps, Firebase, Google Pay, Google Drive, Google Analytics, and more. Our team has extensive experience leveraging the full Google ecosystem to enhance your app's functionality and user experience."
}
question:
"Can you integrate with specific Google services (e.g., Maps, Firebase)?",
answer:
"Absolutely! We specialize in Google services integration including Google Maps, Firebase, Google Pay, Google Drive, Google Analytics, and more. Our team has extensive experience leveraging the full Google ecosystem to enhance your app's functionality and user experience.",
},
];
return (
@@ -882,7 +1133,9 @@ const AndroidFAQs = () => {
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>
<span className="font-semibold text-white">
{faq.question}
</span>
</AccordionTrigger>
<AccordionContent className="text-gray-300 pb-10 text-lg leading-relaxed">
{faq.answer}
@@ -917,10 +1170,16 @@ const AndroidFinalCTA = () => {
>
<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">
<svg className="w-5 h-5 text-foreground" 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
className="w-5 h-5 text-foreground"
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>
<span className="text-foreground text-base font-medium">Ready to Build?</span>
<span className="text-foreground text-base font-medium">
Ready to Build?
</span>
</div>
</div>
</motion.div>
@@ -943,7 +1202,8 @@ const AndroidFinalCTA = () => {
viewport={{ once: true }}
className="text-xl text-muted-foreground mb-12 max-w-2xl mx-auto leading-relaxed"
>
Partner with us to create powerful, user-friendly Android applications that stand out in the competitive market.
Partner with us to create powerful, user-friendly Android
applications that stand out in the competitive market.
</motion.p>
<motion.div
@@ -955,8 +1215,18 @@ const AndroidFinalCTA = () => {
>
<ShimmerButton className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25">
<div className="inline-flex items-center gap-3">
<svg className="w-6 h-6 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 100 4m0-4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 100 4m0-4v2m0-6V4" />
<svg
className="w-6 h-6 flex-shrink-0"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 100 4m0-4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 100 4m0-4v2m0-6V4"
/>
</svg>
<span>Start Your Android Project Now</span>
</div>

58
pages/CrossPlatformAppDevelopment.tsx
View File

@@ -1,28 +1,36 @@
import React, { useState } from "react";
import { motion } from "framer-motion";
import { Navigation } from "../components/Navigation";
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 { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "../components/ui/accordion";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "../components/ui/tabs";
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
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";
// Cross-Platform Hero Section
const CrossPlatformHeroWithCTA = () => {
@@ -320,8 +328,8 @@ const CrossPlatformTechnologies = () => {
viewport={{ once: true }}
>
<Tabs defaultValue="flutter" className="max-w-6xl mx-auto">
<TabsList className="grid w-full grid-cols-2 mb-12 bg-gray-900/50 border border-gray-800">
<TabsTrigger value="flutter" className="text-base py-4">
<TabsList className="grid w-full grid-cols-2 mb-12 bg-gray-900/50 border border-gray-800 h-17">
<TabsTrigger value="flutter" className="text-base py-4 h-full">
<div className="flex items-center gap-2">
<div className="w-6 h-6 bg-blue-500 rounded flex items-center justify-center">
<span className="text-white text-xs font-bold">F</span>
@@ -329,7 +337,7 @@ const CrossPlatformTechnologies = () => {
Flutter Development
</div>
</TabsTrigger>
<TabsTrigger value="react-native" className="text-base py-4">
<TabsTrigger value="react-native" className="text-base py-4 h-full">
<div className="flex items-center gap-2">
<div className="w-6 h-6 bg-cyan-500 rounded flex items-center justify-center">
<span className="text-white text-xs font-bold">RN</span>

506
pages/NativeAppDevelopment.tsx
View File

@@ -7,21 +7,103 @@ 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 { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "../components/ui/accordion";
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
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";
// Native App Development Hero Section
@@ -42,7 +124,9 @@ const NativeHeroWithCTA = () => {
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6 }}
>
<span className="text-white/70 text-sm font-medium">Native App Development</span>
<span className="text-white/70 text-sm font-medium">
Native App Development
</span>
</motion.div>
{/* Main Heading */}
@@ -52,7 +136,9 @@ const NativeHeroWithCTA = () => {
</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.
Building bespoke applications tailored for a single operating
system to deliver the highest level of performance, security,
and device integration.
</p>
</div>
@@ -116,7 +202,10 @@ const NativeHeroWithCTA = () => {
</div>
</div>
<div className="text-center">
<Badge variant="secondary" className="bg-blue-500/20 text-blue-300 border-blue-500/30 text-xs">
<Badge
variant="secondary"
className="bg-blue-500/20 text-blue-300 border-blue-500/30 text-xs"
>
iOS Native
</Badge>
</div>
@@ -137,14 +226,21 @@ const NativeHeroWithCTA = () => {
<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
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">
<Badge
variant="secondary"
className="bg-green-500/20 text-green-300 border-green-500/30 text-xs"
>
Android Native
</Badge>
</div>
@@ -162,13 +258,22 @@ const NativeHeroWithCTA = () => {
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">
<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">
<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">
<Badge
variant="secondary"
className="bg-purple-500/20 text-purple-300 border-purple-500/30"
>
Native Features
</Badge>
</motion.div>
@@ -186,28 +291,33 @@ const NativeVsCrossPlatform = () => {
{
icon: Gauge,
title: "Unrivaled Performance",
description: "Direct access to hardware, faster execution, and smoother animations through platform-specific optimization."
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."
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."
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."
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."
}
description:
"Best choice for complex, resource-intensive apps requiring long-term support and evolution.",
},
];
return (
@@ -224,7 +334,8 @@ const NativeVsCrossPlatform = () => {
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.
Native development delivers uncompromising performance and platform
integration for applications that demand the highest standards.
</p>
</motion.div>
@@ -312,40 +423,88 @@ const NativeCapabilities = () => {
const capabilities = [
{
title: "iOS Native Development",
description: "Swift and Objective-C development for the complete Apple ecosystem with seamless integration.",
description:
"Swift and Objective-C development for the complete Apple ecosystem with seamless integration.",
icon: Apple,
technologies: ["Swift", "SwiftUI", "UIKit", "Core Data", "CloudKit", "ARKit"]
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.",
description:
"Kotlin and Java development for the Android ecosystem with Google services integration.",
icon: Smartphone,
technologies: ["Kotlin", "Java", "Jetpack Compose", "Room", "Firebase", "ARCore"]
technologies: [
"Kotlin",
"Java",
"Jetpack Compose",
"Room",
"Firebase",
"ARCore",
],
},
{
title: "Performance Optimization",
description: "Ensuring lightning-fast, smooth applications through platform-specific performance tuning.",
description:
"Ensuring lightning-fast, smooth applications through platform-specific performance tuning.",
icon: Zap,
technologies: ["Memory Management", "Threading", "Caching", "Database Optimization", "Network Optimization", "Battery Efficiency"]
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.",
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"]
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.",
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"]
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.",
description:
"Seamless integration with enterprise systems, APIs, and security protocols.",
icon: Building,
technologies: ["Enterprise APIs", "SSO Integration", "MDM Support", "Data Encryption", "Compliance", "Custom Protocols"]
}
technologies: [
"Enterprise APIs",
"SSO Integration",
"MDM Support",
"Data Encryption",
"Compliance",
"Custom Protocols",
],
},
];
return (
@@ -362,7 +521,8 @@ const NativeCapabilities = () => {
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.
Comprehensive native development capabilities covering both iOS and
Android ecosystems with deep platform expertise.
</p>
</motion.div>
@@ -398,7 +558,11 @@ const NativeCapabilities = () => {
</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">
<Badge
key={tech}
variant="secondary"
className="text-xs bg-gray-800/50 text-gray-300 border-gray-700"
>
{tech}
</Badge>
))}
@@ -419,40 +583,76 @@ const NativeUseCases = () => {
const useCases = [
{
title: "High-Performance Apps",
description: "Gaming, AR/VR applications, and complex data processing requiring maximum computational efficiency.",
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"]
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.",
description:
"Apps requiring extensive device hardware integration and platform-specific functionality.",
icon: Layers,
examples: ["Camera Integration", "Sensor Data", "Biometric Auth", "Device APIs"]
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.",
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"]
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.",
description:
"Banking, healthcare, and enterprise solutions requiring maximum security and compliance.",
icon: Shield,
examples: ["Financial Services", "Healthcare Apps", "Enterprise Security", "Government Apps"]
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.",
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"]
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.",
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"]
}
examples: [
"ML Kit Integration",
"ARKit/ARCore",
"HealthKit/Google Fit",
"Platform Widgets",
],
},
];
return (
@@ -469,7 +669,8 @@ const NativeUseCases = () => {
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.
Certain application requirements and business goals make native
development the optimal choice for long-term success.
</p>
</motion.div>
@@ -504,10 +705,16 @@ const NativeUseCases = () => {
{useCase.description}
</p>
<div className="space-y-2">
<h4 className="text-sm font-medium text-foreground">Key Examples:</h4>
<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">
<Badge
key={example}
variant="secondary"
className="text-xs bg-accent/10 text-accent border-accent/20"
>
{example}
</Badge>
))}
@@ -529,29 +736,34 @@ 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
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
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
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
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
}
description:
"App store optimization, deployment, and ongoing native platform updates and feature enhancements.",
icon: Rocket,
},
];
return (
@@ -568,7 +780,8 @@ const NativeProcess = () => {
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.
Our proven native development methodology ensures optimal
performance and platform integration at every stage.
</p>
</motion.div>
@@ -588,15 +801,23 @@ const NativeProcess = () => {
whileInView={{ opacity: 1, x: 0 }}
transition={{ duration: 0.8, delay: index * 0.2 }}
viewport={{ once: true }}
className={`flex items-center ${isEven ? 'lg:flex-row' : 'lg:flex-row-reverse'} flex-col lg:gap-16 gap-8`}
className={`flex items-center ${
isEven ? "lg:flex-row" : "lg:flex-row-reverse"
} flex-col lg:gap-16 gap-8`}
>
<div
className={`flex-1 ${
isEven ? "lg:text-right" : "lg:text-left"
} text-center lg:text-left`}
>
<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 className="text-2xl font-bold text-accent">
0{index + 1}
</div>
</div>
<h3 className="text-2xl font-semibold text-white mb-4">
{step.title}
@@ -627,33 +848,39 @@ const NativeCaseStudies = () => {
{
title: "High-Performance FinTech iOS App",
client: "SecureBank Pro",
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",
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"
benefits: "Biometric security, real-time data, smooth animations",
},
{
title: "Complex AR Android Solution",
client: "ARchitect Pro",
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",
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"
benefits: "ARCore integration, hardware acceleration, precise tracking",
},
{
title: "Healthcare Compliance Platform",
client: "MedSecure",
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",
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"
}
benefits: "Advanced security, device sensors, offline capability",
},
];
return (
@@ -670,7 +897,8 @@ const NativeCaseStudies = () => {
Impactful Native Apps We've Built
</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 native development delivered superior performance,
security, and user experience for our clients.
</p>
</motion.div>
@@ -703,10 +931,16 @@ const NativeCaseStudies = () => {
{study.client}
</div>
<div className="flex gap-2 flex-wrap">
<Badge variant="secondary" className="text-xs bg-accent/20 text-accent border-accent/30">
<Badge
variant="secondary"
className="text-xs bg-accent/20 text-accent border-accent/30"
>
{study.results}
</Badge>
<Badge variant="secondary" className="text-xs bg-blue-500/20 text-blue-300 border-blue-500/30">
<Badge
variant="secondary"
className="text-xs bg-blue-500/20 text-blue-300 border-blue-500/30"
>
{study.platform}
</Badge>
</div>
@@ -719,7 +953,9 @@ const NativeCaseStudies = () => {
</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`}>
<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}
@@ -733,7 +969,9 @@ const NativeCaseStudies = () => {
{study.description}
</p>
<div className="space-y-2">
<h4 className="text-xs font-medium text-foreground uppercase tracking-wider">Key Benefits:</h4>
<h4 className="text-xs font-medium text-foreground uppercase tracking-wider">
Key Benefits:
</h4>
<p className="text-xs text-muted-foreground">
{study.benefits}
</p>
@@ -746,7 +984,9 @@ const NativeCaseStudies = () => {
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"
>
<span className="text-sm font-medium">VIEW CASE STUDY</span>
<span className="text-sm font-medium">
VIEW CASE STUDY
</span>
<ArrowRight className="w-4 h-4" />
</Button>
</div>
@@ -782,7 +1022,9 @@ const NativeInlineCTA = () => {
<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>
<span className="text-white text-base font-medium">
Peak Performance
</span>
</div>
</div>
@@ -792,7 +1034,8 @@ const NativeInlineCTA = () => {
</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.
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">
@@ -815,20 +1058,37 @@ const HireNativeDevelopers = () => {
title: "Senior iOS Native Developer",
experience: "6+ Years",
skills: ["Swift", "SwiftUI", "UIKit", "Core Data", "ARKit", "CloudKit"],
specialties: "iOS Architecture, Performance Optimization, Apple Ecosystem"
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"
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"
}
skills: [
"System Design",
"Both Platforms",
"Performance",
"Security",
"DevOps",
"Leadership",
],
specialties:
"Technical Leadership, Architecture Design, Performance Engineering",
},
];
return (
@@ -845,7 +1105,8 @@ const HireNativeDevelopers = () => {
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.
Access our pool of highly specialized iOS and Android native
developers for your most demanding projects.
</p>
</motion.div>
@@ -873,7 +1134,10 @@ const HireNativeDevelopers = () => {
<Gauge className="w-6 h-6 text-accent" />
</div>
<div>
<Badge variant="secondary" className="text-xs bg-accent/20 text-accent border-accent/30">
<Badge
variant="secondary"
className="text-xs bg-accent/20 text-accent border-accent/30"
>
{dev.experience}
</Badge>
</div>
@@ -889,7 +1153,11 @@ const HireNativeDevelopers = () => {
<div className="flex flex-wrap gap-2">
{dev.skills.map((skill) => (
<Badge key={skill} variant="secondary" className="text-xs bg-white/10 text-foreground">
<Badge
key={skill}
variant="secondary"
className="text-xs bg-white/10 text-foreground"
>
{skill}
</Badge>
))}
@@ -915,7 +1183,8 @@ const HireNativeDevelopers = () => {
</ShimmerButton>
<Button
variant="outline"
className="border-white/20 text-foreground hover:bg-white/10 px-8 py-4 rounded-lg transition-all duration-300"
className="border-white text-white hover:bg-white/10 hover:text-white px-8 py-4 rounded-lg transition-all duration-300 h-[56px]"
style={{ color: "white" }}
>
<span>Get a Consultation</span>
<ArrowRight className="ml-2 w-4 h-4" />
@@ -931,20 +1200,25 @@ 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."
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."
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."
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."
}
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 (
@@ -980,7 +1254,9 @@ const NativeFAQs = () => {
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>
<span className="font-semibold text-white">
{faq.question}
</span>
</AccordionTrigger>
<AccordionContent className="text-gray-300 pb-10 text-lg leading-relaxed">
{faq.answer}
@@ -1016,7 +1292,9 @@ const NativeFinalCTA = () => {
<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>
<span className="text-foreground text-base font-medium">
Maximum Potential
</span>
</div>
</div>
</motion.div>
@@ -1033,7 +1311,8 @@ const NativeFinalCTA = () => {
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.
Invest in an application that delivers unparalleled performance,
security, and a truly immersive user experience.
</motion.p>
<motion.div
@@ -1051,7 +1330,8 @@ const NativeFinalCTA = () => {
</ShimmerButton>
<p className="text-muted-foreground text-sm">
Expert consultation • Architecture planning • Performance optimization
Expert consultation • Architecture planning • Performance
optimization
</p>
</motion.div>
</motion.div>

519
pages/PWADevelopment.tsx
View File

@@ -5,24 +5,120 @@ 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 { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "../components/ui/accordion";
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, WifiOff, DownloadCloud, Repeat,
Server, PhoneCall, MousePointer, PlusCircle, Code2, Store,
FileText, ShoppingBag, Newspaper, TicketIcon, Lightbulb as IdeaIcon,
TrendingUp as GrowthIcon, HelpCircle, ArrowUpRight
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,
WifiOff,
DownloadCloud,
Repeat,
Server,
PhoneCall,
MousePointer,
PlusCircle,
Code2,
Store,
FileText,
ShoppingBag,
Newspaper,
TicketIcon,
Lightbulb as IdeaIcon,
TrendingUp as GrowthIcon,
HelpCircle,
ArrowUpRight,
} from "lucide-react";
// PWA Hero Section
@@ -43,7 +139,9 @@ const PWAHeroWithCTA = () => {
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6 }}
>
<span className="text-white/70 text-sm font-medium">Progressive Web Apps</span>
<span className="text-white/70 text-sm font-medium">
Progressive Web Apps
</span>
</motion.div>
{/* Main Heading */}
@@ -53,7 +151,9 @@ const PWAHeroWithCTA = () => {
</h1>
<p className="text-lg text-gray-300 leading-relaxed max-w-lg">
Deliver app-like experiences directly through the web browser, combining the best of web and mobile apps for unparalleled reach.
Deliver app-like experiences directly through the web browser,
combining the best of web and mobile apps for unparalleled
reach.
</p>
</div>
@@ -129,8 +229,12 @@ const PWAHeroWithCTA = () => {
<Smartphone className="w-5 h-5 text-white" />
</div>
<div>
<div className="text-white font-medium text-sm">Your PWA</div>
<div className="text-gray-300 text-xs">App-like experience</div>
<div className="text-white font-medium text-sm">
Your PWA
</div>
<div className="text-gray-300 text-xs">
App-like experience
</div>
</div>
</div>
@@ -151,7 +255,9 @@ const PWAHeroWithCTA = () => {
{/* Install Banner */}
<div className="mt-4 bg-white/10 rounded-lg p-2 flex items-center justify-between">
<div className="text-xs text-white">Add to Home Screen</div>
<div className="text-xs text-white">
Add to Home Screen
</div>
<PlusCircle className="w-4 h-4 text-accent" />
</div>
</div>
@@ -165,15 +271,24 @@ const PWAHeroWithCTA = () => {
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">
<Badge
variant="secondary"
className="bg-accent/20 text-accent border-accent/30"
>
<WifiOff className="w-3 h-3 mr-1" />
Offline Ready
</Badge>
<Badge variant="secondary" className="bg-blue-500/20 text-blue-300 border-blue-500/30">
<Badge
variant="secondary"
className="bg-blue-500/20 text-blue-300 border-blue-500/30"
>
<DownloadCloud className="w-3 h-3 mr-1" />
Installable
</Badge>
<Badge variant="secondary" className="bg-purple-500/20 text-purple-300 border-purple-500/30">
<Badge
variant="secondary"
className="bg-purple-500/20 text-purple-300 border-purple-500/30"
>
<Globe className="w-3 h-3 mr-1" />
Cross-Platform
</Badge>
@@ -192,33 +307,39 @@ const PWABenefits = () => {
{
icon: WifiOff,
title: "Offline Capability",
description: "Works reliably even with no or low network connectivity, ensuring users can access content anywhere."
description:
"Works reliably even with no or low network connectivity, ensuring users can access content anywhere.",
},
{
icon: DownloadCloud,
title: "Installable",
description: "Users can 'add to home screen' without app store downloads, reducing friction for user acquisition."
description:
"Users can 'add to home screen' without app store downloads, reducing friction for user acquisition.",
},
{
icon: Search,
title: "Discoverable",
description: "SEO-friendly and discoverable via search engines like regular websites, improving organic reach."
description:
"SEO-friendly and discoverable via search engines like regular websites, improving organic reach.",
},
{
icon: Zap,
title: "Instant Load Times",
description: "Cached assets and service workers ensure lightning-fast loading speeds and smooth performance."
description:
"Cached assets and service workers ensure lightning-fast loading speeds and smooth performance.",
},
{
icon: DollarSign,
title: "Cost-Effective",
description: "Single codebase for web and mobile-like experience, significantly reducing development costs."
description:
"Single codebase for web and mobile-like experience, significantly reducing development costs.",
},
{
icon: Monitor,
title: "Platform Agnostic",
description: "Runs on any device with a modern browser, ensuring maximum compatibility and reach."
}
description:
"Runs on any device with a modern browser, ensuring maximum compatibility and reach.",
},
];
return (
@@ -235,7 +356,8 @@ const PWABenefits = () => {
Why Choose a Progressive Web App?
</h2>
<p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
PWAs combine the best of web and mobile apps, delivering native-like experiences with web-based flexibility and reach.
PWAs combine the best of web and mobile apps, delivering native-like
experiences with web-based flexibility and reach.
</p>
</motion.div>
@@ -286,33 +408,39 @@ const HowPWAsWork = () => {
{
icon: Server,
title: "Service Workers",
description: "Powering offline capabilities and push notifications through background scripts."
description:
"Powering offline capabilities and push notifications through background scripts.",
},
{
icon: Layout,
title: "Web App Manifest",
description: "Defining app appearance on home screen and providing native app-like behavior."
description:
"Defining app appearance on home screen and providing native app-like behavior.",
},
{
icon: Shield,
title: "HTTPS",
description: "Ensuring secure data transmission and enabling advanced PWA features."
description:
"Ensuring secure data transmission and enabling advanced PWA features.",
},
{
icon: Monitor,
title: "Responsive Design",
description: "Adapting seamlessly to all screen sizes and device orientations."
description:
"Adapting seamlessly to all screen sizes and device orientations.",
},
{
icon: Bell,
title: "Push Notifications",
description: "Re-engaging users effectively with timely and relevant notifications."
description:
"Re-engaging users effectively with timely and relevant notifications.",
},
{
icon: Repeat,
title: "Background Sync",
description: "Data updates even when offline, ensuring users always have fresh content."
}
description:
"Data updates even when offline, ensuring users always have fresh content.",
},
];
return (
@@ -329,7 +457,8 @@ const HowPWAsWork = () => {
Bridging the Gap Between Web and Native
</h2>
<p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
PWAs leverage cutting-edge web technologies to deliver app-like experiences that work seamlessly across all platforms.
PWAs leverage cutting-edge web technologies to deliver app-like
experiences that work seamlessly across all platforms.
</p>
</motion.div>
@@ -379,29 +508,34 @@ const PWAProcess = () => {
const steps = [
{
title: "Discovery & Strategy",
description: "Comprehensive analysis of your business needs to determine the optimal PWA approach and feature set.",
icon: Target
description:
"Comprehensive analysis of your business needs to determine the optimal PWA approach and feature set.",
icon: Target,
},
{
title: "UI/UX Design (Web-first, App-like)",
description: "Creating responsive designs that feel native while maintaining web accessibility and usability standards.",
icon: Palette
description:
"Creating responsive designs that feel native while maintaining web accessibility and usability standards.",
icon: Palette,
},
{
title: "PWA Development (Frontend + Backend)",
description: "Building the PWA using modern web technologies with service workers, manifest, and offline capabilities.",
icon: Code
description:
"Building the PWA using modern web technologies with service workers, manifest, and offline capabilities.",
icon: Code,
},
{
title: "Testing & Optimization",
description: "Rigorous testing across devices, browsers, and network conditions to ensure optimal performance.",
icon: Bug
description:
"Rigorous testing across devices, browsers, and network conditions to ensure optimal performance.",
icon: Bug,
},
{
title: "Deployment & Support",
description: "Launching your PWA with ongoing maintenance, updates, and performance monitoring.",
icon: Rocket
}
description:
"Launching your PWA with ongoing maintenance, updates, and performance monitoring.",
icon: Rocket,
},
];
return (
@@ -418,7 +552,8 @@ const PWAProcess = () => {
Our Agile Approach to PWA Development
</h2>
<p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
Our proven methodology ensures your PWA delivers exceptional user experiences while meeting your business objectives.
Our proven methodology ensures your PWA delivers exceptional user
experiences while meeting your business objectives.
</p>
</motion.div>
@@ -438,15 +573,23 @@ const PWAProcess = () => {
whileInView={{ opacity: 1, x: 0 }}
transition={{ duration: 0.8, delay: index * 0.2 }}
viewport={{ once: true }}
className={`flex items-center ${isEven ? 'lg:flex-row' : 'lg:flex-row-reverse'} flex-col lg:gap-16 gap-8`}
className={`flex items-center ${
isEven ? "lg:flex-row" : "lg:flex-row-reverse"
} flex-col lg:gap-16 gap-8`}
>
<div
className={`flex-1 ${
isEven ? "lg:text-right" : "lg:text-left"
} text-center lg:text-left`}
>
<div className={`flex-1 ${isEven ? 'lg:text-right' : 'lg:text-left'} text-center lg:text-left`}>
<div className="bg-card/20 backdrop-blur-md rounded-2xl border border-white/10 p-8 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl">
<div className="flex items-center gap-4 mb-4 justify-center lg:justify-start">
<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 className="text-2xl font-bold text-accent">
0{index + 1}
</div>
</div>
<h3 className="text-2xl font-semibold text-foreground mb-4">
{step.title}
@@ -476,40 +619,71 @@ const PWAUseCases = () => {
const useCases = [
{
title: "eCommerce Stores",
description: "Faster checkout processes and improved conversion rates with offline browsing capabilities.",
description:
"Faster checkout processes and improved conversion rates with offline browsing capabilities.",
icon: ShoppingBag,
examples: ["Product Catalogs", "Shopping Carts", "Wishlist", "Order Tracking"]
examples: [
"Product Catalogs",
"Shopping Carts",
"Wishlist",
"Order Tracking",
],
},
{
title: "Content Platforms",
description: "News, blogs, and media sites with offline access for improved user engagement.",
description:
"News, blogs, and media sites with offline access for improved user engagement.",
icon: Newspaper,
examples: ["News Sites", "Blogs", "Magazines", "Media Platforms"]
examples: ["News Sites", "Blogs", "Magazines", "Media Platforms"],
},
{
title: "Event & Ticketing",
description: "Seamless booking and information access with offline ticket storage and updates.",
description:
"Seamless booking and information access with offline ticket storage and updates.",
icon: Calendar,
examples: ["Event Booking", "Ticket Management", "Venue Information", "Schedule Updates"]
examples: [
"Event Booking",
"Ticket Management",
"Venue Information",
"Schedule Updates",
],
},
{
title: "Startups & MVPs",
description: "Rapid market entry with broad reach and cost-effective development approach.",
description:
"Rapid market entry with broad reach and cost-effective development approach.",
icon: Rocket,
examples: ["Prototype Testing", "Market Validation", "User Feedback", "Iterative Development"]
examples: [
"Prototype Testing",
"Market Validation",
"User Feedback",
"Iterative Development",
],
},
{
title: "Global Audience",
description: "Perfect for businesses serving areas with unreliable internet connectivity.",
description:
"Perfect for businesses serving areas with unreliable internet connectivity.",
icon: Globe,
examples: ["Emerging Markets", "Rural Areas", "Travel Apps", "International Services"]
examples: [
"Emerging Markets",
"Rural Areas",
"Travel Apps",
"International Services",
],
},
{
title: "Business Tools",
description: "Productivity apps and business solutions with offline functionality.",
description:
"Productivity apps and business solutions with offline functionality.",
icon: Briefcase,
examples: ["CRM Systems", "Project Management", "Inventory", "Time Tracking"]
}
examples: [
"CRM Systems",
"Project Management",
"Inventory",
"Time Tracking",
],
},
];
return (
@@ -526,7 +700,8 @@ const PWAUseCases = () => {
When a PWA is the Right Choice for Your Business
</h2>
<p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
Progressive Web Apps excel in scenarios where broad reach, cost-effectiveness, and offline capabilities are crucial.
Progressive Web Apps excel in scenarios where broad reach,
cost-effectiveness, and offline capabilities are crucial.
</p>
</motion.div>
@@ -561,10 +736,16 @@ const PWAUseCases = () => {
{useCase.description}
</p>
<div className="space-y-2">
<h4 className="text-sm font-medium text-white">Key Examples:</h4>
<h4 className="text-sm font-medium text-white">
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">
<Badge
key={example}
variant="secondary"
className="text-xs bg-accent/10 text-accent border-accent/20"
>
{example}
</Badge>
))}
@@ -584,21 +765,69 @@ const PWAUseCases = () => {
// PWA Tech Stack
const PWATechStack = () => {
const technologies = [
{ name: "React", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/react/react-original.svg", category: "Frontend" },
{ name: "Angular", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/angularjs/angularjs-original.svg", category: "Frontend" },
{ name: "Vue.js", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/vuejs/vuejs-original.svg", category: "Frontend" },
{ name: "JavaScript", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/javascript/javascript-original.svg", category: "Language" },
{ name: "TypeScript", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/typescript/typescript-original.svg", category: "Language" },
{ name: "HTML5", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/html5/html5-original.svg", category: "Markup" },
{ name: "CSS3", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/css3/css3-original.svg", category: "Styling" },
{ name: "Node.js", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nodejs/nodejs-original.svg", category: "Backend" }
{
name: "React",
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/react/react-original.svg",
category: "Frontend",
},
{
name: "Angular",
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/angularjs/angularjs-original.svg",
category: "Frontend",
},
{
name: "Vue.js",
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/vuejs/vuejs-original.svg",
category: "Frontend",
},
{
name: "JavaScript",
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/javascript/javascript-original.svg",
category: "Language",
},
{
name: "TypeScript",
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/typescript/typescript-original.svg",
category: "Language",
},
{
name: "HTML5",
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/html5/html5-original.svg",
category: "Markup",
},
{
name: "CSS3",
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/css3/css3-original.svg",
category: "Styling",
},
{
name: "Node.js",
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nodejs/nodejs-original.svg",
category: "Backend",
},
];
const pwaFeatures = [
{ name: "Service Workers", icon: Server, description: "Background processing and offline capabilities" },
{ name: "Web App Manifest", icon: Layout, description: "App-like appearance and behavior" },
{ name: "Lighthouse", icon: Zap, description: "PWA performance and quality auditing" },
{ name: "Push API", icon: Bell, description: "Real-time notifications and engagement" }
{
name: "Service Workers",
icon: Server,
description: "Background processing and offline capabilities",
},
{
name: "Web App Manifest",
icon: Layout,
description: "App-like appearance and behavior",
},
{
name: "Lighthouse",
icon: Zap,
description: "PWA performance and quality auditing",
},
{
name: "Push API",
icon: Bell,
description: "Real-time notifications and engagement",
},
];
return (
@@ -615,7 +844,8 @@ const PWATechStack = () => {
Modern Web Technologies for Powerful PWA Experiences
</h2>
<p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
We leverage cutting-edge web technologies and PWA-specific APIs to deliver exceptional user experiences.
We leverage cutting-edge web technologies and PWA-specific APIs to
deliver exceptional user experiences.
</p>
</motion.div>
@@ -627,7 +857,9 @@ const PWATechStack = () => {
viewport={{ once: true }}
className="mb-16"
>
<h3 className="text-2xl font-semibold text-foreground mb-8 text-center">Core Technologies</h3>
<h3 className="text-2xl font-semibold text-foreground mb-8 text-center">
Core Technologies
</h3>
<div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-8 gap-6">
{technologies.map((tech, index) => (
<motion.div
@@ -636,19 +868,32 @@ const PWATechStack = () => {
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5, delay: index * 0.1 }}
viewport={{ once: true }}
whileHover={{ y: -5, scale: 1.05 }}
whileHover={{
y: -5,
scale: 1.05,
transition: {
type: "spring",
damping: 10,
stiffness: 300,
mass: 0.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 p-6 text-center">
<Card className="bg-card/20 backdrop-blur-md border-accent/30 transition-all duration-300 shadow-xl rounded-2xl p-6 text-center">
<div className="w-12 h-12 mx-auto mb-4 flex items-center justify-center">
<ImageWithFallback
src={tech.logo}
alt={tech.name}
className="w-10 h-10 object-contain filter brightness-0 invert group-hover:brightness-100 group-hover:invert-0 transition-all duration-300"
className="w-10 h-10 object-contain filter brightness-100 invert-0 transition-all duration-300"
/>
</div>
<h4 className="font-semibold text-foreground text-sm mb-1">{tech.name}</h4>
<p className="text-xs text-muted-foreground">{tech.category}</p>
<h4 className="font-semibold text-foreground text-sm mb-1">
{tech.name}
</h4>
<p className="text-xs text-muted-foreground">
{tech.category}
</p>
</Card>
</motion.div>
))}
@@ -662,7 +907,9 @@ const PWATechStack = () => {
transition={{ duration: 0.8, delay: 0.4 }}
viewport={{ once: true }}
>
<h3 className="text-2xl font-semibold text-foreground mb-8 text-center">PWA-Specific Features</h3>
<h3 className="text-2xl font-semibold text-foreground mb-8 text-center">
PWA-Specific Features
</h3>
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
{pwaFeatures.map((feature, index) => {
const IconComponent = feature.icon;
@@ -680,8 +927,12 @@ const PWATechStack = () => {
<div className="w-12 h-12 bg-accent/20 rounded-lg flex items-center justify-center mx-auto mb-4">
<IconComponent className="w-6 h-6 text-accent" />
</div>
<h4 className="font-semibold text-foreground mb-2">{feature.name}</h4>
<p className="text-sm text-muted-foreground leading-relaxed">{feature.description}</p>
<h4 className="font-semibold text-foreground mb-2">
{feature.name}
</h4>
<p className="text-sm text-muted-foreground leading-relaxed">
{feature.description}
</p>
</Card>
</motion.div>
);
@@ -699,30 +950,36 @@ const PWACaseStudies = () => {
{
title: "eCommerce PWA Success",
client: "ShopFast",
description: "Increased conversion rates by 40% with offline browsing and instant loading capabilities",
image: "https://images.unsplash.com/photo-1472851294608-062f824d29cc?w=400&h=300&fit=crop&auto=format",
description:
"Increased conversion rates by 40% with offline browsing and instant loading capabilities",
image:
"https://images.unsplash.com/photo-1472851294608-062f824d29cc?w=400&h=300&fit=crop&auto=format",
results: "40% higher conversions",
gradient: "from-accent/20 to-accent/10",
features: "Offline cart, Push notifications, Fast loading"
features: "Offline cart, Push notifications, Fast loading",
},
{
title: "News Platform PWA",
client: "GlobalNews",
description: "Improved user engagement with offline reading and push notifications for breaking news",
image: "https://images.unsplash.com/photo-1504711434969-e33886168f5c?w=400&h=300&fit=crop&auto=format",
description:
"Improved user engagement with offline reading and push notifications for breaking news",
image:
"https://images.unsplash.com/photo-1504711434969-e33886168f5c?w=400&h=300&fit=crop&auto=format",
results: "60% more engagement",
gradient: "from-blue-500/20 to-purple-500/20",
features: "Offline articles, Breaking news alerts, Fast navigation"
features: "Offline articles, Breaking news alerts, Fast navigation",
},
{
title: "Event Ticketing PWA",
client: "TicketHub",
description: "Streamlined event booking process with offline ticket access and real-time updates",
image: "https://images.unsplash.com/photo-1492684223066-81342ee5ff30?w=400&h=300&fit=crop&auto=format",
description:
"Streamlined event booking process with offline ticket access and real-time updates",
image:
"https://images.unsplash.com/photo-1492684223066-81342ee5ff30?w=400&h=300&fit=crop&auto=format",
results: "25% faster booking",
gradient: "from-green-500/20 to-teal-500/20",
features: "Offline tickets, Real-time updates, Easy booking"
}
features: "Offline tickets, Real-time updates, Easy booking",
},
];
return (
@@ -739,7 +996,8 @@ const PWACaseStudies = () => {
Successful Progressive Web Apps by WDI
</h2>
<p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
Discover how our PWA solutions have transformed businesses across various industries.
Discover how our PWA solutions have transformed businesses across
various industries.
</p>
</motion.div>
@@ -771,7 +1029,10 @@ const PWACaseStudies = () => {
<div className="text-xs text-gray-400 mb-2 uppercase tracking-wider">
{study.client}
</div>
<Badge variant="secondary" className="text-xs bg-accent/20 text-accent border-accent/30">
<Badge
variant="secondary"
className="text-xs bg-accent/20 text-accent border-accent/30"
>
{study.results}
</Badge>
</div>
@@ -783,7 +1044,9 @@ const PWACaseStudies = () => {
</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-gray-700`}>
<div
className={`relative rounded-xl overflow-hidden bg-gradient-to-br ${study.gradient} p-4 border border-gray-700`}
>
<ImageWithFallback
src={study.image}
alt={study.title}
@@ -797,10 +1060,10 @@ const PWACaseStudies = () => {
{study.description}
</p>
<div className="space-y-2">
<h4 className="text-xs font-medium text-white uppercase tracking-wider">Key Features:</h4>
<p className="text-xs text-gray-400">
{study.features}
</p>
<h4 className="text-xs font-medium text-white uppercase tracking-wider">
Key Features:
</h4>
<p className="text-xs text-gray-400">{study.features}</p>
</div>
</div>
@@ -810,7 +1073,9 @@ const PWACaseStudies = () => {
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"
>
<span className="text-sm font-medium">VIEW CASE STUDY</span>
<span className="text-sm font-medium">
VIEW CASE STUDY
</span>
<ArrowRight className="w-4 h-4" />
</Button>
</div>
@@ -846,7 +1111,9 @@ const PWAInlineCTA = () => {
<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">
<Globe className="w-5 h-5 text-foreground" />
<span className="text-foreground text-base font-medium">PWA Power</span>
<span className="text-foreground text-base font-medium">
PWA Power
</span>
</div>
</div>
@@ -856,7 +1123,8 @@ const PWAInlineCTA = () => {
</h2>
<p className="text-xl text-muted-foreground leading-relaxed max-w-2xl mx-auto">
Unlock a broader audience and enhanced user engagement with a progressive web app that works everywhere.
Unlock a broader audience and enhanced user engagement with a
progressive web app that works everywhere.
</p>
<ShimmerButton className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl">
@@ -877,20 +1145,24 @@ const PWAFAQs = () => {
const faqs = [
{
question: "Are PWAs suitable for all types of apps?",
answer: "PWAs are ideal for content-heavy apps, eCommerce, news platforms, and business tools. They're perfect when you need broad reach and offline capabilities. However, for apps requiring intensive device integration (like camera apps with advanced features) or high-performance gaming, native apps might be better suited."
answer:
"PWAs are ideal for content-heavy apps, eCommerce, news platforms, and business tools. They're perfect when you need broad reach and offline capabilities. However, for apps requiring intensive device integration (like camera apps with advanced features) or high-performance gaming, native apps might be better suited.",
},
{
question: "How do PWAs compare to native apps in terms of features?",
answer: "PWAs offer many native-like features including offline functionality, push notifications, and home screen installation. While they can't access all device features that native apps can, they provide 80-90% of native functionality with significantly broader reach and lower development costs."
answer:
"PWAs offer many native-like features including offline functionality, push notifications, and home screen installation. While they can't access all device features that native apps can, they provide 80-90% of native functionality with significantly broader reach and lower development costs.",
},
{
question: "Do PWAs show up in app stores?",
answer: "Yes! PWAs can be submitted to app stores including Google Play Store and Microsoft Store. Apple's App Store also accepts PWAs with some additional requirements. This gives you the best of both worlds - web distribution and app store presence."
answer:
"Yes! PWAs can be submitted to app stores including Google Play Store and Microsoft Store. Apple's App Store also accepts PWAs with some additional requirements. This gives you the best of both worlds - web distribution and app store presence.",
},
{
question: "What is the maintenance for a PWA?",
answer: "PWA maintenance is generally simpler than native apps since you maintain one codebase. Updates are pushed directly to users like web updates, but you'll need to manage service worker updates, cache strategies, and ensure compatibility across browsers and devices."
}
answer:
"PWA maintenance is generally simpler than native apps since you maintain one codebase. Updates are pushed directly to users like web updates, but you'll need to manage service worker updates, cache strategies, and ensure compatibility across browsers and devices.",
},
];
return (
@@ -926,7 +1198,9 @@ const PWAFAQs = () => {
className="bg-card/20 backdrop-blur-md rounded-2xl border border-white/10 px-10 shadow-lg"
>
<AccordionTrigger className="text-left hover:no-underline py-10 text-xl">
<span className="font-semibold text-foreground">{faq.question}</span>
<span className="font-semibold text-foreground">
{faq.question}
</span>
</AccordionTrigger>
<AccordionContent className="text-muted-foreground pb-10 text-lg leading-relaxed">
{faq.answer}
@@ -962,7 +1236,9 @@ const PWAFinalCTA = () => {
<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">
<Globe className="w-5 h-5 text-white" />
<span className="text-white text-base font-medium">Next Generation Web</span>
<span className="text-white text-base font-medium">
Next Generation Web
</span>
</div>
</div>
</motion.div>
@@ -979,7 +1255,8 @@ const PWAFinalCTA = () => {
viewport={{ once: true }}
className="text-xl text-gray-300 mb-12 max-w-2xl mx-auto leading-relaxed"
>
WDI helps you harness the speed, reliability, and engagement of PWAs for your audience.
WDI helps you harness the speed, reliability, and engagement of PWAs
for your audience.
</motion.p>
<motion.div

BIN
src/images/android-vector.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 214 KiB