Homepage_creation

wp-content/themes/twentytwentyfive-child/footer.php

@@ -206,3 +206,5 @@
     </div>
   </div>
 </footer>
+<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

wp-content/themes/twentytwentyfive-child/header.php

@@ -10,6 +10,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <?php wp_head(); ?>
 </head>
+<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
 <style>
 @font-face {
   font-family: 'Cormorant';

wp-content/themes/twentytwentyfive-child/page-template/home.php

@@ -287,7 +287,7 @@ get_header();
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
-  gap: 30px;
+  gap: 40px;
   margin-top: 30px;
 }
 
@@ -301,24 +301,24 @@ get_header();
 } */
 
 .product-card .title {
-  font-size: 14px;
+  font-size: 16px;
   margin-top: 10px;
 }
 
 .product-card .price {
-  font-weight: 600;
+  font-weight: 500;
   margin-top: 5px;
-  font-size: 14px;
+  font-size: 16px;
 }
 
 .see-all {
   display: block;
   text-align: center;
   margin-top: 30px;
-  font-weight: 500;
+  font-weight: 400;
   color: #1a1819;
   text-decoration: none;
-  font-size: 14px;
+  font-size: 18px;
 }
 
 /* -------------------- Responsive -------------------- */
@@ -358,6 +358,227 @@ get_header();
 }
 
 
+/* Sellers styling */
+.section-title {
+      text-align: center;
+      text-transform: uppercase;
+      font-size: 14px;
+      letter-spacing: 1px;
+      color: #B08722;
+      margin-bottom: 10px;
+    }
+
+    .section-heading {
+      font-family:'Cormorant';
+      text-align: center;
+      font-size: 44px;
+      font-weight: 500;
+      margin-bottom: 40px;
+      color:#1A1819;
+    }
+
+    /* Verified Sellers */
+    .verified-sellers {
+      display: flex;
+      flex-wrap: wrap;
+      /* gap: 20px; */
+      justify-content: center;
+      align-items: center;
+    }
+
+    .seller-card {
+      flex: 1 1 45%;
+      background-color: #f6f6f6;
+      /* text-align: center; */
+      /* padding: 30px; */
+      position: relative;
+    }
+
+    .seller-card img {
+      max-width: 525px;
+      height: auto;
+      /* margin-bottom: 20px; */
+    }
+
+    .seller-card h3 {
+      font-size: 20px;
+      margin-bottom: 10px;
+    }
+
+    .visit-store {
+      font-size: 14px;
+      color: #1a1a1a;
+      text-decoration: none;
+      border-bottom: 1px solid;
+    }
+
+    .visit-store:hover {
+      color: #A08B42;
+    }
+
+    /* Testimonials */
+    .testimonials {
+      /* background-color: #fafafa; */
+    }
+
+    .testimonial-wrapper {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 28px;
+      justify-content: center;
+    }
+
+    .testimonial {
+      /* background: #fff; */
+      padding: 10px;
+      max-width: 443px;
+      border-radius: 8px;
+      margin-bottom: 50px;
+    }
+
+    .testimonial img {
+      object-fit: cover;
+      float: left;
+      margin-right: 2px;
+    }
+
+    .testimonial p {
+      font-family:'Poppins';
+      font-weight: 400;
+      font-size: 16px;
+      /* margin: 10px 0; */
+      line-height: 1.5;
+    }
+
+    .stars {
+      color: #FFA500;
+      margin-top: 10px;
+    }
+
+    .author {
+      font-size: 14px;
+      font-style: normal;
+      color: #555;
+      margin-top: 10px;
+      display: flex;
+      justify-content:space-evenly;
+    }
+
+    /* Responsive */
+    @media (max-width: 768px) {
+      .seller-card {
+        flex: 1 1 100%;
+      }
+
+      .testimonial-wrapper {
+        flex-direction: column;
+        align-items: center;
+      }
+    }
+
+    .verified-sellers-section {
+      max-width: 1320px;
+      margin: auto;
+      display: flex;
+      /* gap: 30px; */
+      align-items: stretch;
+      flex-wrap: wrap;
+      margin-block: 70px;s
+    }
+
+    .seller-text {
+      flex: 1 1 100%;
+      max-width: 300px;
+    }
+
+    .seller-text .label {
+      font-size: 14px;
+      font-family:'Poppins';
+      font-weight:500;
+      text-transform: uppercase;
+      color: #B08722;
+      letter-spacing: 1px;
+      margin-bottom: 10px;
+    }
+
+    .seller-text h2 {
+      font-family:'Cormorant';
+      font-weight:500;
+      font-size: 44px;
+      font-weight: normal;
+      line-height: 1.4;
+    }
+
+    .seller-images {
+      display: flex;
+      flex: 1 1 60%;
+      /* gap: 20px; */
+      flex-wrap: wrap;
+    }
+
+    .seller-card {
+      position: relative;
+      flex: 1 1 45%;
+      /* border-radius: 6px; */
+      overflow: hidden;
+    }
+
+    .seller-card img {
+      /* height: 100%; */
+      object-fit: cover;
+      display: block;
+    }
+
+    .seller-card .overlay {
+      position: absolute;
+      bottom: 20px;
+      left: 20px;
+      color: #1a1a1a;
+      /* background-color: rgba(255, 255, 255, 0.9); */
+      padding: 10px 14px;
+      border-radius: 6px;
+      max-width: 90%;
+    }
+
+    .seller-card .overlay h3 {
+      font-family:'Cormorant';
+      font-weight: 500;
+      font-size: 36px;
+      margin-bottom: 4px;
+    }
+
+    .seller-card .overlay a {
+      font-family:'Poppins';
+      font-size: 16px;
+      font-weight: 400;
+      text-decoration: none;
+    }
+
+    .seller-card .overlay a:hover {
+      text-decoration: underline;
+    }
+
+    /* Responsive */
+    @media (max-width: 768px) {
+      .verified-sellers-section {
+        flex-direction: column;
+      }
+
+      .seller-images {
+        flex-direction: column;
+      }
+
+      .seller-card {
+        flex: 1 1 100%;
+      }
+
+      .seller-text {
+        max-width: 100%;
+        margin-bottom: 20px;
+      }
+    }
+
+
 
 </style>
 <section class="hero-section">
