SOURCE

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>郑贾财建</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script>
tailwind.config = {
  theme: {
    extend: {
      colors: {
        primary: '#0f2b48',
        gold: '#b8863b',
        light: '#f8f5ee'
      },
      fontFamily: {
        sans: ['system-ui','sans-serif']
      }
    }
  }
}
</script>
<style type="text/tailwindcss">
@layer utilities {
  .scroll-smooth { scroll-behavior: smooth; }
  .section-fade { opacity:0; transform: translateY(24px); transition: all 0.7s ease-out; }
  .section-show { opacity:1; transform: translateY(0); }
  .nav-link { @apply relative px-3 py-2 text-white/90 hover:text-gold transition-colors duration-300; }
  .nav-link::after {
    content:""; position:absolute; bottom:0; left:50%; -translate-x-1/2;
    width:0; height:2px; background:#b8863b; transition:0.3s;
  }
  .nav-link:hover::after { width:70%; }
  .card-shadow { box-shadow: 0 8px 24px rgba(15,43,72,0.12); }
}
html { scroll-behavior: smooth; }
</style>
</head>
<body class="bg-light text-slate-700">
<!--导航栏-->
<header id="navbar" class="fixed w-full z-50 transition-all duration-400">
  <div class="bg-primary/90 backdrop-blur-md">
    <div class="container mx-auto px-4 py-4 flex justify-between items-center">
      <a href="#home" class="text-2xl font-bold text-gold">郑贾财建</a>
      <div class="hidden md:flex gap-2">
        <a href="#home" class="nav-link">首页</a>
        <a href="#about-us" class="nav-link">关于我们</a>
        <a href="#about-site" class="nav-link">关于本站</a>
        <a href="#project" class="nav-link">项目</a>
        <a href="#forum" class="nav-link">论坛</a>
        <a href="#contact" class="nav-link">联系我们</a>
      </div>
      <button id="menuBtn" class="md:hidden text-white text-xl">
        <i class="fa fa-bars"></i>
      </button>
    </div>
  </div>
  <!--移动端菜单-->
  <div id="mobileMenu" class="hidden md:hidden bg-primary/95 backdrop-blur">
    <div class="container px-4 py-3 flex flex-col gap-3">
      <a href="#home" class="py-2 text-white hover:text-gold">首页</a>
      <a href="#about-us" class="py-2 text-white hover:text-gold">关于我们</a>
      <a href="#about-site" class="py-2 text-white hover:text-gold">关于本站</a>
      <a href="#project" class="py-2 text-white hover:text-gold">项目</a>
      <a href="#forum" class="py-2 text-white hover:text-gold">论坛</a>
      <a href="#contact" class="py-2 text-white hover:text-gold">联系我们</a>
    </div>
  </div>
</header>

<!--首页 Hero-->
<section id="home" class="pt-24 md:pt-32 pb-20 bg-primary text-white">
  <div class="container mx-auto px-4">
    <div class="max-w-3xl section-fade">
      <h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold leading-tight">郑贾财建<br><span class="text-gold">共建长远，财兴业稳</span></h1>
      <p class="mt-5 text-white/80 text-lg">专注建设项目策划、资源协同与行业交流平台，聚力打造可靠的建设服务阵地。</p>
      <div class="mt-8 flex flex-wrap gap-4">
        <a href="#project" class="bg-gold px-6 py-3 rounded hover:bg-amber-700 transition">查看项目</a>
        <a href="#contact" class="border border-white/60 px-6 py-3 rounded hover:border-gold hover:text-gold transition">联系沟通</a>
      </div>
    </div>
  </div>
</section>

<!--关于我们-->
<section id="about-us" class="py-20">
  <div class="container mx-auto px-4">
    <div class="section-fade">
      <h2 class="text-[clamp(1.5rem,3vw,2.2rem)] font-bold text-primary">关于我们</h2>
      <div class="w-14 h-1 bg-gold mt-2 mb-8"></div>
    </div>
    <div class="grid md:grid-cols-2 gap-10 items-center">
      <div class="section-fade">
        <p class="mb-4">郑贾财建，深耕建设相关领域，坚持务实、诚信、协同的理念。我们整合多方资源，承接项目对接、方案研讨、落地跟进等工作。</p>
        <p>我们重视长期合作，以严谨的态度对待每一项合作，致力于和伙伴共同打造优质工程与合作项目。</p>
      </div>
      <div class="bg-white p-6 rounded-lg card-shadow section-fade">
        <h3 class="text-lg font-semibold text-primary mb-3">核心理念</h3>
        <ul class="space-y-2">
          <li><i class="fa fa-check-circle text-gold mr-2"></i>诚信为本</li>
          <li><i class="fa fa-check-circle text-gold mr-2"></i>稳健发展</li>
          <li><i class="fa fa-check-circle text-gold mr-2"></i>协同共建</li>
          <li><i class="fa fa-check-circle text-gold mr-2"></i>持续精进</li>
        </ul>
      </div>
    </div>
  </div>
