Merge branch 'aryanshah/enhance_dialog_component' of https://github.com/ARYANSHAH1567/layer5 into aryanshah/enhance_dialog_component

Author: ARYANSHAH1567

package-lock.json

@@ -42,7 +42,7 @@
     "@mui/icons-material": "^6.4.6",
     "@mui/material": "^5.15.11",
     "@react-icons/all-files": "^4.1.0",
-    "@sistent/sistent": "^0.15.5",
+    "@sistent/sistent": "^0.15.6",
     "@svgr/webpack": "^8.0.1",
     "@types/mui-datatables": "^4.3.12",
     "ajv": "^8.17.1",

package.json

@@ -0,0 +1,13 @@
+---
+name: Saurabh Raghuvanshi
+position: Contributor
+image_path: ./Saurabh-Raghuvanshi.jpg
+github: saurabhraghuvanshii
+twitter: saurabhksinghr
+linkedin: saurabhraghuvanshii
+layer5: 1f3217b2-072d-49f9-840d-61b878a73f79
+location: New Delhi, India
+bio: I’m Saurabh Raghuvanshi, a 3rd-year CSE undergraduate passionate about open-source contributions, coding, and exploring new concepts. I enjoy making a small yet meaningful impact through my code.
+status: Active
+published: true
+---

src/assets/images/sistent/placeholder/user.webp

@@ -0,0 +1,12 @@
+---
+name: Shashaank Srivastava
+position: Contributor
+image_path: ./Shashaank-Srivastava.jpg
+github: ShashaankS
+linkedin: shashaank-srivastava-852933289
+layer5: ac229fa5-156c-4ed8-8c85-9ccf090b63ec
+location: Uttar Pradesh, India
+bio: Hello World! I’m Shashaank Srivastava, student at IIITDM Jabalpur, passionate about cloud-native systems, backend and frontend development. A curious learner and problem solver, I love experimenting, collaborating, and creating impactful tech solutions.
+status: Active
+published: true
+---

src/collections/members/Saurabh-Raghuvanshi/Saurabh-Raghuvanshi.jpg

@@ -7,27 +7,44 @@ const FeatureDetailsWrapper = styled.div`
   display: inline;
   cursor: pointer;
 
-  .open {
-    margin: 0rem;
-    list-style: none;
-    height: auto !important;
-    opacity: 1 !important;
+  .details > * {
+    max-height: 0;
+    opacity: 0;
+    margin: 0;
+    visibility: hidden;
+    overflow: hidden;
+    transition: opacity 0.2s ease-in-out, 
+                max-height 0.3s ease-in-out 0.1s,
+                margin 0.3s ease-in-out 0.1s,
+                visibility 0s linear 0.4s;
+  }
+
+  .details > .open {
+    max-height: 200px;
+    opacity: 1;
     margin-bottom: 1rem;
-    transition: all 0.4s !important;
+    visibility: visible;
+    transition: visibility 0s linear,
+                opacity 0.2s ease-in-out 0.1s, 
+                max-height 0.3s ease-in-out 0.2s,
+                margin 0.3s ease-in-out 0.2s;
   }
 
   .toggle-icon {
     width: 1.2rem;
     height: 1.2rem;
     fill: ${(props) => props.theme.primaryColor};
-    transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
+    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
+  }
+
+  .toggle-icon.expanded {
+    transform: rotate(90deg);
   }
 
   p {
     font-size: 0.9rem;
     margin: 0.5rem;
     color: ${(props) => props.theme.greyC1C1C1ToGreyB3B3B3};
-    transition: 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
   }
 
   .toggle-btn {
@@ -36,17 +53,6 @@ const FeatureDetailsWrapper = styled.div`
     vertical-align: middle;
   }
 
