add font

2025-04-17 16:30:36 -03:00
parent a7d87c3ef9
commit 1665a4e526
8 changed files with 251 additions and 219 deletions
--- a/superpage/package-lock.json
+++ b/superpage/package-lock.json
@@ -9,6 +9,8 @@
      "version": "0.0.1",
      "dependencies": {
        "@astrojs/react": "^4.2.1",
+        "@fontsource/roboto": "^5.2.5",
+        "@fontsource/twinkle-star": "^5.2.5",
        "@headlessui/react": "^2.2.1",
        "@heroicons/react": "^2.2.0",
        "@tailwindcss/vite": "^4.0.13",
@@ -883,6 +885,24 @@
      "integrity": "sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg==",
      "license": "MIT"
    },
+    "node_modules/@fontsource/roboto": {
+      "version": "5.2.5",
+      "resolved": "https://registry.npmjs.org/@fontsource/roboto/-/roboto-5.2.5.tgz",
+      "integrity": "sha512-70r2UZ0raqLn5W+sPeKhqlf8wGvUXFWlofaDlcbt/S3d06+17gXKr3VNqDODB0I1ASme3dGT5OJj9NABt7OTZQ==",
+      "license": "OFL-1.1",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
+    "node_modules/@fontsource/twinkle-star": {
+      "version": "5.2.5",
+      "resolved": "https://registry.npmjs.org/@fontsource/twinkle-star/-/twinkle-star-5.2.5.tgz",
+      "integrity": "sha512-vD8t14W/zjlg/DKYJGqBK47HE5NToPk8t3o2AiXe5B9Wzch3Kd0PO+d5D8JK7SrwLSPDf+E7jcDMym3XMkSimw==",
+      "license": "OFL-1.1",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
    "node_modules/@headlessui/react": {
      "version": "2.2.1",
      "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-2.2.1.tgz",
--- a/superpage/package.json
+++ b/superpage/package.json
@@ -10,6 +10,8 @@
  },
  "dependencies": {
    "@astrojs/react": "^4.2.1",
+    "@fontsource/roboto": "^5.2.5",
+    "@fontsource/twinkle-star": "^5.2.5",
    "@headlessui/react": "^2.2.1",
    "@heroicons/react": "^2.2.0",
    "@tailwindcss/vite": "^4.0.13",
--- a/superpage/src/components/ClientsLogo.astro
+++ b/superpage/src/components/ClientsLogo.astro
@@ -11,7 +11,7 @@ import Semeq from '~/assets/logos/semeq.svg'
 const SVGLogos = [Natura, Nissan, Kordsa, Manserv, Semeq]
 ---

-<Container className="py-6 xl:py-24 lg:text-center space-y-2.5 lg:space-y-6">
+<Container className="lg:text-center space-y-2.5 lg:space-y-6">
  <h2 class="text-pretty font-semibold text-4xl">
    Alguns clientes que acreditam em nós
  </h2>
--- a/superpage/src/layouts/Head.astro
+++ b/superpage/src/layouts/Head.astro
@@ -0,0 +1,8 @@
+---
+const { title = 'Educação que garante sua segurança', ...props } = Astro.props
+---
+
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+<meta name="generator" content={Astro.generator} />
+<title>{title} &mdash; EDUSEG&reg;</title>
--- a/superpage/src/layouts/Layout.astro
+++ b/superpage/src/layouts/Layout.astro
@@ -5,6 +5,7 @@ export interface Props {

 import '~/styles/app.css'
 import { Regular as Logo } from '~/components/Logo'
+import Head from './Head.astro'
 import { Container } from '~/components/Container'
 import { Menu } from '~/components/Menu'
 import { ArrowLeftStartOnRectangleIcon } from '@heroicons/react/24/solid'
@@ -12,20 +13,17 @@ import { ArrowLeftStartOnRectangleIcon } from '@heroicons/react/24/solid'
 import { getCollection } from 'astro:content'
 const courses = await getCollection('courses', ({ data }) => data.draft != true)

-const { title } = Astro.props
+const { ...props } = Astro.props
 const year = new Date().getFullYear()
+
+import '@fontsource/roboto'
 ---

 <!doctype html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-    <meta name="generator" content={Astro.generator} />
-    <title>
-      {title} &dash; EDUSEG&reg; &mdash; Educação que garante sua segurança
-    </title>
+    <Head {...props} />
  </head>

  <body>
--- a/superpage/src/pages/[slug].astro
+++ b/superpage/src/pages/[slug].astro
@@ -37,7 +37,8 @@ const trainer = data.course?.trainer
 ---

 <Layout title={data.title}>
-  <Container className="py-3 lg:py-12 lg:flex items-center justify-start gap-5">
+  <div class="space-y-3 lg:space-y-26">
+    <Container className="lg:flex items-center justify-start gap-5">
      <Picture
        src={data?.img ? data.img : placeholder}
        alt={data.title}
@@ -147,8 +148,8 @@ const trainer = data.course?.trainer
              Por que capacitar sua equipe com a EDUSEG&reg;
            </h3>
            <p>
-            Nós cuidamos da burocracia, oferecemos uma plataforma completa para
-            simplicar a gestão e capacitação em larga escala de seus
+              Nós cuidamos da burocracia, oferecemos uma plataforma completa
+              para simplicar a gestão e capacitação em larga escala de seus
              colaboradores. Com a EDUSEG&reg, sua empresa se beneficia de uma
              tecnologia eficiente e confiável.
            </p>
@@ -178,16 +179,14 @@ const trainer = data.course?.trainer
      </div>
    </Container>

-  <Container
-    className="py-3 lg:py-24 grid gap-2.5 lg:grid-cols-3 lg:gap-5 2xl:w-3/6 "
-  >
+    <Container className="grid gap-2.5 lg:grid-cols-3 lg:gap-5 2xl:w-3/6 ">
      <div class="space-y-2.5">
        <h4 class="text-4xl lg:text-5xl text-pretty" id="modulos">
          Módulos deste curso
        </h4>
        <p class="text-base/6">
-        O curso é dividido em módulos para facilitar seu aprendizado e garantir
-        que você domine todos os aspectos teóricos e práticos.
+          O curso é dividido em módulos para facilitar seu aprendizado e
+          garantir que você domine todos os aspectos teóricos e práticos.
        </p>
      </div>
      <div class="lg:col-span-2 flex flex-col gap-1.5">
@@ -195,6 +194,23 @@ const trainer = data.course?.trainer
      </div>
    </Container>

+    <Container>
+      <div class="border border-lime-500 p-12 rounded-2xl">
+        <div class="lg:w-8/12 mx-auto space-y-5">
+          <h6 class="text-6xl/12 font-medium">
+            Certificados digitais com respaldo legal e gestão completa
+          </h6>
+          <ul class="list-disc list-inside">
+            <li>
+              Certificado com assinatura digital conforme o padrão ICP-Brasil
+            </li>
+            <li>Tudo digital e salvo para sempre na núvem</li>
+            <li>Alertas automáticos do vencimento</li>
+          </ul>
+        </div>
+      </div>
+    </Container>
+
    {
      trainer && (
        <Container>
@@ -232,4 +248,5 @@ const trainer = data.course?.trainer
        </Container>
      )
    }
+  </div>
 </Layout>
--- a/superpage/src/pages/index.astro
+++ b/superpage/src/pages/index.astro
@@ -1,23 +1,9 @@
 ---
-import { Picture } from 'astro:assets'
 import Layout from '~/layouts/Layout.astro'
-import { Container } from '~/components/Container'
-import { Faq } from '~/components/Faq'
-import { StarIcon, ClockIcon } from '@heroicons/react/24/outline'
-import { CheckBadgeIcon } from '@heroicons/react/24/solid'
-import { LinkedInIcon } from '~/components/LinkedInIcon'
-import nr18plataforma from '~/assets/nr18-plataforma.png'
-import mulherdenegocios from '~/assets/mulher-de-negocios.png'
-import homemdenegocios from '~/assets/homem-de-negocios.png'
-import francis from '~/assets/francis.jpeg'
-import Natura from '~/assets/logos/natura.svg'
-import Nissan from '~/assets/logos/nissan.svg'
-import Kordsa from '~/assets/logos/kordsa.svg'
-import Manserv from '~/assets/logos/manserv.svg'
-import Semeq from '~/assets/logos/semeq.svg'
 ---

-<Layout title="">
+<Layout>
+  <!--
  <Container className="py-3 lg:py-12 lg:flex items-center gap-5">
    <Picture
      src={nr18plataforma}
@@ -247,4 +233,5 @@ import Semeq from '~/assets/logos/semeq.svg'
      </div>
    </div>
  </Container>
+  -->
 </Layout>
--- a/superpage/src/styles/app.css
+++ b/superpage/src/styles/app.css
@@ -1,9 +1,9 @@
-@import "tailwindcss";
+@import 'tailwindcss';

@theme {
  --font-sans:
-        "Roboto", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
-        "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    'Roboto', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
+    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';

  --color-yellow-primary: #ffcf82;
  --color-yellow-secondary: #f2ebe1;