Skip to content

Commit b910d96

Browse files
reininkreinink
committed
Add course promo
1 parent 7e8da47 commit b910d96

File tree

5 files changed

+102
-43
lines changed

5 files changed

+102
-43
lines changed

‎src/app/(docs)/brand/layout.tsx

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import * as fs from "node:fs/promises";
22
import * as path from "node:path";
3-
import BookPromo from "@/components/book-promo";
43
import TableOfContents from "@/components/table-of-contents";
54
import { generateTableOfContentsFromMarkdown } from "../docs/api";
65
import type { Metadata } from "next";
@@ -48,7 +47,6 @@ export default async function DocPage({ children }: { children: React.ReactNode
4847
<div className="max-xl:hidden">
4948
<div className="sticky top-14 max-h-[calc(100svh-3.5rem)] overflow-x-hidden px-6 pt-10 pb-24">
5049
<TableOfContents tableOfContents={tableOfContents} />
51-
<BookPromo />
5250
</div>
5351
</div>
5452
</div>

‎src/app/(docs)/docs/[slug]/page.tsx

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
1-
import { notFound } from "next/navigation";
2-
import React from "react";
31
import Pagination from "@/components/pagination";
2+
import { RandomPromo } from "@/components/promos";
43
import TableOfContents from "@/components/table-of-contents";
5-
import { generateTableOfContents, getDocPageBySlug, getDocPageSlugs, getSectionAndTitleBySlug } from "../api";
6-
import BookPromo from "@/components/book-promo";
4+
import { notFound } from "next/navigation";
75
import { Metadata } from "next/types";
6+
import { generateTableOfContents, getDocPageBySlug, getDocPageSlugs, getSectionAndTitleBySlug } from "../api";
87

98
type Props = {
109
params: Promise<{
@@ -94,7 +93,7 @@ export default async function DocPage(props: Props) {
9493
<div className="max-xl:hidden">
9594
<div className="sticky top-14 max-h-[calc(100svh-3.5rem)] overflow-x-hidden px-6 pt-10 pb-24">
9695
<TableOfContents tableOfContents={tableOfContents} />
97-
<BookPromo />
96+
<RandomPromo />
9897
</div>
9998
</div>
10099
</div>

‎src/components/book-promo.tsx

Lines changed: 0 additions & 36 deletions
This file was deleted.

‎src/components/course-promo.jpg

198 KB
Loading

‎src/components/promos.tsx

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
"use client";
2+
3+
import Image from "next/image";
4+
import { useEffect, useState, type ReactElement } from "react";
5+
import bookPromo from "./book-promo.png";
6+
import coursePromo from "./course-promo.jpg";
7+
import LinkButton from "./home/link-button";
8+
9+
export function BookPromo() {
10+
return (
11+
<a href="https://www.refactoringui.com/?ref=sidebar" className="group">
12+
<div className="mt-12 flex flex-col items-center justify-center">
13+
<div className="relative origin-center -translate-x-3 rotate-6 p-6 duration-500 group-hover:rotate-0">
14+
<div className="absolute top-4 left-0 h-px w-full bg-[linear-gradient(to_right,_transparent_0%,_var(--gradient-bg)_9.27%,_var(--gradient-bg)_90.7%,_transparent_100%)] [--gradient-bg:var(--color-black)]/15 dark:[--gradient-bg:var(--color-white)]/10"></div>
15+
<div className="absolute top-0 left-4 h-full w-px bg-[linear-gradient(to_bottom,_transparent_0%,_var(--gradient-bg)_9.27%,_var(--gradient-bg)_90.7%,_transparent_100%)] [--gradient-bg:var(--color-black)]/15 dark:[--gradient-bg:var(--color-white)]/10"></div>
16+
<Image
17+
src={bookPromo}
18+
alt="Refactoring UI"
19+
width={128}
20+
height={171.2}
21+
className="shadow-[-5px_10px_15px_-3px_var(--shadow-color),_-5px_4px_6px_-4px_var(--shadow-color)] duration-500 [--shadow-color:var(--color-black)]/10 dark:[--shadow-color:var(--color-black)]"
22+
/>
23+
<div className="absolute top-0 right-4 h-full w-px bg-[linear-gradient(to_bottom,_transparent_0%,_var(--gradient-bg)_9.27%,_var(--gradient-bg)_90.7%,_transparent_100%)] [--gradient-bg:var(--color-black)]/15 dark:[--gradient-bg:var(--color-white)]/10"></div>
24+
<div className="absolute bottom-4 left-0 h-px w-full bg-[linear-gradient(to_right,_transparent_0%,_var(--gradient-bg)_9.27%,_var(--gradient-bg)_90.7%,_transparent_100%)] [--gradient-bg:var(--color-black)]/15 dark:[--gradient-bg:var(--color-white)]/10"></div>
25+
</div>
26+
</div>
27+
<p className="text-[0.815rem]/6 font-semibold text-sky-500 dark:text-sky-400">
28+
From the creators of Tailwind CSS
29+
</p>
30+
<p className="mt-1.5 text-[0.9375rem]/5 font-semibold text-gray-950 dark:text-white">
31+
Make your ideas look awesome, without relying on a designer.
32+
</p>
33+
<blockquote className="mt-6 border-l border-black/5 pl-4 text-gray-600 dark:border-white/10 dark:text-gray-400">
34+
<p className="text-[0.8125rem]/5 [hanging-punctuation:first_last]">
35+
“This is the survival kit I wish I had when I started building apps.”
36+
</p>
37+
<p className="mt-3 text-xs">Derrick Reimer, SavvyCal</p>
38+
</blockquote>
39+
</a>
40+
);
41+
}
42+
43+
export function CoursePromo() {
44+
return (
45+
<div className="group relative">
46+
<div className="mt-12 flex flex-col items-center justify-center">
47+
<div className="relative origin-center -translate-x-3 rotate-6 p-6 duration-500 group-hover:rotate-0">
48+
<div className="absolute top-4 left-0 h-px w-full bg-[linear-gradient(to_right,_transparent_0%,_var(--gradient-bg)_9.27%,_var(--gradient-bg)_90.7%,_transparent_100%)] [--gradient-bg:var(--color-black)]/15 dark:[--gradient-bg:var(--color-white)]/10"></div>
49+
<div className="absolute top-0 left-4 h-full w-px bg-[linear-gradient(to_bottom,_transparent_0%,_var(--gradient-bg)_9.27%,_var(--gradient-bg)_90.7%,_transparent_100%)] [--gradient-bg:var(--color-black)]/15 dark:[--gradient-bg:var(--color-white)]/10"></div>
50+
<Image
51+
src={coursePromo}
52+
alt="Build UIs that don’t suck — 5-day mini-course"
53+
width={192}
54+
height={108}
55+
className="shadow-[-5px_10px_15px_-3px_var(--shadow-color),_-5px_4px_6px_-4px_var(--shadow-color)] duration-500 [--shadow-color:var(--color-black)]/10 dark:[--shadow-color:var(--color-black)]"
56+
/>
57+
<div className="absolute top-0 right-4 h-full w-px bg-[linear-gradient(to_bottom,_transparent_0%,_var(--gradient-bg)_9.27%,_var(--gradient-bg)_90.7%,_transparent_100%)] [--gradient-bg:var(--color-black)]/15 dark:[--gradient-bg:var(--color-white)]/10"></div>
58+
<div className="absolute bottom-4 left-0 h-px w-full bg-[linear-gradient(to_right,_transparent_0%,_var(--gradient-bg)_9.27%,_var(--gradient-bg)_90.7%,_transparent_100%)] [--gradient-bg:var(--color-black)]/15 dark:[--gradient-bg:var(--color-white)]/10"></div>
59+
<div className="absolute inset-6 flex items-center justify-center">
60+
<div className="flex size-10 items-center justify-center rounded-full bg-white/30 outline -outline-offset-6 outline-white">
61+
<svg className="size-3" viewBox="0 0 17 17" fill="none">
62+
<path
63+
d="M15.6046 7.34153C15.7244 7.40665 15.8243 7.50204 15.8938 7.61779C15.9633 7.73354 16 7.86544 16 7.99978C16 8.13413 15.9633 8.26602 15.8938 8.38178C15.8243 8.49753 15.7244 8.59292 15.6046 8.65804L4.13974 14.9054C4.02291 14.969 3.89117 15.0016 3.75756 14.9999C3.62395 14.9983 3.4931 14.9624 3.37797 14.8959C3.26283 14.8294 3.16739 14.7346 3.10109 14.6208C3.0348 14.507 2.99995 14.3782 3 14.2472V1.7524C3 1.17843 3.62818 0.817196 4.13974 1.09615L15.6046 7.34153Z"
64+
fill="white"
65+
/>
66+
</svg>
67+
</div>
68+
</div>
69+
</div>
70+
</div>
71+
<p className="text-[0.815rem]/6 font-semibold text-sky-500 dark:text-sky-400">5-day mini-course</p>
72+
<p className="mt-1.5 text-[0.9375rem]/5 font-semibold text-gray-950 dark:text-white">
73+
Build UIs that don’t suck.
74+
</p>
75+
<p className="mt-6 text-[0.8125rem]/5 text-gray-600 dark:text-gray-400">
76+
Short, tactical video lessons from the creator of Tailwind CSS, delivered directly to your inbox every day for a
77+
week.
78+
</p>
79+
<p className="mt-4">
80+
<LinkButton href="/course">
81+
<span className="absolute inset-0" />
82+
Get the free course &rarr;
83+
</LinkButton>
84+
</p>
85+
</div>
86+
);
87+
}
88+
89+
export function RandomPromo() {
90+
const [PromoComponent, setPromoComponent] = useState<ReactElement | null>(null);
91+
92+
useEffect(() => {
93+
const random = Math.random();
94+
setPromoComponent(random < 0.5 ? <CoursePromo /> : <BookPromo />);
95+
}, []);
96+
97+
return PromoComponent;
98+
}

0 commit comments

Comments
 (0)