[WIP] feat: Revamp landing page

apps/web/public/hero/index.tsx

@@ -1,4 +1,7 @@
 import ColorBGSVG from './colour-bg.svg'
-import HeroImage from './heroImage.png'
+import HeroImage from './heroImage.webp'
+import TopGradientSVG from './top-grad.svg'
+import BottomGradientSVG from './buttonGradient.svg'
+import VideoSVG from './video.svg'
 
-export { ColorBGSVG, HeroImage }
+export { ColorBGSVG, HeroImage, TopGradientSVG, BottomGradientSVG, VideoSVG }

apps/web/public/navbar/index.ts

@@ -0,0 +1,3 @@
+import GithubSVG from './github.svg'
+
+export { GithubSVG }

apps/web/public/shared/index.ts

@@ -1,5 +1,6 @@
 import Logo from './logo.svg'
 import LogoM from './logoM.svg'
 import FooterLogoSVG from './footerLogo.svg'
+import ArrowRight from './arrow-right.svg'
 
-export { Logo, FooterLogoSVG, LogoM }
+export { Logo, FooterLogoSVG, LogoM, ArrowRight }

apps/web/src/app/(main)/layout.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import { usePathname } from 'next/navigation'
+import { TopGradientSVG } from '@public/hero'
 import Footer from '@/components/shared/footer'
 import Navbar from '@/components/shared/navbar'
 
@@ -17,8 +18,9 @@ export default function MainLayout({
         children
       ) : (
         <>
-          <div className="flex w-full justify-center">
+          <div className="relative flex w-full justify-center">
             <Navbar />
+            <TopGradientSVG className="absolute -z-10" />
           </div>
           {children}
           <Footer />

apps/web/src/app/global.css

@@ -3,24 +3,30 @@
 @tailwind utilities;
 
 body {
-  background: #04050A;
+  background: #010f13;
   color: white;
   color-scheme: dark;
 }
 
 .gradBtnBg {
   background: transparent;
   background-size: 100% 100%;
-  transition: background .6s ease,background-size .6s ease-in-out
+  transition:
+    background 0.6s ease,
+    background-size 0.6s ease-in-out;
 }
 
 .gradBtnBg:hover {
-  background: radial-gradient(84.92% 150% at 50% 138.75%,hsla(0,0%,100%,.24) 0,hsla(0,0%,100%,0) 100%),hsla(0,0%,100%,.01);
-  background-size: 150% 150%
+  background:
+    radial-gradient(
+      84.92% 150% at 50% 138.75%,
+      hsla(0, 0%, 100%, 0.24) 0,
+      hsla(0, 0%, 100%, 0) 100%
+    ),
+    hsla(0, 0%, 100%, 0.01);
+  background-size: 150% 150%;
 }
 
-
-
 @layer base {
   :root {
     --background: 0 0% 100%;
@@ -77,13 +83,11 @@ body {
   }
 }
 
-
-
 @layer base {
   * {
     @apply border-border;
   }
   body {
     @apply bg-background text-foreground;
   }
-}
+}

apps/web/src/components/CtaButton/index.tsx

@@ -0,0 +1,30 @@
+// eslint-disable-next-line camelcase -- IGNORE ---
+import { Geist_Mono } from 'next/font/google'
+import type { ButtonHTMLAttributes } from 'react'
+import React from 'react'
+
+interface CtaButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  children: React.ReactNode
+}
+
+const geistMono = Geist_Mono({
+  subsets: ['latin'],
+  weight: ['400', '700']
+})
+
+export default function CtaButton({
+  children,
+  ...props
+}: CtaButtonProps): React.JSX.Element {
+  return (
+    <button
+      className={`${geistMono.className} relative m-1 flex gap-1 overflow-hidden rounded-xl border-4 border-[#0B3038] bg-[#0B798C] bg-gradient-to-b from-white/[6%] to-transparent px-3 py-2 text-[#D4F7FF] shadow-lg shadow-[#005EFC]/[25%]`}
+      type="button"
+      {...props}
+    >
+      <div className="absolute left-0 top-0 h-full w-full shadow-[inset_-1px_5px_5px_-1px_rgba(255,255,255,_0.20)]" />
+      <div className="flex items-center gap-2">{children}</div>
+      <div className="absolute bottom-0 left-0 h-full w-full shadow-[inset_0px_-1px_3px_0px_rgba(255,255,255,_0.32)]" />
+    </button>
+  )
+}

apps/web/src/components/TertiaryButton/index.tsx

@@ -0,0 +1,28 @@
+// eslint-disable-next-line camelcase -- IGNORE ---
+import { Geist_Mono } from 'next/font/google'
+import type { ButtonHTMLAttributes } from 'react'
+import React from 'react'
+
+interface CtaButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  children: React.ReactNode
+}
+
+const geistMono = Geist_Mono({
+  subsets: ['latin'],
+  weight: ['400', '700']
+})
+
+export default function TertiaryButton({
+  children,
+  ...props
+}: CtaButtonProps): React.JSX.Element {
+  return (
+    <button
+      className={`${geistMono.className} flex items-center gap-3 rounded-[8px] border border-white/[8%] bg-[#99EEFF14] px-4 py-2 text-white`}
+      type="button"
+      {...props}
+    >
+      {children}
+    </button>
+  )
+}

apps/web/src/components/hero/index.tsx

@@ -1,45 +1,84 @@
 'use client'
-import Image from 'next/image'
 import { Toaster } from 'sonner'
