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

almost all linking done exept underdevelopment pages or not developed

Browse Source
This commit is contained in:
priyanshuvish
2025-07-22 16:14:11 +05:30
parent 5a3ef848f7
commit 07c8fe0b72
80 changed files with 13140 additions and 5842 deletions
Download Patch File Download Diff File Expand all files Collapse all files

442
pages/UIUXDesign.tsx
View File

@@ -19,20 +19,27 @@ import {
Rocket,
Search,
Shield,
Smartphone, Tablet,
Smartphone,
Tablet,
Target,
TestTube,
TrendingUp,
Users
Users,
} from "lucide-react";
import FeaturedCaseStudies from "../components/FeaturedCaseStudies";
import { Footer } from "../components/Footer";
import { Navigation } from "../components/Navigation";
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "../components/ui/accordion";
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from "../components/ui/accordion";
import { Badge } from "../components/ui/badge";
import { Button } from "../components/ui/button";
import { Card, CardContent } from "../components/ui/card";
import { ShimmerButton } from "../components/ui/shimmer-button";
import { navigateTo } from "@/App";
// UI/UX Design Hero Section
const UIUXHeroWithCTA = () => {
@@ -52,7 +59,9 @@ const UIUXHeroWithCTA = () => {
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6 }}
>
<span className="text-white/70 text-sm font-medium">Design & Experience</span>
<span className="text-white/70 text-sm font-medium">
Design & Experience
</span>
</motion.div>
{/* Main Heading */}
@@ -60,12 +69,13 @@ const UIUXHeroWithCTA = () => {
<h1 className="text-4xl md:text-5xl lg:text-6xl font-semibold text-white leading-tight">
Intuitive UI/UX Design Services
</h1>
<p className="text-lg text-gray-300 leading-relaxed max-w-lg">
Crafting visually stunning and highly intuitive user interfaces and experiences that engage users and drive business objectives.
Crafting visually stunning and highly intuitive user interfaces
and experiences that engage users and drive business objectives.
</p>
</div>
{/* CTAs */}
<motion.div
initial={{ opacity: 0, y: 20 }}
@@ -73,7 +83,10 @@ const UIUXHeroWithCTA = () => {
transition={{ duration: 0.8, delay: 0.3 }}
className="flex flex-col sm:flex-row gap-4"
>
<ShimmerButton className="text-lg px-8 py-4">
<ShimmerButton
className="text-lg px-8 py-4"
onClick={() => navigateTo("/start-a-project")}
>
<div className="inline-flex items-center gap-2">
<Palette className="w-5 h-5 flex-shrink-0" />
<span>Design Your Next Product</span>
@@ -88,7 +101,7 @@ const UIUXHeroWithCTA = () => {
</a>
</motion.div>
</motion.div>
{/* Right side with Design Transformation visualization */}
<motion.div
initial={{ opacity: 0, x: 50 }}
@@ -114,17 +127,20 @@ const UIUXHeroWithCTA = () => {
className="space-y-4"
>
<div className="text-center mb-2">
<Badge variant="secondary" className="bg-blue-500/20 text-blue-300 border-blue-500/30 text-xs">
<Badge
variant="secondary"
className="bg-blue-500/20 text-blue-300 border-blue-500/30 text-xs"
>
MOBILE
</Badge>
</div>
{/* Mobile Interface */}
<div className="bg-gradient-to-br from-accent/20 to-blue-500/20 rounded-xl border border-accent/30 p-3 space-y-2 shadow-lg relative">
<div className="w-full h-2 bg-gray-800 rounded-full flex items-center justify-center">
<div className="w-6 h-1 bg-gray-600 rounded-full"></div>
</div>
{/* App Interface */}
<div className="space-y-2">
<div className="h-8 bg-gradient-to-r from-accent to-purple-500 rounded-lg flex items-center px-2">
@@ -140,13 +156,13 @@ const UIUXHeroWithCTA = () => {
<div className="h-6 bg-gradient-to-r from-orange-400 to-red-400 rounded"></div>
</div>
</div>
<div className="flex items-center justify-center">
<Smartphone className="w-3 h-3 text-accent/60" />
</div>
</div>
</motion.div>
{/* Tablet Design */}
<motion.div
initial={{ opacity: 0, y: 20 }}
@@ -155,16 +171,19 @@ const UIUXHeroWithCTA = () => {
className="space-y-4"
>
<div className="text-center mb-2">
<Badge variant="secondary" className="bg-green-500/20 text-green-300 border-green-500/30 text-xs">
<Badge
variant="secondary"
className="bg-green-500/20 text-green-300 border-green-500/30 text-xs"
>
TABLET
</Badge>
</div>
{/* Tablet Interface */}
<div className="bg-gradient-to-br from-green-500/20 to-blue-500/20 rounded-xl border border-green-500/30 p-4 space-y-3 shadow-lg">
{/* Header */}
<div className="h-4 bg-gradient-to-r from-green-400 to-blue-400 rounded-lg"></div>
{/* Content Grid */}
<div className="grid grid-cols-2 gap-2">
<div className="space-y-1">
@@ -174,20 +193,20 @@ const UIUXHeroWithCTA = () => {
</div>
<div className="h-12 bg-gradient-to-br from-purple-400/20 to-pink-400/20 rounded border border-purple-400/30"></div>
</div>
{/* Navigation */}
<div className="flex gap-1">
<div className="flex-1 h-2 bg-gradient-to-r from-accent to-purple-500 rounded"></div>
<div className="w-6 h-2 bg-gray-400/30 rounded"></div>
<div className="w-6 h-2 bg-gray-400/30 rounded"></div>
</div>
<div className="flex items-center justify-center">
<Tablet className="w-3 h-3 text-green-400/60" />
</div>
</div>
</motion.div>
{/* Desktop Design */}
<motion.div
initial={{ opacity: 0, y: 20 }}
@@ -196,11 +215,14 @@ const UIUXHeroWithCTA = () => {
className="space-y-4"
>
<div className="text-center mb-2">
<Badge variant="secondary" className="bg-purple-500/20 text-purple-300 border-purple-500/30 text-xs">
<Badge
variant="secondary"
className="bg-purple-500/20 text-purple-300 border-purple-500/30 text-xs"
>
DESKTOP
</Badge>
</div>
{/* Desktop Interface */}
<div className="bg-gradient-to-br from-purple-500/20 to-pink-500/20 rounded-xl border border-purple-500/30 p-4 space-y-3 shadow-lg">
{/* Browser Bar */}
@@ -210,10 +232,10 @@ const UIUXHeroWithCTA = () => {
<div className="w-1.5 h-1.5 bg-green-400 rounded-full"></div>
<div className="flex-1 h-1 bg-gray-400/30 rounded ml-2"></div>
</div>
{/* Header */}
<div className="h-4 bg-gradient-to-r from-purple-400 to-pink-400 rounded"></div>
{/* Content Layout */}
<div className="flex gap-2">
<div className="w-1/3 space-y-1">
@@ -223,14 +245,14 @@ const UIUXHeroWithCTA = () => {
</div>
<div className="flex-1 h-8 bg-gradient-to-br from-accent/20 to-blue-500/20 rounded border border-accent/30"></div>
</div>
<div className="flex items-center justify-center">
<Monitor className="w-3 h-3 text-purple-400/60" />
</div>
</div>
</motion.div>
</div>
{/* Wireframe to Design Transformation */}
<motion.div
initial={{ opacity: 0, scale: 0.8 }}
@@ -238,8 +260,10 @@ const UIUXHeroWithCTA = () => {
transition={{ duration: 0.8, delay: 1.2 }}
className="relative bg-card/20 backdrop-blur-md rounded-2xl border border-white/10 p-6 mb-8"
>
<h3 className="text-white text-center mb-4 font-medium">Design Process Transformation</h3>
<h3 className="text-white text-center mb-4 font-medium">
Design Process Transformation
</h3>
<div className="grid grid-cols-3 gap-4 items-center">
{/* Wireframe */}
<div className="text-center space-y-2">
@@ -254,12 +278,12 @@ const UIUXHeroWithCTA = () => {
</div>
<span className="text-xs text-gray-400">Wireframes</span>
</div>
{/* Arrow */}
<div className="flex justify-center">
<ArrowRight className="w-6 h-6 text-accent" />
</div>
{/* Final Design */}
<div className="text-center space-y-2">
<div className="bg-gradient-to-br from-accent/20 to-blue-500/20 rounded-lg p-3 space-y-2 border border-accent/30">
@@ -271,11 +295,13 @@ const UIUXHeroWithCTA = () => {
<div className="h-1 bg-gradient-to-r from-green-400 to-blue-400 rounded w-3/4"></div>
<div className="h-1 bg-gradient-to-r from-orange-400 to-red-400 rounded w-1/2"></div>
</div>
<span className="text-xs text-gray-300">Final Design</span>
<span className="text-xs text-gray-300">
Final Design
</span>
</div>
</div>
</motion.div>
{/* Design Tools Icons */}
<div className="grid grid-cols-4 gap-4">
<motion.div
@@ -289,7 +315,7 @@ const UIUXHeroWithCTA = () => {
</div>
<span className="text-xs text-gray-300">Figma</span>
</motion.div>
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
@@ -301,7 +327,7 @@ const UIUXHeroWithCTA = () => {
</div>
<span className="text-xs text-gray-300">Sketch</span>
</motion.div>
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
@@ -313,7 +339,7 @@ const UIUXHeroWithCTA = () => {
</div>
<span className="text-xs text-gray-300">Adobe XD</span>
</motion.div>
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
@@ -327,7 +353,7 @@ const UIUXHeroWithCTA = () => {
</motion.div>
</div>
</motion.div>
{/* Feature Badges */}
<motion.div
initial={{ opacity: 0, y: 30 }}
@@ -335,15 +361,24 @@ const UIUXHeroWithCTA = () => {
transition={{ duration: 0.8, delay: 1.8 }}
className="flex justify-center gap-4 flex-wrap mt-8"
>
<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"
>
<Eye className="w-3 h-3 mr-1" />
User-Focused
</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"
>
<Palette className="w-3 h-3 mr-1" />
Beautiful
</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"
>
<Smartphone className="w-3 h-3 mr-1" />
Responsive
</Badge>
@@ -362,33 +397,33 @@ const UIUXBenefits = () => {
{
icon: Users,
title: "Increased User Engagement",
description: "Delightful experiences keep users coming back."
description: "Delightful experiences keep users coming back.",
},
{
icon: TrendingUp,
title: "Higher Conversion Rates",
description: "Intuitive flows guide users to desired actions."
description: "Intuitive flows guide users to desired actions.",
},
{
icon: DollarSign,
title: "Reduced Development Costs",
description: "Clear designs minimize reworks and errors."
description: "Clear designs minimize reworks and errors.",
},
{
icon: Shield,
title: "Stronger Brand Identity",
description: "Consistent, professional design builds trust."
description: "Consistent, professional design builds trust.",
},
{
icon: Heart,
title: "Improved User Satisfaction",
description: "Seamless interactions lead to positive sentiment."
description: "Seamless interactions lead to positive sentiment.",
},
{
icon: Target,
title: "Competitive Advantage",
description: "Superior design differentiates your product."
}
description: "Superior design differentiates your product.",
},
];
return (
@@ -405,7 +440,7 @@ const UIUXBenefits = () => {
Why User-Centric Design Matters
</h2>
</motion.div>
<motion.div
initial={{ opacity: 0, y: 40 }}
whileInView={{ opacity: 1, y: 0 }}
@@ -452,29 +487,34 @@ const UIUXDesignProcess = () => {
const steps = [
{
title: "User Research & Discovery",
description: "Deep dive into user behaviors, needs, pain points, and goals through interviews, surveys, analytics, and competitive analysis to inform design decisions.",
icon: Search
description:
"Deep dive into user behaviors, needs, pain points, and goals through interviews, surveys, analytics, and competitive analysis to inform design decisions.",
icon: Search,
},
{
title: "Information Architecture & Wireframing",
description: "Structuring content hierarchy, user flows, and navigation patterns with low-fidelity wireframes to establish the foundation of user experience.",
icon: Grid
description:
"Structuring content hierarchy, user flows, and navigation patterns with low-fidelity wireframes to establish the foundation of user experience.",
icon: Grid,
},
{
title: "UI Design & Prototyping",
description: "Creating high-fidelity visual designs with interactive prototypes that bring the user interface to life for testing and stakeholder feedback.",
icon: Palette
description:
"Creating high-fidelity visual designs with interactive prototypes that bring the user interface to life for testing and stakeholder feedback.",
icon: Palette,
},
{
title: "Usability Testing & Iteration",
description: "Validating design solutions with real users through testing sessions, gathering feedback, and iterating on designs to optimize user experience.",
icon: TestTube
description:
"Validating design solutions with real users through testing sessions, gathering feedback, and iterating on designs to optimize user experience.",
icon: TestTube,
},
{
title: "Handoff & Design System Creation",
description: "Delivering production-ready designs with comprehensive design systems, style guides, and developer documentation for seamless implementation.",
icon: FileText
}
description:
"Delivering production-ready designs with comprehensive design systems, style guides, and developer documentation for seamless implementation.",
icon: FileText,
},
];
return (
@@ -495,12 +535,12 @@ const UIUXDesignProcess = () => {
<div className="relative">
{/* Timeline line */}
<div className="absolute left-1/2 transform -translate-x-1/2 h-full w-0.5 bg-gradient-to-b from-accent via-accent/50 to-transparent hidden lg:block"></div>
<div className="space-y-16">
{steps.map((step, index) => {
const IconComponent = step.icon;
const isEven = index % 2 === 0;
return (
<motion.div
key={index}
@@ -508,15 +548,23 @@ const UIUXDesignProcess = () => {
whileInView={{ opacity: 1, x: 0 }}
transition={{ duration: 0.8, delay: index * 0.2 }}
viewport={{ once: true }}
className={`flex items-center ${isEven ? 'lg:flex-row' : 'lg:flex-row-reverse'} flex-col lg:gap-16 gap-8`}
className={`flex items-center ${
isEven ? "lg:flex-row" : "lg:flex-row-reverse"
} flex-col lg:gap-16 gap-8`}
>
<div className={`flex-1 ${isEven ? 'lg:text-right' : 'lg:text-left'} text-center lg:text-left`}>
<div
className={`flex-1 ${
isEven ? "lg:text-right" : "lg:text-left"
} text-center lg:text-left`}
>
<div className="bg-card/20 backdrop-blur-md rounded-2xl border border-white/10 p-8 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl">
<div className="flex items-center gap-4 mb-4 justify-center lg:justify-start">
<div className="w-12 h-12 bg-accent/20 rounded-xl flex items-center justify-center">
<IconComponent className="w-6 h-6 text-accent" />
</div>
<div className="text-2xl font-bold text-accent">0{index + 1}</div>
<div className="text-2xl font-bold text-accent">
0{index + 1}
</div>
</div>
<h3 className="text-2xl font-semibold text-foreground mb-4">
{step.title}
@@ -526,10 +574,10 @@ const UIUXDesignProcess = () => {
</p>
</div>
</div>
{/* Timeline dot */}
<div className="w-4 h-4 bg-accent rounded-full border-4 border-background z-10 hidden lg:block"></div>
<div className="flex-1 hidden lg:block"></div>
</motion.div>
);
@@ -548,50 +596,86 @@ const UIUXDesignServices = () => {
title: "User Research & Analysis",
description: "Understanding user needs and behaviors.",
icon: Search,
features: ["User Interviews", "Surveys & Analytics", "Persona Development", "Journey Mapping"]
features: [
"User Interviews",
"Surveys & Analytics",
"Persona Development",
"Journey Mapping",
],
},
{
title: "Wireframing & Information Architecture",
description: "Structuring content and user flows.",
icon: Grid,
features: ["User Flow Diagrams", "Site Maps", "Low-fi Wireframes", "Content Strategy"]
features: [
"User Flow Diagrams",
"Site Maps",
"Low-fi Wireframes",
"Content Strategy",
],
},
{
title: "Interactive Prototyping",
description: "Bringing designs to life for testing and feedback.",
icon: MousePointer2,
features: ["Clickable Prototypes", "Micro-interactions", "Animation Design", "User Testing"]
features: [
"Clickable Prototypes",
"Micro-interactions",
"Animation Design",
"User Testing",
],
},
{
title: "User Interface (UI) Design",
description: "Crafting visual elements, typography, and color palettes.",
icon: Palette,
features: ["Visual Design", "Typography", "Color Systems", "Iconography"]
features: ["Visual Design", "Typography", "Color Systems", "Iconography"],
},
{
title: "User Experience (UX) Strategy",
description: "Defining the overall user journey and interactions.",
icon: Target,
features: ["Experience Strategy", "Interaction Design", "Usability Optimization", "Conversion Design"]
features: [
"Experience Strategy",
"Interaction Design",
"Usability Optimization",
"Conversion Design",
],
},
{
title: "Design System Development",
description: "Creating reusable components for consistency and efficiency.",
description:
"Creating reusable components for consistency and efficiency.",
icon: Component,
features: ["Component Libraries", "Style Guides", "Design Tokens", "Documentation"]
features: [
"Component Libraries",
"Style Guides",
"Design Tokens",
"Documentation",
],
},
{
title: "Usability Testing & Optimization",
description: "Validating designs with real users and iterating.",
icon: TestTube,
features: ["User Testing", "A/B Testing", "Heuristic Evaluation", "Performance Analysis"]
features: [
"User Testing",
"A/B Testing",
"Heuristic Evaluation",
"Performance Analysis",
],
},
{
title: "Mobile-First & Responsive Design",
description: "Ensuring optimal experiences across all devices.",
icon: Smartphone,
features: ["Mobile Design", "Responsive Layouts", "Cross-platform", "Device Optimization"]
}
features: [
"Mobile Design",
"Responsive Layouts",
"Cross-platform",
"Device Optimization",
],
},
];
return (
@@ -608,7 +692,7 @@ const UIUXDesignServices = () => {
Our Comprehensive UI/UX Design Capabilities
</h2>
</motion.div>
<motion.div
initial={{ opacity: 0, y: 40 }}
whileInView={{ opacity: 1, y: 0 }}
@@ -640,10 +724,16 @@ const UIUXDesignServices = () => {
{service.description}
</p>
<div className="space-y-2">
<h4 className="text-sm font-medium text-white">Key Features:</h4>
<h4 className="text-sm font-medium text-white">
Key Features:
</h4>
<div className="flex flex-wrap gap-2">
{service.features.map((feature) => (
<Badge key={feature} variant="secondary" className="text-xs bg-gray-800/50 text-gray-300 border-gray-700">
<Badge
key={feature}
variant="secondary"
className="text-xs bg-gray-800/50 text-gray-300 border-gray-700"
>
{feature}
</Badge>
))}
@@ -688,10 +778,16 @@ const UIUXDesignServices = () => {
{service.description}
</p>
<div className="space-y-2">
<h4 className="text-sm font-medium text-white">Key Features:</h4>
<h4 className="text-sm font-medium text-white">
Key Features:
</h4>
<div className="flex flex-wrap gap-2">
{service.features.map((feature) => (
<Badge key={feature} variant="secondary" className="text-xs bg-gray-800/50 text-gray-300 border-gray-700">
<Badge
key={feature}
variant="secondary"
className="text-xs bg-gray-800/50 text-gray-300 border-gray-700"
>
{feature}
</Badge>
))}
@@ -713,17 +809,26 @@ const DesignToolsMethodologies = () => {
const designTools = [
{ name: "Figma", icon: Figma, category: "Design Tool", color: "orange" },
{ name: "Sketch", icon: PenTool, category: "Design Tool", color: "blue" },
{ name: "Adobe XD", icon: Palette, category: "Design Tool", color: "purple" },
{
name: "Adobe XD",
icon: Palette,
category: "Design Tool",
color: "purple",
},
{ name: "Miro", icon: Grid, category: "Collaboration", color: "yellow" },
{ name: "Maze", icon: Target, category: "User Testing", color: "green" },
{ name: "Hotjar", icon: Eye, category: "Analytics", color: "red" }
{ name: "Hotjar", icon: Eye, category: "Analytics", color: "red" },
];
const methodologies = [
{ name: "Design Thinking", icon: Lightbulb, category: "Methodology" },
{ name: "Atomic Design", icon: Component, category: "System Design" },
{ name: "Material Design", icon: Layers, category: "Design System" },
{ name: "Human Interface Guidelines", icon: Apple, category: "Design System" }
{
name: "Human Interface Guidelines",
icon: Apple,
category: "Design System",
},
];
return (
@@ -740,7 +845,8 @@ const DesignToolsMethodologies = () => {
Design Tools & Methodologies
</h2>
<p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
Leveraging industry-standard tools and methodologies for impactful design.
Leveraging industry-standard tools and methodologies for impactful
design.
</p>
</motion.div>
@@ -752,7 +858,9 @@ const DesignToolsMethodologies = () => {
viewport={{ once: true }}
className="mb-16"
>
<h3 className="text-2xl font-semibold text-foreground mb-8 text-center">Design Tools</h3>
<h3 className="text-2xl font-semibold text-foreground mb-8 text-center">
Design Tools
</h3>
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6">
{designTools.map((tool, index) => {
const IconComponent = tool.icon;
@@ -762,9 +870,9 @@ const DesignToolsMethodologies = () => {
purple: "bg-purple-500/20 text-purple-400 border-purple-500/30",
yellow: "bg-yellow-500/20 text-yellow-400 border-yellow-500/30",
green: "bg-green-500/20 text-green-400 border-green-500/30",
red: "bg-red-500/20 text-red-400 border-red-500/30"
red: "bg-red-500/20 text-red-400 border-red-500/30",
};
return (
<motion.div
key={index}
@@ -776,11 +884,20 @@ const DesignToolsMethodologies = () => {
className="group"
>
<Card className="bg-card/20 backdrop-blur-md border-white/10 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl p-6 text-center">
<div className={`w-12 h-12 rounded-lg flex items-center justify-center mx-auto mb-4 ${colorClasses[tool.color as keyof typeof colorClasses] || 'bg-accent/20 text-accent border-accent/30'}`}>
<div
className={`w-12 h-12 rounded-lg flex items-center justify-center mx-auto mb-4 ${
colorClasses[tool.color as keyof typeof colorClasses] ||
"bg-accent/20 text-accent border-accent/30"
}`}
>
<IconComponent className="w-6 h-6" />
</div>
<h4 className="font-semibold text-foreground text-sm mb-1">{tool.name}</h4>
<p className="text-xs text-muted-foreground">{tool.category}</p>
<h4 className="font-semibold text-foreground text-sm mb-1">
{tool.name}
</h4>
<p className="text-xs text-muted-foreground">
{tool.category}
</p>
</Card>
</motion.div>
);
@@ -795,7 +912,9 @@ const DesignToolsMethodologies = () => {
transition={{ duration: 0.8, delay: 0.4 }}
viewport={{ once: true }}
>
<h3 className="text-2xl font-semibold text-foreground mb-8 text-center">Design Methodologies</h3>
<h3 className="text-2xl font-semibold text-foreground mb-8 text-center">
Design Methodologies
</h3>
<div className="grid grid-cols-2 md:grid-cols-4 gap-6 max-w-4xl mx-auto">
{methodologies.map((methodology, index) => {
const IconComponent = methodology.icon;
@@ -813,8 +932,12 @@ const DesignToolsMethodologies = () => {
<div className="w-12 h-12 bg-accent/20 rounded-lg flex items-center justify-center mx-auto mb-4">
<IconComponent className="w-6 h-6 text-accent" />
</div>
<h4 className="font-semibold text-foreground text-sm mb-1">{methodology.name}</h4>
<p className="text-xs text-muted-foreground">{methodology.category}</p>
<h4 className="font-semibold text-foreground text-sm mb-1">
{methodology.name}
</h4>
<p className="text-xs text-muted-foreground">
{methodology.category}
</p>
</Card>
</motion.div>
);
@@ -848,20 +971,26 @@ const UIUXInlineCTA = () => {
<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">
<Palette className="w-5 h-5 text-foreground" />
<span className="text-foreground text-base font-medium">UI/UX Design</span>
<span className="text-foreground text-base font-medium">
UI/UX Design
</span>
</div>
</div>
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground leading-tight">
Ready to Elevate Your{" "}
<span className="text-accent">Product's User Experience?</span>
</h2>
<p className="text-xl text-muted-foreground leading-relaxed max-w-2xl mx-auto">
Let our design experts create an interface that truly connects with your audience.
Let our design experts create an interface that truly connects
with your audience.
</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">
<MessageCircle className="w-6 h-6 flex-shrink-0" />
<span>Get a Free Design Consultation</span>
@@ -881,38 +1010,58 @@ const HireUIUXDesigners = () => {
title: "Senior UI/UX Designers",
description: "Experienced designers with full-stack design capabilities",
icon: Palette,
skills: ["User Research", "Visual Design", "Prototyping", "Usability Testing"]
skills: [
"User Research",
"Visual Design",
"Prototyping",
"Usability Testing",
],
},
{
title: "UX Researchers",
description: "Specialists in user behavior and research methodologies",
icon: Search,
skills: ["User Interviews", "Usability Testing", "Data Analysis", "Persona Development"]
skills: [
"User Interviews",
"Usability Testing",
"Data Analysis",
"Persona Development",
],
},
{
title: "Visual/UI Designers",
description: "Experts in creating beautiful and functional interfaces",
icon: PenTool,
skills: ["Visual Design", "Typography", "Color Theory", "Design Systems"]
skills: ["Visual Design", "Typography", "Color Theory", "Design Systems"],
},
{
title: "Interaction Designers",
description: "Specialists in crafting engaging user interactions",
icon: MousePointer2,
skills: ["Micro-interactions", "Animation", "Prototyping", "User Flows"]
skills: ["Micro-interactions", "Animation", "Prototyping", "User Flows"],
},
{
title: "Product Designers",
description: "Strategic designers who understand business goals",
icon: Target,
skills: ["Product Strategy", "Design Thinking", "Cross-functional Collaboration", "MVP Design"]
skills: [
"Product Strategy",
"Design Thinking",
"Cross-functional Collaboration",
"MVP Design",
],
},
{
title: "Design System Specialists",
description: "Experts in creating scalable design systems",
icon: Component,
skills: ["Component Libraries", "Design Tokens", "Documentation", "Style Guides"]
}
skills: [
"Component Libraries",
"Design Tokens",
"Documentation",
"Style Guides",
],
},
];
return (
@@ -929,10 +1078,11 @@ const HireUIUXDesigners = () => {
Hire World-Class UI/UX Designers
</h2>
<p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
Access our pool of talented designers specializing in intuitive interfaces, user research, and strategic UX.
Access our pool of talented designers specializing in intuitive
interfaces, user research, and strategic UX.
</p>
</motion.div>
<motion.div
initial={{ opacity: 0, y: 40 }}
whileInView={{ opacity: 1, y: 0 }}
@@ -964,10 +1114,16 @@ const HireUIUXDesigners = () => {
{type.description}
</p>
<div className="space-y-2">
<h4 className="text-sm font-medium text-white">Core Skills:</h4>
<h4 className="text-sm font-medium text-white">
Core Skills:
</h4>
<div className="flex flex-wrap gap-2">
{type.skills.map((skill) => (
<Badge key={skill} variant="secondary" className="text-xs bg-gray-800/50 text-gray-300 border-gray-700">
<Badge
key={skill}
variant="secondary"
className="text-xs bg-gray-800/50 text-gray-300 border-gray-700"
>
{skill}
</Badge>
))}
@@ -997,7 +1153,7 @@ const HireUIUXDesigners = () => {
<Button
variant="outline"
size="lg"
className="text-lg px-8 py-4 border-gray-600 text-gray-300 hover:bg-gray-800 hover:text-white"
className="text-lg px-8 py-4 h-auto border-gray-600 text-gray-300 hover:bg-gray-800 hover:text-white"
>
<div className="inline-flex items-center gap-2">
<Eye className="w-5 h-5 flex-shrink-0" />
@@ -1016,20 +1172,24 @@ const UIUXFAQs = () => {
const faqs = [
{
question: "What is the difference between UI and UX?",
answer: "UI (User Interface) focuses on the visual elements users interact with - buttons, menus, typography, colors, and layout. UX (User Experience) encompasses the entire user journey, including research, strategy, information architecture, usability, and how users feel when interacting with your product. UI is about how it looks, UX is about how it works and feels. Both are essential for creating successful digital products."
answer:
"UI (User Interface) focuses on the visual elements users interact with - buttons, menus, typography, colors, and layout. UX (User Experience) encompasses the entire user journey, including research, strategy, information architecture, usability, and how users feel when interacting with your product. UI is about how it looks, UX is about how it works and feels. Both are essential for creating successful digital products.",
},
{
question: "How important is user research in the design process?",
answer: "User research is fundamental to successful design. It helps us understand your target audience's needs, behaviors, pain points, and goals before we start designing. This research-driven approach reduces the risk of creating interfaces that don't resonate with users, saves development time and costs, and ensures higher user satisfaction and conversion rates. We conduct user interviews, surveys, usability testing, and competitive analysis to inform our design decisions."
answer:
"User research is fundamental to successful design. It helps us understand your target audience's needs, behaviors, pain points, and goals before we start designing. This research-driven approach reduces the risk of creating interfaces that don't resonate with users, saves development time and costs, and ensures higher user satisfaction and conversion rates. We conduct user interviews, surveys, usability testing, and competitive analysis to inform our design decisions.",
},
{
question: "Do you provide design systems for future development?",
answer: "Yes, we create comprehensive design systems that include component libraries, style guides, design tokens, and detailed documentation. These systems ensure consistency across your product, speed up future development, maintain brand integrity, and make it easier for your team to scale and maintain the design. We provide assets in formats that work seamlessly with development workflows, including design handoff tools and code snippets."
answer:
"Yes, we create comprehensive design systems that include component libraries, style guides, design tokens, and detailed documentation. These systems ensure consistency across your product, speed up future development, maintain brand integrity, and make it easier for your team to scale and maintain the design. We provide assets in formats that work seamlessly with development workflows, including design handoff tools and code snippets.",
},
{
question: "Can you redesign an existing product's UI/UX?",
answer: "Absolutely. We specialize in redesigning existing products to improve user experience, modernize visual design, increase conversions, and align with current best practices. Our process includes auditing your current design, analyzing user feedback and analytics, identifying pain points and opportunities, and creating a redesign strategy that improves user satisfaction while maintaining familiar elements that users already know and trust."
}
answer:
"Absolutely. We specialize in redesigning existing products to improve user experience, modernize visual design, increase conversions, and align with current best practices. Our process includes auditing your current design, analyzing user feedback and analytics, identifying pain points and opportunities, and creating a redesign strategy that improves user satisfaction while maintaining familiar elements that users already know and trust.",
},
];
return (
@@ -1046,7 +1206,7 @@ const UIUXFAQs = () => {
Frequently Asked Questions
</h2>
</motion.div>
<motion.div
initial={{ opacity: 0, y: 40 }}
whileInView={{ opacity: 1, y: 0 }}
@@ -1056,13 +1216,15 @@ const UIUXFAQs = () => {
>
<Accordion type="single" collapsible className="space-y-8">
{faqs.map((faq, index) => (
<AccordionItem
key={index}
value={`item-${index}`}
<AccordionItem
key={index}
value={`item-${index}`}
className="bg-gray-900/50 backdrop-blur-md rounded-2xl border border-gray-800 px-10 shadow-lg"
>
<AccordionTrigger className="text-left hover:no-underline py-10 text-xl">
<span className="font-semibold text-white">{faq.question}</span>
<span className="font-semibold text-white">
{faq.question}
</span>
</AccordionTrigger>
<AccordionContent className="text-gray-300 pb-10 text-lg leading-relaxed">
{faq.answer}
@@ -1098,7 +1260,9 @@ const UIUXFinalCTA = () => {
<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">
<Palette className="w-5 h-5 text-foreground" />
<span className="text-foreground text-base font-medium">UI/UX Design</span>
<span className="text-foreground text-base font-medium">
UI/UX Design
</span>
</div>
</div>
</motion.div>
@@ -1107,7 +1271,7 @@ const UIUXFinalCTA = () => {
Design Digital Products That{" "}
<span className="text-accent">Users Love</span>
</h2>
<motion.p
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
@@ -1115,7 +1279,8 @@ const UIUXFinalCTA = () => {
viewport={{ once: true }}
className="text-xl text-muted-foreground mb-12 max-w-2xl mx-auto leading-relaxed"
>
Partner with WDI for compelling UI/UX design that captures attention and drives meaningful interactions.
Partner with WDI for compelling UI/UX design that captures attention
and drives meaningful interactions.
</motion.p>
<motion.div
@@ -1125,7 +1290,10 @@ const UIUXFinalCTA = () => {
viewport={{ once: true }}
className="space-y-8"
>
<ShimmerButton className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25">
<ShimmerButton
className="px-12 py-6 text-xl rounded-2xl shadow-2xl hover:shadow-accent/25"
onClick={() => navigateTo("/start-a-project")}
>
<div className="inline-flex items-center gap-3">
<Rocket className="w-6 h-6 flex-shrink-0" />
<span>Start Your Design Project</span>
@@ -1154,61 +1322,61 @@ export const UIUXDesign = () => {
return (
<div className="dark min-h-screen">
<Navigation />
{/* Hero Section */}
<section className="bg-black">
<UIUXHeroWithCTA />
</section>
{/* Benefits */}
<section className="bg-background">
<UIUXBenefits />
</section>
{/* Design Process */}
<section className="bg-card">
<UIUXDesignProcess />
</section>
{/* Services */}
<section className="bg-background">
<UIUXDesignServices />
</section>
{/* Tools & Methodologies */}
<section className="bg-card">
<DesignToolsMethodologies />
</section>
{/* Featured Case Studies - NEW SECTION */}
<section id="case-studies" className="bg-background">
<FeaturedCaseStudies />
</section>
{/* Mid-Page CTA */}
<section className="bg-card">
<UIUXInlineCTA />
</section>
{/* Hire Designers */}
<section className="bg-background">
<HireUIUXDesigners />
</section>
{/* FAQs */}
<section className="bg-card">
<UIUXFAQs />
</section>
{/* Final CTA */}
<section className="bg-background">
<UIUXFinalCTA />
</section>
{/* Footer */}
<section className="bg-card">
<Footer />
</section>
</div>
);
};
};