tailwindcss布局实现pc端简洁风格ai全息数字人落地页官网介绍代码-html代码-BFW代码库

代码语言：html

代码描述：tailwindcss布局实现pc端简洁风格ai全息数字人落地页官网介绍代码

代码标签： tailwind css 布局 pc端简洁风格 ai 全息数字人落地页官网介绍代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Holosapiens - 全球领先的多模态AI全息数字人大模型</title>
  <!-- 引入外部资源 -->
  <!-- 引入Tailwind CSS -->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tailwindcss.3.4.16.js"></script>
  <!-- 引入Font Awesome -->
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
  <!-- 引入Chart.js -->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/chart.umd.4.4.1.js"></script>
  
  
  <!-- Tailwind 配置 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#0B4CD1',
            secondary: '#7B2FFD',
            accent: '#00E5FF',
            dark: '#0A1124',
            light: '#F0F4FF',
            'neutral-dark': '#1E293B',
            'neutral-light': '#E2E8F0'
          },
          fontFamily: {
            inter: ['Inter', 'system-ui', 'sans-serif'],
          },
          animation: {
            'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite',
            'float': 'float 6s ease-in-out infinite',
            'glow': 'glow 2s ease-in-out infinite alternate',
            'scan': 'scan 2s ease-in-out infinite'
          },
          keyframes: {
            float: {
              '0%, 100%': { transform: 'translateY(0)' },
              '50%': { transform: 'translateY(-20px)' }
            },
            glow: {
              '0%': { boxShadow: '0 0 5px rgba(0, 229, 255, 0.5), 0 0 10px rgba(0, 229, 255, 0.3)' },
              '100%': { boxShadow: '0 0 10px rgba(0, 229, 255, 0.8), 0 0 20px rgba(0, 229, 255, 0.5), 0 0 30px rgba(0, 229, 255, 0.3)' }
            },
            scan: {
              '0%': { backgroundPosition: '0% 0%' },
              '100%': { backgroundPosition: '0% 100%' }
            }
          }
        },
      }
    }
  </script>
  
  <!-- 自定义样式 -->
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .text-gradient {
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
      .bg-grid {
        background-image: 
          linear-gradient(rgba(11, 76, 209, 0.1) 1px, transparent 1px),
          linear-gradient(90deg, rgba(11, 76, 209, 0.1) 1px, transparent 1px);
        background-size: 20px 20px;
      }
      .hologram-effect {
        position: relative;
       
      }
      .hologram-effect::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(
          to bottom,
          transparent 0%,
          rgba(0, 229, 255, 0.1) 50%,
          transparent 100%
        );
        background-size: 100% 200%;
        animation: scan 4s linear infinite;
        pointer-events: none;
      }
      .glass-effect {
        backdrop-filter: blur(12px);
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
      }
      .neon-border {
        box-shadow: 0 0 5px rgba(0, 229, 255, 0.7), 
                    inset 0 0 5px rgba(0, 229, 255, 0.5);
      }
      .perspective {
        perspective: 1000px;
      }
      .preserve-3d {
        transform-style: preserve-3d;
      }
    }
  </style>
</head>

