diff --git a/src/components/BackgroundDrawing/index.js b/src/components/BackgroundDrawing/index.js index abb4eca3a..ef2d10430 100644 --- a/src/components/BackgroundDrawing/index.js +++ b/src/components/BackgroundDrawing/index.js @@ -48,4 +48,9 @@ const Figure = styled.div` @media ${Devices.xl} { } `; -export const Circle = styled(Figure)``; +export const Circle = styled(Figure)` + top: ${(props) => props.top}; + left: ${(props) => props.left}; + bottom: ${(props) => props.bottom}; + right: ${(props) => props.right}; +`; diff --git a/src/components/LandingHeader/index.js b/src/components/LandingHeader/index.js index c869d6458..d726b63e0 100644 --- a/src/components/LandingHeader/index.js +++ b/src/components/LandingHeader/index.js @@ -63,9 +63,9 @@ const LandingHeader = (props) => { containerGridGap="0" gridTemplateColumns_tablet="repeat(14,1fr)" padding_xs="132px 20px 60px 20px" - padding_tablet="72px 40px 35px 40px" - padding_md="72px 80px 35px 80px" - padding_lg="72px 0 35px 0" + padding_tablet="85px 40px 55px 40px" + padding_md="85px 80px 55px 80px" + padding_lg="85px 0 55px 0" columns_tablet="2" >
{ width="100%" margin="0" textAlign_sm="center" - margin_md={yml.form.margin_md || "0 auto 0 25px"} - gridColumn_tablet="8 / 14" + margin_md={yml.form.margin_md || "0 0 0 0"} + gridColumn_tablet="8 / 15" // gridColumn_md="8 / 14" // gridColumn_tablet="8 / 13" > @@ -250,7 +250,16 @@ const LandingHeader = (props) => { display_tablet="block" zIndex="0" > - + { width="301px" height="301px" position="unset" + left="10%" + top="-5%" /> -
+
{ ? Colors.white : "#FFF1D1" } - margin_tablet="18px 38px" + margin_md="50px 0 0 14.5%" + margin_tablet="18px 0" selectProgram={programs} selectLocation={locations} - margin="18px 10px" + margin="18px 0" marginTop_tablet="50px" // marginTop_xs="20px" style={{ zIndex: "1", minHeight: "350px", + borderRadius: "0px", border: "3px solid black", }} + gap="11px" formHandler={processFormEntry} heading={yml.form.heading} motivation={yml.form.motivation} @@ -330,10 +344,22 @@ const LandingHeader = (props) => { justifyContentButton="center" marginButton="10px auto 30px auto" widthButton="100%" + width_md="84%" + width_tablet="84%" // marginButton_tablet="0 0 30px auto" boxShadow="9px 8px 0px 0px rgba(0,0,0,1)" /> -
+
props.d_sm}; } + @media ${Devices.xxs} { + } + + @media ${Devices.xs} { + } + @media ${Devices.sm} { + } @media ${Devices.tablet} { margin: ${(props) => props.margin_tablet}; margin-top: ${(props) => props.marginTop_tablet}; width: 100%; } - @media ${Devices.xs} { - margin-top: ${(props) => props.marginTop_xs}; + @media ${Devices.md} { + margin: ${(props) => props.margin_md}; + width: ${(props) => props.width_md}; + } + @media ${Devices.lg} { } + `; const _fields = { @@ -150,11 +161,14 @@ const LeadForm = ({ marginButton_tablet, widthButton, background, + width_md, margin, marginTop, marginTop_tablet, marginTop_xs, margin_tablet, + margin_md, + gap, padding, justifyContentButton, buttonWidth_tablet, @@ -274,8 +288,10 @@ const LeadForm = ({ return (
{heading && (

{_field.name !== "phone" && ( = 1 && (
props.gridColumn_md}; grid-row: ${(props) => props.gridRow_md}; position: ${(props) => props.position_md}; + top: ${(props) => props.top_md}; + bottom: ${(props) => props.bottom_md}; + right: ${(props) => props.right_md}; + left: ${(props) => props.left_md}; } @media ${Devices.lg} { display: ${(props) => props.display_lg}; diff --git a/src/components/Select/index.js b/src/components/Select/index.js index 61783d103..358d78e71 100644 --- a/src/components/Select/index.js +++ b/src/components/Select/index.js @@ -132,6 +132,7 @@ const customStyles = { input: (styles) => ({ ...styles, width: "100%", + margin: "0px" }), control: (styles, state) => ({ ...styles, @@ -140,8 +141,8 @@ const customStyles = { border: state.isFocused ? "1px solid #000000" : "1px solid #A4A4A4", boxShadow: "none", - marginBottom: "5px", - marginTop: "5px", + marginBottom: "16px", + marginTop: "0px", width: "100%", fontSize: "15px", fontWeight: "400", diff --git a/src/data/landing/conding-bootcamp-colombia.es.yml b/src/data/landing/conding-bootcamp-colombia.es.yml index 1a9cebe35..1ac7f3963 100644 --- a/src/data/landing/conding-bootcamp-colombia.es.yml +++ b/src/data/landing/conding-bootcamp-colombia.es.yml @@ -44,6 +44,7 @@ header_data: tagline: ¡Bienvenido a 4Geeks Academy! La academia de programación líder en el mundo tagline_color: "black" sub_heading: Con más de 7 años de experiencia tenemos presencia en USA, Europa y Latinoamérica. En nuestra academia, te enseñamos habilidades y destrezas relevantes para el futuro + badge: "../../../static/images/badges/Course-Report-Badge-2023.png" # background_image: "../../../static/images/bg/main-bg.jpg" #video: "https://www.videoask.com/fm984j5nz" image_filter: brightness(0.4) diff --git a/src/templates/landing_a.js b/src/templates/landing_a.js index c6dc1e7ae..e4971440f 100644 --- a/src/templates/landing_a.js +++ b/src/templates/landing_a.js @@ -607,6 +607,7 @@ export const query = graphql` gatsbyImageData( layout: CONSTRAINED # --> CONSTRAINED || FIXED || FULL_WIDTH width: 1000 + quality: 100 placeholder: NONE # --> NONE || DOMINANT_COLOR || BLURRED | TRACED_SVG ) }