Skip to content

Commit a40f569

Browse files
BharathBharath
Bharath
authored and
Bharath
committed
Based on Playwright test feedback moved few sections from page and imported back.
1 parent afa8ef7 commit a40f569

3 files changed

Lines changed: 326 additions & 308 deletions

File tree

‎app/components/MarketingSections.tsx‎

Lines changed: 321 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,321 @@
1+
import React from 'react'
2+
import { Box, Typography, Link as MuiLink } from '@mui/material'
3+
import CheckIcon from '@mui/icons-material/Check'
4+
import VerifiedUserOutlinedIcon from '@mui/icons-material/VerifiedUserOutlined'
5+
import GroupsOutlinedIcon from '@mui/icons-material/GroupsOutlined'
6+
import LinkOutlinedIcon from '@mui/icons-material/LinkOutlined'
7+
import BookmarkBorderOutlinedIcon from '@mui/icons-material/BookmarkBorderOutlined'
8+
import LockOutlinedIcon from '@mui/icons-material/LockOutlined'
9+
import BoltOutlinedIcon from '@mui/icons-material/BoltOutlined'
10+
import {
11+
sectionDescriptionStyles,
12+
featureTitleStyles,
13+
featureTextStyles
14+
} from './Styles/appStyles'
15+
16+
const JOB_SEEKER_FEATURES = [
17+
{
18+
display: 'Self-authored credentials',
19+
text: 'You own your professional story'
20+
},
21+
{
22+
display: 'Backed by proof',
23+
text: 'Upload evidence and get endorsements'
24+
},
25+
{
26+
display: 'Universally shareable',
27+
text: 'One credential, infinite opportunities'
28+
}
29+
]
30+
31+
export const JobSeekersSection: React.FC<{ showCreatedByLine?: boolean }> = ({ showCreatedByLine = false }) => {
32+
return (
33+
<Box
34+
sx={{
35+
maxWidth: '1400px',
36+
margin: '0 auto',
37+
padding: { xs: '30px 15px', md: '60px 30px' },
38+
display: 'flex',
39+
flexDirection: 'column',
40+
alignItems: 'center',
41+
backgroundColor: 'grey gradient',
42+
gap: '40px'
43+
}}
44+
>
45+
<Box sx={{ textAlign: 'center' }}>
46+
<Box
47+
sx={{
48+
backgroundColor: '#EEF5FF',
49+
color: '#1447E6',
50+
borderRadius: '100px',
51+
padding: '8px 16px',
52+
fontSize: '14px',
53+
fontWeight: 600,
54+
fontFamily: 'Inter',
55+
marginBottom: '16px',
56+
display: 'inline-block'
57+
}}
58+
>
59+
Why LinkedCreds?
60+
</Box>
61+
<Typography
62+
sx={{
63+
fontSize: '48px',
64+
fontWeight: 800,
65+
fontFamily: 'Poppins',
66+
color: '#101828',
67+
textAlign: 'center',
68+
lineHeight: '48px',
69+
marginBottom: '40px'
70+
}}
71+
variant='h2'
72+
>
73+
Perfect for Job Seekers
74+
</Typography>
75+
</Box>
76+
77+
<Box
78+
sx={{
79+
display: 'flex',
80+
flexDirection: { xs: 'column', md: 'row' },
81+
alignItems: 'center',
82+
justifyContent: 'space-between',
83+
gap: { xs: '40px', md: '80px' },
84+
width: '100%'
85+
}}
86+
>
87+
{/* Left Content */}
88+
<Box
89+
sx={{
90+
flex: 1,
91+
display: 'flex',
92+
flexDirection: 'column',
93+
gap: '24px',
94+
maxWidth: { md: '550px' }
95+
}}
96+
>
97+
<Box sx={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
98+
<Typography
99+
sx={{
100+
fontSize: { xs: '20px', md: '48px' },
101+
fontWeight: 'bold',
102+
fontFamily: 'Poppins',
103+
color: '#101828',
104+
lineHeight: '52px'
105+
}}
106+
>
107+
Built for the modern talent marketplace
108+
</Typography>
109+
{showCreatedByLine && (
110+
<Box sx={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
111+
<Box sx={{ width: '100%', height: '1px', backgroundColor: '#E5E7EB' }} />
112+
<Box sx={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
113+
<Box
114+
sx={{
115+
display: 'flex',
116+
alignItems: 'center',
117+
justifyContent: 'center',
118+
width: '18px',
119+
height: '18px',
120+
borderRadius: '50%',
121+
border: '1.5px solid #10B981',
122+
flexShrink: 0
123+
}}
124+
>
125+
<CheckIcon sx={{ color: '#10B981', fontSize: '14px', stroke: '#10B981', strokeWidth: 1 }} />
126+
</Box>
127+
<Typography sx={{ color: '#667085', fontSize: '13px', fontFamily: 'Inter' }}>
128+
Created by the <MuiLink href="https://www.uschamberfoundation.org/t3-innovation" target="_blank" rel="noopener noreferrer" sx={{ color: '#667085', textDecoration: 'underline', '&:hover': { color: '#344054' } }}>US Chamber of Commerce Foundation T3 Innovation Network</MuiLink>
129+
</Typography>
130+
</Box>
131+
</Box>
132+
)}
133+
</Box>
134+
<Typography
135+
sx={sectionDescriptionStyles}
136+
>
137+
In a world where trust matters, LinkedCreds provides a way for people from all walks of life to document
138+
skills and collect the verification needed to showcase their true potential.
139+
</Typography>
140+
<Box sx={{ display: 'flex', flexDirection: 'column', gap: '16px', mt: 1 }}>
141+
{JOB_SEEKER_FEATURES.map((feature, index) => (
142+
<Box key={index} sx={{ display: 'flex', alignItems: 'flex-start', gap: '16px' }}>
143+
<CheckIcon
144+
sx={{
145+
color: '#10B981',
146+
width: '24px',
147+
height: '24px',
148+
flexShrink: 0,
149+
backgroundColor: '#ECFDF5',
150+
borderRadius: '50%',
151+
padding: '4px'
152+
}}
153+
/>
154+
<Box sx={{ display: 'flex', flexDirection: 'column' }}>
155+
<Typography
156+
sx={featureTitleStyles}
157+
>
158+
{feature.display}
159+
</Typography>
160+
<Typography
161+
sx={featureTextStyles}
162+
>
163+
{feature.text}
164+
</Typography>
165+
</Box>
166+
</Box>
167+
))}
168+
</Box>
169+
</Box>
170+
171+
{/* Right Content - Image */}
172+
<Box
173+
component='img'
174+
src='/images/desk.png'
175+
alt='Job seeker working at a desk'
176+
sx={{
177+
flex: 1,
178+
width: '100%',
179+
maxWidth: '666px',
180+
borderRadius: '16px',
181+
boxShadow: '0px 20px 40px -10px rgba(0, 0, 0, 0.15)',
182+
objectFit: 'cover'
183+
}}
184+
/>
185+
</Box>
186+
</Box>
187+
)
188+
}
189+
190+
const FEATURES_LIST = [
191+
{
192+
icon: VerifiedUserOutlinedIcon,
193+
title: 'Verifiable & Trustworthy',
194+
description:
195+
'All credentials are cryptographically signed and tamper-proof, ensuring authenticity.',
196+
iconBg: '#DBEAFE', // Light Blue
197+
iconColor: '#2563EB' // Blue
198+
},
199+
{
200+
icon: GroupsOutlinedIcon,
201+
title: 'Peer Recommendations',
202+
description:
203+
'Request endorsements from colleagues, mentors, and managers to validate your skills.',
204+
iconBg: '#DBEAFE', // Indigo tint
205+
iconColor: '#2563EB' // Indigo
206+
},
207+
{
208+
icon: LinkOutlinedIcon,
209+
title: 'Easy Integration',
210+
description:
211+
'Seamlessly share credentials on LinkedIn, resumes, and professional portfolios.',
212+
iconBg: '#DBEAFE',
213+
iconColor: '#2563EB'
214+
},
215+
{
216+
icon: BookmarkBorderOutlinedIcon,
217+
title: 'Comprehensive Portfolio',
218+
description:
219+
'Document all your achievements, from formal education to informal learning experiences.',
220+
iconBg: '#DBEAFE',
221+
iconColor: '#2563EB'
222+
},
223+
{
224+
icon: LockOutlinedIcon,
225+
title: 'Privacy Control',
226+
description:
227+
'You decide what to share and with whom. Keep full control of your credentials.',
228+
iconBg: '#DBEAFE',
229+
iconColor: '#2563EB'
230+
},
231+
{
232+
icon: BoltOutlinedIcon,
233+
title: 'Instant Verification',
234+
description:
235+
'Employers can verify your credentials instantly without lengthy background checks.',
236+
iconBg: '#E0F2FE',
237+
iconColor: '#2563EB'
238+
}
239+
]
240+
241+
export const FeaturesGridSection: React.FC = () => {
242+
return (
243+
<Box
244+
sx={{
245+
maxWidth: '1400px',
246+
margin: '0 auto',
247+
padding: { xs: '30px 15px', md: '60px 30px' },
248+
display: 'grid',
249+
gridTemplateColumns: {
250+
xs: '1fr',
251+
md: 'repeat(2, 1fr)',
252+
lg: 'repeat(3, 1fr)'
253+
},
254+
gap: '24px'
255+
}}
256+
>
257+
{FEATURES_LIST.map((feature, index) => {
258+
const IconComponent = feature.icon
259+
return (
260+
<Box
261+
key={index}
262+
sx={{
263+
backgroundColor: '#FFFFFF',
264+
border: '1px solid #EAECF0',
265+
borderRadius: '16px',
266+
padding: '24px',
267+
display: 'flex',
268+
flexDirection: 'column',
269+
alignItems: 'flex-start',
270+
gap: '20px',
271+
boxShadow: '0px 1px 2px rgba(16, 24, 40, 0.05)',
272+
transition: 'all 0.3s ease',
273+
'&:hover': {
274+
transform: 'translateY(-4px)',
275+
boxShadow: '0px 12px 16px -4px rgba(16, 24, 40, 0.08)'
276+
}
277+
}}
278+
>
279+
<Box
280+
sx={{
281+
width: '48px',
282+
height: '48px',
283+
borderRadius: '8px',
284+
backgroundColor: feature.iconBg,
285+
display: 'flex',
286+
alignItems: 'center',
287+
justifyContent: 'center',
288+
color: feature.iconColor
289+
}}
290+
>
291+
<IconComponent sx={{ fontSize: '24px' }} />
292+
</Box>
293+
<Box>
294+
<Typography
295+
sx={{
296+
fontSize: '20px',
297+
fontWeight: 600,
298+
color: '#101828',
299+
fontFamily: 'Inter',
300+
marginBottom: '8px'
301+
}}
302+
>
303+
{feature.title}
304+
</Typography>
305+
<Typography
306+
sx={{
307+
fontSize: '16px',
308+
color: '#475467',
309+
fontFamily: 'Inter',
310+
lineHeight: '24px'
311+
}}
312+
>
313+
{feature.description}
314+
</Typography>
315+
</Box>
316+
</Box>
317+
)
318+
})}
319+
</Box>
320+
)
321+
}

0 commit comments

Comments
 (0)