<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Smart Services</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<!-- ================= Header ================= -->
<header class="site-header">
<div class="container nav">
<a href="#" class="brand">
<img src="logo.png" alt="Smart Services logo" class="logo" />
</a>
<nav class="menu" id="mainNav">
<a href="#about">WHO WE ARE</a>
<a href="#expertise">EXPERTISE</a>
<a href="#mvv">MVV</a>
<a href="#services">SERVICES</a>
<a href="#highlights">HIGHLIGHTS</a>
<a href="#journey">JOURNEY</a>
<a href="#clients">CLIENTS</a>
<a href="#contact">CONTACT</a>
</nav>
<button class="hamburger" id="hamburger" aria-label="Toggle menu">
<span></span><span></span><span></span>
</button>
</div>
</header>
<!-- ================= Hero ================= -->
<section class="hero">
<div class="container hero-inner">
<h1 class="reveal">Smart Facility & Resource Management</h1>
<p class="lead reveal">
16+ years of expertise delivering manpower, facility, logistics,
catering, and event management solutions across India.
</p>
<div class="chips reveal">
<span>16+ Years</span><span>20,000+ Workforce</span
><span>Pan-India</span>
</div>
<a href="#services" class="btn reveal">Explore Services</a>
</div>
<div class="hero-blob"></div>
</section>
<!-- ================= About ================= -->
<section id="about">
<div class="container">
<h2 class="section-title">About Us</h2>
<p class="sub">
Since 2009, Smart Services has empowered organizations with end-to-end
manpower and facility solutions across government and corporate
sectors—focused on reliability, compliance, safety, and
sustainability.
</p>
</div>
</section>
<!-- ================= MVV ================= -->
<section id="mvv">
<div class="container">
<h2 class="section-title">Mission – Vision – Values</h2>
<div class="grid grid-3">
<div class="card reveal">
<div class="ic">🎯</div>
<h3>Mission</h3>
<p>
Deliver seamless, sustainable, tech-driven business solutions.
</p>
</div>
<div class="card reveal">
<div class="ic"></div>
<h3>Vision</h3>
<p>
To be India’s most trusted partner in facility & HR management.
</p>
</div>
<div class="card reveal">
<div class="ic">🌱</div>
<h3>Values</h3>
<ul class="list">
<li>Professionalism & Reliability</li>
<li>Innovation & Sustainability</li>
<li>Compliance & Safety</li>
</ul>
</div>
</div>
</div>
</section>
<!-- ================= Services ================= -->
<section id="services">
<div class="container">
<h2 class="section-title">Our Services</h2>
<div class="grid grid-3">
<div class="card reveal">
<div class="ic">👥</div>
<h3>Manpower Management</h3>
<ul class="list">
<li>Skilled / Semi-skilled / Unskilled staffing</li>
<li>Deployment, HR & compliance</li>
<li>Health & wellness programs</li>
</ul>
</div>
<div class="card reveal">
<div class="ic">🏢</div>
<h3>Facility Management</h3>
<ul class="list">
<li>Housekeeping & janitorial</li>
<li>Maintenance (plumbing, electrical, civil)</li>
<li>Pest control, laundry, emergency response</li>
</ul>
</div>
<div class="card reveal">
<div class="ic">🚚</div>
<h3>Logistics Management</h3>
<ul class="list">
<li>Nationwide goods & passenger transport</li>
<li>Supply chain & warehousing</li>
<li>PDS support & public bus ops</li>
</ul>
</div>
<div class="card reveal">
<div class="ic">🍴</div>
<h3>Canteen & Catering</h3>
<ul class="list">
<li>Menu planning (veg / non-veg / special diets)</li>
<li>Fresh procurement & safe storage</li>
<li>Quality control & hygiene compliance</li>
</ul>
</div>
<div class="card reveal">
<div class="ic">🎉</div>
<h3>Event Management</h3>
<ul class="list">
<li>Corporate & social events</li>
<li>Venue, logistics & catering</li>
<li>Security & end-to-end coordination</li>
</ul>
</div>
</div>
</div>
</section>
<!-- ================= Highlights ================= -->
<section id="highlights" class="metrics">
<div class="container">
<h2 class="section-title light">Our Highlights</h2>
<div class="metric-grid">
<div class="metric reveal">16+ Years</div>
<div class="metric reveal">200+ Clients</div>
<div class="metric reveal">100+ Projects</div>
<div class="metric reveal">20,000+ Workforce</div>
<div class="metric reveal">₹200+ Cr Revenue</div>
<a href="presence.html" class="metric reveal">Pan-India Presence</a>
</div>
</div>
</section>
<!-- === OUR PRESENCE (minimal, magazine-style) === -->
<section class="presence-slim">
<div class="container presence-slim__wrap">
<!-- Left copy -->
<div class="presence-slim__left">
<span class="presence-slim__ghost">Our Presence</span>
<h2 class="presence-slim__title">Our Presence</h2>
<ul class="presence-slim__bullets">
<li>
Sales at 27 high fashion boutiques across 8 cities in India.
</li>
<li>
Featured in leading fashion business magazines like Vogue, Elle,
Femina, Verve, India Today, L’Officiel, Woman’s Era, Shoes &
Accessories.
</li>
</ul>
</div>
<!-- Right map -->
<div class="presence-slim__map">
<img
src="india grey map.png"
alt="India map"
class="presence-slim__img"
/>
<!-- Pins (positioned with CSS below) -->
<button
class="pin pin--delhi"
data-label="DELHI"
aria-label="Delhi"
></button>
<button
class="pin pin--punjab"
data-label="PUNJAB"
aria-label="Punjab"
></button>
<button
class="pin pin--raj"
data-label="RAJASTHAN"
aria-label="Rajasthan"
></button>
<button
class="pin pin--guj"
data-label="GUJARAT"
aria-label="Gujarat"
></button>
<button
class="pin pin--mumbai"
data-label="MUMBAI"
aria-label="Mumbai"
></button>
<button
class="pin pin--wb"
data-label="WEST BENGAL"
aria-label="West Bengal"
></button>
<button
class="pin pin--kar"
data-label="KARNATAKA"
aria-label="Karnataka"
></button>
<button
class="pin pin--tn"
data-label="TAMIL NADU"
aria-label="Tamil Nadu"
></button>
</div>
</div>
</section>
<!-- ================= Why Choose + CTA ================= -->
<section class="why-choose">
<div class="container why-cta">
<p class="why-cta__text">
Are you interested in our offer? Do you have any questions?
</p>
<a href="#contact" class="btn btn-dark">Get in touch with us</a>
</div>
<div class="container why-wrap">
<figure class="why-photo card">
<img
src="smiling business woman in suit contact us.png"
alt="Smart Services representative"
/>
</figure>
<div class="why-panel card">
<h2
class="section-title"
style="text-align: left; margin-bottom: 16px"
>
Why People Choose Us?
</h2>
<div class="why-grid">
<article class="why-item">
<div class="why-ico">🧭</div>
<h3 class="why-title">Reliable & On-time</h3>
<p class="why-desc">
Proven delivery across complex, multi-site operations with
strict SLAs.
</p>
<a href="#services" class="why-more">More info</a>
</article>
<article class="why-item">
<div class="why-ico">🔒</div>
<h3 class="why-title">Compliance First</h3>
<p class="why-desc">
100% adherence to labour, safety and quality standards &
documentation.
</p>
<a href="#services" class="why-more">More info</a>
</article>
<article class="why-item">
<div class="why-ico">⚙️</div>
<h3 class="why-title">Skilled Workforce</h3>
<p class="why-desc">
Large, trained pool — skilled, semi-skilled and unskilled —
ready to deploy.
</p>
<a href="#services" class="why-more">More info</a>
</article>
<article class="why-item">
<div class="why-ico">💡</div>
<h3 class="why-title">Tech-Driven</h3>
<p class="why-desc">
Process automation, reporting dashboards and ISO-grade best
practices.
</p>
<a href="#services" class="why-more">More info</a>
</article>
</div>
<div class="why-actions">
<a href="#services" class="btn">Check all features</a>
</div>
</div>
</div>
</section>
<!-- ================= Clients (Marquee) ================= -->
<section id="clients">
<div class="container">
<h2 class="section-title">Our Clients</h2>
<p class="sub">
Trusted by government departments, PSUs and leading corporates across
India.
</p>
<div class="marquee">
<div class="marquee-content">
<div class="logo-tile">RIICO</div>
<div class="logo-tile">Mecc Alte</div>
<div class="logo-tile">BARTI</div>
<div class="logo-tile">CSC</div>
<div class="logo-tile">Magarpatta</div>
<div class="logo-tile">Expleo</div>
<div class="logo-tile">HSCC</div>
<div class="logo-tile">MSWC</div>
<div class="logo-tile">MPCB</div>
<div class="logo-tile">MHADA</div>
<div class="logo-tile">Airports</div>
<div class="logo-tile">More…</div>
<!-- duplicate for seamless loop -->
<div class="logo-tile">RIICO</div>
<div class="logo-tile">Mecc Alte</div>
<div class="logo-tile">BARTI</div>
<div class="logo-tile">CSC</div>
<div class="logo-tile">Magarpatta</div>
<div class="logo-tile">Expleo</div>
<div class="logo-tile">HSCC</div>
<div class="logo-tile">MSWC</div>
<div class="logo-tile">MPCB</div>
<div class="logo-tile">MHADA</div>
<div class="logo-tile">Airports</div>
<div class="logo-tile">More…</div>
</div>
</div>
</div>
</section>
<!-- ================= Contact (Digital-Silk style) ================= -->
<section class="contact-hero">
<div class="ch__grid">
<!-- LEFT -->
<div class="ch__left">
<h2 class="ch__title">
<span class="GRAD">Connect</span> with Our<br />
Team of Experts
</h2>
<p class="ch__sub">
Contact our team of excellence-driven experts today to bring your
project to life.
</p>
<!-- 3 items in one row -->
<div class="ch__row">
<a class="ch__item" href="tel:+912025650310" aria-label="Call us">
<span class="ch__ico">📞</span>
<span>+91 2025650310</span>
</a>
<a
class="ch__item"
href="mailto:info@smartservices.com"
aria-label="Email us"
>
<span class="ch__ico">📧</span>
<span>info@smartservices.com</span>
</a>
<a class="ch__item" href="#presence" aria-label="See our locations">
<span class="ch__ico">📍</span>
<span>See Our Locations</span>
</a>
</div>
<!-- Expert card -->
<div class="expert-card">
<div class="expert-text">
<h3>Want to Join Our<br />Talented Team?</h3>
<a href="#careers" class="btn-link">VISIT OUR JOB BOARD</a>
</div>
<div class="expert-photo">
<img src="Join our team man.png" alt="Expert" />
</div>
</div>
</div>
<!-- RIGHT (Form) -->
<div class="ch__form">
<form onsubmit="return false">
<div class="f__row">
<label class="f__field">
<span>Full Name</span>
<input type="text" placeholder="Full Name" />
</label>
<label class="f__field">
<span>Email Address</span>
<input type="email" placeholder="Email Address" />
</label>
</div>
<div class="f__row">
<label class="f__field">
<span>Phone Number</span>
<input type="tel" placeholder="Phone Number" />
</label>
<label class="f__field">
<span>Location</span>
<input type="text" placeholder="Location" />
</label>
</div>
<label class="f__field">
<span>What Expertise You're Interested In:</span>
<select>
<option value="" selected>Select</option>
<option>Manpower</option>
<option>Facilities Management</option>
<option>Healthcare Infrastructure</option>
<option>Transport & Parking</option>
<option>Catering & Logistics</option>
</select>
</label>
<label class="f__field">
<span>Tell Us About Your Project:</span>
<textarea placeholder="Leave your message here"></textarea>
</label>
<button class="f__submit">SUBMIT <span>→</span></button>
</form>
</div>
</div>
</section>
<!-- ================= Footer ================= -->
<footer class="site-footer">
<p>© 2025 Smart Services Pvt Ltd. All rights reserved.</p>
</footer>
<!-- ================= Tiny JS ================= -->
<script>
// mobile menu
const burger = document.getElementById("hamburger");
const menu = document.getElementById("mainNav");
burger?.addEventListener("click", () => {
burger.classList.toggle("open");
menu.classList.toggle("open");
});
// reveal on scroll
const onReveal = () => {
document.querySelectorAll(".reveal").forEach((el) => {
const r = el.getBoundingClientRect();
if (r.top < window.innerHeight - 80) el.classList.add("show");
});
};
onReveal();
window.addEventListener("scroll", onReveal);
// map list ↔ markers
const items = document.querySelectorAll(".office-list li");
const markers = document.querySelectorAll(".presence-map .marker");
function activate(id) {
markers.forEach((m) => m.classList.toggle("active", m.id === id));
items.forEach((li) =>
li.classList.toggle("focus", li.dataset.target === id)
);
}
function clearActive() {
markers.forEach((m) => m.classList.remove("active"));
items.forEach((li) => li.classList.remove("focus"));
}
items.forEach((li) => {
const id = li.dataset.target;
const marker = document.getElementById(id);
if (!marker) return;
li.addEventListener("mouseenter", () => activate(id));
li.addEventListener("mouseleave", clearActive);
li.addEventListener("click", () => {
activate(id);
document
.querySelector(".presence-map")
.scrollIntoView({ behavior: "smooth", block: "center" });
setTimeout(clearActive, 1200);
});
marker.addEventListener("mouseenter", () => activate(id));
marker.addEventListener("mouseleave", clearActive);
marker.addEventListener("click", () => {
activate(id);
li.scrollIntoView({ behavior: "smooth", block: "nearest" });
setTimeout(clearActive, 1200);
});
});
</script>
</body>
</html>
