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

75
components/ProcessSection.tsx
View File

@@ -1,52 +1,71 @@
import { motion } from "framer-motion";
import { useRef } from "react";
import { ArrowRight, FileText, Users, CheckCircle, Rocket, Search, Code, Palette, Monitor } from "lucide-react";
import {
ArrowRight,
FileText,
Users,
CheckCircle,
Rocket,
Search,
Code,
Palette,
Monitor,
} from "lucide-react";
import { Button } from "./ui/button";
import { Badge } from "./ui/badge";
import { navigateTo } from "@/App";
const steps = [
{
id: "step-1",
title: "1. Define Scope",
description: "We begin by gathering all project inputs, defining clear goals, creating technical documentation, and aligning on expectations.",
description:
"We begin by gathering all project inputs, defining clear goals, creating technical documentation, and aligning on expectations.",
visual: {
type: "icon_or_doc_mockup",
style: "minimal_ui"
}
style: "minimal_ui",
},
},
{
id: "step-2",
title: "2. Design UI/UX",
description: "Our designers craft user-centric interfaces in Figma with clickable flows, visual systems, and detailed wireframes for all screens.",
description:
"Our designers craft user-centric interfaces in Figma with clickable flows, visual systems, and detailed wireframes for all screens.",
tags: [
{ label: "Wireframes", color: "#6366F1" },
{ label: "Prototyping", color: "#10B981" },
{ label: "UI System", color: "#F59E0B" }
]
{ label: "UI System", color: "#F59E0B" },
],
},
{
id: "step-3",
title: "3. Develop with Agile Sprints",
description: "We use Agile sprints to turn designs into production-ready code, with continuous integration and weekly builds.",
description:
"We use Agile sprints to turn designs into production-ready code, with continuous integration and weekly builds.",
tags: [
{ label: "Frontend", color: "#3B82F6" },
{ label: "Backend", color: "#0EA5E9" },
{ label: "APIs", color: "#8B5CF6" }
]
{ label: "APIs", color: "#8B5CF6" },
],
},
{
id: "step-4",
title: "4. Test, Launch & Scale",
description: "After QA and UAT, we help launch confidently. Then we monitor, iterate, and scale your product to grow with your users.",
description:
"After QA and UAT, we help launch confidently. Then we monitor, iterate, and scale your product to grow with your users.",
chat_simulation: [
{ from: "You", text: "Are we ready to go live?" },
{ from: "Team", text: "Yes! Final tests passed 🚀" }
]
}
{ from: "Team", text: "Yes! Final tests passed 🚀" },
],
},
];
// Chat simulation component - Compact version
const ChatSimulation = ({ messages }: { messages: Array<{ from: string; text: string }> }) => {
const ChatSimulation = ({
messages,
}: {
messages: Array<{ from: string; text: string }>;
}) => {
return (
<div className="space-y-2 p-3 bg-background rounded-lg border border-border">
{messages.map((message, index) => (
@@ -56,7 +75,9 @@ const ChatSimulation = ({ messages }: { messages: Array<{ from: string; text: st
whileInView={{ opacity: 1, x: 0 }}
transition={{ duration: 0.5, delay: index * 0.3 }}
viewport={{ once: true }}
className={`flex ${message.from === "You" ? "justify-start" : "justify-end"}`}
className={`flex ${
message.from === "You" ? "justify-start" : "justify-end"
}`}
>
<div
className={`max-w-[80%] px-3 py-1.5 rounded-lg ${
@@ -65,7 +86,9 @@ const ChatSimulation = ({ messages }: { messages: Array<{ from: string; text: st
: "bg-accent text-accent-foreground"
}`}
>
<div className="text-xs font-medium mb-1 opacity-70">{message.from}</div>
<div className="text-xs font-medium mb-1 opacity-70">
{message.from}
</div>
<div className="text-xs">{message.text}</div>
</div>
</motion.div>
@@ -84,7 +107,9 @@ const DocumentMockup = () => {
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
<FileText className="w-4 h-4 text-accent" />
<span className="text-xs font-medium text-foreground">Project Scope</span>
<span className="text-xs font-medium text-foreground">
Project Scope
</span>
</div>
<div className="text-xs text-muted-foreground">Draft v1.2</div>
</div>
@@ -134,7 +159,13 @@ const DocumentMockup = () => {
};
// Process step card component
const ProcessCard = ({ step, index }: { step: typeof steps[0]; index: number }) => {
const ProcessCard = ({
step,
index,
}: {
step: (typeof steps)[0];
index: number;
}) => {
const cardRef = useRef(null);
const renderContent = () => {
@@ -244,8 +275,9 @@ export const ProcessSection = () => {
viewport={{ once: true }}
className="text-muted-foreground text-xl max-w-2xl mx-auto"
>
Our proven process transforms your vision into reality through strategic planning,
thoughtful design, and expert engineering—every step of the way.
Our proven process transforms your vision into reality through
strategic planning, thoughtful design, and expert engineering—every
step of the way.
</motion.p>
</div>
@@ -267,6 +299,7 @@ export const ProcessSection = () => {
<Button
size="lg"
className="bg-accent hover:bg-accent/90 text-accent-foreground border-0 rounded-lg px-8 py-4 group text-lg"
onClick={() => navigateTo("/start-a-project")}
>
<span className="flex items-center gap-2">
Start Your Project Today

63
components/ResourceCards.tsx
View File

@@ -7,46 +7,61 @@ import { navigateTo } from "../App";
const resources = [
{
title: "UX review presentations",
excerpt: "How do you create compelling presentations that wow clients, and actually close projects and deals? Here are the key insights that will elevate your game.",
excerpt:
"How do you create compelling presentations that wow clients, and actually close projects and deals? Here are the key insights that will elevate your game.",
readTime: "8 min read",
date: "Dec 15, 2024",
image: "https://images.unsplash.com/photo-1560472355-536de3962603?w=800&h=400&fit=crop&auto=format",
image:
"https://images.unsplash.com/photo-1560472355-536de3962603?w=800&h=400&fit=crop&auto=format",
author: {
name: "Olivia Rhye",
avatar: "https://images.unsplash.com/photo-1494790108755-2616b612b47c?w=150&h=150&fit=crop&crop=face&auto=format"
avatar:
"https://images.unsplash.com/photo-1494790108755-2616b612b47c?w=150&h=150&fit=crop&crop=face&auto=format",
},
category: "Design",
slug: "ux-review-presentations"
slug: "ux-review-presentations",
},
{
title: "Migrating to Linear 101",
excerpt: "Linear helps streamline software projects, sprints, tasks, and bug tracking. Here's how to get started and make the most of it.",
excerpt:
"Linear helps streamline software projects, sprints, tasks, and bug tracking. Here's how to get started and make the most of it.",
readTime: "6 min read",
date: "Dec 10, 2024",
image: "https://images.unsplash.com/photo-1551434678-e076c223a692?w=800&h=400&fit=crop&auto=format",
image:
"https://images.unsplash.com/photo-1551434678-e076c223a692?w=800&h=400&fit=crop&auto=format",
author: {
name: "Phoenix Baker",
avatar: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=150&h=150&fit=crop&crop=face&auto=format"
avatar:
"https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=150&h=150&fit=crop&crop=face&auto=format",
},
category: "Software Engineering",
slug: "migrating-to-linear-101"
slug: "migrating-to-linear-101",
},
{
title: "Building your API Stack",
excerpt: "The rise of RESTful APIs has been met by a rise in tools for creating, testing, and managing them. Here are the best practices for API development.",
excerpt:
"The rise of RESTful APIs has been met by a rise in tools for creating, testing, and managing them. Here are the best practices for API development.",
readTime: "12 min read",
date: "Dec 5, 2024",
image: "https://images.unsplash.com/photo-1555949963-ff9fe0c870eb?w=800&h=400&fit=crop&auto=format",
image:
"https://images.unsplash.com/photo-1555949963-ff9fe0c870eb?w=800&h=400&fit=crop&auto=format",
author: {
name: "Lana Steiner",
avatar: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=150&h=150&fit=crop&crop=face&auto=format"
avatar:
"https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=150&h=150&fit=crop&crop=face&auto=format",
},
category: "Software Engineering",
slug: "building-your-api-stack"
}
slug: "building-your-api-stack",
},
];
const ResourceCard = ({ resource, index }: { resource: typeof resources[0]; index: number }) => {
const ResourceCard = ({
resource,
index,
}: {
resource: (typeof resources)[0];
index: number;
}) => {
return (
<motion.article
initial={{ opacity: 0, y: 50 }}
@@ -96,8 +111,8 @@ const ResourceCard = ({ resource, index }: { resource: typeof resources[0]; inde
</p>
{/* Author */}
<div className="flex items-center gap-3 pt-2 border-t border-border">
<ImageWithFallback
<div className="flex items-center justify-end gap-3 pt-2 border-t border-border">
{/* <ImageWithFallback
src={resource.author.avatar}
alt={resource.author.name}
className="w-10 h-10 rounded-full object-cover"
@@ -106,7 +121,7 @@ const ResourceCard = ({ resource, index }: { resource: typeof resources[0]; inde
<div className="font-medium text-foreground text-sm">
{resource.author.name}
</div>
</div>
</div> */}
<Button
variant="ghost"
size="sm"
@@ -140,14 +155,19 @@ export const ResourceCards = () => {
Insights for Founders & Product Leaders
</h2>
<p className="text-muted-foreground text-lg max-w-2xl mx-auto">
Learn from our experience building 200+ digital products. Practical insights, real case studies, and actionable strategies.
Learn from our experience building 200+ digital products. Practical
insights, real case studies, and actionable strategies.
</p>
</motion.div>
{/* Resource Cards Grid */}
<div className="grid lg:grid-cols-3 gap-8 mb-12 max-w-7xl mx-auto">
{resources.map((resource, index) => (
<ResourceCard key={resource.title} resource={resource} index={index} />
<ResourceCard
key={resource.title}
resource={resource}
index={index}
/>
))}
</div>
@@ -159,7 +179,10 @@ export const ResourceCards = () => {
viewport={{ once: true }}
className="text-center"
>
<Button className="bg-accent hover:bg-accent/90 text-accent-foreground border-0 rounded-lg px-6 py-3" onClick={() => navigateTo('/resources')}>
<Button
className="bg-accent hover:bg-accent/90 text-accent-foreground border-0 rounded-lg px-6 py-3"
onClick={() => navigateTo("/resources")}
>
View All Resources <ArrowRight className="w-4 h-4 ml-2" />
</Button>
</motion.div>

2
components/ui/checkbox.tsx
View File

@@ -14,7 +14,7 @@ function Checkbox({
<CheckboxPrimitive.Root
data-slot="checkbox"
className={cn(
"peer border bg-input-background dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
"peer border border-gray-400 bg-input-background dark:bg-input/20 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
className,
)}
{...props}

564
pages/APIBackendDevelopment.tsx
View File

@@ -29,17 +29,23 @@ import {
TrendingUp,
Users,
Wifi,
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 iotDeviceImage from "../src/images/iot-device.webp";
import { navigateTo } from "@/App";
// API & Backend Development Hero Section
const APIHeroWithCTA = () => {
@@ -59,7 +65,9 @@ const APIHeroWithCTA = () => {
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 */}
@@ -69,7 +77,8 @@ const APIHeroWithCTA = () => {
</h1>
<p className="text-lg text-gray-300 leading-relaxed max-w-lg">
Building powerful, scalable, and secure backend infrastructure and APIs to fuel your web, mobile, and IoT applications.
Building powerful, scalable, and secure backend infrastructure
and APIs to fuel your web, mobile, and IoT applications.
</p>
</div>
@@ -80,7 +89,10 @@ const APIHeroWithCTA = () => {
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">
<Server className="w-5 h-5 flex-shrink-0" />
<span>Strengthen Your Backend</span>
@@ -117,7 +129,9 @@ const APIHeroWithCTA = () => {
<div className="flex items-center justify-between mb-6">
<div className="flex items-center gap-2">
<Server className="w-5 h-5 text-white" />
<span className="text-white text-sm font-medium">Backend Infrastructure</span>
<span className="text-white text-sm font-medium">
Backend Infrastructure
</span>
</div>
<div className="flex items-center gap-2">
<Database className="w-4 h-4 text-white/80" />
@@ -132,14 +146,21 @@ const APIHeroWithCTA = () => {
<div className="bg-white/20 rounded-lg p-3">
<div className="flex items-center gap-2 mb-2">
<Globe className="w-4 h-4 text-white/80" />
<span className="text-white text-xs font-medium">REST API</span>
<span className="text-white text-xs font-medium">
REST API
</span>
</div>
<div className="space-y-1">
{['GET /users', 'POST /data', 'PUT /update'].map((endpoint, i) => (
<div key={i} className="text-white/70 text-xs bg-white/10 rounded px-2 py-1">
{["GET /users", "POST /data", "PUT /update"].map(
(endpoint, i) => (
<div
key={i}
className="text-white/70 text-xs bg-white/10 rounded px-2 py-1"
>
{endpoint}
</div>
))}
)
)}
</div>
</div>
@@ -147,7 +168,9 @@ const APIHeroWithCTA = () => {
<div className="bg-white/20 rounded-lg p-3">
<div className="flex items-center gap-2 mb-2">
<Layers className="w-4 h-4 text-white/80" />
<span className="text-white text-xs font-medium">GraphQL</span>
<span className="text-white text-xs font-medium">
GraphQL
</span>
</div>
<div className="h-12 bg-white/20 rounded flex items-center justify-center">
<Braces className="w-6 h-6 text-white/60" />
@@ -160,8 +183,14 @@ const APIHeroWithCTA = () => {
<div className="text-white text-xs">Data Flow</div>
<div className="flex items-center gap-1">
<div className="w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
<div className="w-2 h-2 bg-blue-400 rounded-full animate-pulse" style={{animationDelay: '0.5s'}}></div>
<div className="w-2 h-2 bg-yellow-400 rounded-full animate-pulse" style={{animationDelay: '1s'}}></div>
<div
className="w-2 h-2 bg-blue-400 rounded-full animate-pulse"
style={{ animationDelay: "0.5s" }}
></div>
<div
className="w-2 h-2 bg-yellow-400 rounded-full animate-pulse"
style={{ animationDelay: "1s" }}
></div>
</div>
</div>
@@ -250,20 +279,75 @@ const APIHeroWithCTA = () => {
</div>
{/* Connection Lines */}
<svg className="absolute inset-0 w-full h-full pointer-events-none" style={{top: '-20px', width: '100%', height: '450px'}}>
<svg
className="absolute inset-0 w-full h-full pointer-events-none"
style={{ top: "-20px", width: "100%", height: "450px" }}
>
<g className="opacity-30">
{/* Lines from Server to services */}
<line x1="200" y1="140" x2="120" y2="220" stroke="#E5195E" strokeWidth="2" strokeDasharray="4,4">
<animate attributeName="stroke-dashoffset" values="0;-8" dur="2s" repeatCount="indefinite" />
<line
x1="200"
y1="140"
x2="120"
y2="220"
stroke="#E5195E"
strokeWidth="2"
strokeDasharray="4,4"
>
<animate
attributeName="stroke-dashoffset"
values="0;-8"
dur="2s"
repeatCount="indefinite"
/>
</line>
<line x1="200" y1="140" x2="160" y2="220" stroke="#E5195E" strokeWidth="2" strokeDasharray="4,4">
<animate attributeName="stroke-dashoffset" values="0;-8" dur="2.5s" repeatCount="indefinite" />
<line
x1="200"
y1="140"
x2="160"
y2="220"
stroke="#E5195E"
strokeWidth="2"
strokeDasharray="4,4"
>
<animate
attributeName="stroke-dashoffset"
values="0;-8"
dur="2.5s"
repeatCount="indefinite"
/>
</line>
<line x1="200" y1="140" x2="240" y2="220" stroke="#E5195E" strokeWidth="2" strokeDasharray="4,4">
<animate attributeName="stroke-dashoffset" values="0;-8" dur="3s" repeatCount="indefinite" />
<line
x1="200"
y1="140"
x2="240"
y2="220"
stroke="#E5195E"
strokeWidth="2"
strokeDasharray="4,4"
>
<animate
attributeName="stroke-dashoffset"
values="0;-8"
dur="3s"
repeatCount="indefinite"
/>
</line>
<line x1="200" y1="140" x2="280" y2="220" stroke="#E5195E" strokeWidth="2" strokeDasharray="4,4">
<animate attributeName="stroke-dashoffset" values="0;-8" dur="3.5s" repeatCount="indefinite" />
<line
x1="200"
y1="140"
x2="280"
y2="220"
stroke="#E5195E"
strokeWidth="2"
strokeDasharray="4,4"
>
<animate
attributeName="stroke-dashoffset"
values="0;-8"
dur="3.5s"
repeatCount="indefinite"
/>
</line>
</g>
</svg>
@@ -276,15 +360,24 @@ const APIHeroWithCTA = () => {
transition={{ duration: 0.8, delay: 1.4 }}
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"
>
<TrendingUp 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"
>
<Zap className="w-3 h-3 mr-1" />
High-Performance
</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"
>
<Shield className="w-3 h-3 mr-1" />
Secure
</Badge>
@@ -303,28 +396,31 @@ const APIBenefits = () => {
{
icon: TrendingUp,
title: "Scalability for Growth",
description: "Handles increased data volume and user traffic seamlessly."
description: "Handles increased data volume and user traffic seamlessly.",
},
{
icon: Zap,
title: "Enhanced Performance",
description: "Fast data retrieval and processing for responsive applications."
description:
"Fast data retrieval and processing for responsive applications.",
},
{
icon: Shield,
title: "Ironclad Security",
description: "Protecting sensitive data and ensuring secure transactions."
description:
"Protecting sensitive data and ensuring secure transactions.",
},
{
icon: Network,
title: "Seamless Integration",
description: "Facilitates communication between diverse systems and services."
description:
"Facilitates communication between diverse systems and services.",
},
{
icon: GitBranch,
title: "Future-Proof Architecture",
description: "Modular and flexible for future expansion and innovation."
}
description: "Modular and flexible for future expansion and innovation.",
},
];
return (
@@ -426,34 +522,40 @@ const APIProcess = () => {
const steps = [
{
title: "Requirements & Architecture Design",
description: "Deep analysis of your system requirements, data flows, and designing robust, scalable architecture that supports your business goals.",
icon: ClipboardList
description:
"Deep analysis of your system requirements, data flows, and designing robust, scalable architecture that supports your business goals.",
icon: ClipboardList,
},
{
title: "Database Design & Modeling",
description: "Creating optimized database schemas, relationships, and data models for efficient storage, retrieval, and performance.",
icon: Database
description:
"Creating optimized database schemas, relationships, and data models for efficient storage, retrieval, and performance.",
icon: Database,
},
{
title: "API Development & Logic Implementation",
description: "Building RESTful APIs, GraphQL endpoints, and implementing core business logic with clean, maintainable code.",
icon: Code
description:
"Building RESTful APIs, GraphQL endpoints, and implementing core business logic with clean, maintainable code.",
icon: Code,
},
{
title: "Security & Performance Testing",
description: "Comprehensive security audits, load testing, and performance optimization to ensure robust and fast backend systems.",
icon: ShieldCheck
description:
"Comprehensive security audits, load testing, and performance optimization to ensure robust and fast backend systems.",
icon: ShieldCheck,
},
{
title: "Deployment & DevOps",
description: "Setting up CI/CD pipelines, container orchestration, and cloud infrastructure for reliable production deployment.",
icon: CloudCog
description:
"Setting up CI/CD pipelines, container orchestration, and cloud infrastructure for reliable production deployment.",
icon: CloudCog,
},
{
title: "Monitoring & Maintenance",
description: "Implementing monitoring systems, logging, and providing ongoing maintenance to ensure optimal performance and uptime.",
icon: Activity
}
description:
"Implementing monitoring systems, logging, and providing ongoing maintenance to ensure optimal performance and uptime.",
icon: Activity,
},
];
return (
@@ -487,15 +589,23 @@ const APIProcess = () => {
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}
@@ -525,46 +635,83 @@ const APIServices = () => {
const services = [
{
title: "RESTful API Development",
description: "Building robust and well-documented APIs for diverse applications.",
description:
"Building robust and well-documented APIs for diverse applications.",
icon: Globe,
features: ["REST Architecture", "OpenAPI Documentation", "Versioning Strategy", "Rate Limiting"]
features: [
"REST Architecture",
"OpenAPI Documentation",
"Versioning Strategy",
"Rate Limiting",
],
},
{
title: "Microservices Architecture",
description: "Designing scalable, independent service components.",
icon: Component,
features: ["Service Decomposition", "Inter-service Communication", "Data Consistency", "Service Discovery"]
features: [
"Service Decomposition",
"Inter-service Communication",
"Data Consistency",
"Service Discovery",
],
},
{
title: "GraphQL API Development",
description: "Efficient data fetching for complex client needs.",
icon: Layers,
features: ["Schema Design", "Query Optimization", "Real-time Subscriptions", "Federation"]
features: [
"Schema Design",
"Query Optimization",
"Real-time Subscriptions",
"Federation",
],
},
{
title: "Database Design & Management",
description: "Optimizing SQL and NoSQL databases for performance.",
icon: Database,
features: ["Schema Optimization", "Query Performance", "Data Migration", "Backup Strategies"]
features: [
"Schema Optimization",
"Query Performance",
"Data Migration",
"Backup Strategies",
],
},
{
title: "Cloud Backend Solutions",
description: "Leveraging AWS, Azure, GCP for scalable infrastructure.",
icon: Cloud,
features: ["Serverless Architecture", "Auto-scaling", "Load Balancing", "Multi-region Deployment"]
features: [
"Serverless Architecture",
"Auto-scaling",
"Load Balancing",
"Multi-region Deployment",
],
},
{
title: "Backend for IoT & Devices",
description: "Building server-side logic for connected devices.",
icon: Wifi,
features: ["Device Management", "Real-time Data Processing", "Protocol Integration", "Edge Computing"]
features: [
"Device Management",
"Real-time Data Processing",
"Protocol Integration",
"Edge Computing",
],
},
{
title: "Third-Party API Integration",
description: "Seamlessly connecting your applications with external services.",
description:
"Seamlessly connecting your applications with external services.",
icon: PlugZap,
features: ["API Integration", "Data Synchronization", "Error Handling", "Webhook Management"]
}
features: [
"API Integration",
"Data Synchronization",
"Error Handling",
"Webhook Management",
],
},
];
return (
@@ -613,10 +760,16 @@ const APIServices = () => {
{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>
))}
@@ -662,10 +815,16 @@ const APIServices = () => {
{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>
))}
@@ -686,39 +845,103 @@ const APIServices = () => {
// API & Backend Tech Stack
const APITechStack = () => {
const backends = [
{ name: "Node.js", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nodejs/nodejs-original.svg", category: "Runtime" },
{ name: "Python", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/python/python-original.svg", category: "Language" },
{ name: "Java", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/java/java-original.svg", category: "Language" },
{ name: "Ruby", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/ruby/ruby-original.svg", category: "Language" },
{ name: "Go", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/go/go-original.svg", category: "Language" },
{ name: "PHP", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/php/php-original.svg", category: "Language" }
{
name: "Node.js",
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nodejs/nodejs-original.svg",
category: "Runtime",
},
{
name: "Python",
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/python/python-original.svg",
category: "Language",
},
{
name: "Java",
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/java/java-original.svg",
category: "Language",
},
{
name: "Ruby",
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/ruby/ruby-original.svg",
category: "Language",
},
{
name: "Go",
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/go/go-original.svg",
category: "Language",
},
{
name: "PHP",
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/php/php-original.svg",
category: "Language",
},
];
const frameworks = [
{ name: "Express.js", icon: Terminal, description: "Fast Node.js web framework" },
{ name: "Django", icon: Code, description: "High-level Python web framework" },
{ name: "Spring Boot", icon: Layers, description: "Java application framework" },
{ name: "Ruby on Rails", icon: GitBranch, description: "Full-stack web framework" }
{
name: "Express.js",
icon: Terminal,
description: "Fast Node.js web framework",
},
{
name: "Django",
icon: Code,
description: "High-level Python web framework",
},
{
name: "Spring Boot",
icon: Layers,
description: "Java application framework",
},
{
name: "Ruby on Rails",
icon: GitBranch,
description: "Full-stack web framework",
},
];
const databases = [
{ name: "PostgreSQL", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/postgresql/postgresql-original.svg", category: "SQL" },
{ name: "MySQL", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/mysql/mysql-original.svg", category: "SQL" },
{ name: "MongoDB", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/mongodb/mongodb-original.svg", category: "NoSQL" },
{ name: "Redis", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/redis/redis-original.svg", category: "Cache" }
{
name: "PostgreSQL",
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/postgresql/postgresql-original.svg",
category: "SQL",
},
{
name: "MySQL",
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/mysql/mysql-original.svg",
category: "SQL",
},
{
name: "MongoDB",
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/mongodb/mongodb-original.svg",
category: "NoSQL",
},
{
name: "Redis",
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/redis/redis-original.svg",
category: "Cache",
},
];
const cloudPlatforms = [
{ name: "AWS", icon: Cloud, description: "Amazon Web Services" },
{ name: "Azure", icon: CloudCog, description: "Microsoft Azure" },
{ name: "Google Cloud", icon: CloudLightning, description: "Google Cloud Platform" }
{
name: "Google Cloud",
icon: CloudLightning,
description: "Google Cloud Platform",
},
];
const devOpsTools = [
{ name: "Docker", icon: Container, description: "Containerization platform" },
{
name: "Docker",
icon: Container,
description: "Containerization platform",
},
{ name: "Kubernetes", icon: Boxes, description: "Container orchestration" },
{ name: "GraphQL", icon: Layers, description: "Query language for APIs" },
{ name: "REST", icon: Globe, description: "RESTful API architecture" }
{ name: "REST", icon: Globe, description: "RESTful API architecture" },
];
return (
@@ -735,7 +958,8 @@ const APITechStack = () => {
Building Secure and High-Performance Backends
</h2>
<p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
With industry-leading technologies that ensure scalability, security, and reliability.
With industry-leading technologies that ensure scalability,
security, and reliability.
</p>
</motion.div>
@@ -747,7 +971,9 @@ const APITechStack = () => {
viewport={{ once: true }}
className="mb-16"
>
<h3 className="text-2xl font-semibold text-foreground mb-8 text-center">Backend Languages & Runtimes</h3>
<h3 className="text-2xl font-semibold text-foreground mb-8 text-center">
Backend Languages & Runtimes
</h3>
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6">
{backends.map((tech, index) => (
<motion.div
@@ -767,8 +993,12 @@ const APITechStack = () => {
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>
))}
@@ -783,7 +1013,9 @@ const APITechStack = () => {
viewport={{ once: true }}
className="mb-16"
>
<h3 className="text-2xl font-semibold text-foreground mb-8 text-center">Backend Frameworks</h3>
<h3 className="text-2xl font-semibold text-foreground mb-8 text-center">
Backend Frameworks
</h3>
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
{frameworks.map((framework, index) => {
const IconComponent = framework.icon;
@@ -801,8 +1033,12 @@ const APITechStack = () => {
<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>
);
@@ -818,7 +1054,9 @@ const APITechStack = () => {
viewport={{ once: true }}
className="mb-16"
>
<h3 className="text-2xl font-semibold text-foreground mb-8 text-center">Database Technologies</h3>
<h3 className="text-2xl font-semibold text-foreground mb-8 text-center">
Database Technologies
</h3>
<div className="grid grid-cols-2 md:grid-cols-4 gap-6">
{databases.map((db, index) => (
<motion.div
@@ -838,7 +1076,9 @@ const APITechStack = () => {
className="w-8 h-8 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">{db.name}</h4>
<h4 className="font-semibold text-foreground text-sm mb-1">
{db.name}
</h4>
<p className="text-xs text-muted-foreground">{db.category}</p>
</Card>
</motion.div>
@@ -856,7 +1096,9 @@ const APITechStack = () => {
>
{/* Cloud Platforms */}
<div>
<h3 className="text-2xl font-semibold text-foreground mb-8 text-center">Cloud Platforms</h3>
<h3 className="text-2xl font-semibold text-foreground mb-8 text-center">
Cloud Platforms
</h3>
<div className="grid grid-cols-3 gap-4">
{cloudPlatforms.map((platform, index) => {
const IconComponent = platform.icon;
@@ -874,8 +1116,12 @@ const APITechStack = () => {
<div className="w-10 h-10 bg-accent/20 rounded-lg flex items-center justify-center mx-auto mb-3">
<IconComponent className="w-5 h-5 text-accent" />
</div>
<h4 className="font-semibold text-foreground text-sm mb-1">{platform.name}</h4>
<p className="text-xs text-muted-foreground">{platform.description}</p>
<h4 className="font-semibold text-foreground text-sm mb-1">
{platform.name}
</h4>
<p className="text-xs text-muted-foreground">
{platform.description}
</p>
</Card>
</motion.div>
);
@@ -885,7 +1131,9 @@ const APITechStack = () => {
{/* DevOps & Tools */}
<div>
<h3 className="text-2xl font-semibold text-foreground mb-8 text-center">DevOps & API Tools</h3>
<h3 className="text-2xl font-semibold text-foreground mb-8 text-center">
DevOps & API Tools
</h3>
<div className="grid grid-cols-2 gap-4">
{devOpsTools.map((tool, index) => {
const IconComponent = tool.icon;
@@ -903,8 +1151,12 @@ const APITechStack = () => {
<div className="w-10 h-10 bg-accent/20 rounded-lg flex items-center justify-center mx-auto mb-3">
<IconComponent className="w-5 h-5 text-accent" />
</div>
<h4 className="font-semibold text-foreground text-sm mb-1">{tool.name}</h4>
<p className="text-xs text-muted-foreground">{tool.description}</p>
<h4 className="font-semibold text-foreground text-sm mb-1">
{tool.name}
</h4>
<p className="text-xs text-muted-foreground">
{tool.description}
</p>
</Card>
</motion.div>
);
@@ -923,30 +1175,35 @@ const APICaseStudies = () => {
{
title: "High-Traffic Social Platform Backend",
client: "SocialConnect",
description: "Scalable microservices architecture supporting 10M+ daily active users with real-time messaging, content feeds, and comprehensive analytics systems",
image: "https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=400&h=300&fit=crop&auto=format",
description:
"Scalable microservices architecture supporting 10M+ daily active users with real-time messaging, content feeds, and comprehensive analytics systems",
image:
"https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=400&h=300&fit=crop&auto=format",
results: "99.9% uptime at 10M+ DAU",
gradient: "from-blue-500/20 to-cyan-500/20",
features: "Microservices, Real-time APIs, Auto-scaling"
features: "Microservices, Real-time APIs, Auto-scaling",
},
{
title: "Financial Services API Gateway",
client: "FinTech Pro",
description: "Secure, compliant API infrastructure for banking services with multi-layer security, transaction processing, and regulatory compliance features",
image: "https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=400&h=300&fit=crop&auto=format",
description:
"Secure, compliant API infrastructure for banking services with multi-layer security, transaction processing, and regulatory compliance features",
image:
"https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=400&h=300&fit=crop&auto=format",
results: "PCI DSS compliant with 99.99% SLA",
gradient: "from-green-500/20 to-emerald-500/20",
features: "Security Compliance, Transaction APIs, Real-time Processing"
features: "Security Compliance, Transaction APIs, Real-time Processing",
},
{
title: "IoT Device Management Platform",
client: "SmartTech Solutions",
description: "Backend infrastructure managing 500K+ connected devices with real-time data processing, device monitoring, and predictive analytics capabilities",
description:
"Backend infrastructure managing 500K+ connected devices with real-time data processing, device monitoring, and predictive analytics capabilities",
image: iotDeviceImage,
results: "500K+ devices managed seamlessly",
gradient: "from-purple-500/20 to-pink-500/20",
features: "IoT Integration, Real-time Data, Device Management"
}
features: "IoT Integration, Real-time Data, Device Management",
},
];
return (
@@ -992,7 +1249,10 @@ const APICaseStudies = () => {
<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>
@@ -1004,7 +1264,9 @@ const APICaseStudies = () => {
</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}
@@ -1018,10 +1280,10 @@ const APICaseStudies = () => {
{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>
@@ -1031,7 +1293,9 @@ const APICaseStudies = () => {
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>
@@ -1067,7 +1331,9 @@ const APIInlineCTA = () => {
<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">
<Server className="w-5 h-5 text-foreground" />
<span className="text-foreground text-base font-medium">Backend Excellence</span>
<span className="text-foreground text-base font-medium">
Backend Excellence
</span>
</div>
</div>
@@ -1077,10 +1343,14 @@ const APIInlineCTA = () => {
</h2>
<p className="text-xl text-muted-foreground leading-relaxed max-w-2xl mx-auto">
Our architects and developers ensure your digital products are built on a strong foundation.
Our architects and developers ensure your digital products are
built on a strong foundation.
</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 Backend Consultation</span>
@@ -1100,38 +1370,48 @@ const HireBackendDevelopers = () => {
title: "Node.js Developers",
description: "Specialists in JavaScript backend development",
icon: Terminal,
skills: ["Express.js", "NestJS", "RESTful APIs", "Real-time Applications"]
skills: [
"Express.js",
"NestJS",
"RESTful APIs",
"Real-time Applications",
],
},
{
title: "Python Developers",
description: "Experts in Django, Flask, and FastAPI",
icon: Code,
skills: ["Django", "Flask", "FastAPI", "Data Processing"]
skills: ["Django", "Flask", "FastAPI", "Data Processing"],
},
{
title: "Java Developers",
description: "Spring Boot and enterprise application specialists",
icon: Layers,
skills: ["Spring Boot", "Microservices", "Enterprise Solutions", "API Development"]
skills: [
"Spring Boot",
"Microservices",
"Enterprise Solutions",
"API Development",
],
},
{
title: "DevOps Engineers",
description: "Infrastructure and deployment automation experts",
icon: CloudCog,
skills: ["Docker", "Kubernetes", "CI/CD", "Cloud Platforms"]
skills: ["Docker", "Kubernetes", "CI/CD", "Cloud Platforms"],
},
{
title: "Database Architects",
description: "SQL and NoSQL database design specialists",
icon: Database,
skills: ["PostgreSQL", "MongoDB", "Redis", "Database Optimization"]
skills: ["PostgreSQL", "MongoDB", "Redis", "Database Optimization"],
},
{
title: "API Architects",
description: "RESTful and GraphQL API design experts",
icon: Globe,
skills: ["REST Design", "GraphQL", "API Security", "Documentation"]
}
skills: ["REST Design", "GraphQL", "API Security", "Documentation"],
},
];
return (
@@ -1148,7 +1428,8 @@ const HireBackendDevelopers = () => {
Hire Specialized Backend & API Developers
</h2>
<p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
Access our pool of expert backend engineers proficient in various languages, databases, and cloud platforms.
Access our pool of expert backend engineers proficient in various
languages, databases, and cloud platforms.
</p>
</motion.div>
@@ -1183,10 +1464,16 @@ const HireBackendDevelopers = () => {
{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>
))}
@@ -1235,20 +1522,24 @@ const APIFAQs = () => {
const faqs = [
{
question: "What is the difference between REST and GraphQL APIs?",
answer: "REST is a architectural style using standard HTTP methods with multiple endpoints for different resources, while GraphQL uses a single endpoint with a query language that allows clients to request exactly the data they need. REST is simpler and widely adopted, making it great for straightforward CRUD operations. GraphQL offers more flexibility and efficiency for complex data fetching, reducing over-fetching and under-fetching of data. We help you choose the right approach based on your specific use case, team expertise, and performance requirements."
answer:
"REST is a architectural style using standard HTTP methods with multiple endpoints for different resources, while GraphQL uses a single endpoint with a query language that allows clients to request exactly the data they need. REST is simpler and widely adopted, making it great for straightforward CRUD operations. GraphQL offers more flexibility and efficiency for complex data fetching, reducing over-fetching and under-fetching of data. We help you choose the right approach based on your specific use case, team expertise, and performance requirements.",
},
{
question: "How do you ensure the security of APIs?",
answer: "We implement multiple layers of API security including authentication (JWT, OAuth 2.0), authorization with role-based access control, rate limiting to prevent abuse, input validation and sanitization, HTTPS encryption, API key management, and comprehensive logging for audit trails. We also conduct security testing, implement CORS policies, use API gateways for additional protection, and follow OWASP guidelines. Regular security audits and penetration testing ensure your APIs remain secure against emerging threats."
answer:
"We implement multiple layers of API security including authentication (JWT, OAuth 2.0), authorization with role-based access control, rate limiting to prevent abuse, input validation and sanitization, HTTPS encryption, API key management, and comprehensive logging for audit trails. We also conduct security testing, implement CORS policies, use API gateways for additional protection, and follow OWASP guidelines. Regular security audits and penetration testing ensure your APIs remain secure against emerging threats.",
},
{
question: "Can you help scale our existing backend infrastructure?",
answer: "Absolutely! We specialize in scaling existing backends through various approaches: performance auditing to identify bottlenecks, database optimization and query tuning, implementing caching strategies (Redis, CDN), load balancing, horizontal scaling with microservices architecture, cloud migration for auto-scaling capabilities, and code optimization. We can also refactor monolithic applications into microservices, implement container orchestration with Kubernetes, and set up monitoring systems to proactively manage performance as you grow."
answer:
"Absolutely! We specialize in scaling existing backends through various approaches: performance auditing to identify bottlenecks, database optimization and query tuning, implementing caching strategies (Redis, CDN), load balancing, horizontal scaling with microservices architecture, cloud migration for auto-scaling capabilities, and code optimization. We can also refactor monolithic applications into microservices, implement container orchestration with Kubernetes, and set up monitoring systems to proactively manage performance as you grow.",
},
{
question: "What's the importance of microservices architecture?",
answer: "Microservices architecture breaks down applications into small, independent services that communicate via APIs. Key benefits include: independent deployment and scaling of services, technology diversity (different services can use different tech stacks), fault isolation (one service failure doesn't crash the entire system), team independence, and easier maintenance. However, microservices add complexity in service communication, data consistency, and deployment orchestration. We help you determine if microservices are right for your use case and handle the complex transition if needed."
}
answer:
"Microservices architecture breaks down applications into small, independent services that communicate via APIs. Key benefits include: independent deployment and scaling of services, technology diversity (different services can use different tech stacks), fault isolation (one service failure doesn't crash the entire system), team independence, and easier maintenance. However, microservices add complexity in service communication, data consistency, and deployment orchestration. We help you determine if microservices are right for your use case and handle the complex transition if needed.",
},
];
return (
@@ -1281,7 +1572,9 @@ const APIFAQs = () => {
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}
@@ -1317,7 +1610,9 @@ const APIFinalCTA = () => {
<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">
<Server className="w-5 h-5 text-foreground" />
<span className="text-foreground text-base font-medium">Backend Excellence</span>
<span className="text-foreground text-base font-medium">
Backend Excellence
</span>
</div>
</div>
</motion.div>
@@ -1334,7 +1629,8 @@ const APIFinalCTA = () => {
viewport={{ once: true }}
className="text-xl text-muted-foreground mb-12 max-w-2xl mx-auto leading-relaxed"
>
Ensure your applications are fast, secure, and scalable with our expert API and backend development services.
Ensure your applications are fast, secure, and scalable with our
expert API and backend development services.
</motion.p>
<motion.div
@@ -1344,7 +1640,10 @@ const APIFinalCTA = () => {
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>Empower Your Digital Products</span>
@@ -1352,7 +1651,8 @@ const APIFinalCTA = () => {
</ShimmerButton>
<p className="text-muted-foreground text-sm">
API Development • Microservices Architecture • Cloud Infrastructure
API Development • Microservices Architecture • Cloud
Infrastructure
</p>
</motion.div>
</motion.div>

8
pages/AboutWDI.tsx
View File

@@ -66,7 +66,7 @@ const HeroWithCTA = () => {
<Button
variant="secondary"
size="lg"
className="text-lg px-8 py-4"
className="text-lg px-8 py-4 h-[56px]"
onClick={() => navigateTo('/case-studies')}
>
<Eye className="w-4 h-4 flex-shrink-0" />
@@ -544,7 +544,7 @@ const InlineCTA = () => {
<Button
variant="secondary"
size="lg"
className="text-xl px-10 py-5 rounded-2xl"
className="text-xl px-10 py-5 rounded-2xl h-[56px]"
onClick={() => navigateTo('/services')}
>
<Briefcase className="w-6 h-6 flex-shrink-0" />
@@ -562,7 +562,7 @@ const InlineCTA = () => {
const aboutWDIFAQs = [
{
question: "When was WDI founded?",
answer: "WDI was founded in 2018 with a mission to transform businesses through cutting-edge technology and exceptional service. Since then, we've grown to become industry leaders in digital solutions."
answer: "WDI was founded in 1999 with a mission to transform businesses through cutting-edge technology and exceptional service. Since then, we've grown to become industry leaders in digital solutions."
},
{
question: "What makes WDI different from other development companies?",
@@ -589,7 +589,7 @@ export const AboutWDI = () => {
<HeroWithCTA />
<WhyChooseWDISection />
<ImpactNumbersSection />
<LearnMoreSection />
{/* <LearnMoreSection /> */}
<TestimonialSection />
<MissionSection />
<ProcessSection />

499
pages/AdminPanelsDashboards.tsx
View File

@@ -29,17 +29,23 @@ import {
Users as UsersIcon,
Workflow,
Wrench,
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 healthcareImage from "../src/images/healthcare.webp";
import { navigateTo } from "@/App";
// Admin Panels & Dashboards Hero Section
const AdminHeroWithCTA = () => {
@@ -59,7 +65,9 @@ const AdminHeroWithCTA = () => {
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 */}
@@ -69,7 +77,9 @@ const AdminHeroWithCTA = () => {
</h1>
<p className="text-lg text-gray-300 leading-relaxed max-w-lg">
Empower your team with custom, data-rich admin interfaces and dashboards for streamlined operations, reporting, and management.
Empower your team with custom, data-rich admin interfaces and
dashboards for streamlined operations, reporting, and
management.
</p>
</div>
@@ -80,7 +90,10 @@ const AdminHeroWithCTA = () => {
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">
<Monitor className="w-5 h-5 flex-shrink-0" />
<span>Request a Demo</span>
@@ -117,7 +130,9 @@ const AdminHeroWithCTA = () => {
<div className="flex items-center justify-between mb-6">
<div className="flex items-center gap-2">
<Monitor className="w-5 h-5 text-white" />
<span className="text-white text-sm font-medium">Admin Dashboard</span>
<span className="text-white text-sm font-medium">
Admin Dashboard
</span>
</div>
<div className="flex items-center gap-2">
<Bell className="w-4 h-4 text-white/80" />
@@ -132,17 +147,31 @@ const AdminHeroWithCTA = () => {
<div className="bg-white/20 rounded-lg p-3 col-span-2">
<BarChart2 className="w-4 h-4 text-white/80 mb-2" />
<div className="h-8 bg-white/20 rounded flex items-end gap-1 p-1">
<div className="w-2 bg-white/60 rounded" style={{height: '60%'}}></div>
<div className="w-2 bg-white/80 rounded" style={{height: '80%'}}></div>
<div className="w-2 bg-white/60 rounded" style={{height: '40%'}}></div>
<div className="w-2 bg-white rounded" style={{height: '100%'}}></div>
<div
className="w-2 bg-white/60 rounded"
style={{ height: "60%" }}
></div>
<div
className="w-2 bg-white/80 rounded"
style={{ height: "80%" }}
></div>
<div
className="w-2 bg-white/60 rounded"
style={{ height: "40%" }}
></div>
<div
className="w-2 bg-white rounded"
style={{ height: "100%" }}
></div>
</div>
</div>
{/* Stats Widget */}
<div className="bg-white/20 rounded-lg p-3 flex flex-col items-center justify-center">
<UsersIcon className="w-4 h-4 text-white/80 mb-1" />
<span className="text-white text-xs font-medium">1,247</span>
<span className="text-white text-xs font-medium">
1,247
</span>
</div>
</div>
@@ -150,7 +179,9 @@ const AdminHeroWithCTA = () => {
<div className="bg-white/20 rounded-lg p-2">
<div className="flex items-center gap-2 mb-2">
<Table className="w-3 h-3 text-white/80" />
<span className="text-white text-xs">Data Management</span>
<span className="text-white text-xs">
Data Management
</span>
</div>
<div className="space-y-1">
{[1, 2, 3].map((i) => (
@@ -238,20 +269,75 @@ const AdminHeroWithCTA = () => {
</div>
{/* Connection Lines */}
<svg className="absolute inset-0 w-full h-full pointer-events-none" style={{top: '-20px', width: '100%', height: '400px'}}>
<svg
className="absolute inset-0 w-full h-full pointer-events-none"
style={{ top: "-20px", width: "100%", height: "400px" }}
>
<g className="opacity-30">
{/* Lines from Dashboard to modules */}
<line x1="200" y1="120" x2="120" y2="200" stroke="#E5195E" strokeWidth="2" strokeDasharray="4,4">
<animate attributeName="stroke-dashoffset" values="0;-8" dur="2s" repeatCount="indefinite" />
<line
x1="200"
y1="120"
x2="120"
y2="200"
stroke="#E5195E"
strokeWidth="2"
strokeDasharray="4,4"
>
<animate
attributeName="stroke-dashoffset"
values="0;-8"
dur="2s"
repeatCount="indefinite"
/>
</line>
<line x1="200" y1="120" x2="160" y2="200" stroke="#E5195E" strokeWidth="2" strokeDasharray="4,4">
<animate attributeName="stroke-dashoffset" values="0;-8" dur="2.5s" repeatCount="indefinite" />
<line
x1="200"
y1="120"
x2="160"
y2="200"
stroke="#E5195E"
strokeWidth="2"
strokeDasharray="4,4"
>
<animate
attributeName="stroke-dashoffset"
values="0;-8"
dur="2.5s"
repeatCount="indefinite"
/>
</line>
<line x1="200" y1="120" x2="240" y2="200" stroke="#E5195E" strokeWidth="2" strokeDasharray="4,4">
<animate attributeName="stroke-dashoffset" values="0;-8" dur="3s" repeatCount="indefinite" />
<line
x1="200"
y1="120"
x2="240"
y2="200"
stroke="#E5195E"
strokeWidth="2"
strokeDasharray="4,4"
>
<animate
attributeName="stroke-dashoffset"
values="0;-8"
dur="3s"
repeatCount="indefinite"
/>
</line>
<line x1="200" y1="120" x2="280" y2="200" stroke="#E5195E" strokeWidth="2" strokeDasharray="4,4">
<animate attributeName="stroke-dashoffset" values="0;-8" dur="3.5s" repeatCount="indefinite" />
<line
x1="200"
y1="120"
x2="280"
y2="200"
stroke="#E5195E"
strokeWidth="2"
strokeDasharray="4,4"
>
<animate
attributeName="stroke-dashoffset"
values="0;-8"
dur="3.5s"
repeatCount="indefinite"
/>
</line>
</g>
</svg>
@@ -264,15 +350,24 @@ const AdminHeroWithCTA = () => {
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"
>
<BarChart className="w-3 h-3 mr-1" />
Data-Rich
</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"
>
<Zap className="w-3 h-3 mr-1" />
Intuitive
</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"
>
<Shield className="w-3 h-3 mr-1" />
Secure
</Badge>
@@ -291,28 +386,28 @@ const AdminBenefits = () => {
{
icon: Workflow,
title: "Streamlined Operations",
description: "Centralized control for all business functions."
description: "Centralized control for all business functions.",
},
{
icon: BarChart,
title: "Actionable Insights",
description: "Real-time data visualization for informed decisions."
description: "Real-time data visualization for informed decisions.",
},
{
icon: Shield,
title: "Enhanced Security",
description: "Granular access controls and data protection."
description: "Granular access controls and data protection.",
},
{
icon: TrendingUp,
title: "Scalability & Flexibility",
description: "Adapts as your business processes evolve."
description: "Adapts as your business processes evolve.",
},
{
icon: Users,
title: "User-Centric Design",
description: "Intuitive interfaces for efficient team management."
}
description: "Intuitive interfaces for efficient team management.",
},
];
return (
@@ -414,29 +509,34 @@ const AdminProcess = () => {
const steps = [
{
title: "Requirement Gathering & Workflow Analysis",
description: "Deep dive into your business processes, user roles, and operational requirements to design the perfect admin solution.",
icon: ClipboardList
description:
"Deep dive into your business processes, user roles, and operational requirements to design the perfect admin solution.",
icon: ClipboardList,
},
{
title: "UX/UI Design & Prototyping",
description: "Creating intuitive, user-friendly interfaces with wireframes and interactive prototypes for efficient workflow management.",
icon: Paintbrush2
description:
"Creating intuitive, user-friendly interfaces with wireframes and interactive prototypes for efficient workflow management.",
icon: Paintbrush2,
},
{
title: "Development & Backend Integration",
description: "Building robust admin panels with secure backend systems, database integration, and real-time data processing capabilities.",
icon: Code
description:
"Building robust admin panels with secure backend systems, database integration, and real-time data processing capabilities.",
icon: Code,
},
{
title: "Testing & Security Audit",
description: "Comprehensive testing including functionality, performance, security vulnerabilities, and user acceptance testing.",
icon: ShieldCheck
description:
"Comprehensive testing including functionality, performance, security vulnerabilities, and user acceptance testing.",
icon: ShieldCheck,
},
{
title: "Deployment & Training",
description: "Seamless deployment with comprehensive team training, documentation, and ongoing support for successful adoption.",
icon: GraduationCap
}
description:
"Seamless deployment with comprehensive team training, documentation, and ongoing support for successful adoption.",
icon: GraduationCap,
},
];
return (
@@ -470,15 +570,23 @@ const AdminProcess = () => {
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}
@@ -510,38 +618,68 @@ const AdminServices = () => {
title: "User & Content Management Systems",
description: "For websites, apps, and platforms.",
icon: UsersIcon,
features: ["User Roles & Permissions", "Content Publishing", "Media Management", "Workflow Approval"]
features: [
"User Roles & Permissions",
"Content Publishing",
"Media Management",
"Workflow Approval",
],
},
{
title: "Order & Inventory Management Dashboards",
description: "Centralized control for eCommerce/logistics.",
icon: PackageCheck,
features: ["Real-time Inventory", "Order Processing", "Shipping Management", "Stock Alerts"]
features: [
"Real-time Inventory",
"Order Processing",
"Shipping Management",
"Stock Alerts",
],
},
{
title: "Analytics & Reporting Dashboards",
description: "Visualizing key performance indicators.",
icon: BarChart,
features: ["Custom Reports", "Data Visualization", "KPI Tracking", "Export Functions"]
features: [
"Custom Reports",
"Data Visualization",
"KPI Tracking",
"Export Functions",
],
},
{
title: "Customer Relationship Management (CRM) Tools",
description: "Custom interfaces for sales and support.",
icon: Handshake,
features: ["Contact Management", "Sales Pipeline", "Support Tickets", "Communication History"]
features: [
"Contact Management",
"Sales Pipeline",
"Support Tickets",
"Communication History",
],
},
{
title: "Financial & Billing Dashboards",
description: "Managing transactions, invoices, and subscriptions.",
icon: Receipt,
features: ["Invoice Generation", "Payment Tracking", "Revenue Analytics", "Subscription Management"]
features: [
"Invoice Generation",
"Payment Tracking",
"Revenue Analytics",
"Subscription Management",
],
},
{
title: "Internal Tools Development",
description: "Bespoke applications for internal team productivity.",
icon: Wrench,
features: ["Custom Workflows", "Team Collaboration", "Task Management", "Resource Planning"]
}
features: [
"Custom Workflows",
"Team Collaboration",
"Task Management",
"Resource Planning",
],
},
];
return (
@@ -590,10 +728,16 @@ const AdminServices = () => {
{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>
))}
@@ -613,27 +757,75 @@ const AdminServices = () => {
// Admin Panel Tech Stack
const AdminTechStack = () => {
const frontends = [
{ 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: "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",
},
];
const backends = [
{ name: "Node.js", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nodejs/nodejs-original.svg", category: "Backend" },
{ name: "Python/Django", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/python/python-original.svg", category: "Backend" },
{ name: "Ruby on Rails", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/ruby/ruby-original.svg", category: "Backend" },
{ name: "PHP/Laravel", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/php/php-original.svg", category: "Backend" }
{
name: "Node.js",
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nodejs/nodejs-original.svg",
category: "Backend",
},
{
name: "Python/Django",
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/python/python-original.svg",
category: "Backend",
},
{
name: "Ruby on Rails",
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/ruby/ruby-original.svg",
category: "Backend",
},
{
name: "PHP/Laravel",
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/php/php-original.svg",
category: "Backend",
},
];
const databases = [
{ name: "PostgreSQL", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/postgresql/postgresql-original.svg", category: "Database" },
{ name: "MySQL", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/mysql/mysql-original.svg", category: "Database" },
{ name: "MongoDB", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/mongodb/mongodb-original.svg", category: "Database" }
{
name: "PostgreSQL",
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/postgresql/postgresql-original.svg",
category: "Database",
},
{
name: "MySQL",
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/mysql/mysql-original.svg",
category: "Database",
},
{
name: "MongoDB",
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/mongodb/mongodb-original.svg",
category: "Database",
},
];
const visualizationTools = [
{ name: "Chart.js", icon: BarChart2, description: "Interactive charts and graphs" },
{ name: "D3.js", icon: LineChart, description: "Advanced data visualization" }
{
name: "Chart.js",
icon: BarChart2,
description: "Interactive charts and graphs",
},
{
name: "D3.js",
icon: LineChart,
description: "Advanced data visualization",
},
];
return (
@@ -650,7 +842,8 @@ const AdminTechStack = () => {
Building Powerful and Efficient Admin Interfaces
</h2>
<p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
With reliable technologies that ensure performance, security, and scalability.
With reliable technologies that ensure performance, security, and
scalability.
</p>
</motion.div>
@@ -662,7 +855,9 @@ const AdminTechStack = () => {
viewport={{ once: true }}
className="mb-16"
>
<h3 className="text-2xl font-semibold text-foreground mb-8 text-center">Frontend Technologies</h3>
<h3 className="text-2xl font-semibold text-foreground mb-8 text-center">
Frontend Technologies
</h3>
<div className="grid grid-cols-3 gap-6 max-w-2xl mx-auto">
{frontends.map((tech, index) => (
<motion.div
@@ -682,8 +877,12 @@ const AdminTechStack = () => {
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>
))}
@@ -701,7 +900,9 @@ const AdminTechStack = () => {
<div className="grid lg:grid-cols-2 gap-12">
{/* Backend */}
<div>
<h3 className="text-2xl font-semibold text-foreground mb-8 text-center">Backend Technologies</h3>
<h3 className="text-2xl font-semibold text-foreground mb-8 text-center">
Backend Technologies
</h3>
<div className="grid grid-cols-2 gap-4">
{backends.map((tech, index) => (
<motion.div
@@ -721,7 +922,9 @@ const AdminTechStack = () => {
className="w-8 h-8 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">{tech.name}</h4>
<h4 className="font-semibold text-foreground text-sm">
{tech.name}
</h4>
</Card>
</motion.div>
))}
@@ -730,7 +933,9 @@ const AdminTechStack = () => {
{/* Database */}
<div>
<h3 className="text-2xl font-semibold text-foreground mb-8 text-center">Database Technologies</h3>
<h3 className="text-2xl font-semibold text-foreground mb-8 text-center">
Database Technologies
</h3>
<div className="grid grid-cols-3 gap-4">
{databases.map((tech, index) => (
<motion.div
@@ -750,7 +955,9 @@ const AdminTechStack = () => {
className="w-8 h-8 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">{tech.name}</h4>
<h4 className="font-semibold text-foreground text-sm">
{tech.name}
</h4>
</Card>
</motion.div>
))}
@@ -766,7 +973,9 @@ const AdminTechStack = () => {
transition={{ duration: 0.8, delay: 0.4 }}
viewport={{ once: true }}
>
<h3 className="text-2xl font-semibold text-foreground mb-8 text-center">Data Visualization Tools</h3>
<h3 className="text-2xl font-semibold text-foreground mb-8 text-center">
Data Visualization Tools
</h3>
<div className="grid md:grid-cols-2 gap-6 max-w-4xl mx-auto">
{visualizationTools.map((tool, index) => {
const IconComponent = tool.icon;
@@ -784,8 +993,12 @@ const AdminTechStack = () => {
<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">{tool.name}</h4>
<p className="text-sm text-muted-foreground leading-relaxed">{tool.description}</p>
<h4 className="font-semibold text-foreground mb-2">
{tool.name}
</h4>
<p className="text-sm text-muted-foreground leading-relaxed">
{tool.description}
</p>
</Card>
</motion.div>
);
@@ -803,30 +1016,37 @@ const AdminCaseStudies = () => {
{
title: "Healthcare Practice Management Dashboard",
client: "MedCare Solutions",
description: "Comprehensive admin panel for managing patient records, appointments, billing, and compliance reporting with HIPAA-compliant security features",
description:
"Comprehensive admin panel for managing patient records, appointments, billing, and compliance reporting with HIPAA-compliant security features",
image: healthcareImage,
results: "75% reduction in admin time",
gradient: "from-blue-500/20 to-cyan-500/20",
features: "Patient Management, Appointment Scheduling, Billing Integration"
features:
"Patient Management, Appointment Scheduling, Billing Integration",
},
{
title: "E-learning Platform Admin Console",
client: "EduTech Pro",
description: "Advanced admin dashboard for course management, student analytics, instructor tools, and automated grading systems with real-time progress tracking",
image: "https://images.unsplash.com/photo-1522202176988-66273c2fd55f?w=400&h=300&fit=crop&auto=format",
description:
"Advanced admin dashboard for course management, student analytics, instructor tools, and automated grading systems with real-time progress tracking",
image:
"https://images.unsplash.com/photo-1522202176988-66273c2fd55f?w=400&h=300&fit=crop&auto=format",
results: "90% faster course deployment",
gradient: "from-green-500/20 to-emerald-500/20",
features: "Course Management, Student Analytics, Automated Grading"
features: "Course Management, Student Analytics, Automated Grading",
},
{
title: "Multi-Store Inventory Management System",
client: "RetailChain Inc",
description: "Centralized admin panel for managing inventory across 50+ retail locations with real-time stock monitoring, automated reordering, and sales analytics",
image: "https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?w=400&h=300&fit=crop&auto=format",
description:
"Centralized admin panel for managing inventory across 50+ retail locations with real-time stock monitoring, automated reordering, and sales analytics",
image:
"https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?w=400&h=300&fit=crop&auto=format",
results: "60% improvement in stock accuracy",
gradient: "from-purple-500/20 to-pink-500/20",
features: "Multi-location Inventory, Automated Reordering, Sales Analytics"
}
features:
"Multi-location Inventory, Automated Reordering, Sales Analytics",
},
];
return (
@@ -872,7 +1092,10 @@ const AdminCaseStudies = () => {
<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>
@@ -884,7 +1107,9 @@ const AdminCaseStudies = () => {
</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}
@@ -898,10 +1123,10 @@ const AdminCaseStudies = () => {
{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>
@@ -911,7 +1136,9 @@ const AdminCaseStudies = () => {
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>
@@ -947,7 +1174,9 @@ const AdminInlineCTA = () => {
<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">
<Workflow className="w-5 h-5 text-foreground" />
<span className="text-foreground text-base font-medium">Operational Excellence</span>
<span className="text-foreground text-base font-medium">
Operational Excellence
</span>
</div>
</div>
@@ -957,10 +1186,14 @@ const AdminInlineCTA = () => {
</h2>
<p className="text-xl text-muted-foreground leading-relaxed max-w-2xl mx-auto">
Let's design an admin panel that empowers your team and optimizes workflows.
Let's design an admin panel that empowers your team and optimizes
workflows.
</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>Request a Custom Dashboard Consultation</span>
@@ -980,26 +1213,46 @@ const HireDesigners = () => {
title: "UI/UX Designers",
description: "Specialists in intuitive admin interface design",
icon: Palette,
skills: ["User Experience Design", "Interface Design", "Wireframing", "Prototyping"]
skills: [
"User Experience Design",
"Interface Design",
"Wireframing",
"Prototyping",
],
},
{
title: "Dashboard Designers",
description: "Experts in data visualization and dashboard layouts",
icon: BarChart,
skills: ["Data Visualization", "Dashboard Design", "Information Architecture", "User Research"]
skills: [
"Data Visualization",
"Dashboard Design",
"Information Architecture",
"User Research",
],
},
{
title: "Interaction Designers",
description: "Focused on user interactions and workflow optimization",
icon: MousePointer,
skills: ["Interaction Design", "User Flow Design", "Usability Testing", "Accessibility Design"]
skills: [
"Interaction Design",
"User Flow Design",
"Usability Testing",
"Accessibility Design",
],
},
{
title: "Product Designers",
description: "End-to-end design for complex admin systems",
icon: Briefcase,
skills: ["Product Strategy", "Design Systems", "User Testing", "Cross-platform Design"]
}
skills: [
"Product Strategy",
"Design Systems",
"User Testing",
"Cross-platform Design",
],
},
];
return (
@@ -1016,7 +1269,8 @@ const HireDesigners = () => {
Need UI/UX Expertise for Your Admin Panel?
</h2>
<p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
Our designers specialize in creating intuitive and functional interfaces for complex dashboards and internal tools.
Our designers specialize in creating intuitive and functional
interfaces for complex dashboards and internal tools.
</p>
</motion.div>
@@ -1051,10 +1305,16 @@ const HireDesigners = () => {
{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>
))}
@@ -1103,20 +1363,25 @@ const AdminFAQs = () => {
const faqs = [
{
question: "Can you integrate our admin panel with existing systems?",
answer: "Absolutely! We specialize in creating admin panels that seamlessly integrate with your existing databases, APIs, CRM systems, and third-party tools. Our integration approach includes careful data mapping, secure API connections, and real-time synchronization to ensure your admin panel works harmoniously with your current technology stack while maintaining data integrity and security."
answer:
"Absolutely! We specialize in creating admin panels that seamlessly integrate with your existing databases, APIs, CRM systems, and third-party tools. Our integration approach includes careful data mapping, secure API connections, and real-time synchronization to ensure your admin panel works harmoniously with your current technology stack while maintaining data integrity and security.",
},
{
question: "How do you ensure data security for internal tools?",
answer: "Security is paramount in our admin panel development. We implement multi-layered security including role-based access controls, encrypted data transmission, secure authentication (including multi-factor authentication), regular security audits, and compliance with industry standards like GDPR, HIPAA, or SOC 2. All sensitive data is encrypted both in transit and at rest, with comprehensive audit trails for all user actions."
answer:
"Security is paramount in our admin panel development. We implement multi-layered security including role-based access controls, encrypted data transmission, secure authentication (including multi-factor authentication), regular security audits, and compliance with industry standards like GDPR, HIPAA, or SOC 2. All sensitive data is encrypted both in transit and at rest, with comprehensive audit trails for all user actions.",
},
{
question: "What is the importance of UX in admin panel design?",
answer: "Great UX in admin panels is crucial for productivity and user adoption. Poor UX leads to errors, inefficiency, and user frustration. We focus on intuitive navigation, clear information hierarchy, efficient workflows, and user-friendly interfaces that reduce training time and increase accuracy. Good admin panel UX can improve operational efficiency by 40-70% and significantly reduce user errors and support requests."
answer:
"Great UX in admin panels is crucial for productivity and user adoption. Poor UX leads to errors, inefficiency, and user frustration. We focus on intuitive navigation, clear information hierarchy, efficient workflows, and user-friendly interfaces that reduce training time and increase accuracy. Good admin panel UX can improve operational efficiency by 40-70% and significantly reduce user errors and support requests.",
},
{
question: "Do you provide training for our staff on using the new dashboard?",
answer: "Yes, we provide comprehensive training and support packages. This includes hands-on training sessions for different user roles, detailed documentation, video tutorials, and ongoing support during the initial rollout period. We also offer train-the-trainer programs so your internal team can support new users, and we're available for additional training as your team grows or when new features are added."
}
question:
"Do you provide training for our staff on using the new dashboard?",
answer:
"Yes, we provide comprehensive training and support packages. This includes hands-on training sessions for different user roles, detailed documentation, video tutorials, and ongoing support during the initial rollout period. We also offer train-the-trainer programs so your internal team can support new users, and we're available for additional training as your team grows or when new features are added.",
},
];
return (
@@ -1149,7 +1414,9 @@ const AdminFAQs = () => {
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}
@@ -1185,7 +1452,9 @@ const AdminFinalCTA = () => {
<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">
<Monitor className="w-5 h-5 text-foreground" />
<span className="text-foreground text-base font-medium">Operational Excellence</span>
<span className="text-foreground text-base font-medium">
Operational Excellence
</span>
</div>
</div>
</motion.div>
@@ -1202,7 +1471,8 @@ const AdminFinalCTA = () => {
viewport={{ once: true }}
className="text-xl text-muted-foreground mb-12 max-w-2xl mx-auto leading-relaxed"
>
Transform your internal operations with efficient, data-driven dashboards and management systems.
Transform your internal operations with efficient, data-driven
dashboards and management systems.
</motion.p>
<motion.div
@@ -1212,7 +1482,10 @@ const AdminFinalCTA = () => {
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">
<TrendingUp className="w-6 h-6 flex-shrink-0" />
<span>Optimize Your Business Today</span>

23
pages/AndroidAppDevelopment.tsx
View File

@@ -39,6 +39,7 @@ import { Button } from "../components/ui/button";
import { Card, CardContent } from "../components/ui/card";
import { ShimmerButton } from "../components/ui/shimmer-button";
import androidVectorImage from "../src/images/android-vector.png";
import { navigateTo } from "@/App";
// Android Hero Section with Android device mockups and Android vector
const AndroidHeroWithCTA = () => {
@@ -113,7 +114,10 @@ const AndroidHeroWithCTA = () => {
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">
<svg
className="w-6 h-4 flex-shrink-0"
@@ -911,7 +915,10 @@ const AndroidInlineCTA = () => {
and create apps that stand out.
</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">
<svg
className="w-6 h-6 flex-shrink-0"
@@ -1054,7 +1061,10 @@ const HireAndroidDevelopers = () => {
viewport={{ once: true }}
className="flex flex-col sm:flex-row gap-4 justify-center"
>
<ShimmerButton className="px-8 py-4">
<ShimmerButton
className="px-8 py-4"
onClick={() => navigateTo("/start-a-project")}
>
<div className="inline-flex items-center gap-2">
<UserPlus className="w-5 h-5 flex-shrink-0" />
<span>Hire Android Developers</span>
@@ -1062,7 +1072,7 @@ const HireAndroidDevelopers = () => {
</ShimmerButton>
<Button
variant="outline"
className="border-white/20 text-foreground hover:bg-white/10 px-8 py-4 rounded-lg transition-all duration-300"
className="border-white/20 text-foreground hover:bg-white/10 px-8 py-4 h-[56px] rounded-lg transition-all duration-300"
>
<span>Request Profiles</span>
<ArrowRight className="ml-2 w-4 h-4" />
@@ -1213,7 +1223,10 @@ const AndroidFinalCTA = () => {
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">
<svg
className="w-6 h-6 flex-shrink-0"

102
pages/Careers.tsx
View File

@@ -17,75 +17,77 @@ import {
TrendingUp,
Briefcase,
Building,
Database
Database,
Bug,
LineChart
} from "lucide-react";
export const Careers = () => {
// Job positions data
const openPositions = [
{
title: "Frontend Developer",
department: "Engineering",
location: "Remote",
title: "Jr. Flutter Developer",
department: "Mobile Development",
location: "In-office",
type: "Full-time",
description: "Build responsive web applications using React, TypeScript, and modern CSS frameworks.",
description: "Build cross-platform mobile applications using Flutter and Dart for seamless performance across Android and iOS.",
icon: Code
},
{
title: "Backend Developer",
department: "Engineering",
location: "Mumbai",
title: "Jr. React.js Developer",
department: "Frontend Development",
location: "In-office",
type: "Full-time",
description: "Develop scalable APIs and server-side applications using Node.js, Python, or Java.",
description: "Develop responsive and interactive web user interfaces using React.js, TypeScript, and modern JavaScript tools.",
icon: Code
},
{
title: "Jr. Laravel Developer",
department: "Backend Development",
location: "In-office",
type: "Full-time",
description: "Build and maintain scalable web applications using Laravel, PHP, and MySQL, with a focus on clean architecture and APIs.",
icon: Database
},
{
title: "Mobile App Developer",
department: "Engineering",
location: "Remote",
title: "Jr. Node.js Developer",
department: "Backend Development",
location: "In-office",
type: "Full-time",
description: "Create native iOS and Android apps or cross-platform solutions using React Native.",
icon: Code
description: "Design and implement backend services and RESTful APIs using Node.js, Express, and modern JavaScript/TypeScript.",
icon: Database
},
{
title: "UI/UX Designer",
department: "Design",
location: "Remote",
title: "Jr. Python Developer",
department: "Backend Development",
location: "In-office",
type: "Full-time",
description: "Design intuitive user interfaces and create engaging user experiences for digital products.",
icon: Palette
description: "Develop server-side applications, automation scripts, and data-driven systems using Python and relevant frameworks like Django or Flask.",
icon: Database
},
// {
// title: "UI/UX Designer",
// department: "Design & User Experience",
// location: "In-office",
// type: "Full-time",
// description: "Design intuitive user interfaces and create engaging user experiences for digital products.",
// icon: Palette
// },
{
title: "Jr. Software Tester / QA Engineer",
department: "Quality Assurance",
location: "In-office",
type: "Full-time",
description: "Create and execute manual and automated test plans to ensure quality, performance, and reliability of software applications.",
icon: Bug
},
{
title: "Product Manager",
department: "Product",
location: "Mumbai",
title: "Business Development Executive (IT)",
department: "Sales & Business Development",
location: "In-office",
type: "Full-time",
description: "Drive product strategy, roadmap planning, and cross-functional team collaboration.",
icon: Settings
},
{
title: "DevOps Engineer",
department: "Engineering",
location: "Remote",
type: "Full-time",
description: "Build and maintain CI/CD pipelines, cloud infrastructure, and deployment automation.",
icon: Building
},
{
title: "Sales Executive",
department: "Sales",
location: "Mumbai",
type: "Full-time",
description: "Generate leads, build client relationships, and drive revenue growth for our services.",
icon: TrendingUp
},
{
title: "QA Engineer",
department: "Engineering",
location: "Remote",
type: "Full-time",
description: "Ensure software quality through manual and automated testing across web and mobile platforms.",
icon: Briefcase
description: "Generate leads, build client relationships, and drive sales growth for IT products and software services.",
icon: LineChart
}
];
@@ -269,7 +271,7 @@ Best regards,
</motion.div>
{/* Send CV Button */}
<motion.div
{/* <motion.div
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6, delay: 0.3 }}
@@ -284,7 +286,7 @@ Best regards,
Send Your CV
<ArrowRight className="ml-3 w-5 h-5" />
</Button>
</motion.div>
</motion.div> */}
</motion.div>
</div>
</section>

343
pages/CrossPlatformAppDevelopment.tsx
View File

@@ -20,17 +20,28 @@ import {
UserPlus,
Users2,
Wrench,
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 { Tabs, TabsContent, TabsList, TabsTrigger } from "../components/ui/tabs";
import {
Tabs,
TabsContent,
TabsList,
TabsTrigger,
} from "../components/ui/tabs";
import { navigateTo } from "@/App";
// Cross-Platform Hero Section
const CrossPlatformHeroWithCTA = () => {
@@ -50,7 +61,9 @@ const CrossPlatformHeroWithCTA = () => {
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6 }}
>
<span className="text-white/70 text-sm font-medium">Cross-Platform App Development</span>
<span className="text-white/70 text-sm font-medium">
Cross-Platform App Development
</span>
</motion.div>
{/* Main Heading */}
@@ -60,7 +73,8 @@ const CrossPlatformHeroWithCTA = () => {
</h1>
<p className="text-lg text-gray-300 leading-relaxed max-w-lg">
Develop high-quality mobile apps that run seamlessly on iOS and Android from a single codebase, saving time and resources.
Develop high-quality mobile apps that run seamlessly on iOS and
Android from a single codebase, saving time and resources.
</p>
</div>
@@ -71,7 +85,10 @@ const CrossPlatformHeroWithCTA = () => {
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">
<Share2 className="w-5 h-5 flex-shrink-0" />
<span>Discover Cross-Platform Benefits</span>
@@ -118,7 +135,9 @@ const CrossPlatformHeroWithCTA = () => {
<div className="h-8 bg-gray-700 rounded-lg"></div>
</div>
<div className="h-12 bg-blue-500/20 rounded-lg mt-4 flex items-center justify-center">
<span className="text-xs text-blue-400 font-medium">iOS</span>
<span className="text-xs text-blue-400 font-medium">
iOS
</span>
</div>
</div>
</div>
@@ -137,7 +156,9 @@ const CrossPlatformHeroWithCTA = () => {
<div className="h-8 bg-gray-700 rounded-lg"></div>
</div>
<div className="h-12 bg-green-500/20 rounded-lg mt-4 flex items-center justify-center">
<span className="text-xs text-green-400 font-medium">Android</span>
<span className="text-xs text-green-400 font-medium">
Android
</span>
</div>
</div>
</div>
@@ -156,13 +177,22 @@ const CrossPlatformHeroWithCTA = () => {
transition={{ duration: 0.8, delay: 0.6 }}
className="flex justify-center gap-4 flex-wrap"
>
<Badge variant="secondary" className="bg-blue-500/20 text-blue-300 border-blue-500/30">
<Badge
variant="secondary"
className="bg-blue-500/20 text-blue-300 border-blue-500/30"
>
Flutter
</Badge>
<Badge variant="secondary" className="bg-cyan-500/20 text-cyan-300 border-cyan-500/30">
<Badge
variant="secondary"
className="bg-cyan-500/20 text-cyan-300 border-cyan-500/30"
>
React Native
</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"
>
Single Codebase
</Badge>
</motion.div>
@@ -180,28 +210,33 @@ const CrossPlatformBenefits = () => {
{
icon: Clock,
title: "Faster Time-to-Market",
description: "Simultaneous launch on multiple platforms with a single development cycle, significantly reducing time from concept to deployment."
description:
"Simultaneous launch on multiple platforms with a single development cycle, significantly reducing time from concept to deployment.",
},
{
icon: DollarSign,
title: "Cost-Effective",
description: "Single codebase reduces development and maintenance costs by up to 50% compared to separate native applications."
description:
"Single codebase reduces development and maintenance costs by up to 50% compared to separate native applications.",
},
{
icon: Users2,
title: "Wider Audience Reach",
description: "Instantly accessible to both iOS and Android users, maximizing your market penetration and user acquisition potential."
description:
"Instantly accessible to both iOS and Android users, maximizing your market penetration and user acquisition potential.",
},
{
icon: Layout,
title: "Unified User Experience",
description: "Consistent look and feel across platforms while maintaining platform-specific design guidelines and user expectations."
description:
"Consistent look and feel across platforms while maintaining platform-specific design guidelines and user expectations.",
},
{
icon: Wrench,
title: "Simplified Maintenance",
description: "Updates applied to one codebase reflect everywhere, streamlining bug fixes, feature additions, and ongoing support."
}
description:
"Updates applied to one codebase reflect everywhere, streamlining bug fixes, feature additions, and ongoing support.",
},
];
return (
@@ -218,7 +253,8 @@ const CrossPlatformBenefits = () => {
Advantages of Choosing Cross-Platform
</h2>
<p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
Cross-platform development offers unparalleled efficiency and reach for businesses looking to maximize their mobile app impact.
Cross-platform development offers unparalleled efficiency and reach
for businesses looking to maximize their mobile app impact.
</p>
</motion.div>
@@ -317,7 +353,8 @@ const CrossPlatformTechnologies = () => {
Leading Cross-Platform Frameworks We Utilize
</h2>
<p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
We leverage the most powerful and mature cross-platform frameworks to deliver exceptional mobile experiences.
We leverage the most powerful and mature cross-platform frameworks
to deliver exceptional mobile experiences.
</p>
</motion.div>
@@ -337,7 +374,10 @@ const CrossPlatformTechnologies = () => {
Flutter Development
</div>
</TabsTrigger>
<TabsTrigger value="react-native" className="text-base py-4 h-full">
<TabsTrigger
value="react-native"
className="text-base py-4 h-full"
>
<div className="flex items-center gap-2">
<div className="w-6 h-6 bg-cyan-500 rounded flex items-center justify-center">
<span className="text-white text-xs font-bold">RN</span>
@@ -358,28 +398,39 @@ const CrossPlatformTechnologies = () => {
</div>
</div>
<div>
<h3 className="text-2xl font-semibold text-white">Flutter Development</h3>
<p className="text-gray-400">Google's UI toolkit for natively compiled applications</p>
<h3 className="text-2xl font-semibold text-white">
Flutter Development
</h3>
<p className="text-gray-400">
Google's UI toolkit for natively compiled applications
</p>
</div>
</div>
<p className="text-gray-300 leading-relaxed">
Known for expressive UIs and hot-reload functionality that accelerates development cycles.
Flutter allows for pixel-perfect designs and smooth animations across platforms.
Known for expressive UIs and hot-reload functionality that
accelerates development cycles. Flutter allows for
pixel-perfect designs and smooth animations across
platforms.
</p>
</div>
<div className="space-y-4">
<h4 className="text-lg font-semibold text-white">Key Benefits:</h4>
<h4 className="text-lg font-semibold text-white">
Key Benefits:
</h4>
<ul className="space-y-3">
{[
"Excellent performance with native compilation",
"Beautiful UIs with customizable widgets",
"Single codebase for mobile, web, and desktop",
"Fast development with hot-reload",
"Growing ecosystem and strong Google backing"
"Growing ecosystem and strong Google backing",
].map((benefit, index) => (
<li key={index} className="flex items-center gap-3 text-gray-300">
<li
key={index}
className="flex items-center gap-3 text-gray-300"
>
<CheckCircle className="w-5 h-5 text-blue-500 flex-shrink-0" />
{benefit}
</li>
@@ -394,7 +445,9 @@ const CrossPlatformTechnologies = () => {
<div className="w-12 h-12 bg-blue-500/20 rounded-xl flex items-center justify-center">
<Code className="w-6 h-6 text-blue-500" />
</div>
<h4 className="text-lg font-semibold text-white">Flutter Tech Stack</h4>
<h4 className="text-lg font-semibold text-white">
Flutter Tech Stack
</h4>
</div>
<div className="grid grid-cols-2 gap-4">
@@ -404,9 +457,12 @@ const CrossPlatformTechnologies = () => {
"Cupertino Widgets",
"Firebase Integration",
"Native Plugins",
"State Management"
"State Management",
].map((tech, index) => (
<div key={index} className="bg-gray-800/50 rounded-lg p-3 text-center">
<div
key={index}
className="bg-gray-800/50 rounded-lg p-3 text-center"
>
<span className="text-gray-300 text-sm">{tech}</span>
</div>
))}
@@ -427,28 +483,38 @@ const CrossPlatformTechnologies = () => {
</div>
</div>
<div>
<h3 className="text-2xl font-semibold text-white">React Native Development</h3>
<p className="text-gray-400">Facebook's framework for building native mobile apps</p>
<h3 className="text-2xl font-semibold text-white">
React Native Development
</h3>
<p className="text-gray-400">
Facebook's framework for building native mobile apps
</p>
</div>
</div>
<p className="text-gray-300 leading-relaxed">
Uses JavaScript and React paradigms to create truly native mobile applications.
Leverages existing web development skills for mobile app creation.
Uses JavaScript and React paradigms to create truly native
mobile applications. Leverages existing web development
skills for mobile app creation.
</p>
</div>
<div className="space-y-4">
<h4 className="text-lg font-semibold text-white">Key Benefits:</h4>
<h4 className="text-lg font-semibold text-white">
Key Benefits:
</h4>
<ul className="space-y-3">
{[
"Large community and extensive libraries",
"Reusable components across platforms",
"Efficient development cycles",
"Native performance and feel",
"Easy integration with existing React web apps"
"Easy integration with existing React web apps",
].map((benefit, index) => (
<li key={index} className="flex items-center gap-3 text-gray-300">
<li
key={index}
className="flex items-center gap-3 text-gray-300"
>
<CheckCircle className="w-5 h-5 text-cyan-500 flex-shrink-0" />
{benefit}
</li>
@@ -463,7 +529,9 @@ const CrossPlatformTechnologies = () => {
<div className="w-12 h-12 bg-cyan-500/20 rounded-xl flex items-center justify-center">
<Code className="w-6 h-6 text-cyan-500" />
</div>
<h4 className="text-lg font-semibold text-white">React Native Tech Stack</h4>
<h4 className="text-lg font-semibold text-white">
React Native Tech Stack
</h4>
</div>
<div className="grid grid-cols-2 gap-4">
@@ -473,9 +541,12 @@ const CrossPlatformTechnologies = () => {
"Native Modules",
"Redux/Context API",
"Expo Framework",
"Native Navigation"
"Native Navigation",
].map((tech, index) => (
<div key={index} className="bg-gray-800/50 rounded-lg p-3 text-center">
<div
key={index}
className="bg-gray-800/50 rounded-lg p-3 text-center"
>
<span className="text-gray-300 text-sm">{tech}</span>
</div>
))}
@@ -496,29 +567,34 @@ const CrossPlatformProcess = () => {
const steps = [
{
title: "Feasibility & Strategy",
description: "Analyze your project requirements and determine the optimal cross-platform approach for maximum efficiency and performance.",
icon: Target
description:
"Analyze your project requirements and determine the optimal cross-platform approach for maximum efficiency and performance.",
icon: Target,
},
{
title: "UI/UX Design",
description: "Create adaptable designs that maintain platform consistency while leveraging cross-platform capabilities for unified experiences.",
icon: Palette
description:
"Create adaptable designs that maintain platform consistency while leveraging cross-platform capabilities for unified experiences.",
icon: Palette,
},
{
title: "Development",
description: "Build your application using Flutter or React Native, ensuring optimal performance and native-like user experience.",
icon: Code
description:
"Build your application using Flutter or React Native, ensuring optimal performance and native-like user experience.",
icon: Code,
},
{
title: "Multi-Platform QA",
description: "Comprehensive testing across all target platforms and devices to ensure consistent functionality and performance.",
icon: Bug
description:
"Comprehensive testing across all target platforms and devices to ensure consistent functionality and performance.",
icon: Bug,
},
{
title: "Launch & Optimization",
description: "Deploy to app stores and continuously optimize performance across platforms based on user feedback and analytics.",
icon: Rocket
}
description:
"Deploy to app stores and continuously optimize performance across platforms based on user feedback and analytics.",
icon: Rocket,
},
];
return (
@@ -535,7 +611,8 @@ const CrossPlatformProcess = () => {
Streamlined Process for Cross-Platform Success
</h2>
<p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
Our proven methodology ensures efficient development and deployment across multiple platforms.
Our proven methodology ensures efficient development and deployment
across multiple platforms.
</p>
</motion.div>
@@ -555,15 +632,23 @@ const CrossPlatformProcess = () => {
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}
@@ -593,34 +678,40 @@ const CrossPlatformServices = () => {
const services = [
{
title: "New Cross-Platform App Development",
description: "Building custom applications from scratch using modern cross-platform frameworks for maximum efficiency.",
icon: Smartphone
description:
"Building custom applications from scratch using modern cross-platform frameworks for maximum efficiency.",
icon: Smartphone,
},
{
title: "Existing App Migration",
description: "Migrating native apps to cross-platform solutions for improved maintenance and cost efficiency.",
icon: RefreshCcw
description:
"Migrating native apps to cross-platform solutions for improved maintenance and cost efficiency.",
icon: RefreshCcw,
},
{
title: "Cross-Platform UI/UX Design",
description: "Designing consistent, adaptable interfaces that work seamlessly across all target platforms.",
icon: Brush
description:
"Designing consistent, adaptable interfaces that work seamlessly across all target platforms.",
icon: Brush,
},
{
title: "Performance Optimization",
description: "Ensuring smooth performance on all devices through platform-specific optimizations and best practices.",
icon: Zap
description:
"Ensuring smooth performance on all devices through platform-specific optimizations and best practices.",
icon: Zap,
},
{
title: "Integration with Third-Party APIs",
description: "Seamless connectivity for expanded functionality including payments, analytics, and cloud services.",
icon: Network
description:
"Seamless connectivity for expanded functionality including payments, analytics, and cloud services.",
icon: Network,
},
{
title: "Cross-Platform Maintenance",
description: "Ongoing support and updates for cross-platform applications with unified deployment strategies.",
icon: Wrench
}
description:
"Ongoing support and updates for cross-platform applications with unified deployment strategies.",
icon: Wrench,
},
];
return (
@@ -637,7 +728,8 @@ const CrossPlatformServices = () => {
Our Comprehensive Cross-Platform Solutions
</h2>
<p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
From new development to migration and ongoing support, we provide end-to-end cross-platform services.
From new development to migration and ongoing support, we provide
end-to-end cross-platform services.
</p>
</motion.div>
@@ -688,30 +780,36 @@ const CrossPlatformCaseStudies = () => {
{
title: "FinTech Cross-Platform App with Flutter",
client: "PayUnify",
description: "Unified payment solution deployed simultaneously on iOS and Android with 40% faster development",
image: "https://images.unsplash.com/photo-1563013544-824ae1b704d3?w=400&h=300&fit=crop&auto=format",
description:
"Unified payment solution deployed simultaneously on iOS and Android with 40% faster development",
image:
"https://images.unsplash.com/photo-1563013544-824ae1b704d3?w=400&h=300&fit=crop&auto=format",
results: "40% faster delivery",
gradient: "from-accent/20 to-accent/10",
framework: "Flutter"
framework: "Flutter",
},
{
title: "E-Learning Platform with React Native",
client: "EduCross",
description: "Educational platform serving millions of students across platforms with consistent UX",
image: "https://images.unsplash.com/photo-1522202176988-66273c2fd55f?w=400&h=300&fit=crop&auto=format",
description:
"Educational platform serving millions of students across platforms with consistent UX",
image:
"https://images.unsplash.com/photo-1522202176988-66273c2fd55f?w=400&h=300&fit=crop&auto=format",
results: "2M+ students",
gradient: "from-blue-500/20 to-cyan-500/20",
framework: "React Native"
framework: "React Native",
},
{
title: "Healthcare Management with Flutter",
client: "MediSync",
description: "Cross-platform healthcare app connecting patients and providers with real-time sync",
image: "https://images.unsplash.com/photo-1576091160399-112ba8d25d1f?w=400&h=300&fit=crop&auto=format",
description:
"Cross-platform healthcare app connecting patients and providers with real-time sync",
image:
"https://images.unsplash.com/photo-1576091160399-112ba8d25d1f?w=400&h=300&fit=crop&auto=format",
results: "60% cost savings",
gradient: "from-purple-500/20 to-pink-500/20",
framework: "Flutter"
}
framework: "Flutter",
},
];
return (
@@ -728,7 +826,8 @@ const CrossPlatformCaseStudies = () => {
Cross-Platform Apps That Deliver Unified Experiences
</h2>
<p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
Discover how businesses achieve greater reach and efficiency with our cross-platform solutions.
Discover how businesses achieve greater reach and efficiency with
our cross-platform solutions.
</p>
</motion.div>
@@ -761,10 +860,16 @@ const CrossPlatformCaseStudies = () => {
{study.client}
</div>
<div className="flex gap-2">
<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>
<Badge variant="secondary" className="text-xs bg-blue-500/20 text-blue-300 border-blue-500/30">
<Badge
variant="secondary"
className="text-xs bg-blue-500/20 text-blue-300 border-blue-500/30"
>
{study.framework}
</Badge>
</div>
@@ -777,7 +882,9 @@ const CrossPlatformCaseStudies = () => {
</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-white/10`}>
<div
className={`relative rounded-xl overflow-hidden bg-gradient-to-br ${study.gradient} p-4 border border-white/10`}
>
<ImageWithFallback
src={study.image}
alt={study.title}
@@ -798,7 +905,9 @@ const CrossPlatformCaseStudies = () => {
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>
@@ -834,7 +943,9 @@ const CrossPlatformInlineCTA = () => {
<div className="inline-block p-[2px] rounded-full bg-gradient-to-r from-accent via-blue-500 to-purple-500">
<div className="bg-black rounded-full px-6 py-3 flex items-center gap-2">
<GitMerge className="w-5 h-5 text-white" />
<span className="text-white text-base font-medium">Cross-Platform Innovation</span>
<span className="text-white text-base font-medium">
Cross-Platform Innovation
</span>
</div>
</div>
@@ -844,10 +955,14 @@ const CrossPlatformInlineCTA = () => {
</h2>
<p className="text-xl text-gray-300 leading-relaxed max-w-2xl mx-auto">
Let's analyze if cross-platform is the right fit for your project goals and maximize your development efficiency.
Let's analyze if cross-platform is the right fit for your project
goals and maximize your development efficiency.
</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">
<Target className="w-6 h-6 flex-shrink-0" />
<span>Get a Free Strategy Session</span>
@@ -867,20 +982,20 @@ const HireCrossPlatformDevelopers = () => {
title: "Senior Flutter Developer",
experience: "5+ Years",
skills: ["Flutter", "Dart", "Firebase", "State Management"],
specialties: "Cross-Platform UI, Performance Optimization"
specialties: "Cross-Platform UI, Performance Optimization",
},
{
title: "React Native Expert",
experience: "4+ Years",
skills: ["React Native", "JavaScript", "TypeScript", "Redux"],
specialties: "Native Bridges, Component Architecture"
specialties: "Native Bridges, Component Architecture",
},
{
title: "Cross-Platform Architect",
experience: "6+ Years",
skills: ["System Design", "Both Frameworks", "DevOps", "Testing"],
specialties: "Platform Strategy, Technical Leadership"
}
specialties: "Platform Strategy, Technical Leadership",
},
];
return (
@@ -897,7 +1012,8 @@ const HireCrossPlatformDevelopers = () => {
Hire Expert Flutter & React Native Developers
</h2>
<p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
Find seasoned professionals skilled in both Flutter and React Native to accelerate your cross-platform development.
Find seasoned professionals skilled in both Flutter and React Native
to accelerate your cross-platform development.
</p>
</motion.div>
@@ -925,7 +1041,10 @@ const HireCrossPlatformDevelopers = () => {
<GitMerge className="w-6 h-6 text-accent" />
</div>
<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"
>
{dev.experience}
</Badge>
</div>
@@ -941,7 +1060,11 @@ const HireCrossPlatformDevelopers = () => {
<div className="flex flex-wrap gap-2">
{dev.skills.map((skill) => (
<Badge key={skill} variant="secondary" className="text-xs bg-white/10 text-foreground">
<Badge
key={skill}
variant="secondary"
className="text-xs bg-white/10 text-foreground"
>
{skill}
</Badge>
))}
@@ -967,7 +1090,7 @@ const HireCrossPlatformDevelopers = () => {
</ShimmerButton>
<Button
variant="outline"
className="border-white/20 text-foreground hover:bg-white/10 px-8 py-4 rounded-lg transition-all duration-300"
className="border-white/20 text-foreground hover:bg-white/10 px-8 py-4 h-[56px] rounded-lg transition-all duration-300"
>
<span>View Talent Profiles</span>
<ArrowRight className="ml-2 w-4 h-4" />
@@ -983,20 +1106,24 @@ const CrossPlatformFAQs = () => {
const faqs = [
{
question: "When is cross-platform development the best choice?",
answer: "Cross-platform development is ideal when you need to reach both iOS and Android users quickly and cost-effectively, have limited resources, require consistent UI/UX across platforms, or want simplified maintenance. It's particularly beneficial for MVPs, content-driven apps, and business applications where time-to-market is crucial."
answer:
"Cross-platform development is ideal when you need to reach both iOS and Android users quickly and cost-effectively, have limited resources, require consistent UI/UX across platforms, or want simplified maintenance. It's particularly beneficial for MVPs, content-driven apps, and business applications where time-to-market is crucial.",
},
{
question: "What are the limitations of cross-platform apps?",
answer: "While cross-platform apps are highly capable, they may have slightly lower performance for graphics-intensive applications, limited access to some platform-specific features, and larger app sizes compared to native apps. However, modern frameworks like Flutter and React Native have significantly minimized these limitations."
answer:
"While cross-platform apps are highly capable, they may have slightly lower performance for graphics-intensive applications, limited access to some platform-specific features, and larger app sizes compared to native apps. However, modern frameworks like Flutter and React Native have significantly minimized these limitations.",
},
{
question: "Do cross-platform apps feel 'native'?",
answer: "Yes, modern cross-platform frameworks produce apps that feel and perform like native applications. Flutter compiles to native code, while React Native uses native components. Our development approach ensures platform-specific design guidelines are followed for authentic user experiences."
answer:
"Yes, modern cross-platform frameworks produce apps that feel and perform like native applications. Flutter compiles to native code, while React Native uses native components. Our development approach ensures platform-specific design guidelines are followed for authentic user experiences.",
},
{
question: "How do you handle platform-specific features?",
answer: "We leverage platform-specific code when needed through native modules, plugins, and bridge implementations. Both Flutter and React Native provide robust mechanisms for accessing platform-specific APIs, camera functions, sensors, and OS-level features while maintaining code sharing for common functionality."
}
answer:
"We leverage platform-specific code when needed through native modules, plugins, and bridge implementations. Both Flutter and React Native provide robust mechanisms for accessing platform-specific APIs, camera functions, sensors, and OS-level features while maintaining code sharing for common functionality.",
},
];
return (
@@ -1032,7 +1159,9 @@ const CrossPlatformFAQs = () => {
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}
@@ -1068,7 +1197,9 @@ const CrossPlatformFinalCTA = () => {
<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">
<GitMerge className="w-5 h-5 text-foreground" />
<span className="text-foreground text-base font-medium">Ready to Launch?</span>
<span className="text-foreground text-base font-medium">
Ready to Launch?
</span>
</div>
</div>
</motion.div>
@@ -1091,7 +1222,8 @@ const CrossPlatformFinalCTA = () => {
viewport={{ once: true }}
className="text-xl text-muted-foreground mb-12 max-w-2xl mx-auto leading-relaxed"
>
Leverage our experience to build robust, beautiful apps for both iOS and Android efficiently.
Leverage our experience to build robust, beautiful apps for both iOS
and Android efficiently.
</motion.p>
<motion.div
@@ -1101,7 +1233,10 @@ const CrossPlatformFinalCTA = () => {
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 Cross-Platform Project</span>

410
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 */}
@@ -69,7 +78,8 @@ const CustomWebAppHeroWithCTA = () => {
</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>
@@ -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,7 +104,7 @@ 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>
@@ -127,7 +140,9 @@ const CustomWebAppHeroWithCTA = () => {
<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>
@@ -157,7 +172,10 @@ const CustomWebAppHeroWithCTA = () => {
<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>
@@ -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 (
@@ -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 (
@@ -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}
@@ -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 (
@@ -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 (
@@ -736,7 +887,10 @@ 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>
@@ -748,7 +902,9 @@ const WebAppCaseStudies = () => {
</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}
@@ -762,10 +918,10 @@ const WebAppCaseStudies = () => {
{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>
@@ -775,7 +931,9 @@ const WebAppCaseStudies = () => {
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,7 +969,9 @@ 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>
@@ -821,10 +981,14 @@ const WebAppInlineCTA = () => {
</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,7 +1067,8 @@ 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>
@@ -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 (
@@ -1013,7 +1211,9 @@ const CustomWebAppFAQs = () => {
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>
@@ -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>

480
pages/EcommercePlatforms.tsx
View File

@@ -31,17 +31,23 @@ import {
Truck,
Users,
Wrench,
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 multiVendorImage from "../src/images/multifood.webp";
import { navigateTo } from "@/App";
// eCommerce Platforms Hero Section
const EcommerceHeroWithCTA = () => {
@@ -61,7 +67,9 @@ const EcommerceHeroWithCTA = () => {
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 */}
@@ -71,7 +79,8 @@ const EcommerceHeroWithCTA = () => {
</h1>
<p className="text-lg text-gray-300 leading-relaxed max-w-lg">
Building high-converting, scalable, and secure online stores and marketplaces that drive sales and enhance customer experiences.
Building high-converting, scalable, and secure online stores and
marketplaces that drive sales and enhance customer experiences.
</p>
</div>
@@ -82,7 +91,10 @@ const EcommerceHeroWithCTA = () => {
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">
<Store className="w-5 h-5 flex-shrink-0" />
<span>Launch Your Online Store</span>
@@ -93,7 +105,7 @@ const EcommerceHeroWithCTA = () => {
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>View Our eCommerce Portfolio</span>
<span>View Our Portfolio</span>
</a>
</motion.div>
</motion.div>
@@ -117,14 +129,19 @@ const EcommerceHeroWithCTA = () => {
<div className="relative mx-auto w-64 h-40 bg-gradient-to-br from-accent to-purple-600 rounded-2xl border border-accent/30 shadow-2xl flex flex-col p-4 mb-8">
<div className="flex items-center justify-between mb-4">
<Store className="w-6 h-6 text-white" />
<div className="text-white text-xs font-medium">Online Store</div>
<div className="text-white text-xs font-medium">
Online Store
</div>
<CartIcon className="w-6 h-6 text-white" />
</div>
{/* Product Grid */}
<div className="grid grid-cols-3 gap-2 flex-1">
{[1, 2, 3, 4, 5, 6].map((item) => (
<div key={item} className="bg-white/20 rounded-lg flex items-center justify-center">
<div
key={item}
className="bg-white/20 rounded-lg flex items-center justify-center"
>
<ShoppingBag className="w-4 h-4 text-white/80" />
</div>
))}
@@ -194,17 +211,59 @@ const EcommerceHeroWithCTA = () => {
</div>
{/* Connection Lines */}
<svg className="absolute inset-0 w-full h-full pointer-events-none" style={{top: '-20px', width: '100%', height: '320px'}}>
<svg
className="absolute inset-0 w-full h-full pointer-events-none"
style={{ top: "-20px", width: "100%", height: "320px" }}
>
<g className="opacity-30">
{/* Lines from Store to integrations */}
<line x1="160" y1="80" x2="80" y2="140" stroke="#E5195E" strokeWidth="2" strokeDasharray="4,4">
<animate attributeName="stroke-dashoffset" values="0;-8" dur="2s" repeatCount="indefinite" />
<line
x1="160"
y1="80"
x2="80"
y2="140"
stroke="#E5195E"
strokeWidth="2"
strokeDasharray="4,4"
>
<animate
attributeName="stroke-dashoffset"
values="0;-8"
dur="2s"
repeatCount="indefinite"
/>
</line>
<line x1="160" y1="80" x2="160" y2="140" stroke="#E5195E" strokeWidth="2" strokeDasharray="4,4">
<animate attributeName="stroke-dashoffset" values="0;-8" dur="2.5s" repeatCount="indefinite" />
<line
x1="160"
y1="80"
x2="160"
y2="140"
stroke="#E5195E"
strokeWidth="2"
strokeDasharray="4,4"
>
<animate
attributeName="stroke-dashoffset"
values="0;-8"
dur="2.5s"
repeatCount="indefinite"
/>
</line>
<line x1="160" y1="80" x2="240" y2="140" stroke="#E5195E" strokeWidth="2" strokeDasharray="4,4">
<animate attributeName="stroke-dashoffset" values="0;-8" dur="3s" repeatCount="indefinite" />
<line
x1="160"
y1="80"
x2="240"
y2="140"
stroke="#E5195E"
strokeWidth="2"
strokeDasharray="4,4"
>
<animate
attributeName="stroke-dashoffset"
values="0;-8"
dur="3s"
repeatCount="indefinite"
/>
</line>
</g>
</svg>
@@ -217,15 +276,24 @@ const EcommerceHeroWithCTA = () => {
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"
>
<TrendingUp className="w-3 h-3 mr-1" />
High-Converting
</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"
>
<Zap className="w-3 h-3 mr-1" />
Scalable
</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"
>
<Shield className="w-3 h-3 mr-1" />
Secure
</Badge>
@@ -244,28 +312,29 @@ const EcommerceBenefits = () => {
{
icon: Target,
title: "Conversion-Optimized Design",
description: "Intuitive UX to maximize sales."
description: "Intuitive UX to maximize sales.",
},
{
icon: TrendingUp,
title: "Scalability & Performance",
description: "Handles high traffic and large product catalogs."
description: "Handles high traffic and large product catalogs.",
},
{
icon: Shield,
title: "Robust Security",
description: "Protecting customer data and payment information."
description: "Protecting customer data and payment information.",
},
{
icon: Network,
title: "Seamless Integrations",
description: "Connecting with payment, shipping, CRM, and ERP systems."
description: "Connecting with payment, shipping, CRM, and ERP systems.",
},
{
icon: Layers,
title: "Omnichannel Capabilities",
description: "Consistent experience across web, mobile, and physical stores."
}
description:
"Consistent experience across web, mobile, and physical stores.",
},
];
return (
@@ -367,29 +436,34 @@ const EcommerceProcess = () => {
const steps = [
{
title: "Strategy & User Research",
description: "Deep market analysis, competitor research, and user behavior studies to define your eCommerce strategy and target audience.",
icon: Search
description:
"Deep market analysis, competitor research, and user behavior studies to define your eCommerce strategy and target audience.",
icon: Search,
},
{
title: "Platform Selection & Design",
description: "Choosing the optimal platform and creating conversion-focused designs with intuitive user experience and brand alignment.",
icon: Paintbrush2
description:
"Choosing the optimal platform and creating conversion-focused designs with intuitive user experience and brand alignment.",
icon: Paintbrush2,
},
{
title: "Development & Customization",
description: "Building custom features, integrating payment systems, and developing responsive interfaces optimized for all devices.",
icon: Code
description:
"Building custom features, integrating payment systems, and developing responsive interfaces optimized for all devices.",
icon: Code,
},
{
title: "Integration & Testing",
description: "Connecting with third-party services, implementing security measures, and conducting thorough testing across all systems.",
icon: Link
description:
"Connecting with third-party services, implementing security measures, and conducting thorough testing across all systems.",
icon: Link,
},
{
title: "Launch & Marketing Support",
description: "Successful deployment with SEO optimization, analytics setup, and ongoing marketing support to drive initial sales.",
icon: Rocket
}
description:
"Successful deployment with SEO optimization, analytics setup, and ongoing marketing support to drive initial sales.",
icon: Rocket,
},
];
return (
@@ -423,15 +497,23 @@ const EcommerceProcess = () => {
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}
@@ -463,44 +545,80 @@ const EcommerceServices = () => {
title: "Custom eCommerce Store Development",
description: "Tailored solutions beyond off-the-shelf platforms.",
icon: Code,
features: ["Custom Features", "Unique Design", "Performance Optimization", "Scalable Architecture"]
features: [
"Custom Features",
"Unique Design",
"Performance Optimization",
"Scalable Architecture",
],
},
{
title: "Multi-Vendor Marketplaces",
description: "Building platforms like Etsy or Amazon for diverse sellers.",
description:
"Building platforms like Etsy or Amazon for diverse sellers.",
icon: Store,
features: ["Vendor Management", "Commission Systems", "Multi-tier Catalogs", "Revenue Sharing"]
features: [
"Vendor Management",
"Commission Systems",
"Multi-tier Catalogs",
"Revenue Sharing",
],
},
{
title: "B2B eCommerce Solutions",
description: "Streamlined purchasing portals for businesses.",
icon: Building,
features: ["Bulk Pricing", "Quote Management", "Account Hierarchies", "Custom Catalogs"]
features: [
"Bulk Pricing",
"Quote Management",
"Account Hierarchies",
"Custom Catalogs",
],
},
{
title: "Headless Commerce Implementation",
description: "Decoupling frontend and backend for ultimate flexibility.",
icon: ArrowLeftRight,
features: ["API-First Design", "Omnichannel Ready", "Performance Focused", "Future-Proof"]
features: [
"API-First Design",
"Omnichannel Ready",
"Performance Focused",
"Future-Proof",
],
},
{
title: "eCommerce Migrations & Upgrades",
description: "Moving to new platforms or modernizing existing ones.",
icon: RotateCcw,
features: ["Data Migration", "SEO Preservation", "Zero Downtime", "Performance Improvement"]
features: [
"Data Migration",
"SEO Preservation",
"Zero Downtime",
"Performance Improvement",
],
},
{
title: "Payment Gateway Integration",
description: "Secure and diverse payment options.",
icon: CreditCard,
features: ["Multiple Gateways", "Global Payments", "Security Compliance", "Fraud Protection"]
features: [
"Multiple Gateways",
"Global Payments",
"Security Compliance",
"Fraud Protection",
],
},
{
title: "Inventory & Order Management",
description: "Automated systems for efficient operations.",
icon: PackageCheck,
features: ["Real-time Tracking", "Multi-warehouse", "Automated Workflows", "Analytics Dashboard"]
}
features: [
"Real-time Tracking",
"Multi-warehouse",
"Automated Workflows",
"Analytics Dashboard",
],
},
];
return (
@@ -549,10 +667,16 @@ const EcommerceServices = () => {
{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>
))}
@@ -598,10 +722,16 @@ const EcommerceServices = () => {
{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>
))}
@@ -622,28 +752,76 @@ const EcommerceServices = () => {
// eCommerce Tech Stack
const EcommerceTechStack = () => {
const platforms = [
{ name: "Shopify Plus", logo: "https://cdn.shopify.com/s/files/1/0533/2089/files/shopify_logo.svg", category: "Platform" },
{ name: "Magento", logo: "https://upload.wikimedia.org/wikipedia/commons/5/55/Magento_Logo.svg", category: "Platform" },
{ name: "WooCommerce", logo: "https://woocommerce.com/wp-content/themes/storefront-child/assets/images/logo-woocommerce.svg", category: "Platform" },
{ name: "BigCommerce", logo: "https://www.bigcommerce.com/assets/images/bc-logo.svg", category: "Platform" }
{
name: "Shopify Plus",
logo: "https://cdn.shopify.com/s/files/1/0533/2089/files/shopify_logo.svg",
category: "Platform",
},
{
name: "Magento",
logo: "https://upload.wikimedia.org/wikipedia/commons/5/55/Magento_Logo.svg",
category: "Platform",
},
{
name: "WooCommerce",
logo: "https://woocommerce.com/wp-content/themes/storefront-child/assets/images/logo-woocommerce.svg",
category: "Platform",
},
{
name: "BigCommerce",
logo: "https://www.bigcommerce.com/assets/images/bc-logo.svg",
category: "Platform",
},
];
const frontends = [
{ 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: "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",
},
];
const backends = [
{ 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: "PHP", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/php/php-original.svg", category: "Backend" }
{
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: "PHP",
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/php/php-original.svg",
category: "Backend",
},
];
const payments = [
{ name: "Stripe", icon: CreditCard, description: "Global payment processing" },
{ name: "PayPal", icon: Banknote, description: "Worldwide payment solutions" },
{ name: "Square", icon: Scan, description: "Point-of-sale integration" }
{
name: "Stripe",
icon: CreditCard,
description: "Global payment processing",
},
{
name: "PayPal",
icon: Banknote,
description: "Worldwide payment solutions",
},
{ name: "Square", icon: Scan, description: "Point-of-sale integration" },
];
return (
@@ -660,7 +838,8 @@ const EcommerceTechStack = () => {
Utilizing Industry-Leading Platforms and Modern Frameworks
</h2>
<p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
For powerful eCommerce solutions that drive sales and scale with your business.
For powerful eCommerce solutions that drive sales and scale with
your business.
</p>
</motion.div>
@@ -672,7 +851,9 @@ const EcommerceTechStack = () => {
viewport={{ once: true }}
className="mb-16"
>
<h3 className="text-2xl font-semibold text-foreground mb-8 text-center">eCommerce Platforms</h3>
<h3 className="text-2xl font-semibold text-foreground mb-8 text-center">
eCommerce Platforms
</h3>
<div className="grid grid-cols-2 md:grid-cols-4 gap-6 max-w-4xl mx-auto">
{platforms.map((platform, index) => (
<motion.div
@@ -688,8 +869,12 @@ const EcommerceTechStack = () => {
<div className="w-12 h-12 mx-auto mb-4 flex items-center justify-center">
<Store className="w-8 h-8 text-accent" />
</div>
<h4 className="font-semibold text-foreground text-sm mb-1">{platform.name}</h4>
<p className="text-xs text-muted-foreground">{platform.category}</p>
<h4 className="font-semibold text-foreground text-sm mb-1">
{platform.name}
</h4>
<p className="text-xs text-muted-foreground">
{platform.category}
</p>
</Card>
</motion.div>
))}
@@ -707,7 +892,9 @@ const EcommerceTechStack = () => {
<div className="grid lg:grid-cols-2 gap-12">
{/* Frontend */}
<div>
<h3 className="text-2xl font-semibold text-foreground mb-8 text-center">Frontend Technologies</h3>
<h3 className="text-2xl font-semibold text-foreground mb-8 text-center">
Frontend Technologies
</h3>
<div className="grid grid-cols-3 gap-4">
{frontends.map((tech, index) => (
<motion.div
@@ -727,7 +914,9 @@ const EcommerceTechStack = () => {
className="w-8 h-8 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">{tech.name}</h4>
<h4 className="font-semibold text-foreground text-sm">
{tech.name}
</h4>
</Card>
</motion.div>
))}
@@ -736,7 +925,9 @@ const EcommerceTechStack = () => {
{/* Backend */}
<div>
<h3 className="text-2xl font-semibold text-foreground mb-8 text-center">Backend Technologies</h3>
<h3 className="text-2xl font-semibold text-foreground mb-8 text-center">
Backend Technologies
</h3>
<div className="grid grid-cols-3 gap-4">
{backends.map((tech, index) => (
<motion.div
@@ -756,7 +947,9 @@ const EcommerceTechStack = () => {
className="w-8 h-8 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">{tech.name}</h4>
<h4 className="font-semibold text-foreground text-sm">
{tech.name}
</h4>
</Card>
</motion.div>
))}
@@ -772,7 +965,9 @@ const EcommerceTechStack = () => {
transition={{ duration: 0.8, delay: 0.4 }}
viewport={{ once: true }}
>
<h3 className="text-2xl font-semibold text-foreground mb-8 text-center">Payment Solutions</h3>
<h3 className="text-2xl font-semibold text-foreground mb-8 text-center">
Payment Solutions
</h3>
<div className="grid md:grid-cols-3 gap-6 max-w-4xl mx-auto">
{payments.map((payment, index) => {
const IconComponent = payment.icon;
@@ -790,8 +985,12 @@ const EcommerceTechStack = () => {
<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">{payment.name}</h4>
<p className="text-sm text-muted-foreground leading-relaxed">{payment.description}</p>
<h4 className="font-semibold text-foreground mb-2">
{payment.name}
</h4>
<p className="text-sm text-muted-foreground leading-relaxed">
{payment.description}
</p>
</Card>
</motion.div>
);
@@ -809,30 +1008,35 @@ const EcommerceCaseStudies = () => {
{
title: "Luxury Fashion Marketplace",
client: "StyleVault",
description: "High-end fashion platform with advanced filtering, AR try-on features, and seamless checkout experience for luxury brands and customers",
image: "https://images.unsplash.com/photo-1441986300917-64674bd600d8?w=400&h=300&fit=crop&auto=format",
description:
"High-end fashion platform with advanced filtering, AR try-on features, and seamless checkout experience for luxury brands and customers",
image:
"https://images.unsplash.com/photo-1441986300917-64674bd600d8?w=400&h=300&fit=crop&auto=format",
results: "300% increase in conversion rate",
gradient: "from-purple-500/20 to-pink-500/20",
features: "AR Try-on, Luxury UX, Advanced Search"
features: "AR Try-on, Luxury UX, Advanced Search",
},
{
title: "B2B Industrial Supply Platform",
client: "IndustrialHub",
description: "Comprehensive B2B marketplace with bulk pricing, quote management, and custom catalog solutions for industrial suppliers and buyers",
image: "https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d?w=400&h=300&fit=crop&auto=format",
description:
"Comprehensive B2B marketplace with bulk pricing, quote management, and custom catalog solutions for industrial suppliers and buyers",
image:
"https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d?w=400&h=300&fit=crop&auto=format",
results: "150% growth in B2B sales",
gradient: "from-blue-500/20 to-cyan-500/20",
features: "Bulk Pricing, Quote System, Custom Catalogs"
features: "Bulk Pricing, Quote System, Custom Catalogs",
},
{
title: "Multi-Vendor Food Marketplace",
client: "LocalEats",
description: "Food delivery platform connecting local restaurants with customers, featuring real-time tracking, multi-payment options, and vendor management",
description:
"Food delivery platform connecting local restaurants with customers, featuring real-time tracking, multi-payment options, and vendor management",
image: multiVendorImage,
results: "500+ vendors onboarded",
gradient: "from-green-500/20 to-emerald-500/20",
features: "Real-time Tracking, Multi-vendor, Vendor Management"
}
features: "Real-time Tracking, Multi-vendor, Vendor Management",
},
];
return (
@@ -878,7 +1082,10 @@ const EcommerceCaseStudies = () => {
<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>
@@ -890,7 +1097,9 @@ const EcommerceCaseStudies = () => {
</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}
@@ -904,10 +1113,10 @@ const EcommerceCaseStudies = () => {
{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>
@@ -917,7 +1126,9 @@ const EcommerceCaseStudies = () => {
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>
@@ -953,7 +1164,9 @@ const EcommerceInlineCTA = () => {
<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">
<TrendingUp className="w-5 h-5 text-foreground" />
<span className="text-foreground text-base font-medium">Sales Growth</span>
<span className="text-foreground text-base font-medium">
Sales Growth
</span>
</div>
</div>
@@ -963,10 +1176,14 @@ const EcommerceInlineCTA = () => {
</h2>
<p className="text-xl text-muted-foreground leading-relaxed max-w-2xl mx-auto">
Let's discuss a platform strategy that maximizes your revenue potential.
Let's discuss a platform strategy that maximizes your revenue
potential.
</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 eCommerce Consultation</span>
@@ -986,26 +1203,46 @@ const HireEcommerceDevelopers = () => {
title: "Shopify Experts",
description: "Specialists in Shopify and Shopify Plus development",
icon: Store,
skills: ["Theme Development", "App Integration", "Performance Optimization", "Plus Features"]
skills: [
"Theme Development",
"App Integration",
"Performance Optimization",
"Plus Features",
],
},
{
title: "Magento Developers",
description: "Adobe Commerce and Magento specialists",
icon: Code,
skills: ["Custom Extensions", "B2B Solutions", "Multi-store Setup", "Performance Tuning"]
skills: [
"Custom Extensions",
"B2B Solutions",
"Multi-store Setup",
"Performance Tuning",
],
},
{
title: "WooCommerce Specialists",
description: "WordPress and WooCommerce development experts",
icon: ShoppingCart,
skills: ["Plugin Development", "Custom Themes", "Payment Integration", "SEO Optimization"]
skills: [
"Plugin Development",
"Custom Themes",
"Payment Integration",
"SEO Optimization",
],
},
{
title: "Custom eCommerce Engineers",
description: "Full-stack developers for bespoke solutions",
icon: Wrench,
skills: ["Custom Architecture", "API Development", "Database Design", "Security Implementation"]
}
skills: [
"Custom Architecture",
"API Development",
"Database Design",
"Security Implementation",
],
},
];
return (
@@ -1022,7 +1259,8 @@ const HireEcommerceDevelopers = () => {
Find Expert eCommerce Developers
</h2>
<p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
Access our specialized developers proficient in Shopify, Magento, WooCommerce, and custom eCommerce solutions.
Access our specialized developers proficient in Shopify, Magento,
WooCommerce, and custom eCommerce solutions.
</p>
</motion.div>
@@ -1057,10 +1295,16 @@ const HireEcommerceDevelopers = () => {
{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>
))}
@@ -1090,7 +1334,7 @@ const HireEcommerceDevelopers = () => {
<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" />
@@ -1109,20 +1353,24 @@ const EcommerceFAQs = () => {
const faqs = [
{
question: "Should I choose a platform or custom eCommerce development?",
answer: "The choice depends on your specific needs, budget, and scalability requirements. Platforms like Shopify or Magento offer faster deployment and built-in features, while custom development provides unlimited flexibility and unique functionality. We help you evaluate factors like expected traffic, product complexity, integration needs, and long-term growth plans to make the best decision."
answer:
"The choice depends on your specific needs, budget, and scalability requirements. Platforms like Shopify or Magento offer faster deployment and built-in features, while custom development provides unlimited flexibility and unique functionality. We help you evaluate factors like expected traffic, product complexity, integration needs, and long-term growth plans to make the best decision.",
},
{
question: "How do you handle payment gateway integrations?",
answer: "We integrate multiple payment gateways including Stripe, PayPal, Square, and regional payment providers to maximize conversion rates. Our integration process includes security compliance (PCI DSS), fraud protection, multi-currency support, and seamless checkout experiences. We also implement backup payment methods and handle all technical certifications required for secure transactions."
answer:
"We integrate multiple payment gateways including Stripe, PayPal, Square, and regional payment providers to maximize conversion rates. Our integration process includes security compliance (PCI DSS), fraud protection, multi-currency support, and seamless checkout experiences. We also implement backup payment methods and handle all technical certifications required for secure transactions.",
},
{
question: "What is headless commerce and its benefits?",
answer: "Headless commerce decouples the frontend presentation layer from the backend commerce functionality, allowing greater flexibility and performance. Benefits include faster page loads, omnichannel experiences, easier third-party integrations, and the ability to use modern frontend frameworks. This approach is ideal for businesses needing custom user experiences or planning to sell across multiple channels."
answer:
"Headless commerce decouples the frontend presentation layer from the backend commerce functionality, allowing greater flexibility and performance. Benefits include faster page loads, omnichannel experiences, easier third-party integrations, and the ability to use modern frontend frameworks. This approach is ideal for businesses needing custom user experiences or planning to sell across multiple channels.",
},
{
question: "Do you offer ongoing support for my online store?",
answer: "Yes, we provide comprehensive ongoing support including security updates, performance monitoring, feature enhancements, backup management, and technical troubleshooting. Our support packages range from basic maintenance to full-service management, including marketing optimization, inventory management assistance, and regular performance audits to ensure your store continues to grow and succeed."
}
answer:
"Yes, we provide comprehensive ongoing support including security updates, performance monitoring, feature enhancements, backup management, and technical troubleshooting. Our support packages range from basic maintenance to full-service management, including marketing optimization, inventory management assistance, and regular performance audits to ensure your store continues to grow and succeed.",
},
];
return (
@@ -1155,7 +1403,9 @@ const EcommerceFAQs = () => {
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}
@@ -1191,7 +1441,9 @@ const EcommerceFinalCTA = () => {
<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">
<Store className="w-5 h-5 text-foreground" />
<span className="text-foreground text-base font-medium">eCommerce Excellence</span>
<span className="text-foreground text-base font-medium">
eCommerce Excellence
</span>
</div>
</div>
</motion.div>
@@ -1208,7 +1460,8 @@ const EcommerceFinalCTA = () => {
viewport={{ once: true }}
className="text-xl text-muted-foreground mb-12 max-w-2xl mx-auto leading-relaxed"
>
Partner with us to create an online presence that attracts, engages, and converts customers effectively.
Partner with us to create an online presence that attracts, engages,
and converts customers effectively.
</motion.p>
<motion.div
@@ -1218,7 +1471,10 @@ const EcommerceFinalCTA = () => {
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 eCommerce Project</span>

222
pages/HireBackendDevelopers.tsx
View File

@@ -4,73 +4,136 @@ import { Footer } from "../components/Footer";
import { Button } from "../components/ui/button";
import { Badge } from "../components/ui/badge";
import { Card, CardContent } from "../components/ui/card";
import { ArrowRight, Database, Server, Cloud, Shield, Zap, Target, CheckCircle, Star, Code } from "lucide-react";
import {
ArrowRight,
Database,
Server,
Cloud,
Shield,
Zap,
Target,
CheckCircle,
Star,
Code,
} from "lucide-react";
import { navigateTo } from "@/App";
export const HireBackendDevelopers = () => {
const expertise = [
{
category: "Languages & Frameworks",
description: "Node.js (Express, NestJS), Python (Django, Flask), Java (Spring Boot), PHP (Laravel, Symfony), Ruby on Rails, Go",
skills: ["Node.js", "Python", "Java", "PHP", "Ruby", "Go", "C#", ".NET Core"]
description:
"Node.js (Express, NestJS), Python (Django, Flask), Java (Spring Boot), PHP (Laravel, Symfony), Ruby on Rails, Go",
skills: [
"Node.js",
"Python",
"Java",
"PHP",
"Ruby",
"Go",
"C#",
".NET Core",
],
},
{
category: "Database Management",
description: "Designing, optimizing, and managing SQL (MySQL, PostgreSQL, MS SQL Server) and NoSQL (MongoDB, Cassandra, Redis) databases",
skills: ["MySQL", "PostgreSQL", "MongoDB", "Redis", "Cassandra", "Elasticsearch"]
description:
"Designing, optimizing, and managing SQL (MySQL, PostgreSQL, MS SQL Server) and NoSQL (MongoDB, Cassandra, Redis) databases",
skills: [
"MySQL",
"PostgreSQL",
"MongoDB",
"Redis",
"Cassandra",
"Elasticsearch",
],
},
{
category: "API Development",
description: "Building secure and efficient RESTful APIs and GraphQL endpoints for seamless frontend communication",
skills: ["REST APIs", "GraphQL", "WebSocket", "gRPC", "API Gateway", "OAuth"]
description:
"Building secure and efficient RESTful APIs and GraphQL endpoints for seamless frontend communication",
skills: [
"REST APIs",
"GraphQL",
"WebSocket",
"gRPC",
"API Gateway",
"OAuth",
],
},
{
category: "Cloud Services",
description: "Leveraging AWS, Azure, Google Cloud Platform for scalable deployments",
skills: ["AWS", "Azure", "Google Cloud", "Docker", "Kubernetes", "Serverless"]
description:
"Leveraging AWS, Azure, Google Cloud Platform for scalable deployments",
skills: [
"AWS",
"Azure",
"Google Cloud",
"Docker",
"Kubernetes",
"Serverless",
],
},
{
category: "Security",
description: "Implementing authentication, authorization, data encryption, and vulnerability management",
skills: ["JWT", "OAuth2", "SSL/TLS", "Encryption", "Security Audits", "OWASP"]
description:
"Implementing authentication, authorization, data encryption, and vulnerability management",
skills: [
"JWT",
"OAuth2",
"SSL/TLS",
"Encryption",
"Security Audits",
"OWASP",
],
},
{
category: "Scalability & Performance",
description: "Designing architectures for high traffic and future growth",
skills: ["Microservices", "Load Balancing", "Caching", "CDN", "Performance Optimization"]
}
skills: [
"Microservices",
"Load Balancing",
"Caching",
"CDN",
"Performance Optimization",
],
},
];
const deliverables = [
{
icon: Server,
title: "Server-Side Logic",
description: "Developing the core business logic and functionalities."
description: "Developing the core business logic and functionalities.",
},
{
icon: Database,
title: "Database Integration",
description: "Efficient data storage, retrieval, and manipulation."
description: "Efficient data storage, retrieval, and manipulation.",
},
{
icon: Code,
title: "API Development",
description: "Creating robust and secure interfaces for other services to interact with."
description:
"Creating robust and secure interfaces for other services to interact with.",
},
{
icon: Target,
title: "System Architecture",
description: "Designing scalable and resilient backend systems."
description: "Designing scalable and resilient backend systems.",
},
{
icon: Cloud,
title: "Integrations",
description: "Connecting with third-party services, payment gateways, and external systems."
description:
"Connecting with third-party services, payment gateways, and external systems.",
},
{
icon: Zap,
title: "Performance Optimization",
description: "Ensuring rapid response times and efficient resource utilization."
}
description:
"Ensuring rapid response times and efficient resource utilization.",
},
];
const projectTypes = [
@@ -79,45 +142,53 @@ export const HireBackendDevelopers = () => {
"API Development for Mobile & Web Apps",
"Real-Time Data Streaming",
"Microservices Architecture",
"Enterprise-Grade Applications"
"Enterprise-Grade Applications",
];
const techStacks = [
{
name: "Node.js Ecosystem",
technologies: ["Express.js", "NestJS", "TypeScript", "MongoDB", "Redis"],
description: "JavaScript-based backend for fast, scalable applications"
description: "JavaScript-based backend for fast, scalable applications",
},
{
name: "Python Stack",
technologies: ["Django", "Flask", "FastAPI", "PostgreSQL", "Celery"],
description: "Robust Python frameworks for data-intensive applications"
description: "Robust Python frameworks for data-intensive applications",
},
{
name: "Java Enterprise",
technologies: ["Spring Boot", "Spring Security", "JPA", "MySQL", "Apache Kafka"],
description: "Enterprise-grade Java solutions for large-scale systems"
technologies: [
"Spring Boot",
"Spring Security",
"JPA",
"MySQL",
"Apache Kafka",
],
description: "Enterprise-grade Java solutions for large-scale systems",
},
{
name: "PHP Modern",
technologies: ["Laravel", "Symfony", "PHP 8+", "MySQL", "Redis"],
description: "Modern PHP development with elegant frameworks"
}
description: "Modern PHP development with elegant frameworks",
},
];
const testimonials = [
{
quote: "Our backend developer from WDI built a robust API that handles millions of requests daily without any performance issues. The architecture is solid and scalable.",
quote:
"Our backend developer from WDI built a robust API that handles millions of requests daily without any performance issues. The architecture is solid and scalable.",
author: "Robert Chen",
role: "CTO, ScaleUp Technologies",
rating: 5
rating: 5,
},
{
quote: "The microservices architecture they designed transformed our monolithic application. We can now deploy features independently and scale efficiently.",
quote:
"The microservices architecture they designed transformed our monolithic application. We can now deploy features independently and scale efficiently.",
author: "Amanda Foster",
role: "Engineering Manager, CloudFirst",
rating: 5
}
rating: 5,
},
];
return (
@@ -131,30 +202,43 @@ export const HireBackendDevelopers = () => {
className="absolute inset-0 opacity-30"
style={{
backgroundImage: `radial-gradient(circle at 1px 1px, rgba(255,255,255,0.15) 1px, transparent 0)`,
backgroundSize: '40px 40px'
backgroundSize: "40px 40px",
}}
/>
<div className="relative container mx-auto px-6 lg:px-8">
<div className="max-w-4xl mx-auto text-center">
<Badge variant="outline" className="mb-6 border-[#E5195E]/20 text-[#E5195E]">
<Badge
variant="outline"
className="mb-6 border-[#E5195E]/20 text-[#E5195E]"
>
Building Robust Server-Side Solutions
</Badge>
<h1 className="text-4xl md:text-6xl lg:text-7xl font-bold mb-6 bg-gradient-to-r from-white via-white to-white/80 bg-clip-text text-transparent">
Hire Backend Developers: Powering Your Applications with
<span className="bg-gradient-to-r from-[#E5195E] to-[#FF6B9D] bg-clip-text text-transparent"> Robust Foundations</span>
<span className="bg-gradient-to-r from-[#E5195E] to-[#FF6B9D] bg-clip-text text-transparent">
{" "}
Robust Foundations
</span>
</h1>
<p className="text-lg md:text-xl text-muted-foreground mb-8 max-w-3xl mx-auto leading-relaxed">
The true power of any digital product lies in its robust and scalable backend. WDI provides expert backend developers who specialize in building the secure, efficient, and reliable server-side infrastructure that underpins your applications.
The true power of any digital product lies in its robust and
scalable backend. WDI provides expert backend developers who
specialize in building the secure, efficient, and reliable
server-side infrastructure that underpins your applications.
</p>
<div className="flex flex-col sm:flex-row gap-4 justify-center">
<Button size="lg" className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white">
<Button
size="lg"
className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
onClick={() => navigateTo("/start-a-project")}
>
Connect with Backend Experts
<ArrowRight className="ml-2 w-4 h-4" />
</Button>
<Button size="lg" variant="outline" className="border-white/20 text-white hover:bg-white/10">
{/* <Button size="lg" variant="outline" className="border-white/20 text-white hover:bg-white/10">
Request a Technical Assessment
</Button>
</Button> */}
</div>
</div>
</div>
@@ -165,7 +249,9 @@ export const HireBackendDevelopers = () => {
<div className="container mx-auto px-6 lg:px-8">
<div className="max-w-4xl mx-auto text-center">
<p className="text-lg text-muted-foreground leading-relaxed">
From database management to API development, our talent ensures your system performs flawlessly under any load. We build the invisible foundation that makes everything else possible.
From database management to API development, our talent ensures
your system performs flawlessly under any load. We build the
invisible foundation that makes everything else possible.
</p>
</div>
</div>
@@ -179,13 +265,17 @@ export const HireBackendDevelopers = () => {
Popular Backend Technology Stacks
</h2>
<p className="text-muted-foreground max-w-2xl mx-auto">
Our developers are proficient in the most powerful backend technologies
Our developers are proficient in the most powerful backend
technologies
</p>
</div>
<div className="grid md:grid-cols-2 gap-8">
{techStacks.map((stack, index) => (
<Card key={index} className="bg-card/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300 group">
<Card
key={index}
className="bg-card/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300 group"
>
<CardContent className="p-8">
<h3 className="text-xl font-bold text-white mb-3 group-hover:text-[#E5195E] transition-colors duration-300">
{stack.name}
@@ -197,7 +287,11 @@ export const HireBackendDevelopers = () => {
<div className="flex flex-wrap gap-2">
{stack.technologies.map((tech, techIndex) => (
<Badge key={techIndex} variant="outline" className="border-white/20 text-white text-xs">
<Badge
key={techIndex}
variant="outline"
className="border-white/20 text-white text-xs"
>
{tech}
</Badge>
))}
@@ -223,7 +317,10 @@ export const HireBackendDevelopers = () => {
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
{expertise.map((area, index) => (
<Card key={index} className="bg-background/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300 group">
<Card
key={index}
className="bg-background/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300 group"
>
<CardContent className="p-6">
<h3 className="text-lg font-semibold text-white mb-3 group-hover:text-[#E5195E] transition-colors duration-300">
{area.category}
@@ -237,7 +334,9 @@ export const HireBackendDevelopers = () => {
{area.skills.map((skill, skillIndex) => (
<div key={skillIndex} className="flex items-center gap-2">
<div className="w-1.5 h-1.5 rounded-full bg-[#E5195E]" />
<span className="text-muted-foreground text-xs">{skill}</span>
<span className="text-muted-foreground text-xs">
{skill}
</span>
</div>
))}
</div>
@@ -262,7 +361,10 @@ export const HireBackendDevelopers = () => {
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
{deliverables.map((item, index) => (
<Card key={index} className="bg-card/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300 group">
<Card
key={index}
className="bg-card/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300 group"
>
<CardContent className="p-6 text-center">
<item.icon className="w-8 h-8 text-[#E5195E] mb-4 mx-auto group-hover:scale-110 transition-transform duration-300" />
<h3 className="text-lg font-semibold text-white mb-3 group-hover:text-[#E5195E] transition-colors duration-300">
@@ -292,7 +394,10 @@ export const HireBackendDevelopers = () => {
<div className="grid md:grid-cols-2 gap-6 max-w-4xl mx-auto">
{projectTypes.map((project, index) => (
<div key={index} className="flex items-center gap-3 p-4 rounded-lg bg-background/50 border border-white/10 hover:border-[#E5195E]/30 transition-all duration-300">
<div
key={index}
className="flex items-center gap-3 p-4 rounded-lg bg-background/50 border border-white/10 hover:border-[#E5195E]/30 transition-all duration-300"
>
<CheckCircle className="w-5 h-5 text-[#E5195E] flex-shrink-0" />
<span className="text-white">{project}</span>
</div>
@@ -319,7 +424,10 @@ export const HireBackendDevelopers = () => {
<CardContent className="p-8">
<div className="flex gap-1 mb-4">
{[...Array(testimonial.rating)].map((_, i) => (
<Star key={i} className="w-5 h-5 text-yellow-400 fill-current" />
<Star
key={i}
className="w-5 h-5 text-yellow-400 fill-current"
/>
))}
</div>
@@ -328,7 +436,9 @@ export const HireBackendDevelopers = () => {
</p>
<div className="border-t border-white/10 pt-6">
<h4 className="text-white font-semibold">{testimonial.author}</h4>
<h4 className="text-white font-semibold">
{testimonial.author}
</h4>
<p className="text-[#E5195E] text-sm">{testimonial.role}</p>
</div>
</CardContent>
@@ -346,14 +456,22 @@ export const HireBackendDevelopers = () => {
Ready to Build a Solid Foundation?
</h2>
<p className="text-lg text-muted-foreground mb-8 max-w-2xl mx-auto">
Connect with our backend specialists and create the robust infrastructure your application needs.
Connect with our backend specialists and create the robust
infrastructure your application needs.
</p>
<div className="flex flex-col sm:flex-row gap-4 justify-center">
<Button size="lg" className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white">
<Button
size="lg"
className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
>
Start Your Project
<ArrowRight className="ml-2 w-4 h-4" />
</Button>
<Button size="lg" variant="outline" className="border-white/20 text-white hover:bg-white/10">
<Button
size="lg"
variant="outline"
className="border-white/20 text-white hover:bg-white/10"
>
Technical Consultation
</Button>
</div>

155
pages/HireFrontendDevelopers.tsx
View File

@@ -4,68 +4,101 @@ import { Footer } from "../components/Footer";
import { Button } from "../components/ui/button";
import { Badge } from "../components/ui/badge";
import { Card, CardContent } from "../components/ui/card";
import { ArrowRight, Monitor, Code, Smartphone, Zap, Target, Users, CheckCircle, Star, Palette } from "lucide-react";
import {
ArrowRight,
Monitor,
Code,
Smartphone,
Zap,
Target,
Users,
CheckCircle,
Star,
Palette,
} from "lucide-react";
import { navigateTo } from "@/App";
export const HireFrontendDevelopers = () => {
const expertise = [
{
category: "JavaScript Frameworks",
description: "React.js, Angular, Vue.js for dynamic and single-page applications",
skills: ["React.js", "Angular", "Vue.js", "Next.js", "Svelte"]
description:
"React.js, Angular, Vue.js for dynamic and single-page applications",
skills: ["React.js", "Angular", "Vue.js", "Next.js", "Svelte"],
},
{
category: "Core Technologies",
description: "HTML5, CSS3 (Sass, Less), JavaScript (ES6+)",
skills: ["HTML5", "CSS3", "JavaScript ES6+", "TypeScript", "Sass/Less"]
skills: ["HTML5", "CSS3", "JavaScript ES6+", "TypeScript", "Sass/Less"],
},
{
category: "Responsive Design",
description: "Building interfaces that adapt flawlessly across all devices and screen sizes",
skills: ["CSS Grid", "Flexbox", "Media Queries", "Mobile-First Design"]
description:
"Building interfaces that adapt flawlessly across all devices and screen sizes",
skills: ["CSS Grid", "Flexbox", "Media Queries", "Mobile-First Design"],
},
{
category: "UI Libraries & Frameworks",
description: "Bootstrap, Material-UI, Tailwind CSS",
skills: ["Bootstrap", "Material-UI", "Tailwind CSS", "Ant Design", "Chakra UI"]
skills: [
"Bootstrap",
"Material-UI",
"Tailwind CSS",
"Ant Design",
"Chakra UI",
],
},
{
category: "Performance Optimization",
description: "Ensuring fast loading times and smooth interactions",
skills: ["Webpack", "Vite", "Code Splitting", "Lazy Loading", "Performance Auditing"]
skills: [
"Webpack",
"Vite",
"Code Splitting",
"Lazy Loading",
"Performance Auditing",
],
},
{
category: "Cross-Browser Compatibility",
description: "Developing solutions that work consistently across all major browsers",
skills: ["Browser Testing", "Polyfills", "Progressive Enhancement", "Feature Detection"]
}
description:
"Developing solutions that work consistently across all major browsers",
skills: [
"Browser Testing",
"Polyfills",
"Progressive Enhancement",
"Feature Detection",
],
},
];
const deliverables = [
{
icon: Target,
title: "Pixel-Perfect Implementation",
description: "Translating UI/UX designs into precise code."
description: "Translating UI/UX designs into precise code.",
},
{
icon: Zap,
title: "Optimized Performance",
description: "Writing efficient code for speed and responsiveness."
description: "Writing efficient code for speed and responsiveness.",
},
{
icon: Smartphone,
title: "Interactive & Dynamic UIs",
description: "Creating engaging user experiences with animations and interactive elements."
description:
"Creating engaging user experiences with animations and interactive elements.",
},
{
icon: Users,
title: "Accessibility Standards",
description: "Ensuring applications are usable for everyone."
description: "Ensuring applications are usable for everyone.",
},
{
icon: Code,
title: "Collaboration with Backend Teams",
description: "Seamless integration with APIs and server-side logic."
}
description: "Seamless integration with APIs and server-side logic.",
},
];
const projectTypes = [
@@ -73,22 +106,24 @@ export const HireFrontendDevelopers = () => {
"Interactive Dashboards & Admin Panels",
"E-commerce Frontends",
"Marketing Websites with Complex Animations",
"Progressive Web Apps (PWAs)"
"Progressive Web Apps (PWAs)",
];
const testimonials = [
{
quote: "The frontend developer from WDI transformed our outdated interface into a modern, responsive design that our users love. The attention to detail was exceptional.",
quote:
"The frontend developer from WDI transformed our outdated interface into a modern, responsive design that our users love. The attention to detail was exceptional.",
author: "Lisa Anderson",
role: "Product Manager, DesignCorp",
rating: 5
rating: 5,
},
{
quote: "Our React-based dashboard is now lightning fast and incredibly user-friendly. The developer's expertise in performance optimization made all the difference.",
quote:
"Our React-based dashboard is now lightning fast and incredibly user-friendly. The developer's expertise in performance optimization made all the difference.",
author: "James Wilson",
role: "Tech Lead, Analytics Pro",
rating: 5
}
rating: 5,
},
];
return (
@@ -102,30 +137,43 @@ export const HireFrontendDevelopers = () => {
className="absolute inset-0 opacity-30"
style={{
backgroundImage: `radial-gradient(circle at 1px 1px, rgba(255,255,255,0.15) 1px, transparent 0)`,
backgroundSize: '40px 40px'
backgroundSize: "40px 40px",
}}
/>
<div className="relative container mx-auto px-6 lg:px-8">
<div className="max-w-4xl mx-auto text-center">
<Badge variant="outline" className="mb-6 border-[#E5195E]/20 text-[#E5195E]">
<Badge
variant="outline"
className="mb-6 border-[#E5195E]/20 text-[#E5195E]"
>
Crafting Engaging User Experiences
</Badge>
<h1 className="text-4xl md:text-6xl lg:text-7xl font-bold mb-6 bg-gradient-to-r from-white via-white to-white/80 bg-clip-text text-transparent">
Hire Frontend Developers: Crafting Intuitive and
<span className="bg-gradient-to-r from-[#E5195E] to-[#FF6B9D] bg-clip-text text-transparent"> Engaging User Experiences</span>
<span className="bg-gradient-to-r from-[#E5195E] to-[#FF6B9D] bg-clip-text text-transparent">
{" "}
Engaging User Experiences
</span>
</h1>
<p className="text-lg md:text-xl text-muted-foreground mb-8 max-w-3xl mx-auto leading-relaxed">
The user interface is the face of your digital product. WDI offers highly skilled frontend developers who excel at transforming designs into interactive, responsive, and aesthetically pleasing web experiences.
The user interface is the face of your digital product. WDI offers
highly skilled frontend developers who excel at transforming
designs into interactive, responsive, and aesthetically pleasing
web experiences.
</p>
<div className="flex flex-col sm:flex-row gap-4 justify-center">
<Button size="lg" className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white">
<Button
size="lg"
className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
onClick={() => navigateTo("/start-a-project")}
>
Find Your Frontend Specialist
<ArrowRight className="ml-2 w-4 h-4" />
</Button>
<Button size="lg" variant="outline" className="border-white/20 text-white hover:bg-white/10">
{/* <Button size="lg" variant="outline" className="border-white/20 text-white hover:bg-white/10">
Discuss Your UI Needs
</Button>
</Button> */}
</div>
</div>
</div>
@@ -136,7 +184,10 @@ export const HireFrontendDevelopers = () => {
<div className="container mx-auto px-6 lg:px-8">
<div className="max-w-4xl mx-auto text-center">
<p className="text-lg text-muted-foreground leading-relaxed">
Our experts ensure your users enjoy seamless navigation and a visually compelling journey. From responsive layouts to complex interactions, we bring your frontend vision to life with precision and creativity.
Our experts ensure your users enjoy seamless navigation and a
visually compelling journey. From responsive layouts to complex
interactions, we bring your frontend vision to life with precision
and creativity.
</p>
</div>
</div>
@@ -156,7 +207,10 @@ export const HireFrontendDevelopers = () => {
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
{expertise.map((area, index) => (
<Card key={index} className="bg-card/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300 group">
<Card
key={index}
className="bg-card/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300 group"
>
<CardContent className="p-6">
<h3 className="text-lg font-semibold text-white mb-3 group-hover:text-[#E5195E] transition-colors duration-300">
{area.category}
@@ -170,7 +224,9 @@ export const HireFrontendDevelopers = () => {
{area.skills.map((skill, skillIndex) => (
<div key={skillIndex} className="flex items-center gap-2">
<div className="w-1.5 h-1.5 rounded-full bg-[#E5195E]" />
<span className="text-muted-foreground text-xs">{skill}</span>
<span className="text-muted-foreground text-xs">
{skill}
</span>
</div>
))}
</div>
@@ -195,7 +251,10 @@ export const HireFrontendDevelopers = () => {
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto">
{deliverables.map((item, index) => (
<Card key={index} className="bg-background/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300 group">
<Card
key={index}
className="bg-background/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300 group"
>
<CardContent className="p-6 text-center">
<item.icon className="w-8 h-8 text-[#E5195E] mb-4 mx-auto group-hover:scale-110 transition-transform duration-300" />
<h3 className="text-lg font-semibold text-white mb-3 group-hover:text-[#E5195E] transition-colors duration-300">
@@ -225,7 +284,10 @@ export const HireFrontendDevelopers = () => {
<div className="grid md:grid-cols-2 gap-6 max-w-3xl mx-auto">
{projectTypes.map((project, index) => (
<div key={index} className="flex items-center gap-3 p-4 rounded-lg bg-card/50 border border-white/10 hover:border-[#E5195E]/30 transition-all duration-300">
<div
key={index}
className="flex items-center gap-3 p-4 rounded-lg bg-card/50 border border-white/10 hover:border-[#E5195E]/30 transition-all duration-300"
>
<CheckCircle className="w-5 h-5 text-[#E5195E] flex-shrink-0" />
<span className="text-white">{project}</span>
</div>
@@ -252,7 +314,10 @@ export const HireFrontendDevelopers = () => {
<CardContent className="p-8">
<div className="flex gap-1 mb-4">
{[...Array(testimonial.rating)].map((_, i) => (
<Star key={i} className="w-5 h-5 text-yellow-400 fill-current" />
<Star
key={i}
className="w-5 h-5 text-yellow-400 fill-current"
/>
))}
</div>
@@ -261,7 +326,9 @@ export const HireFrontendDevelopers = () => {
</p>
<div className="border-t border-white/10 pt-6">
<h4 className="text-white font-semibold">{testimonial.author}</h4>
<h4 className="text-white font-semibold">
{testimonial.author}
</h4>
<p className="text-[#E5195E] text-sm">{testimonial.role}</p>
</div>
</CardContent>
@@ -279,14 +346,22 @@ export const HireFrontendDevelopers = () => {
Ready to Transform Your User Interface?
</h2>
<p className="text-lg text-muted-foreground mb-8 max-w-2xl mx-auto">
Connect with our frontend specialists and create user experiences that engage and convert.
Connect with our frontend specialists and create user experiences
that engage and convert.
</p>
<div className="flex flex-col sm:flex-row gap-4 justify-center">
<Button size="lg" className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white">
<Button
size="lg"
className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
>
Get Started Today
<ArrowRight className="ml-2 w-4 h-4" />
</Button>
<Button size="lg" variant="outline" className="border-white/20 text-white hover:bg-white/10">
<Button
size="lg"
variant="outline"
className="border-white/20 text-white hover:bg-white/10"
>
View Portfolio
</Button>
</div>

163
pages/HireFullStackDevelopers.tsx
View File

@@ -4,62 +4,85 @@ import { Footer } from "../components/Footer";
import { Button } from "../components/ui/button";
import { Badge } from "../components/ui/badge";
import { Card, CardContent } from "../components/ui/card";
import { ArrowRight, Code, Database, Cloud, Globe, Users, Zap, DollarSign, Target, CheckCircle, Star } from "lucide-react";
import {
ArrowRight,
Code,
Database,
Cloud,
Globe,
Users,
Zap,
DollarSign,
Target,
CheckCircle,
Star,
} from "lucide-react";
import { navigateTo } from "@/App";
export const HireFullStackDevelopers = () => {
const expertise = [
{
category: "Frontend Technologies",
skills: ["HTML5", "CSS3", "JavaScript", "React", "Angular", "Vue.js"]
skills: ["HTML5", "CSS3", "JavaScript", "React", "Angular", "Vue.js"],
},
{
category: "Backend Technologies",
skills: ["Node.js", "Python (Django, Flask)", "Ruby on Rails", "PHP (Laravel)", "Java (Spring Boot)"]
skills: [
"Node.js",
"Python (Django, Flask)",
"Ruby on Rails",
"PHP (Laravel)",
"Java (Spring Boot)",
],
},
{
category: "Databases",
skills: ["MySQL", "PostgreSQL", "MongoDB", "Cassandra", "Redis"]
skills: ["MySQL", "PostgreSQL", "MongoDB", "Cassandra", "Redis"],
},
{
category: "Cloud Platforms",
skills: ["AWS", "Azure", "Google Cloud Platform", "Heroku"]
skills: ["AWS", "Azure", "Google Cloud Platform", "Heroku"],
},
{
category: "Version Control",
skills: ["Git", "GitHub", "GitLab", "Bitbucket"]
skills: ["Git", "GitHub", "GitLab", "Bitbucket"],
},
{
category: "APIs",
skills: ["RESTful APIs", "GraphQL", "WebSocket", "Microservices"]
}
skills: ["RESTful APIs", "GraphQL", "WebSocket", "Microservices"],
},
];
const benefits = [
{
icon: Users,
title: "Single Point of Contact",
description: "One developer managing both frontend and backend, ensuring seamless integration."
description:
"One developer managing both frontend and backend, ensuring seamless integration.",
},
{
icon: Zap,
title: "Faster Development Cycles",
description: "Reduced communication overhead and quicker problem-solving."
description:
"Reduced communication overhead and quicker problem-solving.",
},
{
icon: DollarSign,
title: "Cost-Efficiency",
description: "Often more economical than hiring separate frontend and backend specialists for smaller teams."
description:
"Often more economical than hiring separate frontend and backend specialists for smaller teams.",
},
{
icon: Target,
title: "Versatility",
description: "Adaptable to various project requirements and technology stacks."
description:
"Adaptable to various project requirements and technology stacks.",
},
{
icon: Globe,
title: "Holistic Project Understanding",
description: "A complete view of the application architecture."
}
description: "A complete view of the application architecture.",
},
];
const solutionTypes = [
@@ -67,45 +90,47 @@ export const HireFullStackDevelopers = () => {
"E-commerce Platforms with Custom Features",
"Social Networking Sites",
"Data-Intensive Dashboards",
"Real-Time Applications"
"Real-Time Applications",
];
const techStacks = [
{
name: "MERN Stack",
technologies: ["MongoDB", "Express.js", "React", "Node.js"],
description: "Modern JavaScript-based full-stack development"
description: "Modern JavaScript-based full-stack development",
},
{
name: "MEAN Stack",
technologies: ["MongoDB", "Express.js", "Angular", "Node.js"],
description: "Enterprise-grade Angular frontend with Node.js backend"
description: "Enterprise-grade Angular frontend with Node.js backend",
},
{
name: "Django + React",
technologies: ["Python", "Django", "React", "PostgreSQL"],
description: "Robust Python backend with dynamic React frontend"
description: "Robust Python backend with dynamic React frontend",
},
{
name: "Laravel + Vue.js",
technologies: ["PHP", "Laravel", "Vue.js", "MySQL"],
description: "Elegant PHP framework with progressive Vue.js frontend"
}
description: "Elegant PHP framework with progressive Vue.js frontend",
},
];
const testimonials = [
{
quote: "Our full-stack developer from WDI single-handedly built our entire SaaS platform. The seamless integration between frontend and backend was impressive.",
quote:
"Our full-stack developer from WDI single-handedly built our entire SaaS platform. The seamless integration between frontend and backend was impressive.",
author: "David Rodriguez",
role: "Founder, CloudTech Solutions",
rating: 5
rating: 5,
},
{
quote: "The full-stack expertise saved us months of development time. Having one developer understand the complete architecture made all the difference.",
quote:
"The full-stack expertise saved us months of development time. Having one developer understand the complete architecture made all the difference.",
author: "Emma Thompson",
role: "CTO, DataFlow Inc.",
rating: 5
}
rating: 5,
},
];
return (
@@ -119,30 +144,43 @@ export const HireFullStackDevelopers = () => {
className="absolute inset-0 opacity-30"
style={{
backgroundImage: `radial-gradient(circle at 1px 1px, rgba(255,255,255,0.15) 1px, transparent 0)`,
backgroundSize: '40px 40px'
backgroundSize: "40px 40px",
}}
/>
<div className="relative container mx-auto px-6 lg:px-8">
<div className="max-w-4xl mx-auto text-center">
<Badge variant="outline" className="mb-6 border-[#E5195E]/20 text-[#E5195E]">
<Badge
variant="outline"
className="mb-6 border-[#E5195E]/20 text-[#E5195E]"
>
End-to-End Development Experts
</Badge>
<h1 className="text-4xl md:text-6xl lg:text-7xl font-bold mb-6 bg-gradient-to-r from-white via-white to-white/80 bg-clip-text text-transparent">
Hire Full Stack Developers: Comprehensive Solutions from
<span className="bg-gradient-to-r from-[#E5195E] to-[#FF6B9D] bg-clip-text text-transparent"> Front to Back</span>
<span className="bg-gradient-to-r from-[#E5195E] to-[#FF6B9D] bg-clip-text text-transparent">
{" "}
Front to Back
</span>
</h1>
<p className="text-lg md:text-xl text-muted-foreground mb-8 max-w-3xl mx-auto leading-relaxed">
For end-to-end project execution and a streamlined development process, full stack developers are invaluable. WDI provides highly skilled full stack professionals capable of handling every aspect of your web application.
For end-to-end project execution and a streamlined development
process, full stack developers are invaluable. WDI provides highly
skilled full stack professionals capable of handling every aspect
of your web application.
</p>
<div className="flex flex-col sm:flex-row gap-4 justify-center">
<Button size="lg" className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white">
<Button
size="lg"
className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
onClick={() => navigateTo("/start-a-project")}
>
Find Your Full Stack Expert
<ArrowRight className="ml-2 w-4 h-4" />
</Button>
<Button size="lg" variant="outline" className="border-white/20 text-white hover:bg-white/10">
{/* <Button size="lg" variant="outline" className="border-white/20 text-white hover:bg-white/10">
Get a Quote for Full Stack Development
</Button>
</Button> */}
</div>
</div>
</div>
@@ -153,7 +191,10 @@ export const HireFullStackDevelopers = () => {
<div className="container mx-auto px-6 lg:px-8">
<div className="max-w-4xl mx-auto text-center">
<p className="text-lg text-muted-foreground leading-relaxed">
From intuitive user interfaces to robust server-side logic and database management, our full stack developers bring comprehensive expertise to every project. They ensure seamless integration across all layers of your application architecture.
From intuitive user interfaces to robust server-side logic and
database management, our full stack developers bring comprehensive
expertise to every project. They ensure seamless integration
across all layers of your application architecture.
</p>
</div>
</div>
@@ -167,13 +208,17 @@ export const HireFullStackDevelopers = () => {
Popular Technology Stacks
</h2>
<p className="text-muted-foreground max-w-2xl mx-auto">
Our developers are proficient in the most sought-after technology combinations
Our developers are proficient in the most sought-after technology
combinations
</p>
</div>
<div className="grid md:grid-cols-2 gap-8">
{techStacks.map((stack, index) => (
<Card key={index} className="bg-card/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300 group">
<Card
key={index}
className="bg-card/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300 group"
>
<CardContent className="p-8">
<h3 className="text-xl font-bold text-white mb-3 group-hover:text-[#E5195E] transition-colors duration-300">
{stack.name}
@@ -185,7 +230,11 @@ export const HireFullStackDevelopers = () => {
<div className="flex flex-wrap gap-2">
{stack.technologies.map((tech, techIndex) => (
<Badge key={techIndex} variant="outline" className="border-white/20 text-white text-xs">
<Badge
key={techIndex}
variant="outline"
className="border-white/20 text-white text-xs"
>
{tech}
</Badge>
))}
@@ -211,7 +260,10 @@ export const HireFullStackDevelopers = () => {
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
{expertise.map((area, index) => (
<Card key={index} className="bg-background/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300 group">
<Card
key={index}
className="bg-background/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300 group"
>
<CardContent className="p-6">
<h3 className="text-lg font-semibold text-white mb-4 group-hover:text-[#E5195E] transition-colors duration-300">
{area.category}
@@ -221,7 +273,9 @@ export const HireFullStackDevelopers = () => {
{area.skills.map((skill, skillIndex) => (
<div key={skillIndex} className="flex items-center gap-2">
<div className="w-2 h-2 rounded-full bg-[#E5195E]" />
<span className="text-muted-foreground text-sm">{skill}</span>
<span className="text-muted-foreground text-sm">
{skill}
</span>
</div>
))}
</div>
@@ -246,7 +300,10 @@ export const HireFullStackDevelopers = () => {
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto">
{benefits.map((benefit, index) => (
<Card key={index} className="bg-card/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300 group">
<Card
key={index}
className="bg-card/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300 group"
>
<CardContent className="p-6 text-center">
<benefit.icon className="w-8 h-8 text-[#E5195E] mb-4 mx-auto group-hover:scale-110 transition-transform duration-300" />
<h3 className="text-lg font-semibold text-white mb-3 group-hover:text-[#E5195E] transition-colors duration-300">
@@ -276,7 +333,10 @@ export const HireFullStackDevelopers = () => {
<div className="grid md:grid-cols-2 gap-6 max-w-3xl mx-auto">
{solutionTypes.map((solution, index) => (
<div key={index} className="flex items-center gap-3 p-4 rounded-lg bg-background/50 border border-white/10 hover:border-[#E5195E]/30 transition-all duration-300">
<div
key={index}
className="flex items-center gap-3 p-4 rounded-lg bg-background/50 border border-white/10 hover:border-[#E5195E]/30 transition-all duration-300"
>
<CheckCircle className="w-5 h-5 text-[#E5195E] flex-shrink-0" />
<span className="text-white">{solution}</span>
</div>
@@ -303,7 +363,10 @@ export const HireFullStackDevelopers = () => {
<CardContent className="p-8">
<div className="flex gap-1 mb-4">
{[...Array(testimonial.rating)].map((_, i) => (
<Star key={i} className="w-5 h-5 text-yellow-400 fill-current" />
<Star
key={i}
className="w-5 h-5 text-yellow-400 fill-current"
/>
))}
</div>
@@ -312,7 +375,9 @@ export const HireFullStackDevelopers = () => {
</p>
<div className="border-t border-white/10 pt-6">
<h4 className="text-white font-semibold">{testimonial.author}</h4>
<h4 className="text-white font-semibold">
{testimonial.author}
</h4>
<p className="text-[#E5195E] text-sm">{testimonial.role}</p>
</div>
</CardContent>
@@ -330,14 +395,22 @@ export const HireFullStackDevelopers = () => {
Ready to Streamline Your Development Process?
</h2>
<p className="text-lg text-muted-foreground mb-8 max-w-2xl mx-auto">
Connect with our full stack developers and experience the efficiency of end-to-end expertise.
Connect with our full stack developers and experience the
efficiency of end-to-end expertise.
</p>
<div className="flex flex-col sm:flex-row gap-4 justify-center">
<Button size="lg" className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white">
<Button
size="lg"
className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
>
Start Your Project
<ArrowRight className="ml-2 w-4 h-4" />
</Button>
<Button size="lg" variant="outline" className="border-white/20 text-white hover:bg-white/10">
<Button
size="lg"
variant="outline"
className="border-white/20 text-white hover:bg-white/10"
>
Discuss Your Requirements
</Button>
</div>

13
pages/HireMobileAppDevelopers.tsx
View File

@@ -5,6 +5,7 @@ import { Button } from "../components/ui/button";
import { Badge } from "../components/ui/badge";
import { Card, CardContent } from "../components/ui/card";
import { ArrowRight, Smartphone, Apple, Code, Zap, Shield, Target, Users, CheckCircle, Star } from "lucide-react";
import { navigateTo } from "@/App";
export const HireMobileAppDevelopers = () => {
const expertise = [
@@ -119,13 +120,15 @@ export const HireMobileAppDevelopers = () => {
Need a captivating and high-performing mobile application? WDI connects you with expert mobile app developers proficient in creating native iOS and Android experiences, as well as efficient cross-platform solutions.
</p>
<div className="flex flex-col sm:flex-row gap-4 justify-center">
<Button size="lg" className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white">
<Button size="lg" className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
onClick={() => navigateTo("/start-a-project")}
>
Get a Free Consultation for Mobile Developers
<ArrowRight className="ml-2 w-4 h-4" />
</Button>
<Button size="lg" variant="outline" className="border-white/20 text-white hover:bg-white/10">
{/* <Button size="lg" variant="outline" className="border-white/20 text-white hover:bg-white/10">
View Developer Profiles
</Button>
</Button> */}
</div>
</div>
</div>
@@ -283,7 +286,9 @@ export const HireMobileAppDevelopers = () => {
Connect with our expert mobile app developers and turn your vision into a powerful mobile experience.
</p>
<div className="flex flex-col sm:flex-row gap-4 justify-center">
<Button size="lg" className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white">
<Button size="lg" className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
onClick={() => navigateTo("/start-a-project")}
>
Get Started Today
<ArrowRight className="ml-2 w-4 h-4" />
</Button>

214
pages/HireQAEngineers.tsx
View File

@@ -4,68 +4,129 @@ import { Footer } from "../components/Footer";
import { Button } from "../components/ui/button";
import { Badge } from "../components/ui/badge";
import { Card, CardContent } from "../components/ui/card";
import { ArrowRight, TestTube, Shield, Zap, Target, Users, CheckCircle, Star, Bug, Activity, Search } from "lucide-react";
import {
ArrowRight,
TestTube,
Shield,
Zap,
Target,
Users,
CheckCircle,
Star,
Bug,
Activity,
Search,
} from "lucide-react";
import { navigateTo } from "@/App";
export const HireQAEngineers = () => {
const expertise = [
{
category: "Manual Testing",
description: "Comprehensive functional, usability, and exploratory testing to uncover subtle issues",
skills: ["Functional Testing", "Usability Testing", "Exploratory Testing", "Regression Testing", "User Acceptance Testing"]
description:
"Comprehensive functional, usability, and exploratory testing to uncover subtle issues",
skills: [
"Functional Testing",
"Usability Testing",
"Exploratory Testing",
"Regression Testing",
"User Acceptance Testing",
],
},
{
category: "Automated Testing",
description: "Developing and maintaining automated test scripts for faster, repeatable testing",
skills: ["Selenium", "Cypress", "Playwright", "Jest", "TestNG", "JUnit", "Puppeteer"]
description:
"Developing and maintaining automated test scripts for faster, repeatable testing",
skills: [
"Selenium",
"Cypress",
"Playwright",
"Jest",
"TestNG",
"JUnit",
"Puppeteer",
],
},
{
category: "Performance Testing",
description: "Evaluating application speed, responsiveness, and stability under various load conditions",
skills: ["Load Testing", "Stress Testing", "Volume Testing", "JMeter", "LoadRunner", "K6"]
description:
"Evaluating application speed, responsiveness, and stability under various load conditions",
skills: [
"Load Testing",
"Stress Testing",
"Volume Testing",
"JMeter",
"LoadRunner",
"K6",
],
},
{
category: "Security Testing",
description: "Identifying vulnerabilities and ensuring data protection measures are robust",
skills: ["Vulnerability Assessment", "Penetration Testing", "OWASP Testing", "Security Audits"]
description:
"Identifying vulnerabilities and ensuring data protection measures are robust",
skills: [
"Vulnerability Assessment",
"Penetration Testing",
"OWASP Testing",
"Security Audits",
],
},
{
category: "API Testing",
description: "Validating the functionality, reliability, and performance of APIs",
skills: ["REST API Testing", "GraphQL Testing", "Postman", "Newman", "SoapUI", "Insomnia"]
description:
"Validating the functionality, reliability, and performance of APIs",
skills: [
"REST API Testing",
"GraphQL Testing",
"Postman",
"Newman",
"SoapUI",
"Insomnia",
],
},
{
category: "Mobile App Testing",
description: "Testing across diverse devices, operating systems, and network conditions",
skills: ["iOS Testing", "Android Testing", "Cross-Platform Testing", "Device Testing", "Network Testing"]
}
description:
"Testing across diverse devices, operating systems, and network conditions",
skills: [
"iOS Testing",
"Android Testing",
"Cross-Platform Testing",
"Device Testing",
"Network Testing",
],
},
];
const deliverables = [
{
icon: Bug,
title: "Defect Prevention & Detection",
description: "Minimizing bugs and ensuring a stable product release."
description: "Minimizing bugs and ensuring a stable product release.",
},
{
icon: Users,
title: "Enhanced User Satisfaction",
description: "A bug-free experience leads to happier users."
description: "A bug-free experience leads to happier users.",
},
{
icon: Target,
title: "Reduced Development Costs",
description: "Catching issues early saves significant time and resources."
description:
"Catching issues early saves significant time and resources.",
},
{
icon: Shield,
title: "Improved Brand Reputation",
description: "Delivering a reliable product builds trust and credibility."
description:
"Delivering a reliable product builds trust and credibility.",
},
{
icon: CheckCircle,
title: "Compliance & Standards Adherence",
description: "Ensuring your software meets industry and regulatory requirements."
}
description:
"Ensuring your software meets industry and regulatory requirements.",
},
];
const projectTypes = [
@@ -73,49 +134,69 @@ export const HireQAEngineers = () => {
"Complex Applications with Intricate Workflows",
"E-commerce Platforms (Payment Gateways, Inventory)",
"Applications with Strict Performance Requirements",
"Regulated Industry Software (Healthcare, Finance)"
"Regulated Industry Software (Healthcare, Finance)",
];
const testingTools = [
{
category: "Automation Tools",
tools: ["Selenium WebDriver", "Cypress", "Playwright", "TestComplete", "Ranorex"]
tools: [
"Selenium WebDriver",
"Cypress",
"Playwright",
"TestComplete",
"Ranorex",
],
},
{
category: "Performance Tools",
tools: ["Apache JMeter", "LoadRunner", "K6", "Gatling", "BlazeMeter"]
tools: ["Apache JMeter", "LoadRunner", "K6", "Gatling", "BlazeMeter"],
},
{
category: "API Testing",
tools: ["Postman", "SoapUI", "Insomnia", "REST Assured", "Karate"]
tools: ["Postman", "SoapUI", "Insomnia", "REST Assured", "Karate"],
},
{
category: "Bug Tracking",
tools: ["Jira", "Azure DevOps", "Bugzilla", "TestRail", "Zephyr"]
tools: ["Jira", "Azure DevOps", "Bugzilla", "TestRail", "Zephyr"],
},
{
category: "Mobile Testing",
tools: ["Appium", "Espresso", "XCTest", "Firebase Test Lab", "BrowserStack"]
tools: [
"Appium",
"Espresso",
"XCTest",
"Firebase Test Lab",
"BrowserStack",
],
},
{
category: "CI/CD Integration",
tools: ["Jenkins", "GitLab CI", "Azure Pipelines", "CircleCI", "GitHub Actions"]
}
tools: [
"Jenkins",
"GitLab CI",
"Azure Pipelines",
"CircleCI",
"GitHub Actions",
],
},
];
const testimonials = [
{
quote: "Our QA engineer from WDI caught critical issues that could have cost us thousands in production. Their thorough testing approach saved our product launch.",
quote:
"Our QA engineer from WDI caught critical issues that could have cost us thousands in production. Their thorough testing approach saved our product launch.",
author: "Kevin Martinez",
role: "Product Owner, SecureApp Solutions",
rating: 5
rating: 5,
},
{
quote: "The automated testing framework they set up reduced our testing time by 80% while increasing coverage. Our releases are now faster and more reliable.",
quote:
"The automated testing framework they set up reduced our testing time by 80% while increasing coverage. Our releases are now faster and more reliable.",
author: "Sophie Turner",
role: "Development Manager, AgileWorks",
rating: 5
}
rating: 5,
},
];
return (
@@ -129,30 +210,43 @@ export const HireQAEngineers = () => {
className="absolute inset-0 opacity-30"
style={{
backgroundImage: `radial-gradient(circle at 1px 1px, rgba(255,255,255,0.15) 1px, transparent 0)`,
backgroundSize: '40px 40px'
backgroundSize: "40px 40px",
}}
/>
<div className="relative container mx-auto px-6 lg:px-8">
<div className="max-w-4xl mx-auto text-center">
<Badge variant="outline" className="mb-6 border-[#E5195E]/20 text-[#E5195E]">
<Badge
variant="outline"
className="mb-6 border-[#E5195E]/20 text-[#E5195E]"
>
Ensuring Software Quality & Reliability
</Badge>
<h1 className="text-4xl md:text-6xl lg:text-7xl font-bold mb-6 bg-gradient-to-r from-white via-white to-white/80 bg-clip-text text-transparent">
Hire QA Engineers: Ensuring Flawless
<span className="bg-gradient-to-r from-[#E5195E] to-[#FF6B9D] bg-clip-text text-transparent"> Performance and Reliability</span>
<span className="bg-gradient-to-r from-[#E5195E] to-[#FF6B9D] bg-clip-text text-transparent">
{" "}
Performance and Reliability
</span>
</h1>
<p className="text-lg md:text-xl text-muted-foreground mb-8 max-w-3xl mx-auto leading-relaxed">
Quality Assurance (QA) is critical for delivering reliable, high-performing software. WDI provides highly skilled QA engineers who are meticulous in identifying and resolving defects, ensuring your product meets the highest standards.
Quality Assurance (QA) is critical for delivering reliable,
high-performing software. WDI provides highly skilled QA engineers
who are meticulous in identifying and resolving defects, ensuring
your product meets the highest standards.
</p>
<div className="flex flex-col sm:flex-row gap-4 justify-center">
<Button size="lg" className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white">
<Button
size="lg"
className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
onClick={() => navigateTo("/start-a-project")}
>
Strengthen Your Software Quality
<ArrowRight className="ml-2 w-4 h-4" />
</Button>
<Button size="lg" variant="outline" className="border-white/20 text-white hover:bg-white/10">
{/* <Button size="lg" variant="outline" className="border-white/20 text-white hover:bg-white/10">
Discuss Your Testing Needs
</Button>
</Button> */}
</div>
</div>
</div>
@@ -166,13 +260,17 @@ export const HireQAEngineers = () => {
Testing Tools & Technologies
</h2>
<p className="text-muted-foreground max-w-2xl mx-auto">
Our QA engineers are proficient in the latest testing tools and methodologies
Our QA engineers are proficient in the latest testing tools and
methodologies
</p>
</div>
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
{testingTools.map((category, index) => (
<Card key={index} className="bg-background/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300 group">
<Card
key={index}
className="bg-background/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300 group"
>
<CardContent className="p-6">
<h3 className="text-lg font-semibold text-white mb-4 group-hover:text-[#E5195E] transition-colors duration-300">
{category.category}
@@ -182,7 +280,9 @@ export const HireQAEngineers = () => {
{category.tools.map((tool, toolIndex) => (
<div key={toolIndex} className="flex items-center gap-2">
<div className="w-2 h-2 rounded-full bg-[#E5195E]" />
<span className="text-muted-foreground text-sm">{tool}</span>
<span className="text-muted-foreground text-sm">
{tool}
</span>
</div>
))}
</div>
@@ -207,7 +307,10 @@ export const HireQAEngineers = () => {
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto">
{deliverables.map((item, index) => (
<Card key={index} className="bg-card/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300 group">
<Card
key={index}
className="bg-card/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300 group"
>
<CardContent className="p-6 text-center">
<item.icon className="w-8 h-8 text-[#E5195E] mb-4 mx-auto group-hover:scale-110 transition-transform duration-300" />
<h3 className="text-lg font-semibold text-white mb-3 group-hover:text-[#E5195E] transition-colors duration-300">
@@ -238,7 +341,10 @@ export const HireQAEngineers = () => {
<CardContent className="p-8">
<div className="flex gap-1 mb-4">
{[...Array(testimonial.rating)].map((_, i) => (
<Star key={i} className="w-5 h-5 text-yellow-400 fill-current" />
<Star
key={i}
className="w-5 h-5 text-yellow-400 fill-current"
/>
))}
</div>
@@ -247,7 +353,9 @@ export const HireQAEngineers = () => {
</p>
<div className="border-t border-white/10 pt-6">
<h4 className="text-white font-semibold">{testimonial.author}</h4>
<h4 className="text-white font-semibold">
{testimonial.author}
</h4>
<p className="text-[#E5195E] text-sm">{testimonial.role}</p>
</div>
</CardContent>
@@ -265,14 +373,22 @@ export const HireQAEngineers = () => {
Ready to Ensure Quality Excellence?
</h2>
<p className="text-lg text-muted-foreground mb-8 max-w-2xl mx-auto">
Connect with our QA specialists and deliver software that exceeds expectations.
Connect with our QA specialists and deliver software that exceeds
expectations.
</p>
<div className="flex flex-col sm:flex-row gap-4 justify-center">
<Button size="lg" className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white">
<Button
size="lg"
className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
>
Start Quality Assurance
<ArrowRight className="ml-2 w-4 h-4" />
</Button>
<Button size="lg" variant="outline" className="border-white/20 text-white hover:bg-white/10">
<Button
size="lg"
variant="outline"
className="border-white/20 text-white hover:bg-white/10"
>
Testing Strategy Consultation
</Button>
</div>

217
pages/HireUIUXDesigners.tsx
View File

@@ -4,68 +4,126 @@ import { Footer } from "../components/Footer";
import { Button } from "../components/ui/button";
import { Badge } from "../components/ui/badge";
import { Card, CardContent } from "../components/ui/card";
import { ArrowRight, Palette, Users, Target, Eye, Smartphone, CheckCircle, Star, MousePointer2, TestTube } from "lucide-react";
import {
ArrowRight,
Palette,
Users,
Target,
Eye,
Smartphone,
CheckCircle,
Star,
MousePointer2,
TestTube,
} from "lucide-react";
import { navigateTo } from "@/App";
export const HireUIUXDesigners = () => {
const expertise = [
{
category: "User Research & Analysis",
description: "Conducting usability testing, user interviews, and competitive analysis to understand user needs",
skills: ["User Interviews", "Usability Testing", "Surveys", "Competitive Analysis", "Persona Development"]
description:
"Conducting usability testing, user interviews, and competitive analysis to understand user needs",
skills: [
"User Interviews",
"Usability Testing",
"Surveys",
"Competitive Analysis",
"Persona Development",
],
},
{
category: "Information Architecture",
description: "Structuring content and navigation for clarity and ease of use",
skills: ["Site Mapping", "User Flows", "Content Strategy", "Navigation Design", "Information Hierarchy"]
description:
"Structuring content and navigation for clarity and ease of use",
skills: [
"Site Mapping",
"User Flows",
"Content Strategy",
"Navigation Design",
"Information Hierarchy",
],
},
{
category: "Wireframing & Prototyping",
description: "Creating low-fidelity wireframes and interactive prototypes to visualize user flows",
skills: ["Wireframing", "Interactive Prototypes", "Paper Prototyping", "Digital Mockups", "Flow Diagrams"]
description:
"Creating low-fidelity wireframes and interactive prototypes to visualize user flows",
skills: [
"Wireframing",
"Interactive Prototypes",
"Paper Prototyping",
"Digital Mockups",
"Flow Diagrams",
],
},
{
category: "User Interface (UI) Design",
description: "Designing aesthetic and consistent visual elements, including typography, color palettes, iconography, and layouts",
skills: ["Visual Design", "Typography", "Color Theory", "Iconography", "Layout Design", "Brand Consistency"]
description:
"Designing aesthetic and consistent visual elements, including typography, color palettes, iconography, and layouts",
skills: [
"Visual Design",
"Typography",
"Color Theory",
"Iconography",
"Layout Design",
"Brand Consistency",
],
},
{
category: "User Experience (UX) Design",
description: "Focusing on the entire user journey, ensuring efficiency, satisfaction, and accessibility",
skills: ["Journey Mapping", "Interaction Design", "Accessibility (WCAG)", "User Psychology", "Experience Strategy"]
description:
"Focusing on the entire user journey, ensuring efficiency, satisfaction, and accessibility",
skills: [
"Journey Mapping",
"Interaction Design",
"Accessibility (WCAG)",
"User Psychology",
"Experience Strategy",
],
},
{
category: "Design Systems",
description: "Developing scalable design systems for consistency across products",
skills: ["Component Libraries", "Style Guides", "Design Tokens", "Pattern Libraries", "Brand Guidelines"]
}
description:
"Developing scalable design systems for consistency across products",
skills: [
"Component Libraries",
"Style Guides",
"Design Tokens",
"Pattern Libraries",
"Brand Guidelines",
],
},
];
const deliverables = [
{
icon: Users,
title: "User-Centric Designs",
description: "Solutions tailored to your target audience's needs and behaviors."
description:
"Solutions tailored to your target audience's needs and behaviors.",
},
{
icon: Target,
title: "Enhanced User Satisfaction",
description: "Intuitive interfaces that make products easy and enjoyable to use."
description:
"Intuitive interfaces that make products easy and enjoyable to use.",
},
{
icon: Eye,
title: "Increased Engagement & Conversion",
description: "Designs optimized to achieve your business goals."
description: "Designs optimized to achieve your business goals.",
},
{
icon: Palette,
title: "Brand Consistency",
description: "Visuals that align with your brand identity."
description: "Visuals that align with your brand identity.",
},
{
icon: CheckCircle,
title: "Accessibility Compliance",
description: "Designs that are inclusive and usable by individuals with diverse abilities."
}
description:
"Designs that are inclusive and usable by individuals with diverse abilities.",
},
];
const projectTypes = [
@@ -73,41 +131,49 @@ export const HireUIUXDesigners = () => {
"Website & Mobile App Redesigns",
"SaaS Platforms & Enterprise Solutions",
"Interactive Dashboards",
"E-commerce User Journeys"
"E-commerce User Journeys",
];
const designTools = [
{
category: "Design Tools",
tools: ["Figma", "Sketch", "Adobe XD", "Adobe Creative Suite", "InVision"]
tools: [
"Figma",
"Sketch",
"Adobe XD",
"Adobe Creative Suite",
"InVision",
],
},
{
category: "Prototyping",
tools: ["Principle", "Framer", "ProtoPie", "Marvel", "Axure RP"]
tools: ["Principle", "Framer", "ProtoPie", "Marvel", "Axure RP"],
},
{
category: "Research Tools",
tools: ["Miro", "Hotjar", "UserTesting", "Optimal Workshop", "Maze"]
tools: ["Miro", "Hotjar", "UserTesting", "Optimal Workshop", "Maze"],
},
{
category: "Collaboration",
tools: ["Slack", "Notion", "Confluence", "Zeplin", "Abstract"]
}
tools: ["Slack", "Notion", "Confluence", "Zeplin", "Abstract"],
},
];
const testimonials = [
{
quote: "Our UI/UX designer from WDI completely transformed our user experience. User engagement increased by 150% and our conversion rates doubled after the redesign.",
quote:
"Our UI/UX designer from WDI completely transformed our user experience. User engagement increased by 150% and our conversion rates doubled after the redesign.",
author: "Rachel Green",
role: "Product Manager, InnovateTech",
rating: 5
rating: 5,
},
{
quote: "The design system they created streamlined our entire design process. Now our whole team can work efficiently with consistent, beautiful designs.",
quote:
"The design system they created streamlined our entire design process. Now our whole team can work efficiently with consistent, beautiful designs.",
author: "Mark Davis",
role: "Design Director, CreativeFlow",
rating: 5
}
rating: 5,
},
];
return (
@@ -121,30 +187,43 @@ export const HireUIUXDesigners = () => {
className="absolute inset-0 opacity-30"
style={{
backgroundImage: `radial-gradient(circle at 1px 1px, rgba(255,255,255,0.15) 1px, transparent 0)`,
backgroundSize: '40px 40px'
backgroundSize: "40px 40px",
}}
/>
<div className="relative container mx-auto px-6 lg:px-8">
<div className="max-w-4xl mx-auto text-center">
<Badge variant="outline" className="mb-6 border-[#E5195E]/20 text-[#E5195E]">
<Badge
variant="outline"
className="mb-6 border-[#E5195E]/20 text-[#E5195E]"
>
Creating Intuitive & Beautiful Digital Experiences
</Badge>
<h1 className="text-4xl md:text-6xl lg:text-7xl font-bold mb-6 bg-gradient-to-r from-white via-white to-white/80 bg-clip-text text-transparent">
Hire UI/UX Designers: Crafting Intuitive & Beautiful
<span className="bg-gradient-to-r from-[#E5195E] to-[#FF6B9D] bg-clip-text text-transparent"> Digital Experiences</span>
<span className="bg-gradient-to-r from-[#E5195E] to-[#FF6B9D] bg-clip-text text-transparent">
{" "}
Digital Experiences
</span>
</h1>
<p className="text-lg md:text-xl text-muted-foreground mb-8 max-w-3xl mx-auto leading-relaxed">
Exceptional user experience (UX) and captivating user interface (UI) are the cornerstones of successful digital products. WDI connects you with talented UI/UX designers who blend creativity with user psychology.
Exceptional user experience (UX) and captivating user interface
(UI) are the cornerstones of successful digital products. WDI
connects you with talented UI/UX designers who blend creativity
with user psychology.
</p>
<div className="flex flex-col sm:flex-row gap-4 justify-center">
<Button size="lg" className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white">
<Button
size="lg"
className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
onClick={() => navigateTo("/start-a-project")}
>
Transform Your User Experience
<ArrowRight className="ml-2 w-4 h-4" />
</Button>
<Button size="lg" variant="outline" className="border-white/20 text-white hover:bg-white/10">
{/* <Button size="lg" variant="outline" className="border-white/20 text-white hover:bg-white/10">
View Design Portfolios
</Button>
</Button> */}
</div>
</div>
</div>
@@ -155,7 +234,10 @@ export const HireUIUXDesigners = () => {
<div className="container mx-auto px-6 lg:px-8">
<div className="max-w-4xl mx-auto text-center">
<p className="text-lg text-muted-foreground leading-relaxed">
Our designers deliver interfaces that are not only visually stunning but also highly intuitive, accessible, and enjoyable to use. We create experiences that users love and that drive business success.
Our designers deliver interfaces that are not only visually
stunning but also highly intuitive, accessible, and enjoyable to
use. We create experiences that users love and that drive business
success.
</p>
</div>
</div>
@@ -169,13 +251,17 @@ export const HireUIUXDesigners = () => {
Design Tools & Technologies
</h2>
<p className="text-muted-foreground max-w-2xl mx-auto">
Our designers are proficient in the latest design tools and methodologies
Our designers are proficient in the latest design tools and
methodologies
</p>
</div>
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
{designTools.map((category, index) => (
<Card key={index} className="bg-card/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300 group">
<Card
key={index}
className="bg-card/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300 group"
>
<CardContent className="p-6">
<h3 className="text-lg font-semibold text-white mb-4 group-hover:text-[#E5195E] transition-colors duration-300">
{category.category}
@@ -185,7 +271,9 @@ export const HireUIUXDesigners = () => {
{category.tools.map((tool, toolIndex) => (
<div key={toolIndex} className="flex items-center gap-2">
<div className="w-2 h-2 rounded-full bg-[#E5195E]" />
<span className="text-muted-foreground text-sm">{tool}</span>
<span className="text-muted-foreground text-sm">
{tool}
</span>
</div>
))}
</div>
@@ -204,13 +292,17 @@ export const HireUIUXDesigners = () => {
Our UI/UX Design Expertise
</h2>
<p className="text-muted-foreground max-w-2xl mx-auto">
Comprehensive design skills for creating exceptional user experiences
Comprehensive design skills for creating exceptional user
experiences
</p>
</div>
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
{expertise.map((area, index) => (
<Card key={index} className="bg-background/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300 group">
<Card
key={index}
className="bg-background/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300 group"
>
<CardContent className="p-6">
<h3 className="text-lg font-semibold text-white mb-3 group-hover:text-[#E5195E] transition-colors duration-300">
{area.category}
@@ -224,7 +316,9 @@ export const HireUIUXDesigners = () => {
{area.skills.map((skill, skillIndex) => (
<div key={skillIndex} className="flex items-center gap-2">
<div className="w-1.5 h-1.5 rounded-full bg-[#E5195E]" />
<span className="text-muted-foreground text-xs">{skill}</span>
<span className="text-muted-foreground text-xs">
{skill}
</span>
</div>
))}
</div>
@@ -249,7 +343,10 @@ export const HireUIUXDesigners = () => {
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto">
{deliverables.map((item, index) => (
<Card key={index} className="bg-card/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300 group">
<Card
key={index}
className="bg-card/50 border-white/10 hover:border-[#E5195E]/30 transition-all duration-300 group"
>
<CardContent className="p-6 text-center">
<item.icon className="w-8 h-8 text-[#E5195E] mb-4 mx-auto group-hover:scale-110 transition-transform duration-300" />
<h3 className="text-lg font-semibold text-white mb-3 group-hover:text-[#E5195E] transition-colors duration-300">
@@ -279,7 +376,10 @@ export const HireUIUXDesigners = () => {
<div className="grid md:grid-cols-2 gap-6 max-w-3xl mx-auto">
{projectTypes.map((project, index) => (
<div key={index} className="flex items-center gap-3 p-4 rounded-lg bg-background/50 border border-white/10 hover:border-[#E5195E]/30 transition-all duration-300">
<div
key={index}
className="flex items-center gap-3 p-4 rounded-lg bg-background/50 border border-white/10 hover:border-[#E5195E]/30 transition-all duration-300"
>
<CheckCircle className="w-5 h-5 text-[#E5195E] flex-shrink-0" />
<span className="text-white">{project}</span>
</div>
@@ -306,7 +406,10 @@ export const HireUIUXDesigners = () => {
<CardContent className="p-8">
<div className="flex gap-1 mb-4">
{[...Array(testimonial.rating)].map((_, i) => (
<Star key={i} className="w-5 h-5 text-yellow-400 fill-current" />
<Star
key={i}
className="w-5 h-5 text-yellow-400 fill-current"
/>
))}
</div>
@@ -315,7 +418,9 @@ export const HireUIUXDesigners = () => {
</p>
<div className="border-t border-white/10 pt-6">
<h4 className="text-white font-semibold">{testimonial.author}</h4>
<h4 className="text-white font-semibold">
{testimonial.author}
</h4>
<p className="text-[#E5195E] text-sm">{testimonial.role}</p>
</div>
</CardContent>
@@ -333,14 +438,22 @@ export const HireUIUXDesigners = () => {
Ready to Create Exceptional User Experiences?
</h2>
<p className="text-lg text-muted-foreground mb-8 max-w-2xl mx-auto">
Connect with our UI/UX designers and transform your digital products into engaging user experiences.
Connect with our UI/UX designers and transform your digital
products into engaging user experiences.
</p>
<div className="flex flex-col sm:flex-row gap-4 justify-center">
<Button size="lg" className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white">
<Button
size="lg"
className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
>
Start Your Design Journey
<ArrowRight className="ml-2 w-4 h-4" />
</Button>
<Button size="lg" variant="outline" className="border-white/20 text-white hover:bg-white/10">
<Button
size="lg"
variant="outline"
className="border-white/20 text-white hover:bg-white/10"
>
Portfolio Review
</Button>
</div>

185
pages/LeadershipTeam.tsx
View File

@@ -3,82 +3,47 @@ import { Navigation } from "../components/Navigation";
import { Footer } from "../components/Footer";
import { Button } from "../components/ui/button";
import { Badge } from "../components/ui/badge";
import { ArrowRight, Linkedin, Twitter, Mail } from "lucide-react";
import { ArrowRight, Linkedin, Mail } from "lucide-react";
import { navigateTo } from "@/App";
import riteshImage from "../src/images/ritesh-pandey.png";
import manavImage from "../src/images/manav-sain.png";
import sudhirImage from "../src/images/sudhir-malya.png";
import kartikeyImage from "../src/images/kartikeya-gautam.png";
import poojaImage from "../src/images/pooja-patade.png";
import tanveerImage from "../src/images/tanveer-ajani.png";
export const LeadershipTeam = () => {
const leaders = [
{
name: "Sarah Chen",
position: "Chief Executive Officer",
bio: "With 15+ years in tech leadership, Sarah drives WDI's vision for digital innovation and global expansion.",
experience: "Former VP at Microsoft, Stanford MBA",
image: "https://images.unsplash.com/photo-1494790108755-2616b612b786?auto=format&fit=crop&q=80&w=400&h=400",
social: {
linkedin: "#",
twitter: "#",
email: "sarah@wdi.com"
}
name: "Ritesh Pandey",
position: "Founder & CEO",
image: riteshImage,
},
{
name: "Michael Rodriguez",
position: "Chief Technology Officer",
bio: "Michael leads our technical strategy and ensures we stay at the forefront of emerging technologies.",
experience: "Former Lead Engineer at Google, MIT Computer Science",
image: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?auto=format&fit=crop&q=80&w=400&h=400",
social: {
linkedin: "#",
twitter: "#",
email: "michael@wdi.com"
}
name: "Manav Sain",
position: "VP- Business Solutions",
image: manavImage,
},
{
name: "Emily Watson",
position: "Chief Operating Officer",
bio: "Emily oversees global operations and ensures seamless delivery across all our international projects.",
experience: "Former Operations Director at Amazon, Harvard Business School",
image: "https://images.unsplash.com/photo-1580489944761-15a19d654956?auto=format&fit=crop&q=80&w=400&h=400",
social: {
linkedin: "#",
twitter: "#",
email: "emily@wdi.com"
}
name: "Sudhir Mallya",
position: "CTO",
image: sudhirImage,
},
{
name: "David Kumar",
position: "Head of AI & Machine Learning",
bio: "David leads our AI initiatives and ensures we deliver cutting-edge machine learning solutions.",
experience: "Former AI Research Scientist at Tesla, PhD in Computer Science",
image: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&q=80&w=400&h=400",
social: {
linkedin: "#",
twitter: "#",
email: "david@wdi.com"
}
name: "Kartikey Gautam",
position: "Product Manager",
image: kartikeyImage,
},
{
name: "Lisa Thompson",
position: "VP of Design & User Experience",
bio: "Lisa ensures our solutions are not just functional but also provide exceptional user experiences.",
experience: "Former Design Lead at Apple, RISD Design Graduate",
image: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?auto=format&fit=crop&q=80&w=400&h=400",
social: {
linkedin: "#",
twitter: "#",
email: "lisa@wdi.com"
}
name: "Pooja Patade",
position: "Head - Accounts & HR",
image: poojaImage,
},
{
name: "James Park",
position: "VP of Business Development",
bio: "James drives our global partnerships and expansion into new markets and industries.",
experience: "Former BD Director at Salesforce, Wharton MBA",
image: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&q=80&w=400&h=400",
social: {
linkedin: "#",
twitter: "#",
email: "james@wdi.com"
}
}
name: "Tanveer Ajani",
position: "Compliance Head",
image: tanveerImage,
},
];
return (
@@ -92,21 +57,29 @@ export const LeadershipTeam = () => {
className="absolute inset-0 opacity-30"
style={{
backgroundImage: `radial-gradient(circle at 1px 1px, rgba(255,255,255,0.15) 1px, transparent 0)`,
backgroundSize: '40px 40px'
backgroundSize: "40px 40px",
}}
/>
<div className="relative container mx-auto px-6 lg:px-8">
<div className="max-w-4xl mx-auto text-center">
<Badge variant="outline" className="mb-6 border-[#E5195E]/20 text-[#E5195E]">
<Badge
variant="outline"
className="mb-6 border-[#E5195E]/20 text-[#E5195E]"
>
Leadership Team
</Badge>
<h1 className="text-4xl md:text-6xl lg:text-7xl font-bold mb-6 bg-gradient-to-r from-white via-white to-white/80 bg-clip-text text-transparent">
Meet the Visionaries Behind
<span className="bg-gradient-to-r from-[#E5195E] to-[#FF6B9D] bg-clip-text text-transparent"> WDI</span>
<span className="bg-gradient-to-r from-[#E5195E] to-[#FF6B9D] bg-clip-text text-transparent">
{" "}
WDI
</span>
</h1>
<p className="text-lg md:text-xl text-muted-foreground mb-8 max-w-3xl mx-auto leading-relaxed">
Our leadership team combines decades of experience from top tech companies with a shared passion for digital innovation and client success.
Our leadership team combines decades of experience from top tech
companies with a shared passion for digital innovation and client
success.
</p>
</div>
</div>
@@ -141,38 +114,6 @@ export const LeadershipTeam = () => {
{leader.position}
</p>
</div>
<p className="text-muted-foreground text-sm leading-relaxed">
{leader.bio}
</p>
<div className="pt-2 border-t border-white/10">
<p className="text-xs text-muted-foreground mb-3">
{leader.experience}
</p>
{/* Social Links */}
<div className="flex gap-3">
<a
href={leader.social.linkedin}
className="w-8 h-8 rounded-lg bg-white/10 hover:bg-[#E5195E]/20 flex items-center justify-center transition-colors duration-200"
>
<Linkedin className="w-4 h-4 text-white" />
</a>
<a
href={leader.social.twitter}
className="w-8 h-8 rounded-lg bg-white/10 hover:bg-[#E5195E]/20 flex items-center justify-center transition-colors duration-200"
>
<Twitter className="w-4 h-4 text-white" />
</a>
<a
href={`mailto:${leader.social.email}`}
className="w-8 h-8 rounded-lg bg-white/10 hover:bg-[#E5195E]/20 flex items-center justify-center transition-colors duration-200"
>
<Mail className="w-4 h-4 text-white" />
</a>
</div>
</div>
</div>
</div>
</div>
@@ -182,14 +123,15 @@ export const LeadershipTeam = () => {
</section>
{/* Advisory Board */}
<section className="py-16 bg-card/50">
{/* <section className="py-16 bg-card/50">
<div className="container mx-auto px-6 lg:px-8">
<div className="text-center mb-12">
<h2 className="text-3xl md:text-4xl font-bold mb-4 text-white">
Advisory Board
</h2>
<p className="text-muted-foreground max-w-2xl mx-auto">
Industry experts who guide our strategic direction and innovation initiatives
Industry experts who guide our strategic direction and innovation
initiatives
</p>
</div>
@@ -198,33 +140,43 @@ export const LeadershipTeam = () => {
{
name: "Dr. Alan Foster",
title: "Former CTO, Meta",
expertise: "AI & Emerging Technologies"
expertise: "AI & Emerging Technologies",
},
{
name: "Maria Santos",
title: "Former VP, Netflix",
expertise: "Product Strategy & Growth"
expertise: "Product Strategy & Growth",
},
{
name: "Robert Kim",
title: "Former Director, Amazon",
expertise: "Cloud Infrastructure & Scalability"
}
expertise: "Cloud Infrastructure & Scalability",
},
].map((advisor, index) => (
<div key={index} className="text-center p-6 rounded-2xl bg-background/50 border border-white/10">
<div
key={index}
className="text-center p-6 rounded-2xl bg-background/50 border border-white/10"
>
<div className="w-16 h-16 rounded-full bg-gradient-to-br from-[#E5195E]/20 to-[#FF6B9D]/20 mx-auto mb-4 flex items-center justify-center">
<span className="text-2xl font-bold text-[#E5195E]">
{advisor.name.split(' ').map(n => n[0]).join('')}
{advisor.name
.split(" ")
.map((n) => n[0])
.join("")}
</span>
</div>
<h3 className="text-lg font-semibold text-white mb-1">{advisor.name}</h3>
<h3 className="text-lg font-semibold text-white mb-1">
{advisor.name}
</h3>
<p className="text-sm text-[#E5195E] mb-2">{advisor.title}</p>
<p className="text-xs text-muted-foreground">{advisor.expertise}</p>
<p className="text-xs text-muted-foreground">
{advisor.expertise}
</p>
</div>
))}
</div>
</div>
</section>
</section> */}
{/* CTA Section */}
<section className="py-16 bg-background">
@@ -234,14 +186,23 @@ export const LeadershipTeam = () => {
Want to Work with Our Team?
</h2>
<p className="text-lg text-muted-foreground mb-8 max-w-2xl mx-auto">
Join our growing team of innovators or partner with us to transform your business
Join our growing team of innovators or partner with us to
transform your business
</p>
<div className="flex flex-col sm:flex-row gap-4 justify-center">
<Button size="lg" className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white">
<Button
size="lg"
className="bg-[#E5195E] hover:bg-[#E5195E]/90 text-white"
>
Explore Careers
<ArrowRight className="ml-2 w-4 h-4" />
</Button>
<Button size="lg" variant="outline" className="border-white/20 text-white hover:bg-white/10">
<Button
size="lg"
variant="outline"
className="border-white/20 text-white hover:bg-white/10"
onClick={() => navigateTo("/start-a-project")}
>
Start a Project
</Button>
</div>

17
pages/NativeAppDevelopment.tsx
View File

@@ -105,6 +105,7 @@ import {
Briefcase,
Microscope,
} from "lucide-react";
import { navigateTo } from "@/App";
// Native App Development Hero Section
const NativeHeroWithCTA = () => {
@@ -149,7 +150,10 @@ const NativeHeroWithCTA = () => {
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">
<Gauge className="w-5 h-5 flex-shrink-0" />
<span>Discover Native Advantages</span>
@@ -160,7 +164,7 @@ const NativeHeroWithCTA = () => {
className="inline-flex items-center justify-center gap-2 rounded-md bg-gray-800 px-8 py-4 text-lg font-medium text-white transition hover:bg-gray-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-700 whitespace-nowrap"
>
<MessageSquare className="w-4 h-4 flex-shrink-0" />
<span>Request a Native App Consultation</span>
<span>Request Consultation</span>
</a>
</motion.div>
</motion.div>
@@ -1038,7 +1042,10 @@ const NativeInlineCTA = () => {
deliver uncompromising performance and user experience.
</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>Discuss Your Native App Project</span>
@@ -1322,7 +1329,9 @@ const NativeFinalCTA = () => {
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 Native App Journey</span>

120
pages/PWADevelopment.tsx
View File

@@ -31,7 +31,7 @@ import {
Users,
Wifi,
WifiOff,
Zap
Zap,
} from "lucide-react";
import { ImageWithFallback } from "../components/figma/ImageWithFallback";
import { Footer } from "../components/Footer";
@@ -93,7 +93,10 @@ const PWAHeroWithCTA = () => {
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">
<Globe className="w-5 h-5 flex-shrink-0" />
<span>Explore PWA Benefits</span>
@@ -882,18 +885,24 @@ const PWASuccessStories = () => {
client: "TradersCircuit",
subtitle: "Investment Platform PWA with Real-Time Trading",
industry: "FinTech",
services: ["PWA Development", "Real-Time Trading", "Service Workers", "Push Notifications"],
services: [
"PWA Development",
"Real-Time Trading",
"Service Workers",
"Push Notifications",
],
technologies: ["React", "Service Workers", "WebSocket", "Push API"],
image: tradersCircuitImage,
results: [
"90% faster load times vs native",
"Offline trading capabilities",
"85% home screen installation rate",
"Real-time push notifications"
"Real-time push notifications",
],
description: "Handcrafted PWA investment platform delivering native-like trading experience with offline capabilities, push notifications, and blazing-fast performance for the Indian market.",
description:
"Handcrafted PWA investment platform delivering native-like trading experience with offline capabilities, push notifications, and blazing-fast performance for the Indian market.",
duration: "8 months",
teamSize: "12 experts"
teamSize: "12 experts",
},
{
id: 2,
@@ -901,18 +910,24 @@ const PWASuccessStories = () => {
client: "Prosperty Infra",
subtitle: "Digital Real Estate PWA Platform",
industry: "Real Estate",
services: ["PWA Development", "Property Listings", "Offline Browsing", "Investment Tools"],
services: [
"PWA Development",
"Property Listings",
"Offline Browsing",
"Investment Tools",
],
technologies: ["Vue.js", "Workbox", "IndexedDB", "Web Push"],
image: prospertyImage,
results: [
"73% installation rate success",
"38% reduction in bounce rate",
"52% increase in property inquiries",
"Full offline property browsing"
"Full offline property browsing",
],
description: "Comprehensive PWA real estate platform enabling seamless property listings, investment opportunities, and post-sale services with full offline functionality and instant loading.",
description:
"Comprehensive PWA real estate platform enabling seamless property listings, investment opportunities, and post-sale services with full offline functionality and instant loading.",
duration: "6 months",
teamSize: "10 experts"
teamSize: "10 experts",
},
{
id: 3,
@@ -920,26 +935,37 @@ const PWASuccessStories = () => {
client: "GoodTimes Ltd",
subtitle: "Event Discovery & Booking PWA Platform",
industry: "Events & Lifestyle",
services: ["PWA Development", "Event Booking", "Social Features", "Payment Integration"],
technologies: ["Angular", "Service Workers", "Web Share API", "Payment Request"],
services: [
"PWA Development",
"Event Booking",
"Social Features",
"Payment Integration",
],
technologies: [
"Angular",
"Service Workers",
"Web Share API",
"Payment Request",
],
image: goodTimesImage,
results: [
"92% mobile user engagement",
"30-second booking process",
"67% increase in repeat users",
"Cross-platform compatibility"
"Cross-platform compatibility",
],
description: "Feature-rich PWA event discovery platform providing seamless booking experiences, social sharing, and offline ticket storage that works flawlessly across all devices.",
description:
"Feature-rich PWA event discovery platform providing seamless booking experiences, social sharing, and offline ticket storage that works flawlessly across all devices.",
duration: "5 months",
teamSize: "9 experts"
}
teamSize: "9 experts",
},
];
const getIndustryIcon = (industry: string) => {
const icons = {
"FinTech": Building,
FinTech: Building,
"Real Estate": Building,
"Events & Lifestyle": Calendar
"Events & Lifestyle": Calendar,
};
return icons[industry as keyof typeof icons] || Building;
};
@@ -958,7 +984,9 @@ const PWASuccessStories = () => {
Successful Progressive Web Apps by WDI
</h2>
<p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
See how we've transformed businesses with PWA solutions that deliver exceptional user experiences, offline capabilities, and measurable results across industries.
See how we've transformed businesses with PWA solutions that deliver
exceptional user experiences, offline capabilities, and measurable
results across industries.
</p>
</motion.div>
@@ -975,12 +1003,12 @@ const PWASuccessStories = () => {
whileHover={{ y: -5 }}
className="group cursor-pointer"
onClick={() => {
if (study.title === 'TradersCircuit') {
navigateTo('/projects/traderscircuit');
} else if (study.title === 'Prosperty') {
navigateTo('/projects/prosperty');
} else if (study.title === 'GoodTimes') {
navigateTo('/projects/goodtimes');
if (study.title === "TradersCircuit") {
navigateTo("/projects/traderscircuit");
} else if (study.title === "Prosperty") {
navigateTo("/projects/prosperty");
} else if (study.title === "GoodTimes") {
navigateTo("/projects/goodtimes");
}
}}
>
@@ -996,7 +1024,10 @@ const PWASuccessStories = () => {
<CardContent className="p-6">
<div className="flex items-center gap-2 mb-3">
<IndustryIcon className="w-4 h-4 text-accent" />
<Badge variant="secondary" className="bg-accent/20 text-accent border-none">
<Badge
variant="secondary"
className="bg-accent/20 text-accent border-none"
>
{study.industry}
</Badge>
</div>
@@ -1006,12 +1037,18 @@ const PWASuccessStories = () => {
</h3>
<p className="text-sm text-gray-400 mb-3">{study.client}</p>
<p className="text-gray-300 mb-4 line-clamp-3 text-sm">{study.description}</p>
<p className="text-gray-300 mb-4 line-clamp-3 text-sm">
{study.description}
</p>
<div className="space-y-3 mb-4">
<div className="flex flex-wrap gap-1">
{study.services.slice(0, 3).map((service) => (
<Badge key={service} variant="outline" className="border-gray-600 text-gray-300 text-xs">
<Badge
key={service}
variant="outline"
className="border-gray-600 text-gray-300 text-xs"
>
{service}
</Badge>
))}
@@ -1020,7 +1057,10 @@ const PWASuccessStories = () => {
<div className="space-y-2 mb-4">
{study.results.slice(0, 2).map((result, resultIndex) => (
<div key={resultIndex} className="flex items-center gap-2">
<div
key={resultIndex}
className="flex items-center gap-2"
>
<TrendingUp className="w-3 h-3 text-accent flex-shrink-0" />
<p className="text-xs text-gray-400">{result}</p>
</div>
@@ -1044,12 +1084,12 @@ const PWASuccessStories = () => {
className="text-accent hover:bg-accent/10 p-0"
onClick={(e) => {
e.stopPropagation();
if (study.title === 'TradersCircuit') {
navigateTo('/projects/traderscircuit');
} else if (study.title === 'Prosperty') {
navigateTo('/projects/prosperty');
} else if (study.title === 'GoodTimes') {
navigateTo('/projects/goodtimes');
if (study.title === "TradersCircuit") {
navigateTo("/projects/traderscircuit");
} else if (study.title === "Prosperty") {
navigateTo("/projects/prosperty");
} else if (study.title === "GoodTimes") {
navigateTo("/projects/goodtimes");
}
}}
>
@@ -1106,7 +1146,10 @@ const PWAInlineCTA = () => {
progressive web app that works everywhere.
</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">
<Eye className="w-6 h-6 flex-shrink-0" />
<span>Get a Free PWA Assessment</span>
@@ -1245,7 +1288,10 @@ const PWAFinalCTA = () => {
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 PWA Project</span>

527
pages/SaaSProductEngineering.tsx
View File

@@ -23,16 +23,23 @@ import {
Target,
TrendingUp,
Users,
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 { navigateTo } from "@/App";
import awsLogo from "../src/images/aws-logo.png";
// SaaS Product Engineering Hero Section
const SaaSHeroWithCTA = () => {
@@ -52,7 +59,9 @@ const SaaSHeroWithCTA = () => {
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 */}
@@ -62,7 +71,9 @@ const SaaSHeroWithCTA = () => {
</h1>
<p className="text-lg text-gray-300 leading-relaxed max-w-lg">
From ideation to scalable deployment, WDI specializes in engineering robust, multi-tenant SaaS products that drive recurring revenue.
From ideation to scalable deployment, WDI specializes in
engineering robust, multi-tenant SaaS products that drive
recurring revenue.
</p>
</div>
@@ -73,7 +84,10 @@ const SaaSHeroWithCTA = () => {
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">
<Rocket className="w-5 h-5 flex-shrink-0" />
<span>Launch Your SaaS Product</span>
@@ -81,7 +95,7 @@ const SaaSHeroWithCTA = () => {
</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"
className="inline-flex items-center justify-center gap-2 rounded-md bg-gray-800 px-6 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 SaaS Portfolio</span>
@@ -108,7 +122,9 @@ const SaaSHeroWithCTA = () => {
<div className="relative mx-auto w-40 h-32 bg-gradient-to-br from-accent to-purple-600 rounded-2xl border border-accent/30 shadow-2xl flex items-center justify-center mb-8">
<div className="text-center">
<Cloud className="w-10 h-10 text-white mx-auto mb-2" />
<div className="text-white text-sm font-medium">SaaS Platform</div>
<div className="text-white text-sm font-medium">
SaaS Platform
</div>
</div>
{/* Pulse Animation */}
@@ -175,17 +191,59 @@ const SaaSHeroWithCTA = () => {
</div>
{/* Connection Lines */}
<svg className="absolute inset-0 w-full h-full pointer-events-none" style={{top: '-20px', width: '100%', height: '320px'}}>
<svg
className="absolute inset-0 w-full h-full pointer-events-none"
style={{ top: "-20px", width: "100%", height: "320px" }}
>
<g className="opacity-30">
{/* Lines from SaaS Platform to Tenants */}
<line x1="160" y1="80" x2="80" y2="140" stroke="#E5195E" strokeWidth="2" strokeDasharray="4,4">
<animate attributeName="stroke-dashoffset" values="0;-8" dur="2s" repeatCount="indefinite" />
<line
x1="160"
y1="80"
x2="80"
y2="140"
stroke="#E5195E"
strokeWidth="2"
strokeDasharray="4,4"
>
<animate
attributeName="stroke-dashoffset"
values="0;-8"
dur="2s"
repeatCount="indefinite"
/>
</line>
<line x1="160" y1="80" x2="160" y2="140" stroke="#E5195E" strokeWidth="2" strokeDasharray="4,4">
<animate attributeName="stroke-dashoffset" values="0;-8" dur="2.5s" repeatCount="indefinite" />
<line
x1="160"
y1="80"
x2="160"
y2="140"
stroke="#E5195E"
strokeWidth="2"
strokeDasharray="4,4"
>
<animate
attributeName="stroke-dashoffset"
values="0;-8"
dur="2.5s"
repeatCount="indefinite"
/>
</line>
<line x1="160" y1="80" x2="240" y2="140" stroke="#E5195E" strokeWidth="2" strokeDasharray="4,4">
<animate attributeName="stroke-dashoffset" values="0;-8" dur="3s" repeatCount="indefinite" />
<line
x1="160"
y1="80"
x2="240"
y2="140"
stroke="#E5195E"
strokeWidth="2"
strokeDasharray="4,4"
>
<animate
attributeName="stroke-dashoffset"
values="0;-8"
dur="3s"
repeatCount="indefinite"
/>
</line>
</g>
</svg>
@@ -198,15 +256,24 @@ const SaaSHeroWithCTA = () => {
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"
>
<CloudLightning className="w-3 h-3 mr-1" />
Multi-Tenant
</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"
>
<TrendingUp className="w-3 h-3 mr-1" />
Scalable
</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"
>
<Shield className="w-3 h-3 mr-1" />
Secure
</Badge>
@@ -225,28 +292,30 @@ const SaaSBenefits = () => {
{
icon: TrendingUp,
title: "Scalability for Growth",
description: "Architected for exponential user growth and feature expansion."
description:
"Architected for exponential user growth and feature expansion.",
},
{
icon: DollarSign,
title: "Cost Efficiency & ROI",
description: "Optimized development for lower TCO and higher profitability."
description:
"Optimized development for lower TCO and higher profitability.",
},
{
icon: Shield,
title: "Secure Multi-Tenancy",
description: "Robust solutions for isolating customer data securely."
description: "Robust solutions for isolating customer data securely.",
},
{
icon: Zap,
title: "Rapid Feature Delivery",
description: "Agile methodologies for continuous innovation."
description: "Agile methodologies for continuous innovation.",
},
{
icon: Network,
title: "Seamless Integrations",
description: "Expertise in connecting with other platforms and APIs."
}
description: "Expertise in connecting with other platforms and APIs.",
},
];
return (
@@ -348,34 +417,40 @@ const SaaSProcess = () => {
const steps = [
{
title: "Ideation & Market Validation",
description: "Research-driven validation of your SaaS concept with competitive analysis and market opportunity assessment.",
icon: Lightbulb
description:
"Research-driven validation of your SaaS concept with competitive analysis and market opportunity assessment.",
icon: Lightbulb,
},
{
title: "Product Strategy & MVP Definition",
description: "Strategic planning to define core features, user personas, and minimum viable product scope for rapid market entry.",
icon: Target
description:
"Strategic planning to define core features, user personas, and minimum viable product scope for rapid market entry.",
icon: Target,
},
{
title: "Architecture & Design",
description: "Scalable cloud architecture design with multi-tenant considerations, security frameworks, and technology selection.",
icon: Layout
description:
"Scalable cloud architecture design with multi-tenant considerations, security frameworks, and technology selection.",
icon: Layout,
},
{
title: "Development & Iteration",
description: "Agile development sprints with continuous integration, regular demos, and iterative feature refinement.",
icon: Code
description:
"Agile development sprints with continuous integration, regular demos, and iterative feature refinement.",
icon: Code,
},
{
title: "Deployment & DevOps",
description: "Automated deployment pipelines, monitoring systems, and scalable infrastructure management.",
icon: Rocket
description:
"Automated deployment pipelines, monitoring systems, and scalable infrastructure management.",
icon: Rocket,
},
{
title: "Growth & Optimization",
description: "Performance optimization, feature expansion, and scaling strategies based on user feedback and analytics.",
icon: TrendingUp
}
description:
"Performance optimization, feature expansion, and scaling strategies based on user feedback and analytics.",
icon: TrendingUp,
},
];
return (
@@ -409,15 +484,23 @@ const SaaSProcess = () => {
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}
@@ -449,44 +532,79 @@ const SaaSServices = () => {
title: "SaaS MVP Development",
description: "Rapidly launch and validate your core idea.",
icon: Rocket,
features: ["Core Feature Set", "User Authentication", "Basic Analytics", "Payment Integration"]
features: [
"Core Feature Set",
"User Authentication",
"Basic Analytics",
"Payment Integration",
],
},
{
title: "Full-Cycle SaaS Product Development",
description: "End-to-end engineering from scratch.",
icon: Code,
features: ["Complete Development", "Advanced Features", "Integrations", "Scaling Support"]
features: [
"Complete Development",
"Advanced Features",
"Integrations",
"Scaling Support",
],
},
{
title: "SaaS Architecture Design",
description: "Scalable, secure, and cost-effective cloud architectures.",
icon: Layout,
features: ["Multi-tenant Architecture", "Microservices", "Cloud Infrastructure", "Security Design"]
features: [
"Multi-tenant Architecture",
"Microservices",
"Cloud Infrastructure",
"Security Design",
],
},
{
title: "Legacy SaaS Modernization",
description: "Re-platforming and upgrading existing SaaS solutions.",
icon: RefreshCcw,
features: ["Platform Migration", "Performance Optimization", "Feature Updates", "Security Enhancement"]
features: [
"Platform Migration",
"Performance Optimization",
"Feature Updates",
"Security Enhancement",
],
},
{
title: "Integrations & APIs",
description: "Building robust APIs and third-party integrations.",
icon: Network,
features: ["RESTful APIs", "Third-party Integrations", "Webhook Systems", "API Documentation"]
features: [
"RESTful APIs",
"Third-party Integrations",
"Webhook Systems",
"API Documentation",
],
},
{
title: "DevOps & Cloud Management",
description: "Automation for continuous delivery and operations.",
icon: CloudCog,
features: ["CI/CD Pipelines", "Infrastructure as Code", "Monitoring", "Auto-scaling"]
features: [
"CI/CD Pipelines",
"Infrastructure as Code",
"Monitoring",
"Auto-scaling",
],
},
{
title: "Data Analytics & Reporting",
description: "Embedding actionable insights into your product.",
icon: BarChart,
features: ["Custom Dashboards", "Real-time Analytics", "Reporting Tools", "Data Visualization"]
}
features: [
"Custom Dashboards",
"Real-time Analytics",
"Reporting Tools",
"Data Visualization",
],
},
];
return (
@@ -535,10 +653,16 @@ const SaaSServices = () => {
{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>
))}
@@ -584,10 +708,16 @@ const SaaSServices = () => {
{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>
))}
@@ -608,40 +738,112 @@ const SaaSServices = () => {
// SaaS Tech Stack
const SaaSTechStack = () => {
const cloudPlatforms = [
{ name: "AWS", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/amazonwebservices/amazonwebservices-original.svg", category: "Cloud Platform" },
{ name: "Azure", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/azure/azure-original.svg", category: "Cloud Platform" },
{ name: "Google Cloud", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/googlecloud/googlecloud-original.svg", category: "Cloud Platform" }
{ name: "AWS", logo: awsLogo, category: "Cloud Platform" },
{
name: "Azure",
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/azure/azure-original.svg",
category: "Cloud Platform",
},
{
name: "Google Cloud",
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/googlecloud/googlecloud-original.svg",
category: "Cloud Platform",
},
];
const containerization = [
{ name: "Docker", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/docker/docker-original.svg", category: "Containerization" },
{ name: "Kubernetes", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/kubernetes/kubernetes-plain.svg", category: "Orchestration" }
{
name: "Docker",
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/docker/docker-original.svg",
category: "Containerization",
},
{
name: "Kubernetes",
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/kubernetes/kubernetes-plain.svg",
category: "Orchestration",
},
];
const backends = [
{ 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: "Ruby", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/ruby/ruby-original.svg", category: "Backend" }
{
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: "Ruby",
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/ruby/ruby-original.svg",
category: "Backend",
},
];
const frontends = [
{ 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: "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",
},
];
const databases = [
{ 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: "Redis", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/redis/redis-original.svg", category: "Cache" }
{
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: "Redis",
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/redis/redis-original.svg",
category: "Cache",
},
];
const specializedTools = [
{ name: "Microservices", icon: Component, description: "Distributed architecture for scalability" },
{ name: "GraphQL", icon: Network, description: "Flexible API query language" },
{ name: "Auto-scaling", icon: TrendingUp, description: "Dynamic resource management" },
{ name: "Multi-tenancy", icon: Users, description: "Isolated customer environments" }
{
name: "Microservices",
icon: Component,
description: "Distributed architecture for scalability",
},
{
name: "GraphQL",
icon: Network,
description: "Flexible API query language",
},
{
name: "Auto-scaling",
icon: TrendingUp,
description: "Dynamic resource management",
},
{
name: "Multi-tenancy",
icon: Users,
description: "Isolated customer environments",
},
];
return (
@@ -658,7 +860,8 @@ const SaaSTechStack = () => {
Building Resilient and High-Performing SaaS Products
</h2>
<p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
With cutting-edge technologies designed for scale, security, and performance.
With cutting-edge technologies designed for scale, security, and
performance.
</p>
</motion.div>
@@ -670,7 +873,9 @@ const SaaSTechStack = () => {
viewport={{ once: true }}
className="mb-16"
>
<h3 className="text-2xl font-semibold text-foreground mb-8 text-center">Cloud Platforms</h3>
<h3 className="text-2xl font-semibold text-foreground mb-8 text-center">
Cloud Platforms
</h3>
<div className="grid grid-cols-3 gap-6 max-w-2xl mx-auto">
{cloudPlatforms.map((tech, index) => (
<motion.div
@@ -690,8 +895,12 @@ const SaaSTechStack = () => {
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>
))}
@@ -709,7 +918,9 @@ const SaaSTechStack = () => {
<div className="grid lg:grid-cols-2 gap-12">
{/* Backend */}
<div>
<h3 className="text-2xl font-semibold text-foreground mb-8 text-center">Backend Technologies</h3>
<h3 className="text-2xl font-semibold text-foreground mb-8 text-center">
Backend Technologies
</h3>
<div className="grid grid-cols-2 gap-4">
{backends.map((tech, index) => (
<motion.div
@@ -729,7 +940,9 @@ const SaaSTechStack = () => {
className="w-8 h-8 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">{tech.name}</h4>
<h4 className="font-semibold text-foreground text-sm">
{tech.name}
</h4>
</Card>
</motion.div>
))}
@@ -738,7 +951,9 @@ const SaaSTechStack = () => {
{/* Frontend */}
<div>
<h3 className="text-2xl font-semibold text-foreground mb-8 text-center">Frontend Technologies</h3>
<h3 className="text-2xl font-semibold text-foreground mb-8 text-center">
Frontend Technologies
</h3>
<div className="grid grid-cols-3 gap-4">
{frontends.map((tech, index) => (
<motion.div
@@ -758,7 +973,9 @@ const SaaSTechStack = () => {
className="w-8 h-8 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">{tech.name}</h4>
<h4 className="font-semibold text-foreground text-sm">
{tech.name}
</h4>
</Card>
</motion.div>
))}
@@ -774,7 +991,9 @@ const SaaSTechStack = () => {
transition={{ duration: 0.8, delay: 0.4 }}
viewport={{ once: true }}
>
<h3 className="text-2xl font-semibold text-foreground mb-8 text-center">Specialized SaaS Technologies</h3>
<h3 className="text-2xl font-semibold text-foreground mb-8 text-center">
Specialized SaaS Technologies
</h3>
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
{specializedTools.map((tool, index) => {
const IconComponent = tool.icon;
@@ -792,8 +1011,12 @@ const SaaSTechStack = () => {
<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">{tool.name}</h4>
<p className="text-sm text-muted-foreground leading-relaxed">{tool.description}</p>
<h4 className="font-semibold text-foreground mb-2">
{tool.name}
</h4>
<p className="text-sm text-muted-foreground leading-relaxed">
{tool.description}
</p>
</Card>
</motion.div>
);
@@ -811,30 +1034,37 @@ const SaaSCaseStudies = () => {
{
title: "Enterprise CRM SaaS Platform",
client: "SalesTech Pro",
description: "Comprehensive customer relationship management platform with advanced analytics, automation workflows, and multi-tenant architecture supporting 10,000+ users",
image: "https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=400&h=300&fit=crop&auto=format",
description:
"Comprehensive customer relationship management platform with advanced analytics, automation workflows, and multi-tenant architecture supporting 10,000+ users",
image:
"https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=400&h=300&fit=crop&auto=format",
results: "500% user growth in 18 months",
gradient: "from-blue-500/20 to-cyan-500/20",
features: "Multi-tenancy, Advanced Analytics, Workflow Automation"
features: "Multi-tenancy, Advanced Analytics, Workflow Automation",
},
{
title: "Healthcare Practice Management SaaS",
client: "MedFlow Solutions",
description: "HIPAA-compliant practice management system with patient scheduling, billing automation, and telehealth integration for healthcare providers",
image: "https://images.unsplash.com/photo-1559757175-0eb30cd8c063?w=400&h=300&fit=crop&auto=format",
description:
"HIPAA-compliant practice management system with patient scheduling, billing automation, and telehealth integration for healthcare providers",
image:
"https://images.unsplash.com/photo-1559757175-0eb30cd8c063?w=400&h=300&fit=crop&auto=format",
results: "99.9% uptime achieved",
gradient: "from-green-500/20 to-emerald-500/20",
features: "HIPAA Compliance, Telehealth Integration, Automated Billing"
features: "HIPAA Compliance, Telehealth Integration, Automated Billing",
},
{
title: "Project Management SaaS Suite",
client: "TeamSync",
description: "Collaborative project management platform with real-time collaboration, resource planning, and advanced reporting for distributed teams",
image: "https://images.unsplash.com/photo-1551434678-e076c223a692?w=400&h=300&fit=crop&auto=format",
description:
"Collaborative project management platform with real-time collaboration, resource planning, and advanced reporting for distributed teams",
image:
"https://images.unsplash.com/photo-1551434678-e076c223a692?w=400&h=300&fit=crop&auto=format",
results: "50% faster project delivery",
gradient: "from-purple-500/20 to-pink-500/20",
features: "Real-time Collaboration, Resource Planning, Advanced Reporting"
}
features:
"Real-time Collaboration, Resource Planning, Advanced Reporting",
},
];
return (
@@ -880,7 +1110,10 @@ const SaaSCaseStudies = () => {
<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>
@@ -892,7 +1125,9 @@ const SaaSCaseStudies = () => {
</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}
@@ -906,10 +1141,10 @@ const SaaSCaseStudies = () => {
{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>
@@ -919,7 +1154,9 @@ const SaaSCaseStudies = () => {
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>
@@ -955,7 +1192,9 @@ const SaaSInlineCTA = () => {
<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">
<Lightbulb className="w-5 h-5 text-foreground" />
<span className="text-foreground text-base font-medium">Unicorn Potential</span>
<span className="text-foreground text-base font-medium">
Unicorn Potential
</span>
</div>
</div>
@@ -968,7 +1207,10 @@ const SaaSInlineCTA = () => {
Let's validate your idea and map out a scalable development plan.
</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 SaaS Strategy Call</span>
@@ -986,28 +1228,51 @@ const HireSaaSDevelopers = () => {
const developerTypes = [
{
title: "SaaS Architects",
description: "System architects specializing in scalable SaaS architecture design",
description:
"System architects specializing in scalable SaaS architecture design",
icon: Layout,
skills: ["Multi-tenant Architecture", "Microservices", "Cloud Infrastructure", "Security Design"]
skills: [
"Multi-tenant Architecture",
"Microservices",
"Cloud Infrastructure",
"Security Design",
],
},
{
title: "Full-Stack SaaS Engineers",
description: "End-to-end developers with SaaS product development expertise",
description:
"End-to-end developers with SaaS product development expertise",
icon: Code,
skills: ["Frontend + Backend", "API Development", "Database Design", "Payment Integration"]
skills: [
"Frontend + Backend",
"API Development",
"Database Design",
"Payment Integration",
],
},
{
title: "DevOps Specialists",
description: "Infrastructure automation and deployment pipeline experts",
icon: CloudCog,
skills: ["CI/CD Pipelines", "Container Orchestration", "Monitoring", "Auto-scaling"]
skills: [
"CI/CD Pipelines",
"Container Orchestration",
"Monitoring",
"Auto-scaling",
],
},
{
title: "Product Engineers",
description: "Feature-focused engineers with product development experience",
description:
"Feature-focused engineers with product development experience",
icon: Rocket,
skills: ["Feature Development", "User Analytics", "A/B Testing", "Performance Optimization"]
}
skills: [
"Feature Development",
"User Analytics",
"A/B Testing",
"Performance Optimization",
],
},
];
return (
@@ -1024,7 +1289,8 @@ const HireSaaSDevelopers = () => {
Need Specialized SaaS Talent?
</h2>
<p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
Hire experienced SaaS architects, engineers, and DevOps specialists to accelerate your product development.
Hire experienced SaaS architects, engineers, and DevOps specialists
to accelerate your product development.
</p>
</motion.div>
@@ -1059,10 +1325,16 @@ const HireSaaSDevelopers = () => {
{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>
))}
@@ -1111,20 +1383,25 @@ const SaaSFAQs = () => {
const faqs = [
{
question: "What is multi-tenancy in SaaS and how do you handle it?",
answer: "Multi-tenancy allows multiple customers (tenants) to share the same application instance while keeping their data completely isolated. We implement multi-tenancy through database-level isolation, tenant-specific configurations, and secure data partitioning. This approach reduces costs while maintaining security and customization capabilities for each tenant."
answer:
"Multi-tenancy allows multiple customers (tenants) to share the same application instance while keeping their data completely isolated. We implement multi-tenancy through database-level isolation, tenant-specific configurations, and secure data partitioning. This approach reduces costs while maintaining security and customization capabilities for each tenant.",
},
{
question: "How do you ensure the scalability of a SaaS product?",
answer: "We design SaaS products with scalability from day one using microservices architecture, auto-scaling cloud infrastructure, database optimization, and caching strategies. Our approach includes horizontal scaling, load balancing, and performance monitoring to ensure your product can handle exponential user growth without compromising performance."
answer:
"We design SaaS products with scalability from day one using microservices architecture, auto-scaling cloud infrastructure, database optimization, and caching strategies. Our approach includes horizontal scaling, load balancing, and performance monitoring to ensure your product can handle exponential user growth without compromising performance.",
},
{
question: "What's the typical timeline for SaaS MVP development?",
answer: "SaaS MVP development typically takes 12-20 weeks, depending on complexity and feature scope. This includes market research, architecture design, core feature development, multi-tenant setup, payment integration, and initial testing. We use agile methodologies to deliver working software incrementally and gather user feedback early."
answer:
"SaaS MVP development typically takes 12-20 weeks, depending on complexity and feature scope. This includes market research, architecture design, core feature development, multi-tenant setup, payment integration, and initial testing. We use agile methodologies to deliver working software incrementally and gather user feedback early.",
},
{
question: "Do you assist with post-launch feature development and scaling?",
answer: "Absolutely! We provide ongoing development support including feature expansion, performance optimization, scaling infrastructure, security updates, and technical maintenance. Our post-launch services include analytics implementation, user feedback integration, and continuous product improvement based on market demands."
}
question:
"Do you assist with post-launch feature development and scaling?",
answer:
"Absolutely! We provide ongoing development support including feature expansion, performance optimization, scaling infrastructure, security updates, and technical maintenance. Our post-launch services include analytics implementation, user feedback integration, and continuous product improvement based on market demands.",
},
];
return (
@@ -1157,7 +1434,9 @@ const SaaSFAQs = () => {
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}
@@ -1193,7 +1472,9 @@ const SaaSFinalCTA = () => {
<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">
<Cloud className="w-5 h-5 text-foreground" />
<span className="text-foreground text-base font-medium">Market Leadership</span>
<span className="text-foreground text-base font-medium">
Market Leadership
</span>
</div>
</div>
</motion.div>
@@ -1210,7 +1491,8 @@ const SaaSFinalCTA = () => {
viewport={{ once: true }}
className="text-xl text-muted-foreground mb-12 max-w-2xl mx-auto leading-relaxed"
>
Partner with our experts to build a scalable, secure, and user-centric SaaS solution that captivates your market.
Partner with our experts to build a scalable, secure, and
user-centric SaaS solution that captivates your market.
</motion.p>
<motion.div
@@ -1220,7 +1502,10 @@ const SaaSFinalCTA = () => {
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 SaaS Project Today</span>

221
pages/SoftwareEngineering.tsx
View File

@@ -1,26 +1,29 @@
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 { navigateTo } from "../App";
import {
Code, Cpu, Database, Server, Shield, Zap, Users, Star,
ArrowRight, ChevronRight, Clock, TrendingUp, 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, Building, Package
Building,
Calendar,
CheckCircle,
Code,
Eye,
Layers,
RefreshCcw,
Rocket,
Server,
Settings,
Shield,
TrendingUp,
UserPlus,
Zap,
} from "lucide-react";
import { navigateTo } from "../App";
import { FAQSection } from "../components/FAQSection";
import { Footer } from "../components/Footer";
import { Navigation } from "../components/Navigation";
import { ProcessSection } from "../components/ProcessSection";
import { 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";
// Enhanced Hero Section
const HeroWithCTA = () => {
@@ -40,7 +43,9 @@ const HeroWithCTA = () => {
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6 }}
>
<span className="text-white/70 text-sm font-medium">Software Engineering</span>
<span className="text-white/70 text-sm font-medium">
Software Engineering
</span>
</motion.div>
{/* Main Heading */}
@@ -52,7 +57,8 @@ const HeroWithCTA = () => {
</h1>
<p className="text-lg text-gray-300 leading-relaxed max-w-lg">
Build robust, scalable enterprise software systems with modern engineering practices and proven methodologies.
Build robust, scalable enterprise software systems with modern
engineering practices and proven methodologies.
</p>
</div>
@@ -63,7 +69,11 @@ const HeroWithCTA = () => {
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('/contact/schedule-a-discovery-call')}>
<ShimmerButton
className="text-lg px-8 py-4"
// onClick={() => navigateTo('/contact/schedule-a-discovery-call')}
onClick={() => navigateTo("/start-a-project")}
>
<div className="inline-flex items-center gap-2">
<Calendar className="w-4 h-4 flex-shrink-0" />
<span>Discuss Your Project</span>
@@ -72,8 +82,8 @@ const HeroWithCTA = () => {
<Button
variant="secondary"
size="lg"
className="text-lg px-8 py-4"
onClick={() => navigateTo('/case-studies')}
className="text-lg px-8 py-4 h-[56px]"
onClick={() => navigateTo("/case-studies")}
>
<Eye className="w-4 h-4 flex-shrink-0" />
<span>View Case Studies</span>
@@ -95,23 +105,39 @@ const HeroWithCTA = () => {
className="grid grid-cols-2 gap-8 text-center"
>
<div className="space-y-2 flex flex-col items-center">
<div className="text-3xl lg:text-4xl font-bold text-white">150+</div>
<div className="text-sm text-gray-400 leading-tight">Software Systems</div>
<div className="text-3xl lg:text-4xl font-bold text-white">
150+
</div>
<div className="text-sm text-gray-400 leading-tight">
Software Systems
</div>
</div>
<div className="space-y-2 flex flex-col items-center">
<div className="text-3xl lg:text-4xl font-bold text-white">95%</div>
<div className="text-sm text-gray-400 leading-tight">Code Quality Score</div>
<div className="text-3xl lg:text-4xl font-bold text-white">
95%
</div>
<div className="text-sm text-gray-400 leading-tight">
Code Quality Score
</div>
</div>
<div className="space-y-2 flex flex-col items-center">
<div className="text-3xl lg:text-4xl font-bold text-white">60%</div>
<div className="text-sm text-gray-400 leading-tight">Faster Development</div>
<div className="text-3xl lg:text-4xl font-bold text-white">
60%
</div>
<div className="text-sm text-gray-400 leading-tight">
Faster Development
</div>
</div>
<div className="space-y-2 flex flex-col items-center">
<div className="text-3xl lg:text-4xl font-bold text-white">24/7</div>
<div className="text-sm text-gray-400 leading-tight">System Reliability</div>
<div className="text-3xl lg:text-4xl font-bold text-white">
24/7
</div>
<div className="text-sm text-gray-400 leading-tight">
System Reliability
</div>
</div>
</motion.div>
</motion.div>
@@ -124,12 +150,16 @@ const HeroWithCTA = () => {
// Enhanced Horizontal Tag Scroller with Engineering Practices
const HorizontalTagScroller = () => {
const practices = [
{ name: "Microservices Architecture", icon: Layers, color: "text-blue-400" },
{
name: "Microservices Architecture",
icon: Layers,
color: "text-blue-400",
},
{ name: "DevOps & CI/CD", icon: Zap, color: "text-green-400" },
{ name: "API-First Design", icon: Code, color: "text-purple-400" },
{ name: "Test-Driven Development", icon: Shield, color: "text-cyan-400" },
{ name: "Agile Methodologies", icon: TrendingUp, color: "text-orange-400" },
{ name: "System Integration", icon: Settings, color: "text-yellow-400" }
{ name: "System Integration", icon: Settings, color: "text-yellow-400" },
];
return (
@@ -148,7 +178,8 @@ const HorizontalTagScroller = () => {
<span className="text-foreground"> We Follow</span>
</h2>
<p className="text-2xl text-muted-foreground max-w-4xl mx-auto leading-relaxed">
Industry-leading methodologies that ensure code quality, scalability, and maintainability.
Industry-leading methodologies that ensure code quality,
scalability, and maintainability.
</p>
</motion.div>
@@ -177,7 +208,9 @@ const HorizontalTagScroller = () => {
>
<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 ${practice.color}`}>
<div
className={`w-8 h-8 flex items-center justify-center ${practice.color}`}
>
<IconComponent className="w-6 h-6" />
</div>
<span className="text-xl font-medium text-foreground whitespace-nowrap">
@@ -197,13 +230,18 @@ const HorizontalTagScroller = () => {
key={`loop-${practice.name}-${index}`}
initial={{ opacity: 0, scale: 0.8 }}
whileInView={{ opacity: 1, scale: 1 }}
transition={{ duration: 0.5, delay: (index + practices.length) * 0.1 }}
transition={{
duration: 0.5,
delay: (index + practices.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 ${practice.color}`}>
<div
className={`w-8 h-8 flex items-center justify-center ${practice.color}`}
>
<IconComponent className="w-6 h-6" />
</div>
<span className="text-xl font-medium text-foreground whitespace-nowrap">
@@ -227,28 +265,28 @@ const SideBySideContentWithIcons = () => {
{
id: "architecture",
title: "Robust Architecture",
icon: Building
icon: Building,
},
{
id: "quality",
title: "Code Quality Excellence",
icon: CheckCircle
icon: CheckCircle,
},
{
id: "scalability",
title: "Future-Proof Scalability",
icon: TrendingUp
icon: TrendingUp,
},
{
id: "integration",
title: "Seamless Integration",
icon: Layers
icon: Layers,
},
{
id: "maintenance",
title: "Long-Term Maintainability",
icon: Settings
}
icon: Settings,
},
];
return (
@@ -318,39 +356,44 @@ const TabbedServiceDisplay = () => {
{
title: "Enterprise Software Solutions",
icon: Building,
description: "Complex enterprise systems with robust architecture and scalability.",
link: "/services/enterprise-software-solutions"
description:
"Complex enterprise systems with robust architecture and scalability.",
link: "/services/enterprise-software-solutions",
},
{
title: "System Architecture & DevOps",
icon: Layers,
description: "Modern system design with automated deployment and monitoring.",
link: "/services/system-architecture-devops"
description:
"Modern system design with automated deployment and monitoring.",
link: "/services/system-architecture-devops",
},
{
title: "Third-Party Integrations",
icon: Zap,
description: "Seamless integration with existing systems and external services.",
link: "/services/third-party-integrations"
description:
"Seamless integration with existing systems and external services.",
link: "/services/third-party-integrations",
},
{
title: "Product Modernization",
icon: RefreshCcw,
description: "Upgrade legacy systems with modern technologies and practices.",
link: "/services/product-modernization"
description:
"Upgrade legacy systems with modern technologies and practices.",
link: "/services/product-modernization",
},
{
title: "API & Backend Development",
icon: Server,
description: "Robust APIs and scalable backend infrastructure solutions.",
link: "/services/api-backend-development"
link: "/services/api-backend-development",
},
{
title: "Custom Software Development",
icon: Code,
description: "Tailored software solutions built to your specific requirements.",
link: "/services/custom-web-app-development"
}
description:
"Tailored software solutions built to your specific requirements.",
link: "/services/custom-web-app-development",
},
];
return (
@@ -367,7 +410,8 @@ const TabbedServiceDisplay = () => {
Software Engineering Services
</h2>
<p className="text-lg text-gray-300 max-w-4xl mx-auto leading-relaxed">
Comprehensive software engineering solutions designed for enterprise-grade performance and reliability.
Comprehensive software engineering solutions designed for
enterprise-grade performance and reliability.
</p>
</motion.div>
@@ -440,27 +484,33 @@ const InlineCTA = () => {
<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>
<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 Enterprise Software with </span>
<span className="text-foreground">
Build Enterprise Software with{" "}
</span>
<span className="text-[#E5195E]">Engineering Excellence</span>
</h2>
{/* Subtitle */}
<p className="text-xl text-muted-foreground leading-relaxed max-w-2xl mx-auto">
Robust, scalable systems engineered with modern practices and proven methodologies.
Robust, scalable systems engineered with modern practices and
proven methodologies.
</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={() => navigateTo('/contact/schedule-a-discovery-call')}
// onClick={() => navigateTo('/contact/schedule-a-discovery-call')}
onClick={() => navigateTo("/start-a-project")}
>
<div className="inline-flex items-center gap-3">
<Code className="w-6 h-6 flex-shrink-0" />
@@ -470,7 +520,8 @@ const InlineCTA = () => {
{/* Small benefit text */}
<p className="text-sm text-muted-foreground">
Architecture review • Code quality audit • Technical consultation
Architecture review • Code quality audit • Technical
consultation
</p>
</div>
</motion.div>
@@ -489,7 +540,7 @@ const HireDevelopersSection = () => {
skills: ["System Design", "Microservices", "Scalability"],
iconBg: "bg-blue-500",
iconColor: "text-white",
link: "/hire-talent/full-stack-developers"
link: "/hire-talent/full-stack-developers",
},
{
title: "Backend Engineers",
@@ -497,7 +548,7 @@ const HireDevelopersSection = () => {
skills: ["Node.js", "Python", "Java", "Go"],
iconBg: "bg-green-500",
iconColor: "text-white",
link: "/hire-talent/backend-developers"
link: "/hire-talent/backend-developers",
},
{
title: "DevOps Engineers",
@@ -505,7 +556,7 @@ const HireDevelopersSection = () => {
skills: ["CI/CD", "Docker", "Kubernetes", "AWS"],
iconBg: "bg-purple-500",
iconColor: "text-white",
link: "/hire-talent/full-stack-developers"
link: "/hire-talent/full-stack-developers",
},
{
title: "Full Stack Developers",
@@ -513,8 +564,8 @@ const HireDevelopersSection = () => {
skills: ["React", "Node.js", "TypeScript", "APIs"],
iconBg: "bg-orange-500",
iconColor: "text-white",
link: "/hire-talent/full-stack-developers"
}
link: "/hire-talent/full-stack-developers",
},
];
return (
@@ -532,7 +583,8 @@ const HireDevelopersSection = () => {
<span className="text-[#E5195E]">Engineering Experts</span>
</h2>
<p className="text-2xl text-muted-foreground max-w-4xl mx-auto leading-relaxed">
Get access to senior software engineers who build robust, scalable enterprise systems.
Get access to senior software engineers who build robust, scalable
enterprise systems.
</p>
</motion.div>
@@ -560,8 +612,12 @@ const HireDevelopersSection = () => {
{/* 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
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">
@@ -579,7 +635,11 @@ const HireDevelopersSection = () => {
<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">
<Badge
key={skill}
variant="secondary"
className="text-xs bg-white/10 text-foreground"
>
{skill}
</Badge>
))}
@@ -613,24 +673,29 @@ const HireDevelopersSection = () => {
const softwareEngineeringFAQs = [
{
question: "What software engineering methodologies do you follow?",
answer: "We follow modern engineering practices including Agile/Scrum, DevOps, Test-Driven Development, continuous integration/deployment, and microservices architecture to ensure high-quality, maintainable software."
answer:
"We follow modern engineering practices including Agile/Scrum, DevOps, Test-Driven Development, continuous integration/deployment, and microservices architecture to ensure high-quality, maintainable software.",
},
{
question: "How do you ensure code quality and maintainability?",
answer: "We implement comprehensive code review processes, automated testing, static code analysis, documentation standards, and follow SOLID principles and design patterns to ensure long-term maintainability."
answer:
"We implement comprehensive code review processes, automated testing, static code analysis, documentation standards, and follow SOLID principles and design patterns to ensure long-term maintainability.",
},
{
question: "Can you modernize our existing legacy software?",
answer: "Yes, we specialize in legacy system modernization including code refactoring, architecture updates, technology migration, and gradual system replacement while maintaining business continuity."
answer:
"Yes, we specialize in legacy system modernization including code refactoring, architecture updates, technology migration, and gradual system replacement while maintaining business continuity.",
},
{
question: "What is your approach to system architecture?",
answer: "We design scalable, modular architectures using microservices, API-first approaches, cloud-native patterns, and modern frameworks that can evolve with your business requirements."
answer:
"We design scalable, modular architectures using microservices, API-first approaches, cloud-native patterns, and modern frameworks that can evolve with your business requirements.",
},
{
question: "Do you provide ongoing software maintenance?",
answer: "Yes, we offer comprehensive maintenance services including bug fixes, performance optimization, security updates, feature enhancements, and 24/7 monitoring to keep your software running smoothly."
}
answer:
"Yes, we offer comprehensive maintenance services including bug fixes, performance optimization, security updates, feature enhancements, and 24/7 monitoring to keep your software running smoothly.",
},
];
export function SoftwareEngineering() {

20
pages/StartAProject.tsx
View File

@@ -874,7 +874,7 @@ const ProcessStepsSection = () => {
})}
</motion.div>
<motion.div
{/* <motion.div
initial={{ opacity: 0, y: 30 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.4 }}
@@ -890,7 +890,7 @@ const ProcessStepsSection = () => {
Tell Us More
<ArrowRight className="w-4 h-4 ml-2" />
</Button>
</motion.div>
</motion.div> */}
</div>
</section>
);
@@ -999,7 +999,7 @@ const JoinWDISection = () => {
<ArrowRight className="w-4 h-4 ml-2" />
</Button>
<Button
{/* <Button
size="lg"
variant="outline"
className="border-gray-600 text-white hover:bg-gray-800 text-lg px-8 py-4"
@@ -1007,7 +1007,7 @@ const JoinWDISection = () => {
>
<Upload className="w-5 h-5 mr-2" />
Send Your CV
</Button>
</Button> */}
</div>
<p className="text-gray-400 text-sm">
@@ -1126,28 +1126,28 @@ const ContactInfoSection = () => {
icon: Mail,
title: "Email Us",
description: "Get in touch via email",
contact: "hello@webdevelopmentinstitute.com",
action: "mailto:hello@webdevelopmentinstitute.com",
contact: "ideas@wdipl.com",
action: "mailto:ideas@wdipl.com",
},
{
icon: Phone,
title: "Call Us",
description: "Speak with our team",
contact: "+1 (555) 123-4567",
action: "tel:+15551234567",
contact: "+91 7700900039",
action: "tel:+91 7700900039",
},
{
icon: MapPin,
title: "Visit Us",
description: "Our office locations",
contact: "Multiple Global Locations",
contact: "614, 6th floor Palm spring centre, Malad west, Mumbai Maharshatra",
action: () => navigateTo("/company/office-locations"),
},
{
icon: Clock,
title: "Business Hours",
description: "We're available",
contact: "Mon-Fri 9AM-6PM",
contact: "Mon-Fri 11AM-8PM",
action: () => navigateTo("/contact/schedule-a-discovery-call"),
},
];

18
pages/WearableDeviceDevelopment.tsx
View File

@@ -39,6 +39,7 @@ import { Badge } from "../components/ui/badge";
import { Button } from "../components/ui/button";
import { Card, CardContent } from "../components/ui/card";
import { ShimmerButton } from "../components/ui/shimmer-button";
import { navigateTo } from "@/App";
// Wearable & Device App Development Hero Section
const WearableHeroWithCTA = () => {
@@ -83,7 +84,10 @@ const WearableHeroWithCTA = () => {
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">
<Watch className="w-5 h-5 flex-shrink-0" />
<span>Discover Wearable Solutions</span>
@@ -94,7 +98,7 @@ const WearableHeroWithCTA = () => {
className="inline-flex items-center justify-center gap-2 rounded-md bg-gray-800 px-8 py-4 text-lg font-medium text-white transition hover:bg-gray-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-700 whitespace-nowrap"
>
<MessageSquare className="w-4 h-4 flex-shrink-0" />
<span>Request a Device App Consultation</span>
<span>Request Consultation</span>
</a>
</motion.div>
</motion.div>
@@ -1227,7 +1231,10 @@ const WearableInlineCTA = () => {
ecosystems.
</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">
<Lightbulb className="w-6 h-6 flex-shrink-0" />
<span>Discuss Your Wearable/IoT Idea</span>
@@ -1363,7 +1370,10 @@ const WearableFinalCTA = () => {
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 Wearable/IoT Project</span>

6
pages/WebCloudServices.tsx
View File

@@ -115,7 +115,8 @@ const HeroWithCTA = () => {
>
<ShimmerButton
className="text-lg px-8 py-4"
onClick={() => navigateTo("/contact/schedule-a-discovery-call")}
// onClick={() => navigateTo("/contact/schedule-a-discovery-call")}
onClick={() => navigateTo("/start-a-project")}
>
<div className="inline-flex items-center gap-2">
<Calendar className="w-4 h-4 flex-shrink-0" />
@@ -537,7 +538,8 @@ const InlineCTA = () => {
<div className="flex flex-col items-center gap-4">
<ShimmerButton
className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl bg-[#E5195E] hover:bg-[#E5195E]/90"
onClick={() => navigateTo("/contact/schedule-a-discovery-call")}
// onClick={() => navigateTo("/contact/schedule-a-discovery-call")}
onClick={() => navigateTo("/start-a-project")}
>
<div className="inline-flex items-center gap-3">
<Cloud className="w-6 h-6 flex-shrink-0" />

10
pages/iOSAppDevelopment.tsx
View File

@@ -90,7 +90,10 @@ const IOSHeroWithCTA = () => {
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">
<svg
className="w-6 h-4 flex-shrink-0"
@@ -1068,7 +1071,10 @@ export const IOSAppDevelopment = () => {
delight users and drive business success.
</p>
<div className="flex flex-col sm:flex-row gap-6 justify-center">
<ShimmerButton className="text-lg px-8 py-4 h-[56px]">
<ShimmerButton
className="text-lg px-8 py-4 h-[56px]"
onClick={() => navigateTo("/start-a-project")}
>
<div className="inline-flex items-center gap-2">
<Apple className="w-5 h-5 flex-shrink-0" />
<span>Start Your iOS Project</span>

BIN
src/images/kartikeya-gautam.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 144 KiB

BIN
src/images/manav-sain.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 106 KiB

BIN
src/images/pooja-patade.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 87 KiB

BIN
src/images/ritesh-pandey.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 96 KiB

BIN
src/images/sudhir-malya.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 110 KiB

BIN
src/images/tanveer-ajani.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 111 KiB