Welcome to WordPress. This is your first post. Edit or delete it, then start writing!
Welcome to WordPress. This is your first post. Edit or delete it, then start writing!
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>企业官网 - 高精密工业制造解决方案</title>
<!-- 引入 Tailwind CSS 快速样式支持 -->
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
</head>
<body class="bg-gray-50 text-gray-800 font-sans">
<!-- 1. 顶部联络栏 -->
<div class="bg-slate-900 text-gray-300 text-sm py-2 px-6 flex justify-between items-center border-b border-slate-800">
<div class="flex items-center space-x-6">
<span><i class="fas fa-phone-alt text-blue-400 mr-2"></i>全国服务热线：0769-88888888</span>
<span class="hidden md:inline"><i class="fas fa-envelope text-blue-400 mr-2"></i>邮箱：contact@yourcompany.com</span>
</div>
<div class="flex items-center space-x-4">
<a href="#" class="hover:text-white transition">中文</a>
<span>|</span>
<a href="#" class="hover:text-white transition">English</a>
</div>
</div>
<!-- 2. 主导航栏 -->
<nav class="bg-white shadow-md sticky top-0 z-50">
<div class="max-w-7xl mx-auto px-6 py-4 flex justify-between items-center">
<!-- 品牌 Logo -->
<a href="#" class="text-2xl font-bold text-slate-800 tracking-wide flex items-center gap-2">
<span class="bg-blue-600 text-white p-2 rounded"><i class="fas fa-microchip"></i></span>
你的品牌名称 <span class="text-xs bg-slate-100 text-slate-600 px-2 py-0.5 rounded border border-slate-200">工业制造</span>
</a>
<!-- 菜单项 -->
<div class="hidden md:flex space-x-8 font-medium">
<a href="#home" class="text-blue-600 font-semibold">网站首页</a>
<a href="#about" class="hover:text-blue-600 transition">关于我们</a>
<a href="#products" class="hover:text-blue-600 transition">产品中心</a>
<a href="#factory" class="hover:text-blue-600 transition">工厂一览</a>
<a href="#news" class="hover:text-blue-600 transition">新闻资讯</a>
<a href="#contact" class="hover:text-blue-600 transition">联系我们</a>
</div>
<!-- 在线询价按钮 -->
<a href="#contact" class="bg-blue-600 hover:bg-blue-700 text-white px-5 py-2 rounded-lg font-medium transition shadow-sm">
获取报价
</a>
</div>
</nav>
<!-- 3. Hero 焦点 Banner -->
<section id="home" class="relative bg-slate-900 text-white py-24 px-6">
<div class="max-w-7xl mx-auto grid md:grid-cols-2 gap-12 items-center">
<div>
<span class="text-blue-400 font-semibold tracking-wider text-sm uppercase">源头工厂 · 专业研发</span>
<h1 class="text-4xl md:text-5xl font-extrabold mt-3 mb-6 leading-tight">
高精密硬质合金与超硬材料解决方案
</h1>
<p class="text-gray-300 text-lg mb-8 leading-relaxed">
自主设计与制造高品质工业刀具，专注取代进口产品。提供规格定制、打样及批量生产服务。
</p>
<div class="flex space-x-4">
<a href="#products" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-md font-semibold transition">浏览产品</a>
<a href="#contact" class="border border-gray-400 hover:border-white text-white px-6 py-3 rounded-md font-semibold transition">在线咨询</a>
</div>
</div>
<div class="bg-slate-800 rounded-xl p-4 border border-slate-700 shadow-2xl">
<!-- 产品/工厂占位展示区 -->
<div class="bg-slate-700 h-64 md:h-80 rounded-lg flex items-center justify-center text-slate-400">
<i class="fas fa-industry text-6xl"></i>
</div>
</div>
</div>
</section>
<!-- 4. 核心产品展示区 -->
<section id="products" class="py-16 max-w-7xl mx-auto px-6">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold text-gray-900">产品中心</h2>
<p class="text-gray-500 mt-2">提供多系列工业级精密刀具与加工构件</p>
</div>
<div class="grid md:grid-cols-4 gap-6">
<!-- 分类 1 -->
<div class="bg-white rounded-lg shadow-sm hover:shadow-md transition p-4 border border-gray-100">
<div class="bg-gray-100 h-40 rounded mb-4 flex items-center justify-center text-gray-400">
<i class="fas fa-cogs text-4xl"></i>
</div>
<h3 class="font-bold text-lg mb-1">硬质合金刀具</h3>
<p class="text-gray-500 text-sm mb-4">高硬度、抗磨损，适用于各类复杂加工</p>
<a href="#" class="text-blue-600 text-sm font-semibold flex items-center">查看详情 <i class="fas fa-arrow-right ml-1 text-xs"></i></a>
</div>
<!-- 分类 2 -->
<div class="bg-white rounded-lg shadow-sm hover:shadow-md transition p-4 border border-gray-100">
<div class="bg-gray-100 h-40 rounded mb-4 flex items-center justify-center text-gray-400">
<i class="fas fa-gem text-4xl"></i>
</div>
<h3 class="font-bold text-lg mb-1">金刚石 PCD / CBN 刀具</h3>
<p class="text-gray-500 text-sm mb-4">超硬材料，极致高光切削与高寿命</p>
<a href="#" class="text-blue-600 text-sm font-semibold flex items-center">查看详情 <i class="fas fa-arrow-right ml-1 text-xs"></i></a>
</div>
<!-- 分类 3 -->
<div class="bg-white rounded-lg shadow-sm hover:shadow-md transition p-4 border border-gray-100">
<div class="bg-gray-100 h-40 rounded mb-4 flex items-center justify-center text-gray-400">
<i class="fas fa-tools text-4xl"></i>
</div>
<h3 class="font-bold text-lg mb-1">刀柄刀盘 / 丝锥</h3>
<p class="text-gray-500 text-sm mb-4">标准 CNC 配件，精准夹持与高速加工</p>
<a href="#" class="text-blue-600 text-sm font-semibold flex items-center">查看详情 <i class="fas fa-arrow-right ml-1 text-xs"></i></a>
</div>
<!-- 分类 4 -->
<div class="bg-white rounded-lg shadow-sm hover:shadow-md transition p-4 border border-gray-100">
<div class="bg-gray-100 h-40 rounded mb-4 flex items-center justify-center text-gray-400">
<i class="fas fa-layer-group text-4xl"></i>
</div>
<h3 class="font-bold text-lg mb-1">定制非标刀具</h3>
<p class="text-gray-500 text-sm mb-4">根据客户图纸或需求快速打样生产</p>
<a href="#" class="text-blue-600 text-sm font-semibold flex items-center">查看详情 <i class="fas fa-arrow-right ml-1 text-xs"></i></a>
</div>
</div>
</section>
<!-- 5. 页脚联络区 -->
<footer id="contact" class="bg-slate-900 text-gray-400 py-12 border-t border-slate-800">
<div class="max-w-7xl mx-auto px-6 grid md:grid-cols-3 gap-8">
<div>
<h4 class="text-white font-bold text-lg mb-4">关于我们</h4>
<p class="text-sm leading-relaxed">
我们是一家专业设计、开发和生产各类工业切削工具的全资企业，立足高品质制造，竭诚为全球客户提供满意的产品与服务。
</p>
</div>
<div>
<h4 class="text-white font-bold text-lg mb-4">联系方式</h4>
<ul class="text-sm space-y-2">
<li><i class="fas fa-map-marker-alt mr-2 text-blue-400"></i>生产基地：广东省东莞市工业区</li>
<li><i class="fas fa-phone mr-2 text-blue-400"></i>联系电话：0769-88888888</li>
<li><i class="fas fa-envelope mr-2 text-blue-400"></i>服务邮箱：sales@yourcompany.com</li>
</ul>
</div>
<div>
<h4 class="text-white font-bold text-lg mb-4">在线留言</h4>
<form class="space-y-2">
<input type="text" placeholder="您的姓名 / 公司" class="w-full bg-slate-800 border border-slate-700 px-3 py-2 rounded text-sm text-white focus:outline-none focus:border-blue-500">
<input type="text" placeholder="联系电话 / 微信" class="w-full bg-slate-800 border border-slate-700 px-3 py-2 rounded text-sm text-white focus:outline-none focus:border-blue-500">
<button class="w-full bg-blue-600 hover:bg-blue-700 text-white text-sm py-2 rounded font-medium transition">提交咨询</button>
</form>
</div>
</div>
<div class="max-w-7xl mx-auto px-6 mt-8 pt-6 border-t border-slate-800 text-xs text-center">
© 2026 你的公司名称 版权所有 | 粤ICP备XXXXXXXX号
</div>
</footer>
</body>
</html>