hiring pages added and contact no. updated at gloabal offices
This commit is contained in:
priyanshuvish
@@ -1,29 +1,40 @@
|
||||
import React from "react";
|
||||
import { motion } from "framer-motion";
|
||||
import { ImageWithFallback } from "./figma/ImageWithFallback";
|
||||
// import successMetricsImage from 'figma:asset/619c58bb9b76889672d43420adc0dd6ef9ef21f6.png';
|
||||
|
||||
const successMetricsImage =
|
||||
"https://images.unsplash.com/photo-1559757148-5c350d0d3c56?w=400&h=300&fit=crop&auto=format";
|
||||
|
||||
const AppSuccessMetrics = () => {
|
||||
const metrics = [
|
||||
{
|
||||
value: "75+",
|
||||
label: "App Developed",
|
||||
description: "Successful mobile applications delivered",
|
||||
},
|
||||
{
|
||||
value: "25+",
|
||||
label: "App Deployed",
|
||||
description: "Live applications in production",
|
||||
},
|
||||
{
|
||||
value: "3M+",
|
||||
label: "App downloads",
|
||||
description: "Total downloads across all platforms",
|
||||
},
|
||||
];
|
||||
type Metric = {
|
||||
value: string;
|
||||
label: string;
|
||||
description: string;
|
||||
};
|
||||
|
||||
interface AppSuccessMetricsProps {
|
||||
metrics?: Metric[]; // optional so we can have a fallback
|
||||
}
|
||||
|
||||
const defaultMetrics: Metric[] = [
|
||||
{
|
||||
value: "75+",
|
||||
label: "App Developed",
|
||||
description: "Successful mobile applications delivered",
|
||||
},
|
||||
{
|
||||
value: "25+",
|
||||
label: "App Deployed",
|
||||
description: "Live applications in production",
|
||||
},
|
||||
{
|
||||
value: "3M+",
|
||||
label: "App downloads",
|
||||
description: "Total downloads across all platforms",
|
||||
},
|
||||
];
|
||||
|
||||
const AppSuccessMetrics: React.FC<AppSuccessMetricsProps> = ({ metrics }) => {
|
||||
const finalMetrics = metrics ?? defaultMetrics;
|
||||
|
||||
return (
|
||||
<section className="py-20 lg:py-32 bg-black relative overflow-hidden">
|
||||
@@ -50,7 +61,6 @@ const AppSuccessMetrics = () => {
|
||||
|
||||
{/* Main Visual Section */}
|
||||
<div className="relative">
|
||||
{/* iPhone Mockups Display */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 50 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
@@ -75,7 +85,7 @@ const AppSuccessMetrics = () => {
|
||||
viewport={{ once: true }}
|
||||
className="grid grid-cols-1 md:grid-cols-3 gap-12 max-w-4xl mx-auto"
|
||||
>
|
||||
{metrics.map((metric, index) => (
|
||||
{finalMetrics.map((metric, index) => (
|
||||
<motion.div
|
||||
key={index}
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
@@ -87,19 +97,14 @@ const AppSuccessMetrics = () => {
|
||||
viewport={{ once: true }}
|
||||
className="text-center group"
|
||||
>
|
||||
{/* Large Metric Number */}
|
||||
<div className="mb-4">
|
||||
<span className="text-6xl lg:text-7xl font-bold text-white group-hover:text-accent transition-colors duration-300">
|
||||
{metric.value}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Metric Label */}
|
||||
<h3 className="text-lg lg:text-xl font-semibold text-gray-300 mb-2">
|
||||
{metric.label}
|
||||
</h3>
|
||||
|
||||
{/* Metric Description */}
|
||||
<p className="text-sm text-gray-400 leading-relaxed">
|
||||
{metric.description}
|
||||
</p>
|
||||
@@ -127,7 +132,6 @@ const AppSuccessMetrics = () => {
|
||||
|
||||
{/* Background Decorative Elements */}
|
||||
<div className="absolute inset-0 pointer-events-none overflow-hidden">
|
||||
{/* Subtle gradient orbs for depth */}
|
||||
<div className="absolute top-20 left-10 w-80 h-80 bg-accent/5 rounded-full blur-3xl"></div>
|
||||
<div className="absolute bottom-20 right-10 w-80 h-80 bg-blue-500/5 rounded-full blur-3xl"></div>
|
||||
<div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-96 h-96 bg-purple-500/3 rounded-full blur-3xl"></div>
|
||||
|
||||
@@ -1,33 +1,42 @@
|
||||
import React from "react";
|
||||
import { Phone, Mail } from "lucide-react";
|
||||
import { motion } from "framer-motion";
|
||||
import { number } from "yup";
|
||||
|
||||
const offices = [
|
||||
{
|
||||
region: "Asia Pacific",
|
||||
address: `614, 6th Floor, Palms Spring center,\nLink Road, Malad (West), Mumbai - 400064, India`,
|
||||
image: "https://wordpress.betadelivery.com/headerr/assets/images/new-img/mapone.webp",
|
||||
number: "+91 7700900039",
|
||||
email: "ideas@wdipl.com",
|
||||
},
|
||||
{
|
||||
region: "America",
|
||||
address: `215 Jefferson Street, Fort Collins,\nCO 80524, USA`,
|
||||
image: "https://wordpress.betadelivery.com/headerr/assets/images/new-img/maptwo.webp",
|
||||
number: "+44 7464741335",
|
||||
email: "ideas@wdipl.com",
|
||||
},
|
||||
{
|
||||
region: "Europe",
|
||||
address: `2, Frederick Street, Kings Cross,\nLondon, WC1X 0ND, England, UK.\nCRN-14194669, UK`,
|
||||
image: "https://wordpress.betadelivery.com/headerr/assets/images/new-img/mapthree.webp",
|
||||
number: "+44 7464741335",
|
||||
email: "ideas@wdipl.com",
|
||||
},
|
||||
{
|
||||
region: "Middle East",
|
||||
address: `Perth, WA 6000`,
|
||||
image: "https://wordpress.betadelivery.com/headerr/assets/images/new-img/mapfour.webp",
|
||||
number: "+44 7464741335",
|
||||
email: "ideas@wdipl.com",
|
||||
},
|
||||
];
|
||||
|
||||
export default function GlobalOffices() {
|
||||
return (
|
||||
<section className="bg-wdi-grey text-white py-16 lg:px-8 container mx-auto">
|
||||
<section className="bg-wdi-grey text-white py-20 lg:px-8 container mx-auto">
|
||||
{/* Section Heading */}
|
||||
<motion.h2
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
@@ -73,11 +82,11 @@ export default function GlobalOffices() {
|
||||
<div className="mt-4 space-y-2 text-sm">
|
||||
<div className="flex items-center gap-2">
|
||||
<Phone size={16} />
|
||||
<span>(+91) 7700900039</span>
|
||||
<span>{office.number}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Mail size={16} />
|
||||
<span>ideas@wdipl.com</span>
|
||||
<span>{office.email}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,8 +1,25 @@
|
||||
import React from "react";
|
||||
import { motion } from "framer-motion";
|
||||
import { FileText, Palette, Code, Rocket } from "lucide-react";
|
||||
import { GridPattern } from "./GridPattern";
|
||||
|
||||
const steps = [
|
||||
// Define the step interface
|
||||
interface Step {
|
||||
title: string;
|
||||
description: string;
|
||||
icon: React.ComponentType<any> | React.ReactElement;
|
||||
color?: string; // Make color optional
|
||||
number?: string;
|
||||
details?: string[];
|
||||
}
|
||||
|
||||
interface StepsIllustratedProps {
|
||||
title?: string;
|
||||
subtitle?: string;
|
||||
steps?: Step[];
|
||||
}
|
||||
|
||||
const defaultSteps: Step[] = [
|
||||
{
|
||||
title: "Define Scope",
|
||||
description: "We analyze your requirements and create a detailed project roadmap with clear timelines.",
|
||||
@@ -29,8 +46,25 @@ const steps = [
|
||||
}
|
||||
];
|
||||
|
||||
const StepCard = ({ step, index }: { step: typeof steps[0]; index: number }) => {
|
||||
const Icon = step.icon;
|
||||
interface Step {
|
||||
title: string;
|
||||
description: string;
|
||||
icon: React.ComponentType<any> | React.ReactElement;
|
||||
color?: string; // Make color optional
|
||||
number?: string;
|
||||
details?: string[];
|
||||
}
|
||||
|
||||
const StepCard = ({ step, index, totalSteps }: { step: Step; index: number; totalSteps: number }) => {
|
||||
// Define default colors if not provided
|
||||
const defaultColors = [
|
||||
"from-blue-500 to-cyan-500",
|
||||
"from-purple-500 to-pink-500",
|
||||
"from-green-500 to-emerald-500",
|
||||
"from-[#E5195E] to-orange-500"
|
||||
];
|
||||
|
||||
const color = step.color || defaultColors[index] || "from-blue-500 to-cyan-500";
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
@@ -41,14 +75,21 @@ const StepCard = ({ step, index }: { step: typeof steps[0]; index: number }) =>
|
||||
className="relative group"
|
||||
>
|
||||
{/* Connection Line */}
|
||||
{index < steps.length - 1 && (
|
||||
{index < totalSteps - 1 && (
|
||||
<div className="hidden lg:block absolute top-16 left-full w-full h-0.5 bg-gradient-to-r from-white/20 to-transparent z-0" />
|
||||
)}
|
||||
|
||||
<div className="relative z-10 text-center">
|
||||
<div className="mb-6">
|
||||
<div className={`w-20 h-20 mx-auto rounded-2xl bg-gradient-to-br ${step.color} flex items-center justify-center mb-4 group-hover:scale-110 transition-transform duration-300`}>
|
||||
<Icon className="w-10 h-10 text-white" />
|
||||
<div className={`w-20 h-20 mx-auto rounded-2xl bg-gradient-to-br ${color} flex items-center justify-center mb-4 group-hover:scale-110 transition-transform duration-300`}>
|
||||
{/* Handle both React components and JSX elements */}
|
||||
{typeof step.icon === 'function' ? (
|
||||
<step.icon className="w-10 h-10 text-white" />
|
||||
) : (
|
||||
React.cloneElement(step.icon as React.ReactElement, {
|
||||
className: "w-10 h-10 text-white"
|
||||
})
|
||||
)}
|
||||
</div>
|
||||
<div className="w-8 h-8 mx-auto rounded-full bg-[#E5195E] flex items-center justify-center text-white font-bold text-sm">
|
||||
{index + 1}
|
||||
@@ -62,7 +103,11 @@ const StepCard = ({ step, index }: { step: typeof steps[0]; index: number }) =>
|
||||
);
|
||||
};
|
||||
|
||||
export const StepsIllustrated = () => {
|
||||
export const StepsIllustrated = ({ title, subtitle, steps }: StepsIllustratedProps) => {
|
||||
const finalSteps = steps ?? defaultSteps;
|
||||
const finalTitle = title ?? "How We Turn Your Idea Into a Scalable Product";
|
||||
const finalSubtitle = subtitle ?? "Our proven 4-step process ensures your project is delivered on time, on budget, and exceeds expectations.";
|
||||
|
||||
return (
|
||||
<section className="relative py-20 bg-[#121212] overflow-hidden">
|
||||
<GridPattern strokeDasharray="4 2" />
|
||||
@@ -76,16 +121,21 @@ export const StepsIllustrated = () => {
|
||||
className="text-center mb-16"
|
||||
>
|
||||
<h2 className="text-3xl lg:text-4xl font-semibold text-white mb-4">
|
||||
How We Turn Your Idea Into a Scalable Product
|
||||
{finalTitle}
|
||||
</h2>
|
||||
<p className="text-[#CCCCCC] text-lg max-w-2xl mx-auto">
|
||||
Our proven 4-step process ensures your project is delivered on time, on budget, and exceeds expectations.
|
||||
{finalSubtitle}
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<div className="grid lg:grid-cols-4 gap-12 max-w-6xl mx-auto">
|
||||
{steps.map((step, index) => (
|
||||
<StepCard key={step.title} step={step} index={index} />
|
||||
{finalSteps.map((step, index) => (
|
||||
<StepCard
|
||||
key={step.title}
|
||||
step={step}
|
||||
index={index}
|
||||
totalSteps={finalSteps.length} // Pass the total number of steps
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -13,7 +13,7 @@ const ShimmerButton = React.forwardRef<HTMLButtonElement, ShimmerButtonProps>(
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"relative inline-flex items-center justify-center gap-2 rounded-md bg-accent px-6 py-3 text-sm font-medium text-accent-foreground transition-all duration-300 hover:bg-accent/90 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent whitespace-nowrap overflow-hidden",
|
||||
"before:absolute before:inset-0 before:-translate-x-full before:animate-[shimmer_2s_infinite] before:bg-gradient-to-r before:from-transparent before:via-white/10 before:to-transparent",
|
||||
"before:absolute before:inset-0 before:-translate-x-full before:animate-[shimmer_2s_infinite] before:bg-gradient-to-r before:from-transparent before:via-white/10 before:to-transparent cursor-pointer",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
|
||||
@@ -27,7 +27,7 @@ export const TechStackVisualization = ({ stacks }: TechStackVisualizationProps)
|
||||
</motion.div>
|
||||
|
||||
{/* Tech Stack Orbits */}
|
||||
{stacks.map((stack, stackIndex) => (
|
||||
{(stacks ?? []).map((stack, stackIndex) => (
|
||||
<motion.div
|
||||
key={stack.name}
|
||||
initial={{ opacity: 0 }}
|
||||
|
||||
Reference in New Issue
Block a user