Homepage

package.json

@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "@cowprotocol/cow-sdk": "^5.10.3",
-    "@kleros/kleros-app": "^2.2.2",
+    "@kleros/kleros-app": "^3.0.1",
     "@kleros/ui-components-library": "^3.7.0",
     "@reown/appkit": "^1.7.11",
     "@reown/appkit-adapter-wagmi": "^1.7.11",

src/app/(homepage)/components/BottomHeader.tsx

@@ -0,0 +1,29 @@
+import clsx from "clsx";
+
+import EyeIcon from "@/assets/svg/eye.svg";
+
+const BottomHeader: React.FC = () => {
+  return (
+    <div className="mb-57.75 flex w-full flex-col items-center gap-3">
+      <EyeIcon />
+      <h1
+        className={clsx(
+          "bg-gradient-to-r from-[#4872FF] to-[#1D6AAA] bg-clip-text dark:to-[#9DD3FF]",
+          "text-center text-2xl font-bold text-transparent italic md:text-5xl",
+        )}
+      >
+        Predicting Trends. Informing Decisions.
+      </h1>
+      <h2
+        className={clsx(
+          "bg-gradient-to-r from-[#4872FF] to-[#1D6AAA] bg-clip-text dark:to-[#9DD3FF]",
+          "text-center text-sm text-transparent italic md:text-base",
+        )}
+      >
+        Anticipate Change. Act Early.
+      </h2>
+    </div>
+  );
+};
+
+export default BottomHeader;

src/app/(homepage)/components/Header.tsx

@@ -0,0 +1,30 @@
+import clsx from "clsx";
+
+import EyeIcon from "@/assets/svg/eye.svg";
+import ForesightLogo from "@/assets/svg/foresight-logo.svg";
+const Header: React.FC = () => {
+  return (
+    <div className="flex w-full flex-col items-center gap-3">
+      <ForesightLogo className="w-24 md:w-39.75" />
+      <EyeIcon />
+      <h1
+        className={clsx(
+          "bg-gradient-to-r from-[#4872FF] to-[#1D6AAA] bg-clip-text dark:to-[#9DD3FF]",
+          "text-center text-2xl font-bold text-transparent italic md:text-5xl",
+        )}
+      >
+        See Further. Decide Smarter.
+      </h1>
+      <h2
+        className={clsx(
+          "bg-gradient-to-r from-[#4872FF] to-[#1D6AAA] bg-clip-text dark:to-[#9DD3FF]",
+          "text-center text-sm text-transparent italic md:text-base",
+        )}
+      >
+        EXPLORE AVAILABLE PREDICTIONS
+      </h2>
+    </div>
+  );
+};
+
+export default Header;

src/app/(homepage)/components/HomepageOverlay.tsx

@@ -0,0 +1,17 @@
+import clsx from "clsx";
+
+import HomepageOverlaySvg from "@/assets/svg/homepage-overlay.svg";
+
+const HomepageOverlay: React.FC = () => {
+  return (
+    <HomepageOverlaySvg
+      className={clsx(
+        "absolute left-1/2 -z-1 -translate-x-1/2 translate-y-6",
+        "w-[200%] origin-top scale-50 sm:w-[150%] sm:scale-75 md:w-full md:max-w-360 md:scale-95",
+        "dark:[&_path]:fill-klerosUIComponentsWhiteBackground [&_path]:fill-[#4872FF05]",
+      )}
+    />
+  );
+};
+
+export default HomepageOverlay;

src/app/(homepage)/layout.tsx

@@ -0,0 +1,18 @@
+import Footer from "@/components/layout/Footer";
+import Header from "@/components/layout/HomepageHeader";
+
+export const dynamic = "force-static";
+
+export default function HomepageLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <>
+      <Header />
+      {children}
+      <Footer />
+    </>
+  );
+}

src/app/(homepage)/page.tsx

@@ -1,114 +1,35 @@
-"use client";
+import dynamic from "next/dynamic";
 
-import React, { useEffect } from "react";
+import { experiments } from "@/consts/experiments";
 
