From 5c4088a5b2b0af2bc934db9427fd6dd90e97cdd2 Mon Sep 17 00:00:00 2001 From: Franklin Date: Sat, 29 Apr 2023 22:08:12 -0400 Subject: [PATCH] Finished website design, and navbar smooth scrolling --- css/about.css | 1 + css/body.css | 12 +++-- css/call_to_action.css | 34 +++++++++--- css/components/textfield.css | 4 +- css/service_card.css | 69 ++++++++++++++++-------- css/services.css | 2 + locales/en.yml | 12 ++++- src/components/nav_bar.rs | 80 +++++++++++++++++----------- src/components/service_card.rs | 95 +++++++++++++++++++--------------- src/pages/about.rs | 2 +- src/pages/call_to_action.rs | 9 ++-- src/pages/main_page.rs | 10 ++-- src/pages/services.rs | 13 +++-- src/pages/start.rs | 6 +-- 14 files changed, 223 insertions(+), 126 deletions(-) diff --git a/css/about.css b/css/about.css index 868fa71..aac8a5b 100644 --- a/css/about.css +++ b/css/about.css @@ -1,5 +1,6 @@ .about-us-container { + scroll-margin-top: 75px; margin-top: clamp(50px, 20vw, 150px); display: flex; diff --git a/css/body.css b/css/body.css index 93c694e..33d796d 100644 --- a/css/body.css +++ b/css/body.css @@ -1,16 +1,22 @@ +* { + scroll-behavior: smooth; +} body { margin: 0; /* Remove body margins */ background-color: rgb(250, 248, 248); } - +a { + text-decoration: none; +} .page-container { + scroll-behavior: smooth; display: flex; flex-direction: column; justify-content: center; align-items: stretch; padding-left: clamp(35px, 10%, 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) { .page-container { @@ -20,7 +26,7 @@ body { align-items: stretch; padding-left: clamp(35px, 25%, 10vw); padding-right: clamp(35px, 25%, 10vw); - padding-top: clamp(85px, 10vw, 160px) + padding-top: clamp(85px, 10vw, 160px); } } /* diff --git a/css/call_to_action.css b/css/call_to_action.css index e6ef55c..5241b42 100644 --- a/css/call_to_action.css +++ b/css/call_to_action.css @@ -1,13 +1,13 @@ .contact-container { - margin-top: 30px; + scroll-margin-top: 100px; + margin-top: clamp(50px, 20vw, 150px); display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100vw; - margin-left: calc(-1 * clamp(35px, 10%, 10vw)); - margin-right: calc(-1 * clamp(35px, 10%, 10vw)); + margin-left: calc(-1 * clamp(35px, 15%, 10vw)); background-color: #4C40F7; @@ -16,7 +16,7 @@ } .contact-title { font-family: Poppins; - font-size: 14px; + font-size: 16px; font-weight: 400; text-align: center; @@ -28,7 +28,7 @@ font-family: Poppins; font-size: 28px; - font-weight: 600; + font-weight: 800; text-align: center; letter-spacing: 1px; @@ -44,11 +44,19 @@ align-items: center; gap: 20px; - width: 500px; + width: 70vw; } -.contact-form-button { +.contact-form-button-container { margin-top: 25px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: end; + + width: 70vw; +} +.contact-form-button { display: flex; justify-content: center; align-items: center; @@ -56,12 +64,16 @@ color: white; font-size: 14px; + font-family: Poppins; + font-weight: 600; + text-align: end; + letter-spacing: 1px; width: 150px; height: 50px; border-radius: 4px; } -.contact-form-button { +.contact-form-button:hover { cursor: pointer; user-select: none; } @@ -70,4 +82,10 @@ margin-left: 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; + } } \ No newline at end of file diff --git a/css/components/textfield.css b/css/components/textfield.css index 5d68cd0..833b43e 100644 --- a/css/components/textfield.css +++ b/css/components/textfield.css @@ -24,7 +24,7 @@ font-size: 14px; line-height: 32px; - color: #ABAFC7; + color: #323232; } .textarea { -moz-box-sizing: border-box; @@ -44,7 +44,7 @@ font-size: 13px; line-height: 20px; - color: #ABAFC7; + color: #323232; } ::placeholder { diff --git a/css/service_card.css b/css/service_card.css index 63cb0d8..3f75e05 100644 --- a/css/service_card.css +++ b/css/service_card.css @@ -12,6 +12,7 @@ width: clamp(300px, 50vw, 350px); height: 420px; } + .service-card-container:nth-child(1) .service-card-icon { background-color: #4ADB61; filter: drop-shadow(0px 15px 30px #4ADB61); @@ -69,31 +70,27 @@ display: flex; justify-content: center; align-items: center; +} -} -.service-card-container:hover { +.service-card-container-clicked { + transform: rotateY(-180deg); + transition: transform 150ms ease; + + display: flex; + flex-direction: column; + justify-content: space-evenly; + align-items: center; + + padding: 10px; background-color: #4C40F7; - transition-duration: 0.5s; - cursor: pointer; + border-radius: 20px; + 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 { - 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; +.service-card-container-clicked > * { + transform: rotateY(-180deg); } @@ -133,5 +130,33 @@ width: clamp(270px, 24vw, 380px); 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; + } } \ No newline at end of file diff --git a/css/services.css b/css/services.css index ce9873a..d88f01d 100644 --- a/css/services.css +++ b/css/services.css @@ -1,4 +1,6 @@ .services-section-container { + scroll-margin-top: 100px; + display: flex; flex-direction: column; justify-content: center; diff --git a/locales/en.yml b/locales/en.yml index ce06d51..ec6a34c 100644 --- a/locales/en.yml +++ b/locales/en.yml @@ -10,18 +10,28 @@ services-section: first: title: Web Development description: We develop amazing websites to be more professional, functional, and help you sell more. + opened-title: A + opened-description: B second: title: SEO description: We optimize website content and structure to improve search engine rankings. + opened-title: A + opened-description: B third: title: Backend Logic description: We efficientize your business critical operations and speed up your services & processes. + opened-title: A + opened-description: B fourth: title: Social Media Management description: We plan and execute effective social media strategies to increase visibility and engagement. + opened-title: A + opened-description: B fifth: title: Digital Marketing description: We also help you market your products through an online marketplace. + opened-title: A + opened-description: B start: left-column: title-first-line: Make your business @@ -60,6 +70,6 @@ contact: title: Contact Us subtitle: Leave us a message form-name-label: Name - form-email-label: Email + form-email-label: Phone number or Email form-message-label: Start typing... form-button-label: Send \ No newline at end of file diff --git a/src/components/nav_bar.rs b/src/components/nav_bar.rs index c6c1867..148dc46 100644 --- a/src/components/nav_bar.rs +++ b/src/components/nav_bar.rs @@ -1,7 +1,6 @@ use rust_i18n::t; use stdweb::web::{event::ResizeEvent, IEventTarget}; use yew::prelude::*; -use yew_router::prelude::{use_navigator, use_route}; use crate::routes::main_router::Route; @@ -15,14 +14,7 @@ pub struct NavigationBarProps { #[function_component(NavigationBar)] pub fn navigation_bar(props: &NavigationBarProps) -> Html { let language = &props.language; - let current_route: Option = use_route(); - 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 current_route = use_state_eq(|| Route::Start); let navbar_toggle = use_state(|| true); let on_click_hamburger = { @@ -46,38 +38,62 @@ pub fn navigation_bar(props: &NavigationBarProps) -> Html { } }); + html! {
-
+ -
+
-
- {t!("navbar.item.home", locale = language.locale())} -
+ + {t!("navbar.item.home", locale = language.locale())} + -
+ {t!("navbar.item.services", locale = language.locale())} -
+ -
+ {t!("navbar.item.about-us", locale = language.locale())} -
+ { if (*window_device_handle) == WindowDevice::Mobile { html! { -
+ {t!("navbar.item.contact-us", locale = language.locale())} -
+ } } else { html! {} } } @@ -109,9 +125,15 @@ pub fn navigation_bar(props: &NavigationBarProps) -> Html { } } else { html! { -
+ {t!("navbar.item.contact-us", locale = language.locale())} -
+ } } } @@ -120,7 +142,7 @@ pub fn navigation_bar(props: &NavigationBarProps) -> Html { } } -#[derive(PartialEq, Eq, PartialOrd, Ord)] +#[derive(PartialEq, Eq, PartialOrd, Ord, Clone)] enum WindowDevice { Desktop, Mobile, diff --git a/src/components/service_card.rs b/src/components/service_card.rs index 046eb74..f930276 100644 --- a/src/components/service_card.rs +++ b/src/components/service_card.rs @@ -2,55 +2,66 @@ use yew::prelude::*; #[derive(PartialEq, Properties)] pub struct ServiceCardProps { - #[prop_or_default] - pub selected: bool, pub hexcolor: String, pub iconclass: String, pub title: String, pub description: String, + pub opened_title: String, + pub opened_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()} -
-
- -
-
- } + let clicked = use_state_eq(|| false); + let onclick = { + let clicked = clicked.clone(); + Callback::from(move |_: MouseEvent| { + clicked.set(!(*clicked).clone()); + }) + }; + html! { +
+ + { + if (*clicked).clone() { + html! { + <> +
+ {props.opened_title.clone()} +
+
+ {props.opened_description.clone()} +
+ + } + } else { + html! { + <> +
+ //Icon + +
+
+ //title + {props.title.clone()} +
+
+ //description + {props.description.clone()} +
+
+ +
+ + } + } + } + +
} } diff --git a/src/pages/about.rs b/src/pages/about.rs index da9499c..0367401 100644 --- a/src/pages/about.rs +++ b/src/pages/about.rs @@ -11,7 +11,7 @@ pub struct AboutPageProps { pub fn about_page(props: &AboutPageProps) -> Html { let language = props.language.clone(); html! { -
+
{t!("about-us.title", locale = language.locale())}
diff --git a/src/pages/call_to_action.rs b/src/pages/call_to_action.rs index 3b4008f..035d23f 100644 --- a/src/pages/call_to_action.rs +++ b/src/pages/call_to_action.rs @@ -15,7 +15,7 @@ pub fn call_to_action_page(props: &CallToActionPageProps) -> Html { let email_handle = use_state(|| String::new()); let message_handle = use_state(|| String::new()); html! { -
+
{t!("contact.title", locale = language.locale())}
@@ -27,9 +27,12 @@ pub fn call_to_action_page(props: &CallToActionPageProps) -> Html {
-
- {t!("contact.form-button-label", locale = language.locale())} +
+
+ {t!("contact.form-button-label", locale = language.locale())} +
+
} } diff --git a/src/pages/main_page.rs b/src/pages/main_page.rs index a7d82ee..4075eeb 100644 --- a/src/pages/main_page.rs +++ b/src/pages/main_page.rs @@ -31,12 +31,12 @@ pub fn main_page() -> Html { html! { <> - +
- - - - + + + +
diff --git a/src/pages/services.rs b/src/pages/services.rs index 41041f6..2a92551 100644 --- a/src/pages/services.rs +++ b/src/pages/services.rs @@ -11,15 +11,14 @@ pub struct ServicesPageProps { pub fn services_page(props: &ServicesPageProps) -> Html { let language = &props.language; html! { -
+
{t!("services-section.title", locale = language.locale())}
- - - - - - // + + + + +
diff --git a/src/pages/start.rs b/src/pages/start.rs index 3f1fb29..6ec0617 100644 --- a/src/pages/start.rs +++ b/src/pages/start.rs @@ -12,7 +12,7 @@ pub struct StartPageProps { pub fn start_page(props: &StartPageProps) -> Html { let language = &props.language; html! { -
+
{t!("start.left-column.title-first-line", locale = language.locale())} @@ -26,9 +26,9 @@ pub fn start_page(props: &StartPageProps) -> Html {
{t!("start.left-column-description", locale = language.locale())}
-
+ {t!("start.left-column-button-text", locale = language.locale())} -
+