Services done except for ES translation

css/service_card.css

@@ -1,14 +1,114 @@
 .service-card-container {
     display: flex;
     flex-direction: column;
-    justify-content: center;
+    justify-content: space-evenly;
     align-items: center;
 
-    padding: 40px;
+    padding: 10px;
     background-color: white;
     border-radius: 20px;
     box-shadow: -10px 30px 70px rgba(219, 222, 225, 0.4);
 
-    width: 352px;
+    width: clamp(300px, 50vw, 350px);
-    height: 458px;
+    height: 420px;
+}
+
+.service-card-icon {
+    width: 75px;
+    height: 75px;
+    border-radius: 100%;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    color: white;
+    font-size: 24px;
+}
+.service-card-title {
+    font-family: Poppins;
+    font-size: 24px;
+    text-align: center;
+    font-weight: 600;
+}
+.service-card-description {
+    font-family: Poppins;
+    font-size: 17px;
+    font-weight: 400;
+    color: #6B6B6B;
+    line-height: 28px;
+    text-align: center;
+    
+}
+.service-card-button {
+    color: #4C40F7;
+    background-color: #F3F4F6;
+    width: 50px;
+    height: 50px;
+    border-radius: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+}
+.service-card-container-selected {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-evenly;
+    align-items: center;
+
+    padding: 10px;
+    border-radius: 20px;
+    box-shadow: -10px 30px 70px rgba(219, 222, 225, 0.4);
+    background-color: #4C40F7;
+
+    width: 60vw;
+    height: 420px;
+}
+.service-card-icon-selected {
+    width: 75px;
+    height: 75px;
+    border-radius: 100%;
+    background-color: white;
+    color: #4C40F7;
+    filter: drop-shadow(0px 15px 30px #17134a);
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    font-size: 24px;
+}
+.service-card-title-selected {
+    font-family: Poppins;
+    font-size: 24px;
+    text-align: center;
+    font-weight: 600;
+    color: white;
+}
+.service-card-description-selected {
+    font-family: Poppins;
+    font-size: 17px;
+    font-weight: 400;
+    color: white;
+    line-height: 28px;
+    text-align: center;
+}
+.service-card-button-selected {
+    color: #4C40F7;
+    background-color: #F3F4F6;
+    width: 50px;
+    height: 50px;
+    border-radius: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+@media only screen and (min-width: 750px) {
+    .service-card-container {
+        width: 23vw;
+        height: 400px;
+    }
+
 }

css/services.css

@@ -15,10 +15,11 @@
 }
 .services-section-services-container {
     display: flex;
-    flex-direction: row;
+    flex-direction: column;
     justify-content: center;
     align-items: center;
-    gap: 50px;
+    gap: 20px;
+    margin-top: 40px;
 }
 @media only screen and (min-width: 750px) {
     .services-section-title {
@@ -28,4 +29,11 @@
         color: #111029;
         text-align: center;
     }
+    .services-section-services-container {
+        display: flex;
+        flex-flow: row wrap;
+        justify-content: center;
+        align-items: center;
+        gap: 10px;
+    }
 }

locales/en.yml

@@ -5,7 +5,23 @@ navbar:
     about-us: About
     contact-us: Let's work together
 services-section:
-  title: Our digital marketing expertise
+  title: Our digital expertise
+  cards:
+    first:
+      title: Web Development
+      description: We develop amazing websites to be more professional, functional, and help you sell more.
+    second:
+      title: SEO
+      description: We optimize website content and structure to improve search engine rankings.
+    third: 
+      title: Backend Logic
+      description: We efficientize your business critical operations and speed up your services & processes.
+    fourth:
+      title: Social Media Management
+      description: We plan and execute effective social media strategies to increase visibility and engagement. 
+    fifth:
+      title: Digital Marketing
+      description: We also help you market your products through an online marketplace.
 start:
   left-column:
     title-first-line: Make your business
@@ -17,4 +33,3 @@ start:
     Web Design &
     Development
   right-column-subject-2-title: Marketing & Ads
-

locales/es.yml

@@ -5,7 +5,23 @@ navbar:
     about-us: Sobre Nosotros
     contact-us: Trabajemos Juntos
 services-section:
-  title: Nuestro expertise en marketing digital
+  title: Nuestro expertise digital
+  cards:
+    first:
+      title: Desarrollo Web
+      description: We develop company websites to be more professional, functional, and help you sell more.
+    second:
+      title: SEO
+      description: We optimize website content and structure to improve search engine rankings.
+    third: 
+      title: Lógica de Negocios
+      description: We efficientize your business critical operations and speed up your services & processes.
+    fourth:
+      title: Manejo de Redes Sociales
+      description: We plan and execute effective social media strategies to increase visibility and engagement. 
+    fifth:
+      title: Marketing Digital
+      description: We also help you market your products through an online marketplace.
 start:
   left-column:
     title-first-line: Haz tu negocio
@@ -16,4 +32,6 @@ start:
   right-column-subject-1-title: >
     Desarrollo Web &
     Sistemas
-  right-column-subject-2-title: Mercadeo & Publicidad
+  right-column-subject-2-title: >
+    Mercadeo &
+    Publicidad

src/components/language_picker.rs

@@ -4,7 +4,7 @@ use yew::prelude::*;
 pub enum Language {
     #[default]
     EnUs,
-    EsDo
+    EsDo,
 }
 impl Language {
     pub fn locale(&self) -> &'static str {
@@ -16,14 +16,14 @@ impl Language {
 }
 #[derive(PartialEq, Properties)]
 pub struct LanguagePickerProps {
-    pub language: UseStateHandle<Language>
+    pub language: UseStateHandle<Language>,
 }
 #[function_component(LanguagePicker)]
 pub fn language_picker(props: &LanguagePickerProps) -> Html {
     let language_handle = props.language.clone();
     let onclick = {
         let language_handle = language_handle.clone();
-        Callback::from(move |_: MouseEvent|{
+        Callback::from(move |_: MouseEvent| {
             let new_lang = match (*language_handle).clone() {
                 Language::EnUs => Language::EsDo,
                 Language::EsDo => Language::EnUs,

src/components/mod.rs

@@ -1,4 +1,4 @@
-pub mod nav_bar;
 pub mod footer;
-pub mod service_card;
 pub mod language_picker;
+pub mod nav_bar;
+pub mod service_card;

src/components/nav_bar.rs

@@ -1,15 +1,15 @@
 use rust_i18n::t;
-use stdweb::web::{IEventTarget, event::ResizeEvent};
+use stdweb::web::{event::ResizeEvent, IEventTarget};
 use yew::prelude::*;
 use yew_router::prelude::{use_navigator, use_route};
 
-use crate::{routes::main_router::{Route}};
+use crate::routes::main_router::Route;
 
 use super::language_picker::Language;
 
 #[derive(Properties, PartialEq)]
 pub struct NavigationBarProps {
-    pub language: Language
+    pub language: Language,
 }
 
 #[function_component(NavigationBar)]
@@ -29,10 +29,12 @@ pub fn navigation_bar(props: &NavigationBarProps) -> Html {
         let navbar_toggle = navbar_toggle.clone();
         Callback::from(move |_| navbar_toggle.set(!*navbar_toggle))
     };
-    let window_device_handle = use_state_eq(|| if stdweb::web::window().inner_width() > 750 {
+    let window_device_handle = use_state_eq(|| {
-        WindowDevice::Desktop
+        if stdweb::web::window().inner_width() > 750 {
-    } else {
+            WindowDevice::Desktop
-        WindowDevice::Mobile
+        } else {
+            WindowDevice::Mobile
+        }
     });
     let window_device_handle_cloned = window_device_handle.clone();
     stdweb::web::window().add_event_listener(move |_: ResizeEvent| {
@@ -44,7 +46,6 @@ pub fn navigation_bar(props: &NavigationBarProps) -> Html {
         }
     });
 
-    
     html! {
         <div class={"navbar-background"}>
             <div class={"navbar-container"}>
@@ -122,5 +123,5 @@ pub fn navigation_bar(props: &NavigationBarProps) -> Html {
 #[derive(PartialEq, Eq, PartialOrd, Ord)]
 enum WindowDevice {
     Desktop,
-    Mobile
+    Mobile,
 }

src/components/service_card.rs

@@ -1,21 +1,56 @@
 use yew::prelude::*;
 
-#[function_component(ServiceCard)]
-pub fn service_card() -> Html {
-    html! {
-        <div class={"service-card-container"}>
-            
-        </div>
-    }
-}
-
-
 #[derive(PartialEq, Properties)]
 pub struct ServiceCardProps {
     #[prop_or_default]
     pub selected: bool,
-    pub icon_color_hex: String,
+    pub hexcolor: String,
-    pub icon_id: String,
+    pub iconclass: String,
     pub title: String,
     pub description: String,
 }
+
+#[function_component(ServiceCard)]
+pub fn service_card(props: &ServiceCardProps) -> Html {
+    if props.selected {
+        html! {
+            <div class={"service-card-container-selected"}>
+                <div class={"service-card-icon-selected"}>
+                    //Icon
+                    <i class={props.iconclass.clone()}></i>
+                </div>
+                <div class={"service-card-title-selected"}>
+                    //title
+                    {props.title.clone()}
+                </div>
+                <div class={"service-card-description-selected"}>
+                    //description
+                    {props.description.clone()}
+                </div>
+                <div class={"service-card-button-selected"}>
+                    <i class="fa-solid fa-arrow-right"></i>
+                </div>
+            </div>
+        }
+    } else {
+        html! {
+            <div class={"service-card-container"}>
+                <div class={"service-card-icon"} style={format!("background-color: {}; filter: drop-shadow(0px 15px 30px {});", props.hexcolor.clone(), props.hexcolor.clone())}>
+                    //Icon
+                    <i class={props.iconclass.clone()}></i>
+                </div>
+                <div class={"service-card-title"}>
+                    //title
+                    {props.title.clone()}
+                </div>
+                <div class={"service-card-description"}>
+                    //description
+                    {props.description.clone()}
+                </div>
+                <div class={"service-card-button"}>
+                    <i class="fa-solid fa-arrow-right"></i>
+                </div>
+            </div>
+        }
+    }
+}

src/main.rs

@@ -1,6 +1,6 @@
-pub mod routes;
 pub mod components;
 pub mod pages;
+pub mod routes;
 
 use rust_i18n::i18n;
 use yew::prelude::*;
@@ -24,4 +24,3 @@ fn main() {
     log::info!("{:?}", available_locales());
     yew::Renderer::<App>::new().render();
 }
-

src/pages/about.rs

@@ -1,9 +1,6 @@
 use yew::prelude::*;
 
-
 #[function_component(AboutPage)]
 pub fn about_page() -> Html {
-    html! {
+    html! {}
-        
-    }
 }

src/pages/call_to_action.rs

@@ -1,9 +1,6 @@
 use yew::prelude::*;
 
-
 #[function_component(CallToActionPage)]
 pub fn call_to_action_page() -> Html {
-    html! {
+    html! {}
-        
-    }
 }

src/pages/main_page.rs

@@ -1,6 +1,16 @@
 use yew::prelude::*;
 
-use crate::{components::{nav_bar::NavigationBar, footer::PageFooter, language_picker::{LanguagePicker, Language}}, pages::{start::StartPage, services::ServicesPage, about::AboutPage, call_to_action::CallToActionPage}};
+use crate::{
+    components::{
+        footer::PageFooter,
+        language_picker::{Language, LanguagePicker},
+        nav_bar::NavigationBar,
+    },
+    pages::{
+        about::AboutPage, call_to_action::CallToActionPage, services::ServicesPage,
+        start::StartPage,
+    },
+};
 
 #[derive(Debug, Clone, Copy, PartialEq, Eq, PartialOrd, Ord)]
 pub enum Section {
@@ -10,7 +20,7 @@ pub enum Section {
 }
 #[derive(Properties, PartialEq)]
 pub struct MainPageProps {
-    pub section: Option<Section>
+    pub section: Option<Section>,
 }
 
 /// The whole website will be in here, from top to bottom. The navigation

src/pages/mod.rs

@@ -1,6 +1,6 @@
-pub mod not_found;
-pub mod main_page;
 pub mod about;
-pub mod start;
-pub mod services;
 pub mod call_to_action;
+pub mod main_page;
+pub mod not_found;
+pub mod services;
+pub mod start;

src/pages/not_found.rs

@@ -1,6 +1,10 @@
 use yew::prelude::*;
 
-use crate::components::{nav_bar::NavigationBar, footer::PageFooter, language_picker::{Language, LanguagePicker}};
+use crate::components::{
+    footer::PageFooter,
+    language_picker::{Language, LanguagePicker},
+    nav_bar::NavigationBar,
+};
 
 #[function_component(NotFoundPage)]
 pub fn not_found_page() -> Html {

src/pages/services.rs

@@ -1,11 +1,11 @@
 use rust_i18n::t;
 use yew::prelude::*;
 
-use crate::{components::{service_card::ServiceCard, language_picker::Language}};
+use crate::components::{language_picker::Language, service_card::ServiceCard};
 
 #[derive(PartialEq, Clone, Properties)]
 pub struct ServicesPageProps {
-    pub language: Language
+    pub language: Language,
 }
 #[function_component(ServicesPage)]
 pub fn services_page(props: &ServicesPageProps) -> Html {
@@ -14,7 +14,12 @@ pub fn services_page(props: &ServicesPageProps) -> Html {
         <div class={"services-section-container"}>
             <div class={"services-section-title"}>{t!("services-section.title", locale = language.locale())}</div>
             <div class={"services-section-services-container"}>
-                <ServiceCard/>
+                <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())}  />
+                <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())}  />
+                <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())}  />
+                <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())}  />
+                <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())}  />
+                //<ServiceCard hexcolor={String::from("#FF6800")} iconclass={String::from("")} title={t!("services-section.cards.sixth.title",  locale = language.locale())} description={t!("services-section.cards.sixth.description",  locale = language.locale())}  />
             </div>
 
         </div>

src/routes/main_router.rs

@@ -1,7 +1,7 @@
-use yew_router::prelude::*;
 use yew::prelude::*;
+use yew_router::prelude::*;
 
-use crate::{pages::{main_page::MainPage, not_found::NotFoundPage}};
+use crate::pages::{main_page::MainPage, not_found::NotFoundPage};
 
 #[derive(Clone, Routable, PartialEq)]
 pub enum Route {