Finished the website WOW

css/footer.css

@@ -71,6 +71,7 @@
     font-weight: 400;
     line-height: 20px;
     opacity: 75%;
+    width: 100%;
     white-space: pre-line;
 
     text-align: start;

locales/en.yml

@@ -11,7 +11,7 @@ services-section:
       title: Web Development
       description: We develop amazing websites to be more professional, functional, and help you sell more.
       opened-title: Tired of templates?
-      opened-description: We're here to help. Our websites are all CUSTOM MADE for the needs of each client. You'll be updated on every part of the process. Design, software architecture, development, testing. We're known for making Functionality oriented websites that don't compromise on UI/UX design.
+      opened-description: Responsive websites for both Mobile & Desktop. Our websites are all CUSTOM MADE for the needs of each client. You'll be updated on every part of the process. Design, software architecture, development, testing. We're known for making Functionality oriented websites that don't compromise on UI/UX design.
     second:
       title: SEO
       description: We optimize website content and structure to improve search engine rankings. Get found.
@@ -47,24 +47,24 @@ about-us:
   title: Get to know us a little better
   picture-caption: We're Ready to Grow your Business
   description: |
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce mollis elit id mauris luctus euismod. Nullam eget lectus faucibus, venenatis mauris ut, tincidunt tellus. Etiam nec malesuada quam. Proin eget sem vel augue imperdiet tristique id id odio. Sed interdum, felis vel dignissim vulputate, dolor libero sagittis odio, quis tincidunt tellus orci ut tellus. Suspendisse eu massa sem. In convallis eu augue at pellentesque. 
+    We're a young entrepeneur couple that decided to combine Marketing & Technology together to offer the best growth service to businesses. Having both had a decade of combined work experience in the modern age, realizing our potential and deciding to take it further by bundling our services.
     
-    Donec tempor eleifend nibh. Maecenas commodo dolor sit amet blandit ultricies.
+    Both committed to improve the market and fight the issues facing our generation with rock-solid work ethic & knowledge.
-    
-    Aenean eget consequat massa.
   our-vision-title: Our Vision
   our-mission-title: Our Mission
-  our-vision-description: Lorem ipsum dolor sit amet consectetur. Massa mauris etiam fames pellentesque hendrerit dictum.
+  our-vision-description: To help businesses reach their full potential through innovative website development and strategic digital marketing.
-  our-mission-description: Lorem ipsum dolor sit amet consectetur. Massa mauris etiam fames pellentesque hendrerit dictum.
+  our-mission-description: We strive to create beautiful, functional websites that are tailored to the needs of our clients. We also work to deliver effective online marketing solutions to increase visibility, engage customers, and drive growth.
 footer:
-  brand-description: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+  brand-description: Marketing & Websites done right. Your satisfaction is our priority. Making clients happier since 2020. Have any questions? Don't be afraid to give us a call, send an email or a text message! 
   contact-title: Contact
   contact-info: |
-    Jl KH Samanhudi Metro Atom Plaza Bl AKS 1/11, Dki Jakartaa
+    8550 NW 17TH ST
+    STE 110-A UNB-128289
+    MIAMI, FL 33126-1055, USA.
 
     info@blancolorenzo.pro
 
-    +62 (0) 000 0000 00
+    +1 (809) 223 5564
   copyright-text: © 2023 Blanco Lorenzo - All rights reserved
 contact:
   title: Contact Us

locales/es.yml

@@ -3,45 +3,74 @@ navbar:
     home: Inicio
     services: Servicios
     about-us: Sobre Nosotros
-    contact-us: Trabajemos Juntos
+    contact-us: Trabajemos juntos
 services-section:
-  title: Nuestro expertise digital
+  title: Nuestra experiencia digital
   cards:
     first:
       title: Desarrollo Web
