Create landing page

Create a landing page for AI deadlines, mimicking the design of Hugging Face's daily papers.

src/components/ConferenceCard.tsx

@@ -0,0 +1,55 @@
+
+import { CalendarDays, Globe, Tag } from "lucide-react";
+
+interface ConferenceCardProps {
+  name: string;
+  date: string;
+  location: string;
+  deadline: string;
+  daysLeft: number;
+  tags: string[];
+}
+
+const ConferenceCard = ({
+  name,
+  date,
+  location,
+  deadline,
+  daysLeft,
+  tags,
+}: ConferenceCardProps) => {
+  return (
+    <div className="conference-card animate-fade-in">
+      <div className="flex justify-between items-start mb-4">
+        <h3 className="text-xl font-semibold">{name}</h3>
+        <div className="countdown">{daysLeft}d</div>
+      </div>
+      
+      <div className="space-y-2 mb-4">
+        <div className="flex items-center text-neutral">
+          <CalendarDays className="h-4 w-4 mr-2" />
+          <span className="text-sm">{date}</span>
+        </div>
+        <div className="flex items-center text-neutral">
+          <Globe className="h-4 w-4 mr-2" />
+          <span className="text-sm">{location}</span>
+        </div>
+      </div>
+
+      <div className="flex flex-wrap gap-2 mb-4">
+        {tags.map((tag) => (
+          <span key={tag} className="tag">
+            <Tag className="h-3 w-3 mr-1" />
+            {tag}
+          </span>
+        ))}
+      </div>
+
+      <div className="text-sm text-neutral-dark">
+        Deadline: {deadline}
+      </div>
+    </div>
+  );
+};
+
+export default ConferenceCard;

src/components/FilterBar.tsx

