diff --git a/assets/images/subject-1-picture.png b/assets/images/subject-1-picture.png index 34626ea..27b4a2e 100644 Binary files a/assets/images/subject-1-picture.png and b/assets/images/subject-1-picture.png differ diff --git a/assets/images/subject-2-picture.png b/assets/images/subject-2-picture.png index 6260ee8..6529f06 100644 Binary files a/assets/images/subject-2-picture.png and b/assets/images/subject-2-picture.png differ diff --git a/css/call_to_action.css b/css/call_to_action.css new file mode 100644 index 0000000..e69de29 diff --git a/css/footer.css b/css/footer.css new file mode 100644 index 0000000..e69de29 diff --git a/css/service_card.css b/css/service_card.css new file mode 100644 index 0000000..b6bfeb0 --- /dev/null +++ b/css/service_card.css @@ -0,0 +1,14 @@ +.service-card-container { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + + padding: 40px; + background-color: white; + border-radius: 20px; + box-shadow: -10px 30px 70px rgba(219, 222, 225, 0.4); + + width: 352px; + height: 458px; +} \ No newline at end of file diff --git a/css/services.css b/css/services.css index e69de29..8d17e7e 100644 --- a/css/services.css +++ b/css/services.css @@ -0,0 +1,21 @@ +.services-section-container { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + + margin-top: 100px; +} +.services-section-title { + font-family: Poppins; + font-size: 40; + color: #111029; + text-align: center; +} +.services-section-services-container { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + gap: 50px; +} \ No newline at end of file diff --git a/css/start.css b/css/start.css index 745ca8a..2abd5be 100644 --- a/css/start.css +++ b/css/start.css @@ -1,10 +1,10 @@ .start-section-container { display: flex; - flex-direction: row; + flex-direction: column-reverse; justify-content: center; align-items: center; - height: 600px; + height: 1000px; } .start-section-left-column { display: flex; @@ -12,9 +12,10 @@ justify-content: center; align-items: center; align-items: start; - min-width: min(55vw, 800px); + width: clamp(360px, 60vw, 650px); } .start-section-left-column-title-nocolor { + white-space: nowrap; font-family: Poppins; font-size: clamp(30px, 4.5vw, 64px); font-weight: 600; @@ -76,9 +77,9 @@ } .start-section-right-column-art-top-left-pill { position: absolute; - width: 250px; - height: 88px; - right: 300px; + width: 200px; + height: 65px; + left: 40px; top: 26px; background: #4C40F7; @@ -147,10 +148,11 @@ .start-section-right-column-subject-1-photo { object-fit: contain; width: 271px; + } .start-section-right-column-subject-2-photo { object-fit: cover; - width: 592px; + width: 260px; } .start-section-right-column-subject-2-title { font-family: Poppins; @@ -168,19 +170,23 @@ } -@media only screen and (min-width: 850px) { +@media only screen and (min-width: 750px) { + .start-section-container { + height: 600px; + flex-direction: row; + } .start-section-left-column-title-nocolor { - font-size: clamp(30px, 4.5vw, 64px); + font-size: clamp(28px, 4.2vw, 64px); } .start-section-left-column-title-colored { - font-size: clamp(30px, 4.5vw, 64px); + font-size: clamp(28px, 4.2vw, 64px); } .start-section-left-column-description { font-size: clamp(12px, 1.5vw, 18px); line-height: clamp(24px, 3vw, 36px); - width: clamp(200px, 30vw, 420px); + width: clamp(200px, 30vw, 390px); margin: 20px 0px 26px 0px; margin-top: clamp(20px, 2.5vw, 50px); @@ -194,26 +200,28 @@ .start-section-right-column { width: 100%; - max-width: 370px; height: clamp(100%, 50vw, 750px) } .start-section-right-column-art-top-left-pill { width: clamp(120px, 20vw, 250px); height: clamp(60px, 7vw, 80px); + left: initial; right: min(200px, 20vw); top: 26px; } .start-section-right-column-art-top-right-pill { width: clamp(150px, 18vw, 180px); - height: clamp(340px, 40vw, 480px); + height: clamp(380px, 45vw, 480px); + left: initial; right: 0px; top: 0px; } .start-section-right-column-art-bottom-left-pill { width: clamp(150px, 18vw, 180px); - height: clamp(340px, 40vw, 480px); + height: clamp(350px, 42vw, 480px); + left: initial; right: min(200px, 20vw); top: 120px; } @@ -221,26 +229,27 @@ .start-section-right-column-art-bottom-right-pill { width: clamp(120px, 20vw, 250px); height: clamp(60px, 7vw, 80px); - left: clamp(0px, 16vw, 190px); - top: clamp(350px, 42vw, 500px); + right: 0px; + top: clamp(400px, 47vw, 500px); } .start-section-right-column-subject-1-title { font-size: clamp(12px, 1.4vw, 21px); } .start-section-right-column-subject-1-photo { - width: clamp(220px, 21vw, 280px); + width: clamp(250px, 27vw, 290px); } .start-section-right-column-subject-2-photo { - width: clamp(500px, 60vw, 650px); + width: clamp(240px, 25vw, 275px); + margin-right: 20px; + margin-bottom: 2px; } .start-section-right-column-subject-2-title { font-size: clamp(12px, 1.4vw, 21px); } } -@media only screen and (min-width: 1000px) { -} -@media only screen and (min-width: 1500px) { -} -@media only screen and (min-width: 1700px) { +@media only screen and (min-width: 1050px) { + .start-section-right-column-art-bottom-right-pill { + right: -4vw; + } } \ No newline at end of file diff --git a/dist/bl-frontend-9f36eaf4ad59c9b9.js b/dist/bl-frontend-8ea2c9cc7a3c1e00.js similarity index 98% rename from dist/bl-frontend-9f36eaf4ad59c9b9.js rename to dist/bl-frontend-8ea2c9cc7a3c1e00.js index d9390fe..f957a57 100644 --- a/dist/bl-frontend-9f36eaf4ad59c9b9.js +++ b/dist/bl-frontend-8ea2c9cc7a3c1e00.js @@ -895,24 +895,24 @@ function getImports() { const ret = wasm.__wbindgen_export_2; return addHeapObject(ret); }; - imports.wbg.__wbindgen_closure_wrapper2815 = function(arg0, arg1, arg2) { - const ret = makeClosure(arg0, arg1, 325, __wbg_adapter_38); + imports.wbg.__wbindgen_closure_wrapper3155 = function(arg0, arg1, arg2) { + const ret = makeClosure(arg0, arg1, 429, __wbg_adapter_38); return addHeapObject(ret); }; - imports.wbg.__wbindgen_closure_wrapper2817 = function(arg0, arg1, arg2) { - const ret = makeClosure(arg0, arg1, 327, __wbg_adapter_41); + imports.wbg.__wbindgen_closure_wrapper3157 = function(arg0, arg1, arg2) { + const ret = makeClosure(arg0, arg1, 431, __wbg_adapter_41); return addHeapObject(ret); }; - imports.wbg.__wbindgen_closure_wrapper8799 = function(arg0, arg1, arg2) { - const ret = makeMutClosure(arg0, arg1, 661, __wbg_adapter_44); + imports.wbg.__wbindgen_closure_wrapper9139 = function(arg0, arg1, arg2) { + const ret = makeMutClosure(arg0, arg1, 765, __wbg_adapter_44); return addHeapObject(ret); }; - imports.wbg.__wbindgen_closure_wrapper9105 = function(arg0, arg1, arg2) { - const ret = makeMutClosure(arg0, arg1, 675, __wbg_adapter_47); + imports.wbg.__wbindgen_closure_wrapper9445 = function(arg0, arg1, arg2) { + const ret = makeMutClosure(arg0, arg1, 779, __wbg_adapter_47); return addHeapObject(ret); }; - imports.wbg.__wbindgen_closure_wrapper9718 = function(arg0, arg1, arg2) { - const ret = makeMutClosure(arg0, arg1, 730, __wbg_adapter_50); + imports.wbg.__wbindgen_closure_wrapper10058 = function(arg0, arg1, arg2) { + const ret = makeMutClosure(arg0, arg1, 834, __wbg_adapter_50); return addHeapObject(ret); }; @@ -951,7 +951,7 @@ function initSync(module) { async function init(input) { if (typeof input === 'undefined') { - input = new URL('bl-frontend-9f36eaf4ad59c9b9_bg.wasm', import.meta.url); + input = new URL('bl-frontend-8ea2c9cc7a3c1e00_bg.wasm', import.meta.url); } const imports = getImports(); diff --git a/dist/bl-frontend-9f36eaf4ad59c9b9_bg.wasm b/dist/bl-frontend-8ea2c9cc7a3c1e00_bg.wasm similarity index 50% rename from dist/bl-frontend-9f36eaf4ad59c9b9_bg.wasm rename to dist/bl-frontend-8ea2c9cc7a3c1e00_bg.wasm index 059eded..5b61f07 100644 Binary files a/dist/bl-frontend-9f36eaf4ad59c9b9_bg.wasm and b/dist/bl-frontend-8ea2c9cc7a3c1e00_bg.wasm differ diff --git a/dist/call_to_action-c920ca43256fdcb9.css b/dist/call_to_action-c920ca43256fdcb9.css new file mode 100644 index 0000000..e69de29 diff --git a/dist/footer-c920ca43256fdcb9.css b/dist/footer-c920ca43256fdcb9.css new file mode 100644 index 0000000..e69de29 diff --git a/dist/images/subject-1-picture.png b/dist/images/subject-1-picture.png index 34626ea..27b4a2e 100644 Binary files a/dist/images/subject-1-picture.png and b/dist/images/subject-1-picture.png differ diff --git a/dist/images/subject-2-picture.png b/dist/images/subject-2-picture.png index 6260ee8..6529f06 100644 Binary files a/dist/images/subject-2-picture.png and b/dist/images/subject-2-picture.png differ diff --git a/dist/index.html b/dist/index.html index 0ca5e60..0fef941 100644 --- a/dist/index.html +++ b/dist/index.html @@ -4,7 +4,11 @@ - + + + + + @@ -12,9 +16,9 @@ - - - diff --git a/locales/services/services.json b/locales/services/services.json new file mode 100644 index 0000000..b8ab511 --- /dev/null +++ b/locales/services/services.json @@ -0,0 +1,6 @@ +{ + "services-section.title" : { + "en": "Our digital marketing expertise", + "es": "Nuestro expertise en marketing digital" + } +} \ No newline at end of file diff --git a/locales/start/start.json b/locales/start/start.json index dd0a0b3..23b8106 100644 --- a/locales/start/start.json +++ b/locales/start/start.json @@ -12,8 +12,8 @@ "es": "con nosotros" }, "start.left-column-description": { - "en": "We provide various services to make your business grow and get bigger. Your satisfaction is our first priority.", - "es": "Ofrecemos una amplia variedad de soluciones para el desarrollo web y el marketing. Nuestra primera prioridad es garantizar la satisfacción de nuestros clientes." + "en": "Our experienced team will create a tailored solution to maximize your business potential.", + "es": "Desbloquea el poder de tu negocio y alcanza el éxito con nuestros servicios." }, "start.left-column-button-text": { "en": "Get Started >", diff --git a/src/components/mod.rs b/src/components/mod.rs index fd08d6e..81e3b27 100644 --- a/src/components/mod.rs +++ b/src/components/mod.rs @@ -1,2 +1,3 @@ pub mod nav_bar; -pub mod footer; \ No newline at end of file +pub mod footer; +pub mod service_card; \ No newline at end of file diff --git a/src/components/service_card.rs b/src/components/service_card.rs new file mode 100644 index 0000000..ccf2588 --- /dev/null +++ b/src/components/service_card.rs @@ -0,0 +1,21 @@ +use yew::prelude::*; + +#[function_component(ServiceCard)] +pub fn service_card() -> Html { + html! { +
+ +
+ } +} + + +#[derive(PartialEq, Properties)] +pub struct ServiceCardProps { + #[prop_or_default] + pub selected: bool, + pub icon_color_hex: String, + pub icon_id: String, + pub title: String, + pub description: String, +} \ No newline at end of file diff --git a/src/pages/about.rs b/src/pages/about.rs index e28632c..79e53d1 100644 --- a/src/pages/about.rs +++ b/src/pages/about.rs @@ -1,16 +1,9 @@ use yew::prelude::*; -use crate::components::nav_bar::NavigationBar; - #[function_component(AboutPage)] pub fn about_page() -> Html { html! { - <> - -
- -
- + } } \ No newline at end of file diff --git a/src/pages/call_to_action.rs b/src/pages/call_to_action.rs new file mode 100644 index 0000000..bdf307f --- /dev/null +++ b/src/pages/call_to_action.rs @@ -0,0 +1,9 @@ +use yew::prelude::*; + + +#[function_component(CallToActionPage)] +pub fn call_to_action_page() -> Html { + html! { + + } +} \ No newline at end of file diff --git a/src/pages/main_page.rs b/src/pages/main_page.rs index 3977bee..fc2e9b1 100644 --- a/src/pages/main_page.rs +++ b/src/pages/main_page.rs @@ -1,10 +1,12 @@ use yew::prelude::*; -use crate::{components::nav_bar::NavigationBar, pages::start::StartPage}; +use crate::{components::nav_bar::NavigationBar, pages::{start::StartPage, services::ServicesPage, about::AboutPage, call_to_action::CallToActionPage}}; #[derive(Debug, Clone, Copy, PartialEq, Eq, PartialOrd, Ord)] pub enum Section { - + Services, + AboutUs, + CallToAction, } #[derive(Properties, PartialEq)] pub struct MainPageProps { @@ -20,6 +22,9 @@ pub fn main_page() -> Html {
+ + +
} diff --git a/src/pages/mod.rs b/src/pages/mod.rs index 43311ea..66b125a 100644 --- a/src/pages/mod.rs +++ b/src/pages/mod.rs @@ -2,4 +2,5 @@ pub mod not_found; pub mod main_page; pub mod about; pub mod start; -pub mod services; \ No newline at end of file +pub mod services; +pub mod call_to_action; \ No newline at end of file diff --git a/src/pages/services.rs b/src/pages/services.rs index cba8669..86425dd 100644 --- a/src/pages/services.rs +++ b/src/pages/services.rs @@ -1,8 +1,18 @@ +use locales::t; use yew::prelude::*; +use crate::{language::current_lang, components::service_card::ServiceCard}; + #[function_component(ServicesPage)] pub fn services_page() -> Html { + html! { - +
+
{t!("services-section.title", current_lang())}
+
+ +
+ +
} } \ No newline at end of file