ajustes pagina principal

astroregulus · Jul 9, 2024 · 31975a2 · 31975a2
1 parent 6f16d29
commit 31975a2
Show file tree

Hide file tree

Showing 9 changed files with 594 additions and 1,295 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,9 +10,9 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/check": "^0.6.0",
+    "@astrojs/check": "^0.8.0",
     "@astrojs/tailwind": "^5.1.0",
-    "astro": "^4.8.2",
+    "astro": "^4.11.5",
     "astro-navbar": "^2.3.0",
     "tailwindcss": "^3.4.1",
     "typescript": "^5.3.3"

diff --git a/public/logo_junta_branca.png b/public/logo_junta_branca.png
diff --git a/src/components/Card.astro b/src/components/Card.astro
@@ -1,5 +1,7 @@
 ---
 import Link from "./Link.astro";
+import logo from "../../public/logo_junta_branca.png";
+import Image from "astro/components/Image.astro";
 
 interface Props {
   title: string;
@@ -12,10 +14,13 @@ const { href, title, body } = Astro.props;
 
 <li class="link-card">
   <Link href={href}>
-    <h2>
-      {title}
-      <span>&rarr;</span>
-    </h2>
+    <div class="flex space-x-2 justify-between">
+      <h2>
+        {title}
+        <span>&rarr;</span>
+      </h2>
+      <Image src={logo} alt="logo" class="h-6 w-6" />
+    </div>
     <p>
       {body}
     </p>
@@ -49,6 +54,7 @@ const { href, title, body } = Astro.props;
     margin: 0;
     font-size: 1.25rem;
     transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
+    font-weight: bold;
   }
   p {
     margin-top: 0.5rem;

diff --git a/src/components/Divisor.astro b/src/components/Divisor.astro
@@ -1,8 +1,8 @@
-<div class="divisor"></div>
+<div class="divisor max-w-3xl"></div>
 
 <style>
   .divisor {
-    max-width: 300px;
+    /* max-width: 300px; */
     height: 2px;
     background-color: rgb(var(--accent));
     margin: auto;

diff --git a/src/components/Navbar.astro b/src/components/Navbar.astro
@@ -1,20 +1,29 @@
 ---
 import { Astronav, MenuItems, MenuIcon } from "astro-navbar";
 import Link from "./Link.astro";
+import logo_regulus from "../../public/logo_regulus_branca_completa.png";
+import Image from "astro/components/Image.astro";
 ---
 
-<header class="lg:flex p-5 gap-5 text-white">
+<header class="lg:flex p-5 gap-5 text-white max-w-screen-xl mx-auto px-5">
   <Astronav>
     <div class="flex w-full justify-between">
       <Link class="text-3xl uppercase cursor-pointer hover:text-white" href="/">
         Regulus
+        <!-- <Image
+          src={logo_regulus}
+          height={80}
+          width={(80 * logo_regulus.width) / logo_regulus.height}
+          alt="Regulus"
+        /> -->
       </Link>
       <div class="block lg:hidden">
         <MenuIcon class="w-4 h-4 text-white" />
       </div>
     </div>
     <MenuItems class="hidden w-full lg:w-auto mt-2 lg:flex lg:mt-0">
       <ul class="flex flex-col lg:flex-row lg:gap-5">
+        <li><Link href="/formacao">Formação</Link></li>
         <li><Link href="/turmas">Cursos</Link></li>
         <li>
           <Link
@@ -25,7 +34,6 @@ import Link from "./Link.astro";
             Livraria
           </Link>
         </li>
-        <li><Link href="/formacao">Formação</Link></li>
         <!-- <li>Sobre</li> -->
         <li>Contato</li>
         <p

diff --git a/src/components/Rodape.astro b/src/components/Rodape.astro
@@ -2,7 +2,9 @@
 import Link from "./Link.astro";
 ---
 
-<footer class="bg-blue-regulus text-blue-100 max-w-full px-4 py-10">
+<footer
+  class="bg-blue-regulus text-blue-100 max-w-full px-4 py-10 max-w-screen-xl mx-auto px-5"
+>
   <div class="s:mx-36">
     <div
       class="grid grid-rows-3 sm:grid-rows-1 sm:grid-cols-3 justify-items-center"
@@ -52,17 +54,17 @@ import Link from "./Link.astro";
       <div class="grid grid-cols-2">
         <div>
           <ul>
-            <li><Link href="/turmas">Cursos</Link></li>
             <li><Link href="/formacao">Formação</Link></li>
+            <li><Link href="/turmas">Cursos</Link></li>
+            <li>Professores</li>
             <li><Link href="/sobre">Sobre</Link></li>
-            <li>Contato</li>
           </ul>
         </div>
         <div>
           <ul>
+            <li>Contato</li>
+            <li>Livraria</li>
             <li>Software</li>
-            <li>Professores</li>
-            <li>Serviços</li>
             <li>
               <Link
                 href="https://www.regulus.com.br/moodle"

diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -24,9 +24,9 @@ const { title } = Astro.props;
   <body>
     <Navbar />
     <Divisor />
-    <main class="max-w-screen-md mx-auto my-4">
+    <div class="max-w-screen-xl mx-auto my-4">
       <slot />
-    </main>
+    </div>
     <Divisor />
     <Rodape />
   </body>

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -12,51 +12,54 @@ import Parceiro from "../components/Parceiro.astro";
 <Layout title="Regulus | Escola de Astrologia">
   <main>
     <!-- <h1>Estude Astrologia <span class="text-gradient">de verdade</span></h1> -->
-    <h1>
-      Formando astrólogos <span class="text-gradient"> desde 1975</span>
-    </h1>
-    <p class="instructions">
-      <!-- Ensinando e formando astrólogos desde 1975.<br /> -->
-      <strong>Formação completa em Astrologia:</strong> cursos básicos, intermediários
-      e avançados.
-    </p>
+    <div class="max-w-screen-md mx-auto">
+      <h1>
+        Formando Astrólogos <span class="text-gradient"> desde 1975</span>
+      </h1>
+      <p class="instructions">
+        <!-- Ensinando e formando astrólogos desde 1975.<br /> -->
+        <strong>Formação completa em Astrologia:</strong> cursos básicos, intermediários
+        e avançados.
+      </p>
+      <div
+        class="mt-5 max-w-md mx-auto sm:flex sm:justify-center md:mt-8 mb-16 sm:space-x-3"
+      >
+        <button class="w-full md:w-max primary">
+          <Link href="/turmas">Veja as turmas</Link></button
+        >
+        <button class="w-full md:w-max primary"
+          ><Link href="/formacao">Grade curricular</Link></button
+        >
+      </div>
+    </div>
     <!-- <div
       style="display:flex;justify-content:center;margin-left:auto;margin-right:auto;margin-bottom:4rem;"
     > -->
-    <div
-      class="mt-5 max-w-md mx-auto sm:flex sm:justify-center md:mt-8 mb-16 sm:space-x-3"
-    >
-      <button class="w-full md:w-max primary">
-        <Link href="/turmas">Veja as turmas</Link></button
-      >
-      <button class="w-full md:w-max primary"
-        ><Link href="/formacao">Grade curricular</Link></button
-      >
-    </div>
-    <ul role="list" class="link-card-grid">
-      <Card
-        href="https://www.livrariadaregulus.com.br/"
-        title="Livraria"
-        body="Um dos maiores acervos de títulos sobre Astrologia, incluído muitos títulos esgotados e raros."
-      />
+
+    <ul role="list" class="link-card-grid grid-cols-1 sm:grid-cols-2">
       <Card
         href="/formacao"
         title="Formação"
         body="Nossa grade curricular atende a CBO (Classificação Brasileira de Ocupações) e os currículos de referência de entidades nacionais e internacionais."
       />
+      <Card
+        href="https://www.youtube.com/user/astrologiaregulus"
+        title="Encontro Regulus de Astrologia"
+        body="Acesse nosso canal no YouTube e tenha acesso a vários conteúdos gratuitos"
+      />
       <Card
         href="/turmas"
         title="Se inscreva"
         body="Veja nossas turmas abertas"
       />
       <Card
-        href="https://www.youtube.com/user/astrologiaregulus"
-        title="Encontro Regulus de Astrologia"
-        body="Acesse nosso canal no YouTube e tenha acesso a vários conteúdos gratuitos"
+        href="https://www.livrariadaregulus.com.br/"
+        title="Livraria"
+        body="Um dos maiores acervos de títulos sobre Astrologia, incluído muitos títulos esgotados e raros."
       />
     </ul>
     <div>
-      <p class="my-8">A escola Regulus é parceira e apoia:</p>
+      <p class="my-8 text-center">A escola Regulus é parceira e apoia:</p>
       <div
         class="flex flex-wrap items-center justify-center gap-12 px-8 sm:gap-16"
       >
@@ -90,7 +93,7 @@ import Parceiro from "../components/Parceiro.astro";
   main {
     margin: auto;
     padding: 2rem;
-    width: 800px;
+    width: 1024px;
     max-width: calc(100% - 2rem);
     color: white;
     font-size: 20px;
@@ -113,6 +116,9 @@ import Parceiro from "../components/Parceiro.astro";
     margin: 0;
     /* margin-bottom: 1em; */
   }
+  h1 > span {
+    font-size: 3.5rem;
+  }
   .text-gradient {
     background-image: var(--accent-gradient);
     -webkit-background-clip: text;
@@ -145,7 +151,7 @@ import Parceiro from "../components/Parceiro.astro";
   }
   .link-card-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr));
+    /* grid-template-columns: minmax(24ch, 1fr) minmax(24ch, 1fr); */
     gap: 2rem;
     padding: 0;
   }