Skip to content

Commit 3bc12fd

Browse files
lovable-dev[bot]lovable-dev[bot]
committed
Polished UI and Shop routes
Implemented full design polish across header, footer, and shop-related pages to align with Clinical Luxury identity (Ivory & Gold + Maroon). Added Shop route and lazy-loading integration, upgraded Shop page with Luxury pricing, Gold Stitch hover, and consistent product cards. Enhanced Products page with shared Footer and updated header for glassy navigation. Wired Shop route in App.tsx and ensured Shop page uses updated components for visual consistency. X-Lovable-Edit-ID: edt-2919ba3d-a3d6-468d-ba95-239528e2a2a1
2 parents 239be82 + fc33e8d commit 3bc12fd

5 files changed

Lines changed: 294 additions & 78 deletions

File tree

‎src/App.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ const AdminEnrichment = lazy(() => import("./pages/AdminEnrichment"));
2323
const Checkout = lazy(() => import("./pages/Checkout"));
2424
const Profile = lazy(() => import("./pages/Profile"));
2525
const Contact = lazy(() => import("./pages/Contact"));
26+
const Shop = lazy(() => import("./pages/Shop"));
2627

2728
const queryClient = new QueryClient();
2829

@@ -60,6 +61,7 @@ function AppContent() {
6061
<Routes>
6162
<Route path="/" element={<Index />} />
6263
<Route path="/products" element={<Products />} />
64+
<Route path="/shop" element={<Shop />} />
6365
<Route path="/product/:handle" element={<ProductDetail />} />
6466
<Route path="/brand" element={<BrandShowcase />} />
6567
<Route path="/auth" element={<Auth />} />

‎src/components/Footer.tsx‎

Lines changed: 69 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,76 @@
1+
import { Link } from "react-router-dom";
12
import { useLanguage } from "@/contexts/LanguageContext";
3+
import { IncognitoToggle } from "@/components/IncognitoToggle";
4+
import TrustBadges from "@/components/brand/TrustBadges";
5+
import SocialIconsRow from "@/components/brand/SocialLinks";
6+
import asperLogo from "@/assets/asper-lotus-logo.png";
7+
import asperSeal from "@/assets/asper-wax-seal.jfif";
28

39
export const Footer = () => {
4-
const { t } = useLanguage();
10+
const { t, locale } = useLanguage();
11+
512
return (
6-
<footer className="bg-primary text-primary-foreground py-12">
7-
<div className="container mx-auto px-4 max-w-7xl text-center">
8-
<p className="font-serif text-lg mb-2">ASPER BEAUTY SHOP</p>
9-
<p className="text-sm opacity-70">{t("footer.tagline")}</p>
10-
<p className="text-xs opacity-50 mt-4">© {new Date().getFullYear()} {t("footer.copyright")}</p>
13+
<footer className="py-16 bg-primary text-primary-foreground">
14+
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
15+
<div className="grid grid-cols-1 md:grid-cols-3 gap-10 mb-12">
16+
{/* Brand Column */}
17+
<div>
18+
<div className="flex items-center gap-2 mb-4">
19+
<img src={asperLogo} alt="Asper" className="h-8 w-auto brightness-0 invert opacity-90" />
20+
<span className="text-xs font-body uppercase tracking-[0.25em] text-primary-foreground/70">Beauty Shop</span>
21+
</div>
22+
<p className={`text-sm text-primary-foreground/70 leading-relaxed ${locale === "ar" ? "font-arabic" : "font-body"}`}>
23+
{t("footer.tagline")}
24+
</p>
25+
</div>
26+
27+
{/* Quick Links */}
28+
<div>
29+
<h4 className="font-heading text-sm font-semibold mb-4 text-primary-foreground/90">Quick Links</h4>
30+
<div className="flex flex-col gap-2">
31+
<Link to="/products" className="text-sm text-primary-foreground/60 hover:text-accent transition-colors font-body">Shop All</Link>
32+
<Link to="/shop" className="text-sm text-primary-foreground/60 hover:text-accent transition-colors font-body">Browse Catalog</Link>
33+
<Link to="/intelligence" className="text-sm text-primary-foreground/60 hover:text-accent transition-colors font-body">AI Intelligence</Link>
34+
<Link to="/brand" className="text-sm text-primary-foreground/60 hover:text-accent transition-colors font-body">Our Story</Link>
35+
</div>
36+
</div>
37+
38+
{/* Connect */}
39+
<div>
40+
<h4 className="font-heading text-sm font-semibold mb-4 text-primary-foreground/90">Connect</h4>
41+
<div className="flex flex-col gap-3">
42+
<a href="https://wa.me/962790656666" target="_blank" rel="noopener noreferrer" className="text-sm text-primary-foreground/60 hover:text-accent transition-colors font-body">
43+
WhatsApp: +962 79 065 6666
44+
</a>
45+
<a href="https://instagram.com/asper.beauty.shop" target="_blank" rel="noopener noreferrer" className="text-sm text-primary-foreground/60 hover:text-accent transition-colors font-body">
46+
@asper.beauty.shop
47+
</a>
48+
<IncognitoToggle className="mt-1 border-primary-foreground/20 text-primary-foreground/60 hover:text-primary-foreground hover:border-primary-foreground/40" />
49+
</div>
50+
</div>
51+
</div>
52+
53+
{/* Social Icons */}
54+
<div className="mb-6">
55+
<h4 className="font-heading text-xs font-semibold mb-3 text-primary-foreground/70 uppercase tracking-[0.2em]">Follow Us</h4>
56+
<SocialIconsRow variant="footer" />
57+
</div>
58+
59+
{/* Trust Badges */}
60+
<div className="mb-8">
61+
<TrustBadges />
62+
</div>
63+
64+
<div className="h-px bg-primary-foreground/10" />
65+
<div className="flex items-center justify-between mt-6">
66+
<p className={`text-xs text-primary-foreground/50 ${locale === "ar" ? "font-arabic" : "font-body"}`}>
67+
© {new Date().getFullYear()} {t("footer.copyright")}
68+
</p>
69+
{/* Gold Authenticity Seal */}
70+
<div className="gold-seal-rotate cursor-pointer" title="Guaranteed Authentic">
71+
<img src={asperSeal} alt="Asper Authenticity Seal" className="h-10 w-10 rounded-full object-cover" />
72+
</div>
73+
</div>
1174
</div>
1275
</footer>
1376
);

‎src/components/Header.tsx‎

Lines changed: 62 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,74 @@
11
import { Link } from "react-router-dom";
2-
import { ShoppingBag, Search, User, Globe } from "lucide-react";
2+
import { Globe, User } from "lucide-react";
33
import { useLanguage } from "@/contexts/LanguageContext";
44
import { useCartStore } from "@/stores/cartStore";
5+
import { useState, useEffect } from "react";
6+
import { cn } from "@/lib/utils";
7+
import asperLogo from "@/assets/asper-lotus-logo.png";
8+
import BrandIcon from "@/components/brand/BrandIcon";
9+
import SearchBar from "@/components/home/SearchBar";
10+
import AuthButton from "@/components/AuthButton";
511

612
export const Header = () => {
7-
const { locale, toggle, t } = useLanguage();
13+
const { locale, toggle, t, dir } = useLanguage();
814
const itemCount = useCartStore(s => s.items.reduce((sum, i) => sum + i.quantity, 0));
15+
const [scrolled, setScrolled] = useState(false);
16+
17+
useEffect(() => {
18+
const onScroll = () => setScrolled(window.scrollY > 60);
19+
window.addEventListener("scroll", onScroll, { passive: true });
20+
return () => window.removeEventListener("scroll", onScroll);
21+
}, []);
922

1023
return (
11-
<header className="fixed top-0 inset-x-0 z-50 bg-background/90 backdrop-blur-md border-b border-border">
12-
<div className="container mx-auto px-4 max-w-7xl flex items-center justify-between h-16">
13-
<Link to="/" className="font-serif text-xl font-bold text-primary tracking-wide">
14-
ASPER
15-
</Link>
16-
<nav className="hidden md:flex items-center gap-6 text-sm font-medium">
17-
<Link to="/shop" className="text-foreground/80 hover:text-primary transition-colors">{t("nav.shop")}</Link>
18-
<Link to="/lab" className="text-foreground/80 hover:text-primary transition-colors">{t("nav.intelligence")}</Link>
19-
</nav>
20-
<div className="flex items-center gap-3">
21-
<button onClick={toggle} className="p-2 text-foreground/60 hover:text-accent transition-colors" aria-label="Toggle language">
22-
<Globe className="w-5 h-5" />
23-
</button>
24-
<Link to="/auth" className="p-2 text-foreground/60 hover:text-primary transition-colors">
25-
<User className="w-5 h-5" />
26-
</Link>
27-
<Link to="/shop" className="p-2 text-foreground/60 hover:text-primary transition-colors relative">
28-
<ShoppingBag className="w-5 h-5" />
29-
{itemCount > 0 && (
30-
<span className="absolute -top-0.5 -right-0.5 bg-primary text-primary-foreground text-[10px] w-4 h-4 rounded-full flex items-center justify-center font-bold">
31-
{itemCount}
32-
</span>
33-
)}
24+
<header className="fixed top-0 inset-x-0 z-50 border-b border-accent/10 glass-nav">
25+
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
26+
<div className="flex h-16 items-center justify-between">
27+
{/* Logo with scroll shrink */}
28+
<Link to="/" className="flex items-center gap-2">
29+
<img
30+
src={asperLogo}
31+
alt="Asper"
32+
className={cn(
33+
"w-auto transition-all duration-500 ease-luxury",
34+
scrolled ? "h-6" : "h-8"
35+
)}
36+
/>
37+
<span
38+
className={cn(
39+
"text-xs font-body uppercase tracking-[0.25em] text-muted-foreground mt-1 transition-all duration-500",
40+
scrolled ? "opacity-0 w-0 overflow-hidden" : "opacity-100"
41+
)}
42+
>
43+
Beauty Shop
44+
</span>
3445
</Link>
46+
47+
{/* Desktop Navigation */}
48+
<nav className="hidden md:flex items-center gap-8">
49+
<Link to="/shop" className="text-sm font-medium text-foreground/80 hover:text-primary transition-colors font-body">
50+
{t("nav.shop")}
51+
</Link>
52+
<Link to="/products" className="text-sm font-medium text-foreground/80 hover:text-primary transition-colors font-body">
53+
Products
54+
</Link>
55+
<Link to="/intelligence" className="text-sm font-medium text-foreground/80 hover:text-primary transition-colors font-body">
56+
{t("nav.intelligence")}
57+
</Link>
58+
</nav>
59+
60+
{/* Actions */}
61+
<div className="flex items-center gap-1">
62+
<BrandIcon icon="globe" onClick={toggle} ariaLabel="Switch language" />
63+
<SearchBar />
64+
<BrandIcon
65+
icon="cart"
66+
notificationCount={itemCount}
67+
onClick={() => {}}
68+
ariaLabel="Open cart"
69+
/>
70+
<AuthButton />
71+
</div>
3572
</div>
3673
</div>
3774
</header>

‎src/pages/Products.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
1717
import { Separator } from "@/components/ui/separator";
1818
import { useIsMobile } from "@/hooks/use-mobile";
1919
import AuthButton from "@/components/AuthButton";
20+
import { Footer } from "@/components/Footer";
2021
import asperLogo from "@/assets/asper-lotus-logo.png";
2122

2223
const Products = () => {
@@ -220,6 +221,7 @@ const Products = () => {
220221
</main>
221222
</div>
222223
</div>
224+
<Footer />
223225
</div>
224226
);
225227
};

0 commit comments

Comments
 (0)