Merge remote-tracking branch 'origin/fix/design-issues' into develop

Author: zainforbjs

app/views/layout.cfm

@@ -254,7 +254,7 @@
 
 			<footer class="bg-white <cfif isAuthPage>d-none</cfif> pt-5 pb-3 border-top">
 					<div class="container">
-						<div class="row gy-lg-0 gy-3 gx-5">
+						<div class="row gy-lg-0 gy-3 gx-sm-5">
 							<div class="col-lg-4">
 								<img src="/images/wheels-logo.png" width="284" alt="">
 								<div class="mt-3">

app/views/web/AuthController/register.cfm

@@ -1,5 +1,5 @@
 <main class="w-100 vh-100 position-relative">
-    <div class="row w-100 h-100 m-lg-auto">
+    <div class="row w-100 g-0 h-100 m-lg-auto">
         <div class="col-lg-6 bg-white col-12">
             <div class="flex-column d-flex py-4 justify-content-center h-100 gap-3 align-items-center">
                 <h1 class="fs-36 mb-0 fw-bold text--secondary">Welcome to</h1>
@@ -13,7 +13,7 @@
             </div>
         </div>
         <div
-            class="col-lg-6 p-lg-auto p-0 main-login col-12 d-flex flex-column justify-content-center align-items-center">
+            class="col-lg-6 mt-lg-0 mt-5 px-lg-0 px-2 p-lg-auto main-login col-12 d-flex flex-column justify-content-center align-items-center">
             <div class="bg-white p-4 border rounded-4 w-100 max-w-570 mx-auto">
                 <div>
                     <h1 class="fs-24 mb-0 fw-bold text--secondary">Sign Up</h1>

app/views/web/BlogController/index.cfm

@@ -1,6 +1,6 @@
 <div>
     <!-- Blog filter -->
-    <div class="w-100 h-600 position-relative feature-blog">
+    <div class="w-100 h-600 h-sm-400 position-relative feature-blog">
         <div class="position-absolute mx-auto container start-0 end-0 bottom-50px">
             <p id="featureBlogHeading" class="text-white fs-18 pb-2">Featured</p>
             <p id="blogAuthorHeading" class="text-white fw-bold fs-36 pb-3 line-height-100">Wheels The Fast & Fun CFML Framework!</p>

app/views/web/HomeController/index.cfm

@@ -28,22 +28,22 @@
                 </div>
             </div>
         </div>
-        <div class="row justify-content-center align-items-center mt-5 gy-3 text-center gx-5">
+        <div class="row justify-content-center align-items-center mt-5 gy-3 text-center gx-sm-5">
             <div class="col-md-auto">
             </div>
         </div>
     </div>
 
     <!-- Cards -->
     <div class="container pb-5">
-        <div class="row g-5" id="features-container" hx-get="/home/loadFeatures" hx-trigger="load"
+        <div class="row gy-3 gy-sm-5 gx-sm-5" id="features-container" hx-get="/home/loadFeatures" hx-trigger="load"
             hx-target="#features-container" hx-swap="innerHTML">
             <!-- Features will be loaded here via HTMX -->
         </div>
     </div>
 
     <!-- Latest blogs -->
-    <div class="pt-5 blog-main">
+    <div class="pt-5 px-2 blog-main">
         <h1 class="text-center fw-bold fs-60">Latest Blog Posts</h1>
         <div class="swiper py-5 blogSwiper h-max">
             <div class="swiper-wrapper" id="blogs-container" hx-get="/home/loadBlogs" hx-trigger="load"
@@ -94,11 +94,11 @@
                     </p>
                 </div>
                 <!-- Swiper container -->
-                <div class="col-12 pb-5 testimonialsSwiper swiper">
+                <div class="col-12 pb-5 px-2 testimonialsSwiper swiper">
                     <div class="w-100 gap-lg-5 gap-0 swiper-wrapper">
                         <cfloop query="testimonials">
                             <div class="d-flex row swiper-slide">
-                                <div class="col-lg-3 col-12">
+                                <div class="col-lg-3 col-12 pb-2 pb-sm-0">
                                     <img src="#len(testimonials.logoPath) gt 0 ? testimonials.logoPath : '/images/testi.png'#" class="img-fluid" alt="#encodeForHtml(testimonials.companyName)#" style="width: 330px; height: 290px;">
                                 </div>
                                 <div class="col-lg-9 col-12">

app/views/web/NewsController/index.cfm

@@ -1,5 +1,5 @@
 <main class="main-bg">
-  <div class="container py-5">
+  <div class="container py-5 word-break">
 
     <!-- Filter Buttons -->
     <div class="d-flex justify-content-center flex-wrap align-items-center gap-4">

public/javascripts/custom.js

@@ -1,24 +1,34 @@
-var swiper = new Swiper(".blogSwiper", {
-    spaceBetween: 30,
-    freeMode: true,
-    // autoHeight: true,
-    initialSlide: 1,
-    slidesOffsetBefore: 250,
-    breakpoints: {
-        640: {
-            slidesPerView: 1,
-            spaceBetween: 10,
-        },
-        768: {
-            slidesPerView: 2,
-            spaceBetween: 20,
-        },
-        1024: {
-            slidesPerView: 3,
+let swiperInstance = null;
+
+function initSwiper() {
+    if (window.innerWidth >= 768 && !swiperInstance) {
+        swiperInstance = new Swiper(".blogSwiper", {
             spaceBetween: 30,
-        },
-    },
-});
+            freeMode: true,
+            initialSlide: 1,
+            slidesOffsetBefore: 250,
+            breakpoints: {
+                768: {
+                    slidesPerView: 2,
+                    spaceBetween: 20,
+                },
+                1024: {
+                    slidesPerView: 3,
+                    spaceBetween: 30,
+                },
+            },
+        });
+    } else if (window.innerWidth < 768 && swiperInstance) {
+        swiperInstance.destroy(true, true);
+        swiperInstance = null;
+    }
+}
+
+// Initialize on load
+window.addEventListener("load", initSwiper);
+// Re-initialize on resize
+window.addEventListener("resize", initSwiper);
+
 
 var contributorsSwiperThumb = new Swiper(".contributorsSwiperThumb", {
     spaceBetween: 0,

public/stylesheets/style.css

@@ -374,4 +374,20 @@ main.main-bg {
 
 .comment-wrapper .ql-hidden{
     display: none !important;
+}
+
+@media (max-width: 768px) {
+    .hero-section {
+        padding: 4rem 0 1rem;
+    }
+    .icon-container {
+        display: none !important;
+    }
+    .h-sm-400{
+        height: 400px !important;
+    }
+    .feature-blog{
+        background-position: right !important;
+        background-size: auto !important;
+    }
 }

public/stylesheets/utils.css

@@ -266,4 +266,8 @@
 .w-25-col { width: 25%; }
 .w-35-col { width: 35%; }
 .w-20-col { width: 20%; }
-.w-5-col { width: 5%; }
+.w-5-col { width: 5%; }
+
+.word-break{
+    word-break: break-word;
+}