Skip to content

Commit

Permalink
Merge pull request #2220 from G-code7/geeksvsothers
Browse files Browse the repository at this point in the history 
 Redesign the table component
  • Loading branch information
@alesanchezr
alesanchezr authored Feb 12, 2025
2 parents 00a51d2 + b2e4726 commit 805dc4b
Show file tree
Hide file tree
Showing 8 changed files with 191 additions and 83 deletions.
170 changes: 118 additions & 52 deletions src/components/GeeksVsOthers/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ const GeeksVsOthers = ({
featured
at_geeks
average
logo
}
button {
Expand All @@ -56,28 +57,41 @@ const GeeksVsOthers = ({
if (geeks) geeks = geeks.node;

return (
<Div padding="40px 0" display="block" style={style}>
{title && paragraph && (
<Div
padding="40px 0"
display="flex"
alignItems="center"
width="100%"
margin="0 auto"
justifyContent="center"
style={style}
>
{(title || paragraph) && (
<Div
display="flex"
flexDirection="column"
alignItems="center"
padding_tablet="0 4em"
padding="0 2em"
padding="0"
margin_tablet="0 auto 38px auto"
margin="0 auto 24px auto"
maxWidth="1280px"
>
<H2
margin="0 0 15px 0"
fontWeight="400"
lineHeight="29px"
lineHeight_tablet="38px"
marginTop="30px"
>
{title}
</H2>
<SubTitle>{paragraph}</SubTitle>
{title && (
<H2
margin="0 0 15px 0"
fontWeight="400"
fontSize="32px"
fontSize_md="36px"
fontSize_xs="15x"
lineHeight="32px"
lineHeight_tablet="38px"
marginTop="30px"
>
{title}
</H2>
)}
{paragraph && <SubTitle>{paragraph}</SubTitle>}
</Div>
)}

Expand All @@ -87,9 +101,12 @@ const GeeksVsOthers = ({
display_xxs="none"
display_md="flex"
maxWidth="1280px"
margin="0 auto"
padding="20px"
margin="20px"
padding="0"
justifyContent="center"
border="1px solid black"
borderRadius="4px"
boxShadow="10px 10px 0px 0px rgba(0,0,0)"
>
<GridContainer
borderRadiusChild="4px"
Expand All @@ -99,7 +116,7 @@ const GeeksVsOthers = ({
gridColumn_tablet="1 / span 12"
columns_tablet="9"
columns="3"
backgroundChild={mainBackround || Colors.whitePink}
backgroundChild={mainBackround || Colors.white}
gridGap="0"
columnGap="16px"
padding_tabletChild="10px"
Expand All @@ -115,8 +132,9 @@ const GeeksVsOthers = ({
>
<H3
textAlign="left"
fontWeight="400"
lineHeight="28px"
fontSize="24px"
fontWeight="600"
lineHeight="20px"
color={Colors.darkGray}
>
{geeks.titles.featured}
Expand All @@ -128,17 +146,31 @@ const GeeksVsOthers = ({
alignItems="center"
background={Colors.blue}
borderRadius="4px 4px 0 0"
padding="0 25px 0 20px"
padding="25px 20px"
padding_tablet="0 16px"
>
<H3
textAlign="left"
fontWeight="400"
lineHeight="28px"
color={Colors.white}
>
{geeks.titles.at_geeks}
</H3>
<Div display="flex" alignItems="center">
{geeks.titles.logo && (
<img
src={geeks.titles.logo}
alt="Rigobot Logo"
style={{
width: "40px",
height: "40px",
marginRight: "10px",
}}
/>
)}
<H3
textAlign="left"
fontSize="24px"
fontWeight="600"
lineHeight="20px"
color={Colors.white}
>
{geeks.titles.at_geeks}
</H3>
</Div>
</Div>
<Div
gridColumn_tablet="7 / 10"
Expand All @@ -151,8 +183,9 @@ const GeeksVsOthers = ({
>
<H3
textAlign="left"
fontWeight="400"
lineHeight="28px"
fontSize="24px"
fontWeight="600"
lineHeight="20px"
color={Colors.darkGray}
>
{geeks.titles.average}
Expand All @@ -167,6 +200,7 @@ const GeeksVsOthers = ({
padding="0 5px 0 20px"
padding_tablet="0 16px"
display="block"
background={i % 2 === 0 ? "#F4F9FF" : "transparent"}
>
<Div height="74px" alignItems="center">
<Paragraph
Expand All @@ -180,13 +214,20 @@ const GeeksVsOthers = ({
</Paragraph>
</Div>
{i < arr.length - 1 && (
<HR height="1px" background="rgba(164, 164, 164, 0.4)" />
<HR
height="1px"
background="white"
display="none"
display_tablet="block"
display_xxs="block"
/>
)}
</Div>
<Div
gridColumn_tablet="4 / 7"
id="column4-7-section"
borderRadius={i === arr.length - 1 && "0 0 4px 4px"}
background={Colors.blue}
background={i % 2 === 0 ? "#077EED" : Colors.blue}
padding="0 25px 0 20px"
padding_tablet="0 16px"
display="block"
Expand All @@ -202,11 +243,21 @@ const GeeksVsOthers = ({
{m.at4_Geeks}
</Paragraph>
</Div>
{i < arr.length - 1 && <HR height="1px" background="white" />}
{/* {i < arr.length - 1 && (
<HR
height="1px"
background="white"
display="none"
display_tablet="block"
display_xxs="block"
/>
)} */}
</Div>
<Div
gridColumn_tablet="7 / 10"
background={thirdBackground || Colors.white}
background={
i % 2 === 0 ? "#F4F9FF" : thirdBackground || Colors.white
}
borderRadius={i === arr.length - 1 && "0 0 4px 4px"}
padding="0 25px 0 20px"
padding_tablet="0 16px"
Expand All @@ -223,9 +274,15 @@ const GeeksVsOthers = ({
{m.industry_average}
</Paragraph>
</Div>
{i < arr.length - 1 && (
<HR height="1px" background="rgba(164, 164, 164, 0.4)" />
)}
{/* {i < arr.length - 1 && (
<HR
height="1px"
background="white"
display="none"
display_tablet="block"
display_xxs="block"
/>
)} */}
</Div>
</React.Fragment>
);
Expand All @@ -237,12 +294,16 @@ const GeeksVsOthers = ({

<Div
flexWrap="wrap"
padding_xs="0 0 20px 0"
justifyContent="center"
padding_xs="0 0 40px 0"
margin_tablet="20px 35px"
margin_xxs="30px 20px"
margin_xxs="10px 0px"
gridGap="10px"
display_md="none"
background={mainBackround || Colors.whitePink}
border="1px solid black"
borderRadius="4px"
boxShadow="10px 10px 0px 0px rgba(0,0,0)"
background={mainBackround || Colors.white}
>
<H2
fontSize="18px"
Expand All @@ -260,7 +321,7 @@ const GeeksVsOthers = ({
<React.Fragment key={index}>
<Div
key={index}
width="100%"
width="90%"
height={selected.index === index ? "auto" : "50px"}
//padding_xs="15px 0 0 0"
margin_xs="0 15px"
Expand All @@ -273,9 +334,11 @@ const GeeksVsOthers = ({
}}
justifyContent="between"
flexDirection={selected.index === index && "column"}
borderBottom={`1px solid ${Colors.gray2}`}
position="relative"
alignItems="center"
borderBottom="none" // No hay borde en desktop
borderBottom_tablet="1px solid #a4a4a47a" // Aparece en tablet
borderBottom_xs="1px solid #a4a4a47a" // Aparece en mobile
>
<H3
textAlign="left"
Expand All @@ -302,23 +365,25 @@ const GeeksVsOthers = ({
<Div
flexDirection="column"
width="50%"
background={Colors.veryLightBlue}
background="#e3f2ff"
padding="8px"
borderRadius="6px"
justifyContent="center"
>
<Paragraph
textAlign="center"
fontSize="10px"
fontSize="14px"
fontWeight="700"
lineHeight="22px"
lineHeight="20px"
color={Colors.darkGray}
>
{geeks.titles.at_geeks}
</Paragraph>
<Paragraph
textAlign="center"
fontSize="10px"
fontWeight="700"
lineHeight="22px"
fontSize="12px"
fontWeight="300"
lineHeight="20px"
color={Colors.darkGray}
>
{item.at4_Geeks}
Expand All @@ -330,21 +395,22 @@ const GeeksVsOthers = ({
width="50%"
background={Colors.white}
padding="8px"
justifyContent="center"
>
<Paragraph
textAlign="center"
fontSize="10px"
fontSize="14px"
fontWeight="700"
lineHeight="22px"
lineHeight="20px"
color={Colors.darkGray}
>
{geeks.titles.average}
</Paragraph>
<Paragraph
textAlign="center"
fontSize="10px"
fontWeight="700"
lineHeight="22px"
fontSize="12px"
fontWeight="300"
lineHeight="20px"
color={Colors.darkGray}
>
{item.industry_average}
Expand Down
17 changes: 14 additions & 3 deletions src/components/Landing/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -528,13 +528,24 @@ export const landingSections = {
<React.Fragment key={index}>
<GeeksVsOthers
lang={pageContext.lang}
limit={yml.total_rows}
title={yml.heading}
paragraph={yml.paragraph}
limit={yml?.total_rows || 5}
title={yml?.heading}
paragraph={yml?.sub_heading}
mainBackround={Colors.white}
thirdBackground="#F9F9F9"
border={`1px solid ${Colors.lightGray}`}
borderRadius="4px"
style={{
background: Colors.veryLightBlue3,
display: "flex",
flexDirection: "column",
alignItems: "center",
width: "100%",
padding: "20px",
padding_table: "20px",
padding_lg: "20px 40px",
margin: "0 auto",
}}
/>
</React.Fragment>
);
Expand Down
1 change: 1 addition & 0 deletions src/data/components/geeks_vs_others/geeks_vs_others.es.yaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ titles:
featured: "CARACTERÍSTICAS"
at_geeks: "EN 4GEEKS"
average: "PROMEDIO DE LA INDUSTRIA"
logo: "/images/rigobot-logo.png"
globe_text: ¡Clic aquí!
info:
- features: "Apoyo Profesional"
Expand Down
2 changes: 1 addition & 1 deletion src/data/components/geeks_vs_others/geeks_vs_others.us.yaml
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
## GEEKS VS OTHERS COMPONENT
## THIS COMPONENT IS USED IN "/home" AND "/course/..."
## THE HEADINGS ALLOW YOU TO SET DIFFERENT HEADINGS IN "/home" AND "/the-academy" TEMPLATES.

titles:
featured: "FEATURES"
at_geeks: "AT 4GEEKS"
average: "INDUSTRY AVERAGE"
logo: "/images/rigobot-logo.png"
globe_text: Click me!
info:
- features: "Career Support"
Expand Down
Loading

0 comments on commit 805dc4b

Please sign in to comment.