<?php require_once('./includes/header.php'); ?>
<div class="spacer"></div>



<div class=" hero-slider">

  <!-- Slide 1 -->
  <div class="hero hero-slide active" style="background-image:url('./assets/images/Sliderr1.jpg?ver=2g3');">
    <div class="overlay">
      <div class="content">
        <h1>WE KNOW WHAT HAIR CUT SUITS YOU</h1>
        <h3 class="mt-5" >MAKING YOU LOOK</h3>
        <h3 class="mb-5" style="color:#bc9335">
            AWESOME & MANLY
        </h3>
        <a href="https://app.shedul.com/online_bookings/27777/link" target="blank" class="btn">BOOK NOW</a>
      </div>
    </div>
  </div>

  <!-- Slide 2 -->
  <div class="hero hero-slide " style="background-image:url('./assets/images/Slide11.jpg?ver=g324');">
    <div class="overlay">
      <div class="content">
      <h1>WE KNOW WHAT HAIR CUT SUITS YOU</h1>
        <h3 class="mt-5" >MAKING YOU LOOK</h3>
        <h3 class="mb-5" style="color:#bc9335">
            AWESOME & MANLY
        </h3>
        <a href="https://app.shedul.com/online_bookings/27777/link" target="blank" class="btn">BOOK NOW</a>
      </div>
    </div>
  </div>

  <!-- Slide 3 -->
  <div class="hero hero-slide" style="background-image:url('./assets/images/Slide3333.jpg?ver=324gf');">
    <div class="overlay">
      <div class="content">
      <h1>WE KNOW WHAT HAIR CUT SUITS YOU</h1>
        <h3 class="mt-5" >MAKING YOU LOOK</h3>
        <h3 class="mb-5" style="color:#bc9335">
            AWESOME & MANLY
        </h3>
        <a href="https://app.shedul.com/online_bookings/27777/link" target="blank" class="btn">BOOK NOW</a>
      </div>
    </div>
  </div>

  <!-- Controls -->
  <div class="slider-controls">
    <button id="prev">❮</button>
    <button id="next">❯</button>
  </div>
</div>





<script>
let slides = document.querySelectorAll('.hero-slide');
let current = 0;

document.getElementById('next').addEventListener('click', () => {
  slides[current].classList.remove('active');
  current = (current + 1) % slides.length;
  slides[current].classList.add('active');
});

document.getElementById('prev').addEventListener('click', () => {
  slides[current].classList.remove('active');
  current = (current - 1 + slides.length) % slides.length;
  slides[current].classList.add('active');
});

// Auto Slide
setInterval(() => {
  slides[current].classList.remove('active');
  current = (current + 1) % slides.length;
  slides[current].classList.add('active');
}, 4000); // 5 seconds
</script>






<main class="home pt-0">
    
    <section class="action-bar">
    <div class="action-item">
        <span class="action-icon"><img src="./assets/images/q1.png"></span>
        <span class="action-text">FIND A LOCATION</span>
    </div>

    <div class="action-divider"></div>

    <div class="action-item">
        <span class="action-icon"><img src="./assets/images/q2.png"></span>
        <span class="action-text">OUR PRICES</span>
    </div>

    <div class="action-divider"></div>

    <div class="action-item">
        <span class="action-icon"><img src="./assets/images/q3.png"></span>
        <span class="action-text">BOOK A RESERVATION</span>
    </div>
</section>

    
    
    
    
    
    
    
    
    
    

    <section class="section_twenty_one">
        <div class="container" style="position:relative">
                <div class="row">


                <div class="col-xl-6 wow animate__slideInUp  animated" data-wow-delay="0.5s" style="visibility: visible; animation-delay: 0.5s; animation-name: slideInUp;">
         
            <div class="image-section">
            <img src="<?php echo $base_url; ?>/assets/images/Sec-A.jpg?v=g1hhg" alt="" class="image">
            <img src="<?php echo $base_url; ?>/assets/images/bg-circle-patch.png" class="bg_circle_patch" alt="">
           
        </div>
        <div class="pxl-content--holder"><div class="pxl-content--highlight">Our aim is to provide the best haircut in town</div></div>
