fix: Design : add recommended header.

2025-11-20 13:45:55 +05:30
parent 6258080848
commit f4b1752fe2
6 changed files with 256 additions and 109 deletions
--- a/src/app/(main)/page.module.css
+++ b/src/app/(main)/page.module.css
@@ -0,0 +1,74 @@
+.header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 100;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.8rem 2rem;
+  background: linear-gradient(15deg, rgba(10, 114, 40, 1) 55%, rgba(101, 101, 184, 1) 100%);
+  flex-wrap: wrap; /* Allow wrapping on mobile */
+}
+
+.header-text {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  flex: 1;
+  text-align: left;
+}
+
+.desktop-text {
+  color: white;
+  font-family: Roboto, sans-serif;
+  font-size: 1.5rem;
+  line-height: 1.2;
+}
+
+.desktop-address {
+  font-family: Roboto, sans-serif;
+  color: white;
+  font-size: 0.9rem;
+  text-shadow: 1px 1px 2px blue;
+  margin-top: 0.25rem;
+}
+
+/* Mobile styles */
+.mobile-text {
+  color: white;
+  font-family: Roboto, sans-serif;
+  font-size: 1rem;
+  line-height: 1.2;
+  display: none;
+  text-align: center;
+}
+
+/* Media query for mobile */
+@media screen and (max-width: 768px) {
+  .header {
+    justify-content: center;
+    padding: 0.5rem 0.75rem;
+  }
+
+  .header-logo {
+    width: 50px;
+    margin-bottom: 0.5rem;
+  }
+
+  .header-text {
+    text-align: center;
+    flex-direction: column;
+  }
+
+  .desktop-text,
+  .desktop-address {
+    display: none;
+  }
+
+  .mobile-text {
+    display: block;
+    font-size: 0.9rem;
+  }
+}