Skip to content

Make pricing comparison header sticky #7829

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
jkhush04 wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Make pricing comparison header sticky #7829

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
31b7a9e
Make pricing comparison header sticky
jkhush04 Jun 27, 2026
f0c28a6
Merge branch 'master' into feat/khushii
jkhush04 Jun 27, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
271 changes: 142 additions & 129 deletions src/sections/Pricing/comparison.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,40 +1,43 @@
import React from "react";
import styled from "styled-components";
import details from "./generateDetails";
import details from "./generateDetails";
import { Container } from "../../reusecore/Layout";
// import FeatureDetails from "./collapsible-details";
import FeatureDetails from "../../components/Pricing/PlanCard/collapsible-details";


const ComparisonWrapper = styled.div`
margin: 6rem auto;
@media (min-width: 2048px) {
margin: 15rem auto;
}
margin: 6rem auto;
@media (min-width: 2048px) {
margin: 15rem auto;
}

h2, h5{
text-align: center;
}
h2,
h5 {
text-align: center;
}

.main {
box-shadow: 0 0 24px ${props => props.theme.whiteOneFiveToBlackOneFive};
.main {
box-shadow: 0 0 24px ${(props) => props.theme.whiteOneFiveToBlackOneFive};
margin: 2rem auto;
display: block;
overflow-x: scroll;
overflow-y:hidden;
overflow-x: auto;
overflow-y: auto;
position: Relative;
transition: 0.6s cubic-bezier(0.5, 1);
}
.price-table {
}
.price-table {
width: 100%;
border-collapse: collapse;
border: 0 none;
}
.price-table tr:not(:last-child) {
border-bottom: 1px solid ${props => props.theme.whiteZeroThreeToBlackZeroThree};
}
.price-table tr:not(:last-child) {
border-bottom: 1px solid
${(props) => props.theme.whiteZeroThreeToBlackZeroThree};
transition: 0.6s cubic-bezier(0.5, 1);
}
.price-table tr td {
border-left: 1px solid ${props => props.theme.whiteZeroFiveToBlackZeroFive};
}
.price-table tr td {
border-left: 1px solid
${(props) => props.theme.whiteZeroFiveToBlackZeroFive};
padding: 0rem 2rem;
font-size: 1rem;
vertical-align: middle;
Expand All @@ -46,154 +49,156 @@ h2, h5{
padding-top: 1rem;
font-size: 1.2rem;
}
}
.price-table tr td:first-child {
}
.price-table tr td:first-child {
border-left: 0 none;
width: 100%;
justify-content: flex-start;
text-align: left;
}
.price-table tr td:not(:first-child) {
}
.price-table tr td:not(:first-child) {
text-align: center;
}
.price-table tr:nth-child(even) {
}
}
.price-table tr:nth-child(even) {
}

.price-table tr:hover {
background-color: ${props => props.theme.secondaryLightColor};
.price-table tr:hover {
background-color: ${(props) => props.theme.secondaryLightColor};
transition: 0.6s cubic-bezier(0.5, 1);
}
.price-table .fa-check {
}
.price-table .fa-check {
color: #5336ca;
}
.price-table .fa-times {
color: #D8D6E3;
}
}
.price-table .fa-times {
color: #d8d6e3;
}

/* Highlighted column */
/* Highlighted column */

.price-table tr td:nth-child(3) {
background: rgba(0,179,159,0.1);
.price-table tr td:nth-child(3) {
background: rgba(0, 179, 159, 0.1);
padding: 8px 48px;
}
}

.price-table tr.price-table-head td {
.price-table tr.price-table-head td {
font-size: 1.15rem;
line-height: 1.5rem;
font-weight: 600;
padding: .5rem;
padding: 0.5rem;
position: sticky;
top: 0;
z-index: 2;
text-transform: uppercase;
}
.price-table tr.price-table-head {
background-color:${props => props.theme.secondaryColor};
color: #FFFFFF;
}
.price-table td.price {
}
.price-table tr.price-table-head {
background-color: ${(props) => props.theme.secondaryColor};
color: #ffffff;
}
.price-table td.price {
padding: 16px 24px;
font-size: 20px;
font-weight: 600;
}
.price-table td.price .button {
}
.price-table td.price .button {
padding: 1rem 1.5rem;
margin-top: 16px;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
display: inline-block;
border-radius: 64px;
}
.price-table th.price-table-popular {
}
.price-table th.price-table-popular {
border-top: 3px solid #00b39f;
color:${props => props.theme.saffronColor};
background-color:rgba(0,179,159,0.1);
color: ${(props) => props.theme.saffronColor};
background-color: rgba(0, 179, 159, 0.1);
text-transform: uppercase;
font-size: 12px;
padding: 12px 48px;
font-weight: 700;
}
.price-table .price-blank {
background-color: ${props => props.theme.secondaryDarkColor};
}
.price-table .price-blank {
background-color: ${(props) => props.theme.secondaryDarkColor};
border: 0 none;
transition: 0.6s cubic-bezier(0.5, 1);
}
}

.category {
display: inline-block;
margin: 0 1rem;
}
.category {
display: inline-block;
margin: 0 1rem;
}

.icon {
.icon {
height: 4rem;
width: auto;
fill: #00b39f;
display: inline-block;
}
.no-icon {
height: 1.5rem;
width: auto;
fill: red;
}
.yes-icon {
height: 1.5rem;
width: auto;
fill: #00b39f;
}
.toggle-btn {
margin-top: 1rem;
}
.details {
p {
color: #7A848E;
margin-left: 1.1rem;
}
}
.category-icon {

}
.categories {
display: flex;
width: 100%;
text-align: left;
align-items: center;
margin: 1rem auto;
}
.docs {
width:1rem;
height:1rem;
}

td.feature {
padding: auto;
margin: 0px;
}
.feature-link-container {
display: flex;
align-items: center;
justify-content: space-between;
}

.feature-name {
margin-right: 0.5rem;
}

.feature-link {
color: #00b39f;
text-decoration: none;
font-size: 0.9rem;
}
.feature-link > svg {
&:hover {
opacity:.5;
}
.no-icon {
height: 1.5rem;
width: auto;
fill: red;
}
.yes-icon {
height: 1.5rem;
width: auto;
fill: #00b39f;
}
.toggle-btn {
margin-top: 1rem;
}
.details {
p {
color: #7a848e;
margin-left: 1.1rem;
}
}
.feature-link:hover {
text-decoration: underline;
}
.category-icon {
}
.categories {
display: flex;
width: 100%;
text-align: left;
align-items: center;
margin: 1rem auto;
}
.docs {
width: 1rem;
height: 1rem;
}

td.feature {
padding: auto;
margin: 0px;
}
.feature-link-container {
display: flex;
align-items: center;
justify-content: space-between;
}

.feature-name {
margin-right: 0.5rem;
}

.feature-link {
color: #00b39f;
text-decoration: none;
font-size: 0.9rem;
}
.feature-link > svg {
&:hover {
opacity: 0.5;
}
}
.feature-link:hover {
text-decoration: underline;
}
`;

const Comparison = () => {
return (
<ComparisonWrapper >
<ComparisonWrapper>
<h2>Compare All Features</h2>
<h5 id={"feature-comparison"}>Choose a plan that’s right for you</h5>
<Container>
Expand All @@ -217,15 +222,25 @@ const Comparison = () => {

{details.map((x) => (
<>
<tr key={x.id} >
<tr key={x.id}>
<td className="categories" colSpan="5">
<img src={x.icon} height={32} className="category-icon" alt={x.category} />
<img
src={x.icon}
height={32}
className="category-icon"
alt={x.category}
/>
<h3 className="category">{x.category}</h3>
</td>
</tr>
{x.features.map((f) => (
<tr key={f.feature}>
<td><FeatureDetails category={f.feature} description={f.description} /></td>
<td>
<FeatureDetails
category={f.feature}
description={f.description}
/>
</td>
<td className="feature">{f.free}</td>
<td className="feature">{f.teamDesigner}</td>
<td className="feature">{f.teamOperator}</td>
Expand All @@ -234,12 +249,10 @@ const Comparison = () => {
))}
</>
))}

</tbody>
</table>
</div>
</Container>

</ComparisonWrapper>
);
};
Expand Down
Loading