初始化项目

components/HeroSection.tsx

@@ -0,0 +1,128 @@
+'use client';
+
+import Image from 'next/image';
+
+export default function HeroSection() {
+  return (
+    <section className="relative w-full">
+      {/* .header - 背景容器 */}
+      <div
+        className="flex flex-col items-start justify-center flex-shrink-0 h-[670px] relative"
+        style={{
+          background: 'linear-gradient(to left, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55))',
+          padding: '114px 85px'
+        }}
+      >
+        {/* .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>
+
+        </div>
+      </div>
+    </section>
+  );
+}