-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
33 lines (33 loc) · 86.3 KB
/
index.html
File metadata and controls
33 lines (33 loc) · 86.3 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html><html lang="en" class="scroll-smooth transition-colors duration-500"> <head><meta charset="UTF-8"><meta name="description" content="Leading industrial fabrication and supply solutions provider in Hosur, Tamil Nadu. Precision manufacturing, quality materials, and expert service."><meta name="viewport" content="width=device-width"><meta name="keywords" content="industrial fabrication, material supply, hardware solutions, manufacturing, Hosur"><meta name="author" content="KrrishCo"><!-- SEO Tags --><link rel="canonical" href="https://alt-del-code.github.io/"><meta name="robots" content="index, follow"><!-- OpenGraph Tags --><meta property="og:type" content="website"><meta property="og:title" content="Industrial Excellence"><meta property="og:description" content="Leading industrial fabrication and supply solutions provider in Hosur, Tamil Nadu. Precision manufacturing, quality materials, and expert service."><meta property="og:image" content="https://alt-del-code.github.io/og-default.jpg"><meta property="og:url" content="https://alt-del-code.github.io/"><meta property="og:site_name" content="KrrishCo"><meta property="og:locale" content="en_IN"><!-- Twitter Card Tags --><meta name="twitter:card" content="summary_large_image"><meta name="twitter:title" content="Industrial Excellence"><meta name="twitter:description" content="Leading industrial fabrication and supply solutions provider in Hosur, Tamil Nadu. Precision manufacturing, quality materials, and expert service."><meta name="twitter:image" content="https://alt-del-code.github.io/og-default.jpg"><!-- Schema.org JSON-LD --><script type="application/ld+json">{"@context":"https://schema.org","@type":"WebPage","headline":"Industrial Excellence","description":"Leading industrial fabrication and supply solutions provider in Hosur, Tamil Nadu. Precision manufacturing, quality materials, and expert service.","image":"https://alt-del-code.github.io/og-default.jpg","url":"https://alt-del-code.github.io/","dateModified":"2024-12-06T08:08:41.478Z","author":{"@type":"Organization","name":"KrrishCo"},"publisher":{"@type":"Organization","name":"KrrishCo","logo":{"@type":"ImageObject","url":"https://alt-del-code.github.io/logo.svg"}},"keywords":"industrial fabrication, material supply, hardware solutions, manufacturing, Hosur"}</script><link rel="icon" type="image/svg+xml" href="/favicon.svg"><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"><link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"><link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"><link rel="manifest" href="/site.webmanifest"><meta name="generator" content="Astro v5.0.3"><title>Industrial Excellence | KrrishCo - Industrial Excellence</title><meta name="astro-view-transitions-enabled" content="true"><meta name="astro-view-transitions-fallback" content="animate"><script type="module" src="/_assets/ClientRouter.astro_astro_type_script_index_0_lang.BScVxmeO.js"></script><link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css"><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet"><link rel="stylesheet" href="/_assets/about.XcI6IZ8m.css">
<style>@keyframes fade-in{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.animate-slide-up[data-astro-cid-bbe6dxrz]{animation:slide-up .8s ease-out forwards;opacity:0}@keyframes slide-up{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.group[data-astro-cid-bbe6dxrz]:hover .counter-animate[data-astro-cid-bbe6dxrz]{animation:pulse .6s ease-in-out}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}.transition-all[data-astro-cid-bbe6dxrz]{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.3s}.bg-grid-pattern[data-astro-cid-a4nqrquw]{background-image:linear-gradient(to right,rgba(0,0,0,.1) 1px,transparent 1px),linear-gradient(to bottom,rgba(0,0,0,.1) 1px,transparent 1px);background-size:40px 40px}@keyframes spin-slow{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes spin-slow-reverse{0%{transform:rotate(360deg)}to{transform:rotate(0)}}.animate-spin-slow[data-astro-cid-a4nqrquw]{animation:spin-slow 20s linear infinite}.animate-spin-slow-reverse[data-astro-cid-a4nqrquw]{animation:spin-slow-reverse 25s linear infinite}.bg-grid-pattern[data-astro-cid-trrswgjs]{background-image:linear-gradient(to right,rgba(0,0,0,.1) 1px,transparent 1px),linear-gradient(to bottom,rgba(0,0,0,.1) 1px,transparent 1px);background-size:40px 40px}@keyframes scale-x-100{0%{transform:scaleX(0)}to{transform:scaleX(1)}}[data-astro-cid-trrswgjs][data-aos=scale-x-100]{transform-origin:left;transition-property:transform;transition-duration:1s}@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-10px)}to{transform:translateY(0)}}.floating[data-astro-cid-nmcm7ml6]{animation:float 6s ease-in-out infinite}
[data-astro-image]{width:100%;height:auto;-o-object-fit:var(--fit);object-fit:var(--fit);-o-object-position:var(--pos);object-position:var(--pos);aspect-ratio:var(--w) / var(--h)}[data-astro-image=responsive]{max-width:calc(var(--w) * 1px);max-height:calc(var(--h) * 1px)}[data-astro-image=fixed]{width:calc(var(--w) * 1px);height:calc(var(--h) * 1px)}
</style><script>!(function(w,p,f,c){if(!window.crossOriginIsolated && !navigator.serviceWorker) return;c=w[p]=Object.assign(w[p]||{},{"lib":"/~partytown/","debug":false});c[f]=(c[f]||[])})(window,'partytown','forward');/* Partytown 0.10.2 - MIT builder.io */
const t={preserveBehavior:!1},e=e=>{if("string"==typeof e)return[e,t];const[n,r=t]=e;return[n,{...t,...r}]},n=Object.freeze((t=>{const e=new Set;let n=[];do{Object.getOwnPropertyNames(n).forEach((t=>{"function"==typeof n[t]&&e.add(t)}))}while((n=Object.getPrototypeOf(n))!==Object.prototype);return Array.from(e)})());!function(t,r,o,i,a,s,c,d,l,p,u=t,f){function h(){f||(f=1,"/"==(c=(s.lib||"/~partytown/")+(s.debug?"debug/":""))[0]&&(l=r.querySelectorAll('script[type="text/partytown"]'),i!=t?i.dispatchEvent(new CustomEvent("pt1",{detail:t})):(d=setTimeout(v,1e4),r.addEventListener("pt0",w),a?y(1):o.serviceWorker?o.serviceWorker.register(c+(s.swPath||"partytown-sw.js"),{scope:c}).then((function(t){t.active?y():t.installing&&t.installing.addEventListener("statechange",(function(t){"activated"==t.target.state&&y()}))}),console.error):v())))}function y(e){p=r.createElement(e?"script":"iframe"),t._pttab=Date.now(),e||(p.style.display="block",p.style.width="0",p.style.height="0",p.style.border="0",p.style.visibility="hidden",p.setAttribute("aria-hidden",!0)),p.src=c+"partytown-"+(e?"atomics.js?v=0.10.2":"sandbox-sw.html?"+t._pttab),r.querySelector(s.sandboxParent||"body").appendChild(p)}function v(n,o){for(w(),i==t&&(s.forward||[]).map((function(n){const[r]=e(n);delete t[r.split(".")[0]]})),n=0;n<l.length;n++)(o=r.createElement("script")).innerHTML=l[n].innerHTML,o.nonce=s.nonce,r.head.appendChild(o);p&&p.parentNode.removeChild(p)}function w(){clearTimeout(d)}s=t.partytown||{},i==t&&(s.forward||[]).map((function(r){const[o,{preserveBehavior:i}]=e(r);u=t,o.split(".").map((function(e,r,o){var a;u=u[o[r]]=r+1<o.length?u[o[r]]||(a=o[r+1],n.includes(a)?[]:{}):(()=>{let e=null;if(i){const{methodOrProperty:n,thisObject:r}=((t,e)=>{let n=t;for(let t=0;t<e.length-1;t+=1)n=n[e[t]];return{thisObject:n,methodOrProperty:e.length>0?n[e[e.length-1]]:void 0}})(t,o);"function"==typeof n&&(e=(...t)=>n.apply(r,...t))}return function(){let n;return e&&(n=e(arguments)),(t._ptf=t._ptf||[]).push(o,arguments),n}})()}))})),"complete"==r.readyState?h():(t.addEventListener("DOMContentLoaded",h),t.addEventListener("load",h))}(window,document,navigator,top,window.crossOriginIsolated);;(e=>{e.addEventListener("astro:before-swap",e=>{let r=document.body.querySelector("iframe[src*='/~partytown/']");if(r)e.newDocument.body.append(r)})})(document);</script></head> <body class="bg-white dark:bg-dark-bg text-accent-steel-600 dark:text-dark-text"> <nav class="sticky top-0 w-full z-50 transition-all duration-500 px-4 py-2" id="main-nav" data-astro-cid-5blmo7yk> <div class="max-w-7xl mx-auto" data-astro-cid-5blmo7yk> <div class="bg-white/40 dark:bg-dark-surface/30 backdrop-blur-xl shadow-lg rounded-2xl border border-gray-200/20 dark:border-white/5" data-astro-cid-5blmo7yk> <div class="container mx-auto px-6" data-astro-cid-5blmo7yk> <div class="flex items-center justify-between h-16" data-astro-cid-5blmo7yk> <!-- Logo --> <div class="flex-shrink-0" data-astro-cid-5blmo7yk> <a href="/" class="flex items-center gap-3 group" data-astro-cid-5blmo7yk> <img src="/_assets/logo.DVqoDEiz_5cQVT.svg" alt="KrrishCo Logo" data-astro-cid-5blmo7yk="true" width="40" height="40" loading="lazy" decoding="async" class="transition-transform duration-300 group-hover:scale-105"> <div class="flex flex-col" data-astro-cid-5blmo7yk> <span class="text-lg font-bold leading-tight text-primary-800 dark:text-dark-text-primary group-hover:text-primary-700 dark:group-hover:text-primary-500" data-astro-cid-5blmo7yk> KrrishCo </span> <span class="text-xs text-accent-steel-600 dark:text-dark-text-secondary" data-astro-cid-5blmo7yk> Industrial Excellence </span> </div> </a> </div> <!-- Desktop Menu --> <div class="hidden md:block" data-astro-cid-5blmo7yk> <div class="flex items-center gap-2" data-astro-cid-5blmo7yk> <a href="/" class="px-4 py-2 text-sm font-medium transition-all duration-300 relative hover:text-primary-700 dark:hover:text-primary-400 group text-primary-800 dark:text-primary-400" data-astro-cid-5blmo7yk> Home <span class="absolute bottom-0 left-0 w-full h-0.5 bg-primary-600 dark:bg-primary-400 transform origin-left transition-transform duration-300 scale-x-100" data-astro-cid-5blmo7yk></span> </a><a href="/about" class="px-4 py-2 text-sm font-medium transition-all duration-300 relative hover:text-primary-700 dark:hover:text-primary-400 group text-accent-steel-600 dark:text-dark-text-secondary" data-astro-cid-5blmo7yk> About <span class="absolute bottom-0 left-0 w-full h-0.5 bg-primary-600 dark:bg-primary-400 transform origin-left transition-transform duration-300 scale-x-0 group-hover:scale-x-100" data-astro-cid-5blmo7yk></span> </a><a href="/portfolio" class="px-4 py-2 text-sm font-medium transition-all duration-300 relative hover:text-primary-700 dark:hover:text-primary-400 group text-accent-steel-600 dark:text-dark-text-secondary" data-astro-cid-5blmo7yk> Portfolio <span class="absolute bottom-0 left-0 w-full h-0.5 bg-primary-600 dark:bg-primary-400 transform origin-left transition-transform duration-300 scale-x-0 group-hover:scale-x-100" data-astro-cid-5blmo7yk></span> </a><a href="/blog" class="px-4 py-2 text-sm font-medium transition-all duration-300 relative hover:text-primary-700 dark:hover:text-primary-400 group text-accent-steel-600 dark:text-dark-text-secondary" data-astro-cid-5blmo7yk> Blog <span class="absolute bottom-0 left-0 w-full h-0.5 bg-primary-600 dark:bg-primary-400 transform origin-left transition-transform duration-300 scale-x-0 group-hover:scale-x-100" data-astro-cid-5blmo7yk></span> </a> <button id="theme-toggle" type="button" class="p-2 rounded-xl text-primary-800 dark:text-dark-text-secondary hover:text-primary-700 dark:hover:text-primary-300 hover:bg-primary-100/50 dark:hover:bg-primary-900/50 transition-all duration-300 flex items-center justify-center" aria-label="Toggle dark mode" data-astro-cid-5blmo7yk> <svg width="1em" height="1em" class="w-5 h-5 dark:hidden" data-astro-cid-5blmo7yk="true" data-icon="lucide:sun"> <symbol id="ai:lucide:sun" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><circle cx="12" cy="12" r="4"/><path d="M12 2v2m0 16v2M4.93 4.93l1.41 1.41m11.32 11.32l1.41 1.41M2 12h2m16 0h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41"/></g></symbol><use href="#ai:lucide:sun"></use> </svg> <svg width="1em" height="1em" class="w-5 h-5 hidden dark:block" data-astro-cid-5blmo7yk="true" data-icon="lucide:moon"> <symbol id="ai:lucide:moon" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3a6 6 0 0 0 9 9a9 9 0 1 1-9-9"/></symbol><use href="#ai:lucide:moon"></use> </svg> </button> <button type="button" class="inline-flex items-center ml-2 px-5 py-2 rounded-xl text-sm font-medium bg-accent-orange-600 text-white transition-all duration-300 hover:shadow-lg hover:shadow-accent-orange-600/20 hover:bg-accent-orange-700 active:scale-95" data-tally-open="3l0ykX" aria-label="Get Quote/Contact"> Get Quote/Contact <svg width="1em" height="1em" class="w-5 h-5 ml-2 inline-block" data-icon="ph:arrow-right-bold"> <symbol id="ai:ph:arrow-right-bold" viewBox="0 0 256 256"><path fill="currentColor" d="m224.49 136.49l-72 72a12 12 0 0 1-17-17L187 140H40a12 12 0 0 1 0-24h147l-51.49-51.52a12 12 0 0 1 17-17l72 72a12 12 0 0 1-.02 17.01"/></symbol><use href="#ai:ph:arrow-right-bold"></use> </svg> </button> <script type="module">function e(){document.querySelectorAll("[data-tally-open]").forEach(t=>{t.addEventListener("click",()=>{const l=t.getAttribute("data-tally-open");l&&window.Tally&&window.Tally.openPopup(l)})})}e();</script> </div> </div> <!-- Mobile Menu Button --> <div class="md:hidden" data-astro-cid-5blmo7yk> <button type="button" class="mobile-menu-button p-2 rounded-xl text-primary-600 hover:text-primary-700 hover:bg-primary-100/50 transition-all duration-300" aria-label="Toggle menu" data-astro-cid-5blmo7yk> <svg width="1em" height="1em" class="w-6 h-6" data-astro-cid-5blmo7yk="true" data-icon="lucide:menu"> <symbol id="ai:lucide:menu" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 12h16M4 6h16M4 18h16"/></symbol><use href="#ai:lucide:menu"></use> </svg> </button> </div> </div> <!-- Mobile Menu Panel --> <div class="mobile-menu hidden md:hidden" style="content-visibility: auto;" data-astro-cid-5blmo7yk> <div class="pt-2 pb-4 space-y-1" data-astro-cid-5blmo7yk> <a href="/" class="block px-4 py-2.5 text-base font-medium transition-colors duration-300 relative group hover:text-primary-700 text-primary-700" data-astro-cid-5blmo7yk> Home <span class="absolute bottom-0 left-0 w-full h-0.5 bg-primary-600 transform origin-left transition-transform duration-300 scale-x-100" data-astro-cid-5blmo7yk></span> </a><a href="/about" class="block px-4 py-2.5 text-base font-medium transition-colors duration-300 relative group hover:text-primary-700 text-primary-600" data-astro-cid-5blmo7yk> About <span class="absolute bottom-0 left-0 w-full h-0.5 bg-primary-600 transform origin-left transition-transform duration-300 scale-x-0 group-hover:scale-x-100" data-astro-cid-5blmo7yk></span> </a><a href="/portfolio" class="block px-4 py-2.5 text-base font-medium transition-colors duration-300 relative group hover:text-primary-700 text-primary-600" data-astro-cid-5blmo7yk> Portfolio <span class="absolute bottom-0 left-0 w-full h-0.5 bg-primary-600 transform origin-left transition-transform duration-300 scale-x-0 group-hover:scale-x-100" data-astro-cid-5blmo7yk></span> </a><a href="/blog" class="block px-4 py-2.5 text-base font-medium transition-colors duration-300 relative group hover:text-primary-700 text-primary-600" data-astro-cid-5blmo7yk> Blog <span class="absolute bottom-0 left-0 w-full h-0.5 bg-primary-600 transform origin-left transition-transform duration-300 scale-x-0 group-hover:scale-x-100" data-astro-cid-5blmo7yk></span> </a> <div class="pt-2" data-astro-cid-5blmo7yk> <button id="theme-toggle-mobile" type="button" class="w-full text-left px-4 py-2.5 text-base font-medium transition-all duration-300 text-primary-600 hover:text-primary-700 flex items-center gap-2" data-astro-cid-5blmo7yk> <svg width="1em" height="1em" viewBox="0 0 24 24" class="w-5 h-5 dark:hidden" data-astro-cid-5blmo7yk="true" data-icon="lucide:sun"> <use href="#ai:lucide:sun"></use> </svg> <svg width="1em" height="1em" viewBox="0 0 24 24" class="w-5 h-5 hidden dark:block" data-astro-cid-5blmo7yk="true" data-icon="lucide:moon"> <use href="#ai:lucide:moon"></use> </svg> </button> <button type="button" class="inline-flex items-center justify-center w-full px-4 py-2.5 rounded-xl text-base font-medium bg-accent-orange-600 text-white hover:bg-accent-orange-700 transition-all duration-300" data-tally-open="3l0ykX" aria-label="Get Quote/Contact"> Get Quote/Contact <svg width="1em" height="1em" viewBox="0 0 256 256" class="w-5 h-5 ml-2 inline-block" data-icon="ph:arrow-right-bold"> <use href="#ai:ph:arrow-right-bold"></use> </svg> </button> </div> </div> </div> </div> </div> </div> </nav> <script type="module">const l=document.getElementById("main-nav");let s=0;window.addEventListener("scroll",()=>{const e=window.scrollY;if(e<=0){l?.classList.remove("scrolled","-translate-y-full");return}e>s&&e>100?l?.classList.add("-translate-y-full"):(l?.classList.remove("-translate-y-full"),l?.classList.add("scrolled")),s=e});function i(){const e=document.querySelectorAll("#theme-toggle, #theme-toggle-mobile"),o=()=>{const t=localStorage.getItem("theme");return t==="dark"||t==="light"?t:window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"},n=t=>{document.documentElement.classList.add("theme-transition"),document.documentElement.offsetHeight,t==="dark"?document.documentElement.classList.add("dark"):document.documentElement.classList.remove("dark"),localStorage.setItem("theme",t),setTimeout(()=>{document.documentElement.classList.remove("theme-transition")},500)};n(o()),e.forEach(t=>{t.addEventListener("click",()=>{const a=document.documentElement.classList.contains("dark");n(a?"light":"dark")})}),window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",t=>{localStorage.getItem("theme")||n(t.matches?"dark":"light")})}function r(){const e=document.querySelector(".mobile-menu-button"),o=document.querySelector(".mobile-menu");e&&o&&(e.addEventListener("click",()=>{o.classList.toggle("hidden")}),document.addEventListener("click",n=>{!o.contains(n.target)&&!e.contains(n.target)&&o.classList.add("hidden")}))}function m(){document.querySelectorAll("section").forEach(e=>{e.style.contentVisibility="auto"}),document.querySelectorAll("img").forEach(e=>{(!e.hasAttribute("width")||!e.hasAttribute("height"))&&(e.setAttribute("width","100%"),e.setAttribute("height","auto"))})}function u(){i(),r(),m()}u();const d=document.getElementById("quote-modal"),h=document.getElementById("get-quote-btn"),f=document.querySelector("[data-close-modal]"),g=document.querySelector("[data-modal-overlay]");function c(e){e?(d?.classList.remove("hidden"),document.body.style.overflow="hidden"):(d?.classList.add("hidden"),document.body.style.overflow="")}h?.addEventListener("click",e=>{e.preventDefault(),c(!0)});f?.addEventListener("click",()=>c(!1));g?.addEventListener("click",()=>c(!1));</script> <main> <section class="py-8 md:py-16 lg:py-24 overflow-hidden bg-gradient-to-b from-primary-100 to-white dark:from-dark-bg-soft dark:to-dark-bg" data-astro-cid-bbe6dxrz> <div class="container mx-auto px-4" data-astro-cid-bbe6dxrz> <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12 items-center" data-astro-cid-bbe6dxrz> <!-- Content Column --> <div class="space-y-6 md:space-y-8" data-astro-cid-bbe6dxrz> <div class="space-y-3 md:space-y-4" data-astro-cid-bbe6dxrz> <h1 class="font-heading text-3xl md:text-4xl lg:text-5xl font-bold text-primary-900 dark:text-gray-50 relative group transition-colors duration-300 hover:text-primary-800 dark:hover:text-primary-300" data-aos="fade-up" data-aos-delay="100" data-astro-cid-bbe6dxrz> Industrial Excellence Through Innovation </h1> <h2 class="font-heading text-lg md:text-xl lg:text-2xl text-primary-700 dark:text-gray-200 font-semibold" data-aos="fade-up" data-aos-delay="200" data-astro-cid-bbe6dxrz> Precision Fabrication & Supply Solutions </h2> </div> <div class="space-y-4 md:space-y-6 text-gray-600 dark:text-gray-300" data-aos="fade-up" data-aos-delay="300" data-astro-cid-bbe6dxrz> <p class="text-gray-600 dark:text-gray-300" data-astro-cid-bbe6dxrz>Your trusted partner in industrial fabrication, material supply, and hardware solutions. Delivering excellence across India from our base in Hosur, Tamil Nadu.</p> <ul class="grid grid-cols-2 gap-3 mt-6" data-astro-cid-bbe6dxrz> <li class="flex items-center text-gray-600 dark:text-gray-300" data-astro-cid-bbe6dxrz> <svg width="1em" height="1em" class="w-5 h-5 text-primary-600 dark:text-primary-400 mr-2" data-astro-cid-bbe6dxrz="true" data-icon="lucide:check-circle"> <symbol id="ai:lucide:check-circle" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M21.801 10A10 10 0 1 1 17 3.335"/><path d="m9 11l3 3L22 4"/></g></symbol><use href="#ai:lucide:check-circle"></use> </svg> <span data-astro-cid-bbe6dxrz>ISO 9001:2015 Certified</span> </li><li class="flex items-center text-gray-600 dark:text-gray-300" data-astro-cid-bbe6dxrz> <svg width="1em" height="1em" viewBox="0 0 24 24" class="w-5 h-5 text-primary-600 dark:text-primary-400 mr-2" data-astro-cid-bbe6dxrz="true" data-icon="lucide:check-circle"> <use href="#ai:lucide:check-circle"></use> </svg> <span data-astro-cid-bbe6dxrz>Industry-Leading Quality</span> </li><li class="flex items-center text-gray-600 dark:text-gray-300" data-astro-cid-bbe6dxrz> <svg width="1em" height="1em" viewBox="0 0 24 24" class="w-5 h-5 text-primary-600 dark:text-primary-400 mr-2" data-astro-cid-bbe6dxrz="true" data-icon="lucide:check-circle"> <use href="#ai:lucide:check-circle"></use> </svg> <span data-astro-cid-bbe6dxrz>Pan-India Service</span> </li><li class="flex items-center text-gray-600 dark:text-gray-300" data-astro-cid-bbe6dxrz> <svg width="1em" height="1em" viewBox="0 0 24 24" class="w-5 h-5 text-primary-600 dark:text-primary-400 mr-2" data-astro-cid-bbe6dxrz="true" data-icon="lucide:check-circle"> <use href="#ai:lucide:check-circle"></use> </svg> <span data-astro-cid-bbe6dxrz>24/7 Support</span> </li> </ul> <div class="mt-8" data-astro-cid-bbe6dxrz> <a href="/contact" class="inline-flex items-center px-6 py-3 rounded-xl text-white bg-accent-orange-600 hover:bg-accent-orange-700 transition-colors duration-300" data-astro-cid-bbe6dxrz> Request a Quote <svg width="1em" height="1em" class="w-5 h-5 ml-2" data-astro-cid-bbe6dxrz="true" data-icon="lucide:arrow-right"> <symbol id="ai:lucide:arrow-right" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14m-7-7l7 7l-7 7"/></symbol><use href="#ai:lucide:arrow-right"></use> </svg> </a> </div> </div> <div class="grid grid-cols-2 md:grid-cols-3 gap-3 md:gap-6" data-aos="fade-up" data-aos-delay="400" data-astro-cid-bbe6dxrz> <div class="bg-white/80 dark:bg-dark-surface-soft/90 p-3 md:p-4 rounded-lg shadow-sm transition-all duration-300 hover:scale-105 hover:shadow-md group backdrop-blur-sm" data-astro-cid-bbe6dxrz> <span class="block text-2xl md:text-3xl font-bold text-primary-800 dark:text-primary-300 mb-1 transition-colors group-hover:text-primary-700 dark:group-hover:text-primary-200 counter-animate" data-astro-cid-bbe6dxrz> 500+ </span> <span class="text-accent-steel-600 dark:text-dark-text-secondary" data-astro-cid-bbe6dxrz>
Projects Completed
</span> </div> <div class="bg-white/80 dark:bg-dark-surface-soft/90 p-3 md:p-4 rounded-lg shadow-sm transition-all duration-300 hover:scale-105 hover:shadow-md group backdrop-blur-sm" data-astro-cid-bbe6dxrz> <span class="block text-2xl md:text-3xl font-bold text-primary-800 dark:text-primary-300 mb-1 transition-colors group-hover:text-primary-700 dark:group-hover:text-primary-200 counter-animate" data-astro-cid-bbe6dxrz> 200+ </span> <span class="text-gray-600 dark:text-gray-300" data-astro-cid-bbe6dxrz>
Happy Clients
</span> </div> <div class="bg-white/80 dark:bg-dark-surface-soft/90 p-3 md:p-4 rounded-lg shadow-sm col-span-2 md:col-span-1 transition-all duration-300 hover:scale-105 hover:shadow-md group backdrop-blur-sm" data-astro-cid-bbe6dxrz> <span class="block text-2xl md:text-3xl font-bold text-primary-800 dark:text-primary-300 mb-1 transition-colors group-hover:text-primary-700 dark:group-hover:text-primary-200 counter-animate" data-astro-cid-bbe6dxrz> 15+ </span> <span class="text-gray-600 dark:text-gray-300" data-astro-cid-bbe6dxrz>
Years Experience
</span> </div> </div> </div> <div class="relative h-[400px] lg:h-[600px] rounded-xl lg:rounded-2xl overflow-hidden shadow-lg mt-6 lg:mt-0" data-astro-cid-bbe6dxrz> <div class="carousel-container absolute inset-0" role="region" aria-label="Image carousel" aria-roledescription="carousel" data-astro-cid-bbe6dxrz> <div class="carousel-slide absolute inset-0 transition-opacity duration-1000 opacity-100" role="group" aria-roledescription="slide" aria-label="Slide 1 of 4: Precision Fabrication" aria-hidden="false" data-astro-cid-bbe6dxrz> <img src="/assets/images/slide-1/image.jpg" alt="Custom metal fabrication with state-of-the-art machinery and expert craftsmanship" loading="lazy" decoding="async" data-astro-cid-bbe6dxrz="true" width="1920" height="1080" class="w-full h-full object-cover"> <div class="absolute inset-0 bg-gradient-to-t from-dark-bg/90 via-dark-bg-soft/50 to-transparent" data-astro-cid-bbe6dxrz></div> <div class="absolute bottom-8 md:bottom-12 left-4 right-4 md:left-6 md:right-6 transition-opacity duration-1000" data-astro-cid-bbe6dxrz> <div class="backdrop-blur-sm bg-white/10 dark:bg-dark-surface-soft/30 rounded-lg p-3 md:p-4 transform transition-all duration-500" data-astro-cid-bbe6dxrz> <div class="flex items-start gap-3" data-astro-cid-bbe6dxrz> <div class="bg-primary-500/25 backdrop-blur-sm p-2 rounded-lg" data-astro-cid-bbe6dxrz> <svg width="1em" height="1em" class="w-5 h-5 md:w-6 md:h-6 text-white" data-astro-cid-bbe6dxrz="true" data-icon="lucide:settings-2"> <symbol id="ai:lucide:settings-2" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M20 7h-9m3 10H5"/><circle cx="17" cy="17" r="3"/><circle cx="7" cy="7" r="3"/></g></symbol><use href="#ai:lucide:settings-2"></use> </svg> </div> <div class="flex-1" data-astro-cid-bbe6dxrz> <h3 class="text-base md:text-lg font-semibold text-white mb-1" data-astro-cid-bbe6dxrz> Precision Fabrication </h3> <p class="text-sm md:text-base text-gray-100 mb-2 line-clamp-2 md:line-clamp-none" data-astro-cid-bbe6dxrz> Custom metal fabrication with state-of-the-art machinery and expert craftsmanship </p> <a href="/services/fabrication" class="inline-flex items-center text-xs md:text-sm text-white font-medium group hover:text-primary-300" data-astro-cid-bbe6dxrz>
Learn More
<svg width="1em" height="1em" viewBox="0 0 24 24" class="w-3 h-3 md:w-4 md:h-4 ml-1 transform transition-transform group-hover:translate-x-1" data-astro-cid-bbe6dxrz="true" data-icon="lucide:arrow-right"> <use href="#ai:lucide:arrow-right"></use> </svg> </a> </div> </div> </div> </div> </div><div class="carousel-slide absolute inset-0 transition-opacity duration-1000 opacity-0" role="group" aria-roledescription="slide" aria-label="Slide 2 of 4: Industrial Supply" aria-hidden="true" data-astro-cid-bbe6dxrz> <img src="/assets/images/slide-2/image.jpg" alt="Comprehensive range of industrial materials and components for manufacturing needs" loading="lazy" decoding="async" data-astro-cid-bbe6dxrz="true" width="1920" height="1080" class="w-full h-full object-cover"> <div class="absolute inset-0 bg-gradient-to-t from-dark-bg/90 via-dark-bg-soft/50 to-transparent" data-astro-cid-bbe6dxrz></div> <div class="absolute bottom-8 md:bottom-12 left-4 right-4 md:left-6 md:right-6 transition-opacity duration-1000" data-astro-cid-bbe6dxrz> <div class="backdrop-blur-sm bg-white/10 dark:bg-dark-surface-soft/30 rounded-lg p-3 md:p-4 transform transition-all duration-500" data-astro-cid-bbe6dxrz> <div class="flex items-start gap-3" data-astro-cid-bbe6dxrz> <div class="bg-primary-500/25 backdrop-blur-sm p-2 rounded-lg" data-astro-cid-bbe6dxrz> <svg width="1em" height="1em" class="w-5 h-5 md:w-6 md:h-6 text-white" data-astro-cid-bbe6dxrz="true" data-icon="lucide:boxes"> <symbol id="ai:lucide:boxes" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M2.97 12.92A2 2 0 0 0 2 14.63v3.24a2 2 0 0 0 .97 1.71l3 1.8a2 2 0 0 0 2.06 0L12 19v-5.5l-5-3zM7 16.5l-4.74-2.85M7 16.5l5-3m-5 3v5.17m5-8.17V19l3.97 2.38a2 2 0 0 0 2.06 0l3-1.8a2 2 0 0 0 .97-1.71v-3.24a2 2 0 0 0-.97-1.71L17 10.5zm5 3l-5-3m5 3l4.74-2.85M17 16.5v5.17"/><path d="M7.97 4.42A2 2 0 0 0 7 6.13v4.37l5 3l5-3V6.13a2 2 0 0 0-.97-1.71l-3-1.8a2 2 0 0 0-2.06 0zM12 8L7.26 5.15M12 8l4.74-2.85M12 13.5V8"/></g></symbol><use href="#ai:lucide:boxes"></use> </svg> </div> <div class="flex-1" data-astro-cid-bbe6dxrz> <h3 class="text-base md:text-lg font-semibold text-white mb-1" data-astro-cid-bbe6dxrz> Industrial Supply </h3> <p class="text-sm md:text-base text-gray-100 mb-2 line-clamp-2 md:line-clamp-none" data-astro-cid-bbe6dxrz> Comprehensive range of industrial materials and components for manufacturing needs </p> <a href="/services/supply" class="inline-flex items-center text-xs md:text-sm text-white font-medium group hover:text-primary-300" data-astro-cid-bbe6dxrz>
Learn More
<svg width="1em" height="1em" viewBox="0 0 24 24" class="w-3 h-3 md:w-4 md:h-4 ml-1 transform transition-transform group-hover:translate-x-1" data-astro-cid-bbe6dxrz="true" data-icon="lucide:arrow-right"> <use href="#ai:lucide:arrow-right"></use> </svg> </a> </div> </div> </div> </div> </div><div class="carousel-slide absolute inset-0 transition-opacity duration-1000 opacity-0" role="group" aria-roledescription="slide" aria-label="Slide 3 of 4: Hardware Solutions" aria-hidden="true" data-astro-cid-bbe6dxrz> <img src="/assets/images/slide-3/image.jpg" alt="Quality hardware products and customized solutions for industrial applications" loading="lazy" decoding="async" data-astro-cid-bbe6dxrz="true" width="1920" height="1080" class="w-full h-full object-cover"> <div class="absolute inset-0 bg-gradient-to-t from-dark-bg/90 via-dark-bg-soft/50 to-transparent" data-astro-cid-bbe6dxrz></div> <div class="absolute bottom-8 md:bottom-12 left-4 right-4 md:left-6 md:right-6 transition-opacity duration-1000" data-astro-cid-bbe6dxrz> <div class="backdrop-blur-sm bg-white/10 dark:bg-dark-surface-soft/30 rounded-lg p-3 md:p-4 transform transition-all duration-500" data-astro-cid-bbe6dxrz> <div class="flex items-start gap-3" data-astro-cid-bbe6dxrz> <div class="bg-primary-500/25 backdrop-blur-sm p-2 rounded-lg" data-astro-cid-bbe6dxrz> <svg width="1em" height="1em" class="w-5 h-5 md:w-6 md:h-6 text-white" data-astro-cid-bbe6dxrz="true" data-icon="lucide:wrench"> <symbol id="ai:lucide:wrench" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></symbol><use href="#ai:lucide:wrench"></use> </svg> </div> <div class="flex-1" data-astro-cid-bbe6dxrz> <h3 class="text-base md:text-lg font-semibold text-white mb-1" data-astro-cid-bbe6dxrz> Hardware Solutions </h3> <p class="text-sm md:text-base text-gray-100 mb-2 line-clamp-2 md:line-clamp-none" data-astro-cid-bbe6dxrz> Quality hardware products and customized solutions for industrial applications </p> <a href="/services/hardware" class="inline-flex items-center text-xs md:text-sm text-white font-medium group hover:text-primary-300" data-astro-cid-bbe6dxrz>
Learn More
<svg width="1em" height="1em" viewBox="0 0 24 24" class="w-3 h-3 md:w-4 md:h-4 ml-1 transform transition-transform group-hover:translate-x-1" data-astro-cid-bbe6dxrz="true" data-icon="lucide:arrow-right"> <use href="#ai:lucide:arrow-right"></use> </svg> </a> </div> </div> </div> </div> </div><div class="carousel-slide absolute inset-0 transition-opacity duration-1000 opacity-0" role="group" aria-roledescription="slide" aria-label="Slide 4 of 4: Technical Expertise" aria-hidden="true" data-astro-cid-bbe6dxrz> <img src="/assets/images/slide-4/image.jpg" alt="15+ years of technical excellence in manufacturing and fabrication services" loading="lazy" decoding="async" data-astro-cid-bbe6dxrz="true" width="1920" height="1080" class="w-full h-full object-cover"> <div class="absolute inset-0 bg-gradient-to-t from-dark-bg/90 via-dark-bg-soft/50 to-transparent" data-astro-cid-bbe6dxrz></div> <div class="absolute bottom-8 md:bottom-12 left-4 right-4 md:left-6 md:right-6 transition-opacity duration-1000" data-astro-cid-bbe6dxrz> <div class="backdrop-blur-sm bg-white/10 dark:bg-dark-surface-soft/30 rounded-lg p-3 md:p-4 transform transition-all duration-500" data-astro-cid-bbe6dxrz> <div class="flex items-start gap-3" data-astro-cid-bbe6dxrz> <div class="bg-primary-500/25 backdrop-blur-sm p-2 rounded-lg" data-astro-cid-bbe6dxrz> <svg width="1em" height="1em" class="w-5 h-5 md:w-6 md:h-6 text-white" data-astro-cid-bbe6dxrz="true" data-icon="lucide:award"> <symbol id="ai:lucide:award" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="m15.477 12.89l1.515 8.526a.5.5 0 0 1-.81.47l-3.58-2.687a1 1 0 0 0-1.197 0l-3.586 2.686a.5.5 0 0 1-.81-.469l1.514-8.526"/><circle cx="12" cy="8" r="6"/></g></symbol><use href="#ai:lucide:award"></use> </svg> </div> <div class="flex-1" data-astro-cid-bbe6dxrz> <h3 class="text-base md:text-lg font-semibold text-white mb-1" data-astro-cid-bbe6dxrz> Technical Expertise </h3> <p class="text-sm md:text-base text-gray-100 mb-2 line-clamp-2 md:line-clamp-none" data-astro-cid-bbe6dxrz> 15+ years of technical excellence in manufacturing and fabrication services </p> <a href="/services/expertise" class="inline-flex items-center text-xs md:text-sm text-white font-medium group hover:text-primary-300" data-astro-cid-bbe6dxrz>
Learn More
<svg width="1em" height="1em" viewBox="0 0 24 24" class="w-3 h-3 md:w-4 md:h-4 ml-1 transform transition-transform group-hover:translate-x-1" data-astro-cid-bbe6dxrz="true" data-icon="lucide:arrow-right"> <use href="#ai:lucide:arrow-right"></use> </svg> </a> </div> </div> </div> </div> </div> <!-- Add Navigation Controls --> <div class="absolute bottom-4 left-0 right-0 flex justify-center gap-2" data-astro-cid-bbe6dxrz> <button type="button" class="w-3 h-3 rounded-full bg-white/50 transition-all duration-300" aria-label="Go to slide 1" aria-current="true" data-index="0" data-astro-cid-bbe6dxrz></button><button type="button" class="w-3 h-3 rounded-full bg-white/50 transition-all duration-300" aria-label="Go to slide 2" aria-current="false" data-index="1" data-astro-cid-bbe6dxrz></button><button type="button" class="w-3 h-3 rounded-full bg-white/50 transition-all duration-300" aria-label="Go to slide 3" aria-current="false" data-index="2" data-astro-cid-bbe6dxrz></button><button type="button" class="w-3 h-3 rounded-full bg-white/50 transition-all duration-300" aria-label="Go to slide 4" aria-current="false" data-index="3" data-astro-cid-bbe6dxrz></button> </div> <!-- Add Previous/Next Buttons --> <div class="absolute inset-y-0 left-0 flex items-center" data-astro-cid-bbe6dxrz> <button type="button" class="p-2 bg-black/20 hover:bg-black/30 text-white rounded-r-lg transition-colors" aria-label="Previous slide" id="prev-slide" data-astro-cid-bbe6dxrz> <svg width="1em" height="1em" class="w-6 h-6" data-astro-cid-bbe6dxrz="true" data-icon="lucide:chevron-left"> <symbol id="ai:lucide:chevron-left" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m15 18l-6-6l6-6"/></symbol><use href="#ai:lucide:chevron-left"></use> </svg> </button> </div> <div class="absolute inset-y-0 right-0 flex items-center" data-astro-cid-bbe6dxrz> <button type="button" class="p-2 bg-black/20 hover:bg-black/30 text-white rounded-l-lg transition-colors" aria-label="Next slide" id="next-slide" data-astro-cid-bbe6dxrz> <svg width="1em" height="1em" class="w-6 h-6" data-astro-cid-bbe6dxrz="true" data-icon="lucide:chevron-right"> <symbol id="ai:lucide:chevron-right" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 18l6-6l-6-6"/></symbol><use href="#ai:lucide:chevron-right"></use> </svg> </button> </div> <!-- Add Live Region --> <div class="sr-only" aria-live="polite" aria-atomic="true" id="carousel-status" data-astro-cid-bbe6dxrz></div> </div> </div> </div> </div> </section> <script type="module">function h(){const t=document.querySelector(".carousel-container"),s=document.querySelectorAll(".carousel-slide"),n=document.querySelectorAll("[data-index]"),r=document.getElementById("prev-slide"),i=document.getElementById("next-slide"),d=document.getElementById("carousel-status");let g=0;const v=s.length;function a(e){s.forEach((c,l)=>{c.classList.toggle("opacity-100",l===e),c.classList.toggle("opacity-0",l!==e),c.setAttribute("aria-hidden",String(l!==e))}),n.forEach((c,l)=>{c.setAttribute("aria-current",String(l===e)),c.classList.toggle("bg-white",l===e),c.classList.toggle("bg-white/50",l!==e)});const E=s[e].getAttribute("aria-label");d&&(d.textContent=`Showing ${E}`),g=e}function u(){const e=(g+1)%v;a(e)}function f(){const e=(g-1+v)%v;a(e)}r?.addEventListener("click",f),i?.addEventListener("click",u),n.forEach((e,o)=>{e.addEventListener("click",()=>a(o))}),t?.addEventListener("keydown",e=>{const o=e;o.key==="ArrowLeft"?f():o.key==="ArrowRight"?u():o.key==="Home"?a(0):o.key==="End"&&a(v-1)});const m=setInterval(u,5e3);t?.addEventListener("focus",()=>clearInterval(m),!0),t?.addEventListener("mouseover",()=>clearInterval(m)),t?.addEventListener("blur",()=>setInterval(u,5e3),!0),t?.addEventListener("mouseout",()=>setInterval(u,5e3))}h();const y=document.querySelectorAll(".counter-animate"),L=new IntersectionObserver(t=>{t.forEach(s=>{if(s.isIntersecting){const n=s.target,r=n.textContent;if(r&&r.includes("+")){const i=parseInt(r.replace("+",""));S(n,0,i)}}})},{threshold:.5});y.forEach(t=>L.observe(t));function S(t,s,n){let r=s;const i=Math.ceil(n/30),d=setInterval(()=>{r+=i,r>=n?(t.textContent=n+"+",clearInterval(d)):t.textContent=r+"+"},50)}</script> <section class="relative py-20 overflow-hidden" data-astro-cid-a4nqrquw> <!-- Background Elements --> <div class="absolute inset-0" data-astro-cid-a4nqrquw> <!-- Gradient Background --> <div class="absolute inset-0 bg-gradient-to-br from-gray-50 via-white to-gray-50 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900" data-astro-cid-a4nqrquw></div> <!-- Decorative Elements --> <div class="absolute inset-0" data-astro-cid-a4nqrquw> <!-- Animated Gear Pattern --> <div class="absolute top-20 -left-20 w-40 h-40 text-blue-500/10 dark:text-blue-400/10 animate-spin-slow" data-astro-cid-a4nqrquw> <svg width="1em" height="1em" class="w-full h-full" data-astro-cid-a4nqrquw="true" data-icon="ph:gear-bold"> <symbol id="ai:ph:gear-bold" viewBox="0 0 256 256"><path fill="currentColor" d="M128 76a52 52 0 1 0 52 52a52.06 52.06 0 0 0-52-52m0 80a28 28 0 1 1 28-28a28 28 0 0 1-28 28m92-27.21v-1.58l14-17.51a12 12 0 0 0 2.23-10.59A111.8 111.8 0 0 0 225 71.89a12 12 0 0 0-9.11-5.89l-22.28-2.5l-1.11-1.11L190 40.1a12 12 0 0 0-5.89-9.1a111.7 111.7 0 0 0-27.23-11.27A12 12 0 0 0 146.3 22l-17.51 14h-1.58L109.7 22a12 12 0 0 0-10.59-2.23a111.8 111.8 0 0 0-27.22 11.28A12 12 0 0 0 66 40.11l-2.5 22.28l-1.11 1.11L40.1 66a12 12 0 0 0-9.1 5.89a111.7 111.7 0 0 0-11.23 27.23A12 12 0 0 0 22 109.7l14 17.51v1.58L22 146.3a12 12 0 0 0-2.23 10.59a111.8 111.8 0 0 0 11.29 27.22a12 12 0 0 0 9.05 5.89l22.28 2.48l1.11 1.11L66 215.9a12 12 0 0 0 5.89 9.1a111.7 111.7 0 0 0 27.23 11.27A12 12 0 0 0 109.7 234l17.51-14h1.58l17.51 14a12 12 0 0 0 10.59 2.23A111.8 111.8 0 0 0 184.11 225a12 12 0 0 0 5.91-9.06l2.48-22.28l1.11-1.11L215.9 190a12 12 0 0 0 9.06-5.91a111.7 111.7 0 0 0 11.27-27.23A12 12 0 0 0 234 146.3Zm-24.12-4.89a70 70 0 0 1 0 8.2a12 12 0 0 0 2.61 8.22l12.84 16.05a86.5 86.5 0 0 1-4.33 10.49l-20.43 2.27a12 12 0 0 0-7.65 4a69 69 0 0 1-5.8 5.8a12 12 0 0 0-4 7.65L166.86 207a86.5 86.5 0 0 1-10.49 4.35l-16.05-12.85a12 12 0 0 0-7.5-2.62h-.72a70 70 0 0 1-8.2 0a12.06 12.06 0 0 0-8.22 2.6l-16.05 12.85A86.5 86.5 0 0 1 89.14 207l-2.27-20.43a12 12 0 0 0-4-7.65a69 69 0 0 1-5.8-5.8a12 12 0 0 0-7.65-4L49 166.86a86.5 86.5 0 0 1-4.35-10.49l12.84-16.05a12 12 0 0 0 2.61-8.22a70 70 0 0 1 0-8.2a12 12 0 0 0-2.61-8.22L44.67 99.63A86.5 86.5 0 0 1 49 89.14l20.43-2.27a12 12 0 0 0 7.65-4a69 69 0 0 1 5.8-5.8a12 12 0 0 0 4-7.65L89.14 49a86.5 86.5 0 0 1 10.49-4.35l16.05 12.85a12.06 12.06 0 0 0 8.22 2.6a70 70 0 0 1 8.2 0a12 12 0 0 0 8.22-2.6l16.05-12.85A86.5 86.5 0 0 1 166.86 49l2.27 20.43a12 12 0 0 0 4 7.65a69 69 0 0 1 5.8 5.8a12 12 0 0 0 7.65 4L207 89.14a86.5 86.5 0 0 1 4.35 10.49l-12.84 16.05a12 12 0 0 0-2.63 8.22"/></symbol><use href="#ai:ph:gear-bold"></use> </svg> </div> <div class="absolute bottom-20 -right-20 w-60 h-60 text-purple-500/10 dark:text-purple-400/10 animate-spin-slow-reverse" data-astro-cid-a4nqrquw> <svg width="1em" height="1em" viewBox="0 0 256 256" class="w-full h-full" data-astro-cid-a4nqrquw="true" data-icon="ph:gear-bold"> <use href="#ai:ph:gear-bold"></use> </svg> </div> <!-- Grid Pattern --> <div class="absolute inset-0 bg-grid-pattern opacity-[0.05] dark:opacity-[0.02]" data-astro-cid-a4nqrquw></div> </div> </div> <div class="container relative mx-auto px-4" data-astro-cid-a4nqrquw> <div class="text-center mb-16" data-astro-cid-a4nqrquw> <h2 class="text-4xl md:text-5xl font-bold mb-4 bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent" data-aos="fade-up" data-astro-cid-a4nqrquw>
Our Services
</h2> <p class="text-gray-600 dark:text-gray-400 max-w-2xl mx-auto text-lg" data-aos="fade-up" data-aos-delay="100" data-astro-cid-a4nqrquw>
Comprehensive industrial solutions tailored to your needs
</p> </div> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8" data-astro-cid-a4nqrquw> <div class="group relative bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm p-8 rounded-2xl border border-gray-200/50 dark:border-gray-700/50 hover:border-blue-500/50 dark:hover:border-blue-500/30 transform hover:-translate-y-1 transition-all duration-300 hover:shadow-xl hover:shadow-blue-500/10" data-aos="fade-up" data-aos-delay="0" data-astro-cid-a4nqrquw> <!-- Glow Effect --> <div class="absolute inset-0 bg-gradient-to-br from-blue-500/0 to-purple-500/0 group-hover:from-blue-500/5 group-hover:to-purple-500/5 rounded-2xl transition-colors duration-500" data-astro-cid-a4nqrquw></div> <!-- Icon Container --> <div class="relative mb-8" data-astro-cid-a4nqrquw> <div class="absolute inset-0 bg-blue-500/20 dark:bg-blue-500/10 rounded-xl blur-xl group-hover:blur-2xl transition-all duration-300" data-astro-cid-a4nqrquw></div> <div class="relative p-4 bg-gradient-to-br from-blue-50 to-purple-50 dark:from-blue-900/50 dark:to-purple-900/50 rounded-xl group-hover:scale-110 transition-transform duration-300" data-astro-cid-a4nqrquw> <svg width="1em" height="1em" viewBox="0 0 256 256" class="w-8 h-8 text-blue-600 dark:text-blue-400 transform group-hover:rotate-12 transition-transform duration-300" data-astro-cid-a4nqrquw="true" data-icon="ph:gear-bold"> <use href="#ai:ph:gear-bold"></use> </svg> </div> </div> <!-- Content --> <h3 class="text-xl font-bold mb-3 text-gray-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors" data-astro-cid-a4nqrquw> Custom Fabrication </h3> <p class="text-gray-600 dark:text-gray-400 mb-6 text-sm leading-relaxed" data-astro-cid-a4nqrquw> Tailored fabrication solutions to meet your specific requirements </p> <!-- Features --> <ul class="space-y-3" data-astro-cid-a4nqrquw> <li class="flex items-center text-sm text-gray-600 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-gray-300 transition-colors" data-astro-cid-a4nqrquw> <svg width="1em" height="1em" class="w-4 h-4 mr-2 text-blue-500 group-hover:scale-110 transition-transform duration-300" data-astro-cid-a4nqrquw="true" data-icon="ph:check-circle"> <symbol id="ai:ph:check-circle" viewBox="0 0 256 256"><path fill="currentColor" d="M173.66 98.34a8 8 0 0 1 0 11.32l-56 56a8 8 0 0 1-11.32 0l-24-24a8 8 0 0 1 11.32-11.32L112 148.69l50.34-50.35a8 8 0 0 1 11.32 0M232 128A104 104 0 1 1 128 24a104.11 104.11 0 0 1 104 104m-16 0a88 88 0 1 0-88 88a88.1 88.1 0 0 0 88-88"/></symbol><use href="#ai:ph:check-circle"></use> </svg> Precision cutting and welding </li><li class="flex items-center text-sm text-gray-600 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-gray-300 transition-colors" data-astro-cid-a4nqrquw> <svg width="1em" height="1em" viewBox="0 0 256 256" class="w-4 h-4 mr-2 text-blue-500 group-hover:scale-110 transition-transform duration-300" data-astro-cid-a4nqrquw="true" data-icon="ph:check-circle"> <use href="#ai:ph:check-circle"></use> </svg> Custom metal forming </li><li class="flex items-center text-sm text-gray-600 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-gray-300 transition-colors" data-astro-cid-a4nqrquw> <svg width="1em" height="1em" viewBox="0 0 256 256" class="w-4 h-4 mr-2 text-blue-500 group-hover:scale-110 transition-transform duration-300" data-astro-cid-a4nqrquw="true" data-icon="ph:check-circle"> <use href="#ai:ph:check-circle"></use> </svg> Assembly and finishing </li> </ul> <!-- Hover Effect Line --> <div class="absolute bottom-0 left-0 w-full h-1 bg-gradient-to-r from-blue-500 to-purple-500 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 rounded-b-2xl" data-astro-cid-a4nqrquw></div> </div><div class="group relative bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm p-8 rounded-2xl border border-gray-200/50 dark:border-gray-700/50 hover:border-blue-500/50 dark:hover:border-blue-500/30 transform hover:-translate-y-1 transition-all duration-300 hover:shadow-xl hover:shadow-blue-500/10" data-aos="fade-up" data-aos-delay="100" data-astro-cid-a4nqrquw> <!-- Glow Effect --> <div class="absolute inset-0 bg-gradient-to-br from-blue-500/0 to-purple-500/0 group-hover:from-blue-500/5 group-hover:to-purple-500/5 rounded-2xl transition-colors duration-500" data-astro-cid-a4nqrquw></div> <!-- Icon Container --> <div class="relative mb-8" data-astro-cid-a4nqrquw> <div class="absolute inset-0 bg-blue-500/20 dark:bg-blue-500/10 rounded-xl blur-xl group-hover:blur-2xl transition-all duration-300" data-astro-cid-a4nqrquw></div> <div class="relative p-4 bg-gradient-to-br from-blue-50 to-purple-50 dark:from-blue-900/50 dark:to-purple-900/50 rounded-xl group-hover:scale-110 transition-transform duration-300" data-astro-cid-a4nqrquw> <svg width="1em" height="1em" class="w-8 h-8 text-blue-600 dark:text-blue-400 transform group-hover:rotate-12 transition-transform duration-300" data-astro-cid-a4nqrquw="true" data-icon="ph:package-bold"> <symbol id="ai:ph:package-bold" viewBox="0 0 256 256"><path fill="currentColor" d="m225.6 62.64l-88-48.17a19.91 19.91 0 0 0-19.2 0l-88 48.17A20 20 0 0 0 20 80.19v95.62a20 20 0 0 0 10.4 17.55l88 48.17a19.89 19.89 0 0 0 19.2 0l88-48.17a20 20 0 0 0 10.4-17.55V80.19a20 20 0 0 0-10.4-17.55M128 36.57L200 76l-21.43 11.73l-72-39.42Zm0 78.83L56 76l25.56-14l72 39.41ZM44 96.79l72 39.4v76.67l-72-39.42Zm96 116.07v-76.67l24-13.13V152a12 12 0 0 0 24 0v-42.08l24-13.13v76.65Z"/></symbol><use href="#ai:ph:package-bold"></use> </svg> </div> </div> <!-- Content --> <h3 class="text-xl font-bold mb-3 text-gray-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors" data-astro-cid-a4nqrquw> Material Supply </h3> <p class="text-gray-600 dark:text-gray-400 mb-6 text-sm leading-relaxed" data-astro-cid-a4nqrquw> High-quality materials for industrial applications </p> <!-- Features --> <ul class="space-y-3" data-astro-cid-a4nqrquw> <li class="flex items-center text-sm text-gray-600 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-gray-300 transition-colors" data-astro-cid-a4nqrquw> <svg width="1em" height="1em" viewBox="0 0 256 256" class="w-4 h-4 mr-2 text-blue-500 group-hover:scale-110 transition-transform duration-300" data-astro-cid-a4nqrquw="true" data-icon="ph:check-circle"> <use href="#ai:ph:check-circle"></use> </svg> Wide range of metals and alloys </li><li class="flex items-center text-sm text-gray-600 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-gray-300 transition-colors" data-astro-cid-a4nqrquw> <svg width="1em" height="1em" viewBox="0 0 256 256" class="w-4 h-4 mr-2 text-blue-500 group-hover:scale-110 transition-transform duration-300" data-astro-cid-a4nqrquw="true" data-icon="ph:check-circle"> <use href="#ai:ph:check-circle"></use> </svg> Just-in-time delivery </li><li class="flex items-center text-sm text-gray-600 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-gray-300 transition-colors" data-astro-cid-a4nqrquw> <svg width="1em" height="1em" viewBox="0 0 256 256" class="w-4 h-4 mr-2 text-blue-500 group-hover:scale-110 transition-transform duration-300" data-astro-cid-a4nqrquw="true" data-icon="ph:check-circle"> <use href="#ai:ph:check-circle"></use> </svg> Bulk ordering available </li> </ul> <!-- Hover Effect Line --> <div class="absolute bottom-0 left-0 w-full h-1 bg-gradient-to-r from-blue-500 to-purple-500 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 rounded-b-2xl" data-astro-cid-a4nqrquw></div> </div><div class="group relative bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm p-8 rounded-2xl border border-gray-200/50 dark:border-gray-700/50 hover:border-blue-500/50 dark:hover:border-blue-500/30 transform hover:-translate-y-1 transition-all duration-300 hover:shadow-xl hover:shadow-blue-500/10" data-aos="fade-up" data-aos-delay="200" data-astro-cid-a4nqrquw> <!-- Glow Effect --> <div class="absolute inset-0 bg-gradient-to-br from-blue-500/0 to-purple-500/0 group-hover:from-blue-500/5 group-hover:to-purple-500/5 rounded-2xl transition-colors duration-500" data-astro-cid-a4nqrquw></div> <!-- Icon Container --> <div class="relative mb-8" data-astro-cid-a4nqrquw> <div class="absolute inset-0 bg-blue-500/20 dark:bg-blue-500/10 rounded-xl blur-xl group-hover:blur-2xl transition-all duration-300" data-astro-cid-a4nqrquw></div> <div class="relative p-4 bg-gradient-to-br from-blue-50 to-purple-50 dark:from-blue-900/50 dark:to-purple-900/50 rounded-xl group-hover:scale-110 transition-transform duration-300" data-astro-cid-a4nqrquw> <svg width="1em" height="1em" class="w-8 h-8 text-blue-600 dark:text-blue-400 transform group-hover:rotate-12 transition-transform duration-300" data-astro-cid-a4nqrquw="true" data-icon="ph:compass-tool-bold"> <symbol id="ai:ph:compass-tool-bold" viewBox="0 0 256 256"><path fill="currentColor" d="M218.68 125.46a12 12 0 1 0-21.37-10.92a75.15 75.15 0 0 1-27.66 29.64l-13.5-30.39A44 44 0 0 0 140 37.68V24a12 12 0 0 0-24 0v13.68a44 44 0 0 0-16.15 76.11L53 219.12A12 12 0 0 0 59.13 235a11.9 11.9 0 0 0 4.87 1a12 12 0 0 0 11-7.13l23.67-53.26A99.5 99.5 0 0 0 128 180a102.8 102.8 0 0 0 29.39-4.32L181 228.87a12 12 0 0 0 11 7.13a11.85 11.85 0 0 0 4.86-1a12 12 0 0 0 6.14-15.88l-23.51-52.9a99.4 99.4 0 0 0 39.19-40.76M128 60a20 20 0 1 1-20 20a20 20 0 0 1 20-20m0 96a75.8 75.8 0 0 1-19.52-2.53l13.3-29.92a43.2 43.2 0 0 0 12.44 0l13.33 30A79 79 0 0 1 128 156"/></symbol><use href="#ai:ph:compass-tool-bold"></use> </svg> </div> </div> <!-- Content --> <h3 class="text-xl font-bold mb-3 text-gray-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors" data-astro-cid-a4nqrquw> Hardware Solutions </h3> <p class="text-gray-600 dark:text-gray-400 mb-6 text-sm leading-relaxed" data-astro-cid-a4nqrquw> Complete range of industrial hardware components </p> <!-- Features --> <ul class="space-y-3" data-astro-cid-a4nqrquw> <li class="flex items-center text-sm text-gray-600 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-gray-300 transition-colors" data-astro-cid-a4nqrquw> <svg width="1em" height="1em" viewBox="0 0 256 256" class="w-4 h-4 mr-2 text-blue-500 group-hover:scale-110 transition-transform duration-300" data-astro-cid-a4nqrquw="true" data-icon="ph:check-circle"> <use href="#ai:ph:check-circle"></use> </svg> Industrial fasteners </li><li class="flex items-center text-sm text-gray-600 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-gray-300 transition-colors" data-astro-cid-a4nqrquw> <svg width="1em" height="1em" viewBox="0 0 256 256" class="w-4 h-4 mr-2 text-blue-500 group-hover:scale-110 transition-transform duration-300" data-astro-cid-a4nqrquw="true" data-icon="ph:check-circle"> <use href="#ai:ph:check-circle"></use> </svg> Specialized tools </li><li class="flex items-center text-sm text-gray-600 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-gray-300 transition-colors" data-astro-cid-a4nqrquw> <svg width="1em" height="1em" viewBox="0 0 256 256" class="w-4 h-4 mr-2 text-blue-500 group-hover:scale-110 transition-transform duration-300" data-astro-cid-a4nqrquw="true" data-icon="ph:check-circle"> <use href="#ai:ph:check-circle"></use> </svg> Safety equipment </li> </ul> <!-- Hover Effect Line --> <div class="absolute bottom-0 left-0 w-full h-1 bg-gradient-to-r from-blue-500 to-purple-500 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 rounded-b-2xl" data-astro-cid-a4nqrquw></div> </div> </div> </div> </section> <section class="relative py-20 overflow-hidden" data-astro-cid-trrswgjs> <!-- Background Elements --> <div class="absolute inset-0 bg-gradient-to-b from-gray-50 to-white dark:from-gray-900 dark:to-gray-800" data-astro-cid-trrswgjs> <div class="absolute inset-0 bg-grid-pattern opacity-[0.05] dark:opacity-[0.02]" data-astro-cid-trrswgjs></div> </div> <div class="container relative mx-auto px-4" data-astro-cid-trrswgjs> <div class="text-center mb-16" data-astro-cid-trrswgjs> <h2 class="text-4xl md:text-5xl font-bold mb-4 bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent" data-aos="fade-up" data-astro-cid-trrswgjs>
Our Process
</h2> <p class="text-gray-600 dark:text-gray-400 max-w-2xl mx-auto text-lg" data-aos="fade-up" data-aos-delay="100" data-astro-cid-trrswgjs>
A streamlined approach to deliver excellence in every project
</p> </div> <div class="relative" data-astro-cid-trrswgjs> <!-- Connection Line --> <div class="absolute top-1/2 left-0 w-full h-1 bg-gradient-to-r from-blue-200 via-purple-300 to-blue-200 dark:from-blue-900 dark:via-purple-800 dark:to-blue-900 transform -translate-y-1/2 hidden lg:block" data-aos="scale-x-100" data-aos-duration="1000" data-astro-cid-trrswgjs></div> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 relative z-10" data-astro-cid-trrswgjs> <div class="group relative bg-white dark:bg-gray-800 p-6 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-500 transform hover:-translate-y-2 border border-gray-100 dark:border-gray-700" data-aos="fade-up" data-aos-delay="0" data-astro-cid-trrswgjs> <!-- Process Number --> <div class="absolute -top-4 -right-4 w-8 h-8 bg-gradient-to-br from-blue-500 to-purple-500 rounded-full flex items-center justify-center text-white font-bold text-sm" data-astro-cid-trrswgjs> 1 </div> <!-- Icon --> <div class="relative mb-6 inline-block" data-astro-cid-trrswgjs> <div class="absolute inset-0 bg-blue-500/20 dark:bg-blue-500/10 rounded-xl blur-xl group-hover:blur-2xl transition-all duration-300" data-astro-cid-trrswgjs></div> <div class="relative p-4 bg-gradient-to-br from-blue-50 to-purple-50 dark:from-blue-900/50 dark:to-purple-900/50 rounded-xl group-hover:scale-110 transition-transform duration-300" data-astro-cid-trrswgjs> <svg width="1em" height="1em" class="w-8 h-8 text-blue-600 dark:text-blue-400" data-astro-cid-trrswgjs="true" data-icon="ph:chat-circle-text-bold"> <symbol id="ai:ph:chat-circle-text-bold" viewBox="0 0 256 256"><path fill="currentColor" d="M172 108a12 12 0 0 1-12 12H96a12 12 0 0 1 0-24h64a12 12 0 0 1 12 12m-12 28H96a12 12 0 0 0 0 24h64a12 12 0 0 0 0-24m76-8a108 108 0 0 1-157.23 96.15L46.34 235A20 20 0 0 1 21 209.66l10.81-32.43A108 108 0 1 1 236 128m-24 0a84 84 0 1 0-156.73 42.06a12 12 0 0 1 1 9.81l-9.93 29.79l29.79-9.93a12.1 12.1 0 0 1 3.8-.62a12 12 0 0 1 6 1.62A84 84 0 0 0 212 128"/></symbol><use href="#ai:ph:chat-circle-text-bold"></use> </svg> </div> </div> <!-- Content --> <h3 class="text-xl font-bold mb-3 text-gray-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors" data-astro-cid-trrswgjs> Consultation </h3> <p class="text-gray-600 dark:text-gray-400 mb-4" data-astro-cid-trrswgjs> Initial discussion of requirements and project scope </p> <!-- Steps --> <ul class="space-y-2" data-astro-cid-trrswgjs> <li class="flex items-center text-sm text-gray-600 dark:text-gray-400" data-astro-cid-trrswgjs> <svg width="1em" height="1em" viewBox="0 0 256 256" class="w-4 h-4 mr-2 text-blue-500" data-astro-cid-trrswgjs="true" data-icon="ph:check-circle"> <use href="#ai:ph:check-circle"></use> </svg> Project requirements gathering </li><li class="flex items-center text-sm text-gray-600 dark:text-gray-400" data-astro-cid-trrswgjs> <svg width="1em" height="1em" viewBox="0 0 256 256" class="w-4 h-4 mr-2 text-blue-500" data-astro-cid-trrswgjs="true" data-icon="ph:check-circle"> <use href="#ai:ph:check-circle"></use> </svg> Technical feasibility assessment </li><li class="flex items-center text-sm text-gray-600 dark:text-gray-400" data-astro-cid-trrswgjs> <svg width="1em" height="1em" viewBox="0 0 256 256" class="w-4 h-4 mr-2 text-blue-500" data-astro-cid-trrswgjs="true" data-icon="ph:check-circle"> <use href="#ai:ph:check-circle"></use> </svg> Cost estimation </li> </ul> </div><div class="group relative bg-white dark:bg-gray-800 p-6 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-500 transform hover:-translate-y-2 border border-gray-100 dark:border-gray-700" data-aos="fade-up" data-aos-delay="100" data-astro-cid-trrswgjs> <!-- Process Number --> <div class="absolute -top-4 -right-4 w-8 h-8 bg-gradient-to-br from-blue-500 to-purple-500 rounded-full flex items-center justify-center text-white font-bold text-sm" data-astro-cid-trrswgjs> 2 </div> <!-- Icon --> <div class="relative mb-6 inline-block" data-astro-cid-trrswgjs> <div class="absolute inset-0 bg-blue-500/20 dark:bg-blue-500/10 rounded-xl blur-xl group-hover:blur-2xl transition-all duration-300" data-astro-cid-trrswgjs></div> <div class="relative p-4 bg-gradient-to-br from-blue-50 to-purple-50 dark:from-blue-900/50 dark:to-purple-900/50 rounded-xl group-hover:scale-110 transition-transform duration-300" data-astro-cid-trrswgjs> <svg width="1em" height="1em" class="w-8 h-8 text-blue-600 dark:text-blue-400" data-astro-cid-trrswgjs="true" data-icon="ph:pencil-line-bold"> <symbol id="ai:ph:pencil-line-bold" viewBox="0 0 256 256"><path fill="currentColor" d="m230.15 70.54l-44.69-44.68a20 20 0 0 0-28.28 0L33.86 149.17A19.86 19.86 0 0 0 28 163.31V208a20 20 0 0 0 20 20h168a12 12 0 0 0 0-24h-91L230.15 98.83a20 20 0 0 0 0-28.29M136 81l11 11l-71 71l-11-11ZM52 204v-31l15.52 15.51L83 204Zm52-13l-11-11l71-71l11 11Zm88-88l-39-39l18.34-18.34l39 39Z"/></symbol><use href="#ai:ph:pencil-line-bold"></use> </svg> </div> </div> <!-- Content --> <h3 class="text-xl font-bold mb-3 text-gray-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors" data-astro-cid-trrswgjs> Design & Planning </h3> <p class="text-gray-600 dark:text-gray-400 mb-4" data-astro-cid-trrswgjs> Detailed design and production planning phase </p> <!-- Steps --> <ul class="space-y-2" data-astro-cid-trrswgjs> <li class="flex items-center text-sm text-gray-600 dark:text-gray-400" data-astro-cid-trrswgjs> <svg width="1em" height="1em" viewBox="0 0 256 256" class="w-4 h-4 mr-2 text-blue-500" data-astro-cid-trrswgjs="true" data-icon="ph:check-circle"> <use href="#ai:ph:check-circle"></use> </svg> Technical drawings preparation </li><li class="flex items-center text-sm text-gray-600 dark:text-gray-400" data-astro-cid-trrswgjs> <svg width="1em" height="1em" viewBox="0 0 256 256" class="w-4 h-4 mr-2 text-blue-500" data-astro-cid-trrswgjs="true" data-icon="ph:check-circle"> <use href="#ai:ph:check-circle"></use> </svg> Material selection </li><li class="flex items-center text-sm text-gray-600 dark:text-gray-400" data-astro-cid-trrswgjs> <svg width="1em" height="1em" viewBox="0 0 256 256" class="w-4 h-4 mr-2 text-blue-500" data-astro-cid-trrswgjs="true" data-icon="ph:check-circle"> <use href="#ai:ph:check-circle"></use> </svg> Production timeline planning </li> </ul> </div><div class="group relative bg-white dark:bg-gray-800 p-6 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-500 transform hover:-translate-y-2 border border-gray-100 dark:border-gray-700" data-aos="fade-up" data-aos-delay="200" data-astro-cid-trrswgjs> <!-- Process Number --> <div class="absolute -top-4 -right-4 w-8 h-8 bg-gradient-to-br from-blue-500 to-purple-500 rounded-full flex items-center justify-center text-white font-bold text-sm" data-astro-cid-trrswgjs> 3 </div> <!-- Icon --> <div class="relative mb-6 inline-block" data-astro-cid-trrswgjs> <div class="absolute inset-0 bg-blue-500/20 dark:bg-blue-500/10 rounded-xl blur-xl group-hover:blur-2xl transition-all duration-300" data-astro-cid-trrswgjs></div> <div class="relative p-4 bg-gradient-to-br from-blue-50 to-purple-50 dark:from-blue-900/50 dark:to-purple-900/50 rounded-xl group-hover:scale-110 transition-transform duration-300" data-astro-cid-trrswgjs> <svg width="1em" height="1em" viewBox="0 0 256 256" class="w-8 h-8 text-blue-600 dark:text-blue-400" data-astro-cid-trrswgjs="true" data-icon="ph:gear-bold"> <use href="#ai:ph:gear-bold"></use> </svg> </div> </div> <!-- Content --> <h3 class="text-xl font-bold mb-3 text-gray-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors" data-astro-cid-trrswgjs> Fabrication </h3> <p class="text-gray-600 dark:text-gray-400 mb-4" data-astro-cid-trrswgjs> Manufacturing and fabrication process </p> <!-- Steps --> <ul class="space-y-2" data-astro-cid-trrswgjs> <li class="flex items-center text-sm text-gray-600 dark:text-gray-400" data-astro-cid-trrswgjs> <svg width="1em" height="1em" viewBox="0 0 256 256" class="w-4 h-4 mr-2 text-blue-500" data-astro-cid-trrswgjs="true" data-icon="ph:check-circle"> <use href="#ai:ph:check-circle"></use> </svg> Material preparation </li><li class="flex items-center text-sm text-gray-600 dark:text-gray-400" data-astro-cid-trrswgjs> <svg width="1em" height="1em" viewBox="0 0 256 256" class="w-4 h-4 mr-2 text-blue-500" data-astro-cid-trrswgjs="true" data-icon="ph:check-circle"> <use href="#ai:ph:check-circle"></use> </svg> Precision machining </li><li class="flex items-center text-sm text-gray-600 dark:text-gray-400" data-astro-cid-trrswgjs> <svg width="1em" height="1em" viewBox="0 0 256 256" class="w-4 h-4 mr-2 text-blue-500" data-astro-cid-trrswgjs="true" data-icon="ph:check-circle"> <use href="#ai:ph:check-circle"></use> </svg> Quality control checks </li> </ul> </div><div class="group relative bg-white dark:bg-gray-800 p-6 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-500 transform hover:-translate-y-2 border border-gray-100 dark:border-gray-700" data-aos="fade-up" data-aos-delay="300" data-astro-cid-trrswgjs> <!-- Process Number --> <div class="absolute -top-4 -right-4 w-8 h-8 bg-gradient-to-br from-blue-500 to-purple-500 rounded-full flex items-center justify-center text-white font-bold text-sm" data-astro-cid-trrswgjs> 4 </div> <!-- Icon --> <div class="relative mb-6 inline-block" data-astro-cid-trrswgjs> <div class="absolute inset-0 bg-blue-500/20 dark:bg-blue-500/10 rounded-xl blur-xl group-hover:blur-2xl transition-all duration-300" data-astro-cid-trrswgjs></div> <div class="relative p-4 bg-gradient-to-br from-blue-50 to-purple-50 dark:from-blue-900/50 dark:to-purple-900/50 rounded-xl group-hover:scale-110 transition-transform duration-300" data-astro-cid-trrswgjs> <svg width="1em" height="1em" class="w-8 h-8 text-blue-600 dark:text-blue-400" data-astro-cid-trrswgjs="true" data-icon="ph:check-circle-bold"> <symbol id="ai:ph:check-circle-bold" viewBox="0 0 256 256"><path fill="currentColor" d="M176.49 95.51a12 12 0 0 1 0 17l-56 56a12 12 0 0 1-17 0l-24-24a12 12 0 1 1 17-17L112 143l47.51-47.52a12 12 0 0 1 16.98.03M236 128A108 108 0 1 1 128 20a108.12 108.12 0 0 1 108 108m-24 0a84 84 0 1 0-84 84a84.09 84.09 0 0 0 84-84"/></symbol><use href="#ai:ph:check-circle-bold"></use> </svg> </div> </div> <!-- Content --> <h3 class="text-xl font-bold mb-3 text-gray-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors" data-astro-cid-trrswgjs> Quality Assurance </h3> <p class="text-gray-600 dark:text-gray-400 mb-4" data-astro-cid-trrswgjs> Rigorous testing and quality verification </p> <!-- Steps --> <ul class="space-y-2" data-astro-cid-trrswgjs> <li class="flex items-center text-sm text-gray-600 dark:text-gray-400" data-astro-cid-trrswgjs> <svg width="1em" height="1em" viewBox="0 0 256 256" class="w-4 h-4 mr-2 text-blue-500" data-astro-cid-trrswgjs="true" data-icon="ph:check-circle"> <use href="#ai:ph:check-circle"></use> </svg> Dimensional inspection </li><li class="flex items-center text-sm text-gray-600 dark:text-gray-400" data-astro-cid-trrswgjs> <svg width="1em" height="1em" viewBox="0 0 256 256" class="w-4 h-4 mr-2 text-blue-500" data-astro-cid-trrswgjs="true" data-icon="ph:check-circle"> <use href="#ai:ph:check-circle"></use> </svg> Performance testing </li><li class="flex items-center text-sm text-gray-600 dark:text-gray-400" data-astro-cid-trrswgjs> <svg width="1em" height="1em" viewBox="0 0 256 256" class="w-4 h-4 mr-2 text-blue-500" data-astro-cid-trrswgjs="true" data-icon="ph:check-circle"> <use href="#ai:ph:check-circle"></use> </svg> Final quality approval </li> </ul> </div> </div> </div> </div> </section> <section class="relative py-20 overflow-hidden" data-astro-cid-nmcm7ml6> <!-- Background Elements --> <div class="absolute inset-0" data-astro-cid-nmcm7ml6> <div class="absolute inset-0 bg-gradient-to-br from-gray-50 via-white to-gray-50 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900" data-astro-cid-nmcm7ml6></div> <div class="absolute inset-0 bg-[radial-gradient(circle_500px_at_50%_200px,rgba(0,0,0,0.1),transparent)] dark:bg-[radial-gradient(circle_500px_at_50%_200px,rgba(255,255,255,0.1),transparent)]" data-astro-cid-nmcm7ml6></div> </div> <div class="container relative mx-auto px-4" data-astro-cid-nmcm7ml6> <div class="text-center mb-16" data-astro-cid-nmcm7ml6> <h2 class="text-4xl md:text-5xl font-bold mb-4 bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent" data-aos="fade-up" data-astro-cid-nmcm7ml6>
Industries We Serve
</h2> <p class="text-gray-600 dark:text-gray-400 max-w-2xl mx-auto text-lg" data-aos="fade-up" data-aos-delay="100" data-astro-cid-nmcm7ml6>
Delivering specialized solutions across diverse industrial sectors
</p> </div> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8" data-astro-cid-nmcm7ml6> <div class="group relative bg-white/50 dark:bg-gray-800/50 backdrop-blur-sm p-8 rounded-2xl border border-gray-200/50 dark:border-gray-700/50 hover:border-blue-500/50 dark:hover:border-blue-500/30 transform hover:-translate-y-1 transition-all duration-300 hover:shadow-lg hover:shadow-blue-500/5" data-aos="fade-up" data-aos-delay="0" data-astro-cid-nmcm7ml6> <!-- Glow Effect --> <div class="absolute inset-0 bg-gradient-to-br from-blue-500/0 to-purple-500/0 group-hover:from-blue-500/5 group-hover:to-purple-500/5 rounded-2xl transition-colors duration-500" data-astro-cid-nmcm7ml6></div> <!-- Icon Container --> <div class="relative mb-8" data-astro-cid-nmcm7ml6> <div class="absolute inset-0 bg-blue-500/20 dark:bg-blue-500/10 rounded-xl blur-xl group-hover:blur-2xl transition-all duration-300" data-astro-cid-nmcm7ml6></div> <div class="relative p-4 bg-gradient-to-br from-blue-50 to-purple-50 dark:from-blue-900/50 dark:to-purple-900/50 rounded-xl group-hover:scale-110 transition-transform duration-300" data-astro-cid-nmcm7ml6> <svg width="1em" height="1em" class="w-8 h-8 text-blue-600 dark:text-blue-400 transform group-hover:rotate-12 transition-transform duration-300" data-astro-cid-nmcm7ml6="true" data-icon="ph:factory-bold"> <symbol id="ai:ph:factory-bold" viewBox="0 0 256 256"><path fill="currentColor" d="M120 176a12 12 0 0 1-12 12H80a12 12 0 0 1 0-24h28a12 12 0 0 1 12 12m56-12h-28a12 12 0 0 0 0 24h28a12 12 0 0 0 0-24m68 52a12 12 0 0 1-12 12H24a12 12 0 0 1 0-24h4V88a12 12 0 0 1 19.2-9.6L92 112V88a12 12 0 0 1 19.2-9.6l33.33 25l10.61-74.23A20.1 20.1 0 0 1 174.94 12h18.12a20.1 20.1 0 0 1 19.8 17.17l15 105.13c0 .1.12 1.34.12 1.7v68h4A12 12 0 0 1 244 216m-77.57-96.17L172 124h30.16l-12.57-88h-11.18ZM52 204h152v-56h-36a12 12 0 0 1-7.2-2.4l-14.38-10.78h-.06L116 112v24a12 12 0 0 1-19.2 9.6L52 112Z"/></symbol><use href="#ai:ph:factory-bold"></use> </svg> </div> </div> <!-- Content --> <h3 class="text-xl font-bold mb-3 text-gray-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors" data-astro-cid-nmcm7ml6> Manufacturing </h3> <p class="text-gray-600 dark:text-gray-400 mb-6 text-sm leading-relaxed" data-astro-cid-nmcm7ml6> Custom fabrication solutions for manufacturing facilities and production lines </p> <!-- Features --> <ul class="space-y-3" data-astro-cid-nmcm7ml6> <li class="flex items-center text-sm text-gray-600 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-gray-300 transition-colors" data-astro-cid-nmcm7ml6> <svg width="1em" height="1em" viewBox="0 0 256 256" class="w-4 h-4 mr-2 text-blue-500 group-hover:scale-110 transition-transform duration-300" data-astro-cid-nmcm7ml6="true" data-icon="ph:check-circle"> <use href="#ai:ph:check-circle"></use> </svg> Equipment Parts </li><li class="flex items-center text-sm text-gray-600 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-gray-300 transition-colors" data-astro-cid-nmcm7ml6> <svg width="1em" height="1em" viewBox="0 0 256 256" class="w-4 h-4 mr-2 text-blue-500 group-hover:scale-110 transition-transform duration-300" data-astro-cid-nmcm7ml6="true" data-icon="ph:check-circle"> <use href="#ai:ph:check-circle"></use> </svg> Production Line Components </li><li class="flex items-center text-sm text-gray-600 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-gray-300 transition-colors" data-astro-cid-nmcm7ml6> <svg width="1em" height="1em" viewBox="0 0 256 256" class="w-4 h-4 mr-2 text-blue-500 group-hover:scale-110 transition-transform duration-300" data-astro-cid-nmcm7ml6="true" data-icon="ph:check-circle"> <use href="#ai:ph:check-circle"></use> </svg> Custom Machinery </li> </ul> </div><div class="group relative bg-white/50 dark:bg-gray-800/50 backdrop-blur-sm p-8 rounded-2xl border border-gray-200/50 dark:border-gray-700/50 hover:border-blue-500/50 dark:hover:border-blue-500/30 transform hover:-translate-y-1 transition-all duration-300 hover:shadow-lg hover:shadow-blue-500/5" data-aos="fade-up" data-aos-delay="100" data-astro-cid-nmcm7ml6> <!-- Glow Effect --> <div class="absolute inset-0 bg-gradient-to-br from-blue-500/0 to-purple-500/0 group-hover:from-blue-500/5 group-hover:to-purple-500/5 rounded-2xl transition-colors duration-500" data-astro-cid-nmcm7ml6></div> <!-- Icon Container --> <div class="relative mb-8" data-astro-cid-nmcm7ml6> <div class="absolute inset-0 bg-blue-500/20 dark:bg-blue-500/10 rounded-xl blur-xl group-hover:blur-2xl transition-all duration-300" data-astro-cid-nmcm7ml6></div> <div class="relative p-4 bg-gradient-to-br from-blue-50 to-purple-50 dark:from-blue-900/50 dark:to-purple-900/50 rounded-xl group-hover:scale-110 transition-transform duration-300" data-astro-cid-nmcm7ml6> <svg width="1em" height="1em" class="w-8 h-8 text-blue-600 dark:text-blue-400 transform group-hover:rotate-12 transition-transform duration-300" data-astro-cid-nmcm7ml6="true" data-icon="ph:buildings-bold"> <symbol id="ai:ph:buildings-bold" viewBox="0 0 256 256"><path fill="currentColor" d="M240 204h-12V96a20 20 0 0 0-20-20h-36V32a20 20 0 0 0-28.45-18.12l-104 48.54A20.06 20.06 0 0 0 28 80.55V204H16a12 12 0 0 0 0 24h224a12 12 0 0 0 0-24m-36-104v104h-32V100ZM52 83.09l96-44.79V204H52ZM132 112v12a12 12 0 0 1-24 0v-12a12 12 0 0 1 24 0m-40 0v12a12 12 0 0 1-24 0v-12a12 12 0 0 1 24 0m0 52v12a12 12 0 0 1-24 0v-12a12 12 0 0 1 24 0m40 0v12a12 12 0 0 1-24 0v-12a12 12 0 0 1 24 0"/></symbol><use href="#ai:ph:buildings-bold"></use> </svg> </div> </div> <!-- Content --> <h3 class="text-xl font-bold mb-3 text-gray-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors" data-astro-cid-nmcm7ml6> Construction </h3> <p class="text-gray-600 dark:text-gray-400 mb-6 text-sm leading-relaxed" data-astro-cid-nmcm7ml6> Structural steel and hardware solutions for construction projects </p> <!-- Features --> <ul class="space-y-3" data-astro-cid-nmcm7ml6> <li class="flex items-center text-sm text-gray-600 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-gray-300 transition-colors" data-astro-cid-nmcm7ml6> <svg width="1em" height="1em" viewBox="0 0 256 256" class="w-4 h-4 mr-2 text-blue-500 group-hover:scale-110 transition-transform duration-300" data-astro-cid-nmcm7ml6="true" data-icon="ph:check-circle"> <use href="#ai:ph:check-circle"></use> </svg> Structural Steel </li><li class="flex items-center text-sm text-gray-600 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-gray-300 transition-colors" data-astro-cid-nmcm7ml6> <svg width="1em" height="1em" viewBox="0 0 256 256" class="w-4 h-4 mr-2 text-blue-500 group-hover:scale-110 transition-transform duration-300" data-astro-cid-nmcm7ml6="true" data-icon="ph:check-circle"> <use href="#ai:ph:check-circle"></use> </svg> Metal Frameworks </li><li class="flex items-center text-sm text-gray-600 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-gray-300 transition-colors" data-astro-cid-nmcm7ml6> <svg width="1em" height="1em" viewBox="0 0 256 256" class="w-4 h-4 mr-2 text-blue-500 group-hover:scale-110 transition-transform duration-300" data-astro-cid-nmcm7ml6="true" data-icon="ph:check-circle"> <use href="#ai:ph:check-circle"></use> </svg> Building Components </li> </ul> </div><div class="group relative bg-white/50 dark:bg-gray-800/50 backdrop-blur-sm p-8 rounded-2xl border border-gray-200/50 dark:border-gray-700/50 hover:border-blue-500/50 dark:hover:border-blue-500/30 transform hover:-translate-y-1 transition-all duration-300 hover:shadow-lg hover:shadow-blue-500/5" data-aos="fade-up" data-aos-delay="200" data-astro-cid-nmcm7ml6> <!-- Glow Effect --> <div class="absolute inset-0 bg-gradient-to-br from-blue-500/0 to-purple-500/0 group-hover:from-blue-500/5 group-hover:to-purple-500/5 rounded-2xl transition-colors duration-500" data-astro-cid-nmcm7ml6></div> <!-- Icon Container --> <div class="relative mb-8" data-astro-cid-nmcm7ml6> <div class="absolute inset-0 bg-blue-500/20 dark:bg-blue-500/10 rounded-xl blur-xl group-hover:blur-2xl transition-all duration-300" data-astro-cid-nmcm7ml6></div> <div class="relative p-4 bg-gradient-to-br from-blue-50 to-purple-50 dark:from-blue-900/50 dark:to-purple-900/50 rounded-xl group-hover:scale-110 transition-transform duration-300" data-astro-cid-nmcm7ml6> <svg width="1em" height="1em" class="w-8 h-8 text-blue-600 dark:text-blue-400 transform group-hover:rotate-12 transition-transform duration-300" data-astro-cid-nmcm7ml6="true" data-icon="ph:gear-fine-bold"> <symbol id="ai:ph:gear-fine-bold" viewBox="0 0 256 256"><path fill="currentColor" d="M232 116h-12.78A91 91 0 0 0 213 92.79l11.08-6.4a12 12 0 1 0-12-20.78L201 72a93 93 0 0 0-17-17l6.41-11.11a12 12 0 1 0-20.78-12L163.21 43A91 91 0 0 0 140 36.78V24a12 12 0 0 0-24 0v12.78A91 91 0 0 0 92.79 43l-6.4-11.08a12 12 0 0 0-20.78 12L72 55a93 93 0 0 0-17 17l-11.07-6.39a12 12 0 0 0-12 20.78L43 92.79A91 91 0 0 0 36.78 116H24a12 12 0 0 0 0 24h12.78A91 91 0 0 0 43 163.21l-11.08 6.4a12 12 0 1 0 12 20.78L55 184a93 93 0 0 0 17 17l-6.41 11.11a12 12 0 1 0 20.78 12L92.79 213a91 91 0 0 0 23.21 6.22V232a12 12 0 0 0 24 0v-12.78a91 91 0 0 0 23.21-6.22l6.4 11.08a12 12 0 0 0 20.78-12L184 201a93 93 0 0 0 17-17l11.11 6.41a12 12 0 1 0 12-20.78L213 163.21a91 91 0 0 0 6.22-23.21H232a12 12 0 0 0 0-24M128 60a68.1 68.1 0 0 1 66.92 56h-60l-30-52A67.6 67.6 0 0 1 128 60m-68 68a67.9 67.9 0 0 1 24.16-51.93l30 51.93l-30 51.93A67.9 67.9 0 0 1 60 128m68 68a67.6 67.6 0 0 1-23.07-4l30-52h60A68.1 68.1 0 0 1 128 196"/></symbol><use href="#ai:ph:gear-fine-bold"></use> </svg> </div> </div> <!-- Content --> <h3 class="text-xl font-bold mb-3 text-gray-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors" data-astro-cid-nmcm7ml6> Automotive </h3> <p class="text-gray-600 dark:text-gray-400 mb-6 text-sm leading-relaxed" data-astro-cid-nmcm7ml6> Precision components and hardware for automotive applications </p> <!-- Features --> <ul class="space-y-3" data-astro-cid-nmcm7ml6> <li class="flex items-center text-sm text-gray-600 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-gray-300 transition-colors" data-astro-cid-nmcm7ml6> <svg width="1em" height="1em" viewBox="0 0 256 256" class="w-4 h-4 mr-2 text-blue-500 group-hover:scale-110 transition-transform duration-300" data-astro-cid-nmcm7ml6="true" data-icon="ph:check-circle"> <use href="#ai:ph:check-circle"></use> </svg> Custom Parts </li><li class="flex items-center text-sm text-gray-600 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-gray-300 transition-colors" data-astro-cid-nmcm7ml6> <svg width="1em" height="1em" viewBox="0 0 256 256" class="w-4 h-4 mr-2 text-blue-500 group-hover:scale-110 transition-transform duration-300" data-astro-cid-nmcm7ml6="true" data-icon="ph:check-circle"> <use href="#ai:ph:check-circle"></use> </svg> Assembly Components </li><li class="flex items-center text-sm text-gray-600 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-gray-300 transition-colors" data-astro-cid-nmcm7ml6> <svg width="1em" height="1em" viewBox="0 0 256 256" class="w-4 h-4 mr-2 text-blue-500 group-hover:scale-110 transition-transform duration-300" data-astro-cid-nmcm7ml6="true" data-icon="ph:check-circle"> <use href="#ai:ph:check-circle"></use> </svg> Specialized Tools </li> </ul> </div><div class="group relative bg-white/50 dark:bg-gray-800/50 backdrop-blur-sm p-8 rounded-2xl border border-gray-200/50 dark:border-gray-700/50 hover:border-blue-500/50 dark:hover:border-blue-500/30 transform hover:-translate-y-1 transition-all duration-300 hover:shadow-lg hover:shadow-blue-500/5" data-aos="fade-up" data-aos-delay="300" data-astro-cid-nmcm7ml6> <!-- Glow Effect --> <div class="absolute inset-0 bg-gradient-to-br from-blue-500/0 to-purple-500/0 group-hover:from-blue-500/5 group-hover:to-purple-500/5 rounded-2xl transition-colors duration-500" data-astro-cid-nmcm7ml6></div> <!-- Icon Container --> <div class="relative mb-8" data-astro-cid-nmcm7ml6> <div class="absolute inset-0 bg-blue-500/20 dark:bg-blue-500/10 rounded-xl blur-xl group-hover:blur-2xl transition-all duration-300" data-astro-cid-nmcm7ml6></div> <div class="relative p-4 bg-gradient-to-br from-blue-50 to-purple-50 dark:from-blue-900/50 dark:to-purple-900/50 rounded-xl group-hover:scale-110 transition-transform duration-300" data-astro-cid-nmcm7ml6> <svg width="1em" height="1em" class="w-8 h-8 text-blue-600 dark:text-blue-400 transform group-hover:rotate-12 transition-transform duration-300" data-astro-cid-nmcm7ml6="true" data-icon="ph:wind-bold"> <symbol id="ai:ph:wind-bold" viewBox="0 0 256 256"><path fill="currentColor" d="M24 104a12 12 0 0 1 0-24h96a12 12 0 0 0 0-24a15.07 15.07 0 0 0-10.26 4.45a12 12 0 0 1-17-16.9A39.34 39.34 0 0 1 120 32a36 36 0 0 1 0 72Zm184-36a39.34 39.34 0 0 0-27.3 11.55a12 12 0 0 0 17 16.9A15.07 15.07 0 0 1 208 92a12 12 0 0 1 0 24H32a12 12 0 0 0 0 24h176a36 36 0 0 0 0-72m-56 84H40a12 12 0 0 0 0 24h112a12 12 0 0 1 0 24a15.1 15.1 0 0 1-10.27-4.45a12 12 0 1 0-17 16.9A39.34 39.34 0 0 0 152 224a36 36 0 0 0 0-72"/></symbol><use href="#ai:ph:wind-bold"></use> </svg> </div> </div> <!-- Content --> <h3 class="text-xl font-bold mb-3 text-gray-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors" data-astro-cid-nmcm7ml6> Energy </h3> <p class="text-gray-600 dark:text-gray-400 mb-6 text-sm leading-relaxed" data-astro-cid-nmcm7ml6> Fabrication services for energy sector equipment and infrastructure </p> <!-- Features --> <ul class="space-y-3" data-astro-cid-nmcm7ml6> <li class="flex items-center text-sm text-gray-600 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-gray-300 transition-colors" data-astro-cid-nmcm7ml6> <svg width="1em" height="1em" viewBox="0 0 256 256" class="w-4 h-4 mr-2 text-blue-500 group-hover:scale-110 transition-transform duration-300" data-astro-cid-nmcm7ml6="true" data-icon="ph:check-circle"> <use href="#ai:ph:check-circle"></use> </svg> Power Generation </li><li class="flex items-center text-sm text-gray-600 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-gray-300 transition-colors" data-astro-cid-nmcm7ml6> <svg width="1em" height="1em" viewBox="0 0 256 256" class="w-4 h-4 mr-2 text-blue-500 group-hover:scale-110 transition-transform duration-300" data-astro-cid-nmcm7ml6="true" data-icon="ph:check-circle"> <use href="#ai:ph:check-circle"></use> </svg> Distribution Systems </li><li class="flex items-center text-sm text-gray-600 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-gray-300 transition-colors" data-astro-cid-nmcm7ml6> <svg width="1em" height="1em" viewBox="0 0 256 256" class="w-4 h-4 mr-2 text-blue-500 group-hover:scale-110 transition-transform duration-300" data-astro-cid-nmcm7ml6="true" data-icon="ph:check-circle"> <use href="#ai:ph:check-circle"></use> </svg> Renewable Energy </li> </ul> </div> </div> </div> </section> </main> <footer class="mt-auto bg-gray-100 dark:bg-gray-800" data-aos="fade-up" data-aos-duration="800"> <div class="container mx-auto px-4 py-12"> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> <!-- Brand Section --> <div class="col-span-1" data-aos="fade-right" data-aos-delay="100"> <h3 class="text-2xl font-bold text-gray-800 dark:text-white mb-4"> KrrishCo </h3> <p class="text-lg font-medium text-gray-700 dark:text-gray-300 mb-2"> Industrial Excellence </p> </div> <div class="col-span-1" data-aos="fade-up" data-aos-delay="200"> <h4 class="text-lg font-semibold text-gray-800 dark:text-white mb-4"> About Us </h4> <div class="space-y-2"> <p class="text-gray-600 dark:text-gray-400">Your trusted partner in industrial fabrication, material supply, and hardware solutions.</p><p class="text-gray-600 dark:text-gray-400">Established 2008</p><p class="text-gray-600 dark:text-gray-400">Hosur, Tamil Nadu</p> </div> </div><div class="col-span-1" data-aos="fade-up" data-aos-delay="300"> <h4 class="text-lg font-semibold text-gray-800 dark:text-white mb-4"> Quick Links </h4> <ul class="space-y-2"> <li> <a href="/" class="text-gray-600 dark:text-gray-400 hover:text-primary-600 dark:hover:text-primary-400 transition-colors duration-200"> Home </a> </li><li> <a href="/portfolio" class="text-gray-600 dark:text-gray-400 hover:text-primary-600 dark:hover:text-primary-400 transition-colors duration-200"> Portfolio </a> </li><li> <a href="/about" class="text-gray-600 dark:text-gray-400 hover:text-primary-600 dark:hover:text-primary-400 transition-colors duration-200"> About </a> </li><li> <a href="/contact" class="text-gray-600 dark:text-gray-400 hover:text-primary-600 dark:hover:text-primary-400 transition-colors duration-200"> Contact </a> </li> </ul> </div><div class="col-span-1" data-aos="fade-up" data-aos-delay="400"> <h4 class="text-lg font-semibold text-gray-800 dark:text-white mb-4"> Contact Info </h4> <ul class="space-y-4"> <li> <a href="https://maps.google.com/?q=Karapali,Hosur,Tamil+Nadu+635109" target="_blank" rel="noopener noreferrer" class="flex items-start space-x-3 text-gray-600 dark:text-gray-400 hover:text-primary-600 dark:hover:text-primary-400 transition-colors duration-200"> <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path> </svg> <span class="flex-1">Near to Carmel International School, Hosur, Tamil Nadu 635109</span> </a> </li><li> <a href="tel:+91 8667576940" class="flex items-start space-x-3 text-gray-600 dark:text-gray-400 hover:text-primary-600 dark:hover:text-primary-400 transition-colors duration-200"> <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path> </svg> <span class="flex-1">+91 8667576940</span> </a> </li><li> <a href="mailto:info@krrishco.com" class="flex items-start space-x-3 text-gray-600 dark:text-gray-400 hover:text-primary-600 dark:hover:text-primary-400 transition-colors duration-200"> <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path> </svg> <span class="flex-1">info@krrishco.com</span> </a> </li> </ul> </div> </div> <!-- Social Links & Copyright --> <div class="mt-12 pt-8 border-t border-gray-200 dark:border-gray-700"> <div class="flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0"> <div class="flex space-x-4"> <a href="https://twitter.com/krrishco" target="_blank" rel="noopener noreferrer" class="text-gray-600 dark:text-gray-400 hover:text-primary-600 dark:hover:text-primary-400 transition-colors duration-200" aria-label="Follow us on twitter"> <span class="capitalize">twitter</span> </a><a href="https://linkedin.com/company/krrishco" target="_blank" rel="noopener noreferrer" class="text-gray-600 dark:text-gray-400 hover:text-primary-600 dark:hover:text-primary-400 transition-colors duration-200" aria-label="Follow us on linkedin"> <span class="capitalize">linkedin</span> </a><a href="https://facebook.com/krrishco" target="_blank" rel="noopener noreferrer" class="text-gray-600 dark:text-gray-400 hover:text-primary-600 dark:hover:text-primary-400 transition-colors duration-200" aria-label="Follow us on facebook"> <span class="capitalize">facebook</span> </a><a href="https://instagram.com/krrishco" target="_blank" rel="noopener noreferrer" class="text-gray-600 dark:text-gray-400 hover:text-primary-600 dark:hover:text-primary-400 transition-colors duration-200" aria-label="Follow us on instagram"> <span class="capitalize">instagram</span> </a> </div> <p class="text-sm text-gray-600 dark:text-gray-400">
© 2024 KrrishCo. All rights reserved.
</p> </div> </div> </div> </footer> <script type="module" src="/_assets/Layout.astro_astro_type_script_index_0_lang.D9ZydtDn.js"></script> </body> </html>