diana.dolgolyova/blackheart-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: dark luxury redesign with black heart branding

Browse Source 
Complete visual overhaul: dark-only mode, rose/crimson accent system,
glassmorphism header, animated hero with floating hearts and glow orbs,
photo-backed cards, infinite team carousel with drag support,
redesigned modals with hero images, black heart logo with rose glow silhouette.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Diana Dolgolyova
2026-03-09 23:30:10 +03:00
parent 1f6e314af6
commit 9cf09b6894
16 changed files with 762 additions and 244 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
src/components/sections/Contact.tsx
View File

@@ -8,51 +8,65 @@ export function Contact() {
const { contact } = siteContent;
return (
<section id="contact" className="surface-base section-padding">
<section id="contact" className="relative section-padding bg-neutral-50 dark:bg-[#050505]">
<div className="section-divider absolute top-0 left-0 right-0" />
<div className="section-container grid items-start gap-12 lg:grid-cols-2">
<Reveal>
<SectionHeading>{contact.title}</SectionHeading>
<div className="mt-12 space-y-6">
<div className="mt-10 space-y-5">
{contact.addresses.map((address, i) => (
<div key={i} className="contact-item">
<MapPin size={20} className="contact-icon" />
<div key={i} className="group flex items-center gap-4">
<div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-rose-50 text-rose-600 transition-colors group-hover:bg-rose-100 dark:bg-rose-500/10 dark:text-rose-400 dark:group-hover:bg-rose-500/15">
<MapPin size={18} />
</div>
<p className="body-text">{address}</p>
</div>
))}
<div className="contact-item">
<Phone size={20} className="contact-icon" />
<a href={`tel:${contact.phone}`} className="nav-link text-base">
<div className="group flex items-center gap-4">
<div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-rose-50 text-rose-600 transition-colors group-hover:bg-rose-100 dark:bg-rose-500/10 dark:text-rose-400 dark:group-hover:bg-rose-500/15">
<Phone size={18} />
</div>
<a
href={`tel:${contact.phone}`}
className="text-neutral-600 transition-colors hover:text-rose-600 dark:text-neutral-400 dark:hover:text-rose-400"
>
{contact.phone}
</a>
</div>
<div className="contact-item">
<Clock size={20} className="contact-icon" />
<div className="group flex items-center gap-4">
<div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-rose-50 text-rose-600 transition-colors group-hover:bg-rose-100 dark:bg-rose-500/10 dark:text-rose-400 dark:group-hover:bg-rose-500/15">
<Clock size={18} />
</div>
<p className="body-text">{contact.workingHours}</p>
</div>
<div className="theme-border contact-item border-t pt-6">
<Instagram size={20} className="contact-icon" />
<a
href={contact.instagram}
target="_blank"
rel="noopener noreferrer"
className="nav-link text-base"
>
{BRAND.instagramHandle}
</a>
<div className="border-t border-neutral-200 pt-5 dark:border-white/[0.06]">
<div className="group flex items-center gap-4">
<div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-rose-50 text-rose-600 transition-colors group-hover:bg-rose-100 dark:bg-rose-500/10 dark:text-rose-400 dark:group-hover:bg-rose-500/15">
<Instagram size={18} />
</div>
<a
href={contact.instagram}
target="_blank"
rel="noopener noreferrer"
className="text-neutral-600 transition-colors hover:text-rose-600 dark:text-neutral-400 dark:hover:text-rose-400"
>
{BRAND.instagramHandle}
</a>
</div>
</div>
</div>
</Reveal>
<Reveal>
<div className="theme-border overflow-hidden rounded-2xl border">
<div className="overflow-hidden rounded-2xl border border-neutral-200 shadow-sm dark:border-white/[0.06] dark:shadow-[0_0_30px_rgba(225,29,72,0.05)]">
<iframe
src={contact.mapEmbedUrl}
width="100%"
height="350"
height="380"
style={{ border: 0 }}
allowFullScreen
loading="lazy"