@@ -443,7 +664,6 @@ get_header();
       <p>Helmets, Riding Boots, Breeches, Gloves, Vests and more—for less</p>
       <a href="#" class="btn">Shop Now</a>
     </div>
- 
   </div>
 
   <!-- Discover More Section -->
@@ -453,30 +673,165 @@ get_header();
     <div class="discover-grid">
       <div class="product-card">
       <img src="<?php echo get_stylesheet_directory_uri(); ?>/assets/images/boot_1.png" alt="boot 1"/>
-        <p class="title">ARIAT Unisex-Child Scout Zip Paddock Boot</p>
+        <p class="title">ARIAT Unisex-Child Scout Zip <br> Paddock Boot</p>
         <p class="price">$40.00</p>
       </div>
       <div class="product-card">
       <img src="<?php echo get_stylesheet_directory_uri(); ?>/assets/images/boot_2.png" alt="boot 2"/>
-        <p class="title">ARIAT Unisex-Child Scout Zip Paddock Boot</p>
+        <p class="title">ARIAT Unisex-Child Scout Zip <br> Paddock Boot</p>
         <p class="price">$40.00</p>
       </div>
       <div class="product-card">
       <img src="<?php echo get_stylesheet_directory_uri(); ?>/assets/images/boot_3.png" alt="boot 2"/>
-        <p class="title">ARIAT Unisex-Child Scout Zip Paddock Boot</p>
+        <p class="title">ARIAT Unisex-Child Scout Zip <br> Paddock Boot</p>
         <p class="price">$40.00</p>
       </div>
       <div class="product-card">
       <img src="<?php echo get_stylesheet_directory_uri(); ?>/assets/images/boot_4.png" alt="boot 2"/>
-        <p class="title">ARIAT Unisex-Child Scout Zip Paddock Boot</p>
+        <p class="title">ARIAT Unisex-Child Scout Zip <br> Paddock Boot</p>
         <p class="price">$40.00</p>
       </div>
     </div>
-    <a href="#" class="see-all">See all →</a>
+    <a href="#" class="see-all">See all <img src="<?php echo get_stylesheet_directory_uri();?>/assets/images/see-all.png" alt="see-all"></a>
   </div>
 
 </section>
 
