Skip to content

Commit eba501b

Browse files
prokopsimekprokopsimek
committed
feat: improve visual
1 parent d91c563 commit eba501b

File tree

7 files changed

+190
-83
lines changed

7 files changed

+190
-83
lines changed

‎src/app/globals.css

Lines changed: 0 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -2,20 +2,3 @@
22
@tailwind components;
33
@tailwind utilities;
44

5-
:root {
6-
--background: #ffffff;
7-
--foreground: #171717;
8-
}
9-
10-
@media (prefers-color-scheme: dark) {
11-
:root {
12-
--background: #0a0a0a;
13-
--foreground: #ededed;
14-
}
15-
}
16-
17-
body {
18-
color: #562AD0;
19-
background: var(--background);
20-
font-family: Arial, Helvetica, sans-serif;
21-
}

‎src/app/layout.tsx

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import type { Metadata } from "next";
22
import { Inter, Staatliches } from "next/font/google";
33
import "./globals.css";
4+
import Navigation from "./components/Navigation";
45

56
const inter = Inter({ subsets: ['latin'] });
67
const staatliches = Staatliches({ weight: '400', subsets: ['latin'] });
@@ -17,7 +18,10 @@ export default function RootLayout({
1718
}>) {
1819
return (
1920
<html lang="en">
20-
<body className={`${inter.className} ${staatliches.className} font-inter`}>{children}</body>
21+
<body className={`${inter.className} ${staatliches.className} font-inter bg-athens-gray text-purple`}>
22+
<Navigation />
23+
{children}
24+
</body>
2125
</html>
2226
);
2327
}

‎src/app/page.tsx

