Feature/#50 setup base theme typography and main layout

.prettierrc

@@ -0,0 +1,3 @@
+{
+  "plugins": ["prettier-plugin-tailwindcss"]
+}

front/package.json

@@ -7,6 +7,7 @@
     "start": "next dev"
   },
   "dependencies": {
+    "@fontsource/nunito-sans": "^5.2.7",
     "@tailwindcss/postcss": "^4.1.17",
     "next": "^15.4.1",
     "postcss": "^8.5.6",
@@ -17,6 +18,8 @@
   "devDependencies": {
     "@types/react": "^19.1.8",
     "@types/react-dom": "^19.1.6",
-    "daisyui": "^5.5.5"
+    "daisyui": "^5.5.5",
+    "prettier": "^3.7.3",
+    "prettier-plugin-tailwindcss": "^0.7.2"
   }
 }

front/src/app/embalse-provincia/[provincia]/page.tsx

@@ -8,9 +8,9 @@ export default async function EmbalseProvinciaListadoPage({ params }: Props) {
   const { provincia } = await params;
   return (
     <div className="flex flex-col gap-8">
-      <h2 className="text-4xl">Embalses de {provincia}</h2>
+      <h2>Embalses de {provincia}</h2>
 
-      <Link href="/embalse/casasola" className="text-blue-500 text-xl">
+      <Link href="/embalse/casasola" className="link-accessible">
         Embalse de Casasola
       </Link>
     </div>

front/src/app/embalse-provincia/page.tsx

@@ -3,8 +3,8 @@ import Link from "next/link";
 export default function EmbalsesProvinciaPage() {
   return (
     <div className="flex flex-col gap-8">
-      <h2 className="text-4xl">Embalse por provincias</h2>
-      <Link href="/embalse-provincia/malaga" className="text-blue-500 text-xl">
+      <h2>Embalse por provincias</h2>
+      <Link href="/embalse-provincia/malaga" className="link-accessible">
         Málaga
       </Link>
     </div>

front/src/app/embalse/[embalse]/page.tsx

@@ -8,7 +8,8 @@ export default async function EmbalseDetallePage({ params }: Props) {
   const { embalse } = await params;
   return (
     <div className="flex flex-col gap-8">
-      <h2 className="text-4xl">Detalle del embalse: {embalse}</h2>
+      <h2>Detalle del embalse: {embalse}</h2>
+      <p>Hola hgola h uhfrf hfueh</p>
     </div>
   );
 }

front/src/app/globals.css

@@ -1,2 +1,88 @@
 @import "tailwindcss";
 @plugin "daisyui";
+
+@import "@fontsource/nunito-sans/400.css";
+@import "@fontsource/nunito-sans/500.css";
+@import "@fontsource/nunito-sans/600.css";
+
+@plugin "daisyui/theme" {
+  name: "info-embalse";
+  default: true;
+  color-scheme: light;
+
+  --color-primary: #1b9aaa;
+  --color-accent: #d9d900;
+
+  --color-base-100: #feffff; /* White background */
+  --color-base-200: #eaeaea; /* Grey background */
+  --color-base-content: #060d14; /* Text color */
+}
+
+@theme {
+  --font-sans: "Nunito Sans", sans-serif;
+
+  /* Title color */
+  --color-title: #051c1f;
+
+  /* Accesible visited link color */
+  --color-visited-link: #257782;
+
+  /*Primary color palette*/
+
+  --color-brand-50: #e8f5f7;
+  --color-brand-100: #d1ebee;
+  --color-brand-200: #a4d7dd;
+  --color-brand-300: #76c2cc;
+  --color-brand-400: #49aebb;
+  --color-brand-500: #1b9aaa; /* Primary color */
+  --color-brand-600: #167b88;
+  --color-brand-700: #105c66;
+  --color-brand-800: #0b3e44;
+  --color-brand-900: #051f22;
+  --color-brand-950: #01161a;
+}
+
+@layer base {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    @apply text-title opacity-95;
+  }
+
+  p,
+  body {
+    @apply opacity-85;
+  }
+
+  /* H1 Title 36px */
+  h1 {
+    @apply text-4xl leading-none font-semibold;
+  }
+
+  /* H2 Title 28px */
+  h2 {
+    @apply text-[28px] leading-normal font-semibold;
+  }
+
+  /* H3 Subtitle 24px */
+  h3 {
+    @apply text-2xl leading-none font-medium;
+  }
+
+  /* Text 14px */
+  p,
+  body {
+    @apply text-base-content text-base leading-normal font-normal;
+  }
+}
+
+@layer utilities {
+  /*Accesible link */
+
+  .link-accessible {
+    @apply link text-title visited:text-visited-link font-bold opacity-95;
+  }
+}

front/src/app/layout.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import "./globals.css";
+import { FooterComponent, HeaderComponent } from "./layouts";
 
 interface Props {
   children: React.ReactNode;
@@ -8,18 +9,14 @@ interface Props {
 const RootLayout = (props: Props) => {
   const { children } = props;
   return (
-    <html lang="en">
+    <html lang="en" data-theme="info-embalse">
       <body
-        className="bg-gray-100 text-gray-900 flex flex-col min-h-screen"
+        className="bg-base-200 text-base-content flex min-h-screen flex-col"
         suppressHydrationWarning
       >
-        <header className="bg-gray-800 text-white p-4 text-center">
-          <p className="text-3xl">Soy un header</p>
-        </header>
+        <HeaderComponent />
         <main className="grow p-8">{children}</main>
-        <footer className="bg-gray-800 text-white p-4 text-center">
-          <p>Soy un footer</p>
-        </footer>
+        <FooterComponent />
       </body>
     </html>
   );

front/src/app/layouts/footer.component.tsx

@@ -0,0 +1,38 @@
+import Link from "next/link";
+import { FC } from "react";
+
+export const FooterComponent: FC = () => {
+  return (
+    <footer className="bg-base-100">
+      <div className="border-accent flex flex-col items-center gap-2 border-t-2 p-3">
+        <div className="flex flex-col items-center gap-2 pb-[10px]">
+          <Link
+            href="/embalse-provincia"
+            className="link-accessible text-[15px] leading-none font-normal"
+          >
+            Embalses por provincias
+          </Link>
+
+          <div className="flex justify-between gap-2">
+            <Link
+              href="/aviso-legal"
+              className="link-accessible text-sm font-normal"
+            >
+              Aviso Legal
+            </Link>
+            <Link
+              href="/politica-cookies"
+              className="link-accessible text-sm font-normal"
+            >
+              Política de cookies
+            </Link>
+          </div>
+        </div>
+
+        <p className="text-xs leading-none font-normal">
+          Infoembalse © 2025 Todos los derechos reservados
+        </p>
+      </div>
+    </footer>
+  );
+};

front/src/app/layouts/header.component.tsx

@@ -0,0 +1,11 @@
+import { FC } from "react";
+
+export const HeaderComponent: FC = () => {
+  return (
+    <header className="bg-base-100">
+      <div className="border-accent flex h-[60px] items-center border-b-3 pl-5">
+        <img src="/images/logo.svg" alt="InfoEmbalse logo" />
+      </div>
+    </header>
+  );
+};

front/src/app/layouts/index.ts

@@ -0,0 +1,2 @@
+export * from "./header.component";
+export * from "./footer.component";

front/src/app/page.tsx

@@ -3,12 +3,12 @@ import Link from "next/link";
 const RootPage = () => {
   return (
     <div className="flex flex-col gap-8">
-      <h2 className="text-4xl">Página de inicio</h2>
+      <h2>Página de inicio</h2>
       <div className="flex flex-col gap-4">
-        <Link href="/embalse-provincia" className="mr-4 text-blue-500 text-3xl">
+        <Link href="/embalse-provincia" className="mr-4 text-3xl text-blue-500">
           Embalses por provincias
         </Link>
-        <Link href="/embalse/casasola" className="mr-4 text-blue-500 text-3xl">
+        <Link href="/embalse/casasola" className="mr-4 text-3xl text-blue-500">
           Detalle del embalse
         </Link>
       </div>