<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Geeks ID</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/landing.css.css" />
<link rel="stylesheet" href="https://cdn.tailwindcss.com" />
<link rel="stylesheet" href="css/aos.min.css" />
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<header class="py-4 bg-white">
<div class="container">
<div class="flex flex-col md:flex-row items-center justify-between">
<div class="flex items-center">
<img src="assets/images/logo.svg" alt="logo" />
</div>
<div class="flex gap-2 items-center mt-4 md:mt-0">
<a href="user/dashboad.html"
class="cursor-pointer duration-200 transition-all flex items-center justify-center gap-1 px-5 py-[10px] border border-solid border-indigo-500 hover:border-indigo-500 bg-indigo-500 text-white rounded-md shadow-lg hover:bg-indigo-600 active:bg-indigo-600"
(click)="login()">
Login with Microsoft
</a>
<a href="user/dashboad.html"
class="cursor-pointer duration-200 transition-all flex items-center justify-center gap-1 px-5 py-[10px] border border-solid border-indigo-500 hover:border-indigo-500 bg-indigo-500 text-white rounded-md shadow-lg hover:bg-indigo-600 active:bg-indigo-600"
(click)="logout()">
logout
</a>
</div>
</div>
</div>
</header>
<section class="banner bg-indigo-100 md:h-[490px] h-auto">
<div class="container">
<div class="content_section flex flex-col md:flex-row items-center gap-5">
<div class="flex-1" data-aos="fade-right" data-aos-duration="1200">
<p class="text-pink-400 uppercase font-semibold tracking-widest" data-aos="fade-up" data-aos-duration="800">
ID and Visiting Services
</p>
<h1 class="text-5xl font-extrabold text-gray-900 mt-4" data-aos="fade-up" data-aos-duration="1000">
Show Up, Stand Out!
</h1>
<h2 class="text-xl font-extrabold text-gray-900 mt-4" data-aos="fade-up" data-aos-duration="1100">
Show Up, Stand Out!
</h2>
<p class="text-gray-900 mt-6" data-aos="fade-up" data-aos-duration="1200">
Elementum consectetur at aliquet turpis ultricies felis egestas aliquam porta. Amet vitae.
</p>
<a href="#"
class="inline-block mt-4 px-6 py-3 bg-indigo-600 text-white font-semibold rounded-lg shadow-lg hover:bg-indigo-700 transition"
data-aos="zoom-in" data-aos-duration="1000">
Get Started
</a>
</div>
<div class="image_container relative top-0 md:top-[58px] w-full md:w-[385px] mx-auto md:mx-0"
data-aos="fade-left" data-aos-duration="1200">
<img src="assets/images/women.png" alt="hero" />
</div>
</div>
</div>
</section>
<section class="py-24 px-8 bg-gray-50">
<div class="container">
<div class="flex flex-col md:flex-row items-center justify-between">
<div class="text-left mb-12" data-aos="fade-right" data-aos-duration="1000">
<h4 class="text-pink-500 uppercase font-semibold tracking-widest">
About Us
</h4>
<h2 class="text-4xl font-extrabold text-gray-900 mt-2">
Your Trusted Partner for <br />
Superior Printing Services
</h2>
<p class="text-gray-500 mt-4">
Imperdiet turpis ut quis quis scelerisque ullamcorper eu tellus.
</p>
</div>
<a href="#"
class="inline-block mt-6 md:mt-0 px-6 py-3 bg-indigo-600 text-white font-semibold rounded-lg shadow-lg hover:bg-indigo-700 transition"
data-aos="fade-left" data-aos-duration="1000">
Learn More
</a>
</div>
<div class="grid md:grid-cols-3 gap-8 mt-7">
<!-- High-Quality Printing -->
<div class="bg-white rounded-lg shadow-md" data-aos="fade-up" data-aos-duration="800" data-aos-delay="100">
<img src="assets/images/Brochure-Minimalist-View-3.jpg" alt="High-Quality Printing"
class="rounded-bl-none h-[260px] w-full rounded-br-none rounded-tr-lg rounded-tl-lg" />
<div class="content py-8 px-4">
<h3 class="text-xl font-bold text-gray-900">High-Quality Printing</h3>
<p class="text-gray-500 mt-2">
Imperdiet turpis ut quis quis scelerisque ullamcorper eu tellus.
</p>
<a href="#" class="text-indigo-600 font-semibold mt-4 inline-block">
Learn More →
</a>
</div>
</div>
<!-- Customization Options -->
<div class="bg-white rounded-lg shadow-md" data-aos="fade-up" data-aos-duration="800" data-aos-delay="200">
<img src="assets/images/Brochure-Minimalist-View-3.jpg" alt="Customization Options"
class="rounded-bl-none h-[260px] w-full rounded-br-none rounded-tr-lg rounded-tl-lg" />
<div class="content py-8 px-4">
<h3 class="text-xl font-bold text-gray-900">Customization Options</h3>
<p class="text-gray-500 mt-2">
Imperdiet turpis ut quis quis scelerisque ullamcorper eu tellus.
</p>
<a href="#" class="text-indigo-600 font-semibold mt-4 inline-block">
Learn More →
</a>
</div>
</div>
<!-- Quick Turnaround Time -->
<div class="bg-white rounded-lg shadow-md" data-aos="fade-up" data-aos-duration="800" data-aos-delay="300">
<img src="assets/images/Brochure-Minimalist-View-3.jpg" alt="Quick Turnaround Time"
class="rounded-bl-none h-[260px] w-full rounded-br-none rounded-tr-lg rounded-tl-lg" />
<div class="content py-8 px-4">
<h3 class="text-xl font-bold text-gray-900">Quick Turnaround Time</h3>
<p class="text-gray-500 mt-2">
Imperdiet turpis ut quis quis scelerisque ullamcorper eu tellus.
</p>
<a href="#" class="text-indigo-600 font-semibold mt-4 inline-block">
Learn More →
</a>
</div>
</div>
</div>
</div>
</section>
<section class="bg-indigo-100/35 py-24">
<div class="container">
<div class="mx-auto grid grid-cols-1 md:grid-cols-[1fr_500px] gap-12 items-center">
<!-- Left Side Content -->
<div data-aos="fade-right" data-aos-duration="1000">
<h4 class="text-pink-500 uppercase font-semibold tracking-widest">
Why Choose Us
</h4>
<h2 class="text-4xl font-extrabold text-gray-900 mt-2">
Experience Excellence <br />
Service
</h2>
<p class="text-gray-500 mt-4">
Netus feugiat vitae enim enim in viverra. Id at sagittis cras pretium
dictum nec netus. Ante dolor quis convallis.
</p>
<!-- Features List -->
<div class="mt-16 space-y-12">
<!-- Feature 1 -->
<div class="flex items-start space-x-6" data-aos="fade-up" data-aos-duration="800" data-aos-delay="100">
<div class="bg-white p-4 rounded-lg">
<span class="text-indigo-600 text-2xl">
<i stroke-width="1.2" data-lucide="thumbs-up" class="text-indigo-500"></i>
</span>
</div>
<div>
<h3 class="text-xl font-bold text-gray-900">
Uncompromising Quality
</h3>
<p class="text-gray-500 mt-2">
Netus feugiat vitae enim enim in viverra. Id at sagittis cras
pretium dictum nec netus. Ante dolor quis convallis.
</p>
</div>
</div>
<!-- Feature 2 -->
<div class="flex items-start space-x-6" data-aos="fade-up" data-aos-duration="800" data-aos-delay="200">
<div class="bg-white p-4 rounded-lg">
<span class="text-indigo-600 text-2xl">
<i stroke-width="1.2" data-lucide="thumbs-up" text-indigo-500></i>
</span>
</div>
<div>
<h3 class="text-xl font-bold text-gray-900">
Extensive Range of Services
</h3>
<p class="text-gray-500 mt-2">
Netus feugiat vitae enim enim in viverra. Id at sagittis cras
pretium dictum nec netus. Ante dolor quis convallis.
</p>
</div>
</div>
<!-- Feature 3 -->
<div class="flex items-start space-x-6" data-aos="fade-up" data-aos-duration="800" data-aos-delay="300">
<div class="bg-white p-4 rounded-lg">
<span class="text-indigo-600 text-2xl">
<i stroke-width="1.2" data-lucide="thumbs-up" text-indigo-500></i>
</span>
</div>
<div>
<h3 class="text-xl font-bold text-gray-900">
Personalized Approach
</h3>
<p class="text-gray-500 mt-2">
Netus feugiat vitae enim enim in viverra. Id at sagittis cras
pretium dictum nec netus. Ante dolor quis convallis.
</p>
</div>
</div>
</div>
</div>
<!-- Right Side Image Section -->
<div class="relative whychooseBg bg-indigo-200 rounded-lg" data-aos="zoom-in" data-aos-duration="1200">
<div
class="absolute top-6 left-6 bg-white p-3 rounded-full cursor-pointer transition hover:scale-105 shadow-md flex items-center">
<span class="text-indigo-600 text-lg font-semibold">▶</span>
<span class="ml-2 text-gray-900 font-semibold">Our Process</span>
</div>
<img src="assets/images/women-2.png" width="460" height="525" alt="Our Process"
class="rounded-lg mx-auto w-full" />
</div>
</div>
</div>
</section>
<section class="text-center py-24">
<div class="container">
<h4 class="font-semibold text-pink-500 tracking-widest" data-aos="fade-up" data-aos-duration="800">
OUR SERVICES
</h4>
<h3 class="text-4xl font-bold text-gray-900 mt-2" data-aos="fade-up" data-aos-duration="900">
Efficient ID Card Issuance
</h3>
<p class="text-gray-600 mt-4 max-w-2xl mx-auto" data-aos="fade-up" data-aos-duration="1000">
A seamless platform for managing employee ID cards and visitor passes with real-time tracking,
role-based access, and security compliance.
</p>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mt-16 mx-auto">
<!-- Card 1 -->
<div class="bg-indigo-100/30 p-6 rounded-xl transition" data-aos="fade-up" data-aos-duration="800" data-aos-delay="100">
<div class="bg-white p-4 rounded-md w-14 h-14 flex items-center justify-center">
<i stroke-width="2" data-lucide="id-card" class="text-indigo-600"></i>
</div>
<h3 class="mt-4 text-lg font-semibold text-gray-900 text-start">Employee ID Issuance</h3>
<p class="text-gray-600 mt-2 text-start">
Employees can request ID cards with approval workflows and customizable templates.
</p>
<a href="#" class="text-indigo-600 text-start font-medium mt-4 w-fit block">Learn More →</a>
</div>
<!-- Card 2 -->
<div class="bg-indigo-100/30 p-6 rounded-xl transition" data-aos="fade-up" data-aos-duration="800" data-aos-delay="200">
<div class="bg-white p-4 rounded-md w-14 h-14 flex items-center justify-center">
<i stroke-width="2" data-lucide="scan-qr-code" class="text-indigo-600"></i>
</div>
<h3 class="mt-4 text-lg font-semibold text-gray-900 text-start">Visitor Pass Management</h3>
<p class="text-gray-600 mt-2 text-start">
Visitors can register for temporary passes with QR code/barcode authentication.
</p>
<a href="#" class="text-indigo-600 text-start font-medium mt-4 w-fit block">Learn More →</a>
</div>
<!-- Card 3 -->
<div class="bg-indigo-100/30 p-6 rounded-xl transition" data-aos="fade-up" data-aos-duration="800" data-aos-delay="300">
<div class="bg-white p-4 rounded-md w-14 h-14 flex items-center justify-center">
<i stroke-width="2" data-lucide="lock" class="text-indigo-600"></i>
</div>
<h3 class="mt-4 text-lg font-semibold text-gray-900 text-start">Security & Compliance</h3>
<p class="text-gray-600 mt-2 text-start">
Maintain logs of issued cards, visitor check-ins, and expired IDs for security audits.
</p>
<a href="#" class="text-indigo-600 text-start font-medium mt-4 w-fit block">Learn More →</a>
</div>
<!-- Card 4 -->
<div class="bg-indigo-100/30 p-6 rounded-xl transition" data-aos="fade-up" data-aos-duration="800" data-aos-delay="400">
<div class="bg-white p-4 rounded-md w-14 h-14 flex items-center justify-center">
<i stroke-width="2" data-lucide="clock" class="text-indigo-600"></i>
</div>
<h3 class="mt-4 text-lg font-semibold text-gray-900 text-start">Real-time Visitor Tracking</h3>
<p class="text-gray-600 mt-2 text-start">
Track visitor check-ins and check-outs with automated logs and live monitoring.
</p>
<a href="#" class="text-indigo-600 text-start font-medium mt-4 w-fit block">Learn More →</a>
</div>
<!-- Card 5 -->
<div class="bg-indigo-100/30 p-6 rounded-xl transition" data-aos="fade-up" data-aos-duration="800" data-aos-delay="500">
<div class="bg-white p-4 rounded-md w-14 h-14 flex items-center justify-center">
<i stroke-width="2" data-lucide="refresh-cw" class="text-indigo-600"></i>
</div>
<h3 class="mt-4 text-lg font-semibold text-gray-900 text-start">Automated Renewals</h3>
<p class="text-gray-600 mt-2 text-start">
Set reminders and auto-renew ID cards for employees and frequent visitors.
</p>
<a href="#" class="text-indigo-600 text-start font-medium mt-4 w-fit block">Learn More →</a>
</div>
<!-- Card 6 -->
<div class="bg-indigo-100/30 p-6 rounded-xl transition" data-aos="fade-up" data-aos-duration="800" data-aos-delay="600">
<div class="bg-white p-4 rounded-md w-14 h-14 flex items-center justify-center">
<i stroke-width="2" data-lucide="folder-cog" class="text-indigo-600"></i>
</div>
<h3 class="mt-4 text-lg font-semibold text-gray-900 text-start">Customizable Templates</h3>
<p class="text-gray-600 mt-2 text-start">
Create and modify ID card templates with company branding and security features.
</p>
<a href="#" class="text-indigo-600 text-start font-medium mt-4 w-fit block">Learn More →</a>
</div>
</div>
</div>
</section>
<section class="w-full bg-[#212131] py-14 flex">
<div class="container mx-auto">
<div
class="w-full flex flex-wrap md:flex-nowrap items-center justify-between text-center md:text-left gap-6">
<h2 class="text-white xl:text-3xl md:text-2xl text-xl font-bold w-full md:w-auto" data-aos="fade-up" data-aos-duration="1000">
Join Our Newsletter to <br class="hidden md:block"> Keep Up To Date With Us!
</h2>
<div
class="flex flex-wrap md:flex-nowrap items-center justify-center md:justify-end w-full md:w-auto gap-3" data-aos="zoom-in" data-aos-duration="1000">
<input type="email" placeholder="Enter your email"
class="px-4 py-3 rounded-lg w-full md:w-64 bg-white text-gray-700 focus:outline-none">
<button
class="px-6 py-3 bg-indigo-600 text-white font-semibold rounded-lg shadow-lg hover:bg-indigo-700 transition">
Subscribe
</button>
</div>
</div>
</div>
</section>
<footer class="bg-[#14141F] py-8">
<div class="container">
<div class="flex flex-col md:flex-row items-center justify-between">
<img src="assets/images/logo.svg" alt="logo" />
<p class="text-white/60">
© 2025 Geeks ID. All Rights Reserved.
</p>
</div>
</div>
</footer>
<script src="js/jquery.min.js"></script>
<script src="js/aos.min.js"></script>
<script src="https://unpkg.com/lucide@latest"></script>
<script src="js/script.js"></script>
</body>
</html>