nav新增动画，修复潜在的性能和bug，优化动画流畅度

components/HeroButtons.tsx

@@ -30,7 +30,7 @@ export default function HeroButtons() {
     >
       {/* .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:bg-[#f3f4f6] transition-colors"
+        className="bg-white flex flex-row gap-2 items-center justify-center flex-shrink-0 h-[60px] relative overflow-hidden hover:bg-[#f3f4f6] transition-colors select-none"
         style={{
           borderRadius: '4px',
           padding: '0px 32px'
@@ -61,7 +61,7 @@ export default function HeroButtons() {
 
       {/* .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/70 hover:border-white/60 transition-all"
+        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/70 hover:border-white/60 transition-all select-none"
         style={{
           background: 'rgba(255, 255, 255, 0.1)',
           borderRadius: '4px',

components/HeroSection.tsx

@@ -14,7 +14,14 @@ export default function HeroSection() {
         muted
         playsInline
         className="absolute inset-0 w-full h-full object-cover"
-        style={{ zIndex: 0 }}
+        style={{
+          zIndex: 0,
+          objectFit: 'cover',
+          objectPosition: 'center center',
+          minWidth: '100%',
+          minHeight: '100%',
+          transform: 'scale(1.1)'
+        }}
       >
         <source src="/hero-background.mp4" type="video/mp4" />
       </video>

components/HowItWorksSection.tsx

@@ -270,8 +270,8 @@ export default function HowItWorksSection() {
             boxShadow: '0px 25px 50px -12px rgba(0, 0, 0, 0.25)',
             transformOrigin: '0 0',
             transform: animate && activeStep === 1
-              ? 'rotate(6.535deg) scale(1, 1) translateY(0)'
+              ? 'rotate(6.535deg) scale(1, 1) translateX(0)'
-              : 'rotate(6.535deg) scale(1, 1) translateY(3rem)',
+              : 'rotate(6.535deg) scale(1, 1) translateX(3rem)',
             transitionDelay: activeStep === 1 ? '200ms' : '0ms',
             pointerEvents: activeStep === 1 ? 'auto' : 'none'
           }}
@@ -305,8 +305,8 @@ export default function HowItWorksSection() {
             }`}
             style={{
               transform: animate && activeStep === 1
-                ? 'rotate(-3deg) translateY(0)'
+                ? 'rotate(-3deg) translateX(0)'
-                : 'rotate(-3deg) translateY(3rem)',
+                : 'rotate(-3deg) translateX(3rem)',
               transformOrigin: 'center center',
               transitionDelay: activeStep === 1 ? '200ms' : '0ms',
               pointerEvents: activeStep === 1 ? 'auto' : 'none'
@@ -420,8 +420,8 @@ export default function HowItWorksSection() {
             style={{
               boxShadow: '0px 25px 50px -12px rgba(0, 0, 0, 0.25)',
               transform: animate && activeStep === 2
-                ? 'rotate(3deg) translateY(0)'
+                ? 'rotate(3deg) translateX(0)'
-                : 'rotate(3deg) translateY(3rem)',
+                : 'rotate(3deg) translateX(3rem)',
               transformOrigin: '0 0',
               transitionDelay: activeStep === 2 ? '200ms' : '0ms',
               pointerEvents: activeStep === 2 ? 'auto' : 'none'
@@ -493,8 +493,8 @@ export default function HowItWorksSection() {
             style={{
               boxShadow: '0px 25px 50px -12px rgba(0, 0, 0, 0.25)',
               transform: animate && activeStep === 3
-                ? 'rotate(3deg) translateY(0)'
+                ? 'rotate(3deg) translateX(0)'
-                : 'rotate(3deg) translateY(3rem)',
+                : 'rotate(3deg) translateX(3rem)',
               transformOrigin: '0 0',
               transitionDelay: activeStep === 3 ? '200ms' : '0ms',
               overflow: 'hidden',
@@ -545,7 +545,7 @@ export default function HowItWorksSection() {
                       +10% APY
                     </span>
                     <div
-                      className="bg-[#000000] rounded-lg px-4 py-2"
+                      className="bg-[#000000] rounded-lg px-4 py-2 flex items-center justify-center"
                       style={{ transform: 'rotate(-3deg)', transformOrigin: '0 0' }}
                     >
                       <span className="text-white font-inter text-[12px] font-bold leading-4">
@@ -578,7 +578,7 @@ export default function HowItWorksSection() {
                       +10% APY
                     </span>
                     <div
-                      className="bg-[#000000] rounded-lg px-4 py-2"
+                      className="bg-[#000000] rounded-lg px-4 py-2 flex items-center justify-center"
                       style={{ transform: 'rotate(-3deg)', transformOrigin: '0 0' }}
                     >
                       <span className="text-white font-inter text-[12px] font-bold leading-4">
@@ -611,7 +611,7 @@ export default function HowItWorksSection() {
                       +10% APY
                     </span>
                     <div
-                      className="bg-[#000000] rounded-lg px-4 py-2"
+                      className="bg-[#000000] rounded-lg px-4 py-2 flex items-center justify-center"
                       style={{ transform: 'rotate(-3deg)', transformOrigin: '0 0' }}
                     >
                       <span className="text-white font-inter text-[12px] font-bold leading-4">
@@ -644,7 +644,7 @@ export default function HowItWorksSection() {
                       Get USDC
                     </span>
                     <div
-                      className="bg-[#000000] rounded-lg px-4 py-2"
+                      className="bg-[#000000] rounded-lg px-4 py-2 flex items-center justify-center"
                       style={{ transform: 'rotate(-3deg)', transformOrigin: '0 0' }}
                     >
                       <span className="text-white font-inter text-[12px] font-bold leading-4">
@@ -677,7 +677,7 @@ export default function HowItWorksSection() {
                       10% APY
                     </span>
                     <div
-                      className="bg-[#000000] rounded-lg px-4 py-2"
+                      className="bg-[#000000] rounded-lg px-4 py-2 flex items-center justify-center"
                       style={{ transform: 'rotate(-3deg)', transformOrigin: '0 0' }}
                     >
                       <span className="text-white font-inter text-[12px] font-bold leading-4">

components/Navbar.tsx

@@ -133,19 +133,19 @@ export default function Navbar() {
       {/* Launch App Button & Language Selector */}
       <div className="flex-1 flex justify-end items-center gap-4">
         <div
-          className="bg-[#111827] rounded-lg px-5 py-2.5 h-10 flex items-center justify-center overflow-hidden cursor-pointer hover:opacity-90 select-none"
           style={{
             transform: animate ? 'translateY(0)' : 'translateY(-3rem)',
             opacity: animate ? 1 : 0,
-            transition: 'all 1s ease-out',
+            transition: 'transform 1s ease-out 200ms, opacity 1s ease-out 200ms'
-            transitionDelay: '200ms'
           }}
           suppressHydrationWarning
         >
+          <div className="bg-[#111827] rounded-lg px-5 py-2.5 h-10 flex items-center justify-center overflow-hidden cursor-pointer hover:scale-105 select-none transition-transform duration-300">
             <span className="text-[#fcfcfd] font-bold text-sm leading-[150%] font-inter">
               {t('nav.launchApp')}
             </span>
           </div>
+        </div>
 
         {/* Language Selector */}
         <div className="relative language-selector">

components/ShatterTransition.tsx

@@ -7,9 +7,9 @@ interface ShatterTransitionProps {
   onComplete: () => void;
 }
 
-// 增加网格密度以获得更细腻的破碎感
+// 优化性能：减少碎片数量
-const GRID_COLS = 10;
+const GRID_COLS = 7;
-const GRID_ROWS = 10;
+const GRID_ROWS = 7;
 
 export default function ShatterTransition({ isActive, onComplete }: ShatterTransitionProps) {
   const [isAnimating, setIsAnimating] = useState(false);

components/TrustedBySection.tsx

@@ -98,13 +98,13 @@ export default function TrustedBySection() {
         {partners.map((partner, index) => (
           <div
             key={partner.name}
-            className={`flex-shrink-0 relative overflow-hidden transition-all duration-700 ease-out ${
+            className={`flex-shrink-0 relative overflow-hidden cursor-pointer hover:brightness-0 ${
               animate
                 ? 'translate-y-0 opacity-100'
                 : 'translate-y-12 opacity-0'
             }`}
             style={{
-              transitionDelay: `${index * 100}ms`,
+              transition: `transform 0.7s ease-out ${index * 100}ms, opacity 0.7s ease-out ${index * 100}ms, filter 0.3s ease-out`,
               width: `${partner.width}px`,
               height: `${partner.height}px`,
               aspectRatio: `${partner.width}/${partner.height}`