Skip to content

Commit 8ca827d

Browse files
vr-varadvr-varad
authored
Merge branch 'master' into update/projects
2 parents d38341e + 369c9fa commit 8ca827d

38 files changed

Lines changed: 3466 additions & 423 deletions

File tree

‎package-lock.json‎

Lines changed: 4 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@
4242
"@mui/icons-material": "^6.4.6",
4343
"@mui/material": "^5.15.11",
4444
"@react-icons/all-files": "^4.1.0",
45-
"@sistent/sistent": "^0.15.5",
45+
"@sistent/sistent": "^0.15.6",
4646
"@svgr/webpack": "^8.0.1",
4747
"@types/mui-datatables": "^4.3.12",
4848
"ajv": "^8.17.1",

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

2.02 KB
Loading

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

4.31 MB
Loading

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

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
---
2+
name: Saurabh Raghuvanshi
3+
position: Contributor
4+
image_path: ./Saurabh-Raghuvanshi.jpg
5+
github: saurabhraghuvanshii
6+
twitter: saurabhksinghr
7+
linkedin: saurabhraghuvanshii
8+
layer5: 1f3217b2-072d-49f9-840d-61b878a73f79
9+
location: New Delhi, India
10+
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.
11+
status: Active
12+
published: true
13+
---

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

66.5 KB
Loading

‎src/collections/members/Shashaank-Srivastava/index.mdx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
---
2+
name: Shashaank Srivastava
3+
position: Contributor
4+
image_path: ./Shashaank-Srivastava.jpg
5+
github: ShashaankS
6+
linkedin: shashaank-srivastava-852933289
7+
layer5: ac229fa5-156c-4ed8-8c85-9ccf090b63ec
8+
location: Uttar Pradesh, India
9+
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.
10+
status: Active
11+
published: true
12+
---

src/components/PlanCard/collapsible-details.js renamed to src/components/Pricing/PlanCard/collapsible-details.js

