Merge branch 'dev' into mainnet

web-app/src/app/landing.css

@@ -925,6 +925,9 @@ html#landing {
   .gap-8 {
     gap: 2rem;
   }
+  .self-center {
+    align-self: center;
+  }
   .overflow-hidden {
     overflow: hidden;
   }
@@ -1140,6 +1143,9 @@ html#landing {
   .text-center {
     text-align: center;
   }
+  .text-start {
+    text-align: start;
+  }
   .font-primary {
     font-family: Inter, sans-serif;
   }
@@ -1317,13 +1323,13 @@ html#landing {
     transition-duration: 500ms;
   }
 
-  .no-scrollbar::-webkit-scrollbar {
+  /* .no-scrollbar::-webkit-scrollbar {
     display: none;
   }
   .no-scrollbar {
     -ms-overflow-style: none;
     scrollbar-width: none;
-  }
+  } */
 
   @font-face {
     font-family: Inter;
@@ -1446,10 +1452,6 @@ html#landing {
   }
 
   @media not all and (min-width: 1200px) {
-    .max-lg\:w-\[50\%\] {
-      width: 50%;
-    }
-
     .max-lg\:py-16 {
       padding-top: 4rem;
       padding-bottom: 4rem;
@@ -1462,10 +1464,6 @@ html#landing {
   }
 
   @media (min-width: 640px) {
-    .sm\:w-\[75\%\] {
-      width: 75%;
-    }
-
     .sm\:w-full {
       width: 100%;
     }
@@ -1536,6 +1534,10 @@ html#landing {
       gap: 6rem;
     }
 
+    .md\:gap-4 {
+      gap: 1rem;
+    }
+
     .md\:gap-48 {
       gap: 12rem;
     }
@@ -1611,10 +1613,6 @@ html#landing {
       padding-right: 10rem;
     }
 
-    .md\:pt-0 {
-      padding-top: 0px;
-    }
-
     .md\:pt-16 {
       padding-top: 4rem;
     }
@@ -1623,6 +1621,10 @@ html#landing {
       padding-top: 1rem;
     }
 
+    .md\:text-center {
+      text-align: center;
+    }
+
     .md\:text-end {
       text-align: end;
     }
@@ -1637,6 +1639,11 @@ html#landing {
       line-height: 2.25rem;
     }
 
+    .md\:text-4xl {
+      font-size: 2.25rem;
+      line-height: 2.5rem;
+    }
+
     .md\:text-5xl {
       font-size: 3rem;
       line-height: 1;
@@ -1666,18 +1673,18 @@ html#landing {
       line-height: 4.5rem;
     }
 
