update style and links

Author: amit9838

README.md

@@ -4,28 +4,30 @@
 
 <p>Weather at a Glance</p>
 
-
 <a href = "https://github.com/amit9838/mousam/releases"><img src="https://img.shields.io/github/v/release/amit9838/mousam?style=flat&label=Latest+Release&color=%234a92ff"></a>
 <a href = "https://github.com/amit9838/mousam/discussions"><img alt="GitHub Discussions" src="https://img.shields.io/github/discussions/amit9838/mousam?logo=github&color=orange"></a>
+
 </div>
 <div align="center">
 <img src="https://raw.githubusercontent.com/amit9838/mousam/master/screenshots/ss5-overcast.png?raw=true#gh-dark-mode-only">
 <img src="https://raw.githubusercontent.com/amit9838/mousam/master/screenshots/ss4-light_mode.png?raw=true#gh-light-mode-only">
 </div>
 
 ## Features
-* Displays real-time temperature, humidity, wind speed, UV index, pressure and more
-* Utilizes graphical representations, such as temperature , precipitation graphs and wind-speed with direction to provide an hourly forecast for the next 24 hours
-* Also shows tomorrow and 7-day forcasts
-* See conditions in metric or imperial systems
+
+- Displays real-time temperature, humidity, wind speed, UV index, pressure and more
+- Utilizes graphical representations, such as temperature , precipitation graphs and wind-speed with direction to provide an hourly forecast for the next 24 hours
+- Also shows tomorrow and 7-day forcasts
+- See conditions in metric or imperial systems
 
 ## Installation
 
 ### **Flatpak:**
 
 <a href='https://flathub.org/apps/io.github.amit9838.mousam'><img width='240' alt='Download on Flathub' src='https://dl.flathub.org/assets/badges/flathub-badge-en.png'/></a>
 
-* Or you can use the terminal:
+- Or you can use the terminal:
+
 ```
 flatpak install flathub io.github.amit9838.mousam
 ```
@@ -34,53 +36,59 @@ flatpak install flathub io.github.amit9838.mousam
 
 <a href='https://snapcraft.io/mousam'><img width='240' alt='Download on SnapCraft' src='https://github.com/snapcore/snap-store-badges/blob/master/EN/%5BEN%5D-snap-store-black-uneditable.png?raw=true'/></a>
 
-* Or you can use the terminal:
+- Or you can use the terminal:
 
 ```
 sudo snap install mousam
 ```
+
 ### **Debian** (Unofficial)