-      description: We develop company websites to be more professional, functional, and help you sell more.
+      description: Desarrollamos increíbles sitios web para ser más profesionales, funcionales y ayudarlo a vender más.
+      opened-title: ¿Cansado de plantillas?
+      opened-description: Sitios web adaptables para móvil y escritorio. Nuestros sitios web son TOTALMENTE PERSONALIZADOS para las necesidades de cada cliente. Se le mantendrá al tanto de cada parte del proceso. Diseño, arquitectura de software, desarrollo, pruebas. Somos conocidos por crear sitios web orientados a la funcionalidad que no comprometan el diseño UI / UX.
     second:
       title: SEO
-      description: We optimize website content and structure to improve search engine rankings.
+      description: Optimizamos el contenido y la estructura del sitio web para mejorar los rankings en Google. Sea encontrado.
+      opened-title: ¿No te encuentran?
+      opened-description: Hacemos que sea más fácil para los clientes potenciales encontrarte antes que al competidor. Si no apareces primero al buscar tu negocio en Google, hay trabajo por hacer. ¡No te preocupes, nosotros te cubrimos! No solo en Google, si tu negocio está basado en una ubicación física, nos aseguramos de que estés en la parte superior de los resultados de búsqueda relevantes.
     third: 
-      title: Lógica de Negocios
+      title: Lógica Backend
-      description: We efficientize your business critical operations and speed up your services & processes.
+      description: Eficientizamos sus operaciones críticas para el negocio y aceleramos sus servicios y procesos.
+      opened-title: Rendimiento y Funcionalidad
+      opened-description: Tener sistemas con rendimiento y más funcinalidades no deben ser opuestos. ¡Puedes tener tu postre y comertelo también! Usamos la herramienta adecuada para el trabajo. Con nosotros tendrá bases de datos rápidas y seguras, servicios súper rápidos y el control total. Somos conocidos por nuestros paneles de administración de primera clase y sistemas robustos que ayudan a reducir significativamente los costos de servidores.
     fourth:
-      title: Manejo de Redes
+      title: Manejo de Redes Sociales
-      description: We plan and execute effective social media strategies to increase visibility and engagement. 
+      description: Planeamos y ejecutamos estrategias de redes sociales efectivas para aumentar la visibilidad y la interacción. 
+      opened-title: ¿Perdiendo la interacción?
+      opened-description: Con nosotros, eso ya no es un problema. Una combinación de publicar el contenido correcto en el momento adecuado, crear imágenes, videos, historias, tik-toks impresionantes y dominar el contenido corto y largo; El crecimiento orgánico es clave, más seguidores genuinos que realmente estén interesados en lo que vende su marca. ¡Olvídate de los bots!
     fifth:
-      title: Marketing Digital
+      title: Mercadeo Digital
-      description: We also help you market your products through an online marketplace.
+      description: Le ayudamos a comercializar sus productos con el uso de campañas digitales y posicionamiento de marca.
+      opened-title: ¿Los anuncios no están rindiendo?
+      opened-description: Nos aseguraremos de que su dinero en publicidad sea utilizado de la mejor manera. No mas gastar ciegamente en anuncios de Facebook/Google y esperar lo mejor. Campañas de mercadeo dirigidas junto con acuerdos con Influencers para llevar su marca al mejor público posible y al mismo tiempo que no se sienta tanto en el bolsillo! 
 start:
   left-column:
-    title-first-line: Haz tu negocio
+    title-first-line: Haga que su negocio
-    title-second-line: mas fuerte
+    title-second-line: sea más poderoso
     title-third-line: con nosotros
-  left-column-description: Desbloquea el poder de tu negocio y alcanza el éxito con nuestros servicios.
+  left-column-description: Nuestro equipo experimentado creará una solución a la medida para maximizar el potencial de su negocio.
   left-column-button-text: Comencemos >