@@ -0,0 +1,34 @@
+
+const filters = [
+  "All",
+  "ML",
+  "CV",
+  "NLP",
+  "RO",
+  "SP",
+  "DM",
+  "AP",
+  "KR",
+  "HCI",
+];
+
+const FilterBar = () => {
+  return (
+    <div className="w-full py-4 overflow-x-auto bg-white border-b border-neutral-light animate-fade-in">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="flex space-x-4">
+          {filters.map((filter) => (
+            <button
+              key={filter}
+              className="px-4 py-2 text-sm font-medium rounded-lg hover:bg-primary/10 hover:text-primary transition-colors"
+            >
+              {filter}
+            </button>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default FilterBar;

src/components/Header.tsx

@@ -0,0 +1,24 @@
+
+import { Search } from "lucide-react";
+
+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">
+        <div className="flex items-center justify-between">
+          <h1 className="text-2xl font-bold text-primary">AI Deadlines</h1>
+          <div className="relative w-full max-w-md ml-4">
+            <input
+              type="text"
+              placeholder="Search conferences..."
+              className="w-full pl-10 pr-4 py-2 border border-neutral-light rounded-lg focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary"
+            />
+            <Search className="absolute left-3 top-2.5 h-5 w-5 text-neutral" />
+          </div>
+        </div>
+      </div>
+    </header>
+  );
+};
+
+export default Header;

src/index.css

@@ -1,3 +1,4 @@
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -6,96 +7,39 @@
   :root {
     --background: 0 0% 100%;
     --foreground: 222.2 84% 4.9%;
-
     --card: 0 0% 100%;
     --card-foreground: 222.2 84% 4.9%;
-
     --popover: 0 0% 100%;
     --popover-foreground: 222.2 84% 4.9%;
-
     --primary: 222.2 47.4% 11.2%;
     --primary-foreground: 210 40% 98%;
-
     --secondary: 210 40% 96.1%;
     --secondary-foreground: 222.2 47.4% 11.2%;
-
     --muted: 210 40% 96.1%;
     --muted-foreground: 215.4 16.3% 46.9%;
-
     --accent: 210 40% 96.1%;
     --accent-foreground: 222.2 47.4% 11.2%;
-
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 210 40% 98%;
-
     --border: 214.3 31.8% 91.4%;
     --input: 214.3 31.8% 91.4%;
     --ring: 222.2 84% 4.9%;
-
     --radius: 0.5rem;
-
-    --sidebar-background: 0 0% 98%;
-
-    --sidebar-foreground: 240 5.3% 26.1%;
-
-    --sidebar-primary: 240 5.9% 10%;
-
-    --sidebar-primary-foreground: 0 0% 98%;
-
-    --sidebar-accent: 240 4.8% 95.9%;
-
-    --sidebar-accent-foreground: 240 5.9% 10%;
-
-    --sidebar-border: 220 13% 91%;
-
-    --sidebar-ring: 217.2 91.2% 59.8%;
   }
 
-  .dark {
-    --background: 222.2 84% 4.9%;
-    --foreground: 210 40% 98%;
-
-    --card: 222.2 84% 4.9%;
-    --card-foreground: 210 40% 98%;
-
-    --popover: 222.2 84% 4.9%;
-    --popover-foreground: 210 40% 98%;
-
-    --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 11.2%;
-
-    --secondary: 217.2 32.6% 17.5%;
-    --secondary-foreground: 210 40% 98%;
-
-    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 65.1%;
-
-    --accent: 217.2 32.6% 17.5%;
-    --accent-foreground: 210 40% 98%;
-
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 210 40% 98%;
-
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
-    --ring: 212.7 26.8% 83.9%;
-    --sidebar-background: 240 5.9% 10%;
-    --sidebar-foreground: 240 4.8% 95.9%;
-    --sidebar-primary: 224.3 76.3% 48%;
-    --sidebar-primary-foreground: 0 0% 100%;
-    --sidebar-accent: 240 3.7% 15.9%;
-    --sidebar-accent-foreground: 240 4.8% 95.9%;
-    --sidebar-border: 240 3.7% 15.9%;
-    --sidebar-ring: 217.2 91.2% 59.8%;
+  body {
+    @apply bg-neutral-light text-neutral-dark antialiased;
   }
 }
 
-@layer base {
-  * {
-    @apply border-border;
-  }
+.conference-card {
+  @apply bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow duration-300 p-6;
+}
 
-  body {
-    @apply bg-background text-foreground;
-  }
-}
+.tag {
+  @apply inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-primary/10 text-primary;
+}
+
+.countdown {
+  @apply text-2xl font-semibold text-primary;
+}

src/pages/Index.tsx

@@ -1,12 +1,47 @@
-// Update this page (the content is just a fallback if you fail to update the page)
+
+import Header from "@/components/Header";
+import FilterBar from "@/components/FilterBar";
+import ConferenceCard from "@/components/ConferenceCard";
+
+const conferences = [
+  {
+    name: "ICLR 2024",
+    date: "May 7-11, 2024",
+    location: "Vienna, Austria",
+    deadline: "Sep 28, 2023, 8:00 PM UTC",
+    daysLeft: 45,
+    tags: ["ML", "DL", "AI"],
+  },
+  {
+    name: "CVPR 2024",
+    date: "June 17-21, 2024",
+    location: "Seattle, USA",
+    deadline: "Nov 10, 2023, 11:59 PM UTC",
+    daysLeft: 60,
+    tags: ["CV", "ML", "AI"],
+  },
+  {
+    name: "NeurIPS 2024",
+    date: "December 8-14, 2024",
+    location: "Vancouver, Canada",
+    deadline: "May 17, 2024, 11:59 PM UTC",
+    daysLeft: 120,
+    tags: ["ML", "AI", "DL"],
+  },
+];
 
 const Index = () => {
   return (
-    <div className="min-h-screen flex items-center justify-center bg-gray-100">
-      <div className="text-center">
-        <h1 className="text-4xl font-bold mb-4">Welcome to Your Blank App</h1>
-        <p className="text-xl text-gray-600">Start building your amazing project here!</p>
-      </div>
+    <div className="min-h-screen bg-neutral-light">
+      <Header />
+      <FilterBar />
+      <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          {conferences.map((conference) => (
+            <ConferenceCard key={conference.name} {...conference} />
+          ))}
+        </div>
+      </main>
     </div>
   );
 };

tailwind.config.ts

@@ -1,96 +1,56 @@
+
 import type { Config } from "tailwindcss";
 
 export default {
-	darkMode: ["class"],
-	content: [
-		"./pages/**/*.{ts,tsx}",
-		"./components/**/*.{ts,tsx}",
-		"./app/**/*.{ts,tsx}",
-		"./src/**/*.{ts,tsx}",
-	],
-	prefix: "",
-	theme: {
-		container: {
-			center: true,
-			padding: '2rem',
-			screens: {
-				'2xl': '1400px'
-			}
-		},
-		extend: {
-			colors: {
-				border: 'hsl(var(--border))',
-				input: 'hsl(var(--input))',
-				ring: 'hsl(var(--ring))',
-				background: 'hsl(var(--background))',
-				foreground: 'hsl(var(--foreground))',
-				primary: {
-					DEFAULT: 'hsl(var(--primary))',
-					foreground: 'hsl(var(--primary-foreground))'
-				},
-				secondary: {
-					DEFAULT: 'hsl(var(--secondary))',
-					foreground: 'hsl(var(--secondary-foreground))'
-				},
-				destructive: {
-					DEFAULT: 'hsl(var(--destructive))',
-					foreground: 'hsl(var(--destructive-foreground))'
-				},
-				muted: {
-					DEFAULT: 'hsl(var(--muted))',
-					foreground: 'hsl(var(--muted-foreground))'
-				},
-				accent: {
-					DEFAULT: 'hsl(var(--accent))',
-					foreground: 'hsl(var(--accent-foreground))'
-				},
-				popover: {
-					DEFAULT: 'hsl(var(--popover))',
-					foreground: 'hsl(var(--popover-foreground))'
-				},
-				card: {
-					DEFAULT: 'hsl(var(--card))',
-					foreground: 'hsl(var(--card-foreground))'
-				},
-				sidebar: {
-					DEFAULT: 'hsl(var(--sidebar-background))',
-					foreground: 'hsl(var(--sidebar-foreground))',
-					primary: 'hsl(var(--sidebar-primary))',
-					'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
-					accent: 'hsl(var(--sidebar-accent))',
-					'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
-					border: 'hsl(var(--sidebar-border))',
-					ring: 'hsl(var(--sidebar-ring))'
-				}
-			},
-			borderRadius: {
-				lg: 'var(--radius)',
-				md: 'calc(var(--radius) - 2px)',
-				sm: 'calc(var(--radius) - 4px)'
-			},
-			keyframes: {
-				'accordion-down': {
-					from: {
-						height: '0'
-					},
-					to: {
-						height: 'var(--radix-accordion-content-height)'
-					}
-				},
-				'accordion-up': {
-					from: {
-						height: 'var(--radix-accordion-content-height)'
-					},
-					to: {
-						height: '0'
-					}
-				}
-			},
-			animation: {
-				'accordion-down': 'accordion-down 0.2s ease-out',
-				'accordion-up': 'accordion-up 0.2s ease-out'
-			}
-		}
-	},
-	plugins: [require("tailwindcss-animate")],
+  darkMode: ["class"],
+  content: [
+    "./pages/**/*.{ts,tsx}",
+    "./components/**/*.{ts,tsx}",
+    "./app/**/*.{ts,tsx}",
+    "./src/**/*.{ts,tsx}",
+  ],
+  prefix: "",
+  theme: {
+    container: {
+      center: true,
+      padding: "2rem",
+      screens: {
+        "2xl": "1400px",
+      },
+    },
+    extend: {
+      colors: {
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "#9b87f5",
+          light: "#d6bcfa",
+          dark: "#7e69ab",
+        },
+        neutral: {
+          DEFAULT: "#8E9196",
+          light: "#F1F0FB",
+          dark: "#403E43",
+        },
+      },
+      keyframes: {
+        "fade-in": {
+          "0%": { opacity: "0", transform: "translateY(10px)" },
+          "100%": { opacity: "1", transform: "translateY(0)" },
+        },
+        "slide-in": {
+          "0%": { transform: "translateX(-100%)" },
+          "100%": { transform: "translateX(0)" },
+        },
+      },
+      animation: {
+        "fade-in": "fade-in 0.5s ease-out",
+        "slide-in": "slide-in 0.3s ease-out",
+      },
+    },
+  },
+  plugins: [require("tailwindcss-animate")],
 } satisfies Config;