Skip to content

Commit 833cb3c

Browse files
lovable-dev[bot]lovable-dev[bot]
committed
Split-column hero created
Replaced video hero with a 2-column layout: left emotional header, single CTA, and micro-badges; right side Digital Tray with floating product cards and AI chat badge. Includes responsive tweaks and RTL support. X-Lovable-Edit-ID: edt-f6e7577f-c635-46a2-996c-393f894c8705
2 parents 5c24dc7 + d7da80c commit 833cb3c

1 file changed

Lines changed: 153 additions & 71 deletions

File tree

‎src/components/home/Hero.tsx‎

Lines changed: 153 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1,118 +1,200 @@
11
import { Link } from "react-router-dom";
22
import { Button } from "@/components/ui/button";
3-
import { ArrowRight, Shield, Sparkles, Leaf, Sun, Moon, CloudSun } from "lucide-react";
3+
import { ArrowRight, Shield, Leaf, Sparkles, Sun, Moon, CloudSun, FlaskConical, Droplets } from "lucide-react";
44
import { useLanguage } from "@/contexts/LanguageContext";
55
import { useTimeContext } from "@/hooks/useTimeContext";
6-
import heroVideo from "@/assets/hero-video.mp4";
76
import { cn } from "@/lib/utils";
7+
import { motion } from "framer-motion";
88

99
const timeIcons = { morning: Sun, afternoon: CloudSun, evening: Moon };
1010

