From 7af6a59150fe11e36dd487299facecd604fd12a7 Mon Sep 17 00:00:00 2001
From: TravisDev5x <eric_perez96@outlook.com>
Date: Fri, 12 Jun 2026 20:03:25 -0600
Subject: [PATCH 1/4] feat: add studio photo to about section via Cloudinary

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 app/page.tsx   | 15 ++++++++++-----
 next.config.ts |  8 ++++++++
 2 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index 09d7126..e55e1cf 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,5 +1,6 @@
 "use client";
 import Link from "next/link";
+import Image from "next/image";
 import LandingNavbar from "@/app/(landing)/_components/Navbar";
 import LandingFooter from "@/app/(landing)/_components/Footer";
 import { Button } from "@/components/ui/button";
@@ -88,11 +89,15 @@ function AboutSection() {
         </div>
 
         <Card className="py-0 gap-0">
-          <CardContent className="p-0 flex items-center justify-center" style={{ aspectRatio: "4/3" }}>
-            <div className="flex flex-col items-center gap-2 text-muted-foreground">
-              <ImageIcon size={32} />
-              <span className="text-[13px]">Foto del estudio</span>
-            </div>
+          <CardContent className="p-0 overflow-hidden" style={{ aspectRatio: "4/3" }}>
+            <Image
+              src="https://res.cloudinary.com/deh81ozjh/image/upload/v1781315539/Frontal1_ufulj4.png"
+              alt="Sala de producción del estudio"
+              width={800}
+              height={600}
+              className="w-full h-full object-cover"
+              priority
+            />
           </CardContent>
         </Card>
       </div>
diff --git a/next.config.ts b/next.config.ts
index 6431daf..3aa9c79 100644
--- a/next.config.ts
+++ b/next.config.ts
@@ -27,6 +27,14 @@ const nextConfig: NextConfig = {
   turbopack: {
     root: __dirname,
   },
+  images: {
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "res.cloudinary.com",
+      },
+    ],
+  },
   async headers() {
     return [
       {

From d0d4a86d765a81a95a4f6caafcca457c86cb725b Mon Sep 17 00:00:00 2001
From: TravisDev5x <eric_perez96@outlook.com>
Date: Fri, 12 Jun 2026 20:12:16 -0600
Subject: [PATCH 2/4] feat: add hero background image with theme-aware overlay

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 app/page.tsx | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/app/page.tsx b/app/page.tsx
index e55e1cf..33b5900 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -24,6 +24,17 @@ import {
 function HeroSection() {
   return (
     <section className="relative h-screen flex flex-col items-center justify-center overflow-hidden px-6 text-center">
+      <Image
+        src="https://res.cloudinary.com/deh81ozjh/image/upload/v1781315541/Panoramica2_floikl.png"
+        alt=""
+        fill
+        priority
+        className="object-cover object-center"
+        aria-hidden="true"
+      />
+
+      <div className="absolute inset-0 bg-white/80 dark:bg-black/70 transition-colors duration-300" />
+
       <div className="absolute -top-24 -left-24 w-[400px] h-[400px] rounded-full bg-primary/20 blur-[80px] pointer-events-none" />
       <div className="absolute -bottom-20 -right-20 w-[350px] h-[350px] rounded-full bg-primary/20 blur-[80px] pointer-events-none" />
       <div className="absolute top-1/2 right-[15%] w-[250px] h-[250px] rounded-full bg-primary/20 blur-[80px] pointer-events-none" />

From 1c4e4bb9ad1cc702819b958d06186bd32c42ee08 Mon Sep 17 00:00:00 2001
From: TravisDev5x <eric_perez96@outlook.com>
Date: Fri, 12 Jun 2026 20:14:51 -0600
Subject: [PATCH 3/4] fix: increase hero overlay opacity in light mode

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 app/page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/page.tsx b/app/page.tsx
index 33b5900..6406c6d 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -33,7 +33,7 @@ function HeroSection() {
         aria-hidden="true"
       />
 
-      <div className="absolute inset-0 bg-white/80 dark:bg-black/70 transition-colors duration-300" />
+      <div className="absolute inset-0 bg-white/90 dark:bg-black/70 transition-colors duration-300" />
 
       <div className="absolute -top-24 -left-24 w-[400px] h-[400px] rounded-full bg-primary/20 blur-[80px] pointer-events-none" />
       <div className="absolute -bottom-20 -right-20 w-[350px] h-[350px] rounded-full bg-primary/20 blur-[80px] pointer-events-none" />

From c2eeba6036e211b78bc165b6ad1fa8697e2f073d Mon Sep 17 00:00:00 2001
From: TravisDev5x <eric_perez96@outlook.com>
Date: Fri, 12 Jun 2026 20:21:53 -0600
Subject: [PATCH 4/4] =?UTF-8?q?fix:=20ajustar=20overlay=20del=20hero=20y?=
 =?UTF-8?q?=20limpiar=20secci=C3=B3n=20Nosotros?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Reducir overlay claro del hero a /35 para que la imagen se vea nítida
- Agregar tarjeta con blur detrás del contenido del hero para legibilidad
- Quitar bloque de estadísticas (años/proyectos/artistas) de Nosotros

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 app/page.tsx | 18 ++----------------
 1 file changed, 2 insertions(+), 16 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index 6406c6d..1ea75f6 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -33,13 +33,13 @@ function HeroSection() {
         aria-hidden="true"
       />
 
-      <div className="absolute inset-0 bg-white/90 dark:bg-black/70 transition-colors duration-300" />
+      <div className="absolute inset-0 bg-white/35 dark:bg-black/70 transition-colors duration-300" />
 
       <div className="absolute -top-24 -left-24 w-[400px] h-[400px] rounded-full bg-primary/20 blur-[80px] pointer-events-none" />
       <div className="absolute -bottom-20 -right-20 w-[350px] h-[350px] rounded-full bg-primary/20 blur-[80px] pointer-events-none" />
       <div className="absolute top-1/2 right-[15%] w-[250px] h-[250px] rounded-full bg-primary/20 blur-[80px] pointer-events-none" />
 
-      <div className="relative z-10 flex flex-col items-center gap-6 max-w-2xl">
+      <div className="relative z-10 flex flex-col items-center gap-6 max-w-2xl rounded-3xl bg-background/60 backdrop-blur-md px-6 py-10 sm:px-12 sm:py-14">
         <h1 className="font-medium leading-[1.1] tracking-[-0.02em] text-[clamp(40px,8vw,80px)]">
           <span className="text-foreground">Donde nacen</span>
           <br />
@@ -83,20 +83,6 @@ function AboutSection() {
             Somos un estudio independiente en Ecatepec enfocado en música electrónica, producción y
             formación de artistas. Cada proyecto recibe atención personalizada.
           </p>
-          <div className="flex items-start gap-4 sm:gap-8 mt-2">
-            {(
-              [
-                ["5+", "Años de experiencia"],
-                ["200+", "Proyectos grabados"],
-                ["50+", "Artistas formados"],
-              ] as const
-            ).map(([num, label]) => (
-              <div key={label}>
-                <p className="text-[32px] font-medium text-foreground leading-none mb-1">{num}</p>
-                <p className="text-[12px] text-muted-foreground">{label}</p>
-              </div>
-            ))}
-          </div>
         </div>
 
         <Card className="py-0 gap-0">