try now

AmeerArsala · Jun 5, 2024 · ba75d27 · ba75d27
1 parent f7ea93e
commit ba75d27
Show file tree

Hide file tree

Showing 7 changed files with 19 additions and 15 deletions.
diff --git a/frontend/src/components/ui/GridAndDotBackground/GridBGWithFade.astro 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
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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>