</section>

<!--关于本站-->
<section id="about-site" class="py-20 bg-white">
  <div class="container mx-auto px-4">
    <div class="section-fade">
      <h2 class="text-[clamp(1.5rem,3vw,2.2rem)] font-bold text-primary">关于本站</h2>
      <div class="w-14 h-1 bg-gold mt-2 mb-8"></div>
    </div>
    <div class="max-w-3xl section-fade">
      <p class="mb-4">本网站是郑贾财建官方线上平台，用于对外展示项目信息、发布动态、搭建行业交流论坛、接收咨询。</p>
      <p>站点旨在简化沟通，让合作方快速了解我们的业务、过往案例，同时给同行提供友好的交流空间。论坛板块供大家友好交流行业经验，禁止违规、广告内容。</p>
    </div>
  </div>
</section>

<!--项目-->
<section id="project" class="py-20">
  <div class="container mx-auto px-4">
    <div class="section-fade">
      <h2 class="text-[clamp(1.5rem,3vw,2.2rem)] font-bold text-primary">项目展示</h2>
      <div class="w-14 h-1 bg-gold mt-2 mb-8"></div>
    </div>
    <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
      <div class="bg-white rounded-lg overflow-hidden card-shadow section-fade hover:-translate-y-1 transition duration-300">
        <div class="h-40 bg-primary/80 flex items-center justify-center text-white text-3xl"><i class="fa fa-building"></i></div>
        <div class="p-5">
          <h3 class="font-bold text-primary">城市更新项目</h3>
          <p class="mt-2 text-sm">老旧片区改造、配套设施升级</p>
        </div>
      </div>
      <div class="bg-white rounded-lg overflow-hidden card-shadow section-fade hover:-translate-y-1 transition duration-300">
        <div class="h-40 bg-primary/80 flex items-center justify-center text-white text-3xl"><i class="fa fa-road"></i></div>
        <div class="p-5">
          <h3 class="font-bold text-primary">市政道路工程</h3>
          <p class="mt-2 text-sm">道路、管网、配套基础设施建设</p>
        </div>
      </div>
      <div class="bg-white rounded-lg overflow-hidden card-shadow section-fade hover:-translate-y-1 transition duration-300">
        <div class="h-40 bg-primary/80 flex items-center justify-center text-white text-3xl"><i class="fa fa-water"></i></div>
        <div class="p-5">
          <h3 class="font-bold text-primary">水利配套项目</h3>
          <p class="mt-2 text-sm">防洪、沟渠、水利配套施工对接</p>
        </div>
      </div>
    </div>
  </div>
</section>

<!--论坛-->
<section id="forum" class="py-20 bg-white">
  <div class="container mx-auto px-4">
    <div class="section-fade">
      <h2 class="text-[clamp(1.5rem,3vw,2.2rem)] font-bold text-primary">行业论坛</h2>
      <div class="w-14 h-1 bg-gold mt-2 mb-8"></div>
    </div>
    <div class="max-w-4xl section-fade">
      <div class="border rounded-lg divide-y">
        <div class="p-4 flex justify-between items-center hover:bg-slate-50">
          <div>
            <h4 class="font-medium">建设项目成本管控经验交流</h4>
            <p class="text-xs text-slate-500 mt-1">回复：12｜最新：3天前</p>
          </div>
          <span class="text-gold"><i class="fa fa-angle-right"></i></span>
        </div>
        <div class="p-4 flex justify-between items-center hover:bg-slate-50">
          <div>
            <h4 class="font-medium">市政工程资料整理分享</h4>
            <p class="text-xs text-slate-500 mt-1">回复：8｜最新：5天前</p>
          </div>
          <span class="text-gold"><i class="fa fa-angle-right"></i></span>
        </div>
        <div class="p-4 flex justify-between items-center hover:bg-slate-50">
          <div>
            <h4 class="font-medium">新人提问区｜基础问题集中帖</h4>
            <p class="text-xs text-slate-500 mt-1">回复：24｜最新：昨天</p>
          </div>
          <span class="text-gold"><i class="fa fa-angle-right"></i></span>
        </div>
      </div>
      <div class="mt-6">
        <button class="px-5 py-2 bg-primary text-white rounded hover:bg-primary/90 transition">发布新帖子</button>
      </div>
    </div>
  </div>
