added logos in main page

carvalholuigi25 · Nov 3, 2023 · 4c45ecf · 4c45ecf
1 parent 549358b
commit 4c45ecf
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 11 deletions.
diff --git a/public/images/logos/logo.svg b/public/images/logos/logo.svg
diff --git a/public/images/logos/logo_compact.svg b/public/images/logos/logo_compact.svg
diff --git a/src/app/[locale]/components/header.js b/src/app/[locale]/components/header.js
@@ -10,22 +10,21 @@ export default function Header() {
             <div className={styles.header + " " + styles.wave1 + " p-5"}>
                 <div className="container">
                     <div className="row">
-                        <div className="col-12 col-md-6 headersideleft mt-3 animate__animated animate__fadeInUp">
-                            <h1 className={styles.mtitle} id="mtitle" dir="auto">LCP</h1>
-                            <p className={styles.desc} id="mdesc" dir="auto">
+                        <div className="col-12 col-md-6 order-1 order-md-0 headersideleft mt-3 animate__animated animate__fadeInUp">
+                            <p className={styles.desc + " mt-3"} id="mdesc" dir="auto">
                                 {t('desc')}
                             </p>
                             <a href="#features" className="btn btn-primary btnSeeMore" id="btnSeeMore" dir="auto">
                                 {t('btnSeeMore')}
                             </a>
                         </div>
-                        <div className="col-12 col-md-6 headersideright animate__animated animate__fadeInUp">
+                        <div className="col-12 col-md-6 order-0 order-md-1 headersideright animate__animated animate__fadeInUp">
                             <Image
-                                className="image mx-auto"
-                                src="/images/setup.svg"
+                                className="image mx-auto logofull"
+                                src="/images/logos/logo.svg"
                                 alt="LCP"
-                                width={530}
-                                height={530}
+                                width={200}
+                                height={200}
                                 priority
                             />
                         </div>

diff --git a/src/app/[locale]/components/navbar.js b/src/app/[locale]/components/navbar.js
@@ -1,5 +1,6 @@
 "use client";
 import React, { useState } from 'react';
+import Image from 'next/image';
 import { useLocale, useTranslations } from 'next-intl';
 
 export default function Navbar() {
@@ -15,7 +16,16 @@ export default function Navbar() {
         <>
             <nav className="navbar fixed-top navbar-expand-lg bg-body-tertiary mnavbar" id="mnavbar">
                 <div className="container-fluid">
-                    <a className="navbar-brand" href={`/${useLocale()}`}>LCP</a>
+                    <a className="navbar-brand" href={`/${useLocale()}`}>
+                        <Image
+                            className="image mx-auto logosmall"
+                            src="/images/logos/logo_compact.svg"
+                            alt="LCP"
+                            width={100}
+                            height={30}
+                            priority
+                        />
+                    </a>
                     <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarLinks" aria-controls="navbarLinks" aria-expanded="false" aria-label="Toggle navigation" onClick={clickNav}>
                         <i className={`bi bi-${isCollapsed ? "x" : "three-dots"}`}></i>
                     </button>

diff --git a/src/app/[locale]/styles/globals.scss b/src/app/[locale]/styles/globals.scss
@@ -194,6 +194,23 @@ ul, ol, dl {
   margin-top: 0;
 }
 
+.logosmall {
+  width: 100px;
+  height: 30px;
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: cover;
+}
+
+.logofull {
+  display: block;
+  width: auto;
+  height: auto;
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: cover;
+}
+
 .cwhite { color: white !important; }
 .cblack { color: black !important; }