Skip to content

Commit

Permalink
Added product screenshots
Browse files Browse the repository at this point in the history
adapted order of elements on page

Signed-off-by: Jonas Helming <[email protected]>
  • Loading branch information
JonasHelming authored May 21, 2021
1 parent d055dfd commit 05b3579
Show file tree
Hide file tree
Showing 7 changed files with 214 additions and 79 deletions.
2 changes: 1 addition & 1 deletion src/components/index/Features.js
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ import Feature from './Feature'

const StyledFeatures = styled.div`
.features {
padding: 12rem 0;
padding: 1rem 0;
}
.feature__container {
Expand Down
7 changes: 0 additions & 7 deletions src/components/index/Header.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@
********************************************************************************/

import Background from '../../resources/background-image.png'
import ContributorsAndAdopters from './ContributorsAndAdopters'
import DocImage from '../DocImage'
import Nav from '../Nav'
import React from 'react'
Expand Down Expand Up @@ -99,12 +98,6 @@ const Header = () => (
</div>
</div>

<div className="row">
<DocImage name="theia-screenshot.jpg" alt="Theia IDE Screenshot" shadow={true} />
</div>

<ContributorsAndAdopters />

</header>
</StyledHeader>
)
Expand Down
110 changes: 110 additions & 0 deletions src/components/index/Products.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,110 @@
/********************************************************************************
* Copyright (C) 2020 TypeFox and others.
*
* 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.
*
* This Source Code may also be made available under the following Secondary
* Licenses when the conditions for such availability set forth in the Eclipse
* Public License v. 2.0 are satisfied: GNU General Public License, version 2
* with the GNU Classpath Exception which is available at
* https://www.gnu.org/software/classpath/license.html.
*
* SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
********************************************************************************/

import React from 'react'

import styled from '@emotion/styled'
import { products } from '../../utils/data'
import { breakpoints } from '../../utils/variables'

const Styled = styled.div`
.contributors {
padding-bottom: 5rem;
margin-top: 4rem;
&__images {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
@media(min-width: 768px) {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-row-gap: 80px;
}
@media(max-width: 50rem) {
text-align: center;
}
}
&__image {
height: 100%;
max-width: 42rem;
object-fit: contain;
&-container {
height: 18rem;
@media(min-width: 768px) {
height: 18rem;
text-align: center;
}
@media(max-width: 50rem) {
width: 40%;
margin-bottom: 4rem;
}
@media(max-width: 30rem) {
width: 100%;
}
padding: 2px;
}
&--ericsson {
transform: scale(1.3);
}
&--ibm {
transform: scale(.8);
}
&--arm {
transform: scale(.5);
}
&--sap {
@media(min-width: ${breakpoints.md}) {
transform: translateX(2.5rem);
}
}
}
}
`

const Products = () => (
<div className="row">
<Styled>
<section className="contributors" >
<h3 className="heading-tertiary">Selected Tools based on Eclipse Theia</h3>
<div className="contributors__images">
{
products.map((item, i) => (
<div key={i} className="contributors__image-container">
<a target="_blank" rel="noopener noreferrer" href={item.href}>
<img className="contributors__image" src={item.src} alt={item.alt} />
</a>
</div>
))
}
</div>
</section>
</Styled>
</div>
)

export default Products
5 changes: 5 additions & 0 deletions src/pages/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -22,13 +22,18 @@ import Features from '../components/index/Features'
import Banner from '../components/index/Banner'
import Promos from '../components/index/Promos'
import Footer from '../components/Footer'
import ContributorsAndAdopters from '../components/index/ContributorsAndAdopters'
import Products from '../components/index/Products'


export default () => {
return (
<Layout canonical='/'>
<Header />
<main role="main">
<Products />
<Features />
<ContributorsAndAdopters />
<Banner />
<Promos />
</main>
Expand Down
Binary file added src/resources/screenshots/coffeeditor.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/resources/screenshots/logicloud.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
169 changes: 98 additions & 71 deletions src/utils/data.js
Original file line number Diff line number Diff line change
Expand Up @@ -14,78 +14,105 @@
* SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
********************************************************************************/

import TypeFoxLogo from '../resources/typefox.png'
import RedHatLogo from '../resources/redhat.svg'
import IBMLogo from '../resources/ibm.svg'
import GoogleLogo from '../resources/google.svg'
import ARMLogo from '../resources/arm.svg'
import EricssonLogo from '../resources/ericsson.svg'
import SAPLogo from '../resources/sap.svg'
import Arduino from '../resources/arduino.svg'
import ToroC from '../resources/toro-r.svg'
import EclipseSource from '../resources/eclipse-source.svg'
import Huawei from '../resources/huawei.svg'
import Acquia from '../resources/acquia.svg'

export const contributorsAndAdopters = [
{
href: "https://www.typefox.io",
src: TypeFoxLogo,
alt: "TypeFox Logo"
},
{
import TypeFoxLogo from '../resources/typefox.png'
import RedHatLogo from '../resources/redhat.svg'
import IBMLogo from '../resources/ibm.svg'
import GoogleLogo from '../resources/google.svg'
import ARMLogo from '../resources/arm.svg'
import EricssonLogo from '../resources/ericsson.svg'
import SAPLogo from '../resources/sap.svg'
import Arduino from '../resources/arduino.svg'
import ToroC from '../resources/toro-r.svg'
import EclipseSource from '../resources/eclipse-source.svg'
import Huawei from '../resources/huawei.svg'
import Acquia from '../resources/acquia.svg'
import MbedStudio from '../resources/screenshots/arm_mbedstudio-ss.png'
import CodeReady from '../resources/screenshots/redhat-crw-ss.png'
import CoffeeEditor from '../resources/screenshots/coffeeditor.gif'
import LogiCloud from '../resources/screenshots/logicloud.png'

export const contributorsAndAdopters = [
{
href: "https://www.typefox.io",
src: TypeFoxLogo,
alt: "TypeFox Logo"
},
{
href: "https://www.ericsson.com",
src: EricssonLogo,
alt: "Ericsson Logo"
},
{
href: "https://www.arm.com",
src: ARMLogo,
alt: "ARM Logo"
},
{
href: "https://www.redhat.com",
src: RedHatLogo,
alt: "RedHat Logo"
},
{
href: "https://about.google/",
src: GoogleLogo,
alt: "Google Logo"
},
{
href: "https://www.ibm.com",
src: IBMLogo,
alt: "IBM Logo"
},
{
href: "https://www.sap.com/",
src: SAPLogo,
alt: "SAP Logo"
},
{
href: "https://www.arduino.cc/",
src: Arduino,
alt: "Arduino Logo"
},
{
href: "https://www.torocloud.com/",
src: ToroC,
alt: "ToroCloud logo"
},
{
href: "https://eclipsesource.com/",
src: EclipseSource,
alt: "EclipseSource logo"
},
{
href: "https://www.huawei.com/",
src: Huawei,
alt: "Huawei logo"
},
{
href: "https://www.acquia.com/products/drupal-cloud/cloud-ide",
src: Acquia,
alt: "Acquia Logo"
}
]

export const products = [
{
href: "https://www.typefox.io",
src: MbedStudio,
alt: "Mbed Studio"
},
{
href: "https://www.ericsson.com",
src: CodeReady,
alt: "CodeReady Workpaces"
},
{
href: "https://www.ericsson.com",
src: EricssonLogo,
alt: "Ericsson Logo"
},
{
href: "https://www.arm.com",
src: ARMLogo,
alt: "ARM Logo"
},
{
href: "https://www.redhat.com",
src: RedHatLogo,
alt: "RedHat Logo"
},
{
href: "https://about.google/",
src: GoogleLogo,
alt: "Google Logo"
},
{
href: "https://www.ibm.com",
src: IBMLogo,
alt: "IBM Logo"
},
{
href: "https://www.sap.com/",
src: SAPLogo,
alt: "SAP Logo"
src: CoffeeEditor,
alt: "Coffee Editor Example"
},
{
href: "https://www.arduino.cc/",
src: Arduino,
alt: "Arduino Logo"
},
{
href: "https://www.torocloud.com/",
src: ToroC,
alt: "ToroCloud logo"
},
{
href: "https://eclipsesource.com/",
src: EclipseSource,
alt: "EclipseSource logo"
},
{
href: "https://www.huawei.com/",
src: Huawei,
alt: "Huawei logo"
href: "https://www.ericsson.com",
src: LogiCloud,
alt: "Logi.cloud"
},
{
href: "https://www.acquia.com/products/drupal-cloud/cloud-ide",
src: Acquia,
alt: "Acquia Logo"
}
]
]

0 comments on commit 05b3579

Please sign in to comment.