Changed some metadata

app/layout.tsx

@@ -5,7 +5,16 @@ import "@mantine/core/styles.css"
 
 export const metadata: Metadata = {
   title: "PokeData",
-  description: "Pokemon Go Data",
+  description: "Pokemon Go Database",
+  openGraph: {
+    title: "PokeData",
+    description: "Pokemon Go Database",
+    images: "/images/pokemon-go-logo.png",
+    url: "https://pokedata-rose.vercel.app/",
+    siteName: "PokeData",
+    locale: "en_US",
+    type: "website",
+  },
 }
 
 export default function RootLayout({ children }: { children: any }) {

app/page.tsx

@@ -1,8 +1,6 @@
-
-import { Container, Flex, Title } from "@mantine/core"
+import { Container, Flex, Title, Text } from "@mantine/core"
 import { SearchBar } from "@/components/SearchBar"
 import { NavBar } from "@/components/NavBar"
-import { EventList } from "@/components/EventList"
 
 export default function Home() {
   return (
@@ -14,7 +12,15 @@ export default function Home() {
         align="center"
         direction="column"
       >
-        <Title order={1}>PokeData</Title>
+        <Text
+          size="calc(5rem * var(--mantine-scale))"
+          fw={900}
+          variant="gradient"
+          gradient={{ from: "blue", to: "green", deg: 90 }}
+        >
+          PokeData
+        </Text>
+
         <SearchBar />
       </Flex>
     </Container>

components/TeamRocketGrunts.tsx

@@ -20,6 +20,16 @@ export const TeamRocketGrunts = () => {
   const { data, isLoading } = useGrunts()
   const router = useRouter()
 
+  // Get an array of color keys
+  const colorKeys = Object.keys(colors)
+
+  // Generate a random index within the range of colorKeys
+  const randomIndex = Math.floor(Math.random() * colorKeys.length)
+
+  // Use the random key to access a color from the dictionary
+  const randomColorKey = colorKeys[randomIndex]
+  const randomColor = colors[randomColorKey]
+
   const renderGrunts = (grunt: {
     name: string
     team: any[]
@@ -29,10 +39,12 @@ export const TeamRocketGrunts = () => {
     <Grid.Col key={grunt.name} span={{ base: 12, md: 6, xl: 4 }}>
       <Card
         bg={darken(
-          grunt.type ? colors[grunt.type.toLowerCase()] : "yellow",
+          grunt.type ? colors[grunt.type.toLowerCase()] : randomColor,
           0.7
         )}
+        radius="md"
         withBorder
+        h={750}
       >
         <Text>
           {grunt.name
@@ -63,9 +75,7 @@ export const TeamRocketGrunts = () => {
                   <Stack key={pokemon.name}>
                     <Image
                       src={pokemon.sprite}
-                      // h={200}
                       h={100}
-                      // w="auto"
                       fit="contain"
                       alt="Pokemon"
                       fallbackSrc="/images/default-pokemon.jpg"