Skip to content

Commit 1736360

Browse files
sayak-sarkarsayak-sarkar
committed
feat(home): Add TeamExpertise and ProcessMethodology components; refactor HomePage to include new sections
- Created TeamExpertise component showcasing team expertise areas with SVG icons and descriptions. - Refactored Vision component into ProcessMethodology, detailing the transformation process with phases and activities. - Updated HomePage to replace Vision with TeamExpertise and ProcessMethodology components for improved content structure.
1 parent 73821f0 commit 1736360

File tree

4 files changed

+1061
-112
lines changed

4 files changed

+1061
-112
lines changed

‎src/components/features/home/ProcessMethodology.tsx‎

Lines changed: 382 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,382 @@
1+
const ProcessMethodology = () => {
2+
const methodologies = [
3+
{
4+
phase: '01',
5+
title: 'Discovery & Strategy',
6+
description:
7+
'Deep-dive analysis of your current state, business objectives, and technical landscape to craft a tailored transformation roadmap.',
8+
activities: [
9+
'Architecture Assessment',
10+
'Stakeholder Alignment',
11+
'Technology Audit',
12+
'Strategic Planning',
13+
],
14+
icon: (
15+
<svg
16+
className="w-8 h-8 text-primary"
17+
fill="currentColor"
18+
viewBox="0 0 24 24"
19+
>
20+
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" />
21+
</svg>
22+
),
23+
},
24+
{
25+
phase: '02',
26+
title: 'Design & Architecture',
27+
description:
28+
'Collaborative design sessions to architect scalable, maintainable solutions that align with industry best practices and your business goals.',
29+
activities: [
30+
'System Design',
31+
'API Architecture',
32+
'Security Framework',
33+
'Scalability Planning',
34+
],
35+
icon: (
36+
<svg
37+
className="w-8 h-8 text-primary"
38+
fill="currentColor"
39+
viewBox="0 0 24 24"
40+
>
41+
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
42+
</svg>
43+
),
44+
},
45+
{
46+
phase: '03',
47+
title: 'Agile Development',
48+
description:
49+
'Iterative development with continuous feedback loops, ensuring rapid delivery while maintaining quality and alignment with evolving requirements.',
50+
activities: [
51+
'Sprint Planning',
52+
'Continuous Integration',
53+
'Code Reviews',
54+
'Quality Assurance',
55+
],
56+
icon: (
57+
<svg
58+
className="w-8 h-8 text-primary"
59+
fill="currentColor"
60+
viewBox="0 0 24 24"
61+
>
62+
<path d="M12 2A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10A10 10 0 0 0 12 2m0 18a8 8 0 0 1-8-8 8 8 0 0 1 8-8 8 8 0 0 1 8 8 8 8 0 0 1-8 8m.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67V7z" />
63+
</svg>
64+
),
65+
},
66+
{
67+
phase: '04',
68+
title: 'Deployment & Optimization',
69+
description:
70+
'Seamless deployment strategies with comprehensive monitoring, performance optimization, and knowledge transfer for sustainable operations.',
71+
activities: [
72+
'DevOps Pipeline',
73+
'Performance Tuning',
74+
'Knowledge Transfer',
75+
'Ongoing Support',
76+
],
77+
icon: (
78+
<svg
79+
className="w-8 h-8 text-primary"
80+
fill="currentColor"
81+
viewBox="0 0 24 24"
82+
>
83+
<path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 14l-5-5 1.41-1.41L12 14.17l7.59-7.59L21 8l-9 9z" />
84+
</svg>
85+
),
86+
},
87+
];
88+
89+
return (
90+
<section className="py-16 md:py-24 bg-white">
91+
<div className="container mx-auto px-4">
92+
{/* Section Header */}
93+
<div className="text-center mb-16">
94+
<h2 className="heading-1 mb-4">Our Process & Methodology</h2>
95+
<p className="text-lg text-secondary max-w-4xl mx-auto">
96+
We follow a proven, iterative methodology that combines enterprise
97+
best practices with agile principles, ensuring successful delivery
98+
while maintaining flexibility and continuous value creation
99+
throughout your transformation journey.
100+
</p>
101+
</div>
102+
103+
{/* Process Timeline */}
104+
<div className="relative mb-16">
105+
{/* Desktop Timeline */}
106+
<div className="hidden lg:block">
107+
<div className="flex justify-between items-center mb-12">
108+
{methodologies.map((methodology, index) => (
109+
<div key={index} className="flex-1 relative">
110+
<div className="flex flex-col items-center">
111+
{/* Phase Number */}
112+
<div className="w-16 h-16 bg-primary rounded-full flex items-center justify-center mb-4 relative z-10">
113+
<span className="text-white font-bold text-lg">
114+
{methodology.phase}
115+
</span>
116+
</div>
117+
118+
{/* Connecting Line */}
119+
{index < methodologies.length - 1 && (
120+
<div className="absolute top-8 left-1/2 w-full h-0.5 bg-primary/20 -z-10 transform translate-x-8"></div>
121+
)}
122+
</div>
123+
</div>
124+
))}
125+
</div>
126+
127+
{/* Phase Details */}
128+
<div className="grid grid-cols-4 gap-8">
129+
{methodologies.map((methodology, index) => (
130+
<div key={index} className="text-center">
131+
<div className="bg-backgroundAlt rounded-lg p-6 hover:shadow-lg transition-all duration-300 group">
132+
<div className="flex justify-center mb-4">
133+
{methodology.icon}
134+
</div>
135+
<h3 className="text-xl font-bold text-dark mb-3 group-hover:text-primary transition-colors duration-300">
136+
{methodology.title}
137+
</h3>
138+
<p className="text-secondary mb-4 text-sm leading-relaxed">
139+
{methodology.description}
140+
</p>
141+
<div className="space-y-2">
142+
{methodology.activities.map((activity, activityIndex) => (
143+
<div
144+
key={activityIndex}
145+
className="flex items-center justify-center"
146+
>
147+
<div className="w-1 h-1 bg-primary rounded-full mr-2"></div>
148+
<span className="text-xs text-dark font-medium">
149+
{activity}
150+
</span>
151+
</div>
152+
))}
153+
</div>
154+
</div>
155+
</div>
156+
))}
157+
</div>
158+
</div>
159+
160+
{/* Mobile Timeline */}
161+
<div className="lg:hidden">
162+
<div className="space-y-8">
163+
{methodologies.map((methodology, index) => (
164+
<div key={index} className="relative">
165+
{/* Timeline Line */}
166+
{index < methodologies.length - 1 && (
167+
<div className="absolute left-8 top-16 w-0.5 h-full bg-primary/20 -z-10"></div>
168+
)}
169+
170+
<div className="flex items-start">
171+
{/* Phase Circle */}
172+
<div className="w-16 h-16 bg-primary rounded-full flex items-center justify-center mr-6 flex-shrink-0">
173+
<span className="text-white font-bold text-lg">
174+
{methodology.phase}
175+
</span>
176+
</div>
177+
178+
{/* Content */}
179+
<div className="flex-1 bg-backgroundAlt rounded-lg p-6">
180+
<div className="flex items-center mb-3">
181+
{methodology.icon}
182+
<h3 className="text-xl font-bold text-dark ml-3">
183+
{methodology.title}
184+
</h3>
185+
</div>
186+
<p className="text-secondary mb-4 leading-relaxed">
187+
{methodology.description}
188+
</p>
189+
<div className="grid grid-cols-2 gap-2">
190+
{methodology.activities.map(
191+
(activity, activityIndex) => (
192+
<div
193+
key={activityIndex}
194+
className="flex items-center"
195+
>
196+
<div className="w-1 h-1 bg-primary rounded-full mr-2"></div>
197+
<span className="text-sm text-dark font-medium">
198+
{activity}
199+
</span>
200+
</div>
201+
)
202+
)}
203+
</div>
204+
</div>
205+
</div>
206+
</div>
207+
))}
208+
</div>
209+
</div>
210+
</div>
211+
212+
{/* Methodology Principles */}
213+
<div className="bg-gradient-to-r from-primary/5 to-accent1/5 rounded-lg p-8 md:p-12">
214+
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center">
215+
<div>
216+
<h3 className="text-2xl font-bold text-dark mb-6">
217+
Core Methodology Principles
218+
</h3>
219+
<div className="space-y-4">
220+
<div className="flex items-start">
221+
<div className="flex-shrink-0 mt-1">
222+
<svg
223+
className="w-5 h-5 text-primary"
224+
fill="currentColor"
225+
viewBox="0 0 20 20"
226+
>
227+
<path
228+
fillRule="evenodd"
229+
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
230+
clipRule="evenodd"
231+
/>
232+
</svg>
233+
</div>
234+
<div className="ml-3">
235+
<h4 className="font-semibold text-dark mb-1">
236+
Collaborative Approach
237+
</h4>
238+
<p className="text-secondary text-sm">
239+
Deep partnership with your team ensuring knowledge
240+
transfer and sustainable solutions
241+
</p>
242+
</div>
243+
</div>
244+
<div className="flex items-start">
245+
<div className="flex-shrink-0 mt-1">
246+
<svg
247+
className="w-5 h-5 text-primary"
248+
fill="currentColor"
249+
viewBox="0 0 20 20"
250+
>
251+
<path
252+
fillRule="evenodd"
253+
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
254+
clipRule="evenodd"
255+
/>
256+
</svg>
257+
</div>
258+
<div className="ml-3">
259+
<h4 className="font-semibold text-dark mb-1">
260+
Risk Mitigation
261+
</h4>
262+
<p className="text-secondary text-sm">
263+
Proactive identification and management of technical and
264+
business risks
265+
</p>
266+
</div>
267+
</div>
268+
<div className="flex items-start">
269+
<div className="flex-shrink-0 mt-1">
270+
<svg
271+
className="w-5 h-5 text-primary"
272+
fill="currentColor"
273+
viewBox="0 0 20 20"
274+
>
275+
<path
276+
fillRule="evenodd"
277+
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
278+
clipRule="evenodd"
279+
/>
280+
</svg>
281+
</div>
282+
<div className="ml-3">
283+
<h4 className="font-semibold text-dark mb-1">
284+
Continuous Value Delivery
285+
</h4>
286+
<p className="text-secondary text-sm">
287+
Regular deliverables and feedback loops ensuring
288+
continuous value creation
289+
</p>
290+
</div>
291+
</div>
292+
<div className="flex items-start">
293+
<div className="flex-shrink-0 mt-1">
294+
<svg
295+
className="w-5 h-5 text-primary"
296+
fill="currentColor"
297+
viewBox="0 0 20 20"
298+
>
299+
<path
300+
fillRule="evenodd"
301+
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
302+
clipRule="evenodd"
303+
/>
304+
</svg>
305+
</div>
306+
<div className="ml-3">
307+
<h4 className="font-semibold text-dark mb-1">
308+
Quality & Performance Focus
309+
</h4>
310+
<p className="text-secondary text-sm">
311+
Enterprise-grade quality standards with performance
312+
optimization built-in
313+
</p>
314+
</div>
315+
</div>
316+
</div>
317+
</div>
318+
319+
<div className="relative">
320+
<div className="bg-white rounded-lg shadow-regular p-6">
321+
<h4 className="font-bold text-dark mb-4 text-center">
322+
Delivery Excellence
323+
</h4>
324+
<div className="grid grid-cols-2 gap-4 text-center">
325+
<div>
326+
<div className="text-2xl font-bold text-primary mb-1">
327+
99.9%
328+
</div>
329+
<div className="text-xs text-secondary">
330+
On-time Delivery
331+
</div>
332+
</div>
333+
<div>
334+
<div className="text-2xl font-bold text-primary mb-1">
335+
100%
336+
</div>
337+
<div className="text-xs text-secondary">
338+
Client Satisfaction
339+
</div>
340+
</div>
341+
<div>
342+
<div className="text-2xl font-bold text-primary mb-1">
343+
24/7
344+
</div>
345+
<div className="text-xs text-secondary">
346+
Support Available
347+
</div>
348+
</div>
349+
<div>
350+
<div className="text-2xl font-bold text-primary mb-1">
351+
Zero
352+
</div>
353+
<div className="text-xs text-secondary">Downtime Goals</div>
354+
</div>
355+
</div>
356+
357+
<div className="mt-6 pt-4 border-t border-gray-100">
358+
<div className="text-center">
359+
<p className="text-sm text-secondary mb-2">Certified in</p>
360+
<div className="flex justify-center space-x-2 text-xs">
361+
<span className="bg-primary/10 text-primary px-2 py-1 rounded">
362+
Agile
363+
</span>
364+
<span className="bg-primary/10 text-primary px-2 py-1 rounded">
365+
DevOps
366+
</span>
367+
<span className="bg-primary/10 text-primary px-2 py-1 rounded">
368+
Cloud
369+
</span>
370+
</div>
371+
</div>
372+
</div>
373+
</div>
374+
</div>
375+
</div>
376+
</div>
377+
</div>
378+
</section>
379+
);
380+
};
381+
382+
export default ProcessMethodology;

0 commit comments

Comments
 (0)