11.hero {
2- background : linear-gradient (135deg , # 667eea 0% , # 764ba2 100% );
2+ background : linear-gradient (135deg , # 10b981 0% , # 047857 100% );
33 color : white;
4- padding : 6 rem 0 ;
4+ padding : 4 rem 0 6 rem ;
55 text-align : center;
6+ position : relative;
7+ overflow : visible;
8+ }
9+
10+
11+
12+ .hero-banner-container {
13+ margin-top : 0 ;
14+ margin-bottom : 3rem ;
15+ position : relative;
16+ z-index : 10 ;
17+ padding : 10px ;
18+ background : rgba (255 , 255 , 255 , 0.1 );
19+ border-radius : 16px ;
20+ backdrop-filter : blur (10px );
21+ border : 1px solid rgba (255 , 255 , 255 , 0.2 );
22+ display : inline-block;
23+ box-shadow : 0 20px 40px rgba (0 , 0 , 0 , 0.2 );
24+ }
25+
26+ .hero-banner {
27+ max-width : 100% ;
28+ border-radius : 12px ;
29+ display : block;
30+ box-shadow : 0 10px 30px rgba (0 , 0 , 0 , 0.3 );
631}
732
833.hero-content {
9- max-width : 800 px ;
34+ max-width : 900 px ;
1035 margin : 0 auto;
1136}
1237
1338.hero-title {
14- font-size : 4rem ;
15- margin-bottom : 1rem ;
16- font-weight : 700 ;
17- text-shadow : 2px 2px 4px rgba (0 , 0 , 0 , 0.2 );
39+ display : none;
1840}
1941
2042.hero-subtitle {
21- font-size : 1.5rem ;
22- margin-bottom : 1rem ;
23- font-weight : 500 ;
43+ display : none;
2444}
2545
2646.hero-description {
27- font-size : 1.1rem ;
28- margin-bottom : 2rem ;
29- opacity : 0.9 ;
47+ display : none;
3048}
3149
3250.hero-buttons {
3351 display : flex;
3452 gap : 1rem ;
3553 justify-content : center;
3654 flex-wrap : wrap;
55+ position : relative;
56+ z-index : 11 ;
3757}
3858
3959.hero-buttons .btn-primary {
7696
7797.btn-primary {
7898 background-color : white;
79- color : # 667eea !important ;
99+ color : # 10b981 !important ;
80100 box-shadow : 0 4px 12px rgba (0 , 0 , 0 , 0.15 );
81101}
82102
83103.btn-primary : hover {
84104 transform : translateY (-2px );
85105 box-shadow : 0 6px 20px rgba (0 , 0 , 0 , 0.25 );
86106 text-decoration : none !important ;
87- color : # 5570d6 !important ;
88- background-color : # f8f9ff ;
107+ color : # 047857 !important ;
108+ background-color : # f0fdf4 ;
89109}
90110
91111.btn-secondary {
96116
97117.btn-secondary : hover {
98118 background-color : white;
99- color : # 667eea ;
119+ color : # 10b981 ;
100120 text-decoration : none;
101121}
102122
118138}
119139
120140.features-preview {
121- padding : 5rem 0 ;
141+ padding : 12rem 0 5rem ;
142+ /* Increased top padding to clear the banner */
122143 background-color : var (--bg-color );
123144}
124145
200221
201222.cta {
202223 padding : 5rem 0 ;
203- background : linear-gradient (135deg , # 667eea 0% , # 764ba2 100% );
224+ background : linear-gradient (135deg , # 10b981 0% , # 047857 100% );
204225 color : white;
205226 text-align : center;
206227}
224245 .hero-title {
225246 font-size : 2.5rem ;
226247 }
227-
248+
228249 .hero-subtitle {
229250 font-size : 1.2rem ;
230251 }
231-
252+
232253 .section-title {
233254 font-size : 2rem ;
234255 }
235-
256+
236257 .features-grid ,
237258 .generators-grid {
238259 grid-template-columns : 1fr ;
239260 }
240- }
261+ }
0 commit comments