/home/awneajlw/.trash/storage.2/framework/views/133f8dac6a2526b0fc221050cc55869f.php
<?php echo $__env->make('frontend.component.header', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>
<?php if(session('error')): ?>
<div class="bg-red-100 text-red-800 p-4 rounded mb-4">
<?php echo e(session('error')); ?>
</div>
<?php endif; ?>
<?php if(session('success')): ?>
<div class="bg-green-100 text-green-800 p-4 rounded mb-4">
<?php echo e(session('success')); ?>
</div>
<?php endif; ?>
<!-- Hero Section -->
<section
id="home"
class="bg-gradient-to-br from-gray-50 to-sky-100 py-20 px-4"
>
<div class="max-w-7xl mx-auto rounded-3xl p-8 md:p-16 shadow-lg bg-white">
<div class="grid md:grid-cols-2 gap-16 items-center">
<!-- Text -->
<div class="p-4">
<h1
class="text-4xl md:text-5xl font-bold text-gray-900 mb-6 leading-tight"
>
Your Security is Our
<span class="block text-sky-800">Top Priority</span>
</h1>
<p class="text-lg text-gray-800 leading-relaxed">
Manage your business with ease using our software, offering
features like user management, zakat calculation, attendance
tracking, inventory management, and branch coordination—all in one
powerful solution.
</p>
</div>
<!-- Image -->
<div class="group overflow-hidden rounded-2xl shadow-xl">
<img
src="https://media.istockphoto.com/id/1412282189/photo/lock-network-technology-concept.jpg?s=612x612&w=0&k=20&c=hripuxLs9pS_7Ln6YWQR-Ow2_-BU5RdQ4vOY8s1q1iQ="
alt="Safeeyes business management software banner"
class="w-full h-96 rounded-2xl transition-transform duration-500 transform group-hover:scale-105"
loading="lazy"
/>
</div>
</div>
</div>
</section>
<hr class="border-t-2 border-gray-200" />
<!-- Services Section -->
<section
id="services"
class="max-w-7xl mx-auto px-6 py-20 bg-gradient-to-br from-gray-50 to-sky-100"
>
<p class="text-center text-5xl font-bold text-sky-800 mb-8">Services</p>
<div class="text-center mb-16">
<h2 class="text-4xl font-extrabold text-sky-800 leading-snug">
How <span class="text-sky-600">We Help You</span>
</h2>
<p class="mt-4 text-lg text-gray-600 max-w-2xl mx-auto">
Powerful features to manage people, processes, inventory, finances,
and more—efficiently and effortlessly.
</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
<div
class="bg-[#0C476C] p-6 rounded-2xl shadow-lg border border-sky-100 hover:shadow-2xl hover:scale-[1.02] transition-all duration-300"
>
<a href="<?php echo e(url('/service1')); ?>" class="flex items-start gap-4">
<img
src="https://safeeyesjewelers.com/public/frontend/images/SEO.png"
class="w-12 h-12"
alt="Zakat calculation icon"
loading="lazy"
/>
<div>
<h3 class="text-xl font-semibold text-white">Zakat</h3>
<p class="mt-2 text-sm text-white">
Monitor income, calculate zakat, and get insights by branch to
ensure compliance and transparency.
</p>
</div>
</a>
</div>
<div
class="bg-[#0C476C] p-6 rounded-2xl shadow-lg border border-sky-100 hover:shadow-2xl hover:scale-[1.02] transition-all duration-300"
>
<a href="<?php echo e(url('/service2')); ?>" class="flex items-start gap-4">
<img
src="https://safeeyesjewelers.com/public/frontend/images/SEO.png"
class="w-12 h-12"
alt="Attendance tracking icon"
loading="lazy"
/>
<div>
<h3 class="text-xl font-semibold text-white">Attendance</h3>
<p class="mt-2 text-sm text-white">
Log work hours, breaks, and shifts accurately with just one
click, boosting productivity and reporting.
</p>
</div>
</a>
</div>
<div
class="bg-[#0C476C] p-6 rounded-2xl shadow-lg border border-sky-100 hover:shadow-2xl hover:scale-[1.02] transition-all duration-300"
>
<a href="<?php echo e(url('/service3')); ?>" class="flex items-start gap-4">
<img
src="https://safeeyesjewelers.com/public/frontend/images/SEO.png"
class="w-12 h-12"
alt="Inventory categories icon"
loading="lazy"
/>
<div>
<h3 class="text-xl font-semibold text-white">
Inventory Categories
</h3>
<p class="mt-2 text-sm text-white">
Group and manage items by type, date, or user to keep your
inventory organized and easy to track.
</p>
</div>
</a>
</div>
<div
class="bg-[#0C476C] p-6 rounded-2xl shadow-lg border border-sky-100 hover:shadow-2xl hover:scale-[1.02] transition-all duration-300"
>
<a href="<?php echo e(url('/service4')); ?>" class="flex items-start gap-4">
<img
src="https://safeeyesjewelers.com/public/frontend/images/SEO.png"
class="w-12 h-12"
alt="Inventories tracking icon"
loading="lazy"
/>
<div>
<h3 class="text-xl font-semibold text-white">Inventories</h3>
<p class="mt-2 text-sm text-white">
Track products with IDs, assign them to branches, and control
who can view or edit each item.
</p>
</div>
</a>
</div>
<div
class="bg-[#0C476C] p-6 rounded-2xl shadow-lg border border-sky-100 hover:shadow-2xl hover:scale-[1.02] transition-all duration-300"
>
<a href="<?php echo e(url('/service5')); ?>" class="flex items-start gap-4">
<img
src="https://safeeyesjewelers.com/public/frontend/images/SEO.png"
class="w-12 h-12"
alt="Branches management icon"
loading="lazy"
/>
<div>
<h3 class="text-xl font-semibold text-white">Branches</h3>
<p class="mt-2 text-sm text-white">
Manage multiple branches with name, location, ID, and creation
dates—all in one central dashboard.
</p>
</div>
</a>
</div>
<div
class="bg-[#0C476C] p-6 rounded-2xl shadow-lg border border-sky-100 hover:shadow-2xl hover:scale-[1.02] transition-all duration-300"
>
<a href="<?php echo e(url('/service6')); ?>" class="flex items-start gap-4">
<img
src="https://safeeyesjewelers.com/public/frontend/images/SEO.png"
class="w-12 h-12"
alt="User management icon"
loading="lazy"
/>
<div>
<h3 class="text-xl font-semibold text-white">User Management</h3>
<p class="mt-2 text-sm text-white">
Add, edit, and remove users while tracking profiles, emails, and
their branch assignments.
</p>
</div>
</a>
</div>
<div
class="bg-[#0C476C] p-6 rounded-2xl shadow-lg border border-sky-100 hover:shadow-2xl hover:scale-[1.02] transition-all duration-300"
>
<a href="<?php echo e(url('/service7')); ?>" class="flex items-start gap-4">
<img
src="https://safeeyesjewelers.com/public/frontend/images/SEO.png"
class="w-12 h-12"
alt="Profit and loss icon"
loading="lazy"
/>
<div>
<h3 class="text-xl font-semibold text-white">Profit & Loss</h3>
<p class="mt-2 text-sm text-white">
Track revenue and expenses, view reports, and get financial
forecasts to plan business growth.
</p>
</div>
</a>
</div>
<div
class="bg-[#0C476C] p-6 rounded-2xl shadow-lg border border-sky-100 hover:shadow-2xl hover:scale-[1.02] transition-all duration-300"
>
<a href="<?php echo e(url('/service8')); ?>" class="flex items-start gap-4">
<img
src="https://safeeyesjewelers.com/public/frontend/images/SEO.png"
class="w-12 h-12"
alt="Custom invoices icon"
loading="lazy"
/>
<div>
<h3 class="text-xl font-semibold text-white">Custom Invoices</h3>
<p class="mt-2 text-sm text-white">
Create branded, detailed invoices with auto-calculated weights
to simplify billing and payments.
</p>
</div>
</a>
</div>
</div>
</section>
<hr class="border-t-2 border-gray-200" />
<!-- Subscription Section -->
<section
id="subscription"
class="bg-gradient-to-br from-gray-50 to-sky-100 py-20 px-4">
<div
class="max-w-5xl mx-auto bg-white rounded-3xl shadow-lg border border-sky-100 p-10 text-center"
>
<h2 class="text-4xl font-bold text-sky-800 mb-4">
Start Your 15-Day Free Trial
</h2>
<p class="text-lg text-gray-600 mb-8">
Experience all premium features with no commitment. Upgrade anytime to
continue managing your business with ease.
</p>
<div class="grid md:grid-cols-2 gap-8 mb-10">
<!-- Basic Plan -->
<div class="bg-sky-50 rounded-2xl p-8 shadow-md border border-sky-200">
<h3 class="text-2xl font-semibold text-sky-800 mb-2">Basic Plan</h3>
<p class="text-gray-600 mb-6">Ideal for small businesses</p>
<div class="text-4xl font-bold text-sky-800 mb-2">
$15<span class="text-xl font-medium">/month</span>
</div>
<ul class="text-gray-800 text-left mb-6 space-y-2">
<li>✅ Access to core features</li>
<li>✅ Up to 5 users</li>
<li>✅ Standard support</li>
<li>✅ Basic reporting tools</li>
</ul>
<button
class="bg-sky-800 hover:bg-sky-700 text-white font-semibold px-10 py-4 rounded-full transition duration-300 subscribe-btn"
data-price="15"
data-plan="Basic Plan"
onclick="openSubscriptionModal(this)"
>
Subscribe Now
</button>
</div>
<!-- Pro Plan -->
<div class="bg-sky-50 rounded-2xl p-8 shadow-md border border-sky-200">
<h3 class="text-2xl font-semibold text-sky-800 mb-2">Pro Plan</h3>
<p class="text-gray-600 mb-6">Perfect for growing businesses</p>
<div class="text-4xl font-bold text-sky-800 mb-2">
$29<span class="text-xl font-medium">/month</span>
</div>
<ul class="text-gray-800 text-left mb-6 space-y-2">
<li>✅ Full access to all features</li>
<li>✅ Unlimited users and branches</li>
<li>✅ Priority support</li>
<li>✅ Auto-backups & advanced reporting</li>
</ul>
<button
class="bg-sky-800 hover:bg-sky-700 text-white font-semibold px-10 py-4 rounded-full transition duration-300 subscribe-btn"
data-price="29"
data-plan="Pro Plan"
onclick="openSubscriptionModal(this)"
>
Subscribe Now
</button>
</div>
</div>
<!-- Testimonial -->
<div class="bg-sky-50 p-6 rounded-2xl mb-8">
<p class="text-lg text-gray-800 italic">
"Safeeyes transformed our business operations with its intuitive
tools and excellent support!"
<span class="block font-semibold mt-2"
>— Ahmed K., Retail Manager</span
>
</p>
</div>
<!-- Subscription Form -->
<form
action="https://formspree.io/f/your-form-id"
method="POST"
class="flex flex-col sm:flex-row items-center gap-4 justify-center mt-6">
<label for="subscription-email" class="sr-only">Your Email</label>
<input
type="email"
id="subscription-email"
name="email"
placeholder="Enter your email"
required
class="w-full sm:w-auto px-6 py-4 rounded-full border border-gray-300 focus:ring-2 focus:ring-sky-500 focus:outline-none placeholder-gray-400 bg-gray-50"
/>
<button
type="submit"
class="w-full sm:w-auto bg-sky-800 hover:bg-sky-700 text-white font-semibold px-10 py-4 rounded-full transition duration-300"
>
Start Free Trial
</button>
</form>
</div>
</section>
<hr class="border-t-2 border-gray-200" />
<!-- Contact Section -->
<section
id="contact"
class="mx-auto px-4 sm:px-6 py-20 sm:py-24 bg-gradient-to-br from-gray-50 to-sky-100">
<div class="max-w-6xl mx-auto">
<h2
class="text-3xl sm:text-5xl font-bold mb-6 text-center text-sky-800"
>
CONTACT US
</h2>
<p
class="text-center mb-10 sm:mb-12 text-gray-600 text-base sm:text-lg"
>
If you have any questions or concerns, please don’t hesitate to
contact us. We’re always here to help.
</p>
<div class="grid grid-cols-1 md:grid-cols-2 gap-10 sm:gap-12">
<!-- Contact Form -->
<div
class="bg-white p-6 sm:p-8 rounded-2xl shadow-xl border border-gray-200"
>
<form
action="https://formspree.io/f/your-form-id"
method="POST"
class="space-y-5"
>
<div>
<label for="name" class="sr-only">Your Name</label>
<input
type="text"
id="name"
name="name"
required
class="w-full p-3 bg-gray-50 border border-gray-300 rounded-lg placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-sky-500"
placeholder="Your Name"
/>
</div>
<div>
<label for="email" class="sr-only">Your Email</label>
<input
type="email"
id="email"
name="email"
required
class="w-full p-3 bg-gray-50 border border-gray-300 rounded-lg placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-sky-500"
placeholder="Your Email"
/>
</div>
<div>
<label for="message" class="sr-only">Your Message</label>
<textarea
id="message"
name="message"
rows="4"
required
class="w-full p-3 bg-gray-50 border border-gray-300 rounded-lg placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-sky-500"
placeholder="Type your message..."
></textarea>
</div>
<button
type="submit"
class="w-full sm:w-auto bg-sky-800 hover:bg-sky-700 text-white px-6 py-3 rounded-full font-semibold transition duration-300"
>
SEND MESSAGE
</button>
</form>
</div>
<!-- Contact Info -->
<div class="bg-white p-6 sm:p-8 rounded-2xl shadow-xl border border-gray-200 flex flex-col justify-between">
<div class="space-y-6 text-gray-800">
<p class="flex items-center text-base sm:text-2xl">
<span class="mr-2 text-sky-600">@</span>
<a
href="mailto:Safeeyestrading@gmail.com"
class="hover:underline"
>Safeeyestrading@gmail.com</a
>
</p>
<p class="flex items-center text-base sm:text-2xl">
<span class="mr-2 text-sky-600">📞</span>
<a href="tel:+966576650902" class="hover:underline"
>+966 57 665 0902</a
>
</p>
<p class="flex items-center text-base sm:text-2xl">
<span class="mr-2 text-sky-600">📍</span> Riyadh, Saudi Arabia
</p>
</div>
<div class="mt-8 sm:mt-10 flex flex-wrap gap-4">
<a
href="#"
target="_blank"
aria-label="Facebook"
class="w-10 h-10 sm:w-12 sm:h-12 bg-sky-100 text-sky-800 rounded-full flex items-center justify-center text-lg sm:text-xl hover:bg-sky-800 hover:text-white transition"
>
<i class="bi bi-facebook"></i>
</a>
<a
href="#"
target="_blank"
aria-label="Instagram"
class="w-10 h-10 sm:w-12 sm:h-12 bg-sky-100 text-sky-800 rounded-full flex items-center justify-center text-lg sm:text-xl hover:bg-sky-800 hover:text-white transition"
>
<i class="bi bi-instagram"></i>
</a>
<a
href="#"
target="_blank"
aria-label="LinkedIn"
class="w-10 h-10 sm:w-12 sm:h-12 bg-sky-100 text-sky-800 rounded-full flex items-center justify-center text-lg sm:text-xl hover:bg-sky-800 hover:text-white transition"
>
<i class="bi bi-linkedin"></i>
</a>
<a
href="#"
target="_blank"
aria-label="YouTube"
class="w-10 h-10 sm:w-12 sm:h-12 bg-sky-100 text-sky-800 rounded-full flex items-center justify-center text-lg sm:text-xl hover:bg-sky-800 hover:text-white transition"
>
<i class="bi bi-youtube"></i>
</a>
</div>
</div>
</div>
</div>
</section>
<!-- Subscription Modal -->
<div id="subscriptionModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50">
<div class="bg-white rounded-2xl p-8 max-w-md w-full mx-4 relative">
<button id="closeModal" class="absolute top-4 right-4 text-gray-600 hover:text-gray-800">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
<h2 class="text-2xl font-bold text-sky-800 mb-4">Subscribe to <span id="planName">Basic Plan</span></h2>
<form id="subscriptionForm" action="<?php echo e(route('save.subscribe')); ?>" method="POST" enctype="multipart/form-data" class="space-y-4">
<?php echo csrf_field(); ?>
<div>
<label for="email" class="block text-gray-800 font-medium">Email</label>
<input
type="email"
id="email"
name="email"
required
class="w-full p-3 bg-gray-50 border border-gray-300 rounded-lg placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-sky-500"
placeholder="Enter your email"
/>
</div>
<div>
<label for="image" class="block text-gray-800 font-medium">Image</label>
<input
type="file"
id="image"
name="image"
accept="image/*"
class="w-full p-3 bg-gray-50 border border-gray-300 rounded-lg"
/>
</div>
<div>
<label for="note" class="block text-gray-800 font-medium">Note</label>
<textarea
id="note"
name="note"
rows="4"
class="w-full p-3 bg-gray-50 border border-gray-300 rounded-lg placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-sky-500"
placeholder="Add any additional notes"
></textarea>
</div>
<input type="hidden" id="price" name="price" value="15" />
<input type="hidden" name="status" value="pending" />
<button
type="submit"
class="w-full bg-sky-800 hover:bg-sky-700 text-white font-semibold px-6 py-3 rounded-full transition duration-300"
>
Submit Subscription
</button>
</form>
</div>
</div>
<!-- JavaScript for Modal -->
<script>
function openSubscriptionModal(button) {
const modal = document.getElementById('subscriptionModal');
const priceInput = document.getElementById('price');
const planName = document.getElementById('planName');
const emailInput = document.getElementById('email');
const subscriptionEmail = document.getElementById('subscription-email');
// Set price and plan name based on button clicked
priceInput.value = button.dataset.price;
planName.textContent = button.dataset.plan;
// Pre-fill email from the subscription form if available
if (subscriptionEmail.value) {
emailInput.value = subscriptionEmail.value;
}
// Show modal
modal.classList.remove('hidden');
}
// Close modal
document.getElementById('closeModal').addEventListener('click', () => {
document.getElementById('subscriptionModal').classList.add('hidden');
});
// Close modal on outside click
document.getElementById('subscriptionModal').addEventListener('click', (e) => {
if (e.target === document.getElementById('subscriptionModal')) {
document.getElementById('subscriptionModal').classList.add('hidden');
}
});
</script>
<?php echo $__env->make('frontend.component.footer', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>
<?php /**PATH C:\xampp\htdocs\safeEye\resources\views/frontend/home/index.blade.php ENDPATH**/ ?>