update calculation and update design also info

utdevnp · Dec 12, 2024 · 2f14942 · 2f14942
1 parent 3e32cb6
commit 2f14942
Show file tree

Hide file tree

Showing 7 changed files with 257 additions and 73 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/index.html b/index.html
@@ -1,14 +1,42 @@
 <!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Smart Tax Calculator</title>
-    <link href="./output.css" rel="stylesheet">
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="/icon.png" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Smart Tax Calculator - tax brackets, deductions, and allowances</title>
+  <!-- Meta Tags for Smart Tax Calculator -->
+  <meta name="title" content="Smart Tax Calculator - Nepal Taxation System 2080/81">
+  <meta name="description"
+    content="Smart Tax Calculator computes personal income tax based on Nepal's taxation system (Budget 2080/81). Includes tax brackets, deductions, and allowances for accurate calculations tailored to married, single, male, and female taxpayers.">
+  <meta name="keywords"
+    content="Tax Calculator, Nepal Taxation, Income Tax Calculator, Tax Brackets, Deductions, Allowances, Nepal Budget 2080/81">
+  <meta name="author" content="Smart Tax Calculator Team">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta charset="UTF-8">
+
+  <!-- Open Graph Meta Tags for Social Media -->
+  <meta property="og:title" content="Smart Tax Calculator - Nepal Taxation System 2080/81">
+  <meta property="og:description"
+    content="Compute personal income tax with Smart Tax Calculator, based on Nepal's taxation system (Budget 2080/81). Includes tax brackets, deductions, and allowances for accurate results.">
+  <meta property="og:image" content="URL_TO_IMAGE"> <!-- Replace with the actual URL to the image -->
+  <meta property="og:url" content="URL_TO_YOUR_WEBSITE"> <!-- Replace with the actual website URL -->
+  <meta property="og:type" content="website">
+
+  <!-- Twitter Card Meta Tags -->
+  <meta name="twitter:card" content="summary_large_image">
+  <meta name="twitter:title" content="Smart Tax Calculator - Nepal Taxation System 2080/81">
+  <meta name="twitter:description"
+    content="Compute personal income tax with Smart Tax Calculator, based on Nepal's taxation system (Budget 2080/81). Accurate calculations for various taxpayer categories.">
+  <meta name="twitter:image" content="URL_TO_IMAGE"> <!-- Replace with the actual URL to the image -->
+
+  <link href="./output.css" rel="stylesheet">
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.tsx"></script>
+</body>
+
+</html>
diff --git a/output.css b/output.css
@@ -554,10 +554,64 @@ video {
   display: none;
 }
 
+.container {
+  width: 100%;
+}
+
+@media (min-width: 640px) {
+  .container {
+    max-width: 640px;
+  }
+}
+
+@media (min-width: 768px) {
+  .container {
+    max-width: 768px;
+  }
+}
+
+@media (min-width: 1024px) {
+  .container {
+    max-width: 1024px;
+  }
+}
+
+@media (min-width: 1280px) {
+  .container {
+    max-width: 1280px;
+  }
+}
+
+@media (min-width: 1536px) {
+  .container {
+    max-width: 1536px;
+  }
+}
+
 .col-span-2 {
   grid-column: span 2 / span 2;
 }
 
+.mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.my-4 {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
+
+.my-5 {
+  margin-top: 1.25rem;
+  margin-bottom: 1.25rem;
+}
+
+.my-6 {
+  margin-top: 1.5rem;
+  margin-bottom: 1.5rem;
+}
+
 .mb-1 {
   margin-bottom: 0.25rem;
 }
@@ -614,6 +668,26 @@ video {
   display: grid;
 }
 
+.size-6 {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
+.size-4 {
+  width: 1rem;
+  height: 1rem;
+}
+
+.size-8 {
+  width: 2rem;
+  height: 2rem;
+}
+
+.size-12 {
+  width: 3rem;
+  height: 3rem;
+}
+
 .min-h-screen {
   min-height: 100vh;
 }
@@ -803,6 +877,21 @@ video {
   background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));
 }
 
+.bg-\[\#68edb6\] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(104 237 182 / var(--tw-bg-opacity, 1));
+}
+
+.bg-\[\#22c55e\] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));
+}
+
+.bg-\[\#83f0ab\] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(131 240 171 / var(--tw-bg-opacity, 1));
+}
+
 .bg-clip-content {
   background-clip: content-box;
 }
@@ -861,6 +950,11 @@ video {
   line-height: 2.25rem;
 }
 
+.text-5xl {
+  font-size: 3rem;
+  line-height: 1;
+}
+
 .font-medium {
   font-weight: 500;
 }
@@ -869,6 +963,10 @@ video {
   font-weight: 600;
 }
 
+.font-bold {
+  font-weight: 700;
+}
+
 .text-white {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity, 1));
@@ -884,6 +982,21 @@ video {
   color: rgb(185 28 28 / var(--tw-text-opacity, 1));
 }
 
+.text-blue-950 {
+  --tw-text-opacity: 1;
+  color: rgb(23 37 84 / var(--tw-text-opacity, 1));
+}
+
+.text-blue-600 {
+  --tw-text-opacity: 1;
+  color: rgb(37 99 235 / var(--tw-text-opacity, 1));
+}
+
+.text-green-500 {
+  --tw-text-opacity: 1;
+  color: rgb(34 197 94 / var(--tw-text-opacity, 1));
+}
+
 .shadow {
   --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);

diff --git a/public/icon.png b/public/icon.png
diff --git a/public/vite.svg b/public/vite.svg