Skip to content

Reorder homepage elements on mobile for better CTA visibility #649

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
yamcodes merged 4 commits into from
Dec 27, 2025
Merged

Reorder homepage elements on mobile for better CTA visibility #649

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d4caad4
Initial plan
Copilot Dec 27, 2025
37c50dc
Make action buttons more visible on mobile by reordering with CSS
Copilot Dec 27, 2025
064ef99
Use cn() utility for cleaner className handling
Copilot Dec 27, 2025
d643c95
style: Adjust responsive padding, gap, and margins on home page compo…
yamcodes Dec 27, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions apps/www/app/(home)/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ export default function HomePage() {
{/* Top gradient overlay for dark mode - SVG version */}
<HeroGradientOverlay />

<div className="flex flex-col lg:flex-row items-center justify-center px-4 sm:px-6 lg:pl-12 lg:pr-6 max-w-screen-2xl mx-auto w-full gap-8 lg:gap-12 lg:mt-20">
<div className="flex flex-col lg:flex-row items-center justify-center px-4 sm:px-6 lg:pl-12 lg:pr-6 max-w-screen-2xl mx-auto w-full gap-4 md:gap-8 lg:gap-12 lg:mt-20">
<div className="flex flex-col items-center lg:items-start text-center lg:text-left lg:flex-[1.4] relative z-20 mt-12 w-full max-w-full">
<div className="lg:mb-6 mb-0">
<AnnouncementBadge new href="/docs/arkenv/coercion">
Expand All @@ -39,8 +39,8 @@ export default function HomePage() {
Environment variable validation from editor to runtime
</div>
</h1>
<CompatibilityRails />
<div className="flex flex-col sm:flex-row justify-center lg:justify-start my-4 gap-4 sm:mb-6 mb-16 w-full sm:w-auto sm:max-w-none">
<CompatibilityRails className="order-2 md:order-1" />
<div className="flex flex-col sm:flex-row justify-center lg:justify-start my-4 gap-4 sm:mb-6 mb-6 w-full sm:w-auto sm:max-w-none order-1 md:order-2">
<QuickstartButton />
<StarUsButton />
</div>
Expand Down
10 changes: 8 additions & 2 deletions apps/www/components/page/compatibility-rails.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import {
} from "@icons-pack/react-simple-icons";
import { Square } from "lucide-react";
import type { JSX } from "react";
import { cn } from "~/lib/utils";
import { ArkTypeIcon } from "../icons/arktype-icon";
import { JoiIcon } from "../icons/joi-icon";
import { TypiaIcon } from "../icons/typia-icon";
Expand Down Expand Up @@ -135,9 +136,14 @@ function MarqueeRow({
);
}

export function CompatibilityRails() {
export function CompatibilityRails({ className }: { className?: string }) {
return (
<div className="flex flex-col gap-3 w-full max-w-lg mx-auto lg:mx-0 py-6 pause-on-hover px-1 overflow-hidden">
<div
className={cn(
"flex flex-col gap-3 w-full max-w-lg mx-auto lg:mx-0 py-2 md:py-6 pause-on-hover px-1 overflow-hidden",
className,
)}
>
<MarqueeRow label="Works with" items={validators} />
<MarqueeRow label="Built for" items={platforms} reverse />
</div>
Expand Down
Loading