Svelte + Tailwind

My first approach to the curved pattern in the first two sections was to copy the patterns from the figma file and use picture + source + img to implement it. Then I thought it would be overkill and should there be a simpler way. I experimented clip path, it was too hard and I don't know if is worth to learn svg paths to use with the css path() function.

Then I remembered that border-radius 50% creates an ellipsis curve with rectangles (this is why tailwindcss implements rounded-full with border-radius: 99999px). I went to investigate that and only then I realised that border-radius can get two arguments. With that information I could figure out a solution using border-radius.