Design from Thumbnail

packages/nextjs/app/page.tsx

@@ -7,11 +7,11 @@ import { ScheduleCalendar } from "~~/components/ScheduleCalendar";
 const Home: NextPage = () => {
   return (
     <>
-      <div className="w-full bg-gradient-to-r from-black via-gray-900 to-black py-4 md:py-8">
+      <div className="w-full py-4 md:py-8">
         <div className="container mx-auto px-4">
           <div className="flex flex-col md:flex-row items-center justify-center gap-4 md:gap-8 lg:gap-12">
             <div className="flex-shrink-0">
-              <Image src="/logo-bg-white.svg" alt="BuidlGuidl logo" width={200} height={40} />
+              <Image src="/logo-bg.svg" alt="BuidlGuidl logo" width={200} height={40} />
             </div>
 
             <div className="flex-shrink-0">
@@ -25,9 +25,12 @@ const Home: NextPage = () => {
         </div>
       </div>
 
-      <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">
+      <div className="flex items-center flex-col grow pt-2">
+        <div>
+          <Image src="/ruler.png" alt="Ruler" width={800} height={40} />
+        </div>
+        <div className="px-5">
+          <h1 className="text-center mt-10">
             <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>
@@ -42,7 +45,11 @@ const Home: NextPage = () => {
             <p>📍 Devconnect main venue - Workshop space (Yellow Pavilion) </p>
           </div>
 
-          <div className="flex justify-center text-xl max-w-2xl mx-auto my-8 text-center font-medium">
+          <div className="flex justify-center">
+            <Image src="/eth_lines.png" alt="Ethereum" width={50} height={40} />
+          </div>
+
+          <div className="flex justify-center text-xl max-w-2xl mx-auto mt-4 mb-12 text-center font-medium">
             Join BuidlGuidl in a week-long intensive journey from beginner to advanced Ethereum development. Perfect for
             all skill levels, whether you&apos;re taking your first steps on Ethereum or looking to level up your
             skills.

packages/nextjs/app/sessions.ts

@@ -25,12 +25,12 @@ export interface Session {
 }
 
 export const sessionTypeColors = {
-  [SessionType.WORKSHOP]: "bg-blue-900 border-blue-300",
-  [SessionType.OFFICE_HOURS]: "bg-green-900 border-green-300",
-  [SessionType.PANEL]: "bg-purple-900 border-purple-300",
-  [SessionType.CTF]: "bg-red-900 border-red-300",
-  [SessionType.STUDENTS]: "bg-orange-900 border-orange-300",
-  [SessionType.CHALLENGE]: "bg-indigo-900 border-indigo-300",
+  [SessionType.WORKSHOP]: "bg-blue-300 border-blue-300",
+  [SessionType.OFFICE_HOURS]: "bg-green-300 border-green-300",
+  [SessionType.PANEL]: "bg-purple-300 border-purple-300",
+  [SessionType.CTF]: "bg-red-300 border-red-300",
+  [SessionType.STUDENTS]: "bg-orange-300 border-orange-300",
+  [SessionType.CHALLENGE]: "bg-indigo-300 border-indigo-300",
 };
 
 export const SPEAKERS = {

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 bg-gradient-to-r from-black via-gray-900 to-black">
+    <div className="min-h-0 py-5 px-1 mb-11 lg:mb-0">
       <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/ScaffoldEthAppWithProviders.tsx

@@ -17,7 +17,13 @@ const ScaffoldEthApp = ({ children }: { children: React.ReactNode }) => {
 
   return (
     <>
-      <div className={`flex flex-col min-h-screen `}>
+      <div
+        className="flex flex-col min-h-screen bg-no-repeat bg-cover bg-center"
+        style={{
+          backgroundImage:
+            "linear-gradient(to bottom, rgba(246, 180, 14, 0.9), rgba(207, 207, 207, 0.9)), url('/bg_lines.png')",
+        }}
+      >
         <main className="relative flex flex-col flex-1">{children}</main>
         <Footer />
       </div>

packages/nextjs/components/ScheduleCalendar.tsx

@@ -31,7 +31,7 @@ export const ScheduleCalendar = () => {
   };
 
   return (
-    <div className="w-full max-w-7xl mx-auto p-4 sm:p-6 overflow-x-auto">
+    <div className="w-full max-w-7xl mx-auto p-4 sm:p-6 overflow-x-auto bg-white/60">
       <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 => {
@@ -58,7 +58,7 @@ export const ScheduleCalendar = () => {
           {days.map(day => (
             <div key={day} className="flex-1 relative space-y-0">
               {timeSlots.map(timeSlot => (
-                <div key={timeSlot.time24} className="h-16 border-b border-base-300"></div>
+                <div key={timeSlot.time24} className="h-16 border-b border-black/20"></div>
               ))}
             </div>
           ))}
@@ -79,7 +79,7 @@ export const ScheduleCalendar = () => {
                   return (
                     <div
                       key={session.title}
-                      className={`absolute left-0 right-0 ${colors} border rounded-lg cursor-pointer hover:shadow-md transition-shadow p-2 z-10`}
+                      className={`absolute left-0 right-0 ${colors} border cursor-pointer hover:shadow-md transition-shadow p-2 z-10`}
                       style={{
                         top: `${position.startOffset}px`,
                         height: `${position.duration}px`,