Lines changed: 43 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -7,27 +7,44 @@ const FeatureDetailsWrapper = styled.div`
77
display: inline;
88
cursor: pointer;
99
10-
.open {
11-
margin: 0rem;
12-
list-style: none;
13-
height: auto !important;
14-
opacity: 1 !important;
10+
.details > * {
11+
max-height: 0;
12+
opacity: 0;
13+
margin: 0;
14+
visibility: hidden;
15+
overflow: hidden;
16+
transition: opacity 0.2s ease-in-out,
17+
max-height 0.3s ease-in-out 0.1s,
18+
margin 0.3s ease-in-out 0.1s,
19+
visibility 0s linear 0.4s;
20+
}
21+
22+
.details > .open {
23+
max-height: 200px;
24+
opacity: 1;
1525
margin-bottom: 1rem;
16-
transition: all 0.4s !important;
26+
visibility: visible;
27+
transition: visibility 0s linear,
28+
opacity 0.2s ease-in-out 0.1s,
29+
max-height 0.3s ease-in-out 0.2s,
30+
margin 0.3s ease-in-out 0.2s;
1731
}
1832
1933
.toggle-icon {
2034
width: 1.2rem;
2135
height: 1.2rem;
2236
fill: ${(props) => props.theme.primaryColor};
23-
transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
37+
transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
38+
}
39+
40+
.toggle-icon.expanded {
41+
transform: rotate(90deg);
2442
}
2543
2644
p {
2745
font-size: 0.9rem;
2846
margin: 0.5rem;
2947
color: ${(props) => props.theme.greyC1C1C1ToGreyB3B3B3};
30-
transition: 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
3148
}
3249
3350
.toggle-btn {
@@ -36,17 +53,6 @@ const FeatureDetailsWrapper = styled.div`
3653
vertical-align: middle;
3754
}
3855
39-
.closed {
40-
opacity: 1;
41-
height: 0;
42-
transition: none;
43-
visibility: hidden;
44-
}
45-
46-
.open {
47-
visibility: visible;
48-
}
49-
5056
h5 {
5157
display: inline-block;
5258
vertical-align: middle;
@@ -65,26 +71,25 @@ const FeatureDetailsWrapper = styled.div`
6571
}
6672
`;
6773

68-
const FeatureDetails = ({ category, description, tier }) => {
74+
const FeatureDetails = ({ category, description, tier, children, onToggle }) => {
6975
const [expand, setExpand] = React.useState(false);
7076

77+
// Call onToggle when expand changes
78+
React.useEffect(() => {
79+
onToggle?.(expand);
80+
}, [expand, onToggle]);
81+
7182
const BetaTag = () => <span className="beta-tag">Coming Soon</span>;
7283

7384
return (
7485
<FeatureDetailsWrapper>
7586
<div onClick={() => setExpand(!expand)}>
76-
{description && (
87+
{(description || children) && (
7788
<div className="toggle-btn">
7889
{expand ? (
79-
<MdExpandMore
80-
className="toggle-icon"
81-
onClick={() => setExpand(!expand)}
82-
/>
90+
<MdExpandMore className="toggle-icon" />
8391
) : (
84-
<RiArrowRightSLine
85-
className="toggle-icon"
86-
onClick={() => setExpand(!expand)}
87-
/>
92+
<RiArrowRightSLine className="toggle-icon" />
8893
)}
8994
</div>
9095
)}
@@ -93,13 +98,18 @@ const FeatureDetails = ({ category, description, tier }) => {
9398
{tier === "Team-Beta" && <BetaTag />}
9499
</h5>
95100
<div className="details">
96-
<p className={`closed ${expand ? "open" : ""}`}
97-
dangerouslySetInnerHTML={{ __html: description }}>
98-
</p>
101+
{description && (
102+
<p className={expand ? "open" : ""} dangerouslySetInnerHTML={{ __html: description }} />
103+
)}
104+
{children && (
105+
<div className={expand ? "open" : ""}>
106+
{children}
107+
</div>
108+
)}
99109
</div>
100110
</div>
101111
</FeatureDetailsWrapper>
102112
);
103113
};
104114

105-
export default FeatureDetails;
115+
export default FeatureDetails;

src/components/PlanCard/index.js renamed to src/components/Pricing/PlanCard/index.js

Lines changed: 27 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from "react";
2-
import Button from "../../reusecore/Button";
3-
import { Col, Row, Container } from "../../reusecore/Layout";
2+
import Button from "../../../reusecore/Button";
3+
import { Col, Row, Container } from "../../../reusecore/Layout";
44
import PlanCardWrapper from "./planCard.style";
55
import FeatureDetails from "./collapsible-details";
66

@@ -29,7 +29,7 @@ const PlanCard = ({ planData , isYearly }) => {
2929

3030
{x.tier === "Personal" ? <div className="pricing-label">Free Forever</div> : null}
3131

32-
{x.tier === "Enterprise" ? <div className="featured-label">Most Popular</div> : null}
32+
{x.tier === "Team Designer" ? <div className="featured-label">Most Popular</div> : null}
3333

3434
{/* {x.pricing_coming_soon && (
3535
<div className="pricing_coming_soon">
@@ -94,15 +94,30 @@ const PlanCard = ({ planData , isYearly }) => {
9494

9595
<div className="pricing-features">
9696
{x.summary &&
97-
x.summary.map((t) => (
98-
<div className="feature" key={t.id}>
99-
<FeatureDetails
100-
category={t.category}
101-
description={t.description}
102-
tier={t.tier}
103-
/>
104-
</div>
105-
))}
97+
x.summary.map((t, index) => {
98+
// Check if this is the first add-on feature
99+
const isFirstAddOn = t.categoryOrder === "add-on" &&
100+
(index === 0 || x.summary[index - 1].categoryOrder !== "add-on");
101+
102+
return (
103+
<div key={t.id}>
104+
{isFirstAddOn && (
105+
<div className="add-on-separator">
106+
<span className="add-on-label">Add-on Features</span>
107+
<hr className="add-on-line" />
108+
109+
</div>
110+
)}
111+
<div className="feature">
112+
<FeatureDetails
113+
category={t.category}
114+
description={t.description}
115+
tier={t.tier}
116+
/>
117+
</div>
118+
</div>
119+
);
120+
})}
106121
</div>
107122

108123
</div>

src/components/PlanCard/planCard.style.js renamed to src/components/Pricing/PlanCard/planCard.style.js

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -138,6 +138,22 @@ const PlanCardWrapper = styled.section`
138138
.pricing-features {
139139
margin-top: 2rem;
140140
line-height: 1rem;
141+
.add-on-separator {
142+
margin: 1.5rem 0 1rem 0;
143+
.add-on-label {
144+
font-size: 0.75rem;
145+
font-weight: 500;
146+
color: ${(props) => props.theme.secondaryColor};
147+
margin-bottom: 0.5rem;
148+
display: block;
149+
}
150+
.add-on-line {
151+
border: none;
152+
border-top: 1px solid ${(props) => props.theme.greyDCDCDCToGrey3B3B3B};
153+
opacity: 0.5;
154+
margin: 0;
155+
}
156+
}
141157
.feature {
142158
margin: 0rem 0rem;
143159
line-height: 1rem;
@@ -210,7 +226,36 @@ const PlanCardWrapper = styled.section`
210226
font-weight: 500;
211227
transition: 0.3s;
212228
background: ${(props) => props.theme.secondaryColor};
229+
230+
}
231+
.addon-chip {
232+
background-color: rgba(0, 179, 159, 0.15);
233+
color: ${(props) => props.theme.text.light};
234+
border: 1px solid;
235+
border-color: ${(props) => props.theme.secondaryColor};
236+
min-width: 40%;
237+
justify-content: flex-start;
238+
display: flex;
213239
}
240+
.addon-chip .MuiChip-icon {
241+
color: ${(props) => props.theme.secondaryColor};
242+
line-height: 1rem;
243+
}
244+
245+
.MuiTypography-root {
246+
font-family: "Qanelas Soft", "Open Sans", sans-serif;
247+
}
248+
.MuiSlider-root {
249+
"& .MuiSlider-mark": {
250+
fontSize: "12px",
251+
color: ${(props) => props.theme.text.light};
252+
},
253+
"& .MuiSlider-markLabel": {
254+
fontSize: "12px",
255+
color: ${(props) => props.theme.secondaryColor};
256+
},
257+
}
258+
});
214259
`;
215260

216261
export default PlanCardWrapper;

0 commit comments

Comments
 (0)