const mapImage = (url) => `https://ipfs.near.social/ipfs/${url}`; const image = "bafkreiej5x7dhlryiqpunbvumpqs2txmmwjb2mwtjeza6sm4svx3c3xq4m"; const Container = styled.div` display: flex; flex-direction: column; align-items: center; gap: 1.75rem; flex: 1 0 0; width: 100%; padding: 5.0625rem 0rem 4.5rem 0rem; border-radius: 1.5rem; background: var(--background-light, #fafafa); & > h2 { color: var(--ui-elements-dark, #11181c); text-align: center; font-family: FK Grotesk; font-size: 2.25rem; font-style: normal; font-weight: 700; line-height: 2.875rem; /* 127.778% */ letter-spacing: 0.0225rem; padding: 0 3rem; } & > p { color: var(--background-dark, #3a3f42); text-align: center; font-family: "Mona Sans"; font-size: 1.25rem; font-style: normal; font-weight: 400; line-height: 160%; /* 2rem */ padding: 0 3rem; } `; const Row = styled.div` display: flex; width: 100%; flex-direction: column; align-items: flex-start; gap: 0.625rem; overflow-x: scroll; scrollbar-width: none; & > div { display: flex; padding: 0rem 2rem; align-items: stretch; justify-content: flex-start; gap: 1.625rem; } `; const Card = styled.div` display: flex; width: 18.75rem; padding: 1.5rem 2rem 2rem 2rem; flex-direction: column; align-items: center; gap: 1.9375rem; border-radius: 1rem; background: #fff; height: 100%; & > div { display: flex; flex-direction: column; align-items: center; gap: 0.625rem; width: 100%; & > h6 { color: var(--ui-elements-black, #000); text-align: center; font-family: Inter; font-size: 1.1875rem; font-style: normal; font-weight: 700; line-height: normal; } & > ul { display: flex; flex-direction: column; align-items: flex-start; gap: 0.6875rem; padding: 0.625rem; & > li { list-style: none; display: flex; align-items: center; gap: 0.9375rem; width: 100%; color: var(--background-dark, #3a3f42); font-family: FK Grotesk; font-size: 1rem; font-style: normal; font-weight: 400; line-height: 160%; /* 1.6rem */ } } } `; const Check = ( <svg xmlns="http://www.w3.org/2000/svg" width="24" height="25" viewBox="0 0 24 25" fill="none" > <rect y="0.71875" width="24" height="24" rx="12" fill="#D1FADF" /> <path fill-rule="evenodd" clip-rule="evenodd" d="M17.0964 8.10879L9.93638 15.0188L8.03638 12.9888C7.68638 12.6588 7.13638 12.6388 6.73638 12.9188C6.34638 13.2088 6.23638 13.7188 6.47638 14.1288L8.72638 17.7888C8.94638 18.1288 9.32638 18.3388 9.75638 18.3388C10.1664 18.3388 10.5564 18.1288 10.7764 17.7888C11.1364 17.3188 18.0064 9.12879 18.0064 9.12879C18.9064 8.20879 17.8164 7.39879 17.0964 8.09879V8.10879Z" fill="#04A46E" /> </svg> ); const Separator = styled("Separator.Root")` width: 100%; height: 1px; background: var(--ui-elements-gray, #eceef0); `; const cards = [ { heading: "Week 1", items: [ "Cohort onboarding & welcome", "Signature session / Fireside chat", "Cohort social meetup", "Mentorship kickoff & introductions", "Weekly product audit", ], }, { heading: "Week 1", items: [ "Cohort onboarding & welcome", "Signature session / Fireside chat", "Cohort social meetup", "Mentorship kickoff & introductions", "Weekly product audit", ], }, { heading: "Week 1", items: [ "Cohort onboarding & welcome", "Signature session / Fireside chat", "Cohort social meetup", "Mentorship kickoff & introductions", "Weekly product audit", ], }, { heading: "Week 1", items: [ "Cohort onboarding & welcome", "Signature session / Fireside chat", "Cohort social meetup", "Mentorship kickoff & introductions", "Weekly product audit", ], }, { heading: "Week 1", items: [ "Cohort onboarding & welcome", "Signature session / Fireside chat", "Cohort social meetup", "Mentorship kickoff & introductions", "Weekly product audit", ], }, { heading: "Week 1", items: [ "Cohort onboarding & welcome", "Signature session / Fireside chat", "Cohort social meetup", "Mentorship kickoff & introductions", "Weekly product audit", ], }, { heading: "Week 1", items: [ "Cohort onboarding & welcome", "Signature session / Fireside chat", "Cohort social meetup", "Mentorship kickoff & introductions", "Weekly product audit", ], }, { heading: "Week 8", items: [ "Cohort onboarding & welcome", "Signature session / Fireside chat", "Cohort social meetup", "Mentorship kickoff & introductions", "Weekly product audit", ], }, { heading: "Week 1", items: [ "Cohort onboarding & welcome", "Signature session / Fireside chat", "Cohort social meetup", "Mentorship kickoff & introductions", "Weekly product audit", ], }, { heading: "Week 1", items: [ "Cohort onboarding & welcome", "Signature session / Fireside chat", "Cohort social meetup", "Mentorship kickoff & introductions", "Weekly product audit", ], }, { heading: "Week 1", items: [ "Cohort onboarding & welcome", "Signature session / Fireside chat", "Cohort social meetup", "Mentorship kickoff & introductions", "Weekly product audit", ], }, { heading: "Week 12", items: [ "Cohort onboarding & welcome", "Signature session / Fireside chat", "Cohort social meetup", "Mentorship kickoff & introductions", "Weekly product audit", ], }, ].map(({ heading, items }) => ( <Card key={heading}> <div> <h6>{heading}</h6> <ul> {items.reduce((items, item) => { if (items.length === 0) { return [ <li key={item}> {Check} {item} </li>, ]; } items.push(<Separator />); items.push( <li key={item}> {Check} {item} </li> ); return items; }, [])} </ul> </div> </Card> )); return ( <Container> <h2>HZN Cohort Structure</h2> <p> In HZN1, the cohort experience is crafted to provide flexibility alongside immersive learning. These sessions are designed to cover the spectrum of project needs - from tech know-how to fundraising strategies, leadership skills, and more. The schedule allows for a global participation, accommodating different time zones and work schedules. </p> <Row> <div>{cards}</div> </Row> </Container> );