1539 lines
57 KiB
TypeScript
1539 lines
57 KiB
TypeScript
import { motion } from "framer-motion";
|
|
import {
|
|
Activity,
|
|
ArrowRight,
|
|
Award,
|
|
Bluetooth,
|
|
Bug,
|
|
Building,
|
|
Code,
|
|
Cpu,
|
|
CreditCard,
|
|
Gamepad2,
|
|
Glasses,
|
|
Headphones,
|
|
HeartPulse,
|
|
Home,
|
|
Lightbulb,
|
|
MessageSquare,
|
|
Network,
|
|
Palette,
|
|
Rocket,
|
|
Shield,
|
|
Stethoscope,
|
|
Target,
|
|
TrendingUp,
|
|
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 { navigateTo } from "@/App";
|
|
import { Helmet } from "react-helmet-async";
|
|
import HireDeveloperSection from "@/components/HireDeveloperSection";
|
|
import iotImage from "../src/images/iot.png";
|
|
|
|
// Wearable & Device App Development Hero Section
|
|
const WearableHeroWithCTA = () => {
|
|
return (
|
|
<section className="relative py-20 overflow-hidden bg-black">
|
|
<Helmet>
|
|
{/* Page Title and Meta Description */}
|
|
<title>Wearable & IoT App Development Services | WDI Innovation</title>
|
|
<meta
|
|
name="description"
|
|
content="WDI delivers advanced Wearable & IoT app development, creating seamless, secure, and connected experiences to elevate your business with cutting-edge technology."
|
|
/>
|
|
|
|
{/* Canonical Link */}
|
|
<link rel="canonical" href="https://www.wdipl.com/services/wearable-device-development" />
|
|
|
|
{/* Open Graph Tags (for Facebook, LinkedIn) */}
|
|
<meta property="og:title" content="Wearable & IoT App Development Services | WDI Innovation" />
|
|
<meta
|
|
property="og:description"
|
|
content="WDI delivers advanced Wearable & IoT app development, creating seamless, secure, and connected experiences to elevate your business with cutting-edge technology."
|
|
/>
|
|
<meta property="og:url" content="https://www.wdipl.com/services" />
|
|
<meta property="og:type" content="website" />
|
|
<meta property="og:image" content="https://www.wdipl.com/your-preview-image.jpg" />
|
|
|
|
{/* Twitter Card Tags */}
|
|
<meta name="twitter:card" content="summary_large_image" />
|
|
<meta name="twitter:title" content="Wearable & IoT App Development Services | WDI Innovation" />
|
|
<meta
|
|
name="twitter:description"
|
|
content="WDI delivers advanced Wearable & IoT app development, creating seamless, secure, and connected experiences to elevate your business with cutting-edge technology."
|
|
/>
|
|
<meta name="twitter:image" content="https://www.wdipl.com/your-preview-image.jpg" />
|
|
|
|
{/* Social Profiles (using JSON-LD Schema) */}
|
|
<script type="application/ld+json">
|
|
{`
|
|
{
|
|
"@context": "https://schema.org",
|
|
"@type": "Organization",
|
|
"name": "WDI",
|
|
"url": "https://www.wdipl.com",
|
|
"sameAs": [
|
|
"https://www.facebook.com/wdideas",
|
|
"https://www.linkedin.com/in/website-developers-india/",
|
|
"https://www.instagram.com/wdipl/"
|
|
]
|
|
}
|
|
`}
|
|
</script>
|
|
</Helmet>
|
|
<div className="container mx-auto px-6 lg:px-8">
|
|
<div className="grid lg:grid-cols-2 gap-16 items-center min-h-[90vh]">
|
|
<motion.div
|
|
initial={{ opacity: 0, x: -50 }}
|
|
animate={{ opacity: 1, x: 0 }}
|
|
transition={{ duration: 0.8 }}
|
|
className="space-y-8"
|
|
>
|
|
{/* Wearable & IoT Label */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.6 }}
|
|
>
|
|
<span className="text-white/70 text-sm font-medium">
|
|
Wearable & IoT Development
|
|
</span>
|
|
</motion.div>
|
|
|
|
{/* Main Heading */}
|
|
<div className="space-y-6">
|
|
<h1 className="text-4xl md:text-5xl lg:text-6xl font-semibold text-white leading-tight">
|
|
Wearable & IoT App Development
|
|
</h1>
|
|
|
|
<p className="text-lg text-gray-300 leading-relaxed max-w-lg">
|
|
Extending your digital presence to smartwatches, fitness
|
|
trackers, IoT devices, and emerging platforms for unique user
|
|
experiences.
|
|
</p>
|
|
</div>
|
|
|
|
{/* CTAs */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.3 }}
|
|
className="flex flex-col sm:flex-row gap-4"
|
|
>
|
|
<ShimmerButton
|
|
className="text-lg px-8 py-4"
|
|
onClick={() => navigateTo("/start-a-project")}
|
|
>
|
|
<div className="inline-flex items-center gap-2">
|
|
<Watch className="w-5 h-5 flex-shrink-0" />
|
|
<span>Discover Wearable Solutions</span>
|
|
</div>
|
|
</ShimmerButton>
|
|
<a
|
|
href="#consultation"
|
|
className="inline-flex items-center justify-center gap-2 rounded-md bg-gray-800 px-8 py-4 text-lg font-medium text-white transition hover:bg-gray-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-700 whitespace-nowrap"
|
|
>
|
|
<MessageSquare className="w-4 h-4 flex-shrink-0" />
|
|
<span>Request Consultation</span>
|
|
</a>
|
|
</motion.div>
|
|
</motion.div>
|
|
|
|
{/* Right side with connected devices visualization */}
|
|
<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"
|
|
>
|
|
{/* Connected Devices Ecosystem */}
|
|
<div className="relative w-full max-w-lg mx-auto">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.4 }}
|
|
className="relative mb-8"
|
|
>
|
|
{/* Central Hub */}
|
|
<div className="relative mx-auto w-32 h-32 bg-gradient-to-br from-accent to-purple-600 rounded-full border border-accent/30 shadow-2xl flex items-center justify-center mb-8">
|
|
<div className="w-16 h-16 bg-white/20 rounded-full flex items-center justify-center">
|
|
<Cpu className="w-8 h-8 text-white" />
|
|
</div>
|
|
|
|
{/* Pulse Animation */}
|
|
<div className="absolute inset-0 rounded-full bg-accent/30 animate-ping"></div>
|
|
</div>
|
|
|
|
{/* Connected Devices - Arranged in circle */}
|
|
<div className="relative">
|
|
{/* Smartwatch */}
|
|
<motion.div
|
|
initial={{ opacity: 0, scale: 0 }}
|
|
animate={{ opacity: 1, scale: 1 }}
|
|
transition={{ duration: 0.6, delay: 0.6 }}
|
|
className="absolute -top-20 left-1/2 transform -translate-x-1/2 w-16 h-16 bg-gradient-to-br from-blue-500 to-blue-600 rounded-2xl border border-blue-400/30 shadow-lg flex items-center justify-center"
|
|
>
|
|
<Watch className="w-8 h-8 text-white" />
|
|
</motion.div>
|
|
|
|
{/* VR Headset */}
|
|
<motion.div
|
|
initial={{ opacity: 0, scale: 0 }}
|
|
animate={{ opacity: 1, scale: 1 }}
|
|
transition={{ duration: 0.6, delay: 0.7 }}
|
|
className="absolute -top-10 -right-16 w-16 h-16 bg-gradient-to-br from-purple-500 to-purple-600 rounded-2xl border border-purple-400/30 shadow-lg flex items-center justify-center"
|
|
>
|
|
<Glasses className="w-8 h-8 text-white" />
|
|
</motion.div>
|
|
|
|
{/* Fitness Tracker */}
|
|
<motion.div
|
|
initial={{ opacity: 0, scale: 0 }}
|
|
animate={{ opacity: 1, scale: 1 }}
|
|
transition={{ duration: 0.6, delay: 0.8 }}
|
|
className="absolute top-8 -right-20 w-16 h-16 bg-gradient-to-br from-green-500 to-green-600 rounded-2xl border border-green-400/30 shadow-lg flex items-center justify-center"
|
|
>
|
|
<HeartPulse className="w-8 h-8 text-white" />
|
|
</motion.div>
|
|
|
|
{/* Smart Home Device */}
|
|
<motion.div
|
|
initial={{ opacity: 0, scale: 0 }}
|
|
animate={{ opacity: 1, scale: 1 }}
|
|
transition={{ duration: 0.6, delay: 0.9 }}
|
|
className="absolute top-8 -left-20 w-16 h-16 bg-gradient-to-br from-orange-500 to-orange-600 rounded-2xl border border-orange-400/30 shadow-lg flex items-center justify-center"
|
|
>
|
|
<Home className="w-8 h-8 text-white" />
|
|
</motion.div>
|
|
|
|
{/* Audio Device */}
|
|
<motion.div
|
|
initial={{ opacity: 0, scale: 0 }}
|
|
animate={{ opacity: 1, scale: 1 }}
|
|
transition={{ duration: 0.6, delay: 1.0 }}
|
|
className="absolute -top-10 -left-16 w-16 h-16 bg-gradient-to-br from-pink-500 to-pink-600 rounded-2xl border border-pink-400/30 shadow-lg flex items-center justify-center"
|
|
>
|
|
<Headphones className="w-8 h-8 text-white" />
|
|
</motion.div>
|
|
|
|
{/* Connection Lines */}
|
|
<svg
|
|
className="absolute inset-0 w-full h-full pointer-events-none"
|
|
style={{
|
|
top: "-80px",
|
|
left: "-80px",
|
|
width: "300px",
|
|
height: "200px",
|
|
}}
|
|
>
|
|
{/* Animated connection lines */}
|
|
<g className="opacity-30">
|
|
<line
|
|
x1="150"
|
|
y1="100"
|
|
x2="150"
|
|
y2="20"
|
|
stroke="#E5195E"
|
|
strokeWidth="1"
|
|
strokeDasharray="2,2"
|
|
>
|
|
<animate
|
|
attributeName="stroke-dashoffset"
|
|
values="0;-4"
|
|
dur="2s"
|
|
repeatCount="indefinite"
|
|
/>
|
|
</line>
|
|
<line
|
|
x1="150"
|
|
y1="100"
|
|
x2="220"
|
|
y2="50"
|
|
stroke="#E5195E"
|
|
strokeWidth="1"
|
|
strokeDasharray="2,2"
|
|
>
|
|
<animate
|
|
attributeName="stroke-dashoffset"
|
|
values="0;-4"
|
|
dur="2.5s"
|
|
repeatCount="indefinite"
|
|
/>
|
|
</line>
|
|
<line
|
|
x1="150"
|
|
y1="100"
|
|
x2="240"
|
|
y2="140"
|
|
stroke="#E5195E"
|
|
strokeWidth="1"
|
|
strokeDasharray="2,2"
|
|
>
|
|
<animate
|
|
attributeName="stroke-dashoffset"
|
|
values="0;-4"
|
|
dur="3s"
|
|
repeatCount="indefinite"
|
|
/>
|
|
</line>
|
|
<line
|
|
x1="150"
|
|
y1="100"
|
|
x2="60"
|
|
y2="140"
|
|
stroke="#E5195E"
|
|
strokeWidth="1"
|
|
strokeDasharray="2,2"
|
|
>
|
|
<animate
|
|
attributeName="stroke-dashoffset"
|
|
values="0;-4"
|
|
dur="2.2s"
|
|
repeatCount="indefinite"
|
|
/>
|
|
</line>
|
|
<line
|
|
x1="150"
|
|
y1="100"
|
|
x2="80"
|
|
y2="50"
|
|
stroke="#E5195E"
|
|
strokeWidth="1"
|
|
strokeDasharray="2,2"
|
|
>
|
|
<animate
|
|
attributeName="stroke-dashoffset"
|
|
values="0;-4"
|
|
dur="2.8s"
|
|
repeatCount="indefinite"
|
|
/>
|
|
</line>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
</motion.div>
|
|
|
|
{/* Device Category Badges */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 1.2 }}
|
|
className="flex justify-center gap-4 flex-wrap"
|
|
>
|
|
<Badge
|
|
variant="secondary"
|
|
className="bg-blue-500/20 text-blue-300 border-blue-500/30"
|
|
>
|
|
<Watch className="w-3 h-3 mr-1" />
|
|
Smartwatches
|
|
</Badge>
|
|
<Badge
|
|
variant="secondary"
|
|
className="bg-green-500/20 text-green-300 border-green-500/30"
|
|
>
|
|
<HeartPulse className="w-3 h-3 mr-1" />
|
|
Fitness Bands
|
|
</Badge>
|
|
<Badge
|
|
variant="secondary"
|
|
className="bg-orange-500/20 text-orange-300 border-orange-500/30"
|
|
>
|
|
<Home className="w-3 h-3 mr-1" />
|
|
Connected Home
|
|
</Badge>
|
|
<Badge
|
|
variant="secondary"
|
|
className="bg-purple-500/20 text-purple-300 border-purple-500/30"
|
|
>
|
|
<Glasses className="w-3 h-3 mr-1" />
|
|
VR Headsets
|
|
</Badge>
|
|
</motion.div>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
// Key Benefits of Wearable/Device Apps
|
|
const WearableBenefits = () => {
|
|
const benefits = [
|
|
{
|
|
icon: Zap,
|
|
title: "Enhanced User Convenience",
|
|
description: "Instant access to information and controls.",
|
|
},
|
|
{
|
|
icon: Activity,
|
|
title: "Unique Data Collection",
|
|
description: "Leveraging device sensors for health, environment data.",
|
|
},
|
|
{
|
|
icon: Glasses,
|
|
title: "Immersive Experiences",
|
|
description:
|
|
"Expanding possibilities with AR/VR, smart home integration.",
|
|
},
|
|
{
|
|
icon: TrendingUp,
|
|
title: "New Revenue Streams",
|
|
description: "Tapping into emerging device ecosystems.",
|
|
},
|
|
{
|
|
icon: Award,
|
|
title: "Competitive Edge",
|
|
description: "Differentiating your brand with innovative solutions.",
|
|
},
|
|
];
|
|
|
|
return (
|
|
<section className="py-32">
|
|
<div className="container mx-auto px-6 lg:px-8">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8 }}
|
|
viewport={{ once: true }}
|
|
className="text-center mb-20"
|
|
>
|
|
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
|
|
Why Invest in Device-Specific App Development?
|
|
</h2>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 40 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.2 }}
|
|
viewport={{ once: true }}
|
|
className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto"
|
|
>
|
|
{benefits.slice(0, 3).map((benefit, index) => {
|
|
const IconComponent = benefit.icon;
|
|
return (
|
|
<motion.div
|
|
key={index}
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.5, delay: index * 0.01 }}
|
|
viewport={{ once: true }}
|
|
whileHover={{ y: -5 }}
|
|
className="group"
|
|
>
|
|
<Card className="bg-card/20 backdrop-blur-md border-white/10 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl h-full">
|
|
<CardContent className="p-8 text-center">
|
|
<div className="w-16 h-16 bg-accent/20 rounded-2xl flex items-center justify-center mx-auto mb-6">
|
|
<IconComponent className="w-8 h-8 text-accent" />
|
|
</div>
|
|
<h3 className="text-xl font-semibold text-foreground mb-4">
|
|
{benefit.title}
|
|
</h3>
|
|
<p className="text-muted-foreground leading-relaxed">
|
|
{benefit.description}
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
</motion.div>
|
|
);
|
|
})}
|
|
</motion.div>
|
|
|
|
{/* Second row with 2 cards centered */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 40 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.4 }}
|
|
viewport={{ once: true }}
|
|
className="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto mt-8"
|
|
>
|
|
{benefits.slice(3).map((benefit, index) => {
|
|
const IconComponent = benefit.icon;
|
|
return (
|
|
<motion.div
|
|
key={index + 3}
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.5, delay: (index + 3) * 0.1 }}
|
|
viewport={{ once: true }}
|
|
whileHover={{ y: -5 }}
|
|
className="group"
|
|
>
|
|
<Card className="bg-card/20 backdrop-blur-md border-white/10 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl h-full">
|
|
<CardContent className="p-8 text-center">
|
|
<div className="w-16 h-16 bg-accent/20 rounded-2xl flex items-center justify-center mx-auto mb-6">
|
|
<IconComponent className="w-8 h-8 text-accent" />
|
|
</div>
|
|
<h3 className="text-xl font-semibold text-foreground mb-4">
|
|
{benefit.title}
|
|
</h3>
|
|
<p className="text-muted-foreground leading-relaxed">
|
|
{benefit.description}
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
</motion.div>
|
|
);
|
|
})}
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
// Wearable & Device App Capabilities
|
|
const WearableCapabilities = () => {
|
|
const capabilities = [
|
|
{
|
|
title: "Smartwatch App Development",
|
|
description: "Wear OS (Android Wear), watchOS (Apple Watch).",
|
|
icon: Watch,
|
|
technologies: [
|
|
"watchOS",
|
|
"Wear OS",
|
|
"SwiftUI",
|
|
"WatchKit",
|
|
"Compose for Wear OS",
|
|
"Health APIs",
|
|
],
|
|
},
|
|
{
|
|
title: "Fitness & Health Wearables",
|
|
description: "Integration with health platforms, custom fitness apps.",
|
|
icon: HeartPulse,
|
|
technologies: [
|
|
"HealthKit",
|
|
"Google Fit",
|
|
"Heart Rate Sensors",
|
|
"Step Tracking",
|
|
"Sleep Monitoring",
|
|
"Workout APIs",
|
|
],
|
|
},
|
|
{
|
|
title: "IoT Device Integration",
|
|
description: "Building apps to control and monitor smart devices.",
|
|
icon: Network,
|
|
technologies: [
|
|
"MQTT",
|
|
"CoAP",
|
|
"Zigbee",
|
|
"Matter",
|
|
"AWS IoT",
|
|
"Azure IoT Hub",
|
|
],
|
|
},
|
|
{
|
|
title: "AR/VR Application Development",
|
|
description:
|
|
"Immersive experiences for augmented and virtual reality devices.",
|
|
icon: Glasses,
|
|
technologies: [
|
|
"ARKit",
|
|
"ARCore",
|
|
"Unity",
|
|
"Unreal Engine",
|
|
"WebXR",
|
|
"OpenXR",
|
|
],
|
|
},
|
|
{
|
|
title: "Custom Device Connectivity",
|
|
description: "Bluetooth, NFC, Wi-Fi Direct integration.",
|
|
icon: Bluetooth,
|
|
technologies: [
|
|
"Bluetooth LE",
|
|
"NFC",
|
|
"Wi-Fi Direct",
|
|
"Zigbee",
|
|
"Thread",
|
|
"Ultra Wideband",
|
|
],
|
|
},
|
|
{
|
|
title: "Data Synchronization & Security",
|
|
description: "Ensuring seamless and secure data flow.",
|
|
icon: Shield,
|
|
technologies: [
|
|
"End-to-End Encryption",
|
|
"Secure Boot",
|
|
"Device Authentication",
|
|
"Cloud Sync",
|
|
"Edge Computing",
|
|
"Privacy by Design",
|
|
],
|
|
},
|
|
];
|
|
|
|
return (
|
|
<section className="py-32 bg-black">
|
|
<div className="container mx-auto px-6 lg:px-8">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8 }}
|
|
viewport={{ once: true }}
|
|
className="text-center mb-20"
|
|
>
|
|
<h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
|
|
Expertise Across Diverse Device Ecosystems
|
|
</h2>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 40 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.2 }}
|
|
viewport={{ once: true }}
|
|
className="grid md:grid-cols-2 lg:grid-cols-3 gap-8"
|
|
>
|
|
{capabilities.map((capability, index) => {
|
|
const IconComponent = capability.icon;
|
|
return (
|
|
<motion.div
|
|
key={index}
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.5, delay: index * 0.01 }}
|
|
viewport={{ once: true }}
|
|
whileHover={{ y: -5 }}
|
|
className="group"
|
|
>
|
|
<Card className="bg-gray-900/50 backdrop-blur-md border-gray-800 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl h-full">
|
|
<CardContent className="p-8">
|
|
<div className="w-12 h-12 bg-accent/20 rounded-lg flex items-center justify-center mb-6">
|
|
<IconComponent className="w-6 h-6 text-accent" />
|
|
</div>
|
|
<h3 className="text-xl font-semibold text-white mb-4">
|
|
{capability.title}
|
|
</h3>
|
|
<p className="text-gray-300 leading-relaxed mb-6">
|
|
{capability.description}
|
|
</p>
|
|
<div className="flex flex-wrap gap-2">
|
|
{capability.technologies.map((tech) => (
|
|
<Badge
|
|
key={tech}
|
|
variant="secondary"
|
|
className="text-xs bg-gray-800/50 text-gray-300 border-gray-700"
|
|
>
|
|
{tech}
|
|
</Badge>
|
|
))}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</motion.div>
|
|
);
|
|
})}
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
// Wearable/Device App Development Process
|
|
const WearableProcess = () => {
|
|
const steps = [
|
|
{
|
|
title: "Concept & Device Strategy",
|
|
description:
|
|
"Comprehensive analysis of target devices and user contexts to define optimal interaction paradigms.",
|
|
icon: Target,
|
|
},
|
|
{
|
|
title: "UI/UX Design (Context-specific)",
|
|
description:
|
|
"Creating interfaces optimized for small screens, voice commands, gestures, and ambient interactions.",
|
|
icon: Palette,
|
|
},
|
|
{
|
|
title: "Development & Hardware Integration",
|
|
description:
|
|
"Building applications with deep hardware integration and platform-specific optimizations.",
|
|
icon: Code,
|
|
},
|
|
{
|
|
title: "Rigorous Device Testing",
|
|
description:
|
|
"Comprehensive testing across device variations, sensor accuracy, and real-world usage scenarios.",
|
|
icon: Bug,
|
|
},
|
|
{
|
|
title: "Deployment & Ongoing Support",
|
|
description:
|
|
"Platform deployment with continuous monitoring, updates, and emerging device compatibility.",
|
|
icon: Rocket,
|
|
},
|
|
];
|
|
|
|
return (
|
|
<section className="py-32">
|
|
<div className="container mx-auto px-6 lg:px-8">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8 }}
|
|
viewport={{ once: true }}
|
|
className="text-center mb-20"
|
|
>
|
|
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
|
|
Tailored Process for Emerging Device Applications
|
|
</h2>
|
|
</motion.div>
|
|
|
|
<div className="relative">
|
|
{/* Timeline line */}
|
|
<div className="absolute left-1/2 transform -translate-x-1/2 h-full w-0.5 bg-gradient-to-b from-accent via-accent/50 to-transparent hidden lg:block"></div>
|
|
|
|
<div className="space-y-16">
|
|
{steps.map((step, index) => {
|
|
const IconComponent = step.icon;
|
|
const isEven = index % 2 === 0;
|
|
|
|
return (
|
|
<motion.div
|
|
key={index}
|
|
initial={{ opacity: 0, x: isEven ? -50 : 50 }}
|
|
whileInView={{ opacity: 1, x: 0 }}
|
|
transition={{ duration: 0.8, delay: index * 0.2 }}
|
|
viewport={{ once: true }}
|
|
className={`flex items-center ${isEven ? "lg:flex-row" : "lg:flex-row-reverse"
|
|
} flex-col lg:gap-16 gap-8`}
|
|
>
|
|
<div
|
|
className={`flex-1 ${isEven ? "lg:text-right" : "lg:text-left"
|
|
} text-center lg:text-left`}
|
|
>
|
|
<div className="bg-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>
|
|
<h3 className="text-2xl font-semibold text-foreground mb-4">
|
|
{step.title}
|
|
</h3>
|
|
<p className="text-muted-foreground leading-relaxed">
|
|
{step.description}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Timeline dot */}
|
|
<div className="w-4 h-4 bg-accent rounded-full border-4 border-background z-10 hidden lg:block"></div>
|
|
|
|
<div className="flex-1 hidden lg:block"></div>
|
|
</motion.div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
// Use Cases for Wearable/Device Apps
|
|
const WearableUseCases = () => {
|
|
const useCases = [
|
|
{
|
|
title: "HealthTech & Wellness",
|
|
description: "Remote patient monitoring, fitness tracking.",
|
|
icon: Stethoscope,
|
|
examples: [
|
|
"Patient Monitoring",
|
|
"Fitness Tracking",
|
|
"Medication Reminders",
|
|
"Health Analytics",
|
|
],
|
|
},
|
|
{
|
|
title: "Smart Home Automation",
|
|
description: "Controlling lighting, security, appliances.",
|
|
icon: Home,
|
|
examples: [
|
|
"Lighting Control",
|
|
"Security Systems",
|
|
"Climate Control",
|
|
"Appliance Management",
|
|
],
|
|
},
|
|
{
|
|
title: "Industrial IoT",
|
|
description: "Monitoring equipment, predictive maintenance.",
|
|
icon: Building,
|
|
examples: [
|
|
"Equipment Monitoring",
|
|
"Predictive Maintenance",
|
|
"Safety Systems",
|
|
"Asset Tracking",
|
|
],
|
|
},
|
|
{
|
|
title: "Gaming & Entertainment",
|
|
description: "Immersive VR/AR games, interactive experiences.",
|
|
icon: Gamepad2,
|
|
examples: [
|
|
"VR Gaming",
|
|
"AR Experiences",
|
|
"Interactive Media",
|
|
"Spatial Computing",
|
|
],
|
|
},
|
|
{
|
|
title: "Retail & Payments",
|
|
description: "Contactless payments, smart shopping assistants.",
|
|
icon: CreditCard,
|
|
examples: [
|
|
"Contactless Pay",
|
|
"Shopping Assistance",
|
|
"Loyalty Programs",
|
|
"Inventory Tracking",
|
|
],
|
|
},
|
|
];
|
|
|
|
return (
|
|
<section className="py-32 bg-black">
|
|
<div className="container mx-auto px-6 lg:px-8">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8 }}
|
|
viewport={{ once: true }}
|
|
className="text-center mb-20"
|
|
>
|
|
<h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
|
|
Industries & Scenarios Benefiting from Device Apps
|
|
</h2>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 40 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.2 }}
|
|
viewport={{ once: true }}
|
|
className="grid md:grid-cols-2 lg:grid-cols-3 gap-8"
|
|
>
|
|
{useCases.slice(0, 3).map((useCase, index) => {
|
|
const IconComponent = useCase.icon;
|
|
return (
|
|
<motion.div
|
|
key={index}
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.5, delay: index * 0.01 }}
|
|
viewport={{ once: true }}
|
|
whileHover={{ y: -5 }}
|
|
className="group"
|
|
>
|
|
<Card className="bg-gray-900/50 backdrop-blur-md border-gray-800 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl h-full">
|
|
<CardContent className="p-8">
|
|
<div className="w-12 h-12 bg-accent/20 rounded-lg flex items-center justify-center mb-6">
|
|
<IconComponent className="w-6 h-6 text-accent" />
|
|
</div>
|
|
<h3 className="text-xl font-semibold text-white mb-4">
|
|
{useCase.title}
|
|
</h3>
|
|
<p className="text-gray-300 leading-relaxed mb-6">
|
|
{useCase.description}
|
|
</p>
|
|
<div className="space-y-2">
|
|
<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"
|
|
>
|
|
{example}
|
|
</Badge>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</motion.div>
|
|
);
|
|
})}
|
|
</motion.div>
|
|
|
|
{/* Second row with 2 cards centered */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 40 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.4 }}
|
|
viewport={{ once: true }}
|
|
className="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto mt-8"
|
|
>
|
|
{useCases.slice(3).map((useCase, index) => {
|
|
const IconComponent = useCase.icon;
|
|
return (
|
|
<motion.div
|
|
key={index + 3}
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.5, delay: (index + 3) * 0.1 }}
|
|
viewport={{ once: true }}
|
|
whileHover={{ y: -5 }}
|
|
className="group"
|
|
>
|
|
<Card className="bg-gray-900/50 backdrop-blur-md border-gray-800 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl h-full">
|
|
<CardContent className="p-8">
|
|
<div className="w-12 h-12 bg-accent/20 rounded-lg flex items-center justify-center mb-6">
|
|
<IconComponent className="w-6 h-6 text-accent" />
|
|
</div>
|
|
<h3 className="text-xl font-semibold text-white mb-4">
|
|
{useCase.title}
|
|
</h3>
|
|
<p className="text-gray-300 leading-relaxed mb-6">
|
|
{useCase.description}
|
|
</p>
|
|
<div className="space-y-2">
|
|
<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"
|
|
>
|
|
{example}
|
|
</Badge>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</motion.div>
|
|
);
|
|
})}
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
// Wearable/Device Tech Stack
|
|
const WearableTechStack = () => {
|
|
const technologies = [
|
|
{
|
|
name: "Wear OS",
|
|
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/android/android-original.svg",
|
|
category: "Wearable Platform",
|
|
},
|
|
{
|
|
name: "watchOS",
|
|
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/apple/apple-original.svg",
|
|
category: "Wearable Platform",
|
|
},
|
|
{
|
|
name: "Swift",
|
|
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/swift/swift-original.svg",
|
|
category: "iOS Development",
|
|
},
|
|
{
|
|
name: "Kotlin",
|
|
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/kotlin/kotlin-original.svg",
|
|
category: "Android Development",
|
|
},
|
|
{
|
|
name: "Unity",
|
|
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/unity/unity-original.svg",
|
|
category: "AR/VR Development",
|
|
},
|
|
{
|
|
name: "AWS IoT",
|
|
logo: iotImage,
|
|
category: "IoT Platform",
|
|
},
|
|
];
|
|
|
|
const specializedTech = [
|
|
{
|
|
name: "Bluetooth LE",
|
|
icon: Bluetooth,
|
|
description: "Low-energy device connectivity",
|
|
},
|
|
{
|
|
name: "MQTT",
|
|
icon: MessageSquare,
|
|
description: "Lightweight messaging protocol for IoT",
|
|
},
|
|
{
|
|
name: "Google Fit API",
|
|
icon: HeartPulse,
|
|
description: "Health and fitness data integration",
|
|
},
|
|
{
|
|
name: "HealthKit API",
|
|
icon: Stethoscope,
|
|
description: "Apple health platform integration",
|
|
},
|
|
];
|
|
|
|
return (
|
|
<section className="py-32">
|
|
<div className="container mx-auto px-6 lg:px-8">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8 }}
|
|
viewport={{ once: true }}
|
|
className="text-center mb-20"
|
|
>
|
|
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
|
|
Leveraging Specialized Technologies for Seamless Device Integration
|
|
</h2>
|
|
</motion.div>
|
|
|
|
{/* Core Technologies */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 40 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.2 }}
|
|
viewport={{ once: true }}
|
|
className="mb-16"
|
|
>
|
|
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6">
|
|
{technologies.map((tech, index) => (
|
|
<motion.div
|
|
key={index}
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.5, delay: index * 0.01 }}
|
|
viewport={{ once: true }}
|
|
whileHover={{
|
|
y: -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-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-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>
|
|
</Card>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</motion.div>
|
|
|
|
{/* Specialized Technologies */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 40 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.4 }}
|
|
viewport={{ once: true }}
|
|
>
|
|
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
{specializedTech.map((tech, index) => {
|
|
const IconComponent = tech.icon;
|
|
return (
|
|
<motion.div
|
|
key={index}
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.5, delay: index * 0.01 }}
|
|
viewport={{ once: true }}
|
|
whileHover={{ y: -5 }}
|
|
className="group"
|
|
>
|
|
<Card className="bg-card/20 backdrop-blur-md border-white/10 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl p-6 text-center h-full">
|
|
<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">
|
|
{tech.name}
|
|
</h4>
|
|
<p className="text-sm text-muted-foreground leading-relaxed">
|
|
{tech.description}
|
|
</p>
|
|
</Card>
|
|
</motion.div>
|
|
);
|
|
})}
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
// Wearable Case Studies
|
|
const WearableCaseStudies = () => {
|
|
const caseStudies = [
|
|
{
|
|
title: "HealthTech Wearable Platform",
|
|
client: "VitalCare",
|
|
description:
|
|
"Comprehensive health monitoring system with smartwatch integration for real-time patient data collection and emergency alerts",
|
|
image:
|
|
"https://images.unsplash.com/photo-1559757148-5c350d0d3c56?w=400&h=300&fit=crop&auto=format",
|
|
results: "50% improved patient compliance",
|
|
gradient: "from-green-500/20 to-teal-500/20",
|
|
features: "Real-time monitoring, Emergency alerts, Health analytics",
|
|
},
|
|
{
|
|
title: "Smart Home Control Hub",
|
|
client: "HomeConnect",
|
|
description:
|
|
"IoT platform controlling lighting, security, and climate systems through voice and wearable interfaces for seamless automation",
|
|
image:
|
|
"https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=400&h=300&fit=crop&auto=format",
|
|
results: "30% energy savings",
|
|
gradient: "from-blue-500/20 to-purple-500/20",
|
|
features: "Voice control, Automated scheduling, Energy optimization",
|
|
},
|
|
{
|
|
title: "Industrial AR Maintenance",
|
|
client: "ManufactureTech",
|
|
description:
|
|
"AR application for equipment maintenance and training with hands-free operation and real-time guidance for technical staff",
|
|
image:
|
|
"https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?w=400&h=300&fit=crop&auto=format",
|
|
results: "40% faster repairs",
|
|
gradient: "from-orange-500/20 to-red-500/20",
|
|
features: "AR overlays, Step-by-step guidance, Remote assistance",
|
|
},
|
|
];
|
|
|
|
return (
|
|
<section className="py-32 bg-black">
|
|
<div className="container mx-auto px-6 lg:px-8">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8 }}
|
|
viewport={{ once: true }}
|
|
className="text-center mb-20"
|
|
>
|
|
<h2 className="text-4xl lg:text-5xl font-semibold text-white mb-8">
|
|
Innovative Device Applications by WDI
|
|
</h2>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 40 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.2 }}
|
|
viewport={{ once: true }}
|
|
className="grid md:grid-cols-2 lg:grid-cols-3 gap-8"
|
|
>
|
|
{caseStudies.map((study, index) => (
|
|
<motion.div
|
|
key={index}
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.5, delay: index * 0.01 }}
|
|
viewport={{ once: true }}
|
|
whileHover={{ y: -8, scale: 1.02 }}
|
|
className="group cursor-pointer"
|
|
>
|
|
<Card className="bg-gray-900/50 backdrop-blur-md border-gray-800 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl overflow-hidden h-full">
|
|
<CardContent className="p-0 flex flex-col h-full">
|
|
<div className="p-8 pb-6">
|
|
<div className="flex items-start gap-4 mb-6">
|
|
<div className="w-12 h-12 bg-accent/20 rounded-xl flex items-center justify-center">
|
|
<Watch className="w-6 h-6 text-accent" />
|
|
</div>
|
|
<div className="flex-1">
|
|
<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"
|
|
>
|
|
{study.results}
|
|
</Badge>
|
|
</div>
|
|
</div>
|
|
|
|
<h3 className="text-xl font-semibold text-white mb-4 leading-tight">
|
|
{study.title}
|
|
</h3>
|
|
</div>
|
|
|
|
<div className="px-8 pb-6 flex-1">
|
|
<div
|
|
className={`relative rounded-xl overflow-hidden bg-gradient-to-br ${study.gradient} p-4 border border-gray-700`}
|
|
>
|
|
<ImageWithFallback
|
|
src={study.image}
|
|
alt={study.title}
|
|
className="w-full h-48 object-cover rounded-lg shadow-lg"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="px-8 pb-6">
|
|
<p className="text-gray-300 text-sm leading-relaxed mb-4">
|
|
{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>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="p-8 pt-0 mt-auto">
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="w-full justify-between text-accent hover:text-accent hover:bg-accent/10 group-hover:translate-x-1 transition-all duration-300"
|
|
>
|
|
<span className="text-sm font-medium">
|
|
VIEW CASE STUDY
|
|
</span>
|
|
<ArrowRight className="w-4 h-4" />
|
|
</Button>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</motion.div>
|
|
))}
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
// Mid-Page CTA
|
|
const WearableInlineCTA = () => {
|
|
return (
|
|
<section className="py-20">
|
|
<div className="container mx-auto px-6 lg:px-8">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 50 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8 }}
|
|
viewport={{ once: true }}
|
|
className="text-center max-w-4xl mx-auto"
|
|
>
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.2 }}
|
|
viewport={{ once: true }}
|
|
className="space-y-8"
|
|
>
|
|
<div className="inline-block p-[2px] rounded-full bg-gradient-to-r from-accent via-blue-500 to-purple-500">
|
|
<div className="bg-background rounded-full px-6 py-3 flex items-center gap-2">
|
|
<Watch className="w-5 h-5 text-foreground" />
|
|
<span className="text-foreground text-base font-medium">
|
|
Innovation Edge
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground leading-tight">
|
|
Ready to Innovate on the{" "}
|
|
<span className="text-accent">Edge of Technology?</span>
|
|
</h2>
|
|
|
|
<p className="text-xl text-muted-foreground leading-relaxed max-w-2xl mx-auto">
|
|
Explore the possibilities of extending your brand to new device
|
|
ecosystems.
|
|
</p>
|
|
|
|
<ShimmerButton
|
|
className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl"
|
|
onClick={() => navigateTo("/start-a-project")}
|
|
>
|
|
<div className="inline-flex items-center gap-3">
|
|
<Lightbulb className="w-6 h-6 flex-shrink-0" />
|
|
<span>Discuss Your Wearable/IoT Idea</span>
|
|
</div>
|
|
</ShimmerButton>
|
|
</motion.div>
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
// Wearable FAQs
|
|
const WearableFAQs = () => {
|
|
const faqs = [
|
|
{
|
|
question: "What types of wearable devices do you develop for?",
|
|
answer:
|
|
"We develop for a wide range of wearable devices including smartwatches (Apple Watch, Wear OS), fitness trackers, smart glasses, AR/VR headsets, health monitoring devices, and emerging wearable technologies. Our expertise covers both consumer and enterprise-grade wearable platforms.",
|
|
},
|
|
{
|
|
question: "How do you ensure data security on IoT devices?",
|
|
answer:
|
|
"We implement multi-layered security including end-to-end encryption, secure device authentication, regular security updates, and privacy-by-design principles. We follow industry standards like OAuth 2.0, TLS encryption, and implement secure boot processes for IoT devices to prevent unauthorized access.",
|
|
},
|
|
{
|
|
question: "Can you integrate with existing mobile or web apps?",
|
|
answer:
|
|
"Absolutely! We specialize in creating seamless integrations between wearable/IoT apps and existing mobile or web applications. This includes data synchronization, shared user accounts, consistent UI/UX across platforms, and unified notification systems to provide a cohesive user experience.",
|
|
},
|
|
{
|
|
question: "What is the typical development timeline for a wearable app?",
|
|
answer:
|
|
"Development timelines vary based on complexity: Simple wearable apps (8-12 weeks), Medium complexity with sensor integration (12-20 weeks), Complex IoT ecosystems (20+ weeks). Factors affecting timeline include device compatibility requirements, custom hardware integration, and testing across multiple device types.",
|
|
},
|
|
];
|
|
|
|
return (
|
|
<section className="py-32 bg-black">
|
|
<div className="container mx-auto px-6 lg:px-8">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8 }}
|
|
viewport={{ once: true }}
|
|
className="text-center mb-20"
|
|
>
|
|
<h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
|
|
Frequently Asked Questions
|
|
</h2>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 40 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.2 }}
|
|
viewport={{ once: true }}
|
|
className="max-w-4xl mx-auto"
|
|
>
|
|
<Accordion type="single" collapsible className="space-y-8">
|
|
{faqs.map((faq, index) => (
|
|
<AccordionItem
|
|
key={index}
|
|
value={`item-${index}`}
|
|
className="bg-gray-900/50 backdrop-blur-md rounded-2xl border border-gray-800 px-10 shadow-lg"
|
|
>
|
|
<AccordionTrigger className="text-left hover:no-underline py-10 text-xl">
|
|
<span className="font-semibold text-white">
|
|
{faq.question}
|
|
</span>
|
|
</AccordionTrigger>
|
|
<AccordionContent className="text-gray-300 pb-10 text-lg leading-relaxed">
|
|
{faq.answer}
|
|
</AccordionContent>
|
|
</AccordionItem>
|
|
))}
|
|
</Accordion>
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
// Final CTA Section
|
|
const WearableFinalCTA = () => {
|
|
return (
|
|
<section className="py-20 relative overflow-hidden">
|
|
<div className="container mx-auto px-6 lg:px-8 relative z-10">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 50 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8 }}
|
|
viewport={{ once: true }}
|
|
className="text-center max-w-4xl mx-auto"
|
|
>
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.6 }}
|
|
viewport={{ once: true }}
|
|
className="mb-8"
|
|
>
|
|
<div className="inline-block p-[2px] rounded-full bg-gradient-to-r from-accent via-blue-500 to-purple-500">
|
|
<div className="bg-background rounded-full px-6 py-3 flex items-center gap-2">
|
|
<Watch className="w-5 h-5 text-foreground" />
|
|
<span className="text-foreground text-base font-medium">
|
|
Connected Future
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
|
|
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6 leading-tight">
|
|
Pioneer New Experiences with{" "}
|
|
<span className="text-accent">WDI's Device App Expertise</span>
|
|
</h2>
|
|
|
|
<motion.p
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.3 }}
|
|
viewport={{ once: true }}
|
|
className="text-xl text-muted-foreground mb-12 max-w-2xl mx-auto leading-relaxed"
|
|
>
|
|
From smartwatches to complex IoT systems, we build connected
|
|
applications that push the boundaries of digital interaction.
|
|
</motion.p>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 40 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.4 }}
|
|
viewport={{ once: true }}
|
|
className="space-y-8"
|
|
>
|
|
<ShimmerButton
|
|
className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25"
|
|
onClick={() => navigateTo("/start-a-project")}
|
|
>
|
|
<div className="inline-flex items-center gap-3">
|
|
<Rocket className="w-6 h-6 flex-shrink-0" />
|
|
<span>Start Your Wearable/IoT Project</span>
|
|
</div>
|
|
</ShimmerButton>
|
|
|
|
<p className="text-muted-foreground text-sm">
|
|
Device strategy • Hardware integration • Emerging technologies
|
|
</p>
|
|
</motion.div>
|
|
</motion.div>
|
|
</div>
|
|
|
|
{/* Background Decorative Elements */}
|
|
<div className="absolute top-0 left-0 w-full h-full pointer-events-none overflow-hidden">
|
|
<div className="absolute top-20 left-20 w-60 h-60 bg-accent/5 rounded-full blur-3xl"></div>
|
|
<div className="absolute bottom-20 right-20 w-60 h-60 bg-blue-500/5 rounded-full blur-3xl"></div>
|
|
<div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-80 h-80 bg-purple-500/3 rounded-full blur-3xl"></div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
// Main Wearable & Device App Development Page
|
|
export const WearableDeviceDevelopment = () => {
|
|
return (
|
|
<div className="dark min-h-screen">
|
|
<Navigation />
|
|
|
|
{/* Hero Section */}
|
|
<section className="bg-black">
|
|
<WearableHeroWithCTA />
|
|
</section>
|
|
|
|
{/* Benefits */}
|
|
<section className="bg-background">
|
|
<WearableBenefits />
|
|
</section>
|
|
|
|
{/* Capabilities */}
|
|
<section className="bg-card">
|
|
<WearableCapabilities />
|
|
</section>
|
|
|
|
{/* Development Process */}
|
|
<section className="bg-background">
|
|
<WearableProcess />
|
|
</section>
|
|
|
|
{/* Use Cases */}
|
|
<section className="bg-card">
|
|
<WearableUseCases />
|
|
</section>
|
|
|
|
{/* Tech Stack */}
|
|
<section className="bg-background">
|
|
<WearableTechStack />
|
|
</section>
|
|
|
|
{/* Case Studies */}
|
|
{/* <section className="bg-card">
|
|
<WearableCaseStudies />
|
|
</section> */}
|
|
|
|
<HireDeveloperSection
|
|
title="Augment Your Team with Top Wearable App Developers"
|
|
description="Develop seamless, real-time apps for smartwatches and wearable devices tailored for fitness, healthcare, and lifestyle industries."
|
|
buttonText="Hire Wearable Developers"
|
|
buttonLink="/start-a-project"
|
|
developerTypes={[
|
|
{
|
|
title: "WearOS Developer",
|
|
experience: "4+ Years",
|
|
skills: ["Kotlin", "Jetpack Compose", "WearOS SDK", "Bluetooth LE"],
|
|
specialties: "Smartwatch UIs, Health Data Integration",
|
|
},
|
|
{
|
|
title: "watchOS Developer",
|
|
experience: "5+ Years",
|
|
skills: ["Swift", "WatchKit", "HealthKit", "Core Motion"],
|
|
specialties: "Apple Watch Integration, Fitness Tracking",
|
|
},
|
|
{
|
|
title: "Cross-Platform Wearable Developer",
|
|
experience: "6+ Years",
|
|
skills: ["Flutter", "React Native", "Firebase", "Sensor APIs"],
|
|
specialties: "Hybrid Wearable Apps, Real-Time Sync",
|
|
},
|
|
]}
|
|
/>
|
|
|
|
|
|
{/* Mid-Page CTA */}
|
|
<section className="bg-background">
|
|
<WearableInlineCTA />
|
|
</section>
|
|
|
|
{/* FAQs */}
|
|
<section className="bg-card">
|
|
<WearableFAQs />
|
|
</section>
|
|
|
|
{/* Final CTA */}
|
|
<section className="bg-background">
|
|
<WearableFinalCTA />
|
|
</section>
|
|
|
|
{/* Footer */}
|
|
<section className="bg-card">
|
|
<Footer />
|
|
</section>
|
|
</div>
|
|
);
|
|
};
|