From d84bc9e86158075918c6aca92d90ac3edc54e266 Mon Sep 17 00:00:00 2001
From: Sriramajeyam Sugumaran <yesoreyeram@gmail.com>
Date: Fri, 17 Dec 2021 17:47:26 +0000
Subject: [PATCH] home page update

---
 website/src/components/Features.tsx      |  2 +-
 website/src/components/Header.tsx        | 14 ++++----
 website/src/components/ThemeSwitcher.tsx |  4 +--
 website/src/styles/base.scss             | 43 +++++++++++++++++-------
 website/src/styles/theme.scss            | 29 ++++++++++++++--
 5 files changed, 66 insertions(+), 26 deletions(-)

diff --git a/website/src/components/Features.tsx b/website/src/components/Features.tsx
index 0eed51a9..6fd283f2 100644
--- a/website/src/components/Features.tsx
+++ b/website/src/components/Features.tsx
@@ -3,7 +3,7 @@ import { Link, navigate } from 'gatsby';
 
 export const Features = () => {
   return (
-    <div className="container my-4" id="features-section">
+    <div className="container my-4" id="features-section" style={{ zIndex: 200 }}>
       <div className="row">
         <div className="col-sm-6 col-lg-6 mb-4">
           <div className="card p-3 text-center">
diff --git a/website/src/components/Header.tsx b/website/src/components/Header.tsx
index 9f45c13a..f57ff9c7 100644
--- a/website/src/components/Header.tsx
+++ b/website/src/components/Header.tsx
@@ -28,7 +28,7 @@ export const Header = (props: HeaderProps) => {
     <>
       <nav id="topnav" className="navbar navbar-expand-lg fixed-top navbar-dark" aria-label="Main navigation">
         <div className="container-fluid">
-          <Link id="brand" className="fw-bold px-2" to="/" style={{ textDecoration: 'none' }}>
+          <Link id="brand" className="fw-bold px-2" to="/">
             {props.title}
           </Link>
           <button className="navbar-toggler p-0 border-0" type="button" onClick={onToggle} aria-label="Toggle navigation">
@@ -53,7 +53,7 @@ export const Header = (props: HeaderProps) => {
               <li className="nav-item">
                 <button>
                   <a className="nav-link" href="/yesoreyeram/grafana-infinity-datasource/issues/new/choose" target="_blank" rel="noreferrer">
-                    <i className="fas fa-bug text-secondary" title="Report Bug"></i>
+                    <i className="fas fa-bug" title="Report Bug"></i>
                     <span className="px-2 small-screen-only">Report Bug</span>
                   </a>
                 </button>
@@ -61,7 +61,7 @@ export const Header = (props: HeaderProps) => {
               <li className="nav-item">
                 <button>
                   <a className="nav-link" href="/yesoreyeram/grafana-infinity-datasource" target="_blank" rel="noreferrer">
-                    <i className="fab fa-github text-secondary" title="Github repo"></i>
+                    <i className="fab fa-github" title="Github repo"></i>
                     <span className="px-2 small-screen-only">Github</span>
                   </a>
                 </button>
@@ -69,7 +69,7 @@ export const Header = (props: HeaderProps) => {
               <li className="nav-item">
                 <button>
                   <a href="https://www.youtube.com/playlist?list=PL4vVKeEREln5ub1qrSMrwAabU0FiSNtmC" className="nav-link" target="_blank" rel="noreferrer">
-                    <i className="fab fa-youtube text-secondary" title="Youtube videos"></i>
+                    <i className="fab fa-youtube" title="Youtube videos"></i>
                     <span className="px-2 small-screen-only">Youtube</span>
                   </a>
                 </button>
@@ -77,17 +77,17 @@ export const Header = (props: HeaderProps) => {
               <li className="nav-item">
                 <button>
                   <a className="nav-link" href="https://twitter.com/grafanaInfinity" target="_blank" rel="noreferrer">
-                    <i className="fab fa-twitter text-secondary" title="Updates in twitter"></i>
+                    <i className="fab fa-twitter" title="Updates in twitter"></i>
                     <span className="px-2 small-screen-only">Follow</span>
                   </a>
                 </button>
               </li>
             </ul>
             <ul className="navbar-nav d-flex mb-2 mb-lg-0">
-              <a className="nav-links special-menu rounded  btn-primary" href="https://grafana-infinity-datasource.herokuapp.com/d/try/try?orgId=1&editPanel=2" target="_blank" rel="noreferrer">
+              <a className="nav-links rounded special-menu" href="https://grafana-infinity-datasource.herokuapp.com/d/try/try?orgId=1&editPanel=2" target="_blank" rel="noreferrer">
                 Try online
               </a>
-              <Link className="nav-links rounded btn-primary special-menu" to="/wiki/installation">
+              <Link className="nav-links rounded special-menu" to="/wiki/installation">
                 Install
               </Link>
             </ul>
diff --git a/website/src/components/ThemeSwitcher.tsx b/website/src/components/ThemeSwitcher.tsx
index ebd4bad2..5ecb7836 100644
--- a/website/src/components/ThemeSwitcher.tsx
+++ b/website/src/components/ThemeSwitcher.tsx
@@ -7,9 +7,9 @@ export const ThemeSwitcher = () => {
   }, []);
   return (
     <a onClick={() => {}}>
-      <button style={{ background: 'transparent', border: 'none', padding: 0, margin: 0 }}>
+      <button>
         <i
-          className="fas fa-palette text-secondary"
+          className="fas fa-palette"
           onClick={() => {
             let isLightTheme = document.getElementsByTagName('html')[0].classList.contains('light-theme');
             document.getElementsByTagName('html')[0].classList.toggle('light-theme');
diff --git a/website/src/styles/base.scss b/website/src/styles/base.scss
index f784e7ac..4c7cbc6d 100644
--- a/website/src/styles/base.scss
+++ b/website/src/styles/base.scss
@@ -91,8 +91,8 @@ body::-webkit-scrollbar-thumb {
   h2 {
     display: inline-block;
     padding-bottom: 10px;
-    margin-bottom: 10px;
-    border-bottom: 10px solid;
+    margin: 20px 0px;
+    border-bottom: 2px solid;
   }
   img {
     width: 100%;
@@ -128,10 +128,15 @@ img[src*='#center'] {
 }
 
 /* subheader */
-#topnav .nav-link:hover {
-  background-clip: text;
-  -webkit-background-clip: text;
-  background-size: 600% 600%;
+#topnav {
+  #brand {
+    text-decoration: none;
+  }
+  .nav-link:hover {
+    background-clip: text;
+    -webkit-background-clip: text;
+    background-size: 600% 600%;
+  }
 }
 #banner-title {
   background-clip: text;
@@ -174,16 +179,28 @@ img[src*='#center'] {
 }
 
 .nav-item {
-  .fab,
-  .fas {
-    &:hover {
-      color: #00e5ea !important;
-    }
-  }
   button {
     margin: 0;
     padding: 0;
-    background: transparent;
     border: none;
   }
 }
+.mainbg {
+  position: relative;
+  > div {
+    position: relative;
+    z-index: 2;
+  }
+}
+.mainbg::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  background-repeat: no-repeat;
+  background-size: cover;
+  filter: grayscale(0.8) blur(2px);
+}
diff --git a/website/src/styles/theme.scss b/website/src/styles/theme.scss
index 8290c16e..da3114da 100644
--- a/website/src/styles/theme.scss
+++ b/website/src/styles/theme.scss
@@ -25,9 +25,15 @@ html.dark-theme {
       #brand {
         color: white !important;
       }
+      .special-menu,
       a:hover {
         color: $cyanA9 !important;
       }
+      .nav-item {
+        button {
+          background: transparent;
+        }
+      }
     }
     #subnav {
       background-color: $gray12 !important;
@@ -77,7 +83,7 @@ html.dark-theme {
     .mainbg {
       background: $gray12 !important;
       #banner-title {
-        color: $cyanA9 !important;
+        color: $gray1 !important;
       }
       h3.typewriter,
       h3.typewriter span {
@@ -86,6 +92,18 @@ html.dark-theme {
       p {
         color: $gray1;
       }
+      .btn-primary,
+      .btn-primary.a,
+      .special-menu,
+      .special-menu.a {
+        background-color: $cyanA9 !important;
+        color: white !important;
+        border: none;
+      }
+      &::before {
+        // image credit : https://unsplash.com/photos/8xnaQKWjDrM
+        background-image: url(https://images.unsplash.com/photo-1607723619497-98a79f01ba90?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2882&q=80);
+      }
     }
     .blog-post {
       h2 {
@@ -139,7 +157,7 @@ html.light-theme {
       .btn-primary.a,
       .special-menu,
       .special-menu.a {
-        background-color: #3d71d9 !important;
+        background-color: $cyanA9 !important;
         color: white !important;
       }
     }
@@ -191,7 +209,7 @@ html.light-theme {
     .mainbg {
       background: $gray3 !important;
       #banner-title {
-        color: $cyanA9 !important;
+        color: $gray12 !important;
       }
       h3.typewriter,
       h3.typewriter span {
@@ -200,6 +218,11 @@ html.light-theme {
       p {
         color: $gray12;
       }
+      &::before {
+        // image credit : https://unsplash.com/photos/qK39tusA9uE
+        background-image: url(https://images.unsplash.com/photo-1633415565491-7f17373f2e7d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2340&q=80);
+        filter: grayscale(0.2) blur(10px);
+      }
     }
     .blog-post {
       h2 {