Add countdown and rename title

Adds a countdown timer to each conference card. Renames the page title to "AI Conference Deadlines".

src/components/ConferenceCard.tsx

@@ -1,6 +1,7 @@
-import { CalendarDays, Globe, Tag, Clock } from "lucide-react";
+
+import { CalendarDays, Globe, Tag, Clock, AlarmClock } from "lucide-react";
 import { Conference } from "@/types/conference";
-import { formatDistanceToNow, parseISO } from "date-fns";
+import { formatDistanceToNow, parseISO, isValid } from "date-fns";
 
 const ConferenceCard = ({
   title,
@@ -15,8 +16,17 @@ const ConferenceCard = ({
   abstract_deadline,
 }: Conference) => {
   const deadlineDate = deadline && deadline !== 'TBD' ? parseISO(deadline) : null;
-  const daysLeft = deadlineDate ? formatDistanceToNow(deadlineDate, { addSuffix: true }) : 'TBD';
+  const daysLeft = deadlineDate && isValid(deadlineDate) ? formatDistanceToNow(deadlineDate, { addSuffix: true }) : 'TBD';
   
+  // Determine countdown color based on days remaining
+  const getCountdownColor = () => {
+    if (!deadlineDate || !isValid(deadlineDate)) return "text-neutral-600";
+    const daysRemaining = Math.ceil((deadlineDate.getTime() - new Date().getTime()) / (1000 * 60 * 60 * 24));
+    if (daysRemaining <= 7) return "text-red-600";
+    if (daysRemaining <= 30) return "text-orange-600";
+    return "text-green-600";
+  };
+
   return (
     <div className="conference-card">
       <div className="flex justify-between items-start mb-4">
@@ -56,6 +66,12 @@ const ConferenceCard = ({
             </span>
           )}
         </div>
+        <div className="flex items-center">
+          <AlarmClock className={`h-4 w-4 mr-2 ${getCountdownColor()}`} />
+          <span className={`text-sm font-medium ${getCountdownColor()}`}>
+            {daysLeft}
+          </span>
+        </div>
       </div>
 
       {Array.isArray(tags) && tags.length > 0 && (

src/components/Header.tsx

@@ -1,10 +1,7 @@
-import { Search } from "lucide-react";
 
-interface HeaderProps {
-  onSearch: (query: string) => void;
-}
+import { Search } from "lucide-react";
 
-const Header = ({ onSearch }: HeaderProps) => {
+const Header = () => {
   return (
     <header className="w-full py-6 px-4 sm:px-6 lg:px-8 bg-white shadow-sm animate-fade-in">
       <div className="max-w-7xl mx-auto">
@@ -16,13 +13,12 @@ const Header = ({ onSearch }: HeaderProps) => {
               className="h-8 w-auto"
             />
             <div className="h-6 w-px bg-neutral-200 mx-2" />
-            <h1 className="text-2xl font-bold text-neutral-dark">AI Deadlines</h1>
+            <h1 className="text-2xl font-bold text-neutral-dark">AI Conference Deadlines</h1>
           </div>
           <div className="relative w-full max-w-md ml-4">
             <input
               type="text"
               placeholder="Search conferences..."
-              onChange={(e) => onSearch(e.target.value)}
               className="w-full pl-10 pr-4 py-2 border border-neutral-200 rounded-lg focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary bg-neutral-50"
             />
             <Search className="absolute left-3 top-2.5 h-5 w-5 text-neutral" />