hireby-frontend
/
hireby-frontend
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

feat: add ThreeStepsSection and TalentNetworkSection components

master
sina_sajjadi 2 weeks ago
parent
b2d3042964
commit
91ebe1ffc1
2 changed files with 51 additions and 47 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      components/talent-network-section.tsx
  2. 96
      components/three-steps-section.tsx

2
components/talent-network-section.tsx
View File

@ -254,7 +254,7 @@ export function TalentNetworkSection() {
return (
<section
id="products"
className="relative w-full pt-16 lg:pt-[100px] pb-16 lg:pb-[100px] from-white via-[#f8faf9] to-white border-y border-black/[0.03] overflow-hidden"
className="relative w-full pt-16 lg:pt-[100px] pb-16 lg:pb-[100px] from-white via-[#f8faf9] to-white overflow-hidden"
>
<style dangerouslySetInnerHTML={{ __html: STAR_PULSE_CSS }} />
{/* text_759_6821 (w: 1216, h: 180, x: 352, y: 0) */}

96
components/three-steps-section.tsx
View File

@ -45,19 +45,6 @@ export function ThreeStepsSection() {
id="how-it-work"
className="relative w-full bg-white overflow-hidden pt-16 lg:pt-[100px] pb-20 lg:pb-[150px]"
>
{/* Background Curved Band (Rectangle 1000001764 - 1920x484 at y=315) */}
<div
aria-hidden="true"
className="absolute left-1/2 -translate-x-1/2 top-[315px] w-[1920px] h-[484px] pointer-events-none z-0 select-none"
>
<Image
src="/assets/images/three-steps-bg-band.svg"
alt=""
width={1920}
height={484}
className="w-full h-full object-fill"
/>
</div>
<div className="relative z-10 max-w-[1216px] mx-auto px-4">
{/* Top Centered Logo (Logo 759:7254 - 64x64 at y=0) */}
@ -109,41 +96,58 @@ export function ThreeStepsSection() {
</p>
</div>
{/* 3 Cards Container Frame (Frame 2147263192 - 1216x486, cornerRadius: 48, padding: 8, itemSpacing: 8) */}
<div
className="mt-12 md:mt-16 lg:mt-[80px] rounded-[48px] p-2 flex flex-col lg:flex-row gap-2 max-w-[1216px] mx-auto shadow-sm"
style={{
background:
"linear-gradient(135deg, rgba(244, 207, 0, 0.2) 0%, rgba(0, 167, 104, 0.2) 100%), rgba(21, 154, 104, 0.3)",
}}
>
{STEP_CARDS.map((card) => (
<div
key={card.id}
className="flex-1 bg-white rounded-[40px] min-h-[470px] flex flex-col justify-between overflow-hidden shadow-xs"
>
{/* Illustration Area (height: 296px) */}
<div className="relative w-full h-[296px] flex items-center justify-center p-4">
<Image
src={card.imageSrc}
alt={card.title}
width={card.imageWidth}
height={card.imageHeight}
className="max-h-[296px] w-auto object-contain"
/>
</div>
{/* 3 Cards Container Wrapper */}
<div className="relative mt-12 md:mt-16 lg:mt-[80px] max-w-[1216px] mx-auto">
{/* Background Curved Band (Rectangle 1000001764 - 1920x484 centered on cards) */}
<div
aria-hidden="true"
className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-[1920px] h-[484px] pointer-events-none z-0 select-none"
>
<Image
src="/assets/images/three-steps-bg-band.svg"
alt=""
width={1920}
height={484}
className="w-full h-full object-fill"
/>
</div>
{/* Text Container (Frame 2147263193 - width: 330, height: 138, itemSpacing: 8) */}
<div className="px-8 pb-8 pt-2 flex flex-col gap-2">
<h3 className="text-[24px] leading-[29px] font-medium text-[#020d09] text-left">
{card.title}
</h3>
<p className="text-[18px] leading-[24px] text-[#020d09]/30 font-normal text-left font-sans">
{card.description}
</p>
{/* 3 Cards Container Frame (Frame 2147263192 - 1216x486, cornerRadius: 48, padding: 8, itemSpacing: 8) */}
<div
className="relative z-10 rounded-[48px] p-2 flex flex-col lg:flex-row gap-2 shadow-sm"
style={{
background:
"linear-gradient(135deg, rgba(244, 207, 0, 0.2) 0%, rgba(0, 167, 104, 0.2) 100%), rgba(21, 154, 104, 0.3)",
}}
>
{STEP_CARDS.map((card) => (
<div
key={card.id}
className="flex-1 bg-white rounded-[40px] min-h-[470px] flex flex-col justify-between overflow-hidden shadow-xs"
>
{/* Illustration Area (height: 296px) */}
<div className="relative w-full h-[296px] flex items-center justify-center p-4">
<Image
src={card.imageSrc}
alt={card.title}
width={card.imageWidth}
height={card.imageHeight}
className="max-h-[296px] w-auto object-contain"
/>
</div>
{/* Text Container (Frame 2147263193 - width: 330, height: 138, itemSpacing: 8) */}
<div className="px-8 pb-8 pt-2 flex flex-col gap-2">
<h3 className="text-[24px] leading-[29px] font-medium text-[#020d09] text-left">
{card.title}
</h3>
<p className="text-[18px] leading-[24px] text-[#020d09]/30 font-normal text-left font-sans">
{card.description}
</p>
</div>
</div>
</div>
))}
))}
</div>
</div>
</div>
</section>

Write Preview
Loading…
Cancel
Save