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

105
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>
@@ -74,7 +97,7 @@ const ChatSimulation = ({ messages }: { messages: Array<{ from: string; text: st
);
};
// Document mockup component - Compact version
// Document mockup component - Compact version
const DocumentMockup = () => {
return (
<div className="relative">
@@ -84,11 +107,13 @@ 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>
{/* Document sections */}
<div className="space-y-2">
<motion.div
@@ -102,7 +127,7 @@ const DocumentMockup = () => {
<div className="h-1.5 bg-muted/60 rounded w-full"></div>
<div className="h-1.5 bg-muted/60 rounded w-5/6"></div>
</motion.div>
<div className="flex gap-2">
<motion.div
initial={{ opacity: 0, scale: 0.95 }}
@@ -114,7 +139,7 @@ const DocumentMockup = () => {
<CheckCircle className="w-3 h-3 text-green-500" />
<span className="text-muted-foreground">Requirements</span>
</motion.div>
<motion.div
initial={{ opacity: 0, scale: 0.95 }}
whileInView={{ opacity: 1, scale: 1 }}
@@ -134,18 +159,24 @@ 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 = () => {
if (step.visual?.type === "icon_or_doc_mockup") {
return <DocumentMockup />;
}
if (step.chat_simulation) {
return <ChatSimulation messages={step.chat_simulation} />;
}
if (step.tags) {
return (
<div className="flex flex-wrap gap-2">
@@ -168,10 +199,10 @@ const ProcessCard = ({ step, index }: { step: typeof steps[0]; index: number })
</div>
);
}
return null;
};
return (
<motion.div
ref={cardRef}
@@ -193,7 +224,7 @@ const ProcessCard = ({ step, index }: { step: typeof steps[0]; index: number })
>
{step.title}
</motion.h3>
<motion.p
initial={{ opacity: 0, y: 10 }}
whileInView={{ opacity: 1, y: 0 }}
@@ -204,7 +235,7 @@ const ProcessCard = ({ step, index }: { step: typeof steps[0]; index: number })
{step.description}
</motion.p>
</div>
{/* Content */}
<motion.div
initial={{ opacity: 0, y: 20 }}
@@ -221,7 +252,7 @@ const ProcessCard = ({ step, index }: { step: typeof steps[0]; index: number })
export const ProcessSection = () => {
const titleRef = useRef(null);
return (
<section className="relative overflow-hidden py-20 bg-background">
<div className="container mx-auto px-6 lg:px-8">
@@ -244,18 +275,19 @@ 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>
{/* Cards Grid */}
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8 max-w-6xl mx-auto">
{steps.map((step, index) => (
<ProcessCard key={step.id} step={step} index={index} />
))}
</div>
{/* Bottom CTA */}
<motion.div
initial={{ opacity: 0, y: 30 }}
@@ -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
@@ -277,4 +310,4 @@ export const ProcessSection = () => {
</div>
</section>
);
};
};

79
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.",
readTime: "6 min read",
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 }}
@@ -70,7 +85,7 @@ const ResourceCard = ({ resource, index }: { resource: typeof resources[0]; inde
</span>
</div>
</div>
{/* Content */}
<div className="p-6 space-y-4">
{/* Date and Read Time */}
@@ -84,20 +99,20 @@ const ResourceCard = ({ resource, index }: { resource: typeof resources[0]; inde
{resource.readTime}
</div>
</div>
{/* Title */}
<h3 className="text-foreground font-medium leading-tight group-hover:text-accent transition-colors">
{resource.title}
</h3>
{/* Excerpt */}
<p className="text-muted-foreground text-sm leading-relaxed">
{resource.excerpt}
</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,17 +155,22 @@ 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>
{/* CTA */}
<motion.div
initial={{ opacity: 0, y: 20 }}
@@ -159,11 +179,14 @@ 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>
</div>
</section>
);
};
};

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}

668
pages/APIBackendDevelopment.tsx
View File

File diff suppressed because it is too large Load Diff

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 />

597
pages/AdminPanelsDashboards.tsx
View File

File diff suppressed because it is too large Load Diff

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"

104
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",
type: "Full-time",
description: "Create native iOS and Android apps or cross-platform solutions using React Native.",
icon: Code
title: "Jr. Node.js Developer",
department: "Backend Development",
location: "In-office",
type: "Full-time",
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>

439
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 */}
@@ -58,12 +71,13 @@ const CrossPlatformHeroWithCTA = () => {
<h1 className="text-4xl md:text-5xl lg:text-6xl font-semibold text-white leading-tight">
Efficient Cross-Platform App Development
</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>
{/* CTAs */}
<motion.div
initial={{ opacity: 0, y: 20 }}
@@ -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>
@@ -86,7 +103,7 @@ const CrossPlatformHeroWithCTA = () => {
</a>
</motion.div>
</motion.div>
{/* Right side with overlapping device mockups */}
<motion.div
initial={{ opacity: 0, x: 50 }}
@@ -118,11 +135,13 @@ 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>
{/* Android-style phone (right) */}
<div className="absolute right-8 top-8 w-44 h-64 bg-gradient-to-br from-gray-800 to-gray-900 rounded-3xl border border-gray-700 shadow-2xl transform rotate-6">
<div className="w-full h-8 bg-gray-700 rounded-t-3xl flex items-center justify-center">
@@ -137,18 +156,20 @@ 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>
{/* Central connection indicator */}
<div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-16 h-16 bg-accent/20 rounded-full border-2 border-accent/30 flex items-center justify-center backdrop-blur-sm">
<GitMerge className="w-8 h-8 text-accent" />
</div>
</div>
</motion.div>
{/* Cross-Platform Technology Badges */}
<motion.div
initial={{ opacity: 0, y: 30 }}
@@ -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,9 +445,11 @@ 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">
{[
"Dart Language",
@@ -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,9 +529,11 @@ 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">
{[
"JavaScript/TypeScript",
@@ -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,19 +611,20 @@ 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>
<div className="relative">
{/* Timeline line */}
<div className="absolute left-1/2 transform -translate-x-1/2 h-full w-0.5 bg-gradient-to-b from-accent via-accent/50 to-transparent hidden lg:block"></div>
<div className="space-y-16">
{steps.map((step, index) => {
const IconComponent = step.icon;
const isEven = index % 2 === 0;
return (
<motion.div
key={index}
@@ -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}
@@ -573,10 +658,10 @@ const CrossPlatformProcess = () => {
</p>
</div>
</div>
{/* Timeline dot */}
<div className="w-4 h-4 bg-accent rounded-full border-4 border-background z-10 hidden lg:block"></div>
<div className="flex-1 hidden lg:block"></div>
</motion.div>
);
@@ -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,10 +728,11 @@ 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>
<motion.div
initial={{ opacity: 0, y: 40 }}
whileInView={{ opacity: 1, y: 0 }}
@@ -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,10 +826,11 @@ 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>
<motion.div
initial={{ opacity: 0, y: 40 }}
whileInView={{ opacity: 1, y: 0 }}
@@ -761,23 +860,31 @@ 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>
</div>
</div>
<h3 className="text-xl font-semibold text-foreground mb-4 leading-tight">
{study.title}
</h3>
</div>
<div className="px-8 pb-6 flex-1">
<div className={`relative rounded-xl overflow-hidden bg-gradient-to-br ${study.gradient} p-4 border border-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}
@@ -785,20 +892,22 @@ const CrossPlatformCaseStudies = () => {
/>
</div>
</div>
<div className="px-8 pb-6">
<p className="text-muted-foreground text-sm leading-relaxed">
{study.description}
</p>
</div>
<div className="p-8 pt-0 mt-auto">
<Button
variant="ghost"
<Button
variant="ghost"
size="sm"
className="w-full justify-between text-accent hover:text-accent hover:bg-accent/10 group-hover:translate-x-1 transition-all duration-300"
>
<span className="text-sm font-medium">VIEW CASE STUDY</span>
<span className="text-sm font-medium">
VIEW CASE STUDY
</span>
<ArrowRight className="w-4 h-4" />
</Button>
</div>
@@ -834,20 +943,26 @@ 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>
<h2 className="text-4xl lg:text-5xl font-semibold text-white leading-tight">
Considering a{" "}
<span className="text-accent">Cross-Platform Approach?</span>
</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",
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,10 +1012,11 @@ 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>
<motion.div
initial={{ opacity: 0, y: 40 }}
whileInView={{ opacity: 1, y: 0 }}
@@ -925,23 +1041,30 @@ 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>
</div>
<h3 className="text-xl font-semibold text-foreground mb-4">
{dev.title}
</h3>
<p className="text-muted-foreground text-sm mb-4">
{dev.specialties}
</p>
<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>
))}
@@ -965,9 +1088,9 @@ const HireCrossPlatformDevelopers = () => {
<span>Hire Cross-Platform Developers</span>
</div>
</ShimmerButton>
<Button
<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 (
@@ -1016,7 +1143,7 @@ const CrossPlatformFAQs = () => {
Common questions about cross-platform app development.
</p>
</motion.div>
<motion.div
initial={{ opacity: 0, y: 40 }}
whileInView={{ opacity: 1, y: 0 }}
@@ -1026,13 +1153,15 @@ const CrossPlatformFAQs = () => {
>
<Accordion type="single" collapsible className="space-y-8">
{faqs.map((faq, index) => (
<AccordionItem
key={index}
value={`item-${index}`}
<AccordionItem
key={index}
value={`item-${index}`}
className="bg-gray-900/50 backdrop-blur-md rounded-2xl border border-gray-800 px-10 shadow-lg"
>
<AccordionTrigger className="text-left hover:no-underline py-10 text-xl">
<span className="font-semibold text-white">{faq.question}</span>
<span className="font-semibold text-white">
{faq.question}
</span>
</AccordionTrigger>
<AccordionContent className="text-gray-300 pb-10 text-lg leading-relaxed">
{faq.answer}
@@ -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>
@@ -1083,7 +1214,7 @@ const CrossPlatformFinalCTA = () => {
Achieve Broader Reach with{" "}
<span className="text-accent">WDI's Cross-Platform Expertise</span>
</motion.h2>
<motion.p
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
@@ -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>
@@ -1130,61 +1265,61 @@ export const CrossPlatformAppDevelopment = () => {
return (
<div className="dark min-h-screen">
<Navigation />
{/* Hero Section */}
<section className="bg-black">
<CrossPlatformHeroWithCTA />
</section>
{/* Key Benefits */}
<section className="bg-background">
<CrossPlatformBenefits />
</section>
{/* Technologies */}
<section className="bg-card">
<CrossPlatformTechnologies />
</section>
{/* Development Process */}
<section className="bg-background">
<CrossPlatformProcess />
</section>
{/* Services */}
<section className="bg-card">
<CrossPlatformServices />
</section>
{/* Case Studies */}
<section className="bg-background">
<CrossPlatformCaseStudies />
</section>
{/* Mid-Page CTA */}
<section className="bg-card">
<CrossPlatformInlineCTA />
</section>
{/* Hire Developers */}
<section className="bg-background">
<HireCrossPlatformDevelopers />
</section>
{/* FAQs */}
<section className="bg-card">
<CrossPlatformFAQs />
</section>
{/* Final CTA */}
<section className="bg-background">
<CrossPlatformFinalCTA />
</section>
{/* Footer */}
<section className="bg-card">
<Footer />
</section>
</div>
);
};
};

496
pages/CustomWebAppDevelopment.tsx
View File

@@ -12,7 +12,8 @@ import {
Database,
Eye,
FileText,
Globe, Layers,
Globe,
Layers,
Layers3,
Layout,
MessageSquare,
@@ -28,18 +29,24 @@ import {
TrendingUp,
Users,
Workflow,
Zap
Zap,
} from "lucide-react";
import { ImageWithFallback } from "../components/figma/ImageWithFallback";
import { Footer } from "../components/Footer";
import { Navigation } from "../components/Navigation";
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "../components/ui/accordion";
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from "../components/ui/accordion";
import { Badge } from "../components/ui/badge";
import { Button } from "../components/ui/button";
import { Card, CardContent } from "../components/ui/card";
import { ShimmerButton } from "../components/ui/shimmer-button";
import patientManagementPortal from "../src/images/patient-management-portal.webp";
import awsLogo from "../src/images/aws-logo.png";
import { navigateTo } from "@/App";
// Custom Web App Development Hero Section
const CustomWebAppHeroWithCTA = () => {
@@ -59,7 +66,9 @@ const CustomWebAppHeroWithCTA = () => {
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6 }}
>
<span className="text-white/70 text-sm font-medium">Web & Cloud Solutions</span>
<span className="text-white/70 text-sm font-medium">
Web & Cloud Solutions
</span>
</motion.div>
{/* Main Heading */}
@@ -67,12 +76,13 @@ const CustomWebAppHeroWithCTA = () => {
<h1 className="text-4xl md:text-5xl lg:text-6xl font-semibold text-white leading-tight">
Custom Web Application Development
</h1>
<p className="text-lg text-gray-300 leading-relaxed max-w-lg">
Building bespoke, scalable, and secure web applications tailored to your unique business processes and user needs.
Building bespoke, scalable, and secure web applications tailored
to your unique business processes and user needs.
</p>
</div>
{/* CTAs */}
<motion.div
initial={{ opacity: 0, y: 20 }}
@@ -80,7 +90,10 @@ const CustomWebAppHeroWithCTA = () => {
transition={{ duration: 0.8, delay: 0.3 }}
className="flex flex-col sm:flex-row gap-4"
>
<ShimmerButton className="text-lg px-8 py-4">
<ShimmerButton
className="text-lg px-8 py-4"
onClick={() => navigateTo("/start-a-project")}
>
<div className="inline-flex items-center gap-2">
<MessageSquare className="w-5 h-5 flex-shrink-0" />
<span>Request a Free Consultation</span>
@@ -91,11 +104,11 @@ const CustomWebAppHeroWithCTA = () => {
className="inline-flex items-center justify-center gap-2 rounded-md bg-gray-800 px-8 py-4 text-lg font-medium text-white transition hover:bg-gray-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-700 whitespace-nowrap"
>
<Eye className="w-4 h-4 flex-shrink-0" />
<span>Explore Our Web Projects</span>
<span>Explore Projects</span>
</a>
</motion.div>
</motion.div>
{/* Right side with web app visualization */}
<motion.div
initial={{ opacity: 0, x: 50 }}
@@ -122,16 +135,18 @@ const CustomWebAppHeroWithCTA = () => {
</div>
<div className="text-xs text-gray-400">localhost:3000</div>
</div>
{/* Dashboard Content */}
<div className="space-y-4">
{/* Navigation */}
<div className="flex space-x-4 text-sm">
<div className="bg-accent/20 text-accent px-3 py-1 rounded-lg">Dashboard</div>
<div className="bg-accent/20 text-accent px-3 py-1 rounded-lg">
Dashboard
</div>
<div className="text-gray-400 px-3 py-1">Analytics</div>
<div className="text-gray-400 px-3 py-1">Users</div>
</div>
{/* Content Grid */}
<div className="grid grid-cols-2 gap-4">
<div className="bg-gray-800/50 rounded-lg p-4">
@@ -152,12 +167,15 @@ const CustomWebAppHeroWithCTA = () => {
</div>
</div>
</div>
{/* Data Table Simulation */}
<div className="bg-gray-800/30 rounded-lg p-4">
<div className="space-y-2">
{[1, 2, 3].map((i) => (
<div key={i} className="flex items-center justify-between">
<div
key={i}
className="flex items-center justify-between"
>
<div className="flex items-center gap-3">
<div className="w-6 h-6 bg-gray-600 rounded-full"></div>
<div className="h-2 bg-gray-600 rounded w-24"></div>
@@ -169,7 +187,7 @@ const CustomWebAppHeroWithCTA = () => {
</div>
</div>
</div>
{/* Floating Code Snippets */}
<motion.div
initial={{ opacity: 0, scale: 0.8 }}
@@ -187,7 +205,7 @@ const CustomWebAppHeroWithCTA = () => {
<div className="text-yellow-400">return</div>
</div>
</motion.div>
{/* Cloud Icon */}
<motion.div
initial={{ opacity: 0, scale: 0.8 }}
@@ -198,7 +216,7 @@ const CustomWebAppHeroWithCTA = () => {
<CloudCog className="w-8 h-8 text-white" />
</motion.div>
</motion.div>
{/* Feature Badges */}
<motion.div
initial={{ opacity: 0, y: 30 }}
@@ -206,15 +224,24 @@ const CustomWebAppHeroWithCTA = () => {
transition={{ duration: 0.8, delay: 1.2 }}
className="flex justify-center gap-4 flex-wrap"
>
<Badge variant="secondary" className="bg-blue-500/20 text-blue-300 border-blue-500/30">
<Badge
variant="secondary"
className="bg-blue-500/20 text-blue-300 border-blue-500/30"
>
<Database className="w-3 h-3 mr-1" />
Scalable
</Badge>
<Badge variant="secondary" className="bg-green-500/20 text-green-300 border-green-500/30">
<Badge
variant="secondary"
className="bg-green-500/20 text-green-300 border-green-500/30"
>
<Shield className="w-3 h-3 mr-1" />
Secure
</Badge>
<Badge variant="secondary" className="bg-purple-500/20 text-purple-300 border-purple-500/30">
<Badge
variant="secondary"
className="bg-purple-500/20 text-purple-300 border-purple-500/30"
>
<Layers className="w-3 h-3 mr-1" />
Custom Built
</Badge>
@@ -233,28 +260,33 @@ const CustomWebAppBenefits = () => {
{
icon: Target,
title: "Tailored to Your Workflow",
description: "Perfectly aligns with unique business logic, unlike off-the-shelf solutions."
description:
"Perfectly aligns with unique business logic, unlike off-the-shelf solutions.",
},
{
icon: TrendingUp,
title: "Scalability & Flexibility",
description: "Built to grow with your business, easily adaptable to future needs."
description:
"Built to grow with your business, easily adaptable to future needs.",
},
{
icon: Shield,
title: "Enhanced Security",
description: "Custom architecture allows for robust, purpose-built security measures."
description:
"Custom architecture allows for robust, purpose-built security measures.",
},
{
icon: Zap,
title: "Operational Efficiency",
description: "Automate tasks, streamline processes, reduce manual effort."
description:
"Automate tasks, streamline processes, reduce manual effort.",
},
{
icon: Award,
title: "Competitive Advantage",
description: "Unique features and user experiences differentiate your brand."
}
description:
"Unique features and user experiences differentiate your brand.",
},
];
return (
@@ -271,7 +303,7 @@ const CustomWebAppBenefits = () => {
Why Invest in a Custom Web Application?
</h2>
</motion.div>
<motion.div
initial={{ opacity: 0, y: 40 }}
whileInView={{ opacity: 1, y: 0 }}
@@ -356,29 +388,34 @@ const CustomWebAppProcess = () => {
const steps = [
{
title: "Discovery & Requirements",
description: "Comprehensive analysis of your business needs, user requirements, and technical specifications to define project scope.",
icon: Search
description:
"Comprehensive analysis of your business needs, user requirements, and technical specifications to define project scope.",
icon: Search,
},
{
title: "UX/UI Design & Prototyping",
description: "Creating intuitive user experiences and visual designs with interactive prototypes for stakeholder feedback.",
icon: Palette
description:
"Creating intuitive user experiences and visual designs with interactive prototypes for stakeholder feedback.",
icon: Palette,
},
{
title: "Agile Development Sprints",
description: "Iterative development approach with regular demonstrations and continuous integration for rapid progress.",
icon: Code
description:
"Iterative development approach with regular demonstrations and continuous integration for rapid progress.",
icon: Code,
},
{
title: "Rigorous Testing & QA",
description: "Comprehensive testing including functionality, performance, security, and user acceptance testing.",
icon: Bug
description:
"Comprehensive testing including functionality, performance, security, and user acceptance testing.",
icon: Bug,
},
{
title: "Deployment & Ongoing Support",
description: "Production deployment with monitoring, maintenance, and continuous improvement based on user feedback.",
icon: Rocket
}
description:
"Production deployment with monitoring, maintenance, and continuous improvement based on user feedback.",
icon: Rocket,
},
];
return (
@@ -399,12 +436,12 @@ const CustomWebAppProcess = () => {
<div className="relative">
{/* Timeline line */}
<div className="absolute left-1/2 transform -translate-x-1/2 h-full w-0.5 bg-gradient-to-b from-accent via-accent/50 to-transparent hidden lg:block"></div>
<div className="space-y-16">
{steps.map((step, index) => {
const IconComponent = step.icon;
const isEven = index % 2 === 0;
return (
<motion.div
key={index}
@@ -412,15 +449,23 @@ const CustomWebAppProcess = () => {
whileInView={{ opacity: 1, x: 0 }}
transition={{ duration: 0.8, delay: index * 0.2 }}
viewport={{ once: true }}
className={`flex items-center ${isEven ? 'lg:flex-row' : 'lg:flex-row-reverse'} flex-col lg:gap-16 gap-8`}
className={`flex items-center ${
isEven ? "lg:flex-row" : "lg:flex-row-reverse"
} flex-col lg:gap-16 gap-8`}
>
<div className={`flex-1 ${isEven ? 'lg:text-right' : 'lg:text-left'} text-center lg:text-left`}>
<div
className={`flex-1 ${
isEven ? "lg:text-right" : "lg:text-left"
} text-center lg:text-left`}
>
<div className="bg-card/20 backdrop-blur-md rounded-2xl border border-white/10 p-8 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl">
<div className="flex items-center gap-4 mb-4 justify-center lg:justify-start">
<div className="w-12 h-12 bg-accent/20 rounded-xl flex items-center justify-center">
<IconComponent className="w-6 h-6 text-accent" />
</div>
<div className="text-2xl font-bold text-accent">0{index + 1}</div>
<div className="text-2xl font-bold text-accent">
0{index + 1}
</div>
</div>
<h3 className="text-2xl font-semibold text-foreground mb-4">
{step.title}
@@ -430,10 +475,10 @@ const CustomWebAppProcess = () => {
</p>
</div>
</div>
{/* Timeline dot */}
<div className="w-4 h-4 bg-accent rounded-full border-4 border-background z-10 hidden lg:block"></div>
<div className="flex-1 hidden lg:block"></div>
</motion.div>
);
@@ -450,40 +495,74 @@ const CustomWebAppServices = () => {
const services = [
{
title: "Enterprise Web Portals",
description: "Secure, centralized access for employees, partners, or customers.",
description:
"Secure, centralized access for employees, partners, or customers.",
icon: Building,
features: ["Single Sign-On", "Role-based Access", "Document Management", "Communication Tools"]
features: [
"Single Sign-On",
"Role-based Access",
"Document Management",
"Communication Tools",
],
},
{
title: "Workflow Automation Platforms",
description: "Streamlining complex business operations.",
icon: Workflow,
features: ["Process Automation", "Task Management", "Approval Workflows", "Integration APIs"]
features: [
"Process Automation",
"Task Management",
"Approval Workflows",
"Integration APIs",
],
},
{
title: "Data Management Systems",
description: "Custom solutions for large-scale data organization and retrieval.",
description:
"Custom solutions for large-scale data organization and retrieval.",
icon: Database,
features: ["Data Visualization", "Advanced Analytics", "Real-time Processing", "Export Tools"]
features: [
"Data Visualization",
"Advanced Analytics",
"Real-time Processing",
"Export Tools",
],
},
{
title: "Interactive Dashboards",
description: "Real-time analytics and reporting for informed decision-making.",
description:
"Real-time analytics and reporting for informed decision-making.",
icon: BarChart,
features: ["Custom Widgets", "Live Data Feeds", "Drill-down Analytics", "Scheduled Reports"]
features: [
"Custom Widgets",
"Live Data Feeds",
"Drill-down Analytics",
"Scheduled Reports",
],
},
{
title: "API Integrations",
description: "Connecting disparate systems for seamless data flow.",
icon: Network,
features: ["RESTful APIs", "Third-party Integrations", "Data Synchronization", "Webhook Support"]
features: [
"RESTful APIs",
"Third-party Integrations",
"Data Synchronization",
"Webhook Support",
],
},
{
title: "Web App Modernization",
description: "Revitalizing legacy systems for improved performance and user experience.",
description:
"Revitalizing legacy systems for improved performance and user experience.",
icon: RefreshCcw,
features: ["Legacy Migration", "Performance Optimization", "Modern UI/UX", "Cloud Integration"]
}
features: [
"Legacy Migration",
"Performance Optimization",
"Modern UI/UX",
"Cloud Integration",
],
},
];
return (
@@ -500,7 +579,7 @@ const CustomWebAppServices = () => {
Our Expertise in Custom Web Solutions
</h2>
</motion.div>
<motion.div
initial={{ opacity: 0, y: 40 }}
whileInView={{ opacity: 1, y: 0 }}
@@ -532,10 +611,16 @@ const CustomWebAppServices = () => {
{service.description}
</p>
<div className="space-y-2">
<h4 className="text-sm font-medium text-white">Key Features:</h4>
<h4 className="text-sm font-medium text-white">
Key Features:
</h4>
<div className="flex flex-wrap gap-2">
{service.features.map((feature) => (
<Badge key={feature} variant="secondary" className="text-xs bg-gray-800/50 text-gray-300 border-gray-700">
<Badge
key={feature}
variant="secondary"
className="text-xs bg-gray-800/50 text-gray-300 border-gray-700"
>
{feature}
</Badge>
))}
@@ -555,23 +640,75 @@ const CustomWebAppServices = () => {
// Web App Tech Stack
const WebAppTechStack = () => {
const technologies = [
{ name: "React", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/react/react-original.svg", category: "Frontend" },
{ name: "Angular", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/angularjs/angularjs-original.svg", category: "Frontend" },
{ name: "Vue.js", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/vuejs/vuejs-original.svg", category: "Frontend" },
{ name: "Node.js", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nodejs/nodejs-original.svg", category: "Backend" },
{ name: "Python", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/python/python-original.svg", category: "Backend" },
{ name: "Java", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/java/java-original.svg", category: "Backend" },
{
name: "React",
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/react/react-original.svg",
category: "Frontend",
},
{
name: "Angular",
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/angularjs/angularjs-original.svg",
category: "Frontend",
},
{
name: "Vue.js",
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/vuejs/vuejs-original.svg",
category: "Frontend",
},
{
name: "Node.js",
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nodejs/nodejs-original.svg",
category: "Backend",
},
{
name: "Python",
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/python/python-original.svg",
category: "Backend",
},
{
name: "Java",
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/java/java-original.svg",
category: "Backend",
},
{ name: "AWS", logo: awsLogo, category: "Cloud" },
{ name: "Azure", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/azure/azure-original.svg", category: "Cloud" },
{ name: "PostgreSQL", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/postgresql/postgresql-original.svg", category: "Database" },
{ name: "MongoDB", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/mongodb/mongodb-original.svg", category: "Database" }
{
name: "Azure",
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/azure/azure-original.svg",
category: "Cloud",
},
{
name: "PostgreSQL",
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/postgresql/postgresql-original.svg",
category: "Database",
},
{
name: "MongoDB",
logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/mongodb/mongodb-original.svg",
category: "Database",
},
];
const frameworks = [
{ name: "Django", icon: Code, description: "Python web framework for rapid development" },
{ name: "Spring Boot", icon: Coffee, description: "Java framework for enterprise applications" },
{ name: "Ruby on Rails", icon: Layers, description: "Convention over configuration framework" },
{ name: "Laravel", icon: Boxes, description: "PHP framework for web artisans" }
{
name: "Django",
icon: Code,
description: "Python web framework for rapid development",
},
{
name: "Spring Boot",
icon: Coffee,
description: "Java framework for enterprise applications",
},
{
name: "Ruby on Rails",
icon: Layers,
description: "Convention over configuration framework",
},
{
name: "Laravel",
icon: Boxes,
description: "PHP framework for web artisans",
},
];
return (
@@ -616,8 +753,12 @@ const WebAppTechStack = () => {
className="w-10 h-10 object-contain filter brightness-0 invert dark:brightness-100 dark:invert-0 group-hover:brightness-100 group-hover:invert-0 transition-all duration-300"
/>
</div>
<h4 className="font-semibold text-foreground text-sm mb-1">{tech.name}</h4>
<p className="text-xs text-muted-foreground">{tech.category}</p>
<h4 className="font-semibold text-foreground text-sm mb-1">
{tech.name}
</h4>
<p className="text-xs text-muted-foreground">
{tech.category}
</p>
</Card>
</motion.div>
))}
@@ -648,8 +789,12 @@ const WebAppTechStack = () => {
<div className="w-12 h-12 bg-accent/20 rounded-lg flex items-center justify-center mx-auto mb-4">
<IconComponent className="w-6 h-6 text-accent" />
</div>
<h4 className="font-semibold text-foreground mb-2">{framework.name}</h4>
<p className="text-sm text-muted-foreground leading-relaxed">{framework.description}</p>
<h4 className="font-semibold text-foreground mb-2">
{framework.name}
</h4>
<p className="text-sm text-muted-foreground leading-relaxed">
{framework.description}
</p>
</Card>
</motion.div>
);
@@ -667,30 +812,36 @@ const WebAppCaseStudies = () => {
{
title: "Enterprise Resource Planning System",
client: "TechCorp Industries",
description: "Comprehensive ERP solution streamlining operations across multiple departments with real-time analytics and automated workflows",
image: "https://images.unsplash.com/photo-1551434678-e076c223a692?w=400&h=300&fit=crop&auto=format",
description:
"Comprehensive ERP solution streamlining operations across multiple departments with real-time analytics and automated workflows",
image:
"https://images.unsplash.com/photo-1551434678-e076c223a692?w=400&h=300&fit=crop&auto=format",
results: "40% operational efficiency increase",
gradient: "from-blue-500/20 to-cyan-500/20",
features: "Multi-department integration, Real-time dashboards, Automated reporting"
features:
"Multi-department integration, Real-time dashboards, Automated reporting",
},
{
title: "Patient Management Portal",
client: "HealthFirst Clinics",
description: "Secure web application for patient records management, appointment scheduling, and telemedicine integration with HIPAA compliance",
description:
"Secure web application for patient records management, appointment scheduling, and telemedicine integration with HIPAA compliance",
image: patientManagementPortal,
results: "60% reduction in admin tasks",
gradient: "from-green-500/20 to-emerald-500/20",
features: "HIPAA compliance, Telemedicine, Automated scheduling"
features: "HIPAA compliance, Telemedicine, Automated scheduling",
},
{
title: "Supply Chain Management Platform",
client: "GlobalLogistics Co",
description: "End-to-end supply chain visibility platform with predictive analytics, inventory management, and vendor integration capabilities",
image: "https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d?w=400&h=300&fit=crop&auto=format",
description:
"End-to-end supply chain visibility platform with predictive analytics, inventory management, and vendor integration capabilities",
image:
"https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d?w=400&h=300&fit=crop&auto=format",
results: "25% cost reduction",
gradient: "from-orange-500/20 to-red-500/20",
features: "Predictive analytics, Vendor integration, Real-time tracking"
}
features: "Predictive analytics, Vendor integration, Real-time tracking",
},
];
return (
@@ -707,7 +858,7 @@ const WebAppCaseStudies = () => {
Custom Web Applications That Drive Business Growth
</h2>
</motion.div>
<motion.div
initial={{ opacity: 0, y: 40 }}
whileInView={{ opacity: 1, y: 0 }}
@@ -736,19 +887,24 @@ const WebAppCaseStudies = () => {
<div className="text-xs text-gray-400 mb-2 uppercase tracking-wider">
{study.client}
</div>
<Badge variant="secondary" className="text-xs bg-accent/20 text-accent border-accent/30">
<Badge
variant="secondary"
className="text-xs bg-accent/20 text-accent border-accent/30"
>
{study.results}
</Badge>
</div>
</div>
<h3 className="text-xl font-semibold text-white mb-4 leading-tight">
{study.title}
</h3>
</div>
<div className="px-8 pb-6 flex-1">
<div className={`relative rounded-xl overflow-hidden bg-gradient-to-br ${study.gradient} p-4 border border-gray-700`}>
<div
className={`relative rounded-xl overflow-hidden bg-gradient-to-br ${study.gradient} p-4 border border-gray-700`}
>
<ImageWithFallback
src={study.image}
alt={study.title}
@@ -756,26 +912,28 @@ const WebAppCaseStudies = () => {
/>
</div>
</div>
<div className="px-8 pb-6">
<p className="text-gray-300 text-sm leading-relaxed mb-4">
{study.description}
</p>
<div className="space-y-2">
<h4 className="text-xs font-medium text-white uppercase tracking-wider">Key Features:</h4>
<p className="text-xs text-gray-400">
{study.features}
</p>
<h4 className="text-xs font-medium text-white uppercase tracking-wider">
Key Features:
</h4>
<p className="text-xs text-gray-400">{study.features}</p>
</div>
</div>
<div className="p-8 pt-0 mt-auto">
<Button
variant="ghost"
<Button
variant="ghost"
size="sm"
className="w-full justify-between text-accent hover:text-accent hover:bg-accent/10 group-hover:translate-x-1 transition-all duration-300"
>
<span className="text-sm font-medium">VIEW CASE STUDY</span>
<span className="text-sm font-medium">
VIEW CASE STUDY
</span>
<ArrowRight className="w-4 h-4" />
</Button>
</div>
@@ -811,20 +969,26 @@ const WebAppInlineCTA = () => {
<div className="inline-block p-[2px] rounded-full bg-gradient-to-r from-accent via-blue-500 to-purple-500">
<div className="bg-background rounded-full px-6 py-3 flex items-center gap-2">
<Puzzle className="w-5 h-5 text-foreground" />
<span className="text-foreground text-base font-medium">Complex Solutions</span>
<span className="text-foreground text-base font-medium">
Complex Solutions
</span>
</div>
</div>
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground leading-tight">
Have a Complex Business Need?{" "}
<span className="text-accent">Let's Build Your Solution.</span>
</h2>
<p className="text-xl text-muted-foreground leading-relaxed max-w-2xl mx-auto">
Our experts provide clarity on how custom web apps can transform your operations.
Our experts provide clarity on how custom web apps can transform
your operations.
</p>
<ShimmerButton className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl">
<ShimmerButton
className="text-xl px-10 py-5 rounded-2xl shadow-lg hover:shadow-xl"
onClick={() => navigateTo("/start-a-project")}
>
<div className="inline-flex items-center gap-3">
<MessageSquare className="w-6 h-6 flex-shrink-0" />
<span>Get a Free Technical Consultation</span>
@@ -842,28 +1006,51 @@ const HireWebDevelopers = () => {
const developerTypes = [
{
title: "Frontend Specialists",
description: "React, Angular, Vue.js experts for stunning user interfaces",
description:
"React, Angular, Vue.js experts for stunning user interfaces",
icon: Layout,
skills: ["React/Angular/Vue", "TypeScript", "UI/UX Implementation", "Performance Optimization"]
skills: [
"React/Angular/Vue",
"TypeScript",
"UI/UX Implementation",
"Performance Optimization",
],
},
{
title: "Backend Engineers",
description: "Node.js, Python, Java developers for robust server-side solutions",
description:
"Node.js, Python, Java developers for robust server-side solutions",
icon: Server,
skills: ["API Development", "Database Design", "Security Implementation", "Scalable Architecture"]
skills: [
"API Development",
"Database Design",
"Security Implementation",
"Scalable Architecture",
],
},
{
title: "Full-Stack Developers",
description: "End-to-end development expertise for complete web solutions",
description:
"End-to-end development expertise for complete web solutions",
icon: Layers3,
skills: ["Frontend + Backend", "DevOps", "Database Management", "System Integration"]
skills: [
"Frontend + Backend",
"DevOps",
"Database Management",
"System Integration",
],
},
{
title: "DevOps Engineers",
description: "Cloud infrastructure and deployment automation specialists",
icon: CloudCog,
skills: ["AWS/Azure/GCP", "CI/CD Pipelines", "Container Orchestration", "Monitoring & Logging"]
}
skills: [
"AWS/Azure/GCP",
"CI/CD Pipelines",
"Container Orchestration",
"Monitoring & Logging",
],
},
];
return (
@@ -880,10 +1067,11 @@ const HireWebDevelopers = () => {
Augment Your Team with Our Expert Web App Developers
</h2>
<p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
Access highly skilled frontend, backend, and full-stack developers specializing in custom web solutions.
Access highly skilled frontend, backend, and full-stack developers
specializing in custom web solutions.
</p>
</motion.div>
<motion.div
initial={{ opacity: 0, y: 40 }}
whileInView={{ opacity: 1, y: 0 }}
@@ -915,10 +1103,16 @@ const HireWebDevelopers = () => {
{type.description}
</p>
<div className="space-y-2">
<h4 className="text-sm font-medium text-white">Core Skills:</h4>
<h4 className="text-sm font-medium text-white">
Core Skills:
</h4>
<div className="flex flex-wrap gap-2">
{type.skills.map((skill) => (
<Badge key={skill} variant="secondary" className="text-xs bg-gray-800/50 text-gray-300 border-gray-700">
<Badge
key={skill}
variant="secondary"
className="text-xs bg-gray-800/50 text-gray-300 border-gray-700"
>
{skill}
</Badge>
))}
@@ -948,7 +1142,7 @@ const HireWebDevelopers = () => {
<Button
variant="outline"
size="lg"
className="text-lg px-8 py-4 border-gray-600 text-gray-300 hover:bg-gray-800 hover:text-white"
className="text-lg px-8 py-4 h-[56px] border-gray-600 text-gray-300 hover:bg-gray-800 hover:text-white"
>
<div className="inline-flex items-center gap-2">
<FileText className="w-5 h-5 flex-shrink-0" />
@@ -967,20 +1161,24 @@ const CustomWebAppFAQs = () => {
const faqs = [
{
question: "How long does it take to develop a custom web app?",
answer: "Development timelines vary based on complexity and features. Simple web applications typically take 8-12 weeks, medium complexity apps with integrations take 12-20 weeks, and enterprise-level applications can take 20+ weeks. We provide detailed project timelines during the discovery phase based on your specific requirements."
answer:
"Development timelines vary based on complexity and features. Simple web applications typically take 8-12 weeks, medium complexity apps with integrations take 12-20 weeks, and enterprise-level applications can take 20+ weeks. We provide detailed project timelines during the discovery phase based on your specific requirements.",
},
{
question: "What is the typical cost range for custom web development?",
answer: "Custom web application costs depend on features, complexity, and integrations. Basic web apps start from $25,000-$50,000, mid-level applications range from $50,000-$150,000, and enterprise solutions can range from $150,000+. We provide detailed estimates after understanding your requirements and technical specifications."
answer:
"Custom web application costs depend on features, complexity, and integrations. Basic web apps start from $25,000-$50,000, mid-level applications range from $50,000-$150,000, and enterprise solutions can range from $150,000+. We provide detailed estimates after understanding your requirements and technical specifications.",
},
{
question: "Do you provide post-launch maintenance and support?",
answer: "Yes, we offer comprehensive post-launch support including bug fixes, security updates, performance monitoring, feature enhancements, and technical support. Our maintenance packages can be tailored to your needs, from basic monitoring to full-scale ongoing development and optimization."
answer:
"Yes, we offer comprehensive post-launch support including bug fixes, security updates, performance monitoring, feature enhancements, and technical support. Our maintenance packages can be tailored to your needs, from basic monitoring to full-scale ongoing development and optimization.",
},
{
question: "How do you ensure the security of custom web applications?",
answer: "We implement multiple security layers including secure coding practices, data encryption, authentication systems, regular security audits, OWASP compliance, and secure hosting environments. We also conduct penetration testing and provide ongoing security monitoring to protect against emerging threats."
}
answer:
"We implement multiple security layers including secure coding practices, data encryption, authentication systems, regular security audits, OWASP compliance, and secure hosting environments. We also conduct penetration testing and provide ongoing security monitoring to protect against emerging threats.",
},
];
return (
@@ -997,7 +1195,7 @@ const CustomWebAppFAQs = () => {
Frequently Asked Questions
</h2>
</motion.div>
<motion.div
initial={{ opacity: 0, y: 40 }}
whileInView={{ opacity: 1, y: 0 }}
@@ -1007,13 +1205,15 @@ const CustomWebAppFAQs = () => {
>
<Accordion type="single" collapsible className="space-y-8">
{faqs.map((faq, index) => (
<AccordionItem
key={index}
value={`item-${index}`}
<AccordionItem
key={index}
value={`item-${index}`}
className="bg-gray-900/50 backdrop-blur-md rounded-2xl border border-gray-800 px-10 shadow-lg"
>
<AccordionTrigger className="text-left hover:no-underline py-10 text-xl">
<span className="font-semibold text-white">{faq.question}</span>
<span className="font-semibold text-white">
{faq.question}
</span>
</AccordionTrigger>
<AccordionContent className="text-gray-300 pb-10 text-lg leading-relaxed">
{faq.answer}
@@ -1049,7 +1249,9 @@ const CustomWebAppFinalCTA = () => {
<div className="inline-block p-[2px] rounded-full bg-gradient-to-r from-accent via-blue-500 to-purple-500">
<div className="bg-background rounded-full px-6 py-3 flex items-center gap-2">
<Globe className="w-5 h-5 text-foreground" />
<span className="text-foreground text-base font-medium">Strategic Advantage</span>
<span className="text-foreground text-base font-medium">
Strategic Advantage
</span>
</div>
</div>
</motion.div>
@@ -1058,7 +1260,7 @@ const CustomWebAppFinalCTA = () => {
Build Your Strategic Advantage with a{" "}
<span className="text-accent">Custom Web Application</span>
</h2>
<motion.p
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
@@ -1066,7 +1268,8 @@ const CustomWebAppFinalCTA = () => {
viewport={{ once: true }}
className="text-xl text-muted-foreground mb-12 max-w-2xl mx-auto leading-relaxed"
>
WDI crafts powerful, secure, and intuitive web solutions designed specifically for your business success.
WDI crafts powerful, secure, and intuitive web solutions designed
specifically for your business success.
</motion.p>
<motion.div
@@ -1076,7 +1279,10 @@ const CustomWebAppFinalCTA = () => {
viewport={{ once: true }}
className="space-y-8"
>
<ShimmerButton className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25">
<ShimmerButton
className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25"
onClick={() => navigateTo("/start-a-project")}
>
<div className="inline-flex items-center gap-3">
<Rocket className="w-6 h-6 flex-shrink-0" />
<span>Start Your Custom Web Project Today</span>
@@ -1105,61 +1311,61 @@ export const CustomWebAppDevelopment = () => {
return (
<div className="dark min-h-screen">
<Navigation />
{/* Hero Section */}
<section className="bg-black">
<CustomWebAppHeroWithCTA />
</section>
{/* Benefits */}
<section className="bg-background">
<CustomWebAppBenefits />
</section>
{/* Development Process */}
<section className="bg-card">
<CustomWebAppProcess />
</section>
{/* Services */}
<section className="bg-background">
<CustomWebAppServices />
</section>
{/* Tech Stack */}
<section className="bg-card">
<WebAppTechStack />
</section>
{/* Case Studies */}
<section className="bg-background">
<WebAppCaseStudies />
</section>
{/* Mid-Page CTA */}
<section className="bg-card">
<WebAppInlineCTA />
</section>
{/* Hire Developers */}
<section className="bg-background">
<HireWebDevelopers />
</section>
{/* FAQs */}
<section className="bg-card">
<CustomWebAppFAQs />
</section>
{/* Final CTA */}
<section className="bg-background">
<CustomWebAppFinalCTA />
</section>
{/* Footer */}
<section className="bg-card">
<Footer />
</section>
</div>
);
};
};

572
pages/EcommercePlatforms.tsx
View File

File diff suppressed because it is too large Load Diff

254
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,82 +142,103 @@ 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 (
<div className="dark min-h-screen bg-background">
<Navigation />
{/* Hero Section */}
<section className="relative pt-24 pb-16 overflow-hidden">
<div className="absolute inset-0 bg-gradient-to-br from-[#E5195E]/10 via-background to-background" />
<div
<div
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>
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>
</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,25 +265,33 @@ 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}
</h3>
<p className="text-muted-foreground mb-6 leading-relaxed">
{stack.description}
</p>
<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>
))}
@@ -220,24 +314,29 @@ export const HireBackendDevelopers = () => {
Comprehensive backend skills for enterprise-grade applications
</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}
</h3>
<p className="text-muted-foreground text-sm mb-4 leading-relaxed">
{area.description}
</p>
<div className="space-y-1">
{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>
@@ -259,10 +358,13 @@ export const HireBackendDevelopers = () => {
Comprehensive backend solutions that power your applications
</p>
</div>
<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">
@@ -289,10 +391,13 @@ export const HireBackendDevelopers = () => {
Backend expertise for complex and demanding applications
</p>
</div>
<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>
@@ -312,23 +417,28 @@ export const HireBackendDevelopers = () => {
Real results from satisfied clients
</p>
</div>
<div className="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto">
{testimonials.map((testimonial, index) => (
<Card key={index} className="bg-card/50 border-white/10">
<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>
<p className="text-muted-foreground mb-6 leading-relaxed italic">
"{testimonial.quote}"
</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>
@@ -364,4 +482,4 @@ export const HireBackendDevelopers = () => {
<Footer />
</div>
);
};
};

181
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,59 +106,74 @@ 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 (
<div className="dark min-h-screen bg-background">
<Navigation />
{/* Hero Section */}
<section className="relative pt-24 pb-16 overflow-hidden">
<div className="absolute inset-0 bg-gradient-to-br from-[#E5195E]/10 via-background to-background" />
<div
<div
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>
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>
</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>
@@ -153,24 +204,29 @@ export const HireFrontendDevelopers = () => {
Comprehensive frontend skills for modern web development
</p>
</div>
<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}
</h3>
<p className="text-muted-foreground text-sm mb-4 leading-relaxed">
{area.description}
</p>
<div className="space-y-1">
{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>
@@ -192,10 +248,13 @@ export const HireFrontendDevelopers = () => {
Exceptional frontend solutions that enhance user engagement
</p>
</div>
<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">
@@ -222,10 +281,13 @@ export const HireFrontendDevelopers = () => {
Frontend expertise that makes a difference
</p>
</div>
<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>
@@ -245,23 +307,28 @@ export const HireFrontendDevelopers = () => {
Real results from satisfied clients
</p>
</div>
<div className="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto">
{testimonials.map((testimonial, index) => (
<Card key={index} className="bg-background/50 border-white/10">
<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>
<p className="text-muted-foreground mb-6 leading-relaxed italic">
"{testimonial.quote}"
</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>
@@ -297,4 +372,4 @@ export const HireFrontendDevelopers = () => {
<Footer />
</div>
);
};
};

195
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)"]
category: "Backend Technologies",
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,82 +90,97 @@ 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 (
<div className="dark min-h-screen bg-background">
<Navigation />
{/* Hero Section */}
<section className="relative pt-24 pb-16 overflow-hidden">
<div className="absolute inset-0 bg-gradient-to-br from-[#E5195E]/10 via-background to-background" />
<div
<div
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>
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>
</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,25 +208,33 @@ 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}
</h3>
<p className="text-muted-foreground mb-6 leading-relaxed">
{stack.description}
</p>
<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>
))}
@@ -208,20 +257,25 @@ export const HireFullStackDevelopers = () => {
Comprehensive technical skills across the entire development stack
</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-4 group-hover:text-[#E5195E] transition-colors duration-300">
{area.category}
</h3>
<div className="space-y-2">
{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>
@@ -243,10 +297,13 @@ export const HireFullStackDevelopers = () => {
Why full stack developers are the smart choice for your project
</p>
</div>
<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">
@@ -273,10 +330,13 @@ export const HireFullStackDevelopers = () => {
Complex applications that benefit from end-to-end expertise
</p>
</div>
<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>
@@ -296,23 +356,28 @@ export const HireFullStackDevelopers = () => {
Real results from satisfied clients
</p>
</div>
<div className="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto">
{testimonials.map((testimonial, index) => (
<Card key={index} className="bg-card/50 border-white/10">
<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>
<p className="text-muted-foreground mb-6 leading-relaxed italic">
"{testimonial.quote}"
</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>
@@ -348,4 +421,4 @@ export const HireFullStackDevelopers = () => {
<Footer />
</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>

236
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,86 +134,119 @@ 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 (
<div className="dark min-h-screen bg-background">
<Navigation />
{/* Hero Section */}
<section className="relative pt-24 pb-16 overflow-hidden">
<div className="absolute inset-0 bg-gradient-to-br from-[#E5195E]/10 via-background to-background" />
<div
<div
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>
Hire QA Engineers: Ensuring Flawless
<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,23 +260,29 @@ 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}
</h3>
<div className="space-y-2">
{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,10 +304,13 @@ export const HireQAEngineers = () => {
Quality assurance solutions that ensure reliable software delivery
</p>
</div>
<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">
@@ -231,23 +334,28 @@ export const HireQAEngineers = () => {
Client Success Stories
</h2>
</div>
<div className="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto">
{testimonials.map((testimonial, index) => (
<Card key={index} className="bg-background/50 border-white/10">
<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>
<p className="text-muted-foreground mb-6 leading-relaxed italic">
"{testimonial.quote}"
</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>
@@ -283,4 +399,4 @@ export const HireQAEngineers = () => {
<Footer />
</div>
);
};
};

247
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,78 +131,99 @@ 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 (
<div className="dark min-h-screen bg-background">
<Navigation />
{/* Hero Section */}
<section className="relative pt-24 pb-16 overflow-hidden">
<div className="absolute inset-0 bg-gradient-to-br from-[#E5195E]/10 via-background to-background" />
<div
<div
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>
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>
</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,23 +251,29 @@ 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}
</h3>
<div className="space-y-2">
{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,27 +292,33 @@ 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}
</h3>
<p className="text-muted-foreground text-sm mb-4 leading-relaxed">
{area.description}
</p>
<div className="space-y-1">
{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>
@@ -246,10 +340,13 @@ export const HireUIUXDesigners = () => {
Design solutions that drive engagement and business success
</p>
</div>
<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">
@@ -276,10 +373,13 @@ export const HireUIUXDesigners = () => {
Design expertise that transforms user experiences
</p>
</div>
<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>
@@ -299,23 +399,28 @@ export const HireUIUXDesigners = () => {
Real results from satisfied clients
</p>
</div>
<div className="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto">
{testimonials.map((testimonial, index) => (
<Card key={index} className="bg-card/50 border-white/10">
<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>
<p className="text-muted-foreground mb-6 leading-relaxed italic">
"{testimonial.quote}"
</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>
@@ -351,4 +464,4 @@ export const HireUIUXDesigners = () => {
<Footer />
</div>
);
};
};

203
pages/LeadershipTeam.tsx
View File

@@ -3,110 +3,83 @@ 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 (
<div className="dark min-h-screen bg-background">
<Navigation />
{/* Hero Section */}
<section className="relative pt-24 pb-16 overflow-hidden">
<div className="absolute inset-0 bg-gradient-to-br from-[#E5195E]/10 via-background to-background" />
<div
<div
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>
Meet the Visionaries Behind
<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>
@@ -122,15 +95,15 @@ export const LeadershipTeam = () => {
{/* Profile Image */}
<div className="relative mb-6">
<div className="aspect-square rounded-2xl overflow-hidden bg-gradient-to-br from-[#E5195E]/20 to-[#FF6B9D]/20">
<img
src={leader.image}
<img
src={leader.image}
alt={leader.name}
className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-300"
/>
</div>
<div className="absolute inset-0 rounded-2xl bg-gradient-to-t from-black/20 to-transparent" />
</div>
{/* Content */}
<div className="space-y-4">
<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,49 +123,60 @@ 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>
<div className="grid md:grid-cols-3 gap-8">
{[
{
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>
@@ -252,4 +213,4 @@ export const LeadershipTeam = () => {
<Footer />
</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>

144
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,10 +984,12 @@ 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>
<div className="grid lg:grid-cols-3 gap-8">
{caseStudies.map((study, index) => {
const IndustryIcon = getIndustryIcon(study.industry);
@@ -975,58 +1003,70 @@ 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");
}
}}
>
<Card className="bg-gray-900/50 backdrop-blur-md border-gray-800 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl overflow-hidden h-full">
<div className="aspect-video overflow-hidden relative bg-black/20">
<img
src={study.image}
<img
src={study.image}
alt={study.title}
className="w-full h-full object-contain group-hover:scale-105 transition-transform duration-300"
/>
</div>
<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>
<h3 className="text-xl font-semibold text-white mb-2 group-hover:text-accent transition-colors duration-300">
{study.title}
</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>
))}
</div>
</div>
<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>
))}
</div>
<div className="flex items-center justify-between pt-4 border-t border-gray-800">
<div className="flex items-center gap-3 text-xs text-gray-400">
<div className="flex items-center gap-1">
@@ -1038,18 +1078,18 @@ const PWASuccessStories = () => {
{study.teamSize}
</div>
</div>
<Button
variant="ghost"
size="sm"
<Button
variant="ghost"
size="sm"
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>

617
pages/SaaSProductEngineering.tsx
View File

File diff suppressed because it is too large Load Diff

279
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
import {
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 */}
@@ -50,12 +55,13 @@ const HeroWithCTA = () => {
<span className="text-[#E5195E]">Software Engineering</span>
<span className="text-white"> Solutions</span>
</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>
{/* CTAs */}
<motion.div
initial={{ opacity: 0, y: 20 }}
@@ -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,15 +82,15 @@ 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>
</Button>
</motion.div>
</motion.div>
{/* Right side with stats */}
<motion.div
initial={{ opacity: 0, x: 50 }}
@@ -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,10 +178,11 @@ 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>
<motion.div
initial={{ opacity: 0, y: 40 }}
whileInView={{ opacity: 1, y: 0 }}
@@ -161,7 +192,7 @@ const HorizontalTagScroller = () => {
>
<div className="absolute left-0 top-0 bottom-0 w-20 bg-gradient-to-r from-card to-transparent z-10 pointer-events-none"></div>
<div className="absolute right-0 top-0 bottom-0 w-20 bg-gradient-to-l from-card to-transparent z-10 pointer-events-none"></div>
<div className="flex animate-marquee hover:animate-marquee-paused">
{/* First set */}
{practices.map((practice, index) => {
@@ -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">
@@ -188,7 +221,7 @@ const HorizontalTagScroller = () => {
</motion.div>
);
})}
{/* Second and third sets for seamless loop */}
{[...practices, ...practices].map((practice, index) => {
const IconComponent = practice.icon;
@@ -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",
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 (
@@ -266,7 +304,7 @@ const SideBySideContentWithIcons = () => {
<span className="text-[#E5195E]">WDI</span>
<span className="text-white"> for Software Engineering</span>
</h2>
<p className="text-2xl text-gray-300 leading-relaxed">
Engineering excellence that stands the test of time.
</p>
@@ -297,7 +335,7 @@ const SideBySideContentWithIcons = () => {
<div className="mb-6">
<IconComponent className="w-10 h-10 text-accent mx-auto" />
</div>
<h3 className="text-lg font-semibold text-white leading-tight">
{advantage.title}
</h3>
@@ -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",
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,10 +410,11 @@ 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>
<motion.div
initial={{ opacity: 0, y: 40 }}
whileInView={{ opacity: 1, y: 0 }}
@@ -396,7 +440,7 @@ const TabbedServiceDisplay = () => {
<div className="w-12 h-12 bg-accent/20 rounded-lg flex items-center justify-center">
<IconComponent className="w-6 h-6 text-accent" />
</div>
<div>
<h3 className="text-xl font-semibold text-white mb-4">
{service.title}
@@ -440,37 +484,44 @@ 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
<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" />
<span>Start Your Software Project</span>
</div>
</ShimmerButton>
{/* 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,15 +540,15 @@ 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",
title: "Backend Engineers",
icon: Server,
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,10 +583,11 @@ 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>
<motion.div
initial={{ opacity: 0, y: 40 }}
whileInView={{ opacity: 1, y: 0 }}
@@ -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">
@@ -569,26 +625,30 @@ const HireDevelopersSection = () => {
</div>
</div>
</div>
<h3 className="text-xl font-semibold text-foreground mb-4 leading-tight">
{specialist.title}
</h3>
</div>
{/* Skills */}
<div className="px-8 pb-6 flex-1">
<div className="flex flex-wrap gap-2">
{specialist.skills.map((skill) => (
<Badge key={skill} variant="secondary" className="text-xs bg-white/10 text-foreground">
<Badge
key={skill}
variant="secondary"
className="text-xs bg-white/10 text-foreground"
>
{skill}
</Badge>
))}
</div>
</div>
{/* CTA */}
<div className="p-8 pt-0 mt-auto space-y-3">
<ShimmerButton
<ShimmerButton
className="w-full py-3 text-sm rounded-xl shadow-lg hover:shadow-xl"
onClick={() => navigateTo(specialist.link)}
>
@@ -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() {
@@ -644,7 +709,7 @@ export function SoftwareEngineering() {
<ProcessSection />
<InlineCTA />
<HireDevelopersSection />
<FAQSection
<FAQSection
title="Software Engineering Questions"
subtitle="Get answers to common questions about our software engineering services."
faqs={softwareEngineeringFAQs}
@@ -652,4 +717,4 @@ export function SoftwareEngineering() {
<Footer />
</div>
);
}
}

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