Finished website design, and navbar smooth scrolling
This commit is contained in:
parent
3d86536a9c
commit
5c4088a5b2
|
@ -1,5 +1,6 @@
|
||||||
|
|
||||||
.about-us-container {
|
.about-us-container {
|
||||||
|
scroll-margin-top: 75px;
|
||||||
margin-top: clamp(50px, 20vw, 150px);
|
margin-top: clamp(50px, 20vw, 150px);
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
12
css/body.css
12
css/body.css
|
@ -1,16 +1,22 @@
|
||||||
|
* {
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
}
|
||||||
body {
|
body {
|
||||||
margin: 0; /* Remove body margins */
|
margin: 0; /* Remove body margins */
|
||||||
background-color: rgb(250, 248, 248);
|
background-color: rgb(250, 248, 248);
|
||||||
}
|
}
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
.page-container {
|
.page-container {
|
||||||
|
scroll-behavior: smooth;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: stretch;
|
align-items: stretch;
|
||||||
padding-left: clamp(35px, 10%, 10vw);
|
padding-left: clamp(35px, 10%, 10vw);
|
||||||
padding-right: clamp(35px, 5%, 10vw);
|
padding-right: clamp(35px, 5%, 10vw);
|
||||||
padding-top: clamp(85px, 10vw, 160px)
|
padding-top: clamp(85px, 10vw, 160px);
|
||||||
}
|
}
|
||||||
@media only screen and (min-width: 1000px) {
|
@media only screen and (min-width: 1000px) {
|
||||||
.page-container {
|
.page-container {
|
||||||
|
@ -20,7 +26,7 @@ body {
|
||||||
align-items: stretch;
|
align-items: stretch;
|
||||||
padding-left: clamp(35px, 25%, 10vw);
|
padding-left: clamp(35px, 25%, 10vw);
|
||||||
padding-right: clamp(35px, 25%, 10vw);
|
padding-right: clamp(35px, 25%, 10vw);
|
||||||
padding-top: clamp(85px, 10vw, 160px)
|
padding-top: clamp(85px, 10vw, 160px);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
/*
|
/*
|
||||||
|
|
|
@ -1,13 +1,13 @@
|
||||||
.contact-container {
|
.contact-container {
|
||||||
margin-top: 30px;
|
scroll-margin-top: 100px;
|
||||||
|
margin-top: clamp(50px, 20vw, 150px);
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
margin-left: calc(-1 * clamp(35px, 10%, 10vw));
|
margin-left: calc(-1 * clamp(35px, 15%, 10vw));
|
||||||
margin-right: calc(-1 * clamp(35px, 10%, 10vw));
|
|
||||||
|
|
||||||
background-color: #4C40F7;
|
background-color: #4C40F7;
|
||||||
|
|
||||||
|
@ -16,7 +16,7 @@
|
||||||
}
|
}
|
||||||
.contact-title {
|
.contact-title {
|
||||||
font-family: Poppins;
|
font-family: Poppins;
|
||||||
font-size: 14px;
|
font-size: 16px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
||||||
|
@ -28,7 +28,7 @@
|
||||||
|
|
||||||
font-family: Poppins;
|
font-family: Poppins;
|
||||||
font-size: 28px;
|
font-size: 28px;
|
||||||
font-weight: 600;
|
font-weight: 800;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
letter-spacing: 1px;
|
letter-spacing: 1px;
|
||||||
|
|
||||||
|
@ -44,11 +44,19 @@
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 20px;
|
gap: 20px;
|
||||||
|
|
||||||
width: 500px;
|
width: 70vw;
|
||||||
}
|
}
|
||||||
.contact-form-button {
|
.contact-form-button-container {
|
||||||
margin-top: 25px;
|
margin-top: 25px;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: end;
|
||||||
|
|
||||||
|
width: 70vw;
|
||||||
|
}
|
||||||
|
.contact-form-button {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
@ -56,12 +64,16 @@
|
||||||
|
|
||||||
color: white;
|
color: white;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
|
font-family: Poppins;
|
||||||
|
font-weight: 600;
|
||||||
|
text-align: end;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
|
||||||
width: 150px;
|
width: 150px;
|
||||||
height: 50px;
|
height: 50px;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
}
|
}
|
||||||
.contact-form-button {
|
.contact-form-button:hover {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
}
|
}
|
||||||
|
@ -70,4 +82,10 @@
|
||||||
margin-left: calc(-1 * clamp(35px, 25%, 10vw));
|
margin-left: calc(-1 * clamp(35px, 25%, 10vw));
|
||||||
margin-right: calc(-1 * clamp(35px, 25%, 10vw))
|
margin-right: calc(-1 * clamp(35px, 25%, 10vw))
|
||||||
}
|
}
|
||||||
|
.contact-textfield-container {
|
||||||
|
width: 700px;
|
||||||
|
}
|
||||||
|
.contact-form-button-container {
|
||||||
|
width: 700px;
|
||||||
|
}
|
||||||
}
|
}
|
|
@ -24,7 +24,7 @@
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
line-height: 32px;
|
line-height: 32px;
|
||||||
|
|
||||||
color: #ABAFC7;
|
color: #323232;
|
||||||
}
|
}
|
||||||
.textarea {
|
.textarea {
|
||||||
-moz-box-sizing: border-box;
|
-moz-box-sizing: border-box;
|
||||||
|
@ -44,7 +44,7 @@
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
line-height: 20px;
|
line-height: 20px;
|
||||||
|
|
||||||
color: #ABAFC7;
|
color: #323232;
|
||||||
}
|
}
|
||||||
|
|
||||||
::placeholder {
|
::placeholder {
|
||||||
|
|
|
@ -12,6 +12,7 @@
|
||||||
width: clamp(300px, 50vw, 350px);
|
width: clamp(300px, 50vw, 350px);
|
||||||
height: 420px;
|
height: 420px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.service-card-container:nth-child(1) .service-card-icon {
|
.service-card-container:nth-child(1) .service-card-icon {
|
||||||
background-color: #4ADB61;
|
background-color: #4ADB61;
|
||||||
filter: drop-shadow(0px 15px 30px #4ADB61);
|
filter: drop-shadow(0px 15px 30px #4ADB61);
|
||||||
|
@ -69,31 +70,27 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
}
|
.service-card-container-clicked {
|
||||||
.service-card-container:hover {
|
transform: rotateY(-180deg);
|
||||||
|
transition: transform 150ms ease;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
padding: 10px;
|
||||||
background-color: #4C40F7;
|
background-color: #4C40F7;
|
||||||
transition-duration: 0.5s;
|
border-radius: 20px;
|
||||||
cursor: pointer;
|
box-shadow: -10px 30px 70px rgba(219, 222, 225, 0.4);
|
||||||
|
|
||||||
|
width: clamp(300px, 50vw, 350px);
|
||||||
|
height: 420px;
|
||||||
}
|
}
|
||||||
.service-card-container:hover .service-card-icon {
|
.service-card-container-clicked > * {
|
||||||
background-color: white;
|
transform: rotateY(-180deg);
|
||||||
filter: none;
|
|
||||||
box-shadow: none;
|
|
||||||
color: #4C40F7;
|
|
||||||
transition-duration: 1s;
|
|
||||||
}
|
|
||||||
.service-card-container:hover .service-card-title {
|
|
||||||
color: white;
|
|
||||||
transition-duration: 1s;
|
|
||||||
}
|
|
||||||
.service-card-container:hover .service-card-description {
|
|
||||||
color: white;
|
|
||||||
transition-duration: 1s;
|
|
||||||
}
|
|
||||||
.service-card-container:hover .service-card-button {
|
|
||||||
transition-duration: 1s;
|
|
||||||
background-color: #F3F4F6;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@ -133,5 +130,33 @@
|
||||||
width: clamp(270px, 24vw, 380px);
|
width: clamp(270px, 24vw, 380px);
|
||||||
height: clamp(360px, 33vw, 450px);
|
height: clamp(360px, 33vw, 450px);
|
||||||
}
|
}
|
||||||
|
.service-card-container-clicked {
|
||||||
|
width: clamp(270px, 24vw, 380px);
|
||||||
|
height: clamp(360px, 33vw, 450px);
|
||||||
|
}
|
||||||
|
.service-card-container:hover {
|
||||||
|
background-color: #4C40F7;
|
||||||
|
transition-duration: 0.5s;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-card-container:hover .service-card-icon {
|
||||||
|
background-color: white;
|
||||||
|
filter: none;
|
||||||
|
box-shadow: none;
|
||||||
|
color: #4C40F7;
|
||||||
|
transition-duration: 1s;
|
||||||
|
}
|
||||||
|
.service-card-container:hover .service-card-title {
|
||||||
|
color: white;
|
||||||
|
transition-duration: 1s;
|
||||||
|
}
|
||||||
|
.service-card-container:hover .service-card-description {
|
||||||
|
color: white;
|
||||||
|
transition-duration: 1s;
|
||||||
|
}
|
||||||
|
.service-card-container:hover .service-card-button {
|
||||||
|
transition-duration: 1s;
|
||||||
|
background-color: #F3F4F6;
|
||||||
|
}
|
||||||
}
|
}
|
|
@ -1,4 +1,6 @@
|
||||||
.services-section-container {
|
.services-section-container {
|
||||||
|
scroll-margin-top: 100px;
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
|
@ -10,18 +10,28 @@ services-section:
|
||||||
first:
|
first:
|
||||||
title: Web Development
|
title: Web Development
|
||||||
description: We develop amazing websites to be more professional, functional, and help you sell more.
|
description: We develop amazing websites to be more professional, functional, and help you sell more.
|
||||||
|
opened-title: A
|
||||||
|
opened-description: B
|
||||||
second:
|
second:
|
||||||
title: SEO
|
title: SEO
|
||||||
description: We optimize website content and structure to improve search engine rankings.
|
description: We optimize website content and structure to improve search engine rankings.
|
||||||
|
opened-title: A
|
||||||
|
opened-description: B
|
||||||
third:
|
third:
|
||||||
title: Backend Logic
|
title: Backend Logic
|
||||||
description: We efficientize your business critical operations and speed up your services & processes.
|
description: We efficientize your business critical operations and speed up your services & processes.
|
||||||
|
opened-title: A
|
||||||
|
opened-description: B
|
||||||
fourth:
|
fourth:
|
||||||
title: Social Media Management
|
title: Social Media Management
|
||||||
description: We plan and execute effective social media strategies to increase visibility and engagement.
|
description: We plan and execute effective social media strategies to increase visibility and engagement.
|
||||||
|
opened-title: A
|
||||||
|
opened-description: B
|
||||||
fifth:
|
fifth:
|
||||||
title: Digital Marketing
|
title: Digital Marketing
|
||||||
description: We also help you market your products through an online marketplace.
|
description: We also help you market your products through an online marketplace.
|
||||||
|
opened-title: A
|
||||||
|
opened-description: B
|
||||||
start:
|
start:
|
||||||
left-column:
|
left-column:
|
||||||
title-first-line: Make your business
|
title-first-line: Make your business
|
||||||
|
@ -60,6 +70,6 @@ contact:
|
||||||
title: Contact Us
|
title: Contact Us
|
||||||
subtitle: Leave us a message
|
subtitle: Leave us a message
|
||||||
form-name-label: Name
|
form-name-label: Name
|
||||||
form-email-label: Email
|
form-email-label: Phone number or Email
|
||||||
form-message-label: Start typing...
|
form-message-label: Start typing...
|
||||||
form-button-label: Send
|
form-button-label: Send
|
|
@ -1,7 +1,6 @@
|
||||||
use rust_i18n::t;
|
use rust_i18n::t;
|
||||||
use stdweb::web::{event::ResizeEvent, IEventTarget};
|
use stdweb::web::{event::ResizeEvent, IEventTarget};
|
||||||
use yew::prelude::*;
|
use yew::prelude::*;
|
||||||
use yew_router::prelude::{use_navigator, use_route};
|
|
||||||
|
|
||||||
use crate::routes::main_router::Route;
|
use crate::routes::main_router::Route;
|
||||||
|
|
||||||
|
@ -15,14 +14,7 @@ pub struct NavigationBarProps {
|
||||||
#[function_component(NavigationBar)]
|
#[function_component(NavigationBar)]
|
||||||
pub fn navigation_bar(props: &NavigationBarProps) -> Html {
|
pub fn navigation_bar(props: &NavigationBarProps) -> Html {
|
||||||
let language = &props.language;
|
let language = &props.language;
|
||||||
let current_route: Option<Route> = use_route();
|
let current_route = use_state_eq(|| Route::Start);
|
||||||
let navigator = use_navigator().unwrap();
|
|
||||||
let cloned_navigator_1 = navigator.clone();
|
|
||||||
let cloned_navigator_2 = navigator.clone();
|
|
||||||
let cloned_navigator_3 = navigator.clone();
|
|
||||||
let cloned_navigator_4 = navigator.clone();
|
|
||||||
let cloned_navigator_5 = navigator.clone();
|
|
||||||
let cloned_navigator_6 = navigator.clone();
|
|
||||||
|
|
||||||
let navbar_toggle = use_state(|| true);
|
let navbar_toggle = use_state(|| true);
|
||||||
let on_click_hamburger = {
|
let on_click_hamburger = {
|
||||||
|
@ -46,38 +38,62 @@ 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"}>
|
||||||
<div class={"navbar-brand-container"} onclick={move |_| cloned_navigator_6.push(&Route::MainPage)}>
|
<a href={"#"} class={"navbar-brand-container"} onclick={
|
||||||
|
let current_route = current_route.clone();
|
||||||
|
Callback::from(move |_| current_route.set(Route::Start))}>
|
||||||
<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=""/>
|
<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>
|
</a>
|
||||||
|
|
||||||
|
|
||||||
<div class={if *navbar_toggle {"navbar-closed"} else {"navbar-open"}}>
|
<div class={if *navbar_toggle {"navbar-closed"} else {"navbar-open"}}>
|
||||||
<div onclick={move |_| cloned_navigator_1.push(&Route::MainPage)} class={
|
<a href={"#"} onclick={
|
||||||
if current_route.is_some() && matches!(current_route.clone().unwrap(), Route::MainPage) {"navbar-item-selected"} else {"navbar-item"}
|
let navbar_toggle = navbar_toggle.clone();
|
||||||
}>
|
let current_route = current_route.clone();
|
||||||
{t!("navbar.item.home", locale = language.locale())}
|
Callback::from(move |_| {
|
||||||
</div>
|
current_route.set(Route::Start);
|
||||||
|
navbar_toggle.set(true);
|
||||||
|
})} class={
|
||||||
|
if matches!((*current_route).clone(), Route::Start) {"navbar-item-selected"} else {"navbar-item"}}>
|
||||||
|
{t!("navbar.item.home", locale = language.locale())}
|
||||||
|
</a>
|
||||||
|
|
||||||
<div onclick={move |_| cloned_navigator_2.push(&Route::Services)} class={
|
<a href={"#services-page"} onclick={
|
||||||
if current_route.is_some() && matches!(current_route.clone().unwrap(), Route::Services) {"navbar-item-selected"} else {"navbar-item"}
|
let navbar_toggle = navbar_toggle.clone();
|
||||||
}>
|
let current_route = current_route.clone();
|
||||||
|
Callback::from(move |_| {
|
||||||
|
current_route.set(Route::Services);
|
||||||
|
navbar_toggle.set(true);
|
||||||
|
})} class={
|
||||||
|
if matches!((*current_route).clone(), Route::Services) {"navbar-item-selected"} else {"navbar-item"}}>
|
||||||
{t!("navbar.item.services", locale = language.locale())}
|
{t!("navbar.item.services", locale = language.locale())}
|
||||||
</div>
|
</a>
|
||||||
|
|
||||||
<div onclick={move |_| cloned_navigator_3.push(&Route::About)} class={
|
<a href={"#about-page"} onclick={
|
||||||
if current_route.is_some() && matches!(current_route.unwrap(), Route::About) {"navbar-item-selected"} else {"navbar-item"}
|
let navbar_toggle = navbar_toggle.clone();
|
||||||
}>
|
let current_route = current_route.clone();
|
||||||
|
Callback::from(move |_| {
|
||||||
|
current_route.set(Route::About);
|
||||||
|
navbar_toggle.set(true);
|
||||||
|
})} class={
|
||||||
|
if matches!((*current_route).clone(), Route::About) {"navbar-item-selected"} else {"navbar-item"}}>
|
||||||
{t!("navbar.item.about-us", locale = language.locale())}
|
{t!("navbar.item.about-us", locale = language.locale())}
|
||||||
</div>
|
</a>
|
||||||
{
|
{
|
||||||
if (*window_device_handle) == WindowDevice::Mobile {
|
if (*window_device_handle) == WindowDevice::Mobile {
|
||||||
html! {
|
html! {
|
||||||
<div onclick={move |_| cloned_navigator_4.push(&Route::Contact)} class={"navbar-item"}>
|
<a class={"navbar-item"} onclick={
|
||||||
|
let navbar_toggle = navbar_toggle.clone();
|
||||||
|
let current_route = current_route.clone();
|
||||||
|
Callback::from(move |_| {
|
||||||
|
current_route.set(Route::Contact);
|
||||||
|
navbar_toggle.set(true);
|
||||||
|
})} href={"#call-to-action-page"}>
|
||||||
{t!("navbar.item.contact-us", locale = language.locale())}
|
{t!("navbar.item.contact-us", locale = language.locale())}
|
||||||
</div>
|
</a>
|
||||||
}
|
}
|
||||||
} else { html! {} }
|
} else { html! {} }
|
||||||
}
|
}
|
||||||
|
@ -109,9 +125,15 @@ pub fn navigation_bar(props: &NavigationBarProps) -> Html {
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
html! {
|
html! {
|
||||||
<div onclick={move |_| cloned_navigator_5.push(&Route::Contact)} class={"navbar-item-contact-us"}>
|
<a class={"navbar-item-contact-us"} href={"#call-to-action-page"} onclick={
|
||||||
|
let navbar_toggle = navbar_toggle.clone();
|
||||||
|
let current_route = current_route.clone();
|
||||||
|
Callback::from(move |_| {
|
||||||
|
current_route.set(Route::Contact);
|
||||||
|
navbar_toggle.set(true);
|
||||||
|
})}>
|
||||||
{t!("navbar.item.contact-us", locale = language.locale())}
|
{t!("navbar.item.contact-us", locale = language.locale())}
|
||||||
</div>
|
</a>
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -120,7 +142,7 @@ pub fn navigation_bar(props: &NavigationBarProps) -> Html {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#[derive(PartialEq, Eq, PartialOrd, Ord)]
|
#[derive(PartialEq, Eq, PartialOrd, Ord, Clone)]
|
||||||
enum WindowDevice {
|
enum WindowDevice {
|
||||||
Desktop,
|
Desktop,
|
||||||
Mobile,
|
Mobile,
|
||||||
|
|
|
@ -2,55 +2,66 @@ use yew::prelude::*;
|
||||||
|
|
||||||
#[derive(PartialEq, Properties)]
|
#[derive(PartialEq, Properties)]
|
||||||
pub struct ServiceCardProps {
|
pub struct ServiceCardProps {
|
||||||
#[prop_or_default]
|
|
||||||
pub selected: bool,
|
|
||||||
pub hexcolor: String,
|
pub hexcolor: String,
|
||||||
pub iconclass: String,
|
pub iconclass: String,
|
||||||
pub title: String,
|
pub title: String,
|
||||||
pub description: String,
|
pub description: String,
|
||||||
|
pub opened_title: String,
|
||||||
|
pub opened_description: String,
|
||||||
}
|
}
|
||||||
|
|
||||||
#[function_component(ServiceCard)]
|
#[function_component(ServiceCard)]
|
||||||
pub fn service_card(props: &ServiceCardProps) -> Html {
|
pub fn service_card(props: &ServiceCardProps) -> Html {
|
||||||
if props.selected {
|
let clicked = use_state_eq(|| false);
|
||||||
html! {
|
let onclick = {
|
||||||
<div class={"service-card-container-selected"}>
|
let clicked = clicked.clone();
|
||||||
<div class={"service-card-icon-selected"}>
|
Callback::from(move |_: MouseEvent| {
|
||||||
//Icon
|
clicked.set(!(*clicked).clone());
|
||||||
<i class={props.iconclass.clone()}></i>
|
})
|
||||||
</div>
|
};
|
||||||
<div class={"service-card-title-selected"}>
|
html! {
|
||||||
//title
|
<div class={
|
||||||
{props.title.clone()}
|
if (*clicked).clone() {
|
||||||
</div>
|
"service-card-container-clicked"
|
||||||
<div class={"service-card-description-selected"}>
|
} else {
|
||||||
//description
|
"service-card-container"
|
||||||
{props.description.clone()}
|
}} onclick={onclick}>
|
||||||
</div>
|
|
||||||
<div class={"service-card-button-selected"}>
|
{
|
||||||
<i class="fa-solid fa-arrow-right"></i>
|
if (*clicked).clone() {
|
||||||
</div>
|
html! {
|
||||||
</div>
|
<>
|
||||||
}
|
<div class={"service-card-title-selected"}>
|
||||||
} else {
|
{props.opened_title.clone()}
|
||||||
html! {
|
</div>
|
||||||
<div class={"service-card-container"}>
|
<div class={"service-card-description-selected"}>
|
||||||
<div class={"service-card-icon"}>
|
{props.opened_description.clone()}
|
||||||
//Icon
|
</div>
|
||||||
<i class={props.iconclass.clone()}></i>
|
</>
|
||||||
</div>
|
}
|
||||||
<div class={"service-card-title"}>
|
} else {
|
||||||
//title
|
html! {
|
||||||
{props.title.clone()}
|
<>
|
||||||
</div>
|
<div class={"service-card-icon"}>
|
||||||
<div class={"service-card-description"}>
|
//Icon
|
||||||
//description
|
<i class={props.iconclass.clone()}></i>
|
||||||
{props.description.clone()}
|
</div>
|
||||||
</div>
|
<div class={"service-card-title"}>
|
||||||
<div class={"service-card-button"}>
|
//title
|
||||||
<i class="fa-solid fa-arrow-right"></i>
|
{props.title.clone()}
|
||||||
</div>
|
</div>
|
||||||
</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>
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -11,7 +11,7 @@ pub struct AboutPageProps {
|
||||||
pub fn about_page(props: &AboutPageProps) -> Html {
|
pub fn about_page(props: &AboutPageProps) -> Html {
|
||||||
let language = props.language.clone();
|
let language = props.language.clone();
|
||||||
html! {
|
html! {
|
||||||
<div class={"about-us-container"}>
|
<div class={"about-us-container"} id={"about-page"}>
|
||||||
<div class={"about-us-title"}>
|
<div class={"about-us-title"}>
|
||||||
{t!("about-us.title", locale = language.locale())}
|
{t!("about-us.title", locale = language.locale())}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -15,7 +15,7 @@ pub fn call_to_action_page(props: &CallToActionPageProps) -> Html {
|
||||||
let email_handle = use_state(|| String::new());
|
let email_handle = use_state(|| String::new());
|
||||||
let message_handle = use_state(|| String::new());
|
let message_handle = use_state(|| String::new());
|
||||||
html! {
|
html! {
|
||||||
<div class={"contact-container"}>
|
<div class={"contact-container"} id={"call-to-action-page"}>
|
||||||
<div class={"contact-title"}>
|
<div class={"contact-title"}>
|
||||||
{t!("contact.title", locale = language.locale())}
|
{t!("contact.title", locale = language.locale())}
|
||||||
</div>
|
</div>
|
||||||
|
@ -27,9 +27,12 @@ pub fn call_to_action_page(props: &CallToActionPageProps) -> Html {
|
||||||
<TextField label={t!("contact.form-email-label", locale = language.locale())} value={email_handle} />
|
<TextField label={t!("contact.form-email-label", locale = language.locale())} value={email_handle} />
|
||||||
<TextField label={t!("contact.form-message-label", locale = language.locale())} value={message_handle} fieldtype={TextFieldType::TextArea} />
|
<TextField label={t!("contact.form-message-label", locale = language.locale())} value={message_handle} fieldtype={TextFieldType::TextArea} />
|
||||||
</div>
|
</div>
|
||||||
<div class={"contact-form-button"}>
|
<div class={"contact-form-button-container"}>
|
||||||
{t!("contact.form-button-label", locale = language.locale())}
|
<div class={"contact-form-button"}>
|
||||||
|
{t!("contact.form-button-label", locale = language.locale())}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -31,12 +31,12 @@ pub fn main_page() -> Html {
|
||||||
html! {
|
html! {
|
||||||
<>
|
<>
|
||||||
<NavigationBar language={(*language).clone()}/>
|
<NavigationBar language={(*language).clone()}/>
|
||||||
<LanguagePicker language={language.clone()}/>
|
<LanguagePicker language={language.clone()} />
|
||||||
<div class={"page-container"}>
|
<div class={"page-container"}>
|
||||||
<StartPage language={(*language).clone()}/>
|
<StartPage language={(*language).clone()} />
|
||||||
<ServicesPage language={(*language).clone()}/>
|
<ServicesPage language={(*language).clone()} />
|
||||||
<AboutPage language={(*language).clone()}/>
|
<AboutPage language={(*language).clone()} />
|
||||||
<CallToActionPage language={(*language).clone()}/>
|
<CallToActionPage language={(*language).clone()} />
|
||||||
</div>
|
</div>
|
||||||
<PageFooter language={(*language).clone()}/>
|
<PageFooter language={(*language).clone()}/>
|
||||||
</>
|
</>
|
||||||
|
|
|
@ -11,15 +11,14 @@ pub struct ServicesPageProps {
|
||||||
pub fn services_page(props: &ServicesPageProps) -> Html {
|
pub fn services_page(props: &ServicesPageProps) -> Html {
|
||||||
let language = &props.language;
|
let language = &props.language;
|
||||||
html! {
|
html! {
|
||||||
<div class={"services-section-container"}>
|
<div class={"services-section-container"} id={"services-page"}>
|
||||||
<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 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("#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())} opened_title={t!("services-section.cards.first.opened-title")} opened_description={t!("services-section.cards.first.opened-description")} />
|
||||||
<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("#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())} opened_title={t!("services-section.cards.second.opened-title")} opened_description={t!("services-section.cards.second.opened-description")}/>
|
||||||
<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("#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())} opened_title={t!("services-section.cards.third.opened-title")} opened_description={t!("services-section.cards.third.opened-description")} />
|
||||||
<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("#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())} opened_title={t!("services-section.cards.fourth.opened-title")} opened_description={t!("services-section.cards.fourth.opened-description")} />
|
||||||
<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("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())} opened_title={t!("services-section.cards.fifth.opened-title")} opened_description={t!("services-section.cards.fifth.opened-description")} />
|
||||||
//<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>
|
||||||
|
|
|
@ -12,7 +12,7 @@ pub struct StartPageProps {
|
||||||
pub fn start_page(props: &StartPageProps) -> Html {
|
pub fn start_page(props: &StartPageProps) -> Html {
|
||||||
let language = &props.language;
|
let language = &props.language;
|
||||||
html! {
|
html! {
|
||||||
<div class={"start-section-container"}>
|
<div class={"start-section-container"} id={"start-page"}>
|
||||||
<div class={"start-section-left-column"}>
|
<div class={"start-section-left-column"}>
|
||||||
<div class={"start-section-left-column-title-nocolor"}>
|
<div class={"start-section-left-column-title-nocolor"}>
|
||||||
{t!("start.left-column.title-first-line", locale = language.locale())}
|
{t!("start.left-column.title-first-line", locale = language.locale())}
|
||||||
|
@ -26,9 +26,9 @@ pub fn start_page(props: &StartPageProps) -> Html {
|
||||||
<div class={"start-section-left-column-description"}>
|
<div class={"start-section-left-column-description"}>
|
||||||
{t!("start.left-column-description", locale = language.locale())}
|
{t!("start.left-column-description", locale = language.locale())}
|
||||||
</div>
|
</div>
|
||||||
<div class={"start-section-left-column-button"}>
|
<a href={"#call-to-action-page"} class={"start-section-left-column-button"}>
|
||||||
{t!("start.left-column-button-text", locale = language.locale())}
|
{t!("start.left-column-button-text", locale = language.locale())}
|
||||||
</div>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class={"start-section-right-column"}>
|
<div class={"start-section-right-column"}>
|
||||||
|
|
Loading…
Reference in New Issue