fix : Removing The Image from signup page section and making it responsive

[Rahilsiddique]

Notes for Reviewers

This PR fixes #
#39

Signed commits

• Yes, I signed my commits.

[netlify]

✅ Deploy Preview for meshery-play ready!

Name	Link
🔨 Latest commit	d9531fb
🔍 Latest deploy log	https://app.netlify.com/sites/meshery-play/deploys/63a29c929fbbff000982a44d
😎 Deploy Preview	https://deploy-preview-43--meshery-play.netlify.app/
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[Nikhil-Ladha]

Update the Discuss Callout CSS to use margin instead of padding. Also, increase the top margin by 2rem for wider views.
And, the callout is getting hidden in smaller device width. That shouldn't be happening. Instead, it should come up after the form and above the community callout.

[Nikhil-Ladha]

Also, please update the PR name to something more sensible. And, follow the same for future PRs.

[Rahilsiddique]

• hey @Nikhil-Ladha , so all the changes requested by are done in the latest pr, padding is converted into margin at concerned places.
• for DicussCallout, it was initially was in child div adjescent to signup form so when the website viewed on smaller devices it (DicussCallout) was comming before singup form.
• To solve this issue, in my latest pr I have used the current width of the screen using using window.innerWidth and whenever the size is smaller than 1024px it will render the respective component at desired place using conditionaling rendering

this is my current implimentation if you have any thing to add orr want anykind of change on this please let me know and thankyou for your time.

[Nikhil-Ladha]

I think we can handle this configuration using CSS itself, no need to use hooks here.
Just make all 3 divs under 1 parent div, and add a flex-wrap: wrap to the parent div, which would make the 3rd div (the Discuss Callout) come wrapped up and show at the bottom. Then, apply a position: relative and top: -(some magic number) and position it below the text up to 1024px or more. And, then after that update the CSS to top:0 for the Callout to make it move to the bottom.
Also, remove the console.log functions.

[Rahilsiddique]

hey @Nikhil-Ladha, this is the final set of changes I have removed hooks and used position relative to adjust it in smaller devices and positioned it accordingly.
have a look and let me know what you think, Thanks !!

[Nikhil-Ladha]

Looks good!