</section>

<!--联系我们-->
<section id="contact" class="py-20">
  <div class="container mx-auto px-4">
    <div class="section-fade">
      <h2 class="text-[clamp(1.5rem,3vw,2.2rem)] font-bold text-primary">联系我们</h2>
      <div class="w-14 h-1 bg-gold mt-2 mb-8"></div>
    </div>
    <div class="grid md:grid-cols-2 gap-10">
      <div class="section-fade">
        <div class="space-y-4">
          <div class="flex items-start gap-3">
            <i class="fa fa-map-marker text-gold text-xl mt-1"></i>
            <div>
              <h4 class="font-medium">地址</h4>
              <p>可后续补充实际地址</p>
            </div>
          </div>
          <div class="flex items-start gap-3">
            <i class="fa fa-phone text-gold text-xl mt-1"></i>
            <div>
              <h4 class="font-medium">电话</h4>
              <p>可后续补充联系号码</p>
            </div>
          </div>
          <div class="flex items-start gap-3">
            <i class="fa fa-envelope text-gold text-xl mt-1"></i>
            <div>
              <h4 class="font-medium">邮箱</h4>
              <p>可后续补充邮箱</p>
            </div>
          </div>
        </div>
      </div>
      <div class="bg-white p-6 rounded-lg card-shadow section-fade">
        <form id="contactForm">
          <div class="mb-4">
            <label class="block mb-1 text-sm">姓名</label>
            <input type="text" class="w-full border px-3 py-2 rounded focus:outline-none focus:border-gold">
          </div>
          <div class="mb-4">
            <label class="block mb-1 text-sm">联系方式</label>
            <input type="text" class="w-full border px-3 py-2 rounded focus:outline-none focus:border-gold">
          </div>
          <div class="mb-4">
            <label class="block mb-1 text-sm">留言内容</label>
            <textarea rows="4" class="w-full border px-3 py-2 rounded focus:outline-none focus:border-gold"></textarea>
          </div>
          <button type="submit" class="w-full bg-primary text-white py-2 rounded hover:bg-primary/90 transition">提交留言</button>
        </form>
      </div>
    </div>
  </div>
</section>

<!--页脚-->
<footer class="bg-primary text-white py-10">
  <div class="container mx-auto px-4 text-center">
    <h3 class="text-xl font-bold text-gold mb-3">郑贾财建</h3>
    <p class="text-white/70 text-sm">© 2026 郑贾财建 版权所有</p>
  </div>
</footer>

<script>
// 移动端菜单
const menuBtn = document.getElementById('menuBtn');
const mobileMenu = document.getElementById('mobileMenu');
menuBtn.onclick = ()=>{
  mobileMenu.classList.toggle('hidden');
}
mobileMenu.querySelectorAll('a').forEach(link=>{
  link.onclick = ()=> mobileMenu.classList.add('hidden');
})

// 滚动渐入动画
const sections = document.querySelectorAll('.section-fade');
const observer = new IntersectionObserver((entries)=>{
  entries.forEach(item=>{
    if(item.isIntersecting){
      item.target.classList.add('section-show');
    }
  })
},{threshold:0.12})
sections.forEach(s=> observer.observe(s));

// 导航滚动效果
const nav = document.getElementById('navbar');
window.addEventListener('scroll',()=>{
  if(window.scrollY>80){
    nav.classList.add('shadow-lg');
  }else{
    nav.classList.remove('shadow-lg');
  }
})

// 表单简单提示
document.getElementById('contactForm').addEventListener('submit',e=>{
  e.preventDefault();
  alert('留言提交成功（演示），正式部署后可对接后端接收消息');
})
</script>
</body>
</html>