Skip to content

Commit a0f6cf9

Browse files
lovable-dev[bot]lovable-dev[bot]
committed
Add HeritageSourcing UI
Added Heritage & Sourcing section with 50/50 layout, image border, Tajawal font heading, and mineral feature list to reflect Dead Sea origins. Updated styling to align with Medical Luxury branding and background. X-Lovable-Edit-ID: edt-3310220b-5194-49e2-a4c1-7a3dcf128f50
2 parents cd2c28d + c99e3b1 commit a0f6cf9

1 file changed

Lines changed: 53 additions & 54 deletions

File tree

‎src/components/home/HeritageSourcing.tsx‎

Lines changed: 53 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,68 +1,67 @@
11
import { Badge } from "@/components/ui/badge";
2-
import { Card, CardContent } from "@/components/ui/card";
32
import { Droplets, Mountain, Sparkles, Gem } from "lucide-react";
43

54
const minerals = [
6-
{ icon: Droplets, name: "Magnesium", benefit: "Deep hydration & barrier repair", concentration: "40.65%" },
7-
{ icon: Gem, name: "Calcium", benefit: "Cell renewal & skin firmness", concentration: "17.2%" },
8-
{ icon: Sparkles, name: "Potassium", benefit: "Moisture balance & radiance", concentration: "7.26%" },
9-
{ icon: Mountain, name: "Bromide", benefit: "Soothing & anti-inflammatory", concentration: "5.12%" },
5+
{ icon: Droplets, name: "Magnesium", benefit: "Deep hydration & barrier repair" },
6+
{ icon: Gem, name: "Calcium", benefit: "Cell renewal & skin firmness" },
7+
{ icon: Sparkles, name: "Potassium", benefit: "Moisture balance & radiance" },
8+
{ icon: Mountain, name: "Bromide", benefit: "Soothing & anti-inflammatory" },
109
];
1110

