merge from main into production branch (pt 4)

public/images/favicon/site.webmanifest

@@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}

src/app/[locale]/components/footer.js

@@ -42,7 +42,7 @@ export default function Footer() {
                             <a href="https://github.com/carvalholuigi25" className="ms-2" target='_blank'>
                                 <Image className="image" src="/icons/socialnetworks/github.svg" alt="LCP Github" width={40} height={40} />
                             </a>
-                            <a href="https://www.instagram.com/luiscardev27/" className="ms-2" target='_blank'>
+                            <a href="https://www.instagram.com/lcp2267/" className="ms-2" target='_blank'>
                                 <Image className="image" src="/icons/socialnetworks/instagram.svg" alt="LCP Instagram" width={40} height={40} />
                             </a>
                         </div>

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>

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>

src/app/[locale]/layout.tsx

@@ -36,6 +36,12 @@ export default function RootLayout({
 
   return (
     <html lang={locale}>
+      <head>
+        <link rel="apple-touch-icon" sizes="180x180" href="/images/favicon/apple-touch-icon.png" />
+        <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon/favicon-32x32.png" />
+        <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon/favicon-16x16.png" />
+        <link rel="manifest" href="/images/favicon/site.webmanifest" />
+      </head>
       <body className={inter.className + " " + `theme theme-${theme ?? 'default'}`} suppressHydrationWarning={true}>
         <NextIntlClientProvider locale={locale} messages={useMessages()} timeZone={timeZone} now={useNow()}>
           {children}

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

src/app/[locale]/templates/index.js

@@ -0,0 +1 @@
+export * from './email';

src/app/api/sendemail/route.ts

@@ -1,14 +1,15 @@
 import { NextResponse } from "next/server";
 import { sendMailUtil } from '../../[locale]/utils/sendmailUtils';
+import { EmailTemplate } from '../../[locale]/templates';
 
 export async function POST(req: any) {  
   const body = await req.json();
   const dataobj = {
     to: process.env.EMAIL_USER,
-    from: body.email,
+    from: `"${body.name}" <${body.email}>`,
     subject: body.subject,
     text: `${body.message}\r\n Sent by ${body.email} (${body.name})`,
-    html: `<!doctype html><html><head><title>Hello</title></head><body><b>${body.message}</b><p>Sent by: ${body.email} (${body.name})</p></body></html>`
+    html: EmailTemplate(body)
   };
 
   console.log(dataobj);