11+
/* Floating product cards for the "Digital Tray" */
12+
const trayProducts = [
13+
{ title: "Retinol Night Treatment", brand: "Asper Beauty", price: "68.00", step: "Treatment", icon: FlaskConical },
14+
{ title: "Vitamin C Brightening Cream", brand: "Asper Beauty", price: "52.00", step: "Protection", icon: Sparkles },
15+
{ title: "Nourishing Hair Oil", brand: "Kérastase", price: "32.00", step: "Nourish", icon: Droplets },
16+
];
17+
1118
export default function Hero() {
1219
const { t, dir, locale } = useLanguage();
13-
const { timeOfDay, greeting, tagline, moodClass } = useTimeContext();
20+
const { timeOfDay, greeting } = useTimeContext();
1421
const TimeIcon = timeIcons[timeOfDay];
1522
const isAr = locale === "ar";
1623

1724
return (
18-
<section className="relative h-[85vh] min-h-[600px] max-h-[900px] overflow-hidden">
19-
{/* Video Background */}
20-
<video
21-
autoPlay
22-
muted
23-
loop
24-
playsInline
25-
className="absolute inset-0 h-full w-full object-cover"
26-
>
27-
<source src={heroVideo} type="video/mp4" />
28-
</video>
29-
30-
{/* Emerald + marble gradient overlays */}
31-
<div className="absolute inset-0 bg-gradient-to-r from-primary/80 via-primary/40 to-transparent" />
32-
<div className="absolute inset-0 bg-gradient-to-t from-primary/60 via-transparent to-primary/20" />
25+
<section className="relative min-h-[85vh] lg:min-h-[90vh] overflow-hidden bg-background">
26+
{/* Subtle background pattern */}
27+
<div className="absolute inset-0 opacity-[0.03]" style={{ backgroundImage: "radial-gradient(circle at 1px 1px, hsl(var(--foreground)) 1px, transparent 0)", backgroundSize: "40px 40px" }} />
3328

34-
{/* Gold border frame */}
35-
<div className="absolute inset-4 sm:inset-8 border border-accent/30 pointer-events-none z-10" />
29+
<div className="relative z-10 mx-auto max-w-7xl px-6 sm:px-10 lg:px-16 h-full">
30+
<div className="grid lg:grid-cols-5 gap-8 lg:gap-16 items-center min-h-[85vh] lg:min-h-[90vh] py-16 lg:py-0">
3631

37-
{/* Content */}
38-
<div className="relative z-20 h-full flex items-center">
39-
<div className="mx-auto max-w-7xl px-6 sm:px-10 lg:px-16 w-full">
40-
<div className={`max-w-2xl space-y-6 ${dir === "rtl" ? "mr-0 ml-auto text-right" : ""}`}>
32+
{/* ── LEFT COLUMN (2/5 = 40%) — Emotional Hook ── */}
33+
<motion.div
34+
className={cn("lg:col-span-2 space-y-8", dir === "rtl" && "text-right")}
35+
initial={{ opacity: 0, y: 30 }}
36+
animate={{ opacity: 1, y: 0 }}
37+
transition={{ duration: 0.8, ease: [0.19, 1, 0.22, 1] }}
38+
>
4139
{/* Time-aware greeting pill */}
4240
<div className={cn(
43-
"inline-flex items-center gap-2 rounded-full px-4 py-1.5 text-xs font-body tracking-wide backdrop-blur-sm",
44-
"bg-primary-foreground/10 text-primary-foreground/90 border border-primary-foreground/20"
41+
"inline-flex items-center gap-2 rounded-full px-4 py-1.5 text-xs font-body tracking-wide",
42+
"bg-secondary text-muted-foreground border border-border"
4543
)}>
46-
<TimeIcon className="h-3.5 w-3.5" />
44+
<TimeIcon className="h-3.5 w-3.5 text-accent" />
4745
<span>{greeting}</span>
4846
</div>
4947

50-
<h1 className={cn(
51-
"font-heading text-4xl sm:text-5xl lg:text-7xl font-bold text-primary-foreground leading-[1.1] tracking-tight",
52-
dir === "rtl" && "font-arabic"
53-
)}>
54-
{isAr ? "الطبيعة" : "Nature"}
55-
<br />
56-
<span className="text-accent">{isAr ? "تلتقي بالعلم" : "Meets Science"}</span>
57-
</h1>
48+
<div className="space-y-4">
49+
<h1 className={cn(
50+
"font-heading text-4xl sm:text-5xl lg:text-[3.5rem] xl:text-6xl font-bold text-foreground leading-[1.08] tracking-tight",
51+
dir === "rtl" && "font-arabic"
52+
)}>
53+
{isAr ? (
54+
<>
55+
محراب <span className="text-primary">العلم</span>
56+
<br />
57+
<span className="text-accent">&</span> الفخامة
58+
</>
59+
) : (
60+
<>
61+
The Sanctuary
62+
<br />
63+
of <span className="text-primary">Science</span> <span className="text-accent">&</span> Luxury
64+
</>
65+
)}
66+
</h1>
5867

59-
<p className={cn(
60-
"text-base sm:text-lg text-primary-foreground/80 max-w-lg leading-relaxed",
61-
dir === "rtl" ? "font-arabic" : "font-body"
62-
)}>
63-
{isAr
64-
? "منتجات فاخرة للعناية بالبشرة والجمال — مُعتمدة صيدلانياً من أرقى العلامات التجارية العالمية"
65-
: "Curated luxury skincare & beauty from the world's most prestigious brands — pharmacist verified"}
66-
</p>
68+
<p className={cn(
69+
"text-base sm:text-lg text-muted-foreground max-w-md leading-relaxed",
70+
dir === "rtl" ? "font-arabic" : "font-body"
71+
)}>
72+
{isAr
73+
? "منتجات فاخرة للعناية بالبشرة مُعتمدة من صيادلتنا الخبراء. دعي ذكاءنا الاصطناعي يصمّم روتينك المثالي بـ3 نقرات."
74+
: "Experience clinical dermocosmetics curated by expert pharmacists. Let our AI formulate your personalized, 3‑click beauty regimen."}
75+
</p>
76+
</div>
6777

6878
{/* Trust micro-badges */}
69-
<div className={`flex flex-wrap gap-3 ${dir === "rtl" ? "justify-end" : ""}`}>
79+
<div className={cn("flex flex-wrap gap-3", dir === "rtl" && "justify-end")}>
7080
{[
71-
{ icon: Shield, label: t("hero.authentic"), color: "text-accent" },
72-
{ icon: Leaf, label: isAr ? "طبيعي ونقي" : "Natural & Pure", color: "text-accent" },
73-
{ icon: Sparkles, label: t("hero.pharmacist_led"), color: "text-accent" },
81+
{ icon: Shield, label: isAr ? "أصالة مضمونة" : "100% Authentic" },
82+
{ icon: Leaf, label: isAr ? "خالٍ من القسوة" : "Cruelty-Free" },
83+
{ icon: Sparkles, label: isAr ? "بإشراف صيدلاني" : "Pharmacist-Led" },
7484
].map((item) => (
7585
<span
7686
key={item.label}
77-
className="inline-flex items-center gap-1.5 text-xs font-body text-primary-foreground/70 border border-primary-foreground/15 backdrop-blur-sm rounded-full px-3 py-1"
87+
className="inline-flex items-center gap-1.5 text-xs font-body text-muted-foreground border border-border rounded-full px-3 py-1 bg-card"
7888
>
79-
<item.icon className={`h-3 w-3 ${item.color}`} />
89+
<item.icon className="h-3 w-3 text-accent" />
8090
{item.label}
8191
</span>
8292
))}
8393
</div>
8494

85-
{/* CTAs */}
86-
<div className={`flex flex-col sm:flex-row gap-4 pt-2 ${dir === "rtl" ? "justify-end" : ""}`}>
87-
<Link to="/products">
95+
{/* Single CTA */}
96+
<div className={cn("pt-2", dir === "rtl" && "flex justify-end")}>
97+
<Link to="/intelligence">
8898
<Button
8999
size="lg"
90-
className="group bg-accent text-primary-foreground hover:bg-accent/90 text-sm uppercase tracking-widest px-8 h-12 font-semibold shadow-lg shadow-accent/20"
100+
className="group bg-card text-foreground border border-accent hover:bg-accent/10 hover:shadow-lg hover:shadow-accent/10 text-sm uppercase tracking-widest px-8 h-13 font-semibold transition-all duration-300"
91101
>
92-
{t("hero.cta_primary")}
93-
<ArrowRight className={`h-4 w-4 group-hover:translate-x-1 transition-transform ${dir === "rtl" ? "mr-2 rotate-180" : "ml-2"}`} />
94-
</Button>
95-
</Link>
96-
<Link to="/products">
97-
<Button
98-
variant="outline"
99-
size="lg"
100-
className="border-primary-foreground/30 text-primary-foreground hover:bg-primary-foreground/10 text-sm uppercase tracking-widest px-8 h-12"
101-
>
102-
{t("hero.cta_secondary")}
102+
{isAr ? "ابدئي تحليل بشرتك" : "Start Free Skin Analysis"}
103+
<ArrowRight className={cn(
104+
"h-4 w-4 transition-transform duration-300 group-hover:translate-x-1",
105+
dir === "rtl" ? "mr-2 rotate-180 group-hover:-translate-x-1" : "ml-2"
106+
)} />
103107
</Button>
104108
</Link>
105109
</div>
106-
</div>
110+
</motion.div>
111+
112+
{/* ── RIGHT COLUMN (3/5 = 60%) — Digital Tray ── */}
113+
<motion.div
114+
className="lg:col-span-3 relative"
115+
initial={{ opacity: 0, x: 40 }}
116+
animate={{ opacity: 1, x: 0 }}
117+
transition={{ duration: 0.9, delay: 0.2, ease: [0.19, 1, 0.22, 1] }}
118+
>
119+
<div className="relative w-full max-w-xl mx-auto lg:max-w-none">
120+
{/* Background decorative circle */}
121+
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[90%] aspect-square rounded-full bg-gradient-to-br from-accent/5 via-primary/5 to-transparent" />
122+
123+
{/* Product tray cards */}
124+
<div className="relative space-y-4 py-8">
125+
{trayProducts.map((product, i) => (
126+
<motion.div
127+
key={product.title}
128+
className={cn(
129+
"relative bg-card rounded-xl border border-border p-5 shadow-sm hover:shadow-lg hover:border-accent/40 transition-all duration-300 group",
130+
i === 0 && "lg:ml-4",
131+
i === 1 && "lg:ml-12",
132+
i === 2 && "lg:ml-6",
133+
)}
134+
initial={{ opacity: 0, y: 20 }}
135+
animate={{ opacity: 1, y: 0 }}
136+
transition={{ duration: 0.6, delay: 0.4 + i * 0.15, ease: [0.19, 1, 0.22, 1] }}
137+
>
138+
<div className="flex items-center gap-4">
139+
<div className="w-12 h-12 rounded-lg bg-secondary flex items-center justify-center flex-shrink-0 group-hover:bg-accent/10 transition-colors">
140+
<product.icon className="h-5 w-5 text-primary" />
141+
</div>
142+
<div className="flex-1 min-w-0">
143+
<p className="text-[10px] font-body uppercase tracking-[0.2em] text-muted-foreground">{product.brand}</p>
144+
<p className="text-sm font-heading font-semibold text-foreground truncate">{product.title}</p>
145+
</div>
146+
<div className="text-right flex-shrink-0">
147+
<p className="text-sm font-semibold text-foreground">{product.price} <span className="text-xs text-muted-foreground">JOD</span></p>
148+
<span className="text-[10px] font-body uppercase tracking-wider text-accent">{product.step}</span>
149+
</div>
150+
</div>
151+
{/* Gold stitch on hover */}
152+
<div className="absolute inset-0 rounded-xl border border-accent/0 group-hover:border-accent/60 transition-colors duration-300 pointer-events-none" />
153+
</motion.div>
154+
))}
155+
</div>
156+
157+
{/* AI Concierge chat bubble */}
158+
<motion.div
159+
className="absolute -top-2 right-0 lg:right-4 w-64 bg-card/95 backdrop-blur-sm rounded-2xl border border-accent/30 p-4 shadow-lg"
160+
initial={{ opacity: 0, scale: 0.9 }}
161+
animate={{ opacity: 1, scale: 1 }}
162+
transition={{ duration: 0.5, delay: 0.9, ease: [0.19, 1, 0.22, 1] }}
163+
>
164+
<div className="flex items-center gap-2 mb-2">
165+
<div className="w-6 h-6 rounded-full bg-primary/10 flex items-center justify-center">
166+
<Sparkles className="h-3 w-3 text-primary" />
167+
</div>
168+
<span className="text-xs font-body font-semibold text-foreground">
169+
{isAr ? "✨ الآنسة زين" : "✨ Ms. Zain"}
170+
</span>
171+
</div>
172+
<p className="text-xs text-muted-foreground font-body leading-relaxed">
173+
{isAr
174+
? "بناءً على بشرتك، أنصحك بروتين ترطيب مسائي مخصص ✨"
175+
: "Based on your skin profile, I recommend this evening hydration ritual ✨"}
176+
</p>
177+
</motion.div>
178+
179+
{/* Clinical badge floating */}
180+
<motion.div
181+
className="absolute bottom-4 left-0 lg:left-4 inline-flex items-center gap-2 bg-card/95 backdrop-blur-sm rounded-full border border-primary/20 px-4 py-2 shadow-sm"
182+
initial={{ opacity: 0, x: -20 }}
183+
animate={{ opacity: 1, x: 0 }}
184+
transition={{ duration: 0.5, delay: 1.1, ease: [0.19, 1, 0.22, 1] }}
185+
>
186+
<Shield className="h-4 w-4 text-primary" />
187+
<span className="text-xs font-body font-medium text-foreground">
188+
{isAr ? "🔬 Dr. سامي — معتمد سريرياً" : "🔬 Dr. Sami — Clinically Verified"}
189+
</span>
190+
</motion.div>
191+
</div>
192+
</motion.div>
107193
</div>
108194
</div>
109195

110-
{/* Bottom "Nature Meets Science" label */}
111-
<div className="absolute bottom-6 sm:bottom-10 right-6 sm:right-10 z-20">
112-
<p className="text-primary-foreground/50 font-body text-[10px] sm:text-xs uppercase tracking-[0.3em]">
113-
{isAr ? "الطبيعة تلتقي بالعلم" : "Nature Meets Science"}
114-
</p>
115-
</div>
196+
{/* Bottom divider accent */}
197+
<div className="absolute bottom-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-accent/30 to-transparent" />
116198
</section>
117199
);
118200
}

0 commit comments

Comments
 (0)