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

fix all execpt iosapp

Browse Source
This commit is contained in:
priyanshuvish
2025-07-17 19:47:38 +05:30
parent 04dcfa19c3
commit 1e5d7dca57
19 changed files with 1098 additions and 322 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
pages/DesignExperience.tsx
View File

@@ -21,18 +21,19 @@ import {
Github, Slack, Chrome, Zap as ZapIcon, Video, MessageCircle, Brain,
Cog, Settings, Sparkles, Handshake, Award, UserPlus, MousePointer, Smile
} from "lucide-react";
import UIUXDesignAnimation from "@/components/UIUXDesignAnimation";
// Enhanced Hero Section
const HeroWithCTA = () => {
return (
<section className="relative py-20 overflow-hidden bg-black">
<div className="container mx-auto px-6 lg:px-8">
<div className="grid lg:grid-cols-2 gap-16 items-center min-h-[90vh]">
<div className="container mx-auto px-6 lg:px-8 max-w-7xl">
<div className="grid lg:grid-cols-2 gap-8 lg:gap-16 items-center min-h-[90vh]">
<motion.div
initial={{ opacity: 0, x: -50 }}
animate={{ opacity: 1, x: 0 }}
transition={{ duration: 0.8 }}
className="space-y-8"
className="space-y-8 z-10"
>
{/* Design & Experience Label */}
<motion.div
@@ -40,7 +41,10 @@ const HeroWithCTA = () => {
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6 }}
>
<span className="text-white/70 text-sm font-medium">Design & Experience</span>
<div className="inline-flex items-center gap-2 px-4 py-2 bg-gradient-to-r from-[#E5195E]/20 to-purple-500/20 border border-[#E5195E]/30 rounded-full">
<PenTool className="w-4 h-4 text-[#E5195E]" />
<span className="text-white/90 text-sm font-medium">Design & Experience</span>
</div>
</motion.div>
{/* Main Heading */}
@@ -52,68 +56,62 @@ const HeroWithCTA = () => {
</h1>
<p className="text-lg text-gray-300 leading-relaxed max-w-lg">
Create engaging, intuitive user experiences that drive conversion and delight users through research-driven design.
Create engaging, intuitive user experiences that drive conversion and delight users through research-driven design and modern design thinking.
</p>
</div>
{/* BULLET POINTS REMOVED - Content flows directly to CTAs */}
{/* CTAs */}
{/* CTAs - STANDARDIZED BUTTON HEIGHTS WITH IMPROVED SPACING */}
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, x: 0 }}
transition={{ duration: 0.8, delay: 0.3 }}
className="flex flex-col sm:flex-row gap-4"
transition={{ duration: 0.8, delay: 0.2 }}
className="flex flex-col sm:flex-row gap-4 pt-4"
>
<ShimmerButton className="text-lg px-8 py-4" onClick={() => navigateTo('/contact/schedule-a-discovery-call')}>
<ShimmerButton
className="h-14 px-8 text-lg font-medium rounded-lg shadow-lg hover:shadow-xl transition-all duration-300"
onClick={() => navigateTo('/start-a-project')}
>
<div className="inline-flex items-center gap-2">
<Calendar className="w-4 h-4 flex-shrink-0" />
<Calendar className="w-5 h-5 flex-shrink-0" />
<span>Design Consultation</span>
</div>
</ShimmerButton>
<Button
variant="secondary"
size="lg"
className="text-lg px-8 py-4"
className="h-14 px-8 text-lg font-medium rounded-lg bg-white/10 hover:bg-white/20 text-white border-white/20 hover:border-white/30 shadow-lg hover:shadow-xl transition-all duration-300"
onClick={() => navigateTo('/case-studies')}
>
<Eye className="w-4 h-4 flex-shrink-0" />
<Eye className="w-5 h-5 flex-shrink-0" />
<span>View Design Portfolio</span>
</Button>
</motion.div>
</motion.div>
{/* Right side with stats */}
{/* Right side with Custom UI/UX Design Animation - METRICS REMOVED, EXPANDED CONTAINER */}
<motion.div
initial={{ opacity: 0, x: 50 }}
animate={{ opacity: 1, x: 0 }}
transition={{ duration: 0.8, delay: 0.2 }}
className="relative flex flex-col items-center"
className="relative flex items-center justify-center order-first lg:order-last"
>
<motion.div
initial={{ opacity: 0, y: 30 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.6 }}
className="grid grid-cols-2 gap-8 text-center"
>
<div className="space-y-2 flex flex-col items-center">
<div className="text-3xl lg:text-4xl font-bold text-white">300+</div>
<div className="text-sm text-gray-400 leading-tight">Design Projects</div>
{/* Design Animation Container - EXPANDED TO FILL SPACE PREVIOUSLY OCCUPIED BY METRICS */}
<div className="w-full h-[500px] md:h-[600px] lg:h-[700px] max-w-full relative overflow-hidden">
{/* Animated Background Elements */}
<div className="absolute inset-0 overflow-hidden rounded-xl">
<div className="absolute top-1/4 left-1/4 w-32 h-32 bg-gradient-to-r from-[#E5195E]/20 to-purple-500/20 rounded-full blur-3xl animate-pulse"></div>
<div className="absolute top-3/4 right-1/4 w-24 h-24 bg-gradient-to-r from-pink-500/20 to-violet-500/20 rounded-full blur-2xl animate-pulse delay-1000"></div>
<div className="absolute bottom-1/4 left-1/3 w-20 h-20 bg-gradient-to-r from-blue-500/20 to-cyan-500/20 rounded-full blur-2xl animate-pulse delay-2000"></div>
</div>
<div className="space-y-2 flex flex-col items-center">
<div className="text-3xl lg:text-4xl font-bold text-white">85%</div>
<div className="text-sm text-gray-400 leading-tight">Conversion Increase</div>
{/* Custom UI/UX Design Animation - CENTERED AND EXPANDED */}
<div className="absolute inset-0 flex items-center justify-center">
<div className="w-full h-full scale-105 transform-gpu">
<UIUXDesignAnimation />
</div>
</div>
<div className="space-y-2 flex flex-col items-center">
<div className="text-3xl lg:text-4xl font-bold text-white">4.9/5</div>
<div className="text-sm text-gray-400 leading-tight">User Satisfaction</div>
</div>
<div className="space-y-2 flex flex-col items-center">
<div className="text-3xl lg:text-4xl font-bold text-white">70%</div>
<div className="text-sm text-gray-400 leading-tight">Faster User Tasks</div>
</div>
</motion.div>
</div>
</motion.div>
</div>
</div>