franklinblanco/bl-frontend-rs
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Services done except for ES translation

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

108
css/service_card.css
View File

@ -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;
}
}

12
css/services.css
View File

@ -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;
}
}

19
locales/en.yml
View File

@ -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

22
locales/es.yml
View File

@ -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
src/components/footer.rs
View File

@ -21,7 +21,7 @@ pub fn page_footer() -> Html {
</div>
</div>
*/
</div>
}
}
}

6
src/components/language_picker.rs
View File

@ -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,

4
src/components/mod.rs
View File

@ -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;

29
src/components/nav_bar.rs
View File

@ -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! {
<div class={"navbar-background"}>
<div class={"navbar-container"}>
<div class={"navbar-brand-container"} onclick={move |_| cloned_navigator_6.push(&Route::MainPage)}>
<img class={"navbar-image"} src={ if (*window_device_handle) == WindowDevice::Mobile {"images/blanco-lorenzo-logo-white-transparent.png"} else {"images/blanco-lorenzo-logo-gray-transparent.png"}} alt=""/>
</div>
<div class={if *navbar_toggle {"navbar-closed"} else {"navbar-open"}}>
<div onclick={move |_| cloned_navigator_1.push(&Route::MainPage)} class={
if current_route.is_some() && matches!(current_route.clone().unwrap(), Route::MainPage) {"navbar-item-selected"} else {"navbar-item"}
@ -114,7 +115,7 @@ pub fn navigation_bar(props: &NavigationBarProps) -> Html {
}
}
}
</div>
}
}
@ -122,5 +123,5 @@ pub fn navigation_bar(props: &NavigationBarProps) -> Html {
#[derive(PartialEq, Eq, PartialOrd, Ord)]
enum WindowDevice {
Desktop,
Mobile
}
Mobile,
}

63
src/components/service_card.rs
View File

@ -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,
}
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>
}
}
}

3
src/main.rs
View File

@ -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();
}

7
src/pages/about.rs
View File

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

7
src/pages/call_to_action.rs
View File

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

16
src/pages/main_page.rs
View File

@ -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
@ -31,4 +41,4 @@ pub fn main_page() -> Html {
<PageFooter/>
</>
}
}
}

8
src/pages/mod.rs
View File

@ -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;
pub mod start;

8
src/pages/not_found.rs
View File

@ -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 {
<PageFooter/>
</>
}
}
}

15
src/pages/services.rs
View File

@ -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 {
<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>
}
}
}

2
src/pages/start.rs
View File

@ -49,4 +49,4 @@ pub fn start_page(props: &StartPageProps) -> Html {
</div>
</div>
}
}
}

6
src/routes/main_router.rs
View File

@ -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! { <MainPage/> },
Route::Start => html! { <MainPage/> },
}
}
}

2
src/routes/mod.rs
View File

@ -1 +1 @@
pub mod main_router;
pub mod main_router;