Dark default + thumbnails (#3)

Author: carletex

packages/nextjs/app/page.tsx

@@ -25,10 +25,10 @@ const Home: NextPage = () => {
         </div>
       </div>
 
-      <div className="flex items-center flex-col grow pt-10">
+      <div className="flex items-center flex-col grow pt-10 bg-gradient-to-r from-black via-gray-900 to-black">
         <div className="px-5 mb-8">
           <h1 className="text-center">
-            <span className="block text-4xl font-bold text-black">Buidlguidl&apos;s Builder Bootcamp</span>
+            <span className="block text-4xl font-bold text-primary">Buidlguidl&apos;s Builder Bootcamp</span>
             <span className="block text-lg text-base-content/70">Beginner to Advanced</span>
           </h1>
 

packages/nextjs/components/Footer.tsx

@@ -7,7 +7,7 @@ import { BuidlGuidlLogo } from "~~/components/assets/BuidlGuidlLogo";
  */
 export const Footer = () => {
   return (
-    <div className="min-h-0 py-5 px-1 mb-11 lg:mb-0">
+    <div className="min-h-0 py-5 px-1 mb-11 lg:mb-0 bg-gradient-to-r from-black via-gray-900 to-black">
       <div className="w-full">
         <ul className="menu menu-horizontal w-full">
           <div className="flex justify-center items-center gap-2 text-sm w-full">

packages/nextjs/components/ScheduleCalendar.tsx

@@ -32,34 +32,29 @@ export const ScheduleCalendar = () => {
 
   return (
     <div className="w-full max-w-7xl mx-auto p-4 sm:p-6 overflow-x-auto">
-      {/* Header with day names */}
       <div className="flex gap-2 sm:gap-4 mb-6 min-w-[800px]">
         <div className="w-8 text-sm font-medium text-base-content/60"></div>
         {days.map(day => {
           const { dayOfWeek, dateString } = getDayInfo(day);
           return (
             <div key={day} className="flex-1 text-center">
-              <h2 className="text-lg font-bold text-primary">{dayOfWeek}</h2>
-              <p className="text-sm text-base-content/70">{dateString}</p>
+              <h2 className="text-lg font-bold text-primary m-0">{dayOfWeek}</h2>
+              <p className="text-sm text-base-content/70 m-0">{dateString}</p>
             </div>
           );
         })}
       </div>
 
-      {/* Time grid container */}
       <div className="relative min-w-[800px]">
-        {/* Time grid background */}
         <div className="flex gap-2 sm:gap-4">
-          {/* Time column */}
           <div className="w-12 space-y-0">
             {timeSlots.map(timeSlot => (
               <div key={timeSlot.time24} className="h-16 border-b border-base-300 flex items-start pt-1">
-                <span className="text-sm font-medium text-base-content/60">{timeSlot.time12}</span>
+                <span className="text-sm font-medium text-base-content/70">{timeSlot.time12}</span>
               </div>
             ))}
           </div>
 
-          {/* Day columns */}
           {days.map(day => (
             <div key={day} className="flex-1 relative space-y-0">
               {timeSlots.map(timeSlot => (
@@ -69,12 +64,9 @@ export const ScheduleCalendar = () => {
           ))}
         </div>
 
-        {/* Positioned sessions overlay */}
         <div className="absolute inset-0 flex gap-2 sm:gap-4">
-          {/* Skip time column */}
           <div className="w-12"></div>
 
-          {/* Session overlays for each day */}
           {days.map(day => {
             const daySessions = getSessionsForDay(day);
 

packages/nextjs/public/thumbnail.jpg

@@ -13,7 +13,7 @@
 @plugin "daisyui/theme" {
   name: "light";
 
-  --color-primary: #93bbfb;
+  --color-primary: #5ef032;
   --color-primary-content: #212638;
   --color-secondary: #dae8ff;
   --color-secondary-content: #212638;
@@ -24,7 +24,7 @@
   --color-base-100: #ffffff;
   --color-base-200: #f4f8ff;
   --color-base-300: #dae8ff;
-  --color-base-content: #212638;
+  --color-base-content: #e0e0e0;
   --color-info: #93bbfb;
   --color-success: #34eeb6;
   --color-warning: #ffcf72;