From d4b8b197a285e4674ce72436ec67290b10d02672 Mon Sep 17 00:00:00 2001
From: Tanuj22 <agarwal.5@iitj.ac.in>
Date: Wed, 28 Oct 2020 02:36:52 +0530
Subject: [PATCH] add hero

Signed-off-by: Tanuj22 <agarwal.5@iitj.ac.in>
---
 .../Animated-steps-list/hero/hero.style.js    | 70 +++++++++++++++++++
 .../Animated-steps-list/hero/index.js         | 28 ++++++++
 src/pages/animated-terminal.js                | 15 +++-
 3 files changed, 112 insertions(+), 1 deletion(-)
 create mode 100644 src/components/Animated-steps-list/hero/hero.style.js
 create mode 100644 src/components/Animated-steps-list/hero/index.js

diff --git a/src/components/Animated-steps-list/hero/hero.style.js b/src/components/Animated-steps-list/hero/hero.style.js
new file mode 100644
index 000000000000..61c19bc7c16f
--- /dev/null
+++ b/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;
+      }
+    }
+  }
+`;
diff --git a/src/components/Animated-steps-list/hero/index.js b/src/components/Animated-steps-list/hero/index.js
new file mode 100644
index 000000000000..07b14afb2d37
--- /dev/null
+++ b/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
diff --git a/src/pages/animated-terminal.js b/src/pages/animated-terminal.js
index 795a26ba8ee4..8217f0f1c8cb 100644
--- a/src/pages/animated-terminal.js
+++ b/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,