page.tsx 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297
  1. import HeroEmails from '@/components/layout/hero/UiEmails';
  2. import CTABannerEmails from '@/components/CTABAnnerEmails';
  3. import Link from '@/components/Link';
  4. import SectionDivider from '@/components/SectionDivider';
  5. import Features from '@/components/Features';
  6. import Shape from '@/components/Shape';
  7. import ResponsiveImage from '@/components/ResponsiveImage';
  8. import React from 'react';
  9. import Slider from '@/components/Slider';
  10. export const metadata = {
  11. title: '54 eye-catching, customizable and responsive email templates',
  12. description: 'Tabler Emails is a set of responsive email templates for marketing, transactional and automated emails.',
  13. };
  14. const EmailsFeatures1 = () => {
  15. return (
  16. <section className="section">
  17. <div className="container">
  18. <div className="row xl:g-7">
  19. <div className="lg:col-6">
  20. <ResponsiveImage
  21. src="/img/tabler-emails/features/emails.png"
  22. width="564"
  23. height="549"
  24. className="mx-auto"
  25. />
  26. </div>
  27. <div className="lg:col-6 d-flex flex-column items-center">
  28. <div className="section-header w-100">
  29. <h4 className="section-title text-center lg:text-left">Promote your brand the right way</h4>
  30. </div>
  31. <div className="space-y-5">
  32. <div data-aos="fade-up" data-aos-delay="0">
  33. <div className="row">
  34. <div className="col-auto">
  35. <Shape size="md" color="primary" icon="target-arrow" />
  36. </div>
  37. <div className="col">
  38. <h3>Achieve your marketing goals</h3>
  39. <p className="text-muted m-0">
  40. Prepare engaging email campaigns and newsletters, keep your recipients up to date with the latest
  41. news, let them know about their order status or send out customer satisfaction surveys. Our set of
  42. emails will help you with all that and much more!
  43. </p>
  44. </div>
  45. </div>
  46. </div>
  47. <div data-aos="fade-up" data-aos-delay="150">
  48. <div className="row">
  49. <div className="col-auto">
  50. <Shape size="md" color="primary" icon="brush" />
  51. </div>
  52. <div className="col">
  53. <h3>Personalization is key</h3>
  54. <p className="text-muted m-0">
  55. Customize the templates to make them suitable for your target group. You can change every element
  56. as you wish, including the background, colors, icons, spacers and images. And if you want to
  57. present your data in an attractive way, make use of advanced reports, charts or progress bars.
  58. </p>
  59. </div>
  60. </div>
  61. </div>
  62. <div data-aos="fade-up" data-aos-delay="300">
  63. <div className="row">
  64. <div className="col-auto">
  65. <Shape size="md" color="primary" icon="device-mobile" />
  66. </div>
  67. <div className="col">
  68. <h3>Great quality with little effort</h3>
  69. <p className="text-muted m-0">
  70. More than 50% of emails today are open on mobile devices, so we’ve made sure our templates look
  71. great on any device and screen size. They are fully responsive and mobile-ready, helping you take
  72. care of great user experience.
  73. </p>
  74. </div>
  75. </div>
  76. </div>
  77. </div>
  78. </div>
  79. </div>
  80. </div>
  81. </section>
  82. );
  83. };
  84. const EmailsFeatures2 = () => {
  85. return (
  86. <section className="section">
  87. <div className="container">
  88. <div className="row xl:g-7">
  89. <div className="lg:col-6 d-flex flex-column items-center">
  90. <div className="section-header w-100">
  91. <h4 className="section-title text-center lg:text-left">
  92. Focus on your brand and we’ll take care of the rest
  93. </h4>
  94. </div>
  95. <div className="space-y-5">
  96. <div data-aos="fade-up" data-aos-delay="0">
  97. <div className="row">
  98. <div className="col-auto">
  99. <Shape size="md" color="primary" icon="brand-bootstrap" />
  100. </div>
  101. <div className="col">
  102. <h3>Bootstrap-inspired design</h3>
  103. <p className="text-muted m-0">
  104. Based on Bootstrap and Material Design principles, our email templates are responsive and meet the
  105. highest quality standards. Thanks to that, you can be sure the layout will look perfect in every
  106. email client and on any device.
  107. </p>
  108. </div>
  109. </div>
  110. </div>
  111. <div data-aos="fade-up" data-aos-delay="150">
  112. <div className="row">
  113. <div className="col-auto">
  114. <Shape size="md" color="primary" icon="layout-dashboard" />
  115. </div>
  116. <div className="col">
  117. <h3>No coding skills needed</h3>
  118. <p className="text-muted m-0">
  119. Our templates are ready-to-use. You don’t need coding skills to prepare eye-catching emails and
  120. boost your brand awareness. Have a basic knowledge of HTML? Design your own email using the
  121. elements from different templates and make it even more customized.
  122. </p>
  123. </div>
  124. </div>
  125. </div>
  126. <div data-aos="fade-up" data-aos-delay="300">
  127. <div className="row">
  128. <div className="col-auto">
  129. <Shape size="md" color="primary" icon="tools" />
  130. </div>
  131. <div className="col">
  132. <h3>Reliable solution</h3>
  133. <p className="text-muted m-0">
  134. Tabler Emails have been tested across more than 90 email clients and many devices. Thanks to that,
  135. instead of worrying about any technical issues, you can focus on making the content of your
  136. message exceptional.
  137. </p>
  138. </div>
  139. </div>
  140. </div>
  141. </div>
  142. </div>
  143. <div className="lg:col-6">
  144. <ResponsiveImage src="/img/tabler-emails/features/stats.png" width="564" height="762" className="mx-auto" />
  145. </div>
  146. </div>
  147. </div>
  148. </section>
  149. );
  150. };
  151. const EmailsGallery = () => {
  152. return (
  153. <div className="section section-light">
  154. <div className="container">
  155. <div className="section-header">
  156. <h2 className="section-title">See what you will get</h2>
  157. <p className="section-description">Browse our selection of emails and see how they look.</p>
  158. </div>
  159. </div>
  160. <div className="expandable expandable-emails" />
  161. <div className="container">
  162. <div className="text-center mt-2">
  163. <Link href="/emails/gallery" className="btn btn-lg">
  164. Browse emails gallery
  165. </Link>
  166. </div>
  167. </div>
  168. </div>
  169. );
  170. };
  171. const EmailsDark = () => {
  172. return (
  173. <section className="section">
  174. <div className="container">
  175. <div className="row xl:g-7 items-center">
  176. <div className="lg:col-6">
  177. <Slider
  178. slides={[
  179. <ResponsiveImage
  180. src="/img/tabler-emails/features/dark.png"
  181. width="564"
  182. height="585"
  183. key="img-1"
  184. className="mx-auto"
  185. />,
  186. <ResponsiveImage
  187. src="/img/tabler-emails/features/dark-light.png"
  188. width="564"
  189. height="585"
  190. key="img-2"
  191. className="mx-auto"
  192. />,
  193. ]}
  194. />
  195. </div>
  196. <div className="lg:col-6">
  197. <div className="section-header text-left">
  198. <h2 className="section-title">Dark mode? No problem!</h2>
  199. <div className="section-description">
  200. <p>
  201. Dark mode is a darker color palette for low-light or nighttime environments. This inverted color
  202. scheme uses light typography, UI elements and icons on a dark background - and is one of the hottest
  203. trends in digital design in recent years. If your subscribers are making a conscious decision to view
  204. Dark Mode emails, it&apos;s best to respect that!
  205. </p>
  206. <p>
  207. Each email in Tabler Emails is available in two color versions: light and dark. It&apos;s up to you
  208. which version suits your branding better!
  209. </p>
  210. </div>
  211. </div>
  212. </div>
  213. </div>
  214. <div className="mt-7">
  215. <CTABannerEmails />
  216. </div>
  217. </div>
  218. </section>
  219. );
  220. };
  221. const EmailsKickItOff = () => {
  222. return (
  223. <section className="section section-sm section-light">
  224. <div className="container">
  225. <div className="row text-center">
  226. <div className="md:col" data-aos="fade-up" data-aos-delay={0}>
  227. <Shape placeholder={1} size="md" className="mb-2" color="primary" />
  228. <div>Choose one of 54 email templates</div>
  229. </div>
  230. <div className="md:col" data-aos="fade-up" data-aos-delay={150}>
  231. <Shape placeholder={2} size="md" className="mb-2" color="primary" />
  232. <div>Add your own content to customize it</div>
  233. </div>
  234. <div className="md:col" data-aos="fade-up" data-aos-delay={300}>
  235. <Shape placeholder={3} size="md" className="mb-2" color="primary" />
  236. <div>Send it using one of the most popular email sending systems</div>
  237. </div>
  238. </div>
  239. {/*<div className="mt-5 text-center">*/}
  240. {/* <a href="#" className="btn btn-primary">Buy now for ${emailsPrice}</a>*/}
  241. {/*</div>*/}
  242. </div>
  243. </section>
  244. );
  245. };
  246. export default function EmailsPage() {
  247. const features = [
  248. {
  249. icon: 'devices',
  250. title: 'Mobile-optimized',
  251. description:
  252. 'Our email templates are fully responsive, so you can be sure they will look great on any device and screen size.',
  253. },
  254. {
  255. icon: 'mailbox',
  256. title: 'Compatible with 90+ email clients',
  257. description:
  258. 'Tested across 90+ email clients and devices, Tabler emails will help you make your email communication professional and reliable.',
  259. },
  260. {
  261. icon: 'palette',
  262. title: 'Unique, minimal design',
  263. description:
  264. 'Draw recipients’ attention with beautiful, minimal email designs based on Bootstrap and Material Design principles.',
  265. },
  266. ];
  267. return (
  268. <>
  269. <HeroEmails />
  270. <section className="section section-sm section-light">
  271. <SectionDivider />
  272. <div className="container">
  273. <Features list={features} />
  274. </div>
  275. </section>
  276. <EmailsFeatures1 />
  277. <EmailsKickItOff />
  278. <EmailsFeatures2 />
  279. <EmailsGallery />
  280. <EmailsDark />
  281. </>
  282. );
  283. }