-import { Button } from "@kleros/ui-components-library";
-import clsx from "clsx";
-import { useLocalStorage, useToggle } from "react-use";
-
-import { useReadGnosisRouterGetWinningOutcomes } from "@/generated";
-import { useMarketsStore } from "@/store/markets";
-
-import MarketContextProvider from "@/context/MarketContext";
-import { TradeWalletProvider } from "@/context/TradeWalletContext";
-import { useChartData } from "@/hooks/useChartData";
-import { usePredictionMarkets } from "@/hooks/usePredictionMarkets";
-
-import FirstVisitGuide from "@/components/Guides/FirstVisit";
-import Loader from "@/components/Loader";
-
-import { isUndefined } from "@/utils";
-
-import { markets, parentConditionId } from "@/consts/markets";
-
-import AdvancedSection from "./components/AdvancedSection";
-import Chart from "./components/Chart";
+import BottomHeader from "./components/BottomHeader";
 import Header from "./components/Header";
-import ParticipateSection from "./components/ParticipateSection";
-import ExportPredictions from "./components/ParticipateSection/CsvUpload/ExportPredictions";
-import PredictAll from "./components/PredictAll";
-import ProjectFunding from "./components/ProjectFunding";
-
-export default function Home() {
-  const { data: chartData } = useChartData(markets);
-  const predictionMarkets = usePredictionMarkets();
-  const resetPredictionMarkets = useMarketsStore(
-    (state) => state.resetPredictionMarkets,
-  );
+import HomepageOverlay from "./components/HomepageOverlay";
 
-  const { data: winningOutcomes } = useReadGnosisRouterGetWinningOutcomes({
-    args: [parentConditionId],
-  });
-
-  const [isOpen, toggleGuide] = useToggle(false);
-  const [isOnboardingDone, setOnboardingDone] = useLocalStorage<boolean>(
-    "onboarding-done",
-    false,
-  );
-
-  useEffect(() => {
-    if (!isOnboardingDone || isUndefined(isOnboardingDone)) {
-      toggleGuide(true);
-    }
-  }, [isOnboardingDone, toggleGuide]);
+const ExperimentCard = dynamic(() => import("@/components/ExperimentCard"), {
+  loading: () => (
+    <div className="bg-klerosUIComponentsStroke min-h-109.5 w-full animate-pulse rounded-xl" />
+  ),
+});
 
+export default function Home() {
   return (
-    <div className="w-full px-4 py-12 md:px-8 lg:px-32">
+    <div className="relative w-full px-4 pt-6 pb-12 md:px-8 lg:px-32">
+      <HomepageOverlay />
       <div className="mx-auto max-w-294">
         <Header />
-        <div className="min-h-106">
-          {!isUndefined(chartData) ? (
-            <Chart data={chartData} />
-          ) : (
-            <div className="flex h-96 w-full items-center justify-center">
-              <Loader />
-            </div>
-          )}
-        </div>
 
-        <div className="flex flex-col gap-4">
-          <TradeWalletProvider>
-            <ParticipateSection />
-            <div className="flex flex-col gap-4">
-              {markets.map((market, i) => (
-                <MarketContextProvider
-                  key={market.marketId}
-                  selected={winningOutcomes?.at(i)}
-                  {...market}
-                >
-                  <ProjectFunding key={market.marketId} />
-                </MarketContextProvider>
-              ))}
+        <div className="my-12 flex w-full flex-wrap justify-center gap-4">
+          {experiments.map((experiment, index) => (
+            <div
+              key={experiment.slug}
+              className="w-full sm:w-[calc(50%-0.5rem)] lg:w-[calc(33.333%-0.75rem)]"
+            >
+              <ExperimentCard {...experiment} priority={index === 0} />
             </div>
-            {predictionMarkets.length > 0 ? (
-              <div
-                className={clsx(
-                  "flex w-full flex-wrap justify-between gap-4",
-                  "flex-col-reverse items-start sm:flex-row sm:items-center",
-                )}
-              >
-                <Button
-                  variant="secondary"
-                  small
-                  text="Reset Predictions"
-                  onPress={resetPredictionMarkets}
-                />
-                <ExportPredictions />
-              </div>
-            ) : null}
-            <PredictAll />
-          </TradeWalletProvider>
-
-          <AdvancedSection />
+          ))}
         </div>
-
-        <FirstVisitGuide
-          isVisible={isOpen}
-          closeGuide={() => {
-            setOnboardingDone(true);
-            toggleGuide(false);
-          }}
-        />
+        <BottomHeader />
       </div>
     </div>
   );

src/app/globals.css

@@ -81,13 +81,15 @@
     --foreground: #171717;
     --red-2: #f75c7b;
     --green-2: #3fec65;
+    --klerosUIComponentsPrimaryBlue: #4872ff;
   }
 
   :root.dark {
     --background: #0a0a0a;
     --foreground: #ededed;
     --red-2: #ffd2db;
     --green-2: #d2ffdc;
+    --klerosUIComponentsPrimaryBlue: #4872ff;
   }
 
   body {

src/app/layout.tsx

@@ -2,13 +2,6 @@ import { ThemeProvider } from "next-themes";
 
 import clsx from "clsx";
 import localFont from "next/font/local";
-import { headers } from "next/headers";
-import { ToastContainer } from "react-toastify";
-
-import Web3Context from "@/context/Web3Context";
-
-import Footer from "@/components/layout/Footer";
-import Header from "@/components/layout/Header";
 
 import "@kleros/ui-components-library/style.css";
 import "./globals.css";
@@ -31,8 +24,6 @@ export default function RootLayout({
 }: Readonly<{
   children: React.ReactNode;
 }>) {
-  const cookies = headers().get("cookie");
-
   return (
     <html lang="en" className="box-border size-full" suppressHydrationWarning>
       <head>
@@ -44,14 +35,9 @@ export default function RootLayout({
           "flex size-full flex-col",
         )}
       >
-        <Web3Context {...{ cookies }}>
-          <ThemeProvider themes={["light", "dark"]} attribute="class">
-            <ToastContainer className="p-4 pt-[70px]" />
-            <Header />
-            {children}
-            <Footer />
-          </ThemeProvider>
-        </Web3Context>
+        <ThemeProvider themes={["light", "dark"]} attribute="class">
+          {children}
+        </ThemeProvider>
       </body>
     </html>
   );

src/app/settings/email-confirmation/page.tsx

@@ -1,20 +1,21 @@
 "use client";
 import React, { useEffect, useRef, useState } from "react";
 
+import { useAtlasProvider } from "@kleros/kleros-app";
+import { Button } from "@kleros/ui-components-library";
+import clsx from "clsx";
+import Link from "next/link";
+import { useSearchParams } from "next/navigation";
 import { isAddress } from "viem";
 
-import { Button } from "@kleros/ui-components-library";
+import Loader from "@/components/Loader";
 
 import CheckIcon from "@/assets/svg/check-circle.svg";
-import WarningIcon from "@/assets/svg/warning-outline.svg";
 import InvalidIcon from "@/assets/svg/minus-outline.svg";
+import WarningIcon from "@/assets/svg/warning-outline.svg";
 
-import { useAtlasProvider } from "@kleros/kleros-app";
-import clsx from "clsx";
 import { cn } from "@/utils";
-import { useSearchParams } from "next/navigation";
-import Loader from "@/components/Loader";
-import Link from "next/link";
+
 import { tgLink } from "@/consts/markets";
 
 enum TextColor {

src/app/settings/layout.tsx

@@ -0,0 +1,24 @@
+import { headers } from "next/headers";
+import { ToastContainer } from "react-toastify";
+
+import Web3Context from "@/context/Web3Context";
+
+import Footer from "@/components/layout/Footer";
+import Header from "@/components/layout/Header";
+
+export default function SettingsLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  const cookies = headers().get("cookie");
+
+  return (
+    <Web3Context cookies={cookies}>
+      <ToastContainer className="p-4 pt-[70px]" />
+      <Header />
+      {children}
+      <Footer />
+    </Web3Context>
+  );
+}