800 lines
30 KiB
TypeScript
800 lines
30 KiB
TypeScript
import React from "react";
|
|
import { motion } from "framer-motion";
|
|
import { Navigation } from "../components/Navigation";
|
|
import { Footer } from "../components/Footer";
|
|
import { ProcessSection } from "../components/ProcessSection";
|
|
import { FAQSection } from "../components/FAQSection";
|
|
import { AnimatedGradientText } from "../components/AnimatedGradientText";
|
|
import { Button } from "../components/ui/button";
|
|
import { ShimmerButton } from "../components/ui/shimmer-button";
|
|
import { Badge } from "../components/ui/badge";
|
|
import { Card, CardContent } from "../components/ui/card";
|
|
import { GridPattern } from "../components/GridPattern";
|
|
import {
|
|
Globe,
|
|
Cloud,
|
|
Server,
|
|
Database,
|
|
Shield,
|
|
Zap,
|
|
Users,
|
|
Star,
|
|
ArrowRight,
|
|
ChevronRight,
|
|
Clock,
|
|
TrendingUp,
|
|
Code,
|
|
Layers,
|
|
Target,
|
|
Layout,
|
|
Rocket,
|
|
Monitor,
|
|
Lock,
|
|
RefreshCcw,
|
|
ShieldCheck,
|
|
MessageSquare,
|
|
Heart,
|
|
CheckCircle,
|
|
Lightbulb,
|
|
Coffee,
|
|
Download,
|
|
Calendar,
|
|
Camera,
|
|
Music,
|
|
Gamepad2,
|
|
CreditCard,
|
|
Bell,
|
|
Mail,
|
|
Search,
|
|
Home,
|
|
MapPin,
|
|
Github,
|
|
Slack,
|
|
Figma,
|
|
Chrome,
|
|
Zap as ZapIcon,
|
|
Video,
|
|
MessageCircle,
|
|
Brain,
|
|
Cog,
|
|
Settings,
|
|
Sparkles,
|
|
Handshake,
|
|
Eye,
|
|
Award,
|
|
UserPlus,
|
|
Cpu,
|
|
ShoppingCart,
|
|
} from "lucide-react";
|
|
import heroMockupImage from "../src/images/webandcloud-hero.webp";
|
|
import { Helmet } from "react-helmet-async";
|
|
import { useNavigate } from "react-router-dom";
|
|
|
|
// Enhanced Hero Section
|
|
const HeroWithCTA = () => {
|
|
const navigate = useNavigate();
|
|
return (
|
|
<section className="relative py-20 overflow-hidden bg-black">
|
|
<Helmet>
|
|
{/* Page Title and Meta Description */}
|
|
<title>Web & Cloud Solutions | Expert Services by WDI</title>
|
|
<meta
|
|
name="description"
|
|
content="WDI provides comprehensive web and cloud solutions to optimize your business infrastructure with secure, scalable, and innovative technology services."
|
|
/>
|
|
|
|
{/* Canonical Link */}
|
|
<link rel="canonical" href="https://www.wdipl.com/web-cloud" />
|
|
|
|
{/* Open Graph Tags (for Facebook, LinkedIn) */}
|
|
<meta property="og:title" content="Web & Cloud Solutions | Expert Services by WDI" />
|
|
<meta
|
|
property="og:description"
|
|
content="WDI provides comprehensive web and cloud solutions to optimize your business infrastructure with secure, scalable, and innovative technology services."
|
|
/>
|
|
<meta property="og:url" content="https://www.wdipl.com/services" />
|
|
<meta property="og:type" content="website" />
|
|
<meta property="og:image" content="https://www.wdipl.com/your-preview-image.jpg" />
|
|
|
|
{/* Twitter Card Tags */}
|
|
<meta name="twitter:card" content="summary_large_image" />
|
|
<meta name="twitter:title" content="Web & Cloud Solutions | Expert Services by WDI" />
|
|
<meta
|
|
name="twitter:description"
|
|
content="WDI provides comprehensive web and cloud solutions to optimize your business infrastructure with secure, scalable, and innovative technology services."
|
|
/>
|
|
<meta name="twitter:image" content="https://www.wdipl.com/your-preview-image.jpg" />
|
|
|
|
{/* Social Profiles (using JSON-LD Schema) */}
|
|
<script type="application/ld+json">
|
|
{`
|
|
{
|
|
"@context": "https://schema.org",
|
|
"@type": "Organization",
|
|
"name": "WDI",
|
|
"url": "https://www.wdipl.com",
|
|
"sameAs": [
|
|
"https://www.facebook.com/wdideas",
|
|
"https://www.linkedin.com/in/website-developers-india/",
|
|
"https://www.instagram.com/wdipl/"
|
|
]
|
|
}
|
|
`}
|
|
</script>
|
|
</Helmet>
|
|
<div className="container mx-auto px-6 lg:px-8">
|
|
<div className="grid lg:grid-cols-2 gap-16 items-center min-h-[90vh]">
|
|
<motion.div
|
|
initial={{ opacity: 0, x: -50 }}
|
|
animate={{ opacity: 1, x: 0 }}
|
|
transition={{ duration: 0.8 }}
|
|
className="space-y-8"
|
|
>
|
|
{/* Web & Cloud Label */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.6 }}
|
|
>
|
|
<span className="text-white/70 text-sm font-medium">
|
|
Web & Cloud Solutions
|
|
</span>
|
|
</motion.div>
|
|
|
|
{/* Main Heading */}
|
|
<div className="space-y-6">
|
|
<h1 className="text-4xl md:text-5xl lg:text-6xl font-semibold leading-tight">
|
|
<span className="text-white">Scalable Web & </span>
|
|
<span className="text-[#E5195E]">Cloud Solutions</span>
|
|
<span className="text-white"> for Modern Business</span>
|
|
</h1>
|
|
|
|
<p className="text-lg text-gray-300 leading-relaxed max-w-lg">
|
|
Build high-performance web development applications and robust cloud infrastructure with AI-powered design that scales with your business growth.
|
|
</p>
|
|
</div>
|
|
|
|
{/* CTAs */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, x: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.3 }}
|
|
className="flex flex-col sm:flex-row gap-4"
|
|
>
|
|
<ShimmerButton
|
|
className="text-lg px-8 py-4"
|
|
// onClick={() => navigate("/contact/schedule-a-discovery-call")}
|
|
onClick={() => navigate("/start-a-project")}
|
|
>
|
|
<div className="inline-flex items-center gap-2">
|
|
<Calendar className="w-4 h-4 flex-shrink-0" />
|
|
<span>Schedule Cloud Consultation</span>
|
|
</div>
|
|
</ShimmerButton>
|
|
<Button
|
|
variant="secondary"
|
|
className="h-14 px-8 text-lg font-medium rounded-lg bg-white/10 hover:bg-white/20 text-white border-white/20 hover:border-white/30 shadow-lg hover:shadow-xl transition-all duration-300"
|
|
onClick={() => navigate("/case-studies")}
|
|
>
|
|
<Eye className="w-5 h-5 flex-shrink-0" />
|
|
<span>View Web Projects</span>
|
|
</Button>
|
|
</motion.div>
|
|
</motion.div>
|
|
|
|
{/* Right side with stats */}
|
|
<motion.div
|
|
initial={{ opacity: 0, x: 50 }}
|
|
animate={{ opacity: 1, x: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.2 }}
|
|
className="relative flex items-center justify-center order-first lg:order-last"
|
|
>
|
|
{/* 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",
|
|
}}
|
|
>
|
|
{/* Hero Image with comprehensive CSS styling */}
|
|
<img
|
|
src={heroMockupImage}
|
|
alt="Mobile App Development Services - Fashion, Social, and Fitness Apps"
|
|
className="block transition-all duration-300 hover:scale-101"
|
|
style={{
|
|
width: "100%",
|
|
height: "100%",
|
|
objectFit: "contain",
|
|
objectPosition: "center",
|
|
maxWidth: "100%",
|
|
display: "block",
|
|
}}
|
|
/>
|
|
|
|
{/* Alternative background method for enhanced browser support */}
|
|
<div
|
|
className="absolute inset-0 opacity-0 pointer-events-none"
|
|
style={{
|
|
backgroundImage: `url(${heroMockupImage})`,
|
|
backgroundSize: "contain",
|
|
backgroundPosition: "center",
|
|
backgroundRepeat: "no-repeat",
|
|
}}
|
|
/>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
// Enhanced Horizontal Tag Scroller with Technologies
|
|
const HorizontalTagScroller = () => {
|
|
const technologies = [
|
|
{ name: "React & Next.js", icon: Code, color: "text-blue-400" },
|
|
{ name: "AWS & Azure", icon: Cloud, color: "text-green-400" },
|
|
{ name: "Node.js & Python", icon: Server, color: "text-purple-400" },
|
|
{ name: "Docker & Kubernetes", icon: Layers, color: "text-cyan-400" },
|
|
{ name: "MongoDB & PostgreSQL", icon: Database, color: "text-orange-400" },
|
|
{ name: "GraphQL & REST APIs", icon: Zap, color: "text-yellow-400" },
|
|
];
|
|
|
|
return (
|
|
<section className="py-32 bg-background">
|
|
<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 mb-8">
|
|
<span className="text-foreground">Cutting-Edge </span>
|
|
<span className="text-[#E5195E]">Technologies</span>
|
|
<span className="text-foreground"> We Master</span>
|
|
</h2>
|
|
<p className="text-2xl text-muted-foreground max-w-4xl mx-auto leading-relaxed">
|
|
Modern web development and cloud technologies with AI-powered features that power enterprise-grade AI mobile app solutions.
|
|
</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="relative overflow-hidden"
|
|
>
|
|
<div className="absolute left-0 top-0 bottom-0 w-20 bg-gradient-to-r from-card to-transparent z-10 pointer-events-none"></div>
|
|
<div className="absolute right-0 top-0 bottom-0 w-20 bg-gradient-to-l from-card to-transparent z-10 pointer-events-none"></div>
|
|
|
|
<div className="flex animate-marquee hover:animate-marquee-paused">
|
|
{/* First set */}
|
|
{technologies.map((tech, index) => {
|
|
const IconComponent = tech.icon;
|
|
return (
|
|
<motion.div
|
|
key={`first-${tech.name}-${index}`}
|
|
initial={{ opacity: 0, scale: 0.8 }}
|
|
whileInView={{ opacity: 1, scale: 1 }}
|
|
transition={{ duration: 0.5, delay: index * 0.01 }}
|
|
viewport={{ once: true }}
|
|
className="group flex-shrink-0 mx-3"
|
|
>
|
|
<div className="bg-card/20 backdrop-blur-md rounded-2xl border border-white/10 px-8 py-6 hover:border-accent/30 transition-all duration-300 cursor-pointer shadow-lg hover:shadow-xl min-w-fit group-hover:scale-105 group-hover:-translate-y-1">
|
|
<div className="flex items-center gap-4">
|
|
<div
|
|
className={`w-8 h-8 flex items-center justify-center ${tech.color}`}
|
|
>
|
|
<IconComponent className="w-6 h-6" />
|
|
</div>
|
|
<span className="text-xl font-medium text-foreground whitespace-nowrap">
|
|
{tech.name}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
);
|
|
})}
|
|
|
|
{/* Second and third sets for seamless loop */}
|
|
{[...technologies, ...technologies].map((tech, index) => {
|
|
const IconComponent = tech.icon;
|
|
return (
|
|
<motion.div
|
|
key={`loop-${tech.name}-${index}`}
|
|
initial={{ opacity: 0, scale: 0.8 }}
|
|
whileInView={{ opacity: 1, scale: 1 }}
|
|
transition={{
|
|
duration: 0.5,
|
|
delay: (index + technologies.length) * 0.1,
|
|
}}
|
|
viewport={{ once: true }}
|
|
className="group flex-shrink-0 mx-3"
|
|
>
|
|
<div className="bg-card/20 backdrop-blur-md rounded-2xl border border-white/10 px-8 py-6 hover:border-accent/30 transition-all duration-300 cursor-pointer shadow-lg hover:shadow-xl min-w-fit group-hover:scale-105 group-hover:-translate-y-1">
|
|
<div className="flex items-center gap-4">
|
|
<div
|
|
className={`w-8 h-8 flex items-center justify-center ${tech.color}`}
|
|
>
|
|
<IconComponent className="w-6 h-6" />
|
|
</div>
|
|
<span className="text-xl font-medium text-foreground whitespace-nowrap">
|
|
{tech.name}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
);
|
|
})}
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
// Why Choose WDI Section
|
|
const SideBySideContentWithIcons = () => {
|
|
const advantages = [
|
|
{
|
|
id: "scalable",
|
|
title: "Scalable Architecture",
|
|
icon: TrendingUp,
|
|
},
|
|
{
|
|
id: "security",
|
|
title: "Enterprise Security",
|
|
icon: Shield,
|
|
},
|
|
{
|
|
id: "performance",
|
|
title: "High Performance",
|
|
icon: Zap,
|
|
},
|
|
{
|
|
id: "monitoring",
|
|
title: "24/7 Monitoring",
|
|
icon: Eye,
|
|
},
|
|
{
|
|
id: "devops",
|
|
title: "DevOps Excellence",
|
|
icon: Settings,
|
|
},
|
|
];
|
|
|
|
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-16"
|
|
>
|
|
<h2 className="text-4xl lg:text-5xl font-semibold leading-tight mb-6">
|
|
<span className="text-white">Why Choose </span>
|
|
<span className="text-[#E5195E]">WDI</span>
|
|
<span className="text-white"> for Web & Cloud</span>
|
|
</h2>
|
|
|
|
<p className="text-2xl text-gray-300 leading-relaxed">
|
|
Enterprise-grade web development solutions with proven reliability and AI-powered design.
|
|
</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 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-6 max-w-7xl mx-auto"
|
|
>
|
|
{advantages.map((advantage, index) => {
|
|
const IconComponent = advantage.icon;
|
|
|
|
return (
|
|
<motion.div
|
|
key={advantage.id}
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.5, delay: index * 0.01 }}
|
|
viewport={{ once: true }}
|
|
whileHover={{ y: -8, scale: 1.02 }}
|
|
className="group cursor-pointer"
|
|
>
|
|
<Card className="bg-gray-900/50 backdrop-blur-md border-gray-700/50 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl h-full overflow-hidden">
|
|
<CardContent className="p-8 flex flex-col items-center text-center h-full justify-center min-h-[180px]">
|
|
<div className="mb-6">
|
|
<IconComponent className="w-10 h-10 text-accent mx-auto" />
|
|
</div>
|
|
|
|
<h3 className="text-lg font-semibold text-white leading-tight">
|
|
{advantage.title}
|
|
</h3>
|
|
</CardContent>
|
|
</Card>
|
|
</motion.div>
|
|
);
|
|
})}
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
// Service Categories Grid
|
|
const TabbedServiceDisplay = () => {
|
|
const services = [
|
|
{
|
|
title: "Custom Web Application Development",
|
|
icon: Globe,
|
|
description:
|
|
"Build scalable, secure web applications with modern frameworks.",
|
|
link: "/services/custom-web-app-development",
|
|
},
|
|
{
|
|
title: "SaaS Product Engineering",
|
|
icon: Cloud,
|
|
description:
|
|
"End-to-end SaaS development with multi-tenant architecture.",
|
|
link: "/services/saas-product-engineering",
|
|
},
|
|
{
|
|
title: "E-commerce Platforms",
|
|
icon: ShoppingCart,
|
|
description:
|
|
"High-converting online stores with seamless payment integration.",
|
|
link: "/services/ecommerce-platforms",
|
|
},
|
|
{
|
|
title: "Admin Panels & Dashboards",
|
|
icon: Monitor,
|
|
description: "Intuitive admin interfaces with real-time analytics.",
|
|
link: "/services/admin-panels-dashboards",
|
|
},
|
|
{
|
|
title: "API & Backend Development",
|
|
icon: Server,
|
|
description: "Robust APIs and scalable backend infrastructure.",
|
|
link: "/services/api-backend-development",
|
|
},
|
|
{
|
|
title: "System Architecture & DevOps",
|
|
icon: Layers,
|
|
description: "Cloud-native architecture with automated deployment.",
|
|
link: "/services/system-architecture-devops",
|
|
},
|
|
];
|
|
|
|
const navigate = useNavigate();
|
|
|
|
return (
|
|
<section className="py-32 bg-background">
|
|
<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">
|
|
Web & Cloud Service Areas
|
|
</h2>
|
|
<p className="text-lg text-gray-300 max-w-4xl mx-auto leading-relaxed">
|
|
Comprehensive web development and cloud solutions with AI-powered design designed for scalability and performance.
|
|
|
|
</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.01 }}
|
|
viewport={{ once: true }}
|
|
whileHover={{ y: -5 }}
|
|
className="group cursor-pointer"
|
|
onClick={() => navigate(service.link)}
|
|
>
|
|
<div className="bg-gray-900/50 backdrop-blur-sm rounded-2xl border border-gray-800 p-8 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl h-full">
|
|
<div className="flex flex-col items-start space-y-6">
|
|
<div className="w-12 h-12 bg-accent/20 rounded-lg flex items-center justify-center">
|
|
<IconComponent className="w-6 h-6 text-accent" />
|
|
</div>
|
|
|
|
<div>
|
|
<h3 className="text-xl font-semibold text-white mb-4">
|
|
{service.title}
|
|
</h3>
|
|
<p className="text-gray-400 leading-relaxed">
|
|
{service.description}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
);
|
|
})}
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
// Updated CTA Section with new design
|
|
const InlineCTA = () => {
|
|
const navigate = useNavigate();
|
|
return (
|
|
<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 }}
|
|
transition={{ duration: 0.8 }}
|
|
viewport={{ once: true }}
|
|
className="text-center max-w-4xl mx-auto"
|
|
>
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.2 }}
|
|
viewport={{ once: true }}
|
|
className="space-y-8"
|
|
>
|
|
{/* 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">
|
|
Ready to Launch?
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Main Heading */}
|
|
<h2 className="text-4xl lg:text-5xl font-semibold leading-tight">
|
|
<span className="text-foreground">
|
|
Build Scalable Web Solutions with{" "}
|
|
</span>
|
|
<span className="text-[#E5195E]">Cloud-First Architecture</span>
|
|
</h2>
|
|
|
|
{/* Subtitle */}
|
|
<p className="text-xl text-muted-foreground leading-relaxed max-w-2xl mx-auto">
|
|
Deploy robust, secure, and high-performance web development applications with AI-powered design that scale with your business growth.
|
|
</p>
|
|
|
|
{/* 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={() => navigate("/contact/schedule-a-discovery-call")}
|
|
onClick={() => navigate("/start-a-project")}
|
|
>
|
|
<div className="inline-flex items-center gap-3">
|
|
<Cloud className="w-6 h-6 flex-shrink-0" />
|
|
<span>Start Your Cloud Project</span>
|
|
</div>
|
|
</ShimmerButton>
|
|
|
|
{/* Small benefit text */}
|
|
<p className="text-sm text-muted-foreground">
|
|
Free architecture review • Scalability assessment • Performance
|
|
optimization
|
|
</p>
|
|
</div>
|
|
</motion.div>
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
// Cloud Specialists Section
|
|
const HireDevelopersSection = () => {
|
|
const specialists = [
|
|
{
|
|
title: "Full Stack Developers",
|
|
icon: Code,
|
|
skills: ["React", "Node.js", "Python", "TypeScript"],
|
|
iconBg: "bg-blue-500",
|
|
iconColor: "text-white",
|
|
link: "/hire-talent/full-stack-developers",
|
|
},
|
|
{
|
|
title: "Cloud Architects",
|
|
icon: Cloud,
|
|
skills: ["AWS", "Azure", "GCP", "Kubernetes"],
|
|
iconBg: "bg-green-500",
|
|
iconColor: "text-white",
|
|
link: "/hire-talent/full-stack-developers",
|
|
},
|
|
{
|
|
title: "DevOps Engineers",
|
|
icon: Settings,
|
|
skills: ["Docker", "Jenkins", "Terraform", "CI/CD"],
|
|
iconBg: "bg-purple-500",
|
|
iconColor: "text-white",
|
|
link: "/hire-talent/full-stack-developers",
|
|
},
|
|
{
|
|
title: "Backend Developers",
|
|
icon: Server,
|
|
skills: ["API Design", "Microservices", "Databases"],
|
|
iconBg: "bg-orange-500",
|
|
iconColor: "text-white",
|
|
link: "/hire-talent/backend-developers",
|
|
},
|
|
];
|
|
|
|
const navigate = useNavigate();
|
|
|
|
return (
|
|
<section className="py-32 bg-background">
|
|
<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 mb-8">
|
|
<span className="text-foreground">Hire Our </span>
|
|
<span className="text-[#E5195E]">Cloud Specialists</span>
|
|
</h2>
|
|
<p className="text-2xl text-muted-foreground max-w-4xl mx-auto leading-relaxed">
|
|
Get access to expert developers who specialize in modern web development and cloud technologies with AI-powered design.
|
|
</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"
|
|
>
|
|
{specialists.map((specialist, index) => {
|
|
const IconComponent = specialist.icon;
|
|
return (
|
|
<motion.div
|
|
key={index}
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.5, delay: index * 0.01 }}
|
|
viewport={{ once: true }}
|
|
whileHover={{ y: -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 */}
|
|
<div className="p-8 pb-6">
|
|
<div className="flex items-start gap-4 mb-6">
|
|
<div
|
|
className={`w-12 h-12 ${specialist.iconBg} rounded-xl flex items-center justify-center backdrop-blur-sm`}
|
|
>
|
|
<IconComponent
|
|
className={`w-6 h-6 ${specialist.iconColor}`}
|
|
/>
|
|
</div>
|
|
<div className="flex-1">
|
|
<div className="text-xs text-muted-foreground mb-2 uppercase tracking-wider">
|
|
Cloud Development
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h3 className="text-xl font-semibold text-foreground mb-4 leading-tight">
|
|
{specialist.title}
|
|
</h3>
|
|
</div>
|
|
|
|
{/* Skills */}
|
|
<div className="px-8 pb-6 flex-1">
|
|
<div className="flex flex-wrap gap-2">
|
|
{specialist.skills.map((skill) => (
|
|
<Badge
|
|
key={skill}
|
|
variant="secondary"
|
|
className="text-xs bg-white/10 text-foreground"
|
|
>
|
|
{skill}
|
|
</Badge>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* CTA */}
|
|
<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={() => navigate(specialist.link)}
|
|
>
|
|
<div className="inline-flex items-center justify-center gap-2">
|
|
<UserPlus className="w-4 h-4 flex-shrink-0" />
|
|
<span className="font-medium">Hire Now</span>
|
|
</div>
|
|
</ShimmerButton>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</motion.div>
|
|
);
|
|
})}
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
// FAQ data for Web & Cloud Services
|
|
const webCloudFAQs = [
|
|
{
|
|
question: "What web technologies do you specialize in?",
|
|
answer:
|
|
"We specialize in modern web development technologies including React, Next.js, Node.js, Python, TypeScript, and various cloud platforms like AWS, Azure, and Google Cloud with AI-powered design. Our team stays current with the latest frameworks and best practices.",
|
|
},
|
|
{
|
|
question: "How do you ensure web application security?",
|
|
answer:
|
|
"We implement security best practices including secure coding standards, regular security audits, SSL certificates, data encryption, authentication systems, and compliance with industry standards like GDPR and HIPAA.",
|
|
},
|
|
{
|
|
question: "Can you migrate our existing application to the cloud?",
|
|
answer:
|
|
"Yes, we provide comprehensive cloud migration services. We assess your current infrastructure, create a migration strategy, and execute the transition while minimizing downtime and ensuring data integrity.",
|
|
},
|
|
{
|
|
question: "What is your approach to scalable architecture?",
|
|
answer:
|
|
"We design applications with scalability in mind from the start, using microservices architecture, containerization, load balancing, and auto-scaling features with AI-powered design. This ensures your application can handle growth efficiently.",
|
|
},
|
|
{
|
|
question: "Do you provide ongoing maintenance and support?",
|
|
answer:
|
|
"Yes, we offer comprehensive maintenance packages including regular updates, security patches, performance monitoring, backup management, and 24/7 technical support to keep your applications running smoothly.",
|
|
},
|
|
];
|
|
|
|
export function WebCloudServices() {
|
|
return (
|
|
<div className="dark min-h-screen bg-background">
|
|
{/* <Navigation /> */}
|
|
<HeroWithCTA />
|
|
<HorizontalTagScroller />
|
|
<SideBySideContentWithIcons />
|
|
<TabbedServiceDisplay />
|
|
<ProcessSection />
|
|
<InlineCTA />
|
|
<HireDevelopersSection />
|
|
<FAQSection
|
|
title="Web & Cloud Questions"
|
|
subtitle="Get answers to common questions about our web development and cloud services."
|
|
faqs={webCloudFAQs}
|
|
/>
|
|
{/* <Footer /> */}
|
|
</div>
|
|
);
|
|
}
|