<div class="content-section">
    <div class="content-box expert" style="background-color: white;">
        <img src="<?php echo $base_url; ?>/assets/images/icon_01.png?v=gggg1">
        <h3>Our Heritage</h3>
        <p>
Classic barbering rooted 
in tradition.</p>
    </div>
    <div class="content-box target">
        <img src="<?php echo $base_url; ?>/assets/images/icon_02.png?v=ghgggg1">
        <h3 style="color:#bc9355">Our Craft
</h3>
        <p>Precision grooming with modern techniques.</p>
    </div>
    <div class="content-box productivity">
        <img src="<?php echo $base_url; ?>/assets/images/icon_03.png?v=hgggggg1">
        <h3>Our Promise
</h3>
        <p>Quality service, every 
single visit.</p>
    </div>
</div>
        
        
      </div>


                    <div class="col-xl-6 d_flex wow animate__slideInUp" data-wow-delay="1s" style="position:relative">
                        <h6>About Us</h6>
                        <h4><strong>Welcome to City & Central Barber Shop!
</strong></h4>
<p>

Look for the famous red and white barber’s pole and you’ll walk in to a warm welcome, prompt service, smart and modern haircutting, all provided with a sense of traditional barber shop service.





</p>

<p>
With haircuts from £25.00 this is the ideal solution for locals and visitors alike. Enjoy our music, atmosphere and numerous photographs of 50s, 60s and 70s icons. Book for an appointment at a time to suit you on our number 020 7486 0561.

</p>



                        <div class="btn_wrap">
                         <a href="<?php echo $base_url; ?>/about-us">
                              <span class="txt">Read More</span>
                              <span class="arrow_wrap">
                                   <img src="<?php echo $base_url; ?>/assets/images/btn_arrow.png?v=3" alt="">
                              </span>
                         </a>
                         
                        </div>

                       
                    </div>
                </div>
            </div>
    </section>


<script>
jQuery('.expert, .productivity').hover(
  function () {
    // Hover in
    jQuery(this).css('background-color', '#191919');

    // change this icon to -w version
    let img = jQuery(this).find('img');
    let src = img.attr('src');
    if (!src.includes('-w')) {
      img.attr('src', src.replace('.png', '-w.png'));
    }

    // target box becomes white + normal icon
    let target = jQuery('.target');
    target.css({'background-color': 'white', 'color': 'black'});
    let targetImg = target.find('img');
    targetImg.attr('src', targetImg.attr('src').replace('-w.png', '.png'));
  },
  function () {
    // Hover out
    jQuery(this).css('background-color', 'white');

    // revert this icon back
    let img = jQuery(this).find('img');
    let src = img.attr('src');
    img.attr('src', src.replace('-w.png', '.png'));

    // target box back to red + -w icon
    let target = jQuery('.target');
    target.css({'background-color': '#191919', 'color': 'white'});
    let targetImg = target.find('img');
    if (!targetImg.attr('src').includes('-w')) {
      targetImg.attr('src', targetImg.attr('src').replace('.png', '-w.png'));
    }
  }
);
</script>



<section class="section section_one_one mt-0 haha">
    <div class="container">
        <section class="row section_twenty ">
               <div class="col-12">
                      <h6>What We Do</h6>
                      <p>We run a men’s barbershop in its best traditions. Our guys will help you look<br>
stylish and confident, and most importantly, manly.</p>
               </div>
          </section>
        <div class="row gx-4 ">
            <div class="col-md-6 col-lg-4 wow animate__slideInUp" data-wow-delay="1.5s" style="visibility: visible; animation-delay: 1.5s; animation-name: slideInUp;">
                <div class="wrapper">
                    <div class="img_wrap">
                        <div class="pxl-post--innerd">
                        <div class="pxl-post--featuredd hover-imge-effect22">
                               <img src="./assets/images/Sec-D/1.png" alt="" class="img-fluid">
                                <div class="pxl-featured--overlady"></div> 
                               
                   
                         
                        
                        </div>
                    </div>
                    </div>
                    <div class="detail_wrap">
                        <h6>BEARD TRIMMING</h6>
                        <p>
