Merge pull request #1814 from kelvinruizdev/agregar-badge-premio-en-h…

…eader-form Agregar badge premio en header form
4GeeksAcademy · Oct 24, 2023 · 1fb2b58 · 1fb2b58
2 parents a4128b8 + 7237ae6
commit 1fb2b58
Show file tree

Hide file tree

Showing 7 changed files with 85 additions and 24 deletions.
diff --git 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
@@ -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"
         >
           <Div
@@ -238,8 +238,8 @@ const LandingHeader = (props) => {
             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"
             >
-              <Circle color="lightBlue" width="301px" height="301px" />
+              <Circle 
+                color="lightBlue" 
+                width="301px" 
+                height="301px" 
+                right="-100%"
+                top="-15%"
+                style={{ 
+
+                }}
+              />
               <Icon
                 style={{ marginTop: "150%" }}
                 icon="elderly-unfill"
@@ -270,8 +279,10 @@ const LandingHeader = (props) => {
                 width="301px"
                 height="301px"
                 position="unset"
+                left="10%"
+                top="-5%"
               />
-              <Div display_tablet="none" margin="100% auto">
+              <Div display="flex" display_tablet="none" margin="100% auto">
                 <Icon
                   style={{ marginTop: "90%" }}
                   icon="slash-fill"
@@ -306,17 +317,20 @@ const LandingHeader = (props) => {
                   ? 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)"
             />
-            <Div display="none" display_tablet="block" margin="20% 0 0 0">
+            <Div 
+              display="none" 
+              display_tablet="block" 
+              margin_lg="5% 0 0 20px"
+              // margin_md="40% 0 0 20px"
+              margin_tablet="20% 0 0 20px"
+              position="absolute"
+              bottom_lg="0px"
+              bottom_md="5%"
+              bottom_tablet="25%"
+            >
               <Icon
                 icon="slash-fill"
                 width="41px"

diff --git a/src/components/LeadForm/index.js b/src/components/LeadForm/index.js
@@ -35,14 +35,25 @@ const Form = styled.form`
   @media ${Break.sm} {
     display: ${(props) => 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 (
     <Form
       boxShadow={boxShadow}
+      width_md={width_md}
       margin={margin}
       background={background}
+      margin_md={margin_md}
       margin_tablet={margin_tablet}
       marginTop={marginTop}
       marginTop_tablet={marginTop_tablet}
@@ -337,22 +353,25 @@ const LeadForm = ({
       {headerImage && (
         <Div
           position="absolute"
-          style={{
-            top: 0,
-            right: 50,
-          }}
-          width="0px"
+          top_tablet="-10px"
+          right_tablet="-45%"
+          top_md=""
+          right_md=""
+          top_lg=""
+          right_lg=""
+          width="100%"
           display="none"
-          display_tablet="none"
+          display_tablet="flex"
           display_md="flex"
           display_lg="flex"
           flexDirection_tablet="row"
+          justifyContent_tablet="flex-end"
         >
           <GatsbyImage
             loading="eager"
             style={{
-              width: "160px",
-              height: "130px",
+              width: "100%",
+              height: "109px",
             }}
             imgStyle={{ objectFit: "contain" }}
             image={getImage(headerImage)}
@@ -372,6 +391,7 @@ const LeadForm = ({
             className={"leadform-" + layout}
             size="12"
             padding="0 24px"
+            gap={gap}
           >
             {heading && (
               <H4
@@ -413,6 +433,7 @@ const LeadForm = ({
                   <React.Fragment key={i}>
                     {_field.name !== "phone" && (
                       <Input
+                        style={{margin: "0 0 16px 0"}}
                         data-cy={f}
                         id={f}
                         bgColor={inputBgColor || "#FFFFFF"}
@@ -444,6 +465,7 @@ const LeadForm = ({
                 const _field = formData[f];
                 return (
                   <PhoneInput
+                    style={{margin: "0 0 16px 0"}}
                     key={i}
                     data-cy="phone"
                     id="phone"
@@ -459,12 +481,13 @@ const LeadForm = ({
             {selectProgram?.length >= 1 && (
               <Div
                 data-cy="dropdown_program_selector"
-                margin_tablet="0 0 10px 0"
+                margin_tablet="0 0 0 0"
               >
                 <SelectRaw
                   style={{
                     background: "#FFFFFF",
                   }}
+                  //style={{margin: "0 0 11px 0"}}
                   options={selectProgram}
                   placeholder={courseSelector.place_holder}
                   valid={true}

diff --git a/src/components/Sections/index.js b/src/components/Sections/index.js
@@ -341,6 +341,10 @@ export const Div = styled.div`
     grid-column: ${(props) => 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
@@ -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
@@ -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
@@ -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
                 )
               }