357 lines
20 KiB
HTML
357 lines
20 KiB
HTML
<!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> |