Keep looking your best with regular 
beard trimming. Just stop by for a beard 
procedure!   <span style="color:#bc9355;">From £20.00</span></p>
                  
                    </div>
                    
                </div>
            </div>
                        <div class="col-md-6 col-lg-4 wow animate__slideInUp" data-wow-delay="1.5s" style="visibility: visible; animation-delay: 1.5s; animation-name: slideInUp;">
                <div class="wrapper">
                    <div class="img_wrap">
                        <div class="pxl-post--innerd">
                        <div class="pxl-post--featuredd hover-imge-effect22">
                               <img src="./assets/images/Sec-D/2.png" alt="" class="img-fluid">
                                <div class="pxl-featured--overlady"></div> 
                               
                         
                            <div class="pxl-post--iconplus">+</div>
                        </div>
                    </div>
                    </div>
                    <div class="detail_wrap">
                        <h6>HAIRCUT</h6>
                        <p>
Our highly trained  Master barbers begin 
with a thorough consultation before 
your haircut starts.   <span style="color:#bc9355;"> From £30.00                        </p>
                  
                    </div>
                    
                </div>
            </div>

            <div class="col-md-6 col-lg-4 wow animate__slideInUp" data-wow-delay="1.5s" style="visibility: visible; animation-delay: 1.5s; animation-name: slideInUp;">
                <div class="wrapper">
                    <div class="img_wrap">
                        <div class="pxl-post--innerd">
                        <div class="pxl-post--featuredd hover-imge-effect22">
                               <img src="./assets/images/Sec-D/3.png" alt="" class="img-fluid">
                                <div class="pxl-featured--overlady"></div> 
                               
                         
                            <div class="pxl-post--iconplus">+</div>
                        </div>
                    </div>
                    </div>
                    <div class="detail_wrap">
                        <h6>SHAVE</h6>
                          <p>
For premium result, at our barbershop 
we combine modern Technics </span>
with traditional ones.   <span style="color:#bc9355;"> From £35  </span>                      </p>
                  
                    </div>
                    
                </div>
            </div>


        </div>
    </div>
    </section>

<section class="section section_eleven">
        <div class="container" style="position:relative">
                <div class="row gx-xl-5">
                  
                    <div class="col-lg-5 d_flex wow animate__slideInUp order-2 order-lg-1" data-wow-delay="1s" style="position: relative; visibility: visible; animation-delay: 1s; animation-name: slideInUp;">
                        <h6>Traditional Barbering, 
Modern Style</h6>
                        <p>
At City & Central Barber Shop, we believe a great haircut is about more than just style — it’s about confidence, comfort, and craftsmanship. Our barbers blend time-honoured barbering traditions with modern techniques to deliver sharp haircuts, precise beard trims, and premium shaves tailored to each client.                        </p>  

                    <div class="row">
                        <div class="col-md-12">
                            <div class="__wrap">
                                <span>
From the moment you walk through our doors, you’ll 
experience a warm welcome, expert consultation, and a relaxed atmosphere inspired by the golden era of barbering.                            </div>
                        </div>
                    </div>

                        <div class="wrap">
                        
                            <ul>
                                <li>
                                  Experienced master barbers with a passion for precision
  </li>

   <li>Classic barbershop atmosphere combined with modern styling
  </li>

   <li>Professional grooming at fair, transparent prices </li>
                                

</ul>
                        </div>

                      <a href="<?php echo $base_url; ?>/about-us" class="__btn">Know More</a> 
                       
                    </div>

                    <div class="col-lg-7 wow animate__slideInUp order-1 order-lg-2" data-wow-delay="0.5s" style="visibility: visible; animation-delay: 0.5s; animation-name: slideInUp;">
                     
                     <div class="img_wrap">
                         <img src="./assets/images/Circle-1.png?v=g3" alt="" class="img-fluid">
                     </div>
                  
                     
                 </div>

                </div>
            </div>
