Skip to content

Commit cb19b7d

Browse files
prokopsimekprokopsimek
committed
feat: visual
1 parent 9eee666 commit cb19b7d

File tree

5 files changed

+124
-31
lines changed

5 files changed

+124
-31
lines changed

‎package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,8 @@
1212
"@headlessui/react": "^2.2.0",
1313
"next": "15.1.4",
1414
"react": "^19.0.0",
15-
"react-dom": "^19.0.0"
15+
"react-dom": "^19.0.0",
16+
"react-icons": "^5.4.0"
1617
},
1718
"devDependencies": {
1819
"@eslint/eslintrc": "^3",

‎pnpm-lock.yaml

Lines changed: 12 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/app/about/page.tsx

Lines changed: 50 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
'use client';
22

33
import Navigation from '../components/Navigation';
4+
import { FaLinkedin } from 'react-icons/fa';
45

56
export default function About() {
67
return (
@@ -15,7 +16,7 @@ export default function About() {
1516
<div className="bg-white rounded-2xl shadow-lg p-8 sm:p-10">
1617
<div className="prose prose-lg mx-auto">
1718
<p className="text-lg text-gray-700 font-inter leading-relaxed mb-8">
18-
This project was born from the collaborative effort of passionate individuals who believe in the power of meaningful conversations in the workplace.
19+
I wanted to create something that would help me and people around me have better 1on1 meetings and a direction for our conversations, especially when someone feels lost or unsure of what to talk about.
1920
</p>
2021

2122
<h2 className="text-2xl font-staatliches text-stratos mb-6">Special Thanks To:</h2>
@@ -24,38 +25,79 @@ export default function About() {
2425
<div className="flex items-start gap-4">
2526
<div className="w-2 h-2 rounded-full bg-electric-violet mt-2.5" />
2627
<div>
27-
<h3 className="text-xl font-staatliches text-stratos">Věrka</h3>
28+
<div className="flex items-center gap-2">
29+
<h3 className="text-xl font-staatliches text-stratos">Věrka</h3>
30+
<a
31+
href="https://www.linkedin.com/in/vera-kralova-ab601911a/"
32+
target="_blank"
33+
rel="noopener noreferrer"
34+
className="text-[#0077b5] hover:text-[#0077b5]/80 transition-colors"
35+
>
36+
<FaLinkedin className="w-5 h-5" />
37+
</a>
38+
</div>
2839
<p className="text-gray-600">
29-
#couch and person who delivered all the content
40+
The amazing coach who crafted all the content. Her deep understanding of workplace dynamics and ability to create meaningful conversation frameworks made this project possible.
3041
</p>
3142
</div>
3243
</div>
3344

3445
<div className="flex items-start gap-4">
3546
<div className="w-2 h-2 rounded-full bg-selective-yellow mt-2.5" />
3647
<div>
37-
<h3 className="text-xl font-staatliches text-stratos">Bára</h3>
48+
<div className="flex items-center gap-2">
49+
<h3 className="text-xl font-staatliches text-stratos">Bára</h3>
50+
<a
51+
href="https://www.linkedin.com/in/barbora-mrk%C3%A1%C4%8Dkov%C3%A1-5184201a5/"
52+
target="_blank"
53+
rel="noopener noreferrer"
54+
className="text-[#0077b5] hover:text-[#0077b5]/80 transition-colors"
55+
>
56+
<FaLinkedin className="w-5 h-5" />
57+
</a>
58+
</div>
3859
<p className="text-gray-600">
39-
#for graphic design and helping us to visually bring this idea to life
60+
The driving force behind making this project happen. Her organizational skills and dedication were crucial in coordinating everything and ensuring this idea became reality.
4061
</p>
4162
</div>
4263
</div>
4364

4465
<div className="flex items-start gap-4">
4566
<div className="w-2 h-2 rounded-full bg-purple mt-2.5" />
4667
<div>
47-
<h3 className="text-xl font-staatliches text-stratos">Kaori</h3>
68+
<div className="flex items-center gap-2">
69+
<h3 className="text-xl font-staatliches text-stratos">Kaori</h3>
70+
<a
71+
href="https://www.linkedin.com/in/irena-hynkov%C3%A1-b81158277/"
72+
target="_blank"
73+
rel="noopener noreferrer"
74+
className="text-[#0077b5] hover:text-[#0077b5]/80 transition-colors"
75+
>
76+
<FaLinkedin className="w-5 h-5" />
77+
</a>
78+
</div>
4879
<p className="text-gray-600">
49-
#for all around prints and organizing that this idea came to life
80+
The talented designer who transformed our vision into a beautiful, intuitive interface. Her exceptional graphic design skills gave this project its visual identity.
5081
</p>
5182
</div>
5283
</div>
5384

5485
<div className="flex items-start gap-4">
5586
<div className="w-2 h-2 rounded-full bg-turquoise mt-2.5" />
5687
<div>
88+
<div className="flex items-center gap-2">
89+
<h3 className="text-xl font-staatliches text-stratos">Prokop Simek (A Personal Note)</h3>
90+
<a
91+
href="https://www.linkedin.com/in/prokopsimek/"
92+
target="_blank"
93+
rel="noopener noreferrer"
94+
className="text-[#0077b5] hover:text-[#0077b5]/80 transition-colors"
95+
>
96+
<FaLinkedin className="w-5 h-5" />
97+
</a>
98+
</div>
5799
<p className="text-gray-600">
58-
#Me, Prokop Simek, personally, thank you for bringing this idea to life through development and implementation
100+
I am deeply grateful to have worked with such talented individuals. Seeing this project come to life through development and implementation has been incredibly rewarding. Thank you all for making this possible.
59101
</p>
60102
</div>
61103
</div>

‎src/app/components/Navigation.tsx

Lines changed: 41 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,51 @@
11
'use client';
22

33
import Link from 'next/link';
4-
import DxHeroesLogo from './DxHeroesLogo';
4+
import { useRouter } from 'next/navigation';
5+
import DxHeroesLogo from '../components/DxHeroesLogo';
6+
7+
type NavigationProps = {
8+
showBack?: boolean;
9+
};
10+
11+
export default function Navigation({ showBack = true }: NavigationProps) {
12+
const router = useRouter();
513

6-
export default function Navigation() {
714
return (
8-
<nav className="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 py-4">
9-
<div className="max-w-7xl mx-auto px-4 flex items-center justify-between">
10-
<div className="flex items-center space-x-8">
11-
<Link href="/" className="text-gray-600 hover:text-gray-900 font-inter">
12-
Home
13-
</Link>
14-
<Link href="/topics" className="text-gray-600 hover:text-gray-900 font-inter">
15-
Topics
16-
</Link>
17-
<Link href="/about" className="text-gray-600 hover:text-gray-900 font-inter">
18-
About
15+
<div className="fixed bottom-0 left-0 right-0 bg-white border-t">
16+
<div className="mx-auto max-w-container px-4 py-4">
17+
<div className="flex justify-between items-center">
18+
<div className="flex gap-2">
19+
<Link
20+
href="/"
21+
className="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors text-sm sm:text-base font-inter"
22+
>
23+
Home
24+
</Link>
25+
26+
<Link
27+
href="/topics"
28+
className="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors text-sm sm:text-base font-inter"
29+
>
30+
Topics
31+
</Link>
32+
33+
{showBack && (
34+
<button
35+
type="button"
36+
onClick={() => router.back()}
37+
className="px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors text-sm sm:text-base font-inter"
38+
>
39+
Back
40+
</button>
41+
)}
42+
43+
</div>
44+
<Link href="https://dxheroes.io" target="_blank">
45+
<DxHeroesLogo className="h-8 w-auto text-stratos" />
1946
</Link>
2047
</div>
21-
<DxHeroesLogo className="w-32 h-8 text-stratos" />
2248
</div>
23-
</nav>
49+
</div>
2450
);
2551
}

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

Lines changed: 19 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,22 @@ import Link from 'next/link';
44
import Navigation from '../../components/Navigation';
55
import { difficulties } from '../../constants/topics';
66

7-
const difficultyColors = {
8-
beginner: 'bg-electric-violet',
9-
intermediate: 'bg-purple',
10-
advanced: 'bg-turquoise',
7+
const difficultyBgColors = {
8+
beginner: 'bg-electric-violet text-white',
9+
intermediate: 'bg-purple text-white',
10+
advanced: 'bg-turquoise text-purple',
11+
} as const;
12+
13+
const difficultyTextColors = {
14+
beginner: 'text-white',
15+
intermediate: 'text-white',
16+
advanced: 'text-purple',
17+
} as const;
18+
19+
const difficultyBorderColors = {
20+
beginner: 'border-white',
21+
intermediate: 'border-white',
22+
advanced: 'border-purple',
1123
} as const;
1224

1325
export default function DifficultyPage(props: { id: string, title: string, description: string[] }) {
@@ -36,16 +48,16 @@ export default function DifficultyPage(props: { id: string, title: string, descr
3648
<Link
3749
key={difficulty.level}
3850
href={`/topics/${id}/questions/${difficulty.level}`}
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`}
51+
className={`${difficultyBgColors[difficulty.level]} ${difficultyTextColors[difficulty.level]} group relative overflow-hidden 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`}
4052
>
4153
<div className="relative z-10">
4254
<div className="flex items-center justify-between mb-4">
4355
<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">
56+
<span className={`text-sm font-medium px-4 py-1 rounded-full border ${difficultyBorderColors[difficulty.level]}`}>
4557
{difficulty.level}
4658
</span>
4759
</div>
48-
<p className="text-lg sm:text-xl text-white/90 font-inter leading-relaxed">
60+
<p className={`text-lg sm:text-xl font-inter leading-relaxed ${difficultyTextColors[difficulty.level]}`}>
4961
{difficulty.description}
5062
</p>
5163
</div>

0 commit comments

Comments
 (0)