diff --git a/site/src/App.js b/site/src/App.js index 331da26..934a5ce 100644 --- a/site/src/App.js +++ b/site/src/App.js @@ -1,5 +1,5 @@ -import SignupForm from "./components/SignupForm"; import { Main } from './App.style.js'; +import DiscussCallout from './components/Discuss-Callout'; import mesheryPlayground from "./assets/images/meshery-playground-meshmap.png"; import Footer from "./components/Footer"; import { ThemeProvider } from "styled-components"; @@ -8,23 +8,17 @@ import { useDarkMode } from "./components/useDarkMode"; import ReactPlayer from 'react-player/youtube' import Navigation from "./components/Navigation"; import Faq from "./components/Faq"; -import { useState } from "react"; const App = () => { const [theme, toggleTheme] = useDarkMode(); const themeMode = theme === 'light' ? lightTheme : darkTheme; - const [showSignUpButton, setShowSignUpButton] = useState(true); - - const handleSignUpFormSubmit = () => { - setShowSignUpButton(false); - }; return ( <> - +

Try it now!

@@ -43,11 +37,10 @@ const App = () => { style={{ margin: "auto" }} className="embedVideo" /> - -
-
-
+
+ +

Frequently Asked Questions

diff --git a/site/src/App.style.js b/site/src/App.style.js index dae7262..445b043 100644 --- a/site/src/App.style.js +++ b/site/src/App.style.js @@ -27,6 +27,7 @@ export const Header = styled.header` max-width: 400px; height: auto; } + .themeToggle { margin: auto 0.5rem; padding: auto 0.5rem; @@ -35,36 +36,11 @@ export const Header = styled.header` height: 40px; } } - .btn-container { - display: flex; - align-items: center; - justify-content: space-between; - } - .signup-btn, + .login-btn { font-size: calc(16px + 6 * ((50vw - 320px) / 680)); transition: 0.2s ease-in-out; margin: auto 0.5rem; - } - .signup-btn { - padding: 1rem 1.5rem; - text-align: center; - color: #fff; - background: rgba(235, 192, 23, 1); - border-radius: 16px; - box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); - backdrop-filter: blur(5px); - -webkit-backdrop-filter: blur(5px); - border: 1px solid rgba(235, 192, 23, 0.3); - white-space: nowrap; - } - .signup-btn:hover { - background-color: rgba(255, 208, 25, 1); - box-shadow: 0px 0px 15px rgba(235, 192, 23, 1); - color: #fff; - } - - .login-btn { margin: 0 0 0 1rem; padding: 1rem 1.5rem; text-align: center; @@ -83,27 +59,20 @@ export const Header = styled.header` box-shadow: 0px 0px 15px rgba(0, 179, 159, 1); color: #fff; } + @media screen and (max-width: 1400px) { img.logo { max-width: 320px; } } + @media screen and (max-width: 1100px) { nav { padding: 1.5em 2.5em; } } + @media screen and (max-width: 975px) { - .themeToggle { - // position: absolute; - } - nav { - // padding: 1.5rem 5rem; - } - // .themeToggle > svg { - // width: 32px; - // height: 32px; - // } img.logo { max-width: 320px; } @@ -113,14 +82,12 @@ export const Header = styled.header` img.logo { max-width: 250px; } - .signup-btn { - padding: 0.7rem 1rem; - margin: auto 0.35rem; - } + .login-btn { padding: 0.7rem 1rem; margin: auto 0.35rem; } + .themeToggle > svg { width: 28px; height: 28px; @@ -136,6 +103,7 @@ export const Header = styled.header` max-width: 200px; } } + @media screen and (max-width: 500px) { img.logo { max-width: 180px; @@ -146,10 +114,11 @@ export const Header = styled.header` .themeToggle { position: static; } - .signup-btn, + .login-btn { padding: 5px 7px; } + .themeToggle > svg { width: 20px; height: 20px; @@ -233,9 +202,8 @@ export const Main = styled.main` .byline { margin-top: 2rem; } - - .form { - margin: 4rem auto; + .desc-callout { + margin-top: 4rem; } .join-community { diff --git a/site/src/components/SignupForm/index.js b/site/src/components/SignupForm/index.js deleted file mode 100644 index d7d2598..0000000 --- a/site/src/components/SignupForm/index.js +++ /dev/null @@ -1,291 +0,0 @@ -import { useState, useEffect } from 'react'; -import { Field, Formik, Form } from 'formik'; -import axios from 'axios'; -import MesheryText from '../../assets/images/meshery-light-text.svg'; -import SignupFormWrapper from './signupform.style.js'; -import DiscussCallout from '../Discuss-Callout'; - -/** - * Helper function to check anonymous email domains - * - * Currently Checks for the following domains: - * - duck.com - * - anonaddy.me - * - protonmail.com - * - tuta.io - */ -function validateEmail(email) { - // Regex pattern to match the disallowed domains - var disallowedDomains = /@(duck\.com|anonaddy\.me|protonmail\.com|tuta\.io)$/i; - - // Check if the email matches the disallowed domains pattern - if (disallowedDomains.test(email)) { - return false; // Invalid email - } - - return true; // Valid email -} - -const SignupForm = ({ onSubmit }) => { - // Form values - const [memberFormOne, setMemberFormOne] = useState({}); - - const [formSubmitted, setSubmit] = useState(false); - - // const [validateAccounts, setValidateAccounts] = useState(false); - const [email, setEmail] = useState(''); - const [firstname, setFirstName] = useState(''); - const [lastname, setLastName] = useState(''); - const [org, setOrg] = useState(''); - const [occupation, setOccupation] = useState(''); - const [role, setRole] = useState(''); - // const [google, setGoogleAccount] = useState(""); - // const [github, setGithubAccount] = useState(""); - // const [twitter, setTwitterAccount] = useState(""); - // const [linkedin, setLinkedinAccount] = useState(""); - const [formValidations, setFormValidations] = useState(false); - const [errorMessage, setErrorMessage] = useState(''); - - // const errorAccounts = "Please provide at least one account"; - - useEffect(() => { - if (formSubmitted) { - onSubmit(); - - axios.post("https://hook.us1.make.com/7c1op88rysnmeitovt35fxzcv2spspp0", { - memberFormOne - }); - - window.scrollTo({ - top: 800, - left: 0, - behavior: 'smooth' - }); - } - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [formSubmitted, memberFormOne]); - - const PlayFormComponent = () => { - return ( -
-
-

Get early access

- { - if (!validateEmail(values.email)) { - setFormValidations(true); - setErrorMessage( - `Use of ${values.email} is not allowed. Please use a non-anonymous email address / domain. - -The Meshery Playground is connected to live Kubernetes cluster(s) and allows users full-control over those clusters. Requiring users to register a non-anonymous user account keeps the Playground safe and healthy for all to enjoy. Without requiring users to sign-in, the Meshery Playground would allow anonymous access for anyone and everyone to potentially perform nefarious acts. Sign-up to receive a user account, entitled with perpetually free and full access the Playground environment.` - ); - } else if (!values.role) { - setFormValidations(true); - setErrorMessage('Please select role as applicable'); - } else { - setMemberFormOne(values); - setSubmit(true); - } - - // if (!(values.google || values.github || values.twitter || values.linkedin)) { - // setValidateAccounts(true); - // } else { - // setValidateAccounts(false); - // } - setFirstName(values.firstname); - setEmail(values.email); - setLastName(values.lastname); - setOccupation(values.occupation); - setOrg(values.org); - // setGoogleAccount(values.google); - // setTwitterAccount(values.twitter); - // setGithubAccount(values.github); - // setLinkedinAccount(values.linkedin); - setRole(values.role); - }}> -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- -
-
- - - - - - - - - - - - - - - - - - - - - - - - - -
- - {formValidations && ( -

- {errorMessage} -

- )} - -
- -
-
- -
-
-

Sign-up to receive a user account, entitled with perpetually free and full access to the Playground environment.

-

- Meshery maintainers will verify and process your request for access as quickly as possible. Due to the large influx of program participation requests, it may take some time before system access is granted. To help you familiarize with Meshery in the meantime, you will receive confirmation of your position in the queue. -

-
- -
-
-
- ); - }; - - const ThankYou = () => { - return ( - <> -
-

Thank you for your interest in Meshery Playground early access program!

-

- You are now signed up for the Meshery Playground early access program and your position - on the waiting list is confirmed. Please wait patiently for a response from the Meshery - team. -

-

- If you have any questions in the meantime, please send an email to{' '} - learn@meshery.io. -

-

- - Team Meshery -

-
- - ); - }; - - return ( - {!formSubmitted ? : } - ); -}; - -export default SignupForm; diff --git a/site/src/components/SignupForm/signupform.style.js b/site/src/components/SignupForm/signupform.style.js deleted file mode 100644 index 992331b..0000000 --- a/site/src/components/SignupForm/signupform.style.js +++ /dev/null @@ -1,249 +0,0 @@ -import styled from "styled-components"; - -const SignupFormWrapper = styled.section` - -* { - box-sizing: border-box; -} - - .form-page{ - display:flex; - justify-content: center; - margin-top: 2rem; - @media only screen and (max-width: 1024px){ - display:flex; - flex-wrap: wrap; - } - } - - .required-sign { - color: #b30000; - } - - .signup-text { - margin: 1rem; - width: 50%; - - p { - font-size: 1.35rem; - margin-bottom: 3rem; - margin-top: 2rem; - text-align: justify; - color: #8b8b8f; - text-align: left; - } - - @media screen and (max-width: 1024px) { - div { - display: block; - } - margin: 1rem 1rem 2rem 1rem; - width: 100%; - text-align: start; - } - } - - .desc-callout{ - @media screen and (max-width: 1024px){ - position: relative; - width: fit-content; - margin: auto; - } - } - - .accounts{ - margin-top: 1rem; - p { - font-size: 0.8rem; - line-height: 0.9rem; - color: #aaa; - } - .accounts_group{ - margin: 0 1rem 0 1rem; - } - } - - select { - /* for Firefox */ - -moz-appearance: none; - /* for Chrome */ - -webkit-appearance: none; - } - - /* For IE10 */ - select::-ms-expand { - display: none; - } - - .form-container{ - margin: 1rem; - height: 100%; - width: 50%; - box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.75); - @media only screen and (max-width: 1024px){ - margin: 2rem 0 ; - width: 90%; - - } - - .form-title { - padding: 1rem; - text-align: center; - background-color: #00b39f; - color: white; - } - - .form1 { - font-size: .8725rem; - padding: 2rem; - display: flex; - min-width: 20rem; - flex-flow: column wrap; - align-content: fcenter; - justify-content: center; - background-color: #1E2117; - color: #ccc; - - @media only screen and (max-width: 568px){ - min-width: 8rem - } - - label { - display: block; - } - - .form-name { - font-weight: 600; - margin: 20px 0px 5px 3px; - display: block; - } - - .text-field { - width: 100%; - border: 1px solid black; - border-radius: 10px; - padding: 1rem .5rem; - font-size: .85rem; - margin-top: 0.5rem; - font-family: inherit; - - &:focus { - border: 2px solid #00B39F; - } - } - - .form-field{ - margin-top: 1rem; - font-size: 0.9rem; - } - - .form-field-privacy{ - margin-top: 1rem; - text-align: center; - opacity: 0.5; - - & a { - color:inherit; - :hover { - text-decoration: underline; - } - } - } - - select { - padding: 1rem 0.5rem; - margin: 0.5rem 0; - background: none repeat scroll 0 0 #FFFFFF; - border: 1px solid black; - border-radius: 10px; - height: 50px; - width: 100%; - font-size: .85rem; - font-family: inherit; - } - - .custom-arrow { - background-color: white; - width: 2rem; - height: 2.65rem; - position: absolute; - right: 2.75rem; - bottom: 12.35rem; - pointer-events: none; - - .down-arrow { - position: relative; - top: 0.5rem; - left: 0.5rem; - border: solid black; - border-width: 0 3px 3px 0; - display: inline-block; - padding: 5px; - transform: rotate(45deg); - pointer-events: none; - } - - @media screen and (max-width: 1024px) { - bottom: 11.35rem; - right: 1.75rem; - } - } - - .submit-btn { - font-family: inherit; - margin: 1.5rem auto 0rem auto; - padding: 1rem 1.5rem; - font-size: 1.35rem; - display: block; - border: 0; - border-radius: 0.5rem; - background: #00B39F; - color: #FFF; - transition: 0.2s ease-in-out; - &:hover { - cursor: pointer; - background-color: #00D3A9; - color: #FFF; - box-shadow: 0.5px 0.5px 10px #00B39F; - } - &:active { - box-shadow: none; - } - } - - @media only screen and (max-width: 300px) { - margin-left: 0; - margin-right: 0; - } - } - } - - .thankyou-box { - display: flex; - flex-direction: column; - align-items: center; - text-align: center; - padding: 2rem; - margin: 3rem auto; - background-color: #1E2117; - border-radius: 2rem; - box-shadow: rgba(255, 243, 197, 0.75) 0px 5px 15px; - - h2, h3 { - color: #FFF; - } - h2{ - margin-top: 1rem; - margin-bottom: 2rem; - } - p { - margin-top: .25rem; - color: #FFF; - } - img { - width: 10rem; - } - } -`; - -export default SignupFormWrapper;