Construction Portfolio<\/title>\r\n <script src=\"\/_sdk\/element_sdk.js\"><\/script>\r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <style>\r\n body {\r\n box-sizing: border-box;\r\n }\r\n \r\n @keyframes fadeInUp {\r\n from {\r\n opacity: 0;\r\n transform: translateY(30px);\r\n }\r\n to {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n }\r\n \r\n @keyframes slideIn {\r\n from {\r\n opacity: 0;\r\n transform: translateX(-50px);\r\n }\r\n to {\r\n opacity: 1;\r\n transform: translateX(0);\r\n }\r\n }\r\n \r\n .fade-in-up {\r\n animation: fadeInUp 0.8s ease-out forwards;\r\n }\r\n \r\n .slide-in {\r\n animation: slideIn 0.7s ease-out forwards;\r\n }\r\n \r\n .carousel-container {\r\n position: relative;\r\n width: 100%;\r\n height: 100%;\r\n overflow: hidden;\r\n border-radius: 12px;\r\n }\r\n \r\n .carousel-track {\r\n display: flex;\r\n height: 100%;\r\n transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);\r\n }\r\n \r\n .carousel-slide {\r\n min-width: 100%;\r\n height: 100%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n \r\n .carousel-dots {\r\n position: absolute;\r\n bottom: 20px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n display: flex;\r\n gap: 8px;\r\n z-index: 10;\r\n }\r\n \r\n .carousel-dot {\r\n width: 10px;\r\n height: 10px;\r\n border-radius: 50%;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n opacity: 0.5;\r\n }\r\n \r\n .carousel-dot.active {\r\n opacity: 1;\r\n transform: scale(1.3);\r\n }\r\n \r\n .project-section {\r\n opacity: 0;\r\n animation: fadeInUp 1s ease-out forwards;\r\n }\r\n \r\n .project-section:nth-child(even) {\r\n animation-delay: 0.1s;\r\n }\r\n \r\n .project-section:nth-child(odd) {\r\n animation-delay: 0.2s;\r\n }\r\n \r\n .status-badge {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 6px;\r\n padding: 8px 16px;\r\n border-radius: 20px;\r\n font-weight: 600;\r\n font-size: 0.875rem;\r\n animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\r\n }\r\n \r\n @keyframes pulse {\r\n 0%, 100% {\r\n opacity: 1;\r\n }\r\n 50% {\r\n opacity: 0.8;\r\n }\r\n }\r\n \r\n .info-item {\r\n display: flex;\r\n align-items: start;\r\n gap: 12px;\r\n padding: 12px 0;\r\n border-bottom: 1px solid rgba(255, 255, 255, 0.1);\r\n }\r\n \r\n .info-item:last-child {\r\n border-bottom: none;\r\n }\r\n <\/style>\r\n <style>@view-transition { navigation: auto; }<\/style>\r\n <script src=\"\/_sdk\/data_sdk.js\" type=\"text\/javascript\"><\/script>\r\n <\/head>\r\n <body class=\"h-full m-0\">\r\n <div class=\"w-full h-full overflow-auto\" id=\"main-wrapper\">\r\n <header class=\"py-20 px-6 text-center\" id=\"header-section\">\r\n <div class=\"max-w-4xl mx-auto\">\r\n <h1 class=\"text-5xl md:text-6xl font-bold mb-4 slide-in\" id=\"company-name\">Ongoing Projects<\/h1>\r\n <p class=\"text-xl md:text-2xl opacity-90 fade-in-up\" id=\"tagline\">Building Excellence Across India<\/p>\r\n <\/div>\r\n <\/header>\r\n <main class=\"max-w-7xl mx-auto px-6 py-12\">\r\n <section class=\"project-section mb-24\">\r\n <h2 class=\"text-4xl font-bold mb-8\" id=\"project-1-title\">Sapphire Urban Residences<\/h2>\r\n <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-8 items-center\">\r\n <div class=\"carousel-container\" style=\"height: 400px;\" data-carousel=\"1\">\r\n <div class=\"carousel-track\" data-track=\"1\">\r\n <div class=\"carousel-slide\">\r\n \r\n <img decoding=\"async\" src=\"\/rrbui\/op\/i1.png\">\r\n <\/svg>\r\n \r\n <\/div>\r\n <div class=\"carousel-slide\">\r\n \r\n <img decoding=\"async\" src=\"\/rrbui\/op\/i2.png\">\r\n <\/div>\r\n <div class=\"carousel-slide\">\r\n \r\n <img decoding=\"async\" src=\"\/rrbui\/op\/i3.png\">\r\n <\/div>\r\n <\/div>\r\n <div class=\"carousel-dots\" data-dots=\"1\"><\/div>\r\n <\/div>\r\n <div class=\"space-y-6\">\r\n <div class=\"status-badge\" id=\"status-1\"><span>\ud83c\udfd7\ufe0f<\/span> <span>In Progress<\/span>\r\n <\/div>\r\n <div class=\"info-item\"><span class=\"text-2xl\">\ud83d\udccd<\/span>\r\n <div>\r\n <h3 class=\"font-semibold text-lg mb-1\">Sector 150, Noida<\/h3>\r\n <p class=\"opacity-90\" id=\"project-1-location\">Uttar Pradesh<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"info-item\"><span class=\"text-2xl\">\ud83d\udccb<\/span>\r\n <div>\r\n <h3 class=\"font-semibold text-lg mb-1\">Description<\/h3>\r\n <p class=\"opacity-90\" id=\"project-1-description\">High-rise residential towers with 2\/3 BHK apartments, landscaped podiums, clubhouse, and EV parking facilities.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"info-item\"><span class=\"text-2xl\">\u23f1\ufe0f<\/span>\r\n <div>\r\n <h3 class=\"font-semibold text-lg mb-1\">Timeline<\/h3>\r\n <p class=\"opacity-90\">36 months \u2022 65% Complete<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n <section class=\"project-section mb-24\">\r\n <h2 class=\"text-4xl font-bold mb-8\" id=\"project-2-title\">Eastern Coal Handling Facility<\/h2>\r\n <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-8 items-center\">\r\n <div class=\"carousel-container\" style=\"height: 400px;\" data-carousel=\"2\">\r\n <div class=\"carousel-track\" data-track=\"2\">\r\n <div class=\"carousel-slide\">\r\n \r\n <img decoding=\"async\" src=\"\/rrbui\/op\/i4.png\">\r\n <\/div>\r\n <div class=\"carousel-slide\">\r\n \r\n <img decoding=\"async\" src=\"\/rrbui\/op\/i5.png\">\r\n <\/div>\r\n <div class=\"carousel-slide\">\r\n \r\n <img decoding=\"async\" src=\"\/rrbui\/op\/i6.png\">\r\n <\/div>\r\n <\/div>\r\n <div class=\"carousel-dots\" data-dots=\"2\"><\/div>\r\n <\/div>\r\n <div class=\"space-y-6\">\r\n <div class=\"status-badge\" id=\"status-2\"><span>\ud83c\udfd7\ufe0f<\/span> <span>In Progress<\/span>\r\n <\/div>\r\n <div class=\"info-item\"><span class=\"text-2xl\">\ud83d\udccd<\/span>\r\n <div>\r\n <h3 class=\"font-semibold text-lg mb-1\">Location<\/h3>\r\n <p class=\"opacity-90\" id=\"project-2-location\">Talcher, Odisha<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"info-item\"><span class=\"text-2xl\">\ud83d\udccb<\/span>\r\n <div>\r\n <h3 class=\"font-semibold text-lg mb-1\">Description<\/h3>\r\n <p class=\"opacity-90\" id=\"project-2-description\">Development of coal handling plant including conveyor systems, storage yards, weighbridges, and internal roads.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"info-item\"><span class=\"text-2xl\">\u23f1\ufe0f<\/span>\r\n <div>\r\n <h3 class=\"font-semibold text-lg mb-1\">Timeline<\/h3>\r\n <p class=\"opacity-90\">36 months \u2022 75% Complete<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n <section class=\"project-section mb-24\">\r\n <h2 class=\"text-4xl font-bold mb-8\" id=\"project-3-title\">GreenFuel Bio-Refinery Unit<\/h2>\r\n <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-8 items-center\">\r\n <div class=\"carousel-container\" style=\"height: 400px;\" data-carousel=\"3\">\r\n <div class=\"carousel-track\" data-track=\"3\">\r\n <div class=\"carousel-slide\">\r\n \r\n <img decoding=\"async\" src=\"\/rrbui\/op\/i7.png\">\r\n <\/div>\r\n <div class=\"carousel-slide\">\r\n \r\n <img decoding=\"async\" src=\"\/rrbui\/op\/i8.png\">\r\n <\/div>\r\n <div class=\"carousel-slide\">\r\n \r\n <img decoding=\"async\" src=\"\/rrbui\/op\/i9.png\">\r\n <\/div>\r\n <\/div>\r\n <div class=\"carousel-dots\" data-dots=\"3\"><\/div>\r\n <\/div>\r\n <div class=\"space-y-6\">\r\n <div class=\"status-badge\" id=\"status-3\"><span>\ud83c\udfd7\ufe0f<\/span> <span>In Progress<\/span>\r\n <\/div>\r\n <div class=\"info-item\"><span class=\"text-2xl\">\ud83d\udccd<\/span>\r\n <div>\r\n <h3 class=\"font-semibold text-lg mb-1\">Location<\/h3>\r\n <p class=\"opacity-90\" id=\"project-3-location\">Barmer, Rajasthan<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"info-item\"><span class=\"text-2xl\">\ud83d\udccb<\/span>\r\n <div>\r\n <h3 class=\"font-semibold text-lg mb-1\">Description<\/h3>\r\n <p class=\"opacity-90\" id=\"project-3-description\">Construction of a bio-ethanol refinery unit with storage tanks, process buildings, and safety infrastructure.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"info-item\"><span class=\"text-2xl\">\u23f1\ufe0f<\/span>\r\n <div>\r\n <h3 class=\"font-semibold text-lg mb-1\">Timeline<\/h3>\r\n <p class=\"opacity-90\">38 months \u2022 58% Complete<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n <section class=\"project-section mb-24\">\r\n <h2 class=\"text-4xl font-bold mb-8\" id=\"project-4-title\">Orion Integrated Logistics Park<\/h2>\r\n <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-8 items-center\">\r\n <div class=\"carousel-container\" style=\"height: 400px;\" data-carousel=\"4\">\r\n <div class=\"carousel-track\" data-track=\"4\">\r\n <div class=\"carousel-slide\">\r\n \r\n <img decoding=\"async\" src=\"\/rrbui\/op\/10.png\">\r\n <\/div>\r\n <div class=\"carousel-slide\">\r\n \r\n <img decoding=\"async\" src=\"\/rrbui\/op\/11.png\">\r\n <\/div>\r\n <div class=\"carousel-slide\">\r\n \r\n <img decoding=\"async\" src=\"\/rrbui\/op\/12.png\">\r\n <\/div>\r\n <\/div>\r\n <div class=\"carousel-dots\" data-dots=\"4\"><\/div>\r\n <\/div>\r\n <div class=\"space-y-6\">\r\n <div class=\"status-badge\" id=\"status-4\"><span>\ud83c\udfd7\ufe0f<\/span> <span>In Progress<\/span>\r\n <\/div>\r\n <div class=\"info-item\"><span class=\"text-2xl\">\ud83d\udccd<\/span>\r\n <div>\r\n <h3 class=\"font-semibold text-lg mb-1\">Location<\/h3>\r\n <p class=\"opacity-90\" id=\"project-4-location\">Chakan, Pune, Maharashtra<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"info-item\"><span class=\"text-2xl\">\ud83d\udccb<\/span>\r\n <div>\r\n <h3 class=\"font-semibold text-lg mb-1\">Description<\/h3>\r\n <p class=\"opacity-90\" id=\"project-4-description\">Multi-client logistics park featuring Grade-A warehouses, truck terminals, and cold storage facilities.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"info-item\"><span class=\"text-2xl\">\u23f1\ufe0f<\/span>\r\n <div>\r\n <h3 class=\"font-semibold text-lg mb-1\">Timeline<\/h3>\r\n <p class=\"opacity-90\">30 months \u2022 92% Complete<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n <section class=\"project-section mb-24\">\r\n <h2 class=\"text-4xl font-bold mb-8\" id=\"project-5-title\">Riverfront Sewage Treatment Plant<\/h2>\r\n <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-8 items-center\">\r\n <div class=\"carousel-container\" style=\"height: 400px;\" data-carousel=\"5\">\r\n <div class=\"carousel-track\" data-track=\"5\">\r\n <div class=\"carousel-slide\">\r\n \r\n <img decoding=\"async\" src=\"\/rrbui\/op\/i13.png\">\r\n <\/div>\r\n <div class=\"carousel-slide\">\r\n \r\n <img decoding=\"async\" src=\"\/rrbui\/op\/i14.png\">\r\n <\/div>\r\n <div class=\"carousel-slide\">\r\n \r\n <img decoding=\"async\" src=\"\/rrbui\/op\/i15.png\">\r\n <\/div>\r\n <\/div>\r\n <div class=\"carousel-dots\" data-dots=\"5\"><\/div>\r\n <\/div>\r\n <div class=\"space-y-6\">\r\n <div class=\"status-badge\" id=\"status-5\"><span>\ud83c\udfd7\ufe0f<\/span> <span>In Progress<\/span>\r\n <\/div>\r\n <div class=\"info-item\"><span class=\"text-2xl\">\ud83d\udccd<\/span>\r\n <div>\r\n <h3 class=\"font-semibold text-lg mb-1\">Location<\/h3>\r\n <p class=\"opacity-90\" id=\"project-5-location\">Varanasi, Uttar Pradesh<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"info-item\"><span class=\"text-2xl\">\ud83d\udccb<\/span>\r\n <div>\r\n <h3 class=\"font-semibold text-lg mb-1\">Description<\/h3>\r\n <p class=\"opacity-90\" id=\"project-5-description\">Design and construction of a modern sewage treatment plant to improve river water quality and urban sanitation.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"info-item\"><span class=\"text-2xl\">\u23f1\ufe0f<\/span>\r\n <div>\r\n <h3 class=\"font-semibold text-lg mb-1\">Timeline<\/h3>\r\n <p class=\"opacity-90\">22 months \u2022 80% Complete<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n <section class=\"project-section mb-24\">\r\n <h2 class=\"text-4xl font-bold mb-8\" id=\"project-6-title\">Zenith IT & Business Park<\/h2>\r\n <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-8 items-center\">\r\n <div class=\"carousel-container\" style=\"height: 400px;\" data-carousel=\"6\">\r\n <div class=\"carousel-track\" data-track=\"6\">\r\n <div class=\"carousel-slide\">\r\n \r\n <img decoding=\"async\" src=\"\/rrbui\/op\/i16.png\">\r\n <\/div>\r\n <div class=\"carousel-slide\">\r\n \r\n <img decoding=\"async\" src=\"\/rrbui\/op\/i17.png\">\r\n <\/div>\r\n <div class=\"carousel-slide\">\r\n \r\n <img decoding=\"async\" src=\"\/rrbui\/op\/i18.png\">\r\n <\/div>\r\n <\/div>\r\n <div class=\"carousel-dots\" data-dots=\"6\"><\/div>\r\n <\/div>\r\n <div class=\"space-y-6\">\r\n <div class=\"status-badge\" id=\"status-6\"><span>\ud83c\udfd7\ufe0f<\/span> <span>In Progress<\/span>\r\n <\/div>\r\n <div class=\"info-item\"><span class=\"text-2xl\">\ud83d\udccd<\/span>\r\n <div>\r\n <h3 class=\"font-semibold text-lg mb-1\">Location<\/h3>\r\n <p class=\"opacity-90\" id=\"project-6-location\">Gachibowli, Hyderabad, Telangana<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"info-item\"><span class=\"text-2xl\">\ud83d\udccb<\/span>\r\n <div>\r\n <h3 class=\"font-semibold text-lg mb-1\">Description<\/h3>\r\n <p class=\"opacity-90\" id=\"project-6-description\">IT campus with two office towers, data-ready infrastructure, green-certified design, and parking plazas.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"info-item\"><span class=\"text-2xl\">\u23f1\ufe0f<\/span>\r\n <div>\r\n <h3 class=\"font-semibold text-lg mb-1\">Timeline<\/h3>\r\n <p class=\"opacity-90\">43 months \u2022 52% Complete<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n <\/main>\r\n <footer class=\"text-center py-8 px-6\" id=\"footer-section\">\r\n <p class=\"opacity-80\">\u00a9 2024 BuildPro Construction. Excellence in Every Project.<\/p>\r\n <\/footer>\r\n <\/div>\r\n <script>\r\n const defaultConfig = {\r\n background_color: \"#0f172a\",\r\n surface_color: \"#1e293b\",\r\n text_color: \"#f1f5f9\",\r\n primary_action_color: \"#f59e42\",\r\n font_family: \"system-ui\",\r\n font_size: 16,\r\n company_name: \"BuildPro Construction\",\r\n tagline: \"Building Excellence Across America\",\r\n project_1_title: \"Skyline Tower\",\r\n project_1_location: \"New York, NY\",\r\n project_1_description: \"A state-of-the-art 52-story commercial complex featuring sustainable design, modern amenities, and panoramic city views. Expected completion in Q4 2025.\",\r\n project_2_title: \"Harbor Bridge\",\r\n project_2_location: \"San Francisco, CA\",\r\n project_2_description: \"Modern suspension bridge spanning 2.5 miles across the bay, incorporating earthquake-resistant technology and LED lighting systems for enhanced safety.\",\r\n project_3_title: \"Metro Station Complex\",\r\n project_3_location: \"Chicago, IL\",\r\n project_3_description: \"Underground transit hub connecting three major subway lines with retail spaces, modern waiting areas, and advanced passenger flow management systems.\",\r\n project_4_title: \"Riverside Plaza\",\r\n project_4_location: \"Austin, TX\",\r\n project_4_description: \"Mixed-use development featuring retail spaces, office suites, and luxury apartments with waterfront views and green spaces along the riverside promenade.\",\r\n project_5_title: \"Innovation Center\",\r\n project_5_location: \"Seattle, WA\",\r\n project_5_description: \"Tech campus headquarters with collaborative workspaces, research labs, cafeteria, fitness center, and sustainable energy systems achieving LEED Platinum certification.\",\r\n project_6_title: \"Gateway Plaza\",\r\n project_6_location: \"Miami, FL\",\r\n project_6_description: \"Luxury residential tower with 48 floors offering premium penthouses, infinity pools, spa facilities, concierge services, and ocean views from every unit.\"\r\n };\r\n\r\n \/\/ Carousel functionality\r\n class Carousel {\r\n constructor(carouselId) {\r\n this.carouselId = carouselId;\r\n this.track = document.querySelector(`[data-track=\"${carouselId}\"]`);\r\n this.dotsContainer = document.querySelector(`[data-dots=\"${carouselId}\"]`);\r\n this.slides = this.track.querySelectorAll('.carousel-slide');\r\n this.currentIndex = 0;\r\n this.autoPlayInterval = null;\r\n \r\n this.init();\r\n }\r\n \r\n init() {\r\n this.createDots();\r\n this.startAutoPlay();\r\n \r\n \/\/ Pause on hover\r\n const container = document.querySelector(`[data-carousel=\"${this.carouselId}\"]`);\r\n container.addEventListener('mouseenter', () => this.stopAutoPlay());\r\n container.addEventListener('mouseleave', () => this.startAutoPlay());\r\n }\r\n \r\n createDots() {\r\n this.slides.forEach((_, index) => {\r\n const dot = document.createElement('div');\r\n dot.classList.add('carousel-dot');\r\n if (index === 0) dot.classList.add('active');\r\n dot.addEventListener('click', () => this.goToSlide(index));\r\n this.dotsContainer.appendChild(dot);\r\n });\r\n }\r\n \r\n goToSlide(index) {\r\n this.currentIndex = index;\r\n const offset = -index * 100;\r\n this.track.style.transform = `translateX(${offset}%)`;\r\n \r\n \/\/ Update dots\r\n const dots = this.dotsContainer.querySelectorAll('.carousel-dot');\r\n dots.forEach((dot, i) => {\r\n dot.classList.toggle('active', i === index);\r\n });\r\n }\r\n \r\n nextSlide() {\r\n const nextIndex = (this.currentIndex + 1) % this.slides.length;\r\n this.goToSlide(nextIndex);\r\n }\r\n \r\n startAutoPlay() {\r\n this.autoPlayInterval = setInterval(() => this.nextSlide(), 3000);\r\n }\r\n \r\n stopAutoPlay() {\r\n if (this.autoPlayInterval) {\r\n clearInterval(this.autoPlayInterval);\r\n this.autoPlayInterval = null;\r\n }\r\n }\r\n }\r\n\r\n \/\/ Initialize all carousels\r\n const carousels = [];\r\n for (let i = 1; i <= 6; i++) {\r\n carousels.push(new Carousel(i));\r\n }\r\n\r\n async function onConfigChange(config) {\r\n const fontFamily = config.font_family || defaultConfig.font_family;\r\n const fontSize = config.font_size || defaultConfig.font_size;\r\n const baseFontStack = 'system-ui, -apple-system, sans-serif';\r\n \r\n \/\/ Apply colors\r\n document.getElementById('main-wrapper').style.backgroundColor = config.background_color || defaultConfig.background_color;\r\n document.getElementById('header-section').style.backgroundColor = config.surface_color || defaultConfig.surface_color;\r\n document.getElementById('header-section').style.color = config.text_color || defaultConfig.text_color;\r\n document.getElementById('footer-section').style.backgroundColor = config.surface_color || defaultConfig.surface_color;\r\n document.getElementById('footer-section').style.color = config.text_color || defaultConfig.text_color;\r\n \r\n document.querySelectorAll('.project-section h2').forEach(title => {\r\n title.style.color = config.text_color || defaultConfig.text_color;\r\n });\r\n \r\n document.querySelectorAll('.project-section').forEach(section => {\r\n section.style.color = config.text_color || defaultConfig.text_color;\r\n });\r\n \r\n document.querySelectorAll('.status-badge').forEach(badge => {\r\n badge.style.backgroundColor = config.primary_action_color || defaultConfig.primary_action_color;\r\n badge.style.color = config.surface_color || defaultConfig.surface_color;\r\n });\r\n \r\n document.querySelectorAll('.carousel-dot').forEach(dot => {\r\n dot.style.backgroundColor = config.text_color || defaultConfig.text_color;\r\n });\r\n \r\n document.querySelectorAll('.info-item').forEach(item => {\r\n item.style.borderColor = `${config.text_color || defaultConfig.text_color}33`;\r\n });\r\n \r\n \/\/ Apply fonts\r\n document.getElementById('company-name').style.fontFamily = `${fontFamily}, ${baseFontStack}`;\r\n document.getElementById('company-name').style.fontSize = `${fontSize * 3}px`;\r\n \r\n document.getElementById('tagline').style.fontFamily = `${fontFamily}, ${baseFontStack}`;\r\n document.getElementById('tagline').style.fontSize = `${fontSize * 1.5}px`;\r\n \r\n document.querySelectorAll('.project-section h2').forEach(title => {\r\n title.style.fontFamily = `${fontFamily}, ${baseFontStack}`;\r\n title.style.fontSize = `${fontSize * 2}px`;\r\n });\r\n \r\n document.querySelectorAll('.info-item h3').forEach(heading => {\r\n heading.style.fontFamily = `${fontFamily}, ${baseFontStack}`;\r\n heading.style.fontSize = `${fontSize * 1.125}px`;\r\n });\r\n \r\n document.querySelectorAll('.info-item p').forEach(text => {\r\n text.style.fontFamily = `${fontFamily}, ${baseFontStack}`;\r\n text.style.fontSize = `${fontSize}px`;\r\n });\r\n \r\n document.querySelectorAll('.status-badge').forEach(badge => {\r\n badge.style.fontFamily = `${fontFamily}, ${baseFontStack}`;\r\n badge.style.fontSize = `${fontSize * 0.875}px`;\r\n });\r\n \r\n document.querySelector('footer p').style.fontFamily = `${fontFamily}, ${baseFontStack}`;\r\n document.querySelector('footer p').style.fontSize = `${fontSize}px`;\r\n \r\n \/\/ Apply text content\r\n document.getElementById('company-name').textContent = config.company_name || defaultConfig.company_name;\r\n document.getElementById('tagline').textContent = config.tagline || defaultConfig.tagline;\r\n \r\n document.getElementById('project-1-title').textContent = config.project_1_title || defaultConfig.project_1_title;\r\n document.getElementById('project-1-location').textContent = config.project_1_location || defaultConfig.project_1_location;\r\n document.getElementById('project-1-description').textContent = config.project_1_description || defaultConfig.project_1_description;\r\n \r\n document.getElementById('project-2-title').textContent = config.project_2_title || defaultConfig.project_2_title;\r\n document.getElementById('project-2-location').textContent = config.project_2_location || defaultConfig.project_2_location;\r\n document.getElementById('project-2-description').textContent = config.project_2_description || defaultConfig.project_2_description;\r\n \r\n document.getElementById('project-3-title').textContent = config.project_3_title || defaultConfig.project_3_title;\r\n document.getElementById('project-3-location').textContent = config.project_3_location || defaultConfig.project_3_location;\r\n document.getElementById('project-3-description').textContent = config.project_3_description || defaultConfig.project_3_description;\r\n \r\n document.getElementById('project-4-title').textContent = config.project_4_title || defaultConfig.project_4_title;\r\n document.getElementById('project-4-location').textContent = config.project_4_location || defaultConfig.project_4_location;\r\n document.getElementById('project-4-description').textContent = config.project_4_description || defaultConfig.project_4_description;\r\n \r\n document.getElementById('project-5-title').textContent = config.project_5_title || defaultConfig.project_5_title;\r\n document.getElementById('project-5-location').textContent = config.project_5_location || defaultConfig.project_5_location;\r\n document.getElementById('project-5-description').textContent = config.project_5_description || defaultConfig.project_5_description;\r\n \r\n document.getElementById('project-6-title').textContent = config.project_6_title || defaultConfig.project_6_title;\r\n document.getElementById('project-6-location').textContent = config.project_6_location || defaultConfig.project_6_location;\r\n document.getElementById('project-6-description').textContent = config.project_6_description || defaultConfig.project_6_description;\r\n }\r\n\r\n function mapToCapabilities(config) {\r\n return {\r\n recolorables: [\r\n {\r\n get: () => config.background_color || defaultConfig.background_color,\r\n set: (value) => {\r\n config.background_color = value;\r\n window.elementSdk.setConfig({ background_color: value });\r\n }\r\n },\r\n {\r\n get: () => config.surface_color || defaultConfig.surface_color,\r\n set: (value) => {\r\n config.surface_color = value;\r\n window.elementSdk.setConfig({ surface_color: value });\r\n }\r\n },\r\n {\r\n get: () => config.text_color || defaultConfig.text_color,\r\n set: (value) => {\r\n config.text_color = value;\r\n window.elementSdk.setConfig({ text_color: value });\r\n }\r\n },\r\n {\r\n get: () => config.primary_action_color || defaultConfig.primary_action_color,\r\n set: (value) => {\r\n config.primary_action_color = value;\r\n window.elementSdk.setConfig({ primary_action_color: value });\r\n }\r\n }\r\n ],\r\n borderables: [],\r\n fontEditable: {\r\n get: () => config.font_family || defaultConfig.font_family,\r\n set: (value) => {\r\n config.font_family = value;\r\n window.elementSdk.setConfig({ font_family: value });\r\n }\r\n },\r\n fontSizeable: {\r\n get: () => config.font_size || defaultConfig.font_size,\r\n set: (value) => {\r\n config.font_size = value;\r\n window.elementSdk.setConfig({ font_size: value });\r\n }\r\n }\r\n };\r\n }\r\n\r\n function mapToEditPanelValues(config) {\r\n return new Map([\r\n [\"company_name\", config.company_name || defaultConfig.company_name],\r\n [\"tagline\", config.tagline || defaultConfig.tagline],\r\n [\"project_1_title\", config.project_1_title || defaultConfig.project_1_title],\r\n [\"project_1_location\", config.project_1_location || defaultConfig.project_1_location],\r\n [\"project_1_description\", config.project_1_description || defaultConfig.project_1_description],\r\n [\"project_2_title\", config.project_2_title || defaultConfig.project_2_title],\r\n [\"project_2_location\", config.project_2_location || defaultConfig.project_2_location],\r\n [\"project_2_description\", config.project_2_description || defaultConfig.project_2_description],\r\n [\"project_3_title\", config.project_3_title || defaultConfig.project_3_title],\r\n [\"project_3_location\", config.project_3_location || defaultConfig.project_3_location],\r\n [\"project_3_description\", config.project_3_description || defaultConfig.project_3_description],\r\n [\"project_4_title\", config.project_4_title || defaultConfig.project_4_title],\r\n [\"project_4_location\", config.project_4_location || defaultConfig.project_4_location],\r\n [\"project_4_description\", config.project_4_description || defaultConfig.project_4_description],\r\n [\"project_5_title\", config.project_5_title || defaultConfig.project_5_title],\r\n [\"project_5_location\", config.project_5_location || defaultConfig.project_5_location],\r\n [\"project_5_description\", config.project_5_description || defaultConfig.project_5_description],\r\n [\"project_6_title\", config.project_6_title || defaultConfig.project_6_title],\r\n [\"project_6_location\", config.project_6_location || defaultConfig.project_6_location],\r\n [\"project_6_description\", config.project_6_description || defaultConfig.project_6_description]\r\n ]);\r\n }\r\n\r\n if (window.elementSdk) {\r\n window.elementSdk.init({\r\n defaultConfig,\r\n onConfigChange,\r\n mapToCapabilities,\r\n mapToEditPanelValues\r\n });\r\n }\r\n <\/script>\r\n <script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML=\"window.__CF$cv$params={r:'9b256e52c48e79e0',t:'MTc2NjQ2NzQ0OS4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='\/cdn-cgi\/challenge-platform\/scripts\/jsd\/main.js';document.getElementsByTagName('head')[0].appendChild(a);\";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();<\/script><\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Construction Portfolio Ongoing Projects Building Excellence Across India Sapphire Urban Residences \ud83c\udfd7\ufe0f In Progress \ud83d\udccd Sector 150, Noida Uttar Pradesh \ud83d\udccb Description High-rise residential towers with 2\/3 BHK apartments, landscaped podiums, clubhouse, and EV parking facilities. \u23f1\ufe0f Timeline 36 months \u2022 65% Complete Eastern Coal Handling Facility \ud83c\udfd7\ufe0f In Progress \ud83d\udccd Location Talcher, Odisha \ud83d\udccb […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-3237","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/aryangautam.xyz\/ee\/wp-json\/wp\/v2\/pages\/3237","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/aryangautam.xyz\/ee\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/aryangautam.xyz\/ee\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/aryangautam.xyz\/ee\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/aryangautam.xyz\/ee\/wp-json\/wp\/v2\/comments?post=3237"}],"version-history":[{"count":4,"href":"https:\/\/aryangautam.xyz\/ee\/wp-json\/wp\/v2\/pages\/3237\/revisions"}],"predecessor-version":[{"id":3241,"href":"https:\/\/aryangautam.xyz\/ee\/wp-json\/wp\/v2\/pages\/3237\/revisions\/3241"}],"wp:attachment":[{"href":"https:\/\/aryangautam.xyz\/ee\/wp-json\/wp\/v2\/media?parent=3237"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n \r\n \r\n \r\n Construction Portfolio<\/title>\r\n <script src=\"\/_sdk\/element_sdk.js\"><\/script>\r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <style>\r\n body {\r\n box-sizing: border-box;\r\n }\r\n \r\n @keyframes fadeInUp {\r\n from {\r\n opacity: 0;\r\n transform: translateY(30px);\r\n }\r\n to {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n }\r\n \r\n @keyframes slideIn {\r\n from {\r\n opacity: 0;\r\n transform: translateX(-50px);\r\n }\r\n to {\r\n opacity: 1;\r\n transform: translateX(0);\r\n }\r\n }\r\n \r\n .fade-in-up {\r\n animation: fadeInUp 0.8s ease-out forwards;\r\n }\r\n \r\n .slide-in {\r\n animation: slideIn 0.7s ease-out forwards;\r\n }\r\n \r\n .carousel-container {\r\n position: relative;\r\n width: 100%;\r\n height: 100%;\r\n overflow: hidden;\r\n border-radius: 12px;\r\n }\r\n \r\n .carousel-track {\r\n display: flex;\r\n height: 100%;\r\n transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);\r\n }\r\n \r\n .carousel-slide {\r\n min-width: 100%;\r\n height: 100%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n \r\n .carousel-dots {\r\n position: absolute;\r\n bottom: 20px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n display: flex;\r\n gap: 8px;\r\n z-index: 10;\r\n }\r\n \r\n .carousel-dot {\r\n width: 10px;\r\n height: 10px;\r\n border-radius: 50%;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n opacity: 0.5;\r\n }\r\n \r\n .carousel-dot.active {\r\n opacity: 1;\r\n transform: scale(1.3);\r\n }\r\n \r\n .project-section {\r\n opacity: 0;\r\n animation: fadeInUp 1s ease-out forwards;\r\n }\r\n \r\n .project-section:nth-child(even) {\r\n animation-delay: 0.1s;\r\n }\r\n \r\n .project-section:nth-child(odd) {\r\n animation-delay: 0.2s;\r\n }\r\n \r\n .status-badge {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 6px;\r\n padding: 8px 16px;\r\n border-radius: 20px;\r\n font-weight: 600;\r\n font-size: 0.875rem;\r\n animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\r\n }\r\n \r\n @keyframes pulse {\r\n 0%, 100% {\r\n opacity: 1;\r\n }\r\n 50% {\r\n opacity: 0.8;\r\n }\r\n }\r\n \r\n .info-item {\r\n display: flex;\r\n align-items: start;\r\n gap: 12px;\r\n padding: 12px 0;\r\n border-bottom: 1px solid rgba(255, 255, 255, 0.1);\r\n }\r\n \r\n .info-item:last-child {\r\n border-bottom: none;\r\n }\r\n <\/style>\r\n <style>@view-transition { navigation: auto; }<\/style>\r\n <script src=\"\/_sdk\/data_sdk.js\" type=\"text\/javascript\"><\/script>\r\n <\/head>\r\n <body class=\"h-full m-0\">\r\n <div class=\"w-full h-full overflow-auto\" id=\"main-wrapper\">\r\n <header class=\"py-20 px-6 text-center\" id=\"header-section\">\r\n <div class=\"max-w-4xl mx-auto\">\r\n <h1 class=\"text-5xl md:text-6xl font-bold mb-4 slide-in\" id=\"company-name\">Ongoing Projects<\/h1>\r\n <p class=\"text-xl md:text-2xl opacity-90 fade-in-up\" id=\"tagline\">Building Excellence Across India<\/p>\r\n <\/div>\r\n <\/header>\r\n <main class=\"max-w-7xl mx-auto px-6 py-12\">\r\n <section class=\"project-section mb-24\">\r\n <h2 class=\"text-4xl font-bold mb-8\" id=\"project-1-title\">Sapphire Urban Residences<\/h2>\r\n <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-8 items-center\">\r\n <div class=\"carousel-container\" style=\"height: 400px;\" data-carousel=\"1\">\r\n <div class=\"carousel-track\" data-track=\"1\">\r\n <div class=\"carousel-slide\">\r\n \r\n <img decoding=\"async\" src=\"\/rrbui\/op\/i1.png\">\r\n <\/svg>\r\n \r\n <\/div>\r\n <div class=\"carousel-slide\">\r\n \r\n <img decoding=\"async\" src=\"\/rrbui\/op\/i2.png\">\r\n <\/div>\r\n <div class=\"carousel-slide\">\r\n \r\n <img decoding=\"async\" src=\"\/rrbui\/op\/i3.png\">\r\n <\/div>\r\n <\/div>\r\n <div class=\"carousel-dots\" data-dots=\"1\"><\/div>\r\n <\/div>\r\n <div class=\"space-y-6\">\r\n <div class=\"status-badge\" id=\"status-1\"><span>\ud83c\udfd7\ufe0f<\/span> <span>In Progress<\/span>\r\n <\/div>\r\n <div class=\"info-item\"><span class=\"text-2xl\">\ud83d\udccd<\/span>\r\n <div>\r\n <h3 class=\"font-semibold text-lg mb-1\">Sector 150, Noida<\/h3>\r\n <p class=\"opacity-90\" id=\"project-1-location\">Uttar Pradesh<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"info-item\"><span class=\"text-2xl\">\ud83d\udccb<\/span>\r\n <div>\r\n <h3 class=\"font-semibold text-lg mb-1\">Description<\/h3>\r\n <p class=\"opacity-90\" id=\"project-1-description\">High-rise residential towers with 2\/3 BHK apartments, landscaped podiums, clubhouse, and EV parking facilities.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"info-item\"><span class=\"text-2xl\">\u23f1\ufe0f<\/span>\r\n <div>\r\n <h3 class=\"font-semibold text-lg mb-1\">Timeline<\/h3>\r\n <p class=\"opacity-90\">36 months \u2022 65% Complete<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n <section class=\"project-section mb-24\">\r\n <h2 class=\"text-4xl font-bold mb-8\" id=\"project-2-title\">Eastern Coal Handling Facility<\/h2>\r\n <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-8 items-center\">\r\n <div class=\"carousel-container\" style=\"height: 400px;\" data-carousel=\"2\">\r\n <div class=\"carousel-track\" data-track=\"2\">\r\n <div class=\"carousel-slide\">\r\n \r\n <img decoding=\"async\" src=\"\/rrbui\/op\/i4.png\">\r\n <\/div>\r\n <div class=\"carousel-slide\">\r\n \r\n <img decoding=\"async\" src=\"\/rrbui\/op\/i5.png\">\r\n <\/div>\r\n <div class=\"carousel-slide\">\r\n \r\n <img decoding=\"async\" src=\"\/rrbui\/op\/i6.png\">\r\n <\/div>\r\n <\/div>\r\n <div class=\"carousel-dots\" data-dots=\"2\"><\/div>\r\n <\/div>\r\n <div class=\"space-y-6\">\r\n <div class=\"status-badge\" id=\"status-2\"><span>\ud83c\udfd7\ufe0f<\/span> <span>In Progress<\/span>\r\n <\/div>\r\n <div class=\"info-item\"><span class=\"text-2xl\">\ud83d\udccd<\/span>\r\n <div>\r\n <h3 class=\"font-semibold text-lg mb-1\">Location<\/h3>\r\n <p class=\"opacity-90\" id=\"project-2-location\">Talcher, Odisha<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"info-item\"><span class=\"text-2xl\">\ud83d\udccb<\/span>\r\n <div>\r\n <h3 class=\"font-semibold text-lg mb-1\">Description<\/h3>\r\n <p class=\"opacity-90\" id=\"project-2-description\">Development of coal handling plant including conveyor systems, storage yards, weighbridges, and internal roads.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"info-item\"><span class=\"text-2xl\">\u23f1\ufe0f<\/span>\r\n <div>\r\n <h3 class=\"font-semibold text-lg mb-1\">Timeline<\/h3>\r\n <p class=\"opacity-90\">36 months \u2022 75% Complete<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n <section class=\"project-section mb-24\">\r\n <h2 class=\"text-4xl font-bold mb-8\" id=\"project-3-title\">GreenFuel Bio-Refinery Unit<\/h2>\r\n <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-8 items-center\">\r\n <div class=\"carousel-container\" style=\"height: 400px;\" data-carousel=\"3\">\r\n <div class=\"carousel-track\" data-track=\"3\">\r\n <div class=\"carousel-slide\">\r\n \r\n <img decoding=\"async\" src=\"\/rrbui\/op\/i7.png\">\r\n <\/div>\r\n <div class=\"carousel-slide\">\r\n \r\n <img decoding=\"async\" src=\"\/rrbui\/op\/i8.png\">\r\n <\/div>\r\n <div class=\"carousel-slide\">\r\n \r\n <img decoding=\"async\" src=\"\/rrbui\/op\/i9.png\">\r\n <\/div>\r\n <\/div>\r\n <div class=\"carousel-dots\" data-dots=\"3\"><\/div>\r\n <\/div>\r\n <div class=\"space-y-6\">\r\n <div class=\"status-badge\" id=\"status-3\"><span>\ud83c\udfd7\ufe0f<\/span> <span>In Progress<\/span>\r\n <\/div>\r\n <div class=\"info-item\"><span class=\"text-2xl\">\ud83d\udccd<\/span>\r\n <div>\r\n <h3 class=\"font-semibold text-lg mb-1\">Location<\/h3>\r\n <p class=\"opacity-90\" id=\"project-3-location\">Barmer, Rajasthan<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"info-item\"><span class=\"text-2xl\">\ud83d\udccb<\/span>\r\n <div>\r\n <h3 class=\"font-semibold text-lg mb-1\">Description<\/h3>\r\n <p class=\"opacity-90\" id=\"project-3-description\">Construction of a bio-ethanol refinery unit with storage tanks, process buildings, and safety infrastructure.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"info-item\"><span class=\"text-2xl\">\u23f1\ufe0f<\/span>\r\n <div>\r\n <h3 class=\"font-semibold text-lg mb-1\">Timeline<\/h3>\r\n <p class=\"opacity-90\">38 months \u2022 58% Complete<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n <section class=\"project-section mb-24\">\r\n <h2 class=\"text-4xl font-bold mb-8\" id=\"project-4-title\">Orion Integrated Logistics Park<\/h2>\r\n <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-8 items-center\">\r\n <div class=\"carousel-container\" style=\"height: 400px;\" data-carousel=\"4\">\r\n <div class=\"carousel-track\" data-track=\"4\">\r\n <div class=\"carousel-slide\">\r\n \r\n <img decoding=\"async\" src=\"\/rrbui\/op\/10.png\">\r\n <\/div>\r\n <div class=\"carousel-slide\">\r\n \r\n <img decoding=\"async\" src=\"\/rrbui\/op\/11.png\">\r\n <\/div>\r\n <div class=\"carousel-slide\">\r\n \r\n <img decoding=\"async\" src=\"\/rrbui\/op\/12.png\">\r\n <\/div>\r\n <\/div>\r\n <div class=\"carousel-dots\" data-dots=\"4\"><\/div>\r\n <\/div>\r\n <div class=\"space-y-6\">\r\n <div class=\"status-badge\" id=\"status-4\"><span>\ud83c\udfd7\ufe0f<\/span> <span>In Progress<\/span>\r\n <\/div>\r\n <div class=\"info-item\"><span class=\"text-2xl\">\ud83d\udccd<\/span>\r\n <div>\r\n <h3 class=\"font-semibold text-lg mb-1\">Location<\/h3>\r\n <p class=\"opacity-90\" id=\"project-4-location\">Chakan, Pune, Maharashtra<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"info-item\"><span class=\"text-2xl\">\ud83d\udccb<\/span>\r\n <div>\r\n <h3 class=\"font-semibold text-lg mb-1\">Description<\/h3>\r\n <p class=\"opacity-90\" id=\"project-4-description\">Multi-client logistics park featuring Grade-A warehouses, truck terminals, and cold storage facilities.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"info-item\"><span class=\"text-2xl\">\u23f1\ufe0f<\/span>\r\n <div>\r\n <h3 class=\"font-semibold text-lg mb-1\">Timeline<\/h3>\r\n <p class=\"opacity-90\">30 months \u2022 92% Complete<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n <section class=\"project-section mb-24\">\r\n <h2 class=\"text-4xl font-bold mb-8\" id=\"project-5-title\">Riverfront Sewage Treatment Plant<\/h2>\r\n <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-8 items-center\">\r\n <div class=\"carousel-container\" style=\"height: 400px;\" data-carousel=\"5\">\r\n <div class=\"carousel-track\" data-track=\"5\">\r\n <div class=\"carousel-slide\">\r\n \r\n <img decoding=\"async\" src=\"\/rrbui\/op\/i13.png\">\r\n <\/div>\r\n <div class=\"carousel-slide\">\r\n \r\n <img decoding=\"async\" src=\"\/rrbui\/op\/i14.png\">\r\n <\/div>\r\n <div class=\"carousel-slide\">\r\n \r\n <img decoding=\"async\" src=\"\/rrbui\/op\/i15.png\">\r\n <\/div>\r\n <\/div>\r\n <div class=\"carousel-dots\" data-dots=\"5\"><\/div>\r\n <\/div>\r\n <div class=\"space-y-6\">\r\n <div class=\"status-badge\" id=\"status-5\"><span>\ud83c\udfd7\ufe0f<\/span> <span>In Progress<\/span>\r\n <\/div>\r\n <div class=\"info-item\"><span class=\"text-2xl\">\ud83d\udccd<\/span>\r\n <div>\r\n <h3 class=\"font-semibold text-lg mb-1\">Location<\/h3>\r\n <p class=\"opacity-90\" id=\"project-5-location\">Varanasi, Uttar Pradesh<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"info-item\"><span class=\"text-2xl\">\ud83d\udccb<\/span>\r\n <div>\r\n <h3 class=\"font-semibold text-lg mb-1\">Description<\/h3>\r\n <p class=\"opacity-90\" id=\"project-5-description\">Design and construction of a modern sewage treatment plant to improve river water quality and urban sanitation.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"info-item\"><span class=\"text-2xl\">\u23f1\ufe0f<\/span>\r\n <div>\r\n <h3 class=\"font-semibold text-lg mb-1\">Timeline<\/h3>\r\n <p class=\"opacity-90\">22 months \u2022 80% Complete<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n <section class=\"project-section mb-24\">\r\n <h2 class=\"text-4xl font-bold mb-8\" id=\"project-6-title\">Zenith IT & Business Park<\/h2>\r\n <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-8 items-center\">\r\n <div class=\"carousel-container\" style=\"height: 400px;\" data-carousel=\"6\">\r\n <div class=\"carousel-track\" data-track=\"6\">\r\n <div class=\"carousel-slide\">\r\n \r\n <img decoding=\"async\" src=\"\/rrbui\/op\/i16.png\">\r\n <\/div>\r\n <div class=\"carousel-slide\">\r\n \r\n <img decoding=\"async\" src=\"\/rrbui\/op\/i17.png\">\r\n <\/div>\r\n <div class=\"carousel-slide\">\r\n \r\n <img decoding=\"async\" src=\"\/rrbui\/op\/i18.png\">\r\n <\/div>\r\n <\/div>\r\n <div class=\"carousel-dots\" data-dots=\"6\"><\/div>\r\n <\/div>\r\n <div class=\"space-y-6\">\r\n <div class=\"status-badge\" id=\"status-6\"><span>\ud83c\udfd7\ufe0f<\/span> <span>In Progress<\/span>\r\n <\/div>\r\n <div class=\"info-item\"><span class=\"text-2xl\">\ud83d\udccd<\/span>\r\n <div>\r\n <h3 class=\"font-semibold text-lg mb-1\">Location<\/h3>\r\n <p class=\"opacity-90\" id=\"project-6-location\">Gachibowli, Hyderabad, Telangana<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"info-item\"><span class=\"text-2xl\">\ud83d\udccb<\/span>\r\n <div>\r\n <h3 class=\"font-semibold text-lg mb-1\">Description<\/h3>\r\n <p class=\"opacity-90\" id=\"project-6-description\">IT campus with two office towers, data-ready infrastructure, green-certified design, and parking plazas.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"info-item\"><span class=\"text-2xl\">\u23f1\ufe0f<\/span>\r\n <div>\r\n <h3 class=\"font-semibold text-lg mb-1\">Timeline<\/h3>\r\n <p class=\"opacity-90\">43 months \u2022 52% Complete<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n <\/main>\r\n <footer class=\"text-center py-8 px-6\" id=\"footer-section\">\r\n <p class=\"opacity-80\">\u00a9 2024 BuildPro Construction. Excellence in Every Project.<\/p>\r\n <\/footer>\r\n <\/div>\r\n <script>\r\n const defaultConfig = {\r\n background_color: \"#0f172a\",\r\n surface_color: \"#1e293b\",\r\n text_color: \"#f1f5f9\",\r\n primary_action_color: \"#f59e42\",\r\n font_family: \"system-ui\",\r\n font_size: 16,\r\n company_name: \"BuildPro Construction\",\r\n tagline: \"Building Excellence Across America\",\r\n project_1_title: \"Skyline Tower\",\r\n project_1_location: \"New York, NY\",\r\n project_1_description: \"A state-of-the-art 52-story commercial complex featuring sustainable design, modern amenities, and panoramic city views. Expected completion in Q4 2025.\",\r\n project_2_title: \"Harbor Bridge\",\r\n project_2_location: \"San Francisco, CA\",\r\n project_2_description: \"Modern suspension bridge spanning 2.5 miles across the bay, incorporating earthquake-resistant technology and LED lighting systems for enhanced safety.\",\r\n project_3_title: \"Metro Station Complex\",\r\n project_3_location: \"Chicago, IL\",\r\n project_3_description: \"Underground transit hub connecting three major subway lines with retail spaces, modern waiting areas, and advanced passenger flow management systems.\",\r\n project_4_title: \"Riverside Plaza\",\r\n project_4_location: \"Austin, TX\",\r\n project_4_description: \"Mixed-use development featuring retail spaces, office suites, and luxury apartments with waterfront views and green spaces along the riverside promenade.\",\r\n project_5_title: \"Innovation Center\",\r\n project_5_location: \"Seattle, WA\",\r\n project_5_description: \"Tech campus headquarters with collaborative workspaces, research labs, cafeteria, fitness center, and sustainable energy systems achieving LEED Platinum certification.\",\r\n project_6_title: \"Gateway Plaza\",\r\n project_6_location: \"Miami, FL\",\r\n project_6_description: \"Luxury residential tower with 48 floors offering premium penthouses, infinity pools, spa facilities, concierge services, and ocean views from every unit.\"\r\n };\r\n\r\n \/\/ Carousel functionality\r\n class Carousel {\r\n constructor(carouselId) {\r\n this.carouselId = carouselId;\r\n this.track = document.querySelector(`[data-track=\"${carouselId}\"]`);\r\n this.dotsContainer = document.querySelector(`[data-dots=\"${carouselId}\"]`);\r\n this.slides = this.track.querySelectorAll('.carousel-slide');\r\n this.currentIndex = 0;\r\n this.autoPlayInterval = null;\r\n \r\n this.init();\r\n }\r\n \r\n init() {\r\n this.createDots();\r\n this.startAutoPlay();\r\n \r\n \/\/ Pause on hover\r\n const container = document.querySelector(`[data-carousel=\"${this.carouselId}\"]`);\r\n container.addEventListener('mouseenter', () => this.stopAutoPlay());\r\n container.addEventListener('mouseleave', () => this.startAutoPlay());\r\n }\r\n \r\n createDots() {\r\n this.slides.forEach((_, index) => {\r\n const dot = document.createElement('div');\r\n dot.classList.add('carousel-dot');\r\n if (index === 0) dot.classList.add('active');\r\n dot.addEventListener('click', () => this.goToSlide(index));\r\n this.dotsContainer.appendChild(dot);\r\n });\r\n }\r\n \r\n goToSlide(index) {\r\n this.currentIndex = index;\r\n const offset = -index * 100;\r\n this.track.style.transform = `translateX(${offset}%)`;\r\n \r\n \/\/ Update dots\r\n const dots = this.dotsContainer.querySelectorAll('.carousel-dot');\r\n dots.forEach((dot, i) => {\r\n dot.classList.toggle('active', i === index);\r\n });\r\n }\r\n \r\n nextSlide() {\r\n const nextIndex = (this.currentIndex + 1) % this.slides.length;\r\n this.goToSlide(nextIndex);\r\n }\r\n \r\n startAutoPlay() {\r\n this.autoPlayInterval = setInterval(() => this.nextSlide(), 3000);\r\n }\r\n \r\n stopAutoPlay() {\r\n if (this.autoPlayInterval) {\r\n clearInterval(this.autoPlayInterval);\r\n this.autoPlayInterval = null;\r\n }\r\n }\r\n }\r\n\r\n \/\/ Initialize all carousels\r\n const carousels = [];\r\n for (let i = 1; i <= 6; i++) {\r\n carousels.push(new Carousel(i));\r\n }\r\n\r\n async function onConfigChange(config) {\r\n const fontFamily = config.font_family || defaultConfig.font_family;\r\n const fontSize = config.font_size || defaultConfig.font_size;\r\n const baseFontStack = 'system-ui, -apple-system, sans-serif';\r\n \r\n \/\/ Apply colors\r\n document.getElementById('main-wrapper').style.backgroundColor = config.background_color || defaultConfig.background_color;\r\n document.getElementById('header-section').style.backgroundColor = config.surface_color || defaultConfig.surface_color;\r\n document.getElementById('header-section').style.color = config.text_color || defaultConfig.text_color;\r\n document.getElementById('footer-section').style.backgroundColor = config.surface_color || defaultConfig.surface_color;\r\n document.getElementById('footer-section').style.color = config.text_color || defaultConfig.text_color;\r\n \r\n document.querySelectorAll('.project-section h2').forEach(title => {\r\n title.style.color = config.text_color || defaultConfig.text_color;\r\n });\r\n \r\n document.querySelectorAll('.project-section').forEach(section => {\r\n section.style.color = config.text_color || defaultConfig.text_color;\r\n });\r\n \r\n document.querySelectorAll('.status-badge').forEach(badge => {\r\n badge.style.backgroundColor = config.primary_action_color || defaultConfig.primary_action_color;\r\n badge.style.color = config.surface_color || defaultConfig.surface_color;\r\n });\r\n \r\n document.querySelectorAll('.carousel-dot').forEach(dot => {\r\n dot.style.backgroundColor = config.text_color || defaultConfig.text_color;\r\n });\r\n \r\n document.querySelectorAll('.info-item').forEach(item => {\r\n item.style.borderColor = `${config.text_color || defaultConfig.text_color}33`;\r\n });\r\n \r\n \/\/ Apply fonts\r\n document.getElementById('company-name').style.fontFamily = `${fontFamily}, ${baseFontStack}`;\r\n document.getElementById('company-name').style.fontSize = `${fontSize * 3}px`;\r\n \r\n document.getElementById('tagline').style.fontFamily = `${fontFamily}, ${baseFontStack}`;\r\n document.getElementById('tagline').style.fontSize = `${fontSize * 1.5}px`;\r\n \r\n document.querySelectorAll('.project-section h2').forEach(title => {\r\n title.style.fontFamily = `${fontFamily}, ${baseFontStack}`;\r\n title.style.fontSize = `${fontSize * 2}px`;\r\n });\r\n \r\n document.querySelectorAll('.info-item h3').forEach(heading => {\r\n heading.style.fontFamily = `${fontFamily}, ${baseFontStack}`;\r\n heading.style.fontSize = `${fontSize * 1.125}px`;\r\n });\r\n \r\n document.querySelectorAll('.info-item p').forEach(text => {\r\n text.style.fontFamily = `${fontFamily}, ${baseFontStack}`;\r\n text.style.fontSize = `${fontSize}px`;\r\n });\r\n \r\n document.querySelectorAll('.status-badge').forEach(badge => {\r\n badge.style.fontFamily = `${fontFamily}, ${baseFontStack}`;\r\n badge.style.fontSize = `${fontSize * 0.875}px`;\r\n });\r\n \r\n document.querySelector('footer p').style.fontFamily = `${fontFamily}, ${baseFontStack}`;\r\n document.querySelector('footer p').style.fontSize = `${fontSize}px`;\r\n \r\n \/\/ Apply text content\r\n document.getElementById('company-name').textContent = config.company_name || defaultConfig.company_name;\r\n document.getElementById('tagline').textContent = config.tagline || defaultConfig.tagline;\r\n \r\n document.getElementById('project-1-title').textContent = config.project_1_title || defaultConfig.project_1_title;\r\n document.getElementById('project-1-location').textContent = config.project_1_location || defaultConfig.project_1_location;\r\n document.getElementById('project-1-description').textContent = config.project_1_description || defaultConfig.project_1_description;\r\n \r\n document.getElementById('project-2-title').textContent = config.project_2_title || defaultConfig.project_2_title;\r\n document.getElementById('project-2-location').textContent = config.project_2_location || defaultConfig.project_2_location;\r\n document.getElementById('project-2-description').textContent = config.project_2_description || defaultConfig.project_2_description;\r\n \r\n document.getElementById('project-3-title').textContent = config.project_3_title || defaultConfig.project_3_title;\r\n document.getElementById('project-3-location').textContent = config.project_3_location || defaultConfig.project_3_location;\r\n document.getElementById('project-3-description').textContent = config.project_3_description || defaultConfig.project_3_description;\r\n \r\n document.getElementById('project-4-title').textContent = config.project_4_title || defaultConfig.project_4_title;\r\n document.getElementById('project-4-location').textContent = config.project_4_location || defaultConfig.project_4_location;\r\n document.getElementById('project-4-description').textContent = config.project_4_description || defaultConfig.project_4_description;\r\n \r\n document.getElementById('project-5-title').textContent = config.project_5_title || defaultConfig.project_5_title;\r\n document.getElementById('project-5-location').textContent = config.project_5_location || defaultConfig.project_5_location;\r\n document.getElementById('project-5-description').textContent = config.project_5_description || defaultConfig.project_5_description;\r\n \r\n document.getElementById('project-6-title').textContent = config.project_6_title || defaultConfig.project_6_title;\r\n document.getElementById('project-6-location').textContent = config.project_6_location || defaultConfig.project_6_location;\r\n document.getElementById('project-6-description').textContent = config.project_6_description || defaultConfig.project_6_description;\r\n }\r\n\r\n function mapToCapabilities(config) {\r\n return {\r\n recolorables: [\r\n {\r\n get: () => config.background_color || defaultConfig.background_color,\r\n set: (value) => {\r\n config.background_color = value;\r\n window.elementSdk.setConfig({ background_color: value });\r\n }\r\n },\r\n {\r\n get: () => config.surface_color || defaultConfig.surface_color,\r\n set: (value) => {\r\n config.surface_color = value;\r\n window.elementSdk.setConfig({ surface_color: value });\r\n }\r\n },\r\n {\r\n get: () => config.text_color || defaultConfig.text_color,\r\n set: (value) => {\r\n config.text_color = value;\r\n window.elementSdk.setConfig({ text_color: value });\r\n }\r\n },\r\n {\r\n get: () => config.primary_action_color || defaultConfig.primary_action_color,\r\n set: (value) => {\r\n config.primary_action_color = value;\r\n window.elementSdk.setConfig({ primary_action_color: value });\r\n }\r\n }\r\n ],\r\n borderables: [],\r\n fontEditable: {\r\n get: () => config.font_family || defaultConfig.font_family,\r\n set: (value) => {\r\n config.font_family = value;\r\n window.elementSdk.setConfig({ font_family: value });\r\n }\r\n },\r\n fontSizeable: {\r\n get: () => config.font_size || defaultConfig.font_size,\r\n set: (value) => {\r\n config.font_size = value;\r\n window.elementSdk.setConfig({ font_size: value });\r\n }\r\n }\r\n };\r\n }\r\n\r\n function mapToEditPanelValues(config) {\r\n return new Map([\r\n [\"company_name\", config.company_name || defaultConfig.company_name],\r\n [\"tagline\", config.tagline || defaultConfig.tagline],\r\n [\"project_1_title\", config.project_1_title || defaultConfig.project_1_title],\r\n [\"project_1_location\", config.project_1_location || defaultConfig.project_1_location],\r\n [\"project_1_description\", config.project_1_description || defaultConfig.project_1_description],\r\n [\"project_2_title\", config.project_2_title || defaultConfig.project_2_title],\r\n [\"project_2_location\", config.project_2_location || defaultConfig.project_2_location],\r\n [\"project_2_description\", config.project_2_description || defaultConfig.project_2_description],\r\n [\"project_3_title\", config.project_3_title || defaultConfig.project_3_title],\r\n [\"project_3_location\", config.project_3_location || defaultConfig.project_3_location],\r\n [\"project_3_description\", config.project_3_description || defaultConfig.project_3_description],\r\n [\"project_4_title\", config.project_4_title || defaultConfig.project_4_title],\r\n [\"project_4_location\", config.project_4_location || defaultConfig.project_4_location],\r\n [\"project_4_description\", config.project_4_description || defaultConfig.project_4_description],\r\n [\"project_5_title\", config.project_5_title || defaultConfig.project_5_title],\r\n [\"project_5_location\", config.project_5_location || defaultConfig.project_5_location],\r\n [\"project_5_description\", config.project_5_description || defaultConfig.project_5_description],\r\n [\"project_6_title\", config.project_6_title || defaultConfig.project_6_title],\r\n [\"project_6_location\", config.project_6_location || defaultConfig.project_6_location],\r\n [\"project_6_description\", config.project_6_description || defaultConfig.project_6_description]\r\n ]);\r\n }\r\n\r\n if (window.elementSdk) {\r\n window.elementSdk.init({\r\n defaultConfig,\r\n onConfigChange,\r\n mapToCapabilities,\r\n mapToEditPanelValues\r\n });\r\n }\r\n <\/script>\r\n <script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML=\"window.__CF$cv$params={r:'9b256e52c48e79e0',t:'MTc2NjQ2NzQ0OS4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='\/cdn-cgi\/challenge-platform\/scripts\/jsd\/main.js';document.getElementsByTagName('head')[0].appendChild(a);\";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();<\/script><\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Construction Portfolio Ongoing Projects Building Excellence Across India Sapphire Urban Residences \ud83c\udfd7\ufe0f In Progress \ud83d\udccd Sector 150, Noida Uttar Pradesh \ud83d\udccb Description High-rise residential towers with 2\/3 BHK apartments, landscaped podiums, clubhouse, and EV parking facilities. \u23f1\ufe0f Timeline 36 months \u2022 65% Complete Eastern Coal Handling Facility \ud83c\udfd7\ufe0f In Progress \ud83d\udccd Location Talcher, Odisha \ud83d\udccb […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-3237","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/aryangautam.xyz\/ee\/wp-json\/wp\/v2\/pages\/3237","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/aryangautam.xyz\/ee\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/aryangautam.xyz\/ee\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/aryangautam.xyz\/ee\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/aryangautam.xyz\/ee\/wp-json\/wp\/v2\/comments?post=3237"}],"version-history":[{"count":4,"href":"https:\/\/aryangautam.xyz\/ee\/wp-json\/wp\/v2\/pages\/3237\/revisions"}],"predecessor-version":[{"id":3241,"href":"https:\/\/aryangautam.xyz\/ee\/wp-json\/wp\/v2\/pages\/3237\/revisions\/3241"}],"wp:attachment":[{"href":"https:\/\/aryangautam.xyz\/ee\/wp-json\/wp\/v2\/media?parent=3237"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}