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

fix all execpt iosapp

Browse Source
This commit is contained in:
priyanshuvish
2025-07-17 19:47:38 +05:30
parent 04dcfa19c3
commit 1e5d7dca57
19 changed files with 1098 additions and 322 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
pages/APIBackendDevelopment.tsx
View File

@@ -39,6 +39,7 @@ 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 iotDeviceImage from "../src/images/iot-device.webp";
// API & Backend Development Hero Section
const APIHeroWithCTA = () => {
@@ -941,7 +942,7 @@ const APICaseStudies = () => {
title: "IoT Device Management Platform",
client: "SmartTech Solutions",
description: "Backend infrastructure managing 500K+ connected devices with real-time data processing, device monitoring, and predictive analytics capabilities",
image: "https://images.unsplash.com/photo-1518709268805-4e9042af2176?w=400&h=300&fit=crop&auto=format",
image: iotDeviceImage,
results: "500K+ devices managed seamlessly",
gradient: "from-purple-500/20 to-pink-500/20",
features: "IoT Integration, Real-time Data, Device Management"

3
pages/AdminPanelsDashboards.tsx
View File

@@ -39,6 +39,7 @@ 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 healthcareImage from "../src/images/healthcare.webp";
// Admin Panels & Dashboards Hero Section
const AdminHeroWithCTA = () => {
@@ -803,7 +804,7 @@ const AdminCaseStudies = () => {
title: "Healthcare Practice Management Dashboard",
client: "MedCare Solutions",
description: "Comprehensive admin panel for managing patient records, appointments, billing, and compliance reporting with HIPAA-compliant security features",
image: "https://images.unsplash.com/photo-1576091160399-112ba8d25d1f?w=400&h=300&fit=crop&auto=format",
image: healthcareImage,
results: "75% reduction in admin time",
gradient: "from-blue-500/20 to-cyan-500/20",
features: "Patient Management, Appointment Scheduling, Billing Integration"

6
pages/CustomWebAppDevelopment.tsx
View File

@@ -38,6 +38,8 @@ 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 patientManagementPortal from "../src/images/patient-management-portal.webp";
import awsLogo from "../src/images/aws-logo.png";
// Custom Web App Development Hero Section
const CustomWebAppHeroWithCTA = () => {
@@ -559,7 +561,7 @@ const WebAppTechStack = () => {
{ name: "Node.js", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nodejs/nodejs-original.svg", category: "Backend" },
{ name: "Python", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/python/python-original.svg", category: "Backend" },
{ name: "Java", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/java/java-original.svg", category: "Backend" },
{ name: "AWS", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/amazonwebservices/amazonwebservices-original.svg", category: "Cloud" },
{ name: "AWS", logo: awsLogo, category: "Cloud" },
{ name: "Azure", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/azure/azure-original.svg", category: "Cloud" },
{ name: "PostgreSQL", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/postgresql/postgresql-original.svg", category: "Database" },
{ name: "MongoDB", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/mongodb/mongodb-original.svg", category: "Database" }
@@ -675,7 +677,7 @@ const WebAppCaseStudies = () => {
title: "Patient Management Portal",
client: "HealthFirst Clinics",
description: "Secure web application for patient records management, appointment scheduling, and telemedicine integration with HIPAA compliance",
image: "https://images.unsplash.com/photo-1576091160399-112ba8d25d1f?w=400&h=300&fit=crop&auto=format",
image: patientManagementPortal,
results: "60% reduction in admin tasks",
gradient: "from-green-500/20 to-emerald-500/20",
features: "HIPAA compliance, Telemedicine, Automated scheduling"

74
pages/DesignExperience.tsx
View File

@@ -21,18 +21,19 @@ import {
Github, Slack, Chrome, Zap as ZapIcon, Video, MessageCircle, Brain,
Cog, Settings, Sparkles, Handshake, Award, UserPlus, MousePointer, Smile
} from "lucide-react";
import UIUXDesignAnimation from "@/components/UIUXDesignAnimation";
// Enhanced Hero Section
const HeroWithCTA = () => {
return (
<section className="relative py-20 overflow-hidden bg-black">
<div className="container mx-auto px-6 lg:px-8">
<div className="grid lg:grid-cols-2 gap-16 items-center min-h-[90vh]">
<div className="container mx-auto px-6 lg:px-8 max-w-7xl">
<div className="grid lg:grid-cols-2 gap-8 lg:gap-16 items-center min-h-[90vh]">
<motion.div
initial={{ opacity: 0, x: -50 }}
animate={{ opacity: 1, x: 0 }}
transition={{ duration: 0.8 }}
className="space-y-8"
className="space-y-8 z-10"
>
{/* Design & Experience Label */}
<motion.div
@@ -40,7 +41,10 @@ const HeroWithCTA = () => {
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6 }}
>
<span className="text-white/70 text-sm font-medium">Design & Experience</span>
<div className="inline-flex items-center gap-2 px-4 py-2 bg-gradient-to-r from-[#E5195E]/20 to-purple-500/20 border border-[#E5195E]/30 rounded-full">
<PenTool className="w-4 h-4 text-[#E5195E]" />
<span className="text-white/90 text-sm font-medium">Design & Experience</span>
</div>
</motion.div>
{/* Main Heading */}
@@ -52,68 +56,62 @@ const HeroWithCTA = () => {
</h1>
<p className="text-lg text-gray-300 leading-relaxed max-w-lg">
Create engaging, intuitive user experiences that drive conversion and delight users through research-driven design.
Create engaging, intuitive user experiences that drive conversion and delight users through research-driven design and modern design thinking.
</p>
</div>
{/* BULLET POINTS REMOVED - Content flows directly to CTAs */}
{/* CTAs */}
{/* CTAs - STANDARDIZED BUTTON HEIGHTS WITH IMPROVED SPACING */}
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, x: 0 }}
transition={{ duration: 0.8, delay: 0.3 }}
className="flex flex-col sm:flex-row gap-4"
transition={{ duration: 0.8, delay: 0.2 }}
className="flex flex-col sm:flex-row gap-4 pt-4"
>
<ShimmerButton className="text-lg px-8 py-4" onClick={() => navigateTo('/contact/schedule-a-discovery-call')}>
<ShimmerButton
className="h-14 px-8 text-lg font-medium rounded-lg shadow-lg hover:shadow-xl transition-all duration-300"
onClick={() => navigateTo('/start-a-project')}
>
<div className="inline-flex items-center gap-2">
<Calendar className="w-4 h-4 flex-shrink-0" />
<Calendar className="w-5 h-5 flex-shrink-0" />
<span>Design Consultation</span>
</div>
</ShimmerButton>
<Button
variant="secondary"
size="lg"
className="text-lg px-8 py-4"
className="h-14 px-8 text-lg font-medium rounded-lg bg-white/10 hover:bg-white/20 text-white border-white/20 hover:border-white/30 shadow-lg hover:shadow-xl transition-all duration-300"
onClick={() => navigateTo('/case-studies')}
>
<Eye className="w-4 h-4 flex-shrink-0" />
<Eye className="w-5 h-5 flex-shrink-0" />
<span>View Design Portfolio</span>
</Button>
</motion.div>
</motion.div>
{/* Right side with stats */}
{/* Right side with Custom UI/UX Design Animation - METRICS REMOVED, EXPANDED CONTAINER */}
<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"
className="relative flex items-center justify-center order-first lg:order-last"
>
<motion.div
initial={{ opacity: 0, y: 30 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.6 }}
className="grid grid-cols-2 gap-8 text-center"
>
<div className="space-y-2 flex flex-col items-center">
<div className="text-3xl lg:text-4xl font-bold text-white">300+</div>
<div className="text-sm text-gray-400 leading-tight">Design Projects</div>
{/* Design Animation Container - EXPANDED TO FILL SPACE PREVIOUSLY OCCUPIED BY METRICS */}
<div className="w-full h-[500px] md:h-[600px] lg:h-[700px] max-w-full relative overflow-hidden">
{/* 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-[#E5195E]/20 to-purple-500/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-pink-500/20 to-violet-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-blue-500/20 to-cyan-500/20 rounded-full blur-2xl animate-pulse delay-2000"></div>
</div>
<div className="space-y-2 flex flex-col items-center">
<div className="text-3xl lg:text-4xl font-bold text-white">85%</div>
<div className="text-sm text-gray-400 leading-tight">Conversion Increase</div>
{/* Custom UI/UX Design Animation - CENTERED AND EXPANDED */}
<div className="absolute inset-0 flex items-center justify-center">
<div className="w-full h-full scale-105 transform-gpu">
<UIUXDesignAnimation />
</div>
</div>
<div className="space-y-2 flex flex-col items-center">
<div className="text-3xl lg:text-4xl font-bold text-white">4.9/5</div>
<div className="text-sm text-gray-400 leading-tight">User Satisfaction</div>
</div>
<div className="space-y-2 flex flex-col items-center">
<div className="text-3xl lg:text-4xl font-bold text-white">70%</div>
<div className="text-sm text-gray-400 leading-tight">Faster User Tasks</div>
</div>
</motion.div>
</div>
</motion.div>
</div>
</div>

3
pages/EcommercePlatforms.tsx
View File

@@ -41,6 +41,7 @@ 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 multiVendorImage from "../src/images/multifood.webp";
// eCommerce Platforms Hero Section
const EcommerceHeroWithCTA = () => {
@@ -827,7 +828,7 @@ const EcommerceCaseStudies = () => {
title: "Multi-Vendor Food Marketplace",
client: "LocalEats",
description: "Food delivery platform connecting local restaurants with customers, featuring real-time tracking, multi-payment options, and vendor management",
image: "https://images.unsplash.com/photo-1565299624946-b28f40a0ca4b?w=400&h=300&fit=crop&auto=format",
image: multiVendorImage,
results: "500+ vendors onboarded",
gradient: "from-green-500/20 to-emerald-500/20",
features: "Real-time Tracking, Multi-vendor, Vendor Management"

3
pages/EnterpriseSoftwareSolutions.tsx
View File

@@ -40,6 +40,7 @@ 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 awsLogo from "../src/images/aws-logo.png";
// Enterprise Software Solutions Hero Section
const EnterpriseHeroWithCTA = () => {
@@ -713,7 +714,7 @@ const EnterpriseTechStack = () => {
];
const cloudPlatforms = [
{ name: "AWS", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/amazonwebservices/amazonwebservices-original.svg", category: "Cloud" },
{ name: "AWS", logo: awsLogo, category: "Cloud" },
{ name: "Azure", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/azure/azure-original.svg", category: "Cloud" },
{ name: "Google Cloud", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/googlecloud/googlecloud-original.svg", category: "Cloud" }
];

4
pages/ProductModernization.tsx
View File

@@ -37,6 +37,8 @@ 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 awsLogo from "../src/images/aws-logo.png";
// Product Modernization Hero Section
const ModernizationHeroWithCTA = () => {
@@ -671,7 +673,7 @@ const ModernizationTechStack = () => {
];
const cloudPlatforms = [
{ name: "AWS", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/amazonwebservices/amazonwebservices-original.svg", category: "Cloud Platform" },
{ name: "AWS", logo: awsLogo, category: "Cloud Platform" },
{ name: "Azure", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/azure/azure-original.svg", category: "Cloud Platform" },
{ name: "Google Cloud", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/googlecloud/googlecloud-original.svg", category: "Cloud Platform" }
];

4
pages/SystemArchitectureDevOps.tsx
View File

@@ -39,6 +39,8 @@ 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 awsLogo from "../src/images/aws-logo.png";
// System Architecture & DevOps Hero Section
const DevOpsHeroWithCTA = () => {
@@ -702,7 +704,7 @@ const DevOpsServices = () => {
// DevOps Tech Stack
const DevOpsTechStack = () => {
const cloudPlatforms = [
{ name: "AWS", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/amazonwebservices/amazonwebservices-original.svg", category: "Cloud Platform" },
{ name: "AWS", logo: awsLogo, category: "Cloud Platform" },
{ name: "Azure", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/azure/azure-original.svg", category: "Cloud Platform" },
{ name: "Google Cloud", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/googlecloud/googlecloud-original.svg", category: "Cloud Platform" }
];

568
pages/WearableDeviceDevelopment.tsx
View File

File diff suppressed because it is too large Load Diff

310
pages/WebCloudServices.tsx
View File

@@ -11,16 +11,63 @@ import { Badge } from "../components/ui/badge";
import { Card, CardContent } from "../components/ui/card";
import { GridPattern } from "../components/GridPattern";
import { navigateTo } from "../App";
import {
Globe, Cloud, Server, Database, Shield, Zap, Users, Star,
ArrowRight, ChevronRight, Clock, TrendingUp, Code, Layers,
Target, Layout, Rocket, Monitor, Lock, RefreshCcw, ShieldCheck,
MessageSquare, Heart, CheckCircle, Lightbulb, Coffee,
Download, Calendar, Camera, Music, Gamepad2,
CreditCard, Bell, Mail, Search, Home, MapPin,
Github, Slack, Figma, Chrome, Zap as ZapIcon, Video, MessageCircle, Brain,
Cog, Settings, Sparkles, Handshake, Eye, Award, UserPlus, Cpu, ShoppingCart
import {
Globe,
Cloud,
Server,
Database,
Shield,
Zap,
Users,
Star,
ArrowRight,
ChevronRight,
Clock,
TrendingUp,
Code,
Layers,
Target,
Layout,
Rocket,
Monitor,
Lock,
RefreshCcw,
ShieldCheck,
MessageSquare,
Heart,
CheckCircle,
Lightbulb,
Coffee,
Download,
Calendar,
Camera,
Music,
Gamepad2,
CreditCard,
Bell,
Mail,
Search,
Home,
MapPin,
Github,
Slack,
Figma,
Chrome,
Zap as ZapIcon,
Video,
MessageCircle,
Brain,
Cog,
Settings,
Sparkles,
Handshake,
Eye,
Award,
UserPlus,
Cpu,
ShoppingCart,
} from "lucide-react";
import heroMockupImage from "../src/images/webandcloud-hero.webp";
// Enhanced Hero Section
const HeroWithCTA = () => {
@@ -40,7 +87,9 @@ const HeroWithCTA = () => {
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6 }}
>
<span className="text-white/70 text-sm font-medium">Web & Cloud Solutions</span>
<span className="text-white/70 text-sm font-medium">
Web & Cloud Solutions
</span>
</motion.div>
{/* Main Heading */}
@@ -50,12 +99,13 @@ const HeroWithCTA = () => {
<span className="text-[#E5195E]">Cloud Solutions</span>
<span className="text-white"> for Modern Business</span>
</h1>
<p className="text-lg text-gray-300 leading-relaxed max-w-lg">
Build high-performance web applications and robust cloud infrastructure that scales with your business growth.
Build high-performance web applications and robust cloud
infrastructure that scales with your business growth.
</p>
</div>
{/* CTAs */}
<motion.div
initial={{ opacity: 0, y: 20 }}
@@ -63,7 +113,10 @@ const HeroWithCTA = () => {
transition={{ duration: 0.8, delay: 0.3 }}
className="flex flex-col sm:flex-row gap-4"
>
<ShimmerButton className="text-lg px-8 py-4" onClick={() => navigateTo('/contact/schedule-a-discovery-call')}>
<ShimmerButton
className="text-lg px-8 py-4"
onClick={() => navigateTo("/contact/schedule-a-discovery-call")}
>
<div className="inline-flex items-center gap-2">
<Calendar className="w-4 h-4 flex-shrink-0" />
<span>Schedule Cloud Consultation</span>
@@ -71,49 +124,56 @@ const HeroWithCTA = () => {
</ShimmerButton>
<Button
variant="secondary"
size="lg"
className="text-lg px-8 py-4"
onClick={() => navigateTo('/case-studies')}
className="h-14 px-8 text-lg font-medium rounded-lg bg-white/10 hover:bg-white/20 text-white border-white/20 hover:border-white/30 shadow-lg hover:shadow-xl transition-all duration-300"
onClick={() => navigateTo("/case-studies")}
>
<Eye className="w-4 h-4 flex-shrink-0" />
<Eye className="w-5 h-5 flex-shrink-0" />
<span>View Web Projects</span>
</Button>
</motion.div>
</motion.div>
{/* Right side with stats */}
<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"
className="relative flex items-center justify-center order-first lg:order-last"
>
<motion.div
initial={{ opacity: 0, y: 30 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.6 }}
className="grid grid-cols-2 gap-8 text-center"
{/* Image Container - FOLLOWING ALL COMPREHENSIVE CSS REQUIREMENTS */}
<div
className="relative w-full h-[450px] sm:h-[550px] md:h-[650px] lg:h-[700px] max-w-full"
style={{
position: "relative",
overflow: "hidden",
}}
>
<div className="space-y-2 flex flex-col items-center">
<div className="text-3xl lg:text-4xl font-bold text-white">200+</div>
<div className="text-sm text-gray-400 leading-tight">Web Apps Built</div>
</div>
<div className="space-y-2 flex flex-col items-center">
<div className="text-3xl lg:text-4xl font-bold text-white">99.9%</div>
<div className="text-sm text-gray-400 leading-tight">Uptime Achieved</div>
</div>
<div className="space-y-2 flex flex-col items-center">
<div className="text-3xl lg:text-4xl font-bold text-white">15+</div>
<div className="text-sm text-gray-400 leading-tight">Cloud Platforms</div>
</div>
<div className="space-y-2 flex flex-col items-center">
<div className="text-3xl lg:text-4xl font-bold text-white">50%</div>
<div className="text-sm text-gray-400 leading-tight">Cost Reduction</div>
</div>
</motion.div>
{/* Hero Image with comprehensive CSS styling */}
<img
src={heroMockupImage}
alt="Mobile App Development Services - Fashion, Social, and Fitness Apps"
className="block transition-all duration-300 hover:scale-101"
style={{
width: "100%",
height: "100%",
objectFit: "contain",
objectPosition: "center",
maxWidth: "100%",
display: "block",
}}
/>
{/* Alternative background method for enhanced browser support */}
<div
className="absolute inset-0 opacity-0 pointer-events-none"
style={{
backgroundImage: `url(${heroMockupImage})`,
backgroundSize: "contain",
backgroundPosition: "center",
backgroundRepeat: "no-repeat",
}}
/>
</div>
</motion.div>
</div>
</div>
@@ -129,7 +189,7 @@ const HorizontalTagScroller = () => {
{ name: "Node.js & Python", icon: Server, color: "text-purple-400" },
{ name: "Docker & Kubernetes", icon: Layers, color: "text-cyan-400" },
{ name: "MongoDB & PostgreSQL", icon: Database, color: "text-orange-400" },
{ name: "GraphQL & REST APIs", icon: Zap, color: "text-yellow-400" }
{ name: "GraphQL & REST APIs", icon: Zap, color: "text-yellow-400" },
];
return (
@@ -148,10 +208,11 @@ const HorizontalTagScroller = () => {
<span className="text-foreground"> We Master</span>
</h2>
<p className="text-2xl text-muted-foreground max-w-4xl mx-auto leading-relaxed">
Modern web and cloud technologies that power enterprise-grade solutions.
Modern web and cloud technologies that power enterprise-grade
solutions.
</p>
</motion.div>
<motion.div
initial={{ opacity: 0, y: 40 }}
whileInView={{ opacity: 1, y: 0 }}
@@ -161,7 +222,7 @@ const HorizontalTagScroller = () => {
>
<div className="absolute left-0 top-0 bottom-0 w-20 bg-gradient-to-r from-card to-transparent z-10 pointer-events-none"></div>
<div className="absolute right-0 top-0 bottom-0 w-20 bg-gradient-to-l from-card to-transparent z-10 pointer-events-none"></div>
<div className="flex animate-marquee hover:animate-marquee-paused">
{/* First set */}
{technologies.map((tech, index) => {
@@ -177,7 +238,9 @@ const HorizontalTagScroller = () => {
>
<div className="bg-card/20 backdrop-blur-md rounded-2xl border border-white/10 px-8 py-6 hover:border-accent/30 transition-all duration-300 cursor-pointer shadow-lg hover:shadow-xl min-w-fit group-hover:scale-105 group-hover:-translate-y-1">
<div className="flex items-center gap-4">
<div className={`w-8 h-8 flex items-center justify-center ${tech.color}`}>
<div
className={`w-8 h-8 flex items-center justify-center ${tech.color}`}
>
<IconComponent className="w-6 h-6" />
</div>
<span className="text-xl font-medium text-foreground whitespace-nowrap">
@@ -188,7 +251,7 @@ const HorizontalTagScroller = () => {
</motion.div>
);
})}
{/* Second and third sets for seamless loop */}
{[...technologies, ...technologies].map((tech, index) => {
const IconComponent = tech.icon;
@@ -197,13 +260,18 @@ const HorizontalTagScroller = () => {
key={`loop-${tech.name}-${index}`}
initial={{ opacity: 0, scale: 0.8 }}
whileInView={{ opacity: 1, scale: 1 }}
transition={{ duration: 0.5, delay: (index + technologies.length) * 0.1 }}
transition={{
duration: 0.5,
delay: (index + technologies.length) * 0.1,
}}
viewport={{ once: true }}
className="group flex-shrink-0 mx-3"
>
<div className="bg-card/20 backdrop-blur-md rounded-2xl border border-white/10 px-8 py-6 hover:border-accent/30 transition-all duration-300 cursor-pointer shadow-lg hover:shadow-xl min-w-fit group-hover:scale-105 group-hover:-translate-y-1">
<div className="flex items-center gap-4">
<div className={`w-8 h-8 flex items-center justify-center ${tech.color}`}>
<div
className={`w-8 h-8 flex items-center justify-center ${tech.color}`}
>
<IconComponent className="w-6 h-6" />
</div>
<span className="text-xl font-medium text-foreground whitespace-nowrap">
@@ -227,28 +295,28 @@ const SideBySideContentWithIcons = () => {
{
id: "scalable",
title: "Scalable Architecture",
icon: TrendingUp
icon: TrendingUp,
},
{
id: "security",
id: "security",
title: "Enterprise Security",
icon: Shield
icon: Shield,
},
{
id: "performance",
title: "High Performance",
icon: Zap
icon: Zap,
},
{
id: "monitoring",
title: "24/7 Monitoring",
icon: Eye
icon: Eye,
},
{
id: "devops",
title: "DevOps Excellence",
icon: Settings
}
icon: Settings,
},
];
return (
@@ -266,7 +334,7 @@ const SideBySideContentWithIcons = () => {
<span className="text-[#E5195E]">WDI</span>
<span className="text-white"> for Web & Cloud</span>
</h2>
<p className="text-2xl text-gray-300 leading-relaxed">
Enterprise-grade solutions with proven reliability.
</p>
@@ -297,7 +365,7 @@ const SideBySideContentWithIcons = () => {
<div className="mb-6">
<IconComponent className="w-10 h-10 text-accent mx-auto" />
</div>
<h3 className="text-lg font-semibold text-white leading-tight">
{advantage.title}
</h3>
@@ -318,39 +386,42 @@ const TabbedServiceDisplay = () => {
{
title: "Custom Web Application Development",
icon: Globe,
description: "Build scalable, secure web applications with modern frameworks.",
link: "/services/custom-web-app-development"
description:
"Build scalable, secure web applications with modern frameworks.",
link: "/services/custom-web-app-development",
},
{
title: "SaaS Product Engineering",
title: "SaaS Product Engineering",
icon: Cloud,
description: "End-to-end SaaS development with multi-tenant architecture.",
link: "/services/saas-product-engineering"
description:
"End-to-end SaaS development with multi-tenant architecture.",
link: "/services/saas-product-engineering",
},
{
title: "E-commerce Platforms",
icon: ShoppingCart,
description: "High-converting online stores with seamless payment integration.",
link: "/services/ecommerce-platforms"
description:
"High-converting online stores with seamless payment integration.",
link: "/services/ecommerce-platforms",
},
{
title: "Admin Panels & Dashboards",
icon: Monitor,
description: "Intuitive admin interfaces with real-time analytics.",
link: "/services/admin-panels-dashboards"
link: "/services/admin-panels-dashboards",
},
{
title: "API & Backend Development",
icon: Server,
description: "Robust APIs and scalable backend infrastructure.",
link: "/services/api-backend-development"
link: "/services/api-backend-development",
},
{
title: "System Architecture & DevOps",
icon: Layers,
description: "Cloud-native architecture with automated deployment.",
link: "/services/system-architecture-devops"
}
link: "/services/system-architecture-devops",
},
];
return (
@@ -367,10 +438,11 @@ const TabbedServiceDisplay = () => {
Web & Cloud Service Areas
</h2>
<p className="text-lg text-gray-300 max-w-4xl mx-auto leading-relaxed">
Comprehensive web development and cloud solutions designed for scalability and performance.
Comprehensive web development and cloud solutions designed for
scalability and performance.
</p>
</motion.div>
<motion.div
initial={{ opacity: 0, y: 40 }}
whileInView={{ opacity: 1, y: 0 }}
@@ -396,7 +468,7 @@ const TabbedServiceDisplay = () => {
<div className="w-12 h-12 bg-accent/20 rounded-lg flex items-center justify-center">
<IconComponent className="w-6 h-6 text-accent" />
</div>
<div>
<h3 className="text-xl font-semibold text-white mb-4">
{service.title}
@@ -440,37 +512,43 @@ const InlineCTA = () => {
<div className="bg-gradient-to-r from-[#E5195E]/20 to-purple-500/20 border border-[#E5195E]/30 rounded-full px-6 py-3">
<div className="flex items-center gap-2">
<Rocket className="w-4 h-4 text-[#E5195E]" />
<span className="text-[#E5195E] text-sm font-medium">Ready to Launch?</span>
<span className="text-[#E5195E] text-sm font-medium">
Ready to Launch?
</span>
</div>
</div>
</div>
{/* Main Heading */}
<h2 className="text-4xl lg:text-5xl font-semibold leading-tight">
<span className="text-foreground">Build Scalable Web Solutions with </span>
<span className="text-foreground">
Build Scalable Web Solutions with{" "}
</span>
<span className="text-[#E5195E]">Cloud-First Architecture</span>
</h2>
{/* Subtitle */}
<p className="text-xl text-muted-foreground leading-relaxed max-w-2xl mx-auto">
Deploy robust, secure, and high-performance applications that scale with your business growth.
Deploy robust, secure, and high-performance applications that
scale with your business growth.
</p>
{/* CTA Button */}
<div className="flex flex-col items-center gap-4">
<ShimmerButton
<ShimmerButton
className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl bg-[#E5195E] hover:bg-[#E5195E]/90"
onClick={() => navigateTo('/contact/schedule-a-discovery-call')}
onClick={() => navigateTo("/contact/schedule-a-discovery-call")}
>
<div className="inline-flex items-center gap-3">
<Cloud className="w-6 h-6 flex-shrink-0" />
<span>Start Your Cloud Project</span>
</div>
</ShimmerButton>
{/* Small benefit text */}
<p className="text-sm text-muted-foreground">
Free architecture review • Scalability assessment • Performance optimization
Free architecture review • Scalability assessment • Performance
optimization
</p>
</div>
</motion.div>
@@ -489,15 +567,15 @@ const HireDevelopersSection = () => {
skills: ["React", "Node.js", "Python", "TypeScript"],
iconBg: "bg-blue-500",
iconColor: "text-white",
link: "/hire-talent/full-stack-developers"
link: "/hire-talent/full-stack-developers",
},
{
title: "Cloud Architects",
title: "Cloud Architects",
icon: Cloud,
skills: ["AWS", "Azure", "GCP", "Kubernetes"],
iconBg: "bg-green-500",
iconColor: "text-white",
link: "/hire-talent/full-stack-developers"
link: "/hire-talent/full-stack-developers",
},
{
title: "DevOps Engineers",
@@ -505,7 +583,7 @@ const HireDevelopersSection = () => {
skills: ["Docker", "Jenkins", "Terraform", "CI/CD"],
iconBg: "bg-purple-500",
iconColor: "text-white",
link: "/hire-talent/full-stack-developers"
link: "/hire-talent/full-stack-developers",
},
{
title: "Backend Developers",
@@ -513,8 +591,8 @@ const HireDevelopersSection = () => {
skills: ["API Design", "Microservices", "Databases"],
iconBg: "bg-orange-500",
iconColor: "text-white",
link: "/hire-talent/backend-developers"
}
link: "/hire-talent/backend-developers",
},
];
return (
@@ -532,10 +610,11 @@ const HireDevelopersSection = () => {
<span className="text-[#E5195E]">Cloud Specialists</span>
</h2>
<p className="text-2xl text-muted-foreground max-w-4xl mx-auto leading-relaxed">
Get access to expert developers who specialize in modern web and cloud technologies.
Get access to expert developers who specialize in modern web and
cloud technologies.
</p>
</motion.div>
<motion.div
initial={{ opacity: 0, y: 40 }}
whileInView={{ opacity: 1, y: 0 }}
@@ -560,8 +639,12 @@ const HireDevelopersSection = () => {
{/* Header */}
<div className="p-8 pb-6">
<div className="flex items-start gap-4 mb-6">
<div className={`w-12 h-12 ${specialist.iconBg} rounded-xl flex items-center justify-center backdrop-blur-sm`}>
<IconComponent className={`w-6 h-6 ${specialist.iconColor}`} />
<div
className={`w-12 h-12 ${specialist.iconBg} rounded-xl flex items-center justify-center backdrop-blur-sm`}
>
<IconComponent
className={`w-6 h-6 ${specialist.iconColor}`}
/>
</div>
<div className="flex-1">
<div className="text-xs text-muted-foreground mb-2 uppercase tracking-wider">
@@ -569,26 +652,30 @@ const HireDevelopersSection = () => {
</div>
</div>
</div>
<h3 className="text-xl font-semibold text-foreground mb-4 leading-tight">
{specialist.title}
</h3>
</div>
{/* Skills */}
<div className="px-8 pb-6 flex-1">
<div className="flex flex-wrap gap-2">
{specialist.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>
))}
</div>
</div>
{/* CTA */}
<div className="p-8 pt-0 mt-auto space-y-3">
<ShimmerButton
<ShimmerButton
className="w-full py-3 text-sm rounded-xl shadow-lg hover:shadow-xl"
onClick={() => navigateTo(specialist.link)}
>
@@ -613,24 +700,29 @@ const HireDevelopersSection = () => {
const webCloudFAQs = [
{
question: "What web technologies do you specialize in?",
answer: "We specialize in modern web technologies including React, Next.js, Node.js, Python, TypeScript, and various cloud platforms like AWS, Azure, and Google Cloud. Our team stays current with the latest frameworks and best practices."
answer:
"We specialize in modern web technologies including React, Next.js, Node.js, Python, TypeScript, and various cloud platforms like AWS, Azure, and Google Cloud. Our team stays current with the latest frameworks and best practices.",
},
{
question: "How do you ensure web application security?",
answer: "We implement security best practices including secure coding standards, regular security audits, SSL certificates, data encryption, authentication systems, and compliance with industry standards like GDPR and HIPAA."
answer:
"We implement security best practices including secure coding standards, regular security audits, SSL certificates, data encryption, authentication systems, and compliance with industry standards like GDPR and HIPAA.",
},
{
question: "Can you migrate our existing application to the cloud?",
answer: "Yes, we provide comprehensive cloud migration services. We assess your current infrastructure, create a migration strategy, and execute the transition while minimizing downtime and ensuring data integrity."
answer:
"Yes, we provide comprehensive cloud migration services. We assess your current infrastructure, create a migration strategy, and execute the transition while minimizing downtime and ensuring data integrity.",
},
{
question: "What is your approach to scalable architecture?",
answer: "We design applications with scalability in mind from the start, using microservices architecture, containerization, load balancing, and auto-scaling features. This ensures your application can handle growth efficiently."
answer:
"We design applications with scalability in mind from the start, using microservices architecture, containerization, load balancing, and auto-scaling features. This ensures your application can handle growth efficiently.",
},
{
question: "Do you provide ongoing maintenance and support?",
answer: "Yes, we offer comprehensive maintenance packages including regular updates, security patches, performance monitoring, backup management, and 24/7 technical support to keep your applications running smoothly."
}
answer:
"Yes, we offer comprehensive maintenance packages including regular updates, security patches, performance monitoring, backup management, and 24/7 technical support to keep your applications running smoothly.",
},
];
export function WebCloudServices() {
@@ -644,7 +736,7 @@ export function WebCloudServices() {
<ProcessSection />
<InlineCTA />
<HireDevelopersSection />
<FAQSection
<FAQSection
title="Web & Cloud Questions"
subtitle="Get answers to common questions about our web development and cloud services."
faqs={webCloudFAQs}
@@ -652,4 +744,4 @@ export function WebCloudServices() {
<Footer />
</div>
);
}
}

106
pages/iOSAppDevelopment.tsx
View File

@@ -5,7 +5,7 @@ import { Navigation } from "../components/Navigation";
import { Badge } from "../components/ui/badge";
import { Card, CardContent } from "../components/ui/card";
import { ShimmerButton } from "../components/ui/shimmer-button";
import ranoutofImage from "../src/images/ranoutof.webp";
import ranoutofImage from "../src/images/ranoutof.webp";
import seezunImage from "../src/images/seezun.webp";
import wokaImage from "../src/images/woka.webp";
@@ -20,6 +20,7 @@ import {
ArrowRight,
Brush,
Bug,
Calendar,
CheckCircle,
Code,
DollarSign,
@@ -65,7 +66,9 @@ const IOSHeroWithCTA = () => {
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6 }}
>
<span className="text-white/70 text-sm font-medium">iOS App Development</span>
<span className="text-white/70 text-sm font-medium">
iOS App Development
</span>
</motion.div>
{/* Main Heading */}
@@ -73,12 +76,13 @@ const IOSHeroWithCTA = () => {
<h1 className="text-4xl md:text-5xl lg:text-6xl font-semibold text-white leading-tight">
Expert iOS App Development Services
</h1>
<p className="text-lg text-gray-300 leading-relaxed max-w-lg">
Crafting intuitive, high-performance iPhone and iPad applications that define user experience and drive engagement.
Crafting intuitive, high-performance iPhone and iPad
applications that define user experience and drive engagement.
</p>
</div>
{/* CTAs */}
<motion.div
initial={{ opacity: 0, y: 20 }}
@@ -88,8 +92,18 @@ const IOSHeroWithCTA = () => {
>
<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>Get a Free Consultation</span>
</div>
@@ -103,7 +117,7 @@ const IOSHeroWithCTA = () => {
</a>
</motion.div>
</motion.div>
{/* Right side with iOS device mockups */}
<motion.div
initial={{ opacity: 0, x: 50 }}
@@ -131,7 +145,7 @@ const IOSHeroWithCTA = () => {
<div className="h-1 bg-gray-600 rounded w-1/2"></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>
@@ -151,7 +165,7 @@ const IOSHeroWithCTA = () => {
</div>
</div>
</motion.div>
{/* iOS Technology Badges */}
<motion.div
initial={{ opacity: 0, y: 30 }}
@@ -159,13 +173,22 @@ const IOSHeroWithCTA = () => {
transition={{ duration: 0.8, delay: 0.6 }}
className="flex justify-center gap-4 flex-wrap"
>
<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"
>
Swift
</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"
>
SwiftUI
</Badge>
<Badge variant="secondary" className="bg-gray-500/20 text-gray-300 border-gray-500/30">
<Badge
variant="secondary"
className="bg-gray-500/20 text-gray-300 border-gray-500/30"
>
Xcode
</Badge>
</motion.div>
@@ -742,28 +765,33 @@ const IOSKeyBenefits = () => {
{
icon: Zap,
title: "Unmatched Performance",
description: "Optimized for Apple hardware, ensuring fluid user experiences and lightning-fast responsiveness."
description:
"Optimized for Apple hardware, ensuring fluid user experiences and lightning-fast responsiveness.",
},
{
icon: Shield,
title: "Superior Security",
description: "Leveraging Apple's robust security features for comprehensive data protection and user privacy."
description:
"Leveraging Apple's robust security features for comprehensive data protection and user privacy.",
},
{
icon: Heart,
title: "Premium User Experience",
description: "Adhering to Human Interface Guidelines for intuitive, delightful, and accessible design."
description:
"Adhering to Human Interface Guidelines for intuitive, delightful, and accessible design.",
},
{
icon: Network,
title: "Apple Ecosystem Integration",
description: "Seamless integration with Apple Watch, Apple Pay, Siri, and other ecosystem features."
description:
"Seamless integration with Apple Watch, Apple Pay, Siri, and other ecosystem features.",
},
{
icon: DollarSign,
title: "Strong Monetization Potential",
description: "High-value user base with effective in-app purchase mechanisms and premium positioning."
}
description:
"High-value user base with effective in-app purchase mechanisms and premium positioning.",
},
];
return (
@@ -780,7 +808,8 @@ const IOSKeyBenefits = () => {
Why Choose Native iOS for Your App?
</h2>
<p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
iOS development offers unparalleled advantages for businesses looking to create premium mobile experiences.
iOS development offers unparalleled advantages for businesses
looking to create premium mobile experiences.
</p>
</motion.div>
@@ -1021,6 +1050,43 @@ export const IOSAppDevelopment = () => {
<IOSTechnologies />
</section>
{/* CTA Section */}
<section className="py-32">
<div className="container mx-auto px-6 lg:px-8">
<motion.div
initial={{ opacity: 0, y: 30 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8 }}
viewport={{ once: true }}
className="text-center"
>
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-8">
Ready to Build Your Next iOS App?
</h2>
<p className="text-lg text-muted-foreground mb-12 max-w-2xl mx-auto">
Partner with us to create exceptional iOS applications that
delight users and drive business success.
</p>
<div className="flex flex-col sm:flex-row gap-6 justify-center">
<ShimmerButton className="text-lg px-8 py-4 h-[56px]">
<div className="inline-flex items-center gap-2">
<Apple className="w-5 h-5 flex-shrink-0" />
<span>Start Your iOS Project</span>
</div>
</ShimmerButton>
<Button
variant="outline"
size="lg"
className="text-lg px-8 py-4 h-[56px] border-white/20 text-muted-foreground hover:bg-white/10 hover:text-foreground"
>
<Calendar className="w-5 h-5 mr-2" />
Schedule Consultation
</Button>
</div>
</motion.div>
</div>
</section>
<section className="bg-background">
<Footer />
</section>