Clean up: Port Note and upgrade styles.

Author: nikoshell

src/components/note/index.tsx

@@ -0,0 +1,56 @@
+---
+
+interface Props {
+  type: "warning" | "info" | "success" | "error";
+  title?: string;
+  icon?: string;
+}
+
+const { type="info", title, icon } = Astro.props;
+
+// Define styles for different note types
+const styles = {
+  warning: {
+    bg: "bg-[rgb(255,252,204)]",
+    text: "text-[rgb(153,101,21)]",
+    border: "border-[rgb(255,204,0)]",
+    defaultIcon: "fas fa-exclamation-triangle fa-2x",
+    defaultTitle: "Warning"
+  },
+  info: {
+    bg: "bg-[rgb(229,246,253)]",
+    text: "text-[rgb(27,95,133)]",
+    border: "border-[rgb(83,177,234)]",
+    defaultIcon: "fas fa-info-circle fa-2x",
+    defaultTitle: "Info"
+  },
+  success: {
+    bg: "bg-[rgb(237,247,237)]",
+    text: "text-[rgb(48,112,60)]",
+    border: "border-[rgb(98,187,112)]",
+    defaultIcon: "fas fa-check-circle fa-2x",
+    defaultTitle: "Success"
+  },
+  error: {
+    bg: "bg-[rgb(253,237,237)]",
+    text: "text-[rgb(156,38,38)]",
+    border: "border-[rgb(244,99,99)]",
+    defaultIcon: "fas fa-times-circle fa-2x",
+    defaultTitle: "Error"
+  }
+};
+
+const currentStyle = styles[type];
+const noteIcon = icon || currentStyle.defaultIcon;
+const noteTitle = title || currentStyle.defaultTitle;
+---
+
+<p class={`${currentStyle.bg} ${currentStyle.text} border-l-4 ${currentStyle.border} p-4 flex items-center space-x-2`}>
+  { noteIcon &&
+  <i class={noteIcon}></i>
+  }
+  <span>
+    {title && <strong>{noteTitle}:</strong>}
+    <slot />
+  </span>
+</p>

src/components/note/note.tsx

@@ -9,7 +9,7 @@ subtitle:
 
 This page lists all sponsor deliverables and deadlines to help you plan and make the most of your sponsorship.
 
-<Note>⚠️ All deadlines below are **hard deadlines**.
+<Note type="warning">All deadlines below are **hard deadlines**.
 Unfortunately, we won’t be able to accept late submissions or offer refunds if anything is missed.</Note>
 
 
@@ -135,7 +135,7 @@ However, we strongly recommend keeping booths staffed throughout the opening hou
 
 On top of what is already included in your booth as part of the package, you can order add-ons, such as TV sets and furniture for your booth.
 
-<Note>ℹ️ Packages of **Platinum and above** already include **a TV and stand** as part of the booth.
+<Note>Packages of **Platinum and above** already include **a TV and stand** as part of the booth.
 Gold and Silver sponsors can order a TV and stand separately, if needed</Note>
 
 - **⏲️ Deadline** for booth customisation order: **Sunday, 8 June 2025**.
@@ -364,7 +364,7 @@ Creative Commons license to avoid copyright issues or strikes on our YouTube cha
 You can submit different video files or reuse the same video in both. The number of video ads you submit is up to you.
 We recommend **2 to 10** files. Higher sponsorship levels will receive more ad share.
 
-<Note> **Important**: To avoid attachment size limits, please upload your videos to a file-sharing service
+<Note type="warning"> **Important**: To avoid attachment size limits, please upload your videos to a file-sharing service
 (e.g. Dropbox, Google Drive, WeTransfer, OneDrive) and send us the download link.</Note>
 
 - **⏲️ Deadline** for submitting video ad links: **Monday, 23 June 2025**

src/components/ui/Note.astro

@@ -1,6 +1,7 @@
 ---
 import Layout from "@layouts/Layout.astro";
 import Section from "@ui/Section.astro";
+import Note from "@ui/Note.astro";
 
 export interface Props {
   title?: string;
@@ -16,10 +17,7 @@ const { title, description } = Astro.props;
   </Fragment>
   <Section>
 
-    <p class="bg-[rgb(255,252,204)] text-[rgb(153,101,21)] border-l-4 border-[rgb(255,204,0)] p-4 text-sm flex items-center space-x-2">
-      <i class="fas fa-exclamation-triangle"></i>
-      <span><strong>Important:</strong> This is an early version of the schedule and may still change. If you're planning travel around specific sessions, please keep that in mind.</span>
-    </p>
+    <Note type="warning">This is an early version of the schedule and may still change. If you're planning travel around specific sessions, please keep that in mind.</Note>
 
     <div class="layout-wrapper2">
       <slot />

src/content/pages/sponsorship/information.mdx

@@ -7,7 +7,7 @@ import Map from "@components/Map.astro";
 import YouTube from "@ui/YouTube.astro";
 import HighlightCard from "@components/highlight-list/highlight-card.astro";
 import HighlightItem from "@components/highlight-list/highlight-item.astro";
-import { Note } from "@components/note";
+import Note from "@ui/Note.astro";
 import SponsorTiers from "@components/sponsor-tiers/sponsor-tiers.astro";
 import Accordion from "@components/accordion/accordion.astro";
 import Button from "@ui/Button.astro";