{"id":21,"date":"2023-03-16T10:18:36","date_gmt":"2023-03-16T10:18:36","guid":{"rendered":"http:\/\/bracketweb.com\/insuzwp\/?page_id=21"},"modified":"2026-08-27T09:33:57","modified_gmt":"2026-08-27T09:33:57","slug":"home-one","status":"publish","type":"page","link":"https:\/\/sampleprojects.in\/interior\/","title":{"rendered":"Home One"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"21\" class=\"elementor elementor-21\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-036ec37 elementor-section-stretched elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"036ec37\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;stretch_section&quot;:&quot;section-stretched&quot;,&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-ab19cf1\" data-id=\"ab19cf1\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-657e9fd elementor-section-full_width elementor-section-stretched elementor-section-height-default elementor-section-height-default\" data-id=\"657e9fd\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;stretch_section&quot;:&quot;section-stretched&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-bfbc1b2\" data-id=\"bfbc1b2\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-7c200a3 elementor-widget elementor-widget-html\" data-id=\"7c200a3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- Google Fonts (Montserrat) -->\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n  \/* HERO BANNER SLIDER *\/\r\n  .banner-slider {\r\n    position: relative;\r\n    width: 100%;\r\n    height: 100vh;\r\n    min-height: 550px;\r\n    overflow: hidden;\r\n  }\r\n\r\n  .slide-track {\r\n    position: relative;\r\n    width: 100%;\r\n    height: 100%;\r\n  }\r\n\r\n  .slide {\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    width: 100%;\r\n    height: 100%;\r\n    opacity: 0;\r\n    visibility: hidden;\r\n    transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1), visibility 1.2s;\r\n    background-size: cover;\r\n    background-position: center;\r\n  }\r\n\r\n  .slide.active {\r\n    opacity: 1;\r\n    visibility: visible;\r\n  }\r\n\r\n  \/* BLACK OVERLAY *\/\r\n  .slide::before {\r\n    content: '';\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    width: 100%;\r\n    height: 100%;\r\n    background: linear-gradient(90deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.25) 100%);\r\n    z-index: 1;\r\n  }\r\n\r\n  \/* SLIDE CONTENT *\/\r\n  .slide-content {\r\n    position: absolute;\r\n    top: 50%;\r\n    left: 8%;\r\n    transform: translateY(-50%);\r\n    max-width: 700px;\r\n    z-index: 2;\r\n    padding: 0 20px;\r\n  }\r\n\r\n  .slide-title {\r\n    font-family: 'Montserrat', sans-serif;\r\n    font-size: clamp(34px, 5vw, 64px);\r\n    font-weight: 600;\r\n    color: #ffffff;\r\n    line-height: 1.2;\r\n    letter-spacing: -0.5px;\r\n    margin-bottom: 20px;\r\n    opacity: 0;\r\n    transform: translateY(30px);\r\n    transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1) 0.3s;\r\n  }\r\n\r\n  .slide-desc {\r\n    font-family: 'Montserrat', sans-serif;\r\n    font-size: clamp(14px, 1.3vw, 17px);\r\n    font-weight: 300;\r\n    color: rgba(255, 255, 255, 0.9);\r\n    line-height: 1.6;\r\n    letter-spacing: 0.3px;\r\n    max-width: 520px;\r\n    opacity: 0;\r\n    transform: translateY(30px);\r\n    transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1) 0.5s;\r\n  }\r\n\r\n  \/* Active Animations *\/\r\n  .slide.active .slide-title,\r\n  .slide.active .slide-desc {\r\n    opacity: 1;\r\n    transform: translateY(0);\r\n  }\r\n\r\n  \/* SLIDER DOTS CONTROLS *\/\r\n  .slider-dots {\r\n    position: absolute;\r\n    right: 40px;\r\n    top: 50%;\r\n    transform: translateY(-50%);\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 12px;\r\n    z-index: 10;\r\n  }\r\n\r\n  .dot {\r\n    width: 8px;\r\n    height: 8px;\r\n    border-radius: 50%;\r\n    background: rgba(255, 255, 255, 0.35);\r\n    cursor: pointer;\r\n    transition: all 0.3s ease;\r\n  }\r\n\r\n  .dot.active {\r\n    background: #ffffff;\r\n    transform: scale(1.4);\r\n  }\r\n\r\n  \/* RESPONSIVE MOBILE FIXES *\/\r\n  @media (max-width: 768px) {\r\n    .banner-slider {\r\n      height: 85vh;\r\n      min-height: 500px;\r\n    }\r\n\r\n    .slide-content {\r\n      top: 48%;\r\n      left: 5%;\r\n      right: 5%;\r\n      max-width: 100%;\r\n      padding: 0 15px;\r\n    }\r\n\r\n    .slide-title {\r\n      font-size: 30px;\r\n      margin-bottom: 16px;\r\n    }\r\n\r\n    .slide-desc {\r\n      font-size: 14px;\r\n      max-width: 100%;\r\n    }\r\n\r\n    .slider-dots {\r\n      top: auto;\r\n      bottom: 25px;\r\n      right: 50%;\r\n      transform: translateX(50%);\r\n      flex-direction: row;\r\n      gap: 10px;\r\n    }\r\n  }\r\n\r\n  @media (max-width: 480px) {\r\n    .banner-slider {\r\n      height: 82vh;\r\n      min-height: 480px;\r\n    }\r\n\r\n    .slide-title {\r\n      font-size: 26px;\r\n      line-height: 1.25;\r\n    }\r\n\r\n    .slide-desc {\r\n      font-size: 13px;\r\n      line-height: 1.5;\r\n    }\r\n  }\r\n<\/style>\r\n\r\n<!-- BANNER SLIDER CONTAINER -->\r\n<div class=\"banner-slider\">\r\n  <div class=\"slide-track\">\r\n\r\n    <!-- Slide 1 -->\r\n    <div class=\"slide active\" style=\"background-image: url('http:\/\/sampleprojects.in\/interior\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-Aug-22-2026-02_57_50-PM.png');\">\r\n      <div class=\"slide-content\">\r\n        <h1 class=\"slide-title\">Think.<br> Dream. Design. Curate<\/h1>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- Slide 2 -->\r\n    <div class=\"slide\" style=\"background-image: url('http:\/\/sampleprojects.in\/interior\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-Aug-27-2026-03_01_41-PM.png');\">\r\n      <div class=\"slide-content\">\r\n        <h1 class=\"slide-title\">Bespoke Interiors<br>Shaped Around The Way You Live<\/h1>\r\n      <\/div>\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n  <!-- Dots -->\r\n  <div class=\"slider-dots\">\r\n    <span class=\"dot active\" data-slide=\"0\"><\/span>\r\n    <span class=\"dot\" data-slide=\"1\"><\/span>\r\n  <\/div>\r\n<\/div>\r\n\r\n<script>\r\n  document.addEventListener('DOMContentLoaded', function() {\r\n    const slides = document.querySelectorAll('.slide');\r\n    const dots = document.querySelectorAll('.dot');\r\n    let currentSlide = 0;\r\n    const slideInterval = 5000;\r\n    let timer;\r\n\r\n    function goToSlide(index) {\r\n      slides[currentSlide].classList.remove('active');\r\n      dots[currentSlide].classList.remove('active');\r\n      currentSlide = index;\r\n      slides[currentSlide].classList.add('active');\r\n      dots[currentSlide].classList.add('active');\r\n    }\r\n\r\n    function nextSlide() {\r\n      let nextIndex = (currentSlide + 1) % slides.length;\r\n      goToSlide(nextIndex);\r\n    }\r\n\r\n    function startSlider() {\r\n      timer = setInterval(nextSlide, slideInterval);\r\n    }\r\n\r\n    function stopSlider() {\r\n      clearInterval(timer);\r\n    }\r\n\r\n    dots.forEach((dot, index) => {\r\n      dot.addEventListener('click', () => {\r\n        stopSlider();\r\n        goToSlide(index);\r\n        startSlider();\r\n      });\r\n    });\r\n\r\n    startSlider();\r\n  });\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Think. Dream. Design. Curate Bespoke InteriorsShaped Around The Way You Live<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-21","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/sampleprojects.in\/interior\/wp-json\/wp\/v2\/pages\/21","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sampleprojects.in\/interior\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sampleprojects.in\/interior\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sampleprojects.in\/interior\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sampleprojects.in\/interior\/wp-json\/wp\/v2\/comments?post=21"}],"version-history":[{"count":0,"href":"https:\/\/sampleprojects.in\/interior\/wp-json\/wp\/v2\/pages\/21\/revisions"}],"wp:attachment":[{"href":"https:\/\/sampleprojects.in\/interior\/wp-json\/wp\/v2\/media?parent=21"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}