From 844d66f59763a70e794617cc0c0a7a8cc303005b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pawe=C5=82=20Kuna?= <1282324+codecalm@users.noreply.github.com> Date: Wed, 8 Jan 2025 15:27:36 +0100 Subject: [PATCH] Marketing pages plugin (#1332) * marketing site init * classname fix * marketing images * homepage components * gradient bg * Optimised images with calibre/image-actions * generate utilities for marketing pages, negative utilities, new filters, browser component * list separate fixes * marketing pages components * build fix * new marketing pages elements * add typd.js library to animate text * about page, markdown page * testimonials, new components, new marketing pages * unity avatar sizes * fix shape sizes * avatars unify * shape fixes * real estate page * Optimised images with calibre/image-actions * fix small rebase error * Fix mobile designs of features, faq and testimonials * Add marketing pages to the extra's menu * fix hero header design and include as app example design * Fix buttons nog centering on hero * Slightly increase bundlewatch size --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Robert-Jan de Dreu <160743+rjd22@users.noreply.github.com> --- _config.yml | 1 + package.json | 10 +- pnpm-lock.yaml | 8 + src/pages/_data/libs.json | 3 +- src/pages/_data/menu.yml | 4 + src/pages/_data/real-estate.yml | 43 ++++ src/pages/_data/testimonials.yml | 20 ++ src/pages/_includes/cards/company-lookup.html | 30 +-- src/pages/_includes/layout/navbar-logo.html | 4 +- .../marketing/brands/baremetrics.svg | 1 + src/pages/_includes/marketing/brands/cgi.svg | 1 + .../_includes/marketing/brands/docplanner.svg | 1 + src/pages/_includes/marketing/brands/flow.svg | 1 + .../_includes/marketing/brands/fubotv.svg | 1 + .../_includes/marketing/brands/six-flags.svg | 1 + .../_includes/marketing/brands/vocus.svg | 1 + .../_includes/marketing/hero/browser.html | 22 ++ src/pages/_includes/marketing/hero/side.html | 45 ++++ src/pages/_includes/marketing/navbar.html | 44 ++++ .../_includes/marketing/section-divider.html | 11 + .../marketing/sections/companies.html | 17 ++ .../marketing/sections/counters.html | 33 +++ .../_includes/marketing/sections/cta.html | 10 + .../_includes/marketing/sections/faq-2.html | 33 +++ .../_includes/marketing/sections/faq.html | 40 ++++ .../marketing/sections/features-2.html | 56 +++++ .../marketing/sections/features-3.html | 56 +++++ .../marketing/sections/features.html | 22 ++ .../marketing/sections/pricing-banner.html | 38 ++++ .../_includes/marketing/sections/pricing.html | 82 +++++++ .../marketing/sections/subscribe.html | 19 ++ .../marketing/sections/testimonials.html | 43 ++++ src/pages/_includes/ui/marketing/browser.html | 21 ++ src/pages/_includes/ui/responsive-image.html | 5 + src/pages/_includes/ui/shape.html | 3 + src/pages/_includes/ui/typed.html | 19 ++ src/pages/_layouts/base.html | 2 +- src/pages/_layouts/marketing.html | 164 ++++++++++++++ src/pages/_plugins/jekyll-filters.rb | 4 + src/pages/marketing/about.html | 44 ++++ src/pages/marketing/hero.html | 25 +++ src/pages/marketing/index.html | 24 ++ src/pages/marketing/pricing.html | 16 ++ src/pages/marketing/real-estate.html | 59 +++++ src/pages/marketing/testimonials.html | 13 ++ src/pages/marketing/text.html | 42 ++++ src/scss/_utilities-marketing.scss | 209 ++++++++++++++++++ src/scss/_utilities.scss | 9 - src/scss/_variables-marketing.scss | 0 src/scss/_variables.scss | 77 +++++-- src/scss/layout/_animations.scss | 3 +- src/scss/layout/_navbar.scss | 1 - src/scss/marketing/_browser.scss | 67 ++++++ src/scss/marketing/_core.scss | 8 + src/scss/marketing/_filters.scss | 0 src/scss/marketing/_hero.scss | 69 ++++++ src/scss/marketing/_pricing.scss | 111 ++++++++++ src/scss/marketing/_sections.scss | 124 +++++++++++ src/scss/marketing/_shape.scss | 31 +++ src/scss/mixins/_mixins.scss | 4 +- src/scss/tabler-marketing.scss | 13 ++ src/scss/tabler-vendors.scss | 1 + src/scss/ui/_buttons.scss | 14 +- src/scss/ui/_images.scss | 4 + src/scss/ui/_lists.scss | 26 +-- src/scss/vendor/_typed.scss | 4 + src/static/logo.svg | 5 + .../photo-1494526585095-c41746248156.jpg | Bin 0 -> 131317 bytes .../photo-1512917774080-9991f1c4c750.jpg | Bin 0 -> 139685 bytes .../photo-1558036117-15d82a90b9b1.jpg | Bin 0 -> 148438 bytes .../photo-1564013799919-ab600027ffc6.jpg | Bin 0 -> 409532 bytes .../photo-1580587771525-78b9dba3b914.jpg | Bin 0 -> 148570 bytes .../photo-1592595896551-12b371d546d5.jpg | Bin 0 -> 173903 bytes src/static/marketing/preview.png | Bin 0 -> 138409 bytes src/static/marketing/preview@2x.png | Bin 0 -> 361760 bytes 75 files changed, 1844 insertions(+), 78 deletions(-) create mode 100644 src/pages/_data/real-estate.yml create mode 100644 src/pages/_data/testimonials.yml create mode 100644 src/pages/_includes/marketing/brands/baremetrics.svg create mode 100644 src/pages/_includes/marketing/brands/cgi.svg create mode 100644 src/pages/_includes/marketing/brands/docplanner.svg create mode 100644 src/pages/_includes/marketing/brands/flow.svg create mode 100644 src/pages/_includes/marketing/brands/fubotv.svg create mode 100644 src/pages/_includes/marketing/brands/six-flags.svg create mode 100644 src/pages/_includes/marketing/brands/vocus.svg create mode 100644 src/pages/_includes/marketing/hero/browser.html create mode 100644 src/pages/_includes/marketing/hero/side.html create mode 100644 src/pages/_includes/marketing/navbar.html create mode 100644 src/pages/_includes/marketing/section-divider.html create mode 100644 src/pages/_includes/marketing/sections/companies.html create mode 100644 src/pages/_includes/marketing/sections/counters.html create mode 100644 src/pages/_includes/marketing/sections/cta.html create mode 100644 src/pages/_includes/marketing/sections/faq-2.html create mode 100644 src/pages/_includes/marketing/sections/faq.html create mode 100644 src/pages/_includes/marketing/sections/features-2.html create mode 100644 src/pages/_includes/marketing/sections/features-3.html create mode 100644 src/pages/_includes/marketing/sections/features.html create mode 100644 src/pages/_includes/marketing/sections/pricing-banner.html create mode 100644 src/pages/_includes/marketing/sections/pricing.html create mode 100644 src/pages/_includes/marketing/sections/subscribe.html create mode 100644 src/pages/_includes/marketing/sections/testimonials.html create mode 100644 src/pages/_includes/ui/marketing/browser.html create mode 100644 src/pages/_includes/ui/responsive-image.html create mode 100644 src/pages/_includes/ui/shape.html create mode 100644 src/pages/_includes/ui/typed.html create mode 100644 src/pages/_layouts/marketing.html create mode 100644 src/pages/marketing/about.html create mode 100644 src/pages/marketing/hero.html create mode 100644 src/pages/marketing/index.html create mode 100644 src/pages/marketing/pricing.html create mode 100644 src/pages/marketing/real-estate.html create mode 100644 src/pages/marketing/testimonials.html create mode 100644 src/pages/marketing/text.html create mode 100644 src/scss/_utilities-marketing.scss create mode 100644 src/scss/_variables-marketing.scss create mode 100644 src/scss/marketing/_browser.scss create mode 100644 src/scss/marketing/_core.scss create mode 100644 src/scss/marketing/_filters.scss create mode 100644 src/scss/marketing/_hero.scss create mode 100644 src/scss/marketing/_pricing.scss create mode 100644 src/scss/marketing/_sections.scss create mode 100644 src/scss/marketing/_shape.scss create mode 100644 src/scss/tabler-marketing.scss create mode 100644 src/scss/vendor/_typed.scss create mode 100644 src/static/marketing/photo-1494526585095-c41746248156.jpg create mode 100644 src/static/marketing/photo-1512917774080-9991f1c4c750.jpg create mode 100644 src/static/marketing/photo-1558036117-15d82a90b9b1.jpg create mode 100644 src/static/marketing/photo-1564013799919-ab600027ffc6.jpg create mode 100644 src/static/marketing/photo-1580587771525-78b9dba3b914.jpg create mode 100644 src/static/marketing/photo-1592595896551-12b371d546d5.jpg create mode 100644 src/static/marketing/preview.png create mode 100644 src/static/marketing/preview@2x.png diff --git a/_config.yml b/_config.yml index a30e83902..7004ed1cb 100644 --- a/_config.yml +++ b/_config.yml @@ -48,6 +48,7 @@ tabler-css-plugins: - tabler-socials - tabler-payments - tabler-vendors + - tabler-marketing exclude: - .jekyll-cache diff --git a/package.json b/package.json index 096db5f2b..02cdea42a 100644 --- a/package.json +++ b/package.json @@ -106,11 +106,11 @@ }, { "path": "./dist/css/tabler-vendors.css", - "maxSize": "7 kB" + "maxSize": "7.5 kB" }, { "path": "./dist/css/tabler-vendors.min.css", - "maxSize": "6 kB" + "maxSize": "6.5 kB" }, { "path": "./dist/js/tabler.js", @@ -166,6 +166,7 @@ "gulp-terser": "^2.1.0", "imageoptim-cli": "^3.1.9", "imask": "^7.6.1", + "js-beautify": "^1.15.1", "jsvectormap": "^1.6.0", "list.js": "^2.3.1", "litepicker": "^2.0.12", @@ -173,7 +174,6 @@ "plyr": "^3.7.8", "postcss": "^8.4.49", "prettier": "^2.8.8", - "js-beautify": "^1.15.1", "release-it": "^15.11.0", "request": "^2.88.2", "rollup": "2.79.2", @@ -183,6 +183,7 @@ "star-rating.js": "^4.3.1", "tinymce": "^7.5.1", "tom-select": "^2.4.1", + "typed.js": "^2.1.0", "vinyl-buffer": "^1.0.1", "vinyl-source-stream": "^2.0.0", "yaml": "^2.6.1", @@ -211,7 +212,8 @@ "plyr": "^3.7.8", "star-rating.js": "^4.3.0", "tinymce": "^6.4.2 || ^7.0.0", - "tom-select": "^2.2.2" + "tom-select": "^2.2.2", + "typed.js": "^2.1.0" }, "peerDependenciesMeta": { "@melloware/coloris": { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 07ec047d1..664716ee8 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -177,6 +177,9 @@ importers: tom-select: specifier: ^2.4.1 version: 2.4.1 + typed.js: + specifier: ^2.1.0 + version: 2.1.0 vinyl-buffer: specifier: ^1.0.1 version: 1.0.1 @@ -4519,6 +4522,9 @@ packages: typed-array-length@1.0.4: resolution: {integrity: sha512-KjZypGq+I/H7HI5HlOoGHkWUUGq+Q0TPhQurLbyrVrvnKTBgzLhIJ7j6J/XTQOi0d1RjyZ0wdas8bKs2p0x3Ng==} + typed.js@2.1.0: + resolution: {integrity: sha512-bDuXEf7YcaKN4g08NMTUM6G90XU25CK3bh6U0THC/Mod/QPKlEt9g/EjvbYB8x2Qwr2p6J6I3NrsoYaVnY6wsQ==} + typedarray-to-buffer@3.1.5: resolution: {integrity: sha512-zdu8XMNEDepKKR+XYOXAVPtWui0ly0NtohUscw+UmaHiAWT8hrV1rr//H6V+0DvJ3OQ19S979M0laLfX8rm82Q==} @@ -9817,6 +9823,8 @@ snapshots: for-each: 0.3.3 is-typed-array: 1.1.10 + typed.js@2.1.0: {} + typedarray-to-buffer@3.1.5: dependencies: is-typedarray: 1.0.0 diff --git a/src/pages/_data/libs.json b/src/pages/_data/libs.json index 1ec170fe5..5dd874377 100644 --- a/src/pages/_data/libs.json +++ b/src/pages/_data/libs.json @@ -24,7 +24,8 @@ "plyr": "plyr/dist/plyr.min.js", "dropzone": "dropzone/dist/dropzone-min.js", "star-rating.js": "star-rating.js/dist/star-rating.min.js", - "coloris.js": "@melloware/coloris/dist/umd/coloris.min.js" + "coloris.js": "@melloware/coloris/dist/umd/coloris.min.js", + "typed.js": "typed.js/dist/typed.umd.js" }, "css": { "mapbox": "https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css", diff --git a/src/pages/_data/menu.yml b/src/pages/_data/menu.yml index 58dd7df2f..b2f4542ac 100644 --- a/src/pages/_data/menu.yml +++ b/src/pages/_data/menu.yml @@ -233,6 +233,10 @@ extra: title: Logs url: logs.html badge: New + marketing: + title: Marketing + url: marketing.html + badge: New music: title: Music url: music.html diff --git a/src/pages/_data/real-estate.yml b/src/pages/_data/real-estate.yml new file mode 100644 index 000000000..6cfebe0f8 --- /dev/null +++ b/src/pages/_data/real-estate.yml @@ -0,0 +1,43 @@ + + +- name: Cozy Cottage + address: 123 Main Street + baths: 2 + bedrooms: 3 + image: photo-1558036117-15d82a90b9b1.jpg + price: $250,000 + +- name: Modern Townhouse + address: 456 Elm Avenue + baths: 3 + bedrooms: 4 + image: photo-1494526585095-c41746248156.jpg + price: $450,000 + +- name: Spacious Villa + address: 789 Oak Drive + baths: 5 + bedrooms: 6 + image: photo-1512917774080-9991f1c4c750.jpg + price: $1,200,000 + +- name: Rustic Farmhouse + address: 321 Pine Lane + baths: 2 + bedrooms: 2 + image: photo-1564013799919-ab600027ffc6.jpg + price: $350,000 + +- name: Beachfront Condo + address: 567 Sandy Beach Road + baths: 2 + bedrooms: 1 + image: photo-1580587771525-78b9dba3b914.jpg + price: $500,000 + +- name: Luxury Penthouse + address: 890 Highrise Avenue + baths: 4 + bedrooms: 3 + image: photo-1592595896551-12b371d546d5.jpg + price: $2,000,000 \ No newline at end of file diff --git a/src/pages/_data/testimonials.yml b/src/pages/_data/testimonials.yml new file mode 100644 index 000000000..771c6f8b1 --- /dev/null +++ b/src/pages/_data/testimonials.yml @@ -0,0 +1,20 @@ +- "Ever since I started using Tabler, my HTML designing process has been significantly smoother. Its intuitive interface is a breath of fresh air!" +- "I'm beyond impressed with Tabler. This UI kit has transformed my workflow for the better. It's easy to use, streamlined, and remarkably efficient." +- "Tabler's feature-rich package has drastically improved my website design process. It's an absolute game-changer in the UI kit landscape." +- "Having used many UI kits in the past, I can confidently say that Tabler stands out. The level of customization it offers is unparalleled." +- "What I love about Tabler is its sleek design and ease of use. It's really simplified my HTML designing work. Five stars from me!" +- "I'd recommend Tabler to anyone, whether they're a seasoned pro or a beginner in HTML design. Its versatility and user-friendly nature make it a cut above the rest." +- "Navigating through Tabler has been a breeze! Its intuitive layout helps me save time and focus more on the creative aspect of my work." +- "With Tabler, designing HTML has never been more straightforward. The kit's sleek features and functionalities have taken my design work to new heights." +- "Tabler has revolutionized the way I approach HTML design. Its array of tools and efficient interface make it a must-have for any designer." +- "I'm truly amazed by Tabler's capabilities. It's not just an HTML UI kit, it's a design powerhouse that has made my work a lot more efficient and enjoyable." +- "As a web developer, Tabler has revolutionized my workflow. The HTML UI kit is exceptionally well-structured, making my projects much more efficient and visually appealing." +- "Tabler has transformed the way I approach web design. It's intuitive, easy to use, and has saved me countless hours of coding from scratch. A real game-changer!" +- "The breadth of design options that Tabler provides is astounding. It has added a whole new level of professionalism to my websites and made my job a lot easier." +- "I've been in the web development industry for years and I must say, Tabler is one of the best HTML UI kits I've come across. It's user-friendly and allows for a high degree of customization." +- "Since I've started using Tabler, I've noticed a significant improvement in my work. It's streamlined, efficient, and helps me produce better results for my clients." +- "Using Tabler has been a fantastic experience. The number of components it offers has allowed me to design more efficiently, and its consistent updates ensure that it always stays ahead of the curve." +- "Tabler is a web designer's dream come true. The HTML UI kit offers so many features and functionalities that make my design process more streamlined and efficient." +- "I cannot recommend Tabler enough! This HTML UI kit is a must-have for any web developer looking to level up their design game." +- "From a beginner's perspective, Tabler has been a lifesaver. It has enabled me to create professional-quality websites without needing advanced coding skills." +- "Tabler offers the perfect balance of simplicity and sophistication. It has greatly improved my workflow and I can't imagine working on web development projects without it." \ No newline at end of file diff --git a/src/pages/_includes/cards/company-lookup.html b/src/pages/_includes/cards/company-lookup.html index c3c277beb..7e9889fcd 100644 --- a/src/pages/_includes/cards/company-lookup.html +++ b/src/pages/_includes/cards/company-lookup.html @@ -113,14 +113,14 @@