+    .md\:leading-\[4rem\] {
+      line-height: 4rem;
+    }
+
     .md\:leading-\[5\.2rem\] {
       line-height: 5.2rem;
     }
   }
 
   @media (min-width: 1200px) {
-    .lg\:absolute {
-      position: absolute;
-    }
-
-    .lg\:m-0 {
-      margin: 0px;
+    .lg\:mt-0 {
+      margin-top: 0px;
     }
 
     .lg\:h-\[100dvh\] {
@@ -1688,43 +1695,50 @@ html#landing {
       width: 50%;
     }
 
-    .lg\:w-\[700px\] {
-      width: 700px;
+    .lg\:w-\[575px\] {
+      width: 575px;
     }
 
     .lg\:flex-row {
       flex-direction: row;
     }
 
-    .lg\:items-end {
-      align-items: flex-end;
+    .lg\:items-start {
+      align-items: flex-start;
+    }
+
+    .lg\:justify-start {
+      justify-content: flex-start;
     }
 
-    .lg\:justify-end {
-      justify-content: flex-end;
+    .lg\:gap-12 {
+      gap: 3rem;
     }
 
     .lg\:px-0 {
       padding-left: 0px;
       padding-right: 0px;
     }
 
-    .lg\:pb-48 {
-      padding-bottom: 12rem;
-    }
-
     .lg\:pr-6 {
       padding-right: 1.5rem;
     }
 
-    .lg\:text-end {
-      text-align: end;
+    .lg\:pt-32 {
+      padding-top: 8rem;
     }
-  }
 
-  @media (min-width: 1280px) {
-    .xl\:w-\[75\%\] {
-      width: 75%;
+    .lg\:text-start {
+      text-align: start;
+    }
+
+    .lg\:text-5xl {
+      font-size: 3rem;
+      line-height: 1;
+    }
+
+    .lg\:leading-\[3\.6rem\] {
+      line-height: 3.6rem;
     }
   }
 

web-app/src/app/page.tsx

@@ -13,6 +13,7 @@ import "./globals.css";
 import "./landing.css";
 import HowItWorksSection from "@/components/sections/landing/HowItWorks";
 import UseCasesSection from "@/components/sections/landing/UseCases";
+import TestimonialsSection from "@/components/sections/landing/Testimonials";
 
 const Landing = () => {
   const router = useRouter();
@@ -59,7 +60,7 @@ const Landing = () => {
           }}
         >
           <BigTextSection />
-          {/* <TestimonialsSection /> */}
+          <TestimonialsSection />
         </div>
         <PartnersSection />
         <SubscribeSection />

web-app/src/components/new/AppHeader.tsx

@@ -45,7 +45,7 @@ const AppHeader = () => {
           alt="index network"
         />
         <div className="hidden md:flex gap-24 items-center">
-          <ul className="flex gap-12 text-white text-sm">
+          <ul className="flex md:gap-4 lg:gap-12 text-white text-sm">
             <li>
               <a href="https://index.network" className="hover:underline">
                 HOME

web-app/src/components/sections/landing/Hero.tsx

@@ -1,6 +1,7 @@
 import Button from "@/components/new/Button";
 import { useAuth } from "@/context/AuthContext";
 import useTypingAnimation from "@/hooks/useTypingAnimation";
+import Image from "next/image";
 import { useRouter, useSearchParams } from "next/navigation";
 import { useMemo } from "react";
 
@@ -24,36 +25,36 @@ const HeroSection = () => {
   }, [query.get("allowed")]);
 
   return (
-    <section
-      className="relative"
-      style={{
-        backgroundImage: "url(/images/hero-bg.png)",
-        // cover
-        backgroundSize: "cover",
-      }}
-    >
-      <div className="m-auto flex max-w-screen-lg flex-row gap-12 h-[80dvh] items-center lg:h-[100dvh] pb-24 pt-48 md:pb-10 lg:flex-row ">
-        <div className="font-secondary z-10 flex flex-col justify-center gap-4 px-8  lg:px-0 lg:pr-6 ">
-          <h1 className="hidden md:block font-title text-[1.9rem] leading-[2.25rem] md:text-7xl md:leading-[5.2rem]">
-            The First Discovery Protocol <br /> for{" "}
-            <span className="text-highlightBlue">{typingText}|</span>
-          </h1>
-          <h1 className="md:hidden font-title text-[1.9rem] leading-[2.25rem] md:text-6xl md:leading-[4.5rem]">
+    <section className="relative">
+      <div className="m-auto flex flex-col gap-12 lg:h-[100dvh] pb-12 pt-12 md:pb-16 lg:flex-row lg:justify-start">
+        <div className="relative self-center flex items-center w-full pt-4 md:mt-12 lg:mt-0 md:w-1/2  max-w-screen-lg">
+          <Image
+            src="/images/hero.png"
+            alt="Hero"
+            width={716}
+            height={523}
+            layout="responsive"
+          />
+        </div>
+
+        <div className="lg:pt-32 font-secondary z-10 flex flex-col items-center justify-center gap-4 px-8 text-center  lg:w-[575px] lg:items-start lg:px-0 lg:pr-6 ">
+          <h1 className="font-title text-center lg:text-start text-[1.9rem] leading-[2.25rem] md:text-4xl lg:text-5xl lg:leading-[3.6rem]">
             The First <br />
             Discovery Protocol <br /> for{" "}
             <span className="text-highlightBlue">{typingText}|</span>
           </h1>
 
-          <p className="hidden md:block text-base md:text-xl">
-            Index allows you to create truly personalised and <br /> autonomous
-            discovery experiences across the web
+          <p className="hidden text-start md:block text-base md:text-xl">
+            Index allows you to create truly personalised and
+            <br />
+            autonomous discovery experiences across the web.
           </p>
           <p className="md:hidden text-base md:text-xl">
             Index allows you to create truly personalised and autonomous
-            discovery experiences across the web
+            discovery experiences across the web.
           </p>
-          <div className="flex gap-4 pt-4">
-            {allowed && <Button onClick={connect}>Connect</Button>}
+          <div className="flex gap-4">
+            <Button onClick={connect}>Connect</Button>
             <Button
               variant="outline"
               onClick={() => {

web-app/src/components/sections/landing/Testimonials/TestimonialSlider.tsx

@@ -3,46 +3,25 @@ import React, { useState } from "react";
 
 const testimonials = [
   {
-    name: "Joseph Lubin",
-    title: "Consensys, Founder & CEO",
-    image: "/images/testimonials/lubin.jpg",
-    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Neque vitae tempus quam pellentesque nec nam aliquam. Enim diam vulputate ut pharetra sit amet aliquam. Etiam erat velit scelerisque in dictum non consectetur a.",
-    twitter: "https://twitter.com/ethereumJoseph",
+    name: "David Sneider",
+    title: "Lit Protocol, Co-founder",
+    image: "/images/testimonials/sneider.jpg",
+    text: "Index Network is a foundational base layer for the user owned web. We're so glad to be  collaborators on privacy at Lit Protocol!",
+    twitter: "https://x.com/davidlsneider",
   },
   {
     name: "Danny Zuckerman",
     title: "3Box Labs, Co-founder",
     image: "/images/testimonials/zuckerman.jpg",
-    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Neque vitae tempus quam pellentesque nec nam aliquam. Enim diam vulputate ut pharetra sit amet aliquam. Etiam erat velit scelerisque in dictum non consectetur a.",
-    twitter: "https://twitter.com/dazuck",
+    text: "Apps need to deliver better information and experiences faster. Index's semantic index does that. Index can make better discovery a primitive all apps rely on.",
+    twitter: "https://x.com/dazuck",
   },
   {
-    name: "Adam Corrado",
-    title: "3Box Labs, Partnerships and BD Lead",
-    image: "/images/testimonials/corrado.jpg",
-    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Neque vitae tempus quam pellentesque nec nam aliquam. Enim diam vulputate ut pharetra sit amet aliquam. Etiam erat velit scelerisque in dictum non consectetur a.",
-    twitter: "https://twitter.com/dazuck",
-  },
-  {
-    name: "Joseph Lubin",
-    title: "Consensys, Founder & CEO",
-    image: "/images/testimonials/lubin.jpg",
-    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Neque vitae tempus quam pellentesque nec nam aliquam. Enim diam vulputate ut pharetra sit amet aliquam. Etiam erat velit scelerisque in dictum non consectetur a.",
-    twitter: "https://twitter.com/ethereumJoseph",
-  },
-  {
-    name: "Danny Zuckerman",
-    title: "3Box Labs, Co-founder",
-    image: "/images/testimonials/zuckerman.jpg",
-    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Neque vitae tempus quam pellentesque nec nam aliquam. Enim diam vulputate ut pharetra sit amet aliquam. Etiam erat velit scelerisque in dictum non consectetur a.",
-    twitter: "https://twitter.com/dazuck",
-  },
-  {
-    name: "Adam Corrado",
-    title: "3Box Labs, Partnerships and BD Lead",
-    image: "/images/testimonials/corrado.jpg",
-    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Neque vitae tempus quam pellentesque nec nam aliquam. Enim diam vulputate ut pharetra sit amet aliquam. Etiam erat velit scelerisque in dictum non consectetur a.",
-    twitter: "https://twitter.com/dazuck",
+    name: "Simon Brown",
+    title: "Consensys, Researcher & Advisor",
+    image: "/images/testimonials/brown.jpg",
+    text: "Index Network is going to change the way we think about discovering information and interacting with the web. The ability to use autonomous AI agents to index and interpret data from multiple sources through an intuitive natural language interface is a total game changer!",
+    twitter: "https://x.com/orbmis",
   },
 ];
 

web-app/src/components/sections/landing/UseCases/MessageBlocks.tsx

@@ -33,6 +33,12 @@ export const renderImageBlocks = (blockID: string) => {
             src="/images/use-cases/message4.png"
             alt="Use Cases"
             width={584}
+            height={60}
+          />
+          <Image
+            src="/images/use-cases/message5.png"
+            alt="Use Cases"
+            width={584}
             height={88}
           />
         </div>
@@ -41,25 +47,25 @@ export const renderImageBlocks = (blockID: string) => {
       return (
         <div className="image-container flex flex-col gap-4">
           <Image
-            src="/images/use-cases/message5.png"
+            src="/images/use-cases/message6.png"
             alt="Use Cases"
             width={584}
             height={60}
           />
           <Image
-            src="/images/use-cases/message6.png"
+            src="/images/use-cases/message7.png"
             alt="Use Cases"
             width={584}
             height={96}
           />
           <Image
-            src="/images/use-cases/message7.png"
+            src="/images/use-cases/message8.png"
             alt="Use Cases"
             width={584}
             height={78}
           />
           <Image
-            src="/images/use-cases/message8.png"
+            src="/images/use-cases/message9.png"
             alt="Use Cases"
             width={584}
             height={237}
@@ -70,7 +76,7 @@ export const renderImageBlocks = (blockID: string) => {
       return (
         <div className="image-container flex flex-col gap-4">
           <Image
-            src="/images/use-cases/message9.png"
+            src="/images/use-cases/message10.png"
             alt="Use Cases"
             width={584}
             height={92}