- Want to See the Difference for Yourself?
+ {title ? title : 'Want to See the Difference for Yourself?'}
-
Add a Gitpod button to your repository.
+
Install the browser extension which adds a Gitpod button to your GitLab, GitHub and Bitbucket projects to easily spin up a dev environment with a single click.
{
target="_blank"
className="btn btn--big btn--cta"
>
- Install Browser Extension
+
+ 
+ Add to {browser}
+
Or prefix any GitLab, GitHub or Bitbucket URL with gitpod.io/#
diff --git a/src/components/index/GetStarted.tsx b/src/components/index/GetStarted.tsx
index d0e55af16..a1b74d364 100644
--- a/src/components/index/GetStarted.tsx
+++ b/src/components/index/GetStarted.tsx
@@ -4,7 +4,7 @@ import styled from '@emotion/styled'
import { sizes } from '../../styles/variables'
import { projects } from '../../contents/projects'
import Project from './Project'
-import PrefixInput from './PrefixInput'
+import Difference from '../gitpod-vs-codespaces/Difference'
const StyledGetStarted = styled.div`
/* ------------------------------------------- */
@@ -12,25 +12,6 @@ const StyledGetStarted = styled.div`
/* ------------------------------------------- */
.get-started {
- padding-top: 0;
- text-align: center;
-
- h3 {
- font-weight: 400;
- }
-
- &__prefix {
- display: flex;
- margin-bottom: 12rem;
- text-align: left;
- }
-
- h2 + p {
- font-size: 2rem;
- }
-
- /* ----- Projects ----- */
-
&__projects {
display: flex;
justify-content: center;
@@ -52,38 +33,41 @@ const StyledGetStarted = styled.div`
}
}
}
+
+ h3 {
+ text-align: center;
+ font-weight: 400;
+ }
`
const GetStarted = () => (
-
-
-
- Get Started
-
-
- Prefix any GitLab, GitHub, or Bitbucket URL with gitpod.io/#
-
-
-
-
- Or Try an Example Project
-
-
- {projects.map((project, i) => (
-
- ))}
-
Or Try an Example Project
+
+ {projects.map((project, i) => (
+
+ ))}
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
https://gitpod.io/#
-
-
-
-
- <>
-
- { error ? error : 'Enter your GitLab, GitHub, or Bitbucket URL' }
-
-
- Start Workspace
-
-
-
-
-
-
-
-
- )
-}
-
-export default PrefixInput
diff --git a/src/components/index/Project.tsx b/src/components/index/Project.tsx
index 969b2d586..5872f2eca 100644
--- a/src/components/index/Project.tsx
+++ b/src/components/index/Project.tsx
@@ -9,7 +9,7 @@ const StyledProject = styled.div`
text-align: center;
font-weight: 600;
border: ${borders.light2};
- background: ${colors.white};
+ background: ${colors.offWhite};
border-radius: 3px;
min-width: 22rem;
diff --git a/src/components/index/SecurityAndOSS.tsx b/src/components/index/SecurityAndOSS.tsx
index d9a8ad1f7..d1ca46286 100644
--- a/src/components/index/SecurityAndOSS.tsx
+++ b/src/components/index/SecurityAndOSS.tsx
@@ -4,6 +4,11 @@ import TextFeature from './TextFeature'
import ImageProvider from '../ImageProvider'
const Styled = styled.section`
+ .pattern {
+ padding-bottom: 12rem;
+ margin-top: 12rem;
+ }
+
.text-container {
display: flex;
justify-content: center;
@@ -29,7 +34,7 @@ const Styled = styled.section`
const SecurityAndOSS = () => (
-
+
}
diff --git a/src/components/index/TextFeature.tsx b/src/components/index/TextFeature.tsx
index 133298eb0..074f2a680 100644
--- a/src/components/index/TextFeature.tsx
+++ b/src/components/index/TextFeature.tsx
@@ -6,7 +6,7 @@ import { colors, borders } from '../../styles/variables'
const StyledTextFeature = styled.div`
max-width: 600px;
padding: 4rem 6rem;
- background: ${colors.offWhite};
+ background: ${colors.white};
border: ${borders.light};
border-radius: 3px;
max-width: 450px;
@@ -14,12 +14,12 @@ const StyledTextFeature = styled.div`
@media (max-width: 500px) {
padding: 5rem 2rem;
- h3 {
+ .h3 {
text-align: center;
}
}
- h3 + p {
+ .h3 + p {
margin: 0;
}
@@ -50,9 +50,9 @@ const TextFeature = ({ img, title, text, btnText, href }: TextFeatureProps) => (
{img}
-
+
{title}
-
+
{text}
{btnText ? (
diff --git a/src/functions/submit-form.ts b/src/functions/submit-form.ts
index faa1f458b..4cec7894c 100644
--- a/src/functions/submit-form.ts
+++ b/src/functions/submit-form.ts
@@ -6,17 +6,19 @@ export interface Email {
email: string,
name?: string
},
- from: {
+ from?: {
email: string,
name?: string
}
subject: string,
- message: string
+ message?: string,
+ feedback?: string,
+ otherFeedback?: string
}
async function sendEmail(client: client.MailService, email: Email): Promise<{statusCode: number, errorMessage?: string}> {
const data: client.MailDataRequired = {
- from: email.from,
+ from: email.from || '',
subject: email.subject,
to: [
email.to!
@@ -24,7 +26,7 @@ async function sendEmail(client: client.MailService, email: Email): Promise<{sta
content: [
{
type: "text/plain",
- value: email.message
+ value: `${email.message ? email.message : `${email.feedback}\n${email.otherFeedback}`}`
}
]
}
diff --git a/src/layouts/index.tsx b/src/layouts/index.tsx
index e6fdc602e..d956ea7e0 100644
--- a/src/layouts/index.tsx
+++ b/src/layouts/index.tsx
@@ -12,6 +12,7 @@ import LayoutRoot from '../components/LayoutRoot'
import LayoutMain from '../components/LayoutMain'
import Nav from '../components/Nav'
import Footer from '../components/Footer'
+import MinimalFooter from '../components/MinimalFooter'
// import AnnoucementBanner from '../components/AnnouncementBanner'
type StaticQueryProps = {
@@ -24,7 +25,7 @@ type StaticQueryProps = {
}
}
-class IndexLayout extends React.Component<{ title?: string; canonical?: string; description?: string, ogImage?:string }, {}> {
+class IndexLayout extends React.Component<{ title?: string; canonical?: string; description?: string, isAFlowPage?: boolean, showReInstallExtensionButton?: boolean, ogImage?:string}, {}> {
handleFirstTab = (e: any) => {
if (e.key === 'Tab') {
// the "I am a keyboard user" key
@@ -90,7 +91,7 @@ class IndexLayout extends React.Component<{ title?: string; canonical?: string;
{/* */}
-
+
- : null
+ }
+ {
+ showReInstallExtensionButton ?
+ Reinstall Extension
+ : null
+ }