Skip to content

Commit e69136a

Browse files
sateipel11sateipel11
committed
Scroll-style tutorial page
1 parent b3801e5 commit e69136a

File tree

1 file changed

+75
-38
lines changed

1 file changed

+75
-38
lines changed

‎src/app/tutorial-hello-world/page.tsx‎

Lines changed: 75 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -2,102 +2,139 @@
22

33
import BackToDashBoardLink from "@/components/back-to-dashboard-link";
44
import YouTube from "react-youtube";
5+
import { Cinzel } from 'next/font/google';
6+
7+
const cinzel = Cinzel({
8+
subsets: ["latin"],
9+
weight: ["400", "700"],
10+
});
11+
12+
// body text (Times New Roman= more readable)
13+
const bodyFontClass = "font-serif text-amber-950";
14+
// titles (Cinzel font)
15+
const cinzelTitleClass = cinzel.className;
516

617
export default function TutorialHelloWorld() {
718
return (
8-
<div className="min-h-screen bg-gray-50 p-8">
9-
<BackToDashBoardLink></BackToDashBoardLink>
19+
// Background of scroll
20+
<div
21+
className="min-h-screen p-4 md:p-12"
22+
style={{
23+
backgroundImage: "url('/geminiblurred.png')",
24+
backgroundSize: 'cover',
25+
backgroundPosition: 'center',
26+
backgroundColor: '#fef3c7',
27+
}}
28+
>
29+
<div
30+
className="inline-block p-4"
31+
style={{ zIndex: 10 }}
32+
>
33+
<BackToDashBoardLink />
34+
</div>
1035

11-
<article className="max-w-5xl mx-auto bg-white p-6 md:p-10 rounded-lg shadow-md space-y-6">
12-
{/* Quest Title */}
13-
<h1 className="text-3xl md:text-4xl font-bold text-indigo-700 border-b pb-2 mb-6">
14-
Quest: The Oracle&apos;s First Greeting - Whispering &quot;Hello World&quot;
36+
{/* "scroll"*/}
37+
<article className={`max-w-4xl mx-auto bg-amber-100 p-8 md:p-12 shadow-2xl shadow-amber-950/70 space-y-8
38+
${bodyFontClass} border border-amber-800 transform rotate-[-0.5deg]
39+
rounded-t-[4rem] rounded-b-lg`}>
40+
41+
{/* title*/}
42+
<h1 className={`text-4xl md:text-5xl font-bold ${cinzelTitleClass}
43+
border-b-4 border-amber-900 pb-4 mb-8 text-center uppercase`}>
44+
Quest: The Oracle&apos;s First Greeting
1545
</h1>
16-
{/* Flavor Text*/}
17-
<p className="text-lg italic text-gray-600">
46+
47+
<p className="text-xl italic text-amber-900">
1848
Welcome, brave coder! Your journey into the mystical lands of programming begins now.
1949
Before you can conjure complex spells or build mighty digital fortresses, every adventurer
2050
must learn the first incantation, the universal greeting recognized across all realms:{" "}
21-
<strong className="font-semibold text-indigo-600">&quot;Hello World&quot;</strong>. This
51+
<strong className="font-extrabold text-amber-950">&quot;Hello World&quot;</strong>. This
2252
simple phrase is your key to unlocking the power of code.
2353
</p>
24-
<p className="text-gray-700">
54+
<p className="text-lg">
2555
This quest will guide you through understanding and wielding this fundamental magic.
2656
</p>
2757

28-
<hr className="my-6" />
29-
{/* Section 1 */}
30-
<section className="space-y-3">
31-
<h2 className="text-2xl font-semibold text-gray-800">
58+
<hr className="my-8 border-amber-900/50" />
59+
60+
{/* section*/}
61+
<section className="space-y-4">
62+
<h2 className={`text-3xl font-semibold ${cinzelTitleClass}`}>
3263
What is this &quot;Hello World&quot; Sorcery?
3364
</h2>
34-
<p className="text-gray-700">
65+
<p className="text-lg">
3566
In the ancient scrolls of programming, &quot;Hello World&quot; is the traditional first
3667
spell learned. What does it do? It simply commands the machine - your loyal golem - to
3768
display the message{" "}
38-
<code className="bg-gray-100 px-1 rounded text-indigo-700">
69+
<code className="bg-amber-200 px-1 rounded text-amber-950 font-mono border border-amber-800">
3970
&quot;Hello World!&quot;
4071
</code>{" "}
4172
on the screen.
4273
</p>
43-
<p className="text-gray-700">
74+
<p className="text-lg">
4475
Think of it like teaching a parrot its first words. You&apos;re not asking it to recite
4576
poetry yet, just to say &quot;Hello!&quot; It&apos;s the basic proof that you can
4677
communicate your intentions to the machine and make it respond.
4778
</p>
4879
</section>
4980

50-
<hr className="my-6" />
51-
{/* Section 2 */}
52-
<section className="space-y-3">
53-
<h2 className="text-2xl font-semibold text-gray-800">Why This First Greeting Matters</h2>
54-
<p className="text-gray-700">Why start with something so simple?</p>
55-
<ul className="list-disc list-inside space-y-2 text-gray-700 pl-4">
81+
<hr className="my-8 border-amber-900/50" />
82+
83+
{/* section */}
84+
<section className="space-y-4">
85+
<h2 className={`text-3xl font-semibold ${cinzelTitleClass}`}>
86+
Why This First Greeting Matters
87+
</h2>
88+
<p className="text-lg">Why start with something so simple?</p>
89+
<ul className="list-disc list-inside space-y-3 text-lg pl-4">
5690
<li>
57-
<strong className="font-semibold">It&apos;s Tradition:</strong> Like a knight
91+
<strong className="font-semibold text-amber-950">It&apos;s Tradition:</strong> Like a knight
5892
receiving their first sword, programmers worldwide start here. It connects you to
5993
generations of coders before you!
6094
</li>
6195
<li>
62-
<strong className="font-semibold">It&apos;s a Test:</strong> Successfully making the
96+
<strong className="font-semibold text-amber-950">It&apos;s a Test:</strong> Successfully making the
6397
machine say &quot;Hello World&quot; proves your basic setup is working. Your coding
6498
environment, the language you&apos;re using - they&apos;re all aligned and ready for
6599
more complex commands. It&apos;s like checking if your magic wand sparks before trying
66100
to levitate a mountain.
67101
</li>
68102
<li>
69-
<strong className="font-semibold">It&apos;s Confidence:</strong> Seeing your very
103+
<strong className="font-semibold text-amber-950">It&apos;s Confidence:</strong> Seeing your very
70104
first command come to life, even a simple one, is a powerful boost! It&apos;s the
71105
first step on your epic journey.
72106
</li>
73107
</ul>
74108
</section>
75-
<hr className="my-6" />
76-
{/* Section 3 */}
77-
<section className="space-y-3">
78-
<h2 className="text-2xl font-semibold text-gray-800">
109+
110+
<hr className="my-8 border-amber-900/50" />
111+
112+
{/* section*/}
113+
<section className="space-y-4">
114+
<h2 className={`text-3xl font-semibold ${cinzelTitleClass}`}>
79115
Visualizing the Incantation (Conceptual Example)
80116
</h2>
81-
<p className="text-gray-700">
117+
<p className="text-lg">
82118
Imagine you have a magical scroll (your program). To perform the &quot;Hello World&quot;
83119
greeting, you&apos;d write an instruction similar to this:
84120
</p>
85-
<pre className="bg-gray-100 p-4 rounded-md font-mono text-sm text-gray-800 overflow-x-auto">
121+
<pre className="bg-amber-200 p-6 rounded-md font-mono text-sm text-amber-950 border-2 border-amber-800/50 overflow-x-auto shadow-inner shadow-amber-900/30">
86122
<code>{`// Command the Oracle (or Screen) to speak:\nDisplay: "Hello World!"`}</code>
87123
</pre>
88-
<p className="text-gray-700">
124+
<p className="text-lg">
89125
Different programming languages (spellbooks) have slightly different words for the
90126
&apos;Display&apos; command (like{" "}
91-
<code className="bg-gray-100 px-1 rounded text-indigo-700">print</code>,{" "}
92-
<code className="bg-gray-100 px-1 rounded text-indigo-700">console.log</code>,{" "}
93-
<code className="bg-gray-100 px-1 rounded text-indigo-700">echo</code>), but the core
127+
<code className="bg-amber-200 px-1 rounded text-amber-950 font-mono border border-amber-800">print</code>,{" "}
128+
<code className="bg-amber-200 px-1 rounded text-amber-950 font-mono border border-amber-800">console.log</code>,{" "}
129+
<code className="bg-amber-200 px-1 rounded text-amber-950 font-mono border border-amber-800">echo</code>), but the core
94130
idea is the same: tell the machine to show those exact words.
95131
</p>
96132
</section>
97-
<hr className="my-6" />
133+
134+
<hr className="my-8 border-amber-900/50" />
98135

99136
<YouTube videoId="hp4pYFASTrc"></YouTube>
100137
</article>
101138
</div>
102139
);
103-
}
140+
}

0 commit comments

Comments
 (0)