打磨细节

components/HeroSection.tsx

@@ -1,125 +1,39 @@
 'use client';
 
-import Image from 'next/image';
+import HeroTitle from './HeroTitle';
+import HeroButtons from './HeroButtons';
 
 export default function HeroSection() {
+
   return (
-    <section className="relative w-full">
+    <section className="relative w-full" style={{ overflow: 'hidden' }} suppressHydrationWarning>
+      {/* Background Video */}
+      <video
+        autoPlay
+        loop
+        muted
+        playsInline
+        className="absolute inset-0 w-full h-full object-cover"
+        style={{ zIndex: 0 }}
+      >
+        <source src="/hero-background.mp4" type="video/mp4" />
+      </video>
+
       {/* .header - 背景容器 */}
       <div
-        className="flex flex-col items-start justify-center flex-shrink-0 h-[670px] relative"
+        className="flex flex-col items-start justify-center flex-shrink-0 relative"
         style={{
           background: 'linear-gradient(to left, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55))',
-          padding: '114px 85px'
+          padding: '114px 85px 164px 85px',
+          minHeight: '670px',
+          zIndex: 1
         }}
+        suppressHydrationWarning
       >
         {/* .frame-21 - 主内容容器 */}
         <div className="flex flex-col gap-[60px] flex-shrink-0 w-[926px] relative">
-
-          {/* .frame-25 - 标题和描述区域 */}
-          <div className="flex flex-col gap-8 items-start justify-start self-stretch flex-shrink-0 relative">
-
-            {/* .frame-22 - 标题容器 */}
-            <div className="flex flex-col gap-4 items-start justify-start self-stretch flex-shrink-0 relative">
-              {/* .yield-bearing-asset */}
-              <div
-                className="text-[#fcfcfd] text-left relative self-stretch font-domine"
-                style={{
-                  fontSize: '100px',
-                  lineHeight: '100%',
-                  letterSpacing: '-0.03em',
-                  fontWeight: 400
-                }}
-              >
-                Yield-Bearing Asset
-              </div>
-
-              {/* .on-chain */}
-              <div
-                className="text-[#fcfcfd] text-left relative w-[926px] h-[100px] font-domine"
-                style={{
-                  fontSize: '100px',
-                  lineHeight: '100%',
-                  letterSpacing: '-0.03em',
-                  fontWeight: 700
-                }}
-              >
-                On Chain.
-              </div>
-            </div>
-
-            {/* Description text */}
-            <div
-              className="text-[#fcfcfd] text-left relative w-[488px] flex items-center justify-start font-domine"
-              style={{
-                fontSize: '16px',
-                lineHeight: '150%',
-                fontWeight: 400
-              }}
-            >
-              Access Yield- Bearing Asset like Equities, Real Estate, and
-              Commercial Loans with low barriers. Enjoy 10%-30% APY backed by
-              real assets.
-            </div>
-          </div>
-
-          {/* .frame-23 - 按钮容器 */}
-          <div className="flex flex-row gap-5 items-start justify-start flex-shrink-0 relative">
-
-            {/* .component-82 - Start Investing Button */}
-            <button
-              className="bg-white flex flex-row gap-2 items-center justify-center flex-shrink-0 h-[60px] relative overflow-hidden hover:opacity-90 transition-opacity"
-              style={{
-                borderRadius: '4px',
-                padding: '0px 32px'
-              }}
-            >
-              {/* .text4 */}
-              <div
-                className="text-[#111827] text-center relative flex items-center justify-center font-inter"
-                style={{
-                  fontSize: '18px',
-                  lineHeight: '150%',
-                  fontWeight: 700
-                }}
-              >
-                Start Investing
-              </div>
-
-              {/* .component-1 - Arrow icon */}
-              <Image
-                src="/component-10.svg"
-                alt="Arrow"
-                width={20}
-                height={20}
-                className="flex-shrink-0 w-5 h-5 relative overflow-visible"
-                style={{ aspectRatio: 1 }}
-              />
-            </button>
-
-            {/* .component-9 - Read the Whitepaper Button */}
-            <button
-              className="border border-white/20 flex flex-row gap-2 items-center justify-center self-stretch flex-shrink-0 relative overflow-hidden hover:bg-white/20 transition-colors"
-              style={{
-                background: 'rgba(255, 255, 255, 0.1)',
-                borderRadius: '4px',
-                padding: '12px 32px',
-                backdropFilter: 'blur(30px)'
-              }}
-            >
-              {/* .text5 */}
-              <div
-                className="text-[#fcfcfd] text-center relative flex items-center justify-center font-inter"
-                style={{
-                  fontSize: '18px',
-                  lineHeight: '150%',
-                  fontWeight: 700
-                }}
-              >
-                Read the Whitepaper
-              </div>
-            </button>
-          </div>
+          <HeroTitle />
+          <HeroButtons />
 
         </div>
       </div>