Skip to content

Commit 3552b36

Browse files
adamwathanadamwathan
committed
Finish pre-launch course page
1 parent 7948fe0 commit 3552b36

File tree

3 files changed

+62
-71
lines changed

3 files changed

+62
-71
lines changed

‎src/app/course/confirmed/page.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,8 +31,7 @@ export default async function Subscribed() {
3131
</div>
3232
<div className="mt-4 border-y border-black/5 p-2 max-md:border-b-0 max-sm:px-4 dark:border-white/10">
3333
<p className="max-w-xl text-lg/7 font-medium text-pretty text-gray-500 max-sm:text-center dark:text-gray-400">
34-
We'll be in touch soon with more details on the course. Stay tuned for sneak peaks, free chapters and
35-
early access.
34+
Stay tuned for sneak peaks, early video previews, and behind-the-scenes updates soon.
3635
</p>
3736
</div>
3837
</div>

‎src/app/course/page.tsx‎

Lines changed: 39 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -83,12 +83,12 @@ export default async function Course() {
8383
By the creator of Tailwind CSS
8484
</p>
8585
<h1 className="mt-2 text-6xl tracking-tighter text-balance text-gray-900 md:text-7xl lg:text-8xl dark:text-white">
86-
Tailwind CSS by Example
86+
Tailwind CSS by Example.
8787
</h1>
8888
</div>
8989
<div className="mt-8 border-t border-black/5 p-2 max-md:border-y max-md:px-4 dark:border-white/10">
9090
<p className="text-sm/6 text-gray-600 dark:text-gray-400">
91-
Join the waitlist for early video previews and behind-the-scenes updates.
91+
Join the waitlist for early previews and behind-the-scenes updates.
9292
</p>
9393
<div className="relative mt-2 max-w-md">
9494
<SignUpForm />
@@ -104,36 +104,43 @@ export default async function Course() {
104104
</div>
105105
<div className="prose grid max-w-2xl border-black/5 p-2 max-md:mt-10 max-md:border-t max-md:px-4 md:col-span-2 md:col-start-2 dark:border-white/10">
106106
<p className="text-lg/7">
107-
Learn how the creator of Tailwind CSS uses it to build beautiful, robust user interfaces that are a joy to
107+
Learn how the creator of Tailwind CSS rapidly builds beautiful, robust user interfaces that are a joy to
108108
maintain.
109109
</p>
110-
{/*<p className="text-lg/7">
111-
Go behind the scenes with the creator of Tailwind CSS and see exactly how it's used to build fast,
112-
beautiful, and maintainable interfaces.
113-
</p>*/}
114110
<p className="text-sm/7">
115-
In this course, you'll watch complete UIs come together step by step. Every decision is explained along the
116-
way—why it's made, what the trade-offs are, and the best practices that keep projects clean and scalable.
111+
In this course, you'll watch <strong>complete UIs come together step-by-step</strong>, with every decision
112+
and trade-off explained along the way. No simplified examples, just <strong>real-world designs</strong> with
113+
real-world challenges like the things you work on every day.
117114
</p>
118-
<h3 className="text-xl/7 font-medium tracking-tighter">Why this course?</h3>
115+
<h3 className="text-xl/7 font-medium tracking-tighter">What you'll learn</h3>
119116
<p className="text-sm/7">
120-
Most Tailwind tutorials make it look easy. Drop a few classes on a button, add{" "}
121-
<code className="text-xs">hover:bg-blue-500</code>, and you're done.
117+
We'll speedrun the fundamentals to make sure you know your way around the framework, but after that it's all
118+
about turning <strong>complex, modern UI designs into bullet-proof, maintainable code</strong>.
122119
</p>
123-
<p className="text-sm/7">But when you try to build something real, the questions start piling up:</p>
124-
<ul className="text-sm/7">
125-
<li className="italic">How do I keep layouts consistent across dozens of pages?</li>
126-
<li className="italic">What's the best way to organize code so it stays maintainable?</li>
127-
<li className="italic">Should I extract components, or just keep everything inline?</li>
128-
<li className="italic">How do I avoid the "giant unreadable class string" problem?</li>
129-
<li className="italic">Am I even using Tailwind the way it was intended?</li>
120+
<p className="text-sm/7">We'll dig in to topics like:</p>
121+
<ul>
122+
<li>
123+
<strong>Breaking down designs into composable pieces</strong> that avoid coupling and duplication
124+
</li>
125+
<li>
126+
Approaching layout and spacing in a way that makes things <strong>resilient to unexpected content</strong>
127+
</li>
128+
<li>
129+
<strong>Using modern CSS features</strong> to reduce the need for complex JavaScript
130+
</li>
131+
<li>
132+
Handling dynamic, database-driven styles in <strong>user-themeable applications</strong>
133+
</li>
134+
<li>
135+
When to write <strong>custom CSS</strong> and how to approach it
136+
</li>
137+
<li>
138+
<strong>How to design component APIs</strong> when using utility-first CSS
139+
</li>
130140
</ul>
131141
<p className="text-sm/7">
132-
Simple examples are fine for learning the basics, but they don't prepare you for building a real product
133-
that's going to live for years.
134-
</p>
135-
<p className="text-sm/7">
136-
This course is where those questions finally get answered — straight from the person who built Tailwind CSS.
142+
And tons more, over the course of building a bunch of expertly designed, custom interfaces from complete
143+
scratch.
137144
</p>
138145
</div>
139146
<GridContainer className="mt-10 grid grid-cols-2 gap-2 md:col-span-3 md:grid-cols-3 md:gap-x-6 lg:gap-x-12">
@@ -143,51 +150,22 @@ export default async function Course() {
143150
<ImageGrid images={[hero_example_01, hero_example_02, hero_example_03]} />
144151
</GridContainer>
145152
<div className="prose mt-10 grid max-w-2xl p-2 max-md:px-4 md:col-span-2 md:col-start-2">
146-
<h3 className="text-xl/7 font-medium tracking-tighter">What you'll learn</h3>
147-
<p className="text-sm/7">
148-
This course isn't a checklist of framework features. It's a hands-on series where everything is taught in
149-
the context of building real user interfaces — the way Tailwind was designed to be used.
150-
</p>
151-
<p className="text-sm/7">Along the way, you'll pick up things like:</p>
152-
<ul>
153-
<li>How to think in utility classes instead of writing custom CSS</li>
154-
<li>Practical techniques for handling states (hover, focus, active) without clutter</li>
155-
<li>Responsive layout patterns that actually scale</li>
156-
<li>Strategies for customizing themes without creating maintenance headaches</li>
157-
<li>Proven approaches for structuring components and pages that stay maintainable as projects grow</li>
158-
<li>Workflows, shortcuts, and trade-offs that only come from building with Tailwind at scale</li>
159-
</ul>
160-
<p className="text-sm/7">
161-
By the end, you'll not only know <em>what</em> to do with Tailwind, but{" "}
162-
<em>how the person who created it</em> approaches real-world projects.
163-
</p>
164-
<h3 className="text-xl/7 font-medium tracking-tighter">Who it's for</h3>
165153
<p className="text-sm/7">
166-
This course is for anyone who wants to use Tailwind more confidently and effectively.
167-
</p>
168-
<ul className="text-sm/7">
169-
<li>
170-
<strong>If you're new to Tailwind:</strong> You'll get a clear, practical foundation that goes beyond the
171-
docs and shows you how to actually ship projects.
172-
</li>
173-
<li>
174-
<strong>If you're already experienced:</strong> You'll see how the creator of Tailwind uses it in
175-
practice, picking up patterns, workflows, and best practices you won't find anywhere else.
176-
</li>
177-
</ul>
178-
<p className="text-sm/7">
179-
Wherever you are in your Tailwind journey, you'll walk away with the confidence that you're building UIs the
180-
right way.
154+
Sign up for the waitlist to get early preview videos and behind-the-scenes updates as the course comes
155+
together.
181156
</p>
182157
<div className="not-prose relative mt-10 max-w-md">
183158
<SignUpForm />
184159
</div>
185160
<p className="mt-10 text-sm/7">
186-
Sign up for the waitlist to get early access, free sample lessons, and behind-the-scenes updates as the
187-
course comes together.
161+
Wherever you are in your Tailwind journey, after this course you'll walk away with the confidence that
162+
you're building UIs the right way.
188163
</p>
164+
</div>
165+
<div className="mt-10 grid max-w-2xl p-2 max-md:px-4 md:col-span-2 md:col-start-2">
189166
<Signature className="w-36 fill-gray-900 dark:fill-gray-200" />
190-
<p className="text-sm/7 font-semibold">– Adam Wathan, creator of Tailwind CSS</p>
167+
<p className="text-sm/6 font-semibold">Adam Wathan</p>
168+
<p className="text-sm/6 text-gray-700 dark:text-gray-400">Creator of Tailwind CSS</p>
191169
</div>
192170
</GridContainer>
193171
</div>

‎src/components/docs-sidebar.tsx‎

Lines changed: 22 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -90,20 +90,17 @@ function TopNav() {
9090
</TopNavLink>
9191
</li>
9292
<li className="flex items-center gap-3">
93-
<TopNavLink href="/sponsor#insiders">
93+
<TopNavLink href="/course">
9494
<svg viewBox="0 0 16 16" fill="none">
95+
<path data-highlight d="M8 2 1 6l7 4 7-4-7-4Z" />
9596
<path
9697
data-outline
97-
d="M5.5 4.5h-3a2 2 0 00-2 2v4c0 1.1.9 2 2 2h1v3l3-3h2a2 2 0 002-2v-1m0 0l2 2v-3h1a2 2 0 002-2v-4a2 2 0 00-2-2h-6a2 2 0 00-2 2v4c0 1.1.9 2 2 2h2l1 1z"
98-
strokeLinejoin="round"
99-
/>
100-
<path
101-
data-highlight
102-
d="M13.5 1c.83 0 1.5.67 1.5 1.5v4c0 .83-.67 1.5-1.5 1.5h-1a.5.5 0 00-.5.5v1.8L9.85 8.14A.5.5 0 009.5 8h-2A1.5 1.5 0 016 6.5v-4C6 1.67 6.67 1 7.5 1h6z"
98+
strokeLinecap="round"
99+
d="M3.5 7.429V13A7.466 7.466 0 0 0 8 14.5a7.466 7.466 0 0 0 4.5-1.5V7.43m-9 0L8 10l4.5-2.571m-9 0-2-1.143m11 1.143L15 6 8 2 1 6l.5.286m0 5.214V6.286"
103100
/>
104101
</svg>
105102

106-
<span>Community</span>
103+
<span>Course</span>
107104
<span className="relative px-1.5 font-mono text-[0.625rem]/[1.125rem] font-medium tracking-widest text-sky-800 uppercase dark:text-sky-300">
108105
<span className="absolute inset-0 border border-dashed border-sky-300/60 bg-sky-400/10 group-hover:bg-sky-400/15 dark:border-sky-300/30" />
109106
New
@@ -142,6 +139,23 @@ function TopNav() {
142139
</span>
143140
</TopNavLink>
144141
</li>
142+
<li className="flex items-center gap-3">
143+
<TopNavLink href="/sponsor#insiders">
144+
<svg viewBox="0 0 16 16" fill="none">
145+
<path
146+
data-outline
147+
d="M5.5 4.5h-3a2 2 0 00-2 2v4c0 1.1.9 2 2 2h1v3l3-3h2a2 2 0 002-2v-1m0 0l2 2v-3h1a2 2 0 002-2v-4a2 2 0 00-2-2h-6a2 2 0 00-2 2v4c0 1.1.9 2 2 2h2l1 1z"
148+
strokeLinejoin="round"
149+
/>
150+
<path
151+
data-highlight
152+
d="M13.5 1c.83 0 1.5.67 1.5 1.5v4c0 .83-.67 1.5-1.5 1.5h-1a.5.5 0 00-.5.5v1.8L9.85 8.14A.5.5 0 009.5 8h-2A1.5 1.5 0 016 6.5v-4C6 1.67 6.67 1 7.5 1h6z"
153+
/>
154+
</svg>
155+
156+
<span>Community</span>
157+
</TopNavLink>
158+
</li>
145159
</ul>
146160
);
147161
}

0 commit comments

Comments
 (0)