+
 <a href='https://github.com/amit9838/mousam/discussions/68'><img width='240' alt='Download on SnapCraft' src='https://www.m5hosting.com/wp-content/uploads/2021/07/debian-dedicated-server.jpg' style="border-radius:5px; padding:3px 8px; background-color:white;"></a>
 
 Thanks to @hsbasu for maintaining Debian package
 
 [Installation Instruction](https://github.com/amit9838/mousam/discussions/68)
 
 ## Build
+
 ### Dependances
-* python3-requests
-* build-essential
-* meson
-  
+
+- python3-requests
+- build-essential
+- meson
+
 ### Build
+
 ```
 rm -rf builddir
 meson setup -Dprefix=$HOME/.local builddir
 meson compile -C builddir --verbose
 ```
 
 ### Install
+
 ```
 meson install -C builddir
 ```
+
 ### Run
+
 ```
 mousam
 ```
 
 ## Contribution
+
 Thanks to all the contributors have helped in the development project so that open-source community can enjoy best tools with best features.
- 
 
 <a href="https://github.com/amit9838/mousam/graphs/contributors">
 <img src="https://contrib.rocks/image?repo=amit9838/mousam&columns=10"/>
 </a>
 
-
-
-
 ## Credits
-- Thanks to [Open Meteo](https://open-meteo.com/) from providing weather data for free of cost. 
+
+- Thanks to [Open Meteo](https://open-meteo.com/) from providing weather data for free of cost.
 
 - Thanks to [@basmilius](https://github.com/basmilius) for making beautiful weather icons.
 
@@ -89,7 +97,8 @@ Thanks to all the contributors have helped in the development project so that op
 I hope you ❤️ <b>Mousam</b>, if you think it is worth supporting you can do so using below methods
 <br>
 <br>
-<a href="https://www.buymeacoffee.com/ami9838" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;" >
+<a href="https://www.buymeacoffee.com/ami9838">
+    <img src="https://img.buymeacoffee.com/button-api/?text=Buy me a coffee&emoji=☕&slug=ami9838&button_colour=FF5F5F&font_colour=ffffff&font_family=Comic&outline_colour=000000&coffee_colour=FFDD00" />
 </a>
 </div>
 <div align="center">

website/src/components/About.jsx

@@ -10,7 +10,7 @@ export default function About() {
         <h2 className="mx-2  my-2 text-2xl ">About</h2>
       </div>
       <div className="col-span-1 border-r-[1px] border-slate-400 md:block hidden"></div>
-      <div className="md:col-span-11 col-span-12 p-4 text-neutral-300 font-['ubuntu']">
+      <div className="md:col-span-11 col-span-12 p-4 text-neutral-300 font-sans max-w-[90%]">
         <p>
           Mousam is a sleek desktop-weather application offering real-time
           weather updates and forecasts for the next{" "}
@@ -30,25 +30,23 @@ export default function About() {
           <code className={code_style}>Open-Meteo API</code> , ensuring accurate
           and timely information.
         </p>
-
         <h4 className="text-neutral-200 mt-8 font-bold">About me</h4>
         <p className="my-1 ">
-          Hello, I'm Amit. I began this project as part of my journey in
-          learning Gtk with Python. It's exciting to see Mousam receiving
-          positive responses, which is really motivating for me. Throughout this
-          experience, I've gained valuable knowledge and continue to learn every
-          day.
+          I’m Amit, and I initiated this project as part of my ongoing
+          exploration of Gtk with Python. It’s great to see Mousam’s success and
+          positive feedback. It motivates me to keep working on the project.
         </p>
         <p>
-          I admire the collaborative nature of open source, where people can
-          freely interact, discuss cool ideas, and contribute to projects.
+          I commend the collaborative spirit inherent in open source, where
+          individuals can freely interact, exchange innovative ideas, and
+          contribute to projects collectively.
         </p>
         <p>
-          If you haven't already, consider starting your own open source project
-          or contribute to existing projects it's a fantastic way to learn and
-          grow.
-          <br /> Happy coding!
+          Let's build something amazing together! Join the open source community
+          today. Whether you're starting your own project or contributing to an
+          existing one, it's a fantastic way to learn and grow.
         </p>
+        Let's code together!
 
         {/* Developer Card */}
         <div className="max-w-[24rem] w-full bg-gray-700 hover:bg-gray-600 rounded-md flex items-center p-4 my-6">

website/src/components/Button.jsx

@@ -1,7 +1,7 @@
 export default function Button({ children, myStyle, ...props }) {
-  let styles = "hover:bg-primary px-4 py-2 rounded-full text-sm";
+  let styles = "hover:bg-primary px-4 py-2 text-sm";
   if (myStyle != null) {
-    styles = myStyle;
+    styles = styles+ " "+ myStyle;
   }
 
   return (

website/src/components/Footer.jsx

@@ -2,7 +2,7 @@ export default function Footer() {
     return (
       <section className="bg-primary text-neutral-200 h-[4rem] flex items-center md:px-20 px-4 md:text-md text-sm justify-between">
         <p>© 2024 Mousam App. All rights reserved.</p>
-        <a href="https://github.com/amit9838/mousam"><i className="fa-brands fa-github"></i></a>
+        <a className="text-lg" href="https://github.com/amit9838/mousam"><i className="fa-brands fa-github"></i></a>
       </section>
     );
   }

website/src/components/Hero.jsx

@@ -25,17 +25,52 @@ export default function Hero() {
             <p className="text-sm md:text-neutral-300/80 text-neutral-300 mx-1 mt-4 max-w-[24rem]">
               30k+ downloads from flathub, snapstore and other stores.
             </p>
-            <Button
+
+            {/* <Button
               onClick={() => {
                 const element = document.getElementById("installation");
                 element.scrollIntoView({
                   behavior: "smooth",
                 });
               }}
-              myStyle="bg-gradient-to-r from-[#166EAE] to-[#7B8389]  px-5 py-2  font-semibold rounded-full mt-20 text-white border-[1px] border-gray-400/70 hover:border-gray-300 "
+              myStyle="bg-gradient-to-r from-[#166EAE] to-[#7B8389]  px-5 py-2  font-semibold rounded-fullf mt-20 text-white border-[1px] border-gray-400/70 hover:border-gray-300 "
             >
               INSTALL
-            </Button>
+            </Button> */}
+            <div className="grid grid-cols-[1fr_2fr_1fr] grid-rows-[1fr_2fr_1fr] h-20 w-40 gap-0 mt-20">
+              {/* Top-left box */}
+              <div className="border-r-[1px] border-b-[1px] border-gray-300"></div>
+              {/* Top-center box */}
+              <div className="border-b-[1px] border-gray-300"></div>
+              {/* Top-right box */}
+              <div className="border-l-[1px] border-b-[1px] border-gray-300"></div>
+
+              {/* Middle-left box */}
+              <div className="border-r-[1px] border-gray-300"></div>
+              {/* Center box (Button) */}
+              <div className="flex items-center justify-center">
+                <button
+                  onClick={() => {
+                    const element = document.getElementById("installation");
+                    element.scrollIntoView({
+                      behavior: "smooth",
+                    });
+                  }}
+                  className="bg-gradient-to-r from-[#166EAE] to-[#7B8389]  px-5 py-2  font-semibold  text-white hover:text-neutral-300"
+                >
+                  INSTALL
+                </button>
+              </div>
+              {/* Middle-right box */}
+              <div className="border-l-[1px] border-gray-300"></div>
+
+              {/* Bottom-left box */}
+              <div className="border-r-[1px] border-t-[1px] border-gray-300"></div>
+              {/* Bottom-center box */}
+              <div className="border-t-[1px] border-gray-300"></div>
+              {/* Bottom-right box */}
+              <div className="border-l-[1px] border-t-[1px] border-gray-300"></div>
+            </div>
           </div>
         </div>
       </div>

website/src/components/Installation.jsx

@@ -30,6 +30,7 @@ export default function Installation() {
         </h2>
       </div>
       <div className="md:col-span-10 col-span-12 border-b-[1px] border-slate-400">
+
         <h2 className="mx-2 mb-4 text-xl md:hidden block ">Installation</h2>
         <div className="flex items-center justify-center border-t-[1px] border-slate-400 md:hidden">
           {tabs.map((item) => {
@@ -51,14 +52,15 @@ export default function Installation() {
           })}
         </div>
       </div>
+
       <div className="col-span-2 md:block hidden h-[30rem] border-r-[1px] border-slate-400">
         <div className="md:flex items-end flex-col hidden">
           {tabs.map((item) => {
             let myStyle =
-              "bg-secondary hover:bg-gray-600 py-2 w-40 border-b-[1px]";
+              "bg-secondary hover:bg-gray-600 py-2 w-40 border-b-[1px] border-slate-500";
             if (item.tab_name === activeTab) {
               myStyle =
-                "bg-gray-500 hover:bg-gray-600 py-2 w-40 border-b-[1px]";
+                "bg-gray-500 hover:bg-gray-600 py-2 w-40 border-b-[1px] border-slate-500";
             }
             return (
               <Button
@@ -72,7 +74,7 @@ export default function Installation() {
           })}
         </div>
       </div>
-      <div className="md:col-span-10 col-span-12  m-6">
+      <div className="md:col-span-10 col-span-12 m-6">
         {tabs.map((item) => {
           return (
             item.tab_name === activeTab && (

website/src/components/Navbar.jsx

@@ -22,7 +22,7 @@ export default function Navbar() {
                 return (
                   <li key={item}>
                     <Button
-                      myStyle={null}
+                      myStyle="rounded-full"
                       onClick={() => {
                         const element = document.getElementById(item);
                         element.scrollIntoView({
@@ -68,7 +68,7 @@ export default function Navbar() {
                 return (
                   <li key={item}>
                     <Button
-                      myStyle={null}
+                      myStyle="rounded-full"
                       onClick={() => {
                         const element = document.getElementById(item);
                         element.scrollIntoView({

website/src/components/Support.jsx

@@ -11,13 +11,9 @@ export default function Support() {
           I hope you ❤️ Mousam , if you think it is worth supporting you can do
           so. Thanks!
         </p>
-        <a href="https://www.buymeacoffee.com/ami9838" rel="nofollow">
-          <img
-            src="https://camo.githubusercontent.com/cace41b0afc90c68d0207e2bd809ee121f9ff4f72ac032e8ced972aee7adbb23/68747470733a2f2f63646e2e6275796d6561636f666665652e636f6d2f627574746f6e732f76322f64656661756c742d79656c6c6f772e706e67"
-            alt="Buy Me A Coffee"
-            className="w-[14rem] my-4"
-            data-canonical-src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png"
-          />
+
+        <a href="https://www.buymeacoffee.com/ami9838">
+          <img className="mt-4" src="https://img.buymeacoffee.com/button-api/?text=Buy me a coffee&emoji=☕&slug=ami9838&button_colour=FF5F5F&font_colour=ffffff&font_family=Comic&outline_colour=000000&coffee_colour=FFDD00" />
         </a>
       </div>
     </section>