写完首页一部分样式

index.html

@@ -64,50 +64,128 @@
 
   <!-- 头部导航区域 -->
   <header class="fixed w-full bg-white/90 backdrop-blur-sm shadow-sm z-50 transition-all duration-300">
-    <div class="container mx-auto px-4 py-3 flex justify-between items-center">
-      <a href="#" class="flex items-center space-x-2">
-        <div class="w-10 h-10 rounded-lg gradient-background flex items-center justify-center">
-          <img alt="赢在美股" src="https://d31zlh4on95l9h.cloudfront.net/images/497d8b38ab9f738e9720d5d7bddf3beb.png"
-            style="width: 40px;height: 40px;">
-        </div>
-        <span class="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-primary to-accent">
+    <div class="container mx-auto px-10 py-6 flex justify-between items-center max-w-[1600px]">
+      <a href="#" class="flex items-center gap-3">
+        <img
+          src="https://d31zlh4on95l9h.cloudfront.net/images/497d8b38ab9f738e9720d5d7bddf3beb.png"
+          alt="Logo"
+          class="w-10 h-10"
+        />
+        <span
+          class="font-bold text-[22px]"
+          style="
+            background: linear-gradient(270deg, #F9BF59 28.37%, #FFDBA1 50%, #F9BF59 70.67%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+          "
+        >
           赢在美股
         </span>
       </a>
 
-      <!-- 桌面导航菜单 -->
-      <nav class="hidden md:flex items-center space-x-8">
-        <a href="#features" class="font-medium hover:text-primary transition-colors">特色功能</a>
-        <a href="#kc" class="font-medium hover:text-primary transition-colors">最新课程</a>
-        <!-- <a href="hcdbqb-guide.html" class="font-medium hover:text-primary transition-colors">操作指南</a> -->
-        <a href="https://api.whatsapp.com/send?phone=85255110485&text=我需要帮助" target="_blank"
-          class="px-5 py-2 rounded-full gradient-background text-white font-medium hover:shadow-lg transition-all">
-          加入我们
+      <nav class="hidden lg:flex items-center space-x-14">
+        <!-- 首页（带下拉） -->
+        <div class="relative group ">
+          
+          <!-- 首页文字 -->
+          <div>
+            <a class="relative font-medium text-[#333333] hover:text-[#FFA300] cursor-pointer pb-4">
+              首页
+            </a>
+            <span class="arrow-box"></span>
+          </div>
+          <!-- 下拉菜单 -->
+          <div class="home-dropdown">
+            <a class="dropdown-item">
+              特色功能 
+            </a>
+            <a class="dropdown-item">
+              DeepChart下载
+            </a>
+            <a class="dropdown-item">
+              夺宝岛下载 
+            </a>
+            <a class="dropdown-item">
+              赢在美股专题课 
+            </a>
+          </div>
+
+        </div>
+        <span class="text-gray-300">|</span>
+        <a class="text-gray-700 hover:text-orange-500 font-medium">立即注册</a>
+        <span class="text-gray-300">|</span>
+        <a class="text-gray-700 hover:text-orange-500 font-medium">操作指南</a>
+        <span class="text-gray-300">|</span>
+        <a class="bg-orange-500 text-white px-6 py-2 rounded-full font-bold hover:bg-orange-600 shadow-md">
+          联系我们
         </a>
       </nav>
+    </div>
+  </header>
 
-      <!-- 移动端菜单按钮 -->
-      <button id="menuBtn" class="md:hidden text-xl">
-        <i class="fa fa-bars"></i>
-      </button>
+  <main class="" id="app">
+    <div style="height: 24px; align-self: stretch; background: #FFF3DD;" class="pt-28"></div>
+    <!-- 特色功能区域 -->
+    <section id="features" class="py-16 px-4 bg-white pt-32 bg-[url('https://d31zlh4on95l9h.cloudfront.net/files/5iujc601000dg58gif4guu1200qbnj3a.png')]
+         bg-cover bg-center bg-no-repeat">
+      <div class="container mx-auto max-w-6xl">
+        <div class="text-center mb-16 animate-fade-in">
+          <h2 class="text-[clamp(2rem,4vw,3rem)] font-bold mb-6 text-white heading-secondary">加入赢在美股，您可以免费体验什么？</h2>
+          <p class="text-white max-w-2xl mx-auto paragraph-text">您可以免费体验最前沿的AI工具,全球最懂机构行为的Deepchart,机构的黑科技夺宝奇兵,最前沿的分析课程和操作策略!</p>
         </div>
 
-    <!-- 移动端导航菜单 -->
-    <div id="mobileMenu" class="md:hidden hidden bg-white border-t animate-fade-in">
-      <div class="container mx-auto px-4 py-3 flex flex-col space-y-4">
-        <a href="#features" class="font-medium py-2 hover:text-primary transition-colors">特色功能</a>
-        <a href="#kc" class="font-medium py-2 hover:text-primary transition-colors">最新课程</a>
-        <!-- <a href="hcdbqb-guide.html" class="font-medium py-2 hover:text-primary transition-colors">操作指南</a> -->
-        <!-- <a href="#" class="font-medium py-2 hover:text-primary transition-colors">操作指南</a> -->
-        <a href="https://api.whatsapp.com/send?phone=85255110485&text=我需要帮助" target="_blank"
-          class="py-2 rounded-full gradient-background text-white font-medium text-center hover:shadow-lg transition-all">
-          加入我们
-        </a>
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+          <div class="animate-fade-in delay-100">
+            <div
+              class="p-8 rounded-2xl shadow-lg
+                    bg-[#FBEFEF]
+                    border-t-4 border-[#ED1818]
+                    transition-all duration-300 ease-out
+                    hover:-translate-y-2 hover:shadow-xl"
+            >
+              <div class="w-14 h-14 rounded-xl bg-red-100 flex items-center justify-center mb-6">
+                <img src="https://d31zlh4on95l9h.cloudfront.net/files/5iujc601000dg5bad6avznn400jwiqwu.png" />
+              </div>
+              <h3 class="text-xl font-semibold mb-3">DeepChart</h3>
+              <p class="text-gray-600">您的股市随身顾问<br />深度解读机构行为，祝您股海乘风破浪</p>
+            </div>
+          </div>
+
+          <div class="animate-fade-in delay-200">
+            <div
+              class="p-8 rounded-2xl shadow-lg
+                    bg-[#F1F6FF]
+                    border-t-4 border-[#3B93FF]
+                    transition-all duration-300 ease-out
+                    hover:-translate-y-2 hover:shadow-xl"
+            >
+              <div class="w-14 h-14 rounded-xl bg-blue-100 flex items-center justify-center mb-6">
+                <img src="https://d31zlh4on95l9h.cloudfront.net/files/5iujc601000dg5bapwystqy500k1h6xw.png" />
+              </div>
+              <h3 class="text-xl font-semibold mb-3">夺宝奇兵</h3>
+              <p class="text-gray-600">采用最先进的安全技术，保护您的数据和隐私，让您高枕无忧的开展业务</p>
             </div>
           </div>
-  </header>
 
-  <!-- 英雄区域 -->
+          <div class="animate-fade-in delay-300">
+            <div
+              class="p-8 rounded-2xl shadow-lg
+                    bg-[#FBF6EF]
+                    border-t-4 border-[#EC8D0E]
+                    transition-all duration-300 ease-out
+                    hover:-translate-y-2 hover:shadow-xl"
+            >
+              <div class="w-14 h-14 rounded-xl bg-orange-100 flex items-center justify-center mb-6">
+                <img src="https://d31zlh4on95l9h.cloudfront.net/files/5iujc601000dg5bb0rllyv0600wgiveo.png" />
+              </div>
+              <h3 class="text-xl font-semibold mb-3">赢在美股专题课</h3>
+              <p class="text-gray-600">根据您的具体需求提供个性化解决方案，灵活适应不同业务场景和规模</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  <!-- 英雄区域
     <section class="pt-32 pb-20 md:pt-40 md:pb-32 px-4 bg-gradient-to-b from-blue-50 to-white">
       <div class="container mx-auto max-w-6xl">
         <div class="flex flex-col md:flex-row items-center">
@@ -145,52 +223,19 @@
           </div>
         </div>
       </div>
-  </section>
-
-  <!-- 特色功能区域 -->
-  <section id="features" class="py-16 px-4 bg-white">
-    <div class="container mx-auto max-w-6xl">
-      <div class="text-center mb-16 animate-fade-in">
-        <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-4 heading-secondary">加入赢在美股，您可以免费体验什么？</h2>
-        <p class="text-gray-600 max-w-2xl mx-auto paragraph-text">您可以免费体验超级云脑 AI预测大模型 夺宝利剑三个模块 7 天，助力您赢在美股！</p>
-      </div>
-
-      <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
-        <div class="bg-white p-8 rounded-2xl shadow-lg card-hover-effect animate-fade-in delay-100">
-          <div class="w-14 h-14 rounded-xl bg-blue-100 flex items-center justify-center mb-6">
-            <img alt="夺宝奇兵" src="https://hc.homilychart.com/hc/250121/img/chaojiyunnao.png">
-          </div>
-          <h3 class="text-xl font-semibold mb-3 heading-tertiary">超级云脑</h3>
-          <p class="text-gray-600 paragraph-text">您的股票该体检了！<br />从十大维度，为您的股票进行全面体检！</p>
-        </div>
-
-        <div class="bg-white p-8 rounded-2xl shadow-lg card-hover-effect animate-fade-in delay-200">
-          <div class="w-14 h-14 rounded-xl bg-purple-100 flex items-center justify-center mb-6">
-            <img alt="夺宝奇兵" src="https://hc.homilychart.com/hc/250121/img/AIyuce.png">
-          </div>
-          <h3 class="text-xl font-semibold mb-3 heading-tertiary">AI预测大模型</h3>
-          <p class="text-gray-600 paragraph-text">采用最先进的安全技术，保护您的数据和隐私，让您高枕无忧地开展业务。</p>
-        </div>
-
-        <div class="bg-white p-8 rounded-2xl shadow-lg card-hover-effect animate-fade-in delay-300">
-          <div class="w-14 h-14 rounded-xl bg-green-100 flex items-center justify-center mb-6">
-            <img alt="夺宝奇兵" src="https://hc.homilychart.com/hc/250121/img/duobaolijian.png">
-          </div>
-          <h3 class="text-xl font-semibold mb-3 heading-tertiary">夺宝利剑</h3>
-          <p class="text-gray-600 paragraph-text">根据您的具体需求提供个性化解决方案，灵活适应不同业务场景和规模。</p>
-        </div>
-      </div>
-    </div>
-  </section>
-
+    </section> -->
     <!-- 产品宣传区域 -->
     <section id="promotions" class="py-20 px-4 bg-gray-50">
       <div class="container mx-auto max-w-6xl">
-      <div class="text-center mb-16 animate-fade-in">
+        <!-- <div class="text-center mb-16 animate-fade-in">
           <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-4 heading-secondary">我们的创新解决方案</h2>
           <p class="text-gray-600 max-w-2xl mx-auto paragraph-text">探索我们的核心产品和服务，了解如何为您的业务创造价值</p>
+        </div> -->
+        <div class="mb-6 text-center">
+          <h4 class="text-3xl md:text-4xl font-semibold text-gray-800">
+            教育精英化 · 武器AI化
+          </h4>
         </div>
-
         <!-- 宣传项 1 - 超级云脑 -->
         <div class="bg-white rounded-3xl shadow-xl overflow-hidden mb-16 flex flex-col md:flex-row animate-fade-in">
           <div class="md:w-1/2 promotion-image">
@@ -198,21 +243,22 @@
           </div>
           <div class="md:w-1/2 p-8 md:p-12 flex flex-col justify-center">
             <span
-            class="inline-block px-4 py-1 rounded-full bg-blue-100 text-primary text-base font-medium mb-4 breadcrumb-text">
-            HomilyLink > 夺宝奇兵 > 超级云脑
+              class="inline-block px-4 py-1 rounded-full bg-red-100 text-red-600 text-base font-medium mb-4 breadcrumb-text">
+              路径：DeepChart
             </span>
-          <h3 class="text-2xl md:text-3xl font-bold mb-4 heading-tertiary">超级云脑:股票体检专家</h3>
-          <p class="text-gray-600 mb-6 paragraph-text">
-            利用人工智能和机器学习技术，快速处理和分析海量数据，通过十大维度为您的股票进行专科体检，追踪机构行为。
+            <h3 class="text-2xl md:text-3xl font-bold  heading-tertiary">DeepChart:全球最懂机构行为的AI</h3>
+            <br class="text-gray-600 mb-6 paragraph-text">
+              AI时代就用AI投资!</br>立即下载，免费体验1个月。全球首发500个名额，抢完即止!
             </p>
             <ul class="space-y-3 mb-8">
               <li class="flex items-start list-item">
                 <i class="fa fa-check-circle text-secondary mt-1 mr-3"></i>
-              <span>云脑探秘：深度解析股市底层数据</span>
+                <span>Deepmate:  Al通用大模型(弘历特色)</span>
               </li>
               <li class="flex items-start list-item">
                 <i class="fa fa-check-circle text-secondary mt-1 mr-3"></i>
-              <span>机构动向：实时追踪机构资金动向</span>
+                <span>深度探索:</span>
+                <span>股市正在从"判断方向"，进入"识别资金"的时代。<br>“深度探索”带您看透机构，深度理解市场资本本质!</span>
               </li>
               <li class="flex items-start list-item">
                 <i class="fa fa-check-circle text-secondary mt-1 mr-3"></i>
@@ -226,17 +272,22 @@
         </div>
 
         <!-- 宣传项 2 - AI预测大模型 -->
+        <div class="mb-6 text-center">
+          <h4 class="text-xl md:text-2xl font-semibold text-gray-800">
+            夺宝奇兵下载体验
+          </h4>
+        </div>
         <div
           class="bg-white rounded-3xl shadow-xl overflow-hidden mb-16 flex flex-col md:flex-row-reverse animate-fade-in delay-100">
           <div class="md:w-1/2 promotion-image">
             <img src="https://hc.homilychart.com/hc/250121/img/aiyucedamoxing.jpg" alt="AI预测大模型" class="w-full h-full">
           </div>
           <div class="md:w-1/2 p-8 md:p-12 flex flex-col justify-center">
-          <span
+            <!-- <span
               class="inline-block px-4 py-1 rounded-full bg-purple-100 text-accent text-base font-medium mb-4 breadcrumb-text">
               HomilyLink > 夺宝奇兵 > AI预测大模型
-          </span>
-          <h3 class="text-2xl md:text-3xl font-bold mb-4 heading-tertiary">AI预测大模型</h3>
+            </span> -->
+            <h3 class="text-3xl md:text-4xl font-bold mb-4 heading-tertiary">AI预测大模型</h3>
             <p class="text-gray-600 mb-6 paragraph-text">
               AI 预测大模型颠覆传统，以深度学习与算法挖股市数据抓趋势、预测高低点；AI时空共振结合前沿 AI与时空共振精准识别变盘点。
             </p>
@@ -260,7 +311,7 @@
           </div>
         </div>
 
-      <!-- 宣传项 3 - 夺宝利剑 -->
+        <!-- 宣传项 3 - 夺宝利剑
         <div
           class="bg-white rounded-3xl shadow-xl overflow-hidden mb-16 flex flex-col md:flex-row animate-fade-in delay-100">
           <div class="md:w-1/2 promotion-image">
@@ -293,9 +344,14 @@
               加入赢在美股，解锁更多资讯 <i class="fa fa-arrow-right ml-2"></i>
             </a>
           </div>
-      </div>
+        </div> -->
 
         <!-- 宣传项 4 - 专题讲座 -->
+        <div class="mb-6 text-center">
+          <h4 class="text-3xl md:text-4xl font-semibold text-gray-800">
+            赢家粉内部专题讲座
+          </h4>
+        </div>
         <div id="kc"
           class="bg-white rounded-3xl shadow-xl overflow-hidden flex flex-col md:flex-row animate-fade-in delay-200">
           <div class="md:w-1/2 promotion-image">
@@ -303,7 +359,7 @@
           </div>
           <div class="md:w-1/2 p-8 md:p-12 flex flex-col justify-center">
             <span
-            class="inline-block px-4 py-1 rounded-full bg-green-100 text-secondary text-base font-medium mb-4 breadcrumb-text">
+              class="inline-block px-4 py-1 rounded-full bg-amber-100 text-amber-600 text-base font-medium mb-4 breadcrumb-text">
               HomilyLink > 消息 > 赢在美股班级群
             </span>
             <h3 class="text-2xl md:text-3xl font-bold mb-4 heading-tertiary">HomilyLink专题讲座</h3>
@@ -465,7 +521,7 @@
         </div>
       </div>
     </section>
-
+ </main>
   <!-- 页脚区域 -->
   <footer class="footer-bg text-white py-12 px-4">
       <div class="container mx-auto max-w-6xl">
@@ -554,7 +610,6 @@
         </div>
       </div>
   </footer>
-
   <!-- 表单提交成功提示模态框 -->
   <div id="successModal" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 hidden">
     <div class="bg-white rounded-2xl p-8 max-w-md w-full mx-4 transform transition-all relative">
@@ -1158,14 +1213,6 @@
       text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
     }
 
-    .card-hover-effect {
-      transition: all 0.3s ease;
-    }
-
-    .card-hover-effect:hover {
-      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
-      transform: translateY(-4px);
-    }
 
     .gradient-background {
       background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%);
@@ -1220,6 +1267,59 @@
       background-position: center;
       background-repeat: no-repeat;
     }
+    
+    .arrow-box {
+      display: inline-block;
+      width: 8px;
+      height: 8px;
+      border-right: 2px solid #333;
+      border-bottom: 2px solid #333;
+      transform: rotate(45deg) translateY(-4px);
+      margin-left: 6px;
+      transition: transform 0.2s ease, border-color 0.2s ease;
+    }
+    .group:hover .arrow-box {
+      border-color: #FFA300;
+      transform: rotate(225deg);
+    }
+    /* 下拉菜单 */
+    .home-dropdown {
+      position: absolute;
+      top: 28px;
+      left: 50%;
+      transform: translateX(-50%);
+      background: #fff;
+      min-width: 150px;
+      padding: 0px 0;
+      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
+      display: none;
+      z-index: 50;
+    }
+
+    .group:hover .home-dropdown {
+      display: block;
+    }
+    .group:hover .dropdown-item:first-child {
+      border-top: 2px solid #FFA300;
+    }
+
+    /* 下拉项 */
+    .dropdown-item {
+      display: block;
+      padding: 14px 20px;
+      font-size: 16px;          /* 字体变大 */
+      font-weight: 400;
+      color: #333;
+      text-align: center;       /* 文本居中 */
+      cursor: pointer;
+      white-space: nowrap;
+      transition: background 0.2s ease, color 0.2s ease;
+    }
+
+    .dropdown-item:hover {
+      color: #FFA300;
+    }
+
   </style>
 </body>