From 938db9bc7852a548ea6a2aecb6678672040b786a Mon Sep 17 00:00:00 2001
From: Tvisha <tvisha.raji@keploy.io>
Date: Fri, 6 Dec 2024 18:08:07 +0530
Subject: [PATCH] cta changes plus alignment (#152)

* cta changes plus alignment

* few fixes

---------

Co-authored-by: Tvisha Raji <tvisharaji@Tvishas-MacBook-Pro.local>
Co-authored-by: Animesh Pathak <53110238+Sonichigo@users.noreply.github.com>
---
 components/hero.tsx           | 26 +++++++++++++++++++++-----
 components/ui/banner.tsx      |  4 ++--
 components/ui/header.tsx      | 16 ++++++++--------
 components/ui/mobile-menu.tsx |  4 ++--
 4 files changed, 33 insertions(+), 17 deletions(-)

diff --git a/components/hero.tsx b/components/hero.tsx
index a3d57477..17d042bc 100644
--- a/components/hero.tsx
+++ b/components/hero.tsx
@@ -4,7 +4,7 @@ import VideoThumb from '@/public/images/demo-thumbnail.png';
 import ModalVideo from '@/components/modal-video';
 import Image from "next/image";
 import TestimonialImage from "@/public/images/users/Nutanix_Logo.svg";
-import React from "react";
+import React, { useEffect, useState } from "react";
 import CopyButton from './utils/copyButton';
 import { TrustedBy } from './trustedBy';
 import Link from 'next/link';
@@ -12,6 +12,21 @@ import APItext from "@/public/images/apiText.png";
 import Banner from './ui/banner';
 
 export default function Hero() {
+  const [isMobile, setIsMobile] = useState(false);
+
+  // Detect screen size on component mount and update state
+  useEffect(() => {
+    const handleResize = () => {
+      setIsMobile(window.innerWidth <= 1038); // Adjust this breakpoint as needed
+    };
+    
+    handleResize(); // Check on mount
+    window.addEventListener("resize", handleResize);
+
+    // Cleanup listener on component unmount
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
   return (
     <section className="relative">
 
@@ -92,9 +107,10 @@ export default function Hero() {
                    data-aos-delay="300">
         <div className="mb-4">
                   {/* Wrapping Link with NeonButton */}
-                    <Link
+                  <Link
                       className="btn text-secondary-300 bg-primary-300 hover:text-gradient-500 w-full sm:w-auto sm:mb-0"
-                      href="vscode:extension/Keploy.keployio" target="_blank"
+                      href={isMobile ? "https://marketplace.visualstudio.com/items?itemName=Keploy.keployio" : "vscode:extension/Keploy.keployio"} // Conditionally change the href
+                      target="_blank"
                     >
                       Try VS Code Extension
                     </Link>
@@ -103,9 +119,9 @@ export default function Hero() {
                   {/* Wrapping Link with NeonButton */}
                     <Link
                       className="btn text-white bg-green-900 hover:text-emerald-200 w-full  sm:mb-0"
-                      href="https://app.keploy.io/signin"
+                      href="https://github.com/Keploy/keploy"
                     >
-                      Sign In to Keploy Console
+                      Explore Open Source Now 
                     </Link>
                 </div>
               </div>
diff --git a/components/ui/banner.tsx b/components/ui/banner.tsx
index 57b7ffd0..3f4f3dcc 100644
--- a/components/ui/banner.tsx
+++ b/components/ui/banner.tsx
@@ -4,7 +4,7 @@ import React, { useState } from "react";
 import { FiX } from "react-icons/fi"; 
 
 const Banner = () => {
-  const [showBanner, setShowBanner] = useState(true);
+  const [showBanner, setShowBanner] = useState(false);
 
   if (!showBanner) return null;
 
@@ -61,4 +61,4 @@ const Banner = () => {
   );
 };
 
-export default Banner;
+export default Banner;
\ No newline at end of file
diff --git a/components/ui/header.tsx b/components/ui/header.tsx
index 9d483196..105a7d0b 100644
--- a/components/ui/header.tsx
+++ b/components/ui/header.tsx
@@ -69,33 +69,33 @@ export default function Header() {
       <div className="max-w-6xl mx-auto px-5 sm:px-6">
         <div className="flex items-center justify-between h-16 md:h-20">
           {/* Site branding */}
-          <div className="shrink-0 mr-4 flex-grow-0 w-2/12 ">
+          <div className="shrink-0 mr-4 flex-grow-0 w-2/12 mt-[-15px] ">
             <Logo />
           </div>
           {/* Desktop navigation */}
-          <nav className="hidden lg:flex  flex-grow-0 w-6/12">
+          <nav className="hidden lg:flex justify-start flex-grow-0 w-6/12">
             {/* Desktop privacy-policy in links */}
             <ul className="flex grow justify-end flex items-center">
             <li>
                 <Link
                   target="_blank"
                   href="https://keploy.io/devscribe"
-                  className="font-medium text-gray-600  hover:text-primary-300 px-5 py-3 flex items-center transition duration-150 ease-in-out"
+                  className="font-medium text-gray-600  hover:text-primary-300 px-3 py-3 flex items-center transition duration-150 ease-in-out"
                 >
                   DevScribe
                 </Link>
               </li>
-              <li className="px-5">
+              <li className="px-4">
                <Product/>
               </li>
-              <li className="px-5">
+              <li className="px-4">
                <Solutions/>
               </li>
-              <li className="px-5">
+              <li className="px-4">
                 {" "}
                 <Docs />
               </li>
-              <li className="px-5">
+              <li className="px-4">
                 {" "}
                 <Resources />
               </li>
@@ -139,7 +139,7 @@ export default function Header() {
               target="_blank"
               className="btn-sm py-3 text-gray-200 bg-secondary-300  hover:text-primary-300 "
             >
-              <span>Sign In</span>
+              <span>Sign In Now</span>
               {/*<svg className="w-3 h-3 fill-current   hover:text-primary-300 shrink-0 ml-2 -mr-1" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">*/}
               {/*  <path d="M11.707 5.293L7 .586 5.586 2l3 3H0v2h8.586l-3 3L7 11.414l4.707-4.707a1 1 0 000-1.414z" fillRule="nonzero" />*/}
               {/*</svg>*/}
diff --git a/components/ui/mobile-menu.tsx b/components/ui/mobile-menu.tsx
index 1c04d57e..d33bc7d5 100644
--- a/components/ui/mobile-menu.tsx
+++ b/components/ui/mobile-menu.tsx
@@ -322,10 +322,10 @@ const MobileMenu: React.FC<MobileMenuProps> = ({ starsCount }) => {
             {/*</li>*/}
             <li>
               <Link
-                href="https://calendar.app.google/8Ncpff4QnAhpVnYd8"
+                href="https://app.keploy.io"
                 className="btn-sm text-gray-200 bg-secondary-300 mt-3  hover:text-primary-300 ml-3"
               >
-                <span>Book Cloud Demo</span>
+                <span>Try now for free</span>
                 <svg
                   className="w-3 h-3 fill-current   hover:text-primary-300 shrink-0 ml-2 -mr-1"
                   viewBox="0 0 12 12"