Merge pull request #2189 from G-code7/landing-reservation

reservation landing created
4GeeksAcademy · Nov 5, 2024 · 2c41463 · 2c41463
2 parents f91ab5e + b650c7c
commit 2c41463
Show file tree

Hide file tree

Showing 9 changed files with 1,445 additions and 4 deletions.
diff --git a/src/components/LandingHeader/index.js b/src/components/LandingHeader/index.js
@@ -206,6 +206,44 @@ const LandingHeader = (props) => {
                 dangerouslySetInnerHTML={{ __html: yml.features.text }}
               />
             )}
+
+            {/* Botón features - por ahora solo lo utilizo en el template de reservations*/}
+            {yml.features.button && (
+              <a
+                href={yml.features.button.path || "#"}
+                target="_blank"
+                rel="noopener noreferrer"
+                id="features_button"
+                style={{
+                  display: "inline-block",
+                  backgroundColor:
+                    yml.features.button.background || Colors.black,
+                  color: yml.features.button.color || Colors.white,
+                  width: "250px",
+                  padding: "10px 20px",
+                  textDecoration: "none",
+                  borderRadius: "3px",
+                  marginTop: "20px",
+                  marginBottom: yml.features.button.marginBottom || "20px",
+                  margin: "20px 0 250px 0",
+                  fontWeight: "bold",
+                  fontFamily: "lato",
+                  fontSize: "18px",
+                  textAlign: "center",
+                  transition: "background-color 0.3s ease",
+                }}
+                onMouseOver={(e) => {
+                  e.target.style.backgroundColor =
+                    yml.features.button.hover_color || Colors.gray;
+                }}
+                onMouseOut={(e) => {
+                  e.target.style.backgroundColor =
+                    yml.features.button.background || Colors.black;
+                }}
+              >
+                {yml.features.button.text}
+              </a>
+            )}
             {yml.short_badges && (
               <Marquee_v2
                 speed={1.5}
@@ -244,6 +282,7 @@ const LandingHeader = (props) => {
               </Marquee_v2>
             )}
           </Div>
+
           <Div
             position="relative"
             flexDirection="column"
@@ -252,8 +291,6 @@ const LandingHeader = (props) => {
             textAlign_sm="center"
             margin_md={yml.form.margin_md || "0 0 0 0"}
             gridColumn_tablet="8 / 15"
-            // gridColumn_md="8 / 14"
-            // gridColumn_tablet="8 / 13"
           >
             <Div
               top="0"
@@ -364,13 +401,16 @@ const LandingHeader = (props) => {
                 src={
                   yml.form.side_image || "/images/landing/grupo-ventanas.webp"
                 }
+                style={{
+                  filter: "drop-shadow(10px 10px 0px #000000)",
+                }}
                 alt="4Geeks Academy Section"
                 margin="auto"
                 height="100%"
                 minHeight_tablet="none"
                 minHeight="500px"
                 maxHeight="500px"
-                width_tablet="80%"
+                width_tablet="100%"
                 width="100%"
                 zIndex="10"
                 // h_sm="250px"
@@ -381,7 +421,6 @@ const LandingHeader = (props) => {
               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"

diff --git a/src/data/landing/reservation-landing.es.yml b/src/data/landing/reservation-landing.es.yml
@@ -0,0 +1,120 @@
+meta_info:
+  slug: latam-reserva-tu-cupo # <--- URL 4geeksacademy.com/us/landing/example
+
+  title: "Reserva tu Cupo en 4Geeks Academy" # This will show the browser tab title
+  description: "Reserva tu cupo en 4Geeks Academy y asegura tu lugar en nuestro próximo bootcamp." # under 255 characters, will show on social media when shared
+  image: "" # description will show on social media when shared
+  keywords: "" # SEO optimized keywords
+  visibility: "hidden" # visible (default), hidden (not indexed) or unlisted (listed but not in sitemap).
+  template: "landing_reservation" # <--- choose your landing template
+  redirects: [/pago-reservacion] # <--- URL redirections to avoid 404 errors
+
+  # this UTM fields will be included in the CRM
+  # utm_course available ["full-stack", "software-engineering", "machine-learning-engineering"]
+  utm_course: ["full-stack"] 
+  utm_location: ["bogota-colombia", "buenosaires-argentina", "caracas-venezuela", "costa-rica", "lapaz-bolivia", "lima-peru", "mexicocity-mexico", "montevideo-uruguay", "panamacity-panama", "quito-ecuador", "santiago-chile"]
+  automation: soft # comma separated, "soft" is the default value
+  tag: request_more_info # comma separated, "request_more_info" is the default value
+
+navbar:
+  logoUrl: "#"
+  buttonText: "Reserva acá" # this modifies the button text in the navbar
+  buttonUrl: "#features_button" #accepts: relative(/apply), absolute(https://google.com), id(#componentName) or position(#top #bottom)
+
+form:
+  # posible fields: "first_name", "last_name", "full_name", "phone", "email"
+  # always the first_name, email and phone will be mandatory if added.
+  fields: ["full_name", "phone", "email"]
+  heading: "Request more info."
+  motivation: "" # < -- subtitle ideal to movitate people on filling the form
+  button_label: SEND
+  hide_form: true
+  side_image: "/images/landing/reservation-es.webp"
+  # redirect: "https://google.com" #you can redirect to another url or entirely diffrent website
+
+# jumbotron on the top (cannot be commented out)
+# apply_schollarship: # form that is displayed at the end of the landing
+  # title: "Get more info about this award-winning development course"
+  # imageSide: "left"
+  image: "../../../static/images/landing/apply.png"
+
+header_data:
+  background: "#ffffff"
+  tagline: Bienvenido/a 4Geeks Academy
+  tagline_color: "#1b1b1b"
+  sub_heading: "Reserva tu cupo con $50 USD para garantizar tu lugar en la academia."
+  form_styles:
+    background: "#E3F9FE"
+    color: "black"
+    button:
+      background: "black"
+  badge: "../../../static/images/badges/Course-Report-Badge-2024.webp"
+
+features:
+  marginTop: 20px #<-- separation between tagline and the bullets
+
+  #                                         up   left down  right
+  styles: '{ "fontSize": "20px", "margin": "10px 0px 10px 0px" }'
+  button:
+      text: "Reserva aquí"
+      color: "white"
+      path: "https://buy.stripe.com/cN214id1Je882LScMS"
+      background: "blue"
+      hover_color: "darkBlue"
+  bullets:
+    - Completa tu pago hoy y asegura un lugar en el próximo curso
+    - Transacciones rápidas y confiables para tu tranquilidad
+
+follow_bar:
+  position: "hidden" # top, bottom, hidden
+  content:
+    text: "Reserva tu Cupo en 4Geeks Academy"
+    text_mobile: "Reserva tu Cupo en 4Geeks Academy"
+    # devices:   XL      LG    MD      SM    XS
+    font_size: ["25px", "25px", "25px", "18px", "4.3vw"]
+  button:
+    text: "¡Reserva ahora!"
+    path: "#features_button" # #top, #bottom, #anotherComponentId
+    # ├──if path is empty("") it point to top per default
+    # └── path accepts: relative(/example/path), absolute(https://google.com) or id(#idName)
+  phone:
+    text: ""
+    number: "" # you can set your own phone number, or leave it false to use the utm_location number
+
+short_badges:
+  - name: "microsoft"
+    url: ""
+    image: "../../../static/images/blog/microsoft-logo.png"
+    alt: "Microsoft"
+  - name: "Meta"
+    url: ""
+    image: "../../../static/images/badges/meta-logo.png"
+    alt: "Meta"
+  - name: "Evernote"
+    url: ""
+    image: "../../../static/images/badges/evernote-logo.png"
+    alt: "Evernote"
+  - name: "natgeo"
+    url: ""
+    image: "../../../static/images/badges/natgeo-logo.png"
+    alt: "natgeo"
+  - name: "microsoft"
+    url: ""
+    image: "../../../static/images/blog/microsoft-logo.png"
+    alt: "Microsoft"
+  - name: "Meta"
+    url: ""
+    image: "../../../static/images/badges/meta-logo.png"
+    alt: "Meta"
+  - name: "Evernote"
+    url: ""
+    image: "../../../static/images/badges/evernote-logo.png"
+    alt: "Evernote"
+  - name: "natgeo"
+    url: ""
+    image: "../../../static/images/badges/natgeo-logo.png"
+    alt: "natgeo"
+
+#
+# ⬇ FROM HERE ON YOU CAN COMMENT ANYTHING TO HIDE IT ON THE LANDING ⬇ 
+#
diff --git a/src/data/landing/reservation-landing.us.yml b/src/data/landing/reservation-landing.us.yml
@@ -0,0 +1,121 @@
+meta_info:
+  slug: save-your-spot # <--- URL 4geeksacademy.com/us/landing/example
+
+  title: "Save Your Spot at 4Geeks Academy" # This will show the browser tab title
+  description: "Save your spot at 4Geeks Academy and secure your place in our next bootcamp." # under 255 characters, will show on social media when shared
+  image: "" # description will show on social media when shared
+  keywords: "" # SEO optimized keywords
+  visibility: "hidden" # visible (default), hidden (not indexed) or unlisted (listed but not in sitemap).
+  template: "landing_reservation" # <--- choose your landing template
+  redirects: [] # <--- URL redirections to avoid 404 errors
+
+  # this UTM fields will be included in the CRM
+  # utm_course available ["full-stack", "software-engineering", "machine-learning-engineering"]
+  utm_course: ["full-stack"] 
+  utm_location: ["atlanta-usa", "austin-usa", "chicago-usa", "downtown-miami", "houston-usa", "losangeles-usa", "newyork-usa", "orlando", "online", "tampa-usa"]
+  automation: soft # comma separated, "soft" is the default value
+  tag: request_more_info # comma separated, "request_more_info" is the default value
+
+navbar:
+  logoUrl: "#"
+  buttonText: "Save Your Spot Now!" # this modifies the button text in the navbar
+  buttonUrl: "#features_button" #accepts: relative(/apply), absolute(https://google.com), id(#componentName) or position(#top #bottom)
+
+form:
+  # posible fields: "first_name", "last_name", "full_name", "phone", "email"
+  # always the first_name, email and phone will be mandatory if added.
+  fields: ["full_name", "phone", "email"]
+  heading: "Request more info."
+  motivation: "" # < -- subtitle ideal to movitate people on filling the form
+  button_label: SEND
+  hide_form: true
+  side_image: "/images/landing/reservation-es.webp"
+  # redirect: "https://google.com" #you can redirect to another url or entirely diffrent website
+
+# jumbotron on the top (cannot be commented out)
+# apply_schollarship: # form that is displayed at the end of the landing
+  # title: "Get more info about this award-winning development course"
+  # imageSide: "left"
+  image: "../../../static/images/landing/apply.png"
+
+header_data:
+  background: "#fff"
+  tagline: Welcome to 4Geeks Academy!
+  tagline_color: "#1b1b1b"
+  sub_heading: "Just $100 will ensure your participation. Fill out the form to reserve your spot."
+  form_styles:
+    background: "#E3F9FE"
+    color: "black"
+    button:
+      background: "black"
+  badge: "../../../static/images/badges/Course-Report-Badge-2024.webp"
+
+features:
+  marginTop: 20px #<-- separation between tagline and the bullets
+
+  #                                         up   left down  right
+  styles: '{ "fontSize": "20px", "margin": "10px 0px 10px 0px" }'
+  button:
+      text: "Save Your Spot Now!"
+      color: "white"
+      path: "https://buy.stripe.com/4gw4gu8Lt2pqaekeVa"
+      background: "blue"
+      hover_color: "darkBlue"
+  bullets:
+    - To guarantee your place in the next course, complete the payment process today.
+    - "Quick and easy: Fill out the form and secure your spot with a simple payment."
+
+follow_bar:
+  position: "hidden" # top, bottom, hidden
+  content:
+    text: " Save your spot in our next bootcamp"
+    text_mobile: " Save your spot in our next bootcamp"
+    # devices:   XL      LG    MD      SM    XS
+    font_size: ["25px", "25px", "25px", "18px", "4.3vw"]
+  button:
+    text: "Save Your Spot Now!"
+    path: "#features_button" # #top, #bottom, #anotherComponentId
+    # ├──if path is empty("") it point to top per default
+    # └── path accepts: relative(/example/path), absolute(https://google.com) or id(#idName)
+  phone:
+    text: ""
+    number: "" # you can set your own phone number, or leave it false to use the utm_location number
+
+short_badges:
+  - name: "microsoft"
+    url: ""
+    image: "../../../static/images/blog/microsoft-logo.png"
+    alt: "Microsoft"
+  - name: "Meta"
+    url: ""
+    image: "../../../static/images/badges/meta-logo.png"
+    alt: "Meta"
+  - name: "Evernote"
+    url: ""
+    image: "../../../static/images/badges/evernote-logo.png"
+    alt: "Evernote"
+  - name: "natgeo"
+    url: ""
+    image: "../../../static/images/badges/natgeo-logo.png"
+    alt: "natgeo"
+  - name: "microsoft"
+    url: ""
+    image: "../../../static/images/blog/microsoft-logo.png"
+    alt: "Microsoft"
+  - name: "Meta"
+    url: ""
+    image: "../../../static/images/badges/meta-logo.png"
+    alt: "Meta"
+  - name: "Evernote"
+    url: ""
+    image: "../../../static/images/badges/evernote-logo.png"
+    alt: "Evernote"
+  - name: "natgeo"
+    url: ""
+    image: "../../../static/images/badges/natgeo-logo.png"
+    alt: "natgeo"
+
+
+#
+# ⬇ FROM HERE ON YOU CAN COMMENT ANYTHING TO HIDE IT ON THE LANDING ⬇ 
+#