landing page improved for readability and smooth scroll

6 files changed, 48 insertions, 15 deletions

diff --git a/apps/web-v2/src/app/(landing)/Cta.tsx b/apps/web-v2/src/app/(landing)/Cta.tsx
index 0024fbf0..ec726634 100644
--- a/apps/web-v2/src/app/(landing)/Cta.tsx
+++ b/apps/web-v2/src/app/(landing)/Cta.tsx
@@ -12,7 +12,7 @@ function Cta() {
         {/* a blue gradient line that's slightly tilted with blur (a lotof blur)*/}
         <div className="overflow-hidden">
           <div
-            className="absolute left-0 h-32 w-full overflow-hidden bg-[#369DFD] bg-opacity-70 blur-[337.4px]"
+            className="absolute left-[20%] top-[-165%] h-32 w-full overflow-hidden bg-[#369DFD] bg-opacity-70 blur-[337.4px]"
             style={{ transform: "rotate(-30deg)" }}
           />
         </div>
@@ -26,7 +26,7 @@ function Cta() {
         draggable="false"
         className="absolute z-[-2] hidden select-none rounded-3xl bg-black md:block lg:w-[80%]"
       />
-      <h1 className="z-20 mt-4 text-center text-5xl font-light text-white">
+      <h1 className="z-20 mt-4 text-center text-5xl font-medium tracking-tight text-white">
         Your bookmarks are collecting dust.
       </h1>
       <div className="text-center text-sm text-zinc-500">
diff --git a/apps/web-v2/src/app/(landing)/Features.tsx b/apps/web-v2/src/app/(landing)/Features.tsx
index 24b1a228..675ea515 100644
--- a/apps/web-v2/src/app/(landing)/Features.tsx
+++ b/apps/web-v2/src/app/(landing)/Features.tsx
@@ -21,12 +21,12 @@ export default function Features() {
   }, []);
 
   return (
-    <section className="relative w-full overflow-hidden after:pointer-events-none after:absolute after:right-0 after:top-0 after:h-full after:w-96 after:bg-gradient-to-l after:from-[#369DFD30] max-lg:after:hidden">
-      <div className="py-12 md:py-20">
+    <section className="relative w-full overflow-hidden max-lg:after:hidden">
+      <div className="py-12 md:pb-32">
         {/* Carousel */}
         <div
           id="use-cases"
-          className="mx-auto max-w-xl px-4 sm:px-6 lg:max-w-6xl"
+          className="mx-auto max-w-xl px-4 sm:px-6 lg:max-w-6xl md:pt-40"
         >
           <div className="space-y-12 lg:flex lg:space-x-12 lg:space-y-0 xl:space-x-24">
             {/* Content */}
@@ -202,7 +202,7 @@ export default function Features() {
         {/* Features blocks */}
         <div
           id="features"
-          className="mx-auto mt-24 max-w-6xl px-4 sm:px-6 lg:mt-32"
+          className="mx-auto mt-24 max-w-6xl px-4 sm:px-6 md:pt-40"
         >
           <div className="grid gap-8 sm:grid-cols-2 lg:grid-cols-3 lg:gap-16">
             {/* Block #1 */}
@@ -320,6 +320,7 @@ export default function Features() {
             </div>
           </div>
         </div>
+        
       </div>
     </section>
   );
diff --git a/apps/web-v2/src/app/(landing)/Hero.tsx b/apps/web-v2/src/app/(landing)/Hero.tsx
index 0a4284dd..74300c8b 100644
--- a/apps/web-v2/src/app/(landing)/Hero.tsx
+++ b/apps/web-v2/src/app/(landing)/Hero.tsx
@@ -20,19 +20,19 @@ const slap = {
 function Hero() {
   return (
     <>
-      <section className="mt-24 flex max-w-xl flex-col items-center justify-center gap-8 md:mt-40">
+      <section className="mt-24 flex max-w-xl flex-col items-center justify-center gap-10 md:mt-56">
         <a
-          className="flex items-center justify-center gap-4 rounded-full bg-white/10 px-4 py-2 text-sm"
+          className="flex items-center justify-center gap-4 rounded-full text-white/80 bg-white/10 px-4 py-2 text-sm"
           href="https://twitter.com/supermemoryai"
         >
-          <Twitter className="h-4 w-4 text-white" /> Follow us on Twitter
+          <Twitter className="h-4 w-4 " /> Follow us on Twitter
         </a>
         <motion.h1
           {...{
             ...slap,
             transition: { ...slap.transition, delay: 0.2 },
           }}
-          className="text-center text-4xl font-light text-white md:text-5xl"
+          className="text-center text-4xl text-white/95 md:text-5xl tracking-normal font-semibold"
         >
           Build your own second brain with Supermemory
         </motion.h1>
@@ -58,7 +58,7 @@ function Hero() {
         width={1512}
         height={1405}
         draggable="false"
-        className="z-[-2] mt-16 h-full w-[80%] select-none"
+        className="z-[-2] mt-28 h-full w-[80%] select-none"
       />
     </>
   );
diff --git a/apps/web-v2/src/app/(landing)/Navbar.tsx b/apps/web-v2/src/app/(landing)/Navbar.tsx
index 4c3ea609..375ea544 100644
--- a/apps/web-v2/src/app/(landing)/Navbar.tsx
+++ b/apps/web-v2/src/app/(landing)/Navbar.tsx
@@ -8,10 +8,10 @@ function Navbar() {
   return (
     <nav className="fixed top-0 z-[99999] mt-12 hidden w-full px-24 text-sm md:flex">
       <div className="flex w-full flex-row justify-between rounded-2xl bg-white/10 shadow-[0px_2px_3px_-1px_rgba(0,0,0,0.1),0px_1px_0px_0px_rgba(25,28,33,0.02),0px_0px_0px_1px_rgba(25,28,33,0.08)] backdrop-blur-lg backdrop-filter">
-        <Link href={"/"} className="flex flex-row items-center p-3 opacity-50">
+        <Link href={"/"} className="flex items-center p-3 opacity-50">
           <Image src={Logo} alt="Supermemory logo" width={40} height={40} />
         </Link>
-        <div className="flex flex-row items-center gap-8 p-3">
+        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex items-center gap-8 p-3">
           <Link href={"#use-cases"} className="text-soft-foreground-text">
             Use cases
           </Link>
diff --git a/apps/web-v2/src/app/(landing)/page.tsx b/apps/web-v2/src/app/(landing)/page.tsx
index 0f264a62..32c47ce3 100644
--- a/apps/web-v2/src/app/(landing)/page.tsx
+++ b/apps/web-v2/src/app/(landing)/page.tsx
@@ -1,16 +1,17 @@
-import Features from "./Features";
 import RotatingIcons from "./RotatingIcons";
 import Hero from "./Hero";
 import Navbar from "./Navbar";
 import Cta from "./Cta";
 import { Toaster } from "@/components/ui/toaster";
+import Features from "./Features";
 
 export const runtime = "edge";
 
 export default function Home() {
   return (
     <main className="dark flex min-h-screen flex-col items-center overflow-x-hidden px-2 md:px-0">
-      <Navbar />
+
+        <Navbar />
 
       {/* Background gradients */}
       <div className="absolute left-0 top-0 z-[-1] h-full w-full">
@@ -28,6 +29,12 @@ export default function Home() {
             style={{ transform: "rotate(-30deg)" }}
           />
         </div>
+
+        <div className="overflow-x-hidden">
+          <div
+            className="absolute right-0 top-[145%] h-40 w-[17%] overflow-x-hidden bg-[#369DFD] bg-opacity-20 blur-[110px]"
+          />
+        </div>
       </div>
 
       {/* Hero section */}
@@ -36,6 +43,7 @@ export default function Home() {
       {/* Features section */}
       <Features />
 
+
       <RotatingIcons />
 
       <Cta />
diff --git a/apps/web-v2/src/app/globals.css b/apps/web-v2/src/app/globals.css
index 4dd06ae3..98d57f65 100644
--- a/apps/web-v2/src/app/globals.css
+++ b/apps/web-v2/src/app/globals.css
@@ -82,6 +82,30 @@
   }
 }
 
+html {
+  scroll-behavior: smooth;
+}
+
+/* width */
+::-webkit-scrollbar {
+  width: 8px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+  background: #131F2C;
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+  background: #22303d;
+}
+
 body {
   color: rgb(var(--foreground-rgb));
   background: linear-gradient(to bottom, transparent, var(--black-bg))