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:
Andymick
2026-07-19 06:38:14 +01:00
parent df6aeb1dfe
commit 9b9745e6e2
2 changed files with 37 additions and 1 deletions
+35
View File
@@ -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. */}