import React, { useState, useEffect } from ‘react’; import { Button } from “@/components/ui/button”; import { Card, CardContent } from “@/components/ui/card”; import { Input } from “@/components/ui/input”; import { Textarea } from “@/components/ui/textarea”; import { Badge } from “@/components/ui/badge”; import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from “@/components/ui/accordion”; import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, CarouselApi } from “@/components/ui/carousel”; import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from “@/components/ui/dialog”; import { ArrowLeft, ArrowRight, X } from “lucide-react”; import { useToast } from “@/hooks/use-toast”; interface LanguageContent { // Hero Section heroTitle: string; heroSubtitle: string; heroCTA: string; // About Section aboutTitle: string; aboutText: string; // Solutions Section solutionsTitle: string; solutions: { title: string; description: string; icon: string; }[]; // Gallery Section galleryTitle: string; galleryItems: { title: string; description: string; }[]; // Testimonials Section testimonialsTitle: string; testimonials: { quote: string; author: string; role: string; }[]; // Contact Form contactTitle: string; contactSubtitle: string; formLabels: { name: string; email: string; phone: string; message: string; submit: string; }; // FAQ Section faqTitle: string; faqs: { question: string; answer: string; }[]; // Footer footerAbout: string; footerText: string; } const content: { [key: string]: LanguageContent } = { en: { heroTitle: “Custom Therapeutic Card Decks for Professionals & Organizations”, heroSubtitle: “Empowering mental health professionals, educators, and organizations with personalized therapeutic tools that inspire, heal, and transform lives.”, heroCTA: “Let’s Talk”, aboutTitle: “About Cardim Group”, aboutText: “Cardim Group is an international leader in developing, manufacturing, and distributing custom therapeutic and printed card decks. We specialize in creating personalized solutions for diverse professional communities, combining therapeutic expertise with innovative design to deliver tools that make a real difference in people’s lives.”, solutionsTitle: “Solutions for Every Professional”, solutions: [ { title: “Mental Health Professionals”, description: “Therapeutic cards for emotion regulation, trauma healing, and personal empowerment”, icon: “🧠” }, { title: “Education Sector”, description: “Educational card sets for students and teaching staff development”, icon: “📚” }, { title: “Treatment Centers & Institutions”, description: “Custom clinical card sets tailored to specific therapeutic needs”, icon: “🏥” }, { title: “Businesses & Organizations”, description: “Branded inspirational cards for training, motivation, and corporate gifts”, icon: “🏢” } ], galleryTitle: “Our Card Collections”, galleryItems: [ { title: “Emotion Regulation Cards”, description: “Help clients identify and manage emotions effectively” }, { title: “Trauma Recovery Set”, description: “Specialized cards for trauma-informed therapy sessions” }, { title: “Children’s Therapy Cards”, description: “Colorful, engaging cards designed specifically for young clients” }, { title: “Corporate Wellness Cards”, description: “Professional development and team building tools” }, { title: “Educational Cards”, description: “Learning tools for teachers and special education professionals” }, { title: “Family Therapy Set”, description: “Cards designed to facilitate family communication and healing” } ], testimonialsTitle: “What Our Clients Say”, testimonials: [ { quote: “The therapeutic cards from Cardim Group have transformed my practice. My clients connect with them immediately, and I’ve seen remarkable breakthroughs.”, author: “Dr. Sarah Johnson”, role: “Clinical Psychologist” }, { quote: “As an educator, these cards have become an essential tool in my classroom. They help students express their feelings and build emotional intelligence.”, author: “Maria Rodriguez”, role: “Special Education Teacher” }, { quote: “The custom corporate cards we ordered exceeded our expectations. They perfectly captured our company values and have become a meaningful gift for our team.”, author: “Ahmed Al-Hassan”, role: “HR Director” } ], contactTitle: “Ready to Transform Your Practice?”, contactSubtitle: “Get in touch with us to discuss your custom therapeutic card needs. We’re here to help you create the perfect tools for your work.”, formLabels: { name: “Full Name”, email: “Email Address”, phone: “Phone Number”, message: “Tell us about your needs”, submit: “Let’s Talk” }, faqTitle: “Frequently Asked Questions”, faqs: [ { question: “How long does the custom design process take?”, answer: “Typically, our custom design process takes 2-4 weeks from initial consultation to final delivery, depending on the complexity and scope of your project.” }, { question: “What’s the minimum order quantity?”, answer: “Our minimum order is 100 sets, but we can discuss smaller quantities for specific therapeutic or educational needs.” }, { question: “Do you ship internationally?”, answer: “Yes, we ship worldwide. Shipping costs and delivery times vary by location. We’ll provide detailed shipping information during your consultation.” }, { question: “Can you work with our existing therapeutic framework?”, answer: “Absolutely! We specialize in creating cards that integrate seamlessly with various therapeutic approaches and educational methodologies.” } ], footerAbout: “About Cardim Group”, footerText: “Leading the way in custom therapeutic card design and production, serving mental health professionals, educators, and organizations worldwide.” }, ar: { heroTitle: “مجموعات بطاقات علاجية مخصصة للمختصين والمؤسسات”, heroSubtitle: “تمكين أخصائيي الصحة النفسية والمعلمين والمؤسسات بأدوات علاجية شخصية تلهم وتشفي وتحول الحياة.”, heroCTA: “ابدأ الحديث معنا”, aboutTitle: “حول مجموعة كارديم”, aboutText: “مجموعة كارديم هي شركة رائدة دولياً في تطوير وتصنيع وتوزيع مجموعات البطاقات العلاجية والمطبوعة المخصصة. نحن متخصصون في إنشاء حلول شخصية للمجتمعات المهنية المتنوعة، مما يجمع بين الخبرة العلاجية والتصميم المبتكر لتقديم أدوات تحدث فرقاً حقيقياً في حياة الناس.”, solutionsTitle: “حلول لكل مختص”, solutions: [ { title: “أخصائيو الصحة النفسية”, description: “بطاقات علاجية لتنظيم المشاعر وشفاء الصدمات والتمكين الشخصي”, icon: “🧠” }, { title: “القطاع التعليمي”, description: “مجموعات بطاقات تعليمية للطلاب وتطوير الكادر التدريسي”, icon: “📚” }, { title: “مراكز العلاج والمؤسسات”, description: “مجموعات بطاقات سريرية مخصصة للاحتياجات العلاجية المحددة”, icon: “🏥” }, { title: “الشركات والمؤسسات”, description: “بطاقات إلهامية ذات علامة تجارية للتدريب والتحفيز والهدايا المؤسسية”, icon: “🏢” } ], galleryTitle: “مجموعات البطاقات لدينا”, galleryItems: [ { title: “بطاقات تنظيم المشاعر”, description: “تساعد العملاء على تحديد وإدارة المشاعر بفعالية” }, { title: “مجموعة الشفاء من الصدمات”, description: “بطاقات متخصصة لجلسات العلاج المدرك للصدمات” }, { title: “بطاقات علاج الأطفال”, description: “بطاقات ملونة وجذابة مصممة خصيصاً للعملاء الصغار” }, { title: “بطاقات العافية المؤسسية”, description: “أدوات التطوير المهني وبناء الفريق” }, { title: “البطاقات التعليمية”, description: “أدوات تعلم للمعلمين ومختصي التربية الخاصة” }, { title: “مجموعة العلاج الأسري”, description: “بطاقات مصممة لتسهيل التواصل والشفاء الأسري” } ], testimonialsTitle: “ماذا يقول عملاؤنا”, testimonials: [ { quote: “البطاقات العلاجية من مجموعة كارديم غيرت ممارستي. عملائي يتواصلون معها فوراً، ولقد رأيت اختراقات ملحوظة.”, author: “د. سارة جونسون”, role: “أخصائية نفسية سريرية” }, { quote: “كمعلمة، أصبحت هذه البطاقات أداة أساسية في صفي. تساعد الطلاب على التعبير عن مشاعرهم وبناء الذكاء العاطفي.”, author: “ماريا رودريغيز”, role: “معلمة تربية خاصة” }, { quote: “البطاقات المؤسسية المخصصة التي طلبناها فاقت توقعاتنا. لقد جسدت قيم شركتنا بشكل مثالي وأصبحت هدية ذات معنى لفريقنا.”, author: “أحمد الحسن”, role: “مدير الموارد البشرية” } ], contactTitle: “مستعد لتحويل ممارستك؟”, contactSubtitle: “تواصل معنا لمناقشة احتياجاتك من البطاقات العلاجية المخصصة. نحن هنا لمساعدتك في إنشاء الأدوات المثالية لعملك.”, formLabels: { name: “الاسم الكامل”, email: “عنوان البريد الإلكتروني”, phone: “رقم الهاتف”, message: “أخبرنا عن احتياجاتك”, submit: “ابدأ الحديث معنا” }, faqTitle: “الأسئلة الشائعة”, faqs: [ { question: “كم يستغرق وقت عملية التصميم المخصص؟”, answer: “عادة، تستغرق عملية التصميم المخصص من 2-4 أسابيع من الاستشارة الأولية إلى التسليم النهائي، حسب تعقيد ونطاق مشروعك.” }, { question: “ما هي الكمية الدنيا للطلب؟”, answer: “الحد الأدنى للطلب هو 100 مجموعة، لكن يمكننا مناقشة كميات أصغر للاحتياجات العلاجية أو التعليمية المحددة.” }, { question: “هل تقومون بالشحن دولياً؟”, answer: “نعم، نشحن إلى جميع أنحاء العالم. تختلف تكاليف الشحن وأوقات التسليم حسب الموقع. سنقدم معلومات شحن مفصلة أثناء استشارتك.” }, { question: “هل يمكنكم العمل مع إطار العمل العلاجي الحالي لدينا؟”, answer: “بالطبع! نحن متخصصون في إنشاء بطاقات تتكامل بسلاسة مع مختلف المناهج العلاجية والمنهجيات التعليمية.” } ], footerAbout: “حول مجموعة كارديم”, footerText: “رائدة في تصميم وإنتاج البطاقات العلاجية المخصصة، تخدم أخصائيي الصحة النفسية والمعلمين والمؤسسات في جميع أنحاء العالم.” } }; const CardimLandingPage = () => { const [currentLanguage, setCurrentLanguage] = useState(‘en’); const [formData, setFormData] = useState({ name: ”, email: ”, phone: ”, message: ” }); const [api, setApi] = useState(); const [selectedGalleryItem, setSelectedGalleryItem] = useState(null); const [isGalleryOpen, setIsGalleryOpen] = useState(false); const { toast } = useToast(); const currentContent = content[currentLanguage]; const isRTL = currentLanguage === ‘ar’; // Auto-play functionality useEffect(() => { if (!api) return; const autoplay = () => { if (api.canScrollNext()) { api.scrollNext(); } else { api.scrollTo(0); } }; const interval = setInterval(autoplay, 3000); // Pause auto-play on user interaction const handlePointerDown = () => clearInterval(interval); const handlePointerUp = () => { clearInterval(interval); setTimeout(() => { const newInterval = setInterval(autoplay, 3000); return () => clearInterval(newInterval); }, 3000); }; api.on(‘pointerDown’, handlePointerDown); api.on(‘pointerUp’, handlePointerUp); return () => { clearInterval(interval); api.off(‘pointerDown’, handlePointerDown); api.off(‘pointerUp’, handlePointerUp); }; }, [api]); const toggleLanguage = () => { setCurrentLanguage(currentLanguage === ‘en’ ? ‘ar’ : ‘en’); }; const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); console.log(‘Form submitted:’, formData); toast({ title: currentLanguage === ‘en’ ? “Message Sent!” : “تم إرسال الرسالة!”, description: currentLanguage === ‘en’ ? “We’ll get back to you within 24 hours.” : “سنرد عليك خلال 24 ساعة.”, }); // Reset form setFormData({ name: ”, email: ”, phone: ”, message: ” }); }; const handleInputChange = (field: string, value: string) => { setFormData(prev => ({ …prev, [field]: value })); }; // Slider content focused on therapeutic cards and activities const sliderImages = [ { url: “https://images.unsplash.com/photo-1606092195730-5d7b9af1efc5”, title: currentLanguage === ‘en’ ? “Therapeutic Card Sessions” : “جلسات البطاقات العلاجية”, description: currentLanguage === ‘en’ ? “Professional therapy sessions using custom card decks” : “جلسات علاج مهنية باستخدام مجموعات البطاقات المخصصة” }, { url: “https://images.unsplash.com/photo-1516321497487-e288fb19713f”, title: currentLanguage === ‘en’ ? “Custom Card Design Process” : “عملية تصميم البطاقات المخصصة”, description: currentLanguage === ‘en’ ? “Creating personalized therapeutic tools for mental health professionals” : “إنشاء أدوات علاجية شخصية لأخصائيي الصحة النفسية” }, { url: “https://images.unsplash.com/photo-1573164713714-d95e436ab8d6”, title: currentLanguage === ‘en’ ? “Group Therapy Activities” : “أنشطة العلاج الجماعي”, description: currentLanguage === ‘en’ ? “Interactive card-based activities for group therapeutic sessions” : “أنشطة تفاعلية قائمة على البطاقات لجلسات العلاج الجماعي” }, { url: “https://images.unsplash.com/photo-1576091160399-112ba8d25d1f”, title: currentLanguage === ‘en’ ? “Educational Card Sets” : “مجموعات البطاقات التعليمية”, description: currentLanguage === ‘en’ ? “Specialized cards for learning and emotional development” : “بطاقات متخصصة للتعلم والتطوير العاطفي” }, { url: “https://images.unsplash.com/photo-1559757148-5c350d0d3c56”, title: currentLanguage === ‘en’ ? “Family Therapy Tools” : “أدوات العلاج الأسري”, description: currentLanguage === ‘en’ ? “Cards designed to facilitate family communication and healing” : “بطاقات مصممة لتسهيل التواصل والشفاء الأسري” } ]; // Gallery images for the dialog const galleryImages = [ “https://images.unsplash.com/photo-1606092195730-5d7b9af1efc5?w=800”, “https://images.unsplash.com/photo-1516321497487-e288fb19713f?w=800”, “https://images.unsplash.com/photo-1573164713714-d95e436ab8d6?w=800”, “https://images.unsplash.com/photo-1576091160399-112ba8d25d1f?w=800”, “https://images.unsplash.com/photo-1559757148-5c350d0d3c56?w=800”, “https://images.unsplash.com/photo-1544717297-fa95b6ee9643?w=800” ]; const openGallery = (index: number) => { setSelectedGalleryItem(index); setIsGalleryOpen(true); }; return ( ); }; export default CardimLandingPage;