1211
const HeritageSourcing = () => {
1312
return (
14-
<section className="py-24 sm:py-32 relative overflow-hidden">
15-
{/* Subtle background pattern */}
16-
<div className="absolute inset-0 opacity-[0.03]" style={{
17-
backgroundImage: `radial-gradient(circle at 20% 50%, hsl(var(--primary)) 1px, transparent 1px),
18-
radial-gradient(circle at 80% 50%, hsl(var(--accent)) 1px, transparent 1px)`,
19-
backgroundSize: '60px 60px',
20-
}} />
21-
22-
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 relative">
23-
<div className="text-center mb-16">
24-
<Badge variant="outline" className="mb-4 border-accent text-accent font-body text-xs tracking-[0.2em] px-4 py-1.5">
25-
HERITAGE & SOURCING
26-
</Badge>
27-
<h2 className="font-heading text-3xl sm:text-4xl lg:text-5xl font-bold text-foreground">
28-
From the <span className="text-primary">Dead Sea</span> to Your Shelf
29-
</h2>
30-
<p className="mt-4 text-muted-foreground text-lg max-w-2xl mx-auto font-body">
31-
Jordan's ancient mineral treasury — clinically validated, ethically sourced, and pharmacist-approved for modern skincare rituals.
32-
</p>
33-
</div>
13+
<section className="py-16 sm:py-20 bg-background">
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-2 gap-10 lg:gap-16 items-center">
16+
{/* Left — Image with gold border */}
17+
<div className="relative">
18+
<div className="rounded-lg overflow-hidden border-2 border-accent shadow-emerald-glow">
19+
<img
20+
src="https://images.unsplash.com/photo-1544161515-4ab6ce6db874?w=800&q=80"
21+
alt="Luxury spa minerals and Dead Sea wellness"
22+
className="w-full h-[420px] object-cover"
23+
loading="lazy"
24+
/>
25+
</div>
26+
{/* Floating mineral badges */}
27+
<div className="absolute -bottom-4 -end-4 bg-card border border-accent/30 rounded-lg px-4 py-3 shadow-lg">
28+
<span className="font-heading text-xs text-accent tracking-[0.15em] uppercase">Dead Sea · Jordan</span>
29+
</div>
30+
</div>
3431

35-
{/* Mineral Cards */}
36-
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 sm:gap-6 max-w-5xl mx-auto mb-16">
37-
{minerals.map((mineral) => (
38-
<Card
39-
key={mineral.name}
40-
className="group border-border/50 hover:border-accent/50 transition-all duration-400 shadow-emerald-glow hover:shadow-emerald-deep text-center"
41-
>
42-
<CardContent className="p-6">
43-
<div className="w-14 h-14 mx-auto rounded-full bg-primary/5 border border-primary/10 flex items-center justify-center mb-4 group-hover:border-accent/40 transition-colors duration-400">
44-
<mineral.icon className="h-6 w-6 text-primary group-hover:text-accent transition-colors duration-400" />
45-
</div>
46-
<span className="block font-heading text-2xl font-bold text-accent mb-1">{mineral.concentration}</span>
47-
<h3 className="font-heading text-lg font-semibold text-foreground mb-1">{mineral.name}</h3>
48-
<p className="text-xs text-muted-foreground font-body leading-relaxed">{mineral.benefit}</p>
49-
</CardContent>
50-
</Card>
51-
))}
52-
</div>
32+
{/* Right — Text content */}
33+
<div className="flex flex-col justify-center">
34+
<Badge variant="outline" className="mb-4 w-fit border-accent text-accent font-body text-xs tracking-[0.2em] px-4 py-1.5">
35+
HERITAGE & SOURCING
36+
</Badge>
37+
<h2 className="font-arabic text-3xl sm:text-4xl font-bold text-foreground mb-4 leading-tight">
38+
Authentic Origins, <span className="text-primary">Clinical Results</span>
39+
</h2>
40+
<p className="text-muted-foreground font-body leading-relaxed mb-8">
41+
Our formulations are rooted in the ancient healing power of the Dead Sea — the lowest point on Earth,
42+
rich in magnesium, calcium, and potassium. Every mineral compound is sustainably harvested from
43+
Jordanian sources and cold-processed to preserve its bioactive integrity, then paired with
44+
globally sourced clinical-grade actives for modern skincare that honors tradition.
45+
</p>
5346

54-
{/* Heritage Story */}
55-
<div className="max-w-3xl mx-auto text-center">
56-
<div className="inline-flex items-center gap-2 px-5 py-2.5 rounded-full border border-accent/30 bg-accent/5 mb-6">
57-
<Mountain className="h-4 w-4 text-accent" />
58-
<span className="font-body text-sm font-medium text-foreground">
59-
430 meters below sea level — the lowest point on Earth
60-
</span>
47+
{/* Mineral grid */}
48+
<div className="grid grid-cols-2 gap-4">
49+
{minerals.map((mineral) => (
50+
<div
51+
key={mineral.name}
52+
className="group flex items-start gap-3 p-3 rounded-lg border border-border/50 hover:border-accent/40 transition-colors duration-400"
53+
>
54+
<div className="w-9 h-9 rounded-full bg-primary/5 border border-primary/10 flex items-center justify-center shrink-0 group-hover:border-accent/30 transition-colors">
55+
<mineral.icon className="h-4 w-4 text-primary group-hover:text-accent transition-colors duration-400" />
56+
</div>
57+
<div>
58+
<span className="font-heading text-sm font-semibold text-foreground">{mineral.name}</span>
59+
<p className="text-xs text-muted-foreground font-body leading-snug">{mineral.benefit}</p>
60+
</div>
61+
</div>
62+
))}
63+
</div>
6164
</div>
62-
<p className="text-muted-foreground font-body leading-relaxed text-base">
63-
For millennia, the Dead Sea has been a sanctuary of healing. Our partnerships with local Jordanian harvesters ensure every mineral compound
64-
is sustainably extracted and cold-processed — preserving the bioactive integrity that makes these ingredients irreplaceable in clinical skincare.
65-
</p>
6665
</div>
6766
</div>
6867
</section>

0 commit comments

Comments
 (0)