register functions and restyle

app/page.module.css

@@ -3,54 +3,13 @@
 .main {
   display: flex;
   flex-direction: column;
+  height: 100vh;
   justify-content: space-between;
-}
-
-.description {
-  display: inherit;
-  justify-content: inherit;
-  align-items: inherit;
-  font-size: 0.85rem;
-  max-width: var(--max-width);
-  width: 100%;
-  z-index: 2;
-  font-family: var(--font-mono);
-}
-
-.description a {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.description p {
-  position: relative;
-  margin: 0;
-  padding: 1rem;
-  background-color: rgba(var(--callout-rgb), 0.5);
-  border: 1px solid rgba(var(--callout-border-rgb), 0.3);
-  border-radius: var(--border-radius);
-}
-
-.code {
-  font-weight: 700;
-  font-family: var(--font-mono);
-}
-
-.grid {
-  display: grid;
-  grid-template-columns: repeat(4, minmax(25%, auto));
-  max-width: 100%;
-  width: var(--max-width);
-}
-
-.card {
-  padding: 1rem 1.2rem;
-  border-radius: var(--border-radius);
-  background: rgba(var(--card-rgb), 0);
-  border: 1px solid rgba(var(--card-border-rgb), 0);
-  transition: background 200ms, border 200ms;
+  padding: 2rem;
+  background-image: url('https://512pixels.net/downloads/macos-wallpapers-thumbs/10-2--thumb.png'); /* URL of the wallpaper */
+  background-size: cover; /* Ensure it covers the entire area */
+  background-position: center; /* Center the image in the element */
+  background-repeat: no-repeat; /* Don't repeat the image */
 }
 
 .card span {
@@ -259,18 +218,26 @@
 .button {
   padding: 0.75rem 1.5rem; /* Adjust padding to increase the button's size */
   margin-top: 1rem; /* Space above the button */
-  border: none; /* No border for a button */
-  border-radius: 25px; /* Rounded corners for a pill shape */
+  border: 1px solid #707070; /* Darker border for depth */
+  border-radius: 5px; /* Rounded corners */
   font-size: 1rem; /* Font size */
-  font-weight: bold; /* Make the text a bit bolder */
-  color: white; /* Text color */
-  background-image: linear-gradient(to right, #000, #111827); /* Gradient background */
-  cursor: pointer; /* Change cursor to indicate it's clickable */
-  transition: transform 0.2s, background-color 0.3s; /* Smooth transitions for interactions */
-  text-transform: uppercase; /* Optional: uppercase text */
-  letter-spacing: 0.05em; /* Spacing between letters */
-  box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08); /* Subtle shadow for depth */
-  
+  font-weight: bold; /* Bold text */
+  color: #000; /* Black text for contrast */
+  background: linear-gradient(180deg, #a8a8a8 0%, #8b8b8b 50%, #a8a8a8 100%); /* Gradient to simulate brushed metal */
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25); /* Shadow for a 3D effect */
+  text-align: center; /* Center the text */
+  cursor: pointer; /* Cursor change on hover */
+  transition: background-color 0.3s, box-shadow 0.2s; /* Smooth transitions for interactions */
+}
+
+.button:hover {
+  background: linear-gradient(180deg, #b0b0b0 0%, #9d9d9d 50%, #b0b0b0 100%); /* Lighter gradient on hover */
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); /* Less pronounced shadow on hover */
+}
+
+.button:active {
+  background: linear-gradient(180deg, #8b8b8b 0%, #a8a8a8 50%, #8b8b8b 100%); /* Inverted gradient for pressed effect */
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); /* Inner shadow for a pressed effect */
 }
 
 .icon {
@@ -307,10 +274,8 @@
   border: 8px solid transparent;
   border-radius: 10px;
   padding: 25px;
-  border-image: url('data:image/svg+xml;base64,CjxzdmcgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJyB3aWR0aD0nODAnIGhlaWdodD0nMjAnIHZpZXdCb3g9JzAgMCA4MCAyMCc+CiAgPHBhdGggZD0nTSA1LDEwIGE1LDEwIDAgMSwwIDEwLDAgYTUsMTAgMCAxLDAgLTEwLDAnIGZpbGw9J3JlZCcgLz4KICA8cGF0aCBkPSdNIDI1LDEwIGE1LDEwIDAgMSwwIDEwLDAgYTUsMTAgMCAxLDAgLTEwLDAnIGZpbGw9J2dyZWVuJyAvPgogIDxwYXRoIGQ9J00gNDUsMTAgYTUsMTAgMCAxLDAgMTAsMCBhNSwxMCAwIDEsMCAtMTAsMCcgZmlsbD0nYmx1ZScgLz4KICA8cGF0aCBkPSdNIDY1LDEwIGE1LDEwIDAgMSwwIDEwLDAgYTUsMTAgMCAxLDAgLTEwLDAnIGZpbGw9J3llbGxvdycgLz4KPC9zdmc+Cg==') 5 repeat;
 }
 
-
 .message {
   background-color: #f9f9f9;
   border-radius: 15px;

pages/api/functions/embed.ts

@@ -1,5 +1,6 @@
-import { createSearchApi } from '../../../app/tools/search';
+import { createSearchApi } from '@app/tools/search';
 import { createOddsApi } from '@/app/tools/odds';
+import { createSportsResultsApi } from '@/app/tools/scores';
 import { handleContentText } from './utils';
 import { similaritySearch } from './vector-store';
 
@@ -10,6 +11,8 @@ const [serpApi] =
     apiKey: process.env.SERP_API_KEY || "",
 });
 
+const [sportsScoresApi] = createSportsResultsApi({ apiKey: process.env.SERP_API_KEY || "",});
+
 const [oddsApi] = createOddsApi({ apiKey: process.env.ODDS_API_KEY || "" });
 type FunctionOutput = any;
 type FunctionInput = any;
@@ -40,3 +43,9 @@ export const serp: FunctionOutput = async ({ input }: FunctionInput) => {
   return serpApiResults;
 }
 
+
+export const serp: FunctionOutput = async ({ input }: FunctionInput) => {
+  const content: string = await serpApi({input})
+  const serpApiResults = await similaritySearch(input, content);
+  return serpApiResults;
+}

pages/api/functions/index.ts

@@ -1,5 +1,5 @@
 import { NextApiRequest, NextApiResponse } from 'next';
-import { odds, serp, surfer } from './embed';
+import { odds, serp, surfer, sports } from './embed';
 
 export const config = {
     api: {
@@ -12,9 +12,10 @@ export const config = {
 type FunctionHandler = any;
 
 const handlers: FunctionHandler = {
-  'searchApi': serp,
+  'search': serp,
   'surfer': surfer,
-  'oddsApi': odds
+  'sports_odds': odds,
+  'sports_results': sports
 };
 
 export default async function handler(req: NextApiRequest, res: NextApiResponse) {