feat: Nexus Ad

client/src/components/Core.tsx

@@ -1,13 +1,13 @@
 import type { ReactNode } from "react";
 import { useEffect, useState } from "react";
-import SageAd from "./SageAd";
+import PartnerAds from "./PartnerAds";
 
 interface CoreProps {
   children: ReactNode;
-  showSageAd?: boolean;
+  showAds?: boolean;
 }
 
-function Core({ children, showSageAd = false }: CoreProps) {
+function Core({ children, showAds = false }: CoreProps) {
   const [, setTheme] = useState<"light" | "dark" | null>(null);
 
   // Initialize theme on start
@@ -86,7 +86,7 @@ function Core({ children, showSageAd = false }: CoreProps) {
     <div className="relative flex min-h-full w-full flex-col">
       <div className="flex h-full w-full flex-1 items-stretch">{children}</div>
       <div className="w-full px-2.5 pb-[15px] pt-[30px] text-center font-[family-name:var(--font-family)] max-992:pt-5">
-        {showSageAd && <SageAd />}
+        {showAds && <PartnerAds />}
         <p className="my-[0.2rem] font-gilroy-bold text-muted max-768:hidden">
          {/*Designed by <a href="https://www.arimilli.io" target={"blank"}>Bharat Arimilli</a>. Thanks to{" "}
           <a href="https://garrettgu.com/" target={"blank"}>Garrett Gu</a>,{" "}

client/src/components/NexusAd.tsx

@@ -0,0 +1,19 @@
+export default function NexusAd() {
+  return (
+    <a
+      href="https://utdnexus.com/"
+      target="_blank"
+      rel="noreferrer"
+      className="inline-flex items-center gap-1 rounded-full bg-gradient-to-r from-[#0E1D3A] to-[#1A2C4F] px-[1.2rem] py-[0.6rem] text-[#9DBEF2] shadow-[0_2px_6px_rgb(0_0_0_/_0.2)] [transition:transform_cubic-bezier(0.4,0,0.2,1)_150ms,box-shadow_cubic-bezier(0.4,0,0.2,1)_150ms] [text-shadow:0_0_4px_rgb(0_0_0_/_0.6)] hover:scale-[1.01] hover:text-[#9DBEF2] hover:shadow-[0_2px_8px_rgb(0_0_0_/_0.2)]"
+    >
+      <img
+        src="/Nexus-Logo.svg"
+        alt=""
+        className="mr-[0.4rem] h-[1.4rem] drop-shadow-[0_0_4px_rgb(0_0_0_/_0.6)]"
+      />
+      <p className="mb-0 text-[0.9rem] leading-[1.2rem]">
+        Connect with classmates on <span className="font-gilroy-bold text-[#5484D4]">Nexus</span>
+      </p>
+    </a>
+  );
+}

client/src/components/PartnerAds.tsx

@@ -0,0 +1,11 @@
+import NexusAd from "./NexusAd";
+import SageAd from "./SageAd";
+
+export default function PartnerAds() {
+  return (
+    <div className="mb-[0.3rem] mt-4 flex flex-col items-center gap-3">
+      <SageAd />
+      <NexusAd />
+    </div>
+  );
+}

client/src/components/SageAd.tsx

@@ -1,20 +1,18 @@
 export default function SageAd() {
   return (
-    <div style={{ marginTop: "16px", textAlign: "center" }}>
-      <a
-        href="https://utdsage.com/"
-        target="_blank"
-        rel="noreferrer"
-        className="mb-[0.3rem] inline-flex items-center gap-1 rounded-full bg-gradient-to-r from-[rgba(7,67,37,1)] to-[rgba(22,50,36,1)] px-[1.2rem] py-[0.6rem] text-[#5AED86] shadow-[0_2px_6px_rgb(0_0_0_/_0.2)] [transition:transform_cubic-bezier(0.4,0,0.2,1)_150ms,box-shadow_cubic-bezier(0.4,0,0.2,1)_150ms] [text-shadow:0_0_4px_rgb(0_0_0_/_0.6)] hover:scale-[1.01] hover:text-[#5AED86] hover:shadow-[0_2px_8px_rgb(0_0_0_/_0.2)]"
-      >
-        <img
-          src="/SAGE-Logo.svg"
-          alt=""
-          className="mr-[0.4rem] h-[1.2rem] drop-shadow-[0_0_4px_rgb(0_0_0_/_0.6)]"
-        />
-        <p className="mb-0 text-[0.9rem] leading-[1.2rem]">Get AI-powered UTD advising with </p>
-        <img src="/SAGE-Textmark.svg" alt="Sage" className="h-[1.2rem]" />
-      </a>
-    </div>
+    <a
+      href="https://utdsage.com/"
+      target="_blank"
+      rel="noreferrer"
+      className="inline-flex items-center gap-1 rounded-full bg-gradient-to-r from-[rgba(7,67,37,1)] to-[rgba(22,50,36,1)] px-[1.2rem] py-[0.6rem] text-[#5AED86] shadow-[0_2px_6px_rgb(0_0_0_/_0.2)] [transition:transform_cubic-bezier(0.4,0,0.2,1)_150ms,box-shadow_cubic-bezier(0.4,0,0.2,1)_150ms] [text-shadow:0_0_4px_rgb(0_0_0_/_0.6)] hover:scale-[1.01] hover:text-[#5AED86] hover:shadow-[0_2px_8px_rgb(0_0_0_/_0.2)]"
+    >
+      <img
+        src="/SAGE-Logo.svg"
+        alt=""
+        className="mr-[0.4rem] h-[1.2rem] drop-shadow-[0_0_4px_rgb(0_0_0_/_0.6)]"
+      />
+      <p className="mb-0 text-[0.9rem] leading-[1.2rem]">Get AI-powered UTD advising with </p>
+      <img src="/SAGE-Textmark.svg" alt="Sage" className="h-[1.2rem]" />
+    </a>
   );
 }

client/src/components/Search.tsx

@@ -4,6 +4,7 @@ import React, { useEffect, useMemo, useState } from "react";
 import type { SearchQuery } from "../types";
 import { getSearchStringRank } from "../utils/index";
 import { useDb } from "../utils/useDb";
+import PartnerAds from "./PartnerAds";
 
 const autoCompleteStyle: React.CSSProperties = {
   width: "100%",
@@ -12,10 +13,10 @@ const autoCompleteStyle: React.CSSProperties = {
 interface SearchProps {
   onSubmit: (query: SearchQuery) => void;
   initialSearchValue?: string;
-  showSage?: boolean;
+  showAds?: boolean;
 }
 
-export default function Search({ onSubmit, initialSearchValue: initialSearch = "", showSage = true }: SearchProps) {
+export default function Search({ onSubmit, initialSearchValue: initialSearch = "", showAds = true }: SearchProps) {
   const hintContent = (
     <div className="w-[375px] font-gilroy-regular">
       <p>You can search for:</p>
@@ -88,24 +89,7 @@ export default function Search({ onSubmit, initialSearchValue: initialSearch = "
         </span>
       </Popover>
 
-      {showSage && (
-        <div style={{ marginTop: "16px", textAlign: "center" }}>
-          <a
-            href="https://utdsage.com/"
-            target="_blank"
-            rel="noreferrer"
-            className="mb-[0.3rem] inline-flex items-center gap-1 rounded-full bg-gradient-to-r from-[rgba(7,67,37,1)] to-[rgba(22,50,36,1)] px-[1.2rem] py-[0.6rem] text-[#5AED86] shadow-[0_2px_6px_rgb(0_0_0_/_0.2)] [transition:transform_cubic-bezier(0.4,0,0.2,1)_150ms,box-shadow_cubic-bezier(0.4,0,0.2,1)_150ms] [text-shadow:0_0_4px_rgb(0_0_0_/_0.6)] hover:scale-[1.01] hover:text-[#5AED86] hover:shadow-[0_2px_8px_rgb(0_0_0_/_0.2)]"
-          >
-            <img
-              src="/SAGE-Logo.svg"
-              alt=""
-              className="mr-[0.4rem] h-[1.2rem] drop-shadow-[0_0_4px_rgb(0_0_0_/_0.6)]"
-            />
-            <p className="mb-0 text-[0.9rem] leading-[1.2rem]">Get AI-powered UTD advising with </p>
-            <img src="/SAGE-Textmark.svg" alt="Sage" className="h-[1.2rem]" />
-          </a>
-        </div>
-      )}
+      {showAds && <PartnerAds />}
 
     </AntForm>
   );

client/src/components/SearchResults.tsx

@@ -459,7 +459,7 @@ const Results = React.memo(function Results({ search, sectionId, router }: Resul
     <div className="relative block">
       <Row>
         <Col lg={{ span: 8, offset: 8 }} sm={{ span: 18, offset: 3 }} xs={{ span: 20, offset: 2 }}>
-          <Search onSubmit={handleSubmit} initialSearchValue={search} showSage={true} />
+          <Search onSubmit={handleSubmit} initialSearchValue={search} showAds={true} />
         </Col>
       </Row>
 

client/src/components/SectionContent.tsx

@@ -186,42 +186,28 @@ const options: ChartOptions<"bar"> = {
               Professor Details
               {instructor?.url && <LinkOutlined style={{ fontSize: "1.2em" }} />}
               {hovered && (
-                <>
-                  <div
-                    style={{
-                      position: "absolute",
-                      display: "flex",
-                      alignItems: "flex-start",
-                      gap: "0.5rem",
-                      transform: "translate(-10%, -100%)",
-                      zIndex: 1000,
-                      padding: "0.75rem",
-                      borderRadius: "0.5rem",
-                      fontSize: "0.75rem",
-                      lineHeight: "1rem",
-                      color: "var(--text-color)",
-                      whiteSpace: "nowrap",
-                      backgroundColor: "var(--card-bg)",
-                      boxShadow:
-                        "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
-                    }}
-                  >
-                    See more on
-                    <Image src="/rmp-logo.png" alt="Rate My Professor Logo" width={88} height={18} style={{ height: "1.1rem" }} />
-                  </div>
-                  <div
-                    style={{
-                      position: "absolute",
-                      bottom: "-5rem",
-                      left: "50%",
-                      borderTopWidth: "8px",
-                      borderRightWidth: "8px",
-                      borderLeftWidth: "8px",
-                      width: "10",
-                      height: "10",
-                    }}
-                  />
-                </>
+                <div
+                  style={{
+                    position: "absolute",
+                    display: "flex",
+                    alignItems: "flex-start",
+                    gap: "0.5rem",
+                    transform: "translate(-10%, -100%)",
+                    zIndex: 1000,
+                    padding: "0.75rem",
+                    borderRadius: "0.5rem",
+                    fontSize: "0.75rem",
+                    lineHeight: "1rem",
+                    color: "var(--text-color)",
+                    whiteSpace: "nowrap",
+                    backgroundColor: "var(--card-bg)",
+                    boxShadow:
+                      "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
+                  }}
+                >
+                  See more on
+                  <Image src="/rmp-logo.png" alt="Rate My Professor Logo" width={88} height={18} style={{ height: "1.1rem" }} />
+                </div>
               )}
             </a>
             {!instructor && (

client/src/pages/index.tsx

@@ -82,7 +82,7 @@ export default function Home() {
   }
 
   return (
-    <Core showSageAd={true}>
+    <Core showAds={true}>
       <div className="relative flex w-full items-center">
         <button
           onClick={toggleTheme}
@@ -118,7 +118,7 @@ export default function Home() {
                 See how students did in any given class. And it&apos;s <strong>free, forever.</strong>
               </p>
             </FadeIn>
-            <Search onSubmit={handleSubmit} showSage={false} />
+            <Search onSubmit={handleSubmit} showAds={false} />
           </Col>
         </div>
       </div>

client/src/pages/results.tsx

@@ -16,7 +16,7 @@ export default function ResultsPage() {
   // https://github.com/zeit/next.js/issues/8259
   if (router.asPath !== router.route) {
     return (
-      <Core showSageAd={false}>
+      <Core showAds={false}>
         <div className="flex w-full flex-col">
           <Header />
           <SearchResults search={search} sectionId={parseInt(sectionId)} router={router} />