Design: Uplift homepage hero with real customer work and enhanced plain items section
- Replace 3 floating mockups with 2 customer work cards in hero section - Enhance plain items section with 2-column grid layout - Show real customer designs (Dad Bod, Cheers & Beers) instead of generic products - Add product preview grid alongside plain items CTA card - Cleaner, more authentic homepage that showcases customer creativity Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
This commit is contained in:
Andymick
co-authored by
Claude Haiku 4.5
Claude Haiku 4.5
parent
cd32f50847
commit
a105fdf660
@@ -89,7 +89,9 @@
|
||||
"Bash(git commit -m 'Feature: Royal Mail shipping integration with weight-based postage *)",
|
||||
"Bash(git commit -m 'Add: Weight field to product admin pages *)",
|
||||
"Bash(git commit -m 'Add: Shipping selector component and checkout integration *)",
|
||||
"Bash(node clear-pending-orders.js)"
|
||||
"Bash(node clear-pending-orders.js)",
|
||||
"mcp__visualize__read_me",
|
||||
"mcp__visualize__show_widget"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
+43
-25
@@ -104,26 +104,23 @@ export default async function HomePage() {
|
||||
</div>
|
||||
</Reveal>
|
||||
|
||||
<Reveal delayMs={150} className="relative mx-auto h-[380px] w-full max-w-[420px]">
|
||||
<div className="absolute inset-0 rounded-full brand-gradient opacity-40 blur-3xl" />
|
||||
<div className="absolute inset-8 rounded-full brand-gradient opacity-20 blur-2xl" />
|
||||
<div
|
||||
className="animate-float absolute left-0 top-6 h-40 w-40 -rotate-6 border-2 bg-surface p-3 shadow-md"
|
||||
style={{ borderColor: '#F5871F' }}
|
||||
>
|
||||
<ProductMockup mockup="tshirt" color="#F5871F" />
|
||||
<Reveal delayMs={150} className="flex gap-4">
|
||||
{/* Customer Work - Shirt 1 */}
|
||||
<div className="flex-1">
|
||||
<div className="border-2 border-line bg-gradient-to-br from-splash-coral/10 to-splash-coral/5 rounded-lg p-6 aspect-square flex flex-col items-center justify-center text-center">
|
||||
<p className="text-sm font-medium text-muted mb-2">Dad Bod Design</p>
|
||||
<p className="text-xs text-muted">Customer creation</p>
|
||||
</div>
|
||||
<p className="mt-3 text-xs text-muted text-center font-medium">Real customer work</p>
|
||||
</div>
|
||||
<div
|
||||
className="animate-float absolute right-2 top-0 h-36 w-36 rotate-6 border-2 bg-surface p-3 shadow-md"
|
||||
style={{ borderColor: '#1EA7E0', animationDelay: '1.5s' }}
|
||||
>
|
||||
<ProductMockup mockup="mug" color="#1EA7E0" />
|
||||
</div>
|
||||
<div
|
||||
className="animate-float absolute bottom-0 left-16 h-44 w-44 rotate-3 border-2 bg-surface p-3 shadow-md"
|
||||
style={{ borderColor: '#5B2C86', animationDelay: '3s' }}
|
||||
>
|
||||
<ProductMockup mockup="phonecase" color="#5B2C86" />
|
||||
|
||||
{/* Customer Work - Shirt 2 */}
|
||||
<div className="flex-1 translate-y-6">
|
||||
<div className="border-2 border-line bg-gradient-to-br from-splash-blue/10 to-splash-blue/5 rounded-lg p-6 aspect-square flex flex-col items-center justify-center text-center">
|
||||
<p className="text-sm font-medium text-muted mb-2">Cheers & Beers</p>
|
||||
<p className="text-xs text-muted">Customer creation</p>
|
||||
</div>
|
||||
<p className="mt-3 text-xs text-muted text-center font-medium">Real customer work</p>
|
||||
</div>
|
||||
</Reveal>
|
||||
</div>
|
||||
@@ -188,20 +185,20 @@ export default async function HomePage() {
|
||||
</Reveal>
|
||||
</section>
|
||||
|
||||
{/* Shop plain items — stand-out section */}
|
||||
{/* Shop plain items — stand-out section with product grid */}
|
||||
<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">
|
||||
<Reveal className="grid gap-8 md:grid-cols-2 md:items-center">
|
||||
{/* Left: Plain Items Card */}
|
||||
<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-8 md: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>
|
||||
<h2 className="mt-3 font-display text-3xl md: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.
|
||||
customization needed — perfect if you just love the style as-is.
|
||||
</p>
|
||||
|
||||
<div className="mt-8 flex flex-wrap gap-4">
|
||||
@@ -214,6 +211,27 @@ export default async function HomePage() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right: Product Grid */}
|
||||
{readyMadeCount > 0 && (
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
{readyMade.slice(0, 4).map((product) => (
|
||||
<Link
|
||||
key={product.id}
|
||||
href={`/products/${product.slug}`}
|
||||
className="group overflow-hidden border border-line bg-surface rounded-lg"
|
||||
>
|
||||
<div className="bg-surface-1 h-32 md:h-40 flex items-center justify-center text-muted text-sm">
|
||||
Product image
|
||||
</div>
|
||||
<div className="p-3 md:p-4">
|
||||
<p className="font-medium text-sm md:text-base">{product.name}</p>
|
||||
<p className="text-xs md:text-sm text-muted mt-1">£{(product.effectivePrice / 100).toFixed(2)}</p>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</Reveal>
|
||||
</section>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user