Skip to content

Commit 61da4f7

Browse files
jh3yjh3y
committed
feat: align more styling before form completion
1 parent 2ec4f72 commit 61da4f7

File tree

7 files changed

+577
-252
lines changed

7 files changed

+577
-252
lines changed

‎apps/craft-of-ui/src/app/layout.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,8 @@ const dmSerifText = DM_Serif_Text({
6363
weight: '400',
6464
})
6565

66+
console.info({ inter })
67+
6668
export default function RootLayout({
6769
children,
6870
}: {
@@ -74,7 +76,7 @@ export default function RootLayout({
7476
<AxiomWebVitals />
7577
<body
7678
id="layout"
77-
className={`relative ${inter.variable} ${dmSerifText.variable} antialised font-sans`}
79+
className={`antialised relative ${inter.variable} ${dmSerifText.variable} font-sans`}
7880
>
7981
<Toaster />
8082
<FeedbackInsert />

‎apps/craft-of-ui/src/app/page.tsx‎

Lines changed: 20 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -89,14 +89,14 @@ const Home = async (props: Props) => {
8989
withContainer
9090
withGrid
9191
>
92-
<div className="min-h-screen overflow-auto pb-16">
93-
<div className="mx-auto max-w-3xl px-4 pb-16 pt-16">
94-
<header className="text-gray-900 dark:text-gray-100">
95-
<h1 className="mb-4 flex items-center text-sm font-extralight text-gray-800 dark:text-gray-200">
92+
<div className="mask-content fixed inset-0 min-h-screen overflow-auto pb-[calc(var(--header-height)*1)] [--end:calc(2*var(--header-height))] [--start:var(--header-height)] lg:[--end:var(--header-height)] lg:[--start:0]">
93+
<div className="mx-auto w-[var(--content)] max-w-[calc(100vw-(2*var(--gutter)))] pb-[var(--header-height)] pt-[calc(2*var(--header-height))]">
94+
<header className="text-[canvasText] dark:text-gray-100">
95+
<h1 className="mb-4 flex items-center font-sans text-sm font-[200] text-gray-900 dark:text-gray-200">
9696
The Craft of UI — by&nbsp;
9797
<Link
9898
aria-label="Jhey Tompkins"
99-
className="flex items-center gap-x-2 text-gray-600 outline-red-500 transition-colors hover:text-red-500 dark:text-gray-300 dark:hover:text-red-400"
99+
className="flex items-center gap-x-2 text-gray-900 outline-red-500 transition-colors hover:text-red-500 dark:text-gray-300 dark:hover:text-red-400"
100100
href="https://twitter.com/intent/follow?screen_name=jh3yy"
101101
target="_blank"
102102
>
@@ -110,19 +110,17 @@ const Home = async (props: Props) => {
110110
/>
111111
</Link>
112112
</h1>
113-
<p className="mb-6 font-serif text-4xl leading-none sm:text-5xl md:text-6xl">
113+
<p className="text-fluid mb-6 font-serif leading-none [--font-level:4] [--font-size-min:20]">
114114
What if you could build{' '}
115115
<span className="text-red-500">anything</span>?
116116
</p>
117117
</header>
118118

119119
<main
120120
className={cn(
121-
'prose prose-lg dark:prose-invert',
122-
'[&>p:not(:has(+ul))]:mb-8 [&_p]:text-gray-600 [&_p]:dark:text-gray-300',
123-
'[&_ul]:mb-8 [&_ul]:mt-2 [&_ul]:flex [&_ul]:list-disc [&_ul]:flex-col [&_ul]:gap-y-2 [&_ul]:pl-6',
124-
'[&_h2]:font-serif [&_h2]:text-3xl [&_h2]:font-normal [&_h2]:leading-none',
125-
'[&_h2]:mb-4 [&_h2]:mt-20',
121+
'[&_p]:text-md leading-[1.5]',
122+
'[&_h2]:mb-4 [&_h2]:mt-20 [&_h2]:font-serif [&_h2]:font-[600] [&_h2]:leading-none [&_h2]:[--font-level:1.8] [&_h2]:[--font-size-min:20]',
123+
'[&_p:not(:has(+ul))]:mb-8 [&_ul]:mb-8 [&_ul]:mt-2 [&_ul]:flex [&_ul]:list-disc [&_ul]:flex-col [&_ul]:gap-y-2 [&_ul]:pl-6',
126124
)}
127125
>
128126
{firstPageResource && (
@@ -138,6 +136,17 @@ const Home = async (props: Props) => {
138136
</Link>
139137
)}
140138

139+
<p className="text-fluid text-balance font-[200] leading-[1.25] [--font-level:0.6]">
140+
Master the tools, mindset, and techniques behind crafting
141+
exceptional user interfaces with HTML, CSS, and JavaScript
142+
</p>
143+
144+
<PrimaryNewsletterCta
145+
title="You want to build exceptional user interfaces, I want to empower you to do so."
146+
byline="Join the waitlist to learn more and get course launch updates."
147+
actionLabel="Subscribe"
148+
/>
149+
141150
<article className="mx-auto w-full max-w-3xl pb-10">
142151
{page?.fields?.body ? (
143152
<>

‎apps/craft-of-ui/src/components/jhey-profile.tsx‎

Lines changed: 48 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,8 @@ import Link from 'next/link'
44

55
export function JheyProfile() {
66
return (
7-
<section className="not-prose mx-auto w-full max-w-3xl">
8-
<div className="mb-8 flex items-center gap-2 font-serif text-2xl font-bold leading-tight tracking-tight sm:text-3xl md:text-4xl">
9-
Hey – I'm Jhey Tompkins 🤙
10-
</div>
7+
<section className="not-prose mx-auto w-full">
8+
<h2 className="text-fluid font-serif">Hey – I'm Jhey Tompkins 🤙</h2>
119
<div className="clearfix">
1210
<Image
1311
className="float-none mb-4 mr-6 h-[180px] w-[180px] rounded-lg bg-gray-500 object-cover sm:float-left"
@@ -17,9 +15,13 @@ export function JheyProfile() {
1715
height={180}
1816
priority
1917
/>
20-
<div className="space-y-5 text-base text-gray-300">
18+
<div
19+
className="[&_p]:text-md leading-[1.5]
20+
[&_h2]:mb-4 [&_h2]:mt-20 [&_h2]:font-serif [&_h2]:font-[600] [&_h2]:leading-none [&_h2]:[--font-level:1.8] [&_h2]:[--font-size-min:20]
21+
[&_p:not(:has(+ul))]:mb-8 [&_ul]:mb-8 [&_ul]:mt-2 [&_ul]:flex [&_ul]:list-disc [&_ul]:flex-col [&_ul]:gap-y-2 [&_ul]:pl-6"
22+
>
2123
<p>
22-
I'm a web developer who loves making the web feel magical whilst
24+
I'm a design engineer who loves making the web feel magical whilst
2325
showing others how to do the same.
2426
</p>
2527
<p>
@@ -106,11 +108,13 @@ export function JheyProfile() {
106108
<div className="flex flex-col gap-y-2 pt-2">
107109
<div className="font-semibold">– Jhey, the Craft of UI</div>
108110
<svg
109-
className="sig w-48"
111+
aria-hidden="true"
112+
className="sig text-[canvasText]"
110113
viewBox="0 0 271 209"
111114
fill="none"
112115
xmlns="http://www.w3.org/2000/svg"
113116
>
117+
<title>Signature</title>
114118
<path
115119
d="M40.3725 26.8984C58.6558 41.1564 141.659 43.1867 128.248 5.48254C127.911 4.53766 127.085 2.2403 125.938 2.0095C124.714 1.76297 121.929 6.39448 121.627 6.82375C100.965 36.1863 95.2641 73.5992 74.5923 102.644C63.7045 117.942 14.7891 145.678 5.55986 113.481C-17.5939 32.705 78.7483 76.0672 105.741 67.4678C119.757 63.0021 125.297 50.6825 132.831 39.1622C135.218 35.5126 137.628 24.6153 140.043 28.2467C144.771 35.3581 119.642 69.8761 115.559 78.4692C110.959 88.1482 129.228 46.7461 136.796 54.3333C146.229 63.7897 128.236 82.7359 153.367 61.6804C157.634 58.1059 166.582 46.4029 161.033 46.8455C153.977 47.4085 141.565 67.0198 151.685 70.0327C161.531 72.9635 176.039 38.7196 174.012 48.7901C173.009 53.769 168.343 67.3695 175.978 68.9069C186.537 71.0328 191.574 35.8659 197.537 44.8359C240.356 109.24 81.7126 283.324 50.2184 167.261C25.2159 75.1229 240.563 89.2082 268.88 137.08"
116120
stroke="currentColor"
@@ -119,8 +123,8 @@ export function JheyProfile() {
119123
strokeLinecap="round"
120124
strokeLinejoin="round"
121125
pathLength="1"
122-
style={{}}
123-
/>
126+
style={{ '--path-speed': 0.831875 } as React.CSSProperties}
127+
></path>
124128
<path
125129
className="ear"
126130
d="M187.183 101.246C182.107 82.5407 155.739 77.9455 151.5 99"
@@ -130,8 +134,13 @@ export function JheyProfile() {
130134
strokeLinecap="round"
131135
strokeLinejoin="round"
132136
pathLength="1"
133-
style={{}}
134-
/>
137+
style={
138+
{
139+
'--path-speed': 0.03187,
140+
'--path-delay': 0.831875,
141+
} as React.CSSProperties
142+
}
143+
></path>
135144
<path
136145
className="ear"
137146
d="M117.998 100.704C117.998 91.1516 103.912 87.3662 96.5585 89.3717C84.7816 92.5836 80.6315 99.053 80.6315 110.505"
@@ -141,8 +150,13 @@ export function JheyProfile() {
141150
strokeLinecap="round"
142151
strokeLinejoin="round"
143152
pathLength="1"
144-
style={{}}
145-
/>
153+
style={
154+
{
155+
'--path-speed': 0.035625,
156+
'--path-delay': 0.86375,
157+
} as React.CSSProperties
158+
}
159+
></path>
146160
<path
147161
className="eye"
148162
d="M170.025 108.347C168.627 105.551 162.781 110.631 165.494 114.577C168.207 118.523 173.936 114.091 171.643 109.965C171.035 108.871 168.547 107.832 167.355 108.428"
@@ -152,8 +166,13 @@ export function JheyProfile() {
152166
strokeLinecap="round"
153167
strokeLinejoin="round"
154168
pathLength="1"
155-
style={{}}
156-
/>
169+
style={
170+
{
171+
'--path-speed': 0.0175,
172+
'--path-delay': 0.899375,
173+
} as React.CSSProperties
174+
}
175+
></path>
157176
<path
158177
className="eye"
159178
d="M102.952 112.797C97.2672 112.797 96.7371 120.527 102.224 119.917C108.363 119.235 105.409 110.012 100.363 113.04"
@@ -163,8 +182,13 @@ export function JheyProfile() {
163182
strokeLinecap="round"
164183
strokeLinejoin="round"
165184
pathLength="1"
166-
style={{}}
167-
/>
185+
style={
186+
{
187+
'--path-speed': 0.01625,
188+
'--path-delay': 0.916875,
189+
} as React.CSSProperties
190+
}
191+
></path>
168192
<path
169193
className="nose"
170194
d="M144.745 123.82C146.652 122.562 141.479 121.621 140.561 121.402C136.485 120.429 124.736 118.793 124.42 125.721C123.695 141.628 160.767 131.457 140.492 121.735"
@@ -174,8 +198,13 @@ export function JheyProfile() {
174198
strokeLinecap="round"
175199
strokeLinejoin="round"
176200
pathLength="1"
177-
style={{}}
178-
/>
201+
style={
202+
{
203+
'--path-speed': 0.04,
204+
'--path-delay': 0.933125,
205+
} as React.CSSProperties
206+
}
207+
></path>
179208
</svg>
180209
</div>
181210
</section>

‎apps/craft-of-ui/src/components/primary-newsletter-cta.tsx‎

Lines changed: 31 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -94,81 +94,40 @@ export const PrimaryNewsletterCta: React.FC<
9494
aria-label="Newsletter sign-up"
9595
className={cn('', className)}
9696
>
97-
{children ? (
98-
children
99-
) : (
100-
<div
101-
className={cn(
102-
'relative z-10 flex max-w-3xl flex-col items-center justify-center pb-5 pt-10 sm:pb-10',
103-
{
104-
'opacity-85 blur-sm': subscriber && shouldHideTitleWhenSubscribed,
105-
},
106-
)}
107-
>
108-
{withImage && (
109-
<CldImage
110-
src="https://res.cloudinary.com/epic-web/image/upload/v1744279600/epicdev.ai/beacon_2x.png"
111-
width={281 * 1.2}
112-
height={206 * 1.2}
113-
alt=""
114-
aria-hidden="true"
115-
className="mx-auto mb-5"
116-
/>
117-
)}
118-
<h2 className="sm:fluid-2xl fluid-xl text-balance text-center font-bold">
119-
{title}
120-
</h2>
121-
<h3 className="text-balance pt-5 text-center font-sans text-base font-normal opacity-90 sm:text-lg lg:text-xl">
122-
{byline}
123-
</h3>
124-
</div>
125-
)}
126-
127-
<div className="relative flex w-full items-center justify-center py-5">
128-
{subscriber && (
129-
<div className="absolute z-10 flex flex-col text-center">
130-
<p className="font-semibold">
131-
{subscribedTitle || "You're subscribed, thanks!"}
132-
</p>
133-
{resource && (
134-
<p className="[&_a]:text-primary text-center font-sans font-normal">
135-
{subscribedSubtitle ||
136-
(session?.user
137-
? common['newsletter-subscribed-logged-in']({
138-
resource,
139-
})
140-
: common['newsletter-subscribed-logged-out']({
141-
resource,
142-
}))}
143-
</p>
144-
)}
145-
</div>
146-
)}
147-
<div
148-
className={cn('flex w-full flex-col items-center', {
149-
'pointer-events-none select-none opacity-75 blur-sm transition ease-in-out':
150-
subscriber && !formId,
151-
})}
152-
>
153-
<SubscribeToConvertkitForm
154-
onSuccess={onSuccess ? onSuccess : handleOnSuccess}
155-
actionLabel={actionLabel}
156-
formId={formId}
157-
className="[&_input]:border-foreground/40 relative z-10 [&_input]:h-16"
158-
onEmailFocus={handleEmailFocus}
159-
onEmailBlur={handleEmailBlur}
160-
showMascot={showMascot}
161-
/>
162-
{!formId && (
163-
<p
164-
data-nospam=""
165-
className="text-muted-foreground inline-flex items-center pt-8 text-xs opacity-75 sm:text-sm"
166-
>
167-
<ShieldCheckIcon className="mr-2 h-4 w-4" /> I respect your
168-
privacy. Unsubscribe at any time.
97+
{subscriber && (
98+
<div className="absolute z-10 flex flex-col text-center">
99+
<p className="font-semibold">
100+
{subscribedTitle || "You're subscribed, thanks!"}
101+
</p>
102+
{resource && (
103+
<p className="[&_a]:text-primary text-center font-sans font-normal">
104+
{subscribedSubtitle ||
105+
(session?.user
106+
? common['newsletter-subscribed-logged-in']({
107+
resource,
108+
})
109+
: common['newsletter-subscribed-logged-out']({
110+
resource,
111+
}))}
169112
</p>
170113
)}
171114
</div>
115+
)}
116+
<div
117+
className={cn('flex w-full flex-col items-center', {
118+
'pointer-events-none select-none opacity-75 blur-sm transition ease-in-out':
119+
subscriber && !formId,
120+
})}
121+
>
122+
<SubscribeToConvertkitForm
123+
onSuccess={onSuccess ? onSuccess : handleOnSuccess}
124+
actionLabel={actionLabel}
125+
formId={formId}
126+
className="[&_input]:border-foreground/40 relative z-10 w-full [&_input]:flex-1"
127+
onEmailFocus={handleEmailFocus}
128+
onEmailBlur={handleEmailBlur}
129+
showMascot={showMascot}
130+
/>
172131
</div>
173132
</section>
174133
)

0 commit comments

Comments
 (0)