diff --git a/src/assets/css/app.scss b/src/assets/css/app.scss index 03b2855e59..6f556189b6 100644 --- a/src/assets/css/app.scss +++ b/src/assets/css/app.scss @@ -57,6 +57,7 @@ @import "components/recent-posts"; @import "components/post-banner"; @import "components/split-content"; +@import "components/split-contact"; @import "components/twios-cards"; @import "components/loader"; @import "components/talk-banner"; @@ -65,6 +66,7 @@ @import "components/startups"; @import "components/scroll-slides"; @import "components/quotes-list"; +@import "components/opensource"; @import "components/blog-cta"; @import "animations/text-animation"; diff --git a/src/assets/css/components/_opensource.scss b/src/assets/css/components/_opensource.scss new file mode 100644 index 0000000000..0464fa78ff --- /dev/null +++ b/src/assets/css/components/_opensource.scss @@ -0,0 +1,68 @@ +.opensource-list { + margin: 5rem 0 10rem; + + @media (min-width: 48em) { + & { + margin: 6.25rem 0; + } + } + + &__title { + margin: 2rem 0 2.5rem; + text-align: center; + + @media (min-width: 48em) { + margin: 3.25rem 0; + } + } + + &__list { + list-style: none; + margin: 0; + padding: 0; + + @media (min-width: 48em) { + & { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 4.25rem 1.5rem; + } + } + + .opensource-list__project { + display: flex; + flex-direction: column; + margin: 5rem 0; + + &-image { + display: flex; + align-items: center; + height: 5rem; + margin-bottom: 0; + + img { + max-height: 100%; + width: auto; + max-width: 10rem; + } + } + + &-text { + h4 { + margin-bottom: 0.25rem; + } + } + + @media (min-width: 48em) { + & { + margin: 0; + } + } + } + } + + &__link { + margin-top: 1.5rem; + } +} + diff --git a/src/assets/css/components/_split-contact.scss b/src/assets/css/components/_split-contact.scss new file mode 100644 index 0000000000..48656fdcff --- /dev/null +++ b/src/assets/css/components/_split-contact.scss @@ -0,0 +1,50 @@ +.split-contact { + margin: 5rem 0 10rem; +} + +.split-contact__subheading { + margin: 2rem 0 2.5rem; +} + +.split-contact__content { + display: flex; + align-items: start; + flex-wrap: wrap; + gap: 3.25rem; +} + +.split-contact__text { + width: 100%; +} + +.split-contact__feature { + width: 100%; + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + flex-wrap: wrap; + gap: 2rem; +} + + +.split-contact__author { + width: 10rem; + height: auto; + clip-path: circle(); +} + +.split-contact__link { + margin-top: 1.5rem; +} + +@media (min-width: 48em) { + .split-contact { + margin: 6.25rem 0; + } + + .split-contact__content { + flex-wrap: nowrap; + gap: 6.25rem; + } +} \ No newline at end of file diff --git a/src/components/content/secondary-feature-ember.njk b/src/components/content/secondary-feature-ember.njk index 98e179660a..91f9666783 100644 --- a/src/components/content/secondary-feature-ember.njk +++ b/src/components/content/secondary-feature-ember.njk @@ -1,7 +1,7 @@ {% from "secondary-feature.njk" import secondaryFeature %} {% set 'content' = { - "text": "We recently have been recognized as an official sponsor of the Ember.js project along with international brands like LinkedIn and Yahoo.", - "linkUrl": "/ember-consulting/", + "text": "We are an official sponsor of the Ember.js project.", + "linkUrl": "https://emberjs.com/sponsors/", "linkText": "Find out more", "image": "/assets/images/logos/ember.svg", "alt": "Ember.js logo", diff --git a/src/components/content/secondary-feature-emberfest.njk b/src/components/content/secondary-feature-emberfest.njk new file mode 100644 index 0000000000..bccd7d137b --- /dev/null +++ b/src/components/content/secondary-feature-emberfest.njk @@ -0,0 +1,10 @@ +{% from "secondary-feature.njk" import secondaryFeature %} +{% set 'content' = { + "text": "We co-organize EmberFest, the European Community Ember Conference.", + "linkUrl": "https://emberfest.eu/", + "linkText": "Find out more", + "image": "/assets/images/ember/emberfest-logo-vertical.png", + "alt": "Emberfest logo", + "loading": "lazy" +} %} +{{ secondaryFeature(content, "secondary-feature-emberfest") }} \ No newline at end of file diff --git a/src/ember-consulting.njk b/src/ember-consulting.njk index 0d1ba50949..fd98cb095c 100644 --- a/src/ember-consulting.njk +++ b/src/ember-consulting.njk @@ -12,7 +12,8 @@ og: {% from "recent-posts.njk" import recentPosts %} {% from "cta-link.njk" import ctaLink %} {% from "color-hero.njk" import colorHero %} -{% from "cta-link.njk" import ctaLink %} +{% from "image-banner-with-text.njk" import imageBannerWithText %} +{% from "scroll-slides.njk" import scrollSlides %}
@@ -22,113 +23,249 @@ og:
{% set imagePath %}/assets/images/logos/ember-white.svg{% endset %} - +

is our expertise

-
We have been recognized as an official sponsor of the Ember.js project along with international brands like LinkedIn and - Yahoo.
+
We are long-time Ember experts and active contributors to the ecosystem. Our team of community leaders makes Mainmatter the foremost Ember consultancy.
-{% set content = { -"title": "We love open source", -"subtitle": "We maintain a number of projects in the ecosystem that are widely adopted in the Ember community." -} %} -{{ textWithList(content, "white") }} +
+
+

Ember & Mainmatter

+

Europe's Leading Ember Team

+
+
+

+ Mainmatter has been an active member of the Ember community since the early days of the framework. Our veteran team has contributed substantially – both to Ember itself on various core teams as well as by creating and maintaining widely adopted packages. If you're working on an Ember application, you're already relying on code our team wrote and patterns we helped establish. We have worked with countless international clients over the years and helped them to succeed with Ember. +

+
+
+ {% include 'content/secondary-feature-ember.njk' %} +
+
+
+
-{% set 'slide_1' = { -"color": "white", -"title": "Ember simple auth", -"text": "Authentication management for Ember.js applications.", -"icon": "/assets/images/ember/ember-simple-auth.svg", -"linkUrl": "https://github.com/mainmatter/ember-simple-auth", -"linkText": "View on github" -} %} +
+
+

EmberFest & Ember Europe

+

Fostering the Community

+
+
+

+ Mainmatter believes open source communities are valuable and we strive for being active community members. Our team regularly speaks at all of the relevant Ember conferences but also other conferences at which we pitch Ember to audiences from the wider frontend world. We've also been co-organizing EmberFest, the European Ember Community Conference for many years and run Ember Europe, a hybrid meetup series, together with our friends from Intercom. +

+
+
+ {% include 'content/secondary-feature-emberfest.njk' %} +
+
+
+
-{% set 'slide_2' = { +{% set logoCompanies = [ + 'Qonto', + 'Trainline', + 'Cardstack', + 'Sage', + 'Auditboard', + 'Timify', + 'Robin Hood', + 'Terminal49', + 'MVB', + 'Generali', + 'Medify', + 'CLARK', + 'Phorest' +] %} +{% set title = 'We are trusted by international companies that bet on Ember.js' %} +{{ logoList(logoCompanies, title) }} + +
+
+ {% image "/assets/images/ember/embroider-initiative-sponsor-logos.png", "Collage of the logos of the Embroider initiative's sponsors with a purple overlay.", '100vw', 'eager', 'color-hero__image', [760, 1440, 1920] %} +
+
+
+

The Embroider Initiative

+
Mainmatter, together with a group of sponsors, is working on an initiative to ship Embroider and secure the ecosystem’s investment in Ember.js.
+ {{ ctaLink("/embroider-initiative/", "Join the Embroider initiative", 'color-hero__link') }} +
+
+
+ +
+
+

Facing Challenges with Ember?

+
+
+

Ember famously enforces a rigid structure and liberates engineers through constraints so they can remain focussed on delivering value for users. Yet, sometimes you get stuck and it can be hard to see the path forwards – be it upgrading an old codebase to modern Ember, adopting Embroider or architecting a new feature. If your team is in a situation like that or you have any other question, reach and one of our ember experts will come back to you.

+ {{ ctaLink("/contact", "Contact us", 'color-hero__link') }} +
+
+ Marco Otte-Witte + Chris Manson + Nick Schot +
+
+ +
+
+ +{% set 'slide_1' = { "color": "purple", -"title": "Ember test selectors", -"text": "Enabling better element selectors in Ember.js tests.", -"icon": "/assets/images/ember/ember-test-selectors.svg", -"linkUrl": "https://github.com/mainmatter/ember-test-selectors", -"linkText": "View on github" +"title": "Custom Development", +"text": "We develop complete apps with Ember so your team can focus on other initiatives. We are Ember experts and in fact have written and establishes important pieces of the Ember ecosystem ourselves. Our team delivers high quality codebases as well as the tooling and infrastructure needed for sustainable maintenance.", +"linkUrl": "/contact/", +"linkClass": "plausible-event-name=Ember+Contact", +"linkText": "Work with us!" } %} -{% set 'slide_3' = { +{% set 'slide_2' = { "color": "black", -"title": "Ember cookies", -"text": "Cookie handling for Ember.js apps - in the browser and FastBoot.", -"icon": "/assets/images/ember/ember-cookies.svg", -"linkUrl": "https://github.com/mainmatter/ember-cookies", -"linkText": "View on github" +"title": "Training and Support", +"text": "Ember is getting easier and easier to adopt but it can appear a bit unfamiliar to people with backgrounds in other frontend technologies. Our trainers are world-class experts who have helped many international companies to build and scale up Ember teams.", +"linkUrl": "/services/workshops/hands-on-ember/", +"linkText": "Check out our workshops!" } %} -{% set 'slide_4' = { -"color": "white", -"title": "Qunit DOM", -"text": "High Level DOM Assertions for QUnit with an expressive API.", -"icon": "/assets/images/ember/qunit-dom.svg", -"linkUrl": "https://github.com/mainmatter/qunit-dom", -"linkText": "View on github" +{% set 'slide_3' = { +"color": "aqua", +"title": "Team augmentation", +"text": "Our experts can merge with your in-house frontend team to ensure the timely delivery of mission-critical projects – be it delivering new initiatives or modernizing codebase without interrupting feature delivery. We’re more than hired hands – we mentor your team throughout the process to help lift productivity long after our collaboration ends.", +"linkUrl": "/contact/", +"linkClass": "plausible-event-name=Ember+Contact", +"linkText": "Work with us!" } %} -{% set slides = [slide_1, slide_2, slide_3, slide_4] %} +{% set slides = [slide_1, slide_2, slide_3] %}
{% for slide in slides %} {% set slideIndex = loop.index %}
+ data-scroll-slide data-background-color="{{ slide.color }}">
-

{{ slide.title }}

-
-

{{ slide.text }}

- {% if slide.linkUrl and slide.linkText %} - {{ ctaLink(slide.linkUrl, slide.linkText, '') }} - {% endif %} -
+ +

{{ slide.text }}

+ {% if slide.linkUrl and slide.linkText %} +
+ {% if slide.linkImage %} +
+ {{ slide.linkImageCaption }} +
+ {% endif %} + + {% if slide.linkImageCaption %} +
+

+ {{ slide.linkImageCaption }} +

+ {{ ctaLink(slide.linkUrl, slide.linkText, '') }} +
+ {% else %} + {{ ctaLink(slide.linkUrl, slide.linkText, '') }} + {% endif %} +
+ {% endif %} +
{% endfor %}
-
-
- {% image "/assets/images/ember/embroider-initiative-sponsor-logos.png", "4 people standing around a table with some printed diagrams on it. 2 people shake hands, one claps their hands.", '100vw', 'eager', 'color-hero__image', [760, 1440, 1920] %} -
-
-
-

The Embroider Initiative

-
Mainmatter, together with a group of sponsors, is working on an initiative to ship Embroider and secure the ecosystem’s investment in Ember.js.
- {{ ctaLink("/embroider-initiative/", "Join the Embroider initiative", 'color-hero__link') }} -
+
+
+

We love Open Source

+
    +
  • +
    + Ember Simple Auth logo +
    +
    +

    Ember Simple Auth

    +

    + Authentication management for Ember.js applications. +

    + {{ ctaLink('http://github.com/mainmatter/ember-simple-auth', 'View on GitHub', 'opensource-list__link') }} +
    +
    • +
  • +
    + Ember Cookies logo +
    +
    +

    Ember Cookies

    +

    + Cookie handling for Ember.js apps - in the browser and FastBoot. +

    + {{ ctaLink('http://github.com/mainmatter/ember-cookies', 'View on GitHub', 'opensource-list__link') }} +
    +
    • +
  • +
    + Ember Test Selectors logo +
    +
    +

    Ember Test Selectors

    +

    + Enabling better element selectors in Ember.js tests. +

    + {{ ctaLink('http://github.com/mainmatter/ember-test-selectors', 'View on GitHub', 'opensource-list__link') }} +
    +
    • +
  • +
    + Qunit Dom logo +
    +
    +

    Qunit Dom

    +

    + High Level DOM Assertions for QUnit with an expressive API. +

    + {{ ctaLink('http://github.com/mainmatter/qunit-dom', 'View on GitHub', 'opensource-list__link') }} +
    +
    • +
  • +
    + Ember Promise Modals logo +
    +
    +

    Ember Promise Modals

    +

    + The easy solution for rendering and handling modals in Ember.js apps. Promised. +

    + {{ ctaLink('https://github.com/mainmatter/ember-promise-modals', 'View on GitHub', 'opensource-list__link') }} +
    +
    • +
@@ -142,49 +279,52 @@ og:
-{{ recentPosts("Latest from our blog on the topic", collections.emberPosts) }} - -{% set 'content' = { -"title": "Conferences and talks", -"subtitle": "Mainmatter engineers have spoken at all major Ember.js conferences and other events in the wider JavaScript community.", -"text": "Ember.js is a project built by an open community, and we are an active member of that community. We run the Ember.js Europe Meetup with our partner Intercom and co-organize EmberFest , the European Ember Community Conference.", -"linkUrl": "/events/", -"linkText": "View our talks and check out our calendar for the next events", -"image": "/assets/images/ember/ember-banner.jpg", -"alt": "Collage of team members speaking at conferences", -"loading": "lazy" -} %} - -
-
-

{{ content.title }}

-
- {% image content.image, content.alt, '100vw', content.loading, 'image-banner-with-text__image', [760, 1440, 1920] %} -
-
- {% if content.subtitle %} -

{{ content.subtitle }}

- {% endif %} - {% if content.text %} -

{{ content.text }}

- {% endif %} -
- - {% image '/assets/images/ember/ember-europe-mascot.jpg', 'Ember Europe logo', '8.25rem', 'lazy', 'expertise__image-ember-1', [264] %} - - - {% image '/assets/images/ember/emberfest-logo.jpg', 'Emberfest logo', '19rem', 'lazy', 'expertise__image-ember-2', [608] %} - -
- {% if content.linkUrl and content.linkText %} - {{ ctaLink(content.linkUrl, content.linkText, 'image-banner-with-text__link') }} - {% endif %} -
+
+
+

Listen to our customers

+
    +
  • +
    + Trainline logo +
    +
    +
    + ”Mainmatter are well known as the Ember.js experts and they absolutely live up to the expectations. They had an immediate as well as significant positive impact on both our velocity and quality of output.” +
    +
    Marc-Antoine Lacroix, + Qonto CPO +
    +
    +
    • +
  • +
    + MVB logo +
    +
    +
    + ”I've had the opportunity to work alongside the Mainmatter team on both their client-facing work for Cardstack and their open source contributions. They are experts in Ember and they are a team that takes good software-development practice seriously.” +
    +
    Ed Faulkner, + Cardstack Lead Developer and member of the Ember.js Steering Committee
    +
    +
    • +
  • +
    + Qonto logo +
    +
    +
    + ”Mainmatter’s team is highly experienced and professional. They not only helped us develop the product but also mentored our internal team and introduced a number of improvements around infrastructure and processes along the way.” +
    +
    Ronald Schild, + Managing Director of MVB +
    +
    +
    • +
-{% set logoCompanies = ['Qonto', 'Trainline', 'Cardstack', 'Sage', 'Auditboard', 'Timify', 'Experteer', 'Robin Hood', 'Terminal49' ] %} -{% set title = 'We are trusted by international companies that bet on Ember.js' %} -{{ logoList(logoCompanies, title) }} +{{ recentPosts("Latest from our blog on the topic", collections.emberPosts) }} {% include 'content/hero-grow-with-us.njk' %} \ No newline at end of file diff --git a/src/embroider-initiative.njk b/src/embroider-initiative.njk index 004f67ea12..81efc33d70 100644 --- a/src/embroider-initiative.njk +++ b/src/embroider-initiative.njk @@ -15,8 +15,8 @@ og: "title": "The Embroider Initiative", "titleTag": "h1", "text": "Mainmatter, together with a group of sponsors, is working on an initiative to ship Embroider and secure the ecosystem’s investment in Ember.js.", - "image": "/assets/images/photos/0045.jpg", - "alt": "4 people standing around a table with some printed diagrams on it. 2 people shake hands, one claps their hands.", + "image": "/assets/images/ember/embroider-initiative-sponsor-logos.png", + "alt": "Collage of the logos of the Embroider initiative's sponsors with a blue overlay.", "loading": "eager" } %} {{ colorHero('center', 'large', 'purple', content) }} diff --git a/static/assets/images/authors/chris_ember.jpg b/static/assets/images/authors/chris_ember.jpg new file mode 100644 index 0000000000..2a31d4e8a7 Binary files /dev/null and b/static/assets/images/authors/chris_ember.jpg differ diff --git a/static/assets/images/authors/real_ate.jpg b/static/assets/images/authors/real_ate.jpg index 6280d9231c..7e1d0a25a9 100644 Binary files a/static/assets/images/authors/real_ate.jpg and b/static/assets/images/authors/real_ate.jpg differ diff --git a/static/assets/images/ember/ember-cookies-mono.svg b/static/assets/images/ember/ember-cookies-mono.svg new file mode 100644 index 0000000000..21376db1e0 --- /dev/null +++ b/static/assets/images/ember/ember-cookies-mono.svg @@ -0,0 +1,15 @@ + + + ember-cookies + + + + + + + + + + + + \ No newline at end of file diff --git a/static/assets/images/ember/ember-promise-modals.svg b/static/assets/images/ember/ember-promise-modals.svg new file mode 100644 index 0000000000..6226f8d1e7 --- /dev/null +++ b/static/assets/images/ember/ember-promise-modals.svg @@ -0,0 +1,17 @@ + + + Group 11 + + + + + + + + + + + + + + \ No newline at end of file diff --git a/static/assets/images/ember/ember-simple-auth-mono.svg b/static/assets/images/ember/ember-simple-auth-mono.svg new file mode 100644 index 0000000000..0e312d8df0 --- /dev/null +++ b/static/assets/images/ember/ember-simple-auth-mono.svg @@ -0,0 +1,15 @@ + + + ember-simple-auth + + + + + + + + + + + + \ No newline at end of file diff --git a/static/assets/images/ember/ember-test-selectors-mono.svg b/static/assets/images/ember/ember-test-selectors-mono.svg new file mode 100644 index 0000000000..f9f9f17165 --- /dev/null +++ b/static/assets/images/ember/ember-test-selectors-mono.svg @@ -0,0 +1,15 @@ + + + ember-test-selectors + + + + + + + + + + + + \ No newline at end of file diff --git a/static/assets/images/ember/emberfest-logo-vertical.png b/static/assets/images/ember/emberfest-logo-vertical.png new file mode 100644 index 0000000000..f93b010b43 Binary files /dev/null and b/static/assets/images/ember/emberfest-logo-vertical.png differ diff --git a/static/assets/images/ember/qunit-dom-mono.svg b/static/assets/images/ember/qunit-dom-mono.svg new file mode 100644 index 0000000000..69e8ab0c0f --- /dev/null +++ b/static/assets/images/ember/qunit-dom-mono.svg @@ -0,0 +1,15 @@ + + + qunit-dom + + + + + + + + + + + + \ No newline at end of file