Lines changed: 71 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -7,20 +7,77 @@ export default function Home() {
77
const router = useRouter();
88

99
return (
10-
<div className="min-h-screen bg-gray-50 flex flex-col items-center justify-center p-4">
11-
<div className="text-center">
12-
<DxHeroesLogo className="w-32 h-32 mx-auto mb-8 text-stratos" />
13-
<h1 className="text-2xl sm:text-4xl font-staatliches mb-4">1:1 Meeting Questions</h1>
14-
<p className="text-base sm:text-lg text-gray-600 mb-8 font-inter max-w-md mx-auto">
15-
Facilitate meaningful 1:1 meetings with structured questions and topics for better discussions.
16-
</p>
17-
<button
18-
type="button"
19-
onClick={() => router.push('/topics')}
20-
className="px-8 py-4 bg-turquoise text-white rounded-lg hover:bg-opacity-90 transition-colors text-xl sm:text-2xl font-staatliches"
21-
>
22-
Start
23-
</button>
10+
<div className="min-h-screen bg-gradient-to-b from-gray-50 to-white">
11+
<div className="max-w-5xl mx-auto px-4">
12+
{/* Hero Section */}
13+
<div className="text-center mb-16">
14+
<DxHeroesLogo className="w-24 h-24 sm:w-32 sm:h-32 mx-auto mb-8 text-stratos" />
15+
<h1 className="text-3xl sm:text-5xl font-staatliches mb-6 bg-clip-text text-transparent bg-gradient-to-r from-electric-violet to-purple">
16+
1:1 Meeting Cards
17+
</h1>
18+
<p className="text-xl sm:text-2xl text-gray-600 font-inter max-w-2xl mx-auto leading-relaxed">
19+
Lead meaningful 1on1 conversations that strengthen your team and drive growth
20+
</p>
21+
</div>
22+
23+
{/* Main Content */}
24+
<div className="grid md:grid-cols-2 gap-12 items-center mb-16">
25+
<div className="space-y-6">
26+
<h2 className="text-2xl sm:text-3xl font-staatliches text-stratos mb-4">
27+
Why Use Meeting Cards?
28+
</h2>
29+
<p className="text-lg text-gray-700 font-inter leading-relaxed">
30+
We believe that quality 1on1 conversations are the foundation of a healthy company culture and personal growth.
31+
That&apos;s why we&apos;ve created this set of conversation cards to help you lead structured and meaningful discussions.
32+
</p>
33+
</div>
34+
35+
<div className="bg-white rounded-2xl shadow-xl p-8 border-t-4 border-electric-violet">
36+
<h3 className="text-xl font-staatliches text-stratos mb-6">
37+
Each topic contains carefully selected questions that will help you:
38+
</h3>
39+
<ul className="space-y-4 text-lg text-gray-700 font-inter">
40+
<li className="flex items-start">
41+
<span className="flex-shrink-0 w-6 h-6 rounded-full bg-electric-violet/10 flex items-center justify-center mr-3 mt-1">
42+
<span className="text-electric-violet">✓</span>
43+
</span>
44+
Get to know and understand each other better
45+
</li>
46+
<li className="flex items-start">
47+
<span className="flex-shrink-0 w-6 h-6 rounded-full bg-electric-violet/10 flex items-center justify-center mr-3 mt-1">
48+
<span className="text-electric-violet">✓</span>
49+
</span>
50+
Identify areas for improvement and growth
51+
</li>
52+
<li className="flex items-start">
53+
<span className="flex-shrink-0 w-6 h-6 rounded-full bg-electric-violet/10 flex items-center justify-center mr-3 mt-1">
54+
<span className="text-electric-violet">✓</span>
55+
</span>
56+
Address issues before they become critical
57+
</li>
58+
<li className="flex items-start">
59+
<span className="flex-shrink-0 w-6 h-6 rounded-full bg-electric-violet/10 flex items-center justify-center mr-3 mt-1">
60+
<span className="text-electric-violet">✓</span>
61+
</span>
62+
Build trust and open communication
63+
</li>
64+
</ul>
65+
</div>
66+
</div>
67+
68+
{/* CTA Button */}
69+
<div className="text-center">
70+
<button
71+
type="button"
72+
onClick={() => router.push('/topics')}
73+
className="inline-flex items-center px-8 py-4 bg-gradient-to-r from-electric-violet to-purple text-white rounded-xl hover:shadow-lg hover:scale-105 transition-all duration-200 text-xl font-staatliches group"
74+
>
75+
Start Exploring
76+
<svg className="ml-2 w-5 h-5 group-hover:translate-x-1 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true" title="Arrow right">
77+
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7l5 5m0 0l-5 5m5-5H6" />
78+
</svg>
79+
</button>
80+
</div>
2481
</div>
2582
</div>
2683
);

‎src/app/topics/[id]/DifficultyPage.tsx

Lines changed: 32 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -5,36 +5,51 @@ import Navigation from '../../components/Navigation';
55
import { difficulties } from '../../constants/topics';
66

77
const difficultyColors = {
8-
beginner: 'bg-electric-violet', // Pink for Surface Level
9-
intermediate: 'bg-purple', // Gold for Medium Depth
10-
advanced: 'bg-turquoise', // Turquoise for Deep Questions
8+
beginner: 'bg-electric-violet',
9+
intermediate: 'bg-purple',
10+
advanced: 'bg-turquoise',
1111
} as const;
1212

1313
export default function DifficultyPage(props: { id: string, title: string, description: string[] }) {
1414
const { id, title, description } = props;
1515

1616
return (
1717
<div className="min-h-screen bg-gray-50">
18-
<div className="mx-auto max-w-container px-4 py-12">
19-
<h1 className="text-xl sm:text-2xl font-staatliches mb-6 text-center whitespace-pre-line">{title}</h1>
20-
<div className="mb-8 space-y-4 text-base sm:text-lg font-inter text-center max-w-2xl mx-auto">
21-
{description.map((paragraph, i) => (
22-
<p key={`${id}-desc-${i}`} className="text-gray-700">
23-
{paragraph}
24-
</p>
25-
))}
18+
<div className="max-w-5xl mx-auto px-4">
19+
{/* Header */}
20+
<div className="text-center mb-16">
21+
<h1 className="text-3xl sm:text-5xl font-staatliches mb-6 bg-clip-text text-transparent bg-gradient-to-r from-electric-violet to-purple">
22+
{title}
23+
</h1>
24+
<div className="text-lg text-gray-600 font-inter max-w-2xl mx-auto text-left">
25+
{description.map((paragraph) => (
26+
<p key={`${id}-desc-${paragraph.slice(0, 20)}`} className="mb-4 leading-relaxed">
27+
{paragraph}
28+
</p>
29+
))}
30+
</div>
2631
</div>
27-
<div className="grid grid-cols-1 max-w-2xl mx-auto gap-6">
32+
33+
{/* Difficulty Cards */}
34+
<div className="grid grid-cols-1 gap-6 max-w-3xl mx-auto">
2835
{difficulties.map((difficulty) => (
2936
<Link
3037
key={difficulty.level}
3138
href={`/topics/${id}/questions/${difficulty.level}`}
32-
className={`${difficultyColors[difficulty.level]} text-white p-8 rounded-lg shadow-lg hover:shadow-xl transition-all hover:scale-[1.02] text-left aspect-[2/1] flex flex-col justify-center`}
39+
className={`${difficultyColors[difficulty.level]} group relative overflow-hidden text-white p-8 sm:p-10 rounded-2xl shadow-lg hover:shadow-xl transition-all hover:scale-[1.02] text-left border-2 border-transparent hover:border-white/20`}
3340
>
34-
<h2 className="text-2xl font-staatliches mb-4">{difficulty.title}</h2>
35-
<p className="text-white/90 text-lg leading-relaxed font-inter">
36-
{difficulty.description}
37-
</p>
41+
<div className="relative z-10">
42+
<div className="flex items-center justify-between mb-4">
43+
<h2 className="text-2xl sm:text-3xl font-staatliches">{difficulty.title}</h2>
44+
<span className="text-sm font-medium px-4 py-1 rounded-full bg-white/20 border border-white/40">
45+
{difficulty.level}
46+
</span>
47+
</div>
48+
<p className="text-lg sm:text-xl text-white/90 font-inter leading-relaxed">
49+
{difficulty.description}
50+
</p>
51+
</div>
52+
<div className="absolute inset-0 bg-gradient-to-r from-white/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity" />
3853
</Link>
3954
))}
4055
</div>

‎src/app/topics/[id]/questions/[difficulty]/QuestionsPage.tsx

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -35,13 +35,6 @@ export default function QuestionsPage(props: { id: string, difficulty: Difficult
3535
<h1 className={`text-2xl sm:text-4xl font-staatliches mb-8 sm:mb-12 max-w-[80%] leading-tight whitespace-pre-line ${textColorClass}`}>
3636
{topic.title}
3737
</h1>
38-
<div className="mb-8 sm:mb-12 space-y-4 font-inter text-gray-700">
39-
{topic.description.map((paragraph, i) => (
40-
<p key={`${id}-desc-${i}`} className="text-base sm:text-lg leading-relaxed">
41-
{paragraph}
42-
</p>
43-
))}
44-
</div>
4538
<ul className="space-y-6 sm:space-y-8 font-inter">
4639
{questions.map((question, i) => (
4740
<li key={`${id}-${difficulty}-q-${i}`} className="flex items-start gap-3 sm:gap-4">

‎src/app/topics/layout.tsx

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
export default function RootLayout({
2+
children,
3+
}: Readonly<{
4+
children: React.ReactNode;
5+
}>) {
6+
return (
7+
<div className="py-12">
8+
{children}
9+
</div>
10+
);
11+
}

‎src/app/topics/page.tsx

Lines changed: 71 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -3,46 +3,90 @@
33
import { useRouter } from 'next/navigation';
44
import Navigation from '../components/Navigation';
55
import { topics } from '../constants/topics';
6-
import { useState } from 'react';
6+
import { useState, useEffect, useRef } from 'react';
77

88
export default function Topics() {
99
const router = useRouter();
1010
const [hoveredTopic, setHoveredTopic] = useState<string | null>(null);
11+
const tooltipRefs = useRef<{ [key: string]: HTMLDivElement | null }>({});
12+
const buttonRefs = useRef<{ [key: string]: HTMLButtonElement | null }>({});
13+
14+
const setTooltipRef = (id: string) => (el: HTMLDivElement | null) => {
15+
tooltipRefs.current[id] = el;
16+
};
17+
18+
const setButtonRef = (id: string) => (el: HTMLButtonElement | null) => {
19+
buttonRefs.current[id] = el;
20+
};
21+
22+
useEffect(() => {
23+
const handleClickOutside = (event: MouseEvent) => {
24+
if (hoveredTopic) {
25+
const tooltip = tooltipRefs.current[hoveredTopic];
26+
const button = buttonRefs.current[hoveredTopic];
27+
if (tooltip && button &&
28+
!tooltip.contains(event.target as Node) &&
29+
!button.contains(event.target as Node)) {
30+
setHoveredTopic(null);
31+
}
32+
}
33+
};
34+
35+
document.addEventListener('mousedown', handleClickOutside);
36+
return () => {
37+
document.removeEventListener('mousedown', handleClickOutside);
38+
};
39+
}, [hoveredTopic]);
1140

1241
return (
13-
<div className="min-h-screen bg-gray-50">
14-
<div className="mx-auto max-w-container px-4 py-12">
15-
<h1 className="text-xl sm:text-2xl font-staatliches mb-6 text-center">Select a Topic</h1>
16-
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6">
42+
<div className="min-h-screen">
43+
<div className="max-w-7xl mx-auto px-4">
44+
<div className="text-center mb-12">
45+
<h1 className="text-3xl sm:text-5xl font-staatliches mb-6 bg-clip-text text-transparent bg-gradient-to-r from-electric-violet to-purple">
46+
Choose Your Topic
47+
</h1>
48+
<p className="text-xl text-gray-600 font-inter max-w-2xl mx-auto">
49+
Select a conversation topic to explore questions of varying difficulty
50+
</p>
51+
</div>
52+
53+
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">
1754
{Object.entries(topics).map(([id, topic]) => (
18-
<div key={id} className="relative">
55+
<div key={id} className="relative group">
1956
<button
2057
type="button"
2158
onClick={() => router.push(`/topics/${id}`)}
22-
className="w-full bg-purple text-white p-6 sm:p-8 rounded-lg shadow-lg hover:shadow-xl transition-all hover:scale-[1.02] text-left flex items-center justify-between"
59+
className="w-full bg-purple text-white p-6 sm:p-8 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-200 text-left flex flex-col justify-between min-h-[150px] border-2 border-transparent hover:border-white/20 group"
2360
>
24-
<h2 className="text-xl sm:text-2xl font-staatliches">{topic.title}</h2>
25-
<button
26-
type="button"
27-
className="w-6 h-6 rounded-full bg-white/20 flex items-center justify-center hover:bg-white/30 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-white/40 transition-colors"
28-
onClick={(e) => {
29-
e.stopPropagation();
30-
setHoveredTopic(hoveredTopic === id ? null : id);
31-
}}
32-
onMouseEnter={() => setHoveredTopic(id)}
33-
onMouseLeave={() => setHoveredTopic(null)}
34-
>
35-
<span className="text-white">?</span>
36-
</button>
61+
<div>
62+
<h2 className="text-2xl font-staatliches text-white mb-2 pr-10">
63+
{topic.title}
64+
</h2>
65+
<button
66+
ref={setButtonRef(id)}
67+
type="button"
68+
className="absolute top-6 sm:top-8 right-6 sm:right-8 w-8 h-8 rounded-full bg-white/20 hover:bg-white/30 flex items-center justify-center transition-colors border border-white/40"
69+
onClick={(e) => {
70+
e.stopPropagation();
71+
setHoveredTopic(hoveredTopic === id ? null : id);
72+
}}
73+
>
74+
<span className="text-white text-sm font-medium">?</span>
75+
</button>
76+
</div>
3777
</button>
38-
<div className={`absolute z-10 w-72 p-4 bg-white rounded-lg shadow-xl top-full mt-2 right-0 text-left border-4 border-electric-violet transition-all duration-200 origin-top-right ${
39-
hoveredTopic === id
40-
? 'opacity-100 scale-100'
41-
: 'opacity-0 scale-95 pointer-events-none'
42-
}`}>
43-
<div className="space-y-2">
78+
79+
<div
80+
ref={setTooltipRef(id)}
81+
className={`absolute z-10 w-80 p-5 bg-white rounded-xl shadow-xl top-full mt-2 right-0 text-left border-2 border-purple transition-all duration-200 origin-top-right ${
82+
hoveredTopic === id
83+
? 'opacity-100 scale-100 translate-y-0'
84+
: 'opacity-0 scale-95 translate-y-2 pointer-events-none'
85+
}`}
86+
>
87+
<div className="space-y-3">
4488
{topic.description.map((paragraph) => (
45-
<p key={`${id}-desc-${paragraph.slice(0, 20)}`} className="text-md text-gray-700">
89+
<p key={`${id}-desc-${paragraph.slice(0, 20)}`} className="text-gray-700 text-sm leading-relaxed">
4690
{paragraph}
4791
</p>
4892
))}

0 commit comments

Comments
 (0)