Services done except for ES translation
This commit is contained in:
parent
5c51f86a44
commit
d9bc53e62f
|
@ -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;
|
||||
}
|
||||
|
||||
}
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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
|
||||
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -4,7 +4,7 @@ use yew::prelude::*;
|
|||
pub enum Language {
|
||||
#[default]
|
||||
EnUs,
|
||||
EsDo
|
||||
EsDo,
|
||||
}
|
||||
impl Language {
|
||||
pub fn locale(&self) -> &'static str {
|
||||
|
@ -16,7 +16,7 @@ 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 {
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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(|| {
|
||||
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| {
|
||||
|
@ -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,
|
||||
}
|
|
@ -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 icon_id: String,
|
||||
pub hexcolor: 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>
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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();
|
||||
}
|
||||
|
||||
|
|
|
@ -1,9 +1,6 @@
|
|||
use yew::prelude::*;
|
||||
|
||||
|
||||
#[function_component(AboutPage)]
|
||||
pub fn about_page() -> Html {
|
||||
html! {
|
||||
|
||||
}
|
||||
html! {}
|
||||
}
|
|
@ -1,9 +1,6 @@
|
|||
use yew::prelude::*;
|
||||
|
||||
|
||||
#[function_component(CallToActionPage)]
|
||||
pub fn call_to_action_page() -> Html {
|
||||
html! {
|
||||
|
||||
}
|
||||
html! {}
|
||||
}
|
|
@ -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
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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 {
|
||||
|
|
Loading…
Reference in New Issue