Services done except for ES translation

This commit is contained in:
Franklin 2023-04-27 15:42:51 -04:00
parent 5c51f86a44
commit d9bc53e62f
19 changed files with 265 additions and 76 deletions

View File

@ -1,14 +1,114 @@
.service-card-container { .service-card-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: space-evenly;
align-items: center; align-items: center;
padding: 40px; padding: 10px;
background-color: white; background-color: white;
border-radius: 20px; border-radius: 20px;
box-shadow: -10px 30px 70px rgba(219, 222, 225, 0.4); 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;
}
} }

View File

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

View File

@ -5,7 +5,23 @@ navbar:
about-us: About about-us: About
contact-us: Let's work together contact-us: Let's work together
services-section: 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: start:
left-column: left-column:
title-first-line: Make your business title-first-line: Make your business
@ -17,4 +33,3 @@ start:
Web Design & Web Design &
Development Development
right-column-subject-2-title: Marketing & Ads right-column-subject-2-title: Marketing & Ads

View File

@ -5,7 +5,23 @@ navbar:
about-us: Sobre Nosotros about-us: Sobre Nosotros
contact-us: Trabajemos Juntos contact-us: Trabajemos Juntos
services-section: 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: start:
left-column: left-column:
title-first-line: Haz tu negocio title-first-line: Haz tu negocio
@ -16,4 +32,6 @@ start:
right-column-subject-1-title: > right-column-subject-1-title: >
Desarrollo Web & Desarrollo Web &
Sistemas Sistemas
right-column-subject-2-title: Mercadeo & Publicidad right-column-subject-2-title: >
Mercadeo &
Publicidad

View File

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

View File

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

View File

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

View File

@ -1,21 +1,56 @@
use yew::prelude::*; use yew::prelude::*;
#[function_component(ServiceCard)]
pub fn service_card() -> Html {
html! {
<div class={"service-card-container"}>
</div>
}
}
#[derive(PartialEq, Properties)] #[derive(PartialEq, Properties)]
pub struct ServiceCardProps { pub struct ServiceCardProps {
#[prop_or_default] #[prop_or_default]
pub selected: bool, pub selected: bool,
pub icon_color_hex: String, pub hexcolor: String,
pub icon_id: String, pub iconclass: String,
pub title: String, pub title: String,
pub description: 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>
}
}
}

View File

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

View File

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

View File

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

View File

@ -1,6 +1,16 @@
use yew::prelude::*; 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)] #[derive(Debug, Clone, Copy, PartialEq, Eq, PartialOrd, Ord)]
pub enum Section { pub enum Section {
@ -10,7 +20,7 @@ pub enum Section {
} }
#[derive(Properties, PartialEq)] #[derive(Properties, PartialEq)]
pub struct MainPageProps { pub struct MainPageProps {
pub section: Option<Section> pub section: Option<Section>,
} }
/// The whole website will be in here, from top to bottom. The navigation /// The whole website will be in here, from top to bottom. The navigation

View File

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

View File

@ -1,6 +1,10 @@
use yew::prelude::*; 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)] #[function_component(NotFoundPage)]
pub fn not_found_page() -> Html { pub fn not_found_page() -> Html {

View File

@ -1,11 +1,11 @@
use rust_i18n::t; use rust_i18n::t;
use yew::prelude::*; 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)] #[derive(PartialEq, Clone, Properties)]
pub struct ServicesPageProps { pub struct ServicesPageProps {
pub language: Language pub language: Language,
} }
#[function_component(ServicesPage)] #[function_component(ServicesPage)]
pub fn services_page(props: &ServicesPageProps) -> Html { 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-container"}>
<div class={"services-section-title"}>{t!("services-section.title", locale = language.locale())}</div> <div class={"services-section-title"}>{t!("services-section.title", locale = language.locale())}</div>
<div class={"services-section-services-container"}> <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>
</div> </div>

View File

@ -1,7 +1,7 @@
use yew_router::prelude::*;
use yew::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)] #[derive(Clone, Routable, PartialEq)]
pub enum Route { pub enum Route {