Skip to content

Commit 1eebb8a

Browse files
wimpywarlordclaude
andcommitted
Fix mobile Safari white bottom issue and add landing page videos
- Replace min-h-screen with min-h-dvh to fix white space on iOS Safari - Add dynamic viewport height to background gradient and content container - Add dark and light mode landing page video examples to taste blog post 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
1 parent 61c9a7a commit 1eebb8a

File tree

4 files changed

+37
-3
lines changed

4 files changed

+37
-3
lines changed
1.84 MB
Binary file not shown.
1.75 MB
Binary file not shown.

src/app/page.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,10 @@ export default function Home() {
1616
};
1717

1818
return (
19-
<div className="min-h-screen w-full bg-white relative">
19+
<div className="min-h-dvh w-full bg-white relative">
2020
{/* Primary Color Glow Background */}
2121
<div
22-
className="absolute inset-0 z-0"
22+
className="absolute inset-0 min-h-dvh z-0"
2323
style={{
2424
backgroundImage: `
2525
radial-gradient(125% 125% at 50% 10%, #ffffff 40%, #FF8A50 100%)
@@ -29,7 +29,7 @@ export default function Home() {
2929
/>
3030

3131
{/* Content Container */}
32-
<div className="relative z-10 container mx-auto px-3 sm:px-4 lg:px-6 min-h-screen flex items-center">
32+
<div className="relative z-10 container mx-auto px-3 sm:px-4 lg:px-6 min-h-dvh flex items-center">
3333
<div className="max-w-2xl mx-auto py-8">
3434
<div className="space-y-4 sm:space-y-5">
3535
{/* Header */}

src/components/blog-posts/taste.tsx

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -208,6 +208,40 @@ export function Taste() {
208208
Study these examples of exceptional landing page design to refine your
209209
own taste:
210210
</p>
211+
212+
<div className="my-6 space-y-4">
213+
<div>
214+
<h3 className="text-lg font-semibold mb-3">Dark Mode Landing Page</h3>
215+
<video
216+
controls
217+
loop
218+
autoPlay
219+
muted
220+
className="w-full max-w-2xl rounded-lg mx-auto"
221+
>
222+
<source src="/blog/taste/landing_page_dark.mp4" type="video/mp4" />
223+
Your browser does not support the video tag.
224+
</video>
225+
</div>
226+
227+
<div>
228+
<h3 className="text-lg font-semibold mb-3">Light Mode Landing Page</h3>
229+
<video
230+
controls
231+
loop
232+
autoPlay
233+
muted
234+
className="w-full max-w-2xl rounded-lg mx-auto"
235+
>
236+
<source src="/blog/taste/landing_page_light.mp4" type="video/mp4" />
237+
Your browser does not support the video tag.
238+
</video>
239+
</div>
240+
</div>
241+
242+
<p className="mt-6">
243+
More curated landing page resources:
244+
</p>
211245
<ul className="space-y-2">
212246
<li>
213247
<a

0 commit comments

Comments
 (0)