Skip to content

Commit 88900ea

Browse files
Codeboy20Codeboy20
committed
done
1 parent 284ce0e commit 88900ea

File tree

1 file changed

+180
-44
lines changed

1 file changed

+180
-44
lines changed

‎src/pages/careers/index.tsx‎

Lines changed: 180 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -174,9 +174,9 @@ function CareersContent() {
174174
/>
175175
</Head>
176176

177-
<div className={`careers-page transition-colors duration-300 ${
177+
<div className={`careers-page transition-colors duration-300 min-h-screen ${
178178
isDark
179-
? 'bg-gradient-to-b from-gray-900 to-black'
179+
? 'bg-gray-900'
180180
: 'bg-gradient-to-b from-white to-gray-50'
181181
}`}>
182182
{/* Hero Section */}
@@ -224,45 +224,71 @@ function CareersContent() {
224224
<motion.section
225225
id="culture"
226226
className="culture-section py-20 px-4"
227+
style={{
228+
backgroundColor: isDark ? '#111827' : '#ffffff'
229+
}}
227230
initial="hidden"
228231
whileInView="visible"
229232
viewport={{ once: true }}
230233
variants={staggerContainer}
231234
>
232235
<div className="max-w-6xl mx-auto">
233236
<motion.div className="text-center mb-16" variants={fadeIn}>
234-
<h2 className={`text-4xl md:text-5xl font-bold mb-6 ${
235-
isDark ? 'text-white' : 'text-gray-900'
236-
}`}>
237+
<h2
238+
className="text-4xl md:text-5xl font-bold mb-6"
239+
style={{
240+
color: isDark ? '#ffffff' : '#111827'
241+
}}
242+
>
237243
Our Culture & Values
238244
</h2>
239-
<p className={`text-xl max-w-3xl mx-auto ${
240-
isDark ? 'text-gray-300' : 'text-gray-600'
241-
}`}>
242-
We're building more than just a company—we're creating a community of learners, innovators, and leaders.
243-
</p>
245+
<div
246+
className="w-full flex justify-center"
247+
style={{
248+
display: 'flex',
249+
justifyContent: 'center',
250+
alignItems: 'center'
251+
}}
252+
>
253+
<p
254+
className="text-xl max-w-3xl"
255+
style={{
256+
color: isDark ? '#d1d5db' : '#4b5563',
257+
textAlign: 'center',
258+
margin: '0 auto'
259+
}}
260+
>
261+
We're building more than just a company—we're creating a community of learners, innovators, and leaders.
262+
</p>
263+
</div>
244264
</motion.div>
245265

246266
<div className="grid md:grid-cols-3 gap-8">
247267
{cultureValues.map((value, index) => (
248268
<motion.div
249269
key={index}
250-
className={`culture-card rounded-xl shadow-lg p-8 hover:shadow-xl transition-all duration-300 transform hover:scale-105 ${
251-
isDark ? 'bg-gray-800' : 'bg-white'
252-
}`}
270+
className="culture-card rounded-xl shadow-lg p-8 hover:shadow-xl transition-all duration-300 transform hover:scale-105"
271+
style={{
272+
backgroundColor: isDark ? '#0f172a' : '#ffffff'
273+
}}
253274
variants={fadeIn}
254275
>
255276
<div className="h-48 bg-gradient-to-br from-blue-400 to-purple-500 rounded-lg mb-6 flex items-center justify-center">
256277
<span className="text-6xl">🚀</span>
257278
</div>
258-
<h3 className={`text-2xl font-bold mb-4 ${
259-
isDark ? 'text-white' : 'text-gray-900'
260-
}`}>
279+
<h3
280+
className="text-2xl font-bold mb-4"
281+
style={{
282+
color: isDark ? '#ffffff' : '#111827'
283+
}}
284+
>
261285
{value.title}
262286
</h3>
263-
<p className={`${
264-
isDark ? 'text-gray-300' : 'text-gray-600'
265-
}`}>
287+
<p
288+
style={{
289+
color: isDark ? '#d1d5db' : '#4b5563'
290+
}}
291+
>
266292
{value.description}
267293
</p>
268294
</motion.div>
@@ -273,34 +299,70 @@ function CareersContent() {
273299

274300
{/* Perks & Benefits Section */}
275301
<motion.section
276-
className="perks-section py-20 px-4 bg-gray-50 dark:bg-gray-900"
302+
className="perks-section py-20 px-4"
303+
style={{
304+
backgroundColor: isDark ? '#0f172a' : '#f9fafb'
305+
}}
277306
initial="hidden"
278307
whileInView="visible"
279308
viewport={{ once: true }}
280309
variants={staggerContainer}
281310
>
282311
<div className="max-w-6xl mx-auto">
283312
<motion.div className="text-center mb-16" variants={fadeIn}>
284-
<h2 className="text-4xl md:text-5xl font-bold mb-6 text-gray-900 dark:text-white">
313+
<h2
314+
className="text-4xl md:text-5xl font-bold mb-6"
315+
style={{
316+
color: isDark ? '#ffffff' : '#111827'
317+
}}
318+
>
285319
Perks & Benefits
286320
</h2>
287-
<p className="text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
288-
We take care of our team so they can focus on doing their best work.
289-
</p>
321+
<div
322+
className="w-full flex justify-center"
323+
style={{
324+
display: 'flex',
325+
justifyContent: 'center',
326+
alignItems: 'center'
327+
}}
328+
>
329+
<p
330+
className="text-xl max-w-3xl"
331+
style={{
332+
color: isDark ? '#d1d5db' : '#4b5563',
333+
textAlign: 'center',
334+
margin: '0 auto'
335+
}}
336+
>
337+
We take care of our team so they can focus on doing their best work.
338+
</p>
339+
</div>
290340
</motion.div>
291341

292342
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
293343
{perks.map((perk, index) => (
294344
<motion.div
295345
key={index}
296-
className="perk-card bg-white dark:bg-gray-800 rounded-xl p-6 shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105"
346+
className="perk-card rounded-xl p-6 shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105"
347+
style={{
348+
backgroundColor: isDark ? '#1f2937' : '#ffffff'
349+
}}
297350
variants={fadeIn}
298351
>
299352
<div className="text-4xl mb-4">{perk.icon}</div>
300-
<h3 className="text-xl font-bold mb-3 text-gray-900 dark:text-white">
353+
<h3
354+
className="text-xl font-bold mb-3"
355+
style={{
356+
color: isDark ? '#ffffff' : '#111827'
357+
}}
358+
>
301359
{perk.title}
302360
</h3>
303-
<p className="text-gray-600 dark:text-gray-300">
361+
<p
362+
style={{
363+
color: isDark ? '#d1d5db' : '#4b5563'
364+
}}
365+
>
304366
{perk.description}
305367
</p>
306368
</motion.div>
@@ -313,17 +375,30 @@ function CareersContent() {
313375
<motion.section
314376
id="openings"
315377
className="jobs-section py-20 px-4"
378+
style={{
379+
backgroundColor: isDark ? '#111827' : '#ffffff'
380+
}}
316381
initial="hidden"
317382
whileInView="visible"
318383
viewport={{ once: true }}
319384
variants={staggerContainer}
320385
>
321386
<div className="max-w-6xl mx-auto">
322387
<motion.div className="text-center mb-16" variants={fadeIn}>
323-
<h2 className="text-4xl md:text-5xl font-bold mb-6 text-gray-900 dark:text-white">
388+
<h2
389+
className="text-4xl md:text-5xl font-bold mb-6"
390+
style={{
391+
color: isDark ? '#ffffff' : '#111827'
392+
}}
393+
>
324394
Open Positions
325395
</h2>
326-
<p className="text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
396+
<p
397+
className="text-xl max-w-3xl mx-auto text-center"
398+
style={{
399+
color: isDark ? '#d1d5db' : '#4b5563'
400+
}}
401+
>
327402
Find your next opportunity and help us build the future of coding education.
328403
</p>
329404
</motion.div>
@@ -332,35 +407,64 @@ function CareersContent() {
332407
{jobOpenings.map((job, index) => (
333408
<motion.div
334409
key={index}
335-
className="job-card bg-white dark:bg-gray-800 rounded-xl p-6 shadow-lg hover:shadow-xl transition-all duration-300"
410+
className="job-card rounded-xl p-6 shadow-lg hover:shadow-xl transition-all duration-300"
411+
style={{
412+
backgroundColor: isDark ? '#1f2937' : '#ffffff'
413+
}}
336414
variants={fadeIn}
337415
>
338416
<div className="flex flex-col md:flex-row md:items-center md:justify-between">
339417
<div className="flex-1">
340418
<div className="flex flex-col md:flex-row md:items-center gap-4 mb-4">
341-
<h3 className="text-2xl font-bold text-gray-900 dark:text-white">
419+
<h3
420+
className="text-2xl font-bold"
421+
style={{
422+
color: isDark ? '#ffffff' : '#111827'
423+
}}
424+
>
342425
{job.title}
343426
</h3>
344427
<div className="flex gap-2">
345-
<span className="px-3 py-1 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 rounded-full text-sm">
428+
<span className={`px-3 py-1 rounded-full text-sm ${
429+
isDark
430+
? 'bg-blue-900 text-blue-200'
431+
: 'bg-blue-100 text-blue-800'
432+
}`}>
346433
{job.department}
347434
</span>
348-
<span className="px-3 py-1 bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 rounded-full text-sm">
435+
<span className={`px-3 py-1 rounded-full text-sm ${
436+
isDark
437+
? 'bg-green-900 text-green-200'
438+
: 'bg-green-100 text-green-800'
439+
}`}>
349440
{job.location}
350441
</span>
351-
<span className="px-3 py-1 bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-200 rounded-full text-sm">
442+
<span className={`px-3 py-1 rounded-full text-sm ${
443+
isDark
444+
? 'bg-purple-900 text-purple-200'
445+
: 'bg-purple-100 text-purple-800'
446+
}`}>
352447
{job.type}
353448
</span>
354449
</div>
355450
</div>
356-
<p className="text-gray-600 dark:text-gray-300 mb-4">
451+
<p
452+
className="mb-4"
453+
style={{
454+
color: isDark ? '#d1d5db' : '#4b5563'
455+
}}
456+
>
357457
{job.description}
358458
</p>
359459
</div>
360460
<div className="md:ml-6">
361461
<Link
362462
to="/contact-us"
363-
className="bg-blue-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-blue-700 transition-all duration-300 transform hover:scale-105 shadow-lg inline-block"
463+
className="bg-blue-600 hover:bg-blue-700 px-6 py-3 rounded-lg font-semibold transition-all duration-300 transform hover:scale-105 shadow-lg inline-block"
464+
style={{
465+
color: '#ffffff',
466+
textDecoration: 'none'
467+
}}
364468
>
365469
Apply Now
366470
</Link>
@@ -374,38 +478,68 @@ function CareersContent() {
374478

375479
{/* Testimonials Section */}
376480
<motion.section
377-
className="testimonials-section py-20 px-4 bg-gray-50 dark:bg-gray-900"
481+
className="testimonials-section py-20 px-4"
482+
style={{
483+
backgroundColor: isDark ? '#0f172a' : '#f9fafb'
484+
}}
378485
initial="hidden"
379486
whileInView="visible"
380487
viewport={{ once: true }}
381488
variants={staggerContainer}
382489
>
383490
<div className="max-w-4xl mx-auto">
384491
<motion.div className="text-center mb-16" variants={fadeIn}>
385-
<h2 className="text-4xl md:text-5xl font-bold mb-6 text-gray-900 dark:text-white">
492+
<h2
493+
className="text-4xl md:text-5xl font-bold mb-6"
494+
style={{
495+
color: isDark ? '#ffffff' : '#111827'
496+
}}
497+
>
386498
What Our Team Says
387499
</h2>
388-
<p className="text-xl text-gray-600 dark:text-gray-300">
500+
<p
501+
className="text-xl text-center"
502+
style={{
503+
color: isDark ? '#d1d5db' : '#4b5563'
504+
}}
505+
>
389506
Hear from our team members about their experience at RecodeHive.
390507
</p>
391508
</motion.div>
392509

393510
<motion.div
394-
className="testimonial-carousel bg-white dark:bg-gray-800 rounded-xl p-8 shadow-lg"
511+
className="testimonial-carousel rounded-xl p-8 shadow-lg"
512+
style={{
513+
backgroundColor: isDark ? '#111827' : '#ffffff'
514+
}}
395515
variants={fadeIn}
396516
>
397517
<div className="testimonial-content text-center">
398518
<div className="w-20 h-20 bg-gradient-to-br from-blue-400 to-purple-500 rounded-full mx-auto mb-6 flex items-center justify-center">
399519
<span className="text-2xl">👤</span>
400520
</div>
401-
<blockquote className="text-lg md:text-xl text-gray-700 dark:text-gray-300 mb-6 italic">
521+
<blockquote
522+
className="text-lg md:text-xl mb-6 italic"
523+
style={{
524+
color: isDark ? '#d1d5db' : '#374151'
525+
}}
526+
>
402527
"{testimonials[activeTestimonial].content}"
403528
</blockquote>
404529
<div className="testimonial-author">
405-
<h4 className="text-xl font-bold text-gray-900 dark:text-white">
530+
<h4
531+
className="text-xl font-bold"
532+
style={{
533+
color: isDark ? '#ffffff' : '#111827'
534+
}}
535+
>
406536
{testimonials[activeTestimonial].name}
407537
</h4>
408-
<p className="text-gray-600 dark:text-gray-400">
538+
<p
539+
style={{
540+
color: isDark ? '#9ca3af' : '#4b5563'
541+
}}
542+
>
409543
{testimonials[activeTestimonial].role}
410544
</p>
411545
</div>
@@ -418,7 +552,9 @@ function CareersContent() {
418552
className={`w-3 h-3 rounded-full transition-all duration-300 ${
419553
index === activeTestimonial
420554
? 'bg-blue-600 scale-110'
421-
: 'bg-gray-300 dark:bg-gray-600 hover:bg-gray-400'
555+
: isDark
556+
? 'bg-gray-600 hover:bg-gray-500'
557+
: 'bg-gray-300 hover:bg-gray-400'
422558
}`}
423559
onClick={() => setActiveTestimonial(index)}
424560
/>

0 commit comments

Comments
 (0)