Merge pull request #4 from parceiroti/devel

✨ full website

package.json

@@ -1,7 +1,7 @@
 {
-  "name": "pti-astro",
+  "name": "pti-website",
   "type": "module",
-  "version": "0.0.1",
+  "version": "1.0.0-devel",
   "scripts": {
     "dev": "astro dev",
     "start": "astro dev",

src/components/Footer.astro

@@ -0,0 +1,62 @@
+---
+import "../styles/styles.css";
+---
+
+<footer class="footer">
+    <div class="container">
+        <div class="left">
+            <ul class="no-list-style">
+                <li>
+                    <a href="/#top" target="_self">Início</a>
+                </li>
+                <li>
+                    <a href="/#sobre" target="_self">Sobre nós</a>
+                </li>
+                <li>
+                    <a href="/#serviços" target="_self">Serviços</a>
+                </li>
+                <li>
+                    <a href="/#clientes" target="_self">Clientes</a>
+                </li>
+            </ul>
+        </div>
+        <div class="right">
+            <ul class="no-list-style">
+                <li>
+                    <b>CNPJ: xxxx-xxxx</b>
+                </li>
+                <li>
+                    <b>Telefone: (21) 9 8878-6341</b>
+                </li>
+                <li>
+                    <a href="https://wa.me/+5521988786341">Whatsapp</a>
+                </li>
+                <li>
+                    <b>E-mail: <a href="mailto:contato@parceiroti.com.br">contato@parceiroti.com.br</a></b>
+                </li>
+            </ul>
+        </div>
+    </div>
+</footer>
+
+<style>
+    .container {
+        display: flex;
+        flex-direction: column;
+        margin: auto;
+        margin-left: 16px;
+        margin-right: 16px;
+        color: white;
+        box-sizing: border-box;
+        border-radius: 16px;
+        background-color: var(--pti-dark);
+    }
+
+    .container a {
+        color: white;
+    }
+
+    .container a:hover {
+        color: var(--text-highlight-color);
+    }
+</style>

src/components/Navigation.astro

@@ -0,0 +1,75 @@
+---
+import '../styles/styles.css'
+---
+
+
+<header>
+    <nav class="navbar">
+        <a href="/">
+            <img class="logo" src="/logo_default.png" alt="PTI">
+        </a>
+        <ul class="links">
+            <li>
+                <a href="/#top" target="_self">Início</a>
+            </li>
+            <li>
+                <a href="/#sobre" target="_self">Sobre nós</a>
+            </li>
+            <li>
+                <a href="/#serviços" target="_self">Serviços</a>
+            </li>
+            <li>
+                <a href="/#clientes" target="_self">Clientes</a>
+            </li>
+        </ul>
+    </nav>
+</header>
+
+<style>
+    .navbar {
+        --logo-width: 64px;
+        --logo-height: 48px;
+        --logo-margin-left: 16px;
+        font-size: large;
+        position: top;
+        position: flex;
+        display: flex;
+        height: 70px;
+    }
+
+    .navbar .logo {
+        display: block;
+        justify-content: left;
+        align-items: right;
+        margin-left: var(--logo-margin-left);
+        margin-top: 8px;
+        width: var(--logo-width);
+        height: var(--logo-height);
+    }
+
+    .navbar .links {
+        position: top;
+        display: flex;
+        width: 100%;
+        height: auto;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        text-align: center;
+        list-style-type: none;
+        overflow: hidden;
+        padding: 0;
+        margin-right: calc( ( var(--logo-width) + var(--logo-margin-left) ) );
+    }
+
+    .navbar .links > li {
+        float: left;
+        display: list-item;
+        margin-left: 16px;
+        margin-top: 0;
+    }
+
+    .navbar .links li > a {
+        text-decoration: none;
+    }
+</style>

src/layouts/MainLayout.astro

@@ -0,0 +1,42 @@
+---
+import '../styles/styles.css';
+import Navigation from '../components/Navigation.astro';
+import { string } from 'astro/zod';
+import type { loadApp } from 'astro/app/node';
+
+interface MainLayout {
+    page: string;
+    description: string;
+    banner: string;
+}
+
+const { page, description, banner }: any = Astro.props;
+
+let currentPage: string = "";
+
+if(page !== undefined && page !== "undefined" && page !== "") {
+    currentPage = " - " + page;
+}
+---
+
+<html lang="pt-BR">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="icon" href="/icon_default.png">
+    <!-- Add OG link preview -->
+    <meta property="og:title" content={ "Parceiro TI" + currentPage }>
+    <meta property="og:description" content={ description }>
+    <meta property="og:image" content={ banner }>
+    <title>{ "Parceiro TI" + currentPage }</title>
+</head>
+<Navigation client:load />
+
+<slot />
+
+<style>
+    html {
+        background-color: var(--background-color);
+    }
+</style>
+</html>