From 5e1ee38b9fb5fa8cf5c9a50e71df56a662dffdb7 Mon Sep 17 00:00:00 2001 From: overplayed Date: Mon, 3 Feb 2025 08:38:52 -0500 Subject: [PATCH] hero& sidebar modularity and configurability --- app/Controllers/HomeController.php | 3 - public/assets/css/about.css | 32 ++++++++ public/assets/css/{styles.css => footer.css} | 0 public/assets/css/main.css | 38 ++++++++++ public/assets/css/navbar.css | 0 public/assets/css/sidebar.css | 0 public/assets/css/slider-home.css | 0 public/assets/css/slider.css | 10 +-- resources/views/layouts/head.php | 25 +++++-- resources/views/layouts/main.php | 32 ++++---- resources/views/pages/about.php | 51 +++++++++++-- resources/views/pages/home.php | 77 ++++++++++++++++++-- resources/views/partials/hero.php | 63 ++++++++-------- resources/views/partials/sidebar.php | 45 ++++++++++-- resources/views/partials/slider.php | 71 ++++++++++++++---- 15 files changed, 357 insertions(+), 90 deletions(-) create mode 100644 public/assets/css/about.css rename public/assets/css/{styles.css => footer.css} (100%) create mode 100644 public/assets/css/main.css create mode 100644 public/assets/css/navbar.css create mode 100644 public/assets/css/sidebar.css create mode 100644 public/assets/css/slider-home.css diff --git a/app/Controllers/HomeController.php b/app/Controllers/HomeController.php index 17b88b7..b0c59ae 100644 --- a/app/Controllers/HomeController.php +++ b/app/Controllers/HomeController.php @@ -14,9 +14,6 @@ class HomeController try { $data = [ 'title' => 'Home - Wizdom Networks', - 'showSlider' => [ - 'type' => 'hero' - ], 'content' => "

Welcome to Wizdom Networks

Your trusted partner for IT Consulting and Services.

" ]; diff --git a/public/assets/css/about.css b/public/assets/css/about.css new file mode 100644 index 0000000..184217a --- /dev/null +++ b/public/assets/css/about.css @@ -0,0 +1,32 @@ +/* About Page Styles (v1) */ + +.about-h1 { + font-size: 2.5rem; + font-weight: bold; + color: #003366; + margin-bottom: 20px; +} + +.about-i { + font-size: 1.25rem; + font-style: italic; + color: #555; +} + +.about-small { + font-size: 1rem; + line-height: 1.6; + color: #333; +} + +#about-row { + margin-top: 40px; + text-align: center; +} + +.container h2 { + text-align: center; + font-size: 2rem; + margin-bottom: 30px; + color: #003366; +} diff --git a/public/assets/css/styles.css b/public/assets/css/footer.css similarity index 100% rename from public/assets/css/styles.css rename to public/assets/css/footer.css diff --git a/public/assets/css/main.css b/public/assets/css/main.css new file mode 100644 index 0000000..8f45e4a --- /dev/null +++ b/public/assets/css/main.css @@ -0,0 +1,38 @@ +/* Bootstrap Optimization for Mobile & Desktop Consistency */ + +/* Ensure proper grid scaling */ +.container { + max-width: 1200px; + margin: auto; +} + +/* Navigation Fixes */ +.navbar { + padding: 0.5rem 1rem; +} + +/* Adjust button sizes for better touchscreen usability */ +.btn { + padding: 0.75rem 1.5rem; + font-size: 1rem; +} + +/* Improve form inputs on mobile */ +.form-control { + padding: 0.75rem; + font-size: 1rem; +} + +/* Ensure text scaling remains readable */ +body { + font-size: 1rem; +} + +@media (max-width: 768px) { + .container { + padding: 0 15px; + } + .navbar-nav { + text-align: center; + } +} diff --git a/public/assets/css/navbar.css b/public/assets/css/navbar.css new file mode 100644 index 0000000..e69de29 diff --git a/public/assets/css/sidebar.css b/public/assets/css/sidebar.css new file mode 100644 index 0000000..e69de29 diff --git a/public/assets/css/slider-home.css b/public/assets/css/slider-home.css new file mode 100644 index 0000000..e69de29 diff --git a/public/assets/css/slider.css b/public/assets/css/slider.css index cbe27ff..8f36b1b 100644 --- a/public/assets/css/slider.css +++ b/public/assets/css/slider.css @@ -1,18 +1,18 @@ -/* Hero Slider Styles */ -.hero-slider, .carousel-inner, .carousel-item { +/* Slider Styles */ +.slider, .carousel-inner, .carousel-item { width: 100%; height: 65vh; position: relative; overflow: hidden; } -.hero-image { +.slider-image { width: 100%; height: 65vh; object-fit: cover; filter: grayscale(100%); transition: filter 0.5s ease-in-out; -} -.hero-image:hover { +} +.slider-image:hover { filter: grayscale(0%); } .carousel-indicators { diff --git a/resources/views/layouts/head.php b/resources/views/layouts/head.php index 3fe0ae4..647bcdc 100644 --- a/resources/views/layouts/head.php +++ b/resources/views/layouts/head.php @@ -1,11 +1,10 @@ @@ -17,7 +16,7 @@ onerror="this.onerror=null;this.href='/assets/bootstrap/css/bootstrap.min.css';"> - + @@ -25,10 +24,24 @@ - + + + + + + - + + + + + + + + + + + - diff --git a/resources/views/layouts/main.php b/resources/views/layouts/main.php index df3b892..c4ecfe6 100644 --- a/resources/views/layouts/main.php +++ b/resources/views/layouts/main.php @@ -1,13 +1,14 @@ - ?> @@ -17,21 +18,26 @@ - + + - - - + + + +
-
- -
+ + +
+ +
+
diff --git a/resources/views/pages/about.php b/resources/views/pages/about.php index 9fac885..d50c614 100644 --- a/resources/views/pages/about.php +++ b/resources/views/pages/about.php @@ -3,14 +3,55 @@ use WizdomNetworks\WizeWeb\Core\View; /** - * About Page View + * About Page (v1) * - * This view dynamically renders the About page using data provided by the AboutController. + * This page renders the "About Us" section, refactored from the reference site. */ // Ensure data is available before rendering -$title = $data['title'] ?? 'About Us - Wizdom Networks'; -$content = $data['content'] ?? ''; -$heroConfig = $data['heroConfig'] ?? []; +$title = 'About Us - Wizdom Networks'; +$content = '
+
+
+

WHO

+

Wizdom is a preeminent business and information technology consultancy.

+

Established in 2002, with clients throughout North America, we are a creative and innovative, results-oriented group who isn\'t afraid to push boundaries and think outside the box when necessary, all while pragmatically adhering to industry best practices.

+
+
+

WHAT

+

We align your IT systems and technology with your business strategy and goals.

+

Ultimately providing you with an optimal path toward success. If you already have business and IT strategy alignment covered, we also manage IT projects & initiatives, infrastructure, train staff or executives, and more. Basically, if it\'s IT-related, we can get it done for you!

+
+
+

WHY

+

Those who have worked with us in the past know that our passion is infectious.

+

But in a good way. It\'s the kind of passion that sparks creativity and facilitates collaboration—the kind that enables us to overcome technical hurdles and perceived business boundaries.

+
+
+
'; + +// Sidebar Configuration +$sidebarConfig = [ + 'enabled' => true, + 'id' => 'about', + 'width' => '25%', + 'position' => 'right', + 'widgets' => [ + '

Company Values

Innovation, Integrity, and Excellence.

', + '

Our Vision

Empowering businesses with cutting-edge IT solutions.

' + ] +]; + +// Page-Specific Hero Configuration +$heroConfig = [ + //'title' => 'Who We Are', + 'height' => '65vh', + 'enabled' => 'true', + //'description' => 'Wizdom Networks is a premier IT consultancy, providing innovative solutions since 2002.', + 'image' => '/assets/images/wizdom-about-definitions.jpg', +]; + +// Page-Specific Slider Configuration + View::render('layouts/main', compact('title', 'content', 'heroConfig')); diff --git a/resources/views/pages/home.php b/resources/views/pages/home.php index b03f599..8f6ab4b 100644 --- a/resources/views/pages/home.php +++ b/resources/views/pages/home.php @@ -1,10 +1,9 @@ - 'home', // Unique identifier for home page slider styles + 'type' => 'standard', + 'height' => '65vh', + 'slides' => [ + [ + 'src' => '/assets/images/information-light.jpg', + 'alt' => 'Information Light Banner', + 'title' => 'Innovative Solutions', + 'description' => 'Bringing technology and expertise together.', + 'cta_text' => 'Learn More', + 'cta_link' => '/services/technology', + 'cta_top' => '70%', + 'cta_left' => '30%' + ], + [ + 'src' => '/assets/images/cardcatalouge-banner.jpg', + 'alt' => 'Card Catalogue Banner', + 'title' => 'Effortless Organization', + 'description' => 'Streamline your workflow with our intuitive catalog system.', + 'cta_text' => 'Learn More', + 'cta_link' => '/services/catalogue-management', + 'cta_top' => '45%', + 'cta_left' => '75%' + ], + [ + 'src' => '/assets/images/rolodex-banner.jpg', + 'alt' => 'Rolodex Banner', + 'title' => 'Contact Management Made Easy', + 'description' => 'Keep track of important contacts and information in one place.', + 'cta_text' => 'Get Started', + 'cta_link' => '/services/contact-management', + 'cta_top' => '45%', + 'cta_left' => '70%', + 'text_color' => 'black' + ], + [ + 'src' => '/assets/images/oldmic.jpg', + 'alt' => 'Old Microphone', + 'title' => 'Broadcast Your Message', + 'description' => 'Reach your audience with high-quality audio and video solutions.', + 'cta_text' => 'Explore Options', + 'cta_link' => '/services/media-solutions', + 'cta_top' => '56%', + 'cta_left' => '65%' + ], + [ + 'src' => '/assets/images/ancient-library-shelf-crop1.jpg', + 'alt' => 'Library Archives', + 'title' => 'Knowledge Preservation', + 'description' => 'Store and manage your records securely and efficiently.', + 'cta_text' => 'Discover More', + 'cta_link' => '/services/data-archiving', + 'cta_top' => '50%', + 'cta_left' => '50%' + ], + [ + 'src' => '/assets/images/combosafedoor.jpg', + 'alt' => 'Combination Safe Door', + 'title' => 'Secure Your Data', + 'description' => 'Advanced encryption and security solutions for your digital assets.', + 'cta_text' => 'Protect Now', + 'cta_link' => '/services/cybersecurity', + 'cta_top' => '56%', + 'cta_left' => '35%' + ] + ] +]; + +View::render('layouts/main', compact('title', 'content', 'sliderConfig')); diff --git a/resources/views/partials/hero.php b/resources/views/partials/hero.php index 3f57018..886d2c1 100644 --- a/resources/views/partials/hero.php +++ b/resources/views/partials/hero.php @@ -1,43 +1,40 @@ - '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' - * ]; + * This partial dynamically loads a hero section based on the provided configuration. + * It allows pages to enable or disable the hero and define custom styles. + * + * ## Configuration Options: + * - `enabled` (bool) - Determines whether the hero is displayed (default: false) + * - `title` (string) - Hero title text + * - `description` (string) - Hero subtitle or description text + * - `image` (string) - Background image URL (default: 'wizdom-about-definitions.jpg') + * - `height` (string) - Height of the hero section (default: '50vh') + * - `text_align` (string) - Text alignment ('left', 'center', 'right') (default: 'center') + * - `overlay` (bool) - Apply a dark overlay to improve text readability (default: true) */ -// Ensure heroConfig is defined before rendering -$heroConfig = $heroConfig ?? []; +// Ensure hero visibility is explicitly enabled +if (!isset($heroConfig) || empty($heroConfig['enabled'])) { + return; +} -// 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 = htmlspecialchars($heroConfig['title'] ?? '', ENT_QUOTES, 'UTF-8'); +$heroDescription = htmlspecialchars($heroConfig['description'] ?? '', ENT_QUOTES, 'UTF-8'); +$heroImage = htmlspecialchars($heroConfig['image'] ?? '/assets/images/wizdom-about-definitions.jpg', ENT_QUOTES, 'UTF-8'); +$heroHeight = htmlspecialchars($heroConfig['height'] ?? '50vh', ENT_QUOTES, 'UTF-8'); +$textAlign = htmlspecialchars($heroConfig['text_align'] ?? 'center', ENT_QUOTES, 'UTF-8'); +$overlay = $heroConfig['overlay'] ?? false; ?> -
-
-
-

-

- - - -
+
+ +
+ +
+

+

diff --git a/resources/views/partials/sidebar.php b/resources/views/partials/sidebar.php index a1ba549..2a30da3 100644 --- a/resources/views/partials/sidebar.php +++ b/resources/views/partials/sidebar.php @@ -1,8 +1,39 @@ -