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 { motion } from "framer-motion";
import { useRef } from "react"; 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 { Button } from "./ui/button";
import { Badge } from "./ui/badge"; import { Badge } from "./ui/badge";
import { navigateTo } from "@/App";
const steps = [ const steps = [
{ {
id: "step-1", id: "step-1",
title: "1. Define Scope", 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: { visual: {
type: "icon_or_doc_mockup", type: "icon_or_doc_mockup",
style: "minimal_ui" style: "minimal_ui",
} },
}, },
{ {
id: "step-2", id: "step-2",
title: "2. Design UI/UX", 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: [ tags: [
{ label: "Wireframes", color: "#6366F1" }, { label: "Wireframes", color: "#6366F1" },
{ label: "Prototyping", color: "#10B981" }, { label: "Prototyping", color: "#10B981" },
{ label: "UI System", color: "#F59E0B" } { label: "UI System", color: "#F59E0B" },
] ],
}, },
{ {
id: "step-3", id: "step-3",
title: "3. Develop with Agile Sprints", 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: [ tags: [
{ label: "Frontend", color: "#3B82F6" }, { label: "Frontend", color: "#3B82F6" },
{ label: "Backend", color: "#0EA5E9" }, { label: "Backend", color: "#0EA5E9" },
{ label: "APIs", color: "#8B5CF6" } { label: "APIs", color: "#8B5CF6" },
] ],
}, },
{ {
id: "step-4", id: "step-4",
title: "4. Test, Launch & Scale", 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: [ chat_simulation: [
{ from: "You", text: "Are we ready to go live?" }, { 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 // Chat simulation component - Compact version
const ChatSimulation = ({ messages }: { messages: Array<{ from: string; text: string }> }) => { const ChatSimulation = ({
messages,
}: {
messages: Array<{ from: string; text: string }>;
}) => {
return ( return (
<div className="space-y-2 p-3 bg-background rounded-lg border border-border"> <div className="space-y-2 p-3 bg-background rounded-lg border border-border">
{messages.map((message, index) => ( {messages.map((message, index) => (
@@ -56,7 +75,9 @@ const ChatSimulation = ({ messages }: { messages: Array<{ from: string; text: st
whileInView={{ opacity: 1, x: 0 }} whileInView={{ opacity: 1, x: 0 }}
transition={{ duration: 0.5, delay: index * 0.3 }} transition={{ duration: 0.5, delay: index * 0.3 }}
viewport={{ once: true }} viewport={{ once: true }}
className={`flex ${message.from === "You" ? "justify-start" : "justify-end"}`} className={`flex ${
message.from === "You" ? "justify-start" : "justify-end"
}`}
> >
<div <div
className={`max-w-[80%] px-3 py-1.5 rounded-lg ${ 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" : "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 className="text-xs">{message.text}</div>
</div> </div>
</motion.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 = () => { const DocumentMockup = () => {
return ( return (
<div className="relative"> <div className="relative">
@@ -84,11 +107,13 @@ const DocumentMockup = () => {
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<FileText className="w-4 h-4 text-accent" /> <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>
<div className="text-xs text-muted-foreground">Draft v1.2</div> <div className="text-xs text-muted-foreground">Draft v1.2</div>
</div> </div>
{/* Document sections */} {/* Document sections */}
<div className="space-y-2"> <div className="space-y-2">
<motion.div <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-full"></div>
<div className="h-1.5 bg-muted/60 rounded w-5/6"></div> <div className="h-1.5 bg-muted/60 rounded w-5/6"></div>
</motion.div> </motion.div>
<div className="flex gap-2"> <div className="flex gap-2">
<motion.div <motion.div
initial={{ opacity: 0, scale: 0.95 }} initial={{ opacity: 0, scale: 0.95 }}
@@ -114,7 +139,7 @@ const DocumentMockup = () => {
<CheckCircle className="w-3 h-3 text-green-500" /> <CheckCircle className="w-3 h-3 text-green-500" />
<span className="text-muted-foreground">Requirements</span> <span className="text-muted-foreground">Requirements</span>
</motion.div> </motion.div>
<motion.div <motion.div
initial={{ opacity: 0, scale: 0.95 }} initial={{ opacity: 0, scale: 0.95 }}
whileInView={{ opacity: 1, scale: 1 }} whileInView={{ opacity: 1, scale: 1 }}
@@ -134,18 +159,24 @@ const DocumentMockup = () => {
}; };
// Process step card component // 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 cardRef = useRef(null);
const renderContent = () => { const renderContent = () => {
if (step.visual?.type === "icon_or_doc_mockup") { if (step.visual?.type === "icon_or_doc_mockup") {
return <DocumentMockup />; return <DocumentMockup />;
} }
if (step.chat_simulation) { if (step.chat_simulation) {
return <ChatSimulation messages={step.chat_simulation} />; return <ChatSimulation messages={step.chat_simulation} />;
} }
if (step.tags) { if (step.tags) {
return ( return (
<div className="flex flex-wrap gap-2"> <div className="flex flex-wrap gap-2">
@@ -168,10 +199,10 @@ const ProcessCard = ({ step, index }: { step: typeof steps[0]; index: number })
</div> </div>
); );
} }
return null; return null;
}; };
return ( return (
<motion.div <motion.div
ref={cardRef} ref={cardRef}
@@ -193,7 +224,7 @@ const ProcessCard = ({ step, index }: { step: typeof steps[0]; index: number })
> >
{step.title} {step.title}
</motion.h3> </motion.h3>
<motion.p <motion.p
initial={{ opacity: 0, y: 10 }} initial={{ opacity: 0, y: 10 }}
whileInView={{ opacity: 1, y: 0 }} whileInView={{ opacity: 1, y: 0 }}
@@ -204,7 +235,7 @@ const ProcessCard = ({ step, index }: { step: typeof steps[0]; index: number })
{step.description} {step.description}
</motion.p> </motion.p>
</div> </div>
{/* Content */} {/* Content */}
<motion.div <motion.div
initial={{ opacity: 0, y: 20 }} initial={{ opacity: 0, y: 20 }}
@@ -221,7 +252,7 @@ const ProcessCard = ({ step, index }: { step: typeof steps[0]; index: number })
export const ProcessSection = () => { export const ProcessSection = () => {
const titleRef = useRef(null); const titleRef = useRef(null);
return ( return (
<section className="relative overflow-hidden py-20 bg-background"> <section className="relative overflow-hidden py-20 bg-background">
<div className="container mx-auto px-6 lg:px-8"> <div className="container mx-auto px-6 lg:px-8">
@@ -244,18 +275,19 @@ export const ProcessSection = () => {
viewport={{ once: true }} viewport={{ once: true }}
className="text-muted-foreground text-xl max-w-2xl mx-auto" className="text-muted-foreground text-xl max-w-2xl mx-auto"
> >
Our proven process transforms your vision into reality through strategic planning, Our proven process transforms your vision into reality through
thoughtful design, and expert engineering—every step of the way. strategic planning, thoughtful design, and expert engineering—every
step of the way.
</motion.p> </motion.p>
</div> </div>
{/* Cards Grid */} {/* Cards Grid */}
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8 max-w-6xl mx-auto"> <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 max-w-6xl mx-auto">
{steps.map((step, index) => ( {steps.map((step, index) => (
<ProcessCard key={step.id} step={step} index={index} /> <ProcessCard key={step.id} step={step} index={index} />
))} ))}
</div> </div>
{/* Bottom CTA */} {/* Bottom CTA */}
<motion.div <motion.div
initial={{ opacity: 0, y: 30 }} initial={{ opacity: 0, y: 30 }}
@@ -267,6 +299,7 @@ export const ProcessSection = () => {
<Button <Button
size="lg" size="lg"
className="bg-accent hover:bg-accent/90 text-accent-foreground border-0 rounded-lg px-8 py-4 group text-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"> <span className="flex items-center gap-2">
Start Your Project Today Start Your Project Today
@@ -277,4 +310,4 @@ export const ProcessSection = () => {
</div> </div>
</section> </section>
); );
}; };

79
components/ResourceCards.tsx
View File

@@ -7,46 +7,61 @@ import { navigateTo } from "../App";
const resources = [ const resources = [
{ {
title: "UX review presentations", 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", readTime: "8 min read",
date: "Dec 15, 2024", 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: { author: {
name: "Olivia Rhye", 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", category: "Design",
slug: "ux-review-presentations" slug: "ux-review-presentations",
}, },
{ {
title: "Migrating to Linear 101", title: "Migrating to Linear 101",
excerpt: "Linear helps streamline software projects, sprints, tasks, and bug tracking. Here's how to get started and make the most of it.", excerpt:
readTime: "6 min read", "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", 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: { author: {
name: "Phoenix Baker", 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", category: "Software Engineering",
slug: "migrating-to-linear-101" slug: "migrating-to-linear-101",
}, },
{ {
title: "Building your API Stack", 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", readTime: "12 min read",
date: "Dec 5, 2024", 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: { author: {
name: "Lana Steiner", 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", 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 ( return (
<motion.article <motion.article
initial={{ opacity: 0, y: 50 }} initial={{ opacity: 0, y: 50 }}
@@ -70,7 +85,7 @@ const ResourceCard = ({ resource, index }: { resource: typeof resources[0]; inde
</span> </span>
</div> </div>
</div> </div>
{/* Content */} {/* Content */}
<div className="p-6 space-y-4"> <div className="p-6 space-y-4">
{/* Date and Read Time */} {/* Date and Read Time */}
@@ -84,20 +99,20 @@ const ResourceCard = ({ resource, index }: { resource: typeof resources[0]; inde
{resource.readTime} {resource.readTime}
</div> </div>
</div> </div>
{/* Title */} {/* Title */}
<h3 className="text-foreground font-medium leading-tight group-hover:text-accent transition-colors"> <h3 className="text-foreground font-medium leading-tight group-hover:text-accent transition-colors">
{resource.title} {resource.title}
</h3> </h3>
{/* Excerpt */} {/* Excerpt */}
<p className="text-muted-foreground text-sm leading-relaxed"> <p className="text-muted-foreground text-sm leading-relaxed">
{resource.excerpt} {resource.excerpt}
</p> </p>
{/* Author */} {/* Author */}
<div className="flex items-center gap-3 pt-2 border-t border-border"> <div className="flex items-center justify-end gap-3 pt-2 border-t border-border">
<ImageWithFallback {/* <ImageWithFallback
src={resource.author.avatar} src={resource.author.avatar}
alt={resource.author.name} alt={resource.author.name}
className="w-10 h-10 rounded-full object-cover" 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"> <div className="font-medium text-foreground text-sm">
{resource.author.name} {resource.author.name}
</div> </div>
</div> </div> */}
<Button <Button
variant="ghost" variant="ghost"
size="sm" size="sm"
@@ -140,17 +155,22 @@ export const ResourceCards = () => {
Insights for Founders & Product Leaders Insights for Founders & Product Leaders
</h2> </h2>
<p className="text-muted-foreground text-lg max-w-2xl mx-auto"> <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> </p>
</motion.div> </motion.div>
{/* Resource Cards Grid */} {/* Resource Cards Grid */}
<div className="grid lg:grid-cols-3 gap-8 mb-12 max-w-7xl mx-auto"> <div className="grid lg:grid-cols-3 gap-8 mb-12 max-w-7xl mx-auto">
{resources.map((resource, index) => ( {resources.map((resource, index) => (
<ResourceCard key={resource.title} resource={resource} index={index} /> <ResourceCard
key={resource.title}
resource={resource}
index={index}
/>
))} ))}
</div> </div>
{/* CTA */} {/* CTA */}
<motion.div <motion.div
initial={{ opacity: 0, y: 20 }} initial={{ opacity: 0, y: 20 }}
@@ -159,11 +179,14 @@ export const ResourceCards = () => {
viewport={{ once: true }} viewport={{ once: true }}
className="text-center" 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" /> View All Resources <ArrowRight className="w-4 h-4 ml-2" />
</Button> </Button>
</motion.div> </motion.div>
</div> </div>
</section> </section>
); );
}; };

2
components/ui/checkbox.tsx
View File

@@ -14,7 +14,7 @@ function Checkbox({
<CheckboxPrimitive.Root <CheckboxPrimitive.Root
data-slot="checkbox" data-slot="checkbox"
className={cn( 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, className,
)} )}
{...props} {...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 <Button
variant="secondary" variant="secondary"
size="lg" size="lg"
className="text-lg px-8 py-4" className="text-lg px-8 py-4 h-[56px]"
onClick={() => navigateTo('/case-studies')} onClick={() => navigateTo('/case-studies')}
> >
<Eye className="w-4 h-4 flex-shrink-0" /> <Eye className="w-4 h-4 flex-shrink-0" />
@@ -544,7 +544,7 @@ const InlineCTA = () => {
<Button <Button
variant="secondary" variant="secondary"
size="lg" 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')} onClick={() => navigateTo('/services')}
> >
<Briefcase className="w-6 h-6 flex-shrink-0" /> <Briefcase className="w-6 h-6 flex-shrink-0" />
@@ -562,7 +562,7 @@ const InlineCTA = () => {
const aboutWDIFAQs = [ const aboutWDIFAQs = [
{ {
question: "When was WDI founded?", 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?", question: "What makes WDI different from other development companies?",
@@ -589,7 +589,7 @@ export const AboutWDI = () => {
<HeroWithCTA /> <HeroWithCTA />
<WhyChooseWDISection /> <WhyChooseWDISection />
<ImpactNumbersSection /> <ImpactNumbersSection />
<LearnMoreSection /> {/* <LearnMoreSection /> */}
<TestimonialSection /> <TestimonialSection />
<MissionSection /> <MissionSection />
<ProcessSection /> <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 { Card, CardContent } from "../components/ui/card";
import { ShimmerButton } from "../components/ui/shimmer-button"; import { ShimmerButton } from "../components/ui/shimmer-button";
import androidVectorImage from "../src/images/android-vector.png"; import androidVectorImage from "../src/images/android-vector.png";
import { navigateTo } from "@/App";
// Android Hero Section with Android device mockups and Android vector // Android Hero Section with Android device mockups and Android vector
const AndroidHeroWithCTA = () => { const AndroidHeroWithCTA = () => {
@@ -113,7 +114,10 @@ const AndroidHeroWithCTA = () => {
transition={{ duration: 0.8, delay: 0.3 }} transition={{ duration: 0.8, delay: 0.3 }}
className="flex flex-col sm:flex-row gap-4" 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"> <div className="inline-flex items-center gap-2">
<svg <svg
className="w-6 h-4 flex-shrink-0" className="w-6 h-4 flex-shrink-0"
@@ -911,7 +915,10 @@ const AndroidInlineCTA = () => {
and create apps that stand out. and create apps that stand out.
</p> </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"> <div className="inline-flex items-center gap-3">
<svg <svg
className="w-6 h-6 flex-shrink-0" className="w-6 h-6 flex-shrink-0"
@@ -1054,7 +1061,10 @@ const HireAndroidDevelopers = () => {
viewport={{ once: true }} viewport={{ once: true }}
className="flex flex-col sm:flex-row gap-4 justify-center" 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"> <div className="inline-flex items-center gap-2">
<UserPlus className="w-5 h-5 flex-shrink-0" /> <UserPlus className="w-5 h-5 flex-shrink-0" />
<span>Hire Android Developers</span> <span>Hire Android Developers</span>
@@ -1062,7 +1072,7 @@ const HireAndroidDevelopers = () => {
</ShimmerButton> </ShimmerButton>
<Button <Button
variant="outline" 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> <span>Request Profiles</span>
<ArrowRight className="ml-2 w-4 h-4" /> <ArrowRight className="ml-2 w-4 h-4" />
@@ -1213,7 +1223,10 @@ const AndroidFinalCTA = () => {
viewport={{ once: true }} viewport={{ once: true }}
className="space-y-8" 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"> <div className="inline-flex items-center gap-3">
<svg <svg
className="w-6 h-6 flex-shrink-0" className="w-6 h-6 flex-shrink-0"

104
pages/Careers.tsx
View File

@@ -17,75 +17,77 @@ import {
TrendingUp, TrendingUp,
Briefcase, Briefcase,
Building, Building,
Database Database,
Bug,
LineChart
} from "lucide-react"; } from "lucide-react";
export const Careers = () => { export const Careers = () => {
// Job positions data // Job positions data
const openPositions = [ const openPositions = [
{ {
title: "Frontend Developer", title: "Jr. Flutter Developer",
department: "Engineering", department: "Mobile Development",
location: "Remote", location: "In-office",
type: "Full-time", 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 icon: Code
}, },
{ {
title: "Backend Developer", title: "Jr. React.js Developer",
department: "Engineering", department: "Frontend Development",
location: "Mumbai", location: "In-office",
type: "Full-time", 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 icon: Database
}, },
{ {
title: "Mobile App Developer", title: "Jr. Node.js Developer",
department: "Engineering", department: "Backend Development",
location: "Remote", location: "In-office",
type: "Full-time", type: "Full-time",
description: "Create native iOS and Android apps or cross-platform solutions using React Native.", description: "Design and implement backend services and RESTful APIs using Node.js, Express, and modern JavaScript/TypeScript.",
icon: Code icon: Database
}, },
{ {
title: "UI/UX Designer", title: "Jr. Python Developer",
department: "Design", department: "Backend Development",
location: "Remote", location: "In-office",
type: "Full-time", type: "Full-time",
description: "Design intuitive user interfaces and create engaging user experiences for digital products.", description: "Develop server-side applications, automation scripts, and data-driven systems using Python and relevant frameworks like Django or Flask.",
icon: Palette 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", title: "Business Development Executive (IT)",
department: "Product", department: "Sales & Business Development",
location: "Mumbai", location: "In-office",
type: "Full-time", type: "Full-time",
description: "Drive product strategy, roadmap planning, and cross-functional team collaboration.", description: "Generate leads, build client relationships, and drive sales growth for IT products and software services.",
icon: Settings icon: LineChart
},
{
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
} }
]; ];
@@ -269,7 +271,7 @@ Best regards,
</motion.div> </motion.div>
{/* Send CV Button */} {/* Send CV Button */}
<motion.div {/* <motion.div
initial={{ opacity: 0, y: 20 }} initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }} whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6, delay: 0.3 }} transition={{ duration: 0.6, delay: 0.3 }}
@@ -284,7 +286,7 @@ Best regards,
Send Your CV Send Your CV
<ArrowRight className="ml-3 w-5 h-5" /> <ArrowRight className="ml-3 w-5 h-5" />
</Button> </Button>
</motion.div> </motion.div> */}
</motion.div> </motion.div>
</div> </div>
</section> </section>

439
pages/CrossPlatformAppDevelopment.tsx
View File

@@ -20,17 +20,28 @@ import {
UserPlus, UserPlus,
Users2, Users2,
Wrench, Wrench,
Zap Zap,
} from "lucide-react"; } from "lucide-react";
import { ImageWithFallback } from "../components/figma/ImageWithFallback"; import { ImageWithFallback } from "../components/figma/ImageWithFallback";
import { Footer } from "../components/Footer"; import { Footer } from "../components/Footer";
import { Navigation } from "../components/Navigation"; 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 { Badge } from "../components/ui/badge";
import { Button } from "../components/ui/button"; import { Button } from "../components/ui/button";
import { Card, CardContent } from "../components/ui/card"; import { Card, CardContent } from "../components/ui/card";
import { ShimmerButton } from "../components/ui/shimmer-button"; 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 // Cross-Platform Hero Section
const CrossPlatformHeroWithCTA = () => { const CrossPlatformHeroWithCTA = () => {
@@ -50,7 +61,9 @@ const CrossPlatformHeroWithCTA = () => {
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6 }} 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> </motion.div>
{/* Main Heading */} {/* Main Heading */}
@@ -58,12 +71,13 @@ const CrossPlatformHeroWithCTA = () => {
<h1 className="text-4xl md:text-5xl lg:text-6xl font-semibold text-white leading-tight"> <h1 className="text-4xl md:text-5xl lg:text-6xl font-semibold text-white leading-tight">
Efficient Cross-Platform App Development Efficient Cross-Platform App Development
</h1> </h1>
<p className="text-lg text-gray-300 leading-relaxed max-w-lg"> <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> </p>
</div> </div>
{/* CTAs */} {/* CTAs */}
<motion.div <motion.div
initial={{ opacity: 0, y: 20 }} initial={{ opacity: 0, y: 20 }}
@@ -71,7 +85,10 @@ const CrossPlatformHeroWithCTA = () => {
transition={{ duration: 0.8, delay: 0.3 }} transition={{ duration: 0.8, delay: 0.3 }}
className="flex flex-col sm:flex-row gap-4" 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"> <div className="inline-flex items-center gap-2">
<Share2 className="w-5 h-5 flex-shrink-0" /> <Share2 className="w-5 h-5 flex-shrink-0" />
<span>Discover Cross-Platform Benefits</span> <span>Discover Cross-Platform Benefits</span>
@@ -86,7 +103,7 @@ const CrossPlatformHeroWithCTA = () => {
</a> </a>
</motion.div> </motion.div>
</motion.div> </motion.div>
{/* Right side with overlapping device mockups */} {/* Right side with overlapping device mockups */}
<motion.div <motion.div
initial={{ opacity: 0, x: 50 }} initial={{ opacity: 0, x: 50 }}
@@ -118,11 +135,13 @@ const CrossPlatformHeroWithCTA = () => {
<div className="h-8 bg-gray-700 rounded-lg"></div> <div className="h-8 bg-gray-700 rounded-lg"></div>
</div> </div>
<div className="h-12 bg-blue-500/20 rounded-lg mt-4 flex items-center justify-center"> <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> </div>
</div> </div>
{/* Android-style phone (right) */} {/* 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="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"> <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 className="h-8 bg-gray-700 rounded-lg"></div>
</div> </div>
<div className="h-12 bg-green-500/20 rounded-lg mt-4 flex items-center justify-center"> <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> </div>
</div> </div>
{/* Central connection indicator */} {/* 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"> <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" /> <GitMerge className="w-8 h-8 text-accent" />
</div> </div>
</div> </div>
</motion.div> </motion.div>
{/* Cross-Platform Technology Badges */} {/* Cross-Platform Technology Badges */}
<motion.div <motion.div
initial={{ opacity: 0, y: 30 }} initial={{ opacity: 0, y: 30 }}
@@ -156,13 +177,22 @@ const CrossPlatformHeroWithCTA = () => {
transition={{ duration: 0.8, delay: 0.6 }} transition={{ duration: 0.8, delay: 0.6 }}
className="flex justify-center gap-4 flex-wrap" 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 Flutter
</Badge> </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 React Native
</Badge> </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 Single Codebase
</Badge> </Badge>
</motion.div> </motion.div>
@@ -180,28 +210,33 @@ const CrossPlatformBenefits = () => {
{ {
icon: Clock, icon: Clock,
title: "Faster Time-to-Market", 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, icon: DollarSign,
title: "Cost-Effective", 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, icon: Users2,
title: "Wider Audience Reach", 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, icon: Layout,
title: "Unified User Experience", 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, icon: Wrench,
title: "Simplified Maintenance", 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 ( return (
@@ -218,7 +253,8 @@ const CrossPlatformBenefits = () => {
Advantages of Choosing Cross-Platform Advantages of Choosing Cross-Platform
</h2> </h2>
<p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed"> <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> </p>
</motion.div> </motion.div>
@@ -317,7 +353,8 @@ const CrossPlatformTechnologies = () => {
Leading Cross-Platform Frameworks We Utilize Leading Cross-Platform Frameworks We Utilize
</h2> </h2>
<p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed"> <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> </p>
</motion.div> </motion.div>
@@ -337,7 +374,10 @@ const CrossPlatformTechnologies = () => {
Flutter Development Flutter Development
</div> </div>
</TabsTrigger> </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="flex items-center gap-2">
<div className="w-6 h-6 bg-cyan-500 rounded flex items-center justify-center"> <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> <span className="text-white text-xs font-bold">RN</span>
@@ -358,28 +398,39 @@ const CrossPlatformTechnologies = () => {
</div> </div>
</div> </div>
<div> <div>
<h3 className="text-2xl font-semibold text-white">Flutter Development</h3> <h3 className="text-2xl font-semibold text-white">
<p className="text-gray-400">Google's UI toolkit for natively compiled applications</p> Flutter Development
</h3>
<p className="text-gray-400">
Google's UI toolkit for natively compiled applications
</p>
</div> </div>
</div> </div>
<p className="text-gray-300 leading-relaxed"> <p className="text-gray-300 leading-relaxed">
Known for expressive UIs and hot-reload functionality that accelerates development cycles. Known for expressive UIs and hot-reload functionality that
Flutter allows for pixel-perfect designs and smooth animations across platforms. accelerates development cycles. Flutter allows for
pixel-perfect designs and smooth animations across
platforms.
</p> </p>
</div> </div>
<div className="space-y-4"> <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"> <ul className="space-y-3">
{[ {[
"Excellent performance with native compilation", "Excellent performance with native compilation",
"Beautiful UIs with customizable widgets", "Beautiful UIs with customizable widgets",
"Single codebase for mobile, web, and desktop", "Single codebase for mobile, web, and desktop",
"Fast development with hot-reload", "Fast development with hot-reload",
"Growing ecosystem and strong Google backing" "Growing ecosystem and strong Google backing",
].map((benefit, index) => ( ].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" /> <CheckCircle className="w-5 h-5 text-blue-500 flex-shrink-0" />
{benefit} {benefit}
</li> </li>
@@ -394,9 +445,11 @@ const CrossPlatformTechnologies = () => {
<div className="w-12 h-12 bg-blue-500/20 rounded-xl flex items-center justify-center"> <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" /> <Code className="w-6 h-6 text-blue-500" />
</div> </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>
<div className="grid grid-cols-2 gap-4"> <div className="grid grid-cols-2 gap-4">
{[ {[
"Dart Language", "Dart Language",
@@ -404,9 +457,12 @@ const CrossPlatformTechnologies = () => {
"Cupertino Widgets", "Cupertino Widgets",
"Firebase Integration", "Firebase Integration",
"Native Plugins", "Native Plugins",
"State Management" "State Management",
].map((tech, index) => ( ].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> <span className="text-gray-300 text-sm">{tech}</span>
</div> </div>
))} ))}
@@ -427,28 +483,38 @@ const CrossPlatformTechnologies = () => {
</div> </div>
</div> </div>
<div> <div>
<h3 className="text-2xl font-semibold text-white">React Native Development</h3> <h3 className="text-2xl font-semibold text-white">
<p className="text-gray-400">Facebook's framework for building native mobile apps</p> React Native Development
</h3>
<p className="text-gray-400">
Facebook's framework for building native mobile apps
</p>
</div> </div>
</div> </div>
<p className="text-gray-300 leading-relaxed"> <p className="text-gray-300 leading-relaxed">
Uses JavaScript and React paradigms to create truly native mobile applications. Uses JavaScript and React paradigms to create truly native
Leverages existing web development skills for mobile app creation. mobile applications. Leverages existing web development
skills for mobile app creation.
</p> </p>
</div> </div>
<div className="space-y-4"> <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"> <ul className="space-y-3">
{[ {[
"Large community and extensive libraries", "Large community and extensive libraries",
"Reusable components across platforms", "Reusable components across platforms",
"Efficient development cycles", "Efficient development cycles",
"Native performance and feel", "Native performance and feel",
"Easy integration with existing React web apps" "Easy integration with existing React web apps",
].map((benefit, index) => ( ].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" /> <CheckCircle className="w-5 h-5 text-cyan-500 flex-shrink-0" />
{benefit} {benefit}
</li> </li>
@@ -463,9 +529,11 @@ const CrossPlatformTechnologies = () => {
<div className="w-12 h-12 bg-cyan-500/20 rounded-xl flex items-center justify-center"> <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" /> <Code className="w-6 h-6 text-cyan-500" />
</div> </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>
<div className="grid grid-cols-2 gap-4"> <div className="grid grid-cols-2 gap-4">
{[ {[
"JavaScript/TypeScript", "JavaScript/TypeScript",
@@ -473,9 +541,12 @@ const CrossPlatformTechnologies = () => {
"Native Modules", "Native Modules",
"Redux/Context API", "Redux/Context API",
"Expo Framework", "Expo Framework",
"Native Navigation" "Native Navigation",
].map((tech, index) => ( ].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> <span className="text-gray-300 text-sm">{tech}</span>
</div> </div>
))} ))}
@@ -496,29 +567,34 @@ const CrossPlatformProcess = () => {
const steps = [ const steps = [
{ {
title: "Feasibility & Strategy", title: "Feasibility & Strategy",
description: "Analyze your project requirements and determine the optimal cross-platform approach for maximum efficiency and performance.", description:
icon: Target "Analyze your project requirements and determine the optimal cross-platform approach for maximum efficiency and performance.",
icon: Target,
}, },
{ {
title: "UI/UX Design", title: "UI/UX Design",
description: "Create adaptable designs that maintain platform consistency while leveraging cross-platform capabilities for unified experiences.", description:
icon: Palette "Create adaptable designs that maintain platform consistency while leveraging cross-platform capabilities for unified experiences.",
icon: Palette,
}, },
{ {
title: "Development", title: "Development",
description: "Build your application using Flutter or React Native, ensuring optimal performance and native-like user experience.", description:
icon: Code "Build your application using Flutter or React Native, ensuring optimal performance and native-like user experience.",
icon: Code,
}, },
{ {
title: "Multi-Platform QA", title: "Multi-Platform QA",
description: "Comprehensive testing across all target platforms and devices to ensure consistent functionality and performance.", description:
icon: Bug "Comprehensive testing across all target platforms and devices to ensure consistent functionality and performance.",
icon: Bug,
}, },
{ {
title: "Launch & Optimization", title: "Launch & Optimization",
description: "Deploy to app stores and continuously optimize performance across platforms based on user feedback and analytics.", description:
icon: Rocket "Deploy to app stores and continuously optimize performance across platforms based on user feedback and analytics.",
} icon: Rocket,
},
]; ];
return ( return (
@@ -535,19 +611,20 @@ const CrossPlatformProcess = () => {
Streamlined Process for Cross-Platform Success Streamlined Process for Cross-Platform Success
</h2> </h2>
<p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed"> <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> </p>
</motion.div> </motion.div>
<div className="relative"> <div className="relative">
{/* Timeline line */} {/* 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="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"> <div className="space-y-16">
{steps.map((step, index) => { {steps.map((step, index) => {
const IconComponent = step.icon; const IconComponent = step.icon;
const isEven = index % 2 === 0; const isEven = index % 2 === 0;
return ( return (
<motion.div <motion.div
key={index} key={index}
@@ -555,15 +632,23 @@ const CrossPlatformProcess = () => {
whileInView={{ opacity: 1, x: 0 }} whileInView={{ opacity: 1, x: 0 }}
transition={{ duration: 0.8, delay: index * 0.2 }} transition={{ duration: 0.8, delay: index * 0.2 }}
viewport={{ once: true }} 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="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="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"> <div className="w-12 h-12 bg-accent/20 rounded-xl flex items-center justify-center">
<IconComponent className="w-6 h-6 text-accent" /> <IconComponent className="w-6 h-6 text-accent" />
</div> </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> </div>
<h3 className="text-2xl font-semibold text-foreground mb-4"> <h3 className="text-2xl font-semibold text-foreground mb-4">
{step.title} {step.title}
@@ -573,10 +658,10 @@ const CrossPlatformProcess = () => {
</p> </p>
</div> </div>
</div> </div>
{/* Timeline dot */} {/* Timeline dot */}
<div className="w-4 h-4 bg-accent rounded-full border-4 border-background z-10 hidden lg:block"></div> <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> <div className="flex-1 hidden lg:block"></div>
</motion.div> </motion.div>
); );
@@ -593,34 +678,40 @@ const CrossPlatformServices = () => {
const services = [ const services = [
{ {
title: "New Cross-Platform App Development", title: "New Cross-Platform App Development",
description: "Building custom applications from scratch using modern cross-platform frameworks for maximum efficiency.", description:
icon: Smartphone "Building custom applications from scratch using modern cross-platform frameworks for maximum efficiency.",
icon: Smartphone,
}, },
{ {
title: "Existing App Migration", title: "Existing App Migration",
description: "Migrating native apps to cross-platform solutions for improved maintenance and cost efficiency.", description:
icon: RefreshCcw "Migrating native apps to cross-platform solutions for improved maintenance and cost efficiency.",
icon: RefreshCcw,
}, },
{ {
title: "Cross-Platform UI/UX Design", title: "Cross-Platform UI/UX Design",
description: "Designing consistent, adaptable interfaces that work seamlessly across all target platforms.", description:
icon: Brush "Designing consistent, adaptable interfaces that work seamlessly across all target platforms.",
icon: Brush,
}, },
{ {
title: "Performance Optimization", title: "Performance Optimization",
description: "Ensuring smooth performance on all devices through platform-specific optimizations and best practices.", description:
icon: Zap "Ensuring smooth performance on all devices through platform-specific optimizations and best practices.",
icon: Zap,
}, },
{ {
title: "Integration with Third-Party APIs", title: "Integration with Third-Party APIs",
description: "Seamless connectivity for expanded functionality including payments, analytics, and cloud services.", description:
icon: Network "Seamless connectivity for expanded functionality including payments, analytics, and cloud services.",
icon: Network,
}, },
{ {
title: "Cross-Platform Maintenance", title: "Cross-Platform Maintenance",
description: "Ongoing support and updates for cross-platform applications with unified deployment strategies.", description:
icon: Wrench "Ongoing support and updates for cross-platform applications with unified deployment strategies.",
} icon: Wrench,
},
]; ];
return ( return (
@@ -637,10 +728,11 @@ const CrossPlatformServices = () => {
Our Comprehensive Cross-Platform Solutions Our Comprehensive Cross-Platform Solutions
</h2> </h2>
<p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed"> <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> </p>
</motion.div> </motion.div>
<motion.div <motion.div
initial={{ opacity: 0, y: 40 }} initial={{ opacity: 0, y: 40 }}
whileInView={{ opacity: 1, y: 0 }} whileInView={{ opacity: 1, y: 0 }}
@@ -688,30 +780,36 @@ const CrossPlatformCaseStudies = () => {
{ {
title: "FinTech Cross-Platform App with Flutter", title: "FinTech Cross-Platform App with Flutter",
client: "PayUnify", client: "PayUnify",
description: "Unified payment solution deployed simultaneously on iOS and Android with 40% faster development", description:
image: "https://images.unsplash.com/photo-1563013544-824ae1b704d3?w=400&h=300&fit=crop&auto=format", "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", results: "40% faster delivery",
gradient: "from-accent/20 to-accent/10", gradient: "from-accent/20 to-accent/10",
framework: "Flutter" framework: "Flutter",
}, },
{ {
title: "E-Learning Platform with React Native", title: "E-Learning Platform with React Native",
client: "EduCross", client: "EduCross",
description: "Educational platform serving millions of students across platforms with consistent UX", description:
image: "https://images.unsplash.com/photo-1522202176988-66273c2fd55f?w=400&h=300&fit=crop&auto=format", "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", results: "2M+ students",
gradient: "from-blue-500/20 to-cyan-500/20", gradient: "from-blue-500/20 to-cyan-500/20",
framework: "React Native" framework: "React Native",
}, },
{ {
title: "Healthcare Management with Flutter", title: "Healthcare Management with Flutter",
client: "MediSync", client: "MediSync",
description: "Cross-platform healthcare app connecting patients and providers with real-time sync", description:
image: "https://images.unsplash.com/photo-1576091160399-112ba8d25d1f?w=400&h=300&fit=crop&auto=format", "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", results: "60% cost savings",
gradient: "from-purple-500/20 to-pink-500/20", gradient: "from-purple-500/20 to-pink-500/20",
framework: "Flutter" framework: "Flutter",
} },
]; ];
return ( return (
@@ -728,10 +826,11 @@ const CrossPlatformCaseStudies = () => {
Cross-Platform Apps That Deliver Unified Experiences Cross-Platform Apps That Deliver Unified Experiences
</h2> </h2>
<p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed"> <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> </p>
</motion.div> </motion.div>
<motion.div <motion.div
initial={{ opacity: 0, y: 40 }} initial={{ opacity: 0, y: 40 }}
whileInView={{ opacity: 1, y: 0 }} whileInView={{ opacity: 1, y: 0 }}
@@ -761,23 +860,31 @@ const CrossPlatformCaseStudies = () => {
{study.client} {study.client}
</div> </div>
<div className="flex gap-2"> <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} {study.results}
</Badge> </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} {study.framework}
</Badge> </Badge>
</div> </div>
</div> </div>
</div> </div>
<h3 className="text-xl font-semibold text-foreground mb-4 leading-tight"> <h3 className="text-xl font-semibold text-foreground mb-4 leading-tight">
{study.title} {study.title}
</h3> </h3>
</div> </div>
<div className="px-8 pb-6 flex-1"> <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 <ImageWithFallback
src={study.image} src={study.image}
alt={study.title} alt={study.title}
@@ -785,20 +892,22 @@ const CrossPlatformCaseStudies = () => {
/> />
</div> </div>
</div> </div>
<div className="px-8 pb-6"> <div className="px-8 pb-6">
<p className="text-muted-foreground text-sm leading-relaxed"> <p className="text-muted-foreground text-sm leading-relaxed">
{study.description} {study.description}
</p> </p>
</div> </div>
<div className="p-8 pt-0 mt-auto"> <div className="p-8 pt-0 mt-auto">
<Button <Button
variant="ghost" variant="ghost"
size="sm" 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" 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" /> <ArrowRight className="w-4 h-4" />
</Button> </Button>
</div> </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="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"> <div className="bg-black rounded-full px-6 py-3 flex items-center gap-2">
<GitMerge className="w-5 h-5 text-white" /> <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>
</div> </div>
<h2 className="text-4xl lg:text-5xl font-semibold text-white leading-tight"> <h2 className="text-4xl lg:text-5xl font-semibold text-white leading-tight">
Considering a{" "} Considering a{" "}
<span className="text-accent">Cross-Platform Approach?</span> <span className="text-accent">Cross-Platform Approach?</span>
</h2> </h2>
<p className="text-xl text-gray-300 leading-relaxed max-w-2xl mx-auto"> <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> </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"> <div className="inline-flex items-center gap-3">
<Target className="w-6 h-6 flex-shrink-0" /> <Target className="w-6 h-6 flex-shrink-0" />
<span>Get a Free Strategy Session</span> <span>Get a Free Strategy Session</span>
@@ -867,20 +982,20 @@ const HireCrossPlatformDevelopers = () => {
title: "Senior Flutter Developer", title: "Senior Flutter Developer",
experience: "5+ Years", experience: "5+ Years",
skills: ["Flutter", "Dart", "Firebase", "State Management"], skills: ["Flutter", "Dart", "Firebase", "State Management"],
specialties: "Cross-Platform UI, Performance Optimization" specialties: "Cross-Platform UI, Performance Optimization",
}, },
{ {
title: "React Native Expert", title: "React Native Expert",
experience: "4+ Years", experience: "4+ Years",
skills: ["React Native", "JavaScript", "TypeScript", "Redux"], skills: ["React Native", "JavaScript", "TypeScript", "Redux"],
specialties: "Native Bridges, Component Architecture" specialties: "Native Bridges, Component Architecture",
}, },
{ {
title: "Cross-Platform Architect", title: "Cross-Platform Architect",
experience: "6+ Years", experience: "6+ Years",
skills: ["System Design", "Both Frameworks", "DevOps", "Testing"], skills: ["System Design", "Both Frameworks", "DevOps", "Testing"],
specialties: "Platform Strategy, Technical Leadership" specialties: "Platform Strategy, Technical Leadership",
} },
]; ];
return ( return (
@@ -897,10 +1012,11 @@ const HireCrossPlatformDevelopers = () => {
Hire Expert Flutter & React Native Developers Hire Expert Flutter & React Native Developers
</h2> </h2>
<p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed"> <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> </p>
</motion.div> </motion.div>
<motion.div <motion.div
initial={{ opacity: 0, y: 40 }} initial={{ opacity: 0, y: 40 }}
whileInView={{ opacity: 1, y: 0 }} whileInView={{ opacity: 1, y: 0 }}
@@ -925,23 +1041,30 @@ const HireCrossPlatformDevelopers = () => {
<GitMerge className="w-6 h-6 text-accent" /> <GitMerge className="w-6 h-6 text-accent" />
</div> </div>
<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} {dev.experience}
</Badge> </Badge>
</div> </div>
</div> </div>
<h3 className="text-xl font-semibold text-foreground mb-4"> <h3 className="text-xl font-semibold text-foreground mb-4">
{dev.title} {dev.title}
</h3> </h3>
<p className="text-muted-foreground text-sm mb-4"> <p className="text-muted-foreground text-sm mb-4">
{dev.specialties} {dev.specialties}
</p> </p>
<div className="flex flex-wrap gap-2"> <div className="flex flex-wrap gap-2">
{dev.skills.map((skill) => ( {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} {skill}
</Badge> </Badge>
))} ))}
@@ -965,9 +1088,9 @@ const HireCrossPlatformDevelopers = () => {
<span>Hire Cross-Platform Developers</span> <span>Hire Cross-Platform Developers</span>
</div> </div>
</ShimmerButton> </ShimmerButton>
<Button <Button
variant="outline" 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> <span>View Talent Profiles</span>
<ArrowRight className="ml-2 w-4 h-4" /> <ArrowRight className="ml-2 w-4 h-4" />
@@ -983,20 +1106,24 @@ const CrossPlatformFAQs = () => {
const faqs = [ const faqs = [
{ {
question: "When is cross-platform development the best choice?", 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?", 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'?", 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?", 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 ( return (
@@ -1016,7 +1143,7 @@ const CrossPlatformFAQs = () => {
Common questions about cross-platform app development. Common questions about cross-platform app development.
</p> </p>
</motion.div> </motion.div>
<motion.div <motion.div
initial={{ opacity: 0, y: 40 }} initial={{ opacity: 0, y: 40 }}
whileInView={{ opacity: 1, y: 0 }} whileInView={{ opacity: 1, y: 0 }}
@@ -1026,13 +1153,15 @@ const CrossPlatformFAQs = () => {
> >
<Accordion type="single" collapsible className="space-y-8"> <Accordion type="single" collapsible className="space-y-8">
{faqs.map((faq, index) => ( {faqs.map((faq, index) => (
<AccordionItem <AccordionItem
key={index} key={index}
value={`item-${index}`} value={`item-${index}`}
className="bg-gray-900/50 backdrop-blur-md rounded-2xl border border-gray-800 px-10 shadow-lg" 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"> <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> </AccordionTrigger>
<AccordionContent className="text-gray-300 pb-10 text-lg leading-relaxed"> <AccordionContent className="text-gray-300 pb-10 text-lg leading-relaxed">
{faq.answer} {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="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"> <div className="bg-background rounded-full px-6 py-3 flex items-center gap-2">
<GitMerge className="w-5 h-5 text-foreground" /> <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>
</div> </div>
</motion.div> </motion.div>
@@ -1083,7 +1214,7 @@ const CrossPlatformFinalCTA = () => {
Achieve Broader Reach with{" "} Achieve Broader Reach with{" "}
<span className="text-accent">WDI's Cross-Platform Expertise</span> <span className="text-accent">WDI's Cross-Platform Expertise</span>
</motion.h2> </motion.h2>
<motion.p <motion.p
initial={{ opacity: 0, y: 20 }} initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }} whileInView={{ opacity: 1, y: 0 }}
@@ -1091,7 +1222,8 @@ const CrossPlatformFinalCTA = () => {
viewport={{ once: true }} viewport={{ once: true }}
className="text-xl text-muted-foreground mb-12 max-w-2xl mx-auto leading-relaxed" 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.p>
<motion.div <motion.div
@@ -1101,7 +1233,10 @@ const CrossPlatformFinalCTA = () => {
viewport={{ once: true }} viewport={{ once: true }}
className="space-y-8" 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"> <div className="inline-flex items-center gap-3">
<Rocket className="w-6 h-6 flex-shrink-0" /> <Rocket className="w-6 h-6 flex-shrink-0" />
<span>Start Your Cross-Platform Project</span> <span>Start Your Cross-Platform Project</span>
@@ -1130,61 +1265,61 @@ export const CrossPlatformAppDevelopment = () => {
return ( return (
<div className="dark min-h-screen"> <div className="dark min-h-screen">
<Navigation /> <Navigation />
{/* Hero Section */} {/* Hero Section */}
<section className="bg-black"> <section className="bg-black">
<CrossPlatformHeroWithCTA /> <CrossPlatformHeroWithCTA />
</section> </section>
{/* Key Benefits */} {/* Key Benefits */}
<section className="bg-background"> <section className="bg-background">
<CrossPlatformBenefits /> <CrossPlatformBenefits />
</section> </section>
{/* Technologies */} {/* Technologies */}
<section className="bg-card"> <section className="bg-card">
<CrossPlatformTechnologies /> <CrossPlatformTechnologies />
</section> </section>
{/* Development Process */} {/* Development Process */}
<section className="bg-background"> <section className="bg-background">
<CrossPlatformProcess /> <CrossPlatformProcess />
</section> </section>
{/* Services */} {/* Services */}
<section className="bg-card"> <section className="bg-card">
<CrossPlatformServices /> <CrossPlatformServices />
</section> </section>
{/* Case Studies */} {/* Case Studies */}
<section className="bg-background"> <section className="bg-background">
<CrossPlatformCaseStudies /> <CrossPlatformCaseStudies />
</section> </section>
{/* Mid-Page CTA */} {/* Mid-Page CTA */}
<section className="bg-card"> <section className="bg-card">
<CrossPlatformInlineCTA /> <CrossPlatformInlineCTA />
</section> </section>
{/* Hire Developers */} {/* Hire Developers */}
<section className="bg-background"> <section className="bg-background">
<HireCrossPlatformDevelopers /> <HireCrossPlatformDevelopers />
</section> </section>
{/* FAQs */} {/* FAQs */}
<section className="bg-card"> <section className="bg-card">
<CrossPlatformFAQs /> <CrossPlatformFAQs />
</section> </section>
{/* Final CTA */} {/* Final CTA */}
<section className="bg-background"> <section className="bg-background">
<CrossPlatformFinalCTA /> <CrossPlatformFinalCTA />
</section> </section>
{/* Footer */} {/* Footer */}
<section className="bg-card"> <section className="bg-card">
<Footer /> <Footer />
</section> </section>
</div> </div>
); );
}; };

496
pages/CustomWebAppDevelopment.tsx
View File

@@ -12,7 +12,8 @@ import {
Database, Database,
Eye, Eye,
FileText, FileText,
Globe, Layers, Globe,
Layers,
Layers3, Layers3,
Layout, Layout,
MessageSquare, MessageSquare,
@@ -28,18 +29,24 @@ import {
TrendingUp, TrendingUp,
Users, Users,
Workflow, Workflow,
Zap Zap,
} from "lucide-react"; } from "lucide-react";
import { ImageWithFallback } from "../components/figma/ImageWithFallback"; import { ImageWithFallback } from "../components/figma/ImageWithFallback";
import { Footer } from "../components/Footer"; import { Footer } from "../components/Footer";
import { Navigation } from "../components/Navigation"; 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 { Badge } from "../components/ui/badge";
import { Button } from "../components/ui/button"; import { Button } from "../components/ui/button";
import { Card, CardContent } from "../components/ui/card"; import { Card, CardContent } from "../components/ui/card";
import { ShimmerButton } from "../components/ui/shimmer-button"; import { ShimmerButton } from "../components/ui/shimmer-button";
import patientManagementPortal from "../src/images/patient-management-portal.webp"; import patientManagementPortal from "../src/images/patient-management-portal.webp";
import awsLogo from "../src/images/aws-logo.png"; import awsLogo from "../src/images/aws-logo.png";
import { navigateTo } from "@/App";
// Custom Web App Development Hero Section // Custom Web App Development Hero Section
const CustomWebAppHeroWithCTA = () => { const CustomWebAppHeroWithCTA = () => {
@@ -59,7 +66,9 @@ const CustomWebAppHeroWithCTA = () => {
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6 }} 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> </motion.div>
{/* Main Heading */} {/* Main Heading */}
@@ -67,12 +76,13 @@ const CustomWebAppHeroWithCTA = () => {
<h1 className="text-4xl md:text-5xl lg:text-6xl font-semibold text-white leading-tight"> <h1 className="text-4xl md:text-5xl lg:text-6xl font-semibold text-white leading-tight">
Custom Web Application Development Custom Web Application Development
</h1> </h1>
<p className="text-lg text-gray-300 leading-relaxed max-w-lg"> <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> </p>
</div> </div>
{/* CTAs */} {/* CTAs */}
<motion.div <motion.div
initial={{ opacity: 0, y: 20 }} initial={{ opacity: 0, y: 20 }}
@@ -80,7 +90,10 @@ const CustomWebAppHeroWithCTA = () => {
transition={{ duration: 0.8, delay: 0.3 }} transition={{ duration: 0.8, delay: 0.3 }}
className="flex flex-col sm:flex-row gap-4" 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"> <div className="inline-flex items-center gap-2">
<MessageSquare className="w-5 h-5 flex-shrink-0" /> <MessageSquare className="w-5 h-5 flex-shrink-0" />
<span>Request a Free Consultation</span> <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" 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" /> <Eye className="w-4 h-4 flex-shrink-0" />
<span>Explore Our Web Projects</span> <span>Explore Projects</span>
</a> </a>
</motion.div> </motion.div>
</motion.div> </motion.div>
{/* Right side with web app visualization */} {/* Right side with web app visualization */}
<motion.div <motion.div
initial={{ opacity: 0, x: 50 }} initial={{ opacity: 0, x: 50 }}
@@ -122,16 +135,18 @@ const CustomWebAppHeroWithCTA = () => {
</div> </div>
<div className="text-xs text-gray-400">localhost:3000</div> <div className="text-xs text-gray-400">localhost:3000</div>
</div> </div>
{/* Dashboard Content */} {/* Dashboard Content */}
<div className="space-y-4"> <div className="space-y-4">
{/* Navigation */} {/* Navigation */}
<div className="flex space-x-4 text-sm"> <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">Analytics</div>
<div className="text-gray-400 px-3 py-1">Users</div> <div className="text-gray-400 px-3 py-1">Users</div>
</div> </div>
{/* Content Grid */} {/* Content Grid */}
<div className="grid grid-cols-2 gap-4"> <div className="grid grid-cols-2 gap-4">
<div className="bg-gray-800/50 rounded-lg p-4"> <div className="bg-gray-800/50 rounded-lg p-4">
@@ -152,12 +167,15 @@ const CustomWebAppHeroWithCTA = () => {
</div> </div>
</div> </div>
</div> </div>
{/* Data Table Simulation */} {/* Data Table Simulation */}
<div className="bg-gray-800/30 rounded-lg p-4"> <div className="bg-gray-800/30 rounded-lg p-4">
<div className="space-y-2"> <div className="space-y-2">
{[1, 2, 3].map((i) => ( {[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="flex items-center gap-3">
<div className="w-6 h-6 bg-gray-600 rounded-full"></div> <div className="w-6 h-6 bg-gray-600 rounded-full"></div>
<div className="h-2 bg-gray-600 rounded w-24"></div> <div className="h-2 bg-gray-600 rounded w-24"></div>
@@ -169,7 +187,7 @@ const CustomWebAppHeroWithCTA = () => {
</div> </div>
</div> </div>
</div> </div>
{/* Floating Code Snippets */} {/* Floating Code Snippets */}
<motion.div <motion.div
initial={{ opacity: 0, scale: 0.8 }} initial={{ opacity: 0, scale: 0.8 }}
@@ -187,7 +205,7 @@ const CustomWebAppHeroWithCTA = () => {
<div className="text-yellow-400">return</div> <div className="text-yellow-400">return</div>
</div> </div>
</motion.div> </motion.div>
{/* Cloud Icon */} {/* Cloud Icon */}
<motion.div <motion.div
initial={{ opacity: 0, scale: 0.8 }} initial={{ opacity: 0, scale: 0.8 }}
@@ -198,7 +216,7 @@ const CustomWebAppHeroWithCTA = () => {
<CloudCog className="w-8 h-8 text-white" /> <CloudCog className="w-8 h-8 text-white" />
</motion.div> </motion.div>
</motion.div> </motion.div>
{/* Feature Badges */} {/* Feature Badges */}
<motion.div <motion.div
initial={{ opacity: 0, y: 30 }} initial={{ opacity: 0, y: 30 }}
@@ -206,15 +224,24 @@ const CustomWebAppHeroWithCTA = () => {
transition={{ duration: 0.8, delay: 1.2 }} transition={{ duration: 0.8, delay: 1.2 }}
className="flex justify-center gap-4 flex-wrap" 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" /> <Database className="w-3 h-3 mr-1" />
Scalable Scalable
</Badge> </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" /> <Shield className="w-3 h-3 mr-1" />
Secure Secure
</Badge> </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" /> <Layers className="w-3 h-3 mr-1" />
Custom Built Custom Built
</Badge> </Badge>
@@ -233,28 +260,33 @@ const CustomWebAppBenefits = () => {
{ {
icon: Target, icon: Target,
title: "Tailored to Your Workflow", 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, icon: TrendingUp,
title: "Scalability & Flexibility", 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, icon: Shield,
title: "Enhanced Security", 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, icon: Zap,
title: "Operational Efficiency", title: "Operational Efficiency",
description: "Automate tasks, streamline processes, reduce manual effort." description:
"Automate tasks, streamline processes, reduce manual effort.",
}, },
{ {
icon: Award, icon: Award,
title: "Competitive Advantage", title: "Competitive Advantage",
description: "Unique features and user experiences differentiate your brand." description:
} "Unique features and user experiences differentiate your brand.",
},
]; ];
return ( return (
@@ -271,7 +303,7 @@ const CustomWebAppBenefits = () => {
Why Invest in a Custom Web Application? Why Invest in a Custom Web Application?
</h2> </h2>
</motion.div> </motion.div>
<motion.div <motion.div
initial={{ opacity: 0, y: 40 }} initial={{ opacity: 0, y: 40 }}
whileInView={{ opacity: 1, y: 0 }} whileInView={{ opacity: 1, y: 0 }}
@@ -356,29 +388,34 @@ const CustomWebAppProcess = () => {
const steps = [ const steps = [
{ {
title: "Discovery & Requirements", title: "Discovery & Requirements",
description: "Comprehensive analysis of your business needs, user requirements, and technical specifications to define project scope.", description:
icon: Search "Comprehensive analysis of your business needs, user requirements, and technical specifications to define project scope.",
icon: Search,
}, },
{ {
title: "UX/UI Design & Prototyping", title: "UX/UI Design & Prototyping",
description: "Creating intuitive user experiences and visual designs with interactive prototypes for stakeholder feedback.", description:
icon: Palette "Creating intuitive user experiences and visual designs with interactive prototypes for stakeholder feedback.",
icon: Palette,
}, },
{ {
title: "Agile Development Sprints", title: "Agile Development Sprints",
description: "Iterative development approach with regular demonstrations and continuous integration for rapid progress.", description:
icon: Code "Iterative development approach with regular demonstrations and continuous integration for rapid progress.",
icon: Code,
}, },
{ {
title: "Rigorous Testing & QA", title: "Rigorous Testing & QA",
description: "Comprehensive testing including functionality, performance, security, and user acceptance testing.", description:
icon: Bug "Comprehensive testing including functionality, performance, security, and user acceptance testing.",
icon: Bug,
}, },
{ {
title: "Deployment & Ongoing Support", title: "Deployment & Ongoing Support",
description: "Production deployment with monitoring, maintenance, and continuous improvement based on user feedback.", description:
icon: Rocket "Production deployment with monitoring, maintenance, and continuous improvement based on user feedback.",
} icon: Rocket,
},
]; ];
return ( return (
@@ -399,12 +436,12 @@ const CustomWebAppProcess = () => {
<div className="relative"> <div className="relative">
{/* Timeline line */} {/* 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="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"> <div className="space-y-16">
{steps.map((step, index) => { {steps.map((step, index) => {
const IconComponent = step.icon; const IconComponent = step.icon;
const isEven = index % 2 === 0; const isEven = index % 2 === 0;
return ( return (
<motion.div <motion.div
key={index} key={index}
@@ -412,15 +449,23 @@ const CustomWebAppProcess = () => {
whileInView={{ opacity: 1, x: 0 }} whileInView={{ opacity: 1, x: 0 }}
transition={{ duration: 0.8, delay: index * 0.2 }} transition={{ duration: 0.8, delay: index * 0.2 }}
viewport={{ once: true }} 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="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="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"> <div className="w-12 h-12 bg-accent/20 rounded-xl flex items-center justify-center">
<IconComponent className="w-6 h-6 text-accent" /> <IconComponent className="w-6 h-6 text-accent" />
</div> </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> </div>
<h3 className="text-2xl font-semibold text-foreground mb-4"> <h3 className="text-2xl font-semibold text-foreground mb-4">
{step.title} {step.title}
@@ -430,10 +475,10 @@ const CustomWebAppProcess = () => {
</p> </p>
</div> </div>
</div> </div>
{/* Timeline dot */} {/* Timeline dot */}
<div className="w-4 h-4 bg-accent rounded-full border-4 border-background z-10 hidden lg:block"></div> <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> <div className="flex-1 hidden lg:block"></div>
</motion.div> </motion.div>
); );
@@ -450,40 +495,74 @@ const CustomWebAppServices = () => {
const services = [ const services = [
{ {
title: "Enterprise Web Portals", title: "Enterprise Web Portals",
description: "Secure, centralized access for employees, partners, or customers.", description:
"Secure, centralized access for employees, partners, or customers.",
icon: Building, 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", title: "Workflow Automation Platforms",
description: "Streamlining complex business operations.", description: "Streamlining complex business operations.",
icon: Workflow, icon: Workflow,
features: ["Process Automation", "Task Management", "Approval Workflows", "Integration APIs"] features: [
"Process Automation",
"Task Management",
"Approval Workflows",
"Integration APIs",
],
}, },
{ {
title: "Data Management Systems", 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, 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", 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, 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", title: "API Integrations",
description: "Connecting disparate systems for seamless data flow.", description: "Connecting disparate systems for seamless data flow.",
icon: Network, 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", 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, icon: RefreshCcw,
features: ["Legacy Migration", "Performance Optimization", "Modern UI/UX", "Cloud Integration"] features: [
} "Legacy Migration",
"Performance Optimization",
"Modern UI/UX",
"Cloud Integration",
],
},
]; ];
return ( return (
@@ -500,7 +579,7 @@ const CustomWebAppServices = () => {
Our Expertise in Custom Web Solutions Our Expertise in Custom Web Solutions
</h2> </h2>
</motion.div> </motion.div>
<motion.div <motion.div
initial={{ opacity: 0, y: 40 }} initial={{ opacity: 0, y: 40 }}
whileInView={{ opacity: 1, y: 0 }} whileInView={{ opacity: 1, y: 0 }}
@@ -532,10 +611,16 @@ const CustomWebAppServices = () => {
{service.description} {service.description}
</p> </p>
<div className="space-y-2"> <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"> <div className="flex flex-wrap gap-2">
{service.features.map((feature) => ( {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} {feature}
</Badge> </Badge>
))} ))}
@@ -555,23 +640,75 @@ const CustomWebAppServices = () => {
// Web App Tech Stack // Web App Tech Stack
const WebAppTechStack = () => { const WebAppTechStack = () => {
const technologies = [ 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: "React",
{ name: "Vue.js", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/vuejs/vuejs-original.svg", category: "Frontend" }, logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/react/react-original.svg",
{ name: "Node.js", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nodejs/nodejs-original.svg", category: "Backend" }, category: "Frontend",
{ 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: "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: "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: "Azure",
{ name: "MongoDB", logo: "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/mongodb/mongodb-original.svg", category: "Database" } 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 = [ 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: "Django",
{ name: "Ruby on Rails", icon: Layers, description: "Convention over configuration framework" }, icon: Code,
{ name: "Laravel", icon: Boxes, description: "PHP framework for web artisans" } 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 ( 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" 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> </div>
<h4 className="font-semibold text-foreground text-sm mb-1">{tech.name}</h4> <h4 className="font-semibold text-foreground text-sm mb-1">
<p className="text-xs text-muted-foreground">{tech.category}</p> {tech.name}
</h4>
<p className="text-xs text-muted-foreground">
{tech.category}
</p>
</Card> </Card>
</motion.div> </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"> <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" /> <IconComponent className="w-6 h-6 text-accent" />
</div> </div>
<h4 className="font-semibold text-foreground mb-2">{framework.name}</h4> <h4 className="font-semibold text-foreground mb-2">
<p className="text-sm text-muted-foreground leading-relaxed">{framework.description}</p> {framework.name}
</h4>
<p className="text-sm text-muted-foreground leading-relaxed">
{framework.description}
</p>
</Card> </Card>
</motion.div> </motion.div>
); );
@@ -667,30 +812,36 @@ const WebAppCaseStudies = () => {
{ {
title: "Enterprise Resource Planning System", title: "Enterprise Resource Planning System",
client: "TechCorp Industries", client: "TechCorp Industries",
description: "Comprehensive ERP solution streamlining operations across multiple departments with real-time analytics and automated workflows", description:
image: "https://images.unsplash.com/photo-1551434678-e076c223a692?w=400&h=300&fit=crop&auto=format", "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", results: "40% operational efficiency increase",
gradient: "from-blue-500/20 to-cyan-500/20", 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", title: "Patient Management Portal",
client: "HealthFirst Clinics", 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, image: patientManagementPortal,
results: "60% reduction in admin tasks", results: "60% reduction in admin tasks",
gradient: "from-green-500/20 to-emerald-500/20", 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", title: "Supply Chain Management Platform",
client: "GlobalLogistics Co", client: "GlobalLogistics Co",
description: "End-to-end supply chain visibility platform with predictive analytics, inventory management, and vendor integration capabilities", description:
image: "https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d?w=400&h=300&fit=crop&auto=format", "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", results: "25% cost reduction",
gradient: "from-orange-500/20 to-red-500/20", 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 ( return (
@@ -707,7 +858,7 @@ const WebAppCaseStudies = () => {
Custom Web Applications That Drive Business Growth Custom Web Applications That Drive Business Growth
</h2> </h2>
</motion.div> </motion.div>
<motion.div <motion.div
initial={{ opacity: 0, y: 40 }} initial={{ opacity: 0, y: 40 }}
whileInView={{ opacity: 1, y: 0 }} whileInView={{ opacity: 1, y: 0 }}
@@ -736,19 +887,24 @@ const WebAppCaseStudies = () => {
<div className="text-xs text-gray-400 mb-2 uppercase tracking-wider"> <div className="text-xs text-gray-400 mb-2 uppercase tracking-wider">
{study.client} {study.client}
</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"
>
{study.results} {study.results}
</Badge> </Badge>
</div> </div>
</div> </div>
<h3 className="text-xl font-semibold text-white mb-4 leading-tight"> <h3 className="text-xl font-semibold text-white mb-4 leading-tight">
{study.title} {study.title}
</h3> </h3>
</div> </div>
<div className="px-8 pb-6 flex-1"> <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 <ImageWithFallback
src={study.image} src={study.image}
alt={study.title} alt={study.title}
@@ -756,26 +912,28 @@ const WebAppCaseStudies = () => {
/> />
</div> </div>
</div> </div>
<div className="px-8 pb-6"> <div className="px-8 pb-6">
<p className="text-gray-300 text-sm leading-relaxed mb-4"> <p className="text-gray-300 text-sm leading-relaxed mb-4">
{study.description} {study.description}
</p> </p>
<div className="space-y-2"> <div className="space-y-2">
<h4 className="text-xs font-medium text-white uppercase tracking-wider">Key Features:</h4> <h4 className="text-xs font-medium text-white uppercase tracking-wider">
<p className="text-xs text-gray-400"> Key Features:
{study.features} </h4>
</p> <p className="text-xs text-gray-400">{study.features}</p>
</div> </div>
</div> </div>
<div className="p-8 pt-0 mt-auto"> <div className="p-8 pt-0 mt-auto">
<Button <Button
variant="ghost" variant="ghost"
size="sm" 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" 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" /> <ArrowRight className="w-4 h-4" />
</Button> </Button>
</div> </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="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"> <div className="bg-background rounded-full px-6 py-3 flex items-center gap-2">
<Puzzle className="w-5 h-5 text-foreground" /> <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>
</div> </div>
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground leading-tight"> <h2 className="text-4xl lg:text-5xl font-semibold text-foreground leading-tight">
Have a Complex Business Need?{" "} Have a Complex Business Need?{" "}
<span className="text-accent">Let's Build Your Solution.</span> <span className="text-accent">Let's Build Your Solution.</span>
</h2> </h2>
<p className="text-xl text-muted-foreground leading-relaxed max-w-2xl mx-auto"> <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> </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"> <div className="inline-flex items-center gap-3">
<MessageSquare className="w-6 h-6 flex-shrink-0" /> <MessageSquare className="w-6 h-6 flex-shrink-0" />
<span>Get a Free Technical Consultation</span> <span>Get a Free Technical Consultation</span>
@@ -842,28 +1006,51 @@ const HireWebDevelopers = () => {
const developerTypes = [ const developerTypes = [
{ {
title: "Frontend Specialists", 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, 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", 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, icon: Server,
skills: ["API Development", "Database Design", "Security Implementation", "Scalable Architecture"] skills: [
"API Development",
"Database Design",
"Security Implementation",
"Scalable Architecture",
],
}, },
{ {
title: "Full-Stack Developers", 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, icon: Layers3,
skills: ["Frontend + Backend", "DevOps", "Database Management", "System Integration"] skills: [
"Frontend + Backend",
"DevOps",
"Database Management",
"System Integration",
],
}, },
{ {
title: "DevOps Engineers", title: "DevOps Engineers",
description: "Cloud infrastructure and deployment automation specialists", description: "Cloud infrastructure and deployment automation specialists",
icon: CloudCog, 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 ( return (
@@ -880,10 +1067,11 @@ const HireWebDevelopers = () => {
Augment Your Team with Our Expert Web App Developers Augment Your Team with Our Expert Web App Developers
</h2> </h2>
<p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed"> <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> </p>
</motion.div> </motion.div>
<motion.div <motion.div
initial={{ opacity: 0, y: 40 }} initial={{ opacity: 0, y: 40 }}
whileInView={{ opacity: 1, y: 0 }} whileInView={{ opacity: 1, y: 0 }}
@@ -915,10 +1103,16 @@ const HireWebDevelopers = () => {
{type.description} {type.description}
</p> </p>
<div className="space-y-2"> <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"> <div className="flex flex-wrap gap-2">
{type.skills.map((skill) => ( {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} {skill}
</Badge> </Badge>
))} ))}
@@ -948,7 +1142,7 @@ const HireWebDevelopers = () => {
<Button <Button
variant="outline" variant="outline"
size="lg" 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"> <div className="inline-flex items-center gap-2">
<FileText className="w-5 h-5 flex-shrink-0" /> <FileText className="w-5 h-5 flex-shrink-0" />
@@ -967,20 +1161,24 @@ const CustomWebAppFAQs = () => {
const faqs = [ const faqs = [
{ {
question: "How long does it take to develop a custom web app?", 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?", 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?", 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?", 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 ( return (
@@ -997,7 +1195,7 @@ const CustomWebAppFAQs = () => {
Frequently Asked Questions Frequently Asked Questions
</h2> </h2>
</motion.div> </motion.div>
<motion.div <motion.div
initial={{ opacity: 0, y: 40 }} initial={{ opacity: 0, y: 40 }}
whileInView={{ opacity: 1, y: 0 }} whileInView={{ opacity: 1, y: 0 }}
@@ -1007,13 +1205,15 @@ const CustomWebAppFAQs = () => {
> >
<Accordion type="single" collapsible className="space-y-8"> <Accordion type="single" collapsible className="space-y-8">
{faqs.map((faq, index) => ( {faqs.map((faq, index) => (
<AccordionItem <AccordionItem
key={index} key={index}
value={`item-${index}`} value={`item-${index}`}
className="bg-gray-900/50 backdrop-blur-md rounded-2xl border border-gray-800 px-10 shadow-lg" 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"> <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> </AccordionTrigger>
<AccordionContent className="text-gray-300 pb-10 text-lg leading-relaxed"> <AccordionContent className="text-gray-300 pb-10 text-lg leading-relaxed">
{faq.answer} {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="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"> <div className="bg-background rounded-full px-6 py-3 flex items-center gap-2">
<Globe className="w-5 h-5 text-foreground" /> <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>
</div> </div>
</motion.div> </motion.div>
@@ -1058,7 +1260,7 @@ const CustomWebAppFinalCTA = () => {
Build Your Strategic Advantage with a{" "} Build Your Strategic Advantage with a{" "}
<span className="text-accent">Custom Web Application</span> <span className="text-accent">Custom Web Application</span>
</h2> </h2>
<motion.p <motion.p
initial={{ opacity: 0, y: 20 }} initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }} whileInView={{ opacity: 1, y: 0 }}
@@ -1066,7 +1268,8 @@ const CustomWebAppFinalCTA = () => {
viewport={{ once: true }} viewport={{ once: true }}
className="text-xl text-muted-foreground mb-12 max-w-2xl mx-auto leading-relaxed" 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.p>
<motion.div <motion.div
@@ -1076,7 +1279,10 @@ const CustomWebAppFinalCTA = () => {
viewport={{ once: true }} viewport={{ once: true }}
className="space-y-8" 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"> <div className="inline-flex items-center gap-3">
<Rocket className="w-6 h-6 flex-shrink-0" /> <Rocket className="w-6 h-6 flex-shrink-0" />
<span>Start Your Custom Web Project Today</span> <span>Start Your Custom Web Project Today</span>
@@ -1105,61 +1311,61 @@ export const CustomWebAppDevelopment = () => {
return ( return (
<div className="dark min-h-screen"> <div className="dark min-h-screen">
<Navigation /> <Navigation />
{/* Hero Section */} {/* Hero Section */}
<section className="bg-black"> <section className="bg-black">
<CustomWebAppHeroWithCTA /> <CustomWebAppHeroWithCTA />
</section> </section>
{/* Benefits */} {/* Benefits */}
<section className="bg-background"> <section className="bg-background">
<CustomWebAppBenefits /> <CustomWebAppBenefits />
</section> </section>
{/* Development Process */} {/* Development Process */}
<section className="bg-card"> <section className="bg-card">
<CustomWebAppProcess /> <CustomWebAppProcess />
</section> </section>
{/* Services */} {/* Services */}
<section className="bg-background"> <section className="bg-background">
<CustomWebAppServices /> <CustomWebAppServices />
</section> </section>
{/* Tech Stack */} {/* Tech Stack */}
<section className="bg-card"> <section className="bg-card">
<WebAppTechStack /> <WebAppTechStack />
</section> </section>
{/* Case Studies */} {/* Case Studies */}
<section className="bg-background"> <section className="bg-background">
<WebAppCaseStudies /> <WebAppCaseStudies />
</section> </section>
{/* Mid-Page CTA */} {/* Mid-Page CTA */}
<section className="bg-card"> <section className="bg-card">
<WebAppInlineCTA /> <WebAppInlineCTA />
</section> </section>
{/* Hire Developers */} {/* Hire Developers */}
<section className="bg-background"> <section className="bg-background">
<HireWebDevelopers /> <HireWebDevelopers />
</section> </section>
{/* FAQs */} {/* FAQs */}
<section className="bg-card"> <section className="bg-card">
<CustomWebAppFAQs /> <CustomWebAppFAQs />
</section> </section>
{/* Final CTA */} {/* Final CTA */}
<section className="bg-background"> <section className="bg-background">
<CustomWebAppFinalCTA /> <CustomWebAppFinalCTA />
</section> </section>
{/* Footer */} {/* Footer */}
<section className="bg-card"> <section className="bg-card">
<Footer /> <Footer />
</section> </section>
</div> </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 { Button } from "../components/ui/button";
import { Badge } from "../components/ui/badge"; import { Badge } from "../components/ui/badge";
import { Card, CardContent } from "../components/ui/card"; 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 = () => { export const HireBackendDevelopers = () => {
const expertise = [ const expertise = [
{ {
category: "Languages & Frameworks", category: "Languages & Frameworks",
description: "Node.js (Express, NestJS), Python (Django, Flask), Java (Spring Boot), PHP (Laravel, Symfony), Ruby on Rails, Go", description:
skills: ["Node.js", "Python", "Java", "PHP", "Ruby", "Go", "C#", ".NET Core"] "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", category: "Database Management",
description: "Designing, optimizing, and managing SQL (MySQL, PostgreSQL, MS SQL Server) and NoSQL (MongoDB, Cassandra, Redis) databases", description:
skills: ["MySQL", "PostgreSQL", "MongoDB", "Redis", "Cassandra", "Elasticsearch"] "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", category: "API Development",
description: "Building secure and efficient RESTful APIs and GraphQL endpoints for seamless frontend communication", description:
skills: ["REST APIs", "GraphQL", "WebSocket", "gRPC", "API Gateway", "OAuth"] "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", category: "Cloud Services",
description: "Leveraging AWS, Azure, Google Cloud Platform for scalable deployments", description:
skills: ["AWS", "Azure", "Google Cloud", "Docker", "Kubernetes", "Serverless"] "Leveraging AWS, Azure, Google Cloud Platform for scalable deployments",
skills: [
"AWS",
"Azure",
"Google Cloud",
"Docker",
"Kubernetes",
"Serverless",
],
}, },
{ {
category: "Security", category: "Security",
description: "Implementing authentication, authorization, data encryption, and vulnerability management", description:
skills: ["JWT", "OAuth2", "SSL/TLS", "Encryption", "Security Audits", "OWASP"] "Implementing authentication, authorization, data encryption, and vulnerability management",
skills: [
"JWT",
"OAuth2",
"SSL/TLS",
"Encryption",
"Security Audits",
"OWASP",
],
}, },
{ {
category: "Scalability & Performance", category: "Scalability & Performance",
description: "Designing architectures for high traffic and future growth", 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 = [ const deliverables = [
{ {
icon: Server, icon: Server,
title: "Server-Side Logic", title: "Server-Side Logic",
description: "Developing the core business logic and functionalities." description: "Developing the core business logic and functionalities.",
}, },
{ {
icon: Database, icon: Database,
title: "Database Integration", title: "Database Integration",
description: "Efficient data storage, retrieval, and manipulation." description: "Efficient data storage, retrieval, and manipulation.",
}, },
{ {
icon: Code, icon: Code,
title: "API Development", 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, icon: Target,
title: "System Architecture", title: "System Architecture",
description: "Designing scalable and resilient backend systems." description: "Designing scalable and resilient backend systems.",
}, },
{ {
icon: Cloud, icon: Cloud,
title: "Integrations", 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, icon: Zap,
title: "Performance Optimization", title: "Performance Optimization",
description: "Ensuring rapid response times and efficient resource utilization." description:
} "Ensuring rapid response times and efficient resource utilization.",
},
]; ];
const projectTypes = [ const projectTypes = [
@@ -79,82 +142,103 @@ export const HireBackendDevelopers = () => {
"API Development for Mobile & Web Apps", "API Development for Mobile & Web Apps",
"Real-Time Data Streaming", "Real-Time Data Streaming",
"Microservices Architecture", "Microservices Architecture",
"Enterprise-Grade Applications" "Enterprise-Grade Applications",
]; ];
const techStacks = [ const techStacks = [
{ {
name: "Node.js Ecosystem", name: "Node.js Ecosystem",
technologies: ["Express.js", "NestJS", "TypeScript", "MongoDB", "Redis"], 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", name: "Python Stack",
technologies: ["Django", "Flask", "FastAPI", "PostgreSQL", "Celery"], 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", name: "Java Enterprise",
technologies: ["Spring Boot", "Spring Security", "JPA", "MySQL", "Apache Kafka"], technologies: [
description: "Enterprise-grade Java solutions for large-scale systems" "Spring Boot",
"Spring Security",
"JPA",
"MySQL",
"Apache Kafka",
],
description: "Enterprise-grade Java solutions for large-scale systems",
}, },
{ {
name: "PHP Modern", name: "PHP Modern",
technologies: ["Laravel", "Symfony", "PHP 8+", "MySQL", "Redis"], technologies: ["Laravel", "Symfony", "PHP 8+", "MySQL", "Redis"],
description: "Modern PHP development with elegant frameworks" description: "Modern PHP development with elegant frameworks",
} },
]; ];
const testimonials = [ 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", author: "Robert Chen",
role: "CTO, ScaleUp Technologies", 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", author: "Amanda Foster",
role: "Engineering Manager, CloudFirst", role: "Engineering Manager, CloudFirst",
rating: 5 rating: 5,
} },
]; ];
return ( return (
<div className="dark min-h-screen bg-background"> <div className="dark min-h-screen bg-background">
<Navigation /> <Navigation />
{/* Hero Section */} {/* Hero Section */}
<section className="relative pt-24 pb-16 overflow-hidden"> <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 className="absolute inset-0 bg-gradient-to-br from-[#E5195E]/10 via-background to-background" />
<div <div
className="absolute inset-0 opacity-30" className="absolute inset-0 opacity-30"
style={{ style={{
backgroundImage: `radial-gradient(circle at 1px 1px, rgba(255,255,255,0.15) 1px, transparent 0)`, 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="relative container mx-auto px-6 lg:px-8">
<div className="max-w-4xl mx-auto text-center"> <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 Building Robust Server-Side Solutions
</Badge> </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"> <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 Hire Backend Developers: Powering Your Applications with
<span className="bg-gradient-to-r from-[#E5195E] to-[#FF6B9D] bg-clip-text text-transparent"> Robust Foundations</span> <span className="bg-gradient-to-r from-[#E5195E] to-[#FF6B9D] bg-clip-text text-transparent">
{" "}
Robust Foundations
</span>
</h1> </h1>
<p className="text-lg md:text-xl text-muted-foreground mb-8 max-w-3xl mx-auto leading-relaxed"> <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> </p>
<div className="flex flex-col sm:flex-row gap-4 justify-center"> <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 Connect with Backend Experts
<ArrowRight className="ml-2 w-4 h-4" /> <ArrowRight className="ml-2 w-4 h-4" />
</Button> </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 Request a Technical Assessment
</Button> </Button> */}
</div> </div>
</div> </div>
</div> </div>
@@ -165,7 +249,9 @@ export const HireBackendDevelopers = () => {
<div className="container mx-auto px-6 lg:px-8"> <div className="container mx-auto px-6 lg:px-8">
<div className="max-w-4xl mx-auto text-center"> <div className="max-w-4xl mx-auto text-center">
<p className="text-lg text-muted-foreground leading-relaxed"> <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> </p>
</div> </div>
</div> </div>
@@ -179,25 +265,33 @@ export const HireBackendDevelopers = () => {
Popular Backend Technology Stacks Popular Backend Technology Stacks
</h2> </h2>
<p className="text-muted-foreground max-w-2xl mx-auto"> <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> </p>
</div> </div>
<div className="grid md:grid-cols-2 gap-8"> <div className="grid md:grid-cols-2 gap-8">
{techStacks.map((stack, index) => ( {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"> <CardContent className="p-8">
<h3 className="text-xl font-bold text-white mb-3 group-hover:text-[#E5195E] transition-colors duration-300"> <h3 className="text-xl font-bold text-white mb-3 group-hover:text-[#E5195E] transition-colors duration-300">
{stack.name} {stack.name}
</h3> </h3>
<p className="text-muted-foreground mb-6 leading-relaxed"> <p className="text-muted-foreground mb-6 leading-relaxed">
{stack.description} {stack.description}
</p> </p>
<div className="flex flex-wrap gap-2"> <div className="flex flex-wrap gap-2">
{stack.technologies.map((tech, techIndex) => ( {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} {tech}
</Badge> </Badge>
))} ))}
@@ -220,24 +314,29 @@ export const HireBackendDevelopers = () => {
Comprehensive backend skills for enterprise-grade applications Comprehensive backend skills for enterprise-grade applications
</p> </p>
</div> </div>
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
{expertise.map((area, index) => ( {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"> <CardContent className="p-6">
<h3 className="text-lg font-semibold text-white mb-3 group-hover:text-[#E5195E] transition-colors duration-300"> <h3 className="text-lg font-semibold text-white mb-3 group-hover:text-[#E5195E] transition-colors duration-300">
{area.category} {area.category}
</h3> </h3>
<p className="text-muted-foreground text-sm mb-4 leading-relaxed"> <p className="text-muted-foreground text-sm mb-4 leading-relaxed">
{area.description} {area.description}
</p> </p>
<div className="space-y-1"> <div className="space-y-1">
{area.skills.map((skill, skillIndex) => ( {area.skills.map((skill, skillIndex) => (
<div key={skillIndex} className="flex items-center gap-2"> <div key={skillIndex} className="flex items-center gap-2">
<div className="w-1.5 h-1.5 rounded-full bg-[#E5195E]" /> <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>
))} ))}
</div> </div>
@@ -259,10 +358,13 @@ export const HireBackendDevelopers = () => {
Comprehensive backend solutions that power your applications Comprehensive backend solutions that power your applications
</p> </p>
</div> </div>
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
{deliverables.map((item, index) => ( {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"> <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" /> <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"> <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 Backend expertise for complex and demanding applications
</p> </p>
</div> </div>
<div className="grid md:grid-cols-2 gap-6 max-w-4xl mx-auto"> <div className="grid md:grid-cols-2 gap-6 max-w-4xl mx-auto">
{projectTypes.map((project, index) => ( {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" /> <CheckCircle className="w-5 h-5 text-[#E5195E] flex-shrink-0" />
<span className="text-white">{project}</span> <span className="text-white">{project}</span>
</div> </div>
@@ -312,23 +417,28 @@ export const HireBackendDevelopers = () => {
Real results from satisfied clients Real results from satisfied clients
</p> </p>
</div> </div>
<div className="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto"> <div className="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto">
{testimonials.map((testimonial, index) => ( {testimonials.map((testimonial, index) => (
<Card key={index} className="bg-card/50 border-white/10"> <Card key={index} className="bg-card/50 border-white/10">
<CardContent className="p-8"> <CardContent className="p-8">
<div className="flex gap-1 mb-4"> <div className="flex gap-1 mb-4">
{[...Array(testimonial.rating)].map((_, i) => ( {[...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> </div>
<p className="text-muted-foreground mb-6 leading-relaxed italic"> <p className="text-muted-foreground mb-6 leading-relaxed italic">
"{testimonial.quote}" "{testimonial.quote}"
</p> </p>
<div className="border-t border-white/10 pt-6"> <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> <p className="text-[#E5195E] text-sm">{testimonial.role}</p>
</div> </div>
</CardContent> </CardContent>
@@ -346,14 +456,22 @@ export const HireBackendDevelopers = () => {
Ready to Build a Solid Foundation? Ready to Build a Solid Foundation?
</h2> </h2>
<p className="text-lg text-muted-foreground mb-8 max-w-2xl mx-auto"> <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> </p>
<div className="flex flex-col sm:flex-row gap-4 justify-center"> <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 Start Your Project
<ArrowRight className="ml-2 w-4 h-4" /> <ArrowRight className="ml-2 w-4 h-4" />
</Button> </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 Technical Consultation
</Button> </Button>
</div> </div>
@@ -364,4 +482,4 @@ export const HireBackendDevelopers = () => {
<Footer /> <Footer />
</div> </div>
); );
}; };

181
pages/HireFrontendDevelopers.tsx
View File

@@ -4,68 +4,101 @@ import { Footer } from "../components/Footer";
import { Button } from "../components/ui/button"; import { Button } from "../components/ui/button";
import { Badge } from "../components/ui/badge"; import { Badge } from "../components/ui/badge";
import { Card, CardContent } from "../components/ui/card"; 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 = () => { export const HireFrontendDevelopers = () => {
const expertise = [ const expertise = [
{ {
category: "JavaScript Frameworks", category: "JavaScript Frameworks",
description: "React.js, Angular, Vue.js for dynamic and single-page applications", description:
skills: ["React.js", "Angular", "Vue.js", "Next.js", "Svelte"] "React.js, Angular, Vue.js for dynamic and single-page applications",
skills: ["React.js", "Angular", "Vue.js", "Next.js", "Svelte"],
}, },
{ {
category: "Core Technologies", category: "Core Technologies",
description: "HTML5, CSS3 (Sass, Less), JavaScript (ES6+)", 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", category: "Responsive Design",
description: "Building interfaces that adapt flawlessly across all devices and screen sizes", description:
skills: ["CSS Grid", "Flexbox", "Media Queries", "Mobile-First Design"] "Building interfaces that adapt flawlessly across all devices and screen sizes",
skills: ["CSS Grid", "Flexbox", "Media Queries", "Mobile-First Design"],
}, },
{ {
category: "UI Libraries & Frameworks", category: "UI Libraries & Frameworks",
description: "Bootstrap, Material-UI, Tailwind CSS", 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", category: "Performance Optimization",
description: "Ensuring fast loading times and smooth interactions", 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", category: "Cross-Browser Compatibility",
description: "Developing solutions that work consistently across all major browsers", description:
skills: ["Browser Testing", "Polyfills", "Progressive Enhancement", "Feature Detection"] "Developing solutions that work consistently across all major browsers",
} skills: [
"Browser Testing",
"Polyfills",
"Progressive Enhancement",
"Feature Detection",
],
},
]; ];
const deliverables = [ const deliverables = [
{ {
icon: Target, icon: Target,
title: "Pixel-Perfect Implementation", title: "Pixel-Perfect Implementation",
description: "Translating UI/UX designs into precise code." description: "Translating UI/UX designs into precise code.",
}, },
{ {
icon: Zap, icon: Zap,
title: "Optimized Performance", title: "Optimized Performance",
description: "Writing efficient code for speed and responsiveness." description: "Writing efficient code for speed and responsiveness.",
}, },
{ {
icon: Smartphone, icon: Smartphone,
title: "Interactive & Dynamic UIs", 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, icon: Users,
title: "Accessibility Standards", title: "Accessibility Standards",
description: "Ensuring applications are usable for everyone." description: "Ensuring applications are usable for everyone.",
}, },
{ {
icon: Code, icon: Code,
title: "Collaboration with Backend Teams", 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 = [ const projectTypes = [
@@ -73,59 +106,74 @@ export const HireFrontendDevelopers = () => {
"Interactive Dashboards & Admin Panels", "Interactive Dashboards & Admin Panels",
"E-commerce Frontends", "E-commerce Frontends",
"Marketing Websites with Complex Animations", "Marketing Websites with Complex Animations",
"Progressive Web Apps (PWAs)" "Progressive Web Apps (PWAs)",
]; ];
const testimonials = [ 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", author: "Lisa Anderson",
role: "Product Manager, DesignCorp", 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", author: "James Wilson",
role: "Tech Lead, Analytics Pro", role: "Tech Lead, Analytics Pro",
rating: 5 rating: 5,
} },
]; ];
return ( return (
<div className="dark min-h-screen bg-background"> <div className="dark min-h-screen bg-background">
<Navigation /> <Navigation />
{/* Hero Section */} {/* Hero Section */}
<section className="relative pt-24 pb-16 overflow-hidden"> <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 className="absolute inset-0 bg-gradient-to-br from-[#E5195E]/10 via-background to-background" />
<div <div
className="absolute inset-0 opacity-30" className="absolute inset-0 opacity-30"
style={{ style={{
backgroundImage: `radial-gradient(circle at 1px 1px, rgba(255,255,255,0.15) 1px, transparent 0)`, 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="relative container mx-auto px-6 lg:px-8">
<div className="max-w-4xl mx-auto text-center"> <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 Crafting Engaging User Experiences
</Badge> </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"> <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 Hire Frontend Developers: Crafting Intuitive and
<span className="bg-gradient-to-r from-[#E5195E] to-[#FF6B9D] bg-clip-text text-transparent"> Engaging User Experiences</span> <span className="bg-gradient-to-r from-[#E5195E] to-[#FF6B9D] bg-clip-text text-transparent">
{" "}
Engaging User Experiences
</span>
</h1> </h1>
<p className="text-lg md:text-xl text-muted-foreground mb-8 max-w-3xl mx-auto leading-relaxed"> <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> </p>
<div className="flex flex-col sm:flex-row gap-4 justify-center"> <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 Find Your Frontend Specialist
<ArrowRight className="ml-2 w-4 h-4" /> <ArrowRight className="ml-2 w-4 h-4" />
</Button> </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 Discuss Your UI Needs
</Button> </Button> */}
</div> </div>
</div> </div>
</div> </div>
@@ -136,7 +184,10 @@ export const HireFrontendDevelopers = () => {
<div className="container mx-auto px-6 lg:px-8"> <div className="container mx-auto px-6 lg:px-8">
<div className="max-w-4xl mx-auto text-center"> <div className="max-w-4xl mx-auto text-center">
<p className="text-lg text-muted-foreground leading-relaxed"> <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> </p>
</div> </div>
</div> </div>
@@ -153,24 +204,29 @@ export const HireFrontendDevelopers = () => {
Comprehensive frontend skills for modern web development Comprehensive frontend skills for modern web development
</p> </p>
</div> </div>
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
{expertise.map((area, index) => ( {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"> <CardContent className="p-6">
<h3 className="text-lg font-semibold text-white mb-3 group-hover:text-[#E5195E] transition-colors duration-300"> <h3 className="text-lg font-semibold text-white mb-3 group-hover:text-[#E5195E] transition-colors duration-300">
{area.category} {area.category}
</h3> </h3>
<p className="text-muted-foreground text-sm mb-4 leading-relaxed"> <p className="text-muted-foreground text-sm mb-4 leading-relaxed">
{area.description} {area.description}
</p> </p>
<div className="space-y-1"> <div className="space-y-1">
{area.skills.map((skill, skillIndex) => ( {area.skills.map((skill, skillIndex) => (
<div key={skillIndex} className="flex items-center gap-2"> <div key={skillIndex} className="flex items-center gap-2">
<div className="w-1.5 h-1.5 rounded-full bg-[#E5195E]" /> <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>
))} ))}
</div> </div>
@@ -192,10 +248,13 @@ export const HireFrontendDevelopers = () => {
Exceptional frontend solutions that enhance user engagement Exceptional frontend solutions that enhance user engagement
</p> </p>
</div> </div>
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto"> <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto">
{deliverables.map((item, index) => ( {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"> <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" /> <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"> <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 Frontend expertise that makes a difference
</p> </p>
</div> </div>
<div className="grid md:grid-cols-2 gap-6 max-w-3xl mx-auto"> <div className="grid md:grid-cols-2 gap-6 max-w-3xl mx-auto">
{projectTypes.map((project, index) => ( {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" /> <CheckCircle className="w-5 h-5 text-[#E5195E] flex-shrink-0" />
<span className="text-white">{project}</span> <span className="text-white">{project}</span>
</div> </div>
@@ -245,23 +307,28 @@ export const HireFrontendDevelopers = () => {
Real results from satisfied clients Real results from satisfied clients
</p> </p>
</div> </div>
<div className="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto"> <div className="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto">
{testimonials.map((testimonial, index) => ( {testimonials.map((testimonial, index) => (
<Card key={index} className="bg-background/50 border-white/10"> <Card key={index} className="bg-background/50 border-white/10">
<CardContent className="p-8"> <CardContent className="p-8">
<div className="flex gap-1 mb-4"> <div className="flex gap-1 mb-4">
{[...Array(testimonial.rating)].map((_, i) => ( {[...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> </div>
<p className="text-muted-foreground mb-6 leading-relaxed italic"> <p className="text-muted-foreground mb-6 leading-relaxed italic">
"{testimonial.quote}" "{testimonial.quote}"
</p> </p>
<div className="border-t border-white/10 pt-6"> <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> <p className="text-[#E5195E] text-sm">{testimonial.role}</p>
</div> </div>
</CardContent> </CardContent>
@@ -279,14 +346,22 @@ export const HireFrontendDevelopers = () => {
Ready to Transform Your User Interface? Ready to Transform Your User Interface?
</h2> </h2>
<p className="text-lg text-muted-foreground mb-8 max-w-2xl mx-auto"> <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> </p>
<div className="flex flex-col sm:flex-row gap-4 justify-center"> <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 Get Started Today
<ArrowRight className="ml-2 w-4 h-4" /> <ArrowRight className="ml-2 w-4 h-4" />
</Button> </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 View Portfolio
</Button> </Button>
</div> </div>
@@ -297,4 +372,4 @@ export const HireFrontendDevelopers = () => {
<Footer /> <Footer />
</div> </div>
); );
}; };

195
pages/HireFullStackDevelopers.tsx
View File

@@ -4,62 +4,85 @@ import { Footer } from "../components/Footer";
import { Button } from "../components/ui/button"; import { Button } from "../components/ui/button";
import { Badge } from "../components/ui/badge"; import { Badge } from "../components/ui/badge";
import { Card, CardContent } from "../components/ui/card"; 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 = () => { export const HireFullStackDevelopers = () => {
const expertise = [ const expertise = [
{ {
category: "Frontend Technologies", category: "Frontend Technologies",
skills: ["HTML5", "CSS3", "JavaScript", "React", "Angular", "Vue.js"] skills: ["HTML5", "CSS3", "JavaScript", "React", "Angular", "Vue.js"],
}, },
{ {
category: "Backend Technologies", category: "Backend Technologies",
skills: ["Node.js", "Python (Django, Flask)", "Ruby on Rails", "PHP (Laravel)", "Java (Spring Boot)"] skills: [
"Node.js",
"Python (Django, Flask)",
"Ruby on Rails",
"PHP (Laravel)",
"Java (Spring Boot)",
],
}, },
{ {
category: "Databases", category: "Databases",
skills: ["MySQL", "PostgreSQL", "MongoDB", "Cassandra", "Redis"] skills: ["MySQL", "PostgreSQL", "MongoDB", "Cassandra", "Redis"],
}, },
{ {
category: "Cloud Platforms", category: "Cloud Platforms",
skills: ["AWS", "Azure", "Google Cloud Platform", "Heroku"] skills: ["AWS", "Azure", "Google Cloud Platform", "Heroku"],
}, },
{ {
category: "Version Control", category: "Version Control",
skills: ["Git", "GitHub", "GitLab", "Bitbucket"] skills: ["Git", "GitHub", "GitLab", "Bitbucket"],
}, },
{ {
category: "APIs", category: "APIs",
skills: ["RESTful APIs", "GraphQL", "WebSocket", "Microservices"] skills: ["RESTful APIs", "GraphQL", "WebSocket", "Microservices"],
} },
]; ];
const benefits = [ const benefits = [
{ {
icon: Users, icon: Users,
title: "Single Point of Contact", 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, icon: Zap,
title: "Faster Development Cycles", title: "Faster Development Cycles",
description: "Reduced communication overhead and quicker problem-solving." description:
"Reduced communication overhead and quicker problem-solving.",
}, },
{ {
icon: DollarSign, icon: DollarSign,
title: "Cost-Efficiency", 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, icon: Target,
title: "Versatility", title: "Versatility",
description: "Adaptable to various project requirements and technology stacks." description:
"Adaptable to various project requirements and technology stacks.",
}, },
{ {
icon: Globe, icon: Globe,
title: "Holistic Project Understanding", title: "Holistic Project Understanding",
description: "A complete view of the application architecture." description: "A complete view of the application architecture.",
} },
]; ];
const solutionTypes = [ const solutionTypes = [
@@ -67,82 +90,97 @@ export const HireFullStackDevelopers = () => {
"E-commerce Platforms with Custom Features", "E-commerce Platforms with Custom Features",
"Social Networking Sites", "Social Networking Sites",
"Data-Intensive Dashboards", "Data-Intensive Dashboards",
"Real-Time Applications" "Real-Time Applications",
]; ];
const techStacks = [ const techStacks = [
{ {
name: "MERN Stack", name: "MERN Stack",
technologies: ["MongoDB", "Express.js", "React", "Node.js"], technologies: ["MongoDB", "Express.js", "React", "Node.js"],
description: "Modern JavaScript-based full-stack development" description: "Modern JavaScript-based full-stack development",
}, },
{ {
name: "MEAN Stack", name: "MEAN Stack",
technologies: ["MongoDB", "Express.js", "Angular", "Node.js"], 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", name: "Django + React",
technologies: ["Python", "Django", "React", "PostgreSQL"], 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", name: "Laravel + Vue.js",
technologies: ["PHP", "Laravel", "Vue.js", "MySQL"], 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 = [ 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", author: "David Rodriguez",
role: "Founder, CloudTech Solutions", 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", author: "Emma Thompson",
role: "CTO, DataFlow Inc.", role: "CTO, DataFlow Inc.",
rating: 5 rating: 5,
} },
]; ];
return ( return (
<div className="dark min-h-screen bg-background"> <div className="dark min-h-screen bg-background">
<Navigation /> <Navigation />
{/* Hero Section */} {/* Hero Section */}
<section className="relative pt-24 pb-16 overflow-hidden"> <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 className="absolute inset-0 bg-gradient-to-br from-[#E5195E]/10 via-background to-background" />
<div <div
className="absolute inset-0 opacity-30" className="absolute inset-0 opacity-30"
style={{ style={{
backgroundImage: `radial-gradient(circle at 1px 1px, rgba(255,255,255,0.15) 1px, transparent 0)`, 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="relative container mx-auto px-6 lg:px-8">
<div className="max-w-4xl mx-auto text-center"> <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 End-to-End Development Experts
</Badge> </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"> <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 Hire Full Stack Developers: Comprehensive Solutions from
<span className="bg-gradient-to-r from-[#E5195E] to-[#FF6B9D] bg-clip-text text-transparent"> Front to Back</span> <span className="bg-gradient-to-r from-[#E5195E] to-[#FF6B9D] bg-clip-text text-transparent">
{" "}
Front to Back
</span>
</h1> </h1>
<p className="text-lg md:text-xl text-muted-foreground mb-8 max-w-3xl mx-auto leading-relaxed"> <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> </p>
<div className="flex flex-col sm:flex-row gap-4 justify-center"> <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 Find Your Full Stack Expert
<ArrowRight className="ml-2 w-4 h-4" /> <ArrowRight className="ml-2 w-4 h-4" />
</Button> </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 Get a Quote for Full Stack Development
</Button> </Button> */}
</div> </div>
</div> </div>
</div> </div>
@@ -153,7 +191,10 @@ export const HireFullStackDevelopers = () => {
<div className="container mx-auto px-6 lg:px-8"> <div className="container mx-auto px-6 lg:px-8">
<div className="max-w-4xl mx-auto text-center"> <div className="max-w-4xl mx-auto text-center">
<p className="text-lg text-muted-foreground leading-relaxed"> <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> </p>
</div> </div>
</div> </div>
@@ -167,25 +208,33 @@ export const HireFullStackDevelopers = () => {
Popular Technology Stacks Popular Technology Stacks
</h2> </h2>
<p className="text-muted-foreground max-w-2xl mx-auto"> <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> </p>
</div> </div>
<div className="grid md:grid-cols-2 gap-8"> <div className="grid md:grid-cols-2 gap-8">
{techStacks.map((stack, index) => ( {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"> <CardContent className="p-8">
<h3 className="text-xl font-bold text-white mb-3 group-hover:text-[#E5195E] transition-colors duration-300"> <h3 className="text-xl font-bold text-white mb-3 group-hover:text-[#E5195E] transition-colors duration-300">
{stack.name} {stack.name}
</h3> </h3>
<p className="text-muted-foreground mb-6 leading-relaxed"> <p className="text-muted-foreground mb-6 leading-relaxed">
{stack.description} {stack.description}
</p> </p>
<div className="flex flex-wrap gap-2"> <div className="flex flex-wrap gap-2">
{stack.technologies.map((tech, techIndex) => ( {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} {tech}
</Badge> </Badge>
))} ))}
@@ -208,20 +257,25 @@ export const HireFullStackDevelopers = () => {
Comprehensive technical skills across the entire development stack Comprehensive technical skills across the entire development stack
</p> </p>
</div> </div>
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
{expertise.map((area, index) => ( {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"> <CardContent className="p-6">
<h3 className="text-lg font-semibold text-white mb-4 group-hover:text-[#E5195E] transition-colors duration-300"> <h3 className="text-lg font-semibold text-white mb-4 group-hover:text-[#E5195E] transition-colors duration-300">
{area.category} {area.category}
</h3> </h3>
<div className="space-y-2"> <div className="space-y-2">
{area.skills.map((skill, skillIndex) => ( {area.skills.map((skill, skillIndex) => (
<div key={skillIndex} className="flex items-center gap-2"> <div key={skillIndex} className="flex items-center gap-2">
<div className="w-2 h-2 rounded-full bg-[#E5195E]" /> <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>
))} ))}
</div> </div>
@@ -243,10 +297,13 @@ export const HireFullStackDevelopers = () => {
Why full stack developers are the smart choice for your project Why full stack developers are the smart choice for your project
</p> </p>
</div> </div>
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto"> <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto">
{benefits.map((benefit, index) => ( {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"> <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" /> <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"> <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 Complex applications that benefit from end-to-end expertise
</p> </p>
</div> </div>
<div className="grid md:grid-cols-2 gap-6 max-w-3xl mx-auto"> <div className="grid md:grid-cols-2 gap-6 max-w-3xl mx-auto">
{solutionTypes.map((solution, index) => ( {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" /> <CheckCircle className="w-5 h-5 text-[#E5195E] flex-shrink-0" />
<span className="text-white">{solution}</span> <span className="text-white">{solution}</span>
</div> </div>
@@ -296,23 +356,28 @@ export const HireFullStackDevelopers = () => {
Real results from satisfied clients Real results from satisfied clients
</p> </p>
</div> </div>
<div className="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto"> <div className="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto">
{testimonials.map((testimonial, index) => ( {testimonials.map((testimonial, index) => (
<Card key={index} className="bg-card/50 border-white/10"> <Card key={index} className="bg-card/50 border-white/10">
<CardContent className="p-8"> <CardContent className="p-8">
<div className="flex gap-1 mb-4"> <div className="flex gap-1 mb-4">
{[...Array(testimonial.rating)].map((_, i) => ( {[...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> </div>
<p className="text-muted-foreground mb-6 leading-relaxed italic"> <p className="text-muted-foreground mb-6 leading-relaxed italic">
"{testimonial.quote}" "{testimonial.quote}"
</p> </p>
<div className="border-t border-white/10 pt-6"> <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> <p className="text-[#E5195E] text-sm">{testimonial.role}</p>
</div> </div>
</CardContent> </CardContent>
@@ -330,14 +395,22 @@ export const HireFullStackDevelopers = () => {
Ready to Streamline Your Development Process? Ready to Streamline Your Development Process?
</h2> </h2>
<p className="text-lg text-muted-foreground mb-8 max-w-2xl mx-auto"> <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> </p>
<div className="flex flex-col sm:flex-row gap-4 justify-center"> <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 Start Your Project
<ArrowRight className="ml-2 w-4 h-4" /> <ArrowRight className="ml-2 w-4 h-4" />
</Button> </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 Discuss Your Requirements
</Button> </Button>
</div> </div>
@@ -348,4 +421,4 @@ export const HireFullStackDevelopers = () => {
<Footer /> <Footer />
</div> </div>
); );
}; };

13
pages/HireMobileAppDevelopers.tsx
View File

@@ -5,6 +5,7 @@ import { Button } from "../components/ui/button";
import { Badge } from "../components/ui/badge"; import { Badge } from "../components/ui/badge";
import { Card, CardContent } from "../components/ui/card"; import { Card, CardContent } from "../components/ui/card";
import { ArrowRight, Smartphone, Apple, Code, Zap, Shield, Target, Users, CheckCircle, Star } from "lucide-react"; import { ArrowRight, Smartphone, Apple, Code, Zap, Shield, Target, Users, CheckCircle, Star } from "lucide-react";
import { navigateTo } from "@/App";
export const HireMobileAppDevelopers = () => { export const HireMobileAppDevelopers = () => {
const expertise = [ 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. 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> </p>
<div className="flex flex-col sm:flex-row gap-4 justify-center"> <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 Get a Free Consultation for Mobile Developers
<ArrowRight className="ml-2 w-4 h-4" /> <ArrowRight className="ml-2 w-4 h-4" />
</Button> </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 View Developer Profiles
</Button> </Button> */}
</div> </div>
</div> </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. Connect with our expert mobile app developers and turn your vision into a powerful mobile experience.
</p> </p>
<div className="flex flex-col sm:flex-row gap-4 justify-center"> <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 Get Started Today
<ArrowRight className="ml-2 w-4 h-4" /> <ArrowRight className="ml-2 w-4 h-4" />
</Button> </Button>

236
pages/HireQAEngineers.tsx
View File

@@ -4,68 +4,129 @@ import { Footer } from "../components/Footer";
import { Button } from "../components/ui/button"; import { Button } from "../components/ui/button";
import { Badge } from "../components/ui/badge"; import { Badge } from "../components/ui/badge";
import { Card, CardContent } from "../components/ui/card"; 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 = () => { export const HireQAEngineers = () => {
const expertise = [ const expertise = [
{ {
category: "Manual Testing", category: "Manual Testing",
description: "Comprehensive functional, usability, and exploratory testing to uncover subtle issues", description:
skills: ["Functional Testing", "Usability Testing", "Exploratory Testing", "Regression Testing", "User Acceptance Testing"] "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", category: "Automated Testing",
description: "Developing and maintaining automated test scripts for faster, repeatable testing", description:
skills: ["Selenium", "Cypress", "Playwright", "Jest", "TestNG", "JUnit", "Puppeteer"] "Developing and maintaining automated test scripts for faster, repeatable testing",
skills: [
"Selenium",
"Cypress",
"Playwright",
"Jest",
"TestNG",
"JUnit",
"Puppeteer",
],
}, },
{ {
category: "Performance Testing", category: "Performance Testing",
description: "Evaluating application speed, responsiveness, and stability under various load conditions", description:
skills: ["Load Testing", "Stress Testing", "Volume Testing", "JMeter", "LoadRunner", "K6"] "Evaluating application speed, responsiveness, and stability under various load conditions",
skills: [
"Load Testing",
"Stress Testing",
"Volume Testing",
"JMeter",
"LoadRunner",
"K6",
],
}, },
{ {
category: "Security Testing", category: "Security Testing",
description: "Identifying vulnerabilities and ensuring data protection measures are robust", description:
skills: ["Vulnerability Assessment", "Penetration Testing", "OWASP Testing", "Security Audits"] "Identifying vulnerabilities and ensuring data protection measures are robust",
skills: [
"Vulnerability Assessment",
"Penetration Testing",
"OWASP Testing",
"Security Audits",
],
}, },
{ {
category: "API Testing", category: "API Testing",
description: "Validating the functionality, reliability, and performance of APIs", description:
skills: ["REST API Testing", "GraphQL Testing", "Postman", "Newman", "SoapUI", "Insomnia"] "Validating the functionality, reliability, and performance of APIs",
skills: [
"REST API Testing",
"GraphQL Testing",
"Postman",
"Newman",
"SoapUI",
"Insomnia",
],
}, },
{ {
category: "Mobile App Testing", category: "Mobile App Testing",
description: "Testing across diverse devices, operating systems, and network conditions", description:
skills: ["iOS Testing", "Android Testing", "Cross-Platform Testing", "Device Testing", "Network Testing"] "Testing across diverse devices, operating systems, and network conditions",
} skills: [
"iOS Testing",
"Android Testing",
"Cross-Platform Testing",
"Device Testing",
"Network Testing",
],
},
]; ];
const deliverables = [ const deliverables = [
{ {
icon: Bug, icon: Bug,
title: "Defect Prevention & Detection", title: "Defect Prevention & Detection",
description: "Minimizing bugs and ensuring a stable product release." description: "Minimizing bugs and ensuring a stable product release.",
}, },
{ {
icon: Users, icon: Users,
title: "Enhanced User Satisfaction", title: "Enhanced User Satisfaction",
description: "A bug-free experience leads to happier users." description: "A bug-free experience leads to happier users.",
}, },
{ {
icon: Target, icon: Target,
title: "Reduced Development Costs", title: "Reduced Development Costs",
description: "Catching issues early saves significant time and resources." description:
"Catching issues early saves significant time and resources.",
}, },
{ {
icon: Shield, icon: Shield,
title: "Improved Brand Reputation", title: "Improved Brand Reputation",
description: "Delivering a reliable product builds trust and credibility." description:
"Delivering a reliable product builds trust and credibility.",
}, },
{ {
icon: CheckCircle, icon: CheckCircle,
title: "Compliance & Standards Adherence", title: "Compliance & Standards Adherence",
description: "Ensuring your software meets industry and regulatory requirements." description:
} "Ensuring your software meets industry and regulatory requirements.",
},
]; ];
const projectTypes = [ const projectTypes = [
@@ -73,86 +134,119 @@ export const HireQAEngineers = () => {
"Complex Applications with Intricate Workflows", "Complex Applications with Intricate Workflows",
"E-commerce Platforms (Payment Gateways, Inventory)", "E-commerce Platforms (Payment Gateways, Inventory)",
"Applications with Strict Performance Requirements", "Applications with Strict Performance Requirements",
"Regulated Industry Software (Healthcare, Finance)" "Regulated Industry Software (Healthcare, Finance)",
]; ];
const testingTools = [ const testingTools = [
{ {
category: "Automation Tools", category: "Automation Tools",
tools: ["Selenium WebDriver", "Cypress", "Playwright", "TestComplete", "Ranorex"] tools: [
"Selenium WebDriver",
"Cypress",
"Playwright",
"TestComplete",
"Ranorex",
],
}, },
{ {
category: "Performance Tools", category: "Performance Tools",
tools: ["Apache JMeter", "LoadRunner", "K6", "Gatling", "BlazeMeter"] tools: ["Apache JMeter", "LoadRunner", "K6", "Gatling", "BlazeMeter"],
}, },
{ {
category: "API Testing", category: "API Testing",
tools: ["Postman", "SoapUI", "Insomnia", "REST Assured", "Karate"] tools: ["Postman", "SoapUI", "Insomnia", "REST Assured", "Karate"],
}, },
{ {
category: "Bug Tracking", category: "Bug Tracking",
tools: ["Jira", "Azure DevOps", "Bugzilla", "TestRail", "Zephyr"] tools: ["Jira", "Azure DevOps", "Bugzilla", "TestRail", "Zephyr"],
}, },
{ {
category: "Mobile Testing", category: "Mobile Testing",
tools: ["Appium", "Espresso", "XCTest", "Firebase Test Lab", "BrowserStack"] tools: [
"Appium",
"Espresso",
"XCTest",
"Firebase Test Lab",
"BrowserStack",
],
}, },
{ {
category: "CI/CD Integration", category: "CI/CD Integration",
tools: ["Jenkins", "GitLab CI", "Azure Pipelines", "CircleCI", "GitHub Actions"] tools: [
} "Jenkins",
"GitLab CI",
"Azure Pipelines",
"CircleCI",
"GitHub Actions",
],
},
]; ];
const testimonials = [ 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", author: "Kevin Martinez",
role: "Product Owner, SecureApp Solutions", 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", author: "Sophie Turner",
role: "Development Manager, AgileWorks", role: "Development Manager, AgileWorks",
rating: 5 rating: 5,
} },
]; ];
return ( return (
<div className="dark min-h-screen bg-background"> <div className="dark min-h-screen bg-background">
<Navigation /> <Navigation />
{/* Hero Section */} {/* Hero Section */}
<section className="relative pt-24 pb-16 overflow-hidden"> <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 className="absolute inset-0 bg-gradient-to-br from-[#E5195E]/10 via-background to-background" />
<div <div
className="absolute inset-0 opacity-30" className="absolute inset-0 opacity-30"
style={{ style={{
backgroundImage: `radial-gradient(circle at 1px 1px, rgba(255,255,255,0.15) 1px, transparent 0)`, 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="relative container mx-auto px-6 lg:px-8">
<div className="max-w-4xl mx-auto text-center"> <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 Ensuring Software Quality & Reliability
</Badge> </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"> <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 Hire QA Engineers: Ensuring Flawless
<span className="bg-gradient-to-r from-[#E5195E] to-[#FF6B9D] bg-clip-text text-transparent"> Performance and Reliability</span> <span className="bg-gradient-to-r from-[#E5195E] to-[#FF6B9D] bg-clip-text text-transparent">
{" "}
Performance and Reliability
</span>
</h1> </h1>
<p className="text-lg md:text-xl text-muted-foreground mb-8 max-w-3xl mx-auto leading-relaxed"> <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> </p>
<div className="flex flex-col sm:flex-row gap-4 justify-center"> <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 Strengthen Your Software Quality
<ArrowRight className="ml-2 w-4 h-4" /> <ArrowRight className="ml-2 w-4 h-4" />
</Button> </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 Discuss Your Testing Needs
</Button> </Button> */}
</div> </div>
</div> </div>
</div> </div>
@@ -166,23 +260,29 @@ export const HireQAEngineers = () => {
Testing Tools & Technologies Testing Tools & Technologies
</h2> </h2>
<p className="text-muted-foreground max-w-2xl mx-auto"> <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> </p>
</div> </div>
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
{testingTools.map((category, index) => ( {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"> <CardContent className="p-6">
<h3 className="text-lg font-semibold text-white mb-4 group-hover:text-[#E5195E] transition-colors duration-300"> <h3 className="text-lg font-semibold text-white mb-4 group-hover:text-[#E5195E] transition-colors duration-300">
{category.category} {category.category}
</h3> </h3>
<div className="space-y-2"> <div className="space-y-2">
{category.tools.map((tool, toolIndex) => ( {category.tools.map((tool, toolIndex) => (
<div key={toolIndex} className="flex items-center gap-2"> <div key={toolIndex} className="flex items-center gap-2">
<div className="w-2 h-2 rounded-full bg-[#E5195E]" /> <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>
))} ))}
</div> </div>
@@ -204,10 +304,13 @@ export const HireQAEngineers = () => {
Quality assurance solutions that ensure reliable software delivery Quality assurance solutions that ensure reliable software delivery
</p> </p>
</div> </div>
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto"> <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto">
{deliverables.map((item, index) => ( {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"> <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" /> <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"> <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 Client Success Stories
</h2> </h2>
</div> </div>
<div className="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto"> <div className="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto">
{testimonials.map((testimonial, index) => ( {testimonials.map((testimonial, index) => (
<Card key={index} className="bg-background/50 border-white/10"> <Card key={index} className="bg-background/50 border-white/10">
<CardContent className="p-8"> <CardContent className="p-8">
<div className="flex gap-1 mb-4"> <div className="flex gap-1 mb-4">
{[...Array(testimonial.rating)].map((_, i) => ( {[...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> </div>
<p className="text-muted-foreground mb-6 leading-relaxed italic"> <p className="text-muted-foreground mb-6 leading-relaxed italic">
"{testimonial.quote}" "{testimonial.quote}"
</p> </p>
<div className="border-t border-white/10 pt-6"> <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> <p className="text-[#E5195E] text-sm">{testimonial.role}</p>
</div> </div>
</CardContent> </CardContent>
@@ -265,14 +373,22 @@ export const HireQAEngineers = () => {
Ready to Ensure Quality Excellence? Ready to Ensure Quality Excellence?
</h2> </h2>
<p className="text-lg text-muted-foreground mb-8 max-w-2xl mx-auto"> <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> </p>
<div className="flex flex-col sm:flex-row gap-4 justify-center"> <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 Start Quality Assurance
<ArrowRight className="ml-2 w-4 h-4" /> <ArrowRight className="ml-2 w-4 h-4" />
</Button> </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 Testing Strategy Consultation
</Button> </Button>
</div> </div>
@@ -283,4 +399,4 @@ export const HireQAEngineers = () => {
<Footer /> <Footer />
</div> </div>
); );
}; };

247
pages/HireUIUXDesigners.tsx
View File

@@ -4,68 +4,126 @@ import { Footer } from "../components/Footer";
import { Button } from "../components/ui/button"; import { Button } from "../components/ui/button";
import { Badge } from "../components/ui/badge"; import { Badge } from "../components/ui/badge";
import { Card, CardContent } from "../components/ui/card"; 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 = () => { export const HireUIUXDesigners = () => {
const expertise = [ const expertise = [
{ {
category: "User Research & Analysis", category: "User Research & Analysis",
description: "Conducting usability testing, user interviews, and competitive analysis to understand user needs", description:
skills: ["User Interviews", "Usability Testing", "Surveys", "Competitive Analysis", "Persona Development"] "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", category: "Information Architecture",
description: "Structuring content and navigation for clarity and ease of use", description:
skills: ["Site Mapping", "User Flows", "Content Strategy", "Navigation Design", "Information Hierarchy"] "Structuring content and navigation for clarity and ease of use",
skills: [
"Site Mapping",
"User Flows",
"Content Strategy",
"Navigation Design",
"Information Hierarchy",
],
}, },
{ {
category: "Wireframing & Prototyping", category: "Wireframing & Prototyping",
description: "Creating low-fidelity wireframes and interactive prototypes to visualize user flows", description:
skills: ["Wireframing", "Interactive Prototypes", "Paper Prototyping", "Digital Mockups", "Flow Diagrams"] "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", category: "User Interface (UI) Design",
description: "Designing aesthetic and consistent visual elements, including typography, color palettes, iconography, and layouts", description:
skills: ["Visual Design", "Typography", "Color Theory", "Iconography", "Layout Design", "Brand Consistency"] "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", category: "User Experience (UX) Design",
description: "Focusing on the entire user journey, ensuring efficiency, satisfaction, and accessibility", description:
skills: ["Journey Mapping", "Interaction Design", "Accessibility (WCAG)", "User Psychology", "Experience Strategy"] "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", category: "Design Systems",
description: "Developing scalable design systems for consistency across products", description:
skills: ["Component Libraries", "Style Guides", "Design Tokens", "Pattern Libraries", "Brand Guidelines"] "Developing scalable design systems for consistency across products",
} skills: [
"Component Libraries",
"Style Guides",
"Design Tokens",
"Pattern Libraries",
"Brand Guidelines",
],
},
]; ];
const deliverables = [ const deliverables = [
{ {
icon: Users, icon: Users,
title: "User-Centric Designs", 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, icon: Target,
title: "Enhanced User Satisfaction", 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, icon: Eye,
title: "Increased Engagement & Conversion", title: "Increased Engagement & Conversion",
description: "Designs optimized to achieve your business goals." description: "Designs optimized to achieve your business goals.",
}, },
{ {
icon: Palette, icon: Palette,
title: "Brand Consistency", title: "Brand Consistency",
description: "Visuals that align with your brand identity." description: "Visuals that align with your brand identity.",
}, },
{ {
icon: CheckCircle, icon: CheckCircle,
title: "Accessibility Compliance", 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 = [ const projectTypes = [
@@ -73,78 +131,99 @@ export const HireUIUXDesigners = () => {
"Website & Mobile App Redesigns", "Website & Mobile App Redesigns",
"SaaS Platforms & Enterprise Solutions", "SaaS Platforms & Enterprise Solutions",
"Interactive Dashboards", "Interactive Dashboards",
"E-commerce User Journeys" "E-commerce User Journeys",
]; ];
const designTools = [ const designTools = [
{ {
category: "Design Tools", category: "Design Tools",
tools: ["Figma", "Sketch", "Adobe XD", "Adobe Creative Suite", "InVision"] tools: [
"Figma",
"Sketch",
"Adobe XD",
"Adobe Creative Suite",
"InVision",
],
}, },
{ {
category: "Prototyping", category: "Prototyping",
tools: ["Principle", "Framer", "ProtoPie", "Marvel", "Axure RP"] tools: ["Principle", "Framer", "ProtoPie", "Marvel", "Axure RP"],
}, },
{ {
category: "Research Tools", category: "Research Tools",
tools: ["Miro", "Hotjar", "UserTesting", "Optimal Workshop", "Maze"] tools: ["Miro", "Hotjar", "UserTesting", "Optimal Workshop", "Maze"],
}, },
{ {
category: "Collaboration", category: "Collaboration",
tools: ["Slack", "Notion", "Confluence", "Zeplin", "Abstract"] tools: ["Slack", "Notion", "Confluence", "Zeplin", "Abstract"],
} },
]; ];
const testimonials = [ 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", author: "Rachel Green",
role: "Product Manager, InnovateTech", 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", author: "Mark Davis",
role: "Design Director, CreativeFlow", role: "Design Director, CreativeFlow",
rating: 5 rating: 5,
} },
]; ];
return ( return (
<div className="dark min-h-screen bg-background"> <div className="dark min-h-screen bg-background">
<Navigation /> <Navigation />
{/* Hero Section */} {/* Hero Section */}
<section className="relative pt-24 pb-16 overflow-hidden"> <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 className="absolute inset-0 bg-gradient-to-br from-[#E5195E]/10 via-background to-background" />
<div <div
className="absolute inset-0 opacity-30" className="absolute inset-0 opacity-30"
style={{ style={{
backgroundImage: `radial-gradient(circle at 1px 1px, rgba(255,255,255,0.15) 1px, transparent 0)`, 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="relative container mx-auto px-6 lg:px-8">
<div className="max-w-4xl mx-auto text-center"> <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 Creating Intuitive & Beautiful Digital Experiences
</Badge> </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"> <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 Hire UI/UX Designers: Crafting Intuitive & Beautiful
<span className="bg-gradient-to-r from-[#E5195E] to-[#FF6B9D] bg-clip-text text-transparent"> Digital Experiences</span> <span className="bg-gradient-to-r from-[#E5195E] to-[#FF6B9D] bg-clip-text text-transparent">
{" "}
Digital Experiences
</span>
</h1> </h1>
<p className="text-lg md:text-xl text-muted-foreground mb-8 max-w-3xl mx-auto leading-relaxed"> <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> </p>
<div className="flex flex-col sm:flex-row gap-4 justify-center"> <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 Transform Your User Experience
<ArrowRight className="ml-2 w-4 h-4" /> <ArrowRight className="ml-2 w-4 h-4" />
</Button> </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 View Design Portfolios
</Button> </Button> */}
</div> </div>
</div> </div>
</div> </div>
@@ -155,7 +234,10 @@ export const HireUIUXDesigners = () => {
<div className="container mx-auto px-6 lg:px-8"> <div className="container mx-auto px-6 lg:px-8">
<div className="max-w-4xl mx-auto text-center"> <div className="max-w-4xl mx-auto text-center">
<p className="text-lg text-muted-foreground leading-relaxed"> <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> </p>
</div> </div>
</div> </div>
@@ -169,23 +251,29 @@ export const HireUIUXDesigners = () => {
Design Tools & Technologies Design Tools & Technologies
</h2> </h2>
<p className="text-muted-foreground max-w-2xl mx-auto"> <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> </p>
</div> </div>
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8"> <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
{designTools.map((category, index) => ( {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"> <CardContent className="p-6">
<h3 className="text-lg font-semibold text-white mb-4 group-hover:text-[#E5195E] transition-colors duration-300"> <h3 className="text-lg font-semibold text-white mb-4 group-hover:text-[#E5195E] transition-colors duration-300">
{category.category} {category.category}
</h3> </h3>
<div className="space-y-2"> <div className="space-y-2">
{category.tools.map((tool, toolIndex) => ( {category.tools.map((tool, toolIndex) => (
<div key={toolIndex} className="flex items-center gap-2"> <div key={toolIndex} className="flex items-center gap-2">
<div className="w-2 h-2 rounded-full bg-[#E5195E]" /> <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>
))} ))}
</div> </div>
@@ -204,27 +292,33 @@ export const HireUIUXDesigners = () => {
Our UI/UX Design Expertise Our UI/UX Design Expertise
</h2> </h2>
<p className="text-muted-foreground max-w-2xl mx-auto"> <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> </p>
</div> </div>
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
{expertise.map((area, index) => ( {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"> <CardContent className="p-6">
<h3 className="text-lg font-semibold text-white mb-3 group-hover:text-[#E5195E] transition-colors duration-300"> <h3 className="text-lg font-semibold text-white mb-3 group-hover:text-[#E5195E] transition-colors duration-300">
{area.category} {area.category}
</h3> </h3>
<p className="text-muted-foreground text-sm mb-4 leading-relaxed"> <p className="text-muted-foreground text-sm mb-4 leading-relaxed">
{area.description} {area.description}
</p> </p>
<div className="space-y-1"> <div className="space-y-1">
{area.skills.map((skill, skillIndex) => ( {area.skills.map((skill, skillIndex) => (
<div key={skillIndex} className="flex items-center gap-2"> <div key={skillIndex} className="flex items-center gap-2">
<div className="w-1.5 h-1.5 rounded-full bg-[#E5195E]" /> <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>
))} ))}
</div> </div>
@@ -246,10 +340,13 @@ export const HireUIUXDesigners = () => {
Design solutions that drive engagement and business success Design solutions that drive engagement and business success
</p> </p>
</div> </div>
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto"> <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto">
{deliverables.map((item, index) => ( {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"> <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" /> <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"> <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 Design expertise that transforms user experiences
</p> </p>
</div> </div>
<div className="grid md:grid-cols-2 gap-6 max-w-3xl mx-auto"> <div className="grid md:grid-cols-2 gap-6 max-w-3xl mx-auto">
{projectTypes.map((project, index) => ( {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" /> <CheckCircle className="w-5 h-5 text-[#E5195E] flex-shrink-0" />
<span className="text-white">{project}</span> <span className="text-white">{project}</span>
</div> </div>
@@ -299,23 +399,28 @@ export const HireUIUXDesigners = () => {
Real results from satisfied clients Real results from satisfied clients
</p> </p>
</div> </div>
<div className="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto"> <div className="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto">
{testimonials.map((testimonial, index) => ( {testimonials.map((testimonial, index) => (
<Card key={index} className="bg-card/50 border-white/10"> <Card key={index} className="bg-card/50 border-white/10">
<CardContent className="p-8"> <CardContent className="p-8">
<div className="flex gap-1 mb-4"> <div className="flex gap-1 mb-4">
{[...Array(testimonial.rating)].map((_, i) => ( {[...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> </div>
<p className="text-muted-foreground mb-6 leading-relaxed italic"> <p className="text-muted-foreground mb-6 leading-relaxed italic">
"{testimonial.quote}" "{testimonial.quote}"
</p> </p>
<div className="border-t border-white/10 pt-6"> <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> <p className="text-[#E5195E] text-sm">{testimonial.role}</p>
</div> </div>
</CardContent> </CardContent>
@@ -333,14 +438,22 @@ export const HireUIUXDesigners = () => {
Ready to Create Exceptional User Experiences? Ready to Create Exceptional User Experiences?
</h2> </h2>
<p className="text-lg text-muted-foreground mb-8 max-w-2xl mx-auto"> <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> </p>
<div className="flex flex-col sm:flex-row gap-4 justify-center"> <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 Start Your Design Journey
<ArrowRight className="ml-2 w-4 h-4" /> <ArrowRight className="ml-2 w-4 h-4" />
</Button> </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 Portfolio Review
</Button> </Button>
</div> </div>
@@ -351,4 +464,4 @@ export const HireUIUXDesigners = () => {
<Footer /> <Footer />
</div> </div>
); );
}; };

203
pages/LeadershipTeam.tsx
View File

@@ -3,110 +3,83 @@ import { Navigation } from "../components/Navigation";
import { Footer } from "../components/Footer"; import { Footer } from "../components/Footer";
import { Button } from "../components/ui/button"; import { Button } from "../components/ui/button";
import { Badge } from "../components/ui/badge"; 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 = () => { export const LeadershipTeam = () => {
const leaders = [ const leaders = [
{ {
name: "Sarah Chen", name: "Ritesh Pandey",
position: "Chief Executive Officer", position: "Founder & CEO",
bio: "With 15+ years in tech leadership, Sarah drives WDI's vision for digital innovation and global expansion.", image: riteshImage,
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: "Michael Rodriguez", name: "Manav Sain",
position: "Chief Technology Officer", position: "VP- Business Solutions",
bio: "Michael leads our technical strategy and ensures we stay at the forefront of emerging technologies.", image: manavImage,
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: "Emily Watson", name: "Sudhir Mallya",
position: "Chief Operating Officer", position: "CTO",
bio: "Emily oversees global operations and ensures seamless delivery across all our international projects.", image: sudhirImage,
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: "David Kumar", name: "Kartikey Gautam",
position: "Head of AI & Machine Learning", position: "Product Manager",
bio: "David leads our AI initiatives and ensures we deliver cutting-edge machine learning solutions.", image: kartikeyImage,
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: "Lisa Thompson", name: "Pooja Patade",
position: "VP of Design & User Experience", position: "Head - Accounts & HR",
bio: "Lisa ensures our solutions are not just functional but also provide exceptional user experiences.", image: poojaImage,
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: "James Park", name: "Tanveer Ajani",
position: "VP of Business Development", position: "Compliance Head",
bio: "James drives our global partnerships and expansion into new markets and industries.", image: tanveerImage,
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"
}
}
]; ];
return ( return (
<div className="dark min-h-screen bg-background"> <div className="dark min-h-screen bg-background">
<Navigation /> <Navigation />
{/* Hero Section */} {/* Hero Section */}
<section className="relative pt-24 pb-16 overflow-hidden"> <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 className="absolute inset-0 bg-gradient-to-br from-[#E5195E]/10 via-background to-background" />
<div <div
className="absolute inset-0 opacity-30" className="absolute inset-0 opacity-30"
style={{ style={{
backgroundImage: `radial-gradient(circle at 1px 1px, rgba(255,255,255,0.15) 1px, transparent 0)`, 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="relative container mx-auto px-6 lg:px-8">
<div className="max-w-4xl mx-auto text-center"> <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 Leadership Team
</Badge> </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"> <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 Meet the Visionaries Behind
<span className="bg-gradient-to-r from-[#E5195E] to-[#FF6B9D] bg-clip-text text-transparent"> WDI</span> <span className="bg-gradient-to-r from-[#E5195E] to-[#FF6B9D] bg-clip-text text-transparent">
{" "}
WDI
</span>
</h1> </h1>
<p className="text-lg md:text-xl text-muted-foreground mb-8 max-w-3xl mx-auto leading-relaxed"> <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> </p>
</div> </div>
</div> </div>
@@ -122,15 +95,15 @@ export const LeadershipTeam = () => {
{/* Profile Image */} {/* Profile Image */}
<div className="relative mb-6"> <div className="relative mb-6">
<div className="aspect-square rounded-2xl overflow-hidden bg-gradient-to-br from-[#E5195E]/20 to-[#FF6B9D]/20"> <div className="aspect-square rounded-2xl overflow-hidden bg-gradient-to-br from-[#E5195E]/20 to-[#FF6B9D]/20">
<img <img
src={leader.image} src={leader.image}
alt={leader.name} alt={leader.name}
className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-300" className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-300"
/> />
</div> </div>
<div className="absolute inset-0 rounded-2xl bg-gradient-to-t from-black/20 to-transparent" /> <div className="absolute inset-0 rounded-2xl bg-gradient-to-t from-black/20 to-transparent" />
</div> </div>
{/* Content */} {/* Content */}
<div className="space-y-4"> <div className="space-y-4">
<div> <div>
@@ -141,38 +114,6 @@ export const LeadershipTeam = () => {
{leader.position} {leader.position}
</p> </p>
</div> </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> </div>
</div> </div>
@@ -182,49 +123,60 @@ export const LeadershipTeam = () => {
</section> </section>
{/* Advisory Board */} {/* 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="container mx-auto px-6 lg:px-8">
<div className="text-center mb-12"> <div className="text-center mb-12">
<h2 className="text-3xl md:text-4xl font-bold mb-4 text-white"> <h2 className="text-3xl md:text-4xl font-bold mb-4 text-white">
Advisory Board Advisory Board
</h2> </h2>
<p className="text-muted-foreground max-w-2xl mx-auto"> <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> </p>
</div> </div>
<div className="grid md:grid-cols-3 gap-8"> <div className="grid md:grid-cols-3 gap-8">
{[ {[
{ {
name: "Dr. Alan Foster", name: "Dr. Alan Foster",
title: "Former CTO, Meta", title: "Former CTO, Meta",
expertise: "AI & Emerging Technologies" expertise: "AI & Emerging Technologies",
}, },
{ {
name: "Maria Santos", name: "Maria Santos",
title: "Former VP, Netflix", title: "Former VP, Netflix",
expertise: "Product Strategy & Growth" expertise: "Product Strategy & Growth",
}, },
{ {
name: "Robert Kim", name: "Robert Kim",
title: "Former Director, Amazon", title: "Former Director, Amazon",
expertise: "Cloud Infrastructure & Scalability" expertise: "Cloud Infrastructure & Scalability",
} },
].map((advisor, index) => ( ].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"> <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]"> <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> </span>
</div> </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-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> </div>
</div> </div>
</section> </section> */}
{/* CTA Section */} {/* CTA Section */}
<section className="py-16 bg-background"> <section className="py-16 bg-background">
@@ -234,14 +186,23 @@ export const LeadershipTeam = () => {
Want to Work with Our Team? Want to Work with Our Team?
</h2> </h2>
<p className="text-lg text-muted-foreground mb-8 max-w-2xl mx-auto"> <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> </p>
<div className="flex flex-col sm:flex-row gap-4 justify-center"> <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 Explore Careers
<ArrowRight className="ml-2 w-4 h-4" /> <ArrowRight className="ml-2 w-4 h-4" />
</Button> </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 Start a Project
</Button> </Button>
</div> </div>
@@ -252,4 +213,4 @@ export const LeadershipTeam = () => {
<Footer /> <Footer />
</div> </div>
); );
}; };

17
pages/NativeAppDevelopment.tsx
View File

@@ -105,6 +105,7 @@ import {
Briefcase, Briefcase,
Microscope, Microscope,
} from "lucide-react"; } from "lucide-react";
import { navigateTo } from "@/App";
// Native App Development Hero Section // Native App Development Hero Section
const NativeHeroWithCTA = () => { const NativeHeroWithCTA = () => {
@@ -149,7 +150,10 @@ const NativeHeroWithCTA = () => {
transition={{ duration: 0.8, delay: 0.3 }} transition={{ duration: 0.8, delay: 0.3 }}
className="flex flex-col sm:flex-row gap-4" 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"> <div className="inline-flex items-center gap-2">
<Gauge className="w-5 h-5 flex-shrink-0" /> <Gauge className="w-5 h-5 flex-shrink-0" />
<span>Discover Native Advantages</span> <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" 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" /> <MessageSquare className="w-4 h-4 flex-shrink-0" />
<span>Request a Native App Consultation</span> <span>Request Consultation</span>
</a> </a>
</motion.div> </motion.div>
</motion.div> </motion.div>
@@ -1038,7 +1042,10 @@ const NativeInlineCTA = () => {
deliver uncompromising performance and user experience. deliver uncompromising performance and user experience.
</p> </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"> <div className="inline-flex items-center gap-3">
<MessageSquare className="w-6 h-6 flex-shrink-0" /> <MessageSquare className="w-6 h-6 flex-shrink-0" />
<span>Discuss Your Native App Project</span> <span>Discuss Your Native App Project</span>
@@ -1322,7 +1329,9 @@ const NativeFinalCTA = () => {
viewport={{ once: true }} viewport={{ once: true }}
className="space-y-8" 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"> <div className="inline-flex items-center gap-3">
<Rocket className="w-6 h-6 flex-shrink-0" /> <Rocket className="w-6 h-6 flex-shrink-0" />
<span>Start Your Native App Journey</span> <span>Start Your Native App Journey</span>

144
pages/PWADevelopment.tsx
View File

@@ -31,7 +31,7 @@ import {
Users, Users,
Wifi, Wifi,
WifiOff, WifiOff,
Zap Zap,
} from "lucide-react"; } from "lucide-react";
import { ImageWithFallback } from "../components/figma/ImageWithFallback"; import { ImageWithFallback } from "../components/figma/ImageWithFallback";
import { Footer } from "../components/Footer"; import { Footer } from "../components/Footer";
@@ -93,7 +93,10 @@ const PWAHeroWithCTA = () => {
transition={{ duration: 0.8, delay: 0.3 }} transition={{ duration: 0.8, delay: 0.3 }}
className="flex flex-col sm:flex-row gap-4" 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"> <div className="inline-flex items-center gap-2">
<Globe className="w-5 h-5 flex-shrink-0" /> <Globe className="w-5 h-5 flex-shrink-0" />
<span>Explore PWA Benefits</span> <span>Explore PWA Benefits</span>
@@ -882,18 +885,24 @@ const PWASuccessStories = () => {
client: "TradersCircuit", client: "TradersCircuit",
subtitle: "Investment Platform PWA with Real-Time Trading", subtitle: "Investment Platform PWA with Real-Time Trading",
industry: "FinTech", 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"], technologies: ["React", "Service Workers", "WebSocket", "Push API"],
image: tradersCircuitImage, image: tradersCircuitImage,
results: [ results: [
"90% faster load times vs native", "90% faster load times vs native",
"Offline trading capabilities", "Offline trading capabilities",
"85% home screen installation rate", "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", duration: "8 months",
teamSize: "12 experts" teamSize: "12 experts",
}, },
{ {
id: 2, id: 2,
@@ -901,18 +910,24 @@ const PWASuccessStories = () => {
client: "Prosperty Infra", client: "Prosperty Infra",
subtitle: "Digital Real Estate PWA Platform", subtitle: "Digital Real Estate PWA Platform",
industry: "Real Estate", 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"], technologies: ["Vue.js", "Workbox", "IndexedDB", "Web Push"],
image: prospertyImage, image: prospertyImage,
results: [ results: [
"73% installation rate success", "73% installation rate success",
"38% reduction in bounce rate", "38% reduction in bounce rate",
"52% increase in property inquiries", "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", duration: "6 months",
teamSize: "10 experts" teamSize: "10 experts",
}, },
{ {
id: 3, id: 3,
@@ -920,26 +935,37 @@ const PWASuccessStories = () => {
client: "GoodTimes Ltd", client: "GoodTimes Ltd",
subtitle: "Event Discovery & Booking PWA Platform", subtitle: "Event Discovery & Booking PWA Platform",
industry: "Events & Lifestyle", industry: "Events & Lifestyle",
services: ["PWA Development", "Event Booking", "Social Features", "Payment Integration"], services: [
technologies: ["Angular", "Service Workers", "Web Share API", "Payment Request"], "PWA Development",
"Event Booking",
"Social Features",
"Payment Integration",
],
technologies: [
"Angular",
"Service Workers",
"Web Share API",
"Payment Request",
],
image: goodTimesImage, image: goodTimesImage,
results: [ results: [
"92% mobile user engagement", "92% mobile user engagement",
"30-second booking process", "30-second booking process",
"67% increase in repeat users", "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", duration: "5 months",
teamSize: "9 experts" teamSize: "9 experts",
} },
]; ];
const getIndustryIcon = (industry: string) => { const getIndustryIcon = (industry: string) => {
const icons = { const icons = {
"FinTech": Building, FinTech: Building,
"Real Estate": Building, "Real Estate": Building,
"Events & Lifestyle": Calendar "Events & Lifestyle": Calendar,
}; };
return icons[industry as keyof typeof icons] || Building; return icons[industry as keyof typeof icons] || Building;
}; };
@@ -958,10 +984,12 @@ const PWASuccessStories = () => {
Successful Progressive Web Apps by WDI Successful Progressive Web Apps by WDI
</h2> </h2>
<p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed"> <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> </p>
</motion.div> </motion.div>
<div className="grid lg:grid-cols-3 gap-8"> <div className="grid lg:grid-cols-3 gap-8">
{caseStudies.map((study, index) => { {caseStudies.map((study, index) => {
const IndustryIcon = getIndustryIcon(study.industry); const IndustryIcon = getIndustryIcon(study.industry);
@@ -975,58 +1003,70 @@ const PWASuccessStories = () => {
whileHover={{ y: -5 }} whileHover={{ y: -5 }}
className="group cursor-pointer" className="group cursor-pointer"
onClick={() => { onClick={() => {
if (study.title === 'TradersCircuit') { if (study.title === "TradersCircuit") {
navigateTo('/projects/traderscircuit'); navigateTo("/projects/traderscircuit");
} else if (study.title === 'Prosperty') { } else if (study.title === "Prosperty") {
navigateTo('/projects/prosperty'); navigateTo("/projects/prosperty");
} else if (study.title === 'GoodTimes') { } else if (study.title === "GoodTimes") {
navigateTo('/projects/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"> <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"> <div className="aspect-video overflow-hidden relative bg-black/20">
<img <img
src={study.image} src={study.image}
alt={study.title} alt={study.title}
className="w-full h-full object-contain group-hover:scale-105 transition-transform duration-300" className="w-full h-full object-contain group-hover:scale-105 transition-transform duration-300"
/> />
</div> </div>
<CardContent className="p-6"> <CardContent className="p-6">
<div className="flex items-center gap-2 mb-3"> <div className="flex items-center gap-2 mb-3">
<IndustryIcon className="w-4 h-4 text-accent" /> <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} {study.industry}
</Badge> </Badge>
</div> </div>
<h3 className="text-xl font-semibold text-white mb-2 group-hover:text-accent transition-colors duration-300"> <h3 className="text-xl font-semibold text-white mb-2 group-hover:text-accent transition-colors duration-300">
{study.title} {study.title}
</h3> </h3>
<p className="text-sm text-gray-400 mb-3">{study.client}</p> <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="space-y-3 mb-4">
<div className="flex flex-wrap gap-1"> <div className="flex flex-wrap gap-1">
{study.services.slice(0, 3).map((service) => ( {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} {service}
</Badge> </Badge>
))} ))}
</div> </div>
</div> </div>
<div className="space-y-2 mb-4"> <div className="space-y-2 mb-4">
{study.results.slice(0, 2).map((result, resultIndex) => ( {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" /> <TrendingUp className="w-3 h-3 text-accent flex-shrink-0" />
<p className="text-xs text-gray-400">{result}</p> <p className="text-xs text-gray-400">{result}</p>
</div> </div>
))} ))}
</div> </div>
<div className="flex items-center justify-between pt-4 border-t border-gray-800"> <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-3 text-xs text-gray-400">
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
@@ -1038,18 +1078,18 @@ const PWASuccessStories = () => {
{study.teamSize} {study.teamSize}
</div> </div>
</div> </div>
<Button <Button
variant="ghost" variant="ghost"
size="sm" size="sm"
className="text-accent hover:bg-accent/10 p-0" className="text-accent hover:bg-accent/10 p-0"
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
if (study.title === 'TradersCircuit') { if (study.title === "TradersCircuit") {
navigateTo('/projects/traderscircuit'); navigateTo("/projects/traderscircuit");
} else if (study.title === 'Prosperty') { } else if (study.title === "Prosperty") {
navigateTo('/projects/prosperty'); navigateTo("/projects/prosperty");
} else if (study.title === 'GoodTimes') { } else if (study.title === "GoodTimes") {
navigateTo('/projects/goodtimes'); navigateTo("/projects/goodtimes");
} }
}} }}
> >
@@ -1106,7 +1146,10 @@ const PWAInlineCTA = () => {
progressive web app that works everywhere. progressive web app that works everywhere.
</p> </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"> <div className="inline-flex items-center gap-3">
<Eye className="w-6 h-6 flex-shrink-0" /> <Eye className="w-6 h-6 flex-shrink-0" />
<span>Get a Free PWA Assessment</span> <span>Get a Free PWA Assessment</span>
@@ -1245,7 +1288,10 @@ const PWAFinalCTA = () => {
viewport={{ once: true }} viewport={{ once: true }}
className="space-y-8" 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"> <div className="inline-flex items-center gap-3">
<Rocket className="w-6 h-6 flex-shrink-0" /> <Rocket className="w-6 h-6 flex-shrink-0" />
<span>Start Your PWA Project</span> <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 { motion } from "framer-motion";
import { Navigation } from "../components/Navigation"; import {
import { Footer } from "../components/Footer"; Building,
import { ProcessSection } from "../components/ProcessSection"; Calendar,
import { FAQSection } from "../components/FAQSection"; CheckCircle,
import { AnimatedGradientText } from "../components/AnimatedGradientText"; Code,
import { Button } from "../components/ui/button"; Eye,
import { ShimmerButton } from "../components/ui/shimmer-button"; Layers,
import { Badge } from "../components/ui/badge"; RefreshCcw,
import { Card, CardContent } from "../components/ui/card"; Rocket,
import { GridPattern } from "../components/GridPattern"; Server,
import { navigateTo } from "../App"; Settings,
import { Shield,
Code, Cpu, Database, Server, Shield, Zap, Users, Star, TrendingUp,
ArrowRight, ChevronRight, Clock, TrendingUp, Layers, UserPlus,
Target, Layout, Rocket, Monitor, Lock, RefreshCcw, ShieldCheck, Zap,
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
} from "lucide-react"; } 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 // Enhanced Hero Section
const HeroWithCTA = () => { const HeroWithCTA = () => {
@@ -40,7 +43,9 @@ const HeroWithCTA = () => {
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6 }} 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> </motion.div>
{/* Main Heading */} {/* Main Heading */}
@@ -50,12 +55,13 @@ const HeroWithCTA = () => {
<span className="text-[#E5195E]">Software Engineering</span> <span className="text-[#E5195E]">Software Engineering</span>
<span className="text-white"> Solutions</span> <span className="text-white"> Solutions</span>
</h1> </h1>
<p className="text-lg text-gray-300 leading-relaxed max-w-lg"> <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> </p>
</div> </div>
{/* CTAs */} {/* CTAs */}
<motion.div <motion.div
initial={{ opacity: 0, y: 20 }} initial={{ opacity: 0, y: 20 }}
@@ -63,7 +69,11 @@ const HeroWithCTA = () => {
transition={{ duration: 0.8, delay: 0.3 }} transition={{ duration: 0.8, delay: 0.3 }}
className="flex flex-col sm:flex-row gap-4" 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"> <div className="inline-flex items-center gap-2">
<Calendar className="w-4 h-4 flex-shrink-0" /> <Calendar className="w-4 h-4 flex-shrink-0" />
<span>Discuss Your Project</span> <span>Discuss Your Project</span>
@@ -72,15 +82,15 @@ const HeroWithCTA = () => {
<Button <Button
variant="secondary" variant="secondary"
size="lg" size="lg"
className="text-lg px-8 py-4" className="text-lg px-8 py-4 h-[56px]"
onClick={() => navigateTo('/case-studies')} onClick={() => navigateTo("/case-studies")}
> >
<Eye className="w-4 h-4 flex-shrink-0" /> <Eye className="w-4 h-4 flex-shrink-0" />
<span>View Case Studies</span> <span>View Case Studies</span>
</Button> </Button>
</motion.div> </motion.div>
</motion.div> </motion.div>
{/* Right side with stats */} {/* Right side with stats */}
<motion.div <motion.div
initial={{ opacity: 0, x: 50 }} initial={{ opacity: 0, x: 50 }}
@@ -95,23 +105,39 @@ const HeroWithCTA = () => {
className="grid grid-cols-2 gap-8 text-center" className="grid grid-cols-2 gap-8 text-center"
> >
<div className="space-y-2 flex flex-col items-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-3xl lg:text-4xl font-bold text-white">
<div className="text-sm text-gray-400 leading-tight">Software Systems</div> 150+
</div>
<div className="text-sm text-gray-400 leading-tight">
Software Systems
</div>
</div> </div>
<div className="space-y-2 flex flex-col items-center"> <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-3xl lg:text-4xl font-bold text-white">
<div className="text-sm text-gray-400 leading-tight">Code Quality Score</div> 95%
</div>
<div className="text-sm text-gray-400 leading-tight">
Code Quality Score
</div>
</div> </div>
<div className="space-y-2 flex flex-col items-center"> <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-3xl lg:text-4xl font-bold text-white">
<div className="text-sm text-gray-400 leading-tight">Faster Development</div> 60%
</div>
<div className="text-sm text-gray-400 leading-tight">
Faster Development
</div>
</div> </div>
<div className="space-y-2 flex flex-col items-center"> <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-3xl lg:text-4xl font-bold text-white">
<div className="text-sm text-gray-400 leading-tight">System Reliability</div> 24/7
</div>
<div className="text-sm text-gray-400 leading-tight">
System Reliability
</div>
</div> </div>
</motion.div> </motion.div>
</motion.div> </motion.div>
@@ -124,12 +150,16 @@ const HeroWithCTA = () => {
// Enhanced Horizontal Tag Scroller with Engineering Practices // Enhanced Horizontal Tag Scroller with Engineering Practices
const HorizontalTagScroller = () => { const HorizontalTagScroller = () => {
const practices = [ 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: "DevOps & CI/CD", icon: Zap, color: "text-green-400" },
{ name: "API-First Design", icon: Code, color: "text-purple-400" }, { name: "API-First Design", icon: Code, color: "text-purple-400" },
{ name: "Test-Driven Development", icon: Shield, color: "text-cyan-400" }, { name: "Test-Driven Development", icon: Shield, color: "text-cyan-400" },
{ name: "Agile Methodologies", icon: TrendingUp, color: "text-orange-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 ( return (
@@ -148,10 +178,11 @@ const HorizontalTagScroller = () => {
<span className="text-foreground"> We Follow</span> <span className="text-foreground"> We Follow</span>
</h2> </h2>
<p className="text-2xl text-muted-foreground max-w-4xl mx-auto leading-relaxed"> <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> </p>
</motion.div> </motion.div>
<motion.div <motion.div
initial={{ opacity: 0, y: 40 }} initial={{ opacity: 0, y: 40 }}
whileInView={{ opacity: 1, y: 0 }} 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 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="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"> <div className="flex animate-marquee hover:animate-marquee-paused">
{/* First set */} {/* First set */}
{practices.map((practice, index) => { {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="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="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" /> <IconComponent className="w-6 h-6" />
</div> </div>
<span className="text-xl font-medium text-foreground whitespace-nowrap"> <span className="text-xl font-medium text-foreground whitespace-nowrap">
@@ -188,7 +221,7 @@ const HorizontalTagScroller = () => {
</motion.div> </motion.div>
); );
})} })}
{/* Second and third sets for seamless loop */} {/* Second and third sets for seamless loop */}
{[...practices, ...practices].map((practice, index) => { {[...practices, ...practices].map((practice, index) => {
const IconComponent = practice.icon; const IconComponent = practice.icon;
@@ -197,13 +230,18 @@ const HorizontalTagScroller = () => {
key={`loop-${practice.name}-${index}`} key={`loop-${practice.name}-${index}`}
initial={{ opacity: 0, scale: 0.8 }} initial={{ opacity: 0, scale: 0.8 }}
whileInView={{ opacity: 1, scale: 1 }} 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 }} viewport={{ once: true }}
className="group flex-shrink-0 mx-3" 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="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="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" /> <IconComponent className="w-6 h-6" />
</div> </div>
<span className="text-xl font-medium text-foreground whitespace-nowrap"> <span className="text-xl font-medium text-foreground whitespace-nowrap">
@@ -227,28 +265,28 @@ const SideBySideContentWithIcons = () => {
{ {
id: "architecture", id: "architecture",
title: "Robust Architecture", title: "Robust Architecture",
icon: Building icon: Building,
}, },
{ {
id: "quality", id: "quality",
title: "Code Quality Excellence", title: "Code Quality Excellence",
icon: CheckCircle icon: CheckCircle,
}, },
{ {
id: "scalability", id: "scalability",
title: "Future-Proof Scalability", title: "Future-Proof Scalability",
icon: TrendingUp icon: TrendingUp,
}, },
{ {
id: "integration", id: "integration",
title: "Seamless Integration", title: "Seamless Integration",
icon: Layers icon: Layers,
}, },
{ {
id: "maintenance", id: "maintenance",
title: "Long-Term Maintainability", title: "Long-Term Maintainability",
icon: Settings icon: Settings,
} },
]; ];
return ( return (
@@ -266,7 +304,7 @@ const SideBySideContentWithIcons = () => {
<span className="text-[#E5195E]">WDI</span> <span className="text-[#E5195E]">WDI</span>
<span className="text-white"> for Software Engineering</span> <span className="text-white"> for Software Engineering</span>
</h2> </h2>
<p className="text-2xl text-gray-300 leading-relaxed"> <p className="text-2xl text-gray-300 leading-relaxed">
Engineering excellence that stands the test of time. Engineering excellence that stands the test of time.
</p> </p>
@@ -297,7 +335,7 @@ const SideBySideContentWithIcons = () => {
<div className="mb-6"> <div className="mb-6">
<IconComponent className="w-10 h-10 text-accent mx-auto" /> <IconComponent className="w-10 h-10 text-accent mx-auto" />
</div> </div>
<h3 className="text-lg font-semibold text-white leading-tight"> <h3 className="text-lg font-semibold text-white leading-tight">
{advantage.title} {advantage.title}
</h3> </h3>
@@ -318,39 +356,44 @@ const TabbedServiceDisplay = () => {
{ {
title: "Enterprise Software Solutions", title: "Enterprise Software Solutions",
icon: Building, icon: Building,
description: "Complex enterprise systems with robust architecture and scalability.", description:
link: "/services/enterprise-software-solutions" "Complex enterprise systems with robust architecture and scalability.",
link: "/services/enterprise-software-solutions",
}, },
{ {
title: "System Architecture & DevOps", title: "System Architecture & DevOps",
icon: Layers, icon: Layers,
description: "Modern system design with automated deployment and monitoring.", description:
link: "/services/system-architecture-devops" "Modern system design with automated deployment and monitoring.",
link: "/services/system-architecture-devops",
}, },
{ {
title: "Third-Party Integrations", title: "Third-Party Integrations",
icon: Zap, icon: Zap,
description: "Seamless integration with existing systems and external services.", description:
link: "/services/third-party-integrations" "Seamless integration with existing systems and external services.",
link: "/services/third-party-integrations",
}, },
{ {
title: "Product Modernization", title: "Product Modernization",
icon: RefreshCcw, icon: RefreshCcw,
description: "Upgrade legacy systems with modern technologies and practices.", description:
link: "/services/product-modernization" "Upgrade legacy systems with modern technologies and practices.",
link: "/services/product-modernization",
}, },
{ {
title: "API & Backend Development", title: "API & Backend Development",
icon: Server, icon: Server,
description: "Robust APIs and scalable backend infrastructure solutions.", description: "Robust APIs and scalable backend infrastructure solutions.",
link: "/services/api-backend-development" link: "/services/api-backend-development",
}, },
{ {
title: "Custom Software Development", title: "Custom Software Development",
icon: Code, icon: Code,
description: "Tailored software solutions built to your specific requirements.", description:
link: "/services/custom-web-app-development" "Tailored software solutions built to your specific requirements.",
} link: "/services/custom-web-app-development",
},
]; ];
return ( return (
@@ -367,10 +410,11 @@ const TabbedServiceDisplay = () => {
Software Engineering Services Software Engineering Services
</h2> </h2>
<p className="text-lg text-gray-300 max-w-4xl mx-auto leading-relaxed"> <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> </p>
</motion.div> </motion.div>
<motion.div <motion.div
initial={{ opacity: 0, y: 40 }} initial={{ opacity: 0, y: 40 }}
whileInView={{ opacity: 1, y: 0 }} 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"> <div className="w-12 h-12 bg-accent/20 rounded-lg flex items-center justify-center">
<IconComponent className="w-6 h-6 text-accent" /> <IconComponent className="w-6 h-6 text-accent" />
</div> </div>
<div> <div>
<h3 className="text-xl font-semibold text-white mb-4"> <h3 className="text-xl font-semibold text-white mb-4">
{service.title} {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="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"> <div className="flex items-center gap-2">
<Rocket className="w-4 h-4 text-[#E5195E]" /> <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> </div>
</div> </div>
{/* Main Heading */} {/* Main Heading */}
<h2 className="text-4xl lg:text-5xl font-semibold leading-tight"> <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> <span className="text-[#E5195E]">Engineering Excellence</span>
</h2> </h2>
{/* Subtitle */} {/* Subtitle */}
<p className="text-xl text-muted-foreground leading-relaxed max-w-2xl mx-auto"> <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> </p>
{/* CTA Button */} {/* CTA Button */}
<div className="flex flex-col items-center gap-4"> <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" 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"> <div className="inline-flex items-center gap-3">
<Code className="w-6 h-6 flex-shrink-0" /> <Code className="w-6 h-6 flex-shrink-0" />
<span>Start Your Software Project</span> <span>Start Your Software Project</span>
</div> </div>
</ShimmerButton> </ShimmerButton>
{/* Small benefit text */} {/* Small benefit text */}
<p className="text-sm text-muted-foreground"> <p className="text-sm text-muted-foreground">
Architecture review • Code quality audit • Technical consultation Architecture review • Code quality audit • Technical
consultation
</p> </p>
</div> </div>
</motion.div> </motion.div>
@@ -489,15 +540,15 @@ const HireDevelopersSection = () => {
skills: ["System Design", "Microservices", "Scalability"], skills: ["System Design", "Microservices", "Scalability"],
iconBg: "bg-blue-500", iconBg: "bg-blue-500",
iconColor: "text-white", iconColor: "text-white",
link: "/hire-talent/full-stack-developers" link: "/hire-talent/full-stack-developers",
}, },
{ {
title: "Backend Engineers", title: "Backend Engineers",
icon: Server, icon: Server,
skills: ["Node.js", "Python", "Java", "Go"], skills: ["Node.js", "Python", "Java", "Go"],
iconBg: "bg-green-500", iconBg: "bg-green-500",
iconColor: "text-white", iconColor: "text-white",
link: "/hire-talent/backend-developers" link: "/hire-talent/backend-developers",
}, },
{ {
title: "DevOps Engineers", title: "DevOps Engineers",
@@ -505,7 +556,7 @@ const HireDevelopersSection = () => {
skills: ["CI/CD", "Docker", "Kubernetes", "AWS"], skills: ["CI/CD", "Docker", "Kubernetes", "AWS"],
iconBg: "bg-purple-500", iconBg: "bg-purple-500",
iconColor: "text-white", iconColor: "text-white",
link: "/hire-talent/full-stack-developers" link: "/hire-talent/full-stack-developers",
}, },
{ {
title: "Full Stack Developers", title: "Full Stack Developers",
@@ -513,8 +564,8 @@ const HireDevelopersSection = () => {
skills: ["React", "Node.js", "TypeScript", "APIs"], skills: ["React", "Node.js", "TypeScript", "APIs"],
iconBg: "bg-orange-500", iconBg: "bg-orange-500",
iconColor: "text-white", iconColor: "text-white",
link: "/hire-talent/full-stack-developers" link: "/hire-talent/full-stack-developers",
} },
]; ];
return ( return (
@@ -532,10 +583,11 @@ const HireDevelopersSection = () => {
<span className="text-[#E5195E]">Engineering Experts</span> <span className="text-[#E5195E]">Engineering Experts</span>
</h2> </h2>
<p className="text-2xl text-muted-foreground max-w-4xl mx-auto leading-relaxed"> <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> </p>
</motion.div> </motion.div>
<motion.div <motion.div
initial={{ opacity: 0, y: 40 }} initial={{ opacity: 0, y: 40 }}
whileInView={{ opacity: 1, y: 0 }} whileInView={{ opacity: 1, y: 0 }}
@@ -560,8 +612,12 @@ const HireDevelopersSection = () => {
{/* Header */} {/* Header */}
<div className="p-8 pb-6"> <div className="p-8 pb-6">
<div className="flex items-start gap-4 mb-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`}> <div
<IconComponent className={`w-6 h-6 ${specialist.iconColor}`} /> 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>
<div className="flex-1"> <div className="flex-1">
<div className="text-xs text-muted-foreground mb-2 uppercase tracking-wider"> <div className="text-xs text-muted-foreground mb-2 uppercase tracking-wider">
@@ -569,26 +625,30 @@ const HireDevelopersSection = () => {
</div> </div>
</div> </div>
</div> </div>
<h3 className="text-xl font-semibold text-foreground mb-4 leading-tight"> <h3 className="text-xl font-semibold text-foreground mb-4 leading-tight">
{specialist.title} {specialist.title}
</h3> </h3>
</div> </div>
{/* Skills */} {/* Skills */}
<div className="px-8 pb-6 flex-1"> <div className="px-8 pb-6 flex-1">
<div className="flex flex-wrap gap-2"> <div className="flex flex-wrap gap-2">
{specialist.skills.map((skill) => ( {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} {skill}
</Badge> </Badge>
))} ))}
</div> </div>
</div> </div>
{/* CTA */} {/* CTA */}
<div className="p-8 pt-0 mt-auto space-y-3"> <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" className="w-full py-3 text-sm rounded-xl shadow-lg hover:shadow-xl"
onClick={() => navigateTo(specialist.link)} onClick={() => navigateTo(specialist.link)}
> >
@@ -613,24 +673,29 @@ const HireDevelopersSection = () => {
const softwareEngineeringFAQs = [ const softwareEngineeringFAQs = [
{ {
question: "What software engineering methodologies do you follow?", 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?", 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?", 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?", 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?", 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() { export function SoftwareEngineering() {
@@ -644,7 +709,7 @@ export function SoftwareEngineering() {
<ProcessSection /> <ProcessSection />
<InlineCTA /> <InlineCTA />
<HireDevelopersSection /> <HireDevelopersSection />
<FAQSection <FAQSection
title="Software Engineering Questions" title="Software Engineering Questions"
subtitle="Get answers to common questions about our software engineering services." subtitle="Get answers to common questions about our software engineering services."
faqs={softwareEngineeringFAQs} faqs={softwareEngineeringFAQs}
@@ -652,4 +717,4 @@ export function SoftwareEngineering() {
<Footer /> <Footer />
</div> </div>
); );
} }

20
pages/StartAProject.tsx
View File

@@ -874,7 +874,7 @@ const ProcessStepsSection = () => {
})} })}
</motion.div> </motion.div>
<motion.div {/* <motion.div
initial={{ opacity: 0, y: 30 }} initial={{ opacity: 0, y: 30 }}
whileInView={{ opacity: 1, y: 0 }} whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.4 }} transition={{ duration: 0.8, delay: 0.4 }}
@@ -890,7 +890,7 @@ const ProcessStepsSection = () => {
Tell Us More Tell Us More
<ArrowRight className="w-4 h-4 ml-2" /> <ArrowRight className="w-4 h-4 ml-2" />
</Button> </Button>
</motion.div> </motion.div> */}
</div> </div>
</section> </section>
); );
@@ -999,7 +999,7 @@ const JoinWDISection = () => {
<ArrowRight className="w-4 h-4 ml-2" /> <ArrowRight className="w-4 h-4 ml-2" />
</Button> </Button>
<Button {/* <Button
size="lg" size="lg"
variant="outline" variant="outline"
className="border-gray-600 text-white hover:bg-gray-800 text-lg px-8 py-4" 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" /> <Upload className="w-5 h-5 mr-2" />
Send Your CV Send Your CV
</Button> </Button> */}
</div> </div>
<p className="text-gray-400 text-sm"> <p className="text-gray-400 text-sm">
@@ -1126,28 +1126,28 @@ const ContactInfoSection = () => {
icon: Mail, icon: Mail,
title: "Email Us", title: "Email Us",
description: "Get in touch via email", description: "Get in touch via email",
contact: "hello@webdevelopmentinstitute.com", contact: "ideas@wdipl.com",
action: "mailto:hello@webdevelopmentinstitute.com", action: "mailto:ideas@wdipl.com",
}, },
{ {
icon: Phone, icon: Phone,
title: "Call Us", title: "Call Us",
description: "Speak with our team", description: "Speak with our team",
contact: "+1 (555) 123-4567", contact: "+91 7700900039",
action: "tel:+15551234567", action: "tel:+91 7700900039",
}, },
{ {
icon: MapPin, icon: MapPin,
title: "Visit Us", title: "Visit Us",
description: "Our office locations", description: "Our office locations",
contact: "Multiple Global Locations", contact: "614, 6th floor Palm spring centre, Malad west, Mumbai Maharshatra",
action: () => navigateTo("/company/office-locations"), action: () => navigateTo("/company/office-locations"),
}, },
{ {
icon: Clock, icon: Clock,
title: "Business Hours", title: "Business Hours",
description: "We're available", description: "We're available",
contact: "Mon-Fri 9AM-6PM", contact: "Mon-Fri 11AM-8PM",
action: () => navigateTo("/contact/schedule-a-discovery-call"), 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 { Button } from "../components/ui/button";
import { Card, CardContent } from "../components/ui/card"; import { Card, CardContent } from "../components/ui/card";
import { ShimmerButton } from "../components/ui/shimmer-button"; import { ShimmerButton } from "../components/ui/shimmer-button";
import { navigateTo } from "@/App";
// Wearable & Device App Development Hero Section // Wearable & Device App Development Hero Section
const WearableHeroWithCTA = () => { const WearableHeroWithCTA = () => {
@@ -83,7 +84,10 @@ const WearableHeroWithCTA = () => {
transition={{ duration: 0.8, delay: 0.3 }} transition={{ duration: 0.8, delay: 0.3 }}
className="flex flex-col sm:flex-row gap-4" 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"> <div className="inline-flex items-center gap-2">
<Watch className="w-5 h-5 flex-shrink-0" /> <Watch className="w-5 h-5 flex-shrink-0" />
<span>Discover Wearable Solutions</span> <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" 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" /> <MessageSquare className="w-4 h-4 flex-shrink-0" />
<span>Request a Device App Consultation</span> <span>Request Consultation</span>
</a> </a>
</motion.div> </motion.div>
</motion.div> </motion.div>
@@ -1227,7 +1231,10 @@ const WearableInlineCTA = () => {
ecosystems. ecosystems.
</p> </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"> <div className="inline-flex items-center gap-3">
<Lightbulb className="w-6 h-6 flex-shrink-0" /> <Lightbulb className="w-6 h-6 flex-shrink-0" />
<span>Discuss Your Wearable/IoT Idea</span> <span>Discuss Your Wearable/IoT Idea</span>
@@ -1363,7 +1370,10 @@ const WearableFinalCTA = () => {
viewport={{ once: true }} viewport={{ once: true }}
className="space-y-8" 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"> <div className="inline-flex items-center gap-3">
<Rocket className="w-6 h-6 flex-shrink-0" /> <Rocket className="w-6 h-6 flex-shrink-0" />
<span>Start Your Wearable/IoT Project</span> <span>Start Your Wearable/IoT Project</span>

6
pages/WebCloudServices.tsx
View File

@@ -115,7 +115,8 @@ const HeroWithCTA = () => {
> >
<ShimmerButton <ShimmerButton
className="text-lg px-8 py-4" 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"> <div className="inline-flex items-center gap-2">
<Calendar className="w-4 h-4 flex-shrink-0" /> <Calendar className="w-4 h-4 flex-shrink-0" />
@@ -537,7 +538,8 @@ const InlineCTA = () => {
<div className="flex flex-col items-center gap-4"> <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" 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"> <div className="inline-flex items-center gap-3">
<Cloud className="w-6 h-6 flex-shrink-0" /> <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 }} transition={{ duration: 0.8, delay: 0.3 }}
className="flex flex-col sm:flex-row gap-4" 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"> <div className="inline-flex items-center gap-2">
<svg <svg
className="w-6 h-4 flex-shrink-0" className="w-6 h-4 flex-shrink-0"
@@ -1068,7 +1071,10 @@ export const IOSAppDevelopment = () => {
delight users and drive business success. delight users and drive business success.
</p> </p>
<div className="flex flex-col sm:flex-row gap-6 justify-center"> <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"> <div className="inline-flex items-center gap-2">
<Apple className="w-5 h-5 flex-shrink-0" /> <Apple className="w-5 h-5 flex-shrink-0" />
<span>Start Your iOS Project</span> <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