diff --git a/apps/web/app/(landing)/CardPatterns/AnimatedGrid.tsx b/apps/web/app/(landing)/CardPatterns/AnimatedGrid.tsx
new file mode 100644
index 00000000..31f9e52c
--- /dev/null
+++ b/apps/web/app/(landing)/CardPatterns/AnimatedGrid.tsx
@@ -0,0 +1,149 @@
+"use client";
+
+import { cn } from "@repo/ui/lib/utils";
+import { motion } from "framer-motion";
+import { useEffect, useId, useRef, useState } from "react";
+
+interface GridPatternProps {
+  width?: number;
+  height?: number;
+  x?: number;
+  y?: number;
+  strokeDasharray?: any;
+  numSquares?: number;
+  className?: string;
+  maxOpacity?: number;
+  duration?: number;
+  repeatDelay?: number;
+}
+
+export function GridPattern({
+  width = 40,
+  height = 40,
+  x = -1,
+  y = -1,
+  strokeDasharray = 0,
+  numSquares = 50,
+  className,
+  maxOpacity = 0.5,
+  duration = 4,
+  repeatDelay = 0.5,
+  ...props
+}: GridPatternProps) {
+  const id = useId();
+  const containerRef = useRef(null);
+  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
+  const [squares, setSquares] = useState(() => generateSquares(numSquares));
+
+  function getPos() {
+    return [
+      Math.floor((Math.random() * dimensions.width) / width),
+      Math.floor((Math.random() * dimensions.height) / height),
+    ];
+  }
+
+  // Adjust the generateSquares function to return objects with an id, x, and y
+  function generateSquares(count: number) {
+    return Array.from({ length: count }, (_, i) => ({
+      id: i,
+      pos: getPos(),
+    }));
+  }
+
+  // Function to update a single square's position
+  const updateSquarePosition = (id: number) => {
+    setSquares((currentSquares) =>
+      currentSquares.map((sq) =>
+        sq.id === id
+          ? {
+              ...sq,
+              pos: getPos(),
+            }
+          : sq,
+      ),
+    );
+  };
+
+  // Update squares to animate in
+  useEffect(() => {
+    if (dimensions.width && dimensions.height) {
+      setSquares(generateSquares(numSquares));
+    }
+  }, [dimensions, numSquares]);
+
+  // Resize observer to update container dimensions
+  useEffect(() => {
+    const resizeObserver = new ResizeObserver((entries) => {
+      for (let entry of entries) {
+        setDimensions({
+          width: entry.contentRect.width,
+          height: entry.contentRect.height,
+        });
+      }
+    });
+
+    if (containerRef.current) {
+      resizeObserver.observe(containerRef.current);
+    }
+
+    return () => {
+      if (containerRef.current) {
+        resizeObserver.unobserve(containerRef.current);
+      }
+    };
+  }, [containerRef]);
+
+  return (
+    <svg
+      ref={containerRef}
+      aria-hidden="true"
+      className={cn(
+        "pointer-events-none absolute inset-0 h-full w-full fill-gray-400/30 stroke-gray-400/30",
+        className,
+      )}
+      {...props}
+    >
+      <defs>
+        <pattern
+          id={id}
+          width={width}
+          height={height}
+          patternUnits="userSpaceOnUse"
+          x={x}
+          y={y}
+        >
+          <path
+            d={`M.5 ${height}V.5H${width}`}
+            fill="none"
+            strokeDasharray={strokeDasharray}
+          />
+        </pattern>
+      </defs>
+      <rect width="100%" height="100%" fill={`url(#${id})`} />
+      <svg x={x} y={y} className="overflow-visible">
+        {squares.map(({ pos: [x, y], id }, index) => (
+          <motion.rect
+            initial={{ opacity: 0 }}
+            animate={{ opacity: maxOpacity }}
+            transition={{
+              duration,
+              repeat: 1,
+              delay: index * 0.1,
+              repeatType: "reverse",
+            }}
+            onAnimationComplete={() => updateSquarePosition(id)}
+            key={`${x}-${y}-${index}`}
+            width={width - 1}
+            height={height - 1}
+            x={x ?? 1 * width + 1}
+            y={y ?? 1 * height + 1}
+            fill="currentColor"
+            strokeWidth="0"
+          />
+        ))}
+      </svg>
+    </svg>
+  );
+}
+
+export default GridPattern;
diff --git a/apps/web/app/(landing)/CardPatterns/Glare.tsx b/apps/web/app/(landing)/CardPatterns/Glare.tsx
index 8fefb309..53550ecc 100644
--- a/apps/web/app/(landing)/CardPatterns/Glare.tsx
+++ b/apps/web/app/(landing)/CardPatterns/Glare.tsx
@@ -130,7 +130,7 @@ export const GlareCard = ({
         <div className="w-full pb-10 bg-glass-gradient h-full grid [grid-area:1/1] mix-blend-soft-light [clip-path:inset(0_0_1px_0_round_var(--radius))] opacity-[var(--opacity)] transition-opacity transition-background duration-[var(--duration)] ease-[var(--easing)] delay-[var(--delay)] will-change-background [background:radial-gradient(farthest-corner_circle_at_var(--m-x)_var(--m-y),_rgba(255,255,255,0.8)_10%,_rgba(255,255,255,0.65)_20%,_rgba(255,255,255,0)_90%)]" />
         <div
           className="w-full h-full grid [grid-area:1/1] mix-blend-color-dodge opacity-[var(--opacity)] will-change-background transition-opacity [clip-path:inset(0_0_1px_0_round_var(--radius))] [background-blend-mode:hue_hue_hue_overlay] [background:var(--hero-gradient),_var(--rainbow),var(--diagonal),_var(--shade)] relative after:content-[''] after:grid-area-[inherit] after:bg-repeat-[inherit] after:bg-attachment-[inherit] after:bg-origin-[inherit] after:bg-clip-[inherit] after:bg-[inherit] after:mix-blend-exclusion after:[background-size:var(--foil-size),_200%_400%,_800%,_200%] after:[background-position:center,_0%_var(--bg-y),_calc(var(--bg-x)*_-1)_calc(var(--bg-y)*_-1),_var(--bg-x)_var(--bg-y)] after:[background-blend-mode:soft-light,_hue,_hard-light]"
-          style={{ ...backgroundStyle  , 'opacity':"12%"}}
+          style={{ ...backgroundStyle  , 'opacity':"10%"}}
         />
         
       </div>
diff --git a/apps/web/app/(landing)/Cta.tsx b/apps/web/app/(landing)/Cta.tsx
index 79881055..128581e8 100644
--- a/apps/web/app/(landing)/Cta.tsx
+++ b/apps/web/app/(landing)/Cta.tsx
@@ -1,14 +1,21 @@
 import Image from "next/image";
 import React from "react";
 import EmailInput from "./EmailInput";
+import GridPattern from "./CardPatterns/AnimatedGrid";
+import { cn } from "@repo/ui/lib/utils";
+import { ChevronRight } from "lucide-react";
+import { Gradient } from "./Features/features";
+// import {Animated}
 
 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  bg-page-gradient dark:[box-shadow:0_-20px_80px_-20px_#8686f01f_inset] min-h-[600px] border-[1px] border-white/20 flex flex-col gap-8 justify-center items-center mt-60 mb-44 w-3/4 rounded-3xl py-10 px-8 mx-auto"
     >
-      <div className="absolute left-0 z-[-1] h-full w-full">
+      <div className="absolute -z-1 inset-0 rounded-3xl opacity-5   h-[600px] w-full bg-transparent  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>
+
+      <div className="absolute left-0 w-full h-full z-[-1]">
         {/* a blue gradient line that's slightly tilted with blur (a lotof blur)*/}
         <div className="overflow-hidden">
           <div
@@ -17,26 +24,30 @@ function Cta() {
           />
         </div>
       </div>
-      <Image
+      {/* <Image
         src="/landing-ui-2.png"
         alt="Landing page background"
         width={1512}
         height={1405}
         priority
         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-medium tracking-tight text-white">
+        className="absolute z-[-2] hidden select-none rounded-3xl md:block lg:w-[80%] bg-page-gradient"
+      /> */}
+      <h1 className="text-sm  z-20  text-gray-400 group font-geist mx-auto px-5 py-2 bg-gradient-to-tr from-zinc-300/5 via-gray-400/5 to-transparent  border-[2px] border-white/5 rounded-3xl w-fit">
+        <p className="tracking-tight uppercase">
+          Launching July 1st, 2024
+          <ChevronRight className="inline w-4 h-4 ml-2 group-hover:translate-x-1 duration-300" />
+        </p>
+      </h1>
+      <h1 className="z-20 mx-auto mt-0 max-w-xl font-normal tracking-tighter text-5xl md:text-6xl lg:text-7xl text-center text-white">
         Your bookmarks are collecting dust.
       </h1>
-      <div className="text-center text-sm text-zinc-500">
-        Launching July 1st, 2024
-      </div>
-      <p className="text-soft-foreground-text z-20 text-center">
-        Time to change that. <br /> Sign up for the waitlist and be the first to
-        try Supermemory
+      <p className="z-20 text-center text-lg">
+        Sign up for the waitlist and be the first to try Supermemory
       </p>
-      <EmailInput />
+      <div className="w-1/2 mx-auto">
+        <EmailInput />
+      </div>
     </section>
   );
 }
diff --git a/apps/web/app/(landing)/EmailInput.tsx b/apps/web/app/(landing)/EmailInput.tsx
index c0514a46..658d5cf9 100644
--- a/apps/web/app/(landing)/EmailInput.tsx
+++ b/apps/web/app/(landing)/EmailInput.tsx
@@ -34,12 +34,12 @@ function EmailInput() {
       className="flex w-full items-center justify-center gap-2"
     >
       <div
-        className={`transition-width z-20 rounded-2xl bg-gradient-to-br from-gray-200/70 to-transparent p-[0.7px] duration-300 ease-in-out ${email ? "w-[90%] md:w-[42%]" : "w-full md:w-1/2"}`}
+        className={`transition-width z-20 rounded-2xl bg-gradient-to-br from-gray-200/70 to-transparent p-[0] duration-300 ease-in-out ${email ? "w-[90%] md:w-[42%]" : "w-full md:w-1/2"}`}
       >
         <input
           type="email"
           name="email"
-          className={`transition-width py-4 bg-page-gradient flex w-full items-center rounded-xl border-white/20 bg-[#37485E] px-4 outline-none duration-300 focus:outline-none`}
+          className={`transition-width py-4 bg-page-gradient flex w-full items-center rounded-xl border-white/5 bg-[#37485E] px-4 outline-none duration-300 focus:outline-none`}
           placeholder="Enter your email"
           value={email}
           required
diff --git a/apps/web/app/(landing)/Features.tsx b/apps/web/app/(landing)/Features.tsx
index c690d44d..fd30a413 100644
--- a/apps/web/app/(landing)/Features.tsx
+++ b/apps/web/app/(landing)/Features.tsx
@@ -9,6 +9,7 @@ import { CardClick } from "@repo/ui/components/cardClick";
 import FUIFeatureSectionWithCards from "./FeatureCardContent";
 import { cn } from "@repo/ui/lib/utils";
 import { ArrowUpRight } from "lucide-react";
+import { Gradient } from "./Features/features";
 
 export default function Features() {
   const [tab, setTab] = useState<number>(0);
@@ -30,23 +31,25 @@ export default function Features() {
 
   return (
     <section className="overflow-hidden relative w-full max-lg:after:hidden">
-      <img
+      {/* <img
         src="https://tailwindcss.com/_next/static/media/docs@30.8b9a76a2.avif"
         className="absolute -top-0 left-10 opacity-60 z-2"
-      />
-      <div className="relative bg-page-gradient">
-        <div className="-z-1 absolute inset-x-0 -top-0 h-screen  w-full bg-transparent bg-[linear-gradient(to_right,#f0f0f0_1px,transparent_1px),linear-gradient(to_bottom,#f0f0f0_1px,transparent_1px)]  bg-[size:6rem_4rem] opacity-5 [mask-image:radial-gradient(ellipse_80%_50%_at_50%_0%,#000_70%,transparent_110%)]"></div>
+      /> */}
+            <div className="absolute top-0 z-0 w-screen left-0 right-0 mx-auto min-h-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>
+      <div className="relative ">
+        {/* <div className="-z-1 absolute inset-x-0 -top-0 h-screen  w-full bg-transparent bg-[linear-gradient(to_right,#f0f0f0_1px,transparent_1px),linear-gradient(to_bottom,#f0f0f0_1px,transparent_1px)]  bg-[size:6rem_4rem] opacity-5 [mask-image:radial-gradient(ellipse_80%_50%_at_50%_0%,#000_70%,transparent_110%)]"></div> */}
 
-        <div className="flex relative flex-col px-4 mx-auto max-w-screen-xl md:px-8">
-          <div className="mr-auto mb-10 space-y-4 max-w-3xl text-left">
+        <div className="flex relative flex-col px-4 mx-auto max-w-screen-xl md:px-0">
+          <div className="relative mx-auto mb-5 space-y-4 max-w-3xl text-center">
             <h2 className="pt-16 text-4xl tracking-tighter text-transparent bg-clip-text bg-gradient-to-tr via-white md:text-5xl lg:text-6xl font-nomral font-geist from-zinc-400/50 to-white/60">
               A Supermemory has all the memory saved for you
             </h2>
+
             <p className="text-zinc-400">
               Supermemory offers all the vital building blocks you need to
               transform your idea into a great-looking startup.
             </p>
-            <button className="flex gap-2 justify-center items-center py-2 px-10 mt-4 text-lg tracking-tighter text-center bg-gradient-to-br rounded-md ring-2 ring-offset-1 transition-all hover:ring-transparent group w-fit font-geist bg-page-gradient text-md from-zinc-400 to-zinc-700 text-zinc-50 ring-zinc-500/50 ring-offset-zinc-950/5 hover:scale-[1.02] active:scale-[0.98] active:ring-zinc-500/70">
+            <button className="mx-auto flex gap-2 justify-center items-center py-2 px-10 mt-4 text-lg tracking-tighter text-center bg-gradient-to-br rounded-md ring-2 ring-offset-1 transition-all hover:ring-transparent group w-fit font-geist bg-page-gradient text-md from-zinc-400 to-zinc-700 text-zinc-50 ring-zinc-500/50 ring-offset-zinc-950/5 hover:scale-[1.02] active:scale-[0.98] active:ring-zinc-500/70">
               Get Started
               <div className="overflow-hidden relative ml-1 w-5 h-5">
                 <ArrowUpRight className="absolute transition-all duration-500 group-hover:translate-x-4 group-hover:-translate-y-5" />
@@ -55,6 +58,12 @@ export default function Features() {
             </button>
           </div>
           <FUIFeatureSectionWithCards />
+          <div className="overflow-x-hidden overflow-y-hidden">
+            <div
+              className="absolute left-0 top-[60%] h-32 w-[90%] overflow-x-hidden bg-[rgb(54,157,253)] bg-opacity-70  blur-[337.4px]"
+              style={{ transform: "rotate(-30deg)" }}
+            />
+          </div>
         </div>
       </div>
 
diff --git a/apps/web/app/(landing)/Features/index.tsx b/apps/web/app/(landing)/Features/index.tsx
index d9e88ffc..d4335ac7 100644
--- a/apps/web/app/(landing)/Features/index.tsx
+++ b/apps/web/app/(landing)/Features/index.tsx
@@ -1,7 +1,7 @@
 import { CheckIcon, ChevronRight, GithubIcon } from "lucide-react";
 import { Gradient } from "./features";
-
 import Generating from "./generating";
+
 const Services = () => {
   return (
     <div id="how-to-use">
@@ -127,7 +127,7 @@ const Services = () => {
               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] dark:[box-shadow:0_-20px_80px_-20px_#8686f01f_inset]"
+            className="flex overflow-hidden relative items-center p-8 mt-5 mb-5 rounded-3xl border lg:p-20 bg-page-gradient z-1 h-[38rem] border-white/20 xl:h-[28rem] dark:[box-shadow:0_-20px_80px_-20px_#8686f01f_inset]"
           >
             <img
               src="https://tailwindcss.com/_next/static/media/docs@30.8b9a76a2.avif"
diff --git a/apps/web/app/(landing)/ImageSliders.tsx b/apps/web/app/(landing)/ImageSliders.tsx
index 47338c42..c7d851cc 100644
--- a/apps/web/app/(landing)/ImageSliders.tsx
+++ b/apps/web/app/(landing)/ImageSliders.tsx
@@ -1,30 +1,93 @@
 import {
-  Github,
+  // Github,
   Medium,
   Notion,
   Reddit,
   Twitter,
 } from "@repo/ui/components/icons";
 import Image from "next/image";
+const Github = ({className}: {className?:string}) => {
+  return (
+    <svg fill="#ffffff" className={className} version="1.1" id="svg2" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 2500 676.1"  xmlSpace="preserve"><g id="layer1" transform="translate(-85.59 -376.905)"><g id="g3012" transform="matrix(1.25 0 0 -1.25 85.59 539.248)"><g id="g3014" transform="scale(.1)"><g id="g3016"><g id="g3018"><path id="path3024" className="st0" d="M3852.1-1016.2H2171.4c-43.4 0-78.5-35.2-78.5-78.6v-821.7c0-43.4 35.2-78.7 78.5-78.7H2827V-3016s-147.2-50.2-554.2-50.2c-480.2 0-1150.9 175.5-1150.9 1650.5 0 1475.3 698.5 1669.4 1354.2 1669.4 567.6 0 812.2-99.9 967.8-148.1 48.9-15 94.1 33.7 94.1 77.1l187.5 793.9c0 20.3-6.9 44.7-30 61.3-63.2 45.1-448.7 260.8-1422.6 260.8C1150.9 1298.8 0 821.4 0-1473.3S1317.6-4110 2428-4110c919.4 0 1477.1 392.9 1477.1 392.9 23 12.7 25.5 44.8 25.5 59.6v2562.7c0 43.4-35.2 78.6-78.5 78.6"/><path id="path3026" className="st0" d="M12513.4 1023.8c0 43.7-34.6 79-78 79h-946.3c-43.2 0-78.4-35.3-78.4-79l.3-1828.8H9936v1828.8c0 43.7-34.8 79-78.1 79h-946.3c-43.1 0-78.2-35.3-78.2-79V-3928c0-43.7 35.1-79.2 78.2-79.2h946.3c43.3 0 78.1 35.6 78.1 79.2v2118h1475l-2.6-2118c0-43.7 35.1-79.2 78.4-79.2h948.6c43.4 0 78 35.6 78.1 79.2v4951.8"/><path id="path3028" className="st0" d="M5637.8 374c0 340.7-273.2 616.1-610.2 616.1-336.7 0-610.1-275.4-610.1-616.1 0-340.4 273.4-616.5 610.1-616.5 337 0 610.2 276.1 610.2 616.5"/><path id="path3030" className="st0" d="M5570.1-2883.4v2285.8c0 43.4-35 78.9-78.3 78.9h-943.3c-43.3 0-82-44.6-82-88v-3274.8c0-96.3 60-124.9 137.6-124.9H5454c93.2 0 116.1 45.8 116.1 126.4v996.6"/><path id="path3032" className="st0" d="M16109.8-526.2h-939.1c-43.1 0-78.1-35.5-78.1-79.2v-2428s-238.5-174.5-577.2-174.5c-338.6 0-428.4 153.6-428.4 485.2v2117.4c0 43.7-35 79.2-78.1 79.2h-953.1c-43 0-78.3-35.5-78.3-79.2V-2883c0-984.8 548.8-1225.7 1303.9-1225.7 619.4 0 1118.8 342.2 1118.8 342.2s23.8-180.3 34.5-201.7c10.8-21.3 38.8-42.9 69.1-42.9l606.3 2.7c43 0 78.3 35.6 78.3 79l-.3 3324.1c.1 43.6-35 79.1-78.3 79.1"/><path id="path3034" className="st0" d="M18306-3205c-325.7 9.9-546.6 157.7-546.6 157.7v1568.1s218 133.6 485.4 157.5c338.2 30.3 664-71.9 664-878.5-.1-850.6-147.1-1018.5-602.8-1004.8zm370.4 2790c-533.4 0-896.1-238-896.1-238v1676.8c0 43.7-34.9 79-78.1 79h-949c-43.1 0-78.2-35.3-78.2-79V-3928c0-43.7 35.1-79.2 78.3-79.2h658.4c29.7 0 52.1 15.3 68.7 42.1 16.4 26.6 40 228.3 40 228.3s388.1-367.7 1122.6-367.7c862.4 0 1357 437.5 1357 1963.8 0 1526.2-789.9 1725.7-1323.6 1725.7"/><path id="path3036" className="st0" d="M8289.9-518.3H7580l-1.1 937.8c0 35.5-18.3 53.2-59.3 53.2h-967.3c-37.6 0-57.8-16.5-57.8-52.7v-969.1s-484.8-117-517.5-126.5c-32.6-9.5-56.7-39.6-56.7-75.5v-609c0-43.8 35-79.1 78.3-79.1h496v-1465c0-1088.2 763.3-1195.1 1278.4-1195.1 235.3 0 516.9 75.6 563.3 92.8 28.1 10.3 44.4 39.4 44.4 71l.8 669.9c0 43.7-36.9 79-78.5 79-41.4 0-147.2-16.8-256.1-16.8-348.7 0-466.8 162.1-466.8 372v1392.2H8290c43.3 0 78.3 35.3 78.3 79.1v762.8c-.1 43.8-35.2 79-78.4 79"/></g></g></g></g></g></svg>
+  )
+}
+const NotionText = ({className}: {className?: string}) => {
+  return (
+ 
+<svg className={className} version="1.0" fill="#ffffff" id="katman_1" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 600 400"  xmlSpace="preserve">
+<style type="text/css">
+</style>
+<path d="M283.2,228.4v-39.7h0.7l28.6,39.7h9v-58.3h-10v39.6h-0.7l-28.6-39.6h-9v58.3L283.2,228.4L283.2,228.4z M349.8,229.3
+	c13.2,0,21.3-8.6,21.3-23c0-14.3-8.1-23-21.3-23c-13.1,0-21.3,8.7-21.3,23C328.6,220.7,336.6,229.3,349.8,229.3z M349.8,220.9
+	c-7,0-11-5.3-11-14.6c0-9.2,4-14.6,11-14.6c7,0,11,5.4,11,14.6C360.8,215.6,356.8,220.9,349.8,220.9z M380.2,173.4v11.1h-7v8h7v24.1
+	c0,8.6,4,12,14.2,12c1.9,0,3.8-0.2,5.3-0.5v-7.8c-1.2,0.1-2,0.2-3.4,0.2c-4.2,0-6.1-1.9-6.1-6.3v-21.7h9.5v-8h-9.5v-11.1
+	L380.2,173.4L380.2,173.4z M405.7,228.4h10v-44.2h-10V228.4z M410.7,176.9c3.3,0,6-2.7,6-6c0-3.4-2.7-6.1-6-6.1c-3.3,0-6,2.7-6,6.1
+	C404.7,174.2,407.4,176.9,410.7,176.9L410.7,176.9z M443.1,229.3c13.2,0,21.3-8.6,21.3-23c0-14.3-8.1-23-21.3-23
+	c-13.1,0-21.3,8.7-21.3,23C421.8,220.7,429.8,229.3,443.1,229.3z M443.1,220.9c-7,0-11-5.3-11-14.6c0-9.2,4-14.6,11-14.6
+	c6.9,0,11,5.4,11,14.6C454,215.6,450,220.9,443.1,220.9z M470.3,228.4h10v-25.7c0-6.5,3.8-10.6,9.7-10.6c6.1,0,8.9,3.4,8.9,10.1
+	v26.2h10v-28.6c0-10.6-5.4-16.5-15.2-16.5c-6.6,0-11,3-13.1,8h-0.7v-7.1h-9.7C470.3,184.2,470.3,228.4,470.3,228.4z"/>
+<g>
+	<path className="st0" d="M120,152.1c4.7,3.8,6.4,3.5,15.2,2.9l82.9-5c1.8,0,0.3-1.8-0.3-2l-13.8-9.9c-2.6-2-6.2-4.4-12.9-3.8l-80.2,5.9
+		c-2.9,0.3-3.5,1.8-2.3,2.9L120,152.1z M125,171.4v87.2c0,4.7,2.3,6.4,7.6,6.1l91.1-5.3c5.3-0.3,5.9-3.5,5.9-7.3v-86.6
+		c0-3.8-1.5-5.9-4.7-5.6l-95.2,5.6C126.2,165.8,125,167.6,125,171.4L125,171.4z M214.9,176.1c0.6,2.6,0,5.3-2.6,5.6l-4.4,0.9v64.4
+		c-3.8,2-7.3,3.2-10.3,3.2c-4.7,0-5.9-1.5-9.4-5.9l-28.7-45.1v43.6l9.1,2c0,0,0,5.3-7.3,5.3l-20.2,1.2c-0.6-1.2,0-4.1,2-4.7l5.3-1.5
+		v-57.6l-7.3-0.6c-0.6-2.6,0.9-6.4,5-6.7l21.7-1.5l29.9,45.6V184l-7.6-0.9c-0.6-3.2,1.8-5.6,4.7-5.9L214.9,176.1z M104.2,132.2
+		l83.5-6.1c10.2-0.9,12.9-0.3,19.3,4.4l26.6,18.7c4.4,3.2,5.9,4.1,5.9,7.6v102.7c0,6.4-2.3,10.2-10.5,10.8l-96.9,5.9
+		c-6.2,0.3-9.1-0.6-12.3-4.7L100.1,246c-3.5-4.7-5-8.2-5-12.3v-91.3C95.1,137.1,97.5,132.8,104.2,132.2z"/>
+</g>
+</svg>
+
+  )
+}
+const MediumText = ({className}: {className?:string}) => {
+  return (
+
+<svg className={className} fill="#ffffff" version="1.1" id="layer" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 652 652" xmlSpace="preserve">
+<path d="M112,321.5c0,25-20.1,45.3-45,45.3s-45-20.3-45-45.3s20.1-45.3,45-45.3S112,296.5,112,321.5 M161.3,321.5
+	c0,23.5-10.1,42.6-22.5,42.6c-12.4,0-22.5-19.1-22.5-42.6s10.1-42.6,22.5-42.6C151.2,278.9,161.3,297.9,161.3,321.5 M181.5,321.5
+	c0,21.1-3.5,38.2-7.9,38.2c-4.4,0-7.9-17.1-7.9-38.2s3.5-38.2,7.9-38.2S181.5,300.4,181.5,321.5 M305.6,280.1l0.1,0v-1h-25.6
+	L256.4,335l-23.8-55.8h-27.6v1l0.1,0c4.7,1.1,7,2.6,7,8.3v66.4c0,5.7-2.4,7.2-7,8.3l-0.1,0v1h18.7v-1l-0.1,0c-4.7-1.1-7-2.6-7-8.3
+	v-62.5l30.5,71.8h1.7l31.4-73.8v66.2c-0.4,4.5-2.7,5.9-7,6.8l-0.1,0v1h32.6v-1l-0.1,0c-4.2-1-6.6-2.3-7-6.8l0-68h0
+	C298.6,282.8,301,281.2,305.6,280.1 M320.5,324.1c0.5-11.9,4.8-20.5,12-20.7c2.2,0,4.1,0.8,5.5,2.2c3.1,3,4.5,9.2,4.3,18.5H320.5z
+	 M320.2,327.4h38.2v-0.2c-0.1-9.1-2.7-16.2-7.8-21.1c-4.4-4.2-10.9-6.5-17.8-6.5h-0.2c-3.6,0-7.9,0.9-11,2.4
+	c-3.5,1.6-6.6,4.1-9.2,7.3c-4.2,5.2-6.7,12.1-7.3,20c0,0.2,0,0.5-0.1,0.7c0,0.2,0,0.4,0,0.7c-0.1,1.1-0.1,2.2-0.1,3.3
+	c0.4,17.8,10,32,27.1,32c15,0,23.7-10.9,25.9-25.6l-1.1-0.4c-3.8,7.9-10.7,12.7-18.5,12.1C327.6,351.3,319.4,340.5,320.2,327.4
+	 M401.5,351.5c-1.3,3-3.9,4.6-7.4,4.6s-6.7-2.4-9-6.8c-2.4-4.7-3.7-11.3-3.7-19.2c0-16.3,5.1-26.9,13-26.9c3.3,0,5.9,1.6,7.1,4.5
+	V351.5z M426.9,363.2c-4.7-1.1-7-2.7-7-8.7v-79.3l-28.4,8.4v1l0.2,0c3.9-0.3,6.6,0.2,8.1,1.6c1.2,1.1,1.8,2.8,1.8,5.2v10.9
+	c-2.8-1.8-6.1-2.7-10.2-2.7c-8.2,0-15.7,3.4-21.1,9.7c-5.6,6.5-8.6,15.4-8.6,25.8c0,18.5,9.1,30.9,22.6,30.9
+	c7.9,0,14.3-4.3,17.2-11.7v9.8H427v-1L426.9,363.2z M451.2,286c0-5.8-4.3-10.1-10.1-10.1c-5.7,0-10.2,4.4-10.2,10.1
+	s4.5,10.1,10.2,10.1C446.8,296.1,451.2,291.8,451.2,286 M457.9,363.2c-4.7-1.1-7-2.7-7-8.7h0v-54.6l-25.5,7.3v1l0.2,0
+	c5.5,0.5,7,2.4,7,8.8v47.2H458v-1L457.9,363.2z M523.1,363.2c-4.7-1.1-7-2.7-7-8.7v-54.6l-24.2,7.1v1l0.1,0c4.5,0.5,5.8,2.5,5.8,8.9
+	v34.5c-1.5,3-4.3,4.7-7.7,4.9c-5.5,0-8.6-3.7-8.6-10.5v-45.9l-25.5,7.3v1l0.2,0c5.5,0.5,7,2.4,7,8.8v29.2c0,2,0.2,4.1,0.5,6.1l0.5,2
+	c2.2,7.7,7.8,11.8,16.6,11.8c7.5,0,14.1-4.6,17-11.9v10.1h25.5v-1L523.1,363.2z M622,364.2v-1l-0.1,0c-5.1-1.2-7-3.4-7-7.9v-37.1
+	c0-11.6-6.5-18.5-17.4-18.5c-7.9,0-14.6,4.6-17.2,11.7c-2-7.6-7.9-11.7-16.7-11.7c-7.7,0-13.7,4-16.2,10.9v-10.7l-25.5,7v1l0.2,0
+	c5.4,0.5,7,2.4,7,8.7v47.6h23.8v-1l-0.1,0c-4-0.9-5.3-2.7-5.3-7.1v-42.6c1.1-2.5,3.2-5.5,7.5-5.5c5.3,0,8,3.7,8,10.9v45.3h23.8v-1
+	l-0.1,0c-4-0.9-5.3-2.7-5.3-7.1v-37.9c0-1.4-0.1-2.8-0.3-4.2c1.1-2.7,3.4-5.9,7.8-5.9c5.4,0,8,3.6,8,10.9v45.3H622z"/>
+</svg>
+
+  )
+}
 const logos = [
   {
-    name: "Larvel",
-    url: <Github className="w-16 h-16 brightness-100 invert-1 mx-10" />,
+    name: "Github",
+    url: <Github className="w-32 brightness-100 invert-1 mx-10" />,
   },
   {
-    name: "Nextjs",
-    url: <Medium className="w-16 h-16 brightness-100 invert-1 mx-10" />,
+    name: "Medium",
+    url: <MediumText className="w-52 h brightness-100 invert-1 mx-10" />,
   },
   {
-    name: "Prime",
-    url: <Notion className="w-16 h-16 brightness-100 invert-1 mx-10" />,
+    name: "Notion",
+    url: <NotionText className="w-52 brightness-100 invert-1 mx-10" />,
   },
   {
-    name: "Trustpilot",
+    name: "Reddit",
     url: <Reddit className="w-16 h-16 brightness-100 invert-1 mx-10" />,
   },
   {
-    name: "Webflow",
+    name: "Twitter",
     url: <Twitter className="w-16 h-16 brightness-100 invert-1 mx-10" />,
   },
 ];
@@ -32,7 +95,7 @@ const logos = [
 const AnimatedLogoCloud = () => {
   return (
     <div className="py-2 max-w-4xl">
-      <p className="font-normal tracking-tighter text-base text-gray-100 bg-gradient-to-br from-zinc-400 via-zinc-300 to-zinc-700 bg-clip-text text-transparent text-center mt-6">
+      <p className="font-normal tracking-tighter text-base text-gray-100 bg-gradient-to-br from-zinc-400 via-zinc-300 to-zinc-700 bg-clip-text text-transparent text-center mt-4">
         Well Integrated with six companies so far
 
       
@@ -40,13 +103,13 @@ const AnimatedLogoCloud = () => {
       {/* <hr className="h-[0.1px]  relative bg-white/10" /> */}
 
       <div className="relative bg-page-gradient h-full mx-auto max-w-full">
-      <div className="absolute z-40  mx-auto  h-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>
+      <div className="absolute z-40 mx-auto  h-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>
         
       </div>
       <div className="px-4 mx-auto w-full md:px-8 relative ">
 
         <div
-          className="flex overflow-hidden relative gap-6 p-2 mt-6 group"
+          className="flex overflow-hidden relative gap-6 p-2 mt-[-40px] group"
           style={{
             maskImage:
               "linear-gradient(to left, transparent 0%, black 20%, black 80%, transparent 95%)",
@@ -57,7 +120,7 @@ const AnimatedLogoCloud = () => {
             .map((index) => (
               <div
                 key={index}
-                className="flex flex-row gap-10 justify-around animate-logo-cloud shrink-0"
+                className="flex flex-row gap-5 justify-around items-center animate-logo-cloud shrink-0"
               >
                 {logos.map((logo, key) => (
                   <>{logo.url}</>
@@ -71,3 +134,5 @@ const AnimatedLogoCloud = () => {
 };
 
 export default AnimatedLogoCloud;
+
+
diff --git a/apps/web/app/(landing)/RotatingIcons.tsx b/apps/web/app/(landing)/RotatingIcons.tsx
index 1b0cb4a3..18825fdf 100644
--- a/apps/web/app/(landing)/RotatingIcons.tsx
+++ b/apps/web/app/(landing)/RotatingIcons.tsx
@@ -35,7 +35,7 @@ const RotatingIcons: React.FC = () => {
           {...{
             transition: {delay: 0.2 },
           }}
-          className="text-center max-w-2xl  mx-auto bg-[linear-gradient(180deg,_#FFF_0%,_rgba(255,_255,_255,_0.00)_202.08%)]  bg-clip-text text-4xl tracking-tighter   text-transparent md:text-7xl"
+          className="text-center max-w-2xl  mx-auto bg-[linear-gradient(180deg,_#FFF_0%,_rgba(255,_255,_255,_0.00)_202.08%)]  bg-clip-text text-4xl tracking-tighter   text-transparent md:text-5xl lg:text-6xl"
         >
           Collect any data{" "}
           <span className="bg-gradient-to-r from-zinc-300 to-blue-200 bg-clip-text text-transparent">
diff --git a/apps/web/app/(landing)/package.json b/apps/web/app/(landing)/package.json
deleted file mode 100644
index a7fabf2f..00000000
--- a/apps/web/app/(landing)/package.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-  "scripts": {
-    "vercel-build": "next build"
-  }
-}
diff --git a/apps/web/app/(landing)/page.tsx b/apps/web/app/(landing)/page.tsx
index cf460a65..5bb317da 100644
--- a/apps/web/app/(landing)/page.tsx
+++ b/apps/web/app/(landing)/page.tsx
@@ -10,6 +10,7 @@ import { redirect } from "next/navigation";
 import FUIPricingSectionWithBadge from "./Pricing";
 import Services from "./Features/index";
 import { Showcases } from "./Showcase";
+import { cn } from "@repo/ui/lib/utils";
 
 export const runtime = "edge";
 
@@ -23,11 +24,11 @@ export default async function Home() {
   }
 
   return (
-    <main className="flex relative min-h-screen flex-col items-center overflow-x-hidden px-2 md:px-0 font-geistSans bg-hero-gradient">
+    <main className="flex overflow-x-hidden relative flex-col items-center px-2 min-h-screen md:px-0 font-geistSans bg-hero-gradient">
       <Navbar />
 
       {/* Background gradients */}
-      <div className="absolute left-0 top-0 z-[-1] h-full w-full">
+      <div className="absolute top-0 left-0 w-full h-full z-[-1]">
         <div className="overflow-x-hidden">
           <div
             className="absolute left-0 h-32 w-[95%] overflow-x-hidden bg-[#369DFD] bg-opacity-70 blur-[337.4px]"
@@ -55,13 +56,11 @@ export default async function Home() {
 
       {/* Features section */}
       <Features />
-      
-      <RotatingIcons />
 
+      <RotatingIcons />
       <Cta />
 
       <Toaster />
-
       <Footer />
     </main>
   );