David/Wfdash-OnlineShop
1
0
Fork 0
mirror of https://gitlab.com/davidels1986/ore-cart-checkout.git synced 2026-10-30 02:59:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Remove top bar and shrink images

Browse source 
Removed the top contact bar from the Header and reduced product image area size. Updated ProductCard to use a 4:3 aspect and smaller badge/icon placement for a tighter layout.

X-Lovable-Edit-ID: edt-36224de2-f947-4f29-b84f-6f4a4cb30ac8
This commit is contained in:
gpt-engineer-app[bot] 2026-01-29 20:00:17 +00:00
commit 2b8bb54bc2
2 changed files with 3 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
src/components/Header.tsx
View file

@ -18,24 +18,6 @@ export function Header() {
return (
<header className="sticky top-0 z-50 w-full">
{/* Top bar */}
<div className="gradient-industrial text-primary-foreground">
<div className="container mx-auto px-4 py-2 flex items-center justify-between text-sm">
<div className="flex items-center gap-6">
<a href="tel:+27123456789" className="flex items-center gap-2 hover:opacity-80 transition-opacity">
<Phone className="h-4 w-4" />
<span className="hidden sm:inline">+27 12 345 6789</span>
</a>
<a href="mailto:sales@westscottfasteners.co.za" className="flex items-center gap-2 hover:opacity-80 transition-opacity">
<Mail className="h-4 w-4" />
<span className="hidden sm:inline">sales@westscottfasteners.co.za</span>
</a>
</div>
<div className="flex items-center gap-4">
<span className="hidden md:inline">Request a Quote Today!</span>
</div>
</div>
</div>
{/* Main header */}
<div className="bg-card border-b shadow-industrial">

6
src/components/ProductCard.tsx
View file

@ -13,9 +13,9 @@ export function ProductCard({ product }: ProductCardProps) {
return (
<Card className="card-hover group overflow-hidden border bg-card">
<div className="relative aspect-square bg-muted/30 p-4">
<div className="relative aspect-[4/3] bg-muted/30 p-3">
{product.badge && (
<span className={`absolute top-3 left-3 z-10 ${
<span className={`absolute top-2 left-2 z-10 ${
product.badge === 'new' ? 'badge-new' :
product.badge === 'hot' ? 'badge-hot' :
'bg-brand-yellow text-brand-yellow-foreground text-xs font-bold px-2 py-1 rounded'
@ -31,7 +31,7 @@ export function ProductCard({ product }: ProductCardProps) {
<div className="absolute inset-0 bg-gradient-to-t from-background/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity" />
<Button
size="icon"
className="absolute top-3 right-3 opacity-0 group-hover:opacity-100 transition-all transform translate-y-2 group-hover:translate-y-0"
className="absolute top-2 right-2 h-8 w-8 opacity-0 group-hover:opacity-100 transition-all transform translate-y-2 group-hover:translate-y-0"
onClick={() => addItem(product)}
>
<Plus className="h-4 w-4" />