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