|
|
<!DOCTYPE html> |
|
|
<html lang="en" class="dark"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>ProMeasure | Precision Measurement Tools</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<script> |
|
|
tailwind.config = { |
|
|
darkMode: 'class', |
|
|
theme: { |
|
|
extend: { |
|
|
colors: { |
|
|
primary: '#3b82f6', |
|
|
secondary: '#10b981', |
|
|
dark: '#111827', |
|
|
darker: '#0f172a', |
|
|
}, |
|
|
animation: { |
|
|
'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite', |
|
|
'float': 'float 6s ease-in-out infinite', |
|
|
}, |
|
|
keyframes: { |
|
|
float: { |
|
|
'0%, 100%': { transform: 'translateY(0)' }, |
|
|
'50%': { transform: 'translateY(-10px)' }, |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
<style> |
|
|
.gradient-text { |
|
|
background: linear-gradient(90deg, #3b82f6, #10b981); |
|
|
-webkit-background-clip: text; |
|
|
background-clip: text; |
|
|
color: transparent; |
|
|
} |
|
|
|
|
|
.product-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
|
|
|
.nav-link::after { |
|
|
content: ''; |
|
|
display: block; |
|
|
width: 0; |
|
|
height: 2px; |
|
|
background: #3b82f6; |
|
|
transition: width .3s; |
|
|
} |
|
|
|
|
|
.nav-link:hover::after { |
|
|
width: 100%; |
|
|
} |
|
|
|
|
|
.hero-gradient { |
|
|
background: linear-gradient(135deg, #111827 0%, #1e293b 100%); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-900 text-gray-200 font-sans antialiased"> |
|
|
|
|
|
<div class="bg-gray-800 py-2 px-4 text-sm"> |
|
|
<div class="container mx-auto flex justify-between items-center"> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="#" class="hover:text-primary transition"><i class="fas fa-phone-alt mr-1"></i> (800) 555-1234</a> |
|
|
<a href="#" class="hover:text-primary transition"><i class="fas fa-envelope mr-1"></i> [email protected]</a> |
|
|
</div> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="#" class="hover:text-primary transition"><i class="fas fa-user mr-1"></i> Account</a> |
|
|
<a href="#" class="hover:text-primary transition"><i class="fas fa-shopping-cart mr-1"></i> Cart (0)</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<nav class="bg-gray-800 border-b border-gray-700 sticky top-0 z-50"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="flex justify-between items-center py-4"> |
|
|
<div class="flex items-center space-x-10"> |
|
|
<a href="#" class="text-2xl font-bold gradient-text">PRO<span class="text-white">MEASURE</span></a> |
|
|
<div class="hidden md:flex space-x-8"> |
|
|
<a href="#" class="nav-link text-white hover:text-primary transition">Products</a> |
|
|
<a href="#" class="nav-link text-white hover:text-primary transition">Applications</a> |
|
|
<a href="#" class="nav-link text-white hover:text-primary transition">Support</a> |
|
|
<a href="#" class="nav-link text-white hover:text-primary transition">About</a> |
|
|
<a href="#" class="nav-link text-white hover:text-primary transition">Contact</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<div class="relative"> |
|
|
<input type="text" placeholder="Search products..." class="bg-gray-700 text-white px-4 py-2 rounded-full w-64 focus:outline-none focus:ring-2 focus:ring-primary"> |
|
|
<button class="absolute right-3 top-2 text-gray-400 hover:text-white"> |
|
|
<i class="fas fa-search"></i> |
|
|
</button> |
|
|
</div> |
|
|
<button class="md:hidden text-white"> |
|
|
<i class="fas fa-bars text-xl"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<section class="hero-gradient py-20"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="flex flex-col md:flex-row items-center"> |
|
|
<div class="md:w-1/2 mb-10 md:mb-0"> |
|
|
<h1 class="text-4xl md:text-5xl font-bold mb-6">Precision <span class="gradient-text">Measurement</span> Solutions</h1> |
|
|
<p class="text-xl text-gray-300 mb-8">Advanced tools for professionals who demand accuracy and reliability in their measurements.</p> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="#" class="bg-primary hover:bg-blue-600 text-white px-6 py-3 rounded-lg font-medium transition">Shop Products</a> |
|
|
<a href="#" class="border border-primary text-primary hover:bg-primary hover:text-white px-6 py-3 rounded-lg font-medium transition">Learn More</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:w-1/2 flex justify-center"> |
|
|
<img src="https://www.pro-measure.com/images/caliper.jpg" alt="Precision Measurement Tools" class="rounded-lg shadow-xl w-full max-w-md animate-float"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-gray-800"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<h2 class="text-3xl font-bold mb-12 text-center">Our <span class="gradient-text">Product</span> Categories</h2> |
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8"> |
|
|
<div class="bg-gray-700 rounded-xl p-6 hover:bg-gray-600 transition cursor-pointer group"> |
|
|
<div class="bg-gray-600 p-4 rounded-lg w-16 h-16 flex items-center justify-center mb-4 group-hover:bg-primary transition"> |
|
|
<i class="fas fa-ruler-combined text-2xl text-white"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-2">Calipers</h3> |
|
|
<p class="text-gray-300">Precision measurement tools for internal, external and depth measurements.</p> |
|
|
<a href="#" class="mt-4 inline-block text-primary hover:underline">View Products →</a> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-700 rounded-xl p-6 hover:bg-gray-600 transition cursor-pointer group"> |
|
|
<div class="bg-gray-600 p-4 rounded-lg w-16 h-16 flex items-center justify-center mb-4 group-hover:bg-primary transition"> |
|
|
<i class="fas fa-microscope text-2xl text-white"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-2">Micrometers</h3> |
|
|
<p class="text-gray-300">High-precision instruments for extremely accurate dimensional measurements.</p> |
|
|
<a href="#" class="mt-4 inline-block text-primary hover:underline">View Products →</a> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-700 rounded-xl p-6 hover:bg-gray-600 transition cursor-pointer group"> |
|
|
<div class="bg-gray-600 p-4 rounded-lg w-16 h-16 flex items-center justify-center mb-4 group-hover:bg-primary transition"> |
|
|
<i class="fas fa-tachometer-alt text-2xl text-white"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-2">Indicators</h3> |
|
|
<p class="text-gray-300">Dial and digital indicators for comparative measurements and alignment.</p> |
|
|
<a href="#" class="mt-4 inline-block text-primary hover:underline">View Products →</a> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-700 rounded-xl p-6 hover:bg-gray-600 transition cursor-pointer group"> |
|
|
<div class="bg-gray-600 p-4 rounded-lg w-16 h-16 flex items-center justify-center mb-4 group-hover:bg-primary transition"> |
|
|
<i class="fas fa-boxes text-2xl text-white"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-2">Gage Blocks</h3> |
|
|
<p class="text-gray-300">Precision ground and lapped standards for length measurement and calibration.</p> |
|
|
<a href="#" class="mt-4 inline-block text-primary hover:underline">View Products →</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="flex justify-between items-center mb-12"> |
|
|
<h2 class="text-3xl font-bold">Featured <span class="gradient-text">Products</span></h2> |
|
|
<a href="#" class="text-primary hover:underline">View All Products →</a> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8"> |
|
|
|
|
|
<div class="bg-gray-800 rounded-xl overflow-hidden shadow-lg product-card transition duration-300"> |
|
|
<div class="relative"> |
|
|
<img src="https://www.pro-measure.com/images/caliper-digital.jpg" alt="Digital Caliper" class="w-full h-48 object-cover"> |
|
|
<div class="absolute top-2 right-2 bg-primary text-white text-xs font-bold px-2 py-1 rounded">NEW</div> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<div class="flex justify-between items-start mb-2"> |
|
|
<h3 class="text-lg font-semibold">Digital Caliper</h3> |
|
|
<span class="text-primary font-bold">$129.99</span> |
|
|
</div> |
|
|
<p class="text-gray-400 text-sm mb-4">0-6" range, 0.0005" resolution, IP54 rated</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<button class="bg-primary hover:bg-blue-600 text-white px-4 py-2 rounded-lg text-sm transition">Add to Cart</button> |
|
|
<button class="text-gray-400 hover:text-primary transition"> |
|
|
<i class="far fa-heart"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-800 rounded-xl overflow-hidden shadow-lg product-card transition duration-300"> |
|
|
<div class="relative"> |
|
|
<img src="https://www.pro-measure.com/images/micrometer.jpg" alt="Outside Micrometer" class="w-full h-48 object-cover"> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<div class="flex justify-between items-start mb-2"> |
|
|
<h3 class="text-lg font-semibold">Outside Micrometer</h3> |
|
|
<span class="text-primary font-bold">$189.99</span> |
|
|
</div> |
|
|
<p class="text-gray-400 text-sm mb-4">0-1" range, 0.0001" resolution, carbide faces</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<button class="bg-primary hover:bg-blue-600 text-white px-4 py-2 rounded-lg text-sm transition">Add to Cart</button> |
|
|
<button class="text-gray-400 hover:text-primary transition"> |
|
|
<i class="far fa-heart"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-800 rounded-xl overflow-hidden shadow-lg product-card transition duration-300"> |
|
|
<div class="relative"> |
|
|
<img src="https://www.pro-measure.com/images/dial-indicator.jpg" alt="Dial Indicator" class="w-full h-48 object-cover"> |
|
|
<div class="absolute top-2 right-2 bg-secondary text-white text-xs font-bold px-2 py-1 rounded">BESTSELLER</div> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<div class="flex justify-between items-start mb-2"> |
|
|
<h3 class="text-lg font-semibold">Dial Indicator</h3> |
|
|
<span class="text-primary font-bold">$79.99</span> |
|
|
</div> |
|
|
<p class="text-gray-400 text-sm mb-4">0.001" resolution, 1" travel, jeweled movement</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<button class="bg-primary hover:bg-blue-600 text-white px-4 py-2 rounded-lg text-sm transition">Add to Cart</button> |
|
|
<button class="text-gray-400 hover:text-primary transition"> |
|
|
<i class="far fa-heart"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-800 rounded-xl overflow-hidden shadow-lg product-card transition duration-300"> |
|
|
<div class="relative"> |
|
|
<img src="https://www.pro-measure.com/images/gage-blocks.jpg" alt="Gage Block Set" class="w-full h-48 object-cover"> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<div class="flex justify-between items-start mb-2"> |
|
|
<h3 class="text-lg font-semibold">Gage Block Set</h3> |
|
|
<span class="text-primary font-bold">$349.99</span> |
|
|
</div> |
|
|
<p class="text-gray-400 text-sm mb-4">81-piece set, Grade AS-1, ±2 µin accuracy</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<button class="bg-primary hover:bg-blue-600 text-white px-4 py-2 rounded-lg text-sm transition">Add to Cart</button> |
|
|
<button class="text-gray-400 hover:text-primary transition"> |
|
|
<i class="far fa-heart"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-gray-800"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<h2 class="text-3xl font-bold mb-12 text-center">Why Choose <span class="gradient-text">ProMeasure</span>?</h2> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
|
|
<div class="text-center"> |
|
|
<div class="bg-gray-700 rounded-full w-20 h-20 flex items-center justify-center mx-auto mb-4"> |
|
|
<i class="fas fa-award text-3xl text-primary"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-2">Premium Quality</h3> |
|
|
<p class="text-gray-300">Our tools are manufactured to the highest standards with precision components and rigorous quality control.</p> |
|
|
</div> |
|
|
|
|
|
<div class="text-center"> |
|
|
<div class="bg-gray-700 rounded-full w-20 h-20 flex items-center justify-center mx-auto mb-4"> |
|
|
<i class="fas fa-shield-alt text-3xl text-primary"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-2">Lifetime Warranty</h3> |
|
|
<p class="text-gray-300">All our products come with a lifetime warranty against defects in materials and workmanship.</p> |
|
|
</div> |
|
|
|
|
|
<div class="text-center"> |
|
|
<div class="bg-gray-700 rounded-full w-20 h-20 flex items-center justify-center mx-auto mb-4"> |
|
|
<i class="fas fa-headset text-3xl text-primary"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-2">Expert Support</h3> |
|
|
<p class="text-gray-300">Our measurement specialists are available to help you select the right tools and provide technical support.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-16 bg-gray-700 rounded-xl p-8 md:p-12"> |
|
|
<div class="flex flex-col md:flex-row items-center"> |
|
|
<div class="md:w-1/2 mb-8 md:mb-0"> |
|
|
<h3 class="text-2xl font-bold mb-4">Need Help Selecting the Right Tool?</h3> |
|
|
<p class="text-gray-300 mb-6">Our measurement experts can help you choose the perfect tool for your specific application requirements.</p> |
|
|
<button class="bg-primary hover:bg-blue-600 text-white px-6 py-3 rounded-lg font-medium transition">Contact Our Experts</button> |
|
|
</div> |
|
|
<div class="md:w-1/2 flex justify-center"> |
|
|
<img src="https://www.pro-measure.com/images/tech-support.jpg" alt="Technical Support" class="rounded-lg max-w-md w-full"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<h2 class="text-3xl font-bold mb-12 text-center">What Our <span class="gradient-text">Customers</span> Say</h2> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
|
|
<div class="bg-gray-800 p-6 rounded-xl"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="text-yellow-400 mr-2"> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
</div> |
|
|
<span class="text-sm text-gray-400">2 weeks ago</span> |
|
|
</div> |
|
|
<p class="text-gray-300 mb-4">"The digital caliper I purchased exceeded my expectations. The build quality is excellent and the measurements are consistently accurate."</p> |
|
|
<div class="flex items-center"> |
|
|
<div class="bg-gray-700 rounded-full w-10 h-10 flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-user"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-medium">Michael R.</h4> |
|
|
<p class="text-sm text-gray-400">Quality Engineer</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-800 p-6 rounded-xl"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="text-yellow-400 mr-2"> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
</div> |
|
|
<span class="text-sm text-gray-400">1 month ago</span> |
|
|
</div> |
|
|
<p class="text-gray-300 mb-4">"ProMeasure's gage blocks are the most accurate I've used in my 15 years as a metrologist. Their customer service is also top-notch."</p> |
|
|
<div class="flex items-center"> |
|
|
<div class="bg-gray-700 rounded-full w-10 h-10 flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-user"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-medium">Sarah L.</h4> |
|
|
<p class="text-sm text-gray-400">Metrology Specialist</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-800 p-6 rounded-xl"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="text-yellow-400 mr-2"> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star-half-alt"></i> |
|
|
</div> |
|
|
<span class="text-sm text-gray-400">3 months ago</span> |
|
|
</div> |
|
|
<p class="text-gray-300 mb-4">"We've standardized on ProMeasure tools for our machine shop. The consistency and reliability have improved our quality control significantly."</p> |
|
|
<div class="flex items-center"> |
|
|
<div class="bg-gray-700 rounded-full w-10 h-10 flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-user"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-medium">David K.</h4> |
|
|
<p class="text-sm text-gray-400">Shop Supervisor</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-gradient-to-r from-gray-800 to-gray-900"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="max-w-3xl mx-auto text-center"> |
|
|
<h2 class="text-3xl font-bold mb-4">Stay Updated</h2> |
|
|
<p class="text-xl text-gray-300 mb-8">Subscribe to our newsletter for product updates, measurement tips, and exclusive offers.</p> |
|
|
|
|
|
<div class="flex flex-col sm:flex-row gap-4"> |
|
|
<input type="email" placeholder="Your email address" class="flex-grow bg-gray-700 text-white px-6 py-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary"> |
|
|
<button class="bg-primary hover:bg-blue-600 text-white px-8 py-3 rounded-lg font-medium transition">Subscribe</button> |
|
|
</div> |
|
|
|
|
|
<p class="text-sm text-gray-400 mt-4">We respect your privacy. Unsubscribe at any time.</p> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-900 pt-16 pb-8 border-t border-gray-800"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-12"> |
|
|
<div> |
|
|
<h3 class="text-xl font-bold gradient-text mb-4">PROMEASURE</h3> |
|
|
<p class="text-gray-400 mb-4">Precision measurement tools for professionals who demand accuracy and reliability.</p> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="#" class="text-gray-400 hover:text-primary transition"><i class="fab fa-facebook-f"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-primary transition"><i class="fab fa-twitter"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-primary transition"><i class="fab fa-linkedin-in"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-primary transition"><i class="fab fa-instagram"></i></a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h4 class="text-lg font-semibold mb-4">Products</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-primary transition">Calipers</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-primary transition">Micrometers</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-primary transition">Indicators</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-primary transition">Gage Blocks</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-primary transition">Height Gages</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h4 class="text-lg font-semibold mb-4">Company</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-primary transition">About Us</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-primary transition">Careers</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-primary transition">Blog</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-primary transition">Press</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-primary transition">Contact</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h4 class="text-lg font-semibold mb-4">Support</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-primary transition">Help Center</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-primary transition">Product Manuals</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-primary transition">Calibration Services</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-primary transition">Warranty Info</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-primary transition">Shipping & Returns</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center"> |
|
|
<p class="text-gray-500 text-sm mb-4 md:mb-0">© 2023 ProMeasure. All rights reserved.</p> |
|
|
<div class="flex space-x-6"> |
|
|
<a href="#" class="text-gray-500 hover:text-primary transition text-sm">Privacy Policy</a> |
|
|
<a href="#" class="text-gray-500 hover:text-primary transition text-sm">Terms of Service</a> |
|
|
<a href="#" class="text-gray-500 hover:text-primary transition text-sm">Cookie Policy</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
|
|
|
<button id="backToTop" class="fixed bottom-8 right-8 bg-primary text-white w-12 h-12 rounded-full flex items-center justify-center shadow-lg transition opacity-0 invisible hover:bg-blue-600"> |
|
|
<i class="fas fa-arrow-up"></i> |
|
|
</button> |
|
|
|
|
|
<script> |
|
|
|
|
|
const backToTopButton = document.getElementById('backToTop'); |
|
|
|
|
|
window.addEventListener('scroll', () => { |
|
|
if (window.pageYOffset > 300) { |
|
|
backToTopButton.classList.remove('opacity-0', 'invisible'); |
|
|
backToTopButton.classList.add('opacity-100', 'visible'); |
|
|
} else { |
|
|
backToTopButton.classList.remove('opacity-100', 'visible'); |
|
|
backToTopButton.classList.add('opacity-0', 'invisible'); |
|
|
} |
|
|
}); |
|
|
|
|
|
backToTopButton.addEventListener('click', () => { |
|
|
window.scrollTo({ |
|
|
top: 0, |
|
|
behavior: 'smooth' |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const mobileMenuButton = document.querySelector('.md\\:hidden'); |
|
|
mobileMenuButton.addEventListener('click', () => { |
|
|
alert('Mobile menu would open here in a full implementation'); |
|
|
}); |
|
|
|
|
|
|
|
|
const productCards = document.querySelectorAll('.product-card'); |
|
|
productCards.forEach(card => { |
|
|
card.style.transition = 'transform 0.3s ease, box-shadow 0.3s ease'; |
|
|
}); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=RedzNtown2k/sample-ecom-paranormal-research" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
