All solutions

I've had fun working on this one. I had some trouble setting up the error message without fetching the results. Either way the project was a great learning experience :)

Hey everybody! Thank you for reviewing my code and giving feedback. I've been cracking my head on the hook that i made in order to make it return daily/weekly/monthly values without explicitly stating with a if statements which timeframe i wanted, but after a few hours i chose the duplication of code way.

does anyone have an idea how i turn this: CardTimeFrames={{ current: c.timeframes.daily.current, previous: c.timeframes.daily.previous, }}

into this?

CardTimeFrames={{ current: c.timeframes.[// daily/weekly/monthly //].current, previous: c.timeframes.[// daily/weekly/monthly //].previous, }}

Thank you in advance!

I used this project to learn the basics of React and Chakra UI. This was a great experience because it was challenging to a point where i need to figure out how to use styles with chakra-UI and deal with the constraints of React. while it's not pure HTML and CSS it is simplify the process by emphasizing using components. although it was an introduction level of add functionality only on email validation, i got a lot of insight as to how React is implementing said methods, which i find a bit tricky at first but the more i practice with it the more fluide it will become. In conclusion this project was a great way to get a little bit more comfortable with React, which was my main focus.

I had to play around a lot with the images relative positioning which made for some clunky areas. There is 1 thing that i'm not sure of:

• after the rounded bottom of the hero section there is a change in background tone. I had to set the div after the hero section to relative and push the element up in order to cover the white canvas that was left after rounding the bottom edge.

here is my HTML:

Here is my CSS: /* Hero */ .block-hero { position: relative; height: 363px; overflow: hidden; }

.hero { padding: 0 1.6rem; }

.hero__heading { margin: 0 auto; margin-bottom: 4rem; color: white; text-align: center; }

.hero__btn { display: block; margin: 0 auto; width: 13rem; height: 5.5rem; }

.container-hero__image { background-color: var(--color-secondary); height: 100px; }

.hero__image { position: relative; max-width: 320px; margin: 0 auto; left: 3.6rem; top: -10rem; overflow: visible; }

.hero__bg-pattern-1, .hero__bg-pattern-2 { position: absolute; left: -50rem; }

@media screen and (min-width: 768px) { .block-hero { height: 421px; }

.hero__image { max-width: 515px; left: 15.1rem; top: -15rem; }

.hero__bg-pattern-1 { left: -23rem; top: -6rem; }

.hero__bg-pattern-2 { bottom: 10rem; left: 68rem; } }

@media screen and (min-width: 1024px) { .block-hero { height: 405px; }

.container-hero__image { height: 320px; }

.hero__image { max-width: 770px; top: -10rem }

.hero__bg-pattern-2 { left: 90rem; } }

@media screen and (min-width: 1440px) { .block-hero { height: 510px; }

.hero__image { max-width: 770px; left: 35rem; top: -20rem }

.hero__bg-pattern-1 { left: -13rem; top: -2rem; }

.hero__bg-pattern-2 { left: 131rem; } }

@media screen and (min-width: 1880px) { .hero__image { max-width: 770px; left: 60rem; top: -20rem }

.hero__bg-pattern-2 { left: 175rem; } }

/* Features */

.grid-feature { position: relative; margin: 0; z-index: -1; top: -15rem; padding: 15rem 0; }

.block-feature { margin: 0 auto; text-align: center; }

.feature__icon-container { border-radius: 50%; border: 1px solid #584D62; font-family: 'Fraunces', Arial, Helvetica, sans-serif; width: 4.8rem; height: 4.6rem; margin: 2.4rem auto; }

.feature__icon-container>span { display: block; margin-top: 0.5rem; }

.feature__icon, .feature__heading { color: var(--color-primary); }

.feature__heading { margin: 1.6rem auto; }

.feature__content { max-width: 343px; margin: 0 auto; }

@media screen and (min-width: 768px) { .grid-feature.block--secondary { height: 1500px; align-items: start; padding: 25rem 0; }

.block-feature { text-align: left; max-height: 108px; }

.feature__icon-container { position: relative; text-align: center; margin: 0; top: 11rem; }

.feature__heading, .feature__content { max-width: 493px; margin: 1.6rem 0; margin-left: 8rem; } }

@media screen and (min-width: 1024px) { .block-feature { text-align: center; max-height: fit-content; }

.grid-feature { position: relative; grid-auto-flow: column; top: -40rem; justify-content: center; align-content: end; gap: 3rem; max-height: 1100px; }

.feature__icon-container { position: static; margin: 2.4rem auto; }

.feature__heading, .feature__content { max-width: 354px; }

.feature__heading { margin: 1.6rem auto; }

.feature__content { margin: 0 auto; } }

@media screen and (min-width: 1440px) { .grid-feature { padding: 0 10rem; } }

/* Feature Block */

.feature { margin: 4rem auto; }

Feedback Welcome! Thank you everyone.