diff --git a/assets/images/subject-1-picture.png b/assets/images/subject-1-picture.png new file mode 100644 index 0000000..34626ea Binary files /dev/null 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 new file mode 100644 index 0000000..6260ee8 Binary files /dev/null and b/assets/images/subject-2-picture.png differ diff --git a/css/navbar.css b/css/navbar.css index 9612f1d..5757412 100644 --- a/css/navbar.css +++ b/css/navbar.css @@ -75,7 +75,7 @@ .navbar-hamburger:hover { background-color: #ffffff14; - font-size: 22pt; + scale: 1.1; font-weight: bold; border-radius: 3px; transition-duration: 0.3s; @@ -119,8 +119,7 @@ } .navbar-item:hover { background-color: #ffffff14; - font-size: 13pt; - font-weight: bold; + scale: 1.15; border-radius: 3px; transition-duration: 0.3s; cursor: pointer; @@ -161,7 +160,7 @@ flex-direction: row; justify-content: space-between; align-items: center; - padding: 0px; + padding-left: 7vw; } .navbar { @@ -208,13 +207,14 @@ padding-bottom: 10px; font-family: Poppins; font-weight: bold; + cursor: default; } .navbar-item:hover { background-color: rgb(0, 0, 0, 0); font-size: 12pt; border-radius: 0px; - transition-duration: 0.0s; + transition-duration: 0.3s; cursor: pointer; } .navbar-item-contact-us { @@ -228,12 +228,12 @@ flex-direction: column; justify-content: center; - height: 45px; + height: 64px; width: 155px; padding: 25px 10px; margin-top: 10px; - margin-right: 30px; + margin-right: 7vw; margin-bottom: 10px; padding: 2px 10px; @@ -242,4 +242,9 @@ filter: drop-shadow(-15px 10px 50px rgba(76, 64, 247, 0.409)); } + .navbar-item-contact-us:hover { + scale: 1.1; + transition-duration: 0.4s; + background-color: #8982f0; + } } diff --git a/css/start.css b/css/start.css new file mode 100644 index 0000000..18cce9d --- /dev/null +++ b/css/start.css @@ -0,0 +1,178 @@ +.start-section-container { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + + height: 600px; + padding: 0px 10vw; +} +.start-section-left-column { + display: flex; + flex-direction: column; + justify-content: center; + align-items: start; + min-width: 571px; +} +.start-section-left-column-title-nocolor { + font-family: Poppins; + font-size: 56px; + font-weight: 600; + cursor: default; +} +.start-section-left-column-title-colored { + font-family: Poppins; + font-size: 56px; + color: #FF6800; + font-weight: 600; + cursor: default; +} +.start-section-left-column-description { + font-family: Poppins; + font-size: 18px; + line-height: 32px; + color: #6B6B6B; + + width: 365px; + margin: 24px 0px 30px 0px; + cursor: default; +} +.start-section-left-column-button { + background: #4C40F7; + border-radius: 12px; + font-family: Poppins; + font-size: 18px; + font-weight: 600px; + color: white; + padding: 20px; + width: 200px; + + display: flex; + justify-content: center; + align-items: center; +} +.start-section-left-column-button:hover { + cursor: pointer; + background: #8982f0; + + scale: 1.1; + transition-duration: 0.4s; +} + + +.start-section-right-column { + display: flex; + flex-direction: row; + justify-content: start; + width: 100%; + height: 550px; +} +.start-section-right-column-canvas { + position: relative; + width: 100%; + height: 100%; +} +.start-section-right-column-art-top-left-pill { + position: absolute; + width: 250px; + height: 88px; + right: 200px; + top: 26px; + + background: #4C40F7; + box-shadow: 0px 4px 21px rgba(15, 11, 83, 0.15); + border-radius: 80px; + + animation-name: twitch; + animation-duration: 8s; + animation-iteration-count: infinite; + + display: flex; + justify-content: center; + align-items: center; +} + +.start-section-right-column-art-top-right-pill { + position: absolute; + width: 177px; + height: 400px; + right: 15px; + top: 0px; + + background: #4C40F7; + border-radius: 80px; + + animation-name: twitch; + animation-duration: 11s; + animation-iteration-count: infinite; + + display: flex; + justify-content: center; + align-items: end; +} + +.start-section-right-column-art-bottom-left-pill { + position: absolute; + width: 177px; + height: 400px; + right: 220px; + top: 150px; + + background: #FFCC00; + border-radius: 80px; + + animation-name: twitch; + animation-duration: 10s; + animation-iteration-count: infinite; + + display: flex; + justify-content: center; + align-items: center; +} + +.start-section-right-column-art-bottom-right-pill { + position: absolute; + width: 289px; + height: 88px; + right: -100px; + top: 440px; + + background: #FFCC00; + box-shadow: 0px 4px 21px rgba(186, 149, 0, 0.15); + border-radius: 80px; + + display: flex; + justify-content: center; + align-items: center; +} + +.start-section-right-column-subject-1-title { + font-family: Poppins; + color: white; + font-size: 18px; + font-weight: 600; + white-space: pre-line; + text-align: center; +} +.start-section-right-column-subject-1-photo { + object-fit: contain; + width: 271px; +} +.start-section-right-column-subject-2-photo { + object-fit: cover; + width: 592px; +} +.start-section-right-column-subject-2-title { + font-family: Poppins; + color: #2D2D2D; + font-size: 18px; + font-weight: 600; + white-space: pre-line; + text-align: center; +} + +@keyframes twitch { + 0% {scale: 1;} + 5% {scale: 1.1;} + 10% {scale: 1;} +} diff --git a/dist/bl-frontend-90caa3eb84cccf93.js b/dist/bl-frontend-8e3c467f4ff3a36a.js similarity index 99% rename from dist/bl-frontend-90caa3eb84cccf93.js rename to dist/bl-frontend-8e3c467f4ff3a36a.js index af5d0ed..408d829 100644 --- a/dist/bl-frontend-90caa3eb84cccf93.js +++ b/dist/bl-frontend-8e3c467f4ff3a36a.js @@ -951,7 +951,7 @@ function initSync(module) { async function init(input) { if (typeof input === 'undefined') { - input = new URL('bl-frontend-90caa3eb84cccf93_bg.wasm', import.meta.url); + input = new URL('bl-frontend-8e3c467f4ff3a36a_bg.wasm', import.meta.url); } const imports = getImports(); diff --git a/dist/bl-frontend-90caa3eb84cccf93_bg.wasm b/dist/bl-frontend-8e3c467f4ff3a36a_bg.wasm similarity index 88% rename from dist/bl-frontend-90caa3eb84cccf93_bg.wasm rename to dist/bl-frontend-8e3c467f4ff3a36a_bg.wasm index 6990aba..33fde41 100644 Binary files a/dist/bl-frontend-90caa3eb84cccf93_bg.wasm and b/dist/bl-frontend-8e3c467f4ff3a36a_bg.wasm differ diff --git a/dist/images/subject-1-picture.png b/dist/images/subject-1-picture.png new file mode 100644 index 0000000..34626ea Binary files /dev/null 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 new file mode 100644 index 0000000..6260ee8 Binary files /dev/null and b/dist/images/subject-2-picture.png differ diff --git a/dist/index.html b/dist/index.html index 76a63a5..efefba2 100644 --- a/dist/index.html +++ b/dist/index.html @@ -3,7 +3,8 @@ Blanco Lorenzo - + + @@ -11,9 +12,9 @@ - - - diff --git a/locales/navbar.json b/locales/navbar/navbar.json similarity index 100% rename from locales/navbar.json rename to locales/navbar/navbar.json diff --git a/locales/start/start.json b/locales/start/start.json new file mode 100644 index 0000000..ddcc62d --- /dev/null +++ b/locales/start/start.json @@ -0,0 +1,30 @@ +{ + "start.left-column.title-first-line": { + "en": "Make your business", + "es": "Haz tu negocio" + }, + "start.left-column.title-second-line": { + "en": "more powerful", + "es": "mas fuerte" + }, + "start.left-column.title-third-line": { + "en": "with us", + "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." + }, + "start.left-column-button-text": { + "en": "Get Started >", + "es": "Comencemos >" + }, + "start.right-column-subject-1-title": { + "en": "Web Development &\nSystems", + "es": "Desarrollo Web & Sistemas" + }, + "start.right-column-subject-2-title": { + "en": "Marketing & Ads", + "es": "Mercadeo & Publicidad" + } +} \ No newline at end of file diff --git a/src/pages/start.rs b/src/pages/start.rs index 0b81d6f..ed249db 100644 --- a/src/pages/start.rs +++ b/src/pages/start.rs @@ -1,8 +1,47 @@ +use locales::t; use yew::prelude::*; +use crate::language::current_lang; #[function_component(StartPage)] pub fn start_page() -> Html { - html! {} + html! { +
+
+
+ {t!("start.left-column.title-first-line", current_lang())} +
+
+ {t!("start.left-column.title-second-line", current_lang())} +
+
+ {t!("start.left-column.title-third-line", current_lang())} +
+
+ {t!("start.left-column-description", current_lang())} +
+
+ {t!("start.left-column-button-text", current_lang())} +
+
+ +
+
+
+
{t!("start.right-column-subject-1-title", current_lang())}
+
+
+ +
+
+ +
+
+
{t!("start.right-column-subject-2-title", current_lang())}
+
+
+
+
+ } } \ No newline at end of file