</section>

<section class="section section_one_one mt-0">
    <div class="container">
        <section class="row section_twenty">
               <div class="col-12">
                      <h6>Expert Barbers</h6>
                      <p>Our stylist offers traditional and contemporary services along with our very own treatment.</p>
               </div>
          </section>
        <div class="row gx-4">
            <div class="col-md-6 col-lg-4 wow animate__slideInUp" data-wow-delay="1.5s" style="visibility: visible; animation-delay: 1.5s; animation-name: slideInUp;">
                <div class="wrapper">
                    <div class="img_wrap">
                        <div class="pxl-post--innerd">
                        <div class="pxl-post--featuredd hover-imge-effect22">
                               <img src="./assets/images/Sec-J/1.jpg" alt="" class="img-fluid">
                                <div class="pxl-featured--overlady"></div> 
                               
                   
                         
                        
                        </div>
                    </div>
                    </div>
                    <div class="detail_wrap">
                        <h6>BESI</h6>
                      
                    </div>
                    
                </div>
            </div>
                        <div class="col-md-6 col-lg-4 wow animate__slideInUp" data-wow-delay="1.5s" style="visibility: visible; animation-delay: 1.5s; animation-name: slideInUp;">
                <div class="wrapper">
                    <div class="img_wrap">
                        <div class="pxl-post--innerd">
                        <div class="pxl-post--featuredd hover-imge-effect22">
                               <img src="./assets/images/Sec-J/2.jpg" alt="" class="img-fluid">
                                <div class="pxl-featured--overlady"></div> 
                               
                         
                            <div class="pxl-post--iconplus">+</div>
                        </div>
                    </div>
                    </div>
                    <div class="detail_wrap">
                        <h6>ZAK</h6>
                     
                  
                    </div>
                    
                </div>
            </div>

            <div class="col-md-6 col-lg-4 wow animate__slideInUp" data-wow-delay="1.5s" style="visibility: visible; animation-delay: 1.5s; animation-name: slideInUp;">
                <div class="wrapper">
                    <div class="img_wrap">
                        <div class="pxl-post--innerd">
                        <div class="pxl-post--featuredd hover-imge-effect22">
                               <img src="./assets/images/Sec-J/3.jpg" alt="" class="img-fluid">
                                <div class="pxl-featured--overlady"></div> 
                               
                         
                            <div class="pxl-post--iconplus">+</div>
                        </div>
                    </div>
                    </div>
                    <div class="detail_wrap">
                        <h6>ALBERT
</h6>

                    </div>
                    
                </div>
            </div>


        </div>
    </div>
    </section>




<section class="section_twenty gaga pb-5">
     <div class="container">
          <div class="row">
               <div class="col-12 mb-5">
                      <h6>Our Products</h6>
                      
               </div>
          </div>

          <div class="row">
               <div class="col-12 col-md-6 col-xl-3 mb-4">
                <div class="wrap">
                   
                    <span class="number">01</span>
                        <div class="img_wrap">
                            <img src="<?php echo $base_url; ?>/assets/images/Sec-B/1.jpg?v=1gGg" alt="" class="img-fluid">
                        </div>
                          <div class="detail_wrap">
                            <div class="text_wrap">
                            <p class="heading">American Crew Daily
Conditioner 250ml</p>

                            </div>
                            <div class="btn_wrap">
                                <a href="<?php echo $base_url; ?>/services.php#ser1">£15.00</a>
                            </div>
                        </div>
                    </div>
               </div>
               <div class="col-12 col-md-6 col-xl-3 mb-4">
                <div class="wrap">
                  
                    <span class="number color">02</span>
                        <div class="img_wrap">
                            <img src="<?php echo $base_url; ?>/assets/images/Sec-B/2.jpg?v=1ghGg" alt="" class="img-fluid">
                        </div>
                        <div class="detail_wrap">
                            <div class="text_wrap">
                            <p class="heading">American Crew Daily 
