UI Refactor + Figma Design (Needed)

[gokulprathin8]

What is the PR about?

Improvements to the user interface, focusing primarily on CSS changes to enhance the visual appeal and usability of Geoweaver. This includes overall application level refactor to CSS.

What should be done?

• [ ] Each page should have component / page level CSS that should be ONLY scoped to that file. So we have a page level css and a global level css
• [ ] Use of standard styles and stardazing desgin system for Geoweaver. A better way would be to use TailwindCSS (https://tailwindcss.com/)
• [ ] All the element should be designed in a minimal and clean way. No need to over engineer the entire design. Keep it simple.
• [ ] Font sizes, margins, paddings numbers should be standardized, try to use rem instead of px which scales with resolution on bigger displays
• [ ] No inline styling unless the styling is from a tailwind class. All styles should be moved to a seperate css file
• [ ] Remove unnecessary comments

Design System

• All text should use the color #050505
• All important highlights should use #004FFF (this also the color that matches geoweaver logo)
• Secondary color should use #31AFD4
• Buttons and Clickable objects should be #902D41 as the color
• Announcements / Objects that need attention should be using the color #FF007F

Need to Figma Design

Design Infomation Before we proceed with this design we need a design layout that is accpeted by everyone in the team. We can use Figma or any popular design tool to make our design and proceed to write code ONLY after we finalize on the final design.

Expected Outcome

Clean & Premium User Experience for everyone who uses geoweaver. Make it easy on the eyes to attract more people.

[gokulprathin8]

Please work on design ideas here @ https://www.figma.com/file/0obPALcYCcYqt5G1fQ6ll0/Geoweaver-Design?type=design&node-id=0%3A1&mode=design&t=COazypuW2aoeuOeD-1

@manasa123104