.eslintrc.json

+{
+  "extends": "next/core-web-vitals"
+}

.gitignore

+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel

README.md

+<<<<<<< HEAD
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
+
+[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
+
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+=======
 # PaginaHalley
 
 
@@ -90,3 +130,4 @@ For open source projects, say how it is licensed.
 
 ## Project status
 If you have run out of energy or time for your project, put a note at the top of the README saying that development has slowed down or stopped completely. Someone may choose to fork your project or volunteer to step in as a maintainer or owner, allowing your project to keep going. You can also make an explicit request for maintainers.
+>>>>>>> 0f3c2c493b8d47649c58f16cce59e672ec37a6a9

components/footer.js

+import Link from "next/link";
+import React from "react";
+
+const Footer = () => {
+  return (
+    <footer class="flex bg-[#3E5E75] text-[#F0F0F0]">
+      <div class="container mx-auto">
+        <div class="lg:flex justify-center center items-center lg:w-4/5 mx-auto">
+          <div class="lg:bg-[#69CEDF] px-4 lg:px-20 py-16 rounded-lg font-semibold lg:mt-28 lg:flex">
+            <h3 class="text-2xl lg:text-4xl font-bold lg:w-2/5">
+              Suscríbete para recibir noticias y artículos
+            </h3>
+            <form class="lg:w-3/5 mt-6">
+              <div class="relative lg:ml-2">
+                <input
+                  type="email"
+                  class="block placeholder-gray-500 text-black border w-full rounded-lg p-4 lg:p-6 lg:ml-4 text-sm lg:text-base"
+                  placeholder="Escribe tu email aquí"
+                />
+                <button class="lg:bg-[#3E5E75] bg-[#69CEDF] text-[#F0F0F0] mr-1 py-2 lg:py-4 px-2 lg:px-6 rounded-lg absolute right-0 bottom-2.5 lg:bottom-2.5 font-semibold text-sm lg:text-base hover:opacity-90 ">
+                  Suscríbete
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-16 mx-auto justify-center items-center w-4/5 lg:py-8 text-sm lg:text-base">
+          <div>
+            <p class="font-bold">Correo</p>
+            <p>halley@uis.edu.co</p>
+            <p class="font-bold mt-2">Teléfono</p>
+            <p> (+57)(7)6344000 Ext. 2741</p>
+          </div>
+          <div class="grid grid-cols-2 gap-16">
+            <div>
+              <Link
+                href="https://www.facebook.com/HalleyUIS"
+                target="_blank"
+                class="flex items-center"
+              >
+                <svg class="w-8 h-8 fill-[#F0F0F0] mr-2" viewBox="0 0 512 512">
+                  <path d="M211.9 197.4h-36.7v59.9h36.7V433.1h70.5V256.5h49.2l5.2-59.1h-54.4c0 0 0-22.1 0-33.7 0-13.9 2.8-19.5 16.3-19.5 10.9 0 38.2 0 38.2 0V82.9c0 0-40.2 0-48.8 0 -52.5 0-76.1 23.1-76.1 67.3C211.9 188.8 211.9 197.4 211.9 197.4z" />
+                </svg>
+
+                <p>Facebook</p>
+              </Link>
+              <Link
+                href="https://twitter.com/halleyUIS"
+                target="_blank"
+                class="flex mt-2 items-center"
+              >
+                <svg class="w-8 h-8 fill-[#F0F0F0] mr-2" viewBox="0 0 512 512">
+                  <path d="M419.6 168.6c-11.7 5.2-24.2 8.7-37.4 10.2 13.4-8.1 23.8-20.8 28.6-36 -12.6 7.5-26.5 12.9-41.3 15.8 -11.9-12.6-28.8-20.6-47.5-20.6 -42 0-72.9 39.2-63.4 79.9 -54.1-2.7-102.1-28.6-134.2-68 -17 29.2-8.8 67.5 20.1 86.9 -10.7-0.3-20.7-3.3-29.5-8.1 -0.7 30.2 20.9 58.4 52.2 64.6 -9.2 2.5-19.2 3.1-29.4 1.1 8.3 25.9 32.3 44.7 60.8 45.2 -27.4 21.4-61.8 31-96.4 27 28.8 18.5 63 29.2 99.8 29.2 120.8 0 189.1-102.1 185-193.6C399.9 193.1 410.9 181.7 419.6 168.6z" />
+                </svg>
+                <p>Twitter</p>
+              </Link>
+            </div>
+            <div>
+              <Link
+                href="https://www.instagram.com/halleyuis/"
+                target="_blank"
+                class="flex items-center"
+              >
+                <svg class="w-8 h-8 fill-[#F0F0F0] mr-2" viewBox="0 0 512 512">
+                  <g>
+                    <path d="M256 109.3c47.8 0 53.4 0.2 72.3 1 17.4 0.8 26.9 3.7 33.2 6.2 8.4 3.2 14.3 7.1 20.6 13.4 6.3 6.3 10.1 12.2 13.4 20.6 2.5 6.3 5.4 15.8 6.2 33.2 0.9 18.9 1 24.5 1 72.3s-0.2 53.4-1 72.3c-0.8 17.4-3.7 26.9-6.2 33.2 -3.2 8.4-7.1 14.3-13.4 20.6 -6.3 6.3-12.2 10.1-20.6 13.4 -6.3 2.5-15.8 5.4-33.2 6.2 -18.9 0.9-24.5 1-72.3 1s-53.4-0.2-72.3-1c-17.4-0.8-26.9-3.7-33.2-6.2 -8.4-3.2-14.3-7.1-20.6-13.4 -6.3-6.3-10.1-12.2-13.4-20.6 -2.5-6.3-5.4-15.8-6.2-33.2 -0.9-18.9-1-24.5-1-72.3s0.2-53.4 1-72.3c0.8-17.4 3.7-26.9 6.2-33.2 3.2-8.4 7.1-14.3 13.4-20.6 6.3-6.3 12.2-10.1 20.6-13.4 6.3-2.5 15.8-5.4 33.2-6.2C202.6 109.5 208.2 109.3 256 109.3M256 77.1c-48.6 0-54.7 0.2-73.8 1.1 -19 0.9-32.1 3.9-43.4 8.3 -11.8 4.6-21.7 10.7-31.7 20.6 -9.9 9.9-16.1 19.9-20.6 31.7 -4.4 11.4-7.4 24.4-8.3 43.4 -0.9 19.1-1.1 25.2-1.1 73.8 0 48.6 0.2 54.7 1.1 73.8 0.9 19 3.9 32.1 8.3 43.4 4.6 11.8 10.7 21.7 20.6 31.7 9.9 9.9 19.9 16.1 31.7 20.6 11.4 4.4 24.4 7.4 43.4 8.3 19.1 0.9 25.2 1.1 73.8 1.1s54.7-0.2 73.8-1.1c19-0.9 32.1-3.9 43.4-8.3 11.8-4.6 21.7-10.7 31.7-20.6 9.9-9.9 16.1-19.9 20.6-31.7 4.4-11.4 7.4-24.4 8.3-43.4 0.9-19.1 1.1-25.2 1.1-73.8s-0.2-54.7-1.1-73.8c-0.9-19-3.9-32.1-8.3-43.4 -4.6-11.8-10.7-21.7-20.6-31.7 -9.9-9.9-19.9-16.1-31.7-20.6 -11.4-4.4-24.4-7.4-43.4-8.3C310.7 77.3 304.6 77.1 256 77.1L256 77.1z" />
+                    <path d="M256 164.1c-50.7 0-91.9 41.1-91.9 91.9s41.1 91.9 91.9 91.9 91.9-41.1 91.9-91.9S306.7 164.1 256 164.1zM256 315.6c-32.9 0-59.6-26.7-59.6-59.6s26.7-59.6 59.6-59.6 59.6 26.7 59.6 59.6S288.9 315.6 256 315.6z" />
+                    <circle cx="351.5" cy="160.5" r="21.5" />
+                  </g>
+                </svg>
+                <p>Instagram</p>
+              </Link>
+              <Link
+                href="https://www.youtube.com/c/HalleyUIS"
+                target="_blank"
+                class="flex mt-2 items-center"
+              >
+                <svg class="w-8 h-8 fill-[#F0F0F0] mr-2" viewBox="0 0 512 512">
+                  <path d="M422.6 193.6c-5.3-45.3-23.3-51.6-59-54 -50.8-3.5-164.3-3.5-215.1 0 -35.7 2.4-53.7 8.7-59 54 -4 33.6-4 91.1 0 124.8 5.3 45.3 23.3 51.6 59 54 50.9 3.5 164.3 3.5 215.1 0 35.7-2.4 53.7-8.7 59-54C426.6 284.8 426.6 227.3 422.6 193.6zM222.2 303.4v-94.6l90.7 47.3L222.2 303.4z" />
+                </svg>
+                <p>Youtube</p>
+              </Link>
+            </div>
+          </div>
+          <p class="mb-8">Política de privacidad y tratamiento de datos</p>
+        </div>
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;

components/header.js

+import Image from "next/image";
+import Link from "next/link";
+import React from "react";
+
+const Header = () => {
+  return (
+    <header className="bg-[#F0F0F0] bg-opacity-80 relative">
+      <nav className="container mx-auto px-6 py-2">
+        <div className="flex items-center justify-between">
+          {/* <!-- logo --> */}
+          <div>
+            <a href="#">
+              <Image
+                src="/images/halley_logo.png"
+                alt="logo"
+                height={200}
+                width={200}
+                className="h-24 object-contain"
+              />
+            </a>
+          </div>
+          {/* <!-- mobile menu --> */}
+          <div className="flex lg:hidden">
+            <svg
+              onclick="openMenu();"
+              className="w-6 h-6"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M4 6h16M4 12h16M4 18h16"
+              ></path>
+            </svg>
+          </div>
+          {/* <!-- menu items --> */}
+          <div
+            id="menu"
+            className="lg:flex hidden justify-between absolute lg:top-0 top-28 lg:relative bg-[#F0F0F0] lg:bg-none w-full lg:w-auto left-0 p-6 lg:p-0 z-50"
+          >
+            <div className="lg:space-x-6 lg:flex-row flex-col flex font-medium">
+              <Link
+                href="/divulgacion"
+                className="hover:text-zinc-600 lg:mb-0 mb-8"
+              >
+                Divulgación
+              </Link>
+              <Link
+                href="/investigacion"
+                className="hover:text-zinc-600 lg:mb-0 mb-8"
+              >
+                Investigación
+              </Link>
+              <Link href="/blog" className="hover:text-zinc-600 lg:mb-0 mb-8">
+                Blog
+              </Link>
+              <Link
+                href="/nosotros"
+                className="hover:text-zinc-600 lg:mb-0 mb-8"
+              >
+                Nosotros
+              </Link>
+              <Link
+                href="/contacto"
+                className="hover:text-zinc-600 lg:mb-0 mb-8"
+              >
+                Contacto
+              </Link>
+            </div>
+            {/* <!-- search --> */}
+            <div className="lg:ml-40 w-6">
+              <a href="#">
+                <svg
+                  className="w-6 h-6"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+                  ></path>
+                </svg>
+              </a>
+            </div>
+          </div>
+        </div>
+      </nav>
+    </header>
+  );
+};
+
+export default Header;

components/layout.js

+import Footer from "./footer";
+import Header from "./header";
+
+export default function Layout({ children }) {
+  return (
+    <>
+      <Header />
+      <main>{children}</main>
+      <Footer />
+    </>
+  );
+}

jsconfig.json

+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./*"]
+    }
+  }
+}

next.config.js

+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+}
+
+module.exports = nextConfig

package.json

+{
+  "name": "halley",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@next/font": "13.1.6",
+    "eslint": "8.33.0",
+    "eslint-config-next": "13.1.6",
+    "next": "13.1.6",
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
+  },
+  "devDependencies": {
+    "autoprefixer": "^10.4.13",
+    "postcss": "^8.4.21",
+    "tailwindcss": "^3.2.4"
+  }
+}

pages/_app.js

+import Layout from "@/components/layout";
+
+import "@/styles/globals.css";
+
+export default function App({ Component, pageProps }) {
+  return (
+    <Layout>
+      <Component {...pageProps} />
+    </Layout>
+  );
+}

pages/_document.js

+import { Html, Head, Main, NextScript } from 'next/document'
+
+export default function Document() {
+  return (
+    <Html lang="en">
+      <Head />
+      <body>
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  )
+}

pages/blog.js

+import Head from "next/head";
+import Image from "next/image";
+
+export default function Blog() {
+  return (
+    <>
+      <Head>
+        <title>Create Next App</title>
+        <meta name="description" content="Generated by create next app" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+      <main>
+        <section class="bg-[#3E5E75] text-[#F0F0F0]">
+          <div class="container mx-auto px-6 py-16">
+            <h2 class="text-center lg:text-6xl text-4xl font-semibold">Blog</h2>
+          </div>
+        </section>
+        <section class="text-[#3E5E75] bg-[#F0F0F0] lg:pb-24">
+          <div class="container mx-auto px-6 py-6">
+            <h4 class="text-center lg:text-5xl text-3xl my-16 font-light">
+              Publicaciones
+            </h4>
+            <div class="grid lg:grid-cols-3 gap-16 place-items-center">
+              <div class="lg:w-[390px] lg:h-[375px] w-full overflow-hidden rounded-lg hover:drop-shadow-lg transform transition duration-500 hover:scale-105">
+                <div>
+                  <Image
+                    src="/images/post1.jpg"
+                    alt="post1"
+                    width={200}
+                    height={200}
+                    class="h-[220px] object-cover rounded-t-lg w-full"
+                  />
+                </div>
+                <div class="bg-white text-black p-6">
+                  <h3 class="font-semibold mt-0">Eclipse Lunar</h3>
+                  <p class="mt-2">
+                    Un eclipse lunar es un evento astronómico que sucede cuando
+                    la Tierra se interpone entre el Sol y la Luna...
+                  </p>
+                </div>
+              </div>
+              <div class="lg:w-[390px] lg:h-[375px] w-full overflow-hidden rounded-lg drop-shadow-lg transform transition duration-500 hover:scale-105">
+                <div>
+                  <Image
+                    src="/images/post2.jpg"
+                    alt="post2"
+                    width={200}
+                    height={200}
+                    class="h-[220px] object-cover rounded-t-lg w-full"
+                  />
+                </div>
+                <div class="bg-white text-black p-6">
+                  <h3 class="font-semibold mt-0">
+                    ¿Cómo nos dimos cuenta que no somos el centro del universo?
+                  </h3>
+                  <p class="mt-2">
+                    Y una pregunta más importante es: ¿Por qué aún somos
+                    egocéntricos?
+                  </p>
+                </div>
+              </div>
+              <div class="lg:w-[390px] lg:h-[375px] w-full overflow-hidden rounded-lg drop-shadow-lg transform transition duration-500 hover:scale-105">
+                <div>
+                  <Image
+                    src="/images/post3.jpg"
+                    alt="post3"
+                    width={200}
+                    height={200}
+                    class="h-[220px] object-cover rounded-t-lg w-full"
+                  />
+                </div>
+                <div class="bg-white text-black p-6">
+                  <h3 class="font-semibold mt-0">
+                    Hipatia de Alejandría: la primera mujer astrónoma
+                  </h3>
+                  <p class="mt-2">
+                    Confeccionó un planisferio celeste que permitía cartografiar
+                    diversos astros y diseñó un astrolabio...
+                  </p>
+                </div>
+              </div>
+              <div class="lg:w-[390px] lg:h-[375px] w-full overflow-hidden rounded-lg drop-shadow-lg transform transition duration-500 hover:scale-105">
+                <div>
+                  <Image
+                    src="/images/post4.jpg"
+                    alt="post1"
+                    width={200}
+                    height={200}
+                    class="h-[220px] object-cover rounded-t-lg w-full"
+                  />
+                </div>
+                <div class="bg-white text-black p-6">
+                  <h3 class="font-semibold mt-0">Lorem Ipsum</h3>
+                  <p class="mt-2">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
+                    do eiusmod tempor incididunt ut labore et dolore magna
+                    aliqua.
+                  </p>
+                </div>
+              </div>
+              <div class="lg:w-[390px] lg:h-[375px] w-full overflow-hidden rounded-lg drop-shadow-lg transform transition duration-500 hover:scale-105">
+                <div>
+                  <Image
+                    src="/images/post5.jpg"
+                    alt="post2"
+                    width={200}
+                    height={200}
+                    class="h-[220px] object-cover rounded-t-lg w-full"
+                  />
+                </div>
+                <div class="bg-white text-black p-6">
+                  <h3 class="font-semibold mt-0">Lorem Ipsum</h3>
+                  <p class="mt-2">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
+                    do eiusmod tempor incididunt ut labore et dolore magna
+                    aliqua.
+                  </p>
+                </div>
+              </div>
+              <div class="lg:w-[390px] lg:h-[375px] w-full overflow-hidden rounded-lg drop-shadow-lg transform transition duration-500 hover:scale-105">
+                <div>
+                  <Image
+                    src="/images/post6.jpg"
+                    alt="post3"
+                    width={200}
+                    height={200}
+                    class="h-[220px] object-cover rounded-t-lg w-full"
+                  />
+                </div>
+                <div class="bg-white text-black p-6">
+                  <h3 class="font-semibold mt-0">Lorem Ipsum</h3>
+                  <p class="mt-2">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
+                    do eiusmod tempor incididunt ut labore et dolore magna
+                    aliqua.
+                  </p>
+                </div>
+              </div>
+            </div>
+            <div class="mt-32 flex justify-center items-center mx-auto">
+              <a href="#" class="mr-2">
+                <svg
+                  class="w-6 h-6 text-[#F68B1F]"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M15 19l-7-7 7-7"
+                  ></path>
+                </svg>
+              </a>
+              <p class="text-[#F68B1F] font-semibold text-lg ">1</p>
+              <a href="#" class="ml-2">
+                <svg
+                  class="w-6 h-6 text-[#F68B1F]"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M9 5l7 7-7 7"
+                  ></path>
+                </svg>
+              </a>
+            </div>
+          </div>
+        </section>
+      </main>
+    </>
+  );
+}

pages/contacto.js

+import Head from "next/head";
+
+export default function Contacto() {
+  return (
+    <>
+      <Head>
+        <title>Create Next App</title>
+        <meta name="description" content="Generated by create next app" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+      <main></main>
+    </>
+  );
+}

pages/divulgacion.js

+import Head from "next/head";
+import Image from "next/image";
+import Link from "next/link";
+
+export default function Divulgacion() {
+  return (
+    <>
+      <Head>
+        <title>Create Next App</title>
+        <meta name="description" content="Generated by create next app" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+      <main>
+        <section class="bg-[#3E5E75] text-[#F0F0F0]">
+          <div class="container mx-auto px-6 py-16">
+            <h2 class="text-center lg:text-6xl text-4xl font-semibold">
+              Divulgación
+            </h2>
+          </div>
+        </section>
+        <section class="text-[#3E5E75] bg-[#F0F0F0] pb-24">
+          <div class="container mx-auto px-6 py-8">
+            <div class="flex justify-around items-center text-[#3E5E75] bg-[#F0F0F0]">
+              <div class="lg:mx-16 mx-4">
+                <h4 class="text-center lg:text-5xl text-3xl my-16 font-light">
+                  Actividades
+                </h4>
+                <div class="grid lg:grid-cols-3 grid-cols-2 lg:gap-16 gap-8">
+                  <Link href="/vecinos-y-amigos">
+                    <div class="transform transition duration-500 hover:scale-105">
+                      <Image
+                        src="/images/vecinos_amigos.jpg"
+                        alt="vecinos_amigos"
+                        width={200}
+                        height={200}
+                        class="lg:h-72 lg:w-72 h-48 w-48 object-cover rounded-lg hover:drop-shadow-lg"
+                      />
+                      <p class="mt-4 lg:text-2xl font-medium">
+                        Vecinos y amigos
+                      </p>
+                    </div>
+                  </Link>
+                  <div class="transform transition duration-500 hover:scale-105">
+                    <Image
+                      src="/images/noches_astro.png"
+                      alt="noches_astro"
+                      width={200}
+                      height={200}
+                      class="lg:h-72 lg:w-72 h-48 w-48 object-cover rounded-lg hover:drop-shadow-lg"
+                    />
+                    <p class="mt-4 lg:text-2xl font-medium">
+                      Noches de astronomía
+                    </p>
+                  </div>
+                  <div class="transform transition duration-500 hover:scale-105">
+                    <Image
+                      src="/images/planetario.jpg"
+                      alt="noches_astro"
+                      width={200}
+                      height={200}
+                      class="lg:h-72 lg:w-72 h-48 w-48 object-cover rounded-lg hover:drop-shadow-lg"
+                    />
+                    <p class="mt-4 lg:text-2xl font-medium">Planetario</p>
+                  </div>
+                  <div class="transform transition duration-500 hover:scale-105">
+                    <Image
+                      src="/images/observatorio.PNG"
+                      alt="observatorio"
+                      width={200}
+                      height={200}
+                      class="lg:h-72 lg:w-72 h-48 w-48 object-cover rounded-lg hover:drop-shadow-lg"
+                    />
+                    <p class="mt-4 lg:text-2xl font-medium">Observatorio</p>
+                  </div>
+                  <div class="transform transition duration-500 hover:scale-105">
+                    <Image
+                      src="/images/cine_foro.jpg"
+                      alt="cine_foro"
+                      width={200}
+                      height={200}
+                      class="lg:h-72 lg:w-72 h-48 w-48 object-cover rounded-lg hover:drop-shadow-lg"
+                    />
+                    <p class="mt-4 lg:text-2xl font-medium">Cine Foro</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+      </main>
+    </>
+  );
+}

pages/index.js

+import Head from "next/head";
+import Image from "next/image";
+import Link from "next/link";
+
+export default function Home() {
+  return (
+    <>
+      <Head>
+        <title>Create Next App</title>
+        <meta name="description" content="Generated by create next app" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+      <main>
+        <div className="bg-hero-pattern object-cover h-[642px] z-0 brightness-75">
+          {/* <!-- botones --> */}
+          <section className="container flex justify-between items-center mx-auto h-full p-4">
+            <button
+              type="button"
+              className="text-[#3E5E75] bg-white hover:opacity-80 font-medium rounded-full text-sm p-2.5 text-center inline-flex items-center"
+            >
+              <svg
+                className="w-4 h-4 m-2"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M10 19l-7-7m0 0l7-7m-7 7h18"
+                ></path>
+              </svg>
+            </button>
+            <button
+              type="button"
+              className="text-[#3E5E75] bg-white hover:opacity-80 font-medium rounded-full text-sm p-2.5 text-center inline-flex items-center"
+            >
+              <svg
+                className="w-4 h-4 m-2"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M14 5l7 7m0 0l-7 7m7-7H3"
+                ></path>
+              </svg>
+            </button>
+          </section>
+        </div>
+        <section className="bg-[#3E5E75] text-[#F0F0F0]">
+          <div className="container mx-auto px-6 py-16 lg:py-28">
+            <h2 className="text-center lg:text-6xl text-4xl font-semibold">
+              Divulgación
+            </h2>
+            <p className="text-center lg:w-3/5 mx-auto mt-8 text-sm lg:text-base">
+              El Grupo Halley UIS, comprometido con la comunidad, dedica este
+              espacio a la divulgación de las ciencias astronómicas a través de
+              actividades informativas plasmadas en: conferencias, videos,
+              infografías, fanzine, retos, entre otros.
+            </p>
+            <div className="flex justify-around items-center mt-16">
+              <div className="hidden lg:block w-[540px] overflow-hidden rounded-lg hover:drop-shadow-2xl transform transition duration-500 hover:scale-105">
+                <div>
+                  <Image
+                    src="/images/post1.jpg"
+                    alt="post1"
+                    height={200}
+                    width={200}
+                    className="h-72 object-cover rounded-t-lg w-full"
+                  />
+                </div>
+                <div className="bg-[#F0F0F0] text-black p-6">
+                  <h3 className="text-2xl font-semibold mt-4">Eclipse Lunar</h3>
+                  <p className="my-4">
+                    Un eclipse lunar es un evento astronómico que sucede cuando
+                    la Tierra se interpone entre el Sol y la Luna, generando un
+                    cono de sombra que oscurece a la Luna.
+                  </p>
+                </div>
+              </div>
+              <div className="lg:mr-16">
+                <h4 className="text-center text-3xl mb-8">Actividades</h4>
+                <div className="grid grid-cols-2 gap-8 mt-4 transform transition duration-500 hover:scale-105">
+                  <Image
+                    src="/images/vecinos_amigos.jpg"
+                    alt="vecinos_amigos"
+                    height={200}
+                    width={200}
+                    className="h-48 w-48 object-cover rounded-lg hover:drop-shadow-lg"
+                  />
+                  <Image
+                    src="/images/noches_astro.png"
+                    alt="noches_astro"
+                    height={200}
+                    width={200}
+                    className="h-48 w-48 object-cover rounded-lg hover:drop-shadow-lg"
+                  />
+                  <Image
+                    src="/images/observatorio.PNG"
+                    alt="observatorio"
+                    height={200}
+                    width={200}
+                    className="h-48 w-48 object-cover rounded-lg hover:drop-shadow-lg"
+                  />
+                  <Image
+                    src="/images/curso_astro.jpg"
+                    alt="curso_astro"
+                    height={200}
+                    width={200}
+                    className="h-48 w-48 object-cover rounded-lg hover:drop-shadow-lg"
+                  />
+                </div>
+              </div>
+            </div>
+            <div className="text-center mt-16 lg:mt-32">
+              <a href="divulgacion.html">
+                <button className="bg-[#F68B1F] px-6 py-4 rounded-full font-semibold hover:opacity-90 ">
+                  Ver más
+                </button>
+              </a>
+            </div>
+          </div>
+        </section>
+        <section className="text-[#3E5E75] bg-[#F0F0F0]">
+          <div className="container mx-auto px-6 py-16 lg:py-28">
+            <h2 className="text-center lg:text-6xl text-4xl font-semibold">
+              Investigación
+            </h2>
+            <p className="text-center lg:w-3/5 mx-auto mt-8 text-sm lg:text-base">
+              Proyectos de investigación activos del grupo Halley UIS.
+            </p>
+            <div className="grid grid-cols-1 lg:grid-cols-4 mt-16 place-items-center">
+              <div className="h-[284px] w-[232px] mb-8 rounded-lg hover:drop-shadow-lg bg-white transform transition duration-500 hover:scale-105">
+                <a
+                  href="https://halley.uis.edu.co/fuego/"
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  <div>
+                    <div className="p-4">
+                      <Image
+                        src="/images/mute.jpg"
+                        alt="mute"
+                        height={200}
+                        width={200}
+                        className="h-[216px] w-[205px] object-contain"
+                      />
+                    </div>
+                  </div>
+                  <div>
+                    <h3 className="ml-4 text-2xl font-semibold">MuTe</h3>
+                  </div>
+                </a>
+              </div>
+              <div className="h-[284px] w-[232px] mb-8 rounded-lg hover:drop-shadow-lg bg-white transform transition duration-500 hover:scale-105">
+                <a
+                  href="https://lagoproject.net/"
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  <div>
+                    <div className="p-4">
+                      <Image
+                        src="/images/lago-logo.png"
+                        alt="lago"
+                        height={200}
+                        width={200}
+                        className="h-[216px] w-[205px] object-contain"
+                      />
+                    </div>
+                  </div>
+                  <div>
+                    <h3 className="ml-4 text-2xl font-semibold">Lago-UIS</h3>
+                  </div>
+                </a>
+              </div>
+              <div className="h-[284px] w-[232px] mb-8 rounded-lg hover:drop-shadow-lg bg-white transform transition duration-500 hover:scale-105">
+                <a
+                  href="http://auger.uis.edu.co/"
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  <div>
+                    <div className="p-4">
+                      <Image
+                        src="/images/auger_logo.jpg"
+                        alt="auger"
+                        height={200}
+                        width={200}
+                        className="h-[216px] w-[205px] object-contain"
+                      />
+                    </div>
+                  </div>
+                  <div>
+                    <h3 className="ml-4 text-2xl font-semibold">Auger-UIS</h3>
+                  </div>
+                </a>
+              </div>
+              <div className="h-[284px] w-[232px] mb-8 rounded-lg hover:drop-shadow-lg bg-white transform transition duration-500 hover:scale-105">
+                <a
+                  href="https://halley.uis.edu.co/astroparamo/"
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  <div>
+                    <div className="p-4">
+                      <Image
+                        src="/images/astroparamo.png"
+                        alt="astroparamo"
+                        height={200}
+                        width={200}
+                        className="h-[216px] w-[205px] object-contain"
+                      />
+                    </div>
+                  </div>
+                  <div>
+                    <h3 className="ml-4 text-2xl font-semibold">Astropáramo</h3>
+                  </div>
+                </a>
+              </div>
+            </div>
+            <div className="text-center mt-16 lg:mt-32">
+              <a href="investigacion.html">
+                <button className="bg-[#F68B1F] text-[#F0F0F0] px-6 py-4 rounded-full font-semibold hover:opacity-90 ">
+                  Ver más
+                </button>
+              </a>
+            </div>
+          </div>
+        </section>
+        <section className="bg-[#3E5E75] text-[#F0F0F0]">
+          <div className="container mx-auto px-6 py-16 lg:py-28">
+            <h2 className="text-center lg:text-6xl text-4xl font-semibold">
+              Blog
+            </h2>
+            <p className="text-center lg:w-3/5 mx-auto mt-8 text-sm lg:text-base">
+              Columnas de opinión y noticias centíficas escritas por nuestra
+              comunidad.
+            </p>
+            <div className="grid lg:grid-cols-3 gap-16 mt-16 place-items-center">
+              <div className="lg:w-[410px] lg:h-[375px] w-full overflow-hidden rounded-lg hover:drop-shadow-lg transform transition duration-500 hover:scale-105">
+                <div>
+                  <Image
+                    src="/images/post1.jpg"
+                    alt="post1"
+                    height={200}
+                    width={200}
+                    className="h-[220px] object-cover rounded-t-lg w-full"
+                  />
+                </div>
+                <div className="bg-[#F0F0F0] text-black p-6">
+                  <h3 className="font-semibold mt-0">Eclipse Lunar</h3>
+                  <p className="mt-2">
+                    Un eclipse lunar es un evento astronómico que sucede cuando
+                    la Tierra se interpone entre el Sol y la Luna...
+                  </p>
+                </div>
+              </div>
+              <div className="lg:block hidden w-[410px] h-[375px] overflow-hidden rounded-lg hover:drop-shadow-lg transform transition duration-500 hover:scale-105">
+                <div>
+                  <Image
+                    src="/images/post2.jpg"
+                    alt="post2"
+                    height={200}
+                    width={200}
+                    className="h-[220px] object-cover rounded-t-lg w-full"
+                  />
+                </div>
+                <div className="bg-[#F0F0F0] text-black p-6">
+                  <h3 className="font-semibold mt-0">
+                    ¿Cómo nos dimos cuenta que no somos el centro del universo?
+                  </h3>
+                  <p className="mt-2">
+                    Y una pregunta más importante es: ¿Por qué aún somos
+                    egocéntricos?
+                  </p>
+                </div>
+              </div>
+              <div className="lg:block hidden w-[410px] h-[375px] overflow-hidden rounded-lg hover:drop-shadow-lg transform transition duration-500 hover:scale-105">
+                <div>
+                  <Image
+                    src="/images/post3.jpg"
+                    alt="post3"
+                    height={200}
+                    width={200}
+                    className="h-[220px] object-cover rounded-t-lg w-full"
+                  />
+                </div>
+                <div className="bg-[#F0F0F0] text-black p-6">
+                  <h3 className="font-semibold mt-0">
+                    Hipatia de Alejandría: la primera mujer astrónoma
+                  </h3>
+                  <p className="mt-2">
+                    Confeccionó un planisferio celeste que permitía cartografiar
+                    diversos astros y diseñó un astrolabio...
+                  </p>
+                </div>
+              </div>
+            </div>
+            <div className="text-center mt-16 lg:mt-32">
+              <a href="blog.html">
+                <button className="bg-[#F68B1F] text-[#F0F0F0] px-6 py-4 rounded-full font-semibold hover:opacity-90 ">
+                  Ver más
+                </button>
+              </a>
+            </div>
+          </div>
+        </section>
+        <section className="text-[#3E5E75] bg-[#F0F0F0]">
+          <div className="container mx-auto px-6 py-28">
+            <h2 className="text-center text-6xl font-semibold">Tienda</h2>
+            <p className="text-center w-3/5 mx-auto mt-8">
+              Dale click a la imagen para descargar nuestro catálogo!
+            </p>
+            <div className="flex">
+              <div className="mt-16 flex justify-center items-center w-screen">
+                <Image
+                  src="/images/store.jpg"
+                  alt="tienda"
+                  height={200}
+                  width={200}
+                />
+              </div>
+            </div>
+          </div>
+        </section>
+      </main>
+    </>
+  );
+}

