@pmidc/upyog-css 1.1.4 → 1.1.6

package/src/pages/citizen/Events.scss

@@ -1,47 +1,47 @@
-.OnGroundEventDetailsCard{
-    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.16);
-    @apply bg-white mx-sm mb-md p-md rounded;
-}
-
-.eventAddressAndDirection{
-    @apply text-body-s mb-md;
-    span{
-        @apply flex mb-sm;
-        svg{
-            @apply h-5 w-5;
-        }
-        div{
-            @apply ml-md;
-            p{
-                @apply mb-sm;
-            }
-            .direction{
-                @apply text-primary-main cursor-pointer;
-            }
-        }
-    }
-}
-
-.eventTimeRange{
-    @apply text-body-s flex;
-    svg{
-        @apply h-5 w-5;
-    }
-    p{
-        @apply ml-md;
-    }
-}
-
-.cardCaptionBodyS{
-    @apply text-body-s text-text-secondary mb-md;
-}
-
-@screen dt{
-    .eventAddressAndDirection{
-        @apply text-body-s-dt;
-    }
-
-    .cardCaptionBodyS{
-        @apply text-body-s-dt;
-    }
+.OnGroundEventDetailsCard{
+    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.16);
+    @apply bg-white mx-sm mb-md p-md rounded;
+}
+
+.eventAddressAndDirection{
+    @apply text-body-s mb-md;
+    span{
+        @apply flex mb-sm;
+        svg{
+            @apply h-5 w-5;
+        }
+        div{
+            @apply ml-md;
+            p{
+                @apply mb-sm;
+            }
+            .direction{
+                @apply text-primary-main cursor-pointer;
+            }
+        }
+    }
+}
+
+.eventTimeRange{
+    @apply text-body-s flex;
+    svg{
+        @apply h-5 w-5;
+    }
+    p{
+        @apply ml-md;
+    }
+}
+
+.cardCaptionBodyS{
+    @apply text-body-s text-text-secondary mb-md;
+}
+
+@screen dt{
+    .eventAddressAndDirection{
+        @apply text-body-s-dt;
+    }
+
+    .cardCaptionBodyS{
+        @apply text-body-s-dt;
+    }
 }

package/src/pages/citizen/HomePageWrapper.scss

