211 lines
10 KiB
PHP
211 lines
10 KiB
PHP
<?php
|
|
ini_set('display_errors', 1);
|
|
ini_set('display_startup_errors', 1);
|
|
error_reporting(E_ALL);
|
|
|
|
require_once 'includes/pexels.php';
|
|
$query = 'family';
|
|
$orientation = 'landscape';
|
|
$url = 'https://api.pexels.com/v1/search?query=' . urlencode($query) . '&orientation=' . urlencode($orientation) . '&per_page=1&page=1';
|
|
$data = pexels_get($url);
|
|
$hero_image_url = '';
|
|
if ($data && !empty($data['photos'])) {
|
|
$photo = $data['photos'][0];
|
|
$src = $photo['src']['large2x'] ?? ($photo['src']['large'] ?? $photo['src']['original']);
|
|
$target = __DIR__ . '/assets/images/pexels/' . $photo['id'] . '.jpg';
|
|
download_to($src, $target);
|
|
$hero_image_url = 'assets/images/pexels/' . $photo['id'] . '.jpg';
|
|
}
|
|
?>
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
<!-- SEO and Meta Tags -->
|
|
<title><?php echo htmlspecialchars(getenv('PROJECT_NAME') ?: 'Grandma\'s Getaway'); ?></title>
|
|
<meta name="description" content="<?php echo htmlspecialchars(getenv('PROJECT_DESCRIPTION') ?: 'Connecting parents with amazing grandparent-like caregivers for your children.'); ?>">
|
|
<meta name="keywords" content="child care, babysitting, grandparents, caregivers, vacation, family">
|
|
<meta name="author" content="Flatlogic">
|
|
|
|
<!-- Open Graph / Facebook -->
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:title" content="<?php echo htmlspecialchars(getenv('PROJECT_NAME') ?: 'Grandma\'s Getaway'); ?>">
|
|
<meta property="og:description" content="<?php echo htmlspecialchars(getenv('PROJECT_DESCRIPTION') ?: 'Connecting parents with amazing grandparent-like caregivers for your children.'); ?>">
|
|
<meta property="og:image" content="<?php echo htmlspecialchars(getenv('PROJECT_IMAGE_URL') ?: ''); ?>">
|
|
|
|
<!-- Twitter -->
|
|
<meta property="twitter:card" content="summary_large_image">
|
|
<meta property="twitter:title" content="<?php echo htmlspecialchars(getenv('PROJECT_NAME') ?: 'Grandma\'s Getaway'); ?>">
|
|
<meta property="twitter:description" content="<?php echo htmlspecialchars(getenv('PROJECT_DESCRIPTION') ?: 'Connecting parents with amazing grandparent-like caregivers for your children.'); ?>">
|
|
<meta property="twitter:image" content="<?php echo htmlspecialchars(getenv('PROJECT_IMAGE_URL') ?: ''); ?>">
|
|
|
|
<!-- Favicon -->
|
|
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>👵</text></svg>">
|
|
|
|
<!-- Bootstrap CSS -->
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
|
|
|
|
<!-- Custom CSS -->
|
|
<link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
|
|
|
|
<style>
|
|
.hero-section {
|
|
background-image: url('<?php echo $hero_image_url; ?>');
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- Header -->
|
|
<header>
|
|
<nav class="navbar navbar-expand-lg navbar-light fixed-top transparent-nav">
|
|
<div class="container">
|
|
<a class="navbar-brand" href="#">👵 Grandma's Getaway</a>
|
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
<div class="collapse navbar-collapse" id="navbarNav">
|
|
<ul class="navbar-nav ms-auto align-items-center">
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#how-it-works">How It Works</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#features">For Parents</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#features">For Caregivers</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="contact.php">Contact</a>
|
|
</li>
|
|
<li class="nav-item ms-lg-3">
|
|
<a class="nav-link" href="register.php">Register</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="login.php">Sign In</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
|
|
<main>
|
|
<section class="hero-section">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-md-10 offset-md-1">
|
|
<h1>Vacation for you. A joy for them.</h1>
|
|
<p class="lead">Connect with experienced, loving grandparent-like figures for your children's care. Peace of mind for you, unforgettable moments for them.</p>
|
|
<a href="#search-widget" class="btn btn-primary btn-lg me-2">Find a Caregiver</a>
|
|
<a href="#" class="btn btn-secondary btn-lg">Become a Caregiver</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="how-it-works" class="section">
|
|
<div class="container">
|
|
<h2 class="section-title">How It Works</h2>
|
|
<div class="row text-center">
|
|
<div class="col-md-4">
|
|
<div class="how-it-works-icon"><i class="bi bi-search"></i></div>
|
|
<h3>1. Search</h3>
|
|
<p>Browse profiles of trusted caregivers in your destination. Read reviews and find the perfect match for your family.</p>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="how-it-works-icon"><i class="bi bi-calendar-check"></i></div>
|
|
<h3>2. Book</h3>
|
|
<p>Select your dates and send a booking request. Communicate directly and securely with your chosen caregiver.</p>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="how-it-works-icon"><i class="bi bi-balloon-heart"></i></div>
|
|
<h3>3. Relax</h3>
|
|
<p>Enjoy your vacation knowing your children are in safe, caring hands, making happy memories.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="features" class="section bg-light">
|
|
<div class="container">
|
|
<h2 class="section-title">A Perfect Match for Everyone</h2>
|
|
<div class="row g-4">
|
|
<div class="col-md-6">
|
|
<div class="feature-card">
|
|
<div class="icon"><i class="bi bi-people"></i></div>
|
|
<h4>For Parents</h4>
|
|
<p>Find vetted, experienced, and insured caregivers who bring warmth and wisdom. Enjoy flexible booking and secure payments for a worry-free vacation.</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<div class="feature-card">
|
|
<div class="icon"><i class="bi bi-person-heart"></i></div>
|
|
<h4>For Caregivers</h4>
|
|
<p>Share your love and experience with children. Earn extra income on your own schedule and create joyful connections with families.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="search-widget" class="section">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-md-8 offset-md-2">
|
|
<h2 class="section-title">Find Your Perfect Caregiver</h2>
|
|
<form>
|
|
<div class="row g-3">
|
|
<div class="col-md-6">
|
|
<input type="text" class="form-control form-control-lg" placeholder="Location (e.g., 'Paris, France')">
|
|
</div>
|
|
<div class="col-md-4">
|
|
<input type="text" class="form-control form-control-lg" placeholder="Dates (e.g., 'Dec 20 - Jan 3')">
|
|
</div>
|
|
<div class="col-md-2">
|
|
<button type="submit" class="btn btn-primary btn-lg w-100">Search</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
</main>
|
|
|
|
<!-- Footer -->
|
|
<footer class="footer">
|
|
<div class="container text-center">
|
|
<p>© <?php echo date("Y"); ?> <?php echo htmlspecialchars(getenv('PROJECT_NAME') ?: 'Grandma\'s Getaway'); ?>. All Rights Reserved.</p>
|
|
<p>
|
|
<a href="#">Privacy Policy</a> |
|
|
<a href="#">Terms of Service</a> |
|
|
<a href="contact.php">Contact Us</a>
|
|
</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- Bootstrap JS -->
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
|
|
|
<!-- Custom JS -->
|
|
<script src="assets/js/main.js?v=<?php echo time(); ?>"></script>
|
|
|
|
<script>
|
|
document.addEventListener('scroll', function() {
|
|
const header = document.querySelector('.transparent-nav');
|
|
if (window.scrollY > 50) {
|
|
header.classList.add('scrolled');
|
|
} else {
|
|
header.classList.remove('scrolled');
|
|
}
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|