-  right-column-subject-1-title: >
+  right-column-subject-1-title: |
-    Desarrollo Web &
+    Diseño Web y
-    Sistemas
+    Desarrollo
-  right-column-subject-2-title: >
+  right-column-subject-2-title: Mercadeo y Publicidad
-    Mercadeo &
+about-us:
-    Publicidad
+  title: Conócenos mejor
+  picture-caption: Estamos listos para hacer crecer tu negocio
+  description: |
+    Somos una joven pareja emprendedora que decidió combinar Mercadeo & Technología para ofrecer el mejor servicio de crecimiento a los negocios. Ambos tenemos una década de experiencia en el mundo moderno, nos dimos cuenta de nuestro potencial y decidímos llevarlo más lejos al combinar nuestros servicios.
+    
+    Ambos comprometidos a mejorar el mercado y luchar contra los problemas que enfrenta nuestra generación con una ética de trabajo sólida y conocimiento clave.
+  our-vision-title: Nuestra Visión
+  our-mission-title: Nuestra Misión
+  our-vision-description: Ayudar a los negocios a alcanzar su máximo potencial a través del desarrollo innovador de sitios web y la estrategia de mercadeo digital.
+  our-mission-description: Nos esforzamos por crear sitios web hermosos y funcionales que den la talla para las necesidades de nuestros clientes. También trabajamos para ofrecer soluciones efectivas de marketing en línea para aumentar la visibilidad, involucrar a los clientes y generar crecimiento.
 footer:
-  brand-description: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+  brand-description: Mercadeo y Sitios Web hecho bien. Su satisfacción es nuestra prioridad. Haciendo más felices a los clientes desde el 2020. ¿Tienes alguna pregunta? ¡No tengas miedo de llamarnos, enviar un correo electrónico o un mensaje de texto! 
   contact-title: Contacto
-  contact-info: >
+  contact-info: |
-    Jl KH Samanhudi Metro Atom Plaza Bl AKS 1/11, Dki Jakarta
+    8550 NW 17TH ST
+    STE 110-A UNB-128289
+    MIAMI, FL 33126-1055, USA.
 
     info@blancolorenzo.pro
 
-    +1 809 223 5564
+    +1 (809) 223 5564
-  copyright-text: © 2023 Blanco Lorenzo - All rights reserved
+  copyright-text: © 2023 Blanco Lorenzo - Todos los derechos reservados
+contact:
+  title: Contáctanos
+  subtitle: Dejanos un mensaje
+  form-name-label: Nombre
+  form-email-label: Número de teléfono o Correo electrónico
+  form-message-label: Empieza a escribir...
+  form-button-label: Enviar
+  sent-text: ¡Gracias! ¡Le devolveremos muy pronto!

src/components/service_card.rs

@@ -1,7 +1,11 @@
+use rust_i18n::t;
 use yew::prelude::*;
 
