{"id":142,"date":"2026-08-03T16:52:15","date_gmt":"2026-08-03T16:52:15","guid":{"rendered":"https:\/\/demo.austinscollision.com\/?page_id=142"},"modified":"2026-08-04T10:42:52","modified_gmt":"2026-08-04T10:42:52","slug":"gallery","status":"publish","type":"page","link":"https:\/\/demo.austinscollision.com\/?page_id=142","title":{"rendered":"GALLERY"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"142\" class=\"elementor elementor-142\">\n\t\t\t\t<div class=\"elementor-element elementor-element-529f89f2 e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-column-slider-no wpr-equal-height-no e-con e-parent\" data-id=\"529f89f2\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4760f06d elementor-widget__width-initial elementor-widget elementor-widget-html\" data-id=\"4760f06d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- AUTONIX DESIGN SYSTEM & SCOPED STYLES -->\n<style>\n  \/* Font Import *\/\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');\n\n  \/* Autonix Root Tokens *\/\n  :root {\n    --autonix-primary-red: #dc2626;\n    --autonix-red-dark: #b91c1c;\n    --autonix-amber-gold: #fbbf24;\n    --autonix-bg-black: #0a0a0a;\n    --autonix-card-dark: #171717;\n    --autonix-border-dark: #262626;\n    --autonix-text-white: #ffffff;\n    --autonix-text-muted: #d4d4d4;\n    --autonix-font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n  }\n\n  \/* Container Reset & Scoping *\/\n  .autonix-wrapper {\n    font-family: var(--autonix-font-sans) !important;\n    background-color: #ffffff;\n    color: #171717;\n    line-height: 1.5;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    box-sizing: border-box;\n  }\n\n  .autonix-wrapper *, \n  .autonix-wrapper *::before, \n  .autonix-wrapper *::after {\n    box-sizing: border-box;\n  }\n\n  \/* Typography Scales *\/\n  .autonix-wrapper h1 {\n    font-family: var(--autonix-font-sans) !important;\n    font-size: clamp(2.25rem, 5vw, 3.75rem) !important;\n    font-weight: 900 !important;\n    text-transform: uppercase !important;\n    letter-spacing: -0.025em !important;\n    line-height: 1.05 !important;\n    margin: 0;\n  }\n\n  .autonix-wrapper p {\n    font-family: var(--autonix-font-sans) !important;\n    font-size: 1rem !important;\n    font-weight: 600 !important;\n    line-height: 1.625 !important;\n    margin: 0;\n  }\n\n  .autonix-wrapper button,\n  .autonix-wrapper a {\n    font-family: var(--autonix-font-sans) !important;\n    cursor: pointer;\n  }\n<\/style>\n\n<!-- Tailwind CDN (Just-In-Time Runtime) -->\n<script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n\n<!-- HERO HEADER COMPONENT -->\n<div class=\"autonix-wrapper\">\n  <section class=\"relative py-20 sm:py-28 px-4 sm:px-8 bg-neutral-950 text-white overflow-hidden border-b-4 border-red-600 text-center\">\n    <!-- Background Image with Overlay -->\n    <div \n      class=\"absolute inset-0 bg-cover bg-center bg-no-repeat opacity-35 pointer-events-none\"\n      style=\"background-image: url('https:\/\/images.unsplash.com\/photo-1580273916550-e323be2ae537?q=80&w=1200&auto=format&fit=crop');\"\n    ><\/div>\n    <div class=\"absolute inset-0 bg-gradient-to-b from-neutral-950\/80 via-neutral-950\/95 to-neutral-950\/90 pointer-events-none\"><\/div>\n\n    <div class=\"relative z-10 max-w-4xl mx-auto space-y-4 flex flex-col items-center\">\n      <span class=\"bg-amber-400 text-neutral-950 font-black text-[11px] uppercase px-4 py-1.5 rounded tracking-widest inline-block shadow-md\">\n        PROVEN AUSTIN REPAIR CRAFTSMANSHIP\n      <\/span>\n\n      <h1 class=\"text-white\">\n        OUR CRAFTSMANSHIP & <br \/>\n        <span class=\"text-red-600\">REPAIR GALLERY<\/span>\n      <\/h1>\n\n      <p class=\"text-neutral-300 text-base sm:text-lg font-semibold max-w-xl mx-auto leading-relaxed\">\n        Browse our recent collision repairs, hail restorations, and custom body transformations in Austin, TX.\n      <\/p>\n    <\/div>\n  <\/section>\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-125f77e2 e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-column-slider-no wpr-equal-height-no e-con e-parent\" data-id=\"125f77e2\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1b0c125 elementor-widget__width-initial elementor-widget elementor-widget-html\" data-id=\"1b0c125\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- AUTONIX DESIGN SYSTEM & SCOPED STYLES -->\n<style>\n  \/* Font Import *\/\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');\n\n  \/* Autonix Root Tokens *\/\n  :root {\n    --autonix-primary-red: #dc2626;\n    --autonix-red-dark: #b91c1c;\n    --autonix-amber-gold: #fbbf24;\n    --autonix-bg-black: #0a0a0a;\n    --autonix-card-dark: #171717;\n    --autonix-border-dark: #262626;\n    --autonix-text-white: #ffffff;\n    --autonix-text-muted: #d4d4d4;\n    --autonix-font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n  }\n\n  \/* Container Reset & Scoping *\/\n  .autonix-wrapper {\n    font-family: var(--autonix-font-sans) !important;\n    background-color: #f8fafc;\n    color: #171717;\n    line-height: 1.5;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    box-sizing: border-box;\n  }\n\n  .autonix-wrapper *, \n  .autonix-wrapper *::before, \n  .autonix-wrapper *::after {\n    box-sizing: border-box;\n  }\n\n  \/* Typography Scales *\/\n  .autonix-wrapper h3 {\n    font-family: var(--autonix-font-sans) !important;\n    font-size: 1rem !important;\n    font-weight: 900 !important;\n    text-transform: uppercase !important;\n    line-height: 1.25 !important;\n    margin: 0;\n  }\n\n  .autonix-wrapper button {\n    font-family: var(--autonix-font-sans) !important;\n    cursor: pointer;\n  }\n\n  \/* Hide Scrollbar for Horizontal Tab Bar *\/\n  .no-scrollbar::-webkit-scrollbar {\n    display: none;\n  }\n  .no-scrollbar {\n    -ms-overflow-style: none;  \/* IE and Edge *\/\n    scrollbar-width: none;  \/* Firefox *\/\n  }\n<\/style>\n\n<!-- Tailwind CDN (Just-In-Time Runtime) -->\n<script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n\n<!-- GALLERY FILTER & GRID COMPONENT -->\n<div class=\"autonix-wrapper\">\n  <section class=\"py-12 sm:py-20 px-4 sm:px-8 bg-slate-50 border-b-2 border-neutral-200\">\n    <div class=\"max-w-7xl mx-auto space-y-8 sm:space-y-12\">\n      \n      <!-- Horizontal Scrollable Mobile Pill Bar -->\n      <div class=\"w-full overflow-x-auto no-scrollbar py-2 px-4 -mx-4 sm:mx-0\">\n        <div id=\"autonix-gallery-tabs\" class=\"flex items-center sm:justify-center gap-2 min-w-max\"><\/div>\n      <\/div>\n\n      <!-- Gallery Grid -->\n      <div id=\"autonix-gallery-grid\" class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6\"><\/div>\n\n    <\/div>\n  <\/section>\n<\/div>\n\n<!-- JAVASCRIPT CONTROLLER LOGIC -->\n<script>\n  (function() {\n    let activeFilter = 'all';\n\n    \/\/ EDIT YOUR GALLERY IMAGES HERE\n    const galleryItems = [\n      {\n        id: 1,\n        category: 'collision',\n        title: 'Collision Repair Detail',\n        image: 'https:\/\/palmlightmedia.webgrow.space\/wp-content\/uploads\/2026\/08\/gallery-1.jpg',\n      },\n      {\n        id: 2,\n        category: 'paint',\n        title: 'Paint & Refinish Work',\n        image: 'https:\/\/palmlightmedia.webgrow.space\/wp-content\/uploads\/2026\/08\/gallery-2.jpg',\n      },\n      {\n        id: 3,\n        category: 'hail',\n        title: 'Dent & Panel Restoration',\n        image: 'https:\/\/palmlightmedia.webgrow.space\/wp-content\/uploads\/2026\/08\/gallery-3.jpg',\n      },\n      {\n        id: 4,\n        category: 'custom',\n        title: 'Custom Bodywork Finish',\n        image: 'https:\/\/palmlightmedia.webgrow.space\/wp-content\/uploads\/2026\/08\/gallery-4.jpg',\n      },\n      {\n        id: 5,\n        category: 'collision',\n        title: 'Structural Repair Workflow',\n        image: 'https:\/\/palmlightmedia.webgrow.space\/wp-content\/uploads\/2026\/08\/gallery-5.jpg',\n      },\n      {\n        id: 6,\n        category: 'paint',\n        title: 'Surface Prep & Masking',\n        image: 'https:\/\/palmlightmedia.webgrow.space\/wp-content\/uploads\/2026\/08\/gallery-6.jpg',\n      },\n      {\n        id: 7,\n        category: 'collision',\n        title: 'Panel Fitment Check',\n        image: 'https:\/\/palmlightmedia.webgrow.space\/wp-content\/uploads\/2026\/08\/gallery-7.jpg',\n      },\n      {\n        id: 8,\n        category: 'custom',\n        title: 'Shop Floor Craftsmanship',\n        image: 'https:\/\/palmlightmedia.webgrow.space\/wp-content\/uploads\/2026\/08\/gallery-8.jpg',\n      },\n      {\n        id: 9,\n        category: 'paint',\n        title: 'Refinish Quality Control',\n        image: 'https:\/\/palmlightmedia.webgrow.space\/wp-content\/uploads\/2026\/08\/gallery-9.jpg',\n      },\n      {\n        id: 10,\n        category: 'hail',\n        title: 'Body Surface Correction',\n        image: 'https:\/\/palmlightmedia.webgrow.space\/wp-content\/uploads\/2026\/08\/gallery-10.jpg',\n      },\n      {\n        id: 12,\n        category: 'paint',\n        title: 'Paint Booth Ready',\n        image:'https:\/\/palmlightmedia.webgrow.space\/wp-content\/uploads\/2026\/08\/gallery-12.jpg'\n      },\n      {\n        id: 13,\n        category: 'custom',\n        title: 'Detail & Delivery Prep',\n        image: 'https:\/\/palmlightmedia.webgrow.space\/wp-content\/uploads\/2026\/08\/gallery-13.jpg',\n      },\n      {\n        id: 15,\n        category: 'paint',\n        title: 'Paint Finish Inspection',\n        image: 'https:\/\/palmlightmedia.webgrow.space\/wp-content\/uploads\/2026\/08\/gallery-15.jpg',\n      },\n      {\n        id: 17,\n        category: 'custom',\n        title: \"Austin's Collision Craft\",\n        image: 'https:\/\/palmlightmedia.webgrow.space\/wp-content\/uploads\/2026\/08\/gallery-17.jpg',\n      },\n    ];\n\n    const filterTabs = [\n      { id: 'all', label: 'All Projects' },\n      { id: 'collision', label: 'Collision Repair' },\n      { id: 'paint', label: 'Paint & Refinishing' },\n      { id: 'hail', label: 'Hail & PDR' },\n      { id: 'custom', label: 'Custom & Classic' },\n    ];\n\n    window.setAutonixFilter = function(filterId) {\n      activeFilter = filterId;\n      renderTabs();\n      renderGrid();\n    };\n\n    function attachHoverHandlers() {\n      const tabs = document.querySelectorAll('.autonix-tab-btn');\n      tabs.forEach(btn => {\n        btn.addEventListener('mouseenter', function() {\n          this.style.setProperty('color', '#dc2626', 'important');\n          this.style.setProperty('background-color', '#ffffff', 'important');\n          this.style.setProperty('border-color', '#dc2626', 'important');\n        });\n\n        btn.addEventListener('mouseleave', function() {\n          const isActive = this.getAttribute('data-active') === 'true';\n          if (isActive) {\n            this.style.setProperty('color', '#ffffff', 'important');\n            this.style.setProperty('background-color', '#dc2626', 'important');\n            this.style.setProperty('border-color', 'transparent', 'important');\n          } else {\n            this.style.setProperty('color', '#0a0a0a', 'important');\n            this.style.setProperty('background-color', '#ffffff', 'important');\n            this.style.setProperty('border-color', '#e5e5e5', 'important');\n          }\n        });\n      });\n    }\n\n    function renderTabs() {\n      const container = document.getElementById('autonix-gallery-tabs');\n      if (!container) return;\n\n      container.innerHTML = filterTabs.map(tab => {\n        const isActive = activeFilter === tab.id;\n        const activeClasses = 'bg-red-600 text-white shadow-md shadow-red-600\/30';\n        const inactiveClasses = 'bg-white text-neutral-950 border-2 border-neutral-200';\n\n        return `\n          <button\n            onclick=\"setAutonixFilter('${tab.id}')\"\n            data-active=\"${isActive}\"\n            class=\"autonix-tab-btn px-5 py-2.5 rounded-xl text-xs font-black uppercase tracking-wider whitespace-nowrap transition-all ${isActive ? activeClasses : inactiveClasses}\"\n          >\n            ${tab.label}\n          <\/button>\n        `;\n      }).join('');\n\n      attachHoverHandlers();\n    }\n\n    function renderGrid() {\n      const grid = document.getElementById('autonix-gallery-grid');\n      if (!grid) return;\n\n      const filtered = activeFilter === 'all'\n        ? galleryItems\n        : galleryItems.filter(item => item.category === activeFilter);\n\n      grid.innerHTML = filtered.map(item => `\n        <div class=\"group bg-white rounded-2xl overflow-hidden border-2 border-neutral-200 hover:border-red-600 shadow-md hover:shadow-xl transition-all duration-300 cursor-pointer\">\n          <div class=\"relative overflow-hidden bg-neutral-100 aspect-video sm:aspect-[4\/3]\">\n            <img decoding=\"async\"\n              src=\"${item.image}\"\n              alt=\"${item.title}\"\n              class=\"w-full h-full object-cover group-hover:scale-105 transition-transform duration-500\"\n            \/>\n            <div class=\"absolute inset-0 bg-neutral-950\/20 group-hover:bg-neutral-950\/40 transition-colors duration-300\"><\/div>\n            <span class=\"absolute top-3 left-3 bg-red-600 text-white text-[10px] font-black px-3 py-1 rounded-md uppercase tracking-wider shadow-md\">\n              ${item.category}\n            <\/span>\n          <\/div>\n          <div class=\"p-4 space-y-1\">\n            <h3 class=\"text-neutral-950\">\n              ${item.title}\n            <\/h3>\n          <\/div>\n        <\/div>\n      `).join('');\n    }\n\n    \/\/ Initialize layout on DOM load or immediate injection\n    if (document.readyState === 'loading') {\n      document.addEventListener('DOMContentLoaded', () => {\n        renderTabs();\n        renderGrid();\n      });\n    } else {\n      renderTabs();\n      renderGrid();\n    }\n  })();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-71a9ee41 e-con-full e-flex wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-column-slider-no wpr-equal-height-no e-con e-parent\" data-id=\"71a9ee41\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b6bb78b elementor-widget__width-initial elementor-widget elementor-widget-html\" data-id=\"b6bb78b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- AUTONIX DESIGN SYSTEM & SCOPED STYLES -->\n<style>\n  \/* Font Import *\/\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');\n\n  \/* Autonix Root Tokens *\/\n  :root {\n    --autonix-primary-red: #dc2626;\n    --autonix-red-dark: #b91c1c;\n    --autonix-amber-gold: #fbbf24;\n    --autonix-bg-black: #0a0a0a;\n    --autonix-font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n  }\n\n  \/* Container Reset & Scoping *\/\n  .autonix-wrapper {\n    font-family: var(--autonix-font-sans) !important;\n    background-color: #0a0a0a;\n    color: #ffffff;\n    line-height: 1.5;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n    box-sizing: border-box;\n  }\n\n  .autonix-wrapper *, \n  .autonix-wrapper *::before, \n  .autonix-wrapper *::after {\n    box-sizing: border-box;\n  }\n\n  \/* Typography Scales *\/\n  .autonix-wrapper h2 {\n    font-family: var(--autonix-font-sans) !important;\n    font-size: clamp(1.875rem, 4vw, 3rem) !important;\n    font-weight: 900 !important;\n    text-transform: uppercase !important;\n    letter-spacing: -0.02em !important;\n    line-height: 1.05 !important;\n    margin: 0;\n  }\n\n  .autonix-wrapper p {\n    font-family: var(--autonix-font-sans) !important;\n    font-size: 1rem !important;\n    font-weight: 600 !important;\n    line-height: 1.625 !important;\n    margin: 0;\n  }\n\n  .autonix-wrapper button,\n  .autonix-wrapper a {\n    font-family: var(--autonix-font-sans) !important;\n    cursor: pointer;\n    text-decoration: none;\n  }\n<\/style>\n\n<!-- Tailwind CDN (Just-In-Time Runtime) -->\n<script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n\n<!-- BOTTOM CTA SECTION COMPONENT -->\n<div class=\"autonix-wrapper\">\n  <section class=\"py-20 px-4 sm:px-8 bg-neutral-950 text-white text-center border-b-4 border-red-600\">\n    <div class=\"max-w-4xl mx-auto space-y-6 flex flex-col items-center\">\n      <span class=\"bg-amber-400 text-neutral-950 font-black text-[11px] uppercase px-4 py-1.5 rounded tracking-widest inline-block shadow-md\">\n        LOCAL AUSTIN REPAIR SHOP\n      <\/span>\n\n      <h2 class=\"text-white\">\n        READY TO RESTORE YOUR VEHICLE?\n      <\/h2>\n\n      <p class=\"text-neutral-300 text-base font-semibold max-w-xl mx-auto\">\n        Get a free, transparent estimate or book an appointment at our Austin shop today.\n      <\/p>\n\n      <div class=\"flex flex-col sm:flex-row justify-center items-center gap-4 pt-2 w-full sm:w-auto\">\n        <button\n          onclick=\"handleEstimate()\"\n          class=\"w-full sm:w-auto px-8 py-4 bg-red-600 hover:bg-red-700 active:bg-red-800 text-white font-black text-xs sm:text-sm uppercase tracking-wider rounded-xl transition-all shadow-xl shadow-red-600\/30\"\n        >\n          REQUEST FREE ESTIMATE\n        <\/button>\n        <a\n          href=\"tel:5123851930\"\n          class=\"w-full sm:w-auto px-8 py-4 bg-white hover:bg-neutral-100 text-neutral-950 font-black text-xs sm:text-sm uppercase tracking-wider rounded-xl transition-all inline-block text-center\"\n        >\n          CALL (512) 385-1930\n        <\/a>\n      <\/div>\n    <\/div>\n  <\/section>\n<\/div>\n\n<!-- JAVASCRIPT LOGIC -->\n<script>\n  window.handleEstimate = window.handleEstimate || function() {\n    alert('Open Free Estimate Modal');\n  };\n<\/script>\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>PROVEN AUSTIN REPAIR CRAFTSMANSHIP OUR CRAFTSMANSHIP &#038; REPAIR GALLERY Browse our recent collision repairs, hail restorations, and custom body transformations in Austin, TX. LOCAL AUSTIN REPAIR SHOP READY TO RESTORE YOUR VEHICLE? Get a free, transparent estimate or book an appointment at our Austin shop today. REQUEST FREE ESTIMATE CALL (512) 385-1930<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-142","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/demo.austinscollision.com\/index.php?rest_route=\/wp\/v2\/pages\/142","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/demo.austinscollision.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/demo.austinscollision.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/demo.austinscollision.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/demo.austinscollision.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=142"}],"version-history":[{"count":13,"href":"https:\/\/demo.austinscollision.com\/index.php?rest_route=\/wp\/v2\/pages\/142\/revisions"}],"predecessor-version":[{"id":228,"href":"https:\/\/demo.austinscollision.com\/index.php?rest_route=\/wp\/v2\/pages\/142\/revisions\/228"}],"wp:attachment":[{"href":"https:\/\/demo.austinscollision.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=142"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}