ios changes pending
This commit is contained in:
priyanshuvish
BIN
assets/images/Tanami.webp
Normal file
BIN
assets/images/Tanami.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 85 KiB |
BIN
assets/images/clutch-logo.png
Normal file
BIN
assets/images/clutch-logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 56 KiB |
BIN
assets/images/mobile-app-banner.webp
Normal file
BIN
assets/images/mobile-app-banner.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 77 KiB |
BIN
assets/images/ranoutof.webp
Normal file
BIN
assets/images/ranoutof.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 275 KiB |
BIN
assets/images/regroup.webp
Normal file
BIN
assets/images/regroup.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 166 KiB |
BIN
assets/images/sd.png
Normal file
BIN
assets/images/sd.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 144 KiB |
BIN
assets/images/seezun.webp
Normal file
BIN
assets/images/seezun.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 158 KiB |
BIN
assets/images/woka.webp
Normal file
BIN
assets/images/woka.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 167 KiB |
@@ -1,292 +1,450 @@
|
||||
import React, { useState, useEffect, useRef } from "react";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import { ChevronLeft, ChevronRight } from "lucide-react";
|
||||
import { Card, CardContent } from "./ui/card";
|
||||
import { Button } from "./ui/button";
|
||||
import { motion, useAnimationControls } from "framer-motion";
|
||||
import { Star } from "lucide-react";
|
||||
import { ImageWithFallback } from "./figma/ImageWithFallback";
|
||||
|
||||
// High-quality Clutch logo placeholder
|
||||
const clutchLogo = "https://images.unsplash.com/photo-1560472354-b33ff0c44a43?w=120&h=60&fit=crop&auto=format";
|
||||
|
||||
import clutchLogo from '../assets/images/clutch-logo.png';
|
||||
import { useState, useEffect, useRef } from "react";
|
||||
import React from "react";
|
||||
|
||||
const testimonials = [
|
||||
{
|
||||
id: 1,
|
||||
name: "Sarah Chen",
|
||||
position: "CTO",
|
||||
company: "FinTech Innovations",
|
||||
image: "https://images.unsplash.com/photo-1494790108755-2616b332c5cd?w=150&h=150&fit=crop&auto=format",
|
||||
quote: "WDI brought SimpliTend to life with precision. A complex MVP, flawlessly executed and beautifully designed.",
|
||||
author: "Sayeed Saachi",
|
||||
title: "Founder, SimpliTend",
|
||||
rating: 5,
|
||||
text: "WDI transformed our legacy banking system into a modern, scalable platform. Their expertise in financial technology is unmatched.",
|
||||
projectType: "Banking Platform Modernization"
|
||||
projectName: "SimpliTend",
|
||||
projectLogo: "https://images.unsplash.com/photo-1559757148-5c350d0d3c56?w=60&h=60&fit=crop&auto=format"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "Michael Rodriguez",
|
||||
position: "Founder & CEO",
|
||||
company: "HealthTech Solutions",
|
||||
image: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=150&h=150&fit=crop&auto=format",
|
||||
quote: "WDI turned a complex, multi-layered vision into a streamlined digital product. A highly capable and responsive team.",
|
||||
author: "Aimee Zoho",
|
||||
title: "Founder, Lean In World",
|
||||
rating: 5,
|
||||
text: "The mobile health app WDI developed has revolutionized patient care delivery. Exceptional attention to healthcare compliance and user experience.",
|
||||
projectType: "Healthcare Mobile App"
|
||||
projectName: "Lean In World",
|
||||
projectLogo: "https://images.unsplash.com/photo-1551434678-e076c223a692?w=60&h=60&fit=crop&auto=format"
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "Emily Watson",
|
||||
position: "VP of Digital Strategy",
|
||||
company: "RetailMax Corp",
|
||||
image: "https://images.unsplash.com/photo-1580489944761-15a19d654956?w=150&h=150&fit=crop&auto=format",
|
||||
quote: "WDI guided us from hybrid frustration to native transformation. Rock-solid delivery, scalable systems, and impressive uptime.",
|
||||
author: "Akarsh K Hebbar",
|
||||
title: "Founder, WOKA",
|
||||
rating: 5,
|
||||
text: "Our e-commerce platform's performance improved by 300% after WDI's optimization. Their technical expertise is outstanding.",
|
||||
projectType: "E-commerce Platform Enhancement"
|
||||
projectName: "WOKA",
|
||||
projectLogo: "https://images.unsplash.com/photo-1518186285589-2f7649de83e0?w=60&h=60&fit=crop&auto=format"
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: "James Thompson",
|
||||
position: "Chief Innovation Officer",
|
||||
company: "EduTech Pioneers",
|
||||
image: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=150&h=150&fit=crop&auto=format",
|
||||
quote: "WDI executed our vision perfectly. The design, user flow, and admin controls are just what we needed.",
|
||||
author: "Al Yusuf-Humaira",
|
||||
title: "Founder, SSA",
|
||||
rating: 5,
|
||||
text: "WDI's AI-powered learning platform has transformed how our students engage with content. Incredible innovation and execution.",
|
||||
projectType: "AI-Powered EdTech Platform"
|
||||
projectName: "SSA",
|
||||
projectLogo: "https://images.unsplash.com/photo-1503676260728-1c00da094a0b?w=60&h=60&fit=crop&auto=format"
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: "Lisa Park",
|
||||
position: "Operations Director",
|
||||
company: "LogiFlow Systems",
|
||||
image: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=150&h=150&fit=crop&auto=format",
|
||||
quote: "WDI delivered exactly what we needed—a scalable, secure, and smart RFQ engine.",
|
||||
author: "Amol Kasar",
|
||||
title: "Manager, Dorf Ketal",
|
||||
rating: 5,
|
||||
text: "The supply chain management system WDI built has streamlined our operations and reduced costs by 40%. Highly recommended.",
|
||||
projectType: "Supply Chain Management System"
|
||||
projectName: "Dorf Ketal",
|
||||
projectLogo: "https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?w=60&h=60&fit=crop&auto=format"
|
||||
},
|
||||
{
|
||||
quote: "WDI helped us modernize our digital presence quickly—professional, responsive, and pixel-perfect.",
|
||||
author: "Anesh Kavle",
|
||||
title: "Founder, Dayal Tours & Travel",
|
||||
rating: 5,
|
||||
projectName: "Dayal Tours & Travel",
|
||||
projectLogo: "https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?w=60&h=60&fit=crop&auto=format"
|
||||
},
|
||||
{
|
||||
quote: "WDI delivered beyond expectations. Their speed, structure, and collaborative energy made this complex platform a reality.",
|
||||
author: "Edward",
|
||||
title: "Founder, ReGroup",
|
||||
rating: 5,
|
||||
projectName: "ReGroup",
|
||||
projectLogo: "https://images.unsplash.com/photo-1611224923853-80b023f02d71?w=60&h=60&fit=crop&auto=format"
|
||||
},
|
||||
{
|
||||
quote: "WDI translated a complex financial vision into a user-friendly app. Their execution was on point.",
|
||||
author: "Faisal",
|
||||
title: "Founder, Tanami Capital",
|
||||
rating: 5,
|
||||
projectName: "Tanami Capital",
|
||||
projectLogo: "https://images.unsplash.com/photo-1590283603385-17ffb3a7f29f?w=60&h=60&fit=crop&auto=format"
|
||||
},
|
||||
{
|
||||
quote: "WDI's CRM gave us an exhibition edge—OCR scanning changed the game.",
|
||||
author: "Hiten Dedhia",
|
||||
title: "Director, Exhibition CRM System",
|
||||
rating: 5,
|
||||
projectName: "Exhibition CRM System",
|
||||
projectLogo: "https://images.unsplash.com/photo-1560472354-b33ff0c44a43?w=60&h=60&fit=crop&auto=format"
|
||||
},
|
||||
{
|
||||
quote: "WDI made fintech frictionless. From onboarding to investment, it flows like a smart conversation.",
|
||||
author: "Rakesh Bunathar",
|
||||
title: "Founder, SuperMoney Advisor App",
|
||||
rating: 5,
|
||||
projectName: "SuperMoney Advisor App",
|
||||
projectLogo: "https://images.unsplash.com/photo-1579621970563-ebec7560ff3e?w=60&h=60&fit=crop&auto=format"
|
||||
},
|
||||
{
|
||||
quote: "WDI helped us turn complex property cycles into an intuitive digital experience.",
|
||||
author: "Team Prosperty",
|
||||
title: "Team, Prosperty Platform",
|
||||
rating: 5,
|
||||
projectName: "Prosperty Platform",
|
||||
projectLogo: "https://images.unsplash.com/photo-1560518883-ce09059eeffa?w=60&h=60&fit=crop&auto=format"
|
||||
},
|
||||
{
|
||||
quote: "WDI executed my multi-phase platform with confidence and clarity. They turned ideas into an integrated system faster than expected.",
|
||||
author: "Mr. Oja Paul",
|
||||
title: "Founder, Angel-Driven Marketplace Platform",
|
||||
rating: 5,
|
||||
projectName: "Angel-Driven Marketplace Platform",
|
||||
projectLogo: "https://images.unsplash.com/photo-1611224923853-80b023f02d71?w=60&h=60&fit=crop&auto=format"
|
||||
},
|
||||
{
|
||||
quote: "WDI helped bring Moving Cargo to life—from vision to delivery, the process was smooth and professional.",
|
||||
author: "Mr Nicholas Shaak",
|
||||
title: "Founder, Moving Cargo",
|
||||
rating: 5,
|
||||
projectName: "Moving Cargo",
|
||||
projectLogo: "https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d?w=60&h=60&fit=crop&auto=format"
|
||||
},
|
||||
{
|
||||
quote: "WDI transformed our leadership vision into a smart, scalable platform our teams love.",
|
||||
author: "KLC",
|
||||
title: "Team, KLC Learning and Content Management Platform",
|
||||
rating: 5,
|
||||
projectName: "KLC Learning and Content Management Platform",
|
||||
projectLogo: "https://images.unsplash.com/photo-1503676260728-1c00da094a0b?w=60&h=60&fit=crop&auto=format"
|
||||
},
|
||||
{
|
||||
quote: "WDI delivered a full-stack health-tech solution with precision and transparency.",
|
||||
author: "Priyank Mehta",
|
||||
title: "Founder, GSF Mobie App",
|
||||
rating: 5,
|
||||
projectName: "GSF Mobie App",
|
||||
projectLogo: "https://images.unsplash.com/photo-1559757148-5c350d0d3c56?w=60&h=60&fit=crop&auto=format"
|
||||
},
|
||||
{
|
||||
quote: "WDI built more than an app—they engineered a habit-forming digital solution with beautiful UX and great scalability.",
|
||||
author: "Rishabh Jain",
|
||||
title: "Founder, Grocery List Mobile Application",
|
||||
rating: 5,
|
||||
projectName: "Grocery List Mobile Application",
|
||||
projectLogo: "https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?w=60&h=60&fit=crop&auto=format"
|
||||
},
|
||||
{
|
||||
quote: "WDI built more than an app—they digitized our entire feed ecosystem.",
|
||||
author: "Kevin",
|
||||
title: "Founder, Farm Feeder App",
|
||||
rating: 5,
|
||||
projectName: "Farm Feeder App",
|
||||
projectLogo: "https://images.unsplash.com/photo-1518186285589-2f7649de83e0?w=60&h=60&fit=crop&auto=format"
|
||||
},
|
||||
{
|
||||
quote: "WDI didn't just deliver code—they delivered a digital transformation. Scalable, stable, and beautifully engineered.",
|
||||
author: "Jay Ruparel",
|
||||
title: "Founder, Melbourne City Card",
|
||||
rating: 5,
|
||||
projectName: "Melbourne City Card",
|
||||
projectLogo: "https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?w=60&h=60&fit=crop&auto=format"
|
||||
},
|
||||
{
|
||||
quote: "WDI turned our idea into a highly usable mobile platform—sleek, stable, and scalable.",
|
||||
author: "Shannon",
|
||||
title: "Founder, Cheers to the Season Mobile App Redesign",
|
||||
rating: 5,
|
||||
projectName: "Cheers to the Season Mobile App Redesign",
|
||||
projectLogo: "https://images.unsplash.com/photo-1580489944761-15a19d654956?w=60&h=60&fit=crop&auto=format"
|
||||
},
|
||||
{
|
||||
quote: "WDI gave us a high-performance platform to blend financial learning with fun. Seamless and smart.",
|
||||
author: "Ravi Sharma",
|
||||
title: "Founder, Nifty Eleven Fantasy Trading App",
|
||||
rating: 5,
|
||||
projectName: "Nifty Eleven Fantasy Trading App",
|
||||
projectLogo: "https://images.unsplash.com/photo-1579621970563-ebec7560ff3e?w=60&h=60&fit=crop&auto=format"
|
||||
},
|
||||
{
|
||||
quote: "The new Amble App makes heritage immersive, intuitive, and scalable—exactly what we envisioned.",
|
||||
author: "RPG Foundation",
|
||||
title: "Team, Amble App - New Version",
|
||||
rating: 5,
|
||||
projectName: "Amble App - New Version",
|
||||
projectLogo: "https://images.unsplash.com/photo-1611224923853-80b023f02d71?w=60&h=60&fit=crop&auto=format"
|
||||
},
|
||||
{
|
||||
quote: "WDI delivered a deeply integrated, future-ready system that cut our admin overheads drastically.",
|
||||
author: "Ravi Bajaj",
|
||||
title: "Manager, Travel Portal Module Addition to ZingHR System",
|
||||
rating: 5,
|
||||
projectName: "Travel Portal Module Addition to ZingHR System",
|
||||
projectLogo: "https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d?w=60&h=60&fit=crop&auto=format"
|
||||
},
|
||||
{
|
||||
quote: "WDI executed my multi-phase platform with confidence and clarity. They turned ideas into an integrated system faster than expected.",
|
||||
author: "Matt Weightman",
|
||||
title: "Founder, MOT & Vehicle Management Portal",
|
||||
rating: 5,
|
||||
projectName: "MOT & Vehicle Management Portal",
|
||||
projectLogo: "https://images.unsplash.com/photo-1560472354-b33ff0c44a43?w=60&h=60&fit=crop&auto=format"
|
||||
}
|
||||
];
|
||||
|
||||
export const CarouselTestimonials = () => {
|
||||
const [currentIndex, setCurrentIndex] = useState(0);
|
||||
const [isAutoPlaying, setIsAutoPlaying] = useState(true);
|
||||
const intervalRef = useRef<NodeJS.Timeout | null>(null);
|
||||
|
||||
// Auto-play functionality
|
||||
useEffect(() => {
|
||||
if (isAutoPlaying) {
|
||||
intervalRef.current = setInterval(() => {
|
||||
setCurrentIndex((prevIndex) =>
|
||||
prevIndex === testimonials.length - 1 ? 0 : prevIndex + 1
|
||||
// Star rating component
|
||||
const StarRating = ({ rating }: { rating: number }) => {
|
||||
return (
|
||||
<div className="flex gap-1">
|
||||
{Array.from({ length: 5 }).map((_, i) => (
|
||||
<Star
|
||||
key={i}
|
||||
className={`w-4 h-4 ${
|
||||
i < rating
|
||||
? 'text-yellow-400 fill-yellow-400'
|
||||
: 'text-gray-600 fill-gray-600'
|
||||
}`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}, 5000);
|
||||
}
|
||||
};
|
||||
|
||||
return () => {
|
||||
if (intervalRef.current) {
|
||||
clearInterval(intervalRef.current);
|
||||
// Individual testimonial card
|
||||
const TestimonialCard = ({
|
||||
testimonial,
|
||||
onHover,
|
||||
onLeave
|
||||
}: {
|
||||
testimonial: typeof testimonials[0];
|
||||
onHover?: () => void;
|
||||
onLeave?: () => void;
|
||||
}) => {
|
||||
return (
|
||||
<div
|
||||
className="bg-card rounded-[10px] border border-border p-6 w-[400px] flex-shrink-0 hover:border-border/80 hover:shadow-lg transition-all duration-300 select-none"
|
||||
onMouseEnter={onHover}
|
||||
onMouseLeave={onLeave}
|
||||
style={{ userSelect: 'none' }}
|
||||
role="article"
|
||||
aria-label={`Testimonial from ${testimonial.author} at ${testimonial.projectName}`}
|
||||
>
|
||||
{/* Project Header - Image removed, text-only project name */}
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="font-medium text-foreground text-base">
|
||||
{testimonial.projectName}
|
||||
</span>
|
||||
</div>
|
||||
<StarRating rating={testimonial.rating} />
|
||||
</div>
|
||||
|
||||
{/* Quote */}
|
||||
<p className="text-muted-foreground leading-relaxed text-base mb-6">
|
||||
"{testimonial.quote}"
|
||||
</p>
|
||||
|
||||
{/* Author Info - Without Avatar */}
|
||||
<div className="pt-2 border-t border-border/50">
|
||||
<div className="font-medium text-foreground text-base">
|
||||
{testimonial.author}
|
||||
</div>
|
||||
<div className="text-muted-foreground text-sm mt-1">
|
||||
{testimonial.title}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// Single marquee component
|
||||
const MarqueeRow = ({ testimonials: rowTestimonials }: { testimonials: typeof testimonials }) => {
|
||||
const [isPaused, setIsPaused] = useState(false);
|
||||
const controls = useAnimationControls();
|
||||
const currentPositionRef = useRef(0);
|
||||
const animationRef = useRef<any>(null);
|
||||
const startTimeRef = useRef<number>(0);
|
||||
const pauseTimeRef = useRef<number>(0);
|
||||
|
||||
const ANIMATION_DURATION = 60; // seconds
|
||||
const TOTAL_DISTANCE = -100 * rowTestimonials.length; // total distance to travel
|
||||
|
||||
const startAnimation = async (fromPosition: number = 0) => {
|
||||
const remainingDistance = TOTAL_DISTANCE - fromPosition;
|
||||
const remainingDuration = (Math.abs(remainingDistance) / Math.abs(TOTAL_DISTANCE)) * ANIMATION_DURATION;
|
||||
|
||||
startTimeRef.current = Date.now();
|
||||
|
||||
try {
|
||||
await controls.start({
|
||||
x: [fromPosition, TOTAL_DISTANCE],
|
||||
transition: {
|
||||
duration: remainingDuration,
|
||||
ease: "linear",
|
||||
repeat: Infinity,
|
||||
repeatType: "loop",
|
||||
repeatDelay: 0,
|
||||
}
|
||||
});
|
||||
} catch (error) {
|
||||
// Animation was interrupted (paused)
|
||||
}
|
||||
};
|
||||
}, [isAutoPlaying]);
|
||||
|
||||
const goToPrevious = () => {
|
||||
setIsAutoPlaying(false);
|
||||
setCurrentIndex(currentIndex === 0 ? testimonials.length - 1 : currentIndex - 1);
|
||||
const pauseAnimation = () => {
|
||||
controls.stop();
|
||||
pauseTimeRef.current = Date.now();
|
||||
|
||||
// Calculate current position based on elapsed time
|
||||
const elapsedTime = (pauseTimeRef.current - startTimeRef.current) / 1000;
|
||||
const progress = (elapsedTime % ANIMATION_DURATION) / ANIMATION_DURATION;
|
||||
currentPositionRef.current = TOTAL_DISTANCE * progress;
|
||||
};
|
||||
|
||||
const goToNext = () => {
|
||||
setIsAutoPlaying(false);
|
||||
setCurrentIndex(currentIndex === testimonials.length - 1 ? 0 : currentIndex + 1);
|
||||
const resumeAnimation = () => {
|
||||
startAnimation(currentPositionRef.current);
|
||||
};
|
||||
|
||||
const goToSlide = (index: number) => {
|
||||
setIsAutoPlaying(false);
|
||||
setCurrentIndex(index);
|
||||
};
|
||||
|
||||
// Resume auto-play after user interaction
|
||||
// Start initial animation
|
||||
useEffect(() => {
|
||||
if (!isAutoPlaying) {
|
||||
const resumeTimer = setTimeout(() => {
|
||||
setIsAutoPlaying(true);
|
||||
}, 10000); // Resume after 10 seconds
|
||||
startAnimation();
|
||||
return () => {
|
||||
controls.stop();
|
||||
};
|
||||
}, []);
|
||||
|
||||
return () => clearTimeout(resumeTimer);
|
||||
// Handle pause/resume
|
||||
useEffect(() => {
|
||||
if (isPaused) {
|
||||
pauseAnimation();
|
||||
} else {
|
||||
resumeAnimation();
|
||||
}
|
||||
}, [isAutoPlaying]);
|
||||
}, [isPaused]);
|
||||
|
||||
const handleCardHover = () => {
|
||||
setIsPaused(true);
|
||||
};
|
||||
|
||||
const handleCardLeave = () => {
|
||||
setIsPaused(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<section className="py-32 bg-background">
|
||||
<div className="container mx-auto px-6 lg:px-8">
|
||||
<div
|
||||
className="flex overflow-hidden"
|
||||
role="region"
|
||||
aria-label="Client testimonials carousel"
|
||||
aria-live="polite"
|
||||
>
|
||||
<motion.div
|
||||
className="flex gap-6"
|
||||
animate={controls}
|
||||
onMouseEnter={handleCardHover}
|
||||
onMouseLeave={handleCardLeave}
|
||||
>
|
||||
{/* First set */}
|
||||
{rowTestimonials.map((testimonial, index) => (
|
||||
<TestimonialCard
|
||||
key={`first-${index}`}
|
||||
testimonial={testimonial}
|
||||
onHover={handleCardHover}
|
||||
onLeave={handleCardLeave}
|
||||
/>
|
||||
))}
|
||||
{/* Duplicate set for seamless loop */}
|
||||
{rowTestimonials.map((testimonial, index) => (
|
||||
<TestimonialCard
|
||||
key={`second-${index}`}
|
||||
testimonial={testimonial}
|
||||
onHover={handleCardHover}
|
||||
onLeave={handleCardLeave}
|
||||
/>
|
||||
))}
|
||||
</motion.div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// Clutch rating component
|
||||
const ClutchRating = () => {
|
||||
return (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.9 }}
|
||||
whileInView={{ opacity: 1, scale: 1 }}
|
||||
transition={{ duration: 0.6 }}
|
||||
viewport={{ once: true }}
|
||||
className="flex items-center gap-4 bg-card rounded-[10px] border border-border p-6 shadow-sm w-full max-w-sm mx-auto"
|
||||
>
|
||||
{/* Clutch Logo */}
|
||||
<div className="flex-shrink-0">
|
||||
<ImageWithFallback
|
||||
src={clutchLogo}
|
||||
alt="Clutch"
|
||||
className="w-16 h-16 object-contain rounded-lg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Rating Info */}
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<span className="font-semibold text-foreground text-xl">4.9</span>
|
||||
<StarRating rating={5} />
|
||||
</div>
|
||||
<div className="text-muted-foreground text-base mb-1">
|
||||
(47 reviews)
|
||||
</div>
|
||||
<div className="text-muted-foreground text-sm">
|
||||
Top Web Development Company on Clutch
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
};
|
||||
|
||||
export const CarouselTestimonials = () => {
|
||||
return (
|
||||
<section className="relative py-20 overflow-hidden">
|
||||
<div className="container mx-auto px-6 lg:px-8">
|
||||
{/* Centered Header */}
|
||||
<div className="text-center mb-16">
|
||||
<motion.h2
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
viewport={{ once: true }}
|
||||
className="text-center mb-20"
|
||||
className="text-4xl lg:text-5xl font-semibold text-foreground mb-4"
|
||||
>
|
||||
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
|
||||
What Our <span className="text-accent">Clients Say</span>
|
||||
</h2>
|
||||
<p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
|
||||
Hear from industry leaders who have transformed their businesses with our innovative solutions.
|
||||
</p>
|
||||
</motion.div>
|
||||
What Our Clients Say
|
||||
</motion.h2>
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.2 }}
|
||||
viewport={{ once: true }}
|
||||
className="text-muted-foreground text-xl max-w-2xl mx-auto"
|
||||
>
|
||||
Don't just take our word for it. Here's what founders and product leaders say about working with us.
|
||||
</motion.p>
|
||||
</div>
|
||||
|
||||
<div className="relative max-w-6xl mx-auto">
|
||||
{/* Main Testimonial Display */}
|
||||
<div className="relative overflow-hidden rounded-3xl">
|
||||
<AnimatePresence mode="wait">
|
||||
{/* Single Row Marquee Testimonials */}
|
||||
<div className="mb-16">
|
||||
<motion.div
|
||||
key={currentIndex}
|
||||
initial={{ opacity: 0, x: 100 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
exit={{ opacity: 0, x: -100 }}
|
||||
transition={{ duration: 0.5, ease: "easeInOut" }}
|
||||
>
|
||||
<Card className="bg-card/50 backdrop-blur-md border-white/10 shadow-2xl">
|
||||
<CardContent className="p-12">
|
||||
<div className="grid lg:grid-cols-3 gap-12 items-center">
|
||||
{/* Client Photo and Info */}
|
||||
<div className="lg:col-span-1 text-center lg:text-left">
|
||||
<div className="relative mb-8">
|
||||
<div className="w-32 h-32 mx-auto lg:mx-0 rounded-full overflow-hidden border-4 border-accent/20">
|
||||
<ImageWithFallback
|
||||
src={testimonials[currentIndex].image}
|
||||
alt={testimonials[currentIndex].name}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
{/* Rating Stars */}
|
||||
<div className="flex justify-center lg:justify-start gap-1 mt-6">
|
||||
{[...Array(testimonials[currentIndex].rating)].map((_, i) => (
|
||||
<Star key={i} className="w-5 h-5 fill-accent text-accent" />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<h3 className="text-2xl font-semibold text-foreground">
|
||||
{testimonials[currentIndex].name}
|
||||
</h3>
|
||||
<p className="text-accent font-medium">
|
||||
{testimonials[currentIndex].position}
|
||||
</p>
|
||||
<p className="text-muted-foreground">
|
||||
{testimonials[currentIndex].company}
|
||||
</p>
|
||||
<div className="pt-4">
|
||||
<span className="inline-block px-4 py-2 bg-accent/10 text-accent text-sm rounded-full border border-accent/20">
|
||||
{testimonials[currentIndex].projectType}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Testimonial Content */}
|
||||
<div className="lg:col-span-2">
|
||||
<div className="relative">
|
||||
{/* Quote Icon */}
|
||||
<div className="absolute -top-4 -left-4 text-6xl text-accent/20 font-serif">"</div>
|
||||
|
||||
<blockquote className="text-2xl lg:text-3xl text-foreground leading-relaxed font-medium pl-8">
|
||||
{testimonials[currentIndex].text}
|
||||
</blockquote>
|
||||
|
||||
{/* Clutch Logo */}
|
||||
<div className="flex items-center justify-end mt-8">
|
||||
<div className="text-sm text-muted-foreground mr-4">
|
||||
Verified Review on
|
||||
</div>
|
||||
<ImageWithFallback
|
||||
src={clutchLogo}
|
||||
alt="Clutch"
|
||||
className="h-8 w-auto opacity-70 hover:opacity-100 transition-opacity duration-300"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</motion.div>
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
|
||||
{/* Navigation Controls */}
|
||||
<div className="flex items-center justify-center mt-12 gap-8">
|
||||
{/* Previous Button */}
|
||||
<Button
|
||||
variant="outline"
|
||||
size="lg"
|
||||
onClick={goToPrevious}
|
||||
className="w-14 h-14 rounded-full border-white/20 hover:border-accent/50 hover:bg-accent/10 transition-all duration-300"
|
||||
>
|
||||
<ChevronLeft className="w-6 h-6" />
|
||||
</Button>
|
||||
|
||||
{/* Dots Indicator */}
|
||||
<div className="flex gap-3">
|
||||
{testimonials.map((_, index) => (
|
||||
<button
|
||||
key={index}
|
||||
onClick={() => goToSlide(index)}
|
||||
className={`w-3 h-3 rounded-full transition-all duration-300 ${
|
||||
index === currentIndex
|
||||
? 'bg-accent scale-125'
|
||||
: 'bg-white/30 hover:bg-white/50'
|
||||
}`}
|
||||
aria-label={`Go to testimonial ${index + 1}`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Next Button */}
|
||||
<Button
|
||||
variant="outline"
|
||||
size="lg"
|
||||
onClick={goToNext}
|
||||
className="w-14 h-14 rounded-full border-white/20 hover:border-accent/50 hover:bg-accent/10 transition-all duration-300"
|
||||
>
|
||||
<ChevronRight className="w-6 h-6" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Auto-play Indicator */}
|
||||
<div className="text-center mt-6">
|
||||
<button
|
||||
onClick={() => setIsAutoPlaying(!isAutoPlaying)}
|
||||
className="text-sm text-muted-foreground hover:text-foreground transition-colors duration-300"
|
||||
>
|
||||
{isAutoPlaying ? '⏸ Pause Auto-play' : '▶ Resume Auto-play'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Additional Social Proof */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
initial={{ opacity: 0, y: 40 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.3 }}
|
||||
viewport={{ once: true }}
|
||||
className="text-center mt-20 pt-16 border-t border-white/10"
|
||||
>
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-8 max-w-4xl mx-auto">
|
||||
<div className="space-y-2">
|
||||
<div className="text-3xl font-bold text-accent">98%</div>
|
||||
<div className="text-sm text-muted-foreground">Client Satisfaction</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<div className="text-3xl font-bold text-accent">150+</div>
|
||||
<div className="text-sm text-muted-foreground">Projects Delivered</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<div className="text-3xl font-bold text-accent">5.0</div>
|
||||
<div className="text-sm text-muted-foreground">Average Rating</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<div className="text-3xl font-bold text-accent">24/7</div>
|
||||
<div className="text-sm text-muted-foreground">Support Available</div>
|
||||
</div>
|
||||
</div>
|
||||
<MarqueeRow testimonials={testimonials} />
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
{/* Centered Clutch Rating */}
|
||||
<div className="flex justify-center">
|
||||
<ClutchRating />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
@@ -1,272 +1,232 @@
|
||||
import React from "react";
|
||||
import { motion } from "framer-motion";
|
||||
import { Card, CardContent } from "./ui/card";
|
||||
import { ArrowRight, ExternalLink } from "lucide-react";
|
||||
import { Button } from "./ui/button";
|
||||
import { Badge } from "./ui/badge";
|
||||
import { ArrowRight, ExternalLink, TrendingUp, Users, Clock, Star } from "lucide-react";
|
||||
import { GridPattern } from "./GridPattern";
|
||||
import { ImageWithFallback } from "./figma/ImageWithFallback";
|
||||
import { navigateTo } from "../App";
|
||||
import regroupImage from '../assets/images/regroup.webp';
|
||||
import seezunImage from '../assets/images/seezun.webp';
|
||||
// import wokaImage from '../assets/images/woka.webp';
|
||||
import wokaAwardImage from '../assets/images/woka.webp';
|
||||
import tanamiImage from '../assets/images/tanami.webp';
|
||||
|
||||
// High-quality project images
|
||||
const regroupImage = "https://images.unsplash.com/photo-1551650975-87deedd944c3?w=600&h=400&fit=crop&auto=format";
|
||||
const seezunImage = "https://images.unsplash.com/photo-1512941937669-90a1b58e7e9c?w=600&h=400&fit=crop&auto=format";
|
||||
const wokaAwardImage = "https://images.unsplash.com/photo-1517077304055-6e89abbf09b0?w=600&h=400&fit=crop&auto=format";
|
||||
const featuredCaseStudy = {
|
||||
title: "Woka",
|
||||
description: "Developed Woka as a vibrant platform where learning meets play. With a safe and fun environment to explore, learn, and grow effortlessly.",
|
||||
achievement: "+300% User Retention",
|
||||
industryTags: ["Education", "Learning Platform"],
|
||||
image: wokaAwardImage,
|
||||
metrics: [
|
||||
{ label: "Active Users", value: "500K+" },
|
||||
{ label: "User Retention", value: "+300%" },
|
||||
{ label: "Learning Hours", value: "+180%" }
|
||||
]
|
||||
};
|
||||
|
||||
const caseStudies = [
|
||||
{
|
||||
id: 1,
|
||||
title: "Regroup",
|
||||
subtitle: "Social Networking Revolution",
|
||||
description: "A comprehensive social platform that connects communities worldwide with advanced messaging, group management, and content sharing capabilities.",
|
||||
image: regroupImage,
|
||||
category: "Social Platform",
|
||||
client: "Regroup Technologies",
|
||||
duration: "8 months",
|
||||
teamSize: "12 developers",
|
||||
technologies: ["React Native", "Node.js", "MongoDB", "WebRTC", "AWS"],
|
||||
results: [
|
||||
{ metric: "User Engagement", value: "+240%" },
|
||||
{ metric: "Active Communities", value: "50K+" },
|
||||
{ metric: "Daily Messages", value: "2.5M+" }
|
||||
],
|
||||
awards: ["Best Social App 2023", "Innovation Award"],
|
||||
link: "/projects/regroup",
|
||||
featured: true
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Seezun",
|
||||
subtitle: "Next-Gen E-commerce Platform",
|
||||
description: "Revolutionary e-commerce solution with AI-powered recommendations, seamless checkout, and integrated inventory management for modern retailers.",
|
||||
image: seezunImage,
|
||||
category: "E-commerce",
|
||||
client: "Seezun Retail",
|
||||
duration: "6 months",
|
||||
teamSize: "8 developers",
|
||||
technologies: ["React", "Python", "PostgreSQL", "Redis", "Stripe"],
|
||||
results: [
|
||||
{ metric: "Conversion Rate", value: "+180%" },
|
||||
{ metric: "Page Load Speed", value: "2.1s" },
|
||||
{ metric: "Customer Satisfaction", value: "4.9/5" }
|
||||
],
|
||||
awards: ["E-commerce Excellence Award"],
|
||||
link: "/projects/seezun",
|
||||
featured: true
|
||||
description: "Created Seezun as a dynamic customer-driven platform connecting buyers, sellers, and renters for a seamless marketplace that renders fashion accessible, sustainable, and affordable.",
|
||||
achievement: "+85% Brand Recognition",
|
||||
industryTags: ["Branding", "Fashion"],
|
||||
image: seezunImage
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "Woka",
|
||||
subtitle: "Award-Winning Fitness App",
|
||||
description: "Comprehensive fitness and wellness platform with personalized workout plans, nutrition tracking, and community features that won multiple industry awards.",
|
||||
image: wokaAwardImage,
|
||||
category: "Health & Fitness",
|
||||
client: "Woka Wellness",
|
||||
duration: "10 months",
|
||||
teamSize: "15 developers",
|
||||
technologies: ["Flutter", "Firebase", "TensorFlow", "Apple HealthKit", "Google Fit"],
|
||||
results: [
|
||||
{ metric: "User Retention", value: "+320%" },
|
||||
{ metric: "Workout Completions", value: "1M+" },
|
||||
{ metric: "App Store Rating", value: "4.8/5" }
|
||||
],
|
||||
awards: ["App of the Year 2023", "Health Innovation Award", "User Choice Award"],
|
||||
link: "/projects/woka",
|
||||
featured: true
|
||||
title: "Regroup",
|
||||
description: "Built Regroup as a social platform that brings together passion, global connections, teamwork, and love for sports through a vibrant online community.",
|
||||
achievement: "+150% User Engagement",
|
||||
industryTags: ["Social Media", "Digital Products"],
|
||||
image: regroupImage
|
||||
},
|
||||
{
|
||||
title: "Tanami",
|
||||
description: "Revolutionized Tanami Capital into a powerful, intuitive platform that streamlines portfolio management and empowers users to grow their wealth effortlessly.",
|
||||
achievement: "+200% Portfolio Growth",
|
||||
industryTags: ["FinTech", "Wealth Management"],
|
||||
image: tanamiImage
|
||||
}
|
||||
];
|
||||
|
||||
const SmallCaseStudyCard = ({ study, index }: { study: typeof caseStudies[0]; index: number }) => {
|
||||
const getNavigationPath = (title: string) => {
|
||||
switch (title) {
|
||||
case 'Seezun':
|
||||
return '/projects/seezun';
|
||||
case 'Woka':
|
||||
return '/projects/woka';
|
||||
case 'Tanami':
|
||||
return '/projects/tanami';
|
||||
case 'Regroup':
|
||||
return '/projects/regroup';
|
||||
default:
|
||||
return '/case-studies';
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 50 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: index * 0.1 }}
|
||||
viewport={{ once: true }}
|
||||
className="group bg-card rounded-[10px] overflow-hidden hover:bg-card/80 hover:shadow-lg hover:scale-[1.02] transition-all duration-300 cursor-pointer border border-transparent hover:border-border/50"
|
||||
onClick={() => navigateTo(getNavigationPath(study.title))}
|
||||
>
|
||||
<div className="relative aspect-[4/3] overflow-hidden bg-muted/30 px-2 rounded-[10px]">
|
||||
<ImageWithFallback
|
||||
src={study.image}
|
||||
alt={
|
||||
study.title === "Seezun" ? "Seezun fashion marketplace app banner showcasing mobile shopping experience" :
|
||||
study.title === "Woka" ? "Woka learning platform banner showcasing educational mobile app features" :
|
||||
study.title === "Tanami" ? "Tanami Capital financial platform banner showcasing investment portfolio management" :
|
||||
study.title === "Regroup" ? "Regroup mobile app banner showcasing sports networking features" :
|
||||
study.title
|
||||
}
|
||||
className={`w-full h-full ${["Seezun", "Woka", "Tanami", "Regroup"].includes(study.title) ? "object-contain" : "object-cover"} object-center ${["Seezun", "Woka", "Tanami", "Regroup"].includes(study.title) ? "group-hover:scale-[1.02]" : "group-hover:scale-105"} transition-transform duration-500 rounded-[10px]`}
|
||||
/>
|
||||
<div className="absolute top-4 left-4 z-10">
|
||||
<span className="px-3 py-1 bg-accent text-accent-foreground text-sm font-medium rounded-[10px]">
|
||||
{study.achievement}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-6">
|
||||
<h3 className="text-xl font-semibold text-foreground mb-3 group-hover:text-accent transition-colors duration-300">
|
||||
{study.title}
|
||||
</h3>
|
||||
<p className="text-muted-foreground text-sm mb-4 leading-relaxed">
|
||||
{study.description}
|
||||
</p>
|
||||
|
||||
<div className="flex flex-wrap gap-2 mb-4">
|
||||
{study.industryTags.map((tag) => (
|
||||
<span
|
||||
key={tag}
|
||||
className="px-3 py-1 bg-muted text-muted-foreground text-xs rounded-[10px]"
|
||||
>
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<button
|
||||
className="text-accent text-sm font-medium hover:text-foreground transition-colors duration-300 flex items-center gap-2 group-hover:translate-x-1 transition-transform duration-300"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
navigateTo(getNavigationPath(study.title));
|
||||
}}
|
||||
>
|
||||
View Case Study <ArrowRight className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
};
|
||||
|
||||
export const CaseStudyHighlight = () => {
|
||||
return (
|
||||
<section className="py-32 bg-background">
|
||||
<div className="container mx-auto px-6 lg:px-8">
|
||||
{/* Section Header */}
|
||||
<section className="relative py-20 bg-background overflow-hidden">
|
||||
<GridPattern strokeDasharray="4 2" />
|
||||
|
||||
<div className="relative z-10 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"
|
||||
className="text-center mb-16"
|
||||
>
|
||||
<Badge variant="outline" className="mb-6 border-accent/20 text-accent">
|
||||
Featured Work
|
||||
</Badge>
|
||||
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
|
||||
Success Stories That <span className="text-accent">Define Excellence</span>
|
||||
<h2 className="text-3xl lg:text-4xl font-semibold text-foreground mb-4">
|
||||
See What We've Built
|
||||
</h2>
|
||||
<p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
|
||||
Explore our award-winning projects that have transformed businesses and delighted millions of users worldwide.
|
||||
<p className="text-muted-foreground text-lg max-w-2xl mx-auto">
|
||||
Real results from real projects. Here's how we've helped companies scale their digital products.
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
{/* Featured Case Studies Grid */}
|
||||
<div className="grid lg:grid-cols-3 gap-8 mb-16">
|
||||
{caseStudies.map((study, index) => (
|
||||
<motion.div
|
||||
key={study.id}
|
||||
initial={{ opacity: 0, y: 40 }}
|
||||
initial={{ opacity: 0, y: 50 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: index * 0.2 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
viewport={{ once: true }}
|
||||
whileHover={{ y: -8, scale: 1.02 }}
|
||||
className="group cursor-pointer"
|
||||
onClick={() => navigateTo(study.link)}
|
||||
className="bg-card rounded-[10px] overflow-hidden mb-12 group cursor-pointer hover:bg-card/80 hover:shadow-xl hover:scale-[1.01] transition-all duration-300 border border-transparent hover:border-accent/20"
|
||||
onClick={() => navigateTo('/projects/woka')}
|
||||
>
|
||||
<Card className="bg-card/50 backdrop-blur-md border-white/10 hover:border-accent/30 transition-all duration-500 shadow-lg hover:shadow-2xl hover:shadow-accent/10 rounded-2xl overflow-hidden h-full">
|
||||
<CardContent className="p-0 flex flex-col h-full">
|
||||
{/* Image Header */}
|
||||
<div className="relative overflow-hidden">
|
||||
<div className="grid lg:grid-cols-3 gap-0">
|
||||
<div className="lg:col-span-2 relative aspect-[16/10] sm:aspect-[16/9] overflow-hidden bg-muted/30 px-2 rounded-[10px]">
|
||||
<ImageWithFallback
|
||||
src={study.image}
|
||||
alt={study.title}
|
||||
className="w-full h-64 object-cover transition-transform duration-500 group-hover:scale-110"
|
||||
src={featuredCaseStudy.image}
|
||||
alt="Woka educational platform mobile app interface with award recognition and interactive learning features for children"
|
||||
className="w-full h-full object-contain object-center group-hover:scale-[1.02] transition-transform duration-700 rounded-[10px]"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent" />
|
||||
|
||||
{/* Category Badge */}
|
||||
<div className="absolute top-4 left-4">
|
||||
<Badge className="bg-accent/90 text-white border-0">
|
||||
{study.category}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
{/* Awards */}
|
||||
{study.awards.length > 0 && (
|
||||
<div className="absolute top-4 right-4">
|
||||
<div className="bg-amber-500/90 text-white px-3 py-1 rounded-full text-xs font-medium flex items-center gap-1">
|
||||
<Star className="w-3 h-3 fill-current" />
|
||||
Award Winner
|
||||
<div className="absolute top-6 left-6 z-10">
|
||||
<span className="px-4 py-2 bg-accent text-accent-foreground font-semibold rounded-[10px]">
|
||||
{featuredCaseStudy.achievement}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Project Title Overlay */}
|
||||
<div className="absolute bottom-4 left-4 right-4">
|
||||
<h3 className="text-2xl font-bold text-white mb-1">
|
||||
{study.title}
|
||||
<div className="p-8 lg:p-12 flex flex-col justify-center">
|
||||
<h3 className="text-3xl lg:text-4xl font-semibold text-foreground mb-6 group-hover:text-accent transition-colors duration-300">
|
||||
{featuredCaseStudy.title}
|
||||
</h3>
|
||||
<p className="text-white/80 text-sm">
|
||||
{study.subtitle}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="p-8 flex-1 flex flex-col">
|
||||
<p className="text-muted-foreground leading-relaxed mb-6 flex-1">
|
||||
{study.description}
|
||||
<p className="text-muted-foreground mb-8 leading-relaxed">
|
||||
{featuredCaseStudy.description}
|
||||
</p>
|
||||
|
||||
{/* Key Metrics */}
|
||||
<div className="grid grid-cols-3 gap-4 mb-6 p-4 bg-accent/5 rounded-lg border border-accent/10">
|
||||
{study.results.slice(0, 3).map((result, idx) => (
|
||||
<div key={idx} className="text-center">
|
||||
<div className="text-lg font-bold text-accent">
|
||||
{result.value}
|
||||
</div>
|
||||
<div className="text-xs text-muted-foreground">
|
||||
{result.metric}
|
||||
</div>
|
||||
<div className="space-y-4 mb-8">
|
||||
{featuredCaseStudy.metrics.map((metric) => (
|
||||
<div key={metric.label} className="flex justify-between items-center">
|
||||
<span className="text-muted-foreground text-sm">{metric.label}</span>
|
||||
<span className="text-foreground font-semibold">{metric.value}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Technologies */}
|
||||
<div className="mb-6">
|
||||
<p className="text-sm font-medium text-foreground mb-2">Technologies:</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{study.technologies.slice(0, 3).map((tech) => (
|
||||
<Badge key={tech} variant="secondary" className="text-xs bg-muted/50">
|
||||
{tech}
|
||||
</Badge>
|
||||
))}
|
||||
{study.technologies.length > 3 && (
|
||||
<Badge variant="secondary" className="text-xs bg-muted/50">
|
||||
+{study.technologies.length - 3} more
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Project Details */}
|
||||
<div className="grid grid-cols-2 gap-4 mb-6 text-sm">
|
||||
<div className="flex items-center gap-2 text-muted-foreground">
|
||||
<Clock className="w-4 h-4" />
|
||||
{study.duration}
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-muted-foreground">
|
||||
<Users className="w-4 h-4" />
|
||||
{study.teamSize}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Awards List */}
|
||||
{study.awards.length > 0 && (
|
||||
<div className="mb-6">
|
||||
<p className="text-sm font-medium text-foreground mb-2">Awards:</p>
|
||||
<div className="space-y-1">
|
||||
{study.awards.slice(0, 2).map((award, idx) => (
|
||||
<div key={idx} className="flex items-center gap-2 text-sm text-amber-600">
|
||||
<Star className="w-3 h-3 fill-current" />
|
||||
{award}
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2 mb-8">
|
||||
{featuredCaseStudy.industryTags.map((tag) => (
|
||||
<span
|
||||
key={tag}
|
||||
className="px-3 py-1 bg-muted text-muted-foreground text-sm rounded-[10px]"
|
||||
>
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* CTA Button */}
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="w-full justify-between text-accent hover:text-accent hover:bg-accent/10 group-hover:translate-x-1 transition-all duration-300 mt-auto"
|
||||
<button
|
||||
className="text-accent font-medium hover:text-foreground transition-colors duration-300 flex items-center gap-3 group-hover:translate-x-2 transition-transform duration-300"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
navigateTo(study.link);
|
||||
navigateTo('/projects/woka');
|
||||
}}
|
||||
>
|
||||
<span>View Case Study</span>
|
||||
<ArrowRight className="w-4 h-4" />
|
||||
</Button>
|
||||
View Full Case Study <ArrowRight className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</motion.div>
|
||||
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 mb-12">
|
||||
{caseStudies.map((study, index) => (
|
||||
<SmallCaseStudyCard key={study.title} study={study} index={index} />
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Call-to-Action */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.6 }}
|
||||
transition={{ duration: 0.6, delay: 0.8 }}
|
||||
viewport={{ once: true }}
|
||||
className="text-center"
|
||||
>
|
||||
<div className="bg-gradient-to-r from-accent/10 via-accent/5 to-accent/10 rounded-2xl p-8 border border-accent/20">
|
||||
<h3 className="text-2xl font-semibold text-foreground mb-4">
|
||||
Ready to Create Your Success Story?
|
||||
</h3>
|
||||
<p className="text-muted-foreground mb-6 max-w-2xl mx-auto">
|
||||
Join the ranks of industry leaders who have transformed their businesses with our innovative solutions.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<Button
|
||||
size="lg"
|
||||
className="bg-accent hover:bg-accent/90 text-white"
|
||||
onClick={() => navigateTo("/case-studies")}
|
||||
onClick={() => navigateTo('/case-studies')}
|
||||
className="bg-accent hover:bg-accent/90 text-accent-foreground px-8 py-3 rounded-[10px]"
|
||||
>
|
||||
View All Case Studies
|
||||
<ExternalLink className="w-4 h-4 ml-2" />
|
||||
View All Case Studies <ExternalLink className="w-4 h-4 ml-2" />
|
||||
</Button>
|
||||
<Button
|
||||
size="lg"
|
||||
variant="outline"
|
||||
onClick={() => navigateTo("/start-a-project")}
|
||||
>
|
||||
Start Your Project
|
||||
<ArrowRight className="w-4 h-4 ml-2" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import { Button } from "./ui/button";
|
||||
import { GridPattern } from "./GridPattern";
|
||||
import { SplineFallback } from "./SplineFallback";
|
||||
import { Calendar, Briefcase } from "lucide-react";
|
||||
import { navigateTo } from "../App";
|
||||
import { motion } from "framer-motion";
|
||||
|
||||
export function HeroSection() {
|
||||
return (
|
||||
@@ -11,9 +11,20 @@ export function HeroSection() {
|
||||
|
||||
<div className="container mx-auto px-6 lg:px-8">
|
||||
<div className="flex flex-col-reverse lg:flex-row items-center gap-12 w-full py-24 relative z-10">
|
||||
<div className="w-full lg:w-1/2">
|
||||
{/* Left Content */}
|
||||
<motion.div
|
||||
className="w-full lg:w-1/2"
|
||||
initial={{ opacity: 0, x: -50 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
>
|
||||
{/* Animated Badge */}
|
||||
<div className="group relative inline-flex items-center rounded-full px-4 py-1.5 shadow-[inset_0_-8px_10px_#8fdfff1f] transition-shadow duration-500 ease-out hover:shadow-[inset_0_-5px_10px_#8fdfff3f] mb-6">
|
||||
<motion.div
|
||||
className="group relative inline-flex items-center rounded-full px-4 py-1.5 shadow-[inset_0_-8px_10px_#8fdfff1f] transition-shadow duration-500 ease-out hover:shadow-[inset_0_-5px_10px_#8fdfff3f] mb-6"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.2 }}
|
||||
>
|
||||
<span
|
||||
className="absolute inset-0 block h-full w-full animate-gradient rounded-[inherit] bg-gradient-to-r from-[#ffaa40]/50 via-[#9c40ff]/50 to-[#ffaa40]/50 bg-[length:300%_100%] p-[1px]"
|
||||
style={{
|
||||
@@ -37,17 +48,32 @@ export function HeroSection() {
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<h1 className="text-4xl sm:text-5xl md:text-6xl font-semibold tracking-tight text-white max-w-3xl">
|
||||
Architecting Digital Success for Startups & Enterprises
|
||||
</h1>
|
||||
<motion.h1
|
||||
className="text-4xl sm:text-5xl md:text-6xl font-semibold tracking-tight text-white max-w-3xl"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.3 }}
|
||||
>
|
||||
Architecting Digital Success for Startups & Enterprises
|
||||
</motion.h1>
|
||||
|
||||
<p className="mt-6 max-w-2xl text-lg text-gray-400">
|
||||
<motion.p
|
||||
className="mt-6 max-w-2xl text-lg text-gray-400"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.4 }}
|
||||
>
|
||||
We design and build secure, AI-powered apps and software tailored for scale, speed, and user engagement.
|
||||
</p>
|
||||
</motion.p>
|
||||
|
||||
<div className="mt-10 flex flex-col sm:flex-row gap-3">
|
||||
<motion.div
|
||||
className="mt-10 flex flex-col sm:flex-row gap-3"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.5 }}
|
||||
>
|
||||
<Button size="lg" className="whitespace-nowrap" onClick={() => navigateTo('/contact')}>
|
||||
<Calendar className="w-4 h-4" />
|
||||
Book a Free Consultation
|
||||
@@ -57,33 +83,109 @@ export function HeroSection() {
|
||||
<Briefcase className="w-4 h-4" />
|
||||
Explore Services
|
||||
</Button>
|
||||
</div>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
|
||||
{/* Right Side - Animated Gradient Background */}
|
||||
<motion.div
|
||||
className="w-full lg:w-1/2 h-[320px] md:h-[480px] lg:h-[560px] shrink-0 relative"
|
||||
initial={{ opacity: 0, x: 50 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.2 }}
|
||||
>
|
||||
<div className="w-full h-full relative overflow-hidden rounded-2xl">
|
||||
{/* Animated gradient background */}
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-[#E5195E]/20 via-[#9c40ff]/20 to-[#ffaa40]/20 animate-gradient bg-[length:400%_400%]" />
|
||||
|
||||
{/* Floating orbs */}
|
||||
<div className="absolute inset-0">
|
||||
<motion.div
|
||||
className="absolute top-1/4 left-1/4 w-32 h-32 bg-[#E5195E]/30 rounded-full blur-xl"
|
||||
animate={{
|
||||
scale: [1, 1.2, 1],
|
||||
opacity: [0.3, 0.6, 0.3],
|
||||
}}
|
||||
transition={{
|
||||
duration: 4,
|
||||
repeat: Infinity,
|
||||
ease: "easeInOut",
|
||||
}}
|
||||
/>
|
||||
<motion.div
|
||||
className="absolute top-1/2 right-1/4 w-24 h-24 bg-[#9c40ff]/30 rounded-full blur-xl"
|
||||
animate={{
|
||||
scale: [1, 1.3, 1],
|
||||
opacity: [0.3, 0.5, 0.3],
|
||||
}}
|
||||
transition={{
|
||||
duration: 3,
|
||||
repeat: Infinity,
|
||||
ease: "easeInOut",
|
||||
delay: 1,
|
||||
}}
|
||||
/>
|
||||
<motion.div
|
||||
className="absolute bottom-1/3 left-1/2 w-20 h-20 bg-[#ffaa40]/30 rounded-full blur-xl"
|
||||
animate={{
|
||||
scale: [1, 1.1, 1],
|
||||
opacity: [0.3, 0.7, 0.3],
|
||||
}}
|
||||
transition={{
|
||||
duration: 5,
|
||||
repeat: Infinity,
|
||||
ease: "easeInOut",
|
||||
delay: 2,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="w-full lg:w-1/2 h-[320px] md:h-[480px] lg:h-[560px] shrink-0 relative">
|
||||
{/* 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-blue-500/20 to-cyan-500/20 rounded-full blur-2xl animate-pulse delay-1000"></div>
|
||||
<div className="absolute bottom-1/4 left-1/3 w-20 h-20 bg-gradient-to-r from-green-500/20 to-emerald-500/20 rounded-full blur-2xl animate-pulse delay-2000"></div>
|
||||
{/* Tech grid overlay */}
|
||||
<div className="absolute inset-0 opacity-10">
|
||||
<div
|
||||
className="w-full h-full"
|
||||
style={{
|
||||
backgroundImage: `
|
||||
linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px)
|
||||
`,
|
||||
backgroundSize: '40px 40px',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Interactive 3D-like Animation */}
|
||||
<div className="relative w-full h-full rounded-xl overflow-hidden border border-gray-800/50 bg-gradient-to-br from-gray-900/50 to-gray-800/30 backdrop-blur-sm">
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-[#E5195E]/5 to-purple-500/5 rounded-xl"></div>
|
||||
<div className="relative z-10 w-full h-full">
|
||||
<SplineFallback />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Central focus point */}
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<motion.div
|
||||
className="w-3 h-3 bg-white rounded-full shadow-lg"
|
||||
animate={{
|
||||
scale: [1, 1.5, 1],
|
||||
opacity: [0.8, 1, 0.8],
|
||||
}}
|
||||
transition={{
|
||||
duration: 2,
|
||||
repeat: Infinity,
|
||||
ease: "easeInOut",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Floating Elements */}
|
||||
<div className="absolute bottom-10 left-1/2 transform -translate-x-1/2 animate-bounce">
|
||||
{/* Subtle border */}
|
||||
<div className="absolute inset-0 rounded-2xl border border-white/10" />
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
{/* Floating scroll indicator */}
|
||||
<motion.div
|
||||
className="absolute bottom-10 left-1/2 transform -translate-x-1/2 animate-bounce"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 1.0 }}
|
||||
>
|
||||
<svg className="w-6 h-6 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 14l-7 7m0 0l-7-7m7 7V3" />
|
||||
</svg>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
||||
29
global.d.ts
vendored
Normal file
29
global.d.ts
vendored
Normal file
@@ -0,0 +1,29 @@
|
||||
declare module '*.webp' {
|
||||
const src: string;
|
||||
export default src;
|
||||
}
|
||||
|
||||
declare module '*.png' {
|
||||
const src: string;
|
||||
export default src;
|
||||
}
|
||||
|
||||
declare module '*.jpg' {
|
||||
const src: string;
|
||||
export default src;
|
||||
}
|
||||
|
||||
declare module '*.jpeg' {
|
||||
const src: string;
|
||||
export default src;
|
||||
}
|
||||
|
||||
declare module '*.svg' {
|
||||
const src: string;
|
||||
export default src;
|
||||
}
|
||||
|
||||
declare module '*.gif' {
|
||||
const src: string;
|
||||
export default src;
|
||||
}
|
||||
@@ -1,16 +1,15 @@
|
||||
import { motion } from "framer-motion";
|
||||
import {
|
||||
Apple,
|
||||
ArrowRight,
|
||||
Award,
|
||||
Bolt,
|
||||
BookOpen,
|
||||
Brush,
|
||||
Bug,
|
||||
Database,
|
||||
Brain,
|
||||
Building,
|
||||
Calendar,
|
||||
DollarSign,
|
||||
Eye,
|
||||
Layers,
|
||||
Globe, Layers,
|
||||
Play,
|
||||
Rocket,
|
||||
Settings,
|
||||
@@ -19,38 +18,35 @@ import {
|
||||
ShoppingCart,
|
||||
Smartphone,
|
||||
Stethoscope,
|
||||
Tablet,
|
||||
Truck,
|
||||
Tv,
|
||||
UserPlus,
|
||||
Watch,
|
||||
Wifi,
|
||||
Zap
|
||||
} from "lucide-react";
|
||||
import React from "react";
|
||||
import { navigateTo } from "../App";
|
||||
import { FAQSection } from "../components/FAQSection";
|
||||
import { Footer } from "../components/Footer";
|
||||
import { Navigation } from "../components/Navigation";
|
||||
import { ProcessSection } from "../components/ProcessSection";
|
||||
import { ImageWithFallback } from "../components/figma/ImageWithFallback";
|
||||
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 Group1597880681 from "../assets/Group1597880681";
|
||||
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
|
||||
import heroMockupImage from '../assets/images/mobile-app-banner.webp';
|
||||
|
||||
// Enhanced Hero Section with compact mockup and integrated stats
|
||||
|
||||
// Enhanced Hero Section - NEW IMAGE WITH COMPREHENSIVE CSS REQUIREMENTS
|
||||
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"
|
||||
>
|
||||
{/* Mobile App Development Label */}
|
||||
<motion.div
|
||||
@@ -58,91 +54,99 @@ const HeroWithCTA = () => {
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6 }}
|
||||
>
|
||||
<span className="text-white/70 text-sm font-medium">Mobile App Development</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">
|
||||
<Smartphone className="w-4 h-4 text-[#E5195E]" />
|
||||
<span className="text-white/90 text-sm font-medium">Mobile App Development</span>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Main Heading - Updated Content */}
|
||||
<div className="space-y-6">
|
||||
<h1 className="text-4xl md:text-5xl lg:text-6xl font-semibold text-white leading-tight">
|
||||
Expert Mobile App Development Services
|
||||
{/* Main Heading */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
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">
|
||||
<span className="text-white">Expert </span>
|
||||
<span className="text-[#E5195E]">Mobile App Development</span>
|
||||
<span className="text-white"> Services</span>
|
||||
</h1>
|
||||
|
||||
<p className="text-lg text-gray-300 leading-relaxed max-w-lg">
|
||||
Build secure, scalable, high-performance apps for iOS, Android, or cross-platform — fast.
|
||||
</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Updated CTAs - Using provided code structure */}
|
||||
{/* BULLET POINTS REMOVED - Content flows directly to CTAs */}
|
||||
|
||||
{/* CTAs - STANDARDIZED BUTTON HEIGHTS WITH IMPROVED SPACING */}
|
||||
<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"
|
||||
transition={{ duration: 0.8, delay: 0.2 }}
|
||||
className="flex flex-col sm:flex-row gap-4 pt-4"
|
||||
>
|
||||
<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')}
|
||||
>
|
||||
<ShimmerButton className="text-lg px-8 py-4" onClick={() => navigateTo('/contact')}>
|
||||
<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>
|
||||
<Calendar className="w-5 h-5 flex-shrink-0" />
|
||||
<span>Book a Discovery Call</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 our work</span>
|
||||
</Button>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
|
||||
{/* Right side with compact phone mockups and integrated stats */}
|
||||
{/* Right side with hero image - COMPREHENSIVE CSS IMPLEMENTATION */}
|
||||
<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"
|
||||
>
|
||||
{/* Compact Phone Mockups with Integrated Stats Layout */}
|
||||
<div className="relative w-full max-w-lg mx-auto">
|
||||
{/* Phone Mockups Component - Reduced Size */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.4 }}
|
||||
className="relative h-[350px] w-full mb-8 scale-75 origin-top"
|
||||
{/* 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'
|
||||
}}
|
||||
>
|
||||
<Group1597880681 />
|
||||
</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-105"
|
||||
style={{
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
objectFit: 'contain',
|
||||
objectPosition: 'center',
|
||||
maxWidth: '100%',
|
||||
display: 'block'
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Integrated Statistics - Positioned to align with phones */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.6 }}
|
||||
className="grid grid-cols-3 gap-8 text-center -mt-12 relative z-10"
|
||||
>
|
||||
{/* Left Phone Stats */}
|
||||
<div className="space-y-2 flex flex-col items-center">
|
||||
<div className="text-3xl lg:text-4xl font-bold text-white">75+</div>
|
||||
<div className="text-sm text-gray-400 leading-tight">App Developed</div>
|
||||
</div>
|
||||
|
||||
{/* Center Phone Stats */}
|
||||
<div className="space-y-2 flex flex-col items-center">
|
||||
<div className="text-3xl lg:text-4xl font-bold text-white">25+</div>
|
||||
<div className="text-sm text-gray-400 leading-tight">App Deployed</div>
|
||||
</div>
|
||||
|
||||
{/* Right Phone Stats */}
|
||||
<div className="space-y-2 flex flex-col items-center">
|
||||
<div className="text-3xl lg:text-4xl font-bold text-white">3M+</div>
|
||||
<div className="text-sm text-gray-400 leading-tight">App downloads</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
{/* 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>
|
||||
@@ -383,37 +387,43 @@ const TabbedServiceDisplay = () => {
|
||||
{
|
||||
title: "iOS App Development",
|
||||
icon: Smartphone,
|
||||
description: "Transforming Concepts Into Captivating Mobile Experiences With Our Expert App Developments Service"
|
||||
description: "Native iOS applications built with Swift and optimized for App Store success.",
|
||||
link: "/services/ios-app-development"
|
||||
},
|
||||
{
|
||||
title: "Android App Development",
|
||||
icon: Smartphone,
|
||||
description: "Transforming Concepts Into Captivating Mobile Experiences With Our Expert App Developments Service"
|
||||
description: "High-performance Android apps using Kotlin with Google Play optimization.",
|
||||
link: "/services/android-app-development"
|
||||
},
|
||||
{
|
||||
title: "Cross-Platform Development",
|
||||
icon: Layers,
|
||||
description: "Efficient cross-platform solutions using React Native and Flutter.",
|
||||
link: "/services/cross-platform-app-development"
|
||||
},
|
||||
{
|
||||
title: "Wearable App Development",
|
||||
icon: Watch,
|
||||
description: "Transforming Concepts Into Captivating Mobile Experiences With Our Expert App Developments Service"
|
||||
description: "Smart watch and wearable device applications for health and fitness.",
|
||||
link: "/services/wearable-device-development"
|
||||
},
|
||||
{
|
||||
title: "Tablet",
|
||||
icon: Tablet,
|
||||
description: "Transforming Concepts Into Captivating Mobile Experiences With Our Expert App Developments Service"
|
||||
title: "Progressive Web Apps",
|
||||
icon: Globe,
|
||||
description: "Web applications that work like native mobile apps across all devices.",
|
||||
link: "/services/pwa-development"
|
||||
},
|
||||
{
|
||||
title: "TV",
|
||||
icon: Tv,
|
||||
description: "Transforming Concepts Into Captivating Mobile Experiences With Our Expert App Developments Service"
|
||||
},
|
||||
{
|
||||
title: "IoT",
|
||||
icon: Database,
|
||||
description: "Transforming Concepts Into Captivating Mobile Experiences With Our Expert App Developments Service"
|
||||
title: "Enterprise Mobile Solutions",
|
||||
icon: Building,
|
||||
description: "Secure, scalable mobile solutions for enterprise business needs.",
|
||||
link: "/services/enterprise-software-solutions"
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<section className="py-32 bg-black">
|
||||
<section className="py-32 bg-background">
|
||||
<div className="container mx-auto px-6 lg:px-8">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
@@ -423,10 +433,10 @@ const TabbedServiceDisplay = () => {
|
||||
className="text-center mb-20"
|
||||
>
|
||||
<h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
|
||||
Innovating Mobility, Empowering Connectivity
|
||||
Mobile App Development Services
|
||||
</h2>
|
||||
<p className="text-lg text-gray-300 max-w-4xl mx-auto leading-relaxed">
|
||||
Where creativity meets technology! We are a leading app development company committed to transforming your ideas into powerful, user-friendly, and cutting-edge mobile applications.
|
||||
Comprehensive mobile development services that transform your ideas into powerful, user-friendly applications across all platforms.
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
@@ -447,7 +457,8 @@ const TabbedServiceDisplay = () => {
|
||||
transition={{ duration: 0.5, delay: index * 0.1 }}
|
||||
viewport={{ once: true }}
|
||||
whileHover={{ y: -5 }}
|
||||
className="group"
|
||||
className="group cursor-pointer"
|
||||
onClick={() => navigateTo(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="flex flex-col items-start space-y-6">
|
||||
@@ -477,14 +488,8 @@ const TabbedServiceDisplay = () => {
|
||||
// Updated CTA Banner with ShimmerButton
|
||||
const InlineCTA = () => {
|
||||
return (
|
||||
<section className="py-20 bg-gray-950/50 relative overflow-hidden">
|
||||
{/* Add subtle decorative elements matching site theme */}
|
||||
<div className="absolute top-0 left-0 w-full h-full pointer-events-none">
|
||||
<div className="absolute top-10 right-10 w-24 h-24 bg-accent/5 rounded-full blur-xl"></div>
|
||||
<div className="absolute bottom-10 left-10 w-32 h-32 bg-purple-500/5 rounded-full blur-xl"></div>
|
||||
<div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-40 h-40 bg-blue-500/3 rounded-full blur-2xl"></div>
|
||||
</div>
|
||||
<div className="container mx-auto px-6 lg:px-8 relative z-10">
|
||||
<section className="py-20 bg-black">
|
||||
<div className="container mx-auto px-6 lg:px-8">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 50 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
@@ -499,19 +504,21 @@ const InlineCTA = () => {
|
||||
viewport={{ once: true }}
|
||||
className="space-y-8"
|
||||
>
|
||||
{/* Badge with black background and gradient border */}
|
||||
<div className="inline-block p-[2px] rounded-full bg-gradient-to-r from-accent via-purple-500 to-blue-500">
|
||||
<div className="bg-black rounded-full px-6 py-3 flex items-center gap-2">
|
||||
<Rocket className="w-5 h-5 text-white" />
|
||||
<span className="text-white text-base font-medium">AI-Driven Innovation</span>
|
||||
{/* Ready to Launch Badge */}
|
||||
<div className="inline-block">
|
||||
<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">AI-Driven Innovation</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Main Heading */}
|
||||
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground leading-tight">
|
||||
Let's Architect{" "}
|
||||
<span className="text-accent">Intelligence</span>{" "}
|
||||
Into Your App
|
||||
<h2 className="text-4xl lg:text-5xl font-semibold leading-tight">
|
||||
<span className="text-foreground">Let's Architect </span>
|
||||
<span className="text-[#E5195E]">Intelligence</span>
|
||||
<span className="text-foreground"> Into Your App</span>
|
||||
</h2>
|
||||
|
||||
{/* Subtitle */}
|
||||
@@ -519,15 +526,23 @@ const InlineCTA = () => {
|
||||
Schedule a discovery call to explore how AI can give you a strategic edge.
|
||||
</p>
|
||||
|
||||
{/* Updated CTA Button with ShimmerButton */}
|
||||
<ShimmerButton className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl" onClick={() => navigateTo('/contact')}>
|
||||
{/* CTA Button */}
|
||||
<div className="flex flex-col items-center gap-4">
|
||||
<ShimmerButton
|
||||
className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl bg-[#E5195E] hover:bg-[#E5195E]/90"
|
||||
onClick={() => navigateTo('/start-a-project')}
|
||||
>
|
||||
<div className="inline-flex items-center gap-3">
|
||||
<svg className="w-6 h-6 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
|
||||
</svg>
|
||||
<Brain className="w-6 h-6 flex-shrink-0" />
|
||||
<span>Book an AI Discovery Call</span>
|
||||
</div>
|
||||
</ShimmerButton>
|
||||
|
||||
{/* Small benefit text */}
|
||||
<p className="text-sm text-muted-foreground">
|
||||
App strategy • AI integration • Technology consultation
|
||||
</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</div>
|
||||
@@ -539,39 +554,36 @@ const InlineCTA = () => {
|
||||
const HireDevelopersSection = () => {
|
||||
const developers = [
|
||||
{
|
||||
title: "Hire iOS Developers",
|
||||
title: "iOS Developers",
|
||||
icon: Apple,
|
||||
skills: ["Swift", "Objective-C"],
|
||||
skills: ["Swift", "Objective-C", "SwiftUI", "Core Data"],
|
||||
iconBg: "bg-gray-800",
|
||||
iconColor: "text-white"
|
||||
iconColor: "text-white",
|
||||
link: "/hire-talent/mobile-app-developers"
|
||||
},
|
||||
{
|
||||
title: "Hire Android Developers",
|
||||
title: "Android Developers",
|
||||
icon: Smartphone,
|
||||
skills: ["Kotlin", "Java"],
|
||||
skills: ["Kotlin", "Java", "Jetpack Compose"],
|
||||
iconBg: "bg-green-500",
|
||||
iconColor: "text-white"
|
||||
iconColor: "text-white",
|
||||
link: "/hire-talent/mobile-app-developers"
|
||||
},
|
||||
{
|
||||
title: "Hire Flutter / React Native Developers",
|
||||
title: "Cross-Platform Developers",
|
||||
icon: Layers,
|
||||
skills: ["Flutter", "React Native"],
|
||||
skills: ["React Native", "Flutter", "Xamarin"],
|
||||
iconBg: "bg-blue-500",
|
||||
iconColor: "text-white"
|
||||
iconColor: "text-white",
|
||||
link: "/hire-talent/mobile-app-developers"
|
||||
},
|
||||
{
|
||||
title: "Hire Mobile QA Testers",
|
||||
icon: Bug,
|
||||
skills: ["Mobile Testing", "Automation"],
|
||||
iconBg: "bg-red-500",
|
||||
iconColor: "text-white"
|
||||
},
|
||||
{
|
||||
title: "Hire UI/UX Designers",
|
||||
icon: Brush,
|
||||
skills: ["Mobile-first", "User Experience"],
|
||||
title: "Mobile QA Engineers",
|
||||
icon: ShieldCheck,
|
||||
skills: ["Mobile Testing", "Automation", "Performance"],
|
||||
iconBg: "bg-purple-500",
|
||||
iconColor: "text-white"
|
||||
iconColor: "text-white",
|
||||
link: "/hire-talent/qa-engineers"
|
||||
}
|
||||
];
|
||||
|
||||
@@ -585,8 +597,9 @@ const HireDevelopersSection = () => {
|
||||
viewport={{ once: true }}
|
||||
className="text-center mb-20"
|
||||
>
|
||||
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-8">
|
||||
Need Talent? Hire Our Top App Developers
|
||||
<h2 className="text-4xl lg:text-5xl font-semibold mb-8">
|
||||
<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">
|
||||
Get access to top-tier mobile developers who can bring your vision to life with cutting-edge technology and proven expertise.
|
||||
@@ -645,21 +658,15 @@ 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" onClick={() => navigateTo('/contact')}>
|
||||
<ShimmerButton
|
||||
className="w-full py-3 text-sm rounded-xl shadow-lg hover:shadow-xl"
|
||||
onClick={() => navigateTo(developer.link)}
|
||||
>
|
||||
<div className="inline-flex items-center justify-center gap-2">
|
||||
<svg className="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2-2v2m8 0H8m8 0v2a2 2 0 01-2 2H10a2 2 0 01-2-2V6" />
|
||||
</svg>
|
||||
<span className="font-medium">Start Hiring</span>
|
||||
<UserPlus className="w-4 h-4 flex-shrink-0" />
|
||||
<span className="font-medium">Hire Now</span>
|
||||
</div>
|
||||
</ShimmerButton>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="w-full border-white/20 text-foreground hover:bg-white/10 py-3 text-sm rounded-xl transition-all duration-300"
|
||||
>
|
||||
<span className="font-medium">Request Profiles</span>
|
||||
<UserPlus className="ml-2 w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
@@ -672,378 +679,84 @@ const HireDevelopersSection = () => {
|
||||
);
|
||||
};
|
||||
|
||||
// Enhanced Case Study Highlight - Updated to match reference design
|
||||
const CaseStudyHighlight = () => {
|
||||
const projects = [
|
||||
{
|
||||
title: "Automated management of IoT networks",
|
||||
brand: "RAK",
|
||||
icon: Wifi,
|
||||
description: "Comprehensive IoT device management and monitoring platform",
|
||||
image: "https://images.unsplash.com/photo-1558494949-ef010cbdcc31?w=400&h=300&fit=crop&auto=format",
|
||||
bgGradient: "from-blue-500/20 to-cyan-500/20"
|
||||
},
|
||||
{
|
||||
title: "HIPAA-compliant app for healthcare digitization",
|
||||
brand: "HealthVue",
|
||||
icon: Stethoscope,
|
||||
description: "Secure healthcare management system with patient data protection",
|
||||
image: "https://images.unsplash.com/photo-1576091160399-112ba8d25d1f?w=400&h=300&fit=crop&auto=format",
|
||||
bgGradient: "from-green-500/20 to-emerald-500/20"
|
||||
},
|
||||
{
|
||||
title: "SaaS transportation management system",
|
||||
brand: "FleetOps",
|
||||
icon: Truck,
|
||||
description: "Advanced fleet tracking and logistics optimization platform",
|
||||
image: "https://images.unsplash.com/photo-1586953208448-b95a79798f07?w=400&h=300&fit=crop&auto=format",
|
||||
bgGradient: "from-orange-500/20 to-yellow-500/20"
|
||||
},
|
||||
{
|
||||
title: "Industry-agnostic cybersecurity system",
|
||||
brand: "SecureNet",
|
||||
icon: Shield,
|
||||
description: "Enterprise-grade security monitoring and threat detection",
|
||||
image: "https://images.unsplash.com/photo-1563013544-824ae1b704d3?w=400&h=300&fit=crop&auto=format",
|
||||
bgGradient: "from-purple-500/20 to-indigo-500/20"
|
||||
}
|
||||
];
|
||||
|
||||
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-8">
|
||||
See What We've Built
|
||||
</h2>
|
||||
<p className="text-2xl text-muted-foreground max-w-4xl mx-auto leading-relaxed">
|
||||
From IoT platforms to healthcare systems, our solutions drive real business impact across industries.
|
||||
</p>
|
||||
</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 xl:grid-cols-4 gap-8"
|
||||
>
|
||||
{projects.map((project, index) => {
|
||||
const IconComponent = project.icon;
|
||||
return (
|
||||
<motion.div
|
||||
key={index}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5, delay: index * 0.1 }}
|
||||
viewport={{ once: true }}
|
||||
whileHover={{ y: -8, scale: 1.02 }}
|
||||
className="group cursor-pointer"
|
||||
>
|
||||
<Card className="bg-card/20 backdrop-blur-md border-white/10 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl overflow-hidden h-full">
|
||||
<CardContent className="p-0 flex flex-col h-full">
|
||||
{/* Header with title and brand */}
|
||||
<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 backdrop-blur-sm">
|
||||
<IconComponent className="w-6 h-6 text-accent" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<div className="text-xs text-muted-foreground mb-2 uppercase tracking-wider">
|
||||
{project.brand}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 className="text-xl font-semibold text-foreground mb-4 leading-tight">
|
||||
{project.title}
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
{/* App screenshot/mockup */}
|
||||
<div className="px-8 pb-6 flex-1">
|
||||
<div className={`relative rounded-xl overflow-hidden bg-gradient-to-br ${project.bgGradient} p-4 border border-white/10`}>
|
||||
<ImageWithFallback
|
||||
src={project.image}
|
||||
alt={project.title}
|
||||
className="w-full h-48 object-cover rounded-lg shadow-lg"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* CTA Button - Keep as secondary action */}
|
||||
<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">SEE FULL CASE STUDY</span>
|
||||
<ArrowRight className="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</motion.div>
|
||||
);
|
||||
})}
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
// Tech Marquee Component
|
||||
const TechMarquee = () => {
|
||||
const logos = [
|
||||
"Swift", "Kotlin", "Flutter", "React Native", "Firebase",
|
||||
"AWS", "PostgreSQL", "GraphQL", "Jest", "Figma"
|
||||
];
|
||||
|
||||
const techImages = [
|
||||
"https://images.unsplash.com/photo-1621839673705-6617adf9e890?w=80&h=80&fit=crop&auto=format",
|
||||
"https://images.unsplash.com/photo-1607706189992-eae578626c86?w=80&h=80&fit=crop&auto=format",
|
||||
"https://images.unsplash.com/photo-1611224923853-80b023f02d71?w=80&h=80&fit=crop&auto=format",
|
||||
"https://images.unsplash.com/photo-1633356122544-f134324a6cee?w=80&h=80&fit=crop&auto=format",
|
||||
"https://images.unsplash.com/photo-1618477388954-7852f32655ec?w=80&h=80&fit=crop&auto=format",
|
||||
"https://images.unsplash.com/photo-1606868306217-dbf5046868d2?w=80&h=80&fit=crop&auto=format",
|
||||
"https://images.unsplash.com/photo-1544383835-bda2bc66a55d?w=80&h=80&fit=crop&auto=format",
|
||||
"https://images.unsplash.com/photo-1627398242454-45a1465c2479?w=80&h=80&fit=crop&auto=format",
|
||||
"https://images.unsplash.com/photo-1609921212029-bb5a28e60960?w=80&h=80&fit=crop&auto=format",
|
||||
"https://images.unsplash.com/photo-1609921212029-bb5a28e60960?w=80&h=80&fit=crop&auto=format"
|
||||
];
|
||||
|
||||
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"
|
||||
>
|
||||
<p className="text-2xl text-muted-foreground leading-relaxed">
|
||||
Tools & Tech We Use Daily
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<div className="relative overflow-hidden">
|
||||
<div className="flex gap-8 animate-scroll">
|
||||
{logos.concat(logos).map((logo, index) => (
|
||||
<motion.div
|
||||
key={`${logo}-${index}`}
|
||||
initial={{ opacity: 0, scale: 0.8 }}
|
||||
whileInView={{ opacity: 1, scale: 1 }}
|
||||
transition={{ duration: 0.5, delay: (index % logos.length) * 0.1 }}
|
||||
viewport={{ once: true }}
|
||||
whileHover={{ scale: 1.1, y: -5 }}
|
||||
className="flex-shrink-0 group"
|
||||
>
|
||||
<div className="w-24 h-24 bg-card/20 backdrop-blur-md rounded-2xl flex items-center justify-center border border-white/10 group-hover:border-accent/30 transition-all duration-300 shadow-lg group-hover:shadow-xl">
|
||||
<ImageWithFallback
|
||||
src={techImages[index % techImages.length]}
|
||||
alt={logo}
|
||||
className="w-16 h-16 object-contain"
|
||||
/>
|
||||
</div>
|
||||
<p className="text-center text-sm text-muted-foreground mt-3 group-hover:text-foreground transition-colors duration-300">
|
||||
{logo}
|
||||
</p>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
// Enhanced FAQ Accordion
|
||||
const AccordionFAQs = () => {
|
||||
const items = [
|
||||
{
|
||||
question: "Do you help with app store publishing?",
|
||||
answer: "Yes. We help you publish, optimize, and comply with Apple & Google guidelines."
|
||||
},
|
||||
{
|
||||
question: "Can you build MVPs quickly?",
|
||||
answer: "Absolutely. Most MVPs are shipped in 4–6 weeks using cross-platform stacks."
|
||||
},
|
||||
{
|
||||
question: "How do you handle security?",
|
||||
answer: "From secure APIs to encrypted storage, our apps are built with enterprise-grade security in mind."
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<section className="py-32">
|
||||
<div className="container mx-auto px-6 lg:px-8">
|
||||
<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">
|
||||
{items.map((item, index) => (
|
||||
<AccordionItem
|
||||
key={index}
|
||||
value={`item-${index}`}
|
||||
className="bg-card/20 backdrop-blur-md rounded-2xl border border-white/10 px-10 shadow-lg"
|
||||
>
|
||||
<AccordionTrigger className="text-left hover:no-underline py-10 text-2xl">
|
||||
<span className="font-semibold text-foreground">{item.question}</span>
|
||||
</AccordionTrigger>
|
||||
<AccordionContent className="text-muted-foreground pb-10 text-xl leading-relaxed">
|
||||
{item.answer}
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
))}
|
||||
</Accordion>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
// Updated Large Call to Action with ShimmerButton
|
||||
const LargeCallToAction = () => {
|
||||
return (
|
||||
<section className="py-20 bg-black 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"
|
||||
>
|
||||
{/* Badge with black background and gradient border */}
|
||||
<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-purple-500 to-blue-500">
|
||||
<div className="bg-black rounded-full px-6 py-3 flex items-center gap-2">
|
||||
<Rocket className="w-5 h-5 text-white" />
|
||||
<span className="text-white text-base font-medium">Ready to Launch Your App?</span>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Main Heading */}
|
||||
<motion.h2
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.2 }}
|
||||
viewport={{ once: true }}
|
||||
className="text-4xl lg:text-5xl font-semibold text-white mb-6 leading-tight"
|
||||
>
|
||||
Build Your Next Mobile App with{" "}
|
||||
<span className="text-accent">WDI</span>
|
||||
</motion.h2>
|
||||
|
||||
{/* Subtitle */}
|
||||
<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-gray-300 mb-12 max-w-2xl mx-auto leading-relaxed"
|
||||
>
|
||||
Join the companies who trust us to bring their app ideas to life with cutting-edge technology and expert craftsmanship.
|
||||
</motion.p>
|
||||
|
||||
{/* CTA Section - Updated with ShimmerButton */}
|
||||
<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"
|
||||
>
|
||||
{/* Main CTA Button with ShimmerButton */}
|
||||
<ShimmerButton className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25" onClick={() => navigateTo('/contact')}>
|
||||
<div className="inline-flex items-center gap-3">
|
||||
<svg className="w-6 h-6 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 100 4m0-4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 100 4m0-4v2m0-6V4" />
|
||||
</svg>
|
||||
<span>Get Started</span>
|
||||
</div>
|
||||
</ShimmerButton>
|
||||
|
||||
{/* Secondary CTA */}
|
||||
<p className="text-gray-400 text-sm">
|
||||
Free consultation • No commitment • Quick turnaround
|
||||
</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">
|
||||
{/* Subtle gradient orbs */}
|
||||
<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 Mobile App Development Page
|
||||
// FAQ data for Mobile App Development
|
||||
const mobileAppFAQs = [
|
||||
{
|
||||
question: "What platforms do you develop mobile apps for?",
|
||||
answer: "We develop mobile apps for iOS, Android, and cross-platform solutions using technologies like React Native and Flutter. Our team has expertise in native development as well as hybrid approaches to ensure optimal performance and user experience."
|
||||
question: "Do you develop both iOS and Android apps?",
|
||||
answer: "Yes, we develop native iOS apps using Swift and Android apps using Kotlin. We also offer cross-platform solutions using React Native and Flutter for cost-effective multi-platform deployment."
|
||||
},
|
||||
{
|
||||
question: "How long does it take to develop a mobile app?",
|
||||
answer: "The development timeline varies based on app complexity, features, and platform requirements. Simple apps typically take 8-12 weeks, while complex enterprise applications can take 4-6 months. We provide detailed project timelines during the planning phase."
|
||||
question: "What is the typical timeline for mobile app development?",
|
||||
answer: "Timeline varies based on complexity. Simple apps take 8-12 weeks, while complex enterprise apps can take 16-24 weeks. We provide detailed project timelines after requirements analysis."
|
||||
},
|
||||
{
|
||||
question: "Do you provide app store submission and approval support?",
|
||||
answer: "Yes, we handle the complete app store submission process for both Apple App Store and Google Play Store. Our team ensures your app meets all guidelines and requirements, and we provide ongoing support for app updates and maintenance."
|
||||
question: "How much does mobile app development cost?",
|
||||
answer: "Costs depend on features, platforms, and complexity. We offer competitive pricing with transparent estimates. Contact us for a detailed quote based on your specific requirements."
|
||||
},
|
||||
{
|
||||
question: "Can you integrate AI and machine learning features into mobile apps?",
|
||||
answer: "Absolutely! We specialize in integrating AI and ML capabilities including chatbots, recommendation engines, image recognition, natural language processing, and predictive analytics to enhance user engagement and app functionality."
|
||||
question: "Do you help with App Store submissions?",
|
||||
answer: "Yes, we handle the complete App Store submission process for both Apple App Store and Google Play Store, including app optimization, compliance, and approval assistance."
|
||||
},
|
||||
{
|
||||
question: "What is your approach to mobile app security?",
|
||||
answer: "We implement comprehensive security measures including data encryption, secure API connections, authentication systems, and compliance with industry standards like GDPR and HIPAA. Security is built into every layer of our development process."
|
||||
question: "Can you integrate third-party services and APIs?",
|
||||
answer: "Absolutely! We integrate various third-party services including payment gateways, social media, analytics, push notifications, maps, and custom APIs to enhance app functionality."
|
||||
},
|
||||
{
|
||||
question: "Do you provide app maintenance and updates?",
|
||||
answer: "Yes, we offer comprehensive maintenance services including bug fixes, OS updates, security patches, feature enhancements, and performance optimization to keep your app current."
|
||||
},
|
||||
{
|
||||
question: "What about app security and data protection?",
|
||||
answer: "We implement robust security measures including data encryption, secure API communication, user authentication, and compliance with privacy regulations like GDPR and CCPA."
|
||||
},
|
||||
{
|
||||
question: "Can you develop offline-capable mobile apps?",
|
||||
answer: "Yes, we can develop apps with offline functionality using local storage, caching strategies, and data synchronization to ensure your app works even without internet connectivity."
|
||||
}
|
||||
];
|
||||
|
||||
export function MobileAppDevelopment() {
|
||||
// Main Mobile App Development Page Component
|
||||
export const MobileAppDevelopment = () => {
|
||||
// Set document title for SEO
|
||||
React.useEffect(() => {
|
||||
document.title = "Mobile App Development Services | WDI - iOS & Android App Development";
|
||||
|
||||
// Update meta description for SEO
|
||||
const metaDescription = document.querySelector('meta[name="description"]');
|
||||
if (metaDescription) {
|
||||
metaDescription.setAttribute('content', 'Professional mobile app development services at WDI. Build secure, scalable iOS and Android apps with expert developers. Cross-platform solutions available.');
|
||||
}
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="dark min-h-screen bg-background">
|
||||
<Navigation />
|
||||
|
||||
{/* Hero Section */}
|
||||
<HeroWithCTA />
|
||||
|
||||
{/* Industries Scroller */}
|
||||
<HorizontalTagScroller />
|
||||
|
||||
{/* Why Choose WDI */}
|
||||
<SideBySideContentWithIcons />
|
||||
|
||||
{/* Service Categories */}
|
||||
<TabbedServiceDisplay />
|
||||
|
||||
{/* Process Steps */}
|
||||
<ProcessSection />
|
||||
<InlineCTA />
|
||||
|
||||
{/* Hire Developers */}
|
||||
<HireDevelopersSection />
|
||||
<FAQSection
|
||||
title="Mobile App Development Questions"
|
||||
subtitle="Get answers to common questions about our mobile app development services and process."
|
||||
faqs={mobileAppFAQs}
|
||||
/>
|
||||
|
||||
{/* Final CTA */}
|
||||
<InlineCTA />
|
||||
|
||||
{/* FAQ Section */}
|
||||
<FAQSection faqs={mobileAppFAQs} />
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
@@ -5,26 +5,49 @@ 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 "../assets/images/ranoutof.webp";
|
||||
import seezunImage from "../assets/images/seezun.webp";
|
||||
import wokaImage from "../assets/images/woka.webp";
|
||||
|
||||
// High-quality iOS development images
|
||||
const swiftImage = "https://images.unsplash.com/photo-1517077304055-6e89abbf09b0?w=400&h=300&fit=crop&auto=format";
|
||||
const swiftuiImage = "https://images.unsplash.com/photo-1551650975-87deedd944c3?w=400&h=300&fit=crop&auto=format";
|
||||
const swiftImage =
|
||||
"https://images.unsplash.com/photo-1517077304055-6e89abbf09b0?w=400&h=300&fit=crop&auto=format";
|
||||
const swiftuiImage =
|
||||
"https://images.unsplash.com/photo-1551650975-87deedd944c3?w=400&h=300&fit=crop&auto=format";
|
||||
|
||||
import {
|
||||
Apple,
|
||||
ArrowRight,
|
||||
Brush,
|
||||
Bug,
|
||||
CheckCircle,
|
||||
Code,
|
||||
DollarSign,
|
||||
Globe, Layers,
|
||||
Eye,
|
||||
Globe,
|
||||
Heart,
|
||||
Layers,
|
||||
Layout,
|
||||
Lightbulb,
|
||||
MessageSquare,
|
||||
Network,
|
||||
Palette,
|
||||
RefreshCcw,
|
||||
Rocket,
|
||||
Shield,
|
||||
ShoppingCart,
|
||||
Smartphone,
|
||||
Star,
|
||||
Tablet,
|
||||
TrendingUp,
|
||||
Zap
|
||||
Users,
|
||||
Watch,
|
||||
Zap,
|
||||
} from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { navigateTo } from "@/App";
|
||||
|
||||
// iOS App Development Hero Section
|
||||
// iOS Hero Section with iPhone/iPad mockups
|
||||
const IOSHeroWithCTA = () => {
|
||||
return (
|
||||
<section className="relative py-20 overflow-hidden bg-black">
|
||||
@@ -36,7 +59,7 @@ const IOSHeroWithCTA = () => {
|
||||
transition={{ duration: 0.8 }}
|
||||
className="space-y-8"
|
||||
>
|
||||
{/* iOS Label */}
|
||||
{/* iOS Development Label */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
@@ -48,11 +71,11 @@ const IOSHeroWithCTA = () => {
|
||||
{/* Main Heading */}
|
||||
<div className="space-y-6">
|
||||
<h1 className="text-4xl md:text-5xl lg:text-6xl font-semibold text-white leading-tight">
|
||||
Premium iOS App Development Services
|
||||
Expert iOS App Development Services
|
||||
</h1>
|
||||
|
||||
<p className="text-lg text-gray-300 leading-relaxed max-w-lg">
|
||||
Create stunning, high-performance iOS applications that captivate users and drive business growth with our expert development team.
|
||||
Crafting intuitive, high-performance iPhone and iPad applications that define user experience and drive engagement.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -65,84 +88,85 @@ const IOSHeroWithCTA = () => {
|
||||
>
|
||||
<ShimmerButton className="text-lg px-8 py-4">
|
||||
<div className="inline-flex items-center gap-2">
|
||||
<Apple className="w-5 h-5 flex-shrink-0" />
|
||||
<span>Start iOS Project</span>
|
||||
<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>
|
||||
</ShimmerButton>
|
||||
<a
|
||||
href="#consultation"
|
||||
href="#portfolio"
|
||||
className="inline-flex items-center justify-center gap-2 rounded-md bg-gray-800 px-8 py-4 text-lg font-medium text-white transition hover:bg-gray-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-700 whitespace-nowrap"
|
||||
>
|
||||
<MessageSquare className="w-4 h-4 flex-shrink-0" />
|
||||
<span>Schedule Consultation</span>
|
||||
<Eye className="w-4 h-4 flex-shrink-0" />
|
||||
<span>See Our iOS Work</span>
|
||||
</a>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
|
||||
{/* Right side with iOS development showcase */}
|
||||
{/* Right side with iOS device mockups */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: 50 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.2 }}
|
||||
className="relative flex flex-col items-center"
|
||||
>
|
||||
{/* iOS Development Showcase */}
|
||||
{/* iOS Device Mockups */}
|
||||
<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"
|
||||
className="relative h-[400px] w-full mb-8 flex items-center justify-center"
|
||||
>
|
||||
{/* Central iPhone Mockup */}
|
||||
<div className="relative mx-auto w-64 h-96 bg-gradient-to-b from-gray-800 to-gray-900 rounded-[3rem] border-8 border-gray-700 shadow-2xl">
|
||||
<div className="w-full h-full bg-gradient-to-br from-accent to-purple-600 rounded-[2rem] p-4 flex items-center justify-center">
|
||||
<div className="w-full h-full bg-white/10 rounded-2xl flex items-center justify-center">
|
||||
<Apple className="w-16 h-16 text-white" />
|
||||
{/* iPhone and iPad mockup representation */}
|
||||
<div className="relative">
|
||||
<div className="absolute -right-16 top-8 w-24 h-32 bg-gradient-to-br from-gray-800 to-gray-900 rounded-2xl border border-gray-700 shadow-2xl transform rotate-12">
|
||||
<div className="w-full h-6 bg-gray-700 rounded-t-2xl flex items-center justify-center">
|
||||
<div className="w-8 h-1 bg-gray-600 rounded-full"></div>
|
||||
</div>
|
||||
<div className="p-2 space-y-1">
|
||||
<div className="h-2 bg-accent/60 rounded"></div>
|
||||
<div className="h-1 bg-gray-600 rounded w-3/4"></div>
|
||||
<div className="h-1 bg-gray-600 rounded w-1/2"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* iPhone Details */}
|
||||
<div className="absolute top-4 left-1/2 transform -translate-x-1/2 w-16 h-6 bg-black rounded-full"></div>
|
||||
<div className="absolute bottom-2 left-1/2 transform -translate-x-1/2 w-32 h-1 bg-white/30 rounded-full"></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>
|
||||
</div>
|
||||
|
||||
{/* Tech Stack Icons */}
|
||||
<div className="absolute -top-8 -left-8 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">
|
||||
<Code className="w-8 h-8 text-white" />
|
||||
<div className="p-4 space-y-3">
|
||||
<div className="h-3 bg-accent rounded"></div>
|
||||
<div className="h-2 bg-gray-600 rounded w-4/5"></div>
|
||||
<div className="h-2 bg-gray-600 rounded w-3/5"></div>
|
||||
<div className="grid grid-cols-2 gap-2 mt-4">
|
||||
<div className="h-8 bg-gray-700 rounded-lg"></div>
|
||||
<div className="h-8 bg-gray-700 rounded-lg"></div>
|
||||
</div>
|
||||
<div className="h-12 bg-accent/20 rounded-lg mt-4 flex items-center justify-center">
|
||||
<Apple className="w-6 h-6 text-accent" />
|
||||
</div>
|
||||
|
||||
<div className="absolute -top-4 -right-12 w-14 h-14 bg-gradient-to-br from-purple-500 to-purple-600 rounded-xl border border-purple-400/30 shadow-lg flex items-center justify-center">
|
||||
<Layers className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
|
||||
<div className="absolute bottom-8 -right-8 w-12 h-12 bg-gradient-to-br from-green-500 to-green-600 rounded-lg border border-green-400/30 shadow-lg flex items-center justify-center">
|
||||
<Shield className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
|
||||
<div className="absolute bottom-12 -left-6 w-10 h-10 bg-gradient-to-br from-orange-500 to-orange-600 rounded-lg border border-orange-400/30 shadow-lg flex items-center justify-center">
|
||||
<Zap className="w-5 h-5 text-white" />
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* iOS Features */}
|
||||
{/* iOS Technology Badges */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 1.2 }}
|
||||
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">
|
||||
<Apple className="w-3 h-3 mr-1" />
|
||||
Swift & SwiftUI
|
||||
Swift
|
||||
</Badge>
|
||||
<Badge variant="secondary" className="bg-purple-500/20 text-purple-300 border-purple-500/30">
|
||||
<Smartphone className="w-3 h-3 mr-1" />
|
||||
Native Performance
|
||||
<Badge variant="secondary" className="bg-orange-500/20 text-orange-300 border-orange-500/30">
|
||||
SwiftUI
|
||||
</Badge>
|
||||
<Badge variant="secondary" className="bg-green-500/20 text-green-300 border-green-500/30">
|
||||
<Shield className="w-3 h-3 mr-1" />
|
||||
App Store Ready
|
||||
<Badge variant="secondary" className="bg-gray-500/20 text-gray-300 border-gray-500/30">
|
||||
Xcode
|
||||
</Badge>
|
||||
</motion.div>
|
||||
</div>
|
||||
@@ -153,34 +177,424 @@ const IOSHeroWithCTA = () => {
|
||||
);
|
||||
};
|
||||
|
||||
// Key Benefits of iOS Development
|
||||
const IOSBenefits = () => {
|
||||
const benefits = [
|
||||
// iOS Case Studies - Matching Main Case Studies Design
|
||||
const IOSCaseStudies = () => {
|
||||
const caseStudies = [
|
||||
{
|
||||
icon: Apple,
|
||||
title: "Premium User Experience",
|
||||
description: "Native iOS apps deliver the smooth, polished experience Apple users expect."
|
||||
},
|
||||
{
|
||||
icon: DollarSign,
|
||||
title: "Higher Revenue Potential",
|
||||
description: "iOS users typically spend more on apps and in-app purchases."
|
||||
},
|
||||
{
|
||||
icon: Shield,
|
||||
title: "Enhanced Security",
|
||||
description: "iOS provides robust security features and App Store verification."
|
||||
},
|
||||
{
|
||||
icon: Globe,
|
||||
title: "Global Market Reach",
|
||||
description: "Access to millions of iOS users worldwide through the App Store."
|
||||
id: 1,
|
||||
title: "RanOutOf",
|
||||
client: "Global Ease Solutions",
|
||||
description:
|
||||
"WDI developed a smart grocery planning app with barcode scanning, voice commands, reminders, and a web-based admin CMS for Global Ease Solutions.",
|
||||
keyAchievement: {
|
||||
number: "75%",
|
||||
metric: "Shopping Efficiency",
|
||||
icon: ShoppingCart,
|
||||
},
|
||||
visual: ranoutofImage,
|
||||
tags: ["iOS App", "Barcode Scanning", "Voice AI", "Grocery Tech"],
|
||||
gradient: "from-green-500/20 to-emerald-500/20",
|
||||
accentColor: "green",
|
||||
featured: false,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Seezun",
|
||||
client: "Seezun",
|
||||
description:
|
||||
"Seezun is a trend-driven P2P fashion marketplace enabling users to rent, buy, sell, or lend South Asian ethnicwear via mobile and web platforms.",
|
||||
keyAchievement: {
|
||||
number: "85%",
|
||||
metric: "Brand Recognition",
|
||||
icon: TrendingUp,
|
||||
title: "Performance Excellence",
|
||||
description: "Optimized for Apple's hardware delivering superior performance."
|
||||
},
|
||||
visual: seezunImage,
|
||||
tags: ["iOS App", "P2P Marketplace", "Fashion", "E-commerce"],
|
||||
gradient: "from-purple-500/20 to-pink-500/20",
|
||||
accentColor: "purple",
|
||||
featured: false,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "WOKA",
|
||||
client: "WOKA Creations Pvt. Ltd",
|
||||
description:
|
||||
"WDI transformed WOKA's hybrid app into a high-performance native iOS platform featuring seamless streaming, deep analytics, and robust monthly support.",
|
||||
keyAchievement: {
|
||||
number: "300%",
|
||||
metric: "User Retention",
|
||||
icon: Users,
|
||||
},
|
||||
visual: wokaImage,
|
||||
tags: ["Native iOS", "Streaming", "Analytics", "Entertainment"],
|
||||
gradient: "from-green-500/20 to-emerald-500/20",
|
||||
accentColor: "green",
|
||||
featured: false,
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<section className="py-32" id="portfolio">
|
||||
<div className="container mx-auto px-6 lg:px-8">
|
||||
{/* Section Header */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
viewport={{ once: true }}
|
||||
className="text-center mb-16"
|
||||
>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.8 }}
|
||||
whileInView={{ opacity: 1, scale: 1 }}
|
||||
transition={{ duration: 0.6 }}
|
||||
viewport={{ once: true }}
|
||||
className="mb-6"
|
||||
>
|
||||
<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">
|
||||
<Star className="w-5 h-5 text-accent" />
|
||||
<span className="text-foreground text-base font-medium">
|
||||
iOS Success Stories
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
|
||||
iOS Apps That Drive Results
|
||||
</h2>
|
||||
<p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
|
||||
Discover how we've helped businesses succeed with exceptional iOS
|
||||
applications that leverage native capabilities and deliver
|
||||
outstanding user experiences.
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
{/* Case Studies Grid - Matching Main Case Studies Layout */}
|
||||
<div className="grid lg:grid-cols-3 md:grid-cols-2 grid-cols-1 gap-8 items-stretch">
|
||||
{caseStudies.map((study, index) => {
|
||||
const AchievementIcon = study.keyAchievement.icon;
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
key={study.id}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: index * 0.2 }}
|
||||
viewport={{ once: true }}
|
||||
className="group h-full"
|
||||
>
|
||||
<Card
|
||||
className="bg-card/20 backdrop-blur-md border-white/10 hover:border-accent/30 transition-all duration-500 shadow-lg hover:shadow-2xl rounded-2xl overflow-hidden h-full group-hover:scale-[1.02] transform flex flex-col cursor-pointer"
|
||||
onClick={() => {
|
||||
if (study.title === "RanOutOf") {
|
||||
navigateTo("/projects/ranoutof");
|
||||
} else if (study.title === "Seezun") {
|
||||
navigateTo("/projects/seezun");
|
||||
} else if (study.title === "WOKA") {
|
||||
navigateTo("/projects/woka");
|
||||
}
|
||||
}}
|
||||
>
|
||||
<CardContent className="p-0 flex flex-col h-full min-h-[650px]">
|
||||
{/* Visual Section - Fixed Height with Responsive Container */}
|
||||
<div className="relative overflow-hidden bg-gray-900/50 rounded-t-2xl">
|
||||
<div className="relative h-64 sm:h-72 md:h-64 w-full flex items-center justify-center p-4">
|
||||
<ImageWithFallback
|
||||
src={study.visual}
|
||||
alt={`${study.title} - ${study.client} case study`}
|
||||
className="max-w-full max-h-full object-contain object-center group-hover:scale-105 transition-transform duration-700 rounded-lg"
|
||||
style={{
|
||||
maxWidth: "100%",
|
||||
height: "auto",
|
||||
objectFit: "contain",
|
||||
objectPosition: "center",
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Subtle overlay for better text contrast */}
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/20 via-transparent to-transparent opacity-60 group-hover:opacity-80 transition-opacity duration-500" />
|
||||
|
||||
{/* Key Achievement - Overlaid on Visual */}
|
||||
<div className="absolute bottom-4 left-4 right-4 z-10">
|
||||
<motion.div
|
||||
whileHover={{ scale: 1.05 }}
|
||||
className="bg-black/90 backdrop-blur-md rounded-xl p-4 border border-white/10 shadow-lg"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<div
|
||||
className={`w-10 h-10 rounded-lg bg-gradient-to-r ${
|
||||
study.accentColor === "blue"
|
||||
? "from-blue-500 to-cyan-500"
|
||||
: study.accentColor === "green"
|
||||
? "from-green-500 to-emerald-500"
|
||||
: study.accentColor === "purple"
|
||||
? "from-purple-500 to-pink-500"
|
||||
: study.accentColor === "cyan"
|
||||
? "from-cyan-500 to-blue-500"
|
||||
: study.accentColor === "orange"
|
||||
? "from-orange-500 to-red-500"
|
||||
: "from-emerald-500 to-teal-500"
|
||||
} flex items-center justify-center flex-shrink-0`}
|
||||
>
|
||||
<AchievementIcon className="w-5 h-5 text-white" />
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="text-2xl font-bold text-white">
|
||||
{study.keyAchievement.number}
|
||||
</div>
|
||||
<div className="text-sm text-gray-300 leading-tight">
|
||||
{study.keyAchievement.metric}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Content Section - Flexible Height with Consistent Spacing */}
|
||||
<div className="p-6 flex-1 flex flex-col justify-between min-h-[350px]">
|
||||
<div className="flex-1">
|
||||
{/* Project Title - Consistent Height */}
|
||||
<div className="mb-4 min-h-[60px] flex items-start">
|
||||
<h3 className="text-xl font-semibold text-foreground leading-tight group-hover:text-accent transition-colors duration-300 line-clamp-2">
|
||||
{study.title}
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
{/* Client & Description - Consistent Height */}
|
||||
<div className="mb-6 min-h-[100px]">
|
||||
<div className="text-accent font-medium text-sm mb-2">
|
||||
{study.client}
|
||||
</div>
|
||||
<p className="text-muted-foreground text-sm leading-relaxed line-clamp-4">
|
||||
{study.description}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Tags - Consistent Height */}
|
||||
<div className="mb-6 min-h-[32px]">
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{study.tags.map((tag) => (
|
||||
<Badge
|
||||
key={tag}
|
||||
variant="secondary"
|
||||
className="text-xs bg-gray-800/50 text-gray-300 border-gray-700 hover:bg-gray-700/50 transition-colors"
|
||||
>
|
||||
{tag}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* CTA Button - Fixed at Bottom */}
|
||||
<div className="mt-auto">
|
||||
<motion.div
|
||||
whileHover={{ scale: 1.02 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
>
|
||||
<Button
|
||||
className="w-full bg-gradient-to-r from-accent to-accent/80 hover:from-accent/90 hover:to-accent/70 text-white font-semibold py-3 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 group h-12"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
if (study.title === "RanOutOf") {
|
||||
navigateTo("/projects/ranoutof");
|
||||
} else if (study.title === "Seezun") {
|
||||
navigateTo("/projects/seezun");
|
||||
} else if (study.title === "WOKA") {
|
||||
navigateTo("/projects/woka");
|
||||
}
|
||||
}}
|
||||
>
|
||||
<span>View Full Case Study</span>
|
||||
<ArrowRight className="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform duration-300" />
|
||||
</Button>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</motion.div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Bottom CTA */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.6 }}
|
||||
viewport={{ once: true }}
|
||||
className="text-center mt-16"
|
||||
>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="lg"
|
||||
className="border-white/20 text-muted-foreground hover:bg-white/10 hover:text-foreground hover:border-accent/50 transition-all duration-300"
|
||||
onClick={() => navigateTo("/case-studies")}
|
||||
>
|
||||
<Eye className="w-5 h-5 mr-2" />
|
||||
View All Case Studies
|
||||
</Button>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
// iOS Development Process Timeline
|
||||
const IOSProcessTimeline = () => {
|
||||
const steps = [
|
||||
{
|
||||
title: "Strategy & Concept",
|
||||
description:
|
||||
"Define your iOS app vision, target audience, and core functionality with our expert consultation.",
|
||||
icon: Lightbulb,
|
||||
},
|
||||
{
|
||||
title: "UI/UX Design",
|
||||
description:
|
||||
"Create pixel-perfect designs following Apple's Human Interface Guidelines for optimal user experience.",
|
||||
icon: Palette,
|
||||
},
|
||||
{
|
||||
title: "Native iOS Development",
|
||||
description:
|
||||
"Build your app using Swift and modern iOS frameworks for maximum performance and platform integration.",
|
||||
icon: Code,
|
||||
},
|
||||
{
|
||||
title: "Rigorous QA & Testing",
|
||||
description:
|
||||
"Comprehensive testing across all iOS devices and versions to ensure flawless functionality.",
|
||||
icon: Bug,
|
||||
},
|
||||
{
|
||||
title: "App Store Launch & Support",
|
||||
description:
|
||||
"Handle App Store submission, optimization, and provide ongoing maintenance and updates.",
|
||||
icon: Rocket,
|
||||
},
|
||||
];
|
||||
|
||||
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">
|
||||
Our Proven Approach to Building Your iOS App
|
||||
</h2>
|
||||
<p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
|
||||
From concept to App Store success, we guide you through every step
|
||||
of the iOS development journey.
|
||||
</p>
|
||||
</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-gray-900/50 backdrop-blur-md rounded-2xl border border-gray-800 p-8 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl">
|
||||
<div className="flex items-center gap-4 mb-4 justify-center lg:justify-start">
|
||||
<div className="w-12 h-12 bg-accent/20 rounded-xl flex items-center justify-center">
|
||||
<IconComponent className="w-6 h-6 text-accent" />
|
||||
</div>
|
||||
<div className="text-2xl font-bold text-accent">
|
||||
0{index + 1}
|
||||
</div>
|
||||
</div>
|
||||
<h3 className="text-2xl font-semibold text-white mb-4">
|
||||
{step.title}
|
||||
</h3>
|
||||
<p className="text-gray-300 leading-relaxed">
|
||||
{step.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Timeline dot */}
|
||||
<div className="w-4 h-4 bg-accent rounded-full border-4 border-black z-10 hidden lg:block"></div>
|
||||
|
||||
<div className="flex-1 hidden lg:block"></div>
|
||||
</motion.div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
// iOS Specific Services
|
||||
const IOSServicesGrid = () => {
|
||||
const services = [
|
||||
{
|
||||
title: "Custom iPhone App Development",
|
||||
description:
|
||||
"Tailored solutions for specific business needs with native iOS performance.",
|
||||
icon: Smartphone,
|
||||
},
|
||||
{
|
||||
title: "iPad App Development",
|
||||
description:
|
||||
"Optimized layouts and features specifically designed for tablet experiences.",
|
||||
icon: Tablet,
|
||||
},
|
||||
{
|
||||
title: "iOS UI/UX Design",
|
||||
description:
|
||||
"Human Interface Guidelines-compliant, delightful user interfaces that users love.",
|
||||
icon: Brush,
|
||||
},
|
||||
{
|
||||
title: "WatchOS & tvOS Apps",
|
||||
description:
|
||||
"Extending your presence across Apple devices with companion apps.",
|
||||
icon: Watch,
|
||||
},
|
||||
{
|
||||
title: "iOS App Modernization",
|
||||
description:
|
||||
"Updating legacy iOS apps for modern performance, features, and design standards.",
|
||||
icon: RefreshCcw,
|
||||
},
|
||||
{
|
||||
title: "App Store Optimization",
|
||||
description:
|
||||
"Maximizing discoverability and downloads through strategic ASO practices.",
|
||||
icon: TrendingUp,
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
@@ -194,8 +608,180 @@ const IOSBenefits = () => {
|
||||
className="text-center mb-20"
|
||||
>
|
||||
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
|
||||
Why Choose iOS App Development?
|
||||
Comprehensive iOS App Solutions
|
||||
</h2>
|
||||
<p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
|
||||
From iPhone apps to Apple ecosystem integration, we provide
|
||||
end-to-end iOS development services.
|
||||
</p>
|
||||
</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"
|
||||
>
|
||||
{services.map((service, index) => {
|
||||
const IconComponent = service.icon;
|
||||
return (
|
||||
<motion.div
|
||||
key={index}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5, delay: index * 0.1 }}
|
||||
viewport={{ once: true }}
|
||||
whileHover={{ y: -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">
|
||||
<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-foreground mb-4">
|
||||
{service.title}
|
||||
</h3>
|
||||
<p className="text-muted-foreground leading-relaxed">
|
||||
{service.description}
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</motion.div>
|
||||
);
|
||||
})}
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
// iOS Tech Stack
|
||||
const IOSTechStack = () => {
|
||||
const technologies = [
|
||||
{ name: "Swift", logo: swiftImage },
|
||||
{ name: "SwiftUI", logo: swiftuiImage },
|
||||
{
|
||||
name: "Xcode",
|
||||
logo: "https://images.unsplash.com/photo-1607706189992-eae578626c86?w=80&h=80&fit=crop&auto=format",
|
||||
},
|
||||
{
|
||||
name: "UIKit",
|
||||
logo: "https://images.unsplash.com/photo-1611224923853-80b023f02d71?w=80&h=80&fit=crop&auto=format",
|
||||
},
|
||||
{
|
||||
name: "Core Data",
|
||||
logo: "https://images.unsplash.com/photo-1633356122544-f134324a6cee?w=80&h=80&fit=crop&auto=format",
|
||||
},
|
||||
{
|
||||
name: "Firebase",
|
||||
logo: "https://images.unsplash.com/photo-1618477388954-7852f32655ec?w=80&h=80&fit=crop&auto=format",
|
||||
},
|
||||
{
|
||||
name: "AWS",
|
||||
logo: "https://images.unsplash.com/photo-1606868306217-dbf5046868d2?w=80&h=80&fit=crop&auto=format",
|
||||
},
|
||||
{
|
||||
name: "Apple Pay",
|
||||
logo: "https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?w=80&h=80&fit=crop&auto=format",
|
||||
},
|
||||
];
|
||||
|
||||
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">
|
||||
Building with the Most Powerful iOS Technologies
|
||||
</h2>
|
||||
<p className="text-xl text-gray-300 leading-relaxed">
|
||||
We leverage cutting-edge iOS frameworks and tools to create
|
||||
exceptional mobile experiences.
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-8 max-w-4xl mx-auto">
|
||||
{technologies.map((tech, index) => (
|
||||
<motion.div
|
||||
key={index}
|
||||
initial={{ opacity: 0, scale: 0.8 }}
|
||||
whileInView={{ opacity: 1, scale: 1 }}
|
||||
transition={{ duration: 0.5, delay: index * 0.1 }}
|
||||
viewport={{ once: true }}
|
||||
whileHover={{ scale: 1.1, y: -5 }}
|
||||
className="flex flex-col items-center group"
|
||||
>
|
||||
<div className="w-20 h-20 bg-gray-900/50 rounded-2xl flex items-center justify-center border border-gray-800 group-hover:border-accent/30 transition-all duration-300 shadow-lg group-hover:shadow-xl mb-4">
|
||||
<ImageWithFallback
|
||||
src={tech.logo}
|
||||
alt={tech.name}
|
||||
className="w-12 h-12 object-contain"
|
||||
/>
|
||||
</div>
|
||||
<span className="text-gray-300 text-sm group-hover:text-white transition-colors duration-300">
|
||||
{tech.name}
|
||||
</span>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
// Key Benefits of iOS Development
|
||||
const IOSKeyBenefits = () => {
|
||||
const benefits = [
|
||||
{
|
||||
icon: Zap,
|
||||
title: "Unmatched Performance",
|
||||
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."
|
||||
},
|
||||
{
|
||||
icon: Heart,
|
||||
title: "Premium User Experience",
|
||||
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."
|
||||
},
|
||||
{
|
||||
icon: DollarSign,
|
||||
title: "Strong Monetization Potential",
|
||||
description: "High-value user base with effective in-app purchase mechanisms and premium positioning."
|
||||
}
|
||||
];
|
||||
|
||||
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-16"
|
||||
>
|
||||
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
|
||||
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.
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
@@ -282,18 +868,30 @@ const IOSTechnologies = () => {
|
||||
const technologies = [
|
||||
{
|
||||
title: "Swift Programming",
|
||||
description: "Modern, safe, and fast programming language designed for iOS development.",
|
||||
description:
|
||||
"Modern, safe, and fast programming language designed for iOS development.",
|
||||
image: swiftImage,
|
||||
features: ["Type Safety", "Memory Management", "Performance Optimization", "Concurrency Support"],
|
||||
icon: Code
|
||||
features: [
|
||||
"Type Safety",
|
||||
"Memory Management",
|
||||
"Performance Optimization",
|
||||
"Concurrency Support",
|
||||
],
|
||||
icon: Code,
|
||||
},
|
||||
{
|
||||
title: "SwiftUI Framework",
|
||||
description: "Declarative UI framework for building beautiful, responsive user interfaces.",
|
||||
description:
|
||||
"Declarative UI framework for building beautiful, responsive user interfaces.",
|
||||
image: swiftuiImage,
|
||||
features: ["Declarative Syntax", "Live Previews", "Cross-Platform", "Animation Support"],
|
||||
icon: Layout
|
||||
}
|
||||
features: [
|
||||
"Declarative Syntax",
|
||||
"Live Previews",
|
||||
"Cross-Platform",
|
||||
"Animation Support",
|
||||
],
|
||||
icon: Layout,
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
@@ -310,7 +908,8 @@ const IOSTechnologies = () => {
|
||||
iOS Development Technologies
|
||||
</h2>
|
||||
<p className="text-xl text-gray-300 leading-relaxed max-w-3xl mx-auto">
|
||||
We leverage the latest iOS technologies and frameworks to build exceptional apps.
|
||||
We leverage the latest iOS technologies and frameworks to build
|
||||
exceptional apps.
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
@@ -361,10 +960,15 @@ const IOSTechnologies = () => {
|
||||
|
||||
{/* Features List */}
|
||||
<div className="space-y-2">
|
||||
<h4 className="text-sm font-medium text-white mb-3">Key Features:</h4>
|
||||
<h4 className="text-sm font-medium text-white mb-3">
|
||||
Key Features:
|
||||
</h4>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
{tech.features.map((feature, idx) => (
|
||||
<div key={idx} className="flex items-center gap-2 text-sm text-gray-300">
|
||||
<div
|
||||
key={idx}
|
||||
className="flex items-center gap-2 text-sm text-gray-300"
|
||||
>
|
||||
<CheckCircle className="w-4 h-4 text-accent flex-shrink-0" />
|
||||
<span>{feature}</span>
|
||||
</div>
|
||||
@@ -394,7 +998,23 @@ export const IOSAppDevelopment = () => {
|
||||
</section>
|
||||
|
||||
<section className="bg-background">
|
||||
<IOSBenefits />
|
||||
<IOSKeyBenefits />
|
||||
</section>
|
||||
|
||||
<section className="bg-black">
|
||||
<IOSCaseStudies />
|
||||
</section>
|
||||
|
||||
<section className="bg-black">
|
||||
<IOSProcessTimeline />
|
||||
</section>
|
||||
|
||||
<section className="bg-black">
|
||||
<IOSServicesGrid />
|
||||
</section>
|
||||
|
||||
<section className="bg-black">
|
||||
<IOSTechStack />
|
||||
</section>
|
||||
|
||||
<section className="bg-card">
|
||||
|
||||
Reference in New Issue
Block a user