Moisturising Shampoo 250ml</p>
                            </div>
                            <div class="btn_wrap">
                                <a href="<?php echo $base_url; ?>/services.php#ser2">£13.00</a>
                            </div>
                        </div>
                      
                    </div>
               </div>
               <div class="col-12 col-md-6 col-xl-3 mb-4">
                <div class="wrap">
                  
                    <span class="number">03</span>
                        <div class="img_wrap">
                            <img src="<?php echo $base_url; ?>/assets/images/Sec-B/3.jpg?v=hGgg1" alt="" class="img-fluid">
                        </div>
                        <div class="detail_wrap">
                            <div class="text_wrap">
                            <p class="heading">American Crew Daily 
Shampoo 250ml</p>
                            </div>
                            <div class="btn_wrap">
                                <a href="<?php echo $base_url; ?>/services.php#ser3">£13.00</a>
                            </div>
                        </div>
                        
                    </div>
               </div>
                           <div class="col-12 col-md-6 col-xl-3 mb-4">
                <div class="wrap">
                   
                    <span class="number color">04</span>
                        <div class="img_wrap">
                            <img src="<?php echo $base_url; ?>/assets/images/Sec-B/4.jpg?v=1Ghggg" alt="" class="img-fluid">
                        </div>
                          <div class="detail_wrap">
                            <div class="text_wrap">
                            <p class="heading">American Crew 
Defining Paste 85gr</p>

                            </div>
                            <div class="btn_wrap">
                                <a href="<?php echo $base_url; ?>/services.php#ser1">£18.00</a>
                            </div>
                        </div>
                    </div>
               </div>


<a href="<?php echo $base_url; ?>/our-products" class="btnn">All  Products</a>
              
            
          </div>
     </div>
</section>





 <section class="price-wrap">
    <div class="price-overlay"></div>

    <div class="price-container">
        <h2 class="price-heading">Our Prices</h2>
        <span class="price-heading-line"></span>

        <div class="price-list-grid">
            <div class="price-row">
                <span class="service-name">CLIPPER CUT</span>
                <span class="service-price">£30.00</span>
            </div>

            <div class="price-row">
                <span class="service-name">HAIRCUT</span>
                <span class="service-price">£35.00</span>
            </div>

            <div class="price-row">
                <span class="service-name">HAIRCUT, SHAMPOO & FINISH</span>
                <span class="service-price">£45.00</span>
            </div>

            <div class="price-row">
                <span class="service-name">SHAVE (from)</span>
                <span class="service-price">£35.00</span>
            </div>

            <div class="price-row">
                <span class="service-name">FADE HAIRCUT (from)</span>
                <span class="service-price">£40.00</span>
            </div>

            <div class="price-row">
                <span class="service-name">BEARD TRIM (from)</span>
                <span class="service-price">£20.00</span>
            </div>
        </div>

        <div class="price-footer">
            <div class="price-hours">
                <strong>Opening Hours:</strong><br>
                Monday–Friday 9:00 – 19:00<br>
                Saturday 9:00 – 18:00, Sunday 10:00 – 17:00
            </div>

            <a href="https://app.shedul.com/online_bookings/27777/link" target="blank" class="price-btn">Make an Appointment Now</a>
        </div>
    </div>
</section>









<section class="section section_four" id="about">
        <div class="container" style="position:relative">
            <div class="bg_wrap"></div>
                <div class="row">
                    <div class="col-lg-5 wow animate__slideInUp" data-wow-delay="0.5s" style="visibility: visible; animation-delay: 0.5s; animation-name: slideInUp;">
                        <div class="img_wrapper">
                        <div class="img_wrap">
                            <img src="./assets/images/Sec-E/1.jpg?v=gG1" alt="" class="img-fluid">
                        </div>
                        </div>
                        
                    </div>
                    <div class="col-lg-7 d_flex wow animate__slideInUp" data-wow-delay="1s" style="position: relative; visibility: visible; animation-delay: 1s; animation-name: slideInUp;">
                        <h6>MAKING YOU LOOK GOOD<br>
 IS IN OUR HERITAGE</h6>
                        <p>
