web(ui): modified hero

Author: kartikver15gr8

app/globals.css

@@ -224,3 +224,23 @@ body {
   height: 0;
   pointer-events: none;
 }
+
+.mask-bottom-dark {
+  -webkit-mask-image: linear-gradient(
+    to bottom,
+    black 0%,
+    rgba(0, 0, 0, 0.9) 20%,
+    rgba(0, 0, 0, 0.6) 40%,
+    rgba(0, 0, 0, 0.3) 55%,
+    transparent 70%
+  );
+
+  mask-image: linear-gradient(
+    to bottom,
+    black 0%,
+    rgba(0, 0, 0, 0.9) 20%,
+    rgba(0, 0, 0, 0.6) 40%,
+    rgba(0, 0, 0, 0.3) 55%,
+    transparent 70%
+  );
+}

components/landing/features.tsx

@@ -26,8 +26,8 @@ export default function Features() {
   };
 
   return (
-    <section className="min-h-screen relative flex flex-col justify-center bg-gradient-to-b from-[#0A0A0A] via-[#131516] to-[#0A0A0A] mt-5 px-4 sm:px-6 md:px-10 lg:px-14 xl:px-28 2xl:px-40 gap-y-3 sm:gap-y-4 md:gap-y-5 xl:gap-y-6">
-      <div className="relative ">
+    <section className=" relative flex flex-col justify-center bg-gradient-to-b from-[#0A0A0A] via-[#131516] to-[#0A0A0A] px-4 sm:px-6 md:px-10 lg:px-14 xl:px-28 2xl:px-40 gap-y-3 sm:gap-y-4 md:gap-y-5 xl:gap-y-6 pt-10 md:pt-0  pb-20 xl:pb-28">
+      <div className="relative">
         <p className="text-xl md:text-3xl lg:text-4xl xl:text-6xl font-medium pb-3 ">
           Everything you need
         </p>

components/landing/hero.tsx

@@ -34,7 +34,7 @@ export default function Hero() {
         "/api/waitlist",
         {
           userEmail: email.trim(),
-        }
+        },
       );
 
       if (response.data) {
@@ -62,7 +62,7 @@ export default function Hero() {
   };
 
   const handleKeyPress = (
-    event: React.KeyboardEvent<HTMLInputElement>
+    event: React.KeyboardEvent<HTMLInputElement>,
   ): void => {
     if (event.key === "Enter" && !isLoading) {
       waitListCall();
@@ -71,7 +71,7 @@ export default function Hero() {
 
   return (
     <div className="">
-      <div className="relative h-[300px] sm:h-[400px] lg:h-[500px] flex px-4 sm:px-6 md:px-10 lg:px-14 xl:px-28 2xl:px-40 justify-center items-center">
+      <div className="relative h-[300px] sm:h-[400px] flex px-4 sm:px-6 md:px-10 lg:px-14 xl:px-28 2xl:px-40 justify-center items-center ">
         <Image className="absolute opacity-20 z-0" src={grid} alt="" />
         <div className=" flex flex-col items-center md:font-bold ">
           <motion.p
@@ -103,28 +103,6 @@ export default function Hero() {
             <p>Introducing the system for modern software development.</p>
             <p>Organize issues, projects, and product roadmaps.</p>
           </motion.div>
-
-          {/* <BlurFade inView delay={1} className=" mt-10 flex gap-x-2">
-            <div className="border border-[#686464] h-10 md:h-12 w-fit bg-[#121212a6] flex items-center p-1 rounded-full shadow-2xl shadow-[#7b7a7f74]">
-              <input
-                onChange={(e) => {
-                  setEmail(e.target.value);
-                }}
-                className="rounded-md h-full bg-transparent px-3 outline-none font-extralight w-60 sm:w-64 md:w-96 text-[14px] sm:text-sm md:text-[16px]"
-                placeholder="Email"
-                value={email}
-                disabled={isLoading}
-                onKeyDown={handleKeyPress}
-              ></input>
-              <button
-                onClick={waitListCall}
-                disabled={(email.length == 0 ? true : false) || isLoading}
-                className="h-full px-4 text-[14px] sm:text-sm md:text-[16px] rounded-full text-white bg-[#232222] border border-[#565555] cursor-pointer hover:bg-[#363537] transition-all duration-300"
-              >
-                {!isLoading ? "Join waitlist" : <Image src={spinner} alt="" />}
-              </button>
-            </div>
-          </BlurFade> */}
         </div>
       </div>
       <HomeBanner />
@@ -139,9 +117,9 @@ const HomeBanner = () => {
       inView
       className="px-4 sm:px-6 md:px-10 lg:px-14 xl:px-28 2xl:px-40"
     >
-      <div className="flex justify-center border border-[#313032] rounded-2xl p-1 md:p-2 bg-[#16161681]">
+      <div className="relative flex justify-center border-t border-[#313032c6] rounded-2xl p-1 md:p-2 bg-[#0A0A0A]">
         <Image
-          className="rounded-[11px] border border-[#515252]"
+          className="rounded-[11px] border border-[#313032] mask-bottom-dark"
           src={homebannerImg}
           alt="img"
         />

components/landing/navbar.tsx

@@ -2,7 +2,7 @@
 
 import Image from "next/image";
 import Link from "next/link";
-import { motion } from "framer-motion";
+import { AnimatePresence, motion } from "framer-motion";
 import { useEffect, useState } from "react";
 import { useSession, signIn, signOut } from "@/utils/auth";
 import { usePathname } from "next/navigation";
@@ -194,34 +194,34 @@ export default function Navbar() {
               <p>Star on GitHub</p>
               <SVGIcon className="flex w-3 lg:w-4" svgString={RAW_ICONS.Star} />
             </Link>
-            {profileTabOpen && (
-              <div
-                className={`absolute top-13 -right-2 w-44 h-fit bg-[rgba(0,0,0,0.1)] backdrop-blur-lg border border-[#414141] rounded-xl shadow-lg p-1 transition-all duration-300 ${
-                  profileTabOpen
-                    ? "opacity-100 scale-100"
-                    : "opacity-0 scale-95 pointer-events-none"
-                }`}
-              >
-                {optionsArr.map((elem, key) => {
-                  return (
+            <AnimatePresence>
+              {profileTabOpen && (
+                <motion.div
+                  initial={{ opacity: 0, scale: 0.95, y: -5 }}
+                  animate={{ opacity: 1, scale: 1, y: 0 }}
+                  exit={{ opacity: 0, scale: 0.95, y: -5 }}
+                  transition={{ duration: 0.2, ease: "easeOut" }}
+                  className="absolute top-13 -right-2 w-44 h-fit bg-[rgba(0,0,0,0.1)] backdrop-blur-lg border border-[#414141] rounded-xl shadow-lg p-1"
+                >
+                  {optionsArr.map((elem, key) => (
                     <BottomOptionLabel
                       key={key}
                       svg={elem.svg}
                       title={elem.title}
                       redirectHref={elem.redirectHref}
                       openToNewPage={elem.openToNewPage}
                     />
-                  );
-                })}
-                <LogoutBtn />
-              </div>
-            )}
+                  ))}
+                  <LogoutBtn />
+                </motion.div>
+              )}
+            </AnimatePresence>
             {!session?.user?.id &&
               pathname !== "/login" &&
               pathname !== "/signup" && (
                 <Link
                   href={"/signup"}
-                  className="border-2 flex items-center px-4 h-9 rounded-lg text-black bg-white cursor-pointer border-[#313032] hover:bg-[#1e1e1f] hover:border-[1px] hover:text-white transition-all duration-300"
+                  className="border-2 flex items-center px-4 h-9 rounded-lg text-black bg-white cursor-pointer border-[#313032] hover:bg-[#1e1e1f] hover:border-[1px] hover:text-white transition-all duration-100"
                 >
                   Sign in
                 </Link>