<body class="font-inter bg-dark text-white antialiased overflow-x-hidden">
  <!-- 背景装饰 -->
  <div class="fixed inset-0 bg-grid opacity-30 z-0"></div>
  <div class="fixed top-0 left-0 w-full h-96 bg-gradient-to-b from-primary/20 to-transparent z-0"></div>
  <div class="fixed bottom-0 left-0 w-full h-96 bg-gradient-to-t from-secondary/20 to-transparent z-0"></div>
  
  <!-- 导航栏 -->
  <header id="navbar" class="fixed w-full top-0 z-50 transition-all duration-300">
    <div class="container mx-auto px-4 md:px-6 lg:px-8">
      <div class="flex items-center justify-between h-16 md:h-20">
        <!-- Logo -->
        <a href="#" class="flex items-center space-x-2 z-10">
          <div class="w-10 h-10 rounded-lg bg-gradient-to-br from-primary to-secondary flex items-center justify-center neon-border">
            <i class="fa fa-user-circle text-accent text-xl"></i>
          </div>
          <span class="text-xl font-bold bg-gradient-to-r from-accent to-secondary text-gradient">Holosapiens</span>
        </a>
        
        <!-- 桌面导航 -->
        <nav class="hidden md:flex items-center space-x-8 z-10">
          <a href="#features" class="text-white/80 hover:text-accent transition-colors">核心功能</a>
          <a href="#technology" class="text-white/80 hover:text-accent transition-colors">技术优势</a>
          <a href="#applications" class="text-white/80 hover:text-accent transition-colors">应用场景</a>
          <a href="#cases" class="text-white/80 hover:text-accent transition-colors">客户案例</a>
          <a href="#pricing" class="text-white/80 hover:text-accent transition-colors">定价方案</a>
        </nav>
        
        <!-- 按钮组 -->
        <div class="hidden md:flex items-center space-x-4 z-10">
          <a href="#" class="text-accent hover:text-accent/80 transition-colors">登录</a>
          <a href="#" class="px-5 py-2 bg-gradient-to-r from-primary to-secondary hover:opacity-90 text-white rounded-lg transition-all shadow-lg hover:shadow-accent/20 neon-border">
            申请试用
          </a>
        </div>
        
        <!-- 移动端菜单按钮 -->
        <button id="menu-toggle" class="md:hidden text-white hover:text-accent transition-colors z-10">
          <i class="fa fa-bars text-2xl"></i>
        </button>
      </div>
    </div>
    
    <!-- 移动端导航菜单 -->
    <div id="mobile-menu" class="md:hidden hidden glass-effect border-t border-white/10 animate-fadeIn">
      <div class="container mx-auto px-4 py-3 space-y-3">
        <a href="#features" class="block py-2 text-white/80 hover:text-accent transition-colors">核心功能</a>
        <a href="#technology" class="block py-2 text-white/80 hover:text-accent transition-colors">技术优势</a>
        <a href="#applications" class="block py-2 text-white/80 hover:text-accent transition-colors">应用场景</a>
        <a href="#cases" class="block py-2 text-white/80 hover:text-accent transition-colors">客户案例</a>
        <a href="#pricing" class="block py-2 text-white/80 hover:text-accent transition-colors">定价方案</a>
        <div class="flex space-x-4 pt-2 border-t border-white/10">
          <a href="#" class="text-accent hover:text-accent/80 transition-colors">登录</a>
          <a href="#" class="px-5 py-2 bg-gradient-to-r from-primary to-secondary hover:opacity-90 text-white rounded-lg transition-all neon-border">
            申请试用
          </a>
        </div>
      </div>
    </div>
  </header>

  <main>
    <!-- 英雄区域 -->
    <section class="pt-32 pb-20 md:pt-40 md:pb-32 relative overflow-hidden">
      <div class="container mx-auto px-4 md:px-6 lg:px-8 relative z-10">
        <div class="flex flex-col lg:flex-row items-center gap-12">
          <div class="w-full lg:w-1/2 space-y-6">
            <div class="inline-block px-4 py-1 rounded-full glass-effect text-accent text-sm font-medium mb-2">
              全球领先的多模态AI全息数字人技术
            </div>
            <h1 class="text-[clamp(2.5rem,5vw,4rem)] font-bold leading-tight">
              重新定义人与<br>
              <span class="bg-gradient-to-r from-accent to-secondary text-gradient">AI全息数字人</span><br>
              的交互方式
            </h1>
            <p class="text-lg md:text-xl text-white/70 max-w-xl">
              Holosapiens多模态AI全息数字人大模型，融合计算机视觉、自然语言处理与全息投影技术，打造具有真实感、情感化的全息交互体验。
            </p>
            <div class="flex flex-col sm:flex-row gap-4 pt-4">
              <a href="#" class="px-8 py-4 bg-gradient-to-r from-primary to-secondary hover:opacity-90 text-white rounded-lg text-center font-medium transition-all shadow-lg hover:shadow-xl hover:shadow-accent/30 neon-border">
                立即体验
              </a>
              <a href="#" class="px-8 py-4 glass-effect hover:bg-white/10 text-white border border-white/10 rounded-lg text-center font-medium transition-all flex items-center justify-center gap-2">
                <i class="fa fa-play-circle-o text-accent"></i> 观看演示
              </a>
            </div>
            <div class="flex items-center gap-4 pt-6">
              <div class="flex -space-x-3">
                <img src="https://picsum.photos/200/200?random=10" alt="用户头像" class="w-10 h-10 rounded-full border-2 border-dark">
                <img src="https://picsum.photos/200/200?random=11" alt="用户头像" class="w-10 h-10 rounded-full border-2 border-dark">
                <img src="https://picsum.photos/200/200?random=12" alt="用户头像" class="w-10 h-10 rounded-full border-2 border-dark">
                <img src="https://picsum.photos/200/200?random=13" alt="用户头像" class="w-10 h-10 rounded-full border-2 border-dark">
                <div class="w-10 h-10 rounded-full border-2 border-dark bg-primary/30 flex items-center justify-center text-xs font-bold">
                  200+
                </div>
              </div>
              <p class="text-white/70 text-sm">
                全球<span class="font-semibold text-accent">200+</span>企业已部署
              </p>
            </div>
          </div>
          <div class="w-full lg:w-1/2 perspective">
            <div class="relative z-10 animate-float hologram-effect preserve-3d">
              <img src="https://picsum.photos/800/600?random=50" alt="AI全息数字人展示" class="rounded-xl neon-bord.........完整代码请登录后点击上方下载按钮下载查看