added opacity hero area to make text easier to read

Vets-Who-Code · Mar 17, 2024 · b45143d · b45143d
1 parent cca55d8
commit b45143d
Showing 1 changed file with 60 additions and 58 deletions.
diff --git a/src/containers/hero/layout-04/index.tsx b/src/containers/hero/layout-04/index.tsx
@@ -41,66 +41,68 @@ const HeroArea = ({
     });
     return (
         <>
-            <div className="hero-area tw-relative tw-pt-[100px] tw-pb-[130px] md:tw-py-[170px] xl:tw-pt-[270px] xl:tw-pb-[248px]">
-                {images?.[0]?.src && (
-                    <div className="tw-absolute tw-inset-0 -tw-z-10">
-                        <img
-                            src={images[0].src}
-                            alt={images[0]?.alt || "bg"}
-                            loading="eager"
-                            className="tw-w-full tw-h-full tw-object-cover"
-                        />
-                    </div>
-                )}
-                <motion.div
-                    className="tw-container tw-text-center"
-                    initial="offscreen"
-                    whileInView="onscreen"
-                    viewport={{ once: true, amount: 0.1 }}
-                    variants={scrollUpVariants}
+<div className="hero-area tw-relative tw-pt-[100px] tw-pb-[130px] md:tw-py-[170px] xl:tw-pt-[270px] xl:tw-pb-[248px]">
+    {images?.[0]?.src && (
+        <div className="tw-absolute tw-inset-0 -tw-z-10">
+            <img
+                src={images[0].src}
+                alt={images[0]?.alt || "bg"}
+                loading="eager"
+                className="tw-w-full tw-h-full tw-object-cover"
+            />
+            <div style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', backgroundColor: 'rgba(9, 31, 64, 0.5)' }}></div>
+        </div>
+    )}
+    <motion.div
+        className="tw-container tw-text-center"
+        initial="offscreen"
+        whileInView="onscreen"
+        viewport={{ once: true, amount: 0.1 }}
+        variants={scrollUpVariants}
+    >
+        {headings?.[0]?.content && (
+            <h1 className="tw-text-[46px] lg:tw-text-[56px] tw-leading-tight tw-font-medium tw-text-white">
+                {headings[0].content}{" "}
+                <span className="tw-text-primary tw-inline-block">
+                    {animatedText}
+                    <Cursor />
+                </span>
+            </h1>
+        )}
+        {texts?.map((text) => (
+            <p
+                key={text.id}
+                className="tw-text-lg tw-font-medium tw-leading-relaxed tw-text-white tw-mb-5 sm:tw-mb-8"
+            >
+                {text.content}
+            </p>
+        ))}
+        <div className="tw-flex tw-items-center tw-justify-center tw-flex-wrap">
+            {buttons?.[0] && (
+                <Button {...buttons[0]} className="tw-m-2.5">
+                    {buttons[0].content}
+                </Button>
+            )}
+            {buttons?.[1] && (
+                <Button
+                    {...buttons[1]}
+                    className="tw-m-2.5"
+                    onClick={() => setOpen(true)}
                 >
-                    {headings?.[0]?.content && (
-                        <h1 className="tw-text-[46px] lg:tw-text-[56px] tw-leading-tight tw-font-medium tw-text-white">
-                            {headings[0].content}{" "}
-                            <span className="tw-text-primary tw-inline-block">
-                                {animatedText}
-                                <Cursor />
-                            </span>
-                        </h1>
-                    )}
-                    {texts?.map((text) => (
-                        <p
-                            key={text.id}
-                            className="tw-text-lg tw-font-medium tw-leading-relaxed tw-text-white tw-mb-5 sm:tw-mb-8"
-                        >
-                            {text.content}
-                        </p>
-                    ))}
-                    <div className="tw-flex tw-items-center tw-justify-center tw-flex-wrap">
-                        {buttons?.[0] && (
-                            <Button {...buttons[0]} className="tw-m-2.5">
-                                {buttons[0].content}
-                            </Button>
-                        )}
-                        {buttons?.[1] && (
-                            <Button
-                                {...buttons[1]}
-                                className="tw-m-2.5"
-                                onClick={() => setOpen(true)}
-                            >
-                                <i
-                                    className={clsx(
-                                        buttons[1]?.icon,
-                                        "tw-mr-4"
-                                    )}
-                                />
-                                {buttons[1].content}
-                            </Button>
+                    <i
+                        className={clsx(
+                            buttons[1]?.icon,
+                            "tw-mr-4"
                         )}
-                    </div>
-                </motion.div>
-                <BottomShape color="tw-fill-light-100" />
-            </div>
+                    />
+                    {buttons[1].content}
+                </Button>
+            )}
+        </div>
+    </motion.div>
+    <BottomShape color="tw-fill-light-100" />
+</div>
+
             {video && (
                 <ModalVideo
                     show={isOpen}