From ba75d276b19e5da95dcedcdfe67f71b4b1b470f5 Mon Sep 17 00:00:00 2001
From: Ameer Arsala <ameer.arsala03@gmail.com>
Date: Wed, 5 Jun 2024 14:09:15 -0700
Subject: [PATCH] try now

---
 .../ui/GridAndDotBackground/GridBGWithFade.astro   | 14 ++++++++++++++
 .../components/ui/GridAndDotBackground/index.ts    |  5 -----
 frontend/src/components/ui/globe.tsx               |  1 -
 .../ui/placeholders-and-vanish-input.tsx           |  2 --
 frontend/src/layouts/DefaultLayout.astro           |  4 ++--
 frontend/src/pages/SocietyGenerator.tsx            |  2 --
 frontend/src/pages/index.astro                     |  6 +++---
 7 files changed, 19 insertions(+), 15 deletions(-)
 create mode 100644 frontend/src/components/ui/GridAndDotBackground/GridBGWithFade.astro
 delete mode 100644 frontend/src/components/ui/GridAndDotBackground/index.ts

diff --git a/frontend/src/components/ui/GridAndDotBackground/GridBGWithFade.astro b/frontend/src/components/ui/GridAndDotBackground/GridBGWithFade.astro
new file mode 100644
index 00000000..eb62cc7a
--- /dev/null
+++ b/frontend/src/components/ui/GridAndDotBackground/GridBGWithFade.astro
@@ -0,0 +1,14 @@
+---
+// Something
+---
+
+<div
+	class="relative flex w-[60vw] h-64 items-center bg-white bg-grid-black/[0.2] dark:bg-black dark:bg-grid-white/[0.2] ml-auto mr-auto"
+>
+  <!-- Radial gradient for the container to give a faded look -->
+  <div
+		class="pointer-events-none absolute inset-0 bg-white rounded-lg [mask-image:radial-gradient(ellipse_at_center,transparent_5%,black)] dark:bg-black"
+	></div>
+
+  <slot />
+</div>
diff --git a/frontend/src/components/ui/GridAndDotBackground/index.ts b/frontend/src/components/ui/GridAndDotBackground/index.ts
deleted file mode 100644
index 804045d3..00000000
--- a/frontend/src/components/ui/GridAndDotBackground/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import GridAndDotBackgrounds from './GridAndDotBackgrounds.svelte';
-import GridAndDotBackgroundsSmallGrid from './GridAndDotBackgroundsSmallGrid.svelte';
-import DotBackground from './DotBackground.svelte';
-
-export { GridAndDotBackgrounds, GridAndDotBackgroundsSmallGrid, DotBackground };
diff --git a/frontend/src/components/ui/globe.tsx b/frontend/src/components/ui/globe.tsx
index 8be46b6d..e98f890b 100644
--- a/frontend/src/components/ui/globe.tsx
+++ b/frontend/src/components/ui/globe.tsx
@@ -1,4 +1,3 @@
-"use client";
 import { useEffect, useRef, useState } from "react";
 import { Color, Scene, Fog, PerspectiveCamera, Vector3 } from "three";
 import ThreeGlobe from "three-globe";
diff --git a/frontend/src/components/ui/placeholders-and-vanish-input.tsx b/frontend/src/components/ui/placeholders-and-vanish-input.tsx
index a978c954..8c59da4d 100644
--- a/frontend/src/components/ui/placeholders-and-vanish-input.tsx
+++ b/frontend/src/components/ui/placeholders-and-vanish-input.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { AnimatePresence, motion } from "framer-motion";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { cn } from "../../utils/cn";
diff --git a/frontend/src/layouts/DefaultLayout.astro b/frontend/src/layouts/DefaultLayout.astro
index 7e8ad3e6..73842d40 100644
--- a/frontend/src/layouts/DefaultLayout.astro
+++ b/frontend/src/layouts/DefaultLayout.astro
@@ -2,9 +2,9 @@
 import Layout from './Layout.astro';
 
 //import Navbar from '@components/NavBar/Navbar.svelte
-import Navbar from "@components/NavBar/Navbar.astro";
+import Navbar from "../components/NavBar/Navbar.astro";
 
-import { GridAndDotBackgroundsSmallGrid } from '@components/ui/GridAndDotBackground';
+//import { GridAndDotBackgroundsSmallGrid } from '@components/ui/GridAndDotBackground';
 
 interface Props {
   title?: string;
diff --git a/frontend/src/pages/SocietyGenerator.tsx b/frontend/src/pages/SocietyGenerator.tsx
index c08aa252..99db37b2 100644
--- a/frontend/src/pages/SocietyGenerator.tsx
+++ b/frontend/src/pages/SocietyGenerator.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { PlaceholdersAndVanishInput } from "@components/ui/placeholders-and-vanish-input";
 
 export function SocietyGenerator() {
diff --git a/frontend/src/pages/index.astro b/frontend/src/pages/index.astro
index 13a3004f..fd96a757 100644
--- a/frontend/src/pages/index.astro
+++ b/frontend/src/pages/index.astro
@@ -4,7 +4,7 @@ import { FlipWords } from "@components/ui/flip-words";
 import { SocietyGenerator } from './SocietyGenerator';
 import CommunitiesViewer from '@components/CommunitiesViewer';
 
-import { GridAndDotBackgrounds } from '@components/ui/GridAndDotBackground';
+import GridBGWithFade from '@components/ui/GridAndDotBackground/GridBGWithFade.astro';
 
 import Globe from '@components/Globe.astro';
 import JoinTheWaitlist from './JoinTheWaitlist.svelte';
@@ -26,7 +26,7 @@ const attentionWords = ["Multi-Agent Systems", "Communities", "a Text Adventure"
   </script>
 
   <!-- HOOK ATTENTION GRABBER (HERO) -->
-  <GridAndDotBackgrounds>
+  <GridBGWithFade>
     <div class="flex flex-row items-center mb-10">
       <p class="absolute font-bold text-7xl text-center ml-[9rem] bg-gradient-to-r from-indigo-500 to-purple-500 bg-clip-text text-transparent inline">Simulate </p>
 
@@ -35,7 +35,7 @@ const attentionWords = ["Multi-Agent Systems", "Communities", "a Text Adventure"
         <FlipWords words={attentionWords} className='font-bold text-7xl text-center bg-gradient-to-r from-indigo-500 to-purple-500 bg-clip-text' client:only="react"/>
       </div>
     </div>
-  </GridAndDotBackgrounds>
+  </GridBGWithFade>
 
   <!-- BEGINNING OF PROMISE (THE THING) -->
   <p class="absolute inset-0 mt-[20rem] font-bold text-center text-2xl">Create communities of AI Agents right from your fingertips.</p>