Skip to content

Commit 067597c

Browse files
andrealbiaccarletex
andrealbiac
and
carletex
authored
Design tweaks (#11)
Co-authored-by: Carlos Sánchez <[email protected]>
1 parent 2844f7f commit 067597c

File tree

12 files changed

+84
-57
lines changed

12 files changed

+84
-57
lines changed

‎packages/nextjs/app/layout.tsx‎

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,25 @@
1+
import { Orbit } from "next/font/google";
2+
import localFont from "next/font/local";
13
import "@rainbow-me/rainbowkit/styles.css";
24
import { ScaffoldEthAppWithProviders } from "~~/components/ScaffoldEthAppWithProviders";
35
import { ThemeProvider } from "~~/components/ThemeProvider";
46
import "~~/styles/globals.css";
57
import { getMetadata } from "~~/utils/scaffold-eth/getMetadata";
68

9+
const orbit = Orbit({
10+
subsets: ["latin"],
11+
weight: ["400"],
12+
variable: "--font-orbit",
13+
display: "swap",
14+
adjustFontFallback: false,
15+
});
16+
17+
const neueBit = localFont({
18+
src: "../public/fonts/PPNeueBit-Bold.woff2",
19+
variable: "--font-neuebit",
20+
weight: "700",
21+
});
22+
723
export const metadata = getMetadata({
824
title: "Buidlguidl's Builder Bootcamp @ Devconnect Argentina",
925
description:
@@ -12,8 +28,8 @@ export const metadata = getMetadata({
1228

1329
const ScaffoldEthApp = ({ children }: { children: React.ReactNode }) => {
1430
return (
15-
<html suppressHydrationWarning className={``}>
16-
<body>
31+
<html suppressHydrationWarning className={`${orbit.variable} ${neueBit.variable}`}>
32+
<body className="font-orbit">
1733
<ThemeProvider enableSystem={false} defaultTheme="light">
1834
<ScaffoldEthAppWithProviders>{children}</ScaffoldEthAppWithProviders>
1935
</ThemeProvider>

‎packages/nextjs/app/page.tsx‎

Lines changed: 29 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -7,56 +7,57 @@ import { ScheduleCalendar } from "~~/components/ScheduleCalendar";
77
const Home: NextPage = () => {
88
return (
99
<>
10-
<div className="w-full py-4 md:py-8">
11-
<div className="container mx-auto px-4">
12-
<div className="flex flex-col md:flex-row items-center justify-center gap-4 md:gap-8 lg:gap-12">
13-
<div className="flex-shrink-0">
14-
<Image src="/logo-bg.svg" alt="BuidlGuidl logo" width={200} height={40} />
15-
</div>
10+
<div className="flex items-center flex-col grow pt-2">
11+
<div className="px-5">
12+
<div className="flex justify-center mt-14 md:mt-12 mb-8">
13+
<div className="flex flex-col md:flex-row items-center justify-center gap-2 md:gap-4">
14+
<div className="flex-shrink-0">
15+
<Image src="/logo-bg.svg" alt="BuidlGuidl logo" width={130} height={28} />
16+
</div>
1617

17-
<div className="flex-shrink-0">
18-
<Image src="/x.svg" alt="×" width={25} height={25} />
19-
</div>
18+
<div className="flex-shrink-0">
19+
<Image src="/x.svg" alt="×" width={20} height={15} />
20+
</div>
2021

21-
<div className="flex-shrink-0">
22-
<Image src="/logo-devconnect.svg" alt="Devconnect Argentina logo" width={200} height={65} />
22+
<div className="flex-shrink-0">
23+
<Image src="/logo-devconnect.svg" alt="Devconnect Argentina logo" width={140} height={48} />
24+
</div>
2325
</div>
2426
</div>
25-
</div>
26-
</div>
27-
28-
<div className="flex items-center flex-col grow pt-2">
29-
<div>
30-
<Image src="/ruler.png" alt="Ruler" width={800} height={40} />
31-
</div>
32-
<div className="px-5">
33-
<h1 className="text-center mt-10">
34-
<span className="block text-4xl font-bold text-primary">Buidlguidl&apos;s Builder Bootcamp</span>
35-
<span className="block text-lg text-base-content/70">Beginner to Advanced</span>
27+
<h1 className="text-center mt-8 mb-16 lg:mt-12">
28+
<span className="block text-7xl lg:text-8xl font-bold text-primary font-neuebit">
29+
Buidlguidl&apos;s Builder Bootcamp
30+
</span>
31+
<span className="block text-xl md:text-3xl lg:text-2xl text-base-content/80 mt-2">
32+
Beginner to Advanced
33+
</span>
3634
</h1>
3735

38-
<div className="text-center mt-6">
39-
<p className="text-lg mb-2">
36+
<div className="text-center">
37+
<p className="text-lg lg:text-base mt-12">
4038
📅 November 18-21, 2025 @{" "}
4139
<a href="https://devconnect.org/" target="_blank" rel="noopener noreferrer" className="link">
4240
Devconnect Argentina
4341
</a>
4442
</p>
45-
<p>📍 Devconnect main venue - Workshop space (Yellow Pavilion) </p>
43+
<p className="text-lg lg:text-base">📍 Devconnect main venue - Workshop space (Yellow Pavilion) </p>
4644
</div>
4745

48-
<div className="flex justify-center">
49-
<Image src="/eth_lines.png" alt="Ethereum" width={50} height={40} />
46+
<div className="my-8 md:my-12 flex justify-center">
47+
<Image src="/ruler.png" alt="Ruler" width={800} height={40} className="lg:w-[600px] lg:h-[30px]" />
5048
</div>
5149

52-
<div className="flex justify-center text-xl max-w-2xl mx-auto mt-4 mb-12 text-center font-medium">
50+
<div className="flex justify-center text-lg lg:text-base max-w-2xl mx-auto mb-12 text-center">
5351
Join BuidlGuidl in a week-long intensive journey from beginner to advanced Ethereum development. Perfect for
5452
all skill levels, whether you&apos;re taking your first steps on Ethereum or looking to level up your
5553
skills.
5654
</div>
5755
</div>
5856

5957
<div className="w-full">
58+
<div className="flex justify-center mb-14">
59+
<Image src="/icons.svg" alt="Icons" width={100} height={120} className="max-w-full h-auto" />
60+
</div>
6061
<ScheduleCalendar />
6162
</div>
6263
</div>

‎packages/nextjs/app/sessions.ts‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -25,12 +25,12 @@ export interface Session {
2525
}
2626

2727
export const sessionTypeColors = {
28-
[SessionType.WORKSHOP]: "bg-blue-300",
29-
[SessionType.OFFICE_HOURS]: "bg-green-300",
30-
[SessionType.PANEL]: "bg-purple-300",
31-
[SessionType.CTF]: "bg-red-300",
32-
[SessionType.STUDENTS]: "bg-orange-300",
33-
[SessionType.CHALLENGE]: "bg-indigo-300",
28+
[SessionType.WORKSHOP]: { backgroundColor: "#73B4F0" }, //blue
29+
[SessionType.OFFICE_HOURS]: { backgroundColor: "#FF85A6" }, //pink
30+
[SessionType.PANEL]: { backgroundColor: "#F4A0FF" }, //purplish pink
31+
[SessionType.CTF]: { backgroundColor: "#D0FF73" }, //green
32+
[SessionType.STUDENTS]: { backgroundColor: "#FFC83D" }, //yellow
33+
[SessionType.CHALLENGE]: { backgroundColor: "#B2A0FF" }, //purple
3434
};
3535

3636
export const SPEAKERS = {
@@ -336,8 +336,8 @@ export const getSessionPosition = (session: Session) => {
336336
const startOffsetMinutes = startMinutes - gridStartMinutes;
337337
const durationMinutes = endMinutes - startMinutes;
338338

339-
// Each hour = 64px, so each minute = 64/60 px
340-
const pixelsPerMinute = 64 / 60;
339+
// Each hour = 80px, so each minute = 80/60 px
340+
const pixelsPerMinute = 80 / 60;
341341

342342
return {
343343
startRow: Math.floor(startOffsetMinutes / 60) + 1, // which hour row

‎packages/nextjs/components/ScaffoldEthAppWithProviders.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ const ScaffoldEthApp = ({ children }: { children: React.ReactNode }) => {
2121
className="flex flex-col min-h-screen bg-no-repeat bg-cover bg-center"
2222
style={{
2323
backgroundImage:
24-
"linear-gradient(to bottom, rgba(246, 180, 14, 0.9), rgba(207, 207, 207, 0.9)), url('/bg_lines.png')",
24+
"linear-gradient(to bottom, rgba(246, 180, 14, 0.75) 10%, rgba(207, 207, 207, 0.8) 85%), url('/bg_lines.png')",
2525
}}
2626
>
2727
<main className="relative flex flex-col flex-1">{children}</main>

‎packages/nextjs/components/ScheduleCalendar.tsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ export const ScheduleCalendar = () => {
3131
};
3232

3333
return (
34-
<div className="w-full max-w-7xl mx-auto p-4 sm:p-6 overflow-x-auto bg-white/60">
34+
<div className="w-full max-w-7xl mx-auto p-4 sm:p-6 overflow-x-auto bg-white/40 rounded-xl">
3535
<div className="flex gap-2 sm:gap-4 mb-6 min-w-[800px]">
3636
<div className="w-8 text-sm font-medium text-base-content/60"></div>
3737
{days.map(day => {
@@ -49,7 +49,7 @@ export const ScheduleCalendar = () => {
4949
<div className="flex gap-2 sm:gap-4">
5050
<div className="w-12 space-y-0">
5151
{timeSlots.map(timeSlot => (
52-
<div key={timeSlot.time24} className="h-16 border-b border-base-300 flex items-start pt-1">
52+
<div key={timeSlot.time24} className="h-20 border-b border-base-300 flex items-start pt-1">
5353
<span className="text-sm font-medium text-base-content/70">{timeSlot.time12}</span>
5454
</div>
5555
))}
@@ -58,7 +58,7 @@ export const ScheduleCalendar = () => {
5858
{days.map(day => (
5959
<div key={day} className="flex-1 relative space-y-0">
6060
{timeSlots.map(timeSlot => (
61-
<div key={timeSlot.time24} className="h-16 border-b border-black/20"></div>
61+
<div key={timeSlot.time24} className="h-20 border-b border-black/20"></div>
6262
))}
6363
</div>
6464
))}
@@ -75,15 +75,15 @@ export const ScheduleCalendar = () => {
7575
{daySessions.map(session => {
7676
const position = getSessionPosition(session);
7777
const colors = sessionTypeColors[session.type];
78+
const className =
79+
"absolute left-0 right-0 outline outline-2 outline-gray-300 rounded-lg cursor-pointer hover:shadow-md transition-shadow p-2 z-10";
80+
const style = { ...colors, top: `${position.startOffset}px`, height: `${position.duration}px` };
7881

7982
return (
8083
<div
8184
key={session.title}
82-
className={`absolute left-0 right-0 ${colors} outline outline-2 outline-black/60 cursor-pointer hover:shadow-md transition-shadow p-2 z-10`}
83-
style={{
84-
top: `${position.startOffset}px`,
85-
height: `${position.duration}px`,
86-
}}
85+
className={className}
86+
style={style}
8787
onClick={() => handleSessionClick(session)}
8888
>
8989
<div className="h-full flex flex-col justify-between">

‎packages/nextjs/components/SessionModal.tsx‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,19 @@ interface SessionModalProps {
1212
export const SessionModal = ({ session, isOpen, onClose }: SessionModalProps) => {
1313
if (!session) return null;
1414

15+
// Solid lighter versions of the session colors
16+
const lightColors = {
17+
workshop: "#B8D4F7", // light blue
18+
office_hours: "#FFB8D1", // light pink
19+
panel: "#F4D0FF", // light purplish pink
20+
ctf: "#E8FFB8", // light green
21+
students: "#FFE4A0", // light yellow
22+
challenge: "#D4B0FF", // light purple
23+
};
24+
1525
return (
1626
<div className={`modal ${isOpen ? "modal-open" : ""}`}>
17-
<div className="modal-box max-w-2xl bg-[#fff8d5]">
27+
<div className="modal-box max-w-2xl" style={{ backgroundColor: lightColors[session.type] }}>
1828
<div className="flex justify-between items-start mb-4">
1929
<div>
2030
<h3 className="font-bold text-lg text-primary mb-0">{session.title}</h3>

‎packages/nextjs/public/eth_lines.png‎

-31.4 KB
Binary file not shown.

‎packages/nextjs/public/favicon.png‎

-5.23 KB
Loading

‎packages/nextjs/public/fonts/PPNeueBit-Bold.woff2‎

19.2 KB
Binary file not shown.

‎packages/nextjs/public/icons.svg‎

Lines changed: 1 addition & 0 deletions
Loading

0 commit comments

Comments
 (0)