From 2cec30d560e5d63e32749ea9ba9c0be5dd6a6015 Mon Sep 17 00:00:00 2001
From: Mohammed Al-yaseen <mouhamadalyasen3555@gmail.com>
Date: Sun, 6 Apr 2025 21:34:20 +0300
Subject: [PATCH] hero: apply some carve style to the hero section

---
 .../components/Hero/HeroSection.module.css    | 32 ++++++++++++++++++-
 1 file changed, 31 insertions(+), 1 deletion(-)

diff --git a/src/app/components/Hero/HeroSection.module.css b/src/app/components/Hero/HeroSection.module.css
index 9af9845..1085d72 100644
--- a/src/app/components/Hero/HeroSection.module.css
+++ b/src/app/components/Hero/HeroSection.module.css
@@ -1,3 +1,5 @@
+/* File: components/HeroSection.module.css - Add this to your existing CSS */
+
 .heroSection {
   position: relative;
   height: 100vh;
@@ -11,6 +13,35 @@
   padding: 0 20px;
 }
 
+.heroSection::before {
+  content: "";
+  position: absolute;
+  bottom: -10px;
+  left: -5%;
+  width: 110%;
+  height: 80px;
+  background: rgba(255, 255, 255, 0.3);
+  border-radius: 100% 100% 0 0 / 100% 100% 0 0;
+  transform: scaleX(1.3);
+  z-index: 2;
+}
+
+/* Add this new code for the wavy bottom */
+.heroSection::after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 120px;
+  background: #ffffff;
+  border-radius: 100% 100% 0 0 / 100% 100% 0 0;
+  transform: scaleX(1.5);
+  z-index: 3;
+}
+
+/* Keep all your existing styles below */
+
 .heroContent {
   position: relative;
   z-index: 2;
@@ -106,4 +137,3 @@
     margin: 0 auto;
   }
 }
-