add telemetry and grafana links on my work page

.env.example

@@ -18,4 +18,7 @@ SPONSORSHIP_PICTURE_BUCKET=exampleKey
 WEBHOOK_SECRET=exampleKey
 NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=exampleKey
 NEXT_PUBLIC_SUPABASE_ANON_KEY=exampleKey
-NEXT_PUBLIC_SUPABASE_URL="https://bug-free-orbit-rq5vxrpqgv6357w9.github.dev/"
+NEXT_PUBLIC_SUPABASE_URL="https://bug-free-orbit-rq5vxrpqgv6357w9.github.dev/"
+NEXT_PUBLIC_TELEMETRY_SITE_URL=telemetrySiteUrl
+NEXT_PUBLIC_GRAFANA_URL=grafanaSiteUrl
+

src/app/_components/OurWork/TelemetryLinks.tsx

@@ -0,0 +1,52 @@
+import { memo } from "react";
+
+import styles from "@/app/our-work/index.module.scss";
+
+interface TelemetryLinksProps {
+  grafanaUrl: string;
+  telemetrySiteUrl: string;
+}
+
+const TelemetryLinks = ({
+  grafanaUrl,
+  telemetrySiteUrl,
+}: TelemetryLinksProps) => {
+  return (
+    <section
+      className={`${styles.telemetrySection} ${styles.telemetryFeaturedSection}`}
+    >
+      <div className={styles.telemetryContent}>
+        <div className={styles.telemetryIntro}>
+          <span className={styles.telemetryLiveBadge}>Live</span>
+          <h2 className={styles.telemetryHeading}>Follow Our Race Data</h2>
+        </div>
+        <p className={styles.telemetryDescription}>
+          View real-time telemetry insights and full dashboards from our latest
+          systems.
+        </p>
+      </div>
+
+      <div className={styles.telemetryActions}>
+        <a
+          className={styles.telemetryPrimaryButton}
+          href={telemetrySiteUrl}
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          Open Telemetry Site
+        </a>
+        {/* add this when we have the Grafana link */}
+        {/* <a
+          className={styles.telemetrySecondaryButton}
+          href={grafanaUrl}
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          Open Grafana
+        </a> */}
+      </div>
+    </section>
+  );
+};
+
+export default memo(TelemetryLinks);

src/app/our-work/index.module.scss

@@ -110,6 +110,118 @@
   margin-left: 2rem;
 }
 
+.telemetrySection {
+  margin: 2rem 2rem 3rem;
+  padding: 2rem;
+  border: 1px solid rgba(255, 255, 255, 0.14);
+  border-radius: 16px;
+  background: linear-gradient(
+    135deg,
+    rgba(156, 5, 52, 0.3) 0%,
+    rgba(255, 255, 255, 0.04) 100%
+  );
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1.5rem;
+}
+
+.telemetryContent {
+  max-width: 640px;
+}
+
+.telemetryHeading {
+  margin: 0;
+  font-size: 2rem;
+  font-weight: 700;
+}
+
+.telemetryDescription {
+  margin: 0.6rem 0 0;
+  font-size: 1.05rem;
+  line-height: 1.5;
+  color: rgba(255, 255, 255, 0.9);
+}
+
+.telemetryFeaturedSection {
+  border-color: rgba(156, 5, 52, 0.28);
+  background: rgba(255, 255, 255, 0.03);
+}
+
+.telemetryIntro {
+  display: flex;
+  align-items: center;
+  gap: 0.9rem;
+  margin-bottom: 0.2rem;
+}
+
+.telemetryLiveBadge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.55rem 0.9rem;
+  border-radius: 999px;
+  background-color: rgba(156, 5, 52, 0.95);
+  border: 1px solid rgba(255, 255, 255, 0.24);
+  color: #fff;
+  font-size: 0.95rem;
+  font-weight: 800;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  line-height: 1;
+}
+
+.telemetryActions {
+  display: flex;
+  align-items: center;
+  gap: 0.85rem;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+}
+
+.telemetryPrimaryButton,
+.telemetrySecondaryButton {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 48px;
+  padding: 0.75rem 1.25rem;
+  border-radius: 10px;
+  font-weight: 600;
+  font-size: 0.95rem;
+  text-decoration: none;
+  transition:
+    transform 0.2s ease,
+    box-shadow 0.2s ease,
+    background-color 0.2s ease,
+    border-color 0.2s ease;
+
+  &:hover {
+    transform: translateY(-1px);
+  }
+}
+
+.telemetryPrimaryButton {
+  background-color: var(--primary-red);
+  color: #fff;
+  border: 1px solid var(--primary-red);
+
+  &:hover {
+    box-shadow: 0 8px 20px rgba(156, 5, 52, 0.35);
+  }
+}
+
+.telemetrySecondaryButton {
+  background-color: transparent;
+  color: #fff;
+  border: 1px solid rgba(255, 255, 255, 0.32);
+
+  &:hover {
+    background-color: rgba(255, 255, 255, 0.08);
+    border-color: rgba(255, 255, 255, 0.5);
+  }
+}
+
 .yearSection {
   position: relative;
 }
