Repository: Dheeru12503/barrocyte
Pull request #14: Blood Bank Service Section
Author: login: Dheeru12503
Created: 2025-03-19T15:18:29Z | Merged: 2025-03-22T05:06:45Z



Diff:
diff --git a/src/components/DoCard/DoCard.css b/src/components/DoCard/DoCard.css
new file mode 100644
index 0000000..d7e52ec
--- /dev/null
+++ b/src/components/DoCard/DoCard.css
@@ -0,0 +1,137 @@
+.doingcard {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.do-card {
+  background: #fff;
+  padding: 20px;
+  border-radius: 15px;
+  position: relative;
+  width: 350px;
+  text-align: left;
+  transition: all 0.3s ease;
+  max-width: 550px;
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
+}
+
+.do-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  overflow-y: auto;
+  max-height: 350px;
+}
+
+.do-list-item {
+  font-size: var(--fs-large);
+  color: #333;
+  margin: 0.75rem 0;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.checkmark {
+  color: #ee1c15;
+  font-weight: bold;
+  font-size: 1.2rem;
+}
+
+.do-label {
+  position: absolute;
+  right: -50px;
+  top: 50%;
+  transform: translateY(-50%);
+  background: linear-gradient(
+    45deg,
+    rgba(179, 0, 0, 0.8),
+    rgba(255, 26, 26, 0.8)
+  );
+  color: white;
+  padding: 12px 15px;
+  font-weight: bold;
+  border-radius: 0 10px 10px 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  writing-mode: vertical-rl;
+  height: 80%;
+  z-index: -1;
+}
+
+/* Responsive Design */
+
+
+@media (min-width: 1200px) {
+  .do-card {
+    width: 360px;
+  }
+
+  .do-label {
+    right: -40px;
+  }
+}
+
+
+@media (max-width: 991px) and (min-width: 768px) {
+  .do-card {
+    width: 100%;
+    padding: 30px;
+  }
+
+  .do-label {
+    right: -35px;
+    font-size: var(--fs-regular);
+    padding: 12px;
+    height: 75%;
+  }
+
+  .do-list-item {
+    font-size: var(--fs-regular);
+  }
+}
+
+
+@media (max-width: 767px) {
+  .do-card {
+    padding: 30px;
+  }
+
+  .do-label {
+    right: -30px;
+    font-size: var(--fs-small);
+    padding: 10px;
+    height: 70%;
+  }
+
+  .checkmark {
+    font-size: 1rem;
+  }
+
+  .do-list-item {
+    font-size: var(--fs-regular);
+    margin: 0.5rem 0;
+  }
+}
+
+
+@media (max-width: 480px) {
+  .do-card {
+    width: 95%;
+    padding: 25px;
+  }
+
+  .do-label {
+    right: -25px;
+    font-size: var(--fs-small);
+    padding: 8px;
+    height: 60%;
+  }
+
+  .do-list-item {
+    font-size: var(--fs-small);
+    margin: 0.4rem 0;
+  }
+}
diff --git a/src/components/DoCard/DoCard.tsx b/src/components/DoCard/DoCard.tsx
new file mode 100644
index 0000000..c3e3db4
--- /dev/null
+++ b/src/components/DoCard/DoCard.tsx
@@ -0,0 +1,34 @@
+import React from "react";
+import "./DoCard.css";
+
+interface DoRightCardProps {
+  title: string;
+  items: string[];
+}
+
+const DoCard: React.FC<DoRightCardProps> = ({ title, items }) => {
+  return (
+    <div className="doingcard">
+      <div className="do-card">
+        {/* List Section */}
+        <ul className="do-list">
+          {items.map((item, index) => (
+            <li key={index} className="do-list-item">
+              <span className="checkmark">
+                <span className="material-icons blood-icon">water_drop</span>
+              </span>
+              {item}
+            </li>
+          ))}
+        </ul>
+
+        {/* Label Section */}
+        <div className="do-label">
+          <span>{title}</span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default DoCard;
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index ecebf7e..c3eec15 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -2,11 +2,11 @@ import Head from "next/head";
 import "./styles.css";
 import "./../styles/globals.css";
 
-
 import Main from "@/sections/main/Main";
 import SanitaryImportPermitService from "@/sections/sanitaryImportPermitService/SanitaryImportPermitService";
 import RegulatorySolutions from "@/sections/regulatorySolutions/RegulatorySolutions";
 import Header from "@/components/header/Header";
+import BloodBankServive from "@/sections/bloodBankService/BloodBankServive";
 
 export default function Home() {
   return (
@@ -21,9 +21,10 @@ export default function Home() {
           href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
         />
       </Head>
-      <Header/>
+      <Header />
       <Main></Main>
       <RegulatorySolutions />
+      <BloodBankServive />
       <SanitaryImportPermitService />
     </>
   );
diff --git a/src/sections/bloodBankService/BloodBankServive.css b/src/sections/bloodBankService/BloodBankServive.css
new file mode 100644
index 0000000..17613be
--- /dev/null
+++ b/src/sections/bloodBankService/BloodBankServive.css
@@ -0,0 +1,110 @@
+.bloodBankServiceSection {
+  padding: 3em 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  width: 100%;
+}
+
+.bloodBankServiceTitle {
+  font-size: var(--fs-2);
+  font-weight: 600;
+  text-align: center;
+  margin-bottom: 30px;
+  color: #333;
+}
+
+.bloodBankServiceParagrapgh {
+  color: var(--textDark);
+  line-height: 20px;
+}
+
+.bloodBankLicensingContainer {
+  padding-top: 3em;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  width: 100%;
+}
+
+.BloodBankguideLinesContainer {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center !important;
+  background: #fff;
+  border-radius: 10px;
+  opacity: 0;
+  transform: translateY(20px);
+  animation: fadeInUp 0.6s ease-in-out forwards;
+  transition: all 0.3s ease-in-out;
+  --bs-gutter-x: 1.5rem;
+  --bs-gutter-y: 0;
+  margin-top: calc(-1 * var(--bs-gutter-y));
+  margin-right: calc(-0.5 * var(--bs-gutter-x));
+  margin-left: calc(-0.5 * var(--bs-gutter-x));
+}
+
+.DocardContainer,
+.BoodBankAccordianContainer {
+  flex: 1;
+  max-width: 100%;
+  padding-right: calc(var(--bs-gutter-x) * 0.5);
+  padding-left: calc(var(--bs-gutter-x) * 0.5);
+  margin-top: var(--bs-gutter-y);
+}
+
+@media (min-width: 768px) {
+  .DocardContainer,
+  .BoodBankAccordianContainer {
+    flex: 0 0 auto;
+    width: 100%;
+  }
+}
+
+@media (max-width: 768px) {
+  .bloodBankServiceTitle {
+    font-size: var(--fs-3);
+  }
+  .BloodBankguideLinesContainer {
+    gap: 20px;
+  }
+}
+
+@media (min-width: 576px) {
+  .DocardContainer,
+  .BoodBankAccordianContainer {
+    flex: 0 0 auto;
+    width: 100%;
+  }
+}
+
+@media (max-width: 576px) {
+  .bloodBankServiceTitle {
+    font-size: var(--fs-4);
+  }
+
+  .bloodBankServiceParagrapgh {
+    font-size: var(--fs-regular);
+  }
+}
+
+@media (min-width: 992px) {
+  .DocardContainer,
+  .BoodBankAccordianContainer {
+    flex: 0 0 50%;
+    max-width: 50%;
+  }
+}
+
+@media (max-width: 991px) {
+  .DocardContainer,
+  .BoodBankAccordianContainer {
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+  .BloodBankguideLinesContainer {
+    gap: 30px;
+  }
+}
diff --git a/src/sections/bloodBankService/BloodBankServive.tsx b/src/sections/bloodBankService/BloodBankServive.tsx
new file mode 100644
index 0000000..6656e21
--- /dev/null
+++ b/src/sections/bloodBankService/BloodBankServive.tsx
@@ -0,0 +1,92 @@
+"use client";
+import React, { useState } from "react";
+import "./BloodBankServive.css";
+import DoRightCard from "@/components/DoCard/DoCard";
+import Accordion from "@/components/accordion/Accordion";
+
+export default function BloodBankServive() {
+  const doItems = {
+    title: "FSSAI Licensing & Compliance Guidance",
+    points: [
+      "FSSAI license requirements vary by business type.",
+      "Barrocyte Consultants provides checklist-based documentation support.",
+      "Assistance available for registration, renewal, and modifications.",
+      "Licenses are valid for 1-5 years and require timely renewal.",
+      "For expert guidance, contact barrocyte@gmail.com or +91-9266665237.",
+    ],
+  };
+
+  const bloodBankAccordionData = [
+    {
+      title: "Form of Licence for Blood Bank",
+      content: `A licence for the operation of a Blood Bank or for processing whole Human Blood for components 
+    and manufacture of blood products shall be issued in Form 28-C, Form 28-E, Form 26-G, or Form 26-I.  
+    Before issuance, the following conditions must be met:
+    - The Blood Bank operation must be supervised by at least one full-time Medical Officer with:
+      - Postgraduate degree in Medicine (M.D. in Pathology/Transfusion Medicines), or
+      - M.B.B.S. with a Diploma in Pathology or Transfusion Medicines with knowledge of blood group serology, methodology, and medical principles, or
+      - M.B.B.S. with at least one year of Blood Bank experience and expertise in blood group serology and methodology.
+    The degree or diploma must be from a university recognized by the Central Government.`,
+    },
+    {
+      title: "Validity of License",
+      content: `The Blood Bank licence in Form 28-C, Form 28-E, or renewed in Form 26-G or Form 26-I is valid for five years unless suspended or cancelled.  
+    The validity starts from the date it is granted or renewed.`,
+    },
+  ];
+
+  const [activeIndex, setActiveIndex] = useState<number | null>(null);
+
+  const toggleAccordion = (index: number) => {
+    setActiveIndex(activeIndex === index ? null : index);
+  };
+
+  return (
+    <section>
+      <div className="bloodBankServiceSection">
+        <div className="container">
+          <h2 className="bloodBankServiceTitle"> Blood Bank Service</h2>
+          <p className="bloodBankServiceParagrapgh">
+            Blood Transfusion Services are crucial to healthcare, with no
+            substitute for human blood. Advancements in transfusion technology
+            demand strict quality control. Many countries have well-regulated
+            blood banking systems, with some delegating management to NGOs like
+            the Red Cross. The Indian government, through the Drugs Controller
+            General, enforces stringent regulations under the Drugs & Cosmetics
+            Act, ensuring safe collection, storage, testing, and distribution.
+            Following a Supreme Court directive, amendments are being made to
+            strengthen these laws. As consultants, we assist clients in
+            obtaining blood bank licenses and regulatory approvals.
+          </p>
+        </div>
+
+        <div className="bloodBankLicensingContainer">
+          <div className="container">
+            <h2 className="bloodBankServiceTitle">
+              Blood Bank Licensing and FSSAI Compliance Guidelines
+            </h2>
+            <div className="BloodBankguideLinesContainer">
+              <div className="DocardContainer">
+                <DoRightCard
+                  title="Blood Bank Licensing"
+                  items={doItems.points}
+                />
+              </div>
+              <div className="BoodBankAccordianContainer">
+                {bloodBankAccordionData.map((item, index) => (
+                  <Accordion
+                    key={index}
+                    title={item.title}
+                    content={item.content}
+                    isActive={activeIndex === index}
+                    onClick={() => toggleAccordion(index)}
+                  />
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}


Reviews:
user: login: mohdnoorain
state: COMMENTED
author_association: OWNER
submitted_at: 2025-03-20T12:29:39Z
user: login: mohdnoorain
body: <img width="514" alt="Screenshot 2025-03-20 at 6 01 00 PM" src="https://github.com/user-attachments/assets/aa699838-7d2c-4879-acce-117cc4039b89" />

Fix it's height and spacing a little min-height not needed.

<img width="424" alt="Screenshot 2025-03-20 at 6 02 53 PM" src="https://github.com/user-attachments/assets/1599fcf1-1e33-481f-91ae-eb3f743098ad" />

Same again didn't changed the margin on small device


<img width="433" alt="Screenshot 2025-03-20 at 6 03 33 PM" src="https://github.com/user-attachments/assets/497b5865-48f4-43e0-8992-7b1ca5b150a7" />

No margin at all.

state: CHANGES_REQUESTED
author_association: OWNER
submitted_at: 2025-03-20T12:34:44Z
user: login: mohdnoorain
state: COMMENTED
author_association: OWNER
submitted_at: 2025-03-20T12:35:02Z
user: login: Dheeru12503
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-03-21T10:06:13Z
user: login: Dheeru12503
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-03-21T10:11:42Z
user: login: mohdnoorain
body: Just fix this and merge the PR yourself and continue on next task drug page.
state: CHANGES_REQUESTED
author_association: OWNER
submitted_at: 2025-03-22T02:50:10Z
user: login: Dheeru12503
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-03-22T05:03:09Z

Review comments:
diff_hunk: @@ -0,0 +1,95 @@
+import React from "react";
+import "./BloodBankServive.css";
+import DoCard from "@/components/DoCard/DoCard";
+export default function BloodBankServive() {
+  const doItems = [
+    "Write clean and modular code",
+    "Follow accessibility standards",
+    "Optimize for performance",
+    "Use semantic HTML",
+    "Ensure mobile responsiveness",
+    "Keep UI/UX simple and effective",
+  ];
+  const bloodBankAccordionData = [
path: src/sections/bloodBankService/BloodBankServive.tsx
user: login: mohdnoorain
body: @Dheeru12503 can't see any accordian for this data.
created_at: 2025-03-20T12:29:39Z
author_association: OWNER
diff_hunk: @@ -0,0 +1,95 @@
+import React from "react";
+import "./BloodBankServive.css";
+import DoCard from "@/components/DoCard/DoCard";
+export default function BloodBankServive() {
+  const doItems = [
+    "Write clean and modular code",
+    "Follow accessibility standards",
+    "Optimize for performance",
+    "Use semantic HTML",
+    "Ensure mobile responsiveness",
+    "Keep UI/UX simple and effective",
+  ];
+  const bloodBankAccordionData = [
+    {
+      title: "Form of Licence for Blood Bank",
+      content: `A licence for the operation of a Blood Bank or for processing whole Human Blood for components 
+    and manufacture of blood products shall be issued in Form 28-C, Form 28-E, Form 26-G, or Form 26-I.  
+    Before issuance, the following conditions must be met:
+    - The Blood Bank operation must be supervised by at least one full-time Medical Officer with:
+      - Postgraduate degree in Medicine (M.D. in Pathology/Transfusion Medicines), or
+      - M.B.B.S. with a Diploma in Pathology or Transfusion Medicines with knowledge of blood group serology, methodology, and medical principles, or
+      - M.B.B.S. with at least one year of Blood Bank experience and expertise in blood group serology and methodology.
+    The degree or diploma must be from a university recognized by the Central Government.`,
+    },
+    {
+      title: "Validity of License",
+      content: `The Blood Bank licence in Form 28-C, Form 28-E, or renewed in Form 26-G or Form 26-I is valid for five years unless suspended or cancelled.  
+    The validity starts from the date it is granted or renewed.`,
+    },
+    {
+      title: "FSSAI Licensing and Compliance Assistance",
+      content: `Obtaining an FSSAI license is a complex process requiring various documents, depending on the business type.  
+    **Barrocyte Consultants** provides:
+    - A systematic, checklist-based documentation process.
+    - Assistance for petty food businesses in FSSAI registration.
+    - Support for modification, renewal, and duplicate license issuance.
+    - License or registration for 1-5 years, requiring renewal at least 30 days before expiry.
+    - Advisory services for compliance with FSSAI regulations.
+    Food Business Operators must inform the authority of any changes in their business before implementing them.
+    For assistance, contact Barrocyte Consultants at **barrocyte@gmail.com** or **+91-9266665237**.`,
+    },
+  ];
+
+  return (
+    <section>
+      <div className="bloodBankService">
+        <div className="container">
+          <h2 className="bloodBankServiceTitle"> Blood Bank Service</h2>
+          <p className="bloodBankServiceParagrapgh">
+            Blood Transfusion Service is a vital part of the National Health
+            Service and there is no substitute for Human Blood and its
+            components. Increasing advancement in the field of Transfusion
+            Technology has necessitated to enforce stricter control over the
+            quality of Blood and its products. In most of the developed
+            countries, the blood banking system has advanced in all facets of
+            donor management, storage of blood, grouping and cross matching,
+            testing of transmissible diseases, rationale use of blood and
+            distribution. The Govt. has the full responsibility for the blood
+            programme even though, in some countries, the management of blood
+            transfusion services are delegated fully or partly to an appropriate
+            non-governmental organization (NGOs) working on a non-profit basis,
+            e.g., Red Cross Society. When a NGO is assigned this responsibility,
+            the Govt. should formally recognize it and give a clear mandate
+            formulating the national blood policy, it is important to consider
+            policy decisions enforcing appropriate regulations or necessary
+            functions of health service to ensure high quality service and safe
+            blood. In order to improve the standards of Blood and its
+            components, the Central Govt. through Drugs Controller General of
+            India, has formulated a comprehensive legislation to ensure better
+            quality control system on collection, storage, testing and
+            distribution of blood and its components. Central Govt. amended from
+            time to time the existing requirements of Blood Banks in the Drugs &
+            Cosmetics Act, 1940 and Rules thereunder to meet the latest
+            standards. Consequent to a public litigation case recently, Supreme
+            Court of India directed Central Govt. to enact a comprehensive
+            legislation on Blood Banks in collection, storage, testing and
path: src/sections/bloodBankService/BloodBankServive.tsx
user: login: mohdnoorain
body: @Dheeru12503  reduce this to 1/3 rd lines. it's too much
created_at: 2025-03-20T12:30:17Z
author_association: OWNER
diff_hunk: @@ -0,0 +1,95 @@
+import React from "react";
+import "./BloodBankServive.css";
+import DoCard from "@/components/DoCard/DoCard";
+export default function BloodBankServive() {
+  const doItems = [
+    "Write clean and modular code",
+    "Follow accessibility standards",
+    "Optimize for performance",
+    "Use semantic HTML",
+    "Ensure mobile responsiveness",
+    "Keep UI/UX simple and effective",
+  ];
+  const bloodBankAccordionData = [
+    {
+      title: "Form of Licence for Blood Bank",
+      content: `A licence for the operation of a Blood Bank or for processing whole Human Blood for components 
+    and manufacture of blood products shall be issued in Form 28-C, Form 28-E, Form 26-G, or Form 26-I.  
+    Before issuance, the following conditions must be met:
+    - The Blood Bank operation must be supervised by at least one full-time Medical Officer with:
+      - Postgraduate degree in Medicine (M.D. in Pathology/Transfusion Medicines), or
+      - M.B.B.S. with a Diploma in Pathology or Transfusion Medicines with knowledge of blood group serology, methodology, and medical principles, or
+      - M.B.B.S. with at least one year of Blood Bank experience and expertise in blood group serology and methodology.
+    The degree or diploma must be from a university recognized by the Central Government.`,
+    },
+    {
+      title: "Validity of License",
+      content: `The Blood Bank licence in Form 28-C, Form 28-E, or renewed in Form 26-G or Form 26-I is valid for five years unless suspended or cancelled.  
+    The validity starts from the date it is granted or renewed.`,
+    },
+    {
+      title: "FSSAI Licensing and Compliance Assistance",
+      content: `Obtaining an FSSAI license is a complex process requiring various documents, depending on the business type.  
+    **Barrocyte Consultants** provides:
+    - A systematic, checklist-based documentation process.
+    - Assistance for petty food businesses in FSSAI registration.
+    - Support for modification, renewal, and duplicate license issuance.
+    - License or registration for 1-5 years, requiring renewal at least 30 days before expiry.
+    - Advisory services for compliance with FSSAI regulations.
+    Food Business Operators must inform the authority of any changes in their business before implementing them.
+    For assistance, contact Barrocyte Consultants at **barrocyte@gmail.com** or **+91-9266665237**.`,
+    },
+  ];
+
+  return (
+    <section>
+      <div className="bloodBankService">
+        <div className="container">
+          <h2 className="bloodBankServiceTitle"> Blood Bank Service</h2>
+          <p className="bloodBankServiceParagrapgh">
+            Blood Transfusion Service is a vital part of the National Health
+            Service and there is no substitute for Human Blood and its
+            components. Increasing advancement in the field of Transfusion
+            Technology has necessitated to enforce stricter control over the
+            quality of Blood and its products. In most of the developed
+            countries, the blood banking system has advanced in all facets of
+            donor management, storage of blood, grouping and cross matching,
+            testing of transmissible diseases, rationale use of blood and
+            distribution. The Govt. has the full responsibility for the blood
+            programme even though, in some countries, the management of blood
+            transfusion services are delegated fully or partly to an appropriate
+            non-governmental organization (NGOs) working on a non-profit basis,
+            e.g., Red Cross Society. When a NGO is assigned this responsibility,
+            the Govt. should formally recognize it and give a clear mandate
+            formulating the national blood policy, it is important to consider
+            policy decisions enforcing appropriate regulations or necessary
+            functions of health service to ensure high quality service and safe
+            blood. In order to improve the standards of Blood and its
+            components, the Central Govt. through Drugs Controller General of
+            India, has formulated a comprehensive legislation to ensure better
+            quality control system on collection, storage, testing and
+            distribution of blood and its components. Central Govt. amended from
+            time to time the existing requirements of Blood Banks in the Drugs &
+            Cosmetics Act, 1940 and Rules thereunder to meet the latest
+            standards. Consequent to a public litigation case recently, Supreme
+            Court of India directed Central Govt. to enact a comprehensive
+            legislation on Blood Banks in collection, storage, testing and
path: src/sections/bloodBankService/BloodBankServive.tsx
user: login: mohdnoorain
body: also font size on responsive.
created_at: 2025-03-20T12:35:02Z
author_association: OWNER
diff_hunk: @@ -0,0 +1,95 @@
+import React from "react";
+import "./BloodBankServive.css";
+import DoCard from "@/components/DoCard/DoCard";
+export default function BloodBankServive() {
+  const doItems = [
+    "Write clean and modular code",
+    "Follow accessibility standards",
+    "Optimize for performance",
+    "Use semantic HTML",
+    "Ensure mobile responsiveness",
+    "Keep UI/UX simple and effective",
+  ];
+  const bloodBankAccordionData = [
+    {
+      title: "Form of Licence for Blood Bank",
+      content: `A licence for the operation of a Blood Bank or for processing whole Human Blood for components 
+    and manufacture of blood products shall be issued in Form 28-C, Form 28-E, Form 26-G, or Form 26-I.  
+    Before issuance, the following conditions must be met:
+    - The Blood Bank operation must be supervised by at least one full-time Medical Officer with:
+      - Postgraduate degree in Medicine (M.D. in Pathology/Transfusion Medicines), or
+      - M.B.B.S. with a Diploma in Pathology or Transfusion Medicines with knowledge of blood group serology, methodology, and medical principles, or
+      - M.B.B.S. with at least one year of Blood Bank experience and expertise in blood group serology and methodology.
+    The degree or diploma must be from a university recognized by the Central Government.`,
+    },
+    {
+      title: "Validity of License",
+      content: `The Blood Bank licence in Form 28-C, Form 28-E, or renewed in Form 26-G or Form 26-I is valid for five years unless suspended or cancelled.  
+    The validity starts from the date it is granted or renewed.`,
+    },
+    {
+      title: "FSSAI Licensing and Compliance Assistance",
+      content: `Obtaining an FSSAI license is a complex process requiring various documents, depending on the business type.  
+    **Barrocyte Consultants** provides:
+    - A systematic, checklist-based documentation process.
+    - Assistance for petty food businesses in FSSAI registration.
+    - Support for modification, renewal, and duplicate license issuance.
+    - License or registration for 1-5 years, requiring renewal at least 30 days before expiry.
+    - Advisory services for compliance with FSSAI regulations.
+    Food Business Operators must inform the authority of any changes in their business before implementing them.
+    For assistance, contact Barrocyte Consultants at **barrocyte@gmail.com** or **+91-9266665237**.`,
+    },
+  ];
+
+  return (
+    <section>
+      <div className="bloodBankService">
+        <div className="container">
+          <h2 className="bloodBankServiceTitle"> Blood Bank Service</h2>
+          <p className="bloodBankServiceParagrapgh">
+            Blood Transfusion Service is a vital part of the National Health
+            Service and there is no substitute for Human Blood and its
+            components. Increasing advancement in the field of Transfusion
+            Technology has necessitated to enforce stricter control over the
+            quality of Blood and its products. In most of the developed
+            countries, the blood banking system has advanced in all facets of
+            donor management, storage of blood, grouping and cross matching,
+            testing of transmissible diseases, rationale use of blood and
+            distribution. The Govt. has the full responsibility for the blood
+            programme even though, in some countries, the management of blood
+            transfusion services are delegated fully or partly to an appropriate
+            non-governmental organization (NGOs) working on a non-profit basis,
+            e.g., Red Cross Society. When a NGO is assigned this responsibility,
+            the Govt. should formally recognize it and give a clear mandate
+            formulating the national blood policy, it is important to consider
+            policy decisions enforcing appropriate regulations or necessary
+            functions of health service to ensure high quality service and safe
+            blood. In order to improve the standards of Blood and its
+            components, the Central Govt. through Drugs Controller General of
+            India, has formulated a comprehensive legislation to ensure better
+            quality control system on collection, storage, testing and
+            distribution of blood and its components. Central Govt. amended from
+            time to time the existing requirements of Blood Banks in the Drugs &
+            Cosmetics Act, 1940 and Rules thereunder to meet the latest
+            standards. Consequent to a public litigation case recently, Supreme
+            Court of India directed Central Govt. to enact a comprehensive
+            legislation on Blood Banks in collection, storage, testing and
path: src/sections/bloodBankService/BloodBankServive.tsx
user: login: Dheeru12503
body: done 
created_at: 2025-03-21T10:06:12Z
author_association: COLLABORATOR
diff_hunk: @@ -0,0 +1,95 @@
+import React from "react";
+import "./BloodBankServive.css";
+import DoCard from "@/components/DoCard/DoCard";
+export default function BloodBankServive() {
+  const doItems = [
+    "Write clean and modular code",
+    "Follow accessibility standards",
+    "Optimize for performance",
+    "Use semantic HTML",
+    "Ensure mobile responsiveness",
+    "Keep UI/UX simple and effective",
+  ];
+  const bloodBankAccordionData = [
path: src/sections/bloodBankService/BloodBankServive.tsx
user: login: Dheeru12503
body: Done
created_at: 2025-03-21T10:11:42Z
author_association: COLLABORATOR
diff_hunk: @@ -0,0 +1,142 @@
+.doingcard {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  /* width: 100%; */
+}
+
+.do-card {
+  background: #fff;
+  padding: 20px;
+  border-radius: 15px;
+  position: relative;
+  width: 350px;
+  text-align: left;
+  transition: all 0.3s ease;
+  min-height: 400px;
path: src/components/DoCard/DoCard.css
user: login: mohdnoorain
body: @Dheeru12503  why using min height 
just use some padding if want to give space 
fixing height some times breaks the responsiveness

See here unnecessary bottom space 
<img width="320" alt="Screenshot 2025-03-22 at 8 18 23 AM" src="https://github.com/user-attachments/assets/0ef836c1-5e0c-46aa-ab83-38323ba5df3c" />

created_at: 2025-03-22T02:49:06Z
author_association: OWNER
diff_hunk: @@ -0,0 +1,142 @@
+.doingcard {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  /* width: 100%; */
+}
+
+.do-card {
+  background: #fff;
+  padding: 20px;
+  border-radius: 15px;
+  position: relative;
+  width: 350px;
+  text-align: left;
+  transition: all 0.3s ease;
+  min-height: 400px;
path: src/components/DoCard/DoCard.css
user: login: Dheeru12503
body: Done 
created_at: 2025-03-22T05:03:09Z
author_association: COLLABORATOR

PR comments:
user: login: Dheeru12503
created_at: 2025-03-21T10:07:28Z
body: > <img alt="Screenshot 2025-03-20 at 6 01 00 PM" width="514" src="https://private-user-images.githubusercontent.com/97047245/424979069-aa699838-7d2c-4879-acce-117cc4039b89.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NDI1NTE4NTUsIm5iZiI6MTc0MjU1MTU1NSwicGF0aCI6Ii85NzA0NzI0NS80MjQ5NzkwNjktYWE2OTk4MzgtN2QyYy00ODc5LWFjY2UtMTE3Y2M0MDM5Yjg5LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTAzMjElMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUwMzIxVDEwMDU1NVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTdmZGRiNjAyM2E5MDg1ZTdiNmE4NzNkOWUxMTBmMjQ3YjA3MTVmM2RkODgzMzFlOGE4MjAyYTFlODQ3ZTRkZTQmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.R2tasiXSRcUFTJnHo1lO9tYKk6kTLgvMSxEeCbX51_A">
> Fix it's height and spacing a little min-height not needed.
> 
> <img alt="Screenshot 2025-03-20 at 6 02 53 PM" width="424" src="https://private-user-images.githubusercontent.com/97047245/424979719-1599fcf1-1e33-481f-91ae-eb3f743098ad.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NDI1NTE4NTUsIm5iZiI6MTc0MjU1MTU1NSwicGF0aCI6Ii85NzA0NzI0NS80MjQ5Nzk3MTktMTU5OWZjZjEtMWUzMy00ODFmLTkxYWUtZWIzZjc0MzA5OGFkLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTAzMjElMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUwMzIxVDEwMDU1NVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTJmZWI0MzRiYmYyOTE3MWM4MTE2Y2NlNTNmODQ3NGYwMTQ4ZWRlMmMzNjk0Mzk5YTM2OGRjY2M3YTRkZDUxNWEmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.WOcG8V41xfFCPjjlokLlz43dMwT-RHhcIG7y05YTf2M">
> Same again didn't changed the margin on small device
> 
> <img alt="Screenshot 2025-03-20 at 6 03 33 PM" width="433" src="https://private-user-images.githubusercontent.com/97047245/424979950-497b5865-48f4-43e0-8992-7b1ca5b150a7.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NDI1NTE4NTUsIm5iZiI6MTc0MjU1MTU1NSwicGF0aCI6Ii85NzA0NzI0NS80MjQ5Nzk5NTAtNDk3YjU4NjUtNDhmNC00M2UwLTg5OTItN2IxY2E1YjE1MGE3LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTAzMjElMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUwMzIxVDEwMDU1NVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTQxZTcwZWNlYWFkNmM0ZmY3MDc2NzJkMDE1NTFkZTgwOTM0ZGYxMzgwNzE3YTJkYTk4NTEzNDZiNWZhNjRhYWImWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.ynN1qeB0OAGKxKXKPbhypl1jqyaWPXu7c3H3com1S40">
> No margin at all.

done , Added css for responsive 
author_association: COLLABORATOR
user: login: Dheeru12503
created_at: 2025-03-21T10:08:42Z
body: > <img alt="Screenshot 2025-03-20 at 6 01 00 PM" width="514" src="https://private-user-images.githubusercontent.com/97047245/424979069-aa699838-7d2c-4879-acce-117cc4039b89.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NDI1NTE4NTUsIm5iZiI6MTc0MjU1MTU1NSwicGF0aCI6Ii85NzA0NzI0NS80MjQ5NzkwNjktYWE2OTk4MzgtN2QyYy00ODc5LWFjY2UtMTE3Y2M0MDM5Yjg5LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTAzMjElMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUwMzIxVDEwMDU1NVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTdmZGRiNjAyM2E5MDg1ZTdiNmE4NzNkOWUxMTBmMjQ3YjA3MTVmM2RkODgzMzFlOGE4MjAyYTFlODQ3ZTRkZTQmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.R2tasiXSRcUFTJnHo1lO9tYKk6kTLgvMSxEeCbX51_A">
> Fix it's height and spacing a little min-height not needed.
> 
> <img alt="Screenshot 2025-03-20 at 6 02 53 PM" width="424" src="https://private-user-images.githubusercontent.com/97047245/424979719-1599fcf1-1e33-481f-91ae-eb3f743098ad.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NDI1NTE4NTUsIm5iZiI6MTc0MjU1MTU1NSwicGF0aCI6Ii85NzA0NzI0NS80MjQ5Nzk3MTktMTU5OWZjZjEtMWUzMy00ODFmLTkxYWUtZWIzZjc0MzA5OGFkLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTAzMjElMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUwMzIxVDEwMDU1NVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTJmZWI0MzRiYmYyOTE3MWM4MTE2Y2NlNTNmODQ3NGYwMTQ4ZWRlMmMzNjk0Mzk5YTM2OGRjY2M3YTRkZDUxNWEmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.WOcG8V41xfFCPjjlokLlz43dMwT-RHhcIG7y05YTf2M">
> Same again didn't changed the margin on small device
> 
> <img alt="Screenshot 2025-03-20 at 6 03 33 PM" width="433" src="https://private-user-images.githubusercontent.com/97047245/424979950-497b5865-48f4-43e0-8992-7b1ca5b150a7.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NDI1NTE4NTUsIm5iZiI6MTc0MjU1MTU1NSwicGF0aCI6Ii85NzA0NzI0NS80MjQ5Nzk5NTAtNDk3YjU4NjUtNDhmNC00M2UwLTg5OTItN2IxY2E1YjE1MGE3LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTAzMjElMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUwMzIxVDEwMDU1NVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTQxZTcwZWNlYWFkNmM0ZmY3MDc2NzJkMDE1NTFkZTgwOTM0ZGYxMzgwNzE3YTJkYTk4NTEzNDZiNWZhNjRhYWImWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.ynN1qeB0OAGKxKXKPbhypl1jqyaWPXu7c3H3com1S40">
> No margin at all.

Done
author_association: COLLABORATOR
user: login: Dheeru12503
created_at: 2025-03-21T10:10:37Z
body: > <img alt="Screenshot 2025-03-20 at 6 01 00 PM" width="514" src="https://private-user-images.githubusercontent.com/97047245/424979069-aa699838-7d2c-4879-acce-117cc4039b89.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NDI1NTIxMDEsIm5iZiI6MTc0MjU1MTgwMSwicGF0aCI6Ii85NzA0NzI0NS80MjQ5NzkwNjktYWE2OTk4MzgtN2QyYy00ODc5LWFjY2UtMTE3Y2M0MDM5Yjg5LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTAzMjElMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUwMzIxVDEwMTAwMVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWM1NWI3Nzk5YmVkZmMxYmYwZGUyMWU5NDQ3NTllOWYxODFjZTJhZWJlY2EzYzg3OWQ0MmI4YmY0OTJhMmIzZjMmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.rgqxsj1IF8eC_-lDrHLV64Y0jgWkMUUyMf1cHqM07RU">
> Fix it's height and spacing a little min-height not needed.
> 
> <img alt="Screenshot 2025-03-20 at 6 02 53 PM" width="424" src="https://private-user-images.githubusercontent.com/97047245/424979719-1599fcf1-1e33-481f-91ae-eb3f743098ad.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NDI1NTIxMDEsIm5iZiI6MTc0MjU1MTgwMSwicGF0aCI6Ii85NzA0NzI0NS80MjQ5Nzk3MTktMTU5OWZjZjEtMWUzMy00ODFmLTkxYWUtZWIzZjc0MzA5OGFkLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTAzMjElMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUwMzIxVDEwMTAwMVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWU0YjJmNDFiM2EyYmY4NTc3ZGZjZTc4YjRmNDI1OTAzODMyY2Y2OGUwYzM0OTY3MWY1MDBkMDFkOTI3ODc2NWQmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.VqZmiVmNu_tKXqEDBRgWkEkljNAxjEvRDC7mAeW26kc">
> Same again didn't changed the margin on small device
> 
> <img alt="Screenshot 2025-03-20 at 6 03 33 PM" width="433" src="https://private-user-images.githubusercontent.com/97047245/424979950-497b5865-48f4-43e0-8992-7b1ca5b150a7.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NDI1NTIxMDEsIm5iZiI6MTc0MjU1MTgwMSwicGF0aCI6Ii85NzA0NzI0NS80MjQ5Nzk5NTAtNDk3YjU4NjUtNDhmNC00M2UwLTg5OTItN2IxY2E1YjE1MGE3LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTAzMjElMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUwMzIxVDEwMTAwMVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTQwY2M3ZWYxODVhMzdmNDlhMDQ2NTRkMzA3M2ExMTQzMGRkOTI3YTUyYjU4MjFlOWY0YzcwYWQ0MDMwZTE5NzMmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.Xde_1fvKuHsNA9xAs-4xO9O1cNzHErpNUNL4vjfYuPo">
> No margin at all.

Done 
author_association: COLLABORATOR
user: login: Dheeru12503
created_at: 2025-03-21T10:11:02Z
body: > <img alt="Screenshot 2025-03-20 at 6 01 00 PM" width="514" src="https://private-user-images.githubusercontent.com/97047245/424979069-aa699838-7d2c-4879-acce-117cc4039b89.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NDI1NTIxMDEsIm5iZiI6MTc0MjU1MTgwMSwicGF0aCI6Ii85NzA0NzI0NS80MjQ5NzkwNjktYWE2OTk4MzgtN2QyYy00ODc5LWFjY2UtMTE3Y2M0MDM5Yjg5LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTAzMjElMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUwMzIxVDEwMTAwMVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWM1NWI3Nzk5YmVkZmMxYmYwZGUyMWU5NDQ3NTllOWYxODFjZTJhZWJlY2EzYzg3OWQ0MmI4YmY0OTJhMmIzZjMmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.rgqxsj1IF8eC_-lDrHLV64Y0jgWkMUUyMf1cHqM07RU">
> Fix it's height and spacing a little min-height not needed.
> 
> <img alt="Screenshot 2025-03-20 at 6 02 53 PM" width="424" src="https://private-user-images.githubusercontent.com/97047245/424979719-1599fcf1-1e33-481f-91ae-eb3f743098ad.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NDI1NTIxMDEsIm5iZiI6MTc0MjU1MTgwMSwicGF0aCI6Ii85NzA0NzI0NS80MjQ5Nzk3MTktMTU5OWZjZjEtMWUzMy00ODFmLTkxYWUtZWIzZjc0MzA5OGFkLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTAzMjElMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUwMzIxVDEwMTAwMVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWU0YjJmNDFiM2EyYmY4NTc3ZGZjZTc4YjRmNDI1OTAzODMyY2Y2OGUwYzM0OTY3MWY1MDBkMDFkOTI3ODc2NWQmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.VqZmiVmNu_tKXqEDBRgWkEkljNAxjEvRDC7mAeW26kc">
> Same again didn't changed the margin on small device
> 
> <img alt="Screenshot 2025-03-20 at 6 03 33 PM" width="433" src="https://private-user-images.githubusercontent.com/97047245/424979950-497b5865-48f4-43e0-8992-7b1ca5b150a7.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NDI1NTIxMDEsIm5iZiI6MTc0MjU1MTgwMSwicGF0aCI6Ii85NzA0NzI0NS80MjQ5Nzk5NTAtNDk3YjU4NjUtNDhmNC00M2UwLTg5OTItN2IxY2E1YjE1MGE3LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTAzMjElMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUwMzIxVDEwMTAwMVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTQwY2M3ZWYxODVhMzdmNDlhMDQ2NTRkMzA3M2ExMTQzMGRkOTI3YTUyYjU4MjFlOWY0YzcwYWQ0MDMwZTE5NzMmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.Xde_1fvKuHsNA9xAs-4xO9O1cNzHErpNUNL4vjfYuPo">
> No margin at all.

Done
author_association: COLLABORATOR