1- import  React  from  'react' ; 
2- import  {  MDBBtn ,  MDBContainer ,  MDBIcon  }  from  'mdb-react-ui-kit' ; 
1+ import  React  from  "react" ; 
2+ import  {  MDBBtn ,  MDBContainer  }  from  "mdb-react-ui-kit" ; 
3+ 
34function  App ( )  { 
45  return  ( 
5-     < MDBContainer  fluid > 
6-       < div 
7-         className = 'd-flex justify-content-center align-items-center' 
8-         style = { {   height :  '100vh'   } } 
9-       > 
10-         < div   className = 'text-center' > 
11-            < img 
12-              className = 'mb-4' 
13-              src = 'https://mdbootstrap.com/img/logo/mdb-transparent-250px.png' 
14-              style = { {   width :  250 ,   height :  90   } } 
15-           /> 
16-           < h5   className = 'mb-3' > 
17-             Thank you for using our product. We're glad you're with us. 
18-            </ h5 > 
19-            < p   className = 'mb-3' > MDB Team </ p > 
20-            < MDBBtn 
21-              tag = 'a' 
22-              href = 'https://mdbootstrap.com/docs/standard/getting-started/' 
23-             target = '_blank' 
24-             role = 'button' 
6+     < MDBContainer  className = "my-5 py-5" > 
7+       < section   className = "text-center" > 
8+         < h1   className = "mb-0 text-black" > 
9+           Black November { " " } 
10+            < span   className = "text-danger fw-bold" > Waiting List </ span > 
11+         </  h1 > 
12+         < hr   className = "my-5"   /> 
13+         < p   className = "text-black lead" > 
14+           All offers will be { " " } 
15+           < span   className = "text-danger fw-bold" > limited </ span > . Don't lose your 
16+           chance, be the  < span   className = "text-danger fw-bold" > first </ span >  to 
17+           get notified. 
18+         </ p > 
19+       </ section > 
20+ 
21+       < section   className = "my-5" > 
22+         < div   className = "bg-dark text-white text-center text-xl-start rounded-6" > 
23+           < div 
24+             className = "container px-4" 
25+             style = { {   paddingTop :  "5rem" ,   paddingBottom :  "5rem"   } } 
2526          > 
26-             Start MDB tutorial
27-           </ MDBBtn > 
28-           < p  className = "mt-4" > < a  href = "https://mdbootstrap.com/sale/free/" > < MDBIcon  far  icon = 'surprise'  size = 'lg'  />  Free users
29-             buy cheaper .. </ a > </ p > 
27+             < div  className = "row mx-xl-1 d-flex justify-content-center justify-xl-content-start align-items-center" > 
28+               < div  className = "col-md-10 col-lg-7 col-xl-7" > 
29+                 < h2  className = "fs-1"  style = { {  fontWeight : 900  } } > 
30+                   Join the waiting list{ " " } 
31+                   < span  className = "text-danger fw-bold" > NOW</ span > 
32+                 </ h2 > 
33+                 < p  className = "lead fw-normal mb-4 pb-md-1 pb-xl-0 mb-xl-0" > 
34+                   You will only receive emails related to the Black November
35+                   promotions and after the promotion is over, you will be
36+                   unsubscribed. We won't spam you.
37+                 </ p > 
38+               </ div > 
39+               < div  className = "col-md-10 col-lg-7 col-xl-5" > 
40+                 < div  className = "d-md-flex mb-3 mb-md-2 ms-xl-4" > 
41+                   < div  className = "flex-fill me-md-1 mb-3 mb-md-0" > 
42+                     < form 
43+                       action = "https://app.convertkit.com/forms/2663020/subscriptions" 
44+                       className = "seva-form formkit-form" 
45+                       method = "post" 
46+                       data-sv-form = "2663020" 
47+                       data-uid = "30443eba65" 
48+                       data-format = "inline" 
49+                       data-version = "5" 
50+                       data-options = '{"settings":{"after_subscribe":{"action":"message","success_message":"Success! Now check your email to confirm your subscription.","redirect_url":"https://mdbootstrap.com/confirm/"},"analytics":{"google":null,"facebook":null,"segment":null,"pinterest":null,"sparkloop":null,"googletagmanager":null},"modal":{"trigger":"timer","scroll_percentage":null,"timer":5,"devices":"all","show_once_every":15},"powered_by":{"show":false,"url":"https://convertkit.com?utm_campaign=poweredby&utm_content=form&utm_medium=referral&utm_source=dynamic"},"recaptcha":{"enabled":true},"return_visitor":{"action":"show","custom_content":""},"slide_in":{"display_in":"bottom_right","trigger":"timer","scroll_percentage":null,"timer":5,"devices":"all","show_once_every":15},"sticky_bar":{"display_in":"top","trigger":"timer","scroll_percentage":null,"timer":5,"devices":"all","show_once_every":15}},"version":"5"}' 
51+                     > 
52+                       < ul 
53+                         className = "text-danger fw-bold" 
54+                         data-element = "errors" 
55+                         data-group = "alert" 
56+                       > </ ul > 
57+ 
58+                       < div 
59+                         data-element = "fields" 
60+                         data-stacked = "false" 
61+                         className = "d-flex d-inline-block justify-content-center" 
62+                       > 
63+                         < div  className = "form-outline form-white w-100" > 
64+                           < input 
65+                             type = "text" 
66+                             id = "form1" 
67+                             name = "email_address" 
68+                             required = "" 
69+                             className = "form-control form-control-lg" 
70+                           /> 
71+                           < label 
72+                             className = "form-label" 
73+                             htmlFor = "form1" 
74+                             style = { {  marginLeft : "0px"  } } 
75+                           > 
76+                             Your email address
77+                           </ label > 
78+                           < div  className = "form-notch" > 
79+                             < div 
80+                               className = "form-notch-leading" 
81+                               style = { {  width : "9px"  } } 
82+                             > </ div > 
83+                             < div 
84+                               className = "form-notch-middle" 
85+                               style = { {  width : "116.8px"  } } 
86+                             > </ div > 
87+                             < div  className = "form-notch-trailing" > </ div > 
88+                           </ div > 
89+                         </ div > 
90+ 
91+                         < button 
92+                           className = "btn btn-danger ms-2" 
93+                           data-element = "submit" 
94+                         > 
95+                           JOIN
96+                         </ button > 
97+                       </ div > 
98+                     </ form > 
99+                   </ div > 
100+                 </ div > 
101+               </ div > 
102+             </ div > 
103+           </ div > 
30104        </ div > 
31-       </ div > 
105+         < p  className = "text-muted text-center" > 
106+           < small > 
107+             By subscribing you agree to receive Black November notifications
108+             from the data administrator StartupFlow s.c. Kijowska 7, Warsaw.
109+             < a 
110+               href = "https://mdbootstrap.com/general/privacy-policy/" 
111+               className = "text-decoration-underline text-reset" 
112+             > 
113+               Privacy Policy
114+             </ a > 
115+             .
116+           </ small > 
117+         </ p > 
118+       </ section > 
119+ 
120+       < section  className = "my-5 pt-5" > 
121+         < p  className = "lead text-center" > 
122+           Explore products that will be discounted:
123+         </ p > 
124+ 
125+         < div  className = "row" > 
126+           < div  className = "col-md-3" > 
127+             < div  className = "card shadow-2-strong" > 
128+               < div 
129+                 className = "bg-image hover-overlay ripple" 
130+                 data-mdb-ripple-color = "light" 
131+               > 
132+                 < img 
133+                   src = "https://v1.mdbootstrap.com/wp-content/uploads/2021/10/bootstrap-standard.webp" 
134+                   className = "img-fluid" 
135+                 /> 
136+                 < a 
137+                   href = "https://mdbootstrap.com/docs/standard/pro/" 
138+                   target = "_blank" 
139+                 > 
140+                   < div 
141+                     className = "mask" 
142+                     style = { {  backgroundColor : "rgba(251, 251, 251, 0.15)"  } } 
143+                   > </ div > 
144+                 </ a > 
145+               </ div > 
146+ 
147+               < div  className = "card-body" > 
148+                 < h5  className = "card-title" > MDB Standard PRO</ h5 > 
149+                 < p  className = "card-text" > 
150+                   Components, templates, plugins, premium support and much more
151+                   for the < strong > latest Bootstrap v5 as well as v4</ strong > .
152+                 </ p > 
153+                 < div  className = "text-end" > 
154+                   < a 
155+                     href = "https://mdbootstrap.com/docs/standard/pro/" 
156+                     type = "button" 
157+                     className = "btn btn-sm btn-link text-muted" 
158+                     target = "_blank" 
159+                   > 
160+                     View product < i  className = "fas fa-external-link-alt" > </ i > 
161+                   </ a > 
162+                 </ div > 
163+               </ div > 
164+             </ div > 
165+           </ div > 
166+ 
167+           < div  className = "col-md-3" > 
168+             < div  className = "card shadow-2-strong" > 
169+               < div 
170+                 className = "bg-image hover-overlay ripple" 
171+                 data-mdb-ripple-color = "light" 
172+               > 
173+                 < img 
174+                   src = "https://v1.mdbootstrap.com/wp-content/uploads/2021/10/angular.webp" 
175+                   className = "img-fluid" 
176+                 /> 
177+                 < a 
178+                   href = "https://mdbootstrap.com/docs/b5/angular/pro/" 
179+                   target = "_blank" 
180+                 > 
181+                   < div 
182+                     className = "mask" 
183+                     style = { {  backgroundColor : "rgba(251, 251, 251, 0.15)"  } } 
184+                   > </ div > 
185+                 </ a > 
186+               </ div > 
187+ 
188+               < div  className = "card-body" > 
189+                 < h5  className = "card-title" > MDB Angular PRO</ h5 > 
190+                 < p  className = "card-text" > 
191+                   Components, templates, plugins, premium support and much more
192+                   for the < strong > latest Bootstrap v5 as well as v4</ strong > .
193+                 </ p > 
194+                 < div  className = "text-end" > 
195+                   < a 
196+                     href = "https://mdbootstrap.com/docs/b5/angular/pro/" 
197+                     type = "button" 
198+                     className = "btn btn-sm btn-link text-muted" 
199+                     target = "_blank" 
200+                   > 
201+                     View product < i  className = "fas fa-external-link-alt" > </ i > 
202+                   </ a > 
203+                 </ div > 
204+               </ div > 
205+             </ div > 
206+           </ div > 
207+ 
208+           < div  className = "col-md-3" > 
209+             < div  className = "card shadow-2-strong" > 
210+               < div 
211+                 className = "bg-image hover-overlay ripple" 
212+                 data-mdb-ripple-color = "light" 
213+               > 
214+                 < img 
215+                   src = "https://v1.mdbootstrap.com/wp-content/uploads/2021/10/react.webp" 
216+                   className = "img-fluid" 
217+                 /> 
218+                 < a 
219+                   href = "https://mdbootstrap.com/docs/b5/react/pro/" 
220+                   target = "_blank" 
221+                 > 
222+                   < div 
223+                     className = "mask" 
224+                     style = { {  backgroundColor : "rgba(251, 251, 251, 0.15)"  } } 
225+                   > </ div > 
226+                 </ a > 
227+               </ div > 
228+ 
229+               < div  className = "card-body" > 
230+                 < h5  className = "card-title" > MDB React PRO</ h5 > 
231+                 < p  className = "card-text" > 
232+                   Components, templates, plugins, premium support and much more
233+                   for the < strong > latest Bootstrap v5 as well as v4</ strong > .
234+                 </ p > 
235+                 < div  className = "text-end" > 
236+                   < a 
237+                     href = "https://mdbootstrap.com/docs/b5/react/pro/" 
238+                     type = "button" 
239+                     className = "btn btn-sm btn-link text-muted" 
240+                     target = "_blank" 
241+                   > 
242+                     View product < i  className = "fas fa-external-link-alt" > </ i > 
243+                   </ a > 
244+                 </ div > 
245+               </ div > 
246+             </ div > 
247+           </ div > 
248+ 
249+           < div  className = "col-md-3" > 
250+             < div  className = "card shadow-2-strong" > 
251+               < div 
252+                 className = "bg-image hover-overlay ripple" 
253+                 data-mdb-ripple-color = "light" 
254+               > 
255+                 < img 
256+                   src = "https://v1.mdbootstrap.com/wp-content/uploads/2021/10/vue.webp" 
257+                   className = "img-fluid" 
258+                 /> 
259+                 < a  href = "https://mdbootstrap.com/docs/b5/vue/pro/"  target = "_blank" > 
260+                   < div 
261+                     className = "mask" 
262+                     style = { {  backgroundColor : "rgba(251, 251, 251, 0.15)"  } } 
263+                   > </ div > 
264+                 </ a > 
265+               </ div > 
266+ 
267+               < div  className = "card-body" > 
268+                 < h5  className = "card-title" > MDB Vue PRO</ h5 > 
269+                 < p  className = "card-text" > 
270+                   Components, templates, plugins, premium support and much more
271+                   for the < strong > latest Bootstrap v5 as well as v4</ strong > .
272+                 </ p > 
273+                 < div  className = "text-end" > 
274+                   < a 
275+                     href = "https://mdbootstrap.com/docs/b5/vue/pro/" 
276+                     type = "button" 
277+                     className = "btn btn-sm btn-link text-muted" 
278+                     target = "_blank" 
279+                   > 
280+                     View product < i  className = "fas fa-external-link-alt" > </ i > 
281+                   </ a > 
282+                 </ div > 
283+               </ div > 
284+             </ div > 
285+           </ div > 
286+         </ div > 
287+       </ section > 
32288    </ MDBContainer > 
33289  ) ; 
34290} 
35- export  default  App ; 
291+ 
292+ export  default  App ; 
0 commit comments