Stable Desktop view

This commit is contained in:
Franklin 2023-04-10 09:25:04 -04:00
parent b1b6ed620e
commit a7a9d06bc6
27 changed files with 218 additions and 76 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 863 KiB

After

Width:  |  Height:  |  Size: 915 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.1 MiB

After

Width:  |  Height:  |  Size: 1.1 MiB

0
css/call_to_action.css Normal file
View File

0
css/footer.css Normal file
View File

14
css/service_card.css Normal file
View File

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

View File

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

View File

@ -1,10 +1,10 @@
.start-section-container { .start-section-container {
display: flex; display: flex;
flex-direction: row; flex-direction: column-reverse;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 600px; height: 1000px;
} }
.start-section-left-column { .start-section-left-column {
display: flex; display: flex;
@ -12,9 +12,10 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
align-items: start; align-items: start;
min-width: min(55vw, 800px); width: clamp(360px, 60vw, 650px);
} }
.start-section-left-column-title-nocolor { .start-section-left-column-title-nocolor {
white-space: nowrap;
font-family: Poppins; font-family: Poppins;
font-size: clamp(30px, 4.5vw, 64px); font-size: clamp(30px, 4.5vw, 64px);
font-weight: 600; font-weight: 600;
@ -76,9 +77,9 @@
} }
.start-section-right-column-art-top-left-pill { .start-section-right-column-art-top-left-pill {
position: absolute; position: absolute;
width: 250px; width: 200px;
height: 88px; height: 65px;
right: 300px; left: 40px;
top: 26px; top: 26px;
background: #4C40F7; background: #4C40F7;
@ -147,10 +148,11 @@
.start-section-right-column-subject-1-photo { .start-section-right-column-subject-1-photo {
object-fit: contain; object-fit: contain;
width: 271px; width: 271px;
} }
.start-section-right-column-subject-2-photo { .start-section-right-column-subject-2-photo {
object-fit: cover; object-fit: cover;
width: 592px; width: 260px;
} }
.start-section-right-column-subject-2-title { .start-section-right-column-subject-2-title {
font-family: Poppins; 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 { .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 { .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 { .start-section-left-column-description {
font-size: clamp(12px, 1.5vw, 18px); font-size: clamp(12px, 1.5vw, 18px);
line-height: clamp(24px, 3vw, 36px); line-height: clamp(24px, 3vw, 36px);
width: clamp(200px, 30vw, 420px); width: clamp(200px, 30vw, 390px);
margin: 20px 0px 26px 0px; margin: 20px 0px 26px 0px;
margin-top: clamp(20px, 2.5vw, 50px); margin-top: clamp(20px, 2.5vw, 50px);
@ -194,26 +200,28 @@
.start-section-right-column { .start-section-right-column {
width: 100%; width: 100%;
max-width: 370px;
height: clamp(100%, 50vw, 750px) height: clamp(100%, 50vw, 750px)
} }
.start-section-right-column-art-top-left-pill { .start-section-right-column-art-top-left-pill {
width: clamp(120px, 20vw, 250px); width: clamp(120px, 20vw, 250px);
height: clamp(60px, 7vw, 80px); height: clamp(60px, 7vw, 80px);
left: initial;
right: min(200px, 20vw); right: min(200px, 20vw);
top: 26px; top: 26px;
} }
.start-section-right-column-art-top-right-pill { .start-section-right-column-art-top-right-pill {
width: clamp(150px, 18vw, 180px); width: clamp(150px, 18vw, 180px);
height: clamp(340px, 40vw, 480px); height: clamp(380px, 45vw, 480px);
left: initial;
right: 0px; right: 0px;
top: 0px; top: 0px;
} }
.start-section-right-column-art-bottom-left-pill { .start-section-right-column-art-bottom-left-pill {
width: clamp(150px, 18vw, 180px); width: clamp(150px, 18vw, 180px);
height: clamp(340px, 40vw, 480px); height: clamp(350px, 42vw, 480px);
left: initial;
right: min(200px, 20vw); right: min(200px, 20vw);
top: 120px; top: 120px;
} }
@ -221,26 +229,27 @@
.start-section-right-column-art-bottom-right-pill { .start-section-right-column-art-bottom-right-pill {
width: clamp(120px, 20vw, 250px); width: clamp(120px, 20vw, 250px);
height: clamp(60px, 7vw, 80px); 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 { .start-section-right-column-subject-1-title {
font-size: clamp(12px, 1.4vw, 21px); font-size: clamp(12px, 1.4vw, 21px);
} }
.start-section-right-column-subject-1-photo { .start-section-right-column-subject-1-photo {
width: clamp(220px, 21vw, 280px); width: clamp(250px, 27vw, 290px);
} }
.start-section-right-column-subject-2-photo { .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 { .start-section-right-column-subject-2-title {
font-size: clamp(12px, 1.4vw, 21px); 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) {
} }

View File

@ -895,24 +895,24 @@ function getImports() {
const ret = wasm.__wbindgen_export_2; const ret = wasm.__wbindgen_export_2;
return addHeapObject(ret); 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); 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); 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); 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); 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); return addHeapObject(ret);
}; };
@ -951,7 +951,7 @@ function initSync(module) {
async function init(input) { async function init(input) {
if (typeof input === 'undefined') { 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(); const imports = getImports();

View File

0
dist/footer-c920ca43256fdcb9.css vendored Normal file
View File

Binary file not shown.

Before

Width:  |  Height:  |  Size: 863 KiB

After

Width:  |  Height:  |  Size: 915 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.1 MiB

After

Width:  |  Height:  |  Size: 1.1 MiB

12
dist/index.html vendored
View File

@ -4,7 +4,11 @@
<link rel="stylesheet" href="/body-543b917958789c41.css"> <link rel="stylesheet" href="/body-543b917958789c41.css">
<link rel="stylesheet" href="/navbar-b9323c6a829e08b2.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"> <link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
<script src="https://kit.fontawesome.com/fcdfdfe1ad.js" crossorigin="anonymous"></script> <script src="https://kit.fontawesome.com/fcdfdfe1ad.js" crossorigin="anonymous"></script>
@ -12,9 +16,9 @@
<base href="/"> <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 protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
var url = protocol + '//' + window.location.host + '/_trunk/ws'; var url = protocol + '//' + window.location.host + '/_trunk/ws';
var poll_interval = 5000; var poll_interval = 5000;

14
dist/service_card-1dcd0bfd8e0f3c95.css vendored Normal file
View File

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

21
dist/services-e3fac511f8ec30fa.css vendored Normal file
View File

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

View File

@ -1,10 +1,10 @@
.start-section-container { .start-section-container {
display: flex; display: flex;
flex-direction: row; flex-direction: column-reverse;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 600px; height: 1000px;
} }
.start-section-left-column { .start-section-left-column {
display: flex; display: flex;
@ -12,9 +12,10 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
align-items: start; align-items: start;
min-width: min(55vw, 800px); width: clamp(360px, 60vw, 650px);
} }
.start-section-left-column-title-nocolor { .start-section-left-column-title-nocolor {
white-space: nowrap;
font-family: Poppins; font-family: Poppins;
font-size: clamp(30px, 4.5vw, 64px); font-size: clamp(30px, 4.5vw, 64px);
font-weight: 600; font-weight: 600;
@ -76,9 +77,9 @@
} }
.start-section-right-column-art-top-left-pill { .start-section-right-column-art-top-left-pill {
position: absolute; position: absolute;
width: 250px; width: 200px;
height: 88px; height: 65px;
right: 300px; left: 40px;
top: 26px; top: 26px;
background: #4C40F7; background: #4C40F7;
@ -147,10 +148,11 @@
.start-section-right-column-subject-1-photo { .start-section-right-column-subject-1-photo {
object-fit: contain; object-fit: contain;
width: 271px; width: 271px;
} }
.start-section-right-column-subject-2-photo { .start-section-right-column-subject-2-photo {
object-fit: cover; object-fit: cover;
width: 592px; width: 260px;
} }
.start-section-right-column-subject-2-title { .start-section-right-column-subject-2-title {
font-family: Poppins; 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 { .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 { .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 { .start-section-left-column-description {
font-size: clamp(12px, 1.5vw, 18px); font-size: clamp(12px, 1.5vw, 18px);
line-height: clamp(24px, 3vw, 36px); line-height: clamp(24px, 3vw, 36px);
width: clamp(200px, 30vw, 420px); width: clamp(200px, 30vw, 390px);
margin: 20px 0px 26px 0px; margin: 20px 0px 26px 0px;
margin-top: clamp(20px, 2.5vw, 50px); margin-top: clamp(20px, 2.5vw, 50px);
@ -194,26 +200,28 @@
.start-section-right-column { .start-section-right-column {
width: 100%; width: 100%;
max-width: 370px;
height: clamp(100%, 50vw, 750px) height: clamp(100%, 50vw, 750px)
} }
.start-section-right-column-art-top-left-pill { .start-section-right-column-art-top-left-pill {
width: clamp(120px, 20vw, 250px); width: clamp(120px, 20vw, 250px);
height: clamp(60px, 7vw, 80px); height: clamp(60px, 7vw, 80px);
left: initial;
right: min(200px, 20vw); right: min(200px, 20vw);
top: 26px; top: 26px;
} }
.start-section-right-column-art-top-right-pill { .start-section-right-column-art-top-right-pill {
width: clamp(150px, 18vw, 180px); width: clamp(150px, 18vw, 180px);
height: clamp(340px, 40vw, 480px); height: clamp(380px, 45vw, 480px);
left: initial;
right: 0px; right: 0px;
top: 0px; top: 0px;
} }
.start-section-right-column-art-bottom-left-pill { .start-section-right-column-art-bottom-left-pill {
width: clamp(150px, 18vw, 180px); width: clamp(150px, 18vw, 180px);
height: clamp(340px, 40vw, 480px); height: clamp(350px, 42vw, 480px);
left: initial;
right: min(200px, 20vw); right: min(200px, 20vw);
top: 120px; top: 120px;
} }
@ -221,26 +229,27 @@
.start-section-right-column-art-bottom-right-pill { .start-section-right-column-art-bottom-right-pill {
width: clamp(120px, 20vw, 250px); width: clamp(120px, 20vw, 250px);
height: clamp(60px, 7vw, 80px); 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 { .start-section-right-column-subject-1-title {
font-size: clamp(12px, 1.4vw, 21px); font-size: clamp(12px, 1.4vw, 21px);
} }
.start-section-right-column-subject-1-photo { .start-section-right-column-subject-1-photo {
width: clamp(220px, 21vw, 280px); width: clamp(250px, 27vw, 290px);
} }
.start-section-right-column-subject-2-photo { .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 { .start-section-right-column-subject-2-title {
font-size: clamp(12px, 1.4vw, 21px); 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) {
} }

View File

@ -6,7 +6,11 @@
<link data-trunk type="text/css" href="css/body.css" rel="css" /> <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/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/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"> <link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
<script src="https://kit.fontawesome.com/fcdfdfe1ad.js" crossorigin="anonymous"></script> <script src="https://kit.fontawesome.com/fcdfdfe1ad.js" crossorigin="anonymous"></script>

View File

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

View File

@ -12,8 +12,8 @@
"es": "con nosotros" "es": "con nosotros"
}, },
"start.left-column-description": { "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": { "start.left-column-button-text": {
"en": "Get Started >", "en": "Get Started >",

View File

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

View File

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

View File

@ -1,16 +1,9 @@
use yew::prelude::*; use yew::prelude::*;
use crate::components::nav_bar::NavigationBar;
#[function_component(AboutPage)] #[function_component(AboutPage)]
pub fn about_page() -> Html { pub fn about_page() -> Html {
html! { html! {
<>
<NavigationBar/>
<div class={"page-container"}>
</div>
</>
} }
} }

View File

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

View File

@ -1,10 +1,12 @@
use yew::prelude::*; 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)] #[derive(Debug, Clone, Copy, PartialEq, Eq, PartialOrd, Ord)]
pub enum Section { pub enum Section {
Services,
AboutUs,
CallToAction,
} }
#[derive(Properties, PartialEq)] #[derive(Properties, PartialEq)]
pub struct MainPageProps { pub struct MainPageProps {
@ -20,6 +22,9 @@ pub fn main_page() -> Html {
<NavigationBar/> <NavigationBar/>
<div class={"page-container"}> <div class={"page-container"}>
<StartPage/> <StartPage/>
<ServicesPage/>
<AboutPage/>
<CallToActionPage/>
</div> </div>
</> </>
} }

View File

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

View File

@ -1,8 +1,18 @@
use locales::t;
use yew::prelude::*; use yew::prelude::*;
use crate::{language::current_lang, components::service_card::ServiceCard};
#[function_component(ServicesPage)] #[function_component(ServicesPage)]
pub fn services_page() -> Html { 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>
} }
} }