pages/investigacion.js

+import Head from "next/head";
+import Link from "next/link";
+import Image from "next/image";
+
+export default function Investigacion() {
+  return (
+    <>
+      <Head>
+        <title>Create Next App</title>
+        <meta name="description" content="Generated by create next app" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+      <main>
+        <section class="bg-[#3E5E75] text-[#F0F0F0]">
+          <div class="container mx-auto px-6 py-16">
+            <h2 class="text-center lg:text-6xl text-4xl font-semibold">
+              Investigación
+            </h2>
+          </div>
+        </section>
+        <section class="text-[#3E5E75] bg-[#F0F0F0] pb-24">
+          <div class="container mx-auto px-6 py-6">
+            <h4 class="text-center lg:text-5xl text-3xl my-16 font-light">
+              Proyectos
+            </h4>
+            <div class="grid lg:grid-cols-4 mt-8 place-items-center">
+              <div class="h-[284px] w-[232px] mb-8 rounded-lg drop-shadow-lg bg-white transform transition duration-500 hover:scale-105">
+                <a
+                  href="https://halley.uis.edu.co/fuego/"
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  <div>
+                    <div class="p-4">
+                      <Image
+                        src="/images/mute.jpg"
+                        alt="mute"
+                        width={200}
+                        height={200}
+                        class="h-[216px] w-[205px] object-contain"
+                      />
+                    </div>
+                  </div>
+                  <div>
+                    <h3 class="ml-4 text-2xl font-semibold">MuTe</h3>
+                  </div>
+                </a>
+              </div>
+              <div class="h-[284px] w-[232px] mb-8 rounded-lg drop-shadow-lg bg-white transform transition duration-500 hover:scale-105">
+                <Link
+                  href="https://lagoproject.net/"
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  <div>
+                    <div class="p-4">
+                      <Image
+                        src="/images/lago-logo.png"
+                        alt="lago"
+                        width={200}
+                        height={200}
+                        class="h-[216px] w-[205px] object-contain"
+                      />
+                    </div>
+                  </div>
+                  <div>
+                    <h3 class="ml-4 text-2xl font-semibold">Lago-UIS</h3>
+                  </div>
+                </Link>
+              </div>
+              <div class="h-[284px] w-[232px] mb-8 rounded-lg drop-shadow-lg bg-white transform transition duration-500 hover:scale-105">
+                <a
+                  href="http://auger.uis.edu.co/"
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  <div>
+                    <div class="p-4">
+                      <Image
+                        src="/images/auger_logo.jpg"
+                        alt="auger"
+                        width={200}
+                        height={200}
+                        class="h-[216px] w-[205px] object-contain"
+                      />
+                    </div>
+                  </div>
+                  <div>
+                    <h3 class="ml-4 text-2xl font-semibold">Auger-UIS</h3>
+                  </div>
+                </a>
+              </div>
+              <div class="h-[284px] w-[232px] mb-8 rounded-lg drop-shadow-lg bg-white transform transition duration-500 hover:scale-105">
+                <Link
+                  href="https://halley.uis.edu.co/astroparamo/"
+                  target="_blank"
+                >
+                  <div>
+                    <div class="p-4">
+                      <Image
+                        src="/images/astroparamo.png"
+                        alt="astroparamo"
+                        width={200}
+                        height={200}
+                        class="h-[216px] w-[205px] object-contain"
+                      />
+                    </div>
+                  </div>
+                  <div>
+                    <h3 class="ml-4 text-2xl font-semibold">Astropáramo</h3>
+                  </div>
+                </Link>
+              </div>
+            </div>
+          </div>
+        </section>
+      </main>
+    </>
+  );
+}