-import { HeroImage } from '@public/hero'
-import EncryptButton from '../ui/encrypt-btn'
+import { GithubSVG } from '@public/navbar'
+import { BottomGradientSVG, HeroImage, VideoSVG } from '@public/hero'
+import { ArrowRight } from '@public/shared'
+import Image from 'next/image'
+// eslint-disable-next-line camelcase -- IGNORE ---
+import { Geist, Geist_Mono } from 'next/font/google'
+import CtaButton from '../CtaButton'
 import { isUserLoggedIn } from '@/utils/is-user-logged-in'
 
+const geist = Geist({
+  subsets: ['latin']
+})
+const geistMono = Geist_Mono({
+  subsets: ['latin'],
+  weight: ['400', '700']
+})
 function Hero(): React.JSX.Element {
   return (
     <>
       <Toaster />
-      <div className="relative -top-8 flex h-screen w-full flex-col items-center justify-center  bg-[url(/hero/colour-bg.svg)]  bg-cover bg-no-repeat md:pt-[36rem]">
-        <section className="flex flex-col items-center gap-8 py-[6.88rem] ">
+      <div className=" mt-[4.5rem] flex w-full flex-col items-center justify-center">
+        <div className="flex w-full flex-col items-center justify-center gap-3">
+          <div
+            className={`${geist.className} flex items-center gap-2 rounded-full border border-[#33E3FF] px-3 py-2 text-sm`}
+          >
+            <span className="font-medium text-[#C3E9EF]">Secured by</span>
+            <div className="flex items-center gap-1">
+              <GithubSVG height={16} width={16} />
+              <span>Github Secure Open Source Fund</span>
+            </div>
+          </div>
           <h1
-            className={` text-brandBlue w-[25rem] text-center text-4xl md:w-auto md:text-7xl`}
-            style={{ textShadow: '0px 4px 4px rgba(202, 236, 241, 0.25)' }}
+            className={`${geist.className} mt-4 w-[37.5rem] bg-gradient-to-b from-[#CFF8FF] to-[#E5EFFE] bg-clip-text text-center text-7xl font-semibold text-transparent`}
           >
-            The better .env file replacement
+            The smarter .env file replacement
           </h1>
-          <span className="text-brandBlue/80 flex w-[20rem] flex-col justify-center text-center text-sm md:w-[35rem] md:text-xl md:leading-[2rem]">
-            <p>Stop DMing your Environment variables</p>
-            <p>And start syncing them securely & instantly </p>
-          </span>
-          <a href="https://app.keyshade.xyz" rel="noreferrer" target="_blank">
-            <div className="border-brandBlue/[8%] rounded-full border p-[0.31rem] ">
-              <EncryptButton
-                TARGET_TEXT={
-                  isUserLoggedIn() ? 'Open app' : 'Try Keyshade for Free'
-                }
-              />
-            </div>
-            <p className="mt-2 text-center text-sm text-white/30">
-              Currently in alpha
-            </p>
+          <p
+            className={`${geist.className} w-[22.5rem] text-center text-base text-[#E9FCFFD6]`}
+          >
+            Stop DMing your Environment variables right now. And start syncing
+            them securely & instantly
+          </p>
+        </div>
+        <div className="mt-[2rem] flex items-center gap-3">
+          <a
+            href="https://cal.com/keyshade/demo"
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            <CtaButton>
+              {' '}
+              <VideoSVG /> Schedule a Demo
+            </CtaButton>
+          </a>
+          <a
+            href="https://app.keyshade.xyz"
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            <button
+              className={`${geistMono.className} flex items-center gap-3 rounded-[8px] border border-[#33E3FF]/[60%] bg-[#99EEFF14] px-4 py-2 text-[#D4F7FF]`}
+              type="button"
+            >
+              {isUserLoggedIn() ? 'Open app' : 'Sign in to Keyshade'}{' '}
+              <ArrowRight />
+            </button>
           </a>
-        </section>
-        <Image
-          alt="hero image"
-          className="mt-[3rem] p-2"
-          placeholder="blur"
-          src={HeroImage}
-        />
+        </div>
+        <div className="-z-10 -mt-[7rem] flex flex-col items-center">
+          <BottomGradientSVG />
+          <Image
+            alt="hero image"
+            className="max-w-[82rem]"
+            draggable={false}
+            priority
+            quality={100}
+            src={HeroImage}
+          />
+        </div>
       </div>
     </>
   )

apps/web/src/components/shared/footer/index.tsx

@@ -22,7 +22,7 @@ function Footer(): React.JSX.Element {
             particleColor="#FFFFFF"
             particleDensity={1200}
           />
-          <div className="absolute inset-0 h-full w-full bg-[#04050A] [mask-image:radial-gradient(350px_200px_at_top,transparent_20%,white)]" />
+          <div className="absolute inset-0 h-full w-full bg-[#010f13] [mask-image:radial-gradient(350px_200px_at_top,transparent_20%,white)]" />
         </div>
       </div>
       <div className="mx-auto flex w-[90%] items-center justify-center">
@@ -45,8 +45,9 @@ function Footer(): React.JSX.Element {
                 >
                   <EncryptText TARGET_TEXT="Docs" />
                 </a>
-                <a className="text-white/60 transition-colors hover:text-white"
-                  href='https://blog.keyshade.xyz/'
+                <a
+                  className="text-white/60 transition-colors hover:text-white"
+                  href="https://blog.keyshade.xyz/"
                   rel="noreferrer"
                   target="_blank"
                 >