@@ -1,165 +1,214 @@
-.HomePageWrapper {
-  margin-top: -25px;
-
-  .BannerWithSearch {
-    margin-bottom: 40px;
-    width: 100%;
-    @apply relative;
-    .Search {
-      width: calc(100% - 32px);
-      bottom: -18px;
-      @apply mx-md absolute;
-    }
-    img {
-      height: 33vw;
-      @apply w-full object-cover;
-    }
-  }
-
-  .ServicesSection {
-    @apply flex flex-wrap;
-    padding: 40px 15px 0 15px;
-  }
-
-  @screen dt {
-    .ServicesSection {
-      @apply flex flex-wrap;
-      padding: 40px 15px 0 15px;
-      width: 100%;
-    }
-  }
-
-  .WhatsNewSection {
-    @apply m-sm;
-    padding: 0 15px;
-    .headSection {
-      @apply flex mb-sm justify-between;
-      h2 {
-        @apply text-heading-s font-bold text-text-primary pl-sm;
-      }
-      p {
-        @apply text-link text-primary-main font-medium cursor-pointer;
-      }
-    }
-    @media (min-width: 780px) {
-      padding: 0 15px;
-    }
-  }
-
-  .WhatsAppBanner{
-    width: 100%;
-    padding: 0px 20px 0px 20px;
-    margin: auto;
-    cursor: pointer;
-    display:none;
-    img {
-      width: 100%;
-    }
-  }
-}
-
-@media (min-width: 780px) {
-  .SideBarStatic {
-    width: 250px;
-    background: #ffffff;
-    margin-top: -3px;
-  }
-}
-@media (max-width: 780px) {
-  .SideBarStatic {
-    width: 250px;
-    background: #ffffff;
-    margin-top: -3px;
-    display: none;
-  }
-}
-
-.HomePageContainer {
-  @media (min-width: 780px) {
-    display: flex;
-    width: 100% !important;
-    height: calc(100%-30px);
-  }
-}
-
-.moduleLinkHomePage {
-  @media (min-width: 780px) {
-    width: calc(100% - 219px);
-  }
-  margin-top: -25px;
-  img {
-    height: 33vw;
-    background: linear-gradient(#000000,#000000);
-    @apply object-cover;
-    width:100vw;
-  }
-  h1 {
-    position: absolute;
-    top: 100px;
-    left: 21px;
-    @apply text-heading-xl text-white font-bold;
-  }
-  .moduleLinkHomePageBackButton {
-    border: none;
-    top: 76px;
-    svg {
-      fill: #ffffff;
-    }
-    @apply absolute text-white text-heading-s ml-md;
-  }
-}
-
-.moduleLinkHomePageModuleLinks {
-  @apply mt-md;
-  .CitizenHomeCard {
-    .header {
-      @apply hidden;
-    }
-  }
-}
-
-@screen dt {
-  .HomePageWrapper {
-    width: 100%;
-    .BannerWithSearch {
-      margin-bottom: 56px;
-      width: 100% !important;
-      .Search {
-        width: 100%;
-        margin: 0;
-        padding: 0 15px 0 15px;
-      }
-      img {
-        height: 20vw;
-      }
-    }
-
-    .WhatsAppBanner {
-      width: 100%;
-      img{
-        height: 20vw;
-        width: 100%;
-      }
-    }
-
-  }
-  .moduleLinkHomePage {
-    img {
-      min-width: 100vw;
-      height: 20vw;
-    }
-    h1 {
-      top: calc(10vw + 40px);
-      left: 15.8rem;
-    }
-    .moduleLinkHomePageBackButton {
-      top: calc(10vw + 16px);
-      @apply ml-md;
-    }
-  }
-
-  .moduleLinkHomePageModuleLinks {
-    max-width: unset;
-    width:100%
-  }
-}
+.HomePageWrapper {
+  margin-top: -25px;
+  margin: 0 auto;
+  padding: 0 40px;
+  .BannerWithSearch {
+    margin-bottom: 40px;
+    width: 100%;
+    @apply relative;
+    .Search {
+      width: calc(100% - 32px);
+      bottom: -18px;
+      @apply mx-md absolute;
+    }
+    img {
+      height: 33vw;
+      @apply w-full object-cover;
+    }
+  }
+.hero-banner-styles {
+  background: linear-gradient(135deg, #4f65d8 0%, #00157a 100%);
+  border-radius: 16px;
+  padding: 60px 40px;
+  margin: 24px 0;
+  text-align: center;
+  color: #fff;
+}
+
+.hero-title-styles {
+  font-size: 42px;
+  font-weight: 700;
+  margin-bottom: 12px;
+  letter-spacing: -0.5px;
+}
+
+.heroSubtitleStyles {
+  font-size: 18px;
+  font-weight: 400;
+  margin-bottom: 32px;
+  opacity: 0.95;
+}
+
+.searchBarStyles {
+  max-width: 600px;
+  margin: 0 auto;
+  background-color: #fff;
+  border-radius: 12px;
+  padding: 14px 20px;
+  display: flex;
+  align-items: center;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+}
+
+.searchInputStyles {
+  border: none;
+  outline: none;
+  width: 100%;
+  font-size: 16px;
+  margin-left: 12px;
+  color: black;
+}
+
+.searchIconStyles {
+  color: #9ca3af;
+  font-size: 20px;
+}
+
+
+  .ServicesSection {
+    @apply flex flex-wrap;
+    padding: 40px 15px 0 15px;
+  }
+
+  @screen dt {
+    .ServicesSection {
+      @apply flex flex-wrap;
+      padding: 40px 15px 0 15px;
+      width: 100%;
+    }
+  }
+
+  .WhatsNewSection {
+    @apply m-sm;
+    padding: 0 15px;
+    .headSection {
+      @apply flex mb-sm justify-between;
+      h2 {
+        @apply text-heading-s font-bold text-text-primary pl-sm;
+      }
+      p {
+        @apply text-link text-primary-main font-medium cursor-pointer;
+      }
+    }
+    @media (min-width: 780px) {
+      padding: 0 15px;
+    }
+  }
+
+  .WhatsAppBanner {
+    width: 100%;
+    padding: 0px 20px 0px 20px;
+    margin: auto;
+    cursor: pointer;
+    display: none;
+    img {
+      width: 100%;
+    }
+  }
+}
+
+@media (min-width: 780px) {
+  .SideBarStatic {
+    width: 250px;
+    background: #ffffff;
+    margin-top: -3px;
+  }
+}
+@media (max-width: 780px) {
+  .SideBarStatic {
+    width: 250px;
+    background: #ffffff;
+    margin-top: -3px;
+    display: none;
+  }
+}
+
+.HomePageContainer {
+  width: 100%;
+  padding: 0;
+  @media (min-width: 780px) {
+    display: flex;
+    width: 100% !important;
+    height: calc(100%-30px);
+  }
+}
+
+.moduleLinkHomePage {
+  @media (min-width: 780px) {
+    width: calc(100% - 219px);
+  }
+  margin-top: -25px;
+  img {
+    height: 33vw;
+    background: linear-gradient(#000000, #000000);
+    @apply object-cover;
+    width: 100vw;
+  }
+  h1 {
+    top: 100px;
+    left: 21px;
+    @apply text-heading-xl text-white font-bold;
+  }
+  .moduleLinkHomePageBackButton {
+    border: none;
+    top: 76px;
+    svg {
+      fill: #000000;
+    }
+    @apply text-black text-heading-s ml-md;
+  }
+}
+
+.moduleLinkHomePageModuleLinks {
+  @apply mt-md;
+  .CitizenHomeCard {
+    .header {
+      @apply hidden;
+    }
+  }
+}
+
+@screen dt {
+  .HomePageWrapper {
+    width: 100%;
+    .BannerWithSearch {
+      margin-bottom: 56px;
+      width: 100% !important;
+      .Search {
+        width: 100%;
+        margin: 0;
+        padding: 0 15px 0 15px;
+      }
+      img {
+        height: 20vw;
+      }
+    }
+
+    .WhatsAppBanner {
+      width: 100%;
+      img {
+        height: 20vw;
+        width: 100%;
+      }
+    }
+  }
+  .moduleLinkHomePage {
+    img {
+      min-width: 100vw;
+      height: 20vw;
+    }
+    h1 {
+      top: calc(10vw + 40px);
+      left: 15.8rem;
+    }
+    .moduleLinkHomePageBackButton {
+      top: calc(10vw + 16px);
+      @apply ml-md;
+    }
+  }
+
+  .moduleLinkHomePageModuleLinks {
+    max-width: unset;
+    width: 100%;
+  }
+}