From dec09521ee65317b5f3420d665b5535cf401ad8f Mon Sep 17 00:00:00 2001
From: Monika Stefanova <monik.stefanova@gmail.com>
Date: Tue, 13 Jan 2026 21:40:24 +0100
Subject: [PATCH] #52 Home Layout first commit

---
 front/src/app/layout.tsx                      |  2 +-
 front/src/app/page.tsx                        | 42 +++++++++++++++----
 .../src/common/components/card.component.tsx  |  2 +-
 3 files changed, 35 insertions(+), 11 deletions(-)

diff --git a/front/src/app/layout.tsx b/front/src/app/layout.tsx
index c4137ee..9a26a7a 100644
--- a/front/src/app/layout.tsx
+++ b/front/src/app/layout.tsx
@@ -15,7 +15,7 @@ const RootLayout = (props: Props) => {
         suppressHydrationWarning
       >
         <HeaderComponent />
-        <main className="grow p-8">{children}</main>
+        <main className="flex grow flex-col">{children}</main>
         <FooterComponent />
       </body>
     </html>
diff --git a/front/src/app/page.tsx b/front/src/app/page.tsx
index 850b152..732d945 100644
--- a/front/src/app/page.tsx
+++ b/front/src/app/page.tsx
@@ -2,15 +2,39 @@ import Link from "next/link";
 
 const RootPage = () => {
   return (
-    <div className="flex flex-col gap-8">
-      <h2>Página de inicio</h2>
-      <div className="flex flex-col gap-4">
-        <Link href="/embalse-provincia" className="mr-4 text-3xl text-blue-500">
-          Embalses por provincias
-        </Link>
-        <Link href="/embalse/casasola" className="mr-4 text-3xl text-blue-500">
-          Detalle del embalse
-        </Link>
+    <div className="relative flex flex-1 flex-col overflow-hidden p-8">
+      <div className="absolute inset-0 bg-[url('/images/embalse-generico.jpg')] bg-cover bg-center p-8 opacity-40"></div>
+      <div className="flex grow flex-col items-center justify-center">
+        <div className="bg-base-100 absolute flex max-w-10/12 flex-col gap-8 rounded-xl p-8 shadow-lg">
+          <div className="text-center">
+            <h2 className="font-bold">Embalses</h2>
+          </div>
+
+          <div className="flex flex-col gap-4">
+            <label className="input input-bordered flex w-full items-center gap-2">
+              <input type="text" placeholder="La tolba" className="grow" />
+
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 16 16"
+                fill="currentColor"
+                className="h-6 w-6 opacity-70"
+              >
+                <path
+                  fillRule="evenodd"
+                  d="M9.965 11.026a5 5 0 1 1 1.06-1.06l2.755 2.754a.75.75 0 1 1-1.06 1.06l-2.755-2.754ZM10.5 7a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z"
+                  clipRule="evenodd"
+                />
+              </svg>
+            </label>
+            <div>
+              <p className="text-sm">
+                Encuentra toda la información disponible de los embalses de
+                España
+              </p>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   );
diff --git a/front/src/common/components/card.component.tsx b/front/src/common/components/card.component.tsx
index 14e9a9d..1bb2a11 100644
--- a/front/src/common/components/card.component.tsx
+++ b/front/src/common/components/card.component.tsx
@@ -7,7 +7,7 @@ interface Props {
 export const Card: React.FC<Props> = (props: Props) => {
   const { children } = props;
   return (
-    <div className="bg-base-100 flex flex-col gap-6 rounded-2xl p-4">
+    <div className="bg-base-100 m-8 flex flex-col gap-6 rounded-2xl p-4">
       {children}
     </div>
   );