"use client"; import React, { useState, useEffect, useRef, useContext, createContext } from "react"; import { motion } from "framer-motion"; // ============================================================= // 1. Theme System (Dark / Light) // ============================================================= const ThemeContext = createContext<{ theme: "light" | "dark"; toggleTheme: () => void; } | null>(null); const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => { const [theme, setTheme] = useState<"light" | "dark">("dark"); // Load saved theme useEffect(() => { const savedTheme = typeof window !== "undefined" ? localStorage.getItem("theme") : null; if (savedTheme === "light" || savedTheme === "dark") { setTheme(savedTheme); } }, []); // Apply theme to useEffect(() => { if (typeof document === "undefined") return; const root = document.documentElement; root.classList.remove("light", "dark"); root.classList.add(theme); localStorage.setItem("theme", theme); }, [theme]); const toggleTheme = () => setTheme(prev => (prev === "dark" ? "light" : "dark")); return ( {children} ); }; const useTheme = () => { const ctx = useContext(ThemeContext); if (!ctx) throw new Error("useTheme must be used within ThemeProvider"); return ctx; }; // ============================================================= // 2. Global Styles (Fonts, Gold Text, Scrollbar, Cards ...) // ============================================================= const GlobalStyles: React.FC = () => ( ); // ============================================================= // 3. Scroll Reveal Hook // ============================================================= const useScrollReveal = () => { useEffect(() => { if (typeof window === "undefined") return; const observer = new IntersectionObserver( entries => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.classList.add("active"); observer.unobserve(entry.target); } }); }, { threshold: 0.12 } ); const elements = document.querySelectorAll(".reveal"); elements.forEach(el => observer.observe(el)); return () => { elements.forEach(el => observer.unobserve(el)); }; }, []); }; // ============================================================= // 4. Icons (pure SVG – no external icon libs) // ============================================================= const SunIcon = () => ( ); const MoonIcon = () => ( ); const CheckIcon = () => ( ); const AwardIcon = () => ( ); const GlobeIcon = () => ( ); const ShieldIcon = () => ( ); const SparklesIcon = () => ( ); const ScissorsIcon = () => ( ); const HeartIcon = () => ( ); const ZapIcon = () => ( ); const WhatsAppIcon = ({ className = "w-6 h-6" }: { className?: string }) => ( ); // ============================================================= // 5. Small Reusable Pieces // ============================================================= const SectionDivider: React.FC = () =>
; // Service Card type ServiceCardProps = { title: string; description: string; icon: React.ReactNode; delay?: number; }; const ServiceCard: React.FC = ({ title, description, icon, delay = 0 }) => (
{icon}

{title}

{description}

); // ============================================================= // 6. Layout Sections // ============================================================= // Header / Navigation const Header: React.FC = () => { const { theme, toggleTheme } = useTheme(); const [scrolled, setScrolled] = useState(false); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 20); window.addEventListener("scroll", onScroll); return () => window.removeEventListener("scroll", onScroll); }, []); return (
T

Tamer Beauty Center

مركز تامر للتجميل
); }; // Hero Section const HERO_WHATSAPP = "970590000000"; // TODO: ضع رقم الواتساب الحقيقي هنا const HERO_MESSAGE = "مرحباً، أريد حجز موعد في مركز تامر للتجميل"; const HeroSection: React.FC = () => { const handleWhatsAppBooking = () => { const url = `https://wa.me/${HERO_WHATSAPP}?text=${encodeURIComponent(HERO_MESSAGE)}`; window.open(url, "_blank"); }; return (
{/* Background image + overlay */}
صالون حلاقة فاخر

Luxury Grooming · Ramallah

مركز تامر للتجميل

العناية الفاخرة للرجال وعلاجات البشرة المتقدمة في قلب رام الله.

خبرة عالمية تتجاوز 15 سنة في الحلاقة والعناية الرجالية.

أحدث تقنيات الليزر والهيدرافيشل للبشرة الحساسة للرجال.

أكاديمية تدريب معتمدة لصناعة محترفي الحلاقة والتجميل.

اكتشف خدماتنا الفاخرة
); }; // About Section const AboutTamer: React.FC = () => (

لماذا تامر؟

مع أكثر من 15 سنة خبرة احترافية في مجال العناية الرجالية وعلاجات البشرة المتقدمة، يُعتبر تامر من أبرز الخبراء في فلسطين والشرق الأوسط.

تلقى تامر تدريباً دولياً متقدماً في ألمانيا على أحدث تقنيات الحلاقة، العناية بالبشرة، والليزر، ليقدم تجربة تجمع بين الرفاهية، النظافة الطبية، والنتائج الدقيقة التي تناسب رجال الأعمال والشخصيات العامة.

احترافية عالمية

معايير عمل مستوحاة من أفضل مراكز العناية الرجالية في أوروبا.

تعقيم وخصوصية

بروتوكولات تعقيم صارمة وغرف خاصة لتجربة راقية ومريحة.

نتائج فورية

جلسات مصممة لتشعر بالفرق من أول زيارة، في الشعر والبشرة معاً.

رؤية تسويقية

تامر ليس فقط حلاقاً، بل علامة تجارية شخصية يتم بناؤها بعناية.

فريق مركز تامر للتجميل

خبرة دولية موثّقة

+15 سنة

); // Services Section const ServicesSection: React.FC = () => (

خدماتنا الفاخرة

