add hero

Signed-off-by: Tanuj22 <[email protected]>

src/components/Animated-steps-list/hero/hero.style.js

@@ -0,0 +1,70 @@
+import styled from "styled-components";
+
+export const HeroWrapper = styled.div`
+ // min-height: min(45vw, 750px);
+ // background-image: url(/img/hero-left.svg), url(/img/hero-right.svg);
+ // background-position: top left, top right;
+ // background-size: auto 100%, auto 100%;
+ // background-repeat: no-repeat, no-repeat;
+ // @media (max-width: 600px) {
+ // background-size: auto 70%, auto 70%;
+ // }
+ 
+ h1 {
+ color: ${props=> props.theme.black};
+ font-size: 48px;
+ line-height: 50px;
+ padding-bottom: 30px;
+ 
+ @media (max-width: 768px) {
+ font-size: 34px;
+ }
+ }
+
+ padding: 250px 0;
+
+ @media (max-width: 850px) {
+ padding: 197px 0;
+ }
+
+ .content {
+ max-width: 500px;
+
+ @media (max-width: 1119px) {
+ max-width: 350px;
+ }
+
+ @media (max-width: 850px) {
+ margin-left: auto;
+ margin-right: auto;
+ max-width: 550px;
+ text-align: center;
+ }
+
+ & > h1 {
+ margin-top: 0;
+ }
+
+ & > p {
+ &.subtitle {
+ font-size: 17px;
+ line-height: 25px;
+ }
+ &.description {
+ font-size: 15px;
+ line-height: 28px;
+ }
+ }
+
+ & .links {
+ flex-wrap: wrap;
+ margin-top: calc(32px - 8px);
+ margin-bottom: -8px;
+ margin-left: -8px;
+
+ & a {
+ margin: 8px;
+ }
+ }
+ }
+`;

src/components/Animated-steps-list/hero/index.js

@@ -0,0 +1,28 @@
+import React from "react";
+import {Link} from 'gatsby'
+import Button from "../../../reusecore/Button";
+import { HeroWrapper } from "./hero.style"
+
+
+const Hero = ({ title, description, subtitle, links }) => {
+ return(
+ <HeroWrapper>
+ <div className="content">
+ <h1>{title}</h1>
+ <p className="subtitle">{subtitle}</p>
+ <p className="description">{description}</p>
+ <div className="links">
+ {links.map((link) => {
+ return (
+ <Link to={link.url}>
+ <Button secondary>{link.text}</Button>
+ </Link>
+ )
+ })}
+ </div>
+ </div>
+ </HeroWrapper>
+ )
+};
+
+export default Hero

src/pages/animated-terminal.js

@@ -7,6 +7,7 @@ import SEO from "../components/seo";
 import Navigation from "../sections/Navigation";
 import Footer from "../sections/Footer";
 import AnimatedStepsList from "../components/Animated-steps-list";
+import Hero from "../components/Animated-steps-list/hero";
 import Features from "../components/Features-carousel";
 import { GlobalStyle } from "../sections/app.style";
 import theme from "../theme/blog/themeStyles";
@@ -20,7 +21,19 @@ const temp = () => (
  <SEO title="mesheryctl | Command Line Management of Service Meshes" />
  <Navigation />
  <Container>
- <div style = {{ marginTop: "970px", marginBottom: "400px",}}>
+ <Hero
+ title="Install. Deploy. Patters."
+ subtitle="Lorem ipsum dolor sit amet, consectetur adipiscing elit, adipiscing"
+ description="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
+ links={[
+ {
+ text: 'Get Started',
+ url: '/',
+ type: 'inbound',
+ },
+ ]}
+ />
+ <div style = {{ marginBottom: "400px",}}>
  <AnimatedStepsList
  terminalHeroState={{
  frameLength: 100,