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

changes 1 - 21/07

Browse Source
This commit is contained in:
priyanshuvish
2025-07-21 15:57:34 +05:30
parent b54a0ddcc8
commit 312c23392c
32 changed files with 3829 additions and 1704 deletions
Download Patch File Download Diff File Expand all files Collapse all files

496
pages/CustomWebAppDevelopment.tsx
View File

@@ -12,7 +12,8 @@ import {
Database,
Eye,
FileText,
Globe, Layers,
Globe,
Layers,
Layers3,
Layout,
MessageSquare,
@@ -28,18 +29,24 @@ import {
TrendingUp,
Users,
Workflow,
Zap
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 {
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";
// Custom Web App Development Hero Section
const CustomWebAppHeroWithCTA = () => {
@@ -59,7 +66,9 @@ const CustomWebAppHeroWithCTA = () => {
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6 }}
>
<span className="text-white/70 text-sm font-medium">Web & Cloud Solutions</span>
<span className="text-white/70 text-sm font-medium">
Web & Cloud Solutions
</span>
</motion.div>
{/* Main Heading */}
@@ -67,12 +76,13 @@ const CustomWebAppHeroWithCTA = () => {
<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.
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 }}
@@ -80,7 +90,10 @@ const CustomWebAppHeroWithCTA = () => {
transition={{ duration: 0.8, delay: 0.3 }}
className="flex flex-col sm:flex-row gap-4"
>
<ShimmerButton className="text-lg px-8 py-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>
@@ -91,11 +104,11 @@ const CustomWebAppHeroWithCTA = () => {
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 Our Web Projects</span>
<span>Explore Projects</span>
</a>
</motion.div>
</motion.div>
{/* Right side with web app visualization */}
<motion.div
initial={{ opacity: 0, x: 50 }}
@@ -122,16 +135,18 @@ const CustomWebAppHeroWithCTA = () => {
</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="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">
@@ -152,12 +167,15 @@ const CustomWebAppHeroWithCTA = () => {
</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
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>
@@ -169,7 +187,7 @@ const CustomWebAppHeroWithCTA = () => {
</div>
</div>
</div>
{/* Floating Code Snippets */}
<motion.div
initial={{ opacity: 0, scale: 0.8 }}
@@ -187,7 +205,7 @@ const CustomWebAppHeroWithCTA = () => {
<div className="text-yellow-400">return</div>
</div>
</motion.div>
{/* Cloud Icon */}
<motion.div
initial={{ opacity: 0, scale: 0.8 }}
@@ -198,7 +216,7 @@ const CustomWebAppHeroWithCTA = () => {
<CloudCog className="w-8 h-8 text-white" />
</motion.div>
</motion.div>
{/* Feature Badges */}
<motion.div
initial={{ opacity: 0, y: 30 }}
@@ -206,15 +224,24 @@ const CustomWebAppHeroWithCTA = () => {
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">
<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">
<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">
<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>
@@ -233,28 +260,33 @@ const CustomWebAppBenefits = () => {
{
icon: Target,
title: "Tailored to Your Workflow",
description: "Perfectly aligns with unique business logic, unlike off-the-shelf solutions."
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."
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."
description:
"Custom architecture allows for robust, purpose-built security measures.",
},
{
icon: Zap,
title: "Operational Efficiency",
description: "Automate tasks, streamline processes, reduce manual effort."
description:
"Automate tasks, streamline processes, reduce manual effort.",
},
{
icon: Award,
title: "Competitive Advantage",
description: "Unique features and user experiences differentiate your brand."
}
description:
"Unique features and user experiences differentiate your brand.",
},
];
return (
@@ -271,7 +303,7 @@ const CustomWebAppBenefits = () => {
Why Invest in a Custom Web Application?
</h2>
</motion.div>
<motion.div
initial={{ opacity: 0, y: 40 }}
whileInView={{ opacity: 1, y: 0 }}
@@ -356,29 +388,34 @@ 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
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
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
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
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
}
description:
"Production deployment with monitoring, maintenance, and continuous improvement based on user feedback.",
icon: Rocket,
},
];
return (
@@ -399,12 +436,12 @@ const CustomWebAppProcess = () => {
<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}
@@ -412,15 +449,23 @@ const CustomWebAppProcess = () => {
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`}
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={`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 className="text-2xl font-bold text-accent">
0{index + 1}
</div>
</div>
<h3 className="text-2xl font-semibold text-foreground mb-4">
{step.title}
@@ -430,10 +475,10 @@ const CustomWebAppProcess = () => {
</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>
);
@@ -450,40 +495,74 @@ const CustomWebAppServices = () => {
const services = [
{
title: "Enterprise Web Portals",
description: "Secure, centralized access for employees, partners, or customers.",
description:
"Secure, centralized access for employees, partners, or customers.",
icon: Building,
features: ["Single Sign-On", "Role-based Access", "Document Management", "Communication Tools"]
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"]
features: [
"Process Automation",
"Task Management",
"Approval Workflows",
"Integration APIs",
],
},
{
title: "Data Management Systems",
description: "Custom solutions for large-scale data organization and retrieval.",
description:
"Custom solutions for large-scale data organization and retrieval.",
icon: Database,
features: ["Data Visualization", "Advanced Analytics", "Real-time Processing", "Export Tools"]
features: [
"Data Visualization",
"Advanced Analytics",
"Real-time Processing",
"Export Tools",
],
},
{
title: "Interactive Dashboards",
description: "Real-time analytics and reporting for informed decision-making.",
description:
"Real-time analytics and reporting for informed decision-making.",
icon: BarChart,
features: ["Custom Widgets", "Live Data Feeds", "Drill-down Analytics", "Scheduled Reports"]
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"]
features: [
"RESTful APIs",
"Third-party Integrations",
"Data Synchronization",
"Webhook Support",
],
},
{
title: "Web App Modernization",
description: "Revitalizing legacy systems for improved performance and user experience.",
description:
"Revitalizing legacy systems for improved performance and user experience.",
icon: RefreshCcw,
features: ["Legacy Migration", "Performance Optimization", "Modern UI/UX", "Cloud Integration"]
}
features: [
"Legacy Migration",
"Performance Optimization",
"Modern UI/UX",
"Cloud Integration",
],
},
];
return (
@@ -500,7 +579,7 @@ const CustomWebAppServices = () => {
Our Expertise in Custom Web Solutions
</h2>
</motion.div>
<motion.div
initial={{ opacity: 0, y: 40 }}
whileInView={{ opacity: 1, y: 0 }}
@@ -532,10 +611,16 @@ const CustomWebAppServices = () => {
{service.description}
</p>
<div className="space-y-2">
<h4 className="text-sm font-medium text-white">Key Features:</h4>
<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">
<Badge
key={feature}
variant="secondary"
className="text-xs bg-gray-800/50 text-gray-300 border-gray-700"
>
{feature}
</Badge>
))}
@@ -555,23 +640,75 @@ const CustomWebAppServices = () => {
// 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" },
{ name: "Angular", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/angularjs/angularjs-original.svg", category: "Frontend" },
{ name: "Vue.js", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/vuejs/vuejs-original.svg", category: "Frontend" },
{ name: "Node.js", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nodejs/nodejs-original.svg", category: "Backend" },
{ name: "Python", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/python/python-original.svg", category: "Backend" },
{ name: "Java", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/java/java-original.svg", category: "Backend" },
{
name: "React",
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/react/react-original.svg",
category: "Frontend",
},
{
name: "Angular",
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/angularjs/angularjs-original.svg",
category: "Frontend",
},
{
name: "Vue.js",
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/vuejs/vuejs-original.svg",
category: "Frontend",
},
{
name: "Node.js",
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nodejs/nodejs-original.svg",
category: "Backend",
},
{
name: "Python",
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/python/python-original.svg",
category: "Backend",
},
{
name: "Java",
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/java/java-original.svg",
category: "Backend",
},
{ name: "AWS", logo: awsLogo, category: "Cloud" },
{ name: "Azure", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/azure/azure-original.svg", category: "Cloud" },
{ name: "PostgreSQL", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/postgresql/postgresql-original.svg", category: "Database" },
{ name: "MongoDB", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/mongodb/mongodb-original.svg", category: "Database" }
{
name: "Azure",
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/azure/azure-original.svg",
category: "Cloud",
},
{
name: "PostgreSQL",
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/postgresql/postgresql-original.svg",
category: "Database",
},
{
name: "MongoDB",
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/mongodb/mongodb-original.svg",
category: "Database",
},
];
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" }
{
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 (
@@ -616,8 +753,12 @@ const WebAppTechStack = () => {
className="w-10 h-10 object-contain filter brightness-0 invert dark:brightness-100 dark:invert-0 group-hover:brightness-100 group-hover:invert-0 transition-all duration-300"
/>
</div>
<h4 className="font-semibold text-foreground text-sm mb-1">{tech.name}</h4>
<p className="text-xs text-muted-foreground">{tech.category}</p>
<h4 className="font-semibold text-foreground text-sm mb-1">
{tech.name}
</h4>
<p className="text-xs text-muted-foreground">
{tech.category}
</p>
</Card>
</motion.div>
))}
@@ -648,8 +789,12 @@ const WebAppTechStack = () => {
<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>
<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>
);
@@ -667,30 +812,36 @@ const WebAppCaseStudies = () => {
{
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",
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"
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",
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"
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",
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"
}
features: "Predictive analytics, Vendor integration, Real-time tracking",
},
];
return (
@@ -707,7 +858,7 @@ const WebAppCaseStudies = () => {
Custom Web Applications That Drive Business Growth
</h2>
</motion.div>
<motion.div
initial={{ opacity: 0, y: 40 }}
whileInView={{ opacity: 1, y: 0 }}
@@ -736,19 +887,24 @@ const WebAppCaseStudies = () => {
<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">
<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`}>
<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}
@@ -756,26 +912,28 @@ const WebAppCaseStudies = () => {
/>
</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>
<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"
<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>
<span className="text-sm font-medium">
VIEW CASE STUDY
</span>
<ArrowRight className="w-4 h-4" />
</Button>
</div>
@@ -811,20 +969,26 @@ const WebAppInlineCTA = () => {
<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>
<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.
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">
<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>
@@ -842,28 +1006,51 @@ const HireWebDevelopers = () => {
const developerTypes = [
{
title: "Frontend Specialists",
description: "React, Angular, Vue.js experts for stunning user interfaces",
description:
"React, Angular, Vue.js experts for stunning user interfaces",
icon: Layout,
skills: ["React/Angular/Vue", "TypeScript", "UI/UX Implementation", "Performance Optimization"]
skills: [
"React/Angular/Vue",
"TypeScript",
"UI/UX Implementation",
"Performance Optimization",
],
},
{
title: "Backend Engineers",
description: "Node.js, Python, Java developers for robust server-side solutions",
description:
"Node.js, Python, Java developers for robust server-side solutions",
icon: Server,
skills: ["API Development", "Database Design", "Security Implementation", "Scalable Architecture"]
skills: [
"API Development",
"Database Design",
"Security Implementation",
"Scalable Architecture",
],
},
{
title: "Full-Stack Developers",
description: "End-to-end development expertise for complete web solutions",
description:
"End-to-end development expertise for complete web solutions",
icon: Layers3,
skills: ["Frontend + Backend", "DevOps", "Database Management", "System Integration"]
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"]
}
skills: [
"AWS/Azure/GCP",
"CI/CD Pipelines",
"Container Orchestration",
"Monitoring & Logging",
],
},
];
return (
@@ -880,10 +1067,11 @@ const HireWebDevelopers = () => {
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.
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 }}
@@ -915,10 +1103,16 @@ const HireWebDevelopers = () => {
{type.description}
</p>
<div className="space-y-2">
<h4 className="text-sm font-medium text-white">Core Skills:</h4>
<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">
<Badge
key={skill}
variant="secondary"
className="text-xs bg-gray-800/50 text-gray-300 border-gray-700"
>
{skill}
</Badge>
))}
@@ -948,7 +1142,7 @@ const HireWebDevelopers = () => {
<Button
variant="outline"
size="lg"
className="text-lg px-8 py-4 border-gray-600 text-gray-300 hover:bg-gray-800 hover:text-white"
className="text-lg px-8 py-4 h-[56px] 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" />
@@ -967,20 +1161,24 @@ 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."
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."
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."
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."
}
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 (
@@ -997,7 +1195,7 @@ const CustomWebAppFAQs = () => {
Frequently Asked Questions
</h2>
</motion.div>
<motion.div
initial={{ opacity: 0, y: 40 }}
whileInView={{ opacity: 1, y: 0 }}
@@ -1007,13 +1205,15 @@ const CustomWebAppFAQs = () => {
>
<Accordion type="single" collapsible className="space-y-8">
{faqs.map((faq, index) => (
<AccordionItem
key={index}
value={`item-${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>
<span className="font-semibold text-white">
{faq.question}
</span>
</AccordionTrigger>
<AccordionContent className="text-gray-300 pb-10 text-lg leading-relaxed">
{faq.answer}
@@ -1049,7 +1249,9 @@ const CustomWebAppFinalCTA = () => {
<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>
<span className="text-foreground text-base font-medium">
Strategic Advantage
</span>
</div>
</div>
</motion.div>
@@ -1058,7 +1260,7 @@ const CustomWebAppFinalCTA = () => {
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 }}
@@ -1066,7 +1268,8 @@ const CustomWebAppFinalCTA = () => {
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.
WDI crafts powerful, secure, and intuitive web solutions designed
specifically for your business success.
</motion.p>
<motion.div
@@ -1076,7 +1279,10 @@ const CustomWebAppFinalCTA = () => {
viewport={{ once: true }}
className="space-y-8"
>
<ShimmerButton className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25">
<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>
@@ -1105,61 +1311,61 @@ 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 className="bg-card">
<Footer />
</section>
</div>
);
};
};