fix: section revaamp

7 files changed, 81 insertions, 90 deletions

diff --git a/apps/web/app/(landing)/Cta.tsx b/apps/web/app/(landing)/Cta.tsx
index be99bf99..79881055 100644
--- a/apps/web/app/(landing)/Cta.tsx
+++ b/apps/web/app/(landing)/Cta.tsx
@@ -6,7 +6,7 @@ function Cta() {
   return (
     <section
       id="try"
-      className="relative mb-44 mt-60 flex w-full flex-col items-center justify-center gap-8"
+      className="relative mb-44 mt-60 flex w-full flex-col items-center justify-center gap-8 "
     >
       <div className="absolute left-0 z-[-1] h-full w-full">
         {/* a blue gradient line that's slightly tilted with blur (a lotof blur)*/}
diff --git a/apps/web/app/(landing)/Features/features.tsx b/apps/web/app/(landing)/Features/features.tsx
index 711e11ed..6b8cf1ab 100644
--- a/apps/web/app/(landing)/Features/features.tsx
+++ b/apps/web/app/(landing)/Features/features.tsx
@@ -2,10 +2,20 @@ import { PlayIcon } from "lucide-react";
 import ChatBubbleWing from "./chatbubble";
 import { cn } from "@repo/ui/lib/utils";
 
-export const Gradient = ({opacity = 50}: {opacity?:number}) => {
+export const Gradient = ({ opacity = 50 }: { opacity?: number }) => {
   return (
-    <div className={cn("absolute top-0 -left-[10rem] w-[56.625rem] h-[56.625rem]  mix-blend-color-dodge pointer-events-none" , `opacity-${opacity}`)}>
-      <img
+    <div
+      className={cn(
+        "absolute top-0 -left-[10rem] w-[56.625rem] h-[56.625rem]  mix-blend-color-dodge pointer-events-none",
+        `opacity-${opacity}`
+      )}
+    >
+      <div
+        className="top-0 -left-[10rem] w-[56.625rem] h-[56.625rem]   overflow-x-hidden bg-[rgb(54,157,253)] bg-opacity-40 blur-[337.4px]"
+        style={{ transform: "rotate(-30deg)" }}
+      />
+
+      {/* <img
         className="absolute top-1/2 left-1/2 w-[79.5625rem] max-w-[79.5625rem] h-[88.5625rem] -translate-x-1/2 -translate-y-1/2"
         // src="https://farmui.vercel.app/bg-back.png"
         src={
@@ -14,7 +24,7 @@ export const Gradient = ({opacity = 50}: {opacity?:number}) => {
         width={1417}
         height={1417}
         alt="Gradient"
-      />
+      /> */}
     </div>
   );
 };
diff --git a/apps/web/app/(landing)/Features/index.tsx b/apps/web/app/(landing)/Features/index.tsx
index c615c91d..fab55698 100644
--- a/apps/web/app/(landing)/Features/index.tsx
+++ b/apps/web/app/(landing)/Features/index.tsx
@@ -1,36 +1,29 @@
-import { CheckIcon, ChevronRight } from "lucide-react";
-import {
-  PhotoChatMessage,
-  Gradient,
-  VideoBar,
-  VideoChatMessage,
-} from "./features";
+import { CheckIcon, ChevronRight, GithubIcon } from "lucide-react";
+import { Gradient } from "./features";
 
 import Generating from "./generating";
-import Service01 from "../../../public/images/service-1.png";
-
 const Services = () => {
   return (
     <div id="how-to-use">
       <div className="container">
-        <div className="max-w-5xl mr-auto">
+        <div className="mr-auto max-w-5xl">
           <h1 className="mr-auto text-left font-geistSans tracking-tighter text-4xl md:text-5xl lg:text-6xl text-transparent bg-clip-text bg-[linear-gradient(180deg,_#FFF_0%,_rgba(255,_255,_255,_0.00)_202.08%)]">
             Supermemory is made for all.
           </h1>
-          <p className="text-left ml-auto font-nomral tracking-tight text-lg mb-10">
+          <p className="mb-10 ml-auto text-lg tracking-tight text-left font-nomral">
             Brainwave unlocks the potential of AI-powered
           </p>
         </div>
 
         <div className="relative bg-page-gradient">
-          <div className="flex  overflow-hidden relative items-center p-8 mb-5 rounded-3xl border lg:p-20 z-1 h-[39rem] border-white/20 xl:h-[46rem]">
+          <div className="flex overflow-hidden relative items-center p-8 mb-5 rounded-3xl border lg:p-20 z-1 h-[39rem] border-white/20 xl:h-[46rem]">
             <img
               src="https://tailwindcss.com/_next/static/media/[email protected]"
-              className="absolute top-0 right-0 z-2 opacity-100"
+              className="absolute top-0 right-0 opacity-100 z-2"
             />
             <img
               src="https://tailwindcss.com/_next/static/media/[email protected]"
-              className="absolute top-0 right-0 z-2 opacity-100"
+              className="absolute top-0 right-0 opacity-100 z-2"
             />
             <div className="absolute top-0 left-0 w-full h-full pointer-events-none md:w-3/5 xl:w-auto">
               <img
@@ -43,7 +36,7 @@ const Services = () => {
             </div>
 
             <div className="relative ml-auto z-1 max-w-[17rem]">
-              <h4 className="mb-4 text-3xl md:text-4xl ">SuperMemoery.</h4>
+              <h4 className="mb-4 text-3xl md:text-4xl">SuperMemoery.</h4>
               <p className="body-2 mb-[3rem] text-n-3">
                 Supermemory unlocks the potential of AI-powered applications
               </p>
@@ -53,7 +46,7 @@ const Services = () => {
                     key={index}
                     className="flex items-start py-4 border-t border-white/20"
                   >
-                    <CheckIcon className="w-4 h-4 mt-2 inline-flex justify-center items-center text-slate-200 size-4  rounded-full ml-2" />
+                    <CheckIcon className="inline-flex justify-center items-center mt-2 ml-2 w-4 h-4 rounded-full text-slate-200 size-4" />
                     {/* <img width={24} height={24} src={check} /> */}
                     <p className="ml-4">{item}</p>
                   </li>
@@ -64,8 +57,8 @@ const Services = () => {
             <Generating className="absolute right-4 bottom-4 left-4 border lg:bottom-8 lg-right-auto lg:left-1/2 lg:-translate-x-1/2 border-n-1/10" />
           </div>
 
-          <div className="grid relative gap-5 lg:grid-cols-2 z-1 ">
-            <div className="overflow-hidden relative rounded-3xl border min-h-[30rem] bg-hero-gradient bg-slate-950/10  border-white/10">
+          <div className="grid relative gap-5 lg:grid-cols-2 z-1">
+            <div className="overflow-hidden relative rounded-3xl border min-h-[30rem] bg-hero-gradient bg-slate-950/10 border-white/10">
               <div className="absolute inset-0">
                 <div className="absolute -z-1 inset-0  h-[600px] w-full bg-transparent opacity-5 bg-[linear-gradient(to_right,#f0f0f0_1px,transparent_1px),linear-gradient(to_bottom,#f0f0f0_1px,transparent_1px)] bg-[size:6rem_4rem] [mask-image:radial-gradient(ellipse_80%_50%_at_50%_0%,#000_70%,transparent_110%)]"></div>
 
@@ -78,20 +71,20 @@ const Services = () => {
                 />
               </div>
 
-              <div className="flex absolute inset-0 flex-col items-start justify-end -mt-20 p-8 bg-glass-gradient">
+              <div className="flex absolute inset-0 flex-col justify-end items-start p-8 -mt-20 bg-glass-gradient">
                 <h4 className="text-3xl tracking-tight mb-2 text-center text-transparent bg-clip-text bg-[linear-gradient(180deg,_#FFF_0%,_rgba(255,_255,_255,_0.00)_202.08%)]">
                   Self Hostable
                 </h4>
-                <p className="font-normal tracking-tighter mb-[3rem] text-lg max-w-lg text-gray-400 ">
+                <p className="max-w-lg text-lg font-normal tracking-tighter text-gray-400 mb-[3rem]">
                   Automatically enhance your photos using our AI app&apos;s
                   photo editing feature. Try it now!
                 </p>
                 <a
                   href="/components"
-                  className="mt-[-20px] inline-flex bg-glass-gradient rounded-xl text-center group items-center w-full justify-center bg-gradient-to-tr from-zinc-300/5 via-gray-400/5 to-transparent bg-transparent  border-white/10 border-[1px] hover:bg-transparent/10 transition-colors sm:w-auto py-4 px-10"
+                  className="inline-flex justify-center items-center py-4 px-10 w-full text-center bg-transparent bg-gradient-to-tr to-transparent rounded-xl transition-colors sm:w-auto mt-[-20px] bg-glass-gradient group from-zinc-300/5 via-gray-400/5 border-white/10 border-[1px] hover:bg-transparent/10"
                 >
                   Get started
-                  <ChevronRight className="w-4 h-4 ml-2 group-hover:translate-x-1 duration-300" />
+                  <ChevronRight className="ml-2 w-4 h-4 duration-300 group-hover:translate-x-1" />
                 </a>
               </div>
 
@@ -99,17 +92,17 @@ const Services = () => {
             </div>
 
             <div
-             style={{
-              background:
-                "linear-gradient(143.6deg, rgba(192, 132, 252, 0) 20.79%, rgba(140, 121, 249, 0.40) 40.92%, rgba(140, 121, 249, 0) 80.35%)",
-            }}
-            
-            className="overflow-hidden group relative py-4 rounded-3xl bg-glass-gradient lg:min-h-[30rem]">
-              <div className="py-12 px-4 xl:px-8 relative">
+              style={{
+                background:
+                  "linear-gradient(143.6deg, rgba(192, 132, 252, 0) 20.79%, rgba(140, 121, 249, 0.40) 40.92%, rgba(140, 121, 249, 0) 80.35%)",
+              }}
+              className="overflow-hidden relative py-4 rounded-3xl group bg-glass-gradient lg:min-h-[30rem]"
+            >
+              <div className="relative py-12 px-4 xl:px-8">
                 <h4 className="text-3xl tracking-tight mb-2 text-left text-transparent bg-clip-text bg-[linear-gradient(180deg,_#FFF_0%,_rgba(255,_255,_255,_0.00)_202.08%)]">
                   Privacy First
                 </h4>
-                <p className="body-2 mb-[2rem] text-gray-400 text-lg">
+                <p className="text-lg text-gray-400 body-2 mb-[2rem]">
                   The world’s most powerful AI photo and video art generation
                   engine. What will you create?
                 </p>
@@ -123,7 +116,7 @@ const Services = () => {
                     // "https://www.authkit.com/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fbackground.896d177e.png&w=1920&q=75"
                     // "https://www.authkit.com/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fbackground.b48df3d6.png&w=828&q=75"
                   }
-                  className="object-cover w-full h-full group-hover:rotate-3 transform duration-500  transition-all  ease-linear"
+                  className="object-cover w-full h-full transition-all duration-500 ease-linear transform group-hover:rotate-3"
                   width={520}
                   height={400}
                   alt="Scary robot"
@@ -131,62 +124,56 @@ const Services = () => {
 
                 {/* <VideoBar /> */}
               </div>
-              <img
-                src="https://tailwindcss.com/_next/static/media/[email protected]"
-                className="absolute h-[400px] inset-x-0 bottom-0 z-2 opacity-50 rotate-180"
-              />
-              <div
+              {/* <div
                className="absolute bottom-0 h-full"
                 style={{
                   background:
                     "linear-gradient(143.6deg, rgba(192, 132, 252, 0) 20.79%, rgba(232, 121, 249, 0.26) 40.92%, rgba(204, 171, 238, 0) 70.35%)",
                 }}
-              ></div>
+              ></div> */}
 
-              {/* <Gradient opacity={20} /> */}
+              <Gradient opacity={5} />
             </div>
           </div>
 
-          <div 
-           style={{
-            background:
-              "linear-gradient(143.6deg, rgba(192, 132, 252, 0) 20.79%, rgba(140, 121, 249, 0.2) 40.92%, rgba(140, 121, 249, 0) 80.35%)",
-          }}
-          
-          className="flex bg-page-gradient  mt-10 overflow-hidden relative items-center p-8 mb-5 rounded-3xl border lg:p-20 z-1 h-[30rem] border-white/20 xl:h-[28rem]">
+          <div
+            style={{
+              background:
+                "linear-gradient(143.6deg, rgba(192, 132, 252, 0) 20.79%, rgba(140, 121, 249, 0.2) 40.92%, rgba(140, 121, 249, 0) 80.35%)",
+            }}
+            className="flex overflow-hidden relative items-center p-8 mt-10 mb-5 rounded-3xl border lg:p-20 bg-page-gradient z-1 h-[38rem] border-white/20 xl:h-[28rem]"
+          >
             <img
               src="https://tailwindcss.com/_next/static/media/[email protected]"
-              className="absolute top-0 right-0 z-2 opacity-100"
+              className="absolute top-0 right-0 opacity-60 z-2"
             />
-            {/* <img
-              src="https://tailwindcss.com/_next/static/media/[email protected]"
-              className="absolute top-0 right-0 z-2 opacity-100"
-            /> */}
-            <div className="absolute top-0 left-0 w-full h-full pointer-events-none md:w-3/5 xl:w-auto">
+
+            <div className="absolute top-0 right-0 left-0 mx-auto w-full h-full pointer-events-none xl:w-auto">
               <img
-                className="object-cover w-full h-full md:object-right lg:mt-20 scale-150  border-r-2 border-r-white/5"
+                className="object-cover z-40 w-full h-full border-r-2 md:scale-100 border-r-white/5"
                 width={800}
                 alt="Github"
                 height={730}
                 src={"/images/github.webp"}
               />
-              {/* <div className="absolute rop-0 left-0 bg-black/20"></div> */}
+              {/* <div className="absolute left-0 rop-0 bg-black/20"></div> */}
             </div>
             {/* <Gradient /> */}
 
-            <div className="relative ml-auto z-1">
-              <h4 className="mb-4 md:text-3xl lg:text-5xl ">
+            <div className="absolute right-0 left-0 bottom-5 mx-auto mt-20 text-center z-1">
+              <h4 className="mb-4 text-4xl font-bold tracking-tighter lg:text-5xl">
                 Proudly <br /> OpenSource
               </h4>
-              <p className="body-2 mb-[3rem] text-n-3">
+              <p className="text-lg body-2 mb-[3rem]">
                 Supermemory unlocks the potential of AI-powered applications
               </p>
               <a
                 href="/components"
-                className="mt-[-20px] inline-flex bg-glass-gradient rounded-xl text-center group items-center w-full justify-center bg-gradient-to-tr from-zinc-300/5 via-gray-400/5 to-transparent bg-transparent  border-white/10 border-[1px] hover:bg-transparent/10 transition-colors sm:w-auto py-4 px-10"
+                className="inline-flex gap-x-1 justify-center items-center py-4 px-10 w-full text-center bg-transparent bg-gradient-to-tr to-transparent rounded-xl transition-colors sm:w-auto mt-[-20px] bg-glass-gradient group from-zinc-300/5 via-gray-400/5 border-white/10 border-[1px] hover:bg-transparent/10"
               >
+                <GithubIcon className="inline-flex justify-center items-center w-5 h-5" />{" "}
                 Get The Github
-                <ChevronRight className="w-4 h-4 ml-2 group-hover:translate-x-1 duration-300" />
+                <ChevronRight className="ml-2 w-4 h-4 duration-300 group-hover:translate-x-1" />
               </a>
             </div>
           </div>
@@ -200,11 +187,3 @@ const Services = () => {
 
 export default Services;
 const brainwaveServices = ["AI first", "Self host", "Privacy first"];
-
-const brainwaveServicesIcons = [
-  "https://github.com/adrianhajdin/brainwave/blob/main/src/assets/recording-03.svg",
-  "https://github.com/adrianhajdin/brainwave/blob/main/src/assets/recording-03.svg",
-  "https://github.com/adrianhajdin/brainwave/blob/main/src/assets/disc-02.svg",
-  "https://github.com/adrianhajdin/brainwave/blob/main/src/assets/chrome-cast.svg",
-  "https://github.com/adrianhajdin/brainwave/blob/main/src/assets/sliders-04.svg",
-];
diff --git a/apps/web/app/(landing)/Showcase.tsx b/apps/web/app/(landing)/Showcase.tsx
index b1e86a31..1d4e0639 100644
--- a/apps/web/app/(landing)/Showcase.tsx
+++ b/apps/web/app/(landing)/Showcase.tsx
@@ -1,13 +1,12 @@
-
 "use client";
 
 import { useId } from "react";
 import Image, { type ImageProps } from "next/image";
 import { Tab, TabGroup, TabList, TabPanel, TabPanels } from "@headlessui/react";
-import clsx from "clsx"
-import TestImg from '../../public/images/carousel-illustration-01.png'
-import Search from '../../public/images/search.svg'
-import Memroy from '../../public/images/memory.svg'
+import clsx from "clsx";
+import TestImg from "../../public/images/carousel-illustration-01.png";
+import Search from "../../public/images/search.svg";
+import Memroy from "../../public/images/memory.svg";
 interface Feature {
   name: React.ReactNode;
   summary: string;
@@ -22,7 +21,7 @@ const features: Array<Feature> = [
     summary: "Stay on top of things with always up-to-date reporting features.",
     description:
       "We talked about reporting in the section above but we needed three items here, so mentioning it one more time for posterity.",
-    image: 'search.svg',
+    image: "search.svg",
     icon: function ReportingIcon() {
       let id = useId();
       return (
@@ -57,7 +56,7 @@ const features: Array<Feature> = [
       "Never lose track of what’s in stock with accurate inventory tracking.",
     description:
       "We don’t offer this as part of our software but that statement is inarguably true. Accurate inventory tracking would help you for sure.",
-    image: 'memory.svg',
+    image: "memory.svg",
     icon: function InventoryIcon() {
       return (
         <>
@@ -85,7 +84,7 @@ const features: Array<Feature> = [
       "Organize all of your contacts, service providers, and invoices in one place.",
     description:
       "This also isn’t actually a feature, it’s just some friendly advice. We definitely recommend that you do this, you’ll feel really organized and professional.",
-    image: 'search.svg',
+    image: "search.svg",
     icon: function ContactsIcon() {
       return (
         <>
@@ -151,11 +150,11 @@ function FeaturesMobile() {
         <div key={feature.summary}>
           <Feature feature={feature} className="mx-auto max-w-2xl" isActive />
           <div className="relative mt-10 pb-10">
-            <div className="absolute -inset-x-4 bottom-0 top-8 bg-slate-200 sm:-inset-x-6" />
-            <div className="relative mx-auto w-[52.75rem] overflow-hidden rounded-xl bg-white shadow-lg shadow-gray-200/5 ring-1 ring-slate-500/10">
+            <div className="absolute -inset-x-4 bottom-0 top-8 bg-page-gradient sm:-inset-x-6" />
+            <div className="relative mx-auto w-[52.75rem] overflow-hidden rounded-xl bg-glass-gradient shadow-lg shadow-gray-200/5 ring-1 ring-slate-500/10">
               <img
                 className="w-full"
-                src={"/images/carousel-illustration-01.png"}
+                src={`/images/${feature.image}`}
                 alt=""
                 sizes="52.75rem"
               />
@@ -247,10 +246,10 @@ export function Showcases() {
           height={1000}
           alt="back bg"
         /> */}
-        <div className="mr-auto max-w-3xl md:text-start">
+        <div className="mr-auto relative max-w-3xl md:text-start">
           <h2 className="font-display  text-4xl tracking-tight text-gray-200 sm:text-7xl">
             <span className="bg-gradient-to-br from-indigo-400 via-indigo-300 to-indigo-700 bg-clip-text text-transparent">
-              Supermemory{" "} <br />
+              Supermemory <br />
             </span>{" "}
             simplify AI ingestions.
           </h2>
@@ -258,6 +257,9 @@ export function Showcases() {
             Because you’d probably be a little confused if we suggested you
             complicate your everyday business tasks instead.
           </p>
+          <div className="overflow-x-hidden overflow-y-hidden">
+            <div className="absolute right-0 z-20 top-[0%] h-40 w-[17%] overflow-x-hidden bg-[#369DFD] bg-opacity-20 blur-[110px]" />
+          </div>
         </div>
         <FeaturesMobile />
         <FeaturesDesktop />
diff --git a/apps/web/app/(landing)/footer.tsx b/apps/web/app/(landing)/footer.tsx
index 4ebfca0b..e4c54dea 100644
--- a/apps/web/app/(landing)/footer.tsx
+++ b/apps/web/app/(landing)/footer.tsx
@@ -3,7 +3,7 @@ import LinkArrow from "./linkArrow";
 
 function Footer() {
   return (
-    <footer className="mt-20 flex w-full items-center justify-between gap-4 px-8 py-8 text-sm text-zinc-500">
+    <footer className="mt-20 flex w-full overflow-y-hidden items-center justify-between gap-4 px-8 py-8 text-sm text-zinc-500 overflow-hidden">
       <p>© 2024 Supermemory.ai</p>
       <div className="flex gap-5">
         <a
diff --git a/apps/web/app/(landing)/page.tsx b/apps/web/app/(landing)/page.tsx
index 3c83592a..cf460a65 100644
--- a/apps/web/app/(landing)/page.tsx
+++ b/apps/web/app/(landing)/page.tsx
@@ -36,16 +36,16 @@ export default async function Home() {
         </div>
 
         {/* a blue gradient line that's slightly tilted with blur (a lotof blur)*/}
-        <div className="overflow-x-hidden">
+        {/* <div className="overflow-x-hidden overflow-y-hidden">
           <div
             className="absolute left-0 top-[100%] h-32 w-[90%] overflow-x-hidden bg-[rgb(54,157,253)] bg-opacity-40 blur-[337.4px]"
             style={{ transform: "rotate(-30deg)" }}
           />
-        </div>
+        </div> */}
 
-        <div className="overflow-x-hidden">
+        {/* <div className="overflow-x-hidden overflow-y-hidden">
           <div className="absolute right-0 top-[145%] h-40 w-[17%] overflow-x-hidden bg-[#369DFD] bg-opacity-20 blur-[110px]" />
-        </div>
+        </div> */}
       </div>
 
       {/* Hero section */}
diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx
index 7347e300..2c5808d9 100644
--- a/apps/web/app/layout.tsx
+++ b/apps/web/app/layout.tsx
@@ -68,7 +68,7 @@ export default function RootLayout({
       {/* <head>
         <ThemeScript />
       </head> */}
-      <div className="absolute top-0 z-10 min-h-screen w-screen bg-inherit  bg-[radial-gradient(ellipse_20%_80%_at_50%_-20%,rgba(120,119,198,0.3),rgba(255,255,255,0))]"></div>
+      <div className="absolute top-0 z-10 min-h-screen w-screen overflow-hidden bg-inherit  bg-[radial-gradient(ellipse_20%_80%_at_50%_-20%,rgba(120,119,198,0.3),rgba(255,255,255,0))]"></div>
       <BackgroundPlus />
       {/* TODO: when lightmode support is added, remove the 'dark' class from the body tag */}
       <body