+<section class="apparel">
+<div class="rider-sale-banner">
+  <img src="<?php echo get_stylesheet_directory_uri(); ?>/assets/images/apparel-banner.png" alt="boot 1"/>
+    <!-- <div class="sale-content">
+      <h3>Apparel</h3>
+    </div> -->
+  </div>
+
+  <div class="discover-section">
+    <p class="subheading">Top Picks</p>
+    <h2 class="heading">Galloping Gear: This Week's Top Picks for Young Riders</h2>
+    <div class="discover-grid">
+      <div class="product-card">
+      <img src="<?php echo get_stylesheet_directory_uri(); ?>/assets/images/boot_1.png" alt="boot 1"/>
+        <p class="title">ARIAT Unisex-Child Scout Zip <br> Paddock Boot</p>
+        <p class="price">$40.00</p>
+      </div>
+      <div class="product-card">
+      <img src="<?php echo get_stylesheet_directory_uri(); ?>/assets/images/boot_2.png" alt="boot 2"/>
+        <p class="title">ARIAT Unisex-Child Scout Zip <br> Paddock Boot</p>
+        <p class="price">$40.00</p>
+      </div>
+      <div class="product-card">
+      <img src="<?php echo get_stylesheet_directory_uri(); ?>/assets/images/boot_3.png" alt="boot 2"/>
+        <p class="title">ARIAT Unisex-Child Scout Zip <br> Paddock Boot</p>
+        <p class="price">$40.00</p>
+      </div>
+      <div class="product-card">
+      <img src="<?php echo get_stylesheet_directory_uri(); ?>/assets/images/boot_4.png" alt="boot 2"/>
+        <p class="title">ARIAT Unisex-Child Scout Zip <br> Paddock Boot</p>
+        <p class="price">$40.00</p>
+      </div>
+    </div>
+  </div>
+</section>
+
+<section class="verified-sellers-section">
+    <!-- Left Text Column -->
+    <div class="seller-text">
+      <div class="label">Sellers</div>
+      <h2>Meet Our<br>Verified Sellers</h2>
+    </div>
+
+    <!-- Right Image Cards -->
+    <div class="seller-images">
+      <div class="seller-card">
+        <img src="<?php echo get_stylesheet_directory_uri(); ?>/assets/images/hats.png" alt="Fedora Hats">
+        <div class="overlay">
+          <h3>Fedora Hats</h3>
+          <a href="#">Visit Store →</a>
+        </div>
+      </div>
+      <div class="seller-card">
+      <img src="<?php echo get_stylesheet_directory_uri(); ?>/assets/images/boots.jpg" alt="Fedora boots">
+        <div class="overlay">
+          <h3>Paddock Boots</h3>
+          <a href="#">Visit Store →</a>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- Testimonials Section -->
+  <section class="testimonials">
+    <div class="section-title">Testimonials</div>
+    <div class="section-heading">Happy Customers</div>
+
+    <div class="testimonial-wrapper multiple-items">
+      <div class="testimonial">
+        <img src="<?php echo get_stylesheet_directory_uri();?>/assets/images/client-1.png" alt="Customer">
+        <div class="stars">★★★★★</div>
+        <p>The quality of the riding boots I purchased is outstanding. Comfortable, durable, fit perfectly, provide excellent support and stylish — I couldn’t ask for more!</p>
+        <div class="author">– Emily R., Competitive Rider</div>
+      </div>
+      <div class="testimonial">
+        <img src="<?php echo get_stylesheet_directory_uri();?>/assets/images/client-2.png" alt="Customer">
+        <div class="stars">★★★★★</div>
+        <p>Finally, gear that keeps up with my rides! The saddle I bought provides excellent support, and my horse seems happier too.</p>
+        <div class="author">– Jack M., Trail Rider</div>
+      </div>
+      <div class="testimonial">
+        <img src="<?php echo get_stylesheet_directory_uri();?>/assets/images/client-3.png" alt="Customer">
+        <div class="stars">★★★★★</div>
+        <p>I love how this store combines elegance and practicality. My new riding jacket looks fantastic both in the arena and around town!</p>
+        <div class="author">– Rachel K., First-Time Rider</div>
+      </div>
+      <div class="testimonial">
+        <img src="<?php echo get_stylesheet_directory_uri();?>/assets/images/client-1.png" alt="Customer">
+        <div class="stars">★★★★★</div>
+        <p>I love how this store combines elegance and practicality. My new riding jacket looks fantastic both in the arena and around town!</p>
+        <div class="author">– Rachel K., First-Time Rider</div>
+      </div>
+      <div class="testimonial">
+        <img src="<?php echo get_stylesheet_directory_uri();?>/assets/images/client-2.png" alt="Customer">
+        <div class="stars">★★★★★</div>
+        <p>I love how this store combines elegance and practicality. My new riding jacket looks fantastic both in the arena and around town!</p>
+        <div class="author">– Rachel K., First-Time Rider</div>
+      </div>
+      <div class="testimonial">
+        <img src="<?php echo get_stylesheet_directory_uri();?>/assets/images/client-3.png" alt="Customer">
+        <div class="stars">★★★★★</div>
+        <p>I love how this store combines elegance and practicality. My new riding jacket looks fantastic both in the arena and around town!</p>
+        <div class="author">– Rachel K., First-Time Rider</div>
+      </div>
+    </div>
+  </section>
+
+
+
+  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
+  <script>
+  $('.multiple-items').slick({
+  infinite: true,
+  slidesToShow: 3,
+  slidesToScroll: 2,
+  arrows: false,       // Disable arrows
+  dots: false,          // Optional: show dots navigation
+  responsive: [
+    {
+      breakpoint: 1024,
+      settings: {
+        slidesToShow: 2,
+      }
+    },
+    {
+      breakpoint: 768,
+      settings: {
+        slidesToShow: 1,
+      }
+    }
+  ]
+});
+
+</script>