1- import React from ' react'
1+ import React from " react" ;
22
33const Sponsors = ( ) => {
4- return (
5- < section className = "flex flex-col min-h-screen py-8 px-24 relative" >
6- < div >
7- < p className = "text-[#3977F8] font-game text-xl" > 04</ p >
8- < h2 className = "font-bold text-7xl" > SUPPORT CSESOC</ h2 >
9- </ div >
10- < div className = "flex-1 flex justify-center items-center" >
11- < div style = { { backgroundImage :'radial-gradient(50% 50% at 50% 50%, rgba(235, 1, 255, 0.6) 0%, rgba(121, 73, 255, 0.6) 48.96%, rgba(57, 119, 248, 0.6) 100%)' } } className = "overflow-hidden rounded-[4rem] h-[35rem] w-[90rem] grid grid-cols-10 grid-row-2" >
12- < div className = "flex flex-col justify-center items-center col-span-4 row-start-1 row-end-3" >
13- < div className = "max-w-[19.5rem] flex flex-col justify-center items-center" >
14- < h2 className = "text-5xl font-black" > Our sponsors</ h2 >
15- < p style = { { fontSize :'1.65rem' , lineHeight :'2.1rem' } } className = "my-16" > Check out our very cool sponsors.</ p >
16- < button style = { { backgroundColor :'#FFFFFF' , border :'1px solid #A7A6E5' , color :'#3977F8' } } className = "text-2xl rounded-xl w-[100%] h-16" > View our sponsors</ button >
17- </ div >
18- </ div >
19- < div style = { { backgroundColor :'rgba(0, 71, 255, 0.33)' } } className = "flex justify-center items-center col-span-3 row-start-1 row-end-2" > < img src = "assets/atlassian_logo.svg" alt = "Atlassian logo" /> </ div >
20- < div style = { { backgroundColor :'rgba(82, 130, 255, 0.47)' } } className = "flex justify-center items-center col-span-3 row-start-1 row-end-2" > < img src = "assets/google_logo.svg" alt = "Google logo" /> </ div >
21- < div style = { { backgroundColor :'rgba(48, 93, 255, 0.2)' } } className = "flex justify-center items-center col-span-3 row-start-2 row-end-3" > < img src = "assets/freelancer_logo.svg" alt = "Freelancer logo" /> </ div >
22- < div style = { { backgroundColor :'rgba(122, 137, 236, 0.27)' } } className = "flex justify-center items-center col-span-3 row-start-2 row-end-3" > < img src = "assets/microsoft_logo.svg" alt = "Microsoft logo" /> </ div >
23- </ div >
24- </ div >
25- < div className = "flex justify-between" >
26- < img src = "assets/csesoc_logo_white.svg" alt = "CSESoc Logo" />
27- < div className = "flex flex-col max-w-[14rem]" >
28- < p className = "mb-6" > B03 CSE Building K17, UNSW csesoc@csesoc.org.au</ p >
29- < p > © 2021 — CSESoc UNSW</ p >
30- </ div >
4+ const firstRowBoxesStyling = "xl:p-16 p-10 flex justify-center items-center xl:col-span-3 sm:col-span-5 col-span-10 xl:row-start-1 xl:row-end-2 sm:row-start-3 sm:row-end-4 sm:h-auto h-36" ;
5+ const secondRowBoxesStyling = "xl:p-16 p-10 flex justify-center items-center xl:col-span-3 sm:col-span-5 col-span-10 xl:row-start-2 xl:row-end-3 sm:row-start-4 sm:row-end-5 sm:h-auto h-36" ;
6+
7+ return (
8+ < section className = "flex flex-col min-h-screen py-8 xl:px-24 sm:px-10 px-8 relative mt-20" >
9+ < div className = "text-center" >
10+ < p className = "text-[#3977F8] font-game text-xl" > 04</ p >
11+ < h2 className = "font-bold text-6xl" > SUPPORT CSESOC</ h2 >
12+ </ div >
13+ < div className = "flex-1 flex justify-center items-center my-20" >
14+ < div style = { { backgroundImage :"radial-gradient(50% 50% at 50% 50%, rgba(235, 1, 255, 0.6) 0%, rgba(121, 73, 255, 0.6) 48.96%, rgba(57, 119, 248, 0.6) 100%)" } } className = "overflow-hidden rounded-[4rem] w-[90rem] grid grid-cols-10 xl:grid-row-2 sm:grid-row-5" >
15+ < div className = "flex flex-col justify-center items-center xl:col-span-4 col-span-10 row-start-1 row-end-3 xl:my-0 my-12" >
16+ < div className = "max-w-[15rem]" >
17+ < h2 className = "text-4xl font-black" > Our sponsors</ h2 >
18+ < p className = "xl:my-10 my-3 text-lg" > Check out our very cool sponsors.</ p >
19+ < button className = "bg-white border text-[#3977F8] border-[#A7A6E5] text-lg rounded-xl w-[100%] xl:h-12 h-10" > View our sponsors</ button >
3120</ div >
32- < img src = "assets/sponsors_backdrop.svg" alt = "Sponsors backdrop" className = "absolute bottom-0 left-0 w-screen -z-10" />
33- </ section >
34- )
35- }
21+ </ div >
22+ < div className = { `${ firstRowBoxesStyling } } >
23+ < img src = "assets/atlassian_logo.svg" alt = "Atlassian logo" />
24+ </ div >
25+ < div className = { `${ firstRowBoxesStyling } } >
26+ < img src = "assets/google_logo.svg" alt = "Google logo" />
27+ </ div >
28+ < div className = { `${ secondRowBoxesStyling } } >
29+ < img src = "assets/freelancer_logo.svg" alt = "Freelancer logo" />
30+ </ div >
31+ < div className = { `${ secondRowBoxesStyling } } >
32+ < img src = "assets/microsoft_logo.svg" alt = "Microsoft logo" />
33+ </ div >
34+ </ div >
35+ </ div >
36+ < div className = "sm:flex justify-between" >
37+ < img src = "assets/csesoc_logo_white.svg" alt = "CSESoc Logo" />
38+ < div className = "flex flex-col max-w-[14rem] sm:mt-0 mt-10 font-light" >
39+ < p className = "mb-6" > B03 CSE Building K17, UNSW csesoc@csesoc.org.au</ p >
40+ < p > © 2021 — CSESoc UNSW</ p >
41+ </ div >
42+ </ div >
43+ < img src = "assets/sponsors_backdrop.svg" alt = "Sponsors backdrop" className = "absolute bottom-0 left-0 w-screen -z-10" />
44+ </ section >
45+ ) ;
46+ } ;
3647
37- export default Sponsors
48+ export default Sponsors ;