I use the sendinblue API. Emails will be collected for image generation, and a blog subscribe form.

Currently, the upload a local file feature requires you to click the box to open file explorer. Please make it so you can also drag an image to this area to upload...

In /tool.js, the "quality" and "file" buttons should have an onClick that gives a "Coming soon!" alert, just like the generate portrait button.

Currently, inside /tool.js, there is a p tag that says "drag and drop an image here to upload automatically". This is good for desktop views, but it should say "upload an image from your device storage" on mobile devices.

Please add this as a new paragraph tag, and add block and hidden to show each respectively. I have attached a screenshot exactly how it should be.

Currently, you have to upload a photo in the UI. Make a spot for taking one now.

Currently, there is just an icon. Hovering it should open a modal to share the entire tool on social media.

Clicking the upload a photo should open up the device camera to take a picture, then store the photo in memory channel layer. Currently, both buttons open file explorer.

Either use built in .filter function, or use some npm packages to do the filter effect, then return the new photo to download when the user clicks "generate".

Inside /tool.js, there is currently a handleQuality and handleFileType function. Please import useState, and create a state value for these instead, so that they can controlled adaptively.

Create a component for the header button, main landing button, and then also the secondary landing button.

Clicking this option should open up the file explorer, and let the user upload an image to the in memory channel layer.

In /tool.js, the upload headers (h1 & h2) are currently text-3xl. Please add the class md:text-2xl to both headers, so that on mobile views they shrink to this size.

Create a function inside the /api directory to handle the file upload. Simply print out the file details to console for now.

Move the conversion logic and file downloads to the front end with css filter and link download

In /tool.js, the "quality" and "file" buttons should have type="button" on all 6 of them.

Add sitemap, seo keywords, and submit to search index

Contentful markdown blog CMS system.

Currently, the "take a picture" and "upload file" sections inside /tool.js are div elements. These need to be input elements with file type image. The onClick, and hover effects should stay.

in /tool.js, the sidebar icons do not fill on hover. This may require tailwind link to accomplish this. When the overall link component is hovered, fill should be applied to the icon.

Finish the landing page content, and make it mobile responsive

Each button in the /index.js and /tool.js should have an appropriate aria-label prop.