مجموعة متكاملة من الخدمات المتخصصة في الحلاقة الرجالية، العناية بالبشرة، والليزر، مصممة لتلائم نمط حياة الرجل العصري.

} delay={0} /> } delay={80} /> } delay={160} /> } delay={240} />
); // Pricing & Packages Section const PricingSection: React.FC = () => { const handleWhatsAppBooking = () => { const url = `https://wa.me/${HERO_WHATSAPP}?text=${encodeURIComponent( "مرحباً، أريد حجز جلسة باقة عناية في مركز تامر للتجميل" )}`; window.open(url, "_blank"); }; return ( <> {/* Gold CTA Section */}

هل أنت مستعد للتحول؟

جرّب الفرق الذي يمكن أن تحدثه العناية الرجالية على مستوى عالمي والرعاية الشخصية المخصصة. احجز جلستك اليوم وارفع علامتك التجارية الشخصية.

مواعيد في نفس اليوم متاحة • نرحب بالزيارات دون موعد

{/* Pricing Plans */}

الأسعار والباقات

استثمر في نفسك مع باقات العناية الفاخرة لدينا

{/* Basic Care */}

العناية الأساسية

150 شيكل

لكل جلسة

    {[ "قص شعر وتصفيف فاخر", "تشذيب وتشكيل اللحية", "خدمة المنشفة الساخنة", "تدليك فروة الرأس", "مشروب مجاني", ].map(item => (
  • {item}
    • ))}
{/* Executive Facial */}
الأكثر طلباً

العناية التنفيذية بالوجه

280 شيكل

لكل جلسة

    {[ "علاج هيدروفيشل عميق", "تحليل متقدم للبشرة", "تطبيق سيروم مخصص", "تدليك الوجه والرقبة", "مجموعة العناية بالبشرة", ].map(item => (
  • {item}
    • ))}
{/* VIP Experience */}

تجربة VIP النخبة

450 شيكل

لكل جلسة

    {[ "خدمة العناية الكاملة", "علاج الوجه الفاخر", "نحت اللحية", "العناية باليدين والأظافر", "جناح خاص", "حزمة منتجات فاخرة", ].map(item => (
  • {item}
    • ))}
); }; // Gallery with Filters const FilteredGallery: React.FC = () => { const [serviceFilter, setServiceFilter] = useState("الكل"); const [barberFilter, setBarberFilter] = useState("الكل"); // Note: useScrollReveal is called in the main App component, // so it will apply to all ".reveal" elements on this page. const galleryData = [ { id: 1, src: "https://images.pexels.com/photos/7697313/pexels-photo-7697313.jpeg?auto=compress&cs=tinysrgb&w=800", title: "قصة شعر عصرية", category: "حلاقة", barber: "تامر", }, { id: 2, src: "https://images.pexels.com/photos/7697312/pexels-photo-7697312.jpeg?auto=compress&cs=tinysrgb&w=800", title: "تحديد لحية بالليزر", category: "ليزر", barber: "أحمد", }, { id: 3, src: "https://images.pexels.com/photos/3993445/pexels-photo-3993445.jpeg?auto=compress&cs=tinysrgb&w=800", title: "جلسة هيدرافيشل", category: "بشرة", barber: "سامي", }, { id: 4, src: "https://images.pexels.com/photos/7697367/pexels-photo-7697367.jpeg?auto=compress&cs=tinysrgb&w=800", title: "ستايل كلاسيك رسمي", category: "حلاقة", barber: "تامر", }, { id: 5, src: "https://images.pexels.com/photos/7697390/pexels-photo-7697390.jpeg?auto=compress&cs=tinysrgb&w=800", title: "تنظيف بشرة عميق", category: "بشرة", barber: "أحمد", }, { id: 6, src: "https://images.pexels.com/photos/7697394/pexels-photo-7697394.jpeg?auto=compress&cs=tinysrgb&w=800", title: "ستايل كيرلي", category: "حلاقة", barber: "سامي", }, ]; const filteredImages = galleryData.filter(item => { const byService = serviceFilter === "الكل" || item.category === serviceFilter; const byBarber = barberFilter === "الكل" || item.barber === barberFilter; return byService && byBarber; }); const FilterButton: React.FC<{ label: string; active: boolean; onClick: () => void; }> = ({ label, active, onClick }) => ( ); return ( ); }; // Testimonials const TestimonialsSection: React.FC = () => { const testimonials = [ { name: "كريم حسن", review: "تامر غيّر ليس فقط مظهري، بل ثقتي بنفسي بالكامل. التفاصيل الصغيرة تصنع فرقاً كبيراً.", role: "رجل أعمال", }, { name: "عمر صالح", review: "أفضل تجربة عناية رجالية في رام الله. جلسة الهيدرافيشل قبل مناسبة مهمة أصبحت عادة ثابتة.", role: "مدير شركة", }, { name: "أحمد ناصر", review: "مكان فاخر، هادئ، ونظيف جداً. الحجز عبر الواتساب سهل والالتزام بالمواعيد ممتاز.", role: "مستشار تقني", }, ]; return (

آراء عملائنا

موثوق من قبل الرجال المميزين في رام الله والمنطقة، ممن يبحثون عن مستوى مختلف من العناية.

{testimonials.map((t, i) => (
{Array.from({ length: 5 }).map((_, idx) => ( ))}

“{t.review}”

{t.name}

{t.role}

))}
); }; // Footer + Contact const Footer: React.FC = () => { const WHATSAPP_NUMBER = HERO_WHATSAPP; return (