<?php
session_start();
require_once 'admin-panal/includes/db.php';
?>
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-Z2X2T395KZ"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-Z2X2T395KZ');
</script>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>About Us — Elegance of India</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=Raleway:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" />
<link rel="stylesheet" href="style.css" />
<style>
.about-story { padding: 80px 0; background: #fff; }
.about-story-inner { max-width: 900px; margin: 0 auto; line-height: 1.8; color: #444; }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 60px; }
.about-card { background: #f9f9f9; padding: 40px; border-radius: 4px; }
@media (max-width: 768px) {
.page-header { padding: 40px 0 !important; }
.page-header h1 { font-size: 2.2rem !important; }
.about-story { padding: 40px 0; }
.about-grid { grid-template-columns: 1fr; gap: 20px; margin-top: 40px; }
.about-card { padding: 30px; }
}
</style>
</head>
<body>
<?php include 'inc/header.php'; ?>
<?php
$stmt = $pdo->prepare("SELECT * FROM page_sections WHERE page_slug = ? ORDER BY sort_order, id ASC");
$stmt->execute(['about']);
$sections = $stmt->fetchAll();
?>
<div class="page-header" style="background: #fdfbf8; padding: 60px 0; text-align: center; border-bottom: 1px solid #eee;">
<div class="container">
<h1 style="font-family: 'Playfair Display', serif; font-size: 3rem; margin-bottom: 10px;">About Us</h1>
<p style="color: #888; letter-spacing: 2px; text-transform: uppercase; font-size: 0.9rem;">Heritage • Artistry • Elegance</p>
</div>
</div>
<div class="about-story">
<div class="container about-story-inner">
<?php
$cards = [];
foreach ($sections as $sec) {
if ($sec['style'] === 'card') {
$cards[] = $sec;
continue;
}
?>
<div class="story-block" style="margin-bottom: 40px;">
<h2 style="text-align: center; margin-bottom: 40px; font-weight: 600; font-family: 'Playfair Display', serif; font-size: 2.2rem;">
<?= htmlspecialchars($sec['title']) ?>
</h2>
<div class="story-content">
<?php
$paragraphs = explode("\n\n", str_replace("\r", "", $sec['content'] ?? ''));
foreach ($paragraphs as $para) {
$para = trim($para);
if (empty($para)) continue;
echo '<p style="margin-bottom: 20px;">' . nl2br(htmlspecialchars($para)) . '</p>';
}
?>
</div>
</div>
<?php
}
if (!empty($cards)): ?>
<div class="about-grid">
<?php foreach ($cards as $c): ?>
<div class="about-card">
<h3 style="margin-bottom: 15px; font-size: 1.25rem; color: #c9a96e; font-family: 'Playfair Display', serif;">
<?= htmlspecialchars($c['title']) ?>
</h3>
<p style="font-size: 0.95rem;"><?= nl2br(htmlspecialchars($c['content'])) ?></p>
</div>
<?php endforeach; ?>
</div>
<?php endif; ?>
<?php if (empty($sections)): ?>
<p style="text-align:center; color:#888;">Content coming soon.</p>
<?php endif; ?>
</div>
</div>
<?php include 'inc/footer.php'; ?>
</body>
</html>