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

replace the hero image in MobileAppDevelopment component

Browse Source
This commit is contained in:
aryabenade
2026-02-17 17:37:14 +05:30
parent 14103041e6
commit 70a63265b5
4 changed files with 85 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

128
pages/MobileAppDevelopment.tsx
View File

@@ -32,7 +32,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 heroMockupImage from '../src/images/mobile-app-banner.webp';
import heroMockupImage from '../src/images/mobile-app-banner.png';
import { Helmet } from "react-helmet-async";
import { useNavigate } from "react-router-dom";
@@ -88,13 +88,13 @@ const HeroWithCTA = () => {
`}
</script>
</Helmet>
<div className="container mx-auto px-6 lg:px-8 max-w-7xl">
<div className="container px-6 mx-auto 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 z-10"
className="z-10 space-y-8"
>
{/* Mobile App Development Label */}
<motion.div
@@ -104,7 +104,7 @@ const HeroWithCTA = () => {
>
<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">
<Smartphone className="w-4 h-4 text-[#E5195E]" />
<span className="text-white/90 text-sm font-medium">Mobile App Development</span>
<span className="text-sm font-medium text-white/90">Mobile App Development</span>
</div>
</motion.div>
@@ -115,13 +115,13 @@ const HeroWithCTA = () => {
transition={{ duration: 0.6, delay: 0.1 }}
className="space-y-6"
>
<h1 className="text-4xl md:text-5xl lg:text-6xl font-semibold leading-tight">
<h1 className="text-4xl font-semibold leading-tight md:text-5xl lg:text-6xl">
<span className="text-white">From concept to </span>
<span className="text-[#E5195E]">App Store</span>
<span className="text-white"> in just 6 weeks.</span>
</h1>
<p className="text-lg text-gray-300 leading-relaxed max-w-lg">
<p className="max-w-lg text-lg leading-relaxed text-gray-300">
Build secure, scalable, high-performance apps for iOS, Android, or cross-platform — fast.
</p>
</motion.div>
@@ -133,23 +133,23 @@ const HeroWithCTA = () => {
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.2 }}
className="flex flex-col sm:flex-row gap-4 pt-4"
className="flex flex-col gap-4 pt-4 sm:flex-row"
>
<ShimmerButton
className="h-14 px-8 text-lg font-medium rounded-lg shadow-lg hover:shadow-xl transition-all duration-300"
className="px-8 text-lg font-medium transition-all duration-300 rounded-lg shadow-lg h-14 hover:shadow-xl"
onClick={() => navigate('/start-a-project')}
>
<div className="inline-flex items-center gap-2">
<Calendar className="w-5 h-5 flex-shrink-0" />
<Calendar className="flex-shrink-0 w-5 h-5" />
<span>Book a Discovery Call</span>
</div>
</ShimmerButton>
<Button
variant="secondary"
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"
className="px-8 text-lg font-medium text-white transition-all duration-300 rounded-lg shadow-lg h-14 bg-white/10 hover:bg-white/20 border-white/20 hover:border-white/30 hover:shadow-xl"
onClick={() => navigate('/case-studies')}
>
<Eye className="w-5 h-5 flex-shrink-0" />
<Eye className="flex-shrink-0 w-5 h-5" />
<span>View our work</span>
</Button>
</motion.div>
@@ -216,24 +216,24 @@ const HorizontalTagScroller = () => {
];
return (
<section className="py-32 bg-background relative overflow-hidden">
<section className="relative py-32 overflow-hidden bg-background">
{/* Add subtle decorative elements */}
<div className="absolute top-0 left-0 w-full h-full pointer-events-none">
<div className="absolute top-20 left-10 w-32 h-32 bg-accent/5 rounded-full blur-2xl"></div>
<div className="absolute bottom-20 right-10 w-40 h-40 bg-blue-500/5 rounded-full blur-2xl"></div>
<div className="absolute w-32 h-32 rounded-full top-20 left-10 bg-accent/5 blur-2xl"></div>
<div className="absolute w-40 h-40 rounded-full bottom-20 right-10 bg-blue-500/5 blur-2xl"></div>
</div>
<div className="container mx-auto px-6 lg:px-8 relative z-10">
<div className="container relative z-10 px-6 mx-auto 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"
className="mb-20 text-center"
>
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-8">
<h2 className="mb-8 text-4xl font-semibold lg:text-5xl text-foreground">
Apps Built for High-Impact Industries
</h2>
<p className="text-2xl text-muted-foreground max-w-4xl mx-auto leading-relaxed">
<p className="max-w-4xl mx-auto text-2xl leading-relaxed text-muted-foreground">
Our mobile apps power industries where user trust, speed, and uptime are critical.
</p>
</motion.div>
@@ -246,8 +246,8 @@ const HorizontalTagScroller = () => {
className="relative overflow-hidden"
>
{/* Gradient overlays for smooth fade effect */}
<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="absolute top-0 bottom-0 left-0 z-10 w-20 pointer-events-none bg-gradient-to-r from-card to-transparent"></div>
<div className="absolute top-0 bottom-0 right-0 z-10 w-20 pointer-events-none bg-gradient-to-l from-card to-transparent"></div>
{/* Marquee container */}
<div className="flex animate-marquee hover:animate-marquee-paused">
@@ -261,9 +261,9 @@ const HorizontalTagScroller = () => {
whileInView={{ opacity: 1, scale: 1 }}
transition={{ duration: 0.5, delay: index * 0.01 }}
viewport={{ once: true }}
className="group flex-shrink-0 mx-3"
className="flex-shrink-0 mx-3 group"
>
<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="px-8 py-6 transition-all duration-300 border shadow-lg cursor-pointer bg-card/20 backdrop-blur-md rounded-2xl border-white/10 hover:border-accent/30 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 ${industry.color}`}>
<IconComponent className="w-6 h-6" />
@@ -287,9 +287,9 @@ const HorizontalTagScroller = () => {
whileInView={{ opacity: 1, scale: 1 }}
transition={{ duration: 0.5, delay: (index + industries.length) * 0.1 }}
viewport={{ once: true }}
className="group flex-shrink-0 mx-3"
className="flex-shrink-0 mx-3 group"
>
<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="px-8 py-6 transition-all duration-300 border shadow-lg cursor-pointer bg-card/20 backdrop-blur-md rounded-2xl border-white/10 hover:border-accent/30 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 ${industry.color}`}>
<IconComponent className="w-6 h-6" />
@@ -313,9 +313,9 @@ const HorizontalTagScroller = () => {
whileInView={{ opacity: 1, scale: 1 }}
transition={{ duration: 0.5, delay: (index + industries.length * 2) * 0.1 }}
viewport={{ once: true }}
className="group flex-shrink-0 mx-3"
className="flex-shrink-0 mx-3 group"
>
<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="px-8 py-6 transition-all duration-300 border shadow-lg cursor-pointer bg-card/20 backdrop-blur-md rounded-2xl border-white/10 hover:border-accent/30 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 ${industry.color}`}>
<IconComponent className="w-6 h-6" />
@@ -367,21 +367,21 @@ const SideBySideContentWithIcons = () => {
return (
<section className="py-32 bg-black">
<div className="container mx-auto px-6 lg:px-8">
<div className="container px-6 mx-auto lg:px-8">
<motion.div
initial={{ opacity: 0, y: 30 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8 }}
viewport={{ once: true }}
className="text-center mb-16"
className="mb-16 text-center"
>
{/* Main Heading */}
<h2 className="text-4xl lg:text-5xl font-semibold text-white leading-tight mb-6">
<h2 className="mb-6 text-4xl font-semibold leading-tight text-white lg:text-5xl">
Why Founders and CTOs Trust WDI
</h2>
{/* Subtext */}
<p className="text-2xl text-gray-300 leading-relaxed">
<p className="text-2xl leading-relaxed text-gray-300">
Not just a dev agency. A product partner.
</p>
</motion.div>
@@ -392,7 +392,7 @@ const SideBySideContentWithIcons = () => {
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.2 }}
viewport={{ once: true }}
className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-6 max-w-7xl mx-auto"
className="grid grid-cols-1 gap-6 mx-auto md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 max-w-7xl"
>
{trustFactors.map((factor, index) => {
const IconComponent = factor.icon;
@@ -405,17 +405,17 @@ const SideBySideContentWithIcons = () => {
transition={{ duration: 0.5, delay: index * 0.01 }}
viewport={{ once: true }}
whileHover={{ y: -8, scale: 1.02 }}
className="group cursor-pointer"
className="cursor-pointer group"
>
<Card className="bg-gray-900/50 backdrop-blur-md border-gray-700/50 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl h-full overflow-hidden">
<Card className="h-full overflow-hidden transition-all duration-300 shadow-lg bg-gray-900/50 backdrop-blur-md border-gray-700/50 hover:border-accent/30 hover:shadow-xl rounded-2xl">
<CardContent className="p-8 flex flex-col items-center text-center h-full justify-center min-h-[180px]">
{/* Icon - Clean without background */}
<div className="mb-6">
<IconComponent className="w-10 h-10 text-accent mx-auto" />
<IconComponent className="w-10 h-10 mx-auto text-accent" />
</div>
{/* Title */}
<h3 className="text-lg font-semibold text-white leading-tight">
<h3 className="text-lg font-semibold leading-tight text-white">
{factor.title}
</h3>
</CardContent>
@@ -473,18 +473,18 @@ const TabbedServiceDisplay = () => {
return (
<section className="py-32 bg-background">
<div className="container mx-auto px-6 lg:px-8">
<div className="container px-6 mx-auto 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"
className="mb-20 text-center"
>
<h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
<h2 className="mb-6 text-4xl font-semibold text-white lg:text-5xl">
Mobile App Development Services
</h2>
<p className="text-lg text-gray-300 max-w-4xl mx-auto leading-relaxed">
<p className="max-w-4xl mx-auto text-lg leading-relaxed text-gray-300">
Comprehensive mobile development services that transform your ideas into powerful, user-friendly applications across all platforms.
</p>
</motion.div>
@@ -494,7 +494,7 @@ const TabbedServiceDisplay = () => {
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"
className="grid gap-8 md:grid-cols-2 lg:grid-cols-3"
>
{services.map((service, index) => {
const IconComponent = service.icon;
@@ -506,20 +506,20 @@ const TabbedServiceDisplay = () => {
transition={{ duration: 0.5, delay: index * 0.01 }}
viewport={{ once: true }}
whileHover={{ y: -5 }}
className="group cursor-pointer"
className="cursor-pointer group"
onClick={() => navigate(service.link)}
>
<div className="bg-gray-900/50 backdrop-blur-sm rounded-2xl border border-gray-800 p-8 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl h-full">
<div className="h-full p-8 transition-all duration-300 border border-gray-800 shadow-lg bg-gray-900/50 backdrop-blur-sm rounded-2xl hover:border-accent/30 hover:shadow-xl">
<div className="flex flex-col items-start space-y-6">
<div className="w-12 h-12 bg-accent/20 rounded-lg flex items-center justify-center">
<div className="flex items-center justify-center w-12 h-12 rounded-lg bg-accent/20">
<IconComponent className="w-6 h-6 text-accent" />
</div>
<div>
<h3 className="text-xl font-semibold text-white mb-4">
<h3 className="mb-4 text-xl font-semibold text-white">
{service.title}
</h3>
<p className="text-gray-400 leading-relaxed">
<p className="leading-relaxed text-gray-400">
{service.description}
</p>
</div>
@@ -539,13 +539,13 @@ const InlineCTA = () => {
const navigate = useNavigate();
return (
<section className="py-20 bg-black">
<div className="container mx-auto px-6 lg:px-8">
<div className="container px-6 mx-auto 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"
className="max-w-4xl mx-auto text-center"
>
<motion.div
initial={{ opacity: 0, y: 30 }}
@@ -565,14 +565,14 @@ const InlineCTA = () => {
</div>
{/* Main Heading */}
<h2 className="text-4xl lg:text-5xl font-semibold leading-tight">
<h2 className="text-4xl font-semibold leading-tight lg:text-5xl">
<span className="text-foreground">Let's Architect </span>
<span className="text-[#E5195E]">Intelligence</span>
<span className="text-foreground"> Into Your App</span>
</h2>
{/* Subtitle */}
<p className="text-xl text-muted-foreground leading-relaxed max-w-2xl mx-auto">
<p className="max-w-2xl mx-auto text-xl leading-relaxed text-muted-foreground">
Schedule a discovery call to explore how AI can give you a strategic edge.
</p>
@@ -583,7 +583,7 @@ const InlineCTA = () => {
onClick={() => navigate('/start-a-project')}
>
<div className="inline-flex items-center gap-3">
<Brain className="w-6 h-6 flex-shrink-0" />
<Brain className="flex-shrink-0 w-6 h-6" />
<span>Book an AI Discovery Call</span>
</div>
</ShimmerButton>
@@ -640,19 +640,19 @@ const HireDevelopersSection = () => {
return (
<section className="py-32 bg-background">
<div className="container mx-auto px-6 lg:px-8">
<div className="container px-6 mx-auto 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"
className="mb-20 text-center"
>
<h2 className="text-4xl lg:text-5xl font-semibold mb-8">
<h2 className="mb-8 text-4xl font-semibold lg:text-5xl">
<span className="text-foreground">Hire Our </span>
<span className="text-[#E5195E]">Mobile App Experts</span>
</h2>
<p className="text-2xl text-muted-foreground max-w-4xl mx-auto leading-relaxed">
<p className="max-w-4xl mx-auto text-2xl leading-relaxed text-muted-foreground">
Get access to top-tier mobile developers who can bring your vision to life with cutting-edge technology and proven expertise.
</p>
</motion.div>
@@ -662,7 +662,7 @@ const HireDevelopersSection = () => {
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.2 }}
viewport={{ once: true }}
className="grid md:grid-cols-2 xl:grid-cols-4 gap-8"
className="grid gap-8 md:grid-cols-2 xl:grid-cols-4"
>
{developers.map((developer, index) => {
const IconComponent = developer.icon;
@@ -674,10 +674,10 @@ const HireDevelopersSection = () => {
transition={{ duration: 0.5, delay: index * 0.01 }}
viewport={{ once: true }}
whileHover={{ y: -8, scale: 1.02 }}
className="group cursor-pointer"
className="cursor-pointer 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 overflow-hidden h-full">
<CardContent className="p-0 flex flex-col h-full">
<Card className="h-full overflow-hidden transition-all duration-300 shadow-lg bg-card/20 backdrop-blur-md border-white/10 hover:border-accent/30 hover:shadow-xl rounded-2xl">
<CardContent className="flex flex-col h-full p-0">
{/* Header with icon and title */}
<div className="p-8 pb-6">
<div className="flex items-start gap-4 mb-6">
@@ -685,19 +685,19 @@ const HireDevelopersSection = () => {
<IconComponent className={`w-6 h-6 ${developer.iconColor}`} />
</div>
<div className="flex-1">
<div className="text-xs text-muted-foreground mb-2 uppercase tracking-wider">
<div className="mb-2 text-xs tracking-wider uppercase text-muted-foreground">
Mobile Development
</div>
</div>
</div>
<h3 className="text-xl font-semibold text-foreground mb-4 leading-tight">
<h3 className="mb-4 text-xl font-semibold leading-tight text-foreground">
{developer.title}
</h3>
</div>
{/* Skills section */}
<div className="px-8 pb-6 flex-1">
<div className="flex-1 px-8 pb-6">
<div className="flex flex-wrap gap-2">
{developer.skills.map((skill) => (
<Badge key={skill} variant="secondary" className="text-xs bg-white/10 text-foreground">
@@ -710,11 +710,11 @@ const HireDevelopersSection = () => {
{/* CTA Buttons - Updated with ShimmerButton */}
<div className="p-8 pt-0 mt-auto space-y-3">
<ShimmerButton
className="w-full py-3 text-sm rounded-xl shadow-lg hover:shadow-xl"
className="w-full py-3 text-sm shadow-lg rounded-xl hover:shadow-xl"
onClick={() => navigate(developer.link)}
>
<div className="inline-flex items-center justify-center gap-2">
<UserPlus className="w-4 h-4 flex-shrink-0" />
<UserPlus className="flex-shrink-0 w-4 h-4" />
<span className="font-medium">Hire Now</span>
</div>
</ShimmerButton>
@@ -780,7 +780,7 @@ export const MobileAppDevelopment = () => {
}, []);
return (
<div className="dark min-h-screen bg-background">
<div className="min-h-screen dark bg-background">
{/* <Navigation /> */}
{/* Hero Section */}