diff --git a/package-lock.json b/package-lock.json index 8113ce8320cb..fd4552aa8a51 100644 --- a/package-lock.json +++ b/package-lock.json @@ -24,7 +24,7 @@ "@sideway/address": "^5.0.0", "@svgr/webpack": "^8.0.1", "@types/mui-datatables": "^4.3.12", - "axios": "^1.4.0", + "axios": "^1.6.7", "babel-plugin-styled-components": "^2.1.4", "babel-preset-gatsby": "^2.22.0", "cytoscape": "^3.28.1", @@ -7088,11 +7088,11 @@ } }, "node_modules/axios": { - "version": "1.4.0", - "resolved": "https://registry.npmjs.org/axios/-/axios-1.4.0.tgz", - "integrity": "sha512-S4XCWMEmzvo64T9GfvQDOXgYRDJ/wsSZc7Jvdgx5u1sd0JwsuPLqb3SYmusag+edF6ziyMensPVqLTSc1PiSEA==", + "version": "1.6.7", + "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.7.tgz", + "integrity": "sha512-/hDJGff6/c7u0hDkvkGxR/oy6CbCs8ziCsC7SqmhjfozqiJGc8Z11wrv9z9lYfY4K8l+H9TpjcMDX0xOZmx+RA==", "dependencies": { - "follow-redirects": "^1.15.0", + "follow-redirects": "^1.15.4", "form-data": "^4.0.0", "proxy-from-env": "^1.1.0" } @@ -12225,9 +12225,9 @@ "integrity": "sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==" }, "node_modules/follow-redirects": { - "version": "1.15.2", - "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz", - "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==", + "version": "1.15.5", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.5.tgz", + "integrity": "sha512-vSFWUON1B+yAw1VN4xMfxgn5fTUiaOzAJCKBwIIgT/+7CuGy9+r+5gITvP62j3RmaD5Ph65UaERdOSRGUzZtgw==", "funding": [ { "type": "individual", diff --git a/package.json b/package.json index 83dd8ae0eddb..51279439ac99 100644 --- a/package.json +++ b/package.json @@ -41,7 +41,7 @@ "@sideway/address": "^5.0.0", "@svgr/webpack": "^8.0.1", "@types/mui-datatables": "^4.3.12", - "axios": "^1.4.0", + "axios": "^1.6.7", "babel-plugin-styled-components": "^2.1.4", "babel-preset-gatsby": "^2.22.0", "cytoscape": "^3.28.1", diff --git a/src/assets/brand/layer5-social-backgrounds.zip b/src/assets/brand/layer5-social-backgrounds.zip new file mode 100644 index 000000000000..81bfe4ca0119 Binary files /dev/null and b/src/assets/brand/layer5-social-backgrounds.zip differ diff --git a/src/assets/images/social-backgrounds/layer5-charcoal-background.png b/src/assets/images/social-backgrounds/layer5-charcoal-background.png new file mode 100644 index 000000000000..fbc537bac244 Binary files /dev/null and b/src/assets/images/social-backgrounds/layer5-charcoal-background.png differ diff --git a/src/collections/members/cesar-roman/cesar-roman.webp b/src/collections/members/cesar-roman/cesar-roman.webp new file mode 100644 index 000000000000..322194245f8d Binary files /dev/null and b/src/collections/members/cesar-roman/cesar-roman.webp differ diff --git a/src/collections/members/cesar-roman/index.mdx b/src/collections/members/cesar-roman/index.mdx new file mode 100644 index 000000000000..cfea5f22b3cf --- /dev/null +++ b/src/collections/members/cesar-roman/index.mdx @@ -0,0 +1,15 @@ +--- +name: Cesar Roman +position: Contributor +image_path: ./cesar-roman.webp +github: cesartheroman +twitter: cesartheroman +linkedin: cesartheroman +layer5: ec5a1cd6-e03f-4aa8-9bca-1334e20042ff +location: Chicago, IL +bio: I'm a Chicago-based, "Boogie Down Bronx" raised, full stack software engineer specializing in JavaScript, TypeScript, React, and Node. +badges: + - ui-ux +status: Active +published: true +--- \ No newline at end of file diff --git a/src/sections/Community/Member-single/index.js b/src/sections/Community/Member-single/index.js index 2dae7b50faaf..a9a9554c08fd 100644 --- a/src/sections/Community/Member-single/index.js +++ b/src/sections/Community/Member-single/index.js @@ -47,12 +47,17 @@ const MemberSingle = ({ frontmatter }) => {
-
- - -

Go Back

- -
+ +
+ + +

Go Back

+ +
+ + +

Layer5 Community Member

+ diff --git a/src/sections/Community/Member-single/memberSingle.style.js b/src/sections/Community/Member-single/memberSingle.style.js index f5f2289ac9b3..6181563ed9e6 100644 --- a/src/sections/Community/Member-single/memberSingle.style.js +++ b/src/sections/Community/Member-single/memberSingle.style.js @@ -26,7 +26,13 @@ export const MemberSingleWrapper = styled.div` } } } - + .page-heading { + font-size: 1.75rem; + line-height: 1.75rem; + color: ${(props) => props.theme.primaryColor}; + text-align: right; + font-weight: 400; + } ul { list-style: none; } diff --git a/src/sections/Company/Brand/Brand-components/social-backgrounds.js b/src/sections/Company/Brand/Brand-components/social-backgrounds.js new file mode 100644 index 000000000000..337df577d487 --- /dev/null +++ b/src/sections/Company/Brand/Brand-components/social-backgrounds.js @@ -0,0 +1,41 @@ +import React from "react"; +import { FiDownloadCloud } from "@react-icons/all-files/fi/FiDownloadCloud"; +import Button from "../../../../reusecore/Button"; +import { Col, Row } from "../../../../reusecore/Layout"; +import SocialBackgroundImg from "../../../../assets/images/social-backgrounds/layer5-charcoal-background.png"; + +const SocialBackgrounds = () => { + return ( +
+ + +

+ Layer5 Social Backgrounds +

+ + + + + + + +

+ The Social Background mark includes the Layer5 branding backgrounds that can be used as cover images or background images on Zoom, Twitter, Youtube and Linkedin. +

+ + + + + + + Layer5 Social backgrounds + + + +
+ ); +}; + +export default SocialBackgrounds; diff --git a/src/sections/Company/Brand/index.js b/src/sections/Company/Brand/index.js index 1835f17d80b7..b260b42a0736 100644 --- a/src/sections/Company/Brand/index.js +++ b/src/sections/Company/Brand/index.js @@ -20,6 +20,7 @@ const MeshMapBrand = loadable(() => import("./Brand-components/meshmap")); const BrandGuide = loadable(() => import("./Brand-components/brand-guide")); const StickFigures = loadable(() => import("./Brand-components/stickfigures")); const Catalog = loadable(() => import("./Brand-components/catalog")); +const SocialBackgrounds = loadable(() => import("./Brand-components/social-backgrounds")); const getDimensions = (ele) => { let dummyheight = 0, @@ -106,6 +107,7 @@ const Brand = () => { const meshmapRef = useRef(null); const stickfiguresRef = useRef(null); const CatalogRef = useRef(null); + const SocialBackgroundsRef = useRef(null); const sectionRefs = [ { section: "Layer5", ref: layer5Ref }, @@ -121,7 +123,8 @@ const Brand = () => { { section: "MeshMaster", ref: meshMasterRef }, { section: "MeshMap", ref: meshmapRef }, { section: "Five", ref: stickfiguresRef }, - { section: "Catalog", ref: CatalogRef } + { section: "Catalog", ref: CatalogRef }, + { section: "SocialBackgrounds", ref: SocialBackgroundsRef } ]; useEffect(() => { @@ -176,6 +179,9 @@ const Brand = () => {
+
+ +
@@ -228,6 +234,16 @@ const Brand = () => { > Layer5

+

{ + scrollTo(SocialBackgroundsRef.current); + }} + > + Layer5 Social Backgrounds +

{ - let data = useStaticQuery( - graphql`{ - Learn: allMdx( - sort: {fields: [frontmatter___date], order: DESC} - filter: {fields: {collection: {eq: "service-mesh-books"}}} - limit: 2 - ) { - nodes { - id - frontmatter { - title - thumbnail { - childImageSharp { - gatsbyImageData( - width: 1050 - height:1360 - layout: CONSTRAINED - ) + graphql` + { + Learn: allMdx( + sort: { fields: [frontmatter___date], order: DESC } + filter: { fields: { collection: { eq: "service-mesh-books" } } } + limit: 2 + ) { + nodes { + id + frontmatter { + title + thumbnail { + childImageSharp { + gatsbyImageData( + width: 1050 + height: 1360 + layout: CONSTRAINED + ) + } + publicURL + } + } + fields { + slug + } } - publicURL } - } - fields { - slug - } - } - } - Community: allMdx( - sort: {fields: [frontmatter___date], order: DESC} - filter: {fields: {collection: {eq: "events"}}, frontmatter: {published: {eq: true}}} - limit: 2 - ) { - nodes { - id - frontmatter { - title - thumbnail { - childImageSharp { - gatsbyImageData( - width: 240 - height: 160 - transformOptions: {cropFocus: CENTER} - layout: FIXED - ) + Community: allMdx( + sort: { fields: [frontmatter___date], order: DESC } + filter: { + fields: { collection: { eq: "events" } } + frontmatter: { published: { eq: true } } + } + limit: 2 + ) { + nodes { + id + frontmatter { + title + thumbnail { + childImageSharp { + gatsbyImageData( + width: 240 + height: 160 + transformOptions: { cropFocus: CENTER } + layout: FIXED + ) + } + publicURL + extension + } + } + fields { + slug + } } - publicURL - extension } - } - fields { - slug - } - } - } - Resources: allMdx( - sort: {fields: [frontmatter___date], order: DESC} - filter: {fields: {collection: {eq: "blog"}},frontmatter: {featured: {eq: true}}} - limit: 2 - ) { - nodes { - id - frontmatter { - title - thumbnail { - childImageSharp { - gatsbyImageData( - width: 240 - height: 160 - transformOptions: {cropFocus: CENTER} - layout: FIXED - ) + Resources: allMdx( + sort: { fields: [frontmatter___date], order: DESC } + filter: { + fields: { collection: { eq: "blog" } } + frontmatter: { featured: { eq: true } } + } + limit: 2 + ) { + nodes { + id + frontmatter { + title + thumbnail { + childImageSharp { + gatsbyImageData( + width: 240 + height: 160 + transformOptions: { cropFocus: CENTER } + layout: FIXED + ) + } + publicURL + extension + } + } + fields { + slug + } } - publicURL - extension } - } - fields { - slug - } - } - } - Home: allMdx( - sort: {fields: [frontmatter___date], order: DESC} - filter: {fields: {collection: {eq: "projects"}}, frontmatter: {published: {eq: true}}} - limit: 2 - ) { - nodes { - id - frontmatter { - title - thumbnail { - childImageSharp { - gatsbyImageData( - width: 240 - height: 160 - transformOptions: {cropFocus: CENTER} - layout: FIXED - ) + Home: allMdx( + sort: { fields: [frontmatter___date], order: DESC } + filter: { + fields: { collection: { eq: "projects" } } + frontmatter: { published: { eq: true } } + } + limit: 2 + ) { + nodes { + id + frontmatter { + title + thumbnail { + childImageSharp { + gatsbyImageData( + width: 240 + height: 160 + transformOptions: { cropFocus: CENTER } + layout: FIXED + ) + } + extension + publicURL + } + } + fields { + slug + } } - extension - publicURL } } - fields { - slug - } - } - } -} -` + ` ); data["Products"] = { nodes: [ { frontmatter: { thumbnail: { - img: meshery + img: meshery, }, - title: "Meshery, the Cloud Native Manager" + title: "Meshery, the Cloud Native Manager", }, fields: { - slug: "/cloud-native-management/meshery" - } + slug: "/cloud-native-management/meshery", + }, }, { frontmatter: { thumbnail: { - img: meshmap_dark + img: meshmap_dark, }, - title: "MeshMap, collaborative infrastructure management" + title: "MeshMap, collaborative infrastructure management", }, fields: { - slug: "/cloud-native-management/meshmap" - } - } - ] + slug: "/cloud-native-management/meshmap", + }, + }, + ], }; data["Solutions"] = { - nodes: [] + nodes: [], }; const [expand, setExpand] = useState(false); const [scroll, setScroll] = useState(false); - + const [dropDown, setDropDown] = useState(false); const { isDark, toggleDark } = useStyledDarkMode(); const themeToggler = () => toggleDark(); - + const [userData, setUserData] = useState(null); const dropDownRef = useRef(); const navWrapRef = useRef(); + function getCookieValue(cookieName) { + const cookies = document.cookie.split(";"); + + for (let i = 0; i < cookies.length; i++) { + let cookie = cookies[i].trim(); // Remove whitespace + if (cookie.indexOf(cookieName + "=") === 0) { + return cookie.substring(cookieName.length + 1); + } + } + return null; + } + function removeCookie(cookieName) { + document.cookie = + cookieName + "=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;"; + } + useEffect(() => { + const CLOUD_USER_API = + "https://meshery.layer5.io/api/identity/users/profile"; + const fetchData = async () => { + try { + const token = getCookieValue("provider_token"); + const response = await axios.get(CLOUD_USER_API, { + headers: { + Authorization: `Bearer ${token}`, + }, + }); + if (response.status !== 200) { + throw new Error("Network response was not ok"); + } + + const data = response.data; + setUserData(data); + } catch (error) { + console.error("There was a problem with your fetch operation:", error); + } + }; + + fetchData(); + }, []); useEffect(() => { const outsideClickHandler = (e) => { - if (expand && navWrapRef.current && !navWrapRef.current.contains(e.target)) { + if ( + expand && + navWrapRef.current && + !navWrapRef.current.contains(e.target) + ) { setExpand(false); closeDropDown(); } @@ -202,26 +257,33 @@ const Navigation = () => { }; return ( - +

-
- +
+ +
+ +
+ Cloud + + +
+ +
+ Playground + + { + removeCookie("provider_token"); + // Open logout API link in a new tab + window.open("https://meshery.layer5.io/logout", "_blank"); + + // Refresh the current page + window.location.reload(); + }} + rel="noreferrer" + className="drop-item" + > +
+ +
+ Logout + +
+
+ ) : ( +
- - - ); }; diff --git a/src/sections/General/Navigation/navigation.style.js b/src/sections/General/Navigation/navigation.style.js index e72bd2703705..52780ef97a15 100644 --- a/src/sections/General/Navigation/navigation.style.js +++ b/src/sections/General/Navigation/navigation.style.js @@ -1,20 +1,19 @@ import styled from "styled-components"; const NavigationWrap = styled.header` - position: sticky; width: 100vw; z-index: 9999; top: 0; background-color: ${(props) => props.theme.body}; transition-property: color, background-color; - transition-duration: .8s; + transition-duration: 0.8s; transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1); .nav-container { display: flex; - @media (min-width:912px) and (max-width:992px){ - max-width:850px; + @media (min-width: 912px) and (max-width: 992px) { + max-width: 850px; } } .meshery-cta { @@ -28,32 +27,53 @@ const NavigationWrap = styled.header` #signup { margin-right: 10px; } + .avatar-container { + cursor: pointer; + width: 2.5rem; + height: 2.5rem; + display: flex; + align-items: center; + border-radius: 50%; + background-color: #c5c5c5; + overflow: hidden; + border: 2px solid ${(props) => props.theme.primaryColor}; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + &:hover { + background-color: #ebebeb; + border: 2px solid ${(props) => props.theme.secondaryColor}; + } + } + .avatar-container img { + width: 100%; + height: 100%; + object-fit: cover; + } .banner-btn { margin-right: 15px; white-space: nowrap; - padding: .6rem .7rem; + padding: 0.6rem 0.7rem; min-width: 0rem; font-weight: 600; } - - .banner-btn.book-a-demo{ + .default_avatar { + fill: ${(props) => props.theme.primaryColor}; + } + .banner-btn.book-a-demo { border: 1px solid transparent; - border-radius: .25rem; - color: ${props => props.theme.secondaryColor}; + border-radius: 0.25rem; + color: ${(props) => props.theme.secondaryColor}; background: ${(props) => props.theme.grey121212ToWhite}; transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); - &:hover{ - border: 1px solid ${props => props.theme.secondaryColor}; - background: ${props => props.theme.highlightColor}; - background-color: transparent; - } - &:active { - /* color: #326d62; */ - color: ${props => props.theme.keppelColor}; - border: 1px solid ${props => props.theme.keppelColor}; - background-color: transparent; - } + &:hover { + border: 1px solid ${(props) => props.theme.secondaryColor}; + background-color: transparent; + } + &:active { + color: ${(props) => props.theme.keppelColor}; + border: 1px solid ${(props) => props.theme.keppelColor}; + background-color: transparent; + } } a { display: flex; @@ -75,6 +95,9 @@ const NavigationWrap = styled.header` .dark-theme-toggle { margin-left: 0.5em; } + .dropDown { + margin-left: 3rem; + } } @media screen and (max-width: 992px) { right: -1rem; @@ -89,11 +112,21 @@ const NavigationWrap = styled.header` a { display: none; } + .avatar-container { + margin-left: 0.5em; + margin-bottom: 3em; + } .dark-theme-toggle { margin-left: 0.5em; margin-bottom: 3em; } - + .dropDown-content { + top: 2rem; + left: -6rem; + } + .dropDown { + margin-left: 1rem; + } } } .navbar-wrap { @@ -105,22 +138,22 @@ const NavigationWrap = styled.header` } .mobile-menu-icon { display: none; - color: ${props => props.theme.menuColor}; + color: ${(props) => props.theme.menuColor}; font-size: 24px; transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); } .dropdown { position: absolute; - background: ${props => props.theme.body}; + background: ${(props) => props.theme.body}; opacity: 0; - border: 1px solid ${props => props.theme.grey141414ToGreyF5F5F5}; + border: 1px solid ${(props) => props.theme.grey141414ToGreyF5F5F5}; border-radius: 50px; top: 100%; left: 0; width: 120%; display: block; - box-shadow: 0px 5px 10px 1px rgba(0, 179, 159, 0.50); - animation: bobbleout ease .18s forwards; + box-shadow: 0px 5px 10px 1px rgba(0, 179, 159, 0.5); + animation: bobbleout ease 0.18s forwards; pointer-events: none; transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); } @@ -143,14 +176,14 @@ const NavigationWrap = styled.header` font-weight: 600; } .arrow-icon { - background: #00B39F; + background: #00b39f; border-radius: 25%; } .nav-grid { display: grid; grid-template-columns: 35% 65%; .hr { - background: ${props => props.theme.grey141414ToGreyFAFAFA}; + background: ${(props) => props.theme.grey141414ToGreyFAFAFA}; display: flex; flex-direction: column; position: relative; @@ -161,11 +194,11 @@ const NavigationWrap = styled.header` padding: 0; } .section { - color: ${props => props.theme.text}; + color: ${(props) => props.theme.text}; font-size: 20px; font-weight: 600; - margin-left:0px; - padding-left:0px; + margin-left: 0px; + padding-left: 0px; transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); } li:nth-last-child(2) { @@ -178,26 +211,26 @@ const NavigationWrap = styled.header` padding: 2px 0; display: block; .readmore-btn { - color: ${props => props.theme.text}; + color: ${(props) => props.theme.text}; transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); } &:before { content: none; } - &:hover{ + &:hover { .readmore-btn { - color: ${props => props.theme.menuHoverColor}; - svg{ - margin-left: 3px; - transform: scale(1.2); - } + color: ${(props) => props.theme.menuHoverColor}; + svg { + margin-left: 3px; + transform: scale(1.2); + } } } } } } .nav-display { - border-left: 2px solid ${props => props.theme.grey3C3C3CToGreyF1F1F1}; + border-left: 2px solid ${(props) => props.theme.grey3C3C3CToGreyF1F1F1}; padding-top: 1em; padding-bottom: 1em; border-radius: 0 50px 50px 0; @@ -205,8 +238,8 @@ const NavigationWrap = styled.header` grid-template-columns: 50% 50%; transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); @media screen and (max-width: 992px) and (min-width: 912px) { - padding: .5em; - } + padding: 0.5em; + } } .single-card { @@ -215,7 +248,6 @@ const NavigationWrap = styled.header` justify-content: center; } - .card-text { display: flex; flex-direction: column; @@ -235,10 +267,49 @@ const NavigationWrap = styled.header` } } } + .dropDown { + float: left; + transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); + overflow: hidden; + border-radius: 10px; + margin-right: 1rem; + margin-left: 10rem; + } + .dropDown-content { + position: absolute; + background: ${(props) => props.theme.grey141414ToGreyFAFAFA}; + min-width: 160px; + box-shadow: rgba(0, 179, 159, 0.5) 0px 5px 10px 1px; + z-index: 1; + left: 3rem; + } + .drop-item-icon { + margin-right: 1rem; + } + .drop-item { + display: flex; + cursor: pointer; + color: ${(props) => props.theme.text}; + line-height: 1.5rem; + font-size: 15px; + } + .dropDown-content a { + float: none; + color: ${(props) => props.theme.text}; + padding: 12px 16px; + text-decoration: none; + text-align: left; + display: flex; + } + + .dropDown-content a:hover { + color: ${(props) => props.theme.menuHoverColor}; + } + @keyframes nav-bar-anim { 0% { opacity: 0; - transform: translate3d(0px, 0px, 0px) scale(.5, .5); + transform: translate3d(0px, 0px, 0px) scale(0.5, 0.5); } 100% { @@ -248,30 +319,31 @@ const NavigationWrap = styled.header` } @keyframes bobble { 0% { - transform: translate3d(0px, -15px, 0px) scale(.75, .75); opacity: 0; + transform: translate3d(0px, -15px, 0px) scale(0.75, 0.75); + opacity: 0; } 50% { - transform: translate3d(0px, 0px, 4px) perspective(800px) ; - opacity: 70% + transform: translate3d(0px, 0px, 4px) perspective(800px); + opacity: 70%; } 100% { - transform: translate3d(0px, 0px, 8px) scale(1, 1); - opacity: 100% + transform: translate3d(0px, 0px, 8px) scale(1, 1); + opacity: 100%; } } @keyframes bobbleout { 0% { - transform: translate3d(0px, 0px, 8px) scale(.9, .9); - opacity: 40%; + transform: translate3d(0px, 0px, 8px) scale(0.9, 0.9); + opacity: 40%; } 50% { - transform: translate3d(0px, 0px, 4px) scale(.75, .75); - perspective: (800px); - opacity: 20%; + transform: translate3d(0px, 0px, 4px) scale(0.75, 0.75); + perspective: (800px); + opacity: 20%; } 100% { - transform: translate3d(0px, -15px, 0px) scale(.5, .5); - opacity: 0; + transform: translate3d(0px, -15px, 0px) scale(0.5, 0.5); + opacity: 0; } } @keyframes flowin { @@ -289,7 +361,7 @@ const NavigationWrap = styled.header` } } ul:hover > ul { - animation: bobble ease .3s forwards; + animation: bobble ease 0.3s forwards; pointer-events: auto; visibility: visible; } @@ -309,10 +381,10 @@ const NavigationWrap = styled.header` &:hover { .menu-link { span { - color: ${props => props.theme.menuHoverColor}; + color: ${(props) => props.theme.menuHoverColor}; &:before { opacity: 1; - animation: flowin .5s ease-in; + animation: flowin 0.5s ease-in; } } } @@ -324,7 +396,7 @@ const NavigationWrap = styled.header` a { display: block; &:hover { - color: ${props => props.theme.menuHoverColor} !important; + color: ${(props) => props.theme.menuHoverColor} !important; } &:before { content: none; @@ -335,7 +407,7 @@ const NavigationWrap = styled.header` a, .nav-active { position: relative; - color: ${props => props.theme.menuColor}; + color: ${(props) => props.theme.menuColor}; display: flex; line-height: 1.5rem; font-size: 15px; @@ -351,17 +423,17 @@ const NavigationWrap = styled.header` width: 20px; height: 1px; opacity: 0; - background: ${props => props.theme.menuHoverColor}; + background: ${(props) => props.theme.menuHoverColor}; transition: 450ms all; } &:hover { - color: ${props => props.theme.menuHoverColor}; + color: ${(props) => props.theme.menuHoverColor}; &:before { opacity: 1; } } } - a{ + a { align-items: center; } .menu-link { @@ -378,7 +450,7 @@ const NavigationWrap = styled.header` width: 100%; height: 1px; opacity: 0; - background: ${props => props.theme.menuHoverColor}; + background: ${(props) => props.theme.menuHoverColor}; transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); } } @@ -391,7 +463,7 @@ const NavigationWrap = styled.header` width: 155px; .layer5-colorMode_svg__colorMode1 { transition: fill 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); - fill: ${props => props.theme.whiteToGreen3C494F}; + fill: ${(props) => props.theme.whiteToGreen3C494F}; } } @media screen and (max-width: 992px) and (min-width: 912px) { @@ -401,12 +473,12 @@ const NavigationWrap = styled.header` &.scrolled { box-shadow: rgba(0, 179, 159, 0.2) 0px 10px 25px; .nav { - .nav-item{ + .nav-item { a { - color:${props => props.theme.menuColor}; + color: ${(props) => props.theme.menuColor}; transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); &:hover { - color: ${props => props.theme.menuHoverColor}; + color: ${(props) => props.theme.menuHoverColor}; } } } @@ -416,14 +488,14 @@ const NavigationWrap = styled.header` margin-top: -34px; } } - @media only screen and (min-width:912px) and (max-width:992px){ - .nav{ + @media only screen and (min-width: 912px) and (max-width: 992px) { + .nav { margin-left: 1.375rem; } - #book-a-demo , #get-started-2 { - margin:0; + #book-a-demo, + #get-started-2 { + margin: 0; } - } @media only screen and (max-width: 1100px) { height: auto; @@ -464,29 +536,29 @@ const NavigationWrap = styled.header` padding: 0 10px; visibility: hidden; opacity: 0; - transition: .3s; + transition: 0.3s; } .mobile-dropdown { position: relative; padding: 10px 0 10px 15px; display: block; - background: ${props => props.theme.grey141414ToGreyFAFAFA}; + background: ${(props) => props.theme.grey141414ToGreyFAFAFA}; border-radius: 10px; - box-shadow: 0px 5px 10px 1px rgba(0, 179, 159, 0.50); + box-shadow: 0px 5px 10px 1px rgba(0, 179, 159, 0.5); max-height: 400px; overflow-y: scroll; scrollbar-width: thin; transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); } - .mobile-dropdown::-webkit-scrollbar{ + .mobile-dropdown::-webkit-scrollbar { border-radius: 3px; width: 6px; - } - .mobile-dropdown::-webkit-scrollbar-track{ + } + .mobile-dropdown::-webkit-scrollbar-track { background-color: #cbced1; border-radius: 3px; } - .mobile-dropdown::-webkit-scrollbar-thumb{ + .mobile-dropdown::-webkit-scrollbar-thumb { background-color: #868e96; border-radius: 3px; } @@ -513,16 +585,32 @@ const NavigationWrap = styled.header` animation: close-icon 0.3s ease-in; } @keyframes open-icon { - from { opacity: 0; } - to { opacity: 1; } - 0% { transform: scale(0); } - 100% { transform: scale(1); } + from { + opacity: 0; + } + to { + opacity: 1; + } + 0% { + transform: scale(0); + } + 100% { + transform: scale(1); + } } @keyframes close-icon { - from { opacity: 0; } - to { opacity: 1; } - 0% { transform: rotate(0deg); } - 100% { transform: rotate(180deg); } + from { + opacity: 0; + } + to { + opacity: 1; + } + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(180deg); + } } .mobile-nav-item { padding: 1px; @@ -541,7 +629,7 @@ const NavigationWrap = styled.header` } .mobile-nav-subitem { padding-left: 10px; - padding-top: .4rem; + padding-top: 0.4rem; } .mobile-sub-menu-item { font-size: 1.1rem; @@ -556,7 +644,7 @@ const NavigationWrap = styled.header` .anchor:before { content: none; } - .post-block{ + .post-block { display: flex; flex-direction: column; align-items: stretch; @@ -564,19 +652,19 @@ const NavigationWrap = styled.header` overflow: hidden; margin: 0 auto; padding: 1rem 1rem 0rem 1rem; - &:hover{ - box-shadow: ${props => props.theme.boxShadowGreyBABABAtoBlackTwoFive}; + &:hover { + box-shadow: ${(props) => props.theme.boxShadowGreyBABABAtoBlackTwoFive}; border-radius: 1rem; - .readmore-btn{ - color: ${props => props.theme.menuHoverColor}; - svg{ - margin-left: 3px; - transform: scale(1.2); - } + .readmore-btn { + color: ${(props) => props.theme.menuHoverColor}; + svg { + margin-left: 3px; + transform: scale(1.2); + } } - .post-title{ - color: ${props => props.theme.text}; - transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); + .post-title { + color: ${(props) => props.theme.text}; + transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); } } a:before { @@ -584,32 +672,33 @@ const NavigationWrap = styled.header` } } - .readmore-btn-wrapper{ + .readmore-btn-wrapper { display: flex; justify-content: space-between; } - .post-thumb-block{ + .post-thumb-block { overflow: hidden; border-radius: 10px; height: 160px; max-width: 100%; margin: 0 auto; - .gatsby-image-wrapper, .old-gatsby-image-wrapper{ - height:100%; - transition: all 0.3s ease-in; - } - img{ - max-width: 240px; - max-height: 160px; - width: auto; - height: inherit; - display: block; - text-align: center; - margin-left: auto; + .gatsby-image-wrapper, + .old-gatsby-image-wrapper { + height: 100%; + transition: all 0.3s ease-in; + } + img { + max-width: 240px; + max-height: 160px; + width: auto; + height: inherit; + display: block; + text-align: center; + margin-left: auto; } } - .post-content-block{ + .post-content-block { display: flex; flex-direction: column; flex-grow: 1; @@ -618,11 +707,11 @@ const NavigationWrap = styled.header` position: relative; padding: 20px 0px; } - .post-title{ + .post-title { font-size: 16px; font-weight: 600; line-height: 28px; - color: ${props => props.theme.lightTextColor}; + color: ${(props) => props.theme.lightTextColor}; margin-bottom: 20px; display: block; white-space: nowrap; @@ -630,10 +719,8 @@ const NavigationWrap = styled.header` text-overflow: ellipsis; -webkit-transition: 450ms all; transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); - &:hover{ - color: ${props => props.theme.highlightLightColor}; - - + &:hover { + color: ${(props) => props.theme.highlightLightColor}; } @supports (-webkit-line-clamp: 2) { @@ -646,12 +733,12 @@ const NavigationWrap = styled.header` } } .readmore-btn { - color: ${props => props.theme.lightTextColor}; + color: ${(props) => props.theme.lightTextColor}; display: flex; align-items: center; transition: all 0.3s linear; padding-left: 0px; - svg{ + svg { margin-left: 0px; font-size: 27px; transition: all 0.3s linear; @@ -659,7 +746,7 @@ const NavigationWrap = styled.header` } .dark-theme-toggle { /* margin-left: 2rem; */ - visibility: ${props => typeof props.theme.DarkTheme === "boolean" ? "visible" : "hidden"}; + visibility: ${(props) => typeof props.theme.DarkTheme === "boolean" ? "visible" : "hidden"}; } .toggle { @@ -671,7 +758,7 @@ const NavigationWrap = styled.header` height: var(--size); box-shadow: inset calc(var(--size) * 0.33) calc(var(--size) * -0.25) 0; border-radius: 999px; - color: #00B39F; + color: #00b39f; transition: all 300ms; vertical-align: middle; } @@ -682,123 +769,136 @@ const NavigationWrap = styled.header` --offset-diagonal: calc(var(--size) * 0.45); transform: scale(0.75); color: #3c494f; - box-shadow: inset 0 0 0 var(--size), calc(var(--offset-orthogonal) * -1) 0 0 var(--ray-size), var(--offset-orthogonal) 0 0 var(--ray-size), 0 calc(var(--offset-orthogonal) * -1) 0 var(--ray-size), 0 var(--offset-orthogonal) 0 var(--ray-size), calc(var(--offset-diagonal) * -1) calc(var(--offset-diagonal) * -1) 0 var(--ray-size), var(--offset-diagonal) var(--offset-diagonal) 0 var(--ray-size), calc(var(--offset-diagonal) * -1) var(--offset-diagonal) 0 var(--ray-size), var(--offset-diagonal) calc(var(--offset-diagonal) * -1) 0 var(--ray-size); + box-shadow: inset 0 0 0 var(--size), + calc(var(--offset-orthogonal) * -1) 0 0 var(--ray-size), + var(--offset-orthogonal) 0 0 var(--ray-size), + 0 calc(var(--offset-orthogonal) * -1) 0 var(--ray-size), + 0 var(--offset-orthogonal) 0 var(--ray-size), + calc(var(--offset-diagonal) * -1) calc(var(--offset-diagonal) * -1) 0 + var(--ray-size), + var(--offset-diagonal) var(--offset-diagonal) 0 var(--ray-size), + calc(var(--offset-diagonal) * -1) var(--offset-diagonal) 0 var(--ray-size), + var(--offset-diagonal) calc(var(--offset-diagonal) * -1) 0 var(--ray-size); } .toggle { z-index: 1; } - .toggle:checked~.background { + .toggle:checked ~ .background { --bg: white; } - .toggle:checked~.title { + .toggle:checked ~ .title { --color: #fa0; } .transition-container { - margin: 0%; - max-width: 68%; - position: relative; - z-index: -1; - svg { - .prometheus-partial-colorMode_svg__colorMode1, - .pod-partial-colorMode_svg__colorMode1, - .ingress-gateway-partial-colorMode_svg__colorMode1 { - fill: ${props => props.theme.whiteToBlack}; - transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); - } - .empty-colorMode_svg__colorMode1 { - fill: ${props => props.theme.whiteToGrey121212}; - transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); - } + margin: 0%; + max-width: 68%; + position: relative; + z-index: -1; + svg { + .prometheus-partial-colorMode_svg__colorMode1, + .pod-partial-colorMode_svg__colorMode1, + .ingress-gateway-partial-colorMode_svg__colorMode1 { + fill: ${(props) => props.theme.whiteToBlack}; + transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); + } + .empty-colorMode_svg__colorMode1 { + fill: ${(props) => props.theme.whiteToGrey121212}; + transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); + } - .service-interface-partial-colorMode_svg__colorMode1 { - fill: ${props => props.theme.whiteToBlack}; - transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); - } + .service-interface-partial-colorMode_svg__colorMode1 { + fill: ${(props) => props.theme.whiteToBlack}; + transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); + } - .kubernetes-partial-colorMode_svg__colorMode1 { - fill: ${props => props.theme.blackToWhite}; - transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); - } + .kubernetes-partial-colorMode_svg__colorMode1 { + fill: ${(props) => props.theme.blackToWhite}; + transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); + } - .kubernetes-partial-colorMode_svg__colorMode2 { - fill: ${props => props.theme.whiteToBlack}; - transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); - } - } + .kubernetes-partial-colorMode_svg__colorMode2 { + fill: ${(props) => props.theme.whiteToBlack}; + transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); + } } + } + .ingress-gateway, + .kubernetes, + .pod, + .prometheus, + .supporting-arrows, + .service-interface { + position: absolute; + top: 0%; + left: 0%; + scale: 0.7; + opacity: 0; + transition: 1s; + } - .ingress-gateway, .kubernetes, .pod, .prometheus, .supporting-arrows, .service-interface { - position: absolute; - top: 0%; - left: 0%; - scale: 0.7; - opacity: 0; - transition: 1s; - } - - .supporting-arrows { - opacity: 0; - scale: 1; - } + .supporting-arrows { + opacity: 0; + scale: 1; + } - .supporting-arrows-transition { - opacity: 1; - transition: 0.5s ease-out 0.75s; - } + .supporting-arrows-transition { + opacity: 1; + transition: 0.5s ease-out 0.75s; + } - .ingress-gateway { - translate: -40% 0; - } + .ingress-gateway { + translate: -40% 0; + } - .ingress-gateway-transition { - transform: translateX(40%); - scale: 1; - opacity: 1; - transition: 0.7s; - } + .ingress-gateway-transition { + transform: translateX(40%); + scale: 1; + opacity: 1; + transition: 0.7s; + } - .kubernetes { - translate: 50% -30%; - } + .kubernetes { + translate: 50% -30%; + } - .kubernetes-transition { - transform: translateX(-50%) translateY(30%); - scale: 1; - opacity: 1; - transition: 0.5s; - } + .kubernetes-transition { + transform: translateX(-50%) translateY(30%); + scale: 1; + opacity: 1; + transition: 0.5s; + } - .pod { - translate: 40% 30%; - } + .pod { + translate: 40% 30%; + } - .pod-transition { - transform: translateX(-40%) translateY(-30%); - scale: 1; - opacity: 1; - transition: 0.7s; - } + .pod-transition { + transform: translateX(-40%) translateY(-30%); + scale: 1; + opacity: 1; + transition: 0.7s; + } - .prometheus { - translate: -50% 30%; - } + .prometheus { + translate: -50% 30%; + } - .prometheus-transition { - transform: translateX(50%) translateY(-30%); - scale: 1; - opacity: 1; - transition: 1s; - } + .prometheus-transition { + transform: translateX(50%) translateY(-30%); + scale: 1; + opacity: 1; + transition: 1s; + } - .service-interface { - scale: 1; - opacity: 1; - } + .service-interface { + scale: 1; + opacity: 1; + } `; export default NavigationWrap; diff --git a/src/sections/General/Navigation/utility/CloudIcon.js b/src/sections/General/Navigation/utility/CloudIcon.js new file mode 100644 index 000000000000..888cdd1eb125 --- /dev/null +++ b/src/sections/General/Navigation/utility/CloudIcon.js @@ -0,0 +1,103 @@ +import React from "react"; + +function CloudIcon() { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} + +export default CloudIcon; diff --git a/src/sections/General/Navigation/utility/DefaultAvatar.js b/src/sections/General/Navigation/utility/DefaultAvatar.js new file mode 100644 index 000000000000..dec7d793dfab --- /dev/null +++ b/src/sections/General/Navigation/utility/DefaultAvatar.js @@ -0,0 +1,12 @@ +import React from "react"; + +export default function DefaultAvatar(props) { + return ( + + + + ); +} diff --git a/src/sections/General/Navigation/utility/LogoutIcon.js b/src/sections/General/Navigation/utility/LogoutIcon.js new file mode 100644 index 000000000000..fc889d7b294e --- /dev/null +++ b/src/sections/General/Navigation/utility/LogoutIcon.js @@ -0,0 +1,21 @@ +import React from "react"; + +function LogoutIcon() { + return ( + + + + + ); +} + +export default LogoutIcon; diff --git a/src/sections/General/Navigation/utility/MeshMapIcon.js b/src/sections/General/Navigation/utility/MeshMapIcon.js new file mode 100644 index 000000000000..44d02d542347 --- /dev/null +++ b/src/sections/General/Navigation/utility/MeshMapIcon.js @@ -0,0 +1,123 @@ +import React from "react"; + +function MeshMapIcon() { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} + +export default MeshMapIcon; diff --git a/static/brand/layer5-social-backgrounds.zip b/static/brand/layer5-social-backgrounds.zip new file mode 100644 index 000000000000..81bfe4ca0119 Binary files /dev/null and b/static/brand/layer5-social-backgrounds.zip differ