hero modularization
This commit is contained in:
parent
c77b28a7b8
commit
8f56e2f392
|
|
@ -0,0 +1,44 @@
|
|||
/* Hero Section Styling */
|
||||
.hero-section {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 65vh;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.hero-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
max-width: 60%;
|
||||
}
|
||||
|
||||
.hero-content h1 {
|
||||
font-size: 2.5rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hero-content p {
|
||||
font-size: 1.2rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.hero-content .btn {
|
||||
font-size: 1rem;
|
||||
padding: 0.75rem 1.5rem;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
|
@ -1,17 +1,28 @@
|
|||
<head>
|
||||
<?php
|
||||
|
||||
/**
|
||||
* Head Partial
|
||||
*
|
||||
* This file includes metadata, stylesheets, and scripts necessary for rendering the site.
|
||||
*/
|
||||
|
||||
?><head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title><?php echo $title ?? 'Wizdom Networks'; ?></title>
|
||||
|
||||
<!-- Bootstrap CSS -->
|
||||
<!-- Bootstrap CDN with local fallback -->
|
||||
<link rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
|
||||
onerror="this.onerror=null;this.href='/assets/bootstrap/css/bootstrap.min.css';">
|
||||
|
||||
|
||||
<!-- Main Stylesheet -->
|
||||
<!-- <link rel="stylesheet" href="/assets/css/styles.css"> -->
|
||||
<link rel="stylesheet" href="/assets/css/main.css">
|
||||
|
||||
<!-- Conditionally Load Hero Stylesheet -->
|
||||
<?php if (!empty($showHero)) : ?>
|
||||
<link rel="stylesheet" href="/assets/css/hero.css">
|
||||
<?php endif; ?>
|
||||
|
||||
<!-- Conditionally Load Slider Stylesheet -->
|
||||
<?php if (!empty($showSlider)) : ?>
|
||||
|
|
|
|||
|
|
@ -14,11 +14,14 @@
|
|||
<?php $this->render('layouts/head', $data); ?>
|
||||
</head>
|
||||
<body>
|
||||
<?php $this->render('layouts/header', $data); ?>
|
||||
<?php if (!empty($showHeader)) : ?>
|
||||
<?php $this->render('layouts/header', $data); ?>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php $this->render('partials/navbar', $data); ?>
|
||||
|
||||
<?php if (!empty($showHero)) : ?>
|
||||
<?php $this->render('partials/hero', $data); ?>
|
||||
<?php if (!empty($heroConfig)) : ?>
|
||||
<?php $this->render('partials/hero', compact('heroConfig')); ?>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if (!empty($showSlider)) : ?>
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@
|
|||
*/
|
||||
|
||||
$title = 'Home - Wizdom Networks';
|
||||
$showHeader = false;
|
||||
$showHero = false;
|
||||
$showSlider = ['type' => 'hero']; // Enable hero slider
|
||||
|
||||
|
|
|
|||
|
|
@ -1,31 +1,42 @@
|
|||
<?php
|
||||
|
||||
/**
|
||||
* Hero Section Partial
|
||||
* Modular Hero Partial
|
||||
*
|
||||
* This partial is responsible for displaying the hero section with a background image,
|
||||
* a headline, subheadline, and an optional call-to-action button.
|
||||
* This component is reusable and configurable for different pages.
|
||||
*
|
||||
* The hero section can be enabled or disabled per page.
|
||||
* Usage:
|
||||
* - Define `$heroConfig` as an array before rendering this partial.
|
||||
* - Example:
|
||||
* $heroConfig = [
|
||||
* 'title' => 'Our Services',
|
||||
* 'description' => 'Explore our IT consulting solutions.',
|
||||
* 'image' => '/assets/images/services-hero.jpg',
|
||||
* 'cta' => ['text' => 'Get Started', 'link' => '/contact'],
|
||||
* 'style' => 'default', // Can be 'default', 'compact', 'overlay'
|
||||
* 'position' => 'top' // Can be 'top', 'inline'
|
||||
* ];
|
||||
*/
|
||||
|
||||
if (!isset($showHero) || !$showHero) {
|
||||
return;
|
||||
}
|
||||
// Ensure the hero config exists
|
||||
$heroConfig = $heroConfig ?? [];
|
||||
|
||||
// Assign default values
|
||||
$heroTitle = $heroConfig['title'] ?? "Welcome to Wizdom Networks";
|
||||
$heroDescription = $heroConfig['description'] ?? "Your trusted partner for IT Consulting and Services.";
|
||||
$heroImage = $heroConfig['image'] ?? "/assets/images/default-hero.jpg";
|
||||
$heroCTA = $heroConfig['cta'] ?? null;
|
||||
$heroStyle = $heroConfig['style'] ?? "default"; // 'default', 'compact', 'overlay'
|
||||
$heroPosition = $heroConfig['position'] ?? "top"; // 'top', 'inline'
|
||||
|
||||
$heroTitle = $heroTitle ?? "Welcome to Wizdom Networks";
|
||||
$heroDescription = $heroDescription ?? "Your trusted partner for IT Consulting and Services.";
|
||||
$heroImage = $heroImage ?? "/assets/images/default-hero.jpg";
|
||||
$heroCTA = $heroCTA ?? null;
|
||||
?>
|
||||
|
||||
<section class="hero-section" style="background-image: url('<?php echo $heroImage; ?>');">
|
||||
<section class="hero-section hero-<?php echo $heroStyle; ?> hero-<?php echo $heroPosition; ?>" style="background-image: url('<?php echo $heroImage; ?>');">
|
||||
<div class="hero-overlay">
|
||||
<div class="hero-content text-center">
|
||||
<h1><?php echo $heroTitle; ?></h1>
|
||||
<p><?php echo $heroDescription; ?></p>
|
||||
<?php if ($heroCTA): ?>
|
||||
<a href="<?php echo $heroCTA['link']; ?>" class="btn btn-primary"> <?php echo $heroCTA['text']; ?> </a>
|
||||
<a href="<?php echo $heroCTA['link']; ?>" class="btn btn-primary"><?php echo $heroCTA['text']; ?></a>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue