From 07eca9736b07b97d7e6eb8497a635f2be9de5e35 Mon Sep 17 00:00:00 2001
From: Srinath <msrinath6109@gmail.com>
Date: Wed, 4 Feb 2026 13:45:48 +0530
Subject: [PATCH] Addes style and offter amt

---
 .../ProductCatalogue/CatalogueTemplate4.scss  | 566 +++++++-----------
 1 file changed, 208 insertions(+), 358 deletions(-)

diff --git a/src/Styles/ProductCatalogue/CatalogueTemplate4.scss b/src/Styles/ProductCatalogue/CatalogueTemplate4.scss
index 82a9a6f..e79920d 100644
--- a/src/Styles/ProductCatalogue/CatalogueTemplate4.scss
+++ b/src/Styles/ProductCatalogue/CatalogueTemplate4.scss
@@ -1,377 +1,227 @@
-// .CTemplate4MasterDiv {
-//     background-image: linear-gradient(to right, #252a69, #016ab6);
-//     height: 100vh;
-//     overflow: auto;
-// }
-
-// .CTemplate4Header {
-//     width: inherit;
-//     padding: 0rem 0rem 0rem 1rem;
-//     display: flex;
-//     flex-direction: row;
-//     align-items: center;
-// }
-
-// .CTemplate4SubHeader {
-//     display: flex;
-//     flex-direction: row;
-//     align-items: center;
-//     gap: '0.5rem'
-// }
-
-// .CTemplate4Line {
-//     width: 100%;
-//     background-color: #fce400;
-// }
-
-// .CTemplate4HeaderText1 {
-//     color: #fce400;
-//     display: flex;
-//     flex-direction: row;
-//     gap: 0.2rem;
-// }
-
-// .CTemplate4HeaderText1sub {
-//     color: #fce400;
-//     width: 27%;
-//     font-size: 20px;
-//     display: flex;
-//     justify-content: center;
-//     text-align: center;
-// }
-
-// .CTemplate4HeaderText2 {
-//     color: #fce400;
-//     margin: 0rem 0.5rem;
-//     font-size: 25px;
-//     font-weight: 600;
-// }
-
-// .CTemplate4persent {
-//     padding: 0.5rem;
-//     margin: 0rem 0.5rem;
-//     background-color: #fce400;
-//     border-radius: 10px;
-//     color: #184d90;
-// }
-
-// .CTemplate4CardMasterDiv {
-//   width: 8rem;
-//   height: 165px;
-//   margin: 1rem 0rem;
-//   border-radius: 10px;
-//   gap: '0.2rem';
-//   position: relative;
-// }
-
-// .CTemplate4CardContent {
-//     background-color: #fff;
-//     color: #000;
-//     font-size: 14px;
-//     display: flex;
-//     justify-content: center;
-//     align-items: center;
-//     flex-direction: column;
-//     margin-bottom: 0.2rem;
-//     border-radius: 10px;
-//     padding: 5px;
-// }
-
-// .CTemplate4Pricing {
-//     display: flex;
-//     flex-direction: column;
-//     width: 30%;
-//     background-color: #fce400;
-//     border-radius: 0px 18px 0px 10px;
-//     padding: 5px;
-//     font-size: 14px;
-//     font-weight: 700;
-//     text-align: center;
-//     padding-right: 6rem;
-// }
-
-// .CTemplate4Offer {
-//   background-color: #bf2523;
-//   position: absolute;
-//   width: 40px;
-//   left: 4.5rem;
-//   height: 40px;
-//   text-align: center;
-//   border-radius: 50%;
-//   padding: 0.6rem;
-//   font-weight: 700;
-//   color: #fce400;
-//   display: flex;
-//   flex-wrap: wrap;
-//   align-items: center;
-//   justify-content: center;
-//   bottom: -9px;
-// }
-
-// .CTemplate4ProductImage {
-//     width: 90px;
-//     height: 90px;
-// }
-
-// .CTemplate4CardContainer {
-//     display: flex;
-//     flex-wrap: wrap;
-//     justify-content: center;
-//     align-items: center;
-//     gap: 1rem;
-// }
-
-// .CTemplate4Fotter {
-//   display: flex;
-//   flex-direction: row;
-//   justify-content: space-between;
-//   align-items: center;
-//   gap:0.5rem;
-//     width: 100%;
-//     height: 150px;
-//     background-color: #fff;
-// }
-
-// .CTemplate4FotterAddress {
-//     padding: 1rem;
-//     display: flex;
-//     justify-content: center;
-//     align-items: center;
-//     background-image: linear-gradient(to right, #252a69, #016ab6);
-//     width: 14rem;
-//     height: 2.5rem;
-//     border-radius: 0.2rem;
-// }
-
-// .CTemplate4Fotterphone {
-//     background-color: #252a69;
-//     width: 12rem;
-//     height: 2rem;
-//     border-radius: 0.2rem;
-//     color: #fff;
-//     display: flex;
-//     align-items: center;
-//     justify-content: center;
-//     gap: 1rem;
-// }
-
-// .CTemplate4Fotterinfo
-// {
-//     display: flex;
-//     gap: 1rem;
-//     flex-direction: column;
-//     padding: 0.5rem;
-//     float: right;
-// }
-
-// .CTemplate4MasterDiv .PrintA4Style{
-//     font-family: 'Inconsolata', monospace;
-//     width: 100%;
-// }
-
-// .CTemplate4MasterDiv .page-footer{
-
-//      position: fixed;
-//      bottom: 0;
-//      background: none !important;
-// }
-
-.page-footer {
+// Main container
+.catalogue-template-4 {
   background-image: linear-gradient(to right, #252a69, #016ab6);
-}
-.CTemplate4Footer {
-  position: fixed;
-  bottom: 0;
-  width: inherit;
-  background: rgb(223, 223, 223); /* for demo */
+  width: 100%;
 }
 
-.CTemplate4MasterDiv {
+// Page structure
+// .catalogue-page {
+//   // position: relative;
+//   // min-height: 297mm; // A4 height
+//   // width: 190mm; // A4 width
+//   // page-break-after: always;
+//   // display: flex;
+//   // flex-direction: column;
+
+//   // &:last-child {
+//   //   page-break-after: auto;
+//   // }
+// }
+
+// Header Section
+.page-header {
+  position: relative;
+  width: 100%;
+  // width: 85%;
+  height: 150px;
   background-image: linear-gradient(to right, #252a69, #016ab6);
-  // height: 100vh;
-  width: 100%;
-}
-
-.CTemplate4Header {
-  width: inherit;
-  padding: 0rem 0rem 0rem 1rem;
   display: flex;
-  flex-direction: row;
-  align-items: center;
-  position: relative;
-}
-
-.CTemplate4SubHeader {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: '0.5rem';
-}
-
-.CTemplate4Line {
-  width: 100%;
-  background-color: #fce400;
-}
-
-.CTemplate4HeaderText1 {
-  color: #fce400;
-  display: flex;
-  flex-direction: row;
-  gap: 0.2rem;
-}
-
-.CTemplate4HeaderText1sub {
-  color: #fce400;
-  width: 27%;
-  font-size: 20px;
-  display: flex;
-  justify-content: center;
-  text-align: center;
-}
-
-.CTemplate4HeaderText2 {
-  color: #fce400;
-  margin: 0rem 0.5rem;
-  font-size: 25px;
-  font-weight: 600;
-  position: absolute;
-  top: 65px;
-  width: 100%;
-  margin: auto;
-}
-
-.CTemplate4persent {
-  // padding: 0.5rem;
-  // margin: 0rem 0.5rem;
-  background-color: #fce400;
-  border-radius: 5px;
-  color: #184d90;
-}
-
-.CTemplate4CardMasterDiv {
-  width: 6rem;
-  height: 165px;
-  margin: 1rem 0rem;
-  border-radius: 10px;
-  gap: '0.2rem';
-  position: relative;
-}
-
-.CTemplate4CardContent {
-  background-color: #fff;
-  color: #000;
-  font-size: 14px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-  margin-bottom: 0.2rem;
-  border-radius: 10px;
-  padding: 5px;
-  // margin-bottom: 2rem;
-}
-
-.CTemplate4Pricing {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 35px;
-  background-color: #fce400;
-  border-radius: 0px 18px 0px 10px;
-  font-size: 12px;
-  padding: 5px;
-  font-weight: 700;
-  text-align: center;
-  padding-right: 6rem;
-  font-family: 'Montserrat', sans-serif;
-}
-
-.CTemplate4Offer {
-  background-color: #bf2523;
-  position: absolute;
-  width: 60px;
-  left: 3rem;
-  height: 60px;
-  text-align: center;
-  border-radius: 50%;
-  padding: 0.6rem;
-  font-weight: 700;
-  color: #fce400;
-  display: flex;
-  flex-wrap: wrap;
   align-items: center;
   justify-content: center;
-  bottom: -44px;
-  font-family: 'Montserrat', sans-serif;
-  font-size: 10px;
-}
-
-.CTemplate4ProductImage {
-  width: 90px;
-  height: 90px;
-}
-
-.CTemplate4CardContainer {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  align-items: center;
-  gap: 1rem;
-  margin-bottom: 4rem;
-}
-
-.CTemplate4Fotter {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  gap: 0.5rem;
-  width: 100%;
-  height: 120px;
-  background-color: #fff;
-}
-
-.CTemplate4FotterAddress {
   padding: 1rem;
-  display: flex;
-  justify-content: center;
-  align-items: center;
+
+  .header-image {
+    width: 100%;
+    height: auto;
+    max-height: 120px;
+    object-fit: contain;
+  }
+
+  .header-offer-text {
+    position: absolute;
+    bottom: 10px;
+    color: #fce400;
+    font-size: 20px;
+    font-weight: 600;
+    text-align: center;
+    // width: 100%;
+
+    .offer-percentage {
+      background-color: #fce400;
+      color: #184d90;
+      width: 60px;
+      height: 25px;
+      padding: 0.3rem 0.8rem;
+      border-radius: 5px;
+      margin: 0 0.3rem;
+    }
+  }
+}
+
+// Content Section
+.content-section {
+  flex: 1;
+  padding: 1rem;
   background-image: linear-gradient(to right, #252a69, #016ab6);
-  width: 14rem;
-  height: 2.5rem;
-  border-radius: 0.2rem;
+  min-height: calc(297mm - 250px); // Total height minus header and footer
 }
 
-.CTemplate4Fotterphone {
-  background-color: #252a69;
-  width: 12rem;
-  height: 2rem;
-  border-radius: 0.2rem;
-  color: #fff;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 1rem;
+// Product Grid - 5x5
+.product-grid {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  grid-template-rows: repeat(5, 1fr);
+  gap: 0.5rem;
+  justify-items: center;
+  align-items: start;
+  // width: 84%;
 }
 
-.CTemplate4Fotterinfo {
-  font-family: 'Montserrat', sans-serif;
+// Product Card
+.product-card {
+  position: relative;
   display: flex;
-  gap: 1rem;
   flex-direction: column;
-  padding: 0.5rem;
-  float: right;
-}
-
-.CTemplate4MasterDiv .PrintA4Style {
-  font-family: 'Inconsolata', monospace;
-  width: 100%;
-
+  align-items: center;
+  width: 100px;
+  height: 140px;
   background-color: #fff;
+  border-radius: 8px;
+  overflow: visible;
+
+  .product-image {
+    width: 50px;
+    height: 40px;
+    object-fit: cover;
+    margin-top: 10px;
+  }
+
+  .product-name {
+    font-size: 12px;
+    font-weight: 600;
+    text-align: center;
+    padding: 0 5px;
+    margin-top: 5px;
+    color: #000;
+    line-height: 1.2;
+    max-height: 30px;
+    overflow: hidden;
+  }
+
+  .product-price {
+    position: absolute;
+    bottom: 0;
+    margin-right: -5px;
+    width: 100%;
+    height: 2rem;
+    background-color: #fce400;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 12px;
+    font-weight: 500;
+    border-radius: 0 0 8px 8px;
+    color: #000;
+  }
+
+  .product-offer {
+    position: absolute;
+    top: -7px;
+    right: -7px;
+    width: 3rem;
+    height: 3rem;
+    background-color: #bf2523;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    font-size: 10px;
+    font-weight: 600;
+    color: #fff;
+    padding: 3px;
+    line-height: 1.1;
+  }
 }
 
-.container-main {
-  display: flex !important;
-  width: 100% !important;
-  flex-wrap: wrap !important;
+// Footer Section
+.page-footer {
+  width: 100%;
+  height: 100px;
+  background-image: linear-gradient(to right, #252a69, #016ab6);
+  border-top: 1px solid #1292EE;
+  padding: 1rem;
+
+  .footer-content {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    height: 100%;
+  }
+
+  .footer-branch-name {
+    font-size: 16px;
+    font-weight: 700;
+    color: #fff;
+    margin: 0;
+  }
+
+  .footer-info-container {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    align-items: flex-end;
+    width: 100%;
+  }
+
+  .footer-address,
+  .footer-phone {
+    font-size: 9px;
+    background-color: #252a69;
+    color: #fff;
+    padding: 0.5rem 1rem;
+    border-radius: 4px;
+    text-align: center;
+  }
+
+  .footer-phone {
+    font-weight: 600;
+  }
 }
+
+// Print Styles
+@media print {
+  .catalogue-template-4 {
+    margin: 0;
+    padding: 0;
+  }
+
+  .catalogue-page {
+    page-break-after: always;
+
+    &:last-child {
+      page-break-after: auto;
+    }
+  }
+
+  .page-header {
+    position: fixed;
+    top: 0;
+  }
+
+  .page-footer {
+    position: fixed;
+    bottom: 0;
+  }
+
+  .content-section {
+    margin-top: 150px;
+    margin-bottom: 100px;
+  }
+}
+
+// Page setup for printing
+@page {
+  size: A4;
+  margin: 0;
+}
\ No newline at end of file