Skip to content

Commit a177d03

Browse files
johnnyhuyjohnnyhuy
committed
feat: enhance UI with new BrandMark component and update styles for consistency
1 parent f3ff5e2 commit a177d03

File tree

5 files changed

+283
-52
lines changed

5 files changed

+283
-52
lines changed

‎apps/mobile/App.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -412,12 +412,14 @@ const styles = StyleSheet.create({
412412
logo: {
413413
fontSize: 64,
414414
fontWeight: 'bold',
415+
fontFamily: 'BBH Hegarty',
415416
color: 'white',
416417
marginBottom: 10,
417418
},
418419
title: {
419420
fontSize: 32,
420421
fontWeight: 'bold',
422+
fontFamily: 'BBH Hegarty',
421423
color: 'white',
422424
marginBottom: 10,
423425
textAlign: 'center',

‎apps/web/app/globals.css‎

Lines changed: 123 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,137 @@
11
@import 'tailwindcss';
22

3+
/*
4+
Yell design tokens
5+
- Semantic (bg/surface/border/text)
6+
- Brand (ink + confident blue accent)
7+
- Motion (150–220ms)
8+
*/
9+
310
:root {
4-
--background: #ffffff;
5-
--foreground: #171717;
11+
/* Brand */
12+
--ink: #0b0f19;
13+
--accent: #2563eb;
14+
--accent-2: #1d4ed8;
15+
16+
/* RGB versions for alpha gradients */
17+
--ink-rgb: 11 15 25;
18+
--accent-rgb: 37 99 235;
19+
--accent-2-rgb: 29 78 216;
20+
21+
/* Light theme semantics */
22+
--bg: #ffffff;
23+
--fg: var(--ink);
24+
--muted: rgba(var(--ink-rgb) / 0.7);
25+
--subtle: rgba(var(--ink-rgb) / 0.58);
26+
--surface: rgba(var(--ink-rgb) / 0.03);
27+
--surface-2: rgba(var(--ink-rgb) / 0.06);
28+
--border: rgba(var(--ink-rgb) / 0.12);
29+
--ring: rgba(var(--accent-rgb) / 0.55);
30+
31+
/* Motion */
32+
--dur-quick: 150ms;
33+
--dur-ui: 180ms;
34+
--dur-slow: 220ms;
35+
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
36+
}
37+
38+
@media (prefers-color-scheme: dark) {
39+
:root:not([data-theme='light']) {
40+
--bg: var(--ink);
41+
--fg: rgba(255 255 255 / 0.92);
42+
--muted: rgba(255 255 255 / 0.72);
43+
--subtle: rgba(255 255 255 / 0.6);
44+
--surface: rgba(255 255 255 / 0.06);
45+
--surface-2: rgba(255 255 255 / 0.1);
46+
--border: rgba(255 255 255 / 0.16);
47+
--ring: rgba(var(--accent-rgb) / 0.6);
48+
49+
/* Slightly brighter accent in dark */
50+
--accent: #60a5fa;
51+
--accent-rgb: 96 165 250;
52+
}
53+
}
54+
55+
:root[data-theme='dark'] {
56+
--bg: var(--ink);
57+
--fg: rgba(255 255 255 / 0.92);
58+
--muted: rgba(255 255 255 / 0.72);
59+
--subtle: rgba(255 255 255 / 0.6);
60+
--surface: rgba(255 255 255 / 0.06);
61+
--surface-2: rgba(255 255 255 / 0.1);
62+
--border: rgba(255 255 255 / 0.16);
63+
--ring: rgba(var(--accent-rgb) / 0.6);
64+
65+
--accent: #60a5fa;
66+
--accent-rgb: 96 165 250;
667
}
768

869
@theme inline {
9-
--color-background: var(--background);
10-
--color-foreground: var(--foreground);
70+
/* Semantic colors (Tailwind: bg-bg, text-fg, border-border, etc.) */
71+
--color-bg: var(--bg);
72+
--color-fg: var(--fg);
73+
--color-muted: var(--muted);
74+
--color-subtle: var(--subtle);
75+
--color-surface: var(--surface);
76+
--color-surface-2: var(--surface-2);
77+
--color-border: var(--border);
78+
--color-accent: var(--accent);
79+
--color-accent-2: var(--accent-2);
80+
--color-ring: var(--ring);
81+
1182
--font-sans: var(--font-geist-sans);
1283
--font-mono: var(--font-geist-mono);
1384
}
1485

15-
@media (prefers-color-scheme: dark) {
16-
:root {
17-
--background: #0a0a0a;
18-
--foreground: #ededed;
19-
}
86+
html {
87+
color-scheme: light dark;
2088
}
2189

2290
body {
23-
background: var(--background);
24-
color: var(--foreground);
25-
font-family: Arial, Helvetica, sans-serif;
91+
background: var(--bg);
92+
color: var(--fg);
93+
font-family: var(--font-sans), ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto,
94+
Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji';
95+
letter-spacing: -0.01em;
96+
}
97+
98+
:root {
99+
/* Brand type: relies on the font being installed or provided by the environment. */
100+
--font-brand: 'BBH Hegarty', var(--font-sans), ui-sans-serif, system-ui;
101+
}
102+
103+
.yell-brand {
104+
font-family: var(--font-brand);
105+
letter-spacing: -0.02em;
106+
}
107+
108+
::selection {
109+
background: rgb(var(--accent-rgb) / 0.22);
110+
}
111+
112+
.yell-ambient {
113+
background: var(--bg);
114+
}
115+
116+
.yell-card {
117+
background: color-mix(in srgb, var(--bg) 86%, var(--surface-2));
118+
border: 1px solid var(--border);
119+
box-shadow:
120+
0 1px 0 rgb(var(--ink-rgb) / 0.04),
121+
0 18px 60px rgb(var(--ink-rgb) / 0.08);
122+
}
123+
124+
.yell-focus-ring:focus-visible {
125+
outline: none;
126+
box-shadow: 0 0 0 4px var(--ring);
127+
}
128+
129+
.yell-transition {
130+
transition:
131+
transform var(--dur-ui) var(--ease-out),
132+
box-shadow var(--dur-ui) var(--ease-out),
133+
background-color var(--dur-ui) var(--ease-out),
134+
border-color var(--dur-ui) var(--ease-out),
135+
color var(--dur-ui) var(--ease-out),
136+
opacity var(--dur-ui) var(--ease-out);
26137
}

‎apps/web/app/layout.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,12 @@ export default function RootLayout({
2424
children: React.ReactNode;
2525
}>) {
2626
return (
27-
<html lang="en">
28-
<body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>{children}</body>
27+
<html lang="en" className="h-full">
28+
<body
29+
className={`${geistSans.variable} ${geistMono.variable} antialiased min-h-screen bg-bg text-fg`}
30+
>
31+
{children}
32+
</body>
2933
</html>
3034
);
3135
}

‎apps/web/app/page.tsx‎

Lines changed: 75 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,85 @@
11
import Link from 'next/link';
22

3+
import { BrandMark } from '../components/BrandMark';
4+
35
export default function Home() {
46
return (
5-
<div className="min-h-screen bg-gradient-to-br from-purple-600 to-blue-500 flex items-center justify-center p-4">
6-
<div className="max-w-4xl w-full text-center">
7-
<h1 className="text-6xl font-bold text-white mb-4">Yell</h1>
8-
<p className="text-2xl text-white/90 mb-8">Interactive Live Quizzes with a Spin!</p>
9-
<p className="text-lg text-white/80 mb-12 max-w-2xl mx-auto">
10-
Create engaging quizzes, polls, and interactive sessions for your classroom, team
11-
meetings, or events. Join with QR codes, compete on leaderboards, and win prizes!
12-
</p>
7+
<div className="min-h-screen bg-bg">
8+
<div className="mx-auto max-w-5xl px-6 py-14 sm:py-20">
9+
<header className="flex items-center justify-between gap-6">
10+
<BrandMark size="md" tagline="Live quizzes, sharp energy" />
11+
<nav className="hidden sm:flex items-center gap-2 text-sm text-muted">
12+
<Link
13+
href="/host"
14+
className="yell-transition rounded-full px-4 py-2 hover:bg-surface-2"
15+
>
16+
Host
17+
</Link>
18+
<Link
19+
href="/join"
20+
className="yell-transition rounded-full px-4 py-2 hover:bg-surface-2"
21+
>
22+
Join
23+
</Link>
24+
</nav>
25+
</header>
1326

14-
<div className="flex flex-col sm:flex-row gap-4 justify-center items-center mb-12">
15-
<Link
16-
href="/host"
17-
className="bg-white text-purple-600 px-8 py-4 rounded-full text-lg font-semibold hover:bg-gray-100 transition-colors shadow-lg"
18-
>
19-
Host a Quiz
20-
</Link>
21-
<Link
22-
href="/join"
23-
className="bg-transparent border-2 border-white text-white px-8 py-4 rounded-full text-lg font-semibold hover:bg-white/10 transition-colors"
24-
>
25-
Join a Quiz
26-
</Link>
27-
</div>
27+
<main className="mt-14 sm:mt-18">
28+
<div className="max-w-3xl">
29+
<h1 className="yell-brand text-4xl sm:text-6xl font-black tracking-tight leading-[1.02]">
30+
Turn the room up.
31+
<span className="block text-muted mt-3 text-2xl sm:text-3xl font-semibold tracking-tight">
32+
Confident, real-time quizzes for classes, teams, and events.
33+
</span>
34+
</h1>
2835

29-
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mt-16">
30-
<div className="bg-white/10 backdrop-blur-sm rounded-lg p-6 text-white">
31-
<div className="text-4xl mb-2">📱</div>
32-
<h3 className="text-xl font-semibold mb-2">Cross-Platform</h3>
33-
<p className="text-white/80">Works on web, iOS, and Android</p>
34-
</div>
35-
<div className="bg-white/10 backdrop-blur-sm rounded-lg p-6 text-white">
36-
<div className="text-4xl mb-2">⚡</div>
37-
<h3 className="text-xl font-semibold mb-2">Real-Time</h3>
38-
<p className="text-white/80">Live reactions and instant results</p>
39-
</div>
40-
<div className="bg-white/10 backdrop-blur-sm rounded-lg p-6 text-white">
41-
<div className="text-4xl mb-2">🎁</div>
42-
<h3 className="text-xl font-semibold mb-2">Prize Modes</h3>
43-
<p className="text-white/80">Leaderboards, raffles, and spin wheels</p>
36+
<p className="mt-6 text-lg sm:text-xl text-subtle leading-relaxed">
37+
Create a session, share a code or QR, and watch responses land instantly. Clean UI,
38+
strong hierarchy, and motion that stays out of the way.
39+
</p>
40+
41+
<div className="mt-10 flex flex-col sm:flex-row items-stretch sm:items-center gap-3">
42+
<Link
43+
href="/host"
44+
className="yell-focus-ring yell-transition inline-flex items-center justify-center rounded-full px-7 py-4 text-base font-semibold text-white"
45+
style={{ backgroundColor: 'var(--accent)' }}
46+
>
47+
Host a Quiz
48+
</Link>
49+
<Link
50+
href="/join"
51+
className="yell-focus-ring yell-transition inline-flex items-center justify-center rounded-full px-7 py-4 text-base font-semibold border border-border bg-surface hover:bg-surface-2"
52+
>
53+
Join a Quiz
54+
</Link>
55+
<div className="text-sm text-muted px-2 sm:px-0">
56+
Tip: mobile supports QR scanning.
57+
</div>
58+
</div>
4459
</div>
45-
</div>
60+
61+
<section className="mt-16 grid grid-cols-1 md:grid-cols-3 gap-5">
62+
{[{
63+
title: 'Cross‑platform',
64+
body: 'Web + iOS + Android clients, same session.'
65+
}, {
66+
title: 'Real‑time',
67+
body: 'Instant questions, reactions, and leaderboards.'
68+
}, {
69+
title: 'Prize modes',
70+
body: 'Top score, raffles, and spin wheels.'
71+
}].map((card) => (
72+
<div key={card.title} className="yell-card rounded-2xl p-6">
73+
<div className="text-sm font-semibold tracking-wide text-muted">{card.title}</div>
74+
<div className="mt-2 text-lg font-semibold tracking-tight">{card.body}</div>
75+
<div
76+
className="mt-5 h-[2px] w-14 rounded-full"
77+
style={{ backgroundColor: 'var(--accent)' }}
78+
/>
79+
</div>
80+
))}
81+
</section>
82+
</main>
4683
</div>
4784
</div>
4885
);

‎apps/web/components/BrandMark.tsx‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
import * as React from 'react';
2+
3+
type BrandMarkProps = {
4+
size?: 'sm' | 'md' | 'lg';
5+
className?: string;
6+
tagline?: string;
7+
};
8+
9+
const sizes = {
10+
sm: {
11+
word: 'text-2xl',
12+
wave: 18,
13+
gap: 'gap-2',
14+
},
15+
md: {
16+
word: 'text-4xl',
17+
wave: 22,
18+
gap: 'gap-3',
19+
},
20+
lg: {
21+
word: 'text-6xl',
22+
wave: 26,
23+
gap: 'gap-4',
24+
},
25+
} as const;
26+
27+
export function BrandMark({ size = 'md', className, tagline }: BrandMarkProps) {
28+
const s = sizes[size];
29+
30+
return (
31+
<div className={['inline-flex items-center', s.gap, className].filter(Boolean).join(' ')}>
32+
<div className="relative">
33+
<span
34+
className={[
35+
'yell-brand font-black tracking-tight text-fg',
36+
s.word,
37+
'leading-none',
38+
'select-none',
39+
].join(' ')}
40+
aria-label="YELL"
41+
>
42+
YELL
43+
</span>
44+
<span
45+
aria-hidden="true"
46+
className="pointer-events-none absolute -bottom-2 left-0 right-0 h-[2px] rounded-full"
47+
style={{ backgroundColor: 'var(--accent)', opacity: 0.55 }}
48+
/>
49+
</div>
50+
51+
{/* Subtle sound-wave motif */}
52+
<svg
53+
width={s.wave}
54+
height={s.wave}
55+
viewBox="0 0 24 24"
56+
fill="none"
57+
xmlns="http://www.w3.org/2000/svg"
58+
aria-hidden="true"
59+
className="opacity-80"
60+
>
61+
<path
62+
d="M4 12c2.4 0 2.4-6 4.8-6s2.4 12 4.8 12S16 8 18.4 8 20.6 12 22 12"
63+
stroke="var(--accent)"
64+
strokeWidth="1.8"
65+
strokeLinecap="round"
66+
strokeLinejoin="round"
67+
/>
68+
</svg>
69+
70+
{tagline ? (
71+
<div className="hidden sm:block">
72+
<div className="text-sm text-muted tracking-wide">{tagline}</div>
73+
</div>
74+
) : null}
75+
</div>
76+
);
77+
}

0 commit comments

Comments
 (0)