<!DOCTYPE html>
<html lang="en" dir="ltr" class="scroll-smooth">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pure Pets | The Modern Pet Marketplace</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800&family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
brand: '#b91c4d', // Matched to your logo color
brandDark: '#901239',
brandLight: '#fdf2f5',
},
fontFamily: {
sans: ['Inter', 'Cairo', 'sans-serif'],
},
animation: {
'float': 'float 6s ease-in-out infinite',
},
keyframes: {
float: {
'0%, 100%': { transform: 'translateY(0)' },
'50%': { transform: 'translateY(-20px)' },
}
}
}
}
}
</script>
<style>
/* Language Display Logic */
html[lang="en"] .lang-ar { display: none !important; }
html[lang="ar"] .lang-en { display: none !important; }
html[lang="ar"] body { font-family: 'Cairo', sans-serif; }
html[lang="en"] body { font-family: 'Inter', sans-serif; }
/* Glassmorphism utility */
.glass {
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.3);
}
/* Scroll Animations */
.fade-up {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.fade-up.visible {
opacity: 1;
transform: translateY(0);
}
/* Mock Phone CSS */
.phone-frame {
border: 12px solid #1f2937;
border-radius: 2.5rem;
position: relative;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
background: white;
overflow: hidden;
}
.phone-notch {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 120px;
height: 25px;
background: #1f2937;
border-bottom-left-radius: 1rem;
border-bottom-right-radius: 1rem;
z-index: 10;
}
</style>
</head>
<body class="bg-slate-50 text-slate-800 antialiased overflow-x-hidden">
<nav class="fixed w-full z-50 transition-all duration-300 glass" id="navbar">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between items-center h-20">
<div class="flex items-center gap-3">
<img src="PureIcon.png" alt="Pure Pets Logo" class="h-12 w-12 object-contain shadow-sm rounded-full" onerror="this.src='https://via.placeholder.com/48/b91c4d/ffffff?text=P'">
<span class="font-bold text-2xl tracking-tight text-brand">Pure Pets</span>
</div>
<div class="hidden md:flex items-center gap-8">
<a href="#about" class="text-slate-600 hover:text-brand font-medium transition-colors">
<span class="lang-en">About</span>
<span class="lang-ar">عن التطبيق</span>
</a>
<a href="#features" class="text-slate-600 hover:text-brand font-medium transition-colors">
<span class="lang-en">Features</span>
<span class="lang-ar">الميزات</span>
</a>
<a href="#how-it-works" class="text-slate-600 hover:text-brand font-medium transition-colors">
<span class="lang-en">How it Works</span>
<span class="lang-ar">كيف يعمل</span>
</a>
<button onclick="toggleLanguage()" class="flex items-center gap-2 bg-slate-100 hover:bg-slate-200 text-slate-700 px-4 py-2 rounded-full font-medium transition-colors">
<i class="fa-solid fa-globe text-brand"></i>
<span class="lang-en">عربي</span>
<span class="lang-ar">English</span>
</button>
<a href="#download" class="bg-brand hover:bg-brandDark text-white px-6 py-2.5 rounded-full font-semibold transition-all shadow-lg shadow-brand/30 hover:-translate-y-0.5">
<span class="lang-en">Download</span>
<span class="lang-ar">تحميل</span>
</a>
</div>
<div class="md:hidden flex items-center gap-4">
<button onclick="toggleLanguage()" class="text-slate-600 p-2">
<i class="fa-solid fa-globe text-xl"></i>
</button>
<button class="text-slate-600 hover:text-brand focus:outline-none p-2">
<i class="fa-solid fa-bars text-2xl"></i>
</button>
</div>
</div>
</div>
</nav>
<section class="relative pt-32 pb-20 lg:pt-48 lg:pb-32 overflow-hidden bg-gradient-to-br from-brandLight to-white">
<div class="absolute top-0 right-0 -translate-y-12 translate-x-1/3 w-[800px] h-[800px] bg-brand/5 rounded-full blur-3xl"></div>
<div class="absolute bottom-0 left-0 translate-y-1/3 -translate-x-1/3 w-[600px] h-[600px] bg-rose-200/20 rounded-full blur-3xl"></div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
<div class="grid lg:grid-cols-2 gap-12 lg:gap-8 items-center">
<div class="fade-up">
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white shadow-sm border border-slate-100 mb-6 text-sm font-medium text-brand">
<span class="relative flex h-2 w-2">
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-brand opacity-75"></span>
<span class="relative inline-flex rounded-full h-2 w-2 bg-brand"></span>
</span>
<span class="lang-en">Version 1.0 is live!</span>
<span class="lang-ar">الإصدار 1.0 متاح الآن!</span>
</div>
<h1 class="text-5xl lg:text-7xl font-extrabold text-slate-900 tracking-tight leading-tight mb-6">
<span class="lang-en">The Modern Marketplace for <span class="text-transparent bg-clip-text bg-gradient-to-r from-brand to-rose-400">Pet Lovers.</span></span>
<span class="lang-ar">السوق الحديث لمحبي <span class="text-transparent bg-clip-text bg-gradient-to-r from-brand to-rose-400">الحيوانات الأليفة.</span></span>
</h1>
<p class="text-lg text-slate-600 mb-8 max-w-xl leading-relaxed">
<span class="lang-en">Discover, buy, and sell pets and accessories in a trusted, real-time community. Safe, simple, and pure.</span>
<span class="lang-ar">اكتشف، اشترِ، وبِع الحيوانات الأليفة ومستلزماتها في مجتمع موثوق ولحظي. آمن، بسيط، ونقي.</span>
</p>
<div class="flex flex-wrap gap-4">
<a href="#download" class="flex items-center justify-center gap-3 bg-slate-900 hover:bg-black text-white px-8 py-4 rounded-full font-semibold transition-all hover:-translate-y-1 shadow-xl shadow-slate-900/20">
<i class="fa-brands fa-apple text-xl"></i>
<div class="text-start">
<div class="text-[10px] leading-none text-slate-300">Download on the</div>
<div class="leading-none mt-1">App Store</div>
</div>
</a>
<a href="#download" class="flex items-center justify-center gap-3 bg-white hover:bg-slate-50 text-slate-900 border border-slate-200 px-8 py-4 rounded-full font-semibold transition-all hover:-translate-y-1 shadow-lg shadow-slate-200/50">
<i class="fa-brands fa-google-play text-xl text-brand"></i>
<div class="text-start">
<div class="text-[10px] leading-none text-slate-500">GET IT ON</div>
<div class="leading-none mt-1">Google Play</div>
</div>
</a>
</div>
</div>
<div class="relative lg:h-[600px] flex justify-center lg:justify-end fade-up delay-200">
<div class="relative w-[300px] h-[600px] phone-frame animate-float">
<div class="phone-notch"></div>
<div class="w-full h-full bg-slate-50 overflow-hidden flex flex-col pt-10">
<div class="px-4 py-2 flex justify-between items-center bg-white border-b border-slate-100">
<span class="font-bold text-lg text-brand">Pure Pets</span>
<i class="fa-solid fa-magnifying-glass text-slate-400"></i>
</div>
<div class="flex-1 overflow-y-auto p-4 space-y-4">
<div class="bg-white rounded-xl shadow-sm border border-slate-100 overflow-hidden">
<img src="https://images.unsplash.com/photo-1543466835-00a7907e9de1?auto=format&fit=crop&w=400&q=80" alt="Dog" class="w-full h-40 object-cover">
<div class="p-3">
<div class="flex justify-between items-start">
<div>
<h3 class="font-bold text-slate-800">Golden Retriever</h3>
<p class="text-xs text-slate-500">New York, NY</p>
</div>
<span class="font-bold text-brand">$850</span>
</div>
</div>
</div>
<div class="bg-white rounded-xl shadow-sm border border-slate-100 overflow-hidden">
<img src="https://images.unsplash.com/photo-1552728089-57168eb0200c?auto=format&fit=crop&w=400&q=80" alt="Parrot" class="w-full h-40 object-cover">
<div class="p-3">
<div class="flex justify-between items-start">
<div>
<h3 class="font-bold text-slate-800">Macaw Parrot</h3>
<p class="text-xs text-slate-500">Miami, FL</p>
</div>
<span class="font-bold text-brand">$1,200</span>
</div>
</div>
</div>
</div>
<div class="h-16 bg-white border-t border-slate-100 flex justify-around items-center text-slate-400 pb-2">
<i class="fa-solid fa-house text-brand"></i>
<i class="fa-solid fa-heart"></i>
<div class="h-10 w-10 bg-brand rounded-full flex items-center justify-center text-white -mt-5 shadow-lg shadow-brand/40">
<i class="fa-solid fa-plus"></i>
</div>
<i class="fa-solid fa-comment-dots"></i>
<i class="fa-solid fa-user"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="about" class="py-20 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid md:grid-cols-2 gap-12 items-center fade-up">
<div class="order-2 md:order-1 relative p-8 bg-slate-50 rounded-3xl border border-slate-100">
<div class="absolute -top-4 -start-4 h-24 w-24 bg-brandLight rounded-full z-0"></div>
<img src="https://images.unsplash.com/photo-1450778869180-41d0601e046e?auto=format&fit=crop&w=800&q=80" alt="Pet care" class="relative z-10 rounded-2xl shadow-lg object-cover h-80 w-full">
</div>
<div class="order-1 md:order-2">
<h4 class="text-brand font-bold uppercase tracking-wider text-sm mb-2">
<span class="lang-en">About Us</span>
<span class="lang-ar">من نحن</span>
</h4>
<h2 class="text-3xl md:text-4xl font-bold text-slate-900 mb-6">
<span class="lang-en">A community built on trust and love for pets.</span>
<span class="lang-ar">مجتمع مبني على الثقة وحب الحيوانات الأليفة.</span>
</h2>
<p class="text-slate-600 mb-6 text-lg">
<span class="lang-en">Pure Pets is a premium marketplace dedicated to connecting pet enthusiasts. Whether you are looking to welcome a new companion into your home or searching for the highest quality accessories, we provide a clean, secure, and intuitive platform.</span>
<span class="lang-ar">بيور بيتس هو سوق متميز مخصص لربط هواة الحيوانات الأليفة. سواء كنت تتطلع للترحيب برفيق جديد في منزلك أو تبحث عن مستلزمات عالية الجودة، فإننا نقدم منصة نظيفة وآمنة وبديهية.</span>
</p>
<div class="flex items-center gap-4 text-slate-700 bg-slate-50 p-4 rounded-xl border border-slate-100">
<div class="h-12 w-12 rounded-full bg-green-100 flex items-center justify-center text-green-600 shrink-0">
<i class="fa-solid fa-shield-check text-xl"></i>
</div>
<div>
<h5 class="font-bold text-sm">
<span class="lang-en">Safe & Verified</span>
<span class="lang-ar">آمن وموثوق</span>
</h5>
<p class="text-xs text-slate-500 mt-1">
<span class="lang-en">Every user and listing is monitored for safety.</span>
<span class="lang-ar">تتم مراقبة كل مستخدم وإعلان لضمان الأمان.</span>
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="features" class="py-20 bg-slate-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center max-w-2xl mx-auto mb-16 fade-up">
<h2 class="text-3xl md:text-4xl font-bold text-slate-900 mb-4">
<span class="lang-en">Everything you need in one app</span>
<span class="lang-ar">كل ما تحتاجه في تطبيق واحد</span>
</h2>
<p class="text-slate-600">
<span class="lang-en">Designed with modern mobile patterns to make buying and selling as effortless as possible.</span>
<span class="lang-ar">مصمم بأنماط الموبايل الحديثة لجعل البيع والشراء أسهل ما يمكن.</span>
</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
<div class="glass p-8 rounded-3xl hover:-translate-y-2 transition-transform duration-300 fade-up">
<div class="h-14 w-14 rounded-2xl bg-brandLight text-brand flex items-center justify-center text-2xl mb-6">
<i class="fa-solid fa-bullhorn"></i>
</div>
<h3 class="text-xl font-bold text-slate-900 mb-3">
<span class="lang-en">Post Pet Ads</span>
<span class="lang-ar">انشر إعلانات الحيوانات</span>
</h3>
<p class="text-slate-600">
<span class="lang-en">Easily create detailed listings to buy or sell pets with custom tags and pricing.</span>
<span class="lang-ar">أنشئ إعلانات مفصلة بسهولة لبيع أو شراء الحيوانات مع وسوم وأسعار مخصصة.</span>
</p>
</div>
<div class="glass p-8 rounded-3xl hover:-translate-y-2 transition-transform duration-300 fade-up" style="transition-delay: 100ms;">
<div class="h-14 w-14 rounded-2xl bg-brandLight text-brand flex items-center justify-center text-2xl mb-6">
<i class="fa-solid fa-bone"></i>
</div>
<h3 class="text-xl font-bold text-slate-900 mb-3">
<span class="lang-en">Sell Accessories</span>
<span class="lang-ar">بيع المستلزمات</span>
</h3>
<p class="text-slate-600">
<span class="lang-en">A dedicated section for toys, cages, food, and all other pet care essentials.</span>
<span class="lang-ar">قسم مخصص للألعاب، الأقفاص، الطعام، وجميع أساسيات رعاية الحيوانات الأليفة.</span>
</p>
</div>
<div class="glass p-8 rounded-3xl hover:-translate-y-2 transition-transform duration-300 fade-up" style="transition-delay: 200ms;">
<div class="h-14 w-14 rounded-2xl bg-brandLight text-brand flex items-center justify-center text-2xl mb-6">
<i class="fa-regular fa-heart"></i>
</div>
<h3 class="text-xl font-bold text-slate-900 mb-3">
<span class="lang-en">Favorites System</span>
<span class="lang-ar">نظام المفضلة</span>
</h3>
<p class="text-slate-600">
<span class="lang-en">Save your favorite pets and items to your personal profile to review them later.</span>
<span class="lang-ar">احفظ الحيوانات والأشياء المفضلة لديك في ملفك الشخصي لمراجعتها لاحقاً.</span>
</p>
</div>
<div class="glass p-8 rounded-3xl hover:-translate-y-2 transition-transform duration-300 fade-up">
<div class="h-14 w-14 rounded-2xl bg-brandLight text-brand flex items-center justify-center text-2xl mb-6">
<i class="fa-regular fa-comments"></i>
</div>
<h3 class="text-xl font-bold text-slate-900 mb-3">
<span class="lang-en">Real-time Chat</span>
<span class="lang-ar">محادثة فورية</span>
</h3>
<p class="text-slate-600">
<span class="lang-en">Communicate instantly with buyers and sellers using our lightning-fast messaging system.</span>
<span class="lang-ar">تواصل فوراً مع المشترين والبائعين باستخدام نظام المراسلة السريع جداً لدينا.</span>
</p>
</div>
<div class="glass p-8 rounded-3xl hover:-translate-y-2 transition-transform duration-300 fade-up" style="transition-delay: 100ms;">
<div class="h-14 w-14 rounded-2xl bg-brandLight text-brand flex items-center justify-center text-2xl mb-6">
<i class="fa-regular fa-images"></i>
</div>
<h3 class="text-xl font-bold text-slate-900 mb-3">
<span class="lang-en">Interactive Galleries</span>
<span class="lang-ar">معارض صور تفاعلية</span>
</h3>
<p class="text-slate-600">
<span class="lang-en">View high-resolution images with fullscreen support and pinch-to-zoom capabilities.</span>
<span class="lang-ar">شاهد صور عالية الدقة مع دعم ملء الشاشة وإمكانية التكبير والتصغير.</span>
</p>
</div>
<div class="glass p-8 rounded-3xl hover:-translate-y-2 transition-transform duration-300 fade-up" style="transition-delay: 200ms;">
<div class="h-14 w-14 rounded-2xl bg-brandLight text-brand flex items-center justify-center text-2xl mb-6">
<i class="fa-solid fa-bolt"></i>
</div>
<h3 class="text-xl font-bold text-slate-900 mb-3">
<span class="lang-en">Secure & Fast Backend</span>
<span class="lang-ar">خوادم آمنة وسريعة</span>
</h3>
<p class="text-slate-600">
<span class="lang-en">Powered by Firebase for instantaneous data syncing and robust security.</span>
<span class="lang-ar">مدعوم بواسطة Firebase لمزامنة البيانات اللحظية والأمان القوي.</span>
</p>
</div>
</div>
</div>
</section>
<section id="how-it-works" class="py-20 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16 fade-up">
<h2 class="text-3xl md:text-4xl font-bold text-slate-900 mb-4">
<span class="lang-en">How It Works</span>
<span class="lang-ar">كيف يعمل</span>
</h2>
<div class="h-1 w-20 bg-brand mx-auto rounded-full"></div>
</div>
<div class="relative">
<div class="hidden md:block absolute top-12 left-[10%] right-[10%] h-0.5 bg-slate-200" style="z-index: 0;"></div>
<div class="grid md:grid-cols-3 gap-12 text-center relative z-10">
<div class="fade-up">
<div class="w-24 h-24 mx-auto bg-white rounded-full shadow-xl border border-slate-100 flex items-center justify-center text-3xl text-brand mb-6">
1
</div>
<h3 class="text-xl font-bold text-slate-900 mb-2">
<span class="lang-en">Create an Account</span>
<span class="lang-ar">إنشاء حساب</span>
</h3>
<p class="text-slate-600">
<span class="lang-en">Sign up in seconds and build your custom pet lover profile.</span>
<span class="lang-ar">سجل في ثوانٍ وابنِ ملفك الشخصي المخصص لمحبي الحيوانات.</span>
</p>
</div>
<div class="fade-up" style="transition-delay: 150ms;">
<div class="w-24 h-24 mx-auto bg-brand rounded-full shadow-xl shadow-brand/30 text-white flex items-center justify-center text-3xl mb-6">
2
</div>
<h3 class="text-xl font-bold text-slate-900 mb-2">
<span class="lang-en">Post or Browse</span>
<span class="lang-ar">انشر أو تصفح</span>
</h3>
<p class="text-slate-600">
<span class="lang-en">Search through categories or post your own listing with beautiful photos.</span>
<span class="lang-ar">ابحث عبر الأقسام أو انشر إعلانك الخاص مع صور جميلة.</span>
</p>
</div>
<div class="fade-up" style="transition-delay: 300ms;">
<div class="w-24 h-24 mx-auto bg-white rounded-full shadow-xl border border-slate-100 flex items-center justify-center text-3xl text-brand mb-6">
3
</div>
<h3 class="text-xl font-bold text-slate-900 mb-2">
<span class="lang-en">Chat & Deal</span>
<span class="lang-ar">تحدث وأتمم الصفقة</span>
</h3>
<p class="text-slate-600">
<span class="lang-en">Use our real-time chat to negotiate, ask questions, and complete the adoption or sale securely.</span>
<span class="lang-ar">استخدم المحادثة الفورية للتفاوض، طرح الأسئلة، وإتمام عملية التبني أو البيع بأمان.</span>
</p>
</div>
</div>
</div>
</div>
</section>
<section id="download" class="relative py-24 overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-r from-brand to-rose-500 z-0"></div>
<div class="absolute top-0 right-0 w-[40rem] h-[40rem] bg-white/10 rounded-full blur-3xl -translate-y-1/2 translate-x-1/3"></div>
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 text-center fade-up">
<img src="PureIcon.png" alt="Pure Pets Icon" class="h-20 w-20 mx-auto mb-8 bg-white p-2 rounded-2xl shadow-2xl rotate-3" onerror="this.style.display='none'">
<h2 class="text-4xl md:text-6xl font-extrabold text-white mb-6">
<span class="lang-en">Ready to find your pure companion?</span>
<span class="lang-ar">مستعد للعثور على رفيقك النقي؟</span>
</h2>
<p class="text-rose-100 text-xl mb-10 max-w-2xl mx-auto">
<span class="lang-en">Join thousands of users on the fastest growing pet marketplace. Start using Pure Pets today.</span>
<span class="lang-ar">انضم إلى آلاف المستخدمين في أسرع أسواق الحيوانات الأليفة نمواً. ابدأ باستخدام بيور بيتس اليوم.</span>
</p>
<div class="flex flex-wrap justify-center gap-4">
<a href="#" class="flex items-center justify-center gap-3 bg-white text-brand px-8 py-4 rounded-full font-bold transition-all hover:scale-105 shadow-xl">
<i class="fa-brands fa-apple text-2xl text-slate-900"></i>
<div class="text-start">
<div class="text-[10px] leading-none text-slate-500">Download on the</div>
<div class="leading-none mt-1 text-slate-900">App Store</div>
</div>
</a>
<a href="#" class="flex items-center justify-center gap-3 bg-slate-900 text-white px-8 py-4 rounded-full font-bold transition-all hover:scale-105 shadow-xl">
<i class="fa-brands fa-google-play text-2xl text-brand"></i>
<div class="text-start">
<div class="text-[10px] leading-none text-slate-400">GET IT ON</div>
<div class="leading-none mt-1">Google Play</div>
</div>
</a>
</div>
</div>
</section>
<footer class="bg-slate-900 text-slate-300 py-12 border-t border-slate-800">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
<div class="col-span-1 md:col-span-2">
<div class="flex items-center gap-3 mb-4">
<img src="PureIcon.png" alt="Pure Pets Logo" class="h-10 w-10 grayscale brightness-200" onerror="this.src='https://via.placeholder.com/40/ffffff/000000?text=P'">
<span class="font-bold text-2xl tracking-tight text-white">Pure Pets</span>
</div>
<p class="text-slate-400 max-w-sm mb-6">
<span class="lang-en">The premium mobile app marketplace connecting pet lovers, buyers, and sellers in a safe, real-time environment.</span>
<span class="lang-ar">تطبيق الموبايل المتميز لربط محبي الحيوانات الأليفة والمشترين والبائعين في بيئة آمنة وفورية.</span>
</p>
<div class="flex gap-4">
<a href="#" class="h-10 w-10 rounded-full bg-slate-800 flex items-center justify-center hover:bg-brand transition-colors"><i class="fa-brands fa-twitter"></i></a>
<a href="#" class="h-10 w-10 rounded-full bg-slate-800 flex items-center justify-center hover:bg-brand transition-colors"><i class="fa-brands fa-instagram"></i></a>
<a href="#" class="h-10 w-10 rounded-full bg-slate-800 flex items-center justify-center hover:bg-brand transition-colors"><i class="fa-brands fa-facebook-f"></i></a>
</div>
</div>
<div>
<h4 class="text-white font-bold mb-4">
<span class="lang-en">Quick Links</span>
<span class="lang-ar">روابط سريعة</span>
</h4>
<ul class="space-y-2">
<li><a href="#about" class="hover:text-white transition-colors"><span class="lang-en">About Us</span><span class="lang-ar">من نحن</span></a></li>
<li><a href="#features" class="hover:text-white transition-colors"><span class="lang-en">Features</span><span class="lang-ar">الميزات</span></a></li>
<li><a href="#how-it-works" class="hover:text-white transition-colors"><span class="lang-en">How it Works</span><span class="lang-ar">كيف يعمل</span></a></li>
<li><a href="#" class="hover:text-white transition-colors"><span class="lang-en">Support</span><span class="lang-ar">الدعم الفني</span></a></li>
</ul>
</div>
<div>
<h4 class="text-white font-bold mb-4">
<span class="lang-en">Legal</span>
<span class="lang-ar">قانوني</span>
</h4>
<ul class="space-y-2">
<li><a href="#" class="hover:text-white transition-colors"><span class="lang-en">Privacy Policy</span><span class="lang-ar">سياسة الخصوصية</span></a></li>
<li><a href="#" class="hover:text-white transition-colors"><span class="lang-en">Terms of Service</span><span class="lang-ar">شروط الخدمة</span></a></li>
<li><a href="#" class="hover:text-white transition-colors"><span class="lang-en">Safety Guidelines</span><span class="lang-ar">إرشادات الأمان</span></a></li>
</ul>
</div>
</div>
<div class="pt-8 border-t border-slate-800 text-center md:flex md:justify-between items-center">
<p class="text-sm text-slate-500">
© 2026 Pure Pets. <span class="lang-en">All rights reserved.</span><span class="lang-ar">جميع الحقوق محفوظة.</span>
</p>
</div>
</div>
</footer>
<script>
// --- Language Toggle Logic ---
function toggleLanguage() {
const htmlTag = document.documentElement;
const currentLang = htmlTag.getAttribute('lang');
if (currentLang === 'en') {
htmlTag.setAttribute('lang', 'ar');
htmlTag.setAttribute('dir', 'rtl');
} else {
htmlTag.setAttribute('lang', 'en');
htmlTag.setAttribute('dir', 'ltr');
}
}
// --- Navbar Scroll Effect ---
window.addEventListener('scroll', () => {
const navbar = document.getElementById('navbar');
if (window.scrollY > 20) {
navbar.classList.add('shadow-md');
navbar.classList.replace('bg-white/70', 'bg-white/95');
} else {
navbar.classList.remove('shadow-md');
navbar.classList.replace('bg-white/95', 'bg-white/70');
}
});
// --- Scroll Animation Observer ---
const observerOptions = {
root: null,
rootMargin: '0px',
threshold: 0.15
};
const observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
observer.unobserve(entry.target); // Run once
}
});
}, observerOptions);
document.querySelectorAll('.fade-up').forEach((elem) => {
observer.observe(elem);
});
</script>
</body>
</html>