tech-masters/about-us
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

hero: apply some carve style to the hero section

Browse Source
This commit is contained in:
Mohammed Al-yaseen
2025-04-06 21:34:20 +03:00
parent fbd966a3fd
commit 2cec30d560
1 changed files with 31 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/app/components/Hero/HeroSection.module.css
View File

@@ -1,3 +1,5 @@
/* File: components/HeroSection.module.css - Add this to your existing CSS */
.heroSection { .heroSection {
position: relative; position: relative;
height: 100vh; height: 100vh;
@@ -11,6 +13,35 @@
padding: 0 20px; 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 { .heroContent {
position: relative; position: relative;
z-index: 2; z-index: 2;
@@ -106,4 +137,3 @@
margin: 0 auto; margin: 0 auto;
} }
} }