@@ -10,25 +10,35 @@ import upperLineIcon from "@/public/svgs/upper-line-icon.svg";
1010import lowerLineIcon from "@/public/svgs/lower-line-icon.svg" ;
1111import { LanguageCode } from "@/config" ;
1212import useTranslations from "@/hooks/useTranslations" ;
13+ import DottedLines from "@/components/svgs/Line" ;
14+ import DottedLinesMobile from "@/components/svgs/LineMobile" ;
1315
14- const About = ( { languageCode = LanguageCode . en } : { languageCode ?: LanguageCode } ) => {
16+ const About = ( {
17+ languageCode = LanguageCode . en ,
18+ } : {
19+ languageCode ?: LanguageCode ;
20+ } ) => {
1521 const t = useTranslations ( languageCode ) ;
1622 return (
17- < main className = 'flex flex-col items-center justify-center w-full' >
18- < Wrapper className = 'text-black flex flex-col max-sm:px-3' >
19- < div className = 'text-center py-10 md:py-[104px] flex flex-col items-center justify-center' >
20- < h1 className = 'text-[40px] leading-[48px] font-medium md:text-6xl 2xl:text-7xl' > { t ( `about.title` ) } </ h1 >
21- < p className = 'text-base md:text-xl 2xl:text-2xl 2xl:leading-[33.84px] md:max-w-[1050px] max-w-[1195px] pt-10 md:pt-12 2xl:pt-14 text-center w-full' >
23+ < main className = "flex flex-col items-center justify-center w-full" >
24+ < Wrapper className = "text-black flex flex-col max-sm:px-3" >
25+ < div className = "text-center py-10 md:py-[104px] flex flex-col items-center justify-center" >
26+ < h1 className = "text-[40px] leading-[48px] font-medium md:text-6xl 2xl:text-7xl" >
27+ { t ( `about.title` ) }
28+ </ h1 >
29+ < p className = "text-base md:text-xl 2xl:text-2xl 2xl:leading-[33.84px] md:max-w-[1050px] max-w-[1195px] pt-10 md:pt-12 2xl:pt-14 text-center w-full" >
2230 { t ( `about.description` ) }
2331 </ p >
2432 </ div >
2533 </ Wrapper >
2634
27- < div className = 'bg-gray-custom-900 w-full' >
28- < Wrapper className = 'py-16 md:py-[104px] flex flex-col md:flex-row items-center justify-between gap-10 md:gap-8 lg:gap-[52px] max-sm:px-3' >
29- < section className = 'max-w-full md:max-w-[50%]' >
30- < h1 className = 'text-[40px] text-center md:text-start leading-[48px] font-medium md:text-5xl 2xl:text-6xl' > { t ( `about.history.title` ) } </ h1 >
31- < p className = 'text-base lg:text-xl 2xl:text-2xl 2xl:leading-[33.84px] pt-10 md:pt-6 max-w-[738px]' >
35+ < div className = "bg-gray-custom-900 w-full" >
36+ < Wrapper className = "py-16 md:py-[104px] flex flex-col md:flex-row items-center justify-between gap-10 md:gap-8 lg:gap-[52px] max-sm:px-3" >
37+ < section className = "max-w-full md:max-w-[50%]" >
38+ < h1 className = "text-[40px] text-center md:text-start leading-[48px] font-medium md:text-5xl 2xl:text-6xl" >
39+ { t ( `about.history.title` ) }
40+ </ h1 >
41+ < p className = "text-base lg:text-xl 2xl:text-2xl 2xl:leading-[33.84px] pt-10 md:pt-6 max-w-[738px]" >
3242 { t ( `about.history.content-1` ) }
3343 < br />
3444 < br />
@@ -39,42 +49,77 @@ const About = ({languageCode = LanguageCode.en }: {languageCode?: LanguageCode})
3949 </ p >
4050 </ section >
4151
42- < section className = 'w-full rounded-[20px] max-md:rounded-[10px] overflow-hidden grow max-w-[50%] max-h-[587px] max-md:max-w-full max-md:max-h-[500px] max-[400px]:max-h-[261px]' >
43- < video src = '/clips/bryan-typing-video.mp4' autoPlay loop muted playsInline className = 'w-full h-full object-cover' />
52+ < section className = "w-full rounded-[20px] max-md:rounded-[10px] overflow-hidden grow max-w-[50%] max-h-[587px] max-md:max-w-full max-md:max-h-[500px] max-[400px]:max-h-[261px]" >
53+ < video
54+ src = "/clips/bryan-typing-video.mp4"
55+ autoPlay
56+ loop
57+ muted
58+ playsInline
59+ className = "w-full h-full object-cover"
60+ />
4461 </ section >
4562 </ Wrapper >
4663 </ div >
4764
48- < div className = 'w-full relative' >
49- < div className = 'absolute top-0 right-0 left-0 w-full -z-10' >
50- < Image src = { upperLineIcon } alt = 'upper line icon' className = ' w-full' />
65+ < div className = "w-full relative" >
66+ < div className = "absolute top-0 right-0 left-0 w-full -z-10" >
67+ < Image
68+ src = { upperLineIcon }
69+ alt = "upper line icon"
70+ className = " w-full"
71+ />
5172 </ div >
5273
53- < Wrapper className = 'flex flex-col gap-6 max-sm:px-3 py-10 md:py-[104px] max-w-[1345px]' >
54- < div className = 'text-center pb-10 md:pb-16 flex flex-col items-center justify-center' >
55- < h1 className = 'text-[40px] leading-[48px] font-medium md:text-6xl 2xl:text-7xl' > { t ( `about.process.title` ) } </ h1 >
56- < p className = 'text-base md:text-xl 2xl:text-2xl 2xl:leading-[33.84px] md:max-w-[1050px] max-w-[1195px] pt-10 md:pt-12 2xl:pt-14' >
74+ < Wrapper className = "flex flex-col gap-6 max-sm:px-3 py-10 md:py-[104px] max-w-[1345px]" >
75+ < div className = "text-center pb-10 md:pb-16 flex flex-col items-center justify-center" >
76+ < h1 className = "text-[40px] leading-[48px] font-medium md:text-6xl 2xl:text-7xl" >
77+ { t ( `about.process.title` ) }
78+ </ h1 >
79+ < p className = "text-base md:text-xl 2xl:text-2xl 2xl:leading-[33.84px] md:max-w-[1050px] max-w-[1195px] pt-10 md:pt-12 2xl:pt-14" >
5780 { t ( `about.process.description` ) }
5881 </ p >
5982 </ div >
6083
61- < div className = 'flex flex-col gap-10 md:gap-20 relative' >
62- { processFlowData . map ( ( { id, image, bgColor} ) => (
63- < div key = { id } className = 'flex flex-row items-center gap-4 sm:gap-[31px]' >
84+ < div className = "flex flex-col gap-10 md:gap-20 relative overflow-y-hidden overflow-x-hidden" >
85+ < div className = "hidden md:flex min-w-24 h-24 md:min-w-[184px] md:h-[184px] absolute justify-center" >
86+ < DottedLines className = "z-0" />
87+ </ div >
88+ < div className = "flex md:hidden min-w-24 h-24 md:min-w-[184px] md:h-[184px] absolute justify-center" >
89+ < DottedLinesMobile className = "z-0" />
90+ </ div >
91+
92+ { processFlowData . map ( ( { id, image, bgColor } ) => (
93+ < div
94+ key = { id }
95+ className = "flex flex-row z-10 items-center gap-4 sm:gap-[31px]"
96+ >
6497 < section
65- className = { `bg-[ ${ bgColor } ] flex items-center justify-center min-w-24 h-24 md:min-w-[184px] md:h-[184px] rounded-2xl` }
98+ className = { `flex items-center justify-center min-w-24 h-24 md:min-w-[184px] md:h-[184px] rounded-2xl` }
6699 style = { { backgroundColor : bgColor } }
67100 >
68- < Image src = { image } alt = { id } width = { 64 } height = { 64 } className = 'w-7 md:w-16 h-7 md:h-16' />
101+ < Image
102+ src = { image }
103+ alt = { id }
104+ width = { 64 }
105+ height = { 64 }
106+ className = "w-7 md:w-16 h-7 md:h-16"
107+ />
69108 </ section >
70109
71110 < section >
72- < p className = 'text-lg md:text-2xl font-medium whitespace-nowrap' > { t ( `about.process.${ id } .title` ) } </ p >
73- < p className = 'text-sm md:text-xl pt-1 sm:pt-3 lg:pt-[31px]' >
111+ < p className = "text-lg md:text-2xl font-medium whitespace-nowrap" >
112+ { t ( `about.process.${ id } .title` ) }
113+ </ p >
114+ < p className = "text-sm md:text-xl pt-1 sm:pt-3 lg:pt-[31px]" >
74115 { t ( `about.process.${ id } .content` ) } { " " }
75116 { id === "review" ? (
76117 < span >
77- < Link href = 'https://review.btctranscripts.com/' target = '_blank' className = 'underline text-orange-custom-100' >
118+ < Link
119+ href = "https://review.btctranscripts.com/"
120+ target = "_blank"
121+ className = "underline text-orange-custom-100"
122+ >
78123 { t ( `about.process.cta` ) }
79124 </ Link >
80125 </ span >
@@ -86,13 +131,17 @@ const About = ({languageCode = LanguageCode.en }: {languageCode?: LanguageCode})
86131 </ div >
87132 </ Wrapper >
88133
89- < div className = 'absolute bottom-0 right-0 left-0 w-full -z-10' >
90- < Image src = { lowerLineIcon } alt = 'lower line icon' className = ' w-full' />
134+ < div className = "absolute bottom-0 right-0 left-0 w-full -z-10" >
135+ < Image
136+ src = { lowerLineIcon }
137+ alt = "lower line icon"
138+ className = " w-full"
139+ />
91140 </ div >
92141 </ div >
93142
94143 < div >
95- < Wrapper className = ' flex flex-col gap-16 md:gap-[72px] max-sm:px-3 py-10 md:py-[104px]' >
144+ < Wrapper className = " flex flex-col gap-16 md:gap-[72px] max-sm:px-3 py-10 md:py-[104px]" >
96145 { /* <GroupedImageSection
97146 title='Editors'
98147 subText='Editors evaluate and finalize Reviewers submissions, ensuring they’re consistently high quality.'
@@ -104,7 +153,7 @@ const About = ({languageCode = LanguageCode.en }: {languageCode?: LanguageCode})
104153 subText = { t ( "about.reviewers.description" ) ! }
105154 data = { reviewers }
106155 buttonText = { t ( "about.reviewers.cta" ) ! }
107- href = ' https://review.btctranscripts.com'
156+ href = " https://review.btctranscripts.com"
108157 />
109158 { /* <GroupedImageSection
110159 title='Curators'
@@ -134,27 +183,31 @@ const GroupedImageSection = ({
134183 buttonText ?: string ;
135184} ) => {
136185 return (
137- < div className = 'text-center' >
138- < h1 className = 'text-[40px] leading-[48px] font-medium md:text-6xl 2xl:text-7xl' > { title } </ h1 >
139- < p className = 'text-base md:text-xl 2xl:text-2xl 2xl:leading-[33.84px] md:max-w-[1050px] max-w-[1195px] pt-4 md:pt-6' > { subText } </ p >
186+ < div className = "text-center" >
187+ < h1 className = "text-[40px] leading-[48px] font-medium md:text-6xl 2xl:text-7xl" >
188+ { title }
189+ </ h1 >
190+ < p className = "text-base md:text-xl 2xl:text-2xl 2xl:leading-[33.84px] md:max-w-[1050px] max-w-[1195px] pt-4 md:pt-6" >
191+ { subText }
192+ </ p >
140193
141- < div className = ' flex items-center justify-center pt-8 md:pt-14' >
142- < div className = ' flex gap-5 md:gap-5 max-w-[1060px] flex-wrap justify-center' >
194+ < div className = " flex items-center justify-center pt-8 md:pt-14" >
195+ < div className = " flex gap-5 md:gap-5 max-w-[1060px] flex-wrap justify-center" >
143196 { Object . values ( data ) . map ( ( { title, image } ) => (
144197 < Link
145198 href = { `https://github.com/${ title } ` }
146199 key = { title }
147- target = ' _blank'
148- className = ' flex flex-col items-center justify-center w-[150px] md:w-[160px] max-[340px]:w-[130px] gap-2 md:px-[14px]'
200+ target = " _blank"
201+ className = " flex flex-col items-center justify-center w-[150px] md:w-[160px] max-[340px]:w-[130px] gap-2 md:px-[14px]"
149202 >
150203 < Image
151204 src = { image }
152205 alt = { title }
153206 width = { 132 }
154207 height = { 132 }
155- className = ' w-[100px] md:w-[132px] h-[100px] md:h-[132px] bg-black rounded-full border-[0.5px]'
208+ className = " w-[100px] md:w-[132px] h-[100px] md:h-[132px] bg-black rounded-full border-[0.5px]"
156209 />
157- < p className = ' text-custom-black-custom-400 text-sm leading-[22.12px] font-medium md:text-base md:font-semibold md:leading-[25.28px] whitespace-nowrap max-w-full text-nowrap overflow-hidden text-ellipsis' >
210+ < p className = " text-custom-black-custom-400 text-sm leading-[22.12px] font-medium md:text-base md:font-semibold md:leading-[25.28px] whitespace-nowrap max-w-full text-nowrap overflow-hidden text-ellipsis" >
158211 { title }
159212 </ p >
160213 </ Link >
@@ -163,11 +216,11 @@ const GroupedImageSection = ({
163216 </ div >
164217
165218 { buttonText && href ? (
166- < div className = ' pt-4 md:pt-6 flex justify-center' >
219+ < div className = " pt-4 md:pt-6 flex justify-center" >
167220 < Link
168221 href = { href }
169- target = ' _blank'
170- className = ' text-base font-semibold md:text-lg flex items-center justify-center gap-1 rounded-full bg-orange-custom-100 text-white py-[17px] px-[34px] md:py-6 md:px-16'
222+ target = " _blank"
223+ className = " text-base font-semibold md:text-lg flex items-center justify-center gap-1 rounded-full bg-orange-custom-100 text-white py-[17px] px-[34px] md:py-6 md:px-16"
171224 >
172225 { buttonText }
173226 < ArrowLinkRight />
@@ -178,4 +231,4 @@ const GroupedImageSection = ({
178231 ) ;
179232} ;
180233
181- export default About ;
234+ export default About ;
0 commit comments