diff --git a/content/org/value/images/accelerating-innovation-through-open-source.jpg b/content/org/value/images/accelerating-innovation-through-open-source.jpg new file mode 100644 index 0000000000000000000000000000000000000000..a486e61c15ac04642fb70fa3b3f24153f6c1e9f2 Binary files /dev/null and b/content/org/value/images/accelerating-innovation-through-open-source.jpg differ diff --git a/content/org/value/images/ebook-oepn-source-wg-collaboration.jpg b/content/org/value/images/ebook-oepn-source-wg-collaboration.jpg new file mode 100644 index 0000000000000000000000000000000000000000..285af3a69e6d5d4be43ce08dc6614cc9135c1a2b Binary files /dev/null and b/content/org/value/images/ebook-oepn-source-wg-collaboration.jpg differ diff --git a/content/org/value/images/jumbotron/a.jpg b/content/org/value/images/jumbotron/a.jpg new file mode 100644 index 0000000000000000000000000000000000000000..ef95c4c72215ee9ca2d71c90d60fb6869c6947d6 Binary files /dev/null and b/content/org/value/images/jumbotron/a.jpg differ diff --git a/content/org/value/images/jumbotron/b.jpg b/content/org/value/images/jumbotron/b.jpg new file mode 100644 index 0000000000000000000000000000000000000000..98ae4e3ccfe453f6de0010a2bf528c7e298c6bb3 Binary files /dev/null and b/content/org/value/images/jumbotron/b.jpg differ diff --git a/content/org/value/images/jumbotron/c.jpg b/content/org/value/images/jumbotron/c.jpg new file mode 100644 index 0000000000000000000000000000000000000000..0baef804a259fd1c696548f9a337523f77ef16a5 Binary files /dev/null and b/content/org/value/images/jumbotron/c.jpg differ diff --git a/content/org/value/images/participate-open-source-ebook.jpg b/content/org/value/images/participate-open-source-ebook.jpg new file mode 100644 index 0000000000000000000000000000000000000000..a9107117749929a06787b5aaaf6f91c9081d9e12 Binary files /dev/null and b/content/org/value/images/participate-open-source-ebook.jpg differ diff --git a/content/org/value/index.md b/content/org/value/index.md new file mode 100644 index 0000000000000000000000000000000000000000..a4deb1956be9ed62e1a3293d7eb8a3a74cab9d58 --- /dev/null +++ b/content/org/value/index.md @@ -0,0 +1,16 @@ +--- +title: "Open Innovation Community - Business Value" +headline: "The Home of Entrepreneurial Open Source" +subtitle: | + Community driven. <br> + Code first. <br> + <span class="text-primary">Commercially-friendly.</span> +jumbotron_class: "col-xs-24" +keywords: ["open source", "business", "technology", "strategy", "operational value", "strategic value", "financial value"] +hide_page_title: true +hide_sidebar: true +container: "container-fluid" +page_css_file: "/public/css/org/value.css" +--- + +{{< pages/org/value >}} diff --git a/layouts/shortcodes/pages/org/value.html b/layouts/shortcodes/pages/org/value.html new file mode 100644 index 0000000000000000000000000000000000000000..67a890b98cde6de111a83cfc822d02e87f9fc900 --- /dev/null +++ b/layouts/shortcodes/pages/org/value.html @@ -0,0 +1,172 @@ +<div class="row"> + <div class="container"> + <div class="row"> + <div class="col-sm-16 padding-top-60 padding-bottom-60"> + <p class="big">The Eclipse Foundation provides a proven governance framework and processes for entrepreneurial collaboration on sustainable, commercializable open source software that benefits developers, companies, and users alike.</p> + </div> + <div class="col-sm-8 padding-top-60 padding-bottom-60"> + <p class="big text-center"><a class="btn btn-primary btn-lg padding-right-60 padding-left-60 margin-top-20" href="/membership/join-us/">Join Us</a></p> + </div> + </div> + </div> + + + <div class="background-primary info-section" style="overflow-x: hidden; min-height:350px"> + <div class="container"> + <div class="row"> + <div class="col-sm-24 col-md-9 padding-top-20"> + <h2 class="fw-600"> Why The Eclipse Foundation? </h2> + <p>Our approach to open innovation offers companies the opportunity to serve customers better, increase business agility and extend value creation beyond traditional organizational boundaries by participating in an ecosystem of projects and communities.</p> + </div> + <div class="highlighted-story col-xs-24 col-sm-8 col-md-5" style="background-color: white; min-height:350px"> + <div class="row padding-bottom-5"> + <div class="match-height-item-by-row col-xs-24 padding-20"> + <a class="success-stories-download-link" aria-label="Download eBook for How Open Source Software Drives Innovation" href="https://outreach.eclipse.foundation/innovation-open-source-ebook"> + <img class="img img-responsive success-story" alt="How Open Source Software Drives Innovation eBook" src="/org/value/images/accelerating-innovation-through-open-source.jpg"> + </a> + <a class="btn btn-white success-stories-download padding-top-10 padding-bottom-10" aria-label="Download eBook for How Open Source Software Drives Innovation" href="https://outreach.eclipse.foundation/innovation-open-source-ebook"> + Download + </a> + </div> + </div> + </div> + <div class="highlighted-story col-xs-24 col-sm-8 col-md-5" style="background-color: white; min-height:350px"> + <div class="row padding-bottom-5"> + <div class="match-height-item-by-row col-xs-24 padding-20"> + <a class="success-stories-download-link" aria-label="Download eBook for How Open Source Working Groups Drive Collaboration and Innovation" href="https://outreach.eclipse.foundation/working-groups-open-source-ebook"> + <img class="img img-responsive success-story" alt="How Open Source Working Groups Drive Collaboration and Innovation eBook" src="/org/value/images/ebook-oepn-source-wg-collaboration.jpg"> + </a> + <a class="btn btn-white success-stories-download padding-top-10 padding-bottom-10" aria-label="Download eBook for How Open Source Working Groups Drive Collaboration and Innovation" href="https://outreach.eclipse.foundation/working-groups-open-source-ebook"> + Download + </a> + </div> + </div> + </div> + <div class="highlighted-story col-xs-24 col-sm-8 col-md-5" style="background-color: white; min-height:350px"> + <div class="row padding-bottom-5"> + <div class="match-height-item-by-row col-xs-24 padding-20"> + <a class="success-stories-download-link" aria-label="Download eBook for Open Source Community Participation Drives Business Success" href="https://outreach.eclipse.foundation/participate-open-source-ebook"> + <img class="img img-responsive success-story" alt="Open Source Community Participation Drives Business Success eBook" src="/org/value/images/participate-open-source-ebook.jpg"> + </a> + <a class="btn btn-white success-stories-download padding-top-10 padding-bottom-10" aria-label="Download eBook for Open Source Community Participation Drives Business Success" href="https://outreach.eclipse.foundation/participate-open-source-ebook"> + Download + </a> + </div> + </div> + </div> + </div> + </div> + </div> + + + <div id="success_stories" class="container padding-bottom-60 padding-top-40"> + <h2 class="margin-top-40 margin-bottom-40 brand-primary success-stories-title">Success Stories</h2> + <div class="row"> + <div class="col-sm-24"> + <p class="margin-bottom-30 big">Businesses of all sizes in various industries are benefiting from open source projects hosted at the Eclipse Foundation and participation in Eclipse Foundation working groups. + <br><br>Discover how companies are leveraging the business value of open source: + </p> + </div> + </div> + <div class="row margin-top-20 margin-bottom-60"> + <div class="newsroom-resources margin-top-40 margin-bottom-20 padding-left-20 padding-right-20 text-center flex-center gap-30" data-res-wg="eclipse_org" data-res-title="" data-res-type="case_study" data-res-template="image" data-res-limit="4" data-res-class="card-item card-item-success"></div> + </div> + </div> + + + <div class="background-secondary text-center nodes-bg-left padding-bottom-60 padding-top-40"> + <div class="container"> + + <h2 class="margin-top-40 margin-bottom-40 brand-primary">Industry Expert Testimonials</h2> + + <div class="row"> + <div class="col-sm-18 col-sm-offset-3"> + <p class="text-center margin-bottom-30 big">Learn what industry experts have to say about how the Eclipse Foundation is helping businesses accelerate innovation, drive industry adoption, and grow community.</p> + </div> + </div> + + <div class="row margin-top-20 margin-bottom-60"> + <div class="col-sm-8"> + <a class="eclipsefdn-video" aria-label="Youtube: Todd Moore from IBM gives insights on the Business Value of Open Source" href="https://youtu.be/BJ6goUKQjko"></a> + </div> + <div class="col-sm-8"> + <a class="eclipsefdn-video" aria-label="Youtube: Deborah Bryant from Red Hat shares her expertise on the Business Value of Open Source" href="https://www.youtube.com/watch?v=wSkPHuNAfhU"></a> + </div> + <div class="col-sm-8"> + <a class="eclipsefdn-video" aria-label="Youtube: Farah Papaioannou on the benefits of the Business Value of Open Source" href="https://www.youtube.com/watch?v=7sU4mOYCtuQ"></a> + </div> + </div> + + </div> + </div> + + <div class="container padding-top-50 padding-bottom-50"> + + <div class="col-md-24 text-center"> + <a role="button" data-toggle="collapse" class="btn btn-primary padding-left-50 padding-right-50 width-250 padding-top-10 padding-bottom-10 fw-500" href="#moreResources" expanded="false" aria-controls="moreResources"> More Resources </a> + </div> + + <div class="col-md-24 collapse margin-top-30" id="moreResources"> + + <div class="row panel-group" id="accordion" role="tablist" aria-multiselectable="true"> + + <div class="col-md-24 panel text-center"> + <a role="button" data-parent="#accordion" data-toggle="collapse" class="btn btn-default padding-left-50 padding-right-50 width-250 padding-top-10 padding-bottom-10 fw-500" href="#whitepapers" expanded="false" aria-controls="whitepapers"> White Papers </a> + <div class="collapse panel-collapse" id="whitepapers"> + <div class="newsroom-resources margin-top-40 margin-bottom-20 text-center flex-center gap-60" data-res-wg="eclipse_org" data-res-title="" data-res-type="white_paper" data-res-template="image" data-res-class="card-item"></div> + </div> + </div> + + <div class="col-md-24 panel text-center"> + <a id="surveyReportsCtn" role="button" data-parent="#accordion" data-toggle="collapse" class="btn btn-grey padding-left-50 padding-right-50 width-250 padding-top-10 padding-bottom-10 fw-500 collapsed" href="#surveyReports" expanded="false" aria-controls="surveyReports"> Survey Reports </a> + <div class="collapse panel-collapse" id="surveyReports"> + <div class="newsroom-resources margin-top-40 margin-bottom-20 text-center flex-center gap-60" data-res-wg="eclipse_org" data-res-title="" data-res-type="survey_report" data-res-template="image" data-res-class="card-item"></div> + </div> + </div> + + <div class="col-md-24 panel text-center"> + <a role="button" data-parent="#accordion" data-toggle="collapse" class="btn btn-secondary padding-left-20 padding-right-20 width-250 padding-top-10 padding-bottom-10 fw-500 collapsed" href="#additional" expanded="false" aria-controls="additional"> Additional Case Studies </a> + <div class="collapse panel-collapse" id="additional"> + <div class="newsroom-resources margin-top-40 margin-bottom-20 text-center flex-center gap-60" data-res-wg="eclipse_org" data-res-title="" data-res-type="case_study" data-res-template="image" data-res-class="card-item" data-res-skip="4"></div> + </div> + </div> + + <div class="col-md-24 panel text-center"> + <a role="button" data-parent="#accordion" data-toggle="collapse" class="btn btn-secondary btn-black padding-left-20 padding-right-20 width-250 padding-top-10 padding-bottom-10 fw-500 collapsed" href="#podcast" expanded="false" aria-controls="podcast"> Podcast </a> + <div class="collapse panel-collapse" id="podcast"> + <div class="match-height-item-by-row col-xs-24 col-md-24 padding-40"> + <div id='buzzsprout-large-player-1740291'></div> + <script type='text/javascript' charset='utf-8' src='https://www.buzzsprout.com/1740291.js?container_id=buzzsprout-large-player-1740291&player=large'></script> + </div> + </div> + </div> + + </div> + + </div> + + </div> +</div> +<script> + // Expand and show Survery Reports section, + // if user comes here by clicking "Survey reports" links in org/services/marketing/ page + + document.addEventListener('DOMContentLoaded', goToSurveryReports) + + function goToSurveryReports() { + const currentLocation = window.location.href + const surveyReportsIdExists = currentLocation.includes('#surveyReportsCtn') + + if (surveyReportsIdExists) { + const moreResourcesCotent = document.getElementById('moreResources') + moreResourcesCotent.classList.add('in') + + const surveyReportsContent = document.getElementById('surveyReports') + surveyReportsContent.classList.add('in') + + const surveyReportsCtn = document.getElementById('surveyReportsCtn') + surveyReportsCtn.scrollIntoView(); + } + } +</script> + diff --git a/less/pages/org/value.less b/less/pages/org/value.less new file mode 100644 index 0000000000000000000000000000000000000000..7a8cc5a55293cafdf7a534fa9a271c9aa22b41b3 --- /dev/null +++ b/less/pages/org/value.less @@ -0,0 +1,239 @@ +/* + * Copyright (c) 2024 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. + * + * SPDX-License-Identifier: EPL-2.0 +*/ + +.featured-jumbotron { + background-image: url('/org/value/images/jumbotron/b.jpg'); + background-position: center; + background-size: cover; +} + +.featured-jumbotron { + &, + & &-headline, + & &-subtitle { + font-size: 40px; + font-weight: 600; + } +} + +.featured-jumbotron.alternate h1, .featured-jumbotron.alternate p { + font-size: 40px; + font-weight: 600; +} + +.display-flex-center { + display: flex; + justify-content: center; +} + +.align-center { + align-items: center; +} + +.panel-group .panel { + margin-bottom: 30px; +} + +.panel { + background-color: transparent; + box-shadow: unset; + border: unset; +} + +.width-250 { + width: 250px; +} + +.btn { + font-weight: 500; +} + +.btn-default { + background-color: #E3E0E0; + border-color: #E3E0E0; +} + +.btn-black { + background-color: #1a1a1a; + border-color: #1a1a1a; +} + +.btn-default:visited, .btn-default:focus { + color: black; +} + +.rounded-10 { + border-radius: 10px; +} + +.section-highlights { + background-color:transparent; +} + +.info-section p { + margin:30px 30px 30px 0; +} + +.background-white { + background-color: white; + height: 350px; +} + +.highlighted-story .row { + max-width: 400px; +} + +@media (max-width: 768px) { + .highlighted-story .row { + margin: auto; + } +} + +.success-story { + box-shadow: 10px 20px 5px #e4e4e4; + width: 100%; + border-top-left-radius: 5px; + border-top-right-radius: 5px; +} + +.survey-reports .btn { + color: #f79422; + background-color: #EDEBEB; +} + +.success-stories-title { + font-weight: 600; + color: #545454; +} + +.success-stories-download { + width: 100%; +} + +.success-stories-download.btn-white { + color: #f79422; + box-shadow: 10px 10px 5px #c9c9c9; + border-bottom-left-radius: 5px; + border-bottom-right-radius: 5px; +} + +.success-stories-download-link:hover { + color: white; + text-decoration: none; + cursor: pointer; +} + +.newsroom-resources .card-item { + max-width: 290px; + min-width: 250px; + flex: 1; + box-shadow: 10px 20px 10px #e4e4e4; + border-radius: 5px; + overflow: hidden; +} + +.newsroom-resources .card-item.card-item-success { + max-width: 260px; + min-width: 230px; +} + +.newsroom-resources .card-item .image-container{ + display: block; + padding-top: 128%; + padding-left: 100%; + width: 100%; + position: relative; + overflow: hidden; +} + +.newsroom-resources .card-item .image-container .cover{ + width: 100%; + position: absolute; + top:0; + left:0; + right: 0; +} + +.newsroom-resources .card-item .btn { + padding: 10px 12px; + background-color: #fff; + color: #f79422; + border: #fff; +} + +#success_stories .newsroom-resources .card-item .btn { + background-color: #f7941e; + border-color: #f7941e; + color: #fff; +} + +#surveyReports .newsroom-resources .card-item .btn { + background-color: #EDEBEB; + border: #EDEBEB; +} + +.success-stories-col { + padding-left: 25px; + padding-right: 25px; + margin-bottom: 10px; +} + +@media only screen and (max-width: 1200px) { + .info-section p { + font-size:18px; + margin:60px 0; + } +} + +@media only screen and (max-width: 970px) { + .info-section p { + font-size:16px; + margin:50px 0; + } +} + +@media only screen and (max-width: 768px) { + .info-section p { + font-size:16px; + margin:60px 0; + } +} + +@media only screen and (min-width: 1201px) { + .info-section p { + font-size:18px; + } +} + +@media only screen and (min-width: 768px) { + .info-section-picture:before { + display:block; + content:""; + width:1000px; + height: 480px; + background-repeat: no-repeat; + background-size: cover; + } +} + +.gradient-circle { + background: linear-gradient(to bottom, #f79422 0%,#ffbd59, #ffde59 100%); + border-radius:100px; + width:76px; + height:76px; + display:block; + padding:17px; + margin:0 auto 20px; +} + +.section-highlights .featured-highlights-item .feather { + stroke: #fff; +} + diff --git a/webpack.mix.js b/webpack.mix.js index 95f493652ca22838dddf0a6dd379cc72918c33c6..139f81ed59e0df0f5c9b18b4f0095f2c477c9684 100644 --- a/webpack.mix.js +++ b/webpack.mix.js @@ -99,6 +99,7 @@ mix.less('./less/pages/collaborations/styles.less', 'static/public/css/collabora mix.less('./less/pages/openchain/styles.less', 'static/public/css/projects-openchain.css'); mix.less('./less/pages/europe/styles.less', 'static/public/css/europe-styles.css'); mix.less('./less/pages/org/governance.less', 'static/public/css/org/governance.css'); +mix.less('./less/pages/org/value.less', 'static/public/css/org/value.css'); mix.less('./less/pages/projects/resources.less', 'static/public/css/projects/resources.css'); mix.less('./less/pages/sponsor/collaboration.less', 'static/public/css/collaboration.css'); mix.less('./less/pages/blogs-and-videos.less', 'static/public/css/blogs-and-videos.css');