+use super::language_picker::Language;
+
 #[derive(PartialEq, Properties)]
 pub struct ServiceCardProps {
+    pub language: Language,
     pub hexcolor: String,
     pub iconclass: String,
     pub title: String,
@@ -12,6 +16,7 @@ pub struct ServiceCardProps {
 
 #[function_component(ServiceCard)]
 pub fn service_card(props: &ServiceCardProps) -> Html {
+    let language = props.language.clone();
     let clicked = use_state_eq(|| false);
     let onclick = {
         let clicked = clicked.clone();
@@ -32,10 +37,10 @@ pub fn service_card(props: &ServiceCardProps) -> Html {
                     html! {
                         <>
                             <div class={"service-card-title-selected"}>
-                                {props.opened_title.clone()}
+                                {t!(&props.opened_title.clone(),  locale = language.locale())}
                             </div>
                             <div class={"service-card-description-selected"}>
-                                {props.opened_description.clone()}
+                                {t!(&props.opened_description.clone(), locale = language.locale())}
                             </div>
                         </>
                     }
@@ -48,11 +53,11 @@ pub fn service_card(props: &ServiceCardProps) -> Html {
                             </div>
                             <div class={"service-card-title"}>
                                 //title
-                                {props.title.clone()}
+                                {t!(&props.title.clone(),  locale = language.locale())}
                             </div>
                             <div class={"service-card-description"}>
                                 //description
-                                {props.description.clone()}
+                                {t!(&props.description.clone(),  locale = language.locale())}
                             </div>
                             <div class={"service-card-button"}>
                                 <i class="fa-solid fa-arrow-right"></i>

src/pages/services.rs

@@ -14,11 +14,11 @@ pub fn services_page(props: &ServicesPageProps) -> Html {
         <div class={"services-section-container"} id={"services-page"}>
             <div class={"services-section-title"}>{t!("services-section.title", locale = language.locale())}</div>
             <div class={"services-section-services-container"}>
-                <ServiceCard hexcolor={String::from("#4ADB61")} iconclass={String::from("fa-solid fa-desktop")} title={t!("services-section.cards.first.title",  locale = language.locale())} description={t!("services-section.cards.first.description",  locale = language.locale())} opened_title={t!("services-section.cards.first.opened-title")} opened_description={t!("services-section.cards.first.opened-description")} />
+                <ServiceCard hexcolor={String::from("#4ADB61")} iconclass={String::from("fa-solid fa-desktop")} title={"services-section.cards.first.title"} description={"services-section.cards.first.description"} opened_title={"services-section.cards.first.opened-title"} opened_description={"services-section.cards.first.opened-description"} language={language.clone()}/>
-                <ServiceCard hexcolor={String::from("#FF2D59")} iconclass={String::from("fa-solid fa-magnifying-glass")} title={t!("services-section.cards.second.title",  locale = language.locale())} description={t!("services-section.cards.second.description",  locale = language.locale())} opened_title={t!("services-section.cards.second.opened-title")} opened_description={t!("services-section.cards.second.opened-description")}/>
+                <ServiceCard hexcolor={String::from("#FF2D59")} iconclass={String::from("fa-solid fa-magnifying-glass")} title={"services-section.cards.second.title"} description={"services-section.cards.second.description"} opened_title={"services-section.cards.second.opened-title"} opened_description={"services-section.cards.second.opened-description"} language={language.clone()} />
-                <ServiceCard hexcolor={String::from("#2776EA")} iconclass={String::from("fa-solid fa-code")} title={t!("services-section.cards.third.title",  locale = language.locale())} description={t!("services-section.cards.third.description",  locale = language.locale())} opened_title={t!("services-section.cards.third.opened-title")} opened_description={t!("services-section.cards.third.opened-description")} />
+                <ServiceCard hexcolor={String::from("#2776EA")} iconclass={String::from("fa-solid fa-code")} title={"services-section.cards.third.title"} description={"services-section.cards.third.description"} opened_title={"services-section.cards.third.opened-title"} opened_description={"services-section.cards.third.opened-description"} language={language.clone()} />
-                <ServiceCard hexcolor={String::from("#FFCC00")} iconclass={String::from("fa-solid fa-users")} title={t!("services-section.cards.fourth.title",  locale = language.locale())} description={t!("services-section.cards.fourth.description",  locale = language.locale())} opened_title={t!("services-section.cards.fourth.opened-title")} opened_description={t!("services-section.cards.fourth.opened-description")} />
+                <ServiceCard hexcolor={String::from("#FFCC00")} iconclass={String::from("fa-solid fa-users")} title={"services-section.cards.fourth.title"} description={"services-section.cards.fourth.description"} opened_title={"services-section.cards.fourth.opened-title"} opened_description={"services-section.cards.fourth.opened-description"} language={language.clone()} />
-                <ServiceCard hexcolor={String::from("#FF6800")} iconclass={String::from("fa-solid fa-chart-simple")} title={t!("services-section.cards.fifth.title",  locale = language.locale())} description={t!("services-section.cards.fifth.description",  locale = language.locale())} opened_title={t!("services-section.cards.fifth.opened-title")} opened_description={t!("services-section.cards.fifth.opened-description")} />
+                <ServiceCard hexcolor={String::from("#FF6800")} iconclass={String::from("fa-solid fa-chart-simple")} title={"services-section.cards.fifth.title"} description={"services-section.cards.fifth.description"} opened_title={"services-section.cards.fifth.opened-title"} opened_description={"services-section.cards.fifth.opened-description"} language={language.clone()} />
             </div>
 
         </div>