-  .closed {
-    opacity: 1;
-    height: 0;
-    transition: none;
-    visibility: hidden;
-  }
-
-  .open {
-    visibility: visible;
-  }
-
   h5 {
     display: inline-block;
     vertical-align: middle;
@@ -65,26 +71,25 @@ const FeatureDetailsWrapper = styled.div`
   }
 `;
 
-const FeatureDetails = ({ category, description, tier }) => {
+const FeatureDetails = ({ category, description, tier, children, onToggle }) => {
   const [expand, setExpand] = React.useState(false);
 
+  // Call onToggle when expand changes
+  React.useEffect(() => {
+    onToggle?.(expand);
+  }, [expand, onToggle]);
+
   const BetaTag = () => <span className="beta-tag">Coming Soon</span>;
 
   return (
     <FeatureDetailsWrapper>
       <div onClick={() => setExpand(!expand)}>
-        {description && (
+        {(description || children) && (
           <div className="toggle-btn">
             {expand ? (
-              <MdExpandMore
-                className="toggle-icon"
-                onClick={() => setExpand(!expand)}
-              />
+              <MdExpandMore className="toggle-icon" />
             ) : (
-              <RiArrowRightSLine
-                className="toggle-icon"
-                onClick={() => setExpand(!expand)}
-              />
+              <RiArrowRightSLine className="toggle-icon" />
             )}
           </div>
         )}
@@ -93,13 +98,18 @@ const FeatureDetails = ({ category, description, tier }) => {
           {tier === "Team-Beta" && <BetaTag />}
         </h5>
         <div className="details">
-          <p className={`closed ${expand ? "open" : ""}`}
-            dangerouslySetInnerHTML={{ __html: description }}>
-          </p>
+          {description && (
+            <p className={expand ? "open" : ""} dangerouslySetInnerHTML={{ __html: description }} />
+          )}
+          {children && (
+            <div className={expand ? "open" : ""}>
+              {children}
+            </div>
+          )}
         </div>
       </div>
     </FeatureDetailsWrapper>
   );
 };
 
-export default FeatureDetails;
+export default FeatureDetails;

src/collections/members/Saurabh-Raghuvanshi/index.mdx

@@ -1,6 +1,6 @@
 import React from "react";
-import Button from "../../reusecore/Button";
-import { Col, Row, Container } from "../../reusecore/Layout";
+import Button from "../../../reusecore/Button";
+import { Col, Row, Container } from "../../../reusecore/Layout";
 import PlanCardWrapper from "./planCard.style";
 import FeatureDetails from "./collapsible-details";
 
@@ -29,7 +29,7 @@ const PlanCard = ({ planData , isYearly }) => {
 
                 {x.tier === "Personal" ? <div className="pricing-label">Free Forever</div> : null}
 
-                {x.tier === "Enterprise" ? <div className="featured-label">Most Popular</div> : null}
+                {x.tier === "Team Designer" ? <div className="featured-label">Most Popular</div> : null}
 
                 {/* {x.pricing_coming_soon && (
                   <div className="pricing_coming_soon">
@@ -94,15 +94,30 @@ const PlanCard = ({ planData , isYearly }) => {
 
                 <div className="pricing-features">
                   {x.summary &&
-                    x.summary.map((t) => (
-                      <div className="feature" key={t.id}>
-                        <FeatureDetails
-                          category={t.category}
-                          description={t.description}
-                          tier={t.tier}
-                        />
-                      </div>
-                    ))}
+                    x.summary.map((t, index) => {
+                      // Check if this is the first add-on feature
+                      const isFirstAddOn = t.categoryOrder === "add-on" &&
+                        (index === 0 || x.summary[index - 1].categoryOrder !== "add-on");
+
+                      return (
+                        <div key={t.id}>
+                          {isFirstAddOn && (
+                            <div className="add-on-separator">
+                              <span className="add-on-label">Add-on Features</span>
+                              <hr className="add-on-line" />
+
+                            </div>
+                          )}
+                          <div className="feature">
+                            <FeatureDetails
+                              category={t.category}
+                              description={t.description}
+                              tier={t.tier}
+                            />
+                          </div>
+                        </div>
+                      );
+                    })}
                 </div>
 
               </div>

src/collections/members/Shashaank-Srivastava/Shashaank-Srivastava.jpg

@@ -138,6 +138,22 @@ const PlanCardWrapper = styled.section`
   .pricing-features {
     margin-top: 2rem;
     line-height: 1rem;
+    .add-on-separator {
+      margin: 1.5rem 0 1rem 0;
+      .add-on-label {
+        font-size: 0.75rem;
+        font-weight: 500;
+        color: ${(props) => props.theme.secondaryColor};
+        margin-bottom: 0.5rem;
+        display: block;
+      }
+      .add-on-line {
+        border: none;
+        border-top: 1px solid ${(props) => props.theme.greyDCDCDCToGrey3B3B3B};
+        opacity: 0.5;
+        margin: 0;
+      }
+    }
     .feature {
       margin: 0rem 0rem;
       line-height: 1rem;
@@ -210,7 +226,36 @@ const PlanCardWrapper = styled.section`
   font-weight: 500;
   transition: 0.3s;
   background: ${(props) => props.theme.secondaryColor};
+
+}
+.addon-chip {
+  background-color: rgba(0, 179, 159, 0.15);
+  color: ${(props) => props.theme.text.light};
+  border: 1px solid;
+  border-color: ${(props) => props.theme.secondaryColor};
+  min-width: 40%;
+  justify-content: flex-start;
+  display: flex;
 }
+.addon-chip .MuiChip-icon {
+    color: ${(props) => props.theme.secondaryColor};
+    line-height: 1rem;
+}
+
+.MuiTypography-root {
+  font-family: "Qanelas Soft", "Open Sans", sans-serif;
+}
+  .MuiSlider-root {
+  "& .MuiSlider-mark": {
+    fontSize: "12px",
+    color: ${(props) => props.theme.text.light};
+  },
+  "& .MuiSlider-markLabel": {
+    fontSize: "12px",
+    color: ${(props) => props.theme.secondaryColor};
+  },
+  }
+});
 `;
 
 export default PlanCardWrapper;