From c2728da464d425f2c78808b23df286c20464e98a Mon Sep 17 00:00:00 2001
From: Diego Torres <diegotc86@gmail.com>
Date: Fri, 18 Jul 2025 21:18:23 -0500
Subject: [PATCH] fix: refactor background image styling in Home component for
 improved readability

---
 src/routes/home/index.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/routes/home/index.tsx b/src/routes/home/index.tsx
index 8a929fb..5655c4d 100644
--- a/src/routes/home/index.tsx
+++ b/src/routes/home/index.tsx
@@ -58,7 +58,10 @@ export default function Home({ loaderData }: Route.ComponentProps) {
   return (
     <>
       <section
-        className={`text-center bg-cover bg-no-repeat bg-center text-white bg-[linear-gradient(0deg,rgba(0,0,0,0.5)_0%,rgba(0,0,0,0.5)_100%),url('${heroSrc}')]`}
+        className="text-center bg-cover bg-no-repeat bg-center text-white"
+        style={{
+          backgroundImage: `linear-gradient(0deg,rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.5) 100%),url('${heroSrc}')`,
+        }}
       >
         <Container className="pt-32 pb-32 max-w-3xl">
           <h2 className="text-4xl leading-10 font-bold mb-4">