Add clickable buttons to the cup

[kevinmonisit]

this task..... lokey might be hard. i wonder how this would even work?

i think we would have to have a set of fixed dimensions for the cup for each breakpoint so that button placement is predictacble

[kevinmonisit]

Current implementation of the this fire component:

        <Image
          src="/landing/fire.png"
          width="0"
          height="0"
          sizes="100vw"
          alt="Fire"
          // https://stackoverflow.com/questions/69230343/nextjs-image-component-with-fixed-witdth-and-auto-height
          className="h-auto w-[790px] pl-8 md:w-[550px] lg:w-[650px]"
          priority
        />

Regarding TailwindCSS breakpoints and responsive design: https://tailwindcss.com/docs/responsive-design#working-mobile-first. (The "mobile-first" principle is just something I want to get across)

One implementation that comes to mind:

<div className="h-auto w-[790px] pl-8 md:w-[550px] lg:w-[650px] relative">
        <Button className="absolute top-[something] left-[something] md:top-[something] md:left-[something]"/>
        <Button className="absolute top-[something] left-[something] md:top-[something] md:left-[something]"/>

        <Image
          src="/landing/fire.png"
          width="0"
          height="0"
          sizes="100%"
          alt="Fire"
          // https://stackoverflow.com/questions/69230343/nextjs-image-component-with-fixed-witdth-and-auto-height
          priority
        />
</div>

When we give the image container (and therefore the image itself) fixed sizes, we can predictably place the buttons at each defined breakpoint.

Wrapping it in a container and setting the container to have relative positioning allows us to place the buttons with absolute positioning relative to the image container itself.

However, wouldn't it be better to have one single button called "Get Started"> and have it take the width of two buttons? I feel like that would make life easier. That way:

• On Mobile, the buttons are never too small
• On implementation, we don't need to figure out the positioning of two buttons

When the user tries to log in but they are not registered, there is a button to switch the login page to a user registration page. Something like this:

But I'm just yapping. Two buttons is fine as well.

[kevinmonisit]

also. i forgot to mention. i think, instead of the image "growing" (shrinking or decreasing dynamically by change of browser width), i think there should be some FIXED width and height for every breakpoint. that way, the buttons don't need to /grow/ or /shrink/ alongside with the cup.

might save some headaches?