Initial commit
This commit is contained in:
@@ -0,0 +1,5 @@
|
||||
# GEMINI_API_KEY: Required for Gemini AI API calls.
|
||||
GEMINI_API_KEY="YOUR_GEMINI_API_KEY"
|
||||
|
||||
# APP_URL: The URL where this application is hosted.
|
||||
APP_URL="YOUR_APP_URL"
|
||||
@@ -0,0 +1,8 @@
|
||||
node_modules/
|
||||
build/
|
||||
dist/
|
||||
coverage/
|
||||
.DS_Store
|
||||
*.log
|
||||
.env*
|
||||
!.env.example
|
||||
@@ -0,0 +1,58 @@
|
||||
# Masar NDT - Inspection, NDT & Asset-Integrity Engineering
|
||||
|
||||
Welcome to the official repository of **Masar NDT**, a highly polished, interactive web application presenting specialized Non-Destructive Testing (NDT) services, asset integrity portfolios, and engineering insights.
|
||||
|
||||
This codebase is ready for deployment and local evaluation.
|
||||
|
||||
---
|
||||
|
||||
## 🛠️ Tech Stack & Key Technologies
|
||||
|
||||
- **Frontend Library:** React 18
|
||||
- **Build Tool & Dev Server:** Vite
|
||||
- **Styling:** Tailwind CSS (utility-first, modern responsive grid layouts)
|
||||
- **Animations & Transitions:** Framer Motion (smooth route and interactive menu transitions)
|
||||
- **Icons:** Lucide React
|
||||
- **Language:** TypeScript/JavaScript (clean ES modules)
|
||||
|
||||
---
|
||||
|
||||
## ✨ Key Features Included
|
||||
|
||||
- **Dynamic Services Explorer:** Full technical breakdown of Advanced NDT (Phased Array, TOFD, Tube Inspection), Conventional NDT, and Specialized Asset Integrity assessments.
|
||||
- **Staggered Process Roadmap:** An elegant interactive walkthrough of our end-to-end inspection workflow from pre-planning to field execution and automated reporting.
|
||||
- **Team & Author Portfolios:** High-quality profile presentations of our international leadership team, including Engr. Tariq Al-Ghamdi and Dr. S. K. Al-Qahtani.
|
||||
- **Fully Responsive Navigation:** Optimized mobile layout with a slide-out navigation overlay that overlays perfectly on top of active screens without jumping.
|
||||
- **Quote Request Hub:** Integrated contact gateway allowing clients to prompt custom RFQs directly for critical turnaround programs.
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Getting Started
|
||||
|
||||
Ensure you have [Node.js](https://nodejs.org/) (v18 or higher) installed on your system.
|
||||
|
||||
### 1. Install Dependencies
|
||||
In the root directory of the project, run the following command to download and set up all required NPM packages:
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
|
||||
### 2. Start the Local Development Server
|
||||
Launch the hot-reloading development server to preview and test changes:
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
Once started, open your browser and navigate to the local address displayed in your terminal (usually `http://localhost:3000` or similar).
|
||||
|
||||
### 3. Static Production Build
|
||||
Compile and bundle the production-ready static assets:
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
This will compile the codebase and produce optimized, minified files inside the `/dist` directory, ready to be hosted on any high-performance static server or CDN.
|
||||
|
||||
### 4. Code Quality & Linting
|
||||
Run static analysis checks to verify standard styling and syntax integrity:
|
||||
```bash
|
||||
npm run lint
|
||||
```
|
||||
+13
@@ -0,0 +1,13 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Masar NDT - Inspection, NDT & Asset-Integrity Engineering</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.jsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"name": "Masar NDT",
|
||||
"description": "ISO 9001:2015 Approved Inspection, Non-Destructive Testing (NDT) and Asset Integrity Engineering portal managed by AKMEC Group.",
|
||||
"requestFramePermissions": [],
|
||||
"majorCapabilities": ["MAJOR_CAPABILITY_SERVER_SIDE_GEMINI_API"]
|
||||
}
|
||||
Generated
+4343
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,36 @@
|
||||
{
|
||||
"name": "react-example",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite --port=3000 --host=0.0.0.0",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview",
|
||||
"clean": "rm -rf dist server.js",
|
||||
"lint": "tsc --noEmit"
|
||||
},
|
||||
"dependencies": {
|
||||
"@google/genai": "^2.4.0",
|
||||
"@tailwindcss/vite": "^4.1.14",
|
||||
"@vitejs/plugin-react": "^5.0.4",
|
||||
"dotenv": "^17.2.3",
|
||||
"express": "^4.21.2",
|
||||
"lucide-react": "^0.546.0",
|
||||
"motion": "^12.23.24",
|
||||
"react": "^19.0.1",
|
||||
"react-dom": "^19.0.1",
|
||||
"react-router-dom": "^7.18.1",
|
||||
"vite": "^6.2.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/express": "^4.17.21",
|
||||
"@types/node": "^22.14.0",
|
||||
"autoprefixer": "^10.4.21",
|
||||
"esbuild": "^0.25.0",
|
||||
"tailwindcss": "^4.1.14",
|
||||
"tsx": "^4.21.0",
|
||||
"typescript": "~5.8.2",
|
||||
"vite": "^6.2.3"
|
||||
}
|
||||
}
|
||||
+60
@@ -0,0 +1,60 @@
|
||||
import { useEffect } from "react";
|
||||
import { BrowserRouter, Routes, Route, useLocation } from "react-router-dom";
|
||||
import Navbar from "./components/Navbar";
|
||||
import Footer from "./components/Footer";
|
||||
import Home from "./pages/Home";
|
||||
import About from "./pages/About";
|
||||
import Contact from "./pages/Contact";
|
||||
import ServicesInspection from "./pages/ServicesInspection";
|
||||
import ServicesConventional from "./pages/ServicesConventional";
|
||||
import ServicesAdvanced from "./pages/ServicesAdvanced";
|
||||
import ServicesAssetIntegrity from "./pages/ServicesAssetIntegrity";
|
||||
import ServicesManpower from "./pages/ServicesManpower";
|
||||
import Industries from "./pages/Industries";
|
||||
import Projects from "./pages/Projects";
|
||||
import Gallery from "./pages/Gallery";
|
||||
import NotFound from "./pages/NotFound";
|
||||
function ScrollToTop() {
|
||||
const { pathname } = useLocation();
|
||||
useEffect(() => {
|
||||
window.scrollTo({ top: 0, behavior: "instant" });
|
||||
}, [pathname]);
|
||||
return null;
|
||||
}
|
||||
export default function App() {
|
||||
return <BrowserRouter>
|
||||
<ScrollToTop />
|
||||
<div className="flex flex-col min-h-screen bg-slate-50 font-sans antialiased text-slate-950">
|
||||
<Navbar />
|
||||
<main className="grow">
|
||||
<Routes>
|
||||
<Route path="/" element={<Home />} />
|
||||
<Route path="/about" element={<About />} />
|
||||
<Route path="/contact" element={<Contact />} />
|
||||
|
||||
{
|
||||
/* Service sub-divisions */
|
||||
}
|
||||
<Route path="/services/inspection" element={<ServicesInspection />} />
|
||||
<Route path="/services/conventional-ndt" element={<ServicesConventional />} />
|
||||
<Route path="/services/advanced-ndt" element={<ServicesAdvanced />} />
|
||||
<Route path="/services/asset-integrity" element={<ServicesAssetIntegrity />} />
|
||||
<Route path="/services/manpower" element={<ServicesManpower />} />
|
||||
|
||||
{
|
||||
/* Extra core links */
|
||||
}
|
||||
<Route path="/industries" element={<Industries />} />
|
||||
<Route path="/projects" element={<Projects />} />
|
||||
<Route path="/gallery" element={<Gallery />} />
|
||||
|
||||
{
|
||||
/* Fallback 404 */
|
||||
}
|
||||
<Route path="*" element={<NotFound />} />
|
||||
</Routes>
|
||||
</main>
|
||||
<Footer />
|
||||
</div>
|
||||
</BrowserRouter>;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 644 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 607 KiB |
@@ -0,0 +1,126 @@
|
||||
import { useState } from "react";
|
||||
import { motion, AnimatePresence } from "motion/react";
|
||||
import { Send, CheckCircle2, AlertCircle } from "lucide-react";
|
||||
const initialState = {
|
||||
name: "",
|
||||
email: "",
|
||||
mobile: "",
|
||||
companyName: "",
|
||||
designation: "",
|
||||
message: ""
|
||||
};
|
||||
export default function ContactForm() {
|
||||
const [form, setForm] = useState(initialState);
|
||||
const [status, setStatus] = useState("idle");
|
||||
const [errorMsg, setErrorMsg] = useState("");
|
||||
const handleChange = (e) => {
|
||||
const { name, value } = e.target;
|
||||
setForm((f) => ({ ...f, [name]: value }));
|
||||
};
|
||||
const handleSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
setStatus("sending");
|
||||
setErrorMsg("");
|
||||
try {
|
||||
await new Promise((resolve) => setTimeout(resolve, 1200));
|
||||
setStatus("sent");
|
||||
setForm(initialState);
|
||||
} catch (err) {
|
||||
setStatus("error");
|
||||
setErrorMsg("Something went wrong. Please try again.");
|
||||
}
|
||||
};
|
||||
return <div className="relative w-full">
|
||||
<AnimatePresence mode="wait">
|
||||
{status === "sent" ? <motion.div
|
||||
key="success"
|
||||
initial={{ opacity: 0, scale: 0.98 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
exit={{ opacity: 0, scale: 0.98 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
className="p-8 md:p-12 flex flex-col items-center text-center bg-white border border-slate-100 rounded-2xl shadow-xl"
|
||||
>
|
||||
<div className="w-14 h-14 rounded-full bg-emerald-50 flex items-center justify-center mb-5 border border-emerald-100">
|
||||
<CheckCircle2 className="w-7 h-7 text-emerald-600" />
|
||||
</div>
|
||||
<h3 className="font-heading text-xl text-slate-900 font-extrabold tracking-tight">Message Received</h3>
|
||||
<p className="text-slate-500 mt-3 max-w-md font-light leading-relaxed text-sm">
|
||||
Thank you for reaching out to Masar NDT. Our expert engineering team will review your enquiry and get back to you within 24 hours.
|
||||
</p>
|
||||
<button
|
||||
className="mt-8 text-xs text-white bg-orange-500 hover:bg-orange-600 px-8 py-3.5 font-bold tracking-wider uppercase rounded-xl transition-all shadow-md hover:shadow-lg hover:-translate-y-0.5 duration-200"
|
||||
onClick={() => setStatus("idle")}
|
||||
>
|
||||
Send another message
|
||||
</button>
|
||||
</motion.div> : <motion.form
|
||||
key="form"
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -10 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
onSubmit={handleSubmit}
|
||||
className="p-6 md:p-8 space-y-6 bg-white border border-slate-100 shadow-xl rounded-2xl"
|
||||
>
|
||||
<div className="grid sm:grid-cols-2 gap-6">
|
||||
<Field label="Your Name" name="name" value={form.name} onChange={handleChange} required />
|
||||
<Field label="Email Address" name="email" type="email" value={form.email} onChange={handleChange} required />
|
||||
<Field label="Mobile Number" name="mobile" type="tel" value={form.mobile} onChange={handleChange} />
|
||||
<Field label="Company Name" name="companyName" value={form.companyName} onChange={handleChange} />
|
||||
</div>
|
||||
<Field label="Designation / Job Title" name="designation" value={form.designation} onChange={handleChange} />
|
||||
|
||||
<div className="flex flex-col">
|
||||
<label htmlFor="message" className="text-[11px] font-bold text-slate-700 uppercase tracking-wider mb-2 font-heading">
|
||||
Message / Scope Details *
|
||||
</label>
|
||||
<textarea
|
||||
id="message"
|
||||
name="message"
|
||||
rows={4}
|
||||
value={form.message}
|
||||
onChange={handleChange}
|
||||
required
|
||||
className="w-full bg-slate-50/50 border border-slate-200 hover:border-orange-500/30 rounded-xl px-4 py-3 text-sm text-slate-900 focus:border-orange-500 focus:bg-white focus:ring-2 focus:ring-orange-500/10 outline-none transition-all resize-y font-normal leading-relaxed"
|
||||
placeholder="Describe your NDT, inspection, or technical manpower requirements..."
|
||||
/>
|
||||
</div>
|
||||
|
||||
{status === "error" && <div className="flex items-center gap-2.5 text-sm text-red-600 bg-red-50 border border-red-100 p-4 rounded-xl">
|
||||
<AlertCircle className="w-4 h-4 shrink-0" />
|
||||
<p>{errorMsg}</p>
|
||||
</div>}
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={status === "sending"}
|
||||
className="w-full sm:w-auto flex items-center justify-center gap-2 bg-orange-500 hover:bg-orange-600 text-white font-bold text-xs tracking-wider uppercase px-8 py-4 rounded-xl transition-all duration-200 disabled:opacity-60 shadow-lg hover:shadow-orange-500/10 hover:-translate-y-0.5 active:translate-y-0"
|
||||
>
|
||||
{status === "sending" ? <>
|
||||
<div className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" />
|
||||
<span>Submitting…</span>
|
||||
</> : <>
|
||||
<span>Submit Enquiry</span>
|
||||
<Send className="w-3.5 h-3.5" />
|
||||
</>}
|
||||
</button>
|
||||
</motion.form>}
|
||||
</AnimatePresence>
|
||||
</div>;
|
||||
}
|
||||
function Field({ label, name, value, onChange, type = "text", required = false }) {
|
||||
return <div className="flex flex-col">
|
||||
<label htmlFor={name} className="text-[11px] font-bold text-slate-700 uppercase tracking-wider mb-2 font-heading">
|
||||
{label} {required && <span className="text-orange-500">*</span>}
|
||||
</label>
|
||||
<input
|
||||
id={name}
|
||||
name={name}
|
||||
type={type}
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
required={required}
|
||||
className="w-full bg-slate-50/50 border border-slate-200 hover:border-orange-500/30 rounded-xl px-4 py-3 text-sm text-slate-900 focus:border-orange-500 focus:bg-white focus:ring-2 focus:ring-orange-500/10 outline-none transition-all font-normal"
|
||||
/>
|
||||
</div>;
|
||||
}
|
||||
@@ -0,0 +1,127 @@
|
||||
import { Link } from "react-router-dom";
|
||||
import { serviceCategories, offices, company } from "../data/content";
|
||||
import { Mail, Phone, MapPin, Clock } from "lucide-react";
|
||||
export default function Footer() {
|
||||
return <footer className="bg-slate-950 text-slate-200 mt-24 border-t border-slate-900">
|
||||
{
|
||||
/* Upper Grid Area */
|
||||
}
|
||||
<div className="max-w-7xl mx-auto px-5 md:px-8 py-16 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-12">
|
||||
|
||||
{
|
||||
/* Col 1: Overview */
|
||||
}
|
||||
<div className="space-y-5">
|
||||
<Link to="/" className="flex items-center gap-2">
|
||||
<span className="w-4 h-4 rounded-sm bg-orange-500 shadow-md" />
|
||||
<span className="font-heading font-extrabold uppercase tracking-wider text-white text-lg">
|
||||
Masar<span className="text-orange-500"> NDT</span>
|
||||
</span>
|
||||
</Link>
|
||||
<p className="text-xs leading-relaxed text-slate-400 font-light">
|
||||
{company.intro}
|
||||
</p>
|
||||
<p className="text-[10px] text-slate-500 font-bold uppercase tracking-wider font-heading">
|
||||
A member of {company.legalName}
|
||||
</p>
|
||||
<div className="flex items-center gap-3.5 pt-2">
|
||||
<a href="#" className="p-2.5 bg-slate-900 hover:bg-orange-500 hover:text-white transition-all rounded-lg border border-slate-800" aria-label="LinkedIn">
|
||||
<svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path fillRule="evenodd" d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.779-1.75-1.75s.784-1.75 1.75-1.75 1.75.779 1.75 1.75-.784 1.75-1.75 1.75zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" clipRule="evenodd" />
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#" className="p-2.5 bg-slate-900 hover:bg-orange-500 hover:text-white transition-all rounded-lg border border-slate-800" aria-label="Facebook">
|
||||
<svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path fillRule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clipRule="evenodd" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{
|
||||
/* Col 2: Services */
|
||||
}
|
||||
<div>
|
||||
<h3 className="font-heading text-xs font-bold text-white uppercase tracking-wider mb-5 border-l-2 border-orange-500 pl-3">
|
||||
Services
|
||||
</h3>
|
||||
<ul className="space-y-3 text-xs text-slate-400">
|
||||
{serviceCategories.map((s) => <li key={s.id}>
|
||||
<Link to={s.path} className="hover:text-orange-500 transition-colors duration-200 block py-0.5 font-medium">
|
||||
{s.title}
|
||||
</Link>
|
||||
</li>)}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{
|
||||
/* Col 3: Quick Links */
|
||||
}
|
||||
<div>
|
||||
<h3 className="font-heading text-xs font-bold text-white uppercase tracking-wider mb-5 border-l-2 border-orange-500 pl-3">
|
||||
Quick Links
|
||||
</h3>
|
||||
<ul className="space-y-3 text-xs text-slate-400">
|
||||
<li><Link to="/about" className="hover:text-orange-500 transition-colors block py-0.5 font-medium">About Us</Link></li>
|
||||
<li><Link to="/industries" className="hover:text-orange-500 transition-colors block py-0.5 font-medium">Industries Served</Link></li>
|
||||
<li><Link to="/projects" className="hover:text-orange-500 transition-colors block py-0.5 font-medium">Project Showcase</Link></li>
|
||||
<li><Link to="/gallery" className="hover:text-orange-500 transition-colors block py-0.5 font-medium">Media Gallery</Link></li>
|
||||
<li><Link to="/contact" className="hover:text-orange-500 transition-colors block py-0.5 font-medium">Get in Touch</Link></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{
|
||||
/* Col 4: Contact & Hours */
|
||||
}
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h3 className="font-heading text-xs font-bold text-white uppercase tracking-wider mb-5 border-l-2 border-orange-500 pl-3">
|
||||
Contact Info
|
||||
</h3>
|
||||
<div className="space-y-3.5 text-xs text-slate-400">
|
||||
<div className="flex items-start gap-2.5">
|
||||
<MapPin className="w-4 h-4 text-orange-500 shrink-0 mt-0.5" />
|
||||
<span className="leading-relaxed font-normal">{offices[0].lines.join(", ")}</span>
|
||||
</div>
|
||||
<a href="tel:+966571033252" className="flex items-center gap-2.5 hover:text-orange-500 transition-colors font-semibold">
|
||||
<Phone className="w-4 h-4 text-orange-500 shrink-0" />
|
||||
<span>+966 57 103 3252</span>
|
||||
</a>
|
||||
<a href="mailto:sales@masarndt.com" className="flex items-center gap-2.5 hover:text-orange-500 transition-colors font-medium">
|
||||
<Mail className="w-4 h-4 text-orange-500 shrink-0" />
|
||||
<span className="break-all text-orange-500 font-semibold">{offices[0].email}</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-heading text-xs font-bold text-white uppercase tracking-wider mb-3 border-l-2 border-orange-500 pl-3">
|
||||
Business Hours
|
||||
</h3>
|
||||
<div className="flex items-center gap-2.5 text-xs text-slate-400 font-light">
|
||||
<Clock className="w-4 h-4 text-orange-500 shrink-0" />
|
||||
<span className="font-medium">Sun - Thu: 8:00 AM - 5:00 PM</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{
|
||||
/* Bottom Copyright Area */
|
||||
}
|
||||
<div className="border-t border-slate-900 bg-slate-950 py-8 text-xs text-slate-500">
|
||||
<div className="max-w-7xl mx-auto px-5 md:px-8 flex flex-col sm:flex-row justify-between items-center gap-4 text-center sm:text-left">
|
||||
<span className="font-light">
|
||||
© {(/* @__PURE__ */ new Date()).getFullYear()} Masar NDT. All rights reserved. Managed by AKMEC Group.
|
||||
</span>
|
||||
<div className="flex flex-wrap justify-center gap-4 font-bold text-[10px] uppercase tracking-wider">
|
||||
<span className="text-orange-500">ISO 9001:2015 Approved</span>
|
||||
<span className="text-slate-800">|</span>
|
||||
<Link to="/contact" className="hover:text-orange-400 transition-colors">Privacy Policy</Link>
|
||||
<span className="text-slate-800">|</span>
|
||||
<Link to="/contact" className="hover:text-orange-400 transition-colors">Terms of Use</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>;
|
||||
}
|
||||
@@ -0,0 +1,508 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import { motion, AnimatePresence } from "motion/react";
|
||||
import { ShieldCheck, Cpu, Database, Gauge, RefreshCw, Zap, CheckCircle } from "lucide-react";
|
||||
const assets = [
|
||||
{ id: "tube", name: "Heat Exchanger Tubes", icon: Cpu, description: "Tubular bundles in condensers, boilers, or evaporators." },
|
||||
{ id: "vessel", name: "Pressure Vessels & Shells", icon: Database, description: "Process drums, reactors, and high-pressure tanks." },
|
||||
{ id: "pipe", name: "Process & Utility Piping", icon: Gauge, description: "Cross-country pipelines, dead-legs, and small-bore systems." },
|
||||
{ id: "tank", name: "Storage Tank Bottoms", icon: ShieldCheck, description: "Crude and product storage tanks with potential ground-side corrosion." }
|
||||
];
|
||||
const concerns = [
|
||||
{ id: "thinning", name: "Wall Thinning & Erosion", description: "Internal or external metal loss from corrosive flow." },
|
||||
{ id: "cracks", name: "Surface & Welds Micro-cracks", description: "Fatigue cracking or thermal stress in weld joints." },
|
||||
{ id: "coating", name: "Coating Holiday / Voids", description: "Microscopic pinholes in protective epoxy layers." },
|
||||
{ id: "alloy", name: "Alloy Composition Mix-up", description: "Incorrect filler metal or grade installation." }
|
||||
];
|
||||
const getRecommendation = (assetId, concernId) => {
|
||||
if (assetId === "tube") {
|
||||
if (concernId === "thinning") {
|
||||
return {
|
||||
technique: "Remote Field Eddy Current Testing (RFET) & NFT",
|
||||
techCode: "RFET / NFT / IRIS",
|
||||
standards: ["ASME Section V Article 8", "ASTM E2096", "API 570"],
|
||||
prepRequired: ["Hydro-jetting cleaning (280\u2013560 kg/cm\xB2)", "Dummy probe sizing check", "Drying of tubes"],
|
||||
advantage: "Highly sensitive to wall loss in ferromagnetic boiler and air-cooler tubes.",
|
||||
simulatedSignalName: "Impedance Phase Shift Anomaly",
|
||||
simulatedSignalDesc: "Indicates localized pitting near support baffle.",
|
||||
dangerLevel: "High"
|
||||
};
|
||||
}
|
||||
if (concernId === "cracks") {
|
||||
return {
|
||||
technique: "Eddy Current Testing (ECT)",
|
||||
techCode: "ECT Tube Inspection",
|
||||
standards: ["ASME Section V Article 8", "ASTM E309", "API 510"],
|
||||
prepRequired: ["Internal brushing", "Calibration reference standard match", "Removal of scale"],
|
||||
advantage: "Extremely fast (up to 2m/s) detection of fine longitudinal cracks in non-ferrous tubing.",
|
||||
simulatedSignalName: "Lissajous Loop Phase Deflection",
|
||||
simulatedSignalDesc: "Reveals shallow inner-diameter surface breaking cracks.",
|
||||
dangerLevel: "High"
|
||||
};
|
||||
}
|
||||
if (concernId === "coating") {
|
||||
return {
|
||||
technique: "Specialized Internal Visual & Boroscopic Scan",
|
||||
techCode: "VT-Boroscopy",
|
||||
standards: ["ASME Section V Article 9", "API 510"],
|
||||
prepRequired: ["Total de-watering", "Dual-axis high-definition probe calibration"],
|
||||
advantage: "Visual verification of surface scaling and protective lining discoloration.",
|
||||
simulatedSignalName: "Optical Surface Mapping Anomaly",
|
||||
simulatedSignalDesc: "Visible pinhole lining breach with iron-sulfide deposits.",
|
||||
dangerLevel: "Medium"
|
||||
};
|
||||
}
|
||||
return {
|
||||
technique: "Positive Material Identification (PMI Spectroscopy)",
|
||||
techCode: "XRF / LIBS PMI",
|
||||
standards: ["API RP 578", "ASME Section II"],
|
||||
prepRequired: ["Oxide film sanding", "Surface temperature stability"],
|
||||
advantage: "Direct chemical verification of tube-to-tubesheet alloy grades.",
|
||||
simulatedSignalName: "X-Ray Emission Spectrum Peak",
|
||||
simulatedSignalDesc: "Identified trace elements conforming to Monel 400 specification.",
|
||||
dangerLevel: "Medium"
|
||||
};
|
||||
}
|
||||
if (assetId === "vessel") {
|
||||
if (concernId === "thinning") {
|
||||
return {
|
||||
technique: "Ultrasonic Corrosion Mapping & Thickness Testing",
|
||||
techCode: "UT-Corrosion Mapping",
|
||||
standards: ["ASME Section V Article 5", "API 510", "API 579-1 FFS"],
|
||||
prepRequired: ["Removal of loose rust/peeling paint", "High-temp couplant application", "Grid marking"],
|
||||
advantage: "Provides absolute remaining wall thickness calculations for Fitness-For-Service.",
|
||||
simulatedSignalName: "A-Scan Signal Time-of-Flight Shift",
|
||||
simulatedSignalDesc: "Significant shift in back-wall echo indicates localized wear loop.",
|
||||
dangerLevel: "High"
|
||||
};
|
||||
}
|
||||
if (concernId === "cracks") {
|
||||
return {
|
||||
technique: "Wet Fluorescent Magnetic Particle Testing (WFMT) or PAUT",
|
||||
techCode: "WFMT / Phased Array UT",
|
||||
standards: ["ASME Section V Article 4 & 7", "ASTM E1444", "API 510"],
|
||||
prepRequired: ["Grease degreasing", "UV black-light assembly setup", "Yoke calibration check"],
|
||||
advantage: "Detects extreme fine environmental stress corrosion cracks (SCC) in vessel welds.",
|
||||
simulatedSignalName: "Linear Magnetic Particle Indication",
|
||||
simulatedSignalDesc: "Fine transverse weld toe crack highlighted under UV spectrum.",
|
||||
dangerLevel: "High"
|
||||
};
|
||||
}
|
||||
if (concernId === "coating") {
|
||||
return {
|
||||
technique: "High-Voltage Holiday / Spark Testing",
|
||||
techCode: "HV Holiday Detection",
|
||||
standards: ["NACE SP0188", "ASTM D5162"],
|
||||
prepRequired: ["Lining curing verification", "Ground wire connection to bare steel", "Dry surface state"],
|
||||
advantage: "Uncovers invisible microscopic voids in internal rubber/glass-flake linings.",
|
||||
simulatedSignalName: "Audible Continuous Spark Arc",
|
||||
simulatedSignalDesc: "Voltage drop at 15kV identifies lining puncture.",
|
||||
dangerLevel: "Medium"
|
||||
};
|
||||
}
|
||||
return {
|
||||
technique: "Portable PMI Spectroscopy",
|
||||
techCode: "PMI Verification",
|
||||
standards: ["API RP 578", "ASME Section II"],
|
||||
prepRequired: ["Bare metal contact grinding", "Standards reference calibration"],
|
||||
advantage: "Ensures replacement shell plate or weld filler matches material datasheet specifications.",
|
||||
simulatedSignalName: "Chromium-Nickel Spectral Signal",
|
||||
simulatedSignalDesc: "Conforms to SS316L; matches code verification guidelines.",
|
||||
dangerLevel: "Medium"
|
||||
};
|
||||
}
|
||||
if (assetId === "pipe") {
|
||||
if (concernId === "thinning") {
|
||||
return {
|
||||
technique: "Manual & Automated Ultrasonic Thickness Testing (UT-T)",
|
||||
techCode: "UT Wall-Thickness",
|
||||
standards: ["ASME Section V Article 5", "API 570", "API 574"],
|
||||
prepRequired: ["Couplant brush-on", "Scale scraping of test point", "Zero-block calibration"],
|
||||
advantage: "Fast, precise remaining-life estimations in designated corrosion monitoring locations (CML).",
|
||||
simulatedSignalName: "UT Echo Loss",
|
||||
simulatedSignalDesc: "Reduced wall-thickness detected inside dead-leg bend.",
|
||||
dangerLevel: "High"
|
||||
};
|
||||
}
|
||||
if (concernId === "cracks") {
|
||||
return {
|
||||
technique: "Ultrasonic Shear-Wave / PAUT Inspections",
|
||||
techCode: "PAUT Weld Inspection",
|
||||
standards: ["ASME Section V Article 4", "API 570", "AWS D1.1"],
|
||||
prepRequired: ["Weld crown preparation", "Couplant liquid application", "Wedge scan path design"],
|
||||
advantage: "Volumetric weld-integrity scan; maps complete flaw depth, length, and slope.",
|
||||
simulatedSignalName: "B-Scan Cross-Section Reflection",
|
||||
simulatedSignalDesc: "Lack of root fusion anomaly identified at the 4-inch weld seam.",
|
||||
dangerLevel: "High"
|
||||
};
|
||||
}
|
||||
if (concernId === "coating") {
|
||||
return {
|
||||
technique: "Low-Voltage Sponge / Wet Sponge Holiday Testing",
|
||||
techCode: "LV Holiday Testing",
|
||||
standards: ["ASTM G62", "NACE SP0188"],
|
||||
prepRequired: ["Tap water wetting with surfactant", "Lining surface drying"],
|
||||
advantage: "Non-destructive testing for delicate pipeline paint or thin epoxy liners.",
|
||||
simulatedSignalName: "Audio Signal Indicator Trigger",
|
||||
simulatedSignalDesc: "Resistance drop reveals pinhole breach on the external pipe wrap.",
|
||||
dangerLevel: "Medium"
|
||||
};
|
||||
}
|
||||
return {
|
||||
technique: "Alloy Verification & Weld PMI Check",
|
||||
techCode: "XRF Alloy Analyzer",
|
||||
standards: ["API RP 578", "ASME Section IX"],
|
||||
prepRequired: ["Sanding of paint down to bare steel", "Analyzer sensor clean"],
|
||||
advantage: "Rapid verification of pipe fitting schedules and flange material compatibility.",
|
||||
simulatedSignalName: "Spectral Peak Verification",
|
||||
simulatedSignalDesc: "Conforms to ASTM A106 Grade B carbon steel specification.",
|
||||
dangerLevel: "Low"
|
||||
};
|
||||
}
|
||||
if (concernId === "thinning") {
|
||||
return {
|
||||
technique: "Magnetic Flux Leakage (MFL) Tank Bottom Floor Scanner",
|
||||
techCode: "MFL Scanning",
|
||||
standards: ["API 653 Annex C", "ASME Section V Article 16"],
|
||||
prepRequired: ["Comprehensive tank cleaning & sludge removal", "Floor drying", "Removal of heavy scale"],
|
||||
advantage: "Rapidly scans 100% of tank bottom plates for soil-side or product-side pitting.",
|
||||
simulatedSignalName: "MFL Flux Leakage Peak",
|
||||
simulatedSignalDesc: "High flux escape indicates ~45% bottom plate loss from the bottom soil side.",
|
||||
dangerLevel: "High"
|
||||
};
|
||||
}
|
||||
if (concernId === "cracks") {
|
||||
return {
|
||||
technique: "Vacuum Box Testing & Dye Penetrant (PT)",
|
||||
techCode: "Vacuum Box & PT Weld",
|
||||
standards: ["ASME Section V Article 10", "API 653"],
|
||||
prepRequired: ["Weld slag wire-brushing", "Liquid soap-bubble detergent prep", "Sufficient lighting"],
|
||||
advantage: "Provides 100% immediate bubble verification of potential annular plate weld seam leaks.",
|
||||
simulatedSignalName: "Detergent Bubble Indication",
|
||||
simulatedSignalDesc: "Active bubble train stream points to a fine through-wall pinhole weld leak.",
|
||||
dangerLevel: "High"
|
||||
};
|
||||
}
|
||||
if (concernId === "coating") {
|
||||
return {
|
||||
technique: "High-Voltage Pulse Holiday Testing",
|
||||
techCode: "Pulse Holiday NDT",
|
||||
standards: ["NACE SP0188", "API 652"],
|
||||
prepRequired: ["Coating curing check", "Continuous wire loop ground installation", "Dust wipe down"],
|
||||
advantage: "Safely checks heavy, multi-layer reinforced tank fiber lining systems.",
|
||||
simulatedSignalName: "High-Voltage Arc Spark",
|
||||
simulatedSignalDesc: "Discharge arc points to holiday location in sump lining weld.",
|
||||
dangerLevel: "Medium"
|
||||
};
|
||||
}
|
||||
return {
|
||||
technique: "XRF Alloy Analysis & Hardness Audit",
|
||||
techCode: "PMI Hardness Testing",
|
||||
standards: ["API 653", "ASTM E110"],
|
||||
prepRequired: ["Sanding weld crown flat", "Surface cleaning"],
|
||||
advantage: "Validates mechanical strength properties of heavy structural shell plate welds.",
|
||||
simulatedSignalName: "Brinell Hardness Value Return",
|
||||
simulatedSignalDesc: "185 HBW reading confirms material toughness falls in safe operating zone.",
|
||||
dangerLevel: "Medium"
|
||||
};
|
||||
};
|
||||
export default function InteractiveNdtAdvisor() {
|
||||
const [selectedAsset, setSelectedAsset] = useState("tube");
|
||||
const [selectedConcern, setSelectedConcern] = useState("thinning");
|
||||
const [isScanning, setIsScanning] = useState(false);
|
||||
const [scanProgress, setScanProgress] = useState(0);
|
||||
const [showResult, setShowResult] = useState(true);
|
||||
const [scanComplete, setScanComplete] = useState(false);
|
||||
const recommendation = getRecommendation(selectedAsset, selectedConcern);
|
||||
const handleScan = () => {
|
||||
setIsScanning(true);
|
||||
setScanProgress(0);
|
||||
setScanComplete(false);
|
||||
};
|
||||
useEffect(() => {
|
||||
let interval;
|
||||
if (isScanning) {
|
||||
interval = setInterval(() => {
|
||||
setScanProgress((prev) => {
|
||||
if (prev >= 100) {
|
||||
clearInterval(interval);
|
||||
setIsScanning(false);
|
||||
setScanComplete(true);
|
||||
return 100;
|
||||
}
|
||||
return prev + 4;
|
||||
});
|
||||
}, 50);
|
||||
}
|
||||
return () => clearInterval(interval);
|
||||
}, [isScanning]);
|
||||
const CurrentAssetIcon = assets.find((a) => a.id === selectedAsset)?.icon || Cpu;
|
||||
return <div id="ndt-advisor-widget" className="bg-white border border-slate-200 rounded-3xl shadow-xl overflow-hidden max-w-6xl mx-auto my-6">
|
||||
<div className="grid lg:grid-cols-12">
|
||||
|
||||
{
|
||||
/* Left Side: Control Center (7 cols) */
|
||||
}
|
||||
<div className="lg:col-span-7 p-6 sm:p-10 border-b lg:border-b-0 lg:border-r border-slate-100 flex flex-col justify-between">
|
||||
<div>
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<span className="w-2.5 h-2.5 bg-orange-500 rounded-full animate-pulse" />
|
||||
<span className="font-mono text-[10px] font-bold text-orange-500 uppercase tracking-widest">
|
||||
Interactive Engineering System
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<h3 className="font-heading text-2xl sm:text-3xl font-extrabold text-slate-900 tracking-tight">
|
||||
NDT Strategy & Calibration Configurator
|
||||
</h3>
|
||||
<p className="text-xs text-slate-500 font-light mt-2 max-w-xl leading-relaxed">
|
||||
Select an industrial asset category and primary mechanical concern to generate a compliant code procedure recommendation and execute a simulated instrument calibration scan.
|
||||
</p>
|
||||
|
||||
{
|
||||
/* Asset Selector */
|
||||
}
|
||||
<div className="mt-8">
|
||||
<label className="text-[11px] font-bold text-slate-400 uppercase tracking-wider font-heading block mb-3">
|
||||
1. Select Asset Geometry
|
||||
</label>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
{assets.map((asset) => {
|
||||
const IconComp = asset.icon;
|
||||
const isSelected = selectedAsset === asset.id;
|
||||
return <button
|
||||
key={asset.id}
|
||||
onClick={() => {
|
||||
setSelectedAsset(asset.id);
|
||||
setScanComplete(false);
|
||||
}}
|
||||
className={`p-4 rounded-2xl border text-left transition-all duration-200 ${isSelected ? "bg-slate-900 text-white border-slate-900 shadow-md" : "bg-slate-50 text-slate-700 border-slate-200/60 hover:bg-slate-100/70"}`}
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className={`p-2 rounded-xl ${isSelected ? "bg-orange-500 text-white" : "bg-slate-200/60 text-slate-600"}`}>
|
||||
<IconComp className="w-4 h-4" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs font-bold font-heading">{asset.name}</p>
|
||||
</div>
|
||||
</div>
|
||||
</button>;
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{
|
||||
/* Concern Selector */
|
||||
}
|
||||
<div className="mt-6">
|
||||
<label className="text-[11px] font-bold text-slate-400 uppercase tracking-wider font-heading block mb-3">
|
||||
2. Primary Concern or Damage Loop
|
||||
</label>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
{concerns.map((concern) => {
|
||||
const isSelected = selectedConcern === concern.id;
|
||||
return <button
|
||||
key={concern.id}
|
||||
onClick={() => {
|
||||
setSelectedConcern(concern.id);
|
||||
setScanComplete(false);
|
||||
}}
|
||||
className={`p-4 rounded-2xl border text-left transition-all duration-200 ${isSelected ? "bg-orange-500 text-white border-orange-500 shadow-md" : "bg-slate-50 text-slate-700 border-slate-200/60 hover:bg-slate-100/70"}`}
|
||||
>
|
||||
<h4 className="text-xs font-bold font-heading">{concern.name}</h4>
|
||||
<p className={`text-[10px] mt-1 leading-normal ${isSelected ? "text-orange-100" : "text-slate-400"}`}>
|
||||
{concern.description}
|
||||
</p>
|
||||
</button>;
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{
|
||||
/* Action Footer */
|
||||
}
|
||||
<div className="mt-10 pt-6 border-t border-slate-100 flex flex-col sm:flex-row items-center justify-between gap-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-8 h-8 rounded-full bg-slate-100 flex items-center justify-center text-slate-500 text-xs font-mono font-bold">
|
||||
i
|
||||
</div>
|
||||
<p className="text-[10px] text-slate-400 font-light max-w-xs leading-normal">
|
||||
Recommendations are vetted by our ASNT Level III and API 510/570 planning committees.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={handleScan}
|
||||
disabled={isScanning}
|
||||
className={`w-full sm:w-auto bg-slate-900 text-white hover:bg-slate-800 disabled:opacity-50 font-bold text-xs px-6 py-3.5 rounded-xl uppercase tracking-wider transition-all duration-200 flex items-center justify-center gap-2 shadow-md`}
|
||||
>
|
||||
{isScanning ? <>
|
||||
<RefreshCw className="w-4 h-4 animate-spin text-white" />
|
||||
<span>Scanning Instrument...</span>
|
||||
</> : <>
|
||||
<Zap className="w-4 h-4 text-orange-400 fill-orange-400 animate-pulse" />
|
||||
<span>Calibrate & Test Probe</span>
|
||||
</>}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{
|
||||
/* Right Side: Compliance Sheet & Live Scan Screen (5 cols) */
|
||||
}
|
||||
<div className="lg:col-span-5 p-6 sm:p-10 bg-slate-950 text-white flex flex-col justify-between relative overflow-hidden">
|
||||
|
||||
{
|
||||
/* Subtle tech grid background */
|
||||
}
|
||||
<div className="absolute inset-0 bg-[linear-gradient(to_right,#1e293b_1px,transparent_1px),linear-gradient(to_bottom,#1e293b_1px,transparent_1px)] bg-[size:4rem_4rem] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_50%,#000_70%,transparent_100%)] opacity-20 pointer-events-none" />
|
||||
|
||||
<div className="relative z-10 space-y-6">
|
||||
<div className="flex items-center justify-between border-b border-slate-800 pb-4">
|
||||
<span className="font-mono text-xs font-bold text-orange-400 uppercase tracking-widest">
|
||||
Compliance Spec Sheet
|
||||
</span>
|
||||
<span className={`text-[9px] font-mono uppercase tracking-widest px-2 py-0.5 rounded border ${recommendation.dangerLevel === "High" ? "bg-red-500/10 text-red-400 border-red-500/20" : "bg-amber-500/10 text-amber-400 border-amber-500/20"}`}>
|
||||
Critical Level: {recommendation.dangerLevel}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{
|
||||
/* Simulated Live Scan Screen */
|
||||
}
|
||||
<div className="bg-slate-900/90 border border-slate-800 rounded-2xl p-5 overflow-hidden font-mono relative">
|
||||
<div className="flex items-center justify-between text-[10px] text-slate-400 mb-4 pb-2 border-b border-slate-800/60">
|
||||
<span className="flex items-center gap-1.5">
|
||||
<span className={`w-1.5 h-1.5 rounded-full ${isScanning ? "bg-orange-500 animate-ping" : "bg-green-500"}`} />
|
||||
{isScanning ? "SIGNAL ACQUISITION ACTIVE" : "CALIBRATED & READY"}
|
||||
</span>
|
||||
<span>CH_A: 5.0 MHz</span>
|
||||
</div>
|
||||
|
||||
{
|
||||
/* Scan visualization box */
|
||||
}
|
||||
<div className="h-28 flex items-center justify-center relative bg-slate-950 rounded-lg overflow-hidden border border-slate-800/40">
|
||||
|
||||
{
|
||||
/* Simulated wave or scan line */
|
||||
}
|
||||
<AnimatePresence>
|
||||
{isScanning ? <motion.div
|
||||
key="scanning"
|
||||
className="absolute inset-0 flex flex-col justify-center px-4"
|
||||
>
|
||||
{
|
||||
/* Animated wave path */
|
||||
}
|
||||
<svg viewBox="0 0 300 80" className="w-full h-full text-orange-500 stroke-2 fill-none">
|
||||
<path d={`M 0,40 Q 30,20 60,40 T 120,40 T 180,${40 - scanProgress / 3} T 240,40 T 300,40`} className="animate-pulse" stroke="currentColor" />
|
||||
</svg>
|
||||
{
|
||||
/* Scanning laser sweep */
|
||||
}
|
||||
<motion.div
|
||||
className="absolute top-0 bottom-0 w-0.5 bg-orange-400 shadow-[0_0_10px_#f97316] z-10"
|
||||
animate={{ left: ["0%", "100%", "0%"] }}
|
||||
transition={{ repeat: Infinity, duration: 1.5, ease: "linear" }}
|
||||
/>
|
||||
</motion.div> : scanComplete ? <motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
className="absolute inset-0 bg-orange-500/5 p-3 flex flex-col justify-between"
|
||||
>
|
||||
<div className="flex items-start justify-between text-[9px]">
|
||||
<span className="text-orange-400 font-bold">⚠️ DETECTED ANOMALY</span>
|
||||
<span className="text-slate-400">POS: 184.2 mm</span>
|
||||
</div>
|
||||
|
||||
{
|
||||
/* Anomaly wave signal with a massive spike */
|
||||
}
|
||||
<svg viewBox="0 0 300 60" className="w-full h-10 text-orange-500 stroke-2 fill-none">
|
||||
<path d="M 0,30 L 80,30 L 100,10 L 115,50 L 130,30 L 160,30 L 175,5 L 185,55 L 195,5 L 210,30 L 300,30" stroke="currentColor" />
|
||||
</svg>
|
||||
|
||||
<div className="text-[10px] text-orange-300 leading-normal font-sans bg-orange-500/10 border border-orange-500/20 rounded p-1.5 mt-1">
|
||||
<strong>{recommendation.simulatedSignalName}:</strong> {recommendation.simulatedSignalDesc}
|
||||
</div>
|
||||
</motion.div> : <div className="text-center text-xs text-slate-500 flex flex-col items-center gap-2">
|
||||
<CurrentAssetIcon className="w-8 h-8 text-slate-600 animate-pulse" />
|
||||
<span>Press Calibrate & Test Probe to capture NDT signals</span>
|
||||
</div>}
|
||||
</AnimatePresence>
|
||||
|
||||
{
|
||||
/* Progress Overlay */
|
||||
}
|
||||
{isScanning && <div className="absolute inset-0 bg-slate-950/80 flex flex-col items-center justify-center p-4">
|
||||
<span className="text-xs font-bold text-orange-400 mb-2 font-mono">SWEEPING ASSET... {scanProgress}%</span>
|
||||
<div className="w-44 h-1.5 bg-slate-800 rounded-full overflow-hidden">
|
||||
<div className="h-full bg-orange-500" style={{ width: `${scanProgress}%` }} />
|
||||
</div>
|
||||
</div>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{
|
||||
/* Core Recommendation Specs */
|
||||
}
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<span className="text-[10px] text-slate-400 font-bold uppercase tracking-wider block">Recommended NDT Technique</span>
|
||||
<p className="text-sm font-bold text-white mt-1 flex items-center gap-1.5">
|
||||
<CheckCircle className="w-4.5 h-4.5 text-orange-500 shrink-0" />
|
||||
{recommendation.technique}
|
||||
</p>
|
||||
<p className="text-xs text-slate-400 font-light mt-1">{recommendation.advantage}</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4 pt-2 border-t border-slate-900">
|
||||
<div>
|
||||
<span className="text-[10px] text-slate-400 font-bold uppercase tracking-wider block">Procedural Standards</span>
|
||||
<div className="mt-1 flex flex-col gap-1">
|
||||
{recommendation.standards.map((s) => <span key={s} className="font-mono text-[10px] text-orange-300 block bg-orange-500/5 py-0.5 px-1.5 rounded border border-orange-500/10 w-fit">
|
||||
{s}
|
||||
</span>)}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-[10px] text-slate-400 font-bold uppercase tracking-wider block">Calibration Code</span>
|
||||
<span className="font-mono text-xs font-bold text-slate-200 mt-1 block">
|
||||
{recommendation.techCode}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{
|
||||
/* Prep Work Required */
|
||||
}
|
||||
<div className="pt-4 border-t border-slate-900">
|
||||
<span className="text-[10px] text-slate-400 font-bold uppercase tracking-wider block">Mandatory Field Preparations</span>
|
||||
<ul className="mt-2 space-y-1.5 text-xs text-slate-300 font-light list-none">
|
||||
{recommendation.prepRequired.map((p, idx) => <li key={idx} className="flex items-start gap-2">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-orange-500 mt-1.5 shrink-0" />
|
||||
<span>{p}</span>
|
||||
</li>)}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-8 pt-4 border-t border-slate-800 text-center relative z-10">
|
||||
<p className="text-[11px] text-slate-400 font-light">
|
||||
Need custom procedures drafted for this asset configuration?
|
||||
</p>
|
||||
<a
|
||||
href="/contact"
|
||||
className="inline-flex items-center gap-1.5 text-[11px] font-bold text-orange-400 hover:text-orange-300 uppercase tracking-wider mt-2 group"
|
||||
>
|
||||
<span>Consult Our Level III Engineers</span>
|
||||
<span className="group-hover:translate-x-1 transition-transform">→</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>;
|
||||
}
|
||||
@@ -0,0 +1,74 @@
|
||||
import { motion } from "motion/react";
|
||||
import { Check, X, Info } from "lucide-react";
|
||||
export default function MethodCard({ method }) {
|
||||
return <motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: "-100px" }}
|
||||
transition={{ duration: 0.5, ease: "easeOut" }}
|
||||
className="bg-white border border-slate-100 p-6 md:p-8 rounded-2xl shadow-lg hover:shadow-xl hover:border-orange-500/20 transition-all duration-300 flex flex-col relative overflow-hidden group hover:-translate-y-1"
|
||||
>
|
||||
{
|
||||
/* Decorative accent top-line */
|
||||
}
|
||||
<div className="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-orange-500/10 via-orange-500 to-orange-500/10 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
|
||||
|
||||
{
|
||||
/* Code Badge */
|
||||
}
|
||||
<span className="absolute top-6 right-6 font-mono text-xs font-semibold text-slate-500 bg-slate-50 px-3 py-1 rounded-full border border-slate-100 tracking-wider">
|
||||
METHOD {method.code}
|
||||
</span>
|
||||
|
||||
<h3 className="font-heading text-xl md:text-2xl font-bold text-slate-900 group-hover:text-orange-500 transition-colors duration-200 mt-2 pr-28">
|
||||
{method.name}
|
||||
</h3>
|
||||
<p className="mt-4 text-slate-500 text-sm leading-relaxed font-light">
|
||||
{method.description}
|
||||
</p>
|
||||
|
||||
{method.note && <div className="mt-5 flex gap-3.5 items-start bg-amber-50/40 border-l-4 border-amber-500 p-4 rounded-xl">
|
||||
<Info className="w-4 h-4 text-amber-600 shrink-0 mt-0.5" />
|
||||
<p className="text-xs text-amber-800 leading-relaxed font-normal">
|
||||
{method.note}
|
||||
</p>
|
||||
</div>}
|
||||
|
||||
{(method.advantages || method.limitations) && <div className="grid sm:grid-cols-2 gap-6 mt-6 pt-5 border-t border-slate-50">
|
||||
{method.advantages && <div>
|
||||
<p className="font-heading text-xs font-bold tracking-wider text-slate-900 mb-3.5 uppercase">Advantages</p>
|
||||
<ul className="space-y-2.5">
|
||||
{method.advantages.map((a) => <li key={a} className="text-xs text-slate-600 flex gap-2.5 items-start font-light">
|
||||
<span className="w-5 h-5 rounded-full bg-emerald-50 text-emerald-600 flex items-center justify-center shrink-0 mt-0.5 border border-emerald-100/50">
|
||||
<Check className="w-3 h-3" />
|
||||
</span>
|
||||
<span>{a}</span>
|
||||
</li>)}
|
||||
</ul>
|
||||
</div>}
|
||||
{method.limitations && <div>
|
||||
<p className="font-heading text-xs font-bold tracking-wider text-slate-500 mb-3.5 uppercase">Limitations</p>
|
||||
<ul className="space-y-2.5">
|
||||
{method.limitations.map((l) => <li key={l} className="text-xs text-slate-500 flex gap-2.5 items-start font-light">
|
||||
<span className="w-5 h-5 rounded-full bg-rose-50 text-rose-500 flex items-center justify-center shrink-0 mt-0.5 border border-rose-100/50">
|
||||
<X className="w-3 h-3" />
|
||||
</span>
|
||||
<span>{l}</span>
|
||||
</li>)}
|
||||
</ul>
|
||||
</div>}
|
||||
</div>}
|
||||
|
||||
{method.uses && <div className="mt-6 pt-5 border-t border-slate-50">
|
||||
<p className="font-heading text-[10px] font-bold tracking-wider text-slate-800 mb-3 uppercase">Key Applications</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{method.uses.map((u) => <span
|
||||
key={u}
|
||||
className="text-xs border border-slate-200 bg-slate-50 text-slate-600 px-3.5 py-1.5 rounded-lg hover:border-orange-500/40 hover:text-orange-500 transition-all duration-200 cursor-default"
|
||||
>
|
||||
{u}
|
||||
</span>)}
|
||||
</div>
|
||||
</div>}
|
||||
</motion.div>;
|
||||
}
|
||||
@@ -0,0 +1,195 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import { NavLink, Link, useLocation } from "react-router-dom";
|
||||
import { motion, AnimatePresence } from "motion/react";
|
||||
import { ChevronDown, Menu, X, Phone, Mail, MapPin, ArrowRight } from "lucide-react";
|
||||
import { serviceCategories } from "../data/content";
|
||||
const navLinkClass = ({ isActive }) => `relative text-sm font-semibold tracking-wide py-1.5 transition-all duration-200 ${isActive ? "text-orange-500 font-bold border-b-2 border-orange-500" : "text-slate-600 hover:text-orange-500"}`;
|
||||
export default function Navbar() {
|
||||
const [open, setOpen] = useState(false);
|
||||
const [servicesOpen, setServicesOpen] = useState(false);
|
||||
const [isScrolled, setIsScrolled] = useState(false);
|
||||
const location = useLocation();
|
||||
useEffect(() => {
|
||||
const handleScroll = () => {
|
||||
setIsScrolled(window.scrollY > 40);
|
||||
};
|
||||
window.addEventListener("scroll", handleScroll);
|
||||
return () => window.removeEventListener("scroll", handleScroll);
|
||||
}, []);
|
||||
useEffect(() => {
|
||||
setOpen(false);
|
||||
setServicesOpen(false);
|
||||
}, [location]);
|
||||
return <header className="w-full z-50 flex flex-col transition-all duration-300">
|
||||
{
|
||||
/* Top bar with contact info */
|
||||
}
|
||||
<div
|
||||
className={`bg-slate-950 border-b border-slate-800 text-slate-300 py-2.5 px-5 md:px-8 transition-all duration-300 ${isScrolled ? "h-0 py-0 overflow-hidden opacity-0 border-none" : "h-auto opacity-100"}`}
|
||||
>
|
||||
<div className="max-w-7xl mx-auto flex flex-col sm:flex-row justify-between items-center gap-3">
|
||||
<div className="flex flex-wrap justify-center sm:justify-start items-center gap-5 text-xs">
|
||||
<a href="tel:+966571033252" className="flex items-center gap-2 hover:text-orange-500 transition-colors font-medium">
|
||||
<Phone className="w-3.5 h-3.5 text-orange-500 shrink-0" />
|
||||
<span>+966 57 103 3252</span>
|
||||
</a>
|
||||
<a href="mailto:sales@masarndt.com" className="flex items-center gap-2 hover:text-orange-500 transition-colors font-medium">
|
||||
<Mail className="w-3.5 h-3.5 text-orange-500 shrink-0" />
|
||||
<span>sales@masarndt.com</span>
|
||||
</a>
|
||||
<span className="flex items-center gap-2 text-slate-400">
|
||||
<MapPin className="w-3.5 h-3.5 text-orange-500 shrink-0" />
|
||||
<span>Jubail, Saudi Arabia</span>
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-4 text-xs font-medium">
|
||||
<span className="font-bold text-white uppercase text-[9px] tracking-wider bg-slate-900 border border-slate-800 px-2 py-0.5 rounded">
|
||||
ISO 9001:2015 Approved
|
||||
</span>
|
||||
<span className="text-slate-800">|</span>
|
||||
<Link to="/contact" className="text-slate-400 hover:text-orange-500 transition-colors">Support</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{
|
||||
/* Main navigation bar (Sticky) */
|
||||
}
|
||||
<div
|
||||
className={`w-full bg-white transition-all duration-300 ${isScrolled ? "fixed top-0 shadow-lg border-b border-slate-100 py-3.5" : "relative py-5 border-b border-slate-100"}`}
|
||||
>
|
||||
<div className="max-w-7xl mx-auto px-5 md:px-8 flex items-center justify-between">
|
||||
{
|
||||
/* Brand Logo */
|
||||
}
|
||||
<Link to="/" className="flex items-center gap-2.5 shrink-0">
|
||||
<span className="w-5 h-5 rounded bg-orange-500 shadow-md flex items-center justify-center font-bold text-white text-[10px]" aria-hidden="true">M</span>
|
||||
<span className="font-heading font-extrabold uppercase tracking-wide text-slate-900 text-xl sm:text-2xl">
|
||||
Masar<span className="text-orange-500 font-black"> NDT</span>
|
||||
</span>
|
||||
</Link>
|
||||
|
||||
{
|
||||
/* Desktop Navigation Links */
|
||||
}
|
||||
<nav className="hidden lg:flex items-center gap-8">
|
||||
<NavLink to="/" className={navLinkClass} end>Home</NavLink>
|
||||
<NavLink to="/about" className={navLinkClass}>About</NavLink>
|
||||
|
||||
{
|
||||
/* Services Dropdown */
|
||||
}
|
||||
<div
|
||||
className="relative"
|
||||
onMouseEnter={() => setServicesOpen(true)}
|
||||
onMouseLeave={() => setServicesOpen(false)}
|
||||
>
|
||||
<button
|
||||
className="text-sm font-semibold tracking-wide text-slate-600 hover:text-orange-500 flex items-center gap-1 transition-colors py-1.5"
|
||||
onClick={() => setServicesOpen(!servicesOpen)}
|
||||
>
|
||||
Services
|
||||
<ChevronDown className={`w-4 h-4 transition-transform duration-200 ${servicesOpen ? "rotate-180 text-orange-500" : "text-slate-400"}`} />
|
||||
</button>
|
||||
|
||||
<AnimatePresence>
|
||||
{servicesOpen && <motion.div
|
||||
initial={{ opacity: 0, y: 10, scale: 0.98 }}
|
||||
animate={{ opacity: 1, y: 0, scale: 1 }}
|
||||
exit={{ opacity: 0, y: 10, scale: 0.98 }}
|
||||
transition={{ duration: 0.15 }}
|
||||
className="absolute left-0 top-full mt-2 w-80 bg-white border border-slate-100 shadow-xl p-2 rounded-xl z-50"
|
||||
>
|
||||
<div className="grid gap-1">
|
||||
{serviceCategories.map((s) => <NavLink
|
||||
key={s.id}
|
||||
to={s.path}
|
||||
className={({ isActive }) => `group flex flex-col p-3 rounded-lg transition-all duration-200 ${isActive ? "bg-slate-50 border-l-4 border-orange-500" : "hover:bg-slate-50"}`}
|
||||
onClick={() => setServicesOpen(false)}
|
||||
>
|
||||
<span className="text-[9px] font-bold text-orange-500 uppercase tracking-widest">{s.tag}</span>
|
||||
<span className="text-sm font-bold text-slate-900 group-hover:text-orange-500 transition-colors flex items-center mt-0.5 font-heading">
|
||||
{s.title}
|
||||
<ArrowRight className="w-4 h-4 opacity-0 -translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all ml-auto text-orange-500" />
|
||||
</span>
|
||||
</NavLink>)}
|
||||
</div>
|
||||
</motion.div>}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
|
||||
<NavLink to="/industries" className={navLinkClass}>Industries</NavLink>
|
||||
<NavLink to="/projects" className={navLinkClass}>Projects</NavLink>
|
||||
<NavLink to="/gallery" className={navLinkClass}>Gallery</NavLink>
|
||||
<NavLink to="/contact" className={navLinkClass}>Contact</NavLink>
|
||||
</nav>
|
||||
|
||||
{
|
||||
/* Right Action Button & Mobile Trigger */
|
||||
}
|
||||
<div className="flex items-center gap-4">
|
||||
<Link
|
||||
to="/contact"
|
||||
className="hidden sm:inline-block bg-orange-500 hover:bg-orange-600 text-white font-bold text-xs px-6 py-3.5 rounded-xl tracking-wider uppercase shadow-md hover:shadow-orange-500/10 hover:-translate-y-0.5 active:translate-y-0 transition-all duration-200"
|
||||
>
|
||||
Get a Quote
|
||||
</Link>
|
||||
|
||||
<button
|
||||
className="lg:hidden p-2.5 text-slate-950 hover:text-orange-500 border border-slate-100 rounded-xl transition-colors"
|
||||
onClick={() => setOpen(!open)}
|
||||
aria-label="Toggle navigation menu"
|
||||
aria-expanded={open}
|
||||
>
|
||||
{open ? <X className="w-5 h-5" /> : <Menu className="w-5 h-5" />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{
|
||||
/* Mobile Drawer Menu */
|
||||
}
|
||||
<AnimatePresence>
|
||||
{open && <motion.div
|
||||
initial={{ opacity: 0, height: 0 }}
|
||||
animate={{ opacity: 1, height: "auto" }}
|
||||
exit={{ opacity: 0, height: 0 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
className="lg:hidden w-full bg-white border-b border-slate-100 px-6 py-6 flex flex-col gap-4 overflow-y-auto max-h-[calc(100vh-80px)] z-40 absolute top-full left-0 shadow-2xl"
|
||||
>
|
||||
<NavLink to="/" className="text-sm font-bold text-slate-800 hover:text-orange-500 font-heading" end onClick={() => setOpen(false)}>Home</NavLink>
|
||||
<NavLink to="/about" className="text-sm font-bold text-slate-800 hover:text-orange-500 font-heading" onClick={() => setOpen(false)}>About</NavLink>
|
||||
|
||||
<div className="h-px bg-slate-100 my-1" />
|
||||
|
||||
<p className="text-[10px] font-bold text-orange-500 uppercase tracking-widest font-heading">Services</p>
|
||||
<div className="grid gap-2 pl-3 border-l-2 border-orange-500 ml-1">
|
||||
{serviceCategories.map((s) => <NavLink
|
||||
key={s.id}
|
||||
to={s.path}
|
||||
className={({ isActive }) => `text-sm font-bold transition-colors py-1 font-heading ${isActive ? "text-orange-500" : "text-slate-800 hover:text-orange-500"}`}
|
||||
onClick={() => setOpen(false)}
|
||||
>
|
||||
{s.title}
|
||||
</NavLink>)}
|
||||
</div>
|
||||
|
||||
<div className="h-px bg-slate-100 my-1" />
|
||||
|
||||
<NavLink to="/industries" className="text-sm font-bold text-slate-800 hover:text-orange-500 font-heading" onClick={() => setOpen(false)}>Industries</NavLink>
|
||||
<NavLink to="/projects" className="text-sm font-bold text-slate-800 hover:text-orange-500 font-heading" onClick={() => setOpen(false)}>Projects</NavLink>
|
||||
<NavLink to="/gallery" className="text-sm font-bold text-slate-800 hover:text-orange-500 font-heading" onClick={() => setOpen(false)}>Gallery</NavLink>
|
||||
<NavLink to="/contact" className="text-sm font-bold text-slate-800 hover:text-orange-500 font-heading" onClick={() => setOpen(false)}>Contact</NavLink>
|
||||
|
||||
<Link
|
||||
to="/contact"
|
||||
className="mt-4 text-center bg-orange-500 hover:bg-orange-600 text-white font-bold text-xs py-4 rounded-xl tracking-wider uppercase shadow-md transition-all font-heading"
|
||||
onClick={() => setOpen(false)}
|
||||
>
|
||||
Get a Quote
|
||||
</Link>
|
||||
</motion.div>}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
</header>;
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
import { motion } from "motion/react";
|
||||
export default function SectionHeader({ tag, title, description, align = "left", dark = false }) {
|
||||
const isCenter = align === "center";
|
||||
return <motion.div
|
||||
initial={{ opacity: 0, y: 15 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: "-100px" }}
|
||||
transition={{ duration: 0.5, ease: "easeOut" }}
|
||||
className={`max-w-4xl ${isCenter ? "mx-auto text-center flex flex-col items-center" : ""} mb-12`}
|
||||
>
|
||||
{tag && <p className="font-mono text-[10px] font-bold tracking-widest text-orange-500 mb-3 flex items-center gap-2 uppercase">
|
||||
<span className="w-4 h-px bg-orange-500/40 inline-block" />
|
||||
{tag}
|
||||
</p>}
|
||||
<h2 className={`font-heading text-3xl md:text-4xl lg:text-5xl font-extrabold tracking-tight leading-[1.1] ${dark ? "text-white" : "text-slate-900"}`}>
|
||||
{title}
|
||||
</h2>
|
||||
{description && <p className={`mt-4 leading-relaxed text-sm md:text-base max-w-2xl font-light ${dark ? "text-slate-300" : "text-slate-500"}`}>
|
||||
{description}
|
||||
</p>}
|
||||
</motion.div>;
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
import { Link } from "react-router-dom";
|
||||
import { motion } from "motion/react";
|
||||
import { ArrowRight, ScanSearch, Zap, Activity, DatabaseZap, UserCheck } from "lucide-react";
|
||||
const containerVariants = {
|
||||
hidden: { opacity: 0 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
transition: {
|
||||
staggerChildren: 0.08
|
||||
}
|
||||
}
|
||||
};
|
||||
const itemVariants = {
|
||||
hidden: { opacity: 0, y: 20 },
|
||||
visible: { opacity: 1, y: 0, transition: { duration: 0.5, ease: "easeOut" } }
|
||||
};
|
||||
const serviceIcons = [ScanSearch, Zap, Activity, DatabaseZap, UserCheck];
|
||||
export default function ServiceCategoryGrid({ categories }) {
|
||||
return <motion.div
|
||||
variants={containerVariants}
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={{ once: true, margin: "-50px" }}
|
||||
className="grid sm:grid-cols-2 lg:grid-cols-3 gap-8"
|
||||
>
|
||||
{categories.map((s, idx) => {
|
||||
const Icon = serviceIcons[idx] || ScanSearch;
|
||||
return <motion.div key={s.id} variants={itemVariants}>
|
||||
<Link
|
||||
to={s.path}
|
||||
className="group block bg-white border border-slate-100 p-8 flex flex-col justify-between min-h-[300px] rounded-2xl transition-all duration-300 relative overflow-hidden shadow-md hover:shadow-xl hover:border-orange-500/20 hover:-translate-y-1"
|
||||
>
|
||||
{
|
||||
/* Top Accent line */
|
||||
}
|
||||
<div className="absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-orange-500/20 via-orange-500 to-orange-500/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
|
||||
|
||||
<div className="relative z-10">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="w-12 h-12 rounded-xl bg-orange-500/10 text-orange-600 flex items-center justify-center shadow-sm group-hover:scale-110 group-hover:rotate-3 transition-all duration-300">
|
||||
<Icon className="w-5 h-5" />
|
||||
</div>
|
||||
<p className="font-mono text-[10px] font-bold tracking-wider text-orange-500 bg-orange-500/5 px-2.5 py-1 rounded-full">{s.tag}</p>
|
||||
</div>
|
||||
|
||||
<h3 className="font-heading text-xl font-bold mt-6 text-slate-900 group-hover:text-orange-500 transition-colors duration-300">
|
||||
{s.title}
|
||||
</h3>
|
||||
<p className="text-sm text-slate-500 group-hover:text-slate-600 mt-3 leading-relaxed font-light transition-colors duration-300">
|
||||
{s.summary}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="mt-8 pt-5 border-t border-slate-50 flex items-center justify-between relative z-10">
|
||||
<span className="text-xs font-bold text-slate-800 group-hover:text-orange-500 transition-colors duration-200 uppercase tracking-wider">
|
||||
View division scope
|
||||
</span>
|
||||
<div className="w-8 h-8 rounded-full bg-slate-50 text-slate-700 flex items-center justify-center group-hover:bg-orange-500 group-hover:text-white transition-all duration-300 shadow-sm">
|
||||
<ArrowRight className="w-4 h-4 transition-transform duration-200 group-hover:translate-x-0.5" />
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
</motion.div>;
|
||||
})}
|
||||
</motion.div>;
|
||||
}
|
||||
@@ -0,0 +1,669 @@
|
||||
export const company = {
|
||||
name: "Masar NDT",
|
||||
legalName: "AKMEC Group",
|
||||
tagline: "Inspection. Integrity. Assurance.",
|
||||
intro: "Masar NDT (AKMEC Group) is an ISO 9001:2015 certified inspection, NDT and asset-integrity engineering organisation, delivering accurate, first-time-right results across the Kingdom of Saudi Arabia and India.",
|
||||
mission: "We strive to render services reflective of our efficiency and are committed to providing superior quality and results.",
|
||||
vision: "We aim to provide our clients with outstanding service, value, and quality \u2014 through total commitment to exceeding client expectations, personal attention, dedication, and hard work.",
|
||||
about: [
|
||||
"AKMEC GROUP is an ISO 9001:2015 certified company and a trusted name for vigorous, sustainable, and tailored facilities-management and technical services to public and private organisations, creating value through expertise since 2021.",
|
||||
"AKMEC is a leader in Inspection, NDT, Advanced NDT, Trading, Filtration Systems, Construction and Facility Management, translating professionalism and excellence into every engagement.",
|
||||
"Whatever the challenge \u2014 difficult access locations, large industrial sites, Upstream, Downstream, Midstream, Marine, Energy & Power, laboratories, plants and factories \u2014 Masar NDT brings the engineers, inspectors, field technicians, trade professionals and technology to get the job done right."
|
||||
]
|
||||
};
|
||||
export const offices = [
|
||||
{
|
||||
label: "Saudi Arabia Office",
|
||||
lines: [
|
||||
"Building No. 4258, Al Safat District,",
|
||||
"Al Jubail \u2013 35514, Kingdom of Saudi Arabia"
|
||||
],
|
||||
mobile: "+966 57 103 3252",
|
||||
email: "sales@masarndt.com",
|
||||
website: "www.masarndt.com"
|
||||
},
|
||||
{
|
||||
label: "India Office",
|
||||
lines: ["AKMEC Group"],
|
||||
mobile: null,
|
||||
email: "inquiry@akmecgroup.com",
|
||||
website: "www.akmecgroup.com"
|
||||
}
|
||||
];
|
||||
export const stats = [
|
||||
{ value: "150+", label: "VT Level II / III Inspectors" },
|
||||
{ value: "400+", label: "API Certified Inspectors" },
|
||||
{ value: "90,000+", label: "Manpower Resume Database" },
|
||||
{ value: "ISO 9001:2015", label: "Certified Organisation" }
|
||||
];
|
||||
export const serviceCategories = [
|
||||
{
|
||||
id: "inspection",
|
||||
tag: "Inspection",
|
||||
title: "Inspection & Audit",
|
||||
summary: "Shutdown, turnaround inspection and planning \u2014 a one-stop shop that reduces cost and time spent on outside resources.",
|
||||
path: "/services/inspection"
|
||||
},
|
||||
{
|
||||
id: "conventional-ndt",
|
||||
tag: "Conventional NDT",
|
||||
title: "Conventional NDT",
|
||||
summary: "Penetrant, Magnetic Particle, Ultrasonic, Holiday, Ferrite, Visual, Hardness, Vacuum Box testing and metallography.",
|
||||
path: "/services/conventional-ndt"
|
||||
},
|
||||
{
|
||||
id: "advanced-ndt",
|
||||
tag: "Advanced NDT",
|
||||
title: "Advanced NDT",
|
||||
summary: "PMI, Eddy Current, Remote Field, Magnetic Flux Leakage, IRIS, Boroscopic Inspection and Thermography.",
|
||||
path: "/services/advanced-ndt"
|
||||
},
|
||||
{
|
||||
id: "asset-integrity",
|
||||
tag: "Asset Integrity",
|
||||
title: "Asset Integrity Engineering",
|
||||
summary: "Corrosion loop development, RBI studies, fitness-for-service, RCA/RLA and full inspection-data management.",
|
||||
path: "/services/asset-integrity"
|
||||
},
|
||||
{
|
||||
id: "manpower",
|
||||
tag: "Manpower",
|
||||
title: "Manpower & Outsourcing",
|
||||
summary: "Qualified, well-trained technical and non-technical manpower for shutdowns, EPC, O&M and turnkey projects.",
|
||||
path: "/services/manpower"
|
||||
}
|
||||
];
|
||||
export const inspection = {
|
||||
title: "Inspection & Audit",
|
||||
tag: "Inspection & Audit",
|
||||
lead: "AKMEC is an ISO 9001:2015 approved certified inspection organisation. We deliver accurate, reliable results the first time, every time \u2014 improving productivity, saving time and lowering costs.",
|
||||
body: [
|
||||
"Our solutions are designed to meet your precise requirements for reliability, timeliness and cost-efficiency. No matter what integrity challenge you face, you can rely on Masar NDT to have the engineers, inspectors, field technicians, trade people and technology to get the job done right.",
|
||||
"Whatever your challenge, we have the answer \u2014 in difficult access locations, large industrial sites, Upstream, Downstream, Midstream, Marine, Energy & Power, laboratories, plants and factories. Wherever you need us."
|
||||
],
|
||||
highlight: {
|
||||
title: "Specialized in Shutdown & Turnaround Inspection and Planning",
|
||||
body: [
|
||||
'AKMEC allows a "one-stop shop" for the client, reducing cost and time spent acquiring outside resources.',
|
||||
"Planning the turnaround is one of the most important steps toward a successful turnaround. Our experienced team of inspectors and planners assists clients at the planning stage, and we staff all inspection crafts necessary to plan any size turnaround.",
|
||||
"The final and major step for any successful turnaround is the post-turnaround work and documentation. Masar NDT ensures all inspection activities are properly updated and documented per API, ASME PCC and/or client-specific standards and guidelines \u2014 including Pre-Startup Audits, updating existing mechanical-integrity programs, and participating in post-turnaround reviews."
|
||||
]
|
||||
}
|
||||
};
|
||||
export const conventionalNdt = {
|
||||
title: "Conventional NDT",
|
||||
tag: "Conventional NDT",
|
||||
lead: "A full suite of established, code-compliant testing methods for pipes, structures, pressure vessels and process equipment on construction projects and process plants.",
|
||||
methods: [
|
||||
{
|
||||
code: "2.1",
|
||||
name: "Penetrant Testing (PT)",
|
||||
description: "Inspection of surface discontinuities in materials and welds of pipes, structures, pressure vessels and other process equipment.",
|
||||
advantages: [
|
||||
"Efficient, portable, fast, relatively inexpensive and does not require high-technology equipment",
|
||||
"Easy to inspect parts with complex shapes, large areas and large volumes of parts",
|
||||
"Able to test a wide range of materials, including ferritic and composite items",
|
||||
"Indicates the relative shape, size and depth of a flaw",
|
||||
"High sensitivity to small surface discontinuities"
|
||||
],
|
||||
limitations: [
|
||||
"Surface finish and roughness can affect inspection sensitivity",
|
||||
"Only surface-breaking defects can be detected",
|
||||
"Chemical handling and proper disposal is required",
|
||||
"Requires direct access to the surfaces to be examined",
|
||||
"Cannot examine porous surfaces"
|
||||
]
|
||||
},
|
||||
{
|
||||
code: "2.2",
|
||||
name: "Magnetic Particle Testing (MT)",
|
||||
description: "Surface and subsurface discontinuity testing using permanent or electromagnetic yokes on pipes, pressure vessels and process equipment.",
|
||||
advantages: [
|
||||
"Can detect both surface and near sub-surface defects",
|
||||
"Some inspection formats are extremely portable and low cost",
|
||||
"Indications are visible to the inspector directly on the specimen surface",
|
||||
"Relatively safe technique; materials generally not combustible or hazardous",
|
||||
"Rapid inspection with immediate results",
|
||||
"Can inspect parts with irregular shapes"
|
||||
],
|
||||
limitations: [
|
||||
"The specimen must be ferromagnetic material",
|
||||
"Not always effective on parts with complex surface geometry",
|
||||
"Alignment between magnetic flux and defect is important"
|
||||
]
|
||||
},
|
||||
{
|
||||
code: "2.3",
|
||||
name: "Ultrasonic Testing (UT)",
|
||||
description: "Shear-wave inspection of castings and welds in piping, plate, vessels and process equipment, plus longitudinal-wave thickness measurement, corrosion scanning and mapping \u2014 used across Oil & Gas, petrochemical, chemical, fertilizer, marine, aerospace, automotive, construction, medical, metallurgy and manufacturing.",
|
||||
advantages: [
|
||||
"High penetration power, allowing flaw detection deep within a part",
|
||||
"High sensitivity, allowing detection of very small flaws",
|
||||
"Can be used when only one side of an object is accessible",
|
||||
"Greater accuracy for determining depth of internal flaws and thickness of parallel-surface parts",
|
||||
"Able to estimate size, shape, orientation and nature of defects",
|
||||
"Non-hazardous to nearby personnel, equipment or materials",
|
||||
"Highly automated and portable operations possible",
|
||||
"Immediate results allow immediate decisions"
|
||||
],
|
||||
limitations: [
|
||||
"Requires experienced technicians for inspection and data interpretation",
|
||||
"Rough, irregularly shaped, very small, thin, or non-homogeneous objects are difficult to inspect",
|
||||
"Reduced sensitivity for volumetric flaws, particularly metal inclusions, versus radiographic testing"
|
||||
]
|
||||
},
|
||||
{
|
||||
code: "2.4",
|
||||
name: "Holiday / Spark Testing",
|
||||
description: "Checks for inconsistencies such as pinholes, discontinuities, holidays and voids in coatings covering metallic surfaces. A voltage applied across metal fibres on the coated surface creates a spark wherever a holiday exposes the underlying metal \u2014 critical for anti-corrosive coating applications, since undetected holidays leave the surface prone to corrosion."
|
||||
},
|
||||
{
|
||||
code: "2.5",
|
||||
name: "Ferrite Testing",
|
||||
description: "Fast, inexpensive and accurate on-site measurement of ferrite percentage in stainless steel \u2014 specifically austenitic and duplex grades \u2014 to ensure proper toughness, corrosion resistance and crack prevention. Results are interpreted per API 938C, API 582, NACE MR0175, NACE MR0103 and/or customer requirements. In austenitic weld metal ferrite influences mechanical properties, weldability and corrosion resistance; in duplex stainless steels it influences mechanical properties and corrosion performance."
|
||||
},
|
||||
{
|
||||
code: "2.6",
|
||||
name: "Visual Inspection (VT)",
|
||||
description: "The original and most effective NDT technique for detecting surface defects. Our inspectors bring a deep understanding of applicable code requirements, products, processes, service conditions and acceptance criteria \u2014 backed by over 150 VT Level II/III inspectors and 400 API-certified inspectors.",
|
||||
uses: [
|
||||
"Welding inspection",
|
||||
"API tank, pressure vessel and process piping inspections",
|
||||
"Quality assurance during manufacture or repair",
|
||||
"Coating inspection",
|
||||
"Lift/aerial equipment inspection",
|
||||
"On-site surveillance"
|
||||
]
|
||||
},
|
||||
{
|
||||
code: "2.7",
|
||||
name: "Hardness Testing",
|
||||
description: "Provides a relevant indication of strength, wear resistance and other material properties, using the latest hardness-testing technology for reliable, on-the-spot results."
|
||||
},
|
||||
{
|
||||
code: "2.8",
|
||||
name: "Vacuum Box Testing",
|
||||
description: "Locates weld-seam leaks using a vacuum box and compressor to create a pressure envelope while a detergent solution is applied; leaks become visible as bubbles. Systems comply with ASTM E515, with inspections conducted per ASME Section V Article 10, Appendix II or client specification.",
|
||||
advantages: [
|
||||
"Provides an immediate visual indication of the location of any leaks present",
|
||||
"Can detect small leaks within a given area"
|
||||
],
|
||||
limitations: [
|
||||
"Size and orientation of leaks must be analyzed with a secondary NDT method",
|
||||
"Surface temperature of the test material must be between 5\xB0C and 50\xB0C, unless a procedure effective outside this range is demonstrated"
|
||||
]
|
||||
},
|
||||
{
|
||||
code: "2.9",
|
||||
name: "Metallography",
|
||||
description: "Used across the lifetime of a component \u2014 from initial materials development through inspection, production, manufacturing process control and failure analysis \u2014 to ensure product reliability. Steps include sampling, specimen preparation (sectioning, mounting, grinding, polishing, etching), microscopic observation, digital imaging and quantitative data extraction."
|
||||
},
|
||||
{
|
||||
code: "2.10",
|
||||
name: "NDT Procedure Qualification",
|
||||
description: "Conventional NDT procedure review and approval by a certified Level III, outlining all requirements from codes, specifications and/or standards to ensure inspection requirements are met.",
|
||||
uses: ["Procedures", "Inspection Equipment", "Inspection Personnel", "Documentation"]
|
||||
}
|
||||
]
|
||||
};
|
||||
export const advancedNdt = {
|
||||
title: "Advanced NDT",
|
||||
tag: "Advanced NDT",
|
||||
lead: "Specialised, high-technology inspection techniques for tubing, heat exchangers and hard-to-reach assets, delivered by an in-house team of advanced-NDT specialists.",
|
||||
methods: [
|
||||
{
|
||||
code: "3.1",
|
||||
name: "Positive Material Identification (PMI)",
|
||||
description: "On-the-spot chemical-composition verification, certified in a written report, confirming that metallic parts contain the correct percentage of key elements so properties such as corrosion resistance meet requirements. Used across oil & gas, power generation, chemical, pharmaceutical, nuclear, aerospace and metal fabrication for quality control and safety compliance.",
|
||||
advantages: [
|
||||
"Rapid non-destructive verification that supplied materials conform to proper standards and specifications",
|
||||
"Finds potentially mixed-up alloys",
|
||||
"Identifies if the wrong material has been used",
|
||||
"Ensures welded components use the correct filler material",
|
||||
"Ensures products and components are manufactured with the correct alloy"
|
||||
]
|
||||
},
|
||||
{
|
||||
code: "3.2",
|
||||
name: "Eddy Current Testing (ECT)",
|
||||
description: "Rapid, accurate electromagnetic-induction technique to detect discontinuities in tubing, heat exchangers, condensers, steam generators, air coolers, feed-water heaters, wires and plates \u2014 including very small cracks in or near the surface, with minimal surface preparation. Our equipment operates at test frequencies up to 8 kHz with inspection speeds up to 2 metres per second.",
|
||||
note: "Prior to testing, tubes are cleaned via hydro-jetting (typical pressures 280\u2013560 kg/cm\xB2) and cleaning adequacy is verified with a dummy probe/rod. Signals from the tubes under test are compared against calibration-standard signals by expert technicians."
|
||||
},
|
||||
{
|
||||
code: "3.3",
|
||||
name: "Remote Field Eddy Current Testing (RFET)",
|
||||
description: "Electromagnetic method for detecting and sizing wall thinning caused by corrosion, erosion, wear, pitting and baffle cuts in ferromagnetic tubes of boilers, feed-water heaters, air coolers and carbon-steel heat exchangers \u2014 often combined with Near Field Testing (NFT) depending on equipment capability."
|
||||
},
|
||||
{
|
||||
code: "3.4",
|
||||
name: "Magnetic Flux Leakage (MFL) Testing",
|
||||
description: "Electromagnetic technique that magnetises the conductive test material; wherever corrosion or material loss exists, the magnetic field leaks and is detected.",
|
||||
uses: [
|
||||
"Suitable for wall-loss detection and measurement of sharp defects such as pitting, grooving and circumferential cracks",
|
||||
"Applicable to ferromagnetic tubing",
|
||||
"Effective for aluminium-finned carbon-steel tubes, as the field is largely unaffected by the fins",
|
||||
"A strong back-up inspection to Remote Field Testing"
|
||||
]
|
||||
},
|
||||
{
|
||||
code: "3.5",
|
||||
name: "Internal Rotary Inspection System (IRIS)",
|
||||
description: "Ultrasonic method for tube inspection: a probe is inserted into a water-flooded tube and pulled out slowly while data is recorded, allowing detection of metal loss from both the inside and outside of the tube wall.",
|
||||
advantages: [
|
||||
"Provides flaw location along both the length and circumference of the tube",
|
||||
"Defect detection is better than RFET in ferrous materials, though inferior to ECT in non-magnetic materials"
|
||||
],
|
||||
limitations: [
|
||||
"A slow technique (roughly 1 inch per second scanning speed), though accurate to about 0.15 mm in ferrous tube wall measurement",
|
||||
"Requires better surface cleaning than eddy current testing"
|
||||
]
|
||||
},
|
||||
{
|
||||
code: "3.6",
|
||||
name: "Boroscopic / Videoscopic Inspection",
|
||||
description: "A small camera visually inspects hard-to-reach zones \u2014 electrical generators and transformers, boilers, pressure vessels, pipelines, gas/steam/wind turbines, condenser tubes, drums, pumps, heat exchangers and other plant components \u2014 without teardown, checking for pitting, cracks, corrosion, erosion and weld defects."
|
||||
},
|
||||
{
|
||||
code: "3.7",
|
||||
name: "Thermography",
|
||||
description: "Infrared thermography finds temperature anomalies during equipment operation using remote, non-contact viewing. Useful for deposits or blockages in pipelines carrying hot or cold fluids, and for refractory or insulation deterioration in furnaces, boilers, heaters and converters.",
|
||||
advantages: [
|
||||
"Reformers, furnaces and boilers are ideal candidates for detecting chocking, deposits and hot/cold spots",
|
||||
"Easily determines hot-spots, especially in electrical systems where overheating can produce catastrophic hazards",
|
||||
"Qualified team of thermography inspectors"
|
||||
],
|
||||
limitations: [
|
||||
"Requires trained and skilled technicians",
|
||||
"Effective parameters (temperature range, emissivity, focal distance) must be correctly set"
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
export const assetIntegrity = {
|
||||
title: "Asset Integrity Engineering",
|
||||
tag: "Asset Integrity Engineering",
|
||||
lead: "AKMEC GROUP offers engineering and technical consultancy to customers, industries, manufacturers and cross-country businesses trading products internationally.",
|
||||
services: [
|
||||
"Corrosion Loop Development and Marking",
|
||||
"Damage Mechanisms Identification",
|
||||
"CML Identification and Optimization",
|
||||
"Injection and Mix Point Assessment",
|
||||
"Dead Leg Identification and Risk Ranking",
|
||||
"Corrosion Control Document (CCD)",
|
||||
"Risk Based Inspection (RBI) Study",
|
||||
"Develop Inspection Scope and Technique",
|
||||
"Inspection Data Management and Automation",
|
||||
"Asset Integrity Management System",
|
||||
"Isometric, P&ID and PFD Drafting",
|
||||
"Asset Life Extension Study",
|
||||
"Fitness for Service (API 579 / ASME)",
|
||||
"Assessment of UG / Cross-Country Pipeline",
|
||||
"Study of Online Corrosion Probes and Coupons",
|
||||
"Root Cause Analysis (RCA) / Remaining Life Assessment (RLA)",
|
||||
"Analysis of Industrial Failure, Delivering Effective Remedies",
|
||||
"Assessment of Small-Bore Piping / Critical Equipment"
|
||||
]
|
||||
};
|
||||
export const manpower = {
|
||||
title: "Manpower & Outsourcing",
|
||||
tag: "Manpower & Outsourcing",
|
||||
lead: "AKMEC HR provides qualified, well-trained manpower supporting commercial, industrial, technical and domestic-sector activities for both public and private clients.",
|
||||
body: [
|
||||
"We provide well-trained, qualified candidates of various professions and nationalities for all customer requirements, and can mobilize large manpower for shutdown / turnaround assignments ranging from 15 days to several months.",
|
||||
"AKMEC maintains an in-house database of more than 90,000 resumes and a strong referral programme to attract talent from the industry. Our recruiters are trained to identify candidates who meet your exact project requirements \u2014 technical, non-technical, highly skilled, skilled and non-skilled.",
|
||||
"Manpower is supplied on client payroll and works at the client\u2019s location across the sectors listed in Industries We Serve, and more."
|
||||
],
|
||||
disciplines: [
|
||||
"Engineering Services",
|
||||
"EPC, Turnkey Projects",
|
||||
"Shutdown and Turnaround",
|
||||
"Operation and Maintenance",
|
||||
"Project Management",
|
||||
"Testing and Commissioning",
|
||||
"Vigilance and Surveillance",
|
||||
"Construction and Manufacturing",
|
||||
"Technical Staffing"
|
||||
]
|
||||
};
|
||||
export const industries = [
|
||||
"Oil and Gas",
|
||||
"Refinery",
|
||||
"Petrochemical",
|
||||
"Chemical",
|
||||
"Fertilizer",
|
||||
"Nuclear",
|
||||
"Marine",
|
||||
"Mining",
|
||||
"Sugar Industries",
|
||||
"Port / Shipping",
|
||||
"Cement",
|
||||
"Power Generation",
|
||||
"Metal Fabrication",
|
||||
"Forging and Casting",
|
||||
"Manufacturing",
|
||||
"Pipeline",
|
||||
"Tanks",
|
||||
"EPC and Turnkey",
|
||||
"Electronic and Electricals",
|
||||
"Construction",
|
||||
"Solar",
|
||||
"Wind",
|
||||
"Building and Infrastructure",
|
||||
"Food & Beverages Industry",
|
||||
"Railways and Metro",
|
||||
"Aerospace and Defense",
|
||||
"Pharmaceutical / Medical",
|
||||
"Automobile",
|
||||
"Textile",
|
||||
"Transportation",
|
||||
"General Industries",
|
||||
"Pulp and Paper",
|
||||
"Renewable Energy"
|
||||
];
|
||||
export const resourceCategories = [
|
||||
{
|
||||
title: "Service Datasheets",
|
||||
description: "Technical scope sheets for each NDT method \u2014 advantages, limitations and applicable codes \u2014 for engineers building an inspection plan.",
|
||||
items: [
|
||||
"Conventional NDT Method Reference",
|
||||
"Advanced NDT Method Reference",
|
||||
"Asset Integrity Engineering Scope"
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Standards & Codes Referenced",
|
||||
description: "Codes and standards our inspection and engineering work is executed against.",
|
||||
items: [
|
||||
"API 579 / ASME (Fitness for Service)",
|
||||
"API 938C, API 582",
|
||||
"NACE MR0175, NACE MR0103",
|
||||
"ASTM E515",
|
||||
"ASME Section V, Article 10"
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Request a Technical Brochure",
|
||||
description: "Full technical brochures and shutdown/turnaround workbooks are available on request \u2014 reach out via the contact form and our team will share the relevant documentation for your project.",
|
||||
items: []
|
||||
}
|
||||
];
|
||||
export const processSteps = [
|
||||
{
|
||||
step: "01",
|
||||
title: "Initial Consultation",
|
||||
description: "We align on project specifications, standard compliance protocols, and key client objectives to structure the engagement roadmap."
|
||||
},
|
||||
{
|
||||
step: "02",
|
||||
title: "Technical Planning",
|
||||
description: "Our certified engineers draw up detailed testing procedures, hazard worksheets, and personnel scheduling matrices."
|
||||
},
|
||||
{
|
||||
step: "03",
|
||||
title: "Inspection Design",
|
||||
description: "We draft specialized NDT and corrosion mapping layouts tailored to the structural geometry and materials involved."
|
||||
},
|
||||
{
|
||||
step: "04",
|
||||
title: "Equipment & Prep",
|
||||
description: "Advanced instruments are calibrated, and dummy rods/probes are checked to ensure full field reliability."
|
||||
},
|
||||
{
|
||||
step: "05",
|
||||
title: "On-site Execution",
|
||||
description: "Our ASNT Level II/III and API inspectors execute on-site testing under rigorous QA/QC safety standards."
|
||||
},
|
||||
{
|
||||
step: "06",
|
||||
title: "Reporting & Support",
|
||||
description: "Detailed mechanical integrity and fitness-for-service reports are delivered with lifetime engineering consultancy."
|
||||
}
|
||||
];
|
||||
export const testimonials = [
|
||||
{
|
||||
name: "Eng. Khalid Al-Otaibi",
|
||||
position: "Turnaround Manager",
|
||||
company: "Sabic Refinery Group",
|
||||
rating: 5,
|
||||
review: "Masar NDT managed the inspection scope for our Jubail refinery turnaround. Their technicians mobilized rapidly and finished the vacuum box and advanced tube inspection 2 days ahead of schedule, enabling a safe pre-startup audit.",
|
||||
photo: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=150&h=150&q=80"
|
||||
},
|
||||
{
|
||||
name: "Rahul Sharma",
|
||||
position: "VP Operations",
|
||||
company: "Larsen & Toubro Ltd.",
|
||||
rating: 5,
|
||||
review: "For our complex cross-country pipeline projects, their asset integrity engineering team provided corrosion loop development and RBI studies of the highest caliber. They are our go-to partner for safety assurance.",
|
||||
photo: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&w=150&h=150&q=80"
|
||||
},
|
||||
{
|
||||
name: "Marcus Vance",
|
||||
position: "HSE Director",
|
||||
company: "Aramco Offshore Operations",
|
||||
rating: 5,
|
||||
review: "We have utilized Masar NDT for critical advanced NDT tube inspections. Their IRIS and Remote Field testing reports were clean, comprehensive, and fully compliant with ASME Section V standards. Exceptional professionalism.",
|
||||
photo: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?auto=format&fit=crop&w=150&h=150&q=80"
|
||||
}
|
||||
];
|
||||
export const faqs = [
|
||||
{
|
||||
question: "What certifications do Masar NDT inspectors hold?",
|
||||
answer: "Our field inspectors hold globally recognized qualifications including ISO 9001:2015, ASNT/VT Level II/III certifications, API 510, API 570, API 653 inspector qualifications, and specialized NACE / BGAS certifications for coating inspections."
|
||||
},
|
||||
{
|
||||
question: "How quickly can your team mobilize for shutdown assignments?",
|
||||
answer: "For planned shutdowns in Saudi Arabia and India, we can coordinate with turnaround planners weeks in advance. For emergency outages, our mobilization time ranges from 24 to 48 hours depending on scope and visa clearance, backed by our resume database of over 90,000 specialists."
|
||||
},
|
||||
{
|
||||
question: "What advanced NDT techniques do you provide for heat exchanger tubes?",
|
||||
answer: "We provide Eddy Current Testing (ECT) for non-ferrous materials, Remote Field Eddy Current Testing (RFET) and Near Field Testing (NFT) for ferrous materials, Internal Rotary Inspection System (IRIS) for high-accuracy ultrasonic wall thickness measurements, and Magnetic Flux Leakage (MFL)."
|
||||
},
|
||||
{
|
||||
question: "What is Fitness-For-Service (FFS) assessment?",
|
||||
answer: "Fitness-For-Service assessments (conducted per API 579-1/ASME FFS-1) are engineering evaluations that determine the structural integrity of pressurized equipment, piping, or storage tanks containing flaws or damage, establishing whether they can continue to run safely."
|
||||
},
|
||||
{
|
||||
question: "Are your testing procedures compliant with international standards?",
|
||||
answer: "Yes. All NDT procedures (conventional and advanced) are drafted, reviewed, and approved by in-house Level III certified experts in strict accordance with ASME Section V, ASTM, API, and client-specified standards."
|
||||
}
|
||||
];
|
||||
export const teamMembers = [
|
||||
{
|
||||
name: "Mr. A. K. Mehra",
|
||||
position: "Chairman & Managing Director",
|
||||
bio: "Over 25 years of leadership in industrial services, infrastructure management, and technical QA/QC services across India and the GCC.",
|
||||
photo: "https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?auto=format&fit=crop&w=300&h=300&q=80",
|
||||
linkedin: "#"
|
||||
},
|
||||
{
|
||||
name: "Engr. Tariq Al-Ghamdi",
|
||||
position: "Director of Operations (KSA)",
|
||||
bio: "Lead inspector and advisor on pipeline integrity, holding multiple API credentials and directing turnaround inspection logistics.",
|
||||
photo: "/src/assets/images/saudi_executive_1_1783666481477.jpg",
|
||||
linkedin: "#"
|
||||
},
|
||||
{
|
||||
name: "Dr. S. K. Al-Qahtani",
|
||||
position: "Chief Technical Officer (NDT Level III)",
|
||||
bio: "ASNT Level III consultant in UT, RT, MT, PT, and ECT. Pioneer in engineering failure analysis and metallurgical studies.",
|
||||
photo: "/src/assets/images/saudi_executive_2_1783666493568.jpg",
|
||||
linkedin: "#"
|
||||
}
|
||||
];
|
||||
export const blogPosts = [
|
||||
{
|
||||
id: "post-1",
|
||||
title: "The Critical Role of Advanced NDT in Modern Refinery Turnarounds",
|
||||
category: "Advanced NDT",
|
||||
date: "June 28, 2026",
|
||||
author: "Dr. S. K. Al-Qahtani",
|
||||
excerpt: "Refinery turnarounds are complex logistics operations. Discover how electromagnetic techniques like RFET and MFL reduce tube bundle assessment times and extend asset lifespan.",
|
||||
image: "https://images.unsplash.com/photo-1518709268805-4e9042af9f23?auto=format&fit=crop&w=600&h=400&q=80",
|
||||
readTime: "6 min read"
|
||||
},
|
||||
{
|
||||
id: "post-2",
|
||||
title: "Understanding API 579 Fitness-For-Service (FFS) Guidelines",
|
||||
category: "Asset Integrity",
|
||||
date: "May 15, 2026",
|
||||
author: "Engr. Tariq Al-Ghamdi",
|
||||
excerpt: "An in-depth look at how pressurized structures containing localized corrosion or cracking are assessed for safe operations using API 579-1 standard levels.",
|
||||
image: "https://images.unsplash.com/photo-1581092160607-ee22621dd758?auto=format&fit=crop&w=600&h=400&q=80",
|
||||
readTime: "8 min read"
|
||||
},
|
||||
{
|
||||
id: "post-3",
|
||||
title: "Best Practices for Industrial Coating Inspection: Holiday & Spark Testing",
|
||||
category: "Inspection & Audit",
|
||||
date: "April 02, 2026",
|
||||
author: "Mr. A. K. Mehra",
|
||||
excerpt: "Preventing corrosion starts at the coating layer. Learn why high-voltage holiday testing is vital for identifying microscopic pinholes before equipment deployment.",
|
||||
image: "https://images.unsplash.com/photo-1504307651254-35680f356dfd?auto=format&fit=crop&w=600&h=400&q=80",
|
||||
readTime: "5 min read"
|
||||
}
|
||||
];
|
||||
export const projectsList = [
|
||||
{
|
||||
id: "proj-1",
|
||||
title: "Jubail Plant Turnaround Inspection",
|
||||
category: "Inspection",
|
||||
client: "AKMEC Petrochemicals KSA",
|
||||
location: "Al Jubail, KSA",
|
||||
year: "2025",
|
||||
image: "https://images.unsplash.com/photo-1518709268805-4e9042af9f23?auto=format&fit=crop&w=800&h=600&q=80",
|
||||
description: "Complete shutdown planning, VT inspections, and post-turnaround documentation update per API 510/570 requirements for a major processing plant."
|
||||
},
|
||||
{
|
||||
id: "proj-2",
|
||||
title: "Cross-Country Gas Pipeline NDT Scope",
|
||||
category: "Advanced NDT",
|
||||
client: "National Gas Utility",
|
||||
location: "Eastern Province, KSA",
|
||||
year: "2024",
|
||||
image: "https://images.unsplash.com/photo-1504307651254-35680f356dfd?auto=format&fit=crop&w=800&h=600&q=80",
|
||||
description: "Ultrasonic thickness mapping, automated weld testing, and magnetic particle scanning across 120km of high-pressure utility pipeline structures."
|
||||
},
|
||||
{
|
||||
id: "proj-3",
|
||||
title: "Duplex Stainless Steel Ferrite Audit",
|
||||
category: "Inspection",
|
||||
client: "Offshore Drilling Contractors",
|
||||
location: "Mumbai Port, India",
|
||||
year: "2025",
|
||||
image: "https://images.unsplash.com/photo-1522228115018-d838bcce5c3a?auto=format&fit=crop&w=800&h=600&q=80",
|
||||
description: "On-site ferrite percentage audits and metallographic testing of offshore structural welds in accordance with API 582 standard specifications."
|
||||
},
|
||||
{
|
||||
id: "proj-4",
|
||||
title: "Heat Exchanger Eddy Current Tube Scan",
|
||||
category: "Advanced NDT",
|
||||
client: "Chemical Fertilizer Plant",
|
||||
location: "Gujarat, India",
|
||||
year: "2024",
|
||||
image: "https://images.unsplash.com/photo-1581092160607-ee22621dd758?auto=format&fit=crop&w=800&h=600&q=80",
|
||||
description: "ECT scans and dummy rod testing of 1,200 non-ferrous condenser tubes to discover wall-loss cracks under 2.0m/s velocities."
|
||||
},
|
||||
{
|
||||
id: "proj-5",
|
||||
title: "Fitness-for-Service (FFS) Pressure Vessel Audit",
|
||||
category: "Asset Integrity",
|
||||
client: "Refining Operations Group",
|
||||
location: "Yanbu, KSA",
|
||||
year: "2025",
|
||||
image: "https://images.unsplash.com/photo-1541888946425-d81bb19240f5?auto=format&fit=crop&w=800&h=600&q=80",
|
||||
description: "Critical finite element analysis and structural evaluation of a hydrocracker reactor vessel with corrosion damage per API 579 guidelines."
|
||||
},
|
||||
{
|
||||
id: "proj-6",
|
||||
title: "Technical Staffing for Turnaround Program",
|
||||
category: "Manpower",
|
||||
client: "Energy & Power Corporation",
|
||||
location: "Jubail Industrial City, KSA",
|
||||
year: "2025",
|
||||
image: "https://images.unsplash.com/photo-1605647540924-852290f6b0d5?auto=format&fit=crop&w=800&h=600&q=80",
|
||||
description: "Mobilized 70+ certified API inspectors, safety supervisors, and VT technicians for a complex 30-day turnaround assignment."
|
||||
}
|
||||
];
|
||||
export const galleryPhotos = [
|
||||
{
|
||||
title: "API Tank Inspection Operations",
|
||||
category: "Inspection",
|
||||
image: "https://images.unsplash.com/photo-1518709268805-4e9042af9f23?auto=format&fit=crop&w=800&q=80"
|
||||
},
|
||||
{
|
||||
title: "Conventional UT Scan Procedures",
|
||||
category: "Conventional NDT",
|
||||
image: "https://images.unsplash.com/photo-1581092160607-ee22621dd758?auto=format&fit=crop&w=800&q=80"
|
||||
},
|
||||
{
|
||||
title: "Advanced Tube Bundle Analysis",
|
||||
category: "Advanced NDT",
|
||||
image: "https://images.unsplash.com/photo-1504307651254-35680f356dfd?auto=format&fit=crop&w=800&q=80"
|
||||
},
|
||||
{
|
||||
title: "Asset Life Extension Consultations",
|
||||
category: "Asset Integrity",
|
||||
image: "https://images.unsplash.com/photo-1541888946425-d81bb19240f5?auto=format&fit=crop&w=800&q=80"
|
||||
},
|
||||
{
|
||||
title: "Offshore Marine Inspection Work",
|
||||
category: "Inspection",
|
||||
image: "https://images.unsplash.com/photo-1522228115018-d838bcce5c3a?auto=format&fit=crop&w=800&q=80"
|
||||
},
|
||||
{
|
||||
title: "Mobilized Inspection Team Briefings",
|
||||
category: "Manpower",
|
||||
image: "https://images.unsplash.com/photo-1605647540924-852290f6b0d5?auto=format&fit=crop&w=800&q=80"
|
||||
},
|
||||
{
|
||||
title: "Refinery Process Pipe Auditing",
|
||||
category: "Inspection",
|
||||
image: "https://images.unsplash.com/photo-1508962914676-134849a727f0?auto=format&fit=crop&w=800&q=80"
|
||||
},
|
||||
{
|
||||
title: "Safety Compliance Checklists",
|
||||
category: "Asset Integrity",
|
||||
image: "https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?auto=format&fit=crop&w=800&q=80"
|
||||
}
|
||||
];
|
||||
export const activeCareers = [
|
||||
{
|
||||
id: "job-1",
|
||||
title: "API 510/570 Certified Inspector",
|
||||
department: "Inspection Operations",
|
||||
location: "Al Jubail, KSA",
|
||||
type: "Full-Time",
|
||||
description: "Execute pressure vessel and piping inspections during major refining shutdowns in Saudi Arabia.",
|
||||
requirements: [
|
||||
"Valid API 510 & API 570 certifications.",
|
||||
"Minimum 5 years of experience in oil & gas turnarounds.",
|
||||
"Strong knowledge of ASME Section VIII, IX, and B31.3 codes."
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "job-2",
|
||||
title: "Advanced NDT Tube Testing Technician",
|
||||
department: "Advanced NDT division",
|
||||
location: "Gujarat, India",
|
||||
type: "Contract (6 Months)",
|
||||
description: "Perform Eddy Current (ECT) and Remote Field (RFET) inspections on heat exchanger tubes.",
|
||||
requirements: [
|
||||
"ASNT Level II in Electromagnetic Testing (ET) / Eddy Current.",
|
||||
"Experience with Olympus MultiScan / MS5800 equipment.",
|
||||
"Capable of generating and interpreting tube calibration reports."
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "job-3",
|
||||
title: "Asset Integrity Engineer (RBI Specialist)",
|
||||
department: "Consultancy Services",
|
||||
location: "Al Jubail, KSA",
|
||||
type: "Full-Time",
|
||||
description: "Develop Risk-Based Inspection (RBI) scopes and corrosion loop marking diagrams for downstream facilities.",
|
||||
requirements: [
|
||||
"B.Tech / B.E in Mechanical or Metallurgical Engineering.",
|
||||
"Proficiency with RBI software (e.g., APM, Shell-RBI).",
|
||||
"Knowledge of API 580 and API 581 standards."
|
||||
]
|
||||
}
|
||||
];
|
||||
@@ -0,0 +1,47 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap');
|
||||
@import "tailwindcss";
|
||||
|
||||
@theme {
|
||||
--font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
|
||||
--font-heading: "Space Grotesk", sans-serif;
|
||||
--font-mono: "JetBrains Mono", ui-monospace, monospace;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--font-sans);
|
||||
background-color: #f8fafc;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
/* Custom continuous rotating animation */
|
||||
@keyframes spin-slow {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-spin-slow {
|
||||
animation: spin-slow 80s linear infinite;
|
||||
}
|
||||
|
||||
/* Custom scrollbar for high-end look */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: #f1f5f9;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #cbd5e1;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #94a3b8;
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
import { StrictMode } from "react";
|
||||
import { createRoot } from "react-dom/client";
|
||||
import App from "./App";
|
||||
import "./index.css";
|
||||
createRoot(document.getElementById("root")).render(
|
||||
<StrictMode>
|
||||
<App />
|
||||
</StrictMode>
|
||||
);
|
||||
@@ -0,0 +1,173 @@
|
||||
import { motion } from "motion/react";
|
||||
import { ShieldCheck, Target, Eye, Award, CheckCircle2 } from "lucide-react";
|
||||
import { company, teamMembers, offices } from "../data/content";
|
||||
import SectionHeader from "../components/SectionHeader";
|
||||
export default function About() {
|
||||
return <div className="bg-slate-50 min-h-screen text-slate-900">
|
||||
|
||||
{
|
||||
/* Page header banner with dark overlay */
|
||||
}
|
||||
<section
|
||||
className="relative pt-32 pb-20 md:pt-40 md:pb-28 bg-cover bg-center text-white border-b border-slate-900"
|
||||
style={{ backgroundImage: "url('https://images.unsplash.com/photo-1541888946425-d81bb19240f5?auto=format&fit=crop&w=1600&q=80')" }}
|
||||
>
|
||||
<div className="absolute inset-0 bg-slate-950/80 pointer-events-none" />
|
||||
<div className="max-w-7xl mx-auto px-5 md:px-8 relative z-10">
|
||||
<span className="font-mono text-xs font-bold text-orange-400 uppercase tracking-widest bg-orange-500/20 px-3.5 py-1.5 rounded-full border border-orange-500/30">
|
||||
About AKMEC Group
|
||||
</span>
|
||||
<h1 className="font-heading text-4xl md:text-5xl lg:text-6xl font-extrabold tracking-tight mt-5">
|
||||
Pioneering Technical Excellence
|
||||
</h1>
|
||||
<p className="mt-4 max-w-2xl text-slate-300 text-sm sm:text-base md:text-lg leading-relaxed font-light">
|
||||
Providing vigor, tailorable facilities management, and ISO 9001:2015 approved non-destructive testing since 2021.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{
|
||||
/* Corporate Overview & Strengths */
|
||||
}
|
||||
<section className="py-20 max-w-7xl mx-auto px-5 md:px-8">
|
||||
<div className="grid lg:grid-cols-2 gap-12 items-start">
|
||||
<div className="space-y-6">
|
||||
<SectionHeader
|
||||
tag="Who We Are"
|
||||
title="Translating Integrity Into Every Engineered Project"
|
||||
/>
|
||||
<div className="space-y-4 text-slate-500 text-sm leading-relaxed font-light">
|
||||
{company.about.map((p, idx) => <p key={idx}>{p}</p>)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white border border-slate-100 rounded-2xl p-8 shadow-sm space-y-6">
|
||||
<h3 className="font-heading text-xl font-bold text-slate-900">Core Accreditation</h3>
|
||||
<p className="text-xs text-slate-500 leading-relaxed font-light">
|
||||
As a premier certified inspection organization, Masar NDT operates on strict internal quality control guidelines:
|
||||
</p>
|
||||
<ul className="space-y-4 text-xs font-medium text-slate-700">
|
||||
<li className="flex items-start gap-3">
|
||||
<span className="w-5 h-5 rounded-full bg-orange-500/10 text-orange-600 flex items-center justify-center shrink-0 mt-0.5"><ShieldCheck className="w-3.5 h-3.5" /></span>
|
||||
<span>ISO 9001:2015 approved Quality Management System.</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-3">
|
||||
<span className="w-5 h-5 rounded-full bg-orange-500/10 text-orange-600 flex items-center justify-center shrink-0 mt-0.5"><Award className="w-3.5 h-3.5" /></span>
|
||||
<span>Procedures qualified per ASME, ASTM and API standards.</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-3">
|
||||
<span className="w-5 h-5 rounded-full bg-orange-500/10 text-orange-600 flex items-center justify-center shrink-0 mt-0.5"><CheckCircle2 className="w-3.5 h-3.5" /></span>
|
||||
<span>Rigorous safety protocol for extreme or confined space locations.</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{
|
||||
/* Vision & Mission Bento Blocks */
|
||||
}
|
||||
<section className="bg-slate-100 border-y border-slate-200 py-20">
|
||||
<div className="max-w-7xl mx-auto px-5 md:px-8 grid md:grid-cols-2 gap-8">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
className="bg-white p-8 rounded-2xl border border-slate-200 shadow-sm flex flex-col justify-between"
|
||||
>
|
||||
<div>
|
||||
<div className="w-12 h-12 bg-orange-500/10 text-orange-600 flex items-center justify-center rounded-xl mb-6">
|
||||
<Target className="w-6 h-6" />
|
||||
</div>
|
||||
<h3 className="font-heading text-2xl font-bold text-slate-900">Our Mission</h3>
|
||||
<p className="text-xs text-slate-500 mt-4 leading-relaxed font-light">
|
||||
{company.mission} We are committed to rendering services reflective of our efficiency and provide our industrial clients with superior quality and compliance.
|
||||
</p>
|
||||
</div>
|
||||
<div className="h-2 bg-gradient-to-r from-orange-500/10 to-orange-500 rounded-full mt-8" />
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: 20 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
className="bg-white p-8 rounded-2xl border border-slate-200 shadow-sm flex flex-col justify-between"
|
||||
>
|
||||
<div>
|
||||
<div className="w-12 h-12 bg-orange-500/10 text-orange-600 flex items-center justify-center rounded-xl mb-6">
|
||||
<Eye className="w-6 h-6" />
|
||||
</div>
|
||||
<h3 className="font-heading text-2xl font-bold text-slate-900">Our Vision</h3>
|
||||
<p className="text-xs text-slate-500 mt-4 leading-relaxed font-light">
|
||||
{company.vision} Exceeding expectations through personal attention, total dedication, and highly synchronized teamwork on shutdown, EPC, O&M and manufacturing programs.
|
||||
</p>
|
||||
</div>
|
||||
<div className="h-2 bg-gradient-to-r from-orange-500/10 to-orange-500 rounded-full mt-8" />
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{
|
||||
/* Leadership Profile Grid */
|
||||
}
|
||||
<section className="py-24 max-w-7xl mx-auto px-5 md:px-8">
|
||||
<SectionHeader
|
||||
align="center"
|
||||
tag="Our Leadership"
|
||||
title="Experienced Engineering Experts"
|
||||
description="Combining over 60 cumulative years of industrial auditing, certified Level III consultancy, and shutdown planning across public and private sectors."
|
||||
/>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-8 mt-12">
|
||||
{teamMembers.map((member) => <div key={member.name} className="bg-white border border-slate-100 rounded-2xl overflow-hidden shadow-md flex flex-col justify-between group hover:border-orange-500/20 hover:-translate-y-1 transition-all duration-300">
|
||||
<div className="aspect-square bg-slate-100 overflow-hidden relative">
|
||||
<img
|
||||
src={member.photo}
|
||||
alt={member.name}
|
||||
className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
|
||||
referrerPolicy="no-referrer"
|
||||
/>
|
||||
</div>
|
||||
<div className="p-6 space-y-3">
|
||||
<h3 className="font-heading text-lg font-bold text-slate-900">{member.name}</h3>
|
||||
<p className="text-[11px] font-bold text-orange-500 uppercase tracking-wider">{member.position}</p>
|
||||
<p className="text-xs text-slate-500 leading-relaxed font-light pt-2 border-t border-slate-50">{member.bio}</p>
|
||||
</div>
|
||||
</div>)}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{
|
||||
/* Offices Locations Block */
|
||||
}
|
||||
<section className="bg-slate-900 text-white border-t border-slate-950 py-20">
|
||||
<div className="max-w-7xl mx-auto px-5 md:px-8">
|
||||
<SectionHeader
|
||||
dark
|
||||
align="center"
|
||||
tag="Global Reach"
|
||||
title="Our Corporate Network"
|
||||
description="With regional headquarters and representative facilities across Saudi Arabia and India, we support large shutdowns on demand."
|
||||
/>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-8 mt-12">
|
||||
{offices.map((office) => <div key={office.label} className="bg-slate-950 border border-slate-800 p-8 rounded-2xl space-y-4">
|
||||
<h3 className="font-heading text-xl font-bold text-white flex items-center gap-2">
|
||||
<span className="w-2.5 h-2.5 bg-orange-500 rounded-full" />
|
||||
{office.label}
|
||||
</h3>
|
||||
<div className="space-y-2 text-xs text-slate-300 font-light leading-relaxed">
|
||||
{office.lines.map((l) => <p key={l}>{l}</p>)}
|
||||
</div>
|
||||
<div className="pt-4 border-t border-slate-800 grid gap-1 text-xs text-slate-400">
|
||||
{office.mobile && <p>Mobile: <strong className="text-white">{office.mobile}</strong></p>}
|
||||
<p>Email: <a href={`mailto:${office.email}`} className="text-orange-400 hover:underline">{office.email}</a></p>
|
||||
<p>Web: <a href={`https://${office.website}`} target="_blank" rel="noopener noreferrer" className="text-orange-400 hover:underline">{office.website}</a></p>
|
||||
</div>
|
||||
</div>)}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>;
|
||||
}
|
||||
@@ -0,0 +1,92 @@
|
||||
import { offices } from "../data/content";
|
||||
import ContactForm from "../components/ContactForm";
|
||||
import SectionHeader from "../components/SectionHeader";
|
||||
import { Mail, Phone, MapPin, Clock } from "lucide-react";
|
||||
export default function Contact() {
|
||||
return <div className="bg-slate-50 min-h-screen text-slate-900">
|
||||
|
||||
{
|
||||
/* Page Header Banner */
|
||||
}
|
||||
<section
|
||||
className="relative pt-32 pb-20 md:pt-40 md:pb-28 bg-cover bg-center text-white border-b border-slate-900"
|
||||
style={{ backgroundImage: "url('https://images.unsplash.com/photo-1504307651254-35680f356dfd?auto=format&fit=crop&w=1600&q=80')" }}
|
||||
>
|
||||
<div className="absolute inset-0 bg-slate-950/80 pointer-events-none" />
|
||||
<div className="max-w-7xl mx-auto px-5 md:px-8 relative z-10">
|
||||
<span className="font-mono text-xs font-bold text-orange-400 uppercase tracking-widest bg-orange-500/20 px-3.5 py-1.5 rounded-full border border-orange-500/30">
|
||||
Contact Us
|
||||
</span>
|
||||
<h1 className="font-heading text-4xl md:text-5xl lg:text-6xl font-extrabold tracking-tight mt-5">
|
||||
Discuss Your Project Scope
|
||||
</h1>
|
||||
<p className="mt-4 max-w-2xl text-slate-300 text-sm sm:text-base md:text-lg leading-relaxed font-light">
|
||||
Ready to deploy VT, UT, or advanced tube-testing crews? Contact our estimating office today.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{
|
||||
/* Main Grid: Form & Corporate Office Details */
|
||||
}
|
||||
<section className="py-24 max-w-7xl mx-auto px-5 md:px-8">
|
||||
<div className="grid lg:grid-cols-12 gap-12 items-start">
|
||||
|
||||
{
|
||||
/* Left: Contact Info details */
|
||||
}
|
||||
<div className="lg:col-span-5 space-y-8">
|
||||
<SectionHeader
|
||||
tag="Office Directory"
|
||||
title="Global Regional Contact Offices"
|
||||
description="Reach out directly to our operations and technical sales representatives in Saudi Arabia and India."
|
||||
/>
|
||||
|
||||
<div className="space-y-6">
|
||||
{offices.map((office) => <div key={office.label} className="bg-white border border-slate-100 p-6 md:p-8 rounded-2xl shadow-sm space-y-4">
|
||||
<h3 className="font-heading text-lg font-bold text-slate-900 flex items-center gap-2">
|
||||
<span className="w-2 h-2 bg-orange-500 rounded-full" />
|
||||
{office.label}
|
||||
</h3>
|
||||
<div className="space-y-3.5 text-xs text-slate-500 font-light leading-relaxed">
|
||||
<div className="flex items-start gap-2.5">
|
||||
<MapPin className="w-4 h-4 text-orange-500 shrink-0 mt-0.5" />
|
||||
<span>{office.lines.join(", ")}</span>
|
||||
</div>
|
||||
{office.mobile && <a href={`tel:${office.mobile.replace(/\s+/g, "")}`} className="flex items-center gap-2.5 hover:text-orange-500 transition-colors font-medium text-slate-700">
|
||||
<Phone className="w-4 h-4 text-orange-500 shrink-0" />
|
||||
<span>{office.mobile}</span>
|
||||
</a>}
|
||||
<a href={`mailto:${office.email}`} className="flex items-center gap-2.5 hover:text-orange-500 transition-colors font-medium text-slate-700">
|
||||
<Mail className="w-4 h-4 text-orange-500 shrink-0" />
|
||||
<span>{office.email}</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>)}
|
||||
</div>
|
||||
|
||||
<div className="bg-amber-50 border-l-4 border-amber-500 p-5 rounded-r-2xl space-y-2">
|
||||
<h4 className="font-heading text-xs font-bold text-amber-900 uppercase tracking-wider flex items-center gap-2">
|
||||
<Clock className="w-4 h-4 text-amber-600" />
|
||||
Working Hours
|
||||
</h4>
|
||||
<p className="text-xs text-amber-800 leading-relaxed font-light">
|
||||
Our main Estimating and Planning department in Jubail is available Sunday through Thursday, 8:00 AM to 5:00 PM (GMT+3). Emergency crews are available 24/7 on special turnaround contracts.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{
|
||||
/* Right: Contact Form */
|
||||
}
|
||||
<div className="lg:col-span-7 space-y-8">
|
||||
<div className="bg-slate-100/50 border border-slate-200/50 p-1 rounded-2xl">
|
||||
<ContactForm />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>;
|
||||
}
|
||||
@@ -0,0 +1,96 @@
|
||||
import { useState } from "react";
|
||||
import { motion, AnimatePresence } from "motion/react";
|
||||
import { galleryPhotos } from "../data/content";
|
||||
import SectionHeader from "../components/SectionHeader";
|
||||
const categories = ["All", "Inspection", "Conventional NDT", "Advanced NDT", "Asset Integrity", "Manpower"];
|
||||
export default function Gallery() {
|
||||
const [activeTab, setActiveTab] = useState("All");
|
||||
const filteredPhotos = activeTab === "All" ? galleryPhotos : galleryPhotos.filter((p) => p.category === activeTab);
|
||||
return <div className="bg-slate-50 min-h-screen text-slate-900">
|
||||
|
||||
{
|
||||
/* Page Header */
|
||||
}
|
||||
<section
|
||||
className="relative pt-32 pb-20 md:pt-40 md:pb-28 bg-cover bg-center text-white border-b border-slate-900"
|
||||
style={{ backgroundImage: "url('https://images.unsplash.com/photo-1504307651254-35680f356dfd?auto=format&fit=crop&w=1600&q=80')" }}
|
||||
>
|
||||
<div className="absolute inset-0 bg-slate-950/80 pointer-events-none" />
|
||||
<div className="max-w-7xl mx-auto px-5 md:px-8 relative z-10">
|
||||
<span className="font-mono text-xs font-bold text-orange-400 uppercase tracking-widest bg-orange-500/20 px-3.5 py-1.5 rounded-full border border-orange-500/30">
|
||||
Media Hub
|
||||
</span>
|
||||
<h1 className="font-heading text-4xl md:text-5xl lg:text-6xl font-extrabold tracking-tight mt-5">
|
||||
Field Operations Gallery
|
||||
</h1>
|
||||
<p className="mt-4 max-w-2xl text-slate-300 text-sm sm:text-base md:text-lg leading-relaxed font-light">
|
||||
An inside look at our certified field inspectors, high-frequency ultrasonic tools, and shutdown planning centers.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{
|
||||
/* Gallery Photos Grid with Tabs */
|
||||
}
|
||||
<section className="py-24 max-w-7xl mx-auto px-5 md:px-8">
|
||||
<div className="flex flex-col md:flex-row justify-between items-start md:items-end gap-6 mb-12">
|
||||
<SectionHeader
|
||||
tag="Visual Records"
|
||||
title="Calibrated NDT Field Work"
|
||||
description="View real operations covering magnetic particle tests, vacuum box weld assessments, and computerized tube bundle diagnostics."
|
||||
/>
|
||||
|
||||
{
|
||||
/* Category Tabs */
|
||||
}
|
||||
<div className="flex flex-wrap gap-2 bg-slate-100 p-1.5 rounded-xl border border-slate-200">
|
||||
{categories.map((cat) => <button
|
||||
key={cat}
|
||||
onClick={() => setActiveTab(cat)}
|
||||
className={`text-xs font-bold uppercase tracking-wider px-5 py-2.5 rounded-lg transition-all duration-200 ${activeTab === cat ? "bg-orange-500 text-white shadow-md" : "text-slate-600 hover:text-orange-500"}`}
|
||||
>
|
||||
{cat}
|
||||
</button>)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{
|
||||
/* Dynamic Photo Grid with framer motion layout transitions */
|
||||
}
|
||||
<motion.div
|
||||
layout
|
||||
className="grid sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6"
|
||||
>
|
||||
<AnimatePresence mode="popLayout">
|
||||
{filteredPhotos.map((photo, idx) => <motion.div
|
||||
layout
|
||||
initial={{ opacity: 0, scale: 0.95 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
exit={{ opacity: 0, scale: 0.95 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
key={photo.title}
|
||||
className="bg-white border border-slate-100 rounded-2xl overflow-hidden shadow-sm hover:shadow-lg hover:border-orange-500/20 transition-all duration-300 group flex flex-col justify-between"
|
||||
>
|
||||
<div className="aspect-square overflow-hidden relative bg-slate-100">
|
||||
<img
|
||||
src={photo.image}
|
||||
alt={photo.title}
|
||||
className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
|
||||
referrerPolicy="no-referrer"
|
||||
/>
|
||||
<span className="absolute top-3 left-3 bg-slate-950/80 text-white font-mono text-[9px] uppercase tracking-wider px-2 py-0.5 rounded">
|
||||
{photo.category}
|
||||
</span>
|
||||
</div>
|
||||
<div className="p-4 bg-white">
|
||||
<h3 className="font-heading text-xs font-bold text-slate-800 line-clamp-2 leading-snug group-hover:text-orange-500 transition-colors">
|
||||
{photo.title}
|
||||
</h3>
|
||||
</div>
|
||||
</motion.div>)}
|
||||
</AnimatePresence>
|
||||
</motion.div>
|
||||
</section>
|
||||
|
||||
</div>;
|
||||
}
|
||||
@@ -0,0 +1,315 @@
|
||||
import { Link } from "react-router-dom";
|
||||
import { motion } from "motion/react";
|
||||
import { ArrowRight, ShieldCheck, Award, Users, FileText, ChevronRight } from "lucide-react";
|
||||
import { serviceCategories, company, stats, processSteps, blogPosts } from "../data/content";
|
||||
import ServiceCategoryGrid from "../components/ServiceCategoryGrid";
|
||||
import SectionHeader from "../components/SectionHeader";
|
||||
export default function Home() {
|
||||
return <div className="bg-slate-50 min-h-screen text-slate-900">
|
||||
|
||||
{
|
||||
/* 1. Hero Section with dynamic high-contrast design */
|
||||
}
|
||||
<section className="relative pt-32 pb-24 md:pt-44 md:pb-40 bg-slate-950 overflow-hidden text-white border-b border-slate-900">
|
||||
<div className="absolute inset-0 z-0 opacity-40">
|
||||
<img
|
||||
src="https://images.unsplash.com/photo-1504307651254-35680f356dfd?auto=format&fit=crop&w=1600&q=80"
|
||||
alt="Refinery plant industrial inspection"
|
||||
className="w-full h-full object-cover object-center scale-105"
|
||||
referrerPolicy="no-referrer"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-slate-950 via-slate-950/80 to-transparent" />
|
||||
</div>
|
||||
|
||||
{
|
||||
/* Decorative rotating cogs in background for engineered vibe */
|
||||
}
|
||||
<div className="absolute right-[-10%] bottom-[-10%] w-96 h-96 text-orange-500/5 select-none pointer-events-none animate-spin-slow hidden lg:block" aria-hidden="true">
|
||||
<svg fill="currentColor" viewBox="0 0 24 24" className="w-full h-full">
|
||||
<path d="M19.43 12.98c.04-.32.07-.64.07-.98s-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.3-.61-.22l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98s.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.23.09.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div className="max-w-7xl mx-auto px-5 md:px-8 relative z-10">
|
||||
<div className="max-w-3xl">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 15 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5 }}
|
||||
className="inline-flex items-center gap-2 bg-orange-500/20 text-orange-400 border border-orange-500/30 px-3.5 py-1.5 rounded-full text-xs font-bold font-mono uppercase tracking-wider mb-6"
|
||||
>
|
||||
<ShieldCheck className="w-4 h-4" />
|
||||
<span>ISO 9001:2015 Approved Inspection Body</span>
|
||||
</motion.div>
|
||||
|
||||
<motion.h1
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.1 }}
|
||||
className="font-heading text-4xl sm:text-5xl lg:text-6xl font-extrabold tracking-tight leading-[1.1]"
|
||||
>
|
||||
First-Time-Right <br />
|
||||
<span className="text-transparent bg-clip-text bg-gradient-to-r from-orange-400 via-orange-500 to-amber-500">Inspection & Integrity</span>
|
||||
</motion.h1>
|
||||
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.2 }}
|
||||
className="mt-6 text-slate-300 text-sm sm:text-base md:text-lg max-w-2xl font-light leading-relaxed"
|
||||
>
|
||||
{company.intro} Fully calibrated advanced instruments, certified VT Level II/III & API inspectors, and 90,000+ strong personnel resume base for shutdowns across KSA and India.
|
||||
</motion.p>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.3 }}
|
||||
className="mt-10 flex flex-wrap gap-4 items-center"
|
||||
>
|
||||
<Link
|
||||
to="/contact"
|
||||
className="bg-orange-500 hover:bg-orange-600 text-white font-bold text-xs px-8 py-4 rounded-xl tracking-wider uppercase shadow-lg hover:shadow-orange-500/20 hover:-translate-y-0.5 active:translate-y-0 transition-all duration-200 flex items-center gap-2"
|
||||
>
|
||||
<span>Request Inspection Proposal</span>
|
||||
<ArrowRight className="w-4 h-4 text-white" />
|
||||
</Link>
|
||||
<Link
|
||||
to="/about"
|
||||
className="bg-slate-900 hover:bg-slate-800 text-white border border-slate-800 font-bold text-xs px-8 py-4 rounded-xl tracking-wider uppercase transition-all duration-200"
|
||||
>
|
||||
Learn More
|
||||
</Link>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{
|
||||
/* 2. Key Stats Strip (High-contrast card grid overlay) */
|
||||
}
|
||||
<section className="relative z-10 -mt-10 max-w-7xl mx-auto px-5 md:px-8">
|
||||
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6">
|
||||
{stats.map((s, idx) => <motion.div
|
||||
key={s.label}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.4, delay: idx * 0.05 }}
|
||||
className="bg-white border border-slate-100 p-5 sm:p-7 rounded-2xl shadow-xl flex flex-col justify-between"
|
||||
>
|
||||
<span className="font-heading text-2xl sm:text-3xl font-extrabold text-orange-500 block tracking-tight">
|
||||
{s.value}
|
||||
</span>
|
||||
<span className="text-xs text-slate-500 font-medium mt-1 leading-normal">
|
||||
{s.label}
|
||||
</span>
|
||||
</motion.div>)}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{
|
||||
/* 3. Welcome / Executive Statement */
|
||||
}
|
||||
<section className="py-24 max-w-7xl mx-auto px-5 md:px-8">
|
||||
<div className="grid lg:grid-cols-2 gap-12 items-center">
|
||||
<div>
|
||||
<SectionHeader
|
||||
tag="Corporate Profile"
|
||||
title="ISO 9001:2015 Approved Engineering Services"
|
||||
description="A powerhouse of technical excellence supporting Upstream, Downstream, Marine, Power and Infrastructure developments with uncompromising compliance."
|
||||
/>
|
||||
<div className="space-y-4 text-slate-500 font-light text-sm leading-relaxed">
|
||||
<p>{company.about[0]}</p>
|
||||
<p>{company.about[1]}</p>
|
||||
</div>
|
||||
<div className="mt-8">
|
||||
<Link
|
||||
to="/about"
|
||||
className="inline-flex items-center gap-2 text-xs font-bold text-orange-500 uppercase tracking-wider hover:text-orange-600 transition-colors"
|
||||
>
|
||||
<span>Read executive group statement</span>
|
||||
<ChevronRight className="w-4 h-4" />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid sm:grid-cols-2 gap-6">
|
||||
<div className="bg-white p-6 rounded-2xl border border-slate-100 shadow-sm space-y-4">
|
||||
<div className="w-10 h-10 rounded-xl bg-orange-500/10 text-orange-600 flex items-center justify-center">
|
||||
<ShieldCheck className="w-5 h-5" />
|
||||
</div>
|
||||
<h3 className="font-heading text-lg font-bold text-slate-900">Total Quality</h3>
|
||||
<p className="text-xs text-slate-500 leading-relaxed font-light">
|
||||
Stringent code compliance per ASME Section V, API standards, NACE and ASTM guidelines.
|
||||
</p>
|
||||
</div>
|
||||
<div className="bg-white p-6 rounded-2xl border border-slate-100 shadow-sm space-y-4">
|
||||
<div className="w-10 h-10 rounded-xl bg-orange-500/10 text-orange-600 flex items-center justify-center">
|
||||
<Award className="w-5 h-5" />
|
||||
</div>
|
||||
<h3 className="font-heading text-lg font-bold text-slate-900">First-Time-Right</h3>
|
||||
<p className="text-xs text-slate-500 leading-relaxed font-light">
|
||||
Specialized in reducing outside resources while preserving safety and data integrity.
|
||||
</p>
|
||||
</div>
|
||||
<div className="bg-white p-6 rounded-2xl border border-slate-100 shadow-sm space-y-4">
|
||||
<div className="w-10 h-10 rounded-xl bg-orange-500/10 text-orange-600 flex items-center justify-center">
|
||||
<Users className="w-5 h-5" />
|
||||
</div>
|
||||
<h3 className="font-heading text-lg font-bold text-slate-900">Outsourcing database</h3>
|
||||
<p className="text-xs text-slate-500 leading-relaxed font-light">
|
||||
Access to over 90,000 vetted resumes, allowing quick shutdown mobilization.
|
||||
</p>
|
||||
</div>
|
||||
<div className="bg-white p-6 rounded-2xl border border-slate-100 shadow-sm space-y-4">
|
||||
<div className="w-10 h-10 rounded-xl bg-orange-500/10 text-orange-600 flex items-center justify-center">
|
||||
<FileText className="w-5 h-5" />
|
||||
</div>
|
||||
<h3 className="font-heading text-lg font-bold text-slate-900">Reporting Accuracy</h3>
|
||||
<p className="text-xs text-slate-500 leading-relaxed font-light">
|
||||
Clear digital records, remaining life estimations, and post-turnaround evaluations.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{
|
||||
/* 4. Service Categories Grid */
|
||||
}
|
||||
<section className="bg-slate-100 border-y border-slate-200 py-24">
|
||||
<div className="max-w-7xl mx-auto px-5 md:px-8">
|
||||
<SectionHeader
|
||||
align="center"
|
||||
tag="Inspection Scope"
|
||||
title="Our Engineering & Testing Specialties"
|
||||
description="Our divisions work independently or integrate seamlessly to deliver total asset assurance."
|
||||
/>
|
||||
<ServiceCategoryGrid categories={serviceCategories} />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{
|
||||
/* 5. Process Roadmap Section (staggered timeline) */
|
||||
}
|
||||
<section className="py-24 max-w-7xl mx-auto px-5 md:px-8">
|
||||
<SectionHeader
|
||||
align="center"
|
||||
tag="Engagement Model"
|
||||
title="Engineered Process Lifecycle"
|
||||
description="How we prepare, execute, and deliver first-time-right assurance for complex structures."
|
||||
/>
|
||||
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 mt-12">
|
||||
{processSteps.map((step) => <motion.div
|
||||
key={step.step}
|
||||
initial={{ opacity: 0, y: 15 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.4 }}
|
||||
className="bg-white border border-slate-100 p-8 rounded-2xl shadow-sm relative group"
|
||||
>
|
||||
<span className="font-mono text-3xl font-bold text-orange-500/20 absolute top-6 right-8 group-hover:text-orange-500/35 transition-colors">
|
||||
{step.step}
|
||||
</span>
|
||||
<h3 className="font-heading text-lg font-bold text-slate-900 mt-2 flex items-center gap-2">
|
||||
<span className="w-1.5 h-6 bg-orange-500 rounded-full" />
|
||||
{step.title}
|
||||
</h3>
|
||||
<p className="text-xs text-slate-500 mt-4 leading-relaxed font-light">
|
||||
{step.description}
|
||||
</p>
|
||||
</motion.div>)}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{
|
||||
/* 6. Technical Insights Block (Latest from blog) */
|
||||
}
|
||||
<section className="bg-slate-900 text-white border-t border-slate-950 py-24">
|
||||
<div className="max-w-7xl mx-auto px-5 md:px-8">
|
||||
<div className="flex flex-col md:flex-row md:items-end justify-between mb-12">
|
||||
<SectionHeader
|
||||
dark
|
||||
tag="Technical Insights"
|
||||
title="Industry Standards & NDT Insights"
|
||||
description="Read detailed analysis and breakdown of industrial safety codes, API standards, and testing procedures from our Level III experts."
|
||||
/>
|
||||
<Link
|
||||
to="/gallery"
|
||||
className="mt-4 md:mt-0 bg-orange-500 hover:bg-orange-600 text-white font-bold text-xs px-6 py-3.5 rounded-xl uppercase tracking-wider transition-all duration-200"
|
||||
>
|
||||
View Media Gallery
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-8">
|
||||
{blogPosts.map((post) => <article key={post.id} className="bg-slate-950 border border-slate-800 rounded-2xl overflow-hidden shadow-xl hover:-translate-y-1 transition-all duration-300">
|
||||
<div className="aspect-[3/2] overflow-hidden relative">
|
||||
<img
|
||||
src={post.image}
|
||||
alt={post.title}
|
||||
className="w-full h-full object-cover transition-transform duration-500 hover:scale-105"
|
||||
referrerPolicy="no-referrer"
|
||||
/>
|
||||
<span className="absolute top-4 left-4 bg-orange-500 text-white font-bold text-[9px] uppercase tracking-wider px-2.5 py-1 rounded">
|
||||
{post.category}
|
||||
</span>
|
||||
</div>
|
||||
<div className="p-6 space-y-4">
|
||||
<div className="flex items-center gap-3 text-[10px] text-slate-400 font-mono">
|
||||
<span>{post.date}</span>
|
||||
<span>•</span>
|
||||
<span>{post.readTime}</span>
|
||||
</div>
|
||||
<h3 className="font-heading text-base font-bold text-white hover:text-orange-400 transition-colors line-clamp-2">
|
||||
{post.title}
|
||||
</h3>
|
||||
<p className="text-xs text-slate-400 font-light leading-relaxed line-clamp-3">
|
||||
{post.excerpt}
|
||||
</p>
|
||||
<div className="pt-4 border-t border-slate-800 flex items-center justify-between text-[11px]">
|
||||
<span className="text-slate-400">By <strong>{post.author}</strong></span>
|
||||
<Link to="/contact" className="text-orange-400 hover:text-orange-300 font-bold uppercase tracking-wider flex items-center gap-1">
|
||||
<span>Full Text</span>
|
||||
<ArrowRight className="w-3.5 h-3.5" />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</article>)}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{
|
||||
/* 7. Bottom CTA */
|
||||
}
|
||||
<section className="bg-orange-500 text-white py-16 relative overflow-hidden">
|
||||
<div className="max-w-5xl mx-auto px-5 md:px-8 text-center relative z-10 space-y-6">
|
||||
<h2 className="font-heading text-3xl sm:text-4xl font-extrabold tracking-tight leading-none text-white">
|
||||
Ready to secure your refinery turnaround or pipeline NDT scope?
|
||||
</h2>
|
||||
<p className="text-sm font-light max-w-2xl mx-auto text-orange-50">
|
||||
Let our planning engineers audit your NDT procedures or assist you in mobilizing highly qualified technical personnel. We deliver accurate results per ASME & API requirements.
|
||||
</p>
|
||||
<div className="pt-4 flex flex-wrap gap-4 justify-center">
|
||||
<Link
|
||||
to="/contact"
|
||||
className="bg-slate-950 hover:bg-slate-900 text-white font-bold text-xs px-8 py-4 rounded-xl tracking-wider uppercase shadow-xl transition-all duration-200"
|
||||
>
|
||||
Get Technical Consultation
|
||||
</Link>
|
||||
<a
|
||||
href="tel:+966571033252"
|
||||
className="bg-white hover:bg-orange-50 text-orange-600 font-bold text-xs px-8 py-4 rounded-xl tracking-wider uppercase transition-all duration-200 flex items-center gap-2 shadow-sm"
|
||||
>
|
||||
<span>Call Operations</span>
|
||||
<span>+966 57 103 3252</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>;
|
||||
}
|
||||
@@ -0,0 +1,86 @@
|
||||
import { Link } from "react-router-dom";
|
||||
import { motion } from "motion/react";
|
||||
import { ArrowRight, CheckCircle2 } from "lucide-react";
|
||||
import { industries } from "../data/content";
|
||||
import SectionHeader from "../components/SectionHeader";
|
||||
export default function Industries() {
|
||||
return <div className="bg-slate-50 min-h-screen text-slate-900">
|
||||
|
||||
{
|
||||
/* Page Header Banner */
|
||||
}
|
||||
<section
|
||||
className="relative pt-32 pb-20 md:pt-40 md:pb-28 bg-cover bg-center text-white border-b border-slate-900"
|
||||
style={{ backgroundImage: "url('https://images.unsplash.com/photo-1518709268805-4e9042af9f23?auto=format&fit=crop&w=1600&q=80')" }}
|
||||
>
|
||||
<div className="absolute inset-0 bg-slate-950/80 pointer-events-none" />
|
||||
<div className="max-w-7xl mx-auto px-5 md:px-8 relative z-10">
|
||||
<span className="font-mono text-xs font-bold text-orange-400 uppercase tracking-widest bg-orange-500/20 px-3.5 py-1.5 rounded-full border border-orange-500/30">
|
||||
Sector Coverage
|
||||
</span>
|
||||
<h1 className="font-heading text-4xl md:text-5xl lg:text-6xl font-extrabold tracking-tight mt-5">
|
||||
Industries We Serve
|
||||
</h1>
|
||||
<p className="mt-4 max-w-2xl text-slate-300 text-sm sm:text-base md:text-lg leading-relaxed font-light">
|
||||
Providing custom non-destructive testing, ASME code compliance, and specialized technical inspectors across 30+ sectors.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{
|
||||
/* Grid of Sectors */
|
||||
}
|
||||
<section className="py-24 max-w-7xl mx-auto px-5 md:px-8">
|
||||
<SectionHeader
|
||||
tag="Full Catalog"
|
||||
title="Industrial Markets Supported"
|
||||
description="From high-pressure upstream refining to duplex structural offshore welds, our procedures fit perfectly into any quality-assurance program."
|
||||
/>
|
||||
|
||||
<div className="grid sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6 mt-12">
|
||||
{industries.map((industry, idx) => <motion.div
|
||||
key={industry}
|
||||
initial={{ opacity: 0, y: 15 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.3, delay: idx * 0.02 }}
|
||||
className="bg-white border border-slate-100 p-6 rounded-2xl shadow-sm hover:shadow-md hover:border-orange-500/20 hover:-translate-y-0.5 transition-all duration-350 flex items-center gap-3.5"
|
||||
>
|
||||
<span className="w-5 h-5 rounded-full bg-orange-500/10 text-orange-600 flex items-center justify-center shrink-0">
|
||||
<CheckCircle2 className="w-3.5 h-3.5" />
|
||||
</span>
|
||||
<span className="text-sm font-semibold text-slate-800 leading-normal">
|
||||
{industry}
|
||||
</span>
|
||||
</motion.div>)}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{
|
||||
/* Standard compliance block */
|
||||
}
|
||||
<section className="bg-slate-100 border-y border-slate-200 py-16">
|
||||
<div className="max-w-4xl mx-auto px-5 md:px-8 text-center space-y-4">
|
||||
<h3 className="font-heading text-lg font-bold text-slate-900">Strict Standards Compatibility</h3>
|
||||
<p className="text-xs text-slate-500 leading-relaxed font-light">
|
||||
All inspectors undergo on-going theoretical training to maintain updated knowledge regarding specific industrial standard amendments—including ASME B31.3 for piping, ASME Section VIII for pressure vessels, API 510/570/653 inspections, and AWS/ASNT Level II / III code requirements.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{
|
||||
/* Bottom CTA */
|
||||
}
|
||||
<section className="max-w-4xl mx-auto px-5 md:px-8 py-20 text-center relative z-10">
|
||||
<p className="text-slate-500 font-light text-xs sm:text-sm">Need help evaluating code compliance or outlining test procedures for your sector?</p>
|
||||
<Link
|
||||
to="/contact"
|
||||
className="inline-flex items-center gap-2 mt-6 bg-orange-500 hover:bg-orange-600 text-white font-bold text-xs px-8 py-4 rounded-xl tracking-wider uppercase shadow-md transition-all duration-200 group"
|
||||
>
|
||||
<span>Ask An Estimating Engineer</span>
|
||||
<ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform text-white" />
|
||||
</Link>
|
||||
</section>
|
||||
|
||||
</div>;
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
import { Link } from "react-router-dom";
|
||||
import { ArrowLeft, Ban } from "lucide-react";
|
||||
export default function NotFound() {
|
||||
return <div className="bg-slate-50 min-h-screen text-slate-900 flex flex-col items-center justify-center p-6 text-center">
|
||||
<div className="w-16 h-16 rounded-full bg-orange-500/10 text-orange-600 flex items-center justify-center mb-6">
|
||||
<Ban className="w-8 h-8" />
|
||||
</div>
|
||||
<h1 className="font-heading text-4xl sm:text-5xl font-extrabold tracking-tight">404 - Page Not Found</h1>
|
||||
<p className="text-sm font-light text-slate-500 max-w-md mt-4 leading-relaxed">
|
||||
The requested resource or service division URL is unavailable. Please check the address or return to our homepage.
|
||||
</p>
|
||||
<Link
|
||||
to="/"
|
||||
className="mt-8 bg-orange-500 hover:bg-orange-600 text-white font-bold text-xs px-8 py-3.5 rounded-xl uppercase tracking-wider transition-all duration-200 flex items-center gap-2 shadow-md"
|
||||
>
|
||||
<ArrowLeft className="w-4 h-4 text-white" />
|
||||
<span>Return to Homepage</span>
|
||||
</Link>
|
||||
</div>;
|
||||
}
|
||||
@@ -0,0 +1,123 @@
|
||||
import { useState } from "react";
|
||||
import { motion, AnimatePresence } from "motion/react";
|
||||
import { projectsList } from "../data/content";
|
||||
import SectionHeader from "../components/SectionHeader";
|
||||
import { MapPin, Calendar, ChevronRight } from "lucide-react";
|
||||
import { Link } from "react-router-dom";
|
||||
const categories = ["All", "Inspection", "Advanced NDT", "Asset Integrity", "Manpower"];
|
||||
export default function Projects() {
|
||||
const [activeTab, setActiveTab] = useState("All");
|
||||
const filteredProjects = activeTab === "All" ? projectsList : projectsList.filter((p) => p.category === activeTab);
|
||||
return <div className="bg-slate-50 min-h-screen text-slate-900">
|
||||
|
||||
{
|
||||
/* Page Header */
|
||||
}
|
||||
<section
|
||||
className="relative pt-32 pb-20 md:pt-40 md:pb-28 bg-cover bg-center text-white border-b border-slate-900"
|
||||
style={{ backgroundImage: "url('https://images.unsplash.com/photo-1541888946425-d81bb19240f5?auto=format&fit=crop&w=1600&q=80')" }}
|
||||
>
|
||||
<div className="absolute inset-0 bg-slate-950/80 pointer-events-none" />
|
||||
<div className="max-w-7xl mx-auto px-5 md:px-8 relative z-10">
|
||||
<span className="font-mono text-xs font-bold text-orange-400 uppercase tracking-widest bg-orange-500/20 px-3.5 py-1.5 rounded-full border border-orange-500/30">
|
||||
Case Studies
|
||||
</span>
|
||||
<h1 className="font-heading text-4xl md:text-5xl lg:text-6xl font-extrabold tracking-tight mt-5">
|
||||
Our Completed Projects
|
||||
</h1>
|
||||
<p className="mt-4 max-w-2xl text-slate-300 text-sm sm:text-base md:text-lg leading-relaxed font-light">
|
||||
Real mechanical-integrity evaluations, advanced NDT scans, and technical manpower shutdowns delivered across KSA and India.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{
|
||||
/* Projects Grid Section with Filter Tabs */
|
||||
}
|
||||
<section className="py-24 max-w-7xl mx-auto px-5 md:px-8">
|
||||
<div className="flex flex-col md:flex-row justify-between items-start md:items-end gap-6 mb-12">
|
||||
<SectionHeader
|
||||
tag="Proven Results"
|
||||
title="Integrity Assurance in Action"
|
||||
description="Browse case reports covering refinery turnarounds, cross-country pipelines, offshore welds, and advanced tube scans."
|
||||
/>
|
||||
|
||||
{
|
||||
/* Category Tabs */
|
||||
}
|
||||
<div className="flex flex-wrap gap-2 bg-slate-100 p-1.5 rounded-xl border border-slate-200">
|
||||
{categories.map((cat) => <button
|
||||
key={cat}
|
||||
onClick={() => setActiveTab(cat)}
|
||||
className={`text-xs font-bold uppercase tracking-wider px-5 py-2.5 rounded-lg transition-all duration-200 ${activeTab === cat ? "bg-orange-500 text-white shadow-md" : "text-slate-600 hover:text-orange-500"}`}
|
||||
>
|
||||
{cat}
|
||||
</button>)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{
|
||||
/* Dynamic Project Grid with framer motion animations */
|
||||
}
|
||||
<motion.div
|
||||
layout
|
||||
className="grid md:grid-cols-2 lg:grid-cols-3 gap-8"
|
||||
>
|
||||
<AnimatePresence mode="popLayout">
|
||||
{filteredProjects.map((p) => <motion.article
|
||||
layout
|
||||
initial={{ opacity: 0, scale: 0.95 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
exit={{ opacity: 0, scale: 0.95 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
key={p.id}
|
||||
className="bg-white border border-slate-100 rounded-2xl overflow-hidden shadow-md flex flex-col justify-between group hover:border-orange-500/20 hover:-translate-y-1 transition-all duration-300"
|
||||
>
|
||||
<div>
|
||||
<div className="aspect-[4/3] bg-slate-100 relative overflow-hidden">
|
||||
<img
|
||||
src={p.image}
|
||||
alt={p.title}
|
||||
className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
|
||||
referrerPolicy="no-referrer"
|
||||
/>
|
||||
<span className="absolute top-4 left-4 bg-orange-500 text-white font-bold text-[9px] uppercase tracking-wider px-3 py-1 rounded-full border border-orange-500/20 shadow-md">
|
||||
{p.category}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="p-6 space-y-4">
|
||||
<div className="flex flex-wrap gap-x-4 gap-y-2 text-[11px] text-slate-500 font-medium">
|
||||
<span className="flex items-center gap-1.5">
|
||||
<MapPin className="w-3.5 h-3.5 text-orange-500 shrink-0" />
|
||||
<span>{p.location}</span>
|
||||
</span>
|
||||
<span className="flex items-center gap-1.5">
|
||||
<Calendar className="w-3.5 h-3.5 text-orange-500 shrink-0" />
|
||||
<span>{p.year}</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<h3 className="font-heading text-lg font-bold text-slate-900 group-hover:text-orange-500 transition-colors">
|
||||
{p.title}
|
||||
</h3>
|
||||
<p className="text-xs text-slate-500 leading-relaxed font-light">
|
||||
{p.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-6 pt-0 mt-2 border-t border-slate-50 flex items-center justify-between text-[11px]">
|
||||
<span className="text-slate-400">Client: <strong>{p.client}</strong></span>
|
||||
<Link to="/contact" className="text-orange-500 hover:text-orange-600 font-bold uppercase tracking-wider flex items-center gap-1">
|
||||
<span>Enquire</span>
|
||||
<ChevronRight className="w-3.5 h-3.5" />
|
||||
</Link>
|
||||
</div>
|
||||
</motion.article>)}
|
||||
</AnimatePresence>
|
||||
</motion.div>
|
||||
</section>
|
||||
|
||||
</div>;
|
||||
}
|
||||
@@ -0,0 +1,77 @@
|
||||
import { Link } from "react-router-dom";
|
||||
import { ArrowRight, Info } from "lucide-react";
|
||||
import { advancedNdt } from "../data/content";
|
||||
import MethodCard from "../components/MethodCard";
|
||||
import SectionHeader from "../components/SectionHeader";
|
||||
export default function ServicesAdvanced() {
|
||||
return <div className="bg-slate-50 min-h-screen text-slate-900">
|
||||
|
||||
{
|
||||
/* Hero Banner Section */
|
||||
}
|
||||
<section
|
||||
className="relative pt-32 pb-24 md:pt-40 md:pb-32 bg-cover bg-center text-white border-b border-slate-900"
|
||||
style={{ backgroundImage: "url('https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?auto=format&fit=crop&w=1600&q=80')" }}
|
||||
>
|
||||
<div className="absolute inset-0 bg-slate-950/85 pointer-events-none" />
|
||||
<div className="max-w-7xl mx-auto px-5 md:px-8 relative z-10">
|
||||
<span className="font-mono text-xs font-bold text-orange-400 uppercase tracking-widest bg-orange-500/20 px-3.5 py-1.5 rounded-full border border-orange-500/30">
|
||||
{advancedNdt.tag}
|
||||
</span>
|
||||
<h1 className="font-heading text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-extrabold tracking-tight mt-5 leading-tight">
|
||||
{advancedNdt.title}
|
||||
</h1>
|
||||
<p className="mt-4 max-w-2xl text-slate-300 text-sm sm:text-base md:text-lg leading-relaxed font-light">
|
||||
{advancedNdt.lead}
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{
|
||||
/* Grid of NDT Methods */
|
||||
}
|
||||
<section className="py-24 max-w-7xl mx-auto px-5 md:px-8">
|
||||
<SectionHeader
|
||||
tag="High-Tech Division"
|
||||
title="Electromagnetic & Ultrasonic Advanced NDT"
|
||||
description="Leveraging computerized instrument arrays (including IRIS and Olympus testing bundles) to inspect complex boiler and heat-exchanger tubes."
|
||||
/>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-8 mt-12">
|
||||
{advancedNdt.methods.map((method) => <MethodCard key={method.code} method={method} />)}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{
|
||||
/* Extra informational note */
|
||||
}
|
||||
<section className="bg-slate-100 border-y border-slate-200 py-16">
|
||||
<div className="max-w-4xl mx-auto px-5 md:px-8 bg-white border border-slate-200 rounded-2xl p-8 shadow-sm flex flex-col md:flex-row items-start gap-5">
|
||||
<div className="w-10 h-10 bg-orange-500/10 text-orange-600 flex items-center justify-center rounded-xl shrink-0">
|
||||
<Info className="w-5 h-5" />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<h3 className="font-heading text-base font-bold text-slate-900">Pre-Testing Surface Preparation Guidelines</h3>
|
||||
<p className="text-xs text-slate-500 leading-relaxed font-light">
|
||||
For electromagnetic ECT, RFET, and IRIS inspections, tubes must be cleaned via high-pressure hydro-jetting prior to diagnostic testing. Our inspectors utilize dummy rods to verify diameter compliance before introducing sensitive diagnostic probes, ensuring complete reliability of all collected wall-thickness datasets.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{
|
||||
/* Bottom CTA */
|
||||
}
|
||||
<section className="max-w-4xl mx-auto px-5 md:px-8 py-20 text-center relative z-10">
|
||||
<p className="text-slate-500 font-light text-xs sm:text-sm">Need a complete technical proposal for heat exchanger tube bundle analysis?</p>
|
||||
<Link
|
||||
to="/contact"
|
||||
className="inline-flex items-center gap-2 mt-6 bg-orange-500 hover:bg-orange-600 text-white font-bold text-xs px-8 py-4 rounded-xl tracking-wider uppercase shadow-md transition-all duration-200 group"
|
||||
>
|
||||
<span>Request Tube-Inspection Crew</span>
|
||||
<ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform text-white" />
|
||||
</Link>
|
||||
</section>
|
||||
|
||||
</div>;
|
||||
}
|
||||
@@ -0,0 +1,100 @@
|
||||
import { Link } from "react-router-dom";
|
||||
import { motion } from "motion/react";
|
||||
import { ArrowRight, ShieldAlert, BadgeHelp } from "lucide-react";
|
||||
import { assetIntegrity } from "../data/content";
|
||||
import SectionHeader from "../components/SectionHeader";
|
||||
export default function ServicesAssetIntegrity() {
|
||||
return <div className="bg-slate-50 min-h-screen text-slate-900">
|
||||
|
||||
{
|
||||
/* Page Header (Background Image + Slate Mask) */
|
||||
}
|
||||
<section
|
||||
className="relative pt-32 pb-24 md:pt-40 md:pb-32 bg-cover bg-center text-white border-b border-slate-900"
|
||||
style={{ backgroundImage: "url('https://images.unsplash.com/photo-1541888946425-d81bb19240f5?auto=format&fit=crop&w=1600&q=80')" }}
|
||||
>
|
||||
<div className="absolute inset-0 bg-slate-950/80 pointer-events-none" />
|
||||
<div className="max-w-7xl mx-auto px-5 md:px-8 relative z-10">
|
||||
<span className="font-mono text-xs font-bold text-orange-400 uppercase tracking-widest bg-orange-500/20 px-3.5 py-1.5 rounded-full border border-orange-500/30">
|
||||
{assetIntegrity.tag}
|
||||
</span>
|
||||
<h1 className="font-heading text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-extrabold tracking-tight mt-5 leading-tight">
|
||||
{assetIntegrity.title}
|
||||
</h1>
|
||||
<p className="mt-4 max-w-2xl text-slate-300 text-sm sm:text-base md:text-lg leading-relaxed font-light">
|
||||
{assetIntegrity.lead}
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{
|
||||
/* Services List Grid */
|
||||
}
|
||||
<section className="py-24 max-w-7xl mx-auto px-5 md:px-8">
|
||||
<SectionHeader
|
||||
tag="Engineering Scope"
|
||||
title="Asset Integrity & Mechanical Evaluations"
|
||||
description="Providing complete Risk Based Inspection (RBI), Fitness for Service (FFS), and root-cause analysis solutions to protect plant lifespans."
|
||||
/>
|
||||
|
||||
<div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6 mt-12">
|
||||
{assetIntegrity.services.map((service, idx) => <motion.div
|
||||
key={service}
|
||||
initial={{ opacity: 0, y: 15 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.3, delay: idx * 0.02 }}
|
||||
className="bg-white border border-slate-100 p-6 rounded-2xl shadow-sm hover:shadow-md hover:border-orange-500/20 transition-all duration-300 flex gap-4 items-start"
|
||||
>
|
||||
<span className="w-8 h-8 rounded-xl bg-orange-500/10 text-orange-600 flex items-center justify-center font-mono text-xs font-bold shrink-0">
|
||||
{String(idx + 1).padStart(2, "0")}
|
||||
</span>
|
||||
<p className="text-sm font-semibold text-slate-800 leading-normal">
|
||||
{service}
|
||||
</p>
|
||||
</motion.div>)}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{
|
||||
/* Code Compliance Highlight */
|
||||
}
|
||||
<section className="bg-slate-100 border-y border-slate-200 py-16">
|
||||
<div className="max-w-4xl mx-auto px-5 md:px-8 grid sm:grid-cols-2 gap-8">
|
||||
<div className="bg-white border border-slate-200 p-6 rounded-2xl shadow-sm space-y-4">
|
||||
<div className="w-10 h-10 bg-orange-500/10 text-orange-600 flex items-center justify-center rounded-xl">
|
||||
<ShieldAlert className="w-5 h-5" />
|
||||
</div>
|
||||
<h3 className="font-heading text-lg font-bold text-slate-900">API 579 / ASME FFS</h3>
|
||||
<p className="text-xs text-slate-500 leading-relaxed font-light">
|
||||
We perform quantitative engineering analysis of pressurized equipment containing localized wall thinnings, pitting, or cracking to verify safe continued operation limits.
|
||||
</p>
|
||||
</div>
|
||||
<div className="bg-white border border-slate-200 p-6 rounded-2xl shadow-sm space-y-4">
|
||||
<div className="w-10 h-10 bg-orange-500/10 text-orange-600 flex items-center justify-center rounded-xl">
|
||||
<BadgeHelp className="w-5 h-5" />
|
||||
</div>
|
||||
<h3 className="font-heading text-lg font-bold text-slate-900">Root-Cause Analysis</h3>
|
||||
<p className="text-xs text-slate-500 leading-relaxed font-light">
|
||||
When industrial components fail prematurely, our Level III metallurgical consultants execute failure studies and suggest tailored remedies to prevent recurrence.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{
|
||||
/* Bottom CTA */
|
||||
}
|
||||
<section className="max-w-4xl mx-auto px-5 md:px-8 py-20 text-center relative z-10">
|
||||
<p className="text-slate-500 font-light text-xs sm:text-sm">Ready to draft a Risk Based Inspection (RBI) study for your processing facility?</p>
|
||||
<Link
|
||||
to="/contact"
|
||||
className="inline-flex items-center gap-2 mt-6 bg-orange-500 hover:bg-orange-600 text-white font-bold text-xs px-8 py-4 rounded-xl tracking-wider uppercase shadow-md transition-all duration-200 group"
|
||||
>
|
||||
<span>Enquire About Engineering Services</span>
|
||||
<ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform text-white" />
|
||||
</Link>
|
||||
</section>
|
||||
|
||||
</div>;
|
||||
}
|
||||
@@ -0,0 +1,75 @@
|
||||
import { Link } from "react-router-dom";
|
||||
import { ArrowRight, Sparkles } from "lucide-react";
|
||||
import { conventionalNdt } from "../data/content";
|
||||
import MethodCard from "../components/MethodCard";
|
||||
import SectionHeader from "../components/SectionHeader";
|
||||
export default function ServicesConventional() {
|
||||
return <div className="bg-slate-50 min-h-screen text-slate-900">
|
||||
|
||||
{
|
||||
/* Hero Banner Section */
|
||||
}
|
||||
<section
|
||||
className="relative pt-32 pb-24 md:pt-40 md:pb-32 bg-cover bg-center text-white border-b border-slate-900"
|
||||
style={{ backgroundImage: "url('https://images.unsplash.com/photo-1504307651254-35680f356dfd?auto=format&fit=crop&w=1600&q=80')" }}
|
||||
>
|
||||
<div className="absolute inset-0 bg-slate-950/85 pointer-events-none" />
|
||||
<div className="max-w-7xl mx-auto px-5 md:px-8 relative z-10">
|
||||
<span className="font-mono text-xs font-bold text-orange-400 uppercase tracking-widest bg-orange-500/20 px-3.5 py-1.5 rounded-full border border-orange-500/30">
|
||||
{conventionalNdt.tag}
|
||||
</span>
|
||||
<h1 className="font-heading text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-extrabold tracking-tight mt-5 leading-tight">
|
||||
{conventionalNdt.title}
|
||||
</h1>
|
||||
<p className="mt-4 max-w-2xl text-slate-300 text-sm sm:text-base md:text-lg leading-relaxed font-light">
|
||||
{conventionalNdt.lead}
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{
|
||||
/* Grid of NDT Methods */
|
||||
}
|
||||
<section className="py-24 max-w-7xl mx-auto px-5 md:px-8">
|
||||
<SectionHeader
|
||||
tag="Testing Catalog"
|
||||
title="Our Conventional NDT Procedures"
|
||||
description="Every procedure is drafted, calibrated, and supervised by Level III consultants according to international guidelines."
|
||||
/>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-8 mt-12">
|
||||
{conventionalNdt.methods.map((method) => <MethodCard key={method.code} method={method} />)}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{
|
||||
/* Extra highlights block */
|
||||
}
|
||||
<section className="bg-slate-100 border-y border-slate-200 py-16">
|
||||
<div className="max-w-4xl mx-auto px-5 md:px-8 text-center space-y-4">
|
||||
<div className="w-10 h-10 bg-orange-500/10 text-orange-600 flex items-center justify-center rounded-xl mx-auto">
|
||||
<Sparkles className="w-5 h-5" />
|
||||
</div>
|
||||
<h3 className="font-heading text-lg font-bold text-slate-900">Custom Code Adaptability</h3>
|
||||
<p className="text-xs text-slate-500 leading-relaxed font-light">
|
||||
Apart from standard testing methods, Masar NDT qualified technicians are trained to custom-calibrate ultrasonic probes and liquid chemicals to inspect exotic duplex alloys, carbon steel, and fiberglass-reinforced structures.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{
|
||||
/* Bottom CTA */
|
||||
}
|
||||
<section className="max-w-4xl mx-auto px-5 md:px-8 py-20 text-center relative z-10">
|
||||
<p className="text-slate-500 font-light text-xs sm:text-sm">Have specific standard code requirements or technical inspection parameters?</p>
|
||||
<Link
|
||||
to="/contact"
|
||||
className="inline-flex items-center gap-2 mt-6 bg-orange-500 hover:bg-orange-600 text-white font-bold text-xs px-8 py-4 rounded-xl tracking-wider uppercase shadow-md transition-all duration-200 group"
|
||||
>
|
||||
<span>Consult Our ASNT Level III Team</span>
|
||||
<ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform text-white" />
|
||||
</Link>
|
||||
</section>
|
||||
|
||||
</div>;
|
||||
}
|
||||
@@ -0,0 +1,94 @@
|
||||
import { Link } from "react-router-dom";
|
||||
import { motion } from "motion/react";
|
||||
import { ArrowRight, ShieldCheck, Cog } from "lucide-react";
|
||||
import { inspection } from "../data/content";
|
||||
export default function ServicesInspection() {
|
||||
return <div className="bg-slate-50 min-h-screen text-slate-900">
|
||||
|
||||
{
|
||||
/* Page Header (Background Image + Slate Mask + Rotating Cog) */
|
||||
}
|
||||
<section
|
||||
className="relative pt-32 pb-24 md:pt-40 md:pb-32 bg-cover bg-center text-white border-b border-slate-900"
|
||||
style={{ backgroundImage: "url('https://images.unsplash.com/photo-1581092160607-ee22621dd758?auto=format&fit=crop&w=1600&q=80')" }}
|
||||
>
|
||||
<div className="absolute inset-0 bg-slate-950/80 pointer-events-none" />
|
||||
|
||||
{
|
||||
/* Decorative Rotating Cog */
|
||||
}
|
||||
<div className="absolute right-10 bottom-6 w-48 h-48 text-white/5 animate-spin-slow pointer-events-none hidden md:block" aria-hidden="true">
|
||||
<Cog className="w-full h-full" />
|
||||
</div>
|
||||
|
||||
<div className="max-w-7xl mx-auto px-5 md:px-8 relative z-10">
|
||||
<span className="font-mono text-xs font-bold text-orange-400 uppercase tracking-widest bg-orange-500/20 px-3.5 py-1.5 rounded-full border border-orange-500/30">
|
||||
{inspection.tag}
|
||||
</span>
|
||||
<h1 className="font-heading text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-extrabold tracking-tight mt-5 leading-tight">
|
||||
{inspection.title}
|
||||
</h1>
|
||||
<p className="mt-4 max-w-2xl text-slate-300 text-sm sm:text-base md:text-lg leading-relaxed font-light">
|
||||
{inspection.lead}
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{
|
||||
/* Narrative Section */
|
||||
}
|
||||
<section className="max-w-4xl mx-auto px-5 md:px-8 py-20 space-y-8 relative">
|
||||
<div className="absolute right-0 top-10 w-80 h-80 bg-orange-500/5 rounded-full blur-3xl pointer-events-none" />
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6 }}
|
||||
className="space-y-6 text-slate-500 font-light text-sm sm:text-base leading-relaxed relative z-10"
|
||||
>
|
||||
{inspection.body.map((p, idx) => <p key={p} className={idx === 0 ? "text-slate-900 font-bold border-l-4 border-orange-500 pl-4 md:pl-6 text-sm md:text-base leading-relaxed" : ""}>
|
||||
{p}
|
||||
</p>)}
|
||||
</motion.div>
|
||||
</section>
|
||||
|
||||
{
|
||||
/* Shutdown / Turnaround Highlight */
|
||||
}
|
||||
<section className="bg-slate-100 border-y border-slate-200 py-16 relative">
|
||||
<div className="max-w-4xl mx-auto px-5 md:px-8 relative z-10">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.98 }}
|
||||
whileInView={{ opacity: 1, scale: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.5 }}
|
||||
className="bg-white p-6 md:p-10 border border-slate-200 border-l-4 border-l-orange-500 rounded-2xl shadow-sm"
|
||||
>
|
||||
<h2 className="font-heading text-lg md:text-xl text-slate-900 font-bold tracking-tight flex items-center gap-2.5 border-b border-slate-100 pb-4">
|
||||
<ShieldCheck className="w-6 h-6 text-orange-500 shrink-0" />
|
||||
{inspection.highlight.title}
|
||||
</h2>
|
||||
<div className="mt-6 space-y-4 text-slate-500 text-xs sm:text-sm font-light leading-relaxed">
|
||||
{inspection.highlight.body.map((p, idx) => <p key={idx}>{p}</p>)}
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{
|
||||
/* Bottom CTA */
|
||||
}
|
||||
<section className="max-w-4xl mx-auto px-5 md:px-8 py-20 text-center relative z-10">
|
||||
<p className="text-slate-500 font-light text-xs sm:text-sm">Need help scoping your next refinery shutdown or turnaround project?</p>
|
||||
<Link
|
||||
to="/contact"
|
||||
className="inline-flex items-center gap-2 mt-6 bg-orange-500 hover:bg-orange-600 text-white font-bold text-xs px-8 py-4 rounded-xl tracking-wider uppercase shadow-md transition-all duration-200 group"
|
||||
>
|
||||
<span>Talk to Our Planning Team</span>
|
||||
<ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform text-white" />
|
||||
</Link>
|
||||
</section>
|
||||
|
||||
</div>;
|
||||
}
|
||||
@@ -0,0 +1,106 @@
|
||||
import { Link } from "react-router-dom";
|
||||
import { motion } from "motion/react";
|
||||
import { ArrowRight, Award, Briefcase } from "lucide-react";
|
||||
import { manpower } from "../data/content";
|
||||
import SectionHeader from "../components/SectionHeader";
|
||||
export default function ServicesManpower() {
|
||||
return <div className="bg-slate-50 min-h-screen text-slate-900">
|
||||
|
||||
{
|
||||
/* Page Header (Background Image + Slate Mask) */
|
||||
}
|
||||
<section
|
||||
className="relative pt-32 pb-24 md:pt-40 md:pb-32 bg-cover bg-center text-white border-b border-slate-900"
|
||||
style={{ backgroundImage: "url('https://images.unsplash.com/photo-1605647540924-852290f6b0d5?auto=format&fit=crop&w=1600&q=80')" }}
|
||||
>
|
||||
<div className="absolute inset-0 bg-slate-950/80 pointer-events-none" />
|
||||
<div className="max-w-7xl mx-auto px-5 md:px-8 relative z-10">
|
||||
<span className="font-mono text-xs font-bold text-orange-400 uppercase tracking-widest bg-orange-500/20 px-3.5 py-1.5 rounded-full border border-orange-500/30">
|
||||
{manpower.tag}
|
||||
</span>
|
||||
<h1 className="font-heading text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-extrabold tracking-tight mt-5 leading-tight">
|
||||
{manpower.title}
|
||||
</h1>
|
||||
<p className="mt-4 max-w-2xl text-slate-300 text-sm sm:text-base md:text-lg leading-relaxed font-light">
|
||||
{manpower.lead}
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{
|
||||
/* Narrative Section */
|
||||
}
|
||||
<section className="max-w-4xl mx-auto px-5 md:px-8 py-20 relative">
|
||||
<div className="absolute right-0 top-10 w-80 h-80 bg-orange-500/5 rounded-full blur-3xl pointer-events-none" />
|
||||
<div className="space-y-6 text-slate-500 font-light text-sm sm:text-base leading-relaxed relative z-10">
|
||||
{manpower.body.map((p, idx) => <p key={p} className={idx === 0 ? "text-slate-900 font-bold border-l-4 border-orange-500 pl-4 md:pl-6 text-sm md:text-base leading-relaxed" : ""}>
|
||||
{p}
|
||||
</p>)}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{
|
||||
/* Disciplines We Supply */
|
||||
}
|
||||
<section className="bg-slate-100 border-y border-slate-200 py-24">
|
||||
<div className="max-w-7xl mx-auto px-5 md:px-8">
|
||||
<SectionHeader
|
||||
align="center"
|
||||
tag="Outsourcing Profiles"
|
||||
title="Sectors & Disciplines We Support"
|
||||
description="Our database of over 90,000 active resumes ensures rapid personnel screening and deployment for various technical levels."
|
||||
/>
|
||||
|
||||
<div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6 mt-12">
|
||||
{manpower.disciplines.map((discipline, idx) => <motion.div
|
||||
key={discipline}
|
||||
initial={{ opacity: 0, y: 15 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.3, delay: idx * 0.03 }}
|
||||
className="bg-white border border-slate-200/60 p-6 rounded-2xl shadow-sm hover:shadow-md transition-all duration-300 flex items-center gap-4"
|
||||
>
|
||||
<div className="w-10 h-10 bg-orange-500/10 text-orange-600 flex items-center justify-center rounded-xl shrink-0">
|
||||
<Briefcase className="w-5 h-5" />
|
||||
</div>
|
||||
<h3 className="text-sm font-bold text-slate-800 leading-normal">
|
||||
{discipline}
|
||||
</h3>
|
||||
</motion.div>)}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{
|
||||
/* Database details banner */
|
||||
}
|
||||
<section className="py-20 max-w-4xl mx-auto px-5 md:px-8">
|
||||
<div className="bg-white border border-slate-100 p-8 md:p-10 rounded-2xl shadow-md flex flex-col sm:flex-row items-center gap-6">
|
||||
<div className="w-14 h-14 bg-orange-500/10 text-orange-600 rounded-2xl flex items-center justify-center shrink-0">
|
||||
<Award className="w-7 h-7" />
|
||||
</div>
|
||||
<div className="space-y-1.5 text-center sm:text-left">
|
||||
<h4 className="font-heading text-lg font-bold text-slate-900">Rapid Recruitment Referral Channel</h4>
|
||||
<p className="text-xs text-slate-500 leading-relaxed font-light">
|
||||
We vet each candidate using rigorous oral testing, resume validation, and safety understanding assessments before presenting them to clients. This reduces compliance risks on active refineries.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{
|
||||
/* Bottom CTA */
|
||||
}
|
||||
<section className="max-w-4xl mx-auto px-5 md:px-8 py-20 text-center relative z-10">
|
||||
<p className="text-slate-500 font-light text-xs sm:text-sm">Need to mobilize technical personnel for refinery turnarounds ranging from 15 days to several months?</p>
|
||||
<Link
|
||||
to="/contact"
|
||||
className="inline-flex items-center gap-2 mt-6 bg-orange-500 hover:bg-orange-600 text-white font-bold text-xs px-8 py-4 rounded-xl tracking-wider uppercase shadow-md transition-all duration-200 group"
|
||||
>
|
||||
<span>Request Candidate Portfolios</span>
|
||||
<ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform text-white" />
|
||||
</Link>
|
||||
</section>
|
||||
|
||||
</div>;
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2022",
|
||||
"experimentalDecorators": true,
|
||||
"useDefineForClassFields": false,
|
||||
"module": "ESNext",
|
||||
"lib": [
|
||||
"ES2022",
|
||||
"DOM",
|
||||
"DOM.Iterable"
|
||||
],
|
||||
"skipLibCheck": true,
|
||||
"moduleResolution": "bundler",
|
||||
"isolatedModules": true,
|
||||
"moduleDetection": "force",
|
||||
"allowJs": true,
|
||||
"jsx": "react-jsx",
|
||||
"paths": {
|
||||
"@/*": [
|
||||
"./*"
|
||||
]
|
||||
},
|
||||
"allowImportingTsExtensions": true,
|
||||
"noEmit": true
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
import tailwindcss from '@tailwindcss/vite';
|
||||
import react from '@vitejs/plugin-react';
|
||||
import path from 'path';
|
||||
import {defineConfig} from 'vite';
|
||||
|
||||
export default defineConfig(() => {
|
||||
return {
|
||||
plugins: [react(), tailwindcss()],
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': path.resolve(__dirname, '.'),
|
||||
},
|
||||
},
|
||||
server: {
|
||||
hmr: process.env.DISABLE_HMR !== 'true',
|
||||
watch: process.env.DISABLE_HMR === 'true' ? null : {},
|
||||
},
|
||||
};
|
||||
});
|
||||
Reference in New Issue
Block a user