@@ -255,6 +367,35 @@
     margin-left: 0;
   }
 
+  .telemetrySection {
+    margin: 1.5rem 1rem 2.5rem;
+    padding: 1.5rem;
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .telemetryHeading {
+    font-size: 1.6rem;
+  }
+
+  .telemetryDescription {
+    font-size: 0.98rem;
+  }
+
+  .telemetryIntro {
+    gap: 0.7rem;
+  }
+
+  .telemetryLiveBadge {
+    padding: 0.5rem 0.8rem;
+    font-size: 0.85rem;
+  }
+
+  .telemetryActions {
+    width: 100%;
+    justify-content: flex-start;
+  }
+
   .yearSection {
     margin-bottom: 3rem;
     padding: 0 1rem;
@@ -359,6 +500,37 @@
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
   }
 
+  .telemetrySection {
+    margin: 1.25rem 0.5rem 2rem;
+    padding: 1rem;
+    border-radius: 12px;
+  }
+
+  .telemetryHeading {
+    font-size: 1.25rem;
+  }
+
+  .telemetryDescription {
+    font-size: 0.92rem;
+  }
+
+  .telemetryIntro {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 0.55rem;
+  }
+
+  .telemetryLiveBadge {
+    font-size: 0.8rem;
+    padding: 0.45rem 0.7rem;
+  }
+
+  .telemetryPrimaryButton,
+  .telemetrySecondaryButton {
+    width: 100%;
+    font-size: 0.9rem;
+  }
+
   .yearContainer {
     height: auto;
     border-radius: 18px;

src/app/our-work/page.tsx

@@ -8,10 +8,15 @@ import Navbar from "@/app/_components/Navbar";
 import Timeline from "@/app/_components/OurWork/Timeline";
 import Pagebullets from "@/app/_components/Pagebullets";
 import styles from "@/app/our-work/index.module.scss";
+import { env } from "@/env";
 import { trpc } from "@/trpc/react";
 
+import TelemetryLinks from "../_components/OurWork/TelemetryLinks";
 import { useIntersectionObserver } from "../_hooks/useIntersectionObserver";
 
+const TELEMETRY_SITE_URL = env.NEXT_PUBLIC_TELEMETRY_SITE_URL;
+const GRAFANA_URL = env.NEXT_PUBLIC_GRAFANA_URL;
+
 const OurWorkTimelinePage = () => {
   const { data: timelineData, isFetching } = trpc.fe.getOurWork.useQuery();
   const [currentElement, setCurrentElement] = useState<string>(
@@ -50,6 +55,10 @@ const OurWorkTimelinePage = () => {
             <h1 className={styles.timelineHeading}>
               What We&apos;re Working On...
             </h1>
+            <TelemetryLinks
+              grafanaUrl={GRAFANA_URL}
+              telemetrySiteUrl={TELEMETRY_SITE_URL}
+            />
             <Timeline data={timelineData ?? []} />
           </div>
         </div>

src/env.js

@@ -10,8 +10,10 @@ export const env = createEnv({
    */
   client: {
     NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY: z.string(),
+    NEXT_PUBLIC_GRAFANA_URL: z.string().url(),
     NEXT_PUBLIC_SUPABASE_ANON_KEY: z.string(),
     NEXT_PUBLIC_SUPABASE_URL: z.string().url(),
+    NEXT_PUBLIC_TELEMETRY_SITE_URL: z.string().url(),
     // NEXT_PUBLIC_CLIENTVAR: z.string(),
   },
   /**
@@ -29,8 +31,10 @@ export const env = createEnv({
     DATABASE_URL: process.env.DATABASE_URL,
     NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY:
       process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY,
+    NEXT_PUBLIC_GRAFANA_URL: process.env.NEXT_PUBLIC_GRAFANA_URL,
     NEXT_PUBLIC_SUPABASE_ANON_KEY: process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY,
     NEXT_PUBLIC_SUPABASE_URL: process.env.NEXT_PUBLIC_SUPABASE_URL,
+    NEXT_PUBLIC_TELEMETRY_SITE_URL: process.env.NEXT_PUBLIC_TELEMETRY_SITE_URL,
     NODE_ENV: process.env.NODE_ENV,
     PROFILE_PICTURE_BUCKET: process.env.PROFILE_PICTURE_BUCKET,
     SPONSORSHIP_PICTURE_BUCKET: process.env.SPONSORSHIP_PICTURE_BUCKET,