pages/nosotros.js

+import Head from "next/head";
+import Image from "next/image";
+
+export default function Nosotros() {
+  return (
+    <>
+      <Head>
+        <title>Create Next App</title>
+        <meta name="description" content="Generated by create next app" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+      <main></main>
+    </>
+  );
+}

pages/vecinos-y-amigos.js

+import Head from "next/head";
+import Image from "next/image";
+
+export default function VecinosYAmigos() {
+  return (
+    <>
+      <Head>
+        <title>Create Next App</title>
+        <meta name="description" content="Generated by create next app" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+      <main>
+        <section class="bg-[#3E5E75] text-[#F0F0F0]">
+          <div class="container mx-auto px-6 py-16">
+            <h2 class="text-center lg:text-6xl text-4xl font-semibold">
+              Vecinos y amigos
+            </h2>
+            <p class="text-center lg:w-3/5 mx-auto mt-8 text-sm lg:text-base">
+              Prográmate para las actividades de Vecinos y amigos!
+            </p>
+            <p class="text-center lg:w-3/5 mx-auto text-sm lg:text-base">
+              Todos los domingos de 10-12 m.
+            </p>
+          </div>
+        </section>
+        <section class="text-[#3E5E75] bg-[#F0F0F0] lg:pb-24">
+          <div class="container mx-auto px-6 py-6">
+            <h4 class="text-center lg:text-5xl text-3xl my-16 font-light">
+              Programación
+            </h4>
+            <div class="grid lg:grid-cols-3 gap-8 place-items-center text-black">
+              <div>
+                <div class="h-[344px] w-[232px] rounded-lg drop-shadow-lg bg-white transform transition duration-500 hover:drop-shadow-2xl">
+                  <div>
+                    <div class="p-4">
+                      <Image
+                        src="/images/obs_solar.JPG"
+                        alt="obs_solar"
+                        width={200}
+                        height={200}
+                        class="h-[216px] w-[205px] object-cover rounded-lg"
+                      />
+                    </div>
+                  </div>
+                  <div>
+                    <h2 class="mx-4 text-lg font-semibold">
+                      Observación solar
+                    </h2>
+                    <p class="ml-4 mt-2">21 Oct. Plazoleta entrada Cra 27</p>
+                  </div>
+                </div>
+                <p class="mt-8 text-lg text-center text-[#69CEDF]">
+                  Próxima semana...
+                </p>
+              </div>
+              <div>
+                <div class="h-[344px] w-[232px] rounded-lg drop-shadow-lg bg-white transform transition duration-500 hover:drop-shadow-2xl">
+                  <div>
+                    <div class="p-4">
+                      <Image
+                        src="/images/vecinos_amigos.jpg"
+                        alt="vecinos_amigos"
+                        width={200}
+                        height={200}
+                        class="h-[216px] w-[205px] object-cover rounded-lg"
+                      />
+                    </div>
+                  </div>
+                  <div>
+                    <h2 class="mx-4 text-lg font-semibold">Astrobiología</h2>
+                    <p class="ml-4 mt-2">16 Oct. Plazoleta entrada Cra 27</p>
+                  </div>
+                </div>
+                <p class="mt-8 text-lg text-center text-[#F68B1F]">
+                  Actividad de la semana!
+                </p>
+              </div>
+              <div>
+                <div class="h-[344px] w-[232px] rounded-lg drop-shadow-lg bg-white transform transition duration-500 hover:drop-shadow-2xl">
+                  <div>
+                    <div class="p-4">
+                      <Image
+                        src="/images/obs_solar.JPG"
+                        alt="obs_solar"
+                        width={200}
+                        height={200}
+                        class="h-[216px] w-[205px] object-cover rounded-lg"
+                      />
+                    </div>
+                  </div>
+                  <div>
+                    <h2 class="mx-4 text-lg font-semibold">
+                      Taller infantil astrofísica
+                    </h2>
+                    <p class="ml-4 mt-2">9 Oct. Plazoleta entrada Cra 27</p>
+                  </div>
+                </div>
+                <p class="mt-8 text-lg text-center text-[#69CEDF]">
+                  Semana pasada...
+                </p>
+              </div>
+            </div>
+          </div>
+        </section>
+      </main>
+    </>
+  );
+}

postcss.config.js

+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}