Skip to content

Commit 9006fef

Browse files
author
raineer
committed
Refactor WorkWithUs component from 3-card grid to 3 separate sectionsdelete raineer pdf
1 parent 94445e4 commit 9006fef

1 file changed

Lines changed: 117 additions & 103 deletions

File tree

‎apps/codebility/app/(marketing)/_components/landing/LandingWorkWithUs.tsx‎

Lines changed: 117 additions & 103 deletions
Original file line numberDiff line numberDiff line change
@@ -5,114 +5,128 @@ import { Button } from "@/components/ui/button";
55
import Container from "../MarketingContainer";
66
import Section from "../MarketingSection";
77

8-
const WorkWithUs = () => {
9-
return (
10-
<Section
11-
id="workwithus"
12-
className="border-light-900/5 bg-light-900/5 relative w-full border-y-4"
13-
>
14-
<Container className="relative z-10 mx-auto max-w-[1100px] px-4 text-white">
15-
<div className="flex flex-col gap-6 md:gap-10">
16-
<h2 className="text-center text-xl md:text-3xl">Work With Us</h2>
8+
// Card data array for DRY principle - Single source of truth for card content
9+
const WORK_WITH_US_CARDS = [
10+
{
11+
id: "portfolio",
12+
title: "Our Portfolio",
13+
image: {
14+
src: "https://codebility-cdn.pages.dev/assets/images/index/projects-large.jpg",
15+
alt: "portfolio projects"
16+
},
17+
description: "Build your own website with us today and ensure a reliable, cutting-edge online presence.",
18+
link: {
19+
href: "/services",
20+
text: "Our Portfolio"
21+
}
22+
},
23+
{
24+
id: "hire-developers",
25+
title: "Hire Developers",
26+
image: {
27+
src: "https://codebility-cdn.pages.dev/assets/images/index/codevs-large.jpg",
28+
alt: "professional developers"
29+
},
30+
description: "Connect with the best developer to meet your needs through our top-rated professionals.",
31+
link: {
32+
href: "/codevs",
33+
text: "Hire a CoDev"
34+
}
35+
},
36+
{
37+
id: "developer-journey",
38+
title: "Developer Journey",
39+
image: {
40+
src: "/assets/images/index/image.png",
41+
alt: "developer learning journey phases"
42+
},
43+
description: "Connect with our developer community and explore exciting career opportunities in tech.",
44+
link: {
45+
href: "/auth/onboarding",
46+
text: "Apply as Codev"
47+
}
48+
}
49+
];
1750

18-
{/* Updated grid layout for 3 cards */}
19-
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3 lg:gap-5">
20-
21-
{/* Card 1: Portfolio */}
22-
<div className="border-light-900/5 bg-light-700/10 flex h-full flex-col gap-4 rounded-lg border-2 p-4">
23-
<div className="aspect-[500/359] w-full overflow-hidden rounded-xl">
24-
<Image
25-
src="https://codebility-cdn.pages.dev/assets/images/index/projects-large.jpg"
26-
alt="portfolio projects"
27-
width={500}
28-
height={359}
29-
className="h-full w-full object-cover"
30-
/>
31-
</div>
32-
<p className="flex-1 text-sm leading-relaxed">
33-
Build your own website with us today and ensure a reliable,
34-
cutting-edge online presence.
35-
</p>
36-
<div className="flex md:justify-end">
37-
<div className="w-full md:w-auto">
38-
<Link href="/services">
39-
<Button variant="purple" size="lg" rounded="full">
40-
Our Portfolio
41-
</Button>
42-
</Link>
43-
</div>
44-
</div>
45-
</div>
51+
// Reusable card component following Single Responsibility Principle
52+
const WorkWithUsCard = ({ card }: { card: typeof WORK_WITH_US_CARDS[0] }) => (
53+
<Container className="relative z-10 mx-auto max-w-[600px] px-4 text-white">
54+
<div className="border-light-900/5 bg-light-700/10 flex h-full flex-col gap-4 rounded-lg border-2 p-6 md:p-8">
55+
{/* Image section with consistent aspect ratio */}
56+
<div className="aspect-[500/359] w-full overflow-hidden rounded-xl">
57+
<Image
58+
src={card.image.src}
59+
alt={card.image.alt}
60+
width={500}
61+
height={359}
62+
className="h-full w-full object-cover"
63+
priority={card.id === "portfolio"} // Prioritize first image loading
64+
/>
65+
</div>
66+
67+
{/* Content section with consistent spacing */}
68+
<div className="flex flex-col gap-6">
69+
<p className="text-center text-sm leading-relaxed md:text-base">
70+
{card.description}
71+
</p>
72+
73+
{/* Button section - centered for single section layout */}
74+
<div className="flex justify-center">
75+
<Link href={card.link.href}>
76+
<Button variant="purple" size="lg" rounded="full">
77+
{card.link.text}
78+
</Button>
79+
</Link>
80+
</div>
81+
</div>
82+
</div>
83+
</Container>
84+
);
4685

47-
{/* Card 2: Hire Developers */}
48-
<div className="border-light-900/5 bg-light-700/10 flex h-full flex-col gap-4 rounded-lg border-2 p-4">
49-
<div className="aspect-[500/359] w-full overflow-hidden rounded-xl">
50-
<Image
51-
src="https://codebility-cdn.pages.dev/assets/images/index/codevs-large.jpg"
52-
alt="professional developers"
53-
width={500}
54-
height={359}
55-
className="h-full w-full object-cover"
56-
/>
57-
</div>
58-
<p className="flex-1 text-sm leading-relaxed">
59-
Connect with the best developer to meet your needs through our
60-
top-rated professionals.
61-
</p>
62-
<div className="flex md:justify-end">
63-
<div className="w-full md:w-auto">
64-
<Link href="/codevs">
65-
<Button variant="purple" size="lg" rounded="full">
66-
Hire a CoDev
67-
</Button>
68-
</Link>
69-
</div>
70-
</div>
71-
</div>
86+
// Background decoration component for DRY principle
87+
const BackgroundDecoration = () => (
88+
<div
89+
aria-hidden="true"
90+
className="pointer-events-none absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transform overflow-hidden blur-3xl"
91+
>
92+
<div
93+
style={{
94+
clipPath: "polygon(22.1% 28.3%, 6% 40.5%, 0.8% 63.5%, 9.3% 84.8%, 23.6% 88.5%, 48.9% 88.8%, 77.2% 88.5%, 92.4% 71.5%, 93.9% 51.5%, 85.9% 36.8%, 70% 29.5%, 46.1% 29%)",
95+
}}
96+
className="relative aspect-[855/678] w-[40rem] bg-gradient-to-r from-[#00738B] via-[#0C3FDB] to-[#9707DD] opacity-20 sm:w-[72.1875rem]"
97+
/>
98+
</div>
99+
);
72100

73-
{/* Card 3: Developer Journey */}
74-
<div className="border-light-900/5 bg-light-700/10 flex h-full flex-col gap-4 rounded-lg border-2 p-4">
75-
<div className="aspect-[500/359] w-full overflow-hidden rounded-xl">
76-
<Image
77-
src="/assets/images/index/image.png"
78-
alt="developer learning journey phases"
79-
width={500}
80-
height={359}
81-
className="h-full w-full object-cover"
82-
/>
83-
</div>
84-
<p className="flex-1 text-sm leading-relaxed">
85-
Connect with our developer community and explore exciting career opportunities in tech.
86-
</p>
87-
<div className="flex md:justify-end">
88-
<div className="w-full md:w-auto">
89-
<Link href="/auth/onboarding">
90-
<Button variant="purple" size="lg" rounded="full">
91-
Apply as Codev
92-
</Button>
93-
</Link>
94-
</div>
95-
</div>
96-
</div>
101+
const WorkWithUs = () => {
102+
return (
103+
<>
104+
{/* Main title section */}
105+
<Section
106+
id="workwithus"
107+
className="border-light-900/5 bg-light-900/5 relative w-full border-t-4"
108+
>
109+
<Container className="relative z-10 mx-auto max-w-[1100px] px-4 text-white">
110+
<h2 className="text-center text-xl md:text-3xl pt-1 pb-0 mb-0 -mb-16">Work With Us</h2>
111+
</Container>
112+
<BackgroundDecoration />
113+
</Section>
97114

115+
{/* Three separate sections - each card gets its own section */}
116+
{WORK_WITH_US_CARDS.map((card, index) => (
117+
<Section
118+
key={card.id}
119+
className={`border-light-900/5 bg-light-900/5 relative w-full ${
120+
index === WORK_WITH_US_CARDS.length - 1 ? 'border-b-4' : ''
121+
}`}
122+
>
123+
<div className="pt-0 pb-0 -mt-20">
124+
<WorkWithUsCard card={card} />
98125
</div>
99-
</div>
100-
</Container>
101-
102-
{/* Background decoration */}
103-
<div
104-
aria-hidden="true"
105-
className="pointer-events-none absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transform overflow-hidden blur-3xl"
106-
>
107-
<div
108-
style={{
109-
clipPath:
110-
"polygon(22.1% 28.3%, 6% 40.5%, 0.8% 63.5%, 9.3% 84.8%, 23.6% 88.5%, 48.9% 88.8%, 77.2% 88.5%, 92.4% 71.5%, 93.9% 51.5%, 85.9% 36.8%, 70% 29.5%, 46.1% 29%)",
111-
}}
112-
className="relative aspect-[855/678] w-[40rem] bg-gradient-to-r from-[#00738B] via-[#0C3FDB] to-[#9707DD] opacity-20 sm:w-[72.1875rem]"
113-
/>
114-
</div>
115-
</Section>
126+
<BackgroundDecoration />
127+
</Section>
128+
))}
129+
</>
116130
);
117131
};
118132

0 commit comments

Comments
 (0)