<?php
// Include the about data
include('../assests/data/aboutdata.php');
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hotel Website - About Us</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css"
integrity="sha512-5Hs3dF2AEPkpNAR7UiOHba+lRSJNeM2ECkwxUIxC1Q/FLycGTbNapWXB4tP889k5T5Ju8fs4b1P5z/iB4nMfSQ=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<link rel="stylesheet" href="../assests/css/styles.css">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<section id="about" class="bg-gray-100 bgabout">
<div class="md:container mx-auto py-12 px-4 sm:px-6 lg:px-8">
<!-- About Section -->
<div class="grid grid-cols-1 md:grid-cols-2 items-center gap-8">
<!-- Text Content -->
<div class="max-w-lg">
<h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">About Us</h2>
<p class="mt-4 text-gray-600 text-base sm:text-lg">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis eros at lacus feugiat hendrerit sed ut tortor. Suspendisse et magna quis elit efficitur consequat. Mauris eleifend velit a pretium iaculis. Donec sagittis velit et magna euismod, vel aliquet nulla malesuada. Nunc pharetra massa lectus, a fermentum arcu volutpat vel.
</p>
<div class="mt-8">
<a href="#" class="text-blue-500 hover:text-blue-600 font-medium">
Learn more about us <span class="ml-2">→</span>
</a>
</div>
</div>
<!-- Image Content -->
<div class="mt-12 md:mt-0">
<img src="../assests/images/about-image.jpg"
alt="About Us Image"
class="object-cover rounded-lg shadow-md w-full max-w-sm md:max-w-4xl mx-auto md:h-[350px] h-[0px]">
</div>
</div>
<!-- Icon Section -->
<div class="grid md:grid-cols-1 gap-8 mt-[75px]">
<?php foreach (array_chunk($aboutdata, 3) as $chunk) : ?>
<div class="p-4 shadow-xl bg-white border-double border-t-8 border-[#C03030] relative bottom-[80px]">
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
<?php foreach ($chunk as $item) : ?>
<div class="text-start flex items-start">
<!-- Icon -->
<div>
<div class="flex items-center justify-center h-12 w-12 rounded-full mr-4 <?php echo $item['icon_color']; ?> bg-gray-200">
<i class="<?php echo $item['icon']; ?> text-2xl"></i>
</div>
</div>
<!-- Content -->
<div>
<h3 class="mt-2 text-lg font-semibold text-gray-900">
<?php echo $item['name']; ?>
</h3>
<p class="mt-1 text-gray-600 text-sm">
<?php echo $item['description']; ?>
</p>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
</section>
</body>
</html>