Add: Prominent 'Shop plain items' section to homepage
Added a standout section that highlights customers can buy plain items without personalization. Features: - Eye-catching orange gradient background - Clear messaging about skipping the design step - Direct link to plain items collection - Positioned between path choice and gallery sections
This commit is contained in:
@@ -84,7 +84,8 @@
|
||||
"Bash(git commit -m 'Fix: Route photo requests to design canvas instead of approval upload *)",
|
||||
"Bash(git commit -m 'Fix: Pass photo request ID instead of data URL *)",
|
||||
"Bash(git commit -m 'Feature: Add product selection when starting design from photo request *)",
|
||||
"Bash(git commit -m 'Refactor: Move start design server action to separate file *)"
|
||||
"Bash(git commit -m 'Refactor: Move start design server action to separate file *)",
|
||||
"Bash(git commit -m 'Add: Prominent '\\\\''Shop plain items'\\\\'' section to homepage *)"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
@@ -188,6 +188,41 @@ export default async function HomePage() {
|
||||
</Reveal>
|
||||
</section>
|
||||
|
||||
{/* Shop plain items — stand-out section */}
|
||||
<section className="mx-auto max-w-6xl px-6 py-16">
|
||||
<Reveal>
|
||||
<div className="relative overflow-hidden rounded-lg border-2 border-splash-orange bg-gradient-to-br from-splash-orange/5 to-splash-pink/5 p-12">
|
||||
<div className="absolute -right-20 -top-20 h-60 w-60 rounded-full bg-splash-orange opacity-10 blur-3xl" />
|
||||
<div className="absolute -bottom-10 -left-10 h-40 w-40 rounded-full bg-splash-pink opacity-10 blur-2xl" />
|
||||
|
||||
<div className="relative z-10">
|
||||
<p className="tag-label text-splash-orange">Skip the design step</p>
|
||||
<h2 className="mt-3 font-display text-4xl">Just want to buy plain items?</h2>
|
||||
<p className="mt-4 max-w-2xl text-base text-muted">
|
||||
Not everyone wants to personalize. We offer a range of plain, ready-to-wear items with no
|
||||
customization needed — perfect if you just love the style as-is. Pick a color, choose your size,
|
||||
and you're done. It's that simple.
|
||||
</p>
|
||||
|
||||
<div className="mt-8 flex flex-wrap gap-4">
|
||||
<Link
|
||||
href="/products"
|
||||
className="bg-splash-orange px-8 py-4 text-base font-medium text-paper transition-colors hover:bg-splash-orange/90"
|
||||
>
|
||||
Browse plain items
|
||||
</Link>
|
||||
<Link
|
||||
href="/#how-it-works"
|
||||
className="border-2 border-splash-orange px-8 py-4 text-base font-medium text-splash-orange transition-colors hover:bg-splash-orange/10"
|
||||
>
|
||||
How it works
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Reveal>
|
||||
</section>
|
||||
|
||||
{/* Gallery preview — completed work, prominent placement near the top. Always
|
||||
shown (with a "coming soon" state when empty) so it never disappears
|
||||
entirely — a link this prominent shouldn't come and go with photo count. */}
|
||||
|
||||
Reference in New Issue
Block a user