From 67b2f6fa5b313e40e75c79b2d77af2db69dc7db6 Mon Sep 17 00:00:00 2001 From: lumi-tip Date: Mon, 30 Sep 2024 11:01:01 -0400 Subject: [PATCH 01/34] :recycle: refactoring of the code --- public/locales/en/course.json | 39 ++++---- public/locales/es/course.json | 37 +++++--- src/common/components/Instructors.jsx | 2 +- src/common/handlers/cohorts.js | 1 + src/common/hooks/useStyle.js | 1 + src/js_modules/projects/FixedBottomCta.jsx | 105 ++++++++++++++------- 6 files changed, 119 insertions(+), 66 deletions(-) diff --git a/public/locales/en/course.json b/public/locales/en/course.json index 07dcaa10d..f3de7d5ef 100644 --- a/public/locales/en/course.json +++ b/public/locales/en/course.json @@ -9,6 +9,8 @@ "create-account-text": "Create an account and start your coding journey today", "live-bootcamp": "Self-paced bootcamp", "free-course": "Free Course", + "become-a": "Become a", + "get-closer-to-job": "get closer to your first job", "coupon-bar": { "headline": "Prices as low as {{discount}} off!!", "ends-in": "Ends in {{time}}", @@ -20,6 +22,12 @@ "end": "learning at your own pace", "own-pace": "at your own pace" }, + "course-connectors": { + "title": "Course content", + "start": "Start a career in", + "end": "learning at your own pace", + "own-pace": "at your own pace" + }, "build-connector": { "what-you-will": "Learn by building", "description": "When learning to code at your own pace, having access to video tutorials, code examples, and continuous, real-time feedback is crucial to succeed. The tasks you'll tackle will closely resemble those encountered in a real-world tech position. Here's a glimpse of what you'll be working on:", @@ -27,31 +35,30 @@ }, "why-learn-4geeks-connector": { "why-learn-with": "Why learn with", - "benefits-connector": "Learning at your own pace can be challenging, but we've developed the tools to keep you motivated, prevent you from getting stuck on problems, and accelerate your learning process." + "benefits-connector": "Do you want to know more about what make us different? These are the benefits of our study model.", + "benefits": "Learn live + learn by doing + learn in community." }, "show-prices": { "title": "Learning to code at your own pace is possible without a big investment!", "description": "Your finances should not stop you from getting into tech. We’ve got your back.

Choose from up-front payment or flexible financing options. Start learning today!" }, "rigobot": { - "title": "Meet Rigobot, our internal AI designed for solo learners", - "description": "4Geeks.com is the first platform designed to maximize learning at your own pace. Join live sessions whenever you can, get help immediately with AI, and ask for one-on-one mentorships. All our content is fully interactive and video-enabled.", + "title": "Meet Rigobot, your guide of your learning journey", + "description": "Rigobot is our AI model that’s being trained the last years to help you on your learning journey. Rigobot is ready to help you while you code whether your are on one of our interactive tutorials or coding a project, it will review your code and give you instant feedback to learn faster and better!", "button": "Try Rigobot for free", "link": "https://codespaces.new/breatheco-de/exercise-postcard" }, "featured-bullets": [ { - "title": "Get help from our internally trained AI as you learn to code." + "title": "Get the best of the experience with LearnPack, our powerful AI tool.", + "know_more": "Do you want to know more?" }, { - "title": "Join weekly live workshops, coding real-life projects with experts." + "title": "Follow a structured syllabus with 1000+ exercises and interactive tutorials." }, { - "title": "Learn how to build your resume, optimize your LinkedIn profile, prepare for technical interviews, and more.", + "title": "Boost your experience with live one-on-one mentoring sessions with industry experts who have already been down this path.", "hideOnPublic": true - }, - { - "title": "Access live one-on-one mentoring sessions." } ], "why-learn-with-4geeks": { @@ -87,9 +94,9 @@ ], "features": { "what-is-learnpack": { - "title": "Maximize Your Learning Potential with LearnPack!", - "description": "LearnPack is our custom-designed software for self-learners. It integrates our proprietary AI tutor, ready to address any coding-related issues and equipped with automated tests for immediate feedback, allowing for an interactive learning experience anytime!", - "button": "Start learning now!", + "title": "What is LearnPack?", + "description": "LearnPack is a software that allows you to learn through interactive tutorials inside your development environment like VSCode. It has Rigobot (Our AI model) included, so you can get instant feedback while you code!", + "button": "Try learnpack for free", "link": "#pricing" }, "showOnSignup": [ @@ -138,20 +145,20 @@ "id": 2, "icon": "talking", "title": "One-on-one mentoring sessions", - "description": "Access a pack of monthly mentorship sessions with our experts and add extra sessions as needed." + "description": "Ask for a mentoring session with an expert whenever you want and at the time that best fits you." }, { "id": 3, "icon": "community", "title": "Learn with the community", - "description": "Learning alongside others is not only more fun but also helps you progress faster. Join our active learning community for support and collaboration." + "description": "Learning with others is more fun, is easier, and you can get farther. Our community won't leave you behind!" } ] }, "certificate": { "image": "/static/images/certificate-preview.webp", - "title": "Get certified in your favorite technology", - "description": "Your 4Geeks certificate will open doors to professional opportunities with our extensive network of companies across the world. Endorsed by international institutions, it represents a globally recognized standard, unlocking diverse career paths.", + "title": "Certificate in your favorite technology", + "description": "Your 4Geeks certificate serves as a gateway to professional prospects, supported by a widespread network of companies throughout LATAM and across the globe. Backed by endorsements from numerous international institutions, it symbolizes a globally recognized standard of excellence, paving the way for diverse career opportunities.", "button": "See prices", "button-link": "#pricing" }, diff --git a/public/locales/es/course.json b/public/locales/es/course.json index 16c85f5df..7feb4f9e1 100644 --- a/public/locales/es/course.json +++ b/public/locales/es/course.json @@ -9,6 +9,8 @@ "create-account-text": "Crea una cuenta y comienza tu viaje en el bootcamp hoy", "live-bootcamp": "Bootcamp en vivo", "free-course": "Curso Gratis", + "become-a": "Conviertete en un", + "get-closer-to-job": "acercate a tu primer empleo", "coupon-bar": { "headline": "¡¡Precios tan bajos como {{discount}} de descuento!!", "ends-in": "Termina en {{time}}", @@ -20,6 +22,12 @@ "end": "aprendiendo a tu propio ritmo", "own-pace": "a tu propio ritmo" }, + "course-connectors": { + "title": "Contenido del curso", + "start": "Start a career in", + "end": "learning at your own pace", + "own-pace": "at your own pace" + }, "build-connector": { "what-you-will": "Aprende construyendo", "description": "Cuando aprendes a programar a tu propio ritmo, tener acceso a tutoriales en video, ejemplos de código y retroalimentación continua en tiempo real es crucial para tener éxito. Las tareas que abordarás se asemejarán estrechamente a las encontradas en una posición tecnológica del mundo real. Aquí tienes un vistazo de en qué estarás trabajando:", @@ -28,31 +36,30 @@ }, "why-learn-4geeks-connector": { "why-learn-with": "¿Por qué aprender con", - "benefits-connector": "Aprender a tu propio ritmo puede ser desafiante, pero hemos desarrollado las herramientas para mantenerte motivado, evitar que te quedes atascado en problemas y acelerar tu proceso de aprendizaje." + "benefits-connector": "¿Quieres saber más sobre lo que nos hace diferentes? Estos son los beneficios de nuestro modelo de estudio.", + "benefits": "Aprende en vivo + aprende haciendo + aprende en comunidad." }, "show-prices": { "title": "¡Aprender a programar a tu propio ritmo es posible sin una gran inversión!", "description": "Tus finanzas no deberían impedirte ingresar al mundo de la tecnología. Estamos aquí para apoyarte.

Elige entre el pago único o opciones de financiamiento flexibles. ¡Comienza a aprender hoy mismo!" }, "rigobot": { - "title": "Conoce a Rigobot, nuestra IA interna diseñada para quienes aprenden solos", - "description": "4Geeks.com es la primera plataforma diseñada para maximizar el aprendizaje a tu propio ritmo. Únete a sesiones en vivo cuando tu puedas, obtén ayuda de forma inmediata con IA y pide mentorías uno a uno. Todo nuestro contenido es totalmente interactivo y con videos.", + "title": "Conoce a Rigobot, tu guía en tu viaje de aprendizaje.", + "description": "Rigobot es nuestro modelo de IA que ha sido entrenado durante los últimos años para ayudarte en tu viaje de aprendizaje. Rigobot está listo para asistirte mientras programas, ya sea que estés en uno de nuestros tutoriales interactivos o desarrollando un proyecto. Revisará tu código y te proporcionará retroalimentación instantánea para que aprendas de manera más rápida y efectiva.", "button": "Prueba Rigobot gratis", "link": "https://codespaces.new/breatheco-de/exercise-postcard" }, "featured-bullets": [ { - "title": "Obtén ayuda de nuestra IA entrenada internamente mientras aprendes a programar." + "title": "Obtén lo mejor de la experiencia con LearnPack, nuestra poderosa herramienta de IA.", + "know_more": "Quieres saber mas?" }, { - "title": "Únete a workshops semanales dónde desarrollarás proyectos de la vida real con expertos." + "title": "Sigue un plan de estudios estructurado con más de 1000 ejercicios y tutoriales interactivos." }, { - "title": "Aprende cómo crear tu curriculum, optimizar tu perfil de LinkedIn, prepárate para entrevistas técnicas y más.", + "title": "Mejora tu experiencia con sesiones de mentoría en vivo, uno a uno, con expertos de la industria que ya han recorrido este camino.", "hideOnPublic": true - }, - { - "title": "Entra a sesiones de mentoría en vivo uno a uno." } ], "why-learn-with-4geeks": { @@ -88,9 +95,9 @@ ], "features": { "what-is-learnpack": { - "title": "¡Maximiza tu aprendizaje con LearnPack!", - "description": "LearnPack es nuestro software diseñado especialmente para autodidactas. Integra nuestro tutor de inteligencia artificial exclusivo, listo para abordar cualquier problema relacionado con el código y equipado con pruebas automatizadas para obtener retroalimentación inmediata, ¡permitiendo una experiencia de aprendizaje interactiva en cualquier momento!", - "button": "¡Empieza a aprender ahora!", + "title": "¿Qué es LearnPack?", + "description": "LearnPack es un software que te permite aprender a través de tutoriales interactivos dentro de tu entorno de desarrollo, como VSCode. Incluye a Rigobot (nuestro modelo de IA), para que puedas recibir retroalimentación instantánea mientras codificas.", + "button": "Prueba LearnPack gratis.", "link": "#pricing" }, "showOnSignup": [ @@ -139,20 +146,20 @@ "id": 2, "icon": "talking", "title": "Mentorías uno a uno", - "description": "Accede a un paquete de sesiones mensuales de mentoría con nuestros expertos y añade sesiones adicionales según sea necesario." + "description": "Solicita una sesión de mentoría con un experto cuando quieras y en el horario que mejor se adapte a ti." }, { "id": 3, "icon": "community", "title": "Aprende en comunidad", - "description": "Aprender junto a otros no solo es más divertido, sino que también te ayuda a progresar más rápido. Únete a nuestra comunidad activa de aprendizaje para recibir apoyo y colaboración." + "description": "Aprender con otros es más divertido, es más fácil, y puedes llegar más lejos. ¡Nuestra comunidad no te dejará atrás!" } ] }, "certificate": { "image": "/static/images/certificate-preview.webp", "title": "Certifícate en tu tecnología favorita", - "description": "Tu certificado de 4Geeks abrirá puertas a oportunidades profesionales con nuestra extensa red de empresas en todo el mundo. Respaldado por instituciones internacionales, representa un estándar reconocido a nivel global, desbloqueando diversos caminos profesionales.", + "description": "Tu certificado de 4Geeks sirve como una puerta de entrada a oportunidades profesionales, respaldado por una amplia red de empresas en toda LATAM y en todo el mundo. Apoyado por el respaldo de numerosas instituciones internacionales, simboliza un estándar de excelencia reconocido a nivel mundial, allanando el camino para diversas oportunidades laborales.", "button": "Ver precios", "button-link": "#pricing" }, diff --git a/src/common/components/Instructors.jsx b/src/common/components/Instructors.jsx index baf5ab1aa..6a51e7e49 100644 --- a/src/common/components/Instructors.jsx +++ b/src/common/components/Instructors.jsx @@ -27,7 +27,7 @@ function Instructors({ isLoading, list, limit, ...rest }) { {t('your-tutors-in-this-cohort')} - + {isLoading ? ( diff --git a/src/common/handlers/cohorts.js b/src/common/handlers/cohorts.js index 203288b7b..8bfcc2e47 100644 --- a/src/common/handlers/cohorts.js +++ b/src/common/handlers/cohorts.js @@ -155,6 +155,7 @@ export const processRelatedAssignments = (syllabusData = {}, taskTodo = []) => { export const generateCohortSyllabusModules = async (id) => { try { const cohortAndSyllabus = await getCohortSyllabus(id); + console.log(cohortAndSyllabus); const syllabusData = cohortAndSyllabus?.syllabus; const cohortSyllabusList = syllabusData.json?.days || syllabusData.json?.modules; diff --git a/src/common/hooks/useStyle.js b/src/common/hooks/useStyle.js index 57d9a0183..245ebc10b 100644 --- a/src/common/hooks/useStyle.js +++ b/src/common/hooks/useStyle.js @@ -57,6 +57,7 @@ const useStyle = () => { greenLight: '#25BF6C', greenLight2: '#A4FFBD', greenLight3: '#D7FFE2', + greenLight4: '#F2FFF6', fontColor2: useColorModeValue('#3A3A3A', '#EBEBEB'), successLight: useColorModeValue('#e9ffef', '#A4FFBD'), }; diff --git a/src/js_modules/projects/FixedBottomCta.jsx b/src/js_modules/projects/FixedBottomCta.jsx index e69c387c8..61e870674 100644 --- a/src/js_modules/projects/FixedBottomCta.jsx +++ b/src/js_modules/projects/FixedBottomCta.jsx @@ -2,61 +2,98 @@ import React from 'react'; import { Box, Button, + Flex, + Text, } from '@chakra-ui/react'; import PropTypes from 'prop-types'; import useTranslation from 'next-translate/useTranslation'; +import NextChakraLink from '../../common/components/NextChakraLink'; import Heading from '../../common/components/Heading'; import useStyle from '../../common/hooks/useStyle'; import ReactPlayerV2 from '../../common/components/ReactPlayerV2'; -function StickyBottomCta({ asset, onClick, isCtaVisible, ...rest }) { +function StickyBottomCta({ asset, onClick, isCtaVisible, course, couponApplied, ...rest }) { const { t } = useTranslation('exercises'); - const { hexColor } = useStyle(); + const { hexColor, featuredColor } = useStyle(); const hasVideo = asset?.intro_video_url; if (!isCtaVisible) return null; + console.log('ASDASDASD', couponApplied); return ( - - - - {hasVideo ? t('video-instructions') : t('register')} - - - + <> + + {course + && ( + + + Join Bootcamp + Create an account and start your bootcamp journey + + + + + {t('already-have-account')} + {' '} + {t('login-here')} + + + )} + {asset + && ( + + + + {hasVideo ? t('video-instructions') : t('register')} + + + + )} + + ); } StickyBottomCta.propTypes = { asset: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.any])).isRequired, + course: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.any])).isRequired, + couponApplied: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.any])), onClick: PropTypes.func.isRequired, isCtaVisible: PropTypes.bool.isRequired, }; +StickyBottomCta.defaultProps = { + couponApplied: undefined, +}; + export default StickyBottomCta; From c71732ce50272bb60a6e11a9156c18cb2c0b8e70 Mon Sep 17 00:00:00 2001 From: lumi-tip Date: Mon, 30 Sep 2024 19:30:06 -0400 Subject: [PATCH 02/34] changes --- src/js_modules/projects/FixedBottomCta.jsx | 92 ++++++++++++++-------- src/pages/bootcamp/[course_slug].jsx | 2 + 2 files changed, 62 insertions(+), 32 deletions(-) diff --git a/src/js_modules/projects/FixedBottomCta.jsx b/src/js_modules/projects/FixedBottomCta.jsx index 61e870674..07ac48087 100644 --- a/src/js_modules/projects/FixedBottomCta.jsx +++ b/src/js_modules/projects/FixedBottomCta.jsx @@ -12,14 +12,14 @@ import Heading from '../../common/components/Heading'; import useStyle from '../../common/hooks/useStyle'; import ReactPlayerV2 from '../../common/components/ReactPlayerV2'; -function StickyBottomCta({ asset, onClick, isCtaVisible, course, couponApplied, ...rest }) { +function StickyBottomCta({ asset, onClick, isCtaVisible, course, videoUrl, couponApplied, ...rest }) { const { t } = useTranslation('exercises'); const { hexColor, featuredColor } = useStyle(); const hasVideo = asset?.intro_video_url; if (!isCtaVisible) return null; - console.log('ASDASDASD', couponApplied); + console.log('ASDASDASD', course); return ( <> @@ -38,29 +38,9 @@ function StickyBottomCta({ asset, onClick, isCtaVisible, course, couponApplied, display={{ base: 'block', md: 'none' }} {...rest} > - {course - && ( - - - Join Bootcamp - Create an account and start your bootcamp journey - - - - - {t('already-have-account')} - {' '} - {t('login-here')} - - - )} - {asset - && ( - + + {videoUrl + && ( - - {hasVideo ? t('video-instructions') : t('register')} - - - + )} + {asset + && ( + <> + + {videoUrl ? t('video-instructions') : t('register')} + + + + )} + {course + && ( + <> + + {t('course:join-cohort')} + {t('course:create-account-text')} + + + + + {t('signup:already-have-account')} + {' '} + {t('signup:login-here')} + + + )} + + {asset + && ( + + + + {hasVideo ? t('video-instructions') : t('register')} + + + )} @@ -87,6 +113,7 @@ function StickyBottomCta({ asset, onClick, isCtaVisible, course, couponApplied, StickyBottomCta.propTypes = { asset: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.any])).isRequired, course: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.any])).isRequired, + videoUrl: PropTypes.string, couponApplied: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.any])), onClick: PropTypes.func.isRequired, isCtaVisible: PropTypes.bool.isRequired, @@ -94,6 +121,7 @@ StickyBottomCta.propTypes = { StickyBottomCta.defaultProps = { couponApplied: undefined, + videoUrl: undefined, }; export default StickyBottomCta; diff --git a/src/pages/bootcamp/[course_slug].jsx b/src/pages/bootcamp/[course_slug].jsx index 19ed60506..915024a78 100644 --- a/src/pages/bootcamp/[course_slug].jsx +++ b/src/pages/bootcamp/[course_slug].jsx @@ -465,6 +465,8 @@ function Page({ data }) { description: module.description, })) : []; + console.log('HOLA'); + return ( <> {cleanedStructuredData?.name && ( From 38e668e9b8e611cd35487840f6ad2b48549a0597 Mon Sep 17 00:00:00 2001 From: lumi-tip Date: Mon, 30 Sep 2024 19:42:44 -0400 Subject: [PATCH 03/34] changes --- src/pages/bootcamp/[course_slug].jsx | 282 +++++++++++++++++---------- 1 file changed, 176 insertions(+), 106 deletions(-) diff --git a/src/pages/bootcamp/[course_slug].jsx b/src/pages/bootcamp/[course_slug].jsx index 915024a78..866c45f0e 100644 --- a/src/pages/bootcamp/[course_slug].jsx +++ b/src/pages/bootcamp/[course_slug].jsx @@ -1,7 +1,7 @@ import axios from 'axios'; import PropTypes from 'prop-types'; import { Box, Button, Flex, Image, Link, SkeletonText, useToast } from '@chakra-ui/react'; -import { useEffect, useState } from 'react'; +import { useEffect, useState, useRef } from 'react'; import useTranslation from 'next-translate/useTranslation'; import { useRouter } from 'next/router'; import Head from 'next/head'; @@ -14,7 +14,7 @@ import Heading from '../../common/components/Heading'; import { error } from '../../utils/logging'; import bc from '../../common/services/breathecode'; import { generateCohortSyllabusModules } from '../../common/handlers/cohorts'; -import { adjustNumberBeetwenMinMax, capitalizeFirstLetter, cleanObject, setStorageItem } from '../../utils'; +import { adjustNumberBeetwenMinMax, capitalizeFirstLetter, cleanObject, setStorageItem, isWindow } from '../../utils'; import useStyle from '../../common/hooks/useStyle'; import Timer from '../../common/components/Timer'; import OneColumnWithIcon from '../../common/components/OneColumnWithIcon'; @@ -23,6 +23,7 @@ import ShowOnSignUp from '../../common/components/ShowOnSignup'; import ReactPlayerV2 from '../../common/components/ReactPlayerV2'; import Instructors from '../../common/components/Instructors'; import Faq from '../../common/components/Faq'; +import FixedBottomCta from '../../js_modules/projects/FixedBottomCta'; import TagCapsule from '../../common/components/TagCapsule'; import MktTrustCards from '../../common/components/MktTrustCards'; import MktShowPrices from '../../common/components/MktShowPrices'; @@ -113,25 +114,27 @@ function CouponTopBar() { padding="8px 10px" > - - + + {t('coupon-bar.headline', { discount })} - - {t('coupon-bar.ends-in', { time: '' })} - - setSelfAppliedCoupon(null)} - color="white" - background="none" - fontSize="18px" - fontFamily="inter" - fontWeight="900" - /> - + + + {t('coupon-bar.ends-in', { time: '' })} + + setSelfAppliedCoupon(null)} + color="white" + background="none" + fontSize="15px" + fontFamily="inter" + fontWeight="900" + /> + + - {t('coupon-bar.see-prices')} - {' '} - → + + {t('coupon-bar.see-prices')} + {' '} + → + @@ -150,6 +156,10 @@ function CouponTopBar() { } function Page({ data }) { + const { state } = useSignup(); + const { selfAppliedCoupon } = state; + const showBottomCTA = useRef(null); + const [isCtaVisible, setIsCtaVisible] = useState(true); const { isAuthenticated, user, logout } = useAuth(); const { hexColor, backgroundColor, fontColor, borderColor, complementaryBlue, featuredColor } = useStyle(); const { setCohortSession } = useCohortHandler(); @@ -245,6 +255,35 @@ function Page({ data }) { }; const featurePrice = getPlanPrice().toLocaleLowerCase(); + const getElementTopOffset = (elem) => { + if (elem && isWindow) { + const rect = elem.getBoundingClientRect(); + const { scrollY } = window; + return rect.top + scrollY; + } + return 0; + }; + + useEffect(() => { + if (isWindow) { + const handleScroll = () => { + if (showBottomCTA.current) { + const { scrollY } = window; + const top = getElementTopOffset(showBottomCTA.current); + setIsCtaVisible(top - scrollY > 700); + } + }; + + window.addEventListener('scroll', handleScroll); + + return () => { + window.removeEventListener('scroll', handleScroll); + }; + } + + return undefined; + }, [isWindow]); + const joinCohort = () => { if (isAuthenticated && existsRelatedSubscription) { reportDatalayer({ @@ -306,7 +345,7 @@ function Page({ data }) { }); router.push(cohortDashboardLink); }; - const redirectToCohortIfItsReady = ({ withAlert = true, callback = () => {} } = {}) => { + const redirectToCohortIfItsReady = ({ withAlert = true, callback = () => { } } = {}) => { bc.admissions().me().then((resp) => { const joinedCohortsData = resp?.data; const alreadyHaveThisCohort = joinedCohortsData?.cohorts?.some((elmnt) => elmnt?.cohort?.id === cohortId); @@ -465,18 +504,31 @@ function Page({ data }) { description: module.description, })) : []; - console.log('HOLA'); + console.log('SOY LA DATA', data); + // console.log("SOY LOS STUDENTS", students) + // console.log("SOY LA COHORT DATA", cohortData) + // console.log("SOY LA COHORT LSIT", courseContentList) + // console.log("SOY LA PLAN DATA", planData) + // console.log(featuredBullets) return ( <> {cleanedStructuredData?.name && ( - -