From d9bc53e62fd57861cf407309390293ff79bc9e1a Mon Sep 17 00:00:00 2001 From: Franklin Date: Thu, 27 Apr 2023 15:42:51 -0400 Subject: [PATCH] Services done except for ES translation --- css/service_card.css | 108 ++++++++++++++++++++++++++++-- css/services.css | 12 +++- locales/en.yml | 19 +++++- locales/es.yml | 22 +++++- src/components/footer.rs | 4 +- src/components/language_picker.rs | 6 +- src/components/mod.rs | 4 +- src/components/nav_bar.rs | 29 ++++---- src/components/service_card.rs | 63 +++++++++++++---- src/main.rs | 3 +- src/pages/about.rs | 7 +- src/pages/call_to_action.rs | 7 +- src/pages/main_page.rs | 16 ++++- src/pages/mod.rs | 8 +-- src/pages/not_found.rs | 8 ++- src/pages/services.rs | 15 +++-- src/pages/start.rs | 2 +- src/routes/main_router.rs | 6 +- src/routes/mod.rs | 2 +- 19 files changed, 265 insertions(+), 76 deletions(-) diff --git a/css/service_card.css b/css/service_card.css index b6bfeb0..c7ee0a4 100644 --- a/css/service_card.css +++ b/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; - height: 458px; + width: clamp(300px, 50vw, 350px); + 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; + } + } \ No newline at end of file diff --git a/css/services.css b/css/services.css index f0a98bc..cbdb2a8 100644 --- a/css/services.css +++ b/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; + } } diff --git a/locales/en.yml b/locales/en.yml index d5764c9..60b2090 100644 --- a/locales/en.yml +++ b/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 - diff --git a/locales/es.yml b/locales/es.yml index 2065f51..0bcea7d 100644 --- a/locales/es.yml +++ b/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 diff --git a/src/components/footer.rs b/src/components/footer.rs index fdb3b5f..880dcb7 100644 --- a/src/components/footer.rs +++ b/src/components/footer.rs @@ -21,7 +21,7 @@ pub fn page_footer() -> Html { */ - + } -} \ No newline at end of file +} diff --git a/src/components/language_picker.rs b/src/components/language_picker.rs index f4345b8..51d871c 100644 --- a/src/components/language_picker.rs +++ b/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 + pub language: UseStateHandle, } #[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, diff --git a/src/components/mod.rs b/src/components/mod.rs index 84596e5..7f09b44 100644 --- a/src/components/mod.rs +++ b/src/components/mod.rs @@ -1,4 +1,4 @@ -pub mod nav_bar; pub mod footer; +pub mod language_picker; +pub mod nav_bar; pub mod service_card; -pub mod language_picker; \ No newline at end of file diff --git a/src/components/nav_bar.rs b/src/components/nav_bar.rs index a66f552..c6c1867 100644 --- a/src/components/nav_bar.rs +++ b/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 { - WindowDevice::Desktop - } else { - WindowDevice::Mobile + let window_device_handle = use_state_eq(|| { + if stdweb::web::window().inner_width() > 750 { + WindowDevice::Desktop + } else { + WindowDevice::Mobile + } }); let window_device_handle_cloned = window_device_handle.clone(); stdweb::web::window().add_event_listener(move |_: ResizeEvent| { @@ -43,16 +45,15 @@ pub fn navigation_bar(props: &NavigationBarProps) -> Html { window_device_handle_cloned.set(WindowDevice::Mobile) } }); - - + html! {
- - + +
Html { } } } - +
} } @@ -122,5 +123,5 @@ pub fn navigation_bar(props: &NavigationBarProps) -> Html { #[derive(PartialEq, Eq, PartialOrd, Ord)] enum WindowDevice { Desktop, - Mobile -} \ No newline at end of file + Mobile, +} diff --git a/src/components/service_card.rs b/src/components/service_card.rs index ccf2588..f5da221 100644 --- a/src/components/service_card.rs +++ b/src/components/service_card.rs @@ -1,21 +1,56 @@ use yew::prelude::*; -#[function_component(ServiceCard)] -pub fn service_card() -> Html { - html! { -
- -
- } -} - - #[derive(PartialEq, Properties)] pub struct ServiceCardProps { #[prop_or_default] pub selected: bool, - pub icon_color_hex: String, - pub icon_id: String, + pub hexcolor: String, + pub iconclass: String, pub title: String, - pub description: String, -} \ No newline at end of file + pub description: String, +} + +#[function_component(ServiceCard)] +pub fn service_card(props: &ServiceCardProps) -> Html { + if props.selected { + html! { +
+
+ //Icon + +
+
+ //title + {props.title.clone()} +
+
+ //description + {props.description.clone()} +
+
+ +
+
+ } + } else { + html! { +
+
+ //Icon + +
+
+ //title + {props.title.clone()} +
+
+ //description + {props.description.clone()} +
+
+ +
+
+ } + } +} diff --git a/src/main.rs b/src/main.rs index f6938d7..c230022 100644 --- a/src/main.rs +++ b/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::::new().render(); } - diff --git a/src/pages/about.rs b/src/pages/about.rs index 79e53d1..274a000 100644 --- a/src/pages/about.rs +++ b/src/pages/about.rs @@ -1,9 +1,6 @@ use yew::prelude::*; - #[function_component(AboutPage)] pub fn about_page() -> Html { - html! { - - } -} \ No newline at end of file + html! {} +} diff --git a/src/pages/call_to_action.rs b/src/pages/call_to_action.rs index bdf307f..3876bec 100644 --- a/src/pages/call_to_action.rs +++ b/src/pages/call_to_action.rs @@ -1,9 +1,6 @@ use yew::prelude::*; - #[function_component(CallToActionPage)] pub fn call_to_action_page() -> Html { - html! { - - } -} \ No newline at end of file + html! {} +} diff --git a/src/pages/main_page.rs b/src/pages/main_page.rs index 468b3fd..24b2c9e 100644 --- a/src/pages/main_page.rs +++ b/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
+ pub section: Option
, } /// The whole website will be in here, from top to bottom. The navigation @@ -31,4 +41,4 @@ pub fn main_page() -> Html { } -} \ No newline at end of file +} diff --git a/src/pages/mod.rs b/src/pages/mod.rs index 66b125a..08bb85a 100644 --- a/src/pages/mod.rs +++ b/src/pages/mod.rs @@ -1,6 +1,6 @@ -pub mod not_found; -pub mod main_page; pub mod about; -pub mod start; +pub mod call_to_action; +pub mod main_page; +pub mod not_found; pub mod services; -pub mod call_to_action; \ No newline at end of file +pub mod start; diff --git a/src/pages/not_found.rs b/src/pages/not_found.rs index e3d59df..6859f87 100644 --- a/src/pages/not_found.rs +++ b/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 { @@ -15,4 +19,4 @@ pub fn not_found_page() -> Html { } -} \ No newline at end of file +} diff --git a/src/pages/services.rs b/src/pages/services.rs index 7d8bf09..41041f6 100644 --- a/src/pages/services.rs +++ b/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,9 +14,14 @@ pub fn services_page(props: &ServicesPageProps) -> Html {
{t!("services-section.title", locale = language.locale())}
- + + + + + + //
- +
} -} \ No newline at end of file +} diff --git a/src/pages/start.rs b/src/pages/start.rs index c7375aa..3f1fb29 100644 --- a/src/pages/start.rs +++ b/src/pages/start.rs @@ -49,4 +49,4 @@ pub fn start_page(props: &StartPageProps) -> Html {
} -} \ No newline at end of file +} diff --git a/src/routes/main_router.rs b/src/routes/main_router.rs index 9969362..805cede 100644 --- a/src/routes/main_router.rs +++ b/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 { @@ -31,4 +31,4 @@ pub fn switch(routes: Route) -> Html { Route::Services => html! { }, Route::Start => html! { }, } -} \ No newline at end of file +} diff --git a/src/routes/mod.rs b/src/routes/mod.rs index 17723fe..abbbe10 100644 --- a/src/routes/mod.rs +++ b/src/routes/mod.rs @@ -1 +1 @@ -pub mod main_router; \ No newline at end of file +pub mod main_router;