diff --git a/config.toml b/config.toml
index 506ad6ea9e73c9724a05d2c2ca5412449a89f33b..4510985c561eb5d9a6a6c9c8561e65127fcadb11 100644
--- a/config.toml
+++ b/config.toml
@@ -159,4 +159,22 @@ pluralizeListTitles = false
parent = "contribute"
name = "FAQ"
url = "/contribute/dev-program/faq"
- weight = 2
\ No newline at end of file
+ weight = 2
+
+[[menu.sidebar]]
+ identifier = "collaborations"
+ name = "Industry Collaborations"
+ url = "/collaborations/"
+ weight = 1
+
+[[menu.sidebar]]
+ parent = "collaborations"
+ name = "About Interest Groups"
+ url = "/collaborations/interest-groups"
+ weight = 1
+
+[[menu.sidebar]]
+ parent = "collaborations"
+ name = "Interest Group Process"
+ url = "/org/collaborations/interest-groups/process.php"
+ weight = 1
\ No newline at end of file
diff --git a/content/collaborations/_index.md b/content/collaborations/_index.md
new file mode 100644
index 0000000000000000000000000000000000000000..ddaeceac79f7725ebbbbc339e39cdce11f0dc4c3
--- /dev/null
+++ b/content/collaborations/_index.md
@@ -0,0 +1,34 @@
+---
+title: Industry Collaborations
+date: 2022-09-13T10:25:51-04:00
+description: Work with your peers in the industry in a vendor-neutral structure to drive shared innovation
+categories: []
+keywords:
+ - working groups
+ - interest groups
+ - collaboration
+slug: ""
+aliases: []
+toc: false
+draft: false
+page_css_file: public/css/collaborations-styles.css
+header_wrapper_class: header-collaborations header-collaborations-bg-img
+hide_page_title: true
+hide_sidebar: true
+#seo_title: ""
+headline: Industry Collaborations
+subtitle: Work with your peers in the industry in a vendor-neutral structure to drive shared innovation
+links:
+ - - href: "#join-collaboration"
+ - text: Join a Collaboration
+ - - href: "#start-collaboration"
+ - text: Start a Collaboration
+container: container-fluid collaborations-container
+layout: single
+---
+
+{{< pages/collaborations/collaborating >}}
+
+{{< pages/collaborations/join-collaboration >}}
+
+{{< pages/collaborations/start-new-collaboration >}}
\ No newline at end of file
diff --git a/content/collaborations/interest-groups.md b/content/collaborations/interest-groups.md
new file mode 100644
index 0000000000000000000000000000000000000000..f0952b048d3a6479a69148d68a97b2b7091949e7
--- /dev/null
+++ b/content/collaborations/interest-groups.md
@@ -0,0 +1,89 @@
+---
+title: "About Interest Groups"
+date: 2022-09-21T10:30:17-04:00
+description: ""
+categories: []
+keywords: []
+slug: ""
+aliases: []
+toc: false
+draft: false
+#header_wrapper_class: ""
+#seo_title: ""
+#headline: ""
+#subtitle: ""
+#tagline: ""
+#links: []
+---
+Interest groups are a light-weight, low-cost way for Eclipse Foundation members to collaborate on a common interest or domain in a vendor neutral manner based on the Eclipse Foundation’s governance structure, including its antitrust policy.
+
+Find out more about interest groups, with these frequently asked questions:
+
+1. [What are Eclipse Foundation Interest Groups?](#1-what-are-eclipse-foundation-interest-groups)
+2. [Does Eclipse now offer two options for industry collaborations?](#2-does-this-mean-eclipse-offers-two-mechanisms-by-which-it-supports-industry-collaborations)
+3. [What are the major differences between these collaborations and which one is right for my initiative?](#3-what-are-the-major-differences-between-interest-groups-and-working-groups-how-do-i-choose-which-is-right-for-my-initiative)
+4. [How do I propose a new Interest Group?](#4-how-can-i-propose-to-create-an-eclipse-interest-group)
+5. [How many members are required to create an Eclipse Interest Group?](#5-how-many-members-are-required-in-order-to-create-an-interest-group)
+6. [Are there any fees associated with Interest Groups?](#6-are-there-any-fees-associated-with-interest-groups)
+7. [How to join an existing Interest Group?](#7-how-can-i-participate-in-an-existing-interest-group)
+8. [What is the governance structure of Interest Groups?](#8-what-is-the-governance-structure-of-an-interest-group)
+9. [How do Interest Groups make decisions?](#9-how-do-interest-groups-make-decisions)
+10. [Is there a relationship between Interest Groups and Eclipse Projects?](#10-what-relationship-do-interest-groups-have-to-projects)
+11. [Can Interest Groups create specifications and/or develop software?](#11-can-interest-groups-create-specifications-andor-develop-software)
+12. [Are Interest Groups a pre-req to becoming a Working Group?](#12-are-interest-groups-a-prerequisite-to-becoming-a-working-group)
+13. [Can Interest Groups graduate to Working Groups?](#13-can-interest-groups-graduate-to-working-groups)
+14. [Are Interest Groups the same as Special Interest Groups?](#14-are-interest-groups-the-same-as-special-interest-groups-sigs)
+15. [I’m interested, how do I find out more about the Eclipse Foundation industry collaborations?](#15-how-do-i-find-out-more-about-interest-groups-and-working-groups)
+
+
+## 1. What are Eclipse Foundation Interest Groups?
+Eclipse Foundation Interest Groups facilitate the collaboration between participating Eclipse Member organizations to drive shared innovation. Eclipse Interest Groups are a light-weight association of a subset of Members that can come together to share a common interest in a topic or domain in a vendor-neutral manner based on the Eclipse Foundation’s overall governance structure including its antitrust policy.
+
+## 2. Does this mean Eclipse offers two mechanisms by which it supports industry collaborations?
+Yes, the Eclipse Foundation now offers two mechanisms to foster open industry collaboration to develop and drive new industry platforms and initiatives. Like Eclipse Working Groups, Eclipse Interest Groups can also collaborate across organizational boundaries in a vendor-neutral structure to solve industry problems and to drive shared innovation.
+
+## 3. What are the major differences between Interest Groups and Working Groups? How do I choose which is right for my initiative?
+Interest Groups, while modeled after Working Groups, are a very light-weight/self-governed group. Participation in Interest Groups is self managed by Member organizations, and there are no formal participation agreements, budgets, or committees. In short, they provide a simpler mechanism for Member organizations to collaborate in a collegial, vendor-neutral manner on initiatives of shared interest.
+
+Working Groups are intended for industry collaborative initiatives that have the intent to invest in the collective initiative, typically via participation fees. The intent is for working groups to address such additional objectives as developing and promoting a joint brand, developing open source specifications, contributing resources to drive common roadmaps and/or platforms, etc.
+
+From a pragmatic point of view, Working Groups leverage the [Eclipse Foundation Working Group Process](https://www.eclipse.org/org/workinggroups/process.php) to manage and drive the collaboration, and have Participation Agreements, Working Group Fees, Charters,Committees, Program Plans, Budgets, and so on. Interest Groups, on the other hand, due to their lighter-weight structure, have none of these.
+
+## 4. How can I propose to create an Eclipse Interest Group?
+Existing members may propose to create an Interest Group by starting the process [here](https://projects.eclipse.org/node/add/interest-group). If your organization is not already a member, you must first [join the Eclipse Foundation](https://www.eclipse.org/membership/#tab-membership), and then follow the same process. Note that all participating member organizations must have also executed the Eclipse Member Committer and Contributor Agreement.
+
+## 5. How many members are required in order to create an Interest Group?
+There must be at least three Member organizations participating. Each Interest Group must designate one or more Interest Group Leads.
+
+## 6. Are there any fees associated with Interest Groups?
+No, Interest Groups do not require Members to pay any additional fees to participate. However, you must be a Member of the Eclipse Foundation to participate. For more information, please visit our [Membership Page](https://www.eclipse.org/membership/).
+
+## 7. How can I participate in an existing Interest Group?
+Existing members with an executed Eclipse Member Committer and Contributor Agreement may participate in any Interest Group of interest. Members may participate by declaring participation via the Interest Group’s mailing list.
+
+## 8. What is the governance structure of an Interest Group?
+The governance structure for Interest Groups is intentionally lightweight. Eclipse Interest Groups inherit and rely upon the Eclipse Foundation’s overall governance, sufficient to enable individuals from Member organizations to collaborate effectively while conforming to all Eclipse processes and policies, including the Eclipse Foundation Intellectual Property and Antitrust Policies. See the [Interest Group Process](https://www.eclipse.org/org/collaborations/interest-groups/process.php) for a full overview of applicable related governance documents.
+
+All Interest Groups must produce agendas and minutes of all meetings and disseminate to the Interest Group’s mailing list.
+
+## 9. How do Interest Groups make decisions?
+Most actions taken by Interest Groups should be done so collegially by participants and based on lazy consensus. However, the [Eclipse Foundation Interest Group Process](https://www.eclipse.org/org/collaborations/interest-groups/process.php) does include a means for decisions to be formalized, should the participants believe it is valuable to do so.
+
+## 10. What relationship do Interest Groups have to Projects?
+Interest Groups may declare interest in any Eclipse project or projects, and may carry out activities that are in support of the success of those Eclipse project(s).
+
+## 11. Can Interest Groups create specifications and/or develop software?
+No, Interest Groups cannot create specifications nor develop software. Interest Groups may, at their discretion, produce artifacts such as documents, whitepapers, architectures, blueprints, diagrams, presentation and the like; however, they must not develop software, software documentation, or specifications.
+
+## 12. Are Interest Groups a Prerequisite to becoming a Working Group?
+No, Interest Groups are not a prerequisite to becoming a Working Group. It is possible, however, for the members of an Interest Group to decide to create a new Working Group.
+
+## 13. Can Interest Groups graduate to Working Groups?
+There is no direct correlation between Interest Groups and Working Groups, and thus no notion of graduation. Rather, all Eclipse industry collaborations, be they Interest Groups or Working Groups, will persist for however long they serve the collective purpose of their Members. It is possible that, over time, the Members of a particular Interest Group may deem that it would be more useful to be constituted as a Working Group, and vice versa. Should this be the case, it is possible under the guidance of the Foundation’s staff to make such a change.
+
+## 14. Are Interest Groups the same as Special Interest Groups (SIGs)?
+While similar, they are different. Special Interest Groups are a collaborative governance structure that allows Members of a working group to collaborate on specific, focused aspects of the broader working group’s scope. As such, Members of a SIG must also be participants of the Working Group which has formed the SIG.
+
+## 15. How do I find out more about Interest Groups and Working Groups?
+Please contact us via [collaborations@eclipse-foundation.org](mailto:collaborations@eclipse-foundation.org
+).
diff --git a/data/collaborations/collaborating.yml b/data/collaborations/collaborating.yml
new file mode 100644
index 0000000000000000000000000000000000000000..345e5758063f98ea6229265e5069e9b53ba81aa8
--- /dev/null
+++ b/data/collaborations/collaborating.yml
@@ -0,0 +1,20 @@
+- title: Vendor Neutral Governance
+ description: |
+ The Eclipse Foundation enables individuals and organizations to collaborate under a vendor-neutral governance model
+ icon: vendor.png
+- title: Ecosystem Development and Marketing
+ description: Build a community for collaboration through marketing and community programs
+ icon: ecosystem.png
+- title: Collaboration Management
+ description: |
+ Coordinate the efforts of open source projects by providing a shared vision and roadmap
+ icon: collaboration.png
+- title: Specification Development
+ description: |
+ Use the proven Eclipse specification development processes that provide a framework for the development of specifications in open source
+ icon: specification.png
+- title: Branding and Compatibility
+ description: |
+ Create branding and compatibility programs to build a trusted ecosystem of implementers and consumers
+ icon: compatibility.png
+
diff --git a/data/collaborations/collaboration_comparison.yml b/data/collaborations/collaboration_comparison.yml
new file mode 100644
index 0000000000000000000000000000000000000000..b0d3fa40be0dc73b114abf0c8c54f63114348ff1
--- /dev/null
+++ b/data/collaborations/collaboration_comparison.yml
@@ -0,0 +1,20 @@
+- name: Vendor Neutral Governance
+ support:
+ working_groups: true
+ interest_groups: true
+- name: Collaboration Management
+ support:
+ working_groups: true
+ interest_groups: true
+- name: Ecosystem Development and Marketing
+ support:
+ working_groups: true
+ interest_groups: false
+- name: Specification Development
+ support:
+ working_groups: true
+ interest_groups: false
+- name: Branding and Compatibility
+ support:
+ working_groups: true
+ interest_groups: false
\ No newline at end of file
diff --git a/js/main.js b/js/main.js
index 1afea4a16b4781f0981cdb36eb9fd03c4277d27f..5165e92935a9e40ed0967e2311fcb19758400bbf 100644
--- a/js/main.js
+++ b/js/main.js
@@ -14,3 +14,4 @@
import 'eclipsefdn-solstice-assets'
import './src/eclipsefdn-promo-content'
import './src/featured-projects-committer'
+import './src/collaborations/eclipsefdn.weighted-working-groups';
diff --git a/js/src/collaborations/eclipsefdn.weighted-working-groups.js b/js/src/collaborations/eclipsefdn.weighted-working-groups.js
new file mode 100644
index 0000000000000000000000000000000000000000..2678648872af52dbfb8f4646dcf1b69bf1de27d3
--- /dev/null
+++ b/js/src/collaborations/eclipsefdn.weighted-working-groups.js
@@ -0,0 +1,137 @@
+import template from '../templates/weighted-working-groups/working-group-block.mustache'
+
+const defaultOptions = {
+ count: 1,
+ wrapperClass: ''
+}
+
+// Working groups with a weight of -1 will not be displayed.
+const weights = {
+ default: -1,
+ 'jakarta-ee': 1,
+ sdv: 20,
+ 'cloud-development-tools': 30,
+ adoptium: 38,
+ oniro: 38,
+ 'eclipse-ide': 44,
+ 'internet-things-iot': 44,
+ aice: 50,
+ asciidoc: 50,
+ 'edge-native': 50,
+ microprofile: 50,
+ openmobility: 50,
+ osgi: 50,
+ sparkplug: 50,
+};
+
+const fallbackLogos = {
+ sdv: '/images/collaborations/logos/software-defined-vehicle-fallback.png'
+}
+
+const removeDuplicates = (value, index, self) => self.indexOf(value) === index;
+
+const getWeightedRandomIndex = (weightBuckets, categorizedArrayByWeight) => {
+ const largestWeight = Object.values(weights).sort().at(-1);
+ const randomNumber = Math.floor(Math.random() * largestWeight);
+
+ // Returns whatever number is the closest to a weight bucket
+ const closest = Object.values(weights).reduce((prev, curr) => {
+ return (Math.abs(curr - randomNumber) < Math.abs(prev - randomNumber) ? curr : prev);
+ })
+
+ const weightBucketSelectionIndex = weightBuckets.indexOf(closest);
+ const weightBucketSelection = weightBuckets[weightBucketSelectionIndex];
+ const selectionIndex = Math.floor(Math.random() * categorizedArrayByWeight[weightBucketSelection].length);
+
+ return categorizedArrayByWeight[weightBucketSelection][selectionIndex];
+}
+
+function getUniqueRandomWorkingGroups(workingGroupsCategorizedByWeight, weightBuckets, count) {
+ // Creates a set of selected working groups. This will omit duplicates.
+ let selectionSet = new Set();
+
+ while (selectionSet.size < count) {
+ const randomWorkingGroup = getWeightedRandomIndex(weightBuckets, workingGroupsCategorizedByWeight);
+
+ if (selectionSet.has(randomWorkingGroup)) continue;
+ selectionSet.add(randomWorkingGroup);
+ }
+
+ return Array.from(selectionSet);
+}
+
+async function getWeightedRandomWorkingGroups(count) {
+ const cachedWorkingGroups = JSON.parse(sessionStorage.getItem('weighted-working-groups'));
+ const isCached = cachedWorkingGroups != null;
+
+ // Only return the cached working groups if the count hasn't changed since last time run
+ if (isCached && cachedWorkingGroups.length === count) return cachedWorkingGroups;
+
+ const response = await fetch('https://membership.eclipse.org/api/working_groups');
+ const workingGroups = await response.json();
+
+ const weightBuckets = Object
+ .values(weights)
+ .filter(removeDuplicates);
+
+ // Create an object where the key is a bucket (or weight), and the value an array of working groups tied to that bucket
+ const weightBucketObject = weightBuckets.reduce((acc, bucket) => ({...acc, [bucket]: [] }), {})
+
+ const workingGroupsCategorizedByWeight = workingGroups.reduce((acc, wg) => {
+ const weight = weights[wg.alias] || weights.default;
+ acc[weight].push(wg);
+
+ return acc;
+ }, { ...weightBucketObject });
+
+ // Retrieves weighted random working groups and stores it in session storage cache
+ const randomWorkingGroups = getUniqueRandomWorkingGroups(workingGroupsCategorizedByWeight, weightBuckets, count);
+ sessionStorage.setItem('weighted-working-groups', JSON.stringify(randomWorkingGroups));
+
+ return randomWorkingGroups;
+};
+
+const matchHeightForLogos = (baseElement) => {
+ const imgElements = baseElement.querySelectorAll('.weighted-working-group-logo');
+
+ imgElements.forEach(el => {
+ el.addEventListener('load', () => {
+ $('.weighted-working-group-block-wrapper').matchHeight();
+ });
+ });
+}
+
+const getWorkingGroupLogo = ({ alias, logo } = workingGroup) => {
+ const fallbackLogo = fallbackLogos[alias];
+ if (logo === '') return fallbackLogo || '';
+
+ return logo;
+}
+
+(async function renderWeightedWorkingGroups() {
+ const element = document.querySelector('.eclipsefdn-weighted-working-groups');
+ if (!element) return;
+
+ const options = {
+ ...defaultOptions,
+ ...element.dataset,
+ count: +element.dataset.count
+ };
+
+ element.innerHTML = template({ isFetching: true, items: new Array(options.count) , wrapperClass: options.wrapperClass })
+
+ const workingGroups = await getWeightedRandomWorkingGroups(options.count);
+
+ const data = {
+ isFetching: false,
+ wrapperClass: options.wrapperClass,
+ items: workingGroups.map(wg => ({
+ title: wg.title,
+ logo: getWorkingGroupLogo(wg),
+ websiteUrl: wg.resources.website,
+ }))
+ };
+
+ element.innerHTML = template(data);
+ matchHeightForLogos(element);
+})();
\ No newline at end of file
diff --git a/js/src/mix-manifest.json b/js/src/mix-manifest.json
new file mode 100644
index 0000000000000000000000000000000000000000..cee4cb8f33e02dbca9e4c00b71e56ea74ee4b0f8
--- /dev/null
+++ b/js/src/mix-manifest.json
@@ -0,0 +1,6 @@
+{
+ "/js/main.js": "/js/main.js",
+ "/css/styles.css": "/css/styles.css",
+ "/css/europe-styles.css": "/css/europe-styles.css",
+ "/css/projects-openchain.css": "/css/projects-openchain.css"
+}
diff --git a/js/src/templates/weighted-working-groups/working-group-block.mustache b/js/src/templates/weighted-working-groups/working-group-block.mustache
new file mode 100644
index 0000000000000000000000000000000000000000..da6d5e7739b29a17a0a4af75270dff3360a85be9
--- /dev/null
+++ b/js/src/templates/weighted-working-groups/working-group-block.mustache
@@ -0,0 +1,17 @@
+{{#items}}
+ <div class="weighted-working-group-block-wrapper match-height-item-by-row {{wrapperClass}}">
+ {{#isFetching}}
+ <div class="weighted-working-group-block weighted-working-group-loading" aria-label="Loading working group website links">
+ <i class="fa fa-spinner fa-pulse fa-2x fa-fw"></i>
+ <span class="sr-only">Loading...</span>
+ </div>
+ {{/isFetching}}
+ {{^isFetching}}
+ <a class="weighted-working-group-block" href="{{websiteUrl}}" aria-label="{{ title }}'s official website">
+ <div class="weighted-working-group-logo-wrapper">
+ <img class="weighted-working-group-logo" src="{{logo}}" alt="" />
+ </div>
+ </a>
+ {{/isFetching}}
+ </div>
+{{/items}}
\ No newline at end of file
diff --git a/layouts/shortcodes/pages/collaborations/collaborating.html b/layouts/shortcodes/pages/collaborations/collaborating.html
new file mode 100644
index 0000000000000000000000000000000000000000..c62d1c7159999f0aebb087f38fbba24664d40fe1
--- /dev/null
+++ b/layouts/shortcodes/pages/collaborations/collaborating.html
@@ -0,0 +1,30 @@
+{{ $data_source := .Site.Data.collaborations.collaborating }}
+
+<section id="collaboration-at-the-eclipse-foundation" class="row collaborations-collaborating">
+ <div class="col-md-10 collaborations-col collaborations-collaborating-bg">
+ <div class="title-wrapper">
+ <h2 class="margin-0">Collaborating at the <span class="line-break" >Eclipse Foundation</span></h2>
+ </div>
+ </div>
+ <div class="col-md-14 collaborations-col">
+ <div class="row collaborations-col-row">
+ {{ range $index, $item := $data_source }}
+ {{ if eq (mod $index 2) 0 }}
+ <div class="clearfix"></div>
+ {{ end }}
+ <div class="col-md-12 collaborations-collaborating-item-col">
+ <div class="collaborations-collaborating-item">
+ <div class="item-icon-wrapper">
+ <img class="item-icon-bg" src="/images/collaborations/icons/icon-bg.png" alt="" />
+ <img class="item-icon" src="/images/collaborations/icons/{{ $item.icon }}" alt="" />
+ </div>
+ <div class="item-content">
+ <h3 class="item-content-title">{{ $item.title }}</h3>
+ <p>{{ $item.description }}</p>
+ </div>
+ </div>
+ </div>
+ {{ end }}
+ </div>
+ </div>
+</section>
diff --git a/layouts/shortcodes/pages/collaborations/join-collaboration.html b/layouts/shortcodes/pages/collaborations/join-collaboration.html
new file mode 100644
index 0000000000000000000000000000000000000000..31058d543bbb451ea21725e675a63e4b8479752a
--- /dev/null
+++ b/layouts/shortcodes/pages/collaborations/join-collaboration.html
@@ -0,0 +1,9 @@
+<section id="join-collaboration" class="container join-collaboration margin-bottom-60">
+ <h2>Join a Collaboration</h2>
+ <div class="row">
+ <div class="eclipsefdn-weighted-working-groups" data-wrapper-class="col-sm-8" data-count="3"></div>
+ <div class="col-xs-24 join-collaboration-button-col">
+ <a class="btn btn-primary join-collaboration-button" href="/org/workinggroups/explore.php" tabindex="0">View All</a>
+ </div>
+ </div>
+</section>
diff --git a/layouts/shortcodes/pages/collaborations/start-new-collaboration.html b/layouts/shortcodes/pages/collaborations/start-new-collaboration.html
new file mode 100644
index 0000000000000000000000000000000000000000..47c667a19b9810724899065b8c8a5d28981e9cb9
--- /dev/null
+++ b/layouts/shortcodes/pages/collaborations/start-new-collaboration.html
@@ -0,0 +1,72 @@
+<section id="start-collaboration" class="container-fluid row section-dark">
+ <div class="container">
+ <h2>Start a New Collaboration</h2>
+ <p>The Eclipse Foundation provides multiple services to support industry collaborations.</p>
+ <p>
+ Whether you intend on contributing to Eclipse technologies that are important to your product strategy, or simply
+ want to explore a specific innovation area with like-minded organizations, the Eclipse Foundation is the open source
+ home for industry collaboration.
+ </p>
+
+ <div class="row margin-top-40">
+ <div class="col-md-16">
+ <div class="collaboration-table-wrapper">
+ <table class="collaboration-table">
+ <thead>
+ <tr>
+ <td scope="col"></td>
+ <th scope="col">Working Groups</th>
+ <th scope="col">Interest Groups</th>
+ </tr>
+ </thead>
+ <tbody>
+ {{ range .Site.Data.collaborations.collaboration_comparison }}
+ <tr>
+ <th scope="row">{{ .name }}</th>
+ <td>
+ <span
+ role="img"
+ {{ if .support.working_groups }}
+ class="collaboration-table-checked"
+ alt="yes"
+ {{ else }}
+ alt="no"
+ {{ end }}
+ >
+ </span>
+ </td>
+ <td>
+ <span
+ role="img"
+ {{ if .support.interest_groups }}
+ class="collaboration-table-checked"
+ alt="yes"
+ {{ else }}
+ alt="no"
+ {{ end }}
+ >
+ </span>
+ </td>
+ </tr>
+ {{ end }}
+ <tr class="collaboration-table-link-row">
+ <td scope="row"></td>
+ <td><a href="/org/workinggroups/about.php">More About Working Groups</a></td>
+ <td><a href="./interest-groups">More About Interest Groups</a></td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+ <div class="col-md-8">
+ <div class="start-collaboration-buttons-wrapper">
+ <div class="start-collaboration-buttons">
+ <a class="btn btn-primary" href="mailto:collaborations@eclipse-foundation.org" tabindex="0">Contact Us About Creating a Working Group</a>
+ <a class="btn btn-secondary" href="https://projects.eclipse.org/propose-interest-group" tabindex="0">Propose an Interest Group</a>
+ </div>
+ <a href="mailto:collaborations@eclipse-foundation.org">Not sure? Contact us</a>
+ </div>
+ </div>
+ </div>
+ </div>
+</section>
\ No newline at end of file
diff --git a/less/_variables.less b/less/_variables.less
index fddfa148cd4780638b47a86fd5f69a330b6465f6..6803ebcb5be26b517f5bee37b61dae7e67acd4c3 100644
--- a/less/_variables.less
+++ b/less/_variables.less
@@ -9,4 +9,4 @@
* Christopher Guindon <chris.guindon@eclipse-foundation.org>
*
* SPDX-License-Identifier: EPL-2.0
-*/
\ No newline at end of file
+*/
diff --git a/less/images/collaborations/bg-collaborating.jpg b/less/images/collaborations/bg-collaborating.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..af2ed1377ad06494ee76f070b8a6341b39d193ba
Binary files /dev/null and b/less/images/collaborations/bg-collaborating.jpg differ
diff --git a/less/images/collaborations/bg-header.jpg b/less/images/collaborations/bg-header.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..cb02aae9060969143f50488e93b78839de988f1c
Binary files /dev/null and b/less/images/collaborations/bg-header.jpg differ
diff --git a/less/page_css_file/collaborations/_variables.less b/less/page_css_file/collaborations/_variables.less
new file mode 100644
index 0000000000000000000000000000000000000000..a918dde453eb1edb04edc94790cdcbb65db775e8
--- /dev/null
+++ b/less/page_css_file/collaborations/_variables.less
@@ -0,0 +1,19 @@
+/*!
+ * Copyright (c) 2021 Eclipse Foundation, Inc.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License v. 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * Contributors:
+ * Olivier Goulet <olivier.goulet@eclipse-foundation.org>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+*/
+
+@section-dark-white: #FAF5F5;
+@collaboration-gray: #F0EFEF;
+@collaborating-item-color: #888890;
+@collaborations-padding-y: 3em;
+@collaborations-icon-wrapper-margin-top: 0.5em; // adjust for matching section header height
+@collaborations-btn-padding: 1em;
\ No newline at end of file
diff --git a/less/page_css_file/collaborations/styles.less b/less/page_css_file/collaborations/styles.less
new file mode 100644
index 0000000000000000000000000000000000000000..62dc51a606ae1d303721659d06aabe3ff54f9c99
--- /dev/null
+++ b/less/page_css_file/collaborations/styles.less
@@ -0,0 +1,302 @@
+/*!
+ * Copyright (c) 2022 Eclipse Foundation, Inc.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License v. 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * Contributors:
+ * Olivier Goulet <olivier.goulet@eclipse-foundation.org>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+*/
+@import (reference) '~eclipsefdn-solstice-assets/less/quicksilver/styles.less';
+@import '_variables.less';
+
+.line-break {
+ display: block;
+}
+
+.section-dark {
+ padding-top: 3em;
+ padding-bottom: 3em;
+ background-color: #262525;
+
+ th,
+ td,
+ p,
+ h2,
+ h3 {
+ color: @section-dark-white;
+ }
+
+ a {
+ color: @section-dark-white;
+ }
+
+ .btn-secondary {
+ color: @black;
+ background-color: @section-dark-white;
+
+ &:hover {
+ background-color: darken(#efebeb, 10%);
+ }
+ }
+}
+
+// Jumbotron
+.header-collaborations {
+ .logo-eclipse-default {
+ filter: drop-shadow(10px 10px 5px @black);
+ }
+
+ h1,
+ h2 {
+ font-weight: bold;
+ text-shadow: 0px 10px 10px @black;
+ }
+
+ h1::after {
+ display: none;
+ }
+
+ h1 {
+ margin-bottom: 3rem;
+ }
+
+ h2 {
+ font-size: 1.75rem;
+ margin-top: 0;
+ margin-bottom: 3rem;
+
+ @media (min-width: @screen-md-min) {
+ font-size: 2.15rem;
+ }
+ }
+
+ .btn-primary {
+ padding: @collaborations-btn-padding;
+ }
+}
+
+.header-collaborations-bg-img {
+ background-image: url(../../images/collaborations/bg-header.jpg)
+}
+
+// Collaborating section
+.collaborations-collaborating {
+ padding-top: 2em;
+
+ @media (min-width: @screen-md-min) {
+ padding-bottom: 6em;
+ }
+}
+
+.collaborations-col-row {
+ @media (min-width: @screen-md-min) {
+ padding: 0 3em;
+ }
+
+ @media (min-width: @screen-lg-min) {
+ padding: 0 6em;
+ }
+}
+
+.collaborations-col {
+ padding-top: @collaborations-padding-y;
+ padding-bottom: @collaborations-padding-y;
+}
+
+.collaborations-collaborating-bg {
+ padding-right: 3em;
+ background-image: url(../../images/collaborations/bg-collaborating.jpg);
+ background-size: cover;
+ min-height: 5em;
+
+ @media (min-width: @screen-sm-min) {
+ min-height: 20em;
+ }
+
+ @media (min-width: @screen-md-min) {
+ min-height: 50em;
+ }
+
+ .title-wrapper {
+ margin-left: auto;
+ max-width: none;
+ }
+
+ h2 {
+ color: @white;
+ text-align: center;
+ font-weight: 600;
+
+ @media (min-width: @screen-md-min) {
+ text-align: right;
+ }
+ }
+}
+
+.collaborations-collaborating-item {
+ display: flex;
+ min-height: 11em;
+
+ .item-icon-wrapper {
+ position: relative;
+ flex-shrink: 0;
+ width: 5em;
+ margin: @collaborations-icon-wrapper-margin-top 2em 0 0;
+ }
+
+ .item-icon {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ padding: 1em;
+ text-align: center;
+ }
+
+ .item-icon-bg {
+ width: 100%;
+ }
+
+ .item-content {
+ flex-grow: 1;
+ color: @collaborating-item-color;
+ }
+
+ .item-content-title {
+ margin-top: 0.5em;
+ font-size: 2rem;
+ font-weight: 400;
+ color: @black;
+ }
+}
+
+// Join collaboration section
+.weighted-working-group-block-wrapper {
+ padding-bottom: 2em;
+}
+
+.weighted-working-group-block {
+ display: flex;
+ justify-content: center;
+ border-radius: 0.8em;
+ background-color: @collaboration-gray;
+ padding: 3.5rem;
+ height: 100%;
+}
+
+.weighted-working-group-logo-wrapper {
+ display: flex;
+ justify-content: center;
+ margin: auto;
+ max-height: 16rem;
+
+ img {
+ object-fit: contain;
+ width: 100%;
+ }
+}
+
+.join-collaboration-button-col {
+ padding: 1em;
+ text-align: center;
+}
+
+.join-collaboration-button {
+ padding: @collaborations-btn-padding;
+ width: 75%;
+}
+
+@media (min-width: @screen-md-min) {
+ .join-collaboration-button-col {
+ text-align: right;
+ }
+
+ .join-collaboration-button {
+ width: initial;
+ padding-left: 4em;
+ padding-right: 4em;
+ }
+}
+
+// Start collaboration section
+.collaboration-table-wrapper {
+ overflow-x: auto;
+}
+
+.collaboration-table {
+ margin: auto;
+ border: none @section-dark-white;
+ border-collapse: collapse;
+
+ th,
+ td {
+ padding: 1em;
+ border-width: 1px;
+ font-weight: normal;
+ }
+
+ tbody th, tbody td {
+ border-top-style: solid;
+ border-bottom-style: solid;
+ }
+
+ thead th {
+ text-align: center;
+ }
+
+ td:last-child,
+ th:last-child {
+ border-left: solid 1px;
+ }
+
+ tr:last-child td {
+ border-bottom-style: none;
+ }
+}
+
+.collaboration-table-checked {
+ display: block;
+ width: 1em;
+ height: 1em;
+ margin: auto;
+ border-radius: 9999px;
+ background-color: @brand-primary;
+}
+
+.collaboration-table-link-row a {
+ display: inline-block;
+ text-align: center;
+}
+
+.start-collaboration-buttons-wrapper {
+ display: flex;
+ min-height: 26em;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+
+ a {
+ width: 100%;
+ display: inline-block;
+ text-align: center;
+ }
+}
+
+.start-collaboration-buttons {
+ .btn {
+ width: 100%;
+ padding: @collaborations-btn-padding;
+ margin-bottom: 1em;
+ }
+}
+
+// Collaborations Content
+.collaborations-container {
+ .btn {
+ white-space: normal;
+ }
+}
\ No newline at end of file
diff --git a/static/images/collaborations/icons/collaboration.png b/static/images/collaborations/icons/collaboration.png
new file mode 100644
index 0000000000000000000000000000000000000000..46c399123d88d04e60fa9417884a4f5dfe6921a2
Binary files /dev/null and b/static/images/collaborations/icons/collaboration.png differ
diff --git a/static/images/collaborations/icons/compatibility.png b/static/images/collaborations/icons/compatibility.png
new file mode 100644
index 0000000000000000000000000000000000000000..557c618e30ee5c8cb982560c4bf314cbc8fb4461
Binary files /dev/null and b/static/images/collaborations/icons/compatibility.png differ
diff --git a/static/images/collaborations/icons/ecosystem.png b/static/images/collaborations/icons/ecosystem.png
new file mode 100644
index 0000000000000000000000000000000000000000..6be2d75e521bf32cd60d84744c945e73cca7de82
Binary files /dev/null and b/static/images/collaborations/icons/ecosystem.png differ
diff --git a/static/images/collaborations/icons/icon-bg.png b/static/images/collaborations/icons/icon-bg.png
new file mode 100644
index 0000000000000000000000000000000000000000..f68cac2b45f31ace0f49f24526d4bbbb2b57e226
Binary files /dev/null and b/static/images/collaborations/icons/icon-bg.png differ
diff --git a/static/images/collaborations/icons/specification.png b/static/images/collaborations/icons/specification.png
new file mode 100644
index 0000000000000000000000000000000000000000..674eafe6b1ba078efbf122cfe11d9dd8cf4aa458
Binary files /dev/null and b/static/images/collaborations/icons/specification.png differ
diff --git a/static/images/collaborations/icons/vendor.png b/static/images/collaborations/icons/vendor.png
new file mode 100644
index 0000000000000000000000000000000000000000..948c54a9b84ad042a82b89eb808ab7ad4443c070
Binary files /dev/null and b/static/images/collaborations/icons/vendor.png differ
diff --git a/static/images/collaborations/logos/software-defined-vehicle-fallback.png b/static/images/collaborations/logos/software-defined-vehicle-fallback.png
new file mode 100644
index 0000000000000000000000000000000000000000..e299f2179595d66d097403df12f19bad7a31ac50
Binary files /dev/null and b/static/images/collaborations/logos/software-defined-vehicle-fallback.png differ
diff --git a/webpack.mix.js b/webpack.mix.js
index 7ff6cfdbb6aff4bd2eb0017b3dffeab46fed7826..e67126142161caa4b90470a77505e9e7bacba081 100644
--- a/webpack.mix.js
+++ b/webpack.mix.js
@@ -20,6 +20,7 @@ mix.setResourceRoot('../');
mix.less('./less/styles.less', 'static/public/css/styles.css');
+mix.less('./less/page_css_file/collaborations/styles.less', 'static/public/css/collaborations-styles.css');
mix.less('./less/page_css_file/projects/openchain.less', 'static/public/css/projects-openchain.css');
mix.less('./less/page_css_file/europe/styles.less', 'static/public/css/europe-styles.css');