Stable Desktop view

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

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

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;
+    width: 200px;
-    height: 88px;
+    height: 65px;
-    right: 300px;
+    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);
+        right: 0px;
-        top: clamp(350px, 42vw, 500px);
+        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: 1050px) {
+    .start-section-right-column-art-bottom-right-pill {
+        right: -4vw;
     }
-@media only screen and (min-width: 1500px) {
-}
-@media only screen and (min-width: 1700px) {
 }

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) {
+    imports.wbg.__wbindgen_closure_wrapper3155 = function(arg0, arg1, arg2) {
-        const ret = makeClosure(arg0, arg1, 325, __wbg_adapter_38);
+        const ret = makeClosure(arg0, arg1, 429, __wbg_adapter_38);
         return addHeapObject(ret);
     };
-    imports.wbg.__wbindgen_closure_wrapper2817 = function(arg0, arg1, arg2) {
+    imports.wbg.__wbindgen_closure_wrapper3157 = function(arg0, arg1, arg2) {
-        const ret = makeClosure(arg0, arg1, 327, __wbg_adapter_41);
+        const ret = makeClosure(arg0, arg1, 431, __wbg_adapter_41);
         return addHeapObject(ret);
     };
-    imports.wbg.__wbindgen_closure_wrapper8799 = function(arg0, arg1, arg2) {
+    imports.wbg.__wbindgen_closure_wrapper9139 = function(arg0, arg1, arg2) {
-        const ret = makeMutClosure(arg0, arg1, 661, __wbg_adapter_44);
+        const ret = makeMutClosure(arg0, arg1, 765, __wbg_adapter_44);
         return addHeapObject(ret);
     };
-    imports.wbg.__wbindgen_closure_wrapper9105 = function(arg0, arg1, arg2) {
+    imports.wbg.__wbindgen_closure_wrapper9445 = function(arg0, arg1, arg2) {
-        const ret = makeMutClosure(arg0, arg1, 675, __wbg_adapter_47);
+        const ret = makeMutClosure(arg0, arg1, 779, __wbg_adapter_47);
         return addHeapObject(ret);
     };
-    imports.wbg.__wbindgen_closure_wrapper9718 = function(arg0, arg1, arg2) {
+    imports.wbg.__wbindgen_closure_wrapper10058 = function(arg0, arg1, arg2) {
-        const ret = makeMutClosure(arg0, arg1, 730, __wbg_adapter_50);
+        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();
 

dist/index.html

@@ -4,7 +4,11 @@
         
         <link rel="stylesheet" href="/body-543b917958789c41.css">
         <link rel="stylesheet" href="/navbar-b9323c6a829e08b2.css">
-        <link rel="stylesheet" href="/start-23334f07d784d520.css">
+        <link rel="stylesheet" href="/footer-c920ca43256fdcb9.css">
+        <link rel="stylesheet" href="/start-e5bb49a25da0d3bc.css">
+        <link rel="stylesheet" href="/services-e3fac511f8ec30fa.css">
+        <link rel="stylesheet" href="/call_to_action-c920ca43256fdcb9.css">
+        <link rel="stylesheet" href="/service_card-1dcd0bfd8e0f3c95.css">
         
         <link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
         <script src="https://kit.fontawesome.com/fcdfdfe1ad.js" crossorigin="anonymous"></script>
@@ -12,9 +16,9 @@
         <base href="/">
         
     
-<link rel="preload" href="/bl-frontend-9f36eaf4ad59c9b9_bg.wasm" as="fetch" type="application/wasm" crossorigin="">
+<link rel="preload" href="/bl-frontend-8ea2c9cc7a3c1e00_bg.wasm" as="fetch" type="application/wasm" crossorigin="">
-<link rel="modulepreload" href="/bl-frontend-9f36eaf4ad59c9b9.js"></head>
+<link rel="modulepreload" href="/bl-frontend-8ea2c9cc7a3c1e00.js"></head>
-<body><script type="module">import init from '/bl-frontend-9f36eaf4ad59c9b9.js';init('/bl-frontend-9f36eaf4ad59c9b9_bg.wasm');</script><script>(function () {
+<body><script type="module">import init from '/bl-frontend-8ea2c9cc7a3c1e00.js';init('/bl-frontend-8ea2c9cc7a3c1e00_bg.wasm');</script><script>(function () {
     var protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
     var url = protocol + '//' + window.location.host + '/_trunk/ws';
     var poll_interval = 5000;

dist/service_card-1dcd0bfd8e0f3c95.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;
+}

dist/services-e3fac511f8ec30fa.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;
+}

dist/start-e5bb49a25da0d3bc.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;
+    width: 200px;
-    height: 88px;
+    height: 65px;
-    right: 300px;
+    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);
+        right: 0px;
-        top: clamp(350px, 42vw, 500px);
+        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: 1050px) {
+    .start-section-right-column-art-bottom-right-pill {
+        right: -4vw;
     }
-@media only screen and (min-width: 1500px) {
-}
-@media only screen and (min-width: 1700px) {
 }

index.html

@@ -6,7 +6,11 @@
         
         <link data-trunk type="text/css" href="css/body.css" rel="css" />
         <link data-trunk type="text/css" href="css/navbar.css" rel="css" />
+        <link data-trunk type="text/css" href="css/footer.css" rel="css" />
         <link data-trunk type="text/css" href="css/start.css" rel="css" />
+        <link data-trunk type="text/css" href="css/services.css" rel="css" />
+        <link data-trunk type="text/css" href="css/call_to_action.css" rel="css" />
+        <link data-trunk type="text/css" href="css/service_card.css" rel="css" />
         
         <link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
         <script src="https://kit.fontawesome.com/fcdfdfe1ad.js" crossorigin="anonymous"></script>

locales/services/services.json

@@ -0,0 +1,6 @@
+{
+    "services-section.title" : {
+        "en": "Our digital marketing expertise",
+        "es": "Nuestro expertise en marketing digital"
+    }
+}

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.",
+        "en": "Our experienced team will create a tailored solution to maximize your business potential.",
-        "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."
+        "es": "Desbloquea el poder de tu negocio y alcanza el éxito con nuestros servicios."
     },
     "start.left-column-button-text": {
         "en": "Get Started >",

src/components/mod.rs

@@ -1,2 +1,3 @@
 pub mod nav_bar;
 pub mod footer;
+pub mod service_card;

src/components/service_card.rs

@@ -0,0 +1,21 @@
+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 title: String,
+    pub description: String, 
+}

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! {
-        <>
-            <NavigationBar/>
-            <div class={"page-container"}>
         
-            </div>
-        </>
     }
 }

src/pages/call_to_action.rs

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

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 {
             <NavigationBar/>
             <div class={"page-container"}>
                 <StartPage/>
+                <ServicesPage/>
+                <AboutPage/>
+                <CallToActionPage/>
             </div>
         </>
     }

src/pages/mod.rs

@@ -3,3 +3,4 @@ pub mod main_page;
 pub mod about;
 pub mod start;
 pub mod services;
+pub mod call_to_action;

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! {
     
+    html! {
+        <div class={"services-section-container"}>
+            <div class={"services-section-title"}>{t!("services-section.title", current_lang())}</div>
+            <div class={"services-section-services-container"}>
+                <ServiceCard/>
+            </div>
+            
+        </div>
     }
 }