At City & Central Barbers it is our goal to keep our clients feeling clean, relaxed and fulfilled. Whether you are maintaining the look of a corporate professional to a fashion conscious rebel, your 
experience here will guarantee the luxury you expect and the style you desire.


                        </p>
                        
                        <p>
As professional barbers and stylists we stay passionate about our field and keeping you on top of the latest trends for men. So sit back, relax and enjoy the decadence of Male Grooming.

                        </p>
                       
                        <div class="wrap">
                        <div class="thumb_wrap">
                            <img src="./assets/images/Sec-E/2.jpg?v=Gg1" alt="" class="img-fluid">
                        </div>
                    
                       
                        </div>
                       
                    </div>
                </div>
            </div>
    </section>


<section class="section_banner">
    <div class="container">
        <img src="./assets/images/img_06.png?v=34" alt="" class="img-fluid">
    </div>
</section>



    



    
    

   
<section id="about" class="section section_ten_ten pb-0 pt-0">
        <div class="container" style="position:relative">
                <div class="row gx-xl-5">
 <div class="col-lg-6 wow animate__slideInUp" data-wow-delay="0.5s" style="visibility: visible; animation-delay: 0.5s; animation-name: slideInUp;">                      
                    <h6>Why Choose Us? </h6>
                        <p>
We keep things simple with clear, fair pricing and no hidden fees. Our reporting is honest and easy to follow, so you always know how your property is performing. With open communication at every stage, you stay informed and in control. We help property owners maximise returns without the day‑to‑day stress.

</p>
                        <div class="img_wrap">
                            <img src="./assets/images/Sec-I.jpg?ver=176g9414241" alt="" class="img-fluid">
                        </div>
                     
                        
                    </div>
                    <div class="col-lg-6 d_flex wow animate__slideInUp" data-wow-delay="1s" style="position: relative; visibility: visible; animation-delay: 1s; animation-name: slideInUp;">
                 

                    <div class="wrapper">
                       
                            <div class="__wrap">
                                <img src="./assets/images/r11.png?ver=1769414241%gg20alt" alt=" "="">
                                <div class="details">
                                    <span class="heading">Experienced Master Barbers</span>
                                    <span class="details">
Our skilled barbers are trained in both classic and modern techniques, ensuring every cut is precise and tailored to you. Each service begins with a proper consultation to 
understand your style, preferences, and expectations.    </span>                             </div>
                            </div>
                       
                            <div class="__wrap">
                              
                                <img src="./assets/images/r22.png?ver=1769414241%g" alt=" "="">
                                   <div class="details">
                                    <span class="heading">Classic Atmosphere, Modern Results</span>
                                    <span class="details">
Enjoy the authentic feel of a traditional men’s barbershop combined with modern grooming standards. Relax to great music and take in iconic imagery from barbering’s golden eras, all while receiving sharp, contemporary results. It’s timeless style delivered with modern expertise.                            </div>
                      </span>
                      </div>
                            <div class="__wrap">
                        
                                <img src="./assets/images/r33.png?ver=1769414241%gg20alt" alt=" "="">
                                <div class="details">
                                    <span class="heading">Reliable Service & Fair Pricing</span>
                                    <span class="details">
We pride ourselves on providing prompt, professional service without unnecessary waiting. Our pricing is clear and honest, with no hidden costs or surprises. This ensures high-quality grooming that offers genuine value for money.
</span>
                                </div>
                            </div>
                        

                  
                       
                    </div>

                       <!--  <div class="wrap">
                        
                        <ul>
                            <li>High-quality workmanship and attention to detail</li>
                            <li>Customizing services to ensure the best possible results</li>
                            <li>Exceptional customer service for staffing requirements</li>
                        </ul>
                        </div> -->

                       
                    </div>
                </div>
            </div>
    </section>    
    




   
</main>

<?php require_once('./includes/footer.php'); ?>