1448 lines
53 KiB
TypeScript
1448 lines
53 KiB
TypeScript
import { motion } from "framer-motion";
|
|
import {
|
|
ArrowRight,
|
|
Award,
|
|
BarChart,
|
|
Boxes,
|
|
Bug,
|
|
Building,
|
|
CloudCog,
|
|
Code,
|
|
Coffee,
|
|
Database,
|
|
Eye,
|
|
FileText,
|
|
Globe,
|
|
Layers,
|
|
Layers3,
|
|
Layout,
|
|
MessageSquare,
|
|
Network,
|
|
Palette,
|
|
Puzzle,
|
|
RefreshCcw,
|
|
Rocket,
|
|
Search,
|
|
Server,
|
|
Shield,
|
|
Target,
|
|
TrendingUp,
|
|
Users,
|
|
Workflow,
|
|
Zap,
|
|
} from "lucide-react";
|
|
import { ImageWithFallback } from "../components/figma/ImageWithFallback";
|
|
import { Footer } from "../components/Footer";
|
|
import { Navigation } from "../components/Navigation";
|
|
import {
|
|
Accordion,
|
|
AccordionContent,
|
|
AccordionItem,
|
|
AccordionTrigger,
|
|
} from "../components/ui/accordion";
|
|
import { Badge } from "../components/ui/badge";
|
|
import { Button } from "../components/ui/button";
|
|
import { Card, CardContent } from "../components/ui/card";
|
|
import { ShimmerButton } from "../components/ui/shimmer-button";
|
|
import patientManagementPortal from "../src/images/patient-management-portal.webp";
|
|
import awsLogo from "../src/images/aws-logo.png";
|
|
import { navigateTo } from "@/App";
|
|
import { Helmet } from "react-helmet-async";
|
|
|
|
// Custom Web App Development Hero Section
|
|
const CustomWebAppHeroWithCTA = () => {
|
|
return (
|
|
<section className="relative py-20 overflow-hidden bg-black">
|
|
<Helmet>
|
|
{/* Page Title and Meta Description */}
|
|
<title>Custom Web Application Development Experts | WDI</title>
|
|
<meta
|
|
name="description"
|
|
content="WDI specializes in custom web application development, delivering secure, scalable, and innovative solutions tailored to accelerate your business growth."
|
|
/>
|
|
|
|
{/* Canonical Link */}
|
|
<link rel="canonical" href="https://www.wdipl.com/services/custom-web-app-development" />
|
|
|
|
{/* Open Graph Tags (for Facebook, LinkedIn) */}
|
|
<meta property="og:title" content="Custom Web Application Development Experts | WDI" />
|
|
<meta
|
|
property="og:description"
|
|
content="WDI specializes in custom web application development, delivering secure, scalable, and innovative solutions tailored to accelerate your business growth."
|
|
/>
|
|
<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="Custom Web Application Development Experts | WDI" />
|
|
<meta
|
|
name="twitter:description"
|
|
content="WDI specializes in custom web application development, delivering secure, scalable, and innovative solutions tailored to accelerate your business growth."
|
|
/>
|
|
<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 Development 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 text-white leading-tight">
|
|
Custom Web Application Development
|
|
</h1>
|
|
|
|
<p className="text-lg text-gray-300 leading-relaxed max-w-lg">
|
|
Building bespoke, scalable, and secure web applications tailored
|
|
to your unique business processes and user needs.
|
|
</p>
|
|
</div>
|
|
|
|
{/* CTAs */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.3 }}
|
|
className="flex flex-col sm:flex-row gap-4"
|
|
>
|
|
<ShimmerButton
|
|
className="text-lg px-8 py-4"
|
|
onClick={() => navigateTo("/start-a-project")}
|
|
>
|
|
<div className="inline-flex items-center gap-2">
|
|
<MessageSquare className="w-5 h-5 flex-shrink-0" />
|
|
<span>Request a Free Consultation</span>
|
|
</div>
|
|
</ShimmerButton>
|
|
<a
|
|
href="#case-studies"
|
|
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"
|
|
>
|
|
<Eye className="w-4 h-4 flex-shrink-0" />
|
|
<span>Explore Projects</span>
|
|
</a>
|
|
</motion.div>
|
|
</motion.div>
|
|
|
|
{/* Right side with web app visualization */}
|
|
<motion.div
|
|
initial={{ opacity: 0, x: 50 }}
|
|
animate={{ opacity: 1, x: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.2 }}
|
|
className="relative flex flex-col items-center"
|
|
>
|
|
{/* Web Application Interface Mockup */}
|
|
<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"
|
|
>
|
|
{/* Main Dashboard Card */}
|
|
<div className="relative bg-gradient-to-br from-gray-900 via-gray-800 to-gray-900 rounded-2xl border border-gray-700 shadow-2xl p-8 mb-8">
|
|
{/* Header Bar */}
|
|
<div className="flex items-center justify-between mb-6">
|
|
<div className="flex space-x-2">
|
|
<div className="w-3 h-3 bg-red-500 rounded-full"></div>
|
|
<div className="w-3 h-3 bg-yellow-500 rounded-full"></div>
|
|
<div className="w-3 h-3 bg-green-500 rounded-full"></div>
|
|
</div>
|
|
<div className="text-xs text-gray-400">localhost:3000</div>
|
|
</div>
|
|
|
|
{/* Dashboard Content */}
|
|
<div className="space-y-4">
|
|
{/* Navigation */}
|
|
<div className="flex space-x-4 text-sm">
|
|
<div className="bg-accent/20 text-accent px-3 py-1 rounded-lg">
|
|
Dashboard
|
|
</div>
|
|
<div className="text-gray-400 px-3 py-1">Analytics</div>
|
|
<div className="text-gray-400 px-3 py-1">Users</div>
|
|
</div>
|
|
|
|
{/* Content Grid */}
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div className="bg-gray-800/50 rounded-lg p-4">
|
|
<div className="flex items-center gap-2 mb-2">
|
|
<BarChart className="w-4 h-4 text-accent" />
|
|
<div className="h-2 bg-gray-600 rounded w-16"></div>
|
|
</div>
|
|
<div className="h-12 bg-gradient-to-t from-accent/20 to-transparent rounded"></div>
|
|
</div>
|
|
<div className="bg-gray-800/50 rounded-lg p-4">
|
|
<div className="flex items-center gap-2 mb-2">
|
|
<Users className="w-4 h-4 text-blue-400" />
|
|
<div className="h-2 bg-gray-600 rounded w-12"></div>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<div className="h-2 bg-gray-600 rounded w-full"></div>
|
|
<div className="h-2 bg-gray-600 rounded w-3/4"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Data Table Simulation */}
|
|
<div className="bg-gray-800/30 rounded-lg p-4">
|
|
<div className="space-y-2">
|
|
{[1, 2, 3].map((i) => (
|
|
<div
|
|
key={i}
|
|
className="flex items-center justify-between"
|
|
>
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-6 h-6 bg-gray-600 rounded-full"></div>
|
|
<div className="h-2 bg-gray-600 rounded w-24"></div>
|
|
</div>
|
|
<div className="h-2 bg-gray-600 rounded w-16"></div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Floating Code Snippets */}
|
|
<motion.div
|
|
initial={{ opacity: 0, scale: 0.8 }}
|
|
animate={{ opacity: 1, scale: 1 }}
|
|
transition={{ duration: 0.6, delay: 0.8 }}
|
|
className="absolute -right-8 top-8 bg-gray-900 border border-gray-700 rounded-lg p-4 w-48"
|
|
>
|
|
<div className="flex items-center gap-2 mb-2">
|
|
<Code className="w-4 h-4 text-green-400" />
|
|
<div className="text-xs text-gray-400">app.jsx</div>
|
|
</div>
|
|
<div className="space-y-1 text-xs font-mono">
|
|
<div className="text-purple-400">const</div>
|
|
<div className="text-blue-400">function</div>
|
|
<div className="text-yellow-400">return</div>
|
|
</div>
|
|
</motion.div>
|
|
|
|
{/* Cloud Icon */}
|
|
<motion.div
|
|
initial={{ opacity: 0, scale: 0.8 }}
|
|
animate={{ opacity: 1, scale: 1 }}
|
|
transition={{ duration: 0.6, delay: 1.0 }}
|
|
className="absolute -left-8 bottom-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"
|
|
>
|
|
<CloudCog className="w-8 h-8 text-white" />
|
|
</motion.div>
|
|
</motion.div>
|
|
|
|
{/* Feature Badges */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 1.2 }}
|
|
className="flex justify-center gap-4 flex-wrap"
|
|
>
|
|
<Badge
|
|
variant="secondary"
|
|
className="bg-blue-500/20 text-blue-300 border-blue-500/30"
|
|
>
|
|
<Database className="w-3 h-3 mr-1" />
|
|
Scalable
|
|
</Badge>
|
|
<Badge
|
|
variant="secondary"
|
|
className="bg-green-500/20 text-green-300 border-green-500/30"
|
|
>
|
|
<Shield className="w-3 h-3 mr-1" />
|
|
Secure
|
|
</Badge>
|
|
<Badge
|
|
variant="secondary"
|
|
className="bg-purple-500/20 text-purple-300 border-purple-500/30"
|
|
>
|
|
<Layers className="w-3 h-3 mr-1" />
|
|
Custom Built
|
|
</Badge>
|
|
</motion.div>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
// Key Benefits of Custom Web Apps
|
|
const CustomWebAppBenefits = () => {
|
|
const benefits = [
|
|
{
|
|
icon: Target,
|
|
title: "Tailored to Your Workflow",
|
|
description:
|
|
"Perfectly aligns with unique business logic, unlike off-the-shelf solutions.",
|
|
},
|
|
{
|
|
icon: TrendingUp,
|
|
title: "Scalability & Flexibility",
|
|
description:
|
|
"Built to grow with your business, easily adaptable to future needs.",
|
|
},
|
|
{
|
|
icon: Shield,
|
|
title: "Enhanced Security",
|
|
description:
|
|
"Custom architecture allows for robust, purpose-built security measures.",
|
|
},
|
|
{
|
|
icon: Zap,
|
|
title: "Operational Efficiency",
|
|
description:
|
|
"Automate tasks, streamline processes, reduce manual effort.",
|
|
},
|
|
{
|
|
icon: Award,
|
|
title: "Competitive Advantage",
|
|
description:
|
|
"Unique features and user experiences differentiate your brand.",
|
|
},
|
|
];
|
|
|
|
return (
|
|
<section className="py-32">
|
|
<div className="container mx-auto px-6 lg:px-8">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8 }}
|
|
viewport={{ once: true }}
|
|
className="text-center mb-20"
|
|
>
|
|
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
|
|
Why Invest in a Custom Web Application?
|
|
</h2>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 40 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.2 }}
|
|
viewport={{ once: true }}
|
|
className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto"
|
|
>
|
|
{benefits.slice(0, 3).map((benefit, index) => {
|
|
const IconComponent = benefit.icon;
|
|
return (
|
|
<motion.div
|
|
key={index}
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.5, delay: index * 0.01 }}
|
|
viewport={{ once: true }}
|
|
whileHover={{ y: -5 }}
|
|
className="group"
|
|
>
|
|
<Card className="bg-card/20 backdrop-blur-md border-white/10 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl h-full">
|
|
<CardContent className="p-8 text-center">
|
|
<div className="w-16 h-16 bg-accent/20 rounded-2xl flex items-center justify-center mx-auto mb-6">
|
|
<IconComponent className="w-8 h-8 text-accent" />
|
|
</div>
|
|
<h3 className="text-xl font-semibold text-foreground mb-4">
|
|
{benefit.title}
|
|
</h3>
|
|
<p className="text-muted-foreground leading-relaxed">
|
|
{benefit.description}
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
</motion.div>
|
|
);
|
|
})}
|
|
</motion.div>
|
|
|
|
{/* Second row with 2 cards centered */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 40 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.4 }}
|
|
viewport={{ once: true }}
|
|
className="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto mt-8"
|
|
>
|
|
{benefits.slice(3).map((benefit, index) => {
|
|
const IconComponent = benefit.icon;
|
|
return (
|
|
<motion.div
|
|
key={index + 3}
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.5, delay: (index + 3) * 0.1 }}
|
|
viewport={{ once: true }}
|
|
whileHover={{ y: -5 }}
|
|
className="group"
|
|
>
|
|
<Card className="bg-card/20 backdrop-blur-md border-white/10 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl h-full">
|
|
<CardContent className="p-8 text-center">
|
|
<div className="w-16 h-16 bg-accent/20 rounded-2xl flex items-center justify-center mx-auto mb-6">
|
|
<IconComponent className="w-8 h-8 text-accent" />
|
|
</div>
|
|
<h3 className="text-xl font-semibold text-foreground mb-4">
|
|
{benefit.title}
|
|
</h3>
|
|
<p className="text-muted-foreground leading-relaxed">
|
|
{benefit.description}
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
</motion.div>
|
|
);
|
|
})}
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
// Custom Web App Development Process
|
|
const CustomWebAppProcess = () => {
|
|
const steps = [
|
|
{
|
|
title: "Discovery & Requirements",
|
|
description:
|
|
"Comprehensive analysis of your business needs, user requirements, and technical specifications to define project scope.",
|
|
icon: Search,
|
|
},
|
|
{
|
|
title: "UX/UI Design & Prototyping",
|
|
description:
|
|
"Creating intuitive user experiences and visual designs with interactive prototypes for stakeholder feedback.",
|
|
icon: Palette,
|
|
},
|
|
{
|
|
title: "Agile Development Sprints",
|
|
description:
|
|
"Iterative development approach with regular demonstrations and continuous integration for rapid progress.",
|
|
icon: Code,
|
|
},
|
|
{
|
|
title: "Rigorous Testing & QA",
|
|
description:
|
|
"Comprehensive testing including functionality, performance, security, and user acceptance testing.",
|
|
icon: Bug,
|
|
},
|
|
{
|
|
title: "Deployment & Ongoing Support",
|
|
description:
|
|
"Production deployment with monitoring, maintenance, and continuous improvement based on user feedback.",
|
|
icon: Rocket,
|
|
},
|
|
];
|
|
|
|
return (
|
|
<section className="py-32">
|
|
<div className="container mx-auto px-6 lg:px-8">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8 }}
|
|
viewport={{ once: true }}
|
|
className="text-center mb-20"
|
|
>
|
|
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
|
|
Our Collaborative Journey to Your Custom Web App
|
|
</h2>
|
|
</motion.div>
|
|
|
|
<div className="relative">
|
|
{/* Timeline line */}
|
|
<div className="absolute left-1/2 transform -translate-x-1/2 h-full w-0.5 bg-gradient-to-b from-accent via-accent/50 to-transparent hidden lg:block"></div>
|
|
|
|
<div className="space-y-16">
|
|
{steps.map((step, index) => {
|
|
const IconComponent = step.icon;
|
|
const isEven = index % 2 === 0;
|
|
|
|
return (
|
|
<motion.div
|
|
key={index}
|
|
initial={{ opacity: 0, x: isEven ? -50 : 50 }}
|
|
whileInView={{ opacity: 1, x: 0 }}
|
|
transition={{ duration: 0.8, delay: index * 0.2 }}
|
|
viewport={{ once: true }}
|
|
className={`flex items-center ${isEven ? "lg:flex-row" : "lg:flex-row-reverse"
|
|
} flex-col lg:gap-16 gap-8`}
|
|
>
|
|
<div
|
|
className={`flex-1 ${isEven ? "lg:text-right" : "lg:text-left"
|
|
} text-center lg:text-left`}
|
|
>
|
|
<div className="bg-card/20 backdrop-blur-md rounded-2xl border border-white/10 p-8 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl">
|
|
<div className="flex items-center gap-4 mb-4 justify-center lg:justify-start">
|
|
<div className="w-12 h-12 bg-accent/20 rounded-xl flex items-center justify-center">
|
|
<IconComponent className="w-6 h-6 text-accent" />
|
|
</div>
|
|
<div className="text-2xl font-bold text-accent">
|
|
0{index + 1}
|
|
</div>
|
|
</div>
|
|
<h3 className="text-2xl font-semibold text-foreground mb-4">
|
|
{step.title}
|
|
</h3>
|
|
<p className="text-muted-foreground leading-relaxed">
|
|
{step.description}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Timeline dot */}
|
|
<div className="w-4 h-4 bg-accent rounded-full border-4 border-background z-10 hidden lg:block"></div>
|
|
|
|
<div className="flex-1 hidden lg:block"></div>
|
|
</motion.div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
// Custom Web App Services
|
|
const CustomWebAppServices = () => {
|
|
const services = [
|
|
{
|
|
title: "Enterprise Web Portals",
|
|
description:
|
|
"Secure, centralized access for employees, partners, or customers.",
|
|
icon: Building,
|
|
features: [
|
|
"Single Sign-On",
|
|
"Role-based Access",
|
|
"Document Management",
|
|
"Communication Tools",
|
|
],
|
|
},
|
|
{
|
|
title: "Workflow Automation Platforms",
|
|
description: "Streamlining complex business operations.",
|
|
icon: Workflow,
|
|
features: [
|
|
"Process Automation",
|
|
"Task Management",
|
|
"Approval Workflows",
|
|
"Integration APIs",
|
|
],
|
|
},
|
|
{
|
|
title: "Data Management Systems",
|
|
description:
|
|
"Custom solutions for large-scale data organization and retrieval.",
|
|
icon: Database,
|
|
features: [
|
|
"Data Visualization",
|
|
"Advanced Analytics",
|
|
"Real-time Processing",
|
|
"Export Tools",
|
|
],
|
|
},
|
|
{
|
|
title: "Interactive Dashboards",
|
|
description:
|
|
"Real-time analytics and reporting for informed decision-making.",
|
|
icon: BarChart,
|
|
features: [
|
|
"Custom Widgets",
|
|
"Live Data Feeds",
|
|
"Drill-down Analytics",
|
|
"Scheduled Reports",
|
|
],
|
|
},
|
|
{
|
|
title: "API Integrations",
|
|
description: "Connecting disparate systems for seamless data flow.",
|
|
icon: Network,
|
|
features: [
|
|
"RESTful APIs",
|
|
"Third-party Integrations",
|
|
"Data Synchronization",
|
|
"Webhook Support",
|
|
],
|
|
},
|
|
{
|
|
title: "Web App Modernization",
|
|
description:
|
|
"Revitalizing legacy systems for improved performance and user experience.",
|
|
icon: RefreshCcw,
|
|
features: [
|
|
"Legacy Migration",
|
|
"Performance Optimization",
|
|
"Modern UI/UX",
|
|
"Cloud Integration",
|
|
],
|
|
},
|
|
];
|
|
|
|
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 Expertise in Custom Web Solutions
|
|
</h2>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 40 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.2 }}
|
|
viewport={{ once: true }}
|
|
className="grid md:grid-cols-2 lg:grid-cols-3 gap-8"
|
|
>
|
|
{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"
|
|
>
|
|
<Card className="bg-gray-900/50 backdrop-blur-md border-gray-800 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl h-full">
|
|
<CardContent className="p-8">
|
|
<div className="w-12 h-12 bg-accent/20 rounded-lg flex items-center justify-center mb-6">
|
|
<IconComponent className="w-6 h-6 text-accent" />
|
|
</div>
|
|
<h3 className="text-xl font-semibold text-white mb-4">
|
|
{service.title}
|
|
</h3>
|
|
<p className="text-gray-300 leading-relaxed mb-6">
|
|
{service.description}
|
|
</p>
|
|
<div className="space-y-2">
|
|
<h4 className="text-sm font-medium text-white">
|
|
Key Features:
|
|
</h4>
|
|
<div className="flex flex-wrap gap-2">
|
|
{service.features.map((feature) => (
|
|
<Badge
|
|
key={feature}
|
|
variant="secondary"
|
|
className="text-xs bg-gray-800/50 text-gray-300 border-gray-700"
|
|
>
|
|
{feature}
|
|
</Badge>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</motion.div>
|
|
);
|
|
})}
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
// Web App Tech Stack
|
|
const WebAppTechStack = () => {
|
|
const technologies = [
|
|
{
|
|
name: "React",
|
|
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/react/react-original.svg",
|
|
category: "Frontend",
|
|
color: "blue",
|
|
},
|
|
{
|
|
name: "Angular",
|
|
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/angularjs/angularjs-original.svg",
|
|
category: "Frontend",
|
|
color: "blue",
|
|
},
|
|
{
|
|
name: "Vue.js",
|
|
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/vuejs/vuejs-original.svg",
|
|
category: "Frontend",
|
|
color: "blue",
|
|
},
|
|
{
|
|
name: "Node.js",
|
|
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nodejs/nodejs-original.svg",
|
|
category: "Backend",
|
|
color: "green",
|
|
},
|
|
{
|
|
name: "Python",
|
|
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/python/python-original.svg",
|
|
category: "Backend",
|
|
color: "green",
|
|
},
|
|
{
|
|
name: "Java",
|
|
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/java/java-original.svg",
|
|
category: "Backend",
|
|
color: "green",
|
|
},
|
|
{
|
|
name: "AWS",
|
|
logo: awsLogo,
|
|
category: "Cloud",
|
|
color: "red",
|
|
},
|
|
{
|
|
name: "Azure",
|
|
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/azure/azure-original.svg",
|
|
category: "Cloud",
|
|
color: "orange",
|
|
},
|
|
{
|
|
name: "PostgreSQL",
|
|
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/postgresql/postgresql-original.svg",
|
|
category: "Database",
|
|
color: "red",
|
|
},
|
|
{
|
|
name: "MongoDB",
|
|
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/mongodb/mongodb-original.svg",
|
|
category: "Database",
|
|
color: "red",
|
|
},
|
|
];
|
|
|
|
|
|
const frameworks = [
|
|
{
|
|
name: "Django",
|
|
icon: Code,
|
|
description: "Python web framework for rapid development",
|
|
},
|
|
{
|
|
name: "Spring Boot",
|
|
icon: Coffee,
|
|
description: "Java framework for enterprise applications",
|
|
},
|
|
{
|
|
name: "Ruby on Rails",
|
|
icon: Layers,
|
|
description: "Convention over configuration framework",
|
|
},
|
|
{
|
|
name: "Laravel",
|
|
icon: Boxes,
|
|
description: "PHP framework for web artisans",
|
|
},
|
|
];
|
|
|
|
return (
|
|
<section className="py-32">
|
|
<div className="container mx-auto px-6 lg:px-8">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8 }}
|
|
viewport={{ once: true }}
|
|
className="text-center mb-20"
|
|
>
|
|
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
|
|
Leveraging Robust and Modern Web Technologies
|
|
</h2>
|
|
</motion.div>
|
|
|
|
{/* Core Technologies */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 40 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.2 }}
|
|
viewport={{ once: true }}
|
|
className="mb-16"
|
|
>
|
|
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
|
|
{technologies.map((tech, index) => {
|
|
// const IconComponent = tech.icon;
|
|
const colorClasses = {
|
|
blue: "bg-blue-500/20 text-blue-400 border-blue-500/30",
|
|
orange: "bg-orange-500/20 text-orange-400 border-orange-500/30",
|
|
green: "bg-green-500/20 text-green-400 border-green-500/30",
|
|
red: "bg-red-500/20 text-red-400 border-red-500/30",
|
|
};
|
|
|
|
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, scale: 1.05 }}
|
|
className="group"
|
|
>
|
|
<Card className="bg-gray-900/50 backdrop-blur-md border-gray-800 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl p-4 text-center">
|
|
<div
|
|
className={`w-12 h-12 rounded-lg flex items-center justify-center mx-auto mb-3 ${colorClasses[tech.color as keyof typeof colorClasses] ||
|
|
"bg-accent/20"
|
|
}`}
|
|
>
|
|
<ImageWithFallback
|
|
src={tech.logo}
|
|
alt={tech.name}
|
|
className="w-8 h-8 object-contain"
|
|
/>
|
|
</div>
|
|
|
|
<h4 className="font-semibold text-white text-sm mb-1">
|
|
{tech.name}
|
|
</h4>
|
|
<p className="text-xs text-gray-400">{tech.category}</p>
|
|
</Card>
|
|
</motion.div>
|
|
);
|
|
})}
|
|
</div>
|
|
</motion.div>
|
|
|
|
{/* Frameworks */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 40 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.4 }}
|
|
viewport={{ once: true }}
|
|
>
|
|
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
{frameworks.map((framework, index) => {
|
|
const IconComponent = framework.icon;
|
|
return (
|
|
<motion.div
|
|
key={index}
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.5, delay: index * 0.01 }}
|
|
viewport={{ once: true }}
|
|
whileHover={{ y: -5 }}
|
|
className="group"
|
|
>
|
|
<Card className="bg-card/20 backdrop-blur-md border-white/10 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl p-6 text-center h-full">
|
|
<div className="w-12 h-12 bg-accent/20 rounded-lg flex items-center justify-center mx-auto mb-4">
|
|
<IconComponent className="w-6 h-6 text-accent" />
|
|
</div>
|
|
<h4 className="font-semibold text-foreground mb-2">
|
|
{framework.name}
|
|
</h4>
|
|
<p className="text-sm text-muted-foreground leading-relaxed">
|
|
{framework.description}
|
|
</p>
|
|
</Card>
|
|
</motion.div>
|
|
);
|
|
})}
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
// Web App Case Studies
|
|
const WebAppCaseStudies = () => {
|
|
const caseStudies = [
|
|
{
|
|
title: "Enterprise Resource Planning System",
|
|
client: "TechCorp Industries",
|
|
description:
|
|
"Comprehensive ERP solution streamlining operations across multiple departments with real-time analytics and automated workflows",
|
|
image:
|
|
"https://images.unsplash.com/photo-1551434678-e076c223a692?w=400&h=300&fit=crop&auto=format",
|
|
results: "40% operational efficiency increase",
|
|
gradient: "from-blue-500/20 to-cyan-500/20",
|
|
features:
|
|
"Multi-department integration, Real-time dashboards, Automated reporting",
|
|
},
|
|
{
|
|
title: "Patient Management Portal",
|
|
client: "HealthFirst Clinics",
|
|
description:
|
|
"Secure web application for patient records management, appointment scheduling, and telemedicine integration with HIPAA compliance",
|
|
image: patientManagementPortal,
|
|
results: "60% reduction in admin tasks",
|
|
gradient: "from-green-500/20 to-emerald-500/20",
|
|
features: "HIPAA compliance, Telemedicine, Automated scheduling",
|
|
},
|
|
{
|
|
title: "Supply Chain Management Platform",
|
|
client: "GlobalLogistics Co",
|
|
description:
|
|
"End-to-end supply chain visibility platform with predictive analytics, inventory management, and vendor integration capabilities",
|
|
image:
|
|
"https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d?w=400&h=300&fit=crop&auto=format",
|
|
results: "25% cost reduction",
|
|
gradient: "from-orange-500/20 to-red-500/20",
|
|
features: "Predictive analytics, Vendor integration, Real-time tracking",
|
|
},
|
|
];
|
|
|
|
return (
|
|
<section className="py-32 bg-black" id="case-studies">
|
|
<div className="container mx-auto px-6 lg:px-8">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8 }}
|
|
viewport={{ once: true }}
|
|
className="text-center mb-20"
|
|
>
|
|
<h2 className="text-4xl lg:text-5xl font-semibold text-white mb-8">
|
|
Custom Web Applications That Drive Business Growth
|
|
</h2>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 40 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.2 }}
|
|
viewport={{ once: true }}
|
|
className="grid md:grid-cols-2 lg:grid-cols-3 gap-8"
|
|
>
|
|
{caseStudies.map((study, index) => (
|
|
<motion.div
|
|
key={index}
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.5, delay: index * 0.01 }}
|
|
viewport={{ once: true }}
|
|
whileHover={{ y: -8, scale: 1.02 }}
|
|
className="group cursor-pointer"
|
|
>
|
|
<Card className="bg-gray-900/50 backdrop-blur-md border-gray-800 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl overflow-hidden h-full">
|
|
<CardContent className="p-0 flex flex-col h-full">
|
|
<div className="p-8 pb-6">
|
|
<div className="flex items-start gap-4 mb-6">
|
|
<div className="w-12 h-12 bg-accent/20 rounded-xl flex items-center justify-center">
|
|
<Globe className="w-6 h-6 text-accent" />
|
|
</div>
|
|
<div className="flex-1">
|
|
<div className="text-xs text-gray-400 mb-2 uppercase tracking-wider">
|
|
{study.client}
|
|
</div>
|
|
<Badge
|
|
variant="secondary"
|
|
className="text-xs bg-accent/20 text-accent border-accent/30"
|
|
>
|
|
{study.results}
|
|
</Badge>
|
|
</div>
|
|
</div>
|
|
|
|
<h3 className="text-xl font-semibold text-white mb-4 leading-tight">
|
|
{study.title}
|
|
</h3>
|
|
</div>
|
|
|
|
<div className="px-8 pb-6 flex-1">
|
|
<div
|
|
className={`relative rounded-xl overflow-hidden bg-gradient-to-br ${study.gradient} p-4 border border-gray-700`}
|
|
>
|
|
<ImageWithFallback
|
|
src={study.image}
|
|
alt={study.title}
|
|
className="w-full h-48 object-cover rounded-lg shadow-lg"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="px-8 pb-6">
|
|
<p className="text-gray-300 text-sm leading-relaxed mb-4">
|
|
{study.description}
|
|
</p>
|
|
<div className="space-y-2">
|
|
<h4 className="text-xs font-medium text-white uppercase tracking-wider">
|
|
Key Features:
|
|
</h4>
|
|
<p className="text-xs text-gray-400">{study.features}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="p-8 pt-0 mt-auto">
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="w-full justify-between text-accent hover:text-accent hover:bg-accent/10 group-hover:translate-x-1 transition-all duration-300"
|
|
>
|
|
<span className="text-sm font-medium">
|
|
VIEW CASE STUDY
|
|
</span>
|
|
<ArrowRight className="w-4 h-4" />
|
|
</Button>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</motion.div>
|
|
))}
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
// Mid-Page CTA
|
|
const WebAppInlineCTA = () => {
|
|
return (
|
|
<section className="py-20">
|
|
<div className="container mx-auto px-6 lg:px-8">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 50 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8 }}
|
|
viewport={{ once: true }}
|
|
className="text-center max-w-4xl mx-auto"
|
|
>
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.2 }}
|
|
viewport={{ once: true }}
|
|
className="space-y-8"
|
|
>
|
|
<div className="inline-block p-[2px] rounded-full bg-gradient-to-r from-accent via-blue-500 to-purple-500">
|
|
<div className="bg-background rounded-full px-6 py-3 flex items-center gap-2">
|
|
<Puzzle className="w-5 h-5 text-foreground" />
|
|
<span className="text-foreground text-base font-medium">
|
|
Complex Solutions
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground leading-tight">
|
|
Have a Complex Business Need?{" "}
|
|
<span className="text-accent">Let's Build Your Solution.</span>
|
|
</h2>
|
|
|
|
<p className="text-xl text-muted-foreground leading-relaxed max-w-2xl mx-auto">
|
|
Our experts provide clarity on how custom web apps can transform
|
|
your operations.
|
|
</p>
|
|
|
|
<ShimmerButton
|
|
className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl"
|
|
onClick={() => navigateTo("/start-a-project")}
|
|
>
|
|
<div className="inline-flex items-center gap-3">
|
|
<MessageSquare className="w-6 h-6 flex-shrink-0" />
|
|
<span>Get a Free Technical Consultation</span>
|
|
</div>
|
|
</ShimmerButton>
|
|
</motion.div>
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
// Hire Web App Developers
|
|
const HireWebDevelopers = () => {
|
|
const developerTypes = [
|
|
{
|
|
title: "Frontend Specialists",
|
|
description:
|
|
"React, Angular, Vue.js experts for stunning user interfaces",
|
|
icon: Layout,
|
|
skills: [
|
|
"React/Angular/Vue",
|
|
"TypeScript",
|
|
"UI/UX Implementation",
|
|
"Performance Optimization",
|
|
],
|
|
},
|
|
{
|
|
title: "Backend Engineers",
|
|
description:
|
|
"Node.js, Python, Java developers for robust server-side solutions",
|
|
icon: Server,
|
|
skills: [
|
|
"API Development",
|
|
"Database Design",
|
|
"Security Implementation",
|
|
"Scalable Architecture",
|
|
],
|
|
},
|
|
{
|
|
title: "Full-Stack Developers",
|
|
description:
|
|
"End-to-end development expertise for complete web solutions",
|
|
icon: Layers3,
|
|
skills: [
|
|
"Frontend + Backend",
|
|
"DevOps",
|
|
"Database Management",
|
|
"System Integration",
|
|
],
|
|
},
|
|
{
|
|
title: "DevOps Engineers",
|
|
description: "Cloud infrastructure and deployment automation specialists",
|
|
icon: CloudCog,
|
|
skills: [
|
|
"AWS/Azure/GCP",
|
|
"CI/CD Pipelines",
|
|
"Container Orchestration",
|
|
"Monitoring & Logging",
|
|
],
|
|
},
|
|
];
|
|
|
|
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">
|
|
Augment Your Team with Our Expert Web App Developers
|
|
</h2>
|
|
<p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
|
|
Access highly skilled frontend, backend, and full-stack developers
|
|
specializing in custom web 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="grid md:grid-cols-2 lg:grid-cols-2 gap-8 mb-12"
|
|
>
|
|
{developerTypes.map((type, index) => {
|
|
const IconComponent = type.icon;
|
|
return (
|
|
<motion.div
|
|
key={index}
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.5, delay: index * 0.01 }}
|
|
viewport={{ once: true }}
|
|
whileHover={{ y: -5 }}
|
|
className="group"
|
|
>
|
|
<Card className="bg-gray-900/50 backdrop-blur-md border-gray-800 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl h-full">
|
|
<CardContent className="p-8">
|
|
<div className="w-12 h-12 bg-accent/20 rounded-lg flex items-center justify-center mb-6">
|
|
<IconComponent className="w-6 h-6 text-accent" />
|
|
</div>
|
|
<h3 className="text-xl font-semibold text-white mb-4">
|
|
{type.title}
|
|
</h3>
|
|
<p className="text-gray-300 leading-relaxed mb-6">
|
|
{type.description}
|
|
</p>
|
|
<div className="space-y-2">
|
|
<h4 className="text-sm font-medium text-white">
|
|
Core Skills:
|
|
</h4>
|
|
<div className="flex flex-wrap gap-2">
|
|
{type.skills.map((skill) => (
|
|
<Badge
|
|
key={skill}
|
|
variant="secondary"
|
|
className="text-xs bg-gray-800/50 text-gray-300 border-gray-700"
|
|
>
|
|
{skill}
|
|
</Badge>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</motion.div>
|
|
);
|
|
})}
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.4 }}
|
|
viewport={{ once: true }}
|
|
className="text-center space-y-6"
|
|
>
|
|
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
|
<ShimmerButton className="text-lg px-8 py-4"
|
|
onClick={() => navigateTo("/hire-talent/custom-web-app-developers")}
|
|
>
|
|
<div className="inline-flex items-center gap-2">
|
|
<Users className="w-5 h-5 flex-shrink-0" />
|
|
<span>Hire custom Web Developers</span>
|
|
</div>
|
|
</ShimmerButton>
|
|
<Button
|
|
variant="outline"
|
|
size="lg"
|
|
className="text-lg px-8 py-4 h-auto border-gray-600 text-gray-300 hover:bg-gray-800 hover:text-white"
|
|
>
|
|
<div className="inline-flex items-center gap-2">
|
|
<FileText className="w-5 h-5 flex-shrink-0" />
|
|
<span>Request Resumes</span>
|
|
</div>
|
|
</Button>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
// Custom Web App FAQs
|
|
const CustomWebAppFAQs = () => {
|
|
const faqs = [
|
|
{
|
|
question: "How long does it take to develop a custom web app?",
|
|
answer:
|
|
"Development timelines vary based on complexity and features. Simple web applications typically take 8-12 weeks, medium complexity apps with integrations take 12-20 weeks, and enterprise-level applications can take 20+ weeks. We provide detailed project timelines during the discovery phase based on your specific requirements.",
|
|
},
|
|
{
|
|
question: "What is the typical cost range for custom web development?",
|
|
answer:
|
|
"Custom web application costs depend on features, complexity, and integrations. Basic web apps start from $25,000-$50,000, mid-level applications range from $50,000-$150,000, and enterprise solutions can range from $150,000+. We provide detailed estimates after understanding your requirements and technical specifications.",
|
|
},
|
|
{
|
|
question: "Do you provide post-launch maintenance and support?",
|
|
answer:
|
|
"Yes, we offer comprehensive post-launch support including bug fixes, security updates, performance monitoring, feature enhancements, and technical support. Our maintenance packages can be tailored to your needs, from basic monitoring to full-scale ongoing development and optimization.",
|
|
},
|
|
{
|
|
question: "How do you ensure the security of custom web applications?",
|
|
answer:
|
|
"We implement multiple security layers including secure coding practices, data encryption, authentication systems, regular security audits, OWASP compliance, and secure hosting environments. We also conduct penetration testing and provide ongoing security monitoring to protect against emerging threats.",
|
|
},
|
|
];
|
|
|
|
return (
|
|
<section className="py-32 bg-black">
|
|
<div className="container mx-auto px-6 lg:px-8">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8 }}
|
|
viewport={{ once: true }}
|
|
className="text-center mb-20"
|
|
>
|
|
<h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
|
|
Frequently Asked Questions
|
|
</h2>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 40 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.2 }}
|
|
viewport={{ once: true }}
|
|
className="max-w-4xl mx-auto"
|
|
>
|
|
<Accordion type="single" collapsible className="space-y-8">
|
|
{faqs.map((faq, index) => (
|
|
<AccordionItem
|
|
key={index}
|
|
value={`item-${index}`}
|
|
className="bg-gray-900/50 backdrop-blur-md rounded-2xl border border-gray-800 px-10 shadow-lg"
|
|
>
|
|
<AccordionTrigger className="text-left hover:no-underline py-10 text-xl">
|
|
<span className="font-semibold text-white">
|
|
{faq.question}
|
|
</span>
|
|
</AccordionTrigger>
|
|
<AccordionContent className="text-gray-300 pb-10 text-lg leading-relaxed">
|
|
{faq.answer}
|
|
</AccordionContent>
|
|
</AccordionItem>
|
|
))}
|
|
</Accordion>
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
// Final CTA Section
|
|
const CustomWebAppFinalCTA = () => {
|
|
return (
|
|
<section className="py-20 relative overflow-hidden">
|
|
<div className="container mx-auto px-6 lg:px-8 relative z-10">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 50 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8 }}
|
|
viewport={{ once: true }}
|
|
className="text-center max-w-4xl mx-auto"
|
|
>
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.6 }}
|
|
viewport={{ once: true }}
|
|
className="mb-8"
|
|
>
|
|
<div className="inline-block p-[2px] rounded-full bg-gradient-to-r from-accent via-blue-500 to-purple-500">
|
|
<div className="bg-background rounded-full px-6 py-3 flex items-center gap-2">
|
|
<Globe className="w-5 h-5 text-foreground" />
|
|
<span className="text-foreground text-base font-medium">
|
|
Strategic Advantage
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
|
|
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6 leading-tight">
|
|
Build Your Strategic Advantage with a{" "}
|
|
<span className="text-accent">Custom Web Application</span>
|
|
</h2>
|
|
|
|
<motion.p
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.3 }}
|
|
viewport={{ once: true }}
|
|
className="text-xl text-muted-foreground mb-12 max-w-2xl mx-auto leading-relaxed"
|
|
>
|
|
WDI crafts powerful, secure, and intuitive web solutions designed
|
|
specifically for your business success.
|
|
</motion.p>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 40 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.4 }}
|
|
viewport={{ once: true }}
|
|
className="space-y-8"
|
|
>
|
|
<ShimmerButton
|
|
className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25"
|
|
onClick={() => navigateTo("/start-a-project")}
|
|
>
|
|
<div className="inline-flex items-center gap-3">
|
|
<Rocket className="w-6 h-6 flex-shrink-0" />
|
|
<span>Start Your Custom Web Project Today</span>
|
|
</div>
|
|
</ShimmerButton>
|
|
|
|
<p className="text-muted-foreground text-sm">
|
|
Discovery • Design • Development • Deployment • Support
|
|
</p>
|
|
</motion.div>
|
|
</motion.div>
|
|
</div>
|
|
|
|
{/* Background Decorative Elements */}
|
|
<div className="absolute top-0 left-0 w-full h-full pointer-events-none overflow-hidden">
|
|
<div className="absolute top-20 left-20 w-60 h-60 bg-accent/5 rounded-full blur-3xl"></div>
|
|
<div className="absolute bottom-20 right-20 w-60 h-60 bg-blue-500/5 rounded-full blur-3xl"></div>
|
|
<div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-80 h-80 bg-purple-500/3 rounded-full blur-3xl"></div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
// Main Custom Web Application Development Page
|
|
export const CustomWebAppDevelopment = () => {
|
|
return (
|
|
<div className="dark min-h-screen">
|
|
<Navigation />
|
|
|
|
{/* Hero Section */}
|
|
<section className="bg-black">
|
|
<CustomWebAppHeroWithCTA />
|
|
</section>
|
|
|
|
{/* Benefits */}
|
|
<section className="bg-background">
|
|
<CustomWebAppBenefits />
|
|
</section>
|
|
|
|
{/* Development Process */}
|
|
<section className="bg-card">
|
|
<CustomWebAppProcess />
|
|
</section>
|
|
|
|
{/* Services */}
|
|
<section className="bg-background">
|
|
<CustomWebAppServices />
|
|
</section>
|
|
|
|
{/* Tech Stack */}
|
|
<section className="bg-card">
|
|
<WebAppTechStack />
|
|
</section>
|
|
|
|
{/* Case Studies */}
|
|
<section className="bg-background">
|
|
<WebAppCaseStudies />
|
|
</section>
|
|
|
|
{/* Mid-Page CTA */}
|
|
<section className="bg-card">
|
|
<WebAppInlineCTA />
|
|
</section>
|
|
|
|
{/* Hire Developers */}
|
|
<section className="bg-background">
|
|
<HireWebDevelopers />
|
|
</section>
|
|
|
|
{/* FAQs */}
|
|
<section className="bg-card">
|
|
<CustomWebAppFAQs />
|
|
</section>
|
|
|
|
{/* Final CTA */}
|
|
<section className="bg-background">
|
|
<CustomWebAppFinalCTA />
|
|
</section>
|
|
|
|
{/* Footer */}
|
|
<section >
|
|
<Footer />
|
|
</section>
|
|
</div>
|
|
);
|
|
};
|